/* 수술전후사진 타이틀 */
.bf_title {text-align: center;}
.bf_title h3 {font-size: 32px; line-height: 1; letter-spacing: -1.2px;}
.bf_title span {font-family: "Montserrat", sans-serif; font-size: 16px; color: #8a8a8a; font-weight:500; display: inline-block; margin-top: 10px;}
.bf_con {width: 100%; max-width: 760px; margin: 20px auto 0;}

/* 메인 사진 */
.bf_con .af_pic { width: 100%;border:1px solid #cacaca; position: relative;}
.ddo{display:none;padding:10px}
.af_pic .imgarea{ width:100%; display:inline-block; position:relative; aspect-ratio: 430/269; display: flex; align-items: center;}
.af_pic .img_tabn { display: flex; align-items: center;}
.af_pic .img_tabn li{ width:50%; background:#333; color:#fff; text-align:center; padding: 10px 0; letter-spacing: -1.2px;}
.af_pic .img_tabn li:last-child{background:#c89e87; color:#fff;}
.af_pic .img_label{width:100%; padding: 10px 0; text-align:center; background:#d3d3d3; color:#000000; letter-spacing: -1.2px;}

/* 이미지 필터(로그인) */
.img_filter {position:absolute; right: calc(50% / 2 - 20%); top:calc(50% - 44px); transform:translateY(-50%); background:#333333; width: 40%; height: 290px; z-index:5; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.img_filter img {width: 26px;height: 33px;}
.img_filter h1{font-size:20px;color:#fffefe;margin:10px 0}
.img_filter p{font-size:15px;color:#b5b5b5; margin-bottom: 20px;}
.img_filter a{margin: 0 auto; width: 60%;background:#c89e87; color:#fff; padding:5px;text-align:center;display:block;font-size:16px; }

/* 각도 탭 */
.af_btn_wr{width:100%; margin:20px auto 0; text-align:center;}
.af_btn{ margin-bottom:60px; display:inline-block;}
.af_btn .af_change{width:50px; height:50px; display: flex; align-items: center; justify-content: center; background:#000; color:#fff; cursor:pointer;letter-spacing: -1.2px;}
.af_btn .af_change.on{background:#c89e87; color:#fff;}

/* bf 사진 */
.bf_list > ul{width:100%; padding:1px; gap: 0 10px; margin:0 auto; overflow:hidden; display: flex; align-items: center;}
.bf_list ul li{padding:5px;width:25%; background:#fff; text-align:left;border:1px solid #ddd;}
.bf_list ul li:hover{border:1px solid #c29d87;box-shadow:1px 1px 0 #c29d87,-1px -1px 0 #c29d87;}
.bf_list ul .ons{border:1px solid #e0e0e0;}
.bf_list ul .imgarea{width:100%; position: relative; aspect-ratio: 430/269; display: flex; align-items: center;}
.bf_list ul .img_tabn{width:100%; display: flex;align-items: center; justify-content: center;}
.bf_list ul .img_tabn li{ width:50%; background:#000; color:#fff; text-align:center;font-size:10px; padding:4px 0; margin:0; border:none; box-sizing: border-box;}
.bf_list ul .img_tabn li:last-child{background:#c89e87; color:#fff; margin:0;}
.bf_list ul li .login_view {position: absolute; width: 50%;right: -25%; top: 50%; transform:translate(-50%, -50%);}

.bf_list_mo {
	display: none;
}

/* 페이징 */
.paging{text-align:center;margin: 50px auto;position:relative;}
.paging .num{vertical-align:top; display:inline-block;width:38px;height:38px;text-align:center;line-height:38px;color:#a8a8a8;border:1px solid #a8a8a8;}
.paging strong{vertical-align:top; display:inline-block;width:38px;height:38px;text-align:center;line-height:38px;color:#000;border:1px solid #000;}
.paging img {width: 40px;}
.prev {margin-right: 40px;}
.next {margin-left: 40px;}

@media (max-width: 1200px){
	
	/* 메인 사진 */
	.bf_con .af_pic { width: 80%; margin: 0 auto;}
	.ddo{display:none;padding:10px}
	.af_pic .imgarea{ width:100%; display:flex; align-items: center; position:relative; }
	.af_pic .img_tabn { display: flex; align-items: center;}
	.af_pic .img_tabn li{ width:50%; background:#333; color:#fff; text-align:center; padding: 10px 0;}
	.af_pic .img_tabn li:last-child{background:#7ac8d7; color:#fff;}
	.af_pic .img_label{width:100%; padding: 10px 0; text-align:center; background:#d3d3d3; color:#000000}

}


@media (max-width: 768px){
	.bf_con,.bf_list, .paging {display: none;}
	.bf_list_mo {display: block;width:100%;min-width: 300px;margin: 40px auto 0;}
	.bf_list_mo > ul {display: flex;flex-direction: column;gap: 40px 0;}
	.bf_list_mo > ul > li {border:1px solid #cacaca; text-align: center;}
	.bf_list_mo > ul > li .img_label {font-size: 18px; padding: 6px 0; background: #e5e5e5;}
	.bf_list_mo > ul > li .img_tabn {display: flex;align-items: center;}
	.bf_list_mo > ul > li .img_tabn li {font-size: 18px; font-weight: 400; padding: 6px 0; width:50%; background:#000; color:#fff; text-align:center;}
	.bf_list_mo > ul > li .img_tabn li:last-child{background:#c89e87; }
	.bf_list_mo > ul > li .imgarea {position: relative; display: flex; align-items: center; aspect-ratio: 430/269;}
	.bf_list_mo > ul > li .imgarea a {position: absolute;right: 0;top: 50%;transform: translateY(-50%);width: 50%;}
	.bf_list_mo .more_btn {
		cursor: pointer;
		display: flex;
		margin: 50px auto;
		justify-content: center;
		padding: 15px 0;
		background-color: transparent;
		width: 50%;
		min-width: 200px;
		align-items: center;
		gap: 0 24px;
		font-size: 20px;
		font-weight: 500;
		color:#3d3d3d;
		border: 1px solid #a3a3a3;
		border-radius: 50px;
	}
	.bf_list_mo .more_btn img {
		object-fit: contain;
		width: 20px;
		height: 10px;
	}
}