@charset "UTF-8";

#wrap nav .nav_bg_box {
    height: 100%;
    z-index: 1002;
    background-color: #fff
}

#wrap nav .nav_bg_box * {
    box-sizing: border-box
}

#wrap nav .nav_bg_box .nav_top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 15px;
    height: 53px
}

#wrap nav .nav_bg_box .nav_banner {
    position: static;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 53px;
    padding: 7px 15px;
    margin: 0
}

#wrap nav .nav_bg_box .nav_banner .login_txt {
    font-size: 14px;
    padding: 0
}

#wrap nav .nav_bg_box .nav_banner .nav_login ul {
    display: flex;
    gap: 6px;
    padding: 0
}

#wrap nav .nav_bg_box .nav_banner .nav_login ul li {
    padding: 0
}

#wrap nav .nav_bg_box .nav_banner .nav_login__mypage .nav_login__qrCode-btn a {
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 10px 0
}

#wrap nav .nav_bg_box .nav_banner .nav_login__mypage .nav_login__qrCode-btn img {
    width: 20px
}

#wrap nav .nav_bg_box .nav_banner .nav_login__mypage .btn_normal {
    font-size: 12px;
    padding: 10px
}

#wrap nav .nav_bg_box .nav_box {
    position: relative;
    display: flex;
    width: 100%;
    height: calc(100% - 53px);
    margin: 0
}

#wrap nav .nav_bg_box .nav_box .nav_cate_btns {
    width: 100px;
    background-color: #f5f5f5
}

#wrap nav .nav_bg_box .nav_box .nav_cate_btns .category_select li {
    font-size: 14px;
    padding: 12px 0 12px 12px
}

#wrap nav .nav_bg_box .nav_box .nav_cate_btns .category_select li.on {
    background-color: #fff;
    font-weight: 700
}

#wrap nav .nav_bg_box .nav_box .nav_cate_btns .category_select li .insta-link-btn {
    display: block;
    width: 100%
}

#wrap nav .nav_bg_box .nav_box .nav_cate_btns .category_select li .insta-link-btn img {
    width: 30px;
    vertical-align: top
}

#wrap nav .nav_bg_box .nav_box .nav_content_box {
    flex: 1;
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: none
}

#wrap nav .nav_bg_box .nav_box .nav_content_box .js-cate-item {
    display: none
}

#wrap nav .nav_bg_box .nav_box .nav_content_box .js-cate-item.on {
    display: block
}

#wrap nav .nav_bg_box .nav_box .nav_content_box .cate_all a {
    color: #191f28
}

#wrap nav .nav_bg_box .nav_box .nav_content_box .nav_content_item__brand {
    padding-left: 15px;
    display: flex;
    flex-wrap: wrap
}

#wrap nav .nav_bg_box .nav_box .nav_content_box .nav_content_item__brand>li {
    width: 120px
}

#wrap nav .nav_bg_box .nav_box .nav_content_box .nav_content_item__brand>li a {
    display: block;
    font-weight: 500;
    color: #878787;
    padding: 4px 0
}

#wrap nav .left_close {
    position: static;
    width: 22px;
    height: 22px;
    background-image: url(//m.tennismetro.co.kr/data/skin/mobile/tennismetro_2025_dev/img/icon/icon_left_x_bk.png)
}

.category_side {
    width: 100%
}

.category_side li a span.icon_plus {
    transform: none
}

.category_side>li>ul>li>a {
    font-size: 14px;
    font-weight: 400
}

.category_side>li>a {
    font-size: 14px;
    padding: 12px 0;
    font-weight: 500
}

.sd2024-count-down.cds-row {
    border-radius: var(--radius-m);
    margin: 0 auto 6px
}

.categories_swiper .swiper-wrapper .swiper-slide {
    transform: scale(1);
    transition: .3s ease
}

.categories_swiper .swiper-wrapper .swiper-slide:active {
    transform: scale(.9)
}

.grb-item-box .grb-thum {
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid #eee
}

.grb-item-box .grb-name,
.grb-item-box .grb-price {
    letter-spacing: -1px
}

.notice_slider {
    height: 35px
}

.notice_slider-item {
    background-color: var(--tintBlue);
    border-radius: var(--radius-m)
}

.notice_slider-link {
    color: var(--blue200);
    display: block
}

.notice_slider-link>span {
    font-weight: 400
}

.main-slider-banner {
    border-radius: var(--radius-m, 16px);
    overflow: hidden
}

.service .item-white {
    background-color: #fff
}

.service .img-bg {
    width: 40%;
    margin: 0 auto 10px
}

.service .cds-font-body-bd {
    font-size: 14px;
    letter-spacing: -1px;
    font-weight: 600;
    color: #777
}

.service .dp-none {
    display: none
}

.over-hidden {
    overflow: hidden
}

.lh-0 {
    line-height: 0
}

.service-slider .swiper-wrapper {
    padding-bottom: 20px
}

.service-slider .swiper-slide a {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--radius-m);
    color: #fff;
    padding: 64% 0 0 12px;
    box-sizing: border-box
}

.service-slider .swiper-slide a .service-slider__sm-title {
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0
}

.service-slider .swiper-slide a .service-slider__sm-title.color-bk {
    color: #191f28
}

.service-slider .swiper-slide a .service-slider__lg-title {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -.025em
}

.service-slider .swiper-slide a .service-slider__lg-title.color-bk {
    color: #191f28
}

.service-slider__new-badge {
    position: relative
}

.service-slider__new-badge:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 45px;
    height: 45px;
    background: url(https://tennismetro.s3.ap-northeast-2.amazonaws.com/commerce/board/upload/service_icon/new-badge.png) 0 0/100% no-repeat;
    z-index: 1
}

.service-slider__rfinder {
    background: #ff9800 url(https://tennismetro.s3.ap-northeast-2.amazonaws.com/commerce/board/upload/service_icon/service_bg_rfinder.png) 50% 12%/58% no-repeat
}

.service-slider__strGuide {
    background: #5888ff url(https://tennismetro.s3.ap-northeast-2.amazonaws.com/commerce/board/upload/service_icon/service_bg_strGuide.png) 50% 0%/48% no-repeat
}

.service-slider__onStr {
    background: #444 url(https://tennismetro.s3.ap-northeast-2.amazonaws.com/commerce/board/upload/service_icon/service_bg_onStr.png) 50% 15%/32% no-repeat
}

.service-slider__offStr {
    background: #00cc41 url(https://tennismetro.s3.ap-northeast-2.amazonaws.com/commerce/board/upload/service_icon/service_bg_offStr.png) 50% 17%/48% no-repeat
}

.service-slider__lesson {
    background: #f3f3f3 url(https://tennismetro.s3.ap-northeast-2.amazonaws.com/commerce/board/upload/service_icon/service_bg_lesson.png) 50% 15%/58% no-repeat;
    color: #333
}

.service-slider__tryout {
    background: #f291b0 url(https://tennismetro.s3.ap-northeast-2.amazonaws.com/commerce/board/upload/service_icon/service_bg_tryout.png) 50% 18%/58% no-repeat
}



.event-coupon-slider .swiper-slide a {
    display: block;
    width: 100%;
    aspect-ratio: 1.548;
    border-radius: 12px;
    color: #fff;
    padding: 0 0 0 0;
    box-sizing: border-box;
    
}

.event-coupon img{
    width: 95%;
}



.link-button {
  text-align: center;

}

.link-button a {
  text-decoration: none;
  color: #000;
  font-size: 18px;
  font-weight: 500;
    display: inline-flex;
  align-items: center; 
   line-height: 1.2; 
}

.link-button .highlight {
  color: var(--tmgr700); /* 주황색 강조 */
  font-weight: 600;
}

.link-button .arrow-btn {
    display: inline-block;
    background-color: #000;
    color: #fff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    font-size: 23px;
    margin-left: 6px;
    transition: background 0.3s 
ease;
    line-height: 0.65;
}

.link-button a:hover .arrow-btn {
  background-color: var(--tmgr700); /* hover 시 색상 변화 */
}






.linebanner .flex {
    display: flex
}

.linebanner .swiper-slide img {
    padding: 3px 13px
}

.linebanner .swiper-pagination {
    width: 60px;
    background: #000;
    position: absolute;
    padding: 2px 0;
    border-radius: 10px;
    background: 227, 227, 227, .3;
    font-size: 10px;
    font-weight: 600;
    color: #fff
}

.invite-slider {
    padding: 15px 10px;
    border-radius: 10px;
    color: #fff;
    background: #363e4b;
    font-weight: 500;
    font-size: 15px;
    background: linear-gradient(90deg, #363e4b, #7f92b1)
}

.add-slider {
    padding: 15px 10px;
    border-radius: 10px;
    color: #fff;
    background: #44ce42;
    font-weight: 500;
    font-size: 15px
}

.category_list {
    margin-bottom: 25px;
    display: flex;
    justify-content: space-between
}

.category_list a {
    font-size: 14px;
    color: #555;
    font-weight: 500;
    text-align: center;
    letter-spacing: -1.5px
}

.category_list li {
    width: 22%
}

.category_list li img {
    width: 100%;
    margin-bottom: -4.5px
}

.category_list .img-bg {
    width: 100%;
    margin-bottom: 5px;
    background: #f8f8f8;
    border-radius: 5px
}

.cds-slide-container.slide-02 {
    padding: 0 10px
}

.brand-slider {
    position: relative;
    padding-bottom: 20px
}

.brand-slider ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center
}

.brand-slider li {
    width: 32%;
    height: 70px;
    background: #f8f8f8;
    border-radius: 5px;
    text-align: center;
    margin-bottom: 8px;
    display: flex;
    justify-content: center;
    align-items: center
}

.brand-slider li img {
    width: 55%
}

.brand-slider li .w80 {
    width: 80%
}

.brand-slider li .w90 {
    width: 90%
}

.brand-slider li .dp-none {
    display: none
}

.brand-slider li.bg-white {
    background-color: #fff
}

.brand-slider .swiper-scrollbar.swiper-scrollbar-horizontal {
    height: 2.5px;
    position: absolute;
    bottom: 0;
    left: 0
}

.brand-slider .swiper-scrollbar-drag {
    background: #666
}

.brand-slider li img.new-brand {
    width: 100%
}



.badge-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 5px;  
  justify-content: center;
}


/* 기본 버튼 스타일 */
.badge-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;        /* 동그란 캡슐 */
  border: 1px solid #ddd;
  background-color: #ffffff;
  cursor: pointer;
  font-size: 13px;
  color: #333;
  transition: background-color 0.2s ease, 
              color 0.2s ease,
              border-color 0.2s ease;
}

/* 아이콘 동그라미 */
.badge-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  /* 안에 아이콘 이미지 넣을 거면
     background-image / background-size 로 교체하면 됨 */

 /*background: url("https://www.tennismetro.co.kr/data/editor/promotion/251104_smashing_2025/images/Timer.gif") center/70% no-repeat #ffffff; /* 예시 */
}

/* 호버 시 색 채워지는 효과 */
.badge-btn:hover {
  background-color: #29c52b;   /* 지정 컬러 */
  border-color: #29c52b;
  color: #ffffff;
}

/* 버튼이 초록색이 되면 아이콘도 같이 반전 */
.badge-btn:hover .badge-icon {
  border-color: #ffffff;
  background-color: #ffffff;
}
.badge-icon img {
  width: 100%;
  height: auto;
}