@charset "utf-8";
@font-face {
	font-family:'Pretendard Variable';
	src: url('/font/PretendardVariable.woff2') format('woff2-variations');
	font-weight:100 900;
	font-style:normal;
	font-display:swap;
}

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

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

	/* 폰트 */
	--font-size-lg:20px;
	--font-size-xl:24px;
	--font-size-2xl:28px;
	--font-size-3xl:30px;
	--font-size-4xl:68px;

	--font-light:300;
	--font-regular:400;
	--font-medium:500;
	--font-bold:700;

	/* 여백 */
	--space-xs:15px;
	--space-sm:60px;
	--space-md:100px;
	--space-lg:120px;

	/* 레이아웃 */
	--inner-max-width:1200px;
	--radius-md:10px;
}

.brandStory {position:relative; overflow:hidden; text-align:center;}
.brandStory * {box-sizing:border-box; line-height:1.25;}

.con_area {position:relative; width:100%; text-align:center;}
.inner {position:relative; max-width:var(--inner-max-width); padding:var(--space-lg) 0; 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;}
.tit_wrap {margin-bottom:53px;}
.tit_wrap * {color:#222;}
.tit_wrap h3 {font-size:52px; font-weight:var(--font-bold);}
.tit_wrap .sub_txt {margin-top:23px; font-size:var(--font-size-2xl);}

/* 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:48px;}
.copy_txt p {font-size:46px; font-weight:var(--font-bold);}


/* ========== contents  ========== */
/* title */
#top_title {height:100vh; background:#000;}
#top_title .tit_bg {width:100%; height:100%;}
#top_title .tit_bg img {width:100%; height:100%; object-fit:cover; object-position:center bottom;}

#top_title .tit_wrap {position:absolute; top:50%; left:50%; 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:77px;}
#top_title .tit_wrap .main_tit .img_a {position:absolute; right:110px; bottom:5px;}
#top_title .div_line {width:40px; height:1px; margin:58px auto; background:var(--color-sub);}

#top_title .tit_obj {position:absolute; top:50%; left:50%; z-index:5; margin:0 auto; transform:translate(-50%, -50%);}
#top_title .tit_obj .light {position:absolute; top:0; right:-482px; z-index:6; mix-blend-mode:screen;}

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

#cont1 .inner {padding:var(--space-xs);}
#cont1 .tit_wrap h3 {font-size:var(--font-size-4xl); color:var(--color-primary);}
#cont1 .tit_wrap .highlight {position:relative; z-index:1;}
#cont1 .tit_wrap .highlight .line {display:block; position:absolute; top:50%; left:-2px; right:-2px;  z-index:-1; height:32px; margin-top:-16px; background:var(--color-main); transform:scaleX(0); transform-origin:left center;}
#cont1 .sub_txt {margin-top:40px;}
#cont1 .sub_txt p {font-size:var(--font-size-3xl); font-weight:var(--font-light);}
#cont1 .ct_wrap {width:100%;}
#cont1 .ct_txt p {font-size:var(--font-size-4xl); font-weight:var(--font-bold);}

#cont1 .meaning_box {display:flex; gap:30px; width:100%;}
#cont1 .meaning_box li {flex:1; padding:16px 26px; background:rgba(0, 0, 0, .5); border:1px solid var(--color-main); border-radius:var(--radius-md);}
#cont1 .meaning_box .box_tit {padding:30px 0; font-size:var(--font-size-3xl); font-weight:var(--font-bold); border-bottom:1px solid rgba(255,255,255, .5);}
#cont1 .meaning_box .box_txt {padding:30px 0; font-size:var(--font-size-xl); color:var(--color-secondary);}
#cont1 .meaning_box .box_txt strong {color:var(--color-primary);}

#cont1.sticky-container {position:relative; height:100vh;}
#cont1 .sticky-ct {position:absolute; inset:0; width:100%; height:100vh;}

#cont1 .sticky-ct:nth-child(1) .tit_wrap,
#cont1 .sticky-ct:nth-child(1) .meaning_box li,
#cont1 .sticky-ct:nth-child(2),
#cont1 .sticky-ct:nth-child(2) .ct_txt {opacity:0; transform:translateY(50px);}
#cont1 .sticky-ct:nth-child(2) {transform:none;}

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

.proof_swiper {position:relative; height:410px; 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:15px; margin:0 !important; line-height:1.08; font-size:var(--font-size-xl); font-weight:var(--font-bold); color:#999;}
.proof_swiper .swiper-pagination-bullet > em {font-size:var(--font-size-lg); 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; justify-content:center; align-items:center; position:relative; width:100%; border-radius:var(--radius-md); overflow:hidden;}

.card_section {flex:1; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:70px 20px; text-align:center;}
.card_section .tag {display:inline-block; padding:10px 43px; margin-bottom:20px; line-height:1; font-size:22px; font-weight:var(--font-medium); border-radius:20px;}
.card_section .title {font-size:var(--font-size-3xl); font-weight:var(--font-medium);}

.card_section.left {background:var(--color-primary); box-shadow:inset 1px 1px 0 0 #EDEDED, inset 0 -1px 0 0 #EDEDED;}
.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:12px; width:40px; height:48px;}
.icon_wrap.record {background:url('//s3.unistudy.co.kr/images/pc/event/brandStory/ic_record.png') no-repeat center bottom / 33px 42px;}
.icon_wrap.proof {background:url('//s3.unistudy.co.kr/images/pc/event/brandStory/ic_proof.png') no-repeat center bottom / 39px 48px;}

.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:50px; height:50px; background:url('//s3.unistudy.co.kr/images/pc/event/brandStory/ic_arrow.png') no-repeat 0 / 100%;}


/* cont3 */
#cont3 {background:#FD8D4A; background:linear-gradient(180deg, #FD8D4A 0%, #FC6322 100%);}
#cont3 .card_list {width:1058px; margin:0 auto;}
#cont3 .card_list li {position:relative; text-align:left;}
#cont3 .card_list li .card_txt {position:absolute; top:50%; left:0; transform:translateY(-50%); padding:0 100px 20px;}
#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:36px; font-weight:var(--font-bold); color:#fc6322;}
#cont3 .card_list p {font-size:24px; color:#222;}

/* cont4 */
#cont4 {background:#F7F7F7;}
#cont4 .card_list {display:flex; align-items:end; gap:30px;}

/* cont5 */
#cont5 {height:100vh; background:linear-gradient(180deg, #1D191A 0%, #1D191A 60%, #673213 100%)no-repeat 0;}
#cont5::after {content:''; position:absolute; inset: 0; background:url('//s3.unistudy.co.kr/images/pc/event/brandStory/bg_bottom.png') no-repeat center bottom / contain; pointer-events:none;}

#cont5 * {margin:0 auto; color:var(--color-primary);}
#cont5 .tit_wrap h3 {font-size:var(--font-size-4xl);}
#cont5 .tit_wrap .sub_tit {margin-bottom:10px; font-size:50px;}
#cont5 .copy_txt p {font-size:var(--font-size-3xl); font-weight:var(--font-light);}
#cont5 .div_line {width:1px; height:40px; margin:30px 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);}