/* =========================
Pretendard Font
========================= */

@font-face{
	font-family:'Pretendard';
	src:url('/fonts/Pretendard-Regular.woff2') format('woff2');
	font-weight:400;
	font-style:normal;
	font-display:swap;
}

@font-face{
	font-family:'Pretendard';
	src:url('/fonts/Pretendard-Bold.woff2') format('woff2');
	font-weight:700;
	font-style:normal;
	font-display:swap;
}

@font-face {
    font-family: 'GMarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'GMarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'GMarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}

/* =========================
Reset
========================= */

*{
	box-sizing:border-box;
	margin:0;
	padding:0;
}

body {
    width: 100%;
    height: 100vh; /* 화면 전체 높이 */
    background: #000;
    display: flex;
    justify-content: center; /* 가로 중앙 */
    align-items: center;     /* 세로 중앙 */
	
	font-family:'Pretendard', sans-serif;
}


img { width:100%; display:block; }

.container { width:100%; }

.imagemap {	width:100%; position:relative; }


.main_link01 {
    position: absolute;
    top: 71.6%;
    left: 79%;
    width: 13%;
    height: 6%;
    cursor: pointer;
}

.main_link02 {
    position: absolute;
    top: 79%;
    left: 79%;
    width: 13%;
    height: 6%;
    cursor: pointer;
}

input {
	border:none; outline: none;
	font-size:1vw;
	}

#user {
	position: absolute;
    top: 62.8%;
    left: 50%;
    transform: translateX(-50%);
    height: 6.1%;
    width: 41%;
	text-align:center;
}

#tel01 {
	position: absolute;
    top: 72.1%;
    left: 29%;
    height: 6.1%;
    width: 10.5%;
    text-align: center;
}

#tel02 {
	position: absolute;
    top: 72.1%;
    left: 44.8%;
    height: 6.1%;
    width: 10.5%;
    text-align: center;
}

#tel03 {
	position: absolute;
    top: 72.1%;
    left: 60.4%;
    height: 6.1%;
    width: 10.5%;
    text-align: center;
}

#client_company {
	position: absolute;
    top: 62.8%;
    left: 50%;
    transform: translateX(-50%);
    height: 6.1%;
    width: 34%;
	text-align:center;
}

#client_doctor {
    position: absolute;
    top: 72.1%;
    left: 50%;
    transform: translateX(-50%);
    height: 6%;
    width: 34%;
    text-align: center;
}

.section01_new {
    position: absolute;
    top: 62.8%;
    left: 71.1%;
    width: 13%;
    height: 5.9%;
    cursor: pointer;
}

/* =====================
NEW CLIENT POPUP
===================== */

#new_client{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	display:none;
	z-index:9999;
}

#new_client .new_client_bg{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:black;
	opacity:0.7;
}

#new_client .new_client_box{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	width:420px;
	background:#fff;
	padding:40px;
	border-radius:10px;
	box-sizing:border-box;
}

/* input */

#new_client input{
	width:100%;
	height:48px;
	margin-bottom:12px;
	padding:0 12px;
	border:1px solid #ccc;
	border-radius:6px;
	font-size:15px;
	box-sizing:border-box;
}

/* 버튼 */

#popup_submit{
	width:100%;
	height:48px;
	background:#000;
	border:none;
	color:#fff;
	cursor:pointer;
	border-radius:6px;
}

#popup_close{
	position:absolute;
	top:10px;
	right:10px;

	width:32px;
	height:32px;

	border-radius:50%;
	border:1px solid #ccc;

	background:#fff;

	display:flex;
	align-items:center;
	justify-content:center;

	cursor:pointer;
	font-size:18px;
	font-weight:bold;
	line-height:1;
}

#popup_close::after{
	content:"×";
}



/* =====================
Section 02
===================== */

.display_client_name {
    position: absolute;
    top: 21.4%;
    left: 27.5%;
    width: 20.8%;
    height: 4.9%;
    font-size: 1.5vw;
    font-weight: 700;
    color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.display_doctor_name {
	position: absolute;
    top: 21.4%;
    left: 58.35%;
    width: 20.8%;
    height: 4.9%;
    font-size: 1.5vw;
    font-weight: 700;
    color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.this_week {
    position: absolute;
    top: 37.5%;
    left: 50%;
    transform: translateX(-50%);
    height: 8%;
    width: 70%;
    color: #000;
    font-size: 3vw;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;	
}

.select_patient01, .select_patient02, .select_patient03, .select_patient04, .select_patient05, .select_patient06, .select_patient07, .select_patient08, .select_patient09, .select_patient10 {
    position: absolute;
    top: 59.1%;
    width: 4.8%;
    height: 17.65%;
    cursor: pointer;
}

.select_patient01 { left: 10.2%; }
.select_patient02 { left: 18.5%; }
.select_patient03 { left: 26.85%; }
.select_patient04 { left: 35.15%; }
.select_patient05 { left: 43.45%; }
.select_patient06 { left: 51.75%; }
.select_patient07 { left: 60.05%; }
.select_patient08 { left: 68.4%; }
.select_patient09 { left: 76.75%; }
.select_patient10 { left: 85.05%; }


.results img {
  position: relative;
  z-index: 2; /* 낮은 값 */
}


/* .fill01 { position: absolute; top: 49.7%; left: 50%; transform: translateX(-50%); width: 90%; height: 9%; background: #f7bc95; z-index: 1; }
.fill02 { position: absolute; top: 40.7%; left: 50%; transform: translateX(-50%); width: 90%; height: 9%; background: #f3a170; z-index: 1; }
.fill03 { position: absolute; top: 31.9%; left: 50%; transform: translateX(-50%); width: 90%; height: 9%; background: #f0854b; z-index: 1; }
.fill04 { position: absolute; top: 23.1%; left: 50%; transform: translateX(-50%); width: 90%; height: 9%; background: #ec682b; z-index: 1; }
.fill05 { position: absolute; top: 14.2%; left: 50%; transform: translateX(-50%); width: 90%; height: 9%; background: #e9460a; z-index: 1; }
*/

.results img{
	position:relative;
	z-index:10;
}

.week{
	position:absolute;
	left:50%;
	transform:translateX(-50%);
	width:90%;
	height:9%;
	overflow:hidden;
	z-index:1;
}

.fill{
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	height:0%;
	transition:height 1s ease;

	background-repeat:no-repeat;
	background-position:center bottom;
	background-size:100% 100%;
}

/* 위치 */

.week01{ top: 48.7%; height: 10%; z-index: 6; }
.week02{ top:40.7%; height: 10%; z-index: 5;}
.week03{ top:31.9%; height: 10%; z-index: 4;}
.week04{ top:23.1%; height: 10%; z-index: 3;}
.week05{ top:14.2%; height: 10%; z-index: 2;}

/* wave 이미지 */

.week01 .fill{
	background-image:url('../images/wave01.png');
}

.week02 .fill{
	background-image:url('../images/wave02.png');
}

.week03 .fill{
	background-image:url('../images/wave03.png');
}

.week04 .fill{
	background-image:url('../images/wave04.png');
}

.week05 .fill{
	background-image:url('../images/wave05.png');
}

.week01_percent {
    position: absolute;
    top: 52.3%;
    left: 89.5%;
    width: 2%;
    height: 3%;
    font-size: 1vw;
    color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.week02_percent {
	position: absolute;
    top: 43.4%;
    left: 89.5%;
    width: 2%;
    height: 3%;
    font-size: 1vw;
    color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.week03_percent {
	position: absolute;
    top: 34.6%;
    left: 89.5%;
    width: 2%;
    height: 3%;
    font-size: 1vw;
    color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.week04_percent {
    position: absolute;
    top: 25.9%;
    left: 89.5%;
    width: 2%;
    height: 3%;
    font-size: 1vw;
    color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.week05_percent {
    position: absolute;
    top: 17.2%;
    left: 89.5%;
    width: 2%;
    height: 3%;
    font-size: 1vw;
    color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}


#submit_login, #submit_section01 {
    position: absolute;
    top: 85.4%;
    left: 50%;
    transform: translateX(-50%);
    width: 13%;
    height: 5.9%;
    cursor: pointer;
	opacity:0;
}

#next_page {
    position: absolute;
    top: 85.4%;
    left: 51.2%;
    width: 15.4%;
    height: 5.9%;
    cursor: pointer;
    opacity: 0;
}

#previous_section02 {
	position: absolute;
    top: 85.4%;
    left: 33.5%;
    width: 15.7%;
    height: 5.9%;
    cursor: pointer;
    opacity: 0;
}

#submit_section02 {
	position: absolute;
    top: 85.4%;
    left: 51%;
    width: 15.7%;
    height: 5.9%;
    cursor: pointer;
    opacity: 0;
}


/* =====================
Section 02_2nd
===================== */

.patient_status_01week, .patient_status_02week, .patient_status_03week{
	position: absolute;
    top: 48.45%;
    width: 7%;
    height: 6.3%;
    font-size: 3vw;
    font-weight: 700;
    color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.patient_status_04week, .patient_status_05week, .patient_status_06week{
	position: absolute;
    top: 66.05%;
    width: 7%;
    height: 6.3%;
    font-size: 3vw;
    font-weight: 700;
    color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.patient_status_week_total{
	position: absolute;
    top: 57.6%;
    width: 7%;
    height: 6.3%;
    font-size: 3vw;
    font-weight: 700;
    color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.patient_status_01week {
    left: 35.4%;
}

.patient_status_02week {
    left: 46.85%;
}

.patient_status_03week {
    left: 58.35%;
}

.patient_status_04week {
    left: 35.4%;
}

.patient_status_05week {
    left: 46.85%;
}

.patient_status_06week {
    left: 58.35%;
}


.patient_status_week_total {
    left: 77.8%;
	color:#e9460a;
}



.goto_home {
	position: absolute;
    bottom: 4%;
    right: 2.2%;
    width: 5.9%;
    height: 10%;
    cursor: pointer;
}

.goto_home2 {
	position: absolute;
    top: 4%;
    left: 2.2%;
    width: 5.9%;
    height: 10%;
    cursor: pointer;
}

.goto_home3 {
	position: absolute;
    top: 4%;
    right: 2.2%;
    width: 5.9%;
    height: 10%;
    cursor: pointer;
	z-index:10;
}