@charset "UTF-8";

/* ----- 가전 구독 전체 공통 (서비스 안내, 혜택 안내, 영상 가이드) ----- */
/* 페이지 */
.care-subscription { overflow: hidden; width: 100%; box-sizing: border-box; }
@media screen and (max-width: 767px) {
  .care-subscription { padding-top: 0px; }
}

/* 헤더 메뉴 */
.care-subscription .care-subcp-header-wrap{ --subcp-header-height: 48px; position: relative; width: 100%; height: var(--subcp-header-height); }
.care-subscription .care-subcp-header-menu{ position: absolute; top: 0; left: 0; width: 100%; height: var(--subcp-header-height); }
.care-subscription .care-subcp-header-menu ul { display: flex; justify-content: center; height: 100%; } 
.care-subscription .care-subcp-header-menu ul li { height: 100%; }
.care-subscription .care-subcp-header-menu ul li a { display: flex; align-items: center; justify-content: center; width: 140px; height: 100%; text-decoration: none; font-size: 16px; font-weight: 600; color: #666; border-top: 2px solid transparent; text-align: center; } 
.care-subscription .care-subcp-header-menu ul li.on a { color: #E21024; border-color: #E21024; } 
.care-subscription .care-subcp-header-menu.on{ position: fixed; z-index: 30; }
@media screen and (max-width: 767px){
  .care-subscription .care-subcp-header-wrap{ --subcp-header-height: 40px; }
  .care-subscription .care-subcp-header-menu ul li { width: 100%; } 
  .care-subscription .care-subcp-header-menu ul li a { width: 100%; font-size: 14px; } 
  .header.helloBar~.container .care-subscription .care-subcp-header-menu.on{ top: calc(42px + 46px) }
}


/* ----- 가전 구독 service 공통 (서비스 안내, 혜택 안내) ----- */
/* common */
.service * { /*font-family: "Pretendard Variable", "Pretendard", sans-serif;*/ line-height: 1.4; letter-spacing: -0.02em; word-break: keep-all; } 
@keyframes floating-up { 
  0% { transform: translate3d(0, 0, 0); } 
  50% { transform: translate3d(0, -10px, 0); } 
  100% { transform: translate3d(0, 0, 0); } 
}
@keyframes floating-down { 
  0% { transform: translate3d(0, 0, 0); } 
  50% { transform: translate3d(0, 10px, 0); } 
  100% { transform: translate3d(0, 0, 0); } 
}
.tbl-scroll-m{width:100%;}
.tbl-type1{width:100%;border-collapse:collapse;margin:8px 0;font-size:12px;background:#fff}
.tbl-type1 td,
.tbl-type1 th{border-left:1px solid #cfcfcf;border-right: none;padding:10px;text-align:center;color:#3e3e3e;}
.tbl-type1 td:first-child,
.tbl-type1 th:first-child{border-left: none}
.tbl-type1 th{border-top: 1px solid #3e3e3e;;background-color:#e6e6e6;font-weight:600;}
.tbl-type1 td{border-top:1px solid #cfcfcf;border-bottom:1px solid #cfcfcf;}
.tbl-type1 td:focus,
.tbl-type1 th:focus,
.tbl-type1 tr:focus-within{outline:#E21024 solid 2px;outline-offset:-2px}
@media screen and (max-width:767px){
  .tbl-scroll-m{min-width:227px;overflow-x:auto;}
  .tbl-type1{font-size:14px}
  .tbl-type1 td,
  .tbl-type1 th{padding:8px}
}

/* common - swiper */
.service .swiper, 
.service .swiper-container { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1; display: block; } 
.service .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial); box-sizing: content-box; } 
.service .swiper-slide { flex-shrink: 0; width: 100%; height: 100%; position: relative; transition-property: transform; display: block; } 
.service .swiper-button-prev, 
.service .swiper-button-next { cursor: pointer; display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; width: 32px; height: 46px; background: #fff; border-radius: 8px; transition: opacity .3s; } 
.service .swiper-button-prev{ left: 0; } 
.service .swiper-button-next{ right: 0; } 
.service .swiper-button-prev::after, 
.service .swiper-button-next::after { position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border-top: 2px solid #424242; border-right: 2px solid #424242; } 
.service .swiper-button-prev::after { content: ""; font-size: 0; transform: translate(-25%, -50%) rotate(-135deg); } 
.service .swiper-button-next::after { content: ""; font-size: 0; transform: translate(-75%, -50%) rotate(45deg); } 
.service .swiper-button-disabled{ visibility: hidden; pointer-events: none; opacity: 0; }
.service .swiper-button-prev:focus-visible, 
.service .swiper-button-next:focus-visible{ outline: 2px solid -webkit-focus-ring-color; }
.service .swiper-pagination { position: absolute; text-align: center; transition: 0.3s opacity; transform: translate3d(0, 0, 0); z-index: 10; } 
.service .swiper-pagination-bullet { position: relative;display: inline-block;width: 18px;height: 18px;margin: 0 !important;opacity: 1;background: none;} 
.service .swiper-pagination-bullet::after{content: '';position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);display: inline-block;width: 10px;height: 10px;background: #8f8f8f;border-radius: 50%;}
.service .swiper-pagination-bullet-active{width: 32px;}
.service .swiper-pagination-bullet:focus-visible{ outline: 2px solid -webkit-focus-ring-color; }
.service .swiper-pagination-bullet-active::after{content:"";width: 24px; border-radius: 20px; background-color: #000;}
.service #step .swiper-pagination-bullet::after, .service #product .swiper-pagination-bullet::after{display: none;}
.service .swiper-notification{ position: absolute; width: 1px; height: 1px; font-size: 1px; pointer-events: none; opacity: 0; }
.service .navi-wrap{ display: inline-block; position: relative; padding: 0 calc(12px + 32px); } 
.service .navi-wrap .swiper-button-prev, 
.service .navi-wrap .swiper-button-next { top: 0; transform: translate3d(0, 0, 0); border: 1px solid #E5E5E5; }
.service .navi-wrap .swiper-button-prev{ left: 0; }
.service .navi-wrap .swiper-button-next{ right: 0; }
.service .navi-wrap .swiper-button-prev::after, 
.service .navi-wrap .swiper-button-next::after{ border-color: #8C8C8C; }
.service .navi-wrap .swiper-pagination { position: unset; }
.service .navi-wrap .swiper-pagination-bullet { width: 40px; height: 46px; margin: 0 2px; background: transparent; border-radius: 8px; opacity: 1; font-size: 20px; font-weight: 500; color: #8C8C8C;  }
.service .navi-wrap .swiper-pagination-bullet-active { background-color: #515151; color: #fff; }
.service .navi-wrap .swiper-pagination-bullet-active:focus { outline-offset: -4px; }
.service .swiper-container-autoheight, .service .swiper-container-autoheight .swiper-slide {height: auto}
.service .swiper-container-autoheight .swiper-wrapper {
  padding-bottom:1px;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-transition-property: height,-webkit-transform;
  transition-property: height,-webkit-transform;
  -o-transition-property: transform,height;
  transition-property: transform,height;
  transition-property: transform,height,-webkit-transform
}
@media screen and (max-width: 767px){ 
  .service .swiper-button-prev, 
  .service .swiper-button-next { width: 24px; height: 35px; border-radius: 6px; } 
  .service .swiper-button-prev::after, 
  .service .swiper-button-next::after { width: 8px; height: 8px; } 
  .service .navi-wrap{ padding: 0 calc(3px + 24px); }
  .service .navi-wrap .swiper-pagination-bullet{ width: 30px; height: 35px; margin: 0 3px; border-radius: 6px; font-size: 16px; }
}

/* common - area (service만) */
.service section { position: relative; padding: 140px 0; } 
.service .inwrap { width: 100%; max-width: 1760px; height: 100%; margin: 0 auto; padding: 0 40px; } 
.service .heading { margin-bottom: 80px; text-align: center; } 
.service .heading .eyebrow { margin-bottom: 12px; font-size: 24px; font-weight: 700; color: #E21024; } 
.service .heading .title { font-size: 40px; font-weight: 700; } 
.service .heading .head-text{margin-top:8px;color:#767676;font-size:24px;line-height:1.4;letter-spacing: -0.2px;}
.service img { display: inline-block; max-width: 100%; } 
.service video { display: block; max-width: 100%; margin: 0; padding: 0; border: none; outline: none; } 
.service a, 
.service button { cursor: pointer; } 
.service .btn{ border: 0; }
@media screen and (max-width: 767px){
  .service section { padding: 100px 0; } 
  .service .inwrap { padding: 0 14px; } 
  .service .heading { margin-bottom: 40px; } 
  .service .heading .eyebrow { margin-bottom: 8px; font-size: 16px; } 
  .service .heading .title { font-size: 24px; } 
  .service .heading .head-text{margin-top:6px;font-size:16px;}
}

/* ----- 가전 구독 service 공통 섹션 (서비스 안내, 혜택 안내) ----- */
/* KV */
.service .care-subcp-kv { position: relative; padding: 0; } 
.service .care-subcp-kv img{ width: 100%; }
.service .care-subcp-kv video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } 
.service .care-subcp-kv .btn-video{ position: absolute; left: 120px; bottom: 48px; width: 40px; height: 40px; }
.service .care-subcp-kv .btn-video[data-state="pause"]{ background: url(/kr/caresolutions/images/kv-video-btn-play.svg) no-repeat center center / 100% 100%; }
.service .care-subcp-kv .btn-video[data-state="play"]{ background: url(/kr/caresolutions/images/kv-video-btn-pause.svg) no-repeat center center / 100% 100%; }
@media screen and (max-width: 767px) {
  .service .care-subcp-kv .btn-video{ left: 16px; bottom: 18px; width: 32px; height: 32px; }
}

/* 가전 구독 상품 */
.service .care-subcp-product { padding-bottom: 154px; background: #F6F6F6; }
.service .care-subcp-product .heading{ margin-bottom: 34px; }
.service .care-subcp-product .content .product-tab ul { display: flex; flex-wrap: wrap; justify-content: center; row-gap: 16px; column-gap: 12px; max-width: 834px; margin: 0 auto; }
.service .care-subcp-product .content .product-tab ul li button { display: block; padding: 8px 20px; border-radius: 100px; border: 1px solid #D3D3D3; background: transparent; font-size: 16px; font-weight: 500; color: #191919; }
.service .care-subcp-product .content .product-tab ul li.active button { background-color: #191919; color: #fff; font-weight: 700; }
.service .care-subcp-product .content .product-tab ul li.active button:focus { outline-offset: -4px; }
.service .care-subcp-product .content .product-list { position: relative; margin-top: 40px; }
.service .care-subcp-product .content .product-list .product-item { display: flex; flex-direction: column; position: relative; width: calc(832px + 32px*2 + 40px*2 + 8px*2); max-width: 100%; margin: 0 auto; }
.service .care-subcp-product .content .product-list .product-item:not(.active) { position: absolute; top: 0; pointer-events: none; visibility: hidden; opacity: 0; }
.service .care-subcp-product .content .product-list .product-item .swiper { overflow: visible; width: 832px; max-width: 100%; height: 416px; }
.service .care-subcp-product .content .product-list .product-item .swiper-slide a { display: flex; width: 100%; height: 100%; border-radius: 20px; background-color: #fff; }
.service .care-subcp-product .content .product-list .product-item .swiper-slide .image { display: flex; justify-content: center; align-items: center; width: 50%; padding: 33px; }
.service .care-subcp-product .content .product-list .product-item .swiper-slide .image img { width: 100%; }
.service .care-subcp-product .content .product-list .product-item .swiper-slide .texts { display: flex; flex-direction: column; justify-content: space-between; width: 50%; padding: 32px 40px; border-left: 1px solid #E3E3E3; }
.service .care-subcp-product .content .product-list .product-item .swiper-slide .texts .tit .name { font-size: 26px; font-weight: 700; color: #303030; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-height: 2.8em; line-height: 1.4; white-space: normal; }
.service .care-subcp-product .content .product-list .product-item .swiper-slide .texts .tit .code { display: block; margin-top: 4px; font-size: 16px; font-weight: 500; color: #8E8E8E; }
.service .care-subcp-product .content .product-list .product-item .swiper-slide .texts .price .month { font-size: 26px; font-weight: 700; color: #303030; }
.service .care-subcp-product .content .product-list .product-item .swiper-slide .texts .price .month .rate { margin-right: 4px; color: #EA1916; }
.service .care-subcp-product .content .product-list .product-item .swiper-slide .texts .price .max-benefit { margin-top: 6px; font-size: 20px; font-weight: 700; color: #EA1916; }
.service .care-subcp-product .content .product-list .product-item .swiper-slide .texts .price .standard { margin-bottom: 6px; font-size: 20px; color: #727780; text-decoration: line-through; }
.service .care-subcp-product .content .product-list .product-item .navi-wrap{ margin: 20px auto 0; } 
.service .care-subcp-product .content .product-list .product-item .btn-wrap { display: flex; justify-content: center; gap: 16px; margin-top: 30px; }
.service .care-subcp-product .content .product-list .product-item .btn-wrap .btn { display: flex; justify-content: center; align-items: center; width: 408px; height: 64px; background-color: #2D2D2D; border-radius: 16px; font-size: 20px; font-weight: 600; color: #fff; letter-spacing: -0.04em; text-decoration: none; }
.service .care-subcp-product .content .product-list .product-item .btn-wrap .btn-more { background-color: #E21024; }
.service .care-subcp-product .content .product-list .product-item .btn-wrap .btn-custom:focus { outline-offset: -4px; }
@media screen and (max-width: 767px){
  .service .care-subcp-product { padding: 60px 0; }
  .service .care-subcp-product .heading { margin-bottom: 24px; }
  .service .care-subcp-product .content .product-tab{ overflow-x: auto; justify-content: unset; -ms-overflow-style: none; scrollbar-width: none; }
  .service .care-subcp-product .content .product-tab:-webkit-scrollbar { display: none; }
  .service .care-subcp-product .content .product-tab ul { display: inline-flex; flex-wrap: nowrap; justify-content: flex-start; gap: 6px; }
  .service .care-subcp-product .content .product-list { margin-top: 24px; }
  .service .care-subcp-product .content .product-list .product-item .swiper { width: 248px; height: auto; }
  .service .care-subcp-product .content .product-list .product-item .swiper-slide{ height: auto; }
  .service .care-subcp-product .content .product-list .product-item .swiper-slide a { flex-direction: column; border-radius: 16px; }
  .service .care-subcp-product .content .product-list .product-item .swiper-slide .image { width: 100%; }
  .service .care-subcp-product .content .product-list .product-item .swiper-slide .texts { width: 100%; height: 100%; justify-content: space-between; padding: 26px 24px; border-top: 1px solid #E3E3E3; border-left: 0; }
  .service .care-subcp-product .content .product-list .product-item .swiper-slide .texts .tit .name { font-size: 18px; }
  .service .care-subcp-product .content .product-list .product-item .swiper-slide .texts .tit .code { font-size: 12px; }
  .service .care-subcp-product .content .product-list .product-item .swiper-slide .texts .price { margin-top: 16px; }
  .service .care-subcp-product .content .product-list .product-item .swiper-slide .texts .price .month { font-size: 18px; }
  .service .care-subcp-product .content .product-list .product-item .swiper-slide .texts .price .month .rate { margin-right: 2px; }
  .service .care-subcp-product .content .product-list .product-item .swiper-slide .texts .price .max-benefit { margin-top: 2px; font-size: 14px; }
  .service .care-subcp-product .content .product-list .product-item .swiper-slide .texts .price .standard { margin-bottom: 2px; font-size: 14px; }
  .service .care-subcp-product .content .product-list .product-item .btn-wrap { flex-direction: column; align-items: center; gap: 8px; margin-top: 30px; }
  .service .care-subcp-product .content .product-list .product-item .btn-wrap .btn { width: 248px; height: 54px; font-size: 16px; border-radius: 16px; }
}

/* 배너 영역 */
.service .care-subcp-banner{ padding: 100px 0 120px; }
.service .care-subcp-banner .inwrap { display: flex; justify-content: center; gap: 16px; }
.service .care-subcp-banner .banner { position: relative; z-index: 1; width: 550px; max-width: 100%; min-height: 197px; padding: 40px 50px; background-color: #F6F2EB; border-radius: 16px; text-decoration: none; text-align: left; }
.service .care-subcp-banner .banner .texts { display: flex; flex-direction: column; justify-content: space-between; width: 100%; height: 100%; }
.service .care-subcp-banner .banner .texts .tit { display: block; font-size: 26px; font-weight: 600; color: #000; }
.service .care-subcp-banner .banner .texts .txt { display: block; margin-top: 20px; font-size: 16px; font-weight: 400; color: #5D574B; }
.service .care-subcp-banner .banner .texts .icon-btn { flex: none; display: inline-block; position: relative; vertical-align: middle; width: 32px; height: 32px; margin-left: 12px; background: #fff; border-radius: 50%; font-size: 0; text-indent: -9999px; }
.service .care-subcp-banner .banner .texts .icon-btn::after { content: ""; position: absolute; top: 50%; left: 45%; transform: translate3d(-50%, -50%, 0) rotate(-45deg); width: 10px; height: 10px; border-right: 2px solid #8C8C8C; border-bottom: 2px solid #8C8C8C; }
.service .care-subcp-banner .banner .image { display: block; position: absolute; top: 20px; right: 20px; z-index: -1; width: 130px; }
@media (max-width: 1080px){
  .service .care-subcp-banner .inwrap { flex-direction: column; align-items: center; }
}
@media screen and (max-width: 767px){
  .service .care-subcp-banner .inwrap{ gap: 18px; }
  .service .care-subcp-banner .banner { min-height: unset; padding: 30px 26px; }
  .service .care-subcp-banner .banner .texts .tit { font-size: 20px; }
  .service .care-subcp-banner .banner .texts .txt { margin-top: 6px; font-size: 14px; }
  .service .care-subcp-banner .banner .texts .icon-btn { width: 24px; height: 24px; margin-left: 10px; margin-top: -2px; }
  .service .care-subcp-banner .banner .texts .icon-btn::after{ width: 7px; height: 7px; }
  .service .care-subcp-banner .banner .image { top: -30px; right: 8px; width: 120px; }
}



/* ----- 서비스 소개 페이지 ----- */
/* 혜택 안내 */
.introduction .care-service-benefit .content ul { display: flex; flex-wrap: wrap; row-gap: 23px; column-gap: 16px; }
.introduction .care-service-benefit .content li { overflow: hidden; position: relative; width: calc((100% - 32px) / 3); height: 320px; /* aspect-ratio: 1/0.56; */ padding: 40px 44px; border-radius: 16px; }
.introduction .care-service-benefit .content li::before, .care-subscription .care-service-benefit .content li::after { content: ""; position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; transition: opacity 0.3s ease-out; }
.introduction .care-service-benefit .content li::before { background: #F6F6F6; }
.introduction .care-service-benefit .content li::after { opacity: 0; background: linear-gradient(300.99deg, #FFBFC4 -59.81%, #FFE5E4 78.16%); }
.introduction .care-service-benefit .content li .texts .tit { margin-bottom: 10px; font-size: 30px; font-weight: 600; }
.introduction .care-service-benefit .content li .texts .txt { max-width: 285px; font-size: 16px; font-weight: 400; color: #6D6D6D; line-height: 1.5; transition: color 0.3s ease-out; }
.introduction .care-service-benefit .content li .texts .txt span { display: inline-block; margin-top: 6px; font: inherit; font-size: 14px; }
.introduction .care-service-benefit .content li .image { position: absolute; bottom: 20px; right: 20px; width: 27%; max-width: 150px; }
.introduction .care-service-benefit .content li .image::after { content: ""; display: block; position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); width: 66%; height: 16px; background-color: #D9D9D9; border-radius: 50%; transition: background-color 0.3s ease-out; }
.introduction .care-service-benefit .content li .image img { display: block; position: relative; z-index: 1; width: 100%; animation: floating-up 2.5s ease-out infinite; }
.introduction .care-service-benefit .content li:nth-child(2n) .image img { animation-delay: 0.35s; }
.introduction .care-service-benefit .content li:nth-child(2) .image img { animation: floating-down 2.5s .15s ease-out infinite; }
.introduction .care-service-benefit .content li:nth-child(3n) .image img { animation-delay: 0.25s; }
.introduction .care-service-benefit .content li:nth-child(4) .image img { animation: floating-down 2.5s 0.05s ease-out infinite; }
.introduction .care-service-benefit .content li.active::before{ opacity: 0; }
.introduction .care-service-benefit .content li.active::after{ opacity: 1; }
.introduction .care-service-benefit .content li.active .texts .txt{ color: #4C4343; }
.introduction .care-service-benefit .content li.active .image::after{ background-color: #EDBFC1; }
@media (hover: hover) {
  .introduction .care-service-benefit .content li:hover::before { opacity: 0; }
  .introduction .care-service-benefit .content li:hover::after { opacity: 1; }
  .introduction .care-service-benefit .content li:hover .texts .txt { color: #4C4343; }
  .introduction .care-service-benefit .content li:hover .image::after { background-color: #EDBFC1; }
}
@media screen and (max-width: 1440px) and (min-width: 1201px){
  .introduction .care-service-benefit .content li { padding: 30px; }
  .introduction .care-service-benefit .content li:nth-child(4),
  .introduction .care-service-benefit .content li:nth-child(5),
  .introduction .care-service-benefit .content li:nth-child(6){ height: 340px; }
}
@media screen and (max-width: 1200px) and (min-width: 768px){
  .introduction .care-service-benefit .content li { width: calc((100% - 16px) / 2); padding: 30px; }
  .introduction .care-service-benefit .content li:nth-child(5),
  .introduction .care-service-benefit .content li:nth-child(6){ height: 360px; }
}
@media screen and (max-width: 767px){
  .introduction .care-service-benefit { padding: 80px 0; }
  .introduction .care-service-benefit .content ul { flex-direction: column; row-gap: 12px; column-gap: 0; }
  .introduction .care-service-benefit .content li { width: 100%; max-width: 332px; min-height: 320px; height: auto; margin: 0 auto; padding: 30px 30px 140px; }
  .introduction .care-service-benefit .content li .texts .tit { font-size: 22px; }
  .introduction .care-service-benefit .content li .image { bottom: 20px; right: 20px; width: 120px; }
  .introduction .care-service-benefit .content li .image::after { height: 12px; }
}

/* 서비스 안내 > 굿독 */
.introduction .care-service-gooddog{background-color: #F6F6F6;}
.introduction .care-service-gooddog .content{position: relative;}
.introduction .care-service-gooddog .content .box{ border-radius: 20px; background-color: #fff; overflow: hidden;}
.introduction .care-service-gooddog .content .box img{width: 100%;}
.introduction .care-service-gooddog .content .box .tits{padding: 24px;}
.introduction .care-service-gooddog .content .box .title{font-size: 22px; font-weight: 600; line-height: 1.5;}
.introduction .care-service-gooddog .content .box .tit{font-size: 18px; line-height: 1.5;margin-top: 6px;}
.introduction .care-service-gooddog .content .box .text{display: inline-block; margin-top: 12px; font-size: 14px; display: flex;align-items: center; color: #767676; line-height: 1.5;}
.introduction .care-service-gooddog .content .box .text::after{content: ""; display: inline-block; background: url("/kr/caresolutions/images/next-link-arrow.svg") no-repeat center; width: 14px;height: 14px;}

.introduction .care-service-gooddog .swiper{max-width: calc(100% - 30px);}
.introduction .care-service-gooddog .swiper-slide{width: calc(100% / 5);}
.introduction .care-service-gooddog .swiper-pagination:has(.swiper-pagination-bullet:only-child){display: none;}
.introduction .care-service-gooddog .swiper-pagination{position: relative;display: flex;column-gap: 12px; justify-content: center; margin-top: 40px; align-items: center;}

@media screen and (max-width: 767px){
  .introduction .care-service-gooddog{padding:60px 0;margin: 20px auto 80px; overflow: hidden;}
  .introduction .care-service-gooddog .content .box{border-radius: 8px;}
  .introduction .care-service-gooddog .content .box .tit{font-size: 16px;}
  .introduction .care-service-gooddog .content .box .text{font-size: 12px;}

  .introduction .care-service-gooddog .swiper{max-width: calc(100% - 40px); overflow: inherit;}
  .introduction .care-service-gooddog .swiper-slide{width: 100%;}
  .introduction .care-service-gooddog .swiper-pagination{column-gap: 0px;margin-top: 24px;}

  .service #step .swiper-pagination-bullet::after{display: block;}
}


/* 구독 프로세스 */
.introduction .care-service-step .content { --current-slide-index: 1; display: flex; align-items: flex-start; gap: 40px; position: relative; }
.introduction .care-service-step .content .slider { overflow: hidden; position: relative; width: calc(75% - 20px); max-width: calc(100% - 300px - 40px); border-radius: 16px; background: #F6F6F6; padding: 80px 40px 0; }
.introduction .care-service-step .content .slider .slide-text { overflow: hidden; position: relative; margin-bottom: calc(80px - 18px); }
.introduction .care-service-step .content .slider .slide-text .wrap{ transform: translate3d(0, calc(var(--slide-text-height) * calc(var(--current-slide-index) - 1) * -1), 0); transition: transform .5s ease-out; }
.introduction .care-service-step .content .slider .slide-text p{ display: flex; align-items: center; justify-content: center; height: var(--slide-text-height); }
.introduction .care-service-step .content .slider .slide-text p { /* position: absolute; top: 0; left: 0; */ width: 100%; font-size: 30px; font-weight: 600; text-align: center; /* opacity: 0; transform: translate3d(0, 100%, 0); transition: transform 0.5s ease-out; */ }
/* .introduction .care-service-step .content .slider .slide-text li.active { opacity: 1; position: relative; transform: translate3d(0, 0, 0); }
.introduction .care-service-step .content .slider .slide-text li.prev { opacity: 1; transform: translate3d(0, -100%, 0); } */
.introduction .care-service-step .content .slide { position: relative; width: 400px; max-width: 60%; margin: 0 auto; }
.introduction .care-service-step .content .slide::after { content: ""; position: absolute; top: 0; left: 70%; width: 90%; height: 100%; background: url("/kr/caresolutions/images/care-service-step-phone-bg.svg") no-repeat center center/cover; }
.introduction .care-service-step .content .swiper { width: 100%; box-sizing: content-box; border: 18px solid #3E3E3E; border-bottom: 0; border-radius: 32px 32px 0 0; margin-left: -18px; }
.introduction .care-service-step .content .swiper-slide { width: 100%; height: auto; border-radius: 16px 16px 0 0; }
.introduction .care-service-step .content .swiper-slide .texts { position: absolute; bottom: 100%; }
.introduction .care-service-step .content .swiper-slide .image { position: relative; z-index: 1; }
.introduction .care-service-step .content .swiper-button-prev { left: min(8%, 80px); z-index: 3; }
.introduction .care-service-step .content .swiper-button-next { right: min(8%, 80px); z-index: 3; }
@media (min-width: 768px){
  .introduction .care-service-step{ padding-bottom: 200px; }
  .introduction .care-service-step .content .swiper-slide .texts{ display: none; }
  .introduction .care-service-step .content .swiper-pagination { --bullet-height: 70px; display: flex; flex-direction: column; position: relative; width: calc(25% - 20px); min-width: 300px; background-color: #F6F6F6; }
  .introduction .care-service-step .content .swiper-pagination::before { content: ""; position: absolute; top: 0; left: calc(100% + 20px); border-style: solid; border-width: 20px 20px 20px 0px; border-color: transparent #F6F6F6 transparent transparent; transform: translateY(calc(70px * var(--current-slide-index) + 10px * (var(--current-slide-index) - 1) - 35px - 20px)); transition: transform 0.3s ease-in-out; }
  .introduction .care-service-step .content .swiper-pagination::after { content: ""; position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: var(--bullet-height); border-radius: 8px; background-color: #E21024; transform: translate3d(0, calc((var(--bullet-height) + 10px) * (var(--current-slide-index) - 1)), 0); transition: transform 0.3s ease-in-out; }
  .introduction .care-service-step .content .swiper-pagination-bullet { overflow: hidden; position: relative; width: 100%; height: var(--bullet-height); background-color: transparent; border-radius: 0; opacity: 1; font-size: 24px; font-weight: 600; color: #6A6A6A; text-align: left; border-bottom: 10px solid #fff; box-sizing: content-box; }
  .introduction .care-service-step .content .swiper-pagination-bullet > .inner { display: flex; width: 100%; height: 100%; margin: -2px; border: 2px solid #fff; border-radius: 8px; box-sizing: content-box; }
  .introduction .care-service-step .content .swiper-pagination-bullet .num { flex: none; display: flex; justify-content: center; align-items: center; position: relative; width: var(--bullet-height); height: var(--bullet-height); font: inherit; color: inherit; transition: color 0.3s ease-in-out; }
  .introduction .care-service-step .content .swiper-pagination-bullet .num::before,
  .introduction .care-service-step .content .swiper-pagination-bullet .num::after{ content: ""; position: absolute; top: 0; right: 0; width: 1px; height: 100%; transition: opacity 0.3s; }
  .introduction .care-service-step .content .swiper-pagination-bullet .num::before{ background: linear-gradient(to bottom, #B5B5B5 5.5px, transparent 5.5px, transparent 11px); background-size: 100% 11px; background-position: 0 -1px; }
  .introduction .care-service-step .content .swiper-pagination-bullet .num::after { background: linear-gradient(to bottom, #ffffff 5.5px, transparent 5.5px, transparent 11px); background-size: 100% 11px; background-position: 0 -1px; opacity: 0; }
  .introduction .care-service-step .content .swiper-pagination-bullet .txt { display: flex; align-items: center; padding: 0 24px; font: inherit; color: inherit; transition: color 0.3s ease-in-out; }
  .introduction .care-service-step .content .swiper-pagination-bullet-active { color: #fff; }
  .introduction .care-service-step .content .swiper-pagination-bullet-active .num::after{ opacity: 1; transition: opacity 0.3s .1s;  }
}
@media (max-width: 1080px){
  .introduction .care-service-step .content { flex-direction: column; }
  .introduction .care-service-step .content .slider { width: 100%; max-width: 100%; }
  .introduction .care-service-step .content .swiper-pagination { width: 100%; }
}
@media screen and (max-width: 767px){
  .introduction .care-service-step { padding-top: 20px; }
  .introduction .care-service-step .heading { margin-bottom: 26px; }
  .introduction .care-service-step .content .slider { overflow: visible; padding: 0; }
  .introduction .care-service-step .content .slider .slide-text { display: none; }
  .introduction .care-service-step .content .slide { width: 100%; max-width: 100%; }
  .introduction .care-service-step .content .slide::after { display: none; }
  .introduction .care-service-step .content .swiper { border: none; border-radius: 0; margin-left: 0; }
  .introduction .care-service-step .content .swiper-slide { display: flex; flex-direction: column; justify-content: space-between; padding: 34px 36px 0; }
  .introduction .care-service-step .content .swiper-slide .texts { position: unset; width: 218px; max-width: 100%; margin: 0 auto 40px; text-align: center; }
  .introduction .care-service-step .content .swiper-slide .texts .num { display: inline-flex; justify-content: center; align-items: center; width: 20px; height: 20px; margin-bottom: 10px; border-radius: 4px; background-color: #E21024; font-size: 14px; font-weight: 600; color: #fff; }
  .introduction .care-service-step .content .swiper-slide .texts .tit { margin-bottom: 4px; font-size: 20px; font-weight: 600; }
  .introduction .care-service-step .content .swiper-slide .texts .txt { font-size: 14px; color: #6F6F6F; }
  .introduction .care-service-step .content .swiper-slide .image { overflow: hidden; position: relative; left: 50%; transform: translateX(-50%); width: 260px; max-width: 100%; height: 321px; border: 11px solid #3E3E3E; border-bottom: 0; border-radius: 32px 32px 0 0; box-sizing: content-box; }
  .introduction .care-service-step .content .swiper-slide .image img{ width: 100%; height: 100%; object-fit: cover; object-position: top; }
  .introduction .care-service-step .content .swiper-button-prev { margin-top: 0; top: 76px; left: auto; right: calc(50% + 128px); }
  .introduction .care-service-step .content .swiper-button-next { margin-top: 0; top: 76px; right: auto; left: calc(50% + 128px); }
  .introduction .care-service-step .content .swiper-pagination { bottom: -32px; left: 50%; transform: translateX(-50%); }
}



/* ----- 혜택 안내 페이지 ----- */
/* 혜택 안내 */
.benefits .care-benefit-info{ padding-bottom: 0; }
.benefits .care-benefit-info:has(.care-benefit-banner) .heading{margin-bottom: 54px;}
.benefits .care-benefit-banner { display: flex; justify-content: center; margin-bottom: 74px; }
.benefits .care-benefit-banner .banner { position: relative; z-index: 1; width: calc(100% - 40px); max-width: 1116px; min-height: 180px; padding: 46px 50px; background-color: #ffe5e4; border-radius: 16px; text-decoration: none; text-align: left; }
.benefits .care-benefit-banner .banner .texts { display: flex; flex-direction: column; justify-content: space-between; width: 100%; height: 100%; }
.benefits .care-benefit-banner .banner .texts .tit { display: block; font-size: 26px; font-weight: 600; color: #000; }
.benefits .care-benefit-banner .banner .texts .txt { display: block; margin-top: 20px; font-size: 16px; font-weight: 400; color: #5D574B; }
.benefits .care-benefit-banner .banner .texts .icon-btn { flex: none; display: inline-block; position: relative; vertical-align: middle; width: 32px; height: 32px; margin-left: 12px; background: #fff; border-radius: 50%; font-size: 0; text-indent: -9999px; }
.benefits .care-benefit-banner .banner .texts .icon-btn::after { content: ""; position: absolute; top: 50%; left: 45%; transform: translate3d(-50%, -50%, 0) rotate(-45deg); width: 10px; height: 10px; border-right: 2px solid #8C8C8C; border-bottom: 2px solid #8C8C8C; }
.benefits .care-benefit-banner .banner .image { display: block; position: absolute; top: 24px; right: 50px; z-index: -1; width: 154px; }
.benefits .care-benefit-info .content{ display: flex; flex-direction: column; gap: 40px; }
.benefits .care-benefit-info .benefit-list{ position: relative; margin-top: 54px; padding: 50px 0 70px; background-color: #F6F6F6; }
.benefits .care-benefit-info .benefit-list .inwrap{ display: flex; gap: 16px; width: 1196px; max-width: 100%; }
.benefits .care-benefit-info .benefit-list .list-title{ display: flex; align-items: center; justify-content: center; position: absolute; bottom: 100%; left: 50%; transform: translate3d(-50%, 0, 0); width: 550px; height: 54px; background-color: #F6F6F6; border-radius: 16px 16px 0 0; font-size: 20px; font-weight: 700; }
.benefits .care-benefit-info .benefit-list .item{ width: 100%; }
.benefits .care-benefit-info .benefit-list .item .item-title{ display: flex; justify-content: center; align-items: center; height: 54px; margin-bottom: 10px; background-color: #555; border-radius: 8px; font-size: 18px; font-weight: 700; color: #fff; }
.benefits .care-benefit-info .benefit-list .item ul{ display: flex; flex-direction: column; gap: 10px; width: 100%; }
.benefits .care-benefit-info .benefit-list .item ul li button{ display: flex; position: relative; align-items: stretch; width: 100%; }
.benefits .care-benefit-info .benefit-list .item ul li .tag{ display: inline-block;z-index: 2;position: absolute;top: -2px;right: 181px;width: 43px;height: 52px;background:url('/kr/caresolutions/images/care-benefit-tag-pc.png') no-repeat 0 0;background-size: cover; }
.benefits .care-benefit-info .benefit-list .item ul li .tits{ overflow: hidden; display: flex; align-items: center; gap: 8px; position: relative; z-index: 1; width: 100%; padding: 6px 12px; background: #fff; border-radius: 8px; }
.benefits .care-benefit-info .benefit-list .item ul li .tits::before{ content: ''; opacity: 0; transition: opacity .3s ease-out; position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; background: linear-gradient(285.86deg, #FFBFC4 -107.58%, #FFE5E4 100.28%); }
.benefits .care-benefit-info .benefit-list .item ul li .tits::after{ content: ''; position: absolute; top: 50%; right: 0; transform: translate3d(0, -50%, 0); width: 1px; height: 100%; transition: background .3s ease-out; 
  background: linear-gradient(to bottom, #B5B5B5 5.5px, transparent 5.5px, transparent 11px); background-size: 100% 11px; background-position: 0 -1px; }
.benefits .care-benefit-info .benefit-list .item ul li .tits img{ width: 90px }
.benefits .care-benefit-info .benefit-list .item ul li .tits .copy{ display: flex; align-items: center; gap: 8px; }
.benefits .care-benefit-info .benefit-list .item ul li .tits .tit{ display: block; font-size: 20px; font-weight: 600; text-align: left; }
.benefits .care-benefit-info .benefit-list .item ul li .tits .label{ display: inline-block; margin-left: 6px; padding: 3px 10px; border-radius: 6px; background-color: #E21024; font-size: 12px; font-weight: 600; color: #fff; }
.benefits .care-benefit-info .benefit-list .item ul li .desc{ overflow: hidden; flex: none; display: flex; justify-content: center; align-items: center; position: relative; z-index: 1; width: 160px; background: #fff; border-radius: 8px; }
.benefits .care-benefit-info .benefit-list .item ul li .desc::before{ content: ''; opacity: 0; transition: opacity .3s ease-out; position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; background: linear-gradient(287.07deg, #FFBFC4 -66.91%, #FFE5E4 100.76%); }
.benefits .care-benefit-info .benefit-list .item ul li .desc .txt{ display: block; font-size: 14px; font-weight: 700; text-align: center; }
.benefits .care-benefit-info .benefit-list .item ul li .desc .txt strong{ display: block; font-size: 20px; font-weight: 700; }
.benefits .care-benefit-info .benefit-list .item ul li button:focus-visible .tits::before{ opacity: 1; }
.benefits .care-benefit-info .benefit-list .item ul li button:focus-visible .tits::after{ background: linear-gradient(to bottom, #E6A6A8 5.5px, transparent 5.5px, transparent 11px); background-size: 100% 11px; background-position: 0 -1px; }
.benefits .care-benefit-info .benefit-list .item ul li button:focus-visible .desc::before{ opacity: 1; }
@media (hover: hover) {
  .benefits .care-benefit-info .benefit-list .item ul li button:hover .tits::before{ opacity: 1; }
  .benefits .care-benefit-info .benefit-list .item ul li button:hover .tits::after{ background: linear-gradient(to bottom, #E6A6A8 5.5px, transparent 5.5px, transparent 11px); background-size: 100% 11px; background-position: 0 -1px; }
  .benefits .care-benefit-info .benefit-list .item ul li button:hover .desc::before{ opacity: 1; }
}
@media screen and (max-width: 1080px) {
  .benefits .care-benefit-info .benefit-list .inwrap{ flex-direction: column; width: 620px; }
}
@media screen and (max-width: 767px) {
  .benefits .care-benefit-info{ padding-top: 80px; }
  .benefits .care-benefit-info:has(.care-benefit-banner) .heading{margin-bottom: 28px;}
  .benefits .care-benefit-banner{margin-bottom: 40px;}
  .benefits .care-benefit-banner .banner { max-width: calc(100% - 14px);min-width: 332px; min-height: unset; padding: 30px 26px; }
  .benefits .care-benefit-banner .banner .texts .tit { font-size: 20px; }
  .benefits .care-benefit-banner .banner .texts .txt { margin-top: 6px; font-size: 14px; }
  .benefits .care-benefit-banner .banner .texts .icon-btn { width: 24px; height: 24px; margin-left: 10px; margin-top: -2px; }
  .benefits .care-benefit-banner .banner .texts .icon-btn::after{ width: 7px; height: 7px; }
  .benefits .care-benefit-banner .banner .image { top: 5px; right: 13px; width: 110px; }
  .benefits .care-benefit-info .benefit-list{ margin-top: 43px; padding: 40px 0 60px; }
  .benefits .care-benefit-info .benefit-list .list-title{ width: 235px; height: 43px; font-size: 16px; }
  .benefits .care-benefit-info .benefit-list .item{ width: 420px; max-width: 100%; margin: 0 auto; }
  .benefits .care-benefit-info .benefit-list .item .item-title{ height: 40px; margin-bottom: 12px; font-size: 16px; font-weight: 600; }
  .benefits .care-benefit-info .benefit-list .item ul{ gap: 6px; }
  .benefits .care-benefit-info .benefit-list .item ul li .tag{ right:119px;width: 43px;height: 48px;background-image:url('/kr/caresolutions/images/care-benefit-tag-m.png'); }
  .benefits .care-benefit-info .benefit-list .item ul li .tits{ padding: 11px 10px; gap: 10px; }
  .benefits .care-benefit-info .benefit-list .item ul li .tits::after{ height: 68%;
    background: linear-gradient(to bottom, #DADADA 5.5px, transparent 5.5px, transparent 11px); background-size: 100% 11px; background-position: 0 -1px; }
  .benefits .care-benefit-info .benefit-list .item ul li .tits img{ width: 64px; }
  .benefits .care-benefit-info .benefit-list .item ul li .tits .copy{ flex-direction: column-reverse; gap: 4px; align-items: flex-start; text-align: left; }
  .benefits .care-benefit-info .benefit-list .item ul li .tits .tit{ font-size: 18px; }
  .benefits .care-benefit-info .benefit-list .item ul li .tits .label{ margin-left: 0; padding: 2px 6px; border-radius: 4px; font-size: 10px; }
  .benefits .care-benefit-info .benefit-list .item ul li .desc{ width: 107px; }
  .benefits .care-benefit-info .benefit-list .item ul li .desc .txt{ font-size: 12px; }
  .benefits .care-benefit-info .benefit-list .item ul li .desc .txt strong{ font-size: 16px; } 

  .benefits .care-benefit-info .benefit-list .item ul li.active button .tits::after{ background: linear-gradient(to bottom, #E6A6A8 5.5px, transparent 5.5px, transparent 11px); background-size: 100% 11px; background-position: 0 -1px; }
  .benefits .care-benefit-info .benefit-list .item ul li.active button .tits::before{ opacity: 1; }
  .benefits .care-benefit-info .benefit-list .item ul li.active button .tits .copy{ position: relative; z-index: 2; }
  .benefits .care-benefit-info .benefit-list .item ul li.active button .desc::before{ opacity: 1; }
}

/* 혜택 안내 상세 */
.benefits .care-benefit-detail{ padding-top: 180px; }
.benefits .care-benefit-detail .swiper{ overflow: visible; width: 512px; max-width: 100%; }
.benefits .care-benefit-detail .swiper-slide{ overflow: visible; display: flex; flex-direction: column; gap: 6px; }
.benefits .care-benefit-detail .swiper-slide .box{ position: relative; z-index: 1; padding: 20px 60px; background-color: #F6F6F6; border-radius: 16px; }
.benefits .care-benefit-detail .swiper-slide .box::before{ content: ''; position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; border-radius: 16px; background: linear-gradient(304.51deg, #FFBFC4 -66.9%, #FFE5E4 98.39%); }
.benefits .care-benefit-detail .swiper-slide .box .image{ position: absolute; top: -66px; right: 30px; width: 170px; }
.benefits .care-benefit-detail .swiper-slide .box .image::after{ content: ''; position: absolute; bottom: 2px; left: 50%; transform: translate3d(-50%, 0, 0); width: 104px; height: 10px; border-radius: 50%; background-color: #DFDFDF; }
.benefits .care-benefit-detail .swiper-slide .box .image img{ width: 100%; }
.benefits .care-benefit-detail .swiper-slide .box .image img { display: block; position: relative; z-index: 1; width: 100%; animation: floating-up 2.5s ease-out infinite; }
.benefits .care-benefit-detail .swiper-slide:nth-child(2n) .box .image img { animation: floating-down 2.5s ease-out infinite; }
.benefits .care-benefit-detail .swiper-slide .box .tits{ margin-bottom: 20px; }
.benefits .care-benefit-detail .swiper-slide .box .tits .label{ display: inline-block; margin-top: 20px; margin-bottom: 8px; padding: 3px 16px; background-color: #555555; border-radius: 6px; font-size: 16px; font-weight: 600; color: #fff; transition: .3s ease-out; }
.benefits .care-benefit-detail .swiper-slide .box .tits .tit{ font-size: 26px; font-weight: 600; }
.benefits .care-benefit-detail .swiper-slide .box .desc *{ line-height: 1.56; }
.benefits .care-benefit-detail .swiper-slide .box .desc .tit{ margin-bottom: 2px; font-size: 20px; font-weight: 600; }
.benefits .care-benefit-detail .swiper-slide .box .desc .txt{ font-size: 18px; font-weight: 400; }
.benefits .care-benefit-detail .swiper-slide .box .desc .txt a{ display: inline-flex; align-items: center; margin-top: 8px; font: inherit; font-size: 14px; line-height: 1.56; color: #3E3E3E; }
.benefits .care-benefit-detail .swiper-slide .box .desc .txt a::after{ content: ''; display: inline-block; width: 6px; height: 6px; margin-top: -1px; margin-left: 4px; border-top: 1.5px solid #3E3E3E; border-right: 1.5px solid #3E3E3E; transform: rotate(45deg); }
.benefits .care-benefit-detail .swiper-slide .box .desc .txt em{ text-decoration: underline; }
.benefits .care-benefit-detail .swiper-slide .box .desc li{ position: relative; padding-left: 24px; font-size: 18px; font-weight: 400;  }
.benefits .care-benefit-detail .swiper-slide .box .desc li::before{ content: ''; position: absolute; top: 10px; left: 10px; width: 3px; height: 3px; background: #3E3E3E; border-radius: 50%; }
.benefits .care-benefit-detail .swiper-slide .box .list{ margin: 0 -5px; }
.benefits .care-benefit-detail .swiper-slide .box .list li{ position: relative; padding-left: 10px; font-size: 12px; font-weight: 400; color: #3E3E3E; line-height: 1.56; }
.benefits .care-benefit-detail .swiper-slide .box .list li::before{ content: ''; position: absolute; top: 8px; left: 2px; width: 2px; height: 2px; background: #3E3E3E; border-radius: 50%; }
.benefits .care-benefit-detail .swiper-slide .btn {display: flex;justify-content: center;align-items: center;width: 408px;height: 64px;margin: 14px auto 0;border-radius: 16px;background-color: #E21024;font-size: 20px;font-weight: 600;color: #fff;}
.benefits .care-benefit-detail .swiper-slide .btn{ display:none; pointer-events: none; opacity: 0; transition: opacity .3s ease-out; }
.benefits .care-benefit-detail .swiper-slide .box::before{ opacity: 0; transition: opacity .3s ease-out; }
.benefits .care-benefit-detail .swiper-slide .box .image::after{ transition: background .3s ease-out; }
.benefits .care-benefit-detail .swiper-slide-active .box::before{ opacity: 1; }
.benefits .care-benefit-detail .swiper-slide-active .box .image::after{ background-color: #EDBFC1; }
.benefits .care-benefit-detail .swiper-slide-active .box .tits .label{ background-color: #E21024; } 
.benefits .care-benefit-detail .swiper-slide-active .box .desc .txt,
.benefits .care-benefit-detail .swiper-slide-active .box .desc li{ color: #4C4343; }
.benefits .care-benefit-detail .swiper-slide-active .btn{ display:revert; pointer-events: auto; opacity: 1; }
.benefits .care-benefit-detail .swiper-button-prev,
.benefits .care-benefit-detail .swiper-button-next{ top: 180px; border: 1px solid #E5E5E5; }
.benefits .care-benefit-detail .swiper-button-prev{ left: -40px }
.benefits .care-benefit-detail .swiper-button-next{ right: -40px }
.benefits .care-benefit-detail .box:has(.accordion){ padding-right:55px; padding-left: 55px; }
.benefits .care-benefit-detail .box:has(.accordion) .list{ margin: 0; }
.benefits .care-benefit-detail .accordion .item .open{ display: none; width: 100%; padding-top: 20px; font-size:14px; font-weight: 600; }
.benefits .care-benefit-detail .accordion .item .open::after{ content: ''; display: inline-block; width: 8px; height: 8px; margin-top: 3px; margin-left: 8px; border-top: 2px solid #000; border-right: 2px solid #000; transform: rotate(135deg); transition: transform .2s ease-out; vertical-align: top; }
.benefits .care-benefit-detail .accordion .item:has(.list > li:nth-child(2)) .open{display: block;}
.benefits .care-benefit-detail .accordion .item.active .open::after{ margin-top: 7px; transform: rotate(-45deg); }
.benefits .care-benefit-detail .accordion .item .detail .list > li:not(:first-child),
.benefits .care-benefit-detail .accordion .item .detail:has(.list > li:nth-child(2)) .list > li:first-child > * { display: none; }
.benefits .care-benefit-detail .accordion .item.active .detail .list > li:not(:first-child),
.benefits .care-benefit-detail .accordion .item.active .detail:has(.list > li:nth-child(2)) .list > li:first-child > *{ display: block; }
.benefits .care-benefit-detail .swiper-slide :where(.box .desc .txt a, .accordion .item .open){pointer-events: none;}
.benefits .care-benefit-detail .swiper-slide-active :where(.box .desc .txt a, .accordion .item .open){pointer-events: auto;}
@media screen and (max-width: 767px) {
  .benefits .care-benefit-detail{ padding-top: 85px; }
  .benefits .care-benefit-detail .inwrap{ padding: 0 30px; }
  .benefits .care-benefit-detail .swiper{ width: 420px;}
  .benefits .care-benefit-detail .swiper-slide .box{ padding: 16px 26px; background-color: #E8E8E8; }
  .benefits .care-benefit-detail .swiper-slide .box::before{ background: linear-gradient(333.57deg, #FFBFC4 -85.74%, #FFE5E4 108.56%); }
  .benefits .care-benefit-detail .swiper-slide .box .image{ top: -45px; right: 4px; width: 130px; }
  .benefits .care-benefit-detail .swiper-slide .box .image::after{ width: 80px; height: 8px; }
  .benefits .care-benefit-detail .swiper-slide .box .tits{ margin-bottom: 16px; }
  .benefits .care-benefit-detail .swiper-slide .box .tits .label{ margin-top: 16px; margin-bottom: 8px; font-size: 12px; }
  .benefits .care-benefit-detail .swiper-slide .box .tits .tit{ font-size: 24px; }
  .benefits .care-benefit-detail .swiper-slide .box .desc .tit{ font-size: 16px; }
  .benefits .care-benefit-detail .swiper-slide .box .desc .txt{ font-size: 14px; }
  .benefits .care-benefit-detail .swiper-slide .box .desc .txt a{ font-size: 12px; }
  .benefits .care-benefit-detail .swiper-slide .box .desc .txt a::after{ margin-left: 3px; border-width: 1px; }
  .benefits .care-benefit-detail .swiper-slide .box .desc li{ padding-left: 18px; font-size: 14px; }
  .benefits .care-benefit-detail .swiper-slide .box .desc li::before{ top: 9px; left: 9px; }
  .benefits .care-benefit-detail .swiper-slide .box .list{ margin: 0; }
  .benefits .care-benefit-detail .swiper-slide .box .list li{ padding-left: 8px; }
  .benefits .care-benefit-detail .swiper-slide .box .list li::before{ top: 7px; }
  .benefits .care-benefit-detail .swiper-slide .btn{ margin-top: 20px; width: 248px; height: 54px; font-size: 16px; }
  .benefits .care-benefit-detail .swiper-button-prev{ left: -12px; }
  .benefits .care-benefit-detail .swiper-button-next{ right: -12px }
  .benefits .care-benefit-detail .accordion .item .open{ padding-top: 16px; font-size: 12px; }
  .benefits .care-benefit-detail .accordion .item .open::after{ width: 7px; height: 7px; margin-top: 2px; border-top-width: 1.5px; border-right-width: 1.5px; }
  .benefits .care-benefit-detail .accordion .item.active .open:after{ margin-top: 6px; }
}

/* 리뷰혜택 */
.benefits .card-benefit-review{background-color: #F6F6F6;}
.benefits .card-benefit-review .content{display: flex;flex-wrap: wrap;gap: 8px;max-width: 1060px;margin: 0 auto;}
.benefits .card-benefit-review .content .box{flex: 1 1 0%;}
.benefits .card-benefit-review .content .box.full{width: 100%;flex: auto;display: flex;flex-direction: column;margin-bottom: 30px;}
.benefits .card-benefit-review .content .item{border-radius: 16px; background-color: #fff;}
.benefits .card-benefit-review .content .main .item{padding: 50px 30px 30px 50px; height: 100%; background: url(/kr/caresolutions/images/review-icon-1.svg) no-repeat right bottom #fff ; background-origin: content-box;}
.benefits .card-benefit-review .content .review-list.item{padding: 20px 30px 20px 50px; }
.benefits .card-benefit-review .content .accordion .item{padding: 22px 50px;display: none;}
.benefits .card-benefit-review .content .accordion.active .item{display: block;}
.benefits .card-benefit-review .content .review-list-wrap{display: flex;flex-direction: column;gap: 8px;}
.benefits .card-benefit-review .content .review-title{font-size: 26px;line-height: 1.5;word-spacing: -2%;font-weight: bold;}
.benefits .card-benefit-review .content .review-eyebrow{font-size: 20px;line-height: 1.5;word-spacing: -2%;font-weight: bold;margin-top: 24px;}
.benefits .card-benefit-review .content .review-text{font-size: 18px;line-height: 1.5;word-spacing: -2%;margin-top: 8px;}
.benefits .card-benefit-review .content .review-list-wrap{}
.benefits .card-benefit-review .content .review-list{}
.benefits .card-benefit-review .content .review-list.icon{background: url(/kr/caresolutions/images/review-icon-2.svg) no-repeat right center #fff; background-origin: content-box;}
.benefits .card-benefit-review .content .list-title{font-size: 20px; line-height: 1.5; word-spacing:-2%; font-weight: bold;}
.benefits .card-benefit-review .content .list-text{font-size: 18px; line-height: 1.5; word-spacing:-2%;margin-top: 8px;}
.benefits .card-benefit-review .content .review-list .list{}
.benefits .card-benefit-review .content .review-list .list li{position: relative;padding-left: 10px;font-size: 12px;font-weight: 400;color: #4C4343;line-height: 1.5}
.benefits .card-benefit-review .content .review-list .list li:not(:first-child){margin-top: 5px;}
.benefits .card-benefit-review .content .review-list .list li::before{content: '';position: absolute;top: 8px;left: 2px;width: 2px;height: 2px;background: #4C4343;border-radius: 50%;}

.benefits .card-benefit-review .content .accordion-title{font-size: 20px;line-height: 1.5; font-weight: bold;}
.benefits .card-benefit-review .content .box.accordion .list li{position: relative;padding-left: 10px;font-size: 14px;font-weight: 400;color: #4C4343;line-height: 1.5;margin-top: 8px;}
.benefits .card-benefit-review .content .box.accordion .list li::before{content: '';position: absolute;top: 10px;left: 2px;width: 2px;height: 2px;background: #4C4343;border-radius: 50%;}
.benefits .card-benefit-review .content .box.accordion button{font-size: 14px;line-height: 1.5; font-weight: bold;align-self:center;margin-top: 20px;padding: 3px 10px;}
.benefits .card-benefit-review .content .box.accordion button.open::after{content: '';display: inline-block;width: 8px;height: 8px;margin-top: 4px;margin-left: 8px;border-top: 2px solid #000;border-right: 2px solid #000;transform: rotate(135deg);transition: transform .2s ease-out;vertical-align: top;}
.benefits .card-benefit-review .content .box.accordion.active button.open::after{margin-top: 7px;transform: rotate(-45deg);}

.benefits .card-benefit-review .review-link{display: flex;justify-content: center;align-items: center;max-width: 408px;height: 64px;margin: 0 auto;border-radius: 16px;background-color: #E21024;font-size: 20px;font-weight: bold;color: #fff;}

/* 제휴 카드 */
.benefits .care-benefit-cards{ padding-top: 60px; padding-bottom: 200px; }
.benefits .care-benefit-cards .heading{ margin-bottom: 54px; }
.benefits .care-benefit-cards .content{ display: flex; flex-direction: column; align-items: center; position: relative; width: 1398px; max-width: 100%; margin: 0 auto; }
.benefits .care-benefit-cards .slider{ position: relative; width: 100%; }
.benefits .care-benefit-cards .swiper{ width: 1114px; max-width: 100%; }
.benefits .care-benefit-cards .swiper-button-prev,
.benefits .care-benefit-cards .swiper-button-next{ top: 350px; background: #F6F6F6; }
.benefits .care-benefit-cards .swiper-button-prev::after,
.benefits .care-benefit-cards .swiper-button-next::after{ border-color: #7C7C7C; }
.benefits .care-benefit-cards .swiper-pagination{ overflow-x: auto; display: inline-flex; gap: 20px; position: unset; max-width: 100%; margin-bottom: 60px; justify-content: center;} 
.benefits .care-benefit-cards .swiper-pagination:focus-within{ padding: 2px; margin: -2px -2px 58px; }
.benefits .care-benefit-cards .swiper-pagination-bullet{ flex: none; display: flex; flex-direction: column; align-items: center; gap: 17px; width: 104px; height: auto; opacity: 1; background: transparent; border-radius: 0; }
.benefits .care-benefit-cards .swiper-pagination-bullet strong{ display: flex; justify-content: center; align-items: center; width: 100%; height: 40px; background-color: #F6F6F6; border-radius: 100px; font-size: 14px; font-weight: 500; transition: background .2s ease-out, color .2s ease-out; }
.benefits .care-benefit-cards .swiper-pagination-bullet strong:has(.grade){flex-direction: column;}
.benefits .care-benefit-cards .swiper-pagination-bullet strong .grade{font-size: 11px;}
.benefits .care-benefit-cards .swiper-pagination-bullet img{ height: 80px; object-fit: contain; border-radius: 2px; -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }
.benefits .care-benefit-cards .swiper-pagination-bullet img.vertical{ width: 80px; transform: rotate(90deg); }
.benefits .care-benefit-cards .swiper-pagination-bullet .txt{ font-size: 14px; font-weight: 400; color: #767676; transition: color .2s ease-out, font-weight .2s ease-out; }
.benefits .care-benefit-cards .swiper-pagination-bullet-active strong{ background-color: #191919; color: #fff; }
.benefits .care-benefit-cards .swiper-pagination-bullet:hover .txt,
.benefits .care-benefit-cards .swiper-pagination-bullet-active .txt{ color: #191919; font-weight: 600; }
.benefits .care-benefit-cards .swiper-pagination-bullet .txt span{ display: block; margin-bottom: 5px; font-size: 12px; font-weight: 400; transition: color .2s ease-out, font-weight .2s ease-out;; }
/* .benefits .care-benefit-cards .swiper-pagination-bullet:hover p span,
.benefits .care-benefit-cards .swiper-pagination-bullet-active p span{ color: #3E3E3E; } */
.benefits .care-benefit-cards .swiper-slide .tits .tit{ margin-bottom: 8px; font-size: 30px; font-weight: 600; color: #000; }
.benefits .care-benefit-cards .swiper-slide .tits .txt{ font-size: 20px; font-weight: 700; color: #E21024; }
.benefits .care-benefit-cards .swiper-slide .desc{ display: flex; gap: 16px; margin-top: 20px; }
.benefits .care-benefit-cards .swiper-slide .desc .image{ display: flex; flex-direction: column; justify-content: center; align-items: center; width: 50%; padding: 25px 20px; }
.benefits .care-benefit-cards .swiper-slide .desc .image img{ object-fit: contain; border-radius: 10px; }
.benefits .care-benefit-cards .swiper-slide .desc .image img:not(.vertical){ width: auto; height: 459px; }
.benefits .care-benefit-cards .swiper-slide .desc .image img.vertical{ width: 459px; height: auto; }
.benefits .care-benefit-cards .swiper-slide .desc .image a{ display: inline-flex; align-items: center; margin-top: 16px; font-size: 16px; font-weight: 500; color: #767676; transition: color .2s ease-out; }  
.benefits .care-benefit-cards .swiper-slide .desc .image a::after{ content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 5px; border-right: 1px solid #767676; border-bottom: 1px solid #767676; transform: rotate(-45deg); }
.benefits .care-benefit-cards .swiper-slide .desc .image a:hover{ color: #191919; }
.benefits .care-benefit-cards .swiper-slide .desc .list{ display: flex; flex-direction: column; gap: 8px; width: 50%; }
.benefits .care-benefit-cards .swiper-slide .desc .list li{ display: flex; gap: 16px; align-items: center; padding: 16px 30px; border-radius: 16px; background-color: #F9F9F9; }
.benefits .care-benefit-cards .swiper-slide .desc .list li img{ width: 60px; }
.benefits .care-benefit-cards .swiper-slide .desc .list li .txts strong{ display: block; margin-bottom: 4px; font-size: 16px; font-weight: 600; }
.benefits .care-benefit-cards .swiper-slide .desc .list li .txts p{ font-size: 20px; font-weight: 400; }
.benefits .care-benefit-cards .swiper-slide .desc .list li .txts span{ font-size: 14px; }
.benefits .care-benefit-cards .swiper-slide .desc .list li .txts .exp-disc{ display: inline-block;margin-top:10px;line-height:1.3; }
.benefits .care-benefit-cards .accordion{ margin-top: 28px; border-bottom: 1px solid #B8B8B8; color: #3E3E3E; }
.benefits .care-benefit-cards .accordion .item{ border-top: 1px solid #B8B8B8;}
.benefits .care-benefit-cards .accordion .item button{ display: flex; justify-content: center; align-items: center; width: 100%; padding: 15px 20px; background-color: #FBFBFB; font-size: 20px; font-weight: 500; color: #191919; }
.benefits .care-benefit-cards .accordion .item button::after{ content: ''; display: inline-block; width: 20px; height: 20px; margin-right: -46px; margin-left: 26px; background: url('/kr/caresolutions/images/icon-accordion-arrow.svg') no-repeat center / contain; }
.benefits .care-benefit-cards .accordion .item .detail{ display: flex; flex-direction: column; gap: 30px; padding: 9px 57px 48px;  } 
.benefits .care-benefit-cards .accordion .item .detail *{ line-height: 1.56; }
.benefits .care-benefit-cards .accordion .item .detail strong{ font-weight: 600; }
.benefits .care-benefit-cards .accordion .item .detail p{ font-size: 16px; font-weight: 400; }
.benefits .care-benefit-cards .accordion .item .detail a{ text-decoration: underline; }
.benefits .care-benefit-cards .accordion .item .detail li{ position: relative; padding-left: 24px; font-size: 16px; font-weight: 400; }
.benefits .care-benefit-cards .accordion .item .detail li::before{ content: ''; position: absolute; top: 10px; left: 10px; width: 3px; height: 3px; background: #3E3E3E; border-radius: 50%; }
.benefits .care-benefit-cards .accordion .item .detail .summarys{ display: flex; flex-direction: column; gap: 10px; }
.benefits .care-benefit-cards .accordion .item .detail .summarys:not(:has(*)){display: none;}
.benefits .care-benefit-cards .accordion .item .detail table{ width: 100%; padding: 0; border: 0; border-spacing: 0px; border-collapse: collapse; }
.benefits .care-benefit-cards .accordion .item .detail table th,
.benefits .care-benefit-cards .accordion .item .detail table td{ border: 1px solid #CFCFCF; padding: 12px; font-size: 16px; color: #000; text-align: center; }
.benefits .care-benefit-cards .accordion .item .detail table th{ background-color: #EEEEEE; font-weight: 500; }
.benefits .care-benefit-cards .accordion .item .detail table th span{ font-weight: 400; }
.benefits .care-benefit-cards .accordion .item .detail table td{ font-weight: 400; }
.benefits .care-benefit-cards .accordion .item .detail table thead tr:first-child th{ background-color: #D7D7D7; }
.benefits .care-benefit-cards .accordion .item .detail table thead tr:last-child th{ border-bottom: none; }
.benefits .care-benefit-cards .accordion .item .detail .tit-1{ margin-bottom: 20px; font-size: 18px; font-weight: 600; color: #191919; }
.benefits .care-benefit-cards .accordion .item .detail .tit-2{ margin: 10px 0; font-weight: 600; }
.benefits .care-benefit-cards .accordion .item button{ transition: background .3s ease-out; }
.benefits .care-benefit-cards .accordion .item button::after{ transition: transform .3s ease-out; }
.benefits .care-benefit-cards .accordion .item.active button{ background-color: #fff; }
.benefits .care-benefit-cards .accordion .item.active button::after{ transform: rotate(-180deg); }
.benefits .care-benefit-cards .content .content-msg{}
.benefits .care-benefit-cards .swiper-pagination-bullet::after{display: none;}

@media screen and (max-width: 767px) {
  .benefits .care-benefit-cards{ padding-top: 0; padding-bottom: 100px; }
  .benefits .care-benefit-cards .heading{ margin-bottom: 28px; }
  .benefits .care-benefit-cards .swiper{ overflow: visible; width: 420px; max-width: 100%; }
  .benefits .care-benefit-cards .swiper-button-prev,
  .benefits .care-benefit-cards .swiper-button-next{ top: 280px; border: 1px solid #E5E5E5; background: #fff; }
  .benefits .care-benefit-cards .swiper-button-prev{ left: 10px }
  .benefits .care-benefit-cards .swiper-button-next{ right: 10px }
  .benefits .care-benefit-cards .swiper-pagination{ justify-content: unset; -ms-overflow-style: none; scrollbar-width: none; width: 100vw; max-width: unset; margin: 0 -14px 30px; padding: 0 14px; }
  .benefits .care-benefit-cards .swiper-pagination:-webkit-scrollbar { display: none; }
  .benefits .care-benefit-cards .swiper-pagination:focus-within{ padding: 2px 14px; margin: -2px -14px 28px; }
  .benefits .care-benefit-cards .swiper-pagination::before,
  .benefits .care-benefit-cards .swiper-pagination::after{ content: ''; flex: none; display: block; width: calc(50vw - 14px - 52px - 20px); }
  .benefits .care-benefit-cards .swiper-pagination-bullet strong{height: 35px;}
  .benefits .care-benefit-cards .swiper-slide:not(.swiper-slide-active){ opacity: 0.5;} 
  .benefits .care-benefit-cards .swiper-slide .tits{ background-color: #F6F6F6; border-radius: 16px 16px 0 0; padding: 34px 20px 30px; text-align: center; }
  .benefits .care-benefit-cards .swiper-slide .tits .tit{ font-size: 22px; font-weight: 700; }
  .benefits .care-benefit-cards .swiper-slide .tits .txt{ min-height: 2.8em; font-size: 16px; }
  .benefits .care-benefit-cards .swiper-slide .desc{ flex-direction: column; gap: 6px; margin-top: 0; }
  .benefits .care-benefit-cards .swiper-slide .desc .image{ width: 100%; height: 337px; padding: 16px 20px 34px; background-color: #F6F6F6; border-radius: 0 0 16px 16px; }
  .benefits .care-benefit-cards .swiper-slide .desc .image img{ border-radius: 6px; }
  .benefits .care-benefit-cards .swiper-slide .desc .image img:not(.vertical){ height: 253px; }
  .benefits .care-benefit-cards .swiper-slide .desc .image img.vertical{ width: 253px; }
  .benefits .care-benefit-cards .swiper-slide .desc .image a{ margin-top: 14px; font-size: 14px; }
  .benefits .care-benefit-cards .swiper-slide .desc .list{ width:100%; }
  .benefits .care-benefit-cards .swiper-slide .desc .list li{ gap: 14px; background-color: #F6F6F6; }
  .benefits .care-benefit-cards .swiper-slide .desc .list li .txts p{ font-size: 16px; }
  .benefits .care-benefit-cards .swiper-slide .desc .list li .txts span{ display: block; font-size: 12px; line-height: 1.6; }
  .benefits .care-benefit-cards .accordion{ display: flex; flex-direction: column; gap: 6px; margin-top: 6px; border: none; }
  .benefits .care-benefit-cards .accordion .item{ border: none; border-radius: 16px; background-color: #F6F6F6; }
  .benefits .care-benefit-cards .accordion .item button{ justify-content: space-between; background-color: transparent !important; padding: 25px 30px; text-align: left; font-size: 18px; }
  .benefits .care-benefit-cards .accordion .item button::after{ margin-right: 0; }
  .benefits .care-benefit-cards .accordion .item .detail{ padding: 3px 16px 56px; gap: 26px; }
  .benefits .care-benefit-cards .accordion .item .detail p{ font-size: 14px; }
  .benefits .care-benefit-cards .accordion .item .detail .summarys{ padding: 0 16px }
  .benefits .care-benefit-cards .accordion .item .detail .tables{ overflow-x: auto; }
  .benefits .care-benefit-cards .accordion .item .detail table th,
  .benefits .care-benefit-cards .accordion .item .detail table td{ min-width: 100px; padding: 9px 6px; }
  .benefits .care-benefit-cards .accordion .item .detail .notice li{ font-size: 14px; }

  .benefits .card-benefit-review{padding: 60px 14px; margin-bottom: 60px;}
  .benefits .card-benefit-review .content .box{width: 100%;flex: initial;}
  .benefits .card-benefit-review .content .main .item{background-size: 103px 103px;padding: 33px 26px; margin-bottom: 54px;}
  .benefits .card-benefit-review .content .review-list.icon{background-size: 60px 60px;padding: 18px 26px;}
  .benefits .card-benefit-review .content .review-title{font-size: 24px;}
  .benefits .card-benefit-review .content .review-eyebrow{margin-top: 10px;font-size: 16px;}
  .benefits .card-benefit-review .content .review-text{font-size: 14px;margin-top: 4px;}
  .benefits .card-benefit-review .content .list-title{font-size: 16px;}
  .benefits .card-benefit-review .content .list-text{font-size: 14px;margin-top: 3px;}
  .benefits .card-benefit-review .content .review-list.item{padding: 18px 26px;}

  .benefits .card-benefit-review .review-link{font-size: 16px;width: 248px;height: 54px;}
  .benefits .card-benefit-review .content .accordion .item{padding: 18px 26px;}
  .benefits .card-benefit-review .content .accordion-title{font-size: 16px;}
  .benefits .card-benefit-review .content .box.accordion .list li{font-size: 12px;}

}
@media screen and (max-width: 359px) {
  .benefits .care-benefit-cards .swiper-slide .tits .txt br{ display: none; }
}

/* 배너 */
@media screen and (max-width: 767px) {
  .benefits .care-subcp-banner .banner-2 .image{ top: 0; }
}