/* ------------ */



.banner-box {

    width: 100%;

    overflow: hidden;

}



.banner {

    width: 100%;

    overflow: hidden;

}



.swiper-container-banner {

    width: 100%;

    position: relative;

}



.banner-web-pic,

.banner-phone-pic {

    width: 100%;

}



.banner-box .swiper-slide {

    overflow: hidden;

    position: relative;

}



.banner-box .swiper-slide img {

    width: 100%;

    object-fit: cover;

    transform: matrix(1.1, 0, 0, 1.1, 0, 0);

    -webkit-transition: all 0.4s ease 1.2s;

    -moz-transition: all 0.4s ease 1.2s;

    -ms-transition: all 0.4s ease 1.2s;

    -o-transition: all 0.4s ease 1.2s;

    transition: all 0.4s ease 1.2s;

}



.banner-box .swiper-slide-active img {

    transition-delay: 0.4s !important;

    transform: matrix(1, 0, 0, 1, 0, 0);

    -webkit-transition: all 5s ease;

    -moz-transition: all 5s ease;

    -ms-transition: all 5s ease;

    -o-transition: all 5s ease;

    transition: all 5s ease;

}



@media all and (min-width:1000px) {

    .banner-web-pic {

        display: block;

    }

    .banner-phone-pic {

        display: none;

    }

}



@media all and (max-width:1000px) {

    .banner-web-pic {

        display: none;

    }

    .banner-phone-pic {

        display: block;

    }

}



.banner-text {

    width: 100%;

    height: auto;

    position: absolute;

    left: 50%;

    top: 18%;

    transform: translate(-50%, -50%);

    z-index: 33;

    text-align: center;

}



.banner-text h2 {

    font-size: 60px;

    font-family: 'opensansB';

    color: #fff;

    text-transform: uppercase;

}



.swiper-slide-active .banner-text h2 {

    animation: bannerupV 2s ease both;

}



@keyframes bannerupV {

    0% {

        transform: translateY(-30px);

        opacity: 0;

    }

    100% {

        transform: translateY(0);

        opacity: 1;

    }

}



.banner-text p {

    font-size: 28px;

    font-family: 'opensansB';

    color: #fff;

    margin-top: 10px;

}



.swiper-slide-active .banner-text p {

    animation: bannerriV 2s ease both;

}



@keyframes bannerriV {

    0% {

        transform: translateY(30px);

        opacity: 0;

    }

    100% {

        transform: translateY(0);

        opacity: 1;

    }

}



.swiper-container-banner .swiper-button-prev{

    background: none;

    left: 50px;

    transform: translate(0,-50%);

}

.swiper-container-banner .swiper-button-next{

    background: none;

    right: 62px;

    transform: translate(0,-50%);

}

.banner-swiper-spot h4{

    width: 40px;

    height: 80px;

    overflow: hidden;

    text-align: center;

}

.banner-swiper-spot i{

    width: 38px;

    height: 80px;

    background-repeat: no-repeat;

    display: inline-block;

    opacity: .3;

}

.banner-swiper-spot i:hover{

    opacity: 1;

}



.swiper-container-banner .swiper-button-prev i{

    background-image: url('banLeft.png');

}



.swiper-container-banner .swiper-button-next i{

    background-image: url('banRight.png');

}



/* Rolling line
 */

.banner-line{

    width: 100%;

    height: 3px;

    background-color: #f5f5f5;

    position: relative;

    z-index: 33;

    position: relative;

}

.banner-line h6{

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 5px;

    background-color: #152f94;

}





/* ---listpic-box---- */

.listpic-box{

    width: 100%;

    overflow: hidden;

    padding: 20px 0 20px 0;

}

.listpic{

    width: 100%;

}

.listpic ul{

    width: 100%;

    overflow: hidden;

}

.listpic li{

    float: left;

    width: 32%;

    position: relative;

    overflow: hidden;

    height: 325px;

}

.listpic li:nth-child(n+2){

    margin-left: 2%;

}

.listpic li img{

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: all .6s ease-in 0s;

}

.listpic li img:hover{

    transform: scale(1.06);

}





/* --product-box---- */

.product-box{

    width: 100%;

    overflow: hidden;

    background-color: #f5f5f5;

    padding: 0 0 70px 0;

}

.product{

    width: 92%;

    margin-left: 4%;

    overflow: hidden;

}

.swiper-container-product{

    width: 100%;

    position: relative;

}

.product-words{

    width: 100%;

    overflow: hidden;

}

.product-w-pic{

    width: 100%;

    position: relative;

    overflow: hidden;

    padding: 60px 20px;

    background-color: #fff;

    text-align: center;

}
.product-w-pic .product-w-piclink{
    display: block;width: 100%;height: 100%;font-size: 0;
    padding: 0;border-bottom: none;margin: 0;
}

.product-w-pic img{

    width: 100%;

    min-height: 130px;

    max-height: 280px;

    object-fit: cover

}

.product-w-shade{

    width: 100%;

    height: 92%;

    position: absolute;

    top: 0%;

    left: 0%;

    background-color: rgba(39, 60, 146, .8);

    transition: all .5s;

    opacity: 0;

}

.product-w-shade h6{

    width: 100%;

    position: absolute;

    top: 50%;

    transform: translate(0,-50%);

}

.product-w-shade h6 p{

    font-size: 16px;

    color: #fff;

    width: 80%;

    margin-left: 10%;

    text-align:justify;

    text-justify:inter-word;

    text-align: center;

    height: 88px;

    overflow: hidden;

    display: -webkit-box;

    text-overflow: ellipsis;

    -webkit-line-clamp: 4;

    -webkit-box-orient: vertical;

}

.product-w-shade h6 span{

    display: inline-block;

    font-size: 24px;

    color: #fff;

    text-align: center;

    padding: 0 0 4px 0;

    border-bottom: 1px solid #fff;

    margin-top: 36px;

}

.product-w-pic:hover .product-w-shade{

    opacity: 1;

    height: 100%;

}

.product-w-words{

    width: 100%;

    overflow: hidden;

    padding: 30px 20px;

    background-color: #ebebeb;

}

.product-w-words h6{

    font-size: 26px;

    color: #333;

    font-weight: bold;

}

.product-w-words p{

    font-size: 16px;

    color: #666;

}



.swiper-container-product .swiper-button-prev{

    transform: translate(0,-50%);

    left: 0;

    background: none;

}

.swiper-container-product .swiper-button-prev h5{

    width: 40px;

    height: 60px;

    z-index: 99;

    text-align: center;

}

.swiper-container-product .swiper-button-prev i{

    width: 24px;

    height: 44px;

    background-repeat: no-repeat;

    display: inline-block;

    background-image: url('productLeft.png');

    margin-top: 8px;

}

.swiper-container-product .swiper-button-next{

    transform: translate(0,-50%);

    right: 14px;

    background: none;

}

.swiper-container-product .swiper-button-next h5{

    width: 40px;

    height: 60px;

    z-index: 99;

    text-align: center;

}

.swiper-container-product .swiper-button-next i{

    width: 24px;

    height: 44px;

    background-repeat: no-repeat;

    display: inline-block;

    background-image: url('productRight.png');

    margin-top: 8px;

}





/* -----gallery-box---- */

.gallery-box{

    width: 100%;

    overflow: hidden;

    padding: 0 0 90px 0;

    background-color: #fff;

}

.gallery{

    width: 1400px;

    margin: 0 auto; 

}

.gallery-num{

    width: 100%;

    overflow: hidden;

}

.gallery-num ul{

    width: 100%;

    overflow: hidden;

}

.gallery-num ul li{

    float: left;

    width: 25%;

    text-align: center;

}

.gallery-num ul li h6 span{

    font-size: 72px;

    font-family: 'dincond';

    font-weight: bold;

    color: #273c92;

}

.gallery-num ul li h6 a{

    font-size: 20px;

    color: #666;

    text-transform: uppercase;

    margin-left: 6px;

}



.gallery-num ul li p{

    font-size: 18px;

    color: #666;

    margin-top: 20px;

    width: 80%;

    margin-left: 10%;

    white-space:nowrap;

    text-overflow:ellipsis;

    overflow:hidden;

}



/* -----showpic-box------ */

.showpic-box{

    width: 100%;

    overflow: hidden;

}

.showpic{

    width: 100%;

}

.showpic ul{

    width: 100%;

    height: 585px;

    overflow: hidden;

}

.showpic ul li{

    width: 20%;

    float: left;

    transition: all 1.2s;

    -webkit-transition: all 1.2s;

    position: relative;

}
.showpic ul li a{display: block;width: 100%;height: 100%;position: relative;}

.showpic ul li img{

    width: 760px;

}

.showpic ul:hover li{

    width: 16%;

}

.showpic ul li:hover{

    width: 36%;

}



.showpic-words{

    width: 80%;

    height: 302px;

    position: absolute;

    left: 20px;

    display: block;

    bottom: -240px;

    overflow: hidden;

    z-index: 30;

    transition: all 1.4s;

    -webkit-transition: all 1.4s;

}

.showpic ul li:hover .showpic-words{

    width: 54%;

    bottom: 0;

}

.showpic-words h6{

    font-size: 20px;

    color: #fff;

    font-weight: bold;

    display: block;

    padding: 6px 0;

    border-bottom: 2px solid #fff;

    margin-bottom: 24px;

    position: relative;

    white-space:nowrap;

    text-overflow:ellipsis;

    overflow:hidden;

}



.showpic-words p{

    font-size: 60px;

    color: #fff;

    font-weight: bold;

    margin-top: -12px;

    padding: 0;

}











/* -----news-box----- */

.news-box{

    width: 100%;

    overflow: hidden;

}

.news{

    width: 92%;

    margin-left: 4%;

}



.news-title{

    width: 60%;

    overflow: hidden;

    padding: 60px 0 30px 0;

    border-bottom: 5px solid #e7e7e7;

}

.news-title h6{

    float: left;

    font-size: 46px;

    font-weight: bold;

    color: #273c92;

    text-transform: uppercase;

}

.news-title p{

    font-size: 18px;

    color: #888;

    float: right;

    margin-top: 34px;

}

.news-title p:hover{

    color: #273c92;

}

.news-title p i{

    width: 32px;

    height: 8px;

    background-repeat: no-repeat;

    background-image: url('newsMore.png');

    display: inline-block;

    vertical-align: middle;

    margin: -4px 0 0 10px;

    transition: all .4s;

    -webkit-transition: all .4s;

}

.news-title p:hover i{

    margin: -4px 0 0 14px;

}



.news-words{

    width: 100%;

    overflow: hidden;

    padding: 0 0 70px 0;

}



.news-words-left{

    width: 60%;

    height: 664px;

    overflow: hidden;

    float: left;

}

.news-words-left ul{

    width: 100%;

    overflow: hidden;

}

.news-words-left ul li{

    width: 100%;

    padding: 46px 0;

    border-bottom: 1px solid #e7e7e7;

    overflow: hidden;

    transition: all .5s;

}

.news-words-left ul li:hover{

    border-bottom: 1px solid #273c92;

}

.news-words-left ul li h5{

    width: 100%;

    overflow: hidden;

}

.news-words-left ul li h5 p{

    font-size: 20px;

    color: #333;

    font-weight: bold;

    white-space:nowrap;

    text-overflow:ellipsis;

    overflow:hidden;

    float: left;

    width: 76%;

}

.news-words-left ul li h5 p:hover{

    color: #273c92;

}

.news-words-left ul li h5 span{

    font-size: 16px;

    color: #888;

    display: block;

    float: right;

}

.news-words-left ul li h6{

    width: 100%;

    font-size: 16px;

    color: #888;

    white-space:nowrap;

    text-overflow:ellipsis;

    overflow:hidden;

    margin-top: 24px;

}



.news-words-right{

    width: 36%;

    height: 664px;

    overflow: hidden;

    float: right;

}

.news-words-right ul{

    width: 100%;

    overflow: hidden;

}

.news-words-right ul li{

    width: 100%;

    height: 316px;

    position: relative;

    overflow: hidden;

}

.news-words-right ul li:nth-child(2){

    margin-top: 30px;

}

.news-words-right ul li img{

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: all .5s;

    -webkit-transition: all .5s;

}

.news-words-right ul li:hover img{

    transform: scale(1.1);

    -webkit-transform: scale(1.1);

}

.news-words-right ul li h6{

    width: 88%;

    margin-left: 6%;

    position: absolute;

    left: 0;

    bottom: 28px;

    z-index: 30;

    color: #fff;

}

.news-words-right ul li h6 span{

    display: block;

    font-size: 16px;

}

.news-words-right ul li h6 p{

    font-size: 18px;

    font-weight: bold;

    margin-top: 10px;

}







/* -------- */



/* ------ */



/* ------ */

.words-title{

    width: 100%;

    overflow: hidden;

    text-align: center;

    padding: 70px 0 56px 0;

}

.words-title h6{

    text-transform: uppercase;

    font-size: 46px;

    color: #273c92;

    font-weight: bold;

}

/* ----PC-- */

@media all and (max-width:1700px) {

    .banner-text h2 {

        font-size: 50px;

    }

    .banner-text p {

        font-size: 24px;

    }

    .listpic li {

        height: 240px;

    }

    .news-words-right ul li {

        height: 240px;

    }

    .news-words-left ul li h6 {

        margin-top: 14px;

    }

    .news-words-left ul li {

        padding: 32px 0;

    }

    .news-words-right {

        height: 514px;

    }

    .news-words-left {

        height: 514px;

    }

}



@media all and (max-width:1460px) {

    .banner-text h2 {

        font-size: 44px;

    }

    .banner-text p {

        font-size: 22px;

    }

    .listpic li {

        height: 224px;

    }

    .words-title {

        padding: 46px 0 40px 0;

    }

    .product-w-words {

        padding: 22px 20px;

    }

    .product-w-words h6 {

        font-size: 22px;

    }

    .gallery-num ul li h6 span {

        font-size: 60px;

    }

    .gallery-box {

        padding: 0 0 70px 0;

    }

    .showpic-words h6 {

        font-size: 18px;

    }

    .showpic-words p {

        font-size: 40px;

        margin-top: -10px;

    }

    .news-words-right ul li {

        height: 222px;

    }

    .news-words-left ul li {

        padding: 29px 0;

    }

    .news-words-left ul li h5 p {

        font-size: 18px;

    }

    .news-words-left {

        height: 480px;

    }

    .news-words-right {

        height: 480px;

    }

    .showpic ul li:hover .showpic-words{

        width: 58%;

        bottom: 0;

    }

    .gallery {

        width: 92%;

        margin-left: 4%;

    }

}



@media all and (max-width:1280px) {

    .listpic li {

        height: 196px;

    }

    .words-title h6 {

        font-size: 40px;

    }

    .words-title {

        padding: 36px 0 32px 0;

    }

    .product-w-words h6 {

        font-size: 20px;

    }

    .gallery-num ul li h6 span {

        font-size: 50px;

    }

    .showpic ul li:hover .showpic-words{

        width: 64%;

        bottom: 0;

    }

    .showpic-words p {

        font-size: 34px;

    }

    .news-words-right ul li {

        height: 192px;

    }

    .news-words-left ul li h6 {

        margin-top: 12px;

    }

    .news-words-left ul li h5 p {

        font-size: 16px;

    }

    .news-words-left ul li h5 span {

        font-size: 14px;

    }

    .news-words-left ul li {

        padding: 23px 0;

    }

    .news-words-left {

        height: 414px;

    }

    .news-words-right {

        height: 414px;

    }

}



@media all and (max-width:1200px) {

    .listpic li {

        height: 166px;

    }

    .words-title h6 {

        font-size: 34px;

    }

    .words-title {

        padding: 24px 0 28px 0;

    }

    .product-w-pic {

        padding: 80px 24px;

    }

    .showpic ul li:hover .showpic-words{

        width: 74%;

        bottom: 0;

    }

    .gallery-num ul li h6 span {

        font-size: 44px;

    }

    .gallery-num ul li h6 a {

        font-size: 16px;

    }

    .news-title h6 {

        font-size: 40px;

    }

    .news-title p {

        margin-top: 22px;

    }

    .news-words-right ul li {

        height: 164px;

    }

    .news-words-left ul li h6 {

        margin-top: 12px;

        font-size: 14px;

    }

    .news-words-left ul li {

        padding: 17.5px 0;

    }

    .news-words-left {

        height: 358px;

    }

    .news-words-right {

        height: 358px;

    }

}



/* -------phone----- */

.swiper-container-banner .swiper-pagination{

    bottom: 28px;

}

.swiper-container-banner .swiper-pagination-bullet {

    width: 10px;

    height: 10px;

    background: #fff;

    opacity: 1;

}

.swiper-container-banner .swiper-pagination-bullet-active {

    opacity: 1;

    background: #273c92;

}



@media all and (max-width:1000px) {

    .banner-phone-pic{

        width: 100%;

        height: 240px;

    }

    .banner-phone-pic img{

        width: 100%;

        height: 100%;

        object-fit: cover;

    }

    .swiper-container-banner .swiper-pagination{

        display: block;

    }

    .swiper-container-banner .swiper-button-prev {

        display: none;

    }

    .swiper-container-banner .swiper-button-next {

        display: none;

    }

    .banner-text h2 {

        font-size: 24px;

    }

    .banner-text p {

        width: 80%;

        margin-left: 10%;

        font-size: 16px;

    }

    .banner-text {

        top: 50%;

    }

    .listpic ul {

        margin-left: 0%;

        margin-top: -16px;

    }

    .listpic li {

        width: 100%;

        margin-left: 0%;

        height: 170px;

        margin-top: 16px;

    }

    .words-title h6 {

        font-size: 24px;

    }

    .words-title {

        padding: 14px 0 14px 0;

    }

    .product-w-pic {

        padding: 26px 36px;

    }

    .product-w-words h6 {

        font-size: 18px;

    }

    .product-w-words p {

        font-size: 14px;

        margin-top: 4px;

    }

    .product-w-words {

        padding: 10px 16px;

    }

    .product-w-shade h6 p {

        font-size: 14px;

        overflow: hidden;

        display: -webkit-box;

        text-overflow: ellipsis;

        -webkit-line-clamp: 4;

        height: 58px;

        -webkit-box-orient: vertical;

    }

    .product-w-shade h6 span {

        font-size: 20px;

        margin-top: 20px;

    }

    .product-box {

        padding: 0 0 28px 0;

    }

    .gallery-num ul li {

        width: 50%;

        margin-top: 16px;

    }

    .gallery-num ul li h6 span {

        font-size: 26px;

    }

    .gallery-num ul li h6 a {

        font-size: 13px;

        margin-left: 4px;

    }

    .gallery-num ul li p {

        font-size: 16px;

        margin-top: 6px;

    }

    .gallery {

        width: 100%;

        margin-left: 0%;

    }

    .gallery-box {

        padding: 0 0 28px 0;

    }

    .showpic ul {

        width: 100%;

        height: auto;

        overflow: hidden;

    }

    .showpic ul li {

        width: 100%;

        margin-top: 10px;

    }

    .showpic ul li img {

        width: 100%;

    }

    .showpic-words {

        width: 80%;

        height: auto;

        bottom: 20px;

        z-index: 30;

    }

    .showpic ul:hover li{

        width: auto;

    }

    .showpic ul li:hover{

        width: auto;

    }

    .showpic ul li:hover .showpic-words{

        width: 80%;

        bottom: 0;

    }

    .showpic-words p {

        font-size: 18px;

        margin-top: 0;

    }

    .showpic-words h6 {

        margin-bottom: 14px;

    }

    .news-title {

        width: 100%;

        padding: 30px 0 10px 0;

        border-bottom: 3px solid #e7e7e7;

    }

    .news-title h6 {

        font-size: 24px;

    }

    .news-title p {

        font-size: 16px;

        margin-top: 8px;

    }

    .news-words-left {

        width: 100%;

        height: auto;

    }

    .news-words-right {

        width: 100%;

        height: auto;

        margin-top: 24px;

    }

    .news-words-right ul li{

        height: auto;

    }

    .news-words-left ul li h5 p {

        font-size: 12px;

        width: 60%;

    }

    .news-words-left ul li h5 span {

        font-size: 12px;

    }

    .news-words-left ul li h6 {

        margin-top: 8px;

        font-size: 12px;

    }

    .news-words-right ul li h6 p {

        font-size: 14px;

        margin-top: 4px;

    }

    .news-words-right ul li h6 span {

        font-size: 13px;

    }

    .news-words-right ul li:nth-child(2) {

        margin-top: 18px;

    }

    .news-words {

        padding: 0 0 28px 0;

    }



}





/* -----G-------- */

.showpic ul li a:after{

    content: "";

    position: absolute;

    width: 100%;

    height: 0%;

    background-color: rgba(39,60,146,.4);

    left: 0;

    bottom: 0;

    z-index: 9;

}





.showpic ul li a:hover:after{

    height: 100%;

}