@charset "UTF-8";
:root {
	--safeTop:env(safe-area-inset-top);
	--safeBtm:env(safe-area-inset-bottom);
}
html, body {min-height:100%; box-sizing:border-box;}
body {letter-spacing:-0.03em; padding:var(--safeTop) 0 var(--safeBtm) !important;}
html.full,
html.full body,
html.full body > form,
html.full .account-contents,
html.full .account-contents {height:100%; box-sizing:border-box;}
.account-container,
.container {position:relative; min-height:100%;}

.contents {padding:72px 20px 40px; box-sizing:border-box; position:relative;}

.contents.has-nav {padding-bottom:105px;}
.account-contents.has-foot,
.contents.has-foot {padding-bottom:115px;}
.contents.has-search {padding-top:129px;}

.header .btn-prev,
.account-header .btn-prev {position:absolute; left:0; top:0; padding:0 20px; height:100%; font:0/0 a;}
.header .btn-prev:after,
.account-header .btn-prev:after {content:''; display:inline-block; width:8px; height:20px; margin-top:-3px; background:url('../images/common/spr_common.png') -85px -75px no-repeat; background-size:360px auto; pointer-events:none;}
.account-header .btn-prev {top:12px; height:50px;}

.header {position:fixed; left:0; top:0; right:0; z-index:100; height:72px; background-color:#fff;}
.header [class^='title'] {height:72px; padding:22px 20px; box-sizing:border-box; font-size:20px; font-weight:700; color:#111; letter-spacing:-.45px;}
.header .title-page {font-size:18px;}
.header .btn-prev + .title-page {padding-left:50px;}
.header .btn-close {z-index:100; position:absolute; right:6px; top:11px; z-index:20; width:44px; height:44px; text-indent:-9999px;}
.header .btn-close:after {position:absolute; right:14px; top:13px; content:''; display:inline-block; width:20px; height:20px; background:url('../images/common/spr_common.png') -100px -75px no-repeat; background-size:360px auto;}

/* 20210406 */
.header .btn-text {z-index:100; position:absolute; right:17px; top:15px; z-index:20; min-width:54px; height:37px; font-size:16px; color:#4490e9; padding:0;}

.header .popup {
  position:absolute; top:59px; right:18px; width:260px; height:52px;
  background:#4490e9; border-radius:6px;
}
.header .popup:before {
  content:" "; display:block; position:absolute; top:-9px; right:19px; width:11px; height:9px;
  background:url("../images/common/banner-top.png") no-repeat;
  background-size:contain;
}
.header .popup p{
  float:left; padding-top:9px; padding-left:9px; color:#fff;
  font-size:11px;
}
.header .popup .close-popup{
  float:right; display:block; width:12px; height:12px;
  background:url("../images/common/off_popup.png") no-repeat;
  background-size:contain; margin-top:13px; margin-right:13px;
}
.header .popup:after{
  content:" "; display:block; clear:both;
}

.header .utills {position:absolute; right:12px; top:15px;}
.header .utills [class^='btn-utill'] {width:40px; height:40px;}
.header .utills .btn-utill-filter {border:1px solid #eee; border-radius:50%;}
.header .utills [class^='icon'] {display:inline-block; width:20px; height:20px; vertical-align:middle; background:url('../images/common/spr_common.png') -20px -75px no-repeat; background-size:360px auto;}
.header .utills .icon-filter {vertical-align:-4px; background-position:-40px -75px;}
.header .utills .icon-setting {height:21px; background-position:0 -145px;}

.gnb {position:fixed; left:0; bottom:0; right:0; z-index:100; height:60px; padding-bottom:var(--safeBtm); display:table; width:100%; height:60px;table-layout:fixed; border-top:1px solid #eee; background-color:#fff;}
.gnb a {display:table-cell; width:20%; height:100%; font:0/0 a; text-align:center; vertical-align:middle;}
.gnb a:after {content:''; display:inline-block; width:25px; height:25px; background:url('../images/common/spr_gnb.png') 0 0 no-repeat; background-size:125px auto;}
.gnb .point:after {}
.gnb .coin:after {background-position:-25px 0;}
.gnb .qr:before {position:absolute; left:50%; top:50%; z-index:-1; transform:translate(-50%, -50%); content:''; display:inline-block; width:42px; height:42px; background-color:#111; border-radius:50%;}
.gnb .qr:after {background-position:-50px 0;}
.gnb .challenge:after {background-position:-75px 0;}
.gnb .story:after {background-position:-100px 0;}

.gnb .point.active:after {background-position:0 -25px;}
.gnb .coin.active:after {background-position:-25px -25px;}
.gnb .challenge.active:after {background-position:-75px -25px;}
.gnb .story.active:after {background-position:-100px -25px;}

.modal-footer {padding:6px 24px 24px}
.modal-footer .col + .col {margin-left:3px;}
.modal-footer .col:nth-last-child(2) {margin-right:3px;}
.modal.full .modal-footer {position:absolute; bottom:0; left:0; padding-bottom:calc(24px + var(--safeBtm));}
.modal-footer.column {flex-direction:column;}
.modal-footer.column .col {margin:0;}
.modal-footer.column .col + .col {margin-top:6px;}
.modal-footer.column .col + .close-option {margin-top:24px;}
.modal-footer .close-option {display:flex; justify-content:space-between; height:50px; margin:0 -24px -24px; padding:15px 24px; box-sizing:border-box; background-color:#f8f9fc;}
.modal-footer .close-option .close {font-size:13px; color:#666;}

/* Join & Login */
.account-container .step-list {position:absolute; top:27px; right:20px; padding-top:var(--safeTop);}
.account-header {padding:90px 20px 50px;}
.account-header .title {font-size:34px; line-height:1.3;}
.account-header .title-sub {margin-top:5px; font-size:14px;}
.account-contents {padding:0 20px calc(94px + var(--safeBtm));}
/* .account-contents .txt-link {line-height:1.54; color:#666; border:none;} */
.account-contents .help-pw {text-align:right; margin-top:8px; color:#666; font-size:13px;}
.account-contents .bullet-list {margin-top:30px;}
.section-account .desc {margin-top:8px;}
.section-account input + input {margin-top:10px;}
.section-account .number {margin-top:18px;}

/* 2020-10-16 */
.input-area{
  position:relative;
  margin-bottom:10px;
}

.input-area input{
  padding-right:45px;
}

.input-area .delete{
  position:absolute;
  top:0;
  right:13px;
  width:20px;
  height:100%;
  font:0/0 a;
}

.input-area .delete:after{
  content:" ";
  display:inline-block;
  width:20px;
  height:20px;
  background:url("../images/common/spr_common.png") -340px -75px no-repeat;
  background-size:360px auto;
  pointer-events:none;
}

/* //2020-10-16  */

.authenticode {position:relative; margin-top:10px; padding-right:136px;}
.authenticode input {padding-right:60px;}
.authenticode time {position:absolute; right:152px; top:12px; color:#f30000; font-size:14px;}
.authenticode [class^='btn'] {position:absolute; right:0; top:0; width:130px; padding:0 10px !important;}
.log-option {display:flex; margin-top:8px; justify-content:space-between;}
.log-option .txt-link {color:#666;}
.join-guide-txt {margin-top:30px; text-align:center; color:#000; font-size:14px;}
.join-guide-txt a {margin-left:3px; color:#666; font-size:13px;}

/* popup */
/*
.modal.full {}
.modal.full .modal-layout {top:0; right:0; bottom:0; left:0; transform:translate(0, 0); padding:var(--safeTop) 0 var(--safeBtm); border-radius:0;}
.modal.full .modal-header {position:fixed;left:0; top:0; right:0; z-index:10; display:flex; align-items:center; height:72px; padding:0 50px 0 20px; box-sizing:border-box; background-color:#fff;}
.modal.full .modal-contents {height:100%; padding-top:72px; box-sizing:border-box;}

.modal.dialog .modal-layout {left:10px; right:10px; top:15%;}
.modal.dialog .modal-body {padding:10px; text-align:center;}
.modal.dialog .modal-body p {margin:5px 0;}*/

/* popup transition */
.sidebar ~ .dim,
.modal .dim {
    -webkit-transition:opacity .2s ease-in .1s;
    transition: opacity .2s ease-in .1s;
}
.modal.active .modal-layout {
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-name: come-up;
    animation-name: come-up;
    -webkit-animation-timing-function: cubic-bezier(0.6,0,0.4,1);
    animation-timing-function: cubic-bezier(0.6,0,0.4,1);
}

@-webkit-keyframes come-up {
    0% { opacity: 0; -webkit-transform: scale3d(0, 0, 1); }
    100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); }
}
@keyframes come-up {
    0% { opacity: 0; -webkit-transform: scale3d(0, 0, 1); transform: scale3d(0, 0, 1); }
    100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
}

/* modal */
.modal {
    pointer-events:none;
    position:fixed; top:0; left:0;
    z-index:200;
    box-sizing:border-box;
    padding:var(--safeTop) 0 var(--safeBtm);
    overflow:hidden;
    visibility:hidden;
    width:100%;
    height:100%;
    background:#fff;
    transform:translateY(100%);
    transition:transform 300ms ease-in-out 0s, opacity 300ms ease-in-out 0s, visibility 300ms linear 300ms;
}
.modal-container {display:flex; height:100%; flex-direction:column; overflow:auto; max-height:100vh; }
.modal-container.odd {padding-top:1px;}
.modal.non-scroll {padding:0;}
.modal.non-scroll .modal-header {padding-top:var(--safeTop);}
.modal.non-scroll .modal-container {flex-grow:1;}
/*.modal .step-box .btn-area.bottom {bottom:calc(0px - var(--safeBtm));}*/
.step-box .btn-area.bottom {position:absolute; bottom:0; left:0; width:100%;}
.step-box .btn-area.bottom > [class*=btn-] {padding-bottom:calc(var(--safeBtm) - 17px);}

.modal-header {flex-shrink:0;}
.modal-header .modal-title {padding:20px 40px 15px 24px; font-weight:700; color:#000; line-height:28px; font-size:18px; letter-spacing:-.5px;}

.modal-contents {flex:1 1 auto; padding:0 20px; overflow-y:auto; overflow-x:hidden; font-size:14px;}
.modal-contents:before {content:''; display:block; height:1px; margin-top:-1px;}
.modal .modal-btns {padding:0 24px 24px;}

.modal-close {z-index:100; position:absolute; right:6px; top:11px; z-index:20; width:44px; height:44px; text-indent:-9999px;}
.modal-close:after {position:absolute; right:14px; top:13px; content:''; display:inline-block; width:20px; height:20px; background:url('../images/common/spr_common.png') -100px -75px no-repeat; background-size:360px auto;}
.modal-close.left {left:2px; top:9px;}
.modal-close.left:after {background-position:-160px -75px;}
.modal.btm {top:auto; bottom:0; opacity:1; max-width:100vh; height:auto; max-height:calc(100vh - 50px - var(--safeTop)); border-radius:10px 10px 0 0; transform:translateY(100%); transform-origin:50% 0;}
.modal.btm.ben-type {height:calc(100vh - 50px - var(--safeTop)); max-height:none;}
.modal.btm .modal-header {height:auto; font-weight:bold; margin-top:10px; padding:0 20px;}

.modal.btm .modal-header.center {height:56px; margin-top:0;}
.modal.btm .modal-header.center h1 {line-height:56px; font-size:16px; color:#000; text-align:center;}
/*.modal.btm .modal-close {top:0; left:50%; height:30px; width:40px; margin-left:-20px; text-indent:-9999px;}
.modal.btm .modal-close:after {content:''; position:absolute; top:50%; left:50%; height:4px; width:38px; margin:-2px 0 0 -19px; border-radius:2px; background:#bbb; transform:none;}
.modal.modal-video{top:50%; left:50%; width:calc(100% - 40px); padding:0; height:auto; opacity:0; max-height:calc(100% - 100px); transform:translate(-50%, -50%); background:transparent;}
.modal.modal-video .modal-container{padding:0;}
.modal.modal-video .modal-container .modal-contents{padding:0;}
.modal.modal-today .modal-container {padding:0;}
.modal.modal-today .modal-container .modal-contents{padding:0;}
.modal.modal-today .modal-footer .txt-close{position:absolute; top:50%; left:20px; transform:translateY(-50%); font-size:12px; color:#bbb;}*/
.modal.open {visibility:visible;transition-delay:0s; transform:translateY(0); pointer-events:all;}
.modal.open.sm,
.modal.open.modal-video{opacity:1; transform:translate(-50%, -50%);}
.modal.open.dimmed-wrap.btm.hide {transform:translateY(100%);}

.modal.sm {
    top:50%; left:50%;
    width:calc(100% - 40px);
    padding:0; height:auto;
    opacity:0;
    max-height:calc(100vh - 50px);
    border-radius:10px;
    transform:translate(-50%, -50%);
}
.modal.sm .modal-container {max-height:calc(100vh - 50px);}
.modal.sm .modal-contents {padding:0 24px 24px;}
.modal.sm .modal-close {top:11px;}
.modal.sm .modal-close:after {background-position:-160px -75px;}

.modal.full .modal-header {padding:var(--safeTop); min-height:63px; box-sizing:border-box; background-color:#fff;}
.modal.full .modal-header .modal-title {}
.modal.full .modal-close {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-perspective: 1000;
    perspective: 1000;
}

.modal.full .modal-container {min-height:100%;}
.modal.full .modal-contents {flex-grow:1; padding-bottom:20px;}

.modal.system,
.modal.system .modal-container {min-height:auto;}
.modal.system .modal-contents {padding-top:29px; color:#666; font-size:13px;}
.modal.system .modal-contents .title-system {font-size:15px; color:#000; line-height:1.4; font-weight:700;}
.modal.system .modal-contents p {margin-top:10px;}

.modal.min-height,
.modal.min-height .modal-container {min-height:300px;}

#modal-datepicker .modal-container{overflow:hidden;}
.dimmed {position:fixed;top:-10px;left:-10px;right:-10px;bottom:-10px;transition:background-color 1000ms ease-in-out 0s;background:rgba(0, 0, 0, 0);}
.dimmed-wrap {overflow:hidden;}
.dimmed-wrap > .dimmed {background:rgba(0, 0, 0, 0.4)}
body > .dimmed {top:0;left:0;right:0;bottom:0;}
body.dimmed-wrap > .dimmed {background:rgba(0, 0, 0, 0.5);}
body.modal-open {position:relative; height:100vh;}
body.nav-open #wrap,
body.modal-open #wrap {position:fixed; top:0; left:0; overflow:hidden; width:100%; height:100%; box-sizing:border-box; padding:var(--safeTop) 0 var(--safeBtm);}
body.nav-open #wrap.has-tab-bar,
body.modal-open #wrap.has-tab-bar {padding-bottom:calc(61px + var(--safeBtm)) !important;}

/* datepicker */
#modal-datepicker {}
#modal-datepicker .modal-contents {padding:0;}
#modal-datepicker .swiper-button-next,
#modal-datepicker .swiper-button-prev {z-index:10; top:8px; margin:0; height:40px; width:40px; transform:translate3d(0,0,0);}
#modal-datepicker .swiper-button-next:before,
#modal-datepicker .swiper-button-prev:before {position:absolute; left:9px; top:9px; content:''; display:inline-block; width:20px; height:20px; border:1px solid #bfbfbf; border-radius:50%;}
#modal-datepicker .swiper-button-next:before {left:8px;}
#modal-datepicker .swiper-button-disabled {opacity:0;}
#modal-datepicker .swiper-button-next:after,
#modal-datepicker .swiper-button-prev:after {display:none;}
#modal-datepicker .modal-close:after {background-position:-160px -75px;}
.modal .close-txt {position:absolute; right:20px; top:17px; padding:0; color:#4490e9; font-weight:700; font-size:16px;}
.datepicker-inline {font-family:'Gotham', sans-serif;}
.datepicker--nav {text-align:center; background-color:#f8f9fc;}
.datepicker--nav-title {display:inline-block; padding:0 20px; height:56px; font-size:18px; line-height:56px;}
.datepicker--nav-action {position:absolute; top:10px; left:-9999px;}
.datepicker--body {display:none; padding:0 5px;}
.datepicker--body.active {display:block;}
.datepicker--days-names {display:flex; margin-bottom:10px; justify-content:space-between;}
.datepicker--day-name {display:flex; position:relative; justify-content:center; align-items:center; width:calc(100% / 7); height:40px; font-size:12px; color:#666; font-family:"Noto Sans KR", sans-serif;}
.datepicker--cells {display:flex; flex-wrap:wrap; justify-content:space-between;}
.datepicker--cell {position:relative; color:#000;}
.datepicker--cell .dw {z-index:2; display:flex; justify-content:center; align-items:center; position:absolute; top:0; bottom:0; left:5px; right:5px;}
.datepicker--cell .ds {z-index:2; display:flex; justify-content:center; align-items:center; position:absolute; top:0; bottom:0; left:0; right:0; border:1px solid transparent; background:#fff; border-radius:50%;}
.datepicker--cell-day {width:calc(100% / 7); height:0; padding-top:calc(100% / 7 - 10px);}
.datepicker--cell-month,
.datepicker--cell-year {width:calc(100% / 4); height:0; padding-top:calc(100% / 4 - 10px);}
.datepicker--cell-day:nth-child(n+8),
.datepicker--cell-month:nth-child(n+5),
.datepicker--cell-year:nth-child(n+5) {margin-top:10px;}
.datepicker--cell.-current- .ds {background:#e9f6fe; color:#4490e9;}
.datepicker--cell.-focus- .ds {background:#fff;}
.datepicker--cell.-disabled- {color:#bbb;}
.datepicker--cell.-other-month- {opacity:0; visibility:hidden;}
.datepicker--cell.-in-range- .ds {color:#fff; background:#4490e9;}
.datepicker--cell.-selected- .ds {color:#fff; background:#4490e9;}
.datepicker--cell.-range-from- {z-index:3;}
.datepicker--cell.-range-from- .ds {border-color:#4490e9;}
.datepicker--cell.-range-to- .ds {border-color:#4490e9;}
.datepicker--cell.-range-to- .dw:before,
.datepicker--cell.-in-range- .dw:before,
.datepicker--cell.-in-range- .dw:after,
.datepicker--cell.-in-range- + .-range-to- .dw:before {content:''; position:absolute; top:0; right:50%; width:calc(50% + 10px); height:100%; background:#4490e9;}
.datepicker--cell.-in-range- .dw:after {left:50%; right:auto;}
.datepicker--cell.-last-in-range- .dw:after,
.datepicker--cell.-range-to- .dw:after {display:none !important}
.datepicker--cell.-range-from- + .-range-to- .dw:before,
.datepicker--cell.-range-from- + .-in-range- .dw:before {width:calc(100% + 10px);}
.datepicker--cell.-other-month- + .-in-range- .dw:before,
.datepicker--cell.-other-month- + .-range-to- .dw:before {display:none;}
.datepicker--cell-day:nth-child(7n) .dw:after {display:none !important;}
.datepicker--cell-day:nth-child(7n + 1) .dw:before {display:none !important;}
.datepicker--cell-month:nth-child(4n) .dw:after {display:none !important;}
.datepicker--cell-month:nth-child(4n + 1) .dw:before {display:none !important;}
.datepicker--cell-year:nth-child(4n) .dw:after {display:none !important;}
.datepicker--cell-year:nth-child(4n + 1) .dw:before {display:none !important;}
.datepicker--cell.-range-to-.-range-from-.-selected- .dw:before,
.datepicker--cell.-range-to-.-range-from-.-selected- .dw:after {display:none !important;}
#modal-datepicker .dp-note {position:absolute; background: #ccc; width: 4px; height: 4px; border-radius: 50%; left: 50%; bottom: 3px; -webkit-transform: translateX(-50%); transform: translateX(-50%);}
.last-inner:after {display:none;}

/* tooltip */
.tooltip-wrap {position:relative; display:inline-block; margin-top:-0.2em; vertical-align:middle; font-weight:normal;}
.tooltip-wrap a {display:inline-block;}
.tooltip-wrap .icon {position:relative; width:18px; height:18px; border-radius:100%; background:url(/resources/mo/assets/images/common/icon_tooltip.svg) no-repeat center / contain;}
.tooltip-wrap .val + .icon {margin-left:5px;}
.tooltip-wrap .tooltip {position:absolute; top:100%; left:0; display:none; box-sizing:border-box; width:calc(100vw - 40px); padding:15px 40px 20px 20px; font-size:12px; line-height:15px; word-break:break-word; text-align:left; border:1px solid #666; border-radius:10px; background:#fff; box-shadow:0 6px 15px 0 rgba(0, 0, 0, 0.05);}
.tooltip-header {}
.tooltip-header .tooltip-title {font-weight:700; color:#000; font-size:15px;}
.tooltip-header + .tooltip-contents {margin-top:10px;}
.tooltip-wrap .tooltip .tooltip-contents {display:block;}
.tooltip-wrap .tooltip .tooltip-close {position:absolute; right:2px; top:0; z-index:20; width:30px; height:30px; text-indent:-9999px;}
.tooltip-wrap .tooltip .tooltip-close:before {position:absolute; right:7px; top:6px; content:''; display:inline-block; width:20px; height:20px; background:url('../images/common/spr_common.png') -160px -75px no-repeat; background-size:360px auto;}
.tooltip-wrap.show .tooltip {z-index:150; display:block;}

/* 2021.06.09 */
.modal.fixed {height: calc(100vh - 50px);}
.modal.fixed .cont {display: flex; width: 100%; height: 100%; overflow-y: auto; align-items: flex-start;}
.modal.fixed .cont .image {width: 100%;}
.modal.fixed .cont .image img {width: 100%;}
.modal.fixed .cont.ct {align-items: center;}