@charset "utf-8";
/* CSS Document */

/*메인 배너 스와이프*/
.banner-top {position: relative; top:50px;}
.main_swipe li {position: relative; width: 100%; max-width: 100vw; overflow: hidden}
.main_swipe li a img {width: 100%; display: block;}
.main_swipe .main_tit {position: absolute; bottom: 12vw; left: 50%; transform: translate(-50%,-50%); width: 100%; max-width: 90vw; text-align: center; box-sizing: border-box;}
.banner-top .main_tit h2 {font-family:'Montserrat', 'YoonGothicPro720', sans-serif; font-size:7.5vw; line-height:normal; color:#1a1a1a; word-break: keep-all; white-space: normal; margin: 0 auto;}

.main_swipe .ix-controller{position: relative; left:43%; top: 78%; z-index:5; min-width:78px;height:26px; text-align:center; font-weight:300; font-size:11px; line-height:1.167em;color:#fff;background:#00000047; border-radius: 25px; width: 14%; transform: translate(-4%, -200%);}
.main_swipe .ix-controller{position: relative; left:43%; top: 78%; z-index:5; min-width:78px;height:26px; text-align:center; font-weight:300; font-size:11px; line-height:1.167em;color:#fff;background:#00000047; border-radius: 25px; width: 14%; transform: translate(-4%, -200%);}
.main_swipe .ix-controller .show-all-banner{position:absolute;right:0; width:100%; padding:0px 7px; text-align:right; font-weight:400; font-size:20px; line-height:1.2em; color:#fff;background:none;}
.main_swipe .ix-controller .slash{margin:0 4px;font-size:9px;line-height:1.556em;}
#show-all-banner{display:none;position:fixed;z-index:20;top:0;left:0;width:100%;height:100%;padding-top:48px;background-color:#fff; }
#show-all-banner .sab-header{position:absolute;left:0;top:0;width:100%;padding:14px 45px;text-align:center;font-weight:700;font-size:18px;line-height:1.112em;letter-spacing:0;color:#000;border-bottom:1px solid #e5e5e5;}
#show-all-banner .sab-header .length{font-weight:500;margin-left:4px;}
#show-all-banner .hide-all-banner{position:absolute;top:13px;right:20px;width:18px;height:18px;background:url(//image.oliveyoung.co.kr/mc-static-root/image/comm/btn_pop_close.png) no-repeat 0 0;background-size:18px auto;text-indent:-9999px;}
#show-all-banner .hide-all-banner:focus{border:0;}
#show-all-banner .sab-body{height:100%;overflow-y:scroll;-webkit-overflow-scrolling:touch;}
#show-all-banner li:not(:first-child){margin-top:10px;}		

.main_swipe .swiper-pagination {position: absolute;  bottom: 0px!important;  left: -10px!important; width: 100%; letter-spacing:1px; line-height: 27px; margin: 0 !important;}
.main_swipe .swiper-pagination span {font-size:11px; font-weight:600; color:#fff}
.main_swipe .swiper-pagination-current {width:5%; text-align: center;}
.main_swipe .swiper-pagination-total { width:50%; text-align: center; opacity: 60% }

/* 플레이버튼 */
.main_swipe .top_play { z-index: 9; position: absolute; bottom: 0; min-width: 25px; height: 25px; background: #00000047; border-radius: 25px; margin-left: -35%;  box-sizing: border-box;}
.main_swipe .top_play:before {left: 0%;  content: ''; position: absolute; width: 25px; height: 25px; opacity: 0.5; border-radius: 25px;}	

/* 멈춤재생 */
.main_swipe .top_play .swiper-pause {position:absolute; z-index: 999;  width: 20px; height: 20px; left: 3px; top: 2px; background: url(/service_s7/menu/main/images/icon_stop.png?t=1); background-size: cover; cursor: pointer; transition:0.3s}
.main_swipe .top_play .swiper-play  {position:absolute; z-index: 999;  width: 20px; height: 20px; left: 3px; top: 2px; background: url(/service_s7/menu/main/images/icon_play.png?t=1); background-size: cover; cursor: pointer; transition:0.3s}

/* 더보기 */
.main_swipe .ix-controller span.top_plus {position:absolute; z-index: 999;  width: 20px; height: 20px; right: 4px; top: 2px; background: url(/service_s7/menu/main/images/icon_plus.png?t=1); background-size: cover; cursor: pointer; transition:0.3s}

.main_swipe .top_play .swiper-play, .main_swipe .top_play .swiper-pause {display: none;}
.main_swipe .top_play .swiper-play:hover, .main_swipe .top_play .swiper-pause:hover {display: none; opacity:1; transition:.3s}
.main_swipe .top_play .swiper-play.active, .main_swipe .top_play .swiper-pause.active {display:block;}


/*테마샵 리스트*/
.pt0 {padding-top: 0!important;}
.themeshop, .benefit_grid {text-align: center; padding:0 3vw; padding-top: 18vw;}
.section_label {display: inline-block; margin-top: 60px; padding: 5px 10px; background: #93C47D; border-radius: 5px; color: #ffffff; font-size: 16px; font-weight: bold;}
.tit_h2 {display: block; font-size: 24px; font-weight: 600; position: relative; line-height: 1.5; color: #121212; background: none; padding-top: 20px;}	

.benefit_grid {padding: 70px 0 0 0;}	  
.card-grid {display: grid; grid-template-columns: repeat(1, 1fr); gap: 25px; max-width: 1200px; margin: 0 auto;}
.theme_list {position: relative; height: 200px; border-radius: 8px; overflow: hidden; cursor: pointer; transition: transform 0.3s;}
.theme_list img {width: 100%; height: 100%; object-fit: cover; display: block;}
.theme_list .overlay {position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); color: #fff; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 20px; gap: 13px;}
.theme_list .title {font-size: 24px; font-weight: bold; margin-bottom: 14px; letter-spacing: -0.3vw;}
.theme_list .title span {font-size: 18px; display: block; margin-bottom: 14px; font-weight: normal; color: #ffffff;}
.theme_list button {padding: 8px 25px; background: #eeece1; color: #111; border-radius: 4px; font-size: 14px;}	
.hidden {display: none;}
	  
.toggle-btn {margin-top: 40px; font-size: 16px; cursor: pointer; display: inline-block; padding: 15px 30px; background-color: #111; color: #fff; border-radius: 100px;}
.toggle-btn::after {content: '▼'; display: inline-block; font-size: 14px; margin-left: 7px;}
.toggle-btn.active::after {content: '▲';}