@charset "utf-8";
html, body{
	overflow-x: hidden;
}

/* ====================================

									doctor section

==================================== */


#sec01{
	padding-top: 200px;
	/* padding-bottom: 160px; */

	position: relative;
}

	#sec01 .deco_text{
		white-space: nowrap;
		font-size: 11.375rem;
		letter-spacing: -0.6rem;

		position: absolute;
		z-index: -1;
		top: 125px; right: 0;
		color: #dec5ba;
		opacity: 0.2;
	}

	#sec01 .tit_box{
		color: rgba(222,197,186,.2);
		font-size: 11.375rem;	
	}


		#sec01 .tit_box .tit{
			/* text-align: center; */
			font-size: 3.125rem;
			font-weight: normal;
			color: var(--color04);
		}

			#sec01 .tit_box .tit span{
				color: #dec5ba;
				font-size: inherit;
			}



#sec02{
	padding-bottom: 150px;
	margin-top: 70px;
}

#sec02 .wrapper{}

#sec02 .doctor-list{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 60px;
}

#sec02 .doctor-list .doctor{
	width: calc( (100% - 60px) / 2 );

	display: flex;
	flex-direction: row;
	align-items: flex-end;
	gap: 30px;
}


#sec02 .doctor-list .doctor:not(:nth-of-type(-n+2)){
	margin-top: 30px;
}


#sec02 .doctor-list .doctor .left{
	width: 45%;
}

#sec02 .doctor-list .doctor .left figure{
	display: block;
	width: 100%;
	height: 0;
	padding-bottom: 425px;
	overflow: hidden;
	position: relative;
	background-color: #f8f3f1;
	border-radius: 20px;
}

#sec02 .doctor-list .doctor .left figure img{
	width: 98%;
	position: absolute;
	bottom: 0; left: 50%;
	transform: translateX(-50%);
}

#sec02 .doctor-list .doctor .right{
	width: calc( 55% - 30px );
}

#sec02 .doctor-list .doctor .right h2{
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	gap: 10px;
}

#sec02 .doctor-list .doctor .right h2 strong{
	font-size: 2.125rem;
	font-weight: 600;
}

#sec02 .doctor-list .doctor .right h2 span{
	font-size: 1rem;
	font-weight: 400;
}

#sec02 .doctor-list .doctor .right h3{
	margin-top: 40px;
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: 7px;
	position: relative;
}

#sec02 .doctor-list .doctor .right h3::after{
	content: "";
	width: 20px; height: 20px;
	background-color: #eee2dc;
	border-radius: 50%;
	position: absolute;
	top: -5px; right: -10px;
	z-index: -1;
}

#sec02 .doctor-list .doctor .right h3 i{
	display: block;
	width: 25px;
}

#sec02 .doctor-list .doctor .right h3 i img{
	width: 100%;
}

#sec02 .doctor-list .doctor .right h3 span{
	font-size: 1.25rem;
	font-weight: 600;
}

#sec02 .doctor-list .doctor .right .history-list{
	margin-top: 15px;
	height: 190px;
}

#sec02 .doctor-list .doctor .right .history-list li{
	position: relative;
	padding-left: 10px;
	word-break: keep-all;
	line-height: 1.3;
	font-size: 0.9375rem;
}

#sec02 .doctor-list .doctor .right .history-list li::before{
	content: "·";
	font-size: inherit;
	color: inherit;
	line-height: inherit;
	font-weight: 700;
	position: absolute;
	top: 0; left: 0;
}

#sec02 .doctor-list .doctor .right .history-list li:not(:first-of-type){
	margin-top: 5px;
}

#sec02 .doctor-list .doctor .right .btn_link{
	margin-top: 30px;
}

#sec02 .doctor-list .doctor .right .btn_link a{
	border-color: #66493d;
	padding: 10px 25px;
	font-size: 1.0625rem;
}

#sec02 .doctor-list .doctor .right .btn_link .arrow{
	width: 30px;
}

#sec02 .doctor-list .doctor .right .btn_link .line{
	background-color: #66493d;
	width: 30px;
}

#sec02 .doctor-list .doctor .right .btn_link svg{
	top: 1px;
}

#sec02 .doctor-list .doctor .right .btn_link .text{
	color: #66493d;
	margin-left: 15px;
}

#sec02 .doctor-list .doctor .right .btn_link a:hover .text{
	margin-left: 20px;
}

		


@media screen and (max-width: 1500px){
	#sec01 .deco_text{
		font-size: 10rem;
	}
}


@media screen and (max-width: 1400px){
	
	#sec02 .doctor-list .doctor .left{
		left: 50%;
	}

	#sec02 .doctor-list .doctor .left figure img{
		width: 100%;
	}

}




@media screen and (max-width: 1280px){
	#sec01{
		padding-top: 150px;
	}
	#sec01 .deco_text {
		font-size: 8.5rem;
		top: 105px;
	}


	#sec01 .tit_box .tit{
		font-size: 3rem;
	}
	

	#sec02 .doctor-list .doctor{
		flex-direction: column;
	}
	

	#sec02 .doctor-list .doctor .left{
		width: 100%;
	}

	#sec02 .doctor-list .doctor .left figure img{
		/* width: 55%; */
		width: 300px;
	}

	#sec02 .doctor-list .doctor .right{
		width: 100%;
		box-sizing: border-box;
		padding-left: 20px;
	}
	

	#sec02 .doctor-list .doctor .right h3{
		margin-top: 30px;
	}
	
}



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

	#sec01 .deco_text{
		font-size: 7.5rem;
	}
	

	#sec02 .doctor-list .doctor .left figure{
		padding-bottom: 395px;
	}
	#sec02 .doctor-list .doctor .left figure img{
		width: 270px;
	}



}




@media screen and (max-width: 900px){
	
	#sec01{
		padding-top: 130px;
	}

	#sec01 .tit_box .tit{
		font-size: 2.875rem;
	}

	#sec01 .deco_text{
		font-size: 6.2rem;
	}


	#sec02 .doctor-list{
		gap: 30px;
	}

	#sec02 .doctor-list .doctor {
		width: calc( (100% - 30px) / 2 );
	}
	
	#sec02 .doctor-list .doctor .left figure {
		padding-bottom: 365px;
	}

	#sec02 .doctor-list .doctor .left figure img{
		width: 240px;
	}
	

	#sec02 .doctor-list .doctor .right h2 strong{
		font-size: 1.875rem;
	}

	#sec02 .doctor-list .doctor .right h2 span{
		font-size: 0.9375rem;
	}

	#sec02 .doctor-list .doctor .right h3 i{
		width: 24px;
	}

}




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

	#sec01{
		padding-top: 90px;
	}
	#sec01 .tit_box .tit{
		font-size: 2rem;
	}
	
	#sec01 .deco_text{
		text-align: right;
		font-size: 4rem;
		letter-spacing: -.35rem;
		top: 65px;
	}
	#sec01 .deco_text br.mb{
		display: block;
	}
	

	#sec02{
		margin-top: 40px;
	}

	#sec02 .doctor-list{
		gap: 20px;
	}

	#sec02 .doctor-list .doctor{
		width: 100%;
		gap: 20px;
	}
	
	#sec02 .doctor-list .doctor:nth-of-type(2){
		margin-top: 30px;
	}

	#sec02 .doctor-list .doctor .left figure {
		padding-bottom: 265px;
	}

	#sec02 .doctor-list .doctor .left figure img {
		width: 180px;
	}

	#sec02 .doctor-list .doctor .right .history-list{
		height: auto;
	}

	#sec02 .doctor-list .doctor .right h2{
		gap: 7px;
	}

	#sec02 .doctor-list .doctor .right h2 strong{
		font-size: 1.5rem;
	}

	#sec02 .doctor-list .doctor .right h2 span{
		font-size: 0.8125rem;
	}
	
	#sec02 .doctor-list .doctor .right h3{
		margin-top: 25px;
	}

	#sec02 .doctor-list .doctor .right h3 i{
		width: 22px;
	}

	#sec02 .doctor-list .doctor .right h3 span{
		font-size: 1rem;
	}

	#sec02 .doctor-list .doctor .right h3::after{
		width: 12px; height: 12px;
		top: -2px; right: -8px;
	}

	#sec02 .doctor-list .doctor .right .history-list{
		margin-top: 10px;
	}

	#sec02 .doctor-list .doctor .right .history-list li{
		font-size: 0.8125rem;
		padding-left: 7px;
	}


	#sec02 .doctor-list .doctor .right .btn_link a{
		font-size: 0.9375rem;
		padding: 7px 20px;
	}

}


/* ====================================
   관리자 버튼 (list.skin)
==================================== */
.doctor_tit_box { position: relative; }
.doctor_write_btn {
	display: inline-block;
	padding: 10px 20px;
	background: #66493d;
	color: #fff;
	font-size: 14px;
	text-decoration: none;
	border-radius: 4px;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
}
.doctor_btn_row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.doctor_admin_links { display: flex; gap: 8px; margin-left: auto; }
.doctor_admin_links a {
	display: inline-block;
	padding: 6px 14px;
	font-size: 13px;
	color: #66493d;
	border: 1px solid #66493d;
	border-radius: 4px;
	text-decoration: none;
	background: transparent;
}
.doctor_admin_links a.doctor_admin_del { color: #c0392b; border-color: #c0392b; }

/* ====================================
   글쓰기 (write.skin)
==================================== */
.doctor_write { padding: 60px 0 120px; }
.doctor_write table { width: 100%; border-top: 2px solid #332a25; }
.doctor_write th,
.doctor_write td { padding: 16px 12px; border-bottom: 1px solid #e5e5e5; vertical-align: top; text-align: left; }
.doctor_write th { width: 180px; background: #f9f6f4; color: #332a25; font-weight: 600; }
.doctor_write input[type="text"],
.doctor_write textarea { width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; box-sizing: border-box; }
.doctor_write textarea { min-height: 140px; resize: vertical; }
.doctor_write .caution { margin-top: 8px; font-size: 13px; color: #888; }
.doctor_write .write_section { margin-bottom: 48px; }
.doctor_write .write_section h4 { margin-bottom: 16px; font-size: 1.125rem; color: #66493d; }
.doctor_write .btn_area { display: flex; justify-content: center; gap: 12px; margin-top: 40px; }
.doctor_write .btn_area a,
.doctor_write .btn_area button { display: inline-block; min-width: 120px; padding: 12px 24px; border: none; border-radius: 4px; font-size: 15px; cursor: pointer; text-align: center; text-decoration: none; }
.doctor_write .btn_cancel { background: #eee; color: #333; }
.doctor_write .btn_submit { background: #66493d; color: #fff; }
.doctor_write .file_del { display: block; margin-bottom: 8px; }
