/* 요금제 css*/
.content-box {
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05)  ;
    background-color:#fff;
    width:100%;
}

/* Pay per use */
.subscrip.payper .content-box {
    padding:0;
}

.subscrip.payper .subs-type01 .sub-icon,
.subscrip.payper .subs-type02 .sub-icon,
.subscrip.payper .subs-type03 .sub-icon,
.subscrip.payper .subs-type04 .sub-icon {
    background-color:#fff;
}

.subscrip.payper .best-i {
    color:#5b58db;
    background-image: url('/images/main/renew/subs-best-w.png');
}

.subscrip.payper h4 {
    border-radius: 8px 8px 0 0 ;
    padding:1.8rem 1.3rem 1.5rem 1.3rem;
}

.payper .subs-t01,
.payper .subs-t02,
.payper .subs-t03,
.payper .subs-t04 {
    color:#fff;
}

.payper .small-t {
    color:#ebebeb;
}

.payper-padding {
    padding:0 1.3rem 1.5rem 1.3rem;
}


/* 구독 요금제 */
.subs-t01 {
    color:#577BEB;
}

.subs-t02 {
    color:#4F4CEB;
}

.subs-t03 {
    color:#0024B4;
}

.subs-t04 {
    color:#9433E8;
}

.subs-tb01 {
    border:1px solid #577BEB;
}

.subs-tb02 {
    border:1px solid #4F4CEB;
}

.subs-tb03 {
    border:1px solid #0024B4;
}

.subs-tb04 {
    border:1px solid #9433E8;
}

.subscrip.payper .subs-type01 h4,
.subscrip .subs-type01 .sub-icon {
    background-color:#577BEB;
}

.subscrip.payper .subs-type02 h4,
.subscrip .subs-type02 .sub-icon {
    background-color:#4F4CEB;
}

.subscrip.payper .subs-type03 h4,
.subscrip .subs-type03 .sub-icon {
    background-color:#0024B4;
}

.subscrip.payper .subs-type04 h4,
.subscrip .subs-type04 .sub-icon {
    background-color:#9433E8;
}

.small-t {
    font-size:13px;
    color:#999;
}

.subscrip {
    display:grid;
    grid-template-columns: 24.1% 24.1% 24.1% 24.1%;
    column-gap: 1.2%;
}

.subscrip .content-box {
    padding:1.8rem 1.3rem 1.5rem 1.3rem;
}

.best-i {
    position:absolute;
    right:.5rem;
    top:-3px;
    width:33px;
    height:40px;
    color:#fff;
    background-image: url('/images/renew/subs-best.png');
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size:100%;
    font-size:12px;
    text-align: center;
    padding-top:.6rem ;
}

.subscrip h4 {
    font-size:23px;
}

.ja .subscrip h4 {
    font-size:20px;
}

.overflow-hidden {
    overflow:hidden;
}

.myplan {
    position:absolute;
    top:6px;
    right:10px;
}

.myplan,
.li-myplan {
    display: inline-block;
    border-radius: 50px;
    font-size:12px;
    padding:2px 4px;
}

.subs-tb02 .myplan {
    right:46px;
}

.subscrip .sub-icon {
    display:inline-block;
    border-radius: 50px;
    margin-right:.7rem;
    width:42px;
    height:42px;
    text-align: center;
    padding-top:7px;
}

.subscrip .sub-icon img {
    width:26px;
}

.subs-li {
    background-color:#F1F0F5;
    border-radius: 15px;
    padding:.7rem 1rem;
    font-size:12px;
    line-height: 1.5;
    color:#424242;
}

.subs-li li {
    display:grid;
    grid-template-columns: 35% 65%;

}

.sl02 {
    padding:.5rem 1rem;
}

.sl02 li {
    line-height:1.2;
}

.subs-li li > span {
    display:block;
    color:#9A9A9A;
}

.sl02 li > span {
    padding-top:7px;
}

.subs-list .content-box {
    padding:1.5rem;
    justify-content:space-between;
    font-size:17px;
    cursor:pointer;
}

.subs-list .content-box .myplan {
    float:left;
    margin-top:1px;
    margin-right:5px;
}

.sub-side {
    width:50%;
    display:grid;
    grid-template-columns: 33% 33% 33%;
    text-align: right;
    font-size:14px;
    padding-top:3px;
    color:#575757;
}

.sub-side.en {
    width:65%;
}

.sub-side li > span {
    display:inline-block;
    color:#999;
    padding-right:10px;
}


.subr-price {
    display:inline-block;
}

.real-price {
    color:#EB5D5D;
    font-size:14px;
    margin-bottom:.1rem;
}

.real-price .event {
    display:inline-block;
    color:#fff;
    background-color:#EB5D5D;
    padding:2px 6px;
    border-radius: 50px;
    font-weight: 300;
    font-size:12px;
    margin-right:.3rem;
}

.rl-price {
    text-decoration: line-through;
}

.event-price {
    justify-content: center; /* 가로 방향 중앙 정렬 */
    align-items: center;   /* 세로 방향 중앙 정렬 */
}

.event-price .b-p {
    font-size:28px;
    font-weight: 600;
}

.event-price .s-p {
    font-size:13px;
    color:#6A6A6A;
    padding-top:5px;
}

.storage-txt {
    color:#424242;
    font-size:13px;
}


/* 반응형*/
@media (max-width: 1024px) {
    .subscrip {
        width:100%;
    }

    .small-t {
        font-size:12px;
    }

    .subscrip h4 {
        font-size:22px;
    }

    .subscrip .sub-icon {
        width:38px;
        height:38px;
    }

    .subscrip .sub-icon img {
        width:22px;
    }

    .subs-li {
        padding:1rem;
    }

    .subs-li li > span {
        width:35%;
    }

    .subscrip {
        grid-template-columns: 49% 49%;
        column-gap:2%;
    }

    .subscrip .content-box {
        padding:1.3rem 1.5rem;
        margin-bottom:1rem;
    }

    .subs-li {
        padding:1rem 1.8rem;
    }

    .subs-li li {
        grid-template-columns: 35% 65%;
    }

    .myplan {
        top:10px;
    }

}

@media (max-width: 800px) {
    .subscrip h4 {
        font-size:19px;
    }

    .small-t,
    .best-i {
        font-size:11px;
    }

    .subs-li {
        font-size:11px;
    }
}

@media (max-width: 600px) {
    .subscrip {
        grid-template-columns: 100%;
    }

    .subscrip .sub-icon {
        width:50px;
        height:50px;
        margin-right:1rem;
    }

    .subscrip .sub-icon img {
        width:65%;
    }

    .subscrip h4 {
        font-size:25px;
    }

    .small-t {
        font-size:16px;
        font-weight: 400;
    }

    .small-t.text-center {
        font-size:14px;
    }

    .best-i {
        width:40px;
        height:47px;
        font-size:14px;
        padding-top:.8rem;
    }

    .event-price .b-p {
        font-size:33px;
    }

    .event-price .s-p {
        font-size:16px;
    }

    .subs-li {
        font-size:13px;
    }

    .storage-txt {
        font-size:14px;
    }
}