@charset "utf-8";

@import url('https://fonts.loli.net/css?family=Montserrat:300,400,500,600,700,800,900');


#banner{position:relative;background:#fff; width: 100%; height:100%; overflow:hidden; transition:all .35s;}
#banner .swiper{ position: relative;z-index: 80; height: 100%;}
#banner .swiper-wrapper{z-index: inherit;}
#banner .swiper-slide{width: 100%;height:100%;overflow: hidden;position: relative;background-position: center top;background-size: cover;}
#banner .swiper-slide.swiper-slide-active img{animation: ring 2s infinite; animation-iteration-count:1;}
#banner .swiper-slide .video_mask{ position: absolute;z-index: 60; left: 0; top: 0; width: 100%;height: 100%; background-color: rgba(0,0,0,.3); background-position: 50% 50%; background-size: cover;}
#banner .swiper-slide .video_mask:after{ display: none; position: absolute; z-index: 50; left: 50%; top:50%; color: #fff; transform: translate(-50%,-50%); font-family: iconfont;  width: 60px; height: 60px; line-height: 60px; font-size: 6rem; content: '\e607'; transition: all .35s;}
#banner .swiper-slide .video_mask:before{ display: none; position: absolute;z-index: 12; left: 50%; top: 59%;transform: translate(-50%,-50%); color: rgba(255,255,255,.6); width: 80px; font-size: 1.3rem; text-align: center; height: 20px; line-height: 20px; content: 'Click to play'; transition: all .35s;}
#banner .swiper-slide .video_mask.active:after{display: none;}
#banner .swiper-slide .video_mask.active:before{display: none;}
#banner .swiper-slide .banner_video{width: 100%;height:auto;position: absolute;left: 50%;top:50%; transform: translate(-50%,-50%); z-index: 0;}
#banner .swiper-slide .mob{display: none;}
#banner .swiper-slide img{object-fit: cover;height: 100%;width: auto;}
#banner .swiper-slide .info{position: absolute;z-index: 560;  left: 12%; bottom: 22%; width:60%; padding: 0; box-sizing: border-box;text-align: left;}
#banner .swiper-slide .info>h3{ display: block; position: relative; font-size: 4.6rem;text-transform: uppercase; font-weight: bold;padding: 20px 0; color: rgba(255,255,255,1);}
#banner .swiper-slide .info>h4{ display: none; position: relative; font-size: 3rem; text-transform: uppercase; width: 50%; color: rgba(255,255,255,.6);}
#banner .swiper-slide .info>a{display: none; margin-top: 120px; border: 1px solid rgba(255,255,255,.3); padding: 10px 30px; border-radius: 30px; color: #fff; font-size: 1.4rem; transition: all .35s;}
#banner .swiper-slide .info>a>span{display: inline-block;vertical-align: middle; margin-right: 10px;}
#banner .swiper-slide .info>a>i{display: inline-block; vertical-align: middle;font-size: 2rem;}
#banner .swiper-slide .info>a:hover{background: rgba(18,71,155,.9);}
#banner .swiper-slide .info.active{display: block;}

#banner .control{ display: none!important; position: absolute;z-index: 150; right: 100px; bottom: 100px;}
#banner .control .nums{display: inline-block; vertical-align: middle; box-sizing: border-box; width: auto; min-width: 60px; height: 60px; line-height: 60px; font-family: 'Montserrat', sans-serif;  text-align: left; padding: 0 30px;font-size: 1.6rem; color: #fff;}
#banner .control .nums .swiper-pagination-current{ color: #fff;}
#banner .control .prev, #banner .control .next{ position: relative; display: inline-block; vertical-align: middle; margin: 0 6px; border-radius: 100%; cursor: pointer; width: 60px;height: 60px; line-height: 60px; border: 2px solid rgba(255,255,255,.3); text-align: center; color: #fff; transition: all .35s;}
#banner .control .prev i, #banner .control .next i{font-size: 2rem;}
#banner .control .prev:hover, #banner .control .next:hover{border-color: #fff; color: #fff; box-shadow: 0 6px 10px rgba(40, 105, 183, .24);}
#banner .control .swiper-button-disabled{ opacity: .5; background: #fff!important; border-color: #eee!important; color: #666!important;}
#banner .control.active{display: block;}


@keyframes ring {
    0% {
        transform: scale(1.2);
    }
    to {
        transform: scale(1);
    }
}




#main{margin: 0 auto;}

#main .title{ text-align: center; font-size: 4.2rem; font-weight: bold; color: #111; margin: 0 auto;}


#main .products{margin: 0 auto; background: #fff url("../img/main_products_bg.png") no-repeat; background-position: 0 0; padding: 100px 0;}
#main .products .title{text-align: left; padding: 0 28px;}
#main .products .container{margin: 0 auto;padding: 0;}
#main .products .container>.swiper{margin: 0 auto; padding: 20px 28px;}
#main .products .container>.swiper .swiper-slide{box-sizing: border-box; background: rgba(255,255,255,1); height: calc((100% - 30px) / 2) !important;display: flex; justify-content: center; align-items: center;border: 1px solid #e6e6e6; border-radius: 16px; transition: all .35s;}
#main .products .container>.swiper .swiper-slide>a{display: block;position: relative;overflow: hidden;}
#main .products .container>.swiper .swiper-slide>a .img>img{ width: 100%;height: auto; transition: all .6s}
#main .products .container>.swiper .swiper-slide>a .tit{text-align: center; font-size: 2rem; padding: 20px 0 30px 0; position: relative; transition: all .5s}
#main .products .container>.swiper .swiper-slide>a .tit:after{position: absolute;z-index: 12; left: 50%;}
#main .products .container>.swiper .swiper-slide>a .more{position: absolute;z-index: 50; right: 0;bottom: 0; width: 80px; height: 80px; }
#main .products .container>.swiper .swiper-slide>a .more .radian { position: absolute; right: -13px; bottom: -13px;z-index: 10; width: 120px; transform: scale3d(0, 1, 0);transition: transform 1.8s cubic-bezier(0.19, 1, 0.22, 1);transform-origin: right bottom;fill: #fff;}
#main .products .container>.swiper .swiper-slide>a .more .ico{ position: absolute;z-index: 30; right: 10px; bottom: 10px; width: 40px;height: 40px; line-height: 40px; text-align: center; display: block; background: #12479b; border-radius: 100%; color: #fff; opacity: 0; transform: translateX(-30px) scale(.8); transition: all .5s;}
#main .products .container>.swiper .swiper-slide>a .more .ico>i{font-size: 1.8rem;}
#main .products .container>.swiper .swiper-slide>a:hover .tit{font-weight: bold; color: #12479b; transform: scale(1.1)}
#main .products .container>.swiper .swiper-slide>a:hover .img>img{transform: scale(.8)}
#main .products .container>.swiper .swiper-slide>a:hover .more .radian{transform:scale3d(1, 1, 1);}
#main .products .container>.swiper .swiper-slide>a:hover .more .ico{opacity: 1; transform: translateX(0) scale(1);}
#main .products .container>.swiper .swiper-slide:hover{ border-color: #fff; background: #edf4ff; }
#main .products .container>.swiper .swiper-pagination{position: relative; bottom: 0; padding-top: 20px;}



@-webkit-keyframes ani_title_animate {
    0% {opacity: 0; transform: translateY(50px); }
    100% {opacity:1; transform: translateY(0); }
}

@-webkit-keyframes ani_intro_animate {
    0% {opacity: 0; transform: translateY(100px); }
    100% {opacity:1; transform: translateY(0); }
}


@-webkit-keyframes ani_lists_animate {
    0% {opacity: 0; transform: translateY(50px); }
    100% {opacity:1; transform: translateY(0); }
}

@-webkit-keyframes ani_pro_animate {
    0% {opacity: 0; transform: translateX(-50px) scale(.7); }
    100% {opacity:1; transform: translateX(0) scale(1); }
}



#main .about{margin: 100px auto 0 auto; padding: 150px 0; background: url("../img/main_about_bg.jpg") no-repeat; background-position: 0 0; background-size: cover;}
#main .about .video{margin: 0 auto; position: relative; height: 80vh; padding: 0 28px; transition: all .35s;}
#main .about .video:after{position: absolute;z-index: 1; left: 0;top: 0;width: 100%;height: 100%; background: rgba(0,0,0,.3); content: '';}
#main .about .video>h2{position: absolute;z-index: 12; left: 50%;top: 50%;transform: translate(-50%,-50%); color: #fff; text-align: center;font-size: 4rem; transition: all .35s;}
#main .about .video>video{ position: absolute;top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: cover;width: 100%;height: 100%;}
#main .about .title{ width: 86%; font-weight: normal; text-align: left; padding: 30px 60px 30px 0; transform: translateY(0px); opacity: 1; color: #fff; transition: all .35s;}
#main .about .container{ width: 86%; margin: 0 auto; text-align: left;}
#main .about .container>.statistics{margin: 0 auto; width: 70%; max-width: 860px; display: inline-block; transform: translateY(50px);}
#main .about .container>.statistics>.rows{display: inline-block;  float: left; width: 33.33%;  margin-bottom: 20px; text-align: left;}
#main .about .container>.statistics>.rows>.num{ font-family: 'Roboto', sans-serif; font-size: 8rem;font-weight: 900; color: #fff;}
#main .about .container>.statistics>.rows>.num>span{display: inline-block;position: relative;}
#main .about .container>.statistics>.rows>.num>span.plus:after{position: absolute;z-index: 12;  right: -40px;top: 50%; transform: translateY(-50%); font-size: 6rem; content: '+';}
#main .about .container>.statistics>.rows>.num>span.unit:after{position: absolute;z-index: 12;  right: -32px;top: 50%; transform: translateY(-50%); font-size: 4rem; content: attr(data-txt);}
#main .about .container>.statistics>.rows>.tit{font-size: 2rem; color: rgba(255,255,255,.4);}
#main .about .container>.statistics>.rows:last-child{margin-right: 0;}
#main .about .container>.more{text-align: left; padding-top: 100px;}
#main .about .container>.more>a{display: inline-block; color: #fff; transition: all .35s;}
#main .about .container>.more>a span{display: inline-block;vertical-align: middle; font-size: 1.6rem;transition: all .35s;}
#main .about .container>.more>a i{ display: inline-block;vertical-align: middle; text-align: center; margin-left: 10px; font-size: 1.8rem; color: #fff; width: 32px; height: 32px; line-height: 32px; border-radius: 100%; border: 1px solid #999; transition: all .35s;}
#main .about .container>.more>a:hover i{ transform: translateX(6px);}
#main .about .container>.more>a:hover{ color: #fff;}
#main .about.active .video{ width: 86%; max-width: 1600px;}
#main .about.active .title{opacity: 1; transform: translateY(0);}



#main .news{ position: relative;z-index: 100; margin: 0 auto; padding: 100px 0 200px 0;}
#main .news .container{margin: 0 auto;}
#main .news .container>.swiper{margin: 0 auto; padding: 80px 28px; }
#main .news .container>.swiper .swiper-slide{ text-align: left; box-sizing: border-box;}
#main .news .container>.swiper .swiper-slide>a{display: block; box-sizing: border-box; background: #fff;overflow: hidden; border-radius: 16px; transition: all .35s;}
#main .news .container>.swiper .swiper-slide>a>.img{ position: relative;overflow: hidden;}
#main .news .container>.swiper .swiper-slide>a>.img img{ border-radius: 16px; transition: all 1s;}
#main .news .container>.swiper .swiper-slide>a>.img>.more{position: absolute;z-index: 50; right: 0;bottom: 0; width: 80px; height: 80px; overflow: hidden;}
#main .news .container>.swiper .swiper-slide>a>.img>.more .radian { position: absolute; right: -13px; bottom: -13px;z-index: 10; width: 120px; transform: scale3d(0, 1, 0);transition: transform 1.8s cubic-bezier(0.19, 1, 0.22, 1);transform-origin: right bottom;fill: #fff;}
#main .news .container>.swiper .swiper-slide>a>.img>.more .ico{ position: absolute;z-index: 30; right: 10px; bottom: 10px; width: 40px;height: 40px; line-height: 40px; text-align: center; display: block; background: #12479b; border-radius: 100%; color: #fff; opacity: 0; transform: translateX(-30px) scale(.8); transition: all .5s;}
#main .news .container>.swiper .swiper-slide>a>.img>.more .ico>i{font-size: 1.8rem;}
#main .news .container>.swiper .swiper-slide>a>.box{ box-sizing: border-box;padding: 30px;}
#main .news .container>.swiper .swiper-slide>a>.box>.time{font-size: 1.6rem; font-weight: 600; font-family: 'Montserrat', sans-serif;  color: #12479b; padding-bottom: 20px;}
#main .news .container>.swiper .swiper-slide>a>.box>.title{ margin: 0 auto; height: 120px; display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;font-size: 2.2rem; text-align: left; width: 100%; font-weight: 400;}
#main .news .container>.swiper .swiper-slide>a>.box>.text{ display: none; }
#main .news .container>.swiper .swiper-slide>a:hover .box>.title{color: #12479b;}
#main .news .container>.swiper .swiper-slide>a:hover .img img{ transform: scale(1)}
#main .news .container>.swiper .swiper-slide>a:hover .img>.more .radian{transform:scale3d(1, 1, 1);}
#main .news .container>.swiper .swiper-slide>a:hover .img>.more .ico{opacity: 1; transform: translateX(0) scale(1);}
#main .news .container>.swiper .swiper-slide>a:hover{box-shadow: 0 10px 30px rgba(40, 105, 183, .24); transform: translateY(0px);}
#main .news .container>.control{margin: 0 auto; display: flex; align-items: center;align-content: center; justify-content: center;}
#main .news .container>.control .swiper-pagination{display: none;}
#main .news .container>.control .prev, #main .news .container>.control .next{display: inline-block; margin: 0 10px; border-radius: 100%; cursor: pointer; width: 46px;height: 46px; line-height: 46px; text-align: center; background: #12479b; color: #fff; transition: all .35s;}
#main .news .container>.control .prev>i, #main .news .container>.control .next>i{font-size: 2.4rem;}
#main .news .container>.control .prev:hover, #main .news .container>.control .next:hover{background: #12479b; border-color: #12479b; color: #fff; box-shadow: 0 6px 10px rgba(40, 105, 183, .24);}
#main .news .container>.control .swiper-button-disabled{ background: #999;}



#main .history{ position: relative;z-index: 100; margin: 0 auto; padding:100px 0; background: url("../img/main_history_bg.jpg") no-repeat; background-position: center bottom; background-size: cover;}
#main .history .container{margin: 0 auto; padding: 80px 28px;}
#main .history .container>.layout{ margin: 0 auto;}
#main .history .container>.layout .nav{ width: 20%;}
#main .history .container>.layout .nav>.navSwiper{ width: 100%; height: 380px; }
#main .history .container>.layout .nav>.navSwiper .swiper-slide{position: relative;}
#main .history .container>.layout .nav>.navSwiper .swiper-slide>a{position: relative;display: block; padding: 5px 0;  transition: all .35s;}
#main .history .container>.layout .nav>.navSwiper .swiper-slide>a:after{position: absolute;z-index: 1; left: 0; bottom: 0; width: 0;height: 2px; background: #12479b; content: ''; transition: all .35s;}
#main .history .container>.layout .nav>.navSwiper .swiper-slide>a>h3{ font-size: 1.8rem; font-weight: bold; transition:all .35s; }
#main .history .container>.layout .nav>.navSwiper .swiper-slide>a>span{ font-size: 2rem; font-weight: bold; transition: all .35s; }
#main .history .container>.layout .nav>.navSwiper .swiper-slide-thumb-active>a:after{ width: 30px;}
#main .history .container>.layout .nav>.navSwiper .swiper-slide-thumb-active>a>h3{ font-size: 2.6rem; color: #12479b;}
#main .history .container>.layout .nav>.navSwiper .swiper-slide-thumb-active>a>span{color: #12479b;}
#main .history .container>.layout .nav>.navSwiper .swiper-pagination{ display: none; top: auto; bottom: 0;}
#main .history .container>.layout .show{ position:relative; display: block; width: 75%; height: 500px; }
#main .history .container>.layout .show .showSwiper{ position: relative; height: 100%;}
#main .history .container>.layout .show .showSwiper>.swiper-wrapper>.swiper-slide{ position: relative; margin: 0 auto;opacity: 0!important;}
#main .history .container>.layout .show .showSwiper>.swiper-wrapper>.swiper-slide-active{opacity: 1!important;}
#main .history .container>.layout .show .innerSwiper{height: 100%;}
#main .history .container>.layout .show .innerSwiper>.swiper{ position: relative; height: 100%; margin: 0 auto;}
#main .history .container>.layout .show .innerSwiper>.swiper .swiper-slide{ position: relative; z-index: 12; height: 100%; box-sizing: border-box; display: block; }
#main .history .container>.layout .show .innerSwiper>.swiper .swiper-slide>.slide{ width: 50%; height: 50%; float: left; padding: 40px 0 40px 40px; border-left: 0px solid rgba(0,0,0,.1); border-bottom: 0px solid rgba(0,0,0,.1); box-sizing: border-box; transition: .6s;}
#main .history .container>.layout .show .innerSwiper>.swiper .slideNum1>.slide{ border-left: 0; border-bottom: 0;}
#main .history .container>.layout .show .innerSwiper>.swiper .swiper-slide>.slide:nth-child(3), #main .history .container>.layout .show .innerSwiper>.swiper .swiper-slide>.slide:nth-child(4){border-bottom: 0;}
#main .history .container>.layout .show .innerSwiper>.swiper .swiper-slide>.slide .years{ font-size: 4rem; font-weight: bold; color: #12479b;}
#main .history .container>.layout .show .innerSwiper>.swiper .swiper-slide>.slide .intro{ padding: 30px 0; transition: all .35s;}
#main .history .container>.layout .show .innerSwiper>.swiper .swiper-slide>.slide .intro>p{display: block; margin-bottom: 10px; font-size: 1.6rem; color: #333;}
#main .history .container>.layout .show .innerSwiper>.swiper .swiper-slide>.slide.active{ width: 45%; }
#main .history .container>.layout .show .innerSwiper>.swiper .swiper-slide>.slide.active .years{ color: #12479b; }
#main .history .container>.layout .show .innerSwiper>.swiper .swiper-slide>.slide.active .intro{ opacity: 1; transform: translateY(0);}
#main .history .container>.layout .show .innerSwiper>.swiper .swiper-slide>.slide:hover .years{color: #12479b;}
#main .history .container>.layout .show .innerSwiper>.swiper .control{ position: absolute;z-index: 12; left: 40px; bottom: 0; display: flex;}
#main .history .container>.layout .show .innerSwiper>.swiper .control>.prev, #main .history .container>.layout .show .innerSwiper>.swiper .control>.next{ display: inline-flex; align-content: center;align-items: center; justify-content: center; margin: 0 10px; cursor: pointer; text-align: center; width: 42px; height: 42px;box-sizing: border-box; border-radius: 100%; border: 2px solid #666; transition: all .35s;}
#main .history .container>.layout .show .innerSwiper>.swiper .control>.next{ left: 100px;}
#main .history .container>.layout .show .innerSwiper>.swiper .control>.prev>i, #main .history .container>.layout .show .innerSwiper>.swiper .control>.next>i{font-size: 2.4rem;}
#main .history .container>.layout .show .innerSwiper>.swiper .control>.prev:hover, #main .history .container>.layout .show .innerSwiper>.swiper .control>.next:hover{background: #12479b; border-color: #12479b; color: #fff;}


#main .partner{ position: relative;z-index: 100; margin: 0 auto; padding: 100px 0; background: url("../img/main_partner_bg.jpg") no-repeat; background-position: center bottom; background-size: cover;}
#main .partner .container{margin: 0 auto; }
#main .partner .container>.swiper{margin: 0 auto; padding: 80px 28px;}
#main .partner .container>.swiper .swiper-slide{box-sizing: border-box; height: calc((100% - 30px) / 2) !important;display: flex; justify-content: center; align-items: center;padding: 30px 50px; border: 1px solid #ddd; border-radius: 3px; transition: all .35s;}
#main .partner .container>.swiper .swiper-slide>img{ width: 70%;height: auto;}
#main .partner .container>.swiper .swiper-slide:hover{ background: rgba(255,255,255,.3); border-color: transparent; box-shadow: 0 10px 30px rgba(40, 105, 183, .24);}


#main .strength{ position: sticky; margin: 0 auto; height: 100vh;}
#main .strength .shows{ position: relative; width: 100%;height: 100%;}
#main .strength .shows>.swiper{ width: 100%; height: 100%; box-sizing: border-box;}
#main .strength .shows>.swiper .swiper-slide{position: relative; background-size: cover;opacity: 0!important;}
#main .strength .shows>.swiper .swiper-slide:after{position: absolute;z-index: 1; left: 0;top: 0; width: 100%;height: 60%; background: linear-gradient(to bottom, rgba(142,180,242,.6), transparent); content: ''}
#main .strength .shows>.swiper .swiper-slide .layout{ position: absolute; z-index: 12; display: flex;align-items: center; align-content: center; justify-content: space-between; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); padding: 0 100px;}
#main .strength .shows>.swiper .swiper-slide .layout>.theme{width: 30%; display: inline-block; flex: 1; text-align: left; transform: scale(1.2) translateY(-12px);transition: all 0.3s 0.1s ease-in-out;}
#main .strength .shows>.swiper .swiper-slide .layout>.theme>.ico>img{width: 100px; height: auto;}
#main .strength .shows>.swiper .swiper-slide .layout>.theme>.tit{font-size: 3rem;font-weight: bold; color: #fff; padding-top: 30px;}
#main .strength .shows>.swiper .swiper-slide .layout>.theme>.more{ padding-top: 30px;}
#main .strength .shows>.swiper .swiper-slide .layout>.theme>.more>a{display: inline-flex; align-content: center; color: #fff; background: #12479b; border-radius: 30px; padding: 0 20px; height: 40px; align-items: center; transition: all .35s;}
#main .strength .shows>.swiper .swiper-slide .layout>.theme>.more>a span{display: inline-block; font-size: 1.3rem;}
#main .strength .shows>.swiper .swiper-slide .layout>.theme>.more>a i{display: inline-block; font-size: 1.8rem; margin-left: 10px;}
#main .strength .shows>.swiper .swiper-slide .layout>.theme>.more>a:hover{background: #e50012;}
#main .strength .shows>.swiper .swiper-slide .layout>.intro{ display: inline-block; width: 65%;text-align: left; transform: scale(1.2) translateY(-20px);transition: all 0.5s 0.1s ease-in-out;}
#main .strength .shows>.swiper .swiper-slide .layout>.intro>.text{font-size: 2.2rem; line-height: 3.6rem; color: #fff; }
#main .strength .shows>.swiper .swiper-slide .layout>.intro>.rows{display: inline-block; float: left; width: 33.33%; margin-bottom: 50px;}
#main .strength .shows>.swiper .swiper-slide .layout>.intro>.rows>h3{font-size: 5.2rem; font-weight: bold; color: #fff;}
#main .strength .shows>.swiper .swiper-slide .layout>.intro>.rows>h3>span{display: inline-block;  vertical-align: middle; font-size:2.8rem;}
#main .strength .shows>.swiper .swiper-slide .layout>.intro>.small>h3{font-size: 4rem;}
#main .strength .shows>.swiper .swiper-slide .layout>.intro>.rows>p{display: block; width: 70%; height: 50px; font-size: 1.5rem ; color: rgba(255,255,255,.7);}
#main .strength .shows>.swiper .swiper-slide .layout>.intro.item4>.rows{ width: 50%;}
#main .strength .shows>.swiper .swiper-slide .layout>.intro.item4>.rows>h3{font-size: 2.6rem;}
#main .strength .shows>.swiper .swiper-slide-active{opacity: 1!important;}
#main .strength .shows>.swiper .swiper-slide-active .layout>.intro{transform: scale(1) translateY(20px);}
#main .strength .shows>.swiper .swiper-slide-active .layout>.theme{transform: scale(1);}
#main .strength .navs{position: absolute;z-index: 12; left: 0; top: 15%; width: 100%; border-top: 1px solid rgba(255,255,255,.2); }
#main .strength .navs>.swiper{ width: 86%; padding: 0 28px;overflow: visible;}
#main .strength .navs>.swiper .swiper-slide{ text-align: center; }
#main .strength .navs>.swiper .swiper-slide>a{ position: relative; display: block; font-size: 2rem; font-weight: bold; text-align: center; padding: 20px 0; color: #fff; transition: all .35s;}
#main .strength .navs>.swiper .swiper-slide>a:after{position: absolute;z-index: 12; left: 50%;top: -1px; transform: translateX(-50%); width: 1px; height: 1px; opacity: 0; background: rgba(18,71,155,1); content: '';transition: all .35s;}
#main .strength .navs>.swiper .swiper-slide>a:before{position: absolute;z-index: 20; left: 50%; top: -8px; transform: translateX(-50%); width: 14px;height: 14px; background: #12479b; border-radius: 100%; opacity: 0; content: ''; transition: all .35s; }
#main .strength .navs>.swiper .swiper-slide-thumb-active>a{color: rgba(18,71,155,1); font-size: 2rem;}
#main .strength .navs>.swiper .swiper-slide-thumb-active>a:after{ width: 100%;opacity: 1;}
#main .strength .navs>.swiper .swiper-slide-thumb-active>a:before{opacity: 1;}





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



    #banner .info>h3{ font-size: 4rem;}
    #banner .info>h4{ width: 70%; font-size: 2.4rem;}
    #banner .info>a{margin-top: 80px;padding: 8px 20px;font-size: 1.2rem;}
    #banner .info>a>i{font-size: 1.6rem;}



    #main .title { font-size: 3.8rem; }



    #main .about .container>.statistics>.rows>.num {font-size: 7rem; }
    #main .about .container>.statistics>.rows>.tit { font-size: 2rem;}



    #main .products .container>.swiper .swiper-slide>a .tit {font-size: 1.8rem; }

    #main .history .container>.layout .show .innerSwiper>.swiper .swiper-slide>.slide .intro>p{font-size: 1.5rem;}

    #main .strength .shows>.swiper .swiper-slide .layout { padding: 0 80px; }
    #main .strength .shows>.swiper .swiper-slide .layout>.theme>.tit { font-size:2.8rem;}

    #main .strength .shows>.swiper .swiper-slide .layout>.intro>.text{font-size: 1.8rem; line-height: 3rem;}
    #main .strength .shows>.swiper .swiper-slide .layout>.intro>.rows>h3{font-size: 4.6rem;}
    #main .strength .shows>.swiper .swiper-slide .layout>.intro>.small>h3{font-size: 3.2rem;}
    #main .strength .shows>.swiper .swiper-slide .layout>.intro>.rows>p{ font-size: 1.6rem; }

    #main .strength .shows>.swiper .swiper-slide .layout>.intro.item4>.rows>h3 { font-size: 2.4rem;}


    #main .news .container>.swiper .swiper-slide>a>.box>.title { height: 100px; font-size: 2rem;}

}

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

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

    #main .about .container>.statistics>.rows>.tit {  font-size: 1.8rem; }

    #main .products .container>.swiper .swiper-slide>a .tit {font-size: 1.7rem; }

    #main .history .container>.layout .show .innerSwiper>.swiper .swiper-slide>.slide .years {font-size: 3.6rem;}
    #main .history .container>.layout .show .innerSwiper>.swiper .swiper-slide>.slide .intro>p{font-size: 1.4rem;}


    #main .strength .navs>.swiper .swiper-slide>a { font-size: 1.8rem; }
    #main .strength .shows>.swiper .swiper-slide .layout>.intro>.text{font-size: 1.7rem; line-height: 2.8rem;}
    #main .strength .shows>.swiper .swiper-slide .layout>.intro>.rows>h3{font-size: 4.2rem;}
    #main .strength .shows>.swiper .swiper-slide .layout>.intro>.small>h3{font-size: 3rem;}
    #main .strength .shows>.swiper .swiper-slide .layout>.intro>.rows>p{ font-size: 1.5rem;}

    #main .strength .shows>.swiper .swiper-slide .layout>.intro.item4>.rows>h3 { font-size: 2.2rem;}



}


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



    #main .history .container>.layout .nav>.navSwiper .swiper-slide-thumb-active>a>h3{ font-size: 2rem;}
    #main .history .container>.layout .nav>.navSwiper .swiper-slide-thumb-active>a>span{ font-size: 1.6rem;}
    #main .history .container>.layout .show .innerSwiper>.swiper .swiper-slide>.slide .years {font-size: 3rem;}
    #main .history .container>.layout .show .innerSwiper>.swiper .swiper-slide>.slide .intro>p{font-size: 1.3rem;}


    #main .strength .navs>.swiper .swiper-slide>a {font-size: 1.6rem;}
    #main .strength .shows>.swiper .swiper-slide .layout>.theme>.tit { font-size: 2.4rem; }
    #main .strength .shows>.swiper .swiper-slide .layout>.intro>.text{font-size: 1.6rem; line-height: 2.4rem;}
    #main .strength .shows>.swiper .swiper-slide .layout>.intro>.rows>h3{font-size: 4rem;}
    #main .strength .shows>.swiper .swiper-slide .layout>.intro>.rows>h3>span{ font-size:2rem;}
    #main .strength .shows>.swiper .swiper-slide .layout>.intro>.small>h3{font-size: 2.6rem;}
    #main .strength .shows>.swiper .swiper-slide .layout>.intro>.rows>p{ font-size: 1.4rem; }
    #main .strength .shows>.swiper .swiper-slide .layout>.intro.item4>.rows>h3 { font-size: 2rem;}

    #main .news .container>.swiper .swiper-slide>a>.box>.title { font-size: 1.8rem;}

}


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

    #banner .swiper-slide .info>h3 { font-size: 3.6rem;}
    #banner .swiper-slide .info>h4 { font-size: 2rem; width: 70%;}
    #banner .swiper-slide .info>a { margin-top: 60px; padding: 5px 15px; font-size: 1.2rem;}
    #banner .swiper-slide .info>a>i { font-size: 1.6rem; }
    #banner .control .prev, #banner .control .next {width: 50px; height: 50px; line-height: 50px;}


    #main .about .container>.statistics>.rows {margin-right: 12%;}
    #main .about .container>.statistics>.rows>.num { font-size: 6rem;}
    #main .about .container>.statistics>.rows>.num>span.plus:after{right: -40px;font-size: 5rem;}
    #main .about .container>.statistics>.rows>.num>span.unit:after{right: -35px; font-size: 4rem;}
    #main .about .container>.statistics>.rows>.tit {font-size: 1.6rem;}


    #main .strength .shows>.swiper .swiper-slide .layout>.intro.item4>.rows>h3 { font-size: 1.8rem;}


}


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

    #banner{ height: 70%;}
    #banner .control .prev, #banner .control .next {width: 40px; height: 40px; line-height: 40px;}


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

    #main .about .container>.statistics>.rows>.num { font-size: 5rem;}
    #main .about .container>.statistics>.rows>.num>span.plus:after{right: -30px;font-size: 5rem;}
    #main .about .container>.statistics>.rows>.num>span.unit:after{right: -25px; font-size: 3.6rem;}
    #main .about .container>.statistics>.rows>.tit {font-size: 1.4rem;}

    #main .history .container>.layout .show .innerSwiper>.swiper .swiper-slide>.slide { padding: 30px 0 30px 30px;}
    #main .history .container>.layout .show .innerSwiper>.swiper .swiper-slide>.slide .years { font-size: 2.6rem;}



    #main .strength { height: 76vh;}

    #main .strength .shows>.swiper .swiper-slide .layout>.intro>.text{font-size: 1.4rem; line-height: 2rem;}
    #main .strength .shows>.swiper .swiper-slide .layout>.intro>.rows>h3{font-size: 3rem;}
    #main .strength .shows>.swiper .swiper-slide .layout>.intro>.rows>h3>span{ font-size:1.8rem;}
    #main .strength .shows>.swiper .swiper-slide .layout>.intro>.small>h3{font-size: 2.2rem;}
    #main .strength .shows>.swiper .swiper-slide .layout>.intro>.rows>p{ font-size: 1.3rem; }

    #main .strength .shows>.swiper .swiper-slide .layout>.theme>.ico>img { width: 80px;}
    #main .strength .shows>.swiper .swiper-slide .layout>.theme>.tit { font-size: 2.2rem;}

    #main .news .container>.swiper .swiper-slide>a>.box>.title {font-size: 1.6rem;}
    #main .news .container>.control .prev, #main .news .container>.control .next {width: 40px; height: 40px;line-height: 40px;}


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


    #main .about .container>.statistics>.rows>.tit{ height: 30px;}

    #main .history .container>.layout .nav{ width: 100%; float: none; }
    #main .history .container>.layout .nav>.navSwiper{ height: auto; padding-bottom: 20px; }
    #main .history .container>.layout .nav>.navSwiper .swiper-slide-thumb-active>a:after{display: none;}
    #main .history .container>.layout .nav>.navSwiper .swiper-slide-thumb-active>a>h3 { font-size: 1.8rem;}
    #main .history .container>.layout .nav>.navSwiper .swiper-slide>a>span {font-size: 1.4rem;}
    #main .history .container>.layout .nav>.navSwiper .swiper-pagination{ display: block;}
    #main .history .container>.layout .nav>.navSwiper .swiper-pagination .swiper-horizontal > .swiper-pagination-progressbar, #main .history .container>.layout .nav>.navSwiper .swiper-pagination-progressbar.swiper-pagination-horizontal, .swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, #main .history .container>.layout .nav>.navSwiper .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite {height: 2px!important;}
    #main .history .container>.layout .nav>.navSwiper .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{ background: #12479b!important;}

    #main .history .container>.layout .show{ display: block; width: 100%; height: auto; float:none; padding: 0; }
    #main .history .container>.layout .show .innerSwiper>.swiper .swiper-slide{display: block;}
    #main .history .container>.layout .show .innerSwiper>.swiper .swiper-slide>.slide{ width: 100%; float: none; padding:20px 0 0 0; border-left: 0; border-bottom: 1px solid rgba(0,0,0,.1);}
    #main .history .container>.layout .show .innerSwiper>.swiper .swiper-slide>.slide:nth-child(3), #main .history .container>.layout .show .innerSwiper>.swiper .swiper-slide>.slide:nth-child(4){border-bottom: 1px solid rgba(0,0,0,.1);}
    #main .history .container>.layout .show .innerSwiper>.swiper .swiper-slide>.slide:last-child{border-bottom: 0;}
    #main .history .container>.layout .show .innerSwiper>.swiper .swiper-slide>.slide.active{ width: 100%; padding: 20px 0 0 0;}
    #main .history .container>.layout .show .innerSwiper>.swiper .swiper-slide>.slide .years{color: #333;}
    #main .history .container>.layout .show .innerSwiper>.swiper .swiper-slide>.slide.active .years{color: #333;}
    #main .history .container>.layout .show .innerSwiper>.swiper .swiper-slide>.slide .intro{opacity: 1; transform: translateY(0); padding: 15px 0;}
    #main .history .container>.layout .show .innerSwiper>.swiper .swiper-slide>.slide .intro>p {font-size: 1.2rem;}

    #main .history .container>.layout .show .innerSwiper>.swiper .control{ position: relative;margin: 0 auto; left: 0; align-items: center; align-content: center; justify-content: center; width: 100%; }
    #main .history .container>.layout .show .innerSwiper>.swiper .control>.prev, #main .history .container>.layout .show .innerSwiper>.swiper .control>.next{ width: 36px; height: 36px;}
    #main .history .container>.layout .show .innerSwiper>.swiper .control>.prev i, #main .history .container>.layout .show .innerSwiper>.swiper .control>.next i{font-size: 2rem;}
}

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

    #banner .swiper-slide{background: #000; background-image: none!important; text-align: center;}
    #banner .swiper-slide .mob{display: inline-block; width: 100%;height: auto; object-fit: cover;}
    #banner .swiper-slide .video_mask:after{display: inline-block;}
    #banner .swiper-slide .video_mask:before{display: inline-block;}
    #banner .swiper-slide .info{display: none;}
    #banner .swiper-slide .info>h3 { font-size: 3rem;}
    #banner .swiper-slide .info>h4 { font-size: 1.8rem;}
    #banner .control{display: none;}



    #main .about .container>.statistics>.rows>.num { font-size: 4.2rem; }

    #main .products .container>.swiper .swiper-slide>a .tit { font-size: 1.6rem;}
    #main .products .container>.swiper .swiper-slide>a .more{ width: 60px; height: 60px; }
    #main .products .container>.swiper .swiper-slide>a .more .radian { width: 100px; }
    #main .products .container>.swiper .swiper-slide>a .more .ico{width: 32px;height: 32px; line-height: 32px;}
    #main .products .container>.swiper .swiper-slide>a .more .ico>i{font-size: 1.6rem;}


    #main .news .container>.swiper .swiper-slide>a>.img>.more{width: 60px; height: 60px; }
    #main .news .container>.swiper .swiper-slide>a>.img>.more .radian {width: 100px;}
    #main .news .container>.swiper .swiper-slide>a>.img>.more .ico{width: 32px;height: 32px; line-height: 32px; }
    #main .news .container>.swiper .swiper-slide>a>.img>.more .ico>i{font-size: 1.6rem;}


    #main .strength .shows>.swiper .swiper-slide .layout { padding: 0 50px;}
    #main .strength .shows>.swiper .swiper-slide .layout>.theme { width: 30%;}
    #main .strength .shows>.swiper .swiper-slide .layout>.theme>.ico>img {  width: 70px;}
    #main .strength .shows>.swiper .swiper-slide .layout>.theme>.tit { padding-top: 15px;  font-size: 1.6rem; }
    #main .strength .shows>.swiper .swiper-slide .layout>.intro { padding: 0; }

    #main .strength .shows>.swiper .swiper-slide .layout>.intro>.text{font-size: 1.2rem; line-height: 2rem;}
    #main .strength .shows>.swiper .swiper-slide .layout>.intro>.rows{margin-bottom: 20px;}
    #main .strength .shows>.swiper .swiper-slide .layout>.intro>.rows>h3{font-size: 2.8rem;}
    #main .strength .shows>.swiper .swiper-slide .layout>.intro>.rows>h3>span{ font-size:1.6rem;}
    #main .strength .shows>.swiper .swiper-slide .layout>.intro>.small>h3{font-size: 2rem;}
    #main .strength .shows>.swiper .swiper-slide .layout>.intro>.rows>p{ font-size: 1.2rem;  width: 80%;}

}

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


    #main .title {  font-size: 2.4rem;}
    #main .about .container>.statistics>.rows>.num>span.plus:after{right: -26px;font-size: 4rem;}
    #main .about .container>.statistics>.rows>.num>span.unit:after{right: -22px; font-size: 3rem;}
    #main .about .container>.statistics>.rows>.tit {font-size: 1.3rem;}

    #main .about .container>.more>a span { font-size: 1.4rem; }
    #main .about .container>.more>a i { font-size: 1.6rem; width: 30px; height: 30px;line-height: 30px; }

    #main .history .container>.layout .nav>.navSwiper .swiper-slide>a>span {font-size: 1.3rem;}


}






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


    #banner .swiper-slide .info>h3 { font-size: 2.4rem;}
    #banner .swiper-slide .info>h4 { font-size: 1.6rem;}
    #banner .control { right: 50px; bottom: 50px;}



    #main .title { font-size: 2.4rem;}

    #main .products { padding: 80px 0 20px 0;}
    #main .products .container>.swiper .swiper-slide>a .tit {font-size: 1.4rem;}



    #main .about { margin: 0 auto;padding: 80px 0;}
	#main .about .container>.statistics {width: 90%;}
    #main .about .container>.statistics>.rows{ width: 50%; margin-bottom: 20px; margin-right: 0; }




    #main .strength .navs>.swiper .swiper-slide>a { font-size: 1.4rem; padding: 10px 20px;}
    #main .strength .shows>.swiper .swiper-slide .layout { padding: 0 30px; }

    #main .news .container>.swiper .swiper-slide>a>.box>.time {font-size: 1.4rem;}
    #main .news .container>.swiper .swiper-slide>a>.box>.title { height: 80px;}

    #main .history {padding: 50px 0; }
    #main .history .container { padding: 20px 28px;}



}

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

    #banner .swiper-slide .info>h4 { font-size: 1.4rem; width: 100%;}
    #banner .control { right: 30px; bottom: 30px;}
    #banner .control .nums {min-width: 32px; height: 32px; line-height: 32px; padding: 0 10px; font-size: 1.4rem; }
    #banner .control .prev, #banner .control .next {width: 32px; height: 32px; line-height: 32px; margin: 0 3px;}
    #banner .control .prev i, #banner .control .next i { font-size: 1.8rem;}


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




    #main .about { padding: 50px 0; }
    #main .about .title {padding: 30px 20px 30px 0; }
    #main .about .container>.statistics {  width: 100%; }
    #main .about .container>.statistics>.rows>.num { font-size: 4rem;}
    #main .about .container>.statistics>.rows>.num>span.plus:after{right: -20px;font-size: 3rem;}
    #main .about .container>.statistics>.rows>.num>span.unit:after{right: -18px; font-size: 2.4rem;}
    #main .about .container>.statistics>.rows>.tit { font-size: 1.2rem; width: 80%;}
    #main .about .container>.more {padding-top: 80px;}
    #main .about .container>.more>a span {font-size: 1.2rem; }
    #main .about .container>.more>a i {font-size: 1.4rem;width: 26px; height: 26px;line-height: 26px;}


    #main .history .container>.layout .nav>.navSwiper .swiper-slide>a>h3 { font-size: 1.4rem;}
    #main .history .container>.layout .nav>.navSwiper .swiper-slide>a>span { font-size: 1.2rem;}


    #main .strength {  height: 60vh;}
    #main .strength .navs { top: 10%;}
    #main .strength .navs>.swiper .swiper-slide>a:before { top: -5px; width: 10px; height: 10px;}

    #main .strength .shows>.swiper .swiper-slide .layout{ display: block; transform: translateX(-50%) translateY(-30%); padding: 0 30px 0 50px; }
    #main .strength .shows>.swiper .swiper-slide .layout>.theme { width: 100%; float: none; display: flex; align-items: center;align-content: center;}
    #main .strength .shows>.swiper .swiper-slide .layout>.theme>.ico{display: inline-block;}
    #main .strength .shows>.swiper .swiper-slide .layout>.theme>.ico>img { width: 60px;}
    #main .strength .shows>.swiper .swiper-slide .layout>.theme>.tit{display: inline-block; flex: auto; margin-left: 20px;  padding-top: 0;}

    #main .strength .shows>.swiper .swiper-slide .layout>.theme>.more { padding-top: 0;}
    #main .strength .shows>.swiper .swiper-slide .layout>.theme>.more>a{ height: 30px; padding: 0 10px;}
    #main .strength .shows>.swiper .swiper-slide .layout>.theme>.more>a span {display: none; font-size: 1.2rem; }
    #main .strength .shows>.swiper .swiper-slide .layout>.theme>.more>a i {  font-size: 1.5rem;  margin-left: 0;}
    #main .strength .shows>.swiper .swiper-slide .layout>.intro {padding:0;width: 100%; float: none; }
    #main .strength .shows>.swiper .swiper-slide .layout>.intro>.rows{margin-bottom: 10px; width: 48%;}
    #main .strength .shows>.swiper .swiper-slide .layout>.intro>.rows:nth-child(even){float: right;}
    #main .strength .shows>.swiper .swiper-slide .layout>.intro>.rows>h3{font-size: 2rem;}
    #main .strength .shows>.swiper .swiper-slide .layout>.intro>.rows>h3>span{ font-size:1.2rem;}
    #main .strength .shows>.swiper .swiper-slide .layout>.intro>.small>h3{font-size: 1.6rem;}
    #main .strength .shows>.swiper .swiper-slide .layout>.intro>.rows>p{ width: 100%; height: 30px; font-size: 1rem;}

    #main .strength .shows>.swiper .swiper-slide .layout>.intro.item4>.rows{ width: 100%; float: none;}
    #main .strength .shows>.swiper .swiper-slide .layout>.intro.item4>.rows>h3 { font-size: 1.4rem;}

    #main .news {  padding: 50px 0 100px 0; }
    #main .news .container>.swiper { padding: 50px 28px;}


}