@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(225deg,rgb(2, 65, 118),rgb(80,187,253),rgb(1 250 254)); -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;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; } .name1 { opacity: 0;position: absolute;top: 47%;width:50rem;left: 50%;transform: translate(-50%, -50%); } .name2 { opacity: 0;position: absolute;color: #363637;top: 40%;left: 50%;transform: translate(-50%, -50%);font-weight: normal } .name3 { opacity: 0;position: absolute;bottom: 3%;left: 50%;z-index: 999;transform: translate(-50%, -50%);text-decoration: none; } .name3 span { color: #0065cb;font-size: 2rem;font-weight: normal; } .name3 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: 120vh; background-color: #000000;position: relative; } .page2_img{ width: 60%; height: 100%; position: absolute; right: 0; } .page2_img img{ object-fit: contain; position:absolute; width:100%;height: 100%; } .page2_section { position: absolute; width:40vw; height:60%; transform:translate(0, -50%);top:55%; left:15%; } .page2_section h1{ text-align: left; } .page2_section1{ position: absolute; width:50vw; height:20%; transform:translate(-50%, -50%);top:30%; left:62%;display: flex; display: -webkit-flex;justify-content:left;align-items: center; } .page2_section1 h3{ text-align: center;width: 12rem;padding: 0.2rem 0.5rem;;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:40%; left:62%;display: flex; display: -webkit-flex;justify-content:left;align-items: center; } .page2_section2 h3{ text-align: center;width: 12rem;padding: 0.2rem 0.5rem;;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:50%; left:62%;display: flex; display: -webkit-flex;justify-content:left;align-items: center; } .page2_section3 h3{ text-align: center;width: 12rem;padding: 0.2rem 0.5rem;;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:60%; left:62%;display: flex; display: -webkit-flex;justify-content:left;align-items: center; } .page2_section4 h3{ text-align: center;width: 12rem;padding: 0.2rem 0.5rem;;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: 50%; height: 100%; position: absolute; right: 0; } .page3_img img{ object-fit: contain; position:absolute; width:100%;height: 100%; } .page3_section1{ position: absolute; width:40vw; height:10rem; transform:translate(0, -50%);top:30%; left:10%; } .page3_section2{ position: absolute; width:40vw; height:10rem; transform:translate(0%, -50%);top:30%; 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 .button_01{ width: 31%; text-decoration: none; } .page3_section2_title .button_01 h1{ color: #ffffff;font-size: 4rem;text-align: left;font-weight: bold; } .page3_section2_title .button_01 h1 b{ font-size: 3rem; } .page3_section2_title .button_01 h2{ line-height: 3rem;color: #ffffff;width:100%;text-align: left; font-weight: normal; white-space: nowrap; } .page3_section2_title .button_02{ width: 31%; text-decoration: none; } .page3_section2_title .button_02 h1{ color: #ffffff;font-size: 4rem;text-align: left;font-weight: bold; } .page3_section2_title .button_02 h1 b{ font-size: 3rem; } .page3_section2_title .button_02 h2{ line-height: 3rem;color: #ffffff;width:100%;text-align: left; font-weight: normal; white-space: nowrap; } .page3_section2_title .button_03{ width: 29%;text-decoration: none; } .page3_section2_title .button_03 h1{ color: #ffffff;font-size: 4rem;text-align: left;font-weight: bold; } .page3_section2_title .button_03 h1 b{ font-size: 3rem; } .page3_section2_title .button_03 h2{ line-height: 3rem;color: #ffffff;width:100%;text-align: left; font-weight: normal; white-space: nowrap; } .page3_section3{ position: absolute; width:40vw; height:10rem; transform:translate(0%, -50%);top:40%; left:10%;margin-top: 30rem; } .page3_section4{ position: absolute; width:40vw; height:10rem; transform:translate(0, -50%);top:40%; 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 .button_04{ width: 31%; text-decoration: none; } .page3_section4_title .button_04 h1{ color: #ffffff;font-size: 4rem;text-align: left;font-weight: bold; } .page3_section4_title .button_04 h1 b{ font-size: 3rem; } .page3_section4_title .button_04 h2{ line-height: 3rem;color: #ffffff;width:100%;text-align: left; font-weight: normal; white-space: nowrap; } .page3_section4_title .button_05{ width: 31%; text-decoration: none; } .page3_section4_title .button_05 h1{ color: #ffffff;font-size: 4rem;text-align: left;font-weight: bold; } .page3_section4_title .button_05 h1 b{ font-size: 3rem; } .page3_section4_title .button_05 h2{ line-height: 3rem;color: #ffffff;width:100%;text-align: left; font-weight: normal; white-space: nowrap; } .page3_section4_title .button_06{ width: 29%;text-decoration: none; } .page3_section4_title .button_06 h1{ color: #ffffff;font-size: 4rem;text-align: left;font-weight: bold; } .page3_section4_title .button_06 h1 b{ font-size: 3rem; } .page3_section4_title .button_06 h2{ line-height: 3rem;color: #ffffff;width:100%;text-align: left; font-weight: normal; white-space: nowrap; } /* ---------------------------------------------------------------------------------------- page4 ---------------------------------------------------------------------------------------- */ .page4{ height: 150vh; background-color: #000000;position: relative; } .page4 .split2{ object-fit: contain; position:absolute; width:100%;height: 60%;transform:translate(-50%,10%);left:50%; } .page4_section { position: absolute; width:100%; bottom: 10%; text-align: center; } /* ---------------------------------------------------------------------------------------- page5 ---------------------------------------------------------------------------------------- */ .page5{ height: 120vh; background-color: #000000;position: relative; } .page5_img{ width: 70%; height: 100%; position: absolute; left: 0; } .page5_img img{ object-fit: contain; position:absolute; width:100%;height: 100%; } .page5_section1{ position: absolute; width:40vw; height:20rem; transform:translate(0, -50%);top:35%; left:60%; } .page5_section1 .t1{ color: #ffffff;text-align: left;font-weight: bold; } .page5_section1 .t2{ line-height: 3rem;color: #ffffff;font-weight: normal; } .page5_section2{ position: absolute; width:40vw; height:20rem; transform:translate(0, -50%);top:45%; left:60%; } .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:40vw; height:20rem; transform:translate(0, -50%);top:45%; left:60%; } .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:40vw; height:20rem; transform:translate(0, -50%);top:45%; left:60%; } .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: 40vw; height: 20rem; position: relative; transform:translate(0, -50%); left:60%; top:70%; display: flex; display: -webkit-flex;justify-content: left;z-index: 100; } .page5_section5_div{ width: 40vw;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: 100vh; background-color: #000000;position: relative; } .page6_img{ width: 70%; height: 100%; position: absolute;right: 0; } .page6_img img{ object-fit: contain; position:absolute; width:100%;height: 100%; } .page6_img .img1{ right: -20%; } .page6_section1{ position: absolute; width:40vw; height:20rem; transform:translate(0, -50%);top:40%; left:10%; } .page6_section1 h1{ color: #ffffff;font-size: 6rem;text-align: left;font-weight: bold; } .page6_section1 h2{ color: #ffffff;font-size: 2rem;font-weight: normal;line-height: 3rem;margin-top: 2rem; } .page6_section2{ position: absolute; width:40vw; height:20rem; transform:translate(0, -50%);top:55%; 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:40vw; height:20rem; transform:translate(0, -50%);top:55%; 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: 40vw; height: 20rem; position: relative; transform:translate(0, -50%); left:10%; top:75%; display: flex; display: -webkit-flex;justify-content: left;z-index: 100; } .page6_section4_div{ width: 40vw;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: 100vh; 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%; height: auto; } .page7_section{ position: absolute; width:100%; top: 35%; text-align: center; } .page7_section h1{ color: #ffffff;font-weight: bold;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;width: 100%;font-weight: normal; transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s; } /* ---------------------------------------------------------------------------------------- page8 ---------------------------------------------------------------------------------------- */ .page8{ height: 100vh; 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%; height: auto; } .page8_section1{ position: absolute; width:60vw; height:60%; transform:translate(-50%, -50%);top:65%; left:50%; } .page8_section1 h1{ color: #ffffff;text-align: center;font-weight: bold;transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s; } .page8_section1 h2{ color: #ffffff;text-align: center;font-weight: normal;transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s; } .page8_section2{ position: absolute; width:60vw; height:60%; transform:translate(-50%, -50%);top:60%; left:50%; } .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_1{ width: 31%; text-decoration: none;transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s; } .page8_section2_div .button_1 h1{ color: #ffffff;font-size: 10rem;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_2{ width: 31%; text-decoration: none;transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s; } .page8_section2_div .button_2 h1{ color: #ffffff;font-size: 10rem;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_3{ width: 29%;text-decoration: none;transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s; } .page8_section2_div .button_3 h1{ color: #ffffff;font-size: 10rem;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; } /* ---------------------------------------------------------------------------------------- page9 ---------------------------------------------------------------------------------------- */ .page9{ height: 100vh; 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%; height: auto; } .page9_section1{ position: absolute; width:70vw; height:60%; transform:translate(-50%, -50%);top:60%; left:50%; } .page9_section1 h1{ color: #ffffff;text-align: center;font-weight: bold;transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s; } .page9_section1 h2{ color: #ffffff;text-align: center;font-weight: normal;transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s; } .page9_section2{ position: absolute; width:60vw; height:60%; transform:translate(-50%, -50%);top:60%; left:50%; } .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: 20%;width: 30%; text-decoration: none;transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s; } .page9_section2_div .button_1 h1{ color: #ffffff;font-size: 10rem;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: 20%;width: 30%; text-decoration: none;transition:0.5s cubic-bezier(0.5, 0, 1, 1) 0s; } .page9_section2_div .button_2 h1{ color: #ffffff;font-size: 10rem;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; } /* ---------------------------------------------------------------------------------------- page10 ---------------------------------------------------------------------------------------- */ .page10{ height: 150vh; background-color: #000000;position: relative; } .page10_img{ width: 50%; height: 50%; position: absolute; left: 0;top: 15%;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: 0;top: 15%;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: 30%; height: 90%; position: relative; transform:translate(-50%, -50%); left:50%; 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: 56%; 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: 52%; 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: 48%; 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: 44%; 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:40vw; height:70%; transform:translate(0, -50%);top:58%; left:55%; } .page10_section2 .t1{ color: #ffffff;text-align: left;font-weight: bold; } .page10_section2 .t1_1{ margin-top: 10px;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:13%;left:32%; } .page10_section2 .t2{ line-height: 3rem;color: #ffffff;font-weight: normal; } .page10_section3 { position: absolute; width:40vw; height:70%; transform:translate(0, -50%);top:74%; left:55%; } .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:74%; left:55%; } .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:74%; left:55%; } .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:74%; left:55%; } .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:74%; left:55%; } .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: 70vh; background-color: #000000;position: relative; } .page11_section{ width: 80%; height: 90%; position: relative; transform:translate(-50%, -50%); left:50%; top:50%; display: flex; display: -webkit-flex;justify-content: center; } .page11_section .p1{ background-color: #000000; position: relative; width: 25%; height: 100%; border-radius: 3rem; overflow: hidden; margin-right: 2rem; } .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:70%; left:50%; text-align: center; font-size: 3rem; color: white;font-weight: normal; } .page11_section .p1 h3{ position: absolute; width: 90%; transform:translate(-50%, 0);top:82%; left:50%; text-align: center; font-size: 1.5rem; color: white;font-weight: normal; } .page11_section .p2{ background-color: #000000; position: relative; width: 25%; height: 100%; border-radius: 3rem; overflow: hidden; margin-right: 2rem; } .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:70%; left:50%; text-align: center; font-size: 3rem; color: white;font-weight: normal; } .page11_section .p2 h3{ position: absolute; width: 90%; transform:translate(-50%, 0);top:82%; left:50%; text-align: center; font-size: 1.5rem; color: white;font-weight: normal; } .page11_section .p3{ background-color: #000000; position: relative; width: 25%; height: 100%; border-radius: 3rem; overflow: hidden; margin-right: 2rem; } .page11_section .p3 .img{ object-fit: cover; width: 100%; height: 100%; } .page11_section .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_section .p3 h2{ position: absolute; width: 80%; transform:translate(-50%, 0);top:70%; left:50%; text-align: center; font-size: 3rem; color: white;font-weight: normal; } .page11_section .p3 h3{ position: absolute; width: 90%; transform:translate(-50%, 0);top:82%; left:50%; text-align: center; font-size: 1.5rem; color: white;font-weight: normal; } .page11_section .p4{ background-color: #000000; position: relative; width: 25%; height: 100%; border-radius: 3rem; overflow: hidden; margin-right: 2rem; } .page11_section .p4 .img{ object-fit: cover; width: 100%; height: 100%; } .page11_section .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_section .p4 h2{ position: absolute; width: 80%; transform:translate(-50%, 0);top:70%; left:50%; text-align: center; font-size: 3rem; color: white;font-weight: normal; } .page11_section .p4 h3{ position: absolute; width: 90%; transform:translate(-50%, 0);top:82%; left:50%; text-align: center; font-size: 1.5rem; color: white;font-weight: normal; } /* ---------------------------------------------------------------------------------------- page12 ---------------------------------------------------------------------------------------- */ .page12{ height: 100vh; background-color: #000000;position: relative; } .page12_section1{ width: 60%; height: 80%; position: relative; transform:translate(-50%, -50%); left:50%; top:50%; display: flex; display: -webkit-flex;justify-content: center; } .page12_section1 .p1{ background-color: #000000; width: 50%; height: 100%; border-radius: 3rem; overflow: hidden;margin-right: 2rem; } .page12_section1 .p1 .img2{ object-fit: contain; position:absolute; width:100%;height: 100%;z-index: 99;opacity: 0;left: 0%; } .page12_section1 .p1 #video09{ width: 100%;position: relative;left: 50%;top:50%;transform:translate(-50%, -50%); background: #000000; object-fit: contain; } .page12_section2{ width: 50%; height: 100%; margin-right: 2rem; } .page12_section2_div1{ width: 70%;height: 80%; position: relative; transform:translate(-50%, -50%); left:50%; top:45%; } .page12_section2_div1 h1{ color: #ffffff;font-size: 6em;text-align: left;font-weight: bold; } .page12_section2_div1 h2{ color: #ffffff;font-size: 2rem;font-weight: normal;margin-top: 2rem; } .page12_section2_div2{ position: absolute; width:40vw; height:20rem; transform:translate(-50%, -50%);top:50%; left:91%; } .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:40vw; height:20rem; transform:translate(-50%, -50%);top:50%; left:91%; } .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: 40vw; height: 20rem; position: absolute; transform:translate(-50%, -50%); left:91%; top:75%; display: flex; display: -webkit-flex;justify-content: left;z-index: 100; } .page12_section2_div5{ width: 40vw;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 .p5{ width: 30%; height: 30%; position: absolute;transform:translate(-50%, -50%);top:85%; left: 72.5%; } .page12_section2 .p5 .img1{ object-fit: contain; position:absolute; width:100%;height: 100%; } /* ---------------------------------------------------------------------------------------- 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_div{ width: 50%; height: 100%; margin-right: 2rem; } .page13_section_div1{ width: 70%;height: 50rem; position: relative; transform:translate(-50%, -50%); left:50%; top:50%; } .page13_section_div1 h1{ color: #ffffff;font-size: 6em;text-align: left;font-weight: bold; } .page13_section_div1 h2{ color: #ffffff;font-size: 2rem;font-weight: normal;margin-top: 2rem;white-space: nowrap; } .page13_section_div2{ position: absolute; width:40vw; height:20rem; transform:translate(-50%, -50%);top:55%; left:41%; } .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:55%; left:41%; } .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:41%; top:80%; 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_div6{ position: absolute;width:20vw; height:20rem; transform:translate(-50%, -50%);top:75%; left:25%;display: flex; display: -webkit-flex;justify-content: left; align-items: end; } .page13_section_div6 .p4{ width: 32%; } .page13_section_div6 .p4 h1{ color: #ffffff;font-size: 2.5em;text-align: left;font-weight: normal; } .page13_section_div6 .p4 h2{ color: #8a8a8a;font-size: 1.8rem;text-align: left;font-weight: normal; } .page13_section_div6 .p5{ width: 32%; } .page13_section_div6 .p5 h1{ color: #ffffff;font-size: 2.5em;text-align: left;font-weight: normal; } .page13_section_div6 .p5 h2{ color: #8a8a8a;font-size: 1.8rem;text-align: left;font-weight: normal; } .page13_section_div6 .p6{ width: 32%; } .page13_section_div6 .p6 h1{ color: #ffffff;font-size: 2.5em;text-align: left;font-weight: normal; } .page13_section_div6 .p6 h2{ color: #8a8a8a;font-size: 1.8rem;text-align: left;font-weight: normal; } .page13_section .video8{ background-color: #000000; width: 50%; height: 100%; margin: 1rem; border-radius: 3rem; overflow: hidden; } .page13_section .video8 #video8{ height: 100%;position: relative;right: -30%;top:50%;transform:translate(-50%, -50%); background: #000000; object-fit: cover; } /* ---------------------------------------------------------------------------------------- page14 ---------------------------------------------------------------------------------------- */ .page14{ height: 100vh;background-color: #000000; } .page14_section{ width: 70%; height: 90%; position: relative; transform:translate(-50%, -50%); left:50%; top:40%; display: flex; display: -webkit-flex;justify-content: center; } .page14_section1_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; } .page14_section1_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); } .page14_section1_div .p1 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; } .page14_section1_div .p1 h3{ width: 100%; height: 3rem;text-align: center;position: absolute;transform: translate(-50%, -50%);top:55%;left: 50%;font-size: 2rem;font-weight: normal;color:#ffffff; } .page14_section1_div .p1 img{ object-fit: cover; width: 100%; height: 100%; } .page14_section2_div{ 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; } .page14_section2_div .p2{ width: 48%; height: 100%;position: absolute;border-radius: 3rem; overflow: hidden;left: 0; transform: translate(0, 0); } .page14_section2_div .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; } .page14_section2_div .p2 h3{ width: 100%; height: 3rem;text-align: center;position: absolute;transform: translate(-50%, -50%);top:55%;left: 50%;font-size: 2rem;font-weight: normal;color:#ffffff; } .page14_section2_div .p2 img{ object-fit: cover; width: 100%; height: 100%; } .page14_section2_div .p3{ width: 48%; height: 100%;position: absolute;border-radius: 3rem; overflow: hidden;left: 100%; transform: translate(-100%, 0); } .page14_section2_div .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; } .page14_section2_div .p3 h3{ width: 100%; height: 3rem;text-align: center;position: absolute;transform: translate(-50%, -50%);top:55%;left: 50%;font-size: 2rem;font-weight: normal;color:#ffffff; } .page14_section2_div .p3 img{ object-fit: cover; width: 100%; height: 100%; } .page14_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; } .page14_section3_div{ width: 80%; height: 38.5%;background-color: #0b2e13;border-radius: 3rem; overflow: hidden;position: absolute; top: 28%; left: 48%; transform: translate(-50%, 0); } .page14_section3_div img{ object-fit: cover; width: 100%; height: 100%; } .page14_section4_div{ 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; } .page14_section4_div .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); } .page14_section4_div .p5 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; } .page14_section4_div .p5 h3{ width: 100%; height: 3rem;text-align: center;position: absolute;transform: translate(-50%, -50%);top:55%;left: 50%;font-size: 2rem;font-weight: normal;color:#ffffff; } .page14_section4_div .p5 img{ object-fit: cover; width: 100%; height: 100%; } .page14_section5_div{ 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; } .page14_section5_div .p6{ width: 48%; height: 100%;position: absolute;border-radius: 3rem; overflow: hidden;left: 0; transform: translate(0, 0); } .page14_section5_div .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; } .page14_section5_div .p6 h3{ width: 100%; height: 3rem;text-align: center;position: absolute;transform: translate(-50%, -50%);top:55%;left: 50%;font-size: 2rem;font-weight: normal;color:#ffffff; } .page14_section5_div .p6 img{ object-fit: cover; width: 100%; height: 100%; } .page14_section5_div .p7{ width: 48%; height: 100%;position: absolute;border-radius: 3rem; overflow: hidden;left: 100%; transform: translate(-100%, 0); } .page14_section5_div .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; } .page14_section5_div .p7 h3{ width: 100%; height: 3rem;text-align: center;position: absolute;transform: translate(-50%, -50%);top:55%;left: 50%;font-size: 2rem;font-weight: normal;color:#ffffff; } .page14_section5_div .p7 img{ object-fit: cover; width: 100%; height: 100%; } /* ---------------------------------------------------------------------------------------- page15 ---------------------------------------------------------------------------------------- */ .page15{ height: 75vh;position: relative;background-color: #000000; } .page15_section{ position: absolute; width:50%; transform:translate(0%, -50%); left:10%;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; } .page15 .img{ object-fit: cover; width: 100%; height: auto;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:60%; 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:33%;height:100%; position: relative; } .page16_section_div .size{ object-fit: contain; width:100%;height: 10vw; } .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{} .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 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; } .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 .ai_logo{ position: relative;transform:translate(-50%, -50%);left: 50%;top:20%;width: 30%;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: 80%;height: 80%;margin-left: 10%; object-fit: cover;margin-bottom: 1rem; } .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; }