/* reset */
html, body, div, span, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, blockquote, p, address, pre, cite, form, fieldset, input, textarea, select,
table, caption, tbody, tfoot, thead, tr, th, td, abbr, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, article, aside,
canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video, button {
  margin:0;padding:0; -webkit-text-size-adjust:none; vertical-align:baseline; outline:0; word-break:keep-all;
}
body,input,select,textarea,button,a {font-family:'Noto Sans KR','Noto Sans KR','³ª´®°íµñ','Nanum Gothic','¸¼Àº°íµñ','Malgun Gothic', sans-serif; font-size:16px; color:#222; font-weight:400;}
input,select,textarea {-webkit-border-radius:0; -moz-border-radius:0; border-radius:0; -webkit-appearance: none; -moz-appearance: none; appearance: none; background:none; border:0; }
fieldset,li,img{border:0;vertical-align:top;outline:none;}
ul,ol{list-style:none}
button{overflow:visible; border:0; background-color:transparent;cursor:pointer;outline:none; -webkit-appearance: none; -moz-appearance: none; appearance: none;cursor:pointer; }
button:-moz-focus-inner{padding:0;border:0}
address,caption,em{font-style:normal}
a,a:focus,a:active,a:hover{text-decoration:none; outline:none;}
table{border-collapse:collapse;border-spacing:0}
body {line-height:1;}

/* font */
@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 100;
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format('woff'),
       url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 300;
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format('woff'),
       url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype');
}
@font-face {
   font-family: 'Noto Sans KR';
   font-style: normal;
   font-weight: 400;
   src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Sans KR';
   font-style: normal;
   font-weight: 500;
   src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Sans KR';
   font-style: normal;
   font-weight: 700;
   src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Sans KR';
   font-style: normal;
   font-weight: 900;
   src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.otf) format('opentype');
}

/* common */
.none {display:none;}
.fl {float:left !important;}
.fr {float:right !important;}
.tc {text-align:center !important;}
.tl {text-align:left !important;}
.tr {text-align:right !important;}
.mg00 {margin:0 !important;}

/* form */

/* transition */
.btn {
  -webkit-transition:all 0.2s;
  -moz-transition:all 0.2s;
  -ms-transition:all 0.2s;
  -o-transition:all 0.2s;
  transition:all 0.2s;
}

/* icon */
.icon {text-indent:-9999px; display:inline-block; vertical-align:middle;}
.icon_play {background:url(../images/icon_play.png) no-repeat !important; width:15px; height:15px; border:0 !important; background-size:15px !important;}
.icon_stop {background:url(../images/icon_stop.png) no-repeat !important; width:15px; height:15px; border:0 !important; background-size:15px !important;}

/* btn */
.btn_menu {display:block; text-indent:-9999px; width:18px; height:18px; right:-100%; top:50%; margin-top:-9px; position:absolute; opacity:0; z-index:9;}
.btn_menu span {position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; width:18px; height:1px; background:#111;}
.btn_menu .top {top: -13px;}
.btn_menu .middle {top:0;}
.btn_menu .bottom {bottom: -13px;}
.btn_menu.on .top {-webkit-transform: rotateZ(45deg); -moz-transform: rotateZ(45deg); -ms-transform: rotateZ(45deg); -o-transform: rotateZ(45deg); transform: rotateZ(45deg); top: 0;}
.btn_menu.on .middle {-webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg);}
.btn_menu.on .bottom { -webkit-transform: rotateZ(-45deg); -moz-transform: rotateZ(-45deg); -ms-transform: rotateZ(-45deg); -o-transform: rotateZ(-45deg); transform: rotateZ(-45deg); top: -13px;}

.btn_wrap {font-size:0;}
.btn_wrap .btn {margin:0 5px; width:110px; display:inline-block; vertical-align:top;}
.btn_wrap .btn:first-child {margin-left:0 !important;}
.btn_wrap .btn:last-child {margin-right:0 !important;}
.btn {height:42px; line-height:40px; display:block; width:100%; text-align:center; font-size:14px; cursor:pointer;}
.btn.gray {color:white; background:#373737; border:1px solid #373737;}
.btn.gray2 {color:white; background:#bfbfbf; border:1px solid #bfbfbf;}
.btn.border {color:#333; background:white; border:1px solid #ccc;}
a.btn {width:calc(100% - 2px); height:40px; line-height:40px;}


/* header */
header {position:absolute; left:0; top:0; width:100%; background:white; z-index:9; border-bottom:1px solid #cbcbcb;}
.head {max-width:1140px; margin:0 auto; padding:0 20px; font-size:0; position:relative; z-index:2; overflow:hidden;}
.head h1 {width:111px; height:46px; margin:20px 0; display:inline-block;}
.head h1 a {display:block; height:46px; background:url(../images/logo_g.png) no-repeat; text-indent:-9999px;}
.head_line {height:1px; width:100%; background:#cbcbcb; position:absolute; left:0; top:87px; z-index:1; display:none;}

.gnb_wrap {float:right; margin-right:85px;}
.gnb {font-size:0;}
.gnb>li {display:inline-block; padding:0 20px;}
.gnb>li>a {height:87px; line-height:88px; font-size:20px; padding:0 17px; display:block;}
.gnb>li>a span {display:none;}
.gnb ul {display:none; padding:20px 0 0 15px; height:300px;}
.gnb ul li a {font-size:14px; margin-bottom:20px; display:block; line-height:22px; font-weight:300; letter-spacing:-1px;}
.gnb.on ul {display:block;}
.gnb_bg {display:none;}

header.ion {background:none; border:0;}
header.ion .head h1 a {background:url(../images/logo_w.png) no-repeat;}
header.ion .gnb>li>a {color:white;}


/* footer */
#footer {position:relative; border-top:1px solid #777; z-index:3;}
.foot_site {position:absolute;  bottom:100%; height:auto; left:50%; width:calc(1140px - 2px); margin-left:-570px; border:1px solid #c7c7c7; background:#fff; text-align:left; z-index:1; background:white; overflow:hidden; display:none;}

.foot_site ul li {margin:0;padding:0;background:none;font-size:0;line-height:0;}
.foot_site>li {float:left; width:calc(20% - 1px); height:230px; border-left:1px solid #c7c7c7;}
.foot_site>li:first-child {width:20%; border-left:0;}
.foot_site>li>h2 {height:30px; padding:10px 0 0 15px; border-bottom:1px solid #c7c7c7;background:#f1f1f1; color:#373737; font-weight:bold; font-size:14px; line-height:22px;}
.foot_site>li>ul {padding:11px 15px 0 15px;}
.foot_site ul li {margin:5px 0 0;}
.foot_site ul li a {display:block; color:#666;font-size:12px;line-height:18px;vertical-align:top;}
.foot_site ul li a:hover {color:#333; text-decoration:underline;}

.foot_top {border-bottom:1px solid #c7c7c7; position:relative; z-index:2; background:white;}
.foot_top>div {max-width:1140px; padding:0 0 0 20px; margin:0 auto; position:relative;}
.foot_ul {font-size:0; position:relative;}
.foot_ul ul {display:inline-block;}
.foot_ul li {display:inline-block; margin-right:28px; text-align:left;}
.foot_ul li a {color:#373737; font-size:13px; line-height:60px; font-weight:300;}
.foot_ul li a span {font-weight:700;}
.foot_ul .foot_ul_top li:nth-child(3) a {font-weight:700; color:#0086c5;}
.foot_btn {position:absolute;top:0; right:20px; padding:0 20px; height:60px; width:166px; border-left:1px solid #c7c7c7; border-right:1px solid #c7c7c7; text-align:center; text-align:left; background:url(../images/icon_arr_top.png) right 20px center no-repeat;}
.foot_btn.on {background:url(../images/icon_arr_bottom.png) right 20px center no-repeat;}

.foot_bottom {max-width:890px; padding:25px 145px 25px 120px; margin:0 auto; position:relative; position:relative; z-index:2; background:white;}
.foot_logo {position:absolute; left:20px; top:42px;}
.foot_logo2 {position:absolute; right:62px; top:43px;}
.foot_p {color:#373737; font-size:12px; line-height:22px; letter-spacing:-0.7px;}
.foot_p .mo {display:none;}
.foot_p .line {display:inline-block; width:1px; height:14px; background:#ccc; margin:0 10px -3px 10px;}
.foot_p a {color:#373737; font-size:12px; }

/* container */
#container {position:relative; padding-top:87px;}

@media screen and (max-width:1140px)  {

  .gnb_wrap {margin-right:0;}
  .gnb>li {padding:0 10px;}
  .gnb>li>a {font-size:16px; padding:0 8px;}
  .gnb ul {padding:20px 0 0 5px; height:240px;}
  .gnb ul li a {font-size:11px; margin-bottom:15px; line-height:18px;}

  .foot_site {left:20px; width:calc(100% - 42px); margin-left:0; }
  .foot_site ul li a {font-size:11px; line-height:16px; word-break:break-all;}

  .foot_top>div {padding:20px 20px 10px 20px;}
  .foot_ul {text-align:center;}
  .foot_ul li {margin:0 10px; text-align:center; margin-bottom:10px;}
  .foot_ul li a {line-height:14px; font-size:12px;}
  .foot_btn {position:relative; right:0; padding:0 20px; border:1px solid #c7c7c7; margin:0 auto; display:block; height:45px; line-height:45px; margin:10px auto;}

  .foot_bottom {padding:25px 200px 25px 145px;}
  .foot_logo {left:35px;}

}

@media only screen and (min-width: 736px) {
  .btn.gray:hover {background:#666; border:1px solid #666;}
  .btn.gray2:hover {background:#aaa; border:1px solid #aaa;}
  .btn.border:hover {background:#ccc; border:1px solid #ccc;}

  header:hover {box-shadow: 0px 4px 4px 0 rgba(0, 0, 0, 0.15);}
  header:hover .head_line {display:block;}
  .gnb>li:hover>a {color:#b61549 !important; border-bottom:2px solid #b61549; height:85px;}
  .gnb>li.on>a {color:#b61549 !important; }
  .gnb ul li a:hover {text-decoration:underline; color:#b61549;}

  header.ion:hover {background:white;}
  header.ion:hover .gnb>li>a {color:#222;}
  header.ion:hover .head h1 a {background:url(../images/logo_g.png) no-repeat;}


}

@media screen and (max-width: 736px) {






  /* transition */
  .btn_menu, .btn_menu span, .gnb {
    -webkit-transition:all 0.3s;
    -moz-transition:all 0.3s;
    -ms-transition:all 0.3s;
    -o-transition:all 0.3s;
    transition:all 0.3s;
  }

  /* icon */
  .icon_play, .icon_stop  {width:10px; height:10px; border:0 !important; background-size:10px !important;}

  /* btn */
  .btn_menu {right:16px; opacity:1; z-index:3;}
  .btn_menu.on span {background:#111 !important;}

  .btn_wrap {text-align:center;}
  .btn_wrap .btn {margin:0 12px; width:96px;}
  .btn {height:44px; line-height:44px; font-size:14px;}
  a.btn {height:42px; line-height:42px;}

  /* header */
  header {position:fixed; left:0; top:0; width:100%; background:white; z-index:9; }
  .head {padding:0 10px; height:48px; overflow:inherit;;}
  .head h1 {width:60px; height:26px; margin:0; position:fixed; z-index:3; left:16px; top:11px;}
  .head h1 a {height:26px; background-size:60px auto !important;}
  .head_line {display:none !important;}

  .gnb_wrap {float:inherit;}

  .gnb {font-size:0; position:fixed; left:0; top:0; z-index:2; background:white; width:100%; height:100%; padding-top:48px; left:-100%;}
  .gnb>li {display:inline-block; padding:0; width:100%;}
  .gnb>li>a {height:60px; line-height:60px; font-size:16px; padding:0 16px; display:block; text-align:left; border-bottom:1px solid #e5e5e5; position:relative; color:#111 !important; font-weight:500;}
  .gnb>li>a span {display:block; position:absolute; right:16px; top:50%; margin-top:-6px; width:20px; height:12px; background:url(../images/icon_gnb_mo.png) no-repeat center; background-size:20px;}
  .gnb>li:first-child {border-top:1px solid #ccc;}
  .gnb ul {display:block; padding:8px 0; height:auto; border-bottom:1px solid #e5e5e5; display:none; background:#f6f6f6; overflow:hidden;}
  .gnb ul li {width:50%; float:left;}
  .gnb ul li a {font-size:14px; margin-bottom:0; line-height:14px; color:#111 !important; display:block; padding:12px 16px;}
  .gnb.on ul {display:none;}

  .gnb>li.mon>a span {transform:rotate(180deg);}
  .gnb>li.mon ul {display:block;}

  .gnb_bg {z-index:1; position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.7);}
  .gnb.mon {left:0;}

  header.ion .btn_menu span {background:white;}
  .head.mon h1 a {background:url(../images/logo_g.png) no-repeat !important;; background-size:60px auto !important;}

  /* container */
  #container {position:relative; padding-top:48px;}

  .foot_site {left:10px; width:calc(100% - 22px); border-top:0; z-index:2;}
  .foot_site.on {margin-top:0; top:inherit; bottom:100%; height:auto;}
  .foot_site>li {float:inherit;; width:100% !important; height:auto; border:0;}
  .foot_site>li>h2 {height:auto; padding:10px; border-top:1px solid #c7c7c7; font-size:13px; line-height:13px;}
  .foot_site>li>ul {padding:10px 10px 0 10px;}
  .foot_site ul li {display:inline-block; margin:0 10px 10px 0;}
  .foot_site ul li a {font-size:11px; line-height:11px; word-break:break-all;}

  .foot_top>div {padding:0;}
  .foot_ul ul {width:100%;}
  .foot_ul .foot_ul_top {}
  .foot_ul .foot_ul_bottom {width:100%; border-top:1px solid #ccc;}
  .foot_ul .foot_ul_bottom li {width:auto}
  .foot_ul .foot_ul_bottom.row2 {width:calc(100% - 85px); padding-right:85px;}
  .foot_ul li {margin:0; width:auto; padding:0 8px;}
  .foot_ul li a {font-size:10px; height:40px; line-height:40px; text-align:center;}
  .foot_btn {position:absolute; right:0; top:82px; width:85px; padding:0 10px; height:40px; line-height:40px; margin:0; font-size:10px; background-size:8px auto !important; background-position:right 8px center !important; border:0; border-left:1px solid #ccc;}


  .foot_bottom {padding:12px 0 24px 0;}
  .foot_logo {display:none;}
  .foot_logo2 {display:none;}
  .foot_p {font-size:11px; line-height:22px; text-align:center;}
  .foot_p .mo {display:inline-block;}
  .foot_p .line {height:11px; background:#ccc; margin:0 6px -2px 6px;}
  .foot_p .line.mo {display:none;}
  .foot_p a {color:#373737; font-size:11px; }

}