﻿@import url(css-FjallaOne.css);

/* Common */
body { font-family:Microsoft Yahei; font-size: 16px; line-height:normal; margin: 0; padding: 0; overflow-x: hidden; min-width: 1200px; background: #ffffff; color: #282828; }
html, body, div, p, span, object, h1, h2, h3, h4, h5, h6, a, img, strong, dl, dt, dd, ol, ul, li, form, label, footer, header, nav { margin: 0; padding: 0; }
* { list-style: none; }
a { color: #282828; text-decoration: none; -webkit-transition: all .3s ease-in; -moz-transition: all .3s ease-in; -o-transition: all .3s ease-in; transition: all .3s ease-i; }
a:hover { color: #d61125; text-decoration: none; }
ul li { list-style: none; }
img { border: none; }
.clear { clear: both; margin: 0 0; padding: 0 0; }
.fr { float: right; }
.fl { float: left; }
input, textarea, button { font-family:Microsoft Yahei;}
input:focus { outline: none; }
textarea:focus { outline: none; }
h1, h2, h3, h4, h5, h6 { line-height: normal; }
.pt10 { padding-top: 10px; }
.pt15 { padding-top: 15px; }
.pt20 { padding-top: 20px; }
.pt25 { padding-top: 25px; }
.pt30 { padding-top: 30px; }
.pt35 { padding-top: 35px; }
.pt40 { padding-top: 40px; }
.pt45 { padding-top: 45px; }
.pt50 { padding-top: 50px; }
.pt60 { padding-top: 60px; }
.pt70 { padding-top: 70px; }
.pt80 { padding-top: 80px; }
.pt90 { padding-top: 90px; }
.pt100 { padding-top: 100px; }
.pad70{ padding:70px 0;}
.pad35{ padding:35px 0;}
.mr5{ margin-right:5px;}
.mr20{ margin-right:20px;}
.ml20{ margin-left:20px;}
.mt50{ margin-left:50px;}
.f12 { font-size: 12px; }
.f13 { font-size: 13px; }
.f14 { font-size: 14px; }
.f15 { font-size: 15px; }
.f16 { font-size: 16px; }
.f18 { font-size: 18px; }
.f20 { font-size: 20px; }
.f22 { font-size: 22px; }
.f24 { font-size: 24px; }
.f26 { font-size: 26px; }
.f28 { font-size: 28px; }
.f30 { font-size: 30px; }
.f32 { font-size: 32px; }
.f34 { font-size: 34px; }
.f35 { font-size: 35px; }
.f36 { font-size: 36px; }
.f38 { font-size: 38px; }
.f40 { font-size: 40px; }
.f42 { font-size: 42px; }
.f45 { font-size: 45px; }
.f48 { font-size: 48px; }
.f50 { font-size: 50px; }
.f55 { font-size: 55px; }
.f57 { font-size: 57px; }
.f60 { font-size: 60px; }
.f70 { font-size: 70px; }
.f75 { font-size: 75px; }
.f80 { font-size: 80px; }
.f110 { font-size: 110px; }
.tszt{ font-family: "Fjalla One", sans-serif;}
.tsar{ font-family:Arial, Helvetica, sans-serif;}
.tpf { font-family: "PingFang sc", Source Han Sans CN,Microsoft Yahei; }
.txtyy{ text-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);}
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-justify { text-align: justify; }
.text-nowrap { white-space: nowrap; }
.text-lowercase { text-transform: lowercase; }
.text-uppercase { text-transform: uppercase; }
.text-capitalize { text-transform: capitalize; }
.ti2{ text-indent:2em;}
.flg { font-weight:lighter; }
.fb { font-weight: bolder; }
.fnor{ font-weight:normal;}
.bgcolor0{ background: #02a39e;}
.bgcolor0 mark b:before{ background:#02a39e;}
.bgcolor0 mark b:after{ background:#02a39e;}
.bgcolor0 mark:before{ border-left: 3px #02a39e solid;}
.bgcolor0 mark:after{ border-top: 3px #02a39e solid; border-bottom: 3px #02a39e solid;}
.bgcolor1{ background: #ef5e05;}
.bgcolor1 mark b:before{ background:#ef5e05;}
.bgcolor1 mark b:after{ background:#ef5e05;}
.bgcolor1 mark:before{ border-left: 3px #ef5e05 solid;}
.bgcolor1 mark:after{ border-top: 3px #ef5e05 solid; border-bottom: 3px #ef5e05 solid;}
.bgcolor2{ background: #e8250f;}
.bgcolor2 mark b:before{ background:#e8250f;}
.bgcolor2 mark b:after{ background:#e8250f;}
.bgcolor2 mark:before{ border-left: 3px #e8250f solid;}
.bgcolor2 mark:after{ border-top: 3px #e8250f solid; border-bottom: 3px #e8250f solid;}
.bgcolor3{ background: #005b9b;}
.bgcolor3 mark b:before{ background:#005b9b;}
.bgcolor3 mark b:after{ background:#005b9b;}
.bgcolor3 mark:before{ border-left: 3px #005b9b solid;}
.bgcolor3 mark:after{ border-top: 3px #005b9b solid; border-bottom: 3px #005b9b solid;}
.bgwhite{ background: #FFF;}
.color{ color: #d61125;}
.colory{ color: #026eb9;}
.color0{color: #02a39e;}
.color1{color: #ef5e05;}
.color2{color: #e8250f;}
.color3{color: #005b9b;}
.bord0{ border: 1px #02a39e solid;}
.bord1{ border: 1px #ef5e05 solid;}
.bord2{ border: 1px #e8250f solid;}
.bord3{ border: 1px #005b9b solid;}
.white, .white:hover{ color:#FFFFFF;}
.black{ color:#000000;}
.red{ color:#F00;}
.opac10{ opacity:1;}
.opac8{ opacity:0.8;}
.opac7{ opacity:0.7;}
.opac6{ opacity:0.6;}
.opac5{ opacity:0.5;}
.opac4{ opacity:0.4;}
.opac3{ opacity:0.3;}
.opac2{ opacity:0.2;}
.opac1{ opacity:0.1;}
.pore { position: relative; }
.poab{ position:absolute;}
.dibok{ display:block;}
.dinon{ display:none;}
.line2{ line-height:2;}
.line24{ line-height:24px;}
.line28{ line-height:28px;}
.line30{ line-height:30px;}
.line32{ line-height:32px;}
.line36{ line-height:36px;}
.line38{ line-height:38px;}
.line40{ line-height:40px;}
.line55{ line-height:55px;}
.cona { width: 100%; overflow: hidden; position:relative;}
.conb { width: 96%; overflow: hidden; position:relative; margin: 0 auto;}
.mainc { width: 90%; margin: 0 auto; overflow: hidden; position:relative;}
.main { width: 1200px; margin: 0 auto; overflow: hidden; position:relative;}
img, video { vertical-align: top; }
.imgs { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; -o-transition: -o-transform 0.3s; transition: transform 0.3s; }
.imgs:hover { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); }
.tra2{ -webkit-transition: all .2s ease-in; -moz-transition: all .2s ease-in; -o-transition: all .2s ease-in; transition: all .2s ease-i;}
.tra3{ -webkit-transition: all .3s ease-in; -moz-transition: all .3s ease-in; -o-transition: all .3s ease-in; transition: all .3s ease-i;}
.tra5{ -webkit-transition: all .5s ease-in; -moz-transition: all .5s ease-in; -o-transition: all .5s ease-in; transition: all .5s ease-i;}
.tra7{ -webkit-transition: all .7s ease-in; -moz-transition: all .7s ease-in; -o-transition: all .7s ease-in; transition: all .7s ease-i;}
.tra11{ -webkit-transition: all 1.1s ease-in; -moz-transition: all 1.1s ease-in; -o-transition: all 1.1s ease-in; transition: all 1.1s ease-i;}

.lina { -webkit-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-animation: kf_about_page1_btn_line1_inner 2s cubic-bezier(0.115, 0.41, 0.355, 1) 0s infinite; -moz-animation: kf_about_page1_btn_line1_inner 2s cubic-bezier(0.115, 0.41, 0.355, 1) 0s infinite; -o-animation: kf_about_page1_btn_line1_inner 2s cubic-bezier(0.115, 0.41, 0.355, 1) 0s infinite; -ms-animation: kf_about_page1_btn_line1_inner 2s cubic-bezier(0.115, 0.41, 0.355, 1) 0s infinite; animation: kf_about_page1_btn_line1_inner 2s cubic-bezier(0.115, 0.41, 0.355, 1) 0s infinite; }
.linb { -webkit-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-animation: kf_about_page1_btn_line2_inner 2s cubic-bezier(0.115, 0.41, 0.355, 1) 0s infinite; -moz-animation: kf_about_page1_btn_line2_inner 2s cubic-bezier(0.115, 0.41, 0.355, 1) 0s infinite; -o-animation: kf_about_page1_btn_line2_inner 2s cubic-bezier(0.115, 0.41, 0.355, 1) 0s infinite; -ms-animation: kf_about_page1_btn_line2_inner 2s cubic-bezier(0.115, 0.41, 0.355, 1) 0s infinite; animation: kf_about_page1_btn_line2_inner 2s cubic-bezier(0.115, 0.41, 0.355, 1) 0s infinite; }

.warn{ border-radius: 50%; -webkit-animation: warn 3s ease-out; -moz-animation: warn 3s ease-out; animation: warn 3s ease-out; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite;}

.winona { display: block; position: relative; overflow: hidden; -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); }
.winona::after { content: attr(data-text); position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; -webkit-transform: translate3d(0, 25%, 0); transform: translate3d(0, 25%, 0); }
.winona > span { display: block; }
.winona::after, .winona > span { -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); }
.winona:hover::after { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
.winona:hover > span { opacity: 0; -webkit-transform: translate3d(0, -25%, 0); transform: translate3d(0, -25%, 0); }


.sxfd{ animation:ghostUpdown 1s infinite alternate;-webkit-animation:ghostUpdown 1s infinite alternate;}
.sxfd:hover{animation-play-state:paused;}


.inner{ width: 100%; height: 100%; display: block; position: absolute; left: 0; top: 0; z-index: 10; opacity: 0.3; background: linear-gradient(-45deg, #333 50%, #fff 60%, #333 70%); background-size: 600% 100%; -webkit-animation: shine 20s infinite; animation: shine 20s infinite; -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-animation-timing-function: linear; animation-timing-function: linear; overflow:hidden;} 


.circular1{ transform: rotate(360deg); -ms-transform: rotate(360deg); /* IE 9 */ -moz-transform: rotate(360deg); /* Firefox */ -webkit-transform: rotate(360deg); /* Safari 和 Chrome */ -o-transform: rotate(360deg); animation: btnRotate 5.5s linear infinite; -webkit-animation: btnRotate 5.5s linear infinite; -moz-animation: btnRotate 5.5s linear infinite; -ms-animation: btnRotate 5.5s linear infinite;}

.circular2{ transform: rotate(360deg); -ms-transform: rotate(360deg); /* IE 9 */ -moz-transform: rotate(360deg); /* Firefox */ -webkit-transform: rotate(360deg); /* Safari 和 Chrome */ -o-transform: rotate(360deg); animation: btnRotate 7.5s linear infinite; -webkit-animation: btnRotate 7.5s linear infinite; -moz-animation: btnRotate 7.5s linear infinite; -ms-animation: btnRotate 7.5s linear infinite;}

.circular3{ transform: rotate(360deg); -ms-transform: rotate(360deg); /* IE 9 */ -moz-transform: rotate(360deg); /* Firefox */ -webkit-transform: rotate(360deg); /* Safari 和 Chrome */ -o-transform: rotate(360deg); animation: btnRotate 9.5s linear infinite; -webkit-animation: btnRotate 9.5s linear infinite; -moz-animation: btnRotate 9.5s linear infinite; -ms-animation: btnRotate 9.5s linear infinite;}


/*animate1*/
 @-webkit-keyframes shine { 0% {
 background-position-x: 400%;
}
 50% {
 background-position-x: 0%;
}
 100% {
 background-position-x: -400%;
}
}
 @keyframes shine { 0% {
 background-position-x: 400%;
}
 50% {
 background-position-x: 0%;
}
 100% {
 background-position-x: -400%;
}
}



 @keyframes warn { 0% {
 transform: scale(0);
 opacity: 0;
}
 25% {
 transform: scale(0.9);
 opacity: 0.3;
}
 50% {
 transform: scale(1.2);
 opacity: 0.8;
}
 75% {
 transform: scale(0.9);
 opacity: 0.6;
}
 100% {
 transform: scale(0);
 opacity: 0;
}
}
@-webkit-keyframes warn { 0% {
 transform: scale(0);
 opacity: 0;
}
 25% {
 transform: scale(0.9);
 opacity: 0.3;
}
 50% {
 transform: scale(1.2);
 opacity: 0.8;
}
 75% {
 transform: scale(0.9);
 opacity: 0.6;
}
 100% {
 transform: scale(0);
 opacity: 0;
}
}



/*animate2*/
 @-webkit-keyframes btnRotate { 0% {
transform: rotateZ(0deg);
-ms-transform: rotateZ(0deg);
-moz-transform: rotateZ(0deg);
-webkit-transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
-ms-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
-webkit-transform: rotateZ(360deg);
}
}

/*animate3*/
 @-moz-keyframes kf_about_page1_btn_line2_inner { 0% {
 -webkit-transform: scaleY(0);
 -moz-transform: scaleY(0);
 -o-transform: scaleY(0);
 -ms-transform: scaleY(0);
 transform: scaleY(0);
}
 25% {
 -webkit-transform: scaleY(1);
 -moz-transform: scaleY(1);
 -o-transform: scaleY(1);
 -ms-transform: scaleY(1);
 transform: scaleY(1);
}
 100% {
 -webkit-transform: scaleY(1);
 -moz-transform: scaleY(1);
 -o-transform: scaleY(1);
 -ms-transform: scaleY(1);
 transform: scaleY(1);
}
}
@-webkit-keyframes kf_about_page1_btn_line2_inner { 0% {
 -webkit-transform: scaleY(0);
 -moz-transform: scaleY(0);
 -o-transform: scaleY(0);
 -ms-transform: scaleY(0);
 transform: scaleY(0);
}
 25% {
 -webkit-transform: scaleY(1);
 -moz-transform: scaleY(1);
 -o-transform: scaleY(1);
 -ms-transform: scaleY(1);
 transform: scaleY(1);
}
 100% {
 -webkit-transform: scaleY(1);
 -moz-transform: scaleY(1);
 -o-transform: scaleY(1);
 -ms-transform: scaleY(1);
 transform: scaleY(1);
}
}
@-o-keyframes kf_about_page1_btn_line2_inner { 0% {
 -webkit-transform: scaleY(0);
 -moz-transform: scaleY(0);
 -o-transform: scaleY(0);
 -ms-transform: scaleY(0);
 transform: scaleY(0);
}
 25% {
 -webkit-transform: scaleY(1);
 -moz-transform: scaleY(1);
 -o-transform: scaleY(1);
 -ms-transform: scaleY(1);
 transform: scaleY(1);
}
 100% {
 -webkit-transform: scaleY(1);
 -moz-transform: scaleY(1);
 -o-transform: scaleY(1);
 -ms-transform: scaleY(1);
 transform: scaleY(1);
}
}
@keyframes kf_about_page1_btn_line2_inner { 0% {
 -webkit-transform: scaleY(0);
 -moz-transform: scaleY(0);
 -o-transform: scaleY(0);
 -ms-transform: scaleY(0);
 transform: scaleY(0);
}
 25% {
 -webkit-transform: scaleY(1);
 -moz-transform: scaleY(1);
 -o-transform: scaleY(1);
 -ms-transform: scaleY(1);
 transform: scaleY(1);
}
 100% {
 -webkit-transform: scaleY(1);
 -moz-transform: scaleY(1);
 -o-transform: scaleY(1);
 -ms-transform: scaleY(1);
 transform: scaleY(1);
}
}
/*animate4*/

 @-moz-keyframes kf_about_page1_btn_line1_inner { 0% {
 -webkit-transform: scaleX(0);
 -moz-transform: scaleX(0);
 -o-transform: scaleX(0);
 -ms-transform: scaleX(0);
 transform: scaleX(0);
}
 25% {
 -webkit-transform: scaleX(1);
 -moz-transform: scaleX(1);
 -o-transform: scaleX(1);
 -ms-transform: scaleX(1);
 transform: scaleX(1);
}
 100% {
 -webkit-transform: scaleX(1);
 -moz-transform: scaleX(1);
 -o-transform: scaleX(1);
 -ms-transform: scaleX(1);
 transform: scaleX(1);
}
}
@-webkit-keyframes kf_about_page1_btn_line1_inner { 0% {
 -webkit-transform: scaleX(0);
 -moz-transform: scaleX(0);
 -o-transform: scaleX(0);
 -ms-transform: scaleX(0);
 transform: scaleX(0);
}
 25% {
 -webkit-transform: scaleX(1);
 -moz-transform: scaleX(1);
 -o-transform: scaleX(1);
 -ms-transform: scaleX(1);
 transform: scaleX(1);
}
 100% {
 -webkit-transform: scaleX(1);
 -moz-transform: scaleX(1);
 -o-transform: scaleX(1);
 -ms-transform: scaleX(1);
 transform: scaleX(1);
}
}
@-o-keyframes kf_about_page1_btn_line1_inner { 0% {
 -webkit-transform: scaleX(0);
 -moz-transform: scaleX(0);
 -o-transform: scaleX(0);
 -ms-transform: scaleX(0);
 transform: scaleX(0);
}
 25% {
 -webkit-transform: scaleX(1);
 -moz-transform: scaleX(1);
 -o-transform: scaleX(1);
 -ms-transform: scaleX(1);
 transform: scaleX(1);
}
 100% {
 -webkit-transform: scaleX(1);
 -moz-transform: scaleX(1);
 -o-transform: scaleX(1);
 -ms-transform: scaleX(1);
 transform: scaleX(1);
}
}
@keyframes kf_about_page1_btn_line1_inner { 0% {
 -webkit-transform: scaleX(0);
 -moz-transform: scaleX(0);
 -o-transform: scaleX(0);
 -ms-transform: scaleX(0);
 transform: scaleX(0);
}
 25% {
 -webkit-transform: scaleX(1);
 -moz-transform: scaleX(1);
 -o-transform: scaleX(1);
 -ms-transform: scaleX(1);
 transform: scaleX(1);
}
 100% {
 -webkit-transform: scaleX(1);
 -moz-transform: scaleX(1);
 -o-transform: scaleX(1);
 -ms-transform: scaleX(1);
 transform: scaleX(1);
}
}

@keyframes ghostUpdown{
		from{margin-top:50px;}
		to{margin-top:30px;}
	}
@-webkit-keyframes ghostUpdown{
		from{margin-top:50px;}
		to{margin-top:30px;}
}

