:root {
    --path-length1: 6996;
    --path-length2: 24126;
}

#mainContainer { height: auto; background-color: #1A1A1A;}
.main-visual {background-color: #1A1919;width: 100%; height: 100vh; overflow: hidden;}
.main-visual::after{ content: ''; display: block; width: 100%; height: 100%;}
.main-visual .fixed-wrap { position: fixed; left: 0; top: 0; z-index: 0;  height: 100%; width:100%; }
.main-visual .main-visual-container{ position: relative; width: 100%; height: 100%; max-width: 2560px; margin: 0 auto;}
.main-visual .title { position: absolute; width: 100%; top: 0; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; letter-spacing: -1.6px; text-align: center; color: #fff; z-index: 1;}
.main-visual .title h2 {font-family: var(--kr_font); font-size: 70px; font-style: normal; font-weight: 500; line-height: normal; letter-spacing: -1.4px; opacity: 0;}
.main-visual .title strong { display: block; font-weight: 700; font-size: 90px; letter-spacing: -1.8px; } 
.main-visual .title p{opacity: 0; margin-top: 50px;text-shadow: 0px 0px 30px rgba(0, 0, 0, 0.80);font-size: 18px;font-style: normal;font-weight: 400;line-height: 160%;letter-spacing: -0.09px;}
.main-visual .img{ width: 100%; height:100%; position: relative; z-index: 0;}
.main-visual .img img{object-fit: cover; position: absolute; width: 100%; height: 100%;}
.main-visual .patterns { display: none;}
#mainContainer.fixed .main-visual {opacity: 0;}
#title1 { opacity: 0; transform: translateY(30px);}
#title2 { opacity: 0; transform: translateY(30px); }
.scroll-icon { opacity: 0; transform: translateY(30px); }
[data-cond="load"] #title1 { opacity: 1; transform: translateY(0); transition: all 0.3s ease-out; transition-delay: 2s; }
[data-cond="load"] #title2 { opacity: 1; transform: translateY(0); transition: all 0.3s ease-out;transition-delay: 2.5s;}
[data-cond="load"] .scroll-icon { opacity: 1; transform: translateY(0);transition: all 0.3s ease-out; transition-delay: 3s;}

@keyframes alpha-ani {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes dash-ani1 {
    from {
        stroke-dashoffset: var( --path-length1);
    }
    to {
        stroke-dashoffset: 0;
    }
}
@keyframes dash-ani2 {
    from {
        stroke-dashoffset: var( --path-length2);
    }
    to {
        stroke-dashoffset: 0;
    }
}
/* path 애니메이션 역방향 음수 처리 시 타이밍에 문제 발생 */
@keyframes dash-ani3 {
    from {
        stroke-dashoffset: var( --path-length1);
    }
    to {
        stroke-dashoffset:  var( --path-length1 * 2);
    }
}
[data-cond="load"] .path1 {
    stroke-dasharray: var( --path-length1);
    stroke-dashoffset: var( --path-length1);
    fill: transparent;
    animation: dash-ani1 1.5s;
    animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
    animation-fill-mode: forwards;
    animation-delay: 1s;
    -webkit-animation: dash-ani1 1.5s;
    -webkit-animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-delay: 1s;

}
[data-cond="load"] #pattern1 .path1 {stroke-dasharray: 3482; stroke-dashoffset: 6964; animation: dash-ani3 1.5s;}
[data-cond="load"] .path2 {
    stroke-dasharray: var( --path-length2);
    stroke-dashoffset: var( --path-length2);
    fill: transparent;
    animation: dash-ani2 0.8s;
    animation-fill-mode: forwards;
    animation-delay: 1s;
}
.horizontal-line, .vertical-line{ position: absolute;}
.horizontal-line svg, .vertical-line svg { position: absolute; display: inline-block;  transform-origin: center center;}
[data-cond="load"] .vertical-line::before, 
[data-cond="load"] .vertical-line::after,
[data-cond="load"] .horizontal-line::before, 
[data-cond="load"] .horizontal-line::after {content: ""; display: inline-block; position: absolute; opacity: 0;animation: alpha-ani ease-in-out 0.8s; animation-delay: 1.5s;animation-fill-mode: forwards;}

#pattern0 .horizontal-line{ left: 50%; transform: translateX(-50%); top: 85px; width: 2562px; height: 1739px;}
#pattern0 .vertical-line{right: 50%; top: 0; margin-right: 538px; z-index: 0; width: 744px; height: 1769px; }
#pattern0 .vertical-line::before{ width: 100%; height: 100%; display: block; right: 0; top: -104px; background: url(/images/main/keyvis01_pattern_pink_solid.png) no-repeat right top; }
#pattern0 .vertical-line::after{ width: 100%; height: 100%; display: block; right: 0; top: 204px; background: url(/images/main/keyvis01_pattern_red_solid.png) no-repeat right top; }
#pattern0 .vertical-line svg { right: -1px; z-index: 1;}
#pattern0 .path1,  #pattern0 .path2{stroke: #FF9BA0; stroke-width: 1.5;}

#pattern1 .horizontal-line{ left: 50%; transform: translateX(-50%); bottom: 0; width: 2562px; height: 980px;}
#pattern1 .horizontal-line svg { position: absolute; left: 0 ; bottom: 63px;}
#pattern1 .vertical-line {right: 50%;margin-right: 715px; bottom: -272px;z-index: 0;width: 420px;height: 1635.986px;transform: rotate(345deg);}
#pattern1 .path1{stroke-width: 1px; stroke: #006ECD;}
#pattern1 .path2 {stroke-width: 2px;stroke: #EF151E;}
#pattern1 .horizontal-line::before { background: url(/images/main/keyvis02_orange_pattern.png) no-repeat; width: 611.2px; height: 508.795px; left: 0; bottom: -60px;}
#pattern1 .horizontal-line::after { background: url(/images/main/keyvis02_blue_solid.png) no-repeat right bottom; width: 2562px; height: 980px; right: 0; bottom: 0px;}

#pattern2 .horizontal-line{ left: 50%; transform: translateX(-50%); bottom: 0; width: 2562px; height: 980px;}
#pattern2 .horizontal-line svg { position: absolute; left: 0 ; bottom: 63px;}
#pattern2 .vertical-line {right: 50%; margin-right: 528px; bottom: 0; z-index: 0; width: 745px; height: 1765px;}
#pattern2 .vertical-line svg { bottom: -805px;; right: 10px;}
#pattern2 .path1{stroke-width: 1.5px; stroke: #006ECD;}
#pattern2 .path2{stroke-width: 1px; stroke: #FF9700;}
#pattern2 .horizontal-line::before { background: url(/images/main/keyvis03_green_pattern.png) no-repeat; width: 739px; height: 563px; left: 0; bottom: 0;}
#pattern2 .horizontal-line::after { background: url(/images/main/keyvis03_blueGradient_full.png) no-repeat right bottom; width: 2562px; height: 980px; right: 0; bottom: 0;}
#pattern2 .vertical-line::before {background: url(/images/main/keyvis03_orangeGradient_full.png) no-repeat right bottom; width: 767px; height: 1088px; right: -14px; bottom: 135px;}

#pattern3 .horizontal-line{ left: 50%; transform: translateX(-50%); top: 71px; z-index: 1; width: 2562px; height: 573px;}
#pattern3 .horizontal-line svg { top: 0;}
#pattern3 .vertical-line{left: 50%; top: 0; margin-left: 600px; z-index: 0; width: 683px; height: 100%; }
#pattern3 .vertical-line::before{ width: 100%; height: 100%; display: block; left: -2px; top: 0; background: url(/images/main/keyvis04_redGradient.png) no-repeat right top; }
#pattern3 .vertical-line::after{ width: 100%; height: 100%; display: block; left: 0; top: 246px; background: url(/images/main/keyvis04_purpleGradient.png) no-repeat right top; }
#pattern3 .vertical-line svg { left: 0; z-index: 1;}
#pattern3 .path1{stroke: #006ECD; stroke-width: 1.5;  }

#pattern3 .path2{stroke: #FF9BA0; stroke-width: 1.5;}

#pattern4 .horizontal-line{ left: 50%; transform: translateX(-50%); bottom: 0; width: 2562px; height: 980px;}
#pattern4 .horizontal-line svg { position: absolute; left: 0 ; bottom: 54px;}
#pattern4 .vertical-line {left: 50%; margin-left: 638px; bottom: 0; z-index: 0; width: 643px; height: 100%;}
#pattern4 .vertical-line svg { bottom: -779px; left: 0;}
#pattern4 .path1{stroke-width: 1.5px; stroke: #FF9700;}
#pattern4 .path2{stroke-width: 1.5px; stroke: #006ECD;}
#pattern4 .horizontal-line::before { background: url(/images/main/keyvis05_orangeGradient_full.png) no-repeat left bottom; width: 2170px; height: 985px; left: 0; bottom: 0;}
#pattern4 .horizontal-line::after { background: url(/images/main/keyvis05_red_pattern.png) no-repeat right bottom; width: 638px; height: 462px; right: 0; bottom: 0;}
#pattern4 .vertical-line::before {background: url(/images/main/keyvis05_blueGradient_full.png) no-repeat left bottom; width: 100%; height: 1076px; right: 0; bottom: 125px;}

/* manipasto */
.rounded-black {background: #1A1A1A; border-radius: 40px 40px 0 0;padding-top: 40px;z-index: 1; position: relative;}
.manipasto { background: #1A1A1A; position: sticky; position: -webkit-sticky; top:0; z-index: 1; width: 100%; height: 100vh; display: flex; flex-direction: column;  justify-content: center; font-size: 10px; padding: 40px 0;}
.manipasto .image-wrap { position: relative;  height: 548px; }
.manipasto .image-wrap .img{ height: 100%; position: absolute; left: 0; top: 0; width: 100%; display: flex; flex-direction: column; align-items: center;}
.manipasto .image-wrap .img img { height: 100%;}
.manipasto .image-wrap .img:first-of-type { position: relative;}
.manipasto .text-wrap{ position: relative; margin-top: 30px; color: #fff;margin-left: calc(50% - (1052px / 2));}
.manipasto .text-wrap .text{ height: 100%; position: absolute; left: 0; top: 0;}
.manipasto .text-wrap .text:first-of-type { position: relative;}
.manipasto .text-wrap strong { display: block;font-size: 5em;font-style: normal;font-weight: 700;line-height: 100%; /* 52px */letter-spacing: -0.52px; text-transform: uppercase;}
.manipasto .text-wrap strong span { display: block;}
.manipasto .text-wrap strong span + span {margin-top: 20px;}
.manipasto .text-wrap p{ margin-top: 20px;font-size: 2em;font-style: normal;font-weight: 400;line-height: 150%; /* 30px */ }
.motion-spacer {height: 100vh; }
#manipastoText1, #manipastoImg1{ opacity: 1;}
#manipastoText2, #manipastoImg2{ opacity: 0;}
@media (max-height:978px) {
    .manipasto{ font-size: 1vh; }
    .manipasto .image-wrap {height: calc(69vh - 80px); width: auto;}
    .manipasto .text-wrap{  margin-left: calc(50% - (((69vh - 80px) * 1.92) / 2));}
  }
/* swiper custom */
.swiper-custom-prev, .swiper-custom-next{display: inline-flex; width: 64px; height: 64px; align-items: center; justify-content: center; border:1px solid #D9D9D9; background-color: rgba(255, 255, 255, 0.4); border-radius: 50%; text-align: left; text-indent: -9999px; overflow: hidden;}
.swiper-custom-prev::after, .swiper-custom-next::after{ content: ""; display: inline-block; width: 9px; height: 16px; background: url(/images/main/icon_arrow_black.svg) no-repeat center/cover;}
.swiper-custom-prev::after{ margin-left: -4px;}
.swiper-custom-next::after{transform: rotate(180deg);  margin-right: -4px;}
.swiper-custom-prev:hover, .swiper-custom-next:hover{ border-color: #666; background-color: rgba(255,255,255, 0.8);}
 
/* 가장 많이 찾는 콘텐츠 */
.main-contents { background: #fff; position: relative; width: 100%; z-index: 2; overflow: hidden;}
.main-contents .cont-title {font-size: 48px; font-weight: 700; color: #000; text-transform: uppercase;}
.main-inner { max-width: 1320px; width: 100%; margin: 0 auto;}
.rounded-white {background: #fff; border-radius: 40px 40px 0 0;padding-top: 40px;z-index: 2; position: relative;}
.rounded-white.active { border-radius: 0;}
.contents-section { background: #fff; border-radius: 40px 40px 0 0; padding-top: 40px;}
.favorit-contents { color: #000; padding: 180px 0 200px 0;}
.favorit-contents .main-inner { display: flex; align-items: center; margin-bottom: 56px;}
.favorit-contents .title-area {flex: 1;min-width: 0;}
.favorit-contents .description{ font-size: 20px; margin-top: 16px; padding: 0;}
.favorit-swiper-container { height: 519px; position: relative; margin-left: calc((100% - 1320px) / 2); margin-right: 0; }
.favorit-contents .favorit-swiper  { position: absolute; left: -3px; top: -3px; box-sizing: content-box; width: 2678px; padding: 3px 10px 10px 3px;}
.favorit-contents .btn-arrows { margin-left: 40px; flex: 0 0 auto; width: 173px;}
.favorit-contents .btn-arrows [class*="swiper-favorit"]{display: inline-block; overflow: hidden; text-indent: -9999px; word-break: keep-all; text-align: left; width: 64px; height: 64px; margin-left: 40px; background-repeat: no-repeat; background-size: cover;}
.favorit-contents .btn-arrows .swiper-custom-next{margin-left: 40px;}
.favorit-contents .btn-arrows .swiper-button-disabled{ opacity: 0.5;}
.favorit-swiper .swiper-slide { width: 413px; height: 519px; border: 1px solid #F0F0F0; background: #FFF; padding: 40px; transition: all 0.3s ease;}
.favorit-swiper .swiper-slide:hover {box-shadow:0 5px 12px 0 rgba(0,0,0,.07); transform:translateY(-3px);}
.favorit-swiper .logo-img{ width: 92px; height: 92px; margin-bottom: 128px;}
.favorit-swiper .logo-img img{ object-fit: cover;}
.favorit-swiper .title{display: block; font-size: 24px; font-weight: 700; margin-bottom: 16px; line-height: 150%; letter-spacing: -0.12px; text-transform: uppercase;}
.favorit-swiper .text {font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; letter-spacing: -0.08px; min-height: 72px;}
.favorit-swiper .btn-area { text-align: right; position: absolute; right: 40px; bottom: 40px;}
.favorit-swiper .btn-area .btns { display: inline-block; overflow: hidden; text-indent: -9999px; word-break: keep-all; text-align: left; width: 24px; height: 24px; overflow: hidden; background-repeat: no-repeat; background-size: cover;}
.favorit-swiper .btn-area .outlink {background-image: url(../images/main/outlink.svg);}
.favorit-swiper .btn-area .link {background-image: url(../images/main/arrow.svg);}

.brand-useful .title-area { margin-bottom: 60px; }
.brand-useful .swiper-area{ height: 700px; position: relative; overflow: hidden;}
.brand-swiper {width: 3192px; height: 100%; position: absolute; left: 50%; top: 0; transform: translateX(-50%);}
.brand-swiper .swiper-slide{ width: 1065px; height: 700px; overflow: hidden;}
.brand-swiper .swiper-slide img{ width: 100%; height: 100%; object-fit: cover; position: absolute;}
.brand-useful [class*="swiper-custom"]{ background-repeat: no-repeat; background-size: cover; width: 64px; height: 64px; z-index: 2; position: absolute; top: 50%; margin-top: -32px;} 
.brand-useful [class*="swiper-custom"]::after{ content: "";}
.brand-useful .swiper-custom-next{ right: 50%;margin-right: -766px;}
.brand-useful .swiper-custom-prev{ left: 50%;margin-left: -766px;}
.brand-useful .swiper-custom-prev:hover, .brand-useful .swiper-custom-next:hover{border-color: #D9D9D9;}

.main-footer{background: #1A1919; color: #fff; position: relative; z-index: 3;}
.main-footer .site-map { padding: 40px 0 26px; }
.main-footer .site-map h1{margin-bottom: 40px; display: flex; align-items: center;}
.main-footer .site-map h1 img { width: 55px; margin-right: 11px;}
.main-footer .site-map strong { position: relative; display: inline-block; font-size: 18px; font-weight: 700; letter-spacing: -0.36px; padding-left: 12px;}
.main-footer .site-map strong::before { content: ''; display: inline-block;width: 1px; background: #4D4D4D; height: 13px; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
.footer-menu {display: flex;}
.footer-menu .group {flex: 1;}
.footer-menu .group:last-of-type {flex: 0 0 auto;}
.footer-menu h2 {font-size: 18px; font-style: normal;font-weight: 700;line-height: normal;text-transform: uppercase;}
.footer-menu .depth1{margin-top: 24px;}
.footer-menu .depth1 > li{margin-bottom: 24px;}
.footer-menu .depth1 a { display: inline-block; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%;}
.footer-menu .depth2{ margin-top: 8px;}
.footer-menu .depth2 a {color: #808080; font-size: 14px;}
.footer-menu .depth2 li { margin-bottom: 4px;}
.footer-menu .depth2 li:last-of-type{margin-bottom: 0;}
.footer-menu .outlink{position: relative; padding-right: 30px;}
.footer-menu .outlink::after { content: ""; position: absolute; display: inline-block; width: 16px; height: 16px; top: 3px; right: 0; background: url(/images/main/LNB_Outlink.svg) no-repeat center;} 
.main-footer address { display: block; border: 1px solid #333; padding: 30px 0; font-style: normal; font-size: 14px;}
.main-footer address .main-inner{ display: flex;}
.main-footer address .copy{ margin-top: 15px; font-size: 13px; color: #999;}
.main-footer address .version {display: inline-block; margin-left: auto; display: inline-flex; align-items: center; padding: 0 16px; height: 37px; border-radius: 100px;border: 1px solid #4D4D4D;background: #1A1919; color: #B3B3B3; font-size: 13px;}

[lang="vi-VN"] #manipastoText1{ position: absolute;}
[lang="vi-VN"] #manipastoText2 {position: relative;}
[lang="vi-VN"] .main-footer .site-map h1 , 
[lang="vi-VN"] .footer-menu h2{font-family: 'CJONLYONE';}
[lang="ja"] .main-footer .site-map h1 ,
[lang="ja"] .footer-menu h2{font-family: 'CJONLYONE';}

@media (max-width:1400px) {
    .favorit-contents{padding-left: 40px;}
    .favorit-contents .main-inner {padding-right: 40px; }
    .favorit-swiper-container{margin-left: 0;}
    .main-footer .main-inner{ padding-left: 40px; padding-right: 40px;}
}
@media (max-width: 1738px) {
    .brand-useful .swiper-custom-prev { left: 40px; margin-left: 0;}
    .brand-useful .swiper-custom-next { right: 40px; margin-right: 0;}
}
/* 가로 스크롤 발생하는 이슈 */
.pin-spacer { width: 100% !important;}