.wrap {    
  .container {
    position: relative;
    width: 100%;
    margin: 0 auto;
    min-width: 1000px;
    max-width: 84.625rem; /*?????*/
    padding: 0 3.125rem;
    /* padding: 1rem 0; */
  } 
}
.page-container .main {
  /* position: relative; */
  width: 100%;
  margin: 0 auto;
  min-width: 1000px;
  max-width: 84.625rem; /*?????*/
  padding: 0 3.125rem;
  /* padding: 1rem 0; */
}
.main__wrapper {
  padding: 3rem 0;
}
.logo {
  height: 3.125rem;
  background-repeat:no-repeat;
  background-position:center;
  background-size: auto 100%;
  background-image: url(../images/Mobile/logo.svg);
  font-size: 0;
}
/* header */
header {
  border-bottom: .0625rem solid #f0f0f0;
  background-color: #fff;
  box-shadow: 0px 0px 1rem 0px rgba(0, 0, 0, 0.04);

  .header {
    position: relative;
    width: 100%;
    min-width: 1000px;
    max-width: 84.625rem; /*?????*/
    padding: 0 3.125rem;
    margin: 0 auto;    
    display: flex;
    align-items: center;

    .logo {        
        width: 8rem;
        height: 3.75rem;
        background-size: auto 3rem;
        background-position:left center;
        cursor: pointer;
    }
    .topmenu {
      text-align: right;
      flex: auto;
      a {
        position: relative;
        display: inline-block;
        line-height: 3.75rem;
        padding: 0 .875rem;
        font-weight: bold;
        font-size: 1.1875rem;
        color:#3B3D3F;
      }
    }
    .menu_btn {
      padding-left: 1rem;
      font-size: 0;
      &.membership {
        flex: 1;
        text-align: right;
        .button {
          height: 2.375rem;
          font-weight: bold;
          font-size: .875rem;
        }
      }
    }
    /* .menu_btn {
      position: absolute;
      right: 0;
      top: 1rem;      
  } */
  .button {
    display: inline-block;
    box-shadow: none;
    &.icon {        
        width: 3rem;
        min-width: 2.5rem;
        height: 3.25rem;
        line-height: 3.75rem;
        padding: 0 !important;
        background: transparent;
        font-size: 0;
        &:after {
            position: absolute;
            top: 50% !important;
            right: 50% !important;
            transform: translate(50%, -50%);
            margin-right: 0;
            background-position: center;
            background-size: auto 2.125rem !important;
        }
        &.totalmenu {
            display: none;
        }
        &.totalmenu:after {
            background-image: url(../images/Mobile/icon_menu.svg);
        }
        &.closeback:after {
            background-image: url(../images/Mobile/icon_closeback.svg);
        }
        &.back {
            margin-left: -.5rem;
            font-size: 0;
            &:after {
                background-image: url(../images/Mobile/icon_back.svg);
            };
        }
        &.setting:after {
            background-image: url(../images/Mobile/icon_my.svg);
        }
        &.memo:after {
            background-image: url(../images/Mobile/icon_memo.svg);
        }
        &.logout:after {
          background-image: url(../images/Mobile/icon_logout.svg);
      }
        &.write:after {
            background-image: url(../images/Mobile/icon_write.svg);
        }
        &.call {
            a { 
                height: 100%;
                width: 100%;
                font-size: 0 !important;
            }
            &::after {
                background-size: auto 2.75rem !important;
            }
        }        
      }
    }  
  }
}
.footer_membership {
  display: none;
}
.footer {  
  padding: 3.125rem 0 6.25rem;
  border-top: 1px solid #f0f0f0;
  /* background: #f9f9f9; */
  .cont {
    position: relative;
    width: 100%;
    margin: 0 auto;
    min-width: 1000px;
    max-width: 84.625rem; /*?????*/
    padding: 0 3.125rem;
    display: flex;
    gap: 3.125rem;
    .logo {
      width: 6rem;
      height: 2rem;
      background-size: auto 2.25rem;
      background-image: url("data:image/svg+xml,%3Csvg width='90' height='42' viewBox='0 0 90 42' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.8885 12.439C12.5185 12.439 13.1065 12.586 13.6525 12.88C14.1985 13.16 14.6605 13.559 15.0385 14.077H19.3015V12.439H22.2205V30.646H6.32352C5.98752 30.646 5.68652 30.583 5.42052 30.457C5.16852 30.331 4.95152 30.156 4.76952 29.932C4.60152 29.722 4.46852 29.477 4.37052 29.197C4.28652 28.931 4.24452 28.651 4.24452 28.357V23.884H7.18452V27.559C7.18452 27.713 7.21252 27.832 7.26852 27.916C7.33852 28 7.45752 28.042 7.62552 28.042H19.3015V20.986H14.9125C14.5205 21.462 14.0655 21.833 13.5475 22.099C13.0295 22.351 12.4765 22.477 11.8885 22.477H7.31052C6.73652 22.477 6.19052 22.351 5.67252 22.099C5.16852 21.847 4.72752 21.504 4.34952 21.07C3.97152 20.622 3.67052 20.09 3.44652 19.474C3.23652 18.858 3.13152 18.186 3.13152 17.458C3.13152 16.716 3.23652 16.037 3.44652 15.421C3.67052 14.805 3.97152 14.28 4.34952 13.846C4.72752 13.398 5.16852 13.055 5.67252 12.817C6.19052 12.565 6.73652 12.439 7.31052 12.439H11.8885ZM11.3215 19.915C11.8115 19.915 12.2385 19.705 12.6025 19.285C12.9665 18.851 13.1485 18.242 13.1485 17.458C13.1485 16.688 12.9665 16.086 12.6025 15.652C12.2385 15.204 11.8115 14.98 11.3215 14.98H7.83552C7.34552 14.98 6.92552 15.204 6.57552 15.652C6.23952 16.086 6.07152 16.688 6.07152 17.458C6.07152 18.242 6.23952 18.851 6.57552 19.285C6.92552 19.705 7.34552 19.915 7.83552 19.915H11.3215ZM16.0885 17.458C16.0885 17.654 16.0815 17.843 16.0675 18.025C16.0535 18.193 16.0325 18.361 16.0045 18.529H19.3015V16.534H16.0255C16.0675 16.828 16.0885 17.136 16.0885 17.458ZM26.0903 28.42V23.338H29.0303V24.472H39.9503V12.439H42.8693V15.442H44.7383V18.004H42.8693V30.646H28.2953C27.6093 30.646 27.0703 30.429 26.6783 29.995C26.2863 29.575 26.0903 29.05 26.0903 28.42ZM28.7363 16.261H34.5953C35.7713 16.261 36.6603 16.527 37.2623 17.059C37.8643 17.591 38.1653 18.354 38.1653 19.348C38.1653 20.356 37.8643 21.126 37.2623 21.658C36.6603 22.19 35.7713 22.456 34.5953 22.456H28.7363C27.6023 22.456 26.7343 22.19 26.1323 21.658C25.5303 21.126 25.2293 20.356 25.2293 19.348C25.2293 18.354 25.5303 17.591 26.1323 17.059C26.7343 16.527 27.6023 16.261 28.7363 16.261ZM24.8303 13.132V15.442H38.5223V13.132H33.1463V11.725H30.2063V13.132H24.8303ZM29.0303 26.761V27.685C29.0303 27.839 29.0583 27.958 29.1143 28.042C29.1843 28.126 29.3033 28.168 29.4713 28.168H39.9293V26.761H29.0303ZM29.2823 20.209H34.0703C34.4623 20.209 34.7493 20.125 34.9313 19.957C35.1133 19.789 35.2043 19.586 35.2043 19.348C35.2043 19.124 35.1133 18.935 34.9313 18.781C34.7493 18.627 34.4623 18.55 34.0703 18.55H29.2823C28.8763 18.55 28.5823 18.627 28.4003 18.781C28.2323 18.935 28.1483 19.124 28.1483 19.348C28.1483 19.586 28.2323 19.789 28.4003 19.957C28.5823 20.125 28.8763 20.209 29.2823 20.209ZM62.573 25.102V24.745C62.573 24.479 62.524 24.304 62.426 24.22C62.342 24.136 62.202 24.094 62.006 24.094H47.516V21.742H63.35C64.106 21.742 64.652 21.945 64.988 22.351C65.324 22.743 65.492 23.317 65.492 24.073V27.265H50.435V27.643C50.435 27.909 50.477 28.084 50.561 28.168C50.659 28.252 50.806 28.294 51.002 28.294H65.492V30.646H49.658C48.902 30.646 48.356 30.443 48.02 30.037C47.684 29.645 47.516 29.071 47.516 28.315V25.102H62.573ZM58.877 18.088V20.566H49.154C48.818 20.566 48.517 20.503 48.251 20.377C47.999 20.251 47.782 20.083 47.6 19.873C47.432 19.649 47.306 19.404 47.222 19.138C47.138 18.858 47.096 18.571 47.096 18.277V12.439H58.667V14.917H50.015V17.605C50.015 17.927 50.169 18.088 50.477 18.088H58.877ZM62.573 12.439H65.492V20.818H62.573V12.439ZM77.3837 19.474V15.904C77.3837 15.54 77.3207 15.288 77.1947 15.148C77.0827 15.008 76.9077 14.938 76.6697 14.938H68.7317V12.439H78.1397C78.9097 12.439 79.4627 12.642 79.7987 13.048C80.1347 13.44 80.3027 14.014 80.3027 14.77V21.973H71.6507V25.459C71.6507 25.823 71.7067 26.075 71.8187 26.215C71.9447 26.355 72.1267 26.425 72.3647 26.425H80.3027V28.924H70.8947C70.1247 28.924 69.5717 28.721 69.2357 28.315C68.8997 27.923 68.7317 27.349 68.7317 26.593V19.474H77.3837ZM81.2477 19.285H84.2087V12.439H87.1277V30.646H84.2087V21.826H81.2477V19.285Z' fill='%235A5D60'/%3E%3C/svg%3E%0A");
    }
    .copy_wrap {    
      * {
        color: #50555C;
        font-size: .8125rem;
      }
      span {
        display: inline-block;
        white-space: nowrap;
        padding-right: 1.25rem;        
      }
      .font {
        padding-top: 0 0 .5rem;
        font-size: .625rem;
        color:#ccc;
        font-weight: normal;
      }
      .copy {
        padding-top: 1rem;
      }
    }
  }
}

/********************************************** 
    Form 
**********************************************/
input, input[type="text"], input[type="number"], input[type="date"], [type=datetime-local], input[type="file"], input[type="time"], input[type="color"], input[type="search"], input[type="password"], [type=datetime], [type=email], [type=month], [type=tel], [type=text], [type=url], [type=week], .input {
  width: 100%;
  height: 2.75rem;
  border-radius: .3125rem;
  padding: 0 .875rem;
  border:1px solid #e1e3e9;
  background-color: #f8f9fb;
}
.input {
  line-height: 2.75rem;
}
input[type="file"], .file_list.active span {
display: none;
}
textarea {
  border-radius: .3125rem;
  width: 100%;
  padding: .75rem;
  border:1px solid #e1e3e9;
  background-color: #f8f9fb;
}
input::placeholder, textarea::placeholder {
  color: #BEC6CB;
  font-weight: normal !important;
}
input:disabled {
  border:0;
  background-color: transparent !important;
}
input[type=checkbox], input[type=radio] {
  position: absolute;
  width: auto;
  opacity: 0;
  -webkit-opacity: 0;
  -moz-opacity: 0;
  z-index: 0;
}
input[type=checkbox] + label, input[type=radio] + label {
  position: relative;
  display: inline-block;
  margin: 0;
  padding: .25rem 1rem .25rem 1.875rem;
  background: none;
  border: 0;
  font-size: 1rem;
  line-height: 1.75rem;
  color: #2E3033;
  word-break: keep-all;
  vertical-align: middle;
  cursor: pointer;
  &.font_small {
      font-size: .8125rem;
      line-height: 1.3;
      color: #5A5D60;
  }
}
input[type=radio] + label {
  padding: 0 1rem 0 1.35rem;
}
input[type=checkbox] + label:before, input[type=radio] + label:after {
  display: block;
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1.375rem;
  height: 1.375rem;
  background-color: #fff;
  border: 0.063rem solid #d5d7df;
  border-radius: 50%;
  transform: translateY(-50%);
  transition: all 0.1s ease-in;
}
input[type=radio] + label:after {
  width: 1.125rem;
  height: 1.125rem;
  border: .125rem solid #e1e3e9;
  margin-top: .1rem;
}
input[type=checkbox] + label:after {
  content: '';
  position: absolute;
  top: calc(50% - .2rem);
  left: .3rem;
  width: 0.375rem;
  height: 0.625rem;
  border-color: #d9dce3;
  border-style: solid;
  border-width: 0 .125rem .125rem 0 !important;
  transform: rotate(45deg) translateY(-50%);
}
input[type=checkbox]:checked + label:before {
  border: 0.063rem solid #2070ff;
  background-color: #2070ff;
  transform: translateY(-50%);
}
input[type=checkbox]:checked + label:after {
  border-color: #fff !important;
}
input[type=radio]:checked + label:after {
  border: .125rem solid #2070ff;
}
input[type=checkbox].small + label, input[type=radio].small + label {
  padding: .2rem 1rem .2rem 1.5rem;
  font-size: .875rem;
}
input[type=checkbox].small + label:before, input[type=radio].small + label:after {
  width: 1.2rem;
  height: 1.2rem;
  margin-top: .1rem;
}
input[type=checkbox].small + label:after {
  top: calc(50% - .08rem);
  left: .2rem;
}
input:read-only {
  border-color:transparent !important;
  background-color: transparent !important;
}

.square, .checkbox--rect {
  display: flex;
  flex-wrap: wrap;
  gap: .125rem;
  .checkbox_square {
      width: calc(50% - 4px);
      flex: auto;
  }
  &.full-width {
      li {
          width: 100%;
      }
  }
  &.half-width {
      li {
          width: calc(50% - 4px);
      }
  }
}
.square input[type=checkbox] + label, .checkbox--rect input[type=checkbox] + label {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.75rem;
  border: .0625rem solid #e1e3e9;
  border-radius: .3125rem;
  padding: 0 1.25rem;
  background: #fff;
  text-align: center;
  font-size: .9375rem;
  font-weight: 500;
  color: #8a8a8a;
  &:hover {
    border-color: #5A5D60;
  }
}

.square input[type=checkbox] + label:before, .square input[type=checkbox] + label:after, .checkbox--rect input[type=checkbox] + label:before, .checkbox--rect input[type=checkbox] + label:after {
  display: none !important;
}

.square input[type=checkbox]:checked + label, .checkbox--rect input[type=checkbox]:checked + label {
  border-color: #2070ff;
  color: #2070ff;
}

.square  input[type=radio] + label {
  position: relative;
  display: flex;
  flex: 1;
  height: 2.875rem;
  border: 0.063rem solid #d6d8da;
  padding-top: .25rem !important;
  padding-bottom: .25rem !important;
  background: #fff;
  align-items: center;
  justify-content: center;
  font-size: .9375rem;
  font-weight: 500;
  color: #8a8a8a;
  &::after {
      display: none;
  }
}
.square input[type=radio]:checked + label {
  border-color: #2070ff;
  color: #2070ff;
}  

@media \0screen {
input[type=checkbox], input[type=radio] {
  margin-top: 0.625rem;
}

input[type=radio] + label {
  background: none !important;
}

input[type=checkbox] + label {
  background: none !important;
}
}

select {
  position: relative;
  height: 2.75rem;
  border: 0.063rem solid #e1e3e9;
  border-radius: 0.375rem;  
  padding: 0 1.875rem 0 0.625rem;
  background-image: url('../images/Mobile/icon_select.svg');
  background-repeat: no-repeat;
  background-position: calc(100% - 7px);
  background-size: 1.2rem auto;
  background-color: #f8f9fb;
  color: #2E3033;
}
.select {
  position: relative;
  &.active .option_list {
      display: block;
      z-index: 10;
    }
  .option_list {
      position: absolute;
      top: 2.5rem;
      left: 0;
      right: 0;
      max-height: 10rem;
      overflow: auto;
      display: none;
      border-radius: 0.3125rem; 
      border: 1px solid #e1e3e9;
      background: #fff;
      box-shadow: 0px 0px 0.5rem 0px rgba(0, 0, 0, 0.08);

      .option {
          padding: 0 .75rem;
          line-height: 2.5rem;
          display: block;
          font-size: .9375rem;
          cursor: pointer;
      }
  }   
  .choice {        
      height: 2.75rem;
      padding: 0 0.75rem;
      display: flex;
      align-items: center;
      border: 1px solid #ddd;        
      border-radius: 0.3125rem;
      background-color: #f8f9fb;
      color: #2E3033;
      cursor: pointer;
      span {
          font-size: .9375rem;
      }
      &::after {
          content: '';
          position: absolute;
          right: 7px;
          top: .75rem;
          width: 1.5rem;
          height: 1.5rem;
          background: url('../images/Mobile/icon_select.svg') no-repeat center;
          background-size: 1.2rem auto;
          /* transform: rotate(90deg); */
      }
  }
}

.input_box {
  position: relative;
  display:flex;
  flex-direction: column;
  gap: .5rem;
  padding:0 0 1rem;
  /* padding:0 .5rem 1.5rem;
  gap: .75rem; */

  label {
      display: block;
      font-size: .875rem;
      color: #232323;
  }
  &.textonly {
    flex-direction: row;
    align-items: center;  
    label {
      width: 3.75rem;
    }
    div {
      flex: auto;
      line-height: 1.75rem;
    }
  }
  
  .input_text {
      line-height: 2.75rem;
      font-weight: bold;
      &.multi {
          display: flex;
          gap: .4rem;
          * {
              line-height: 2rem;
              font-weight: bold;
          }
      }
  }
  input + .button {

  }
  .set {
      position: relative;
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: .3rem;
      .button {
          height: 2.875rem;
          font-size: .875rem;
      }
      .unit {
          position: absolute;
          right: 1rem;
          top: .75rem;
          font-size: .9rem;
      }
      input {
          flex: 1;
      }
  }
  .empty_data {
      padding: 5rem 0;
      background-color: #f7f7f7;
      border-radius: .3125rem;
      font-size: .75rem;
  }
}
/* 첨부파일 */
.input_title {
  display: flex;
  position: relative;
  align-items: center;
  gap: .3rem;
  label {
    flex: 1;
  }
  .button {
    height: 2.5rem;
    padding: 0 1rem;
    gap: 0;
    font-size: .8125rem;
    color: #5A5D60;
    box-shadow: none;
  }
}
.file_edit, .file_load_btn {
  display: block;
  width: 100%;
  text-align: center;

  label {
    min-width: 9rem;
    border: 0.063rem solid #d4d4d4;
    border-radius: .5rem;
    background-color: #f1f1f1;
    padding: 0 1rem;
    line-height: 2.75rem;
    font-size: 1rem;
    font-weight: bold;
    box-shadow: .0625rem .125rem 1rem 0 rgba(0, 0, 0, 0.05);
  }
  .description {
    padding-left: 1rem;
  }
}
.file_load_wrap, .image-input-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-bottom: 1rem;

  article {
    width: 100%;
    position: relative;
    display: flex;    
    flex-direction: column;
    gap: .5rem;
    padding: 0 .5rem 1rem;
    &.input_box {     
      flex-direction: row;
      align-items: center;
      label {
        width: 10rem;
      }
    }
  }  
  .file_load_img {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;

    li {
      position: relative;
      width: calc(25% - 6px);
      height: 6rem;
      background: #dddddd;      

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .file_delete_btn, .preview__delete {
      position: absolute;
      top: 0;
      right: 0;
      display: block;
      width: 1.25rem;
      height: 1.25rem;
      border: 0;
      background: url("../images/icon/icon_list_delete_btn.svg") no-repeat center/100%;
      cursor: pointer;
    }
    &.a4_type {
      li {
        height: 10.875rem;
        overflow: hidden;
        background-color: #fff;
        text-align: center;
        .preview__image {
          object-fit: none;
        }
      }      
    }
  }
  .file_load_file {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;

    li {
      border-radius:100rem;
      border:1px solid #eee;
      padding:.5rem 1rem .5rem 1.5rem;

      span {
        padding-right:1rem;
        font-size:.75rem;
        color:#555;
      }
    }
    .delete {     
      display:inline-block; 
      width: 1.5rem;
      height: 1.5rem;          
      padding: 0;
      border-radius: 100%;
      background-color: #2c2c2c;
      background-image:url("../images/icon/icon_list_delete_btn.svg");
      background-repeat:no-repeat;
      background-position:center;
      background-size: auto 80%;
      font-size: 0;  
      cursor: pointer;
    }
  }
}

/* range slider */
.range_title {
  padding-bottom: .75rem;
  .range_text {
      font-size: .8125rem;
      color: #8a8a8a;
      text-align: right;
  }
}
.slider {
  position: relative;
  z-index: 1;
  height: .0625rem;
  background-color: #d4d4d4;  
}
.slider > .range, .slider > .thumb {
  position: absolute;
  height: 1.5rem;
} 
.slider > .range {
  z-index: 2;
  height: .125rem;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: #2070ff;
}
.slider > .thumb {
  z-index: 3;
  top: 50%;
  transform: translateY(-50%);
  width: 1.5rem;
  background-color: #fff;
  border: 1px solid #2070ff;
  border-radius: 50%;
}
.slider > .thumb.left {
  left: 0;  
}
.slider > .thumb.right {
  right: 0;
}
.range-slider {
  margin-bottom: 1rem;
  input[type="range"] {
      position: absolute;
      height: calc(100vw * (8 / 1242));
      pointer-events: none;
      z-index: 2;
      width: 100%;
      opacity: 0;
    }
    input[type="range"]::-webkit-slider-thumb {
      pointer-events: all;
      width: calc(100vw * (60 / 1242));
      height: calc(100vw * (60 / 1242));
      border-radius: 0;
      border: 0 none;
      cursor: pointer;
      -webkit-appearance: none;
    }
}

/* button */
.button {
  position: relative;
  display: flex;
  min-width: 3.375rem;
  height: 2.75rem;
  padding: 0 2.25rem;
  border: 0;
  border-radius: .3125rem;
  white-space: nowrap;
  align-items: center;
  place-content: center;
  /* background:linear-gradient(155deg, #1481ef 0 0%, #1262da 30%, #1262da 100%); */
  background: linear-gradient(155deg, #4077e9 0 0%, #1b5bf3 50%, #5865de 100%);
  color: #fff;
  font-size: 1rem;
  line-height: 1;
  /* letter-spacing: -.05rem; */
  box-shadow: 0 .25rem .75rem 0 rgba(0, 0, 0, 0.04);

  &.icon {
    min-width: auto;
  }
  &.mini {
      height: 2rem;
      font-size: .875rem;
      padding: 0 1rem;
      border-radius: .3125rem;
  }
  &.down::after {
      background-image: url(../images/Mobile/icon_down.svg);
  }
  &.call::after {        
      background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.7653 13.9507C12.8653 16.1125 14.6375 17.8847 16.7993 18.9847L18.4799 17.3042C18.6938 17.0903 18.9917 17.0292 19.259 17.1132C20.1146 17.3958 21.0312 17.5486 21.9861 17.5486C22.1887 17.5486 22.383 17.6291 22.5263 17.7723C22.6695 17.9156 22.75 18.1099 22.75 18.3125V20.9861C22.75 21.1887 22.6695 21.383 22.5263 21.5263C22.383 21.6695 22.1887 21.75 21.9861 21.75C18.542 21.75 15.2389 20.3818 12.8035 17.9465C10.3682 15.5111 9 12.208 9 8.76389C9 8.56129 9.08048 8.36699 9.22374 8.22374C9.36699 8.08048 9.56129 8 9.76389 8H12.4375C12.6401 8 12.8344 8.08048 12.9777 8.22374C13.1209 8.36699 13.2014 8.56129 13.2014 8.76389C13.2014 9.71875 13.3542 10.6354 13.6368 11.491C13.7208 11.7583 13.6597 12.0562 13.4458 12.2701L11.7653 13.9507Z' fill='%232070ff'/%3E%3C/svg%3E%0A");

  }    
  &.fax {
      background: #223C61;
      border-radius: 50%;
      width: 2.75rem;
      height: 2.75rem !important;

      &.none {
          display: none;
      }
  }
  &.auction::after {
    background-image: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 15L30 25L20 35' stroke='%2350555C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  }
  &.myinfo::after {
    background-image: url(../images/main/icon_myinfo.svg);
  }
  &.jjim::after {
    background-image: url(../images/main/icon_jjim.svg);
  }
  &.mycar::after {
    background-image: url(../images/main/icon_mycar.svg);
  }
  &.toggle::after {
    background-image: url(../images/Mobile/icon_go.svg);
    transform: rotate(90deg);    
  }
  &.toggle.active::after {
    background-image: url(../images/Mobile/icon_go.svg);
    transform: rotate(-90deg);
  }
  &.back {
    padding-left: 4rem;
    background: url(../../auction/asset/icon/icon_prev.png) 1.75rem .5rem no-repeat #fff !important;
    background-size: auto 1.5rem !important;
    font-weight: bold;
  }
}
.button.line {
  border: 0.063rem solid rgba(0,0,0,.08);
  /* border: 0.063rem solid #bcc4c9; */
  background: #fff;
  color: #3B3D3F;
  &.mini {
      color: #232323;
      font-weight: normal;
  }
  &.icon {
    padding-right: 1rem;
  }
}
.button.linecolor {
  border: 0.063rem solid rgba(0,0,0,.08);
  /* border: 0.063rem solid #bcc4c9; */
  background: #fff;
  color: #2070ff;
  font-weight: bold;
  &.mini {
      color: #2070ff;
      font-weight: normal;
  }
  &.icon {
    padding-right: 1rem;
  }
}
.button.mini_type {
  height: 2.625rem;
  padding: 0 2.25rem;
  font-size: .875rem;
  font-weight: normal;
  /* background: #223C61; */
}
.button.text {
  height: 2.75rem;
  border: 0;
  background: transparent;
  color: #5A5D60;
  text-decoration: underline;
  font-weight: normal;
  font-size: .875rem;
  box-shadow: none;
}
.button.link {
  height: 1.5rem;
  border: 0;
  padding: 0;
  background: transparent;
  color: #5A5D60;
  font-weight: normal;
  font-size: .875rem;

  &::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      border-bottom: 1px solid #5A5D60;
      width: 100%;
  }
}
.button.mycaradd {
  background-image: url(../images/Mobile/icon_write.svg);
    background-size: auto 1.75rem !important;
    background-repeat: no-repeat;
    background-position: 90% center;
    padding-left: 1rem;
    border: 1px solid rgb(27,118,255,.75);
    color: #1b76ff;
    font-weight: bold;
    box-shadow: none;
}
.button.black {
  /* background: #223C61;
  background: #31435f; */
  background: linear-gradient(155deg, #163169 0 0%, #202e51 50%, #25273d 100%);
}
.button.midgray {
  background: #8a8d92;
}
.button.white {
  background: #fff;
  color: #3B3D3F;
}  
.button.darkgray {
  background: #50555C;
}  
/* .button.icon {
  width: 3.375rem;
  padding: 0;
  font-size: 0;
}   */
.button.icon {
  padding-right: 3rem;
  &:after {
    content: '';
    display: inline-block;
    width: 2.5rem;
    height: 2.5rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 2.25rem;
    vertical-align: middle;
  }
}
.button_design_type {  
  position: relative;
  padding: 2.125rem 3rem;
  background: #eef2f5;
  border-radius: .5rem;
  font-size: 1.25rem;
  font-weight: bold;
  box-shadow: 0 .25rem .375rem 0 rgba(0, 0, 0, 0.03);
  cursor: pointer;

  &::after {
      right: 1rem !important;
      background-size: auto 2rem !important;
  }
  p {
      padding-top: .4rem;
      word-break: keep-all;
      color: #5A5D60;
      font-size: .8125rem;
  }
}  
.button_toggle {
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/Mobile/icon_go.svg);
  background-size: auto 1.625rem;
  transform-origin: center;
  transform: rotate(90deg);
  font-size: 0;
  &.active {
    transform: rotate(-90deg);
  }
}
 .checkbox_square {
  height: 2.875rem;
  border: 0.063rem solid #d6d8da;
  background: #fff;
  text-align: center; 
  font-size: .9375rem;
  font-weight: 500;
  color: #8a8a8a;

  &.active {
      border-color: #2070ff;
      color: #2070ff;
      &:focus {
          border-color: #2070ff;
      }
  }
  &:focus {
      border-color: #d6d8da;
  }
}

.button_wrap {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.063rem;
  align-self: stretch;
  padding-top: .5rem;
  font-size: 0;

  button {
      min-width: 6rem;
    }  
}
.button_wrap_fixed {
  position: relative;
  height: 5.25rem;
  z-index: 1000;

  .button_wrap {
      position: fixed;
      left: 0;
      bottom: 0;
      right: 0;
      background: #fff;
      padding: 0.625rem 1.25rem 1.25rem;
      gap: 0.625rem;
  }
  &.full-width {
      height: 3.75rem;
      .button_wrap {
          padding: 0;
          .button {
              height: 3.75rem;
          }
      }
  }  
  &.paddRL0 {
      height: 3.75rem;
      .button_wrap {
          padding: 0;
          gap: 0;
          .button {
              height: 3.75rem;
          }
      }
  }
}  
.button_wrap_fixed.bgwhite .button_wrap {
  background: #fff;
}

/********************************************** 
  Etc 
**********************************************/
.marker{
  position: relative;

  &::after{
      content: '*'; 
      position: absolute;
      padding-left: .25rem;
      color: #ec2323;
      font-size: 1.25rem;
  }
}
.marker_no {
  font-size: .8125rem;
  color:#9DA5AA;
}
.explain {
  font-size: .8125rem;
  color: #ec2323;
  
  &.mini {
      font-size: .75rem;
      color: #858B93;
  }
}
.division_line {
  margin: 2rem -1.625rem;
  height: 1rem;
  background: #f5f5f5;
}
.go::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1.25rem;
  height: 1.25rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 50px;
  background-image: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 15L30 25L20 35' stroke='%2350555C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  }
.label {
  display: inline-block;
  border-radius: .1875rem;
  padding: .25rem .25rem;
  font-size: 0;
  /* font-weight: bold; */
  color: #2f74ff;
  text-align: center;
  border-radius: 0;
  line-height: 1;

  &::after {
      content: '';
      font-size: .875rem;
      font-weight: bold;
      padding: .125rem .5rem;
      display: none;   
  } 
  &.ad_stop {
    color: #EE0000;
    font-weight: bold;
  }
  &.ad_stop::after {
      content: '광고일시중지';
      color: #EE0000;
  }
  &.installment {
      color: #fff !important;
      background-color: #22a1ff;
      font-size: .9375rem;
  }
  &.lease {
      color: #fff !important;
      background-color: #7573ff;
      font-size: .9375rem;
  }
  &.addcar {
    padding: .125rem .5rem !important;
    margin-right: .25rem;
    border-radius: 10rem;
    border: 1px dashed #2070ff;
    font-size: .75rem !important;
    line-height: 1;    
  }
  &.complete {
    color: #888;
}
}
.empty_data, .empty_container {
  width: 100%;
  padding: 5rem 0;
  text-align: center;
  color: #9DA5AA;
  font-size: 1rem;
  * {
      font-size: .8125rem;
  }
}
.paddRL0 {
  padding: 0 !important;
}
.box {
  border-radius: .3125rem;
  border: 1px solid #e3e3e3;
  padding: 1.75rem 2.25rem;
  margin: 0 -.5rem; 
}
.ex, .description, .gray_text {
  font-size: .75rem;
  color: #9DA5AA;
  word-break: keep-all;
}
.guide_text {
  font-size: .9375rem;
  padding: 1rem;
}
.data_textarea {
  overflow: hidden;   
  
  .guide_line {
    * {
      color: #5A5D60;
      font-weight: normal;
      font-size: .875rem !important;
    }
    p > strong {
      display: block;
      padding: 0 0 1rem;
      font-weight: bold;
      color: #3B3D3F;

      br {
        display: none;
      }
    }
  }
} 
.txt_blue {
  color: #2070ff;
}
.hidden {
  display: none !important;
}

/********************************************** 
  popup 
**********************************************/
html.hidden, body.hidden {
  overflow: hidden;
  height: 100%;
}
.popup.modal-reset { display:block !important;position:relative !important;height:auto !important; }
.popup.bank_modal01 .content {
  width: 42rem;
}
.popup.bank_modal02 .content, .popup.capital_modal02 .content {
  width: 30rem;
}
.popup.bank_modal03 .content {
  width: 27rem;
}
.modal.application_modal .modal_inner { width: 40.625rem; }
.modal.application_complete_modal .modal_inner, .popup.fax_able_modal .content { width: 32.5rem; }
.modal.final_modal .modal_inner { width: 36rem; }
.popup.fax_disable_modal .content, .popup.fax_none_modal .content { 
  width: 28rem;
  > div {
    line-height: 1.8;
  }
 }
 .popup.fax_disable_modal .content { width: 30rem; }
 .popup.auction_ready .content > div { line-height: 1.8;}
.modal::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background-color: rgba(0,0,0,0.6);
  z-index: -1;
}
.popup, .modal {
  display:none;
  overflow-y:auto;
  overflow-x:hidden;
  position:fixed;
  left:0;
  top:0;
  width:100%;
  height:100vh;
  z-index:99999;
  -webkit-overflow-scrolling:touch;
  box-shadow: 0 .25rem .75rem 0 rgba(0, 0, 0, 0.08);

  .title_wrap h2, .modal_title {
      font-size: 1.375rem;
      font-weight: bold;
      color: #222322;
   }
   .pop-header {        
      position: absolute;
      left: 1.5rem;
      top: 1.25rem;
      font-size: .8125rem;
   }

  .close, .popup_close, .close_button {
      position:absolute;
      top: .5rem;
      right: .5rem;
      width:4rem;
      height: 4rem;
      background-image: url(../images/Mobile/icon_closeback.svg);
      background-color: transparent;
      background-size: auto 2.5rem;
      background-position: center;
      background-color: transparent;
      background-repeat: no-repeat;
      font-size:0;
      box-shadow: none;
      img {
        display: none;
      }
  }
  .content, .modal_inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 4rem 3rem 3.5rem;
    max-width: 56.25rem !important;
    width: 85%;
    max-height: 90% !important;
    background:#fff;
    border-radius: 1.875rem 0 1.875rem 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    word-break: keep-all;
    color: #5A5D60;
    p {
        padding:.5rem 0;
    }
    .popup_ex {
        padding-bottom: 1.5rem;
        font-size: .9rem;
        line-height: 1.6;            
    }
    .finance_fin_btn {
      padding-top: .5rem;
    }
    .modal_submit, .confirm_button {
      width: 100%;
      position: relative;
      height: 3.25rem;
      border: 0;
      border-radius: .3125rem;
      white-space: nowrap;
      align-items: center;
      place-content: center;
      background: linear-gradient(155deg, #4077e9 0 0%, #1b5bf3 50%, #5865de 100%);
      color: #fff;
      font-size: 1rem;
      line-height: 1;
      box-shadow: 0 .25rem .75rem 0 rgba(0, 0, 0, 0.04);
    }
  }
  &.alert .content {
      width: 26rem;
  }
  .button_wrap {
      margin: 0 -.5rem -1.5rem;

      .button, .modal_confirm {
          flex: unset;
          min-width: auto;
          height: 2.75rem !important; 
          background: transparent;
          color: #2070ff;
          box-shadow: none;          
          font-weight: bold;         
          &.gray {
              color: #5A5D60;
          }
      }
      .modal_submit + .modal_confirm {
        width: 10rem;
        border-radius: .3125rem;
        border: 0.063rem solid rgba(0, 0, 0, .08);
        background-color: #c1c6c9;
        height: 3.25rem !important;
        color: #fff;
      }
  }
  .overlay {
      width: 100%; 
      height: 100%; 
      background-color: rgba(0,0,0,0.6);
  }
  .description {
      color: #5A5D60;
  }  
}

/*************************************************************
  main
**************************************************************/
.main_wrap {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 3.5rem 0 5rem;

  .main_banner {
    border-radius: .5rem;
    font-size: 0;
    overflow: hidden;
    img {
      width: 100%;
    }
  }
  .main_myinfo {
    display: flex;
    align-items: flex-end;
    .name {
      flex: 1;
      padding-left: .5rem;
      font-size: 1.875rem;
      color: #3B3D3F;
      b {
        font-weight: bold;
        font-size: inherit;
      }
    }
    .btns {
      display: flex;
      gap: .25rem;
      button {
        height: 3rem;
        padding-right: .5rem;
        padding-left: 1.75rem;
        /* border-radius: .3125rem; */
        color: #222322;
        font-size: .9375rem;     
        box-shadow: none;
        &:after {          
          background-size: auto 1.25rem;
        }   
      }
    }    
  }
  .main_middle_wrap {
    display: flex;
    gap: 2rem;

    .main_state_left {
      flex: 1;

      .main_search {
        display: flex;
        border: 1px solid #3686ff;
        border-radius: .3125rem;
        background-color: #fff;
        box-shadow: 0 .25rem .375rem 0 rgba(0, 0, 0, 0.03);
    
        input {
          flex: auto;
          height: 4.125rem;
          padding: 0 1.25rem;
          border: 0;
          background: transparent;
          font-size: 1.125rem;
        }
        .button {
          background: transparent;
          box-shadow: none;
          height: 4.125rem;
          padding: 0 1rem;
    
          &.search:after {        
            height: 2.375rem;
            width: 2.375rem;
            margin-right: 0;
            background-image: url(../images/Mobile/icon_search.svg);
            background-size: auto 100%;
          }
        }
      }
    }
    .main_state_wrap {
      flex: 1;

      .product_status_wrap {
        /* background-color: #1367e9; */
        /* background: linear-gradient(45deg, #4485e7, #6b81f3); */
        background: linear-gradient(155deg, #4077e9 0 0%, #1b5bf3 50%, #5865de 100%);
        padding: 2.25rem 2rem;
        border-radius: .5rem;
        color: #fff;
        h3 {
          padding: 0 .625rem 0 !important;
          color: #fff;
          /* font-size: 1.125rem; */
        }       
        .product_status {
          display: flex;
          padding: 1.75rem .625rem;
    
          li {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
            font-size: .9375rem;
            color: rgba(255, 255, 255, .8);
    
            p {
              display: inline-block;
              position: relative;
              font-size: 2.625rem;
              font-weight: bold;
              color: #fff;
            }
            p:after {
              content: '';
              position: absolute;
              left: 0;
              right: 0;
              bottom: .2rem;
              height: .0625rem;
              color: #fff;
              background-color: rgba(255,255,255,.65);
            }
            &:nth-child(2) p {
              color: #FCFF78;
              &:after {
                background-color: #FCFF78;                
              }
            }
          }
        }
      }
      button {
        width: 100%;
        background: #fff;
        color: #1367e9;
        justify-content: space-between;
        padding-left: 1.875rem;
        font-size: .9375rem;
        &.go::after {
          right: .5rem !important;
          background-size: auto 1.5rem !important;
          background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.6001 7.2L14.4001 12L9.6001 16.8' stroke='%231367e9' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
        }
      }
    }  
  } 
  .cars_go {
    display: flex;
    font-size: 0;
    padding: 1.75rem 0 0 ; 
    gap: 1.125rem;    

    a {
        flex: 1;
        height: 100%;
        padding: 1.875rem 0;
        border-radius: .3125rem;
        text-align: center;
        text-decoration: none;
        font-size: 0;
        border: 1px solid #f1f1f1;
        /* box-shadow: 0 .25rem .375rem 0 rgba(0, 0, 0, 0.03); */

        div {
            display: block;
            font-size: 1.125rem;
            font-weight: bold;
        }
        
        .icon {
            display: inline-block;
            width: 5.5rem;
            height: 5.5rem;        
            background-repeat: no-repeat;
            background-position: center top;
            background-size: auto 4.375rem;
    
            &.i01 {
                background-image: url(../images/Mobile/main_icon_1.png);
            }
            &.i02 {
                background-image: url(../images/Mobile/main_icon_2.png);
            }
            &.i03 {
                background-image: url(../images/Mobile/main_icon_3.png);
            }              
        }     
    }
  } 
  .main_button_wrap {
    display: flex;
    /* flex-direction: column; */
    gap: 2rem;
  }
  .button_design_type {    
    flex: 1;
    /* border-radius: 0;
    display: flex;    
    align-items: center; */

    &.stock_finance {
      background: #E5EFF8;
      color:#1367e9;
    }
    &.used_lease {
      text-indent: 4.25rem;

      &::before {
        content: '';
        position: absolute;
        top: 50%;        
        left: 2.25rem;
        transform: translateY(-50%);
        width: 3.75rem;
        height: 3.75rem;
        border-radius: 50%;
        background-color: #fff;
        background-image: url(../images/Mobile/main_cal.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: auto 2.5rem;
        overflow: hidden;
      }    
      p {
        padding-left: 4.25rem;
        text-indent: 0;
      }  
    }
    &.go::after {
      background-size: auto 2.5rem !important;
      right: 2rem !important;
    }    
  }
  .data_textarea {
    display: none;
  } 
  .notice_ticker {
    position: relative;    
    display: flex;
    align-items: center;
    height: 5rem;    
    padding: 0 3rem;
    border-radius: .3125rem;
    border: 1px solid rgba(0,0,0,.1);

    div {      
      font-size: 1.25rem;
      text-indent: 3rem;
      font-weight: bold;
      cursor: pointer;
      flex: 1;
      color: #3B3D3F;
    }
    &:before {
      content: '';
      position: absolute;
      left: 3rem;
      top: 50%;
      transform: translateY(-50%);
      width: 2.25rem;
      height: 2.25rem;
      border: 1px solid rgba(0,0,0,.1);
      border-radius: 50%;
      background: url(../images/main/icon_notice.svg) no-repeat center;
      background-size: auto 1.5rem;
    }
    button {
      margin-right: -2.5rem;
      text-decoration: none;
      &::after {
        background-image: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 15L30 25L20 35' stroke='%2350555C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
        background-size: auto 1.75rem !important;
      }
    }
  }
}  

/*************************************************************
  서브공통
**************************************************************/
.title_wrap {
  position: relative;
  padding: 0rem .5rem 1rem;
  h3 {
    font-size: 2rem;
    font-weight: bold;
    color: #3B3D3F;
  }
  h4 {
    font-weight: bold;
    font-size: 1.375rem;
  }
  .right {
    position: absolute;
    display: flex;
    gap: .5rem;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  > .button {
    position: absolute;
    right: 0;
    margin-top: -.5rem;
    top: 50%;
    transform: translateY(-50%);
    padding-right: 2.25rem !important;
    text-decoration: none;
    &::after {
      background-size: auto 1.75rem;
    }
  }
}
.h4 { 
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #ddd;
  margin-bottom: 1rem;
  font-weight: bold;
  font-size: 1.25rem;  
}
.section-title {
  display: none;
  position: relative;
  padding: 4rem .5rem 1.25rem;
  font-size: 1.5rem;
  font-weight: bold;
  color: #3B3D3F;
}

/* paging  */
.pagination {
  display: flex;
  padding: 1rem 0;
  justify-content: center;
  align-items: center;
  gap: 12px;
  .pagination__indicator {
    width: 20px;
    height: 20px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }
  
  .pagination__number-wrapper {
    display: flex;
    gap: 8px;
  }
  
  .pagination__number {
    font-size: 16px;
    width: 20px;
    height: 20px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: #888888;
  }
  
  .pagination__number--active {
    color: #004bb0;
    font-weight: 700;
  }
}
.state {
  display: inline-block;
  font-size: 1rem;
  font-weight: bold;
  padding: .375rem 1rem;
  line-height: 1;
  border: 1px dashed #5A5D60;
  border-radius: 5rem;
  background-color: #fff;
  &.out {
    color: #5A5D60;
  }
  &.cancel {
    color: #aaa;
  }
  &.success {
    color: #2AC25E;
  }
  &.compete {
    color: #1b76ff;
  }
}

/**********************************************************************************************
    Form
***********************************************************************************************/
/* Form */
.form__input-wrapper, .info_list, .list_wrap, .price_wrap, .final_detail_container ul {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 1rem .5rem;  
  .form__input-row, li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .625rem;
    label, .list_title, .price_title, .final_detail_title {
      display: inline-block;
      white-space: nowrap;
      max-width: 11rem;
      width: 100%;
      font-size: 1rem;
      color: #5A5D60;
      &.form__input-label--required:after {
        content: "*";
        color: #ff0101;
        vertical-align: middle;
        padding-left: .5rem;
      }
    }
    .unit {
      position: relative;
      > span {
        position: absolute;
        right: 1rem;
      }
    }
    .price_text {
      flex: auto;
      color: #222322;
      text-align: right;
    }
  }
  .form__input-column {
    flex: auto;
    > div {
      display: flex;
      gap: .25rem;
    }
  }
  .button {
    height: 2.75rem;
    font-size: .9375rem;
  }
}
.form__terms-wrapper {   
  padding: 3rem .5rem; 
  border-top: 1px solid #e4e4e4;
  > .form__terms-label {
    padding-bottom: 1rem;
    font-weight: bold;
    &::after {
      padding-left: .5rem;
      font-weight: normal;
      vertical-align: middle;
    }
  }
  .checkbox--xlarge {
    padding: .5rem 1rem;
    margin-bottom: .5rem;
    background-color: #f8f9fb;
    label {
      width: 100%;
      font-weight: bold;
    }
  }
  .form__terms-row {
    padding: 0 1rem;
    align-items: center; 
    display: flex;
    > div {
      flex: auto;
    }
    .form__terms-detail {
      font-size: .875rem;
      text-decoration: underline;
      color: #828282;
    }
    label {
      font-size: .9375rem;
    }     
  }    
}
.button_wrap {
  gap: .5rem;
  .button {
    max-width: 100% !important;
    height: 3rem;
  }
}
.login_page {
  .logo {
    height: 4.5rem;
  }
  .page-container {
    height: 100vh;
    display: flex;
    align-items: center;
    .logo_title {
      padding-bottom: 3rem;
      p {
        text-align: center;
        color: #8b8f93;
      }
    }
  }
}
.join_page {
  background-color: #f0f4f9;
  .form__input-wrapper {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  .main__content{
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .register-container {
    position: relative;
    margin: 0 auto;
    width: 34.25rem;
    background: #fff;
    padding: 3rem;
    border-radius: 0 2.25rem 0 2.25rem;
  }
  .copy-description {
    padding-top: 1rem;
    font-size: .75rem;
    color: #8b8f93;
    text-align: center;
  }
  .register-description {
    font-size: .875rem;
    color: #8b8f93;
  }
  .color--gray {
    padding-left: .25rem;
    color: #999;
    font-size: .8125rem;
  }  
  .divider {
    display: none;
  }
}
/* login */
.login-container {
  max-width: 23.75rem;
  margin: 0 auto;
  text-align: center;

  .login_input {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-bottom: 1rem;    
    .input_item input {
      border-radius: 0;
    }
  }
  .button_wrap {
    .button {
      height: 3.75rem;
    }
  }  
  .login_btn {
    display: block;

    .button {
      width:100%;
      box-shadow: none;
      border: 0;                 

      &.text {
        padding: 0 .5rem;
        text-align: right;        
        justify-content: end;
        margin-bottom: 2rem;
        font-size: .875rem; 
      }
      &.line {
        font-weight: bold;
        color: #2577f3;
        font-size: .9375rem; 
        u {
          position: relative;
          padding-left: .5rem;
          text-decoration: none;
          &::after {
            content: '';
            position: absolute;
            left: .5rem;
            right: 0;
            bottom: -0.0625rem;
            height: .0625rem;   
            background-color: #2577f3;         
          }
        }
      }
    }
    &> div {
      display: none;
      padding: 2rem 0 .5rem;
      text-align: center;
      font-size: .875rem;
    } 
  }
  .input_item {
    position: relative;
    input {
      position: relative;
      background-color: transparent !important;
      height: 3.25rem;
      padding: 1.25rem 1rem .25rem 1rem;
      transition: background-color 5000s ease-in-out 0s;
      font-weight: bold;
      font-size: 1rem;
      color: #5A5D60;
      border-color: #e0e0e0;
      border-width: 0 0 .0625rem;
      z-index: 2;
      -webkit-box-shadow: none !important;
      &:focus {
        border-color: #6c93ff;
      }
      &:-webkit-autofill, &:focus {
        -webkit-text-fill-color: #222322;
        font-weight: bold !important;
      }
    }
    input[type=text] + label, input[type=password] + label {
      position: absolute;
      top: 32%;
      left: 1rem;
      font-size: 1rem;
      z-index: 1;
      color: #a5abb3;
      -webkit-transition: all .5s ease;
      -ms-transition: all .5s ease;
      transition: all .5s ease;
    }
    label.filled, input:focus + label, input:-webkit-autofill + label {
      top: .25rem !important;
      left: 1rem !important;
      color: #929292;
      font-size: .75rem !important;
      z-index: 1 !important;
    }
  }
}
/* �����̴� */
.swiper {      
  .swiper-slide {
    text-align: center;
  }
}
.swiper-slide img {
  object-fit: contain;
}
.swiper-button-next, .swiper-button-prev {
  width: 3rem !important;
  height: 3rem !important;
  background-color: rgba(0,0,0,.5);
  border-radius: 50%;
  &::after {
    content: '';
    width: .75rem;
    height: .75rem;
    margin-left: .5rem;
    border:2px solid #eee;
    border-width: 2px 0 0 2px;
    transform: rotate(-45deg);
    font-size: 0 !important;
  }
  &.swiper-button-disabled {
    display: none;
    opacity: .2 !important;
  }
}
.swiper-button-next::after {
  transform: rotate(135deg);
  margin-left: -.25rem;
}