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

.ms-preloader {width: 100%; height: 100%; top: 0; left: 0; opacity: 1; visibility: visible; background-color: #000; position: fixed; z-index: 9999999;}

/* ******************  메인 비주얼 ********************** */
#mainVisual{width:100%; height:100vh; position:relative; background-color:#000; overflow:hidden;}
.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.slick-slide[aria-hidden="true"] * {
  pointer-events: none;
}
.main-visual-con{z-index:1;}
.main-visual-con:before{position: absolute; top: 0; left: 0; width: 100%; height: 30rem; opacity: 0.8; content: ''; z-index: 1; background: url('../images/main/main_visual_gra_top.png') center top no-repeat; background-size: cover; mix-blend-mode: multiply;}
.main-visual-item{position:relative;}
.main-visual-item:before{position: absolute; bottom: -10%; left: 0; width: 100%; height: 70%; opacity: 0.6; content: ''; z-index: 1;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&1+0,0+100 */
background: linear-gradient(to top,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 80%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */}
/* 메인 비주얼 :: 이미지 */
.main-visual-item .main-visual-img{
	width:100%;
	height:100%;
	background-size:cover !important;
	transform: scale(1.2);
	transition: all 1.5s cubic-bezier(0.7, 0, 0.3, 1);
	opacity:0.8;filter:Alpha(opacity=80);
}
.main-visual-item .main-visual-m-img{display:none;}

/* 메인 비주얼 :: 동영상(유툽) */
.main-visual-item .background-video{position:absolute; top:0; left:0px; width:100%; height:100%}
.main-visual-item .background-video iframe{
	width: 100vw;
	height: calc(56.25vw + 300px); /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
	min-height: calc(100vh + 300px);
	min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events:none;
	opacity:0;filter:Alpha(opacity=0); 
	transition: opacity 3s 0.2s;
}
.main-visual-item .background-video.start iframe{opacity:1;filter:Alpha(opacity=100);}

/* 메인 비주얼 :: 동영상(다이렉트영상) */
.main-visual-item .background-video video{
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

/* 메인 비주얼 :: 텍스트 */
.main-visual-txt-con{
	position:absolute; 
	left:0px; top:0;
	width:100%; height:100%; display: block;
	z-index:2;
}
.main-visual-txt-con.blank{}
.main-visual-txt-box{
	display:flex;
	align-items:flex-end;
	padding-bottom: 8.5% !important;
	height:100%;
	box-sizing: border-box;
}
.main-visual-txt-box .main-visual-txt1,
.main-visual-txt-box .main-visual-txt2{
	opacity:0; transform: translateX(-200px); transition: var(--transition-custom2);
}
.main-visual-txt-box .main-visual-txt1{font-size:2.6rem; line-height: 1.3; font-weight:600; color:#fff;}
.main-visual-txt-box .main-visual-txt2{margin-top: 3.5rem; font-size:7rem; line-height: 1.28; font-weight: 700; color:#fff;}

/* 메인 비주얼 :: Dots */
.main-slide-dots-wrapper{position:absolute; bottom:8.5%; left:0; width:100%; z-index:99;}
.main-slide-dots{}
.main-slide-dots ul{position:relative; display:flex; counter-reset:slide-counter;}
.main-slide-dots ul li{position:relative; width:100%; counter-increment:slide-counter;}
.main-slide-dots ul li:before{position:absolute; content:''; top:50%; left:0; transform:translateY(-50%); width:1.2rem; height:1.2rem; border:2px solid rgba(255,255,255,0.4); border-radius:50%; box-sizing:border-box; transition:var(--transition-custom);}
.main-slide-dots ul li:last-child:after{position:absolute; content:''; top:50%; right:0; transform:translateY(-50%); width:1.2rem; height:1.2rem; border:2px solid rgba(255,255,255,0.4); border-radius:50%; box-sizing:border-box;}
.main-slide-dots ul li button{position:relative; display:block; width:100%; height:2px; pointer-events:none;}
.main-slide-dots ul li button .bar{position:relative; display:block; width:calc(100% - 1.2rem); height:2px; background:rgba(255,255,255,0.4); margin-left:1.2rem;}
.main-slide-dots ul li button .bar:before{position:absolute; content:''; top:0; left:0; width:0; height:100%; background:#fff; transition:none;}
.main-slide-dots ul li:last-child button .bar{width:calc(100% - 2.4rem);}
.main-slide-dots ul li.slick-active:before{border-color:#fff; background:#fff;}
.main-slide-dots ul li.slick-active.is-animating button .bar:before{width:100%; transition:width var(--dot-duration, 5.4s) linear;}

/* main-start */
.main-start#mainVisual .main-slide-dots-wrapper{opacity:1; transform:translateY(0);}

/* 메인 비주얼 :: active효과 */
.active-item.main-visual-item .main-visual-img{transform: scale(1.0);}
.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; animation-delay:0.3s;
}
.main-visual-dots ul li.slick-active button svg{transform:scale(1) rotate(-90deg);}
.main-visual-dots ul li.slick-active span:after{opacity: 0; transition-duration:0s;}


@keyframes text-active-animation {
	from {
		opacity:0;filter:Alpha(opacity=0);
		-webkit-transform: translateX(-200px); 
		transform: translateX(-200px); 
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		-webkit-transform: translateX(0); 
		transform: translateX(0); 
	}
}

/* ******************  메인 비주얼 ********************** */
@media all and ( max-width: 1280px ){
	.main-visual-txt-box{padding-bottom: 11rem !important;}
	.main-visual-custom-box{bottom: 6rem; margin-bottom: 0;}
	.main-visual-txt-box .main-visual-txt1{font-size:7rem;}
	.main-visual-txt-box .main-visual-txt2{font-size:2rem;}
}
@media all and ( max-width: 800px ){
	/* 메인 비주얼 :: 텍스트 */
	.main-visual-txt-box{padding-bottom: 17rem !important;}
	.main-visual-txt-box .main-visual-txt1{font-size:2.6rem; line-height: 1.22;}
	.main-visual-txt-box .main-visual-txt2{margin-top: 3rem; font-size:5rem;/* font-size:6rem; */ line-height: 1.2; word-break: break-all; padding-right:5rem;}
	.main-visual-txt-box .main-visual-txt2 br{display: none;}
}


/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
/* 공통 :: 타이틀 */
.main-tit-box{text-align:center;}
.main-tit-box .cm-main-category{display: block; font-size:2.4rem; color:var(--main-color); font-weight:700; margin-bottom:3.5rem; opacity:0; transform:translateY(50px); transition:var(--transition-custom2);}
.main-tit-box .cm-main-tit{font-size:5.8rem; color:#000; font-weight:700; line-height: 1.3;
 opacity:0; transform:translateY(50px); transition:var(--transition-custom2);}
.main-tit-box .cm-main-txt{font-size:1.8rem; line-height:1.7; letter-spacing:-0.05em; color:#555; font-weight:500; margin-top:4rem; opacity:0; transform:translateY(50px); transition:var(--transition-custom2);}
.main-tit-box .main-tit.splitting .char{
	opacity:0;
	transform:translateY(100%);
	transition:var(--transition-custom2);
	transition-property:opacity, transform;
}
 /* animation일때 */ 
/* .aos-animate .main-tit-box .main-tit.splitting .char{
	-webkit-animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
} */
 /* transition일때 */ 
.active-section .main-tit.splitting .char,
.animated .main-tit.splitting .char{
	opacity:1.0;
	transform:translateY(0);
}
/* animated */
.animated .main-tit-box .cm-main-category,
.animated .main-tit-box .cm-main-tit,
.animated .main-tit-box .cm-main-txt{opacity:1; transform:translateY(0);}
.animated .main-tit-box .cm-main-category{transition-delay:0s;}
.animated .main-tit-box .cm-main-tit{transition-delay:0.2s;}
.animated .main-tit-box .cm-main-txt{transition-delay:0.4s;}

@media all and (max-width:1280px){
	/* 공통 :: 타이틀 */
	.main-tit-box .cm-main-category{font-size:2rem; margin-bottom:3rem;}
	.main-tit-box .cm-main-tit{font-size:5rem;}
	.main-tit-box .cm-main-txt{margin-top:3rem;}
}
@media all and (max-width:800px){
	/* 공통 :: 타이틀 */
	.main-tit-box .cm-main-category{font-size:2.4rem; margin-bottom:3rem;}
	.main-tit-box .cm-main-tit{font-size:4.2rem; word-break: break-all;}
	.main-tit-box .cm-main-txt{margin-top:4rem;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠1(퀵메뉴) -------- */
#mainContent1{padding:12rem 0;}
.main-imagezone-wrap{display: flex; justify-content:space-between;}
.main-imagezone-wrap .left-box{width:32%; display: flex; flex-direction: column; justify-content: space-between;}
.main-imagezone-wrap .left-box .list-item{border-radius:1rem; opacity:0; transform:translateY(50px); transition:var(--transition-custom2);}
.main-imagezone-wrap .left-box .list-item a{display: flex; align-items:center; justify-content:space-between; padding:3rem 5rem; box-sizing:border-box;}
.main-imagezone-wrap .left-box .list-item .txt-box{width:50%;}
.main-imagezone-wrap .left-box .list-item .txt-box .tit{font-size:3rem; color:#000; font-weight:600;}
.main-imagezone-wrap .left-box .list-item .txt-box .txt{font-size:1.5rem; line-height:1.46; letter-spacing:-0.05em; color:#888; margin-top:2.5rem; word-break: break-all;}
.main-imagezone-wrap .left-box .list-item .icon-box{width:14rem;}
.main-imagezone-wrap .left-box .list-item .icon-box .circle{display: block; position: relative; width:100%; height:0; padding-top:100%; border-radius:50%; background:#fff;}
.main-imagezone-wrap .left-box .list-item .icon-box .circle img{position: absolute; inset:0; margin:auto; transition:var(--transition-custom); transform: translate(5px, 10px); /* width:100%; */}
.main-imagezone-wrap .right-box{position: relative; width:66%; opacity:0; transform:translateY(50px); transition:var(--transition-custom2);}
.main-imagezone-wrap .right-box .imagezone-slide-list{border-radius:1rem; overflow:hidden;}
.main-imagezone-wrap .right-box .imagezone-slide-list .slide-item{}
.main-imagezone-wrap .right-box .imagezone-slide-list .slide-item img{max-width:100%; object-fit:cover;}
.main-imagezone-wrap .right-box .imagezone-slide-dots{position: absolute; top:calc(100% + 2.4rem); left:50%; transform:translateX(-50%);}
.main-imagezone-wrap .right-box .imagezone-slide-dots ul{display: flex; }
.main-imagezone-wrap .right-box .imagezone-slide-dots ul li{margin:0 5px;}
.main-imagezone-wrap .right-box .imagezone-slide-dots ul li button{width:1rem; height:1rem; border-radius:1rem; background:#ddd; text-indent:-9999px; font-size:0; transition:var(--transition-custom);}
.main-imagezone-wrap .right-box .imagezone-slide-dots ul li.slick-active button{width:3rem; background:#aaa;}

.main-imagezone-wrap .left-box .list-item:nth-child(1){background:#FFF4C8;}
.main-imagezone-wrap .left-box .list-item:nth-child(2){background:#eaeaea;}
.main-imagezone-wrap .left-box .list-item:nth-child(3){background:#FDE0D5;}

/* hover */
.main-imagezone-wrap .left-box .list-item:hover .icon-box .circle img{transform: translate(5px, -5px);}
/* animated */
.animated .main-imagezone-wrap .left-box .list-item,
.animated .main-imagezone-wrap .right-box{opacity:1; transform:translateY(0);}
.animated .main-imagezone-wrap .left-box .list-item:nth-child(1){transition-delay:0s;}
.animated .main-imagezone-wrap .left-box .list-item:nth-child(2){transition-delay:0.2s;}
.animated .main-imagezone-wrap .left-box .list-item:nth-child(3){transition-delay:0.4s;}
.animated .main-imagezone-wrap .right-box{transition-delay:0.6s;}

@media all and (max-width:1280px){
	.main-imagezone-wrap{align-items: center;}
	.main-imagezone-wrap .left-box{margin:-1rem 0;}
	.main-imagezone-wrap .left-box .list-item{margin:1rem 0;}
	.main-imagezone-wrap .left-box .list-item a{padding:3rem;}
	.main-imagezone-wrap .left-box .list-item .icon-box{width:10rem;}
}
@media all and (max-width:800px){
	#mainContent1{padding:8rem 0;}
	.main-imagezone-wrap{display: block;}
	.main-imagezone-wrap .left-box{width:100%;}
	.main-imagezone-wrap .left-box .list-item{margin:0.5rem 0;}
	.main-imagezone-wrap .left-box .list-item a{padding:2rem 4rem;}
	.main-imagezone-wrap .left-box .list-item .txt-box{width:50%;}
	.main-imagezone-wrap .left-box .list-item .txt-box .tit{font-size:2.8rem;}
	.main-imagezone-wrap .left-box .list-item .txt-box .txt{display: none;}
	.main-imagezone-wrap .right-box{width:100%; margin-top:2.5rem;}
	.main-imagezone-wrap .right-box .imagezone-slide-dots{top:calc(100% + 2.4rem);}
	.main-imagezone-wrap .left-box .list-item .icon-box .circle img {width: 100%;}
}


/* -------- 메인 컨텐츠 :: 컨텐츠2(학교시설) -------- */
#mainContent2{padding:12rem 0 18rem; background:url("/images/main/main_facilities_bg.png") no-repeat center bottom / cover;}
.main-facilities-wrap{display: flex; align-items: center; margin-top:13rem; opacity:0; transform:translateY(50px); transition:var(--transition-custom2);}
.main-facilities-wrap .main-facilities-list{display: flex; flex-shrink: 0; align-items: center; transform: translateX(-100%);}
.main-facilities-wrap .main-facilities-list .list-item{margin:0 1.5rem; }
.main-facilities-wrap .main-facilities-list .list-item .img-box{display: block; border-radius: 1rem; filter: drop-shadow(0.5rem 0.5rem 2rem rgba(0, 0, 0, 0.15)); overflow:hidden;}
.main-facilities-wrap .main-facilities-list .list-item .img-box img{width:480px; /* width:auto; */ transition:var(--transition-custom);}
.main-facilities-wrap .main-facilities-list .list-item .txt{font-size:1.8rem; line-height:1.77; letter-spacing:-0.05em; color:#222; font-weight:500; text-align:center; margin-top:2.2rem;}

.main-facilities-wrap .main-facilities-list .list-item:nth-child(odd){transform:translateY(-3rem);}
.main-facilities-wrap .main-facilities-list .list-item:nth-child(even){transform:translateY(3rem);}

.main-facilities-wrap.is-animated .main-facilities-list{animation: facilities-flow 50s linear infinite; /* animation: facilities-flow 15s linear infinite; */}

@keyframes facilities-flow {
	from { transform:translate3d(-100%, 0, 0); }
	to { transform:translate3d(-200%, 0, 0); }
}
/* hover */
.main-facilities-wrap .main-facilities-list .list-item:hover .img-box img{transform:scale(1.05);}
/* animated */
.animated .main-facilities-wrap{opacity:1; transform:translateY(0px); transition-delay:0.6s;}

@media all and (max-width:800px){
#mainContent2{padding:6rem 0 8rem;}
.main-facilities-wrap{margin-top:8rem;}
.main-facilities-wrap .main-facilities-list .list-item{width:34rem;}
.main-facilities-wrap .main-facilities-list .list-item .img-box img{width:100%;}

.main-facilities-wrap .main-facilities-list .list-item:nth-child(odd){transform:translateY(-3rem);}
.main-facilities-wrap .main-facilities-list .list-item:nth-child(even){transform:translateY(3rem);}
}


/* -------- 메인 컨텐츠 :: 컨텐츠3(News) -------- */
#mainContent3{padding:18rem 0;}
.main-media-wrap{display: flex; justify-content:space-between; margin-top:8rem;}
.main-media-wrap .main-media-tab-style{display: flex; flex-direction: column; justify-content: space-between; width:20rem;}
.main-media-wrap .main-media-tab-style .main-media-tab{}
.main-media-wrap .main-media-tab-style .main-media-tab ul{margin:-1.5rem 0;}
.main-media-wrap .main-media-tab-style .main-media-tab ul li{margin:2.5rem 0;}
.main-media-wrap .main-media-tab-style .main-media-tab ul li a{display: block; font-size:2.4rem; color:#aaa; font-weight:700; transform-origin:left; transition:var(--transition-custom);}
.main-media-wrap .main-media-tab-style .main-media-tab ul li a em{font-weight:inherit;}

.cm-more-btn-box{}
.cm-more-btn-box .cm-more-btn{position: relative; display: flex; align-items:center; justify-content:center; width:8rem; height:8rem;}
.cm-more-btn-box .cm-more-btn:before{position: absolute; content:''; width:100%; height:100%; border-radius:50%; border:1px solid #ddd; box-sizing:border-box; transition:var(--transition-custom);}
.cm-more-btn-box .cm-more-btn span{position: relative; font-size:1.5rem; color:var(--main-color); font-weight:700; transition:var(--transition-custom);}
.cm-more-btn-box .cm-more-btn:hover span{color:#fff;}
.cm-more-btn-box .cm-more-btn:hover:before{border-color:var(--main-color); background:var(--main-color); transform:scale(1.375);}

.main-media-wrap .main-media-tab-style .main-media-tab ul li.selected a{color:var(--main-color);}

.main-media-wrap .right-box{width:calc(100% - 20rem); height:43rem; /* overflow-y:auto; overflow-x:hidden; */}
/* .main-media-wrap .right-box::-webkit-scrollbar { width: 3px; height: 3px; }
.main-media-wrap .right-box::-webkit-scrollbar-track { background-color: #eee; }
.main-media-wrap .right-box::-webkit-scrollbar-thumb { background-color: #aaa; } */

.main-media-list{}
.main-media-list .list-item{border-bottom:1px solid #ddd; }
.main-media-list .list-item a{display: flex; align-items:center; padding:3rem 2.5rem; box-sizing:border-box;}
.main-media-list .list-item .date-box{display: flex; align-items:center; justify-content:center; flex-direction: column; width:8rem; height:8rem; border-radius:1rem; background:#f3f3f3; text-align:center;}
.main-media-list .list-item .date-box .date{font-size:1.8rem; color:#555; font-weight:700;}
.main-media-list .list-item .date-box .years{font-size:1.2rem; color:rgba(85,85,85,0.5); font-weight:700; margin-top:0.3rem;}
.main-media-list .list-item .tit-box{width:calc(100% - 8rem); padding:0 3rem; box-sizing:border-box;}
.main-media-list .list-item .tit-box .category{display: block; font-size:1.4rem; color:var(--main-color); font-weight:700; margin-bottom:1rem;}
.main-media-list .list-item .tit-box .tit{font-size:1.8rem; line-height:1.4; color:#555; font-weight:500; word-break: break-all; overflow:hidden;display:block;display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; transition:var(--transition-custom); transform-origin:left;}

.main-media-list .list-item .item-image_wrapper { position: absolute; left:50% !important; margin-left:50rem; width: 42rem; height: 26rem; pointer-events: none; opacity: 0; z-index: 10; border-radius:1rem; filter: drop-shadow(0px 4px 4rem rgba(0, 0, 0, 0.15)); overflow:hidden; transform: translate(-50%, 0);}
.main-media-list .list-item .item-image_inner { position: relative; width: 100%; height: 100%; overflow: hidden; }
.main-media-list .list-item .item-image_inner .item-image { position: absolute; left: 0; top: 0; height: 100%; width: 100%; object-fit: cover; }

@media all and (min-width:801px){
	.main-media-list .list-item:hover .tit-box .tit{color:#222; transform:scale(1.1);}
	.main-media-wrap .main-media-tab-style .main-media-tab ul li.selected a{transform:scale(1.4);}
}
@media all and (max-width:800px){
	#mainContent3{padding:10rem 0;}
	.main-media-wrap{display: block;    margin-top: 5rem}
	.main-media-wrap .main-media-tab-style{width:100%; margin-bottom:3rem;}
	.main-media-wrap .main-media-tab-style .main-media-tab ul{display: flex; align-items:center; justify-content:center; margin:0 1rem;}
	.main-media-wrap .main-media-tab-style .main-media-tab ul li{margin:0 1rem;}
	.main-media-wrap .main-media-tab-style .main-media-tab ul li a{font-size:2rem;}
	
	.main-media-wrap .main-media-tab-style .cm-more-btn-box{display: none;}
	
	.main-media-wrap .right-box{width:100%; height:30.3rem;}
	
	.main-media-list{border-top:0 !important;}
	.main-media-list .list-item a{padding:2rem 0rem;}
	.main-media-list .list-item .date-box{width:6rem; height:6rem;}
	.main-media-list .list-item .date-box .date{font-size:1.6rem;}
	.main-media-list .list-item .tit-box{width:calc(100% - 6rem); padding:0 0 0 2rem;}
	.main-media-list .list-item .tit-box .category{font-size:1.2rem;}
	.main-media-list .list-item .tit-box .tit{font-size:1.6rem;}
	
	.main-media-wrap > .cm-more-btn-box{margin:4rem auto 0;}
	.main-media-wrap > .cm-more-btn-box .cm-more-btn{margin:0 auto;}
}


/* -------- 메인 컨텐츠 :: 컨텐츠(Global) -------- */
#mainContent4{padding:0rem 0 10rem;}
.main-global-wrap{display: flex; align-items:center; justify-content:space-between; background:url("/images/main/main_global_bg.jpg") no-repeat center / cover; border-radius:4rem; padding:12rem 15rem; box-sizing:border-box;}
.main-global-wrap .main-tit-box{width:50%; padding-right:3rem; box-sizing:border-box; text-align:left;}
.main-global-wrap .main-tit-box .cm-main-tit{color:#fff; word-break: break-all; line-height:1.35;}
.main-global-wrap .main-global-con{width:50%; max-width:68rem; display: flex; align-items:center; justify-content:space-between;}
.main-global-wrap .main-global-con .global-item{position: relative; width:calc(50% - 2rem); opacity:0; transform:translateY(50px); transition:var(--transition-custom2);}
.main-global-wrap .main-global-con .global-item:nth-child(1){margin-top:6rem;}
.main-global-wrap .main-global-con .global-item:nth-child(2){margin-top:-6rem;}
.main-global-wrap .main-global-con .global-item a{display: block; position: relative; overflow:hidden; border-radius:1rem; filter: drop-shadow(5px 5px 40px rgba(0, 0, 0, 0.4));}
.main-global-wrap .main-global-con .global-item .bg{ transition:var(--transition-custom);}
.main-global-wrap .main-global-con .global-item .bg img{width:100%; height:100%; object-fit:cover;}
.main-global-wrap .main-global-con .global-item .txt-box{position: absolute; bottom:0; left:0; width:100%; text-align:center; padding:0 var(--area-padding) 3.5rem; box-sizing:border-box;  transition:var(--transition-custom);}
.main-global-wrap .main-global-con .global-item .txt-box .tit{font-size:2.6rem; line-height:1; letter-spacing:0; color:#fff; font-weight:600;}
.main-global-wrap .main-global-con .global-item .txt-box .txt{font-size:1.4rem; line-height:1; letter-spacing:0; color:rgba(255,255,255,0.5); font-weight:600; margin-top:1.5rem;}
.main-global-wrap .main-global-con .global-item .hover-box{position: absolute; top:100%; left:0; display: flex; flex-direction: column; justify-content: flex-end; align-items:center; width:100%; height:100%; background:rgba(129,0,0,0.8); text-align:center; padding:3rem; box-sizing:border-box; transition:var(--transition-custom);}
.main-global-wrap .main-global-con .global-item .hover-box .icon-box{}
.main-global-wrap .main-global-con .global-item .hover-box .icon-box img{max-width:100%;}
.main-global-wrap .main-global-con .global-item .hover-box .hover-txt-box{margin-top:4rem;}
.main-global-wrap .main-global-con .global-item .hover-box .hover-txt-box .tit{font-size:3.2rem; color:#fff; font-weight:600;}
.main-global-wrap .main-global-con .global-item .hover-box .hover-txt-box .txt{font-size:1.6rem; color:rgba(255,255,255,0.4); font-weight:600; margin-top:1.5rem;}
.main-global-wrap .main-global-con .global-item .hover-box .more-btn{display: flex; align-items:center; justify-content:center; width:8rem; height:8rem; border-radius:50%; background:#fff; margin-top:5rem;}
.main-global-wrap .main-global-con .global-item .hover-box .more-btn span{font-size:1.5rem; color:var(--main-color); font-weight:700; margin:auto;}


/* animated */
.animated .main-global-wrap .main-global-con .global-item{opacity:1; transform:translateY(0);}
.animated .main-global-wrap .main-global-con .global-item:nth-child(1){transition-delay:0.5s;}
.animated .main-global-wrap .main-global-con .global-item:nth-child(2){transition-delay:0.7s;}

@media all and (min-width:801px){
	.main-global-wrap .main-global-con .global-item:hover .bg{filter:blur(1rem);}
	.main-global-wrap .main-global-con .global-item:hover a > .txt-box{opacity:0;}
	.main-global-wrap .main-global-con .global-item:hover .hover-box{top:0;}
}
@media all and (max-width:1280px){
	.main-global-wrap{padding:12rem 5rem;}
}
@media all and (max-width:800px){
	#mainContent4{padding-bottom:6rem;}
	.main-global-wrap{display: block; padding:8rem 2.5rem; box-sizing:border-box; width:100vw; margin-left:calc(-1 * var(--area-padding)); border-radius:0;}
	.main-global-wrap .main-tit-box{width:100%; padding-right:0; text-align:center;}
	
	.main-global-wrap .main-global-con{width:100%; max-width:none; margin-top:5rem;}
	.main-global-wrap .main-global-con .global-item{width:calc(50% - 1rem);}
	.main-global-wrap .main-global-con .global-item:nth-child(1){margin-top:0rem;}
	.main-global-wrap .main-global-con .global-item:nth-child(2){margin-top:0rem;}
	.main-global-wrap .main-global-con .global-item .txt-box .tit{font-size:2rem;}
	.main-global-wrap .main-global-con .global-item .txt-box .txt{font-size:1.2rem; margin-top:1rem;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠(HANXIAO) -------- */
#mainContent5{position: relative; padding:0rem 0 18rem;}
#mainContent5 .cm-main-tit{color:var(--main-color);}
.main-hanxiao-slide{overflow:visible !important; margin-top:10rem; opacity:0; transform:translateY(50px); transition:var(--transition-custom2);}
.main-hanxiao-slide .slide-item{position: relative;}
.main-hanxiao-slide .slide-item a{position: relative; display: block; border-radius:1rem; overflow:hidden;}
.main-hanxiao-slide .slide-item .img-box{position: relative; width:100%; max-width:350px; margin:0 auto;}
.main-hanxiao-slide .slide-item .img-box > span{position: relative; display: block; width:100%; height:0; padding-top:100%;}
.main-hanxiao-slide .slide-item .img-box > span img{position: absolute; inset:0; width:100%; height:100%; object-fit:cover;  transition:var(--transition-custom);}
.main-hanxiao-slide .slide-item .hover-box{position: absolute; top:100%; left:0; display: flex; flex-direction: column; justify-content: space-between; align-items:center; width:100%; height:100%; background:rgba(139,3,4,0.8); text-align:center; padding:5rem; box-sizing:border-box; transition:var(--transition-custom);}
.main-hanxiao-slide .slide-item .hover-box .date{font-size:1.6rem; line-height:2; letter-spacing:-0.05em; color:rgba(255,255,255,0.6); font-weight:600;}
.main-hanxiao-slide .slide-item .hover-box .tit{font-size:2.2rem; line-height:1.45; letter-spacing:-0.05em; color:#fff; font-weight:600; word-break: break-all;}
.main-hanxiao-slide .slide-item .hover-box .more-btn{display: flex; align-items:center; justify-content:center; width:8rem; height:8rem; border-radius:50%; background:#fff;}
.main-hanxiao-slide .slide-item .hover-box .more-btn span{font-size:1.5rem; color:var(--main-color); font-weight:700; margin:auto;}


#mainContent5 .hanxiao-icon{position: absolute; top:50%; left:50%; transform:translate(-50%, calc(-50% + 50px)); pointer-events:none; z-index:-1; opacity:0; transition:var(--transition-custom2);}
#mainContent5 .hanxiao-icon img{width:100%; height:100%;}
#mainContent5 .hanxiao-icon.icon01{width:101.1rem; height:102.5rem; margin-left:70rem; margin-top:10rem;}
#mainContent5 .hanxiao-icon.icon02{width:15.4rem; height:15rem; margin-left:-75rem; margin-top:-37rem;}
#mainContent5 .hanxiao-icon.icon03{width:6.2rem; height:6rem; margin-left:-40rem; margin-top:30rem;}

/* animated */
.animated .main-hanxiao-slide{opacity:1; transform:translateY(0); transition-delay:0.5s;}
.animated#mainContent5 .hanxiao-icon{opacity:1; transform:translate(-50%, -50%);}
.animated#mainContent5 .hanxiao-icon.icon01{transition-delay:0.5s;}
.animated#mainContent5 .hanxiao-icon.icon02{transition-delay:0.7s;}
.animated#mainContent5 .hanxiao-icon.icon03{transition-delay:0.9s;}

@media all and (min-width:801px){
	.main-hanxiao-slide .slide-item a:hover .img-box span img{filter:blur(1rem); transform:scale(1.05);}
	.main-hanxiao-slide .slide-item a:hover .hover-box{top:0;}
}
@media all and (max-width:800px){
	#mainContent5 .main-tit-box .cm-main-tit{font-size:6.4rem;}
	.main-hanxiao-slide{width:70%; margin-top:7rem; margin-left:0 !important;}
	.main-hanxiao-slide .slide-item .img-box{max-width:none;}
	
	#mainContent5 .hanxiao-icon.icon01{margin-left: 45rem;}
	#mainContent5 .hanxiao-icon.icon02{margin-left: -20rem;}
	#mainContent5 .hanxiao-icon.icon03{margin-left: -10rem;}
}


/* ******************  메인 오른쪽 퀵메뉴 ********************** */
#rightBar{position:fixed; top:50%; right: 3.12%; transform:translateY(-50%); width:9rem; border-radius: 1rem; overflow: hidden;z-index:99; box-shadow: 0 0.4rem 0.4rem 0 rgba(0,0,0,0.25);}
#rightBar .tit{width: 100%; height: 2.5rem; font-size: 1.1rem; letter-spacing: -0.05em; font-weight: 600; color: #fff; background-color: var(--main-color); display: flex; align-items: center; justify-content: center;}
#rightBar > ul {width:100%; background-color: #fff;}
#rightBar > ul > li{width:100%;}
#rightBar > ul > li > a{display:block; width:100%; height:9rem; font-size: 1.2rem; font-weight: 500; letter-spacing: -0.05em; color:#555; text-align:center; display: flex; flex-direction: column; align-items: center; justify-content: center; transition:var(--transition-custom);}
#rightBar > ul > li > a img{margin: 0 auto 1rem; display: block; transition:var(--transition-custom); transition-property: transform;}
#rightBar > ul > li > a:hover img{transform:translateY(-3px);}

@media all and (max-width:800px){
	#rightBar{display: none;}
}