@charset "utf-8";


#banner{ position: relative; width: 100%; height: 100%;}
#banner .swiper{ position: relative;z-index: 80; height: 100%;margin: 0 auto;}
#banner .swiper-wrapper{z-index: inherit;}
#banner .swiper .swiper-slide{width: 100%;height:100%;overflow: hidden;position: relative;z-index: 10; background-position: center top;background-size: cover;}
#banner .swiper .swiper-slide .banner_video{width: 100%;height:auto;position: absolute;left: 50%;top:50%; transform: translate(-50%,-50%); z-index: 1;}
#banner .swiper .swiper-slide>img{width: 100%;height: auto;object-fit: cover;}
#banner .swiper .swiper-slide>.info{position: absolute;z-index: 80; left: 12%; bottom: 40%; width: 56%; text-align: left;}
#banner .swiper .swiper-slide>.info>.title{font-size: 5rem; font-weight: bold; line-height: 6rem; color: #fff;text-shadow: 0 2px 5px rgba(0,0,0,.2);}
#banner .swiper .swiper-slide>.info>.text{ width: 60%; padding: 20px 0; font-size: 1.8rem; color: #fff; text-shadow: 0 2px 5px rgba(0,0,0,.1);}
#banner .swiper .swiper-slide>.info>.more{ text-align: left;}
#banner .swiper .swiper-slide>.info>.more>a{display: inline-block; color: rgba(255,255,255,1); border: 2px solid rgba(255,255,255,.2); font-size: 1.4rem; border-radius: 50px; padding: 10px 30px; transition: all .35s;}
#banner .swiper .swiper-slide>.info>.more>a:hover{ background: rgba(255,255,255,.8); color: #88cfff;}
#banner .swiper .swiper-slide> .mask{position: absolute;z-index: 50; left: 0;bottom: -1px;width: 100%;}
#banner .swiper .swiper-slide> .mask>img{width: 100%;height: auto;}
#banner .swiper .swiper-pagination{ z-index: 80; text-align: left; left: 50%; width: 90%; transform: translateX(-50%); }
#banner .swiper .swiper-pagination-bullet{width:6px;height:6px;background-color:#fff;margin-bottom: 10px!important; transition: all .3s;}
#banner .swiper .swiper-pagination-bullet-active{opacity: 1;}
#banner .control{position: absolute; z-index: 120; right: 80px;bottom: 80px; text-align: right;}
#banner .control>a{ display: inline-block; margin-left: 10px; width: 56px; height: 56px; line-height: 56px;text-align: center; color: #88cfff;  border:1px solid #ddd; border-radius: 100%; transition: all .35s;}
#banner .control>a:hover{background:#88cfff; border-color: #88cfff; color: #fff;}
#banner .control>a i{font-size: 2.4rem; text-align: center;}





#main{margin: 0 auto;}

#main .wrap{max-width: 1680px;}

#main .theme{margin:0 auto;padding: 50px 0 80px 0;}
#main .theme>.title{ text-align: center; margin: 0 auto;position: relative; font-size: 4rem; font-weight: 700; color: #464646;}
#main .theme>.title:after{position: absolute;z-index: 12; left: 50%; top: -60px; width: 100%;height: 60px; transform: translateX(-50%); background: url("../img/main_theme_ico.png") no-repeat; background-position: 50% 50%; background-size: auto 60px; content: '';}
#main .theme>.title:before{position: absolute;z-index: 12; left: 50%; bottom: -10px;width: 36px;height: 3px; background: #88cfff;border-radius: 10px; transform: translateX(-50%); content: '';}



#main .products{margin: 0 auto; padding: 100px 0;}
#main .products .container{ position: relative; margin: 0 auto;}
#main .products .container>.swiper{margin: 0 auto;}
#main .products .container>.swiper .swiper-slide{margin: 0 auto;}
#main .products .container>.swiper .swiper-slide>a{display: block; position: relative;}
#main .products .container>.swiper .swiper-slide>a .img{text-align: center;overflow: hidden; border-radius: 100%; position: relative; transition: all .35s;}
#main .products .container>.swiper .swiper-slide>a .img2:after{ display: none; position: absolute;z-index: 12; left: 50%; top: 50%; margin-top: -28px; margin-left: -28px; width: 56px; height: 56px; line-height: 56px; text-align: center;  background: rgba(0,0,0,.6); color: #fff;  border-radius: 50px; content: '12'; transition: all .35s;}
#main .products .container>.swiper .swiper-slide>a .img:after{position: absolute;z-index: 12; left: 50%;top: 50%; width: 90px;height: 90px; line-height: 90px; color: #88cfff; text-align: center; transform: translate(-50%,-50%) scale(1.2); background: rgba(255,255,255,.8); border-radius: 100%; opacity: 0;   font-family: iconfont; font-size: 3rem;  content: '\e611'; transition: all .4s;}
#main .products .container>.swiper .swiper-slide>a .img:before{position: absolute;z-index: 12; left: 0;top: 0; width: 100%;height: 100%; border-radius: 100%; box-shadow: inset 0 0 0 0 rgba(136,207,255,0), 0 0 0 rgba(0,0,0,0); content: ''; transition: all .4s;}
#main .products .container>.swiper .swiper-slide>a .img>img{width: 100%;height: auto; transition: all 1s;}
#main .products .container>.swiper .swiper-slide>a .box{ position: relative; margin: 0 auto; padding: 10px 0; transition: all .4s;}
#main .products .container>.swiper .swiper-slide>a .box>.ico{ display: none; position: absolute;z-index: 12; left: 50%; top: -50px; background: #fff; border-radius: 100%; padding: 10px; transform: translateX(-50%);}
#main .products .container>.swiper .swiper-slide>a .box>.ico>img{ width: 60px;height: auto;}
#main .products .container>.swiper .swiper-slide>a .box>.title{ text-align: center; margin: 0 auto; }
#main .products .container>.swiper .swiper-slide>a .box>.title>span{display: inline-block;font-size: 1.8rem; padding: 8px 15px; color: #464646; font-weight: 700;transition: all .35s;}
#main .products .container>.swiper .swiper-slide>a .box>.intro{ text-align: center; font-size: 1.4rem; line-height: 1.8rem; color: #999; transition: all .35s;}
#main .products .container>.swiper .swiper-slide>a .more{ text-align: center; opacity: 0; transform: translateY(20px); transition: all .6s;}
#main .products .container>.swiper .swiper-slide>a .more>p{display: inline-flex; align-items: center;align-content: center; color: #fff; background: #88cfff;padding: 8px 20px; border-radius: 50px; transition: all .35s;}
#main .products .container>.swiper .swiper-slide>a .more>p>i{display: inline-block; font-size: 1.8rem;}
#main .products .container>.swiper .swiper-slide>a .more>p>span{display: inline-block; margin-right: 6px;font-size: 1.3rem; }
#main .products .container>.swiper .swiper-slide>a:hover .img>img{transform: scale(1.1);}
#main .products .container>.swiper .swiper-slide>a:hover .img:after{ transform: translate(-50%,-50%) scale(1); opacity: 1; }
#main .products .container>.swiper .swiper-slide>a:hover .img:before{box-shadow: inset 0 0 0 160px rgba(0,0,0,.4), 0 0 0 rgba(0,0,0,0);}
#main .products .container>.swiper .swiper-slide>a:hover .box{transform: translateY(-6px);}
#main .products .container>.swiper .swiper-slide>a:hover .box>.title>span{ color: #88cfff;}
#main .products .container>.swiper .swiper-slide>a:hover .more{transform: translateY(0);opacity: 1;}
#main .products .container>.swiper .swiper-pagination{ display: none; z-index: 80; text-align: center; left: 50%; width: 90%; transform: translateX(-50%); }
#main .products .container>.swiper .swiper-pagination-bullet{width:6px;height:6px;background-color:#88cfff;margin-bottom: 10px!important; transition: all .3s;}
#main .products .container>.swiper .swiper-pagination-bullet-active{opacity: 1;}
#main .products .container>.control{ display: block; position: absolute;z-index: 100; left: 50%;top: 32%; width: 100%; transform: translate(-50%,-50%);}
#main .products .container>.control>a{display: inline-flex;align-items: center;align-content: center;justify-content: center; width: 50px;height: 50px; color: #88cfff; transition: all .35s;}
#main .products .container>.control>a>i{font-size: 3rem;}
#main .products .container>.control>a.prev{float: left; margin-left: -80px;}
#main .products .container>.control>a.next{float: right; margin-right: -80px;}
#main .products .container>.control>a.swiper-button-disabled{display: none;}

#main .advantage{margin: 0 auto; padding-top: 100px; background: url("../img/main_advantage_bg.jpg") no-repeat; background-position: top center; background-size: cover; background-attachment: fixed;}
#main .advantage .theme>.title{color: #fff;}
#main .advantage .container{ margin: 0 auto;}
#main .advantage .container>.swiper{margin: 0 auto; transform: translateY(100px);overflow: inherit;}
#main .advantage .container>.swiper .swiper-slide{ overflow: visible;}
#main .advantage .container>.swiper .swiper-slide>.slide{position: relative;perspective: 600px;  display: block; height: 360px; box-sizing: border-box;text-align: center; transition: all .35s;}
#main .advantage .container>.swiper .swiper-slide>.slide .box{width: 100%; height: 100%; background: #fff; box-shadow: 0 2px 26px rgba(0,0,0,.1); border-radius: 60px;padding: 50px 20px; display: flex; flex-direction: column; justify-content: center; align-items: center; transition: all .45s; position: absolute; left: 0; top: 0;}
#main .advantage .container>.swiper .swiper-slide>.slide:nth-child(even) .box{background: linear-gradient(#fff 20%,  #dff2ff);box-shadow: 0 1px 16px rgba(0,0,0,.1);}
#main .advantage .container>.swiper .swiper-slide>.slide .ico{text-align: center;margin: 0 auto;}
#main .advantage .container>.swiper .swiper-slide>.slide .ico>img{  width: 60px;height: auto; }
#main .advantage .container>.swiper .swiper-slide>.slide .title{ padding:15px 20px;font-size: 1.8rem; font-weight: bold; color: #333; margin: 0 auto; transition: all .35s; }
#main .advantage .container>.swiper .swiper-slide>.slide .intro{ margin: 0 auto; padding: 0 20px; text-align: center; font-size: 1.4rem; line-height: 1.8rem; color: #666; transition: all .35s;}
#main .advantage .container>.swiper .swiper-slide>.slide .box-back, #main .advantage .container>.swiper .swiper-slide>.slide:nth-child(even) .box-back{width: 100%; height: 100%; background: linear-gradient(#0098ff 20%,  #88cfff);border-radius: 60px; display: flex; flex-direction: column; justify-content: center; align-items: center; transition: all .45s; position: absolute; left: 0; top: 0; transform: rotateY(180deg); backface-visibility:hidden;}
#main .advantage .container>.swiper .swiper-slide>.slide .box-back .ico{margin-top: 16px;}
#main .advantage .container>.swiper .swiper-slide>.slide .box-back .ico>img{  width: 100px;height: auto; }
#main .advantage .container>.swiper .swiper-slide>.slide .box-back .title{color: #fff; font-size: 2rem;}
#main .advantage .container>.swiper .swiper-slide>.slide:hover .box-back{transform: rotateY(0);}
#main .advantage .container>.swiper .swiper-slide>.slide:hover .box{transform: rotateY(-180deg);}
#main .advantage .container>.swiper .swiper-pagination{ display: none; position: relative; z-index: 80; padding-top: 30px; text-align: center; bottom: 0; }
#main .advantage .container>.swiper .swiper-pagination-bullet{width:10px;height:10px; border: 1px solid #88cfff;  background-color:#88cfff;transition: all .3s;}
#main .advantage .container>.swiper .swiper-pagination-bullet-active{opacity: 1; background-color: transparent;}




#main .about{margin: 0 auto; padding-top: 200px;}
#main .about .wrap{ max-width: 100%; width: 100%;}
#main .about .container .profile>.layout{margin: 0 auto;background: #88cfff url("../img/main_about_bg.jpg") no-repeat; background-position:  right bottom; background-size: auto 100%;}
#main .about .container .profile>.layout>.img{position: relative; transform: translateY(50px); width:60%; overflow: hidden; border-radius: 0 300px 300px 0; box-shadow: 0 3px 16px rgba(0,0,0,.2);}
#main .about .container .profile>.layout>.img>a{display: flex; align-content: center; align-items: center; justify-content: center; position: absolute;z-index: 50; right: 30px;top: 50%; color: #fff; border-radius: 100%;   transform: translateY(-50%); transition: all .35s;}
#main .about .container .profile>.layout>.img>a:after { position: absolute;left: 0;top: 0; z-index: 0;width: 100%;height: 100%; border: 2px dashed rgba(255,255,255,.8); border-radius: 100%; animation: fadenum 50s linear infinite; content: ""; transition: all .4s;}
#main .about .container .profile>.layout>.img>a>i{font-size: 8rem; }
#main .about .container .profile>.layout>.img>a:hover{background: rgba(0,0,0,.5); color: #88cfff;}
#main .about .container .profile>.layout>.img>img{width: 100%;height: auto; object-fit: cover;}
#main .about .container .profile>.layout>.content{width: 40%; box-sizing: border-box; padding: 100px; text-align: left;  }
#main .about .container .profile>.layout>.content>.logo{ text-align: left;}
#main .about .container .profile>.layout>.content>.logo>img{height: 40px; width: auto;}
#main .about .container .profile>.layout>.content>.intro{ margin: 30px auto; font-size: 1.6rem; line-height: 2.2rem; color: rgba(255,255,255,1);}
#main .about .container .profile>.layout>.content>.intro::-webkit-scrollbar {width:2px;height: 1px;}
#main .about .container .profile>.layout>.content>.intro::-webkit-scrollbar-thumb {-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0); background:rgba(255,255,255,.8);}
#main .about .container .profile>.layout>.content>.intro::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0);border-radius: 0;background: transparent;}
#main .about .container .profile>.layout>.content>.intro>p{ margin-bottom: 20px;}
#main .about .container .profile>.layout>.content>.more{text-align: left;}
#main .about .container .profile>.layout>.content>.more>a{display: inline-flex; align-content: center; align-items: center; background: rgba(255,255,255,.8); color: #88cfff; border: 2px solid rgba(255,255,255,.6); font-size: 1.4rem; border-radius: 50px; padding: 12px 25px; transition: all .35s;}
#main .about .container .profile>.layout>.content>.more>a>i{display: inline-block; font-size: 2rem; margin-left: 5px;}
#main .about .container .profile>.layout>.content>.more>a>span{display: inline-block;}
#main .about .container .profile>.layout>.content>.more>a:hover{ background: rgba(255,255,255,0); color: #fff;}

#main .about .container .strength>.layout{width: 86%; max-width: 1680px; margin: 0 auto; display: flex;padding-top: 120px;}
#main .about .container .strength>.layout>.slide {flex: 1;position: relative;margin-right: 30px; border-radius: 26px;overflow: hidden; transition: .6s;}
#main .about .container .strength>.layout>.slide:last-child {margin-right: 0;}
#main .about .container .strength>.layout>.slide>a{display: block;}
#main .about .container .strength>.layout>.slide .img {width: 100%; position: relative;}
#main .about .container .strength>.layout>.slide .img:after{position: absolute;z-index: 1; left: 0;top: 0;width: 100%;height: 100%; background-image: linear-gradient(to bottom, rgba(0,0,0,.1), rgba(0,0,0,.3)); content: '';}
#main .about .container .strength>.layout>.slide .img>img {width: 100%; height: 500px;object-fit: cover;}
#main .about .container .strength>.layout>.slide .box {position: absolute;z-index:12;bottom: 0;left: 0;width: 100%; padding: 40px 50px; box-sizing: border-box; transition: .8s;}
#main .about .container .strength>.layout>.slide .box>.title{position: relative; z-index: 12; font-size: 2rem; font-weight: bold; text-align: left;  color: #fff; transition: all .35s;}
#main .about .container .strength>.layout>.slide .box>.text{  display: none; padding-top: 20px; width: 90%; font-size: 1.6rem; line-height: 2rem; color: rgba(255,255,255,1);transition: all .35s;}
#main .about .container .strength>.layout>.slide .box>.more{display: none; text-align: left; margin-top: 20px; transition: all .35s;}
#main .about .container .strength>.layout>.slide .box>.more>p{width: 36px;height: 36px; display: inline-flex; align-items: center; align-content: center; justify-content: center; background: #88cfff; color: #fff; border-radius: 100%;  transition: all .35s;}
#main .about .container .strength>.layout>.slide .box>.more>p>i{font-size: 1.8rem;}
#main .about .container .strength>.layout>.slide.active{ flex: 2.48;}
#main .about .container .strength>.layout>.slide.active .img:after{ background: rgba(136,207,255,.3)}
#main .about .container .strength>.layout>.slide.active .box{  transform: translateY(-30px);}
#main .about .container .strength>.layout>.slide.active .box>.title{font-size: 3rem;}
#main .about .container .strength>.layout>.slide.active .box>.text{display: block;}
#main .about .container .strength>.layout>.slide.active .box>.more{display: block;}



@keyframes fadenum {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}



#main .contact{margin: 0 auto; padding: 200px 0; background: url("../img/main_message_bg.png") no-repeat; background-position:  center bottom; background-size: 100% auto;}
#main .contact .container{margin: 0 auto;}
#main .contact .container>.describe{ margin: 0 auto; }
#main .contact .container>.describe>.text{text-align: center; font-size: 1.4rem; color: #999; margin: 0 auto; padding-top: 20px;}
#main .contact .container>.describe>.info{display:flex; align-content: center; align-items: center;justify-content: center;}
#main .contact .container>.describe>.info>p{display: inline-flex; align-items: center; align-content: center; margin: 0 10px;}
#main .contact .container>.describe>.info>p>i{ display: inline-block; margin-right: 10px; color: #88cfff; font-size: 3rem;}
#main .contact .container>.describe>.info>p>a{display: inline-block; color: #464646; font-size: 1.6rem; transition: all .35s;}
#main .contact .container>.describe>.info>p>a:hover{color: #88cfff; text-decoration: underline;}
#main .contact .container>.message{ width: 60%; max-width: 400px; margin: 0 auto; padding: 50px 0;}
#main .contact .container>.message .rows{ position: relative; display: block; margin-bottom: 20px;}
#main .contact .container>.message .rows>input{display: block; box-sizing: border-box;}
#main .contact .container>.message .rows #checkimg{position: absolute;z-index: 12; right: 6px;top: 50%; transform: translateY(-50%); cursor: pointer;}
#main .contact .container>.message .rows .layui-input, #main .contact .container>.message .rows .layui-select, #main .contact .container>.message .rows .layui-textarea { border-radius: 5px!important;}
#main .contact .container>.message .rows .layui-anim::-webkit-scrollbar {width:5px;height: 5px;}
#main .contact .container>.message .rows .layui-anim::-webkit-scrollbar-thumb {-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0); background:#88cfff;}
#main .contact .container>.message .rows .layui-anim::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0);border-radius: 0;background: #fff;}
#main .contact .container>.message .rows .layui-form-select dl dd.layui-this { font-weight: bold; background-color: #fff!important; color: #88cfff!important;}
#main .contact .container>.message .policy{ display: flex; align-items: self-start; align-content: center; text-align: left; font-size: 1.2rem; color: #999;}
#main .contact .container>.message .policy>.info{display: inline-flex; }
#main .contact .container>.message .policy>.info>span{ display: inline-block; color: #ff0000; margin:0 6px; font-size: 1.4rem;}
#main .contact .container>.message .policy>.info>em{display: inline-block; font-style: normal;}
#main .contact .container>.message .policy>.info>em>a{display: inline-block; color: #0758ab; text-decoration: underline;}
#main .contact .container>.message .policy .layui-form-checkbox[lay-skin=primary]:hover i { border-color:#88cfff!important;}
#main .contact .container>.message .policy .layui-form-checked[lay-skin=primary] i {border-color: #88cfff!important;background-color: #88cfff!important;}
#main .contact .container>.message .button{padding-top: 30px; text-align: center; margin: 0 auto;}
#main .contact .container>.message .button>a{position: relative; display:inline-block; width: auto; box-sizing:border-box; background: #464646; border-radius: 10px; padding:12px 50px; font-size:1.8rem; color:#fff; overflow: hidden; text-align:center; border:0; cursor:pointer; transition: all .35s;}
#main .contact .container>.message .button>a>span{position: relative;z-index: 20;}
#main .contact .container>.message .button>a:after{position: absolute;z-index: 12; left: -300px; top:-30px; width: 300px;height: 160px; border-radius: 100%; background: #88cfff; content: ''; transition: all .35s;}
#main .contact .container>.message .button>a:hover:after{left: 0;}
#main .contact .container>.message .button>a:hover{background: #88cfff;}

.msg-box{ padding: 15px 0;}
.msg-box>i{ display: block; vertical-align: middle;margin-right: 6px; font-size: 4rem; color: #88cfff;}
.msg-box>span{display: inline-block;vertical-align: middle;}



@media only screen and (max-width: 1680px){


    #banner{ height: auto;}

    #main .about .container .profile>.layout>.img { transform: translateY(80px);}
    #main .about .container .profile>.layout>.content>.intro { height: 200px; overflow-y: auto; overflow-x: hidden; padding-right: 20px; }



}


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



    #banner{  height: 80%;}
    #banner .swiper .swiper-slide>img{width: 100%;height: 100%;}
    #banner .swiper .swiper-slide>.info { bottom: 30%; width: 60%; }
    #banner .swiper .swiper-slide>.info>.title { font-size: 4rem; line-height: 5rem; }
    #banner .swiper .swiper-slide>.info>.text { width: 70%; font-size: 1.6rem;}


    #main .about .container .profile>.layout>.content { padding: 100px 100px 50px 100px;}


}

@media only screen and (max-width: 1380px){

    #main .advantage .container>.swiper .swiper-pagination{display: block;}

    #main .about .container .profile>.layout>.img { transform: translateY(100px);}
    #main .about .container .strength>.layout>.slide .box>.title { font-size: 1.8rem; }
    #main .about .container .strength>.layout>.slide.active .box>.title { font-size: 2.4rem;}
    #main .about .container .strength>.layout>.slide .box>.text { font-size: 1.4rem; line-height: 1.8rem; }

}

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

    #banner .swiper .swiper-slide>.info>.title { font-size: 3rem;line-height: 4rem;}
    #banner .swiper .swiper-slide>.info>.text { font-size: 1.4rem; }
    #banner .swiper .swiper-slide>.info>.more>a { font-size: 1.2rem; padding: 8px 20px; }

    #main .advantage{padding: 100px 0;}
    #main .advantage .container>.swiper{margin: 0 auto; transform: translateY(0);}


    #main .about {padding-top: 100px;}




}

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




    #banner .control{ right: 50px;bottom: 50px; }
    #banner .control>a{ width: 50px; height: 50px; line-height: 50px;}
    #banner .control>a i{font-size: 2rem;}



    #main .theme>.title {font-size: 3.2rem; }
    #main .theme>.title:after {top: -50px;height: 50px; background-size: auto 50px;}






    #main .about .container{padding-top: 50px;}
    #main .about .container .profile>.layout>.img{width:90%; overflow: hidden; float: none; transform: translateY(-50px)}
    #main .about .container .profile>.layout>.content{width: 100%; float: none;padding: 0 100px 100px 100px;  }
    #main .about .container .profile>.layout>.content>.intro{height: auto; }



    #main .about .container .strength>.layout{padding-top: 100px;display: block;}
    #main .about .container .strength>.layout>.slide { float: left; margin-right: 0;width: 48%; margin-bottom: 3%;}
    #main .about .container .strength>.layout>.slide:nth-child(even){float: right;}
    #main .about .container .strength>.layout>.slide .img>img {height: auto;}
    #main .about .container .strength>.layout>.slide.active .box{  transform: translateY(-10px);}



    #main .contact { padding: 100px 0 200px 0;}

}



@media only screen and (max-width: 980px){

    #banner .control{ right: 30px;bottom: 30px; }
    #banner .control>a{ width: 46px; height: 46px; line-height: 46px;}

    #main .products .container>.swiper .swiper-slide>a .box>.title>span {font-size: 1.6rem; }
    #main .products .container>.swiper .swiper-slide>a .box>.intro {  font-size: 1.3rem;}
    #main .products .container>.control>a.prev {margin-left: -70px;}
    #main .products .container>.control>a.next {margin-right: -70px;}

    #main .advantage .container>.swiper .swiper-slide>.slide .intro { font-size: 1.3rem; }

    #main .about .container .profile>.layout>.content>.intro {font-size: 1.4rem; line-height: 2rem; }

    #main .about .container .profile>.layout>.content>.more>a {font-size: 1.2rem;padding: 10px 25px;}

    #main .about .container .strength>.layout>.slide .box { padding: 20px 40px; }
    #main .about .container .strength>.layout>.slide .box>.text { font-size: 1.3rem; line-height: 1.6rem;}
}

@media only screen and (max-width: 860px){


    #banner .swiper .swiper-slide>.info>.text { width: 100%; }
    #banner .control { right: 20px; bottom: 20px;}
    #banner .control>a{ width: 40px; height: 40px; line-height: 40px; margin-left: 6px;}


    #main .theme>.title {font-size: 2.8rem; }

    #main .products .container>.swiper .swiper-pagination{ display: block; }
    #main .products .container>.control>a.prev{ margin-left: -60px;}
    #main .products .container>.control>a.next{ margin-right: -60px;}

    #main .advantage .container>.swiper .swiper-slide>.slide .title {font-size: 1.6rem; }

    #main .contact .container>.describe>.info>p>i {font-size: 2.4rem;}
    #main .contact .container>.describe>.info>p>a { font-size: 1.4rem; }
    #main .contact .container>.describe>.text { font-size: 1.3rem; }


}


@media only screen and (max-width: 640px){

    #banner .swiper .swiper-slide>.info>.title { font-size: 2.4rem;line-height: 3rem;}
    #banner .swiper .swiper-slide>.info>.text {font-size: 1.3rem; }

    #banner .control>a { width: 36px;height: 36px;line-height: 36px; }

    #main .theme>.title {font-size: 2.4rem; }
    #main .theme>.title:after {top: -40px;height: 40px; background-size: auto 40px;}

    #main .products .container>.control{display: none;}

    #main .advantage .container>.swiper .swiper-slide{ overflow:hidden;}
    #main .advantage .container>.swiper .swiper-slide>.slide .box {padding: 30px 20px;}


    #main .about .container .profile>.layout>.img>a>i { font-size: 6rem;}
    #main .about .container .strength>.layout>.slide.active .box>.text { display: none;}
    #main .about .container .strength>.layout>.slide.active .box>.title{font-size: 2rem;}

}

@media only screen and (max-width: 520px){

    #banner{  height: 60%;}

    #banner .swiper .swiper-slide>.info { bottom: 20%;width: 80%;}
    #banner .swiper .swiper-slide>.info>.title { font-size: 1.8rem; line-height: 2rem;}
    #banner .swiper .swiper-slide>.info>.text { font-size: 1.2rem; }
    #banner .control { right: 10px; bottom: 10px;}
    #banner .control>a { width: 28px;height: 28px;line-height: 28px; margin-left: 3px; }
    #banner .control>a i { font-size: 1.6rem; }


    #main .theme { padding: 50px 0;}


    #main .products { padding: 50px 0;}
    #main .products .container>.swiper .swiper-slide>a .box>.intro { display: none;}
    #main .products .container>.swiper .swiper-slide>a .box>.title>span { font-size: 1.4rem;padding: 8px 0;}
    #main .products .container>.control>a>i { font-size: 2rem;}
    #main .products .container>.control>a.prev{ margin-left: -40px;}
    #main .products .container>.control>a.next{ margin-right: -40px;}

    #main .advantage { padding: 50px 0;}


    #main .about { padding-top: 50px; }
    #main .about .container .profile>.layout>.img>a>i { font-size: 4.6rem;}
    #main .about .container .profile>.layout>.content>.logo>img { height: 30px;}
    #main .about .container .profile>.layout>.content {padding: 0 50px 50px 50px;}
    #main .about .container .profile>.layout>.content>.more>a {padding: 8px 16px;}
    #main .about .container .strength>.layout { padding-top: 50px;}
    #main .about .container .strength>.layout>.slide .box { padding: 20px;}
    #main .about .container .strength>.layout>.slide .box>.title { font-size: 1.6rem;}

    #main .contact { padding: 50px 0 100px 0;}
    #main .contact .container>.describe>.info {  display: block;}
    #main .contact .container>.describe>.info>p{display: flex; justify-content: center; margin: 0 auto;}
    #main .contact .container>.message{ width: 86%;}


}