:root{
    /* 颜色 */
    /* --bg-lightblue:linear-gradient(180deg, #fcfdff, #edf1f8); */
    --width-top:1420;
    --width:1360;
    --min-width:1000;
    --bg-gray:#f2f5fc;
    
    --bg-black:#0c121c;
        --bg-black:#182233;

    --c-blue1:#0291f3;
    --c-blue2:#006aff;

    --textcolor:rgb(27, 27, 27);
    /* --c-gray1:#f3f3f1;
    --c-front:white;
    --c-mode-text:var(--c-blue1);

    --boder-black1:1px solid rgba(51, 64, 81, 0.1);
    --hover-color:rgba(0, 0, 0, 0.05);

    /* 搜索框 */
    /* --search-height:56; */ 
    /* margin-bottom:calc(var(--search-height)/2*1px); */
}



html{
    width:100%;
    height: 100%;
}
body{
    margin:0;
    padding:0;
    width:100%;
    height: 100%;
    
    font-size:14px;
    font-family: -apple-system, 'Helvetica Neue', sans-serif,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei";
    position: relative;
    color: var(--textcolor);
}
/* 移动端去除点击高亮 */
*{
    -webkit-tap-highlight-color:transparent;
 }
/* 移动端禁用长按页面弹出菜单 */
img,a{
    -webkit-touch-callout: none;
}
a{
    text-decoration: none;
}
/* ios加上这个属性才能自定义输入框、按钮样式 */
input{
    -webkit-appearance: none;
}
.btn{
    user-select: none;
    -ms-user-select: none;
    cursor: pointer;
}








/* header-wrap----------------------------------------------------------- */
#header-wrap{
    width:100%;
    height:80px;
    background-color: var(--bg-gray);
    position: fixed;
    top:0;
    left:0;
    z-index:10;
}
#header-wrap .width{
    width:90%;
    max-width:calc(var(--width-top)*1px);
    height:100%;
    /* background-color: rgba(255, 0, 251, 0.036); */
    margin:0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#header-left{
    display: flex;
    justify-content:flex-start;
    align-items: center;
    height:100%;
}

#logo{
    margin-right:30px;
}

#logo img{
    height:36px;
    user-select: none;
}


#header-left-btn-box{
    height:100%;
    display: flex;
    justify-content:flex-start;
    align-items: center;
}


.header-left-btn{
    height:36%;
    margin:0 26px;
    /* background-color: rgba(0, 0, 255, 0.088); */
    display: flex;
    align-items: center;
    color: var(--textcolor);
    border-bottom: 3px solid rgba(255, 255, 255, 0);    
    font-size:16px;
}
.header-left-btn-arrow{
    height:16px;
    opacity:.8;
}

.chanping-btn{
    position: relative;
    height:100%;
}
.chanping-btn:hover #chanping-fixd{
    display: block;
}
#chanping-fixd{
    display: none;
    transition: all .3s;
    position: absolute;
    left:-80%;
    top:100%;
    width:280px;
    background-color:white;
    border-radius:10px;
    padding:12px 30px;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .05);
}
.chanping-fixd-btn{
    font-size:14px;
    color: var(--textcolor);
    /* opacity:.8; */
    padding:14px 0;
    display: block;
}
.chanping-fixd-btn div{
    display: flex;
    align-items: center;
}
.chanping-fixd-btn img{
    height:18px;
    margin-right:5px;
}
.chanping-fixd-title{
    font-size:18px;
    padding:8px 0 8px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    margin-bottom:12px;
}
.chanping-fixd-btn span{
    font-size:12px;
    opacity:.6;
}


.header-left-current{
    color: var(--c-blue2);
    border-bottom: 3px solid var(--c-blue2);
    font-weight: bold;
}
#header-m-btn,#m-btn-box{
    display: none;
}
#header-right{
    /* background-color: rgba(0, 0, 0, 0.148); */
    height:100%;
    display: flex;
    justify-content:flex-end;
    align-items: center;
}
.header-right-btn{
    padding:11px 34px;
    border-radius:100px;
    font-size:14px;
    font-weight:bold;
    margin-left:20px;
    display: flex;
    justify-content:center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0);
    border:1px solid var(--textcolor);
    color: var(--textcolor);
}
.header-right-current{
    border:1px solid var(--c-blue2);
    background-color: var(--c-blue2);
    color: white;
}




/* hanner-wrap----------------------------------------------------------- */
#banner-wrap{
    background-color: var(--bg-gray);
    height:800px;
}
#banner-wrap .width{
    width:90%;
    max-width:calc(var(--width)*1px);
    height:100%;
    /* background-color: rgba(255, 0, 251, 0.036); */
    margin:0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#banner-left{
    /* background-color: #006aff3c; */
    width:38%;
    padding:10px 0;
}
#banner-right{
    width:60%;
}
#banner-right img{
    width:100%;
}
.banner-text1{
    font-size:32px;
    font-weight: bold;
}
.banner-text2{
    font-size:46px;
    margin:10px 0;
    font-weight: bold;
    color: var(--c-blue2);
}
.banner-text3{
    font-size:26px;
    /* font-weight: lighter; */
}
#banner-btn-box{
    display: flex;
    align-items: center;
    margin-top:40px;
}
.banner-btn{
    padding:14px 40px;
    border-radius:100px;
    font-size:14px;
    font-weight:bold;
    margin-right:20px;
    display: flex;
    justify-content:center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0);
    border:1px solid var(--textcolor);
    color: var(--textcolor);
}
.banner-current{
    border:1px solid var(--c-blue2);
    background-color: var(--c-blue2);
    color: white;
}



/* sec-1----------------------------------------------------------- */
.sec{
    width:100%;
    /* height:600px; */
    background-color: white;
}
.sec .width{
    width:90%;
    max-width:calc(var(--width)*1px);
    height:100%;
    box-sizing: border-box;
    padding:80px 0;
    /* background-color: rgba(255, 0, 251, 0.036); */
    margin:0 auto;
}

.sec-title{
    text-align: center;
    font-size:40px;
    margin:0 auto;
    margin-bottom:10px;
    font-weight: bold;
    /* color: var(--c-blue2); */
}
.sec-title2{
    text-align: center;
    margin:0 auto;
    font-size: 22px;
    /* font-weight: lighter; */
}

#sec1-item-box{
    width:100%;
    display: flex;
    justify-content:space-between;
    /* align-items: center; */
    padding:60px 0;
}
.sec1-item{
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    width:30%;
    padding:0 40px;
    /* background-color: rgba(0, 255, 255, 0.051); */
    text-align: center;
}
.sec1-item img{
    user-select: none;
    height:180px;
    margin-bottom:20px;
}
.sec1-item div{
    font-size:20px;
    font-weight: bold;
    color: var(--c-blue2);
    margin-bottom:12px;
}
.sec1-item span{
    font-size:14px;
    /* font-weight: lighter; */

}








/* sec-2----------------------------------------------------------- */
.sec2{
    background-color: var(--bg-gray);
}
#sec2-liuchengtu{
    width:100%;
    margin-top:100px;
}
.sec2-img1{
    width:100%;
    user-select: none;
}
.sec2-img2{
    width:100%;
    user-select: none;
    display: none;
}

#sec2-text-box{
    width:100%;
    max-width:900px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin:0 auto;
    margin-top: 80px;
}
.sec2-text{
    text-align: center;
}
.sec2-text div{
    font-size:28px;
    font-weight:bold;
    color: var(--c-blue2);
    margin-bottom: 10px;
}
.sec2-text span{
    font-size: 14px;
    /* font-weight: lighter; */
}


/* bottom-wrap----------------------------------------------------------- */
#bottom-wrap{    
    background-color: var(--bg-black);
    width:100%;
    min-height:300px;
    box-sizing: border-box;
    padding: 100px 0 0 0;
    /* border-top: 2px solid rgba(170, 172, 176, 0.207); */
    color: rgba(255, 255, 255, 0.7);
}

#bottom-wrap .width{
    width:90%;
    max-width:calc(var(--width-top)*0.9px);
    height:100%;
    /* background-color: rgba(255, 0, 251, 0.036); */
    margin:0 auto;
    display: flex;
    /* justify-content: space-between; */
    /* align-items: center; */
}

.bottom-m{
    padding-left:200px;    
}
.bottom-m1{
    padding-left: 0;
    flex:1;
}

#bottom-logo-box{
    max-width:calc(var(--width-top)*0.9px);
    margin:0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom:60px;
}

#bottom-logo-box img{
    height:30px;
}
#bottom-logo-box span{
    margin-left:30px;
    font-size:18px;
    color:white;
    /* font-weight: bold;*/
}


#bottom-logo img{
    height:30px;
    margin-bottom:40px;
}
.bottom-text1{
    color: white;
    font-size:18px;
    font-weight: bold;
    margin-bottom:12px;
}
.bottom-text2{
    font-size:14px;
    margin-bottom:6px;
}
.bottom-icon{
    width:16px;
    opacity:.5;
    user-select: none;
    transform:translateY(2px);
    
}
.bottom-a{
    color: rgba(255, 255, 255, 0.7);
    margin-bottom:6px;
    display: block;
    
}




#qrcode-wrap{
    /* background-color: rgba(0, 255, 255, 0.044); */
    display: flex;
    margin-top:30px;

}
.qrcode-box{
    margin-right:40px;
    display: flex;
    flex-direction: column;
    align-items: center;
}



.qrcode{
    width:80px;
    height:80px;
    background-color: rgba(128, 128, 128, 0);
    margin-bottom:6px;
}
.qrcode img{
    height:100%;
    width:100%;
}
.qrcode-text{
    font-size:12px;
}



#bottom-links-box{
    width:90%;
    max-width:calc(var(--width-top)*0.9px);
    margin:0 auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding:60px 0 20px 0;
    /* background-color: #0291f3; */
}
.bottom-link{
    color: rgba(255, 255, 255, 0.7);
    margin-bottom:6px;
    display: block;
    /* margin-left:30px; */
    font-size:14px;  
    padding-right:20px;
    margin-left:20px;
    height:5px;
    font-size:13px;
    line-height:5px;
    border-right: 1px solid rgba(255, 255, 255, 0.7);
}
.bottom-link-end{
    border-right: none;
    padding-right:0px;
}

#bottom-copyright{
    width:90%;
    max-width:calc(var(--width-top)*0.9px);
    margin:0 auto;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size:12px;
    display: flex;
    justify-content: space-between;
    padding:40px 0;
    /* margin-top:100px;     */
}
.beian{
    color: rgba(255, 255, 255, 0.7);
}






/* bottom-contact-sec----------------------------------------------------------- */
.bottom-contact-sec{
    width:100%;
    /* height:600px; */
    /* background-color: var(--c-blue2); */
    color: white;
    background:linear-gradient(#006aff56, #006affde),url(/static/img/index/ship-min.jpg);
    background-size: cover;
    background-position: center;
    
}
.bottom-contact-sec .width{
    width:90%;
    max-width:calc(var(--width)*1px);
    height:100%;
    box-sizing: border-box;
    padding:80px 0;
    /* background-color: rgba(255, 0, 251, 0.036); */
    margin:0 auto;
    /* display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center; */
}
.bottom-contact-sec-btn{
    display: block;
    padding:11px 0px;
    width:140px;
    margin:35px auto 0 auto;
    border-radius:100px;
    font-size:14px;
    font-weight:bold;
    text-align: center;
    /* margin-left:20px;
    display: flex;
    justify-content:center;
    align-items: center; */
    background-color: rgba(255, 255, 255, 0);
    /* border:1px solid var(--textcolor); */
    color: var(--c-blue2);
    background-color:white;
}




/* contact-wrap----------------------------------------------------------- */
#contact-wrap-pc{
    position: fixed;
    z-index:99;
    right:10px;
    top:50%;
    transform: translateY(-50%);
    background-color:white;
    padding:10px;
    box-sizing: border-box;
    border-radius:100px;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .05);
    
}
.contact-btn-pc{
    transition: all .5s;
    position: relative;
    
}
.contact-btn-pc-main{
    padding:15px 10px;
    border-radius:100px;
    /* background-color: var(--bg-gray); */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.contact-btn-pc-main img{
    width:25px;
    
}
.contact-btn-pc-main span{
    margin-top:4px;
    font-size:14px;
}
.pc-i-1{
    opacity:.8;
}
.pc-i-2{
    display: none;
    opacity:.8;
}
.pc-wechat{
    margin-bottom:6px;
}
.pc-wechat-pic-box{

}
.pc-wechat-pic-box div{
    background-color: white;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .05);
    padding:10px;
    border-radius:10px;
}
.pc-wechat-pic-box img{
    width:120px;
    border-radius:5px;
}
.pc-wechat-pic-box span{
    display: block;
    text-align: center;
    font-size:12px;
    opacity:.6;
}
.pc-info{
    display: none;
    position: absolute;
    /* background: #006aff34; */
    right:100%;
    top:50%;
    transform: translateY(-50%);
    padding-right:20px;

}

.pc-tel-info-box{
}
.pc-tel-info-box div{
    background-color: white;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .05);
    padding:10px;
    border-radius:10px;
}
.pc-tel-info-box span{
    font-size:14px;
    opacity:.6;
}
.pc-tel-info-box p{
    margin:0;
    margin-top:6px;
    font-size:22px;
    opacity:.8;
}




.contact-btn-pc:hover .pc-i-2{
    display: block;    
}
.contact-btn-pc:hover .pc-i-1{
    display: none;    
}
.contact-btn-pc:hover .contact-btn-pc-main{
    background-color: #006aff;
    color: white;
}
.contact-btn-pc:hover .pc-info{
    display: block;
}

#contact-wrap-m{
    display: none;
}







/* 设置滚动条的样式 */
::-webkit-scrollbar {
width: 8px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
border-radius: 0px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
border-radius: 0px;
background: rgba(0, 0, 0, 0.1);
-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(0, 0, 0, 0.1);
}