/*
(주)파이브센스_FIVESENSES.Corp.
파이브프로_FIVEPro_웹솔루션.
본 라이브러리(소스코드 및 디자인 포함)는 (주)파이브센스의 자산이며, 저작권법 및 부정경쟁방지법에 의해 보호됩니다.
무단 사용, 외부 유출, 복제, 배포, 변형을 금지합니다.
위반 시 민·형사상 법적 책임 및 손해배상 청구 대상이 됩니다.
작성일: 2025-03-18 | 저작권자: (주)파이브센스(520-86-01244) | All Rights Reserved.
*/

.main_mb16 {
    display: flex;
    flex-direction: column;
}

.main_mb16 .main_cont_container {
    position: relative;
    flex: 1;
    overflow: hidden;
}

/* 스와이프 */
.main_mb16 .swiper {
    /* widget-wrap before보다 위로 올라오게 결정 */
    z-index: 2;
    height: 100%;
}

.main_mb16 .swiper-wrapper {
    height: 100%;
}

.main_mb16 .swiper-slide {
    position: relative;
    z-index: 1;
}

.main_mb16 .swiper-slide.swiper-slide-active {
    /* 슬라이드 fade 중첩 효과 이슈로 active 순서 필요 */
    z-index: 2;
}

/* 스와이프 이미지 */
.main_mb16 .img_container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.main_mb16 .img_container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 스와이프 동영상 */
.main_mb16 .iframe_container {
    height: 100%;
    overflow: hidden;
    position: relative;
}

.main_mb16 .iframe_container .iframe_container_inner {
    width: 100%;
    height: 100%;
    padding-bottom: 56.25%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.main_mb16 .iframe_container iframe {
    position: absolute;
    left: 0;
    top: -60px;
    width: 100%;
    height: calc(100% + 120px);
    object-fit: cover;
}

/* 스와이프 동영상 요소이미지 */
.main_mb16 .iframe_container .itemSubVideoImg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.main_mb16 .iframe_overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 1;
    cursor: grab; /* 스와이프 UI 힌트를 제공 */
}

/* 스와이프 정보 */
.main_mb16 .swiper_info_container {
    width: 100%;
    position: absolute;
    top: 28%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    padding: 0 15px;
    text-align: left;
	max-width:1620px;
}

/* 스와이프 요소이미지 */
.main_mb16 .swiper_info_container .itemSubImg {
    width: auto;
    margin: 0 auto 30px auto;
}

/* 스와이프 타이틀 */
.main_mb16 .swiper_title {
    margin-bottom: 35px;
}

.main_mb16 .swiper_title h2 {
    font-size: 80px;
    font-weight: bold;
    color: #fff;
    display: inline-block;
    width: auto;
	line-height:92px;
}

/* 스와이프 서브타이틀 */
.main_mb16 .swiper_subtitle {
    margin-bottom: 80px;
}

.main_mb16 .swiper_subtitle h3 {
    font-size: 26px;
    font-weight: 600;
    color: #fff;
    display: inline-block;
    width: auto;
}

/* 스와이프 재생버튼, 검색창, 카테고리 */
.main_mb16 .bottom_container {
    position: absolute;
    top: 49.7%;
    right: 0;
    transform: translateY(-50%);
    z-index: 10;
	max-width:1630px;
	width: auto;
}

/* 스와이프 재생버튼 */
.main_mb16 .swiper_btn_container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 60px;
	position:absolute;
	left:23px;
	bottom:-18px;
}

.main_mb16 .swiper_btn {
    width: 30px;
    height: 30px;
    position: relative;
}

.main_mb16 .swiper_btn button {
    width: 100%;
    height: 100%;
    font-size: 15px;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 스와이프 페이지네이션 정보 */
.main_mb16 .swiper-pagination {
    position: relative; /* 기존 position 없애기 */
    width: auto;
}

.main_mb16 .swiper-pagination-fraction {
    font-size: 15px;
    font-weight: 500;
    color: #fff;
    margin: 0 10px 0 30px;
}

/* 기존 pagination 세팅 제거 */
.main_mb16 .swiper-pagination-fraction {
    top: 0;
    bottom: 0;
    left: 0;
	letter-spacing:1px;
}

/* 스와이프 화살표 정보 */
.main_mb16 .swiper_arr {
    display: flex;
    align-items: center;
}

.main_mb16 .swiper_arr p {
    color: rgba(255,255,255,0.5);
    font-size: 16px;
    margin: 0 20px;
}

/* 기존 navigation 세팅 제거 */
.main_mb16 .swiper-button-next:after,
.main_mb16 .swiper-button-prev:after {
    font-size: 12px;
}

.main_mb16 .swiper-button-next {
	margin-left:18px;
}

.main_mb16 .swiper-button-prev,
.main_mb16 .swiper-rtl .swiper-button-next {
    left: 0;
    right: 0;
}
.main_mb16 .swiper-button-next,
.main_mb16 .swiper-button-prev {
    position: static;
    width: auto;
    height: auto;
    margin-top: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

/* 검색창 */
.main_mb16 .search_container {
	width:100%;
}

.main_mb16 .search_container .search {
    width: 100%;
    max-width: 530px;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    margin-left: auto;
    /* overflow: hidden; */
    position: relative;
}

.main_mb16 .search_container .search input {
    width: calc(100% - 69px);
    font-size: 18px;
    font-weight: 400;
    color: #cccccc;
    background: #fff;
    border-radius: 10px 0 0 10px;
    padding: 20px 10px 20px 30px;
    margin: 0;
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: 0;
}

.main_mb16 .search_container .search button {
    width: 70px;
    background: #235bf5;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    border-radius: 0 10px 10px 0;
}

/* 링크 카테고리 */
.main_mb16 .link_cate_container {
    margin-top: 42px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 25px 30px;
	max-width:530px;
}

.main_mb16 .link_cate_container .cate_list {
    width: 110px;
    height: 110px;
    background: #fff;
    border-radius: 10px;
}

.main_mb16 .link_cate_container .cate_list.on {background: #235bf5;}

.main_mb16 .link_cate_container .cate_list a {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.main_mb16 .link_cate_container .cate_list img {
    margin-bottom: 15px;
    display: none;
}

.main_mb16 .link_cate_container .cate_list img.defaultImg {display: block; max-width: 100% !important;}
.main_mb16 .link_cate_container .cate_list.on img.defaultImg {display: none;}
.main_mb16 .link_cate_container .cate_list.on img.hoverImg {display: block;}

.main_mb16 .link_cate_container .cate_list h4 {
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: #888888;
}

.main_mb16 .link_cate_container .cate_list.on h4 {color: #fff;}

/* 스크롤 화살표 */
.main_mb16 .swiper_scroll_container {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.main_mb16 .swiper_scroll_container p {
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}

.main_mb16 .swiper_scroll_container img {
    margin: 10px auto 0 auto;
    animation: arrow-bounce 1.5s infinite ease-in-out;
	width:16px;
}

@keyframes arrow-bounce {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(10px);
    }
}



/* 헤더 > 검색창 하단의 검색 내용 미리보기 ( PC )
html\thema\Fivesense-basic\shop.head.php */
.main_mb16 .search_preview_box {position: absolute; left: 50%; top: 100%; z-index: 10; width: 100%; max-width: 530px; visibility: hidden; height: 0; transition: all .5s; overflow: hidden; transform: translateX(-50%);}
.main_mb16 .search_preview_box.active{visibility: visible;}
.main_mb16 .search_preview_box .search_preview_list{background-color: #fff; border: 2px solid #235bf5; /*height: 430px;*/ height: auto; position: relative; border-radius: 10px;}
.main_mb16 .search_preview_box .search_preview_list .loading{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 14px; font-style: oblique;}
.main_mb16 .search_preview_box .search_preview_list li:hover {background: #f7f7f7;}
.main_mb16 .search_preview_box .search_preview_list li:last-child a {padding: 10px 15px 16px 19px;}
.main_mb16 .search_preview_box .search_preview_list li + li {border-top: 1px solid #eee;}
.main_mb16 .search_preview_box .search_preview_list li a{display: flex; align-items: center; padding: 10px 15px 10px 19px; cursor: pointer; /*transition: all .5s;*/}
.main_mb16 .search_preview_box .search_preview_list li .left {width: 50px; border-radius: 5px; overflow: hidden; margin-right: 12px;}
.main_mb16 .search_preview_box .search_preview_list li .right {display: flex; align-items: flex-start; justify-content: space-between; width: calc(100% - 50px);}
.main_mb16 .search_preview_box .search_preview_list li .right .preview_title {font-size: 13px; font-weight: 400; color: var(--main-point-color); line-height: 1; overflow: hidden;text-overflow: ellipsis;white-space: normal;word-wrap: break-word;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;}
.main_mb16 .search_preview_box .search_preview_list li .right .preview_title .search_keyword {font-weight: 700;}
.main_mb16 .search_preview_box .search_preview_list li .right .preview_price {font-size: 14px; font-weight: 700; color: var(--main-point-color); margin-top: 8px;}
.main_mb16 .search_preview_box .search_preview_list li .right .real_price {font-size: 12px; font-weight: 400; color: #999; text-decoration: line-through; margin-left: 2px;}
.main_mb16 .search_preview_box #searchBox{display: block;}

/* 피씨 검색로딩 */
.main_mb16 #searchBox{display: none;}
.main_mb16 #searchBox * {font-family: 'Pretendard';}
.main_mb16 #searchBox .search_bot .search_preview_container .search_preview_top {display: flex; align-items: flex-end; justify-content: space-between; padding: 20px 20px 12px;}
.main_mb16 #searchBox .search_bot .search_preview_container .search_preview_top .preview_top_title {font-size: 15px; line-height: 1.2; font-weight: 700; color: var(--main-point-color);}
.main_mb16 #searchBox .search_bot .search_preview_container .search_recommend_top .recommend_top_title {font-size: 15px; line-height: 1.2; font-weight: 700; color: var(--main-point-color); text-align: left; padding: 25px 20px 12px;}
.main_mb16 #searchBox .search_bot .search_preview_container .search_preview_top .all_delete_btn {border: none; width: auto; white-space : nowrap; background-color: transparent; position: relative; top: 9px; right: 0; color: #b1b1b1; font-size: 13px;}
.main_mb16 #searchBox .search_bot .search_preview_container .search_preview_top .all_delete_btn{top: 3px;}
.main_mb16 #searchBox .search_bot .search_preview_container .search_preview_mid .preview_list{padding: 0 15px; display: flex; flex-wrap : wrap; gap: 6px;}
.main_mb16 #searchBox .search_bot .search_preview_container .search_preview_mid .preview_list li {padding: 0;}
.main_mb16 #searchBox .search_bot .search_preview_container .search_preview_mid .preview_list li:hover {background-color: transparent;}
.main_mb16 #searchBox .search_bot .search_preview_container .search_preview_mid .preview_list li a {display: flex; align-items: center; justify-content: space-between; padding: 0 11px; border: none; background-color: #f5f5f5; border-radius: 16px;}
.main_mb16 #searchBox .search_bot .search_preview_container .search_preview_mid .preview_list li + li {border-top: none;}
.main_mb16 #searchBox .search_bot .search_preview_container .search_preview_mid .preview_list li + li a {margin-left: 0px;}
.main_mb16 #searchBox .search_bot .search_preview_container .search_preview_mid .preview_list li .left { width: auto; overflow: visible; border-radius: 0; margin-right: 0;}
.main_mb16 #searchBox .search_bot .search_preview_container .search_preview_mid .preview_list li .left p { font-size: 14px; font-weight: 400; color: #444; line-height: 32px; white-space : nowrap;}
.main_mb16 #searchBox .search_bot .search_preview_container .search_preview_mid .preview_list li .right{background-color: transparent; border: none; margin-left: 9px; position: relative; top: 0; right: 0; transform: none; width: 10px;}
.main_mb16 #searchBox .search_bot .search_preview_container .search_recommend_mid .recommend_list {display: flex; flex-wrap : wrap; gap: 6px; padding: 0 15px;}
.main_mb16 #searchBox .search_bot .search_preview_container .search_recommend_mid .recommend_list li {display: block; height: 33px; padding: 0;}
.main_mb16 #searchBox .search_bot .search_preview_container .search_recommend_mid .recommend_list li:hover {background-color: #fff;}
.main_mb16 #searchBox .search_bot .search_preview_container .search_recommend_mid .recommend_list li + li {border: none;}
.main_mb16 #searchBox .search_bot .search_preview_container .search_recommend_mid .recommend_list li a {display: block; font-size: 14px; font-weight: 400; color: var(--main-point-color-hover); line-height: 32px; padding: 0 11px; background-color: var(--main-point-bg-soft-color); border-radius: 16.5px;}
.main_mb16 #searchBox .search_bot .search_preview_container .search_preview_mid .more_keyword .more_keyword_btn button {border: 1px solid #e1e1e1; background-color: #fff; border-radius: 16.25px; width: 87.5px; height: 32.5px; margin: 15px auto 0; font-size: 11px; color: #333; line-height: 30.5px;}
.main_mb16 #searchBox .search_bot .search_preview_container .search_preview_mid .more_keyword .more_keyword_btn .arrow {display: inline-block; font-family: 'SUIT', sans-serif; font-weight: 500; transform: rotate(90deg); margin-left: 2px;}
.main_mb16 #searchBox .search_bot .search_preview_container .search_preview_mid .list_off{color: #999999; font-size: 13px; font-weight: 400; padding: 0 5px; text-align: left;}
.main_mb16 #searchBox .search_bot .search_preview_container .search_preview_mid .list_off img{display: block; margin: 0 auto 15px; width: 41px; height: 41px;}
.main_mb16 #searchBox .search_bot .search_preview_container .search_preview_bot{padding-bottom: 20px;}
.main_mb16 #searchBox .search_bot .search_preview_container .search_preview_bot .keyword_rank_box_title {font-size: 15px; line-height: 1.2; font-weight: 700; color: var(--main-point-color); text-align: left; padding: 30px 20px 5px;}
.main_mb16 #searchBox .search_bot .search_preview_container .search_preview_bot > p {font-size: 10px; font-weight: 400; color: #999; text-align: left; padding-left: 15px; margin: 10px 0 10px;}
.main_mb16 #searchBox .search_bot .search_preview_container .search_preview_bot .rank_box .rank_list {padding: 0 20px;}
.main_mb16 #searchBox .search_bot .search_preview_container .search_preview_bot .rank_box .rank_list .rank_li {padding: 0;}

.main_mb16 #searchBox .search_bot .search_preview_container .search_preview_bot .rank_box .rank_list .rank_li:hover{background-color: #fff;}
.main_mb16 #searchBox .search_bot .search_preview_container .search_preview_bot .rank_box .rank_list .rank_li + .rank_li {margin-left: auto; border: none;}
.main_mb16 #searchBox .search_bot .search_preview_container .search_preview_bot .rank_box .rank_list .rank_li + .rank_li a {margin-left: auto; border-top: none;}
.main_mb16 #searchBox .search_bot .search_preview_container .search_preview_bot .rank_box .rank_list .rank_li .rank_a {font-size: 15px; line-height: 30px; font-weight: 400; display: flex; align-items: center; width: 100%; padding: 0;}
.main_mb16 #searchBox .search_bot .search_preview_container .search_preview_bot .rank_box .rank_list .rank_li .rank_a .num {font-family: "Open Sans", sans-serif; font-weight: 700; width: 20px; text-align: left; color: var(--main-point-color)  !important; transition: 0.2s;}
.main_mb16 #searchBox .search_bot .search_preview_container .search_preview_bot .rank_box .rank_list .rank_li .rank_a:hover .num {color: var(--main-point-color-hover) !important;}
.main_mb16 #searchBox .search_bot .search_preview_container .search_preview_bot .rank_box .rank_list .rank_li .rank_a .keyword {color: #666;}
.main_mb16 #searchBox .search_bot .search_preview_container .search_preview_bot .rank_box .rank_list .rank_li .rank_a:hover .keyword {color: var(--main-point-color-hover);}
.main_mb16 #searchBox .search_bot .search_preview_container .search_preview_bot .rank_box .rank_list .rank_li .rank_a .status {margin-left: auto; position: relative;}
.main_mb16 #searchBox .search_bot .search_preview_container .search_preview_bot .rank_box .rank_list .rank_li .rank_a .status.rank_up:before {content: ""; border-bottom: 5.5px solid #f86e78; border-left: 4.5px solid rgba(0, 0, 0, 0); border-right: 4.5px solid rgba(0, 0, 0, 0); position: absolute; left: -5px; top: 50%; transform: translatey(-50%);}
.main_mb16 #searchBox .search_bot .search_preview_container .search_preview_bot .rank_box .rank_list .rank_li .rank_a .status.rank_down:before {content: ""; border-top: 5.5px solid #aaa; border-left: 4.5px solid rgba(0, 0, 0, 0); border-right: 4.5px solid rgba(0, 0, 0, 0); position: absolute; left: -5px; top: 50%; transform: translatey(-50%);}
.main_mb16 #searchBox .search_bot .search_preview_container .search_preview_bot .rank_box .rank_list .rank_li .rank_a .status.rank_keep:before {content: ""; display: inline-block; width: 6px; height: 1px; background: #aaa; position: absolute; left: -5px; top: 50%; transform: translatey(-50%);}