@charset "utf-8";


.doctor_modal_box{
	display: none;
	position: fixed;
	top: 0; left: 0;

	width: 100%; height: 100vh;
	z-index: 10000;
}

	.doctor_modal_box .modal_bg{
		position: absolute;
		top: 0; left: 0;
		cursor: pointer;

		width: 100%; height: 100%;
		background-color: rgba(0,0,0,.3);

		z-index: -3;
	}



	.doctor_modal_box .doctor_modal{
		width: 1200px; height: 700px;
		border-radius: 50px;
		/* background-color: #fff; */
		background: linear-gradient(to bottom, #fff 80%, var(--bg-color01) 20%);
		box-sizing: border-box;
		padding: 95px 90px;
		overflow: hidden;
		position: absolute;
		top: 50%; left: 50%;
		transform: translate(-50%,-50%);
		display: flex;
		flex-direction: row;
		align-items: flex-end;

		z-index: -2;
	}
		.doctor_modal_box .doctor_modal .btn_close{
			display: inline-block;
			width: 60px; height: 60px;
			background-color: #66493d;
			border-radius: 50%;

			position: absolute;
			top: 20px; right: 25px;

			transition: 0.3s;
			
			cursor: pointer;

			z-index: 1;
		}
			.doctor_modal_box .doctor_modal .btn_close:hover{
				opacity: 0.92;
			}

			.doctor_modal_box .doctor_modal .btn_close span{
				display: inline-block;
				width: 40%; height: 2px;
				background-color: #fff;

				position: absolute;
				left: 50%;
			}
			.doctor_modal_box .doctor_modal .btn_close span:nth-child(1){
				transform: translateX(-50%) rotate(45deg);
				top: 49%;
			}
			.doctor_modal_box .doctor_modal .btn_close span:nth-child(2){
				transform: translateX(-50%) rotate(-45deg);
				top: 49%;
			}


		.doctor_modal_box .doctor_modal .img-box{
			width: 35%;
		}	

		.doctor_modal_box .doctor_modal .img-box figure{
			width: 100%;
			height: 510px;
			overflow: hidden;
			position: relative;
			background-color: #f8f3f1;
			border-radius: 20px;
			overflow: hidden;
		}

		.doctor_modal_box .doctor_modal .img-box figure img{
			width: 100%;
			position: absolute;
			bottom: 0; left: 50%;
			transform: translateX(-50%);
		}

		.doctor_modal_box .doctor_modal  .doctor_info{
			width: 65%;

			box-sizing: border-box;
			padding-left: 30px;
			padding-bottom: 65px;
		}


			.doctor_modal_box .doctor_modal  .doctor_info .visible-scroll-box{
				display: flex;
				flex-wrap: wrap;
				gap: 20px;
				/* height: 270px; */
				height: 220px;
				overflow-y: auto;
				padding-top: 10px;
				padding-right: 15px;
				margin-top: 30px;
			}
			.doctor_modal_box .doctor_modal  .doctor_info .visible-scroll-box::-webkit-scrollbar {
				width: 6px;  /* 스크롤바의 너비 */
			}

			.doctor_modal_box .doctor_modal  .doctor_info .visible-scroll-box::-webkit-scrollbar-thumb {
				height: 30%; /* 스크롤바의 길이 */
				background-color: var(--color03); /* 스크롤바의 색상 */
				
				border-radius: 10px;
			}

			.doctor_modal_box .doctor_modal  .doctor_info .visible-scroll-box::-webkit-scrollbar-track {
				background-color: #f5f3f1;/*스크롤바 뒷 배경 색상*/
				border-radius: 10px;
			}

			.doctor_modal_box .doctor_modal .doctor_info h3{
				display: flex; align-items: flex-end;
				gap: 10px;
			}

				.doctor_modal_box .doctor_modal .doctor_info h3 strong{
					font-size: 2.5rem;
					font-weight: 600;
				}

				.doctor_modal_box .doctor_modal .doctor_info h3 span{
					font-size: 1.25rem;
					font-weight: 500;
				}
				

				.doctor_modal_box .doctor_modal .doctor_info > p{
					font-size: 1.4375rem;
					color: #66493d;
					line-height: 1.4;
					margin-top: 30px;
				}


			.doctor_modal_box .doctor_modal .doctor_info .visible-scroll-box > div{
				width: calc( (100% - 20px) / 2 );
			}


				.doctor_modal_box .doctor_modal .doctor_info .visible-scroll-box > div h4{
					display: flex;
					align-items: center;
					gap: 7px;

					padding-bottom: 10px;
					border-bottom: 1px solid #eaeaea;
				}

					.doctor_modal_box .doctor_modal .doctor_info .visible-scroll-box > div h4 i{
						display: inline-block;
						width: 25px;
					}

					.doctor_modal_box .doctor_modal .doctor_info .visible-scroll-box > div h4 i img{
						width: 100%;
					}

					.doctor_modal_box .doctor_modal .doctor_info .visible-scroll-box > div h4 span{
						font-size: 1.375rem;
						font-weight: 600;

						position: relative;
					}

						.doctor_modal_box .doctor_modal .doctor_info .visible-scroll-box > div h4 span::after{
							content: "";
							width: 20px; height: 20px;
							border-radius: 50%;
							background-color: #eee2dc;
							position: absolute;
							right: -10px;	top: -25%;
							z-index: -1;
						}


				.doctor_modal_box .doctor_modal .doctor_info .visible-scroll-box > div ul{
					margin-top: 15px;
				}

					.doctor_modal_box .doctor_modal .doctor_info .visible-scroll-box > div ul li{
						font-size: 0.9375rem;
						line-height: 1.4;
						position: relative;
						padding-left: 7px;
						word-break: keep-all;
					}
					
					.doctor_modal_box .doctor_modal .doctor_info .visible-scroll-box > div ul li::before{
						content: "·";
						font-size: inherit;
						font-weight: 800;
						color: inherit;
						position: absolute;
						top: 0; left: 0;

					}

						.doctor_modal_box .doctor_modal .doctor_info .visible-scroll-box > div ul li:not(:last-of-type){
							margin-bottom: 7px;
						}


					.doctor_modal_box .doctor_modal .doctor_info .visible-scroll-box > div.thesis_box li{
						line-height: 1.3;
					}
						.doctor_modal_box .doctor_modal .doctor_info .visible-scroll-box > div.thesis_box li span{
							display: inline-block;
							margin-top: 5px;
							line-height: 1.3;
							font-size: 0.875rem;
							opacity: 0.5;
						}

				
				.doctor_modal_box .doctor_modal .doctor_info figure{
					position: absolute;
					bottom: -5px;
					right: -20px;
					pointer-events: none;
				}

					.doctor_modal_box .doctor_modal .doctor_info figure img{}




	

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


	@media screen and (max-width: 1300px){
		.doctor_modal_box .doctor_modal{
			width: 85%; 
			/* height: 80vh; */
		}

		.doctor_modal_box .doctor_modal .doctor_info{
			/* width: 55%; */
			/* height: calc( 80vh - calc( 95px * 2 ) ); */
		}

		.doctor_modal_box .doctor_modal .doctor_info .visible-scroll-box > div h4 span{
			font-size: 1.375rem;
		}

		.doctor_modal_box .doctor_modal .doctor_info figure {
			bottom: -5px;
			right: -70px;
			text-align: center;
		}
			.doctor_modal_box .doctor_modal .doctor_info figure img {
				width: 85%;
			}


			.doctor_modal_box .doctor_modal .doctor_info .visible-scroll-box{
				height: 205px;
			}
	}

	@media screen and (max-width: 1200px){
		
		.doctor_modal_box .doctor_modal{
			height: 650px;
			padding: 85px 70px;
		}

		.doctor_modal_box .doctor_modal .doctor_info h3 strong{
			font-size: 2.5rem;
		}

		.doctor_modal_box .doctor_modal .img-box figure{
			height: 480px;
		}
		.doctor_modal_box .doctor_modal .img-box figure img{
			transform: translateX(-50%) scale(1.15);
		}

	}


	@media screen and (max-width: 1100px){
		.doctor_modal_box .doctor_modal{
			height: auto;
			flex-direction: column;
		}

		.doctor_modal_box .doctor_modal .img-box{
			width: 100%;
		}

		.doctor_modal_box .doctor_modal .img-box figure{
			height: 420px;
		}

		.doctor_modal_box .doctor_modal .img-box figure img{
			width: 280px;
		}

		.doctor_modal_box .doctor_modal .doctor_info{
			width: 100%;
			margin-top: 45px;
			padding-bottom: 0;
		}

		
	}


	@media screen and (max-width: 1024px){
		.doctor_modal_box .doctor_modal{
			/* height: 70vh; */
		}
		.doctor_modal_box .doctor_modal .doctor_info{
			/* height: calc( 70vh - calc( 95px * 2 ) ) */
		}
			.doctor_modal_box .doctor_modal .doctor_info figure img{
				width: 75%;
			}
		
		
		.doctor_modal_box .doctor_modal .doctor_info h3 strong{
		}
		.doctor_modal_box .doctor_modal .doctor_info h3 span{
		}



		.doctor_modal_box .doctor_modal .doctor_info .visible-scroll-box > div h4{
		}

		

		.doctor_modal_box .doctor_modal .doctor_info .visible-scroll-box > div ul li:not(:last-of-type){
			/* margin-bottom: 15px; */
		}

	}



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

		.doctor_modal_box .doctor_modal{
			padding: 65px 60px;
			    background: linear-gradient(to bottom, #fff 90%, var(--bg-color01) 10%);
				padding-bottom: 100px;
		}
		
		.doctor_modal_box .doctor_modal .doctor_info{
			margin-top: 35px;
			padding-left: 20px;
		}
		.doctor_modal_box .doctor_modal .doctor_info > figure{
			display: none;

		}

		.doctor_modal_box .doctor_modal .doctor_info h3 strong{
			font-size: 2.125rem;
		}

		.doctor_modal_box .doctor_modal .doctor_info > p{
			margin-top: 20px;
			font-size: 1.375rem;
		}

		.doctor_modal_box .doctor_modal .doctor_info .mb{
			display: block;
		}
			.doctor_modal_box .doctor_modal .doctor_info .mb figure{
				position: static;
				display: inline-block;
			}
		

		.doctor_modal_box .doctor_modal .img-box figure {
			height: 380px;
		}
		.doctor_modal_box .doctor_modal .img-box figure img{
			width: 250px;
		}

		.doctor_modal_box .doctor_modal .doctor_info .visible-scroll-box{
			height: 190px;
		}

	}




	@media screen and (max-width: 767px){
		.doctor_modal_box .doctor_modal{
			width: 90%;
			/* height: 90vh; */
			padding: 45px 30px;
			background: linear-gradient(to bottom, #fff 95%, var(--bg-color01) 5%);
		}

		.doctor_modal_box .doctor_modal .doctor_info {
			margin-top: 20px;
			padding-left: 10px;
		}

		.doctor_modal_box .doctor_modal .btn_close{
			width: 45px; height: 45px;
			right: 20px;
		}


		.doctor_modal_box .doctor_modal .doctor_info figure img{
			width: 100%;
		}


		.doctor_modal_box .doctor_modal .doctor_info .visible-scroll-box > div:not(:last-of-type){
		}
		.doctor_modal_box .doctor_modal .doctor_info .visible-scroll-box > div:nth-of-type(2){
			margin-top: 20px;
		}
		

		.doctor_modal_box .doctor_modal .doctor_info h3{
			gap: 6px;
		}
		.doctor_modal_box .doctor_modal .doctor_info h3 strong{
			font-size: 1.4375rem;
		}
		.doctor_modal_box .doctor_modal .doctor_info h3 span{
			font-size: 0.8125rem;
		}
		

		.doctor_modal_box .doctor_modal .doctor_info > p{
			font-size: 0.9375rem;
			margin-top: 10px;
		}


		.doctor_modal_box .doctor_modal .doctor_info .visible-scroll-box > div h4 span{
			font-size: 1.0625rem;
		}

		.doctor_modal_box .doctor_modal .doctor_info .visible-scroll-box > div h4{
			padding-bottom: 5px;
		}
		.doctor_modal_box .doctor_modal .doctor_info .visible-scroll-box > div.career_box h4 i{
			width: 20px;
		}
		.doctor_modal_box .doctor_modal .doctor_info .visible-scroll-box > div ul{
			margin-top: 5px;
		}
		.doctor_modal_box .doctor_modal .doctor_info .visible-scroll-box > div ul li{
			font-size: 0.75rem;
		}

		.doctor_modal_box .doctor_modal .doctor_info .visible-scroll-box > div h4 span::after{
			width: 14px; height: 14px;
		}



		.doctor_modal_box .doctor_modal .doctor_info .visible-scroll-box > div.thesis_box li span{
			font-size: 0.625rem;
		}



		.doctor_modal_box .doctor_modal  .doctor_info::-webkit-scrollbar {
				width: 7px;  /* 스크롤바의 너비 */
			}




		.doctor_modal_box .doctor_modal .img-box figure{
			height: 230px;
		}
		.doctor_modal_box .doctor_modal .img-box figure img{
			width: 150px;
		}

		.doctor_modal_box .doctor_modal .doctor_info .visible-scroll-box{
			margin-top: 10px;
			height: 170px;
		}

		.doctor_modal_box .doctor_modal .doctor_info .visible-scroll-box > div{
			width: 100%;
		}
	}