/*쿠폰 스타일*/

#coupon  {
    background:url('../image/back-1.webp') no-repeat;
    background-position: center;
    background-attachment:fixed;
  background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7rem 0;
}

#coupon .couponBox {
    width: 37.5rem;
    border-image-slice:  33;
    border-image-width:  33px;
    border-image-source: url("../image/coupon/frame-1.png");
    border-style: solid;
    background: linear-gradient(
      0deg,
      transparent 42.86%,
      rgba(255, 255, 255, 0.03) 42.86%,
      rgba(255, 255, 255, 0.03) 50%,
      transparent 50%,
      transparent 92.86%,
      rgba(255, 255, 255, 0.03) 92.86%,
      rgba(255, 255, 255, 0.03) 100%
    ),linear-gradient(180deg, rgba(78, 8, 9, 0.50) 0%, rgba(37, 3, 3, 0.50) 100%);
    background-size: 1rem 1rem, auto;
    flex-shrink: 0;
    padding: 3.56rem 2.5rem;
    box-sizing: border-box;
}


/*쿠폰 정보 폼*/

#coupon .couponBox .title {
    color: #FFB1B1;
    text-align: center;
    font-family: "Gmarket Sans";
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 500;
    line-height: 120%; /* 1.05rem */
    margin-bottom: 0.44rem;
}

#coupon .couponBox .form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

#coupon .couponBox .form.uid {
    margin-bottom: 0.4rem;
}



#coupon .couponBox .uidInput {
    display: flex;
    gap: 0.88rem;
    width: 100%;
}


#coupon .btn-1 {
    width: 7.75rem;
    height: 3.25rem;
    background: url('../image/coupon/btn-1.png') 100% / cover no-repeat;
    color: #FFF;
    text-align: center;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.80);
    font-family: "Gmarket Sans";
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 500;
    line-height: 120%; /* 1.8rem */
    display: flex;    
    align-items: center;
    justify-content: center;
    padding-top: 0.3rem;
    flex-shrink: 0;
}

#coupon .btn-2 {
    width: 32.5rem;
    height: 3.25rem;
    background: url('../image/coupon/btn-2.png') 100% / cover no-repeat;
    color: #FFF;
    text-align: center;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.80);
    font-family: "Gmarket Sans";
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 500;
    line-height: 120%; /* 1.8rem */
    display: flex;    
    align-items: center;
    justify-content: center;
    padding-top: 0.3rem;
}

.jp #coupon .btn-1,
.jp #coupon .btn-2,
.en #coupon .btn-2,
.en #coupon .btn-2,
.cn_sc #coupon .btn-2,
.cn_sc #coupon .btn-2,
.cn_tc #coupon .btn-2,
.cn_tc #coupon .btn-2 { padding-top: 0 !important;}


#coupon .couponBox .frameBox {
    height: 3.5rem;
    margin-bottom: 1.25rem;
    width: 100%;
    color:#FFF;
    text-align: center;
    font-size: 1.25rem;
    font-family: "Gmarket Sans";
    box-sizing: border-box;
}

#coupon .couponBox .frameBox::placeholder {
    color: #747486;
    text-align: center;
    font-family: "Gmarket Sans";
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 500;
    line-height: 120%; /* 1.5rem */
}

/*쿠폰 사용 가이드*/

#coupon .guide {
    margin-top: 0.4rem;
}

#coupon .guide .title {
    color: #FFE6E6;
    font-family: "Gmarket Sans";
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
    margin: 2.25rem 0 0.94rem 0;
    text-align: center;
}

#coupon .guide .title::before,
#coupon .guide .title::after {
    color: #FFB0B0;
    text-align: center;
    font-family: "Gmarket Sans";
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 1.5rem */
}

#coupon .guide .title::before {
    content: "[ ";
}

#coupon .guide .title::after {
    content: " ]";
}

#coupon .guide .content {
    border-image-slice:  11;
    border-image-width:  11px;
    border-image-source: url("../image/coupon/frame-2.png");
    border-style: solid;
    background: linear-gradient(
      0deg,
      transparent 42.86%,
      rgba(255, 255, 255, 0.03) 42.86%,
      rgba(255, 255, 255, 0.03) 50%,
      transparent 50%,
      transparent 92.86%,
      rgba(255, 255, 255, 0.03) 92.86%,
      rgba(255, 255, 255, 0.03) 100%
    ),linear-gradient(180deg, rgba(15, 32, 48, 0.90) 0%, rgba(22, 44, 65, 0.90) 100%);
    background-size:1rem 0.5rem, auto;
    flex-shrink: 0;
    box-sizing: border-box;
    height: 9.6rem;
}

#coupon .guide .content .scroll {
    margin: 1.5rem 1rem 1.5rem 1.2rem;
    height: 6.5rem;
    color: #D2ECFF;
    overflow: auto;
     font-family: 'NanumSquareNeo';
     font-size: 0.9rem;
    font-style: normal;
    font-weight: 400;
   line-height: 180%;
   padding-right: 0.25rem;
 }


 
/*쿠폰 팝업*/

.couponPopup {
    position: fixed;
    left:0; right:0; 
    margin: 0 auto;
    width: 31.25rem;
    height: auto;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    backdrop-filter: blur(5px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    display: none;
}
.couponPopup .contentWrap {
    display: flex;
    flex-direction: column;
    align-items: center;
        margin-top: 2rem;
}

.couponPopup .info {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.63rem;
}

.couponPopup .info .text {
    color: #FFF;
    font-family: "Gmarket Sans";
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
}

.couponPopup .info .text .point {
    color: #FF676A;
    font-weight: 700;
}
.couponPopup .helpWrap {
    margin-top: 1.44rem;
    margin-bottom: 1.94rem;
}
.couponPopup .helpWrap .help {
    font-size: 1.25rem;
    line-height: 180%;
}

.couponPopup .helpWrap .help-2 {
    font-size: 1.25rem;
    line-height: 180%;
    color: #DA0F12;
    font-size: 0.875rem;
    font-weight: 700;
}


/*반응형*/


 @media screen and (max-width: 1024px) { 
    #coupon .couponBox {width: 90%;}
    #coupon .couponBox form .btn-2 {
        width: 100%;
        background: url('../image/coupon/btn-2.png') 100% / 100% 100% no-repeat;
    }

    .couponPopup {
    width: 95%; }
 }