@charset "utf-8";
@import url('https://cdn.jsdelivr.net/gh/sun-typeface/SUIT@2/fonts/variable/woff2/SUIT-Variable.css');




/* 
.wrap ) 헤더, 네비 바 나올 공간 두고 padding줌
.wrap_padding ) 그 안에서의 패딩 또 줌
 */


html,body {
	/* width: calc(100% + 158px); */
	width: 100%;
	height: 100%;
	box-sizing: border-box;
}

/* login */
.login {
	position: relative;
	width: 100%;
	height: 100%;
	background: #f5f6f8 url(https://metagenome.hcarelink.com/images/login/img_login_background.png) no-repeat center center / 100%;
	background-size: cover;
}
.login .login_group {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 2;
}
.login::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, rgb(73 89 236 / 50%), rgba(0, 0, 0, 0.8));
	z-index: 1;
}
.login img.login_back {
	width: 100%;
	height: 100%;
	float: right;
}
.login .login_box {
	width: 438px;
	overflow: hidden;
	background: linear-gradient(136.53deg, rgba(255, 255, 255, 0.49) 2.01%, rgba(255, 255, 255, 0.07) 99.29%);
	border: 1px solid #E4E4E4;
	backdrop-filter: blur(30px);
	border-radius: 40px;
	box-sizing: border-box;
	padding: 40px 48px 32px;
}
.login .logo_box {
	overflow: hidden;
	margin-bottom: 20px;
	width: 438px;
}
.login .login_box img.logo_black {
	height: 100%;
	float: right;
}
.login .login_box h1 {
	color: #ffffff;
	font-weight: 800;
	font-size: 32px;
	letter-spacing: -1px;
}
.login .login_box h4 {
	color: #ffffff;
	font-weight: 400;
	font-size: 20px;
	letter-spacing: -1px;
}
.login .login_box .input_box {
	width: 100%;
	overflow: hidden;
	margin: 24px 0;
}
.login .login_box .input_box>input {
	width: 100%;
	height: 48px;
	background: #FFFFFF;
	box-sizing: border-box;
	border: 1px solid #334D6E;
	border-radius: 8px;
	box-sizing: border-box;
	padding: 2px 24px 0;
}
.login .login_box .input_box>input[type=text] {
	font-weight: 600;
	font-size: 16px;
}
.login .login_box .input_box>input::placeholder {
	line-height: 56px;
	font-weight: 600;
	font-size: 16px;
}
.login .login_box .input_box>input:not(:last-child) {
	margin-bottom: 16px;
}
.login .login_box .input_box>input:focus-within {
	border: 1px solid #222;
	outline: none;
}
.login .login_box .save_id_box {
	width: 100%;
	overflow: hidden;
	margin-bottom: 10px;
}
.save_id_box input[type="checkbox"]+label {
	cursor: pointer;
	float: left;
	line-height: 16px;
	color: #ffffff;
	font-weight: 700;
	font-size: 16px;
}
.save_id_box input[type="checkbox"]+label::before {
	float: left;
	margin-right: 12px;
	content:'';
	display: block;
	width: 16px;
	height: 16px;
	background: url(/images/login/unchecked.svg) no-repeat;
	background-size: 16px 16px;
}
.save_id_box input[type="checkbox"]:checked+label::before {
	float: left;
	margin-right: 12px;
	content:'';
	display: block;
	width: 16px;
	height: 16px;
	background: url(/images/login/checked.svg) no-repeat;
	background-size: 16px 16px;
}
.login .login_box .wrong_pw {
	margin-top: 14px;
	color: #F7685B;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.4;
}
.login .login_box button.login_btn {
	cursor: pointer;
	width: 100%;
	height: 56px;
	line-height: 56px;
	color: #fff;
	background: #4959EC;
	border-radius: 8px;
	border: none;
	font-weight: 700;
	font-size: 18px;
	margin-top: 30px;
}
/* login 끝 */


/* main */
.wrap {
	width: calc(100% - 148px);
	height: auto;
	box-sizing: border-box;
	/* padding: 72px 0 0 276px; */
	padding: 72px 0 0 252px;
}
.wrap_padding {
	width: 100%;
	height: auto;
	padding: 56px 100px 120px 48px;
	/* overflow-x: scroll; */
}
.main {
	width: 100%;
	height: 100%;
	background: #f5f5f5 url(/images/main/img_main_background.svg) no-repeat right -100px bottom;
	background-size: auto 80%;
}
.main h1 {
	margin: 314px 0 0 88px;
	color: #364074;
	font-weight: 700;
	font-size: 56px;
	line-height: 67.2px;
}
.main p {
	margin: 25px 0 0 88px;
	color: #707683;
	font-weight: 600;
	font-size: 20px;
	line-height: 28px;
}


/* adminMypage */

/* my1_userlist */
.admin .title {
	background: url(/images/icn/icn_title_user_24px.svg) no-repeat;
}

/* my1_user_edit, my1_user_new2 */
.my1_user_edit .white_box .first_edit {
	margin-top: -34px;
}
.my1_user_edit .white_box .white_btn {
	margin-top: 100px;
}

/* my1_clientlist_edit */
.red_txt {
	margin-top: 8px;
	color: #F7685B;
	font-weight: 400;
	font-size: 12px;
}

/* my1_clientlist_edit */
/* my1_user_new1 */
.my1_clientlist_edit .white_box table.box_table td input.add1,
.my1_user_new1 .white_box table.box_table td input.add1 {
	float: left;
	width: 186px;
}
.my1_clientlist_edit .white_box table.box_table td input.add2,
.my1_user_new1 .white_box table.box_table td input.add2 {
	margin-bottom: 8px;
}

.my1_clientlist_edit .white_box table.box_table td.business input,
.my1_user_new1 .white_box table.box_table td.business input {
	width: 80px;
}
.my1_clientlist_edit .white_box table.box_table td.business input + span,
.my1_user_new1 .white_box table.box_table td.business input + span {
	width: 16px;
	display: inline-block;
	text-align: center;
}

.my1_clientlist_edit .white_box .first_edit,
.my1_user_new1 .white_box .first_edit {
	margin-top: -34px;
}
.my1_clientlist_edit .white_box .white_btn,
.my1_user_new1 .white_box .white_btn {
	margin-top: 80px;
}

/* my1_user_new2 */
.my1_user_new2 .white_box table.box_table td input[type="radio"]+label {
	cursor: pointer;
	float: left;
	line-height: 24px;
	font-weight: 400;
	color: #595959;
}
.my1_user_new2 .white_box table.box_table td input[type="radio"]+label::before {
	float: left;
	content:'';
	display: block;
	width: 24px;
	height: 24px;
	margin-right: 8px;
	background: url(/images/icn/icn_page_check_circle_empty_24px.svg) no-repeat;
}
.my1_user_new2 .white_box table.box_table td input[type="radio"]:checked+label {
	font-weight: 700;
	color: #222;
}
.my1_user_new2 .white_box table.box_table td input[type="radio"]:checked+label::before {
	float: left;
	content:'';
	display: block;
	width: 24px;
	height: 24px;
	margin-right: 8px;
	background: url(/images/icn/icn_page_check_circle_fill_24px.svg) no-repeat;
}
.my1_user_new2 .white_box table.box_table td:nth-child(2) label {
	margin-right: 24px;
}
.my1_user_new2 .white_box .white_btn {
	margin-top: 40px;
}

/* my1_product */
.my1_product .title {
	background: url(/images/icn/icn_title_product_24px.svg) no-repeat;
}
.my1_product .regi_pro {
	width: 1318px;
	height: 42px;
	margin: 32px 0 24px;
}
.my1_product .regi_pro button {
	float: right;
}
.my1_product select,
.my1_product input {
	height: 40px;
}





/* my1_report */
.my1_report .title {
	background: url(/images/icn/icn_title_report_24px.svg) no-repeat;
}
.my1_report .version {
	width: 100%;
	height: 48px;
	margin: 32px 0 40px;
}
.my1_report .version select {
	float: left;
	width: 286px;
	height: 100%;
	padding-left: 32px;
	font-weight: 600;
	font-size: 16px;
	color: #334D6E;
	margin-right: 24px;
}
.my1_report .version>div {
	float: left;
	cursor: pointer;
	width: 88px;
	height: 40px;
	line-height: 40px;
	border-radius: 4px;
	font-weight: 700;
	font-size: 18px;
	text-align: center;
	margin-top: 4px;
	background: #fff;
	color: #4959EC;
	transition: all 0.2s;
}
.my1_report .version>div.active {
	background: #4959EC;
	color: #fff;
}
.my1_report .version>div:not(.active):hover {
	background: #B9BFF8;
	color: #fff;
}
.my1_report .up_save_box {
	width: 100%;
	height: 24px;
	line-height: 24px;
	margin: 40px 0 24px;
}
.my1_report .up_save_box>div {
	cursor: pointer;
	float: left;
	width: 192px;
	height: 24px;
	font-weight: 600;
	font-size: 16px;
	color: #334D6E;
	padding-left: 32px;
	box-sizing: border-box;
}
.my1_report .up_save_box .upload {
	margin-right: 40px;
	background: url(/images/icn/icn_page_reportupload_24px.svg) no-repeat;
}
.my1_report .up_save_box .save {
	background: url(/images/icn/icn_page_download_24px.svg) no-repeat;
}
.my1_report .sample_image {
	width: 1318px;
	height: 747px;
	background: #D9D9D9;
}

/* my1_barcode */
.my1_barcode .title {
	background: url(/images/icn/icn_title_barcode_24px.svg) no-repeat;
}


/* my2_sign */
.my2_sign .title {
	background: url(/images/icn/icn_title_sign_24px.svg) no-repeat;
}
.my2_sign .sign_tit {
	margin-top: 40px;
	position: relative;
	font-weight: 700;
	font-size: 18px;
	color: #192A3E;
	line-height: 16px;
	padding-left: 16px;
}
.my2_sign .sign_tit::before {
	content:'';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 8px;
	height: 16px;
	background: #4959EC;
}
.my2_sign .sign_img {
	margin-top: 32px;
	width: 294px;
	height: 294px;
	line-height: 294px;
	background: #E9EFF4;
	border-radius: 8px;
	text-align: center;
	font-weight: 600;
	font-size: 14px;
	color: #90A0B7;
}
.my2_sign .sign_btn_box {
	margin-top: 32px;
	width: 100%;
	height: 64px;
	padding-left: 32px;
}
.my2_sign .sign_btn_box>div {
	cursor: pointer;
	float: left;
	width: 310px;
	height: 100%;
	line-height: 64px;
	box-sizing: border-box;
	border: 1px solid #4959EC;
	border-radius: 8px;
	font-weight: 700;
	font-size: 16px;
	color: #4959EC;
	text-align: center;
	transition: all 0.2s;
}
.my2_sign .sign_btn_box .imgUp_btn {
	margin-right: 24px;
	background: url(/images/icn/icn_page_upload_24px.svg) no-repeat left 24px center;
}
.my2_sign .sign_btn_box .signPad_btn {
	background: url(/images/icn/icn_page_signboard_24px.svg) no-repeat left 24px center;
}
.my2_sign .sign_btn_box>div:hover {
	box-shadow: 0px 8px 16px rgba(47, 16, 241, 0.2);
}

/* my2_info */
.my2_info .title {
	background: url(/images/icn/icn_title_user_24px.svg) no-repeat;
}
.my2_info .title span {
	font-weight: 400;
	font-size: 14px;
	margin-left: 24px;
}
.my2_info .info_box {
	margin-top: 24px;
	width: 552px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0px 6px 18px rgba(0, 0, 0, 0.06);
	border-radius: 8px;
	box-sizing: border-box;
	padding: 56px 72px 40px;
}
.my2_info .info_box h3 {
	font-weight: 700;
	font-size: 20px;
	color: #334D6E;
}
.my2_info .info_box .info_table {
	margin-top: 24px;
}
.my2_info .info_box .info_table tr {
	height: 64px;
}
.my2_info .info_box .info_table tr input,
.my2_info .info_box .info_table tr select {
	width: 288px;
	height: 40px;
}
.my2_info .info_box .info_table th {
	text-align: left;
}
.my2_info .info_box .info_table select.phone {
	width: 102px;
	margin-right: 8px;
	float: left;
}
.my2_info .info_box .info_table input.phone {
	width: 178px;
}

/* my1_barcode */
.my1_barcode table.default_table tr td:nth-child(4).used {
	color: #F7685B;
}
.my1_barcode table.default_table tr td:nth-child(4).none_used {
	color: #2ED47A;
}

/* default */
.default.dna_analysis .sta_box button.default {
	background: #4959EC url(/images/icn/icn_page_arrow_24px.svg) no-repeat right 16px center;
}
.default.dna_analysis .sta_box button.default:hover {
	background: #B9BFF8 url(/images/icn/icn_page_arrow_24px.svg) no-repeat right 16px center;
}

/* gene_tables */
.default .gene_tables {
	margin-top: 40px;
}

/* dna_analysis_reg */
.default .title {
	background: url(/images/icn/icn_title_dna_24px.svg) no-repeat;
}
.default .gray_box .gray_box_top ul li {
	width: unset;	
}
.default .gray_box .gray_box_top ul>li:not(:last-child) {
	margin-bottom: 32px;
}
.default .gray_box.g_hei .gray_box_top ul>li:not(:last-child) {
	margin-bottom: 24px;
}
.default .gray_box .gray_box_top ul li.gray_top {
	width: 1170px;
}
.default .gray_box .gray_box_top ul li.gray_bottom {
	width: 1000px;
}
.default .gray_box .gray_box_bottom {
	width: 1170px;
}
.default .gray_box .gray_box_top ul li.gray_top input.vName {
	width: 288px;
}
.default .gray_box .gray_box_top ul li select {
	width: 184px;
}

.default.sample_list .gray_box .gray_box_top ul.find {
	left: 468px;
	width: 184px;
}
.default.sample_list.sample_info .gray_box .gray_box_top ul.find {
	left: 743px;
	width: 184px;
}
.default.sample_list .gray_box .gray_box_top .ol_top li .find li {
	font-size: 14px;
	padding: 0 8px;
	height: 48px;
	line-height: 48px;
	background: #fff url(/images/icn/icn_pop_arrow_24px.svg) no-repeat right 8px center;
	background-size: 16px 16px;
	text-overflow: ellipsis;
}


/* dna */
.default.dna .gray_box .gray_box_top ul li select {
	width: 126px;
}
.default .gray_box .gray_box_top .ol_top {
	display: flex;
	justify-content: space-between;
}
.default .gray_box .gray_box_top ul li span {
	margin-right: 12px;
}
.default .gray_box .gray_box_top ul li span.type {
	line-height: 1;
	text-align: center;
	margin-top: 4px;
}
.default .gray_box .gray_box_top ul li span.type b {
	font-size: 12px;
	font-weight: 400px;
}
.default .gray_box .gray_box_top .ol_period {
	display: flex;
	justify-content: space-between;
}
.default .pro_check {
	width: 1318px;
	height: 48px;
	margin-bottom: 32px;
}
.default .pro_check .exel_btn.exe {
	font-size: 14px;
	height: 40px;
	line-height: 38px;
	margin: 4px 0 0 24px;
	float: right;
}
.default .pro_check .exel_btn.exe.all {
	margin: 4px 0 0 0px;
}

.default .pro_check .check {
	width: 236px;
	height: 100%;
	text-align: center;
	line-height: 48px;
	box-sizing: border-box;
	background: #F8F8F8 url(/images/icn/icn_page_dna3_24px.svg) no-repeat left 24px center;
	border-radius: 8px;
	font-weight: 700;
	font-size: 18px;
	color: #192A3E;
	padding-left: 24px;
	float: left;
}

.default .gene_txt {
	position: relative;
	color: #192A3E;
	font-weight: 700;
	font-size: 18px;
	padding-left: 16px;
	line-height: 16px;
}
.default .gene_txt::before {
	content:'';
	display: block;
	width: 8px;
	height: 16px;
	background: #4959EC;
	position: absolute;
	top: 0;
	left: 0;
}

.default .sta_box {
	width: 100%;
	height: 40px;
	margin: 16px 0 56px;
	padding-left: 16px;
}
.default .sta_box select {
	width: 186px;
	height: 40px;
	box-sizing: border-box;
	margin-right: 16px;
}
.default .put_box {
	width: 100%;
	height: 48px;
	line-height: 48px;
}
.default .put_box>div {
	float: left;
}
.default .receipt {
	cursor: pointer;
	width: 236px;
	height: 48px;
	line-height: 48px;
	text-align: center;
	box-sizing: border-box;
	background: #fff url(/images/icn/icn_page_dna3_24px.svg) no-repeat left 24px center;
	border-radius: 8px;
	border: 1px solid #90A0B7;
	font-weight: 600;
	font-size: 17px;
	color: #334D6E;
	padding-left: 24px;
	margin-bottom: 40px;
	transition: all 0.2s;
}
.default .receipt:hover {
	box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
}
.default .put_box .put_btn {
	color: #334D6E;
	font-weight: 600;
	font-size: 14px;
	padding-left: 24px;
}
.default .put_box .essential {
	margin: 0 24px;
	background: url(/images/icn/icn_page_dna1_16px.svg) no-repeat left center;
}
.default .put_box .select {
	background: url(/images/icn/icn_page_dna2_16px.svg) no-repeat left center;
}
.default .memo {
	width: 100%;
	overflow: hidden;
}
.default .memo h3 {
	font-weight: 700;
	font-size: 18px;
	color: #192A3E;
	margin: 24px 0 16px;
}
.default .memo textarea {
	width: 496px;
	height: 228px;
	float: left;
}
.default .memo button.de_white {
	margin: 186px 0 0 16px;
	background: #fff url(/images/icn/icn_page_send_24px.svg) no-repeat right 12px center;
}
.default .sta_box .de_white {
	margin-right: 8px;
}

/* dtc_client */
.dtc_client .title {
	background: url(/images/icn/icn_title_user_24px.svg) no-repeat;
}
.default.listgray .gray_box .gray_box_top .ol_top {
	display: block;
}
.default.listgray .gray_box .gray_box_top .ol_top>li {
	float: left;
}
.default.listgray .gray_box .gray_box_top .ol_top>li:not(:last-child){
	margin-right: 40px;
}
.default.listgray .gray_box .gray_box_top li span {
	width: 108px;
}
.default.listgray .gray_box .gray_box_top ul li.gray_bottom {
	width: 1116px;
}
.default.listgray .gray_box .gray_box_top ul>li:not(:last-child) {
	margin-bottom: 24px;
}
.default.listgray .gray_box .gray_box_top ul li input {
	width: 184px;
}

/* manager_list */
.manager_list .title {
	background: url(/images/icn/icn_title_user_24px.svg) no-repeat;
}

/* sample_list */
.sample_list .title {
	background: url(/images/icn/icn_title_product_24px.svg) no-repeat;
}
.sample_list .default_table td.receipt {
	color: #F7685B;
}
.sample_list .default_table td.retest {
	color: #1875FF;
}
.sample_list .default_table td.complete {
	color: #FFB946;
}
.no_result {
	width: 1318px;
	margin-top: 164px;
	font-weight: 700;
	font-size: 24px;
	color: #90A0B7;
	text-align: center;
	line-height: 1.4;
}
.default.listgray.sample_list .gray_box .gray_box_top .ol_top,
.default.listgray.report_list .gray_box .gray_box_top .ol_top {
	display: flex;
	justify-content: space-between;
}
.default.sample_list .gray_box .gray_box_top li span,
.default.report_main .gray_box .gray_box_top li span,
.default.statistics_main .gray_box .gray_box_top li span,
.default.report_list .gray_box .gray_box_top li span {
	width: unset;
}
.default.listgray.sample_list .gray_box .gray_box_top li span.hav,
.default.listgray.report_list .gray_box .gray_box_top li span.hav {
	width: 108px;
}
span.hav {
	width: 108px;
}
.default.listgray.sample_list .gray_box .gray_box_top .ol_top li:first-child,
.default.listgray.report_list .gray_box .gray_box_top .ol_top li:first-child {
	margin: 0;
}




/* product_list */
.product_list .title {
	background: url(/images/icn/icn_title_product_24px.svg) no-repeat;
}

/* report_main */
.report_main .title {
	background: url(/images/icn/icn_title_report_24px.svg) no-repeat;
}
.default.report_main .gray_box .gray_box_top ul li.gray_bottom,
.default.statistics_main  .gray_bottom {
	width: 1050px;
}
.report_main button.dis_white,
.statistics_main button.dis_white {
	float: left;
}
.PDF_btn_box {
	width: 1318px;
	height: 40px;
}
.report_main .PDF_box {
	margin-top: 16px;
	border-top: 1px solid #707683;
	width: 1318px;
	overflow: hidden;
}
.pdf_wrap {
	width: 1318px;
}

.report_main .report {
	font-weight: 700;
	font-size: 40px;
	color: #222;
	text-align: center;
	margin: 40px 0 72px;
}
/* .report_main dl {
	font-size: 16px;
	color: #222;
	margin-bottom: 16px;
}
.report_main dl dt {
	float: left;
	font-weight: 700;
	font-size: 16px;
	margin-right: 24px;
}
.report_main dl dd {
	font-weight: 400;
} */
.default.report_main .gray_box .gray_box_top li span.hav,
.default.statistics_main .gray_box .gray_box_top li span.hav {
	width: 100px;
}

/* statistics_main */
.statistics_main .title {
	background: url(/images/icn/icn_title_statistics_24px.svg) no-repeat;
}
.statistics_main .exel_btn {
	float: right;
}
.statistics {
	margin-top: 64px;
	width: 1318px;
	overflow: hidden;
}
.statistics .s_top {
	width: 100%;
	height: 42px;
	line-height: 42px;
}
.statistics .s_top h2 {
	float: left;
	font-weight: 700;
	font-size: 24px;
	color: #222;
}
.statistics .s_top h2 span {
	color: #4959EC;
}
.statistics .s_tit {
	font-weight: 700;
	font-size: 18px;
	color: #334D6E;
	margin: 24px 0 12px;
}
.statistics .s_box {
	width: 1318px;
	padding: 24px 0;
	overflow: hidden;
	border-top: 1px solid #90A0B7;
	border-bottom: 1px solid #90A0B7;
	margin-bottom: 24px;
}
.statistics .s_box dl {
	font-size: 16px;
	color: #222;
	float: left;
}
.statistics .s_box dl dt {
	font-weight: 700;
	float: left;
	margin-right: 24px;
}
.statistics .s_box dl dd {
	font-weight: 400;
	float: left;
}
.statistics .s_box>div {
	width: 100%;
	overflow: hidden;
}
.statistics .s_box .s_box_top {
	margin-bottom: 24px;
}
.statistics .s_box .s_box_top dl {
	width: auto;
}
.statistics .s_box .s_box_top dl:not(:last-child),
.statistics .s_box .s_box_btm dl:not(:last-child) {
	margin-right: 56px;
}

/* report_list */
.report_list .title {
	background: url(/images/icn/icn_title_report_24px.svg) no-repeat;
}

/* backoffice_down */
.default.backoffice_down .title {
	background: url(/images/icn/icn_title_report_24px.svg) no-repeat;
}
.default.backoffice_down .gray_box .gray_box_top ul li span:nth-child(3) {
	margin-left: 12px;
}
.default.backoffice_down .gray_box .gray_box_top ul li ol.ol_month {
	width: 280px;
}
.default.backoffice_down .gray_box .gray_box_top ul li ol.ol_month li:not(:last-child) {
	margin: 0 8px 0 0;
}
.default.backoffice_down .gray_box .gray_box_top ul.find {
	left: 416px;
}





/* 테이뷸레이터 적용 */

.tabulator {
	width: 1318px !important;
}
.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title {
	height: 20px !important;
}
.tabulator input[type="checkbox"] {
	margin: 0;
	width: 20px !important;
	height: 20px !important;
}
.tabulator .tabulator-headers:first-child {
	text-align: center;
}
.tabulator .tabulator-header .tabulator-col {
	justify-content: center;
}
.tabulator-row .tabulator-cell {
	height: 42px !important;
}