body, p, ul { margin: 0; padding: 0; }
body { background: #f9f9f9 url(../images/thinkmail/bg.gif); font: 12px 'Microsoft YaHei', Arial, SimSun; }
ul, ol { list-style: none outside none; }
.hide { display: none !important; }
a, a img { border: 0 none; }
/*clearfix*/
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; overflow: hidden; }
.clearfix { *zoom:1; /* IE < 8 */
}
/*头部*/
.topban { position: relative; height: 781px; background: url(../images/thinkmail/ban.jpg) no-repeat center center; }
.topban .box, .nav { width: 1000px; margin-left: auto; margin-right: auto; }
/*box*/
.box { padding-top: 30px; }
.box h1{ margin-bottom:50px;}
.box-lt { float: left; width: 610px; padding-top:50px}
.box-rt { float: right; width: 272px; }
.box-rt2 { float: right; width: 393px; margin-top: 150px; }
.box-rt3 { float: right; width: 458px; margin-top: 150px; }
.box-rt img, .box-rt2 img { width: 100%; -webkit-animation: slideDown .8s ease-in-out 0s 1; -moz-animation: slideDown .8s ease-in-out 0s 1; -o-animation: slideDown .8s ease-in-out 0s 1; animation: slideDown .8s ease-in-out 0s 1; }
.box-rt img, .box-rt3 img { width: 100%; -webkit-animation: slideDown .8s ease-in-out 0s 1; -moz-animation: slideDown .8s ease-in-out 0s 1; -o-animation: slideDown .8s ease-in-out 0s 1; animation: slideDown .8s ease-in-out 0s 1; }

.m1 { float: left; margin-top:12px;}
.m2 { margin-top: 30px; }
.code { -webkit-animation: showopacity .9s ease-in-out 0s 1; -moz-animation: showopacity .9s ease-in-out 0s 1; -o-animation: showopacity .9s ease-in-out 0s 1; animation: showopacity .9s ease-in-out 0s 1; }
.font { -webkit-animation: showopacity .9s ease-in-out 0s 1; -moz-animation: showopacity .9s ease-in-out 0s 1; -o-animation: showopacity .9s ease-in-out 0s 1; animation: showopacity .9s ease-in-out 0s 1; }
/*slin*/
.slin { float: left ; border-radius: 5px; text-align: center; padding: 35px 30px 20px 30px; width: 175px; background: rgba(0, 0, 0, 0.3); filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#4c000000', EndColorStr='#4c000000');
    zoom: 1; }
:root .slin { filter: none\9; }/*for IE9*/
.slin img { vertical-align: top; width: 100%; }
.slin p { font-size: 20px; color: #fff; padding-top: 15px; line-height:30px;}
/*version*/
.version { padding-top: 0; width:225px; float:left; margin-left:25px; }
.version li { float: left; width: 100%;  margin-bottom:22px;}
.version li a{ display:block; line-height:74px; height:74px; width:100%; font-size:20px; color:#fff; text-decoration:none; cursor:pointer;border-radius: 6px;}
.version li a img{ display:inline-block; vertical-align:middle; margin-right:14px; margin-left:14px;position: relative;top: -2px;}
.version li a em{ font-style:normal; display:inline-block; width:150px; text-align:left}
.i-dl1{ background:#7d87d6; border:1px solid #7779cc;}
.i-dl2{ background:#77d17d;border:1px solid #6dc077;}
.i-dl3{ background:#53b2e9;border:1px solid #33a6e9;}
.i-dl5{ background:#E79E35;border:1px solid #D58E28;}
.i-dl6{ background:#F67A3D;border:1px solid #E4672A;}
.i-dl7{ background:#EC5555;border:1px solid #DD4343;}

a.i-dl1:hover{background:#5f6fd7; border:1px solid #5d6bd6;}
a.i-dl2:hover{background:#46d150; border:1px solid #3bbf4e;}
a.i-dl3:hover{background:#2fa5e9; border:1px solid #4e9edb;}
a.i-dl5:hover{background:#F39A1B; border:1px solid #D58E28;}
a.i-dl6:hover{background:#F76118; border:1px solid #E4672A;}
a.i-dl7:hover{background:#EE2B2B; border:1px solid #DD4343;}
.spaLine{ position:relative; z-index:1; margin-top:-15px;}

/*nav*/
.nav-wrap { width: 100%; height: 90px; position: absolute; left: 0; top: 0; background: rgba(0, 0, 0, 0.7); filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#b2000000', EndColorStr='#b2000000');zoom: 1; }
:root .nav-wrap { filter: none\9; }/*for IE9*/
.nav li { width: 50%; height: 90px; overflow: hidden; float: left; text-align: center; opacity: 0.6; filter: alpha(opacity=60); zoom: 1; }
.nav li img { vertical-align: top; margin-top: 26px; }
.nav li.cur { background: #29a7e1; opacity: 1; filter: alpha(opacity=100); zoom: 1; }
.nav li a{ display:block; width:100%; height:90px;}
.main { padding-top: 30px; }
.combox { padding: 60px 0 0 0 ; width: 864px; margin-left: auto; margin-right: auto; position:relative; z-index:2;}
.combox:before, .combox:after { content: ""; display: table; }
.combox:after { clear: both; overflow: hidden; }
.combox { *zoom:1; /* IE < 8 */}
.tabcon { text-align: center; padding-bottom:30px; color:#666; font-size:14px;}
.downLoad{ clear:both; width:100%; margin-top:46px;}
.col_grey{ color:#999}
.f12{ font-size:12px;}

.w1,.w2,.w3,.w4{ margin-top:62px;}
.w1 { float: right; }
.t1 { float: left; }
.w2 { float: left; }
.t2 { float: right; }
.w3 { float: right; }
.t3 { float: left; }
.w4 { float: left; }
.t4 { float: right; }
.w5 { float: left; }
.t5 { float: right; }

.smTxt{ font-size:12px; color:#ddd; line-height:24px; font-weight:normal; margin:0px;}
.i-dlico{ display:inline-block; width:43px; height:21px; background:url(../images/thinkmail/ico_4.png) no-repeat; vertical-align:middle; margin-right:5px;}


/**********************       响应式布局   ***************/
@media screen and (max-width:3054px) {
    .topban .box, .nav { width: auto; max-width: 1030px; }
    .m1 { width: 705px; }
    .topban{ height:780px;}

    .slin { width: 175px;  }
    .slin p {font-size: 20px; }
    .box{ padding-top:30px;}
    .box-lt {width: 530px; margin-left:0px;}
    .box-rt {width: 262px; margin-right: 0px; margin-left:10px;}
    .box-rt2 {width: 370px;}
    .box-rt3 {width: 458px;margin-right: 0px; margin-left:10px;}

}


@media screen and (max-width:2054px) {
    .topban .box, .nav { width: auto; max-width: 1020px; }
    .m1 { width: 705px; }
    .topban{ height:780px;}
    .version{ }
    .slin { width: 175px; }
    .slin p {font-size: 20px; }
    .box{ padding-top:30px;}
    .box-lt {width: 520px; margin-left:0px;}
    .box-rt {width: 262px; margin-right: 0px; margin-left:10px;}
    .box-rt2 {width: 370px; }
    .box-rt3 {width: 458px; margin-right: 0px; margin-left:10px;margin-top: 120px;}

}

@media screen and (max-width:1681px) {
    .topban .box, .nav { width: auto; max-width: 1000px; }
    .version{}
    .m1 { width: 705px; }
    .slin { width: 175px; }
    .slin p { font-size: 20px; }
    .box{ padding-top:30px;}
    .topban{ height:730px;}
    .box-lt {  width: 500px; margin-left:0;padding-top:30px;}
    .box-rt { width: 242px; margin-right: 0; margin-left:10px;}
    .box-rt2 { width: 370px; }
    .box-rt3 {width: 458px; margin-right: 0px; margin-left:10px;margin-top: 120px;}
    .downLoad{ margin-top:30px;}

}

@media screen and (max-width:1441px) {
    .topban .box, .nav { width: auto; max-width: 1000px; }
    .version{ }
    .m1 { width: 705px; }
    .slin { width: 175px;}
    .slin p { font-size: 20px; }
    .box{ padding-top:30px;}
    .topban{ height:700px;}
    .box-lt { width: 500px; padding-top:20px; }
    .box-rt { width: 222px; margin-right: 0; margin-left:10px;}
    .box-rt2 {width: 370px; }
    .box-rt3 {width: 458px; margin-right: 0px; margin-left:10px;margin-top: 120px;}
}

/*@media screen and (max-width:1190px) {*/
/*    .topban .box, .nav { width: auto; max-width: 1000px; }*/
/*    .topban{}*/
/*    .m1 { width: 705px; }*/
/*    .slin { width: 175px;}*/
/*    .slin p { font-size: 20px; }*/
/*    .box{ padding-top:30px;}*/
/*    .box-lt {  width: 705px; padding-top:20px; margin:0 0px 0 0px;}*/
/*    .box-rt { width: 226px; margin-right: 0px; margin-left:10px;}*/
/*    .box-rt2 {  width: 370px; }*/
/*    .box-rt3 {width: 330px;margin-right: 0px; margin-left:10px; } */
/*    .version{}*/

/*}*/

/*@media screen and (max-width:1000px) {*/
/*    .topban .box, .nav { width: auto; max-width: 980px; }*/
/*    .box { padding-top: 30px; padding-left: 0px; }*/
/*    .box h1{ padding:0 10px;}*/
/*    .topban { }*/
/*    .m1 { width: 100%; }*/
/*    .slin { width: 175px;}*/
/*    .slin p { font-size: 20px; }*/
/*    .box-lt { width: 620px; margin:0 0px 0 10px; padding-top:20px; }*/
/*    .box-rt { width: 220px; margin-right:10px; }*/
/* .box-rt3 {widt330px;margin-right: 0px; }  */


/*    .nav-wrap, .nav li { height: 82px; }*/
/*    .nav li img { margin-top: 26px; }*/
/*    .combox { width: 800px; }*/
/*    .spaLine { width: 800px; }*/
/*    .w1 { width: 486px; }*/
/*    .t1 { width: 240px; }*/
/*    .w2 { width: 486px; margin-top: 30px; }*/
/*    .t2 { width: 240px; }*/
/*    .w3 { width: 486px; margin-top: 30px; }*/
/*    .t3 { width: 240px; }*/
/*    .w4 { width: 486px; margin-top: 40px; }*/
/*    .t4 { width: 240px; }*/
/*    .w5 { width: 486px; margin-top: 30px; }*/
/*    .t5 { width: 240px; }*/
/*}*/

@media screen and (max-width:1190px) {
    .topban .box, .nav { width: auto; max-width: 760px; }
    .box { padding-top: 30px; padding-left: 10px; padding-right:10px; }
    .downLoad{ margin-top:15px;}
    .version li{ margin-bottom:10px;}
    .m1 { width: 100%; }
    .slin { width: 175px; padding:20px;  }
    .slin p { font-size: 20px; }
    .box-lt { width: 400px; margin-left:10px; padding-top:10px }
    .box-rt { width: 200px; margin-right:10px;}
    .box-rt3 { width: 330px; margin-right:10px;margin-top: 150px;}
    .version{ width:240px;}
    .version li a{ font-size:20px; height:60px; line-height:60px;}
    .version li a em{ width:auto;}
    .nav-wrap, .nav li { height: 74px; }
    .nav li img { margin-top: 20px; width: 116px; height: 30px; }
    .spaLine { width: 670px; }
    .combox { width: 670px; text-align: center; }
    .w1,.t1,.w2,.t2,.w3,.t3,.w4,.t4,.w5,.t5{ float: none;}

    .w1 { width: 486px;}
    .t1 { width: 240px;}
    .w2 { width: 486px;}
    .t2 { width: 240px;}
    .w3 { width: 486px;}
    .t3 { width: 240px;}
    .w4 { width: 486px;}
    .t4 { width: 240px;}
    .w5 { width: 486px;}
    .t5 { width: 240px;}
}

@media screen and (max-width:800px) {
    .topban .box, .nav { width: auto; max-width: 760px; }
    .box { padding-top: 30px; padding-left: 10px; padding-right:10px; }
    .topban {  }
    .m1 { width: 100%; }
    .slin { width: 175px;}
    .slin p { font-size: 20px; }
    .box-lt { width: 528px; margin-left:0px; }
    .box-rt { width: 166px; }
    .box-rt { width: 166px; }

    .nav-wrap, .nav li { height: 74px; }
    .nav li img { margin-top: 20px; width: 116px; height: 30px; }
    .spaLine { width: 670px; }
    .combox { width: 670px; text-align: center; }
    .w1,.t1,.w2,.t2,.w3,.t3,.w4,.t4,.w5,.t5{ float: none;}

    .w1 { width: 486px;}
    .t1 { width: 240px;}
    .w2 { width: 486px;}
    .t2 { width: 240px;}
    .w3 { width: 486px;}
    .t3 { width: 240px;}
    .w4 { width: 486px;}
    .t4 { width: 240px;}
    .w5 { width: 486px;}
    .t5 { width: 240px;}
}

@media screen and (max-width:722px) {
    .topban .box, .nav { width: auto; max-width: 760px; }
    .box { padding-top: 10px; padding-left: 20px; padding-right: 20px; }
    .box h1{ margin-bottom:20px; text-align:center;}
    .topban { height: 1100px; background-size:cover;;}
    .m1 { width: 70%; float: none; margin:auto;}
    .downLoad{ margin-top:10px;}
    .slin { width: 145px; float: none; margin-left: auto; margin-right: auto; margin-top: 10px; }
    .slin img{ width:100%;}
    .slin p { font-size: 18px; }
    .box-lt { width: auto; float: none;  padding-top:10px; text-align:center;}
    .version{ float:none; margin-top:15px; margin-right:auto; margin-left:auto; width:80%;}
    .version li{ margin-bottom:10px;}
    .version li a{ height:64px; line-height:64px; text-align:center}

    .box-rt { width: 174px; float: none; margin-left: auto; margin-right: auto; margin-bottom: 30px; margin-top: 15px; }
    .box-rt3 { width:270px; float: none; margin-left: auto; margin-right: auto; margin-bottom: 30px; margin-top: 15px; }
    .nav-wrap, .nav li { height: 59px; }
    .nav li img { margin-top: 21px; width: 73px; height: 19px; }
    .spaLine { width: 320px; }
    .combox { text-align: center; width: auto; padding:30px 0; }
    .combox img { display: block; margin-left: auto; margin-right: auto; }
    .t1,.t2,.t3,.t4,.t5{ width:40%}
    .w1,.w2,.w3,.w4,.w5{ float: none; width:90%;}

}

@media screen and (max-width:340px) {
    .version li a img{ margin:0 10px;}
    .version li a em{ font-size:16px;}
}

