@charset "utf-8";
/* 
font-family:"Pretendard Variable"
font-family: 'Noto Sans KR';
357e6b 녹색
rgb(229, 229, 229) = #e5e5e5
rgb(221, 221, 221); = #ddd
rgb(248, 248, 248); = #f8f8f8
rgb(125, 125, 125); = #7d7d7d
body.iosDevice {background: red;}
*/

#benefitsWrap {box-sizing: border-box; padding-bottom: 50px;}
#benefitsWrap .benefits {box-sizing: border-box;}
#benefitsWrap .benefits * {box-sizing: border-box;}

/* 다음달 등급 */
.benefits .next_grade {text-align: center; font-size: 0; margin-bottom: 20px; background: #fbfbfb; padding-top: 40px; padding-bottom: 47px; border-bottom: 2px solid #e5e5e5;}
.benefits .next_grade h3 {display: block; text-align: center; line-height: 1; font-size: 30px; font-weight: 600; color: #000;}
.benefits .next_grade .grade_img {margin-top: 30px;}
.benefits .next_grade .grade_img img {display: block; width: 120px; margin: 0 auto;}
.benefits .next_grade p {display: block; text-align: center; color: #357e6b; line-height: 1.375; font-size: 24px; font-weight: 600; margin-top: 25px;}


/* 혜택 안내 */
.benefits_info {padding: 40px 30px 0 30px;max-width: 640px;margin: 0 auto;}
.benefits_info > li {position: relative; width: 100%;}
.benefits_info > li + li {margin-top: 28px;}
.benefits_info > li > div {position: relative; display: flex; align-items: center; flex-wrap: wrap; width: 100%; height: auto;}
.benefits_info > li > div > img {position: relative; display: block; width: 180px;}
.benefits_info > li > div > div {position: relative; display: block; width: calc(100% - 180px); padding-left: 30px;}
.benefits_info > li > div > div strong {display: block;font-size: 28px;font-weight: 700;line-height: 1.3;color: #000;}
.benefits_info > li > div > div p {display: block;font-size: 26px;line-height: 1.3;font-weight: 400;color: #000;margin-top: 10px;}

/* 로얄 스쿱 등급 혜택 이미지 */
.royal_benefit_img {position: relative;display: block;width: 100%;height: auto;font-size: 0;margin: 85px auto 70px;}
.royal_benefit_img img {display: block; width: 100%; max-width: 640px; margin: 0 auto;}

/* 혜택 안내 테이블 */
.benefits_box {position: relative; display: block; width: 100%; height: auto; padding: 0 30px; max-width: 640px; margin: 0 auto;}
.benefits_box .ul {}
.benefits_box .ul > li {position: relative; display: block; width: 100%; height: auto; }
.benefits_box .ul > li + li {margin-top: 50px;}
.benefits_box .ul > li > div {position: relative;display: flex;align-items: flex-start;width: 100%;height: auto;flex-wrap: wrap;border: 2px solid #e5e5e5;padding: 47px 29px 58px 0;}
.benefits_box .ul > li > div .img {display: block; width: 174px;}
.benefits_box .ul > li > div .img img {display: block;width: 132px;margin: 0 auto;}

.benefits_box .ul > li > div .info {position: relative; display: block; width: calc(100% - 174px); height: auto; padding-left: 22px;}
.benefits_box .ul > li > div .info > strong {display: block;line-height: 1;font-size: 40px;font-weight: 700;color: #000;margin-bottom: 32px;letter-spacing: -0.025em;}

.benefits_box .ul > li > div .info ul {}
.benefits_box .ul > li > div .info ul li {display: block; padding-left: 14px; }
.benefits_box .ul > li > div .info ul li + li {margin-top: 28px;}
.benefits_box .ul > li > div .info ul li p {position: relative;font-size: 24px;font-weight: 400;color: #000;line-height: 1.3; letter-spacing: -0.025em;}
.benefits_box .ul > li > div .info ul li p b {font-weight: 700; color: #357e6b;}
.benefits_box .ul > li > div .info ul li p b.b2 {font-weight: 700; color: #000;}
.benefits_box .ul > li > div .info ul li p:before {content: "";position: absolute;left: -13px;top: 11px;display: block;width: 5px;height: 5px;border-radius: 50%;background: #000;}
.benefits_box .ul > li > div .info ul li p span {display: block; font-size: 20px; font-weight: 400; color: #888; letter-spacing: -0.010em; margin-top: 4px;}


.benefits_box .ul > li > div.now {position: relative; display: none; align-items: center; justify-content: center; line-height: 1; width: 100%; height: 84px; border-radius: 10px 10px 0 0; background: #357e6b; box-sizing: border-box; font-size: 30px; font-weight: 700; color: #fff; padding: 0; margin: 0;}
.benefits_box .ul > li.on > div {border-color: #357e6b;}
.benefits_box .ul > li.on > div.now { display: flex;}

/* 하단 유의사항 안내 텍스트 */
.bottom_info_text {position: relative; display: block; width: 580px; height: auto; padding: 0 0 5px 0; margin: 0 auto;}
.btn_bene_info {padding: 0 23px 0 0;margin: 0 auto;border: 0;display: flex;align-items: center;justify-content: space-between;line-height: 1;border-top: 1px solid #c8c8c8;border-bottom: 1px solid #c8c8c8;box-sizing: border-box;width: 580px;height: 79px;margin-top: 80px;background: transparent;}
.btn_bene_info.active svg {transform: rotate(-180deg)}
.btn_bene_info * {box-sizing: border-box;}
.btn_bene_info > div {display: flex; align-items: center; line-height: 1; }
.btn_bene_info > div img {display: block; width: 32px; margin-right: 12px;}
.btn_bene_info > div strong {font-size: 27px; font-weight: 700; color: #000; }
.btn_bene_info svg {width: 30px; transition: all 0.2s;}

.bottom_info_text .inner {line-height: 1.417; display: block; position: relative; padding-top: 53px; padding-left: 2px;}
.bottom_info_text .inner .block {}
.bottom_info_text .inner .block + .block {margin-top: 33px;}
.bottom_info_text .inner .block h4 {display: block;font-size: 26px;font-weight: 700;letter-spacing: -0.025em;color: #3c3c3c; word-break: keep-all;}
.bottom_info_text .inner .block p {position: relative;display: block;font-size: 26px;font-weight: 400;letter-spacing: -0.025em;color: #3c3c3c;word-break: keep-all;padding-left: 11px;}
.bottom_info_text .inner .block p::before {content: "";position: absolute;left: 0;top: 14px;display: block;width: 4px;height: 4px;background: #3c3c3c;border-radius: 50%;}


@media all and (max-width: 640px) {
    /* 다음달 등급 */
    .benefits .next_grade {margin-bottom: 3.12500vw; padding-top: 6.25000vw; padding-bottom: 7.34375vw; border-bottom: 0.31250vw solid #e5e5e5;}
    .benefits .next_grade h3 {font-size: 4.68750vw;}
    .benefits .next_grade .grade_img {margin-top: 4.68750vw;}
    .benefits .next_grade .grade_img img { width: 18.75000vw; }
    .benefits .next_grade p { font-size: 3.75000vw; margin-top: 3.90625vw;}


    /* 혜택 안내 */
    .benefits_info {padding: 6.25000vw 4.68750vw 0 4.68750vw; }
    .benefits_info > li + li {margin-top: 4.3750vw;}
    .benefits_info > li > div > img { width: 28.12500vw;}
    .benefits_info > li > div > div { width: calc(100% - 28.12500vw); padding-left: 4.68750vw;}
    .benefits_info > li > div > div strong {font-size: 4.3750vw;}
    .benefits_info > li > div > div p {font-size: 4.0625vw;margin-top: 1.56250vw;}

    /* 로얄 스쿱 등급 혜택 이미지 */
    .royal_benefit_img {margin: 13.2813vw auto 10.9375vw;}

    /* 혜택 안내 테이블 */
    .benefits_box { padding: 0 4.68750vw; }
    .benefits_box .ul > li + li {margin-top: 7.8125vw;}
    .benefits_box .ul > li > div {border: 1px solid #e5e5e5;padding: 7.3438vw 4.5313vw 9.0625vw 0;}
    .benefits_box .ul > li > div .img { width: 27.18750vw;}
    .benefits_box .ul > li > div .img img {width: 20.6250vw;}

    .benefits_box .ul > li > div .info { width: calc(100% - 27.18750vw); padding-left: 3.43750vw;}
    .benefits_box .ul > li > div .info > strong {font-size: 6.2500vw;margin-bottom: 5.0000vw;}

    .benefits_box .ul > li > div .info ul li { padding-left: 2.18750vw; }
    .benefits_box .ul > li > div .info ul li + li {margin-top: 4.37500vw;}
    .benefits_box .ul > li > div .info ul li p { font-size: 3.75000vw; }
    .benefits_box .ul > li > div .info ul li p:before {left: -2.03125vw;top: 1.71875vw;width: 0.78125vw;height: 0.78125vw;}
    .benefits_box .ul > li > div .info ul li p span { font-size: 3.12500vw; margin-top: 0.62500vw;}


    .benefits_box .ul > li > div.now { height: 13.12500vw; border-radius: 1.56250vw 1.56250vw 0 0; font-size: 4.68750vw; }

    /* 하단 유의사항 안내 텍스트 */
    .bottom_info_text {width: 90.6250vw; padding: 0 0 0.7813vw 0; }
    .btn_bene_info {padding: 0 3.5938vw 0 0;width: 90.6250vw;height: 12.3438vw;margin-top: 12.5000vw;}
    .btn_bene_info > div img {width: 5.0000vw; margin-right: 1.8750vw;}
    .btn_bene_info > div strong {font-size: 4.2188vw;}
    .btn_bene_info  svg {width: 4.6875vw;}

    .bottom_info_text .inner {padding-top: 8.2813vw;}
    .bottom_info_text .inner .block + .block {margin-top: 5.1563vw;}
    .bottom_info_text .inner .block h4 {font-size: 4.0625vw;}
    .bottom_info_text .inner .block p {font-size: 4.0625vw;padding-left: 1.7188vw;}
    .bottom_info_text .inner .block p::before {top: 2.1875vw;width: 0.6250vw;height: 0.6250vw;}
}/* 640px */

@media all and (max-width: 425px) {
    #benefitsWrap {box-sizing: border-box; padding-bottom: 20px;}
    /* 다음달 등급 */
    .benefits .next_grade {margin-bottom: 10px; padding-top: 20px; padding-bottom: 24px; border-bottom: 1px solid #e5e5e5;}
    .benefits .next_grade h3 {font-size: 17px;}
    .benefits .next_grade .grade_img {margin-top: 15px;}
    .benefits .next_grade .grade_img img { width: 60px; }
    .benefits .next_grade p {font-size: 14px;margin-top: 13px;}

    /* 혜택 안내 */
    .benefits_info {padding: 20px 15px 0 15px; }
    .benefits_info > li + li {margin-top: calc(28px / 2);}
    .benefits_info > li > div > img { width: 90px;}
    .benefits_info > li > div > div { width: calc(100% - 90px); padding-left: 15px;}
    .benefits_info > li > div > div strong {font-size: calc(28px / 2);}
    .benefits_info > li > div > div p {font-size: calc(26px / 2);margin-top: 5px;}

    /* 로얄 스쿱 등급 혜택 이미지 */
    .royal_benefit_img {margin: 42px auto 35px;}

    /* 혜택 안내 테이블 */
    .benefits_box { padding: 0 15px; }
    .benefits_box .ul > li + li {margin-top: 25px;}
    .benefits_box .ul > li > div {border: 1px solid #e5e5e5;padding: calc(47px / 2) calc(29px / 2) calc(58px / 2) 0;}
    .benefits_box .ul > li > div .img { width: 87px;}
    .benefits_box .ul > li > div .img img {width: 66px;}

    .benefits_box .ul > li > div .info { width: calc(100% - 87px); padding-left: 11px;}
    .benefits_box .ul > li > div .info > strong {font-size: calc(40px / 2);margin-bottom: calc(32px / 2);padding-top: 5px;}

    .benefits_box .ul > li > div .info ul li { padding-left: 7px; }
    /* .benefits_box .ul > li > div .info ul li + li {margin-top: 14px;} */
    .benefits_box .ul > li > div .info ul li + li {margin-top: 12px;}
    .benefits_box .ul > li > div .info ul li p {font-size: 14px;}
    .benefits_box .ul > li > div .info ul li p:before {left: -7px;top: 8px;width: 2px;height: 2px;}
    .benefits_box .ul > li > div .info ul li p span {font-size: 12px;margin-top: 5px;}


    .benefits_box .ul > li > div.now { height: 42px; border-radius: 5px 5px 0 0; font-size: 15px; }

    /* 하단 유의사항 안내 텍스트 */
    .bottom_info_text {width: calc(100% - 30px);padding: 0 0 calc(5px / 2) 0;}
    .btn_bene_info {padding: 0 calc(23px / 2) 0 0;width: calc(100% - 30px);height: calc(79px / 2);margin-top: calc(80px / 2);}
    .btn_bene_info > div img {width: calc(32px / 2); margin-right: calc(12px / 2);}
    .btn_bene_info > div strong {font-size: calc(27px / 2);}
    .btn_bene_info  svg {width: calc(30px / 2);}

    .bottom_info_text .inner {padding-top: calc(53px / 2);}
    .bottom_info_text .inner .block + .block {margin-top: calc(33px / 2);}
    .bottom_info_text .inner .block h4 {font-size: 14px;}
    .bottom_info_text .inner .block p {font-size: 13px;padding-left: calc(11px/ 2);}
    .bottom_info_text .inner .block p::before {top: calc(14px / 2);width: calc(4px / 2);height: calc(4px / 2);}

}/* 425px */