/* 
    Tribe Gourmet Veiw css 
*/

/************ layout ************/

header {width: 100%; height: 48px; left: 0; top: 0; z-index: 999;}
.header {position: relative; z-index: 999; width: 100%; background-color: #fff;}
.header .btn_prev {position: absolute; top: 8px; left: 8px; width: 32px; height: 32px; background: url(../images/icon/ico_arrowB_back.png) no-repeat 50% 50%; background-size: 32px 32px;}
.header .btn_prev._wht {background: url(../images/icon/ico_arrowB_back_wht.png) no-repeat 50% 50%; background-size: 32px 32px;} 
.sub_container {min-height: 100%; padding-bottom: 85px;}
.sec_in {padding-left: 24px; padding-right: 24px;}





/************ tribeView ************/

.sub_tribeView {/*margin-top: -48px; 헤더 필요할 경우 */}
.tribeView_titBox {padding: 28px 0 20px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.08);}
.tribeView_titBox .badgeArea {font-size: 0; line-height: 0;}
.tribeView_titBox .badgeArea div {}
.tribeView_titBox .badgeArea div + div {margin-left: 4px}

/* swiper */
.sub_tribeView .top_gallery {min-height: 375px;}
.sub_tribeView .top_gallery li {width: 100%; height: auto;}
.sub_tribeView .top_gallery li img {width: 100%; height: auto;}
.sub_tribeView .top_gallery .swiper-pagination {color: #fff; font-size: 12px; font-weight: 700; letter-spacing: -0.1em; bottom: 20px; width: 34px; background: rgba(255, 255, 255, 0.12); padding: 2px 6px; border-radius: 15px; left: calc(100% - 54px);}
@media screen and (max-width: 320px) {
    .sub_tribeView .top_gallery {min-height: 320px;}
}
@media screen and (max-width: 280px) {
    .sub_tribeView .top_gallery {min-height: 280px;}
}

.sub_tribeView .mid_gallery li {width: 100%; height: auto;}
.sub_tribeView .mid_gallery li img {width: 100%; height: auto;border-radius: 15px;}
.sub_tribeView .mid_gallery li img.radius_8 {border-radius: 8px;} /* 2024-01-02 Q20016 추가 */
.sub_tribeView .mid_gallery .swiper-pagination {color: #fff; font-size: 12px; font-weight: 700; letter-spacing: -0.1em; bottom: 20px; width: 34px; background: rgba(255, 255, 255, 0.12); padding: 2px 6px; border-radius: 15px; left: calc(100% - 54px);}

/* 메뉴 둘러보기 */
.sub_tribeView .menu_img_wrap {overflow-x: auto;}
.sub_tribeView .menu_img_wrap ul {display:inline-block; font-size:0; width:max-content; margin-top:12px; padding:0 24px;}
.sub_tribeView .menu_img_wrap ul li {display: inline-block; width: 120px; min-height: 120px; vertical-align: top;}
.sub_tribeView .menu_img_wrap.w160 {padding-bottom: 20px;}
.sub_tribeView .menu_img_wrap.w160 ul li {display: inline-block; width: 160px; min-height: 160px; vertical-align: top;}
.sub_tribeView .menu_img_wrap ul li + li {margin-left: 6px;}
.sub_tribeView .menu_img_wrap ul li img {width: 120px; height: 120px; border-radius: 10px;}
.sub_tribeView .menu_img_wrap.w160 ul li img {width: 160px; height: 160px; border-radius: 10px;}
.sub_tribeView .menu_img_wrap.w160 ul li img.radius_4 { border-radius: 4px; } /* 2024-01-02 Q20016 추가 */
.sub_tribeView .menu_img_wrap.w160 ul li p {padding-right:8px;margin-top:8px}

.sub_tribeView .menu_img_wrap.w215 {padding-bottom: 20px;}
.sub_tribeView .menu_img_wrap.w215 ul li {display: inline-block; width: 215px; min-height: 146px; vertical-align: top;}
.sub_tribeView .menu_img_wrap.w215 ul li img {width: 215px; height: 146px; border-radius: 10px;}
.sub_tribeView .menu_img_wrap.w215 ul li img.radius_4 { border-radius: 4px; } /* 2024-01-02 Q20016 추가 */
.sub_tribeView .menu_img_wrap.w215 ul li p {padding-right:8px;margin-top:8px}


.sub_container .bul_txt{ position: relative; padding-left:9px}
.sub_container .bul_txt::before{ content: ''; display: inline-block; position: absolute; top: 12px; left: 1px; width: 2px; height: 2px; background: rgba(0,0,0,0.4); border-radius: 100%;}

.sub_container .dash_list01> li:before {content:''; display:inline-block; position:absolute; width:4px; height:1px; top:9px; background:rgba(0,0,0,0.4); left:1px; font-weight:500;}
.sub_container .tribe_red {color:#e3001f;font-size: 14px;font-weight: 700;}
.sub_container .tribe_green {color:#008C15;font-size: 14px;font-weight: 700;}
.sub_container .tribe_pink {color:#FB1A77;font-size: 14px;font-weight: 700;}
.sub_container .top_numtext {background-color: #000;border-radius: 16px;color: #fff;font-size:12px;font-weight: 700;vertical-align: top;padding:2px 6px}
.sub_container .border_none {border-top:none}
.sub_container .bort {border-top:1px solid #ebebeb}
.sub_container .arrowB {display: block;text-align: right;}
.sub_container .arrowB span {background: url(../images/icon/ico_arrowB_forward.png) no-repeat 100% 50%;background-size: 16px 16px;}
.sub_container .font_normal {font-weight: normal;}
.sub_container .detail_img {width:100%}
.sub_container .bt_text {margin-top:25px;border-top:1px solid #ebebeb;padding-top:12px}

/* 2025-04-11 Q11817 리스트 타입 추가 */
.sub_tribeView .blk_number {counter-reset: num;}
.sub_tribeView .blk_number li { position: relative; padding-left: 24px; counter-increment: num; font-size: 14px;}
.sub_tribeView .blk_number li + li { margin-top: 8px;}
.sub_tribeView .blk_number li::before {position: absolute; top: 2px; left: 0; display: inline-block; width: 16px; height: 16px; line-height: 16px; border-radius: 50%; color: #fff; background: #000; content: counter(num); text-align: center; font-size: 10px; font-weight: 500;}

/* 2025-04-29 GGU477 [APP][혜택] TRIBE 이벤트 페이지 제작(신라면세점) */
.sub_tribeView .top_visualVan {width: 100%; height: auto;}
.sub_tribeView .top_visualVan > img {width: 100%;}
.sub_tribeView .pic img {width: 100%; height: auto;}
img.radius_8 {border-radius: 8px;}
.sub_container .dash_list01 > li:before {content:''; display:inline-block; position:absolute; width:4px; height:1px; top:9px; background:rgba(0,0,0,0.4); left:1px; font-weight:500;}

/* 
    * darkmode 
*/
@media (prefers-color-scheme: dark) {

    /************ layout ************/
    .header .btn_prev {background: url(../images/icon/ico_arrowB_back_wht.png) no-repeat 50% 50%; background-size: 32px 32px;}


    
    /************ tribeView ************/
    .tribeView_titBox {border-bottom: 1px solid rgba(255, 255, 255, 0.08);}
    .box_table table th {border-color:rgba(255,255,255,.04);}
    .box_table table td {border-color:rgba(255,255,255,.04);}

    .bul_txt::before{ background: rgba(255,255,255,0.4); }
    .sub_container .dash_list01 > li:before {background:rgba(255,255,255,0.4);} /* 2025-04-29 GGU477 추가 */

}