@charset "utf-8"; 
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: rgba(107, 107, 107, 0.06);
}

::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: rgba(107, 107, 107, 0.06);
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
}

::-webkit-scrollbar-track:hover {
    background-color: rgba(107, 107, 107, 0.1);
    -webkit-box-shadow: inset 0 0 6px rgba(0,153,153,.4);
}

::-webkit-scrollbar-track:active {
    background-color: rgba(107, 107, 107, 0.2);
    -webkit-box-shadow: inset 0 0 6px rgba(0,153,153,.1);
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: rgb(186 186 186 / 80%);
    -webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,.1);
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(107, 107, 107, 0.8);
    -webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,.1);
}

::-webkit-scrollbar-thumb:active {
    background: rgba(21, 14, 0, 0.5);
}

li {
    list-style-type: none;
}

input,textarea {
    outline: none;
}
a{
    text-decoration: none;
}

body{display:block;min-height:500px;padding:0;margin:0;font-family: "Montserrat", "sans-serif";background: #052e66 url(../image/background.png) no-repeat top center;background-size: 100% auto;background-attachment: fixed;}

header{overflow:hidden;width:100%;position:relative;padding: 20px 0;}
header .header-logo{float: left;width: 200px;height: 41px;}
header .header-logo a{display: block;float: left;width: 100%;margin-left: 20px;}
header .header-logo a img{width: 100%;}

.wrap{overflow: hidden;width: 100%;max-width: 1400px;margin: 0 auto;}
.banner-title{overflow: hidden; margin: 0 auto;}
.banner-title h1{font-size: 60px;line-height: 80px;color: #fff;text-align: center;margin-bottom: 20px;}
.banner-title p{font-size: 20px; line-height: 24px; color: #fff; text-align: center;}
.okx-app{overflow: hidden; margin-top: 60px;}
.app-image{width: 26%;overflow: hidden;}
.app-image img{width: 100%; float: left;}
.app-show{float: right;margin-top: 80px;}
.app-show h3{font-size: 30px;line-height: 40px;font-weight: bold;color: #fff;margin-bottom: 60px;}
.app-show .feature{overflow: hidden; margin-bottom: 20px;}
.app-show .feature p{color: #8090ae;font-size: 14px;line-height: 24px;}
.app-show .feature p strong{color: #fff; font-weight: bold; font-size: 20px; line-height: 40px;}
.app-show .new-account{overflow: hidden;margin-top: 80px;}
.app-show .new-account a{display: block;width: 180px;background: #fff;color: #222;text-align: center;line-height: 60px;border-radius: 5px;}
.app-show .new-account a:hover{
    background: #fffe4d;
}

.okx-about{overflow: hidden;margin-top: 60px;padding: 40px 0;}
.okx-about .about-view{width: 50%;float: left;}
.okx-about .about-view h3{color: #fff;font-weight: bold;font-size: 40px;line-height: 60px;margin-bottom: 40px;}
.okx-about .about-view p{color: #ffffff;font-size: 14px;line-height: 24px;margin-bottom: 10px;}
.okx-about .about-gift{width: 50%;float: left;text-align: center;}
.okx-about .about-gift .gift{width: 260px;}
.okx-about .about-gift p{color: #fff;font-size: 16px;line-height: 24px;}

.main-coins{overflow: hidden;float: left;width: 100%;}
.main-coins .main-coins-box{width: 100%;margin: 0 auto;border-radius: 5px;overflow: hidden;background: #fff;}
.main-coins h3{color: #fff;font-weight: bold;font-size: 40px;line-height: 60px;margin-bottom: 40px;text-align: center;}
.main-coins ul{overflow: hidden;}
.main-coins ul li{display: block;overflow: hidden;border-bottom: 1px solid #ddd;padding: 20px 0 20px 40px;}
.main-coins ul li span{height: 40px;line-height: 40px;width: calc(20% - 8px);float: left;color: #555;}
.main-coins ul li span.icon{width: 40px;float: left;margin-right: 10px;}
.main-coins ul li span.icon img{width: 100%;display: block;}
.main-coins ul li span.buy a{background: #1475ab;color: #fff;width: 80px;text-align: center;display: block;border-radius: 5px;margin: 0 auto;}
.main-coins ul li span.buy a:hover {background: #80ca21;}
.main-coins ul li:first-child{border-top: 1px solid #006256;}
.main-coins ul li.rank-title{border-bottom: 0;background: #80ca21;}
.main-coins ul li.rank-title span{color: #fff;}
.main-coins ul li.rank-title span.trade{text-align: center;}

footer {overflow: hidden;float: left;}
.flink {display: flex;margin-top: 74px;margin-bottom: 39px;}
.flink h3 {display: block;font-size: 14px;color:#fff;}
.flink li {margin-right: 18px;}
.flink li a {font-size: 14px;color: #aaa;}
.copyrights {overflow: hidden;padding: 20px 0;}
.copyrights p {color: #aaa;line-height: 24px;position: relative;text-align: center;font-size: 14px;}
.copyrights a {color: #aaa;}
.copyrights a:hover {color: #fff;}

@media screen and (max-width: 1200px) { 
    .app-show{
        width: 80%;
        margin: 0 auto;
        margin-bottom: 20px;
        float: none;
    }
    .app-image{
        width: 80%;
        margin: 0 auto;
    }
    .okx-about .about-view{
        width: 80%;
        margin: 0 auto;
        float: none;
    }
    .okx-about .about-gift{
        width: 100%;
    }

}