/* main---------------------------- */
#section0{
    padding:5.5rem 0 0 0;
    overflow: hidden;
}
#section0 .bg > *{
    opacity: 0;
}
#section0 .bg{
    width: 92%;
    border-radius: 1.5rem;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap:3rem;
    height: 53rem;
    margin:auto;
    color: #333333;
    /* box-shadow: 0 0 7px rgba(0,0,0,0.5); */
    background: url(../image/main_bg_renewal.png?v=1.1) no-repeat center/cover;
}
#section0 .bg p{
    font-size: 1.8rem;
    line-height: 2.4rem;
    text-align: center;
}
#section0 .bg p strong{
    color:#333333;
}


/* 형광펜 효과 */
#section0 .bg h1, #section1 h2, #section2 h2, #section3 h2 {
    position: relative;
    display: inline-block;
    z-index: 1;
}
#section0 .highlight-underline, #section1 .highlight-underline, #section2 .highlight-underline, #section3 .highlight-underline {
    content: '';
    position: absolute;
    background-color: #C7EEFF;
    z-index: -1;
    height: 0.5em;
    bottom: 0;
    margin-bottom: 0.4rem;
}
#section0 .highlight-underline {
    left: 0;
    margin-left: -0.4rem;
    width: 52.5%;
}
#section1 .highlight-underline {
    right: 0;
    margin-right: 5.5rem;
    width: 11rem;
}
#section2 .highlight-underline {
    left: 0;
    margin-left: -0.4rem;
    width: 68%;
}
#section3 .highlight-underline {
    left: 0;
    width: 55%;
    margin-left: -0.23rem;
}

.highlight {
    width: 100%;
    height: 3.5rem;
    font-size: 1.6em;
    line-height: 3.2rem;
    color: #333333;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;

}
.highlight img {width: 2.5rem;}

.logo-images{
    display: flex;
    justify-content: center;
    gap: 2em;
}
.logo-images img {
    width: 5rem;
    object-fit: contain;

}
.floating-button {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    width: 30%;
    min-width: 18rem;
    height: 4.8rem;
    color: #34C1FF;
    border-radius: 5rem;
    border:none;
    font-size: 1.5em;
    font-weight: bold;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease;
    margin-top: 10px;
    cursor: pointer; /* 커서가 손가락 모양으로 변경됨 */
}
.floating-button:hover {
    background-color: var(--main);
    color:#fff;
}

/* main) section1 - 결제내역 */
#section1 > *{opacity: 0;}
#section1{
    margin-top: 2rem;
    height: 55rem;
    background: url(../image/section1_bg2.png)no-repeat center/cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

#section1 .highlight {margin-top: 10rem;}
#section1 .purchase{
    /* position: absolute; */
    /* bottom:-6rem; */
    /* left:50%; */
    /* transform: translateX(-50%); */
    /* background-color: #4EB500; */
    width: 25rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    position: relative;
    margin-top: 30px;
}
#section1 h2 {
    font-size: 16px;
    font-weight: normal;
    text-align: center;
}
#section1 h2 span{font-weight: bold;}
#section1 h3 {
    margin-top: 0;
    font-size: 11px;
    font-weight: normal;
    text-align: center;
}

#section1 .purchase>div {
    margin-top: 2rem;
}
#section1 .purchase img {
    width: 100%;
}
#section1 .purchase_check {
    display: flex;
    flex-direction: column;
    align-items: center;
}
#section1 .purchase_check img {width: 6.5rem;}
#section1 .purchase_check h2 {
    color: #28C1FF;
    margin-top: 1rem;
}
#section1 .purchase_check h3 {
    color: #999999;
    margin-top: 1rem;
}
/* 구매내역 넷플릭스 유튜브 클릭 설정 */
.purchase_content {
    width: 80%;
    border: 1px solid #DDDDDD;
    border-radius: 5rem;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
    font-size: 1.5rem;
    display: flex;
}
.purchase_content>div {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    color: #DDDDDD;
    border-radius: 5rem;
    transition: all 0.5s;
}
.purchase_content>div.on {
    border: 1px solid #2CC1FF;
    box-shadow: 0 0 8px rgba(123, 215, 255, 0.8);
    color: #2CC1FF;
}

.purchase_receipt {
    width: 80%;
    border-top: dotted 2px rgba(51, 51, 51, 0.5);
    border-bottom: dotted 2px rgba(51, 51, 51, 0.5);
    color: #999999;
    margin-bottom: 20px;
}
.purchase_receipt ul {
    margin: 5px 0;
}
.purchase_receipt li {
    padding: 5px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.2rem;
}
.purchase_receipt li span {display: none;}
.purchase_receipt li span.active {display: inline;}



#section1 .purchase_img {
    position: absolute;
    bottom: 0;
    margin-bottom: -13.69px;
    z-index: -1;
}

/* main) section2 - 유튜브 프리미엄 가격 */
#section2 > *{opacity: 0;}
#section2{
    padding: 10rem 2rem 3rem ;  /*9rem 3.5rem */
    /* background-color: #E8EFFF; */
    background: linear-gradient(#F0F8FF,#ffff);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.youtube_detail{
    display: flex;
    justify-content: center;
    column-gap: 15%;
    margin-top: 3rem;
}
/* .saving_txt{
    color:#A7C2FF;
    font-size:2rem ;
    font-weight: bold;
    text-align: center;
}
.saving_txt span{
    font-family: 'SEBANG_Gothic_Bold', sans-serif;
    font-size: 3.4rem;
    color:#495DFF;
} */
.features{
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    color:var(--main);
    font-size:1rem;
    font-weight: bold;
    width: 100%;
}
.features li {
    display: flex;
    align-items: center;
    justify-content: center;
    /* padding: 5px; */
    font-weight: normal;
    color: #999999;
}
.features img {width: 20px; margin: 0.5rem;}
.img_box{
    width: 100%;
    max-width: 400px;
    display: flex;
    justify-content:center;
    /* column-gap:10%; */
    margin-top: 3rem;
}
.img_box img {width: 100%;}

.notice{
    width: 100%;
    margin-top:2rem;
    font-size: 1.2rem;
    color:#27ACFF;
    padding: 1.5rem;
    text-align: center;
    background-color: #F3F7FC;
    border-radius: 1rem;
}
.sticky{
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 600px;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.5rem;
    background-color: var(--main);
    color: #fff;
    font-size: 1.8rem;
    font-weight: 600;
    transition: opacity 0.3s ease;
    box-shadow: 0 -0.1rem 2rem rgba(0, 0, 0, 0.3);
    cursor: pointer; /* 커서가 손가락 모양으로 변경됨 */
    opacity: 0;
}
/*main) section3 - 알림톡 */
#ch-shadow-root-wrapper > div{border:3px solid #000;}
#section3 > *{opacity: 0;}

#section3{
    /* overflow: hidden; */
    height: 45rem;
    border-bottom: 0.3rem solid #c7c7c7;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image: url(../image/section3_bg.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-bottom: 0;
}
#section3 .alert {
    position: relative;
    /* background-color: #28C1FF; */
    width: 100%;
    height: 100%;
}
#section3 .alert_n {
    position: absolute;
    width: 28rem;
    left: 50%;
    margin-left: -14rem;
    bottom: 0;
    margin-bottom: 10.5rem;
}
#section3 .alert_y {
    position: absolute;
    width: 28rem;
    left: 50%;
    margin-left: -14rem;
    bottom: 1rem;
}
.alert_nn {
    position: absolute;
    width: 17.5rem;
    left: 50%;
    margin-left: -5.5rem;
    bottom: 0;
    margin-bottom: 13rem;
    
}
.alert_yy {
    position: absolute;
    width: 17.5rem;
    left: 50%;
    margin-left: -5.5rem;
    bottom: 3.5rem;
}
.alert h2 {
    width: 100%;
    display: inline-block;
    color: #27ACFF;
    font-size: 1.1rem;
}
.alert h2 span {
    float: right;
    margin-left: 8.7rem;
    font-weight: normal;
}
.alert p {
    font-size: 0.8rem;
    margin-top: -5px;
    color: #999999;
}

/* main) section4 - 이용절차 */
#section4 > *{opacity: 0;}
#section4{
    padding-top: 9rem;
}
#section4 .steps-container{
    display: flex;
    justify-content: center;
    column-gap: 18%;
    margin:4.5rem 0 0 0;
}
#section4 .step_img{
    display: flex;
    height: 19.5rem;
    justify-content: space-between;
    flex-direction: column;
    row-gap: 5rem;
    background: url(../image/step-line.png)no-repeat center/contain;
}
#section4 .step_img div{
    width: 9rem;
    height: 3rem;
    background-color:var(--main);
    border-radius: 30px;
    color:#fff;
    line-height: 3rem;
    text-align: center;
    font-size: 1.4rem;
    font-weight: normal;
}
#section4 .step_img div.line{
    background-color: #fff;
    border:0.1rem solid var(--main);
    color:var(--main);
}
#section4 .step_text{
    display: flex;
    flex-direction: column;
    row-gap:3rem;
}
.step_text h5{
    font-size: 2rem;
    color:#4E4E4E;
}
.step_text p{
    font-size: 1.4rem;
    margin-top:0.5rem;
}


/* modal - 로그인 &회원가입  */
#myModal{display: none;}
.modal{
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 3rem;
    row-gap: 2.5rem;
    width: 90%;
    height: 40vh;  /*#60vh*/
    border-radius: 1.5rem;
    background-color: #fff;
    justify-content: center;
}
.modal-content .logo{
    text-align: left;
}
.modal-content p{
    text-align: left;
    font-size: 2.2rem;
    line-height: 2.8rem;
    font-weight: bold;
}
/* .modal-content hr{
    margin-top: 1rem;
} */
.close{
    color: #aaa;
    position: absolute;
    top: 1rem;
    right: 2rem;
    font-size: 2.8rem;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #333;
}

.kakao-login-button {
    /* margin-top: 1em; */
    background-color: #FEE500;
    color: #3C1E1E;
    width: 100%;
    padding:0.8rem 0;
    border: none;
    border-radius: 5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    font-family: 'Pretendard-Regular', sans-serif;
    box-shadow: 0 0 7px rgba(0,0,0,0.2);
}
.kakao-login-button img{
    width: 3rem;
}
.sns_login{
    display: flex;
    justify-content: space-around;
}


/* purchase1 - 구매하기 (이용권 선택) */
#purchase{background-color: #fff;}
#ott_select {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.ott_item{
    position: relative;
    display: flex;

    row-gap:2rem;
    width: 100%;
    height: auto;
    margin-top:2rem;
    /* padding:3rem; */
    /* background-color:#D1DFFF;
    border-radius: 3rem; */
}
/* .ott_item::after{
    content: url(../image/arrow-down.png);
    position: absolute;
    top:100%;
    left:50%;
    transform: translateX(-50%);
} */
.ott_item li{
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 1.2rem;
    width: 46%;
    margin:0 auto;
    padding: 2.7rem 0.5rem;
    font-size:1.5rem;
    background-color:#fff;
    border-radius: 1rem;
    border: 1px solid #EBEEF2;
    color:#525252;
}
.ott_item li.on{
    border: 1px solid #27ACFF;
    box-shadow: 0 0 4px rgba(123, 215, 255, 0.8); 

    transform: scale(1.05);
    transition: 0.3s;
    
}
.ott_item li img{
    width: 3.8rem;
    height: 3.8rem;
    object-fit: contain;
    background-color: #F5F5F5;
    border-radius: 50%;
    padding: 7px;
}

/* 모바일 전용 스타일 */
@media (max-width: 768px) {
    .ott_item li {
        font-size: 1.37rem; /* 폰트 크기 감소 */
        column-gap: 0.6rem; /* 모바일에서 여백 추가로 줄이기 */
        /* padding: 2.7rem 0.5rem; 여백 줄이기 */
    }
    .ott_item li img {
        width: 2.8rem; /* 이미지 크기 줄이기 */
        height: 2.8rem;
    }

}


#period_select{display: none;}
#period_select h2{
    margin-top:7rem;
    text-align: left;

}

#period_select ul{
    display: flex;
    flex-direction: column;
    width: 100%;
    /* justify-content: space-between; */
    /* column-gap: 1rem; */
}
#period_select ul li{
    /* flex:1; */
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding:1.5rem;
    margin-top:2rem;
    background-color:#fff;
    border-radius: 1rem;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    font-size: 1.4rem;
    /* font-weight: bold; */
    text-align: center;
    color: #D9D9D9;
}
#period_select ul li.active{
    background-color: #fff;
    color:#999999;
    border: 1px solid #27ACFF;
    box-shadow: 0 0 4px rgba(123, 215, 255, 0.8);
}
#period_select ul li.active strong{
    color:#27ACFF;
}
#period_select ul li p {
    display: flex;
    justify-content: center;
    align-items: center;
}

#period_select ul li strong{
    font-size:1.8rem;
    color: #D9D9D9;
}
#period_select ul li span {
    display: flex;
    justify-content: center;
}
#period_select ul li span img {margin-right: 5px;}
#period_select ul li span img:nth-child(2) {
    display: none;
}
#period_select ul li.active span img {display: block;}
#period_select ul li.active span img:nth-child(1) {display: none;}
#total_price{
    display: none;
    background-color:#fff;
}

#total_price h2 {
    position: relative;
    font-size: 2.2rem;
}



#total_price h2 span{
    position: relative;
    font-size: 1.4rem;
    color: #5BC0EB
}

#total_price .price{
    display: flex;
    margin-top:2rem;
    column-gap: 2rem;
    align-items: center;
    font-size: 1.4rem;
    font-weight: bold;
}
#total_price .price span:first-of-type{
    flex:1;
    padding: 0.8rem 1.5rem;
    background-color:#FFf;
    color:#27ACFF;
    text-align: center;
    border-radius: 2rem;
    box-shadow:0 0 4px rgba(123, 215, 255, 0.5);
    border: 1px solid #2CC1FF;
}
#total_price .price_line{
    flex:5;
    display: inline-block;
    height: 0.2rem;
    border-top:2px dashed #888;
}
#total_price p{
    margin-top:2rem;
    font-size: 2rem;
    text-align: right;
}
#total_price p span{
    color:var(--main);
    font-weight: bold;
}

@media (max-width: 768px) {
    #total_price .price span:first-of-type {
        white-space: nowrap; /* 텍스트 줄바꿈 방지 */
    }
}

/* purchase2 - 구매하기 (이용권 정보) */
#goods{padding-bottom:2rem;}
.goods_card{
    width: 100%;
    padding:2rem;
    /* margin-top:2rem; */
    border-radius: 1.5rem;
    background: linear-gradient(327deg, rgba(229,168,255,1) 0%, rgba(24,101,255,1) 66%);
    color:#fff;
    box-shadow:0 0 10px rgba(0, 0, 0, 0.3);
}
.pur_header{
    display: flex;
    justify-content: space-between;
    border-bottom:2px dashed #fff;
}
.pur_header img{
    width: 5rem;
    height: 3rem;
    object-fit: contain;
}
.youtube .pur_header img{
    width: 3rem;
}
.product_name{
    display: flex;
    flex-direction: column;
    column-gap: 1.5rem;
    font-size:1.4rem;
}
.product_name p:first-child{
    font-size: 2rem;
    font-weight: 900;
}
.product_name p:nth-of-type(2){
    display: flex;
    align-items: center;
    column-gap: 0.3rem;

}
.product_name img{
    width: 1.5rem;
}
.pur_breakdown ul{
    display: flex;
    padding:2rem 0;
    flex-direction: column;
    gap: 1rem;
    font-size: 1.4rem;
}
.pur_breakdown ul li{
    display: flex;
    justify-content: space-between;

}

.centered-content {
    display: flex;
    justify-content: center; /* 가로 중앙 정렬 */
    align-items: center; /* 세로 중앙 정렬 */
    gap: 8px; /* 아이콘과 텍스트 간격 */
    text-align: center; /* 텍스트 가운데 정렬 */
    margin-bottom: 1rem; /* 아래 여백 추가 */
}

.centered-content img {
    width: 24px; /* 아이콘 크기 조정 */
    height: 24px; /* 아이콘 크기 조정 */
    object-fit: contain; /* 이미지 비율 유지 */
}

/* #goods ul.notice{
    display: flex;
    flex-direction: column;
    row-gap:1rem;
    padding:0 1rem;
} */
/* #goods ul.notice li{
    position: relative;
    font-size: 1.3rem;
    color:#555;
    text-align: left;
    line-height: 1.8rem;
}
#goods ul.notice li:before{
    content:'-';
    position: absolute;
    top:0;
    right: 101%;
    color:inherit;
} */

.notice{
    display: flex;
    flex-direction: column;
    row-gap:0.8rem;
    padding:0 1rem;
}

.notice li{
    position: relative;
    font-size: 1.3rem;
    color:#555;
    text-align: left;
    line-height: 1.8rem;
    padding: 0.5rem; /* 내부 여백 추가 */
}

/* .notice li::before{
    content:'-';
    position: absolute;
    top:0;
    right: 101%;
    color:inherit;
} */

#buyer_info {padding-bottom:3rem;}
#buyer_info h2, #goods h2 {
    margin:3rem 0 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
#payment h2 {
    display: flex;
    justify-content: center;
    align-items: center;
}
#goods h2 img, #buyer_info h2 img ,#payment h2 img {
    width: 2.5rem;
    height: auto;
    margin-right: 1rem;
}
#buyer_info h2 a{
    display:inline-block;
    width: 4.5rem;
    height: 2.5rem;
    font-size: 1.3rem;
    border: 1px solid #ddd;
    border-radius: 0.8rem;
    color:var(--main);
    text-align: center;
    line-height: 2.5rem;
    margin-left:0.6rem;
}
.blue_txt{
    color:var(--main);
    font-size: 1.4rem;
    line-height: 2rem;
}
.info_card{
    width: 100%;
    margin:2rem 0;
    background-color: #fff;
    box-shadow:0 0 10px rgba(0, 0, 0, 0.3);
    border-radius: 1.5rem;
}
.info_card div{
    position: relative;
    display: flex;
    justify-content: flex-start;
    column-gap: 1rem;
    padding:1.6rem 3rem;
    font-size: 1.6rem;
}
.info_card div:not(:last-child):after{  
    content:'';
    position: absolute;
    top:100%;
    left:50%;
    width: 81%;
    height: 0.1rem;
    background-color: #ddd;
    transform: translateX(-50%);
 }
/*  .info_card .mail_list{display: none;} */
#payment h2{margin-bottom:2rem;}
#payment h2{
    margin:3rem 0 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

select#bank, input[type="text"]{
    width: 100%;
    height: 4.8rem;
    padding:1.3rem;
    margin-top:1rem;
    font-size:1.6rem;
    border:2px solid #ddd;
    border-radius: 0.5rem;
    line-height: 5rem;
}
#payment .blue_txt{margin:2rem 0;}
#payment .radio_btn{
    margin-top:2rem;
}
#payment .radio_btn label{
    font-size: 1.8rem;
    padding-left:1rem;
}
#payment .check_btn{
    margin-top:2rem;
}
#payment .check_btn label{
    padding-left: 1rem;;
    font-size:1.6rem;
}
.receipt_area{
    padding-left:2.5rem;
}
.agree div{
    padding-left:2.5rem;
}
#payment .btn{
    background-color: var(--main);
}
/* purchase3 - 주문완료 */
#order{
    padding:0;
}
#order .order_bg{
    position: relative;
    margin-top:6rem;
    background-color: #E8EFFF;
    width: 100%;
    height: calc(100vh - 10rem);
}
#order .completed_card{
    position: absolute;
    top:-3rem;
    left:50%;
    width: 85%;
    max-height: 105rem;
    padding:3rem 3rem 15rem 3rem;
    transform:translateX(-50%);
    background-color: #fff;
    border-radius: 1.5rem;
    box-shadow:0 0 10px rgba(0, 0, 0, 0.3);
}
#order .contents{
    display: flex;
    align-items: center;
    flex-direction: column;
    row-gap:2rem;
    padding-bottom:4rem;
    border-bottom:2px dashed #ddd;
}
#order .contents img{
    width: 6rem;
}
#order .contents p{
    font-size: 2.4rem;
    color:#1C31DF;
    font-weight: bold;
}
#order .contents div{
    font-size: 1.6rem;
    text-align: center;
    line-height: 2.4rem;
    letter-spacing: -0.7px;
}
#order .details {
    position: relative;
    padding:3rem 5% 1rem;
}
#order .details ul{
    display: flex;
    flex-direction: column;
    row-gap:1.5rem;
}
#order .details ul li{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#order .details ul li span{
    font-size: 1.8rem;
    color:#aaa;
}
#order .details ul li em{
    padding-left:1rem;
    font-size: 1.2rem;
    font-style: normal;
}
#order .details ul li strong{
    font-size: 1.6rem;   
}
#order .details ul li:nth-of-type(2) strong{color:black;}
#order .details ul li:nth-of-type(4) strong{color:black;}
#order .details .bubble_talk{
    position: absolute;
    top:100%;
    left:50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 27rem;
    height: 5rem;
    margin:2rem auto;
    line-height: 5rem;
    text-align: center;
    color:#1C31DF;
    font-size: 1.4rem;
    background: url(../image/bubbletalk.png)no-repeat center/cover;
}
#order .details .bubble_talk span{
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    margin-right: 1rem;
    border-radius: 50%;
    border:1px solid #1C31DF;
    text-align: center;
}

/* 마이페이지 */
#mypage h2, #mypage2 h2{
    padding-bottom:2rem;
    border-bottom:2px solid #333;
}
#mypage .alert-copy{
    visibility: hidden;
    position: fixed;
    bottom:2rem;
    left:50%;
    transform: translateX(-50%);
    width: 10rem;
    text-align: center;
    line-height: 3rem;
    height: 3rem;
    border-radius: 2rem;
    background-color: #000;
    color:#fff;
    font-size: 1.4rem;
}
#mypage .alert-copy.show {
    visibility: visible;
    animation: fade-in 700ms, fade-out 700ms 2000ms;
  }

  @keyframes fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes fade-out {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }
.goods_card.youtube{
    background: linear-gradient(150deg, rgba(255,129,11,1) 0%, rgba(255,211,67,1) 66%);
}
.goods_card.disney{background: linear-gradient(150deg, rgba(8,173,195,1) 0%, rgba(47,60,207,1) 66%);}
#product .product_name{
    display: block;
}
#product .product_name p{margin-bottom:1rem;}
#product .product_name div{
    display: flex;
    align-items: center;
    column-gap: 0.4rem;
    font-size: 1.4rem;
}
#product .pur_breakdown{
    padding:1rem 0;
}
#product .pur_breakdown div{
    margin-top:1.5rem;

}
#product .pur_breakdown div p{
    display: inline-flex;
    justify-content: space-between;
}
#product .pur_breakdown div p img{
    width: 1.2rem;
    object-fit: contain;
    transition: 0.3s;
    cursor: pointer;

}

#product .pur_breakdown span{
    display: inline-block;
    width: 5rem;
    font-size: 1.8rem;
}
#product .pur_breakdown p{
    display: inline-block;
    width: 80%;
    padding:1rem 3rem;
    background-color: #fff;
    border-radius: 3rem;
    color:#555;
    font-size: 1.6rem;
}
#product .profile{font-size: 1.6rem;;}
#payment_details{
    margin-top:5rem;
}
.payment_list>p{
    font-size: 1.4rem;
    padding:1.5rem 0;
    border-bottom:2px solid #ddd;
}
.payment_list ul li{
    display: flex;
    padding:2rem 0 2rem 3%;
    align-items: center;
    column-gap: 3rem;
    border-bottom:2px solid #ddd;

}
.payment_list ul li img{
    width: 5rem;
    height: 5rem;
}
.pay_detail p{
    font-size: 2rem;
    margin-bottom:0.7rem;
}
.pay_detail span{
    font-size: 1.4rem;
    color:#888;
}
.pay_detail .state01, .pay_detail .state02{
    background-color: var(--sky);
    border: 1px solid var(--main);
    border-radius:2rem;
    padding:0.2rem 1.5rem;
    color:var(--main);
    font-size: 1.1rem;
    margin-left:2rem;
}
.pay_detail .state02{
    background-color: #F5FFEC;
    color:#4EB500;
    border: 1px solid #4EB500;
}

/* 마이페이지 - 내역 없는 경우 */
.empty_pruduct, .empty_payment{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    row-gap:3rem;
    width: 100%;
    height: 17rem;
    border-bottom:2px solid #ddd;
    font-size: 1.6rem;
    color:#888;
}
.empty_pruduct img{
    width: 5rem;
}

/* 자주 묻는 질문 */
#qna {
    display: flex;
    flex-direction: column;
    align-items: center;
}
#qna .purchase_content {
    margin-top: 4rem;
}

.accordion{
    display: none;
    width: 100%;
    overflow: hidden;
    margin-top: 5rem;
}
.accordion:first-of-type {
    display: block; /* 첫 번째 accordion만 표시 */
}

.accordion div{
    width: 100%;
}
.accordion .question{
    position: relative;
    font-size: 1.4rem;
    padding: 2rem 4rem 2rem 2rem;
    border-bottom:1px solid #ddd;
}
.accordion .question span {
    display: block;
    color: #34C1FF;
    font-size: 10px;
    margin-bottom: 0.8rem;
}
.accordion .question:after{
    content:'';
    position: absolute;
    top:50%;
    right:1.5rem;
    transform:translateY(-50%) rotate(0);
    width: 1.5rem;
    height: 2rem;
    text-align: center;
    line-height: 2.5rem;
    background-image: url(../image/qna_arrow.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center; /
}
.accordion .question.active:after {
    transform: translateY(-50%) rotate(180deg); /* 회전 상태 */
}
.accordion .answer {
    display: none;
    position: relative;
    font-size: 1.4rem;
    padding: 2rem 4rem 2rem 2rem;
    color: black; /* 텍스트는 항상 검은색 유지 */
    border-left: 4px solid var(--sky);
    z-index: 1; /* 텍스트가 배경 위에 오도록 설정 */
    background: transparent; /* 텍스트 영역 투명 처리 */
}

/* #b6e9ff; */

.accordion .answer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #2CC1FF; /* 기존 색상 */
    opacity: 0.08; /* 투명도를 조절하여 연하게 */
    z-index: -1; /* 배경이 텍스트 아래에 위치 */
    box-sizing: border-box; /* 보더 크기를 포함해 레이아웃 유지 */
}

/* .accordion .answer:after{
    content:'^';
    position: absolute;
    top: 50%;
    margin-top: -1rem;
    right:1.5rem;
    background-color: var(--main);
    width: 2rem;
    height: 2rem;
    border-radius: 2rem;
    text-align: center;
    line-height: 2.5rem;
    color:#fff;
} */

.popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: -10%; /* 추가로 왼쪽으로 확장 */
    width: 120%; /* 너비를 120%로 확대 */
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}


.popup-overlay .popup {
    text-align: center;
}

.popup-overlay .popup-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 10px;
    color:#fff;
    font-size: 10px;
}

/* 기본 스타일 */
.dont-show-checkbox {
    margin-right: 10px;
    position: relative;
    width: 15px;
    height: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    appearance: none;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* 체크박스를 체크하지 않았을 때 기본 배경색 */
.dont-show-checkbox:not(:checked) {
background-color: transparent;
border-color: #fff; 
}

/* 체크박스를 체크했을 때 배경색 */
.dont-show-checkbox:checked {
background-color: #007bff; 
border-color: #007bff; 
}

/* 체크된 상태에서 안에 체크 표시 추가 (옵션) */
.dont-show-checkbox:checked::after {
content: '✔'; 
color: white;
font-size: 12px;
text-align: center;
display: inline-flex;
align-items: center;
justify-content: center;
width:100%;
height: 100%;
}

.popup-overlay .popup-content {
    position:relative;
    /* margin-bottom: 20px; */
    width:280px;
    height: 330px;
    border-radius: 20px;
    padding: 10px 35px;
    background: center / contain no-repeat url('../image/event_popup.png');

}
/* .popup-overlay .popup-content >* {
    color:#fff;
} */

/* 팝업 타이틀 */
.popup-title {
    font-size: 10px;
    font-weight: bold;
    position: relative;
    margin-bottom: 20px;
}

.popup-title::before,
.popup-title::after {
    content: '';
    position: absolute;
    top: 45%;
    width: 30%;
    height: 2px;
    background-color: #fff; /* 흰색 라인 */
    transform: translateY(-45%);
}

.popup-title::before {
    left: 0;
}

.popup-title::after {
    right: 0;
}
/* .popup-overlay .popup-content .popup-text {
    position:absolute;
    color:#fff;
    top: 31%;
    left: 50%;
    transform: translate(-50%, -31%);
    white-space: nowrap;
    font-size: 9px;
    font-weight: 300;
} */
/* .popup-overlay .popup-content .popup-text u {
    font-size: 10px;
    color:#8725FF;
    font-weight: bold;
} */

.popup-bot {
    display:flex;
    align-items: center;
    position: absolute;
    bottom: 1%;
    left: 50%;
    transform: translate(-50%, -3%);
}
.popup-bot img {margin-right: 5px;}
.popup-footer .close-btn {
    background: #393939;
    border: none;
    transition: transform 0.2s ease;
    box-shadow: 0px 0px 8px 0px rgba(255, 255, 255, .3);
    width:28px;
    height: 28px;
    border-radius: 50px;
}
/* 호버 시 클릭 효과 */
.close-btn:hover {
    transform: scale(1.1);
  }
@media screen and (min-width:380px){
    .pc_only{display:block;}
}

/* 440px 이상인 경우  */
@media screen and (min-width:440px){
    #section0 .bg{
        width: 92%;
        border-radius: 1.5rem;
        padding:2rem;
    }
    #section3{

        height: 49rem;

        flex-direction: column;
        align-items: center;
        background-image: url(../image/section3_bg.png);
        background-size: cover;
        background-position: center;
    }
    
    /* #section3 img:nth-of-type(2){
        position: absolute;
        top:22rem;
        left:39%;
    }
    #section3 img:nth-of-type(3){
        position: absolute;
        top:26rem;
        left:33%;
    }
    #section3 img:nth-of-type(4){
        position: absolute;
        top:36.5rem;
        left:33%;
    } */
    #section4 .steps-container{
        width: 90%;
        margin:5rem auto;
        row-gap: 2rem;
        flex-direction: column;
        justify-content: space-between;
    }
    #section4 .step_img{
        flex-direction: row;
        margin: auto;
        width: 90%;
        height: auto;
        background-image: url(../image/step-line-row.png);
    }
    #section4 .step_text{
        flex-direction: row;
        justify-content: space-between;
        text-align: center;
        gap: 2rem;
    }
    .step_text p{margin-top:1rem;}
}

/* 700px 이상인 경우 = 모달  */
@media screen and (min-width:700px){
    .modal-content {
        padding: 2rem 7rem;
        width: 45em;
        height: 40vh;
    }
    .sns_login{
        justify-content: center;
        column-gap: 3rem;
    }
}

.go-home-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10rem;  /* 버튼 위에 여백 추가 */
}

.go-home-btn .btn {
    background-color: #1C31DF; /* 버튼 색상 */
    color: white;  /* 텍스트 색상 */
    padding: 12.5px; /* 상하 크기를 20px로 증가 */
    border: none;
    border-radius: 25px;  /* 둥근 모서리 */
    text-decoration: none;  /* 링크 밑줄 제거 */
    font-size: 1.6rem;
}