@charset "utf-8";
body{ color:#fff; background:#FDFCF4; overflow:hidden; font-family: arial; font-size: 20px; overflow-y: auto\0; *overflow-y: auto;-webkit-transition: all 0.6s ease-out;-moz-transition: all 0.6s ease;-o-transition: all 0.6s ease;}
html{ background: #FDFCF4}
/*section*/
.header{ z-index: 2;text-align: center; width: 100%; vertical-align: middle;}
.p1title{ display: none; width: 280px; height: 192px; left: 50%; margin-left: -140px; top: 50%; margin-top: -90px;font-size: 18px; color: #e6b636; display: block; *display:block; position: relative\0; }
.scrolltip{ bottom: 50px; width: 40px; height: 19px; left: 50%; margin-left: -20px;}
.p1line{z-index: 100000000; height: 1135px; height:243px; top: 50%; margin-top: -70px; left: 50%; margin-left: -567px}
.backtotop{ width: 56px; height: 56px; background: url(../images/top.png) right top no-repeat; position:fixed; right: 60px; bottom: 0px; z-index: 2; display: none}
.backtotop:hover{ background: url(../images/top.png) left top no-repeat; cursor: pointer;}
/*.header img{ margin-top: -100px;}*/
.logo{ width: 157px; height: 43px; top:90px; left:8%; z-index: 10;}
.logo img{ position: absolute;}
.section{ width: 100%; height:100%; display: block; position:relative;}
.section .article{ position: relative;}
.section .article .sec-header{height: 100px; left: 0; z-index: 10;  top: 50%; margin-top: -100px; width: 30%; padding: 0 8%;}
.p2{font-size: 15px; color:#5c5c5c;line-height: 30px; font-family: arial;}
.section .article .content{width:45%; margin-right: 15%;  overflow: hidden; min-width:530px;  position:relative; float: right; overflow: hidden; padding-left: 5%; z-index: 11 }
.a1 .content;.a2 .content{ height: auto;}
.a3 .content{height: 900px}
.a2 .sec-header{filter:alpha(opacity=0);-moz-opacity:0;opacity: 0; /*opacity: 1\9*/; position: fixed; /*position: absolute\9*/}
.a3 .sec-header{ display: none}
.sec-header p:first-child{ font-size: 28px; line-height: 50px;}
.a1 .sec-header p:first-child{color:#31809d}
.a2 .sec-header p:first-child{color:#c06f14}
.bg{ width: 100%; height: 100%; background: url(../images/body-bg.png) repeat}
.bg2{ width: 100%; height: 100%; background: url(../images/body-bg.png) repeat; display: none}
ul.scrollto{ position:fixed; right:20px; height:150px; width:20px; display:block; z-index:1000; top:50%; margin-top:-75px;}
.stli{background:url(../images/right-btn.png) 6px 6px no-repeat;  width:20px; height:20px;  margin-bottom:20px;filter: alpha(opacity=100);-moz-opacity:1.0;opacity: 1.0; float:left; }
.st01{ position:absolute; left:3px; top:0px;}
.st02{ position:absolute; left:3px; top:30px;}
.st03{ position:absolute; left:3px; top:60px;}
.st04{ position:absolute; left:3px; top:90px;}
ul.scrollto li{ cursor:pointer; }
ul.scrollto li:hover{ background:url(../images/right-btn.png) 7px -19px no-repeat;}
.stact{width:20px; height:20px; background:url(../images/right-btn.png) 7px -19px no-repeat;  margin-bottom:20px;}
#scrolltip{ position: absolute; width: 40px; height: 19px; bottom: 50px; left: 50%; margin-left: -20px;}

/*p2*/
.p2-list{ margin-bottom: 640px; margin-top: 100px;}
.p2-list li{ width: 85%; height: auto;  margin-bottom: 70px; margin-left:15%; border-bottom: 1px dashed #ababab; position: relative; padding-bottom: 70px;}
.p2-list li .num{ width: 51px; height: 51px; position: absolute; background: url(../images/p2-circle.png) no-repeat; left: -80px; top: 4px; padding:7px 17px; font-size: 28px; color: #e4f5f4}
.p2-list li .p2title{ font-size: 29px; color: #31809d; line-height: 36px; margin-bottom: 25px;}
.p2-list li .p2titleen{font-size: 18px; color: #3eb1d2; margin-bottom: 5px;}
.p2-list li p:last-child{ font-size: 15px; color: #545454; padding-right: 20%; margin-top: 3px; line-height: 25px;}
.p2-list li .unfold{ width: 100px; background: #414141; cursor: pointer; padding:5px 30px; color: #fff; font-size: 14px;  -moz-border-radius: 5px;  -webkit-border-radius: 5px;   border-radius:5px;}
.p2-list li .unfold:hover{ background: #666}

/*p3*/
.a2 .sec-header span{ z-index: 1; top:70px;}
.p3-list{ margin-bottom: 280px;}
.p3-list li{ width: 85%; height: auto;  margin-bottom: 10px; margin-left:15%;  padding-bottom: 40px;}
.p3-list li .figure{ position: relative; height: 240px; margin-top: 20px; width: 100%;}
.p3-list .p3title{ font-size: 24px; color: #313131}
.p3-list .p3titleen{ font-size: 16px; color: #a9a9a9; margin-bottom: 30px;}
.a2 .content .racks{ position:relative;}
.a2 .content .rack{ width: 180px; height: 28px; border: 1px solid #3695a3; display: inline-block; position: relative;  }
.a2 .content .rack .square{ background: #3695a3; width: 4px; height: 14px;margin: 7px 0 7px 5px; display: inline-block; float: left;}
.a2 .content .rack .square:first-child{ margin-left: 10px;}
.a2 .content .racks #lock1{ position: absolute; top:-14px; left: 105px;}
.a2 .content .racks #lock2{ position: absolute; top:-14px; left: 290px;}
/*.a2 .content .racks:hover .rack:nth-child(1) .light{
-webkit-animation-name: rack-light-red;
-moz-animation-name: rack-light-red;
-o-animation-name: rack-light-red;
animation-name: rack-light-red;
-o-animation-delay: .25s;
-moz-animation-delay: .25s;
-webkit-animation-delay: .25s;
animation-delay: .25s;
}*/

.p3-list li:nth-child(3){ border-bottom:1px dashed #ababab; margin-bottom: 130px; padding-bottom: 100px;}
.p3-list li:nth-child(5){ margin-bottom: 100px; margin-top: 30px}
.p3-list li:nth-child(6){ padding-bottom: 50px; border-bottom:1px dashed #ababab; margin-bottom: 120px;}
.p3-list li:nth-child(7){ margin-bottom: 50px;}
.p3-list li:nth-child(9) #line{ position: absolute; top:25px; left: 30px;}

.a2 .content .rack .light{
/*-o-animation-duration: .5s;
-moz-animation-duration: .5s;
-webkit-animation-duration: .5s;
animation-duration: .5s;
-o-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;*/
float: right;
margin: 10px 5px 8px 3px;
width: 9px;
height: 9px;
background: #3695a3;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
border-radius: 150px;
-o-transition: all .3s linear;
-moz-transition: all .3s linear;
-webkit-transition: all .3s linear;
transition: all .3s linear;
}

/*p4*/
.a3 .sec-header p:first-child{ margin-top: 10px;}
.a3 .sec-header a{ float: left;  text-decoration: none; color:#2c2c2c; height: 40px; line-height: 40px; text-align: center; width: 45%; margin-top: 30px; -webkit-transition: all 0.2s ease-out;-moz-transition: all 0.2s ease;-o-transition: all 0.2s ease; font-size: 15px;}
.a3 .sec-header a:first-child{ background: #e8e6a2;margin-right: 20px;}
.a3 .sec-header a:first-child:hover{background: #fff}
.a3 .sec-header a:last-child{ background: #fafaea}
.a3 .sec-header a:last-child:hover{background: #fff}
.a3 .content{ text-align: center; position:relative; padding-left: 5%}
.a3 .mac{ position: absolute; top: 50%; margin-top: -192px; width: 636px; padding-left: 15%; text-align: left;}
.a3 .btn { cursor:  pointer;}
.a3 .tryoutbox{ width: 100%; height: 400px; position: absolute; top: 50%; margin-top: -200px;  text-align: left; padding-left: 15%;display: none }
.a3 .contactbox{width: 100%; height: 500px; position: absolute; top: 50%; margin-top: -250px;  text-align: left; padding-left: 15%; display: none}
.a3 .p3tip{ margin-bottom: 20px;}
#c_name,#c_mobile{ width: 120px;}
#c_email,#c_company{ width: 240px;}
.a3 input[type="text"]{ background: none; border-bottom: 1px solid #fff; border-top:none; border-left :none; border-right: none;color: #717171; font-size: 14px; height: 35px; line-height: 20px; margin: 30px 10px 20px 0 ; padding: 2px; outline: none;}
.a3 input:focus{ color: #fff;}
.a3 input[type="button"]{ width: 140px; height: 40px; background: #fafaea; border:none; font-size: 15px; line-height: 40px; margin-top: 0px;}
.a3 input[type="button"]:hover{ background: #fff; cursor: pointer;}
.a3 textarea{ width: 340px; max-width: 340px; max-height: 100px; height: 100px; padding:10px;  background: none; border: 1px solid #fff; resize:none; outline:none; color:#717171; font-size: 14px;}
.a3 textarea:focus{ color: #fff;}
.p3c1,.p3c2{ font-size: 15px; color: #4a4a49; margin-top: 30px;}
.p3c1 samp{ color: #e8e6a2; font-size: 26px; line-height: 32px; font-family: arial}
.p3c2 samp a{ color: #e8e6a2; font-size: 22px; line-height: 26px;font-family: arial; text-decoration: none;}
.p3c2 samp a:hover{ color: #fff;}
.tip,.tipd{ font-size: 14px; height: 20px; margin-top: 10px;}

@media screen and (max-width:1680px) {
.mac img{ width: 540px;}
}

@media screen and (max-width:1400px) {
.mac img{ width: 450px}
}

 
/* Tabled Portrait */
@media screen and (max-width: 1010px) {
/*.a2 .sec-header,.a3 .sec-header,.a4 .sec-header{filter:alpha(opacity=100);-moz-opacity:1;opacity: 1;}*/
/*.figure01{ margin-top: 3%; width: 90%; padding: 0 5%}*/

.logo{ display: none}
.header{ position:relative;}
.p1line{ display: none}
.section .article .sec-header{height: 130px; z-index: 1;  top:0; margin-top:0px; padding: 5%; width:100%; position:static; float: left;}
.section .article .content{ width:100%; position:static; float: left; padding-left:0;}
.p3bg1,.p3bg2,.p3bg3{ display: none}
.a3 .tryoutbox,.a3 .contactbox,.a3 .content .mac{ position:relative; float: left; margin-top: 0px; top: 0; }
/*.a3{background: url(../images/body-bg.png) repeat}*/
.p3-list li{ width: 90%; margin: 0 5%;}

/*.figure02-img{width: 100%; text-align: center;; height: 392px;  position:static; margin:10% auto;}
.figure02-text{ width: 90%; max-width: 1010px; height: 150px; position: static; margin-top: 20px; padding: 0 5%}
.figure03-bg{ height: 1291px; top:57%; left: 0px;}*/
}