@charset "UTF-8";
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

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

body { line-height: 1; }

ol, ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

table { border-collapse: collapse; border-spacing: 0; }

/*******************************************************************
font
********************************************************************/
@font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 300; src: url(../_fonts/NotoSansKR-Light.woff2) format("woff2"), url(../_fonts/NotoSansKR-Light.woff) format("woff"), url(../_fonts/NotoSansKR-Light.otf) format("opentype"); }

@font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 400; src: url(../_fonts/NotoSansKR-Regular.woff2) format("woff2"), url(../_fonts/NotoSansKR-Regular.woff) format("woff"), url(../_fonts/NotoSansKR-Regular.otf) format("opentype"); }

@font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 500; src: url(../_fonts/NotoSansKR-Medium.woff2) format("woff2"), url(../_fonts/NotoSansKR-Medium.woff) format("woff"), url(../_fonts/NotoSansKR-Medium.otf) format("opentype"); }

@font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 700; src: url(../_fonts/NotoSansKR-Bold.woff2) format("woff2"), url(../_fonts/NotoSansKR-Bold.woff) format("woff"), url(../_fonts/NotoSansKR-Bold.otf) format("opentype"); }

@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 700; src: url(../_fonts/OpenSansBold.woff2) format("woff2"), url(../_fonts/OpenSansBold.woff) format("woff"), url(../_fonts/OpenSansBold.ttf) format("truetype"); }

/*******************************************************************
default
********************************************************************/
html, body, h1, h2, h3, h4, h5, h6, strong, table th, input, textarea, select, button { font-weight: 400; font-size: 14px; color: #5b5c5e; letter-spacing: -.15px; }

html, body, h1, h2, h3, h4, h5, h6, strong, table th, input, textarea, select, button { font-family: "Noto Sans KR", "Noto+Sans", "맑은 고딕", "Malgun Gothic", Dotum, Arial, sans-serif; }

html, body { height: 100%; min-width: 320px; position: relative; }

input[type=button], input[type=text], input[type=image], input[type=submit], textarea, select { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; }

/* IE6 */
:first-child + html .clearFix { zoom: 1; }

/* IE7 */
.hide, .blind, caption, legend { opacity: 0; text-indent: -999em; overflow: hidden; position: absolute; top: 0; left: 0; width: 0; height: 0; font-size: 0; line-height: 0; }

.clearFix:after { display: block; clear: both; content: ''; }

* html .clearFix { zoom: 1; }

/*******************************************************************
common
********************************************************************/
/*
Common UI
------------------------------------------------------------------ */
/* button set */
.btn { display: inline-block; height: 48px; margin: 0 3px; padding: 0 20px; border: 2px solid transparent; border-radius: 0; background-image: none; font-weight: bold; font-size: 18px; line-height: 44px; text-align: center; vertical-align: middle; white-space: nowrap; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }

.btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus { outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; }

.btn:hover, .btn:focus, .btn.focus { color: #333; text-decoration: none; }

.btn:active, .btn.active { background-image: none; -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); }

.btn.disabled, .btn[disabled], fieldset[disabled] .btn { cursor: not-allowed; -webkit-box-shadow: none; box-shadow: none; opacity: .65; }

.btn-default, a.btn-default { border-color: #2b2b2b; background-color: #fff; color: #2b2b2b; }

.btn-mkt, a.btn-mkt { border-color: #002d6c; background-color: #fff; color: #002d6c; }

.btn-default:hover, .btn-default:focus, .btn-default.focus, .btn-default:active, .btn-default.active { border-color: #2b2b2b; background-color: #f4f4f4; color: #2b2b2b; }

.btn-medium { width: auto; height: 30px; padding: 0 12px; font-size: 14px; line-height: 27px; }

.btn-small { width: auto; height: 28px; font-size: 12px; line-height: 28px; }

.btn > i { margin-left: 10px; margin-right: 0; margin-top: -1px; line-height: 44px; }

.btn > i.i-left { margin-right: 10px; margin-left: 0; }

.btn-medium > i { line-height: 36px; }

.btn-small > i { line-height: 28px; }

.btn.w100 { width: 100%; }

/* textarea, input */
/* 
textarea,input[type=text],input[type=password],input[type=datetime],input[type=datetime-local],input[type=date],input[type=month],input[type=time],input[type=week],input[type=number],input[type=email],input[type=url],input[type=search],input[type=tel],input[type=color]{border-radius:0 !important;border:1px solid #f3f2f0;background-clip:padding-box !important;background-color:#f3f2f0;-webkit-border-radius:0 !important;-webkit-background-clip:padding-box !important;-moz-border-radius:0 !important;-moz-background-clip:padding !important;-webkit-transition:-webkit-box-shadow .45s,border-color .45s ease-in-out;-webkit-transition:box-shadow .45s,border-color .45s ease-in-out;transition:box-shadow .45s,border-color .45s ease-in-out;box-shadow:none}
textarea:hover,input[type=text]:hover,input[type=password]:hover,input[type=datetime]:hover,input[type=datetime-local]:hover,input[type=date]:hover,input[type=month]:hover,input[type=time]:hover,input[type=week]:hover,input[type=number]:hover,input[type=email]:hover,input[type=url]:hover,input[type=search]:hover,input[type=tel]:hover,input[type=color]:hover{border-color:rgba(100,100,100,.1)}
textarea:focus,input[type=text]:focus,input[type=password]:focus,input[type=datetime]:focus,input[type=datetime-local]:focus,input[type=date]:focus,input[type=month]:focus,input[type=time]:focus,input[type=week]:focus,input[type=number]:focus,input[type=email]:focus,input[type=url]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=color]:focus{border-color:rgba(100,100,100,.1);box-shadow:inset 0 2px 4px rgba(100,100,100,.1);outline:0}
input.input,textarea.input{width:100%;height:36px;padding:0 7px;font-size:15px;color:#000}
textarea.input{height:75px;padding-top:10px;padding-bottom:10px}
textarea:disabled,input[type=text]:disabled,input[type=password]:disabled,input[type=datetime]:disabled,input[type=datetime-local]:disabled,input[type=date]:disabled,input[type=month]:disabled,input[type=time]:disabled,input[type=week]:disabled,input[type=number]:disabled,input[type=email]:disabled,input[type=url]:disabled,input[type=search]:disabled,input[type=tel]:disabled,input[type=color]:disabled,textarea:disabled:hover,input[type=text]:disabled:hover,input[type=password]:disabled:hover,input[type=datetime]:disabled:hover,input[type=datetime-local]:disabled:hover,input[type=date]:disabled:hover,input[type=month]:disabled:hover,input[type=time]:disabled:hover,input[type=week]:disabled:hover,input[type=number]:disabled:hover,input[type=email]:disabled:hover,input[type=url]:disabled:hover,input[type=search]:disabled:hover,input[type=tel]:disabled:hover,input[type=color]:disabled:hover{border:1px solid #eee;background-color:#f7f7f7}
*/
.input.w100 { width: 100% !important; }

.input.inline { width: auto !important; }

input, select, textarea, button { -webkit-appearance: none; -moz-appearance: none; appearance: none; }

/* Checkbox & Radio */
.box_wrap { display: inline-block; }

.box_wrap .checks { float: none; }

.checks_wrap { overflow: hidden; }

.checks_wrap:after { display: table; content: ''; clear: both; }

.checks_wrap .checks { float: left; }

.checks { display: table; position: relative; margin-right: 10px; height: 30px; padding: 4px 0; /* float: left; */ }

.checks > span { display: table-cell; vertical-align: middle; overflow: hidden; }

.checks > span:after { display: table; content: ''; clear: both; }

.checks input[type=checkbox] + label:before, .checks input[type=radio] + label:before, .checks input[type=checkbox]:checked + label:before, .checks input[type=radio]:checked + label:before { background: url(../_images/common/ico_checks.png) no-repeat; background-size: 50px auto; }

.checks input[type=checkbox], .checks input[type=radio] { position: fixed; top: -9999999px; width: 1px; height: 1px; margin: 0 0 0 1px; padding: 0; }

.checks input[type=checkbox] + label, .checks input[type=radio] + label, .radio-list input[type=radio] + label { float: left; padding-left: 29px; font-size: 16px; line-height: 1.2; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }

.checks input[type=checkbox] + label:before { position: absolute; width: 20px; height: 20px; margin: -1px 7px 0 -28px; background-position: 0 0; content: ''; border: 1px solid white; top: 6px; }

.checks input[type=checkbox]:checked + label:before { background-position: 0 -25px; }

.checks input[type=checkbox].disabled + label:before, .checks input[type=checkbox]:disabled + label:before { background-position: 0 -50px; }

.checks input[type=checkbox]:checked.disabled + label:before, .checks input[type=checkbox]:checked:disabled + label:before { background-position: 0 -75px; }

.checks input[type=radio] + label:before { position: absolute; width: 20px; height: 20px; margin: -1px 7px 0 -26px; background-position: -25px 0; content: ''; border: 1px solid white; top: 6px; }

.checks input[type=radio]:checked + label { color: #002c5e; }

.checks input[type=radio]:checked + label:before { background-position: -25px -25px; }

.checks input[type=radio].disabled + label:before, .checks input[type=radio]:disabled + label:before { background-position: -25px -50px; }

.checks input[type=radio].disabled + label, .checks input[type=radio]:disabled + label { color: #999; }

.checks input[type=radio]:checked.disabled + label:before, .checks input[type=radio]:checked:disabled + label:before { background-position: -25px -75px; }

input[type=checkbox]:focus + label:before, input[type=checkbox]:active + label:before { border: 1px solid #99bbf2; }

input[type=radio]:focus + label:before, input[type=radio]:active + label:before { border: 1px solid #99bbf2; border-radius: 50px; }

/* Slick Slider */
.slick-loading .slick-list { background: #fff url(../_images/common/ajax_loader.gif) center center no-repeat; }

/* Slider */
.slick-slider { display: block; position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }

.slick-list { display: block; overflow: hidden; position: relative; margin: 0; padding: 0; }

.slick-list.dragging { cursor: pointer; }

.slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

.slick-track { display: block; position: relative; top: 0; left: 0; }

.slick-track:before, .slick-track:after { display: table; content: ''; }

.slick-track:after { clear: both; }

.slick-loading .slick-track { visibility: hidden; }

.slick-slide { display: none; float: left; height: 100%; min-height: 1px; }

[dir=rtl] .slick-slide { float: right; }

.slick-slide img { display: block; }

.slick-slide.slick-loading img { display: none; }

.slick-initialized .slick-slide { display: block; }

.slick-loading .slick-slide { visibility: hidden; }

.slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; }

.slick-arrow.slick-hidden { display: none; }

/* Slick slider Arrows */
.slick-prev, .slick-next { display: block; position: absolute; top: 50%; width: 20px; height: 20px; padding: 0; border: none; background: transparent; font-size: 0; line-height: 0; color: transparent; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); cursor: pointer; }

.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { background: transparent; color: transparent; }

.slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before { opacity: 1; }

.slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { opacity: .1; }

.slick-prev:before, .slick-next:before { font-family: 'slick'; font-size: 20px; line-height: 1; color: #FFF; opacity: .75; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.slick-prev { left: -25px; }

[dir=rtl] .slick-prev { right: -25px; left: auto; }

.slick-next { right: -25px; }

[dir=rtl] .slick-next { right: auto; left: -25px; }

/* Slick slider Dots */
.slick-dots { display: block; position: absolute; bottom: -25px; width: 100%; margin: 0; padding: 0; text-align: center; list-style: none; }

.slick-dots li { display: inline-block; position: relative; width: 20px; height: 20px; margin: 0 5px; padding: 0; cursor: pointer; }

.slick-dots li button { display: block; width: 20px; height: 20px; padding: 5px; border: 0; background: transparent; font-size: 0; line-height: 0; color: transparent; cursor: pointer; }

.slick-dots li button:hover:before, .slick-dots li button:focus:before { opacity: 1; }

.slick-dots li button:before { position: absolute; top: 0; left: 0; width: 20px; height: 20px; font-size: 6px; line-height: 20px; color: #000; text-align: center; content: ''; opacity: .25; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.slick-dots li.slick-active button:before { color: #000; opacity: .75; }

html { font-size: 62.5%; background-color: #fff; }

/* Form */
button { overflow: visible; width: auto; margin: 0; padding: 0; border: none; background: none; }

input::-ms-clear { display: none; }

textarea { resize: none; }

a:link, a:visited, a:active, a:hover { text-decoration: none; cursor: pointer; }

* { -webkit-box-sizing: border-box; box-sizing: border-box; }

.row { clear: both; margin: 0; padding: 0; }

.skipnav a { position: absolute; top: -9999em; z-index: 9999; width: 100%; background-color: #013874; font-weight: bold; color: #fff; text-align: center; }

.skipnav a:hover, .skipnav a:active, .skipnav a:focus { top: 0; padding: 12px 0; color: #fff; }

.container { position: relative; max-width: 1240px; margin: 0 auto; padding: 0 20px; }

.container::after { clear: both; content: ""; display: table; }

.br { display: block; }

.fl { float: left; }

.fr { float: right; }

.mb1 { margin-bottom: 1em; }

.mb2 { margin-bottom: 2em; }

.sound-only { display: inline-block !important; position: absolute; top: 0; left: 0; margin: 0 !important; padding: 0 !important; font-size: 0; line-height: 0; border: 0 !important; overflow: hidden !important; }

.text-left {text-align:left !important;}

/* text color */
.cblue { color: #535ba5 !important; }

.cred { color: #d83636 !important; }

/*******************************************************************
layout
********************************************************************/
body { width: 100%; }

/*******************************************************************
header
********************************************************************/
.btn-history-back { display: none; }

.btn-menu { cursor: pointer; display: none; }

#header { position: relative; width: 100%; top: 0; background-color: #fff; z-index: 10; }

#header .container { width: 100%; max-width: 100%; padding: 0; }

#header .container .header-top { height: 145px; max-width: 1200px; position: relative; text-align: center; margin: 0 auto; }

#header .container .header-top .header-menu { position: absolute; right: 0; bottom: 1em; }

#header .container .header-top .header-menu ul:after { display: table-cell; content: ''; clear: both; }

#header .container .header-top .header-menu ul > li { float: left; font-size: 0; position: relative; }

#header .container .header-top .header-menu ul > li:after { content: ''; display: inline-block; width: 1px; height: 12px; background: #464646; position: absolute; top: 50%; right: -1px; margin-top: -6px; }

#header .container .header-top .header-menu ul > li:last-child:after { display: none; }

#header .container .header-top .header-menu ul > li a { font-size: 14px; color: #464646; padding: 0 10px; }

#header .container .header-top .header-menu ul > li .login-text { font-size: 14px; padding-right: 12px; }

#header .container .header-bottom { background: #1d233b; -webkit-box-sizing: border-box; box-sizing: border-box; height: 70px; }

#header .container .header-bottom .gnb-area { position: relative; }

#header .container .header-bottom .gnb-area:before { position: absolute; top: 0; left: 2%; display: inline-block; width: 150px; height: 70px; content: ''; background: url(../_images/common/logo_gnb.png) left 10px top 23px no-repeat; background-size: 135px; opacity: 0.4; }

#header .nav-bg { background-color: #eead1f; position: absolute; top: 215px; width: 100%; z-index: -1; -webkit-box-shadow: 0 10px 13px rgba(0, 0, 0, 0.1); box-shadow: 0 10px 13px rgba(0, 0, 0, 0.1); -webkit-transition: all 0.3s; transition: all 0.3s; }

.header-logo { display: inline-block; width: 500px; height: 60px; margin: 3em auto 2em; }

.header-logo a { display: inline-block; width: 100%; height: 100%; overflow: hidden; font-size: 0; text-indent: -999em; background: url(../_images/okta_web_logo-210104-1.jpg) 0 0 no-repeat; background-size: cover; }

#gnb { text-align: center; max-width: 1200px; margin: 0 auto; }

#gnb.mobile:before { content: ''; opacity: 0; visibility: hidden; display: block; position: fixed; background: rgba(0, 0, 0, 0.6); width: 100%; height: 100%; z-index: 10; top: 0; bottom: 0; left: 0; right: 0; -webkit-transition: all 0.5s; transition: all 0.5s; }

#gnb.mobile.__open:before { visibility: visible; opacity: 1; z-index: 100; }

#gnb.mobile .m-nav-bg { display: block; position: fixed; top: 0; right: -100%; bottom: 0; width: 50%; background-color: #1d233b; z-index: 300; -webkit-transition: all 0.5s ease .1s; transition: all 0.5s ease .1s; }

#gnb.mobile .btn-menu-close { position: absolute; top: 15px; right: 15px; width: 25px; height: 25px; line-height: 25px; font-size: 24px; font-weight: 700; color: #fff; opacity: 0.4; }

#gnb.__open { visibility: visible; opacity: 1; }

#gnb.__open .m-nav-bg { right: 0; }

#gnb.__open .gnb-wrap { right: 0; }

#gnb .gnb-container { padding: 0; }

#gnb .top-menu { font-size: 0; display: table; table-layout: fixed; width: 100%; }

#gnb .top-menu.__over .menu-div { visibility: visible; opacity: 1; display: block; }

#gnb .top-menu.__over .menu-div a:hover { color: #145a9f; }

#gnb .top-menu > li { width: calc(100% / 7); height: 70px; padding: 0 1px 0 0; display: table-cell; vertical-align: top; }

#gnb .top-menu > li.__over > .menu-div { background: rgba(255, 255, 255, 0.1); }

#gnb .top-menu > li:last-child { padding-right: 0; }

#gnb .top-menu > li > .menu-div { display: none; visibility: hidden; overflow: hidden; left: 0; opacity: 0; margin: 0; z-index: 10; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; width: 100%; height: calc(100% - 70px); padding: 15px 0px; }

#gnb .top-menu > li > .menu-div a { line-height: 1.3; }

#gnb .top-menu > li .depth2 { display: inline-block; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 10px; position: relative; }

#gnb .top-menu > li .depth2 .menu-div { display: none; padding-bottom: 10px; }

#gnb .top-menu > li .depth2 .menu-div .depth3 { padding: 0 30px; }

#gnb .top-menu > li .depth2 .menu-div .depth3 > li > a { display: inline-block; width: 100%; font-size: 16px; letter-spacing: -1px; color: #252525; text-align: left; position: relative; padding: 2px 0 2px 13px; }

#gnb .top-menu > li .depth2 .menu-div .depth3 > li > a:hover { font-weight: 700; }

#gnb .top-menu > li .depth2 .menu-div .depth3 > li > a:before { display: inline-block; content: '-'; font-size: 18px; position: absolute; left: 0; top: -1px; }

#gnb .top-menu > li .depth2 > li { display: inline-block; width: 100%; border-bottom: 1px solid rgba(0, 0, 0, 0.1); }

#gnb .top-menu > li .depth2 > li:last-child { border-bottom: 0; }

#gnb .top-menu > li .depth2 > li > a { display: inline-block; width: 100%; padding: 10px 5px; font-size: 16px; color: #252525; word-break: keep-all; letter-spacing: -1px; }

#gnb .top-menu > li > a { color: #fff; font-size: 19px; font-size: 1.9rem; font-weight: 400; letter-spacing: -0.5px; display: inline-block; width: 100%; line-height: 70px; -webkit-transition: all 0.5s; transition: all 0.5s; position: relative; }

#gnb .top-menu > li > a .bline { display: inline-block; width: 0%; height: 3px; background-color: #eead1f; position: absolute; bottom: 0; left: 0; -webkit-transition: all 0.2s ease .1s; transition: all 0.2s ease .1s; }

#gnb .top-menu > li a .ico-link { display: inline-block; width: 13px; height: 13px; font-size: 0; text-indent: -999em; overflow: hidden; margin-left: 10px; background: url(../_images/common/gnb_blank.gif) 0 0 no-repeat; }

#gnb .top-menu > li.__over > a { color: #eead1f; }

#gnb .top-menu > li.__over > a .bline { width: 100%; }

#gnb .m-nav-bg, #gnb .header-menu, #gnb .quick-menu { display: none; }

/*******************************************************************
Content-wrap
********************************************************************/
.content-wrap .quick-menu { width: 95px; position: absolute; top: 230px; right: 0; z-index: 15; }

.content-wrap .quick-menu.__fixed { position: fixed; top: 10px; }

.content-wrap .quick-menu .section-quick-menu { text-align: center; background-color: #282828; }

.content-wrap .quick-menu .section-quick-menu .h3-title { display: inline-block; width: 100%; font-size: 13px; font-weight: 700; color: #fff; padding: 10px 0; }

.content-wrap .quick-menu .section-quick-menu > ul > li:nth-child(1) { background-color: #1d233b; }

.content-wrap .quick-menu .section-quick-menu > ul > li:nth-child(2) { background-color: #485170; }

.content-wrap .quick-menu .section-quick-menu > ul > li:nth-child(3) { background-color: #9f9174; }

.content-wrap .quick-menu .section-quick-menu > ul > li:nth-child(4) { background-color: #555555; }

.content-wrap .quick-menu .section-quick-menu > ul > li:nth-child(5) { background-color: #9d7446; }

.content-wrap .quick-menu .section-quick-menu > ul > li:nth-child(6) { background-color: #2a559c; }

.content-wrap .quick-menu .section-quick-menu > ul > li:nth-child(7) { background-color: #ae2329; }

.content-wrap .quick-menu .section-quick-menu > ul > li:nth-child(8) { position: relative; }

.content-wrap .quick-menu .section-quick-menu > ul > li:nth-child(8):after { display: inline-block; content: ''; position: absolute; bottom: -1px; left: 50%; margin-left: -45px; width: 90px; height: 1px; background-color: #fff; opacity: 0.2; }

.content-wrap .quick-menu .section-quick-menu > ul > li a { display: inline-block; width: 100%; font-size: 13px; letter-spacing: -1px; color: #fff; padding: 3px 0 10px; }

.content-wrap .quick-menu .section-quick-menu > ul > li a i { display: inline-block; width: 100%; }

.content-wrap .quick-menu .section-quick-menu > ul > li a i:before { font-size: 36px; font-weight: 400; letter-spacing: 0; line-height: 50px; display: inline-block; width: 100%; }

.content-wrap .quick-menu.__yscroll { position: fixed; top: 0 !important; right: 0px; -webkit-transition: all 0.3s; transition: all 0.3s; height: 100%; }

.content-wrap .quick-menu.__yscroll .section-quick-menu { background-color: transparent; height: 100%; }

.content-wrap .quick-menu.__yscroll .section-quick-menu .h3-title { background-color: #282828; }

.content-wrap .quick-menu.__yscroll .section-quick-menu li { background: #282828; }

.content-wrap .quick-menu.__yscroll .section-quick-menu > ul { display: inline-block; height: calc(100% - 35px); overflow: auto; padding: 15px 0; font-size: 0; text-align: center; background-color: rgba(255, 255, 255, 0.8); border-top: 1px solid #eee; }

.content-wrap .quick-menu.__yscroll .section-quick-menu > ul > li { display: inline-block; margin: 5px; border-radius: 10px; width: 85px; height: 75px; overflow: hidden; }

.content-wrap .quick-menu.__yscroll .section-quick-menu > ul > li:last-child { margin-right: 0; }

/*******************************************************************
Footer
********************************************************************/
#footer { font-size: 14px; background: #363636; color: #d3d3d3; padding: 30px 0; }

#footer .container-top { width: 100%; position: relative; padding: 0 15px 20px; margin-bottom: 25px; }

#footer .container-top .inner { width: 100%; max-width: 1200px; margin: 0 auto; display: table; table-layout: fixed; position: relative; }

#footer .container-top .inner .banner-title { display: table-cell; width: 138px; overflow: hidden; text-align: left; vertical-align: middle; font-size: 25px; color: #fefefe; }

#footer .container-top .inner .banner-w { display: table-cell; padding: 0 20px; position: relative; }

#footer .container-top .inner .banner-w.slick-slider { margin: 0 -10px; }

#footer .container-top .inner .banner-w > .slick-items > div img { width: 100%; padding: 5px; }

#footer .container-top .inner .main-alim-nav { position: relative; display: table-cell; width: 77px; vertical-align: middle; }

#footer .container-top .inner .main-alim-nav > ul { border: 1px solid #ccc; display: inline-block; }

#footer .container-top .inner .main-alim-nav > ul li { float: left; display: inline-block; border-left: 1px solid #ccc; }

#footer .container-top .inner .main-alim-nav > ul li:first-child { border-left: 0; }

#footer .container-top .inner .main-alim-nav button, #footer .container-top .inner .main-alim-nav .main-alim-nav a { width: 24px; height: 25px; border: 0; font-size: 0; line-height: 0; color: transparent; cursor: pointer; }

#footer .container-top .inner .main-alim-nav .arrow-prev, #footer .container-top .inner .main-alim-nav .arrow-next, #footer .container-top .inner .main-alim-nav .btn-slider-play, #footer .container-top .inner .main-alim-nav .btn-slider-stop { background-position: 8px 7px; float: left; background: url(../_images/main/slider_controls_s.png) 0 0 no-repeat; display: block; float: left; }

#footer .container-top .inner .main-alim-nav .btn-slider-play { background-position: 9px -53px; }

#footer .container-top .inner .main-alim-nav .btn-slider-stop { background-position: 9px -22px; }

#footer .container-top .inner .main-alim-nav .arrow-prev { background-position: 8px 7px; }

#footer .container-top .inner .main-alim-nav .arrow-next { background-position: 9px -83px; }

#footer .container { display: table; width: 100%; }

#footer .container .footer-logo { display: table-cell; width: 22%; background: url(../_images/common/logo_footer.png) center left no-repeat; font-size: 0; text-indent: -999em; overflow: hidden; }

#footer .container .inner { display: table-cell; position: relative; }

#footer .footer-menu { margin-bottom: 2em; }

#footer .footer-menu ul > li { display: inline-block; font-size: 0; }

#footer .footer-menu ul > li.privacy > a { color: #eead1f; }

#footer .footer-menu ul > li > a { font-size: 16px; font-weight: 500; color: #fff; padding: 0 15px; }

#footer .footer-menu ul > li > a:hover { color: #eead1f; }

#footer .family-site-area { position: absolute; top: -10px; right: 0; }

#footer .family-site-area .section-family-site { margin-bottom: 5px; width: 202px; height: 30px; -webkit-box-sizing: border-box; box-sizing: border-box; border: 1px solid #bebebe; }

#footer .family-site-area .section-family-site .btn-select { position: relative; display: inline-block; padding: 0 30px 0 10px; width: 100%; height: 100%; line-height: 28px; color: #c1c1c1; text-align: left; cursor: pointer; }

#footer .family-site-area .section-family-site .btn-select:after { position: absolute; top: 0; right: 0; width: 30px; height: 100%; text-align: center; border-left: 1px solid #ebebeb; content: '\eb61'; font: normal normal normal 14px/1 tanaicon; display: inline-block; text-indent: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 28px; }

#footer .family-site-area .section-family-site .btn-select.__open:after { content: '\eb60'; }

#footer .family-site-area .section-family-site .inner { position: relative; display: block; }

#footer .family-site-area .section-family-site .inner > ul { display: none; position: absolute; right: 0; bottom: 28px; width: 202px; border: 1px solid #bebebe; margin: 0 -1px; overflow-y: auto; padding: 5px 0 5px 10px; background: #fff; z-index: 10; }

#footer .family-site-area .section-family-site .inner > ul > li > a { display: inline-block; width: 100%; color: #5f5f5f; line-height: 23px; }

#footer .family-site-area .section-family-site .inner > ul > li > a:hover { text-decoration: underline; }

#footer .family-site-area .section-family-site .inner > ul > li .nolink { color: #5f5f5f; line-height: 23px; }

#footer address { line-height: 1.4; padding: 0 15px; }

#footer .copy { padding: 5px 15px; }

#footer .mobile-util { display: none; background: #fff; padding: 1em 0; text-align: center; }

#footer .mobile-util button { color: #363636; font-size: 16px; font-weight: 700; padding: 3px 12px; }

#footer .mobile-util button:before { margin-right: 3px; font-weight: 400; }

@media screen and (max-width: 375px) { #footer .container-top .inner .banner-title { font-size: 15px; width: 80px; } }

@media screen and (max-width: 1600px) { #header .container .header-bottom .gnb-area:before { left: 0; } }

@media screen and (max-width: 1480px) { .content-wrap .quick-menu { position: fixed; top: 0 !important; right: -95px !important; -webkit-transition: all 0.3s; transition: all 0.3s; height: 100%; }
  .content-wrap .quick-menu.__open { right: 0 !important; }
  .content-wrap .quick-menu.__open .section-quick-menu .h3-title:after { content: '\eb61'; }
  .content-wrap .quick-menu .section-quick-menu { display: table; background-color: transparent; height: 100%; }
  .content-wrap .quick-menu .section-quick-menu .h3-title { background: #282828; width: 120px; padding: 7px 15px 7px 10px; border-radius: 5px 5px 0 0; position: absolute; top: 50%; left: -73px; margin-top: -13px; font-size: 12px; text-align: left; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); cursor: pointer; }
  .content-wrap .quick-menu .section-quick-menu .h3-title:after { position: absolute; top: 1px; right: 10px; display: inline-block; content: '\eb60'; font: normal normal normal 14px/1 tanaicon; display: inline-block; text-indent: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 24px; }
  .content-wrap .quick-menu .section-quick-menu > ul { display: table-cell; width: 100%; height: 100vh !important; vertical-align: middle; overflow: auto; padding: 15px 0; font-size: 0; text-align: center; background-color: rgba(255, 255, 255, 0.8); border-top: 1px solid #eee; }
  .content-wrap .quick-menu .section-quick-menu > ul > li { display: inline-block; margin: 5px; background: #282828; border-radius: 10px; width: 85px; height: 75px; overflow: hidden; }
  .content-wrap .quick-menu .section-quick-menu > ul > li:last-child { margin-right: 0; }
  #header .container .header-bottom .gnb-area:before { background: none; } }

@media screen and (max-width: 1280px) { #gnb .top-menu > li { height: 65px; }
  #gnb .top-menu > li:first-child > a:before { display: none; }
  #gnb .top-menu > li:last-child > a:after { display: none; }
  #gnb .top-menu > li > a { line-height: 65px; font-size: 18px; }
  #gnb .top-menu > li > a:after { height: 18px; }
  #gnb .top-menu > li .depth2 > li { border-bottom: 0; }
  #gnb .top-menu > li .depth2 > li > a { font-size: 17px; }
  #gnb .top-menu > li .depth2 > li .menu-div .depth3 > li > a { font-size: 15px; }
  #gnb { max-width: 100%; }
  #gnb .gnb-wrap { position: fixed; right: -100%; top: 0px; bottom: 0px; z-index: 1000; margin: 0; padding: 0 0 20px 0; -webkit-box-sizing: border-box; box-sizing: border-box; width: 50%; overflow-y: auto; -webkit-transition: all 0.5s ease .1s; transition: all 0.5s ease .1s; }
  #gnb .gnb-wrap:before { display: inline-block; content: ''; width: 100%; height: 55px; background: url(../_images/common/logo_gnb.png) 50% 55% no-repeat; background-size: 150px; }
  #gnb .gnb-wrap .header-menu { display: block; background-color: #145a9f; color: #fff; }
  #gnb .gnb-wrap .header-menu > ul { display: inline-block; padding: 0.5em; }
  #gnb .gnb-wrap .header-menu > ul:after { display: table-cell; content: ''; clear: both; }
  #gnb .gnb-wrap .header-menu > ul > li { float: left; padding: 0.2em; }
  #gnb .gnb-wrap .header-menu > ul > li.sitemap { display: none; }
  #gnb .gnb-wrap .header-menu > ul > li .login-text { display: inline-block; line-height: 20px; padding: 3px 3px 3px 0; border: 1px solid transparent; font-size: 13px; }
  #gnb .gnb-wrap .header-menu > ul > li > a { display: inline-block; padding: 3px 5px; font-size: 13px; line-height: 20px; color: #fff; border: 1px solid #fff; }
  #gnb .gnb-container { padding: 0.5em 0 1.5em 1.5em; }
  #gnb .top-menu { display: block; padding-left: 5px; }
  #gnb .top-menu > li { max-width: 100%; display: block; width: 100% !important; height: auto; }
  #gnb .top-menu > li:last-child { padding-right: 22px; }
  #gnb .top-menu > li > a { font-size: 20px; line-height: 50px; font-weight: 700; text-align: left; position: relative; color: #fff; }
  #gnb .top-menu > li .menu-div { display: block; padding: 0; text-align: center; visibility: visible; opacity: 1; width: 100%; height: auto; position: static; overflow: hidden; max-height: 0; -webkit-transition: all 0.3s; transition: all 0.3s; }
  #gnb .top-menu > li .menu-div .depth2 { height: auto; padding: 0 0 5px; }
  #gnb .top-menu > li .menu-div .depth2 > li { float: none; width: 100%; }
  #gnb .top-menu > li .menu-div .depth2 > li > a { color: #a8b2ce; padding: 6px 20px; text-align: left; letter-spacing: 0; }
  #gnb .top-menu > li .menu-div.__open { max-height: 1000px; }
  #gnb .depth1 > li:first-child > a:before { display: none; }
  #gnb .depth1 > li:last-child { padding-right: 0; }
  #gnb .depth1 > li > a .bline { display: none; }
  #gnb .depth1 > li > a:after { display: none; }
  #gnb .depth1 > li a { position: relative; }
  #gnb .depth1 > li a.hasChild:after { display: inline-block; position: absolute; width: 15px; height: 15px; border-top: 2px solid #fff; border-left: 2px solid #fff; background: none; top: 15px; -webkit-transform: rotate(225deg); transform: rotate(225deg); left: inherit; right: 20px; margin: 0px 0 0 0; content: ''; -webkit-transition: all 0.3s; transition: all 0.3s; }
  #gnb .depth1 > li a.hasChild.__open:after { -webkit-transform: rotate(45deg); transform: rotate(45deg); top: 25px; }
  #gnb .depth1 > li .depth2 { padding: 0; }
  #gnb .depth1 > li .depth2:before, #gnb .depth1 > li .depth2 li:before, #gnb .depth1 > li .depth2 li:after { display: none !important; }
  #gnb .depth1 > li .depth2 > li { padding: 0; }
  #gnb .depth1 > li .depth2 > li > a { display: inline-block; width: 100%; padding: 10px; }
  #gnb .depth1 > li .depth2 > li > a.hasChild:after { width: 10px; height: 10px; top: 8px; border-color: #a8b2ce; }
  #gnb .depth1 > li .depth2 > li > a.hasChild.__open:after { top: 14px; }
  #gnb .depth1 > li .depth2 > li > .menu-div { padding-bottom: 0; display: block; }
  #gnb .depth1 > li .depth2 > li > .menu-div .depth3 { padding: .3em 0; position: static; padding-left: 30px; }
  #gnb .depth1 > li .depth2 > li > .menu-div .depth3.__open { max-height: 500px; }
  #gnb .depth1 > li .depth2 > li > .menu-div .depth3 > li > a { padding: 7px 12px; color: #a8b2ce; }
  #gnb .depth1 > li .depth2 > li > .menu-div .depth3 > li > a:before { top: 3px; }
  #gnb .depth1 > li .depth2 > li > .menu-div .depth3 > li .depth4 { display: none; }
  #header .nav-bg { top: 165px; }
  #header .container .header-top { height: 100px; }
  #header .container .header-top .header-logo { margin-top: 2.1em; }
  #header .container .header-top .header-menu { bottom: 0.5em; }
  #header .container .header-bottom { height: 65px; }
  #header .container .header-bottom .gnb-area { position: static; }
  #header .container .header-top { height: 55px; }
  #header .container .header-top .header-logo { margin: 15px 0 0 0; width: 225px; height: 27px; }
  #header .container .header-top .header-menu { display: none; }
  #header .container .header-bottom { height: auto; background: none; border-top: none; }
  .header-logo { width: 310px; height: 44px; }
  .content-wrap .quick-menu { display: none; }
  #gnb .quick-menu { display: inline-block; }
  #gnb .quick-menu .section-quick-menu .h3-title { display: none; }
  #gnb .quick-menu .section-quick-menu > ul { padding: 0 1.5em; }
  #gnb .quick-menu .section-quick-menu > ul:after { display: table-cell; content: ''; clear: both; }
  #gnb .quick-menu .section-quick-menu > ul > li { display: inline-block; width: 33.3333%; padding: 5px; float: left; }
  #gnb .quick-menu .section-quick-menu > ul > li > a { display: inline-block; width: 100%; padding: 10px 0; border: 1px solid #565e7b; -webkit-box-sizing: border-box; box-sizing: border-box; color: #fff; }
  #gnb .quick-menu .section-quick-menu > ul > li > a i:before { display: inline-block; width: 100%; font-size: 36px; line-height: 70px; }
  .btn-history-back { display: inline-block; width: 27px; height: 27px; font-size: 15px; color: #acacac; position: absolute; top: 14px; left: 15px; z-index: 250; border: 1px solid #acacac; }
  .btn-menu { display: inline-block; width: 24px; height: 24px; font-size: 0px; position: absolute; top: 14px; right: 15px; z-index: 250; }
  .btn-menu:before, .btn-menu:after, .btn-menu span { display: inline-block; width: 24px; height: 3px; background-color: #494949; border-radius: 2px; content: ''; margin: 3px 0; -webkit-transition: 0.4s; transition: 0.4s; }
  .btn-menu span { visibility: visible; position: relative; opacity: 1; }
  .btn-menu.__open span { visibility: hidden; opacity: 0; }
  .btn-menu.__open:before { -webkit-transform: rotate(-45deg) translate(-6px, 6px); transform: rotate(-45deg) translate(-6px, 6px); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; background-color: #fff; }
  .btn-menu.__open:after { -webkit-transform: rotate(45deg) translate(-7px, -7px); transform: rotate(45deg) translate(-7px, -7px); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; background-color: #fff; }
  body.menu__open { overflow: hidden; }
  #footer { font-size: 13px; padding: 1em 0 0; word-break: keep-all; }
  #footer .container { max-width: 100%; padding: 0; }
  #footer .container .footer-logo { display: none; }
  #footer .footer-menu { margin-bottom: 1em; }
  #footer .footer-menu ul > li > a { font-size: 14px; padding: 5px 15px; display: inline-block; }
  #footer .family-site-area { top: -2px; right: 15px; }
  #footer .copy { margin-bottom: 1em; }
  #footer .mobile-util { display: block; } }

@media screen and (max-width: 1024px) { html { font-size: 60%; } }

@media screen and (max-width: 990px) { html { font-size: 55%; }
  #footer .footer-menu { padding: 0 7px; }
  #footer .footer-menu ul > li > a { padding: 5px 8px; } }

@media screen and (max-width: 768px) { html { font-size: 50%; }
  #gnb .gnb-container .top-menu { width: 100%; }
  #gnb.mobile .m-nav-bg { width: 90%; z-index: 300; -webkit-transition: all 0.5s ease .1s; transition: all 0.5s ease .1s; }
  #gnb .gnb-wrap { width: 90%; }
  #footer .footer-menu { padding: 0 10px; }
  #footer .footer-menu ul > li > a { padding: 5px; }
  #footer .family-site-area { position: static; padding: 0 15px 10px; }
  #footer .family-site-area .section-family-site { width: 100%; }
  #footer .family-site-area .section-family-site .inner > ul { width: 100%; margin: 0; } }

@media screen and (max-width: 480px) { #gnb .quick-menu .section-quick-menu > ul { padding: 0 0.5em; }
  #gnb .quick-menu .section-quick-menu > ul > li { padding: 3px; }
  #gnb .quick-menu .section-quick-menu > ul > li > a { font-size: 12px; letter-spacing: -1px; }
  #gnb .quick-menu .section-quick-menu > ul > li > a i:before { line-height: 50px; } }
/*# sourceMappingURL=style.css.map */