@charset "utf-8";

/*-----------------------------------------------------------------------------------------------------------
메인-레이아웃
-----------------------------------------------------------------------------------------------------------*/
#mainWrap	{ width:100%; position:relative; /*padding-top:101px;*/}
	#mainWrap:after		{content:'';display:block;clear:both;height:0;visibility:hidden}	
	
	.f1_con_wrap			{  width:100%; margin:0 auto; position:relative;height: 100vh; /*background:url(/img/main/bg0_1.jpg); *//*background:#16bcf0;*/background:url(/img/main/bg3.jpg?=1)no-repeat center top #403270  ; overflow: hidden; background-size:100%; display: flex; }
		.f1_con_ex_box		{position:relative;width:100%;margin:0 auto; /*max-width:1523px; */}

	.f2_con_wrap			{ width:100%; margin:0 auto; position:relative;/*clear:both; */max-width:1170px;height:536px;   }
		.f2_con_ex_box		{position:relative;width:100%; padding-top: 110px;display: inline-block;  }
		 
	.f3_con_wrap			{ width:100%; margin:0 auto; position:relative;clear:both;height: 362px;  background:#7f7f7f}
	 	.f3_con_ex_box		{ width:100%;margin:0 auto; position:relative;max-width:1200px;}
		
 
	.PC	{}	
	.mobile	{ display:none}
	
	
	/* 테블릿 가로 해상도 */
	@media all and (max-width:1259px) {
		.f2_con_wrap			{ max-width:none; width:100%;height:auto}
			.f2_con_ex_box		{  padding-top:40px; padding-bottom:40px;   }
		.f3_con_wrap			{ width:100%;  height:auto;display: inline-block}
			.f3_con_ex_box		{ width:96%; margin:0 auto;max-width:none}
			
 
 
	}

	/* 모바일 해상도 */
	@media all and (max-width:980px) {	
		#mainWrap	{ height: auto;   padding-top:0px;}
		
 
		.f1_con_wrap			{ background-size:200%;min-height: 400px;height: auto}
	
 

		.PC	{ display:none}	
		.mobile	{ display: block}
		
			
	}


	
/*-----------------------------------------------------------------------------------------------------------
메인슬라이드
-----------------------------------------------------------------------------------------------------------*/


	#main_roll{}
	#main_roll:after{display:block; content:""; clear:both;}
	#main_roll .visual{float:left; width:100%;/* height:auto; position:relative*/overflow:hidden}
	#main_roll .r_ban{float:right;}
/*	#main_roll .r_ban p{margin-bottom:10px;}
	#main_roll .r_ban p:last-child{margin-bottom:0;}
	.roll_txt	  { position:absolute; z-index:100; top:240px; left:40px;}
	.roll_txt li  { font-size:24px; color:#fff; font-weight:bold; letter-spacing:-1px;font-family: 'KHNPHD';text-shadow:0 0 3px #000}*/
	
	@media (max-width: 980px){
		#main_roll .visual{float: inherit; width:100%;}
		#main_roll{width:100%;}
		#main_roll .r_ban{float: inherit; width:100%; margin-top:10px;margin-bottom:20px;}
		#main_roll .r_ban img{width:100%;}

	}
/*-----------------------------------------------------------------------------------------------------------
하늘색 버튼3개
-----------------------------------------------------------------------------------------------------------*/
 
ul.mbox {position:relative;display:inline-block;float:left;min-height:300px;  background:#684b9b;color:#fff;margin:0em 0.7em;border-radius:10px;}
ul.mbox a {display:inline-block;padding:1.2em 1.9em 1.7em 1.9em;max-height:300px;}
ul.mbox a h3 {font-size:24px;padding:0 0 0.5em;margin:20px 0 10px 0;letter-spacing:-0.05em;color:#fff33f;font-weight: 600;}
ul.mbox a p {font-size:16px;line-height:1.5em;letter-spacing:-0.05em;color:#fff;}
ul.mbox a span.bt {position:absolute;right:40px;bottom:30px;display:inline-block;font-size:18px;border:1px solid #fff;color:#fff;padding:2px 20px 4px;margin-top:1em;line-height: 1.95em;}
ul.mbox a:hover span.bt {background:#fff;color:#684b9b;}

@media (max-width:600px) {	
ul.mbox {min-height:280px;height: auto;margin:0.8em 1.3em;  }
ul.mbox a {max-height:150px;}
ul.mbox a span.bt { line-height: 1.55em;}
}
/*-----------------------------------------------------------------------------------------------------------
전체메뉴
-----------------------------------------------------------------------------------------------------------*/
.msg_sound_only, .sound_only {display:inline-block !important;position:absolute;top:0;left:0;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important;}

.gnb_menu_btn {background:none;color:#333;width:50px;height:60px;border:0;vertical-align:top;font-size:18px}
.gnb_close_btn {background:#fff;color:#b6b9bb;width:50px;height:50px;border:0;vertical-align:top;font-size:18px;position:absolute;top:0;right:0}
#gnb .gnb_mnal {}
.scDown #gnb .gnb_menu_btn {color:#333;}

#gnb_all {display:none;position:absolute; border:1px solid #c5d6da;width:100%;max-width: 1200px;margin: -60px auto 0;left: 50%; transform: translateX(-50%);background:#fff;z-index:1000;-webkit-box-shadow:0 2px 5px rgba(0,0,0,0.2);
-moz-box-shadow:0 2px 5px rgba(0,0,0,0.2);
box-shadow:0 2px 5px rgba(0,0,0,0.2)}
#gnb_all h2 {position:relative;display:block;font-size:18px;line-height:1.2em;padding:15px 20px;margin:0;text-align:left;border-bottom:1px solid #e7eeef}
#gnb_all .gnb_al_ul {position:relative;font-size:14px;text-align:left;}
#gnb_all .gnb_al_ul:after {display:block;visibility:hidden;clear:both;content:""}
#gnb_all .gnb_al_ul > li:nth-child(5n+1) {border-left:0}
#gnb_all .gnb_al_li {float:left;width:15.5%;min-height:215px;padding:20px 2%;border-left:1px solid #e7eeef}
#gnb_all .gnb_al_li .gnb_al_a {font-size:1.2em;display:block;position:relative;margin-bottom:10px;font-weight:bold;color:#ff0000}
#gnb_all .gnb_al_li li {line-height:2em}
#gnb_all .gnb_al_li li a {color:#555}
#gnb_all_bg {display:none;background:rgba(0,0,0,0.6);width:100%;height:100%;position:fixed;left:0;top:0;z-index:999}
/*-----------------------------------------------------------------------------------------------------------
마라톤 설정
-----------------------------------------------------------------------------------------------------------*/
 
.roll_btnBox {display:table;position:absolute;left:50%;top:80%;width:100%;height:100px;transform: translateX(-50%);/*z-index:20;*/}
.roll_btnBox ul {display:table-cell;width:100%;height:100%;text-align:center;vertical-align:middle;padding-top:1.2em;}
.roll_btnBox ul li {width:100%;padding:0 0 00%; margin:0.7em 0;clear:both;}
.roll_btnBox ul li a {position:relative;width:50%;}
.roll_btnBox ul li a span {display:inline-block;width:100%;min-width:193px;background:#333;color:#fff;padding:15px 1.2em 16px;border-radius:10px 0 10px;}

.roll_imgBox {display:table;position:absolute;left:65%;top:50%;width:50%;height:100%;transform: translate(-50%, -50%);/*z-index:10;*/}
.roll_imgBox .imgOutZone {display:table-cell;width:950px;height:100%;text-align:center;vertical-align:middle;padding-top:2.2em;}
.roll_imgBox .imgOutZone span {}
.roll_imgBox .imgOutZone span img {width:100%;}

.roll_imgBox .imgOutZone {animation: ovjAni 1s 0.2s both;animation-delay:1.6s;}
.roll_btnBox .anibtn1 {display:block;animation: ovjAni 1s 0.2s both;animation-delay:1.8s;}
.roll_btnBox .anibtn2 {display:block;animation: ovjAni 1s 0.2s both;animation-delay:2.0s;}
.roll_btnBox .anibtn3 {display:block;animation: ovjAni 1s 0.2s both;animation-delay:2.2s;}
.roll_btnBox .anibtn4 {display:block;animation: ovjAni 1s 0.2s both;animation-delay:2.4s;}
.roll_btnBox .anibtn5 {display:block;animation: ovjAni 1s 0.2s both;animation-delay:2.6s;}
.roll_btnBox .anibtn6 {display:block;animation: ovjAni 1s 0.2s both;animation-delay:2.8s;}
.roll_btnBox .anibtn7 {display:block;animation: ovjAni 1s 0.2s both;animation-delay:3.4s;}

.roll_btnBox .anibtn1,
.roll_btnBox .anibtn2,
.roll_btnBox .anibtn5,
.roll_btnBox .anibtn6 {color:#fff;word-break: keep-all;word-wrap: break-word;}

.roll_btnBox .anibtn1 {color:#333;font-size:21px;}
.roll_btnBox .anibtn2 {font-size:72px;font-family: 'Nanum Brush Script', cursive;margin:0.3em 0;}
.roll_btnBox .anibtn2 p {display:inline-block;color:#00a0e3;word-break: keep-all;word-wrap: break-word;font-family: 'Nanum Brush Script', cursive;}
.roll_btnBox .anibtn3 { }
.roll_btnBox .anibtn3 p {font-size:32px;font-weight:500;color:#fff;background:#0071dc;border-radius:50px;padding:0.4em 0 0.5em;}
.roll_btnBox .anibtn4 {font-size:24px;color:#000;}
.roll_btnBox .anibtn5 {color:#000;font-size:24px;letter-spacing:-0.05em;line-height: 1.85em;}
.roll_btnBox .anibtn6 {color:#fff;font-size:24px; letter-spacing:0px;line-height: 46px}
.roll_btnBox .anibtn7 {}

 

.roll_btnBox .anibtn1 p, 
.roll_btnBox .anibtn2 p,
.roll_btnBox .anibtn2 p,
.roll_btnBox .anibtn3 p,
.roll_btnBox .anibtn4 p,
.roll_btnBox .anibtn5 p,
.roll_btnBox .anibtn6 p,
.roll_btnBox .anibtn7 p {word-break: keep-all;word-wrap: break-word;}

.roll_btnBox .anibtn7 a {background:#075b73;color:#fff;padding:5px 20px 7px;border-radius:50px;}
.roll_btnBox .anibtn7 a:hover {background:#fff;color:#075b73;}

.roll_btnBox .anibtn4 p strong,
.roll_btnBox .anibtn5 p strong,
.roll_btnBox .anibtn6 p strong {font-size:32px;color:#4c9ac4;line-height: 46px}

.roll_btnBox .anibtn3 p strong { color:#fff462}

@keyframes ovjAni {
	0% { opacity: 0; transform: translateY(0px);}
	100% { opacity: 1; transform: translateY(40px);}
}

.roll_btnBox ul li .anibtn1 span,
.roll_btnBox ul li .anibtn2 span,
.roll_btnBox ul li .anibtn3 span,
.roll_btnBox ul li .anibtn4 span,
.roll_btnBox ul li .anibtn5 span,
.roll_btnBox ul li .anibtn6 span { display:inline-block;
	transition: all 0.5s ease 0s;
	-moz-transition: all 0.5s ease 0s;
	-webkit-transition: all 0.5s ease 0s;
	-o-transition: all 0.5s ease 0s;
}
.roll_btnBox ul li .anibtn1:hover span,
.roll_btnBox ul li .anibtn2:hover span,
.roll_btnBox ul li .anibtn3:hover span,
.roll_btnBox ul li .anibtn4:hover span,
.roll_btnBox ul li .anibtn5:hover span,
.roll_btnBox ul li .anibtn6:hover span {background:#009999;
	-moz-transform: scale(1.2) rotate(0deg);
	-webkit-transform: scale(1.2) rotate(0deg);
	-o-transform: scale(1.2) rotate(0deg);
	-ms-transform: scale(1.2) rotate(0deg);
	transform: scale(1.2) rotate(0deg);
}


.basic_li {position:relative;display:inline-block;float:left;width:100%;}
.basic_li a {float:left;width:auto !important;}
.basic_li .new_icon {float:left;line-height:1em;background:#ff1a21;color:#fff;margin:10px 0 0 3px;border-radius:2px;font-size:12px;padding:2px 3px;}
.basic_li .lt_info {float:right;}
.basic_li:hover {background:#f9f9f9;}

@media (max-width:980px) {	
.roll_btnBox {display:table;position:absolute;/*left:1%;*/top:60%;width:98%;height:100%;/*transform: translate(0%, 0%);*//*z-index:20;*/}
.roll_btnBox ul { vertical-align:top;padding-top:0em;}
.roll_btnBox ul li {width:90%;padding:0 5%; margin:10px 0;clear:both;}
.roll_btnBox ul li a {position:relative;width:100%;}
.roll_btnBox ul li a span {display:inline-block;width:100%;min-width:193px;background:#333;color:#fff;padding:15px 1.2em 16px;border-radius:10px 0 10px;}

	
.roll_imgBox {display:none}
	
.roll_btnBox .anibtn1 { font-size:18px; }
.roll_btnBox .anibtn2 {font-size:72px;margin:10px 0;}

.roll_btnBox .anibtn4 {font-size:17px;}
.roll_btnBox .anibtn5 {font-size:18px;letter-spacing:-0.05em;line-height: 1.85em;}
.roll_btnBox .anibtn6 {font-size:18px;}
	
.roll_btnBox .anibtn4 p strong,
.roll_btnBox .anibtn5 p strong,
.roll_btnBox .anibtn6 p strong {font-size:26px;}
	
.roll_btnBox .anibtn3 p {font-size:30px;line-height: 36px; /*background:none;*/ }
	
.roll_btnBox .anibtn1 img {width:100%}
}
/*-----------------------------------------------------------------------------------------------------------
버튼4개
-----------------------------------------------------------------------------------------------------------*/
.bannerZone3 {padding-top: 95px}
.bannerZone3 a {
	transition: all 0.5s ease 0s;
	-moz-transition: all 0.5s ease 0s;
	-webkit-transition: all 0.5s ease 0s;
	-o-transition: all 0.5s ease 0s;
}
.bannerZone3 a:hover {
	transform: scale(1.1) rotate(0deg);
	-moz-transform: scale(1.1) rotate(0deg);
	-webkit-transform: scale(1.1) rotate(0deg);
	-o-transform: scale(1.1) rotate(0deg);
	-ms-transform: scale(1.1) rotate(0deg);
}
.bannerZone3 a.ibImgBox {position:relative;display:block;border:5px solid #ddd;margin: 11px;color:#fff;height: 152px}
.bannerZone3 a:hover.ibImgBox {border-color:#fff33f;color:#fff33f;}
.bannerZone3 a.ibImgBox .ibGroup {display:block;margin:1em 0 2em 1.5em;text-align:left;}
.bannerZone3 a.ibImgBox .ibGroup .ibTitle {font-size:24px;font-weight:600;}
.bannerZone3 a.ibImgBox .ibGroup .ibBtn {font-size:16px;margin-top:1em;}
.bannerZone3 a.ibImgBox .ibIcon {position:absolute;right:0.4em;bottom:0.2em;font-size:3em;}
.bannerZone3 a.ibImgBox .ibIcon i {color:#fff;}
.bannerZone3 a:hover.ibImgBox .ibIcon i {color:#fff33f;}
@media (max-width:980px) {	
.bannerZone3 { padding-top: 35px}
.bannerZone3 a.ibImgBox { height: 122px}
 
 }