@charset "gb2312";
/* CSS Document */

*{ margin:0; padding:0; border:0; border:none;font-family: "Microsoft YaHei";}
ul,ol li{ list-style:none;}
table{border-collapse: collapse;}
.clear { clear:both; font-size:0; height:0; overflow:hidden;}
.clearfix:after{content: '';display: block;clear:both;}
.clearfix{zoom:1;}
a { cursor: pointer; text-decoration: none;}
a:link, a:visited { text-decoration:none;}
a:hover { text-decoration:underline;}
::-webkit-input-placeholder {color:#666;}
:-moz-placeholder {color:#666;}
::-moz-placeholder {color:#666;}
:-ms-input-placeholder {color:#666;}
.hide,.h{display: none !important;}
.r{ float:right;}
.l{float: left;}
.common{width: 1200px;margin: 0 auto;}
.con{ display:none;}

.header{width: 100%;height: 47px;background: #fff;}
.header .common{ font-size:16px;}
.header .common a{ color:#333;}
.logo{display: inline-block;width: 112px;height: 33px;background: url('http://statics.eoffcn.com/statics/images/index/netLogo.png'); vertical-align:-3px;}
.tel{width: 301px;height: 33px; display:block;background: url('http://statics.eoffcn.com/statics/images/public/phone.jpg') no-repeat 0 8px;}

.banner{
    width: 100%;
    height: 545px;
    background:url(../images/banner.jpg) no-repeat top center;
    min-width: 1200px;
}
.m1{
    width: 100%;
    height:1240px;
    background:url(../images/m1_bg.jpg) no-repeat top center;
    min-width: 1200px;
}
.m1 .pic01{
    width: 1180px;
    height: 354px;
    margin: 0 auto;
    display: block;
    padding-top: 119px;
}
.m1 .btns{
    width: 1192px;
    margin:10px auto ;
}
.m1 .btns li{
    float: left;
    width: 288px;
    height: 70px;
    margin: 0 5px;
    font-size: 22px;
    color: #fff;
    text-align: center;
    line-height: 70px;
    font-weight: bold;
    border-radius: 10px;
    cursor: pointer;

}
.m1 .btns li a{
    color: #fff;
}


.m1 .btns li.li2{
    background: #28a7ff;
    background: -moz-linear-gradient(top,  #28a7ff 0%, #4985ff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#28a7ff), color-stop(100%,#4985ff));
    background: -webkit-linear-gradient(top,  #28a7ff 0%,#4985ff 100%);
    background: -o-linear-gradient(top,  #28a7ff 0%,#4985ff 100%);
    background: -ms-linear-gradient(top,  #28a7ff 0%,#4985ff 100%);
    background: linear-gradient(to bottom,  #28a7ff 0%,#4985ff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#28a7ff', endColorstr='#4985ff',GradientType=0 );
}
:root .m1 .btns li.li1{filter:none;}


.m1 .btns li.li1{
    background: #28a7ff;
    background: -moz-linear-gradient(top,  #28a7ff 0%, #0b64c8 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#28a7ff), color-stop(100%,#0b64c8));
    background: -webkit-linear-gradient(top,  #28a7ff 0%,#0b64c8 100%);
    background: -o-linear-gradient(top,  #28a7ff 0%,#0b64c8 100%);
    background: -ms-linear-gradient(top,  #28a7ff 0%,#0b64c8 100%);
    background: linear-gradient(to bottom,  #28a7ff 0%,#0b64c8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#28a7ff', endColorstr='#0b64c8',GradientType=0 );
}
:root .m1 .btns li.li1{filter:none;}



.m1 .btns li.li3{
    background: #7f53fc;
    background: -moz-linear-gradient(top,  #7f53fc 0%, #5c23d2 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7f53fc), color-stop(100%,#5c23d2));
    background: -webkit-linear-gradient(top,  #7f53fc 0%,#5c23d2 100%);
    background: -o-linear-gradient(top,  #7f53fc 0%,#5c23d2 100%);
    background: -ms-linear-gradient(top,  #7f53fc 0%,#5c23d2 100%);
    background: linear-gradient(to bottom,  #7f53fc 0%,#5c23d2 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7f53fc', endColorstr='#5c23d2',GradientType=0 );
}
:root .m1 .btns li.li1{filter:none;}



.m1 .btns li.li4{
    background: #17d1bc;
    background: -moz-linear-gradient(top,  #17d1bc 0%, #07948b 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#17d1bc), color-stop(100%,#07948b));
    background: -webkit-linear-gradient(top,  #17d1bc 0%,#07948b 100%);
    background: -o-linear-gradient(top,  #17d1bc 0%,#07948b 100%);
    background: -ms-linear-gradient(top,  #17d1bc 0%,#07948b 100%);
    background: linear-gradient(to bottom,  #17d1bc 0%,#07948b 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#17d1bc', endColorstr='#07948b',GradientType=0 );
}
:root .m1 .btns li.li1{filter:none;}

.m1 .btns li.active{
    background: #fed94a;
    background: -moz-linear-gradient(top,  #fed94a 0%, #f79515 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fed94a), color-stop(100%,#f79515));
    background: -webkit-linear-gradient(top,  #fed94a 0%,#f79515 100%);
    background: -o-linear-gradient(top,  #fed94a 0%,#f79515 100%);
    background: -ms-linear-gradient(top,  #fed94a 0%,#f79515 100%);
    background: linear-gradient(to bottom,  #fed94a 0%,#f79515 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fed94a', endColorstr='#f79515',GradientType=0 );
}
:root .m1 .btns li.li1{filter:none;}

.m1 .box{
    width: 1180px;
    height: 649px;
    background:url(../images/m1_bot.png) no-repeat top center;
    margin: 0 auto;
}

.m1 .box .h2_box{
    padding-top: 47px;
    width: 400px;
    height: 40px;
    font-size: 26px;
    color: #fff;
    text-align: center;
    line-height: 40px;
    margin: 0 auto;
}
.m1 .box .h2_box h2{
    display: none;
}
.m1 .box .h2_box h2.show{
    display: block;
}

.interaction{
    width: 1200px;
    text-align: center;
    padding-top: 300px;
}
.m1 .box input {
    display: inline-block;
    margin: 0 10px;
    height: 48px;
    border: 1px solid #d9d9d9;
    color: #818a92;
    font-size: 16px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    text-indent: 20px;
}

.m1 .box select {
    width:180px;
    display: inline-block;
    margin: 0 10px;
    height: 48px;
    border: 1px solid #d9d9d9;
    color: #818a92;
    font-size: 16px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}
.m1 .box input.wrong {
    border: 1px solid #e50112;
    background: #fff4f5;
}
.m1 .box input[name=phone] {
    width: 260px;
}
.m1 .box input[name=validate] {
    width: 160px;
}
.m1 .box #img {
    display: inline-block;
    height: 50px;
    margin-left: -18px;
    margin-right: 20px;
}
.m1 .box .submit {
    display: inline-block;
    line-height: 48px;
    width: 218px;
    background: #ffe72f;
    border: 1px solid #ed9b1b;
    color: #000;
    font-size: 24px;
    text-align: center;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    vertical-align: top;
}
.list li{
    display: none;
    width: 1028px;
    height: 118px;
    border: 2px solid #515151;
    border-radius:30px;
    background: #fff;
    margin:40px auto 0;
    line-height: 118px;
    text-align: center;
}
.list li.show{
    display: block;
}

.list li b{
    font-size: 34px;
    color: #333;
    font-weight: bold;
    display: inline-block;
}


.list li p{
    padding: 0 40px;
    height: 54px;
    background: #8c44f8;
    color: #fff;
    text-align: center;
    font-size: 24px;
    display: inline-block;
    line-height: 54px;
    border:1px solid #333;
    margin-left: 30px;
    border-radius:50px;
}

.m2{
    width: 100%;
    height:917px;
    background:url(../images/m2_bg.jpg) no-repeat top center;
    min-width: 1200px;
}

.m2 h2{
    width: 405px;
    height: 66px;
    font-size: 26px;
    padding-top:184px;
    text-align: center;
    margin: 0 auto;
}
.m2 .common{
    position: relative;
    height: 917px;
}
.m2 .buy{
    width: 288px;
    height: 75px;
    position: absolute;
    bottom:464px;
    right:136px;
}
.m2 .buy2{
    display: block;
    width: 288px;
    height: 75px;
    position: absolute;
    right:136px;
    bottom:146px;
}


.m3 {
    padding-bottom: 50px;
}
.m3 .common{
    width: 1212px;
    margin: 0 auto;
}

.m3 .common .links{
    width: 610px;        
    margin: 0 auto;
    margin-top: 20px;
}

.m3 .common .links a{
    width: 141px;
    height: 53px;
    display: block;
    background: #4079fe;
    font-size: 24px;
    text-align: center;
    line-height: 53px;
    float: left;
    margin: 0 5px 10px;
    border-radius: 10px;
    color: #fff;
}
.m3 .common .links a:hover{
    background: #ffaa45;
    color: #000;
    text-decoration: none;
}


.copyRight,.offcnCopy{ background:#444546;
    min-width: 1200px;}
.offcnCopy{padding:45px 0 110px 0; line-height:32px; color:#aaa; text-align:center;}
.offcnCopy.normalPadding{padding-bottom: 45px;}
.offcnCopy a{color:#aaa;}
.offcnCopy a:hover{color:#e00;}


.sidebar{
    height:505px;
    width:150px;
    left:0px;
    position: fixed;
    bottom: 50px;
    margin-top: -225px;
    z-index: 1000;
}
.sidebar.inactive {
    width: 50px;
    height: 250px;
}
.sidebar .open {

}
.sidebar .open .s-header {
    height: 74px;
    background: url("../images/sidebar-h.png") top center no-repeat;
}
.sidebar .open .s-tail {
    position: relative;
    height: 41px;
    background: url("../images/sidebar-t.png") top center no-repeat;
}
.sidebar .open .s-tail .close_btn {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 3px;
    left: 50%;
    margin-left: -15px;
}
.sidebar .open .s-body {
    padding: 20px 0;
    background: rgba(0, 0, 0, 0.6);
}
.sidebar .open .s-body > li {
    display: table;
    width: 136px;
    height: 40px;
    margin: 0 auto 10px;
}
.sidebar .open .s-body > li:last-child {
    margin-bottom: 0;
}
.sidebar .open .s-body > li a {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    color: #fff;
    font-size: 14px;
}
.sidebar .open .s-body > li.tp-1 a {
    background: #f98802;
}
.sidebar .open .s-body > li.tp-2 a {
    background: #2c9277;
}
.sidebar .open .s-body > li.tp-3 a {
    background: #965ac2;
}
.sidebar .open .s-body > li.tp-4 a {
    background: #429c3a;
}
.sidebar .open .s-body > li.tp-5 a {
    background: #f94600;
}
.sidebar .open .s-body > li.tp-6 a {
    background: #d82830;
}
.sidebar .close{
    width:50px;
    height:250px;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    /*margin-top: 200px;*/
}
.sidebar .close .open_btn{
    height: 44px;
    height:250px;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    cursor: pointer;
}