* { border: 0; box-sizing: BORDER-BOX; margin: 0; outline: 0; padding: 0; -webkit-overflow-scrolling: touch; }

.ui.button { background-color: #007eda; border-radius: .25em; color: #fff; cursor: pointer; font-weight: 800; display: inline-block; line-height: 1em; margin: .5em; overflow: hidden; padding: 1em 2em; text-decoration: none; vertical-align: middle }
.ui.button.wide { display: block; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; text-align: center; width: 100% }
.ui.button.hollow { background: none; color: #222; }
.ui.button.disabled { background-color: #ddd }
.ui.button.negative { background-color: #eee; color: #676767 }

.ui.button.has-icon { padding-left: 2.5em; position: relative }
.ui.button.has-icon > I { color: #007eda; font-size: 1em; left: 0; margin-top: -.5em; position: absolute; top: 50% }
.ui.button.wide.has-icon { text-align: left }

.ui.colgroup {  }
.ui.colgroup > .ui.row { border-collapse: separate; 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 0; margin: .1em 0 }
.ui.colgroup.p025 > .ui.row { border-spacing: .25em 0; margin: .25em 0 }
.ui.colgroup.p05 > .ui.row { border-spacing: .5em 0; margin: .5em 0 }
.ui.colgroup.p1 > .ui.row { border-spacing: 1em 0; margin: 1em 0 }
.ui.colgroup.p2 > .ui.row { border-spacing: 2em 0; margin: 2em 0 }
.ui.colgroup.p3 > .ui.row { border-spacing: 3em 0; margin: 3em 0 }
.ui.colgroup.p4 > .ui.row { border-spacing: 4em 0; margin: 4em 0 }
.ui.colgroup.p5 > .ui.row { border-spacing: 5em 0; margin: 5em 0 }

.ui.icon { background-image: URL('./image/icon.png?rev=11'); background-repeat: NO-REPEAT; background-size: AUTO 3em; color: TRANSPARENT; display: INLINE-BLOCK; font-size: 1em; height: 1em; overflow: HIDDEN; text-decoration: NONE; vertical-align: -.1em; width: 1em }
.ui.icon.logo { background-position: 0 0 }
.ui.icon.kakaotalk { background-position: -1em 0 }
.ui.icon.naver { background-position: -2em 0 }
.ui.icon.facebook { background-position: -3em 0 }
.ui.icon.email { background-position: -4em 0 }
.ui.icon.tel { background-position: -5em 0 }
.ui.icon.calendar { background-position: -6em 0 }
.ui.icon.confirm-white { background-position: -7em 0 }
.ui.icon.confirm { background-position: -8em 0 }
.ui.icon.close { background-position: -9em 0 }
.ui.icon.add-white { background-position: -10em 0 }
.ui.icon.google { background-position: -11em 0 }
.ui.icon.back { background-position: -12em 0 }
.ui.icon.tab-home { background-position: -13em 0 }
.ui.icon.coin { background-position: -14em 0 }
.ui.icon.arrow-right { background-position: -15em 0 }
.ui.icon.receipt-3d { background-position: -16em 0 }
.ui.icon.verify-3d { background-position: -17em 0 }
.ui.icon.tab-card { background-position: 0 -1em }
.ui.icon.tab-qr { background-position: -1em -1em }
.ui.icon.tab-mypage { background-position: -2em -1em }
.ui.icon.tab-all { background-position: -3em -1em }
.ui.icon.card-3d { background-position: -4em -1em }
.ui.icon.qr-3d { background-position: -5em -1em }
.ui.icon.mypage-3d { background-position: -6em -1em }
.ui.icon.children-3d { background-position: -7em -1em }
.ui.icon.thunder-3d { background-position: -8em -1em }
.ui.icon.nori { background-position: -9em -1em }
.ui.icon.security-3d { background-position: -10em -1em }
.ui.icon.breakdown-3d { background-position: -11em -1em }
.ui.icon.userinfo-3d { background-position: -12em -1em }
.ui.icon.passcode-3d { background-position: -13em -1em }
.ui.icon.quit-3d { background-position: -14em -1em }
.ui.icon.agreement-3d { background-position: -15em -1em }
.ui.icon.private-3d { background-position: -16em -1em }
.ui.icon.menu-white { background-position: -17em -1em }
.ui.icon.edit { background-position: 0em -2em }
.ui.icon.profile { background-position: -1em -2em }
.ui.icon.arrow-up { background-position: -2em -2em }
.ui.icon.arrow-down { background-position: -3em -2em }
.ui.icon.close-red { background-position: -4em -2em }
.ui.icon.arrow-left-white { background-position: -5em -2em }
.ui.icon.arrow-right-white { background-position: -6em -2em }
.ui.icon.list { background-position: -7em -2em }
.ui.icon.picture { background-position: -8em -2em }

.ui.logo { background-image: url('./image/logo.png'); background-position: left center; background-repeat: no-repeat; background-size: auto 100%; color: transparent; display: inline-block; height: 1em; overflow: hidden; user-select: none; width: 4.33702em }

HR.ui { background-color: #eee; border: 0; display: block; height: 1px; margin: 2em 0 }
HR.ui.hollow { background: none }

LABEL.ui,
FIELDSET.ui { font-weight: 800; margin: 2em 0; overflow: hidden; position: relative }
LABEL.ui { display: block; }
LABEL.ui:before,
LABEL.ui:after { bottom: 0; content: ''; display: block; position: absolute }
LABEL.ui:before { background-color: #ddd; height: 1px; width: 100% }
LABEL.ui:after { transition: all 500ms ease-in-out; background-color: #007eda; height: 2px; left: -1px; width: 1px }
LABEL.ui:hover:after { left: 0; width: 100% }
LABEL.ui > INPUT { display: block; height: 3em; line-height: 1em; width: 100% }
LABEL.ui > INPUT[type=file] { padding: 1em 0 }
LABEL.ui > INPUT:read-only { color: #888 }
LABEL.ui.has-icon { position: relative }
LABEL.ui.has-icon > I { bottom: 1em; color: #007eda; position: absolute; right: .5em }
LABEL.ui > SELECT { background: none; height: 3em; width: 100% }
LABEL.ui > TEXTAREA { border: 1px solid #ddd; display: block; margin-top: 1em; padding: 1em; width: 100% }
FIELDSET.ui > LABEL.ui:after,
FIELDSET.ui > LABEL.ui:before { display: none }
FIELDSET.ui { display: flex; gap: .5em; table-layout: fixed; width: 100% }
FIELDSET.ui > LEGEND { margin-bottom: 1em }
FIELDSET.ui > LABEL.ui { flex-grow: 1; margin: 0; position: relative }
FIELDSET.ui > LABEL.ui > INPUT { height: 1px; left: -10000px; position: absolute; width: 1px }
FIELDSET.ui > LABEL.ui > .ui.caption { border: 1px solid #007eda; border-radius: .5em; display: block; line-height: 1em; padding: 1em; text-align: center }
FIELDSET.ui > LABEL.ui > INPUT:checked+.ui.caption { background-color: #007eda; color: #fff }

UL.ui { border-top: 1px solid #eee; margin: 2em 0 }
UL.ui > LI { display: flex; justify-content: space-between; margin: 2em 0 }
UL.ui > LI > .ui.title { font-weight: 800 }
UL.ui > LI > .ui.title > .ui.subtitle { color: #888; font-size: .9em; font-weight: 300 }
UL.ui > LI > .ui.value { color: #007eda; font-weight: 800 }

.ui-datepicker { background-color: #FFF; box-shadow: 0 0 1em RGBA(0, 0, 0, .2); display: NONE }
.ui-datepicker-header { padding: 1.5em 2em; position: RELATIVE }
.ui-datepicker-header .ui-datepicker-prev,
.ui-datepicker-header .ui-datepicker-next { border: 1px SOLID #DDD; border-radius: .25em; cursor: POINTER; padding: .5em 1em; 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: #007eda; font-size: 1.15em; font-weight: 800; text-align: CENTER }
.ui-datepicker-calendar { border-collapse: COLLAPSE; border-spacing: 0; width: 100% }
.ui-datepicker-calendar THEAD TR TH { background-color: #FFF; padding-bottom: 1em }
.ui-datepicker-calendar TBODY TR TD {  }
.ui-datepicker-calendar .ui-state-disabled .ui-state-default { color: #DDD }
.ui-datepicker-calendar .ui-state-default { border-radius: 50%; color: #444; display: BLOCK; line-height: 1em; margin: 0 AUTO; padding: 1em 0; text-align: CENTER; text-decoration: none; position: RELATIVE; width: 3em }
.ui-datepicker-calendar .ui-datepicker-today .ui-state-default { background-color: #f3f7ff; color: #007eda; font-weight: 800 }
.ui-datepicker-calendar .ui-state-default.hasdata:before { background-color: #007eda; border-radius: 50%; top: .5em; content: ''; display: BLOCK; font-size: .33em; font-weight: 800; height: 1em; left: 50%; line-height: 1em; margin-left: -.5em; overflow: HIDDEN; position: ABSOLUTE; text-align: CENTER; width: 1em }
.ui-datepicker-calendar .ui-datepicker-current-day .ui-state-default,
.ui-datepicker-calendar .ui-state-default.selected { background-color: #007eda; color: #FFF; font-weight: 800 }
.ui-datepicker-calendar .ui-datepicker-current-day .ui-state-default:before,
.ui-datepicker-calendar .ui-state-default.selected.hasdata:before { background-color: #FFF; z-index: 1 }

IFRAME#ifAction { height: 1px; left: -10000px; position: absolute; width: 1px }

.init, A, BODY, BUTTON, INPUT, SELECT, TABLE, TEXTAREA { color: #222; font-family: HelveticaNeue-Light,AppleSDGothicNeo-Light,sans-serif; font-size: 16px; font-weight: 400; letter-spacing: -.035em; line-height: 1.35em }

A { text-decoration: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 194, 223, .2); }
UL, LI { list-style: none }
FOOTER, HEADER, MAIN { display: block }

HTML, BODY { min-height: 100%; min-width: 100%; max-width: 100%; overflow-x: hidden; }

BODY {  }
BODY.is-member { padding-bottom: 5em }

MAIN { height: 100%; overflow-y: auto; padding: 2em 1em 5em }
MAIN > HEADER { background-image: url('./image/logo-header.png'); background-position: right .5em top; background-repeat: no-repeat; background-size: 2em; margin-bottom: 4em }
MAIN H1 { font-size: 1.5em; font-weight: 800; letter-spacing: -.05em; line-height: 1em }
MAIN H2 { font-size: 1.25em; font-weight: 800; letter-spacing: -.05em; line-height: 1em }
MAIN P { line-height: 1.5em; margin: 1em 0 2em; opacity: .5 }

MAIN > HEADER > H1 { line-height: 1.34em; padding-right: 3em }
MAIN > HEADER > H1 > A { cursor: pointer; display: none; font-size: .75em; left: -1em; padding: 1em; position: absolute; top: 50%; transform: translateY(-50%) }
MAIN > HEADER > H1 > A > .ui.icon { display: block }

MAIN > HEADER.has-control { background: none }
MAIN > HEADER.has-control > H1 > .ui.button { font-size: .66em; left: auto; margin: 0; padding: 1em; right: 1em; top: 1.25em; transform: none }

MAIN { background-color: #fff; height: 100%; left: 0; overflow-x: hidden; position: absolute; top: 0; transition: all 500ms cubic-bezier(1, 0, 0, 1); width: 100%; z-index: 5 }
MAIN.mainFragment { background-color: #fff; left: 100% }
MAIN.mainFragment.opened { box-shadow: 0 0 1em rgba(0, 0, 0, .1); left: 0 }

MAIN.mainFragment > HEADER > H1,
MAIN > HEADER.has-back > H1 { padding-left: 1.25em; position: relative; }
MAIN.mainFragment > HEADER > H1 > A,
MAIN > HEADER.has-back > H1 > A { display: block }

MAIN.scrolled > HEADER {  }
MAIN.scrolled > HEADER > H1 { background-color: rgba(255, 255, 255, .75); backdrop-filter: blur(.5em); -webkit-backdrop-filter: blur(.5em); color: #222; font-size: 1em; margin-left: -1em; padding: 1.5em; position: fixed; text-align: center; top: 0; width: 100%; z-index: 5 }
MAIN.scrolled > HEADER > H1 > A { font-size: 1.25em; left: 0 }
MAIN.scrolled > HEADER > P { display: none }
MAIN.scrolled > HEADER.has-control > H1 > .ui.button { font-size: 1.25em; left: auto; margin: 0; padding: .5em; right: .5em; top: 50%; transform: translateY(-50%) }
MAIN.scrolled > HEADER.has-control > H1 > .ui.button > SPAN { display: none }

MAIN.mainFragment.theme-dark { background-color: #222 }
MAIN.mainFragment.theme-dark > HEADER > H1 { color: #fff }
MAIN.mainFragment.theme-dark > HEADER > H1 > A > .ui.icon { filter: invert(1) }
MAIN.mainFragment.theme-dark.scrolled > HEADER > H1 { background-color: rgba(0, 0, 0, .75) }
MAIN.mainFragment.theme-dark .ui.button.negative { background-color: #444; color: #fff }

FOOTER { bottom: 0; position: fixed; width: 100%; z-index: 5 }
FOOTER > NAV > UL { background-color: #fff; display: flex }
FOOTER > NAV > UL > LI { flex-basis: 0; flex-grow: 1; opacity: .25; }
FOOTER > NAV > UL > LI > A { color: #222; display: block; font-weight: 700; padding: .75em 0; text-decoration: none; }
FOOTER > NAV > UL > LI > A > .fa-solid { display: block; text-align: center }
FOOTER > NAV > UL > LI > A > SPAN { display: block; font-size: .66em; line-height: 1em; margin-top: .5em; text-align: center }
FOOTER > NAV > UL > LI.selected { opacity: 1 }

.ui.controls { display: flex; gap: .5em; margin-top: 4em }
.ui.controls > .ui.button { display: block; flex-basis: 0; flex-grow: 1; margin: 0; text-align: center }
.ui.controls.vertical { display: block; gap: 0 }
.ui.controls.vertical > .ui.button { flex: none; margin: 1em 0; width: 100% }
.ui.controls + .ui.controls { margin-top: 2em }

.ui.panel { border-radius: .5em; box-shadow: .25em .25em 1em rgba(0, 0, 0, .075); display: block; min-height: 10em; padding: 1.25em; position: relative }
.ui.panel > .ui.panel-detail,
.ui.panel > .ui.panel-icon { position: absolute }
.ui.panel > .ui.panel-detail { color: #007eda; right: 1.5em; top: 1em }
.ui.panel > .ui.panel-icon { bottom: .25em; font-size: 4em; overflow: hidden; position: absolute; right: .25em }
.ui.panel > .ui.panel-description { bottom: 2em; color: #888; font-size: .8em; position: absolute; width: 15em; word-break: keep-all }

@keyframes animation-indicator {
    from  { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.ui.indicator { color: #888; font-size: .9em; left: 50%; padding-top: 4em; position: absolute; top: 50%; transform: translate(-50%, -50%) }
.ui.indicator:before { animation: animation-indicator 1s infinite ease-in-out; border: .1em solid #007eda; border-radius: 50%; border-top-color: rgba(0, 194, 223, .25); content: ''; display: block; font-size: 3em; height: 1em; left: 50%; margin-left: -.6em; position: absolute; top: 0; width: 1em }

.ui.card { perspective: 50em; position: relative; transition: all .5s ease-in-out; transform: translate3d(0, 0, 0) }
.ui.card > DL { background-color: #007eda; border-radius: .5em; box-shadow: .5em .5em 1em rgba(0, 0, 0, .1); color: #fff; min-height: 14em; overflow: hidden; padding-top: 55%; position: relative; transition: all .5s ease-in-out; transform: translate3d(0, 0, 0) }
.ui.card > DL > DT { font-size: 1.25em; font-weight: 400; height: 4em; left: 1em; line-height: 1em; padding-left: 4.5em; padding-top: .75em; position: absolute; right: 1em; top: 1em }
.ui.card > DL > DT > EM { color: rgba(255, 255, 255, .5); display: block; font-size: .8em; font-style: normal; margin-top: .25em }
.ui.card > DL > DT > DIV.dvPhoto { background-color: #fff; background-position: center; background-size: cover; border-radius: 50%; height: 4em; left: 0; overflow: hidden; position: absolute; top: 0; width: 4em }
.ui.card > DL > DT > DIV.dvPhoto > .ui.icon { font-size: 3em; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%) }
.ui.card > DL > DT > .fn.OpenDetail { cursor: pointer; display: block; padding: 1em; position: absolute; right: -1em; top: 50%; transform: translateY(-50%); }
.ui.card > DL > DT > .fn.OpenDetail > I { display: block }
.ui.card > DL > DT > .fn.OpenDetail > I.iClose { display: none }
.ui.card > DL > DD { bottom: 0; left: 0; position: absolute; width: 100% }
.ui.card > DL > DD > A.aReport { color: #fff; cursor: pointer; display: block; font-size: 1.5em; font-style: normal; font-weight: 800; margin-right: 6em; padding: 1.15em .8em; }
.ui.card > DL > DD > A.aReport > .ui.icon { vertical-align: -.15em }
.ui.card > DL > DD > A.aPayment { background-color: rgba(255, 255, 255, .34); border-radius: .5em; bottom: 1em; box-shadow: .5em .5em 1em rgba(0, 0, 0, .1); color: #fff; display: block; font-weight: 800; padding: 1em; position: absolute; right: 1em; }
.ui.card > DIV.dvControls { height: 100%; margin-left: 1em; position: absolute; left: 100%; overflow-y: auto; top: 0; width: 15em }
.ui.card > DIV.dvControls > UL > LI > A { color: #888; cursor: pointer; display: block; padding: 1em 2em }
.ui.card > DIV.dvControls > UL > LI > A > .ui.icon { opacity: .5 }
.ui.card > DIV.dvControls > UL > LI > A.aNegative { color: #cc0000 }
.ui.card > DIV.dvControls > UL > LI > A.aNegative > .ui.icon { opacity: 1 }
.ui.card.theme-1 > DL { background-color: #e96253 !important }
.ui.card.theme-2 > DL { background-color: #f7a852 !important }
.ui.card.theme-3 > DL { background-color: #e973a4 !important }
.ui.card.theme-4 > DL { background-color: #8acbe9 !important }
.ui.card.theme-5 > DL { background-color: #87cae7 !important }

.ui.card.opened { transform: translate3d(-15em, 0, 0) }
.ui.card.opened > DIV {  }
.ui.card.opened > DL { transform: rotateY(30deg) translate3d(5em, 0, 0) }
.ui.card.opened > DL > DT > .fn.OpenDetail > I.iMenu { display: none }
.ui.card.opened > DL > DT > .fn.OpenDetail > I.iClose { display: block }


.fn.QrGenerator { background-color: #fff; border-radius: .5em; box-shadow: .5em .5em 1em rgba(0, 0, 0, .1); margin: 2em 0; padding: 2em; text-align: center }
.fn.QrGenerator > IMG { display: block; margin: 0 auto; width: 100% }
.fn.QrGenerator > P { font-size: .8em; margin: 0 }
.fn.QrGenerator > P > STRONG { color: #007eda; font-size: 1.25em; font-weight: 800 }

.fn.Fragment { cursor: pointer }

.swiper-pagination-bullet { background: #fff !important }

.ui.article {  }
.ui.article-post { margin: 1em 0 }
.ui.article-post > A { background-color: #fff; border: 1px solid #eee; border-radius: .25em; box-shadow: .25em .25em .5em rgba(0, 0, 0, .05); cursor: pointer; display: block; overflow: hidden; padding: 1em }
.ui.article-post > A > DL {  }
.ui.article-post > A > DL > DT { font-weight: 800; line-height: 1.5em; padding-right: 4em; position: relative }
.ui.article-post > A > DL > DT > EM { color: #888; font-size: .8em; font-style: normal; font-weight: 400; position: absolute; right: 1em; top: 0 }
.ui.article-post > A > DL > DD { color: #007eda; font-size: .8em; margin-top: 1em }