@charset "utf-8";
@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);
@import url('https://fonts.googleapis.com/css?family=Source+Serif+Pro:400,600,700&display=swap');
.normal     { font-weight: 400 }
.bold       { font-weight: 700 }
.bolder     { font-weight: 800 }
.light      { font-weight: 300 }

 @font-face {
   font-family: 'TMONMONSORI';
   font-style: normal;
   src: url(/common/font/SourceHanSerifKR-Light.otf) format('opentype'),
        url(/common/font/TmonMonsoriBlack.woff) format('woff'),
        url(/common/font/TmonMonsoriBlack.otf) format('opentype');
 }

/* 초기화 */
body ,
body * {margin:0;padding:0;font-family: 'TMONMONSORI';list-style:none;outline: 0}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block;}

legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden;}
input[type="submit"]{cursor:pointer;}
button {cursor:pointer;border:0;background:none;}

select {margin:0}
p {margin:0;padding:0;word-break:break-all}
hr {display:none}
pre {overflow-x:scroll;font-size:1.1em}
a {color:#000;text-decoration:none}

*, :after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

input[type=text],input[type=password], textarea {
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
}

input[type=text]:focus,input[type=password]:focus,  textarea:focus,select:focus {
-webkit-box-shadow:  0 0 5px #9ed4ff;
-moz-box-shadow:  0 0 5px #9ed4ff;
box-shadow: 0 0 5px #9ed4ff;
border: 1px solid #558ab7 !important;
}
/* 공통 */
.web{ display: block; }
.mobile{ display: none; }

/* header */
#header{position: fixed; width: 100%; z-index: 999; left: 0; top: 0;;transition: 0.3s}
#header.on{background: rgba(0,0,0,0.6)}
#header .h_wrap{ position: relative; width: 1793px;margin: 0 auto;height: auto; }
#header h1{ position: absolute; top: 48px; z-index: 2; }
#header h1 img{vertical-align: bottom;}
#header h1 img:first-child{margin-right: 18px;}
#header a.info{z-index: 55;position: absolute;top:73px;left:200px;}
#header a.info div{position: relative;padding:4px 4px 2px 4px}
#header a.info div span.on .i_line1,
#header a.info div span.on .i_line2,
#header a.info div span.on .i_line3,
#header a.info div span.on .i_line4, top {
    position: absolute;
    background: transparent;
    width: 0px;
    height: 0px;
    -webkit-animation-duration: .4s;
    -webkit-animation-iteration-count:1;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-duration: .5s;
    -moz-animation-iteration-count:1;
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-fill-mode: forwards;
    -o-animation-duration: .5s;
    -o-animation-iteration-count:1;
    -o-animation-timing-function: ease-in-out;
    -o-animation-fill-mode: forwards;
    -ms-animation-duration: .5s;
    -ms-animation-iteration-count:1;
    -ms-animation-timing-function: ease-in-out;
    -ms-animation-fill-mode: forwards;
}

#header a.info div span.on .i_line1 {
  left: 0;
  top: -5px;
  height: 52px;
  width:1px;
  -webkit-animation-name: iline01;
  /* -webkit-animation-delay: .5s; */
  -moz-animation-name: iline01;
  /* -moz-animation-delay: .5s; */
  -ms-animation-name: iline01;
  /* -ms-animation-delay: .5s; */
  -o-animation-name: iline01;
  /* -o-animation-delay: .5s; */
}


#header a.info div span.on .i_line2 {
    top: 0;
  left: -5px;
  height: 1px;
  width:231px;
  -webkit-animation-name: iline02;
  /* -webkit-animation-delay: .5s; */
  -moz-animation-name: iline02;
  /* -moz-animation-delay: .5s; */
  -ms-animation-name: iline02;
  /* -ms-animation-delay: .5s; */
  -o-animation-name: iline02;
  /* -o-animation-delay: .5s; */
}

#header a.info div span.on .i_line3 {
  right: 0;
  bottom: -10%;
  height: 52px;
  width:1px;
  -webkit-animation-name: iline03;
  /* -webkit-animation-delay: .5s; */
  -moz-animation-name: iline03;
  /* -moz-animation-delay: .5s; */
  -ms-animation-name: iline03;
  /* -ms-animation-delay: .5s; */
  -o-animation-name: iline03;
  /* -o-animation-delay: .5s; */
}

#header a.info div span.on .i_line4 {
    bottom: 0;
  right: -5px;
  height: 1px;
  width:231px;
  -webkit-animation-name: iline04;
  /* -webkit-animation-delay: .5s; */
  -moz-animation-name: iline04;
  /* -moz-animation-delay: .5s; */
  -ms-animation-name: iline04;
  /* -ms-animation-delay: .5s; */
  -o-animation-name: iline04;
  /* -o-animation-delay: .5s; */
}

@-webkit-keyframes iline01 {
  0%    { height: 0; background: #7d7d7d; }
  100%  { height: 40px; background: #7d7d7d; }
}

@-webkit-keyframes iline02 {
  0%    { width: 0; background: #7d7d7d; }
  100%  { width: 239px; background: #7d7d7d; }
}

@-webkit-keyframes iline03 {
  0%    { height: 0; background: #7d7d7d; }
  100%  { height: 40px; background: #7d7d7d; }
}

@-webkit-keyframes iline04 {
  0%    { width: 0; background: #7d7d7d; }
  100%  { width: 239px; background: #7d7d7d; }
}

#header .m_nav{ position: relative; display: block; transition: 0.5s; }
#header .m_nav > ul{ float: right;  }
#header .m_nav > ul > li{ float: left; position: relative}
#header .m_nav > ul > li ul{position: absolute;width: 100%;text-align: center;    background: rgba(0,0,0,0.9);padding: 15px 0}
#header .m_nav > ul > li ul li a{display: block;line-height: 40px;color: rgba(255,255,255,0.8);font-size: 15px;}
#header .m_nav > ul > li ul{display: none}
#header .m_nav > ul > li:hover ul{display: block}
#header .m_nav > ul > li > a{display: block;padding: 30px 30px;padding-top: 68px;color: #fff; font-weight: 400; font-size: 17px; position: relative;font-size: -0.5px;transition: 0.8s;background-position: 50% 73%;}
/* #header .m_nav > ul > li >  a span{transition: 0.5s}
#header .m_nav > ul > li:hover > a span{border: 1px solid #fff} */
 #header .m_nav .sub_nav{ padding-top: 40px; }
 #header .m_nav .sub_nav li{ text-align: center; padding: 10px 0; }
 #header .m_nav .sub_nav li a{ font-size: 16px; font-weight: 200; color: rgba(255,255,255,0.6);}

 #header .m_nav .sub_nav li a:hover{ color: #fff; }
 #header button{ width: 35px; height: 50px; }

/* 모바일 */
#header .m_menu{ display: none; }
#header .m_nav > ul > li > a::before{display: inline-block;margin-right: 5px;}
#header .m_nav > ul > li > a::after{display: inline-block;margin-left: 5px;}
#header .m_nav > ul > li > a span{position: relative;padding: 0px 2px 0.5px 2px;}

#header .m_nav > ul > li > a span.on .h_line1,
#header .m_nav > ul > li > a span.on .h_line2,
#header .m_nav > ul > li > a span.on .h_line3,
#header .m_nav > ul > li > a span.on .h_line4, top {
  position: absolute;
  background: transparent;
  width: 0px;
  height: 0px;
  -webkit-animation-duration: .4s;
  -webkit-animation-iteration-count:1;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-duration: .5s;
  -moz-animation-iteration-count:1;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-fill-mode: forwards;
  -o-animation-duration: .5s;
  -o-animation-iteration-count:1;
  -o-animation-timing-function: ease-in-out;
  -o-animation-fill-mode: forwards;
  -ms-animation-duration: .5s;
  -ms-animation-iteration-count:1;
  -ms-animation-timing-function: ease-in-out;
  -ms-animation-fill-mode: forwards;
}
#header .m_nav > ul > li > a span.on .h_line1 {
  left: 0;
  top: -10%;
  height: 120%;
  width:1px;
  -webkit-animation-name: line01;
  -moz-animation-name: line01;
  -ms-animation-name: line01;
  -o-animation-name: line01;
}

#header .m_nav > ul > li > a span.on .h_line2 {
  top: 0;
  left: -5%;
  width: 110% !important;
  height:1px !important;
  margin-top: 0;
  -webkit-animation-name: line02;
  -moz-animation-name: line02;
  -ms-animation-name: line02;
  -o-animation-name: line02;
}

#header .m_nav > ul > li > a span.on .h_line3 {
  right: 0;
  top: -10%;;
  height: 120%;
  width:1px;
  -webkit-animation-name: line03;
  -o-animation-name: line03;
  -ms-animation-name: line03;
  -moz-animation-name: line03;
}

#header .m_nav > ul > li > a span.on .h_line4 {
  bottom: 0;
  right: -5%;
  width: 110%;
  height:1px !important;
  -webkit-animation-name: line04;
  -o-animation-name: line04;
  -ms-animation-name: line04;
  -moz-animation-name: line04;
}



@-webkit-keyframes line01 {
  0%    { height: 0; background: #7d7d7d; }
  100%  { height: 120%; background: #7d7d7d; }
}

@-webkit-keyframes line02 {
  0%    { width: 0; background: #7d7d7d; }
  100%  { width: 110%; background: #7d7d7d; }
}

@-webkit-keyframes line03 {
  0%    { height: 0; background: #7d7d7d; }
  100%  { height: 120%; background: #7d7d7d; }
}

@-webkit-keyframes line04 {
  0%    { width: 0; background: #7d7d7d; }
  100%  { width: 110%; background: #7d7d7d; }
}
@-moz-keyframes line01 {
  0%    { height: 0; background: #7d7d7d; }
  100%  { height: 120%; background: #7d7d7d; }
}

@-moz-keyframes line02 {
  0%    { width: 0; background: #7d7d7d; }
  100%  { width: 110%; background: #7d7d7d; }
}

@-moz-keyframes line03 {
  0%    { height: 0; background: #7d7d7d; }
  100%  { height: 120%; background: #7d7d7d; }
}

@-moz-keyframes line04 {
  0%    { width: 0; background: #7d7d7d; }
  100%  { width: 110%; background: #7d7d7d; }
}
@-o-keyframes line01 {
  0%    { height: 0; background: #7d7d7d; }
  100%  { height: 120%; background: #7d7d7d; }
}

@-o-keyframes line02 {
  0%    { width: 0; background: #7d7d7d; }
  100%  { width: 110%; background: #7d7d7d; }
}

@-o-keyframes line03 {
  0%    { height: 0; background: #7d7d7d; }
  100%  { height: 120%; background: #7d7d7d; }
}

@-o-keyframes line04 {
  0%    { width: 0; background: #7d7d7d; }
  100%  { width: 110%; background: #7d7d7d; }
}
@-ms-keyframes line01 {
  0%    { height: 0; background: #7d7d7d; }
  100%  { height: 120%; background: #7d7d7d; }
}

@-ms-keyframes line02 {
  0%    { width: 0; background: #7d7d7d; }
  100%  { width: 110%; background: #7d7d7d; }
}

@-ms-keyframes line03 {
  0%    { height: 0; background: #7d7d7d; }
  100%  { height: 120%; background: #7d7d7d; }
}

@-ms-keyframes line04 {
  0%    { width: 0; background: #7d7d7d; }
  100%  { width: 110%; background: #7d7d7d; }
}


#header .m_nav > ul > li > a span.on .j_line1,
#header .m_nav > ul > li > a span.on .j_line2,
#header .m_nav > ul > li > a span.on .j_line3,
#header .m_nav > ul > li > a span.on .j_line4, top {
  position: absolute;
  background: transparent;
  width: 0px;
  height: 0px;
  -webkit-animation-duration: .4s;
  -webkit-animation-iteration-count:1;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-duration: .5s;
  -moz-animation-iteration-count:1;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-fill-mode: forwards;
  -o-animation-duration: .5s;
  -o-animation-iteration-count:1;
  -o-animation-timing-function: ease-in-out;
  -o-animation-fill-mode: forwards;
  -ms-animation-duration: .5s;
  -ms-animation-iteration-count:1;
  -ms-animation-timing-function: ease-in-out;
  -ms-animation-fill-mode: forwards;
}
#header .m_nav > ul > li > a span.on .j_line1 {
  left: 0;
  top: -5px;
  height: 120%;
  width:1px;
  -webkit-animation-name: jline01;
  /* -webkit-animation-delay: .5s; */
  -moz-animation-name: jline01;
  /* -moz-animation-delay: .5s; */
  -ms-animation-name: jline01;
  /* -ms-animation-delay: .5s; */
  -o-animation-name: jline01;
  /* -o-animation-delay: .5s; */
}

#header .m_nav > ul > li > a span.on .j_line2 {
    top: 0;
    left: -5px;
  width: 110% !important;
  height:1px !important;
  margin-top: 0;
  -webkit-animation-name: jline02;
  /* -webkit-animation-delay: .5s; */
  -moz-animation-name: jline02;
  /* -moz-animation-delay: .5s; */
  -ms-animation-name: jline02;
  /* -ms-animation-delay: .5s; */
  -o-animation-name: jline02;
  /* -o-animation-delay: .5s; */
}

#header .m_nav > ul > li > a span.on .j_line3 {
    right: 0;
    top: -5px;;
  height: 100%;
  width:1px;
  -webkit-animation-name: jline03;
  /* -webkit-animation-delay: 1s; */
  -o-animation-name: jline03;
  /* -o-animation-delay: 1s; */
  -ms-animation-name: jline03;
  /* -ms-animation-delay: 1s; */
  -moz-animation-name: jline03;
  /* -moz-animation-delay: 1s; */
}

#header .m_nav > ul > li > a span.on .j_line4 {
    bottom: 0;
    right: -5px;
  width: 100%;
  height:1px !important;
  -webkit-animation-name: jline04;
  /* -webkit-animation-delay: 1.5s; */
  -o-animation-name: jline04;
  /* -o-animation-delay:1.5s; */
  -ms-animation-name: jline04;
  /* -ms-animation-delay: 1.5s; */
  -moz-animation-name: jline04;
  /* -moz-animation-delay: 1.5s; */
}



@-webkit-keyframes jline01 {
  0%    { height: 0; background: #7d7d7d; }
  100%  { height: 120%; background: #7d7d7d; }
}

@-webkit-keyframes jline02 {
  0%    { width: 0; background: #7d7d7d; }
  100%  { width: 110%; background: #7d7d7d; }
}

@-webkit-keyframes jline03 {
  0%    { height: 0; background: #7d7d7d; }
  100%  { height: 120%; background: #7d7d7d; }
}

@-webkit-keyframes jline04 {
  0%    { width: 0; background: #7d7d7d; }
  100%  { width: 110%; background: #7d7d7d; }
}

@-mos-keyframes jline01 {
  0%    { height: 0; background: #7d7d7d; }
  100%  { height: 120%; background: #7d7d7d; }
}

@-mos-keyframes jline02 {
  0%    { width: 0; background: #7d7d7d; }
  100%  { width: 110%; background: #7d7d7d; }
}

@-mos-keyframes jline03 {
  0%    { height: 0; background: #7d7d7d; }
  100%  { height: 120%; background: #7d7d7d; }
}

@-mos-keyframes jline04 {
  0%    { width: 0; background: #7d7d7d; }
  100%  { width: 110%; background: #7d7d7d; }
}

@-o-keyframes jline01 {
  0%    { height: 0; background: #7d7d7d; }
  100%  { height: 120%; background: #7d7d7d; }
}

@-o-keyframes jline02 {
  0%    { width: 0; background: #7d7d7d; }
  100%  { width: 110%; background: #7d7d7d; }
}

@-o-keyframes jline03 {
  0%    { height: 0; background: #7d7d7d; }
  100%  { height: 120%; background: #7d7d7d; }
}

@-o-keyframes jline04 {
  0%    { width: 0; background: #7d7d7d; }
  100%  { width: 110%; background: #7d7d7d; }
}

@-ms-keyframes jline01 {
  0%    { height: 0; background: #7d7d7d; }
  100%  { height: 120%; background: #7d7d7d; }
}

@-ms-keyframes jline02 {
  0%    { width: 0; background: #7d7d7d; }
  100%  { width: 110%; background: #7d7d7d; }
}

@-ms-keyframes jline03 {
  0%    { height: 0; background: #7d7d7d; }
  100%  { height: 120%; background: #7d7d7d; }
}

@-ms-keyframes jline04 {
  0%    { width: 0; background: #7d7d7d; }
  100%  { width: 110%; background: #7d7d7d; }
}

#header .m_nav > ul > li > a span.on .s_line1,
#header .m_nav > ul > li > a span.on .s_line2,
#header .m_nav > ul > li > a span.on .s_line3,
#header .m_nav > ul > li > a span.on .s_line4, top {
  position: absolute;
  background: transparent;
  width: 0px;
  height: 0px;
  -webkit-animation-duration: .4s;
  -webkit-animation-iteration-count:1;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-duration: .5s;
  -moz-animation-iteration-count:1;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-fill-mode: forwards;
  -o-animation-duration: .5s;
  -o-animation-iteration-count:1;
  -o-animation-timing-function: ease-in-out;
  -o-animation-fill-mode: forwards;
  -ms-animation-duration: .5s;
  -ms-animation-iteration-count:1;
  -ms-animation-timing-function: ease-in-out;
  -ms-animation-fill-mode: forwards;
}
#header .m_nav > ul > li > a span.on .s_line1 {
  left: 0;
  bottom: -10%;
  height: 120%;
  width:1px;
  -webkit-animation-name: sline01;
  /* -webkit-animation-delay: .5s; */
  -moz-animation-name: sline01;
  /* -moz-animation-delay: .5s; */
  -ms-animation-name: sline01;
  /* -ms-animation-delay: .5s; */
  -o-animation-name: sline01;
  /* -o-animation-delay: .5s; */
}

#header .m_nav > ul > li > a span.on .s_line2 {
  top: 0;
  right: -5%;
  width: 110% !important;
  height:1px !important;
  margin-top: 0;
  -webkit-animation-name: sline02;
  /* -webkit-animation-delay: .5s; */
  -moz-animation-name: sline02;
  /* -moz-animation-delay: .5s; */
  -ms-animation-name: sline02;
  /* -ms-animation-delay: .5s; */
  -o-animation-name: sline02;
  /* -o-animation-delay: .5s; */
}

#header .m_nav > ul > li > a span.on .s_line3 {
  right: 0;
  top: -10%;;
  height: 120%;
  width:1px;
  -webkit-animation-name: sline03;
  /* -webkit-animation-delay: 1s; */
  -o-animation-name: sline03;
  /* -o-animation-delay: 1s; */
  -ms-animation-name: sline03;
  /* -ms-animation-delay: 1s; */
  -moz-animation-name: sline03;
  /* -moz-animation-delay: 1s; */
}

#header .m_nav > ul > li > a span.on .s_line4 {
  bottom: 0;
  left: -5%;
  width: 110%;
  height:1px !important;
  -webkit-animation-name: sline04;
  /* -webkit-animation-delay: 1.5s; */
  -o-animation-name: sline04;
  /* -o-animation-delay:1.5s; */
  -ms-animation-name: sline04;
  /* -ms-animation-delay: 1.5s; */
  -moz-animation-name: sline04;
  /* -moz-animation-delay: 1.5s; */
}



@-webkit-keyframes sline01 {
  0%    { height: 0; background: #7d7d7d; }
  100%  { height: 120%; background: #7d7d7d; }
}

@-webkit-keyframes sline02 {
  0%    { width: 0; background: #7d7d7d; }
  100%  { width: 110%; background: #7d7d7d; }
}

@-webkit-keyframes sline03 {
  0%    { height: 0; background: #7d7d7d; }
  100%  { height: 120%; background: #7d7d7d; }
}

@-webkit-keyframes sline04 {
  0%    { width: 0; background: #7d7d7d; }
  100%  { width: 110%; background: #7d7d7d; }
}

@-moz-keyframes sline01 {
  0%    { height: 0; background: #7d7d7d; }
  100%  { height: 120%; background: #7d7d7d; }
}

@-moz-keyframes sline02 {
  0%    { width: 0; background: #7d7d7d; }
  100%  { width: 110%; background: #7d7d7d; }
}

@-moz-keyframes sline03 {
  0%    { height: 0; background: #7d7d7d; }
  100%  { height: 120%; background: #7d7d7d; }
}

@-moz-keyframes sline04 {
  0%    { width: 0; background: #7d7d7d; }
  100%  { width: 110%; background: #7d7d7d; }
}

@-o-keyframes sline01 {
  0%    { height: 0; background: #7d7d7d; }
  100%  { height: 120%; background: #7d7d7d; }
}

@-o-keyframes sline02 {
  0%    { width: 0; background: #7d7d7d; }
  100%  { width: 110%; background: #7d7d7d; }
}

@-o-keyframes sline03 {
  0%    { height: 0; background: #7d7d7d; }
  100%  { height: 120%; background: #7d7d7d; }
}

@-o-keyframes sline04 {
  0%    { width: 0; background: #7d7d7d; }
  100%  { width: 110%; background: #7d7d7d; }
}


@-ms-keyframes sline01 {
  0%    { height: 0; background: #7d7d7d; }
  100%  { height: 120%; background: #7d7d7d; }
}

@-ms-keyframes sline02 {
  0%    { width: 0; background: #7d7d7d; }
  100%  { width: 110%; background: #7d7d7d; }
}

@-ms-keyframes sline03 {
  0%    { height: 0; background: #7d7d7d; }
  100%  { height: 120%; background: #7d7d7d; }
}

@-ms-keyframes sline04 {
  0%    { width: 0; background: #7d7d7d; }
  100%  { width: 110%; background: #7d7d7d; }
}



#header .m_nav > ul > li > a span.on .g_line1,
#header .m_nav > ul > li > a span.on .g_line2,
#header .m_nav > ul > li > a span.on .g_line3,
#header .m_nav > ul > li > a span.on .g_line4, top {
  position: absolute;
  background: transparent;
  width: 0px;
  height: 0px;
  -webkit-animation-duration: .4s;
  -webkit-animation-iteration-count:1;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-duration: .5s;
  -moz-animation-iteration-count:1;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-fill-mode: forwards;
  -o-animation-duration: .5s;
  -o-animation-iteration-count:1;
  -o-animation-timing-function: ease-in-out;
  -o-animation-fill-mode: forwards;
  -ms-animation-duration: .5s;
  -ms-animation-iteration-count:1;
  -ms-animation-timing-function: ease-in-out;
  -ms-animation-fill-mode: forwards;
}
#header .m_nav > ul > li > a span.on .g_line1 {
  left: 0;
  top: -10%;
  height: 120%;
  width:1px;
  -webkit-animation-name: gline01;
  /* -webkit-animation-delay: .5s; */
  -moz-animation-name: gline01;
  /* -moz-animation-delay: .5s; */
  -ms-animation-name: gline01;
  /* -ms-animation-delay: .5s; */
  -o-animation-name: gline01;
  /* -o-animation-delay: .5s; */
}

#header .m_nav > ul > li > a span.on .g_line2 {
    top: 0;
  left: -5%;
  width: 110% !important;
  height:1px !important;
  margin-top: 0;
  -webkit-animation-name: gline02;
  /* -webkit-animation-delay: .5s; */
  -moz-animation-name: gline02;
  /* -moz-animation-delay: .5s; */
  -ms-animation-name: gline02;
  /* -ms-animation-delay: .5s; */
  -o-animation-name: gline02;
  /* -o-animation-delay: .5s; */
}

#header .m_nav > ul > li > a span.on .g_line3 {
    right: 0;
    top: -10%;;
  height: 120%;
  width:1px;
  -webkit-animation-name: gline03;
  /* -webkit-animation-delay: 1s; */
  -o-animation-name: gline03;
  /* -o-animation-delay: 1s; */
  -ms-animation-name: gline03;
  /* -ms-animation-delay: 1s; */
  -moz-animation-name: gline03;
  /* -moz-animation-delay: 1s; */
}

#header .m_nav > ul > li > a span.on .g_line4 {
    bottom: 0;
    right: -5%;
  width: 110%;
  height:1px !important;
  -webkit-animation-name: gline04;
  /* -webkit-animation-delay: 1.5s; */
  -o-animation-name: gline04;
  /* -o-animation-delay:1.5s; */
  -ms-animation-name: gline04;
  /* -ms-animation-delay: 1.5s; */
  -moz-animation-name: gline04;
  /* -moz-animation-delay: 1.5s; */
}



@-webkit-keyframes gline01 {
  0%    { height: 0; background: #7d7d7d; }
  100%  { height: 120%; background: #7d7d7d; }
}

@-webkit-keyframes gline02 {
  0%    { width: 0; background: #7d7d7d; }
  100%  { width: 110%; background: #7d7d7d; }
}

@-webkit-keyframes gline03 {
  0%    { height: 0; background: #7d7d7d; }
  100%  { height: 120%; background: #7d7d7d; }
}

@-webkit-keyframes gline04 {
  0%    { width: 0; background: #7d7d7d; }
  100%  { width: 110%; background: #7d7d7d; }
}

@-mos-keyframes gline01 {
  0%    { height: 0; background: #7d7d7d; }
  100%  { height: 120%; background: #7d7d7d; }
}

@-mos-keyframes gline02 {
  0%    { width: 0; background: #7d7d7d; }
  100%  { width: 110%; background: #7d7d7d; }
}

@-mos-keyframes gline03 {
  0%    { height: 0; background: #7d7d7d; }
  100%  { height: 120%; background: #7d7d7d; }
}

@-mos-keyframes gline04 {
  0%    { width: 0; background: #7d7d7d; }
  100%  { width: 110%; background: #7d7d7d; }
}

@-o-keyframes gline01 {
  0%    { height: 0; background: #7d7d7d; }
  100%  { height: 120%; background: #7d7d7d; }
}

@-o-keyframes gline02 {
  0%    { width: 0; background: #7d7d7d; }
  100%  { width: 110%; background: #7d7d7d; }
}

@-o-keyframes gline03 {
  0%    { height: 0; background: #7d7d7d; }
  100%  { height: 120%; background: #7d7d7d; }
}

@-o-keyframes gline04 {
  0%    { width: 0; background: #7d7d7d; }
  100%  { width: 110%; background: #7d7d7d; }
}

@-ms-keyframes gline01 {
  0%    { height: 0; background: #7d7d7d; }
  100%  { height: 120%; background: #7d7d7d; }
}

@-ms-keyframes gline02 {
  0%    { width: 0; background: #7d7d7d; }
  100%  { width: 110%; background: #7d7d7d; }
}

@-ms-keyframes gline03 {
  0%    { height: 0; background: #7d7d7d; }
  100%  { height: 120%; background: #7d7d7d; }
}

@-ms-keyframes gline04 {
  0%    { width: 0; background: #7d7d7d; }
  100%  { width: 110%; background: #7d7d7d; }
}


#header .m_nav > ul > li > a span.on .u_line1,
#header .m_nav > ul > li > a span.on .u_line2,
#header .m_nav > ul > li > a span.on .u_line3,
#header .m_nav > ul > li > a span.on .u_line4, top {
  position: absolute;
  background: transparent;
  width: 0px;
  height: 0px;
  -webkit-animation-duration: .4s;
  -webkit-animation-iteration-count:1;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-duration: .5s;
  -moz-animation-iteration-count:1;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-fill-mode: forwards;
  -o-animation-duration: .5s;
  -o-animation-iteration-count:1;
  -o-animation-timing-function: ease-in-out;
  -o-animation-fill-mode: forwards;
  -ms-animation-duration: .5s;
  -ms-animation-iteration-count:1;
  -ms-animation-timing-function: ease-in-out;
  -ms-animation-fill-mode: forwards;
}
#header .m_nav > ul > li > a span.on .u_line1 {
  left: 0;
  top: -10%;
  height: 120%;
  width:1px;
  -webkit-animation-name: uline01;
  /* -webkit-animation-delay: .5s; */
  -moz-animation-name: uline01;
  /* -moz-animation-delay: .5s; */
  -ms-animation-name: uline01;
  /* -ms-animation-delay: .5s; */
  -o-animation-name: uline01;
  /* -o-animation-delay: .5s; */
}

#header .m_nav > ul > li > a span.on .u_line2 {
    top: 0;
    left: -5%;
  width: 110% !important;
  height:1px !important;
  margin-top: 0;
  -webkit-animation-name: uline02;
  /* -webkit-animation-delay: .5s; */
  -moz-animation-name: uline02;
  /* -moz-animation-delay: .5s; */
  -ms-animation-name: uline02;
  /* -ms-animation-delay: .5s; */
  -o-animation-name: uline02;
  /* -o-animation-delay: .5s; */
}

#header .m_nav > ul > li > a span.on .u_line3 {
    right: 0;
    top: -10%;;
  height: 120%;
  width:1px;
  -webkit-animation-name: uline03;
  /* -webkit-animation-delay: 1s; */
  -o-animation-name: uline03;
  /* -o-animation-delay: 1s; */
  -ms-animation-name: uline03;
  /* -ms-animation-delay: 1s; */
  -moz-animation-name: uline03;
  /* -moz-animation-delay: 1s; */
}

#header .m_nav > ul > li > a span.on .u_line4 {
    bottom: 0;
    right: -5%;
  width: 110%;
  height:1px !important;
  -webkit-animation-name: uline04;
  /* -webkit-animation-delay: 1.5s; */
  -o-animation-name: uline04;
  /* -o-animation-delay:1.5s; */
  -ms-animation-name: uline04;
  /* -ms-animation-delay: 1.5s; */
  -moz-animation-name: uline04;
  /* -moz-animation-delay: 1.5s; */
}



@-webkit-keyframes uline01 {
  0%    { height: 0; background: #7d7d7d; }
  100%  { height: 120%; background: #7d7d7d; }
}

@-webkit-keyframes uline02 {
  0%    { width: 0; background: #7d7d7d; }
  100%  { width: 110%; background: #7d7d7d; }
}

@-webkit-keyframes uline03 {
  0%    { height: 0; background: #7d7d7d; }
  100%  { height: 120%; background: #7d7d7d; }
}

@-webkit-keyframes uline04 {
  0%    { width: 0; background: #7d7d7d; }
  100%  { width: 110%; background: #7d7d7d; }
}

@-mos-keyframes uline01 {
  0%    { height: 0; background: #7d7d7d; }
  100%  { height: 120%; background: #7d7d7d; }
}

@-mos-keyframes uline02 {
  0%    { width: 0; background: #7d7d7d; }
  100%  { width: 110%; background: #7d7d7d; }
}

@-mos-keyframes uline03 {
  0%    { height: 0; background: #7d7d7d; }
  100%  { height: 120%; background: #7d7d7d; }
}

@-mos-keyframes uline04 {
  0%    { width: 0; background: #7d7d7d; }
  100%  { width: 110%; background: #7d7d7d; }
}

@-o-keyframes uline01 {
  0%    { height: 0; background: #7d7d7d; }
  100%  { height: 120%; background: #7d7d7d; }
}

@-o-keyframes uline02 {
  0%    { width: 0; background: #7d7d7d; }
  100%  { width: 110%; background: #7d7d7d; }
}

@-o-keyframes uline03 {
  0%    { height: 0; background: #7d7d7d; }
  100%  { height: 120%; background: #7d7d7d; }
}

@-o-keyframes uline04 {
  0%    { width: 0; background: #7d7d7d; }
  100%  { width: 110%; background: #7d7d7d; }
}

@-ms-keyframes uline01 {
  0%    { height: 0; background: #7d7d7d; }
  100%  { height: 120%; background: #7d7d7d; }
}

@-ms-keyframes uline02 {
  0%    { width: 0; background: #7d7d7d; }
  100%  { width: 110%; background: #7d7d7d; }
}

@-ms-keyframes uline03 {
  0%    { height: 0; background: #7d7d7d; }
  100%  { height: 120%; background: #7d7d7d; }
}

@-ms-keyframes uline04 {
  0%    { width: 0; background: #7d7d7d; }
  100%  { width: 110%; background: #7d7d7d; }
}



#header .m_nav > ul > li > a span.on .y_line1,
#header .m_nav > ul > li > a span.on .y_line2,
#header .m_nav > ul > li > a span.on .y_line3,
#header .m_nav > ul > li > a span.on .y_line4, top {
  position: absolute;
  background: transparent;
  width: 0px;
  height: 0px;
  -webkit-animation-duration: .4s;
  -webkit-animation-iteration-count:1;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-duration: .5s;
  -moz-animation-iteration-count:1;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-fill-mode: forwards;
  -o-animation-duration: .5s;
  -o-animation-iteration-count:1;
  -o-animation-timing-function: ease-in-out;
  -o-animation-fill-mode: forwards;
  -ms-animation-duration: .5s;
  -ms-animation-iteration-count:1;
  -ms-animation-timing-function: ease-in-out;
  -ms-animation-fill-mode: forwards;
}
#header .m_nav > ul > li > a span.on .y_line1 {
  left: 0;
  top: -10%;
  height: 120%;
  width:1px;
  -webkit-animation-name: yline01;
  /* -webkit-animation-delay: .5s; */
  -moz-animation-name: yline01;
  /* -moz-animation-delay: .5s; */
  -ms-animation-name: yline01;
  /* -ms-animation-delay: .5s; */
  -o-animation-name: yline01;
  /* -o-animation-delay: .5s; */
}

#header .m_nav > ul > li > a span.on .y_line2 {
    top: 0;
    left: -5%;
  width: 110% !important;
  height:1px !important;
  margin-top: 0;
  -webkit-animation-name: yline02;
  /* -webkit-animation-delay: .5s; */
  -moz-animation-name: yline02;
  /* -moz-animation-delay: .5s; */
  -ms-animation-name: yline02;
  /* -ms-animation-delay: .5s; */
  -o-animation-name: yline02;
  /* -o-animation-delay: .5s; */
}

#header .m_nav > ul > li > a span.on .y_line3 {
    right: 0;
    top: -10%;;
  height: 120%;
  width:1px;
  -webkit-animation-name: yline03;
  /* -webkit-animation-delay: 1s; */
  -o-animation-name: yline03;
  /* -o-animation-delay: 1s; */
  -ms-animation-name: yline03;
  /* -ms-animation-delay: 1s; */
  -moz-animation-name: yline03;
  /* -moz-animation-delay: 1s; */
}

#header .m_nav > ul > li > a span.on .y_line4 {
    bottom: 0;
    right: -5%;
  width: 110%;
  height:1px !important;
  -webkit-animation-name: yline04;
  /* -webkit-animation-delay: 1.5s; */
  -o-animation-name: yline04;
  /* -o-animation-delay:1.5s; */
  -ms-animation-name: yline04;
  /* -ms-animation-delay: 1.5s; */
  -moz-animation-name: yline04;
  /* -moz-animation-delay: 1.5s; */
}



@-webkit-keyframes yline01 {
  0%    { height: 0; background: #7d7d7d; }
  100%  { height: 120%; background: #7d7d7d; }
}

@-webkit-keyframes yline02 {
  0%    { width: 0; background: #7d7d7d; }
  100%  { width: 110%; background: #7d7d7d; }
}

@-webkit-keyframes yline03 {
  0%    { height: 0; background: #7d7d7d; }
  100%  { height: 120%; background: #7d7d7d; }
}

@-webkit-keyframes yline04 {
  0%    { width: 0; background: #7d7d7d; }
  100%  { width: 110%; background: #7d7d7d; }
}

@-mos-keyframes yline01 {
  0%    { height: 0; background: #7d7d7d; }
  100%  { height: 120%; background: #7d7d7d; }
}

@-mos-keyframes yline02 {
  0%    { width: 0; background: #7d7d7d; }
  100%  { width: 110%; background: #7d7d7d; }
}

@-mos-keyframes yline03 {
  0%    { height: 0; background: #7d7d7d; }
  100%  { height: 120%; background: #7d7d7d; }
}

@-mos-keyframes yline04 {
  0%    { width: 0; background: #7d7d7d; }
  100%  { width: 110%; background: #7d7d7d; }
}

@-o-keyframes yline01 {
  0%    { height: 0; background: #7d7d7d; }
  100%  { height: 120%; background: #7d7d7d; }
}

@-o-keyframes yline02 {
  0%    { width: 0; background: #7d7d7d; }
  100%  { width: 110%; background: #7d7d7d; }
}

@-o-keyframes yline03 {
  0%    { height: 0; background: #7d7d7d; }
  100%  { height: 120%; background: #7d7d7d; }
}

@-o-keyframes yline04 {
  0%    { width: 0; background: #7d7d7d; }
  100%  { width: 110%; background: #7d7d7d; }
}

@-ms-keyframes yline01 {
  0%    { height: 0; background: #7d7d7d; }
  100%  { height: 120%; background: #7d7d7d; }
}

@-ms-keyframes yline02 {
  0%    { width: 0; background: #7d7d7d; }
  100%  { width: 110%; background: #7d7d7d; }
}

@-ms-keyframes yline03 {
  0%    { height: 0; background: #7d7d7d; }
  100%  { height: 120%; background: #7d7d7d; }
}

@-ms-keyframes yline04 {
  0%    { width: 0; background: #7d7d7d; }
  100%  { width: 110%; background: #7d7d7d; }
}





@media (max-width: 1800px){
#header .h_wrap{width: 100%}
}
@media (max-width: 1600px){
  /* 공통 */
  .web{ display: none; }
  #header button.mobile{ display: block;position: fixed;right: 20px;top:15px}



  #header .h_wrap{ height: 70px; }
  #header .m_nav{ display: none; }
  /* #header .black_bg{ height: 100%; } */
    /* #header {position: relative;} */
  #header h1{ top: 20px; left: 20px; }
  #header button{ top: 20px;right:40px}
  #header .black_bg{position: fixed;top:0;width: 80%;height: 100%;display: none;text-align: right; background: rgba(0,0,0,0.9);right: -100%;z-index: 77;transition: 0.5s}
  #header .black_bg.on{right: 0;display: block;}
  #header .m_menu{display: block;}
   #header .m_menu ul{margin-top: 90px;}
   #header .m_menu ul li a{line-height: 28px;display: block;font-size: 14px;color: #efefef;padding: 10px 20px;padding-right: 30px;}
      #header .m_menu ul li ul li a{color: #b7b7b7}
            #header .m_menu ul li ul{display: none}
      #header .m_menu ul li ul{margin-top: 0}
  #header .m_menu ul li a span{color: #777777;}
  .black_bg button{position: fixed;z-index:999;right: 20px;top:20px;}
  #header .m_menu ul li a img{display: block;margin: 0 auto;width: 180px}
}

#footer {background: #000;padding: 50px 0}
#footer img{display: block;margin: 0 auto;margin-bottom: 20px;}
#footer p{font-size: 18px;color: #777777;text-align: center}
#footer span{display: block;font-size: 18px;color: #dadada;text-align: center}
#footer em{display: block;font-size: 13px;color: #4e4d4d;text-align: center;margin-top: 20px;font-style: normal;}
#footer em a{color: inherit;text-decoration: underline}
@media (max-width: 860px){
/* #header{ height: 150px; } */
#header h1{top:5px;}
#header h1 a img{ height: 30px; }
#header button.mobile{ width: 50px;background-size: 60% 60%; }
#top img{width: 20px;}
#footer img{width: 150px}
#footer p{font-size: 12px;word-break: keep-all;}
#footer span{font-size: 12px;word-break: keep-all;}
#footer em{font-size: 10px;}
}