/*  引入iconfont  */
@import "//at.alicdn.com/t/font_3025275_by4ot4gb98.css";

@font-face {
    font-family: 'siyuansongti_bold_diy';
    src: url('../fonts/SOURCEHANSERIFCN-SEMIBOLD.OTF');
    /*src: url('../fonts/SourceHanSerifCN-SemiBold-Alphabetic.eot') format('embedded-opentype'),
    url('../fonts/SourceHanSerifCN-SemiBold-Alphabetic.woff2') format('woff2'),
    url('../fonts/SourceHanSerifCN-SemiBold-Alphabetic.woff') format('woff'),
    url('../fonts/SourceHanSerifCN-SemiBold-Alphabetic.ttf') format('truetype'),
    url('../fonts/SourceHanSerifCN-SemiBold-Alphabetic.svg') format('svg');*/
}



* {margin: 0;padding: 0;}
body {width: 100%;min-width:320px;margin: 0 auto;font: 14px/1.5 '微软雅黑';color: #333;overflow-x: hidden;}
li {list-style: none;}
a {text-decoration: none;color: #333;}
a:hover {color: #333;}
i {font-style: normal;}
button, input, textarea, hr {border: none;outline: none;}
.clear {clear: both;}
table {border-collapse: collapse;max-width: 100%;}
table td {border-collapse: collapse;}
select{outline: unset;}
input:focus ,button{outline: none;}
iframe{width:100%;height: 100%;}
img{border:none;}


.header{
    width:100%;
    margin:0 auto;
    display: block;
    transition: background-color .5s ease;
}
.info-header-bg{
    background: #fff;
    box-shadow: 0 5px 5px rgba(0,0,0,0.05);
}
.header-black .logo-white,.info-header-bg .logo-white{
    display: none !important;
}
.header-black .logo-black,.info-header-bg .logo-black{
    display: block !important;
}
.header-black .nav li a,.info-header-bg .nav li a{
    color:#000 !important;
}
/*.header-black .nav li:hover a,.info-header-bg .nav li:hover a{
    background:rgba(0,0,0,0.3) !important;
}*/
.header-black .header-search,.info-header-bg .header-search{
    border-bottom-color: #000 !important;
}
.header-black .header-search input,.header-black .header-search icon,.info-header-bg .header-search input,.info-header-bg .header-search icon{
    color:#000 !important;
}
.main{
    width: 100%;
    max-width: 1600px;
    margin:0 auto;
    display: block;
}
.flex-between{
    display: flex;
    justify-content: space-between;
}
.flex-zero{
    flex-grow: 0;
    display: block;
}
.flex-one{
    flex-grow: 1;
    display: block;
}
.position-fixed{
    position: fixed;
    top:0;
    left:0;
    right:0;
    z-index:99999;
}
.position-absolution{
    position: absolute;
}

.logo{
    width:150px;
    height: 54px;
    padding:33px 0;
    transition: padding .5s ease;
}
.info-header-bg .logo{
    padding:10px 0;
}
.logo a,.logo a img{
    width:100%;
    height: 100%;
}
.logo a img{
    object-fit: contain;
}
.logo-white{
    display: block;
}
.logo-black{
    display: none;
}
.nav{
    margin-top:50px;
    height: 30px;
    transition: margin-top .5s ease;
}
.info-header-bg .nav{
    margin-top:24px;
}
.nav li{
    padding-bottom: 40px;
}
.nav li a{
    padding:0 50px;
    color:#fff;
    font-size:16px;
    line-height: 30px;
    display: block;
    border-radius: 15px;
    transition: all .33s ease;
    position: relative;
}
.nav li a p{
    opacity: 0;
}
.nav li a span{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height: 100%;
    text-align: center;
    transition: opacity .5s ease;
}
.nav li a span.nav-english{
    opacity: 1;
}
.nav li a span.nav-china{
    opacity: 0;
}
/*.nav li:hover a{
    text-decoration: underline;
}*/
.nav li:hover a span.nav-english{
    opacity: 0;
}
.nav li:hover a span.nav-china{
    opacity: 1;
}
.header-search{
    margin-top:40px;
    font-size:16px;
    line-height: 30px;
    height: 30px;
    border-bottom: 1px solid #fff;
    transition: margin-top .5s ease;
}
.info-header-bg .header-search{
    margin-top:20px;
}
.header-search input{
    width:calc(100% - 30px);
    flex-grow: 0;
    background: unset;
    border:none;
    color:#fff;
    outline: unset;
    display: block;
}
.header-search icon{
    font-size:24px;
    color:#fff;
}
.nav-web-btn{
    color:#fff;
    display: none;
}
.header-black .nav-web-btn{
    color:#000;
}
@media screen and (max-width: 1600px) {
    .header{
        width:96%;
        padding:10px 2%;
        /*background: #fff;*/
    }
    .logo,.info-header-bg .logo{
        padding:0;
    }
    .nav{
        margin-top:24px;
    }
    .nav li{
        padding-bottom: 10px;
    }
    .nav li a{
        padding:0 20px;
    }
    .header-search{
        margin-top:14px;
    }
}
@media screen and (max-width: 1200px) {
    .logo{
        width:auto;
        height: auto;
    }
    .logo a img{
        width: auto;
        height: 50px;
    }
    .header-search{
        display: none;
    }
    .nav,.info-header-bg .nav{
        margin-top:0;
        width: 50px;
        text-align: center;
        height: 50px;
    }
    .nav ul{
        display: none;
    }
    .header{
        /*background: #fff;
        box-shadow: 0 3px 20px rgba(0,0,0,0.05);*/
    }
    .nav-web-btn{
        display: block;
    }
    .nav-web-btn icon{
        font-size:30px;
    }
    .header .nav li a{
        color:#000 !important;
    }
    .header .nav li:hover a{
        /*background:rgba(0,0,0,0.3) !important;*/
    }
    .header .header-search{
        border-bottom-color: #000 !important;
    }
    .header .header-search input,.header .header-search icon{
        color:#000 !important;
    }
    .logo-black{
        /*display: block !important;*/
    }
    .logo-white{
        /*display: none !important;*/
    }
}
/**手机导航**/
.web-nav.position-fixed{
    top:0;
    bottom:0;
    left:0;
    right:0;
    height: 100vh;
    overflow: hidden;
    z-index:999999;
    transition: opacity .5s linear,transform .5s linear,visibility 0s .5s;
}
.web-nav:not([open]){
    transform: translateX(50%) translateY(0);
    pointer-events: none;
    opacity: 0;
}
.web-nav[open]{
    transform: translateX(0) translateY(0);
    pointer-events: inherit;
    opacity: 1;
}
.web-nav-kong{
    width:30%;
    height: 100%;
    position: absolute;
    left:0;
    top:0;
    bottom:0;
    background: rgba(0,0,0,0.5);
}
.web-nav .web-nav-main{
    height: 100%;
    position: relative;
    top:0;
    left:30%;
    right:0;
    width:70%;
    background: #fff;
    padding:0 0 20px 30px;
    box-sizing: border-box;
    overflow:hidden;
}
.web-nav-main-close{
    width:100%;
    text-align: right;
    font-size:30px;
    line-height: 50px;
    height: 50px;
    font-weight: 600;
    display: block;
}
.web-nav-main-close icon{
    padding-right: 30px;
    line-height: 50px;
    vertical-align: middle;
}
.web-nav-main ul{
    width:100%;
    height: calc(100vh - 50px);
    padding-bottom: 20px;
    box-sizing: border-box;
    overflow-y: auto;
    display: block;
}
.web-nav-main li p{
    display: flex;
    justify-content: space-between;
}
.web-nav-main li a{
    max-width: 100%;
    flex-grow: 1;
    font-size:16px;
    line-height: 40px;
    color:#333;
    display: block;
}
.web-nav-main li p icon{
    width:50px;
    text-align: center;
    line-height: 40px;
    vertical-align: middle;
}
.web-nav-main li dl{
    display: none;
}
.web-nav-main li dl dd a{
    width:100%;
    padding-left:30px;
    box-sizing: border-box;
    font-size:14px;
    color:#666;
}

.box{
    width:100%;
    height: 100vh;
}
.scroll-change{
    position: absolute;
    width: 100vw;
}
.scroll-change-box{
    position: relative;
}

.dawei-word{
    width:100%;
    padding:40px 0 20px;
    text-align: center;
    color:#000;
}
.bg-gray{
    background: #f5f5f5;
}
.dawei-word h2{
    width:100%;
    font-size:20px;
    line-height: 32px;
    display: block;
}
.dawei-word p{
    width:100%;
    color:#555;
    font-size:14px;
    line-height: 32px;
    display: block;
}
.dawei-word-icon ul{
    margin:20px auto;
    display: table;
}
.dawei-word-icon li{
    line-height: 30px;
    margin:0 5px;
    float: left;
    display: inline-block;
}
.dawei-word-icon li a{
    position: relative;
}
.dawei-word-icon li a img{
    height: 20px;
    object-fit: contain;
    display: block;
}

.dawei-word-icon li a .dawei-word-wechat-code{
    position: absolute;
    top:20px;
    left:50%;
    transform: translateX(-50%);
    width:100px;
    object-fit: cover;
    display: none;
}
.dawei-word-icon li a .dawei-word-wechat-code img{
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}
.back-top{
    width:100%;
    text-align: center;
    margin:45px auto;
    display: block;
}
.back-top a icon{
    width:24px;
    height: 24px;
    background: #565656;
    color:#fff;
    line-height: 24px;
    border-radius: 50%;
    margin:0 auto;
    font-size:14px;
    display: block;
}
.back-top a span{
    font-size:16px;
    line-height: 30px;
    color:#000;
    display: block;
}

.footer{
    width:100%;
    max-width: 1230px;
    margin:0 auto;
    border-top:1px solid #e5e5e5;
    padding:30px 0;
    font-size:14px;
    line-height: 26px;
    color:#555;
    text-align: center;
}
.footer p ,.footer a{
    color:#555;
}
@media screen and (max-width: 750px) {
    .back-top{
        margin:6vw auto;
    }
    .footer{
        padding:4vw 0;
    }
}


/*  下拉导航  */
.nav-sub{
    width:100%;
    height: 300px;
    position: absolute;
    top:100%;
    left:0;
    background:#fff;
    box-shadow: 0 7px 13px rgba(12,3,6,0.14);
    text-align: center;
    display: none;
}
.nav-sub-main{
    width:47%;
    margin-left:53%;
    display: block;
}
.nav-sub-main dl{
    width:auto;
    text-align: left;
    margin-top:60px;
    display: block;
}
.nav-sub-main dl dt{
    width:100%;
    margin-bottom: 20px;
    font-weight: 600;
    font-size:18px;
}
.info-header-bg .nav li:hover dd a {
    background: unset !important;
}
.nav-sub-main dl a{
    text-align: left;
    font-size:14px;
    color:#020202;
    line-height: 14px;
    height: 14px;
    padding:8px 0;
    text-decoration: unset;
    display: block;
}
.nav-sub-main dl dd:hover a{
    text-decoration: unset;
}
.nav-sub-main dl dd a i{
    width:100%;
    padding-left:20px;
    box-sizing: border-box;
    border-left:2px solid #fff;
    line-height: 14px;
    height: 14px;
    display: block;
}
.nav-sub-main dl dd:hover a i,.nav-sub-main dl dd.on a i{
    border-left:2px solid #000;
}
.nav-sub-dd-img{
    width:50%;
    height: 300px;
    position: absolute;
    top:0;
    left:0;
    display: none;
    z-index: 1;
}
.nav-sub-dd-img img{
    width:100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.nav-sub dl dd:hover .nav-sub-dd-img,
.nav-sub dl dd.on .nav-sub-dd-img,
.nav-sub dl dd:nth-child(2) .nav-sub-dd-img{
    display: block;
}
.nav-sub dl dd.on .nav-sub-dd-img{
    z-index:2;
}
.nav-sub dl dd:hover .nav-sub-dd-img{
    z-index:3;
}


/*   设置页面大小为80%    */
@media screen and (max-width: 1800px) and (min-width: 1200px){
    .eighty_percent {
        width: 80% !important;
        max-width: none !important;
    }
}