/******响应式手机版头部通用*******/
/******响应式手机版头部通用*******/
@media screen and (min-width: 1100px) {
    .header-box {
        display: none;
    }
}
@media screen and (max-width: 1100px) {
    #banner,
    .inner-banner{
        margin-top: 50px;
    }
    .header-box {
        display: block;
    }
    #header {
        display: none;
    }
    .header-box {
        position: fixed;
        width: 100%;
        left: 0;
        top: 0;
        z-index: 99;
        transition: 0.5s;
        background: #fff;
        box-shadow: 0 0 15px 0 rgba(0,0,0,.3);
    }
    .header-box.scoll, .header-box.hnner, .header-box:hover {
        background: #fff;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    }
    .header-box.scoll .nav li a, .header-box.hnner .nav li a, .header-box:hover .nav li a {
        color: #666666;
        opacity: 1;
        filter:alpha(opacity=100);
    }
    .header-box.scoll .nav li a:before, .header-box.hnner .nav li a:before, .header-box:hover .nav li a:before {
        background: #ff2020;
    }
    .header-box.scoll .nav li:hover a, .header-box.scoll .nav li.current a, .header-box.hnner .nav li:hover a, .header-box.hnner .nav li.current a, .header-box:hover .nav li:hover a {
        color: #ff2020;
    }
    .header {
        padding: 0 15px;
        position:relative;
        z-index:111;
        height: 50px;
        background: #fff;
    }
    .logo {
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
        top: 0;
        z-index: 56;
        display: flex;
        justify-content:center;
        align-items:center;
    }
    .logo img{
        height: 35px;
        width: auto;
    }
    .header-right {
        float: right;
        margin-top: 24px;
    }
    .nav {
        float: left;
    }
    .nav li {
        float: left;
        padding-right: 115px;
        line-height: 1;
    }
    .nav li:last-child {
        padding-right: 0;
    }
    .nav li a {
        display: block;
        line-height: 1;
        font-size: 16px;
        opacity: 0.6;
        filter:alpha(opacity=60);
        color: #ffffff;
        padding-bottom: 35px;
        position: relative;
    }
    .nav li a:before {
        content:"";
        width: 100%;
        height: 4px;
        background: #fff;
        position: absolute;
        left: 0;
        bottom: -1px;
        transform-origin:100%;
        -webkit-transform-origin:100%;
        -webkit-transition:-webkit-transform .4s cubic-bezier(.4, 0, .2, 1);
        transition:-webkit-transform .4s cubic-bezier(.4, 0, .2, 1);
        transition:transform .4s cubic-bezier(.4, 0, .2, 1);
        transition:transform .4s cubic-bezier(.4, 0, .2, 1), -webkit-transform .4s cubic-bezier(.4, 0, .2, 1);
        transform:scaleX(0);
        -webkit-transform:scaleX(0);
        visibility:hidden\9;
    }
    .nav li:hover a, .nav li.current a {
        opacity: 1;
        filter:alpha(opacity=100);
    }
    .nav li:hover a:before, .nav li.current a:before {
        transform:scaleX(1);
        -webkit-transform:scaleX(1);
        -moz-transform:scaleX(1);
        transform-origin:0;
        -webkit-transform-origin:0;
        visibility:visible\9;
    }
    .menubox {
        width: 100%;
        position: absolute;
        left: 0;
        top: 91px;
        background: #ff2020;
        filter:alpha(opacity=80);
        background: rgba(0, 120, 215, 0.8);
    }
    .menuwr h2 {
        float: left;
        color: #ffffff;
        font-size: 50px;
        font-weight: normal;
        text-transform: uppercase;
        margin-right: 54px;
        line-height: 1;
        margin-top: 12px;
    }
    .menulist {
        float: left;
        padding-left: 45px;
        border-left: 1px solid #fff;
        border-left:1px solid rgba(255, 255, 255, 0.3);
        min-height: 110px;
        margin-top: 12px;
    }
    .meun-down {
        display: none;
    }
    .menuwr {
        padding: 28px 0 32px;
    }
    .menulist li {
        margin-bottom: 16px;
    }
    .menulist li a {
        display: block;
        line-height: 1;
        color: #ffffff;
        font-size: 14px;
    }
    .menulist li a:hover, .menulist li a.active {
        color: #ff9e00;
    }
    .menuimg {
        float: right;
        width: 250px;
        line-height: 1;
        overflow: hidden;
    }
    .menuimg img {
        display: block;
        width: 100%;
        height: auto;
        line-height: 1;
    }
    .sideLayer{
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        z-index: 110;
        background: rgba(0,0,0,.3);
        display: none;
    }
    .menubtn {
        width:25px;
        position:absolute;
        left:15px;
        top:0;
        height: 100%;
        z-index: 80;
        display: flex;
        justify-content:center;
        align-items:center;
    }
    .menubtn span {
        display:block;
        width:30px;
        height:3px;
        background:#000;
        position:relative;
        vertical-align: middle;
        -webkit-transition-duration: .3s, .3s;
        -moz-transition-duration: .3s, .3s;
        -ms-transition-duration: .3s, .3s;
        -o-transition-duration: .3s, .3s;
        transition-duration: .3s, .3s;
        -webkit-transition-delay: .3s, 0s;
        -moz-transition-delay: .3s, 0s;
        -ms-transition-delay: .3s, 0s;
        -o-transition-delay: .3s, 0s;
        transition-delay: .3s, 0s;
    }
    .menubtn span:after, .menubtn span:before {
        content:"";
        position: absolute;
        display: inline-block;
        width: 100%;
        height: 3px;
        left: 0;
        background-color: #000;
        -webkit-transition-duration: .3s, .3s;
        -moz-transition-duration: .3s, .3s;
        -ms-transition-duration: .3s, .3s;
        -o-transition-duration: .3s, .3s;
        transition-duration: .3s, .3s;
        -webkit-transition-delay: .3s, 0s;
        -moz-transition-delay: .3s, 0s;
        -ms-transition-delay: .3s, 0s;
        -o-transition-delay: .3s, 0s;
        transition-delay: .3s, 0s
    }
    .menubtn span:before {
        top: -7px;
        -webkit-transition-property: top, transform;
        -moz-transition-property: top, transform;
        -ms-transition-property: top, transform;
        -o-transition-property: top, transform;
        transition-property: top, transform;
        width: 120%;
    }
    .menubtn span:after {
        bottom: -7px;
        -webkit-transition-property: bottom, transform;
        -moz-transition-property: bottom, transform;
        -ms-transition-property: bottom, transform;
        -o-transition-property: bottom, transform;
        transition-property: bottom, transform;
        width: 80%;
    }
    .navigate {
        position:fixed;
        width:80%;
        height:100%;
        background:#fff;
        box-sizing:border-box;
        left:-100%;
        top:50px;
        overflow-y:auto;
        z-index: 120;
        padding:0 2%;
    }
    .navigateli {
        width:100%;
    }
    .navigateli >li {
        border-bottom:1px solid #dfdfdf;
        position: relative;
    }
    .navigateli >li i.fa{
        position: absolute;
        top:15px;
        right: 10px;
        display: none;
    }
    .navigateli >li.on >a {
        background:#ff2020;
        color:#fff;
    }
    .navigateli >li >a {
        display:block;
        text-align:left;
        padding-left: 15px;
        color:#222;
        font-size:18px;
        height:50px;
        line-height:50px;
    }
    .menudowns {
        padding:10px 0 14px;
        border-top:1px solid #dfdfdf;
        display:none;
    }
    .menudowns li {
        margin-bottom:10px;
        text-align:left;
        padding-left: 15px;
    }
    .menudowns li:last-child {
        margin-bottom:0;
    }
    .menudowns li a {
        display:inline-block;
        color:#999999;
        font-size:16px;
        padding-left: 15px;
    }
    .mb-lan{
        position: absolute;
        cursor: pointer;
        right: 15px;
        z-index: 60;
        top: 0;
        height: 100%;
        width: 24px;
        background: url("../images/mobile/mb-globe.png") no-repeat center;
    }
    .mb-lanList{
        position: fixed;
        z-index: 99;
        width: 30%;
        right: 0;
        top: 50px;
        background: #fff;
        padding: 10px 15px;
        box-shadow: 0 0 10px 0 rgba(0,0,0,.3);
        border-bottom-right-radius: 4px;
        border-bottom-left-radius: 4px;
        display: none;
    }
    .mb-lanList li{
        margin-bottom: 10px;
    }
    .mb-lanList li:last-child{
        margin-bottom: 0;
    }
    .mb-lanList li a{
        color: #000;
    }
    .newsear {
        width:100%;
        margin-top: 30px;
    }
    .newsear form {
        border: 1px solid #eee;
        overflow: hidden;
    }
    .newsear .sub {
        width:40px;
        height:40px;
        background:url(../images/mobile/q-11.png) no-repeat center;
        border:0px none;
        float:left;
        background-size:20px;
    }
    .newsear .pt {
        float:left;
        height:40px;
        width:70%;
        border:0px none;
        padding-left:5%;
        font-size:16px;
        border-left: 1px solid #eee;
        outline: none;
    }
    .mb-side-social{
        position: absolute;
        left: 0;
        bottom: 80px;
        width: 100%;
        text-align: center;
    }
    .mb-side-social a{
        width: 25%;
        float: left;
        text-align: center;
    }
    .mb-side-social a .icon{
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: #ECECEC;
        line-height: 34px;
        color: #888;
    }
}

/****头部语言选择效果*****/
#lanSelBox{
    font-size:16px;
    background:#fff;
    border-radius:4px;
    position: relative;
}
.current_lang{
    cursor:pointer;
    text-transform:uppercase;
    overflow:hidden;
}
.lang.selected{
    display:none;
}
.lang img,
.lang span.lang-txt{
    display:inline-block;
    margin-left:5px;
    vertical-align:middle;
    color: #444444;
}
.lang span.lang-txt{
    position:relative;
    top:-1px;
    font-weight:700;
}
.lang img{
    width:20px;
    margin-left:0;
}
.lang span span{
    color:#999;
    font-weight:400;
}
.lang i.chevron.down{
    font-size:12px;
    position:relative;
    top:-1px;
    margin-left:3px;
}
.more_lang{
    transform:translateY(-20px);
    opacity:0;
    cursor:pointer;
    display:none;
    position: absolute;
    right: 0;
    top: 100%;
    width: 180px;
    background: #fff;
    -webkit-transition: all .3s cubic-bezier(.25, 1.15, .35, 1.15);
    -moz-transition:    all .3s cubic-bezier(.25, 1.15, .35, 1.15);
    -o-transition:      all .3s cubic-bezier(.25, 1.15, .35, 1.15);
    -ms-transition:     all .3s cubic-bezier(.25, 1.15, .35, 1.15);
    transition:         all .3s cubic-bezier(.25, 1.15, .35, 1.15);
}
.more_lang .lang{
    padding: 10px 15px;
}
#lanSelBox.active .more_lang{
    display:block;
}
.more_lang.active{
    opacity:1;
    transform:translateY(-0px);
}
.more_lang .lang:hover{
    background:#5766b2;
    color:#fff;
}
.more_lang .lang:hover span{
    color:#fff;
}
#lanSelBox:hover,
#lanSelBox.active{
    box-shadow:rgba(0,0,0,0.2) 0 5px 15px;
    -webkit-transition: all 0.3s cubic-bezier(0,.99,.44,.99);
    -moz-transition:    all 0.3s cubic-bezier(0,.99,.44,.99);
    -o-transition:      all 0.3s cubic-bezier(0,.99,.44,.99);
    -ms-transition:     all 0.3s cubic-bezier(0,.99,.44,.99);
    transition:         all 0.3s cubic-bezier(0,.99,.44,.99);

}
#lanSelBox.active .more_lang .lang{
    border-top:1px solid #eaeaea;
}
