@charset "utf-8";
/* Info
 ========================================================================== */
/**
    * 1. Writer: Lee A Jin. (Weaverloft Corp.)
    * 2. Production Date: 2026-01
    * 3. Client: Krafton Olive Tree 
    * 4. Description: Layout Style
 */

/*========== Layout Basic ==========*/
main {position: relative; padding-top: 80px; min-height: calc(100vh - 150px);}
.inner { margin: 0 100px; box-sizing: border-box;}
.sub-sec {padding: 100px 0 120px;}
.section:focus-visible {outline: none;}
.section-title {font-size: 40px;font-weight: 500; line-height: 1.2; color: var(--font-color);}
.sub-sec .section-title {text-align: center;}
.article-cont + .article-cont {margin-top: 30px;}
.article-tit {display: flex; margin-bottom: 10px; font-size: 18px;font-weight: 700;color: var(--font-color); line-height: 1.25; letter-spacing: -0.02rem; word-break: keep-all;}
.article-tit.anchor a {display: inline-block;width: fit-content; transition: opacity 300ms;}
.article-tit.anchor a:hover {opacity: 0.6;}
.article-tit a {font-size: inherit; font-weight: 700; color: inherit; line-height: inherit; letter-spacing: -0.02rem;}
.article-tit span {margin-right: 4px; font-size: inherit; font-weight: 700; color: inherit; line-height: inherit; letter-spacing: -0.02rem;}
.article-txt {font-size: 16px;font-weight: 400;color: var(--font-color); line-height: 1.625; letter-spacing: -0.02rem;}
.article-txt span {font-size: inherit; font-weight: 400; color: inherit; line-height: 1.625; letter-spacing: -0.02rem;}
.mgt-60 {margin-top: 60px !important;}
.mgt-50 {margin-top: 50px !important;}
.mgt-30 {margin-top: 30px !important;}
.mgt-20 {margin-top: 20px !important;}
.mgt-10 {margin-top: 10px !important;}
.p-0 {padding: 0 !important;}

@media screen and (min-width: 1921px) {
    .inner { max-width: 1720px; margin: 0 auto;}
}
@media screen and (max-width: 1720px) {
    .inner { margin: 0 clamp(16px,5.814vw, 100px);} 
}
@media screen and (max-width: 1100px) {
    .section-title {font-size: clamp(26px,3.6364vw, 40px);}
    .sub-sec .section-title {font-size: clamp(24px,3.6364vw, 40px);}
    .article-tit {font-size: clamp(16px,1.636vw, 18px);}
    .article-txt {font-size: clamp(14px,1.454vw, 16px);}
}
@media screen and (max-width: 768px) {
    main {padding-top: 60px; min-height: calc(100vh - 202px);}
    main:has(.error-sec) {min-height: auto;height: 100%;padding: 0;}
    .inner { margin: 0 16px;}  
    .sub-sec {padding: 60px 0 80px;}
    .mgt-60 {margin-top: 50px !important;}
    .mgt-50 {margin-top: 40px !important;}
    .mgt-30 {margin-top: 25px !important;}
}

/*========== Main Page ==========*/
.main-sec-txt {font-size: 20px;font-family: 'Noto Sans KR';font-weight: 500;color: var(--font-color);line-height: 1.5;letter-spacing: -0.02em;text-align: center;word-break: keep-all;}
.main-sec-txt strong {font-weight: 700;color: inherit;}
.main-sec-txt + .main-sec-txt {margin-top: 24px;}
.section-title + .txt-wrap {margin-top: 24px;}
/* Main Visual Section */
.main-visual-sec {display: flex; flex-direction: column; height: calc(100vh - 80px);}
.main-visual-sec .br-mo {display: none;}
.main-visual-sec .main-visual {width: 100%;height: 100%;background-image: url("../images/common/main-visual-logo.png"); background-repeat: no-repeat; background-position: center center; background-size: 50%;}
.main-visual-sec .main-visual-cont {padding: 20px 0;}
.main-visual-sec .main-visual-tit {display: flex;justify-content: center;flex-wrap: wrap;font-size: 40px;font-weight: 300;line-height: 1.2;color: var(--key-color);text-align: center;word-break: keep-all;}
.main-visual-sec .main-visual-tit .mv-text-wrap {display: flex;justify-content: center;flex-wrap: wrap;font-size: inherit;}
.main-visual-sec .main-visual-tit .mv-text {opacity: 0;transform: translateY(100%); font-size: inherit;font-weight: 300;line-height: 1.2;color: var(--key-color);}
@media screen and (max-width: 1100px) {
    .main-visual-sec {max-height: 680px;}
    .main-visual-sec .main-visual-tit { font-size: clamp(32px,3.6364vw, 40px);}
    .main-sec-txt {font-size: clamp(16px,1.8182vw, 20px);}
}
@media screen and (max-width: 768px) {
    .main-visual-sec { height: calc(100vh - 60px); max-height: 480px;}
    .main-visual-sec .main-visual {background-image: url("../images/common/main-visual-logo.png");}
}
@media screen and (max-width: 520px) {
    .main-visual-sec .br-mo {display: block;}
}
/* Our Team Section */
.our-team-sec {margin: 110px 0 0;}
@media screen and (min-aspect-ratio: 17/10) and (max-aspect-ratio: 9/5) {
    .our-team-sec {min-height: calc(100vh - 80px);}
}
.our-team-sec .br-mo {display: block;}
.our-team-sec .our-team-cont {padding: 20px 0 100px;}
.our-team-sec .our-team-tit {font-weight: 500;color: var(--font-color);line-height: 1.2;text-align: center; word-break: keep-all;}
.our-team-sec .our-team-tit + .our-team-txt {margin-top: 20px;}
.our-team-sec .our-team {position: relative;top: 0;left: 50%;transform: translateX(-50%);width: 100%;transform-origin: center center;}
.our-team-sec .our-team-cont .btn-wrap {margin-top: 40px;}
.our-team-tit, .our-team-sec .txt-wrap, .our-team-sec .basic-btn {opacity: 0;transform: translateY(30px);}
@media screen and (max-width: 1100px) {
    .our-team-sec {margin: 40px 0 0;}
    .our-team-sec .our-team-cont {padding: 20px 0 60px;}
}
@media screen and (max-width: 440px) {
    .our-team-sec .br-mo {display: none;}
}
/* Life at OliveTree Games Section */
.life-olive-sec {padding: 100px 0 60px; background-color: #FDFEF1;}
@media screen and (min-aspect-ratio: 17/10) and (max-aspect-ratio: 9/5) {
    .life-olive-sec {min-height: calc(100vh - 80px);}
}
.life-olive-sec .br-mo {display: none;}
.life-olive-sec .life-olive-txt .br-mo {display: block;}
.life-olive-sec .life-olive-txt .br-smo {display: block;}
.life-olive-sec .life-olive-cont {margin-top: 40px; padding-bottom: 50px;}
.life-olive-sec .life-olive-tit {display: flex; justify-content: center; flex-wrap: wrap; font-size: 60px;font-weight: 600;color: var(--key-color);text-align: center;font-style: italic; line-height: 1.2;word-break: keep-all;}
.life-olive-sec .life-olive-tit + .life-olive-txt {margin-top: 20px;}
.life-olive-sec .life-olive-txt strong {opacity: 0;transform: translateY(100%);}
.life-olive-sec .life-olive-tit .life-olive-tit-wrap {display: flex; justify-content: center; flex-wrap: wrap; font-size: inherit;}
.life-olive-sec .life-olive-tit .char {opacity: 0;transform: translateY(100%); font-size: inherit;font-weight: 600;color: var(--key-color);}
.life-olive-sec .life-olive-gallery {display: flex;}
.life-olive-sec .life-olive-gallery .gallery {flex-basis: 33.333%; flex-shrink: 0;}
@media screen and (max-width: 1100px) {
    .life-olive-sec {padding: 60px 0 40px;}
    .life-olive-sec .life-olive-tit {font-size: clamp(32px,5.4545vw, 60px);}
    .life-olive-sec .life-olive-cont {margin-top: 25px;}
}
@media screen and (max-width: 580px) {
    .life-olive-sec .life-olive-txt .br-mo {display: none;}
    .life-olive-sec .life-olive-gallery {flex-direction: column;}
    .life-olive-sec .life-olive-gallery .gallery {flex-basis: 100%;}
}
@media screen and (max-width: 380px) {
    .life-olive-sec .br-mo {display: block;}
}
@media screen and (max-width: 324px) {
    .life-olive-sec .life-olive-txt .br-smo {display: none;}
}
/* Our Games Section */
.our-games-sec {max-height: 730px;padding: 100px 0 120px;background-color: #F5F5F5;}
@media screen and (min-aspect-ratio: 17/10) and (max-aspect-ratio: 9/5) {
    .our-games-sec {min-height: calc(100vh - 230px);}
}
.our-games-sec .our-games-cont {max-width: 600px; margin: 0 auto; margin-top: 15px;}
.our-games-sec .our-games-tit {position: relative;z-index: 1;font-size: 40px;font-weight: 700;color: var(--key-color);text-align: center;font-style: italic;}
.our-games-sec .our-games-tit span {position: relative;z-index: 2;font-size: 40px;font-weight: 700;color: var(--key-color);text-align: center;font-style: italic;}
.our-games-sec .our-games-tit::before {content: attr(data-text);position: absolute;top: 0;left: 50%;transform: translate(-50%, 0);z-index: 1;width: 100%;color: var(--key-color);-webkit-text-stroke: 8px #FFFFFF; filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.15));}
.our-games-sec .progress-area {margin: 0 auto;margin-top: 20px;}
.our-games-sec .our-games {width: 100%;height: fit-content;}
@media screen and (max-width: 1100px) {
    .our-games-sec {max-height: 720px;min-height: auto;padding: 60px 0 60px;}
    .our-games-sec .our-games-tit {font-size: clamp(24px,3.6364vw, 40px);}
    .our-games-sec .our-games-tit span {font-size: clamp(24px,3.6364vw, 40px);}
    .our-games-sec .our-games-tit::before {font-size: clamp(24px,3.6364vw, 40px);}
    .our-team img {aspect-ratio: 402 / 186;}
}
@media screen and (max-width: 680px){
    .our-games-sec .our-games-cont {max-width: 100%; margin: 40px clamp(20px, 5.8824vw, 40px) 0;}
}
@media screen and (max-width: 420px){
    .our-games {width: 80%; margin: 0 auto;}
}

/*========== Privacy Policy ==========*/
.privacy-sec * {font-family: 'Noto Sans KR' !important;}

/*========== Top Btn ==========*/
#top-btn { display: none; position: fixed; right: 20px; bottom: 20px; width: 44px; height: 44px; z-index: 99; transition: bottom 200ms; } 
#top-btn.on { position: absolute; bottom: 20px;} 
#top-btn a { display: block; width: 100%; height: 100%;border-radius: 50%;background-color: #fff; border: 1px solid var(--font-color); color: var(--font-color); background-image: url("../images/common/icon-top.svg"); background-repeat: no-repeat; background-position: center center; background-size: 22px auto; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); opacity: 1; transition: all 300ms; overflow: hidden; } 
#top-btn a:hover { background-color: #e8e9e2; } 
#top-btn a:focus {outline: 2px dashed #111;}
@media screen and (max-width: 768px){
    #top-btn { width: 38px; height: 38px; } 
    #top-btn a { background-size: 18px auto; } 
}

/*========== Error ==========*/
#wrap:has(.error-sec) {overflow: hidden;display: flex;flex-direction: column;height:100vh;justify-content: space-between;}
main#error {min-height: calc(100vh - 360px);}
.error-sec {display: flex; flex-direction: column; align-items: center;justify-content: center; min-height: calc(100vh - 360px);}
.error-box-txt-wrap {padding-top: 160px;background-image: url('../images/common/error-txt.svg');background-repeat: no-repeat;background-position: top center;background-size: 340px auto;}
.error-box-txt-wrap .error-box-tit {font-size: 28px;font-weight: 700;text-align: center;}
.error-box-txt-wrap .error-box-txt {margin: 20px 0 0;font-size: 18px;font-weight: 400;word-break: keep-all;line-height: 1.55;text-align: center;}
.error-sec .btn-wrap {margin-top: 80px;}
@media screen and (max-width: 1100px) {
    .error-sec .btn-wrap {margin-top: 50px;}
}
@media screen and (max-width: 768px) {
    .error-sec { min-height: calc(100vh - 262px); margin: 0 16px;}
    .error-box-txt-wrap {padding-top: 120px;background-size: 230px auto;}
    .error-box-txt-wrap .error-box-tit {font-size: 24px;}
    .error-box-txt-wrap .error-box-txt {margin: 10px 0 0;font-size: 16px;}
    .error-sec .btn-wrap {margin-top: 35px;}
}

.error-sec.soon-sec .error-box-txt-wrap {width: 100%;padding-top: 100px;background-image: url('../images/common/comming-txt.svg');background-size: 680px auto;}
@media screen and (max-width: 1100px) {
    .error-sec.soon-sec .error-box-txt-wrap {padding-top: 80px;background-size: 480px auto;}
}
@media screen and (max-width: 768px) {
    .error-sec.soon-sec .error-box-txt-wrap {padding-top: 66px;background-size: clamp(280px, 60vw, 600px) auto;}
}

/*========== 영문 ==========*/
:lang(en) .our-team-sec .en-br-mo {display: none;}
:lang(en) .life-olive-sec .en-br-mo {display: none;}
:lang(en) .life-olive-sec .en-br-smo {display: none;}
:lang(en) .life-olive-sec .en-br-ssmo {display: none;}
@media screen and (max-width: 600px) {
    :lang(en) .our-team-sec .en-br-mo {display: block;}
    :lang(en) .our-team-sec .br-mo {display: block;}

    :lang(en) .life-olive-sec .life-olive-txt .br-mo {display: block;}
    :lang(en) .life-olive-sec .life-olive-txt + .life-olive-txt .br-mo {display: none;}
    :lang(en) .life-olive-sec .life-olive-txt .en-br-mo {display: block;}
    :lang(en) .life-olive-sec .life-olive-txt + .life-olive-txt .en-br-mo {display: block;}
}
@media screen and (max-width: 450px) {
    :lang(en) .life-olive-sec .life-olive-txt .en-br-smo {display: block;}
    :lang(en) .life-olive-sec .life-olive-txt + .life-olive-txt .en-br-smo {display: none;}
    :lang(en) .life-olive-sec .life-olive-txt + .life-olive-txt .en-br-ssmo {display: block;}
}
@media screen and (max-width: 360px) {
    :lang(en) .life-olive-sec .life-olive-txt + .life-olive-txt .en-br-smo {display: block;}
}
@media screen and (max-width: 330px) {
    :lang(en) .our-team-sec .br-mo {display: none;}
}