html,body {
    font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;;
    font-size: 625%;
    line-height: 1.8;
    margin:0;
    padding: 0;
}
@media only screen and (max-width:1600px) {
    html,body {
        font-size: 521%;
    }
}
@media only screen and (max-width:1440px) {
    html,body {
        font-size: 468%;
    }
}
@media only screen and (max-width:1366px) {
    html,body {
        font-size: 444%;
    }
}
@media only screen and (max-width:1280px) {
    html,body {
        font-size: 416%;
    }
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    list-style: none;
    margin: 0;
    padding: 0;
}
img {
    display: block;
    max-width: 100%;
    height: auto;
}
a {
    text-decoration: none;
}
input:-webkit-autofill {
    box-shadow: 0 0 0 40px white inset;
}
.clear {
    clear: both;
}
/*登录页开始*/
.login-page {
    
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    display:flex;
    font-size: 14px;
    justify-content: center;
    height: 100%;
    padding-top: 10%;
}
@media only screen and (max-width:1080px) {
    .login-page {
        
        background-size: 100% 100%;
        flex-direction: column;
        padding-top: 0;
    }
}
.login-title {
    padding-right: .4rem;
    width: 50%;
}
@media only screen and (max-width:1080px) {
    .login-title {
        padding-right: 0;
        width: 100%;
    }
}
.login_content {
    width: 26%;
}
@media only screen and (max-width: 1080px) {
    .login_content {
        padding: 10% 4% 0 3.5%;
        width: 100%;
    }
}
.login_content p {
    color: #666;
    padding: .3rem .2rem;
    font-size: 12px;
}
.login_content .login-wrap {
    background: url("../images/login_bgcolor.png");
    background: rgba(17,120,184,.15);
    border-top-right-radius: .5rem;
    border-bottom-left-radius: .5rem;
    padding: 15%;
    position: relative;
    width: 93%;
}
@media only screen and (max-width: 1080px) {
    .login_content .login-wrap {
        padding: 10.8% 8.5%;
        width: 100%;
    }
}
.login-wrap .pencil {
    bottom: -3.8%;
    position: absolute;
    right: -8.1%;
    width: 36.5%;
}
@media only screen and (max-width: 1080px) {
    .login-wrap .pencil {
        bottom: -3%;
        right: -2.2%;
        width: 32.5%;
    }
}
.login-page .sel_wrap {
    background: #fff url("../images/select_arrow.png") no-repeat 92% center;
    background-size: 4%;
    -webkit-border-radius: .04rem;
    -moz-border-radius: .04rem;
    border-radius: .04rem;
    cursor: pointer;
    font-size: 16px;
    height: .4rem;
    line-height: .4rem;
    margin-bottom: .16rem;
    padding-left: .12rem;
    position: relative;
    width: 100%;
}
@media only screen and (max-width: 1366px) {
    .login-page .sel_wrap {
        height: .5rem;
        line-height: .5rem;
    }
}
.sel_wrap label {
    color: #bbb;
    display: block;
}
.sel_wrap .select{
    cursor: pointer;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
.login-wrap .area-input {
    border: none;
    display: block;
    font-size: 16px;
    height: .4rem;
    margin-bottom: .16rem;
    padding-left: .12rem;
    outline: none;
    width: 100%;
}
@media only screen and (max-width: 1366px) {
    .login-wrap .area-input {
        height: .5rem;
    }
}
.login-wrap .area-input::-webkit-input-placeholder {
    color: #bbb;
}
.login-wrap .area-input:-moz-placeholder {
    color: #bbb;
}
.login-wrap .area-input::-moz-placeholder {
    color: #bbb;
}
.login-wrap .area-input:-ms-input-placeholder {
    color: #bbb;
}
.login-btn {
    background: #199dd0;
    border: none;
    border-radius: .04rem;
    color: #fff;
    cursor: pointer;
    height: .4rem;
    outline: none;
    width: 100%;
}
.login-btn:active {
    background: #1790bf;
}
@media only screen and (max-width: 1366px) {
    .login-btn {
        height: .5rem;
    }
}
/*登录页结束*/
/*列表页开始*/
.list-page {
    font-size: 15px;
}
.common-banner img {
    width: 100%;
}
.common-banner .mbanner {
    display: none;
}
@media only screen and (max-width: 1080px) {
    .common-banner .wbanner {
        display: none;
    }
    .common-banner .mbanner {
        display: block;
    }
}
.list-content {
    margin: 0 auto;
    padding: .5rem 0;
    width: 94%;
    max-width: 1280px;
}
@media only screen and (max-width: 1080px) {
    .list-content {
        width: 100%;
    }
}
.search-box {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    float: right;
    display: flex;
    height: 40px;
    width: 32%;
}
@media only screen and (max-width: 1080px) {
    .search-box {
        float: none;
        padding: 0 .2rem;
        width: auto;
    }
}
.search-box input {
    background: #eff3f5;
    border:none;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 .2rem;
    outline: none;
    width: 78%;
}
.search-box input::-webkit-input-placeholder {
    color: #bbb;
}
.search-box input:-moz-placeholder {
    color: #bbb;
}
.search-box input::-moz-placeholder {
    color: #bbb;
}
.search-box input:-ms-input-placeholder {
    color: #bbb;
}

.search-box button {
    background: #199dd0 url("../images/search_bg.png") no-repeat center;
    border: none;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    color: #fff;
    outline: none;
    width: 22%;
}
.search-box button:active {
    background-color: #1790bf;
}
.list-content ul {
    margin-top: .3rem;
}
.video-list li {
    background: #f5f8fa;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom: 8px;
    padding: 0 .1rem;
}
@media only screen and (max-width: 1080px) {
    .video-list li {
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
    }
}
.video-list dt {
    background: url("../images/term_icon.png") no-repeat .1rem top;
    -webkit-background-size: .27rem .29rem;
    background-size: .27rem .29rem;
    border-bottom: 1px solid #fff;
    font-size: 16px;
    margin-bottom: .1rem;
    padding: .06rem .5rem;
}
.video-list dd {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 0 .5rem .2rem;
}
@media only screen and (max-width: 1080px) {
    .video-list dd {
        padding: 0 .1rem .15rem;
    }
}
.video-list dd .info {
    display: flex;
    flex: 1;
}
@media only screen and (max-width: 1080px) {
    .video-list dd .info {
        flex-flow: wrap;
    }
}
.video-list dd p {
    color: #0f6080;
    flex-basis: 5rem;
}
@media only screen and (max-width: 1080px) {
    .video-list dd p {
        flex-basis: 100%;
    }
}
.video-list dd span {
    display: inline-block;
    color: #bbb;
}
.video-list dd span:nth-child(2) {
    flex-basis: 3rem;
}
@media only screen and ( max-width: 1080px) {
    .video-list dd span:nth-child(2) {
        flex-basis: 2rem;
    }
}
.list-content .start-btn {
    background: #199dd0 url("../images/play_icon.png") no-repeat 8px center;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    padding: 0 10px 0 22px;
}
.list-content .start-btn a {
    color: #fff;
    display: block;
}
/*列表页结束*/

/*下载页开始*/
.download-list ul {
    background: #f5f8fa;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
@media only screen and ( max-width: 1080px) {
    .download-list ul{
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
    }
}
.download-list li {
    padding: 0 .1rem;
}
.download-list dl {
    align-items: center;
    border-bottom: 1px solid #fff;
    display: flex;
    padding: .2rem  .1rem;
}
.download-list dd {
    align-items: center;
    display: flex;
    flex: 1;
    justify-content: space-between;
    margin-left: .14rem;
}
.download-list dd .info {
    display: flex;
    flex: 1;
    flex-flow: wrap;
}
.download-list dd p {
    color: #0f6080;
    flex: 1 1 100%;
}
.download-list dd  span {
    color: #bbb;
}
.download-list dd  span:nth-child(2) {
    flex-basis: 2rem;
}
.download-list .start-btn {
    background: #199dd0 url("../images/download_icon.png") no-repeat 8px center;
}
























