@charset "utf-8";
/* ******************************************************
	@list | table
*******************************************************/

/* ******************************************************
	table__primary
*******************************************************/
.table__primary table{border-top:2px solid #434343;font-size:14px}
.table__primary thead th{padding:10px 4px;border-bottom:1px solid #eee;font-weight:700}
.table__primary tbody td{padding:10px 4px;border-bottom:1px solid #eee}
.table__primary .nodata{padding:10px 4px;text-align:center;border-bottom:1px solid #eee;font-size:14px;}
/*주요 공지*/
.table__primary .point {background:#fffafa;font-weight:600;}

@media all and (max-width:640px){
	.table__primary tbody td{font-size:14px;}
}


/* ******************************************************
	@paging
*******************************************************/
.pagination__basic{margin-top:20px;}
.pageNumDiv{display:flex;justify-content: center;}
.pageNumDiv a{margin:0 3px;padding:4px;width: 30px;display: block;text-align: center;height: 30px;color:#828282;}
.pageNumDiv a.on,
.pageNumDiv a:hover,
.pageNumDiv a:focus{font-weight:700;text-decoration: underline;color:#111;}
.pageNumDiv .first,
.pageNumDiv .prev,
.pageNumDiv .next,
.pageNumDiv .last{color:#d9d9d9;letter-spacing: -1px}
.pageNumDiv .first:hover,.pageNumDiv .first:focus,
.pageNumDiv .prev:hover,.pageNumDiv .prev:focus,
.pageNumDiv .next:hover,.pageNumDiv .next:focus,
.pageNumDiv .last:hover,.pageNumDiv .last:focus{color:#111;}

.page_more{display:block;margin:0 auto;width:240px;height:50px;line-height:50px;border:1px solid #333; text-align:center; font-size:14px;color:#1D1D1F;}
.page_more:hover,
.page_more:focus{font-weight:700;}
.page_more i{display:inline-block;margin-left:5px;margin-bottom:4px;width:24px;height:24px;background:url(https://bodyfriend.speedgabia.com/img/bodyfriend/icon/icon_arrow_down_24_b.svg)no-repeat center;vertical-align: middle;}
.page_more.no_more{background:#f5f5f5;border-color:#ccc;color:#ccc;cursor:default;}

@media all and (max-width:1180px){
	.pagination__basic{margin:20px 0;}
}
@media all and (max-width:640px){
	.pageNumDiv a{border:1px solid #f5f5f5;font-size:13px;}
	.page_more{width:190px;height:45px;line-height:45px;font-weight:600;}
}
@media all and (max-width:320px){
	.page_more i{width:18px;height:18px;background-size:100%;}
}

/* ******************************************************
	@side_search,side_btns 리스트 검색
*******************************************************/
.side_btns.right {float:right;margin-top:-50px;}
.side_btns .btn{padding:8px 20px;border-radius: 4px;font-size:16px;}
.side_search{display: flex;justify-content: flex-end;margin-top:10px;margin-bottom:10px;}
.side_search.wide{display:block;justify-content: inherit;width:100%;}
.side_search .search_box{border:1px solid #eee;display: inline-block;}
.side_search.wide .search_box{display:block;}
.side_search .search_box input{padding:4px 10px;border:0;}
.side_search.wide .search_box input{width:calc(100% - 35px);}
.side_search .search_box .btn_search{display: inline-block;width:30px;height:30px;background:url(https://bodyfriend.speedgabia.com/img/bodyfriend/icon/icon_search_black.svg)no-repeat center;vertical-align: middle;}

@media all and (max-width:414px){
.side_btns.right {float:inherit;display:flex;margin-top:0;margin-bottom:10px;justify-content: end;}	
.side_btns .btn{font-size:14px;padding:5px 15px;}
}

/* ******************************************************
	fold_list_item 			아코디언, 접이식 리스트.
	faq_list			자주물어보는 질문 FAQ, 
	qna_catalog_list	문의답변, 
	review_list			구매후기
*******************************************************/
.review_list,
.qna_catalog_list,
.faq_list{border-top: 2px solid #434343;}


/*문의답변 , 구매후기*/
.fold_list_item{border-bottom: 1px solid #eee;font-size:13px;}
.fold_list_item:hover{box-shadow:0 0 10px rgba(0,0,0,0.1);}
.fold_list_item.active{background:#f8f9fb;}
.fold_list_item .fold_q_detail{display:none;}
.fold_list_item.active .fold_q_detail{display:block;}

/*문의답변*/
.fold_list_q {display:block;position:relative;padding:20px 10px;}
.fold_list_q .category{padding:2px 6px; border:1px solid #d4202b;color:#d4202b;font-size:12px;}
.fold_list_q .state{padding:2px 10px; border:1px solid #36f;color:#36f;}
.fold_list_q .title{margin:10px 0;font-weight:700;font-size:14px;cursor:pointer;}
.fold_list_q .date{color:#666;}
.faq_list .fold_list_q .category{display:inline-block;margin:10px 5px 0 0;}
.fold_q_detail{padding:10px;background:#f8f9fb;}
.fold_q_detail .thumbnail{max-width:300px;max-height: 300px;overflow: hidden;position: relative;top: inherit; left: inherit; right: inherit;}
.fold_q_detail .thumbnail img{max-width:100%;width:auto;}
.fold_q_detail p{word-break:break-all;}

.fold_a_detail{position:relative; padding:10px 10px 10px 40px;background:#f8f9fb;border-top:1px dashed #ddd;}
.fold_a_detail p{word-break:break-all;}
.fold_a_detail:before,
.fold_a_detail:after{content:"";position: absolute;width:10px;height:1px;background:#333;}
.fold_a_detail:before{top: 22px;left: 15px;}
.fold_a_detail:after{top: 17px;left:10px;transform: rotate(90deg);}

.fold_list_item .links{margin-top:10px;padding:10px 0;border-top:1px solid #e0e0e0;}
.fold_list_item .links *{font-size:13px;}
.fold_list_item .links li{display:flex;justify-content: space-between;}
.fold_list_item .links li span:first-child{min-width:70px;}
.fold_list_item .links li span a{color:#2f80ed;word-break: break-all;}

@media all and (max-width:414px){
	.fold_a_detail{padding:10px 10px 10px 20px;}
	.fold_a_detail:before, .fold_a_detail:after{width:5px;}
	.fold_a_detail:before{top: 19px;left: 8px;}
	.fold_a_detail:after{top: 17px;left: 5px;}
}

/*자주물어보는 질문 FAQ*/
.faq_list {margin-top:40px;}
.faq_list .fold_list_q {padding:10px;}
.faq_list .fold_list_q .btn_toggle {margin-top:10px;width:20px;height:20px;float:right;background:url(https://bodyfriend.speedgabia.com/img/bodyfriend/icon/icon_arrow_down.svg)no-repeat center;}
.faq_list .fold_list_q.open .btn_toggle {transform:rotate(180deg);}
.faq_list .fold_list_q .title{display:inline-block;width:calc(100% - 25px);}
/* ******************************************************
	notice_list 공지사항
*******************************************************/
.notice_list .num{width:8%;}/* 번호 */
.notice_list .title{width:auto;}/* 제목 */
.notice_list .author{width:12%;}/* 작성자 */
.notice_list .date{width:15%;}/* 작성일 */
.notice_list .views{width:8%;}/* 조회 */
.notice_list tbody td{text-align: center;}
.notice_list tbody .title{text-align: left;}
.notice_list .point .num > em{display:inline-block;padding:2px 6px;background:#d4202b;color:#fff;border-radius: 4px;font-size:12px;}

@media all and (max-width:540px){
	.notice_list .num,
	.notice_list .author,
	.notice_list .views{display:none;}
	.notice_list .date{width:28%;}
}
/* ******************************************************
	board_detail 공지사항 상세, 자료실 상세, 이벤트 상세
*******************************************************/
.board_detail .top{border-top:2px solid #434343;}
.board_detail .top .title{display:block;padding:10px 0 10px 0;line-height:1.4;font-size:20px;font-weight:600;word-break:keep-all;}
.board_detail .top .info {display:flex;flex-wrap:wrap;justify-content: space-between;padding:10px 0 10px 0;border-bottom:1px solid #eee;font-size:14px;}
.board_detail .top .info .writer{font-weight:600;}
.board_detail .top .info ul{display:flex;}
.board_detail .top .info li{padding:0 0 0 20px;color:#666;}
.board_detail .con{padding:20px 0;border-bottom:1px solid #eee;}
.board_detail .con p,
.board_detail .con table,
.board_detail .con div,
.board_detail .con *{font-size:14px;}
.board_detail .con table{table-layout: auto;}
.board_detail .con img{margin:auto;max-width:100%;}
.board_detail .files{padding:10px 0;border-bottom:1px solid #eee;}
.board_detail .files img{max-width:100%;}
.board_detail .files > a{display:inline-block;padding:4px 10px 4px 35px;background:url(https://bodyfriend.speedgabia.com/img/bodyfriend/icon/icon_download.svg)no-repeat 10px center #f5f5f5;background-size:15px;border-radius:4px; font-size:12px;color:#666;}

.board_detail .con iframe,
.board_detail .con video{min-height:630px;border-radius: 10px;}
#notice_detail .con iframe,
#notice_detail .con .video{border-radius: 0;min-height:auto;}
/*이벤트 상세*/
.board_detail .con.end_event img{filter:grayscale(1);opacity: .5;}
#event_detail .con img{display:block;}
#event_detail .con video{display:block;margin:0 auto;width:auto;max-width:100%;min-height:auto;border-radius:0;}
.event_end_viewer{padding: 45px 20px;background: #f5f5f5;font-size: 25px;font-family: 'bodyfriend-B';text-align: center;}

/*단독이벤트*/
.standalone .board_detail .top .title,
.standalone .board_detail .top .info,
.standalone .button_group{display:none;}
.standalone .board_detail .top,
.standalone .board_detail .con{padding:0;border:0;}

.event_live_wrap{margin:0 0 40px 0;}
.event_live_wrap #shoplive-overall-area{padding:0;min-height:inherit;}
.event_live_wrap iframe{min-height:inherit !important;}
.event_live_wrap #shoplive-player{margin-bottom:40px;}
.event_live_wrap #shoplive-player .cloud-shoplive,
.event_live_wrap .layout-horizontal{margin-bottom:0 !important;}

.event_live_wrap .live_talk_wrap h3{text-align:left;}
.event_live_wrap .live_talk_wrap h3,
.event_list_products_cont h3{font-size:20px !important;padding-bottom: 20px;padding-left: 5px;margin-bottom:40px;border-bottom: 1px solid #000;}
#event_list_products{height:auto !important; min-height:350px !important; display: grid;grid-template-columns: repeat(4, 1fr);grid-auto-rows: auto;grid-column-gap: 10px; grid-row-gap: 50px;}
#event_list_products .product_box_wrap{display:block;overflow: hidden; border-radius: 10px;border: 0.5px solid #D9D9D9;background: #FFF;width:auto;margin:0;float:inherit;}
#event_list_products .product_box_wrap > a {display: block; padding: 25px 20px 30px;}
#event_list_products .product_box_wrap .product_name em{font-size:16px;font-weight:700;display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
#event_list_products .product_box_wrap .product_name em br{display:none;}
#event_list_products .product_box_wrap .img {position:relative;height:auto;min-height:165px;}
#event_list_products .product_box_wrap .img img{max-width: 165px;position:relative;top:0;left:0; transform: translate(0,0) scale(1);}
#event_list_products .product_box_wrap .img.sold_out_img img{filter:opacity(0.5);}
#event_list_products .product_box_wrap .info {margin-top:30px;padding:0;}
#event_list_products .product_box_wrap .payinfo {margin: 15px 0 5px;}
#event_list_products .product_box_wrap .payinfo .pay{margin: 10px 0;display:flex;justify-content:space-between;}
#event_list_products .product_box_wrap .payinfo .pay .tt {font-size: 13px;}
#event_list_products .product_box_wrap .payinfo .pay span:last-child *{text-align: right;font-size: 12px;}
#event_list_products .product_box_wrap .payinfo .pay span del {color: #989898;display:inline;}
#event_list_products .product_box_wrap .payinfo .pay .price_sell{display:inline;}
#event_list_products .product_box_wrap .payinfo .pay .price_sell strong{font-size: 14px;}
#event_list_products .product_box_wrap .percent {padding: 1px 5px; border-radius: 3px;color:#9a1e23;margin-right:2px;}
#event_list_products .product_box .sold_out{opacity:1; padding:10px 20px;position: absolute;bottom:0;left:0;width:100%;height:100%;font-size:15px;}
#event_list_products .product_box .sold_out em{position: absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;z-index: 1;font-size:30px;font-weight:700;color:#9a1e23;}
#event_list_products .product_box .sold_out a{position: absolute;left:50%;bottom: 25%;transform:translateX(-50%);padding: 10px 20px;width: auto;background: #ffffff;border:0;color: #000000;font-size:13px;display: block;height: 43px;top: inherit;text-align: center;border-radius: 2px;z-index: 1;font-size: 16px;border-radius: 30px;transition:all .2s;}
#event_list_products .product_box .sold_out a:before,
#event_list_products .product_box .sold_out a:after{display:none;}
#event_list_products .product_box .sold_out a:hover,
#event_list_products .product_box .product_box .sold_out a:focus{font-weight:600;}

@media all and (max-width:1350px){
	#event_list_products .product_box_wrap .payinfo .pay .price_sell{display:block;margin-top: 3px;}
}

@media all and (max-width:1024px){
	.board_detail .con iframe,.board_detail .con video{min-height:566px;}
}
@media all and (max-width:830px){
	.board_detail .con iframe,.board_detail .con video{min-height:458px;}
	#event_list_products{grid-template-columns: repeat(3, 1fr);}
	#event_list_products .product_box_wrap .img img{max-width: 150px;}
}
@media all and (max-width:768px){
	.board_detail .con iframe,.board_detail .con video{min-height:420px;}
}
@media all and (max-width:640px){
	.board_detail .con iframe,.board_detail .con video{min-height:auto;}
	.board_detail .top .title{font-size:14px;}
	.board_detail .top .info ul{font-size:13px;}
	.event_list_products_cont h3 {padding-bottom:15px; margin-bottom: 20px;}
	#event_list_products{height:auto !important; display:block; min-height: auto !important; overflow-x: auto;white-space: nowrap;}
	#event_list_products .product_box_wrap{ display:inline-block;min-height:336px; margin: 5px; min-width:230px;max-width: 230px;}
	#event_list_products .product_box_wrap > a {padding: 10px;}
	#event_list_products .product_box_wrap .info {margin-top:20px;}
	#event_list_products .product_box_wrap .img img{max-width: 127px;}
	#event_list_products .product_box_wrap .payinfo .pay{display:block;margin: 15px 0 0;}
	#event_list_products .product_box_wrap .payinfo .pay .tt {display:block;margin-bottom:7px;}
	#event_list_products .product_box_wrap .payinfo .pay span:last-child * {text-align: left;}
	#event_list_products .product_box_wrap .payinfo .pay span del{margin:0 5px;}
	#event_list_products .product_box_wrap .payinfo .pay .price_sell{display:inline;}
}
@media all and (max-width:450px){
	.board_detail .top .info ul{display:block;}
	.board_detail .top .info ul li{text-align: right;}
	
}

@media all and (max-width:414px){
    #event_list_products .product_box_wrap .img{min-height:130px;}
}
/* ******************************************************
	reference_list 자료실 리스트
*******************************************************/
.reference_list {margin-top:40px;border-top: 2px solid #434343;}
.reference_item{display:inline-block;width:calc(20% - 12px);margin-right:12px;}
.reference_list ul{display:flex;flex-wrap:wrap; padding:40px 0 170px 0;}
.reference_list ul li{float:left;margin:0 15px 40px 0;width:calc(20% - 12px);}
.reference_list ul li:nth-child(5n){margin-right:0;}
.reference_item .thumbnail, .reference_item .title, .reference_item .date,
.reference_list .thumbnail,
.reference_list .title,
.reference_list .date{display:block;}
.reference_item .thumbnail,
.reference_list .thumbnail{margin-bottom:15px;border:1px solid #e0e0e0;width:100%;height:218px;overflow:hidden;}
.reference_item .thumbnail img,
.reference_list .thumbnail img{width:100%;}
.reference_item .title,
.reference_list .title{display:-webkit-box;text-overflow:ellipsis; -webkit-line-clamp: 2; -webkit-box-orient:vertical;word-wrap:break-word;margin-bottom:10px;max-height:48px;font-size:16px;font-family: 'NotoSansKR-Medium';overflow: hidden;}
.reference_item .date,
.reference_list .date{margin-bottom:15px;font-size:14px;color:#969696; }
.reference_item .file,
.reference_list .file{padding:7px 10px 7px 35px;background:url(https://bodyfriend.speedgabia.com/img/bodyfriend/icon/icon_download.svg)no-repeat 10px center #f5f5f5;border-radius:5px; font-size:14px;}
.reference_item .file:hover,.reference_item .file:focus,.reference_item .file:active,
.reference_list .file:hover,.reference_list .file:focus,.reference_list .file:active{box-shadow: 0,0,5px,rgba(0,0,0,0.1);}
@media all and (max-width:1024px){
.reference_item .thumbnail,
.reference_list .thumbnail{height:195px;}
}
@media all and (max-width:830px){
.reference_item .thumbnail,
.reference_list .thumbnail{height:150px;}
}
@media all and (max-width:768px){
.reference_list ul{padding:40px 70px 50px 70px;}
.reference_list ul li{width:calc(50% - 12px);}
.reference_list ul li:nth-child(5n){margin-right:15px;}
.reference_list ul li:nth-child(2n){margin-right:0;}
.reference_list .thumbnail{height:290px;}
}
@media all and (max-width:640px){
.reference_list ul{padding:40px 0px 40px 0px;}
}
@media all and (max-width:540px){
.reference_list{margin-top:20px;}
.reference_list .thumbnail{height:250px;}
}
@media all and (max-width:414px){
.reference_list .thumbnail{margin-bottom:10px;height:190px;}
.reference_list .title{font-size:14px;}
.reference_list .date{margin-bottom:5px;font-size:12px;}
.reference_list .file{padding:5px 8px 5px 33px;font-size:12px;background-size: 15px;}
}
@media all and (max-width:375px){
.reference_list .thumbnail{height:170px;}
}
@media all and (max-width:360px){
.reference_list .thumbnail{height:150px;}	
}
@media all and (max-width:320px){
.reference_list .thumbnail{height:auto;}	
}

/* 자료실 상세 */
#reference_contents .reference_info {font-size: 18px; margin-bottom: 20px; word-break: keep-all;}
#reference_contents .reference_content_list { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; }
#reference_contents .reference_content_list .reference_content_item { width: calc(100% / 4); margin-bottom: 50px;}
#reference_contents .reference_content_list .reference_content_item > img { width: 100%; object-fit: contain; }
@media all and (max-width:768px){
	#reference_contents .reference_content_list .reference_content_item { width: calc(100% / 2); }
	#reference_contents .reference_info {font-size: 15px; margin-bottom: 15px;}
}
@media all and (max-width:540px){
	#reference_contents .reference_info {font-size: 12px; margin-bottom: 10px;}
	#reference_contents .reference_content_list .reference_content_item { width: 100%; margin-bottom: 30px;}
}

/* ******************************************************
	event_list 이벤트
*******************************************************/
#event_winner input[type=hidden],
#event_end input[type=hidden],
#event_ing input[type=hidden]{padding:0;border:0;position: absolute;left:-9999px;}
.event_notice_list{margin-top:40px;}
.event_notice_list tbody td{text-align: center;}
.event_notice_list .num{width:8%;}/* 번호 */
.event_notice_list .title{width:auto;text-align: left;}
.event_notice_list .date{width:15%}
.event_notice_list .date_range{width:25%;}

.event_list li:first-child{margin-top:40px;}
.event_list li {margin-bottom:20px;overflow:hidden;}
.event_list li > a{display:flex;flex-wrap:wrap;}
.event_list .img{display:block;width:450px;background:#f5f5f5;overflow:hidden;}
.event_list .img img{width:100%;}
.event_list .txt{display:block;padding:0 20px;width:calc(100% - 450px);}
.event_list .badges .badge{margin-right:2px;padding:2px 8px;border-radius: 20px;font-size:12px;}
.event_list .badges .badge.doing{background:#111;color:#fff;}
.event_list .badges .badge.onoff{border:1px solid #e0e0e0;color:#ccc;}
.event_list .badges .badge.limited{background: #F85E73;color:#fff;}
.event_list .badges .badge.regular{background: #2080E1;color:#fff;}
.event_list .badges .badge.info{background: #772525;color:#fff;}
.event_list .title{display:block;padding:10px 0;font-size:18px;line-height:1.4;word-break:keep-all;}
.event_list .date{display:block;font-size:13px;color:#666;}
.event_list li.end .img{position: relative;}
.event_list li.end .img img{filter: grayscale(1);}
.event_list li.end .end_txt{position: absolute;left:0;width:100%;height:100%;}
.event_list li.end .end_txt:before{content:"";position:absolute;top:0;left:0; width:100%;height:100%;background:rgba(0,0,0,0.7);color:#fff;z-index: 2;}
.event_list li.end .end_txt em{position: absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index: 3;color:#fff;font-size:22px;font-weight:600;}
.event_list .nodata{text-align:center;}

@media all and (max-width:1024px){
	.event_list .img{width:350px;}	
}

@media all and (max-width:768px){
	.event_list li{margin-bottom:0;}
	.event_list li > a{display:block;position: relative;padding:40px 0 20px 0;border-bottom:1px solid #e0e0e0;}
	.event_list .img{width:100%;text-align: center;}
	.event_list .img{margin:0 auto 0 auto;max-width:450px;}
	.event_list .txt{margin:0 auto;padding:0;width:450px;}
	.event_list .badges .badge{font-size:11px;}
}

@media all and (max-width:640px){
	.event_notice_list,
	.event_list li:first-child{margin-top:20px;}
	.event_list .img{max-width:initial;}
	.event_list .txt{width:100%;}
	.event_list .title{font-size:16px;}	
}

@media all and (max-width:540px){
	.event_notice_list .num,
	.event_notice_list .date{display:none;}
	.event_notice_list .date_range{width:25%;text-align: left;}
	.event_list .title{padding:5px 0;font-size:14px;}
}

@media all and (max-width:414px){
	.event_list li > a{padding:20px 0;}
	.event_notice_list .date_range{width:28%;}
}

/* ******************************************************
	magazine_list 매거진 Healthy Life 10Years More
*******************************************************/
.magazine_list{display:flex;flex-wrap:wrap;}
.magazine_list li{padding-right:20px;margin-bottom:20px;width:25%;}
.magazine_list li:nth-child(4n){padding-right:0;}
.magazine_list li > a{display:block;}
.magazine_list li .img{height:267px;border:1px solid #e0e0e0;overflow:hidden;}
.magazine_list li .img img{width:100%;transform:scale(1);transition:all .3s;}
.magazine_list li .img,
.magazine_list li .txt{display:block;}
.magazine_list li .title{display:block;line-height:1.4;font-size:15px;word-break:keep-all;}
.magazine_list li > a:hover img,
.magazine_list li > a:focus img{transform:scale(1.1);}
@media all and (max-width:1200px){
    .magazine_list li .img{height:auto;}
}
@media all and (max-width:1024px){
	.magazine_list li{width:50%;padding-right:10px;}
	.magazine_list li .img{height:auto;max-height:480px;}
	.magazine_list li:nth-child(2n){padding-right:0;}
}
@media all and (max-width:768px){
	.magazine_list li .img{max-height:360px;}
}
@media all and (max-width:640px){
	.magazine_list li .img{max-height:300px;}
}
@media all and (max-width:414px){
	.magazine_list li {padding-right:0;width:100%;}
	.magazine_list li .img{max-height:initial;}
	.magazine_list li .title{padding:5px 0;}
}


/* ******************************************************
	notice_news_list 보도자료
*******************************************************/
.notice_news_list{margin-top:-40px;}
.notice_news_list li{border-bottom:1px solid #e0e0e0;}
.notice_news_list li > a{display:block;padding:20px 0;}
.notice_news_list .badge{display:inline-block;padding:1px 6px;font-size:12px;background:#666;color:#fff;}
.notice_news_list .txt{display:block;margin:5px 0;}
.notice_news_list .title{font-size:16px;line-height:1.4;}
.notice_news_list .info{display:block;}
.notice_news_list .info em{margin-right:10px;font-size:13px;color:#666;}