@charset "utf-8";

@font-face{font-family:NG; src:url('/layouts/master_main/font/NanumBarunGothic.eot'); src:local(※), url('/layouts/master_main/font/NanumBarunGothic.woff') format('woff');}
@font-face{font-family:NGEN; src:url('/layouts/master_main/font/NanumBarunGothicBold.eot'); src:local(※), url('/layouts/master_main/font/NanumBarunGothicBold.woff') format('woff');}

@font-face {
    font-family: 'NEXON Lv1 Gothic';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF Light.woff') format('woff');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'NEXON Lv1 Gothic';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}


@font-face {
    font-family: 'NEXON Lv2 Gothic';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv2 Gothic Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

/* 잘난체폰트 */
@font-face {
    font-family: 'yg-jalnan';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Pretendard-Light';
    src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Light.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Pretendard-Medium';
    src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Medium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Pretendard-Bold';
    src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@keyframes blink-effect {
  50% {
    opacity: 0;
  }
}

@keyframes scroll {
	0%	{top:-10px;}
	50% {top:-1000px;}
	100% {top:-10px;}
}

@keyframes motion {
	0% {margin-top: 10px;}
	100% {margin-top: 0px;}
}

/* CSS reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, hr, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, span, strike, strong, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{margin:0;padding:0;border:0;font-style:normal;font-variant:normal;font-weight:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;line-height:120%}
input, select{margin:0;padding:0;font-style:normal;font-variant:normal;font-weight:inherit;font-size:100%;font-family:inherit;line-height:120%}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display:block}
body{font-family:'Malgun Gothic','맑은 고딕','Apple SD Gothic Neo','AppleGothic','NanumGothic','나눔고딕','Droid sans','Microsoft NeoGothic';-webkit-text-size-adjust:none}
li{list-style:none}
blockquote, q{quotes:'"' '"'}
blockquote:before, blockquote:after, q:before, q:after{content:'';content:none}
table{border-collapse:collapse;border-spacing:0}
address{font-style:normal}
input, select, button, img{vertical-align:middle}
button{display:block;margin:0;padding:0;border:0;background-color:transparent;font-style:normal;font-variant:normal;font-weight:inherit;font-size:100%;font-family:inherit;line-height:120%;color:inherit;cursor:pointer;border-radius:0}
a{font-size:inherit;color:inherit;text-decoration:none}
strong, em{font-size:inherit;line-height:inherit}

html, body{height:100%}
/* common */
.hidden, .indent{overflow:hidden;width:0;height:0;font-size:0;line-height:0}
.over_h{overflow:hidden}
.f_left{float:left}
.f_right{float:right}
.f_clear{clear:both}
.rel{position:relative}
.abs{position:absolute}
.w100{width:100%}
.h100{height:100%}
.m_none{margin:0 !important}
.m_t05{margin-top:5px}
.m_t10{margin-top:10px}
.m_t20{margin-top:20px}
.m_t30{margin-top:30px}
.m_t40{margin-top:40px}
.m_t50{margin-top:50px}
.m_b05{margin-bottom:5px}
.m_b10{margin-bottom:10px}
.m_b20{margin-bottom:20px}
.m_b30{margin-bottom:30px}
.m_b40{margin-bottom:40px}
.m_b50{margin-bottom:50px}
.p_none{padding:0 !important}
.p_t10{padding-top:10px}
.p_t20{padding-top:20px}
.p_t30{padding-top:30px}
.p_t40{padding-top:40px}
.p_t50{padding-top:50px}
.p_b10{padding-bottom:10px}
.p_b20{padding-bottom:20px}
.p_b30{padding-bottom:30px}
.p_b40{padding-bottom:40px}
.p_b50{padding-bottom:50px}
.b_none{border:0 !important}
.bg_none{background:none !important}
.t_left{text-align:left}
.t_right{text-align:right}
.t_center{text-align:center}
.v_top{vertical-align:top}
.v_mid{vertical-align:middle}
.normal{font-weight:400}
.bold{font-weight:700}
.extra{font-weight:800}
.pointer{cursor:pointer}
.alpha{opacity:0}
.ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.fs_def{font-size:0}
.fs_def > *{display:inline-block;font-size:16px;vertical-align:top}
.scale0{
-webkit-transform:scale(0);
-moz-transform:scale(0);
-ms-transform:scale(0);
-o-transform:scale(0);
transform:scale(0);
}
.clearfix:after{content:'';display:block;clear:both}

body::-webkit-scrollbar {
    width: 8px;  /* 스크롤바의 너비 */
}

body::-webkit-scrollbar-thumb {
    height: 30%; /* 스크롤바의 길이 */
    background: #444; /* 스크롤바의 색상 */
    
    border-radius: 10px;
}

body::-webkit-scrollbar-track {
    background: rgba(33, 122, 244, .1);  /*스크롤바 뒷 배경 색상*/
}

body {overflow-x: hidden}

img,p {border:0;margin:0;padding:0;}
form {display:inline;margin:0;padding:0;}
label {cursor:pointer;}
a {text-decoration:none;}
a {color: inherit; }

button{display:block;margin:0;padding:0;border:0;background-color:transparent;font:inherit;color:inherit;cursor:pointer}
.indent{display:block;position:relative;width:0;height:0;font-size:0;text-indent:-10000px;line-height:0}


/* skiptoContent */
#skiptoContent{position:absolute;width:100%}
#skiptoContent dt{position:absolute;left:0;top:-10000px}
a.skip{display:block;position:absolute;left:0;top:-10000px;z-index:1000;width:100%;font-size:15px;text-align:center}
a.skip:hover, a.skip:focus, a.skip:active{position:absolute;top:0;z-index:1000;padding:15px 0;background:#fff;font-weight:800;color:#000;text-decoration:underline}

.navi_wrap { position:relative; width:100%; height:80px; background: #ffffff; }


/* 추가 헤더 */

#header_navi, #header_navi * {}
#header_navi { position:relative; width:1200px;margin: 0 auto;height: 80px; font-family: 'NEXON Lv1 Gothic';  font-weight: 400; }

#header_navi .site_link {
   position:relative; float: right; width: 110px; height: 38px; margin-top:40px;
}
#header_navi .site_link.active {
    position:relative; float: right; width: 110px; height: 38px; margin-top:30px;
}

#header_navi .logo {
    float: left; display:block; width: 240px; height: 40px; margin-top:20px; 
}
#header_navi .logo.active {
    float: left; display:block; width: 240px; height: 60px; margin-top:30px; background:url('/layouts/pc_main/_images/logo_black.png') center center no-repeat ;
}
#header_navi .facebook {
    position:absolute; width: 30px; height: 30px; margin-left:50%; top:45px; left:500px; z-index:99;
}
#header_navi .facebook.active {
    position:absolute; width: 30px; height: 30px; margin-left:50%; top:35px; left:500px; z-index:99;
}
#header_navi .instar {
    position:absolute; width: 30px; height: 30px; margin-left:50%; top:45px; left:540px; z-index:99;
}
#header_navi .instar.active {
    position:absolute; width: 30px; height: 30px; margin-left:50%; top:35px; left:540px; z-index:99;
}
#header_navi > .head_wrap {
    position:relative;margin-left:400px; width:800px; overflow:hidden;
}

#header_navi .qna {
    position:absolute; width: 100px; height: 31px; top:44px; left:1100px; z-index:99;
}
#header_navi .qna.active {
    position:absolute; width: 100px; height: 31px; top:32px; left:1100px; z-index:99;
}

#header_navi .blog {
    position:absolute; width: 30px; height: 30px; top:44px; left:1130px; z-index:99;
}
#header_navi .blog.active {
    position:absolute; width: 30px; height: 30px; top:32px; left:1130px; z-index:99;
}
#header_navi .youtube {
    position:absolute; width: 30px; height: 30px; top:44px; left:1170px; z-index:99;
}
#header_navi .youtube.active {
    position:absolute; width: 30px; height: 30px; top:32px; left:1170px; z-index:99;
}
#header_navi .ch {
    position:absolute; width: 24px; height: 24px; top:47px; left:1142px; z-index:99;
}
#header_navi .ch.active {
    position:absolute; width: 24px; height: 24px; top:35px; left:1142px; z-index:99;
}

#header_navi .jp {
    position:absolute; width: 24px; height: 24px; top:47px; left:1176px; z-index:99;
}
#header_navi .jp.active {
    position:absolute; width: 24px; height: 24px; top:35px; left:1176px; z-index:99;
}

#header_navi > .head_wrap > ul {margin:0; padding: 0;}
#header_navi > .head_wrap > ul > li {display: inline-block; float: left; background: url('') #ffffff top left no-repeat; -webkit-transition: background 0.2s; transition: background 0.2s;}
#header_navi > .head_wrap > ul > li.narrow { }
#header_navi > .head_wrap > ul > li.narrow1 {width: 13%; }
#header_navi > .head_wrap > ul > li.narrow2 {width: 16%; }
#header_navi > .head_wrap > ul > li.wide {width: 27%; }
#header_navi > .head_wrap > ul > li > a {display: inline-block; width: 100%; height: 80px; text-align: center; line-height: 80px; font-size: 19px; color:#444; font-family: 'Pretendard-Medium'; text-decoration:none;}
#header_navi > .head_wrap > ul > li > a.active {display: inline-block; width: 100%; height: 120px; text-align: center; line-height: 120px; font-size: 19px; color:#333; font-weight: 400; }
#header_navi > .head_wrap > ul > li.active > a{ color: #003a82; }
#header_navi > .head_wrap > ul > li.active > a.active{ color: #003a82; }
#header_navi > .head_wrap > ul > li:hover { background: #003a82; color: #ffffff;}
#header_navi > .head_wrap > ul > li:hover a{ color: #ffffff;}
#header_navi > .head_wrap > ul > li:hover a.active{ color: #ffffff;}
#header_navi > .head_wrap > ul > li > ul.sub {display: none;}
#header_navi > .head_wrap > ul > li:hover > ul.sub {display: block; padding: 0 0 30px 0;}

#header_navi > .head_wrap > ul > li:hover > ul.sub > li {display: block; width:100%; height: 23px; line-height: 23px;}
#header_navi > .head_wrap > ul > li:hover > ul.sub > li > a {display:block; width:100%; height: 23px; text-align: center; color:#FFF;font-size: 14px; font-weight: 400; text-decoration:none}
#header_navi > .head_wrap > ul > li:hover > ul.sub > li > a:hover { color:#ffff66;}

/* 추가 헤더 */

.navi_head { position:fixed; top:0; left:0; width:100%; color:#444; height:80px; background: url('') #ffffff top center repeat-x; overflow:visible; z-index:999; }
.navi_head.active { background: url('') #f9f9f9 top center repeat; width:100%; height:120px; border-bottom: #dfdfdf 1px solid;}
.navi_head a { color:#444; }
.navi_head .btn_contract { position:absolute; top:0; right:0; }
.navi_head .btn_contract img { display:block; }
.navi_head .menus { position:relative; margin-left:0; width:1138px; overflow:hidden; font-size:13px; background:url('./image/depth_bg.png') top right no-repeat ;}
.navi_head .menus ul { overflow:hidden; }
.navi_head .menus .depth1 { float:left; height:530px; text-align:center; background:url('./image/depth_bg.png') top left no-repeat ;
			-webkit-transition: background-color 200ms;
			-moz-transition: background-color 200ms;
			transition: background-color 200ms;
		}
.navi_head .menus .dp1 { position:relative; display:block; height:50px; }
.navi_head .menus .dp1 .tit { display:block; padding:0; font-size:16px; font-weight:bold; line-height:50px; font-family:나눔바른고딕, Malgun Gothic, 맑은 고딕, '돋움', sans-serif; color:#444; }
.navi_head .menus .depth2 { margin-top:15px;}
.navi_head .menus .depth2 li { height:23px; line-height:23px; }
.navi_head .menus .depth2 li a { display:block; padding-left:0; height:100%;text-align:center; color:#ffffff;}
.navi_head .menus .depth2 li a:hover { color:#ffff66; }
.navi_head .menus .depth2 .icon { display:inline-block; margin-right:8px; width:15px; height:14px; overflow:hidden; vertical-align:middle; }
.navi_head .menus .depth2 .hit a{ color:#ffff66;font-weight:bold; }
.navi_head .menus .depth2 .spac a{ letter-spacing:-1px; font-size:13px;}
	
.navi_head .menus .depth1.id_shop { width:99px; }
.navi_head .menus .depth1.id_shop .dp1 .tit { padding-left:10px; }
.navi_head .menus .depth1.id_shop .depth2 li a { padding-left:10px; }
.navi_head .menus .depth1.selected { }
.navi_head .menus .depth1.selected .dp1 .tit { color:#ffff66; }
.navi_head .menus .depth1.selected .selected { color:#ffffff; }

.navi_head.open .menus .depth1.selected { background-color:transparent; }
.navi_head.open .menus .depth1.selected .dp1 .tit { color:#ffff66; }
.navi_head.open .menus .depth1:hover { background:#0e75bc ; }
.navi_head.open .menus .depth1:hover .dp1 .tit { color:#ffffff; }

.right_navi_wrap {position: fixed;width:110px;z-index:9999; top: 70px; right: 30px;}
.right_navi_wrap .tel {float:left;height:170px;padding:0;margin-bottom:5px;}
.right_navi_wrap .online {float:left;height:110px;padding:0;margin-bottom:5px;}
.right_navi_wrap ul {padding:0;margin:0;}
.right_navi_wrap li {float:left;width:100px;height:50px;padding:0;margin-bottom:10px;}
.right_navi_wrap li a {}
.right_navi_wrap li a:hover {opacity:0.8;}

.link_wrap {position:relative;width:100%;height:175px;margin:0;padding:0;background:url('./image/link_wrap_bg.jpg')#f4f4f4 center center no-repeat;}

#footer_wrap {float:left;width:100%;height:150px;margin:0;padding:0;background:url('')#444 center center no-repeat;}
#footer_wrap .foot_cont {width:1000px;height:150px;margin:0 auto;padding:0;}
#footer_wrap .foot_cont .logo{ float:left;width:240px;margin:0;padding:55px 0 0 0;}
#footer_wrap .foot_cont .copy{ float:left;width:740px;margin:0 0 0 20px;padding:40px 0 0 0;text-align:left;font-size:15px; line-height:150%; font-family: 'Pretendard-Light'; color:#d8d8d8; }
#footer_wrap .foot_cont .copy .cp {padding-top:0;color:#888;font-size:12px;line-height:30px; }
#footer_wrap .foot_cont .copy .admin {margin-left:20px;color:#666; }
#footer_wrap .foot_cont .copy .admin a{font-size:11px; font-family:arial; color:#777; }