@charset "utf-8";

@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url(http://fonts.googleapis.com/earlyaccess/notosanssc.css);
/*  한국어 */
:lang(ko) {
  font-family: 'Noto Sans KR', sans-serif;
}
/* 일본어 */
:lang(ja) {
  font-family: 'Noto Sans JP', sans-serif;
}
/* 중국어 (간체) */
:lang(zh-Hans) {
  font-family: 'Noto Sans SC', sans-serif;
}

@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;
}

@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%}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

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:120px; }


/* 추가 헤더 */

#header_navi, #header_navi * {}
#header_navi { position:relative; width:1200px;margin: 0 auto;height: 120px;  font-family: 'Noto Sans SC', sans-serif; font-weight: 700; }

#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: 106px; height: 80px; margin-top:20px; background:url('./image/logo_white.png') center center no-repeat ;
}
#header_navi .logo.active {
    float: left; display:block; width: 106px; height: 80px; margin-top:10px; background:url('./image/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:650px; overflow:hidden;
}

#header_navi .kr {
    position:absolute; width: 24px; height: 24px; top:47px; left:1074px; z-index:99;
}
#header_navi .kr.active {
    position:absolute; width: 24px; height: 24px; top:35px; left:1074px; z-index:99;
}
#header_navi .en {
    position:absolute; width: 24px; height: 24px; top:47px; left:1108px; z-index:99;
}
#header_navi .en.active {
    position:absolute; width: 24px; height: 24px; top:35px; left:1108px; 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('') 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: 120px; text-align: center; line-height: 120px; font-size: 18px; color:#ffffff; font-weight: 700; font-family: 'Noto Sans SC', sans-serif; }
#header_navi > .head_wrap > ul > li > a.active {display: inline-block; width: 100%; height: 100px; text-align: center; line-height: 100px; font-size: 18px; color:#333; font-weight: 700; font-family: 'Noto Sans SC', sans-serif; }
#header_navi > .head_wrap > ul > li.active > a{ color: #f37022; }
#header_navi > .head_wrap > ul > li:hover { background: #f37022; color: #ffffff;}
#header_navi > .head_wrap > ul > li:hover a{ color: #ffffff;}
#header_navi > .head_wrap > ul > li > ul.sub {display: none;}
#header_navi > .head_wrap > ul > li:hover > ul.sub {display: block; padding: 20px 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; font-family: 'Noto Sans SC', sans-serif;}
#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:#ffffff; height:120px; background: url('') top center repeat-x; overflow:visible; z-index:999; }
.navi_head.active { background: url('') #f9f9f9 top center repeat; height:100px; }
.navi_head a { color:#ffffff; }
.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: 'Noto Sans SC', sans-serif; color:#ffffff; }
.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 {position:relative;width:100%;height:200px;margin:0;padding:0;background:url('')#333 repeat;}
#footer_wrap .foot_cont {width:1200px;margin:0 auto;padding:0;}
#footer_wrap .foot_cont .logo{ float:left;width:110px;margin:0;padding:55px 0 0 0;}
#footer_wrap .foot_cont .copy{float:left; width:1000px;margin:0;padding:50px 0 0 0;text-align:left;font-size:14px; line-height:140%; font-family: 'NEXON Lv1 Gothic';  font-weight: 400; color:#999; }
#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; }