html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,code,del,dfn,em,img,q,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,button,input,textarea {margin: 0; padding: 0;}
fieldset,img {border: 0}
:focus {outline: 0}
h1,h2,h3,h4,h5,h6,code {font-size: 100%}
input,button,textarea,select,optgroup,option{font-family: inherit;font-size: inherit;font-style: inherit;font-weight: inherit}
em,i{font-style: normal}
ol,ul{list-style: none}
textarea{overflow: auto; resize: none}
a,button{cursor: pointer;color: #eaeaea;}
table {border-collapse: collapse; border-spacing: 0}
caption,th {text-align: left}
sup,sub {font-size: 100%;vertical-align: baseline}
:link,:visited,ins {text-decoration: none}
a:hover {text-decoration: none;}
@font-face { font-family: 'Pattaya'; src: url("../font/Pattaya-Regular.ttf"); font-weight: normal; font-style: normal;}
@font-face { font-family: 'K2D'; src: url("../font/K2D/K2D-Regular.ttf"); font-weight: normal; font-style: normal;}
@font-face { font-family: 'K2D'; src: url("../font/K2D/K2D-Bold.ttf"); font-weight: bold; font-style: normal;}
@font-face { font-family: 'K2D'; src: url("../font/K2D/K2D-Light.ttf"); font-weight: 300; font-style: normal;}
@font-face { font-family: 'K2D'; src: url("../font/K2D/K2D-Italic.ttf"); font-weight: normal; font-style: italic;}
body{font-family: 'Pattaya', 'K2D', "Source Han Serif SC", "Microsoft YaHei", Arial; font-size: 0.729vw;line-height:1.875vw;color: #eaeaea; background-color: #0a101d;}
.clear{zoom:1}
.clear:after { clear: both; content: '\0020'; display: block;visibility:hidden;height: 0}
.wrap{width: 100%; min-width: 62.5vw; overflow: hidden; position: relative;}
.main{min-width: 62.5vw;margin: 0 auto;position: relative;}
@media screen and (max-width: 62.5vw) {
    .wrap{
        min-width: 100%;
    }
    .main{
        min-width: 100%;
    }
}
.nav{
    background: url('../images/header.webp');
    background-repeat: round;
    height:4.167vw;position: fixed;left: 0;right: 0;top: 0;width: 100%;z-index: 100000;}
.nav .logo{width: 7.083vw;height: 3.594vw;display: block;position: absolute;top: 0.260vw;left: 1.667vw;}
.nav .logo img{width: 100%;height: 100%;}
.nav .menu{
    margin-left: 16.042vw;
    margin-right: 17.604vw;
    display: flex;
    line-height: 4.167vw;
    justify-content: space-between;
    height: 4.167vw;
    align-items: center;
}
.nav li{
    height: 100%;
    font-size: 1.146vw;
    cursor: pointer;
    position: relative;
    transition: color .2s linear;
}
.nav li.active a{
    background: url('../images/active.webp');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: 0.208vw;
}
.nav .point{
    width: 0.573vw;
    height: 0.729vw;
    background: url('../images/header_point.webp');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.nav li:last-child::after{display: none;}
.nav li img{
    position: relative;
}
.nav li:nth-child(1){
    top: -0.104vw;
    background: url('../images/menu1.webp');
    background-repeat: no-repeat;
    background-size: 100%;
    width: 4.479vw;
    height: 1.25vw;
}
.nav li:nth-child(3){
    top: 0.104vw;
    background: url('../images/menu2.webp');
    background-repeat: no-repeat;
    background-size: 100%;
    width: 7.031vw;
    height: 1.719vw;
}
.nav li:nth-child(5){
    top: -0.104vw;
    background: url('../images/menu3.webp');
    background-repeat: no-repeat;
    background-size: 100%;
    width: 6.771vw;
    height: 1.25vw;
}
.nav li:nth-child(7){
    top: -0.104vw;
    background: url('../images/menu4.webp');
    background-repeat: no-repeat;
    background-size: 100%;
    width: 4.531vw;
    height: 1.25vw;
}
.nav li:nth-child(9){
    top: 0.052vw;
    background: url('../images/menu5.webp');
    background-repeat: no-repeat;
    background-size: 100%;
    width: 6.927vw;
    height: 0.833vw;
}
.nav li:nth-child(11){
    top: 0.104vw;
    background: url('../images/menu6.webp');
    background-repeat: no-repeat;
    background-size: 100%;
    width: 5.417vw;
    height: 1.667vw;
}
.nav li:nth-child(13){
    top: -0.208vw;
    background: url('../images/menu7.webp');
    background-repeat: no-repeat;
    background-size: 100%;
    width: 3.854vw;
    height: 1.198vw;
}

.nav li.active:nth-child(1),.nav li:hover:nth-child(1){
    background: url('../images/menu1_selected.webp');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.nav li.active:nth-child(3),.nav li:hover:nth-child(3){
    background: url('../images/menu2_selected.webp');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.nav li.active:nth-child(5),.nav li:hover:nth-child(5){
    background: url('../images/menu3_selected.webp');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.nav li.active:nth-child(7),.nav li:hover:nth-child(7){
    background: url('../images/menu4_selected.webp');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.nav li.active:nth-child(9),.nav li:hover:nth-child(9){
    background: url('../images/menu5_selected.webp');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.nav li.active:nth-child(11),.nav li:hover:nth-child(11){
    background: url('../images/menu6_selected.webp');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.nav li.active:nth-child(13),.nav li:hover:nth-child(13){
    background: url('../images/menu7_selected.webp');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.nav li a{
    text-align: center;
    width: 100%;
    height: 4.167vw;
    display: block;
    position: relative;
    top: -1.406vw;
    min-width: 4.583vw;
    left: 50%;
    transform: translateX(-50%);
}
.nav li a:hover{
    filter: brightness(1.2);
    transition: filter 0.2s linear;
}
.link{position: absolute; right: 0.260vw; top: 0.833vw; display: flex;}
.btn-media a{
    display: block;
    width: 2.396vw;
    height: 2.448vw;
    margin-right:1.146vw;
}
.btn-media a:nth-child(1){
    background: url('../images/media1.webp') no-repeat;
    background-size: 100% 100%;
}
.btn-media a:nth-child(2){
    background: url('../images/media2.webp') no-repeat;
    background-size: 100% 100%;
}
.btn-media a:nth-child(3){
    background: url('../images/media3.webp') no-repeat;
    background-size: 100% 100%;
}
.btn-media a:nth-child(4){
    background: url('../images/media4.webp') no-repeat;
    background-size: 100% 100%;
}


/* 加载动画样式 */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-container {
    text-align: center;
    padding: 1.042vw;
}

.loading-spinner {
    width: 2.083vw;
    height: 2.083vw;
    border: 0.208vw solid #f3f3f3;
    border-top: 0.208vw solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}