@charset "utf-8";

.main section {width: 100%; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center;}

.section01 {position: relative;}
.section01 .video-box {position: absolute;top: 0; left: 0; width: 100%; height: 100%; z-index: -1;}
/* .section01 .text-box {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);} */
.section01 .text-box .sub-title {position: relative; font-size: 36px; font-weight: 600; line-height: 1.16em; letter-spacing: -0.72px; color: #FFF; text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.48);} 
.section01 .text-box .middle-line {display: block; width: 1px; height: 0; background: #fff; margin: 20px auto 12px;}
.section01 .text-box h2 {font-family: 'Aggravo'; font-size: 96px; line-height: normal; font-weight: 400; color: #FFF; text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.48); margin-bottom: 10px;}
.section01 .text-box small {font-size: 30px; font-weight: 600; line-height: 1.46em; letter-spacing: 0.6px; color: #FFF; text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.48);}

.main .text-box.center {text-align: center;}
.main .text-box .section-title {font-family: 'Aggravo'; font-size: 70px; font-weight: 400; line-height: 1.29em; color: #FFF;}
.main .text-box p {font-size: 20px; line-height: 1.8em; letter-spacing: -0.4px; color: #FFF;}
.main .text-box b {display: block; font-size: 30px; font-weight: 600; line-height: 1.46em; letter-spacing: 0.6px; color: #FFF;}

.section02 {background: url('../img/main/section02_bg.jpg'); background-repeat: no-repeat; background-position: center center; background-size: cover;}
.section02 .container {display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%;}
.section02 .text-box .section-title {margin-bottom: 40px;}
.section02 .text-box p {margin-bottom: 24px;}
.section02 .text-box b span {color: #5AF5ED;} 

.section03 {background: url('../img/main/section03_bg.jpg'); background-repeat: no-repeat; background-position: center center; background-size: cover;}
#main .section03 .container {max-width: 1410px;}
.section03 .text-box {display: flex; flex-direction: column; align-items: flex-end; height: 100%; padding-top: 190px;}
.section03 .text-box p {font-family: 'Aggravo'; font-size: 112px; font-weight: 500; line-height: 1.2em; background-clip: text; -webkit-background-clip: text; color: transparent; filter: drop-shadow(2px 2px 0 #fff);}
.section03 .text-box p:nth-child(1) {background-image: url('../img/main/section03_text_bg01.jpg');}
.section03 .text-box p:nth-child(2) { background-image: url('../img/main/section03_text_bg02.jpg');}

.section04 ul {display: flex; width: 100%; height: 100%;}
.section04 ul li {transition: all 0.5s;}
/*
.section04 ul li:nth-child(1) {clip-path: polygon(0% 0%, 100% 0%, 65% 100%, 0% 100%); flex: 27.5%;}
.section04 ul li:nth-child(2) {clip-path: polygon(30% 0%, 100% 0%, 70% 100%, 0% 100%); margin-left: -11.5%; flex: 34.5%;}
.section04 ul li:nth-child(3) {clip-path: polygon(30% 0%, 100% 0%, 70% 100%, 0% 100%); margin-left: -11.5%; flex: 34.5%;}
.section04 ul li:nth-child(4) {clip-path: polygon(37% 0%, 100% 0%, 100% 100%, 0% 100%); margin-left: -11.4%; flex: 27.5%;}
.section04 ul li:nth-child(1).active {clip-path: polygon(0% 0%, 100% 0%, 75% 100%, 0% 100%); flex: 45%;}
.section04 ul li:nth-child(2).active {clip-path: polygon(20% 0%, 100% 0%, 80% 100%, 0% 100%); flex: 50%;}
.section04 ul li:nth-child(3).active {clip-path: polygon(20% 0%, 100% 0%, 80% 100%, 0% 100%); flex: 50%;}
.section04 ul li:nth-child(4).active {clip-path: polygon(24% 0%, 100% 0%, 100% 100%, 0% 100%); flex: 45%;}
*/
.section04 ul li.inactive {filter: brightness(0.6);}

.section04 ul li:nth-child(1) {clip-path: polygon(0% 0%, 100% 0%, 65% 100%, 0% 100%); margin-left:0; flex:28%;}
.section04 ul li:nth-child(2) {clip-path: polygon(32.7% 0%, 100% 0%, 65% 100%, 0% 100%); margin-left: -11.1%; flex:30%}
.section04 ul li:nth-child(3) {clip-path: polygon(35% 0%, 100% 0%, 65% 100%, 0% 100%); margin-left: -11.9%; flex:30%}
.section04 ul li:nth-child(4) {clip-path: polygon(35% 0%, 100% 0%, 100% 100%, 0% 100%); margin-left: -11.9%; flex:30%}

.section04 ul:has( li:nth-child(1):hover) > li:nth-child(1){flex:30%; clip-path: polygon(0% 0%, 100% 0%, 75% 100%, 0% 100%); flex:45%;}
.section04 ul:has( li:nth-child(1):hover) > li:nth-child(2){clip-path: polygon(32.6% 0%, 100% 0%, 69% 100%, 0% 100%); margin-left: -10.2%; flex:34.5%;}
.section04 ul:has( li:nth-child(1):hover) > li:nth-child(3){clip-path: polygon(31% 0%, 100% 0%, 69% 100%, 0% 100%); margin-left: -9.7%; flex:34.5%;}
.section04 ul:has( li:nth-child(1):hover) > li:nth-child(4){clip-path: polygon(38.5% 0%, 100% 0%, 100% 100%, 0% 100%); margin-left: -9.6%; flex:27.5%;}

.section04 ul:has( li:nth-child(2):hover) > li:nth-child(1){clip-path: polygon(0% 0%, 100% 0%, 57.5% 100%, 0% 100%); margin-left: -5%; flex:27.5%;}
.section04 ul:has( li:nth-child(2):hover) > li:nth-child(2){clip-path: polygon(23.2% 0%, 100% 0%, 78.8% 100%, 0% 100%);margin-left: -11.3%;flex: 50%;}
.section04 ul:has( li:nth-child(2):hover) > li:nth-child(3){clip-path: polygon(30.7% 0%, 100% 0%, 70% 100%, 0% 100%); margin-left: -10.3%; flex:34.5%;}
.section04 ul:has( li:nth-child(2):hover) > li:nth-child(4){clip-path: polygon(37.6% 0%, 100% 0%, 100% 100%, 0% 100%); margin-left: -9.95%; flex:27.5%;}

.section04 ul:has( li:nth-child(3):hover) > li:nth-child(1){clip-path: polygon(0% 0%, 100% 0%, 57.5% 100%, 0% 100%); margin-left: -5%; flex:27.5%;}
.section04 ul:has( li:nth-child(3):hover) > li:nth-child(2){clip-path: polygon(33.9% 0%, 100% 0%, 66.2% 100%, 0% 100%); margin-left: -11.5%; flex:34.5%;}
.section04 ul:has( li:nth-child(3):hover) > li:nth-child(3){clip-path: polygon(23.3% 0%, 100% 0%, 78.9% 100%, 0% 100%); margin-left: -11.5%; flex:50%}
.section04 ul:has( li:nth-child(3):hover) > li:nth-child(4){clip-path: polygon(38.5% 0%, 100% 0%, 100% 100%, 0% 100%); margin-left: -10.4%; flex:27.5%;}

.section04 ul:has( li:nth-child(4):hover) > li:nth-child(1){clip-path: polygon(0% 0%, 100% 0%, 57.2% 100%, 0% 100%); margin-left: -5%; flex:27.5%;}
.section04 ul:has( li:nth-child(4):hover) > li:nth-child(2){clip-path: polygon(34.2% 0%, 100% 0%, 64.4% 100%, 0% 100%); margin-left: -11.8%; flex:34.5%;}
.section04 ul:has( li:nth-child(4):hover) > li:nth-child(3){clip-path: polygon(42.7% 0%, 100% 0%, 66.7% 100%, 7% 100%); margin-left: -14.8%;  flex:34.5%;}
.section04 ul:has( li:nth-child(4):hover) > li:nth-child(4){clip-path: polygon(25.7% 0%, 100% 0%, 100% 100%, 0% 100%);margin-left: -11.55%;flex: 45%;}

.section04 ul li a {position: relative; height: 100%;}
.section04 ul li .bg {width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover;}
.section04 ul li:nth-child(1) .bg {background-image: url('../img/main/section04_bg01.jpg');}
.section04 ul li:nth-child(2) .bg {background-image: url('../img/main/section04_bg02.jpg');}
.section04 ul li:nth-child(3) .bg {background-image: url('../img/main/section04_bg03.jpg');}
.section04 ul li:nth-child(4) .bg {background-image: url('../img/main/section04_bg04.jpg');}
.section04 ul li .text-box {position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; align-content: center; z-index: 5; transition: all 0.5s;}
.section04 ul li .text {transition: all 0.6s;}
.section04 ul li:nth-child(1) .text {padding-right: 120px;}
.section04 ul li:nth-child(2) .text {padding-right: 20px;}
.section04 ul li:nth-child(3) .text {padding-right: 20px;}
.section04 ul li:nth-child(4) .text {padding-left: 110px;}
.section04 ul li .text-box .cate {display: inline-block; font-size: 24px; font-weight: 700; line-height: 1.75em; letter-spacing: -0.48px; color: #fff; margin-bottom: 40px; border-bottom: 1px solid #fff;}
.section04 ul li .text-box h2 {font-family: 'Aggravo'; font-size: 43px; font-weight: 400; line-height: 1.61em; color: #fff; margin-bottom: 5px;}
.section04 ul li .text-box .sub-title {font-size: 24px; font-weight: 700; line-height: 1.75em; letter-spacing: -0.48px; color: #fff;}

.section05 {background: url('../img/main/section05_bg.jpg'); background-repeat: no-repeat; background-position: center center; background-size: cover;}
.main .section05 {height: 1108px;}
#main .section05 .container {max-width: 1610px;}
.section05 .wrap {display: flex; height: 100%; align-items: center;}
.section05 .video-box {max-width: 430px; width: 100%; margin-right: 165px;}
.section05 .video-box video {width: 100%;}
.section05 .video-box p {font-size: 16px; font-weight: 600; line-height: 2.62em; color: #fff; text-align: center;}
.section05 .text-box {width: 1%; flex: 1 1 auto;}
.section05 .text-box .inner {padding-right: 95px; padding-bottom: 120px; margin-bottom: 42px; border-bottom: 1px solid #fff;}
.section05 .text-box .section-title {margin-bottom: 28px;}
.section05 .text-box b {margin-bottom: 18px;}
.section05 .text-box b span {color: #E94C33;} 
.section05 .text-box p span {color: #E94C33;} 
.section05 .text-box .notes {position: relative; font-size: 18px; font-weight: 700; line-height: 1.88em; color: #fff; padding-left: 20px;}
.section05 .text-box .notes:before {position: absolute; top: 0; left: 0; content: '※';}

.main .section06 {display: block; background: url('../img/main/section06_bg.jpg'); background-repeat: no-repeat; background-position: center center; background-size: cover;}
.section06 .wrap {display: flex; height: 100%; align-items: center;}
.section06 ul {display: flex; align-items: center;}
.section06 ul li {width: 450px; padding: 0 22px; flex-shrink: 0;}
.section06 ul li.text-box {width: 600px; padding-left: 160px; padding-right: 58px;}
.section06 ul li.text-box .section-title {font-size: 62px; color: #010202; text-shadow: 5px 5px 5px rgba(123,123,123,1);}
.section06 ul li a {width: 100%;}
.section06 ul li a:nth-child(2) {margin-top: 60px;}
.section06 ul li:nth-child(odd) a:nth-child(1) {text-align: left;}
.section06 ul li:nth-child(odd) a:nth-child(2) {text-align: right;}
.section06 ul li img {box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.25); transition: all 0.5s;}
.section06 ul li:nth-child(odd) a img {width: 90%;}
.section06 ul li a.inactive img {filter: brightness(0.8);}
.go-first-pc { display: block; }
.go-first-mob { display: none; }
.section06 .go-first {text-align: right;}
.section06 .btn-go-first {position: relative; padding: 37px 52px 37px 100px; border-radius: 67px; background: linear-gradient(0deg, rgba(51, 112, 166, 0.60) 0%, rgba(51, 112, 166, 0.60) 100%), rgba(119, 156, 189, 0.30); color: #FFF; text-shadow: 0 2px 2px rgba(0, 0, 0, 0.25); font-size: 21px; font-weight: 500; line-height: 1.71em; letter-spacing: -0.42px; border: 0;}
.section06 .btn-go-first:before {position: absolute; top: 50%; left: 40px; transform: translateY(-50%); content: ''; width: 52px; height: 52px; background: url('../img/main/section06_btn_go_first.png') no-repeat center center; transition: all 0.3s;}
.section06 .btn-go-first:hover:before {left: 32px;}
.section06 .wrap::-webkit-scrollbar {width: 6px; height: 6px;}
.section06 .wrap::-webkit-scrollbar-thumb {background: #ddd; border-radius: 6px; cursor: pointer;}
.section06 .wrap::-webkit-scrollbar-track {background: #f3f2f2; border-radius: 6px;}


.img-popup-wrap {display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); max-width: 850px; width: 90vw; z-index: 600;}
.img-popup {max-width: 850px; width: 100%;}
.img-popup img {width: 90vw;}
.img-popup-wrap .btn-close {position:absolute; top: -45px; right: 5px; width:36px; height:36px; z-index:12; border: 0; background: transparent; transition:all 0.6s;}
.img-popup-wrap .btn-close:hover {opacity:0.6;}
.img-popup-wrap .btn-close:before,
.img-popup-wrap .btn-close:after {content:''; width:36px; height:2px; background:#fff; position:absolute; left:0; transition:all 0.6s;}
.img-popup-wrap .btn-close:before {top:10px; transform:rotate(45deg); top:50%; margin-top:-1px;}
.img-popup-wrap .btn-close:after {bottom:10px; transform:rotate(-45deg); bottom:50%; margin-bottom:-1px;}
.popup-overlay {display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.5); z-index: 500;}

.section07 {background: url('../img/main/section07_bg.jpg') no-repeat right center/cover;}
.section07 .wrap {display: flex; width: 100%; height: 100%;}
.section07 .left-box {width: 49%; background: url('../img/main/section07_bg01.jpg') no-repeat center center/cover;}
.section07 .right-box {align-content: center; width: 51%;  padding: 0 60px 0 135px;}
.section07 .right-box .text-box .section-title {font-size: 62px; margin-bottom: 50px;}
.section07 .right-box p {padding-right: 40px;}
.section07 .right-box p:not(:last-child) {margin-bottom: 38px;}
.section07 .right-box .text-box .color-red {color: #E94C33;}
.section07 .right-box .text-box .color-blue {color: #007aff;}

.main .section08 {height: auto; padding: 170px 0 190px; background: url('../img/main/section08_bg.jpg') no-repeat right center/cover; overflow: hidden;}
.main .section08 .container {max-width: 1630px; padding: 0 150px;}
.section08 .text-box {margin-bottom: 64px;}
.section08 .text-box .section-title {font-size: 43px; line-height: 1.61em; color: #000; text-align: center;}
.section08 .items {border-radius: 20px; border: 1px solid rgba(0, 0, 0, 0.17); background: #FFF; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.03);}
.section08 .wrap {display: flex; align-items: center; gap: 132px; min-height: 370px;  padding: 46px 120px;}
.section08 .img {max-width: 236px; width: 100%;}
.section08 .text {width: 1%; flex: 1 1 auto;}
.section08 .text .sub-title {font-size: 16px; font-weight: 600; line-height: 1.68em; color: #007AFF; margin-bottom: 20px;}
.section08 .text h2 {font-family: 'Aggravo'; font-size: 43px; font-weight: 400; line-height: 1.24em; color: #000; margin-bottom: 2px;}
.section08 .text .position {font-size: 24px; font-weight: 700; line-height: 1.75em; letter-spacing: -0.48px; color: #222; margin-bottom: 22px;}
.section08 .text .des {font-size: 20px; line-height: 1.8em; letter-spacing: -0.4px; color: #666;}
.section08 .slick-arrow {z-index: 5; position: absolute; top: 50%; margin-top: -69px; width: 69px; height: 138px; background-repeat: no-repeat; background-position: center center; border: 0; font-size: 0; background-color: transparent; transition: all 0.5s;}
.section08 .slick-prev {left: -135px; background-image: url('../img/main/section08_btn_prev.png');}
.section08 .slick-next {right: -135px; background-image: url('../img/main/section08_btn_next.png');}
.section08 .slick-arrow:hover {opacity: 0.5;}
.section08 .slick-dots {position: relative;}
.section08 .slick-dots li {opacity: 0; position: absolute; bottom: -60px; left: 50%; margin-left: -35px; width: 70px; line-height: 34px; border-radius: 39px; background: #007AFF; font-size: 16px; font-weight: 600; color: #fff; text-align: center;}
.section08 .slick-dots .slick-active {opacity: 1;}

.main .section09 {position: relative; height: 1047px;}
.section09 .bg {position: absolute; width: 100%; height: 100%; clip-path: inset(40% 40% 40% 40%); transition: clip-path 0.3s ease; background: url('../img/main/section09_bg.jpg'); background-repeat: no-repeat; background-position: center center; background-size: cover;}
.section09 .text-box {position: relative; z-index: 5; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; padding-bottom: 166px;}
.section09 .text-box .section-title {font-size: 62px; line-height: 1.45em; margin-bottom: 20px; text-shadow: 0 4px 4px rgba(0, 0, 0, 0.50);}
.section09 .text-box b {font-size: 24px; font-weight: 700; line-height: 1.75em; letter-spacing: -0.48px; text-shadow: 0 4px 4px rgba(0, 0, 0, 0.60);}