@keyframes dash-ani1 {
    from {
        stroke-dashoffset: 2840;
    }
    to {
        stroke-dashoffset: 0;
    }
    }
    @keyframes dash-ani2 {
    from {
        stroke-dashoffset: 3023;
    }
    to {
        stroke-dashoffset: 0;
    }
}
body { background-color: #1A1A1A;}
.spacer {width: 100%; height: 50vh;}

.path-length1 {
    stroke-dasharray: 2840;
    stroke-dashoffset: 2840;
    fill: transparent;
    transition: all 1s ease;
}
.path-length2 {
    stroke-dasharray: 3023;
    stroke-dashoffset: 3023;
    fill: transparent;
    transition: all 1s ease;
}
.path-length3 {
    stroke-dasharray: 2649;
    stroke-dashoffset: 2649;
    fill: transparent;
    transition: all 0.8s ease-out;
}
.path-length4 {
    stroke-dasharray: 3345;
    stroke-dashoffset: 3345;
    fill: transparent;
    transition: all 0.8s ease-out;
    transition-delay: 0.3s;
}
.active .patterns [class^="path-length"] { stroke-dashoffset: 0;}


/* common */
.intro-scroll-lock { overflow: hidden;}
.about-contents {overflow: hidden; padding: 0;}
.about-contents .sections { position: relative; z-index: 1; height: 100vh; min-height: 900px; -webkit-transform: translate3d(0, 0, 0); }
.about-contents .visual-wrap { max-width: 2560px; max-height: 1440px; width: 100%; height: 100%; margin: 0 auto; position: relative;}
.about-contents .sections-wrap {width: 100%; height: 100%;}
.about-contents .rounded-area { height: 40px; border-radius: 40px 40px 0 0; background-color: #fff; position: relative; z-index: 1;}
.about-contents  [class*="visual-line"], .about-contents [class*="sub-line"]{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
/* .visual-area { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 0;} */
.visual-section {position: fixed; left: 50%; top: 0; width: 100%; height: 100%;  z-index: 0; overflow: hidden; max-width: 2560px; transform: translateX(-50%);}
.about-contents .patterns {position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1;}
.about-contents .path{ position: absolute;}
.about-contents .image-box{ position: relative; width: 100%; height: 100%; z-index: 0;}
.about-contents .image-box img{ position: absolute; display: block; width: 100%; height: 100%; object-fit: cover;} 
.about-contents .text-box { color: #000; z-index: 2; text-align: center; position: absolute; top: 50%; transform: translateY(-50%); width: 100%; }
.text-box h1 {font-size: 70px;font-weight: 700;line-height: normal; }
.patterns .visual-line1, .patterns .visual-line2{ z-index: 1;}
.patterns .bg { z-index: 0;}
.visual-line1 .path{ top: 50%; right: 50%; margin-right: -450px; margin-top: -335px;}
.visual-line2 .path{ bottom: 50%; left: 50%; margin-left: -628px; margin-bottom: -421px;}
#aboutContainer .footer { opacity: 0; position: absolute; bottom: 0; width: 100%; padding: 0 40px;}
#aboutContainer .footer .inner { width:100%; margin: 0 auto; max-width: 1320px; padding-top: 0; align-items: center; height: 100%; border-top-color: #ccc;}
.header::before{background-color: rgba(255, 255, 255, 0.9);}
.sections .sub-line1 .path{ left: 0; top: 0;}
.sections .sub-line2 .path{ right: 0; bottom: 0;}
.sections .text-box p{font-size: 30px;line-height: normal;letter-spacing: -0.6px; margin-top: 78px;}
.about-contents .comment { color: #FFF; font-size: 60px;font-style: normal;font-weight: 700;line-height: 80px; /* 133.333% */letter-spacing: -1.8px; text-transform: uppercase;}
.about-contents .mask-img {position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2;}
.visual-section .text1, .visual-section .text2 { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 4; display: flex; align-items: center;}
.visual-section .text2 { justify-content: flex-end; z-index: 4;}
.visual-section .patterns {z-index: 3;}
.visual-section .image-box {z-index: 3;}
.visual-section .text1 p {margin-left: 220px;}
.visual-section .text2 p{margin-right: 80px;}
.visual-section .comment { font-size: 50px;}
/* section1 */
#visual1{z-index: 0;}
#section1{z-index: 1;}
#section1 .title-box { position: absolute; top: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #fff;}
#section1 .title-box strong { display: block;font-size: 32px;font-weight: 400;line-height: normal; opacity: 0;}
#section1 .title-box p{font-size: 54px;font-weight: 700; line-height: normal; letter-spacing: -1.62px; margin-top: 133px; opacity: 0;}
#visual1 { opacity: 1; background: #1A1A1A;}
#visual1 .title-box{ position: absolute; width: 100%; top: 50%; transform: translateY(-50%); z-index: 2; text-align: center;font-size: 50px;line-height: 76px; /* 152% */letter-spacing: -1px; color: #fff; z-index: 3;}
#visual1 .patterns{ z-index: 2;}
#visual1 .patterns .bg { width: 100%; height: 100%; background: url(/images/about/section1_pattern_bg.jpg) no-repeat center center; background-size: 2560px 1440px;}
#visual1 .image-box {z-index: 0; overflow: hidden;}
#visual1 .image-box .img2{ max-width: 2560px; min-height: 1080px;  top: 0; left: 50%; transform: translateX(-50%);}
#visual1 .scroll-icon {transition: all 0.5s ease-in-out; opacity: 0; transform: translateY(-30px);}
#visual1 .scroll-icon.active {opacity: 1; transform: translateY(0);}
#visual2 {z-index: -1;}
#visual2.active { z-index: 0;}
#visual2 .patterns {z-index: 4;}
#section2 {z-index: 1; background-color: #fff; border-radius: 40px 40px 0 0;}

#visual3 {z-index: -1;}
#visual3.active {z-index: 0;}
#section3{z-index: 3;  background-color: #fff;border-radius: 40px 40px 0 0;}
#section4{ position: relative; z-index: 5;  height: auto; min-height: 100vh;border-radius: 40px 40px 0 0; transition: border-radius 0.3s ease;background-color: rgba(255, 255, 255, 0.85);}
#section4.active{ border-radius: 0;}
/* .active2 #visual2, .active3 #visual3 { opacity: 1; z-index: 2;} */
#section2.active , #section3.active  {border-radius: 0;  transition: all 0.3s ease;}
#visual3 .image-box { display: flex; align-items: center; justify-content: center; z-index: 5;}
#visual3 .image-box .img2 { width: 200px; height: auto;}
#visual3 .patterns { z-index: 3;}
#visual3 .text1 { opacity: 0;}
.contents-box { position: relative; width: 100%; height: 100%;}
.contents-box .contents-wrap { width: 100%; max-width: 1480px; }

.brand-position { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; color: #000; padding: 159px 40px 121px; height: auto; min-height: 100vh; max-width: 2560px; position: relative; margin: 0 auto;}
.brand-position .contents-wrap{display: flex; flex-wrap: wrap; position: relative; z-index: 1; justify-content: space-between;}
.brand-position .left-area { flex: 0 1 auto; padding-right: 100px; }
.brand-position .left-area h2 {font-size: 50px;font-style: normal;font-weight: 700;line-height: 70px; /* 140% */ margin-bottom: 30px;}
.brand-position .left-area p{font-size: 16px;font-style: normal;font-weight: 400;line-height: 150%; /* 24px */letter-spacing: -0.16px; margin-bottom: 20px;}
.brand-position .cont-area {flex: 1; min-width: 0; margin-left: auto; max-width: 865px;}
.brand-position .cont-group { margin-bottom: 80px;}
.brand-position .cont-group .title {color: #979797;font-size: 20px;font-style: normal;font-weight: 700;line-height: 140%; /* 28px */ margin-bottom: 12px;}
.brand-position .cont-group .cont strong { display: block; font-size: 24px; font-style: normal; font-weight: 700; line-height: 140%; /* 33.6px */}
.brand-position .cont-group .cont strong + p { margin-top: 16px;}
.brand-position .cont-group .cont p { display: flex; flex-wrap: wrap; gap: 60px; font-size: 16px;font-style: normal;font-weight: 400;line-height: 150%; /* 24px */letter-spacing: -0.16px;}
.brand-position .cont-group .cont p span { display: block; flex: 0 0 auto;}
.brand-position .cont-group .cont p span em {display: block;}
[lang="ja"].brand-position .cont-group .cont p span em {display: inline}
.brand-position .contents-line1 { position: absolute; z-index: 0; left: 0; top: 0;width: 421px; height: 100%;}
.brand-position .contents-line1 svg { position: absolute; right: 0; top: 0;}
.brand-position .contents-line1 path { stroke-dashoffset: 2035; stroke-dasharray: 2035; transition: all 1s ease;}
.brand-position .contents-line2 { position: absolute; z-index: 0; left: 0; bottom: 0; width: 100%; height: 500px; }
.brand-position .contents-line2 svg{position: absolute; left: 0; bottom: 161px; width: 100%; height: 100%;}
.brand-position .contents-line2 path { stroke-dashoffset: 2804; stroke-dasharray: 2804; transition: all 1s ease;}
@media (max-width:1560px) {
    .brand-position .cont-group .cont p span{flex: 1;}
    .brand-position .cont-group .cont p span em { display: inline; }
    [lang="vi-VN"] .brand-position .left-area { flex-basis: 375px;}
  }
#section4.active .contents-line1 path , #section4.active .contents-line2 path {stroke-dashoffset: 0; transition-delay: 0.5s;}
.mask-target{
    height: 100%;
    width: 100%;
    object-fit: cover;
 }

.intro { position: fixed; z-index: 10; width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; flex-direction: column; background-color: #1A1A1A;}
.intro .bg-dimmed { position: absolute; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; display: block; opacity: 0.8; background: #000;}
.intro .title-box { position: relative; z-index: 2; font-size: 54px;font-style: normal;font-weight: 700;line-height: normal;letter-spacing: -1.62px; color: #fff; text-align: center;}
.intro .title-box p {opacity: 0;}
.intro .title-box p + p {margin-top: 63px;}
.intro::after { content: ''; display: block; position: absolute; z-index: 0; max-width: 2560px; width: 100%; height: 100%; max-width: 2560px; margin: 0 auto; background: url(/images/about/section1_img1.jpg) no-repeat center/cover;}

.download-area a { display: inline-block; position: relative;padding: 12px 40px 12px 16px;border: 1px solid #666;color: #4d4d4d;font-size: 16px;line-height: 1.5;transition: border .4s; background-color: transparent;}
.download-area a:hover { border-color: #000; }
.download-area .download::after { content: "";position: absolute;top: 14px;right: 16px;width: 20px;height: 20px;background: url(/images/ico_download.svg) no-repeat 0 0;}

.en .intro .title-box{ font-weight: 400;}
.en #section1 .title-box p { font-weight: 400;}
.en .brand-position .cont-group{margin-bottom: 70px;}
.header.bg-none{border-bottom: 0;}
.header.bg-none::before{ background-color: transparent;}
[lang="vi-VN"] .brand-position .cont-group .cont p span,
[lang="ja"] .brand-position .cont-group .cont p span{ flex: 1;}
[lang="vi-VN"] .brand-position .left-area h2,
[lang="ja"] .brand-position .left-area h2,
[lang="vi-VN"] .brand-position .cont-group .title,
[lang="ja"] .brand-position .cont-group .title,
[lang="vi-VN"] .brand-position .cont-group .cont strong,
[lang="ja"] .brand-position .cont-group .cont strong{ font-family: 'CJONLYONE';}