/* ==========================================================================
   公共样式
 ============================================================================ */
*{box-sizing: border-box;}
.wp{width: 92%;margin: 0 auto;position: relative;}

#hd{position: fixed;width: 100%;top: 0;left: 0;z-index: 99;background: #fff;padding: 10px 0;box-shadow: 0 0 5px rgba(0,0,0,.1);}
.top-blank{height: 50px;}
.hd-logo{height: 30px;}
.hd-logo img{width: auto;height: 100%;}
.hd-back{line-height: 30px;}
.hd-back span{display: inline-block;vertical-align: top;width: 24px;height: 20px;background: url(../image/back.png);background-size: 24px auto;margin: 5px 5px 0 0;transition: .4s;}

.copyright{text-align: center;font-family: Arial;padding: 20px 5%;font-size: 12px;}

@media screen and (min-width: 768px) {
    #hd{padding: 12px 0;}
    .top-blank{height: 60px;}
    .hd-logo{height: 36px;}
    .hd-back{margin-top: 3px;}

    .copyright{font-size: 14px;}
}

@media screen and (min-width: 992px) {
    .wp{width: 900px;}
}

@media screen and (min-width: 1280px) {
    a:hover{color: #d41924;}
    .wp{width: 1200px;}
    .hd-back:hover span{background-position: 0 -20px;transition: .4s;}
}

@media screen and (min-width: 1440px) {
    .wp{width: 1280px;}
    #hd{padding: 16px 0;}
    .top-blank{height: 72px;}
    .hd-logo{height: 40px;}
    .hd-back{margin-top: 5px;}
    .copyright{padding: 24px 5%;}
}

@media screen and (min-width: 1680px) {
    #hd{padding: 18px 0;}
    .top-blank{height: 80px;}
    .hd-logo{height: 44px;}
    .hd-back{margin-top: 7px;}
    .copyright{padding: 30px 5%;}
}


/* ==========================================================================
   登录
 ============================================================================ */
.login-box{padding: 50px 0;background: url(../image/login-bg1.jpg) no-repeat center center;background-size: cover;}
.login-gray{background: url(../image/login-bg2.jpg) no-repeat center center;background-size: cover;}
.login-box .login-form{background: #fff;border-radius: 4px;width: 100%;max-width: 360px;margin: 0 auto;position: relative;}
.login-box .login-form h3{font-size: 20px;text-align: center;line-height: 52px;border-bottom: 1px solid #ebebeb;color: #d41924;}
.login-box .login-form form{padding: 10px 30px 40px;}
.login-box .login-form .input-group{margin-top: 20px;border: 1px solid #eeeeee;border-radius: 4px;padding-left: 40px;position: relative;}
.login-box .login-form .input-group span{display: block;width: 40px;height: 38px;position: absolute;left: 0;top: 0;text-align: center;line-height: 38px;}
.login-box .login-form .input-group span::after{display: block;content: '';width: 1px;height: 16px;background: #e5e5e5;position: absolute;right: 0;top: 50%;margin-top: -8px;}
.login-box .login-form .input-group span img{vertical-align: middle;}
.login-box .login-form .input-group input{display: block;width: 100%;height: 38px;line-height: 38px;padding: 0 15px;color: #666;}
.login-box .login-form .input-group input:-webkit-autofill{box-shadow: 0 0 0px 1000px white inset;}
.login-box .login-form .input-group input::-moz-placeholder{color: #c1c1c1;}
.login-box .login-form .input-group input::placeholder{color: #c1c1c1;}
.login-box .login-form .submit-btn{display: block;width: 100%;line-height: 40px;background: #d41924;border-radius: 20px;text-align: center;font-size: 18px;color: #fff;margin-top: 32px;cursor: pointer;}
.login-box .login-form .login-shadow{display: block;width: 100%;position: absolute;top: 100%;left: 0;margin-top: 5px;}
.login-box .login-form .form-tips{position: absolute;width: 200px;z-index: 11;background: rgba(0, 0, 0, .6);border-radius: 4px;padding: 15px 20px;line-height: 22px;color: #fff;text-align: center;top: 50%;left: 50%;margin-left: -100px;-webkit-transform: translate3d(0,-50%,0);-ms-transform: translate3d(0,-50%,0);-moz-transform: translate3d(0,-50%,0);-o-transform: translate3d(0,-50%,0);transform: translate3d(0,-50%,0);display: none;}


@media screen and (min-width: 768px) {
    .login-box{padding: 80px 0;}
}

@media screen and (min-width: 1280px) {
    .login-box .login-form{margin-right: 14%;}
    .login-box .login-form .submit-btn:hover{background: #af0812;transition: .4s;}
}

@media screen and (min-width: 1440px) {
    .login-box{padding: 96px 0;}
    .login-form{float: right;}
    .login-box .login-form h3{font-size: 24px;line-height: 64px;}
    .login-form form{padding: 14px 40px 50px;}
    .login-box .login-form .submit-btn{margin-top: 40px;}
}

@media screen and (min-width: 1680px) {
    .login-box{padding: 120px 0;}
}


/* ==========================================================================
   首页样式
 ============================================================================ */


 
/* ==========================================================================
   内页样式
 ============================================================================ */
.main{padding: 15px 0 30px;background: #f2f2f2;}
.left-menu{background: #fff;overflow-x: auto;-webkit-overflow-scrolling: touch;}
.left-menu::-webkit-scrollbar{display: none;}
.left-menu ul{display: flex;flex-wrap: nowrap;width: auto;padding: 0 10px;}
.left-menu ul li{display: flex;flex-shrink: 0;flex-grow: 0;padding: 0 10px;}
.left-menu ul li a{display: block;line-height: 40px;}
.left-menu ul li.on a{color: #d41924;}

.right-content{background: #fff;margin-top: 15px;}
.tab-container{position: relative;}
.tab-item{position: absolute;width: 100%;top: 0;left: 0;opacity: 0;}
.tab-item.tab-item-show{opacity: 1;transition: .3s ease;}

.pages{margin-top: 20px;text-align: center;}
.pages span,
.pages a{display: inline-block;vertical-align: top;text-align: center;line-height: 24px;font-size: 12px;margin: 3px;padding: 0 3px;}
.pages a.active{color: #d41924;}
/* .pages span{display: inline-block;vertical-align: top;font-size: 12px;margin: 3px;padding: 0 3px;line-height: 24px;color: #333;} */
.pages form{display: inline-block;vertical-align: top;margin: 3px;}
.pages form input{display: inline-block;vertical-align: top;width: 60px;height: 24px;border: 1px solid #ccc;text-align: center;font-size: 12px;line-height: 22px;}
.pages form button{font-size: 12px;line-height: 24px;margin-left: 3px;vertical-align: top;cursor: pointer;}

@media screen and (min-width: 992px) {
    .main{padding: 20px 0 50px;}
    .left-menu{overflow: hidden;width: 220px;float: left;min-height: 420px;}
    .left-menu ul{display: block;width: 100%;padding: 0;}
    .left-menu ul li{display: block;width: 100%;padding: 0;}
    .left-menu ul li a{padding: 10px 25px;position: relative;font-size: 16px;}
    .left-menu ul li a::after{display: block;content: '';width: 200px;height: 1px;background: #f6f6f6;position: absolute;bottom: 0;left: 50%;margin-left: -100px;}
    .left-menu ul li.on a{background: #d41924;color: #fff;}
    .left-menu ul li.on a::after{display: none;}
    .right-content{margin-top: 0;float: right;width: 660px;min-height: 420px;}

    .pages{margin-top: 36px;}
    .pages span,
    .pages a{line-height: 30px;font-size: 14px;margin: 4px;}
    .pages form{margin: 4px;}
    .pages form input{height: 30px;font-size: 14px;line-height: 28px;}
    .pages form button{font-size: 14px;line-height: 30px;margin-left: 4px;}
}

@media screen and (min-width: 1280px) {
    .left-menu{width: 240px;}
    .left-menu ul li a::after{width: 220px;margin-left: -110px;}
    .right-content{margin-top: 0;float: right;width: 940px;}
    .pages .num:hover{background: #d41924;color: #fff;border-color: #d41924;}
    .pages .btn-prev:hover,
    .pages .btn-next:hover{background: #d41924;color: #fff;border-color: #d41924;}
}

@media screen and (min-width: 1440px) {
    .left-menu{width: 260px;min-height: 692px;}
    .right-content{width: 1000px;min-height: 692px;}
}


 /* 列表页
 ============================================================================ */
.list-wrapper{padding: 20px 15px 24px;}

.item-list li{margin-bottom: 8px;}
.item-list li a{display: block;background: #fafafa;padding: 10px 30px 10px 15px;line-height: 22px;color: #666;position: relative;}
.item-list li a::after{display: block;content: '';width: 30px;height: 30px;background: url(../image/arrow.png) no-repeat center center;background-size: 10px 16px;position: absolute;right: 0;top: 50%;margin-top: -15px;}

@media screen and (min-width: 992px) {
    .list-wrapper{padding: 30px 18px 40px;}
    .item-list li{margin-bottom: 10px;}
    .item-list li a{padding: 12px 50px 12px 20px;font-size: 16px;}
    .item-list li a::after{width: 50px;background-size: 12px 20px;}
}

@media screen and (min-width: 1280px) {
    .item-list li a:hover{background: #d41924;color: #fff;}
    .item-list li a:hover::after{background: url(../image/arrow-on.png) no-repeat center center;transition: .3s;}
}

@media screen and (min-width: 1440px) {
    .item-list li a{padding: 15px 50px 15px 20px;}
}

/* 内容页
============================================================================ */
.detail-wrapper{padding: 20px 20px 40px;}
.detail-wrapper h3{font-size: 20px;line-height: 30px;}
.detail-wrapper .logo-img{max-width: 90%;margin: 20px 0;}
.detail-wrapper .text{border-left: 1px solid #d41924;padding-left: 15px;}
.detail-wrapper .text p{line-height: 24px;margin-bottom: 10px;color: #666;}
.detail-wrapper .text p:last-child{margin-bottom: 0;}

@media screen and (min-width: 992px) {
    .detail-wrapper{padding: 40px 40px 60px;}
}

@media screen and (min-width: 1280px) {
    .detail-wrapper{padding: 56px 60px 80px;}
    .detail-wrapper .logo-img{margin: 30px 0;}
    .detail-wrapper .text{border-width: 2px;padding-left: 20px;}
    .detail-wrapper .text p{margin-bottom: 20px;}
}