.maincolor{color:#888;/*文字*/color:#494949;/*重文字*/color:#333/*特重文字*/color：#013b96/*主色调*/ color：#DDD;/*边框*/color:#F4F4F4;/*背景*/}

html,body{height: 100%; overflow: hidden;}
.content {padding-top:0 !important; width: 80%; margin: 0 0 0 auto;}
.page-swiper{height: 100vh;}
.page-swiper,.page-swiper > .swiper-wrapper{width: 100%; }
.page-swiper > .swiper-wrapper > .swiper-slide{width: 100%; float: none; }
.indexpage_con ,.kv_con{height: 100vh; width: 100%; position: relative; overflow: hidden; display: block;}

.pagination {position: fixed; right: 1em; top:50%; transform: translate(0 , -50%); z-index: 10;}
.pagination .swiper-pagination-switch{ width: 1em; height: 1em; display: block; cursor: pointer;position: relative; margin: .25em 0;}
.pagination .swiper-pagination-switch:after{ content: ''; width: 1em; height: 1em; border-radius: 50%; transform: scale(.5); display: block; background: #FFF;border:1px solid #969696; }
.pagination .swiper-active-switch:after{transform: scale(.5);border:1px solid #FFF;}
.pagination .swiper-active-switch:before{content: ''; width: 1em; height: 1em; border-radius: 50%; border:1px solid #FFF; position: absolute; left: 0; top:0;}

.quickmenu{z-index: 15;top:auto; bottom:1em; transform: translateY(0);}
@media screen and (min-width: 1480px){
    .quickmenu{right:-4em; /*display: none;*/} 
    .quickmenu:after{content:"";position: absolute; left: 0; top:0; right: -1em; bottom:0; z-index: 10; transition:z-index .25s linear;}
    .quickmenu:before{ position: absolute; content: "《"; opacity: .6; width: 2em; background:#013b96; color: #FFF; left: -2em; top:50% ; margin-top: -1em; line-height: 4em; z-index: 10; box-shadow: -.125em 0 .25em rgba(0,0,0,.3); text-indent: .25em; border-radius: .5em 0 0 .5em;transition:opacity .5s linear;}
    .quickmenu:hover,.quickmenu.show/*,.quickmenu.showing*/{ display: block;right: 1em;}
    .quickmenu:hover:after,.quickmenu.show:after/*,.quickmenu.showing:after*/{z-index:1;}
    .quickmenu:hover:before,.quickmenu.show:before/*,.quickmenu.showing:before*/{ opacity: 0;}
}


@media screen and (min-width: 768px){
    .header{width: 20%;height:100%;min-width: 0;}
    .header .logo{width: 90%; height:5em; top:5%; left:5%;}
    .header .logo img{left: 50%;transform: translate(-50%,-50%);}
    .header .menu h2{display: none !important;}
    .header .menu{ position: absolute; width: 100%; left: 0; top: 52.5%; margin-top: 2.5em; transform:  translateY(-50%); padding: 0 0 8em;}
    .header .sitesearch,.header .language + .sitesearch{right: 50%;top:auto; bottom:4.5em;margin:0;width:66.66%;min-width:130px; transform: translate(50%,0);background: #FFF;border:1px solid #DDD;visibility:visible; opacity: 1;}
    .header .sitesearch:hover,.header .sitesearch.open{width: 66.66%;}
    .header .sitesearch input{ width:calc(100% - 32px); padding: 0 0 0 4px;opacity: 1;}
    .header .sitesearch:hover input,.header .sitesearch.open input{opacity: 1;}
    .header .sitesearch button{background: url(../images/search_b.png); background-size: 100%; }

    .header .menu_content{position: relative;right:0px;margin:0;top:0; width: 100%; padding: 0 ; border: none; overflow: hidden;transition:none; }
    .header .menu_content > li{display:block;margin-right:0;}
    .header .menu_content h3{line-height:250%; font-weight:lighter;position: relative; text-align: center;}
    .header .menu_content > li h3{font-size: .875em;}
    
    .header .menu_content h3 a{border: none; line-height: 250%;}
    .header .menu_content h3 a:hover{color:#013b96;}
    .header .menu_content > li.current h3 a:after,.header .menu_content > li.current h3 a:before{display: none;}
    .header .menu_content > li.current h3:after{ content: ""; background: #013b96; right: 0; top:50%; margin-top: -1px; height: 2px; position: absolute; left: 50%; margin-left: 5em;}
    .header .menu_content > li.current h3 a{color:#013b96; font-weight: bold; border: none;}
    .header .menu_content ul{display: none;}
    .header .language{display: none;}
    .header .indexlanguage {position: absolute;right: 50%; bottom:0;margin:0;width:66.66%;min-width:130px; transform: translate(50%,0); display: block;}
    .header .indexlanguage a{display: block; line-height: 225%; text-align: center; background: #013b96; color: #FFF;}
    .header .indexlanguage a:hover{ background: #494949;}

    .header .servicecall {position: absolute;right: 0; bottom:9em;margin:0;width:100%;display: block; text-align: center; }
    .header .servicecall span{display: block; color: #969696; font-size: .75em;line-height: 150%;}
    .header .servicecall a{display: inline-block; line-height: 150%;color: #013b96; font-weight: bold;font-size: .875em;}
    .header .servicecall a:hover{ color: #161616;}
}
@media screen and (min-width: 1024px){
     .header .servicecall a{font-size: 1em; padding-left: 1.5em; background: url(../images/tel_icon.png) no-repeat left center/1em; }
     .header .menu_content > li h3{font-size: 1em;}
}

@media screen and (max-width: 767px){
    .page-swiper{height: calc(100vh - 64px);}
    .content {padding-top:4em !important; width: 100%; }
    .indexpage_con ,.kv_con{height: calc(100vh - 4em);}
    .pagination{right: 0.5em;}
}

.kvswiper .swiper-slide{width: 100%;}
.kvswiper .kv_con .bg_container{position: absolute; left: 0; right: 0; top:0; bottom:0;}
.kvswiper .kv_con h3{position: absolute; color: #FFF; left: 1em; bottom: 1.5em; margin-bottom: 5%;}
.kvswiper .kv_con .slogan{position: absolute; max-width: 50%; left: 50%; top:50%; transform: translate(-50%,-50%);}
.kvswiper .kv_con .slogan img{width: 100%;}
.kvswiper .kv_con .slogan.tl{ top:0; left: 0; transform: translate(0,0);}
.kvswiper .kv_con .slogan.tc{ top:0;  transform: translate(-50%,0);}
.kvswiper .kv_con .slogan.tr{ top:0; left:auto; right: 0; transform: translate(0,0);}
.kvswiper .kv_con .slogan.ml{ left: 0; transform: translate(0,-50%);}
.kvswiper .kv_con .slogan.mr{ left:auto; right: 0; transform: translate(0,-50%);}
.kvswiper .kv_con .slogan.bl{ top:auto; bottom:0; left: 0; transform: translate(0,0);}
.kvswiper .kv_con .slogan.bc{ top:auto; bottom:0; transform: translate(-50%,0);}
.kvswiper .kv_con .slogan.br{ top:auto; bottom:0; left:auto; right: 0; transform: translate(0,0);}
.kvswiper .kv_con .wap{display: none;}

.kvswiper .swiper-button-next,.kvswiper .swiper-button-prev{position: absolute;width: 1.5em;height: 1.5em;z-index: 10;cursor: pointer;display: block;text-align: center;color: #FFF; outline: none;  font-size: 1.5em;border: 1px  solid #FFF ; border-radius: 50%;}
.kvswiper .swiper-button-prev{left: 35%; bottom:0; margin-left: -1.75em;margin-bottom: 2.5%;}
.kvswiper .swiper-button-next{left: 35%; bottom:0; margin-bottom: 2.5%;}
.kvswiper .swiper-button-prev:before,.kvswiper .swiper-button-next:before{display: inline-block; line-height: 1.5em; width: 1.5em;vertical-align: top; font-family: simSun; position: relative; top:-1px; left: -1px;}
.kvswiper .swiper-button-prev:before{content: "<";}
.kvswiper .swiper-button-next:before{content: ">";}
.kvswiper .swiper-button-next:after,.kvswiper .swiper-button-prev:after{content: ""; position: absolute; width: 66vw; top:50%; margin-top: -1px; height: 2px; background: #FFF; }
.kvswiper .swiper-button-next:after{left: 100%; }
.kvswiper .swiper-button-prev:after{right:100%;}
@media screen and (max-width: 767px){
    .kvswiper .kv_con .pc{display: none;}
    .kvswiper .kv_con .wap{display:block;}
    .kvswiper .kv_con .slogan{max-width: 66%;}
    .kvswiper .kv_con .slogan.wcc{left: 50%; top:50%; transform: translate(-50%,-50%); right: auto; bottom: auto;}
    .kvswiper .kv_con .slogan.wtl{ top:0; left: 0; transform: translate(0,0);right: auto; bottom: auto; }
    .kvswiper .kv_con .slogan.wtc{ top:0;  transform: translate(-50%,0);right: auto; bottom: auto; left: 50%; }
    .kvswiper .kv_con .slogan.wtr{ top:0; left:auto; right: 0; transform: translate(0,0);bottom: auto;}
    .kvswiper .kv_con .slogan.wml{ left: 0; transform: translate(0,-50%); top:50%; right: auto; bottom:auto;}
    .kvswiper .kv_con .slogan.wmr{ left:auto; right: 0; transform: translate(0,-50%);top:50%; bottom:auto;}
    .kvswiper .kv_con .slogan.wbl{ top:auto; bottom:0; left: 0; transform: translate(0,0);right: auto;}
    .kvswiper .kv_con .slogan.wbc{ top:auto; bottom:0; transform: translate(-50%,0);left: 50%;right: auto;}
    .kvswiper .kv_con .slogan.wbr{ top:auto; bottom:0; left:auto; right: 0; transform: translate(0,0);}
}

.indexabout .about_content{position: absolute; left: 50%; top:50%; width: 80%; max-width: 1096px; transform: translate(-50%,-50%); text-align: center;}
.indexabout .about_content h2{text-align: center; color: #013b96; font-size: 2em; line-height: 200%; margin-bottom: 1em;}
.indexabout .videocon{position: relative; width:100%;}
.indexabout .videocon:before{content: ''; position: absolute;; left: 1em; top:-1em; right: -1em; bottom:1em; border:1px solid #013b96;}
.indexabout .videocon .con{position: relative; min-height: 100px;}
.indexabout .bg_container{position: absolute;left: 0;top:0; right: 0; bottom: 0; z-index: 2;}
.indexabout .video_content{position: relative; width: 100%;  background: #000; z-index: 1; line-height: 1;}
.indexabout .video_content video{width: 100%; position: relative; }
.indexabout .bg_container:after{content:''; position: absolute; left: 50%; top:50%; margin: -4% 0 0 -4%; width: 8%; height: 0; padding: 0 0 8%; background: url(../images/icon_con.png) no-repeat center center; background-size: 100%;}
.indexabout .txt_container{width: 100%; padding: 1em 1.5em;  color: #FFF; position: absolute; left: 0;bottom: 0; text-align: justify;  z-index: 2;}
.indexabout .txt_container:before{content: ""; position: absolute; left: 0; top:0; right: 0; bottom: 0; background: #013b96; opacity: .4;}
.indexabout .txt_container h3{font-size: 1.125em; line-height: 200%;position: relative;}
.indexabout .txt_container p{ font-size: .875em; line-height: 150%;position: relative;}
@media screen and (max-width: 767px){
    .indexabout .about_content h2{font-size: 1.25em; margin: .8em;}
    .indexabout .txt_container{position: relative;}
    .indexabout .txt_container:before{opacity: 1;}
}


.technology > .bg_container{position: absolute; left: 0; right: 0; top:0; bottom:0;}
.technology .technology_content{position: absolute; left: 50%; top:50%; width: 84%;  transform: translate(-50%,-50%); text-align: center;}
.technology .txt_con{position: relative; padding-bottom: 1em; margin-bottom: 1em; display: inline-block;}
.technology .txt_con h2{ font-size: 2em; line-height: 150%; color: #013b96; margin-bottom: .5em; text-align: center;}
.technology .txt_con p{ font-size: 1em; line-height: 150%; padding-bottom: .25em; padding-left: 1em; text-indent: 1em; color: #666; text-align: justify;}
/* .technology .txt_con:before{content:""; position: absolute; left: 0; bottom:0; width: 1.75em; height: 2px; background: #013b96;}
.technology .txt_con:after{content:""; position: absolute; left: 2em; bottom:0; width: 1.75em; height: 2px; background: #FFF;} */
.technology .txt_con .scroll_container{ overflow: hidden; position: relative; max-height:5.25em ;}
.technology .txt_con .scroll_content{display: none;}
.technology .txt_con .scroll_container.scroll .scroll_content{display: block;}
.technology .txt_con .scroll_container .scroll_content:first-child{display: block;}
.technologyswiper {position: relative; text-align: left;}
.technologyswiper .swiper-container{margin: 0 -4px; max-width: 1104px; margin: 0 auto;}
.technologyswiper .con{ display: block; margin: 0 4px; position: relative;  max-width: 360px;}
.technologyswiper .con .img_container{ border:1px solid #DDD; position: relative; overflow: hidden;}
.technologyswiper .con .bg_container{width: 100%;  transition: transform .5s linear; position: relative;height: 0;padding: 0 0 130%;overflow: hidden;}
.technologyswiper .con:hover .bg_container{transform: scale(1.05);}
.technologyswiper .con .txt_container{position: absolute; left: 0; bottom:0; height: 0; width: 100%; padding: 2em 5%; color: #FFF; transition: padding .5s ease-out; overflow: hidden; text-align: center;}
.technologyswiper .con:hover .txt_container{padding: 65% 5%;}
.technologyswiper .con .txt_container:before{position: absolute; left: 0; top:0; right: 0; bottom:0; background: #013b96; opacity: .75; content: ''; }
.technologyswiper .con .txt_container .txtcon{position: relative; transform: translateY(-50%);}
.technologyswiper .con .txt_container .txtcon h3{font-size: .875em; line-height: 150%;position: relative;}
.technologyswiper .con .txt_container .txtcon p{ height: 1.5em; overflow: hidden; font-size: .75em; opacity: .75;line-height: 150%;position: relative;}
.technologyswiper .con:hover .txt_container .txtcon p{height: auto; opacity:1;}

.technologyswiper .swiper-button-next,.technologyswiper .swiper-button-prev{position: absolute;top: 50%;width: 1.5em;height: 1.5em;margin-top: -.75em;z-index: 10;cursor: pointer;display: block;text-align: center;justify-content: center;color: #161616; outline: none; text-align: center; overflow: hidden; background: rgba(255, 255,255,.5);display: none;}
.technologyswiper .swiper-button-next:after,.technologyswiper .swiper-button-prev:after{ display: none;}
.technologyswiper .swiper-button-prev{left: 0;}
.technologyswiper .swiper-button-next{right: 0;}
.technologyswiper .swiper-button-prev:before,.technologyswiper .swiper-button-next:before{display: inline-block;font-size: 1.5em; line-height: 1em; width: 1em;  opacity: .7; vertical-align: top; font-family: simSun;}
.technologyswiper .swiper-button-prev:before{content: "<";}
.technologyswiper .swiper-button-next:before{content: ">";}
@media screen and (max-width: 1024px){
    .technology .txt_con h2{font-size: 1.5em;}
    .technologyswiper .con{margin:  0 auto;max-width: 270px;}
    .technologyswiper .swiper-button-next,.technologyswiper .swiper-button-prev{display: block;}
}
@media screen and (max-width: 480px){
    .technology .txt_con{padding: 0; margin-bottom: .5em;}
    .technology .txt_con h2{font-size: 1.125em;margin: 0;}
    .technology .txt_con p{font-size: .75em;}
    .technology .txt_con:before,.technology .txt_con:after{display: none;}
}
@media screen and (max-width: 368px){
    .technologyswiper .con{max-width: 220px;}
}

.indexnews{height: calc(100vh - 410px); min-height: 480px;}
.indexnews > .bg_container{position: absolute; left: 0; right: 0; top:0; bottom:0; background-position: center bottom;}
.indexnews .news_content{position: absolute; left: 50%; top:50%; width: 84%; max-width: 1104px;  transform: translate(-50%,-50%);}
.indexnews .column_til{margin-bottom: 1em; overflow: hidden;white-space: nowrap;}
.indexnews .column_til h2{ font-size: 2em; line-height: 150%; color: #013b96; text-align: center; margin-bottom: .5em;}
.indexnews .column_til .tab{ float: right; line-height: 200%; overflow: auto;}
.indexnews .column_til .tab::-webkit-scrollbar{height: 2px;}
.indexnews .column_til .tab::-webkit-scrollbar-thumb{background: rgba(0, 0,0,.3); border-radius: 1px;}
.indexnews .column_til .tab ul{display: table; list-style-type: none; text-align: center;}
.indexnews .column_til .tab li{display: table-cell;}
.indexnews .column_til .tab li a{ padding: 0 1em; display: block; color: #161616;}
.indexnews .column_til .tab li a:hover{color: #013b96;}
.indexnews .column_til .tab li.current a{ background: #013b96; color: #FFF;}
.indexnews .card_content{ position: relative; height: 0; overflow: hidden;}
.indexnews .card_content.current{height: auto;} 

.indexnews .subnews{list-style: none; overflow: hidden;}
.indexnews .subnews li {padding: .25em 0; white-space: nowrap;float: left; width: 49%; margin: 0 2% 0 0; height: 4.1875em;}
.indexnews .subnews li:nth-child(2n){margin: 0 -2% 0 0;}
.indexnews .subnews li a{display: block; position: relative; line-height: 250%;}
.indexnews .subnews li h4{overflow: hidden; width: 100%; text-overflow: ellipsis; color: #494949;}
.indexnews .subnews li a:hover h4{color:#013b96;}
.indexnews .subnews li .time{ font-size: 12px; color:#969696; line-height: 18px; display: block;}

.videoicon a .img_container:after{content: '';position: absolute;left: 0; top:0; right: 0; bottom:0;  background:#013B96; opacity: 0;transition: opacity .5s linear;}
.videoicon a .img_container:before{content: '';position: absolute;left: 0; top:0; right: 0; bottom:0; z-index: 1; background:url(../images/video_icon.png) no-repeat center center; opacity: .5;transition: opacity .5s linear; background-size: 10%;}
.videoicon a:hover .img_container:after{opacity: .3;}
.videoicon a:hover .img_container:before{opacity: 1;}

.indexnews .subnews_class1 {list-style-type: none; margin: 0 -4px;}
.indexnews .subnews_class1 li{display: inline-block; width: 33.33%; margin-right: -.33em; vertical-align: top;}
.indexnews .subnews_class1 a{ display: block; margin: 0 4px; position: relative;  max-width: 370px; padding: 0 1em; margin: 0 auto;}
.indexnews .subnews_class1 a:before{position: absolute; left: 0;right: 0; bottom:0; top:1em; background: #f0f6ff; content: '';}
.indexnews .subnews_class1 .img_container{ border:1px solid #DDD; position: relative; overflow: hidden;}
.indexnews .subnews_class1 .bg_container{width: 100%;  transition: transform .5s linear; position: relative;height: 0;padding: 0 0 56.25%;overflow: hidden;}
.indexnews .subnews_class1 a:hover .bg_container{transform: scale(1.05);}
.indexnews .subnews_class1 .txt_container{ padding: .25em 0; position: relative;}
.indexnews .subnews_class1 .txt_container:after{content:"See More"; margin: .5em auto; font-size: .75em; line-height: 250%; display: block; text-align: center; width: 8em; color: #013b96; border:1px solid #013b96}
.indexnews .subnews_class1 .txt_container h3{overflow: hidden;line-height: 1.5;min-height:4.5em; font-size: 1.125em;color: #013B96;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 4; margin-top: .5em; text-align: center;}
.indexnews .subnews_class1 .txt_container p{overflow: hidden;line-height: 150%;height:3em;font-size:.75em;color: #969696;display:none;-webkit-box-orient: vertical;-webkit-line-clamp: 2; margin-top: .5em;}
.indexnews .subnews_class1 a:hover .txt_container h3{color:#161616;}
@media screen and (max-width: 1280px){
    .indexnews{height: calc(100vh - 380px);}
}
@media screen and (max-width: 1024px){
    .indexnews .column_til h2{font-size: 1.5em;}
    .indexnews .column_til .tab{ font-size: .75em;}
}
@media screen and (max-width: 767px){
    .indexnews .column_til h2{font-size: 1.25em;}
    .indexnews .column_til .tab{line-height: 250%;}
}
@media screen and (max-width: 580px){
    .indexnews .column_til h2{float: none;}
    .indexnews .column_til .tab{ float: none; clear: both; margin: 1em 0; width: 100%;}
    .indexnews .column_til .tab ul{ width: 100%;}
    .indexnews .column_til .tab li a{ padding: 0 .5em;}

    .indexnews .subnews li{width: 100%;margin: 0 -2% 0 0; padding: 0; height: 2.125em;}
    .indexnews .subnews li .time{ display: none;}

    .indexnews .subnews_class1{padding-bottom: 2px;}
    .indexnews .subnews_class1 li{width: 100%; display: block;}
    .indexnews .subnews_class1 a{ max-width:none; padding:0;}
    .indexnews .subnews_class1 a:before{ display: none;}
    .indexnews .subnews_class1 .img_container{ display: none;}
    .indexnews .subnews_class1 .txt_container:after{display: none;}
    .indexnews .subnews_class1 .txt_container h3{height:2em;-webkit-line-clamp: 1; margin-top:0; line-height: 200%; min-height: 0;}
    .indexnews .subnews_class1 .txt_container p{overflow: hidden;line-height: 150%;height:3em;font-size:.75em;color: #969696;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2; margin-top: .5em;}
    .indexnews .subnews_class1 a:hover .txt_container h3{color:#161616;}
}

/*底部*/
.footer_class2 {min-height: 380px;}
.footer_class2 > .bg_container{position: absolute; left: 0; right: 0; top:0; bottom:0;}
.footer_class2 .footer_content{width: 88%; max-width: 1096px; margin: 0 auto;}
.footer_class2 .btn_gotop{ display: block;}
@media screen and (max-width: 1024px){
    .indexnews{height: calc(100vh - 510px);}
    .footer_class2 {min-height: 510px;}
}
@media screen and (max-width: 767px){
    .indexnews{height: calc(100vh - 510px - 64px);}
}

@media screen and (max-width: 600px){
    .footer_class2 .footer_content{width: 84%;}
}


