* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}
body {
    color: #2c3e50;
    background-color: #f4f4f4;
    font-size: 29px;
    text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    font-family: PingFangSC-Light,'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin:0;
}
a{
    color: #313131;
    text-decoration: none;
}
div, ul, li {
    margin: 0;
    padding: 0;
}
ul, li {
    list-style: none outside none;
}
/*------------------------------------------------*/

.div_header{
    height: 50px;
    line-height: 50px;
    position: relative;
    z-index: 30;
    width: 100%;
    background-color:white;
}
.div_header .title{
    position: absolute;
    left: 0;
    padding-left: 20px;
    font-size:16px;
}
.div_header .title img{
    height: 40px;
    position: relative;
    top: 15px;
    margin-top: -15px;
    margin-right: 6px;
}
.div_header .btn_login_reg{
    position: absolute;
    top: 0;
    right: 0;
    padding-right: 20px;
}
.div_header .btn_login_reg a{
    margin:0 5px;
}
.div_header .nav_btns{
    text-align: right;
    width: 1024px;
    margin:0 auto;
    /* 右侧为「登录 / 注册」按钮预留空间。
       该按钮用 position:absolute;right:0 贴在整个 header 的右边缘，
       而导航是右对齐到 1024px 内容区右边界 —— 当窗口宽度接近 1024（如 1024~1188）
       时两者会互相压住，导航最后一项被登录按钮盖住。留出 160px 即可避开。 */
    padding-right: 160px;
    font-size: 14px;
    color: #4f4f57;
}

.div_header .nav_btns a{
    margin:0 20px;
}
.div_header .nav_btns .a_active{
    color: #448efc;
}

.div_body{
    width: 100%;
    background-color: #ffffff;
}
.real_body{
    width: 1024px;
    margin:0 auto;
    height: 100%;
}
/*-----------------------------------*/
.div_footer{
    width:100%;
    background-color: #2a364c;
}

.div_footer .menu_links{
    width:1024px;
    height: 240px;
    margin:0 auto;
    font-size: 18px;
    line-height:30px;;
    color: #999999;
    padding-top:37px;
}

.div_footer .menu_links .menu_block{
    float: left;
    width: 25%;
}
.div_footer .menu_links .menu_block>a{
    display: block;
}
.div_footer .menu_links .menu_block a{
    color: #999999;
}

.menu_block .label{
    color:#08b2f2;
    font-size: 22px;
    margin-bottom: 24px;
}


.div_footer .div_copyright{
    width:1024px;
    margin:0 auto;
    font-size: 14px;
    color: #999999;
    text-align:center;
    padding-bottom: 5px;
}
.div_footer .div_copyright a{
    color: #999999;
}

/*-----------------------------------*/
.splash_bg{
    min-width: 1024px;
    width: 100%;
    height: 486px;
}
.splash_content{
    height: 100%;
    width: 1024px;
    margin:0 auto;
    position: relative;
}
/*------------------------------------------------*/
/* 移动端汉堡按钮：桌面端始终隐藏 */
.nav_toggle{
    display: none;
}
/*------------------------------------------------*/

/* ============================================================
   移动端适配（公共头部 / 主体容器 / 页脚）
   生效条件：页面 viewport 为 device-width（即 $VIEWPORT_RESPONSIVE=true）。
   未适配的旧页面 viewport=width=1024，max-width 媒体查询不会命中，
   因此桌面端与旧页面表现与改造前完全一致。
   ============================================================ */
@media screen and (max-width: 768px){
    body{ font-size: 16px; }

    /* ---- 头部 ---- */
    .div_header{ height: 56px; line-height: 56px; }
    .div_header .title{
        padding-left: 14px;
        font-size: 0;            /* 隐藏长标题文字，仅保留 Logo 与可访问文本 */
    }
    .div_header .title img{
        height: 40px;
        top: 18px;
        margin-top: -12px;
        margin-right: 0;
    }
    .div_header .btn_login_reg{
        right: 60px;             /* 为汉堡按钮让位 */
        padding-right: 0;
    }
    .div_header .btn_login_reg a{ margin: 0 4px; }
    .div_header .btn_login_reg img{ height: 18px; width: auto; }

    .nav_toggle{
        display: block;
        position: absolute;
        top: 11px;
        right: 10px;
        width: 44px;
        height: 34px;
        padding: 0;
        border: 0;
        background: transparent;
        cursor: pointer;
        z-index: 40;
        -webkit-tap-highlight-color: transparent;
    }
    .nav_toggle span{
        display: block;
        width: 22px;
        height: 2px;
        margin: 6px auto;
        background: #2c3e50;
        border-radius: 2px;
        -webkit-transition: -webkit-transform .22s ease, opacity .22s ease;
        transition: transform .22s ease, opacity .22s ease;
    }
    .nav_open .nav_toggle span:nth-child(1){
        -webkit-transform: translateY(8px) rotate(45deg);
        transform: translateY(8px) rotate(45deg);
    }
    .nav_open .nav_toggle span:nth-child(2){ opacity: 0; }
    .nav_open .nav_toggle span:nth-child(3){
        -webkit-transform: translateY(-8px) rotate(-45deg);
        transform: translateY(-8px) rotate(-45deg);
    }

    /* 折叠导航面板 */
    .div_header .nav_btns{
        display: block;
        position: absolute;
        top: 56px;
        left: 0;
        width: 100%;
        max-height: 0;
        overflow: hidden;
        text-align: left;
        padding-right: 0;        /* 重置桌面端为登录按钮预留的 160px，否则菜单右侧会缺一块 */
        background: #ffffff;
        box-shadow: 0 10px 22px rgba(20,30,50,.10);
        z-index: 35;
        -webkit-transition: max-height .26s ease;
        transition: max-height .26s ease;
    }
    .nav_open .nav_btns{ max-height: 400px; }
    .div_header .nav_btns a{
        display: block;
        margin: 0;
        padding: 0 18px;
        line-height: 50px;
        font-size: 16px;
        border-top: 1px solid #f0f2f5;
        -webkit-tap-highlight-color: rgba(8,178,242,.08);
    }
    .div_header .nav_btns a:active{ background-color: #f5f9fc; }

    /* ---- 主体容器 ---- */
    .real_body{
        width: 100%;
        max-width: 1024px;
        padding-left: 16px;
        padding-right: 16px;
        height: auto;
    }
    .div_body{ overflow-x: hidden; }
    /* 覆盖 .splash_bg 基础定义的 min-width:1024px（见本文件上方），
       页面若已自行覆盖则结果一致，此处作为统一兜底防横向溢出 */
    .splash_bg{ min-width: 0; }

    /* ---- 页脚 ----
       注意：下方 width/height/font-size/line-height/padding 均带 !important。
       原因：公共页脚 .div_footer .div_copyright 的特异性为 (0,2,0)，
       页面级 CSS（如 dd/css/index.css）可能以相同特异性、且在 <head> 中
       后加载的方式把它覆盖回 1024px 固定宽，导致移动端横向溢出。
       移动端页脚统一行为属于公共组件契约，故在此强制。 */
    .div_footer .menu_links{
        width: 100% !important;
        height: auto !important;
        padding: 26px 16px 6px !important;
        font-size: 15px !important;
        line-height: 28px !important;
        overflow: hidden;
    }
    .div_footer .menu_links .menu_block{
        float: none;
        display: inline-block;
        width: 50% !important;
        vertical-align: top;
        margin-right: -4px;
        margin-bottom: 20px;
        padding-right: 12px;
    }
    .menu_block .label{
        font-size: 17px;
        margin-bottom: 10px;
    }
    .div_footer .div_copyright{
        width: 100% !important;
        height: auto !important;
        padding: 6px 16px 20px !important;
        font-size: 13px !important;
        line-height: 1.9 !important;
    }
    .div_footer .div_copyright span{
        display: block !important;
        margin-left: 0 !important;
    }
}
@media screen and (max-width: 420px){
    /* 必须带 !important：否则会被上方 768px 块中的 width:50% !important 压掉 */
    .div_footer .menu_links .menu_block{ width: 100% !important; }
    .div_footer .div_copyright{ font-size: 12px !important; padding: 6px 14px 18px !important; }
}
/*------------------------------------------------*/