@charset "utf-8";
@import url(common.css);
body { line-height: 1.5; font-size: 13px; background: #fff; font-family: "\5FAE\8F6F\96C5\9ED1", "Microsoft Yahei", tahoma,arial,"Hiragino Sans GB", "\5B8B\4F53"; }
body, h1, h2, h3, h4, p, ul, ol { margin: 0; }
ul, ol { padding-left: 0; list-style-type: none; }
h1, h2, h3, h4 { font-weight: normal; }
/*image with no-border*/
a img { border: 0; }
img { border: 0; }
html, body { width: 100%; height: 100%; -webkit-tap-highlight-color: rgba(0,0,0,0); }
a { text-decoration: none; }
.color1 { color: #ff6493; }
.l { float: left; }
.r { float: right; }
.cl { clear: both; }
.rel { position: relative; }
.abs { position: absolute; }
.fixed { position: fixed; }
/*块状元素水平居中*/
.auto { margin-left: auto; margin-right: auto; }
/*清除浮动*/
.fix { *zoom: 1; }
.fix:after { display: block; content: "clear"; height: 0; clear: both; overflow: hidden; visibility: hidden; }
/*基于display:table-cell的自适应布局*/
.cell { display: table-cell; *display: inline-block; width: 2000px; *width: auto; }
/*双栏自适应cell部分连续英文字符换行*/
.cell_bk { display: table; width: 100%; table-layout: fixed; word-wrap: break-word; }
/*单行文字溢出虚点显示*/
.ell { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
/*ie浏览器块状显示*/
.ie_dib { *zoom: 1; display: inline-block; *display: inline; }
/* 设为border-box */
*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.hasEm { font-size: 14px; background-size: cover !important; }
.pShow { display: block !important; }
.mShow { display: none !important; }

.home_area { overflow: hidden; }
header { width: 100%; position: fixed; top: 0; left: 0; z-index: 999; }
.section_group { position: relative; height: 100%; -webkit-transition: all 1000ms cubic-bezier(.86, 0, .07, 1); -moz-transition: all 1000ms cubic-bezier(.86, 0, .07, 1); -o-transition: all 1000ms cubic-bezier(.86, 0, .07, 1); -ms-transition: all 1000ms cubic-bezier(.86, 0, .07, 1); transition: all 1000ms cubic-bezier(.86, 0, .07, 1); }

@keyframes scrolling {
    0% { opacity: 0; top: 5px; }
    30% { opacity: 1; top: 10px; }
    100% { opacity: 0; top: 25px; }
}

.pagination { display: none; position: fixed; top: 50%; margin-top: -80px; right: 100px; width: 26px; z-index: 999; font-size: 14px; -webkit-border-radius: 13px; -moz-border-radius: 13px; -ms-border-radius: 13px; border-radius: 13px; }
.pagination li { width: 16px; height: 16px; cursor: pointer; margin: 8px auto; padding-top: 1px; position: relative; }
.pagination li span { display: block; height: 8px; width: 8px; margin: 4px auto; background: #fff; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; -ms-border-radius: 100%; border-radius: 100%; -webkit-transition: 500ms; -moz-transition: 500ms; -o-transition: 500ms; -ms-transition: 500ms; transition: 500ms; }
.pagination li aside { position: absolute; background: rgba(0,0,0,0.25); color: #fff; right: 140%; top: -4px; padding: 0 15px; white-space: nowrap; line-height: 1.9em; opacity: 0; height: 26px; line-height: 26px; border-radius: 1em; -webkit-border-radius: 1em; -moz-border-radius: 1em; -ms-border-radius: 1em; -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -o-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); -webkit-transition: .5s; -moz-transition: .5s; -o-transition: .5s; -ms-transition: .5s; transition: .5s; }
.pagination li:hover aside { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); }
.pagination .active span { width: 16px; height: 16px; margin: 0 auto; }
.pagination .active aside { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); }

section { width: 100%; height: 100%; overflow: hidden; position: relative; }
section .title_main { width: 280px; text-align: center; position: relative; margin: 80px auto 60px auto; padding: 0 0 50px 0; border-bottom: 1px solid #fff; opacity: 0; -webkit-transform: translate3d(0px, -150px, 0px); -moz-transform: translate3d(0px, -150px, 0px); -o-transform: translate3d(0px, -150px, 0px); -ms-transform: translate3d(0px, -150px, 0px); transform: translate3d(0px, -150px, 0px); }
section.current .title_main { opacity: 1; -webkit-transform: translate3d(0px, 0px, 0px); -moz-transform: translate3d(0px, 0px, 0px); -o-transform: translate3d(0px, 0px, 0px); -ms-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px); -webkit-transition: 600ms ease 600ms; -moz-transition: 600ms ease 600ms; -o-transition: 600ms ease 600ms; -ms-transition: 600ms ease 600ms; transition: 600ms ease 600ms; }
section.current .circle { -webkit-animation: circle 2s ease 1s infinite; -moz-animation: circle 2s ease 1s infinite; -o-animation: circle 2s ease 1s infinite; -ms-animation: circle 2s ease 1s infinite; animation: circle 2s ease 1s infinite; }
section.current .circle2 { -webkit-animation: circle2 2s ease 1s infinite; -moz-animation: circle 2s ease 1s infinite; -o-animation: circle 2s ease 1s infinite; -ms-animation: circle 2s ease 1s infinite; animation: circle2 2s ease 1s infinite; }
section.current .fade { -webkit-animation: fade 2s ease 1s infinite; -moz-animation: circle 2s ease 1s infinite; -o-animation: circle 2s ease 1s infinite; -ms-animation: circle 2s ease 1s infinite; animation: fade 2s ease 1s infinite; }
section.current .fade2 { -webkit-animation: fade2 1s ease 1s infinite; -moz-animation: circle 2s ease 1s infinite; -o-animation: circle 2s ease 1s infinite; -ms-animation: circle 2s ease 1s infinite; animation: fade2 1s ease 1s infinite; }
section.current .fade3 { -webkit-animation: fade3 2s ease-in 3s infinite; -moz-animation: circle 2s ease 1s infinite; -o-animation: circle 2s ease 1s infinite; -ms-animation: circle 2s ease 1s infinite; animation: fade3 2s ease-in 3s infinite; }
/*area_index css*/
.area_index { z-index: 1; }
.areabg { display: none; width: 100%; height: 100%; }
div#feature_list { width: 100%; height: 100%; overflow: hidden; position: relative; }
ul#tabs { position: absolute; z-index: 100; left: 50%; bottom: 30px; margin-left: -80px; }
ul#tabs li { float: left; width: 28px; height: 28px; margin: 0 15px; cursor: pointer; }
ul#tabs li a { display: block; width: 100%; height: 100%; background: url(../images/icon.png) no-repeat 0 -28px; }
ul#tabs li a.current { background: url(../images/icon.png) no-repeat 0 0; }
ul#output { width: 100%; height: 100%; position: relative; background: #171717; }
ul#output li { position: absolute; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; text-align: center; }
ul#output li img { height: 100%; }

.bg { position: relative; width: 100%; height: 100%; -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); -webkit-transition: 1s; -moz-transition: 1s; -o-transition: 1s; -ms-transition: 1s; transition: 1s; overflow: hidden; }
.current .bg { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }
.bg img { width: 100%; height: 100%; }
/*area_02 css*/
.area_02 { background: url(../images/bg2.jpg) no-repeat center center; z-index: 1; }
.area_02 .body_area { width: 490px; position: absolute; z-index: 100; top: 50%; left: 50%; margin-top: 80px; margin-left: -10px; }
.area_02 .body_area .advantage_txt { color: #c9c9c9; font-size: 18px; line-height: 32px; }
.area_02 .detail { margin: 30px 0 0 0; text-align: right; }
.detail a { display: inline-block; border: 1px solid #fff; border-radius: 30px; width: 200px; height: 50px; text-align: center; line-height: 50px; font-size: 16px; color: #fff; }
/*area_03 css*/
.area_03 { z-index: 1; background: url(../images/bg3.jpg) no-repeat center center; }
.area_03 .body_area { width: 1000px; position: absolute; z-index: 100; top: 50%; left: 50%; margin-top: -20px; margin-left: -500px; text-align: center; }
.area_03 .body_area .advantage_txt { color: #fff; font-size: 16px; line-height: 32px; }
.area_03 .detail { margin: 30px 0 0 0; }
/*footer css*/
footer { position: absolute; z-index: 100; bottom: 0; left: 0; }

@media screen and (max-width:1300px) {
    ul#output li { background-size: cover; }
    .area_02 { background: #212121 url(../images/bg2-1.jpg) no-repeat center center; }
    .area_02 .body_area { margin-top: 60px; }
    .area_02 .body_area .advantage_txt { font-size: 15px; line-height: 28px; }
    .area_02 .detail { margin: 20px 0 0 0; }
    .detail a { font-size: 14px; height: 40px; line-height: 40px; width: 150px; }
    .area_03 { background: #1d1d1d url(../images/bg3-1.jpg) no-repeat center -70px; }
    .area_03 .body_area { top: 290px; margin-top: 0; width: 900px; margin-left: -450px; }
    .area_03 .body_area .advantage_txt { font-size: 14px; line-height: 25px; }
    .area_03 .detail { margin: 20px 0 0 0; }
}

@media screen and (max-width:1100px) {
    .area_02 .body_area { width: 400px; }
    .area_03 .body_area { top: 290px; width: 800px; margin-left: -400px; }
}