@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@font-face {
  font-family: "NotoSerifCJKKR";
  font-weight: 400;
  src: url("/fonts/NotoSerifCJKKR/NOTOSERIFCJKKR-MEDIUM.OTF") format("opentype");
}
@font-face {
  font-family: "NotoSerifCJKKR";
  font-weight: 300;
  src: url("/fonts/NotoSerifCJKKR/NOTOSERIFCJKKR-LIGHT.OTF") format("opentype");
}
@font-face {
  font-family: "NotoSerifCJKKR";
  font-weight: 500;
  src: url("/fonts/NotoSerifCJKKR/NOTOSERIFCJKKR-SEMIBOLD.OTF") format("opentype");
}

.introduce__img{max-width:480px; width : 100%;}
.introduce__info{display:flex; align-items:center; height:100%;}

.color-gray {
	color : rgb(155, 155, 155);
}

section{
    padding-top : 0;
	max-width : 100%;
	width : 100%;
}

section h2{
	font-size : 60px;
	text-align : center;
	margin-top : 100px;
	font-family: 'NotoSerifCJKKR', sans-serif;
}

section article{
	max-width : 1200px;
	margin : auto;
	width : 90%;
}

.doctors-wrap{
	margin-top : 50px;
}

.doctor-1{
	display : flex;
	flex-wrap : wrap;
	cursor : pointer;
}

.doctor-1 > div{
	flex : 1;
	width : 50%;
}

.doctor-1 .desc{
	background : url("https://h-mihak.com/images/pages/ko/introduce/doctors/sect.jpg") center center / 100% 100% no-repeat;
	display : flex;
	align-items : center;
	justify-content : center;
	flex-direction : column;
	color : #f0f0f0;
	font-size : 18px;
	text-align : center;
	line-height : 28px;
}

.desc{
	
}

.doctor-1 .desc .logo{
	width : 300px;
	margin-bottom : 24px;
}

.doctor-1 .desc .logo img{
	width : 100%;
}

.doctor-1 .ko-name{
	margin-top : 35px;
}

.ko-name{
	font-family: 'NotoSerifCJKKR', sans-serif;
	font-size : 18px;
}

.ko-name > span{
	font-size : 40px;
    color : rgb(221, 199, 164);
	font-weight : 500;
}

.doctor-1 .en-name{
	margin : 15px 0;
}

.en-name{
	font-size : 22px;
	font-family: 'NotoSerifCJKKR', sans-serif;
}

.doctor-1 .logo + p{
	width : 470px;
	letter-spacing : -1px;
}


.doctors-sub-wrap > ul{
	display : flex;
	flex-wrap : wrap;
	justify-content : space-between;
	margin-top : 30px;
}

.doctors-sub-wrap > ul > li{
	width: calc(100%/2 - 10px);
	margin-bottom : 30px;
	cursor : pointer;
	position : relative;
}

.doctors-sub-wrap > ul > li .desc{

	width : 100%;
	background-color : rgb(47,47,47);
	display : flex;
	align-items : center;
	justify-content : center;
	flex-direction : column;
	color : #fff;
	font-size : 18px;
	text-align : center;
	height : 172px;
}

.doctors-sub-wrap > ul > li .desc > p{
	margin : 5px 0;
}

.doctors-sub-wrap > ul > li .desc > .ko-name > span{
	font-size : 30px;
}


/* 팝업 */

.doctor-popup{
		background-color : rgba(0,0,0,0.8);
		width : 100vw;
		height : 100vh;
		position: fixed;
		top : 0;
		left : 0;
		z-index : 99999999;
		font-family: 'Noto Sans KR', sans-serif;
		display:none;
	}

.doctor-popup .modal-wrap{
		display : flex;
		justify-content : center;
		align-items : flex-start;
		height : 100%;
		overflow-y : scroll;
		padding : 50px 0;
	}

.doctor-popup .modal-body{
		max-width : 992px;
		width : 100%;
	}

.doctor-popup .youtube{
		position:relative;
		padding-top : 56.25%;
	}

.doctor-popup .youtube iframe{
		width: 100%;
		height: 100%;
		position : absolute;
		top : 0;
		left : 0;
	}

.doctor-popup .doctor-info{
		position: relative;
	}

.doctor-popup .top-title{
		letter-spacing: 0.7em; 
		color: rgb(207, 182, 142);
		font-size : 15px;
		margin-bottom : 39px;
		text-transform: uppercase;
		margin-bottom : 20px;
	}

	.doctor-popup .close-btn{
		display: flex;
		justify-content : flex-end;
		align-items : center;
		margin-bottom : 20px;	
		position : absolute;
		top : 20px;
		right : 20px;
		width : 100%;
	}

	.doctor-popup .close-btn > div{
		width :41px;
		height : 42px;
		cursor : pointer;
	}

	.doctor-popup .name{
		margin-bottom : 20px;
		color : #fff;
		font-size : 34px;
		letter-spacing : -1px;
	}

	.doctor-popup .name > span{
		font-size : 56px;
		color: rgb(221, 199, 164);
		font-weight: 500;
	}

	.doctor-popup .en-name{
		font-size : 40px;
		margin-bottom : 30px;
		color: rgb(221, 199, 164);
	}

	.doctor-popup .top-title-2{
		font-size : 20px;
		margin-bottom : 20px;
		color : #fff;
	}

	.doctor-popup .career-list li{
		font-size : 20px;
		color : #fff;
		display : flex;
		align-items : flex-start;
		font-weight : 300;
	}

	.doctor-popup .career-list li > span{
		display : inline-block;
		width : 5px;
		height : 5px;
		margin-top:14px;
		margin-right : 10px;
		border-radius : 50%; 
		background-color : rgb(221,199,164);
	}

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

	section h2{
		font-size: 6.51vw;
		width: 84%;
    	margin: 30px auto 10px;
	}

	.doctors-wrap{
		width : 95%;
		margin : auto;
	}

	.doctor-1{
		flex-direction : column;
	}

	.doctor-1 > div{
		width : 100%;
	}

	.doctor-1 .desc{
		padding: 50px;
	}

	.doctor-1 .desc .logo{
		width: 55vw;
	}

	.doctor-1 .logo + p{
		line-height : 4.17vw;
		font-size : 2.86vw;
		width : 95%;
	}

	.doctor-1 .ko-name, .doctor-1 .en-name{
		font-size : 2.86vw;
	}

	.doctor-1 .ko-name > span{
		font-size : 5.21vw;
	}

	.doctor-1 .en-name{
		margin : 0;
	}

	.doctor-1 .color-gray{
		font-size : 2.3vw;
	}

	.doctors-sub-wrap > ul > li{
		width : calc(100%/2 - 10px);
	}

	.doctors-sub-wrap > ul > li .desc > .ko-name > span{
		font-size : 3vw;
	}

	.ko-name{
		font-size : 2vw;
	}

	.en-name{
		font-size : 2.8vw;
	}

	.doctors-sub-wrap > ul > li .desc > p{
		margin : 2px 0;
	}

	.doctors-sub-wrap > ul > li .desc{
		height : 114px;
	}

	.doctors-sub-wrap > ul > li .desc > p.color-gray{
		font-size : 2vw;
	}

	.doctor-popup .top-title{
		font-size: 1.953125vw;
		margin-bottom: 5.078125vw;
	}

	.doctor-popup .name > span{
	    font-size: 8.72vw;
	}

	.doctor-popup .name{
	    font-size: 5.21vw;
		margin-bottom: 2.6vw;
	}

	.doctor-popup .en-name{
		font-size: 5.21vw;
		margin-bottom: 3.78vw;
	}

	.doctor-popup .top-title-2{
		font-size: 2.86vw;
		margin-bottom: 2.6vw;
	}

	.doctor-popup .career-list li{
		font-size: 2.86vw;
	}

	.doctor-popup .close-btn{
		margin-bottom : 0;
		right: 7vw;
		top : 7vw;
	}

	.doctor-popup .close-btn > div{
		width: 5.34vw;
		height: 5.46875vw;
	}

	.doctor-popup .doctor-info{
		padding-top : 4.6875vw;
		padding-left : 4.11vw;
		padding-right : 4.82vw;
	}

}