@charset "UTF-8";
/********************************************************

		header

********************************************************/
#header { position:absolute;top:0;left:0; width:100%; max-width:640px; margin:0 auto; height:85px;background-color:transparent; z-index:99; transition-duration:0.5s;box-sizing:border-box;  }
#header:before { display:none; content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:#fff;opacity:0;-webkit-transition-duration:1s;-m-transition-duration: 1s;-o-transition-duration:1s;-ms-transition-duration:1s;transition-duration:1s;}
#header header {position:relative;max-width:640px;padding:0 1.875rem;height:100%;z-index:2;display:flex;align-items:center;justify-content:space-between;}
#header h1 { display:flex; align-items:center; gap:0.25rem;  }
#header h1 a {display:flex; line-height:1;}
#header h1 img { max-height:3.75rem; }

#header h1 .material-symbols-outlined { font-size:32px; color:#fff; font-weight:600; margin-left:-8px; } 

#wrap.viewok #header { height:60px; /*background:var(--menu);*/background:#000;}
#wrap.viewok #header:before { display:block; background-color:var(--menu); }
#wrap.viewok #header h1 img { /*max-width:11rem;*/ max-height:2.5rem; }

/* 로고 사이즈 조절 */
@media screen and (max-width: 500px){
	#header header { padding:0 1.25rem; } 
	#header h1 img { /*max-width:13rem;*/ } 
	#wrap.viewok #header h1 img { /*max-width:12rem;*/ }
	#header h1 .material-symbols-outlined { font-size:28px; } 
} 
@media screen and (max-width: 430px){
	#header h1 img { /*max-width:11rem;*/ } 
	#wrap.viewok #header h1 img { /*max-width:10rem;*/ }
	#header h1 .material-symbols-outlined { font-size:24px; } 
} 


/*up & Down*/
#header.nav-up {top:-90px;}
#header.type2.nav-up { top:-90px; background-color:#fff;} 
#header.nav-down {top:0;background-color:#fff; }
#header.type2.nav-down { top:0; } 
#header.nav-up:before {opacity:0.99;}
#header.nav-down:before {opacity:0.99;}
#header.nav-down.nav-top { background-color:transparent; } 
#header.nav-down.nav-top:before {opacity:0; }


@media screen and (max-width: 670px){
	/*#header header {margin:0 15px;}*/
}
@media screen and (max-width: 1024px){

}

#header .header-inner { display:flex; align-items:center; } 
#header .header-util { display:flex; align-items:center; gap:1rem; } 

@media screen and (max-width: 370px){
	.header-util .language_wrap { display:none; } 
} 

/*
대메뉴 서브메뉴 레이아웃
*/
.lnb-menu { margin-top:3.75rem; } 
.lnb-menu > li { } 
.lnb-menu > li > a { display:flex; align-items:center; justify-content:space-between; font-size:1.875rem;color:#c2c2c2; font-weight:700; letter-spacing:-0.05em; overflow:hidden;transition:all .4s ease; }
.lnb-menu > li > a:hover, 
.lnb-menu > li.ov > a, 
.lnb-menu > li.on > a { color:#000; } 
/*
.lnb-menu > li.on > a {color:var(--menu);}
.lnb-menu > li.on > a:after,
.lnb-menu > li > a:hover:after {left:0;right:0;}
.lnb-menu > li.active > a:after {left:0;right:0;}
*/ /* submenu on 했을때 유지하기 위해 */


.header__dim {content:'';position:fixed;top:0;left:-15px;width:calc(100% + 15px);height:100%;background-color:#000;opacity:0.8;z-index:1; }
#header__lnb {overflow-x:hidden;overflow-y:auto;position:absolute; top:0px;  /*right:calc(-15.625rem);*/ right:calc(-21.875rem); /*width:15.625rem*/ width:21.875rem !important;height:revert;  padding:1.875rem 1.25rem 1.25rem; background-color:#fff;z-index:101;transition:all 0.3s ease; }

#header__lnb { /*right:0;*/ } 
#header__lnb .nav { display:flex; flex-direction:column; justify-content:space-between; min-height:35rem; } 
#header__lnb .nav .lnb_top {  }
#header__lnb .nav .lnb_copy { height:2.5rem; font-size:0.9375rem; color:rgba(51,51,51,0.6); font-weight:300; line-height:1.33; padding:1.875rem 0;  } 

.lnb_language { display:flex; align-items:center; height:1.25rem; } 
.lnb_language .icon { display:inline-flex; width:15px; height:15px; background:url(/images/common/icon_global.png) no-repeat; margin-right:0.625rem; } 
.lnb_language a { position:relative; font-size:0.9375rem; color:rgba(0,0,0,0.5); font-weight:500; text-align:center; transition:all 0.3s; text-transform:uppercase; } 
.lnb_language a:after { content:'';clear:both; display:inline-block; width:1px;height:12px;margin:0px 12px 2px 10px; background-color:#d9d9d9; vertical-align:middle; }
.lnb_language a.on { color:#000; font-weight:800;  } 
.lnb_language a:hover { color:#000; font-weight:800;   } 
.lnb_language a:last-of-type { margin-right:0px; left:-1px; } 
.lnb_language a:last-of-type:after { display:none; } 

#header__lnb .nav .lnb_top .close { position:absolute; right:1.25rem; top:1.5625rem; }  
#header__lnb .nav .lnb_top .close span { font-size:1.875rem; color:#000; transition:all 0.4s; } 
#header__lnb .nav .lnb_top .close:hover span { transform:rotate(180deg); }


#header__lnb.active {right:0;}
#header__lnb .lnb-menu { display:flex; flex-direction:column; row-gap:2.5rem; position:relative;}
#header__lnb .lnb-menu > li  {float:none;margin:0;text-align:left; }
/*#header__lnb .lnb-menu > li:last-of-type { border-bottom:0; } */
#header__lnb .lnb-menu > li > a { width:100%; }
#header__lnb .lnb-menu > li > a .material-symbols-outlined { display:none; font-size:1.875rem;  } 
#header__lnb .lnb-menu > li:hover > a , 
#header__lnb .lnb-menu > li.on > a { /*background-color:var(--menu) !important;color:#fff !important;*/ }

#header__lnb .lnb-menu > li.on > a .material-symbols-outlined, 
#header__lnb .lnb-menu > li.ov > a .material-symbols-outlined  { transform:rotate(180deg); }  

#header__lnb .lnb-menu > li > a:before {content:none;}

@media screen and (max-width: 640px){
	/*#header__lnb.active {right:-15px;}*/
}

.lnb_sub_menu  { display:none;  position:static;justify-content:flex-start; box-sizing:border-box; margin-top:0.625rem; padding-top:1.25rem; border-top:1px solid #000; }
.lnb_sub_menu ol { display:flex; flex-direction:column; row-gap:0.9375rem; width:100%; margin:revert; border:0px; background:transparent;  } 
.lnb_sub_menu li { display:block; width:100%; }
.lnb_sub_menu li > a { position:relative; display:flex; align-items:center; font-size:1.125rem; color:#999; font-weight:500; padding:0 0.938rem; letter-spacing:-0.05em; transition:all 0.4s ease;}
.lnb_sub_menu li > a:before { content:''; position:absolute; left:0px; top:calc(50% - 1px); transform:translateY(-50%); width:5px; height:5px; border-radius:50%; background:var(--menu); transition:all 0.4s ease; opacity:0; } 
.lnb_sub_menu li:last-child > a { border-bottom:0; } 

.lnb_sub_menu li > a:hover, 
.lnb_sub_menu li.on > a { color:#000; font-weight:700; } 
.lnb_sub_menu li > a:hover:before, 
.lnb_sub_menu li.on > a:before { opacity:1; } 

.lnb_sub_menu .material-symbols-outlined { display:none; } 

.lnb_tab_list_wrap { }
.lnb_tab_list { display:flex; flex-direction:column; gap:0.313rem; padding:10px; border-bottom:1px solid #dbdbdb; } 
.lnb_tab_list a { position:relative; font-size:0.938rem; color:#666; font-weight:400; padding-left:3px; transition:all 0.4s ease; } 
.lnb_tab_list a::before { content:'-'; margin-right:5px; } 
.lnb_tab_list a:hover { color:var(--menu); } 

#header__lnb .lnb-menu > li.on .lnb_sub_menu { display:block; } 


/* Language */
/*
.language_wrap { position:absolute; top:1.563rem;right:3.125rem; margin-left:1.25rem; z-index:100; }
*/
.language_wrap { position:relative; }
.language_wrap .inner { position:relative; display:flex; align-items:center;justify-content:center; gap:0.625rem; min-height:1.875rem; cursor:pointer;  }
.language_wrap .inner a { display:flex; display:flex; align-items:center;justify-content:center; column-gap:5px;  } 
.language_wrap span { font-size:1.25rem; color:#fff; font-weight:600; } 

.language_wrap .icons { display:flex; align-items:center;  } 
.language_wrap .arrows { margin-bottom:-0.5rem;  } 
.language_wrap .arrows img { height:20px; transform:rotate(90deg); vertical-align:revert; } 

.language_wrap .lang_select { display:none; position:absolute; top:3.25rem; width:100%; min-width:9.875rem; max-width:9.875rem; background:#fff; z-index:11; padding:10px 0; border:1px solid var(--menu);  } 
.language_wrap .lang_inner { display:flex; flex-direction:column; } 
.language_wrap .lang_select a { display:flex; align-items:center; justify-content:flex-start; font-size:1rem; color:#999; font-weight:500; padding:10px 0 10px 0.875rem; text-align:center;  transition:all 0.3s ease;  }
.language_wrap .lang_select a:hover { color:var(--menu); background:#f0f0f0; } 
.language_wrap .lang_select .icons { display:flex; margin-right:10px;  }
.language_wrap .lang_select .lang { font-size:1.125rem; color:#111; font-weight:400; } 

.language_mo { display:none; padding:10px; }
.language_mo .language_wrap span { color:#000; } 
.language_mo .language_wrap .inner { justify-content:revert; } 
.language_mo .language_wrap .lang_select { max-width:revert; top:2.6rem; } 
.language_mo .language_wrap .arrows { position:absolute; right:0; margin-bottom:-5px; } 

@media screen and (max-width: 370px){
	.language_mo { display:block; } 
} 


/* header fixed */
#header.fixed {position:fixed;border-bottom:1px solid #eee;}
#header.fixed:before {opacity:0.8;}
#header.fixed h1 span {background:url(images/common/logo.png) no-repeat 0;}
/*#header.fixed #header__lnb .lnb-menu > li > a {color:#333;}*/
#header.fixed #header__language select {background:url(/images/board/select_bg.png) no-repeat 90% center !important;border-color:#666;color:#333;}




/*----------------------------------------------------------------------
@ MOBILE BUTTON 
----------------------------------------------------------------------*/
#header__mobile { position:relative; display:none; flex-direction:column; align-items:flex-end; background-color:transparent;box-sizing:border-box;z-index:100}
#header__mobile span {display:block;width:1.875rem;height:5px; background-color:#fff;-webkit-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
#header__mobile .mid2 { width:1.688rem; margin:4px 0;}
#header__mobile .mid3 { width:1.438rem; }

#header__mobile.active{-webkit-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;-webkit-transition-delay: 0.6s;-o-transition-delay: 0.6s;transition-delay: 0.6s;-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);}
#header__mobile.active span {background-color:#fff !important;}
#header__mobile.active span.mid2{width: 0px;}
#header__mobile.active span.mid3{width: 1.875rem;}
#header__mobile.active span.mid1,
#header__mobile.active span.mid3 {-webkit-transition-delay: 0.3s;-o-transition-delay: 0.3s;transition-delay: 0.3s;}
#header__mobile.active span.mid1{-webkit-transform: translateY(9px);-ms-transform: translateY(9px);-o-transform: translateY(9px);transform: translateY(9px);}
#header__mobile.active span.mid3 {-webkit-transform: translateY(-10px) rotate(90deg);-ms-transform: translateY(-10px) rotate(90deg);-o-transform: translateY(-10px) rotate(90deg);transform: translateY(-10px) rotate(90deg);}
#header.fixed #header__mobile span {background-color:#fff;}


@media screen and (max-width: 500px){
	#header__mobile span { height:4px; }
} 
@media screen and (max-width: 430px){
} 



/*----------------------------------------------------------------------
@ FOOTER
----------------------------------------------------------------------*/
#footer { position:relative; background:#fff; z-index:1; }
#footer footer {position:relative;}
#footer .clear {clear:both}
#footer legend {display:none;}
#footer #layer-file-footer {display:none;position:absolute;padding:20px;border:1px solid #333;background:#fff;z-index:30;top:-250px !important;left:160px !important;}
#footer .btnTop { display:none; position:fixed;right:20px; bottom:15px;width:60px;height:60px; border:1px solid #111; background:#111; border-radius:50%; cursor:pointer;z-index:99; overflow:hidden;}
#footer .btnTop.active { display:flex } 
#footer .btnTop_wrap { display:flex !important; align-items:center; justify-content:center; height:100%; } 
#footer .btnTop .material-icons { font-size:36px; color:#fff; z-index:2;} 
#footer .btnTop .material-icons.active { color:#fff; } 
#footer .btnTop span.back { position:absolute; left:0px; bottom:-100%; width:100%; height:100%; background:var(--menu);z-index:1;} 


.footer { padding:1.125rem; text-align:center; }
.copyright { font-size:12px; color:#999; font-weight:400; text-transform:uppercase; }


.quick { position:absolute; width:5rem; height:5rem; right:0.9375rem; bottom:0.625rem; display:flex; align-items:center; justify-content:center; border-radius:50%; background:#e5e5e5; z-index:99;  } 
.quick.fixed { position:fixed;  } 
.quick.none { bottom:0.625rem; } 
.quick a { display:flex; align-items:center; justify-content:center; } 
.quick .material-symbols-outlined { color:#000; font-size:3.125rem; overflow:hidden; } 
.quick .material-symbols-outlined.mi_qr_code_scanner::after { content:'qr_code_scanner'; } 
.quick .material-symbols-outlined.mi_center_focus_weak::after { content:'center_focus_weak'; } 

@media screen and (max-width:640px){
	.quick { width:4rem; height:4rem; bottom:0.625rem; } 
	#wrap.viewok .quick { bottom:14.5rem; } 
	#wrap.viewok .quick.fixed { bottom:7rem; } 
	.quick.none { bottom:0.625rem !important; } 
	.quick .material-symbols-outlined { font-size:2rem; } 
} 