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

.pt0 {padding-top: 0!important;}
.themeshop, .benefit_grid {text-align: center; padding: 150px 0;}


/*테마 리스트*/
.card-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; max-width: 1200px; margin: 0 auto;}
.theme_list {position: relative; height: 354px; border-radius: 8px; overflow: hidden; cursor: pointer; transition: transform 0.3s; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);}
.theme_list:hover img {transform: scale(1.05); transition: transform 0.3s;}
.theme_list img {width: 100%; height: 200px; object-fit: cover; display: block;}
.overlay {position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); color: #fff; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 20px; opacity: 0; /* 처음엔 안 보이게 */ transition: opacity 0.3s ease;}
/*.theme_list img:hover {transform: scale(1.03);}*/
.theme_list:hover .overlay {opacity: 1; /* 호버 시 보여짐 */} 
.theme_list .title {font-size: 24px; font-weight: bold; line-height: 1.5}
.theme_list .title span {font-size: 18px; display: block; margin-bottom: 14px; font-weight: normal;}

.theme_list .card_info h2 {font-size: 20px; margin-top: 30px; color:#111; font-weight: bold;}
.theme_list .card_info h2 span{display: block; font-size: 14px; padding-bottom: 5px; font-weight: normal; color: #333;}
.theme_list .card_info .card_label {padding: 3px 8px; background: #fff4c4; border-radius: 5px; margin-top: 20px; display: inline-block; margin-right: 5px}
.theme_list .card_info .card_label:last-child {margin-right: 0px;}

/*테마리스트=더보기*/
.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: '▲';}

/*서비스와 혜택*/
.benefit_list {display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 34px 20px; max-width: 1200px; margin: 0 auto;}
.benefit_card {background-color: #f4f4f4; padding: 45px 25px 25px; border-radius: 10px; text-align: left; display: flex; flex-direction: column; justify-content: space-between; height: 260px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); position: relative; overflow: hidden;}
.benefit_bg_icon {position: absolute; top: 42px; right: 14px; z-index: 0; opacity: 0.2;}
.benefit_bg_icon img {height: 60px;}
.benefit_card *:not(.benefit_bg_icon) {position: relative; z-index: 1;}
.benefit_sub {font-size: 14px; color: #222;}
.benefit_tit {font-size: 22px; font-weight: bold; margin: 14px 0 28px 0; color: #111;}
.benefit_info {font-size: 16px; color: #222; flex-grow: 1;}
.benefit-btn {margin-top: 16px; padding: 12px 26px; font-size: 15px; font-weight: 600; text-align: center; background-color: #222450; color: #fff; border: none; border-radius: 8px; cursor: pointer; transition: background-color 0.2s ease; display: inline-block; align-self: flex-start;}
.benefit-btn:hover {background-color: #4e58c2; color: #fff;}
@media (max-width: 600px) { .section-title {font-size: 20px;} }