button {font-size: 1rem; opacity: 1; }
button:hover {opacity: 1; color: #fff; background: #111;}
.pickdealmain {font-family: 'Pretendard';
    width: 100%; min-height: 100vh;  height: auto ; min-width: 320px;
    background: url(/images/pikdeal/pickdeal_bg.png)no-repeat; background-size: cover;
    margin-top: calc(var(--safeAreaTop2) + 65px); 
    margin-top: calc(var(--safeAreaTop1) + 65px); 
    position: relative;
    /*padding: 20px 0px;*/
}
header.user-container {z-index: 50!important;}

.dealmain_inner {max-width: 1270px; width: 100%; margin: 0 auto; overflow: hidden;}


.dealmain_decotxt{ overflow: hidden; width: 100%; position: relative; height: 40px; line-height: 40px;
     color: #a1a1a1; background: rgba(0, 0, 0, 0.5); font-weight: 100;}

.balloon {width: 246px; height: 262px; position: absolute; top: -50px; left: 0; z-index: -1;
    border-radius: 50%; opacity: 1; transform: scale(1);
    animation: popIn 2s ease-out; }

.contentde_box {padding: 0 24px 16px 24px; margin-top: -20px;}
.dealmain_decotxt p { animation: flowText 30s infinite; width: 200%; }
.pikdeal_name {margin-top: 8px;}

.dealmaintxtbox {font-family: 'RiaSans-ExtraBold'; color: #fff; text-align: center; position: relative; margin-top: 124px; z-index: 5;}
.dealmaintxtbox span{font-size: 1.5rem; }
.dealmaintxtbox h1 {font-size: 3rem; font-weight: 300; line-height: 140%;
    z-index: 5; background:url(/images/pikdeal/boxhead.png)no-repeat; background-position: left 50% top 60px; height: 160px;}

.plane {
    width:300px; height:100px; position:absolute; transform: rotate(-15deg);
    left:71%;  top: 180px;  animation: flight 3s linear; 
    filter: drop-shadow(0 6px 8px rgba(0,0,0,0.12)); z-index: 0;
}

.deal_contentwrapper {display: flex; justify-content: center; margin-top: 60px; padding-bottom: 120px; flex-wrap: wrap; gap: 40px;}
.deal_contentdetail {max-width: 520px; width: 50%; background: #fff; border-radius: 20px;;}
.deal_contentdetail > img {height: 248px; border-radius: 20px 20px 0 0; object-fit: cover; width: 100%;} 
.value_product span {border: 1px solid #157ced; background: #157ced;
    border-radius: 3px; font-size: 0.95rem; color: #fff; padding: 4px 8px;
    display: inline-block;margin-right: 5px; margin-top: 5px;}
.value_product span:nth-child(n+4) {display: none;}
.cotentde_txt h2 {font-size: 1.5rem; font-weight:600; padding: 12px 0 0 0;  overflow: hidden; margin-bottom: 8px; max-height: 72px; height: auto;
    text-overflow: ellipsis; display: -webkit-box; 
    -webkit-line-clamp: 2;  /* 2줄 넘어가면 말줄임 */
    -webkit-box-orient: vertical;}
.cotentde_aline {display: flex; align-items: center; justify-content: space-between; margin-top: 10px;} 
.cotentde_txt dl dt{color:#fff; display: inline-block;font-weight: 600; background: #ff4e4e; border-radius: 5px; padding: 6px 8px;}
.cotentde_txt dl dd {display: inline-block; margin-left: 10px;}
.cotentde_txt dl dd strong{font-size: 1.25rem; color: #FF4E4E; font-weight: 800;}
.pickdeal_reser {padding: 0 20px; background: #111; color: #fff; border-radius: 5px; font-size: 1rem!important;
    flex-shrink: 0; height: 40px; margin-left: 20px; line-height: 40px;}

.content_duration {background:#F8FBFF; padding: 10px 12px; border-radius: 3px; 
    display: flex; align-items: center; margin-top: 10px;}
.content_duration dt {color: #157ced;margin-right: 10px; display: flex; align-items: center;}
.content_duration dt img {margin-right: 5px;}
.contentde_benefitbox {height: 112px; overflow-y: auto; border: 1px solid #157ced; padding: 10px 16px;
    border-radius: 5px; margin-top: 10px;}

/*.contentde_benefitbox p::before {content: ''; width: 7px; height: 7px;  margin-right: 5px;
    display: inline-block; background: url(/images/pikdeal/star_benefit.svg); position: relative; }*/
.contentde_benefitbox p::before {
    content: '#';
    width: auto;
    height: auto;
    margin-right: 5px;
    display: inline-block;
    background: none;
    position: relative;
    color: #157ced;
    font-size: inherit;
    font-weight: bold;
}
.contentde_benefitbox p {line-height: 150%; display: flex; align-items: center; color: #157ced; font-weight: 600;}
.dealmaintxtbox::after {content:''; display: inline-block; background: url(/images/pikdeal/pickdealsticker.png); position: absolute; top: -40px; right: 300px;
    width:125px; height: 125px; animation: popIn 2s ease-out; z-index: -1;}
.pickcontentde_info {margin-top: 4px; cursor: pointer; position: relative;}
.pickcontentde_info strong {color: #FF9898;}
.pickcontentde_info .toggle_title::after{content: ''; display: inline-block; transition: all 0.3s;
    width: 8px; height: 8px; border-top: 2px solid #FF9898; border-left: 2px solid #FF9898; transform: rotate(-135deg); margin-left: 10px; position: relative; top: -3px;}

.infode_toggle{ display: none; transition: all 0.3s; max-height: 124px; overflow-y: auto;
    max-width: 456px; width: 100%; padding: 12px; color: #999;
    position: absolute; left: 0; top: 28px; border-radius: 10px; 
  background: #fff; box-shadow: 0 0 5px #00000021;}

.pickcontentde_info .toggle_title.active::after {
    transform:  rotate(45deg); top: 0px;
}

::-webkit-scrollbar {width: 3px;}
::-webkit-scrollbar-thumb {
    background: #157ced; /* 스크롤바 막대 색상 */
    border-radius: 12px;
}
::-webkit-scrollbar-track { 
    background: #F3F9FF;
}

.item_list___product{
    margin:0px auto;
}
    /* 애니메이션 모음 */
@keyframes flowText {
    0% {
        margin-left: -100%;
    }
    100% {
        margin-left: 100%;
    }
}

@keyframes flowText {
    0% {
        margin-left: -100%;
    }
    100% {
        margin-left: 100%;
    }
}

@keyframes popIn {
    0% {
        opacity: 0;
        transform: scale(0);
    }

    60% {
        opacity: 1;
        transform: scale(1.2);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes flight {
    0%   { left:-10%; top:170px; transform: rotate(-10deg) scale(0.5); }
    30%  { left:12%;  top:100px; transform: rotate(-6deg) scale(0.7); }
    50%  { left:34%;  top:30px; transform: rotate(-2deg) scale(0.9); }
    70%  { left:50%;  top:50px; transform: rotate(2deg)  scale(1); transform: rotate(-5deg);}
    100%  { left:71%;  top:180px; transform: rotate(6deg)  scale(1); transform: rotate(-10deg)}
}


 @media (max-width: 1270px){
    .deal_contentdetail {width: 40%;}
   .dealmaintxtbox::after {right: calc(50% - 65px); top: -120px;}
    .dealmaintxtbox .balloon {display: none;}
}
 @media (max-width: 950px){
 
    .deal_contentdetail {width: 90%;}
 }

@media (max-width: 720px){
    .dealmaintxtbox h1 {font-size: 2.5rem; height:120px; background-position: left 50% top 40px; padding: 0 10px;}
    .cotentde_aline {flex-direction: column; align-items: flex-start;}
    .cotentde_aline a {display: block; width: 100%;}
    .pickdeal_reser {margin-left: 0; margin-top: 10px; display: block; width: 100%;}
    .deal_contentdetail > img {height: 144px;}
    .contentde_benefitbox {height: 108px;}
    .cotentde_txt h2 {height: auto;}
    .deal_contentwrapper {margin-top: 40px;}
    .pickcontentde_info {margin-top: 10px;}
    .contentde_benefitbox {padding: 8px 10px;}
    .contentde_box {padding: 0 20px 16px 20px;}
  
    }

@media (max-width: 550px){
       .deal_contentdetail {width: 86%;}
    .content_duration {font-size: 0.9rem;}
.dealmaintxtbox span {font-size: 1.25rem;}
    .dealmaintxtbox h1 {font-size: 1.85rem; height: 100px; margin-top: 10px;
    background-position: left 50% top -5px;}
 .plane {display: none;}
.dealmaintxtbox {margin-top: 140px;}
.deal_contentwrapper {margin-top: 20px;}
}