@import URL('//cdn.jsdelivr.net/font-nanum/1.0/nanumbarungothic/nanumbarungothic.css');

* { border: 0; box-sizing: border-box; margin: 0; outline: 0; padding: 0 }
HTML, BODY { font-size: 14px; margin: 0; padding: 0 }
A, BODY, BUTTON, INPUT, SELECT, TABLE, TEXTAREA { -webkit-text-size-adjust: 100%; color: #444; font-family: 'Nanum Barun Gothic', 'HelveticaNeue-Light', 'AppleSDGothicNeo-Light', 'sans-serif' }
A { text-decoration: none }
A:hover { text-decoration: underline; }
IFRAME { display: block }
UL, OL { list-style: none }

HEADER, FOOTER, MAIN, ADDRESS, SECTION, NAV { display: block }

.b { vertical-align: bottom }
.c { text-align: center }
.l { text-align: left }
.m { vertical-align: middle }
.r { text-align: right }
.t { vertical-align: top }
.bc { display: block; margin-left: auto; margin-right: auto }

.w5 { width: 5% }
.w10 { width: 10% }
.w15 { width: 15% }
.w20 { width: 20% }
.w25 { width: 25% }
.w30 { width: 30% }
.w33 { width: 33.3% }
.w35 { width: 35% }
.w40 { width: 40% }
.w45 { width: 45% }
.w50 { width: 50% }
.w55 { width: 55% }
.w60 { width: 60% }
.w65 { width: 65% }
.w66 { width: 66.6% }
.w70 { width: 70% }
.w75 { width: 75% }
.w80 { width: 80% }
.w85 { width: 85% }
.w90 { width: 90% }
.w100 { width: 100% }

.ui.icon { background-image: url('./image/icon.png'); background-size: auto 2em; color: transparent; display: inline-block; font-size: 1em; height: 1em; user-select: none; vertical-align: middle; width: 1em }
.ui.icon.more { background-position: -2em 0 }
.ui.icon.search { background-position: -3em 0 }
.ui.icon.search-white { background-position: -4em 0 }
.ui.icon.market-white { background-position: -5em 0 }
.ui.icon.cart-white { background-position: -6em 0 }
.ui.icon.book-white { background-position: -7em 0 }
.ui.icon.youtube { background-position: -8em 0 }
.ui.icon.facebook { background-position: -9em 0 }
.ui.icon.menu { background-position: -1em -1em }

.ui.button { -moz-appearance: none; -webkit-appearance: none; appearance: none; background-color: transparent; border: 1px solid; cursor: pointer; display: inline-block; font-size: 1.2em; font-weight: 700; line-height: 1em; outline: 0; padding: 1em 2em; text-align: center; text-decoration: none; -webkit-transition: background-color .3s ease-out; transition: background-color .3s ease-out; user-select: none }
.ui.button:hover { background-color: #222; border-color: #222; color: #fff }
.ui.button.positive { color: #d52729 }
.ui.button.positive:hover { background-color: #d52729; border-color: #d52729; color: #fff }
.ui.button.disabled { color: #ddd; cursor: not-allowed }
.ui.button.disabled:hover { background-color: transparent; border-color: #ddd }
.ui.button.dark { color: #fff }
.ui.button.dark:hover { background-color: #fff; border-color: #fff; color: #222 }
.ui.button.dark.positive { color: #f1e890 }
.ui.button.dark.positive:hover { background-color: #f1e890; border-color: #f1e890; color: #222 }
.ui.button.wide { display: block }

.ui.imagebutton { cursor: pointer; display: block; overflow: hidden; text-decoration: none; }
.ui.imagebutton > DIV { overflow: hidden; padding-top: 56.25%; position: relative }
.ui.imagebutton.zoom > DIV:after { background-color: #fff; content: ''; display: block; height: 100%; left: 0; opacity: 0; position: absolute; top: 0; -webkit-transition: opacity .3s ease-out; transition: opacity .3s ease-out; width: 100% }
.ui.imagebutton > DIV > IMG { display: block; height: auto; left: 50%; position: absolute; top: 50%; -webkit-transition: transform .3s ease-out; transition: transform .3s ease-out; width: 100%; -webkit-transform: scale(1, 1) translate(-50%, -50%); transform: scale(1, 1) translate(-50%, -50%); -webkit-transform-origin: 0 0; transform-origin: 0 0 }
.ui.imagebutton.zoom:hover > DIV:after { opacity: .5 }
.ui.imagebutton.zoom:hover > DIV > IMG { -webkit-transform: scale(1.05, 1.05) translate(-50%, -50%); transform: scale(1.05, 1.05) translate(-50%, -50%) }

.ui.iconbutton { cursor: pointer; display: inline-block; font-weight: 800; text-decoration: none; user-select: none }
.ui.iconbutton > DIV { background-color: #ccc; border-radius: 50%; box-sizing: content-box; color: transparent; display: inline-block; font-size: 1.5em; height: 1em; line-height: 1em; overflow: hidden; padding: .66em; -webkit-transition: background-color .3s ease-out; transition: background-color .3s ease-out; user-select: none; vertical-align: middle; width: 1em }
.ui.iconbutton > DIV > .ui.icon { display: block; font-size: 1em }
.ui.iconbutton > SPAN { display: inline-block; margin: 0 1em; vertical-align: middle }
.ui.iconbutton:hover > DIV { background-color: #d52729 }

TABLE.ui { border-collapse: COLLAPSE; border-spacing: 0; border-top: 1px SOLID #222; margin-bottom: 2em; width: 100% }
TABLE.ui.fixed { table-layout: fixed }
TABLE.ui.top TD,
TABLE.ui.top TH { vertical-align: top }
TABLE.ui TD,
TABLE.ui TH { border-bottom: 1px SOLID; border-color: #eee; padding: 1em 1em 1em 0; text-align: left }
TABLE.ui TH { font-weight: 800 }
TABLE.ui TD:first-child,
TABLE.ui TH:first-child { border-left: 0 }
TABLE.ui TD:last-child,
TABLE.ui TH:last-child { border-right: 0 }
TABLE.ui TD > EM { display: inline-block; font-style: normal; font-weight: 800; vertical-align: middle }
TABLE.ui TH > STRONG { font-size: 1.5em; font-weight: 800 }

DL.ui {  }
DL.ui > DT { margin: 2em 0 }
DL.ui > DT > HR { background-color: #ccc; display: inline-block; height: 1px; margin-top: 2em; width: 4em }
DL.ui > DT > SPAN { color: #888; display: block; font-weight: 700; margin-bottom: 1em }
DL.ui > DT > DIV { font-size: 2em; font-weight: 300; letter-spacing: -.025em; line-height: 1.25em }
DL.ui > DT > DIV > STRONG { display: block; font-weight: 800 }
DL.ui > DT > P { font-size: 1.2em; font-weight: 800; margin-top: .5em }
DL.ui > DT > EM { display: block; font-style: normal; margin-top: .5em }
DL.ui > DD { line-height: 1.5em }

HR.ui { background-color: #222; display: block; height: 3px; margin: 2em auto; position: relative; width: 9em }
HR.ui:after,
HR.ui:before { content: ''; display: block; height: 100%; position: absolute; top: 0; width: 15% }
HR.ui:after { background-color: #f39700; left: 15% }
HR.ui:before { background-color: #00a29a; left: 0 }
HR.ui.white { background-color: #fff }

UL.ui { list-style: disc; padding-left: 1.5em }
UL.ui > LI { margin: .5em 0 }
UL.ui > LI > SPAN { display: inline-block; width: 6em }
UL.ui.black { color: #aaa }
UL.ui.black > LI > SPAN { color: #fff; font-weight: 800 }

.ui.colgroup {  }
.ui.colgroup > .ui.row { border-spacing: 0; display: table; table-layout: fixed; width: 100% }
.ui.colgroup > .ui.row > .ui.col { display: table-cell }
.ui.colgroup > .ui.row > .ui.col.left { text-align: left }
.ui.colgroup > .ui.row > .ui.col.center { text-align: center }
.ui.colgroup > .ui.row > .ui.col.right { text-align: right }
.ui.colgroup.auto > .ui.row { table-layout: auto }
.ui.colgroup.bottom > .ui.row > .ui.col { vertical-align: bottom }
.ui.colgroup.middle > .ui.row > .ui.col { vertical-align: middle }
.ui.colgroup.top > .ui.row > .ui.col { vertical-align: top }
.ui.colgroup.p01 { margin-left: -.1em; margin-right: -.1em }
.ui.colgroup.p02 { margin-left: -.2em; margin-right: -.2em }
.ui.colgroup.p05 { margin-left: -.5em; margin-right: -.5em }
.ui.colgroup.p1  { margin-left: -1em; margin-right: -1em }
.ui.colgroup.p2  { margin-left: -2em; margin-right: -2em }
.ui.colgroup.p3  { margin-left: -3em; margin-right: -3em }
.ui.colgroup.p4  { margin-left: -4em; margin-right: -4em }
.ui.colgroup.p5 { margin-left: -5em; margin-right: -5em }
.ui.colgroup.p01 > .ui.row { border-spacing: .1em }
.ui.colgroup.p025 > .ui.row { border-spacing: .25em }
.ui.colgroup.p05 > .ui.row { border-spacing: .5em }
.ui.colgroup.p1 > .ui.row { border-spacing: 1em 0 }
.ui.colgroup.p2 > .ui.row { border-spacing: 2em 0 }
.ui.colgroup.p3 > .ui.row { border-spacing: 3em 0 }
.ui.colgroup.p4 > .ui.row { border-spacing: 4em 0 }
.ui.colgroup.p5 > .ui.row { border-spacing: 5em 0 }

.ui-datepicker { background-color: #f7f7f7; display: NONE; padding: 1em }
.ui-datepicker-header { padding: 1em 2em; position: RELATIVE }
.ui-datepicker-header .ui-datepicker-prev,
.ui-datepicker-header .ui-datepicker-next { cursor: POINTER; position: ABSOLUTE; top: 1em }
.ui-datepicker-header .ui-datepicker-prev { left: 1em }
.ui-datepicker-header .ui-datepicker-next { right: 1em }
.ui-datepicker-header .ui-datepicker-title { color: 222; font-size: 1.15em; font-weight: 700; text-align: CENTER }
.ui-datepicker-header .ui-datepicker-month { font-weight: 800 }
.ui-datepicker-calendar { border-collapse: COLLAPSE; border-spacing: 0; margin-top: 1em; width: 100% }
.ui-datepicker-calendar,
.ui-datepicker-calendar THEAD,
.ui-datepicker-calendar TBODY,
.ui-datepicker-calendar TR { display: block }
.ui-datepicker-calendar TR { white-space: nowrap }
.ui-datepicker-calendar TH,
.ui-datepicker-calendar TD { display: inline-block; width: 14.2857% }
.ui-datepicker-calendar THEAD TR TH { font-weight: 400; padding-bottom: 1em }
.ui-datepicker-calendar TBODY TR TD { padding-top: 14.2857%; position: RELATIVE }
.ui-datepicker-calendar TBODY TR TD .ui-state-default { align-items: center; background-color: #fff; border-radius: 50%; color: #888; display: flex; font-weight: 800; height: 80%; justify-content: center; left: 10%; overflow: hidden; position: absolute; text-decoration: none; top: 10%; width: 80% }
.ui-datepicker-calendar TBODY TR TD .ui-state-default:hover { background-color: #eee }
.ui-datepicker-calendar .ui-state-disabled .ui-state-default { background-color: transparent; color: #ccc }
.ui-datepicker-calendar TBODY TR TD.disabled .ui-state-default:after { background-color: #ccc; content: ''; display: block; height: 1px; position: absolute; transform: rotateZ(-45deg); width: 100% }
.ui-datepicker-calendar TBODY TR TD.disabled .ui-state-default:hover:before { background-color: #eee; color: #888; content: '휴무'; display: block; font-weight: 400; position: absolute; z-index: 1 }
.ui-datepicker-today A { color: #d52729; font-weight: 700 }
.ui-datepicker-calendar TBODY TR TD.disabled .ui-state-default:hover:after { display: none }
.ui-datepicker-today:before { background-color: #d52729; border-radius: 50%; content: ''; display: BLOCK; font-size: .34em; height: 1em; left: 50%; line-height: 1em; margin-left: -.5em; overflow: hidden; position: ABSOLUTE; text-align: CENTER; top: 1.75em; width: 1em; z-index: 1}
.ui-datepicker-calendar TBODY TR .ui-datepicker-current-day .ui-state-active { background-color: #d52729 !important; color: #FFF; font-weight: 800 }
.ui-datepicker-current-day:before { background-color: #fff }

.ui.map { height: 25em }
.ui.map DIV.dvMarkerTitle { color: #d52729; font-weight: 800; padding: .5em 1em; text-align: center; width: 15em }

.swiper-container { }
.swiper-container-horizontal>.swiper-pagination-bullets { bottom: 0; width: auto }
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet { background: none; font-size: .8em; height: auto; margin: 0; padding: .5em; width: auto }
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet:before { background-color: #222; content: ''; border-radius: 50%; display: block; height: 1em; line-height: 1em; overflow: hidden; width: 1em }
-.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet-active:before { background-color: #d52729 }
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet.hasNumber { background-color: #222; color: #fff; font-size: 1em; font-weight: 800; line-height: 1.75em; margin-right: .5em; padding: 0; text-align: center; width: 1.75em }
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet.hasNumber:before { display: none }
.swiper { --swiper-theme-color: #fff }

.ui.roll IMG { display: none }

.ui.toggle { user-select: none }

.ui.link { cursor: pointer; display: inline-block; font-weight: 800; text-decoration: none; vertical-align: middle }
.ui.link:after { background-image: url('./image/icon.png'); background-position: -1em -1em; background-size: auto 2em; content: ''; display: inline-block; font-size: 1.2em; height: 1em; margin-left: .2em; vertical-align: middle; width: 1em }
.ui.link:hover:after { background-position: -2em -1em }

.ui.form { display: inline-block; line-height: 1em; position: relative }
.ui.form:before,
.ui.form:after { background-color: #ddd; bottom: 0; content: ''; display: block; height: 1px; left: 0; position: absolute; width: 100%; z-index: 1 }
.ui.form:after { background-color: #222; -webkit-transition: width .3s ease-out; transition: width .3s ease-out; width: 0 }
.ui.form.focused:after,
.ui.form:hover:after { width: 100% }

.ui.form.select { min-width: 13em }
.ui.form.select BUTTON { background-color: #fff; cursor: pointer; font-weight: 700; padding: 1.5em 5em 1.5em 0; text-align: left; white-space: nowrap; width: 100% }
.ui.form.select > BUTTON { position: relative }
.ui.form.select > UL { border: 1px solid #d52729; display: none; max-height: 12em; overflow-y: auto; position: absolute; top: 0; width: 100%; z-index: 10 }
.ui.form.select > UL > LI > BUTTON { color: #888; overflow: hidden; padding-left: 1.5em; padding-right: 1.5em }
.ui.form.select > UL > LI > BUTTON:hover,
.ui.form.select > UL > LI.selected > BUTTON { color: #222; font-weight: 800 }
.ui.form.select > UL > LI > BUTTON:hover { background-color: #f7f7f7 }
.ui.form.select > BUTTON:after { background-image: url('./image/icon.png'); background-position: -7em 0; background-size: auto 2em; content: ''; display: block; height: 1em; margin-top: -.5em; position: absolute; right: 1.5em; top: 50%; width: 1em }
.ui.form.select.opened > UL { display: block }

.ui.form.text > INPUT,
.ui.form.number > INPUT,
.ui.form.password > INPUT { display: block; font-weight: 800; padding: 1.5em 0; width: 100% }
.ui.form.password > INPUT { font-family: 'Malgun Gothic', HelveticaNeue-Light, AppleSDGothicNeo-Light, sans-serif }
.ui.form.text.focused:after,
.ui.form.number.focused:after,
.ui.form.password.focused:after { background-color: #d52729 }

.ui.youtube-button { background-image: url('./image/youtube.png'); background-size: cover; display: block; height: 1em; width: 1.4456em }

.ui.indicator { display: BLOCK; font-size: 4em; height: 1em; left: 50%; margin-left: -.5em; margin-top: -.5em; position: FIXED; top: 50%;  transform: TRANSLATEZ(1px); width: 1em }
.ui.indicator > DIV { animation: indicator-circle 2.4s CUBIC-BEZIER(0, 0.2, 0.8, 1) INFINITE; background-image: url('./image/icon.png'); background-position: 0 0; background-size: auto 2em; border-radius: 50%; display: INLINE-BLOCK; height: 1em; width: 1em }
.ui.indicator > SPAN { color: #d52729; display: BLOCK; font-size: .25em; font-weight: 800; left: 50%; margin-left: -10em; position: ABSOLUTE; text-align: CENTER; top: 4.5em; width: 20em }
@keyframes indicator-circle { 0%, 100% { animation-timing-function: CUBIC-BEZIER(0.5, 0, 1, 0.5) } 0% { transform: ROTATEY(0deg) } 50% { transform: ROTATEY(1800deg); animation-timing-function: CUBIC-BEZIER(0, 0.5, 0.5, 1) } 100% { transform: ROTATEY(3600deg) } }

.ui.imagebox { background-color: #f7f7f7; background-position: center; background-size: 100% auto; background-size: cover; padding-top: 40%; margin: 1em 0 }
.ui.imagebox:last-child { margin-bottom: 0 }

.ui.hanja { font-family: 'Malgun Gothic' }

.fn.popup { cursor: pointer }

.ui.symbol { background-image: url('./image/symbol.png'); background-size: auto 1em; display: inline-block; height: 1em; width: 3.355705em }

.ui.map { height: 50em; margin: 4em 0 }
.ui.map .ui-map-marker { cursor: pointer; display: block; position: relative }
.ui.map .ui-map-marker > .ui-map-title { background-color: #fff; border: 1px solid #ddd; border-radius: 1em; box-shadow: .5em .5em 1em rgba(0, 0, 0, .1); font-weight: 800; left: 50%; line-height: 1em; padding: .5em 1em; position: absolute; top: -2em; transform: translateX(-50%); z-index: 1 }
.ui.map .ui-map-marker:after { background-image: url('./image/map-marker.png'); background-size: 100%; content: ''; display: block; font-size: 5em; height: 1em; line-height: 1em; width: 1em }
.ui.map .ui-map-marker.selected:after,
.ui.map .ui-map-marker:hover:after { background-image: url('./image/map-marker-active.png'); }
.ui.map .ui-map-marker.selected > .ui-map-title,
.ui.map .ui-map-marker:hover > .ui-map-title { background-color: #4d9c96; border-color: #4d9c96; color: #fff }

.ui.window { align-items: center; background-color: rgba(0, 0, 0, .75); display: flex; height: 100%; justify-content: center; left: 0; position: fixed; top: 0; width: 100%; z-index: 10 }
.ui.window > * { background-color: #fff; border-radius: 1em; max-height: 80%; max-width: 80%; opacity: 0; overflow-x: hidden; overflow-y: auto; padding: 2em; position: relative; transition: all .5s ease-out; transform: scale(.9); }
.ui.window > * > A.aYoutube { font-size: 3em; left: 50%; margin-left: -5em; position: absolute; text-align: center; text-decoration: none; top: 11% }
.ui.window > * > A.aYoutube > .ui.youtube-button { margin: 0 auto }
.ui.window > * > A.aYoutube > SPAN { color: #cc0000; display: block; font-size: .34em; font-weight: 800; letter-spacing: -.035em; margin-top: .5em }
.ui.window > * > IMG { width: 100% }
.ui.window.show > * { opacity: 1; transform: scale(1); }