* {margin:0; padding:0; font-family: "Microsoft YaHei"; color:#333;}
body {/* background: #263238; */}
ul,ul li {list-style:none;}
a {text-decoration: none;}
.img {display: block; vertical-align: middle;}
img {display: block; vertical-align: middle;}
#iframe {background:#fff;}
#top {width:100%; height:50px; background:#fff;}
#top .top {width:1200px; margin:0 auto; line-height: 50px; position: relative;}
.top img {height:50px;width:auto;margin-left:-5px;position:  absolute;}
.top ul {width: auto;height:50px;position: absolute;left:50%;margin-left:-140px;}
.top ul li {width:auto; float:left; padding:0 16px;}
.top ul li a {display: block; line-height: 50px; color:#333; transition:all .3s;}
.top ul li a:hover {color: #2ca5de; transition:all .3s;}
.logReg {padding-top: 14px;padding-bottom: 14px;width:134px;display: flex;justify-content: space-between;}
.logReg .log {display: block; width:60px; height:36px; line-height: 34px; font-size:14px; color:#2ca5de; box-sizing: border-box; border:1px solid #2ca5de; text-align: center;  background:#fff;}
.logReg .log:hover {color:#fff; background:#2ca5de; }
.logReg .user {color: #666;line-height: 40px;}
.logReg .relog {width:60px;height:36px;color:#fff;line-height:36px;background: #2cded4;border: 1px solid #2cded4;text-align:center;}
.logReg .relog:hover {opacity: 0.8;}
.logReg .reg {display: block; width:60px; height:36px; line-height: 34px; font-size:14px; color:#fff; background:#2cded4;box-sizing: border-box; border:1px solid #2cded4;  text-align: center;}
.logReg .reg:hover {color:#2cded4; background:#fff;}
nav {width:100%;height:64px;background: #fff;border-bottom: 1px solid #eee;}
nav .nav {width:1200px;height:64px;margin:0 auto;position: relative;display:  flex;justify-content: space-around;}
.nav .logo {line-height:65px;}
.nav .logo img {height:50px;vertical-align:middle;display:  inline-block;}
.nav ul {width: auto;height:44px;padding: 10px 0;line-height: 44px;}
.nav ul li {float:left; margin:0 12px;}
.nav ul li a {display: block; padding:0 10px; line-height: 44px; font-size:16px; color:#fff;}
.nav ul li a:hover {font-weight: bold;}
#search {width: 65%;line-height: 38px;height: 38px;background:#fff;margin-top: 16px;border: none;box-sizing:  border-box;padding: 0 16px;outline: none;border-radius: 4px;margin-right: 30px;border: 1px solid #ccc;box-shadow: 0 0 10px #eee inset;}
#search:focus {border-color:#2ca5de;box-shadow:  0 0 5px #eee;}
#subnav {width:100%;height: auto;border-bottom: 1px solid #eee;overflow: hidden;}
#subnav .subnav {width:1200px;margin:0 auto;padding-bottom: 20px;}
.subnav dl{padding-top:10px;line-height: 34px;position: relative;overflow: hidden;padding-bottom: 16px;}
.subnav dl dt {font-size:16px;color:#333333;width: 94px;text-align: center;position:  absolute;left: 0;top: 10px;}
.subnav dl dd {box-sizing:  border-box;padding-left: 94px;}
.subnav dl dd a {font-size:14px; color:#888; margin:0 15px; display: block; float:left;}
.subnav dl dd a:hover {color:#2ca5de;}
#content ul.tabs {width:1200px; height:72px; box-sizing: border-box; padding-top:36px; line-height: 36px; padding-left:5px; margin:0 auto; cursor: pointer;}
#content ul.tabs li {font-size:14px; color:#333; line-height: 36px; box-sizing: border-box; float:left; margin:0 13px;}
#content ul.tabs li.active {border-bottom: 2px solid #2cded4;}
#content .content {width:100%; height:auto; overflow: hidden; background:#2ca5de;}
.content ul {width:1200px; display: flex; flex-wrap: wrap; justify-content: space-between; margin:0 auto; height:auto; overflow: hidden; padding-top:30px;}
.content ul li {margin-bottom:30px;width:590px;height:410px;position: relative;overflow:hidden;background: #000;}
.content ul li .box{display:block;overflow:hidden;transition:all .2s ease;}
.content ul li  a {font-size:16px;display:block;width:160px;height:40px;text-align:center;line-height:40px;background: #2cded4;position:absolute;left:50%;top:-20px;margin-left:-80px;margin-top:-20px;transition:all .4s ease;color: #fff;}
.content ul li:hover a {top:50%; transition:all .4s ease;}
.content ul li:hover .box{opacity:0.5; transform:translateY(-10px); transition:all .4s ease;}
.content ul li img.imgBg {width:100%; height:auto;}
.content ul li .title {width:100%;height:50px;line-height: 50px;position: absolute;bottom:0;box-sizing: border-box;border-top:1px solid #eee;color: #999999;box-sizing: border-box;padding:0 20px;background: #fff;display:  flex;justify-content:  space-between;transition: all .4s ease;}
.content ul li:hover .title {
    bottom: 135px;
    background: transparent;
    border: none;
    justify-content:  center;
    transition: all .4s ease;
}
.title .name {color:#999; margin-left:20px;}
.title .number {color:#999999;font-size: 15px;line-height: 50px;padding-left:30px;background:url('../img/number.png') no-repeat left center;}
.content ul li:hover .title div {font-size:18px; color:#fff;}
.title .read {color:#999999;font-size: 15px;line-height: 50px;padding-left: 30px;margin-right: 20px;margin-left: 20px;background:url('../img/read.png') no-repeat left center;}
.content ul li .mask {display:none; width:100%;height:100%;position: absolute;top:0;background: rgba(0,0,0,.5); }
.content ul li:hover .mask {display: block; }
.mask a {display: block; border-radius: 50%;}
.mask img.search {position: absolute; left:50%; top:50%; margin-left:-35px; margin-top:-35px; cursor: pointer; animation:  starts 1.5s 0.3s ease infinite;}
.mask img.search:hover {animation-duration:2s;
-webkit-animation-duration:0s;}
@keyframes starts {
    0% {transform:scale(1);}
    50% {transform:scale(1.4);}
    100% {transform:scale(1);}
}
#pagination {width:100%; height:112px; border-bottom:1px solid #eee; text-align: center;}
#pagination ul {width: auto;height:40px;display: flex;justify-content: center;margin: 0 10px;}
#pagination ul li {width:40px;height:40px;border-radius: 50%;font-size:22px;line-height: 40px;color:#999999;border:1px solid #999999;cursor: pointer;margin: 0 5px;box-sizing: border-box;}
#pagination ul li:hover , #pagination ul li.active{color:#fff; background:#2cded4; border-color:#2cded4; }
#pagination .trunPage span {display: block;cursor: pointer;margin: 0 5px;border: 1px solid #ccc;box-sizing:  border-box;color: #999999;font-size: 16px;width: 40px;height:  40px;border-radius: 50%;}
.trunPage span i {color: #999999;font-size: 24px;width: 40px;text-align:  center;line-height: 38px;}
#pagination .trunPage span:hover {color:#fff; background:#2cded4; border-color:#2cded4;}
#pagination .trunPage span:hover i {color:#fff;}
.allPages{display:flex;justify-content:center;line-height:40px;margin:20px 0;box-sizing:border-box}
.up{position:fixed;left:50%;margin-left:620px;bottom:280px;cursor:pointer;display:none}
.searchPage{margin:0 10px}
.searchPage input{width:40px;height:30px;border-radius:2px;border:1px solid #999;margin:0 4px;text-align:center;line-height:30px;outline:0}
.searchPage input:focus{border-color:#2cded4}
@media screen and (max-width: 768px){
    .searchPage {display: none;}
    .total {display: none;}
    #pagination ul li {display: none;}
    #pagination ul li.active {display: block;}
}
footer {width:100%; height:auto;}
footer .fot_1 {width:100%;height: 101px;border-bottom: 1px solid #eee;text-align: center;display:  flex;justify-content: center;padding: 50px 0;}
footer .fot_1 img {width:101px;height:101px;margin-right: 30px;}
footer .fot_1 dl {width:370px; text-align: left;}
footer .fot_1 dl dt{font-size:24px; line-height: 46px; color:#333333;}
footer .fot_1 dl dd {font-size:14px; line-height: 34px;}
footer .fot_2 {width:1200px; height:260px; margin:0 auto; display: flex; justify-content: space-between; box-sizing: border-box; padding-top:50px;}
.fot_2 li {padding:0 18px; text-align: left;}
.fot_2 li:last-child {text-align: right;}
.fot_2 li h4 {font-size:16px; color:#333; line-height: 34px;}
.fot_2 li a , .fot_2 li span{display: block; font-size:14px; color:#888888; line-height: 32px;}
.fot_2 li a:hover {color:#2ca5de;}
footer p {text-align: center; height:60px; line-height: 60px; color:#999999; font-size:12px; border-top:1px solid #eee;}
.default h3 {width:100%; height: 400px; color:#fff; text-align: center; line-height: 400px; font-size: 40px;}
.default li img.mainBg {width: 100%;height: auto;}
.default>img {    margin: 0 auto;padding: 30px;}
#met-demo {
    width: 100%;
    height:  50px;
    background: #000;
    position:  fixed;
    top: 0;
    z-index: 99999;
    /* overflow: hidden; */
}
.met-demo{
    box-sizing:  border-box;
    padding: 0 20px;
    line-height: 50px;
    height: 50px;
}
.met-demo>div{
    width: 33.33%;
    float: left;
}
.col-left{width:33.33%; display: block;}
.col-center{
    width: 33.33%;
    text-align: center;
    display:  flex;
    justify-content: center;
    float: left;
}
.col-right{}
.col-left a{
    font-size: 14px;
    color: #fff;
}
i.icon-left {font-size:14px; color:#fff; padding-right:5px;}
.col-left a:hover ,.col-left a:hover i{color:#FFEB3B;}
.col-right a {width:56px;height: 28px;line-height: 28px;color:#fff;display: block;font-size:12px;text-align: center;padding:0  13px;background:#f96868;position:  absolute;top: 10px;right: 30px;}
.col-center li{
    padding: 0 5px;
    position: relative;
}
.col-center li i{
    color: #fff;
    padding: 0 10px;
    font-size:18px;
    line-height: 50px;
    display: inline-block;
    position:  relative;
}
.col-center li.active i , .col-center li i:hover {color:#FFEB3B; cursor:pointer;}
.col-center li:nth-child(1) i::after {
    position:absolute;
    content:'电脑';
    left: -12px;
    top:55px;
    font-size: 14px;
    color: #fff;
    width: 65px;
    line-height:  2;
    border-radius: 4px;
    background: #000 url('../img/san.png') no-repeat center;
    display: none;
}
.col-center li:nth-child(2) i::after {
    position:absolute;
    content:'平板';
    left: -12px;
    top:55px;
    font-size: 14px;
    color: #fff;
    width: 65px;
    line-height:  2;
    border-radius: 4px;
    background: #000 url('../img/san.png') no-repeat center;
    display: none;
}
.col-center li:nth-child(3) i::after {
    position:absolute;
    content:'手机';
    left: -12px;
    top: 55px;
    font-size: 14px;
    color: #fff;
    width: 65px;
    line-height:  2;
    border-radius: 4px;
    background: #000 url('../img/san.png') no-repeat center;
    display: none;
    transition: all .5s;
}
.col-center li i:hover::after {display: block; top: 55px; transition:all .5s;}
.col-right a {}
#Hide {    position: fixed;
    z-index:99999;
    top: 0px;
    left: -90px;
    height: 50px;
    line-height: 50px;
    background: #000;
    color: #fff;
    border-radius: 0 25px 25px 0;
    padding-right: 26px;}
#Hide a {
    color: #00BCD4;
    font-size: 14px;
    padding-left: 10px;
    }
#Hide a i{
    color: #00BCD4;
    padding-left: 10px;
    }
#met-demo-iframe {
    background-color:  #263238;
    position: relative;
    top:50px;
}
.phone-width{
    width: 420px;
    height: 800px;
    padding-top: 50px;
    background: url('../img/mobile1.png') no-repeat center;
    margin: 70px auto;
    background-size: 100% auto;
    box-sizing: border-box;
    padding: 66px 10px;
    overflow: hidden;
    }
#iframe {margin-top:0;}
.montor-width{
    width: 100%;
}
.ipad-width{
    width: 960px;
    height: 1320px;
    padding-top: 50px;
    background: url('../img/ipad1.png') no-repeat center;
    margin: 70px auto;
    background-size: 100% auto;
    box-sizing: border-box;
    padding: 88px 50px;
    overflow: hidden;
}