@charset "utf-8";

/* CSS Document */



















/*main */





#head.highlight{position: fixed!important;}



#main{margin: 0 auto;}





/*#main>.banner{position:relative;background:#fff; height:100%; overflow:hidden; transition:all .35s;}*/

/*#main>.banner .mc{ position: absolute;z-index: 60; left: 14%; top: 48%;}*/

/*#main>.banner .mc>.tit{ position: relative;z-index: 30; font-size: 6rem; font-weight: bold; color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.3);}*/

/*#main>.banner .mc>.txt{ position: relative;z-index: 30; padding: 20px 0; font-size: 2rem; font-weight: bold; color: #fff;text-shadow: 0 1px 4px rgba(0,0,0,.1);}*/

/*#main>.banner .video_img{display: none;}*/

/*#main>.banner .swiper{height: 100%;}*/

/*#main>.banner .swiper-wrapper{height: 100%;}*/

/*#main>.banner .swiper-slide{height: 100%;}*/

/*#main>.banner .swiper-slide .img{ position: relative; width:100%;height:100%; background-position: 50% 50%;background-size: cover;}*/

/*#main>.banner .swiper-slide .img>img{display: none;}*/

/*#main>.banner .swiper-slide .img>video{ position:absolute; z-index:2; left: 0;top: 0; width: 100%;}*/

/*#main>.banner .swiper-pagination{ bottom: 30px!important;}*/

/*#main>.banner .swiper-pagination .swiper-pagination-bullet{ border-radius: 0; width: 50px!important;height: 3px!important; background: rgba(255,255,255,1);opacity: .6;}*/

/*#main>.banner .swiper-pagination .swiper-pagination-bullet-active{opacity: 1; background-color: #005d8a !important;}*/







#main>.banner{ position:relative;background:#fff; height:100%; overflow:hidden; transition:all .35s;}

#main>.banner .swiper{ position: relative;z-index: 80; height: 100%;}

#main>.banner .swiper-wrapper{z-index: inherit;}

#main>.banner .swiper-slide{width: 100%;height:100%;overflow: hidden;position: relative;background-position: center top;background-size: cover;}

#main>.banner .swiper-slide .video_mask{ display: none; position: absolute;z-index: 60; left: 0; top: 0; width: 100%;height: 100%; background: rgba(0,0,0,1);}

#main>.banner .swiper-slide .video_mask:after{position: absolute; z-index: 50; left: 50%; top:50%; color: #fff; transform: translate(-50%,-50%); font-family: iconfont; font-weight: 100; width: 60px; height: 60px; line-height: 60px; border-radius: 100%; background: rgba(255,255,255,.1); border: 2px solid rgba(255,255,255,.4); font-size: 3rem; font-weight: bold; content: '\e66e'; transition: all .35s;}

#main>.banner .swiper-slide .banner_video{width: 100%;height:auto;position: absolute;left: 50%;top:50%; transform: translate(-50%,-50%); z-index: 0;}

#main>.banner .swiper-slide .mob{display: none;}

#main>.banner .swiper-pagination{ z-index: 120; bottom: 30px!important;}

#main>.banner .swiper-pagination .swiper-pagination-bullet{ border-radius: 0; width: 50px!important;height: 3px!important; background: rgba(255,255,255,1);opacity: .6;}

#main>.banner .swiper-pagination .swiper-pagination-bullet-active{opacity: 1; background-color: #005d8a !important;}

#main>.banner .info{position: absolute;z-index: 60; left: 14%; top: 48%;}

#main>.banner .info>h2{font-size: 6rem; font-weight: 700; color: rgba(255,255,255,1);text-shadow: 0 2px 6px rgba(0,0,0,.3);}

#main>.banner .info>h3{ position: relative;z-index: 30; padding: 20px 0; font-size: 2rem; font-weight: bold; color: #fff;text-shadow: 0 1px 4px rgba(0,0,0,.1);}











#main>.product{height: 100%; background: url("../img/main_product_bg.jpg") no-repeat; background-size: cover;}

#main>.product .wrap{ max-width: initial;  padding-top: 160px;}

#main>.product .title{ width: 22%; float: left;}

#main>.product .title>h3{ position: relative; font-size: 4rem; font-weight: bold; color: #222;}

#main>.product .title>h3:after{position: absolute;z-index: 2; left: 0;bottom: -20px; width: 50px;height: 5px; background: #005d8a; content: '';}

#main>.product .title>p{ display: block; padding: 50px 0; font-size: 1.8rem;  line-height: 3rem; color: #666;}

#main>.product .title>a{display: inline-block; border: 1px solid rgba(0,0,0,.4); padding: 10px 30px; font-size: 1.3rem; color: rgba(0,0,0,.6); transition: all .35s;}

#main>.product .title>a:hover{ border-color: #005d8a; background: #005d8a; color: rgba(255,255,255,1);}

#main>.product .title>.control{position: relative; padding-top: 30px;}

#main>.product .title>.control .prev,#main>.product .title>.control .next{display: inline-block; cursor: pointer; transition: all .35s;}

#main>.product .title>.control .prev>i, #main>.product .title>.control .next>i{font-size: 3.6rem; color: #005d8a;}

#main>.product .title>.control .swiper-button-disabled{opacity: .3;}

#main>.product .container{ position: relative; width: 74%; height: 650px; float: right;}

#main>.product .container .swiper {width: 100%;height: 100%;}

#main>.product .container .swiper-slide{position: relative;overflow: hidden; height: calc((100% - 50px) / 2); display: flex;}

#main>.product .container .swiper-slide>a{display: block;}

#main>.product .container .swiper-slide .img{ text-align: left;overflow: hidden; background: #000;}

#main>.product .container .swiper-slide .img>img{transition: all .5s;}

#main>.product .container .swiper-slide .box{padding: 30px; background: #fff;}

#main>.product .container .swiper-slide .box>.tit{font-size: 1.6rem; color: #333; }

#main>.product .container .swiper-slide .view{ opacity: 0; position: absolute;z-index: 50; left: 50%; top: 50%; background: #005d8a url("../img/logo_s.png") no-repeat; background-position: right bottom; box-sizing: border-box; padding: 40px; text-align: left; width: 90%; height: 90%; transform: translate(-50%,0); transition: all .35s;}

#main>.product .container .swiper-slide .view>h3{font-size: 2rem; font-weight: bold; color: #fff;}

#main>.product .container .swiper-slide .view>p{ padding: 20px 0; font-size: 1.4rem; color: rgba(255,255,255,1); line-height: 2.4rem;}

#main>.product .container .swiper-slide .view>span{display: block; position: absolute;z-index: 10; left: 30px; bottom: 30px; text-align: right; font-size: 1.2rem; color: rgba(255,255,255,.6);}

#main>.product .container .swiper-slide .view>span:hover{ text-decoration: underline;}

#main>.product .container .swiper-slide:hover .view{opacity: 1;transform: translate(-50%,-50%);}

#main>.product .container .swiper-slide:hover .img>img{opacity: .5;}





#main>.application{ height: 100%; overflow: hidden;}

#main>.application .swiper{height: 100%;}

#main>.application .swiper-wrapper{height: 100%;}

#main>.application .swiper-slide{height: 100%;}

#main>.application .swiper-slide>a{display: block;position: relative; height: 100%;overflow: hidden;}

#main>.application .swiper-slide>a:after{ position: absolute;z-index: 1; left: 0;top: 0;width: 100%;height: 100%; background: rgba(0,0,0,.5); content: '';transition: all .35s;}

#main>.application .swiper-slide>a .box{position: absolute;z-index: 50; left: 50px; top: 30%; text-align: left; transition: all .35s; }

#main>.application .swiper-slide>a .box>.sub{ font-size: 2.2rem;color: rgba(255,255,255,.3); text-transform: uppercase; transform: translateY(70px); transition: all .6s;}

#main>.application .swiper-slide>a .box>.tit{font-size:2.5rem; font-weight: 700; color: #fff; transition: all .35s;}

#main>.application .swiper-slide>a .box>.view{text-align: left;opacity: 0; transform: translateY(200px); transition: all .35s;}

#main>.application .swiper-slide>a .box>.view>span{ display: inline-block; background: rgba(255,255,255,1); width: 36px; height: 36px; line-height: 36px; overflow: hidden; border-radius: 100%; text-align: center; color:#005d8a;}

#main>.application .swiper-slide>a .box>.view>span>i{font-weight: bold; font-size: 2rem;}

#main>.application .swiper-slide>a img{ width: auto;height: 100%; transition: all 1s;object-fit: cover;filter: grayscale(100%); }

#main>.application .swiper-slide>a:hover:after{background: #005c8aa9;}

#main>.application .swiper-slide>a:hover img{ transform: scale(1.05);}

#main>.application .swiper-slide>a:hover .box{ transform: translateY(80px);}

#main>.application .swiper-slide>a:hover .box>.view{opacity: 1; transform: translateY(20px);}

#main>.application .swiper-slide>a:hover .box>.sub{opacity: 1; transform: translateY(-5px);}



/*#main>.about{ height: 100%; overflow: hidden;}*/

/*#main>.about .container{height: 100%;}*/

/*#main>.about .container>.item{display: block; float: left; width: 25%;overflow: hidden;}*/

/*#main>.about .container>.item>a{display: block;position: relative; height: 100%;}*/

/*#main>.about .container>.item>a:after{ position: absolute;z-index: 1; left: 0;top: 0;width: 100%;height: 100%; background: rgba(0,0,0,.5); content: '';transition: all .35s;}*/

/*#main>.about .container>.item>a .box{position: absolute;z-index: 50; left: 50px; top: 30%; text-align: left; transition: all .35s; }*/

/*#main>.about .container>.item>a .box>.tit{font-size:6rem; font-weight: 700; color: #fff; transition: all .35s;}*/

/*#main>.about .container>.item>a .box>.txt{ display: block; font-size: 2rem; color: rgba(255,255,255,.8); transition: all .35s;}*/

/*#main>.about .container>.item>a .box>.view{text-align: left;opacity: 0; transform: translateY(200px); transition: all .35s;}*/

/*#main>.about .container>.item>a .box>.view>span{ display: inline-block; background: rgba(255,255,255,1); width: 36px; height: 36px; line-height: 36px; overflow: hidden; border-radius: 100%; text-align: center; color:#005d8a;}*/

/*#main>.about .container>.item>a .box>.view>span>i{font-weight: bold; font-size: 2rem;}*/

/*#main>.about .container>.item>a img{ width: 100%;height: auto; transition: all 1s;}*/

/*#main>.about .container>.item>a:hover:after{background: #005d8a;}*/

/*#main>.about .container>.item>a:hover img{ transform: scale(1.05);}*/

/*#main>.about .container>.item>a:hover .box{ transform: translateY(80px);}*/

/*#main>.about .container>.item>a:hover .box>.view{opacity: 1; transform: translateY(20px);}*/





#main>.about{ position: relative; height: 100%;}

#main>.about .above{ height: 60%;}

#main>.about .above>.title{width: 38%; height: 100%;background: #222; box-sizing: border-box;padding: 10% 100px; text-align: left;}

#main>.about .above>.title>h3{font-size: 4rem; font-weight: bold; color: #fff;}

#main>.about .above>.title>p{ display: block; padding: 30px 0; font-size: 1.8rem;  line-height: 3.6rem; color: #fff;}

#main>.about .above>.title>a{display: inline-block; border: 1px solid rgba(255,255,255,.4); padding: 10px 30px; font-size: 1.3rem; color: rgba(255,255,255,.6); transition: all .35s;}

#main>.about .above>.title>a:hover{ border-color: #005d8a; background: #005d8a; color: rgba(255,255,255,1);}

#main>.about .above>.item{ position: relative; width: 62%; height: 100%; overflow: hidden; background: #000;}

#main>.about .above>.item>a .title{ position: absolute;z-index: 10; left: 0;bottom: 0; padding: 30px 50px; font-size: 1.8rem; color: #fff;text-shadow: 0 0 6px rgba(0,0,0,.3); transition: all .35s;}

#main>.about .above>.item>a .pic{position: relative; width: 100%; height: 100%; background-size: cover; background-position: 50% 50%; transition: all 1s;}

#main>.about .above>.item>a .pic>img{ display: none; width: 100%;height: auto; transition: all 1s;}

#main>.about .above>.item>a:hover img{transform: scale(1.06);}

#main>.about .above>.item>a:hover .pic{ transform: scale(1.06);opacity: .7;}

#main>.about .above>.item>a:hover .title{ transform: translateY(-15px);}

#main>.about .below{ height: 40%;}

#main>.about .below>.item{ position: relative; float: left; width: 31%; height: 100%; overflow: hidden; background: #000;}

#main>.about .below>.item:nth-child(3){width: 38%;}

#main>.about .below>.item>a .title{ position: absolute;z-index: 10; left: 0;bottom: 30px; padding: 0 50px; font-size: 1.8rem; color: #fff;text-shadow: 0 0 6px rgba(0,0,0,.3); transition: all .35s;}

#main>.about .below>.item>a .pic{position: relative; width: 100%; height: 100%; background-size: cover; background-position: 50% 50%; transition: all 1s;}

#main>.about .below>.item>a .pic>img{ display: none; width: 100%;height: auto; transition: all 1s;}

#main>.about .below>.item>a:hover img{transform: scale(1.06);}

#main>.about .below>.item>a:hover .pic{ transform: scale(1.06);opacity: .7;}

#main>.about .below>.item>a:hover .title{ transform: translateY(-15px);}









#main>.partners{ position: relative; height: 100%;  background: url("../img/main_partners_bg.jpg") repeat; background-position: left bottom;}

#main>.partners .wrap{ max-width: initial;  }

#main>.partners .title{ width: 22%; float: left; padding-top: 100px;}

#main>.partners .title>h3{ position: relative; font-size: 4rem; font-weight: bold; color: #222;}

#main>.partners .title>p{ display: block; padding: 30px 0; font-size: 1.8rem;  line-height: 3rem; color: #666;}

#main>.partners .title>a{display: inline-block; border: 1px solid rgba(0,0,0,.4); padding: 10px 30px; font-size: 1.3rem; color: rgba(0,0,0,.6); transition: all .35s;}

#main>.partners .title>a:hover{ border-color: #005d8a; background: #005d8a; color: rgba(255,255,255,1);}

#main>.partners .container{ width: 50%; height: 100%; float: right;}

#main>.partners .container .item{ width: 33.33%; float: left;}

#main>.partners .wave .marquee-box {overflow: hidden;width: 100%;position: absolute;left: 0; bottom: 0;z-index: 10;}

#main>.partners .wave .marquee { width: 8000%; height: 100px}

#main>.partners .wave .marquee-up{z-index: 20;}

#main>.partners .wave .marquee-bottom{z-index: 1;}

#main>.partners .wave .wave-list-box {float: left;}

#main>.partners .wave .wave-list-box ul {float: left; height: 100px; overflow: hidden; zoom: 1}

#main>.partners .wave .wave-list-box ul li { height: 100px; width: 100%; float: left; line-height: 30px; list-style: none}

#main>.partners .wave .wave-box {position: relative;height: 100px;}





#main>.foot{position: relative;}

#main>.foot:after{ position: absolute;z-index: 50; left: 0;top: -5px; width: 100%;height: 10px; background: #999999; content: '';}



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



    #main>.banner .swiper-slide .img>video{ transform: scale(1.1);}



}

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

    #main>.banner .swiper-slide .img>video{ transform: scale(1.2);}

}









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



    #main>.banner .swiper-slide .img>video{ transform: scale(1.3);}







}



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



    #main>.banner .swiper-slide .img>video{ transform: scale(1.4);}



}

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



    #main>.banner .swiper-slide .img>video{ transform: scale(1.46);}



    #main>.product .title>h3{ font-size: 3.2rem;}

    #main>.product .title>h3:after{width: 40px;height: 4px;}

    #main>.product .title>p{ font-size: 1.6rem;  line-height: 2.4rem;}

    #main>.product .container .swiper-slide .view{padding: 30px;}

    #main>.product .container .swiper-slide .view>h3{font-size: 1.8rem;}

    #main>.product .container .swiper-slide .view>p{ font-size: 1.3rem;line-height: 2rem;}



    #main>.about .above>.title>h3{font-size: 3.2rem;;}

    #main>.about .above>.title>p{ font-size: 1.6rem;  line-height: 2.4rem;}



    #main>.partners .title>h3{ font-size: 3.2rem;}

    #main>.partners .title>p{ font-size: 1.6rem;  line-height: 2.4rem;}



    #main>.product .container { width: 60%; height: 600px; }

    #main>.product .container .swiper-slide{height: calc((100% - 30px) / 2);}

}



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



    #main>.banner .info>h2{font-size: 4.2rem;}

    #main>.banner .info>h3{  font-size: 1.8rem;}





    #main>.application {height: 720px!important;}

    #main>.application .fp-tableCell {height: 720px!important;}



    #main>.product {height: 800px!important;}

    #main>.product .fp-tableCell {height: 800px!important;}

    #main>.product .wrap{ padding-top: 0;}





}



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





    #main>.banner .info>h2{font-size: 3.6rem;}

    #main>.banner .info>h3{ font-size: 1.6rem;}



    #main>.product .container { width: 65%;}



    #main>.application .swiper-slide>a .box>.sub{ font-size: 1.8rem;}

    #main>.application .swiper-slide>a .box>.tit{font-size:2.2rem;}







}

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



    #main .title>span{ font-size: 3.6rem;}

    #main .title>h3{font-size: 2rem; }







    #main>.banner{ height: 70%;}

    #main>.banner .swiper-slide .video_mask{display: inline-block;}

    #main>.banner .swiper-slide .banner_video{width: auto;height:100%;}

    #main>.banner .info>h2{font-size: 3rem;}

    #main>.banner .info>h3{ font-size: 1.4rem;}









    #main>.product {height: 650px!important;}

    #main>.product .fp-tableCell {height: 650px!important;}

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

    #main>.product .title>p{ font-size: 1.4rem;}

    #main>.product .container { height: 480px; }

    #main>.product .container .swiper-slide .box {padding: 20px; }



    #main>.about {height: 760px!important;}

    #main>.about .fp-tableCell {height: 760px!important;}

    #main>.about .above>.title {padding: 8% 50px; }

    #main>.about .above>.title>h3{font-size: 2.8rem;;}

    #main>.about .above>.title>p{ font-size: 1.4rem;}



    #main>.partners {height: 560px!important;}

    #main>.partners .fp-tableCell {height: 560px!important;}

    #main>.partners .title {width: 25%;padding-top: 30px;}

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

    #main>.partners .title>p{ font-size: 1.4rem;}





}













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



    #main>.banner{ height: 100%;}



    #main>.banner .info>h2{font-size: 2.4rem;}

    #main>.banner .swiper-slide{background: #000; background-image: none!important; text-align: center;}

    #main>.banner .swiper-slide .mob{display: inline-block; width: 100%;height: auto; min-height: 100vh;}

    #main>.banner .swiper-pagination .swiper-pagination-bullet{ width: 20px!important;}





    #main>.product{padding: 50px 0;}

    #main>.product .title{ position: relative; width: 100%; float: none;}

    #main>.product .title>a{padding: 6px 20px; font-size: 1.2rem; }

    #main>.product .title>p { padding-bottom: 10px;}

    #main>.product .title>.control{position: absolute;z-index: 20; right: 0;padding-top: 0; margin-top: -30px; }

    #main>.product .container{ width: 100%; height: 600px; float: none; padding-top: 50px;}





    #main>.about .above{ height: auto;}

    #main>.about .above>.title{ float: none; width: 100%;}

    #main>.about .above>.title>a {padding: 6px 20px; font-size: 1.2rem;}

    #main>.about .above>.item{ float: none; width: 100%;}

    #main>.about .above>.item>a .title{ font-size: 1.6rem; }

    #main>.about .above>.item>a .pic>img {display: block;}

    #main>.about .below{ height: auto;}

    #main>.about .below>.item{ width: 100%; height: auto; float: none;}

    #main>.about .below>.item:nth-child(3){width: 100%;float: none;}

    #main>.about .below>.item>a .pic>img { display: block;}



    #main>.partners {height: auto!important;}

    #main>.partners .fp-tableCell {height: auto!important;}

    #main>.partners .title{ width: 100%; float: none;}

    #main>.partners .container{ width: 100%; height: auto; float: none; padding-bottom: 120px;}













}



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







    #main>.banner .info{top: 56%;}







    #main>.product .container{ height: 560px;}









}



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







    #main>.banner .info{top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; width: 80%; }

    #main>.banner .info>h2{font-size: 2.2rem;}

    #main>.banner .info>h3{  font-size: 1.4rem; font-weight: normal; }

    #main>.banner .swiper-pagination{ bottom: 8%!important;}

    #main>.banner .swiper-pagination .swiper-pagination-bullet{ width: 10px!important; height: 10px!important; border-radius: 100% !important}



    #main>.product {height: auto!important;}

    #main>.product .fp-tableCell {height: auto!important;}

    #main>.product .title>h3{ font-size: 2rem;}

    #main>.product .title>h3:after{bottom: -10px; width: 30px;height: 3px;}

    #main>.product .title>p{ font-size: 1.2rem; padding: 20px 0;}

    #main>.product .container{ height: auto;}



    #main>.application {height: 400px!important;overflow: hidden!important;}

    #main>.application .fp-tableCell {height: 400px!important;}

    #main>.application .swiper{ height: 400px!important;}

    #main>.application .swiper-slide{height: 400px!important;}

    #main>.application .swiper-slide>a img { position: relative; transform: translateY(-25%); width: 100%; height: auto;}





    #main>.about .above>.title>h3{ font-size: 2rem;}

    #main>.about .above>.title>p { font-size: 1.2rem;}

    #main>.about .above>.item>a .title {font-size: 1.4rem;}

    #main>.about .below>.item>a .title { font-size: 1.4rem; }





    #main>.partners .title>h3 {font-size: 2rem; }

    #main>.partners .title>p { padding: 15px 0; font-size: 1.2rem;}







}



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



    #main .title>span {font-size: 3rem;}



    #main>.banner .info>h2{font-size: 2.4rem;}





}