@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-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: bold;
}
*{margin: 0; padding: 0; box-sizing: border-box; font-family: 'AlibabaPuHuiTi';}
a{ text-decoration: none;}
li{list-style: none;}

.top-banner{ width: 100%; height: 59vw; background-image: url(../images/top-img.png); background-size: 100% 100%; padding-top: 34vw;}
.top-banner .steam-btn{ margin: 0 auto; display: flex;}
.content-area{ width: 100%;background-image: url(../images/content-area-bg.png); background-size: 100% 100%; margin-top: -21.5vw; padding-top: 11.5vw;}

.content-area .wolf-decoration{ width: 57.5vw; height: 14vw; background-image: url(../images/wolf-decoration.png); background-size: 35.7vw auto; margin: 0 auto; font-size: 16px; color: #fff; padding-left: 16vw; padding-top: 5.7vw; background-repeat: no-repeat;}
.content-area .video-box{ width: 58.5vw; height: 33.5vw; background-image: url(../images/video-bg.png); background-size: 100% 100%; margin: 0 auto; margin-top: 8vw; display: flex; align-items: center; justify-content: center;}
.content-area .video-box video{ width: 94%; height: 98%;}

.content-area .video-bottom-decoration{ width: 3vw; display: block; margin: 0 auto; margin-top: 10.5vw;}

.content-area .feature{ width: 100%; height: 47vw; background-image: url(../images/feature-bg.png); background-size: 100% 100%; margin-top: 2vw; padding-top: 8vw;}
.content-area .feature .feature-title{ width: 18.5vw; display: block; margin: 0 auto;}
.content-area .feature .feature-box{ width: 57vw; height: 14.5vw; margin: 0 auto; display: flex; margin-top: 3vw;}
.content-area .feature .feature-box .feature-list{ width: 100%; height: 100%; display: flex;}
.content-area .feature .feature-box .feature-list .left{flex: 0.63; width: 100%; height: 100%;}
.content-area .feature .feature-box .feature-list .left img{ width: 100%; height: 100%;}
.content-area .feature .feature-box .feature-list .right{flex: 0.37; width: 100%;height: 100%; padding-left: 1.5vw; background-color: rgba(0, 0, 0, 0.7);}
.content-area .feature .feature-box .feature-list .right .title{ height: 3vw; width: 100%; background-image: url(../images/feature-title-bottom-bg.png); background-size: 100% auto; background-position: left bottom; background-repeat: no-repeat; position: relative; color: #fff;}
.content-area .feature .feature-box .feature-list .right .title .font{ font-size: 22px; font-weight: bold;}
.content-area .feature .feature-box .feature-list .right .title .num{ height: 100%; position: absolute; right: 1vw; top: 0;font-size: 22px; font-weight: bold; color: #32f4f3;}
.content-area .feature .feature-box .feature-list .right .desc{ width: 100%; padding-top: 1.5vw; font-size: 18px; color: #fff;}
.content-area .feature .prop-title{width: 57vw; height: 2.3vw; margin: 0 auto;margin-top: 3vw; font-size: 28px; font-weight: bold; color: #fff; font-family: '微软雅黑';}
.content-area .feature .prop{ width: 66vw; height: 4.4vw;margin: 0 auto; margin-top: 1vw; display: flex; overflow: hidden; position: relative;}
.content-area .feature .prop .prop-list{ width: 4vw; height: 4vw; background-image: url(../images/prop-bg.png); background-size: 100% 100%; display: flex; align-items: center; justify-content: center; margin-right: 0.5vw;}
.content-area .feature .prop .prop-list img{ width: 2.6vw; height: 2.6vw;}
.content-area .feature .prop .navigation{ width: 4vw; height: 4vw; position: absolute;  top: 0; background-image: url(../images/pagination-btn.png); z-index: 10; background-repeat: no-repeat; background-position: center center; background-color: rgba(0, 0, 0, 0.5); cursor: pointer;}
.content-area .feature .prop .next-el{left: 0;}

.content-area .feature .prop .prev-el{transform: rotate(180deg);right: 0;}


.content-area .enroll{ margin-top: 5.5vw;}
.content-area .enroll .enroll-title{width: 18.5vw; display: block; margin: 0 auto; margin-bottom: 3.5vw;}
.content-area .enroll p{ color: #fff; font-size: 20px; text-align: center; margin-bottom: 1.5vw;}
.content-area .enroll p a{color: #32f4f3;}

.content-area .enroll .enroll-btn{ width: 16.5vw; display: block; margin: 0 auto; margin-top: 2vw;}
.content-area .media{ margin-top: 7.5vw;}
.content-area .media .media-title{ margin: 0 auto; display: block;}

.content-area .media .img-list{ width: 57vw; height: 21.5vw; margin: 0 auto; display: flex; flex-wrap: wrap; margin-top: 3.5vw;}
.content-area .media .img-list li{ width: calc((100% - 30px) / 3); height: 10.5vw; margin-bottom: 15px; margin-right: 15px; cursor: pointer;}
.content-area .media .img-list li:nth-child(3n){margin-right: 0}
.content-area .media .img-list li img{ width: 100%; height: 100%;}
.content-area .media .download-img-btn{width: 16.5vw; display: block; margin: 0 auto;margin-top: 2vw;}

.footer{ width: 100%; margin-top: 6.5vw; width: 100%; background-image: url(../images/footer-bg.png); background-size: 100% 100%; height: 31.5vw; position: relative; padding-top: 7.3vw;}
.footer .media-platform-box ul{ width: 63.5vw; margin: 0 auto; display: flex; align-items: center; justify-content: center;}
.footer .media-platform-box ul li{ width: 9vw; height: 6vw; display: flex; align-items: center; justify-content: center;}
.footer .media-platform-box ul li img{ height: 100%;}
.footer .media-platform-box .mail-btn{ width: 29vw; display: block; margin: 0 auto; margin-top: 3vw;}
.footer .copyright{ width: 100%; height: 4.5vw; position: absolute; bottom: 0; left: 0; background-image: url(../images/footer-bottom-bg.png); display: flex; align-items: center; justify-content: center; color: #8b8b8b; font-size: 14px;}

@media (max-width: 1600px){

    .content-area .feature .feature-box .feature-list .right .desc{font-size: 14px;}
}