@charset "utf-8";


/* 레이아웃 */
html, body { width:100%; height:100%; }
#gaonwrap { min-width:1400px; width:100%; height:100%; }

#top { position:relative; min-width:1400px; width:100%; border-bottom:1px solid #ddd; overflow-x: clip; }
	#toparea { position:relative; width:1400px; /*height:186px;*/ margin:0 auto; overflow:visible; } 
	
#scontainer { width:1400px; margin:0 auto 70px; }	
		
	#sleft { float:left; width:280px; margin-right:60px; }
	#sright { float:left; position:relative; width:calc(100% - 340px); padding:30px 0 50px 0;}
		#content { width:100%; }
		
#bottom { position:relative; width:100%; background:#212131; color:#eee; }
	#bottomarea { position:relative; width:1400px; padding:32px 0 70px 0; margin:0 auto;  }

		

@media (min-width:1025px) and (max-width:1400px){
	#gaonwrap { min-width:100%; width:100%; }

	#top { position:relative; min-width:100%; width:100%; }
		#toparea { position:relative; width:100%; margin:0 auto; overflow:visible; } 
		
	#scontainer { width:100%; padding:0 15px; margin:0 auto 70px; }	
			
		#sleft { float:left; width:250px; margin-right:50px; }
		#sright { float:left; position:relative; width:calc(100% - 300px); }
			#content { width:100%; }
		
	#bottom { position:relative; width:100%; background:#212131; color:#ccc; }
		#bottomarea { position:relative; width:100%; padding:32px 15px 70px 15px; margin:0 auto; }
}



@media (min-width:769px) and (max-width:1024px){
	html, body, #gaonwrap { min-width:100%; width:100%; }
		
	#top { position:relative; min-width:100%; width:100%; border-bottom:1px solid #ddd; background:#fff; }
		#toparea { position:relative; width:100%; margin:0 auto; overflow:visible; flex-direction: row-reverse;} 
		
	
	#scontainer { width:100%; margin:30px auto 50px; }
		
		#sleft { display:none; }
		#sright { float:none; position:relative; width:100%; padding:0 30px; }
			#content { width:100%; }
		
	#bottom { position:relative; width:100%; background:#212131; color:#ccc; }
		#bottomarea { position:relative; width:100%; padding:32px 30px 70px 30px; margin:0 auto;  }
}


@media (max-width:768px){
	html, body, #gaonwrap { min-width:100%; width:100%; }
		
	#top { position:relative; min-width:100%; width:100%; border-bottom:1px solid #ddd; background:#fff; }
		#toparea { position:relative; width:100%; margin:0 auto; overflow:visible; flex-direction: row-reverse; }
		
	#scontainer { width:100%; margin:30px auto 30px; }
		
		#sleft { display:none; }
		#sright { float:none; position:relative; top:0; width:100%; padding:0;  }
			#content { width:100%; padding:0 15px; }
			
	#bottom { position:relative; width:100%; background:#212131; color:#ccc; }
		#bottomarea { position:relative; width:100%; padding:32px 30px 70px 30px; margin:0 auto; }

}


@media (max-width:500px){
body { background:#fff; }	
	
}


/* 로그인 */
#loginBg { width:100%; height:100%; padding-top:130px; box-sizing:border-box; background:#eee; }
#loginBox { width:1000px; height:700px; margin: 0 auto;background: #fff; box-shadow:5px 5px 15px #888; }
#loginImgarea { float:left; width:50%; height:100%; background:url(/images/council/sub/login_img.jpg) no-repeat; }
#loginBoxarea { float:left; width:50%; height:100%; padding:170px 30px 0 30px; box-sizing:border-box; }
#loginBoxarea h1 { width:100%; text-align:center; font-family: esamanru-Medium, "이사만루 미디엄"; margin-bottom:30px; }
#loginBoxarea .login_box { width:100%; }
#loginBoxarea .login_box #login_id { width:100%; padding-left:15px; box-sizing:border-box; height:50px; border:1px solid #ccc; margin-bottom:20px; }
#loginBoxarea .login_box #login_pw { width:100%; padding-left:15px; box-sizing:border-box; height:50px; border:1px solid #ccc; margin-bottom:20px; }
#loginBoxarea .login_box .login_btn { width:100%; height:60px; background:#ee402e; border:none; color:#fff; font-size:130%;  cursor:pointer; }


@media (max-width:1000px){
	#loginBg { padding-top:200px; }
	#loginBox { width:500px; height:350px; margin: 0 auto; background: #fff; box-shadow:none; }
	#loginImgarea { display:none; }
	#loginBoxarea { float:none; width:100%; padding:30px; box-sizing:border-box; }
	
}

@media (max-width:500px){
	#loginBg { padding-top:0; background:#fff; }
	#loginBox { width:100%; height:auto; margin: 0 auto; background: #fff; box-shadow:none; }
	#loginImgarea { display:none; }
	#loginBoxarea { float:none; width:100%; padding:30px; box-sizing:border-box; }
	
}






/* 좌측메뉴 */
.leftmenu > ul > li { display:none; }
.leftmenu > ul > li > a { display:none !important; }
.leftmenu > ul > li > ul { display:block !important; }



.leftmenu { position:relative; top:-75px; width:100%; margin-bottom:30px; }
.leftmenu h1 { display: flex; justify-content: center; align-items: center; height:110px; background:linear-gradient(120deg, #6284e5, #F0EFFD, #8f94d1); background-size:200%; box-shadow:0px 0px 10px 0px rgba(0, 0, 0, 0.2); border-radius:20px 0 20px 20px; color:#fff; text-shadow:2px 2px 5px rgba(0,0,0,0.4); font-size:200%; font-family:pgovb;
	animation : leftmenu 10s ease-in-out infinite; margin-bottom:8px;
}

.leftmenu ul { overflow:unset; }
.leftmenu > ul > li > ul { width:100%;  }
.leftmenu > ul > li > ul > li { position:relative; width:100%;  }

.leftmenu > ul > li > ul > li > a:link,
.leftmenu > ul > li > ul > li > a:visited { width:100%; height:50px; line-height:50px; padding-left:15px; box-sizing:border-box; border-bottom:1px solid #ddd; background:url(/images/sub/leftmenu_blt1_off.gif) no-repeat right 10px top; display:block; }
.leftmenu > ul > li > ul > li > a:active,
.leftmenu > ul > li > ul > li > a:focus,
.leftmenu > ul > li > ul > li > a:hover {  background:url(/images/sub/leftmenu_blt1_on.gif) no-repeat right 10px top; color:var(--secondary); font-weight:bold; }
.leftmenu > ul > li > ul > li > a.select { background:var(--primary-80) url(/images/sub/leftmenu_blt1_on.gif) no-repeat right 10px top; color:#fff; font-family:pgovb; border-radius:10px; border-bottom-color:#fff; }
.leftmenu > ul > li > ul > li > a.select:before {display:none;}


.leftmenu > ul > li > ul > li > a.bltDepth:link,
.leftmenu > ul > li > ul > li > a.bltDepth:visited {background:none;}

.leftmenu > ul > li > ul > li > a.bltDepth > p  { position:absolute; top:10px; right:10px; font-size:0; width:32px; height:32px; border:1px solid #D8DEDE; border-radius:4px; }
.leftmenu > ul > li > ul > li > a.bltDepth > p::before,
.leftmenu > ul > li > ul > li > a.bltDepth > p::after { position:absolute; top:calc(50% - 1px); left:calc(50% - 8px); content:''; width:16px; height:2px; display:block; background:#ccc; }
.leftmenu > ul > li > ul > li > a.bltDepth > p::after { transform:rotate(90deg); }

.leftmenu > ul > li > ul > li > a.bltDepth:hover > p {border:1px solid #a5cde9;}
.leftmenu > ul > li > ul > li > a.bltDepth:hover > p::before,
.leftmenu > ul > li > ul > li > a.bltDepth:hover > p::after {background:#a5cde9;}


.leftmenu > ul > li > ul > li > a.bltDepth.select {background:var(--primary-80);}
.leftmenu > ul > li > ul > li > a.bltDepth.select > p { border:1px solid #a5cde9;}
.leftmenu > ul > li > ul > li > a.bltDepth.select > p::after {display:none;}
.leftmenu > ul > li > ul > li > a.bltDepth.select > p::before,
.leftmenu > ul > li > ul > li > a.bltDepth.select > p::after {background:#a5cde9;}


.leftmenu > ul > li > ul > li > a:before {content:''; position:absolute; transform:translateY(-50%); opacity:0; visibility:hidden; right:auto; top:100%; left:0; width:0; height:2px; background:var(--primary-80);}
.leftmenu > ul > li > ul > li > a:hover:before {opacity:1; visibility:visible; width:100%; transition:width 0.25s ease-in-out;}

.leftmenu > ul > li > ul ul { display:none; border-radius:0 0 10px 10px;  width:100%; padding:10px 0 10px 15px;  box-sizing:border-box;background:#fafafa; }
/*.leftmenu > ul > li > ul ul:before {content:''; position:absolute; top:100%; left:0; width:100%; height:2px; background:var(--primary-80);}*/


.leftmenu > ul > li > ul ul li {  width:100%;  }
.leftmenu > ul > li > ul ul li a:link,
.leftmenu > ul > li > ul ul li a:visited { width:100%; height:30px; line-height:30px; padding-left:15px; box-sizing:border-box; background:url(/images/sub/leftmenu_blt2_off.gif) no-repeat 0px 12px; color:#666; font-size:95%; font-family: pgovm; display:block;  }
.leftmenu > ul > li > ul ul li a:active,
.leftmenu > ul > li > ul ul li a:focus,
.leftmenu > ul > li > ul ul li a:hover { background:url(/images/sub/leftmenu_blt2_on.gif) no-repeat 0px 13px; color:var(--point); }
.leftmenu > ul > li > ul ul li a.select { background:url(/images/sub/leftmenu_blt2_on.gif) no-repeat 0px 13px; color:var(--point); font-family:pgovb;  }




.leftmenu > ul > li > ul > li > a.double:link,
.leftmenu > ul > li > ul > li > a.double:visited { height:auto; line-height:1.3; padding:15px 0 10px 15px; background:url(/images/sub/leftmenu_blt1_off.gif) no-repeat right 9px; }
.leftmenu > ul > li > ul > li > a.double:active,
.leftmenu > ul > li > ul > li > a.double:focus,
.leftmenu > ul > li > ul > li > a.double:hover,
.leftmenu > ul > li > ul > li > a.double.select { background:#f4f4f4 url(/images/sub/leftmenu_blt1_on.gif) no-repeat right 9px;  }


@keyframes leftmenu {
	0% { background-position:0 50%; }
	50% { background-position:100% 50%; }
	100% { background-position:0 50%; }
}




/* 페이지 타이틀 */
.pagetitle h1 {color:#fff !important;}
.pagetitle .path {color:#ccc !important;}
.pagetitle .path strong {color:#ccc !important;}






/* 사업단 상단 - 로그아웃, 마이페이지 등 */
.memberMenu { position:relative; right:0; ; order: 1; }
.memberMenu ul { display:flex; justify-content: end; align-items: center; height: 40px; }
.memberMenu ul li { padding: 0 20px; }
.memberMenu ul li a { position:relative; display:flex; align-items:center;  }
.memberMenu ul li a i { display:flex; align-items:center; }
.memberMenu ul li a span { line-height:1; }

.memberMenu ul li:nth-child(1) { border-right:1px solid #ddd; }
.memberMenu ul li:nth-child(2) a i img { width:14px; height:auto; margin-right:5px; }

@media (max-width:1280px){
	.memberMenu ul { margin-right:15px; }
	
}

@media (max-width:1024px){
	.memberMenu { position:absolute; top:26px; right:0; }
	.memberMenu ul { height:auto; }
	.memberMenu ul li { width:20px; }
	.memberMenu ul li a { display:block; }
	.memberMenu ul li i { display:block; }
	.memberMenu ul li i img { width:20px !important; }
	.memberMenu ul li span { display:none; }
	.memberMenu ul li:nth-child(1) { display:none; }
	
}

@media (max-width:768px){
	.memberMenu { position:absolute; top:26px; right:0; }
	
}





/* 서브비주얼 */
#svisible { position:relative; width:100%; height:150px; background:#082976 url(/images/sub/svisible_bg.jpg) no-repeat center right;  }
#svisible #svisiblearea { width:1400px; margin:0 auto; }

#svisible .txt1 { position:absolute; top:50px; font-size:150%; font-family:esamanru-Medium, "이사만루 미디엄"; opacity:0; letter-spacing:-1px;
	animation-name:txtMove1;
	animation-duration:1.0s; /* 걸리는 시간 */
	animation-fill-mode:forwards;
	animation-delay:0.2s;
	animation-timing-function:ease;
	animation-iteration-count:1; /* 반복횟수 */
	animation-direction:normal; /* 진행방향 alternate : 순방향 -> 역방향*/ 
	/*
	animation:txtMove1 1.5s 0.2s 1 ease fowards normal;
	*/
}

#svisible .txt2 { position:absolute; top:83px; font-size:150%; opacity:0; font-family:esamanru-Medium, "이사만루 미디엄"; letter-spacing:-1px;
	animation:txtMove2 1.0s 0.5s 1 forwards;
}

	@keyframes txtMove1 {
		from { right:0px; opacity:0; color:#000; }
		to { right:100px; opacity:1; color:#fff; }	
	}
	
	@keyframes txtMove2 {
		from { right:0px; color:#000; opacity:0; }
		to { right:100px; color:#fff; opacity:1; }	
	}



@media (min-width:1025px) and (max-width:1400px){
	#svisible #svisiblearea { width:100%; margin:0 auto; }

}


@media (max-width:1024px){
	#svisible #svisiblearea { width:100%; margin:0 auto; }

}


/* 개인정보변경 */
/*.membersPw { padding:50px 50px 50px 350px; box-sizing:border-box; background:url(/images/sub/pw_img.png) no-repeat 50px center; margin-top:50px; }
.membersPw .stable { margin-bottom:10px; }
.membersPw #pw1, 
.membersPw #pw2, 
.membersPw #pw3 { width:100%; height:40px; padding-left:15px; box-sizing:border-box; border:1px solid #ccc; }
.membersPw .pw_btn { width:150px; height:50px; background:#ee402e; border:none; color:#fff; font-size:100%; border-radius:5px; cursor:pointer; }

@media (max-width:768px){
	.membersPw { padding:300px 15px 15px 15px; box-sizing:border-box; background:url(/images/sub/pw_img.png) no-repeat center 30px; }
}*/









/* 하단 */
#bottom .bottomLink { width:100%;  border-bottom:1px solid #35435d; background:#404f6a; }
#bottom .bottomLink > ul { width:1400px; height:50px; overflow:visible; margin:0 auto; }
#bottom .bottomLink > ul > li { float:left; position:relative; width:calc(50% - 1px); height:50px; border-right:1px solid #333b45; }
#bottom .bottomLink > ul > li:first-child { width:calc(50% - 2px); border-left:1px solid #333b45; }

#bottom .bottomLink > ul > li > a:link,
#bottom .bottomLink > ul > li > a:visited { width:100%; height:50px; line-height:50px; padding-left:20px; box-sizing:border-box; background:url(/images/main/moreW.png) no-repeat 95% center; color:#ccc; display:block; }
#bottom .bottomLink > ul > li > a:active,
#bottom .bottomLink > ul > li > a:focus,
#bottom .bottomLink > ul > li > a:hover { color:#fff; } 

#bottom .bottomLink ul li ul { position:absolute; left:0; bottom:50px; width:100%; height:180px; border:1px solid #16385b; background:#333b45; box-sizing:border-box; overflow:auto; z-index:1000; display:none; }
#bottom .bottomLink ul li ul li { display:block; }
#bottom .bottomLink ul li ul li a:link,
#bottom .bottomLink ul li ul li a:visited { width:100%; height:30px; line-height:30px; padding-left:10px; box-sizing:border-box; color:#ccc; display:block; }
#bottom .bottomLink ul li ul li a:active,
#bottom .bottomLink ul li ul li a:focus,
#bottom .bottomLink ul li ul li a:hover { color:#fff; }


#bottom #bottomarea .bottomMenu { margin-bottom:20px; }
#bottom #bottomarea .bottomMenu ul li { float:left; padding:0; margin-right:30px; }
#bottom #bottomarea .bottomMenu ul li:last-child { margin-right:0px; }


#bottom #bottomarea .bottomMenu ul li a:link,
#bottom #bottomarea .bottomMenu ul li a:visited { color:#ccc; }
#bottom #bottomarea .bottomMenu ul li a:active,
#bottom #bottomarea .bottomMenu ul li a:focus,
#bottom #bottomarea .bottomMenu ul li a:hover { color:#fff; }

#bottom #bottomarea .bottomMenu ul li:nth-child(1) a:link,
#bottom #bottomarea .bottomMenu ul li:nth-child(1) a:visited { color:#fcd700; }
#bottom #bottomarea .bottomMenu ul li:nth-child(1) a:active,
#bottom #bottomarea .bottomMenu ul li:nth-child(1) a:focus,
#bottom #bottomarea .bottomMenu ul li:nth-child(1) a:hover { color:#ffa646; }


#bottom #bottomarea address { margin:0 0 10px 0; }
#bottom #bottomarea address span { margin-right:20px; }

#bottom #bottomarea .copyright { line-height:1.5; font-size:90%; font-family:Arial, Helvetica, sans-serif; } 

#bottom .topbtn { position:absolute; right:0; bottom:0px; background:#fff; border-radius: 5px 5px 0 0; }

@media (max-width:1400px){
	#bottom .bottomLink > ul { width:100%; height:50px; overflow:visible; margin:0 auto; }	
}


@media (max-width:768px){
	.mbottom:before { background:#e9e9e9 url(/images/common/bottom_bg.png) no-repeat 50% top !important; }
	
	#bottom #bottomarea .bottomMenu ul li { margin-right:10px; }
	#bottom #bottomarea .bottomMenu ul li:nth-child(3) { margin-right:0; }
	#bottom #bottomarea .bottomMenu ul li a:link,
	#bottom #bottomarea .bottomMenu ul li a:visited { line-height:26px; }
	
}





/* 페이지 타이틀 */
.pagetitle { position:relative; width:100%; height:150px; margin-bottom:50px; }

.pagetitle .path { position:absolute; left:0; right:0; top:85px; font-size:90%; color:#888; word-spacing:5px; text-align:center; }
.pagetitle .path span { position:relative; width:4px; height:7px; line-height:7px; background:url(/images/common/path_blt.gif) no-repeat 0 50%; text-indent:-9999em; display:inline-block; }
.pagetitle .path strong { color:#666; font-weight:normal; }

.pagetitle h1 {  position:absolute; left:0; right:0; top:40px; text-align:center; font-family: pgovb; font-size:220%; color:#000; }

/* 타이틀이 동일한 경우 */
.pagetitle h1 > span {display:none;}
.leftmenu > ul ul li a > span {display:none;}
/**/

.pagetitle .snsbtn { position:absolute; right:0; bottom:15px; height:35px; }
.pagetitle .snsbtn ul { height:35px; overflow:hidden;}

.pagetitle .snsbtn ul.pcTabletBtn { display:block; }
.pagetitle .snsbtn ul.mobileBtn { display:none; }

.pagetitle .snsbtn ul li { float:left; margin-left:10px; }
.pagetitle .snsbtn ul li.kakaostory { width:35px; height:35px; padding-top:5px; border-radius:50%; box-sizing:border-box; background:#6a5cff; text-align:center; }


@media (min-width:1281px) and (max-width:1400px){
	.pagetitle .snsbtn { right:15px; }
}


@media (min-width:1025px) and (max-width:1280px){
	.pagetitle .snsbtn { right:15px; }
}


@media (max-width:1024px){
	.pagetitle { border-bottom:none; }
	
	.pagetitle .path { top:80px; }	
	.pagetitle h1 { font-size:200%;  }
	
	.pagetitle .snsbtn { right:30px; bottom:10px; }
	
	.pagetitle .snsbtn ul.pcTabletBtn { display:none; }
	.pagetitle .snsbtn ul.mobileBtn { display:block; }
	.pagetitle .snsbtn ul li { margin-left:5px; }
			
}

@media (max-width:768px){
	.pagetitle .snsbtn { right:15px; bottom:10px; }
	.pagetitle h1 { font-size:180%; }
	
}










/* 온라인 신청 */
/*.onlineApp { width:100%; }
.onlineApp .txt { text-align:right; font-size:90%; margin-bottom: 10px; }
.onlineApp .txt span { margin-left:6px; color:var(--point); }
*/

.onlineApp_list { width:100%; border-top:3px solid var(--primary); margin-bottom: 20px; }
.onlineApp_list > li { position:relative; padding: 20px 10px; border-bottom:1px dashed #d9d9d9; display:flex; justify-content: space-between; flex-wrap: nowrap; }
/*.onlineApp .onlineApp_list > li:last-child { border-bottom:none; }*/

.onlineApp_list > li > a.AppPic { display: flex; align-items: center; justify-content: center; width:290px; max-height:220px; margin-right: 25px; border: 1px solid var(--gray-30); border-radius: 10px; overflow: hidden; }
.onlineApp_list > li > a.AppPic img { max-width:100%; max-height:100%; transition:0.3s; }

.onlineApp_list > li > .AppBox { position:relative; width: calc(100% - 290px);  }
.onlineApp_list > li > .AppBox .btnBox { display:flex; justify-content: space-between; align-items: end; font-size:90%; margin-bottom:10px; }

.onlineApp_list > li > .AppBox .btnBox li { transition: 0.3s; }
.onlineApp_list > li > .AppBox .btnBox li a { width:100%; height:100%;  }
.onlineApp_list > li > .AppBox .btnBox li.regist { background:#ddd; padding: 0 9px; border-radius: 20px; display: flex; justify-content: center; align-items: center; }
.onlineApp_list > li > .AppBox .btnBox li.on { background:var(--point); color:#fff; }
.onlineApp_list > li > .AppBox .btnBox li.btn:hover { border:1px solid var(--primary-60); background:var(--primary-60); }
.onlineApp_list > li > .AppBox .btnBox li.btn:hover a { color:#fff; }

.onlineApp_list > li > .AppBox .AppTxt a { display:block; margin-bottom:15px; font-family: pgovb; color:#000; font-size:150%; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; transition: 0.3s;  }


.onlineApp_list > li > .AppBox .AppTxt .AppCtn { display:flex; justify-content: space-between; flex-wrap: wrap; }
.onlineApp_list > li > .AppBox .AppTxt .AppCtn li { position:relative; width:48%;  border-bottom:1px solid var(--gray-30); padding:10px 10px 10px 100px ; color:var(--gray-50); }
.onlineApp_list > li > .AppBox .AppTxt .AppCtn li:nth-last-child(1),
.onlineApp_list > li > .AppBox .AppTxt .AppCtn li:nth-last-child(2) { border-bottom:none; }

.onlineApp_list > li > .AppBox .AppTxt .AppCtn li > span { position:absolute;  left:20px; color:#000; }
.onlineApp_list > li > .AppBox .AppTxt .AppCtn li > span:before { position:absolute; content:''; display:block; width:4px; height:4px; left:-14px; top:50%; transform: translateY(-50%); background:var(--primary); }


@media (max-width:768px){
	.onlineApp_list > li { display: block; padding: 30px 10px; }
	.onlineApp_list > li > a.AppPic { width:100%; max-height: 100%; min-height: 100px; margin-bottom:10px; }
	.onlineApp_list > li > .AppBox { width:100%; }
	
	.onlineApp_list > li > .AppBox .AppTxt .AppCtn li { width:100%; }
	.onlineApp_list > li > .AppBox .AppTxt .AppCtn li:nth-last-child(2) { border-bottom:1px solid var(--gray-30); }
	
}







/* 마일리지 신청 */
.mileage .download .btn { padding: 4px 16px ; }




/* 마일리지 신청 확인 */
.txtBox,
.mileageCheck .txtBox { border:3px solid #ddd; border-radius:10px; padding:10px 20px; text-align:center; word-break: keep-all;  }




/* 개인정보처리방침 */
.privacy { width:100%; }
.privacy .privacyUl { display:flex; justify-content: space-between; flex-wrap:wrap;  }
.privacy .privacyUl li { width:30%; margin:4px 10px; }
.privacy .privacyUl li a { width:100%; }