@charset "utf-8";

/* COMMON : S */
@font-face {
    font-family: 'yg-jalnan';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* REST */
html {font-size:62.5%}
body {margin:0;background-color:#FFFFFF;color:#555555;font-size:2rem;line-height:1.5;letter-spacing:-0.05rem;word-break:keep-all;font-family:'Noto Sans KR', sans-serif}
.wd_area {margin-right:auto;margin-left:auto}
.ws_c_red {color:#FF0000}

/* FORM REST */
input, label, select, button, textarea {display:inline-block;vertical-align:middle;margin:0;padding:0;border:0;background:none;color:#555555;white-space:normal}
textarea {resize:none;white-space:pre-line}
input:focus {outline:0}
input:focus, input[type]:focus, select:focus, button:focus, textarea:focus {-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none; /*border:0 !important;*/}
input, textarea, button, input[type=reset], input[type=button], input[type=submit], input[type=checkbox], input[type=radio], select {-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;}
input, textarea, button, input[type=reset], input[type=button], input[type=submit], input[type=checkbox], input[type=radio], select {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
input[type=date], input[type=datetime], input[type=datetime-local], input[type=email], input[type=month], input[type=number], input[type=password], input[type=range], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week] {}
input[type=checkbox], input[type=radio] {width:13px;height:13px}
input[type=file] {}
input[type=search] {-webkit-appearance:textfield;-webkit-box-sizing:content-box}
::-webkit-search-decoration {display:none}
button, input[type="reset"], input[type="button"], input[type="submit"] {overflow:visible;width:auto}
::-webkit-file-upload-button {padding:0;border:0;background:none}
textarea {vertical-align:top;overflow:auto;width:100%}
select {}
select[multiple] {vertical-align:top}

/* FORM 기본속성 */
input.wd_form_input,
select.wd_form_select,
button.wd_form_button,
textarea.wd_form_textarea {padding:1rem;min-height:3.5rem;border-radius:5px;border-color:#DDDDDD;border-width:1px;border-style:solid;background-color:#FFFFFF;line-height:3.5rem}
input.wd_form_input:focus {border:1px solid #444;box-shadow:2px 2px 5px 0px rgba(0,0,0,.1)}

/* FORM 셀렉트, 라디오, 체크박스 웹킷 초기화 */
select.wd_form_select,
input[type=checkbox].wd_form_checkbox,
input[type=radio].wd_form_radio {-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none}
select.wd_form_select::-ms-expand{display:none}

/* FORM 셀렉트 커스텀 */
select.wd_form_select {min-width:200px;padding-right:30px;background-image:url(/webis/img/default/v1/form/select_arrow.png);background-position:center right 10px;background-repeat:no-repeat}

/* FORM 체크박스 커스텀 */
label.wd_form_checkbox_label {margin-right:10px}
input[type=checkbox].wd_form_checkbox {display:inline-block;vertical-align:sub;width:14px;height:14px;margin-top:-1px;margin-right:3px}
input[type=checkbox].wd_form_checkbox {background:url(/webis/img/default/v1/form/checkbox_off.png) center no-repeat}
input:checked[type=checkbox].wd_form_checkbox {background:url(/webis/img/default/v1/form/checkbox_on.png) center no-repeat}

/* FORM 라디오 커스텀 */
label.wd_form_radio_label {margin-right:10px}
input[type=radio].wd_form_radio {display:inline-block;width:14px;height:14px;margin-top:-1px;margin-right:3px}
input[type=radio].wd_form_radio {background:url(/webis/img/default/v1/form/radio_off.png) center no-repeat}
input:checked[type=radio].wd_form_radio {background:url(/webis/img/default/v1/form/radio_on.png) center no-repeat}

/* 검진문항 */
.sd-element__title span {font-size:var(--sjs-font-questiontitle-size, var(--sjs-font-size, 18px)) !important}

/* 검진버튼 */
.sd-root-modern.sd-root-modern--full-container {overflow:initial}
.sd-scrollable-container:not(.sd-scrollable-container--compact) {overflow:initial !important;width:100% !important}
.sd-rating__item {min-width:19% !important;padding:5px !important;border-radius:10px !important}
#sv-nav-complete .sd-btn {box-shadow:none;border:1px solid #121212;background-color:#121212;color:#FFF}
#sv-nav-back .sd-btn {box-shadow:none;border:1px solid #DDD;background-color:#FFF;color:#121212}
#sv-nav-complete .sd-btn {box-shadow:none;border:1px solid #121212;background-color:#121212;color:#FFF}
#sv-nav-back .sd-btn {box-shadow:none;border:1px solid #DDD;background-color:#FFF;color:#121212}

/* 전체 공통 */
.ws_content_wrap {position:relative;max-width:1400px;margin:0 auto;box-sizing:border-box}

/* 버튼 공통 */
.ws_button_wrap {margin-top:5rem;text-align:center}
.ws_button_wrap .es_btn {display:inline-block;width:15rem;height:6.5rem;border-radius:5px;background-color:#121212;color:#FFF;font-weight:500;font-size:1.8rem;line-height:6.5rem;text-align:center;text-decoration:none}

/* 상단 스텝 */
.ws_top_step_wrap {margin-bottom:50px}
.ws_top_step_wrap .es_category_area {display:flex;justify-content:center;text-align:center;gap:2rem}
.ws_top_step_wrap .es_category_area .bs_list_box {display:flex;align-items:center;justify-content:center;flex:1;position:relative;background-color:#F5F5F5;border-radius:2rem;overflow:hidden;box-shadow:2px 4px 5px rgba(0,0,0,0.1);transition:all 0.3s ease}
.ws_top_step_wrap .es_category_area .bs_list_box a {display:flex;align-items:center;justify-content:center;padding:1rem 0;color:#999}
.ws_top_step_wrap .es_category_area .bs_list_box.on {background-color:#AAA}
.ws_top_step_wrap .es_category_area .bs_list_box.on a {color:#FFF}

/* 자가검진 > 공통 */
.ws_survey_common_wrap {min-height:calc(100% - 15rem)}
.ws_survey_common_wrap .es_title {display:block;margin-bottom:2rem;color:#000;font-weight:bold;font-size:2.5rem;text-align:center}
.ws_survey_common_wrap .es_title strong {display:block;font-size:4rem}
.ws_survey_common_wrap .es_info_area {display:flex;flex-wrap:wrap;justify-content:space-between;margin-top:1rem;padding:3rem;border-radius:1.5rem;border:7px solid #F5F5F5}
.ws_survey_common_wrap .es_info_area .bs_list_box {display:flex;flex-wrap:wrap;align-items:center;width:49%;margin:1rem 0}
.ws_survey_common_wrap .es_info_area .bs_list_box .is_label {width:15rem;color:#000;font-weight:500}
.ws_survey_common_wrap .es_info_area .bs_list_box .is_label label {color:#000;font-weight:500}
.ws_survey_common_wrap .es_info_area .bs_list_box .is_desc {width:calc(100% - 15rem);margin:0}
.ws_survey_common_wrap .es_info_area .bs_list_box .is_desc .ss_input_age {max-width:15rem}

/* 자가검진 > 메인 > 사용자정보 */
.ws_form_group_wrap {position:relative;width:100%;color:#222}
.ws_form_group_wrap li {display:inline-block;vertical-align:middle;position:relative;width:auto;margin-right:1%;box-sizing:border-box}
.ws_form_group_wrap li label {display:table;width:100%;height:100%}
.ws_form_group_wrap input + span {display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;position:relative;min-width:8rem;height:100%;min-height:3rem;padding:1rem 2.5rem;box-sizing:border-box;border:1px solid #f0f4fa;border-radius:5px;background:#f0f4fa;line-height:3rem;text-align:center;transition:0.3s;}
.ws_form_group_wrap input[type="radio"] {opacity:0;position:absolute;top:0;left:0;cursor:pointer}
.ws_form_group_wrap input[type="checkbox"] {opacity:0;position:absolute;top:0;left:0;cursor:pointer}
.ws_form_group_wrap input:hover + span {border:1px solid #333;background:#fff;box-shadow:2px 2px 5px 0px rgba(0,0,0,.1);color:#333;font-weight:bold;cursor:pointer}
.ws_form_group_wrap input:checked + span {border:1px solid #333;background:#fff;box-shadow:2px 2px 5px 0px rgba(0,0,0,.1);color:#333;font-weight:bold}
.ws_form_group_wrap input:disabled:checked + span {border:1px solid #444;background:#444;color:#fff;font-weight:800}

/* 자가검진 > 메인 > 타이틀 & 카테고리 */
.ws_self_main_wrap .es_desc {font-size:1.5rem;text-align:right}
.ws_self_main_wrap .es_desc span {color:#FF0000}
.ws_self_main_wrap .es_category_area {margin-top:5rem;padding:5rem 3rem;border-radius:1.5rem;background-color:#FBFCFF}
.ws_self_main_wrap .es_category_area .bs_content_box {margin-top:1rem}
.ws_self_main_wrap .es_category_area .bs_content_box ul {display:flex;flex-wrap:wrap;justify-content:center;gap:2rem;margin:0;padding:0}
.ws_self_main_wrap .es_category_area .bs_content_box ul .is_list {width:calc(100% / 5 - 2rem);border-radius:1.5rem;background-color:#F0F4FA;list-style:none}
.ws_self_main_wrap .es_category_area .bs_content_box ul .is_list:hover {box-shadow:0 4px 12px rgba(122,122,122,.12)}
.ws_self_main_wrap .es_category_area .bs_content_box ul .is_list label {display:block;position:relative;padding:9rem 1rem 3rem 1rem;border-radius:10px;border:1px solid #FFF;text-align:center;cursor:pointer}
.ws_self_main_wrap .es_category_area .bs_content_box ul .is_list input + label {}
.ws_self_main_wrap .es_category_area .bs_content_box ul .is_list input[type="checkbox"] {}
.ws_self_main_wrap .es_category_area .bs_content_box ul .is_list input:hover + label {border-color:#000;box-shadow:2px 2px 5px 0px rgba(0,0,0,.1);background-color:#FFF}
.ws_self_main_wrap .es_category_area .bs_content_box ul .is_list input:checked + label {border-color:#000;box-shadow:2px 2px 5px 0px rgba(0,0,0,.1);background-color:#FFF}
.ws_self_main_wrap .es_category_area .bs_content_box ul .is_list .ss_form_checkbox {position:absolute;left:-9999px}
.ws_self_main_wrap .es_category_area .bs_content_box ul .is_list .ss_label {}
.ws_self_main_wrap .es_category_area .bs_content_box ul .is_list .ss_label:before {content:'';display:block;position:absolute;top:1rem;left:50%;width:7rem;height:7rem;background-image:url('../img/examination_icon.png');background-size:7rem;background-repeat:no-repeat;transform:translateX(-50%)}
.ws_self_main_wrap .es_category_area .bs_content_box ul .is_list .ss_label span {color:#000;font-weight:500;font-size:2rem}
.ws_self_main_wrap .es_category_area .bs_content_box ul .is_list .ss_label span em {display:block;margin-top:0.5rem;color:#999;font-weight:normal;font-style:normal;font-size:1.6rem}
.ws_self_main_wrap .es_category_area .bs_content_box ul .is_list  input[type="checkbox"]:checked + label {border-color:#000}
.ws_self_main_wrap .es_category_area .bs_content_box ul .is_list .ss_icon01:before {background-position:0 0}
.ws_self_main_wrap .es_category_area .bs_content_box ul .is_list .ss_icon02:before {background-position:0 -7rem}
.ws_self_main_wrap .es_category_area .bs_content_box ul .is_list .ss_icon03:before {background-position:0 -14rem}
.ws_self_main_wrap .es_category_area .bs_content_box ul .is_list .ss_icon04:before {background-position:0 -21rem}
.ws_self_main_wrap .es_category_area .bs_content_box ul .is_list .ss_icon05:before {background-position:0 -28rem}
.ws_self_main_wrap .es_category_area .bs_content_box ul .is_list .ss_icon06:before {background-position:0 -35rem}
.ws_self_main_wrap .es_category_area .bs_content_box ul .is_list .ss_icon07:before {background-position:0 -42rem}
.ws_self_main_wrap .es_category_area .bs_content_box ul .is_list .ss_icon08:before {background-position:0 -49rem}
.ws_self_main_wrap .es_category_area .bs_content_box ul .is_list .ss_icon09:before {background-position:0 -56rem}
.ws_self_main_wrap .es_category_area .bs_content_box ul .is_list .ss_icon10:before {background-position:0 -63rem}

/* 자가검진 > 설문지 */
.ws_self_form_wrap {}
.ws_self_form_wrap .es_content_area {}
.ws_self_form_wrap .es_content_area .bs_title {display:block;color:#000;font-size:3rem;text-align:center;font-family:'yg-jalnan'}
.ws_self_form_wrap .es_content_area .bs_desc {text-align:center}
.ws_self_form_wrap .es_content_area .bs_content_box {}

/* 자가검진 > 출처 */
.ws_source_wrap {margin-bottom:2rem;padding:3rem;background-color:#F5F5F5}
.ws_source_wrap li {margin:1rem 0}

/* 자가검진 > 결과 */
.ws_self_result_wrap {}
.ws_self_result_wrap .es_content_area {}
.ws_self_result_wrap .es_content_area .bs_group_box {margin-top:1rem;padding:3rem;border-radius:1.5rem;background-color:#FFF}
.ws_self_result_wrap .es_content_area .bs_title {display:block;margin-top:7rem;margin-bottom:10rem;color:#000;font-weight:500;font-size:1.9rem}
.ws_self_result_wrap .es_content_area .bs_title:first-child {margin-top:0}
.ws_self_result_wrap .es_content_area .bs_graph_box {position:relative;margin-bottom:3rem}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar {display:block;position:relative;width:99.9%;height:1rem;border-radius:50px;background-color:#BBB}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on {display:block;position:absolute;top:0;left:0;width:100%;height:1rem;border-radius:50px;z-index:1}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on span {display:block;position:absolute;top:0;height:100%}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on span:first-child {border-radius:50px 0 0 50px}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on span:last-child {border-radius:0 50px 50px 0}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on span:before {display:inline-block;position:absolute;bottom:-3rem;right:0;color:#777;font-size:1.4rem}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on span.ss_green {left:0;width:33.3%;background-color:#67C868}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on span.ss_green:before {content:'정상'}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on span.ss_yellow {left:33.3%;width:33.3%;background-color:#FED019}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on span.ss_yellow:before {content:'주의'}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on span.ss_red {left:66.6%;width:33.3%;background-color:#FC575A}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on span.ss_red:before {content:'위험'}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on_top {animation:barFromTo50 1s linear forwards;display:block;position:absolute;top:0;right:0;width:100%;height:1rem;border-radius:50px;background-color:#BBB;z-index:2}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on_top:before {content:'';display:block;position:absolute;top:50%;left:-1.8rem;width:3.6rem;height:3.6rem;border-radius:50%;background-color:rgba(90, 200, 250,.2);transform:translateY(-50%);z-index:3}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on_top:after {content:'';display:block;position:absolute;top:50%;left:-1rem;width:2rem;height:2rem;border-radius:50%;background-color:#5AC8FA;transform:translateY(-50%);z-index:4}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on_top .ss_icon {display:inline-block;position:absolute;left:-2.5rem;bottom:4.5rem;width:5rem;height:5rem;border-radius:50%;background-color:#5AC8FA}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on_top .ss_icon:before {content:'';display:block;position:absolute;top:0;left:0;width:100%;height:100%;background-image:url('../img/graph_icon01.png');background-position:center;background-size:contain;background-repeat:no-repeat}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on_top .ss_icon:after {content:'';display:block;position:absolute;bottom:-1.4rem;left:50%;color:#5AC8FA;border-radius:50px 50px 0 0;border-top:3rem solid;border-right:2.5rem solid transparent;border-left:2.5rem solid transparent;transform:translateX(-50%);z-index:-1}
.ws_self_result_wrap .es_content_area .bs_desc_box {margin-top:10rem;padding:5rem;border-radius:5px;background-color:#F5F5F5;font-weight:500;font-size:1.8rem;line-height:2}

/* 자가검진 > 결과 > 10~100 */
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on_top.is_on_0 {animation:barFromTo0 0s linear forwards;}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on_top.is_on_0:before {background-color:rgba(103, 200, 104,.2)}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on_top.is_on_0:after {background-color:#67C868;}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on_top.is_on_0 .ss_icon {background-color:#67C868}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on_top.is_on_0 .ss_icon:before {background-image:url('../img/graph_icon01.png')}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on_top.is_on_0 .ss_icon:after {color:#67C868;}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on_top.is_on_10 {animation:barFromTo10 0.1s linear forwards;}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on_top.is_on_10:before {background-color:rgba(103, 200, 104,.2)}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on_top.is_on_10:after {background-color:#67C868;}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on_top.is_on_10 .ss_icon {background-color:#67C868}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on_top.is_on_10 .ss_icon:before {background-image:url('../img/graph_icon01.png')}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on_top.is_on_10 .ss_icon:after {color:#67C868;}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on_top.is_on_20 {animation:barFromTo20 0.2s linear forwards;}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on_top.is_on_20:before {background-color:rgba(103, 200, 104,.2)}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on_top.is_on_20:after {background-color:#67C868;}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on_top.is_on_20 .ss_icon {background-color:#67C868}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on_top.is_on_20 .ss_icon:before {background-image:url('../img/graph_icon01.png')}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on_top.is_on_20 .ss_icon:after {color:#67C868;}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on_top.is_on_30 {animation:barFromTo30 0.3s linear forwards;}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on_top.is_on_30:before {background-color:rgba(103, 200, 104,.2)}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on_top.is_on_30:after {background-color:#67C868;}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on_top.is_on_30 .ss_icon {background-color:#67C868}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on_top.is_on_30 .ss_icon:before {background-image:url('../img/graph_icon01.png')}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on_top.is_on_30 .ss_icon:after {color:#67C868;}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on_top.is_on_40 {animation:barFromTo40 0.4s linear forwards;}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on_top.is_on_40:before {animation:barOpBgCenter 0.4s linear forwards;background-color:rgba(255, 208, 21,.2)}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on_top.is_on_40:after {animation:barBgCenter 0.4s linear forwards;background-color:#FFD015;}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on_top.is_on_40 .ss_icon {animation:barBgCenter 0.4s linear forwards;background-color:#FFD015}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on_top.is_on_40 .ss_icon:before {animation:barIconCenter 0.4s linear forwards;background-image:url('../img/graph_icon02.png')}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on_top.is_on_40 .ss_icon:after {animation:barColorCenter 0.4s linear forwards;color:#FFD015;}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on_top.is_on_50 {animation:barFromTo50 0.5s linear forwards;}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on_top.is_on_50:before {animation:barOpBgCenter 0.5s linear forwards;background-color:rgba(255, 208, 21,.2)}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on_top.is_on_50:after {animation:barBgCenter 0.5s linear forwards;background-color:#FFD015;}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on_top.is_on_50 .ss_icon {animation:barBgCenter 0.5s linear forwards;background-color:#FFD015}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on_top.is_on_50 .ss_icon:before {animation:barIconCenter 0.5s linear forwards;background-image:url('../img/graph_icon02.png')}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on_top.is_on_50 .ss_icon:after {animation:barColorCenter 0.5s linear forwards;color:#FFD015;}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on_top.is_on_60 {animation:barFromTo60 0.6s linear forwards;}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on_top.is_on_60:before {animation:barOpBgCenter 0.6s linear forwards;background-color:rgba(255, 208, 21,.2)}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on_top.is_on_60:after {animation:barBgCenter 0.6s linear forwards;background-color:#FFD015;}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on_top.is_on_60 .ss_icon {animation:barBgCenter 0.6s linear forwards;background-color:#FFD015}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on_top.is_on_60 .ss_icon:before {animation:barIconCenter 0.6s linear forwards;background-image:url('../img/graph_icon02.png')}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on_top.is_on_60 .ss_icon:after {animation:barColorCenter 0.6s linear forwards;color:#FFD015;}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on_top.is_on_70 {animation:barFromTo70 0.7s linear forwards;}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on_top.is_on_70:before {animation:barOpBgLast 0.7s linear forwards;background-color:rgba(252, 87, 90,.2)}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on_top.is_on_70:after {animation:barBgLast 0.7s linear forwards;background-color:#FC575A;}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on_top.is_on_70 .ss_icon {animation:barBgLast 0.7s linear forwards;background-color:#FC575A}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on_top.is_on_70 .ss_icon:before {animation:barIconLast 0.7s linear forwards;background-image:url('../img/graph_icon03.png')}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on_top.is_on_70 .ss_icon:after {animation:barColorLast 0.7s linear forwards;color:#FC575A;}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on_top.is_on_80 {animation:barFromTo80 0.8s linear forwards;}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on_top.is_on_80:before {animation:barOpBgLast 0.8s linear forwards;background-color:rgba(252, 87, 90,.2)}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on_top.is_on_80:after {animation:barBgLast 0.8s linear forwards;background-color:#FC575A;}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on_top.is_on_80 .ss_icon {animation:barBgLast 0.8s linear forwards;background-color:#FC575A}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on_top.is_on_80 .ss_icon:before {animation:barIconLast 0.8s linear forwards;background-image:url('../img/graph_icon03.png')}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on_top.is_on_80 .ss_icon:after {animation:barColorLast 0.8s linear forwards;color:#FC575A;}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on_top.is_on_90 {animation:barFromTo90 0.9s linear forwards;}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on_top.is_on_90:before {animation:barOpBgLast 0.9s linear forwards;background-color:rgba(252, 87, 90,.2)}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on_top.is_on_90:after {animation:barBgLast 0.9s linear forwards;background-color:#FC575A;}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on_top.is_on_90 .ss_icon {animation:barBgLast 0.9s linear forwards;background-color:#FC575A}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on_top.is_on_90 .ss_icon:before {animation:barIconLast 0.9s linear forwards;background-image:url('../img/graph_icon03.png')}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on_top.is_on_90 .ss_icon:after {animation:barColorLast 0.9s linear forwards;color:#FC575A;}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on_top.is_on_100 {animation:barFromTo100 1s linear forwards;}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on_top.is_on_100:before {animation:barOpBgLast 1s linear forwards;background-color:rgba(252, 87, 90,.2)}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on_top.is_on_100:after {animation:barBgLast 1s linear forwards;background-color:#FC575A;}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on_top.is_on_100 .ss_icon {animation:barBgLast 1s linear forwards;background-color:#FC575A}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on_top.is_on_100 .ss_icon:before {animation:barIconLast 1s linear forwards;background-image:url('../img/graph_icon03.png')}
.ws_self_result_wrap .es_content_area .bs_graph_box .is_bar_on_top.is_on_100 .ss_icon:after {animation:barColorLast 1s linear forwards;color:#FC575A;}

/* 자가검진 > 결과 > 키프레임 */
@keyframes barFromTo0 { from {width:100%} to {width:100%} }
@keyframes barFromTo10 { from {width:100%} to {width:90%} }
@keyframes barFromTo20 { from {width:100%} to {width:80%} }
@keyframes barFromTo30 { from {width:100%} to {width:70%} }
@keyframes barFromTo40 { from {width:100%} to {width:60%} }
@keyframes barFromTo50 { from {width:100%} to {width:50%} }
@keyframes barFromTo60 { from {width:100%} to {width:40%} }
@keyframes barFromTo70 { from {width:100%} to {width:30%} }
@keyframes barFromTo80 { from {width:100%} to {width:20%} }
@keyframes barFromTo90 { from {width:100%} to {width:10%} }
@keyframes barFromTo100 { from {width:100%} to {width:0} }
@keyframes barColorCenter { 0% {color:#67C868} 100% {color:#FFD015} }
@keyframes barColorLast { 0% {color:#67C868} 50% {color:#FFD015} 100% {color:#FC575A} }
@keyframes barBgCenter { 0% {background-color:#67C868} 100% {background-color:#FFD015} }
@keyframes barBgLast { 0% {background-color:#67C868} 50% {background-color:#FFD015} 100% {background-color:#FC575A} }
@keyframes barOpBgCenter { 0% {background-color:rgba(103,200,104,.2)} 100% {background-color:rgba(255,208,21,.2)} }
@keyframes barOpBgLast { 0% {background-color:rgba(103,200,104,.2)} 50% {background-color:rgba(255,208,21,.2)} 100% {background-color:rgba(252,87,90,.2)} }
@keyframes barIconCenter { 0% {background-image:url('../img/graph_icon01.png')} 100% {background-image:url('../img/graph_icon02.png')} }
@keyframes barIconLast { 0% {background-image:url('../img/graph_icon01.png')} 50% {background-image:url('../img/graph_icon02.png')} 100% {background-image:url('../img/graph_icon03.png')} }

/* MEDIA (데스크탑 이하) 1279px 이하 */
@media all and (max-width:1279px) {

	html {font-size:56.3%}
	
	.ws_form_group_wrap {text-align:left}
	.ws_form_group_wrap li {line-height:50px;height:50px;margin:0 1% 0 0}
	.ws_form_group_wrap.w3 li {width:31.33%}
}

/* MEDIA (모바일 이하) 767px 이하 */
@media all and (max-width:767px) {

	html {font-size:50%}
	.wd_area {padding:0 15px}
	
	select.wd_form_select {min-width:140px}

	.sd-element__title span {font-size:var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px)) !important}
	.sd-scrollable-container:not(.sd-scrollable-container--compact) {width:100% !important}
	.sd-rating__item {min-width:32% !important}
	
	.ws_self_main_wrap {padding:0;box-shadow:none;border:none;background-color:transparent}
	.ws_self_main_wrap .es_info_area .bs_list_box {width:100%}
	.ws_self_main_wrap .es_info_area .bs_list_box .is_label {width:100%;margin-bottom:5px}
	.ws_self_main_wrap .es_info_area .bs_list_box .is_desc {width:100%}
	.ws_self_main_wrap .es_info_area .bs_list_box .is_desc .ss_input_age {max-width:8rem}
	.ws_self_main_wrap .es_category_area .bs_content_box ul .is_list {width:47%}
	
	.ws_self_result_wrap .es_info_area {padding:2rem}
	.ws_self_result_wrap .es_info_area .bs_list_box .is_label {width:7rem}
	.ws_self_result_wrap .es_info_area .bs_list_box .is_desc {width:calc(100% - 7rem)}
	.ws_self_result_wrap .es_content_area .bs_group_box {padding:3rem 0}
	.ws_self_result_wrap .es_content_area .bs_graph_box {margin:0 2rem}
	.ws_self_result_wrap .es_content_area .bs_desc_box {padding:2rem;font-size:1.6rem}
}

/* MEDIA (모바일 이하) 640px 이하 */
@media all and (max-width:640px) {

	.sd-rating__item {min-width:100% !important;height:40px !important;line-height:40px}
	.sd-rating--wrappable .sd-rating__item-text .sv-string-viewer {font-size:13px}
}