@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: 10px;}
#benefitsWrap .benefits {padding-top: 80px; box-sizing: border-box;}
#benefitsWrap .benefits * {box-sizing: border-box;}

/* 다음달 등급 */
.benefits .next_grade {text-align: center; font-size: 0; margin-bottom: 87px;}
.benefits .next_grade h3 {display: block; text-align: center; line-height: 1; font-size: 26px; font-weight: 600; color: #000;}
.benefits .next_grade .grade_img {margin-top: 25px;}
.benefits .next_grade .grade_img img {display: block; width: 90px; margin: 0 auto;}
.benefits .next_grade p {display: block; text-align: center; color: #357e6b; line-height: 1.5; font-size: 16px; font-weight: 400; margin-top: 13px;}


/* 혜택 안내 */
.benefits_info {position: relative;display: flex;align-items: flex-start;jus;li 4개 시 */width: 790px;height: auto;margin: 0 auto;1w: 1;width: 100%;}
.benefits_info li {display: flex;justify-content: center;width: 25%;position: relative;}
.benefits_info li:after {content: "";display: block;width: 1px;height: 78px;background: #e1e1e1;position: absolute;right: 0;top: 26px;box-sizing: border-box;}
.benefits_info li:last-child:after,
.benefits_info li:last-of-type:after {display: none !important;}
.benefits_info li > div {text-align: center;}
.benefits_info li img {display: block; width: 110px; margin: 0 auto;}
.benefits_info li strong {display: block; line-height: 1; font-size: 16px; font-weight: 700; color: #000; margin-top: 25px;}
.benefits_info li p {display: block; font-size: 16px; font-weight: 400; color: #000; line-height: 1.375; margin-top: 15px; }

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


/* 혜택 안내 테이블 */
.benefits_table {position: relative;width: 1300px;height: auto;margin: 0 auto;border-top: 2px solid #000;margin-top: 80px;border-collapse: collapse;border: 0;border-left: 1px solid #e5e5e5;border-bottom: 1px solid #e5e5e5;overflow: visible;}
.benefits_table tr:last-child,
.benefits_table tr:last-of-type th {padding-bottom: 28px !important;}
.benefits_table tr:last-child,
.benefits_table tr:last-of-type td {padding-bottom: 28px !important;}
.benefits_table:before{box-sizing: border-box; position: absolute; left: 0; top: -2px; display: block; width: calc(100% - 1px); height: 2px; background: #000; content: ""; z-index: -1;}
.benefits_table:after{box-sizing: border-box; position: absolute; right: 1px; top: 0; display: block; width: 1px; height: 100%; background: #e5e5e5; content: ""; z-index: -2;}
.benefits_table * {box-sizing: border-box; overflow: visible;}
.benefits_table :before {box-sizing: border-box;}
.benefits_table :after {box-sizing: border-box;}
.benefits_table th {background: #f7f7f7; text-align: center; font-size: 16px; font-weight: 600; color: #000; line-height: 1.5; vertical-align: middle; border-right: 1px solid #e5e5e5;}
.benefits_table td {border: 0; vertical-align: middle; }
.benefits_table tr.your_grade th {/* border-top: 2px solid #000; */}
.benefits_table tr.your_grade td {vertical-align: top;/* border-top: 2px solid #000; */}

.benefits_table td .ic_grade {padding: 52px 0 16px;}
.benefits_table td .ic_grade > div {height: 110px;}
.benefits_table td .ic_grade img {display: block;margin: 0 auto;width: 97px;}
.benefits_table td .ic_grade img.royal {width: 92px;}
.benefits_table td .ic_grade span {display: block; line-height: 1; font-size: 16px; font-weight: 600; color: #000; text-align: center; margin-top: 20px;}

.benefits_table td .text {display: block; text-align: center; font-size: 16px; font-weight: 400; color: #000; line-height: 1.5; padding: 22px 0 21px;}
.benefits_table td .text b {color: #357e6b; font-weight: 700;}
.benefits_table td .text .bar {display: inline-block; width: 12px; height: 1px; background: #6b6b6b; line-height: 1; vertical-align: middle; font-size: 0;}

.benefits_table tr.conditions th,
.benefits_table tr.conditions td {padding-bottom: 20px;}
.benefits_table tr.conditions th {border-bottom: 1px solid #e1e1e1;}
.benefits_table tr.conditions td {border-bottom: 1px solid #e1e1e1;}
.benefits_table td .conditions {display: block; text-align: center; font-size: 16px; font-weight: 400; color: #000; line-height: 1.5; padding: 22px 0 21px;}
.benefits_table td .conditions b {color: #357e6b; font-weight: 700;}

.benefits_table tr.mileage {padding-top: 20px;}
.benefits_table tr.mileage th {padding-top: 30px;}
.benefits_table td .mileage {display: block; text-align: center; font-size: 16px; font-weight: 400; color: #000; line-height: 1.3; padding: 40px 0 10px;}
.benefits_table td .mileage span {font-size: 24px; font-weight: 700; color: #357e6b;}

.benefits_table tr.join_mileage th,
.benefits_table tr.join_mileage td {padding-bottom: 20px;}

.benefits_table tr.benefits th,
.benefits_table tr.benefits td {padding-top: 20px;}
.benefits_table tr.benefits th {border-top: 1px solid #e1e1e1;}
.benefits_table tr.benefits td {border-top: 1px solid #e1e1e1;}
.benefits_table td .benefit {padding: 14px 0;text-align: center;font-weight: 400;font-size: 14px;color: #000;line-height: 1.5;}
.benefits_table td .benefit .bar {display: inline-block; width: 12px; height: 1px; background: #6b6b6b; line-height: 1; vertical-align: middle; font-size: 0;}

.benefits_table td .coupon {position: relative; display: inline-flex; align-items: center; justify-content: center; width: 150px; height: 80px; background: url(../../../assets/img/benefits/coupon.png)no-repeat center / 100%; line-height: 1; font-size: 14px; font-weight: 400; color: #000; text-align: center;}
.benefits_table td .coupon span {display: block; line-height: 1; font-size: 24px; font-weight: 700; color: #357e6b; margin-bottom: 8px;}  

/* .benefits_table th .birthday {padding: 0 0 28px 0;} */
.benefits_table td .birthday {text-align: center; /* padding: 34px 0 33px */ padding: 34px 0 21px}

.benefits_table tr.your_grade td.on {border-top-color: #357e6b;}
.benefits_table .now {position: absolute;z-index: -1;height: 100%;border: 1px solid #336666;top: -1px; display: none;}
.benefits_table .now > span {position: absolute; left: -1px; top: -55px; display: flex; align-items: center; justify-content: center; line-height: 1; width: calc(100% + 2px); height: 55px; background: #357e6b; border-radius: 10px 10px 0 0; font-size: 18px; font-weight: 700; color: #fff;}
.benefits_table td.on .now {display: block;}

/* 하단 유의사항 안내 텍스트 */
/* .benefits .bottom_info_text {position: relative; display: block; width: 100%; height: auto; margin-top: 60px;}
.benefits .bottom_info_text h4 {display: flex; align-items: center; line-height: 1; font-size: 18px; font-weight: 700; color: #000;}
.benefits .bottom_info_text h4 img {display: block; margin-right: 7px;}
.benefits .bottom_info_text .text {display: block; font-size: 14px; font-weight: 400; color: #000; line-height: 1.857; margin-top: 19px;}
.benefits .bottom_info_text .text p {position: relative; padding-left: 6px;}
.benefits .bottom_info_text .text p:before {content: ""; display: block; width: 2px; height: 2px; background: #636363; position: absolute; left: 0; top: 10px;}
.benefits .bottom_info_text .text p + p {margin-top: 7px;} */

.bottom_info_text {position: relative; display: block; width: 100%; height: auto; padding: 0 0 5px 0;}
.btn_bene_info {padding: 0 25px 0 1px; margin: 0; 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: 100%; height: 61px; margin-top: 100px;}
.btn_bene_info.active > img {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: fit-content; margin-right: 8px;}
.btn_bene_info > div strong {font-size: 18px; font-weight: 700; color: #000; }
.btn_bene_info > img {transition: all 0.2s;}

.bottom_info_text .inner {line-height: 1.4; display: block; position: relative; padding-top: 31px;}
.bottom_info_text .inner .block {}
.bottom_info_text .inner .block + .block {margin-top: 28px;}
.bottom_info_text .inner .block h4 {display: block; font-size: 16px; font-weight: 700; letter-spacing: -0.025em; color: #3c3c3c;}
.bottom_info_text .inner .block p {position: relative; display: block; font-size: 16px; font-weight: 500; letter-spacing: -0.025em; color: #3c3c3c; word-break: keep-all; padding-left: 12px;}
.bottom_info_text .inner .block p::before {content: "";position: absolute;left: 0;top: 8px;display: block;width: 4px;height: 4px;background: #3c3c3c;border-radius: 50%;}