﻿@charset "utf-8";

.black-20{ background: url(../images/black_20.png) repeat; background: none rgba(0,0,0,0.2);}
.black-30{ background: url(../images/black_30.png) repeat; background: none rgba(0,0,0,0.3);}
.black-40{ background: url(../images/black_40.png) repeat; background: none rgba(0,0,0,0.4);}
.black-50{ background: url(../images/black_50.png) repeat; background: none rgba(0,0,0,0.5);}
.black-60{ background: url(../images/black_60.png) repeat; background: none rgba(0,0,0,0.6);}
.white-86{ background: url(../images/white_86.png) repeat; background: none rgba(255,255,255,0.86);}
.cs-50{ background: url(../images/cs_50.png) repeat; background: rgba(160,115,62,0.5); position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block;}
.pusher{ transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1) 0s; -webkit-transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1) 0s; }
.inview .tlbg:after{transform: scaleX(0); -webkit-transform: scaleX(0);}
.no-csstransitions .pbanner-C article:after{ background-color: transparent;}
.pageNavBox { height: 52px;}
.pageNavBox a:link, .pageNavBox a:visited { color: #fff;}
.pageNavBox a:active,.pageNavBox a:hover { color: #01539d;}    
.pagenav { background-color: #01539d; width: 100%;}
.pagenav.fixed{ position: fixed; left: 0; top: 52px; z-index: 1000;}
.pagenav.fixed .cpnavbox{ height: 40px; line-height: 40px;}
.cpnavbox { height: 50px; line-height: 50px; padding-top: 2px; -webkit-transition:height 0.3s;  transition:height 0.3s;}
.cpnavbox a { text-align: center; color: #ffffff; display: inline-block; margin-left: -3px; padding: 0px 30px;  *display: inline; *zoom: 1; position: relative;}
.cpnavbox a:before{ content:""; position: absolute; left: 0px; top: 0; width: 1px; height: 100%; display: block; background-color: #b1844f;}
.cpnavbox a:last-child:after{ content:""; position: absolute; right: 0px; top: 0; width: 1px; height: 100%; display: block; background-color: #b1844f;}
.cpnavbox a:hover, .cpnavbox a.active { background-color: #fff; color: #01539d; }
.cpnav { display: none; width: 100%; color: #fff; line-height: 40px; height: 40px; overflow: hidden; text-align: center; font-size: 14px; background-color: #01539d; cursor: pointer; }
.caret { display: inline-block; width: 0px; height: 0px; margin-left: 10px; vertical-align: middle; border-top: 4px solid; border-right: 4px solid transparent; border-left: 4px solid transparent; }
.fixedImg { background-position: center top; background-repeat: no-repeat; background-size: cover;}

.slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; }
.slick-list:focus { outline: none; }
.slick-loading .slick-list { background: #fff url(../images/loader.gif) center center no-repeat; }
.slick-list.dragging { cursor: pointer; cursor: hand; }
.slick-slider .slick-list, .slick-track, .slick-slide, .slick-slide img { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
.slick-track { position: relative; left: 0; top: 0; display: block; zoom: 1; }
.slick-track:before, .slick-track:after { content: ""; display: table; }
.slick-track:after { clear: both; }
.slick-loading .slick-track { visibility: hidden; }
.slick-slide { float: left; height: 100%; min-height: 1px; display: none; }
.slick-slide img { display: block; }
.slick-slide.slick-loading img { display: none; }
.slick-slide.dragging img { pointer-events: none; }
.slick-initialized .slick-slide { display: block; }
.slick-loading .slick-slide { visibility: hidden; }
.slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; }
/* Arrows */
.slick-prev, .slick-next { position: absolute; display: block; height: 20px; width: 20px; line-height: 0; font-size: 0; cursor: pointer; background: transparent; color: transparent; padding: 0; border: none; outline: none; }
/* Dots */
.slick-dots { position: absolute; bottom: -45px; list-style: none; display: block; text-align: center; padding: 0px; width: 100%; }
.slick-dots li { position: relative; display: inline-block; height: 20px; width: 20px; margin: 0px 5px; padding: 0px; cursor: pointer; }
.slick-dots li button { border: 0; background: transparent; display: block; height: 20px; width: 20px; outline: none; line-height: 0; font-size: 0; color: transparent; padding: 5px; cursor: pointer; outline: none; }
.slick-dots li button:focus { outline: none; }
.slick-dots li.slick-active a { transform:rotateY(180deg); -webkit-transform:rotateY(180deg); -moz-transform:rotateY(180deg);}
@-webkit-keyframes scaleUpDown {
    from { -webkit-transform: scale(1.08); transform: scale(1.08); }
    to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
}

@keyframes scaleUpDown {
    from { -webkit-transform: scale(1.08); transform: scale(1.08); }
    to { opacity: 1; -webkit-transform: scale(1); transform: scale(1);  }
}

@-webkit-keyframes clockwise {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }

@keyframes clockwise {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }

@-webkit-keyframes donut-rotate {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0); }
  50% {
    -webkit-transform: rotate(-140deg);
            transform: rotate(-140deg); }
  100% {
    -webkit-transform: rotate(0);
            transform: rotate(0); } }

@keyframes donut-rotate {
  0% {-webkit-transform: rotate(0);transform: rotate(0); }
  50% { -webkit-transform: rotate(-140deg);transform: rotate(-140deg); }
  100% { -webkit-transform: rotate(0);transform: rotate(0); }
}


.align-vertical { height: 100%; width: 100%; position: relative; display: table; }
.vertical-inner { display: table-cell; vertical-align: middle; }
.transXT50 { transform: translateX(50px); -webkit-transform: translateX(50px); opacity: 0; visibility: hidden; transition: transform 600ms,opacity .5s cubic-bezier(0.445, 0.145, 0.355, 1); -webkit-transition: transform 600ms,opacity .5s cubic-bezier(0.445, 0.145, 0.355, 1); transition-timing-function: ease-out; -webkit-transition-timing-function: ease-out; }
.transYT50 { transform: translateY(50px); -webkit-transform: translateY(50px); opacity: 0; visibility: hidden; transition: transform 600ms,opacity .5s cubic-bezier(0.445, 0.145, 0.355, 1); -webkit-transition: transform 600ms,opacity .5s cubic-bezier(0.445, 0.145, 0.355, 1); transition-timing-function: ease-out; -webkit-transition-timing-function: ease-out; }
.action.transYT50{ opacity: 1; visibility: visible; transform: translateY(0px); -webkit-transform: translateY(0px); }
.action.transXT50 { opacity: 1; visibility: visible; transform: translateY(0px); -webkit-transform: translateY(0px); }
.dly_2 { transition-delay: 200ms; -webkit-transition-delay: 200ms; }
.banner a:link, .banner a:visited { color: #fff;}
.banner a:active,.banner a:hover { color: #fff;}  
.banner { position: relative; overflow: hidden; }
.banner .item .pimg { position: absolute; right: 0px; top: 0px; width: 100%; display: block; }
.binbox{ position: absolute; left: 13.2%; bottom: 122px; color: #fff; border-left: 1px solid #fff; border-left: 1px solid rgba(255,255,255,0.5); padding-left: 50px;}
.binbox .t{ color: #fff; font-size: 50px; line-height: 1; margin-top: 10px; overflow: hidden; }
.binbox .en{ line-height: 1; font-size: 40px; font-family: "DINPro";text-transform : uppercase}
.binbox .con{ height: 220px; overflow: hidden;}
.binbox .moreBox{ font-family: "DINPro";}
.banner .bot{ position: absolute; left: 0px; bottom: 0px; background-color: #000096; height: 6px; overflow: hidden;}
.banner .slick-arrow{ background:url(black_50.png) repeat; background:none rgba(0,0,0,0.5); width:60px; height: 52px; z-index: 55;  bottom: 440px;}
.banner .slick-arrow i{ width: 100%; height: 100%; display: block; transition: 300ms; -webkit-transition: 300ms;}
.banner .slick-prev{ left: 13.2%; }
.banner .slick-next{ left: 13.2%; margin-left: 74px;}
.banner .slick-prev i{ background: url(i_banner_l.png) no-repeat scroll center center;}
.banner .slick-next i{ background: url(i_banner_r.png) no-repeat scroll center center;}
.banner .slick-prev:hover,.banner .slick-next:hover{ background:url(cs_80.png) repeat; background:none rgba(5,6,186,0.8);}
.banner .slick-prev:hover i{ transform: translateX(-5px); -webkit-transform: translateX(-5px);}
.banner .slick-next:hover i{ transform: translateX(5px); -webkit-transform: translateX(5px);}
.banner-yy{ background: url(bg_yy.png) repeat-x scroll left bottom; display: block; width: 100%; height: 100%; position: absolute; left: 0; bottom: 0;}
.banner .slick-active .pimg { visibility: visible !important; -webkit-animation: scaleUpDown 5s forwards cubic-bezier(0.250, 0.460, 0.450, 0.940); animation: scaleUpDown 5s forwards cubic-bezier(0.250, 0.460, 0.450, 0.940);}
.banner .slick-active .binbox{  visibility: visible; -webkit-transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8); transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8); -webkit-animation: fadeInRightBig 1.2s 1; animation: fadeInRightBig 1.2s 1;}
@-webkit-keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translateX(300px);transform:translateX(300px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}
@keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translateX(300px);transform:translateX(300px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}
.banner .slick-active .bot { -moz-animation: a_slidercurrent 5s linear; -webkit-animation: a_slidercurrent 5s linear; -o-animation: a_slidercurrent 5s linear; animation: a_slidercurrent 5s linear; }
@-moz-keyframes a_slidercurrent {from { width: 0%; } to { width: 100%; }}
@-webkit-keyframes a_slidercurrent {from { width: 0%; } to { width: 100%; }}
.mouseIco{ border: 2px solid #fff; width: 21px; height: 30px; display: block; margin: 0px auto; border-radius: 6px; position: absolute; left: 50%; margin-left: -17px; bottom: 67px; z-index:900;}
.mouseIco i{ width: 3px; height: 7px; border-radius: 1px; display: block; background-color: #fff; position: absolute; left: 50%; margin-left: -1px; top: 5px; -webkit-animation: mouse-dot 1.5s cubic-bezier(0.23, 1, 0.32, 1) infinite; animation: mouse-dot 1.5s cubic-bezier(0.23, 1, 0.32, 1) infinite;}
@keyframes mouse-dot {
    from { opacity: 0; }
    33% { opacity: 1; }
    to { transform: translateY(15px); -webkit-transform: translateY(15px); opacity: 0; }
}
@-webkit-keyframes mouse-dot {
    from { opacity: 0; }
    33% { opacity: 1; }
    to { transform: translateY(15px); -webkit-transform: translateY(15px); opacity: 0; }
}
.moreBtn{ text-align: center; font-family: "OPTIGiant"; background: url(more_bg.png) no-repeat scroll center bottom; display: block; width: 110px; padding-bottom: 2px; position: relative;}
.moreBtn:before { content: ""; width: 100%; height: 100%; background: url(more_bg2.png) no-repeat scroll left bottom; position: absolute; left: 0; bottom: 0px; /*transform-origin: 100%; -webkit-transform-origin: 100%; -webkit-transition: -webkit-transform .3s cubic-bezier(.4,0,.2,1);  transition: transform .3s cubic-bezier(.4,0,.2,1); transform: scaleX(0); -webkit-transform: scaleX(0); visibility:hidden\9;*/ width: 0; transition: 0.3s; -webkit-transition: 0.3s;}
.iboxT .zh,.iboxT .en{ font-size: 24px; line-height: 1.5;}
.iboxT .zh{ color: #01539d;}
.iboxT .en{ color: #bbbbbb; text-transform: uppercase; padding-left: 6px; font-family: "OPTIGiant";}
.ibox dd{ float: left; display: block; width: 50%; position: relative;}
.ibox .img{ overflow: hidden; position: relative;}
.ibox .img img{ width: 100%; display: block; transition: 1s; -webkit-transition: 1s;}
.ibox .black-20{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; transition: 330ms; -webkit-transition: 330ms;}
.homeIbox a:link, .homeIbox a:visited { color: #fff;}
.homeIbox a:active,.homeIbox a:hover { color: #01539d;}
.homeIbox .con{ position: absolute; left: 5%; top: 0; width: 90%; top: 50%; text-align: center; margin-top: -75px;}  
.homeIbox .iboxT{ padding: 15px 0px;}
.homeIbox .iboxT .zh,.homeIbox .iboxT .en{ color: #fff;}
.homeIbox .moreBtn{ margin: 0px auto;}
.ibox dd:hover .black-20{ opacity: 1; visibility: visible;}
.ibox dd:hover .img img{ -webkit-transform:scale(1.3) rotate(10deg); transform: scale(1.3) rotate(10deg);}
.aboutIbox{ background-size: cover; background-repeat: no-repeat; background-position: center bottom;}
.aboutIbox .con{ position: absolute; left: 8%; top: 14%; width: 84%;}
.aboutIbox .t{ font-size: 18px; color: #444; line-height: 1.5;}
.aboutIbox .by{ color: #333;  font-size: 30px; line-height: 1.2; }
.aboutIbox .i{ width: 500px; font-size: 15px; text-align: justify; height: 80px; overflow: hidden; margin: 4% 0px 8%;}
.numList li{ float: left; display: block; margin-right: 46px; text-align: left; font-size: 12px; color: #666666;}
.numList li:last-child{ margin-right: 0;}
.numList .num{ font-size: 92px; color: #01539d; line-height: 1.1; font-family: 'OPTIGiant';}
.aboutIbox .moreBtn{ position: absolute; right: 0; bottom: 0; background-image: url(more_bg2.png);}
.aboutIbox .moreBtn:before{ background-image: url(more_bg3.png);}
.aboutIbox a:link, .aboutIbox a:visited { color: #00bcd6;}
.aboutIbox a:active,.aboutIbox a:hover { color: #000;}
@-webkit-keyframes slideIn {
    0% { -webkit-transform: translateX(-100%); opacity: 1; }
    100% { -webkit-transform: translateX(0); opacity: 1; }
}
@keyframes slideIn {
    0% { transform: translateX(-100%); opacity: 1; }
    100% { transform: translateX(0); opacity: 1; }
}
@-webkit-keyframes imgIn {
    0% { -webkit-transform: -webkit-translateX(100%); opacity: 1; }
    100% { -webkit-transform: -webkit-translateX(0); opacity: 1; }
}
@keyframes imgIn {
    0% { transform: translateX(100%); opacity: 1; }
    100% { transform: translateX(0); opacity: 1; }
}
@media screen and (max-width:1441px){
	.binbox{ bottom: 52px;}
	.binbox .t{ font-size: 30px;}
	.binbox .en{ font-size: 16px;}
	.binbox .con{ height: 140px;}
	.banner .slick-arrow{ bottom: 260px;}
	.banner .bot{ height: 0px;}
}
@media screen and (max-width:1280px){

	.binbox{ bottom: 200px;}
	.binbox .t{ font-size: 30px;}
	.binbox .en{ font-size: 16px;}
	.binbox .con{ height: 140px;}
	.banner .slick-arrow{ bottom: 390px;}
	.banner .bot{ height: 4px;}
}

@media screen and (max-width:1024px){
	.transYT50{ transform: translateY(0px); -webkit-transform: translateY(0px); opacity: 1; visibility: visible; transition: transform 0ms,opacity 0s cubic-bezier(0.445, 0.145, 0.355, 1); -webkit-transition: transform 0ms,opacity 0s cubic-bezier(0.445, 0.145, 0.355, 1); transition-timing-function: ease-out; -webkit-transition-timing-function: ease-out; }
	.transXT50{ transform: translateX(0px); -webkit-transform: translateX(0px); opacity: 1; visibility: visible; transition: transform 0ms,opacity 0s cubic-bezier(0.445, 0.145, 0.355, 1); -webkit-transition: transform 0ms,opacity 0s cubic-bezier(0.445, 0.145, 0.355, 1); transition-timing-function: ease-out; -webkit-transition-timing-function: ease-out;  }
	.action.transYT50 { opacity: 1; visibility: visible; transform: translateY(0px); -webkit-transform: translateY(0px); }
	.action.transYT50{ opacity: 1; visibility: visible; transform: translateY(0px); -webkit-transform: translateY(0px); }
	.blackTop:hover{ bottom: 0;}
    .banner-yy{ height: 60%; background-image:-webkit-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.6)); background-image:linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.6));}
 	.banner .slick-arrow{ display: none !important;}
 	.banner .item{ overflow: hidden;}
	.binbox .t{ font-size: 24px;}
	.binbox .en{ font-size: 15px;}
	
	.binbox{ bottom: 92px;}
	.binbox .con{ height: 140px;}
	.banner .bot{ height: 0px;}

	
	
	
	
	
}
@media screen and (max-width:860px){
	.binbox .con{ height: auto; padding-bottom: 25px;}
}
@media screen and (max-width:641px){
    .banner .item .pimg{ width: 120%; margin-left: -10%;}
 	.banner .slick-dots li{ padding: 4px 0;}
 	.binbox{ padding-left: 20px; left: 5%; width: 80%; bottom: 10%;}
 	.binbox .t{ font-size: 16px; margin-bottom: 5px;}
 	.binbox .en{ font-size: 12px;}
 	.binbox .con{ height: auto; padding-bottom: 10px;}
}
@media screen and (max-width:421px) {
 	.banner-yy{ background-position: left 20%;}
	.pbanner-C .c{ font-size: 16px;}
}
@media screen and (max-width: 360px) {
	.industry-list-two dd{ width: 46%; margin: 0px 2% 20px;}
	.industry-list-two .item{ padding-bottom: 120px;}
	.industry-list-two .con{ height: 155px;}
}

