@charset "euc-kr";

:root {
    /* ¼øȯ¹Ý */
    --color-cycle-1: #e850ff;
    --color-cycle-2: #0056ca;
    /* ±âº»ÀÌ·Ð Á¾ÇÕ¹Ý */
    --color-basic-1: #e850ff;
    --color-basic-2: #4e6bff;
    /* ÇÁ¸®¹Ì¾ö Á¾ÇÕ¹Ý */
    --color-premium-1: #983250;
    --color-premium-2: #ca7700;
}
.timetable {justify-content: flex-end; gap: 5px;}
.timetable a {font-size: 14px; color: #fff; background: #333; padding: 5px 23px;}
.timetable a.upload_btn {color: #333; background: #fff; border: 1px solid #333;}

/* »óÇ°ÅÇ */
.series_tab {position: relative;display: flex;gap: 2px;margin: 10px auto 40px;}
.series_tab::before {content: ''; position: absolute; bottom: 0; left: -500%; width: 1000%; height: 2px; background: #000;}
.series_tab li {flex: 1;}
.series_tab li a {display: block; color: #b9b9b9;background: #ebebeb;padding: 25px 0;}
.series_tab li.on a {font-weight: 900;background: #000 ;color: #FFF;}

/* »óÇ°ÆгΠ*/
.series_panel .tx_highlight {color: var(--color-item);}
.series_panel .item {display: flex; border: 1px solid #222; border-radius: 16px;}
.series_panel.cycle .item.type1 {--color-item: var(--color-cycle-1);}
.series_panel.cycle .item.type2 {--color-item: var(--color-cycle-2);}
.series_panel.basic .item.type1 {--color-item: var(--color-basic-1);}
.series_panel.premium .item.type1 {--color-item: var(--color-premium-1);}
.series_panel.premium .item.type2 {--color-item: var(--color-premium-2);}
.series_panel .item + .item {margin-top: 20px;}
.series_panel .detail_area {flex: 1; display: flex; align-items: center; padding: 30px 50px 30px 70px;}
.series_panel .detail_area .info_area {text-align: left;}
.series_panel .detail_area .info_area .label {display: inline-block; font-weight: 700; color: var(--color-item); margin-bottom: 5px;}
.series_panel .detail_area .info_area .tit {line-height: 1.2;}
.series_panel .detail_area .info_area .tiny {display: inline-block; font-size: 13px; color: var(--color-item); margin-top: 5px;}
.series_panel .detail_area .info_area .detail {color: #666; margin-top: 10px;}
.series_panel .detail_area .price_area {margin-left: auto; text-align: right;}
.series_panel .detail_area .price_area .badge-base {color: #FFF; background: var(--color-item); padding: 6px 60px 8px; border-radius: 16px; margin-bottom: 5px;}
.series_panel.basic .detail_area .price_area .badge-base {background: linear-gradient(90deg, var(--color-basic-1) 0%, var(--color-basic-2) 100%);;}
.series_panel .detail_area .price_area .price {display: flex; align-items: flex-end; gap: 10px;}
.series_panel .detail_area .price_area .price .list_price {font-weight: 400; color: #d0d0d0; text-decoration: line-through;}
.series_panel .detail_area .price_area .pop_btn {margin-top: 15px;}
.series_panel .detail_area .price_area .pop_btn a {font-size: 13px; color: #666; border-color: #bbb; border-radius: 0; padding: 8.5px 18px;}
.series_panel .btn_area {flex-shrink: 0; width: 200px; border-radius: 0 16px 16px 0; overflow: hidden;}
.series_panel .btn_area a {display: flex; justify-content: center; align-items: center; height: 100%; background-color: #000; color: #FFF; font-weight: 700; font-size: 22px;}

/* À¯ÀÇ»çÇ× Æ˾÷ */
.popupTable .table-base {font-size: 13px;}

@media screen and (max-width: 1200px){
    .series_tab {margin: 2% auto 6%;}
    .series_tab li a {padding: clamp(12px, 3vmin, 25px) 0;}
}
@media screen and (max-width: 992px){
    .series_panel .item {flex-direction: column; align-items: stretch;}
    .series_panel .detail_area {padding: 30px;}
    .series_panel .detail_area .price_area .badge-base {padding: 6px 20px 8px;}
    .series_panel .btn_area {width: 100%; border-radius: 0 0 16px 16px;}
    .series_panel .btn_area a {padding: 20px;}
}
@media screen and (max-width: 768px){
    .series_panel .btn_area a {font-size: 16px;}
}
@media screen and (max-width: 576px){
    .timetable a {font-size: 12px; padding: 3px 15px;}

    .series_tab {font-size: 16px;}
    .series_panel .detail_area {flex-direction: column; align-items: stretch; gap: 10px; padding: 20px;}
}