/* 상품상세 CSS */
.element .element-wrap { display: flex; flex-direction: column; width: 100%; align-items: flex-start; } 
.element .image-wrapper { display: flex; flex-direction: column; margin-top: 80px; height: 215px; align-items: center; justify-content: center; gap: 10px; padding: 30px 51px; position: relative; align-self: stretch; width: 100%; background-color: #ffffff; } 
.element .image { position: relative; width: 276px; height: 138px; object-fit: cover; } 
.element .info-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px 20px 30px; align-self: stretch; width: 100%; background-color: #ffffff; } 
.element .info-tit-wrap { display: flex; flex-direction: column; height: 51px; align-items: flex-start; gap: 4px; align-self: stretch; width: 100%; } 
.element .brand { align-self: stretch; font-weight: 400; color: #888888; font-size: 15px; letter-spacing: -0.30px; line-height: 15px; } 
.element .product { font-weight: 700; font-size: 20px; letter-spacing: -0.44px; line-height: 31.9px; width: fit-content; color: #333333; white-space: nowrap; } 
.element .price-wrap { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 6px; } 
.element .price-wrap .inner { display: inline-flex; flex-direction: column; align-items: flex-start; } 
.element .label-wrapper { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 3px 5px; background-color: #ff912e1f; border-radius: 4px; } 
.element .label-wrapper .inner { font-weight: 400; color: #ff912e; font-size: 13px; letter-spacing: -0.26px; line-height: 17px; width: fit-content; white-space: nowrap; } 
.element .price { display: inline-flex; align-items: flex-start; gap: 8px; position: relative; flex: 0 0 auto; } 
.element .price .number { position: relative; width: fit-content; font-weight: 700; color: #333333; font-size: 20px; letter-spacing: -0.44px; line-height: 33px; white-space: nowrap; } 
.element .cancel { text-decoration:line-through; font-weight: 500; color: #bfbfbf; font-size: 20px; letter-spacing: -0.44px; line-height: 33px; white-space: nowrap; } 
.element .p { position: relative; align-self: stretch; font-weight: 400; color: #707070; font-size: 14px; letter-spacing: -0.05px; line-height: 20px; margin-top: 6px; margin-bottom: 0; } 
.element .p .span { font-weight: 600; } 
.element .form-wrap { width:100%; } 
.element .accord-head { display: flex; height: 69px; align-items: center; justify-content: space-between; padding: 0px 20px; width: 100%; background-color: #ffffff; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #e6e6e6; border-top-width: 8px; border-top-style: solid; border-top-color: #f8f9fb; cursor: pointer; } 
.element .icon-more-down { width: 16px; height: 16px; transition: .3s; } 
.element .icon-more-down img { width: 100%; } 
.element .accord-head.view .icon-more-down { transform: rotate(180deg); } 
.element .detail-wrapper { width: 100%; height: 0; overflow: hidden; transition: .3s; } 
.element .detail-wrapper.view { height: 300px; overflow: auto; transition: .3s; } 
.element .detail-wrapper .inner { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; align-self: stretch; background-color: #ffffff; box-sizing: border-box; padding: 20px; } 
.element .accord-head.view { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #e6e6e6; border-top-width: 8px; border-top-style: solid; border-top-color: #f8f9fb; } 
.element .detail-wrapper::-webkit-scrollbar { width:4px; } 
.element .detail-wrapper::-webkit-scrollbar-thumb { height: 1%; background: #A5A5A5; border-radius: 4px; } 
.element .detail-wrapper::-webkit-scrollbar-track { background: #fff; } 
.element .box { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; flex: 0 0 auto; } 
.element .box .tit { width: fit-content; font-weight: 700; color: #646464; font-size: 13px; letter-spacing: -0.26px; line-height: 16px; white-space: nowrap; } 
.element .box .text { width: fit-content; font-weight: 400; color: #646464; font-size: 13px; letter-spacing: -0.26px; line-height: 16px; white-space: nowrap; } 
.element .section-head { display: flex; height: 69px; align-items: center; justify-content: space-between; padding: 0px 20px; width: 100%; background-color: #ffffff; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #e6e6e6; border-top-width: 8px; border-top-style: solid; border-top-color: #f8f9fb; } 
.element .section-tit { position: relative; width: fit-content; font-weight: 700; color: #333333; font-size: 17px; letter-spacing: 0; line-height: 24px; white-space: nowrap; } 
.element .section-head.second { height: 61px; border-top-width: 0px; } 
.element .section-head.second.view { height: 69px; border-top-width: 8px; border-top-style: solid; border-top-color: #f8f9fb; } 
.element .recipient-wrap { display: flex; flex-direction:column; width:100%; padding:24px 20px; } 
.element .recipient { display: flex; align-items: center; justify-content: space-between; width: 100%; background-color: #ffffff; } 
.element .sec-tit { width: fit-content; font-weight: 400; color: #333333; font-size: 15px; letter-spacing: -0.30px; line-height: 20px; white-space: nowrap; } 
.radio-group .label { display: inline-block; margin-top: 3px; font-weight: 400; color: #333333; font-size: 15px; vertical-align:middle; } 
.reciveInfo-wrap { display: flex; align-self: stretch; width:100%; gap: 10px; padding-top: 16px; } 
.reciveInfo-wrap input { height: 46px; border: 1px solid #e6e6e6; border-radius: 5px; padding:12px; box-sizing: border-box; color:#333; } 
.reciveInfo-wrap input.name { width: 105px; } 
.reciveInfo-wrap input.phone { width:100%; } 
.reciveInfo-wrap input.phone::-webkit-inner-spin-button { -webkit-appearance: none; } 
.reciveInfo-wrap input::placeholder { color:#D6D6D6; font-size: 15px; font-weight: 400; } 
.element .gift { width:100%; display: none; } 
.element .gift.btn-wrap { text-align: right; padding-top:8px; } 
.element .gift.on { display: block; } 
.element .btn { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 10px; padding: 0px 20px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; background-color: #ffffff; } 
.element .btn.sub { all: unset; padding:11px 10px; background-color: #f5f4ff; border-radius: 5px; color: #44217a; font-size: 14px; letter-spacing: -0.28px; line-height: 14px; text-align: center; } 
.element .pcs-wrap { display: flex; align-items: center; justify-content: space-between; align-self: stretch; width: 100%; background-color: #ffffff; padding-top: 16px; } 
.element .pcs { position: relative; border-radius: 5px; text-align: center; } 
.element .pcs::-webkit-inner-spin-button { -webkit-appearance: none; } 
.element .pcs::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } 
.element .gift .sec-tit { width: 100%; padding-top: 20px; } 
.element .msg-wrap { width:100%; margin-top: 12px; padding: 16px; border-radius: 5px; background-color: #ffffff; border:1px solid; border-color: #e6e6e6; } 
.element .msg { font-size: 15px; all:unset; width:100%; border: 1px solid; word-break: break-all; line-height: 1.5; box-sizing: border-box; border-color: #fff; color:#333; } 
.element .msg::placeholder { color:#D6D6D6; font-size: 15px; line-height: 1.5; word-break: break-all; } 
.element .msg-wrap span { display: flex; justify-content:flex-end; font-size: 13px; color:#B3B3B3; } 
.element .frame-21 { display: flex; flex-direction: column; align-items: flex-start; padding: 12px 0px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; background-color: #ffffff; } 
.element .frame-22 { display: flex; align-items: center; justify-content: space-between; padding: 10px 20px 0px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; background-color: #ffffff; } 
.element .frame-23 { display: inline-flex; align-items: center; position: relative; flex: 0 0 auto; } 
.element .text-wrapper-21 { position: relative; width: fit-content; font-weight: 700; color: #333333; font-size: 15px; text-align: right; letter-spacing: -0.30px; line-height: 20px; white-space: nowrap; } 
.element .text-wrapper-22 { font-weight: 400; font-size: 15px; text-align: right; letter-spacing: -0.30px; line-height: 20px; position: relative; width: fit-content; color: #333333; white-space: nowrap; } 
.element .frame-24 { display: flex; align-items: center; justify-content: space-between; padding: 8px 20px 0px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; background-color: #ffffff; } 
.element .frame-25 { display: inline-flex; align-items: center; gap: 4px; position: relative; flex: 0 0 auto; } 
.element .frame-26 { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 5px 6px; position: relative; border-radius: 3px; background: linear-gradient( 0deg, rgba(87, 154, 255, 0.12) 0%, rgba(87, 154, 255, 0.12) 100%); } 
.element .text-wrapper-23 { position: relative; width: fit-content; font-weight: 400; color: #579aff; font-size: 13px; letter-spacing: -0.26px; line-height: 12px; white-space: nowrap; } 
.element .frame-27 { display: flex; align-items: center; justify-content: space-between; padding: 0px 20px 24px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; background-color: #ffffff; gap: 10px; } 
.element input.point { position: relative; width: 100%; height: 46px; background-color: #ffffff; border-radius: 5px; border: 1px solid; border-color: #e6e6e6; padding:12px; } 
input.point::-webkit-inner-spin-button { -webkit-appearance: none; } 
input.point::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } 

.element .btn.point { all: unset; width: 92px; height: 46px; background-color: #f5f4ff; position: relative; border-radius: 5px; text-align: center; font-weight: 400; color: #44217a; font-size: 15px; letter-spacing: -0.30px; line-height: 24px; white-space: nowrap; } 
.element .frame-28 { display: flex; align-items: center; justify-content: space-between; padding: 20px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; background-color: #f5f4ff; } 
.element .text-wrapper-25 { position: relative; width: fit-content; font-weight: 600; color: #44217a; font-size: 18px; letter-spacing: -0.36px; line-height: 24px; white-space: nowrap; } 
.element .frame-29 { display: inline-flex; align-items: center; justify-content: flex-end; position: relative; flex: 0 0 auto; } 
.element .text-wrapper-26 { position: relative; width: fit-content; font-weight: 700; color: #44217a; font-size: 18px; text-align: right; letter-spacing: -0.36px; line-height: 24px; white-space: nowrap; } 
.element .text-wrapper-27 { position: relative; width: fit-content; font-weight: 400; color: #333333; font-size: 18px; text-align: right; letter-spacing: -0.36px; line-height: 24px; white-space: nowrap; } 
.element .frame-30 { display: flex; align-items: center; gap: 6px; padding: 16px 0px 20px 20px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; background-color: #ffffff; } 
.element .agree-wrapper { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 0px 20px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; background-color: #ffffff; } 
.element .frame-32 { display: flex; align-items: center; justify-content: space-between; padding: 20px 16px; width: 100%; flex: 0 0 auto; background-color: #f8f9fb; border-radius: 8px; } 
.element .chkbox-wrap { display: inline-flex; align-items: center; gap: 8px; position: relative; flex: 0 0 auto; } 
.element #agree { display: none; } 
.element .chkbox-wrap .chk-img { display: block; width:20px; height:20px; } 
#agree+label.chk-img { background-repeat: no-repeat; background-image: url('../img/icon_chk_off.svg'); background-size: 100%; } 
#agree:checked+label.chk-img { background-repeat: no-repeat; background-image: url('../img/icon_chk_on.svg'); } 
.element .chkbox-wrap .chk-label { font-weight: 400; font-size: 15px; letter-spacing: -0.30px; line-height: 21px; color: #707070; } 
.element .agree-wrapper .icon_arrowDown { width: 14px; height: 14px; } 
.element .agree-wrapper .icon_arrowDown.on { transform: rotate(180deg); } 
.element .agree-wrapper .icon_arrowDown img { width: 100%; opacity: 0.6; } 

.element .agree { display: flex; flex-direction: column; align-items: flex-start; padding: 0px 8px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; height:0; overflow: hidden; transition: .3s; } 
.element .agree.on { height:auto; transition: .3s; } 
.element .frame-35 { display: flex; align-items: center; justify-content: space-between; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; } 
.element .text-wrapper-29 { position: relative; width: fit-content; font-weight: 400; color: #333333; font-size: 14px; letter-spacing: -0.28px; line-height: 32px; white-space: nowrap; } 
.element .showModal { font-weight: 500; color: #acacac; font-size: 14px; text-align: right; letter-spacing: -0.24px; line-height: 32px; text-decoration: underline; position: relative; width: fit-content; white-space: nowrap; } 
.element .btn-wrapper { width: 100%; height: 128px; align-items: flex-start; gap: 10px; padding: 54px 16px 20px; align-self: stretch; } 
.element button.btn.primary { all: unset; box-sizing: border-box; display: flex; height: 54px; align-items: center; justify-content: center; gap: 10px; padding: 17px 155px; position: relative; align-self: stretch; width: 100%; border-radius: 5px; background: #44217a; font-weight: 400; color: #ffffff; font-size: 18px; text-align: center; letter-spacing: 0; line-height: 20px; white-space: nowrap; } 


/* 결제완료 CSS */
.complete .element-wrap { display: flex; flex-direction: column; width: 100%; align-items: flex-start; } 
.complete .done-wrap { width:100%; margin-top: 80px; padding:30px 20px 180px; box-sizing: border-box; } 
.complete .done-tit { text-align: center; } 
.complete .done-tit .tit { font-size: 22px; font-weight: 600; padding: 20px 0 40px; } 
.complete .done-detail { border:1px solid #E6E6E6; border-radius: 5px; background-color: #fff; padding:20px; box-sizing: border-box; } 


.complete .done-detail .product-wrap { display: flex; align-items:center; justify-content:center; gap:16px; padding-bottom: 24px; } 
.complete .done-detail .img-wrap { position: relative; width:135px; height:130px; text-align: center; } 
.complete .done-detail .img-wrap::after { position:absolute; top:0; bottom:0; content: ''; display: block; background-color: rgba(0,0,0,0.03); width:100%; height:130px; border-radius: 5px; } 
.complete .done-detail .img-wrap img { height:100%; } 
.complete .done-detail .txt-wrap { display: flex; flex-direction: column; gap:2px; } 
.complete .done-detail .txt-wrap .brand { font-size: 13px; color:#888888; line-height: 17px; } 
.complete .done-detail .txt-wrap .product {padding-bottom: 5px; font-size: 16px; color:#333; line-height: 1.45; font-weight: 700; word-break: keep-all; letter-spacing:-0.3px; } 
.complete .done-detail .txt-wrap .price { font-size: 16px; color:#333; line-height: 22px; font-weight: 700; word-break: keep-all; letter-spacing:-0.3px; } 
.complete .done-detail .txt-wrap .expired { font-weight: 400; color: #707070; font-size: 13px; letter-spacing: -0.05px; line-height: 17px; } 
.complete .done-detail .txt-wrap .expired span { font-weight: 600; margin-right: 2px; } 

.complete .done-detail ul { width:100%; padding-top: 24px; border-top: 1px solid #e6e6e6; } 
.complete .done-detail ul li { display: flex; justify-content:space-between; line-height:25px; font-size: 14px; letter-spacing: -0.3px; } 
.complete .done-detail ul li div:first-child { color:#888888; font-weight: 400; } 
.complete .done-detail ul li div:last-child { color:#333; font-weight: 500; } 
.complete .btn-wrapper { display: flex; width: 100%; height: 128px; align-items: flex-start; gap: 10px; padding: 54px 16px 20px; gap:10px; } 
.complete button.btn { all: unset; width:50%; font-size: 18px; font-weight: 400; text-align: center; letter-spacing: 0; line-height: 20px; height: 54px; border-radius: 5px; box-sizing: border-box; } 
.complete button.btn.primary { background: #44217a; color:#fff; } 
.complete button.btn.sub { color: #44217a; border:1px solid #44217a; background-color: #FCFCFC; } 


.invalid-phone {
    border: 2px solid red;
  }
  .message {
    font-size: 0.85rem;
    color: red;
    margin-top: 4px;
    height: 1.2em;
  }


  .w100 { width: 100%;}