@charset "utf-8";
/* hide */
.hide { display: none !important; }
/* gap */
.mt0 { margin-top: 0 !important; }
.mt04 { margin-top: 4px !important; }
.mt08 { margin-top: 8px !important; }
.mt12 { margin-top: 12px !important; }
.mt16 { margin-top: 16px !important; }
.mt24 { margin-top: 24px !important; }
.mt36 { margin-top: 36px !important; }
.mt40 { margin-top: 40px !important; }
.mt48 { margin-top: 48px !important; }
.mb0 { margin-bottom: 0 !important; }
.pl20 { padding-left: 20px !important; }
.pl30 { padding-left: 30px !important; }
.pr20 { padding-right: 20px !important; }
.pr30 { padding-right: 30px !important; }
.pb6 {padding-bottom: 6px !important;}
.pb12 {padding-bottom: 12px !important;}
.pt14 {padding-top: 14px !important;}
/* fonts */
.ft_poppins { font-family:'Poppins'; }
/* btn */
.btn { position: relative; font-weight: 500; line-height: 24px; text-align: center; border-radius: 6px; pointer-events: all; transition: all 0.1s ease-in-out; }
.btn_primary { color: #fff; background: #04445f; border: 2px solid #04445f; }
.btn_basic { color: #04445f; background: #fff; border: 2px solid #04445f; }
.btn.disabled { color: #666; background: var(--gray-05); border: 2px solid var(--gray-05); cursor: auto; pointer-events: none; }
.btn.ic_enter::after { background: url(../image/icon/icon_enter.svg) no-repeat center center; background-size: contain; content: ''; display: inline-block; margin-left: 8px; }
.btn_sub_box { position: relative; }
.btn_sub_box .btn { font-size: 16px; padding: 10px 24px; display: inline-block; }
.btn_sub_box .btn + .btn { margin-left: 30px; }
/* icon */
i.icon_hypertension { background: url(../image/icon/icon_hypertension.svg) no-repeat center center; background-size: contain; }
i.icon_diabetes { background: url(../image/icon/icon_diabetes.svg) no-repeat center center; background-size: contain; }
i.icon_kidney { background: url(../image/icon/icon_kidney.svg) no-repeat center center; background-size: contain; }
i.icon_alzheimers {background: url(../image/icon/icon_alzheimers.svg) no-repeat center center; background-size: contain;}
i.icon_cardio { background: url(../image/icon/icon_cardio.svg) no-repeat center center; background-size: contain; stroke-width: 0.4; }
i.icon_cerebro { background: url(../image/icon/icon_cerebro.svg) no-repeat center center; background-size: contain; }
i.icon_metabolic { background: url(../image/icon/icon_metabolic.svg) no-repeat center center; background-size: contain; }
i.icon_notebook { background: url(../image/icon/icon_notebook.svg) no-repeat center center; background-size: contain; }
i.icon_pill { background: url(../image/icon/icon_pill.svg) no-repeat center center; background-size: contain; }
i.icon_lung_cancle { background: url(../image/icon/icon_lung_cancle.svg) no-repeat center center; background-size: contain; }
i.icon_pancreatic_cancle { background: url(../image/icon/icon_pancreatic_cancle.svg) no-repeat center center; background-size: contain; }
i.icon_prostate_cancle { background: url(../image/icon/icon_prostate_cancle.svg) no-repeat center center; background-size: contain; }
i.icon_stomach_cancle { background: url(../image/icon/icon_stomach_cancle.svg) no-repeat center center; background-size: contain; }
i.icon_kidney_cancle { background: url(../image/icon/icon_kidney_cancle.svg) no-repeat center center; background-size: contain; }
i.icon_gallbladder_cancle { background: url(../image/icon/icon_gallbladder_cancle.svg) no-repeat center center; background-size: contain; }
i.icon_thyroid_cancle { background: url(../image/icon/icon_thyroid_cancle.svg) no-repeat center center; background-size: contain; }
i.icon_liver_cancle { background: url(../image/icon/icon_liver_cancle.svg) no-repeat center center; background-size: contain; }
i.icon_colorectal_cancle { background: url(../image/icon/icon_colorectal_cancle.svg) no-repeat center center; background-size: contain; }
i.icon_breast_cancle { background: url(../image/icon/icon_breast_cancle.svg) no-repeat center center; background-size: contain; }
/* tag */
.tag_list_box::after { content: ''; display: block; visibility: hidden; clear: both; }
.tag_list_box .tag { margin: 0 6px 2px 0; }
.tag { font-size: 16px; font-weight: 700; line-height: 22px; text-align: center; padding: 4px 8px; border-radius: 4px; display: inline-block; }
.tag.small { font-size: 12px; line-height: 12px; padding: 4px 8px; }
.tag.md { line-height: 16px; padding: 5px 8px; }
.tag.blue { color: #4987ff; background: #dce8ff; }
.tag.yellow { color: #ff8f0c; background: #ffe9cf; }
.tag.yellow_light { color: #ffc700; background: #FFF4CC; }
.tag.red { color: #ff4f4f; background: #fee2e2; }
.tag.red_light { color: #ff7b7b; background: #FFEFEF; }
.tag.gray { color: #666; background: #e6e6e6; font-weight: 400; }
/* inform */
.inform_box { position: absolute; left: 48px; bottom: 24px; width: 704px; padding: 16px 20px; background: #f5f5f5; border-radius: 8px; }
.inform_box p::before { position: absolute; left: 0; top: -1px; width: 16px; height: 16px; background: url(../image/icon/icon_inform.svg) no-repeat center center; background-size: contain; content: ''; display: inline-block; }
.inform_box p { position: relative; font-size: 12px; font-weight: 400; color: #888; line-height: 16px; padding-left: 22px; }
.inform_box p + p { margin-top: 8px; }
.inform_box .tag { margin-right: 6px; }
/* qr */
.qr_box { text-align: center; }
.qr_box .img_qr { display: block; width: 92px; height: 92px; padding: 4px; border-radius: 6px; overflow: hidden; background: #fff; border: 2px solid #AACBFF; box-shadow: 0px 0px 5.8px 0px rgba(0, 0, 0, 0.25); margin: 0 auto 6px; }
.qr_box .img_qr img { width: 100%; }
.qr_box .link_text { display: inline-block; font-size: 11px; font-weight: 400; color: #005dea; line-height: 14px; border-bottom: 1px solid #005dea; }
/* flex */
.flex::after { content: ''; display: block; visibility: hidden; clear: both; }
/*! ─────────────────── Layout ─────────────────── */
html, body { background: #333333; }
.wrap { position: relative; width: 800px; height: 1132px; background: #fff; overflow: hidden; }
.container { position: relative; width: 100%; height: 1072px; }
.footer { width: 100%; padding: 0 48px 38px; }
.footer_wrap { position: relative; width: 100%; padding-top: 8px; border-top: 2px solid #ededed; }
.footer_wrap p { font-size: 12px; font-weight: 400; color: #666; line-height: 12px; }
.footer_wrap p:first-of-type { float: left; }
.footer_wrap p:last-of-type { float: right; }
.footer_wrap p .page_numb { font-weight: 700; color: #666; }
#nav { position: fixed; bottom: 40px; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); min-width: 164px; text-align: center; padding: 8px 16px; background: #04445f; border-radius: 20px; overflow: hidden; box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1); z-index: 1000;}
#nav > a { font-size: 16px; font-weight: 500; color: #fff; line-height: 24px; padding: 0 8px; display: inline-block; }
#nav > a.disabled { opacity: 0.2; pointer-events: none; }
#nav > .btn_prev::before,
#nav > .btn_next::after { width: 16px; height: 16px; vertical-align: -2px; content: ''; display: inline-block; }
#nav > .btn_prev::before { background: url(../image/icon/icon_arrow_left.svg) no-repeat center center; background-size: 18px; margin-right: 4px; }
#nav > .btn_next::after { background: url(../image/icon/icon_arrow_right.svg) no-repeat center center; background-size: 18px; margin-left: 4px; }
/*! ─────────────────── PAGE ─────────────────── */
/** ========== main ========== */
.main_section { width: 100%; background: url(../image/bg_main.png) no-repeat center top, #fff; background-size: 800px; }
.main_top { padding: 72px 62px; }
.main_top > span { font-size: 22px; font-weight: 700; color: #74E7DA; display: block; opacity: 0.5; }
.main_top > .title { width: 380px; height: 74px; text-indent: -9999px; background: url(../image/logo.svg) no-repeat center center; background-size: contain; overflow: hidden; margin-top: 26px; }
.main_top > p { font-size: 20px; font-weight: 400; color: #D4F2F4 ; line-height: 24px; margin-top: 26px; }
.main_info_box { padding: 72px 62px 40px; }
.main_info_box > * { padding-left: 10px; }
.main_info_box .health_box { padding-top: 36px; border-top: 2px solid #DBDFF3; margin-top: 36px; }
.main_info_box .title { font-size: 20px; font-weight: 500; line-height: 42px; text-align: center; display: inline-block; margin-bottom: 24px; }
.main_info_box .user_box .title { color: rgba(4, 68, 95, 0.70); width: 116px; height: 44px; line-height: 45px; background: url("data:image/svg+xml;charset=UTF-8,") no-repeat center; }
.main_info_box .health_box .title {width: 150px; height: 44px; background: url("data:image/svg+xml;charset=UTF-8,") no-repeat center; color: #d4f2f4; line-height: 45px; }
.main_info_box ul { padding-left: 10px; }
.main_info_box ul li { width: 100%; margin-bottom: 14px; }
.main_info_box ul li::after { content: ''; display: block; visibility: hidden; clear: both; }
.main_info_box ul li:last-of-type { margin-bottom: 0; }
.main_info_box ul li > * { float: left; color: #04445f; line-height: 31px; }
.main_info_box ul li span { display: block; font-size: 22px; font-weight: 400; margin-right: 8px; }
.main_info_box ul li strong { display: block; font-size: 26px; font-weight: 700; }
.main_info_box .date_box { position: absolute; right: 62px; bottom: 68px; font-size: 20px; font-weight: 700; color: #189AB4; }
.main_info_box .info_text { border-radius: 8px; padding: 16px 20px; margin-top: 135px; background: #F5F5F5;}
.main_info_box .info_text p {color: #8c8c8c; font-size: 12px; font-weight: 400; line-height: 17px; vertical-align: top;}
.main_info_box .info_text p::before {content: ""; display: inline-block; width: 16px; height: 16px; background-image: url(../image/icon/icon_inform.svg); background-repeat: no-repeat; background-size: contain; vertical-align: top; margin-right: 6px;}
/** ========== contents ========== */
.contents_top { position: relative; width: 100%; height: 170px; background: #04445F ; padding: 40px 70px; overflow: hidden; }
.contents_top .title { font-size: 32px; font-weight: 500; color: #D4F2F4; line-height: 120%; }
.contents_top .membership { position: absolute; right: 0; bottom: -16px; font-size: 96px; font-weight: 500; color: #fff; line-height: 100%; opacity: 0.2; }
.contents_list_box { padding: 32px 70px; }
.contents_list_box ol { width: 100%; padding-left: 100px; }
.contents_list_box ol > li { position: relative; padding-bottom: 24px; }
.contents_list_box ol > li::before { position: absolute; left: -65px; top: 0; width: 2px; height: 100%; background: #04445f; content: ''; display: block; }
.contents_list_box ol > li:last-of-type:before { display: none; }
.contents_list_box .part { width: 100%; }
.contents_list_box .part .title { font-size: 24px; font-weight: 500; color: #04445f; line-height: 26px; letter-spacing: -1px; padding-top: 18px; }
.contents_list_box .part .part_numb { position: absolute; left: -100px; top: 0; width: 70px; height: 70px; font-size: 32px; font-weight: 500; color: #fff; line-height: 70px; text-align: center; background: #04445f; border-radius: 50%; display: block; }
.contents_list_box ul { width: 100%; margin-top: 12px; }
.contents_list_box ul::after { content: ''; display: block; visibility: hidden; clear: both; }
.contents_list_box ul > li { float: left; display: block; width: 50%; }
.contents_list_box ul > li:nth-of-type(n+3) { margin-top: 6px; }
.contents_list_box .text { position: relative; font-size: 16px; font-weight: 400; color: #666; line-height: 24px; padding-left: 28px; }
.contents_list_box .text::before { content: ''; display: inline-block; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); width: 4px; height: 4px; background: #666; border-radius: 50%; }
.contents_list_box .line { flex: 1; border-top: 2px dashed #999; margin: 0 16px 0 32px; display: inline-block; }
.contents_list_box .page_numb { min-width: 30px; font-size: 20px; font-weight: 700; color: #666; text-align: right; }
/** ========== report ========== */
.report_section { position: relative; height: 100%; padding: 40px 48px 102px; }
.report_title { position: relative; padding-left: 12px; margin-bottom: 24px; }
.report_title::before { position: absolute; left: 0; top: 0; width: 4px; height: 38px; background: #333333; content: ''; display: inline-block; }
.report_title .title { font-size: 32px; font-weight: 700; line-height: 120%; }
.report_title .title i { width: 32px; height: 32px; display: inline-block; vertical-align: -5px; margin-right: 6px; }
.report_title .part_text { position: absolute; right: 0; top: 0; font-size: 40px; font-weight: 900; color: #f1f1f1; display: inline-block; }
.report_view_box { width: 100%; }
.report_view_box .title_box { width: 100%; margin-bottom: 8px; }
.report_view_box .title_box.type02 { padding: 0 4px 16px; border-bottom: 1px dashed #dddddd; margin-bottom: 16px; }
.report_view_box .title_box i { width: 24px; height: 24px; display: inline-block; vertical-align: -5px; margin-right: 4px; }
.report_view_box .title_box i.icon_report { background: url(../image/icon/icon_report.svg) no-repeat center center; background-size: contain; }
.report_view_box .title_box i.icon_chart { background: url(../image/icon/icon_chart.svg) no-repeat center center; background-size: contain; }
.report_view_box .title_box i.icon_trending { background: url(../image/icon/icon_trending.svg) no-repeat center center; background-size: contain; }
.report_view_box .title_box .title { font-size: 20px; font-weight: 500; line-height: 120%; letter-spacing: -0.2px; white-space: nowrap; display: inline-block; }
.report_view_box .title_box .text { font-size: 10px; font-weight: 400; color: #666; line-height: 120%; }
.report_view_box .title_box.flex .title { float: left; }
.report_view_box .title_box.flex .text { float: right; }
.report_view_box .sub_text_10 { font-size: 10px; font-weight: 400; color: #666; line-height: 120%; word-break: keep-all; }
.report_view_box .flex_between .sub_text_10 { float: right; }
.report_view_box .sub_text_10.bul { position: relative; padding-left: 14px; }
.report_view_box .sub_text_10.bul::before { content: ''; display: block; position: absolute; left: 6px; top: 5px; width: 2px; height: 2px; background: #666; border-radius: 50%; z-index: 1; }
.report_view_box .sub_text_12 { font-size: 12px; font-weight: 400; color: #666; line-height: 120%; word-break: keep-all; }
.report_view_box .sub_text_14 { font-size: 14px; font-weight: 400; color: #666; line-height: 130%; word-break: keep-all; }
.report_view_box .point_text { float: left; position: relative; max-width: 92px; height: 48px; font-size: 16px; font-weight: 400; color: #4987ff; line-height: 48px; display: inline-block; z-index: 1; letter-spacing: -2.3px;}
.report_view_box .point_text strong { font-size: 48px; font-weight: 700; color: #4987ff; }
.report_view_box .point_text::before { position: absolute; left: 0; bottom: 0; width: 100%; height: 20px; background: #dce8ff; content: ''; display: block; z-index: -1; }
.report_view_box .point_text.yellow,
.report_view_box .point_text.yellow strong { color: #ff8f0c; }
.report_view_box .point_text.yellow::before { background: #ffe9cf; }
.report_view_box .point_text.yellow_light,
.report_view_box .point_text.yellow_light strong { color: #ffc700; }
.report_view_box .point_text.yellow_light::before { background: #fff9e3; }
.report_view_box .point_text.red,
.report_view_box .point_text.red strong { color: #ff4f4f; }
.report_view_box .point_text.red::before { background: #ffd8d8; }
.report_view_box .point_text.red_light,
.report_view_box .point_text.red_light strong { color: #ff7b7b; }
.report_view_box .point_text.red_light::before { background: #FFEFEF; }
.report_view_box .sub_title_box { position: relative; width: 100%; }
.report_view_box .sub_title_box .title { position: relative; display: block; font-size: 16px; font-weight: 500; line-height: 120%; letter-spacing: -0.16px; }
.report_view_box .sub_title_box .title::before { position: absolute; left: -12px; top: 7px; width: 4px; height: 4px; background: #333; border-radius: 50%; content: ''; display: inline-block; }
.report_view_box .sub_title_box.flex .title { float: left; }
.report_view_box .sub_title_box .sub_desc { width: 100%; font-size: 12px; font-weight: 400; color: #666; line-height: 16px; word-break: keep-all; }
.report_view_box .sub_title_box .tag { padding: 2px 8px; position: absolute; top: -5px; left: 48px;}
.report_view_box .sub_title_box .tag.no_position { position: relative; top: 0; left: 0; margin-bottom: 12px; margin-top: -5px; margin-left: 2px; padding: 7px; line-height: 100%;}
.report_view_box .tag.no_position.fixed {position: absolute; top: 191px; left: 293px;}
.report_view_box .sub_title_box .title + .tag.no_position { margin-left: 11px;}
.report_view_box .sub_title_box.flex .right { float: right; text-align: right; }
.report_view_box .sub_title_box .detail_text { width: 100%; min-height: 32px; font-size: 12px; font-weight: 400; color: #999; line-height: 120%; letter-spacing: -0.12px; margin-top: 4px; }
.report_view_box .sub_title_box .detail_text_md { font-size: 12px; font-weight: 700; color: #666; line-height: 100%; margin-top: 10px; }
.report_view_box .col_group_box { width: 100%;}
.report_view_box .col_group_box::after { content: ''; display: block; visibility: hidden; clear: both; }
.report_view_box .col_group_box > div { margin-bottom: 12px; }
.report_view_box .col_group_box .col01 { width: 100%; }
.report_view_box .col_group_box .col02 { float: left; width: 345px; margin-left: 14px;}
.report_view_box .col_group_box .col02.min_height { min-height: 198px; position: relative;}
.report_view_box .col_group_box .col02.min_height .sub_desc { position: absolute; bottom: -40px; left: 0; padding: 0 15px; width: 100%; font-size: 12px; font-weight: 400; color: #666; line-height: 16px; word-break: keep-all; }
.report_view_box .col_group_box .col02:nth-of-type(odd),
.report_view_box .col_group_box .col01 ~ .col02 { margin-left: 0; }
.report_view_box .col_group_box .col01 ~ .col02:nth-child(even) { margin-right: 14px; }
.report_view_box .col_text_right { width: 100%; font-size: 10px; font-weight: 400; color: #666; line-height: 120%; text-align: right; margin-top: -15px; }
/* report_view_box 예방실천가이드 */
.report_view_box.guide_box {margin-bottom: 12px;}
.report_view_box.guide_box:nth-child(3){margin-bottom: 0;}
.report_view_box.guide_box .title_box{margin-bottom: 13px;}
.report_view_box .food_data_box {padding: 22px 21px; background: #f5f5f5; border-radius: 16px;}
.report_view_box .food_data_box .sub_title_box {padding-left: 9px;}
.report_view_box .food_list_box ul{width: 100%; min-height: 87px;}
.report_view_box .food_list_box ul.list_first{margin-bottom: 15px;}
.report_view_box .food_list_box ul li{width: 25%; max-width: 60px; margin-right: 21px; float: left; text-align: center;}
.report_view_box .food_list_box ul li:last-child{margin-right: 0;}
.report_view_box .food_list_box ul li > div {margin-bottom: 8px; background-color: #f5f5f5; border-radius: 999px; overflow: hidden; width: 60px; height: 60px; text-align: center; line-height: 60px;}
.report_view_box .food_list_box ul li img { vertical-align: middle; width: 100%; height: auto; display: block; background-color: #f5f5f5; outline: none; border: none; image-rendering: crisp-edges; object-fit: cover; border-radius: 999px; border: 1px solid #f5f5f5;}
.report_view_box .food_list_box ul li .text{color: #6c6c6c; font-weight: 400;
line-height: 100%;}
.workout_view_box .type_flex { width: 100%; }
.workout_view_box .type_flex > li { width: 48%; float: left;}
.workout_view_box .type_flex > li:nth-child(1) {margin-right: 25px;}
.workout_view_box .type_flex > li .sub_text {color: #999; font-size: 11px; font-weight: 400; line-height: 120%; letter-spacing: -0.11px; word-break: keep-all; position: relative; padding-left: 14px;}
.workout_view_box .type_flex > li .sub_text::before {content: ''; display: block;position: absolute; left: 6px; top: 5px; width: 2px; height: 2px; background: #666; border-radius: 50%; z-index: 1;}
.workout_view_box .work_title {padding: 2px 6px; color: #fff; font-size: 14px; font-weight: 700; letter-spacing: -0.14px; background-color: #333; border-radius: 4px; display: inline-block; margin-bottom: 5px;}
.workout_view_box .work_desc {margin-bottom: 18px;}
.workout_view_box .work_desc .work_img {padding: 10px 23px; border: 1px dashed #c3c3c3; max-width: 304px; background-color: #fff; margin-bottom: 16px; position: relative;}
.workout_view_box .work_desc .work_img img {width: 114px; height: 114px;}
.workout_view_box .work_desc .work_img img:first-child {margin-right: 23px;}
.workout_view_box .work_desc .work_img .img_text {font-size: 6px; color: #999; line-height: 120%; letter-spacing: -0.06px; position: absolute; bottom: 2px; right: 2px;}
.workout_view_box .work_desc > ul {min-height: 66px; height: fit-content;}
.workout_view_box .work_recomend .sub_title_box {margin-bottom: 16px !important;}
.workout_view_box .work_recomend > ul {min-height: 54px; height: fit-content;}
.report_view_box .data_box.info_text {border-radius: 8px; padding: 10px; margin-bottom: 8px;}
.report_view_box .data_box.info_text p {color: #8c8c8c; font-size: 12px; font-weight: 400; line-height: 17px; vertical-align: top;}
.report_view_box .data_box.info_text p::before {content: ""; display: inline-block; width: 16px; height: 16px; background-image: url(../image/icon/icon_inform.svg); background-repeat: no-repeat; background-size: contain; vertical-align: top; margin-right: 8px;}
.report_view_box .document_view_box .document_tit { width: 100%; display: inline-block; color: #666; font-size: 12px; font-weight: 500; line-height: 14px; letter-spacing: -0.12px; padding-bottom: 8px; border-bottom: 1px solid #EDEDED; margin-bottom: 8px;}
.report_view_box .document_view_box .sub_text {color: #999; font-size: 12px; font-weight: 400; line-height: 120%; letter-spacing: -0.12px; position: relative; padding-left: 14px;}
.report_view_box .document_view_box .sub_text::before {content: ''; display: block;position: absolute; left: 6px; top: 5px; width: 2px; height: 2px; background: #666; border-radius: 50%; z-index: 1;}
/*? report_view_box - table */
.report_view_box .table_box { position: relative; width: 100%; padding-bottom: 4px; margin-top: 4px; }
.report_view_box .table_box .table_text { position: sticky; left: 0; top: 0; width: 100%; font-size: 12px; font-weight: 400; color: #666; line-height: 20px; text-align: right; margin-bottom: 8px; }
.report_view_box .table_box table { width: 100%; border-bottom: 1px solid #666; }
.report_view_box .table_box table thead th { font-size: 12px; font-weight: 700; color: #fff; line-height: 14px; word-break: keep-all; background: #666; padding: 8px; }
.report_view_box .table_box table thead th.th_etc { color: #333; background: #d8d8d8; }
.report_view_box .table_box table thead th i { width: 14px; height: 14px; vertical-align: -3px; display: inline-block; margin-left: 2px; }
.report_view_box .table_box table thead th i img { width: 100%; }
.report_view_box .table_box table tbody tr { border-bottom: 1px dashed #666; }
.report_view_box .table_box table tbody th,
.report_view_box .table_box table tbody td { font-size: 12px; font-weight: 400; line-height: 14px; padding: 8px 6px; text-align: center; vertical-align: middle; border-right: 1px dashed #666; }
.report_view_box .table_box table tbody th { font-weight: 700; }
.report_view_box .table_box table tbody td:last-of-type { border-right: none; }
/*? report_view_box - chart */
.report_view_box .chart_box { width: 100%; min-height: 250px; padding: 15px 10px; background: #f5f5f5; border-radius: 16px; margin-top: 16px; }
.report_view_box .chart_box img { width: 100%; }
/*? report_view_box - data */
.report_view_box .data_box { padding: 16px 10px 12px; background: #f5f5f5; border-radius: 16px; }
.report_view_box .data_box .sub_title_box { margin-bottom: 12px; position: relative;}
.report_view_box .data_box .type_flex { width: 100%; }
.report_view_box .data_box .type_flex::after { content: ''; display: block; visibility: hidden; clear: both; }
/*? report_view_box - info */
.report_view_box .data_info_box { width: 100%; padding: 16px 20px; background: #f5f5f5; border-radius: 16px; }
.report_view_box .data_info_box p { font-size: 14px; font-weight: 400; color: #757575; line-height: 130%; }
/*? report_view_box - rating_bar_wrap */
.report_view_box .rating_bar_wrap { float: left; width: 288px; padding-top: 30px;}
.report_view_box .rating_bar_wrap .graph_box { display: inline-block; position: relative; padding-top: 32px; vertical-align: bottom; }
.report_view_box .rating_bar_wrap .graph_box .bar_wrap { position: relative; width: 288px; height: 20px; background: url(../image/img_rating_graph.svg) no-repeat center center; background-size: contain; }
.report_view_box .rating_bar_wrap .graph_box .state { position: absolute; top: 0; transform: translateX(-95%); font-size: 11px; font-weight: 500; color: #fff; line-height: 21px; white-space: nowrap; background: #565759; padding: 0 9px; border-radius: 4px; z-index: 1; }
.report_view_box .rating_bar_wrap .graph_box .state::after { content: ''; display: block; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); width: 8px; height: 11px; background: url(../image/icon_tail_gray.svg) no-repeat center center; background-size: contain; z-index: -1; }
.report_view_box .rating_bar_wrap .label_box { width: 100%; margin-top: 4px; }
.report_view_box .rating_bar_wrap .label_box::after { content: ''; display: block; visibility: hidden; clear: both; }
.report_view_box .rating_bar_wrap .label_box .text { display: inline-block; font-size: 12px; font-weight: 400; color: #666; line-height: 120%; }
.report_view_box .rating_bar_wrap .label_box .text:first-of-type { float: left; }
.report_view_box .rating_bar_wrap .label_box .text:last-of-type { float: right; }
.report_view_box .rating_bar_text { float: left; width: 322px; padding: 20px 0 20px 24px; border-left: 1px solid #ddd; margin-left: 24px; }
.report_view_box .rating_bar_text ul li { position: relative; font-size: 14px; font-weight: 400; color: #757575; line-height: 120%; padding-left: 20px; }
.report_view_box .rating_bar_text ul li::before { content: ''; display: block; position: absolute; left: 8px; top: 7px; width: 3px; height: 3px; background: #757575; border-radius: 50%; }
/*? report_view_box - exercise */
.report_view_box .exercise_box { position: relative; width: 100%; min-height: 250px; padding: 20px 10px; background: #f5f5f5; text-align: center; border-radius: 16px; margin-top: 12px; }
.report_view_box .exercise_box img { position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); width: auto !important; max-width: 100%; }
/*? report_view_box - memo */
.report_view_box .memo_box { width: 100%; padding: 40px 20px; background: #F5F5F5; border-radius: 16px; margin-top: 10px; }
.report_view_box .memo_box .line { display: block; width: 100%; height: 1px; background: #8D8D8D; margin-bottom: 32px; }
.report_view_box .memo_box .etc { width: 100%; height: 280px; background: #fff; border-radius: 16px; }
/** ========== 종합 건강나이 ========== */
.age_view_box { min-height: 98px; }
.age_view_box .age_box { float: left; width: 100px; height: 62px; text-align: center; padding: 8px; background: #fff; border: 2px solid #999; border-radius: 14px; }
.age_view_box .age_box > span { font-size: 12px; font-weight: 700; color: #999; display: block; margin-bottom: 4px; }
.age_view_box .health_age > span { color: #333; }
.age_view_box .age_box > strong { height: 28px; font-size: 14px; font-weight: 400; color: #999; line-height: 28px; display: block; }
.age_view_box .age_box > strong em { font-size: 28px; font-weight: 700; }
.age_view_box .arrow_text { float: left; width: 48px; height: 62px; font-size: 16px; font-weight: 700; text-align: center; display: block; overflow: hidden; padding: 16px 0; margin: 0 10px; }
.age_view_box .arrow_text::after { width: 32px; height: 16px; content: ''; display: block; margin: 0 auto 4px; }
.age_view_box .sub_text_10 { float: left; width: 100%; }
.age_view_box.blue .health_age { border: 2px solid #4987ff; }
.age_view_box.blue .health_age > strong,
.age_view_box.blue .arrow_text { color: #4987ff; }
.age_view_box.blue .arrow_text::after { background: url(../image/icon/icon_arrow_blue.svg) no-repeat center center; background-size: contain; }
.age_view_box.yellow .health_age { border: 2px solid #ff8f0c; }
.age_view_box.yellow .health_age > strong,
.age_view_box.yellow .arrow_text { color: #ff8f0c; }
.age_view_box.yellow .arrow_text::after { background: url(../image/icon/icon_arrow_yellow.svg) no-repeat center center; background-size: contain; }
.age_view_box.yellow_light .health_age { border: 2px solid #ffc700; }
.age_view_box.yellow_light .health_age > strong,
.age_view_box.yellow_light .arrow_text { color: #ffc700; }
.age_view_box.yellow_light .arrow_text::after { background: url(../image/icon/icon_arrow_yellowlight.svg) no-repeat center center; background-size: contain; }
.age_view_box.red .health_age { border: 2px solid #ff4f4f; }
.age_view_box.red .health_age > strong,
.age_view_box.red .arrow_text { color: #ff4f4f; }
.age_view_box.red .arrow_text::after { background: url(../image/icon/icon_arrow_red.svg) no-repeat center center; background-size: contain; }
.age_view_box.red_light .health_age { border: 2px solid #ff7b7b; }
.age_view_box.red_light .health_age > strong,
.age_view_box.red_light .arrow_text { color: #ff7b7b; }
.age_view_box.red_light .arrow_text::after { background: url(../image/icon/icon_arrow_redlight.svg) no-repeat center center; background-size: contain; }
/** ========== 주요 7대 질환 건강 등급 & 건강나이 ========== */
.total_data_box { padding: 0 10px; }
.total_data_box ul > li { width: 100%; border-bottom: 1px dashed #dcdcdc; }
.total_data_box ul > li::after { content: ''; display: block; visibility: hidden; clear: both; }
.total_data_box ul > li:last-of-type { border-bottom: none; }
.total_data_box ul > li > div { float: left; border-right: 1px dashed #dcdcdc; }
.total_data_box ul > li > div:nth-of-type(1) { width: 140px; padding: 6px 10px; }
.total_data_box ul > li > div:nth-of-type(2) { width: 105px; text-align: center; padding: 8px 10px; }
.total_data_box ul > li > div:nth-of-type(3) { width: 115px; text-align: center; padding: 8px 10px; }
.total_data_box ul > li > div:nth-of-type(4) { width: 304px; padding: 26px 24px 10px ; border-right: none; }
.total_data_box .disease { font-size: 16px; font-weight: 400; color: #333; line-height: 120%; }
.total_data_box .disease i { width: 24px; height: 24px; display: inline-block; vertical-align: -6px; margin-right: 6px; }
.total_data_box .age { font-size: 18px; font-weight: 400; line-height: 120%; }
.total_data_box .age.blue { color: #4987ff; }
.total_data_box .age.yellow { color: #ff8f0c; }
.total_data_box .age.yellow_light { color: #ffc700; }
.total_data_box .age.red { color: #ff4f4f; }
.total_data_box .age.red_light { color: #ff7b7b; }
.total_data_box .graph_box { position: relative; width: 100%; height: 2px; background: #d9d9d9; }
.total_data_box .graph_box::before { position: absolute; left: -3px; top: -3px; width: 8px; height: 8px; background: #4987ff; border-radius: 50%; content: ''; display: block; z-index: 1; }
.total_data_box .graph_box::after { position: absolute; right: -3px; top: -3px; width: 8px; height: 8px; background: #ff4f4f; border-radius: 50%; content: ''; display: block; z-index: 1; }
.total_data_box .graph_box .standard { position: absolute; left: 50%; top: -4px; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); width: 10px; height: 10px; background: #fff; border: 2px solid #999; border-radius: 50%; z-index: 10; }
.total_data_box .graph_box .bar { position: absolute; top: -1px; height: 4px; }
.total_data_box .graph_box .bar .dot { position: absolute; top: -3px; width: 10px; height: 10px; background: #333; border-radius: 50%; content: ''; display: block; z-index: 5; }
.total_data_box .graph_box .bar .dot .text { position: absolute; left: 50%; top: -16px; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); min-width: 40px; font-size: 12px; font-weight: 500; color: #333; line-height: 12px; text-align: center; overflow: hidden; display: block; }
.total_data_box .graph_box .bar.blue { width: 2%; right: 50%; background: #4987ff; }
.total_data_box .graph_box .bar.blue::after { left: 0; }
.total_data_box .graph_box .bar.blue .dot { left: -5px; }
.total_data_box .graph_box .bar.red { width: 2%; left: 50%; background: #ff4f4f; }
.total_data_box .graph_box .bar.red::after { right: 0; }
.total_data_box .graph_box .bar.red .dot { right: -5px; }
/** ========== 종합 영양성분 ========== */
.total_nutrient_box { width: 100%; padding: 8px 0 0 10px; }
.total_nutrient_box > .left { float: left; width: 494px; }
.total_nutrient_box .detail_box .title { font-size: 16px; font-weight: 500; color: #333; line-height: 120%; letter-spacing: -0.16px; margin-bottom: 12px; }
.total_nutrient_box .detail_box .title::before { content: ''; display: inline-block; width: 24px; height: 24px; vertical-align: -6px; margin-right: 6px; }
.total_nutrient_box .detail_box.normal .title::before { background: url(../image/icon/icon_check_black.svg) no-repeat center center; background-size: contain; }
.total_nutrient_box .detail_box.warning .title::before { background: url(../image/icon/icon_warning_black.svg) no-repeat center center; background-size: contain; }
.total_nutrient_box .detail_box ul { width: 100%; }
.total_nutrient_box .detail_box ul::after { content: ''; display: block; visibility: hidden; clear: both; }
.total_nutrient_box .detail_box ul li { float: left; width: 242px; }
.total_nutrient_box .detail_box ul li:nth-of-type(odd) { margin-right: 10px; }
.total_nutrient_box .detail_box ul li:nth-of-type(n+3) { margin-top: 10px; }
.total_nutrient_box .detail_box ul li > * { display: inline-block; vertical-align: middle; }
.total_nutrient_box .detail_box ul li .text { font-size: 16px; font-weight: 400; line-height: 24px; margin-right: 15px; }
.total_nutrient_box .detail_box.normal ul li .text { color: #005dea; }
.total_nutrient_box .detail_box.warning ul li .text { color: #FF4F4F; }
.total_nutrient_box .detail_box ul li .chip { font-size: 12px; font-weight: 500; line-height: 16px; padding: 4px 8px; border-radius: 4px; }
.total_nutrient_box .detail_box.normal ul li .chip { color: #005dea; background: #DCE8FF; }
.total_nutrient_box .detail_box.warning ul li .chip { color: #FF4F4F; background: rgba(255, 79, 79, 0.10); }
.total_nutrient_box > .right { float: right; width: 156px; margin-left: 24px; }
.total_nutrient_box .warning_bubble_box { display: block; width: 100%; height: 58px; text-align: center; padding: 9px; background: url(../image/bg_siren.svg) no-repeat center top; background-size: 156px; margin-bottom: 16px; }
.total_nutrient_box .warning_bubble_box::after { content: ''; display: block; visibility: hidden; clear: both; }
.total_nutrient_box .warning_bubble_box .icon_siren { float: left; display: block; width: 28px; height: 28px; background: url(../image/icon/icon_siren.png) no-repeat center center; background-size: contain; margin-right: 1px; }
.total_nutrient_box .warning_bubble_box .text { float: left; display: block; font-size: 13px; font-weight: 500; color: #ff4f4f; line-height: 28px; }
.total_nutrient_box > .bottom { float: left; width: 100%; text-align: right; margin-top: 16px ; }
.total_nutrient_box > .bottom p { display: inline-block; position: relative; font-size: 12px; font-weight: 400; color: #666; line-height: 120%; word-break: keep-all; padding-left: 14px; }
.total_nutrient_box > .bottom p::before { content: ''; display: block; position: absolute; left: 6px; top: 5px; width: 2px; height: 2px; background: #666; border-radius: 50%; z-index: 1; }
/** ========== 경고 박스 ========== */
.warning_box { padding: 12px; background: #fee2e2; border-radius: 8px; margin-bottom: 16px; }
.warning_box p { font-size: 16px; font-weight: 500; color: #333; line-height: 24px; text-align: center; word-break: keep-all; }
.warning_box p b { font-weight: 700; color: #ff4f4f; }
/** ========== 위험도 ========== */
.times_view_box { padding-bottom: 8px; }
.times_view_box .times_graph_box { float: left; padding-top: 10px; margin-left: 12px; }
.times_view_box .times_graph_box li { width: 100%; }
.times_view_box .times_graph_box li::after { content: ''; display: block; visibility: hidden; clear: both; }
.times_view_box .times_graph_box li .bar { float: left; max-width: 125px; height: 13px; border-radius: 4px; }
.times_view_box .times_graph_box li .text { float: left; width: 358px; font-size: 12px; font-weight: 400; line-height: 13px; display: inline-block; margin-left: 4px; }
.times_view_box .times_graph_box .average_bar { width: 205px; margin-bottom: 6px; }
.times_view_box .times_graph_box .max_width { width: 130px; max-width: 125px; height: 13px; float: left; border-radius: 4px; background-color: #d9d9d9;}
.times_view_box .times_graph_box .average_bar .bar { background: #a9a9a9; }
.times_view_box .times_graph_box .average_bar .text { width: 75px; color: #999; }
.times_view_box .times_graph_box .user_bar .bar { background: #666; }
.times_view_box .times_graph_box .user_bar .text { width: 60px; color: #333; }
.times_view_box .sub_text_10 { float: left; width: 100%; }
/** ========== 건강 등수 ========== */
.rank_view_box { padding-bottom: 8px; }
.rank_view_box .rank_graph_box { float: right; width: 200px; max-width: 200px; margin-right: 12px; }
.rank_view_box .rank_graph_box::after { content: ''; display: block; visibility: hidden; clear: both; }
.rank_view_box .rank_graph_box li { float: left; position: relative; width: 16px; height: 16px; background: #d9d9d9; border-radius: 4px; }
.rank_view_box .rank_graph_box li:nth-of-type(1),
.rank_view_box .rank_graph_box li:nth-of-type(10) { height: 16px; margin: 15px 2px; }
.rank_view_box .rank_graph_box li:nth-of-type(2),
.rank_view_box .rank_graph_box li:nth-of-type(9) { height: 20px; margin: 13px 2px; }
.rank_view_box .rank_graph_box li:nth-of-type(3),
.rank_view_box .rank_graph_box li:nth-of-type(8) { height: 24px; margin: 11px 2px; }
.rank_view_box .rank_graph_box li:nth-of-type(4),
.rank_view_box .rank_graph_box li:nth-of-type(7) { height: 28px; margin: 9px 2px; }
.rank_view_box .rank_graph_box li:nth-of-type(5),
.rank_view_box .rank_graph_box li:nth-of-type(6) { height: 34px; margin: 7px 2px; }
.rank_view_box .rank_graph_box li.active { background: #666; }
.rank_view_box .rank_graph_box li.active::before { position: absolute; left: 0; top: -13px; width: 16px; height: 9px; content: ''; display: block; }
.rank_view_box .rank_graph_box li.active.blue::before { background: url(../image/icon/icon_rank_blue.svg) no-repeat center center; background-size: 12px; }
.rank_view_box .rank_graph_box li.active.yellow::before { background: url(../image/icon/icon_rank_yellow.svg) no-repeat center center; background-size: 12px; }
.rank_view_box .rank_graph_box li.active.yellow_light::before { background: url(../image/icon/icon_rank_yellowlight.svg) no-repeat center center; background-size: 12px; }
.rank_view_box .rank_graph_box li.active.red::before { background: url(../image/icon/icon_rank_red.svg) no-repeat center center; background-size: 12px; }
.rank_view_box .rank_graph_box li.active.red_light::before { background: url(../image/icon/icon_rank_redlight.svg) no-repeat center center; background-size: 12px; }
.rank_view_box .rank_graph_box li:first-of-type::after { position: absolute; left: 0; top: 20px; width: 100%; font-size: 9px; font-weight: 400; color: #999; text-align: center; content: '1'; display: block; }
.rank_view_box .rank_graph_box li:last-of-type::after { position: absolute; left: 0; top: 20px; width: 100%; font-size: 9px; font-weight: 400; color: #999; text-align: center; content: '100'; display: block; }
.rank_view_box .rank_graph_box li .text { position: absolute; left: 0; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); width: 100%; text-align: center; font-size: 9px; font-weight: 500; color: #fff; }
.rank_view_box .sub_text_10,
.rank_view_box .sub_text_12 { float: left; width: 100%; }
/** ========== 검진 수치 ========== */
.level_view_box { width: 100%; padding: 16px 0 0; border-top: 1px dotted #999; }
.level_view_box .type_flex { width: 100%; }
.level_view_box .type_flex::after { content: ''; display: block; visibility: hidden; clear: both; }
.level_view_box .type_flex > li { float: left; width: 302px; margin-right: 40px; }
.level_view_box .type_flex > li:nth-of-type(2n) { margin-right: 0; }
.level_view_box .type_flex > li:nth-of-type(n+3) { margin-top: 12px; }
.level_view_box .desc { width: 100%; }
.level_view_box .desc::after { content: ''; display: block; visibility: hidden; clear: both; }
.level_view_box .desc .title { float: left; max-width: 83px; font-size: 12px; font-weight: 700; color: #333; line-height: 14px; margin-right: 6px; }
.level_view_box .desc .title .unit { display: block; font-size: 10px; font-weight: 400; color: #888; line-height: 10px; margin-top: 2px; }
.level_view_box .desc p { float: left; max-width: 250px; font-size: 10px; font-weight: 400; color: #666; line-height: 14px; word-break: keep-all; letter-spacing: -0.2px; }
.level_view_box .graph_box { position: relative; width: 100%; margin-top: 8px; }
.level_view_box .graph_box ul { width: 100%; padding: 22px 0 16px; }
.level_view_box .graph_box ul::after { content: ''; display: block; visibility: hidden; clear: both; }
.level_view_box .graph_box ul li { float: left; position: relative; font-size: 11px; font-weight: 500; color: rgba(255, 255, 255, 0.5); text-align: center; line-height: 21px; }
.level_view_box .graph_box.type_02 ul li { width: 151px; }
.level_view_box .graph_box.type_03 ul li { width: 100.66px; }
.level_view_box .graph_box.type_04 ul li { width: 75.5px; }
.level_view_box .graph_box.type_05 ul li { width: 60.4px; }
.level_view_box .graph_box ul li:first-of-type { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
.level_view_box .graph_box ul li:last-of-type { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
.level_view_box .graph_box ul li.blue { background: #4987ff; }
.level_view_box .graph_box ul li.yellow_light { background: #ffc700; }
.level_view_box .graph_box ul li.yellow { background: #ff8f0c; }
.level_view_box .graph_box ul li.red_light { background: #ff7b7b ; }
.level_view_box .graph_box ul li.red { background: #ff4f4f; }
.level_view_box .graph_box ul li.active { font-weight: 500; color: #fff; }
.level_view_box .graph_box ul li .max::before { width: 1px; height: 28px; background: #d9d9d9; content: ''; display: block; margin: 0 auto; }
.level_view_box .graph_box ul li .max { position: absolute; right: -10px; top: -4px; width: 20px; font-size: 10px; font-weight: 400; color: #a8a8a8; line-height: 12px; text-align: center; display: inline-block; z-index: 5; }
.level_view_box .graph_box ul li .value { display: block; position: absolute; top: -21px; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); font-size: 12px; font-weight: 700; line-height: 12px; }
.level_view_box .graph_box ul li.blue .value { color: #4987ff; }
.level_view_box .graph_box ul li.yellow_light .value { color: #ffc700; }
.level_view_box .graph_box ul li.yellow .value { color: #ff8f0c; }
.level_view_box .graph_box ul li.red_light .value { color: #ff7b7b ; }
.level_view_box .graph_box ul li.red .value { color: #ff4f4f; }
.level_view_box .graph_box ul li .value::after { width: 8px; height: 6px; background: #d9d9d9; content: ''; display: block; margin: 1px auto 0; }
.level_view_box .graph_box ul li.blue .value::after { background: url(../image/icon/icon_arrow_down_blue.svg) no-repeat center center; background-size: contain; }
.level_view_box .graph_box ul li.yellow_light .value::after { background: url(../image/icon/icon_arrow_down_yellow_light.svg) no-repeat center center; background-size: contain; }
.level_view_box .graph_box ul li.yellow .value::after { background: url(../image/icon/icon_arrow_down_yellow.svg) no-repeat center center; background-size: contain; }
.level_view_box .graph_box ul li.red_light .value::after { background: url(../image/icon/icon_arrow_down_red_light.svg) no-repeat center center; background-size: contain; }
.level_view_box .graph_box ul li.red .value::after { background: url(../image/icon/icon_arrow_down_red.svg) no-repeat center center; background-size: contain; }
/** ========== 습관 개선 ========== */
.habit_view_box { min-height: 124px; }
.habit_view_box > .title { font-size: 14px; font-weight: 700; color: #666; margin-bottom: 12px; }
.habit_view_box > .title:not(:first-of-type) { margin-top: 16px; }
.habit_view_box .graph_box { width: 100%; }
.habit_view_box .graph_box::after { content: ''; display: block; visibility: hidden; clear: both; }
.habit_view_box .graph_box > ul { float: left; position: relative; width: 132px; }
.habit_view_box .graph_box > ul:first-of-type { margin-right: 40px; }
.habit_view_box .graph_box > ul li { width: 100%; margin-bottom: 4px; }
.habit_view_box .graph_box > ul li::after { content: ''; display: block; visibility: hidden; clear: both; }
.habit_view_box .graph_box > ul li:last-of-type { margin-bottom: 0; }
.habit_view_box .graph_box > ul li p {font-size: 12px; font-weight: 400; color: #a8a8a8; line-height: 16px; display: inline-block; margin-right: 4px; margin-bottom: 4px;}
.habit_view_box .graph_box > ul li .bar_wrap {overflow: hidden; }
.habit_view_box .graph_box > ul li .bar_wrap.wid01 { margin-top: 4px; }
.habit_view_box .graph_box > ul li .bar { height: 16px; padding: 0 4px; text-align: right; border-top-right-radius: 3px; border-bottom-right-radius: 3px; display: block; }
.habit_view_box .graph_box > ul li .text { font-size: 11px; font-weight: 700; color: #fff; line-height: 16px; vertical-align: 2px; display: inline-block; }
.habit_view_box .graph_box .before_box::after { position: absolute; right: -28px; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); width: 16px; height: 16px; background: url(../image/icon/icon_arrow_habit.svg) no-repeat center center; background-size: contain; content: ''; display: block; z-index: 5; }
.habit_view_box .graph_box .before_box .bar { background: #ff4f4f; }
.habit_view_box .graph_box .after_box .bar { background: #4987ff; }
/** ========== 예측 위험도 ========== */
.graph_view_box { position: relative; }
.graph_view_box .bar_graph_wrap { position: relative; width: 100%; padding-left: 15px; }
.graph_view_box .bar_graph_wrap .y-axis > span,
.graph_view_box .bar_graph_wrap .x-axis > span { font-size: 10px; font-weight: 400; color: #a8a8a8; display: block; }
.graph_view_box .bar_graph_wrap .y-axis { position: absolute; left: 0; top: 0; }
.graph_view_box .bar_graph_wrap .y-axis > span:last-of-type { margin-bottom: 0; }
.graph_view_box .bar_graph_wrap .y-axis .unit { margin-bottom: 10px; }
.graph_view_box .bar_graph_wrap .y-axis .text { margin-bottom: 30px; }
.graph_view_box .bar_graph_wrap .x-axis { width: 100%; }
.graph_view_box .bar_graph_wrap .x-axis::after { content: ''; display: block; visibility: hidden; clear: both; }
.graph_view_box .bar_graph_wrap .x-axis .text { float: left; width: 48.33px; text-align: center; }
.graph_view_box .bar_graph_wrap .graph_box { position: relative; z-index: 1; margin-bottom: 4px; }
.graph_view_box .bar_graph_wrap .graph_box::before { position: absolute; left: 0; bottom: 0; width: 100%; height: 10px; background: #e4eaf6; content: ''; display: block; z-index: -1; }
.graph_view_box .bar_graph_wrap .graph_box ul { width: 100%; }
.graph_view_box .bar_graph_wrap .graph_box ul::after { content: ''; display: block; visibility: hidden; clear: both; }
.graph_view_box .bar_graph_wrap .graph_box .bar_wrap { float: left; position: relative; width: 48.33px; height: 105px; margin-top: 5px; }
.graph_view_box .bar_graph_wrap .graph_box .bar { position: absolute; bottom: 0; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); width: 12px; border-top-left-radius: 3px; border-top-right-radius: 3px; }
.graph_view_box .bar_graph_wrap .graph_box .bar + .bar { margin-left: 5px; }
.graph_view_box .bar_graph_wrap .graph_box .bar::after { position: absolute; left: 4px; top: -2px; width: 2px; height: 2px; background: #fff; border: 1px solid #666; border-radius: 50%; content: ''; display: block; }
.graph_view_box .bar_graph_wrap .graph_box .bar.red { background: #ff4f4f; }
.graph_view_box .bar_graph_wrap .graph_box .bar.blue { background: #4987ff; }
.graph_view_box .bar_graph_wrap .graph_box .bar .text { position: absolute; left: 50%; top: -14px; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); font-size: 10px; font-weight: 700; color: #666; line-height: 10px; display: block; }
.graph_view_box .bar_graph_wrap .graph_box .bar.red .text { color: #ff4f4f; }
.graph_view_box .bar_graph_wrap .graph_box .bar.blue .text { color: #4987ff; }
.graph_view_box .bar_graph_wrap.x_05 .x-axis .text,
.graph_view_box .bar_graph_wrap.x_05 .graph_box .bar_wrap { width: 56px; }
.graph_view_box .bar_graph_wrap.x_06 .x-axis .text,
.graph_view_box .bar_graph_wrap.x_06 .graph_box .bar_wrap { width: 48.33px; }
.graph_view_box .bar_graph_wrap.type_01 .graph_box .bar.red { left: 50%; }
.graph_view_box .bar_graph_wrap.type_01 .graph_box .bar.blue { left: 50%; }
.graph_view_box .bar_graph_wrap.type_02 .graph_box .bar.red { left: 32%; }
.graph_view_box .bar_graph_wrap.type_02 .graph_box .bar.blue { left: 56%; }
.graph_view_box .legend_box { position: absolute; right: 0; top: -16px; }
.graph_view_box .legend_box .dot { font-size: 10px; font-weight: 400; color: #666; display: inline-block; vertical-align: middle; margin-left: 8px; }
.graph_view_box .legend_box .dot::before { width: 10px; height: 10px; background: #666; border-radius: 50%; content: ''; display: inline-block; vertical-align: -1px; margin-right: 2px; }
.graph_view_box .legend_box .dot.red::before { background: #ff4f4f; }
.graph_view_box .legend_box .dot.blue::before { background: #4987ff; }
/** ========== 검진결과 및 투약 분석 ========== */
.result_mark_guide { width: 100%; }
.result_mark_guide .mark { display: inline-block; font-size: 14px; font-weight: 400; color: #666; line-height: 17px; vertical-align: middle; margin-right: 6px; }
.result_mark_guide .mark::before { content: ''; display: inline-block; width: 12px; height: 12px; vertical-align: middle; margin-right: 6px; }
.result_mark_guide .mark.normal::before { background: #367EEA; }
.result_mark_guide .mark.warning::before { background: #FF4F4F; }
.result_view_wrap { width: 100%; padding-top: 16px; border-top: 2px dotted #F3F3F3; }
.result_view_wrap .item { width: 100%; }
.result_view_wrap .item + .item { margin-top: 40px; padding-top: 40px; border-top: 2px solid #F3F3F3; }
.result_view_wrap .item::after { content: ''; display: block; visibility: hidden; clear: both; }
.result_view_wrap .item .graph_wrap { float: left; width: 216px; padding-right: 16px; }
.result_view_wrap .item .graph_title { margin-bottom: 60px; }
.result_view_wrap .item .graph_title > * { display: inline-block; vertical-align: top; }
.result_view_wrap .item .graph_title .ingredient { width: 126px; font-size: 16px; font-weight: 500; color: #333; }
.result_view_wrap .item .graph_title .val { width: 60px; font-size: 14px; font-weight: 500; color: #333; text-align: right; margin-left: 8px; }
.result_view_wrap .item .graph_title .unit { font-size: 12px; font-weight: 400; color: #d6d6d6; display: inline-block; margin-left: 2px; }
.result_view_wrap .item .graph_title .chip_box { width: 65px; text-align: right; margin-left: 8px; }
.result_view_wrap .item .graph_title .chip { display: inline-block; font-size: 16px; font-weight: 700; line-height: 26px; padding: 0 8px; border-radius: 4px; }
.result_view_wrap .item .graph_title .chip.blue { color: #4987FF; background: #DCE8FF; }
.result_view_wrap .item .graph_title .chip.red { color: #FF4F4F; background: #FEE2E2; }
.result_view_wrap .item .graph_table { position: relative; width: 100%; padding: 29px 0 17px; }
.result_view_wrap .item .graph_table .bar_wrap { position: relative; width: 100%; height: 14px; background: url(../image/img_graph_warning.svg) no-repeat left center; background-size: 200px; }
.result_view_wrap .item .graph_table .bar_wrap .bar { position: absolute; left: 0; top: 0; height: 100%; background: url(../image/img_graph_warning_full.svg) no-repeat left center; background-size: 200px; }
.result_view_wrap .item .graph_table .label { position: absolute; bottom: 0; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); font-size: 12px; font-weight: 400; color: #666; }
.result_view_wrap .item .graph_table .label.start { left: 33.33%; }
.result_view_wrap .item .graph_table .label.finish { left: 66.66%; }
.result_view_wrap .item .graph_table .state { display: inline-block; position: absolute; top: 0; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); font-size: 11px; font-weight: 500; color: #fff; line-height: 13px; white-space: nowrap; background: #FF4F4F; padding: 4px 8px; border-radius: 4px; z-index: 1; }
.result_view_wrap .item .graph_table .state::after { content: ''; display: block; position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); width: 8px; height: 11px; background: url(../image/icon/icon_tail_red.svg) no-repeat center center; background-size: contain; z-index: -1; }
.result_view_wrap .item .graph_table .state.blue { background: #367EEA; }
.result_view_wrap .item .graph_table .state.blue::after { background: url(../image/icon/icon_tail_blue.svg) no-repeat center center; background-size: contain; }
.result_view_wrap .item .graph_table.type02 .bar_wrap { background: url(../image/img_graph_warning02.svg) no-repeat left center; background-size: 200px; }
.result_view_wrap .item .graph_table.type02 .bar_wrap .bar { background: url(../image/img_graph_warning_full02.svg) no-repeat left center; background-size: 200px; }
.result_view_wrap .item .graph_table.type02 .label.start { left: 0%; }
.result_view_wrap .item .graph_table.type02 .label.finish { left: 50%; }
.result_view_wrap .item .text_wrap { float: left; width: 473px; padding-left: 16px; border-left: 1px solid #F3F3F3; }
.result_view_wrap .item .text_wrap > div + div { margin-top: 12px; }
.result_view_wrap .item .text_wrap .title_box { width: 100%; }
.result_view_wrap .item .text_wrap .title_box::after { content: ''; display: block; visibility: hidden; clear: both; }
.result_view_wrap .item .text_wrap .title_box .label { font-size: 14px; font-weight: 500; color: #333; line-height: 120%; margin-bottom: 4px; }
.result_view_wrap .item .text_wrap .title_box .label::before { content: ''; display: inline-block; width: 16px; height: 16px; vertical-align: -3px; margin-right: 2px; }
.result_view_wrap .item .text_wrap .title_box .title { float: none; font-size: 14px; font-weight: 500; line-height: 120%; }
.result_view_wrap .item .text_wrap .title_box .text { font-size: 12px; font-weight: 400; color: #a6a6a6; line-height: 120%; margin-top: 4px; }
.result_view_wrap .item .text_wrap .title_box > div + div { margin-top: 16px; }
.result_view_wrap .item .text_wrap .title_box .normal .label::before { background: url(../image/icon/icon_check_black.svg) no-repeat center center; background-size: contain; }
.result_view_wrap .item .text_wrap .title_box .warning .label::before { background: url(../image/icon/icon_warning_black.svg) no-repeat center center; background-size: contain; }
.result_view_wrap .item .text_wrap .title_box .normal .title { color: #005dea; }
.result_view_wrap .item .text_wrap .title_box .warning .title { color: #FF4F4F; }
.result_view_wrap .item .text_wrap .desc p { font-size: 14px; font-weight: 400; color: #757575; line-height: 120%; }
.result_view_wrap .item .text_wrap .desc p + p { margin-top: 15px; }
.result_view_wrap .item .text_wrap .desc strong { display: block; font-size: 14px; font-weight: 500; color: #333; line-height: 120%; margin-bottom: 4px ; }
/** ========== 맞춤 영양성분 추천 ========== */
.nutrient_info_box .title { font-size: 16px; font-weight: 500; color: #333; line-height: 120%; letter-spacing: -0.16px; margin-bottom: 12px; }
.nutrient_info_box .title::before { content: ''; display: inline-block; width: 24px; height: 24px; vertical-align: -6px; margin-right: 4px; }
.nutrient_info_box .chip { display: inline-block; font-size: 12px; font-weight: 500; line-height: 16px; padding: 4px 8px; border-radius: 4px; margin-left: 8px; }
.nutrient_info_box.type_recommend .title::before { background: url(../image/icon/icon_check_black.svg) no-repeat center center; background-size: contain; }
.nutrient_info_box.type_recommend .chip { color: #005dea; background: #DCE8FF; vertical-align: 2px; margin-left: 6px; }
.nutrient_info_box.type_recommend .list li { width: 100%; padding: 20px; background: #F5F5F5; border-radius: 12px; }
.nutrient_info_box.type_recommend .list li::after { content: ''; display: block; visibility: hidden; clear: both; }
.nutrient_info_box.type_recommend .list li + li { margin-top: 8px; }
.nutrient_info_box.type_recommend .list li .img_box { float: left; width: 110px; height: 80px; border-radius: 8px; background: #fff; overflow: hidden; margin-right: 24px; }
.nutrient_info_box.type_recommend .list li .img_box img { width: 100%; }
.nutrient_info_box.type_recommend .list li .text_box { float: left; width: 530px; }
.nutrient_info_box.type_recommend .list li .name { font-size: 16px; font-weight: 500; color: #005eea; line-height: 120%; letter-spacing: -0.16px; }
.nutrient_info_box.type_recommend .list li .text { width: 100%; font-size: 14px; font-weight: 400; color: #666; line-height: 120%; margin-top: 8px; }
.nutrient_info_box.type_caution .title::before { background: url(../image/icon/icon_warning_black.svg) no-repeat center center; background-size: contain; }
.nutrient_info_box.type_caution .list { width: 100%; padding: 20px; background: #F5F5F5; border-radius: 12px; padding: 18px 28px; }
.nutrient_info_box.type_caution .list::after { content: ''; display: block; visibility: hidden; clear: both; }
.nutrient_info_box.type_caution .list li { float: left; width: 324px; font-size: 16px; font-weight: 500; color: #FF4F4F; line-height: 120%; letter-spacing: -0.16px; }
.nutrient_info_box.type_caution .list li::after { content: ''; display: block; visibility: hidden; clear: both; }
.nutrient_info_box.type_caution .list li:nth-of-type(n+3) { margin-top: 20px; }
.nutrient_info_box.type_caution .list li .text { float: left; line-height: 24px; }
.nutrient_info_box.type_caution .chip { float: left; color: #FF4F4F; background: rgba(255, 79, 79, 0.10); }
/** ========== 필그램 ========== */
.pillgram_info_box { padding: 4px 40px 14px 10px; }
.pillgram_info_box .left { float: left; width: 490px; }
.pillgram_info_box .left .title_box { position: relative; padding-left: 82px; }
.pillgram_info_box .left .title_box::before { content: ''; display: block; position: absolute; left: 0; top: -3px; width: 62px; height: 62px; background: url(../image/img_pill_pack.png) no-repeat center center; background-size: contain; }
.pillgram_info_box .left .title_box .title { font-size: 16px; line-height: 130%; }
.pillgram_info_box .left .title_box .title strong { color: #005DEA; }
.pillgram_info_box .left .title_box .text { font-size: 12px; font-weight: 400; color: #666; margin-top: 8px; }
.pillgram_info_box .left .step_box { margin-top: 20px; }
.pillgram_info_box .left .step_box ul { width: 100%; }
.pillgram_info_box .left .step_box ul::after { content: ''; display: block; visibility: hidden; clear: both; }
.pillgram_info_box .left .step_box ul li { float: left; position: relative; width: 179px; height: 56px; padding-top: 12px; padding-left: 43px; background: url(../image/bg_pillgram_step.svg) no-repeat center right; margin-left: -18px; overflow: hidden; z-index: 1; }
.pillgram_info_box .left .step_box ul li::after { content: ''; display: block; visibility: hidden; clear: both; }
.pillgram_info_box .left .step_box ul li:first-of-type { width: 168px; border-radius: 4px; padding-left: 10px; margin-left: 0; }
.pillgram_info_box .left .step_box ul li:first-of-type::before { content: ''; display: block; position: absolute; left: 0; top: 0; width: 20px; height: 100%; background: #fff; z-index: -1; }
.pillgram_info_box .left .step_box ul li .numb { float: left; font-size: 12px; font-weight: 400; color: #c7c7c7; line-height: 130%; margin-right: 12px; margin-top: 8px; }
.pillgram_info_box .left .step_box ul li p { float: left; width: 66px; font-size: 12px; font-weight: 500; color: #333; line-height: 130%; }
.pillgram_info_box .right { float: left; width: 124px; margin-left: 20px; }
.pillgram_info_box .right .qr_box .img_qr { width: 124px; height: 124px; }
/** ========== 참고문헌 ========== */
.references_list_box .list {font-size: 10px; color: #666; line-height: 14px; letter-spacing: -0.3px; margin-bottom: 12px;}
.references_list_box .list:last-child {margin-bottom: 0;}
/** ========== end ========== */
.end_section { position: relative; height: 100%; background: #04445f; }
.end_section .text_box { position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); }
.end_section .text_box span { font-size: 12px; font-weight: 700; color: #74E7DA; display: block; opacity: 0.5; }
.end_section .text_box .logo { margin-top: 14px; }
.end_section .text_box .logo img { width: 200px; }
.end_section .bottom_box { position: absolute; right: 62px; bottom: 40px; text-align: right; }
.end_section .bottom_box img { width: 156px; }
.end_section .bottom_box p { font-size: 12px; font-weight: 400; color: #fff; margin-top: 4px; }
.end_section .bottom_box p:first-of-type { margin-top: 8px; }