/* 공통 css */

:root {
--one-color: #1b3c88;
--primary-color:#7f3b3b;
--secondary-color:#0c3472;
  --white: #fff;
  --black: #000;
  --green: #c1d600;


 --table-bg-color: #f9f9f9;
--table-border-color: #dcdcdc;
 --table-head-color: #dce3e9;
 --table-td-color: #ccc;

--gray-color: #545b6a;
--gray-50:rgba(254, 254, 254);
--gray-100:rgba(243, 244, 246);
--gray-200:rgba(229, 231, 235);
--gray-300:rgba(209, 213, 219);
 --gray-400:rgba(156, 163, 175);


  --dfdf-color: rgb(100, 100, 100);

  --silver: #767676;
  --dark-brown: #38302e;
  --light-brown: #988574;
  --light-yellow: #ffc;
  --yellow-opacity: hsla(60, 50%, 50%, 0.85);

  --green: #abd375;
  --yellow: #e8ca58;
  --orange: #eea60a;
  --brown: #988574;
  --blue: #6aaee6;

  --primary-color: var(--dark-brown);
  --secondary-color: var(--light-brown);
  --accent-color: var(--light-yellow);
  --accent-opacity-color: var(--yellow-opacity);

  --accent-book: var(--green);
  --accent-news: var(--yellow);
  --accent-board: var(--brown);
  --accent-favorite: var(--orange);
  --accent-twitter: var(--blue);

  --spacing-sxxs: 0.125rem; /* 2px */
  --spacing-xxs: 0.25rem; /* 4px */
  --spacing-xs: 0.5rem; /* 8px */
  --spacing-sm: 0.75rem; /* 12px */
  --spacing-base: 1rem; /* 16px */
  --spacing-md: 1.25rem; /* 20px */
  --spacing-lg: 1.5rem; /* 24px */
  --spacing-xl: 2rem; /* 32px */

  --text-xs: 0.75rem; /* 12px */
  --text-sm: 0.875rem; /* 14px */
  --text-base: 1rem; /* 16px */
  --text-md: 1.125rem; /* 18px */
  --text-lg: 1.25rem; /* 20px */
  --text-xl: 1.5rem; /* 24px */

  --container-width: 64rem; /* 1024px */
}

html,body{ min-height:100%;height:auto;}
main{font-color:red;}
.layout {position: relative; width: 100%; max-width: 1344px;    margin: 0 auto;}

​img[src$=".gif"], img[src$=".png"], img[src$=".jpg"] {
	image-rendering: -webkit-optimize-contrast;
	transform:translateZ(0);
	backface-visibility:hidden;
}

#skipnavi{position:absolute;top:-1px;left:0;background-color:#333;z-index:999999}
#skipnavi a{position:absolute;top:0;left:0;padding:10px 25px;margin-top:-100px;text-align:center;line-height:1;white-space:nowrap;background:#000;}
#skipnavi a:link{color:#333;}
#skipnavi a:focus{margin-top:0;text-decoration:underline;color:#fff}

/* TopMenu */
#top_layout #logo {padding-left:1em; position: absolute; z-index: 20;}


#top_layout #logo > a{  width: 265px; height: 80px; display: flex;}
#top_layout #logo img{width: 100%;  }
#top_layout #gnb{
	position: absolute;
	/*left: 0; */
	z-index: 12;
	width: 100%;
	transition:all 0.3s ease-out;
	-webkit-transition:all 0.3s ease-out;
	-o-transition:all 0.3s ease-out;
	-moz-transition:all 0.3s ease-out;

	 -webkit-box-shadow:0 1px 40px rgba(0, 0, 0, 0.2), 0 0 140px rgba(0, 0, 0, 0.1) inset;
     -moz-box-shadow:0 1px 40px rgba(0, 0, 0, 0.2), 0 0 140px rgba(0, 0, 0, 0.1) inset;
     box-shadow:0 1px 40px rgba(0, 0, 0, 0.2), 0 0 140px rgba(0, 0, 0, 0.1) inset;
	}

#top_layout .open #gnb {  }

.gnb_wrap>li{border:1px solid red:}
#top_layout .pcMenu ul.depth1_ul{	display:flex;	max-width:920px;	margin-left:auto;	}
@media (min-width:1024px) and (max-width : 1280px){
	#top_layout #logo a img{width: 120px;  }
	#top_layout .pcMenu ul.depth1_ul{max-width:720px; margin-right:160px; } 	
	
}
#top_layout .pcMenu ul.depth1_ul> li{border:1px solid red:}
#top_layout .pcMenu ul.depth1_ul li.th1{position: relative;    text-align: center; width: 25%;  display: inline-table;}
#top_layout .pcMenu ul.depth1_ul li.th1:hover{height:400px;}
#top_layout .pcMenu ul.depth1_ul li.th1 > a{
	display:block;
	font-weight:600;
	font-size:var(--text-md);
	/* height:70px;
	line-height:68px; */
	height:80px;
	line-height:80px;
	}
.depth1_ul li.th1:hover > a{
	height:71px;
	}

#top_layout .pcMenu ul.depth1_ul li:hover{background-color:#f2f2f2;}
#top_layout .pcMenu ul.depth1_ul li:last-child ul{border-right:1px solid #f2f2f2;}
.gnb_wrap{	background-color:#fff;	}
.gnb_wrap > div{
	height: 85px;

	background-image:url("/common/images/gnb-banner.png");
	background-repeat:no-repeat;
	background-position:0 120px;

	transition:all 0.3s ease-out;
	-webkit-transition:all 0.3s ease-out;
	-o-transition:all 0.3s ease-out;
	-moz-transition:all 0.3s ease-out;

	z-index: 10;
	overflow: hidden;
	}
.gnb_wrap:hover > div{height:360px; }


#top_layout .pcMenu ul.depth1_ul li.th1 ul.depth2_ul{
	display: inline-block;
	border-left:1px solid #f2f2f2;
	width:100%;
	height:260px; 
	margin-top:8px;
	padding-top:12px; 
	text-align: center; 
	}
#top_layout .pcMenu ul.depth1_ul li.th1 ul.depth2_ul li {line-height: 2em;text-align: left;  border:1px solid red:}

#top_layout .pcMenu ul.depth1_ul li.th1 ul.depth2_ul li > a{display:block; padding-left:20px;}
#top_layout .pcMenu ul.depth1_ul li.th1 ul.depth2_ul li > a:hover{font-weight:700; color:var(--main-color);}

.utilmenu {position: relative; top: 11px; text-align: right;}
.utilmenu li {display: inline-block; margin-right: 15px;}
.utilmenu li a, .utilmenu li a span {font-size: 15px;}

#menu-wrapper {overflow: hidden; max-width: 55px; cursor: pointer; position:absolute; right: 0; top: 15px;}
#menu-wrapper #hamburger-menu {position: relative; width: 25px; height: 20px; margin: 15px;	z-index:501;}
#menu-wrapper #hamburger-menu span {opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; left: 0; display: block; width: 100%; height: 2px; border-radius: 10px; color: black; background-color: #000; position: absolute; -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .4s ease-in-out; transition: .4s ease-in-out;}
#menu-wrapper #hamburger-menu span:nth-child(1) {top: 0;}
#menu-wrapper #hamburger-menu span:nth-child(2) {top: 9px;}
#menu-wrapper #hamburger-menu span:nth-child(3) {top: 18px;}
#menu-wrapper #hamburger-menu.open span:nth-child(1) {top: 9px; -webkit-transform: rotate(135deg); transform: rotate(135deg);}
#menu-wrapper #hamburger-menu.open span:nth-child(2) {opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; left: -60px;}
#menu-wrapper #hamburger-menu.open span:nth-child(3) {top: 9px; -webkit-transform: rotate(-135deg); transform: rotate(-135deg);}
#menu-container{position: fixed; top: 0; min-width: 80%; height: 100%; background: #fff; z-index: 100; overflow-y: scroll; right: -100%; box-shadow: -7px 0px 20px #8c8c8c85; padding-top:85px;}
#menu-container .menu_over{width: 100%; height: 100%; overflow: scroll;}
#menu-container .depth1_ul{}
#menu-container .depth1_ul .th1{border-bottom:1px solid #ddd;padding: 0px;line-height: 3em;text-indent:15px;    position: relative;}
#menu-container .depth1_ul .th1 i{position: absolute; display: inline-block;top: 4px;right:18px}
#menu-container .depth1_ul .th1 i img {width: 13px;}
#menu-container .depth1_ul .th1 > a{font-size:18px;}
#menu-container .depth1_ul .depth2_ul{display:none;background:#fbfbfb;border-top:1px solid #ddd;padding:10px 0;}
#menu-container .depth1_ul .depth2_ul > li{text-indent:30px;font-size:15px;line-height: 2.5em;}
#menu-container .depth1_ul .depth3_ul > li{text-indent:45px;}
#menu-container .depth1_ul .depth3_ul > li > a p::before{content:"· ";}
#menu-container .depth1_ul .depth3_ul > li > a{color:#666;font-size:13px}

/*PC*/

@media (min-width:1025px) and (max-width : 1344px){
	
	.layout{max-width:96%;}
	
	#top_layout .pcMenu ul.depth1_ul{text-align:left; background-color:#fff;}
	#top_layout .pcMenu ul.depth1_ul li.th1{min-width: 16vw;}

	#top_layout .pcMenu ul.depth1_ul li.th1 ul.depth2_ul li > a{font-size:14px}
}
@media (min-width:1025px){	
	#gnb_layout.pcView{display:block;}
	#gnb_layout.moView{display:none;}
}
@media(max-width:1024px){
	#top_layout{position:fixed;top:0; left:0; right:0; background:#fff; z-index: 100;}
	
	#gnb_layout.pcView{display:none;}
	#gnb_layout.moView{display:block; position: relative; height: 80px;}
    .gnb_li p {margin: 10px auto;}
}
/*tablet*/
@media(min-width:769px) and (max-width:1024px){
	.layout{max-width:96%;}
	#top_layout #logo > a{width:180px}
	#top_layout #logo img{/* width: 62%; */ width: 100%;}
}
/*mini tablet and duo*/
@media(max-width:768px){
	
}
@media(min-width:481px) and (max-width:768px){
	.layout{width:96%;}
	#top_layout #logo > a{width:180px}
	#top_layout #logo img{/* width: 62%; */ width: 100%;}
}
/* samsung note and iphone max*/
@media(min-width:321px) and (max-width:480px){
	.layout{max-width:94%;}
	#top_layout #logo img{/* width: 22vw; */ width: 40vw;}
	#menu-wrapper{top: 3vw;}
	#gnb_layout.moView{height:15vw;}
	#menu-wrapper #hamburger-menu{margin:2vw}
	#menu-container .depth1_ul .th1 > a{font-size:16px;}
	#menu-container .depth1_ul .depth2_ul > li p{font-size:14px}
}
/* fold*/
@media(max-width:320px){
	.layout{max-width:95%;}
	#top_layout #logo {top: 3vw; }
	#top_layout #logo > a{width:180px; height: 40px;}
	#top_layout #logo img{/* width: 29vw; */ width: 35vw;}
	#menu-wrapper{top: 3.5vw;}
	#gnb_layout.moView{height:19vw;}
	#menu-wrapper #hamburger-menu{margin:2vw}
	#menu-wrapper #hamburger-menu span:nth-child(2) {top: 3vw;}
	#menu-wrapper #hamburger-menu span:nth-child(3) {top: 6vw;}
	#menu-container .depth1_ul .th1 > a{font-size:15px;}
	#menu-container .depth1_ul .depth2_ul > li p{font-size:13px}
}


/* body */
#body_layout {overflow: hidden;}
#sub #body_layout{position: relative; width: 100%;}

@media(max-width:1024px){
	#sub #body_layout{margin-top:80px;}
}
/* samsung note and iphone max*/
@media(min-width:371px) and (max-width:480px){
	#sub #body_layout{margin-top:15vw;}
}
/* samsung and iphone*/
@media (min-width:321px) and (max-width:370px){
	#sub #body_layout{margin-top:19vw;}
}   
/* fold*/
@media(max-width:320px){
	#sub #body_layout{margin-top:19vw;}
}



footer{border-top:1px solid #ccc; }	
	.footer-logo{display:inline-block; width:300px; }
	
	.foot_info{
		border-left:1px solid #ccc;
		margin:0 40px; 
		padding:0 40px;
		}
.fax{margin-right:16px;}
@media(min-width:1600px){
	.footer{max-width:1220px; margin:0 auto;}
	.add-container{display:flex;}
	}
	
	
@media(max-width:1599px){
	.footer-logo{width:200px; }
	.footer{padding:10px 20px;}
	.foot_info{border-right:0;
			   border-left:0;
			   margin:0; 
			   padding:0;
			}
	}

@media(max-width:766px){.jumin-helper{display:block;}}
@media(max-width:480px){.fax{display:block;}}


/* font */
@font-face {
    font-family: 'BMDOHYEON';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/BMDOHYEON.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'NEXON Lv1 Gothic OTF';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GyeonggiBatang';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/GyeonggiBatang.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
	src : url("/html/font/BMDOHYEON.ttf"); 
	font-family: 'BMDOHYEON';
}
@font-face {
	font-family: 'S-CoreDream-9Black';
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-9Black.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
@font-face {   
	font-family: 'Roboto';   
	font-style: normal;   
	font-weight: 600;
	src: url(../font/Roboto-Regular.woff2) format('woff2'),
		 url(../font/Roboto-Regular.woff) format('woff'),
		 url(../font/Roboto-Regular.otf) format('opentype'); 
}
@font-face {
    font-family: 'Jal_Onuel';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10-21@1.0/Jal_Onuel.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'InkLipquid';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/InkLipquid.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
.nexon{font-family: 'NEXON Lv1 Gothic OTF' !important;}
.gyeonggi{font-family: 'GyeonggiBatang' !important;}
.bmdohyeon{font-family: 'BMDOHYEON' !important;}
.number{font-family: 'S-CoreDream-9Black' !important;}
.roboto{ font-family: 'Roboto' !important;}
.InkLipquid{ font-family: 'InkLipquid' !important;}

.per_center {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.a11y-hidden, sr-only {position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: polygon(0 0, 0 0, 0 0);}





/*    홈페이지 하단 주소부분    */
.footer_container{	
	background-color:#000;
	font-size:13px;
 }

 .footer_address dt:after, .footer_info:after, .footer_infos dt:after, .footer_infos dd:after {
    margin: 0 10px;
    display: inline-block;
    content: "";
    width: 1px;
    height: 10px;
    background: rgba(255,255,255,0.3);
    vertical-align: middle;
}
.footer_top, .footer_bottom{
	width:80%;
	margin:0 auto;
}
.footer_top{
	display:flex;
}
.footer_logo img{
	width:250px;
	height:60px;
}
.footer_menu{
	display:flex;
}
.footer_menu li{
	width:150px;
	font-size:13px !important;	
    padding:10px 0;
}
.footer_menu-1depth{
	color:#fff;
}
.footer_menu-2depth li{
	color:#ddd;
	
    padding:10px 0;
}
.footer_info{
	display:inline-block;
	color:#fff;
	font-weight:600;
	margin-bottom:1.1em;
}
.footer_info-tell, .footer_info-time{
	color:red;

}
.footer_infos dd{
	font-size:13px;
}
.footer_bottom{

}
.footer_sns li a{
	color:#fff;
}
.footer_address{
	 display:flex;
	 color:#fff;
}
.footer_address dt, .footer_address dd, .footer_infos dt, .footer_infos dd{
	display:inline-block;
	color:#fff;
}
.footer_sns{
	display:flex;
}

@media(max-width:599px){
	.footer_container{
		padding:25px;
		color:red !important;
	}
	.footer_top, .footer_bottom{
	width:100%;
	}
	.footer_logo, .footer_menu-container{
		display:none;	
	}
	.footer_info{
		font-size:13px;
	}
	.footer_infos-email, .footer_infos-phone{
		font-size:0;		
	}
	.footer_infos-email:after, .footer_infos-phone:after{
		content:'';		
	}
	.footer_infos dd{
		margin-bottom:1em;		
	}
	.footer_copyright{
		font-size:10px;
		color:yellow;
	}
}