@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: #000000;
}
.color-color{
    background: -webkit-linear-gradient(225deg,rgb(2, 65, 118),rgb(80,187,253),rgb(1 250 254));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.color-white{
    color: white;
}
.color-grey{
    color: #c8c8c8;
}
.title {
    font-size: 6rem;
    line-height: 7rem;
    white-space: nowrap;
    font-family: 'HYJunhei-85J';
}
.tip_big {
    font-size: 3rem;
    line-height: 4rem;
    font-family: 'HYJunhei-65J';
    font-weight: normal;
    white-space: nowrap;
}
.tip {
    font-size: 2rem;
    line-height: 3rem;
    font-family: 'HYJunhei-65J';
    font-weight: normal;
    white-space: nowrap;
}
.word {
    font-size: 1.8rem;
    line-height: 3rem;
    font-family: 'HYJunhei-65J';
    font-weight: normal;
    white-space: nowrap;
}
 

.line10{
line-height: 3rem;
}

.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-24{
    white-space: nowrap;
    font-weight: normal;
    font-size: calc(24px + (30 - 16) * ((100vw - 320px) / (1920 - 320)));
}
.font-18{
    white-space: nowrap;
    font-weight: normal;
    line-height: 1.2;
    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;
    line-height: 1.5;
    font-size: calc(13px + (18 - 16) * ((100vw - 320px) / (1920 - 320)));
}
.mt20{
    margin-top: 20px;
}


.line30{
    line-height: 30px;
}
.line20{
line-height: 2rem;
}
.line60{
line-height: 6rem;
}
.line70{
line-height: 7rem;
}
.mt10{
margin-top: 1rem;
}
.mt25{
margin-top: 2.5rem;
}
.mt30{
margin-top: 3rem;
}
.mt40{
margin-top: 4rem;
}
/* ---------------------------------------------------------------------------------------- page1 ---------------------------------------------------------------------------------------- */
.page1 {
    height: 100vh; position: relative;background-color: #000000;
}
#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 {
    height: 100%; width: 100%; display: block; margin: auto; background: #000000;
}
.name1 {
    z-index: 9;opacity: 0;position: absolute;top: 47%;width:50rem;left: 50%;transform: translate(-50%, -50%);
}
.name2 {
    opacity: 0;z-index: 9;position: absolute;color: #363637;top: 42%;left: 50%;transform: translate(-50%, -50%);
}
.name3 {
    opacity: 0;z-index: 9;position: absolute;bottom: 6%;z-index: 9;left: 50%;transform: translate(-50%, -50%);text-decoration: none;
}
.name3 span {
    color: #0065cb;
}
.name3 img {
    width: 5vw;position: absolute;margin-left: 1vw; bottom: 0;
}
.frameText {
    position: absolute;left: 50%;top: 45%;transform: translate(-50%, -50%);opacity: 0;
}
.frameTitle {
    color: white;
}
.frameTip {
    color: white;
}
.page1 .t1 .frameTip{
    font-size: 16px;
}

/* ---------------------------------------------------------------------------------------- page2 ---------------------------------------------------------------------------------------- */
.page2 {
    height: 120vh; background-color: #000000;position: relative;
}
.page2_img{
    width: 100%; height: 30%; position: absolute; right: 0;transform:translate(0, 90%);
}
.page2_img img{
    object-fit: contain; position:absolute; width:100%;height: 100%;
}
.page2_section {
    position: absolute; width:800px; height:100%; transform:translate(0, -50%);top:55%; left:10%;
}
.page2_section h1{
    position: absolute;transform:translate(0, -50%);top:15%; left:0%;color: #ffffff;text-align: left;font-weight: bold;
}
.page2_section h2{
    position: absolute;transform:translate(0, -50%);top:20%; left:0%;color: #ffffff;
}
.page2_section1{
    position: absolute; width:50vw; height:20%; transform:translate(-50%, -50%);top:60%; left:35%;display: flex; display: -webkit-flex;justify-content:left;align-items: center;
}
.page2_section1 h3{
    text-align: center;width: 12rem;padding: 0.4rem 2rem;;border-radius: 10rem;background-image:linear-gradient(225deg,rgba(2, 65,118,0.7),rgba(80,187,253,0.7),rgba(1,250,254,0.7));
}
.page2_section1 h4{
    margin-left: 2rem;text-align: left;
}
.page2_section1 h4 b{
    color: rgba(80,187,253,0.7);
}
.page2_section2{
    position: absolute; width:50vw; height:20%; transform:translate(-50%, -50%);top:65%; left:35%;display: flex; display: -webkit-flex;justify-content:left;align-items: center;
}
.page2_section2 h3{
    text-align: center;width: 12rem;padding: 0.4rem 2rem;;border-radius: 10rem;background-image:linear-gradient(225deg,rgba(2, 65,118,0.7),rgba(80,187,253,0.7),rgba(1,250,254,0.7));
}
.page2_section2 h4{
    margin-left: 2rem;text-align: left;
}
.page2_section2 h4 b{
    color: rgba(80,187,253,0.7);
}
.page2_section3{
    position: absolute; width:50vw; height:20%; transform:translate(-50%, -50%);top:70%; left:35%;display: flex; display: -webkit-flex;justify-content:left;align-items: center;
}
.page2_section3 h3{
    text-align: center;width: 12rem;padding: 0.4rem 2rem;;border-radius: 10rem;background-image:linear-gradient(225deg,rgba(2, 65,118,0.7),rgba(80,187,253,0.7),rgba(1,250,254,0.7));
}
.page2_section3 h4{
    margin-left: 2rem;text-align: left;
}
.page2_section3 h4 b{
    color: rgba(80,187,253,0.7);
}
.page2_section4{
    position: absolute; width:50vw; height:20%; transform:translate(-50%, -50%);top:75%; left:35%;display: flex; display: -webkit-flex;justify-content:left;align-items: center;
}
.page2_section4 h3{
    text-align: center;width: 12rem;padding: 0.4rem 2rem;;border-radius: 10rem;background-image:linear-gradient(225deg,rgba(2, 65,118,0.7),rgba(80,187,253,0.7),rgba(1,250,254,0.7));
}
.page2_section4 h4{
    margin-left: 2rem;text-align: center;
}
.page2_section4 h4 b{
    color: rgba(80,187,253,0.7);
}
/* ---------------------------------------------------------------------------------------- page3 ---------------------------------------------------------------------------------------- */
.page3 {
    height: 120vh; background-color: #000000;position: relative;
}

.page3_img {
    width: 100%; height: 100%; position: absolute; right: 0;transform:translate(0, -15%);
}
.page3_img img{
    object-fit: contain; position:absolute; width:100%;height: 100%;
}
.page3_section1{
    position: absolute; width:80vw; height:100%; transform:translate(0, -50%);top:50%; left:10%;
}

.page3_section1 h1{
    position: absolute;transform:translate(0, -50%);top:10%; left:0%;
}

.page3_section1 h2{
    position: absolute;transform:translate(0, -50%);top:15%; left:0%;
}

.page3_section3{
    position: absolute; width:80vw; height:100%; transform:translate(0, -50%);top:112%; left:10%;
}
.page3_section_title{
    position: absolute; width:80vw; height:10vw; transform:translate(0%, -50%);top:10%; left:0%;
}

.page3_section2{
    position: absolute; width:80vw; height:10vw; transform:translate(0%, -50%);top:45%; left:10%;
}
.page3_section2_title{
    margin-top: 20rem;width: 100%; position: absolute;display: flex; display: -webkit-flex;justify-content:left;align-items: left;
}
.page3_section2_title .btn1{
    width: 31%; text-decoration: none;
}
.page3_section2_title .btn1 h1{
    color: #ffffff;font-size: 4rem;text-align: left;font-weight: bold;
}
.page3_section2_title .btn1 h1 b{
    font-size: 3rem;
}
.page3_section2_title .btn1 h2{
    line-height: 3rem;color: #ffffff;width:100%;text-align: left; font-weight: normal; white-space: nowrap;
}


.page3_section2_title .btn2{
    width: 29%;text-decoration: none;
}
.page3_section2_title .btn2 h1{
    color: #ffffff;font-size: 4rem;text-align: left;font-weight: bold;
}
.page3_section2_title .btn2 h1 b{
    font-size: 3rem;
}
.page3_section2_title .btn2 h2{
    line-height: 3rem;color: #ffffff;width:100%;text-align: left; font-weight: normal; white-space: nowrap;
}


.page3_section2_title .btn3{
    width: 31%; text-decoration: none;
}
.page3_section2_title .btn3 h1{
    color: #ffffff;font-size: 4rem;text-align: left;font-weight: bold;
}
.page3_section2_title .btn3 h1 b{
    font-size: 3rem;
}
.page3_section2_title .btn3 h2{
    line-height: 3rem;color: #ffffff;width:100%;text-align: left; font-weight: normal; white-space: nowrap;
}

.page3_section4{
    position: absolute; width:80vw; height:10vw; transform:translate(0, -50%);top:52%; left:10%;
}
.page3_section4_title{
    margin-top: 20rem;width: 100%; position: absolute;display: flex; display: -webkit-flex;justify-content:left;align-items: left;
}


.page3_section4_title .btn4{
    width: 31%; text-decoration: none;
}
.page3_section4_title .btn4 h1{
    color: #ffffff;font-size: 4rem;text-align: left;font-weight: bold;
}
.page3_section4_title .btn4 h1 b{
    font-size: 3rem;
}
.page3_section4_title .btn4 h2{
    line-height: 3rem;color: #ffffff;width:100%;text-align: left; font-weight: normal; white-space: nowrap;
}



.page3_section4_title .btn5{
    width: 31%; text-decoration: none;
}
.page3_section4_title .btn5 h1{
    color: #ffffff;font-size: 4rem;text-align: left;font-weight: bold;
}
.page3_section4_title .btn5 h1 b{
    font-size: 3rem;
}
.page3_section4_title .btn5 h2{
    line-height: 3rem;color: #ffffff;width:100%;text-align: left; font-weight: normal; white-space: nowrap;
}

.page3_section4_title .btn6{
    width: 29%;text-decoration: none;
}
.page3_section4_title .btn6 h1{
    color: #ffffff;font-size: 4rem;text-align: left;font-weight: bold;
}
.page3_section4_title .btn6 h1 b{
    font-size: 3rem;
}
.page3_section4_title .btn6 h2{
    line-height: 3rem;color: #ffffff;width:100%;text-align: left; font-weight: normal; white-space: nowrap;
}

/* ---------------------------------------------------------------------------------------- page4 ---------------------------------------------------------------------------------------- */
.page4{
    height: 120vh; background-color: #000000;position: relative;
}
.page4 .split2{
    object-fit: contain; position:absolute; width:90%;height: 60%;transform:translate(-50%,10%);left:50%;
}
.page4_section {
    position: absolute; width:100%; top: 75%; text-align: center;transform:translate(0,-50%);
}
.page4_section h1{
    color: #ffffff;font-size: calc(30px + (60 - 16) * ((100vw - 320px) / (1920 - 320)));white-space: nowrap;font-weight: bold;
}
.page4_section h2{
    color: #ffffff;font-size: calc(15px + (20 - 16) * ((100vw - 320px) / (1920 - 320)));white-space: nowrap;font-weight: normal;margin-top: 10px;
}
.page4_section h3{
    width: 90%;font-weight: normal;margin-left: 5%;margin-top: 30px;line-height: 30px;
}

/* ---------------------------------------------------------------------------------------- page5 ---------------------------------------------------------------------------------------- */
.page5{
    height: 120vh; background-color: #000000;position: relative;
}
.page5_img{
    width:100%; height: 100%; position: absolute; left: 0%;transform:translate(0, -50%);top:30%;
}
.page5_img img{
    object-fit: contain; position:absolute; width:100%;height: 100%;
}
.page5_section1{
    position: absolute; width:100vw; height:90%; transform:translate(0, -50%);top:50%; left:10%;
}
.page5_section1 .t1{
    color: #ffffff;font-size: calc(30px + (60 - 16) * ((100vw - 320px) / (1920 - 320)));white-space: nowrap;text-align: left;font-weight: bold;
}
.page5_section1 .t2{
    color: #ffffff;font-weight: normal;margin-top: 10px;
}
.page5_section2{
    position: absolute; width:100vw; height:100vw; transform:translate(0, -50%);top:65%; left:10%;
}
.page5_section2 .t01{
    transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page5_section2 .t01_1{
    transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page5_section4 .t01_1 b{
    color: white;
}
.page5_section3{
    position: absolute; width:100vw; height:100vw; transform:translate(0, -50%);top:65%; left:10%;
}
.page5_section3 .t02{
    opacity: 0;transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page5_section3 .t02_1{
    opacity: 0;transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page5_section4{
    position: absolute; width:100vw; height:100vw; transform:translate(0, -50%);top:65%; left:10%;
}
.page5_section4 .t03{
    opacity: 0;transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page5_section4 .t03_1{
    opacity: 0;transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page5_section4 .t03_1 b{
    color: white;
}
.page5_section5{
    width: 80vw; height: 20vw;  position: relative; transform:translate(0, -50%); left:10%; top:70%; display: flex; display: -webkit-flex;justify-content: left;z-index: 100;
}
.page5_section5_div{
    width: 80vw;height: auto;position: absolute;display: flex; display: -webkit-flex; justify-content: left;align-items: left;z-index: 10;
}
.page5_section5_div .btn1{
    margin-right: 3rem;cursor: pointer;color:#f5f5f7;border:1px solid #f5f5f7;font-size: 1.8rem;border-radius: 1.5rem;padding: 0.5rem 1rem;
}
.page5_section5_div .btn2{
    margin-right: 3rem;cursor: pointer;color:#f5f5f7;font-size: 1.8rem;border-radius: 1.5rem;padding: 0.5rem 1rem;
}
.page5_section5_div .btn3{
    margin-right: 3rem;cursor: pointer;color:#f5f5f7;font-size: 1.8rem;border-radius: 1.5rem;padding: 0.5rem 1rem;
}
/* ---------------------------------------------------------------------------------------- page6 ---------------------------------------------------------------------------------------- */
.page6{
    height: 80vh; background-color: #000000;position: relative;
}
.page6_img{
    width: 100%; height: 100%; position: absolute; right: 0;transform:translate(0, -50%);top:30%;
}
.page6_img img{
    object-fit: contain; position:absolute; width:100%;height: 100%;
}

.page6_section1{
    position: absolute; width:700px; height:90%; transform:translate(0, -50%);top:40%; left:10%;
}
.page6_section1 h1{
    color: #ffffff;font-size: calc(30px + (60 - 16) * ((100vw - 320px) / (1920 - 320)));white-space: nowrap;text-align: left;font-weight: bold;
}
.page6_section1 h2{
    color: #ffffff;font-size: calc(16px + (20 - 16) * ((100vw - 320px) / (1920 - 320)));font-weight: normal;margin-top: 10px;
}

.page6_section2{
    position: absolute; width:100vw; height:100vw; transform:translate(0, -50%);top:80%; left:10%;
}
.page6_section2 h2{
    line-height: 5rem;color: #ffffff;font-weight: normal;transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page6_section2 h3{
    line-height: 3rem;color: #ffffff;font-weight: normal;transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s;
}

.page6_section3{
    position: absolute; width:100vw; height:100vw; transform:translate(0, -50%);top:80%; left:10%;
}
.page6_section3 h2{
    line-height: 5rem;color: #ffffff;font-weight: normal;opacity: 0;transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page6_section3 h3{
    line-height: 3rem;color: #ffffff;font-weight: normal;opacity: 0;transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page6_section4{
    width: 80vw; height: 20rem;  position: relative; transform:translate(0, -50%); left:10%; top:80%; display: flex; display: -webkit-flex;justify-content: left;z-index: 100;
}
.page6_section4_div{
    width: 80vw;height: auto;position: absolute;display: flex; display: -webkit-flex; justify-content: left;align-items: left;z-index: 10;
}
.page6_section4_div .btn1{
    margin-right: 3rem;cursor: pointer;color:#f5f5f7;border:1px solid #f5f5f7;font-size: 1.8rem;border-radius: 1.5rem;padding: 0.5rem 1rem;
}
.page6_section4_div .btn2{
    margin-right: 3rem;cursor: pointer;color:#f5f5f7;font-size: 1.8rem;border-radius: 1.5rem;padding: 0.5rem 1rem;
}
/* ---------------------------------------------------------------------------------------- page7 ---------------------------------------------------------------------------------------- */
.page7{
    height: 50vh; background-color: #000000;position: relative;
}
.page7 .black{
    background-color: #000000;width:100%;height:100%; position: absolute;opacity: 0;
}
.page7 img{
    object-fit: cover; width: 100%;transform:translate(-50%, -50%);left:50%;top: 50%; height: 100%;position: absolute;
}
.page7_section{
    position: absolute; width:100%; top: 35%; text-align: center;z-index: 11;
}
.page7_section h1{
    color: #ffffff;width: 100%;font-weight: normal; transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page7_section h2{
    color: #ffffff;font-weight: normal;transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page7_section h3{
    color: #ffffff;font-weight: bold;transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.masking{
    position: absolute; width:100%; height:100%;bottom:0; left:0;background:linear-gradient(to right, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.5) 15%,rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.1));z-index: 10;
}
/* ---------------------------------------------------------------------------------------- page8 ---------------------------------------------------------------------------------------- */
.page8{
    height: 50vh; background-color: #000000;position: relative;
}
.page8 .black{
    background-color: #000000;width:100%;height:100%; position: absolute;opacity: 0;
}
.page8 img{
    object-fit: cover; width: 100%;transform:translate(-50%, -50%);left:50%;top: 50%; height: 100%;position: absolute;
}
.page8_section1{
    position: absolute; width:100%; top: 35%; text-align: center;z-index: 11;
}
.page8_section1 h1{
    color: #ffffff;width: 100%;font-weight: normal; transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page8_section1 h2{
    color: #ffffff;font-weight: normal;transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page8_section2{
    position: absolute; width:100vw; height:60%; transform:translate(-50%, -50%);top:60%; left:50%;z-index: 11
}
.page8_section2_div{
    margin-top: 20rem;width: 100%; position: absolute;display: flex; display: -webkit-flex;justify-content:center;align-items: center;
}


.page8_section2_div .button_2{
    width: 22.5%; text-decoration: none;transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page8_section2_div .button_2 h1{
    color: #ffffff;text-align: center;font-weight: bold;
}
.page8_section2_div .button_2 h1 b{
    font-size: 3rem;
}
.page8_section2_div .button_2 h2{
    line-height: 3rem;color: #ffffff;width:100%;text-align: center; font-weight: normal; white-space: nowrap;
}

.page8_section2_div .button_1{
    width: 45%; text-decoration: none;transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page8_section2_div .button_1 h1{
    color: #ffffff;text-align: center;font-weight: bold;
}
.page8_section2_div .button_1 h1 b{
    font-size: 3rem;
}
.page8_section2_div .button_1 h2{
    line-height: 3rem;color: #ffffff;width:100%;text-align: center; font-weight: normal; white-space: nowrap;
}

.page8_section2_div .button_3{
    width: 22.5%; text-decoration: none;transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page8_section2_div .button_3 h1{
    color: #ffffff;text-align: center;font-weight: bold;
}
.page8_section2_div .button_3 h1 b{
    font-size: 3rem;
}
.page8_section2_div .button_3 h2{
    line-height: 3rem;color: #ffffff;width:100%;text-align: center; font-weight: normal; white-space: nowrap;
}
.masking{
    position: absolute; width:100%; height:100%;bottom:0; left:0;background:linear-gradient(to right, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.5) 15%,rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.1));z-index: 10;
}


/* ---------------------------------------------------------------------------------------- page9 ---------------------------------------------------------------------------------------- */
.page9{
    height: 50vh; background-color: #000000;position: relative;
}
.page9 .black{
    background-color: #000000;width:100%;height:100%; position: absolute;opacity: 0;
}
.page9 img{
    object-fit: cover; width: 100%;transform:translate(-50%, -50%);left:50%;top: 50%; height: 100%;position: absolute;
}
.page9_section1{
    position: absolute; width:100%; top: 35%; text-align: center;z-index: 11;
}
.page9_section1 h1{
    color: #ffffff;width: 100%;font-weight: normal; transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page9_section1 h2{
    color: #ffffff;font-weight: normal;transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page9_section2{
    position: absolute; width:100vw; height:60%; transform:translate(-50%, -50%);top:60%; left:50%;z-index: 11;
}
.page9_section2_div{
    margin-top: 20rem;width: 100%; position: absolute;display: flex; display: -webkit-flex;justify-content:center;align-items: center;
}
.page9_section2_div .button_1{
    margin-left: 10%;width: 40%; text-decoration: none;transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page9_section2_div .button_1 h1{
    color: #ffffff;text-align: center;font-weight: bold;
}
.page9_section2_div .button_1 h1 b{
    font-size: 3rem;
}
.page9_section2_div .button_1 h2{
    line-height: 3rem;color: #ffffff;width:100%;text-align: center; font-weight: normal; white-space: nowrap;
}

.page9_section2_div .button_2{
    margin-right: 10%;width: 40%; text-decoration: none;transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page9_section2_div .button_2 h1{
    color: #ffffff;text-align: center;font-weight: bold;
}
.page9_section2_div .button_2 h1 b{
    font-size: 3rem;
}
.page9_section2_div .button_2 h2{
    line-height: 3rem;color: #ffffff;width:100%;text-align: center; font-weight: normal; white-space: nowrap;
}
.masking{
    position: absolute; width:100%; height:100%;bottom:0; left:0;background:linear-gradient(to right, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.5) 15%,rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.1));z-index: 10;
}
/* ---------------------------------------------------------------------------------------- page10 ---------------------------------------------------------------------------------------- */
.page10{
    height: 150vh; background-color: #000000;position: relative;
}
.page10_img{
    width: 50%; height: 50%; position: absolute; left: 10%;top: 20%;z-index: 10;
}
.page10_img .img02{
    object-fit: contain; position:absolute; width:98%;height: 98%;left: 1%;top: 1%;opacity: 0.2;z-index: 4;opacity: 0;transition:1s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page10_img .img03{
    object-fit: contain; position:absolute; width:98%;height: 98%;left: 1%;top: 1%;opacity: 0.4;z-index: 5;opacity: 0;transition:1s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page10_img .img04{
    object-fit: contain; position:absolute; width:98%;height: 98%;left: 1%;top: 1%;opacity: 0.6;z-index: 6;opacity: 0;transition:1s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page10_img .img05{
    object-fit: contain; position:absolute; width:98%;height: 98%;left: 1%;top: 1%;opacity: 0.7;z-index: 7;opacity: 0;transition:1s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page10_img .img06{
    object-fit: contain; position:absolute; width:98%;height: 98%;left: 1%;top: 1%;opacity: 0.9;z-index: 8;opacity: 0;transition:1s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page10 .img00{
    width: 50%; height: 50%; position: absolute; left: 10%;top: 20%;z-index: 9;transition:1s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page10 .img00 .img0{
    object-fit: contain; position:absolute; width:100%;height: 100%;z-index: 9;transition:1s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page10 .img00 .img1{
    object-fit: contain;border-radius: 30rem; position:absolute; width:100%;height: 100%;z-index: 8;transition:1s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page10 .img00 .img2{
    object-fit: contain;border-radius: 30rem; position:absolute; width:100%;height: 100%;z-index: 7;transition:1s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page10 .img00 .img3{
    object-fit: contain;border-radius: 30rem; position:absolute; width:100%;height: 100%;z-index: 6;transition:1s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page10 .img00 .img4{
    object-fit: contain; position:absolute; width:100%;height: 100%;z-index: 5;transition:1s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page10 .img00 .img5{
    object-fit: contain; position:absolute; width:100%;height: 100%;z-index: 4;transition:1s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page10_section1{
    width: 100vw; height: 90%;  position: relative; transform:translate(-50%, -50%); left:105%; top:50%; display: flex; display: -webkit-flex;justify-content: center;z-index: 100;
}
.page10_section1_btn1{
    width: 32.5%;height: auto;position: absolute; left: 16.5%;bottom: 52%; transform: translate(-50%, -50%);  display: flex; display: -webkit-flex; justify-content: center;align-items: center;z-index: 10;
}
.page10_section1_btn1 .btn1{
    cursor: pointer;color:#f5f5f7;border:1px solid #f5f5f7;font-size: 1.8rem;border-radius: 1.5rem;padding: 0.5rem 1rem;
}
.page10_section1_btn2{
    width: 32.5%;height: auto;position: absolute; left: 16.5%;bottom: 49%; transform: translate(-50%, -50%);  display: flex; display: -webkit-flex; justify-content: center;align-items: center;z-index: 10;
}
.page10_section1_btn2 .btn2{
    cursor: pointer;color:#f5f5f7;font-size: 1.8rem;border-radius: 1.5rem;padding: 0.5rem 1rem;
}
.page10_section1_btn3{
    width: 32.5%;height: auto;position: absolute; left: 16.5%;bottom: 46%; transform: translate(-50%, -50%);  display: flex; display: -webkit-flex; justify-content: center;align-items: center;z-index: 10; 
}
.page10_section1_btn3 .btn3{
    cursor: pointer;color:#f5f5f7;font-size: 1.8rem;border-radius: 1.5rem;padding: 0.5rem 1rem;
}
.page10_section1_btn4{
    width: 32.5%;height: auto;position: absolute; left: 16.5%;bottom: 43%; transform: translate(-50%, -50%);  display: flex; display: -webkit-flex; justify-content: center;align-items: center;z-index: 10;
}
.page10_section1_btn4 .btn4{
    cursor: pointer;color:#f5f5f7;font-size: 1.8rem;border-radius: 1.5rem;padding: 0.5rem 1rem;
}
.page10_section1_btn5{
    width: 32.5%;height: auto;position: absolute; left: 16.5%;bottom: 40%; transform: translate(-50%, -50%);  display: flex; display: -webkit-flex; justify-content: center;align-items: center;z-index: 10;
}
.page10_section1_btn5 .btn5{
    cursor: pointer;color:#f5f5f7;font-size: 1.8rem;border-radius: 1.5rem;padding: 0.5rem 1rem;
}






.page10_section2 {
    position: absolute; width:100vw; height:100vw; transform:translate(0, -50%);top:30%; left:10%;
}
.page10_section2 .t1{
    color: #ffffff;text-align: left;font-weight: bold;
}
.page10_section2 .t1_1{
    margin-top: 35px;width: 65%; height: 0rem; background: linear-gradient(to right,rgba(255,255,255,1),rgba(255,255,255,1),rgba(255,255,255,1));position: absolute;transform:translate(-50%, -50%);top:14.5%;left:32%;
}
.page10_section2 .t2{
    margin-top: 30px;line-height: 3rem;color: #ffffff;font-weight: normal;
}

.page10_section3 {
    position: absolute; width:40vw; height:70%; transform:translate(0, -50%);top:97%; left:10%;
}
.page10_section3 h2{
    line-height: 5rem;color: #ffffff;font-weight: normal;transition:1s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page10_section3 h3{
    line-height: 3rem;color: #ffffff;font-weight: normal;transition:1s cubic-bezier(0.5, 0, 1, 1) 0s;
}

.page10_section4 {
    position: absolute; width:40vw; height:70%; transform:translate(0, -50%);top:97%; left:10%;
}
.page10_section4 h2{
    line-height: 5rem;color: #ffffff;font-weight: normal;opacity: 0;transition:1s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page10_section4 h3{
    line-height: 3rem;color: #ffffff;font-weight: normal;opacity: 0;transition:1s cubic-bezier(0.5, 0, 1, 1) 0s;
}

.page10_section5 {
    position: absolute; width:40vw; height:70%; transform:translate(0, -50%);top:97%; left:10%;
}
.page10_section5 h2{
    line-height: 5rem;color: #ffffff;font-weight: normal;opacity: 0;transition:1s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page10_section5 h3{
    line-height: 3rem;color: #ffffff;font-weight: normal;opacity: 0;transition:1s cubic-bezier(0.5, 0, 1, 1) 0s;
}

.page10_section6 {
    position: absolute; width:40vw; height:70%; transform:translate(0, -50%);top:97%; left:10%;
}
.page10_section6 h2{
    line-height: 5rem;color: #ffffff;font-weight: normal;opacity: 0;transition:1s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page10_section6 h3{
    line-height: 3rem;color: #ffffff;font-weight: normal;opacity: 0;transition:1s cubic-bezier(0.5, 0, 1, 1) 0s;
}

.page10_section7 {
    position: absolute; width:40vw; height:70%; transform:translate(0, -50%);top:97%; left:10%;
}
.page10_section7 h2{
    line-height: 5rem;color: #ffffff;font-weight: normal;opacity: 0;transition:1s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page10_section7 h3{
    line-height: 3rem;color: #ffffff;font-weight: normal;opacity: 0;transition:1s cubic-bezier(0.5, 0, 1, 1) 0s;
}
/* ---------------------------------------------------------------------------------------- page11 ---------------------------------------------------------------------------------------- */
.page11{
    height: 80vh; background-color: #000000;position: relative;
}
.page11_section{
    width: 90%; height: 80%;  position: relative; transform:translate(-50%, -50%); left:50%; top:40%; display: flex; display: -webkit-flex;justify-content: center;
}
.page11_section .p1{
    background-color: #000000; position: relative; width: 50%; height: 50%; border-radius: 30px; overflow: hidden; margin-right: 5px;
}
.page11_section .p1 .img{
    object-fit: cover; width: 100%; height: 100%;
}
.page11_section .p1 div{
    background: linear-gradient(to top,rgba(0,0,0,0.5),rgba(0,0,0,0));width: 100%;height: 50%;position: absolute; bottom: 0;
}
.page11_section .p1 h2{
    position: absolute; width: 80%; transform:translate(-50%, 0);top:55%; left:50%; text-align: center; font-size: calc(16px + (30 - 16) * ((100vw - 320px) / (1920 - 320))); color: white;font-weight: normal;
}
.page11_section .p1 h3{
    position: absolute; width: 90%; transform:translate(-50%, 0);top:65%; left:50%; text-align: center; font-size: 12px; color: white;font-weight: normal;
}

.page11_section .p2{
    background-color: #000000; position: relative; width: 50%; height: 50%; border-radius: 30px; overflow: hidden; margin-left: 5px;
}
.page11_section .p2 .img{
    object-fit: cover; width: 100%; height: 100%;
}
.page11_section .p2 div{
    background: linear-gradient(to top,rgba(0,0,0,0.5),rgba(0,0,0,0));width: 100%;height: 50%;position: absolute; bottom: 0;
}
.page11_section .p2 h2{
    position: absolute; width: 80%; transform:translate(-50%, 0);top:55%; left:50%; text-align: center; font-size: calc(16px + (30 - 16) * ((100vw - 320px) / (1920 - 320))); color: white;font-weight: normal;
}
.page11_section .p2 h3{
    position: absolute; width: 90%; transform:translate(-50%, 0);top:65%; left:50%; text-align: center; font-size: 12px; color: white;font-weight: normal;
}
.page11_section2{
    width: 90%; height: 80%;  position: relative; transform:translate(-50%, -50%); left:50%; top:5%; display: flex; display: -webkit-flex;justify-content: center;
}


.page11_section2 .p3{
    background-color: #000000; position: relative; width: 50%; height: 50%; border-radius: 30px; overflow: hidden; margin-right: 5px;
}
.page11_section2 .p3 .img{
    object-fit: cover; width: 100%; height: 100%;
}
.page11_section2 .p3 div{
    background: linear-gradient(to top,rgba(0,0,0,0.5),rgba(0,0,0,0));width: 100%;height: 50%;position: absolute; bottom: 0;
}
.page11_section2 .p3 h2{
    position: absolute; width: 80%; transform:translate(-50%, 0);top:55%; left:50%; text-align: center; font-size: calc(16px + (30 - 16) * ((100vw - 320px) / (1920 - 320))); color: white;font-weight: normal;
}
.page11_section2 .p3 h3{
    position: absolute; width: 90%; transform:translate(-50%, 0);top:65%; left:50%; text-align: center; font-size: 12px; color: white;font-weight: normal;
}

.page11_section2 .p4{
    background-color: #000000; position: relative; width: 50%; height: 50%; border-radius: 30px; overflow: hidden; margin-left: 5px;
}
.page11_section2 .p4 .img{
    object-fit: cover; width: 100%; height: 100%;
}
.page11_section2 .p4 div{
    background: linear-gradient(to top,rgba(0,0,0,0.5),rgba(0,0,0,0));width: 100%;height: 50%;position: absolute; bottom: 0;
}
.page11_section2 .p4 h2{
    position: absolute; width: 80%; transform:translate(-50%, 0);top:55%; left:50%; text-align: center; font-size: calc(16px + (30 - 16) * ((100vw - 320px) / (1920 - 320))); color: white;font-weight: normal;
}
.page11_section2 .p4 h3{
    position: absolute; width: 90%; transform:translate(-50%, 0);top:65%; left:50%; text-align: center; font-size: 12px; color: white;font-weight: normal;
}

/* ---------------------------------------------------------------------------------------- page12 ---------------------------------------------------------------------------------------- */
.page12{
    height: 120vh; background-color: #000000;position: relative;
}
.page12_section1{
    width: 100%; height: 100%;  position: relative; transform:translate(-50%, -50%); left:50%; top:60%; display: flex; display: -webkit-flex;justify-content: left;
}
.page12_section1 .p5{
    position: absolute;left: 50%;top:20%;transform:translate(-50%, -50%);background-color: #000000; width: 80%; height: 25%; border-radius: 3rem; overflow: hidden;
}
.page12_section1 .p5 .img2{
    object-fit: contain; position:absolute; width:100%;height: 100%;z-index: 99;opacity: 0;left: 0%;
}
.page12_section1 .p5 #video12{
    height: 150%;width: 80vw; position: relative; left: 50%;top:50%;transform:translate(-50%, -50%); background: #ffffff; object-fit: cover;
}

.page12_section2{
    background-color: #000000; width: 90%; height: 80%;
}
.page12_section2_div1{
    width: 100%;height: 20%; position: absolute; transform:translate(0, -50%);top:00%; left:10%;
}
.page12_section2_div1 h1{
    text-align: left;
}
.page12_section2_div1 h2{
    text-align: left;margin-top: 2vw;
}

.page12_section2_div2{
    position: absolute; width:100vw; height:100vw; transform:translate(-50%, -50%);top:55%; left:60%;
}
.page12_section2_div2 h2{
    transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page12_section2_div2 h3{
    transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s;
}

.page12_section2_div3{
    position: absolute; width:100vw; height:100vw; transform:translate(-50%, -50%);top:55%; left:60%;
}
.page12_section2_div3 h2{
    opacity: 0;transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page12_section2_div3 h3{
    opacity: 0;transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s;
}

.page12_section2_div4{
    width: 80vw; height: 80vw;  position: absolute; transform:translate(-50%, -50%); left:50%; top:65%; display: flex; display: -webkit-flex;justify-content: left;z-index: 100;
}

.page12_section2_div5{
    width: 80vw;height: auto;position: absolute;display: flex; display: -webkit-flex; justify-content: left;align-items: left;z-index: 10;
}
.page12_section2_div5 .btn1{
    margin-right: 3rem;cursor: pointer;color:#f5f5f7;border:1px solid #f5f5f7;font-size: 1.8rem;border-radius: 1.5rem;padding: 0.5rem 1rem;
}
.page12_section2_div5 .btn2{
    margin-right: 3rem;cursor: pointer;color:#f5f5f7;font-size: 1.8rem;border-radius: 1.5rem;padding: 0.5rem 1rem;
}

.page12_section2 .page12_section2_div6{
    width: 80%;height: 20%; position: absolute; transform:translate(0, -50%);top:60%; left:10%;
}
.page12_section2 .img1{
    object-fit: contain; position:absolute; width:80%;height: 100%;left: 0%;
}

/* ---------------------------------------------------------------------------------------- page13 ---------------------------------------------------------------------------------------- */
.page13{
    height: 120vh; background-color: #000000;position: relative;
}

.page13_section{
    width: 100%; height: 115%;  position: relative; transform:translate(-50%, -50%); left:50%; top:60%; display: flex; display: -webkit-flex;justify-content: left;
}

.page13_section .p5{
    position: absolute;left: 50%;top:25%;transform:translate(-50%, -50%);background-color: #000000; width: 80%; height: 25%; border-radius: 3rem; overflow: hidden;
}
.page13_section .p5 #video13{
    height: 100%; position: relative; left: 50%;top:50%;transform:translate(-50%, -50%); background: #000000; object-fit: cover;
}

.page13_section_div{
    background-color: #000000; width: 90%; height: 80%;
}

.page13_section_div1{
    width: 100%;height: 100%; position: absolute; transform:translate(0, -50%);top:50%; left:10%;
}
.page13_section_div1 h1{
    text-align: left;
}
.page13_section_div1 h2{
    text-align: left;margin-top: 2vw;
}

.page13_section_div2{
    position: absolute; width:100vw; height:100vw; transform:translate(-50%, -50%);top:58%; left:60%;
}
.page13_section_div2 h2{
    transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page13_section_div2 h3{
    transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s;
}

.page13_section_div3{
    position: absolute; width:100vw; height:100vw; transform:translate(-50%, -50%);top:58%; left:60%;
}
.page13_section_div3 h2{
    opacity: 0;transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page13_section_div3 h3{
    opacity: 0;transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s;
}

.page13_section_div4{
    width: 80vw; height: 80vw;  position: absolute; transform:translate(-50%, -50%); left:50%; top:67%; display: flex; display: -webkit-flex;justify-content: left;z-index: 100;
}

.page13_section_div5{
    width: 80vw;height: auto;position: absolute;display: flex; display: -webkit-flex; justify-content: left;align-items: left;z-index: 10;
}
.page13_section_div5 .btn1{
    margin-right: 3rem;cursor: pointer;color:#f5f5f7;border:1px solid #f5f5f7;font-size: 1.8rem;border-radius: 1.5rem;padding: 0.5rem 1rem;
}
.page13_section_div5 .btn2{
    margin-right: 3rem;cursor: pointer;color:#f5f5f7;font-size: 1.8rem;border-radius: 1.5rem;padding: 0.5rem 1rem;
}


/* ---------------------------------------------------------------------------------------- page14 ---------------------------------------------------------------------------------------- */
.page14{
    height: 100vh;position: relative;background-color: #000000;margin-top: 10rem;
}
.page14 .p1{
    width: 90%;height: 50%;position: absolute;top: 28%; left: 50%; transform: translate(-50%, -50%);  display: flex; display: -webkit-flex; justify-content: center;align-items: center;
}
.page14_p1_div{
    width: 48%; height: 40%;background-color: #0b2e13;border-radius: 3rem; overflow: hidden;position: absolute; top: 28%; left: 24%; transform: translate(-50%, -50%);
}
.page14_p1_div h2{
    font-family: HYJunhei-85J;text-align: center;position: absolute;transform: translate(-50%, -50%);top:40%;left: 50%;
}
.page14_p1_div h3{
    text-align: center;position: absolute;transform: translate(-50%, -50%);top:55%;left: 50%;
}
.page14_p1_div img{
    object-fit: cover; width: 100%; height: 100%;
}
.page14 .p2{
    width: 90%;height: 50%;position: absolute;top: 28%; left: 50%; transform: translate(-50%, -50%);  display: flex; display: -webkit-flex; justify-content: center;align-items: center;
}
.page14_p2_div{
    width: 48%; height: 40%;background-color: #0b2e13;border-radius: 3rem; overflow: hidden;position: absolute; top: 28%; left: 76%; transform: translate(-50%, -50%);
}
.page14_p2_div h2{
    font-family: HYJunhei-85J;text-align: center;position: absolute;transform: translate(-50%, -50%);top:40%;left: 50%;
}
.page14_p2_div h3{
    text-align: center;position: absolute;transform: translate(-50%, -50%);top:59%;left: 50%;
}
.page14_p2_div img{
    object-fit: cover; width: 100%; height: 100%;
}
.page14 .p3{
    width: 90%;height: 50%;position: absolute;top: 50%; left: 50%; transform: translate(-50%, -50%);  display: flex; display: -webkit-flex; justify-content: center;align-items: center;
}
.page14_p3_div{
    width: 100%; height: 40%;background-color: #0b2e13;border-radius: 3rem; overflow: hidden;position: absolute; top: 28%; left: 50%; transform: translate(-50%, -50%);
}
.page14_p3_div h2{
    font-family: HYJunhei-85J;text-align: center;position: absolute;transform: translate(-50%, -50%);top:30%;left: 50%;
}
.page14_p3_div img{
    object-fit: cover; width: 100%; height: 100%;
}
.page14 .p4{
    width: 90%;height: 50%;position: absolute;top: 72%; left: 50%; transform: translate(-50%, -50%);  display: flex; display: -webkit-flex; justify-content: center;align-items: center;
}

.page14_p4_div{
    width: 48%; height: 40%;background-color: #0b2e13;border-radius: 3rem; overflow: hidden;position: absolute; top: 28%; left: 24%; transform: translate(-50%, -50%);
}
.page14_p4_div h2{
    font-family: HYJunhei-85J;text-align: center;position: absolute;transform: translate(-50%, -50%);top:30%;left: 50%;
}
.page14_p4_div h3{
    text-align: center;position: absolute;transform: translate(-50%, -50%);top:55%;left: 50%;
}
.page14_p4_div img{
    object-fit: cover; width: 100%; height: 100%;
}

.page14 .p5{
    width: 90%;height: 50%;position: absolute;top: 72%; left: 50%; transform: translate(-50%, -50%);  display: flex; display: -webkit-flex; justify-content: center;align-items: center;
}
.page14_p5_div{
    width: 48%; height: 40%;background-color: #0b2e13;border-radius: 3rem; overflow: hidden;position: absolute; top: 28%; left: 76%; transform: translate(-50%, -50%);
}
.page14_p5_div h2{
    font-family: HYJunhei-85J;text-align: center;position: absolute;transform: translate(-50%, -50%);top:30%;left: 50%;
}
.page14_p5_div h3{
    text-align: center;position: absolute;transform: translate(-50%, -50%);top:55%;left: 50%;
}
.page14_p5_div img{
    object-fit: cover; width: 100%; height: 100%;
}
.page14 .p6{
    width: 90%;height: 50%;position: absolute;top: 94%; left: 50%; transform: translate(-50%, -50%);  display: flex; display: -webkit-flex; justify-content: center;align-items: center;
}
.page14_p6_div{
    width: 48%; height: 40%;background-color: #0b2e13;border-radius: 3rem; overflow: hidden;position: absolute; top: 28%; left: 24%; transform: translate(-50%, -50%);
}
.page14_p6_div h2{
    font-family: HYJunhei-85J;text-align: center;position: absolute;transform: translate(-50%, -50%);top:30%;left: 50%;
}
.page14_p6_div h3{
    text-align: center;position: absolute;transform: translate(-50%, -50%);top:55%;left: 50%;
}
.page14_p6_div img{
    object-fit: cover; width: 100%; height: 100%;
}
.page14 .p7{
    width: 90%;height: 50%;position: absolute;top: 94%; left: 50%; transform: translate(-50%, -50%);  display: flex; display: -webkit-flex; justify-content: center;align-items: center;
}
.page14_p7_div{
    width: 48%; height: 40%;background-color: #0b2e13;border-radius: 3rem; overflow: hidden;position: absolute; top: 28%; left: 76%; transform: translate(-50%, -50%);
}
.page14_p7_div h2{
    font-family: HYJunhei-85J;text-align: center;position: absolute;transform: translate(-50%, -50%);top:30%;left: 50%;
}
.page14_p7_div h3{
    text-align: center;position: absolute;transform: translate(-50%, -50%);top:55%;left: 50%;
}
.page14_p7_div img{
    object-fit: cover; width: 100%; height: 100%;
}

/* ---------------------------------------------------------------------------------------- page15 ---------------------------------------------------------------------------------------- */
.page15{
    height: 50vh;position: relative;background-color: #000000;
}
.page15_section{
    position: absolute; width:50%; transform:translate(0%, -50%); left:5%;top: 40%; text-align: left;z-index: 11;
}
.page15_section h3{
    text-align: left;
}
.page15_section h2{
    text-align: left;
}
.page15 .black{
    background-color: #000000;width:100%;height:100%; position: absolute;opacity: 0;z-index: 9;
}
.page15 .img{
    left:50%;top: 50%;position: absolute;transform:translate(-50%, -50%);object-fit: cover; height: 100%;z-index: 0;
}
/* ---------------------------------------------------------------------------------------- page16 ---------------------------------------------------------------------------------------- */
.page16{
    height: 260rem;position: relative;background-color: #000000;
}
.page16 .title{
    font-size: 5rem;color: #ffffff;text-align: center;padding-top: 10rem;
}
.page16_section{
    width:90%; height: 100%; position: absolute; transform:translate(-50%, 10rem);left:50%; display: flex; display: -webkit-flex;justify-content: center;align-items: center;
}
.page16_section_div{
    width:40%;height:100%; position: relative;
}
.page16_section_div .size{
    object-fit: contain; width:100%;height: 20vw;
}
.page16_section_div .t1{
    width: 100%; text-align: center;color: white;font-size: 3rem;font-weight: normal;margin-top: 6rem;
    
}
.page16_section_div .t2{
    width: 100%; text-align: center;color: white;font-size: 1.8rem;line-height: 3rem; font-weight: normal;margin-top: 3rem;
}
.page16_section_div .btn{
    width:6em;height:3rem;background: #0065cb;color: #ffffff;font-size: 1.5rem;border: 0;border-radius: 2.7rem;position: absolute; transform:translate(-50%, 2rem); left:50%;
}
.page16_section_div .button_0{
    text-decoration: none;position: absolute; transform:translate(-50%, 6rem); left:50%;
}
.page16_section_div .button_0 span{
    color: #0065cb;font-size: 1.5rem;font-weight: normal;
}
.page16_section_div .button_0 img{
    width: 1.8rem;position: absolute;margin-left: 0.5rem;
}
.page16_section_div .line{
    width: 50%; height: 0.1rem; background: linear-gradient(to right,rgba(0,0,0,0),rgba(0,0,0,0.2),rgba(0,0,0,0));position: absolute;transform:translate(-50%, 11rem); left:50%;
}
.page16_section_div_page{
    width: 100%;height: 80%;position: absolute;transform:translate(0, 16rem);
}
.page16_section_div_page_div1{
    width: 100%; height: 10rem; margin-top: 2rem; text-align: center;
}
.page16_section_div_page_div1 div{
    width: 100%;display:flex; display: -webkit-flex;justify-content: center;align-items: end;
}
.page16_section_div_page_div1 h2{
    color: white;font-size: 4rem; font-weight: normal;
}
.page16_section_div_page_div1 h3{
    color: white;font-size: 2rem; font-weight: normal;margin-left: 0.5rem; margin-bottom: 0.5rem;
}
.page16_section_div_page_div1 h4{
    color: #c5c5c5; font-size: 1.3rem; font-weight: normal;margin-top: 0.3rem;
}

.page16_section_div_page_div2{
    width: 100%; height: 45rem; margin-top: 2rem; text-align: center;
}

.page16_section_div_page_div2 img{
    width: 5rem;margin-bottom: 1rem;
}
.page16_section_div_page_div2 div{
    width: 100%;display:flex; display: -webkit-flex;justify-content: center;align-items: end;
}
.page16_section_div_page_div2 h2{
    color: white;font-size: 4rem; font-weight: normal;
}
.page16_section_div_page_div2 h6{
    color: white;font-size: 3rem; font-weight: normal;
}
.page16_section_div_page_div2 h3{
    color: white;font-size: 1.8rem; font-weight: normal;margin-left: 0.5rem; margin-bottom: 0.5rem;
}
.page16_section_div_page_div2 h4{
    color: #c5c5c5;font-size: 1.3rem; font-weight: normal;margin-bottom: 1rem;
}
.page16_section_div_page_div2 h5{
    color: #c5c5c5;font-size: 1.3rem; font-weight: normal;margin-top: 1rem;
}
.page16_section_div_page_div3{
    width: 100%; height: 10rem; margin-top: 2rem; text-align: center;
}

.page16_section_div_page_div3 img{
    width: 5rem;
}
.page16_section_div_page_div3 h4{
    color: #c5c5c5;font-size: 1.8rem; font-weight: normal;margin-top: 0.3rem;
}
.page16_section_div_page_div3 h5{
    color: #c5c5c5; font-size: 1.3rem;
}

.page16_section_div_page_div4{
    width: 100%; height: 10rem; margin-top: 2rem; text-align: center;
}

.page16_section_div_page_div4 img{
    width: 5rem;
}
.page16_section_div_page_div4 h4{
    color: #c5c5c5;font-size: 1.8rem; font-weight: normal;margin-top: 0.3rem;
}

.page16_section_div_page_div5{
    width: 100%; height: 20rem; margin-top: 2rem; text-align: center;
}

.page16_section_div_page_div5 img{
    width: 5rem;
}
.page16_section_div_page_div5 h4{
    color: #c5c5c5; font-size: 1.8rem; font-weight: normal;margin-top: 0.3rem;
}
.page16_section_div_page_div5 h5{
    color: #c5c5c5; font-size: 1.3rem; margin-top: 0.3rem;
}

.page16_section_div_page_div6{
    width: 100%; height: 20rem; margin-top: 2rem; text-align: center;
}

.page16_section_div_page_div6 img{
    width: 5rem;
}
.page16_section_div_page_div6 h4{
    color: #c5c5c5; font-size: 1.8rem; font-weight: normal;margin-top: 0.3rem;
}
.page16_section_div_page_div6 h5{
    color: #c5c5c5; font-size: 1.3rem; font-weight: normal;margin-top: 0.3rem;
}

.page16_section_div_page_div7{
    width: 100%; height: 15rem; margin-top: 2rem; text-align: center;
}

.page16_section_div_page_div7 img{
    width: 5rem;
}
.page16_section_div_page_div7 h4{
    color: #c5c5c5;font-size: 1.8rem; font-weight: normal;margin-top: 0.3rem;
}
.page16_section_div_page_div7 h5{
    color: #c5c5c5;font-size: 1.3rem; font-weight: normal;margin-top: 0.3rem;
}

.page16_section_div_page_div8{
    width: 100%; height: 15rem; margin-top: 2rem; text-align: center;
}

.page16_section_div_page_div8 img{
    width: 5rem;
}
.page16_section_div_page_div8 h4{
    color: #c5c5c5;font-size: 1.8rem; font-weight: normal;margin-top: 0.3rem;
}
.page16_section_div_page_div8 h5{
    color: #c5c5c5;font-size: 1.3rem; font-weight: normal;margin-top: 1rem;
}

.page16_section_div_page_div9{
    width: 100%; height: 15rem; margin-top: 2rem; text-align: center;
}

.page16_section_div_page_div9 img{
    width: 5rem;
}
.page16_section_div_page_div9 h4{
    color: #c5c5c5;font-size: 1.8rem; font-weight: normal;margin-top: 1rem;
}
.page16_section_div_page_div9 h5{
    color: #c5c5c5;font-size: 1.3rem; font-weight: normal;margin-top: 1rem;
}
/* ---------------------------------------------------------------------------------------- page17 ---------------------------------------------------------------------------------------- */
.page17{
    height: 100vh;position: relative;background-color: #000000; margin-top: 5px;
}
.page17_section{
    width: 90%; height:85%; position: absolute; transform:translate(-50%, 10%);left: 50%;
}
.page17_section_title{
    width: 100%; height:20%;margin-top: 5%;
}
.page17_section_title .AI_logo{
    position: relative;transform:translate(-50%, -50%);left: 50%;top:20%;width: 60%;object-fit: cover;
}
.page17_section_title .t1{
    text-align: center; font-weight: normal;margin-top: 3rem;
}
.page17_section_page{
    width: 100%; height:40%;display: flex; display: -webkit-flex;justify-content: center;align-items: center;
}
.page17_section_page div{
    width: 30%;height: 40%;
}
.page17_section_page img{
    width: 100%;height: 40%;object-fit: cover;margin-bottom: 20px;
}
.page17_section_page h3{
    text-align: center;bottom: 0;
}
.page17_section_code{
    width: 100%; height:30%;
}
.page17_section_code .code{
    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: 1.1rem;right: 1.1rem;width: 3.6rem;height: 3.6rem;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: 2.4rem;margin: 0.1rem;
}
#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: 1.1rem;right: 1.1rem;width: 3.6rem;height: 3.6rem;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: 2.4rem;margin: 0.1rem;
}