@charset "utf-8";

/* 
 * main CSS Document
 * KOWEB
 */

/* visual */
.area_visual{position:relative;}
.area_visual .list li,
.area_visual .bx-viewport{width:100%; height:745px; }
.area_visual .list li{background-repeat:no-repeat; background-position:50% 50%; background-size:cover; }
.area_visual .list li .text{position:absolute; left:0; top:50%; width:100%;  transform: translateY(-50%); text-align:center; color:#fff;}
.area_visual .list li .text span{display:inline-block; width:1px; height:30px; background:#fff; margin-bottom:10px;}
.area_visual .list li .text h2{font-size:40px;}
.area_visual .list li .text p{margin:15px 0 30px 0; font-size:18px;}
.area_visual .list li .text a{display:inline-block; padding:15px 30px; border:2px solid #fff; border-radius:30px; font-size:14px; color:#fff; transition:0.5s}
.area_visual .list li .text a:hover{background:#b7030c; border:2px solid #b7030c;  transition:0.5s}

.scroll_down{position:absolute; bottom:40px; left:50%; z-index:99; width:16px; height:26px; background:url(../images/main/‭icon_mouse.svg);}

@keyframes bgScale {
	0% {transform:scale(1.1); -webkit-transform:scale(1.1); -moz-transform:scale(1.1);}
	100% {transform:scale(1); -webkit-transform:scale(1); -moz-transform:scale(1);}
}

/* bx pager common set */
.bx-controls{position:absolute; top:50%; z-index:51; width:100%;}
.bx-controls > .bx-pager{width:1200px; margin:0 auto;}
.bx-controls > .bx-pager a{display:block; float:left; overflow:hidden; margin:0 3px; width:12px; height:12px; border:1px solid #222; text-indent:-9999px; transition:all 0.4s ease-out 0s; border-radius:40px;}
.bx-controls > .bx-pager > div{float:left; margin-right:10px;}
.bx-controls > .bx-pager a.active{background:#222;}

/* 이전다음버튼일때 */
.area_visual .bx-controls > div{position:relative; margin:0 100px;}
.area_visual .bx-controls-direction a.bx-next:After{transform:rotate(180deg); -webkit-transform:rotate(180deg);}
.area_visual .bx-controls-direction a:hover{opacity:1;}
.area_visual .bx-controls-direction a{display:block; position:absolute; opacity:0.5; overflow:hidden; width:25px; height:43px; text-indent:-9999px; transition:all 0.2s ease-out 0s;}
.area_visual .bx-controls-direction a:after{content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:url(../images/main/arr_slider01.svg) no-repeat 50% 50%;}
.area_visual .bx-controls-direction a.bx-next{}
.area_visual .bx-controls-direction a.bx-prev{}

/* 페이지넘어가는 0103 */
.area_visual .box_total{position:absolute; top:765px; left:0; z-index:999; width:100%;}
.area_visual .box_total > div{width:1400px; margin:0 auto;}
.area_visual .box_total > div *{font-weight:bold; font-size:14px; color:#fff;}
.area_visual .box_total > div em{position:relative; margin-right:24px;}
.area_visual .box_total > div em:after{content:""; position:absolute; opacity:0.4; top:4px; right:-13px; width:2px; height:10px; background:#fff; border-radius:10px;}
.area_visual .box_total > div span{opacity:0.5;}

/* quick menu */
#content.main{position:relative;}
#content.main:before{z-index:-1; content:''; position:absolute; top:-20px; right:0; display:block; width:50%; height:1102px; background:#f6f6f6;}
.area_quick{ contain: content; z-index:80; position:absolute; left:0; top:-78px; width: 100%; height:150px;}
.area_quick .go_online{float:left; position: relative; width:330px; height:150px; background:#b7030c}
.area_quick .go_online::before{ content: ''; position: absolute; inset: 0 100% 0 -100vw; background: inherit; }
.area_quick .go_online a{display:flex; flex-direction: column; justify-content: center;  width:100%; height:100%; }
.area_quick .go_online a h3{margin-top:7px; color:#fff; font-size:18px; background:url(../../images/main/icon_link.png) no-repeat center right 40px;}
.area_quick .go_online a span{font-size:14px; color:#d68e90; font-weight:bold}


.area_quick .list_icon{float:left; width:-webkit-calc(100% - 330px); background:#fff; box-shadow: 11px 11px 20px rgb(0,0,0,0.05)}
.area_quick .list_icon ul{width:100%;}
.area_quick .list_icon ul li{display: flex; align-items: center; justify-content: center; float:left; width:25%; height:150px; box-sizing: border-box; border-right:1px solid #e9e9e9; text-align:center;}
.area_quick .list_icon ul li:hover a{color:#b7030c}
.area_quick .list_icon ul li:last-child{border-right:0}
.area_quick .list_icon ul li p{margin-top:14px;}
.area_quick .list_icon img{height:40px;}

/* 강사소개 */
.area_introduce{overflow: hidden; padding-top:150px;}
.area_introduce ul{display:flex; justify-content: space-between;}
.area_introduce ul li{ width:50%;}
.area_introduce ul li a{box-sizing:border-box; display:block; width:100%; padding:80px 60px; background-size:cover; color:#fff;}
.area_introduce ul li a h3{font-size:25px;}
.area_introduce ul li a p{margin:20px 0 30px 0;}

/* 공지사항 갤러리 */
.area_information{overflow: hidden; margin:80px auto;}
.area_information{display:flex;}
.area_information > div{box-sizing:border-box; width:50%;}
.area_information h2{display:flex; align-items: center; justify-content: space-between; margin-bottom:20px; font-size:25px; color:#111;}
.area_information h2 a img{vertical-align: middle;}

.area_information .notice{padding-right:40px;}
.area_information .notice ul li{overflow:hidden; position:relative; margin-bottom:16px; padding:0 80px 0 65px; font-size:16px; color:#444; transition:0.5s; white-space: nowrap; text-overflow: ellipsis;}
.area_information .notice ul li:last-child{margin-bottom:0}
.area_information .notice ul li b{line-height: 1; position:absolute; left:0; top:0; display:inline-block; padding:5px 7px; border-radius:5px; background:#b7030c; color:#fff; font-size:13px;}
.area_information .notice ul li span{position:absolute; top:2px; right:0; color:#999; font-size:14px;}
.area_information .gallery{padding-left:40px;}

.area_information .gallery ul{display:flex; justify-content: space-between;}
.area_information .gallery ul li{width:48%;}
.area_information .gallery ul li a{display:block; width:100%; height:100%;}
.area_information .gallery ul li a > div{position:relative; width:100%; height:170px; background-size:cover; background-position:50%; background-repeat: no-repeat;}
.area_information .gallery ul li a > div:before{content:""; position:absolute; opacity:0; bottom:0px; left:0px; z-index:1; width:100%; height:100%; transition:all 0.7s; pointer-events:none; background: linear-gradient(0deg, #111 0, transparent 100%);}
.area_information .gallery ul li a > div p{overflow:hidden; box-sizing: border-box; z-index: 1; opacity:0; position:absolute; left:0; bottom:20px; width:100%; padding:0 20px; color:#fff; font-weight:500; white-space: nowrap; text-overflow: ellipsis;}

.area_information .gallery ul li a:hover > div:before{opacity:1;}
.area_information .gallery ul li a:hover > div p{opacity:1;}


/* 오시는 길 */
.area_location{overflow:hidden; margin-bottom:100px;}
.area_location .map_wrap{float:left; width:65%;}
.area_location .text_wrap{float:left; width:35%;}
.area_location .text_wrap .top{box-sizing:border-box; display: flex; flex-direction: column; justify-content: center; height:210px; background:#b7030c; color:#fff; text-align:center;}
.area_location .text_wrap .top h3{font-size:18px;}
.area_location .text_wrap .top a{color:#fff; font-size:35px; font-weight:600;}
.area_location .text_wrap .bottom{box-sizing:border-box; overflow: hidden; padding:45px; background:#fff;}
.area_location .text_wrap .bottom .list_text li{overflow: hidden; clear:both; margin-bottom:20px;}
.area_location .text_wrap .bottom .list_text li b{display:block; float:left; width:115px; color:#111}
.area_location .text_wrap .bottom .list_text li span{float:left;}
.area_location .text_wrap .bottom .list_text li .point{color:#a60c14; font-weight:600}

.area_location .text_wrap .bottom .list_btn{overflow:hidden; border:1px solid #ddd;}
.area_location .text_wrap .bottom .list_btn li{position:relative; box-sizing:border-box; float:left; width:50%; padding:14px 20px;}
.area_location .text_wrap .bottom .list_btn li:first-child{border-right:1px solid #ddd;}
.area_location .text_wrap .bottom .list_btn li a{display:block; width:100%; height:100%;color:#111;}
.area_location .text_wrap .bottom .list_btn li:before,
.area_location .text_wrap .bottom .list_btn li:after{content:''; display:block; position:absolute; width:6px; height:1px; background:#666; transition:all 0.3s ease 0s;}
.area_location .text_wrap .bottom .list_btn li:before{top:24px; right:20px; transform:rotate(45deg);}
.area_location .text_wrap .bottom .list_btn li:after{top:28px; right:20px; transform:rotate(-45deg);} 


.area_location .root_daum_roughmap .wrap_controllers{display:none;}


@media screen and (min-height:940px){
    #area_intro{background-size:cover;}
}

@media screen and (max-width:1919px){
 
}

@media screen and (max-width:1679px){

}

@media screen and (max-width:1535px){

}

@media screen and (max-width:1365px){

}

@media screen and (max-width:1279px){
	.area_quick .wrap{width:100%;}
	.area_quick .go_online{width:28%;}
	.area_quick .go_online a{box-sizing: border-box; padding:0 10px;}
	.area_quick .list_icon{width:72%;}

	.area_introduce ul li a p br{display:none;}
	.area_introduce ul li a{padding:60px 40px;}
}

@media screen and (max-width:1023px){
	.area_introduce ul li a{height:297px;}
	
	.area_information h2,
	.area_information h2,
	.area_introduce ul li a h3{font-size:20px;}
	
	.area_information{margin:60px 1%}
	.area_information .gallery ul li a > div{height:150px;}
}

@media screen and (max-width:960px){
	#content.main:before{width:100%;}
	.area_visual .list li, .area_visual .bx-viewport{height:500px;}
	.area_quick{overflow:hidden; position:static; height:auto;}
	.area_quick .go_online{width:100%; height:100px;}
	.area_quick .go_online a{text-align:center;}
	.area_quick .go_online a h3{background:none;}
	.area_quick .list_icon{width:100%;}
	.area_quick .list_icon ul li{height:120px;}

	.area_introduce{padding-top:60px;}
	
	.area_location .map_wrap{width:60%;}
	.area_location .text_wrap{width:40%;}
	.area_location .text_wrap .bottom{padding:35px;}
	.area_location .text_wrap .top a{display:block; margin:5px 0; font-size:30px;}
	
}

@media screen and (max-width:860px){

	.area_visual .list li .text h2{font-size:30px;}

}

@media screen and (max-width:767px){
	.area_visual .list li .text h2{font-size:20px;}
	.area_visual .list li .text p{font-size:14px;}
	.area_visual .list li .text a{padding:8px 23px; font-size:12px;}

	.area_quick .list_icon img{height:28px;}
	.area_quick .list_icon ul li p{font-size:12px;}
	.area_quick .go_online a h3{font-size:16px;}


	.area_introduce{padding-top:40px;}
	.area_introduce ul{flex-direction: column;}
	.area_introduce ul li{width:100%; text-align:center;}
	.area_introduce ul li a{height:auto; padding:30px 20px;}
	.area_introduce ul li a p{margin:12px 0 20px 0}
	
	.area_information h2, .area_information h2, .area_introduce ul li a h3{font-size:18px;}

	.area_information{flex-direction: column; margin:40px 2%; }
	.area_information > div{width:100%;}
	.area_information .notice{padding:0}
	.area_information .notice ul li{padding-left:55px;}
	.area_information .gallery{padding:0; margin-top:20px;}
	
	.area_information .gallery ul li{width:49%;}
	.area_information .gallery ul li a > div p{opacity:1; padding:0 10px; bottom:10px;}
	.area_information .gallery ul li a > div:before{opacity:1}
	
	.area_location{margin-bottom:60px;}
	.area_location .map_wrap{overflow:hidden; width:100%; height:400px;}
	.area_location .text_wrap{display:flex; width:100%;}
	.area_location .text_wrap > div{width:50%}
	.area_location .text_wrap .bottom{border-bottom:1px solid #eee;}
	.area_location .text_wrap .top{height:auto;}
	.area_location .text_wrap .top h3{font-size:14px; font-weight:bold;}
	.area_location .text_wrap .top a{font-size:20px;}
}


@media screen and (max-width:600px){

	.area_visual .list li, .area_visual .bx-viewport{height:400px;}
	.area_visual .list li .text span{display:none;}
	.area_location .text_wrap{flex-direction: column;}
	.area_location .text_wrap > div{width:100%;}
	.area_location .text_wrap .top{padding:20px 10px;}
	.area_location .text_wrap .bottom{padding:15px; border-bottom:0}
}


@media screen and (max-width:400px){
	
}

@media screen and (max-width:359px){
	
}