/* banner */
.banner{position: relative;}
.banner .swiper-container{overflow: hidden;}
.banner .hb{min-height: 80vh;}
.banner .hb img{width: 100%;height: 100%;opacity: 0;}
.banner .hb .swiper-slide{min-height: 80vh;}
.banner .swiper-slide{overflow: hidden;}
.banner .slide-inner{position: absolute;width: 100%;height: 100%;left: 0;top: 0;background-size: cover;background-position: center top;display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;color:#fff;}

.banner .mb{display: none;}
.banner .mb img{width: 100%;}
.banner .swiper-pagination-bullet{transition: all 0.3s;}
.banner .swiper-pagination-bullet-active{width: 24px;background-color: #fff;border-radius: 4px;}
.banner .swiper-button-prev,.banner .swiper-button-next{background-color: rgba(0,0,0,0.3);border-radius: 5px;}
.banner .swiper-button-next:after,.banner .swiper-button-prev:after{font-size: 24px;color: rgba(255, 255, 255, 0.7);}


/* num-change */
.num-change{width: 100%;max-width: 1400px;position: absolute;bottom: -55px;left: 50%;z-index: 1;background-color: rgba(255, 255, 255, 0.7);box-shadow: 0px 6px 20px 6px rgba(0,0,0,0.03);transform: translateX(-50%);height: 110px;z-index: 10;}
.num-change div form{display: inline-block;width: 100%;height: 100%;}
.num-change div{width: 95%;margin: 25px 2.5%;height: 58px;background-color: #fff;border: 1px solid #E5EAEF;}
.num-change div input{display: block;width: calc(100% - 164px);float: left;height: 100%;text-indent: 10px;color: #999;}
.num-change div button{display: block;width: 164px;height: 100%;background-color: #125BAB;line-height: 100%;text-align: center;color: #fff;font-size: 16px;float: left;}



/* about */
.about{position: relative;background-size: auto;background-position: 0 bottom;background-repeat: no-repeat;height: 560px;margin-top: 3%;}

.about h2::after{display: none;}
.about .row{height: 100%;}
.about .a-l{}
.about .a-l .fl{width: 100%;max-width: 520px;padding-left: 5%;}
.about .a-l .fl .a-con{margin-top: 15%;line-height: 28px;font-size: 16px;color: #222;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 10;-webkit-box-orient: vertical;}


.about .a-r{padding: 0;height: 100%;}
.about .a-r div{width: 100%;height: 100%;object-fit: cover;background-position: right bottom;background-repeat: no-repeat;background-size: cover;position: relative;}
.about .a-r div .a-ic{position: absolute;bottom: 0;right: 5%;transform: translate(50%,50%);}

.about .more{float: right;margin-top: 10%;margin-bottom: 5%;}
.area.about h2{text-align: right;}
.area.about h2 img{width: 70%;max-width: 480px;}


/* Pro */
.product{margin: 0 auto;position: relative;padding-top: 5%!important;background-size: 1920px auto;background-position: 0 bottom;}
.product .n-area{max-width: 1750px;}
.product .tit{position: relative;margin-bottom: 1%;text-align: center;}
.product h2{display: inline-block;padding: 0 0 2%;width: 100%;text-align: center;}
.product .tit p{width: 95%;max-width: 900px;display: inline-block;margin: 1.5% 0 4%;color: #222;font-size: 16px;}
.product .proli{display: inline-block;width: 100%;}
.product .proli a{display: inline-block;width: 100%;margin-bottom: 10%;padding: 1px;position: relative;z-index: 1;transition: all 0.3s;}

.product .proli a .pro-img{position: relative;padding-top: 100%;z-index: 3;border-radius: 50%;}
.product .proli a .pro-img::before{width: 100%;height: 100%;border: 9px solid #d5d5d5;border-radius: 50%;position: absolute;left: 50%;top: 50%;content:'';transform: translate(-50%,-50%);transition: all 0.4s;}
.product .proli a .pro-img img{
    /* width: 80%;height: 80%; */
    width: calc(100% - 9px);height: calc(100% - 9px);
    position: absolute;top: 50%;left: 50%;object-fit: cover;transform: translate(-50%,-50%);transition: all 0.4s;border-radius: 50%;}
.product .proli a .pro-tit{position: relative;z-index: 3;}
.product .proli a .pro-tit p{color: #222;text-align: center;}
.product .proli a .pro-tit p:first-child{font-size: 26px;padding: 6% 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.product .proli a .pro-tit p:last-child{font-size: 14px;line-height: 20px;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}


/* .product .proli .swiper-slide-next a .pro-img::before{border-color: #125BAB;transition: all 1s;} */
.product .proli .swiper-slide-next a img{width: calc(100% - 9px);height: calc(100% - 9px);transition: all 0.7s;}

.product .proli a:hover img{width: calc(100% - 15px);height: calc(100% - 15px);transition: all 0.4s;}
.product .proli a:hover .pro-img::before{border: 15px solid #125BAB;transition: all 0.4s;}

.product .more{margin: 0% auto 4%;}



/* app */
.app {padding-top: 4%!important;background-size: 1920px auto;background-position: 0 top;overflow: hidden;}
.app h2{text-align: center;margin: 0% 0 3%;transition: all 0.3s;}
.app .n-area{overflow: visible;}
.app .seat{width: 100%;max-width: 720px;margin: 0 auto;position: relative;}
.app .seat img:first-child{width: 100%;}
.app .seat img:nth-child(2){position: absolute;left: 50%;transform: translateX(-50%);bottom: 0;width: 80%;}
.app .seat .adv-li{width: 100%;position: absolute;height: 179%;display: inline-block;left: 0;margin: 0;top: 0;border-radius: 50%;}
.app .seat .adv-li li{position: absolute;width: 100%;height: 100%;border-radius: 50%;left: 0;top: 0;}
.app .seat .adv-li li div{position: absolute;width: 50%;max-width: 310px;cursor: pointer;}
.app .seat .adv-li li:nth-child(1) div{left: 14%;transform: translateX(-100%);text-align: right;top: 24%;}
.app .seat .adv-li li:nth-child(2) div{left: 32%;transform: translateX(-100%);text-align: right;top: 4%;}
/* .app .seat .adv-li li:nth-child(3) div{left: 37%;transform: translateX(-100%);text-align: right;top: 2%;}
.app .seat .adv-li li:nth-child(4) div{right: 37%;transform: translateX(100%);text-align: left;top: 2%;} */
.app .seat .adv-li li:nth-child(3) div{right: 32%;transform: translateX(100%);text-align: left;top: 4%;}
.app .seat .adv-li li:nth-child(4) div{right: 14%;transform: translateX(100%);text-align: left;top: 24%;}
.app .seat .adv-li li div h3{font-size: 64px;color: #fff;margin: 20px 0 10px;transition: all 0.3s;}
.app .seat .adv-li li:nth-child(1) div h3,
.app .seat .adv-li li:nth-child(2) div h3{float: right;}
.app .seat .adv-li li:nth-child(3) div h3,
.app .seat .adv-li li:nth-child(4) div h3{float: left;}
.app .seat .adv-li li div a{position: absolute;width: 100%;top: 15%;}
.app .seat .adv-li li:nth-child(1) div a{left: -45%;}
.app .seat .adv-li li:nth-child(2) div a{left: -52%;}
/* .app .seat .adv-li li:nth-child(3) div a{left: -54%;}
.app .seat .adv-li li:nth-child(4) div a{right: -54%;} */
.app .seat .adv-li li:nth-child(3) div a{right: -55%;}
.app .seat .adv-li li:nth-child(4) div a{right: -45.5%;}
.app .seat .adv-li li div a h4{display: inline-block;font-size: 24px;color: #000;padding-bottom: 10px;position: relative;margin: 10px 0 10px;}
.app .seat .adv-li li div a h4::after{position: absolute;bottom: 0;width: 100%;height: 3px;background-color: #125BAB;content: '';left: 0;transition: all 0.3s;}
.app .seat .adv-li li:nth-child(3) div a h4::after,.app .seat .adv-li li:nth-child(4) div a h4::after{right: 0;left: auto;}
.app .seat .adv-li li div a h4::before{position: absolute;bottom: 1px;width: 144%;height: 1px;background-color: #d3d3d3;content: '';left: 0;transition: all 0.3s;}
.app .seat .adv-li li:nth-child(3) div a h4::before,.app .seat .adv-li li:nth-child(4) div a h4::before{right: 0;left: auto;}
/* .app .seat .adv-li li:nth-child(2) div a h4::before,.app .seat .adv-li li:nth-child(3) div a h4::before{width: 163%;} */
.app .seat .adv-li li div a p{font-size: 14px;color: #333;line-height: 17px;transition: all 0.3s;text-transform: uppercase;width: 100%;}
.app .seat .adv-li li:nth-child(1) div a p,.app .seat .adv-li li:nth-child(2) div a p{float: right;}
.app .seat .adv-li li:nth-child(3) div a p,.app .seat .adv-li li:nth-child(4) div a p{float: left;}

.app .m-adv{width: 50%;float: left;padding: 2% 5%;display: none;}
.app .m-adv a h4{display: inline-block;font-size: 24px;color: #000;padding-bottom: 10px;position: relative;margin: 10px 0;}
.app .m-adv a p{font-size: 14px;color: #999;line-height: 20px;text-transform: uppercase;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.app .m-adv a h4::before {position: absolute;bottom: 1px;width: 144%; height: 1px;background-color: #d3d3d3;content: '';left: 0;}
.app .m-adv a h4::after {position: absolute;bottom: 0;width: 100%;height: 3px;background-color: #125BAB;content: '';left: 0;}

.app .seat .adv-li li div:hover h3{transform: rotateY(720deg);}
.app .seat .adv-li li div:hover a p{color: #125BAB;}
.app .seat .adv-li li div:hover a h4::after{width: 120%;}


/* adv */
.adv{background-size: 1920px 50%;background-position: center top;background-repeat: no-repeat;}
.adv h2{text-align: center;margin: 5% 0;color: #0A7AF5;}
.adv ul li{position: relative;background-size: cover;cursor: pointer;z-index: 1;overflow: hidden;}
.adv ul li .adv-img{position: relative;padding-top: 80%;overflow: hidden;}
.adv ul li img{width: 100%;height: 100%;object-fit: cover;background-color: #fff;position: absolute;top: 0;left: 0;transition: all 0.4s;}
.adv ul li .adv-info{width: 100%;padding: 15px 6%;border: 1px solid #eee;border-top: 0;background-color: #125BAB;transition: all 0.3s;}
.adv ul li .adv-info p:first-child{font-size: 22px;color: #fff;transition: all 0.3s;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;}
/* .adv ul li .adv-info p:last-child{font-size: 14px;color: #999;line-height: 17px;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;transition: all 0.3s;margin-bottom: 6%;} */
.adv .more{margin: 4% auto 2%;}

.adv ul li:hover img{width: 105%;height: 105%;}
.adv ul li:hover .adv-info{background-color: #fff;}
.adv ul li:hover .adv-info p:first-child{color: #125BAB;}



/* news */
.news{}
.news h2{position: relative;margin: 5.5% 0 3%;}
.news h2::after{left: 0;transform: translateX(0);}
.news h2 a{float: right;display: block;font-size: 16px;color: #999;right: 1%;position: absolute;top: 50%;transform: translateY(-50%);}
.news h2 a span{display: inline-block;width: 59px;height: 59px;text-align: center;line-height: 59px;border: 1px solid #999;border-radius: 50%;font-size: 18px;color: #999;font-family: cursive;font-weight: bold;position: relative;}
.news ul li{margin-bottom: 29px;}
.news ul li .li-d{float: left;position: relative;z-index: 1;transition: all 0.3s;width: 100%;}
.news ul li a{display: block;float: left;color: #222;position: relative;width: 100%;height: 140px;z-index: 3;position: relative;}
.news ul li a h4{font-size: 16px;margin: 0% 0 4%;transition: all 0.3s;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;}
.news ul li a p{overflow: hidden;display: -webkit-box;-webkit-line-clamp: 4;-webkit-box-orient: vertical;font-size: 14px;opacity: 0.6;transition: all 0.3s;line-height: 17px;height: 51px;}
.news ul li a span{font-size: 14px;opacity: 0.6;padding: 4% 0;display: block;z-index: 1;border-bottom: 1px solid #d8d8d8;transition: all 0.3s;}
.news ul li:first-child a span,.news ul li:last-child a span,.news ul li:nth-child(6) a span{border: 0!important;}

.news ul li:first-child a img{width: 100%;height: 318px;object-fit: cover;margin-bottom: 20px;transition: all 0.3s;filter: brightness(1.05);}
.news ul li:first-child a{background-size: cover;background-repeat: no-repeat;height: 478px;}
.news ul li:first-child a div{bottom: 0;color: #000;left: 0;width: 100%;overflow: hidden;}
.news ul li:first-child a p,.news ul li:first-child a span{opacity: 1;opacity: 0.6;}

.news ul li a::before{content: '';position: absolute;bottom: 0;right: 0;width: 0;height: 3px;background-color: #125BAB;transition: all 0.3s;}

.news ul li:first-child:hover a img{width: 105%;}
.news ul li:hover a,.news ul li:first-child:hover a div{color: #125BAB;}
/* .news ul li:hover a::before{width: 100%;left: 0;} */
.news ul li:hover a span{border-bottom: 1px solid #125BAB;}
.news h2 a:hover span{color: #fff;border: 1px solid #125BAB;}


@media screen and (min-width: 0px) and (max-width:1450px){
    .app .seat .adv-li li div a p{width: 75%;}
}
@media screen and (min-width: 0px) and (max-width:1250px){
    .num-change{position: relative;bottom: 0;float: left;}
    .area h2{font-size: 26px;}
    .banner .hb,.banner .hb .swiper-slide{min-height: 60vh;}
}
@media screen and (min-width: 0px) and (max-width:1200px){
    .news ul li a p{-webkit-line-clamp:3}
    .news ul li:first-child a span, .news ul li:last-child a span, .news ul li:nth-child(6) a span{border-bottom: 1px solid #d8d8d8;}
    .news ul li:last-child{display: none;}
}
@media screen and (min-width: 0px) and (max-width:1070px){
    .app .seat{overflow: hidden;}
    .app .seat .adv-li{display: none;}
    .app .m-adv{display: block;}
}
@media screen and (min-width: 0px) and (max-width:992px){
    .banner .hb,.banner .hb .swiper-slide{min-height: 45vh;}
    .num-change .counter, .num-change b{font-size: 32px;}
    .num-change .shuzi p:last-child{font-size: 14px;}
    .num-change{position: relative;bottom: 0;float: left;}
    .about .a-l{margin-top: 5%;position: absolute;}
    .about .a-l .fl{max-width: 100%;padding:30px;background-color: rgba(255, 255, 255, 0.9);border-radius: 5px;}
    .about .a-l .fr .a-con{margin-top: 0;font-size: 14px;}
    .about .a-l .fl .a-con{margin-top: 5%;}
    .about .a-r{padding-right: 0;}
    .product{margin-top: 3%;}
    .product .tit{text-align: center;}
    .product .pro-cate{position: relative;top: 0;transform: none;}
    .product .pro-cate li{float: left;margin: 0 2% 1%;}
    .product .pro-cate li a{font-size: 14px;}
    .product .proli li:nth-child(7),.product .proli li:nth-child(8){display: none;}
    .app ul li .app-info p:first-child{font-size: 16px;}
    .app ul li .app-info p:last-child{font-size: 14px;}
    .adv ul li .adv-info p:first-child{font-size: 20px;}
    .adv ul li .adv-info p:last-child{font-size: 14px;}
    .product .pro-cate li a{line-height: 48px;}
    .product .pro-cate{padding: 0 15px;}
    .about .a-l .fl .a-con{font-size: 14px;}
    .app .m-adv a h4{font-size: 17px;font-weight: bold;color: #333;}
    .about{height: 680px;}
    .about .a-l .fl a{font-size: 14px;height: 39px;line-height: 39px;margin: 10% 0 5%;}
    .about .a-l .fl .more{margin-top: 5%;}
}
@media screen and (min-width: 0px) and (max-width:768px){
    .product .proli a .pro-tit p:first-child{font-size: 22px;}
    .news ul li a{height: auto;transition: all 0.3s;}
    .news ul li{margin-bottom: 20px;}
    .news ul li .li-d:hover::after,.news ul li .li-d:hover::before{display: none;}
    .news ul li .li-d:hover a{height: auto!important;width: calc(100%)!important;margin: 0;}
    .news ul li:first-child a div::after,.news ul li:first-child a div::before{background-color:rgba(0,0,0,0);background-image: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0));z-index: -1;}
    .news ul li:first-child a div:hover::after{right: 0;left: auto;width: 100%;height: 100%;}
    .news ul li:first-child a div:hover::before{right: auto;left: 0;width: 100%;height: 100%;}
    .news ul li:first-child a{height: auto;}
    .num-change div input{width: calc(100% - 100px);}
    .num-change div button{width: 100px;}
    .about{height: 635px;}
}
@media screen and (min-width: 0px) and (max-width:750px){
    .banner .hb{display: none;}
    .banner .mb{display: block;}
}
@media screen and (min-width: 0px) and (max-width:550px){
    .about{height: 600px;}
}
@media screen and (min-width: 0px) and (max-width:375px){
    .product .proli a .pro-tit p:first-child{font-size: 17px;}
    .num-change .shuzi p:last-child{font-size: 12px;}
    .product .proli a .pro-tit p{font-size: 12px;}
    .about{height: 560px;}
    .num-change{height: 80px;}
    .num-change div{height: 48px;margin: 15px 2.5%;}
    .product .tit p{font-size: 13px;}
    .app .m-adv{width: 50%;}
}

.txt-swiper .swiper-slide p img{opacity: 0;transform: translateY(-30%);}
.txt-swiper .swiper-slide p img:first-child{animation: fade 2s ease 1 forwards;}
.txt-swiper .swiper-slide p img:last-child{animation: fade 2s ease 1.5s 1 forwards;}
@keyframes fade {
    0%{
        opacity: 0;
        transform: translateY(-30%);
    }
    100%{
        opacity: 1;
        transform: translateY(0);
    }
}