@charset "utf-8";

:root{
	--historyImgAreaHeight: 94.6rem;
}

/* 연혁 인트로 */
.history-intro-wrap{display:flex;align-items:flex-start;margin:0 0 8rem;}
.history-intro-wrap .history-txt-box{padding:0 10.5rem 0 0;width:100%;}
.history-intro-wrap .history-txt-box .txt01{margin:0 0 2.6rem;font-size:2rem;line-height:2.6rem;color:var(--color07);font-weight:var(--font-weight-bold);}
.history-intro-wrap .history-txt-box .txt02{margin:0 0 3.4rem;font-size:3.6rem;line-height:5rem;font-weight:var(--font-weight-bold);}
.history-intro-wrap .history-txt-box .txt03{margin:0 0 3.8rem;font-size:1.8rem;line-height:3.6rem;font-weight:var(--font-weight-medium);}
.history-intro-wrap .history-txt-box .txt03:last-of-type{margin:0;}
.history-intro-wrap .history-img-box{flex-shrink:0;position:relative;margin:7rem 0 0;border-radius:5px;width:42.714%;overflow:hidden;}
.history-intro-wrap .history-img-box .history-img-txt-box{position:absolute;bottom:0;left:0;padding:0 0 5rem 5rem;width:100%;box-sizing:border-box;}
.history-intro-wrap .history-img-box .history-img-txt-box .txt01{font-size:2rem;line-height:2.6rem;color:var(--color66);font-weight:var(--font-weight-medium);}
.history-intro-wrap .history-img-box .history-img-txt-box .txt02{font-size:6rem;line-height:1;color:var(--white100);font-weight:var(--font-weight-medium);text-transform:uppercase;}

/* 연혁 */
.history-wrap{position:relative;}
.history-wrap:before{content:'';position:absolute;top:0;right:calc(((100vw - 1400px) / 2) * -1);width:113.1rem;height:104.9rem;background:url(../img/intro/bg-history.png) no-repeat right -50rem top/cover;}
.history-wrap.fixed:before{position:fixed;top:var(--contentTop);right:-7px;}
.history-wrap .scroll-bar-container{position:absolute;top:2rem;left:50%;width:1px;height:100%;background:var(--color10);}
.history-wrap .scroll-bar{position:absolute;top:0;left:0;width:1px;height:10px;background-color:var(--color01);transition:all .5s;}
.history-wrap > .section{display:flex;justify-content:space-between;}
.history-wrap > .section ~ .section{margin-top:10rem;}
.history-wrap .history-img-area{position:relative;margin:0 9rem 0 0;width:calc(50% - 9rem);box-sizing:border-box;}
.history-wrap .history-img-area .txt01{margin:0 0 1.9rem;font-size:2rem;line-height:2.6rem;color:var(--color06);font-weight:var(--font-weight-medium);letter-spacing:0;}
.history-wrap .history-img-area .txt02{font-size:6rem;line-height:6.9rem;color:var(--color04);font-weight:var(--font-weight-medium);letter-spacing:0;}
.history-wrap .history-img-area .txt03{margin:1.1rem 0 0;font-size:1.6rem;line-height:2.2rem;color:var(--black20);font-weight:var(--font-weight-medium);letter-spacing:0.05em;text-align:right;}

@media screen and (max-width:1024.98px){
	.history-intro-wrap .history-txt-box{padding:0 3rem 0 0;}
}
@media screen and (max-width:768px){
	/* 연혁 인트로 */
	.history-intro-wrap{flex-wrap:wrap;margin:0 0 4rem;}
	.history-intro-wrap .history-txt-box{padding:0 0 3rem;}
	.history-intro-wrap .history-txt-box .txt01{margin:0 0 1rem;font-size:1.8rem;line-height:2.4rem;}
	.history-intro-wrap .history-txt-box .txt02{margin:0 0 2rem;font-size:3rem;line-height:4rem;}
	.history-intro-wrap .history-txt-box .txt03{margin:0 0 3rem;font-size:1.6rem;line-height:3.2rem;}
	.history-intro-wrap .history-img-box{margin:0;width:100%;}
	.history-intro-wrap .history-img-box .history-img-txt-box{padding:0 0 3rem 2rem;}
	
	/* 연혁 */
	.history-wrap:before{display:none;}
	.history-wrap .scroll-bar-container{top:calc(var(--historyImgAreaHeight) + 1.6rem);left:1rem;}
	.history-wrap > .section{flex-wrap:wrap;}
	.history-wrap .history-img-area{margin:0 0 3rem;padding:0;width:100%;}
	.history-wrap .history-img-area .txt01{margin:0 0 1rem;font-size:1.8rem;line-height:2.4rem;}
	.history-wrap .history-img-area .txt02{font-size:4rem;line-height:4.6rem;}
	.history-wrap .history-img-area .txt03{margin:5px 0 0;font-size:1.4rem;line-height:2rem;}
	
	/*QA요청으로 해당 페이지 연혁 이미지 사이즈,글자크기 여백 등 조정*/
	.history-intro-wrap .history-img-box .object-fit{aspect-ratio:2;}
	.history-wrap .history-img-area .history-img-wrap .history-img-box .history-img-list > .thumb{padding-bottom:39%;}
	.history-wrap .history-img-area .history-img-wrap .history-img-box .history-img-list > .thumb-txt{padding:1rem 2rem;font-size:3rem;}
}


@media screen and (max-width:480px){
	/*QA요청으로 해당 페이지 연혁 이미지 사이즈 조정*/
	.history-intro-wrap .history-img-box .object-fit{aspect-ratio:unset;}	
	.history-wrap .history-img-area .history-img-wrap .history-img-box .history-img-list > .thumb{padding-bottom:78.833%;}
}