@charset "utf-8";
/*
2024-04-04 (주)파이브센스_FIVESENSES.Corp.

본 라이브러리(라이브러리 소스코드)는 (주)파이브센스의 자산입니다.
무단으로 외부로 유출 및 일시 반출을 할 경우 손해배상 책임 및 민사/형사적 책임이 있습니다.
*/

/* 타이틀 */
.main_sbtgb1 *{line-height: 1;}
.main_sbtgb1 .main_cont_title {display: flex; align-items: center; justify-content: space-between; margin-bottom: 27px;}
.main_sbtgb1 .main_cont_title .main_subject h2 {font-weight: 700; font-size: 28px; color: var(--main-point-color);}
.main_sbtgb1 .main_cont_title .main_subject h2 p {font-weight: 700; font-size: 28px; color: var(--main-point-color);}


.main_sbtgb1 .main_cont_title .tap_more a {font-size: 16px; color: #666;}

/* 카테고리 탭 */
/* .main_sbtgb1 .tap_list {display: flex; align-items: center; justify-content: space-between;} */
.main_sbtgb1 .tap_list ul {display: flex;gap: 0 10px;}
.main_sbtgb1 .tap_list ul li {display: flex; align-items: center; justify-self: center; height: 36px; border-radius: 5px;  padding: 0 20px; background: #f2f2f2;cursor: pointer;   }
.main_sbtgb1 .tap_list ul li span {display:inline-block;   font-size: 14px; transition: all .3s ease-in-out; color:#5d5e68;}
.main_sbtgb1 .tap_list ul li.active {background:#111;}
.main_sbtgb1 .tap_list ul li.active span {color: #ffffff;}

 
/* 카테고리 탭 */

@media (hover:hover) and (pointer: fine) {

    .main_sbtgb1 .tap_list ul li:hover span {background: #111111; color: #ffffff;}
}

/* 컨텐츠 영역 */
.main_sbtgb1 .tap_content  {margin-top: 40px; position: relative;}
.main_sbtgb1 .swiper_a {height: 100%; display: block; border-radius: 5px; background-color: #f5f5f5; overflow: hidden; transition: background-color .5s ease-in-out; }

.main_sbtgb1 .img_wrap{overflow: hidden; border-radius: 5px;}
.main_sbtgb1 .img_wrap .img_item{position: relative; transition: all .5s ease-in-out;}

.main_sbtgb1 .swiper_a:hover {background-color: #e8e8e8;}
.main_sbtgb1 .swiper_a:hover .img_wrap .img_item{transform: scale(1.1);}



.main_sbtgb1 .swiper-wrapper .via-flex {width: calc((100% - 25px *2)/3);}
.main_sbtgb1 .swiper-wrapper .via-flex:first-child {margin-right: 25px;}
.main_sbtgb1 .swiper-wrapper .via-flex:nth-child(2) {margin-right: 25px;}


/* 스와이퍼 버튼 */
.main_sbtgb1 .tap_content_box .swiper-button{top: 50%; width: 64px; opacity: .35; transition: all .5s; transition: all .5s;}
.main_sbtgb1 .tap_content_box .swiper-button img{border-radius: 50%; box-shadow: 3px 0 8px rgba(61,61,61,.15);}
.main_sbtgb1 .tap_content_box .swiper-button.swiper-button-next{right: -30px;}
.main_sbtgb1 .tap_content_box .swiper-button.swiper-button-prev{position: absolute; left:  -30px;}

.main_sbtgb1 .tap_content_box .swiper-button::after{display: none;}

.main_sbtgb1 .tap_content_box .swiper-button:hover {opacity: 1;}

/* 
.main_sbtgb1 .tap_content_box:hover .swiper-button{display: block;}
.main_sbtgb1 .tap_content_box:hover .swiper-button.swiper-button-disabled{opacity: 0;}

.main_sbtgb1 .tap_content_box .swiper-button:hover{opacity: 1;}
.main_sbtgb1 .tap_content_box .swiper-button.swiper-button-disabled:hover{opacity: 0;} */


@media all and (max-width: 991px) {
    .main_sbtgb1 .container_fix {padding: 0;}
    .main_sbtgb1 .main_cont_title {margin-bottom: clamp(20px,2.72452068617558vw,27px); padding: 0 15px;}
    .main_sbtgb1 .main_cont_title .main_subject h2 {font-size: clamp(21px,2.825428859737639vw,28px);}

    .main_sbtgb1 .tap_list {padding: 0 15px;}
    .main_sbtgb1 .tap_list ul {gap: 0 7.5px;}
    .main_sbtgb1 .tap_list ul li span {padding: 0 clamp(15px,2.018163471241171vw,20px); white-space: nowrap; line-height: clamp(29px,3.632694248234107vw,36px); font-size: clamp(12px,1.412714429868819vw,14px); border-radius: 2.5px;}
    .main_sbtgb1 .swiper_a {border-radius: 2.5px;}
    .main_sbtgb1 .img_wrap {border-radius: 2.5px;}
    .main_sbtgb1 .tap_content {margin-top: clamp(25px,4.036326942482341vw,40px);}
    .main_sbtgb1 .tap_content .swiper-container {padding: 0 15px;}
    .main_sbtgb1 .tap_content_box .swiper-button{display: none;}
}