@charset "utf-8";

/* main-visual */
.main-visual {position:relative; height:calc(100vh - 110px); margin-top:110px;}
.main-visual .video-swiper {width:100%; height:100%; position:relative; backface-visibility:hidden;}
.main-visual .swiper-slide {position:relative; z-index:1;}
.main-visual .swiper-slide video {width:100%; height:100%; object-fit:cover; transform:translateZ(0);}
.main-visual .btns {position:absolute; bottom:70px; right:80px; width:125px; height:70px; z-index:1;}
.main-visual .controls {position:relative; width:70px; height:70px; margin:0 auto;}
.main-visual .progress-circle {transform:rotate(-90deg);}
.main-visual .progress-bg {fill:none; stroke:rgba(255,255,255,0.2); stroke-width:4;}
.main-visual .progress-bar {fill:none; stroke:#fff; stroke-width:4; stroke-linecap:round; stroke-dasharray:157; stroke-dashoffset:157;}
.main-visual .controls button {position:absolute; top:50%; left:50%; width:40px; height:40px; margin-top:-20px; margin-left:-20px; background-repeat:no-repeat; background-size:auto; background-position:center center; border:0; background-color:transparent; font-size:0; display:none;}
.main-visual .controls button.active {display:block;}
.main-visual .controls button.btn-play {background-image:url('../img/main/visual-play.png');}
.main-visual .controls button.btn-pause {background-image:url('../img/main/visual-pause.png');}
.main-visual .swiper-button {width:8px; height:14px; position:absolute; top:50%; margin-top:-7px; background-repeat:no-repeat; background-size:cover; position:absolute; opacity:1; transition:all 0.4s;}
.main-visual .swiper-button.swiper-button-disabled {opacity:0.2;}
.main-visual .swiper-button-prev {background-image:url('../img/main/swiper-button-prev.png'); left:0;}
.main-visual .swiper-button-next {background-image:url('../img/main/swiper-button-next.png'); right:0;}

.main-visual .txt-box {position:absolute; top:0; left:0; width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; background:rgba(0,0,0,0.7); text-align:center; padding:0 15px;}
.main-visual .txt-box h2 {font-size:64px; line-height:1.2em; color:#f2f2f2; margin-bottom:36px; position:relative; top:100px; opacity:0; transition:all 1s;}
.main-visual .txt-box p {font-size:32px; line-height:1.25em; color:rgba(242,242,242,0.7); font-weight:500; position:relative; top:100px; opacity:0; transition:all 1s;}
.main-visual .swiper-slide-active .txt-box h2 {opacity:1; top:0;}
.main-visual .swiper-slide-active .txt-box p {opacity:1; top:0; transition-delay:0.4s;;}



/* section common */
.sec-tit h3 {font-size:64px; line-height:1.2em; color:#f2f2f2; position:relative; display:inline-block; padding-right:32px; font-family:'Montserrat';}
.sec-tit h3:after {content:''; width:16px; height:16px; border:4px solid #e92329; border-radius:50%; top:0; right:0; position:absolute;}
/* section01 */
.section01 {padding:100px 0 110px; background:url('../img/main/sec01bg.jpg') center center no-repeat; background-size:cover;}
.section01 .col {padding:110px 90px; display:flex; background:linear-gradient(0deg, #0E0E10 19.69%, #161619 100%); border-radius:40px;}
.section01 .tit-box {width:100%; max-width:490px;}
.section01 .txt-box {width:1%; flex:1 1 auto;}
.section01 .txt-box p {font-size:20px; line-height:1.7em; color:rgba(242,242,242,0.6); margin-bottom:34px;}
.section01 .txt-box p:last-child {margin-bottom:0;} 
/* wrap */
.sec-wrap {background:url('../img/main/sec-wrapbg.jpg') center center no-repeat; background-size:contain;}
/* section02 */
.section02 {padding:110px 0 180px; }
.section02 .sec-tit {text-align:center; margin-bottom:100px;}
.section02 .col {display:flex; margin:0 -10px;}
.section02 .row {width:25%; padding:0 10px;}
.section02 .inner {display:block; border-radius:40px; background:linear-gradient(0deg, #0E0E10 19.69%, #161619 100%); transition:all 0.4s; height:100%; position:relative;}
.section02 .inner:hover {background:#1C1C1F; box-shadow: 5px 0 30px 15px rgba(101, 100, 100, 0.10);}
.section02 .inner:after {content:''; width:36px; height:36px; background:url('../img/main/sec02-more.png') no-repeat; position:absolute; right:30px; bottom:30px; transition:all 0.4s; opacity:0.2;}
.section02 .inner:hover:after {opacity:1;}
.section02 .inner .img-box {display:flex; align-items:center; justify-content:center; height:244px; background:#0A0A0B; transition:all 0.4s; border-radius:40px;}
.section02 .inner:hover .img-box {background:#fff;}
.section02 .inner .txt-box {padding:50px 40px 110px;}
.section02 .inner .txt-box h4 {font-size:32px; font-weight:500; color:#f2f2f2; line-height:1.25em; margin-bottom:20px; height:calc(1.25em * 1 * 2);}
.section02 .inner .txt-box p {font-size:20px; line-height:1.7em; color:rgba(242,242,242,0.6); height:calc(1.7em * 1 * 4); overflow:hidden; text-overflow:ellipsis; word-break:break-all; white-space:normal; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical;}
/* section03 */
.section03 {padding-bottom:180px;}
.section03 .col {display:flex; flex-wrap:wrap; margin:0 -10px -20px;}
.section03 .row {width:50%; padding:0 10px; margin-bottom:20px;}
.section03 .inner {position:relative; height:330px; border-radius:40px;}
.section03 .txt-box {width:100%; height:100%; display:flex; align-items:center; justify-content:center; text-align:center; transition:all 0.4s; position:relative; z-index:2;}
.section03 .inner:hover .txt-box {opacity:0; z-index:-1;}
.section03 p {font-size:16px; line-height:1.5em; font-weight:700; color:rgba(242,242,242,0.6); margin-bottom:4px;}
.section03 h3 {font-size:40px; font-weight:600; line-height:1.45em; color:#f2f2f2;}
.section03 .row .inner a {position:absolute; border-radius:40px; width:100%; height:100%; background-repeat:no-repeat; background-size:cover; background-position:center center; transition:height 0.4s; z-index:1; overflow:hidden;}
.section03 .inner01 a {background-image:url('../img/main/sec03-row01.jpg');}
.section03 .inner02 a {background-image:url('../img/main/sec03-row02.jpg');}
.section03 .inner03 a {background-image:url('../img/main/sec03-row03.jpg');}
.section03 .inner04 a {background-image:url('../img/main/sec03-row04.jpg');}
.section03 .inner.top a {top:0;}
.section03 .inner.bottom a {bottom:0;}
.section03 .inner.left a {left:0;}
.section03 .inner.right a {right:0;}
.section03 .inner:hover a {height:680px; z-index:3;}
.section03 .inner a .txt {position:relative; opacity:0; transition:all 0.4s; padding:80px 60px; height:100%; z-index:5;}
.section03 .inner a:after {content:''; width:100%; height:100%; position:absolute; top:0; left:0; backdrop-filter:blur(10px); transition:all 0.4s;}
.section03 .inner:hover a:after {backdrop-filter:blur(0);} 
.section03 .inner:hover a .txt {opacity:1;}
.section03 .inner a .txt .tt {font-size:18px; line-height:1.6em; color:rgba(242,242,242,0.6); margin-top:28px;}
.section03 .inner a .txt .more {font-size:20px; line-height:1.7em; color:#f2f2f2; position:absolute; bottom:50px; right:50px; transition:all 0.3s 0.4s; opacity:0; padding-right:56px;}
.section03 .inner:hover a .txt .more {opacity:1;}
.section03 .inner a .txt .more:after {content:''; width:36px; height:36px; background:url('../img/main/sec02-more.png') no-repeat; position:absolute; right:0; top:50%; margin-top:-18px;}
/* section04 */
.section04 {padding-bottom:180px;}
.section04 .cnt {padding:110px 80px 140px; background:linear-gradient(0deg, #0E0E10 19.69%, #161619 100%); border-radius:40px;}
.section04 .col {display:flex;}
.section04 .tit-box {width:100%; max-width:530px;}
.section04 .txt-box {width:1%; flex:1 1 auto;}
.section04 .wrap {display:flex; flex-wrap:wrap; margin:0 -24px 24px;}
.section04 .row {width:50%; padding:0 24px; margin-bottom:80px;}
.section04 .row:last-child {margin-bottom:0;}
.section04 .row p {font-size:24px; line-height:1.4em; color:#666; font-weight:500; transition:all 0.4s; margin-bottom:24px;}
.section04 .row.on p {color:#f2f2f2;}
.section04 .row p span {color:#e92329;}
.section04 .row input {width:100%; border:0; background:transparent; padding-bottom:6px; border-bottom:1px solid #333; outline:none; color:#666; transition:all 0.4s;}
.section04 .row.on input {border-bottom-color:#f2f2f2; color:#f2f2f2;}
.section04 .row input::placeholder {font-size:18px; color:#666;}
.section04 .row.textarea {width:100%;}
.section04 .row textarea {width:100%; height:240px; border:1px solid #333; border-radius:20px; transition:all 0.4s; background:transparent; resize:none; outline:none; padding:20px; color:#666;}
.section04 .row.on textarea {border-color:#f2f2f2; color:#f2f2f2;}
.section04 .row textarea::placeholder {font-size:18px; color:#666;}
.section04 .check {padding-left:10px; margin-bottom:50px;}
.section04 .check span {display:inline-block; position:relative; vertical-align:middle; margin-top:-.2em; font-size:16px; color:#666; line-height:1.4em;}
.section04 .check span input {position:absolute; top:0; left:0; width:0; height:0; border:0; opacity:0; z-index:-1;}
.section04 .check span label {display:inline-block; padding-left:24px;}
.section04 .check span label:before {content:""; width:16px; height:16px; border:1px solid #666; border-radius:4px; position:absolute; top:4px; left:0;}
.section04 .check span label:after {content:''; width:8px; height:8px; background:#E92329; position:absolute; top:8px; left:4px; border-radius:2px; opacity:0;}
.section04 .check span input:checked + label:after {opacity:1;}
.section04 .check span input:focus + label:before {outline:0;}
.section04 .btns {display:flex; justify-content:space-between;}
.section04 .btns .btn button {width:200px; line-height:52px; background:transparent; padding:0 24px; border:1px solid #666; border-radius:26px; color:#f2f2f2; font-size:18px; text-align:left; position:relative; transition:all 0.4s;}
.section04 .btns .btn button:after {content:''; width:16px; height:10px; background:url('../img/main/sec04-submit.png') no-repeat; background-size:cover; position:absolute; top:50%; margin-top:-5px; right:24px;}
.section04 .btns .btn button:hover {background:#666;}