@import url(http://fonts.googleapis.com/css?family=Raleway:200,300,400,500,600); @charset "utf-8"; /* 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: #b60404; 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; } .pad20{ padding:20px 0;} .pad25{ padding:25px 0;} .pad35{ padding:35px 0;} .pad80{ padding:4vw 0;} .mr5{ margin-right:5px;} .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: 'Raleway';} .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;} .color{ color: #b60404;} .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;} .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;} .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); } .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; } .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;} .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*/ @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;} }