@charset "utf-8";

:root {
    --hero-bg-pc: url(/pages/plasma/images/sub_visual_pc.png);
    --hero-bg-mo: url(/pages/plasma/images/sub_visual_mo.png);
    --hero-gap: 2em;
}

.compare{background:#E8F4FF;}
.compare .section_inner{display: grid; gap: 6rem;}
.compare .img_box{width: calc(750/1280 * 100%); margin: 0 auto;}
.compare .text_01{margin-bottom: 1rem;}


.benefit{background: linear-gradient(180deg, #CAEAFE 11.49%, #D8EFFE 55.74%, #E8F4FF 100%);position: relative;}
.benefit_visual{width: 70.3rem;aspect-ratio: 703/ 896;background: url(../images/img_benefit_01.svg) no-repeat bottom / contain;position:  absolute;bottom: 0;z-index: 0;right: 50%;}
.benefit_wrap{margin: 8rem auto 6rem;max-width: 1280px;}
.benefit_list{display: grid;grid-template-columns: 1fr; gap: 3.6em;margin-left:auto;width:  max-content;}
.benefit_list li{position: relative;display: flex;justify-content:flex-start;align-items: center;gap: .6em;background: #fff;padding: .4em 1.2em .4em .4em;border-radius: 100px;box-shadow: .8rem .8rem 2.4rem 0 rgba(135, 183, 237, 0.36);font-size: clamp(20px, 3.7vw,3.2rem);font-weight: 500;text-wrap: balance;word-break: keep-all;line-height: 1.2;}
.benefit_list li .benefit_icon{--size: 8.4rem;width: var(--size);height: var(--size);display: block;background-repeat: no-repeat;background-position: center;background-size: contain;flex-shrink: 0;aspect-ratio: 1/1;}
.benefit_list li:nth-of-type(1) .benefit_icon{background-image: url(../images/icon_benefit_01.svg);}
.benefit_list li:nth-of-type(2) .benefit_icon{background-image: url(../images/icon_benefit_02.svg);}
.benefit_list li:nth-of-type(3) .benefit_icon{background-image: url(../images/icon_benefit_03.svg);}
/* 라인 */
.benefit_item::before {content: "";position: absolute;right: calc(100%);top: 50%;transform: translateY(-50%);width: 12rem;height: .3rem;background: var(--gradient-03);}
/* 원 ripple */
.benefit_item::after {content: "";position: absolute;right: calc(100% + 12rem + 1.1rem);top: 50%;transform: translate(50%, -50%);width: 1.8rem;height: 1.8rem;border-radius: 50%;background: #1657E9;animation: ripple 1s ease-out infinite;}

@keyframes ripple {
    0% { box-shadow: 0 0 0 0 #99B8FF, 0 0 0 0 rgba(153, 184, 255, 0.4); }
    100% { box-shadow: 0 0 0 .5rem #99B8FF, 0 0 0 1.5rem rgba(153, 184, 255, 0); }
}
.benefit_list li .benefit_text strong{font-size: 1.1em;}
.benefit_caption{background: var(--gradient-03);font-size: clamp(20px, 3.4vw, 3.2rem);font-weight: 700;display: flex;justify-content: center;align-items: center;text-align: center;color: #fff;line-height: 1.4;letter-spacing: -0.04em;border-radius:.7em;padding-block: 1em;width: calc(1092/ 1280* 100%);margin: 0 auto;z-index: 1;position: relative;}
.benefit_caption p{text-wrap: balance; word-break: keep-all;}
.benefit_caption strong{--gradient-type: var(--gradient-02);font-size: 1.1em;}

.recommend{background-image: url(../images/bg_recommend_pc.png); background-repeat: no-repeat; background-size: cover; background-position: center bottom;}
.recommend .section_title{--gradient-type: var(--gradient-02);color: #fff;position:relative;width: max-content;margin: 0 auto;}
.recommend .section_title::before, .recommend .section_title::after{content:'';width: 6.5rem;height: 15rem;display: block;background: url(../images/img_laurel.svg) no-repeat center / contain;position: absolute;top: 50%;}
.recommend .section_title::before{left: 0;transform: translate(-100%, -50%);}
.recommend .section_title::after{right:0;transform: scaleX(-1) translate(-100%, -50%);}

.recommend_list{display: grid; grid-template-columns: 1fr; gap: 2.4rem; width: calc(820/1280 * 100%); margin: 4rem auto 0;}
.recommend_list li{padding: 0.75em 1.2em;font-size: clamp(18px,3.4vw, 3.2rem);letter-spacing: -0.04em;line-height: 1.3;font-weight: 500;display: flex;justify-content: flex-start;align-items: center;gap: .75em;border-radius: .6em;border: .3rem solid #FFF;background: linear-gradient(276deg, rgba(255, 255, 255, 0.90) 15.39%, rgba(255, 255, 255, 0.80) 97.95%);box-shadow: 1.2rem 1.2rem 4.8rem 0 rgba(0, 12, 38, 0.48);}
.recommend_list .icon-img{aspect-ratio: 32/20;display: inline-block;background: url(../images/img_recommend_check.svg)no-repeat center / contain;width: 1em;}
/* PC (해상도 1058px ~ 1440px) */
@media screen and (max-width:1440px) {
    .recommend_list{ width:80%;}
}

/* 태블릿 (768px ~ 1024px) */
@media screen and (max-width: 1024px) {
     /* ~9px */
    .compare .section_inner{gap: 8em;}
    .compare .img_box{width: calc(590/768 * 100%)}

    .benefit{aspect-ratio:768/1123;}
    .benefit .section_inner{height: 100%;display: flex;flex-direction: column;}
    .benefit_visual{top: 8%;bottom: auto;width: 80%;transform: translateX(-50%);aspect-ratio: 450/573;left: 50%;}
    .benefit_wrap{margin: auto 0 4rem;}
    .benefit_list{margin: 0 auto;}
    /* 라인 & ripple  */
    .benefit_item::before,.benefit_item::after {content: none;}
    .benefit_caption{width: 100%;}


    
    .recommend_list{ width:100%;}
}
/* 모바일 (767px 이하) */
@media screen and (max-width: 767px) {
    /* 8px */
    .compare .img_box{width: 100%;}
    .benefit{aspect-ratio: 375/829;}
    .benefit_visual{
    width: 100%;
    top: 6%;
}
    .benefit_list{width: 100%;gap: 4.7em;}
    .recommend{background-image: url(../images/bg_recommend_mo.png);aspect-ratio: 375/831;}
    .recommend .section_title::before, .recommend .section_title::after{width: 5rem;height: 10rem;}
    .recommend_list{ width:100%;}
    
    
}