@font-face {
    font-family: "AlibabaPuHuiTi";
    src: url("../font/AlibabaPuHuiTi-3-65-Medium.woff2") format("woff2"),
    url("../font/AlibabaPuHuiTi-3-65-Medium.woff") format("woff");
    font-display: swap;
    font-weight: initial;
}
@font-face {
    font-family: "AlibabaPuHuiTi";
    src: url("../font/AlibabaPuHuiTi-3-105-Heavy.woff2") format("woff2"),
    url("../font/AlibabaPuHuiTi-3-105-Heavy.woff") format("woff");
    font-display: swap;
    font-weight: 900;
}

*{padding: 0; margin: 0; box-sizing: border-box; font-family: 'AlibabaPuHuiTi';}

body{background-color: #130342;}
@media (min-width: 1201px) {
    .mobile-show{display: none;}
    .pc-show{display: block;}
    .banner{width: 100%; height: 43.1vw; background-image: url(../images/banner.png); background-size: 100% 100%; position: relative; z-index: 2; padding-top: 38.5vw;}
    .banner .rule-box{ width: 62.5vw; height: 31.25vw; background-image: url(../images/rule-bg.png); background-size: 100% 100%; margin: 0 auto; position: relative; z-index: 3;  padding: 3vw 5.2vw 0 5.2vw;}
    .banner .rule-box .title{ width: 20.3vw; height: 3.65vw; background-image: url(../images/rule-title-bg.png); background-size: 100% 100%; margin: 0 auto; display: flex; align-items: center; justify-content: center; font-size: 44px; color: #13ffb4; font-weight: bold; margin-bottom: 1.8vw;}
    .banner .rule-box li{list-style: none; padding-left: 2.6vw; color: #fff; font-size: 24px; margin-bottom: 20px; position: relative;}
    .banner .rule-box li::before {content: "";position: absolute;left: 0;top: 0.25em; width: 1.3vw;height: 1.3vw;background: url(../images/li-style.png) no-repeat center center;background-size: contain;}
    .banner .rule-box li:last-child::before{top: 0.7em;}

    .banner .rule-box li span{color: #13ffb4;}
    .banner .rule-box li span.b{font-weight: bold; font-size: 36px;}
    .banner .rule-box .btn{ width: 18.3vw; height: 3.38vw; margin: 0 auto; font-size: 36px; font-weight: bold; display: flex; align-items: center;justify-content: center; background-image: url(../images/btn-bg.png); background-size: 100% 100%; margin-top: 2vw; cursor: pointer;}


    .font-area{ width: 100%; min-height: 81vw; background-image: url(../images/font-area-bg.png); background-size: 100% auto; position: relative; z-index: 1; margin-top: -10vw; padding-top: 44vw;}
    .font-area .desc-font { width: 73vw; height: 10vw;  background-image: url(../images/desc-font-bg.png); background-size: 100% 100%; margin: 0 auto; display: flex; align-items: center; justify-content: center; position: relative; z-index: 2; }
    .font-area .desc-font p { font-size: 28px; width: 60%; }

    .video-area{ width: 100%; height: 40vw; background-image: url(../images/video-box-bg.png); background-size: 100% 100%; position: relative; z-index: 3; margin-top: -25vw; padding-top: 10vw;}
    .video-area .video-box{ width: 38vw; height: 21.8vw; margin-left: 44.5vw; background-image: url(../images/video-bg.png); background-size: 100% 100%; display: flex; align-items: center; justify-content: center;}
    .video-area .video-box iframe{width: 90%; height: 80%;}

    .bootom{ width: 100%; height: 40vw;background-image: url(../images/bottom.png),url(../images/bottom-bg.png); background-position: bottom center,top center; background-repeat: no-repeat; background-size: 100% auto,100% auto; position: relative; z-index: 2;}
    
    .bootom .media-box{ width: 58.8vw; margin: 0 auto; display: flex; align-items: center; justify-content: center; height: 11.4vw; padding-top: 5vw;}
    

}

@media (min-width: 1201px) and (max-width: 1499px){

    .banner .rule-box .title{ font-size: 34px;}
    .banner .rule-box li{ font-size: 12px;}
    .banner .rule-box .btn{ font-size: 24px;}
    .font-area .desc-font p{ font-size: 16px;}
    .banner .rule-box li span.b{ font-size: 24px;}


}

@media (min-width: 1500px) and (max-width: 1759px){

    .banner .rule-box .title{ font-size: 38px;}
    .banner .rule-box li{ font-size: 16px;}
    .banner .rule-box .btn{ font-size: 28px;}
    .font-area .desc-font p{ font-size: 20px;}
    .banner .rule-box li span.b{ font-size: 28px;}

}


@media (min-width: 1760px) and (max-width: 2110px) {

    .banner .rule-box .title{ font-size: 42px;}
    .banner .rule-box li{ font-size: 20px;}
    .banner .rule-box .btn{ font-size: 32px;}
    .font-area .desc-font p{ font-size: 24px;}
    .banner .rule-box li span.b{ font-size: 32px;}

}


@media (max-width: 1200px) {
    
    .mobile-show{display: block;}
    .pc-show{display: none;}    
    .banner{width: 100%; height: 113vw; background-image: url(../images/banner-m.png); background-size: 100% 100%; position: relative; z-index: 2; padding-top: 103vw;}

    .banner .rule-box{ width: 92vw; margin: 0 auto; height: 137vw; background-image: url(../images/rule-bg-m.png); background-size: 100% auto; background-repeat: no-repeat; background-position: bottom; padding-top: 6vw;}
    .banner .rule-box .title{ width: 55vw; height: 10vw; background-image: url(../images/rule-title-bg-m.png); background-size: 100% 100%; margin: 0 auto; display: flex; align-items: center; justify-content: center; font-size: 6vw; color: #13ffb4; font-weight: bold; }
    .banner .rule-box ul{ list-style-type: none; margin-top: 15vw;}
    .banner .rule-box li{ width: 76.6vw; color: #fff; font-size: 3.5vw; margin: 0 auto; margin-bottom: 5.3vw; line-height: 150%;}
    .banner .rule-box li span{color: #13ffb4;}
    .banner .rule-box li span.b{font-weight: bold; font-size: 4vw;}
    .banner .rule-box .btn{ width: 46.6vw; height: 9vw; margin: 0 auto; background-image: url(../images/btn-bg.png); background-size: 100% 100%; display: flex; align-items: center;justify-content: center; font-size: 5vw; font-weight: bold; margin-top: 8vw; }


    .font-area{ width: 100%; height: 210vw; background-image: url(../images/font-area-bg-m.png); background-size: 100% auto;position: absolute; z-index: 1; margin-top: -46vw; padding-top: 190vw;}
    .font-area .desc-font{ width: 100%; height: 30vw; background-image: url(../images/desc-font-bg-m.png); background-size: 100% 100%; display: flex; align-items: center; justify-content: center;}
    .font-area .desc-font p{ width: 80%; font-size: 3vw;}

    .video-box{ width: 92vw; height: 52.6vw; margin: 0 auto; background-image: url(../images/video-bg.png); background-size: 100% 100%; margin-top: 190vw; display: flex; align-items: center; justify-content: center;}
    .video-box iframe{width: 90%; height: 80%;}

    .bootom{ width: 100%; height: 96vw; background-image: url(../images/bottom-m.png),url(../images/video-decoration-m.png); background-size: 100% auto , 100% auto; background-repeat: no-repeat,no-repeat; background-position: bottom center,0 -200vw; padding-top: 25vw; margin-top: -15vw;}
    .bootom .media-box{ width: 85%; margin: 0 auto; display: flex; align-items: center; justify-content: center; flex-wrap: wrap;}
    .bootom .media-box a{flex: 0 0 25%; display: flex; align-items: center; justify-content: center;}

}