@charset "utf-8"; html, body { -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:none; }
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, button, 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, main, nav, output, ruby, section, summary, time, mark, audio, video, input, textarea, select, svg { margin: 0; padding: 0; font: inherit; color: inherit; vertical-align: baseline; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box; }
*:after, *:before { box-sizing: border-box; }
main, header, nav, section, footer, menu, article, aside, details, figcaption, figure, hgroup { display: block; }
address,cite,code,em { font-style: inherit; font-weight: inherit; }
fieldset { border: 0; }
ol, ul { list-style: none; }
h1, h2, h3, h4, h5, h6, strong { font-weight: 700; }
small { font-weight: 100; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; }
table { border-collapse: collapse; border-spacing: 0; table-layout: fixed; }
caption, legend { width: 0; height: 0; font-size: 0; line-height: 0; overflow: hidden; }
th, td { font-family: inherit; font-size: inherit; color: inherit; line-height: 1.5; vertical-align: middle; word-break: break-all; text-overflow: ellipsis; word-wrap: break-word; }
img { display: block; border: 0; vertical-align: middle; }
button { cursor: pointer; margin: 0; padding: 0; font: inherit; color: inherit; vertical-align: middle; line-height: normal; border: 0; background: transparent; text-transform: none; overflow: visible; -webkit-appearance: button; }
button[disabled] { cursor: default; opacity: 0.5; }
a { color: inherit; text-decoration:none; -webkit-text-decoration-skip: objects; }
a:active, a:hover { outline: 0; }
video { display: block; width: 100%; }
label { vertical-align: middle; }
select { padding-left: 10px; border: 1px solid #ededed; border-radius: 0; vertical-align: middle; -webkit-appearance: none; appearance: none; background: #fff url(../img/btn-triangle.png) no-repeat 90%; background-size: 12px; }
input, textarea { vertical-align: middle; line-height: normal; border-radius: 5px; background-color: #fff; -webkit-touch-callout: default !important; -webkit-user-select: text !important; }
input[type="text"], input[type="password"], input[type="number"], input[type="email"], input[type="tel"], input[type="url"], input[type="search"], input[type="time"], input[type="file"], input[type="date"], textarea { padding: 0 20px; min-height: 40px; border: none; border: 1px solid #ededed; border-radius: 5px; background-color: #fff; -webkit-appearance: none; appearance: none; }
input[type="password"] { font-family: Arial, Tahoma, sans-serif !important; }
input[type="checkbox"], input[type="radio"] { width: auto; border: none; }
input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #fff inset; }
input::-webkit-input-placeholder { color:#ccc !important; }
input:-moz-placeholder { color:#ccc !important; opacity:1 !important; }
input::-moz-placeholder { color:#ccc !important; opacity:1 !important; }
input:-ms-input-placeholder { color:#ccc !important; }
textarea { padding: 10px; width: 100%; height: auto; line-height: 1.8; border: 1px solid #ededed; border-radius: 5px; resize: none; }
textarea::-webkit-input-placeholder { color:#ccc !important; }
textarea:-moz-placeholder { color:#ccc !important; opacity:1 !important; }
textarea::-moz-placeholder { color:#ccc !important; opacity:1 !important; }
textarea:-ms-input-placeholder { color:#ccc !important; }
input[type="text"][readonly], input[type="password"][readonly], input[type="email"][readonly], input[type="tel"][readonly], input[type="search"][readonly], input[type="text"][disabled], input[type="password"][disabled], input[type="email"][disabled], input[type="tel"][disabled], input[type="search"][disabled], textarea[readonly], textarea[disabled], select[disabled] { color: #666; background: #eaeaea; border-color: #c0c0c0; }
input[readonly], textarea[readonly] { cursor: default; }
a, button, label, input, select, textarea { -webkit-tap-highlight-color: transparent; }
a:focus, button:focus { box-shadow: inset 0 0 0 1px #e5a700; outline: 0; }
select:focus, input:focus, textarea:focus { box-shadow: inset 0 0 0 2px #e5a700; outline: 0; }

::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1); background-color: #f5f5f5; border-radius: 10px; margin: -2px; }
::-webkit-scrollbar { width: 8px; height: 8px; background-color: #f5f5f5; }
::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1); background: linear-gradient(75deg, #f1a826 0%, #f1a826 100%); }

body { min-height: 100vh; font-family: "Noto Sans KR", Arial, Tahoma, sans-serif; font-weight: 400; font-size: 16px; color: #333; background: #fff; word-break: keep-all; overflow-x: hidden; }

html.open-snb, html.open-snb body { overflow: hidden !important; }
html.is-mobile.open-snb, html.is-mobile.open-snb body { height: 100vh; }

header { position: fixed; top: 0; left: 0; width: 100%; background: #fff; z-index: 950; }
header > div > div { position: relative; margin: 0 auto; padding: 0 20px; max-width: 1240px; min-width: 320px; }
header .top { position: relative; height: 102px; background: url(../img/img-muan.png) no-repeat center 31px / 507px; }
header h1.logo { width: 182px; height: 100%; }
header h1.logo a { display: block; position: relative; top: 50%; width: 100%; height: 51px; background: url(../img/logo-top.png) no-repeat center / 182px; transform: translateY(-50%); }
header h1.logo a:focus { border-radius: 3px; box-shadow: inset 0 0 0 1px #e5a700; }
html:not(.open-snb) h1.logo a { opacity: 1 !important; transform: translateY(-50%) !important; }
header .header-btns { margin-right: 24px; position: absolute; top: 31px; right: 24px; }
html:not(.open-snb) .header-btns { opacity: 1 !important; transform: none !important; }
header .header-btns div { overflow: hidden; }
header .header-btns a { display: block; float: left; margin: 0 3px; width: 68px; line-height: 34px; font-size: 14px; text-align: center; border: 1px solid #e3e3e3; }

#gnb { background-color: #e5a700; }
#gnb > ul { margin: 0 auto; padding: 0 20px; max-width: 1240px; min-width: 320px; }
#gnb li a { display: block; font-size: 16px; }
#gnb > ul > li > a { display: block; height: 60px; line-height: 60px; font-size: 18px; font-weight: 700; overflow: hidden; }
#gnb .lnb .icon { position: relative; display: inline-block; padding-right: 16px; }
#gnb .lnb .icon i { content: ""; display: block; position: absolute; top: 7px; right: 0; width: 8px; height: 8px; border-top: 1px solid #fff; border-right: 1px solid #fff; }
#gnb .lnb .icon i:after { content: ""; display: block; width: 14px; height: 1px; background-color: #fff; transform: rotate(-45deg) translate(-6px, 0px); }

#footer { padding: 48px 0; font-size: 12px; color: #666; line-height: 1.6; border-top: 1px solid #ededed; }
#footer > div { margin: 0 auto; padding: 0 50px; max-width: 1240px; min-width: 320px; background: url(../img/logo-footer.png) no-repeat 20px top / 146px; }
#footer .customer { position: relative; top: 2px; padding-left: 175px; }
#footer .customer li > span { display: inline-block; }
#footer .customer li:not(.copy) { display: inline-block; }
#footer .customer li:not(.copy) span { margin-right: 6px; }
#footer .customer .cc-link span { background-image: linear-gradient(#e5a700,#e5a700); }

#aside-nav { margin-top: 150px; border-top: 1px solid #ededed; }
#aside-nav ul { margin: 0 auto; max-width: 1240px; min-width: 320px; }
#aside-nav ul:after { content: ""; display: block; clear: both; }
#aside-nav li { position: relative; padding: 18px 14px; float: left; font-size: 14px; }
#aside-nav li:before { content: ""; display: block; position: absolute; top: 50%; left: 0; width: 1px; height: 14px; background-color: #ccc; transform: translateY(-50%); }
#aside-nav li:first-child:before { content: none; }
#aside-nav li a { display: block; }

#wrapper { margin: 0 auto; padding-top: 162px; min-width: 320px; }
#container { min-height: 50vh; }

.skipnavigation { position: fixed; top: -100px; left: 0; padding: 10px; width: 100%; font-size: 15px; color: #fff; text-align: center; background: #e5a700; z-index: 1000000; transition: top 0.3s; }
.skipnavigation span { display: inline-block; position: relative; }
.skipnavigation span:after { content: ""; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #fff; }
.skipnavigation:focus { top: 0; }

.sr-only { position: absolute; margin: -1px; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

.scroll-top-btn { display: block; position: fixed; bottom: 12px; right: 12px; width: 40px; height: 40px; background: #e5a700; border-radius: 20px; outline: none; z-index: 10; visibility: hidden; opacity: 0; transition: height 0.3s; }
.scroll-top-btn span, .scroll-top-btn:before, .scroll-top-btn:after { content: ""; display: block; position: absolute; top: 14px; left: 50%; width: 15px; height: 2px; background-color: #fff; transform-origin: left 50%; }
.scroll-top-btn span { bottom: auto; margin-left: -1px; width: 2px; height: 0; transition: all 0.2s linear; }
.scroll-top-btn:before, .scroll-top-btn:after { transition: top 0.4s; }
.scroll-top-btn:before { transform: rotate(135deg); }
.scroll-top-btn:after { transform: rotate(45deg); }
.scroll-top-btn:focus { box-shadow: none; }
.is-online .scroll-top-btn:hover, .is-online .scroll-top-btn:focus { height: 50px; }
.is-online .scroll-top-btn:hover:before, .is-online .scroll-top-btn:hover:after, .is-online .scroll-top-btn:focus:before, .is-online .scroll-top-btn:focus:after { top: 8px; }
.is-online .scroll-top-btn:hover span, .is-online .scroll-top-btn:focus span { top: auto; bottom: 8px; height: 32px; }

section { margin: 60px 0; }
section .sec-title { margin-bottom: 50px; font-size: 38px; overflow: hidden; }
section .sec-title span { display: inline-block; }
section .sec-con-area { position: relative; margin: 0 auto; padding: 0 20px; max-width: 940px; }
.sec-con-area .scr-title { opacity: 0; transform: translateY(100%); }
.sec-con-area .scr-desc { opacity: 0; transform: translateY(4%); }

section.visual-sec { margin: 0; }
section.visual-sec .bg { height: 342px; background-repeat: no-repeat; background-position: 45% bottom; background-size: cover; }
section.visual-sec.sub1 .bg { background-image: url(../img/sub1/banner-top.jpg); }
section.visual-sec.sub2 .bg { background-image: url(../img/sub2/banner-top.jpg); }
section.visual-sec.sub3 .bg { background-image: url(../img/sub3/banner-top.jpg); }
section.visual-sec.sub4 .bg { background-image: url(../img/sub4/banner-top.jpg); }
section.visual-sec.sub5 .bg { background-image: url(../img/sub5/banner-top.jpg); }
section.visual-sec.sub6 .bg { background-image: url(../img/sub6/banner-top.jpg); }
section.visual-sec.sub7 .bg { background-image: url(../img/sub7/banner-top.jpg); }
section .cc-intro-con { padding: 55px 0; border-top: 2px solid #333; }
section .cc-intro-con.list { padding-top: 0; }
.cc-intro-con .s-title { margin-bottom: 25px; font-size: 22px; }
.cc-intro-con img { margin: 60px auto 0; max-width: 100%; }
.cc-intro-con .banner-img { margin: 0 auto 45px; }

.sec-con-area.has-search .top { position: relative; margin-bottom: 50px; padding-right: 290px; }
.sec-con-area.has-search .top .sec-title { margin-bottom: 0; }
.sec-con-area.has-search .top .search-con { position: absolute; bottom: 5px; right: 0; }

.sec-con-area.detail .cc-intro-con { border-top: 1px solid #ccc; }
.sec-con-area.detail .sec-title { margin-bottom: 5px; font-size: 24px; }
.sec-con-area.detail .top { margin-bottom: 30px; }
.sec-con-area.detail .top .info-item { overflow: hidden; }
.sec-con-area.detail .top .info-item span { display: block; float: left; position: relative; margin-right: 10px; padding-right: 12px; color: #aaa; }
.sec-con-area.detail .top .info-item span:before { content: ""; position: absolute; top: 50%; right: 0; margin-top: -7px; width: 1px; height: 16px; background-color: #e5e5e5; }
.sec-con-area.detail .top .info-item span:first-child { padding-left: 0; }
.sec-con-area.detail .top .info-item span:last-child:before { content: none; }
.sec-con-area.has-list-btn .sec-title { padding-right: 85px; }

.sec-con-area.has-list-btn .cc-list-btn-con { position: absolute; top: -40px; right: 20px; min-height: 40px; opacity: 0; transform: translateX(-50px); }
.sec-con-area.has-list-btn .cc-list-btn { display: inline-block; width: 70px; font-weight: 500; line-height: 40px; text-align: center; border-radius: 5px; background-color: #ededed; }
.sec-con-area.has-list-btn .cc-list-btn span { position: relative; left: 6px; }
.sec-con-area.has-list-btn .cc-list-btn span:before { content: ""; display: inline-block; position: absolute; top: 50%; left: -15px; width: 10px; height: 10px; border-left: 1px solid #222; border-bottom: 1px solid #222; transform: rotate(45deg) translateY(-50%); }
.sec-con-area.revealed { padding-bottom: 50px; }
.sec-con-area.revealed .cc-list-btn-con { top: auto; bottom: 0; right: 0; padding: 0 20px; width: 100%; text-align: right; }

.select-nav { border-bottom: 1px solid #e5e5e5; }
.select-nav ul { margin: 0 auto; max-width: 1120px; overflow: hidden; }
.select-nav li { display: block; float: left; height: 50px; border-left: 1px solid #e5e5e5; }
.select-nav li:last-child { border-right: 1px solid #e5e5e5; }
.select-nav .home-btn { display: block; width: 60px; height: 100%; background: url(../img/home.png) no-repeat center; }
.select-nav select { padding-right: 40px; min-width: 150px; height: 100%; border: none; }
.select-nav select [selected] { color: #b28f2b; }

.hidden { overflow: hidden !important; }
.fc-brown { color: #b28f2b; }
.inblock { display: inline-block; }
.ta-center { text-align: center !important; }
.ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.no-con { display: flex; align-items: center; justify-content: center; height: 30vh; font-size: 18px; }

.cc-link { max-width: 100%; vertical-align: middle; }
.cc-link > span { position: relative; background-repeat: no-repeat; background-position: bottom left; background-size: 0% 1px; background-image: linear-gradient(70deg,#e5a700,#e5a700); z-index: 3; }
td .cc-link { display: block; }
.is-online .cc-link:focus { box-shadow: none; }
.is-online .cc-link:hover span, .is-online .cc-link:focus span { background-size: 100% 1px; transition: all 0.5s ease-in-out; }
.is-online .cc-link.on span { background-size: 100% 1px; }

.cc-txts li { line-height: 1.7; color: #666; }
.cc-txts li.indent { padding-left: 10px; text-indent: -10px; }
.cc-txts.mg li { margin-top: 25px; }
.cc-txts.mg li:first-child { margin-top: 0; }

.cc-bullet { position: relative; padding-left: 10px; }
.cc-bullet:before { content: "-"; position: absolute; top: 1px; left: 0; }
.cc-bullet.asterisk:before { content: "*"; top: 4px; }

.cc-table table { width: 100%; table-layout: fixed; }
.cc-table th, .cc-table td { padding: 5px; }
.cc-table tbody tr { border-bottom: 1px solid #edeeed; }
.cc-table tbody th { text-align: left; }
.cc-table tbody th strong { font-size: 24px; }
.list-table th, .list-table td { height: 70px; }
.list-table thead th { border-bottom: 1px solid #ccc; }
.list-table thead th { font-weight: 700; text-align: left; }
.list-table td.title { padding-right: 20px; }
.list-table tr.notice td { font-weight: 500; }
.list-table tr.notice td:first-child { color: #e5a700; }

.cc-bbs-list li { border-bottom: 1px solid #ededed; }
.cc-bbs-list li a { display: block; padding: 40px 70px 40px 0; background: url(../img/btn-go-1.png) no-repeat right 34px center / 20px; }
.cc-bbs-list .info { margin-bottom: 10px; font-size: 14px; color: #999; }
.cc-bbs-list .info span { margin-right: 14px; }
.cc-bbs-list .info em { color: #e5a700; }
.cc-bbs-list .title { font-size: 18px; font-weight: 700; }

.search-con { height: 40px; border-radius: 4px; background: #fff; opacity: 0; transform: translateY(30px); }
.search-con fieldset { display: inline-block; position: relative; }
.search-con select { float: left; margin-right: -1px; width: 100px; height: 40px; }
.search-con input { float: left; width: 180px; padding-right: 40px; border-left: 1px solid #ededed; border-radius: 0; }
.search-con button { position: absolute; top: 0; right: 0; width: 40px; height: 100%; background: url(../img/btn-search.png) no-repeat center / 17px; }

.grid-con:after { content: ""; display: block; clear: both; }
.grid-con > .grid-item { display: block; float: left; width: 33.33%; }
.grid-con.col-2 > .grid-item { width: 50%; }

.fg-thumb-list ul { margin: 0 -15px; min-height: 250px; }
.fg-thumb-list ul::after { content: ""; display: block; clear: both; }
.fg-thumb-list li { float: left; width: 33.33%; margin-bottom: 60px; padding: 0 15px; }
.fg-thumb-list a { display: block; border: 1px solid #ededed; border-radius: 10px; overflow: hidden; }
.fg-thumb-list .thumb { position: relative; height: 166px; background: #e6e2d8 url(../img/thumb-logo.png) no-repeat center / 157px; overflow: hidden; }
.fg-thumb-list .thumb .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; }
.fg-thumb-list figcaption { padding: 24px 20px; border-top: 1px solid #ededed; }
.fg-thumb-list .ellp { display: block; font-size: 18px; font-weight: 500; word-break: break-all; letter-spacing: -2px; }
.fg-thumb-list .info-item { overflow: hidden; }
.fg-thumb-list .info-item span { display: block; float: left; position: relative; margin-right: 10px; padding-right: 12px; font-size: 14px; color: #aaa; }
.fg-thumb-list .info-item span:before { content: ""; position: absolute; top: 50%; right: 0; margin-top: -7px; width: 1px; height: 14px; background-color: #e5e5e5; }
.fg-thumb-list .info-item span:first-child { padding-left: 0; }
.fg-thumb-list .info-item span:last-child:before { content: none; }
.fg-thumb-list.video .thumb { position: relative; height: 177px; }
.fg-thumb-list.video .thumb:after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../img/icon-play.png) no-repeat center / 56px; }
.is-online .fg-thumb-list a:hover, .is-online .fg-thumb-list a:focus { box-shadow: 0 0 16px 4px rgba(4, 0, 0, 0.1); }

.fg-thumb-list.blur .thumb { background: none; overflow: hidden; }
.fg-thumb-list.blur .thumb .cover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center top; background-size: cover; z-index: 1; -webkit-filter: blur(10px); filter: blur(10px); }
.fg-thumb-list.blur .thumb .img { position: absolute; left: 50%; bottom: -1px; box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.2); transform: translateX(-50%); z-index: 2; }
.fg-thumb-list.blur .thumb .cover.none { background: #eee !important; }
.fg-thumb-list.bottom .thumb .img { bottom: -35px; }

.cc-paging { margin-top: 40px; text-align: center; }
.cc-paging a { display: inline-block; position: relative; width: 36px; height: 36px; line-height: 33px; font-size: 16px; color: #666; vertical-align: middle; border-radius: 50%; transition: 0.3s; }
.cc-paging .num.on { color: #fff !important; background-color: #e5a700; }
.cc-paging .arrow.prev { margin-right: 5px; }
.cc-paging .arrow.next { margin-left: 5px; }
.cc-paging .arrow:after { content: ""; display: block; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; margin-top: -5px; margin-left: -5px; }
.cc-paging .arrow.prev:after { border-left: 1px solid #050001; border-top: 1px solid #050001; transform: rotate(-45deg); }
.cc-paging .arrow.next:after { border-right: 1px solid #050001; border-bottom: 1px solid #050001; transform: rotate(-45deg); }

.is-online .cc-paging a.num:hover, .is-online .cc-paging a.num:focus { color: #e5a700; }
.is-online .cc-paging .arrow:hover:after, .is-online .cc-paging .arrow:focus:after { border-color: #e5a700; }

.is-online .hover-effect { transition: all 0.2s linear; }
.is-online .hover-effect:hover, .is-online .hover-effect:focus { transform: translateY(-15px); }
.is-online .hover-effect[target]:focus { transform: none !important; }

.youtube-con { position: relative; margin-top: 45px; padding-bottom: 56.25%; height: 0; border-radius: 20px; background: #e6e2d8; overflow: hidden; }
.youtube-con iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; }

.editor-content { line-height: 1.7; text-overflow: ellipsis; word-wrap: break-word; word-break: keep-all; }
.editor-content * { font-family: inherit !important; }
.editor-content img, .editor-content table { max-width: 100% !important; }
.editor-content img { margin: 40px auto !important; }
.editor-content table { margin: auto; table-layout: auto; }
.editor-content .img { margin-bottom: 50px; overflow: hidden; }
.editor-content .img.bg { border-radius: 20px; background-color: #f4f4f4; }
.editor-content .img img { margin: 0 auto !important; width: 60% !important; }
.editor-content a[href] { border-bottom: 1px solid #666; }

@media all and (min-width: 481px){
.fg-thumb-list .ellp { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-height: 18px; }
}
@media all and (min-width: 1000px){
.btn-sm-toggle { display: none; }
#gnb { opacity: 1 !important; visibility: visible !important; transform: none !important; z-index: 999; }
#gnb li a { color: #fff; }
#gnb > ul:after { content: ""; display: block; clear: both; }
#gnb > ul > li { float: left; width: 13.5%; opacity: 1 !important; transform: none !important; }
#gnb > ul > li:nth-of-type(6), #gnb > ul > li:nth-of-type(7) { width: 16.25%; }
#gnb > ul > li > a { font-weight: 500; text-align: center; overflow: hidden; }
#gnb > ul > li > a:focus { box-shadow: none; }
#gnb > ul > li > a span { display: inline-block; position: relative; }
#gnb > ul > li > a span:after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #fff; border-radius: 2px; z-index: 3; opacity: 0; visibility: hidden; transform: scaleX(0); transition: transform 0.3s , visibility 0s 0.3s, opacity 0.2s; }
#gnb > ul > li.on > a { cursor: default; }
#gnb > ul > li.on > a span:after { visibility: visible; opacity: 1; transform: scaleX(1); transition: transform 0.3s; }
#gnb > ul > li:hover > a span:after, #gnb > ul > li > a:focus span:after, #gnb > ul > li.focus-in > a span:after { visibility: visible; opacity: 1; transform: scaleX(1); transition: transform 0.3s; }
#gnb .lnb { position: relative; overflow: hidden; max-height: 0; visibility: hidden; transition: 0.3s; }
#gnb .lnb ul { padding: 25px 0 50px; width: 100%; height: 310px; border-left: 1px solid #fff; background-color: #e5a700; }
#gnb li:first-child .lnb ul { border-left: none; }
#gnb .lnb a { padding: 5px 10px; font-size: 15px; font-weight: 100; letter-spacing: -0.5px; transition: 0.1s; }
#gnb .lnb a span { display: inline-block; position: relative; padding-right: 5px; white-space: nowrap; }
#gnb .lnb a span:after { content: ""; display: block; position: absolute; bottom: 0; right: 0; width: 0%; height: 1px; background-color: #fff; transition: 0.3s; }
#gnb .lnb a:hover { font-weight: 400; }
#gnb .lnb a:focus { box-shadow: none; }
#gnb .lnb a:hover span:after, #gnb .lnb a:focus span:after { right: auto; left: 0; width: 100%; }

#gnb .toggle-lnb-btn { display: none; }
header.active-gnb #gnb { position: relative; }
header.active-gnb #gnb > ul > li:first-child:after { content: ""; display: block; position: absolute; top: 60px; left: 0; width: 100vw; height: 1px; background-color: #ededed; z-index: 5; }

header.active-gnb #gnb .lnb { max-height: 310px; visibility: visible; }
#side-sub-link { display: none; }
}
@media all and (min-width: 1240px){
#gnb > ul > li { max-width: 170px; }
#gnb .lnb a { padding: 5px 15px; font-size: 14px; }
}
@media all and (min-width: 1400px){
#side-sub-link { display: block; position: fixed; left: 50%; top: 162px; width: 100%; max-width: 1500px; transform: translateX(-50%); z-index: 10; }
#side-sub-link .left, #side-sub-link .right { position: absolute; top: 0px; }
#side-sub-link .left { left: 8px; }
#side-sub-link .right { right: 0; }
#side-sub-link a { display: block; width: 127px; height: 155px; background-repeat: no-repeat; background-position: center; background-size: cover; transform: translateX(0px); transition: 0.2s linear; }
#side-sub-link .left a:hover, #side-sub-link .left a:focus { transform: translateX(10px); }
#side-sub-link .right a:hover, #side-sub-link .right a:focus { transform: translateX(-10px); }
#side-sub-link a:focus { box-shadow: none; }
#side-sub-link a span { position: absolute; margin: -1px; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
#side-sub-link .down-item1 { background-image: url(../img/img-sidebanner-1.png); }
#side-sub-link .down-item2 { background-image: url(../img/img-sidebanner-2.png); }
#side-sub-link .down-item3 { height: 185px; background-image: url(../img/img-sidebanner-3.png); }
#side-sub-link .down-item4 { background-image: url(../img/img-sidebanner-4.png); }
#side-sub-link .down-item5 { margin-left: 15px !important; width: 108px; height: 140px; background-image: url(../img/img-sidebanner-5.png); }
header.active-gnb #side-sub-link .left { left: -100%; }
header.active-gnb #side-sub-link .right { right: -100%; }
}

@media all and (max-width: 999px){
#wrapper { padding-top: 70px; }
header { border-bottom: 1px solid #eee; }
header > div:after { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.7); z-index: 980; visibility: hidden; opacity: 0; transform: translateX(-100%); }
header .top { padding: 0; height: 70px; background: none; }
header h1.logo { margin: 0 auto; }
header h1.logo a { height: 70px; background-size: 70%; }
header .header-btns { display: none; }
header .header-btns a { transition: 0.3s; }
header .header-btns a:hover { color: #e5a700; }
#gnb { display: block; position: fixed; top: 0; left: 0; padding: 70px 0 0; width: 100%; max-width: 320px; height: 100%; text-align: left; background: #fff; z-index: 990; visibility: hidden; opacity: 0; }
#gnb li a { transition: 0.3s; }
#gnb > ul { padding: 0 0 100px 0; height: 100%; border-top: 1px solid #eee; border-right: 1px solid #eee; overflow-x: hidden; overflow-y: auto; }
#gnb > ul > li:not(.sub-link) { border-bottom: 1px solid #eee; }
#gnb > ul > li > a { padding: 0 60px 0 20px; height: 70px; line-height: 70px; font-weight: 400; color: #666; text-align: left; }
#gnb .toggle-lnb-btn { display: block; position: absolute; top: 0; right: 0; width: 50px; height: 70px; text-align: center; box-shadow: none !important; }
#gnb .toggle-lnb-btn i { display: inline-block; position: relative; width: 20px; height: 20px; }
#gnb .toggle-lnb-btn i:before, #gnb .toggle-lnb-btn i:after { content: ""; display: inline-block; position: absolute; top: 50%; width: 12px; height: 2px; background-color: #666; border-radius: 1px; -webkit-transition: all 0.2s; transition: all 0.2s; }
#gnb .toggle-lnb-btn i:before { left: 0; transform: rotate(45deg); }
#gnb .toggle-lnb-btn i:after { right: 0; transform: rotate(-45deg); }
#gnb > ul > li.on > a, .is-online #gnb li > a:hover, .is-online #gnb li > a:focus { color: #e5a700; box-shadow: none; }
#gnb > ul > li.show-lnb .toggle-lnb-btn i:before, #gnb > ul > li.show-lnb .toggle-lnb-btn i:after, .is-online #gnb .toggle-lnb-btn:focus i:before, .is-online #gnb .toggle-lnb-btn:focus i:after { background-color: #e5a700; }
#gnb > ul > li.show-lnb .toggle-lnb-btn i:before { transform: rotate(-45deg); }
#gnb > ul > li.show-lnb .toggle-lnb-btn i:after { transform: rotate(45deg); }

#gnb .lnb { height: 0; border-top: 1px solid #eee; overflow: hidden; visibility: hidden; opacity: 0; transform: translateY(20px); transition: transform 0.3s ease-in-out 0s, visibility 0s linear 0.3s, height 0s linear 0.01s; }
#gnb .lnb li:first-child { margin-top: 10px; }
#gnb .lnb li:last-child { margin-bottom: 10px; }
#gnb > ul > li.show-lnb .lnb { height: auto; visibility: visible; opacity: 1; transform: translateY(0px); transition: transform 0s, 0s, 0.3s; }
#gnb .lnb li a > span { display: block; padding: 10px 30px; font-size: 15px; }

#aside-nav { display: none; }
#footer { margin-top: 100px; }

.btn-sm-toggle { position: fixed; top: 0; left: 0; width: 60px; height: 60px; box-shadow: none !important; z-index: 999; }
.btn-sm-toggle span { display: block; position: absolute; top: 50%; left: 25%; width: 25px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.btn-sm-toggle span:before, .btn-sm-toggle span:after { content: ""; }
.btn-sm-toggle span em, .btn-sm-toggle span:before, .btn-sm-toggle span:after { display: block; position: absolute; left: 0; width: 100%; height: 3px; background: #414376; border-radius: 2px; transition: transform 0.3s; }
.btn-sm-toggle span em { transition: transform 0.3s; }
.btn-sm-toggle span:before { transform: translateY(-8px); }
.btn-sm-toggle span:after { transform: translateY(8px); }
html.open-snb .btn-sm-toggle span em, html.open-snb .btn-sm-toggle span:before, html.open-snb .btn-sm-toggle span:after { background: #e5a700 !important; }
html.open-snb .btn-sm-toggle span em { transform: scale(0); }
html.open-snb .btn-sm-toggle span:before { transform: rotate(-135deg) translate(0px, 0px); }
html.open-snb .btn-sm-toggle span:after { transform: rotate(135deg) translate(0px, 0px); }
html.open-snb header > div:after { visibility: visible; opacity: 1; transform: translateX(0%); transition: all 0.2s; }
html.open-snb header .top { position: absolute; top: 0; left: 0; height: 116px; z-index: 999; }

html.open-snb #gnb { padding-top: 116px; }
html.open-snb header h1.logo { height: 70px; }
html.open-snb header .header-btns { display: block; position: static; margin: 0; width: 100%; border-top: 1px solid #eee; }
html.open-snb header .header-btns a { position: relative; margin: 0; width: 50%; line-height: 45px; font-size: 15px; font-weight: 500; border: none; }
html.open-snb header .header-btns a ~ a:before { content: ""; display: block; position: absolute; top: 30%; left: 0; width: 1px; height: 40%; background-color: #ddd; }
section { margin: 50px 0; }
section.visual-sec { display: none; }
section .sec-title { margin-bottom: 20px; }
#side-sub-link { padding: 10px 0; }
#side-sub-link a { display: block; position: relative; padding: 15px 20px; font-size: 16px; color: #666; }
#side-sub-link a:after { content: ""; position: absolute; width: 9px; height: 16px; background: url('data:image/svg+xml; utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 9 16" width="9px"><path fill="%23777777" d="M.3 14.3c-.4.4-.4 1.02 0 1.4.38.4 1 .4 1.4 0l7-7c.4-.4.4-1.02 0-1.4l-7-7C1.3-.1.68-.1.3.3c-.4.38-.4 1 0 1.4L6.6 8 .3 14.3z"></path></svg>') no-repeat center / 80%; transform: translate(8px, 5px); }
#side-sub-link strong { font-weight: 400; }
#side-sub-link .down-item1 strong { color: #00a1c1; }
#side-sub-link .down-item2 strong { color: #fe792d; }
#side-sub-link .down-item3 strong { color: #4e68f9; }
#side-sub-link .down-item4 strong { color: #f35f3b; }
}
@media all and (max-width: 740px){
.sec-con-area.has-search .top { margin-bottom: 0; padding-right: 0; }
.sec-con-area.has-search .top .search-con { position: static; margin: 20px 0 10px; text-align: right; }
.fg-thumb-list li { margin-bottom: 30px; width: 50%; }
}
@media all and (max-width: 640px){
#footer .customer li:first-child > span { display: block; }
.cc-bbs-list li a { padding: 30px 40px 30px 0; background-position: right 15px center; }
}
@media all and (max-width: 500px){
#footer { padding: 30px 0; text-align: center; }
#footer > div { padding-top: 55px; background-position: 48% top; }
#footer .customer { padding-left: 0; }
#footer .customer .tel { display: block; }
#footer .customer span { white-space: nowrap; }
}
@media all and (max-width: 480px){
.fg-thumb-list li { float: none; width: 100%; }
.fg-thumb-list .thumb { height: 25vh; }
.fg-thumb-list.video .thumb { height: 38vh; }
.fg-thumb-list.blur li { margin-left: auto; margin-right: auto; width: 80%; min-width: 200px; }
.fg-thumb-list .thumb { height: 23vh; }
}
@media all and (max-width: 400px){
.cc-bbs-list li a { padding-right: 0; background-position: right 15px top 15px; }
}

@media print {
.scroll-top-btn { display: none; }
}