/* 게시판 리스트 공통 */
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');
.bd_cate{margin-top: 0 !important;}
.bd_top{align-items: flex-end;}
.bd_top .total strong{font-weight: 800;}
.bd_top .bd_srh{gap: 1.875rem;}
.bd_top .bd_srh .select{width: 12.5rem; height: 3.75rem;}
.bd_top .bd_srh .select select{width: 100%; height: 100%; border: none !important; border-bottom: 1px solid #E5E5E5 !important; padding: 0 1rem; background: url(/img/board/bd_sel_ic.svg) no-repeat right 0.75rem center / 1.5rem; color: #AAA; outline: none !important; box-shadow: none !important;}
.bd_top .bd_srh .select select option{color: #000;}
.bd_top .bd_srh .input{position: relative; width: 27.5rem; height: 3.75rem;}
.bd_top .bd_srh .input input{width: 100%; height: 100%; border: none !important; border-bottom: 1px solid #E5E5E5 !important; background: none; outline: none !important; padding-right: 2.5rem; box-shadow: none !important;}
.bd_top .bd_srh .input input::placeholder{color: #AAA;}
.bd_top .bd_srh .input button{width: 1.38rem; border: none; background: none; position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
.bd_top .bd_srh .input button img{width: 100%;}
.no_data{width: 100% !important; border-top: 1px solid #000; border-bottom: 1px solid #000; padding: 10rem 0; display: flex !important; flex-direction: column; align-items: center; justify-content: center; margin: 0 !important; aspect-ratio: initial !important;}
.no_data .icon{width: 2.375rem;}
.no_data p{margin-top: 1.75rem; font-size: 1rem; text-align: center; line-height: 1.5;}

/* 장비소개 */
.bd_list_wrap .eq_list ul{display: flex; flex-wrap: wrap; gap: 3rem 1.1rem;}
.bd_list_wrap .eq_list li{width: calc((100% - 3.3rem) / 4); cursor: pointer;}
.bd_list_wrap .eq_list li .img{aspect-ratio: 195/226; background: #FFF; border-radius: 1.1rem; overflow: hidden;}
.bd_list_wrap .eq_list li .img img{width: 100%; height: 100%; object-fit: cover;}
.bd_list_wrap .eq_list li p{margin-top: 0.825rem;}

/* 팝업 */
.popup{display:none; position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 99999;}
.popup.on{display:block;}
.pop_bg{position: absolute; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.50); left: 0; top: 0;}
.popup .pop_inner{width: 62.5rem; max-width: calc(100% - 2.5rem); border-radius: 1.25rem; background: #FFF; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); padding: 2.5rem 3.25rem; overflow: hidden;}
.popup .pop_close{position: absolute; right: 1.25rem; top: 1.25rem; width: 2.78125rem; cursor: pointer; z-index: 5;}
.eq_pop .pop_inner::before{content: ''; display: block; aspect-ratio: 77/18; width: 14.54rem; background: url(/img/board/pop_logo.svg) no-repeat center / contain; position: absolute; right: 3.25rem; bottom: 2.5rem;}
.eq_pop .flex{align-items: flex-start; gap: 1.625rem;}
.eq_pop .swiper{border-radius: 1.25rem; border: 1px solid #E3E3E3; overflow: hidden; position: relative; width: 40%;}
.eq_pop .swiper .swiper-slide{aspect-ratio: 4/5;}
.eq_pop .swiper .swiper-slide img{width: 100%; height: 100%; object-fit: cover;}
.eq_pop .swiper .paging{position: absolute; display: flex; align-items: center; justify-content: center; gap: 0.625rem; left: 0; bottom: 1.25rem; width: 100%; z-index: 5;}
.eq_pop .swiper .paging span{background: #777; width: 0.625rem; height: 0.625rem; opacity: 0.5; margin: 0;}
.eq_pop .swiper .paging .swiper-pagination-bullet-active{opacity: 1;}
.eq_pop .txt{padding-top: 3.125rem; width: calc(60% - 1.625rem);}
.eq_pop .txt .title{margin-bottom: 1.875rem; padding-bottom: 1.875rem; border-bottom: 1px solid rgba(0,0,0,0.3);}
.eq_pop .txt .tit{font-size: 1.625rem;}
.eq_pop .txt .txt_s{color: #000;}
.eq_pop .txt .desc{padding-right: 1rem; color: #6D6D6D; max-height: 11rem; overflow-y: auto;}
.eq_pop .txt .desc p{white-space: pre-wrap;}
.eq_pop .txt .desc::-webkit-scrollbar {width: 3px;}
.eq_pop .txt .desc::-webkit-scrollbar-thumb {height: 30%; background: #878787;}
.eq_pop .txt .desc::-webkit-scrollbar-track {background: #D9D9D9;}

/* 온라인 예약 */
.bd_write_wrap .red{color: #DF001A;}
.bd_write_wrap .desc{margin-top: 0.625rem; display: none;}
.bd_write_wrap .desc.active{display: block;}
.bd_write_wrap .form{display: flex; flex-wrap: wrap; gap: 2rem 1.25rem;}
.bd_write_wrap .form dl:not(.full){width: calc(50% - (1.25rem / 2));}
.bd_write_wrap .form .full{width: 100%;}
.bd_write_wrap .form dl dt{font-weight: 600; margin-bottom: 0.625rem;}
.bd_write_wrap .form dl dd input,
.bd_write_wrap .form dl dd select,
.bd_write_wrap .form dl dd textarea{width: 100%; background: none; font-size: 1rem; padding: 1rem; border: 1px solid rgba(0,0,0,0.2) !important; outline: none !important; font-weight: 400; box-shadow: none !important;}
.bd_write_wrap .form dl dd input::placeholder,
.bd_write_wrap .form dl dd textarea::placeholder{color: #AAA;}
.bd_write_wrap .form dl dd .date_input{background: url(/img/board/cal_ic.svg) no-repeat right 1rem center / 1.25rem;}
.bd_write_wrap .form dl dd select{color: #AAA; background: url(/img/board/bd_sel_ic.svg) no-repeat right 0.75rem center / 1.625rem;}
.bd_write_wrap .form dl dd select option{color: #000;}
.bd_write_wrap .form dl dd textarea{height: 9rem !important; background: none !important;}
#captcha #captcha_info{font-size: 0.875rem; letter-spacing: -0.035rem; margin-top: 0.625rem;}
#captcha #captcha_key{font-size: 1rem; outline: none !important;}
#captcha_info_v3{display: none;}
.bd_write_wrap .dpp_captha{margin-top: 0;}
input[type="checkbox"]{width: 1.25rem; height: 1.25rem; background: url(/img/board/chk_ic.svg) no-repeat center / contain; appearance: none;}
input[type="checkbox"]:checked{background-image: url(/img/board/checked_ic.svg);}
.bd_write_wrap .agree .flex{gap: 0.625rem;}
.bd_write_wrap .agree label{font-weight: 500;}
.bd_write_wrap .agree .view{color: #8E8E8E; text-decoration: underline; text-underline-offset: 0.2rem; cursor: pointer;}
.bd_write_wrap .submit{padding: 1rem 2.25rem; background: #000; color: #FFF; font-weight: 600; border: none; display: inline-block;}

/* 완료 */
.success{padding: 6.25rem 0; border-top: 1px solid #000; border-bottom: 1px solid #000;}
.success{flex-direction: column; display: flex; align-items: center; gap: 1.25rem;}
.success .icon{width: 3.75rem;}
.success .btn_wrap{margin-top: 1.25rem;}
.success .btn_wrap a{font-weight: 600; background: #000; color: #FFF; padding: 0.85rem 2.25rem; display: inline-block;}

/* 시술 before&after */
.bna_list ul{display: flex; flex-wrap: wrap; gap: 3.75rem 1.875rem;}
.bna_list ul li{width: calc(50% - (1.875rem / 2));}
.bna_list ul li a{display: flex; flex-direction: column; gap: 1.06rem;}
.bna_list ul li a span{display: block;}
.bna_list ul li a .img{display: flex;}
.bna_list ul li a .img > span{width: 50%; aspect-ratio: 69/68; position: relative;}
.bna_list ul li a .img > span img{width: 100%; height: 100%; object-fit: cover;}
.bna_list ul li a .img > span .txt_s{position: absolute; left: 0; top: 0; font-family: "Nunito Sans"; padding: 0.5rem 1.25rem; letter-spacing: -0.0375rem;}
.bna_list ul li a .img .before .txt_s{color: #36435A; background: #FFF;}
.bna_list ul li a .img .after .txt_s{color: #FFF; background: #D8A48F;}
.bna_list ul li a .txt .txt_xs{font-weight: 600; color: #888;}



@media screen and (max-width:1024px){

	/* 게시판 리스트 공통 */
	.bd_top .bd_srh{gap: 0.75rem;}
	.bd_top .bd_srh .select{width: 8.5rem; height: 3rem;}
	.bd_top .bd_srh .select select{padding: 0 0.75rem; background: url(/img/board/bd_sel_ic.svg) no-repeat right 0.75rem center / 1.5rem;}
	.bd_top .bd_srh .input{width: 20.5rem; height: 3rem;}
	.bd_top .bd_srh .input input{padding-right: 2rem;}
	.bd_top .bd_srh .input button{width: 1rem;}
	.no_data{padding: 6rem 0;}
	.no_data .icon{width: 1.75rem;}
	.no_data p{margin-top: 1.25rem; font-size: 0.875rem;}

	/* 장비소개 */
	.bd_list_wrap .eq_list li{width: calc((100% - 2.2rem) / 3);}
	.bd_list_wrap .eq_list li .img{border-radius: 0.9325rem;}

	/* 팝업 */
	.popup .pop_inner{border-radius: 1.25rem; padding: 2rem;}
	.popup .pop_close{right: 1.25rem; top: 1.25rem; width: 1.75rem;}
	.eq_pop .pop_inner::before{width: 11rem; right: 2rem; bottom: 2rem;}
	.eq_pop .flex{gap: 1.625rem;}
	.eq_pop .swiper{border-radius: 1.25rem; width: 40%;}
	.eq_pop .swiper .paging{gap: 0.625rem; bottom: 1.125rem;}
	.eq_pop .swiper .paging span{width: 0.5rem; height: 0.5rem;}
	.eq_pop .txt{padding-top: 1rem; width: calc(60% - 1.625rem);}
	.eq_pop .txt .title{margin-bottom: 1.5rem; padding-bottom: 1.5rem;}
	.eq_pop .txt .tit{font-size: 1.25rem;}
	.eq_pop .txt .title .mt_20{margin-top: 0.625rem;}
	.eq_pop .txt .desc{padding-right: 1rem; max-height: 20vw;}

	/* 완료 */
	.success{padding: 4.375rem 0; gap: 1rem;}
	.success .icon{width: 3rem;}
	.success .btn_wrap{margin-top: 1rem;}
    .success .btn_wrap a{padding: 0.85rem 2rem;}

	/* 온라인 예약 */
	.bd_write_wrap .form dl dt{font-size: 0.9375rem;}
	.bd_write_wrap .form dl dd input,
	.bd_write_wrap .form dl dd select,
	.bd_write_wrap .form dl dd textarea{font-size: 0.875rem; padding: 1rem 0.9375rem;}

	/* 시술 before&after */
	.bna_list ul{gap: 3rem 1.25rem;}
	.bna_list ul li{width: calc(50% - (1.25rem / 2));}
	.bna_list ul li a .img > span .txt_s{padding: 0.45rem 1.125rem;}
}


@media screen and (max-width:768px){

	/* 게시판 리스트 공통 */
	.bd_top{flex-direction: column-reverse; gap: 3rem; align-items: flex-start;}
	.bd_top form{width: 100%;}
	.bd_top .bd_srh{gap: 0.625rem; width: 100%;}
	.bd_top .bd_srh .select{width: 6.5rem;}
	.bd_top .bd_srh .select select{height: 3rem; padding: 0 0.5rem; background: url(/img/board/bd_sel_ic.svg) no-repeat right 0.35rem center / 1.375rem;}
	.bd_top .bd_srh .input{width: calc(100% - 0.625rem - 6.5rem); height: 3rem;}
	.no_data{padding: 6rem 0;}
	.no_data .icon{width: 1.75rem;}
	.no_data p{margin-top: 1.25rem; font-size: 0.875rem;}

	/* 장비소개 */
	.bd_list_wrap form > .mt_30{margin-top: 1.25rem;}
	.bd_list_wrap .eq_list ul{gap: 2rem 1.1rem;}
	.bd_list_wrap .eq_list li{width: calc((100% - 1.1rem) / 2);}

	/* 팝업 */
	.popup .pop_inner{border-radius: 0.625rem; padding: 0;}
	.popup .pop_close{right: 0.68rem; top: 0.68rem; width: 1.75rem;}
	.eq_pop .pop_inner::before{display: none;}
	.eq_pop .flex{gap: 0; flex-direction: column;}
	.eq_pop .swiper{border-radius: 0; width: 100%; background: #F6F6F6;}
	.eq_pop .swiper .swiper-slide{aspect-ratio: 172/107;}
	.eq_pop .swiper .swiper-slide img{object-fit: contain;}
	.eq_pop .swiper .paging{gap: 0.625rem; bottom: 0.975rem;}
	.eq_pop .swiper .paging span{width: 0.4375rem; height: 0.4375rem;}
	.eq_pop .txt{padding: 1.25rem; width: 100%;}
	.eq_pop .txt .title{margin-bottom: 0.9375rem; padding-bottom: 0.9375rem;}
	.eq_pop .txt .tit{font-size: 1.125rem;}
	.eq_pop .txt .desc{padding-right: 0.875rem; max-height: 30vh;}

	/* 온라인 예약 */
	.bd_write_wrap .form{gap: 1.5rem;}
	.bd_write_wrap .form dl:not(.full){width: 100%;}
	.bd_write_wrap .form dl dt{margin-bottom: 0.5rem;}
	.bd_write_wrap .form dl dd .date_input{background-position: right 0.9375rem center;}
	.bd_write_wrap .agree .flex{gap: 0.25rem 0.625rem; align-items: flex-start;}
	.bd_write_wrap .agree label{display: block; max-width: calc(100% - 1.75rem);}
	.bd_write_wrap .dpp_captha{margin-top: 0;}
	input[type="checkbox"]{width: 1.125rem; min-width: 1.125rem; height: 1.125rem; margin-top: 0.125rem;}
	.bd_write_wrap .btn_wrap{margin-top: 2.5rem;}
	.bd_write_wrap .submit{padding: 0.9375rem 2.25rem;}

	/* 시술 before&after */
	.bna_list ul{gap: 2.5rem 1.25rem;}
	.bna_list ul li{width: 100%;}
	.bna_list ul li a{gap: 1rem;}
	.bna_list ul li a .img > span .txt_s{padding: 0.4rem 1rem; font-size: 0.75rem;}
	.bna_list ul li a .txt .txt_s{margin-top: 0.25rem;}
}