@charset "UTF-8";
/* ===== Usage =====
div {
  You can pass width && height
  @include box(200px, 300px);
  or just pass width and the height
     will default to the width value
  @include box(200px);
}
*/
/* ===== Usage =====
.vertical-centered-element {
  @include flex-center-vert;
}

.horizontally-centered-element {
  flex-direction: column;
  @include flex-center-vert;
}
*/
/* font-size, line-height, letter-spacing

 ===== Usage =====
p {
  @include font-size(12, 18, 1.2);
  // returns
  font-size: 12px;
  line-height: 1.5; // 18 / 12
  letter-spacing: 0.1em;
}
*/
/*
  $object: before or after
    default : before
  $position : relative or absolute or fixed
    default : relative
*/
@import 'reset.css';
@import '../fonts/fonts.css';
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
* {
  box-sizing: border-box;
  word-break: keep-all;
  word-wrap: break-word;
  font-family: "Pretendard", sans-serif;
  letter-spacing: -0.01em;
  color: #454545;
}

html,
body {
  height: 100%;
}

#wrapper {
  max-width: 640px;
  height: 100%;
  margin: 0 auto;
  padding: 0 20px 0;
}
#wrapper #header {
  position: relative;
  padding-top: 52px;
}
#wrapper #header h1 {
  text-align: center;
  font-size: 24px;
  font-weight: 900;
  line-height: 130%;
  color: #000;
}
#wrapper #header h1 span {
  display: block;
  font-size: 20px;
  font-weight: 400;
  line-height: 130%;
}
#wrapper #header h1 ~ p {
  margin-top: 16px;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  color: #888;
  text-align: center;
}
#wrapper #header .btmBack {
  position: absolute;
  left: 0;
  top: 3px;
  width: 24px;
  height: 24px;
  background: 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='M15 19L8 12L15 5' stroke='%23454545' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") no-repeat 50%;
}
#wrapper #container {
  position: relative;
  z-index: 1;
  min-height: 100%;
  margin: -84px auto -100px;
  padding: 84px 0 100px;
  display: flex;
  align-items: center;
  width: 100%;
}
#wrapper #contents-bottom {
  height: 110px;
}
#wrapper.store-new-popup #container {
  margin: 0;
  padding: 0;
}
#wrapper.store-new-popup #content-bottom {
  padding-bottom: 20px;
}

.hiddenElement {
  width: 0;
  height: 0;
  overflow: hidden;
}

button {
  cursor: pointer;
}
button:disabled {
  cursor: default;
}

span.arrow {
  position: relative;
  width: 100%;
  height: 1px;
  background: #fff;
  border-radius: 1px;
}
span.arrow {
  position: relative;
}
span.arrow:before {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 50%;
  height: 1px;
  background: #fff;
  transform: rotate(45deg);
  transform-origin: center right;
}
span.arrow {
  position: relative;
}
span.arrow:after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 50%;
  height: 1px;
  background: #fff;
  transform: rotate(-45deg);
  transform-origin: center right;
}

.fraction-controllers {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 4px;
}
.fraction-controllers .arrow-button {
  position: relative;
  width: 24px;
  height: 24px;
  cursor: pointer;
  background: rgba(17, 17, 17, 0.3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5.207' height='9.414' viewBox='0 0 5.207 9.414'%3E%3Cpath d='M1,1,5,5,1,9' transform='translate(-0.293 -0.293)' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1'/%3E%3C/svg%3E%0A") no-repeat 54% 50%/6px auto;
  border-radius: 50%;
  transition: 0.2s all 0s ease-in-out;
}
.fraction-controllers .arrow-button:first-of-type {
  transform: rotate(180deg);
  background-position: 50% 42% !important;
}
.fraction-controllers .arrow-button.swiper-button-disabled {
  cursor: auto;
  background: rgba(17, 17, 17, 0.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5.207' height='9.414' viewBox='0 0 5.207 9.414'%3E%3Cpath d='M1,1,5,5,1,9' transform='translate(-0.293 -0.293)' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1'/%3E%3C/svg%3E%0A") no-repeat 54% 50%/6px auto;
}
.fraction-controllers .swiper-pagination {
  display: flex;
  align-items: center;
  position: static;
  width: auto;
  height: 26px;
  padding: 0 12px;
  border-radius: 13px;
  background: rgba(17, 17, 17, 0.5);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
}
.fraction-controllers .swiper-pagination span {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  margin: 0 2px;
}
.fraction-controllers .swiper-pagination span.swiper-pagination-current {
  color: white;
}

.btn-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.btn-group.column {
  flex-direction: column;
}

.btn,
button[type=button].btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  text-decoration: none;
  cursor: pointer;
  height: 40px;
  width: 100%;
  border: 1px solid #454545;
  background: #454545;
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
  color: #fff;
}
@media screen and (min-width: 640px) {
  .btn,
  button[type=button].btn {
    font-size: 16px;
  }
}
.btn:disabled,
button[type=button].btn:disabled {
  cursor: default;
}
.btn.colorA,
button[type=button].btn.colorA {
  border: 1px solid transparent;
  background: transparent;
  color: #454545;
}
.btn.colorA:disabled,
button[type=button].btn.colorA:disabled {
  border: 1px solid transparent;
  background: #bbb;
  color: #fff;
}
.btn.colorB,
button[type=button].btn.colorB {
  border: 1px solid #F5F5F5;
  background: #F5F5F5;
  color: #000;
}
.btn.colorC,
button[type=button].btn.colorC {
  border: 1px solid #aaa;
  background: #aaa;
  color: #fff;
}
.btn.colorD,
button[type=button].btn.colorD {
  border: 1px solid #444;
  background: #444;
  color: #fff;
}
.btn.colorD:disabled, .btn.colorD.disabled,
button[type=button].btn.colorD:disabled,
button[type=button].btn.colorD.disabled {
  cursor: default;
  border: 1px solid #bbb;
  background: #bbb;
  color: #fff;
}
.btn.colorE,
button[type=button].btn.colorE {
  border: 1px solid #FF9900;
  background: #fff;
  color: #FF9900;
}
.btn.colorF,
button[type=button].btn.colorF {
  border: 1px solid #ddd;
  background: #fff;
  color: #444;
}
.btn.colorF.ico-plus:after,
button[type=button].btn.colorF.ico-plus:after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13.602' height='13.6' viewBox='0 0 13.602 13.6'%3E%3Cg transform='translate(-1614.852 -150.202)'%3E%3Cpath d='M-19490.348,8411h12' transform='translate(21106 -8253.998)' fill='none' stroke='%23444' stroke-linecap='round' stroke-width='1.6'/%3E%3Cpath d='M0,0H12' transform='translate(1621.652 151.002) rotate(90)' fill='none' stroke='%23444' stroke-linecap='round' stroke-width='1.6'/%3E%3C/g%3E%3C/svg%3E%0A") no-repeat 50% 50%;
}
.btn.sizeA,
button[type=button].btn.sizeA {
  height: 32px;
  font-size: 12px;
}
.btn.sizeB,
button[type=button].btn.sizeB {
  padding: 0 16px;
  min-width: 0;
  font-weight: 400;
  height: 32px;
  border-radius: 4px;
  font-size: 14px;
}
.btn.sizeC,
button[type=button].btn.sizeC {
  padding: 0 12px;
  min-width: 0;
  font-weight: 400;
  height: 30px;
  border-radius: 15px;
  font-size: 12px;
}
.btn.sizeD,
button[type=button].btn.sizeD {
  padding: 0 20px;
  min-width: 0;
  font-weight: 400;
  height: 48px;
  border-radius: 10px;
  font-size: 18px;
}
.btn.sizeE,
button[type=button].btn.sizeE {
  padding: 0 24px;
  min-width: 0;
  font-weight: 600;
  height: 46px;
  border-radius: 23px;
  font-size: 18px;
}
.btn.sizeF,
button[type=button].btn.sizeF {
  padding: 0 24px;
  min-width: 0;
  font-weight: 600;
  height: 44px;
  border-radius: 10px;
  font-size: 16px;
}
.btn.ico-plus,
button[type=button].btn.ico-plus {
  position: relative;
}
.btn.ico-plus:after,
button[type=button].btn.ico-plus:after {
  content: "";
  position: absolute;
  position: static;
  margin-left: 10px;
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13.602' height='13.6' viewBox='0 0 13.602 13.6'%3E%3Cg transform='translate(-1614.852 -150.202)'%3E%3Cpath d='M-19490.348,8411h12' transform='translate(21106 -8253.998)' fill='none' stroke='%23f90' stroke-linecap='round' stroke-width='1.6'/%3E%3Cpath d='M0,0H12' transform='translate(1621.652 151.002) rotate(90)' fill='none' stroke='%23f90' stroke-linecap='round' stroke-width='1.6'/%3E%3C/g%3E%3C/svg%3E%0A") no-repeat 50% 50%;
}

a.btn-basic {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  background: #454545;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
}
a.btn-basic.color-gray {
  color: #000;
  background: #F5F5F5;
}

.btnDel,
button[type=button].btnDel {
  display: inline-block;
  width: 22px;
  height: 22px;
  padding: 0;
  min-width: 0;
  line-height: 22px;
  border: 1px solid #666;
  cursor: pointer;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9.546' height='9.546' viewBox='0 0 9.546 9.546'%3E%3Cg transform='translate(-497.229 -278.799)'%3E%3Cpath d='M7326.307,2011.863h12' transform='translate(-6105.324 4045.694) rotate(-45)' fill='none' stroke='%23666' stroke-width='1.5'/%3E%3Cpath d='M7326.307,2011.863h12' transform='translate(-3260.121 -6323.754) rotate(45)' fill='none' stroke='%23666' stroke-width='1.5'/%3E%3C/g%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  text-indent: -300000em;
}

.tool-sub-menu {
  display: none;
  opacity: 0;
  transform: translateY(-20px);
  position: absolute;
  top: 20px;
  left: 50%;
  margin-left: -105px;
  padding-top: 18px;
  width: 210px;
  transition: 0.2s all 0s ease-in-out;
}
.tool-sub-menu {
  position: absolute;
}
.tool-sub-menu:before {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  margin-left: -11px;
  width: 22px;
  height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='18.041' viewBox='0 0 22 18.041'%3E%3Cg fill='%23fff' stroke-linecap='round'%3E%3Cpath d='M 18.43812942504883 17.54118347167969 L 3.561870098114014 17.54118347167969 C 3.012069940567017 17.54118347167969 2.523129940032959 17.25497436523438 2.253950119018555 16.77558326721191 C 1.984770059585571 16.29619407653809 1.994940042495728 15.72973346710205 2.281150102615356 15.26031303405762 L 9.719289779663086 3.060973405838013 C 9.993840217590332 2.610683441162109 10.47261047363281 2.341853380203247 11 2.341853380203247 C 11.52738952636719 2.341853380203247 12.00615978240967 2.610683441162109 12.28071022033691 3.060973405838013 L 19.71883964538574 15.26031303405762 C 20.00506019592285 15.72973346710205 20.01523017883301 16.29619407653809 19.74604988098145 16.77558326721191 C 19.47686958312988 17.25497436523438 18.98793029785156 17.54118347167969 18.43812942504883 17.54118347167969 Z' stroke='none'/%3E%3Cpath d='M 11 2.841854095458984 C 10.83117008209229 2.841854095458984 10.41001033782959 2.88856315612793 10.14618968963623 3.321264266967773 L 2.708059310913086 15.52060317993164 C 2.433029174804688 15.97169303894043 2.603750228881836 16.37732315063477 2.689920425415039 16.53078269958496 C 2.776090621948242 16.68424415588379 3.033550262451172 17.04118347167969 3.561870574951172 17.04118347167969 L 18.43812942504883 17.04118347167969 C 18.96644973754883 17.04118347167969 19.22390937805176 16.68424415588379 19.31007957458496 16.53078269958496 C 19.39624977111816 16.37732315063477 19.56697082519531 15.97169303894043 19.29194068908691 15.52060317993164 L 11.85381031036377 3.321273803710938 C 11.58998012542725 2.888572692871094 11.16882991790771 2.841854095458984 11 2.841854095458984 M 11 1.841854095458984 C 11.65893745422363 1.841854095458984 12.31787490844727 2.161462783813477 12.70761966705322 2.800683975219727 L 20.14575004577637 15.00002288818359 C 20.95836067199707 16.33278274536133 19.99908065795898 18.04118347167969 18.43812942504883 18.04118347167969 L 3.561870574951172 18.04118347167969 C 2.000919342041016 18.04118347167969 1.04163932800293 16.33278274536133 1.854249954223633 15.00002288818359 L 9.292380332946777 2.800683975219727 C 9.682125091552734 2.161462783813477 10.34106254577637 1.841854095458984 11 1.841854095458984 Z' stroke='none' fill='%23ddd'/%3E%3C/g%3E%3C/svg%3E%0A") no-repeat 50% 50%;
}
.tool-sub-menu {
  position: absolute;
}
.tool-sub-menu:after {
  content: "";
  position: absolute;
  top: 19px;
  left: 50%;
  margin-left: -11px;
  width: 22px;
  height: 6px;
  background: #fff;
}
.tool-sub-menu.open {
  opacity: 1;
  transform: translateY(0);
}
.tool-sub-menu ul {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  padding: 30px 20px;
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 30px;
}
.tool-sub-menu ul li {
  text-align: center;
}
.tool-sub-menu ul li a {
  font-size: 18px;
  line-height: 24px;
  color: #666;
}
.tool-sub-menu ul li a:hover {
  font-weight: 600;
  color: #1db7e8;
  text-decoration: none;
}

.tab-typeA {
  display: flex;
  border-bottom: 1px solid #F5F5F5;
}
.tab-typeA li {
  position: relative;
  width: 100%;
  flex: 1;
}
.tab-typeA li input[type=radio] {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  width: 0;
  height: 0;
  background: none;
  border: 0;
}
.tab-typeA li input[type=radio]:before {
  display: none;
}
.tab-typeA li input[type=radio]:checked + label {
  color: #454545;
}
.tab-typeA li input[type=radio]:checked + label:before {
  opacity: 1;
}
.tab-typeA li button,
.tab-typeA li a,
.tab-typeA li label {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 8px 0;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.42px;
  color: rgba(69, 69, 69, 0.6);
}
.tab-typeA li button,
.tab-typeA li a,
.tab-typeA li label {
  position: relative;
}
.tab-typeA li button:before,
.tab-typeA li a:before,
.tab-typeA li label:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: #454545;
  opacity: 0;
  transition: 0.2s all 0s ease-in-out;
}
.tab-typeA li button.on, .tab-typeA li button[aria-selected=true],
.tab-typeA li a.on,
.tab-typeA li a[aria-selected=true],
.tab-typeA li label.on,
.tab-typeA li label[aria-selected=true] {
  color: #454545;
}
.tab-typeA li button.on:before, .tab-typeA li button[aria-selected=true]:before,
.tab-typeA li a.on:before,
.tab-typeA li a[aria-selected=true]:before,
.tab-typeA li label.on:before,
.tab-typeA li label[aria-selected=true]:before {
  opacity: 1;
}

@media (min-width: 640px) {
  .tab-typeA li button,
  .tab-typeA li a,
  .tab-typeA li label {
    font-size: 16px;
    line-height: 1.3;
  }
}
.popupLayerWrapper {
  opacity: 0;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 30px;
  z-index: 100;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity ease-in-out 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.popupLayerWrapper.show {
  opacity: 1;
}
.popupLayerWrapper .popupLayer {
  display: flex;
  position: relative;
  max-height: 100%;
}
.popupLayerWrapper .popupLayer .popupLayerFrame {
  width: 100%;
  max-height: 100%;
  overflow: hidden;
  border-radius: 20px;
}
.popupLayerWrapper .popupLayer .btnLayerClose {
  position: absolute;
  right: 20px;
  top: 30px;
  width: 30px;
  height: 30px;
  min-width: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg id='ic_close_54' transform='translate(-10 -10)'%3E%3Crect id='square_647' data-name='square 647' width='40' height='40' transform='translate(10 10)' fill='none'/%3E%3Cpath id='path_35' data-name='path 35' d='M40,8.525,36.475,5,22.5,18.975,8.525,5,5,8.525,18.975,22.5,5,36.475,8.525,40,22.5,26.025,36.475,40,40,36.475,26.025,22.5Z' transform='translate(7.5 7.5)' fill='%23111'/%3E%3C/g%3E%3C/svg%3E%0A") no-repeat 50% 50%/20px;
}
.popupLayerWrapper .layerFrame {
  width: 100%;
  max-height: 100%;
  border: 0;
  max-width: 1260px;
  vertical-align: top;
  background: #fff;
}

#layerContents {
  transition: height ease-in-out 1s;
  padding: 0 20px;
}
#layerContents .btn-group {
  margin-top: 40px;
  padding-bottom: 20px;
}
#layerContents .btn-group .btn {
  width: 100%;
}

#loadingArea {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  opacity: 0.6;
}
#loadingArea img {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -50px;
  margin-top: -50px;
}
#loadingArea.fullLoad {
  position: fixed;
}
#loadingArea.fullLoad img {
  margin-left: -100px;
  margin-top: -100px;
}

#loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.34);
  z-index: 100;
}

#loading:after {
  content: "";
  position: absolute;
  width: 56px;
  height: 56px;
  left: 50%;
  top: 50%;
  margin: -28px 0 0 -28px;
  border-radius: 100%;
  background: #fff url(/websrc/m2/images/common/loading.gif) 50% no-repeat;
  z-index: 9999;
}

#blockArea {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.34);
  z-index: 100;
}

#layerClose {
  position: absolute;
  right: 0;
  top: 0;
  width: 30px;
  height: 30px;
  background: url(/websrc/mobile/images/icons/btn_layPopClose.png) no-repeat 50%;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 80px;
  overflow: hidden;
}
.pagination > b,
.pagination > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  font-size: 16px;
  color: #aaa;
  border-radius: 50%;
}
.pagination > b {
  font-weight: 700;
  background: #111;
  color: #fff;
}
.pagination button {
  width: 24px;
  height: 24px;
  margin: 0 5px;
  border: 1px solid #ddd;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5.207' height='9.414' viewBox='0 0 5.207 9.414'%3E%3Cpath d='M1,1,5,5,1,9' transform='translate(-0.293 -0.293)' fill='none' stroke='%23444' stroke-linecap='round' stroke-linejoin='round' stroke-width='1'/%3E%3C/svg%3E%0A") no-repeat 58% 52%;
  text-indent: -3000em;
  border-radius: 50%;
}
.pagination button:disabled {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5.207' height='9.414' viewBox='0 0 5.207 9.414'%3E%3Cpath d='M1,1,5,5,1,9' transform='translate(-0.293 -0.293)' fill='none' stroke='%23ddd' stroke-linecap='round' stroke-linejoin='round' stroke-width='1'/%3E%3C/svg%3E%0A") no-repeat 58% 52%;
}
.pagination button.prev {
  transform: rotate(180deg);
  background-position: 48% 48%;
}

.form-typeA {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.form-typeA .form-section {
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
  margin-top: 3px;
  border-bottom: 1px solid #ddd;
}
@media screen and (min-width: 640px) {
  .form-typeA .form-section {
    border-color: #F5F5F5;
  }
}
.form-typeA .form-section input[type=text],
.form-typeA .form-section input[type=number],
.form-typeA .form-section input[type=email],
.form-typeA .form-section input[type=password] {
  border-bottom: 0;
  flex: 1;
}
.form-typeA .form-section .sizeA {
  margin-right: 8px;
}

@media (min-width: 640px) {
  .form-typeA .form-section {
    margin-top: 8px;
  }
}
.change-seq {
  display: flex;
  gap: 6px;
  justify-content: center;
}
.change-seq button {
  width: 30px;
  height: 30px;
  border: 1px solid #ddd;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5.207' height='9.414' viewBox='0 0 5.207 9.414'%3E%3Cpath d='M1,1,5,5,1,9' transform='translate(-0.293 -0.293)' fill='none' stroke='%23666' stroke-linecap='round' stroke-linejoin='round' stroke-width='1'/%3E%3C/svg%3E%0A") no-repeat 50% 50%;
  background-size: 5px auto;
  text-indent: -3000em;
  transform: rotate(90deg);
  overflow: hidden;
  border-radius: 50%;
}
.change-seq button.btn-up {
  transform: rotate(-90deg);
}
.change-seq button:disabled {
  background-color: #f9f9f9;
}

select {
  display: flex;
  align-items: center;
  width: auto;
  height: 48px;
  padding: 0 40px 0 20px;
  border: 1px solid #ddd;
  font-weight: 400;
  font-size: 18px;
  text-align: left;
  color: #111;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cg id='ic_arrow_20' transform='translate(20) rotate(90)'%3E%3Cpath d='M1411,2476l6,6-6,6' transform='translate(-1404 -2472)' fill='none' stroke='%23666' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6'/%3E%3Crect width='20' height='20' fill='none'/%3E%3C/g%3E%3C/svg%3E") no-repeat calc(100% - 14px) 50%;
  border-radius: 10px;
}
select.selectTypeA {
  display: flex;
  align-items: center;
  width: 100%;
  height: 52px;
  padding: 0 34px 0 10px;
  border-bottom: 1px solid #ddd;
  border-top: 0;
  border-right: 0;
  border-left: 0;
  border-radius: 0;
  background: 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='M7 9.5L12.0001 14.5L17 9.5' stroke='%23454545' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") no-repeat calc(100% - 10px) 50%;
  font-size: 14px;
  font-weight: 500;
  line-height: 150%;
  letter-spacing: -0.42px;
}
select#birth_dd, select#birth_mm {
  display: flex;
  align-items: center;
  width: 100%;
  height: 52px;
  padding: 0 34px 0 10px;
  border-bottom: 1px solid #ddd;
  border-top: 0;
  border-right: 0;
  border-left: 0;
  border-radius: 0;
  background: 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='M7 9.5L12.0001 14.5L17 9.5' stroke='%23454545' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") no-repeat calc(100% - 10px) 50%;
  font-size: 14px;
  font-weight: 500;
  line-height: 150%;
  letter-spacing: -0.42px;
}

input[type=text],
input[type=number],
input[type=email],
input[type=password] {
  width: 100%;
  height: 52px;
  padding: 0 10px;
  background: #fff;
  border-bottom: 1px solid #ddd;
  color: #454545;
  font-size: 14px;
  font-weight: 500;
  line-height: 150%; /* 21px */
  letter-spacing: -0.42px;
}
@media screen and (min-width: 640px) {
  input[type=text],
  input[type=number],
  input[type=email],
  input[type=password] {
    border-color: #f5f5f5;
  }
}
input[type=text]::placeholder,
input[type=number]::placeholder,
input[type=email]::placeholder,
input[type=password]::placeholder {
  font-size: 14px;
  color: #A6A6A6;
}
input[type=text]:disabled,
input[type=number]:disabled,
input[type=email]:disabled,
input[type=password]:disabled {
  font-size: 14px;
  color: #888;
  background: #f9f9f9;
  border-color: #ddd;
}

@media (min-width: 640px) {
  input[type=text],
  input[type=number],
  input[type=email],
  input[type=password] {
    font-size: 16px;
    font-weight: 500;
    line-height: 150%; /* 21px */
  }
  input[type=text]::placeholder,
  input[type=number]::placeholder,
  input[type=email]::placeholder,
  input[type=password]::placeholder {
    font-size: 16px;
  }
  input[type=text]:disabled,
  input[type=number]:disabled,
  input[type=email]:disabled,
  input[type=password]:disabled {
    font-size: 16px;
  }
  select {
    height: 56px;
  }
}
.input-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 10px;
}
.input-group:first-child {
  margin-top: 0;
}

.checkbox-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.checkbox-group label {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #888;
  cursor: pointer;
}
.checkbox-group input {
  cursor: pointer;
}

input[type=checkbox] {
  width: 20px;
  height: 20px;
  border: 1px solid #ddd;
  vertical-align: top;
  transition: border ease-in-out 0.1s;
  border-radius: 5px;
}
input[type=checkbox]:checked {
  border-color: #FF9900;
  background-color: #FF9900;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9.876' height='7.099' viewBox='0 0 9.876 7.099'%3E%3Cpath d='M310.143,234l-5.345,5.5-3.455-3.555' transform='translate(-300.805 -233.477)' fill='none' stroke='%23fff' stroke-miterlimit='10' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
input[type=checkbox].chkTypeA {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #F5F5F5;
  border: 0;
  margin-right: 8px;
}
input[type=checkbox].chkTypeA:checked {
  background: #454545 url("data:image/svg+xml,%3Csvg width='11' height='9' viewBox='0 0 11 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 4.15075L5 7.5641L9.5 1.71265' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") no-repeat 50%;
}
input[type=checkbox].chkTypeA + label {
  font-size: 14px;
  font-weight: 500;
  line-height: 150%;
  letter-spacing: -0.42px;
}
input[type=checkbox].chkTypeA:disabled:checked {
  background: #ddd url("data:image/svg+xml,%3Csvg width='11' height='9' viewBox='0 0 11 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 4.15075L5 7.5641L9.5 1.71265' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") no-repeat 50%;
}
input[type=checkbox].chkTypeB {
  width: 18px;
  height: 18px;
  border: 0;
  margin-right: 8px;
  background: url("data:image/svg+xml,%3Csvg width='17' height='18' viewBox='0 0 17 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 8.60327L7.5 12.1033L12 6.10327' stroke='%23DDDDDD' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") no-repeat 50%;
}
input[type=checkbox].chkTypeB:checked {
  background: url("data:image/svg+xml,%3Csvg width='17' height='18' viewBox='0 0 17 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.5 8.60327L8 12.1033L12.5 6.10327' stroke='%23454545' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") no-repeat 50%;
}
input[type=checkbox].chkTypeB + label {
  font-size: 14px;
  font-weight: 500;
  line-height: 150%;
  letter-spacing: -0.42px;
}

.radio-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.radio-group label {
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  color: #000;
  cursor: pointer;
}
.radio-group input {
  cursor: pointer;
}
.radio-group.disabled label {
  cursor: default;
}

input[type=radio] {
  width: 24px;
  height: 24px;
  border: 1px solid #ddd;
  background: #eee;
  transition: border ease-in-out 0.1s;
  border-radius: 50%;
}
input[type=radio]:disabled {
  cursor: default;
}
input[type=radio]:checked {
  border: 7px solid #1db7e8;
}
input[type=radio]:checked:disabled {
  border-color: #ddd;
}
input[type=radio].radioTypeA {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #F5F5F5;
  border: 0;
  margin-right: 8px;
}
@media screen and (min-width: 640px) {
  input[type=radio].radioTypeA {
    width: 20px;
    height: 20px;
  }
}
input[type=radio].radioTypeA:checked {
  background: #454545 url("data:image/svg+xml,%3Csvg width='11' height='9' viewBox='0 0 11 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 4.15075L5 7.5641L9.5 1.71265' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") no-repeat 50%;
}
input[type=radio].radioTypeA + label {
  font-size: 14px;
  font-weight: 500;
  line-height: 150%;
  letter-spacing: -0.42px;
}

textarea {
  width: 100%;
  padding: 14px 20px;
  background: #fff;
  border: 1px solid #ddd;
  font-weight: 400;
  font-size: 18px;
  text-align: left;
  color: #111;
  border-radius: 10px;
}
textarea::placeholder {
  font-size: 18px;
  line-height: 24px;
  color: #888;
}
textarea:disabled {
  font-size: 18px;
  color: #888;
  background: #f9f9f9;
  border-color: #ddd;
}

.input-file {
  position: relative;
}
.input-file label {
  position: relative;
}
.input-file label:after {
  content: "";
  position: absolute;
  position: static;
  margin-left: 6px;
  width: 17px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16.839' height='15.983' viewBox='0 0 16.839 15.983'%3E%3Cg transform='translate(0.7 0.7)'%3E%3Cpath d='M8.716,4h2.573L13,5.716h4.289A1.716,1.716,0,0,1,19.01,7.431v6a1.716,1.716,0,0,1-1.716,1.716H8.716A1.716,1.716,0,0,1,7,13.436V5.716A1.716,1.716,0,0,1,8.716,4' transform='translate(-3.57 -4)' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.4'/%3E%3Cpath d='M15.01,15.72v1.716a1.716,1.716,0,0,1-1.716,1.716H4.716A1.716,1.716,0,0,1,3,17.436V9.716A1.716,1.716,0,0,1,4.716,8H6.431' transform='translate(-3 -4.569)' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.4'/%3E%3C/g%3E%3C/svg%3E%0A") no-repeat 50% 50%;
}
.input-file input[type=file] {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  opacity: 0;
}

.selected-file {
  display: flex;
  align-items: center;
}
.selected-file span {
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15.6' height='15.6' viewBox='0 0 15.6 15.6'%3E%3Cg transform='translate(-2.481 -2.481)'%3E%3Cpath d='M9,14.13,14.13,9' transform='translate(-1.283 -1.283)' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6'/%3E%3Cpath d='M11,5.71l.4-.458A4.275,4.275,0,1,1,17.441,11.3l-.457.4' transform='translate(-1.412 -0.719)' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6'/%3E%3Cpath d='M11.694,16.984l-.339.457a4.333,4.333,0,0,1-6.093,0,4.251,4.251,0,0,1,0-6.045L5.71,11' transform='translate(-0.719 -1.412)' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6'/%3E%3C/g%3E%3C/svg%3E%0A") no-repeat 50% 50%;
  text-indent: -3000em;
}
.selected-file a {
  margin-left: 6px;
  font-weight: 600;
  text-decoration: underline;
  font-size: 18px;
  line-height: 24px;
  color: #1db7e8;
}
.selected-file button {
  margin-left: 12px;
  width: 24px;
  height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg id='ic_delete_16' transform='translate(-615 -1044.324)'%3E%3Ccircle cx='8' cy='8' r='8' transform='translate(615 1044.324)' fill='%23aaa'/%3E%3Cg transform='translate(617.721 1046.721)'%3E%3Cg transform='translate(2.721 2.721)'%3E%3Cpath d='M-16291.833-11903.852l5.441,5.441' transform='translate(16291.833 11903.852)' fill='none' stroke='%23fff' stroke-linecap='round' stroke-width='1.2'/%3E%3Cpath d='M-16286.392-11903.852l-5.441,5.441' transform='translate(16291.833 11903.852)' fill='none' stroke='%23fff' stroke-linecap='round' stroke-width='1.2'/%3E%3C/g%3E%3Crect width='11' height='11' transform='translate(0.279 -0.396)' fill='none'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A") no-repeat 50% 50%;
  text-indent: -3000em;
}

.on-error-area {
  width: 100%;
  height: 100%;
  background: #eee url(/images/common/default-logo.png) no-repeat 50% 50%;
}

.card-list-typeA {
  display: flex;
  flex-wrap: wrap;
  gap: 50px 20px;
  margin-top: 20px;
}
.card-list-typeA li {
  width: 335px;
}
.card-list-typeA li.list-none {
  width: 100%;
  padding: 180px 0;
  text-align: center;
  font-weight: 400;
  font-size: 20px;
  line-height: 26px;
  color: #888;
}
.card-list-typeA li.list-none a {
  display: inline-block;
  margin-top: 8px;
  text-decoration: underline;
  font-size: 20px;
  line-height: 26px;
  text-align: center;
  color: #1db7e8;
}

fieldset.search-field-typeA {
  position: relative;
  display: block;
  width: 772px;
  margin: 0 auto;
}
fieldset.search-field-typeA input[type=text] {
  width: 100%;
  height: 58px;
  padding: 0 32px;
  background: #fff;
  border: 3px solid #ffe177;
  font-weight: 600;
  font-size: 26px;
  border-radius: 29px;
  transition: 0.2s all 0s ease-in-out;
}
fieldset.search-field-typeA input[type=text]::placeholder {
  font-weight: 600;
  font-size: 26px;
  color: rgba(255, 153, 0, 0.5);
}
fieldset.search-field-typeA .btn-search {
  display: block;
  position: absolute;
  right: 24px;
  top: 9px;
  width: 40px;
  height: 40px;
  text-indent: -3000em;
  text-align: left;
}
fieldset.search-field-typeA .tags {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}
fieldset.search-field-typeA .tags a {
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;
  color: #fff;
}
fieldset.search-field-typeA.open input[type=text] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
fieldset.search-field-typeA .search-field-search-list {
  display: none;
  opacity: 0;
  transform: translateY(-20px);
  position: absolute;
  left: 0;
  top: 55px;
  width: 100%;
  border: 3px solid #ffe177;
  background: #fff;
  border-top: 0;
  border-bottom-left-radius: 29px;
  border-bottom-right-radius: 29px;
  padding: 0 20px 26px;
  text-align: center;
  transition: 0.2s all 0s ease-in-out;
}
fieldset.search-field-typeA .search-field-search-list.on {
  opacity: 1;
  transform: translateY(0);
}
fieldset.search-field-typeA .search-field-search-list article {
  display: flex;
  padding: 16px 12px 0;
  border-top: 1px solid #e3d2af;
}
fieldset.search-field-typeA .search-field-search-list article aside {
  width: 105px;
  border-right: 1px solid #ddd;
  text-align: left;
  margin-right: 24px;
}
fieldset.search-field-typeA .search-field-search-list strong {
  display: block;
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  color: #444;
}
fieldset.search-field-typeA .search-field-search-list .btn-all-del {
  margin-top: 10px;
  text-decoration: underline;
  font-size: 14px;
  line-height: 18px;
  color: #bbb;
}
fieldset.search-field-typeA .search-field-search-list p {
  font-size: 16px;
  line-height: 24px;
  color: #aaa;
}
fieldset.search-field-typeA .search-field-search-list ul {
  display: flex;
  flex-wrap: wrap;
  row-gap: 6px;
  flex: 1;
}
fieldset.search-field-typeA .search-field-search-list ul li {
  width: 50%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
fieldset.search-field-typeA .search-field-search-list ul li button:first-of-type {
  font-size: 16px;
  line-height: 24px;
  color: #666;
}
fieldset.search-field-typeA .search-field-search-list ul li button:not(:first-of-type) {
  text-indent: -3000em;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg id='ic_close_54' transform='translate(-10 -10)'%3E%3Crect id='square_647' data-name='square 647' width='40' height='40' transform='translate(10 10)' fill='none'/%3E%3Cpath id='path_35' data-name='path 35' d='M40,8.525,36.475,5,22.5,18.975,8.525,5,5,8.525,18.975,22.5,5,36.475,8.525,40,22.5,26.025,36.475,40,40,36.475,26.025,22.5Z' transform='translate(7.5 7.5)' fill='%23ccc'/%3E%3C/g%3E%3C/svg%3E%0A") no-repeat 50% 50%/8px;
}

.formTypeA {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.formTypeA strong {
  display: inline-flex;
  padding-left: 10px;
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 500;
  line-height: 150%;
  letter-spacing: -0.42px;
}
.formTypeA .caution-text {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  color: #CA0C48;
  font-family: Pretendard;
  font-size: 16px;
  font-weight: 500;
  line-height: 150%;
  letter-spacing: -0.48px;
}
.formTypeA .caution-text:before {
  flex: none;
  content: "";
  display: flex;
  width: 19px;
  height: 19px;
  margin-top: 1px;
  background: url("data:image/svg+xml,%3Csvg width='19' height='19' viewBox='0 0 19 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='0.90625' width='18' height='18' rx='9' fill='%23CA0C48'/%3E%3Cpath d='M10.9844 12.5234H8.99219L8.78125 4.59375H11.2031L10.9844 12.5234ZM9.99219 16.0469C9.75781 16.0469 9.53906 15.987 9.33594 15.8672C9.13281 15.7422 8.97135 15.5807 8.85156 15.3828C8.73698 15.1797 8.67969 14.9609 8.67969 14.7266C8.67969 14.4974 8.73698 14.2839 8.85156 14.0859C8.97135 13.8828 9.13281 13.724 9.33594 13.6094C9.53906 13.4948 9.75781 13.4375 9.99219 13.4375C10.2214 13.4375 10.4349 13.4948 10.6328 13.6094C10.8359 13.724 10.9974 13.8828 11.1172 14.0859C11.2422 14.2839 11.3047 14.4974 11.3047 14.7266C11.3047 14.9609 11.2422 15.1797 11.1172 15.3828C10.9974 15.5807 10.8359 15.7422 10.6328 15.8672C10.4349 15.987 10.2214 16.0469 9.99219 16.0469Z' fill='white'/%3E%3C/svg%3E%0A") no-repeat 0 0;
}
.formTypeA .inputWrap {
  display: flex;
  align-items: center;
  min-height: 52px;
}
.formTypeA .inputWrap a {
  display: flex;
  align-items: center;
  padding: 0 12px;
  height: 32px;
  font-size: 12px;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: -0.36px;
  color: #000;
  background: #F5F5F5;
}
@media screen and (min-width: 640px) {
  .formTypeA .inputWrap a {
    height: 36px;
    font-size: 14px;
  }
}
.formTypeA .liGender .inputWrap {
  gap: 40px;
  padding: 0 10px;
}
.formTypeA .liGender .inputWrap span {
  display: flex;
  align-items: center;
}
.formTypeA .liAge .inputWrap {
  gap: 8px;
}
.formTypeA .liAge .inputWrap span {
  flex-basis: 0;
  flex-grow: 1;
}
.formTypeA .liPhone .inputWrap {
  position: relative;
  border-bottom: 1px solid #ddd;
  padding-right: 10px;
}
@media screen and (min-width: 640px) {
  .formTypeA .liPhone .inputWrap {
    border-color: #f5f5f5;
  }
}
.formTypeA .liPhone .inputWrap input {
  border-bottom: 0;
}
.formTypeA .liPhone .inputWrap a {
  margin-left: 10px;
  flex: none;
}
.formTypeA .liEmail .inputWrap > span,
.formTypeA .liEmail .inputWrap > a {
  flex: none;
}
.formTypeA .liEmail .inputWrap > * {
  flex-basis: 0;
  flex-grow: 1;
}
.formTypeA .liEmail .inputWrap .selectWrap {
  flex-grow: 2;
}
.formTypeA .liEmail .authArea {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  align-items: center;
  gap: 10px;
  padding-right: 10px;
}
.formTypeA .liEmail .authArea p {
  font-size: 12px;
  font-weight: 500;
  line-height: 140%;
  letter-spacing: -0.36px;
  color: #a6a6a6;
}
.formTypeA .liEmail .authArea a {
  display: flex;
  flex: none;
  margin-left: auto;
  align-items: center;
  padding: 0 12px;
  height: 32px;
  font-size: 14px;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: -0.36px;
  color: #000;
  background: #F5F5F5;
}
.formTypeA .liAuth .inputWrap {
  border-bottom: 1px solid #ddd;
  padding-right: 10px;
}
.formTypeA .liAuth .inputWrap input {
  border-bottom: 0;
}
.formTypeA .liAuth .inputWrap .timer {
  display: flex;
  flex: none;
  margin-left: 10px;
  font-size: 12px;
  font-weight: 500;
  line-height: 140%;
  letter-spacing: -0.36px;
}
.formTypeA .liAuth .inputWrap a {
  flex: none;
  margin-left: 20px;
}
.formTypeA .liId .inputWrap {
  border-bottom: 1px solid #ddd;
  padding-right: 10px;
}
@media screen and (min-width: 640px) {
  .formTypeA .liId .inputWrap {
    border-color: #f5f5f5;
  }
}
.formTypeA .liId .inputWrap input, .formTypeA .liId .inputWrap select {
  border-bottom: 0;
}
.formTypeA .liPost .inputWrap {
  flex-direction: column;
  align-items: flex-start;
}
.formTypeA .liPost .inputWrap > div {
  display: flex;
  align-items: center;
  height: 56px;
  border-bottom: 1px solid #ddd;
  width: 100%;
}
@media screen and (min-width: 640px) {
  .formTypeA .liPost .inputWrap > div {
    height: auto;
  }
}
.formTypeA .liPost .inputWrap > div input {
  border-bottom: 0;
}
.formTypeA .liPost .inputWrap > div a {
  display: flex;
  flex: none;
  margin-left: 10px;
  align-items: center;
  padding: 0 12px;
  height: 32px;
  font-size: 12px;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: -0.36px;
  color: #000;
  background: #F5F5F5;
}
@media screen and (min-width: 640px) {
  .formTypeA .liPost .inputWrap > div a {
    height: 36px;
    font-size: 14px;
  }
}
.formTypeA .liPost .inputWrap > div:first-of-type {
  padding-right: 10px;
}

main.pcMode .formTypeA strong {
  font-size: 16px;
}

.requiredIco.on {
  padding-right: 6px;
  position: relative;
}
.requiredIco.on {
  position: relative;
}
.requiredIco.on:after {
  content: "";
  position: absolute;
  right: 0;
  top: 2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #CA0C48;
}

.outputTypeA li {
  display: flex;
  height: 54px;
  align-items: center;
  border-bottom: 1px solid #f5f5f5;
}
.outputTypeA li strong,
.outputTypeA li span {
  font-size: 14px;
  font-weight: 500;
  line-height: 150%;
  letter-spacing: -0.42px;
}
@media screen and (min-width: 640px) {
  .outputTypeA li strong,
  .outputTypeA li span {
    font-size: 16px;
  }
}
.outputTypeA li strong {
  display: block;
  width: 95px;
  flex: none;
  color: #A6A6A6;
}
.outputTypeA li span {
  display: block;
  width: 100%;
}

.hide {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  margin: -1px;
  width: 1px;
  height: 1px;
}

/* 팝업 */
.bgLayer {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  min-width: 320px;
  opacity: 0.5;
  filter: alpha(opacity=50);
  background: #000;
}

.popLayer {
  position: absolute;
  left: 0%;
  top: 40%;
  width: 100%;
  min-width: 320px;
}

.popLayer .close {
  position: absolute;
  right: 15px;
  top: 5px;
}

.popLayer .close img {
  width: 27px;
}

.popLayerCont {
  padding: 0 10px;
}

.popup {
  height: 100%;
  background: none;
}

#popWrap .btnArea {
  text-align: center;
}

#popWrap h1 {
  height: 23px;
  padding: 12px 0 0 20px;
  margin: 0;
  font-size: 1.2em;
  color: #c70752;
  border-radius: 5px 5px 0 0;
  background: #fff;
}

#popContent {
  padding: 0 10px 10px;
  border-radius: 0 0 5px 5px;
  background: #fff;
}

.popup input.txt {
  padding: 0 5px;
  border: 2px solid #e11351;
}

.popup .text {
  line-height: 1.5em;
}

/*.confirmLayer	{ display:none; z-index:20; width:100%; }
.confirmLayer .bgArea	{ width:250px; padding:20px; margin:0 auto; border-radius:5px; background:#fff; }
.confirmLayer .content	{ padding-bottom:20px; line-height:1.5em; font-size:1.2em; text-align:center; }
.confirmLayer .foot	{ text-align:center; }
.confirmLayer .foot .btnType1	{ width:80px; }*/
.bgLayer2 {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  min-width: 320px;
  background: url("/websrc/m2/images/common/bg_layer.png") repeat left top;
}

#wrapper.newJoin main.pcMode input[type=text],
#wrapper.newJoin main.pcMode input[type=number],
#wrapper.newJoin main.pcMode input[type=email],
#wrapper.newJoin main.pcMode input[type=password],
#wrapper.newJoin main.pcMode select {
  height: 56px !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
}
#wrapper.newJoin main.pcMode select {
  border-color: #f5f5f5;
}
#wrapper.newJoin a:focus-visible,
#wrapper.newJoin button:focus-visible,
#wrapper.newJoin input:focus-visible,
#wrapper.newJoin label:focus-visible,
#wrapper.newJoin select:focus-visible {
  outline: 2px solid #0066cc;
  outline-offset: 1px;
}
#wrapper.newJoin a:focus,
#wrapper.newJoin button:focus,
#wrapper.newJoin input:focus,
#wrapper.newJoin label:focus,
#wrapper.newJoin select:focus {
  outline: 2px solid #0066cc;
  outline-offset: 1px;
}

.storeInduce {
  display: flex;
  justify-content: center;
  column-gap: 16px;
  align-items: center;
  margin-top: 56px;
}
.storeInduce p {
  color: #454545;
  text-align: center;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 130%; /* 18.2px */
  letter-spacing: -0.42px;
}
.storeInduce a {
  color: #3780D6;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 130%; /* 18.2px */
  letter-spacing: -0.42px;
}

#wrapper.cafe24 {
  width: auto;
  padding: 0;
  max-width: initial;
}
#wrapper.cafe24 .layout-area {
  max-width: 520px;
  margin: 0 auto;
  padding: 0;
}
#wrapper.cafe24 .layout-area .title-area {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 52px;
  padding: 0 40px;
  border-bottom: 1px solid #F5F5F5;
}
#wrapper.cafe24 .layout-area .title-area h1 {
  color: #222;
  font-family: "Pretendard Variable";
  font-size: 15px;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: -0.15px;
}
#wrapper.cafe24 .layout-area .title-area a {
  position: absolute;
  top: 11px;
  right: 14px;
  width: 29px;
  height: 29px;
  background: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 1L1 14' stroke='%23222222' stroke-width='1.5'/%3E%3Cpath d='M0.999999 1L14 14' stroke='%23222222' stroke-width='1.5'/%3E%3C/svg%3E%0A") no-repeat 50%;
}
#wrapper.cafe24 .floating-area {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 47px;
  background: #FBE9F0;
}
#wrapper.cafe24 .floating-area .wrap-area {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: 47px;
  color: #222;
  font-family: "Pretendard Variable";
  font-size: 15px;
  font-weight: 500;
  line-height: 140%;
  letter-spacing: -0.45px;
}
#wrapper.cafe24 .floating-area .wrap-area em {
  display: inline-flex;
  padding-right: 14px;
  background: url("data:image/svg+xml,%3Csvg width='8' height='13' viewBox='0 0 8 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 1.5L6.5 6.5L1.5 11.5' stroke='%23FF437A' stroke-width='1.5'/%3E%3C/svg%3E%0A") no-repeat 100% 50%;
}
#wrapper.cafe24 .floating-area .wrap-area em span {
  color: #FF437A;
  font-family: "Pretendard Variable";
  font-size: 15px;
  font-weight: 700;
  line-height: 140%;
  letter-spacing: -0.45px;
}

.marketing-agree {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.marketing-agree p {
  margin-bottom: 0 !important;
  line-height: 17px !important;
}
.marketing-agree .brand-area {
  display: flex;
  align-items: center;
}
.marketing-agree .brand-area > strong {
  display: block;
  font-family: Pretendard !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #454545 !important;
  line-height: normal;
}
.marketing-agree .brand-area button {
  display: flex;
  align-items: center;
  height: 34px;
  margin-left: auto;
  padding: 0 12px;
  color: #000;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: -0.42px;
  background: #F5F5F5;
}
.marketing-agree .brand-list {
  padding: 0 20px;
}
.marketing-agree .brand-list > p {
  margin-bottom: 6px !important;
  color: #454545;
  font-family: Pretendard;
  font-size: 12px;
  font-weight: 500;
  line-height: 140%;
  letter-spacing: -0.36px;
}
.marketing-agree .brand-list .scroll-area {
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}
.marketing-agree .brand-list .scroll-area ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  /*justify-content: flex-start;
  flex-wrap: wrap;*/
  /*gap:5px;*/
  padding: 20px 0;
  max-height: 250px;
  overflow-y: auto;
  justify-items: center;
}
.marketing-agree .brand-list .scroll-area ul li {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: #F5F5F5;
}

#popup-marketing-brand {
  position: fixed;
  left: 20px;
  right: 20px;
  top: 50%;
  transform: translate(0, -50%);
  max-height: 400px;
  padding: 40px 20px 30px;
  overflow: auto;
  background: #fff;
  z-index: 102;
}
#popup-marketing-brand strong {
  display: block;
  margin-bottom: 15px;
  color: #454545;
  text-align: center;
  font-family: Pretendard;
  font-size: 24px;
  font-style: normal;
  font-weight: 800;
  line-height: 100%; /* 24px */
}
#popup-marketing-brand p {
  margin-bottom: 15px;
  color: #454545;
  font-family: Pretendard;
  font-size: 12px;
  font-weight: 500;
  line-height: 140%; /* 16.8px */
  letter-spacing: -0.36px;
}
#popup-marketing-brand ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  row-gap: 28px;
  padding: 20px;
  justify-items: center;
  border-top: 1px solid #000;
  border-bottom: 0.5px solid #000;
}
#popup-marketing-brand ul li {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: #F5F5F5;
}
#popup-marketing-brand .btn-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 39px;
  margin-top: 15px;
  color: #FFF;
  text-align: center;
  font-family: Pretendard;
  font-size: 16px;
  font-weight: 500;
  background: #454545;
}
@media screen and (min-width: 640px) {
  #popup-marketing-brand {
    width: 600px;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
  }
}

#popup-marketing-brand-bg {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 101;
}

@media (min-width: 520px) {
  #wrapper.cafe24 .floating-area {
    width: 520px;
    left: 50%;
    transform: translateX(-50%);
    right: auto;
  }
}
@media (max-width: 480px) {
  #popup-marketing-brand ul {
    grid-template-columns: 1fr 1fr 1fr;
    padding-right: 0;
    padding-left: 0;
  }
}
@media (max-width: 370px) {
  #popup-marketing-brand ul {
    grid-template-columns: 1fr 1fr;
    padding-right: 0;
    padding-left: 0;
  }
}

/*# sourceMappingURL=common.css.map */