@charset "utf-8";

label, input, select{vertical-align:middle;}
body{font-size:14px; font-family:'Noto Sans KR', '맑은 고딕', 'Malgun Gothic', Dotum, "돋움",Gulim, "굴림", Verdana, Tahoma, AppleGothic, sans-serif; color:#333; letter-spacing:0; }
input, textarea, select{ font-family:'Noto Sans KR', sans-serif !important; }
input[type="checkbox"]{ border:1px solid #ddd;}


/*
font-family: 'Roboto', sans-serif;
*/


/* header */
#header {position: fixed; width: 100%; top: 0; left: 0; z-index: 10000; box-sizing: border-box;}
#header .h_w {position: relative;}
#header .h_w::before {content: ''; width: 100%; height: 100%; top: 0; left: 0px; background-color: #fff; position: absolute; opacity: 0; -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; transition: opacity 0.3s;}
#header .h_w::after {content: ''; width: 100%; height: 1px; background-color: #cccccc; position: absolute; bottom: 0; left: 0; opacity: 0; -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; transition: opacity 0.3s;}
#header .h_inner {max-width: 1400px; width: calc(100% - 30px); margin: 0 auto; box-sizing: border-box; position: relative; height: 100px; z-index: 1;}
#header .logo {display: inline-block; width: 300px; height: 50px; background: url(../images/common/logo_R1.png) no-repeat center; position: absolute; left: 0; top: 50%; transform:translate(0%, -50%); -webkit-transform:translate(0%, -50%); font-size: 0; -webkit-transition: background 0.3s; -moz-transition: background 0.3s; transition: background 0.3s; cursor: pointer;}

#header.scroll .h_w::after {opacity: 1;}
#header.scroll .h_w::before {opacity: 1;}
#header.scroll .logo {background: url(../images/common/logo_on_R1.png) no-repeat center;}



/* footer */
#footer {background-color: #202023;}
#footer .f_inner {max-width: 1400px; width: calc(100% - 30px); margin: 0 auto; box-sizing: border-box; display: flex; flex-flow: wrap; padding: 60px 0;}
#footer .txt {width: calc(100% - 400px); margin-left: 21px; box-sizing: border-box; font-size: 14px; color: #ffffff; word-break: keep-all; font-family: 'Roboto', sans-serif; display:flex; justify-content:right; align-items:center; table-layout:fixed; text-align: right; opacity: 0.5;}



/* 팝업 */
.popup {position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 10000; background-color: rgba(0,0,0,0.8); overflow-y: auto; box-sizing: border-box; padding: 100px 0; display: none;}
.popup .popup_w {max-width: 1200px; width: calc(100% - 30px); margin: 0 auto; box-sizing: border-box; box-sizing: border-box;}
.popup .popup_w .popup_con {background-color: #fff; padding: 40px 60px 80px;}
.popup .popup_w .popup_con .close_btn {width: 34px; height: 34px; background: url(../images/icon/close.png) no-repeat center; cursor: pointer; margin: 0 0 -2px auto; font-size: 0;}



.pc_show2 {display: block!important;}
.m_show2 {display: none!important;}

 /* PC */
@media all and (min-width:1025px){
	.pc_show{ display:block !important;}
	.pc_i_show{ display:inline-block !important;}
	.m_show{ display:none !important;}
	.m_i_show{ display:none !important;}
	
	
	/* header */
	#header .menu_bx {display: block!important;}
	#header .menu_bx ul {text-align: right; font-size: 0;}
	#header .menu_bx ul > li {display: inline-block; margin-left: 60px;}
	#header .menu_bx ul > li:first-child {margin-left: 0;}
	#header .menu_bx ul > li > a {display: block; line-height: 100px; font-family: 'Roboto', sans-serif; font-size: 18px; color: #ffffff; font-weight: 500; -webkit-transition: color 0.3s; -moz-transition: color 0.3s; transition: color 0.3s; cursor: pointer;}
	
	#header.scroll .menu_bx ul > li > a {color: #222222;}
}

/* 태블릿&모바일 공통*/
@media all and (max-width:1024px){	
	.pc_show{ display:none !important;}
	.pc_i_show{ display:none !important;}
	.m_show{ display:block !important;}
	.m_i_show{ display:inline-block !important;}

	
	/* header */
	#header .h_inner {height: 60px;}
	#header .logo {width: 150px; height: 25px; background-size: 150px 25px!important;}
	#header .menu_btn {position: absolute; width: 20px; height: 16px; right: 0px; top: 50%; margin-top: -8px; cursor: pointer;}
	#header .menu_btn span {position: absolute; width: 100%; height: 2px; background-color: #ffffff; left: 0px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;}
	#header .menu_btn span:nth-child(1) {top: 0;}
	#header .menu_btn.on span:nth-child(1) {top: 50%; margin-top: -1px; transform: rotate(135deg);}
	#header .menu_btn span:nth-child(2) {top: 7px;}
	#header .menu_btn.on span:nth-child(2) {opacity: 0;}
	#header .menu_btn span:nth-child(3) {bottom: 0;}
	#header .menu_btn.on span:nth-child(3) {bottom: auto; top: 50%; margin-top: -1px; transform: rotate(-135deg);}
	
	#header .menu_bx {position: fixed; width: 100%; left: 0; top: 60px; background-color: #035ca3; overflow-y: auto; text-align: center; display: none; box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.1);}
	#header .menu_bx ul {padding: 0 15px;}
	#header .menu_bx ul > li {margin-bottom: 10px;}
	#header .menu_bx ul > li:first-child {padding-top: 31px;}
	#header .menu_bx ul > li:last-child {padding-bottom: 31px; margin-bottom: 0;}
	#header .menu_bx ul > li > a {font-family: 'Roboto', sans-serif; font-size: 20px; color: #ffffff; font-weight: 500; line-height: 35px; cursor: pointer;}
	
	#header.mOn .h_w::before {opacity: 1;}
	#header.mOn .h_w::after {opacity: 1;}
	#header.mOn .logo {background: url(../images/common/logo_on_R1.png) no-repeat center;}
	#header.scroll .menu_btn span, #header.mOn .menu_btn span {background-color: #222222;}
	

	
	/* footer */
	#footer .f_inner {padding: 40px 0;}
	#footer img {width: 150px;}
	#footer .txt {width: calc(100% - 150px); margin-left: 30px; font-size: 12px; line-height: 20px;}
	


	/* 팝업 */
	.popup {padding: 50px 0;}
	.popup .popup_w {max-width: 700px;}
	.popup .popup_w .popup_con {padding: 15px 15px 40px;}
	.popup .popup_w .popup_con .close_btn {width: 17px; height: 17px; background-size: 17px auto; margin-bottom: 3px;}
}

/* 모바일 */
@media all and (max-width:768px){
	/* footer */
	#footer .f_inner {padding: 40px 0 34px; display: block; text-align: center;}
	#footer .txt {display: block; text-align: center; margin: 17px auto 0; width: 100%; max-width: 230px;}
	
	
	
	.pc_show2 {display: none!important;}
	.m_show2 {display: block!important;}
}