@charset "UTF-8";
/* Header */
#header{background:#fff}
#header .h_wrap{max-width:176rem}
#header .h_wrap #nav #gnb >ul >li >a >span{color:#000}
#header .h_wrap .allmenu_btn_open::before{background:#000}
[data-scroll="on"] #header{background-color: #00306C;}
[data-scroll="on"] #header .h_wrap #nav #gnb >ul >li >a >span{color:#fff}
[data-scroll="on"] #header .h_wrap .allmenu_btn_open::before{background:#fff}

/* 공통 */
#container{max-width:inherit;padding:0}
#section {width: 100%; margin: 14rem 0 16rem; padding-left: calc((100vw - 1800px) / 2);}
#section1 .inner {width: 100%; width: 100%; max-width: calc(1920px - 12rem); margin: 0 auto;}
strong.title {display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 1.6rem; margin-bottom: 6.4rem; font-size: 5.6rem; font-weight: 700;}
strong.title p {width: 100%; font-size: 2.4rem; color: #00306C; font-family: 'Poppins'; font-weight: normal;}
strong.title p em {color: #F39800;}

/* visual */
.visual {overflow: hidden; position: relative; width: 100%; height: calc(100vh - 10rem); margin-top: 10rem;}
.visual .video {position: relative; width: 100%; height: 100%;}
.visual .video video {position: relative; width: 100%; height: 100%; object-fit: cover; z-index: 0;}
.visual .video::before {content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(0deg, rgba(9, 16, 47, 0.60) 0%, rgba(9, 16, 47, 0.60) 100%); z-index: 1;}
.visual .overlay {display: flex; justify-content: center; align-items: center; position: absolute; inset: 0; background-color: #fff;
    mask: url(#holeMask);
    -webkit-mask: url(#holeMask);
    pointer-events: none;
    z-index: 2;
}
.visual .text-layer {display: flex; justify-content: center; align-items: center; position: absolute; inset: 0; z-index: 3; user-select: none; pointer-events: none;}
.visual .text-layer .title {display: flex; align-items: center; flex-direction: column;}
.visual .text-layer .title p {font-size: 4.7rem; font-weight: 500; letter-spacing: -0.47px; color: #fff;}
.visual .text-layer .title p b {font-weight: 700;}
.visual .text-layer .title p em {color: rgba(255, 255, 255, 0.2); text-shadow: 0 0 0 rgba(0, 0, 0, 0.25);}
.visual >p {position: absolute; left: 50%; bottom: 8.2rem; transform: translateX(-50%); font-size: 1.6rem; font-family: 'SUIT'; color: #717171; z-index: 5; text-transform: uppercase;}
.visual >p::before {content: ""; display: inline-block; width: 1rem; height: 1rem; margin-right: 0.6rem; background: url(../../../images/site/kor/main/icon-scroll.svg) no-repeat center / cover;}
.visual >p::after {content: ""; display: inline-block; width: 1rem; height: 1rem; margin-left: 0.6rem; background: url(../../../images/site/kor/main/icon-scroll.svg) no-repeat center / cover;}
.visual.expanded .text-layer {justify-content: flex-start; align-items: flex-end; padding: 0 12rem 8rem;}
.visual.expanded .text-layer .title {align-items: flex-start; text-align: left;}
.visual.expanded .text-layer .title p em {color: #fff;}
.visual.expanded >p {bottom: -100%; transition: bottom 1s ease;}
.letter {display: inline-block; white-space: pre; transition: color 0.2s linear, opacity 0.2s linear;}

@supports (-webkit-touch-callout: none) {
  .visual .overlay {
    display: none !important;
  }
}


/* sec1 */
/* #section.sec1.on {padding-left: 0;} */
.sec1 .top {display: flex; justify-content: space-between; align-items: flex-end; width: 168rem;}
.sec1 .top .control {display: flex; align-items: center; gap: 1.6rem; margin-bottom: 6.4rem;}
.sec1 .top .control button {display: flex; justify-content: center; align-items: center; width: 1rem; height: 1rem; background: url(../../../images/site/kor/main/icon-prev.svg) no-repeat center / contain;}
.sec1 .top .control button.next {background: url(../../../images/site/kor/main/icon-next.svg) no-repeat center / contain;}
.sec1 .top .control .swiper-pagination {display: flex; align-items: center; gap: 0.8rem; position: relative; height: 100%; bottom: 0; z-index: 1;}
.sec1 .top .control .swiper-pagination .bullet {width: 1.2rem; height: 1.2rem; border-radius: 100%; background-color: #D5D7D9;}
.sec1 .top .control .swiper-pagination .bullet.active {width: 2.6rem; border-radius: 2rem; background-color: #3F4B57;}
.sec1 .sec1_swiper {overflow: visible; width: 100%;}
.sec1 .sec1_swiper .item {overflow: hidden; position: relative; height: 68rem; border-radius: 1.2rem;}
.sec1 .sec1_swiper .item a {display: flex; justify-content: flex-start; align-items: flex-end; padding: 4.8rem; height: calc(100% - (4.8rem * 2)); background: linear-gradient(180deg, rgba(0, 0, 0, 0.24) 0%, rgba(0, 0, 0, 0.80) 100%);}
.sec1 .sec1_swiper .item a img {position: absolute; width: 100%; height: 100%; left: 50%; top: 0; transform: translateX(-50%); object-fit: cover; object-position: center center; z-index: -1;}
.sec1 .sec1_swiper .item a .txt {display: flex; justify-content: space-between; align-items: flex-start; width: 100%; }
.sec1 .sec1_swiper .item a .txt .in strong {display: block; margin-bottom: 1.6rem; font-size: 2.8rem; font-weight: 600; color: #fff;}
.sec1 .sec1_swiper .item a .txt .in p {font-size: 1.9rem; color: #DDD;}
.sec1 .sec1_swiper .item a .txt .circle {display: flex; flex-shrink: 0; justify-content: center; align-items: center; width: 8rem; height: 8rem; background-color: #fff; border-radius: 50%;}
.sec1 .sec1_swiper .item a .txt .circle::after {content: ""; display: flex; width: 2.4rem; height: 2.4rem; background: url(../../../images/site/kor/main/icon-go.svg)no-repeat center / contain;}
.sec1 .sec1_swiper .item:hover a .txt .circle, .sec1 .sec1_swiper .item:focus a .txt .circle {background-color: #F39800;}

/* sec2 */
.sec2 {padding: 12rem 0 13.8rem; background: url(../../../images/site/kor/main/sec2_bg.png) no-repeat center / cover;}
.sec2 .inner .title {color: #fff}
.sec2 .inner .title p {color: rgba(255, 255, 255, 0.5);}
.sec2 .inner {margin: 8.8rem 10rem 0;}
.sec2 .inner .box {display: flex; gap: 8rem; position: relative; font-family: 'Pretendard'; z-index: 1;}
.sec2 .inner .box .item {display: flex; justify-content: flex-start; align-items: flex-end; flex-wrap: wrap; position: relative; width: 100%; height: 50rem; border-radius: 1.2rem; transition: all 0.5s; background: linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), url(../../../images/site/kor/main/sec2_img1.png);}
.sec2 .inner .box .item[data-item="2"] {background: linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), url(../../../images/site/kor/main/sec2_img2.png) no-repeat center / cover;}
.sec2 .inner .box .item[data-item="3"] {background: linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), url(../../../images/site/kor/main/sec2_img3.png) no-repeat center / cover;}
.sec2 .inner .box .item.on {transform: translateY(-32px); transition: all 0.5s ease; box-shadow: 0px 20px 70px 0px rgba(98, 98, 255, 0.4); z-index: 5;}
.sec2 .inner .box .item[data-item="2"].on {background: linear-gradient(180deg, #0E1035 15.03%, rgba(14, 16, 51, 0.00) 24.87%), url(../../../images/site/kor/main/sec2_img2.png) lightgray -371.242px 0px / 196.678% 101.172% no-repeat, #09102F; background-blend-mode: normal, screen, normal;}
.sec2 .inner .box .item[data-item="3"].on {background: linear-gradient(180deg, #0E1035 15.03%, rgba(14, 16, 51, 0.00) 24.87%), url(../../../images/site/kor/main/sec2_img3.png) lightgray -371.242px 0px / 196.678% 101.172% no-repeat, #09102F; background-blend-mode: normal, screen, normal;}
.sec2 .inner .box .item .bottom {position: relative; z-index: 10; width: 100%;}
.sec2 .inner .box .item .bottom ul {display: none; width: auto; height: 100%; padding: 2.4rem 3.2rem 0; background: rgba(0, 0, 0, 0.70);}
.sec2 .inner .box .item.on .bottom ul {display: block; animation: ani2 0.7s;}
.sec2 .inner .box .item .bottom ul li {position: relative; margin-left: 1rem; color: rgba(216, 216, 216, 0.8); font-size: 1.8rem;}
.sec2 .inner .box .item .bottom ul li::before {content: ""; display: inline-block; position: absolute; top: 50%; left: -1rem; width: 6px; height: 1px; background-color: rgba(216, 216, 216, 0.8);}
.sec2 .inner .box .item .bottom strong {display: flex; justify-content: space-between; align-items: center; width: auto; padding: 3.2rem; font-size: 2.4rem; font-weight: 600; text-transform: capitalize; background: rgba(0, 0, 0, 0.70); color: #F39800; border-radius: 0 0 1.2rem 1.2rem;}
.sec2 .inner .box .item .bottom strong::after {content: ""; display: inline-block; width: 3.2rem; height: 3.2rem; background: url(../../../images/site/kor/main/sec2-more-icon.svg) no-repeat center / contain; }
.sec2 .inner .box .item.on .bottom strong::after {background: url(../../../images/site/kor/main/sec2-more-icon-h.svg) no-repeat center / contain;}
@keyframes ani2 {
    0% {
        height: 0;
    }
    100% {
        height: 100%;
    }
}

/* sec3 */
.sec3 {overflow: hidden; margin: 0 !important; padding: 16rem 0 20rem; position: relative;}
.sec3 .box {display: flex; justify-content: space-between; align-items: stretch; position: relative; gap: 2rem; width: 100%; height: 48rem;}
.sec3 .box::after {content: ""; display: block; position: absolute; bottom: -24rem; right: 0; width: 85.1rem; height: 15rem; background: url(../../../images/site/kor/main/sec3_bg.png) no-repeat center / contain;}
.sec3 .box .item {overflow: hidden; display: flex; justify-content: flex-start; align-items: flex-end; position: relative; width: calc((100% - 83rem) / 2 - 4rem); height: 100%; padding: 4rem; border-radius: 1.2rem; background: url(../../../images/site/kor/main/sec3_img2.png)no-repeat; background-position: center; background-size: cover; transition: all 0.3s ease;}
.sec3 .box .item::after {content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.50) 100%);}
.sec3 .box .item::before {content: ""; position: absolute; inset: 0; z-index: 0; background-image: inherit; background-position: inherit; background-repeat: inherit; background-size: cover; transform: scale(1); transition: transform 0.6s ease;}
.sec3 .box .item.on::before {transform: scale(1.1);}
.sec3 .box .item.big {width: 83rem; background: url(../../../images/site/kor/main/sec3_img1.png)no-repeat; background-position: center; background-size: cover;}
.sec3 .box .item.last {background: url(../../../images/site/kor/main/sec3_img3.png)no-repeat; background-position: center; background-size: cover;}
.sec3 .box .item strong {display: flex; align-items: center; gap: 1.6rem; position: relative; z-index: 5; font-size: 3rem; font-weight: 600; font-family: 'Pretendard'; color: #fff;}
.sec3 .box .item strong::after {content: "";display: inline-block; width: 1.8rem; height: 1.6rem; background: url(../../../images/site/kor/main/icon-go-w.svg) no-repeat center / contain;}
.sec3 .box .item.on {background-size: 110% 110%;}
.sec3 .box .item.big.on {background: url(../../../images/site/kor/main/sec3_img1.png)no-repeat center / auto 110%;}
.sec3 .box .item.on::after {display: none;}
.sec3 .box .item.on strong {gap: 2.5rem;}
.sec3 .box .item.on strong::after {animation: ani1 0.5s infinite;}
@keyframes ani1 {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(10%);
    }
}

/* sec4 */
.sec4 {padding: 16rem 0 20rem; text-align: center; background: linear-gradient(0deg, #1C2035 0%, #1C2035 100%), url(../../../images/site/kor/main/sec4_bg.png) no-repeat center / cover; background-blend-mode: hard-light, normal;} 
.sec4 .inner strong {display: block; margin-bottom: 4rem; font-size: 5.6rem; color: #FFF;}
.sec4 .inner strong span {display: block; width: 100%; font-size: 2.4rem; color: rgba(255, 255, 255, 0.5); text-transform: capitalize; font-family: 'Poppins'; font-weight: 400;}
.sec4 .inner .btn {display: flex; justify-content: center; align-items: center; gap: 0.8rem;}
.sec4 .inner .btn button {display: block; padding: 1.6rem 2.4rem; color: #000; font-size: 1.7rem; font-weight: 600; background-color: #F39800; transition: all 0.3s ease;}
.sec4 .inner .btn button:focus, .sec4 .inner .btn button.on {background-color: #F38600; box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.5);}
.sec4 .inner .btn button.more {background-color: #FFF;}
.sec4 .inner .btn button.more:focus, .sec4 .inner .btn button.more.on {background-color: #EEE; box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.5);}
.sec4 .inner .btn button.on{transform: translateY(-3px);}

@media screen and (max-width: 1800px) {
    #section {padding-left: 2rem;}
    .sec1 .top {width: 100%; padding-right: 2rem;}
    .sec2 .inner .title {padding: 0 2rem;}
    .sec2 .inner .box {gap: 6rem;}
    .sec3 {padding: 16rem 2rem 20rem;}
}
@media screen and (max-width: 1680px) {
    .sec2 .inner .box {gap: 4rem; margin: 8.8rem 0 0;}
}
@media screen and (max-width: 1440px) {
    .sec2 .inner .box {gap: 2rem; margin: 8.8rem 0 0;}
    .sec3 .box .item.big {width: calc(100% / 3 - 2rem);}
    .sec3 .box .item {width: calc(100% / 3 - 2rem);}
}
@media screen and (max-width: 1024px) {
    #section {margin: 6.4rem 0 8rem;}
    strong.title {gap: 1.35rem; margin-bottom: 4rem; font-size: 4.45rem;}
    strong.title p {}
    .visual {height: 768px;}
    .visual .text-layer .title p {font-size: 4.45rem;}
    .visual.expanded .text-layer {padding: 0 4.45rem 3.56rem;}
    .sec1 .sec1_swiper .item {height: 42.3rem;}
    .sec1 .sec1_swiper .item a {padding: 3.6rem; height: calc(100% - (3.6rem * 2));}
    .sec1 .sec1_swiper .item a .txt {align-items: flex-end;}
    .sec1 .sec1_swiper .item a .txt .circle {width: 5.6rem; height: 5.6rem;}
    .sec2 {padding: 8rem 0;}
    .sec2 .inner .title {margin-top: 0;}
    .sec2 .inner .box {overflow-x: auto; width: 100%; margin-top: -1rem; scroll-snap-type: x mandatory;}
    .sec2 .inner .box .item {flex: 0 0 50%; margin-top: 2rem; scroll-snap-align: center;}
    .sec2 .inner .box .item.on {transform: translateY(-20px);}
    .sec2 .inner .box .item .bottom strong {padding: 3rem; font-size: 2.2rem;}
    .sec2 .inner .box .item .bottom strong::after {width: 2.8rem; height: 2.8rem;}
    .sec3 {padding: 8rem 2rem 16.2rem;}
    .sec3 .box {gap: 1.3rem;}
    .sec3 .box::after {bottom: -20rem; right: -4.1rem; width: 81.8rem;;}
    .sec3 .box .item.big {width: calc(100% / 3 - 1.3rem);}
    .sec3 .box .item {width: calc(100% / 3 - 1.3rem);}
    .sec3 .box .item strong {font-size: 2.4rem;}
    .sec4 {padding: 10rem 0 12rem;}
    .sec4 .inner strong { font-size: 3.8rem;}
    .sec4 .inner strong span {font-size: 2.2rem;}
}
@media screen and (max-width: 768px) {
    strong.title {font-size: 3rem;}
    strong.title p {font-size: 1.9rem;}
    .visual {height: 360px;}
    .visual .text-layer .title p {font-size: 3rem;}
    .visual.expanded .text-layer {padding: 0 2.23rem 2.23rem;}
    .visual >p {bottom: 0.2rem;}
    .sec2 .inner .title {padding: 0;}
    .sec1 .sec1_swiper .item a {padding: 3.6rem 2.25rem;}
    .sec1 .sec1_swiper .item a .txt .circle {position: absolute; top: 3.2rem; right: 2.25rem;}
    .sec1 .sec1_swiper .item a .txt .in strong {font-size: 2.6rem;}
    .sec2 {display: flex; flex-direction: column; justify-content: center; padding: 7rem 2rem; position: relative;}
    .sec2 .inner .box {display: block; position: relative; height: 400px;; overflow: hidden;}
    .sec2 .inner .box .item {width: 100%; opacity: 0; position: absolute; top: 0; left: 0; margin-top: 0; pointer-events: none; transition: all 1s ease;}
    .sec2 .inner .box .item.on {opacity: 1; transform: translateY(0);  z-index: 5; pointer-events: auto;}
    .sec2 .inner .box .item .bottom ul {display: block;}
    .sec3 .box {flex-wrap: wrap; height: auto;}
    .sec3 .box::after {right: -22.1rem; width: 73.8rem;}
    .sec3 .box .item.big {width: 100%; height: 22.3rem; background-size: 100% 100%;}
    .sec3 .box .item {width: 100%; height: 25rem; background-size: 100% 100%;}
    .sec4 {padding: 8rem 10rem 10rem;}
    .sec4 .inner strong { font-size: 3.1rem;}
    .sec4 .inner strong span {font-size: 1.9rem;}
}
@media screen and (max-width: 500px) {
    .sec3 .box::after {right: -38.1rem;}
    .sec4 {padding: 8rem 8rem 10rem;}
    .sec4 .inner .btn button {padding: 1.6rem 1.4rem;}
    #footer .inner .fbot .fb_l p {flex-wrap: wrap;}
}