@charset "UTF-8";

/* @import url("reset.css"); */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

html, body {
    height: 100%;
    font-size: 14px;
    font-family: Pretendard;
    font-weight: 300;
    letter-spacing: -0.8px;
    line-height: 18px;

    color: #171717;

/*     line-height: normal; */
}

/* Common */
input, select, textarea, div {
   outline: none;
}
input[type=text], input[type=password] {

   border-radius: 4px;
   border: solid 1px #ced0da;

   padding: 2px 10px;

   height: 32px;
   width: 200px;
}
input[type=text].s, input[type=password] {
   width: 100px;
}
input[type=text].m, input[type=password].m {
   width: 200px;
}
input[type=text].l, input[type=password].l {
   width: 300px;
}
input[type=text].xl, input[type=password].xl {
   width: 400px;
}
input::placeholder {
   color: #A6B0BD;
}
input:disabled, textarea:disabled {
   background-color: #e9e9e9;
}
textarea {
   border: 1px solid #ced0da;
   border-radius: 4px;

   padding: 10px;
   resize: none;
   font-size: 14px;
}
a {
   text-decoration: none; /* 링크의 밑줄 제거 */
   color: inherit; /* 링크의 색상 제거 */
}
/* Icons */
.remix-icon {
   font-family: 'remixicon' !important;
   font-style: normal;
   -webkit-font-smoothing: antialiased;
}

/* Text */
.bold {
   font-weight: 600;
}

.im-text {
   color: #80BC50;
}

.im-text.bold {
   font-weight: 600;
}

.info-text {
   text-align: center;
   font-size: 16px;
   line-height: 18px;
}

.guide-text {
   font-size: 14px;
   font-weight: 400;
   color: #737373;
/*    text-align: left; */
}

.guide-text.large {
   font-size: 16px;
   font-weight: 400;
   color: #737373;
   line-height: 20px;
}

.title-text {
   font-size: 16px;
   font-weight: 600;
   line-height: 20px;
}

.title-text.small {
   font-size: 14px;
   line-height: 18px;
}

.title-text.black {
   color: #171717;
}

.small-text {
   font-size: 12px;
   font-weight: 400;
   line-height: 14px;
}
.mid-text {
   font-size: 15px;
   font-weight: 500;
}
.big-text {
   font-size: 20px;
   font-weight: 600;
   line-height: 20px;
}

.link-text {
   text-decoration: underline;
   cursor: pointer;
}
.seller-link {
   cursor: pointer;
   margin-left: 20px;
}

.alert-text {
   color: #F94B50;
}
.gray-text {
   color: #737373;
   font-size: 14px;
}
.blue-text {
   color: #5181E9;
}
.alert-text.bold, .big-text.bold, .blue-text.bold {
   font-weight: 700;
}
/* Text End */

/* Component */
.check-box {
   display: flex;
   justify-content: center;
   align-items: center;

   width: 20px;
   height: 20px;

   margin-right: 8px;

   background-color: #E1E4E8;
   color: #fff;

   border-radius: 2px;
}

.check-box.checked {
   background-color: #80BC50;
}

.gray-box {
   background-color: #F8F9FA;
   border: 1px solid #EFF1F3;
   border-radius: 10px;
   padding: 18px;
}

.mobile .btn {
   border: 1px solid #80BC50;
   border-radius: 10px;
   background-color: #fff;

   font-size: 16px;
/*    font-weight: 600; */
   color: #80BC50;
   line-height: 20px;
   cursor: pointer;

   padding: 10px;
}

.mobile .btn > i {
   margin: 0px 5px;
}

.mobile .btn.btn-green,
.mobile .btn.selected,
.mobile .btn.btn-gray.selected {
   background-color: #80BC50;
   color: #fff;
}
.mobile .btn.btn-black {
   background-color: #000;
   color: #fff;
}
.mobile .btn.btn-gray {
   display: flex;
   border: 1px solid #EFF1F3;
   background-color: #fff;
   background-image: none;
   font-weight: 400;
   color: #737373;
}

.mobile .btn.btn-link {
   text-decoration: underline;
   padding: 0px;
   border: none;
}

.mobile .btn.btn-light {
   display: inline-block;

   border: 1px solid #EFF1F3;
   border-radius: 50px;
   background-color: #fff;

   font-size: 14px;
   font-weight: 400;
   color: #737373;
}

.mobile .btn.btn-sort {
   display: inline-block;
   border: none;
   background-color: #fff;
   text-align: center;
   font-size: 14px;
   font-weight: 400;
   color: #A6B0BD;
   cursor: pointer;
}

.mobile .btn.btn-sort.select {
   color: #80BC50;
}

.mobile .btn.disabled {
   border: 1px solid #EFF1F3;
   background-color: #F8F9FA;
   color: #A6B0BD;
}

.mobile .btn-green.disabled {
   color: #80BC50;
}

.mobile .btn.cancel {
   color: #171717;
   font-weight: 600;
}

.mobile .btn.btn-blue {
   border: 1px solid #5181E9;
   background-color: #5181E9;
   color: #fff;
}
.mobile .btn.btn-blue.disabled {
   color: #5181E9;
   background-color: #fff;
}
.mobile .btn.btn-kakao {
   border: 1px solid #FEE500;
   background-color: #FEE500;
   color: #000000;
}

.accordion .accordion-title {
   display: flex;
   justify-content: space-between;
   align-items: center;
   border-top: 1px solid #EFF1F3;
   padding: 16px 20px;
   font-size: 16px;
}

.accordion .accordion-title:last-child {
   border-bottom: 1px solid #EFF1F3;
}

.accordion .accordion-arrow:before {
   color: #000;
   content: '\EA4E';
   font-size: 18px;
}

.accordion .open .accordion-arrow:before {
   content: '\EA78';
}

.accordion .accordion-body {
   display: none;
}

.accordion .accordion-title.open + .accordion-body {
   display: block;
}


/* layout */
.mt-5  { margin-top: 5px;  }
.mt-10 { margin-top: 10px; }
.mt-15 { margin-top: 15px; }
.mt-20 { margin-top: 20px; }
.mt-30 { margin-top: 30px; }
.mt-40 { margin-top: 40px; }
.mb-5  { margin-bottom: 5px;  }
.mb-10 { margin-bottom: 10px; }
.mb-15 { margin-bottom: 15px; }
.mb-20 { margin-bottom: 20px; }
.mb-30 { margin-bottom: 30px; }
.mb-40 { margin-bottom: 40px; }

.pd-5  { padding: 5px;  }
.pd-8  { padding: 8px;  }
.pd-16 { padding: 16px; }
.pt-5  { padding-top: 5px; }
.pt-10 { padding-top: 10px; }
.pt-15 { padding-top: 15px; }
.pt-20 { padding-top: 20px; }
.pt-30 { padding-top: 30px; }
.pb-5  { padding-bottom: 5px; }
.pb-10 { padding-bottom: 10px; }
.pb-15 { padding-bottom: 15px; }
.pb-20 { padding-bottom: 20px; }
.pb-30 { padding-bottom: 30px; }

.al-left { text-align: left !important; }
.al-right { text-align: right !important; }
.al-center { text-align: center !important; }

.hide { display: none !important; }

.bd   { border: 1px solid #EFF1F3; }
.bd-t { border-top: 1px solid #EFF1F3; }
.bd-b { border-bottom: 1px solid #EFF1F3; }

/* flex */
.flex-center {
   display: flex;
   justify-content: center;
   align-items: center;
}

.flex-vcenter {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
}

.flex-vcenter.top {
   justify-content: flex-start;
}

.flex-left {
   display: flex;
   justify-content: flex-start;
   align-items: center;
}

.flex-left.top {
   align-items: flex-start;
}

.flex-between {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.flex-inline {
   display: inline-flex;
}

.fgap-5 {
   gap: 5px;
}
.fgap-10 {
   gap: 10px;
}
.fgap-20 {
   gap: 20px;
}

.fgrow-1 {
   flex-grow: 1 !important;
}
.fgrow-2 {
   flex-grow: 2 !important;
}
.fgrow-3 {
   flex-grow: 3 !important;
}
.fgrow-4 {
   flex-grow: 4 !important;
}
.fgrow-5 {
   flex-grow: 5 !important;
}

.fshrink-0 {
   flex-shrink: 0;
}


.vscroll-box {
   height: 100%;
   overflow-y: auto;
}

.vscroll-box {
   width: 100%;
   overflow-x: auto;
}

/* 화면 */

.mobile .page {
   background-color: #FFFFFF;

   min-width: 340px;
}


.mobile .container {
   padding: 16px;
   width: 100%;
   text-align: center;
}

.mobile .container.full {
   height: 100%;
}

.mobile .container.center {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

.mobile .input-group {
   text-align: left;
}

.mobile .input-group .input-row {
   display: flex;
   justify-content: center;
   align-items: center;
}

.mobile .input-group .input-row > *:first-child {
   flex-grow: 1;
/*    width: inherit; */
   margin-bottom: 0px;
}
.mobile .input-group .input-row .option {
   margin-left: 10px;
   margin-bottom: 0px;
}

.mobile .input-group .input-row button {
   height: 46px;
}

.mobile .input-row.flex-center button {
   width: auto;
}


.mobile .input-group .input-row button.option {
   width: 86px;
   min-width: 86px;
}

/*--- POP UP ------------------------------------------------------------------------*/
.dim { position: absolute; top:0; left: 0; right: 0; bottom: 0;  background:rgba(0,0,0,0.5); display:none; overflow: auto; text-align: center; z-index: 1000; }

.pop-contents { display: inline-block; position:relative; width: 100%; background:white; text-align: left; overflow: auto; background-color: #fff; }
.pop-head     { position: absolute; width:100%; height: 40px; font-size: 17px; font-weight: 600; padding:5px; border-bottom: 1px solid #DFDFDF; background-color: #fff; overflow:hidden; }
.pop-head .pop-title    { text-align: center; flex-grow:1; }
.pop-head .pop-btn      { width:50px; height: 100%; font-size: 24px;  }
.pop-head .pop-back     { cursor: pointer; }
.pop-head .pop-close    { cursor: pointer; }
.pop-body     {height: calc(100% - 40px); margin-top: 40px; overflow-y: auto; }
.modal .pop-contents { margin-top: 100px; }
.modal .pop-body { height: 100%; }
.hide-title .pop-body { margin-top: 0px; }

::-webkit-scrollbar {
   background-color: #f9f9f9; /* 스크롤바 색상 */
   border-radius: 5px; /* 스크롤바 모서리 둥글게 */
   width: 2px;
   height: 2px;
}
::-webkit-scrollbar-thumb {
   background-color: #80BC50;
   border-radius: 5px;
}

.web-pop .pop-contents {
   margin-top: 20px;
}

.web-pop.modal .pop-contents {
   margin-top: 160px;
   border-radius: 10px;
}

.web-pop.modal.top .pop-contents {
   margin-top: 30px;
}

.mobile-pop {
   position: absolute;
   top: 0px;
   left: 0px;
   right: 0px;
   bottom: 0px;
/*    width: 100%; */
/*    height: 100%; */

   z-index: 1000;
}

.mobile-pop .pop-contents {
   height: 100%;
   display: block;
}

.mobile-pop .pop-head {
   height: 60px;
}

.mobile-pop .pop-body {
   height: calc(100% - 60px);
   margin-top: 60px;
}



/* login */

.page.login {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 120px;
   background-color: #fff;

   z-index: 1000;
}

.web .page.login {
   position: absolute;
   top: 0px;
   left: 0px;
   right: 0px;
   bottom: 0px;
}
.page.login:has(.login-box) .menu-box {
   display: none;
}

.page.login:has(.login-box) #screenArea {
   height: 100%;
}

.login > .guide-box {
   max-width: 428px;
   width: 100%;
/*    height: 100%; */

/*    padding-top: 64px; */

   overflow-y: auto;
}

.login .guide-box .logo-box {
   margin-left: 4px;
   margin-bottom: 30px;
}

.login .banner-box {
   border-radius: 16px;
   overflow: hidden;
   text-align: center;
}

.login .login-box {
   position: relative;
   max-width: 428px;
   width: 100%;
   height: 100%;
   border: 1px solid #EFF1F3;
   box-shadow: 0px 10px 10px 0px #DFDFDF40;
   overflow-y: auto;
}

.login .login-title {
   height: 60px;
   font-size: 16px;
   font-weight: 600;
}

.login .logo-box {
   margin-bottom: 10px;

   font-weight: 500;
   font-size: 16px;
   line-height: 20px;
}

.login .logo-text {
   margin-bottom: 4px;
}

.login input {
   width: 328px;
   height: 50px;

   border-radius: 10px;
   border-color: #EFF1F3;
   border-width: 1px;

/*    margin-bottom: 14px; */
}

.login .select-row, .input-group .select-row {
   display: inline-flex;
   justify-content: start;
   align-items: flex-start;

/*    width: 328px; */
   text-align: left;
   flex-grow: 1;
}

.select-row .title-text {
   flex-grow: 1;
}

.select-row.auto-login {
   margin-left: 10px;
}

.login .login-box button {
   width: 400px;
   height: 50px;
   max-width: 100%;
   margin-bottom: 14px;
}

.login button.btn-link {
/*    width: 60px; */
   height: 26px;
}

.login .find-row {
   display: flex;
   justify-content: center;
   align-items: center;

   color: #171717A3;

   margin-bottom: 40px;
}

.login .find-row .find-item {
   cursor: pointer;
}

.login .find-row .guide {
   margin: 0px 15px;
   color: #EFF1F3;
}

.login .footer-box {
   padding-top: 6px;
   font-size: 16px;
   font-weight: 300;
   line-height: 20px;
   background-color: #ffffff;
}

.login .comp-info {
   line-height: 20px;
}
/* login End */


/* Menu */

.mobile #screenArea:has(.mobile-pop.full),
.mobile #screenArea:has(.modal .bottom-btn-box:not(.static)) {
   height: 100%;
}

.mobile #screenArea:has(.mobile-pop.full) ~ .menu-container .menu-box,
.mobile #screenArea:has(.modal .bottom-btn-box:not(.static)) ~ .menu-container .menu-box {
   display: none;
}


.mobile .menu-box {
/*    position: fixed; */
/*    left: 0px; */
/*    right: 0px; */
/*    bottom: 0px; */

   height: 65px;

   font-size: 24px;

   border-top: 1px solid #EEEEEE;
   background-color: #fff;
   z-index: 999;
}

.mobile .menu-box .menu-item {
   position: relative;
   flex-grow: 1;
   height: 100%;
   padding: 10px;
}

.mobile .menu-box .menu-item .chat-cnt {
    position: absolute;
    top: 6px;
    right: calc(50% - 22px);

    width: 20px;
    height: 20px;

    font-size: 12px;
    font-weight: 700;
    color: #fff;
    border-radius: 10px;
    background-color: #F94B50;
    text-align: center;
}

.mobile .menu-box .menu-item.select .menu-ico{
   color: #80BC50;
}

.mobile .menu-box .menu-item .selected,
.mobile .menu-box .menu-item.select .notSelected {
   display: none;
}

.mobile .menu-box .menu-item.select .selected {
   display: inline;
}

.mobile .menu-box .menu-ico {
   flex-grow: 1;
}

.mobile .menu-box .menu-text {
   font-size: 12px;
   font-weight: 300;
   line-height: 14px;
}
/* Menu End */


/*- 로딩 보여주기 -*/
body > .loadingArea {
   display: none;
   text-align: center;
   background: rgb(0, 0, 0, 0.2);
   position:absolute;
   z-index:100;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   padding-top: 22%;
}

body > .loadingArea.show {
   display: block;
   z-index: 2000;
}

body > .loadingArea.show .spinner {
   vertical-align: middle;
   position: absolute;
   top: calc(50% - 45px);
   color: #EBF6FE;
}


.loader {
  position: relative;
  width: 100px;
  height: 16px;
}
.loader:before , .loader:after{
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 32px 0 #fff;
  left: 0;
  top: 0;
  animation: ballMoveX 2s linear infinite;
}
.loader:after {
  box-shadow: none;
  transform: translateX(64px) scale(1);
  z-index: 2;
  animation: none;
  animation: trfLoader 2s linear infinite;
}

@keyframes trfLoader {
  0% , 5%{
    transform: translateX(64px) scale(1);
    background: #FFF;
  }
  10%{
    transform: translateX(64px) scale(1);
    background: #80BC50;
  }
  40%{
      transform: translateX(32px) scale(1.5);
      background: #80BC50;
    }
  90%, 95% {
    transform: translateX(0px) scale(1);
    background: #80BC50;
  }
  100% {
    transform: translateX(0px) scale(1);
    background: #FFF;
  }
}
@keyframes ballMoveX {
  0% , 10%{  transform: translateX(0) }
  90%, 100% { transform: translateX(32px) }
}