/* InterVariable */
@font-face {font-family: InterVariable; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/font/InterVariable.woff2") format("woff2");}
@font-face {font-family: InterVariable; font-style: italic; font-weight: 100 900; font-display: swap; src: url("/font/InterVariable-Italic.woff2") format("woff2");}
/* Outfit */
@font-face {font-family: 'Outfit'; font-weight: 100; font-style: normal; src: url('/font/Outfit-Thin.woff2') format('woff2');}
@font-face {font-family: 'Outfit'; font-weight: 200; font-style: normal; src: url('/font/Outfit-ExtraLight.woff2') format('woff2');}
@font-face {font-family: 'Outfit'; font-weight: 300; font-style: normal; src: url('/font/Outfit-Light.woff2') format('woff2');}
@font-face {font-family: 'Outfit'; font-weight: 400; font-style: normal; src: url('/font/Outfit-Regular.woff2') format('woff2');}
@font-face {font-family: 'Outfit'; font-weight: 500; font-style: normal; src: url('/font/Outfit-Medium.woff2') format('woff2');}
@font-face {font-family: 'Outfit'; font-weight: 600; font-style: normal; src: url('/font/Outfit-SemiBold.woff2') format('woff2');}
@font-face {font-family: 'Outfit'; font-weight: 700; font-style: normal; src: url('/font/Outfit-Bold.woff2') format('woff2');}
@font-face {font-family: 'Outfit'; font-weight: 800; font-style: normal; src: url('/font/Outfit-ExtraBold.woff2') format('woff2');}
@font-face {font-family: 'Outfit'; font-weight: 900; font-style: normal; src: url('/font/Outfit-Black.woff2') format('woff2');}
/* Pretendard */
@font-face {font-family: 'Pretendard'; font-weight: 100; font-style: normal; src: url('/font/Pretendard-Thin.woff') format('woff');}
@font-face {font-family: 'Pretendard'; font-weight: 200; font-style: normal; src: url('/font/Pretendard-ExtraLight.woff') format('woff');}
@font-face {font-family: 'Pretendard'; font-weight: 300; font-style: normal; src: url('/font/Pretendard-Light.woff') format('woff');}
@font-face {font-family: 'Pretendard'; font-weight: 400; font-style: normal; src: url('/font/Pretendard-Regular.woff') format('woff');}
@font-face {font-family: 'Pretendard'; font-weight: 500; font-style: normal; src: url('/font/Pretendard-Medium.woff') format('woff');}
@font-face {font-family: 'Pretendard'; font-weight: 600; font-style: normal; src: url('/font/Pretendard-SemiBold.woff') format('woff');}
@font-face {font-family: 'Pretendard'; font-weight: 700; font-style: normal; src: url('/font/Pretendard-Bold.woff') format('woff');}
@font-face {font-family: 'Pretendard'; font-weight: 800; font-style: normal; src: url('/font/Pretendard-ExtraBold.woff') format('woff');}
@font-face {font-family: 'Pretendard'; font-weight: 900; font-style: normal; src: url('/font/Pretendard-Black.woff') format('woff');}

/* 공통 */
:root{
	--main-color : #3EB8DD;
	--font-inter : 'InterVariable', sans-serif;
    --font-out: 'Outfit', sans-serif;
}
body {/* max-width: 1920px; width: 100%; margin: 0 auto; */ -ms-overflow-style: none; /* overflow: revert; */}
body::-webkit-scrollbar {display: none;}
body * {font-family: 'Pretendard', sans-serif;}

p, dd{word-break:keep-all;}
.pc{display:block !important;}
.mob{display:none !important;}
.inner{width: 100%; max-width:87.5rem; margin:0 auto;}
.inner1600{width: 100%; max-width:100rem; margin:0 auto;}
.ta-l {text-align: left;}
.ta-c {text-align: center;}
.ta-r {text-align: right;}
.flex {display: flex; align-items: center;}
.flex-jb {display: flex; align-items: center; justify-content: space-between;}
.flex-jc {display: flex; align-items: center; justify-content: center;}
.flex-je {display: flex; align-items: center; justify-content: flex-end;}

/* .main {max-width: 1920px; width: 100%; margin: 0 auto;} */
/* intro */
.intro {position: fixed; left: 50%; top: 0; background: #000; transform: translateX(-50%); width: 100%; height: 100dvh; z-index: 1; display: flex; flex-direction: column; justify-content: center; text-align: center; /* max-width: 1920px; */}
.intro .text-mask {overflow: hidden; height: 9.25rem; position: absolute; width: calc(100% - (3.625rem*2)); left: 50%; transform: translateX(-50%);}
.intro .text {position: absolute; left: 0; top: 50%; transform: translateY(-50%); text-align: center; color: #FFF; font-size: 10.3125rem; line-height: 9.25rem; font-weight: 800; white-space: nowrap; width: 100%;}
.intro .top-text {text-align: left;}
.intro .bottom-text {text-align: right;}

/* header */
.main > #header {opacity: 0;}
@media screen and (min-width:1025px){
    .main > #header {display: none;}
}
#header {width: 100%; height: 5.625rem; position: fixed; z-index: 100; top: 0; /* max-width: 1920px; */}
#header .in {padding: 0 3.125rem; display: flex; align-items: center; justify-content: space-between; position: relative; height: 100%; transition: all .35s;}
#header .logo img {width: 11.22819rem; transition: all .3s; filter: invert(1);}
#header .gnb {display: flex; align-items: center;}
#header .gnb > li {position:relative;padding: 0 calc(8.75rem/2); height: 5.625rem; display: flex; align-items: center;}
#header .gnb > li > a {font-size: 1.125rem; font-weight: 600; font-family: var(--font-pop); color: #000; display: block;}
#header .gnb_2depth_bg {position:absolute; width:100%; height: 100%; background: #fff; top: 5.625rem; left:0; overflow: hidden; opacity: 0; visibility: hidden; transition-property: padding, opacity, visibility; transition-timing-function: ease; transition-duration: .35s; border-top: 1px solid #E3E3E3;}
#header .gnb_2depth{position:absolute; top: 100%; left: calc(8.75rem/2); min-width: max-content; visibility: hidden; opacity: 0; padding: 2rem 0 3rem; transition: all .3s .1s;}
#header .gnb_2depth li + li{margin-top:.5rem;}
#header .gnb_2depth li a{color: #6D6D6D; font-size: 1rem; font-weight: 400; line-height: 150%;}
#header .gnb_2depth li a:hover{color: #000; text-decoration: underline; text-underline-offset: .2rem;}
#header .gnb > li:hover .gnb_2depth {visibility: visible; opacity: 1;}
#header .allMenu {width: 1.5rem; aspect-ratio: 1/1; cursor: pointer; position: relative; transition: all .3s; filter: invert(1);}
#header .allMenu img {width: 100%;}
#header .allMenu span:first-child {width: 1.03125rem; top: .5rem;}
#header .allMenu span:last-child {width: 0.625rem; bottom: .53rem;}
#header.wh {background: none; transition-timing-function: ease;}
#header.wh .allMenu,
#header.wh .logo img {filter: invert(0);}
#header.wh .gnb_wrap .gnb > li > a {color: #FFF; height: 100%; display: flex; align-items: center; justify-content: center;}
#header.fixed,
#header.on{background: #FFF;}
#header.on .allMenu,
#header.on:not(.fixed) .logo img{filter: invert(1);}
/* 스크롤/호버 시 ft_logo(파란색) 사용 — invert 하지 않음 */
#header.fixed .logo img,
#header.on .logo img[src*="ft_logo"],
#header .logo img[src*="ft_logo"]{filter: none;}
#header.fixed .gnb_wrap .gnb > li > a,
#header.on .gnb_wrap .gnb > li > a {color: #000;}

#header.on2 .gnb_2depth_bg {border-bottom: 1px solid #E3E3E3; visibility: visible; opacity: 1;}

#header .gnb > li:hover .gnb_2depth {visibility: visible; opacity: 1;}

/* hd_allMenu */
.hd_allMenu {position: fixed; top: 0; left: 50%; width: 100%; height: 100dvh; z-index: -1; opacity: 0; transition: all 0s 1.2s; /* max-width: 1920px; */ transform: translateX(-50%);}
.hd_allMenu::after {content: ""; position: absolute; top: 0; right: 0; width: 0%; height: 100%; background: #FFF; transition: 1.0s cubic-bezier(.641,.005,.095,1.05); z-index: -1;}
.hd_allMenu .in {display: flex; align-items: center; justify-content: center; width: 100%; max-width: 87.5rem; margin: 0 auto; height: 100%;}
.hd_allMenu .in h2 {color: #000; font-family: var(--font-out); font-size: 2.8125rem; font-weight: 700; line-height: 115%; opacity: 0; transition: all 0.5s 0s;}
.hd_allMenu .in .close {position: absolute; top: 3.13rem; right: 4.69rem; cursor: pointer; filter: invert(1); opacity: 0; transition: all 0.5s 0s;}
.hd_allMenu .in .close img {width: 3.125rem;}
.hd_allMenu .cont {width: 100%;}
.hd_allMenu .cont ul {margin-top: 5.37rem;}
.hd_allMenu .cont ul > li {display: flex; align-items: center; padding: 3rem 0; border-bottom: 1px solid rgba(0, 0, 0, 0.20); opacity: 0; transition: all 0.5s 0s;}
.hd_allMenu .cont ul > li:first-child {padding-top: 0;}
.hd_allMenu .cont ul > li .tit {color: #000; font-family: var(--font-out); font-size: 2rem; font-weight: 600; line-height: 125%; width: 15.63rem;}
.hd_allMenu .cont ol {display: flex; align-items: center; gap: 4.88rem;}
.hd_allMenu .cont ol a {color: #8E8E8E; font-size: 1.375rem; font-weight: 700; line-height: 127.273%; opacity: 0.6; transition: all .3s;}
.hd_allMenu .cont ol a:hover {color: #000; opacity: 1; text-decoration: underline; text-underline-offset: .3rem;}
.hd_allMenu.on {opacity: 1; z-index: 990; transition: 0s;}
.hd_allMenu.on:after {width: 100%; transition: 1.0s cubic-bezier(.41, .005, .095, 0.95);}
.hd_allMenu.on .in h2 {opacity: 1; transition: all 0.3s 0.0s, opacity 0.6s 0.4s;}
.hd_allMenu.on .in .close{opacity: 1;}
.hd_allMenu.on .cont ul > li {opacity: 1;}
.hd_allMenu.on .cont ul > li:nth-child(1) {transition: all 0.3s 0.0s, opacity 0.6s 0.55s;}
.hd_allMenu.on .cont ul > li:nth-child(2) {transition: all 0.3s 0.0s, opacity 0.6s 0.7s;}
.hd_allMenu.on .cont ul > li:nth-child(3) {transition: all 0.3s 0.0s, opacity 0.6s 0.85s;}
.hd_allMenu.on .cont ul > li:nth-child(4) {transition: all 0.3s 0.0s, opacity 0.6s 0.9s;}
.head_bg {display: none;}

/* secTitle */
.secTitle {display: flex; align-items: center; justify-content: space-between; padding: 0 2.5rem; position: relative;}
.secTitle * {font-size: 1.5rem; line-height: 133%;}
.secTitle .left {font-family: var(--font-inter); letter-spacing: -0.01563rem;}
.secTitle span {color: #8E8E8E; font-family: var(--font-inter); font-weight: 700; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}

/* visual */
.intro-spacer {height: 100vh;}
/* .main {overflow-x: hidden;} */
.main .wrapper{position: relative; z-index: 5; /* max-width: 1920px; */ background: #FFF; transform-origin: center top;}
.visual{height:100vh; position: relative; overflow: hidden;}
.visual .video{/* clip-path: inset(14.5rem 38.625rem 0);  */width: 100%; height: 100%; /* will-change: clip-path; */ overflow: hidden;}
.visual .video video{width: 100%; height: 100%; overflow: hidden; position: relative;}
.visual .video iframe{width: 101vw; height: 130vw; object-fit: cover; pointer-events: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.visual .logo{width: 21.25rem; position: absolute; right: 4.375rem; bottom: 3.3rem; z-index: 2; transition: all 0.3s;}
.visual .logo img{width: 100%;}
@media screen and (min-width:1921px){
    .visual .video iframe {width: 100vw; height: 165vw;}
}

/* sec1 */
.sec1{padding: 6.81rem 0 6.25rem; /* height: 822vh; */ height: 1000vh; position: relative;}
.sec1 .canvas {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;}
.sec1 .canvas::after {content:""; position: absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity: .6; z-index: 1;}
.sec1 .canvas .sticky {position: sticky; top: 47%; left: 0; pointer-events: none; transform: translateY(-50%); width: 100%; /* height: 100%; */ overflow: hidden; display: flex; align-items: center; justify-content: center;}
.sec1 .canvas iframe {width: 102vw; height: 100vw; transform: scale(1.2);}
.sec1 .bg_wrap {position: absolute; top: 109.89vw; /* top: 127.12rem; */ left: 0; right: 0; width: 100%; height: 100vh; overflow: hidden;}
.sec1 .bg{width: 100%; height: 100%;}
.sec1 .bg .img{width: 18.75006rem; height: 24.37519rem; background: url(/img/main_v2/sec1_img05.jpg) no-repeat center / cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); transform-origin: center center; will-change: width, height; transition: background-image 0.3s;}
.sec1 .sticky_txt{display: flex; align-items: flex-start; justify-content: center; gap: 1.75rem; position: sticky; top: calc(50% - 4.25rem); margin-top: 4.25rem;}
.sec1 .sticky_txt .tit{font-size: 6.25rem; font-weight: 600; line-height: 1.46;}
.sec1 .sticky_txt span{font-size: 3.5625rem; line-height: 1.54;}
.sec1 .cont{height: 100dvh; position: absolute; /* margin-top: -12rem; */ /* margin-top: 10.00vw; */ top: 0; overflow: hidden; left: 50%;}
.sec1 .cont .line_wrap{display: flex; align-items: center; justify-content: space-between; gap: 2.625rem; font-size: 1.5rem; letter-spacing: -0.01563rem; color: #FFF; padding: 0 2.5rem; position: absolute; top: 28.81rem; left: 0; width: 100%;}
.sec1 .cont .line_wrap span{font-weight: 700;}
.sec1 .cont .line_wrap strong{font-weight: 800;}
.sec1 .cont .line_wrap .line{max-width: 81.25rem; flex: 1; background: rgba(255, 255, 255, 0.40); height: 1px;}
.sec1 .cont .tit_wrap{position: absolute; top: 15.31rem; left: 15.625rem; display: flex; align-items: flex-start; gap: 15.625rem; width: max-content; color: #FFF;}
.sec1 .cont .tit_wrap .tit{opacity: 0.3; transition: opacity 0.3s;}
.sec1 .cont .tit_wrap .tit.on{opacity: 1;}
.sec1 .cont .tit_wrap .tit p{font-size: 1.75rem; font-weight: 600; line-height: 129%;} 
.sec1 .cont .tit_wrap .tit strong{margin-top: 0.5rem; font-size: 5rem; letter-spacing: -0.01563rem; font-weight: 800; line-height: 108%;}
.sec1 .cont .txt_wrap{position: absolute; top: 34.19rem; /* right: 15rem; */ /* width: 32.5rem; */ left: 0; width: 100%;}
.sec1 .cont .txt_wrap .txt{position: absolute; left: 50%; transform: translateX(-50%); top: 0; opacity: 0; width: 100%; text-align: right;}
.sec1 .cont .txt_wrap .txt.on{opacity: 1;}
.sec1 .cont .txt_wrap .txt > div {text-align: left;}
.sec1 .cont .txt_wrap .txt .pc {display: inline-block !important;}
.sec1 .cont .txt_wrap .txt .line{height: 1.8125rem; overflow: hidden;}
.sec1 .cont .txt_wrap .txt .line p{font-size: 1.25rem; line-height: 145%; color: #FFF; will-change: transform;}
.sec1 .list .listCont {display: flex;}
.sec1 .list .listCont + .listCont {padding-top: 5.53rem;}
.sec1 .list .listCont ul {width: calc(100%/3); font-size: 0;}
.sec1 .list .listCont li {width: fit-content; display: inline-block; /* min-width: max-content; */ position: relative; z-index: 3; cursor: pointer;}
.sec1 .list .listCont li .box {overflow: hidden; display: block; /* will-change: transform; */ transform: translate(0, 0); transition: transform .3s cubic-bezier(.22, 1, .36, 1); width: 100%; height: 100%; /* transition-duration: 7s; */}
.sec1 .list .listCont li img {transform-origin: center; transition-duration: .6s, .8s !important; transition-property: opacity, transform !important; transition-timing-function: cubic-bezier(.39, .575, .565, 1), cubic-bezier(.165, .84, .44, 1) !important;}
.sec1 .list .listCont li img.hover {position: absolute; top: 0; left: 0; opacity: 0;}
@media screen and (min-width:1025px){
    .sec1 .list .listCont li:hover img.hover {opacity: 1;}
    .sec1 .list .listCont li:hover img.thumb {opacity: 0;}
    .sec1 .list .listCont li:hover img {transform: scale(1.05);}
}
.sec1 .list .listCont li .popupImg {display: none;}
.sec1 .list .listCont li p {font-size: 1.5rem; font-weight: 600; line-height: 133%; padding: 0 1.25rem 1.25rem; text-align: left; position: absolute; left: 0; bottom: 0; width: 100%; z-index: 2; color: #fff; text-align: center;}
.sec1 .list .listCont .right {text-align: right;}
.sec1 .list .listCont .left li:nth-child(1) {margin-top: 10.99vw; width: 25.36vw;}
.sec1 .list .listCont .left li:nth-child(2) {margin-top: 15.27vw; margin-left: 10.52vw; width: 22.92vw;}
.sec1 .list .listCont .left li:nth-child(3) {margin-top: 7.66vw; width: 25.36vw;}
.sec1 .list .listCont .center li:nth-child(1) {margin-left: 1.20vw; width: 22.81vw;}
.sec1 .list .listCont .center li:nth-child(2) {margin-top: 13.96vw; margin-left: 9.19vw; width: 30.78vw;}
.sec1 .list .listCont .center li:nth-child(3) {margin-top: 5.78vw; margin-left: 9.19vw; width: 22.92vw;}
.sec1 .list .listCont .center li:nth-child(4) {margin-top: 13.64vw; margin-left: 1.20vw; width: 30.73vw;}
.sec1 .list .listCont .right li:nth-child(1) {margin-top: 7.40vw; margin-right: 2.61vw; width: 26.56vw;}
.sec1 .list .listCont .right li:nth-child(2) {margin-top: 5.11vw; width: 17.34vw;}
.sec1 .list .listCont .right li:nth-child(3) {margin-top: 33.26vw; margin-right: -0.05vw; width: 25.36vw;}
.popupWrap {position: fixed; top: 0; left: 0; width: 100%; height: 100dvh; background-color: rgba(0, 0, 0, 0.8); z-index: 1000; display: none;}
.popupWrap .close {position: absolute; top: 1.75rem; right: 1.75rem;}
.popupWrap .close img {cursor: pointer; width: 1.5rem;}
.popupWrap .popInner {width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center;}
.popupWrap .popInner .cont img {max-height: 41.97325rem;}
.popupWrap .popInner .cont p {margin-top: 1.25rem; text-align: center; color: #FFF; font-size: 1.5rem; font-weight: 600; line-height: 133%;}


/* sec2 */
.sec2 {padding: 6.25rem 0; text-align: center; overflow: hidden; background: #fff;}
.sec2 .scrollCont {margin-top: 10rem;}
.sec2 .scrollCont .cont + .cont {margin-top: 11.25rem;}
.sec2 .scrollCont .title > p {font-size: 2rem; font-weight: 600; line-height: 125%; transform: translateY(50px); opacity: 0; transition: all .5s ease; word-break: keep-all;}
.sec2 .scrollCont .ani_tit {margin-top: .5rem; display: flex; align-items: center; justify-content: center; gap: 1.25rem; width: 100%; transform: translateY(50px); opacity: 0; transition: all .5s ease;}
.sec2 .scrollCont .title.active > p,
.sec2 .scrollCont .title.active .ani_tit {transform: translateY(0); opacity: 1;}
.sec2 .scrollCont .ani_tit div {font-size: 4.375rem; font-weight: 800; line-height: 112%; min-width: fit-content;}
.sec2 .scrollCont .ani_tit .center {font-family: var(--font-inter);}
.sec2 .scrollCont .ani_tit .ani {width: 100%; height: 4.875rem; position: relative;}
.sec2 .scrollCont .ani_tit .ani span {position: absolute; top: 50%; transform: translateY(-50%); line-height: 1;}
.sec2 .scrollCont .ani_tit .ani.left span {right: 0;}
.sec2 .scrollCont .ani_tit .ani.right span {left: 0;}
.sec2 .scrollCont .ani_hide {overflow: hidden;}
.sec2 .scrollCont .ah_info {margin-top: 1.25rem;}
.sec2 .scrollCont .ah_info p {font-size: 1.25rem; font-weight: 400; line-height: 145%; transform: translateY(100%); transition: all .3s ease; transition-delay: .2s;}
.sec2 .scrollCont .ah_a {margin-top: 2rem;}
.sec2 .scrollCont .ah_a a {padding-bottom: .25rem; border-bottom: 1px solid #000; display: inline-flex; align-items: center; justify-content: center; gap: 0.25rem; font-family: var(--font-inter); font-size: 1.125rem; font-weight: 500; line-height: 150%; transform: translateY(100%); transition: all .3s ease; transition-delay: .2s;}
.sec2 .scrollCont .ah_a a img {width: 1.60713rem;}
.sec2 .scrollCont .ani_hide.active p,
.sec2 .scrollCont .ani_hide.active a {transform: translateY(0);}
.sec2 .scrollCont .img {margin: 4.125rem auto 0; overflow: hidden; width: 100%; height: 38.75rem;}
.sec2 .scrollCont .img img {width: 100%; height: 100%; object-fit: cover; object-position: center;}


/* sec3 */
.sec3 {overflow: hidden; background: #fff;}
.sec3 .scrollCont {position: relative;}
.sec3 .sticky {position: sticky; top: 0; width: 100%; height: 100svh; display: flex; align-items: center; justify-content: center; text-align: center;}
.sec3 .sticky h2 {font-family: var(--font-inter); font-size: 6.25rem; font-weight: 600; line-height: 100%; letter-spacing: -0.01563rem;}
.sec3 .sticky strong {display: block; margin-top: 3.75rem; font-size: 2.25rem; font-weight: 700; line-height: 122%;}
.sec3 .sticky p {margin-top: 1.75rem; font-size: 1.25rem; font-weight: 400; line-height: 145%; word-break: keep-all;}
.sec3 .scrollList {position: relative; z-index: 5; height: 100svh; display: flex; align-items: center; overflow: hidden; will-change: transform;}
.sec3 .scrollList ul {display: flex; align-items: center; gap: 1.875rem; white-space: nowrap; padding: 0 2.5rem; box-sizing: border-box; width: max-content}
.sec3 .scrollList ul li {width: 25rem;}
.sec3 .scrollList ul li a{display: block;}
.sec3 .scrollList ul li img {width: 100%;}

/* footer */
.footer {background: #404040; padding: 3.12rem;}
.footer .flex-jb {display: flex; justify-content: space-between;}
.footer .logo {width: 15.625rem;}
.footer .sns {display: flex; align-items: center; gap: 0.25rem; margin-top: 2.14rem; opacity: 0.4;}
.footer .sns img {width: 1.875rem;}
.footer .top .right p {color: #FFF; font-size: 1.125rem; font-weight: 600; line-height: 150%;}
.footer .top .right p + p {margin-top: 0.25rem;}
.footer .bot {margin-top: 3.19rem;}
.footer .copy {color: #FFF; font-size: 0.875rem; font-weight: 400; line-height: 143%;}
.footer .use {display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem;}
.footer .use a {color: #FFF; font-size: 0.875rem; font-weight: 400; line-height: 143%; opacity: 0.6;}


@media screen and (max-width:1825px){
    .intro .text {font-size: 8.59vw;}
}
@media screen and (max-width:1640px){
    .inner1600{max-width:87.5rem;}
}
@media screen and (max-width:1440px){
    html {font-size: 80%;}
    .inner1600 {max-width:100%; padding-left: 3.125rem; padding-right: 3.125rem;}

    /* .inner {max-width: calc(100% - (2rem * 2));} */
}
@media screen and (max-width:1400px){
    .visual .video iframe {width: 115vw;}
    .sec1 .cont .tit_wrap {left: 2.5rem;}
}
@media screen and (max-width:1280px){
    .hd_allMenu .in .close {right: 3.125rem;}
    .hd_allMenu .in {max-width: 100%; padding: 0 3.125rem;}
    .sec1 .list .listCont li p {font-size: 1.25rem;}
}
@media screen and (max-width:1240px){
    .visual .video iframe {width: 139vw;}
}
@media screen and (max-width:1130px){
    .sec1 .cont .tit_wrap {left: 3.125rem;}
    .sec1 .cont .line_wrap,
    .sec1 .cont .txt_wrap .txt {padding: 0 3.125rem;}
}
@media screen and (max-width:1024px){
    html {font-size: 100%;}

    /* 공통 */
    .inner1600,
    .inner {max-width:100%; padding-left: 1.25rem; padding-right: 1.25rem;}
    .pc{display:none !important;}
    .mob{display:block !important;}


    /* intro */
    .intro .text-mask {height: 9.5625rem; width: 100%;}
    .intro .text {font-size: 4.375rem; line-height: .9; /* font-size: 18.23vw; */}
    .intro .top-text {top: 1.7rem;}
    .intro .bottom-text {top: auto; bottom: -2.2rem;}

    /* header */
    .main > #header {transition-timing-function: ease;}
    .wrapper #header:not(.wh) {background: #fff;}
    #header {height: 4.375rem;}
    #header .in {padding: 0 1.25rem;}
    #header .logo img {width: 8.98256rem;}
    #header .gnb_wrap {display: none;}
    #header .allMenu {width: 1.5rem;}
    #header .allMenu.mob {display: flex !important; align-items: center; justify-content: center;}

    /* head_bg */
    .wrapper > .head_bg {display: none !important;}
    .head_bg {display: block; position: fixed; top: 0; left: 50%; width: 100%; height: 100dvh; z-index: -1; opacity: 0; transition: all 0s 1.2s; transform: translateX(-50%);}
    .head_bg::after {content: ""; position: absolute; top: 0; right: 0; width: 0%; height: 100%; background: #FFF; transition: 1.0s cubic-bezier(.641, .005, .095, 1.05); z-index: -1;}
    .head_bg .inner {padding: 1.44rem 1.25rem; opacity: 0; transition: all 0.5s 0s;}    
    .head_bg.on {opacity: 1; z-index: 990; transition: 0s;}
    .head_bg.on::after {width: 100%; transition: all 0.5s 0s;}
    .head_bg.on .inner {opacity: 1; transition: all 0.6s 0.4s;}
    .head_bg .head_bg_logo img {width: 8.98256rem;}
    .head_bg .head_bg_close img {width: 1.5rem; filter: invert(1);}
    .head_bg .accordion {margin-top: 3.31rem; border-top: 1px solid rgba(0, 0, 0, 0.20);}
    .head_bg .accordion .link {font-family: var(--font-out); font-size: 0.875rem; font-weight: 600; line-height: 1.33; padding: 1.13rem 0; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(0, 0, 0, 0.20);}
    .head_bg .accordion .link.noChild {padding: 0;}
    .head_bg .accordion .link.noChild a {display: block; width: 100%; padding: 1.13rem 0;}
    .head_bg .accordion .noChild .link::after {content: ""; width: 1.25rem; height: 1.25rem; background: url(/img/main/sideMenu_plus.svg) no-repeat center/cover;}
    .head_bg .accordion .noChild .link.on::after {background-image: url(/img/main/sideMenu_minus.svg);}
    .head_bg .accordion > li:last-child .submenu {border-bottom: 0;}
    .head_bg .accordion .submenu {padding: 1.25rem 0; display: none; border-bottom: 1px solid rgba(0, 0, 0, 0.20);}
    .head_bg .accordion .submenu li + li {margin-top: 0.3125rem;}
    .head_bg .accordion .submenu a {color: #8E8E8E; font-size: 0.875rem; font-weight: 700; line-height: 1.43;}
    .head_bg .accordion .submenu .on a {color: #000; text-decoration: underline; text-underline-offset: .3rem;}

    /* hd_allMenu */
    .hd_allMenu {display: none;}

    /* secTitle */
    .secTitle {padding: 0 2.5rem;}
    .secTitle * {font-size: 1.5rem;}
    .secTitle .left {letter-spacing: -0.01563rem;}

    /* visual */
    .visual {/* height: 37.5rem; */ height: 100dvh;}
    .visual .video iframe {width: 335vw; height: 190vw;}
    .visual .logo{width: 12.90981rem; right: 1.9rem; bottom: 1.87rem;}

    /* sec1 */
    .sec1{padding: 3.75rem 0 6.25rem; height: 700vh}
    .sec1 .canvas .sticky {top: 55%; transform: translateY(-50%); height: 100dvh;}
    .sec1 .canvas iframe {transform: scale(3.5); width: 140vw; height: 120vw;}
    .sec1 .bg_wrap {/* top: 93.5rem; */ top: 376.58vw;}
    .sec1 .bg .img{width: 9.375rem; height: 12.18rem; background-image: url(/img/main_v2/sec1_img05_m.jpg);}
    .sec1 .cont .line_wrap {top: 25.5rem; gap: 1.59rem; font-size: 1.125rem; letter-spacing: 0; padding: 0 1.25rem;}
    .sec1 .cont .line_wrap, 
    .sec1 .cont .txt_wrap .txt {padding: 0 1.25rem; text-align: left;}
    .sec1 .cont .line_wrap .line{ max-width: 100%; width: fit-content;}
    .sec1 .cont .tit_wrap{top: 15.31rem; left: 1.25rem; gap: 1.875rem;}
    .sec1 .cont .tit_wrap .tit {min-width: 18.75rem;}
    .sec1 .cont .tit_wrap .tit p{font-size: 1.25rem;}
    .sec1 .cont .tit_wrap .tit strong{font-size: 2.5rem; letter-spacing: -0.01563rem;}
    .sec1 .cont .txt_wrap{top: 29.05rem; /* left: 1.25rem; */ right: auto; width: calc(100% - 2.5rem);}
    .sec1 .cont .txt_wrap .txt .pc {display: none !important;}
    .sec1 .cont .txt_wrap .txt .mob {display: inline-block !important;}
    .sec1 .cont .txt_wrap .txt .line{height: fit-content;}
    .sec1 .cont .txt_wrap .txt .line p{font-size: 0.875rem;}
    .sec1 .list .listCont {display: grid;}
    .sec1 .list .listCont ul {grid-area: 1 / 1; width: 100%; position: relative;}
    .sec1 .list .listCont li {min-width: auto; position: absolute; margin: 0 !important;}
    .sec1 .list .listCont li p {font-size: 0.8125rem; padding: 0 .35rem .63rem; text-align: center;}
    .sec1 .list .listCont .left li:nth-child(1) {width: 44.27vw; top: 57.29vw; left: 0;}
    .sec1 .list .listCont .left li:nth-child(2) {width: 46.88vw; top: 182.96vw; left: 0;}
    .sec1 .list .listCont .left li:nth-child(3) {width: 41.67vw; top: 278.04vw; left: 0;}
    .sec1 .list .listCont .left li:nth-child(4) {margin-left: 53.13vw;}
    .sec1 .list .listCont .center li:nth-child(1) {width: 46.88vw; top: 0; left: 50%; transform: translateX(-50%);}
    .sec1 .list .listCont .center li:nth-child(2) {width: 52.12vw; top: 106.83vw; right: 10.42vw;}
    .sec1 .list .listCont .center li:nth-child(3) {width: 52.47vw; top: 229.83vw; right: 18.42vw;}
    .sec1 .list .listCont .center li:nth-child(4) {width: 65.15vw; top: 338.79vw; right: 7.75vw;}
    .sec1 .list .listCont .right li:nth-child(1) {width: 44.27vw; top: 46.58vw; right: 0;}
    .sec1 .list .listCont .right li:nth-child(2) {width: 36.46vw; top: 166.38vw; right: 0;}
    .sec1 .list .listCont .right li:nth-child(3) {width: 41.67vw; top: 287.92vw; right: 0;}
    .popupWrap .close {top: 1.25rem; right: 1.25rem;}
    .popupWrap .popInner {padding: 0 1.25rem;}
    .popupWrap .popInner .cont {width: 100%;}
    .popupWrap .popInner .cont img {max-height: none; width: 100%;}
    .popupWrap .popInner .cont p {margin-top: 0.9375rem; font-size: 1rem;}


    /* sec2 */
    .sec2 {padding: 0; background: #fff;}
    .sec2 .scrollCont {margin-top: 3.75rem;}
    .sec2 .scrollCont .cont + .cont {margin-top: 6.88rem;}
    .sec2 .scrollCont .title {padding: 0 1.25rem;}
    .sec2 .scrollCont .title > p {font-size: 1.25rem;}
    .sec2 .scrollCont .ani_tit {margin-top: 0.35rem;}
    .sec2 .scrollCont .ani_tit div {font-size: 2.5rem;}
    .sec2 .scrollCont .ani_tit .ani {height: 4.875rem;}
    .sec2 .scrollCont .ah_info {margin-top: 0.875rem;}
    .sec2 .scrollCont .ah_info p {font-size: 0.875rem;}
    .sec2 .scrollCont .ah_a {margin-top: 1.4rem;}
    .sec2 .scrollCont .ah_a a {padding-bottom: 0.1925rem; gap: 0.1925rem; font-size: 0.875rem;}
    .sec2 .scrollCont .ah_a a img {width: 1.2375rem;}
    .sec2 .scrollCont .img {margin: 2.8875rem auto 0; height: auto; aspect-ratio: 1.652/1;}


    /* sec3 */
    .sec3 .sticky h2 {font-size: 3.4375rem; letter-spacing: -0.01094rem;}
    .sec3 .sticky strong {margin-top: 2rem; font-size: 1.125rem;}
    .sec3 .sticky p {margin-top: 1.225rem; font-size: 0.875rem;}
    .sec3 .sticky .cont {padding: 0 1.25rem;}
    .sec3 .scrollList ul {gap: 1.05rem; padding: 0 1.25rem;}
    .sec3 .scrollList ul li {width: 14rem;}

    /* footer */
    .footer {padding: 3.75rem 1.25rem 3.747rem; max-height: fit-content;}
    .footer .flex-jb {flex-direction: column; align-items: flex-start;}
    .footer .logo {width: 9.375rem;}
    .footer .sns {margin-top: 0;}
    .footer .top {gap: 1.875rem;}
    .footer .top .right p {font-size: 0.875rem;}
    .footer .bot {margin-top: 1.875rem; gap: 1.25rem; flex-direction: column-reverse;}
    .footer .use {flex-wrap: wrap; justify-content: flex-start; gap: .3rem .75rem;}
}

@media screen and (max-width:435px){
    /* intro */
    .intro .text-mask {height: 7rem;}
    .intro .text {font-size: 3rem;}
    .intro .bottom-text {bottom: -1.2rem;}

    /* visual */
    .visual .video iframe {width: 440vw; height: 249vw;}
}