/*
Description: Reset css inside content for all pages.
Version: 2.0
Time: 2013-10-02 22:00
Author: Jensen
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, hr, p, blockquote, pre, a, abbr, acronym, del, cite, address, small, sub, sup, b, u, i, center, font, em, strong, dl, dt, dd, ul, ol, li, form, fieldset, legend, table, caption, thead, tbody, tfoot, tr, th, td { margin: 0; padding: 0; outline: none; }

html { font-family: 'PingFang SC','Microsoft YaHei',SimHei,Arial,SimSun; }

ul, ol { list-style-type: none; }

a { text-decoration: none; color: #000000; }

a:hover { text-decoration: none; }

a:focus { outline: none; }

li:focus { outline: none; }

fieldset, img { border: 0; }

img { display: block; }

q, blockquote { quotes: "" ""; }

q:before, q:after, blockquote:before, blockquote:after { content: ""; }

del { text-decoration: line-through; }

ins { text-decoration: underline; }

sup { vertical-align: super; }

sub { vertical-align: sub; }

cite, em, dfn { font-style: normal; }

table { border-collapse: collapse; border-spacing: 0; empty-cells: show; }

caption, th, td { font-weight: normal; text-align: left; }

input, textarea, select, button { font-size: 100%; font-family: inherit; margin: 0; padding: 0; }

label, button { cursor: pointer; }

textarea { white-space: pre; resize: none; border: 1px solid #ececec; }

button, input, select, textarea { font-size: 100%; }

article, aside, canvas, details, figcaption, figure, footer, header, menu, nav, section, summary { margin: 0; padding: 0; display: block; border: 0; font-size: 100%; }

.clearfix { /* For IE 6/7 only Include this rule to trigger hasLayout and contain floats. */ *zoom: 1; }

.clearfix:before, .clearfix:after { content: " "; /* 1 */ display: table; /* 2 */ }

.clearfix:after { clear: both; }

html { font-family: "Microsoft Yahei","Hiragino Sans GB",tahoma,arial; }

@-webkit-keyframes flash2 { from, 50%, to { opacity: 1; }
  25%, 75% { opacity: 0.4; } }

@-moz-keyframes flash2 { from, 50%, to { opacity: 1; }
  25%, 75% { opacity: 0.4; } }

@-o-keyframes flash2 { from, 50%, to { opacity: 1; }
  25%, 75% { opacity: 0.4; } }

@keyframes flash2 { from, 50%, to { opacity: 1; }
  25%, 75% { opacity: 0.4; } }

@-webkit-keyframes flash3 { from, 50%, to { opacity: 0; }
  25%, 75% { opacity: 1; } }

@-moz-keyframes flash3 { from, 50%, to { opacity: 0; }
  25%, 75% { opacity: 1; } }

@-o-keyframes flash3 { from, 50%, to { opacity: 0; }
  25%, 75% { opacity: 1; } }

@keyframes flash3 { from, 50%, to { opacity: 0; }
  25%, 75% { opacity: 1; } }

@-webkit-keyframes flash4 { from, 25% { opacity: 1; }
  65% { opacity: 0.3; }
  100% { opacity: 1; } }

@-moz-keyframes flash4 { from, 25% { opacity: 1; }
  65% { opacity: 0.3; }
  100% { opacity: 1; } }

@-o-keyframes flash4 { from, 25% { opacity: 1; }
  65% { opacity: 0.3; }
  100% { opacity: 1; } }

@keyframes flash4 { from, 25% { opacity: 1; }
  65% { opacity: 0.3; }
  100% { opacity: 1; } }

#main { background: #262626; }

.rg-container { height: 100%; margin: 0 60px; position: relative; }

@media screen and (max-width: 1200px) { .rg-container { margin: 0 5%; width: auto; } }

.sub-title { width: 300px; padding-top: 60px; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-name: fadeOutLeft; -moz-animation-name: fadeOutLeft; -o-animation-name: fadeOutLeft; animation-name: fadeOutLeft; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; background: none !important; -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s; }

.sub-title .color-line { width: 100%; height: 3px; background: url("../RJ-img/color-line.png") no-repeat left center; }

.sub-title .text { width: 200px; font-size: 26px; color: #00C6FF; padding-top: 20px; line-height: 1; }

@media screen and (max-width: 1024px) { .sub-title { width: 80%; } }

@media screen and (max-width: 768px) { .sub-title .text { font-size: 24px; } }

.sub-content { -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-name: fadeOutLeft; -moz-animation-name: fadeOutLeft; -o-animation-name: fadeOutLeft; animation-name: fadeOutLeft; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s; }

.sub-content dl dd { padding-bottom: 80px; }

.sub-content dl dd .t { font-size: 24px; color: #00C6FF; padding-bottom: 3px; }

.sub-content dl dd .d { font-size: 16px; color: #A0A0A0; }

@media screen and (max-width: 768px) { .sub-content dl { overflow: hidden; }
  .sub-content dl dd { width: 50%; float: left; }
  .sub-content dl dd .t { font-size: 24px; }
  .sub-content dl dd .d { font-size: 14px; } }

.main-title { padding-top: 60px; -webkit-animation-duration: 0.8s; -moz-animation-duration: 0.8s; -o-animation-duration: 0.8s; animation-duration: 0.8s; -webkit-animation-name: fadeOutUp; -moz-animation-name: fadeOutUp; -o-animation-name: fadeOutUp; animation-name: fadeOutUp; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s; }

.main-title.center { text-align: center; }

.main-title.black .t { color: #333333; }

.main-title.black .d { color: #333333; opacity: 0.6; }

.main-title .t { font-size: 30px; color: #fff; font-weight: bolder; padding-bottom: 10px; line-height: 1; }

.main-title .d { font-size: 16px; color: #fff; opacity: 0.5; line-height: 1.7; }

@media screen and (max-width: 768px) { .main-title .t { font-size: 24px; }
  .main-title .d { font-size: 14px; } }

.section-top .sub-title { float: left; }

.section-top .main-title { float: right; width: 690px; }

.section-bottom .sub-content { padding-top: 120px; float: left; }

@media screen and (max-width: 1200px) { .section-top .sub-title { width: 25%; }
  .section-top .main-title { width: 70%; }
  .section-bottom .sub-content { width: 25%; } }

@media screen and (max-width: 768px) { .section-top { height: auto; }
  .section-top .sub-title { width: 100%; padding-top: 10%; }
  .section-top .main-title { width: 100%; padding-top: 5%; }
  .section-bottom .sub-content { width: 100%; padding-top: 5%; }
  .section-bottom .sub-content dl dd { padding-bottom: 0; } }

.fid { -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-name: fadeOutUp; -moz-animation-name: fadeOutUp; -o-animation-name: fadeOutUp; animation-name: fadeOutUp; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s; }

section { overflow: hidden; position: relative; }

section.on .main-title { -webkit-animation-duration: 1.5s; -moz-animation-duration: 1.5s; -o-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-name: fadeInDown; -moz-animation-name: fadeInDown; -o-animation-name: fadeInDown; animation-name: fadeInDown; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s; }

section.on .sub-title { -webkit-animation-duration: 1.5s; -moz-animation-duration: 1.5s; -o-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-name: fadeInLeft; -moz-animation-name: fadeInLeft; -o-animation-name: fadeInLeft; animation-name: fadeInLeft; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s; }

section.on .sub-content { -webkit-animation-duration: 1.5s; -moz-animation-duration: 1.5s; -o-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-name: fadeInLeft; -moz-animation-name: fadeInLeft; -o-animation-name: fadeInLeft; animation-name: fadeInLeft; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s; }

section.on .fid { -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-name: fadeInDown; -moz-animation-name: fadeInDown; -o-animation-name: fadeInDown; animation-name: fadeInDown; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; }

section.on .fid.f1 { -webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; -o-animation-delay: 0.2s; animation-delay: 0.2s; }

section.on .fid.f2 { -webkit-animation-delay: 0.4s; -moz-animation-delay: 0.4s; -o-animation-delay: 0.4s; animation-delay: 0.4s; }

section.on .fid.f3 { -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; -o-animation-delay: 0.6s; animation-delay: 0.6s; }

section.on .fid.f4 { -webkit-animation-delay: 0.8s; -moz-animation-delay: 0.8s; -o-animation-delay: 0.8s; animation-delay: 0.8s; }

.s1 .main-title { -webkit-animation-name: inhert; -moz-animation-name: inhert; -o-animation-name: inhert; animation-name: inhert; padding-top: 60px; padding-bottom: 60px; -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s; }

.s1 .main-pic { width: 100%; height: 70%; text-align: center; }

.s1 .main-pic .init { position: absolute; -webkit-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; transition: all 1s ease-in-out; opacity: 1; z-index: 1; }

.s1 .main-pic .done { -webkit-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; transition: all 1s ease-in-out; }

.s1 .main-pic img { display: inline-block; width: 50%; height: auto; }

.s1.on .main-title { -webkit-animation-name: inhert; -moz-animation-name: inhert; -o-animation-name: inhert; animation-name: inhert; }

.s1.on .main-pic .init { -webkit-transition: all 1.5s ease-in-out; -o-transition: all 1.5s ease-in-out; -moz-transition: all 1.5s ease-in-out; transition: all 1.5s ease-in-out; opacity: 0; }

.s1.on .main-pic .done { -webkit-transition: all 1.5s ease-in-out; -o-transition: all 1.5s ease-in-out; -moz-transition: all 1.5s ease-in-out; transition: all 1.5s ease-in-out; -webkit-transition-delay: 2s; -moz-transition-delay: 2s; -o-transition-delay: 2s; transition-delay: 2s; }

@media screen and (max-width: 768px) { .s1 { height: auto; }
  .s1 .main-title { padding-top: 10%; padding-bottom: 10%; }
  .s1 .main-pic { position: static; margin-bottom: -5%; }
  .s1 .main-pic img { width: 90% !important; height: auto !important; } }

.s2 .title { font-size: 30px; color: #fff; font-weight: bolder; text-align: center; padding-top: 63px; }

.s2 .title span { opacity: 0; display: block; }

.s2 .desc { text-align: center; padding-top: 50px; width: 60%; margin: 0 auto; }

.s2 .desc dl { display: inline-block; width: 100%; }

.s2 .desc dl dd { width: 39%; font-size: 20px; float: left; opacity: 0.5; color: #fff; border-top: 1px solid #c1c1c1; padding-top: 16px; line-height: 1; padding-bottom: 35px; text-align: left; }

.s2 .desc dl dd.pr { margin-right: 20%; }

.s2 .main-pic { width: 60%; margin: 0 auto; text-align: center; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s; }

.s2 .main-pic img { display: inline-block; height: auto; width: 100%; }

.s2.on .title span { opacity: 1; }

.s2.on .main-pic { -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; /*animation-name: fadeIn;*/ -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 1s; -moz-animation-delay: 1s; -o-animation-delay: 1s; animation-delay: 1s; }

@media screen and (max-width: 1024px) { .s2 .title { font-size: 30px; }
  .s2 .desc dl dd { padding-bottom: 50px; }
  .s2 .main-pic { position: static; } }

@media screen and (max-width: 768px) { .s2 .title { font-size: 24px; padding-top: 10%; }
  .s2 .title span { display: inline; }
  .s2 .desc { padding-top: 10%; width: 100%; padding-bottom: 10%; }
  .s2 .desc dl dd { width: 100%; float: none; margin: 0; padding-bottom: 3%; padding-top: 2.5%; font-size: 16px; }
  .s2 .main-pic img { width: 100%; } }

@media screen and (max-width: 640px) { .s2 .desc { padding-bottom: 5%; }
  .s2 .desc dl dd { padding-top: 5%; padding-bottom: 7%; }
  .s2 .main-pic { width: 90%; } }

.section-fixed .wrap { position: relative; }

.section-fixed .wrap.fixed { position: fixed; top: 0; left: 0; width: 100%; }

.section-fixed .wrap.fixed .hardware { position: absolute; top: 0; left: 0; width: 100%; z-index: -1; }

.section-fixed .wrap.fixed .hardware.on { z-index: 1; }

.hardware .main-pic { padding-top: 40px; padding-bottom: 78px; position: relative; float: right; width: 690px; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; /*animation-name: fadeOutRight;*/ -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s; }

.hardware .main-pic .init { position: absolute; opacity: 1; -webkit-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; transition: all 1s ease-in-out; }

.hardware .main-pic img { width: 100%; }

.hardware.on .main-pic { -webkit-animation-duration: 2s; -moz-animation-duration: 2s; -o-animation-duration: 2s; animation-duration: 2s; /*animation-name: fadeInRight;*/ -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s; }

.hardware.on .main-pic .init { opacity: 0; -webkit-transition: all 2.5s ease-in-out; -o-transition: all 2.5s ease-in-out; -moz-transition: all 2.5s ease-in-out; transition: all 2.5s ease-in-out; -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; }

.s3 .main-pic .init { -webkit-transition: all 0.5s ease-in-out !important; -o-transition: all 0.5s ease-in-out !important; -moz-transition: all 0.5s ease-in-out !important; transition: all 0.5s ease-in-out !important; -webkit-transition-delay: 1.2s !important; -moz-transition-delay: 1.2s !important; -o-transition-delay: 1.2s !important; transition-delay: 1.2s !important; }

@media screen and (max-width: 1210px) { .hardware { height: auto; }
  .hardware .main-pic { width: 70%; } }

@media screen and (max-width: 768px) { .hardware { background: url("../RJ-img/bg4.png") no-repeat center; }
  .hardware .main-pic { width: 100%; padding-top: 10%; padding-bottom: 10%; } }

.s6 { padding-bottom: 20px; }

.s6.on .progress-box .pb-t { opacity: 1; -webkit-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; transition: all 1s ease-in-out; -webkit-transition-delay: 1s; -moz-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; }

.s6.on .progress-box dl dd .tt { opacity: 1; -webkit-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; transition: all 1s ease-in-out; -webkit-transition-delay: 1s; -moz-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; }

.s6.on .progress-box dl dd .progress-line { width: 100%; -webkit-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; transition: all 1s ease-in-out; -webkit-transition-delay: 1s; -moz-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; }

.s6.on .progress-box dl dd .progress-line .num { opacity: 1; -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; -webkit-transition-delay: 2s; -moz-transition-delay: 2s; -o-transition-delay: 2s; transition-delay: 2s; }

.s6.on .progress-box dl dd .progress-line .b-num { opacity: 1; -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; -webkit-transition-delay: 2.4s; -moz-transition-delay: 2.4s; -o-transition-delay: 2.4s; transition-delay: 2.4s; }

.s6 .pb-item { padding-bottom: 35px; }

.s6 .progress-box { padding-top: 40px; }

.s6 .progress-box .pb-t { font-size: 22px; color: #fff; line-height: 1; opacity: 0; -webkit-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; transition: all 1s ease-in-out; }

.s6 .progress-box dl dd { padding-top: 5px; }

.s6 .progress-box dl dd.gray .progress-line .act .i { background: #4C4C4C; }

.s6 .progress-box dl dd .tt { font-size: 16px; line-height: 1; color: #fff; opacity: 0; -webkit-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; transition: all 1s ease-in-out; }

.s6 .progress-box dl dd .progress-line { overflow: hidden; line-height: 1; height: 35px; width: 0; -webkit-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; transition: all 1s ease-in-out; }

.s6 .progress-box dl dd .progress-line .act { margin-top: 13px; float: left; width: 60%; }

.s6 .progress-box dl dd .progress-line .act .i { width: 100%; height: 9px; background: url("../RJ-img/progress-line.png") no-repeat left center; }

.s6 .progress-box dl dd .progress-line .num { display: block; float: right; text-align: center; vertical-align: middle; font-size: 28px; color: #00C6FF; margin-top: 4px; width: 18%; opacity: 0; }

.s6 .progress-box dl dd .progress-line .b-num { width: 18%; text-align: center; display: block; float: right; vertical-align: middle; font-size: 34px; color: #00C6FF; opacity: 0; }

.s6 .progress-box dl dd .progress-line .b-num span { display: inline-block; background: url("../RJ-img/b-num-bg.png") no-repeat center right; padding-right: 25px; -moz-background-size: auto 100%; background-size: auto 100%; }

@media screen and (max-width: 768px) { .s6 .progress-box .pb-item dl dd .b-num { font-size: 34px; }
  .s6 .progress-box .pb-item dl dd .b-num span { padding-right: 20px; -moz-background-size: auto 100%; background-size: auto 100%; }
  .s6 .progress-box .pb-item dl dd .num { font-size: 20px; } }

@media screen and (max-width: 768px) { .s6 { padding-bottom: 5%; }
  .s6 .main-title { padding-top: 10%; }
  .s6 .progress-box .pb-item { padding-bottom: 5%; }
  .s6 .progress-box .pb-item .pb-t { font-size: 18px; padding-bottom: 3%; }
  .s6 .progress-box .pb-item dl dd { padding-bottom: 2.5%; padding-top: 0; }
  .s6 .progress-box .pb-item dl dd .tt { margin-top: 5px; font-size: 14px; }
  .s6 .progress-box .pb-item dl dd .progress-line { height: 20px; }
  .s6 .progress-box .pb-item dl dd .progress-line .act { margin-top: 5px; }
  .s6 .progress-box .pb-item dl dd .b-num { font-size: 18px; font-weight: bolder; }
  .s6 .progress-box .pb-item dl dd .b-num span { padding-right: 15px; -moz-background-size: auto 100%; background-size: auto 100%; }
  .s6 .progress-box .pb-item dl dd .num { font-size: 14px; margin-top: 2px; } }

.s7 .main-pic { margin-left: 15%; margin-bottom: -13%; padding-top: 40px; width: 95%; }

.s7 .main-pic .wrap { position: relative; }

.s7 .main-pic img { width: 100%; }

.s7 .main-pic .bg { -webkit-animation-duration: 2s; -moz-animation-duration: 2s; -o-animation-duration: 2s; animation-duration: 2s; /*animation-name: fadeOutRight;*/ -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s; }

.s7 .main-pic .s7-t { position: absolute; top: 0; left: 0; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-name: fadeOut; -moz-animation-name: fadeOut; -o-animation-name: fadeOut; animation-name: fadeOut; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s; }

.s7 .main-pic .s7-b { position: absolute; top: 0; left: 0; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-name: fadeOut; -moz-animation-name: fadeOut; -o-animation-name: fadeOut; animation-name: fadeOut; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s; }

.s7.on .main-pic .bg { -webkit-animation-duration: 2s; -moz-animation-duration: 2s; -o-animation-duration: 2s; animation-duration: 2s; /*animation-name: fadeInRight;*/ -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s; }

.s7.on .main-pic .s7-t { -webkit-animation-duration: 2s; -moz-animation-duration: 2s; -o-animation-duration: 2s; animation-duration: 2s; -webkit-animation-name: fadeInLeft; -moz-animation-name: fadeInLeft; -o-animation-name: fadeInLeft; animation-name: fadeInLeft; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; }

.s7.on .main-pic .s7-b { -webkit-animation-duration: 2s; -moz-animation-duration: 2s; -o-animation-duration: 2s; animation-duration: 2s; -webkit-animation-name: fadeInUp; -moz-animation-name: fadeInUp; -o-animation-name: fadeInUp; animation-name: fadeInUp; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; }

@media screen and (max-width: 1024px) { .s7 .main-pic { right: -80%; } }

@media screen and (max-width: 768px) { .s7 .main-pic { width: 100%; padding-top: 10%; }
  .s7 .main-pic .bg { width: 100%; }
  .s7 .main-pic img { width: 100%; } }

.s8 .main-pic { float: none; width: 70%; padding: 40px 0 0 0; margin: 0 auto -3%; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; /*animation-name: fadeOut;*/ -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0; -moz-animation-delay: 0; -o-animation-delay: 0; animation-delay: 0; }

.s8 .main-pic img { width: 100%; }

.s8.on .main-pic { -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; /*animation-name: fadeIn;*/ -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 1s; -moz-animation-delay: 1s; -o-animation-delay: 1s; animation-delay: 1s; }

@media screen and (max-width: 768px) { .s8 .main-pic { padding: 10% 0 0 0; } }

.s9 .main-pic { float: none; width: 100%; margin-left: -9%; padding-top: 40px; position: relative; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; /*animation-name: fadeOutLeft;*/ -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 4s; -moz-animation-delay: 4s; -o-animation-delay: 4s; animation-delay: 4s; }

.s9 .main-pic .stateCon { position: absolute; top: 40px; left: 0; width: 100%; height: 100%; }

.s9 .main-pic .stateCon img { position: absolute; top: 0; left: 0; width: 100%; }

.s9 .main-pic .stateCon img.pic01 { opacity: 0; }

.s9 .main-pic img { width: 100%; }

.s9 .main-pic .point { position: absolute; bottom: 0; left: 0; }

.s9.on .main-pic { -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 2s; -moz-animation-delay: 2s; -o-animation-delay: 2s; animation-delay: 2s; }

.s9.on .main-pic .init { -webkit-transition: all 1.5s ease-in-out !important; -o-transition: all 1.5s ease-in-out !important; -moz-transition: all 1.5s ease-in-out !important; transition: all 1.5s ease-in-out !important; -webkit-transition-delay: 1.5s !important; -moz-transition-delay: 1.5s !important; -o-transition-delay: 1.5s !important; transition-delay: 1.5s !important; }

.s9.on .main-pic .stateCon { -webkit-transition: all 2.5s ease-in-out; -o-transition: all 2.5s ease-in-out; -moz-transition: all 2.5s ease-in-out; transition: all 2.5s ease-in-out; -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; }

.s9.on .main-pic .stateCon .pic01 { opacity: 1; -webkit-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; transition: all 1s ease-in-out; -webkit-transition-delay: 2.5s; -moz-transition-delay: 2.5s; -o-transition-delay: 2.5s; transition-delay: 2.5s; }

.s9.on .main-pic .stateCon .pic02 { -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-name: flash4; -moz-animation-name: flash4; -o-animation-name: flash4; animation-name: flash4; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 1s; -moz-animation-delay: 1s; -o-animation-delay: 1s; animation-delay: 1s; }

.s9.on .point { -webkit-animation-duration: 5s; -moz-animation-duration: 5s; -o-animation-duration: 5s; animation-duration: 5s; -webkit-animation-name: flash2; -moz-animation-name: flash2; -o-animation-name: flash2; animation-name: flash2; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 2s; -moz-animation-delay: 2s; -o-animation-delay: 2s; animation-delay: 2s; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; }

@media screen and (max-width: 1210px) { .s9 .main-pic { width: 100%; margin-left: -11%; }
  .s9 .main-pic img { width: 100%; } }

@media screen and (max-width: 768px) { .s9 .main-pic { padding-top: 30px; }
  .s9 .main-pic .stateCon { top: 30px; } }

.s10 .main-pic { position: relative; margin: 0 auto; width: 25%; padding-top: 40px; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; /*animation-name: fadeOut;*/ -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s; }

.s10 .main-pic .init { position: absolute; opacity: 1; -webkit-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; transition: all 1s ease-in-out; }

.s10 .main-pic img { width: 100%; }

.s10.on .main-pic { -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; /*animation-name: fadeIn;*/ -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0; -moz-animation-delay: 0; -o-animation-delay: 0; animation-delay: 0; }

.s10.on .main-pic .init { opacity: 0; -webkit-transition: all 1.5s ease-in-out; -o-transition: all 1.5s ease-in-out; -moz-transition: all 1.5s ease-in-out; transition: all 1.5s ease-in-out; -webkit-transition-delay: 0.5s; -moz-transition-delay: 0.5s; -o-transition-delay: 0.5s; transition-delay: 0.5s; }

@media screen and (max-width: 768px) { .s10 .main-pic { padding-top: 10%; width: 40%; } }

.s11 { padding-bottom: 60px; }

.s11 .main-pic { position: relative; margin: 0 auto; padding-top: 40px; width: 60%; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; /*animation-name: fadeOut;*/ -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0; -moz-animation-delay: 0; -o-animation-delay: 0; animation-delay: 0; }

.s11 .main-pic .init { position: absolute; opacity: 1; -webkit-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; transition: all 1s ease-in-out; }

.s11 .main-pic img { width: 100%; }

.s11.on .main-pic { -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; /*animation-name: fadeIn;*/ -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0; -moz-animation-delay: 0; -o-animation-delay: 0; animation-delay: 0; }

.s11.on .main-pic .init { opacity: 0; -webkit-transition: all 1.5s ease-in-out; -o-transition: all 1.5s ease-in-out; -moz-transition: all 1.5s ease-in-out; transition: all 1.5s ease-in-out; -webkit-transition-delay: 0.5s; -moz-transition-delay: 0.5s; -o-transition-delay: 0.5s; transition-delay: 0.5s; }

@media screen and (max-width: 1024px) { .s11 { padding-bottom: 10%; }
  .s11 .main-pic { width: 60%; } }

@media screen and (max-width: 1024px) { .s11 .main-pic { padding-top: 10%; } }

.s12 { height: 580px; }

.s12 .left { display: table; height: 100%; float: left; }

.s12 .right { float: right; display: table; width: 40%; height: 100%; }

.s12 .right .w .c { position: relative; }

.s12 .right .w img { width: 100%; opacity: 0; }

.s12 .right .w img.imgIn01 { z-index: 5; -webkit-transform: translate(0, -25%) scale(1.3); -moz-transform: translate(0, -25%) scale(1.3); -ms-transform: translate(0, -25%) scale(1.3); -o-transform: translate(0, -25%) scale(1.3); transform: translate(0, -25%) scale(1.3); position: relative; }

.s12 .right .w img.imgIn02 { z-index: 6; position: absolute; top: 0; left: 0; }

.s12 .right .w img.imgIn03 { z-index: 7; position: absolute; top: 0; left: 0; }

.s12 .w { display: table-cell; vertical-align: middle; }

.s12 .t { font-size: 36px; color: #fff; font-weight: bolder; padding-bottom: 13px; }

.s12 .d { font-size: 16px; color: #fff; line-height: 2; opacity: 0.5; }

.s12 .d span { display: block; }

.s12 .more { display: block; margin-top: 60px; background: #E5003A; color: #fff; width: 200px; height: 40px; line-height: 40px; text-align: center; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; }

.s12.on .right .w .imgIn01 { opacity: 1; -webkit-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; transition: all 1s ease-in-out; -webkit-transform: translate(0, 0) scale(1); -moz-transform: translate(0, 0) scale(1); -ms-transform: translate(0, 0) scale(1); -o-transform: translate(0, 0) scale(1); transform: translate(0, 0) scale(1); }

.s12.on .right .w .imgIn02 { opacity: 1; -webkit-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; transition: all 1s ease-in-out; -webkit-transition-delay: 1.5s; -moz-transition-delay: 1.5s; -o-transition-delay: 1.5s; transition-delay: 1.5s; }

.s12.on .right .w .imgIn03 { opacity: 1; -webkit-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; transition: all 1s ease-in-out; -webkit-transition-delay: 2.5s; -moz-transition-delay: 2.5s; -o-transition-delay: 2.5s; transition-delay: 2.5s; }

@media screen and (max-width: 1023px) { .s12 { height: auto; padding-top: 10%; }
  .s12 .d span { display: inline; }
  .s12 .more { margin-top: 5%; }
  .s12 .left { width: 100%; float: none; }
  .s12 .right { width: 100%; float: none; }
  .s12 .right img { width: 100%; } }

@media screen and (max-width: 768px) { .s12 .t { font-size: 24px; }
  .s12 .d { font-size: 14px; }
  .s12 .more { font-size: 14px; } }

.s13 { padding: 60px 0; }

.s13 video { outline: none; border: none; width: 100%; height: 100%; }

.s13 img { width: 100%; }