@charset "utf-8";
.more_con{position:absolute; top:30%; right:10px; text-align:center; width:90px; height:90px; border-radius:90px; background-color:rgba(0,0,0,.5); z-index:999;}
.more_con a{padding-top:20px; display:inline-block; color:#fff; font-size:.9rem;}
.more_con i{position:relative; display:block; padding-bottom:25px;}
.more_con i:after,
.more_con i:before{content:''; position:absolute; right:18px; transition:.3s;}
.more_con i:after{top:calc(50% - 1px); width:30px; height:2px; background-color:#fff; border-radius:5px;}
.more_con i:before{top:calc(50% - 5px); width:8px; height:8px; border-top:2px solid #fff; border-right:2px solid #fff; -webkit-transform:rotate(45deg); transform:rotate(45deg);}
#container .wrap{padding-left:0; padding-right:0; max-width:1600px; margin:auto;}

#visual{position:relative; height:900px; overflow:hidden;}
#visual:before{content:''; position:absolute; width:100%; height:100%; background-color:rgba(0, 0, 0, 0.5);}
#visual #course .map{position:absolute; right:400px; top:-100px; z-index:3;}
#visual #course dl dt{color:#fff; font-size:2.3rem; letter-spacing:-1px;}
#visual #course dl dt span{color:#fff; font:2.3rem 'GmarketSansBold';}
#visual #course dl dd{position:relative; padding:9px 0 9px 56px; margin-top:1%; color:#fff; font-size:1.3rem;}
#visual #course dl dd i:before{position:absolute; left:0; top:3px; color:#fff;}
#visual #course a{position:relative; display:inline-block; margin-top:5%; padding:13px 54px 10px 30px; color:#fff; font-size:1.3rem; border-radius:40px; background-color:#68AA15; transition:.3s;}
#visual #course a:after,
#visual #course a:before{content:''; position:absolute; right:30px; transition:.3s;}
#visual #course a:after{top:calc(50% - 1px); width:18px; height:2px; background-color:#fff; border-radius:5px;}
#visual #course a:before{top:calc(50% - 5px); width:8px; height:8px; border-top:2px solid #fff; border-right:2px solid #fff; -webkit-transform:rotate(45deg); transform:rotate(45deg);}
#visual #course a:hover{padding-right:58px;}
#visual #course a:hover:after,
#visual #course a:hover:before{right:24px;}
#visual #course a:hover:after{width:24px;}
#visual .visual_video video{width:100%;}

#notice{display:flex; align-items:center; padding-top:1.8%; padding-bottom:1.6%;}
#notice h3{color:#68AA15; font-size:1.6rem; padding-right:3%; padding-left:40px; background:url(../img/main/notice.svg) 0 0 no-repeat;}
#notice .con{position:relative; display:block; width:100%; padding:5px 120px 5px 0; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
#notice .con a{font-size:1.6rem;}

#photo .photo_btn{display:none;}

#youtube{padding-top:5.3%; padding-bottom:5.3%; overflow:hidden;}
#youtube .wrap{position:relative; max-width:1100px; width:100%;}
#youtube .btn_control{position:absolute; top:calc(50% - 48px); left:0; right:0;}
#youtube .btn_control li{position:absolute; background-color:#666; z-index:2;}
#youtube .btn_control li.btn_prev{left:0;}
#youtube .btn_control li.btn_next{right:0;}
#youtube .btn_control li a:after,
#youtube .btn_control li a:before{background-color:#fff;}
#youtube .list{}
#youtube .list ul{position:relative; display:flex; width:100%; height:100%; margin-left:100px;}
#youtube .list ul li{display:inline-block; width:900px; margin:0 80px; flex-shrink:0;}
#youtube .list ul li a{display:block; overflow:hidden;}
#youtube .list ul li a p{padding-top:2%; font-size:1.6rem; white-space:normal;}
#youtube .list ul li a img{width:100%;}

footer{background-color:#F5F5F5;}

@media screen and (max-width:1400px){
	#visual .slogan{display:none;}
	#visual .wrap:after{width:90%; right:5%;}
	#visual .wrap>div:before{left:calc(5% - 5px);}
	#visual .wrap>div:after{width:30%; right:calc(5% + 3px);}
	#visual #course .map{top:-10%; right:auto; left:3%;}
	#visual #course .con_box{right:calc(5% + 20px);}
}

@media screen and (max-width:1100px){
	#container{overflow:hidden;}
	#visual{width:100%; overflow-x:scroll;}
	#visual:before{width:1100px;}
	#visual::-webkit-scrollbar{width:5px; height:3px;}
	#visual::-webkit-scrollbar-track-piece{background:rgba(255,255,255,.3);}
	#visual::-webkit-scrollbar-thumb{background:rgba(0,0,0,.3);}
	#visual .visual_video video{width:1100px; height:900px;}
	#visual .wrap{width:1000px; margin-left:50px; margin-right:50px;}
	#visual #course .map{left:0;}
}

/*pc*/
@media all and (min-width:801px){
	.more_con{display:none;}
	#visual .wrap{position:absolute; left:0; right:0; top:calc(50% - 340px); height:680px; z-index:2;}
	#visual .wrap:after{content:''; position:absolute; right:0; top:0; width:100%; height:100%; border-right:5px solid #fff; border-bottom:5px solid #fff; z-index:1;}
	#visual .wrap>div:after{content:''; position:absolute; right:0; top:0; width:calc(100% - 550px); border-top:5px solid #fff; border-radius:40px; z-index:1;}
	#visual .wrap>div:before{content:''; position:absolute; left:-5px; bottom:-5px; height:calc(100% - 400px); border-left:5px solid #fff; border-radius:40px; z-index:1;}
	#visual .slogan{position:absolute; left:-10px; top:-40px; text-align:center; z-index:2;}
	#visual .slogan:before,
	#visual .slogan:after{content:''; position:absolute; z-index:3;}
	#visual .slogan:before{right:160px; top:22px; width:75px; height:67px; background-image:url(../img/main/visual_slogan01.png); animation:slogan 1.5s 0s;}
	#visual .slogan:after{right:55px; bottom:55px; width:123px; height:99px; background-image:url(../img/main/visual_slogan02.png); opacity:0; animation:slogan2 1s .8s forwards;}
	@keyframes slogan {
		0%{transform:translate(-150px,-50px) rotate(90deg); opacity:0;}
		100% {transform:translate(0,0) rotate(0deg); opacity:1;}
	}
	@keyframes slogan2 {
		0%{transform:translate(75px,50px) rotate(90deg);}
		100% {transform:translate(0,0) rotate(0deg); opacity:1;}
	}
	#visual #course>div.on{display:block;}
	#visual #course>div{display:none;}
	#visual #course .con_box{position:absolute; right:37px; bottom:90px; width:360px; z-index:4;}
	#notice .con span{position:absolute; right:0; color:#666;}
	#photo{padding-top:7.2%; padding-bottom:7.2%; background-color:#F5F5F5;}
	#youtube h3{display:none;}
}

/*tablet~mobile*/
@media screen and (max-width:800px){
	.visual_video,
	#visual:before,
	#visual #course .map,
	#youtube .btn_control{display:none;}
	.wrap{width:94%;}
	#visual{height:auto; overflow:hidden;}
	#visual .wrap{margin-left:3%; width:97%;}
	#visual #course{display:flex; height:100%; white-space:nowrap; overflow-y:hidden; overflow-x:scroll;}
	#visual #course::-webkit-scrollbar{width:5px; height:3px;}
	#visual #course::-webkit-scrollbar-track-piece{background:rgba(0,0,0,.1);}
	#visual #course::-webkit-scrollbar-thumb{background:rgba(0,0,0,.3);}
	#visual #course>div{flex-shrink:0; padding:24px 28px; max-width:380px; width:85%; margin-left:3%; background-color:#68AA15; white-space:normal; box-sizing:border-box;}
	#visual #course>div:nth-of-type(1){margin-left:0;}
	#visual #course dl dt,
	#visual #course dl dt span{font-size:1.6rem;}
	#visual #course dl dd{padding:2px 0 2px 30px; font-size:1.05rem;}
	#visual #course dl dd .ic-length:before, 
	#visual #course dl dd .ic-time:before,
	#visual #course dl dd .ic-course:before{font-size:20px;}
	#visual #course a{color:#68AA15; padding-left:24px; padding-right:48px; font-size:1.05rem; background-color:#fff;}
	#visual #course a:after,
	#visual #course a:before{right:26px;}
	#visual #course a:after{background-color:#68AA15;}
	#visual #course a:before{border-top-color:#68AA15; border-right-color:#68AA15;}
	#notice.wrap{display:block; text-align:center; margin-top:5%; margin-bottom:5%; padding:5%; background-color:#F5F5F5; box-sizing:border-box;}
	#notice h3{display:inline-block; padding-left:25px; font-size:1.25rem; background-size:20px;}
	#notice .con a{font-size:1rem;}
	#notice .con{padding-right:0;}
	#notice .con span{display:block; color:#666; font-size:.75rem;}
	#photo .wrap{margin-left:3%; width:97%; padding-right:3%;}
	#youtube h3{margin-bottom:10px; color:#000; font-size:1.5rem; font-weight:normal;}
	#youtube .wrap{margin-left:3%; width:97%; padding-right:3%;}
	#youtube .list ul{padding-bottom:10px; margin-left:0; overflow-x:scroll; white-space:nowrap;}
	#youtube .list ul::-webkit-scrollbar{width:5px; height:3px;}
	#youtube .list ul::-webkit-scrollbar-track-piece{background:rgba(0,0,0,.1);}
	#youtube .list ul::-webkit-scrollbar-thumb{background:rgba(0,0,0,.3);}
	#youtube .list ul li{width:85%; max-width:380px; margin:0 3% 0 0;}
	#youtube .list ul li a p{font-size:1rem;}
}


/* ·¹À̾î Æ˾÷ */
.layer-pop-wrap {position:fixed;left:0;right:0;top:0;bottom:0;text-align:center;z-index:100;}
.layer-pop-wrap::before{content:"";display:inline-block;height:100%;vertical-align:middle;}
.layer-pop-wrap .layer-cont {position:relative;top:0;display:inline-block;vertical-align:middle;padding:10px;width:734px;border:1px solid #222; box-sizing:border-box; text-align:center;z-index:99;
-moz-box-shadow: 0px 2px 15px rgba(0,0,0,0.5);
-webkit-box-shadow: 0px 2px 15px rgba(0,0,0,0.5);
box-shadow: 0px 2px 15px rgba(0,0,0,0.5);
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=200, Color='rgba(0,0,0,0.5)')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=200, Color='rgba(0,0,0,0.5)');
}
.layer-pop-wrap.notice .layer-cont {box-sizing:border-box;background:#fff;}
.layer-pop-wrap.notice .layer-cont .image_area a{display:block;font-size:0;line-height:0;}
.layer-pop-wrap.notice .layer-cont .image_area img{width:100%;}
.layer-pop-wrap button {position:absolute; right:10px;bottom:10px;padding:10px;border:none;/* background:rgba(0,0,0,.4); */background:none;color:#fff;text-align:right;}

@media screen and (max-width: 960px) {
	.layer-pop-wrap.layer-pop-wrap {position:fixed; top:0; left:0; right:0; bottom:0; width:100%; margin-left:0;height:100%;}
	.layer-pop-wrap.notice .layer-cont:first-of-type:after {display:none;}
}
@media screen and (max-width: 575px) {
	.layer-pop-wrap.notice .layer-cont{width:88.89%;height:auto;}
    .layer-pop-wrap.notice .layer-cont .image_area{width:100%;height:auto;}
	.layer-pop-wrap.notice .layer-cont .image_area img{width:100%;max-width:100%;height:auto;}
	.layer-pop-wrap.notice .layer-cont .close_area{margin:14.6px 0 29px 0;}
	.layer-pop-wrap.notice .layer-cont .close_area span button{font-size:14px;}
	.layer-pop-wrap.notice .layer-cont .close_area .today::after{top:5px;}
}
@media screen and (max-width: 360px) {
}
@media screen and (max-width: 320px) {
}