/* popup_notice */
	.popup_notice{width: 400px;height: 476px;position: absolute;top: 200px;right: 10%;z-index: 9;background: #292C2F url('/images/common/popup_notice.png') center center no-repeat;	background-size:100% auto ;}
	.popup_notice .text{width: 360px;height: 165px;margin: 180px auto 0;display: flex; align-items: center; justify-content:center; }
	.popup_notice .date{width: 360px;height: 44px;margin: 8px auto 0;line-height: 44px;color: #fff;text-align: center;}
	.popup_notice .date > strong{color: #FFDD00;}

	@media (max-width:992px){
		.popup_notice{right: 2%;}
	} 

	@media (max-width:768px){
		.popup_notice{width: 100%;height: 376px;position:static;background-size:auto 100% ;padding-top: 144px;margin-bottom: 2px;}
		.popup_notice .text{width: 260px;height: 130px;margin: 0 auto;}
		.popup_notice .date{width: 300px;height: 34px;margin: 0 auto;line-height: 34px;padding-top: 4px;}
		

	}

/* popup */
		.popup_wrap{position:absolute;top:200px;right:calc(10% + 410px);z-index:10;}
		.popup_common{width:372px;height: 440px;display:none;}

		.popup_close{height:36px;line-height:36px;display: flex;justify-content:space-between;padding: 0 8px;background-color: #000;}
		.popup_close > a{color:#fff; font-size:14px;}
		.popup_close > a:hover{color: #C3AD98;}

		.swiper-slide > a{display: inline-block;width:372px;height: 440px;}
		.swiper-slide > a > img{width:100%;height: 100%;}
		.swiper-pagination-bullet {width: 20px !important;height: 20px !important;text-align: center;line-height: 20px;font-size: 12px;color: #000;opacity: 1;background: rgba(0, 0, 0, 0.2);}
		.swiper-pagination-bullet-active {color: #fff;background: #007aff;}
		.swiper-button-next, .swiper-button-prev{color: rgba(255,255,255,.3) !important;}

		@media (max-width:992px){
			.popup_wrap{right:calc(2% + 410px);}
		}

		@media (max-width:768px){
			.mobile_wrap{position: absolute;top: 70px;left: 0;width: 90%;left: 5%;z-index:10;}
			.popup_wrap{position: static;}
			.popup_common,
			.swiper-slide > a{width:100%;height:384px;}
		}


#header{background-color: #fff;}


	

	

/* section */
	.section_title{color: #666;margin-bottom: 80px;text-transform:uppercase;}
	.section_title > strong{font-size: 2.7rem;font-family: 'cardo';display: block;color: var(--main-color);}
	.section_title > span{display: block;font-size: 1.2rem;}

	.section > .container{max-width: 1400px;}
	.section{padding: 150px 0}

	.course{position: relative;height: 800px;background: url('/images/bg_main02.jpg') 0 0 no-repeat;background-size: 100% auto ;}
	
	.course_box{background-color: #fff;z-index:9;position: absolute;right: 15%;top: 50px;width: 400px;height: 450px;padding: 50px;}
	.course_box ul a{border-bottom: 1px solid #ddd;display: block;padding-top: 15px;padding-bottom: 6px;font-size: 1.2rem;position: relative;}
	.course_box ul a:after{content: '>';position: absolute;right: 0;}

	.btn_more_wrap > a{margin: 0 auto;}

	section.map{position: relative;border-bottom: 1px solid #ddd;}
	.map_box{position: absolute;width: 25%;height: 300px;top: 10%;right: 5%;background-color: #003879;z-index:2;padding: 30px;color: #fff;}
	.section_title2{margin-bottom:40px;text-transform:uppercase;}
	.section_title2 > strong{font-size: 2rem;font-family: 'cardo';display: block;}
	.map_box .section_title2:after{content: '';display: inline-block;width: 50px;height: 1px;background-color: #fff;margin-left: 0px;}
	.map_box > ul > li > p{font-weight: 100;}
	.kakaomap_wrap{height: 600px;}
	.root_daum_roughmap .wrap_map{height: 100% !important;}

	.notice a{border: 10px solid #fff;display: inline-block;transition: 0.3s;}
	.notice a:hover{border: 10px solid rgba(44,116,134,.5);}
	.notice a > img{border: 1px solid #ddd;}


	@media (max-width:1200px){
		.map_box{width: 40%;}
	}

	@media (max-width:992px){
		.section{padding: 70px 0}
		.course_box{right: 5%;}
	} 

	@media (max-width:768px){
		.course_box{width: 90%;}
		.map_box{width: 100%;position: static;}
		.notice > div{text-align: center;}
		.section_title{margin-bottom: 30px;}
		.kakaomap_wrap{height: 300px;}
		.board-youtube > div:nth-child(5){display: none;}
		.board-youtube > div:nth-child(6){display: none;}
		.board-youtube > div:nth-child(7){display: none;}
		.board-youtube > div:nth-child(8){display: none;}
		.board-youtube > div:nth-child(9){display: none;}
		.board-youtube > div:nth-child(10){display: none;}
		.board-youtube > div:nth-child(11){display: none;}
		.board-youtube > div:nth-child(12){display: none;}
	} 


/* hero */
	#hero:before{content: "";display: block; width: 100%;height: 100%;background:rgba(0,0,0,.3);position: absolute;left: 0px;top: 0px;z-index:2}
		
		#hero {width: 100%;height: 100vh;background-color: rgba(22, 30, 56, 0.8);overflow: hidden;position: relative;}
		#hero .carousel, #hero .carousel-inner, #hero .carousel-item, #hero .carousel-item::before {position: absolute;top: 0;right: 0;left: 0;bottom: 0;}
		#hero .carousel-inner .carousel-item {transition-property: opacity;background-position: center top;}
		
		#hero .carousel-inner > div:nth-child(1){background-image: url('/images/bg_main04.jpg');animation: bgShow1 2s forwards; animation-timing-function: ease-out;}
		#hero .carousel-inner > div:nth-child(1){background-position:20% 0% !important}
		#hero .carousel-inner > div:nth-child(2){background-image: url('/images/bg_main02.jpg');animation: bgShow2 2s forwards; animation-timing-function: ease-out;}
		#hero .carousel-inner > div:nth-child(2){background-position:50% 50% !important}
		#hero .carousel-inner > div:nth-child(3){background-image: url('/images/bg_main03.jpg');animation: bgShow3 2s forwards; animation-timing-function: ease-out;}
		#hero .carousel-inner > div:nth-child(3){background-position:50% 50% !important}

		.hero_text{position: absolute;top: 55%;left: 10%;z-index:9;color: #fff;font-weight: 100;animation-name: fadeUpAni3; animation-duration: 5s; animation-fill-mode: forwards;opacity: 0; animation-iteration-count: infinite;}
		
		.hero_text > div:nth-child(1){font-size: 2.3rem;line-height: 3.5rem;font-family: 'Noto Serif KR';}
		.hero_text > div:nth-child(2){font-size: 1.2rem;padding-top: 40px;}

		@keyframes bgShow1 {
		  from{
			background-size: 100% auto; 
		  }
		  to{
			background-size: 104% auto;
		  }
		}
		@keyframes bgShow2 {
		  from{
			background-size: 108% auto; 
		  }
		  to{
			background-size: 100% auto;
		  }
		}
		@keyframes bgShow3 {
		  from{
			background-size: 100% auto; 
		  }
		  to{
			background-size: 107% auto;
		  }
		}

		@media (max-width:768px){
			#hero .carousel-inner > div:nth-child(1){background-position:50% 0% !important}
			
			@keyframes bgShow1 {
				from{
					background-size: auto 100%; 
				}
				to{
					background-size: auto 104%;
				}
			}
			@keyframes bgShow2 {
				from{
					background-size: auto 108%; 
				}
				to{
					background-size: auto 100%;
				}
			}
			@keyframes bgShow3 {
				from{
					background-size: auto 100%; 
				}
				to{
					background-size: auto 107%;
				}
			}
		} 



	
	@media (max-width:768px){
		.hero_text{display: none;}

		
	} 



	


	/* scroll down */
	.scrolldown_icon{position: absolute;bottom: 50px;left:50%; transform:translateX(-50%);z-index:7;}
	.sceoll-container {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  width: 10rem;
	  height:10rem;
	  overflow: hidden;
	  pointer-events: none;
	}
	.chevron {
	  position: absolute;
	  width: 2.1rem;
	  height: 0.48rem;
	  opacity: 0;
	  transform: scale(0.3);
	  -webkit-animation: move-chevron 3s ease-out infinite;
	  animation: move-chevron 3s ease-out infinite;
	}

	.chevron:first-child {
	  -webkit-animation: move-chevron 3s ease-out 1s infinite;
	  animation: move-chevron 3s ease-out 1s infinite;
	}

	.chevron:nth-child(2) {
	  -webkit-animation: move-chevron 3s ease-out 2s infinite;
	  animation: move-chevron 3s ease-out 2s infinite;
	}

	.chevron:before,
	.chevron:after {
	  content: "";
	  position: absolute;
	  top: 0;
	  height: 100%;
	  width: 50%;
	  background: #fff;
	}

	.chevron:before {
	  left: 0;
	  transform: skewY(30deg);
	}

	.chevron:after {
	  right: 0;
	  width: 50%;
	  transform: skewY(-30deg);
	}

	@-webkit-keyframes move-chevron {
	  25% {
		opacity: 1;
	  }
	  33.3% {
		opacity: 1;
		transform: translateY(2.28rem);
	  }
	  66.6% {
		opacity: 1;
		transform: translateY(3.12rem);
	  }
	  100% {
		opacity: 0;
		transform: translateY(4.8rem) scale(0.5);
	  }
	}

	@keyframes move-chevron {
	  25% {
		opacity: 1;
	  }
	  33.3% {
		opacity: 1;
		transform: translateY(2.28rem);
	  }
	  66.6% {
		opacity: 1;
		transform: translateY(3.12rem);
	  }
	  100% {
		opacity: 0;
		transform: translateY(4.8rem) scale(0.5);
	  }
	}