@charset "utf-8";
/* *******************************************************
 * filename : main_responsive.css
 * description : 메인 레이아웃 및 컨텐츠 반응형 CSS
 * date : 2022-08-08
******************************************************** */

/* ******************  메인 비주얼 ********************** */
@media all and (max-width:1780px){
	.main-visual-arrow-box .slick-arrow.slick-prev{left:1rem;}
	.main-visual-arrow-box .slick-arrow.slick-next{right:1rem;}
}
@media all and (max-width:1480px){
	.main-visual-txt-inner{padding-inline:4rem; box-sizing:border-box;}
}
@media all and (max-width:800px){
	#mainVisual{height:100vh;}
	/* 메인 비주얼 :: 이미지 */
	.main-visual-item .main-visual-pc-img{display:none;}
	.main-visual-item .main-visual-m-img{display:block;}

	/* 메인 비주얼 :: 텍스트 */
	.main-visual-txt-box{align-items: flex-end; }
	.main-visual-txt-inner{padding:0; padding-bottom:6.8rem;}

	.main-visual-txt-box .main-visual-txt1{font-size:3.1rem;}
	.main-visual-txt-box .main-visual-txt1.main-visual-txt-svg{height:1.4rem;}
	.main-visual-txt-box .main-visual-txt2{font-size:1.4rem;}
	.main-visual-txt-box .main-visual-txt1 .cm-on-txt b:before{font-size:1.6rem; transform: translate(130%, -50%);}
	.main-visual-progress-bar{margin-left:15rem; width:18rem; max-width:calc(100vw - 15rem - (2 * var(--area-padding)));}

	.main-visual-arrow-box{top:auto; left:auto; transform:none; bottom:4rem; height:6rem;}
	.main-visual-arrow-box .slick-arrow{top:auto; transform:none;}
	.main-visual-arrow-box .slick-arrow.slick-prev{left:var(--area-padding);}
	.main-visual-arrow-box .slick-arrow.slick-next{left:calc(var(--area-padding) + 6.5rem);}

	.no-slick .main-visual-txt-inner{padding-bottom:4rem;}
	.no-slick .main-visual-txt-inner .main-visual-progress-bar{display: none;}
}

/* ******************  메인 컨텐츠 ********************** */
@media all and (max-width:800px){
	.main-con-box{display: block;}
	.main-con-box .notice-box{width:100%; margin-bottom:2rem; padding:2.5rem 3rem;}
	.main-con-box .main-link-box{display: block; width:100%; margin:0;}
	.main-con-box .main-link-box .main-link-item{width:100%; margin-inline:0; margin-bottom:2rem;}
	.main-con-box .main-link-box .main-link-item:last-child{margin-bottom:0;}
	.main-con-box .main-link-box .main-link-item a{height:16rem;}
	/* .main-con-box .main-link-box .main-link-item a .tit{top: 50%; transform: translateY(-50%);} */
}