@font-face { font-family: "hyjunhei-85j"; src: ; /* src: ; */ font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "hyjunhei-35j"; src: ; /* src: ; */ font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "hyjunhei-65j"; src: ; /* src: ; */ 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(300deg,rgb(255, 255, 255),rgb(182,220,255),rgb(114 190 255)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .color-white{ color: white; } .color-black{ color: black; } .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; } .f100 { font-size: 10rem; } .f60 { font-size: 6rem; } .f50 { font-size: 5rem; } .f30 { font-size: 3rem; } .f40 { font-size: 4rem; } .f20 { font-size: 2rem; } .f18 { font-size: 1.8rem; } .f15 { font-size: 1.5rem; } .line10{ line-height: 3rem; } .line30{ line-height: 3rem; } .line20{ line-height: 2rem; } .line60{ line-height: 6rem; } .line70{ line-height: 7rem; } .mt10{ margin-top: 1rem; } .mt20{ margin-top: 2rem; } .mt25{ margin-top: 2.5rem; } .mt30{ margin-top: 3rem; } .mt40{ margin-top: 4rem; } /* ---------------------------------------------------------------------------------------- page1 ---------------------------------------------------------------------------------------- */ .page1 { height: 100vh; position: relative;background-color: #000000; } #video1 { height: 100%; width: 100%; position: absolute; background: #000000; object-fit: cover; } .player { height: 100%; width: 100%; display: block; margin: auto; background: #000000; } .name0 { opacity: 0;font-family:'hyjunhei-65j';position: absolute;color: #ffffff;top: 23%;left: 50%;transform: translate(-50%, -50%);font-weight: normal; } .name1 { opacity: 0;font-family:'hyjunhei-65j';position: absolute;color: #ffffff;top: 20%;left: 68%;transform: translate(-50%, -50%);font-weight: normal; } .name2 { opacity: 0;font-family:'hyjunhei-65j';position: absolute;color: #ffffff;top: 13%;left: 50%;transform: translate(-50%, -50%);font-weight: normal; } .frametext { position: absolute;left: 50%;top: 45%;transform: translate(-50%, -50%);opacity: 0; } .frametitle { font-family:hyjunhei-65j;text-align: center;font-weight: normal; } /* ---------------------------------------------------------------------------------------- page2 ---------------------------------------------------------------------------------------- */ .page2 { height: 120vh; background-color: #000000;position: relative; } .page2_img{ width:40%; height: 100%; position: absolute;transform:translate(-50%, -50%);top:50%; left:50%; } .page2_img .img1{ object-fit: contain; position:absolute; width:100%; height: auto;z-index: 8;top: 40%; } .page2_img .img2{ object-fit: contain; position:absolute; width:100%; height: auto;z-index: 9;top: 40%; } .page2_img .img3{ object-fit: contain; position:absolute; width:400%; height: auto;z-index: 7;top: -35%;left: -150%; } .page2_div1{ position: absolute; width:80vw; height:60%; transform:translate(-50%, -50%);top:45%; left:50%; } .page2_div1 h1{ text-align: center; } .page2_div1 h2{ text-align: center;margin-top: 2rem; } .page2_div2{ position: absolute; width:40vw; height:20%; transform:translate(-50%, -50%);top:80%; left:40%; } .page2_div2 h1{ text-align: left;font-size: 5rem; } .page2_div2 h2{ text-align: left;margin-top: 2rem; } .page2_div3{ position: absolute; width:40vw; height:20%; transform:translate(-50%, -50%);top:80%; left:80%; } .page2_div3 h1{ text-align: left;font-size: 5rem; } .page2_div3 h2{ text-align: left;margin-top: 2rem; } .page2_div5{ position: absolute; width:40vw; height:20%; transform:translate(-50%, -50%);top:100%; left:40%; } .page2_div5 h1{ text-align: left;font-size: 5rem; } .page2_div5 h2{ text-align: left;margin-top: 2rem; } .page2_div6{ position: absolute; width:40vw; height:20%; transform:translate(-50%, -50%);top:100%; left:80%; } .page2_div6 h1{ text-align: left;font-size: 5rem; } .page2_div6 h2{ text-align: left;margin-top: 2rem; } /* ---------------------------------------------------------------------------------------- page3 ---------------------------------------------------------------------------------------- */ .page3 { height: 120vh; background-color: #000000;position: relative; } .page3_img{ width: 100%; height: 100%; position: absolute;transform:translate(-50%, -50%);top:50%; left: 70%; } .page3_img .img1{ object-fit: contain; position:absolute; width:40%; height: auto;z-index: 9;top: 0%;left: 45%; } .page3_img .img2{ object-fit: contain; position:absolute; width:50%; height: auto;z-index: 8;top: 45%;left: 35%; } .page3_img .img3{ object-fit: contain; position:absolute; width:150%;height: auto;z-index: 7;top: 0%;left: -10%; } .page3_div{ position: absolute; width:40vw; height:60%; transform:translate(0, -50%);top:75%; left:10%; } .page3_div .p1{ text-align: left; } .page3_div1{ margin-top: 2rem;width: 100%; position: absolute;display: flex; display: -webkit-flex;justify-content:left;align-items: center; } .page3_div1 .p2{ text-decoration: none; } .page3_div1 .p2 img{ object-fit: cover;width: 6rem;height: 6rem;margin-right: 2rem; } .page3_div1 .p3{ line-height: 3rem;color: #ffffff;width:50%;text-align: left; font-weight: normal; margin-bottom: 2rem; } .page3_div1 .p4{ position: absolute;bottom: -4rem;left: 0;text-align: left;font-weight: normal; } .page3_div2{ position: absolute; width:30vw; height:60%; transform:translate(0%, -50%);top:95%; left:10%; } .page3_div3{ margin-top: 20rem;width: 100%; position: absolute;display: flex; display: -webkit-flex;justify-content:left;align-items: center; } .page3_div3 .p5{ position: absolute;bottom: 0;left: 0;color: #8a8a8a;text-align: left;font-weight: normal; } /* ---------------------------------------------------------------------------------------- page4 ---------------------------------------------------------------------------------------- */ .page4{ height: 120vh; background-color: #000000;position: relative; } .page4 .page4_img{ width: 100%; height: 100%; position: absolute;transform:translate(-50%, -50%);top:50%; left: 30%; } .page4 .page4_img .img1{ object-fit: contain; position:absolute; width:60%;height: auto;top: 20%;left: 5%; } .page4_div1{ position: absolute; width:40vw; height:60%; transform:translate(0, -50%);top:60%; left:60%; } .page4_div1 .p1{ color: #ffffff;text-align: left;font-weight: bold; } .page4_div2{ margin-top: 2rem;width: 100%; position: absolute;display: flex; display: -webkit-flex;justify-content:left;align-items: center; } .page4_div2 a{ text-decoration: none; } .page4_div2 a img{ object-fit: cover;width: 6rem;height: 6rem;margin-right: 2rem; } .page4_div2 h2{ line-height: 3rem;color: #ffffff;width:50%;text-align: left; font-weight: normal; margin-bottom: 2rem; } .page4_div2 h3{ position: absolute;bottom: -4rem;left: 0;text-align: left;font-weight: normal; } .page4_div3{ position: absolute; width:30vw; height:60%; transform:translate(0%, -50%);top:80%; left:60%; } .page4_div4{ margin-top: 20rem;width: 100%; position: absolute;display: flex; display: -webkit-flex;justify-content:left;align-items: center; } .page4_div4 h3{ position: absolute;bottom: 0;left: 0;color: #8a8a8a;text-align: left;font-weight: normal; } /* ---------------------------------------------------------------------------------------- page5 ---------------------------------------------------------------------------------------- */ .page5{ height: 120vh; background-color: #000000;position: relative; } .page5_img{ width: 100%; height: 100%; position: absolute;transform:translate(0%, -50%);top:50%; left: 50%; } .page5_img .img1{ object-fit: contain; position:absolute; width:56%;height: auto;top: 23%;z-index: 8; } .page5_img .img2{ object-fit: contain; position:absolute; width:60%;height: auto;top: 30%;z-index: 8; } .page5_img .img3{ object-fit: contain; position:absolute;;transform:translate(-50%, -50%); width:200%; height: auto;z-index: 7;top:30%;left: 50%; } .page5_div1{ position: absolute; width:40vw; height:60%; transform:translate(0, -50%);top:55%; left:10%; } .page5_div1 .p1{ color: #ffffff;text-align: left; } .page5_div2{ margin-top: 2rem;width: 100%; position: absolute;display: flex; display: -webkit-flex;justify-content:left;align-items: center; } .page5_div2 a{ text-decoration: none; } .page5_div2 a img{ object-fit: cover;width: 6rem;height: 6rem;margin-right: 2rem; } .page5_div2 .p2{ line-height: 3rem;color: #ffffff;width:50%;text-align: left; font-weight: normal;margin-bottom: 2rem; } .page5_div2 .p5{ position: absolute;bottom: -4rem;left: 0;text-align: left;font-weight: normal; } .page5_div3{ position: absolute; width:50vw; height:60%; transform:translate(0%, -50%);top:75%; left:10%; } .page5_div4{ margin-top: 20rem;width: 100%; position: absolute;display: flex; display: -webkit-flex;justify-content:left;align-items: center; } .page5_div4 .p6{ position: absolute;bottom: 0;left: 0;color: #8a8a8a;text-align: left;font-weight: normal; } /* ---------------------------------------------------------------------------------------- page6 ---------------------------------------------------------------------------------------- */ .page6{ height: 120vh; background-color: #000000;position: relative; } .page6_img{ width: 60%; height: auto; position: absolute;transform:translate(-50%, -50%);top:40%; left: 50%; } .page6_img .p2{ object-fit: contain; position:absolute; width:100%;height: auto;top: 50%; } .page6_div{ position: absolute; width:40vw; height:20rem; transform:translate(-50%, -50%);top:30%; left:52%; } .page6_div .p1{ color: #ffffff;text-align: center;font-weight: bold; } .page6_div1{ position: absolute; width:40vw; height:40rem; transform:translate(-50%, -50%);top:45%; left:50%; } .page6_div2{ width: 100%;height:100%; position: absolute;display: flex; display: -webkit-flex;justify-content:center;align-items: center; } .page6_div2 .button_0{ text-decoration: none; } .page6_div2 .button_0 img{ object-fit: cover;width: 6rem;height: 6rem;margin-right: 2rem; } .page6_div2 .p3{ line-height: 3rem;color: #ffffff;width:50%;text-align: left; font-weight: normal;margin-bottom: 2rem; } .page6_div2 .p4{ text-align: center; } .page6_div2 .p5{ position: absolute;bottom: 15%;left: 0;text-align: center; } /* ---------------------------------------------------------------------------------------- page7 ---------------------------------------------------------------------------------------- */ .page7{ height: 150vh; background-color: #000000;position: relative; } .page7_img{ width: 60%; height: 60%; position: absolute;transform:translate(-50%, -50%);top:60%; left: 50%; } .page7_img .img1{ object-fit: contain; position:absolute; width:100%;height: auto; } .page7_div{ position: absolute; width:40vw; height:20rem; transform:translate(-50%, -50%);top:20%; left:52%; } .page7_div .p1{ color: #ffffff;text-align: center;font-weight: bold; } .page7_div1{ position: absolute; width:40vw; height:40rem; transform:translate(-50%, -50%);top:30%; left:50%; } .page7_div2{ width: 100%;height:100%; position: absolute;display: flex; display: -webkit-flex;justify-content:left;align-items: center; } .page7_div2 .button_3{ text-decoration: none; } .page7_div2 .button_3 img{ object-fit: cover;width: 10rem;height: 10rem; } .page7_div2 .p3{ line-height: 3rem;color: #ffffff;width:50%;text-align: left; font-weight: normal; margin-bottom: 2rem; } .page7_div2 .p4{ text-align: left; } .page7_div2 .p5{ position: absolute;bottom: 0;left: 0;text-align: center; } .page7_div3{ position: absolute; width:30vw; height:60%; transform:translate(-50%, -50%);top:90%; left:50%; } .page7_div4{ margin-top: 20rem;width: 100%; position: absolute;display: flex; display: -webkit-flex;justify-content:center;align-items: center; } .page7_div4 .button_0{ width: 33%; text-decoration: none; } .page7_div4 .button_0 img{ object-fit: cover;width: 50%;margin-left: 25%; height: 7rem; } .page7_div4 .button_0 h2{ line-height: 3rem;color: #ffffff;width:100%;text-align: center; font-weight: normal; } .page7_div4 .button_1{ width: 33%; text-decoration: none; } .page7_div4 .button_1 img{ object-fit: cover;width: 50%;margin-left: 25%; height: 7rem; } .page7_div4 .button_1 h2{ line-height: 3rem;color: #ffffff;width:100%;text-align: center; font-weight: normal; } .page7_div4 .button_2{ width: 33%; text-decoration: none; } .page7_div4 .button_2 img{ object-fit: cover;width: 50%;margin-left: 25%; height: 7rem; } .page7_div4 .button_2 h2{ line-height: 3rem;color: #ffffff;width:100%;text-align: center; font-weight: normal; } /* ---------------------------------------------------------------------------------------- page8 ---------------------------------------------------------------------------------------- */ .swiper-container { padding-bottom: 40px; } .swiper-wrapper {} .swiper-slide { width: 978px; transition-timing-function: linear; } @media only screen and (max-width:1200px) { .swiper-slide { width: 770px; } } @media only screen and (max-width:980px) { .swiper-slide { width: 471px; } } @media only screen and (max-height:480px) { .swiper-slide { width: 471px; } } .swiper-slide img { width: 100%;border-radius: 4px; } .swiper-slide .title { position: absolute; transform: translate(-50%, 0); bottom: 0%; font-size: 11px; color: rgb(102, 102, 102); } .swiper-button-next, .swiper-button-prev { width: 5rem;height: 5rem;background-size: 5rem 5rem;margin-top: -5.6rem;outline: none; } .swiper-button-next { background-image: ; } .swiper-button-prev { background-image: ; } .swiper-pagination-bullet { background: none; opacity: 1; margin: 0 6px !important; width: 9px; height: 9px; position: relative; outline: none; vertical-align: middle; } .swiper-pagination-bullet span { width: 3px; height: 3px; background: #ccc; display: block; border-radius: 50%; margin-top: 3px; margin-left: 3px; } .swiper-pagination-bullet i { background: #ffffff; height: 1px; width: 20px; position: absolute; top: 4px; transform: scalex(0); transform-origin: left; z-index: 3; transition-timing-function: linear; } .swiper-pagination-bullet-active span, .swiper-pagination-bullet:hover span { width: 9px; height: 9px; margin-top: 0; margin-left: 0; background: #ffffff; position: relative; z-index: 1; } .swiper-pagination-bullet-active i { animation: middle 6s; } .swiper-pagination-bullet:first-child.swiper-pagination-bullet-active i { animation: first 6s; } .swiper-pagination-bullet:last-child.swiper-pagination-bullet-active i { animation: last 6s; } @keyframes first { 0% { transform: scalex(0.5); left: 0px; } /*091*/ 100% { transform: scalex(1); left: 2px; } /*0915*/ } @keyframes last { 0% { transform: scalex(0.7); left: -10px; } /*1090*/ 20% { transform: scalex(0.3); left: 2px; } /*090*/ 100% { transform: scalex(0.3); left: 0px; } /*090*/ } @keyframes middle { 0% { transform: scalex(0.7); left: -10px; } /*1091*/ 20% { transform: scalex(0.45); left: 2px; } /*092*/ 100% { transform: scalex(1); left: 2px; } /*0913*/ } .page8{ height: 100vh; background-color: #000000;position: relative; } .page8_div{ position: relative; width:40vw; height:25%; transform:translate(-50%, -50%);top:15%; left:50%; } .page8_div h1{ text-align: center; } .page8_div h2{ text-align: center;margin-top: 2rem; } .page8_div1{ position: absolute; width:51vw; height:40rem; transform:translate(-50%, -50%);top:62.5%; left:50%; } .page8_div2{ width: 100%;height:100%; position: absolute;display: flex; display: -webkit-flex;justify-content:center;align-items: center; } .page8_div2 .button_0{ z-index: 9;text-decoration: none; } .page8_div2 .button_0 img{ object-fit: cover;width: 15rem;height: 15rem;margin-top: 15rem;margin-left: 32rem; } .page8_div2 .p3{ z-index: 9;line-height: 3rem;color: #ffffff;width:50%;text-align: left; font-weight: normal; margin-bottom: 2rem;margin-top: 15rem; } .page8_div2 .p5{ z-index: 9;position: absolute;transform:translate(0, -50%);bottom: 10%;color: #8a8a8a;text-align: left;font-weight: normal; } .page8_div2 .masking{ background: linear-gradient(to top,rgba(0,0,0,0.7),rgba(0,0,0,0.5),rgba(0,0,0,0.0));width: 100%;height: 70%;position: absolute; bottom: 0;z-index: 8; } .page8_div3{ position: absolute; width:51vw; height:40rem; transform:translate(-50%, -50%);top:62.5%; left:50%; } .page8_div4{ width: 100%;height:100%; position: absolute;display: flex; display: -webkit-flex;justify-content:center;align-items: center; } .page8_div4 .button_0{ z-index: 9;text-decoration: none; } .page8_div4 .button_0 img{ object-fit: cover;width: 15rem;height: 15rem;margin-top: 15rem;margin-left: 32rem; } .page8_div4 .p3{ z-index: 9;line-height: 3rem;color: #ffffff;width:50%;text-align: left; font-weight: normal; margin-bottom: 2rem;margin-top: 15rem; } .page8_div4 .p5{ z-index: 9;position: absolute;transform:translate(0, -50%);bottom: 10%;color: #8a8a8a;text-align: left;font-weight: normal; } .page8_div4 .masking{ background: linear-gradient(to top,rgba(0,0,0,0.7),rgba(0,0,0,0.5),rgba(0,0,0,0.0));width: 100%;height: 70%;position: absolute; bottom: 0;z-index: 8; } .page8_div5{ position: absolute; width:51vw; height:40rem; transform:translate(-50%, -50%);top:62.5%; left:50%;z-index: 9; } .page8_div6{ width: 100%;height:100%; position: absolute;display: flex; display: -webkit-flex;justify-content:center;align-items: center; } .page8_div6 .button_0{ z-index: 9;text-decoration: none; } .page8_div6 .button_0 img{ object-fit: cover;width: 15rem;height: 15rem;margin-top: 15rem;margin-left: 32rem; } .page8_div6 .p3{ z-index: 9;width:50%;text-align: left;margin-bottom: 2rem;margin-top: 15rem; } .page8_div6 .p5{ z-index: 9;position: absolute;transform:translate(0, -50%);bottom: 10%;text-align: left; } .page8_div6 .masking{ background: linear-gradient(to top,rgba(0,0,0,0.7),rgba(0,0,0,0.5),rgba(0,0,0,0.0));width: 100%;height: 70%;position: absolute; bottom: 0;z-index: 8; } /* ---------------------------------------------------------------------------------------- page9 ---------------------------------------------------------------------------------------- */ .page9{ height: 100vh; background-color: #000000;position: relative; } .page9_div{ width: 60%; height: 80%; position: relative; transform:translate(-50%, -50%); left:50%; top:50%; display: flex; display: -webkit-flex;justify-content: center; } .page9_div .p1{ background-color: #000000; position: relative; width: 50%; height: 100%; border-radius: 3rem; overflow: hidden; margin-right: 2rem; } .page9_div .p1 .img{ object-fit: cover; width: 100%; height: 100%; } .page9_div .p1 .masking{ background: linear-gradient(to top,rgba(0,0,0,0.5),rgba(0,0,0,0));width: 100%;height: 50%;position: absolute; bottom: 0; } .page9_div .p1 h2{ position: absolute; width: 80%; transform:translate(-50%, 0);top:70%; left:50%; text-align: center; } .page9_div .p1 h3{ position: absolute; width: 90%; transform:translate(-50%, 0);top:82%; left:50%; text-align: center; } .page9_div .p2{ background-color: #000000; position: relative; width: 50%; height: 100%; border-radius: 3rem; overflow: hidden; margin-left: 2rem; } .page9_div .p2 .img{ object-fit: cover; width: 100%; height: 100%; } .page9_div .p2 .masking{ background: linear-gradient(to top,rgba(0,0,0,0.5),rgba(0,0,0,0));width: 100%;height: 50%;position: absolute; bottom: 0; } .page9_div .p2 h2{ position: absolute; width: 80%; transform:translate(-50%, 0);top:70%; left:50%; text-align: center; } .page9_div .p2 h3{ position: absolute; width: 90%; transform:translate(-50%, 0);top:82%; left:50%; text-align: center; } /* ---------------------------------------------------------------------------------------- page10 ---------------------------------------------------------------------------------------- */ .page10{ height: 200vh; background-color: #000000; position: relative; } .page10 .title{ position: absolute;transform:translate(-50%, -50%);top:12%; left:50%;text-align: center; } .page10_img{ width: 70%; height: 100%;transform:translate(0, -50%);top:50%; position: absolute; right: 0;display: flex; display: -webkit-flex; justify-content: right;align-items: center; } .page10_img .img6{ object-fit: contain; position: absolute; width: 100%; } .page10_div{ width: 70%; height: 100%;transform:translate(0, -50%);top:50%; position: absolute; right: 0; } .page10_div .p3{ width: 6rem; height: 10%;position: absolute;top: 22%; right:30%; } .page10_div .p3 div{ background: linear-gradient(to bottom,rgba(255,255,255,1),rgba(255,255,255,0.7),rgba(255,255,255,0)); position: absolute;width: 0.1rem; height: 100%; top: 60%; } .page10_div .p3 h2{ position: absolute;transform:translate(-50%, -50%); top: 50%; } .page10_div .p4{ width: 6rem; height: 18%;position: absolute;top: 17%; right:50%; } .page10_div .p4 div{ background: linear-gradient(to bottom,rgba(255,255,255,1),rgba(255,255,255,0.7),rgba(255,255,255,0)); position: absolute;width: 0.1rem; height: 100%; top: 60%; } .page10_div .p4 h2{ position: absolute;transform:translate(-50%, -50%); top: 50%; } .page10_div .p5{ width: 6rem; height: 17%;position: absolute;top: 40%; right:20%; } .page10_div .p5 div{ background: linear-gradient(to top,rgba(255,255,255,1),rgba(255,255,255,0.7),rgba(255,255,255,0)); position: absolute;width: 0.1rem; height: 100%; top: 60%; } .page10_div .p5 h2{ position: absolute;transform:translate(-50%, 0); bottom: -70%; } .page10_div .p6{ width: 6rem; height: 19%;position: absolute;top: 37%; right:50%; } .page10_div .p6 div{ background: linear-gradient(to top,rgba(255,255,255,1),rgba(255,255,255,0.7),rgba(255,255,255,0)); position: absolute;width: 0.1rem; height: 100%; top: 60%; } .page10_div .p6 h2{ position: absolute;transform:translate(-50%, 0); bottom: -70%; } .page10_div .p7{ width: 6rem; height: 18.5%;position: absolute;top: 38%; right:70%; } .page10_div .p7 div{ background: linear-gradient(to top,rgba(255,255,255,1),rgba(255,255,255,0.7),rgba(255,255,255,0)); position: absolute;width: 0.1rem; height: 100%; top: 60%; } .page10_div .p7 h2{ position: absolute;transform:translate(-50%, 0); bottom: -70%; } .page10_section{ position: absolute; width:70rem; height:60%; transform:translate(0, -50%);top:60%; left:10%; } .page10_section .p8{ text-align: left; } .page10_section .p9{ text-align: left; } .page10_section .p10{ text-align: left;margin-top: 3rem; } .page10_section .p11{ text-align: left; } .page10_section .p12{ text-align: left;margin-top: 3rem; } .page10_section .p13{ text-align: left; } .page10_section .p14{ text-align: left;margin-top: 3rem; } .page10_section .p15{ text-align: left; } .page10_section .p16{ text-align: left;margin-top: 3rem; } .page10_section .p17{ text-align: left; } /* ---------------------------------------------------------------------------------------- page11 ---------------------------------------------------------------------------------------- */ .page11{ height: 100vh; background-color: #000000;position: relative; } .page11_section{ width: 60%; height: 80%; position: relative; transform:translate(-50%, -50%); left:50%; top:50%; display: flex; display: -webkit-flex;justify-content: center; } .page11_section .p1{ background-color: #ffffff; width: 50%; height: 100%; border-radius: 3rem; overflow: hidden;margin-right: 2rem; } .page11_section .p1 .img{ object-fit: cover; width: 100%; height: 100%; } .page11_section .p1 .masking{ 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_div{ width: 50%; height: 100%; margin-right: 2rem; } .page11_section_div1{ width: 120%;height: 80%; position: relative; transform:translate(-50%, -50%); left:75%; top:45%; } .page11_section_div1 .p2{ text-align: left; } .page11_section_div1 .p3{ color: #ffffff;font-size: 2rem;font-weight: normal;margin-top: 2rem; } .page11_section_div2{ position: absolute; width:40vw; height:120%; transform:translate(-50%, -50%);top:65%; left:11%; } .page11_section_div3{ margin-top: 20rem;width: 100%; height:100%;position: absolute;display: flex; display: -webkit-flex;justify-content:left;align-items: center;flex-direction: column; } .page11_section_div3 .button_1{ width: 50%; text-decoration: none;display: -webkit-flex;justify-content:left;align-items: left;flex-direction: row; } .page11_section_div3 .button_1 img{ object-fit: cover;width: 50%;margin-left: 25%; height: 5rem; } .page11_section_div3 .button_1 h2{ margin-left: 3rem;line-height: 2.5rem;color: #ffffff;width:100%;text-align: left; font-weight: left; } .page11_section_div3 .button_2{ width: 50%; text-decoration: none;display: -webkit-flex;justify-content:left;align-items: left;flex-direction: row;margin-top: 3rem; } .page11_section_div3 .button_2 img{ object-fit: cover;width: 50%;margin-left: 25%; height: 5rem; } .page11_section_div3 .button_2 h2{ margin-left: 3rem;line-height: 5rem;color: #ffffff;width:100%;text-align: left; font-weight: left; white-space: nowrap; } .page11_section_div3 .button_3{ width: 50%; text-decoration: none;display: -webkit-flex;justify-content:left;align-items: left;flex-direction: row;margin-top: 3rem; } .page11_section_div3 .button_3 img{ object-fit: cover;width: 50%;margin-left: 25%; height: 5rem; } .page11_section_div3 .button_3 h2{ margin-left: 3rem;line-height: 5rem;color: #ffffff;width:100%;text-align: left; font-weight: left; white-space: nowrap; } .page11_section_div3 .button_4{ width: 50%; text-decoration: none;display: -webkit-flex;justify-content:left;align-items: left;flex-direction: row;margin-top: 3rem; } .page11_section_div3 .button_4 img{ object-fit: cover;width: 50%;margin-left: 25%; height: 5rem; } .page11_section_div3 .button_4 h2{ margin-left: 3rem;line-height: 5rem;color: #ffffff;width:100%;text-align: left; font-weight: left; white-space: nowrap; } .page11_section_div3 .button_5{ width: 50%; text-decoration: none;display: -webkit-flex;justify-content:left;align-items: left;flex-direction: row;margin-top: 3rem; } .page11_section_div3 .button_5 img{ object-fit: cover;width: 50%;margin-left: 25%; height: 5rem; } .page11_section_div3 .button_5 h2{ margin-left: 3rem;line-height: 5rem;color: #ffffff;width:100%;text-align: left; font-weight: left; white-space: nowrap; } .page11_section_div3 .button_6{ width: 50%; text-decoration: none;display: -webkit-flex;justify-content:left;align-items: left;flex-direction: row;margin-top: 3rem; } .page11_section_div3 .button_6 img{ object-fit: cover;width: 50%;margin-left: 25%; height: 5rem; } .page11_section_div3 .button_6 h2{ margin-left: 3rem;line-height: 5rem;color: #ffffff;width:100%;text-align: left; font-weight: left; white-space: nowrap; } /* ---------------------------------------------------------------------------------------- page12 ---------------------------------------------------------------------------------------- */ .page12{ height: 70vh; background-color: #000000;position: relative; } .page12_section{ width: 80%; height: 90%; position: relative; transform:translate(-50%, -50%); left:50%; top:50%; display: flex; display: -webkit-flex;justify-content: center; } .page12_section .p1{ background-color: #000000; position: relative; width: 25%; height: 100%; border-radius: 3rem; overflow: hidden; margin-right: 2rem; } .page12_section .p1 .img{ object-fit: cover; width: 100%; height: 100%; } .page12_section .p1 .masking{ background: linear-gradient(to top,rgba(0,0,0,0.5),rgba(0,0,0,0));width: 100%;height: 50%;position: absolute; bottom: 0;z-index: 10; } .page12_section .p1 .tip_big{ position: absolute; width: 80%; transform:translate(-50%, 0);top:70%; left:50%; text-align: center;z-index: 8;color: black; } .page12_section .p1 .tip{ position: absolute; width: 90%; transform:translate(-50%, 0);top:82%; left:50%; text-align: center;z-index: 8;color: black; } .page12_section .p2{ background-color: #000000; position: relative; width: 25%; height: 100%; border-radius: 3rem; overflow: hidden; margin-right: 2rem; } .page12_section .p2 .img{ object-fit: cover; width: 100%; height: 100%; } .page12_section .p2 .masking{ background: linear-gradient(to top,rgba(0,0,0,0.5),rgba(0,0,0,0));width: 100%;height: 50%;position: absolute; bottom: 0;z-index: 10; } .page12_section .p2 .tip_big{ position: absolute; width: 80%; transform:translate(-50%, 0);top:70%; left:50%; text-align: center;z-index: 8;color: black; } .page12_section .p2 .tip{ position: absolute; width: 90%; transform:translate(-50%, 0);top:82%; left:50%; text-align: center;z-index: 8;color: black; } .page12_section .p3{ background-color: #000000; position: relative; width: 25%; height: 100%; border-radius: 3rem; overflow: hidden; margin-right: 2rem; } .page12_section .p3 .img{ object-fit: cover; width: 100%; height: 100%; } .page12_section .p3 .masking{ background: linear-gradient(to top,rgba(0,0,0,0.5),rgba(0,0,0,0));width: 100%;height: 50%;position: absolute; bottom: 0;z-index: 10; } .page12_section .p3 .tip_big{ position: absolute; width: 80%; transform:translate(-50%, 0);top:70%; left:50%; text-align: center;z-index: 8;color: black; } .page12_section .p3 .tip{ position: absolute; width: 90%; transform:translate(-50%, 0);top:82%; left:50%; text-align: center;z-index: 8;color: black; } .page12_section .p4{ background-color: #000000; position: relative; width: 25%; height: 100%; border-radius: 3rem; overflow: hidden; margin-right: 2rem; } .page12_section .p4 .img{ object-fit: cover; width: 100%; height: 100%; } .page12_section .p4 .masking{ background: linear-gradient(to top,rgba(0,0,0,0.5),rgba(0,0,0,0));width: 100%;height: 50%;position: absolute; bottom: 0;z-index: 10; } .page12_section .p4 .tip_big{ position: absolute; width: 80%; transform:translate(-50%, 0);top:70%; left:50%; text-align: center;z-index: 8;color: black; } .page12_section .p4 .tip{ position: absolute; width: 90%; transform:translate(-50%, 0);top:82%; left:50%; text-align: center;z-index: 8;color: black; } /* ---------------------------------------------------------------------------------------- page13 ---------------------------------------------------------------------------------------- */ .page13{ height: 100vh; background-color: #000000;position: relative; } .page13_section{ width: 60%; height: 80%; position: relative; transform:translate(-50%, -50%); left:50%; top:50%; display: flex; display: -webkit-flex;justify-content: center; } .page13_section .p1{ background-color: #000000; width: 50%; height: 100%; border-radius: 3rem; overflow: hidden;margin-right: 2rem; } .page13_section .p1 .img{ object-fit: cover; width: 100%; height: 100%; } .page13_section .p1 .masking{ background: linear-gradient(to top,rgba(0,0,0,0.5),rgba(0,0,0,0));width: 100%;height: 50%;position: absolute; bottom: 0 } .page13_section_div{ width: 50%; height: 100%; margin-right: 2rem; } .page13_section_div1{ width: 100%;height: 80%; position: relative; transform:translate(-50%, -50%); left:50%; top:50%; } .page13_section_div1 .p2{ text-align: left; } .page13_section_div1 .p3{ margin-top: 2rem; } .page13_section_div2{ position: absolute; width:40vw; height:60%; transform:translate(-50%, -50%);top:80%; left:65%; } .page13_section_div2 h2{ margin-top: 3rem;margin-left: 3rem;line-height: 5rem;color: #ffffff;width:100%;text-align: left; font-weight: left; white-space: nowrap; } /* ---------------------------------------------------------------------------------------- page14 ---------------------------------------------------------------------------------------- */ .page14{ height: 100vh; background-color: #000000; position: relative; } .page14_section{ position: absolute; width:40vw; height:60%; transform:translate(0, -50%);top:35%; left:10%; } .page14_section .p1{ text-align: left;font-weight: bold; } .page14_section .p2{ text-align: left;margin-top: 1rem; } .page14_section .p3{ width: 100%; height: 1px; background: #ffffff;position: absolute;transform:translate(-50%, -50%);top:25%;left:50%; } .page14_section .p15{ width: 100%; height: 1px; background: #ffffff;position: absolute;transform:translate(-50%, -50%);top:125%;left:50%; } .page14_div1{ position: absolute; width:50vw; height:20%; transform:translate(-50%, -50%);top:37%; left:62%;display: flex; display: -webkit-flex;justify-content:left;align-items: center; } .page14_div1 .p4{ text-align: left;margin-top: 3rem; } .page14_div2{ position: absolute; width:50vw; height:20%; transform:translate(-50%, -50%);top:48%; left:62%;display: flex; display: -webkit-flex;justify-content:left;align-items: center; } .page14_div2 .p5{ text-align: center;width: 12rem;padding: 0.2rem 0.5rem;;border-radius: 10rem;background-image:linear-gradient(to right,rgb(182,220,255),rgb(114 190 255)); } .page14_div2 .p10{ margin-left: 2rem;text-align: left; } .page14_div3{ position: absolute; width:50vw; height:20%; transform:translate(-50%, -50%);top:56%; left:62%;display: flex; display: -webkit-flex;justify-content:left;align-items: center; } .page14_div3 .p6{ text-align: center;width: 12rem;padding: 0.2rem 0.5rem;;border-radius: 10rem;background-image:linear-gradient(to right,rgb(182,220,255),rgb(114 190 255)); } .page14_div3 .p11{ margin-left: 2rem;text-align: left; } .page14_div4{ position: absolute; width:50vw; height:20%; transform:translate(-50%, -50%);top:64%; left:62%;display: flex; display: -webkit-flex;justify-content:left;align-items: center; } .page14_div4 .p7{ text-align: center;width: 12rem;padding: 0.2rem 0.5rem;;border-radius: 10rem;background-image:linear-gradient(to right,rgb(182,220,255),rgb(114 190 255)); } .page14_div4 .p12{ margin-left: 2rem;text-align: left; } .page14_div5{ position: absolute; width:50vw; height:20%; transform:translate(-50%, -50%);top:72%; left:62%;display: flex; display: -webkit-flex;justify-content:left;align-items: center; } .page14_div5 .p8{ text-align: center;width: 12rem;padding: 0.2rem 0.5rem;;border-radius: 10rem;background-image:linear-gradient(to right,rgb(182,220,255),rgb(114 190 255)); } .page14_div5 .p13{ margin-left: 2rem;text-align: center; } .page14_div6{ position: absolute; width:50vw; height:20%; transform:translate(-50%, -50%);top:87%; left:62%; } .page14_div7{ position: absolute; width:30vw; height:60%; transform:translate(-50%, -50%);top:85%; left:37%; } .page14_div8{ margin-top: 20rem;width: 100%; position: absolute;display: flex; display: -webkit-flex;justify-content:center;align-items: center; } .page14_div8 .button_0{ width: 33%;text-decoration: none; } .page14_div8 .button_0 img{ object-fit: cover;width: 50%;margin-left: 25%; height: auto; } .page14_div8 .button_0 h2{ line-height: 3rem;color: #ffffff;width:100%;text-align: center; font-weight: normal; } .page14_div8 .button_1{ width: 33%;text-decoration: none; } .page14_div8 .button_1 img{ object-fit: cover;width: 50%;margin-left: 25%; height: auto; } .page14_div8 .button_1 h2{ line-height: 3rem;color: #ffffff;width:100%;text-align: center; font-weight: normal; } .page14_div8 .button_2{ width: 33%;text-decoration: none; } .page14_div8 .button_2 img{ object-fit: cover;width: 50%;margin-left: 25%; height: auto; } .page14_div8 .button_2 h2{ line-height: 3rem;color: #ffffff;width:100%;text-align: center; font-weight: normal; } .page14_div8 .button_3{ width: 33%;text-decoration: none; } .page14_div8 .button_3 img{ object-fit: cover;width: 50%;margin-left: 25%; height: auto; } .page14_div8 .button_3 h2{ line-height: 3rem;color: #ffffff;width:100%;text-align: center; font-weight: normal; } .page14_div9{ width: 50%; height: 100%;transform:translate(0, -50%);top:35%; position: absolute; left: 50%;display: flex; display: -webkit-flex; justify-content: right;align-items: center; } .page14_div9 .p0{ object-fit: contain; position: absolute; width: 100%; } /* ---------------------------------------------------------------------------------------- page15 ---------------------------------------------------------------------------------------- */ .page15{ height: 130vh;position: relative;background-color: #000000; } .page15 .t1{ font-size: 5rem;color: #ffffff;text-align: center;padding-top: 10rem; } .page15_section{ width:80%; height:60%; position: absolute; transform:translate(-50%, 10%);left:50%; display: flex; display: -webkit-flex;justify-content: center;align-items: center; } .page15_section_div{ width:33%; height:100%; position: relative; } .size{ object-fit: contain; width:100%;height: 20rem; } .page15_col{ width: 100%; height: 5rem;display: flex; display: -webkit-flex;justify-content: center;align-items: center; } .page15_col .c1{ width: 1rem; height: 1rem; border-radius: 50%; background-color: #ffffff; } .page15_col .c2{ width: 1rem; height: 1rem; border-radius: 50%; background-color: #dcd4d0; margin-left: 0.5rem; } .page15_col .c3{ width: 1rem; height: 1rem; border-radius: 50%; background-color: #d0ba9f;margin-left: 0.5rem; } .page15_section_div h1{ width: 100%; text-align: center;color: #fcfcfc;font-size: 3rem;font-weight: normal;margin-top: 5rem;margin-bottom: 2rem; } .page15_section_div h3{ width: 100%; text-align: center;color: #d1d1d1;font-size: 1.5rem;line-height: 2.5rem; font-weight: normal; } .page15_section_div button{ width:6rem;height:3rem;background: #0065cb;color: #ffffff;font-size: 1.5rem;border: 0;border-radius: 2.7rem;position: absolute; transform:translate(-50%, 0%); left:50%;bottom:5rem } .page15_section_div .button_0{ text-decoration: none;position: absolute; transform:translate(-50%, 0%); left:50%;bottom:0; } .page15_section_div span{ color: #0065cb;font-size: 1.5rem;font-weight: normal; } .page15_section_div .arr{ width: 1.8rem;position: absolute;margin-left: 0.5rem; } /* ---------------------------------------------------------------------------------------- page16 ---------------------------------------------------------------------------------------- */ .page16{ height: 100vh;position: relative;background-color: #000000; } .page16_section{ width: 50%; height:85%; position: absolute; transform:translate(-50%, 10%);left: 50%; } .page16_section_title{ width: 100%; height:20%;margin-top: 5%; } .page16_section_title .logo{ position: relative;transform:translate(-50%, -50%);left: 50%;top:20%;width: 30%;object-fit: cover; } .page16_section_title .t1{ text-align: center; font-weight: normal;margin-top: 3rem; } .page16_section_page{ width: 80%; height:40%;margin-left: 10%;margin-right: 10%;display: flex; display: -webkit-flex;justify-content: center;align-items: center; } .page16_section_page div{ width: 30%;height: 40%; } .page16_section_page img{ width: 80%;height: 80%;margin-left: 10%; object-fit: cover;margin-bottom: 1rem; } .page16_section_page h3{ text-align: center;bottom: 0; } .page16_section_code{ width: 100%; height:30%; } .page16_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; }