@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-white {
color: white;
}
.color-grey {
color: #c8c8c8;
}
.color-color{
background: -webkit-linear-gradient(300deg,rgb(247,241,231),rgb(167 162 140));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.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;
}
.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;
}
#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;z-index: 9;position: absolute;font-family: hyjunhei-85j;color: #ffffff;top: 30%;left: 50%;transform: translate(-50%, -50%);font-size: 10rem;font-weight: normal;
}
.name1 {
opacity: 0;z-index: 9;position: absolute;color: #ffffff;top: 22%;left: 50%;transform: translate(-50%, -50%);font-size: 2rem;font-weight: normal
}
.name2 {
opacity: 0;z-index: 9;position: absolute;bottom: 6%;left: 50%;transform: translate(-50%, -50%);text-decoration: none;
}
.name2 span {
color: #0065cb;font-size: 2rem;font-weight: normal;
}
.name2 img {
width: 2.2rem;position: absolute;margin-left: 0.5rem; bottom: 0;
}
.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: 100vh; background-color: #000000;position: relative;
}
.page2 .black{
background-color: #000000;width:100%;height:100%; position: absolute;opacity: 0;
}
.page2 .p1{
transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s;object-fit: cover; position: absolute;z-index: 9;bottom:0;left: 0;width: 33%; height: 100%;
}
.page2 .p2{
transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s;object-fit: cover; position: absolute;z-index: 9;bottom:0;left: 33%;width: 34%; height: 100%;
}
.page2 .p3{
transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s;object-fit: cover; position: absolute;z-index: 9;bottom:0;right: 0;width: 33%; height: 100%;
}
.page2 .masking{
position: absolute; width:100%; height:100%;bottom:0; left:0;background:rgba(0,0,0,0.6);z-index: 10;
}
.page2 .t1{
position: absolute;left: 15%;transform: translate(-50%, -50%);width:25%; top: 50%; text-align: left;z-index: 12;transition:1s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page2 .t1 h1{
color: #ffffff;font-weight: bold;transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page2 .t1 h2{
color: #ffffff;font-weight: normal;transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page2 .t1 h2 b{
font-size: 3rem;
}
.page2 .t1 h3{
color: #ffffff;width: 100%;font-weight: normal; transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page2 .t2{
position: absolute;left: 50%;transform: translate(-50%, -50%);width:25%; top: 50%; text-align: left;z-index: 12;transition:1s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page2 .t2 h1{
color: #ffffff;font-weight: bold;transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page2 .t2 h2{
color: #ffffff;font-weight: normal;transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page2 .t2 h2 b{
font-size: 3rem;
}
.page2 .t2 h3{
color: #ffffff;width: 100%;font-weight: normal; transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page2 .t3{
position: absolute;left: 85%;transform: translate(-50%, -50%);width:25%; top: 50%; text-align: left;z-index: 12;transition:1s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page2 .t3 h1{
color: #ffffff;font-weight: bold;transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page2 .t3 h2{
color: #ffffff;font-weight: normal;transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page2 .t3 h2 b{
font-size: 3rem;
}
.page2 .t3 h3{
color: #ffffff;width: 100%;font-weight: normal; transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s;
}
/* ---------------------------------------------------------------------------------------- page3 ---------------------------------------------------------------------------------------- */
.page3 {
height: 100vh; background-color: #000000;position: relative;
}
.page3 .black{
background-color: #000000;width:100%;height:100%; position: absolute;opacity: 0;
}
.page3 .p1{
object-fit: cover; width: 100%; height: auto;
}
.page3_section{
position: absolute; width:100%; transform:translate(0%, -50%); left:10%;top: 50%; text-align: left;z-index: 11;
}
.page3_section h3{
z-index: 11;color: #ffffff;width: 100%;font-weight: normal; transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page3_section h2{
z-index: 11;color: #ffffff;font-weight: normal;transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page3 .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.2));z-index: 10;
}
/* ---------------------------------------------------------------------------------------- page4 ---------------------------------------------------------------------------------------- */
.page4{
height: 100vh; background-color: #000000;position: relative;
}
.page4 .black{
background-color: #000000;width:100%;height:100%; position: absolute;opacity: 0;
}
.page4 img{
object-fit: cover; width: 100%; height: auto;
}
.page4_section {
position: absolute; width:100%; transform:translate(0%, -50%); right:10%;top: 50%; text-align: right;z-index: 11;
}
.page4_section .t1{
z-index: 11;color: #ffffff;font-weight: normal; transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page4_section .t2{
z-index: 11;color: #ffffff;font-weight: normal; transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page4 .masking{
position: absolute; width:100%; height:100%;bottom:0; right:0;background:linear-gradient(to left, rgba(0,0,0,0.9) 0%,rgba(0,0,0,0.7) 15%,rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.5));z-index: 10;
}
/* ---------------------------------------------------------------------------------------- page5 ---------------------------------------------------------------------------------------- */
.page5{
height: 100vh; background-color: #1a1e20; position: relative;
}
.page5 .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.01));z-index: 5;
}
.page5 .video5{
height: 100%;width: 100%; position: absolute;right:0%;top: 0%;
}
.page5 .video5 #video5{
width: 100%;height: 100%; position: absolute; background: #000000; object-fit: cover;
}
.page5_section{
position: absolute; width:100%; transform:translate(-50%, 0); left:50%;top: 10%; text-align: center;z-index: 9;
}
.page5_section h1{
z-index: 9;
}
.page5_section h2{
margin-top: 5rem;z-index: 9;
}
/* ---------------------------------------------------------------------------------------- page6 ---------------------------------------------------------------------------------------- */
.page6{
background-color: #000000;height: 100vh;
}
.page6_section{
width: 60%; height: 80%; position: relative; transform:translate(-50%, -50%); left:50%; top:50%; display: flex; display: -webkit-flex;justify-content: center;
}
.page6_section .page6_section_div{
background-color: #000000; width: 50%; height: 100%; margin: 1rem;
}
.page6_section_div1{
width: 100%;height: 80%; position: relative; transform:translate(-50%, -50%); left:40%; top:50%;
}
.page6_section_div1 h1{
text-align: left;
}
.page6_section_div1 h2{
text-align: left;margin-top: 2rem;
}
.page6_section_div2{
position: absolute; width:30vw; height:10rem; transform:translate(-50%, -50%);top:10%; left:21%;
}
.page6_section_div2_div{
margin-top: 20rem;width: 100%; position: absolute;display: flex; display: -webkit-flex;justify-content:left;align-items: left;
}
.page6_section_div2_div .button_1{
width: 31%; text-decoration: none;
}
.page6_section_div2_div .button_1 h1{
color: #ffffff;font-size: 4rem;text-align: left;font-weight: bold;
}
.page6_section_div2_div .button_1 h1 b{
font-size: 3rem;
}
.page6_section_div2_div .button_1 h2{
line-height: 3rem;color: #ffffff;width:100%;text-align: left; font-weight: normal; letter-spacing: 0.2rem;white-space: nowrap;
}
.page6_section_div2_div .button_2{
width: 31%; text-decoration: none;
}
.page6_section_div2_div .button_2 h1{
color: #ffffff;font-size: 4rem;text-align: left;font-weight: bold;
}
.page6_section_div2_div .button_2 h1 b{
font-size: 3rem;
}
.page6_section_div2_div .button_2 h2{
line-height: 3rem;color: #ffffff;width:100%;text-align: left; font-weight: normal; letter-spacing: 0.2rem;white-space: nowrap;
}
.page6_section_div2_div .button_3{
width: 29%;text-decoration: none;
}
.page6_section_div2_div .button_3 h1{
color: #ffffff;font-size: 4rem;text-align: left;font-weight: bold;
}
.page6_section_div2_div .button_3 h1 b{
font-size: 3rem;
}
.page6_section_div2_div .button_3 h2{
line-height: 3rem;color: #ffffff;width:100%;text-align: left; font-weight: normal; letter-spacing: 0.2rem;white-space: nowrap;
}
.page6_section_div3{
position: absolute; width:40vw; height:20rem; transform:translate(-50%, -50%);top:55%; left:29%;
}
.page6_section_div3 h2{
transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page6_section_div3 h3{
transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page6_section_div3 h3 b{
color: white;
}
.page6_section_div4{
position: absolute; width:40vw; height:20rem; transform:translate(-50%, -50%);top:55%; left:29%;
}
.page6_section_div4 h2{
opacity: 0;transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page6_section_div4 h3{
opacity: 0;transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page6_section_div5{
position: absolute; width:40vw; height:20rem; transform:translate(-50%, -50%);top:55%; left:29%;
}
.page6_section_div5 h2{
opacity: 0;transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page6_section_div5 h3{
opacity: 0;transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page6_section_div5 h3 b{
color: white;
}
.page6_section_div6{
width: 40vw; height: 20rem; position: absolute; transform:translate(-50%, -50%); left:29%; top:80%; display: flex; display: -webkit-flex;justify-content: left;z-index: 100;
}
.page6_section_div6_div{
width: 40vw;height: auto;position: absolute;display: flex; display: -webkit-flex; justify-content: left;align-items: left;z-index: 10;
}
.page6_section_div6_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_section_div6_div .btn2{
margin-right: 3rem;cursor: pointer;color:#f5f5f7;font-size: 1.8rem;border-radius: 1.5rem;padding: 0.5rem 1rem;
}
.page6_section_div6_div .btn3{
margin-right: 3rem;cursor: pointer;color:#f5f5f7;font-size: 1.8rem;border-radius: 1.5rem;padding: 0.5rem 1rem;
}
.page6_section_div7{
left:20.5%; top:80%;width: 30vw;position: absolute;transform:translate(-50%, -50%);display: flex; display: -webkit-flex;justify-content:left;align-items: center;
}
.page6_section_div7 .a1{
text-decoration: none; width:25%;
}
.page6_section_div7 .a1 span{
color: #0065cb;font-size: 1.8rem; font-weight: normal
}
.page6_section_div7 .a1 img{
width: 1.8rem;position: absolute;margin-left: 0.5rem;bottom: 0.2rem
}
.page6_section_div7 .a2{
text-decoration: none; width:25%;
}
.page6_section_div7 .a2 span{
color: #0065cb;font-size: 1.8rem;font-weight: normal
}
.page6_section_div7 .a2 img{
width: 1.8rem;position: absolute;margin-left: 0.5rem;bottom: 0.2rem
}
.page6_section_div7 .a3{
text-decoration: none; width:25%;
}
.page6_section_div7 .a3 span{
color: #0065cb;font-size: 1.8rem;font-weight: normal
}
.page6_section_div7 .a3 img{
width: 1.8rem;position: absolute;margin-left: 0.5rem;bottom: 0.2rem
}
.page6_section_div7 .a4{
text-decoration: none; width:25%;
}
.page6_section_div7 .a4 span{
color: #0065cb;font-size: 1.8rem;font-weight: normal
}
.page6_section_div7 .a4 img{
width: 1.8rem;position: absolute;margin-left: 0.5rem;bottom: 0.2rem
}
.page6_section .p4{
background-color: #000000; width: 50%; height: 100%; margin: 1rem; border-radius: 3rem; overflow: hidden;
}
.page6_section .p4 #video6{
height: 100%;position: relative;right: 0%;top:50%;transform:translate(-50%, -50%); background: #000000; object-fit: cover;
}
/* ---------------------------------------------------------------------------------------- page7 ---------------------------------------------------------------------------------------- */
.page7{
background-color: #000000;height: 100vh;
}
.page7_section{
width: 60%; height: 80%; position: relative; transform:translate(-50%, -50%); left:50%; top:50%; display: flex; display: -webkit-flex;justify-content: center;
}
.page7_section .p1{
background-color: #ffffff; width: 50%; height: 100%; margin: 1rem; border-radius: 3rem; overflow: hidden;
}
.page7_section .p1 #video7{
height: 100%;position: relative;left: 50%;top:50%;transform:translate(-50%, -50%); background: #000000; object-fit: cover;
}
.page7_section_div{
background-color: #000000; width: 50%; height: 100%; margin: 1rem;
}
.page7_section_div1{
width: 100%;height: 80%; position: relative; transform:translate(-50%, -50%); left:65%; top:55%;
}
.page7_section_div1 h1{
text-align: left;
}
.page7_section_div1 h2{
text-align: left;margin-top: 2rem;
}
.page7_section_div2{
position: absolute; width:40vw; height:20rem; transform:translate(-50%, -50%);top:50%; left:92%;
}
.page7_section_div2 h2{
transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page7_section_div2 h3{
transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page7_section_div3{
position: absolute; width:40vw; height:20rem; transform:translate(-50%, -50%);top:50%; left:92%;
}
.page7_section_div3 h2{
opacity: 0;transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page7_section_div3 h3{
opacity: 0;transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page7_section_div4{
width: 40vw; height: 20rem; position: absolute; transform:translate(-50%, -50%); left:92%; top:80%; display: flex; display: -webkit-flex;justify-content: left;z-index: 100;
}
.page7_section_div5{
width: 40vw;height: auto;position: absolute;display: flex; display: -webkit-flex; justify-content: left;align-items: left;z-index: 10;
}
.page7_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;
}
.page7_section_div5 .btn2{
margin-right: 3rem;cursor: pointer;color:#f5f5f7;font-size: 1.8rem;border-radius: 1.5rem;padding: 0.5rem 1rem;
}
.page7_section_div6{
position: absolute; transform:translate(-50%, -50%); left:63%; top:80%;display: flex; display: -webkit-flex;justify-content:left;align-items: left;
}
.page7_section_div6 a{
text-decoration: none;
}
.page7_section_div6 a span{
color: #0065cb;font-size: 1.8rem; font-weight: normal;white-space: nowrap;
}
.page7_section_div6 a img{
width: 2.2rem;position: absolute;margin-top: 0.2rem;
}
/* ---------------------------------------------------------------------------------------- page8 ---------------------------------------------------------------------------------------- */
.page8{
height: 100vh; position: relative;background-color: #000000;
}
.page8_section{
position: absolute; width:100%; transform:translate(-50%, 0); left:50%;top: 10%; text-align: center;
}
.page8_section h2{
margin-top: 2rem;
}
.page8_section h3{
margin-top: 5rem;
}
.page8 .page8_img{
background-color: #000000;width: 90%;height: 45%; position: absolute; transform:translate(-50%, -50%);left:50%;top: 70%; border-radius: 2rem; overflow: hidden;
}
.page8 .page8_img .img1{
object-fit: contain; position:absolute; width:60%;height: auto;transform:translate(-50%,0%);left:50%;
}
/* ---------------------------------------------------------------------------------------- page9 ---------------------------------------------------------------------------------------- */
.page9{
height: 100vh; background-color: #1a1e20; position: relative;
}
.page9 .masking1{
position: absolute; width:100%; height:100%; transform:translate(0, -50%);top:50%; right:0%;background:linear-gradient(to left, 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.01));z-index: 5;
}
.page9 .masking2{
position: absolute; width:100%; height:30%;bottom:0%; right:0%;background:linear-gradient(to top, rgba(0,0,0,0.9) 0%,rgba(0,0,0,0.5) 15%,rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.01));z-index: 5;
}
.page9 .vid{
height: 100%;width: 100%; position: absolute;right:0%;top: 0%;
}
.page9 .vid #video9{
height: 100%; position: absolute; background: #000000;
}
.page9_section1{
position: absolute; width:100%; transform:translate(-50%, 0); left:70%;top: 40%; text-align: center;z-index: 9;
}
.page9_section1 .p1_n1{
font-size: 3rem;color: #ffffff;margin-left: 10rem;font-weight: normal;z-index: 9;letter-spacing: 0.35rem;
}
.page9_section1 .p1_n2{
font-size: 3rem;color: #ffffff;margin-left: 10rem;font-weight: normal;z-index: 9;
}
.page9_section1 .p1_n3{
margin-top: 5rem;font-size: 10rem;font-weight: bold;z-index: 9;
}
.page9_section1 .p1_n4{
margin-top: 0rem;font-size: 4rem;font-weight: normal;z-index: 9;
}
.page9_section1 .p1_n5{
width: 20%; height: 0.1rem; 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:35%;left:52%;
}
.page9_section2{
position: absolute; width:100%; transform:translate(-50%, 0); left:70%;top: 40%; text-align: center;z-index: 9;
}
.page9_section2 .p2_n1{
font-size: 8rem;font-weight: bold;z-index: 9;opacity: 0;
}
.page9_section2 .p2_n2{
font-size: 8rem;font-weight: normal;z-index: 9;opacity: 0;
}
.page9_section2 .p2_n3{
font-size: 3rem;color: #ffffff;margin-top: 0rem;font-weight: normal;z-index: 9;opacity: 0;
}
/* ---------------------------------------------------------------------------------------- page10 ---------------------------------------------------------------------------------------- */
.page10{
height: 100vh;background-color: #000000;margin-top: 10rem;
}
.page10_section{
width: 60%; height: 80%; position: relative; transform:translate(-50%, -50%); left:50%; top:50%; display: flex; display: -webkit-flex;justify-content: center;
}
.page10_section .p1{
background-color: #000000; width: 50%; height: 100%; margin: 1rem; border-radius: 3rem; overflow: hidden;
}
.page10_section .p1 .img{
object-fit: cover; width: 100%; height: 100%;
}
.page10_section_div{
background-color: #000000; width: 50%; height: 100%; margin: 1rem;border-radius: 3rem;
}
.page10_section_div1{
width: 70%;height: 80%; position: relative; transform:translate(-50%, -50%); left:50%; top:55%;
}
.page10_section_div1 h1{
text-align: left;
}
.page10_section_div1 h2{
margin-top: 2rem;
}
.page10_section_div2{
position: absolute; width:40vw; height:30rem; transform:translate(0, -50%);top:37%; left:0;
}
.page10_section_div3{
margin-top: 20rem;width: 80%; position: absolute;display: flex; display: -webkit-flex;justify-content:left;align-items: left;
}
.page10_section_div3 .button_05{
width: 30%; text-decoration: none;
}
.page10_section_div3 .button_05 h1{
color: #ffffff;font-size: 4rem;text-align: left;font-weight: bold;
}
.page10_section_div3 .button_05 h1 b{
font-size: 3rem;
}
.page10_section_div3 .button_05 h2{
line-height: 3rem;color: #ffffff;width:100%;text-align: left; font-weight: normal; letter-spacing: 0.2rem;white-space: nowrap;
}
.page10_section_div3 .button_06{
width: 30%;text-decoration: none;
}
.page10_section_div3 .button_06 h1{
color: #ffffff;font-size: 4rem;text-align: left;font-weight: bold;
}
.page10_section_div3 .button_06 h1 b{
font-size: 3rem;
}
.page10_section_div3 .button_06 h2{
line-height: 3rem;color: #ffffff;width:100%;text-align: left; font-weight: normal; letter-spacing: 0.2rem;white-space: nowrap;
}
.page10_section_div1 .p4{
text-align: left;margin-top: 20rem;
}
/* ---------------------------------------------------------------------------------------- page11 ---------------------------------------------------------------------------------------- */
.page11{
height: 100vh; background-color: #000000; position: relative;margin-top: 10rem;
}
.page11_img{
width: 30%; height: 70%;transform:translate(0, -50%);top:50%; position: absolute; right: 0;display: flex; display: -webkit-flex; justify-content: right;align-items: center;
}
.page11_img .img1{
object-fit: contain; position: absolute;transform:translate(0, -50%);top: 10%;width: 100%;
}
.page11_img .img7{
object-fit: contain; position: absolute;transform:translate(0, -50%);top: 90%;width: 100%;
}
.page11_img .img2{
object-fit: contain; position: absolute;transform:translate(0, -50%);top: 25%;width: 100%;
}
.page11_img .img3{
object-fit: contain; position: absolute;transform:translate(0, -50%);top: 35%;width: 100%;
}
.page11_img .img4{
object-fit: contain; position: absolute;transform:translate(0, -50%);top: 45%;width: 100%;
}
.page11_img .img5{
object-fit: contain; position: absolute;transform:translate(0, -50%);top: 55%;width: 100%;
}
.page11_img .img6{
object-fit: contain; position: absolute;transform:translate(0, -50%);top: 70%;width: 100%;
}
.page11_section{
width: 25%; height: 70%;transform:translate(0, -50%);top:50%; position: absolute; right: 18%;
}
.page11_section .n1{
width: 100%; height: 8rem;position: absolute;transform:translate(0, -50%); top:10%;
}
.page11_section .n1 div{
background: linear-gradient(to right,rgba(255,255,255,1),rgba(255,255,255,0.3)); position: absolute;width: 100%; height: 0.1rem; top: 60%;
}
.page11_section .n1 h2{
position: absolute; top: 0;font-weight: normal;
}
.page11_section .n1 h3{
position: absolute; bottom: 0;left: 0.5rem;font-weight: normal;
}
.page11_section .n2{
width: 100%; height: 8rem;position: absolute; transform:translate(0, -50%); top:44%;
}
.page11_section .n2 div{
background: linear-gradient(to right,rgba(255,255,255,1),rgba(255,255,255,0.3)); position: absolute;width: 100%; height: 0.1rem; top: 60%;
}
.page11_section .n2 h2{
position: absolute;top: 0;
}
.page11_section .n2 h3{
position: absolute;bottom: 0;left: 0.5rem;
}
.page11_section .n3{
width: 100%; height: 8rem;position: absolute; transform:translate(0, -50%); bottom:0%;
}
.page11_section .n3 div{
background: linear-gradient(to right,rgba(255,255,255,1),rgba(255,255,255,0.3)); position: absolute;width: 100%; height: 0.1rem; top: 60%;
}
.page11_section .n3 h2{
position: absolute;top: 0;
}
.page11_section .n3 h3{
position: absolute;bottom: 0;left: 0.5rem;
}
.page11_section1{
position: absolute; width:70rem; height:60%; transform:translate(0, -50%);top:55%; left:10%;
}
.page11_section1 .t1{
text-align: left;
}
.page11_section1 .t2{
margin-top: 2rem;
}
.page11_section1_div1{
position: absolute; width:40vw; height:20rem; transform:translate(-50%, -50%);top:45%; left:55%;
}
.page11_section1_div1 .t01{
transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page11_section1_div1 .t01_1{
transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page11_section1_div2{
position: absolute; width:40vw; height:20rem; transform:translate(-50%, -50%);top:45%; left:55%;
}
.page11_section1_div2 .t02{
transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page11_section1_div2 .t02_1{
transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page11_section1_div3{
position: absolute; width:40vw; height:20rem; transform:translate(-50%, -50%);top:45%; left:55%;
}
.page11_section1_div3 .t03{
transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page11_section1_div3 .t03_1{
transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page11_section1_div4{
width: 40vw; height: 20rem; position: absolute; transform:translate(-50%, -50%); left:55%; top:80%; display: flex; display: -webkit-flex;justify-content: left;z-index: 100;
}
.page11_section1_div5{
width: 40vw;height: auto;position: absolute;display: flex; display: -webkit-flex; justify-content: left;align-items: left;z-index: 10;
}
.page11_section1_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;
}
.page11_section1_div5 .btn2{
margin-right: 3rem;cursor: pointer;color:#f5f5f7;font-size: 1.8rem;border-radius: 1.5rem;padding: 0.5rem 1rem;
}
.page11_section1_div5 .btn3{
margin-right: 3rem;cursor: pointer;color:#f5f5f7;font-size: 1.8rem;border-radius: 1.5rem;padding: 0.5rem 1rem;
}
.page11_section1 .tip1{
font-size: 2rem;
line-height: 3rem;
font-family: 'hyjunhei-65j';
font-weight: normal;
white-space: nowrap;
text-decoration: none; width:40%; position: absolute;bottom: 0;
}
.page11_section1 .tip1 span{
color: #0065cb; font-weight: normal;
}
.page11_section1 .tip1 img{
width: 2.5rem;position: absolute;margin-left: 0.5rem;bottom: 0.2rem;
}
/* ---------------------------------------------------------------------------------------- page12 ---------------------------------------------------------------------------------------- */
.page12{
background-color: #000000;height: 100vh;margin-top: 10rem;
}
.page12_section{
width: 60%; height: 80%; position: relative; transform:translate(-50%, -50%); left:50%; top:50%; display: flex; display: -webkit-flex;justify-content: center;
}
.page12_section_div{
background-color: #000000; width: 50%; height: 100%; margin: 1rem;margin-right: 9rem;
}
.page12_section_div1{
width: 100%;height: 80%; position: relative; transform:translate(-50%, -50%); left:50%; top:60%;
}
.page12_section_div1 h1{
text-align: left;
}
.page12_section_div1 h2{
text-align: left;margin-top: 2rem;
}
.page12_section_div2{
position: absolute; width:40vw; height:20rem; transform:translate(-50%, -50%);top:55%; left:34.5%;
}
.page12_section_div2 h2{
transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page12_section_div2 h3{
transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page12_section_div3{
position: absolute; width:40vw; height:20rem; transform:translate(-50%, -50%);top:55%; left:34.5%;
}
.page12_section_div3 h2{
opacity: 0;transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page12_section_div3 h3{
opacity: 0;transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page12_section_div4{
position: absolute; width:40vw; height:20rem; transform:translate(-50%, -50%);top:55%; left:34.5%;
}
.page12_section_div4 h2{
opacity: 0;transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page12_section_div4 h3{
opacity: 0;transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s;
}
.page12_section_div5{
width: 40vw; height: 20rem; position: absolute; transform:translate(-50%, -50%); left:34.5%; top:80%; display: flex; display: -webkit-flex;justify-content: left;z-index: 100;
}
.page12_section_div6{
width: 40vw;height: auto;position: absolute;display: flex; display: -webkit-flex; justify-content: left;align-items: left;z-index: 10;
}
.page12_section_div6 .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_section_div6 .btn2{
margin-right: 3rem;cursor: pointer;color:#f5f5f7;font-size: 1.8rem;border-radius: 1.5rem;padding: 0.5rem 1rem;
}
.page12_section_div6 .btn3{
margin-right: 3rem;cursor: pointer;color:#f5f5f7;font-size: 1.8rem;border-radius: 1.5rem;padding: 0.5rem 1rem;
}
.page12_section .p5{
background-color: #000000; width: 50%; height: 100%; margin: 1rem; border-radius: 3rem; overflow: hidden;
}
.page12_section .p5 #video12{
height: 100%;position: relative;left: 50%;top:50%;transform:translate(-50%, -50%); background: #000000; object-fit: cover;
}
/* ---------------------------------------------------------------------------------------- page13 ---------------------------------------------------------------------------------------- */
.page13{
background-color: #000000;height: 100vh;margin-top: 10rem;
}
.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%; margin: 1rem; border-radius: 3rem; overflow: hidden;
}
.page13_section .p1 .img2{
object-fit: contain; position:absolute; width:100%;height: 100%;z-index: 99;opacity: 0;left: 0%;
}
.page13_section .p1 #video13{
width: 100%;position: relative;left: 50%;top:50%;transform:translate(-50%, -50%); background: #000000; object-fit: contain;
}
.page13_section_div{
background-color: #000000; width: 50%; height: 100%; margin: 1rem;
}
.page13_section_div1{
width: 40vw;height: 20rem; position: absolute; transform:translate(-50%, -50%); left:90%; top:20%;
}
.page13_section_div1 h1{
text-align: left;
}
.page13_section_div1 h2{
text-align: left;margin-top: 2rem;
}
.page13_section_div2{
position: absolute; width:40vw; height:20rem; transform:translate(-50%, -50%);top:40%; left:90%;
}
.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:40vw; height:20rem; transform:translate(-50%, -50%);top:40%; left:90%;
}
.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: 40vw; height: 20rem; position: absolute; transform:translate(-50%, -50%); left:90%; top:70%; display: flex; display: -webkit-flex;justify-content: left;z-index: 100;
}
.page13_section_div5{
width: 40vw;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;
}
.page13_section_div .p5{
width: 40vw; height: 20rem; position: absolute;transform:translate(-50%, -50%);top:80%; left: 90%;
}
.page13_section .p5 .img1{
object-fit: contain; position:absolute; width:60%;height: 100%;left: 0%;
}
/* ---------------------------------------------------------------------------------------- page14 ---------------------------------------------------------------------------------------- */
.page14{
height: 100vh; background-color: #000000; position: relative;
}
.page14_section{
position: absolute; width:40vw; height:60%; transform:translate(0, -50%);top:40%; left:10%;
}
.page14_section .p1{
text-align: left;
}
.page14_section .p2{
text-align: left;margin-top: 1rem;
}
.page14_section .p3{
width: 100%; height: 0.1rem; background: linear-gradient(to right,rgba(255,255,255,0.6),rgba(255,255,255,0.6),rgba(255,255,255,0.6));position: absolute;transform:translate(-50%, -50%);top:22%;left:50%;
}
.page14_section_div1{
position: absolute; width:50vw; height:20%; transform:translate(-50%, -50%);top:35%; left:60%;display: flex; display: -webkit-flex;justify-content:left;align-items: center;
}
.page14_section_div1 .p4{
margin-left: 2rem;text-align: center;
}
.page14_section_div2{
position: absolute; width:50vw; height:20%; transform:translate(-50%, -50%);top:45%; left:62%;display: flex; display: -webkit-flex;justify-content:left;align-items: center;
}
.page14_section_div2 .p5{
margin-left: 2rem;text-align: left;
}
.page14_section_div3{
position: absolute; width:50vw; height:20%; transform:translate(-50%, -50%);top:50%; left:62%;display: flex; display: -webkit-flex;justify-content:left;align-items: center;
}
.page14_section_div3 .p6{
margin-left: 2rem;text-align: left;
}
.page14_section_div4{
position: absolute; width:50vw; height:20%; transform:translate(-50%, -50%);top:55%; left:62%;display: flex; display: -webkit-flex;justify-content:left;align-items: center;
}
.page14_section_div4 .p7{
margin-left: 2rem;text-align: left;
}
.page14_section_div5{
position: absolute; width:50vw; height:20%; transform:translate(-50%, -50%);top:65%; left:64.5%;display: flex; display: -webkit-flex;justify-content:left;align-items: center;
}
.page14_section_div5 .p9{}
.page14_section_div6{
position: absolute; width:30vw; height:60%; transform:translate(-50%, -50%);top:75%; left:37%;
}
.page14_section_div7{
margin-top: 20rem;width: 100%; position: absolute;display: flex; display: -webkit-flex;justify-content:center;align-items: center;
}
.page14_section_div7 .button_0{
width: 33%; text-decoration: none;
}
.page14_section_div7 .button_0 img{
object-fit: cover;width: 50%;margin-left: 25%; height: auto;
}
.page14_section_div7 .button_0 h2{
line-height: 3rem;color: #ffffff;width:100%;text-align: center; font-weight: normal; letter-spacing: 0.2rem;
}
.page14_section_div7 .button_1{
width: 33%; text-decoration: none;
}
.page14_section_div7 .button_1 img{
object-fit: cover;width: 50%;margin-left: 25%; height: auto;
}
.page14_section_div7 .button_1 h2{
line-height: 3rem;color: #ffffff;width:100%;text-align: center; font-weight: normal; letter-spacing: 0.2rem;
}
.page14_section_div7 .button_2{
width: 33%;text-decoration: none;
}
.page14_section_div7 .button_2 img{
object-fit: cover;width: 50%;margin-left: 25%; height: auto;
}
.page14_section_div7 .button_2 h2{
line-height: 3rem;color: #ffffff;width:100%;text-align: center; font-weight: normal; letter-spacing: 0.2rem;
}
.page14_section_div7 .button_3{
width: 33%;text-decoration: none;
}
.page14_section_div7 .button_3 img{
width: 50%;margin-left: 25%; height: auto;
}
.page14_section_div7 .button_3 h2{
line-height: 3rem;color: #ffffff;width:100%;text-align: center; font-weight: normal; letter-spacing: 0.2rem;
}
.page14_section .p10{
width: 100%; height: 0.1rem; background: linear-gradient(to right,rgba(255,255,255,0.6),rgba(255,255,255,0.6),rgba(255,255,255,0.6));position: absolute;transform:translate(-50%, -50%);top:108%;left:50%;
}
.page14_img{
width: 50%; height: 100%;transform:translate(0, -50%);top:50%; position: absolute; left: 50%;display: flex; display: -webkit-flex; justify-content: right;align-items: center;
}
.page14_img .img0{
object-fit: contain; z-index: 10;position: absolute; width: 80%;right: 10%;
}
.page14_img .img9{
object-fit: contain; z-index: 11;position: absolute; width: 80%;right: 10%;
}
.page14_img .img8{
object-fit: contain; z-index: 12;position: absolute; width: 80%;right: 10%;
}
.page14_img .img7{
object-fit: contain; z-index: 13;position: absolute; width: 80%;right: 10%;
}
.page14_img .img6{
object-fit: contain; z-index: 14;position: absolute; width: 80%;right: 10%;
}
.page14_img .img5{
object-fit: contain; z-index: 15;position: absolute; width: 80%;right: 10%;
}
.page14_img .img4{
object-fit: contain; z-index: 16;position: absolute; width: 80%;right: 10%;
}
.page14_img .img3{
object-fit: contain; z-index: 17;position: absolute; width: 80%;right: 10%;
}
.page14_img .img2{
object-fit: contain; z-index: 18;position: absolute; width: 80%;right: 10%;
}
.page14_img .img1{
object-fit: contain; z-index: 20;position: absolute; width: 80%;right: 10%;
}
/* ---------------------------------------------------------------------------------------- page15 ---------------------------------------------------------------------------------------- */
.page15{
height: 100vh;background-color: #000000;margin-top: 10rem;
}
.page15_section{
width: 70%; height: 90%; position: relative; transform:translate(-50%, -50%); left:50%; top:40%; display: flex; display: -webkit-flex;justify-content: center;
}
.page15_section_div{
width: 49.5%;margin-right: 1rem; height: 100%;position: absolute;top: 50%; left: 50%; transform: translate(-100%, -50%); display: flex; display: -webkit-flex; justify-content: center;align-items: center;
}
.page15_section_div .p1{
width: 60%; height: 38.5%;background-color: #0b2e13;border-radius: 3rem; overflow: hidden;position: absolute; top: 28%; left: 29%; transform: translate(-50%, 0);
}
.page15_section_div .p1 h2{
line-height: 3rem;width: 100%; height: 3rem;text-align: center;position: absolute;transform: translate(-50%, -50%);top:40%;left: 50%;font-size: 3rem;font-weight: bold;
}
.page15_section_div .p1 img{
object-fit: cover; width: 100%; height: 100%;
}
.page15_section_div1{
width: 100%; height: 30%; position: absolute; top: 100%; left: 49%; transform: translate(-50%, -100%);display: flex; display: -webkit-flex; justify-content: center;align-items: center;
}
.page15_section_div1 .p2{
width: 48%; height: 100%;position: absolute;border-radius: 3rem; overflow: hidden;left: 0; transform: translate(0, 0);
}
.page15_section_div1 .p2 h2{
line-height: 3rem;width: 100%; height: 3rem;text-align: center;position: absolute;transform: translate(-50%, -50%);top:30%;left: 50%;font-size: 3rem;font-weight: bold;
}
.page15_section_div1 .p2 h3{
width: 100%; height: 3rem;text-align: center;position: absolute;transform: translate(-50%, -50%);top:55%;left: 50%;font-size: 2.5rem;font-weight: normal;color:#ffffff;
}
.page15_section_div1 .p2 img{
object-fit: cover; width: 100%; height: 100%;
}
.page15_section_div1 .p3{
width: 48%; height: 100%;position: absolute;border-radius: 3rem; overflow: hidden;left: 100%; transform: translate(-100%, 0);
}
.page15_section_div1 .p3 h2{
line-height: 3rem;width: 100%; height: 3rem;text-align: center;position: absolute;transform: translate(-50%, -50%);top:30%;left: 50%;font-size: 3rem;font-weight: bold;
}
.page15_section_div1 .p3 h3{
width: 100%; height: 3rem;text-align: center;position: absolute;transform: translate(-50%, -50%);top:55%;left: 50%;font-size: 2.5rem;font-weight: normal;color:#ffffff;
}
.page15_section_div1 .p3 img{
object-fit: cover; width: 100%; height: 100%;
}
.page15_section .p4{
width: 49.5%;margin-right: 1rem; height: 100%;position: absolute;top: 50%; left: 76.5%; transform: translate(-100%, -50%); display: flex; display: -webkit-flex; justify-content: center;align-items: center;
}
.page15_section_div2{
width: 80%; height: 38.5%;background-color: #0b2e13;border-radius: 3rem; overflow: hidden;position: absolute; top: 28%; left: 48%; transform: translate(-50%, 0);
}
.page15_section_div2 h2{
line-height: 3rem;width: 100%;border-radius: 3rem; height: 3rem;text-align: center;position: absolute;transform: translate(-50%, -50%);top:30%;left: 50%;font-size: 3rem;font-weight: bold;
}
.page15_section_div2 img{
object-fit: cover; width: 100%; height: 100%;
}
.page15_section_div3{
width: 49.5%;margin-left: 1rem; height: 100%;position: absolute;top: 50%; left: 100%; transform: translate(-100%, -50%); display: flex; display: -webkit-flex; justify-content: center;align-items: center;
}
.page15_section_div3 .p5{
width: 60%; height: 38.5%;background-color: #0b2e13;border-radius: 3rem; overflow: hidden;position: absolute; top: 28%; left: 71.5%; transform: translate(-50%, 0);
}
.page15_section_div3 h2{
line-height: 3rem;width: 100%; height: 3rem;text-align: center;position: absolute;transform: translate(-50%, -50%);top:40%;left: 50%;font-size: 3rem;font-weight: bold;
}
.page15_section_div3 img{
object-fit: cover; width: 100%; height: 100%;
}
.page15_section_div4{
width: 100%; height: 30%; position: absolute; top: 100%; left: 51%; transform: translate(-50%, -100%);display: flex; display: -webkit-flex; justify-content: center;align-items: center;
}
.page15_section_div4 .p6{
width: 48%; height: 100%;position: absolute;border-radius: 3rem; overflow: hidden;left: 0; transform: translate(0, 0);
}
.page15_section_div4 .p6 h2{
line-height: 3rem;width: 100%; height: 3rem;text-align: center;position: absolute;transform: translate(-50%, -50%);top:30%;left: 50%;font-size: 3rem;font-weight: bold;
}
.page15_section_div4 .p6 h3{
width: 100%; height: 3rem;text-align: center;position: absolute;transform: translate(-50%, -50%);top:55%;left: 50%;font-size: 2.5rem;font-weight: normal;color:#ffffff;
}
.page15_section_div4 .p6 img{
object-fit: cover; width: 100%; height: 100%;
}
.page15_section_div4 .p7{
width: 48%; height: 100%;position: absolute;border-radius: 3rem; overflow: hidden;left: 100%; transform: translate(-100%, 0);
}
.page15_section_div4 .p7 h2{
line-height: 3rem;width: 100%; height: 3rem;text-align: center;position: absolute;transform: translate(-50%, -50%);top:30%;left: 50%;font-size: 3rem;font-weight: bold;
}
.page15_section_div4 .p7 h3{
width: 100%; height: 3rem;text-align: center;position: absolute;transform: translate(-50%, -50%);top:55%;left: 50%;font-size: 2.5rem;font-weight: normal;color:#ffffff;
}
.page15_section_div4 .p7 img{
object-fit: cover; width: 100%; height: 100%;
}
/* ---------------------------------------------------------------------------------------- page16 ---------------------------------------------------------------------------------------- */
.page16{
height: 110vh;position: relative;background-color: #000000;margin-top: 10rem;
}
.page16 .title{
font-size: 5rem;color: #ffffff;text-align: center;padding-top: 10rem;
}
.page16_section{
width:80%; height:60%; position: absolute; transform:translate(-50%, 20%);left:50%; display: flex; display: -webkit-flex;justify-content: center;align-items: center;
}
.page16_section_div{
width:33%; height:100%; position: relative;
}
.page16_section_div .size{
object-fit: contain; width:100%;height: 5vw;
}
.page16_section_div .bed_color{
width: 100%; height: 5rem;display: flex; display: -webkit-flex;justify-content: center;align-items: center;
}
.page16_section_div .bed_color .c1{
width: 1rem; height: 1rem; border-radius: 50%; background-color: #ffffff;
}
.page16_section_div .bed_color .c2{
width: 1rem; height: 1rem; border-radius: 50%; background-color: #dcd4d0; margin-left: 0.5rem;
}
.page16_section_div .bed_color .c3{
width: 1rem; height: 1rem; border-radius: 50%; background-color: #d0ba9f; margin-left: 0.5rem;
}
.page16_section_div h1{
width: 100%; text-align: center;color: #fcfcfc;font-size: 3rem;font-weight: normal;margin-top: 5rem;margin-bottom: 2rem;
}
.page16_section_div h3{
width: 100%; text-align: center;color: #d1d1d1;font-size: 1.5rem;line-height: 2.5rem; font-weight: normal;
}
.page16_section_div .btn{
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;
}
.page16_section_div .button_0{
text-decoration: none;position: absolute; transform:translate(-50%, 0%); left:50%;bottom:0;
}
.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;margin-top: 0.5rem;
}
/* ---------------------------------------------------------------------------------------- page17 ---------------------------------------------------------------------------------------- */
.page17{
height: 100vh;position: relative;background-color: #000000;
}
.page17_section{
width: 50%; height:85%; position: absolute; transform:translate(-50%, 10%);left: 50%;
}
.page17_section_title{
width: 100%; height:20%;margin-top: 5%;
}
.page17_section_title .logo{
position: relative;transform:translate(-50%, -50%);left: 50%;top:20%;width: 30%;object-fit: cover;
}
.page17_section_title .t1{
color: #ffffff;text-align: center;font-size: 1.8rem; 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: 60%;height: 60%;margin-left: 20%; object-fit: cover;margin-bottom: 2rem;
}
.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;
}