@charset "utf-8";
@import url('reset.css');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:100,300,400,500,700,900|Work+Sans:300,400,500,600,700,900');


/* skipToContent */
#skipToContent a {position:absolute; top:0; left:0; z-index:9999; width:100%; height:1px; margin-top:-1px; display:block; background-color:#3875c1; font-size:14px; font-weight:bold; color:#fff; line-height:1; text-align:center; overflow:hidden}
#skipToContent a:focus, #skipToContent a:active {margin-top:0; height:auto; padding:10px 0px}

/* common */
#wrap{width:100%;max-width:1920px;margin:0 auto;}
#wrap2{width:100%;max-width:1920px;margin:0 auto;background:url('../images/sub07_07.jpg') center 0 no-repeat;background-size:cover;padding:10% 0 10% 0}
.img-responsive {display:block; max-width:100%; height:auto}
.width100{width:100%;padding:0; margin:0}
.hei100{height:100%;padding:0; margin:0}
.brmobile2{display:block}
.mobile{display:block}
.mobile2{display:none}
.auto {margin:0 auto}
.mvisible{display:none}
.mobile1680{display:none}

/* header */
header
.top{width:84%; max-width:1600px;margin:2% auto 2.5% auto}
.top_left_box{float:left; display:inline-block;width:40%}
.top_left{font-family: 'Noto Sans KR', sans-serif;font-size:13px;color:#666666;font-weight:400;width:35%;line-height:140%; display:inline-block;padding-top:3px}
.top_left span{font-family: 'Work Sans', sans-serif;font-size:14px;color:#949494;font-weight:600}
.utilitybox{width:30%; display:inline-block;margin-bottom:10px;vertical-align:top}
.utility{width:100%}
.utility_btn01{border:1px solid #454545;border-radius:50px;padding:6% 7% 7% 7%;font-size:14px;color:#454545;font-weight:400;text-align:center}
.utility_btn01 a{color:#000;}
.utility2{width:84%;margin:0 auto 10% auto}
.utility2_btn01{border:1px solid #454545;border-radius:50px;padding:6% 7% 7% 7%;font-size:14px;color:#454545;font-weight:400;text-align:center}
.utility2_btn01 a{color:#000;}
.logo_box{text-align:center;margin:0 auto;display:inline-block;width:25%; text-align:center; }
.logo{font-family:'Verdana', 'Work Sans', sans-serif;font-size:36px;color:#333333;font-weight:bold;text-align:center;margin:0 auto}
.logo a{color:#333333;}
.logo span{display:none;font-family: 'Work Sans', sans-serif;font-size:14px;color:#818181;font-weight:400;text-align:center;text-transform:uppercase}

.top_right_box{position:relative;  float:left; display:inline-block;width:34%;float:right;margin-top:0.5%;padding-top:0}
.top_right{font-family: 'Work Sans', sans-serif;font-size:24px;color:#333;font-weight:600;text-transform:uppercase;text-align:right}
.top_right .month{font-family: 'Work Sans', sans-serif;font-size:16px;color:#333;font-weight:400;padding-right:50px;margin-right:14%}
.top_right .menu{position:absolute; right:8%;font-family: 'Work Sans', sans-serif;font-size:20px;color:#333;font-weight:600;text-transform:uppercase;margin-right:1%; margin-top:1%}
.top_right .menu a{color:#333}
.btn_side{position:absolute;  right:0; z-index:999;display:inline-block;margin-top:3px;margin-top:1%}
.logo02{;text-align:center;margin:3.5% auto 1% auto; z-index:999;font-family:'Verdana', 'Work Sans', sans-serif;font-size:36px;color:#333333;font-weight:bold;}
.logo02 a{color:#333333;}
.vol{width:100%;font-family: 'Work Sans', sans-serif;font-size:14px;color:#818181;font-weight:400;margin:0 auto 3% auto;text-align:center;text-transform:uppercase}

/* menu */
#side{display:none; z-index:99999; width:100%; height:90%; position:fixed; top:0; right:0;background:#fff;padding:0; margin:0;right:-100%;overflow:scroll;}
#mask {position:absolute; z-index:999; background:rgba(0,0,0,0.6) 0 0; display:none; left:0; top:0; width:100%; height:100%; overflow:hidden;margin:0;padding:0}
.close {display:none; position:fixed; top:8%; right:9%; width:24px; height:24px; background-image:url('../../img/2019/btn_close.png'); background-position:0 0;background-size:24px 24px;text-indent:-9999px; opacity:1}

.listWrap02{overflow:hidden;text-align:center; margin:4% auto 5% auto; width:85%;}
.listWrap02 li{float:left;width:30%;margin:1% 1%;}
.listWrap02 .list02{clear:both}
.listWrap02 .thum{width:15%;display:block;float:left;margin:7px 15px 0 0;max-width:75px}
.listWrap02 .menu_txt{width:81%;float:left;display:block;margin-top:7px}
.listWrap02 .listname{display:block;font-family: 'Noto Sans KR', sans-serif;font-size:15px;color:#313131;font-weight:600;text-align:left;margin-bottom:3px;text-transform:uppercase}
.listWrap02 .listTitle{display:block;font-family: 'Noto Sans KR', sans-serif;font-size:14px;color:#666666;font-weight:400;text-align:left;margin-bottom:2px}
.listWrap02 .listTitle_s{display:block;font-family: 'Noto Sans KR', sans-serif;font-size:14px;color:#666666;font-weight:400;text-align:left;margin-bottom:1px;letter-spacing:-0.05em}
.listWrap02 .listTxt{display:block;font-family: 'Noto Sans KR', sans-serif;font-size:14px;color:#959595;font-weight:300;text-align:left;}
.listWrap02 .menu_txt02{width:81%;float:left;display:block}
#container{width:100%;overflow:hidden}

/* conBox */
#conBox {max-width:1650px; margin:0 auto; overflow:hidden;}
.conBox_con {position:relative; width:30.3%; display:block; float:left; background:#000; margin:0 1.5% 0 1.5%;}
.conBox_con img {opacity:1; -webkit-transition:opacity 0.35s; transition:opacity 0.35s}
.conBox_con:hover img {opacity:0.7}
.conBox_con a span {position:absolute; top:45px; left:0; padding:0 45px; -webkit-transition:transform 0.35s ease-in; transition:transform 0.35s ease-in; color:#fff}
.conBox_con a span p {font-size:16px;border-radius:35px;border:1px solid #fff;padding:6px 23px;font-weight:500;display:inline}
.conBox_con a span h2 {font-size:22px; line-height:30px; font-weight:normal; margin-top:30px;font-family:'Jeju Myeongjo', serif}
.float-right {float:right !important}
.float-left{float:left !important}
.conBox_con02 {position:relative; width:63.5%; display:block; float:left; background:#000; margin:0 1.5% 3% 1.5%}
.conBox_con02 img {opacity:1; -webkit-transition:opacity 0.35s; transition:opacity 0.35s}
.conBox_con02:hover img {opacity:0.7}
.conBox_con02 a span {position:absolute; top:45px; left:0; padding:0 45px; -webkit-transition:transform 0.35s ease-in; transition:transform 0.35s ease-in; color:#fff}
.conBox_con02 a span p {font-size:16px;border-radius:35px;border:1px solid #fff;padding:6px 23px;font-weight:500;display:inline}
.conBox_con02 a span h2 {font-size:22px; line-height:30px; font-weight:normal; margin-top:30px;font-family:'Jeju Myeongjo', serif}
.conBox_con03 {position:relative; width:30.3%; display:block; float:left; background:#000; margin:0 1.5% 3% 1.5%;}
.conBox_con03 img {opacity:1; -webkit-transition:opacity 0.35s; transition:opacity 0.35s}
.conBox_con03:hover img {opacity:0.7}
.conBox_con03 a span {position:absolute; top:45px; left:0; padding:0 45px; -webkit-transition:transform 0.35s ease-in; transition:transform 0.35s ease-in; color:#fff}
.conBox_con03 a span p {font-size:16px;border-radius:35px;border:1px solid #fff;padding:6px 23px;font-weight:500;display:inline}
.conBox_con03 a span h2 {font-size:22px; line-height:30px; font-weight:normal; margin-top:30px;font-family:'Jeju Myeongjo', serif}
.conBox_con04 {position:relative; width:30.3%; display:block; float:left; background:#000; margin:-33.2% 1.5% 0 1.5%;/**/}
.conBox_con04 img {opacity:1; -webkit-transition:opacity 0.35s; transition:opacity 0.35s}
.conBox_con04:hover img {opacity:0.7}
.conBox_con04 a span {position:absolute; top:45px; left:0; padding:0 45px; -webkit-transition:transform 0.35s ease-in; transition:transform 0.35s ease-in; color:#fff}
.conBox_con04 a span p {font-size:16px;border-radius:35px;border:1px solid #fff;padding:6px 23px;font-weight:500;display:inline}
.conBox_con04 a span h2 {font-size:22px; line-height:30px; font-weight:normal; margin-top:30px;font-family:'Jeju Myeongjo', serif}
.conBox_con044 {position:relative; width:30.3%; display:block; float:left; background:#000; margin:-33.2% 1.5% 0 1.5%;/**/}
.conBox_con044 img {opacity:1; -webkit-transition:opacity 0.35s; transition:opacity 0.35s}
.conBox_con044:hover img {opacity:0.7}
.conBox_con044 a span {position:absolute; top:45px; left:0; padding:0 45px; -webkit-transition:transform 0.35s ease-in; transition:transform 0.35s ease-in; color:#fff}
.conBox_con044 a span p {font-size:16px;border-radius:35px;border:1px solid #fff;padding:6px 23px;font-weight:500;display:inline}
.conBox_con044 a span h2 {font-size:22px; line-height:30px; font-weight:normal; margin-top:30px;font-family:'Jeju Myeongjo', serif}

/*footer*/
.footer {overflow:hidden;border-top: 1px solid #dcdcdc;padding:3% 0; /*margin-top:5%;%*/width:84%; max-width:1600px;margin:3% auto}
.address{float:left;font-size:12px;color:#8a8a8a;font-weight:400; display:inline-block;line-height:250%}
.address img{display:block;float:left;margin-right:20px}
.footer_btn{width:28%; float:right;text-align:right}
.footer_btn li{display:block; margin:0 0 0 3%;display:inline-block;}
.footer_btn .btn01{border:1px solid #000;border-radius:50px;padding:3% 7%;font-size:14px;color:#000;font-weight:400}
.footer_btn .btn01 a{color:#000;}
/*top*/
.top_btn{display:block;position:fixed; bottom:6%; right:3%;opacity:0.6}

@media screen and (max-width:1680px) {
	.hidden-lg {display:none !important}
	.listWrap02{width:90%}
	.footer_btn{width:35%}
	/*header .top{width:100%}*/
	#conBox{width:87%}

}
@media screen and (max-width:1440px) {
	.hidden-lg {display:none !important}
	.utility{left:9.5%}
	.top_left span{font-size:13px}
	.top_left{font-size:12px}
	.top_right .month{font-size:14px}
	.top_right .menu{font-size:18px;margin-top:2%}
	.utilitybox{margin-bottom:9px}
	.top_right .menu{margin-right:2%}

}
/*노트북*/
@media screen and (max-width:1366px) {
	.hidden-lg {display:none !important}
	#wrap{width:90%}
	.top_left{width:40%}
	.top_right .menu{margin-right:3%}
	.utility{margin-left:0}
	.logo{font-size:32px}
	

}
@media screen and (max-width:1280px) {
	.listWrap02 li{width:42%;margin:1% 2%;}
	.listWrap02 .list02{clear:none}
	.listWrap02 .menu_txt02{width:70%;margin-top:3%}
	.listWrap02 .menu_txt{width:70%;margin-top:3%}
	#side{height:95%}
	#wrap{width:100%}
	.footer{width:94%;margin:5% auto 0 auto}
	.footer_btn{width:45%;margin:0 auto}
	.footer_btn .btn01{font-size:12px;}
	.address{font-size:11px;}
	.address img{float:none;margin-bottom:5px}
	header .top{width:94%}
	.top_left{left:3%}
	.top_right{right:3%}
	.top_left{font-size:12px}
	.top_right .menu{margin-right:3%;margin-top:1.5%}
	.top_right .month{font-size:13px;margin-right:16%;margin-bottom:5px}	
	.utility_btn01{font-size:12px}
	.logo{font-size:34px;margin:-0.8% auto 0 auto}
	.top_btn{bottom:13%;right:1.8%}
	#conBox{width:97%}
	.conBox_con a span p{font-size:14px}
	.conBox_con02 a span p{font-size:14px}
	.conBox_con03 a span p{font-size:14px}
	.conBox_con04 a span p{font-size:14px}
	.conBox_con a span h2{font-size:20px}
	.conBox_con02 a span h2{font-size:20px}
	.conBox_con03 a span h2{font-size:20px}
	.conBox_con04 a span h2{font-size:20px}
}
/*아이패드 미니-가로*/
@media screen and (max-width:1024px) {
	/*.hidden-md {display:none !important}*/
	.subtop{width:100%}
	#container{width:90%}
	.listWrap02 .listTxt{font-size:12px}
	.top_right .menu{display:none}
	.top_right .month{padding:20px 10px 0 0}
	.top_left{font-size:10px}
	.top_left span{font-size:12px}
	.top_btn{bottom:14.2%}
	#conBox{margin-top:4%}
	.logo{font-size:26px}
	.listWrap02 .menu_txt02{width:60%}
	.listWrap02{text-align:right}
	.top_left_box {width:43%}
	.top_right_box{width:30%}
}
@media screen and (max-width:960px) {
	.hidden-sm {display:none !important}
	.footer_btn{float:none;overflow:hidden; margin:0 auto;width:65%}
	.address{float:none;display:block; margin:2% auto 0 auto ;text-align:center;width:60%;font-size:11px}
	.address img{clear:both;display:block; margin:2% auto;width:20%;}
	.listWrap02 .thum{width:14%}
	.listWrap02 .menu_txt{width:70%;margin-top:0}
	.listWrap02 .menu_txt02{width:70%;margin-top:0}
	.top_right .month{padding:10px 5px 0 0;font-size:12px}
	.listWrap02 li{vertical-align:top;height:100px}
	.utility_btn01{font-size:10px}
	.footer_btn li{margin:0 1%}
	.footer_btn{text-align:center}
	.top_btn{bottom:12%}	
	.conBox_con a span p{font-size:12px}
	.conBox_con02 a span p{font-size:12px}
	.conBox_con03 a span p{font-size:12px}
	.conBox_con04 a span p{font-size:12px}
	.conBox_con a span h2{font-size:17px;line-height:130%;font-weight:600}
	.conBox_con02 a span h2{font-size:17px;line-height:130%;font-weight:600}
	.conBox_con03 a span h2{font-size:17px;line-height:130%;font-weight:600}
	.conBox_con04 a span h2{font-size:17px;line-height:130%;font-weight:600}
	}
/*아이패드 미니-세로, 아이폰 XS-가로*/
@media screen and (max-width:768px) {
	.top_left_box{display:none}
	.top_right{top:3%}
	.top_right .month{padding:0 10px 10px 0;font-size:11px}
	.logo{font-size:24px;margin-top:3.8% ;text-align:left;left:-6.5%}
	.footer_btn{width:65%}
	.address{width:65%}
	.close{top:4%}
	#conBox{margin-top:3%}	
	.conBox_con a span {font-size:12px;top:30px;padding:0 30px}
	.conBox_con02 a span {font-size:12px;top:30px;padding:0 30px}
	.conBox_con03 a span {font-size:12px;top:30px;padding:0 30px}
	.conBox_con04 a span {font-size:12px;top:30px;padding:0 30px}
	.conBox_con a span p{padding:5px 15px}
	.conBox_con02 a span p{padding:5px 15px}
	.conBox_con03 a span p{padding:5px 15px}
	.conBox_con04 a span p{padding:5px 15px}
	.conBox_con a span h2{font-size:15px;line-height:130%;font-weight:600;margin-top:20px}
	.conBox_con02 a span h2{font-size:15px;line-height:130%;font-weight:600;margin-top:20px}
	.conBox_con03 a span h2{font-size:15px;line-height:130%;font-weight:600;margin-top:20px}
	.conBox_con04 a span h2{font-size:15px;line-height:130%;font-weight:600;margin-top:20px}
	.top_btn{bottom:6%}
}
@media screen and (max-width:570px) {	
	.listWrap02 li{width:90%;margin:3% 3%;}
	.listWrap02 .thum{width:15%;margin-left:2%;}
	.listWrap02 .menu_txt{width:70%;text-align:left;margin-top:2%}
	.listWrap02 .menu_txt02{width:70%;text-align:left;margin-top:2%}

	.hidden-xs {display:none !important}
	.hidden-sm{display:none !important}
	.mvisible{display:block}
	.mobile{display:none}
	.logo_box{width:35%;margin-left:5%}
	.top_right_box{width:50%;margin-right:5%}
	.footer{width:90%}
	.footer_btn{width:95%;margin:2% auto}
	.footer_btn li{margin:0 2px}
	.address{width:95%;font-size:10px}
	header .top{margin:2% auto 0% auto}
	#conBox {padding:10px 10px;text-align:center;margin-top:0;width:94%}
	.conBox_con {width:90%; margin:3% 5% 5% 5%;text-align:left}
	.conBox_con02 {width:90%; margin:3% 5% 5% 5%;text-align:left}
	.conBox_con03 {width:90%; margin:3% 5% 5% 5%;text-align:left}
	.conBox_con04 {width:90%; margin:3% 5% 5% 5%;text-align:left}
	.listWrap02 li{height:70px}

}
/*아이폰XS*/
@media screen and (max-width:425px) {
	.logo{font-size:20px;margin-top:0}
	.logo02{font-size:20px}
	.logo span{font-size:11px}
	#conBox {padding:10px 6px;text-align:left}
	.footer_btn{width:100%}
	.footer_btn li{margin:0 1% 0 1%}
	.footer_btn .btn01{padding:1% 3%}
	.address{font-size:8px}
	.address img{width:30%}
	.listWrap02 li{width:90%;margin:3% 3%;}
	.listWrap02 .thum{width:17%;margin-left:2%;}
	.listWrap02 .menu_txt{width:75%;text-align:left;}
	.listWrap02 .menu_txt02{width:75%;text-align:left;margin-top:5px}
	.listWrap02 .listname{font-size:13px}
	.listWrap02 .listTitle{font-size:12px}
	.close{top:3%; right:4%}
	.listWrap02 li{height:60px}
	.top_right .month{display:none}
	#conBox{width:96%}
	.logo_box{width:45%;margin-left:4%}
	.top_right_box{width:45%;margin-right:4%}
	.logo{font-size:22px}
	.conBox_con a span h2{font-size:17px}
	.conBox_con02 a span h2{font-size:17px}
	.conBox_con03 a span h2{font-size:17px}
	.conBox_con04 a span h2{font-size:17px}


}
@media screen and (max-width:360px) {
	.logo{font-size:18px;top:7%;left:-2.5%}
	.top_right span{font-size:10px}
	.footer_btn{width:100%}
	.footer_btn li{margin:0 2px 0 2px;}
	.footer_btn .btn01{padding:1% 2%}	
	.utility_btn01{font-size:7px}
	.utility{top:4%}
	.address{font-size:7px}
	#conBox {padding:10px 5px;}
	.conBox_con a span h2{font-size:15px;}
	.conBox_con02 a span h2{font-size:15px;}
	.conBox_con03 a span h2{font-size:15px;}
	.conBox_con04 a span h2{font-size:15px;}
}