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

/* ******************  메인 효과 ********************** */
.ms-preloader { width: 100%; height: 100%; position: fixed; z-index: 9999999; top: 0; left: 0; opacity: 1; visibility: visible; background-color: #151515; }
@media all and (min-width:1281px){
	.main-page #header{transform:translateY(calc(-1 * var(--header-height)));}
	#rightBar,
	.right-bar-footer{transform:translateX(var(--header-height));}
	
	.page-on #header{transform:translateY(0);}
	.page-on #rightBar,
	.page-on .right-bar-footer{transform:translateX(0);}
}


/* ******************  메인 비주얼 ********************** */
#mainVisual{overflow:hidden; width:100%; height:60rem; position:relative; background-color:#000 }
.main-visual-con .slick-track,
.main-visual-con .slick-list {
	-webkit-perspective: 2000;
	-webkit-backface-visibility: hidden;
}
.main-visual-con, 
.main-visual-con .slick-list,  
.main-visual-con .slick-track, 
.main-visual-item{
	height:100%;
}
.main-visual-con{z-index:1;}
/* 메인 비주얼 :: 이미지 */
.main-visual-item{position:relative;}
.main-visual-item .main-visual-img{
	width:100%;
	height:100%;
	background-size:cover !important;
}
.main-visual-item .main-visual-m-img{display:none;}
/* 메인 비주얼 :: 텍스트 */
.main-visual-txt-con{
	position:absolute; 
	left:0px; top:0;
	width:100%; 
	height:100%;
	z-index:1;
}
.main-visual-txt-box{
	display:flex;
	align-items:center;
	height:100%;
}
.main-visual-txt-box .main-visual-txt1,
.main-visual-txt-box .main-visual-txt2,
.main-visual-txt-box .main-visual-txt3,
.main-visual-txt-box .main-visual-more-btn{
	opacity:0; 
}
.main-visual-txt-box .main-visual-txt1{font-size:5.6rem; font-weight:700; letter-spacing:-0.04em; color:#fff; }
.main-visual-txt-box .main-visual-txt1.main-visual-txt-svg{font-size:initial; height:2.46rem;}
.main-visual-txt-box .main-visual-txt1.main-visual-txt-svg svg{transform:translateY(120%); height:100%; width:auto;}
.main-visual-txt-box .main-visual-txt2{font-size:1.8rem; letter-spacing:-0.03em; line-height:1.875; color:#000; margin-top:2rem; padding:2rem 3rem; border-radius:2rem; background:rgba(255,255,255,0.05); backdrop-filter: blur(14px) brightness(1.05);}

.cm-on-txt{color:var(--main-color);}
.cm-on-txt b{position: relative; margin-right:0.2rem;}
.cm-on-txt b:before{position: absolute; content:'溫'; font-family:'Noto Sans TC', "나눔고딕", NanumGothic, "Nanum Gothic","돋움", Dotum, Arial, sans-serif; color:#fff; font-weight:700; background:no-repeat center; background-size:cover; display: flex; justify-content:center; top: 0; transform: translate(130%, -20%); }

.main-visual-txt-box .main-visual-txt1 .cm-on-txt{font-size:1.07em; font-weight:700; margin:0 1.5rem;}
.main-visual-txt-box .main-visual-txt1 .cm-on-txt b{font-size:2.14em;}
.main-visual-txt-box .main-visual-txt1 .cm-on-txt b:before{font-size:2.1rem; right: 1rem; width:5.1rem; height:5.2rem; line-height:5rem; background-image:url('/images/main/intro_on_message.png'); text-indent:-0.5rem;}

/* 메인 비주얼 :: 텍스트 :: active효과 */
.active-item .main-visual-txt1,
.active-item .main-visual-txt2{
	animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.active-item .main-visual-txt1{animation-delay:0.1s;}
.active-item .main-visual-txt2{animation-delay:0.3s;}
.main-visual-txt-box .cm-word-split-JS.splitting .char{animation: text-fade-out 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}
.active-item .main-visual-txt-box .cm-word-split-JS.splitting .char{animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}

/* 메인 비주얼 :: Animation */
@keyframes image-zoom-out {
	from {
		transform: scale(1.08,1.08)
	}
	to {
		transform: scale(1.0,1.0)
	}
}
@keyframes text-active-animation {
	from {
		opacity:0;filter:Alpha(opacity=0);
		-webkit-transform: translateY(50px); 
		transform: translateY(50px); 
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		-webkit-transform: translateY(0); 
		transform: translateY(0); 
	}
}
@keyframes text-fade-out {
	from {
		opacity:1.0;filter:Alpha(opacity=100);
	}
	to {
		opacity:0;filter:Alpha(opacity=0);
	}
}


/* 메인 비주얼 :: 진행바 */
.no-slick .main-visual-progress-bar{display: none;}
.main-visual-progress-bar{position: relative; margin-top:6rem; width:24rem; height:4px; background:rgba(255,255,255,0.1); backdrop-filter:blur(1.5rem); border-radius:2px;}
.main-visual-progress-bar .bar{position: absolute; top:0; left:0; height:100%; background:#fff; border-radius:2px;}

.active-item.first-progress .main-visual-progress-bar .bar{animation: progressBar 4s linear both;}
.active-item .main-visual-progress-bar .bar{animation: progressBar 5.5s linear both;}

@keyframes progressBar {
	from {
		width:0%;
	}
	to {
		width:100%;
	}
}

/* 메인 비주얼 :: 화살표 */
.main-visual-arrow-box{position: absolute; top:50%; left:50%; transform:translateX(-50%); width:100%; z-index:9; box-sizing:border-box;}
.main-visual-arrow-box .slick-arrow{position: absolute; top:50%; transform:translateY(-50%); width:6rem; height:6rem; font-size:2.4rem; color:#fff; z-index:9; backdrop-filter:blur(1.5rem); border-radius:50%; background:rgba(255,255,255,0.1);}
.main-visual-arrow-box .slick-arrow.slick-prev{left:0;}
.main-visual-arrow-box .slick-arrow.slick-next{right:0;}


/* ******************  메인 컨텐츠 ********************** */
#mainContent1{margin:8rem 0;}
.main-con-box{display: flex; justify-content:space-between;}
.main-con-box .notice-box{width:calc(50% - 2rem); border-radius:2rem; background:#F5EFEB; padding:5rem; box-sizing:border-box; opacity:0; transform:translateY(50px); transition:var(--transition-custom2); transition-delay:0.4s}
.main-con-box .notice-box .tit-box{display: flex; justify-content:space-between; align-items:center;}
.main-con-box .notice-box .tit-box .tit{font-size:3rem; line-height:1.4; letter-spacing:-0.024em; color:#612D12; font-weight:700;}
.main-con-box .notice-box .tit-box .link-btn{display: flex; align-items:center; justify-content:center; background:#fff; border-radius:50%; font-size:2.4rem; color:#612D12; width:5rem; height:5rem; transition:var(--transition-custom);}
.main-con-box .notice-box .notice-list{margin-top:3.7rem; min-height: 10rem;}
.main-con-box .notice-box .notice-list .no-list{display: flex; align-items:center; justify-content:center; color: #777; font-size: 15px; border-top: 1px solid #333; border-bottom: 1px solid #ddd; height:13rem;}
.main-con-box .notice-box .notice-list .list-item{margin-bottom:1.2rem;}
.main-con-box .notice-box .notice-list .list-item:last-child{margin-bottom:0;}
.main-con-box .notice-box .notice-list .list-item a{display: flex; align-items:center; justify-content:space-between; font-size:1.6rem; line-height:1.5; letter-spacing:0.024em; color:#000;}
.main-con-box .notice-box .notice-list .list-item a .txt{position: relative; font-weight:600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right:2rem; box-sizing:border-box;}
.main-con-box .notice-box .notice-list .list-item a .txt:before{position: absolute; content:''; bottom:0; left:0; width:0; height:2px; background:#000; transition:var(--transition-custom);}
.main-con-box .notice-box .notice-list .list-item a .date{opacity:0.5;}

.main-con-box .notice-box .tit-box .link-btn:hover{background:#612D12; color:#fff;}
.main-con-box .notice-box .notice-list .list-item a:hover .txt:before{width:calc(100% - 2rem);}

.main-con-box .main-link-box{display: flex; justify-content:space-between; flex-wrap:wrap; width:calc(50% + 2rem); margin:-1rem;}
.main-con-box .main-link-box .main-link-item{position: relative; display: block; margin:1rem; width:calc(50% - 2rem); opacity:0; transform:translateY(50px); transition:var(--transition-custom2);}
.main-con-box .main-link-box .main-link-item a{position: relative; display: flex; align-items:center; width:100%; height:15rem; /* padding-top:100%; */ border-radius:2rem; overflow:hidden; padding:0 4rem; box-sizing:border-box;}
.main-con-box .main-link-box .main-link-item a .tit{font-size:2.4rem; line-height:1.416; letter-spacing:-0.024em; color:#fff; font-weight:700;}
.main-con-box .main-link-box .main-link-item a .tit .plus-txt{display: block; font-size:1.2rem; letter-spacing:-0.024em; line-height:1.33; font-weight:500;margin-bottom:0.5rem;}
.main-con-box .main-link-box .main-link-item a .img-box{position: absolute; right:3.5rem;}
.main-con-box .main-link-box .main-link-item a .img-box img{width:100%; height:100%;}
.main-con-box .main-link-box .main-link-item:nth-child(1) a{background:rgba(237, 82, 98, 0.5)}
.main-con-box .main-link-box .main-link-item:nth-child(1) a .img-box{display: block; width: 8.2rem; height: 7.6rem; }
.main-con-box .main-link-box .main-link-item:nth-child(2) a{background:rgba(236, 82, 96, 0.7)}
.main-con-box .main-link-box .main-link-item:nth-child(2) a .img-box{display: block; width: 8.7rem; height: 7.4rem;}
.main-con-box .main-link-box .main-link-item:nth-child(3) a{background:#ED5262}
.main-con-box .main-link-box .main-link-item:nth-child(3) a .img-box{display: block; width: 5.8rem; height: 9.4rem; }
.main-con-box .main-link-box .main-link-item:nth-child(4) a{background:#8E3943}
.main-con-box .main-link-box .main-link-item:nth-child(4) a .img-box{display: block; width: 14.4rem; height: 7.9rem; right:2rem}

.main-con-box .main-link-box .main-link-item:nth-child(1){transition-delay:0.5s;}
.main-con-box .main-link-box .main-link-item:nth-child(2){transition-delay:0.6s;}
.main-con-box .main-link-box .main-link-item:nth-child(3){transition-delay:0.7s;}
.main-con-box .main-link-box .main-link-item:nth-child(4){transition-delay:0.8s;}

.animated .main-con-box .notice-box,
.animated .main-con-box .main-link-box .main-link-item{opacity:1; transform:translateY(0);}