@charset "utf-8";

/* ******************* *
* COMMON
* ******************* */
.sub__page.no-subvisual {padding-top: var(--headerH);}
.sub__page .cinner {max-width: var(--maxWidth2);}
.page__title {margin-bottom: 4.50rem;font-size: 5.0rem;font-weight: 500;}




/* ******************* *
* 브랜드 스토리
* ******************* */
.sub__page.no-subvisual:has(.sub__brand) {padding-top: 0;}
#container:has(.sub__brand) {padding-bottom: 0;}
.page__contents:has(.sub__brand) {max-width: none;padding: 0;}
.sub__brand .sect:not(.sect1) {margin-bottom: 20rem;}
.sub__brand .content__inner {max-width: var(--maxWidth3);padding: 0 var(--inPd);margin: 0 auto;}
.sub__brand .sect__header {margin-bottom: 7rem;padding: 34rem 0 22rem;position: relative;}
.sub__brand .sect__header .sect__title-sub {margin-bottom: 8px;color: #787D9F;font-size: 2.3rem;position: relative;}
.sub__brand .sect__header .sect__title-sub::before {content: '';display: block;/* width: calc(((100vw - var(--maxWidth3)) + var(--inPd)  / 2) - 12px); *//* width: calc((100vw - var(--maxWidth3) / 2)); */width: 100%;height: 1px;background: #787D9F;position: absolute;top: 9px;right: calc(100% + 12px);}
.sub__brand .sect__header .sect__title {color: var(--color-page-title);font-size: 6.4rem;font-weight: 600;}


.sub__brand .sect1 {max-height: 780px;height: clamp(550px, 40.625vw, 780px);/* padding: 33rem 0; */background: url(../img/sub/brand-sect1-img_bg.jpg) center / cover no-repeat;}
.sub__brand .sect1 .cinner {height: 100%;}
.sub__brand .sect1 .content__inner {display: flex;flex-direction: column;justify-content: center;height: 100%;}
.sub__brand .sect1 .title {margin-bottom: 2rem;color: var(--color-page-title);font-size: 6.4rem;font-weight: 600;}
.sub__brand .sect1 .desc {color: var(--color-page-title);font-size: 4rem;}

.sub__brand .sect2 {}
.sub__brand .sect2 .sect__header {background: url(../img/sub/brand-sect2-img_bg.jpg) center / cover no-repeat;}
.sub__brand .sect2 .sect__content {}
.sub__brand .sect2 .sect__content .desc__cont,
.sub__brand .sect4 .sect__content .desc__cont,
.sub__brand .sect3 .sect__content .history__list  {max-width: 740px;width: 75%;margin-left: auto;}
.sub__brand .sect2 .sect__content .desc__cont p,
.sub__brand .sect4 .sect__content .desc__cont p {color: #454545;line-height: 1.5;}
.sub__brand .sect2 .sect__content .desc__cont p.desc-ko,
.sub__brand .sect4 .sect__content .desc__cont p.desc-ko {margin-bottom: 4rem;font-size: 2.2rem;letter-spacing: -2%;}
.sub__brand .sect2 .sect__content .desc__cont p.desc-en,
.sub__brand .sect4 .sect__content .desc__cont p.desc-en {font-size: 2rem;word-break: keep-all;}

.sub__brand .sect2 .sect__content .desc__cont .line-br {margin-bottom:7px;word-break: keep-all;}


.sub__brand .sect3 {}
.sub__brand .sect3 .sect__header {background: url(../img/sub/brand-sect3-img_bg.jpg) center / cover no-repeat;}
.sub__brand .sect3 .history__list {}
.sub__brand .sect3 .history__item:not(:last-child) {margin-bottom: 5rem;}
.sub__brand .sect3 .history__item .year {margin-bottom: 1rem;color: var(--color-page-title);font-size: 4rem;font-weight: 600;}
.sub__brand .sect3 .history__item .cont__list {padding-left: 8px;}
.sub__brand .sect3 .history__item .cont__list li {padding-left: 12px;color: #454545;font-size: 2.2rem;line-height: 1.36;position: relative;}
.sub__brand .sect3 .history__item .cont__list li::before {content: '';display: block;width: 3px;aspect-ratio: 1 / 1;border-radius: 50%;background: #454545;position: absolute;top: 10px;left: 0;}

.sub__brand .sect4 {}
.sub__brand .sect4 .sect__header {background: url(../img/sub/brand-sect4-img_bg.jpg) center / cover no-repeat;}


@media (max-width: 1400px){
    .sub__brand .sect__header {padding: 30rem 0 18rem;}
}
@media (max-width: 1200px){
    .sub__brand .sect__header {padding: 25rem 0 15rem;}
}
@media (max-width: 1024px){
    .sub__brand .sect:not(.sect1) {margin-bottom: 16rem;}
    .sub__brand .sect__header {padding: 22rem 0 12rem;}
    .sub__brand .sect1 .title {font-size: 5.5rem;}
    .sub__brand .sect1 .desc {font-size: 3rem;}
    
    .sub__brand .sect1 {height: 480px;}
}
@media (max-width: 768px){
    .sub__brand .sect:not(.sect1) {margin-bottom: 12rem;}
    .sub__brand .sect1 {height: 420px;}
    .sub__brand .sect4 .sect__content .desc__cont p br {display: none;}
}
@media (max-width: 640px){
    .sub__brand .sect__header .sect__title {font-size: 45px;}
    
    .sub__brand .sect1 .content__inner {padding: 0;}

    .sub__brand .sect2 .sect__content .desc__cont,
    .sub__brand .sect4 .sect__content .desc__cont,
    .sub__brand .sect3 .sect__content .history__list {width: 100%;}
}