@charset "UTF-8";
html{background-color: #121111;}
/*.cursor{position: fixed; top: 0; left: 0; z-index: 9999; width: 1.5rem; height: 1.5rem; background-color: #D4000F; border-radius: 50%; pointer-events: none; transform: translate(-50%,-50%); }*/

@media screen and (max-width:1024px){
    *{cursor: auto;}
    .cursor{display: none;}
}

/*-------------------------------------------------------------------
    popup
-------------------------------------------------------------------*/
#popup{display: none; position: absolute; top: 12rem; left: 3rem; z-index: 2; width: auto; max-width: 100%;}
#popup.on{display: block;}
#popup .inner{}
#popup .inner .pop{width: 100%; max-width: 50rem; background-color: #000;}
#popup .inner .pop .swiper{width: 100%;}
#popup .inner .pop .swiper .swiper-wrapper{width: 100%;}
#popup .inner .pop .swiper .swiper-wrapper .swiper-slide{width: 100%;}
#popup .inner .pop .swiper .swiper-wrapper .swiper-slide a{display: block; width: 100%;}
#popup .inner .pop .swiper .swiper-wrapper .swiper-slide img{display: block; width: 100%;}
#popup .inner .pop .swiper >a{display: block; position: absolute; top: 50%; left: 0; z-index: 1; width: 3.2rem; height: 3.2rem; text-indent: 9999px; background: url(../../../img/site/kor/main/img52.svg) no-repeat center center / 100% auto; transform: translateY(-50%);}
#popup .inner .pop .swiper >a.swiper-button-lock{display: none;}
#popup .inner .pop .swiper >a.next{left: auto; right: 0; transform: translateY(-50%) rotate(180deg);}
#popup .inner .pop .b{display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: stretch; gap: 0.4rem 0.8rem; padding: 1rem 0.5rem;}
#popup .inner .pop .b a{display: inline-block; padding: 0.3rem 1rem; color: #fff; font-size: 1.3rem; font-weight: 300; background-color: #393939; border: 1px solid #393939; transition: all 0.2s linear;}
#popup .inner .pop .b a:hover{border-color: #fff;}
#popup .inner .pop .b a b{font-weight: 500;}

@media screen and (max-width:1800px){
    #popup{top: 10rem; left: 0;}
}
@media screen and (max-width:640px){
    #popup{top: 9rem;}
}

/*-------------------------------------------------------------------
    sec01
-------------------------------------------------------------------*/
#sec01{overflow: hidden; position: relative; background:  #fff url(../../../img/site/kor/main/img00.jpg) no-repeat center center / cover;}
#sec01 video{display: block; width: 100%; height: 800px; min-height: 100vh; object-fit: cover;}
#sec01 .inner{display: flex; flex-direction: column; flex-wrap: wrap; align-content: flex-start; justify-content: flex-end; align-items: flex-start; position: absolute; top: 0; left: 50%; z-index: 1; width: 100%; height: 100%; padding-bottom: 4.8rem; transform: translateX(-50%);}
#sec01 .inner{}
#sec01 .inner .downs{display: block; width: 8rem; height: 8rem; margin-bottom: 2.2rem; text-indent: -9999px; background: rgba(255, 255, 255, 0.10) url(../../../img/site/kor/main/img03.svg) no-repeat center center / 100% auto; border: 1px solid rgba(255, 255, 255, 0.50);}
#sec01 .inner .navis{display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; gap: 0.8rem; position: relative; width: 100%; padding-bottom: 22.6rem;}
#sec01 .inner .navis li{flex: auto; min-width: 24rem; padding: 0 0.8rem; transition: all 0.2s linear;}
#sec01 .inner .navis li.on{flex: 1 auto auto; width: 100%; padding: 0;}
#sec01 .inner .navis li a{display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-end; gap: 1.2rem; position: relative; width: 100%; height: 100%; padding-bottom: 1rem; color: #FFF; font-size: 1.8rem; font-weight: 300; line-height: 1.3; font-family: "Pretendard"; border-bottom: 1px solid rgba(255, 255, 255, 0.25);}
#sec01 .inner .navis li img{display: block; width: 8rem; height: 4.5rem; object-fit: cover; border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.25);}
#sec01 .inner .navis li span{}
#sec01 .inner .navis li em{display: none; color: rgba(255, 255, 255, 0.50);}
#sec01 .inner .navis li.on em{color: rgba(255, 255, 255, 1);}
#sec01 .inner .navis li span.button{display: none; width: 1.8rem; height: 1.8rem; margin: 0.2rem 0; text-indent: -9999px; background: rgba(255, 255, 255, 0.15) url(../../../img/site/kor/main/img01.svg) no-repeat center center / 100% auto; border-radius: 2px; cursor: pointer; text-indent: -9999px;}
#sec01 .inner .navis li.on span.button{display: block;}
#sec01 .inner .navis li span.button.on{background-image: url(../../../img/site/kor/main/img02.svg);}
#sec01 .inner .navis li i{display: none; position: absolute; bottom: -1px;; left: 0; width: 100%; height: 1px; background-color: #fff; text-indent: -9999px; }
#sec01 .inner .navis li.on i{display: block;}
#sec01 .inner .navis li >strong{opacity: 0; display: block; position: absolute; top: 9rem; left: 0; width: 100%; font-family: "Exat CYR"; font-size: 9.6rem; font-weight: 400; line-height: 1; color: #fff; transition: all 0.2s linear;}
#sec01 .inner .navis li.on >strong{opacity: 1;}
#sec01 .inner .ins{opacity: 0; display: block; width: 100%; transform: translateY(20rem); animation-name: ani02; animation-delay: 0s; animation-duration: 0.3s; animation-timing-function: linear; animation-fill-mode: both;}

@keyframes ani02{
    0%{opacity: 0; transform: translateY(20rem);}
    30%{opacity: 1;}
    100%{opacity: 1; transform: translateY(0);}
}

@media screen and (max-width:1600px){
    #sec01 .inner .navis li >strong{font-size: 8rem;}
}
@media screen and (max-width:1200px){
    #sec01 .inner .navis li >strong{font-size: 7rem;}
}
@media screen and (max-width:1024px){
    #sec01{min-height: auto; height: 100vh; min-height: 600px;}
    #sec01 video{height: 100%;}
    #sec01 .inner .downs{width: 6rem;height: 6rem; margin-bottom: 0;}
    #sec01 .inner .navis{flex-wrap: wrap; gap: 1.4rem 1rem; margin-top: 2.4rem; padding-bottom: 16rem;}
    #sec01 .inner .navis li{flex: none; order: 2; display: block; min-width: auto; padding: 0;}
    #sec01 .inner .navis li:nth-child(1){min-width: auto;}
    #sec01 .inner .navis li.on{flex: auto; order: 1; display: block; width: 100%;}
    #sec01 .inner .navis li a{justify-content: flex-start;}
    #sec01 .inner .navis li:not(.on) a{padding-bottom: 0; border-bottom: 0;}
    #sec01 .inner .navis li span{display: none;}
    #sec01 .inner .navis li img{width: 12rem; height: 6.72rem;}
    #sec01 .inner .navis li >strong{top: 17rem; font-size: 7rem;}
}
@media screen and (max-width:640px){
    #sec01{height: 95vh; min-height: 500px;}
    #sec01 .inner .navis{gap: 1.2rem 0.8rem; padding-bottom: 14rem;}
    #sec01 .inner .navis li >strong{font-size: 6rem;}
}
@media screen and (max-width:480px){
    #sec01 .inner .navis li >strong{font-size: 5rem;}
}
@media screen and (max-width:360px){
    #sec01 .inner .navis li img{width: calc(12rem * 0.9); height: calc(6.72rem * 0.9)}
}

/*-------------------------------------------------------------------
    sec02
-------------------------------------------------------------------*/
#sec02{padding-top: 16rem;}
#sec02 .inner{}
#sec02 .inner .tit{display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start; gap: 8rem;}
#sec02 .inner .tit strong{display: block; flex: 1; font-size: 13rem; color: #fff; font-weight: 100; text-transform: uppercase; line-height: 0.8; letter-spacing: -0.1rem;}
#sec02 .inner .tit strong span:first-child{font-weight: 500;}
#sec02 .inner .tit strong span:nth-child(2){font-weight: 400;}
#sec02 .inner .tit strong span:nth-child(3){font-weight: 300;}
#sec02 .inner .tit strong span:nth-child(4){font-weight: 200;}
#sec02 .inner .tit p{display: block; width: 100%; margin-top: auto;color: rgba(255, 255, 255, 0.70); font-size: 2.2rem; font-weight: 300; line-height: 1.4; font-family: "Pretendard";}
#sec02 .swiper{opacity: 0; margin-top: 4.8rem; transform: translateY(20rem);}
#sec02 .swiper .swiper-wrapper{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; gap: 4rem; position: static; width: 100%;}
#sec02 .swiper .swiper-slide{display: block; width: calc((100% - 4rem - 4rem - 4rem) / 4); height: 48rem;}
#sec02 .swiper .swiper-slide .f{opacity: 1; display: flex; flex-direction: column; flex-wrap: wrap; justify-content: flex-end; align-items: flex-start; gap: 0.8rem; position: relative; width: 100%; height: 100%; padding: 2.4rem 3.2rem; transition: opacity 0.2s linear;}
#sec02 .swiper .swiper-slide:hover .f{opacity: 0;}
#sec02 .swiper .swiper-slide .f img{display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
#sec02 .swiper .swiper-slide .f strong{display: block; position: relative; color: #FFF; font-size: 3.2rem; font-weight: 500; line-height: 1.4;}
#sec02 .swiper .swiper-slide .f p{overflow: hidden; display: block; position: relative; width: 100%; color: rgba(255, 255, 255, 0.80); font-size: 2rem; font-weight: 300; line-height: 1.4;}
#sec02 .swiper .swiper-slide .s{position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 2rem;}
#sec02 .swiper .swiper-slide .s:before{content: ""; opacity: 0; display: block; position: absolute; top: 50%; left: 50%; width: 2rem; height: 2rem; transform: translate(-50%,-50%); background-color: #D4000F; transition: all 0.2s linear;}
#sec02 .swiper .swiper-slide .s:after{content: ""; opacity: 0; display: block; position: absolute; top: 50%; right: 50%; width: 2rem; height: 2rem; transform: translate(-50%,-50%); background-color: #D4000F; transition: all 0.2s linear;}
#sec02 .swiper .swiper-slide .s .in:before{content: ""; opacity: 0; display: block; position: absolute; bottom: 50%; left: 50%; width: 2rem; height: 2rem; transform: translate(-50%,-50%); background-color: #D4000F; transition: all 0.2s linear;}
#sec02 .swiper .swiper-slide .s .in:after{content: ""; opacity: 0;  display: block; position: absolute; bottom: 50%; right: 50%; width: 2rem; height: 2rem; transform: translate(-50%,-50%); background-color: #D4000F; transition: all 0.2s linear;}
#sec02 .swiper .swiper-slide:hover .s:before{opacity: 1; top: 0; left: 0; transform: translate(0,0);}
#sec02 .swiper .swiper-slide:hover .s:after{opacity: 1; top: 0; right: 0; transform: translate(0,0);}
#sec02 .swiper .swiper-slide:hover .s .in:before{opacity: 1; bottom: 0; left: 0; transform: translate(0,0);}
#sec02 .swiper .swiper-slide:hover .s .in:after{opacity: 1; bottom: 0; right: 0; transform: translate(0,0);}
#sec02 .swiper .swiper-slide .s .in{opacity: 0; display: block; width: 100%; height: 100%; padding: 2rem; background-color: #fff; transition: opacity 0.2s linear; transition-delay: 0.1s;}
#sec02 .swiper .swiper-slide:hover .s .in{opacity: 1;}
#sec02 .swiper .swiper-slide .s .in >div{opacity: 0; display: flex; flex-direction: column; flex-wrap: nowrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; width: 100%; height: 100%; transition: opacity 0.2s linear; transition-delay: 0.2s;}
#sec02 .swiper .swiper-slide:hover .s .in >div{opacity: 1;}
#sec02 .swiper .swiper-slide .s .in strong{display: block;color: #151515;font-size: 2.8rem;font-weight: 500;line-height: 1.4; flex-shrink: 0;}
#sec02 .swiper .swiper-slide .s .in p{overflow: hidden;display: block;width: 100%;margin-top: 0.8rem;font-family: "Pretendard";color: #555;font-size: 1.6rem;font-weight: 300;line-height: 1.4;white-space: nowrap;text-overflow: ellipsis;flex-shrink: 0;}
#sec02 .swiper .swiper-slide .s .in .hash{overflow: hidden;display: flex;flex-wrap: wrap;justify-content: flex-start;align-items: flex-start;gap: 0.4rem;width: 100%;height: 3.6rem;margin-top: 1rem;flex-shrink: 0;}
#sec02 .swiper .swiper-slide .s .in .hash span{display: inline-block; padding: 0.6rem 1.2rem; font-family: "Pretendard"; font-size: 1.4rem; color: #555; letter-spacing: -0.02rem; white-space: nowrap; border: 1px solid #DDD; border-radius: 10rem;}
#sec02 .swiper .swiper-slide .s .in ul{display: flex;flex-wrap: wrap;justify-content: flex-start;align-items: stretch;gap: 0.6rem;flex-shrink: 0;width: 100%;height: auto;margin-top: 2.4rem;}
#sec02 .swiper .swiper-slide .s .in ul li{width: calc((100% - 0.6rem) / 2); height: calc((100% - 0.6rem) / 2); background-color: #F5F5F5;}
#sec02 .swiper .swiper-slide .s .in ul li >div{display: flex; flex-direction: column; align-content: flex-start; justify-content: flex-start; align-items: flex-start; position: relative; width: 100%; height: 100%; padding: 1.6rem 2rem;}
#sec02 .swiper .swiper-slide .s .in ul li >div i{display: block; position: relative; width: 4rem; height: 4rem; background: url(../../../img/site/kor/main/img12.svg) no-repeat center center / 100% auto; text-indent: -9999px; transition: all 0.2s linear;}
#sec02 .swiper .swiper-slide .s .in ul li:nth-child(1) >div:hover i{background-image: url(../../../img/site/kor/main/img13.svg);}
#sec02 .swiper .swiper-slide .s .in ul li:nth-child(2) >div i{background-image: url(../../../img/site/kor/main/img14.svg);}
#sec02 .swiper .swiper-slide .s .in ul li:nth-child(2) >div:hover i{background-image: url(../../../img/site/kor/main/img15.svg);}
#sec02 .swiper .swiper-slide .s .in ul li:nth-child(3) >div i{background-image: url(../../../img/site/kor/main/img16.svg);}
#sec02 .swiper .swiper-slide .s .in ul li:nth-child(3) >div:hover i{background-image: url(../../../img/site/kor/main/img17.svg);}
#sec02 .swiper .swiper-slide .s .in ul li:nth-child(4) >div i{background-image: url(../../../img/site/kor/main/img18.svg);}
#sec02 .swiper .swiper-slide .s .in ul li:nth-child(4) >div:hover i{background-image: url(../../../img/site/kor/main/img19.svg);}
#sec02 .swiper .swiper-slide .s .in ul li >div i[data-img="2"]{background-image: url(../../../img/site/kor/main/img42.svg);}
#sec02 .swiper .swiper-slide .s .in ul li >div:hover i[data-img="2"]{background-image: url(../../../img/site/kor/main/img43.svg);}
#sec02 .swiper .swiper-slide .s .in ul li >div i[data-img="3"]{background-image: url(../../../img/site/kor/main/img44.svg);}
#sec02 .swiper .swiper-slide .s .in ul li >div:hover i[data-img="3"]{background-image: url(../../../img/site/kor/main/img45.svg);}
#sec02 .swiper .swiper-slide .s .in ul li >div i[data-img="4"]{background-image: url(../../../img/site/kor/main/img46.svg);}
#sec02 .swiper .swiper-slide .s .in ul li >div:hover i[data-img="4"]{background-image: url(../../../img/site/kor/main/img47.svg);}
#sec02 .swiper .swiper-slide .s .in ul li >div i[data-img="5"]{background-image: url(../../../img/site/kor/main/img49.svg);}
#sec02 .swiper .swiper-slide .s .in ul li >div:hover i[data-img="5"]{background-image: url(../../../img/site/kor/main/img50.svg);}
#sec02 .swiper .swiper-slide .s .in ul li >div i[data-img="6"]{background-image: url(../../../img/site/kor/main/img16.svg);}
#sec02 .swiper .swiper-slide .s .in ul li >div:hover i[data-img="6"]{background-image: url(../../../img/site/kor/main/img17.svg);}
#sec02 .swiper .swiper-slide .s .in ul li >div:before{content: ""; display: block; position: absolute; top: 0; left: 0; z-index: 0; width: 0%; height: 100%; background-color: #D4000F; border-radius: 0; transition: all 0.2s lienar;}
#sec02 .swiper .swiper-slide .s .in ul li >div:hover:before{animation-name: ani03; animation-duration: 0.1s; animation-timing-function: linear; animation-fill-mode: both;}
#sec02 .swiper .swiper-slide .s .in ul li >div p{position: relative; width: 100%; font-family: "Pretendard"; font-size: 1.6rem; color: #555; font-weight: 400; line-height: 1.2; white-space: normal; transition: all 0.2s linear;}
#sec02 .swiper .swiper-slide .s .in ul li >div:hover p{color: #fff;}
#sec02 .swiper .swiper-slide .s .in .links{display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: center; gap: 3.6rem; width: 100%; margin-top: 2.4rem; padding: 2rem; color: #2D2D2D; font-family: "Pretendard"; font-size: 1.8rem; font-weight: 500; line-height: 1.2; background-color: #F5F5F5; transition: all 0.2s linear;}
#sec02 .swiper .swiper-slide .s .in .links:hover{background-color: #d3d3d3}
#sec02 .swiper .swiper-slide .s .in .links span{flex: 1;}
#sec02 .swiper .swiper-slide .s .in .links:after{content: ""; display: block; width: 2.4rem; height: 2.4rem; background: url(../../../img/site/kor/main/img20.svg) no-repeat center center / 100% auto;}
#sec02 .swiper .swiper-slide .s .in .close{display: none;}
#sec02 .swiper .swiper-slide .drag{display: none;}
#sec02 .swiper .swiper-pagination{display: none; position: relative; top: auto; left: auto; height: 1px; margin-top: 6rem; background-color: rgba(255, 255, 255, 0.20);}
#sec02 .swiper .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background-color: #fff;}

#cursor-img{opacity: 0; position: fixed; top: 0; left: 0; z-index: 10000; width: 32rem; pointer-events: none; transition: opacity .2s ease;}
#cursor-img img{display: block; width: 100%; object-fit: cover;}

#sec02[data-steps="4"] .swiper,
#sec02[data-steps="5"] .swiper,
#sec02[data-steps="6"] .swiper,
#sec02[data-steps="7"] .swiper,
#sec02[data-steps="8"] .swiper,
#sec02[data-steps="9"] .swiper,
#sec02[data-steps="10"] .swiper{animation-name: ani_up; animation-duration: 0.5s; animation-timing-function: linear; animation-fill-mode: both;}

@keyframes ani03{
    0%{width: 0; border-radius: 0 100% 100% 0;}
    100%{width: 100%; border-radius: 0;}
}

@media screen and (max-width:1800px){
    #sec02 .swiper .swiper-slide{width: calc((100% - 2rem - 2rem - 2rem) / 4);}
    #sec02 .swiper .swiper-wrapper{gap: 2rem;}
    #sec02 .swiper .swiper-slide .s .in ul li >div{padding: 1.6rem;}
    #sec02 .swiper .swiper-slide .s .in ul li >div p{font-size: 1.5rem;}
}
@media screen and (max-width:1600px){
    #sec02{padding-top: 10rem;}
    #sec02 .inner .tit{display: block;}
    #sec03 .inner .tit strong{font-size: 10rem;}
    #sec02 .inner .tit p{margin-top: 3rem;}
    #sec02 .swiper .swiper-slide .s .in ul{margin-top: 1.6rem;}
    #sec02 .swiper .swiper-slide .s .in ul li >div{padding: 1.6rem;}
    #sec02 .swiper .swiper-pagination{margin-top: 5rem;}
}
@media screen and (max-width:1400px){
    #sec02 .swiper .swiper-slide .s .in ul{flex-direction: column; flex-wrap: nowrap; height: 100%;}
    #sec02 .swiper .swiper-slide .s .in ul li{width: 100%; height: auto;}
    #sec02 .swiper .swiper-slide .s .in ul li >div{flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 1rem; padding: 1.25rem;}
    #sec02 .swiper .swiper-slide .s .in ul li >div i{width: 3.5rem; height: 3.5rem;}
    #sec02 .swiper .swiper-slide .s .in ul li >div p{width: 100%; margin-top: 0; flex: 1;}
}
@media screen and (max-width:1200px){
    #sec02 .inner .tit strong{font-size: 8rem;}
    #sec02 .swiper .swiper-slide{width: calc((100% - 2rem) / 2);}
}
@media screen and (max-width:1024px){
    #sec02 .inner .tit strong{font-size: 5.75rem;}
    #sec02 .inner .tit p{margin-top: 2.5rem;}
    #sec02 .swiper .swiper-slide{overflow: hidden; position: relative; padding: 0;}
    #sec02 .swiper .swiper-slide .s{position: absolute; left: 0; bottom: 0; width: 100%; height: calc(100% - 5rem); padding: 0; transform: translateY(calc(100% + 5rem)); transition: transform .4s ease;}
    #sec02 .swiper .swiper-slide.open .s{transform: translateY(5rem);}
    #sec02 .swiper .swiper-slide .s:before,
    #sec02 .swiper .swiper-slide .s:after,
    #sec02 .swiper .swiper-slide .s .in:before,
    #sec02 .swiper .swiper-slide .s .in:after{display: none;}
    #sec02 .swiper .swiper-slide .s .in{opacity: 1; position: relative; padding: 5rem 3rem;}
    #sec02 .swiper .swiper-slide .s .in >div{opacity: 1;}
    #sec02 .swiper .swiper-slide .s .in strong{font-size: 3rem;}
    #sec02 .swiper .swiper-slide .s .in p{margin-top: 0.8rem; font-size: 1.9rem;}
    #sec02 .swiper .swiper-slide .s .in ul{flex-direction: row; flex-wrap: wrap; flex: 1; height: 100%; margin-top: 2rem;}
    #sec02 .swiper .swiper-slide .s .in ul li{width: calc((100% - 0.6rem) / 2); height: auto;}
    #sec02 .swiper .swiper-slide .s .in ul li >div{padding: 1.6rem 2rem;}
    #sec02 .swiper .swiper-slide .s .in ul li >div i{width: 4rem; height: 4rem;}
    #sec02 .swiper .swiper-slide .s .in ul li >div p{letter-spacing: 0.1rem;}
    #sec02 .swiper .swiper-slide .s .in .close{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 1.2rem; position: absolute; top: 2rem; right: 2rem; color: #717171; font-size: 1.94rem; font-weight: 300; line-height: 1.2; font-family: "Pretendard";}
    #sec02 .swiper .swiper-slide .s .in .close:after{content: ""; display: block; width: 2.8rem; height: 2.8rem; background: url(../../../img/site/kor/main/img41.svg) no-repeat center center / 100% auto;}
    #sec02 .swiper .swiper-slide .f{padding: 3rem 2rem;}
    #sec02 .swiper .swiper-slide:hover .f{opacity: 1;}
    #sec02 .swiper .swiper-slide .f{height: calc(100% - 6.5rem);}
    #sec02 .swiper .swiper-slide .f strong{font-size: 3rem;}
    #sec02 .swiper .swiper-slide .f p{font-size: 2rem;}
    #sec02 .swiper .swiper-slide .drag{display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; padding: 2rem; height: 6.5rem; color: #2D2D2D; font-family: "Pretendard"; font-size: 2.125rem; font-weight: 500; line-height: 1.2; background-color: #fff;}
    #sec02 .swiper .swiper-slide .drag:after{content: ""; display: block; width: 2.8rem; height: 2.8rem; background: url(../../../img/site/kor/main/img40.svg) no-repeat center center / 100% auto;}
    #cursor-img{display: none;}
}
@media screen and (max-width:840px){
    #sec02 .swiper .swiper-slide .s .in{padding: 4rem 2rem;}
    #sec02 .swiper .swiper-slide .s .in ul li >div{gap: 0.8rem; padding: 1.25rem;}
    #sec02 .swiper .swiper-slide .s .in ul li >div i{width: 3.5rem; height: 3.5rem;}
    

    #sec02[data-steps="3"] .swiper{animation-name: ani_up; animation-duration: 0.5s; animation-timing-function: linear; animation-fill-mode: both;}
}
@media screen and (max-width:640px){
    #sec02{padding-top: 7rem;}
    #sec02 .inner .tit strong{font-size: 5rem;}
    #sec02 .inner .tit p{margin-top: 2rem; font-size: 2.1rem;}
    #sec02 .inner .tit p span{color: rgba(255,255,255,.3); transition: color .2s linear;}
    #sec02 .swiper{opacity: 1; margin: 3rem auto 0; transform: translateY(0);}
    #sec02 .swiper:before{display: none;}
    #sec02 .swiper .swiper-wrapper{padding-left: 0;}
    #sec02 .swiper .swiper-slide{width: 100%; height: 400px;}
    #sec02 .swiper .swiper-slide .s .in{padding: 4rem 2rem;}
    #sec02 .swiper .swiper-slide .s .in{padding: 4rem 2rem 2rem;}
    #sec02 .swiper .swiper-slide .s .in ul li >div p{font-size: 1.6rem;}
    #sec02 .swiper .inner{padding: 0;}
    #sec02 .swiper .swiper-pagination{margin-top: 4rem;}
    
    #sec02[data-steps="3"] .swiper,
    #sec02[data-steps="4"] .swiper,
    #sec02[data-steps="5"] .swiper,
    #sec02[data-steps="6"] .swiper,
    #sec02[data-steps="7"] .swiper,
    #sec02[data-steps="8"] .swiper,
    #sec02[data-steps="9"] .swiper,
    #sec02[data-steps="10"] .swiper{animation: none;}
}

/*-------------------------------------------------------------------
    sec03
-------------------------------------------------------------------*/
#sec03{padding-top: 16rem;}
#sec03 .inner{}
#sec03 .inner .tit{display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start; gap: 8rem;}
#sec03 .inner .tit strong{display: block; flex: 1; font-size: 13rem; color: #fff; font-weight: 100; text-transform: uppercase; line-height: 0.8; letter-spacing: -0.1rem;}
#sec03 .inner .tit strong span:first-child{font-weight: 500;}
#sec03 .inner .tit strong span:nth-child(2){font-weight: 400;}
#sec03 .inner .tit strong span:nth-child(3){font-weight: 300;}
#sec03 .inner .tit strong span:nth-child(4){font-weight: 200;}
#sec03 .in{opacity: 0; display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; width: 100%; height: 750px; margin-top: 4.8rem; transform: translateY(20rem);}
#sec03 .in .l{position: relative; width: 96rem; height: 100%; background-color: #000;}
#sec03 .in .l video{opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.2s linear;}
#sec03 .in[data-hover="1"] .l video:nth-child(1),
#sec03 .in[data-hover="2"] .l video:nth-child(2),
#sec03 .in[data-hover="3"] .l video:nth-child(3),
#sec03 .in[data-hover="4"] .l video:nth-child(4){opacity: 1}
#sec03 .in .r{overflow: hidden; display: flex; flex-direction: column; flex-wrap: wrap; align-content: flex-start; justify-content: flex-end; align-items: flex-start; position: relative; width: 100%; height: 100%; flex: 1; padding: 4rem; background-color: rgba(255, 255, 255, 0.06);}
#sec03 .in .r:before{content: ""; display: block; position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; background: #000  no-repeat center center / auto 100%; filter: blur(10px); transition: all 0.2s linear;}
#sec03 .in .r >a{width: 100%; padding: 2.4rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.20); transition: all 0.2s linear;}
#sec03 .in .r >a:first-child{padding-top: 0;}
#sec03 .in .r >a.on{flex: 60%; border-bottom-color: #D4000F;}
#sec03 .in .r >a video{display: none;}
#sec03 .in .r >a strong{display: block; color: #FFF; font-size: 2.8rem; font-weight: 300; line-height: 80%;}
#sec03 .in .r >a strong br{display: none;}
#sec03 .in .r >a.on strong{font-size: 6.4rem; line-height: 1.2; font-weight: 500;}
#sec03 .in .r >a.on strong br{display: block;}
#sec03 .in .r >a div{opacity: 0; visibility: hidden; height: 0; transition: all 0.2s linear;}
#sec03 .in .r >a.on div{opacity: 1; visibility: visible; height: auto;}
#sec03 .in .r >a div p{overflow: hidden; display: block; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: rgba(255, 255, 255, 0.70); font-size: 1.8rem; font-weight: 300; line-height: 1.5; font-family: "Pretendard"; text-overflow: ellipsis; }
#sec03 .in .r >a.on div *{margin-top: 2rem;}
#sec03 .in .r >a div b{display: block; color: rgba(255, 255, 255, 0.70); font-weight: 300; font-size: 2rem;}
#sec03 .in .r >a.on div img{display: block; width: 32rem; height: 19rem; object-fit: contain;}

#sec03[data-steps="4"] .in,
#sec03[data-steps="5"] .in,
#sec03[data-steps="6"] .in,
#sec03[data-steps="7"] .in,
#sec03[data-steps="8"] .in,
#sec03[data-steps="9"] .in,
#sec03[data-steps="10"] .in{animation-name: ani_up; animation-duration: 0.5s; animation-timing-function: linear; animation-fill-mode: both;}

@media screen and (max-width:1900px){
    #sec03 .in .l{width: 70rem;}
}
@media screen and (max-width:1600px){
    #sec03{padding-top: 10rem;}
    #sec03 .inner .tit{display: block;}
    #sec03 .inner .tit strong{font-size: 10rem;}
    #sec03 .inner .tit p{margin-top: 3rem;}
    #sec03 .in .l{width: 60rem;}
}
@media screen and (max-width:1440px){
    #sec03 .in .r >a.on strong{font-size: 5rem;}
}
@media screen and (max-width:1200px){
    #sec03 .inner .tit strong{font-size: 8rem;}
    #sec03 .in .l{width: 45rem;}
}
@media screen and (max-width:1024px){
    #sec03 .inner .tit strong{font-size: 5.75rem;}
    #sec03 .inner .tit p{margin-top: 2.5rem;}
    #sec03 .in{opacity: 1; display: block; height: auto; margin-top: 3rem; transform: translateY(0);}
    #sec03 .in .l{display: none;}
    #sec03 .in .r{width: 100%; height: auto; padding: 0 2rem; margin-bottom: 5rem;}
    #sec03 .in .r >a video{width: calc(100% + 4rem); margin-left: -2rem; margin-bottom: 2.4rem;}
    /*#sec03 .in .r >a.on video{display: block; }*/
    #sec03 .in .r >a:first-child{padding-top: 0;}
    #sec03 .in .r >a.on{padding-bottom: 5rem;}
    #sec03 .in .r >a strong{font-size: 2.5rem;}
    #sec03 .in .r >a.on strong{font-size: 4rem;}
    #sec03 .in .r >a.on strong br{display: none;}
    #sec03 .in .r >a.on strong span{font-size: inherit;}
    #sec03 .in .r >a.on div *{margin-top: 1.6rem;}
    #sec03 .in .r >a.on div img{max-width: 100%;}
 
    
    #sec03[data-steps="4"] .in,
    #sec03[data-steps="5"] .in,
    #sec03[data-steps="6"] .in,
    #sec03[data-steps="7"] .in,
    #sec03[data-steps="8"] .in,
    #sec03[data-steps="9"] .in,
    #sec03[data-steps="10"] .in{animation: none;}
}
@media screen and (max-width:640px){
    #sec03{padding-top: 7rem;}
    #sec03 .inner .tit strong{font-size: 5rem;}
    #sec03 .in .r >a.on strong{font-size: 3.2rem;}
    #sec03 .in .r >a strong{font-size: 2.2rem;}
}

/*-------------------------------------------------------------------
    sec04
-------------------------------------------------------------------*/
#sec04{overflow: hidden; position: relative; height: 920px; background-color: #1B202C;}
#sec04:before{content: ""; display: block; position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 30rem; background: linear-gradient(180deg, rgba(0, 0, 0, 0.60) 0%, rgba(0, 0, 0, 0.00) 102%);}
#sec04 .map{position: absolute; top: 50%; left: 50%; width: calc(100% + 50px); height: 1200px; transform: translate(-50%,-50%); transition: transform .2s ease-out;}
#sec04 .map img{display: block; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; object-fit:cover; transform: translate(-50%,-50%);}
#sec04 .map i{display: none; position: absolute; left:calc(778 / 2100 * 100%); top:calc(655 / 1200 * 100%); width: 2rem; height: 2rem; background-color: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.20); box-shadow: 0 0 2rem rgba(168, 166, 255, 0.20); border-radius: 50%; transform-box: fill-box; }
#sec04 .inner{position: relative; z-index: 1; padding-top: 11rem;}
#sec04 .inner .t em{display: block; color: rgba(255, 255, 255, 0.80); font-size: 2.2rem; font-family: "Pretendard"; line-height: 1.2; font-weight: 400; letter-spacing: 0.77rem;}
#sec04 .inner .t strong{display: block; margin-top: 1.2rem; font-size: 6.8rem; font-weight: 300; letter-spacing: -0.068rem; line-height: 1.2; color: #fff;}
#sec04 .inner .t strong b{font-weight: 700; text-transform: uppercase;}
#sec04 .inner .t strong span{display: block; font-weight: 200; letter-spacing: 0.5rem;}
#sec04 .inner .t strong span i{color: #D4000F;}
#sec04 .inc{display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6rem; position: relative; margin-top: 27.6rem;}
#sec04 .inc li{min-width: 25rem;}
#sec04 .inc li strong{color: #FFF; font-size: 2.4rem; font-weight: 400; line-height: 1.5; font-weight: 300;}
#sec04 .inc li p{width: 100%; margin-top: 2.4rem; text-align: left; color: #fff; font-size: 14rem; line-height: 0.8; font-weight: 600;}
#sec04 .inc li p:after{content: "+"; font-size: 8.5rem; font-weight: 500;}
#sec04 .ban{display: block; width: 100%; position: absolute; left: 0; bottom: 6rem; text-indent: -9999px;}
#sec04 .ban:after{
    content: ""; display: block; width: 100%; height: 6rem; background: url(../../../img/site/kor/main/img31.svg) 0 100% repeat-x; background-size: auto 100%;
    animation: marquee 150s linear infinite;
}

@keyframes marquee{
    0%{background-position: 0 100%;}
    100%{background-position: 1000% 100%;}
}
/*
@keyframes ani_sec04_02{
    0%,20%{transform: scale(1);}
    80%{transform: scale(3);}
    81%,100%{opacity: 0; transform: scale(3);}
}
*/

@media screen and (min-width:1921px){
    #sec04 .map i{transform: translate(0.15rem,0.15rem);}
    @keyframes ani_sec04_02{
        0%,20%{transform: translate(0.15rem,0.15rem) scale(1);}
        80%{transform: translate(0.15rem,0.15rem) scale(3);}
        81%,100%{opacity: 0; transform: translate(0.15rem,0.15rem) scale(3);}
    }
}
@media screen and (max-width:1750px){
    #sec04 .map img{width: 110%; object-fit: contain;}
}
@media screen and (max-width:1440px){
    #sec04{height: auto;}
    #sec04:before{height: 20rem;}
    #sec04 .map{height: calc(100% + 50px)}
    #sec04 .inner .t em{font-size: 1.8rem; letter-spacing: 0.77rem;}
    #sec04 .inner .t strong{margin-top: 1rem; font-size: 6rem; letter-spacing: -0.068rem;}
    #sec04 .inner .t strong span{letter-spacing: 0.4rem;}
    #sec04 .inner{padding-top: 8rem; padding-bottom: 14rem;}
    #sec04 .inc{margin-top: 20rem;}
    #sec04 .inc{gap: 5rem;}
    #sec04 .inc li{min-width: 19rem;}
    #sec04 .inc li strong{font-size: 2rem;}
    #sec04 .inc li p{font-size: 10rem;}
    #sec04 .inc li p:after{font-size: 6.8rem;}
    #sec04 .ban{bottom: 4rem;}
    #sec04 .ban:after{height: 4.5rem;}
}
@media screen and (max-width:1024px){
    #sec04 .map{width: 100%; height: 100%;}
    #sec04 .map i{transform: translate(-0.5rem,-0.5rem);}
    #sec04 .inner{padding-bottom: 11rem;}
    #sec04 .inner .t em{font-size: 1.6rem; letter-spacing: 0.5rem;}
    #sec04 .inner .t strong{margin-top: 1rem; font-size: 5.4rem; letter-spacing: 0rem;}
    #sec04 .inner .t strong span{letter-spacing: 0.4rem;}
    #sec04 .inc{gap: 4rem;}
    #sec04 .inc li{min-width: 18rem;}
    #sec04 .inc li strong{font-size: 1.8rem;}
    #sec04 .inc li p{margin-top: 1.8rem; font-size: 8rem;}
    #sec04 .inc li p:after{font-size: 5.4rem;}
    #sec04 .ban{bottom: 3rem;}
    #sec04 .ban:after{height: 4rem;}
    /*
    @keyframes ani_sec04_02{
        0%,20%{transform: translate(-0.5rem,-0.5rem) scale(1);}
        80%{transform: translate(-0.5rem,-0.5rem) scale(3);}
        81%,100%{opacity: 0; transform: translate(-0.5rem,-0.5rem) scale(3);}
    }
    */
}
@media screen and (max-width:640px){
    #sec04 .map img{object-position: center 60%;}
    #sec04 .inner{padding-top: 5rem;}
    #sec04 .inner .t em{font-size: 1.5rem;}
    #sec04 .inner .t strong{margin-top: 1rem; font-size: 5rem;}
    #sec04 .inc{gap: 2rem;}
    #sec04 .inc li{min-width: 17rem;}
    #sec04 .inc li strong{font-size: 1.8rem;}
    #sec04 .inc li p{font-size: 7rem; text-align: left;}
    #sec04 .inc li p:after{font-size: 4.4rem;}
}
@media screen and (max-width:480px){
    #sec04 .inner .t em{font-size: 1.3rem;}
    #sec04 .inner .t strong{margin-top: 0.8rem; font-size: 4rem;}
    #sec04 .inner .t strong span{letter-spacing: 0.3rem;}
    #sec04 .inc li{min-width: 17rem;}
    #sec04 .inc li strong{font-size: 1.6rem;}
    #sec04 .inc li p{margin-top: 1.6rem; font-size: 6rem;}
    #sec04 .inc li p:after{font-size: 4rem;}
}

/*-------------------------------------------------------------------
    sec05
-------------------------------------------------------------------*/
#sec05{padding: 10rem 0; background-color: #fff;}
#sec05 .inner{display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; gap: 3rem; max-width: calc(1680px + 4rem);}
#sec05 .inner li{opacity: 0; display: flex; flex-wrap: wrap; justify-content: flex-start; align-content: flex-start; align-items: stretch; gap: 2rem; width: 100%;}
#sec05 .inner li .tit{display: block; flex: 1; color: #D4000F; font-size: 2.2rem; font-weight: 600; line-height: 1.4; text-transform: uppercase;}
#sec05 .inner li .more{display: block; position: relative; width: 3.2rem; height: 3.2rem; text-indent: -9999px; transform: rotate(0); transition: transform 0.2s linear;}
#sec05 .inner li .more:hover{transform: rotate(180deg);}
#sec05 .inner li .more:before{content: ""; display: block; position: absolute; top: 50%; left: 50%; width: 68.75%; height: 2px; background-color: #151515; transform: translate(-50%,-50%);}
#sec05 .inner li .more:after{content: ""; display: block; position: absolute; top: 50%; left: 50%; width: 68.75%; height: 2px; background-color: #151515; transform: translate(-50%,-50%) rotate(90deg);}
#sec05 .inner li .desc{display: block; width: 100%; font-family: "Pretendard"; font-weight: 500; line-height: 1.4;}
#sec05 .inner li .desc .imgs{overflow: hidden; display: block; position: relative; width: 100%; height: 0; padding-top: 61.25%; border: 1px solid #eee;}
#sec05 .inner li .desc .imgs img{display: block; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; object-fit: cover; object-position: top center; transform: translate(-50%,-50%); transition: all 0.2s linear;}
#sec05 .inner li .desc:hover .imgs img{width: 110%; height: 110%;}
#sec05 .inner li .desc .tags{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; gap: 0.8rem; margin-top: 2rem;}
#sec05 .inner li .desc .tags span{display: block; padding: 0.6rem 1.2rem; color: #353535; font-size: 1.5rem; border: 1px solid #353535; border-radius: 10rem;}
#sec05 .inner li .desc strong{overflow: hidden; display: block; display: -webkit-box; margin-top: 1.2rem; color: #2D2D2D; font-size: 2rem; font-weight: 500; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2;}

#sec05[data-steps="3"] .inner li,
#sec05[data-steps="4"] .inner li,
#sec05[data-steps="5"] .inner li,
#sec05[data-steps="6"] .inner li,
#sec05[data-steps="7"] .inner li,
#sec05[data-steps="8"] .inner li,
#sec05[data-steps="9"] .inner li,
#sec05[data-steps="10"] .inner li{animation-name: ani_up; animation-duration: 0.3s; animation-timing-function: linear; animation-fill-mode: both;}
#sec05 .inner li:nth-child(2){animation-delay: 0.08s;}
#sec05 .inner li:nth-child(3){animation-delay: 0.16s;}

@keyframes ani04{
    0%{opacity: 0; transform: translateY(50rem);}
    30%{opacity: 1;}
    100%{opacity: 1; transform: translateY(0);}
}

@media screen and (max-width:1440px){
    #sec05{padding: 6rem 0 9rem;}
    #sec05 .inner{gap: 2.5rem;}
}
@media screen and (max-width:1024px){
    #sec05{padding: 5rem 0 7rem;}
    #sec05 .inner{gap: 2rem;}
    #sec05 .inner li{gap: 1.25rem;}
    #sec05 .inner li .more{width: 3rem; height: 3rem;}
    #sec05 .inner li .desc .tags{margin-top: 1.5rem;}
    #sec05 .inner li .desc .tags span{padding: 0.5rem 1.2rem; font-size: 1.4rem;}
    #sec05 .inner li .desc strong{margin-top: 0.8rem; font-size: 1.9rem;}
}
@media screen and (max-width:840px){
    #sec05{padding: 5rem 0;}
    #sec05 .inner{gap: 1.5rem;}
    #sec05 .inner li{gap: 1rem;}
    #sec05 .inner li .more{width: 2.8rem; height: 2.8rem;}
    #sec05 .inner li .desc .tags{margin-top: 1.2rem;}
    #sec05 .inner li .desc .tags span{padding: 0.4rem 1rem; font-size: 1.3rem;}
    #sec05 .inner li .desc strong{margin-top: 0.6rem; font-size: 1.7rem;}
}
@media screen and (max-width:640px){
    #sec05{padding: 4rem 0 6rem;}
    #sec05 .inner{flex-wrap: wrap; gap: 3rem;}
    #sec05 .inner li .tit{font-size: 2.4rem;}
    #sec05 .inner li .desc .tags{margin-top: 1.5rem;}
    #sec05 .inner li .desc .tags span{padding: 0.5rem 1.2rem; font-size: 1.4rem;}
    #sec05 .inner li .desc strong{margin-top: 0.8rem; font-size: 1.9rem;}
    #sec05[data-steps="1"] .inner li,
    #sec05[data-steps="2"] .inner li,
    #sec05[data-steps="3"] .inner li{animation-name: ani_up; animation-duration: 0.3s; animation-timing-function: linear; animation-fill-mode: both;}
}