body{padding:0;}

@keyframes bounce {
    0%, 40%, 48%, 52%, 56%, 100% {
        transform: translateY(0);
    }
    46% {
        transform: translateY(-30px);
    }
    50% {
        transform: translateY(-23px);
    }
    54% {
        transform: translateY(-15px);
    }
}
@keyframes opac {
    0% { opacity:1; }
    45% { opacity:1; }
    50% {opacity:0;}
    95% {opacity:0;}
}
.tophe{overflow:hidden; position:relative;}
.tophe>div{position:relative; z-index:8;}
.tophe>div>img{display:block; margin:auto; width:600px; margin-top:160px; max-width:90%; animation:bounce 6s ease-in-out infinite;}
.tophe>div>b{font-size:48px; display:block; text-align:center; margin-top:50px; color:#030e2c}
.tophe>div>p{text-align:center; font-size:21px; margin-top:20px;}

.tophe>div.bg{position:absolute; z-index:1; top:0; left:0; bottom:0; right:0;}
.tophe>div.bg1{ animation:opac 12s ease-in-out infinite; background:url('../box/121508128.jpg') center; background-size:cover;}
.tophe>div.bg2{ animation:opac 12s -6s ease-in-out infinite; background:url('../box/121059299.jpg') center; background-size:cover;}
 
.program{margin:58px auto 128px auto; text-align:center; width:1200px;}
.program>div{width:48%; background:#fff; padding:28px; border-radius:8px; position:relative; border:1px solid #e2e5fa;}
.program>div:hover{box-shadow:0 0 12px rgba(255,255,255,0.5);}
.program>div i{display:inline-block; font-size:12px; line-height:20px; padding:0 10px; background:#e22; color:#fff; font-style:normal;} 
.program>div i:before{content:'HOT'; padding-right:4px; color:#ece91c} 
.program>div.plus{float:left; background:url('../box/121646062.jpg') right bottom; background-size:200%;}
.program>div.free{float:right; background:url('../box/121646062.jpg') left bottom; background-size:200%;}
.program>div>b{display:block; font-size:32px; margin:4px 0 14px 0;}
.program>div>a{background:#3763dd; color:#fff; display:inline-block; padding:10px 40px; border-radius:54px; line-height:1.75; font-size:18px;}
.program>div>a:before{padding-right:4px; position:relative; left:-4px;}
.program>div>a:hover{background:#5691f5;}
.program>div>p{margin-bottom:34px; font-size:18px;}
@media(max-width:767px){
.tophe>div{padding:0 10px;}
.tophe>div>img{margin-top:80px;}
.tophe>div>b{font-size:28px; margin-top:20px;}
.tophe>div>p{font-size:16px; margin-top:10px;}

.program{margin:18px auto 28px auto;}
.program>div{width:auto; padding:10px; float:none !important;}
.program>div.free{margin-top:10px;}
.program>div>b{font-size:26px; margin:4px 0;}
.program>div>p{margin-bottom:18px; font-size:14px;}
.program>div>a{padding:5px 20px; font-size:16px;}
}



.reveal{display:block; margin-top:38px;}
.reveal>article{width:1480px;}
.reveleft{width:26%; float:left; padding-right:60px;}

.reveleft dl{display:block; padding:10px 20px; margin:0; border-radius:16px; cursor:pointer; cursor:pointer; transition:.3s;}
.reveleft dt{display:block; font-size:20px; transition:.3s;}
.reveleft dl:hover dt{color:#3763dd;}
.reveleft dd{display:block; margin-top:0; height:0; transition:.3s; overflow:hidden;}

.reveleft dl.on{background:#f0f2f7; margin:10px 0;}
.reveleft dl.on:first-child{margin-top:0;}
.reveleft dl.on dt{ font-weight:bold;}
.reveleft dl.on dd{margin-top:10px; height:84px;}

.reveleft dfn{display:block; font-style:normal; margin-top:20px;}
.reveleft dfn a{background:#3763dd; color:#fff; display:inline-block; padding:10px 40px; border-radius:4px; line-height:1.75; font-size:18px;}
.reveleft dfn a i{position:relative; left:6px; transition:.3s;}
.reveleft dfn a:hover{background:#5691f5;}
.reveleft dfn a:hover i{transform:translateX(4px);}

.reveright{width:74%; float:right;}
.reveright span{padding:20px; display:none; background:#f6f8f9; border-radius:12px;}
.reveright span.on{display:block;}
.reveright span img{display:block; border-radius:8px;}
@media(max-width:1200px){
.reveleft{padding-right:20px;}
.reveleft dl{padding:10px; border-radius:8px;}
.reveleft dt{font-size:18px;}
.reveleft dd{font-size:14px;}
.reveleft dl.on dd{margin-top:5px; height:auto;}
}
@media(max-width:767px){
.reveleft dt{font-size:16px;} 

.reveleft dfn{margin-top:10px;}
.reveleft dfn a{padding:6px 20px; font-size:16px;}
.reveleft dfn a i{left:4px;}
.reveleft dfn a:hover i{transform:translateX(2px);}
.reveright span{padding:10px;}

.reveleft{width:auto; float:none; padding-right:0; padding-top:15px;}
.reveright{width:auto; float:none;}
}




.appbg{background:#f7f8fa url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASAQMAAABsABwUAAAABlBMVEUAAADd3uHogCXTAAAAAXRSTlMAQObYZgAAAA9JREFUCNdjOMDAAMQUAwBnyAGBGdiqIAAAAABJRU5ErkJggg=='); 
overflow:hidden; margin-top:100px;}
@media(max-width:1200px){
.appbg{margin-top:60px;}
}


.plugin{padding-bottom:60px;}
.plugin>article{width:1400px;}
.plugin ul{margin:0 -15px; padding:40px 0 20px 0;}
.plugin ul:after{display:block; content:''; clear:both;}
.plugin ul>li{padding:0 15px; margin-bottom:20px; width:50%; float:left;}
.plugin ul>li>a{background:#fff; display:block; border-radius:8px; padding:20px 25px; }
.plugin ul>li>a:hover{box-shadow:0 0 12px rgba(255,255,255,0.5);}
.plugin ul>li>a>ins{display:block; float:left; margin-right:20px; padding:15px; border-radius:5px; background:#f6f8f9;}
.plugin ul>li>a>ins>img{display:block; width:70px; height:70px;}
.plugin ul>li>a>span{display:block; overflow:hidden;}
.plugin ul>li>a>span>b{display:block; font-size:21px;}
.plugin ul>li>a>span>p{margin-top:8px; height:56px; overflow:hidden;}
.plugin .button-box{text-align:center;}
@media(max-width:767px){
.plugin{padding-bottom:20px;}
.plugin ul{margin:0; padding:20px 0;}
.plugin ul>li{padding:0; margin-bottom:10px; width:auto; float:none;}
.plugin ul>li>a{padding:10px; }
.plugin ul>li>a>ins{margin-right:10px; padding:10px;}
.plugin ul>li>a>span>b{font-size:18px;}
.plugin ul>li>a>span>p{margin-top:4px; height:auto; font-size:14px;}
}





.info{background:url('../box/news.jpg?') center; background-repeat:no-repeat; background-size:100% auto;}

.news{padding:48px 0; }
.news article{width:1380px;}
.news-box{ }
.news-box:after{display:block; content:''; clear:both;}
.news-list{padding-right:58px; width:60%; float:left;}

.news-title{margin-bottom:18px;}
.news-title:after{display:block; content:''; clear:both;}
.news-title h2{font-size:24px; font-weight:bold; cursor:pointer; display:inline-block; margin-left:38px;}
.news-title h2:first-child{margin:0;}
.news-title h2.on{color:rgb(65,93,138);}

.news-cut{padding-bottom:18px;}
.news-cut ul{display:none;}
.news-cut ul.on{display:block;}
.news-cut ul li{padding:18px 0; border-bottom:1px solid rgba(188,192,200,.38);}
.news-cut ul li:first-child{margin-top:0;}
.news-cut ul li:after{display:block; content:''; clear:both;}
.news-cut ul li h3{font-weight:bold; font-size:20px; position:relative; padding:0 28px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.news-cut ul li h3:before{width:12px; height:12px; border-radius:12px; position:absolute; left:0; top:10px; content:''; box-shadow:3px 3px 3px rgb(186,195,251); background:rgb(65,93,138);}
.news-cut ul li i{float:right; font-style:normal; color:#888; padding-top:4px;}
.news-cut ul li p{margin-top:8px; height:52px; line-height:26px; overflow:hidden; color:#585858;}

.button-box a{background:#3763dd; color:#fff; display:inline-block; padding:10px 40px; border-radius:4px; line-height:1.75; font-size:18px;}
.button-box a i{position:relative; left:6px; transition:.3s;}
.button-box a:hover{background:#5691f5;}
.button-box a:hover i{transform:translateX(4px);}

.news-help{background:#fff; width:40%; float:right; margin-top:8px; padding:28px; box-shadow:0 2px 4px rgba(0,0,0,.18); border-radius:4px;}
.news-help>h3{padding:28px 0 0; font-size:22px; font-weight:bold;}
.news-help>ul{background:url('../box/tbs.png');
background-repeat:no-repeat; background-position:bottom right; background-size:200px auto;}
.news-help>ul li{margin:8px 0 0;}
.news-help>ul li i{color:rgb(65,93,138); margin-right:8px;}
.news-help>ul li a{}
.news-search{background:url('../box/bg.jpg') center; background-size:cover; border-radius:4px; padding:28px;}
.news-search form{position:relative; display:block;}
.news-search form input{background:#fff; box-shadow:0 2px 4px rgba(0,0,0,.18); font-size:15px; line-height:30px; height:46px; border:none; border-radius:4px;}
.news-search form button{position:absolute; right:0; top:0; border:none; line-height:46px; height:46px; padding:0 18px 0 12px; border-top-right-radius:4px; border-bottom-right-radius:4px; color:#fff; 
cursor:pointer; background:rgb(65,93,138);}
.news-search form button:before,
.news-search form button:after,
.news-search form button i:after,
.news-search form button i{width:28px; height:28px; border-radius:50px; position:relative; line-height:28px; font-size:14px; 
text-align:center; background:#3763dd; margin-right:6px; content:''; transition:.3s;
background:-webkit-gradient(linear, top, bottom, color-stop(0%,#3763dd), color-stop(100%,#5691f5));
background:-moz-linear-gradient(to bottom, #3763dd 0%, #5691f5 100%);
background:-webkit-linear-gradient(to bottom, #3763dd 0%, #5691f5 100%);
background:-o-linear-gradient(to bottom, #3763dd 0% #5691f5 100%);
background:-ms-linear-gradient(to bottom, #3763dd 0%, #5691f5 100%);
background:linear-gradient(to bottom, #3763dd 0%, #5691f5 100%);}
.news-search form button b{font-weight:normal; font-size:16px; position:relative; z-index:2; letter-spacing:1px; text-shadow:0 0 4px rgba(0,0,0,.18);}
.news-search form button:before{width:12px; height:12px; position:absolute; right:6px; bottom:6px; margin:0; opacity:.78;}
.news-search form button:after{width:6px; height:6px; position:absolute; right:14px; top:8px; margin:0; opacity:.88;}
.news-search form button i:after{top:-2px; right:-2px; width:10px; height:10px; position:absolute; opacity:.48; margin:0;}
.news-search form button:hover{background:rgb(29,213,111);}
.news-search form button:hover:before,
.news-search form button:hover:after,
.news-search form button:hover i:after,
.news-search form button:hover i{background:#3763dd;
background:-webkit-gradient(linear, top, bottom, color-stop(0%,rgb(17,167,84)), color-stop(100%,rgb(93,225,152)));
background:-moz-linear-gradient(to bottom, rgb(17,167,84) 0%, rgb(93,225,152) 100%);
background:-webkit-linear-gradient(to bottom, rgb(17,167,84) 0%, rgb(93,225,152) 100%);
background:-o-linear-gradient(to bottom, rgb(17,167,84) 0% rgb(93,225,152) 100%);
background:-ms-linear-gradient(to bottom, rgb(17,167,84) 0%, rgb(93,225,152) 100%);
background:linear-gradient(to bottom, rgb(17,167,84) 0%, rgb(93,225,152) 100%);}
.news .button-box{text-align:left;}
@media(max-width:1200px){
.news{padding:38px 0; }
.news-list{padding-right:18px;}
.news-help{padding:18px;}
}
@media(max-width:992px){
.news-list{padding:0 0 18px 0; width:100%;}
.news-help{padding:18px; width:100%;}
.news .button-box{margin:0; text-align:center;}
}
@media(max-width:767px){
.news{padding:18px 0; }
.news-title{margin-bottom:8px; text-align:center;}
.news-title h2{font-size:18px; margin-left:18px;}
.news-cut ul li{padding:8px 0;}
.news-cut ul li h3{font-size:16px; padding:0 18px;}
.news-cut ul li h3:before{width:8px; height:8px; border-radius:8px; top:10px;}
.news-cut ul li i{padding-top:2px; font-size:14px;}
.news-cut ul li p{margin-top:4px; height:44px; line-height:22px; font-size:14px;}
.news-search{padding:18px;}

.button-box a{padding:6px 20px; font-size:16px;}
.button-box a i{ left:4px;}
.button-box a:hover i{transform:translateX(2px);}
}