@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css); 
@import url(https://fonts.googleapis.com/css?family=Noto+Sans+KR:300,500);
@import url(https://cdn.jsdelivr.net/gh/theeluwin/NotoSansKR-Hestia@master/stylesheets/NotoSansKR-Hestia.css);
@import url(http://cdn.jsdelivr.net/font-notosans-kr/1.0.0-v1004/NotoSansKR-2350.css);
@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900');
@import url(https://cdn.jsdelivr.net/xeicon/2/xeicon.min.css);
@import url(css/blank.css);

*{margin:0; padding:0; box-sizing:border-box;letter-spacing:-0.04em;color:inherit;}
html,body {height:100%;}
img {border:0; vertical-align:top;}
a {border:0; text-decoration:none;}
ul, li {list-style:none;}
body {font-family: 'NotoSansKR','Noto Sans Korean','Noto Sans KR','Nanum Gothic','Roboto', sans-serif; color:#303030;}
div {display:block;}
h1,h2,h3,h4 {font-weight:200;line-height:1.3}
h5 {font-weight:300;line-height:1.3}
b {letter-spacing:inherit;font-weight:700}
.inner {width:1200px;margin:auto;clear:both;}
.inner2 {width:1100px;margin:auto;clear:both}
.c_lightgray {color:#b0b0b0 !important}
.c_gray {color:#808080 !important}
.c_red {color:#c70000 !important}
.c_white {color:#fff !important}
.c_main {color:#b7a4f4 !important;}


h1 {font-size:50px;}
h1.big {font-size:80px;}
h2 {font-size:40px}
h3 {font-size:30px;}
h4 {font-size:24px;line-height:1.5}
h5 {font-size:20px;line-height:1.6}
p {font-size:18px;font-weight:200;line-height:1.7;color:inherit;word-break:keep-all }
p.small {font-size:15px;}
.roboto {font-family:'Roboto';}
.thin {font-weight:100;}
.bold {font-weight:700;}
.tight {letter-spacing:-0.05em !important;}
.loose {letter-spacing:0.2em !important;}
.font30 {font-size:30px !important;}
.font20 {font-size:20px !important;}
.txtshadow {text-shadow:1px 1px 1px rgba(0,0,0,0.3);}
.ind5 {text-indent:5px;}

span {color:inherit}

hr.line {width:100%;height:1px;background-color:#d0d0d0;border:0;}

.float {float:left !important;}
.float_r {float:right !important;}
.left {text-align:left !important}
.right {text-align:right !important}
.center {text-align:center !important}
.clearfix {display:inline-block;width:100%;}
.clearfix:after {content:"";clear:both;}
.flex {display:flex;}
.flex .col {flex:1;}
.block {display:inline-block;}
.relative {position:relative;}




.bd_b {border-bottom:1px #333 solid}
.bd_t {border-top:1px #333 solid}
.bd_r {border-right:1px #d0d0d0 solid}
.bd_l {border-left:1px #d0d0d0 solid}



/* 폭 설정 */
.half {width:50% !important}
.col5 {width:20% !important;}
.col4 {width:25% !important;}
.col3 {width:33.33% !important;}
.col3x2 {width:66.66% !important;}
.w30 {width:30% !important;}
.w40 {width:40% !important;}
.w48 {width:48% !important;}
.w55 {width:55% !important;}
.w60 {width:60% !important;}
.w70 {width:70% !important;}
.w75 {width:75% !important;}
.w80 {width:80% !important;}

.w90 {width:90% !important;}
.w100 {width:100% !important;}



/* 공통 */
#wrap {width:100%; min-width:1200px; height:100%; margin:auto; position:relative; }

h1.logo {width:240px;height:50px;background-image:url(images/logo.png);text-indent:-3333px;background-size:cover;}
h1.logo.mono {background-image:url(images/logo_mono.png);}



#header {width:100%; height:150px; background-color:#303030;}
#header > .inner {position:relative;height:92px; }
#header > .inner > * {position:absolute;}
#header > .inner .logo {top:22px;left:50%;margin-left:-120px;}
#header > .inner .logo a {display:block;height:inherit;}
#header > .inner .language {left:20px;top:30px;}
#header > .inner .language a {width:33px;height:33px;background-repeat:no-repeat;display:block;text-indent:-3333px;float:left;margin-right:10px;}
#header > .inner .language a.en {background-image:url(images/language_en.png);}
#header > .inner .language a.ch {background-image:url(images/language_ch.png);}
#header > .inner .language a.kr {background-image:url(images/language_kr.png);}
/* #header > .inner .language a.jp {background-image:url(images/language_jp.png);}*/



#header #gnb {width:100%; height:58px; border-top:1px rgba(255,255,255,0.2) solid;}
#header #gnb ul {}
#header #gnb ul > li {float:left;line-height:57px;width:14.28%;text-align:center;}
#header #gnb ul > li a {display:block;font-size:16px;color:#fff;-webkit-transition:all 0.3s ease-out;transition:all 0.3s ease-out;}
#header #gnb ul > li a.on,#header #gnb ul > li a:hover {font-weight:bold;color:#a690ec;}
#header #gnb .subnav { margin:auto;
color:#fff;
width:100%;
 clear:both;
 display: none;
 position: absolute;
  z-index:100;
  text-align:left;
  top:150px;
  left:0;
  font-size:15px;
  padding:20px 0;
  background:url(images/script.png) right 350px no-repeat rgba(0,0,0,0.8);
 }
#header #gnb .subnav dl {width:14.28%;float:left; padding-left:8px;min-height:85px; position:relative; border-left:1px rgba(255,255,255,0.1) solid;}
#header #gnb .subnav dl:first-child {border-left:0;}
#header #gnb .subnav dd {line-height:25px;margin-bottom:7px;}
#header #gnb .subnav a:hover {color:#efd52d;}
#header #gnb .subnav a {display:block;-webkit-transition:all 0.3s ease-out;transition:all 0.3s ease-out;}

/* Underline From Left */
#header #gnb .subnav a,.UnderlineFromLeft {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  overflow: hidden;
}
#header #gnb .subnav a:before,
.UnderlineFromLeft:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 100%;
  bottom: 0;
  background: #efd52d;
  height: 1px;
  -webkit-transition-property: right;
  transition-property: right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
#header #gnb .subnav a:hover:before,
#header #gnb .subnav a:focus:before,
#header #gnb .subnav a:active:before,
.UnderlineFromLeft:hover:before,
.UnderlineFromLeft:focus:before,
.UnderlineFromLeft:active:before {
  right: 0;
}




/* 공통 하단 */
#footer {width:100%; min-width:1200px;margin:auto;float:left;padding:40px 0; background-color:#29282d;}
#footer .inner {position:relative;padding:0 2%;}
#footer .inner > * { float:left;}
#footer .inner .txt span {font-size:15px;display:inline-block;margin-right:8px;font-weight:200;line-height:1.7;color:#fff;}
#footer .inner .txt .sns {width:100%;display:inline-block;}
#footer .inner .txt .sns a {width:49px;height:49px;background-repeat:no-repeat;display:block;text-indent:-3333px;float:left;margin-right:20px;}
#footer .inner .txt .sns a.instagram {background-image:url(images/footer_sns1.png)}
#footer .inner .txt .sns a.blog {background-image:url(images/footer_sns2.png)}
#footer .inner .txt .sns a.kakao {background-image:url(images/footer_sns3.png)}
#footer a#back-top {position:absolute; right:0; width:50px; height:50px; line-height:50px; border:1px #bbb solid; color:#ccc; display:inline-block; text-align:center;}