@font-face {
    font-family: HYJunhei-85J;
    src: url('https://musi2024.oss-cn-beijing.aliyuncs.com/fonts/HYJunHei-85W.ttf');
    src: url('./res/font/HYJunHei-85W.ttf');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: HYJunhei-35J;
    src: url('https://musi2024.oss-cn-beijing.aliyuncs.com/fonts/HYJunHei-35W.ttf');
    src: url('./res/font/HYJunHei-35W.ttf');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: HYJunhei-65J;
    src: url('https://musi2024.oss-cn-beijing.aliyuncs.com/fonts/HYJunHei-65W.ttf');
    src: url('./res/font/HYJunHei-65W.ttf');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
* {
    margin: 0;
    padding: 0;
}
body {
    font-family: HYJunhei-65J;
    overflow-x: hidden;
    background-color: #e9e9eb;
}
.font-64 {
    white-space: nowrap;
    font-weight: normal;
    font-size: calc(60px + (100 - 16) * ((100vw - 320px) / (1920 - 320)));
}
.font-42 {
    white-space: nowrap;
    font-weight: normal;
    font-size: calc(40px + (60 - 16) * ((100vw - 320px) / (1920 - 320)));
}
.font-30 {
    white-space: nowrap;
    font-weight: normal;
    font-size: calc(28px + (60 - 16) * ((100vw - 320px) / (1920 - 320)));
}
.font-18 {
    white-space: nowrap;
    font-weight: normal;
    font-size: calc(18px + (30 - 16) * ((100vw - 320px) / (1920 - 320)));
}
.font-15 {
    white-space: nowrap;
    font-weight: normal;
    font-size: calc(15px + (18 - 16) * ((100vw - 320px) / (1920 - 320)));
}
.font-12 {
    white-space: nowrap;
    font-weight: normal;
    font-size: calc(13px + (18 - 16) * ((100vw - 320px) / (1920 - 320)));
}
/* ---------------------------------------------------------------------------------------- page0 ---------------------------------------------------------------------------------------- */
.page0 {
    height: 100vh;background:#000000;position: relative;
}
#cn_top{
    background-color: #000000;width: 100vw;height: 100vh;z-index: 10;position: absolute;bottom: 0;left: 0;
}
#cn{
    width: 100vw;height: 100vh;position: absolute;bottom: 0;left: 0;z-index: 9;opacity: 0;
}
#video1 {
    width: 100%;height: 100%;background:#000000;z-index: 8;display: block;
}
#player {
    display: block; margin: auto; background: #000000;
}
.name0{
    opacity: 0;position: absolute;color: #888888;top: 30%;left: 50%;z-index: 9;transform: translate(-50%, -50%);
}
.name1{
    opacity: 0;position: absolute;color: #777777;top: 22%;left: 50%;z-index: 9;transform: translate(-50%, -50%);
}
.name2{
    opacity: 0;position: absolute;bottom: 6%;z-index: 9;left: 50%;transform: translate(-50%, -50%);text-decoration: none;
}
.name2 span{
    color: #0065cb;
}
.name2 img{
    width: 5vw;position: absolute;margin-left: 1vw; bottom: 0.5vw;
}
.text0{
    position: absolute;left: 55%;top: 45%;transform: translate(-50%, -50%);opacity: 0;
}
.text0 .font-18{
    color: white;
}
.text0 .font-30{
    color: white;text-align: center;letter-spacing: 5px;
}
.text1{
    position: absolute;left: 55%;top: 45%;transform: translate(-50%, -50%);opacity: 0;
}
.text1 .font-18{
    color: white;
}
.text1 .font-30{
    color: white;text-align: center;
}
.text2{
    position: absolute;left: 55%;top: 45%;transform: translate(-50%, -50%);opacity: 0;
}
.text2 .font-18{
    color: white;
}
.text2 .font-30{
    color: white;text-align: center;
}
.text3{
    position: absolute;left: 55%;top: 45%;transform: translate(-50%, -50%);opacity: 0;
}
.text3 .font-18{
    color: white;
}
.text3 .font-30{
    color: white;text-align: center;
}
.text4{
    position: absolute;left: 55%;top: 45%;transform: translate(-50%, -50%);opacity: 0;
}
.text4 .font-18{
    color: white;
}
.text4 .font-30{
    color: white;text-align: center;
}
/* ---------------------------------------------------------------------------------------- page1 ---------------------------------------------------------------------------------------- */
.page1 {
    height: 100vh; background-color: #ffffff;margin-top: 5px;z-index: 1; position: relative;
}
#video2 {
    height:100%;bottom: 0; position: absolute; object-fit: cover;
}
.page1_section {
    position: absolute; width:500px; height:250px; transform:translate(0, -50%);top:35%; left:10%;
}
.page1_section .tween_h1 {
    color: #000000;text-align: left;
}
.page1_section .tween_h2 {
    color: #3b3b3b;text-align: left;margin-top: 30px;
}
.page1_section .button_replay{
    position: absolute;bottom: 0;left: 0;text-decoration: none;
}
.page1_section .button_replay span{
    color: #0065cb;
}
.page1_section .button_replay img{
    width: 5vw;position: absolute;margin-left: 1vw; bottom: 0;
}
/* ---------------------------------------------------------------------------------------- page2 ---------------------------------------------------------------------------------------- */
.page2 {
    height: 100vh; background-color: #ffffff;margin-top: 5px;position: relative;
}
.page2 #video3 {
    height:100%;bottom: 0; position: absolute; object-fit: cover;
}
.page2_section {
    position: absolute; width:600px; height:250px; transform:translate(0, -50%);top:35%; left:10%;
}
.page2_section .tween_h1 {
    color: #000000;text-align: left;
}
.page2_section .tween_h2 {
    color: #8a8a8a;text-align: left;margin-top: 30px;
}
.page2_section .button_replay{
    position: absolute;bottom: 0;left: 0;text-decoration: none;
}
.page2_section .button_replay span{
    color: #0065cb;
}
.page2_section .button_replay img{
    width: 5vw;position: absolute;margin-left: 1vw; bottom: 0;
}
/* ---------------------------------------------------------------------------------------- page3 ---------------------------------------------------------------------------------------- */
.page3 {
    height: 100vh; background-color: #ffffff;margin-top: 5px; position: relative;
}
.page3 #video4 {
    height:100%;bottom: 0; position: absolute; object-fit: cover;
}
.page3_section{
    position: absolute; width:600px; height:250px; transform:translate(0, -50%);top:35%; left:10%;
}
.page3_section .tween_h1 {
    color: #000000;text-align: left;
}
.page3_section .tween_h2 {
    color: #3b3b3b;text-align: left;margin-top: 30px;
}
.page3_section .button_replay{
    position: absolute;bottom: 0;left: 0;text-decoration: none;
}
.page3_section .button_replay span{
    color: #0065cb;
}
.page3_section .button_replay img{
    width: 5vw;position: absolute;margin-left: 1vw; bottom: 0;
}
/* ---------------------------------------------------------------------------------------- page4 ---------------------------------------------------------------------------------------- */
.page4 {
    height: 100vh; background-color: #ffffff;margin-top: 5px;position: relative;
}
.page4 .cowhide {
    height:auto;width: 115vw;bottom: 0; left: 0; position: absolute; object-fit: cover;
}
.page4_section {
    position: absolute; width:700px; height:300px; transform:translate(0, -50%);top:30%;left:10%;
}
.page4_section .tween_h1 {
    color: #000000;text-align: left;
}
.page4_section .tween_h2 {
    color: #3b3b3b;text-align: left;margin-top: 30px;
}
.page4_section .a3{
    position: absolute;bottom: 0;left: 0; display: flex; display: -webkit-flex;justify-content: center;align-items: center;
}
.page4_section .a3 .button_0{
    text-decoration: none;
}
.page4_section .a3 .button_0 span{
    color: #0065cb;
}
.page4_section .a3 .button_0 img{
    width: 5vw;position: absolute;margin-left: 1vw;bottom: 1vw;
}
.page4_section .a3 .button_1{
    margin-left: 50px; text-decoration: none;
}
.page4_section .a3 .button_1 span{
    color: #0065cb;
}
.page4_section .a3 .button_1 img{
    width: 5vw;position: absolute;margin-left: 4vw;bottom: 1vw;
}
.page4_section .a3 .button_2{
    margin-left: 50px; text-decoration: none;
}
.page4_section .a3 .button_2 span{
    color: #0065cb;
}
.page4_section .a3 .button_2 img{
    width: 5vw;position: absolute;margin-left: 1vw;bottom: 1vw;
}
/* ---------------------------------------------------------------------------------------- page5 ---------------------------------------------------------------------------------------- */
.page5 {
    height: 100vh; background-color: #ffffff;margin-top: 5px; position: relative;
}
.page5 .sponge {
    height:auto;width: 100vw;bottom: 0; right:0; position: absolute; object-fit: cover;
}
.page5_section {
    position: absolute; width:700px; height:300px; transform:translate(0, -50%);top:30%; left:10%;
}
.page5_section .tween_h1 {
    color: #000000;text-align: left;
}
.page5_section .tween_h2 {
    color: #3b3b3b;text-align: left;margin-top: 30px;
}
.page5_section .a3{
    position: absolute;width:70vw;bottom: 0;left: 0; display: flex; display: -webkit-flex;justify-content: left;align-items: left;
}
.page5_section .a3 .button_0{
    text-decoration: none;
}
.page5_section .a3 .button_0 h2{
    color: #000000;text-align: center;line-height: 30px;
}
.page5_section .a3 .button_0 img{
    object-fit: contain;width:100%;height: calc(32px + (100 - 16) * ((100vw - 320px) / (1920 - 320)));
}
.page5_section .a3 .button_1{
    margin-left: 10vw; text-decoration: none;
}
.page5_section .a3 .button_1 h2{
    color: #000000;text-align: center;line-height: 30px;
}
.page5_section .a3 .button_1 img{
    object-fit: contain;width:100%;height: calc(32px + (100 - 16) * ((100vw - 320px) / (1920 - 320)));
}
.page5_section .a3 .button_2{
    margin-left: 10vw; text-decoration: none;
}
.page5_section .a3 .button_2 img{
    object-fit: contain;width:100%;height: calc(32px + (100 - 16) * ((100vw - 320px) / (1920 - 320)));
}
.page5_section .a3 .button_2 h2{
    color: #000000;text-align: center;line-height: 30px;
}

/* ---------------------------------------------------------------------------------------- page6 ---------------------------------------------------------------------------------------- */
.page6 {
    background-color: #ffffff; height: 100vh; position: relative;margin-top: 5px;
}
.page6 .img {
    width: 80%; height: 20%;position: absolute;transform:translate(15%, -50%);top:30%;
}
.page6 img {
    object-fit: contain; width:90%; height:90%;position: absolute;transform:translate(-50%, -50%);top:50%;left:50%;
}
.page6 .rulerRow {
    width: 90%;height: 15px;position: absolute;transform:translate(-50%, -50%);left:50%;
}
.page6 .rulerColumn {
    width: 15px;height: 80%;position: absolute;transform:translate(-50%, -50%);top:50%;
}
.page6 .rulerRow .r1 {
    background-color: black;width: 1px;height: 100%;float: left;
}
.page6 .rulerRow .r2 {
    background-color: black;width: 30%;height: 1px;position: absolute;transform:translate(0, -50%);top:50%;
}
.page6 .rulerRow .r3 {
    background-color: black;width: 1px;height: 100%;float: right
}
.page6 .rulerRow .r4 {
    background-color: black;width: 30%;height: 1px;position: absolute;transform:translate(0, -50%);top:50%;right: 0;
}
.page6 .rulerRow h3 {
    color: black;width: 100%;height: 100%; text-align: center; font-size: 15px;font-weight: normal;position: absolute;
}
.page6 .rulerColumn .r1 {
    background-color: black;width: 100%;height: 1px;float: top;
}
.page6 .rulerColumn .r2 {
    background-color: black;width: 1px;height: 30%;position: absolute;transform:translate(-50%, -0);left:50%;
}
.page6 .rulerColumn .r3 {
    background-color: black;width: 100%;height: 1px;position: absolute;bottom: 0;
}
.page6 .rulerColumn .r4 {
    background-color: black;width: 1px;height: 30%;position: absolute;transform:translate(-50%, -0);left:50%;bottom: 0;
}
.page6 .rulerColumn h3 {
    color: black;width: 100%;height: 100%; text-align: center; font-size: 15px;font-weight: normal;display: flex;align-items: center;justify-content: center; 
}
.page6_section {
    width:500px; height:220px; position: absolute;transform:translate(0, -50%);top:65%;left:30%;
}
.page6 .page6_section h1{
    color: #000000;text-align: left;
}
.page6 .page6_section h2{
    color: #3b3b3b;text-align: left;position: absolute;bottom: 0px;
}
/* ---------------------------------------------------------------------------------------- page7 ---------------------------------------------------------------------------------------- */
.page7 {
    height: 100vh; background-color: #ffffff;position: relative;margin-top: 5px;
}
.page7 .img_color {
    width:100%;height:50%;position: absolute;transform:translate(-50%, 50%);left:50%;
}
.page7 .img_color #img1 {
    opacity: 1;
    transition: opacity 0.1s ease;
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: absolute;
    transform: translate(-50%, 20%);
    left: 50%;
}
.page7 .img_color #img2 {
    opacity: 0;
    transition: opacity 0.1s ease;
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: absolute;
    transform: translate(-50%, 20%);
    left: 50%;
}
.page7 .img_color #img3 {
    opacity: 0;
    transition: opacity 0.1s ease;
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: absolute;
    transform: translate(-50%, 20%);
    left: 50%;
}
.page7 .img_color #img4 {
    opacity: 0;
    transition: opacity 0.1s ease;
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: absolute;
    transform: translate(-50%, 20%);
    left: 50%;
}
.page7 .img_color #img5 {
    opacity: 0;
    transition: opacity 0.1s ease;
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: absolute;
    transform: translate(-50%, 20%);
    left: 50%;
}
.page7 .img_color #img6 {
    opacity: 0;
    transition: opacity 0.1s ease;
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: absolute;
    transform: translate(-50%, 20%);
    left: 50%;
}
.page7 .img_color #img7 {
    opacity: 0;
    transition: opacity 0.1s ease;
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: absolute;
    transform: translate(-50%, 20%);
    left: 50%;
}
.page7 .img_color #img8 {
    opacity: 0;
    transition: opacity 0.1s ease;
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: absolute;
    transform: translate(-50%, 20%);
    left: 50%;
}
.page7 .page7_btn {
    width: 80vw; height: 50px;position: absolute; transform:translate(-50%, 0);left:50%;bottom:25%;
}
.page7 .page7_btn h2 {
    width: 100%; height: 30px; text-align: center;margin-bottom: 20px;
}
.page7 .page7_btn .btn_bg {
    background-color: #ffffff;width: 63%;height: 80%;float: left;border-radius: 50px; border: 2px solid #ffffff; display: flex; display: -webkit-flex;justify-content: center;align-items: center;
}
.page7 .page7_btn .btn_bg #btn_color1 {
    width: 35px; height: 35px; background-color: #aaaaaa;border-radius: 20px; border: none; box-shadow: inset 1px 3px 3px rgba(0, 0, 0, 0.3); margin: 5px;
}
.page7 .page7_btn .btn_bg #btn_color2 {
    width: 35px; height: 35px; background-color: #877d70;border-radius: 20px; border: none; box-shadow: inset 1px 3px 3px rgba(0, 0, 0, 0.3); margin: 5px;
}
.page7 .page7_btn .btn_bg #btn_color3 {
    width: 35px; height: 35px; background-color: #6a564e;border-radius: 20px; border: none; box-shadow: inset 1px 3px 3px rgba(0, 0, 0, 0.3); margin: 5px;
}
.page7 .page7_btn .btn_bg #btn_color4 {
    width: 35px; height: 35px; background-color: #aba99a;border-radius: 20px; border: none; box-shadow: inset 1px 3px 3px rgba(0, 0, 0, 0.3); margin: 5px;
}
.page7 .page7_btn .btn_bg #btn_color5 {
    display: none;width: 35px; height: 35px; background-color: #aaaaaa;border-radius: 20px; border: none; box-shadow: inset 1px 3px 3px rgba(0, 0, 0, 0.3); margin: 5px;
}
.page7 .page7_btn .btn_bg #btn_color6 {
    display: none;width: 35px; height: 35px; background-color: #877d70;border-radius: 20px; border: none; box-shadow: inset 1px 3px 3px rgba(0, 0, 0, 0.3); margin: 5px;
}
.page7 .page7_btn .btn_bg #btn_color7 {
    display: none;width: 35px; height: 35px; background-color: #6a564e;border-radius: 20px; border: none; box-shadow: inset 1px 3px 3px rgba(0, 0, 0, 0.3); margin: 5px;
}
.page7 .page7_btn .btn_bg #btn_color8 {
    display: none;width: 35px; height: 35px; background-color: #aba99a;border-radius: 20px; border: none; box-shadow: inset 1px 3px 3px rgba(0, 0, 0, 0.3); margin: 5px;
}

.page7 .page7_btn .btn1_bg {
    background-color: #c8c8c8;width: 33%;height: 80%;float: right;border-radius: 50px;border: 2px solid #d6d6d7; display: flex; display: -webkit-flex;justify-content: center;align-items: center;
}
.page7 .page7_btn .btn1_bg #btn_switch1 {
    transition: background-color 0.5s ease,box-shadow 0.55s ease;width: 50%; height: 90%; background-color: rgba(29,29,31);border-radius: 50px; border: none;  margin: 1px;color: rgba(245,245,247);
}
.page7 .page7_btn .btn1_bg #btn_switch2 {
    transition: background-color 0.5s ease,box-shadow 0.55s ease;width: 50%; height: 90%; background-color: rgba(0,0,0,0);border-radius: 50px; border: none;   margin: 1px;color: rgb(29, 29, 31);
}

/* ---------------------------------------------------------------------------------------- page8 ---------------------------------------------------------------------------------------- */
.page8 {
    height: 100vh;position: relative;margin-top: 5px;
}
.page8 .plan_light {
    width:100%;height:100%; position: absolute;object-fit: cover;
}
.page8 .black {
    background-color: #000000;width:100%;height:100%; position: absolute;opacity: 0;
}
.page8_section {
    position: absolute; width:500px; height:300px; transform:translate(0, -50%);top:30%; left:10%;z-index: 9;
}
.page8_section h3 {
    color: #ffffff;text-align: left;margin-bottom: 10px;
}
.page8_section h1 {
    color: #ffffff;text-align: left;
}
.page8_section h2 {
    color: #c8c8c8;text-align: left;margin-top: 30px;
}
.page8_section a {
    position: absolute;bottom: 0px;text-decoration: none;
}
.page8_section a span {
    color: #0065cb;
}
.page8_section a img {
    width: 5vw;position: absolute;margin-left: 1vw; bottom: 0;
}
.page8 .masking {
    position: absolute; width:100%; height:45%;margin-top: 5px;top:0%; left:0%;background:linear-gradient(to top, rgba(0,0,0,0.01) 0%,rgba(0,0,0,0.35) 15%,rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.01));z-index: 8;
}

/* ---------------------------------------------------------------------------------------- page9 ---------------------------------------------------------------------------------------- */
.page9 {
    height: 100vh;position: relative;margin-top: 5px;
}
.page9 #video9{
    height:100%; width: 100%; position: absolute; object-fit: cover;mix-blend-mode: darken
}
.page9_section {
    position: absolute; width:550px; height:200px; transform:translate(0, -50%);top:30%; left:10%;z-index: 9;
}
.page9_section h3 {
    color: #ffffff;text-align: left;margin-bottom: 10px;
}
.page9_section h1 {
    color: #ffffff;text-align: left;
}
.page9_section h2 {
    color: #c8c8c8;text-align: left;position: absolute;bottom: 0;
}
.page9 .masking {
    position: absolute; width:100%; height:45%;margin-top: 5px;top:0%; left:0%;background:linear-gradient(to top, rgba(0,0,0,0.01) 0%,rgba(0,0,0,0.35) 15%,rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.01));z-index: 8;
}

/* ---------------------------------------------------------------------------------------- page10 ---------------------------------------------------------------------------------------- */
.page10 {
    height: 100vh;position: relative;background-color: #ffffff;margin-top: 5px;
}
.page10 .title {
    white-space: nowrap;font-size: calc(32px + (50 - 16) * ((100vw - 320px) / (1920 - 320)));color: #000000;text-align: center;padding-top: 100px;
}
.page10 .design{
    position: absolute; width:100%; height:20%; transform:translate(-50%, -50%);top:45%; left:50%;
}
.page10 .img1 {
    object-fit:contain; width:100%; position: absolute; bottom: 0;
}
.page10 .img2 {
    object-fit:contain; width:18%;left:6%;position: absolute;bottom:9vw;
}
.page10 .img3 {
    object-fit:contain; width:70%;left:15%;position: absolute;bottom:5vw;
}
.page10 .img4 {
    object-fit:contain; width:50%;left:20%;position: absolute;bottom:3vw;
}
.page10 .img5 {
    object-fit:contain; width:13%;right:5%;position: absolute;bottom:5vw;
}
.page10 .img6 {
    object-fit:contain; width:10%;left:5%;position: absolute;bottom:4vw;
}
.page10 .img7{
    object-fit:contain; width:15%;left:5%;z-index: 9;position: absolute;bottom:2vw
}
.page10_section {
    width:90%; height:20%; position: absolute; transform:translate(-50%, 0%);bottom: 100px; left:55%; display: flex; display: -webkit-flex;justify-content: center;align-items: center;
}

.page10_section .s1 {
    width: 33%;height: 100%;
}
.page10_section .s1 .s1_d {
    width:100%; height:20%;float: left;font-size: 8vw;color: #e4e4e4;
}
.page10_section .s1 .s1_r {
    width:100%; height:100%;float: right; margin-top: 30px;
}
.page10_section .s1 .s1_r h2 {
    color: #7f7f7f; white-space: nowrap;font-size: calc(12px + (18 - 16) * ((100vw - 320px) / (1920 - 320))); font-weight: normal;
}
.page10_section .s1 .s1_r h1 {
    color: #000000; white-space: nowrap;font-size: calc(15px + (30 - 16) * ((100vw - 320px) / (1920 - 320))); margin-top: 5px; margin-bottom:5px
}
.page10_section .s1 .s1_r h3 {
    color: #7f7f7f; white-space: nowrap;font-size: calc(8px + (15 - 16) * ((100vw - 320px) / (1920 - 320))); font-weight: normal;
}
.page10_section .s1 .s1_r a {
    text-decoration: none;position: absolute;  bottom: 0;
}
.page10_section .s1 .s1_r a span {
    color: #0065cb;
}
.page10_section .s1 .s1_r a img {
    width: 5vw;position: absolute;margin-left: 1vw;margin-top: 0
}

.page10_section .s2 {
    width: 33%;height: 100%;
}
.page10_section .s2 .s2_d {
    width:100%; height:20%;float: left;font-size: 8vw;color: #e4e4e4;
}

.page10_section .s2 .s2_r {
    width:100%; height:100%;float: right; margin-top: 30px;
}
.page10_section .s2 .s2_r h2 {
    color: #7f7f7f; white-space: nowrap;font-size: calc(12px + (18 - 16) * ((100vw - 320px) / (1920 - 320))); font-weight: normal;
}
.page10_section .s2 .s2_r h1 {
    color: #000000; white-space: nowrap;font-size: calc(15px + (30 - 16) * ((100vw - 320px) / (1920 - 320))); margin-top: 5px; margin-bottom:5px;
}
.page10_section .s2 .s2_r h3 {
    color: #7f7f7f; white-space: nowrap;font-size: calc(8px + (15 - 16) * ((100vw - 320px) / (1920 - 320))); font-weight: normal;
}
.page10_section .s2 .s2_r a {
    text-decoration: none;position: absolute;  bottom: 0;
}
.page10_section .s2 .s2_r a span {
    color: #0065cb;
}
.page10_section .s2 .s2_r a img {
    width: 5vw;position: absolute;margin-left: 1vw;margin-top: 0;
}

.page10_section .s3 {
    width: 33%;height: 100%;
}
.page10_section .s3 .s3_d {
    width:100%; height:20%;float: left;font-size: 8vw;color: #e4e4e4
}

.page10_section .s3 .s3_r {
    width:100%; height:100%;float: right; margin-top: 30px;
}
.page10_section .s3 .s3_r h2 {
    color: #7f7f7f; white-space: nowrap;font-size: calc(12px + (18 - 16) * ((100vw - 320px) / (1920 - 320))); font-weight: normal;
}
.page10_section .s3 .s3_r h1 {
    color: #000000;
    color: #000000; white-space: nowrap;font-size: calc(15px + (30 - 16) * ((100vw - 320px) / (1920 - 320))); margin-top: 5px; margin-bottom:5px;
}
.page10_section .s3 .s3_r h3 {
    color: #7f7f7f; white-space: nowrap;font-size: calc(8px + (15 - 16) * ((100vw - 320px) / (1920 - 320))); font-weight: normal;
}
.page10_section .s3 .s3_r a {
    text-decoration: none;position: absolute;  bottom: 0;
}
.page10_section .s3 .s3_r a span {
    color: #0065cb;
}
.page10_section .s3 .s3_r a img {
    width: 5vw;position: absolute;margin-left: 1vw;margin-top: 0;
}

/* ---------------------------------------------------------------------------------------- page11 ---------------------------------------------------------------------------------------- */
.page11 {
    height: 100vh;position: relative;background-color: #ffffff;margin-top: 5px;
}
.page11 .title {
    color: #000000;text-align: center;padding-top: 100px;
}
.page11_section {
    width:90%; height:60%; position: absolute; transform:translate(-50%, 20%);left:50%; display: flex; display: -webkit-flex;justify-content: center;align-items: center;
}
.page11_section .page11_sectionColumn {
    width:49.5%; height:100%; position: relative;
}
.page11_section .page11_sectionColumn .page11_Standard {
    object-fit: contain;
    width: 100%;
    height: 9vw;
}
.page11_sectionColumnRow {
    width: 100%;
    height: 5rem;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
}
.color_code1 {
    width: 10px; height: 10px; border-radius: 50%; background-color: #aaaaaa;
}
.color_code2 {
    width: 10px; height: 10px; border-radius: 50%; background-color: #877d70; margin-left: 5px;
}
.color_code3 {
    width: 10px; height: 10px; border-radius: 50%; background-color: #6a564e;margin-left: 5px;
}
.color_code4 {
    width: 10px; height: 10px; border-radius: 50%; background-color: #aba99a;margin-left: 5px;
}
.page11 h1 {
    width: 100%; text-align: center;color: #000001;margin-top: 50px;margin-bottom: 20px;
}
.page11 h3 {
    width: 100%; text-align: center;color: #7f7f7f;line-height: 25px;
}
.page11 button {
    width:60px;height:30px;background: #0065cb;color: #ffffff;border: 0;border-radius: 27px;position: absolute; transform:translate(-50%, 0%); left:50%;bottom:10%
}
.page11 a {
    text-decoration: none;position: absolute; transform:translate(-50%, 0%); left:50%;bottom:0;
}
.page11 a span {
    color: #0065cb;
}
.page11 a img {
    width: 5vw;position: absolute;margin-left: 1vw; bottom: 0;
}
/* ---------------------------------------------------------------------------------------- page12 ---------------------------------------------------------------------------------------- */
.page12 {
    height: 100vh;position: relative;background-color: #000000; margin-top: 5px;
}
.page12_section {
    width: 90%; height:85%; position: absolute; transform:translate(-50%, 10%);left: 50%;
}
.page12_section .footer_title {
    width: 100%; height:20%;margin-top: 5%;
}
.page12_section .footer_title h1 {
    background: linear-gradient(to right,#fff6bc,  #cca870, #f6edb5);-webkit-background-clip: text;-webkit-text-fill-color: transparent; text-align: center;
}
.page12_section .footer_title h2 {
    color: #ffffff;text-align: center;
}
.page12_section .footer_page {
    width: 100%; height:40%;display: flex; display: -webkit-flex;justify-content: center;align-items: center;
}
.page12_section .footer_page div {
    width: 30%;
    height: 40%;
}
.page12_section .footer_page div img {
    width: 100%;height: 35%; object-fit: contain;margin-bottom: 20px;
}
.page12_section .footer_page div h3 {
    text-align: center;
    color: #ffffff;
    bottom: 0;
}
.page12_section .footer_code {
    width: 100%;
    height: 30%;
}
.page12_section .footer_code img {
    width: 100%;
    height: 60%;
    object-fit: contain;
}
/* ---------------------------------------------------------------------------------------- modal ---------------------------------------------------------------------------------------- */
#modal-wrapper {
    position: fixed;left: 0;top: 0;right: 0;bottom: 0;background-color: rgba(0,0,0,1);display: none;justify-content: center;align-items: center;z-index: 999;
}
#videoPlay {
    position: fixed;width: 100vw;height: 100vh;z-index: 999999;display:none;
}
#PlayExit {
    position: absolute;top: 11px;right: 11px;width: 36px;height: 36px;z-index: 101;border-radius: 50%;transform: rotate(45deg);display: none;background-color: #e8e8ed;z-index: 999999;
}
#PlayExit span{
    color: rgba(29,29,31,0.56);font-size: 24px;margin: 1px;
}
#modal-wrapper1 {
    position: fixed;left: 0;top: 0;right: 0;bottom: 0;background-color: rgba(0,0,0,0.8);display: none;justify-content: center;align-items: center;z-index: 999;
}
#imgPlay {
    position: fixed;width: 100vw;height: 100vh;z-index: 999999;display:none;
}
#imgPlayExit {
    position: absolute;top: 11px;right: 11px;width: 36px;height: 36px;z-index: 101;border-radius: 50%;transform: rotate(45deg);display: none;background-color: #e8e8ed;z-index: 999999;
}
#imgPlayExit span {
    color: rgba(29,29,31,0.56);font-size: 24px;margin: 1px;
}