@charset "UTF-8";
/*
date:2017-07-17
title: 희망컨설팅
type: responsive[full]
author: banghg
*/
/* @import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css); */
@import url(ui/animations.css);
@import url(ui/mCustomScrollbar.css);
@import url(ui/jquery.fullPage.css);
@import url(ui/magnific-popup.css);
@import url(ui/slick.css);
@import url(ui/slick-theme.css);
@import url(http://cdn.jsdelivr.net/xeicon/2.2.0/xeicon.min.css);
@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"); }

._mc { color: #00aeef; }

.ellipsis { display: block; word-wrap: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.transcenter, .main-visual-txt { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

/* _basic.scss*/
body { font-size: 15px; width: 100%; color: #555; overflow-y: auto; line-height: 1.7; -webkit-text-size-adjust: none; font-weight: 400; }

@media only screen and (max-width: 640px) { body { font-size: 13px; } }

::selection { background: #d2d1ba; color: #777; text-shadow: none; }

/*setting*/
a { color: #555; text-decoration: none; transition: color, background 0.2s linear; }

a:hover, a:focus { text-decoration: none !important; }

html, body, div, span, input, select, textarea, button, applet, object, iframe, p, blockquote, pre, a, abbr, acronym, address, big, code, del, dfn, em, font, img, ins, kbd, q, s, samp, strike, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, header, section, footer { border: 0; margin: 0; padding: 0; }

address { font-style: normal; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display: block; }

div, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, p, form, fieldset, input, table, tr, th, td, button, textarea, select { margin: 0; padding: 0; }

h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }

img { border: 0; vertical-align: top; max-width: 100%; }

ul, ol, dl, dt, dd, li { list-style: none; }

table, th, td { border-spacing: 0; font-weight: normal; }

th, td { border-collapse: collapse; }

fieldset, blockquote, iframe, button { border: none; }

i, em, u, cite { font-style: normal; }

strong, em, b { font-weight: normal; }

img, fieldset { border: 0; outline: none; }

input, button { outline: none; }

.clearfix:before, .row_0:before, .row_5:before, .row_10:before, .exp_top:before, .exp_bot:before, .clearfix:after, .row_0:after, .row_5:after, .row_10:after, .exp_top:after, .exp_bot:after { content: " "; display: table; }

.clearfix:after, .row_0:after, .row_5:after, .row_10:after, .exp_top:after, .exp_bot:after { clear: both; }

.hidden { position: absolute; overflow: hidden; visibility: hidden; width: 0; height: 0; margin: 0; padding: 0; font-size: 0; line-height: 0; background: none; }

/* 바로가기 */
ul.skip li a { text-indent: -9999px; font-size: 0; height: 0; position: absolute; top: 0; }

ul.skip li a:focus { text-indent: 0; font-size: 14px; width: 100%; min-width: 1250px; height: 30px; background-color: #0c3874; color: #fff; text-align: center; padding-top: 10px; z-index: 999; }

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

option, label, textarea { margin: 0; }

option { border: solid 1px #ccc; background-color: #fff; text-indent: 7px; }

label { font-weight: normal; vertical-align: middle; }

textarea { border: solid 1px #ccc; background-color: #fff; overflow: auto; min-height: 200px; width: 80%; -webkit-appearance: none; -webkit-border-radius: 0; resize: none; }

textarea.txtarea { width: 100%; box-sizing: border-box; }

textarea.text-area-01 { width: 100%; padding: 8px; height: 150px; border: solid 1px #ddd; overflow-y: auto; }

button { margin: 0; padding: 0; vertical-align: middle; background: transparent; }

button, input[type="submit"], input[type="button"], input[type="reset"] { cursor: pointer; -webkit-appearance: none; }

section, nav, article, aside, header, footer, main { display: block; }

input[type="date"]::-webkit-calendar-picker-indicator, input[type="date"]::-webkit-inner-spin-button { display: none; }

::-webkit-input-placeholder { color: #aaa; }

::-moz-placeholder { color: #aaa; }

:-ms-input-placeholder { color: #aaa; }

:-moz-placeholder { color: #aaa; }

::-ms-clear, ::-ms-reveal { display: none; }

select, textarea, button { font: inherit; -webkit-appearance: none; border-radius: 0; }

input, select, textarea { padding: 0 5px; }

/*input*/
input { font: inherit; margin: 0; line-height: normal; -webkit-border-radius: 0; resize: none; }

input[type="text"], input[type="search"], input[type="tel"], input[type="number"], input[type="password"] { -webkit-appearance: none; border-radius: 0; }

input[type="file"] { width: 100%; padding: 0; line-height: normal; }

input[type="checkbox"] { padding: 0; }

input[type="radio"] { width: 14px; padding: 0; vertical-align: middle; margin-right: 5px; }

input[type="image"] { border: none; background: 0; }

input[type="submit"] { width: 260px; border: 1px solid #ccc; font-size: 1em; line-height: 1.5; color: #666; }

input[type="text"], input[type="file"], input[type="password"] { height: 35px; line-height: 35px; margin: 0; vertical-align: middle; border: solid 1px #ccc; resize: none; appearance: none; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; -webkit-border-radius: 0; border-radius: 0; text-overflow: ''; zoom: 1; }

input[placeholder] { font-family: inherit; }

/*select*/
select { height: 35px; line-height: 35px; margin: 0; vertical-align: middle; border: solid 1px #ccc; resize: none; appearance: none; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; -webkit-border-radius: 0; border-radius: 0; text-overflow: ''; zoom: 1; width: 100%; background: #ffffff url(../images/icon/select_down.png) no-repeat center right 5px; }

select::-ms-expand { display: none; }

.lt-ie10 select { font-family: inherit; background: none; padding: 0; }

.lt-ie9 select { font-family: inherit; background: none; padding: 6px; }

/*margin*/
.mt_0 { margin-top: 0 !important; }

.ml_0 { margin-left: 0 !important; }

.mr_0 { margin-right: 0 !important; }

.mb_0 { margin-bottom: 0 !important; }

.mt_05 { margin-top: 5px !important; }

.ml_05 { margin-left: 5px !important; }

.mr_05 { margin-right: 5px !important; }

.mb_05 { margin-bottom: 5px !important; }

.mt_06 { margin-top: 6px !important; }

.ml_06 { margin-left: 6px !important; }

.mr_06 { margin-right: 6px !important; }

.mb_06 { margin-bottom: 6px !important; }

.mt_07 { margin-top: 7px !important; }

.ml_07 { margin-left: 7px !important; }

.mr_07 { margin-right: 7px !important; }

.mb_07 { margin-bottom: 7px !important; }

.mt_08 { margin-top: 8px !important; }

.ml_08 { margin-left: 8px !important; }

.mr_08 { margin-right: 8px !important; }

.mb_08 { margin-bottom: 8px !important; }

.mt_09 { margin-top: 9px !important; }

.ml_09 { margin-left: 9px !important; }

.mr_09 { margin-right: 9px !important; }

.mb_09 { margin-bottom: 9px !important; }

.mt_10 { margin-top: 10px !important; }

.ml_10 { margin-left: 10px !important; }

.mr_10 { margin-right: 10px !important; }

.mb_10 { margin-bottom: 10px !important; }

.mt_20 { margin-top: 20px !important; }

.ml_20 { margin-left: 20px !important; }

.mr_20 { margin-right: 20px !important; }

.mb_20 { margin-bottom: 20px !important; }

.mt_30 { margin-top: 30px !important; }

.ml_30 { margin-left: 30px !important; }

.mr_30 { margin-right: 30px !important; }

.mb_30 { margin-bottom: 30px !important; }

.mt_40 { margin-top: 40px !important; }

.ml_40 { margin-left: 40px !important; }

.mr_40 { margin-right: 40px !important; }

.mb_40 { margin-bottom: 40px !important; }

.mt_50 { margin-top: 50px !important; }

.ml_50 { margin-left: 50px !important; }

.mr_50 { margin-right: 50px !important; }

.mb_50 { margin-bottom: 50px !important; }

.mt_60 { margin-top: 60px !important; }

.ml_60 { margin-left: 60px !important; }

.mr_60 { margin-right: 60px !important; }

.mb_60 { margin-bottom: 60px !important; }

.mt_70 { margin-top: 70px !important; }

.ml_70 { margin-left: 70px !important; }

.mr_70 { margin-right: 70px !important; }

.mb_70 { margin-bottom: 70px !important; }

.mt_80 { margin-top: 80px !important; }

.ml_80 { margin-left: 80px !important; }

.mr_80 { margin-right: 80px !important; }

.mb_80 { margin-bottom: 80px !important; }

.mt_90 { margin-top: 90px !important; }

.ml_90 { margin-left: 90px !important; }

.mr_90 { margin-right: 90px !important; }

.mb_90 { margin-bottom: 90px !important; }

.mt_100 { margin-top: 100px !important; }

.ml_100 { margin-left: 100px !important; }

.mr_100 { margin-right: 100px !important; }

.mb_100 { margin-bottom: 100px !important; }

.font_8 { font-size: 8px; }

.font_9 { font-size: 9px; }

.font_10 { font-size: 10px; }

.font_11 { font-size: 11px; }

.font_12 { font-size: 12px; }

.font_13 { font-size: 13px; }

.font_14 { font-size: 14px; }

.font_15 { font-size: 15px; }

.font_16 { font-size: 16px; }

.font_17 { font-size: 17px; }

.font_18 { font-size: 18px; }

._r { color: #da2127; }

._b0 { color: #000; }

._b1 { color: #111111; }

._b2 { color: #222222; }

._b3 { color: #333333; }

._b4 { color: #444444; }

._b5 { color: #555555; }

._b6 { color: #666666; }

._b7 { color: #777777; }

._b8 { color: #888888; }

._b9 { color: #999999; }

.lighter { font-weight: 200; }

.bold { font-weight: bold; }

.bolder { font-weight: bolder; }

.bt_no { border-top: none !important; }

.bb_no { border-bottom: none !important; }

.text_center { text-align: center; }

.text_left { text-align: left; }

.text_right { text-align: right; }

.text_line { text-decoration: underline !important; }

.text_line_th { text-decoration: line-through !important; }

.line_10 { line-height: 1; }

.line_12 { line-height: 1.2; }

.line_14 { line-height: 1.4; }

.line_15 { line-height: 1.5; }

.left { float: left; }

.right { float: right; }

.ver_middle { vertical-align: middle; }

.ver_top { vertical-align: top; }

.posi_a { position: absolute; }

.posi_r { position: relative; }

.dis_inline { display: inline; }

.dis_block { display: block; }

.dis_inblock { display: inline-block; }

.dis_tbl { display: table; width: 100%; }

.dis_cel { display: table-cell; vertical-align: middle; padding: 0 5px; }

.root_daum_roughmap { width: 100% !important; }

/* _font.scss*/
body { font-family: 'Noto Sans KR'; }

/*나눔바른고딕 Nanum Barun Gothic */
@font-face { font-family: 'Nanum Barun Gothic'; font-style: normal; font-weight: 700; src: url("//cdn.jsdelivr.net/font-nanum/1.0/nanumbarungothic/v1/NanumBarunGothic-Bold.eot"); src: url("//cdn.jsdelivr.net/font-nanum/1.0/nanumbarungothic/v1/NanumBarunGothic-Bold.eot?#iefix") format("embedded-opentype"), url("//cdn.jsdelivr.net/font-nanum/1.0/nanumbarungothic/v1/NanumBarunGothic-Bold.woff") format("woff"), url("//cdn.jsdelivr.net/font-nanum/1.0/nanumbarungothic/v1/NanumBarunGothic-Bold.ttf") format("truetype"); }

@font-face { font-family: 'Nanum Barun Gothic'; font-style: normal; font-weight: 400; src: url("//cdn.jsdelivr.net/font-nanum/1.0/nanumbarungothic/v1/NanumBarunGothic-Regular.eot"); src: url("//cdn.jsdelivr.net/font-nanum/1.0/nanumbarungothic/v1/NanumBarunGothic-Regular.eot?#iefix") format("embedded-opentype"), url("//cdn.jsdelivr.net/font-nanum/1.0/nanumbarungothic/v1/NanumBarunGothic-Regular.woff") format("woff"), url("//cdn.jsdelivr.net/font-nanum/1.0/nanumbarungothic/v1/NanumBarunGothic-Regular.ttf") format("truetype"); }

.nanum_bg { font-family: "Nanum Barun Gothic"; }

.noto { font-family: 'Noto Sans KR'; }

/*
_table.scss
*/
table thead th { border-top: 0 !important; }

/*페이징*/
.paging-area { position: relative; margin-top: 40px; }

.paging-area ul { margin: 0; padding: 0; list-style: none; text-align: center; }

.paging-area ul li { display: inline; margin-left: 2px; padding: 0; }

.paging-area ul li a { display: inline-block; width: 35px; height: 35px; line-height: 35px; font-size: 14px; color: #666; background-color: #fff; background-repeat: no-repeat; background-position: 0 0; background-image: url("../images/paging/paging.png"); }

.paging-area ul li a:hover, .paging-area ul li a.active { background-color: #fff; background-image: none; color: #00aeef; text-decoration: none; box-shadow: inset 0 0 0 1px #00aeef; }

.paging-area ul li a.prev-first { background-image: url("../images/paging/prev-first.png"); }

.paging-area ul li a.prev { background-image: url("../images/paging/prev.png"); }

.paging-area ul li a.next-last { background-image: url("../images/paging/next-last.png"); }

.paging-area ul li a.next { background-image: url("../images/paging/next.png"); }

.paging-area ul li a span { display: inline-block; text-indent: -9999px; }

.btn-wrap { margin-top: 40px; }

.ul_list li:before { content: "· "; }

/*_grid.scss*/
.row { margin-right: -15px; margin-left: -15px; /* For IE 6/7 */ zoom: 1; }

.row:before, .row:after { content: ""; display: table; }

.row:after { clear: both; }

*[class^="col-"] { padding-right: 15px; padding-left: 15px; position: relative; min-height: 1px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; float: left; }

.row_0 { zoom: 1; margin-right: -0px; margin-left: -0px; }

.row_0 > li, .row_0 > div, .row_0 > form, .row_0 *[class^="col-"] { padding-right: 0px; padding-left: 0px; }

.row_5 { zoom: 1; margin-right: -5px; margin-left: -5px; }

.row_5 > li, .row_5 > div, .row_5 > form, .row_5 *[class^="col-"] { padding-right: 5px; padding-left: 5px; }

.row_10 { zoom: 1; margin-right: -10px; margin-left: -10px; }

.row_10 > li, .row_10 > div, .row_10 > form, .row_10 *[class^="col-"] { padding-right: 10px; padding-left: 10px; }

.col-lg-1 { width: 8.33333%; }

.col-lg-2 { width: 16.66667%; }

.col-lg-3 { width: 25%; }

.col-lg-4 { width: 33.33333%; }

.col-lg-5 { width: 41.66667%; }

.col-lg-6 { width: 50%; }

.col-lg-7 { width: 58.33333%; }

.col-lg-8 { width: 66.66667%; }

.col-lg-9 { width: 75%; }

.col-lg-10 { width: 83.33333%; }

.col-lg-11 { width: 91.66667%; }

.col-lg-12 { width: 100%; }

@media only screen and (max-width: 1199px) { .col-sl-1 { width: 8.33333%; }
  .col-sl-2 { width: 16.66667%; }
  .col-sl-3 { width: 25%; }
  .col-sl-4 { width: 33.33333%; }
  .col-sl-5 { width: 41.66667%; }
  .col-sl-6 { width: 50%; }
  .col-sl-7 { width: 58.33333%; }
  .col-sl-8 { width: 66.66667%; }
  .col-sl-9 { width: 75%; }
  .col-sl-10 { width: 83.33333%; }
  .col-sl-11 { width: 91.66667%; }
  .col-sl-12 { width: 100%; } }

@media only screen and (max-width: 920px) { .col-tab-1 { width: 8.33333%; }
  .col-tab-2 { width: 16.66667%; }
  .col-tab-3 { width: 25%; }
  .col-tab-4 { width: 33.33333%; }
  .col-tab-5 { width: 41.66667%; }
  .col-tab-6 { width: 50%; }
  .col-tab-7 { width: 58.33333%; }
  .col-tab-8 { width: 66.66667%; }
  .col-tab-9 { width: 75%; }
  .col-tab-10 { width: 83.33333%; }
  .col-tab-11 { width: 91.66667%; }
  .col-tab-12 { width: 100%; } }

@media only screen and (max-width: 640px) { .col-xs-1 { width: 8.33333%; }
  .col-xs-2 { width: 16.66667%; }
  .col-xs-3 { width: 25%; }
  .col-xs-4 { width: 33.33333%; }
  .col-xs-5 { width: 41.66667%; }
  .col-xs-6 { width: 50%; }
  .col-xs-7 { width: 58.33333%; }
  .col-xs-8 { width: 66.66667%; }
  .col-xs-9 { width: 75%; }
  .col-xs-10 { width: 83.33333%; }
  .col-xs-11 { width: 91.66667%; }
  .col-xs-12 { width: 100%; } }

@media only screen and (max-width: 480px) { .col-xxs-1 { width: 8.33333%; }
  .col-xxs-2 { width: 16.66667%; }
  .col-xxs-3 { width: 25%; }
  .col-xxs-4 { width: 33.33333%; }
  .col-xxs-5 { width: 41.66667%; }
  .col-xxs-6 { width: 50%; }
  .col-xxs-7 { width: 58.33333%; }
  .col-xxs-8 { width: 66.66667%; }
  .col-xxs-9 { width: 75%; }
  .col-xxs-10 { width: 83.33333%; }
  .col-xxs-11 { width: 91.66667%; }
  .col-xxs-12 { width: 100%; } }

/*
_ui.SCSS
*/
i.br, i.pc, i.pc_o, img.pc { display: block; }

i.mo, img.mo { display: none; }

@media only screen and (max-width: 640px) { i.mo, img.mo { display: block; } }

@media only screen and (max-width: 1199px) { i.pc_o { display: none; } }

@media only screen and (max-width: 640px) { i.pc, img.pc { display: none; }
  img.mo { display: block; } }

/*slide dont show all slides before initialized*/
.slick { visibility: hidden; }

.slick-initialized { visibility: visible !important; }

.bxslider { visibility: hidden; }

.bxslider[style="width: auto; position: relative;"] { visibility: visible; }

/* scrollbox*/
/*modal*/
.modal-footer .check-area { float: left; }

.modal-open { padding-right: 0 !important; }

.modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1040; display: none; overflow: hidden; -webkit-overflow-scrolling: touch; outline: 0; }

.modal_standard { position: fixed; left: 0; top: 0; display: table; height: 100%; width: 100%; overflow: hidden; text-align: center; }

.modal-dialog { margin: 0 auto; width: 100%; }

.modal_wrap { display: table-cell; vertical-align: middle; position: static; top: 50%; }

.modal_con { min-height: 50px; }

.modal .close { z-index: 100; position: absolute; top: 10px; right: 10px; float: right; /* font-size: 35px; */ line-height: 1; color: #000; text-shadow: 0 1px 0 #fff; filter: alpha(opacity=20); opacity: .5; }

.modal .close:hover, .modal .close:focus { color: #000; text-decoration: none; cursor: pointer; filter: alpha(opacity=50); opacity: .8; }

.modal button.close { -webkit-appearance: none; padding: 0; cursor: pointer; background: transparent; border: 0; }

.modal.fade .modal-dialog { -webkit-transform: translate(0, -15%); -ms-transform: translate(0, -15%); -o-transform: translate(0, -15%); transform: translate(0, -15%); -webkit-transition: -webkit-transform 0.3s ease-out; -o-transition: -o-transform 0.3s ease-out; transition: transform 0.3s ease-out; }

.modal.in .modal-dialog { -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); }

.modal-open { overflow-x: hidden; }

.modal-open .modal { overflow-x: hidden; overflow-y: auto; }

.modal-content { display: inline-block; margin: 0 auto; position: relative; background-color: #fff; -webkit-background-clip: padding-box; background-clip: padding-box; border: 1px solid #999; border: 1px solid rgba(0, 0, 0, 0.2); outline: 0; -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); }

.modal-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: #000; opacity: .5; z-index: 1000; }

.modal-backdrop.fade { filter: alpha(opacity=0); opacity: 0; }

.modal-backdrop.in { filter: alpha(opacity=50); opacity: .5; }

.modal-header { min-height: 50px; line-height: 50px; }

.modal-title { margin: 0; line-height: 1.42857143; }

.modal-body { position: relative; padding: 0 20px 20px; }

.modal-body .inner { padding-top: 20px; }

.modal-footer { padding: 15px; text-align: right; border-top: 1px solid #e5e5e5; }

.modal-footer .btn + .btn { margin-bottom: 0; margin-left: 5px; }

.modal-footer .btn-group .btn + .btn { margin-left: -1px; }

.modal-footer .btn-block + .btn-block { margin-left: 0; }

.modal-scrollbar-measure { position: absolute; top: -9999px; width: 50px; height: 50px; overflow: scroll; }

.pop-main-title { font-size: 26px; color: #333; font-weight: 500; }

@media only screen and (max-width: 798px) { .modal-dialog { margin: 0 auto; display: inline-block; }
  .modal-content { -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); }
  .modal-sm { width: 300px; } }

@media only screen and (max-width: 798px) and (max-width: 640px) { .modal-dialog, .modal-content { width: 96% !important; }
  .modal-header { padding: 10px; min-height: 20px; line-height: 20px; }
  .modal .pop-main-title { font-size: 16px; }
  .modal-body { padding: 0 10px 10px; }
  .modal .close { width: 20px; } }

.arrow_01 .slick-prev, .arrow_01 .slick-next { width: 14px; height: 22px; opacity: 0.8; background-image: url(../images/slider/arrow_1.png); background-repeat: no-repeat; background-position: left; }

.arrow_01 .slick-prev { background-position-x: 0; }

.arrow_01 .slick-prev:hover { opacity: 1; }

.arrow_01 .slick-next { background-position-x: 100%; }

.arrow_01 .slick-next:hover { opacity: 1; }

.lt-ie9 .arrow_01 .slick-prev, .lt-ie9 .slick-next { margin-top: -11px; }

.arrow_02 .slick-prev, .arrow_02 .slick-next { width: 56px; height: 14px; opacity: 0.8; background-image: url(../images/slider/arrow_02.png); background-repeat: no-repeat; background-position: left; }

.arrow_02 .slick-prev { background-position-y: 0; }

.arrow_02 .slick-prev:hover { opacity: 1; }

.arrow_02 .slick-next { background-position-y: 100%; }

.arrow_02 .slick-next:hover { opacity: 1; }

.lt-ie9 .arrow_01 .slick-prev, .lt-ie9 .slick-next { margin-top: -7px; }

@media only screen and (max-width: 640px) { .arrow_02 .slick-prev, .arrow_02 .slick-next { width: 28px; height: 7px; background-size: 7px; }
  .lt-ie9 .arrow_01 .slick-prev, .lt-ie9 .slick-next { margin-top: -7px; } }

/* 
_layout.SCSS
*/
body { overflow-x: hidden; width: 100%; }

.wrapper { width: 100%; min-width: 320px; max-width: 1200px; position: relative; margin: 0 auto; }

@media only screen and (max-width: 920px) { .wrapper { padding: 0 15px; box-sizing: border-box; } }

.wrapper2 { max-width: 920px; margin: 0 auto; position: relative; width: 100%; min-width: 320px; }

@media only screen and (max-width: 920px) { .wrapper2 { padding: 0 15px; } }

.con-margin-01 { margin-top: 30px; }

@media only screen and (max-width: 640px) { .con-margin-01 { margin-top: 20px; } }

.con-margin-02 { margin-top: 70px; }

@media only screen and (max-width: 640px) { .con-margin-02 { margin-top: 40px; } }

/*
main.scss
*/
.section { text-align: center; }

.section01 { position: relative; }

.section02 ._top, .section02 ._bot { height: 50%; padding: 50px 0 0; text-align: center; }

.section02 ._top h3 { margin-bottom: 50px; }

.section02 ._top .row { margin: 0 auto; }

.section02 ._top img { margin: 0 auto; }

.section02 ._top p { display: block; font-size: 22px; color: #333; line-height: 1.3; letter-spacing: -1px; }

.section02 ._bot { background: url(../images/exp_bg.jpg) no-repeat; background-position: center center; background-size: cover; }

@media only screen and (max-width: 640px) { .section02 ._top p { font-size: 15px; }
  .section02 ._top img { width: 75px; } }

.section03 { text-align: center; background-color: #f2f2f2; }

.section03 h3.tit_02 { margin-bottom: 0; }

.section04 .wrapper2 > .wowrap { padding-bottom: 160px; }

.section04 .catch { position: absolute; background-color: #f8bd00; padding: 40px 0; width: 100%; bottom: 0; }

@media only screen and (max-width: 640px) { .section04 .catch { padding: 20px 0; } }

.slick_client { margin: 40px auto; width: 100%; }

.slick_client li img { margin: 0 auto; padding: 0 5px; }

.slick_client .slick-dots { bottom: -20px; }

.slick_client .slick-dots li { width: 6px; height: 6px; margin: 0 3px; }

.slick_client .slick-dots li button { width: 6px; height: 6px; padding: 3px; }

.slick_client .slick-dots li button:before { width: 6px; height: 6px; }

.slick_client .slick-next { right: -20px; }

.slick_client .slick-prev { left: -20px; }

@media only screen and (max-width: 920px) { .section04 .slick_client { padding: 0 20px; } }

@media only screen and (max-width: 640px) { .section04 .wrapper2 > .wowrap { padding-bottom: 70px; } }

.section05 ._top, .section05 ._bot { height: 50%; vertical-align: middle; padding: 30px 0 0; }

.section05 ._top { text-align: left; }

.section05 ._top h3.tit_01 { margin-bottom: 0; }

.section05 ._top .txt p { color: #333; padding-top: 30px; }

.section05 ._top .txt p:before { margin-bottom: 30px; content: ""; width: 50px; height: 1px; display: block; background: #000; }

.section05 ._top .card .wrap { width: 100%; border: 10px solid #009ee8; padding: 20px; background-color: #fff; background-image: url(../images/logo.jpg); background-repeat: no-repeat; background-position: top right; background-position: top 20px right 20px; }

.section05 ._top .card_img, .section05 ._top .card_txt { display: table-cell; }

.section05 ._top .card_txt { padding-left: 20px; vertical-align: bottom; color: #000; font-size: 18px; line-height: 1.4; }

.section05 ._top .card_txt .name { font-weight: bold; margin-bottom: 20px; }

.section05 ._top .card_txt .name_k { font-size: 24px; }

.section05 ._top .card_txt .name_e { font-size: 13px; margin-left: 5px; }

.section05 ._top .card_txt .name .title { display: block; }

@media only screen and (max-width: 920px) { .section05 ._top { text-align: center; }
  .section05 ._top .txt p { padding-top: 15px; }
  .section05 ._top .txt p:before { width: 30px; margin: 0 auto 15px; }
  .section05 ._top .card .wrap { max-width: 500px; text-align: left; margin: 20px auto 0; padding: 10px; background-size: 95px; }
  .section05 ._top .card_txt { padding-left: 10px; font-size: 15px; }
  .section05 ._top .card_txt .name { margin-bottom: 10px; }
  .section05 ._top .card_txt .name_k { font-size: 17px; }
  .section05 ._top .card_txt .name .title { display: block; } }

@media only screen and (max-width: 640px) { .section05 ._top .card .wrap { border-width: 5px; background-position: top 5px right 5px; }
  .section05 ._top .card_img { width: 40%; }
  .section05 ._top .card_txt .name_e { display: block; margin-left: 0; } }

.section05 ._bot { background: url(../images/interview_bg.jpg) no-repeat; background-position: center; background-size: cover; }

@media only screen and (max-width: 640px) { .section05 ._bot { background: url(../images/interview_bg_mo.jpg) no-repeat; background-position: center; background-size: cover; } }

.section06 .cs { margin-top: -50px; padding: 50px 0; background: url(../images/cs_bg.jpg) no-repeat; background-size: cover; background-position: center center; }

.section06 .cs h3.tit_01 { margin-bottom: 0; }

@media only screen and (max-width: 920px) { .section06 .cs { margin-top: 0; } }

.foot, .warning { text-align: center; width: 100%; font-size: 14px; font-weight: 200; padding: 20px 0; line-height: 1.3; }

@media only screen and (max-width: 640px) { .foot, .warning { font-size: 12px; padding: 10px 0; } }

.foot { background: #383838; color: #fff; }

.warning { background: #000000; color: #f9be00; }

.main-visual { height: 100%; min-height: 100%; }

.main-visual .slick { height: 100%; }

.main-visual .slick-list, .main-visual .slick-track { height: 100%; }

.main-visual .slid { width: 100%; height: 100%; background-position: center top; background-size: cover; }

.main-visual .slick-dots { bottom: 50%; margin-bottom: -180px; }

.main-visual .slick-dots li.slick-active button:before { background-color: #00aeef; opacity: 1; }

.main-visual .slick-dots li button { background-color: #f8bd00; }

.main-visual-txt { z-index: 1000; text-align: center; width: 100%; }

.main-visual-txt img { width: 500px; margin: 0 auto; }

.main-visual-txt div { margin-top: 20px; height: 60px; }

.main-visual-txt h3.tit_01 { color: #fff; margin-bottom: 0; }

@media only screen and (max-width: 920px) { .main-visual { height: 500px; }
  .main-visual-txt img { padding: 0 50px; } }

@media only screen and (max-width: 640px) { .main-visual { height: 300px; }
  .main-visual-txt h3.tit_01 { font-size: 15px; }
  .main-visual .slick-dots { margin-bottom: -130px; } }

.exp { -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; max-width: 920px; width: 100%; background-color: #fff; margin: 0 auto 0; display: inline-block; overflow: hidden; font-size: 16px; letter-spacing: -0.5px; line-height: 1.3; color: #333; }

.exp_top, .exp_bot { height: 230px; position: relative; padding: 40px 20px; float: left; }

.exp_top { background-color: #f8bd00; width: 260px; }

.exp_top img { width: 70px; }

.exp_top p { color: #333; margin-top: 3px; }

.exp_top p._b0 { color: #fff; }

.exp_top i { position: absolute; top: 50%; color: #f8bd00; right: -20px; margin-top: -15px; font-size: 2em; z-index: 2; }

.exp_bot { width: 660px; background-color: #fff; }

.exp_bot .wrap { display: table; width: 100%; height: 100%; }

.exp_bot_l, .exp_bot_r { display: table-cell; vertical-align: middle; }

.exp_bot_l { padding: 10px; font-size: 22px; color: #000; }

.exp_bot_l span { display: block; }

.exp_bot_r { text-align: left; }

.exp_bot_r ul { padding-left: 20px; border-left: 1px solid #ddd; }

@media only screen and (max-width: 920px) { .exp { margin-top: 20px; overflow: visible; }
  .exp_top, .exp_bot { height: inherit; padding: 20px; float: none; width: 100%; }
  .exp_top { -webkit-border-radius: 20px 20px 0 0; -moz-border-radius: 20px 20px 0 0; -ms-border-radius: 20px 20px 0 0; -o-border-radius: 20px 20px 0 0; border-radius: 20px 20px 0 0; padding: 30px 20px 20px; }
  .exp_top img { position: absolute; width: 50px; top: -25px; left: 50%; margin-left: -25px; }
  .exp_top i { top: 100%; right: 50%; margin-top: -10px; margin-right: -15px; filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); }
  .exp_top p._b0 { color: #000; }
  .exp_bot { -webkit-border-radius: 0 0 20px 20px; -moz-border-radius: 0 0 20px 20px; -ms-border-radius: 0 0 20px 20px; -o-border-radius: 0 0 20px 20px; border-radius: 0 0 20px 20px; }
  .exp_bot .wrap { display: block; }
  .exp_bot_l, .exp_bot_r { display: block; }
  .exp_bot_l { font-size: 16px; padding: 0 0 10px; }
  .exp_bot_r ul { padding-left: 0; border-left: 0; } }

@media only screen and (max-width: 640px) { .exp { font-size: 14px; } }

.graph_tit { background-color: #1ea4ee; color: #fff; height: 50px; line-height: 50px; font-size: 18px; -webkit-border-radius: 50px; -moz-border-radius: 50px; -ms-border-radius: 50px; -o-border-radius: 50px; border-radius: 50px; padding: 0 20px; display: inline-block; letter-spacing: -0.5px; font-weight: 300; }

.graph_list { margin: 20px auto 0; max-width: 920px; width: 100%; border-bottom: 1px solid #ddd; }

.graph_list li { float: left; width: 20%; }

.graph_list li img { margin: 0 auto; }

.graph_i { margin: 60px auto 0; max-width: 920px; width: 100%; }

.graph_i li { float: left; width: 25%; }

.graph_i li img { margin: 0 auto; }

.graph_i li p { margin-top: 20px; color: #333; }

@media only screen and (max-width: 640px) { .graph_tit { height: 40px; line-height: 40px; -webkit-border-radius: 40px; -moz-border-radius: 40px; -ms-border-radius: 40px; -o-border-radius: 40px; border-radius: 40px; font-size: 15px; }
  .graph_i { margin: 30px auto 0; }
  .graph_i li img { width: 36px; }
  .graph_i li p { margin-top: 10px; } }

@media all and (max-width: 400px) { .graph_i li { font-size: 11px; letter-spacing: -1px; } }

.interview { text-align: left; }

.interview_item .wrap { background: #fff; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; padding: 30px; }

.interview_item .wrap .title { margin-bottom: 10px; background: url(../images/mic_i.png) no-repeat; background-position: top left; background-size: 100px; min-height: 100px; padding-left: 120px; font-size: 14px; }

.interview_item .wrap .title .name { color: #000; font-size: 26px; }

.interview_item .wrap .title .des { margin-top: 10px; }

.interview_item .wrap .txt { color: #999; font-size: 14px; height: 60px; line-height: 20px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

@media only screen and (max-width: 920px) { .interview_item .wrap { padding: 20px; }
  .interview_item .wrap .title { padding-left: 0; background-size: 50px; padding-top: 50px; background-position: top center; margin-top: -45px; }
  .interview_item .wrap .title .name { text-align: center; }
  .interview_item .wrap .title .des { margin-top: 0; } }

@media only screen and (max-width: 640px) { .interview { text-align: center; }
  .interview_item { margin: 20px auto; }
  .interview_item .wrap .title { min-height: inherit; font-size: inherit; }
  .interview_item .wrap .title .name { font-size: 17px; }
  .interview_item .wrap .title .des { height: inherit; line-height: 1.4; overflow: visible; text-overflow: inherit; display: inherit; -webkit-line-clamp: inherit; }
  .interview_item .wrap .txt { font-size: 13px; height: 34px; line-height: 17px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } }

.interview-page { padding-bottom: 50px; text-align: center; padding-top: 200px; }

.interview-page .interview_item { margin-bottom: 20px; }

.interview-page .interview_item .wrap { box-shadow: 0px 3px 8px 0 #ddd; }

@media only screen and (max-width: 920px) { .interview-page { padding-top: 50px; } }

.interview-pop { width: 690px; padding: 0; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }

.interview-pop .mfp-close { top: 20px; right: 20px; }

.interview-pop .interview_item .wrap .txt { color: #555; margin-top: 30px; max-height: 300px; overflow: visible; font-size: inherit; height: inherit; line-height: inherit; text-overflow: inherit; display: inherit; -webkit-line-clamp: inherit; -webkit-box-orient: inherit; }

.interview-pop .interview_item .wrap .txt img { width: inherit !important; height: inherit !important; }

@media all and (max-width: 920px) { .interview-pop { width: 90%; }
  .interview-pop .interview_item .wrap .title .des { text-align: center; }
  .interview-pop .mfp-close { right: 3px; } }

html, body { height: 100%; }

body { margin: 0; }

.sub-home { background-color: #f2f2f2; min-height: 100%; overflow-x: hidden; }

@media all and (min-width: 640px) { .footwrap { margin-top: -134px; }
  .sub-home { padding-bottom: 134px; } }

.more { -webkit-transition: 0.5s all; -moz-transition: 0.5s all; -ms-transition: 0.5s all; -o-transition: 0.5s all; transition: 0.5s all; -webkit-border-radius: 50px; -moz-border-radius: 50px; -ms-border-radius: 50px; -o-border-radius: 50px; border-radius: 50px; margin: 20px 0; border: 2px solid #fff; height: 50px; line-height: 50px; min-width: 200px; text-align: center; color: #fff; display: inline-block; letter-spacing: -1px; box-shadow: inset 0 0 0 0 rgba(248, 185, 0, 0.5); }

.more:hover { box-shadow: inset 0 0 0 50px rgba(248, 185, 0, 0.5); }

@media only screen and (max-width: 920px) { .more { margin: 20px 0 0; } }

@media only screen and (max-width: 640px) { .more { min-width: 0; padding: 0 50px; } }

h3.tit { font-size: 34px; letter-spacing: -1px; font-weight: 300; margin-bottom: 30px; }

@media only screen and (max-width: 920px) { h3.tit { font-size: 24px; letter-spacing: -0.5px; } }

h3.tit_01 { font-size: 34px; font-weight: 300; letter-spacing: -2px; margin-bottom: 20px; }

@media only screen and (max-width: 920px) { h3.tit_01 { font-size: 24px; letter-spacing: -1px; } }

h3.tit_02 { font-size: 32px; font-weight: bold; letter-spacing: -2px; margin-bottom: 20px; }

@media only screen and (max-width: 920px) { h3.tit_02 { font-size: 20px; letter-spacing: -1px; } }

h4.tit_01 { font-size: 26px; font-weight: 300; letter-spacing: -2px; }

@media only screen and (max-width: 920px) { h4.tit_01 { font-size: 18px; letter-spacing: -1px; } }

h4.tit_02 { font-size: 22px; font-weight: 300; letter-spacing: -1.5px; }

@media only screen and (max-width: 920px) { h4.tit_02 { font-size: 18px; letter-spacing: -1px; } }

.fp-viewing-section01 #fp-nav ul li a span, .fp-viewing-section01 .fp-slidesNav ul li a span { transition: 0.3s background; -ms-transition: 0.3s background; -webkit-transition: 0.3s background; border-color: #fff; }

.fp-viewing-section01 #fp-nav ul li a.active span, .fp-viewing-section01 .fp-slidesNav ul li a.active span { background: #fff; }

@media only screen and (max-width: 920px) { .section { position: relative; padding: 50px 0; }
  .section01, .section02, .section05, .section06 { padding: 0; }
  .section01 ._top, .section01 ._bot, .section02 ._top, .section02 ._bot, .section05 ._top, .section05 ._bot, .section06 ._top, .section06 ._bot { padding: 50px 0; }
  .section02 ._bot { padding: 15px 0; } }

/*
end main.scss
*/
.feat2 { max-width: 150px; margin: 0 auto; position: relative; }

@media only screen and (max-width: 640px) { .feat2 { max-width: 75px; } }

.feat2 .posi_a { left: 0; top: 0; }

._pop1, ._pop2 { -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; }

._pop1 { -webkit-animation-name: pop1; animation-name: pop1; }

@-webkit-keyframes pop1 { 0% { -webkit-transform: translateY(0px); }
  50% { -webkit-transform: translateY(10px); }
  100% { -webkit-transform: translateY(0); } }

@keyframes pop1 { 0% { transform: translateY(0px); }
  50% { transform: translateY(10px); }
  100% { transform: translateY(0); } }

._pop2 { -webkit-animation-name: pop2; animation-name: pop2; transform-origin: 66.66667% bottom; }

@-webkit-keyframes pop2 { 0% { -webkit-transform: scale(1); }
  50% { -webkit-transform: scale(0.8); }
  100% { -webkit-transform: scale(1); } }

@keyframes pop2 { 0% { transform: scale(1); }
  50% { transform: scale(0.8); }
  100% { transform: scale(1); } }

/*
_inc.css
*/
.header { left: 0; top: 0; background: #fff; position: fixed; width: 100%; z-index: 9999; -webkit-transition: 0.5s all; -moz-transition: 0.5s all; -ms-transition: 0.5s all; -o-transition: 0.5s all; transition: 0.5s all; }

.header .wrapper { position: relative; box-sizing: border-box; z-index: 100; }

.header .gnb_wrap { position: relative; width: 600px; float: right; }

.header .gnb_wrap li { position: relative; float: left; display: inline-block; width: 33.33%; box-sizing: border-box; }

.header .gnb_wrap li > a { box-sizing: border-box; position: relative; display: inline-block; font-size: 18px; width: 100%; color: #000; letter-spacing: -1px; height: 100px; line-height: 100px; text-align: center; text-decoration: none; }

.header .gnb_wrap li > a:after { -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -ms-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; width: 0; content: ""; position: absolute; height: 1px; margin: 0 auto; background-color: #ddd; display: block; bottom: 20px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); }

.header { box-shadow: 0px 0px 5px #bbbbbb; }

.header .logo { float: left; display: inline-block; height: 100px; line-height: 100px; }

.header .logo a { display: inline-block; background-image: url(../images/logo.jpg); background-repeat: no-repeat; background-position: center; background-size: 190px; width: 190px; height: 52px; vertical-align: middle; line-height: 100px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }

.header .gnb_wrap._tab { display: none; }

.header .gnb_wrap li > a { -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }

.fp-viewing-section02, .fp-viewing-section03, .fp-viewing-section04, .fp-viewing-section05, .fp-viewing-section05-0, .fp-viewing-section05-1, .fp-viewing-section06 { text-align: center; }

.fp-viewing-section02 .header, .fp-viewing-section03 .header, .fp-viewing-section04 .header, .fp-viewing-section05 .header, .fp-viewing-section05-0 .header, .fp-viewing-section05-1 .header, .fp-viewing-section06 .header { height: 50px; }

.fp-viewing-section02 .header .gnb_wrap li > a, .fp-viewing-section03 .header .gnb_wrap li > a, .fp-viewing-section04 .header .gnb_wrap li > a, .fp-viewing-section05 .header .gnb_wrap li > a, .fp-viewing-section05-0 .header .gnb_wrap li > a, .fp-viewing-section05-1 .header .gnb_wrap li > a, .fp-viewing-section06 .header .gnb_wrap li > a { height: 50px; line-height: 50px; font-size: 15px; }

.fp-viewing-section02 .logo, .fp-viewing-section03 .logo, .fp-viewing-section04 .logo, .fp-viewing-section05 .logo, .fp-viewing-section05-0 .logo, .fp-viewing-section05-1 .logo, .fp-viewing-section06 .logo { height: 50px; line-height: 50px; }

.fp-viewing-section02 .logo a, .fp-viewing-section03 .logo a, .fp-viewing-section04 .logo a, .fp-viewing-section05 .logo a, .fp-viewing-section05-0 .logo a, .fp-viewing-section05-1 .logo a, .fp-viewing-section06 .logo a { width: 95px; height: 26px; line-height: 50px; background-size: 95px; }

@media only screen and (max-width: 920px) { .header { height: 50px; }
  header { height: 50px; }
  .header .gnb_wrap { display: none; width: 400px; }
  .header .gnb_wrap._tab { display: block; }
  .header .gnb_wrap li > a { height: 50px; line-height: 50px; font-size: 15px; }
  .header .logo { height: 50px; line-height: 50px; }
  .header .logo a { width: 95px; height: 26px; line-height: 50px; background-size: 95px; } }

@media only screen and (max-width: 640px) { .header .gnb_wrap { width: 300px; } }

@media only screen and (max-width: 480px) { .header .gnb_wrap { width: 190px; }
  .header .gnb_wrap li > a { font-size: 13px; } }

/*NAV BTN*/
.m_nav_btn_box { display: none; position: absolute; z-index: 100; transform: translate(0, -50%); top: 50%; left: 3px; -webkit-transition: 0.5s all; -moz-transition: 0.5s all; -ms-transition: 0.5s all; -o-transition: 0.5s all; transition: 0.5s all; }

.nav_btn, .m_nav_btn { position: relative; display: block; left: 0; height: 40px; width: 40px; }

.nav_btn span, .m_nav_btn span { background: #000; position: absolute; left: 5px; top: 0; display: block; opacity: 1; width: 30px; height: 2px; -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: 0.25s ease-in-out; -moz-transition: 0.25s ease-in-out; -ms-transition: 0.25s ease-in-out; -o-transition: 0.25s ease-in-out; transition: 0.25s ease-in-out; }

.nav_btn span:nth-of-type(1), .nav_btn span:first-child, .m_nav_btn span:nth-of-type(1), .m_nav_btn span:first-child { top: 10px; }

.nav_btn span:nth-of-type(2), .nav_btn span + span, .m_nav_btn span:nth-of-type(2), .m_nav_btn span + span { top: 21px; }

.nav_btn span:nth-of-type(3), .nav_btn span + span + span, .m_nav_btn span:nth-of-type(3), .m_nav_btn span + span + span { top: 21px; visibility: hidden; }

.nav_btn span:nth-of-type(4), .nav_btn span + span + span + span, .m_nav_btn span:nth-of-type(4), .m_nav_btn span + span + span + span { top: 32px; visibility: visible; }

@media only screen and (max-width: 640px) { .nav_btn, .m_nav_btn { height: 35px; width: 35px; }
  .nav_btn span, .m_nav_btn span { left: 6px; width: 21px; }
  .nav_btn span:nth-of-type(1), .nav_btn span:first-child, .m_nav_btn span:nth-of-type(1), .m_nav_btn span:first-child { top: 10px; }
  .nav_btn span:nth-of-type(2), .nav_btn span + span, .m_nav_btn span:nth-of-type(2), .m_nav_btn span + span { top: 17px; }
  .nav_btn span:nth-of-type(3), .nav_btn span + span + span, .m_nav_btn span:nth-of-type(3), .m_nav_btn span + span + span { top: 17px; visibility: hidden; }
  .nav_btn span:nth-of-type(4), .nav_btn span + span + span + span, .m_nav_btn span:nth-of-type(4), .m_nav_btn span + span + span + span { top: 24px; visibility: visible; } }

.nav_btn.on span:nth-of-type(1), .nav_btn.on span:nth-of-type(4), .m_nav_btn.on span:nth-of-type(1), .m_nav_btn.on span:nth-of-type(4) { opacity: 0; }

.nav_btn.on span:nth-of-type(2), .m_nav_btn.on span:nth-of-type(2) { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }

.nav_btn.on span:nth-of-type(3), .m_nav_btn.on span:nth-of-type(3) { visibility: visible; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }

.nav_bg, .mo_gnb_nav { top: 60px; }

@media only screen and (max-width: 640px) { .nav_bg, .mo_gnb_nav { top: 50px; } }

.mo_gnbwrapper { display: none; }

@media only screen and (max-width: 640px) { .m_nav_btn_box { display: block; }
  .header { left: 0; position: fixed; text-align: center; top: 0; background: #fff; box-shadow: 0 0 4px 0px #666; }
  .nav_bg, .mo_gnbwrapper { display: block; }
  .header .gnb_wrap, .topmenu { display: none; }
  .lt-ie9 .nav_bg { display: none; }
  .lt-ie9 .nav_bg.on { display: block; }
  .nav_bg { position: fixed; width: 100%; min-height: 100%; background: #000; opacity: 0 !important; visibility: hidden; -webkit-transition: 0.5s all; -moz-transition: 0.5s all; -ms-transition: 0.5s all; -o-transition: 0.5s all; transition: 0.5s all; }
  .nav_bg.on { visibility: visible; z-index: 10; opacity: 0.6 !important; } }

@media only screen and (max-width: 640px) and (max-width: 640px) { .nav_bg { top: 50px; } }

@media only screen and (max-width: 640px) { .mo_gnb_nav { position: fixed; left: 0; display: none; z-index: 99999; width: 300px; height: 100%; background: #fff; overflow-y: auto; }
  .mo_gnb_nav .gnb_box { width: 100%; overflow: hidden; padding-bottom: 56px; }
  .mo_gnb_nav .depth.wrap { border-top: 1px solid #e4e4e4; }
  .mo_gnb_nav .depth.wrap *[class^="depth01"] { display: block; }
  .mo_gnb_nav .depth.wrap *[class^="depth01"] > a { text-align: left; background: #fff url(../images/icon/nav_down.png) no-repeat 95% center; border-top: 1px solid #e4e4e4; margin-top: -1px; text-align: left; display: block; padding: 15px; font-size: 16px; position: relative; z-index: 9999; color: #333; margin-bottom: 0; }
  .mo_gnb_nav .depth.wrap *[class^="depth01"] > a.selected1 { color: #fff; background: #00aeef url(../images/icon/nav_up.png) no-repeat 95% center !important; }
  .mo_gnb_nav .depth.wrap *[class^="depth01"] .depth02 li { background: #fff; width: 100%; float: left; }
  .mo_gnb_nav .depth.wrap *[class^="depth01"] .depth02 a { text-align: left; background-image: url(../images/icon/nav_st1.jpg); background-repeat: no-repeat; background-size: 5px; background-position: 20px center; background-color: #fafafa; border-bottom: 1px solid #e4e4e4; display: block; padding: 9px 0 9px 30px; font-size: 14px; }
  .mo_gnb_nav .depth.wrap .depth01_down > a { background: #fff; }
  .mo_gnb_nav .depth.wrap .half { width: 50%; float: left; }
  .mo_gnb_nav .depth.wrap .half > a { text-align: center; }
  .mo_gnb_nav .depth.wrap .half:nth-child(2n) { border-left: 1px solid #e4e4e4; } }

@media only screen and (max-width: 640px) { .mo_gnb_nav { width: 80%; max-width: 360px; }
  .mo_gnb_nav .depth.wrap *[class^="depth01"] > a { padding: 12px; font-size: 14px; }
  .mo_gnb_nav .depth.wrap *[class^="depth01"] .depth02 a { font-size: 13px; } }