/*브랜드 스토리 css*/
@charset "utf-8";

body,
html {-webkit-text-size-adjust:none;}
body {font-family:"Pretendard Variable", "Malgun Gothic", "맑은 고딕", sans-serif;}

/* ========== global  ========== */
:root {
    --base-width:760;
    --vw:calc(100vw / var(--base-width));

    /* 색상 */
    --color-primary:#fff;
    --color-secondary:#ccc;
    --color-main:#FC6322;
    --color-sub:#FF8800;
    --color-border:#e2e8f0;

    /* 폰트 */
    --font-light:300;
    --font-regular:400;
    --font-medium:500;
    --font-bold:700;

    /* 여백 */
    --space-xxs:calc(10* var(--vw));
    --space-xs:calc(30* var(--vw));
    --space-sm:calc(40* var(--vw));
    --space-md:calc(60* var(--vw));
    --space-lg:calc(120* var(--vw));

    /* 레이아웃 */
    --radius-md:10px;
    --radius-lg:20px;
}

.brandStory {position:relative; overflow:hidden; text-align:center;}
.brandStory * {box-sizing:border-box; line-height:1.2;}
.brandStory img {max-width:100%;}

.con_area {position:relative; width:100%; text-align:center;}
.inner {position:relative; padding:calc(120* var(--vw)) var(--space-sm); margin:0 auto;}
.inner.flex {display:flex; flex-direction:column; justify-content:center; align-items:center; height:100vh; }

/* title */
.tit_wrap {position:relative; text-align:center; margin-bottom:var(--space-md);}
.tit_wrap * {margin:0 auto; color:#222;}
.tit_wrap h3 {line-height:1; font-size:calc(58* var(--vw)); font-weight:var(--font-bold); letter-spacing:-2px;}
.tit_wrap .sub_txt {margin-top:var(--space-xs); font-size:calc(32* var(--vw)); font-weight:var(--font-light); letter-spacing:-0.8px;}
.tit_wrap .sub_txt p {line-height:inherit; font-size:inherit; font-weight:inherit; letter-spacing:inherit;}
.tit_wrap .sub_txt p + p {margin-top:calc(26* var(--vw));}

/* text */
strong {font-weight:var(--font-bold);}

.point_color {color:var(--color-main) !important;}
.point_color2 {color:var(--color-primary) !important;}

.copy_txt {margin-top:var(--space-md);}
.copy_txt p {font-size:calc(46* var(--vw)); font-weight:var(--font-bold); letter-spacing:-1px;}


/* ========== contents  ========== */
/* title */
#top_title {width:100%; aspect-ratio:760 / 1105; overflow:hidden;}
#top_title .tit_bg {position:absolute; inset:0;}
#top_title .tit_bg img {width:100%; height:100%; object-fit:cover;}
#top_title .tit_bg::after {content:''; position:absolute; top:calc(105* var(--vw)); left:0; right:0; z-index:1; width:100%; height:86.7%; background:url('//s3.unistudy.co.kr/images/mobile/event/brandStory/circle_line.png') no-repeat 0 / 100%;}

#top_title .logo {width:calc(174 * var(--vw));}
#top_title .main_tit {width:calc(616 * var(--vw));}
#top_title .sub_tit {width:calc(373 * var(--vw));}

#top_title .tit_wrap {position:absolute; top:50%; left:50%; width:100%; z-index:10; transform:translate(-50%, -50%); margin:0 auto; text-align:center;}
#top_title .tit_wrap .main_tit {display:inline-block; position:relative; z-index:10; margin-top:calc(75* var(--vw));}
#top_title .div_line {width:40px; height:1px; margin:calc(80* var(--vw)) auto; background:var(--color-sub);}

/* cont1 */
#cont1 {background:linear-gradient(to bottom, #1c1817 0%, #1c1817 60%, #612c17 100%);}
#cont1 * {color:var(--color-primary);}

#cont1 .tit_wrap h3 {color:var(--color-primary);}
#cont1 .tit_wrap .highlight {position:relative; z-index:1;}
#cont1 .tit_wrap .highlight .line {display:block; position:absolute; bottom:0; left:-2px; right:-2px; z-index:-1; height:calc(40 * var(--vw)); background:var(--color-main); transform:scaleX(0); transform-origin:left center;}
#cont1 .sub_txt {margin-top:40px;}
#cont1 .ct_wrap {width:100%;}

#cont1 .meaning_box {display:flex; flex-direction:column; gap:var(--space-xs); width:100%;}
#cont1 .meaning_box li {flex:1; padding:0 calc(26 * var(--vw)); background:rgba(0, 0, 0, .5); border:1px solid var(--color-main); border-radius:var(--radius-md);}
#cont1 .meaning_box .box_tit {padding:var(--space-xs) 0; font-size:calc(28 * var(--vw)); font-weight:var(--font-bold); border-bottom:1px solid rgba(255,255,255, .5);}
#cont1 .meaning_box .box_txt {padding:var(--space-xs) 0; font-size:calc(32 * var(--vw)); color:var(--color-secondary);}
#cont1 .meaning_box .box_txt strong {color:var(--color-primary);}

#cont1 .section1 .tit_wrap,
#cont1 .section1 .meaning_box li {opacity:0; transform:translateY(50px);}

/* cont2 */
#cont2 {background:#F7F7F7;}

.proof_swiper {position:relative; padding-top:calc(115 * var(--vw)); overflow:hidden;}
.proof_swiper .swiper-slide {display:flex; align-items:end; justify-content:center;}
.proof_swiper .swiper-pagination {display:flex; top:0; left:0; right:0; bottom:unset; border-bottom:1px solid #999;}
.proof_swiper .swiper-pagination-bullet {all:unset; flex:1; padding-bottom:calc(10 * var(--vw)); margin:0 !important; line-height:1.08; font-size:calc(28* var(--vw)); font-weight:var(--font-bold); color:#999;}
.proof_swiper .swiper-pagination-bullet > em {font-size:calc(24* var(--vw)); font-weight:var(--font-regular);}
.proof_swiper .swiper-pagination-bullet-active {position:relative; color:#222;}
.proof_swiper .swiper-pagination-bullet-active > em {font-weight:var(--font-bold);}
.proof_swiper .swiper-pagination-bullet-active::after {position:absolute; bottom:-2px; left:0; right:0; height:3px; background:#FC6322; content:'';}

.card_container {display:flex; flex-direction:column; justify-content:center; align-items:center; position:relative; width:100%; border-radius:var(--radius-md); overflow:hidden;}

.card_section {width:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:var(--space-md) var(--space-sm); text-align:center;}
.card_section .tag {display:inline-block; padding:calc(10* var(--vw)) calc(36* var(--vw)); margin-bottom:calc(20* var(--vw)); line-height:1; font-size:calc(24* var(--vw)); font-weight:var(--font-medium); border-radius:var(--radius-lg);}
.card_section .title {font-size:calc(30* var(--vw)); font-weight:var(--font-medium);}

.card_section.left {background:var(--color-primary); border:1px solid #EDEDED; border-bottom:0;}
.card_section.left .tag {background-color:#616161; color:var(--color-primary);}
.card_section.left .title {color:#333;}
.card_section.right .tag {font-weight:var(--font-bold); color:var(--color-primary); background:#FC6322;}
.card_section.right .title {font-weight:var(--font-bold); color:#FC6322;}

.icon_wrap {margin-bottom:calc(12* var(--vw)); width:calc(39* var(--vw)); height:calc(48* var(--vw));}
.icon_wrap.record {background:url('//s3.unistudy.co.kr/images/mobile/event/brandStory/ic_record.png') no-repeat center bottom / calc(33* var(--vw)) calc(42* var(--vw));}
.icon_wrap.proof {background:url('//s3.unistudy.co.kr/images/mobile/event/brandStory/ic_proof.png') no-repeat center bottom / calc(39* var(--vw)) calc(48* var(--vw));}

.swiper-slide:nth-child(1) .card_section.right {background:#FBEBE5;}
.swiper-slide:nth-child(2) .card_section.right {background:#FEDBCE;}
.swiper-slide:nth-child(3) .card_section.right {background:#FCC2AD;}
.swiper-slide:nth-child(4) .card_section.right {background:#FF8659;}
.swiper-slide:nth-child(4) .card_section.right .tag {color:#ff5722; background:var(--color-primary);}
.swiper-slide:nth-child(4) .card_section.right .title {color:var(--color-primary);}

.swiper-slide:nth-child(4) .icon_wrap.proof {filter:saturate(0%) brightness(1000%) contrast(1000%);}

.arrow_divider {position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); z-index:10; width:calc(50* var(--vw)); height:calc(50* var(--vw)); background:url('//s3.unistudy.co.kr/images/mobile/event/brandStory/ic_arrow.png') no-repeat 0 / 100%;}


/* cont3 */
#cont3 {background:#FD8D4A; background:linear-gradient(180deg, #FD8D4A 0%, #FC6322 100%);}
#cont3 .card_list {}
#cont3 .card_list li {position:relative; text-align:left; margin-top:var(--space-xs);}
#cont3 .card_list li .card_txt {position:absolute; top:50%; left:0; transform:translateY(-50%); padding:0 var(--space-md);}
#cont3 .card_list li:nth-child(2) .card_txt {left:unset; right:0;}
#cont3 .card_list h4 {margin-bottom:20px; line-height:1; font-size:calc(36* var(--vw)); font-weight:var(--font-bold); color:#fc6322;}
#cont3 .card_list p {font-size:calc(24* var(--vw)); color:#222;}

/* cont4 */
#cont4 {background:#F7F7F7;}
#cont4 .card_list {display:flex; align-items:end; gap:var(--space-xxs);}

/* cont5 */
#cont5 .inner {padding:0;}
#cont5 .tit_bg {width:100%; height:100%;}
#cont5 .tit_bg img {width:100%; height:100%; object-fit:cover; object-position:center bottom;}

#cont5 .flex_wrap {position:absolute; top:50%; left:0; z-index:10; width:100%; transform:translateY( -50%); margin:0 auto; text-align:center;}

#cont5 * {margin:0 auto; color:var(--color-primary);}
#cont5 .tit_wrap h3 {font-size:calc(68* var(--vw)); letter-spacing:-1.7px;}
#cont5 .tit_wrap .sub_tit {margin-bottom:var(--space-xs); font-size:calc(50* var(--vw));  letter-spacing:-1.25px;}
#cont5 .copy_txt p {font-size:calc(30* var(--vw)); font-weight:var(--font-light);}
#cont5 .div_line {width:1px; height:40px; margin:var(--space-xs) auto; background:var(--color-sub);}

#cont5 .color-change {color:var(--color-primary); transition:color 0.5s ease;}
#cont5 .color-change.is-active {color:var(--color-main);}