.wrap{}

/* 애니메이션 */
.circle_tx {animation:circle_tx 60s infinite linear;}
@keyframes circle_tx {
	0{transform:rotate(0);}
	50%{transform:rotate(360deg);}
	100% {transform:rotate(0);}
}


/* top */
#top{position: relative; height: 100px; background: #fff; transition:all 0.4s ease;}
#top .logo_img{display: block; width: 280px; margin: 0 auto; padding-top: 10px; transition:all 0.4s ease;}
#top .sns_box{position: absolute; top: 50%; right: 40px; transform: translateY(-50%); display: flex; gap: 8px; transition:all 0.4s ease;}
#top .sns_box li{transition:all 0.4s ease;}
#top .sns_box li a{display: inline-block; width: 41px; height: 41px; padding-top: 8px; border-radius: 50%; background: #6c3baa; text-align: center; transition:all 0.4s ease;}
#top .sns_box li a img{display: inline-block; transition:all 0.4s ease;}
#top .sns_box li a:hover{background: #4b2082;}

@media (max-width: 1400px){
	#top{height: 80px;}
	#top .logo_img{width: 240px; padding-top: 5px;}
	#top .sns_box li a{width: 38px; height: 38px; padding-top: 6px;}
	#top .sns_box li a img{width: 17px;}
}

@media (max-width: 1024px){
	#top{height: 65px;}
	#top .logo_img{width: 200px; margin: 0 0 0 15px;}
	#top .sns_box{right: 20px; gap: 5px;}
	#top .sns_box li a{width: 32px; height: 32px; padding-top: 4px;}
	#top .sns_box li a img{width: 15px;}
}

@media (max-width: 500px){
	#top{height: 52px;}
	#top .logo_img{width: 150px;}
	#top .sns_box li a{width: 25px; height: 25px; padding-top: 0;}
	#top .sns_box li a img{width: 12px;}
}

@media (max-width: 400px){
	#top .logo_img{width: 130px; margin: 0 0 0 10px; padding-top: 8px;}
	#top .sns_box{right: 10px;}
}

/* center */
#center{width: 100%; background: #6c3baa; padding-top: 60px;}
#center .cont_wr{display: flex; justify-content: space-between;}
#center .left{position:relative; overflow:hidden; width:50%; height: 100%; z-index: 0;}

/* 메인 비주얼 영상영역 */
#center .left .bg-video-wrap{position:relative;overflow:hidden; width: 100%; height: 870px; z-index: -1;}
#center .left .bg-video{position:absolute; top:0; left:0px; width:100%; height:100%; opacity:1;}
#center .left .bg-video iframe{
	width:50vw;
	height:96.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
	min-height:calc(100vh + 340px);
	 min-width: 172.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 0.2s;
}

#center .left .bg-video.start iframe{opacity:1;filter:Alpha(opacity=100);}
#center .left .bg-video-alt{display:none; position:absolute; top:0; left:0px; width:100%; height:100%; background-size:cover !important;}

#center .left .is-mobile .bg-video iframe{pointer-events:auto; min-height:calc(100vh + 450px);}

/* 비디오 */
#center .left .video_box{position: relative; overflow: hidden; width: 100%; height: 900px; margin: 0 auto; overflow: hidden; z-index: -1; transition:all 0.4s ease;}
#center .left .video_box .video{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 100%; width: auto; transition:all 0.4s ease;}

#center .right{display: flex; flex-direction: column; align-items: center; width: 50%; padding: 0 85px;}
#center .right .campus{display: flex;}
#center .right .campus a{position: relative; display: flex; align-items: center; justify-content: center; width: 323px; padding: 20px 10px; text-align: center; background: #383735;}
#center .right .campus a:first-child::before{content:''; position: absolute; top: 50%; right: 0; transform: translateY(-50%); display: block; width: 1px; height: 24px; background: #fff;}
#center .right .campus a img{}
#center .right .campus a p{margin-left: 18px; font-family: 'esamanru Medium.ttf'; font-size: 30px; color: #fff; letter-spacing: -0.3px;}

#center .right .homepage{display: flex; margin-top: 34px;}
#center .right .homepage .hp_box{position: relative; padding: 3px; overflow: hidden; width: max-content; user-select:none; margin-left: -8px;}
#center .right .homepage .hp_box:first-child{margin-left: 0;}
#center .right .homepage .hp_box::before,
#center .right .homepage .hp_box::after {position: absolute; width: 10px; height: 10px; background: #fff; content: ""; z-index: 0; transition: top 300ms ease-in-out, bottom 300ms ease-in-out, right 300ms 300ms ease-in-out, left 300ms 300ms ease-in-out, width 300ms ease-in-out, height 300ms ease-in-out;}
#center .right .homepage .hp_box::before{top: 3px; left: 3px;}
#center .right .homepage .hp_box::after{bottom: 3px; right: 3px;}
#center .right .homepage a{position: relative; display: inline-block; width: 220px; padding: 2px; z-index: 1;}
#center .right .homepage a::before,
#center .right .homepage a::after {position: absolute; width: 10px; height: 10px; background: #fff; content: ""; z-index: -1; transition: top 300ms ease-in-out, bottom 300ms ease-in-out, right 300ms 300ms ease-in-out, left 300ms 300ms ease-in-out, width 300ms ease-in-out, height 300ms ease-in-out;}
#center .right .homepage a::before{bottom: 0; left: 0;}
#center .right .homepage a::after{top: 0; right: 0;}
#center .right .homepage a p{display: inline-block; width: 100%; padding: 10px; font-family: 'esamanru Medium.ttf'; font-size: 28px; text-align: center; color: #fff; letter-spacing: -0.3px; background: #6c3baa; word-break: keep-all;}
#center .right .homepage a p br{display: none;}

#center .right .list_wr{width: 100%; margin-top: 35px; transition:all 0.4s ease;}
#center .right .list_wr ul{}
#center .right .list_wr ul li{position: relative; width: 100%; margin-bottom: 20px; cursor: none; backdrop-filter : blur(2px); transition:all 0.4s ease;}
#center .right .list_wr ul li:last-child{margin-bottom: 0;}
#center .right .list_wr ul li a{display: block; width: calc(100% - 50px); padding: 15px 45px; border: 2px solid #fff; z-index: 0; cursor: none; transition:all 0.4s ease;}
#center .right .list_wr ul li a p{font-family: 'esamanru Medium.ttf'; font-size: 30px; color: #fff; letter-spacing: -0.3px; word-break: keep-all; transition:all 0.4s ease;}
#center .right .list_wr ul li .v_more{position: absolute; bottom: 0; right: 0; display: block; width: 50px; height: 50px; background: #383735; text-align: center; line-height: 50px; z-index: 1; transition:all 0.4s ease;}
#center .right .list_wr ul li .v_more span{display: none; margin-right: 8px; font-family: 'esamanru Medium.ttf'; font-size: 11px; color: #fff; letter-spacing: -0.3px; transition:all 0.4s ease;}
#center .right .list_wr ul li .v_more img{transition:all 0.4s ease;}

#center .right .quick_wr{display: flex; justify-content: space-between; width: 100%; margin-top: 50px; transition:all 0.4s ease;}
#center .right .quick_wr a{position: relative; display: flex; justify-content: space-between; align-items: flex-start; width: 33.3333%; padding: 5px 30px; transition:all 0.4s ease;}
#center .right .quick_wr a::before{content:''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); display: block; width: 1px; height: 100%; background: #fff; transition:all 0.4s ease;}
#center .right .quick_wr a:first-child::before{display: none; transition:all 0.4s ease;}
#center .right .quick_wr a p{font-family: 'esamanru Medium.ttf'; font-size: 22px; color: #fff; letter-spacing: -0.3px; word-break: keep-all; transition:all 0.4s ease;}
#center .right .quick_wr a img{width: 18px; height: auto; opacity: .3; transition:all 0.4s ease;}

#center .right .list_wr .cursor{display: none;}


@media (min-width: 500px){
	/* 마우스커서 */
	#center .right .list_wr .cursor{position:fixed; transform:translate(-50%, -50%); transition-property:background, transform;pointer-events:none; display: block;}
	#center .right .list_wr .cursor img{opacity:0;position:absolute;left:-45px;top:-45px;width:97px;height:97px;border-radius:50%;line-height:40px; transition:all 0.4s ease}
	#center .right .list_wr .cursor.on img{opacity:1;animation:circle_tx 40s infinite linear;}
	
	/* 호버 */

	#center .right .homepage .hp_box:hover::before {width: 48%; height: 50%;}
	#center .right .homepage .hp_box:hover::after {width: 48%; height: 50%;}
	#center .right .homepage a:hover::before {width: 48%; height: 60%;}
	#center .right .homepage a:hover::after {width: 48%; height: 50%;}

	#center .right .list_wr ul li:hover .v_more{width: auto; height: auto; line-height: 1; padding: 10px;}
	#center .right .list_wr ul li:hover .v_more span{display: inline-block;}
	#center .right .list_wr ul li:hover .v_more img{width: 10px;}

	#center .right .quick_wr a:hover img{opacity: 1;}

}


@media (max-width: 1600px){	
	#center{padding-top: 50px;}
	#center .left .video_box{height: 760px;}
	#center .right{padding: 0 60px;}
	#center .right .campus{width: 100%;}
	#center .right .campus a{width: 50%; padding: 16px 10px;}
	#center .right .campus a p{font-size: 24px;}
	#center .right .homepage{width: 100%; margin-top: 20px; justify-content: center;}
	#center .right .homepage .hp_box{width: 33.3333%;}
	#center .right .homepage a{width: 100%;}
	#center .right .homepage a p{padding: 8px 10px; font-size: 22px;}
	#center .right .list_wr .cursor img{left: -30px; top: -30px; width: 60px; height: 60px;}
	#center .right .list_wr ul li a{width: calc(100% - 40px); padding: 12px 25px;}
	#center .right .list_wr ul li a p{font-size: 24px;}
	#center .right .list_wr ul li .v_more{width: 40px; height: 40px; line-height: 40px;}
	#center .right .list_wr ul li .v_more img{width: 14px;}
	#center .right .quick_wr a{padding: 5px 20px;}
	#center .right .quick_wr a p{font-size: 18px;}
	#center .right .quick_wr a img{width: 14px;}
}

@media (max-width: 1400px){
	#center{padding-top: 40px;}
	#center .left{width: 40%;}
	#center .left .video_box{height: 680px;}
	#center .right{width: 60%; padding: 0 50px;}
	#center .right .campus a{padding: 14px 10px;}
	#center .right .campus a img{width: 17px;}
	#center .right .campus a p{font-size: 22px;}
	#center .right .homepage a p{padding: 6px; font-size: 20px;}
	#center .right .list_wr{margin-top: 25px;}
	#center .right .list_wr ul li{margin-bottom: 15px;}
	#center .right .list_wr ul li a{width: calc(100% - 35px); padding: 10px 18px;}
	#center .right .list_wr ul li a p{font-size: 22px;}
	#center .right .list_wr ul li .v_more{width: 35px; height: 35px; line-height: 35px;}
	#center .right .list_wr ul li .v_more img{width: 13px;}
	#center .right .quick_wr a p{font-size: 17px;}
}

@media (max-width: 1024px){
	#center{padding-top: 0;}
	#center .cont_wr{display: block;}
	#center .left{width: 100%;}
	#center .left .video_box{height: 400px;}
	#center .left .video_box .video{width: 100%; height: auto;}
	#center .right{width: 100%; padding: 20px 50px 40px;}
	#center .right .campus a p{font-size: 20px;}
	#center .right .homepage a p{font-size: 18px;}
	#center .right .list_wr ul li a p{font-size: 19px;}
	#center .right .quick_wr{margin-top: 30px;}
}

@media (max-width: 700px){	
	#center .left .video_box{height: 250px;}
	#center .right{padding: 20px 20px 40px;}
	#center .right .campus a p{font-size: 17px;}
	#center .right .quick_wr{margin-top: 25px;}
	#center .right .quick_wr a{padding: 5px 15px;}
	#center .right .quick_wr a p{font-size: 14px;}
	#center .right .quick_wr a img{width: 12px;}
}

@media (max-width: 500px){
	#center .right .homepage a p{font-size: 15px;}
	#center .right .homepage a::before, #center .right .homepage a::after{width: 6px; height: 6px;}
	#center .right .homepage .hp_box::before, #center .right .homepage .hp_box::after{width: 6px; height: 6px;}
	#center .right .quick_wr{display: block;}
	#center .right .quick_wr a::before{top: 1px; width: 100%; height: 1px;}
	#center .right .quick_wr a{width: 100%; padding: 12px 15px;}
}

@media (max-width: 400px){
	#center .left .video_box{height: 180px;}
	#center .right .homepage a p{font-size: 14px;}
	#center .right .homepage a p br{display: block;}
	#center .right .campus a{padding: 13px 10px;}
	#center .right .campus a p{margin-left: 5px; font-size: 15px;}
	#center .right .campus a img{width: 14px;}
	#center .right .list_wr ul li{margin-bottom: 12px;}
	#center .right .list_wr ul li a{width: calc(100% - 22px); padding: 7px 15px;}
	#center .right .list_wr ul li a p{font-size: 15px;}
	#center .right .list_wr ul li .v_more{width: 22px; height: 22px; line-height: 22px;}
	#center .right .list_wr ul li .v_more img{width: 8px;}
	#center .right .quick_wr a{padding: 12px 10px;}

}

/* Footer */
#footer{display: flex; justify-content: space-between; align-items: flex-start; width: 100%; max-width: 1800px; margin: 0 auto; padding: 42px 0 50px;}
#footer img.logo_img{width: 280px;}
#footer .txt_box{width: calc(100% - 418px); padding-left: 135px; }
#footer .txt_box p{font-family: 'Paperlogy-6SemiBold.ttf'; font-size: 16px; letter-spacing: -0.3px; color: #383735; word-break: keep-all;}
#footer .txt_box p.addr{margin-bottom: 8px;}
#footer .txt_box p.copy{margin-top: 20px; font-size: 14px; word-break: keep-all;}

#footer ul.sns_box{display: flex; align-self: flex-end; gap: 25px;}
#footer ul.sns_box li{}
#footer ul.sns_box li a{}
#footer ul.sns_box li a img{}

@media (max-width: 1820px){
	#footer{padding: 40px 40px 50px;}
}

@media (max-width: 1600px){
	#footer .txt_box{width: calc(100% - 230px); padding-left: 40px;}
	#footer img.logo_img{width: 230px;}
}

@media (max-width: 1200px){
	#footer{flex-wrap: wrap; padding: 30px;}
	#footer img.logo_img{width: 200px;}
	#footer .txt_box{width: calc(100% - 200px); padding-left: 25px;}
	#footer .txt_box p{font-size: 15px;}
	#footer ul.sns_box{justify-content: flex-end; width: 100%; margin-top: 20px;}
}

@media (max-width: 500px){
	#footer{display: block; padding: 20px;}
	#footer img.logo_img{display: block; width: 180px; margin: 0 auto 20px;}
	#footer .txt_box{width: 100%; padding-left: 0;}
	#footer .txt_box p{text-align: center;}
	#footer .txt_box p.copy{font-size: 12px;}
	#footer ul.sns_box{justify-content: center; gap: 15px;}
}

@media (max-width: 400px){
	#footer img.logo_img{width: 150px; margin: 0 auto 18px;}
	#footer .txt_box p{font-size: 14px;}
}