body{font-family:'STHeiti','Microsoft Yahei',sans-Serif;background:#eee;}
header{
}
nav{
    float:right;
}
h1{
    float:left;
}
h1 a{
    display:inline-block;
    width:214px;
    height:49px;
    margin:25px 40px;
    background:url(../images/logo.png) no-repeat;
}
h1 a span{
    display:none;
}
.header-nav{
    float: left;
    margin-top:40px;
}
.header-nav:before{
    content:"";
    position: relative;
    top: -10px;
    left:-14px;
    float:left;
    width: 0;
    height: 0;
    border:12px solid transparent;
    border-left-width:8px;
    border-right-width:8px;
    border-bottom-color:#221816;
    margin: 3px;
    -webkit-transform:rotate(17deg);
    -moz-transform:rotate(17deg);
    -o-transform:rotate(17deg);
    -ms-transform:rotate(17deg);
    transform:rotate(17deg);
}
nav{
    margin:30px 40px;
}
nav>ul>li{
    position:relative;
    float:left;
    color:#221815;
    font-size:14px;
    line-height:1em;
    padding:10px 20px;
    cursor:pointer;
}
nav>ul>li:after{
    content:"";
    display:inline-block;
    width:1px;
    height:14px;
    position:absolute;
    top:10px;
    left:0;
    border-right: 1px solid #cbc2c0;
}
nav>ul>li:first-child:after{
    border-right: 0
}
.current{
    border-bottom:1px solid #221815;
}
.current span{
    color:#e6ae30;
}
nav li a{
    cursor:pointer;
}
li.unlink{
    cursor: not-allowed;
    color:#9d9c9c;
}
nav>ul>li a{
    color:#221815;
}
nav ul ul{
    line-height:2em;
    position:absolute;
    left:0;
    top: 30px;
    z-index:9999;
    background:#424242;
    color:#eee;
    padding:14px 0;
    white-space:nowrap;
    display:none;
}
nav ul ul.active{
    display: inline-block;
}
nav ul ul a{color:#eee;}
nav ul ul li:hover,nav ul ul li a:hover{color:#e6ae30;}
nav li li{position:relative;padding:0 20px}
nav li li ul{position:absolute;left:100%;top: -12px;background:#5c5c5c;}
li ul li.has-ul{
    
}
.panel{
    position: relative;
}
.panel>h2{
    font-size:30px;
    text-align:center;
    margin:30px 0;
}
span.blank{
    display:inline-block;
    width:40px;
}
span.blank2{
    display: inline-block;
    width: 10px;
}
span.blankln{
    display:block;
    margin:1em 0;
}
.service{
    padding:60px 0 100px;
    text-align:center;
}
.service a{
    display:inline-block;
    width: 24%;
    padding:20px 0;
    margin:0 20px;
}
.service a img{
    width:130px;
    -webkit-transition: all .1s ease-in;
    -moz-transition: all .1s ease-in;
    -o-transition: all .1s ease-in;
    -ms-transition: all .1s ease-in;
    transition: all .1s ease-in;
}
.service a:hover img{
    -webkit-transform:scale(1.1);
    -moz-transform:scale(1.1);
    -o-transform:scale(1.1);
    -ms-transform:scale(1.1);
    transform:scale(1.1);
}
.service a span{
    display:block;
    color:#e6ae30;
    margin: 1em 0;
    letter-spacing: 10px;
    position:relative;
    left:5px;
}
.service a span strong{
    display:inline-block;
    font-weight:normal;
    letter-spacing:0;
    margin-right:10px;
}
footer{
    padding:50px 0;
    background:#221e1f;
    color:#eee;
}
footer p,footer p a{
    color:#b2b2b2;
}
footer>div{
    padding:0 20px 0 90px;
    float:left;
    width:33%;
    display:inline-block;
    font-size:13px;
    line-height:2em;
}
footer>div h3{
    margin:5px 0 20px;
}
footer .has-border{
    border-right:1px solid #626262;
/*    width:33%; */
}
.copyright{
    background: #333;
    color: #aaa;
    padding:.7em 0;
    text-align: center;
    font-size: 12px;
}
/*caption*/
.caption{
    padding:90px 0;
}
.caption img{
   float:left;
   width:40%;   
   margin-left:5%;
}
.caption.reverse img{
    float:right;
    margin-right: 10%;
    margin-left:0;
    margin-top: 50px;
}
.caption h2,.caption p{
    width:40%;
    float:right;
    margin-right:10%;
}
.caption.reverse h2,.caption.reverse p{
    float:left;
    margin-left: 10%;
    width: 35%;
    margin-right:0;
    text-align:right;
}
.caption h2{
    color: #424242;
    font-size: 25px;
    white-space: nowrap;
    font-weight: 700;
    margin-bottom:30px;
}
.caption h2 span{
    display:block;
    color:#e6ae30;
}
.caption.center{
    text-align:left;
}
.caption.center>div{
    width:50%;
    float:left;
}
.caption.center p{
    float: none;
    margin-left:0;
    width: 80%;
    font-size:16px;
    line-height:1.7em;
}
.caption.center h3{
    width:80%;
    font-size:21px;
    margin:40px 0 20px;
}
.caption.center .images{
    margin-top:120px;
}
.caption.center h3 span{
    display:inline-block;
    background:#000;
    color:#fff;
    padding:0 10px;
    margin-left:8px;
}
.caption.center img{
    width:30%;
    margin: 3% 4%;
    border-radius:50%;
}
.caption.center img:nth-child(2n-1){
    margin-left: 22%;
}
/*list*/
.hard-list{
    margin-bottom:10px;
}
.hard-list>div{
    width:25%;
    float:left;
}
.hard-list>div .actions{
    position:relative;
    top:-10px;
}
/*form*/
form>p,form>div{margin:10px 0;}
form>p:first-child{margin-top:0;}
form a{
    color:#fffefe;
}
.actions{
    text-align:right;
}
.button{
    border: 1px solid #e6ae30;
    color:#e6ae30;
    background:#f6e5bf;
    display:inline-block;
    padding:8px 26px;
    cursor:pointer;
}
.button.primary{
    background:#e6ae30;
    color:#fffefe;
}
.button.disabled{
    background: #5c5c5c;
    border-color:#5c5c5c;
    color:#000;
    cursor: not-allowed;
}
.button.dark{
    background:#826a35;
    color:#fffefe;
}
label{
    vertical-align: middle;
}
input[type="radio"]{
    display:inline-block;
    width:95px;
    height:2em;
    background:#5c5c5c;
    border:1px solid #5c5c5c;
    vertical-align: middle;
    cursor:pointer;
    display: none
}
input[type="radio"]+label{
    display:inline-block;
    width:70px;
    position:relative;
    color:#eee;
    background:#5c5c5c;
    border:1px solid #5c5c5c;
    text-align:center;
    padding:8px 14px;
}
input[type="radio"]:checked+label{
    border:1px solid #e6ae30;
    color:#e6ae30;
}
input[type="radio"][disabled="disabled"]+label{
    background:#4c4c4c;
    border-style:dashed;
    color:#b2b2b2;
}
.otheroption{
    color:#b2b2b2;
}
input[type="radio"][name="color"]{
    width:30px;
    vertical-align: top;
}
input[type="radio"][name="color"]+label{
    width:18px;
    padding:9px 0;
    border:3px solid #5c5c5c;
}
input[type="radio"][name="color"]:checked+label:after{
    content:"";
    display:inline-block;
    position:absolute;
    left:-3px;
    top:-3px;
    z-index:9;
    width:22px;
    padding:11px 0;
    border:1px solid #5c5c5c;
    border-color:#e6ae30;
}
#color1+label{background:#fff}
#color2+label{background:#000}
#color3+label{background:#00a0e8}
#color4+label{background:#91c720}
#color5+label{background:#f19700}
#color6+label{background:#e30014}

input[type="checkbox"]{position:relative;display: none}
input[type="checkbox"]+span{
    display:inline-block;
    width:20px;
    height:20px;
    background:#5c5c5c;
}
input[type="checkbox"]+span+label{
    padding-left:25px;
    position: relative;
    left:-22px;
    width:10em;
    text-align: left;
    vertical-align: top;
}
input[type="checkbox"]:checked+span:after,#color7:checked+label:after{
    content:"√";
    position:absolute;
    color:#e6ae30;
    text-align:center;
    font-size:24px;
    line-height:20px;
}
#color7:checked+label:after{line-height: 0}
.m10{margin-left:10px;}
label{
    display:inline-block;
    width:17%;
    text-align:right;
}
input[type="text"],input[type="email"],textarea,input[type="tel"]{
    height:32px;
    width:82%;
    background:#5c5c5c;
    color:#eee;
    border:0;
    padding:8px 10px;
}
textarea.blank{
    color:#b2b2b2;
}
input[type="tel"]{
    width:45%;
}
/*select*/
.selectContainer{position:relative; width: 64%; padding: 0 15px;display:inline-block;background:#5c5c5c;vertical-align: middle;} 
.selectContainer .selectOption{min-width: 100%; display: block;line-height:32px; height:32px; white-space:nowrap; overflow:hidden;border:none; z-index:1000} 
.selectOption em{font-size:12px;}
.selectContainer .shows{width: 32px; height:22px; position:absolute; right:0; top:5px;
background:url(../images/xia.png) no-repeat center;background-size:55% auto;border-left:1px solid #e6ae30} 
.selectContainer ul{box-sizing:border-box;position:absolute; width:100.5%; top:33px; left:-1px; display:none;border:1px solid #b2b2b2;border-top:0;} 
.selectContainer.active{border:1px solid #b2b2b2;border-bottom-color:#656565;box-sizing:border-box;}
.selectContainer ul li{padding: 0 15px; line-height: 32px; width: 100%; background: #5c5c5c; cursor:pointer} 
.selectContainer ul li:hover{background:#4c4c4c} 
.selectContainer ul li:hover:after{
    content:"√";
    display:inline-block;
    color:#e6ae30;
    margin-left:20px;
}
.selectContainer ul.dis{display:block!important;} 
.selectContainer ul.undis{display:none !important;} 
.zIndex{z-index:10000!important} 
.selectContainer .gray{color:#DDD}

/*select over*/
.hr span{
    display:block;
    width:83%;
    height:10px;
    margin-bottom:10px;
    float:right;
    border-bottom:1px solid #5c5c5c;
}

#code,#mscode{
    width:26%;
}
#code+img{height:32px;margin-left:14px;vertical-align: bottom;}
#code+img+a,#agree-argu+label a{text-decoration:underline;margin-left:5px;}
.getcode{
    margin-top:10px;
}
a.links{
    text-decoration: underline;
}
textarea{
    vertical-align: top;
    height: 80px;
    resize: none;
}
/*overlay*/
.overlay{
    position:fixed;
    top:3px;
    right:-110%;
    background:#424242;
    color:#fffefe;
    width:80%;
    padding: 70px 50px 50px;
    z-index:9;
}
.overlay .product,.overlay form{
    float:left;
}
.overlay .product{
    width:39%;
    padding-right:50px;
}
.overlay .close{
    position:absolute;
    right:30px;
    top:15px;
    color:#ecf0f1;
    width:20px;
    height:20px;
    border-radius:50%;
    border:1px solid #ecf0f1;
    text-align:center;
    line-height:20px;
    font-size:12px;
}
.overlay .title{
    font-size:16px;
    margin-bottom:1em;
    position: absolute;
    top: 20px;
    color: #fffefe;
}
.product h3{
    margin:1em 0;
}
.product img{
    width:100%;
}
.product p{
    font-size:13px;
    margin:1em 0;
    color:#cecece;
}
.overlay form{
    width:60%;
    border-left:1px solid #898989;
    padding-left:50px;
    font-size:13px;
}
#prev-step{
    display: none;
}
.succeed-info{
    position:absolute;
    top:0;
    right:0;
    text-align:center;
    background:rgba(0,0,0,.5);
    width:100%;
    height:100%;
    line-height:3em;
    font-size:14px;
    z-index:10;
    display: none;
}
.succeed-info .suc-title{
    font-size:24px;
    color:#e6ae30;
    margin-top:20%;
}
.succeed-info p{
    width:60%;
    margin:0 auto;
    text-align:center;
}
.succeed-info .sure{
    line-height:1em;
    padding:8px 50px;
}
/*aside*/
aside{
    position:fixed;
    top:50px;
    width:auto;
    display: none
}
.left-aside{
    left:1%;
    text-align:right;
}
aside a{
    color:#424242;
    font-size:13px;
}
aside li{
    position:relative;
    line-height:1.5em;
}
aside li.cur-panel a{
    color:#b2b2b2;
}
aside li a:after{
    content:"";
    position:absolute;
    left:110%;
    top:-3px;
    width: 0;
    height: 0;
    border:10px solid transparent;
    border-left-width:6px;
    border-right-width:6px;
    border-bottom-color:#221816;
    -webkit-transition:all .2s linear;
    -moz-transition:all .2s linear;
    -trans-transition:all .2s linear;
    -ms-transition:all .2s linear;
    -o-transition:all .2s linear;
    transition:all .2s linear;
}
aside li.cur-panel a:after{
    border-bottom-color:#e6ae30;
    -webkit-transform:rotate(-17deg);
    -moz-transform:rotate(-17deg);
    -o-transform:rotate(-17deg);
    -ms-transform:rotate(-17deg);
    transform:rotate(-17deg);
    -webkit-transform-origin:60% 80%;
    -moz-transform-origin:60% 80%;
    -o-transform-origin:60% 80%;
    -trans-transform-origin:60% 80%;
    -ms-transform-origin:60% 80%;
    transform-origin:60% 80%;
}
.right-aside{
    text-align:left;
    right:1%;
    top: 70px;
    padding: 1em;
    border: 1px solid #000;
    background: rgba(238,238,238,.8);
    display: inline-block;
}
.right-aside .button{
    margin:.5em 0;
    font-size:1.2em;
    text-decoration: none;
}
.right-aside .under{
    display: block;
    text-align: center;
    color: #000;
    font-size: 12px;
    line-height: 12px;
}
.right-aside div a{
    color:#f1b657;
    text-decoration:underline;
}
.right-aside div p{
    margin-top:18px;
}
.right-aside div{
    padding:0 10px;
    font-size:15px;
}
.incoming{
    font-size: 64px;
    padding-left: 294px;
    line-height: 500px;
    color: #222;
    font-style:italic;
}
.incoming span{
    color: #e6ae30;
    padding:0;
}
/* diy-form */
.diy-form{
    width:960px;
    margin:70px auto;
}
.diy-form h2{
    border-bottom:1px solid #000;
    padding:5px 0;
    margin:40px 0;
}
.diy-form h2:before{
    content:"";
    display:inline-block;
    width:10px;
    height:10px;
    background:#000;
    margin-right:10px;
}
.diy-form .link{
    color:#5C5C5C;
}
.diy-form .selectContainer{
    background:#fff;
    color:#4C4C4C;
    border:1px solid #ccc;
}
.diy-form .selectContainer .gray{
    color:#4C4C4C;
}
.diy-form .selectContainer ul li{
    background:#fff;
}
.diy-form input[type="text"],
.diy-form input[type="email"],
.diy-form textarea,
.diy-form input[type="tel"]{
    width:64%;
    background:#fff;
    color:#4c4c4c;
    border:1px solid #ccc;
}
.diy-form input[type="radio"]+label{
    background:#fff;
    border-color:#ccc;
    color:#4c4c4c;
}
.diy-form input[type="radio"]:checked+label{
    border-color:#E6AE30;
    color:#E6AE30;
}
.diy-form input[type="radio"][disabled="disabled"]+label{
    background:#ccc;
    color:#eee;
    border:1px dashed #aaa;
    cursor:not-allowed;
}