@charset "UTF-8";
@import url('./base.css');

/**********************************************/
/* === header === */
header *{ text-align: center; font-weight: 500; color: rgba(0, 0, 0, 0.9); }
header .maxWidth{ display: flex; align-items:center; }

.gnb{ display: flex;}
.gnb a{ transition: .15s ease-in-out; }

/**********************************************/
/* === footer === */
footer{ background: #272727;}
footer *{
    font-weight: 400; text-align: center; font-family: Arial, sans-serif; color: rgba(241, 241, 241, 0.7); font-size: 14px;
}
footer a:hover{ font-weight: 600; color: #FFF; }

footer h1{ margin-bottom: 25px}
footer h1 a{ color: #FFF; font-size: 18px; }
footer p{
    display: block; margin: 0 auto; line-height: 36px; word-break: keep-all;
}

footer p a{ font-weight: 700; }
footer p a::after{
    display: inline-block; width: 2px; height: 14px; margin: 0 7px;
    content: ''; background: #C4C4C4;
}
footer p a:nth-of-type(n+4)::after{ display: none; }


footer .popUp{ 
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 10000;
    display: none; align-items: center; justify-content: center;
    width: 100%; height: 100vh; 
}
footer .popUp.active{ display: flex;}

footer .bg_common:after{
    position: absolute; top: 10vh; right: 5vw; 
    display: flex; align-items: center; justify-content: center;;
    width: 40px; height: 40px;
    border: 4px solid #fff; border-radius: 50%;
    font-size: 28px; content: '⨉'; color: #fff; font-weight: bolder;
    cursor: pointer;
}
footer .popUp .bg_common{
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(0, 0, 0, 0.7);
}

footer .popUp .wrap_pop{ 
    position: relative; z-index: 100; 
    display: none; width: 80vw; height: 80vh; max-width: 1600px; padding: 40px 60px;
    background: #fff; border-radius: 30px;
    color: #272727; white-space: pre-line; text-align: left; font-size: 14px; line-height: 180%;
    overflow-y: auto;
}
footer .popUp .wrap_pop p{
     color: #1A1A1A;
	 text-align: left;
}

footer .popUp .wrap_pop h3{ padding-bottom: 20px; margin-bottom: 10px; color: #272727; font-size: 30px; text-align: center; font-weight: 700;  border-bottom: 4px solid #272727;}
footer .popUp .wrap_pop b{ margin-bottom: 8px; color: #272727; font-size: 22px; text-decoration: underline;}

/**********************************************/
/* === pagenate === */
.pagenate{ display: flex; align-items: center; justify-content: center; width: 100%; }
.pagenate button{
    width: 24px; height: 24px; line-height: 24px;
    margin: 0 3px;
    text-align: center; font-size: 12px; font-weight: 400;
    transition: 0.15s ease-in-out;
}
.pagenate button.active{ background: #3E3A39; color: #fff;}
.page_first, .page_last { background: url('/html/img/user/sub/ico_pageend.svg') no-repeat center !important; }
.page_prev, .page_next { background: url('/html/img/user/sub/ico_pagestep.svg') no-repeat center !important; }
.page_last, .page_next{ transform: rotate(180deg); }

/**********************************************/
/* ========================== responsive */
@media screen and (min-width: 1025px){
    /* === header === */
    header *{ font-size: 21px; }
    header .maxWidth{ height: 100px; }
    header h1 a{ width: 199px; height: 52px; background: no-repeat url('/html/img/user/common/ico_logo_pc.svg') center; background-size: contain;}

    .gnb{ margin: 0 auto 0 24px; }
    .gnb > a{ height: 100px; padding: 0 36px; line-height: 100px; border-bottom: 8px solid transparent; }
    .gnb > a:hover{ border-bottom: 8px solid rgba(0, 0, 0, 0.25);  }
    .gnb > a.active{     border-bottom: 8px solid #757575; background-color: #F8F8F8; }




    .language{display: flex; align-items: center; }
    .language:after{
        display: inline-block; width: 3px; height: 36px; margin: 0 46px;
        background: rgba(26, 26, 26, 0.2); content: '';
    }
    .language a:first-of-type{ margin-right: 10px; }

    .topNav > a:first-of-type{ margin-right: 30px; }

    /* === footer === */
    footer{ padding: 60px 0; }
}
/* ========================== */
@media screen and (max-width: 1600px){
    /* === header === */
    header{ padding: 0 20px;}
    header *{ font-size: 15px; }
    header h1 a{ background-size: 80%;}

    .gnb{ margin: 0 auto 0 14px; }
    .gnb a{ padding: 0 18px; }
    .language:after{ margin: 0 20px;}

    .topNav > a:first-of-type{ margin-right: 15px;}
}
@media screen and (max-width: 1024px){
    /* === header === */
    header{ padding: 0;}
    header .maxWidth{ flex-flow: row wrap; height: 123px; padding-top: 12px; }
    header h1{ 
        order: 1; 
        /* margin-left: 20px;  */
        min-width: 15%; padding: 0 28px; margin-left: 2%;
    }
    header h1 a{ position: relative; top: 10px; width: 42px; height: 40px; background: no-repeat url('/img/user/common/ico_logo_mobile.svg') center;}

    .language{ order: 2; margin-left: auto; }
    .language:after{ display: none;}
    .language a:first-of-type{ margin-right: 15px;}
    /* .language a:first-of-type::after{ content: 'en';}
    .language a:last-of-type::after{ content: '/ ch'; color: rgba(26, 26, 26, 0.7); } */

    .topNav{ order: 3; margin: 0 20px; }
    .topNav .mobile{ position: relative; z-index: 100; }
    .topNav .mobile:hover div{display: block;}
    .topNav .mobile div{
        display: none;
        position: absolute; top: 32px; right: -6px; background: #fff; box-shadow: 0 0 2px rgba(0, 0, 0, 0.9);
    }
    .topNav .mobile div:before{
        position: absolute; right: 10px; top: -9px;
        display: block; font-size: 14px; color: #fff; text-shadow: 0 .5px 1.5px rgba(0, 0, 0, 0.9);
        content: '◢'; transform: rotate(-135deg);
    }
    .topNav .mobile a{ display: block; width: 100px; line-height: 50px; text-align: center;}
    .topNav .mobile a:first-child{ border-bottom: 2px solid #DFDFDF; }

    .gnb{
        order: 4; flex: none;
        width: 100%; height: 44px; margin: auto 0 0 0;
        box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.25); overflow: auto hidden;
    }
    .gnb a{ flex: 1; line-height: 44px; border-bottom: 3px solid #D9D9D9; }
    .gnb a.active{ border-bottom: 3px solid rgba(0, 0, 0, 0.3);  }

    .gnb::-webkit-scrollbar{display: none}

    /* === footer === */
    footer{ padding: 56px 24px; }
    footer p a:nth-of-type(2)::after{ display: none; }

    footer .popUp .wrap_pop{ width: 70vw;}
}
@media screen and (max-width: 768px){
    .gnb a{ flex: none; min-width: 15%; padding: 0 28px; box-sizing: content-box;}

    footer .popUp .wrap_pop{ width: 90vw;}
    footer .bg_common:after{ display: none;}
}
@media screen and (max-width: 375px){

}

.minmenu {
    bottom: 200px;
    display: none;
    left: auto;
    margin: 0;
    position: fixed;
    right: 30px;
    top: auto;
    width: 50px;
    z-index: 9999;
}

.minmenu ul {
    background: #fff;
    border: 1px solid #fff;
    border-radius: 10px;
    box-shadow: 0 2px 9px -1px rgba(198,220,245,.69);
    box-sizing: border-box;
    list-style: none;
    padding: 20px 10px 0;
    position: relative;
    width: 58px;
}

.minmenu ul:before {
    background: url("https://s2.51cto.com/images/100/blog/index/home/wukong.png");
    background-size: 100%;
    content: "";
    display: block;
    height: 49px;
    left: 0;
    position: absolute;
    top: -38px;
    width: 58px;
}

.webp .minmenu ul:before {
    background-image: url("https://s2.51cto.com/images/100/blog/index/home/wukong.png?x-oss-process=image/format,webp");
}

.minmenu ul li {
    color: #585858;
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
    line-height: 49px;
    min-height: 49px;
    position: relative;
    text-align: center;
}

.minmenu ul li:after {
    background: linear-gradient(90deg,hsla(0,0%,97%,0),#eee 50%,hsla(0,0%,93%,0));
    content: "";
    display: block;
    height: 1px;
    width: 100%;
}

.minmenu ul li:first-child {
    border-top: none;
    line-height: 20px;
}

.minmenu ul li:first-child:after {
    margin-top: 12px;
}

.minmenu ul li:first-child button {
    line-height: 20px;
}

.minmenu ul li:last-child:after {
    background: 0 0;
}

.minmenu ul li .iconblog {
    font-size: 20px;
}

.minmenu ul li .blogfenxiang2 {
    color: #9b9b9b;
    font-size: 17px;
}

.minmenu ul li.feedback a {
    background: 0 0;
    color: #585858;
    display: block;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    padding: 13px 0;
}

.minmenu ul li .new_bloger {
    background-color: #ee502f;
    border-radius: 50px;
    color: #fff;
    display: block;
    font-size: 18px;
    font-weight: 500;
    left: -32px;
    line-height: 20px;
    padding: 4px 14px;
    position: absolute;
    text-align: center;
    top: -7px;
    transform: scale(.5);
    white-space: nowrap;
}

.minmenu ul li button {
    background: 0 0;
    color: #585858;
    font-size: 14px;
    font-weight: 400;
    line-height: 49px;
    padding: 0;
}

.minmenu ul li.share {
    position: relative;
}

.minmenu ul li.share:hover .bdsharebuttonbox {
    display: block;
}

.minmenu ul li.share .bdsharebuttonbox {
    display: none;
    left: -25px;
    padding-top: 20px;
    position: absolute;
    top: 21px;
}

.minmenu ul li.share .bdsharebuttonbox .ins {
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 8px 16px 0 hsla(0,0%,40%,.1);
    padding: 10px 0 8px;
    position: absolute;
    text-align: center;
    width: 90px;
}

.minmenu ul li.share .bdsharebuttonbox .ins a {
    background: 0 0;
    color: #2e3d56;
    display: inline-block;
    float: none;
    font-size: 12px;
    height: 32px;
    line-height: 32px;
    margin: 0 0 2px;
    padding-left: 0;
    width: 55px;
}

.minmenu ul li.share .bdsharebuttonbox .ins a:hover,.minmenu ul li.share .bdsharebuttonbox .ins a:hover i {
    color: #3e71f6;
}

.minmenu ul li.share .bdsharebuttonbox .ins a i {
    color: #818797;
    float: left;
    margin-right: 8px;
}

.minmenu ul li.share .bdsharebuttonbox .ins a i.blogfenxiangweibo {
    font-size: 19px;
}

.minmenu ul li.share .bdsharebuttonbox .ins a i.blogfenxiangqq {
    font-size: 18px;
}

.minmenu ul li.share .bdsharebuttonbox .ins a i.blogfenxiangweixin {
    font-size: 20px;
}

.minmenu ul li.share .bdsharebuttonbox .ins img {
    height: 59px;
    width: 59px;
}

.minmenu ul .scrollToTop {
    box-sizing: border-box;
    height: 58px;
    left: 0px;
    line-height: 49px!important;
    position: relative;
    top: 3px;
}

.minmenu ul .scrollToTop:after {
    margin-top: 0!important;
}

.minmenu .emty-menu {
    background: #fff;
    padding: 12px 0 0;
    width: 58px;
}

.minmenu .emty-menu:before {
    display: none;
}

.minmenu .emty-menu .feedback {
    height: 52px;
    padding-top: 8px;
}

.minmenu .emty-menu .feedback a {
    color: #585858;
}

.minmenu .emty-menu .scrollToTop {
    box-sizing: border-box;
    height: 58px;
    left: 0;
    line-height: 58px!important;
    position: static;
    top: 0;
    transform: rotate(-90deg);
    width: 58px;
}

.minmenu .emty-menu .scrollToTop:after {
    margin-top: 0!important;
}

#login_iframe_mask {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,.6);
    z-index: 999;
}
.code_wxbox {
    position: relative;
    width: 172px;
    height: 175px;
    box-sizing: border-box;
    border: 1px solid #d4d6d9;
    margin: 152px auto;
    text-align: center;
    padding-top: 5px
}

.code_wxbox .wx_img img {
    width: 160px;
    height: 160px
}

.hidetips {
    position: absolute;
    left: -5px;
    top: 0;
    display: none
}

.code_wxbox .ts {
    padding: 0 0 10px 0;
    font-size: 14px;
    color: #666
}

.code_wxbox .usehelp a {
    font-size: 12px;
    color: #b8b8b8
}

.code_wxbox .usehelp a:hover {
    text-decoration: underline
}

.code_wbbox .jc_ts {
    text-align: left;
    margin-bottom: 30px;
    padding-left: 8px;
    color: #666
}

.code_wbbox .jc_ts .wb_icon {
    display: inline-block;
    width: 17px;
    height: 16px;
    float: left;
    background: url(../images/wb_icon.png) no-repeat center center;
    margin: 0 6px 0 0
}

.code_wbbox .wb_tx {
    height: 110px;
    margin-bottom: 15px
}

.code_wbbox .wb_tx img {
    width: 110px;
    height: 110px;
    border-radius: 110px
}

/* 产品的下拉菜单 */
/* 下拉按钮样式 */
.dropbtn {
    padding: 16px;
   
    border: none;
    cursor: pointer;
}
 

 
/* 下拉内容 (默认隐藏) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 115px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 999;
	 font-size: 16px;
	
}

 
/* 下拉菜单的链接 */
.dropdown-content a {
    color: black;
    padding: 2px 6px;
    text-decoration: none;
    display: block;
	font-size: 16px;
	line-height: 60px;
	height: 60px;
}
 
/* 鼠标移上去后修改下拉菜单链接颜色 */
.dropdown-content a:hover {background-color: #f1f1f1}
 
/* 在鼠标移上去后显示下拉菜单 */
.dropdown:hover .dropdown-content {
    display: block;
}
 
/* 当下拉内容显示后修改下拉按钮的背景颜色 */
@media screen and (min-width: 1025px){
    /* 容器 <div> - 需要定位下拉内容 */
.dropdown {
    position: relative;
    display: inline-block;
}
    .gnb >div> a{ height: 100px; padding: 0 36px; line-height: 100px; border-bottom: 8px solid transparent; }
    .gnb >div> a:hover{ border-bottom: 8px solid rgba(0, 0, 0, 0.25);  }
    .gnb >div> a.active{     border-bottom: 8px solid #757575; }
}
@media screen and (max-width: 1024px){
    /* 容器 <div> - 需要定位下拉内容 */
.dropdown {
    position: static;
    display: inline-block;
}
    .gnb >div> a{ height: 50px; padding: 0 36px; line-height: 50px;
    width: max-content;border-bottom: 8px solid transparent; }
    .gnb >div> a:hover{ border-bottom: 8px solid rgba(0, 0, 0, 0.25);  }
    .gnb >div> a.active{     border-bottom: 8px solid #757575; }
}