@import url('../../../../oxjs/addon.css');

@font-face {
    font-family: 'GangwonState';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2307-2@1.0/GangwonState.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/* common */
.ox_func {margin-bottom:10px; text-align:right;}
.ox_func+h4,
.ox_func+.ox_head {margin-top:0;}

#wrap {overflow:visible!important;} /* sticky : disallow overflow hidden on parent elements */
.ox_tbl_grid.sticky thead {position:sticky; top:-1px;}

.bmi_graph {padding-bottom:2em;}
.bmi_graph.m {font-size:0.75em; letter-spacing:-1px;}
.bmi_graph .v {font-size:1.5em; text-align:center;}
.bmi_graph .v .score {font-weight:600;}
.bmi_graph .v .status:before {content:'\0028';}
.bmi_graph .v .status:after {content:'\0029';}
.bmi_graph ul {height:2em; margin:2em 0 0; padding:0; list-style:none;}
.bmi_graph li {float:left; position:relative; width:20%; height:2em; margin:0; padding:0; background:#ABC; color:#FFF; line-height:2em; text-align:center; white-space:nowrap;}
.bmi_graph li:nth-child(2) {background:#09C;}
.bmi_graph li:nth-child(3) {background:#99E;}
.bmi_graph li:nth-child(4) {background:#E7A;}
.bmi_graph li:nth-child(5) {background:#E43;}
.bmi_graph li .txt {position:absolute; top:2em; left:-1.5em; width:3em; color:#000; text-align:center; white-space:nowrap;}
.bmi_graph li .my {position:absolute; top:-2em;}
.bmi_graph li .my b {float:left; margin-left:-50%; padding:0 5px; border:1px solid #000; background:#FFF; font-weight:normal; font-size:0.9375em; color:#000; line-height:1.2; white-space:nowrap;}
.bmi_graph li .my:before {position:absolute; top:100%; left:-0.25em; width:0; height:0; border:0.25em solid transparent; border-top:0.625em solid #000; border-bottom:0; content:'';}

.type_graph ul {margin:0; padding:0; list-style:none;}
.type_graph li {display:flex; margin:0; padding:1% 0;}
.type_graph .nm {flex-shrink:0; overflow:hidden; width:20%; max-width:100px; height:30px; line-height:30px; text-overflow:ellipsis; white-space:nowrap;}
.type_graph .bar {flex-grow:1; position:relative; height:30px; margin-right:4em; border-radius:15px; background:#FFF; line-height:30px; z-index:0;}
.type_graph .bar:before {position:absolute; top:0; right:0; bottom:0; left:0; border:1px solid #E6E4E4; border-radius:15px; content:''; z-index:-1;}
.type_graph .val {float:left; height:30px; border-radius:15px; background:#333;}
.type_graph .val b {position:absolute; top:0; left:100%; width:4em; font-weight:500; text-align:right;}
.type_graph .typeA .val {background:#22C55E;}
.type_graph .typeB .val {background:#3B82F6;}
.type_graph .typeC .val {background:#F59E0B;}
.type_graph .typeD .val {background:#A855F7;}

.q_step {overflow:hidden; background:#F1F0F0; border-radius:25px;}
.q_step .h {position:relative; margin:2% 2% 0; padding:0.8em 0; border-radius:20px 20px 0 0; background:#FFF; font-size:2.5em; line-height:1.2; text-align:center;}
.q_step .h:after {position:absolute; right:2%; bottom:0; left:2%; height:2px; background:#333; content:'';}
.q_step .q {padding:0.8em 0; background:#29BBC8; font-size:2.5em; color:#FFF; line-height:1.2; text-align:center;}
.q_step .lst {display:flex; flex-wrap:wrap; justify-content:space-between; margin:0 2%;}
.q_step .lst button {position:relative; overflow:hidden; width:49%; height:0; margin:2% 0 0; padding:0 0 49%; border:0; border-radius:0; background:#FFF; -webkit-appearance:none;}
.q_step .lst.n3 button {width:32%;}
.q_step .lst button img {position:absolute; top:0; right:-999px; bottom:0; left:-999px; width:auto; height:auto; max-height:100%; margin:auto;}
.q_step .lst button img+.txt {float:left; overflow:hidden; width:1px; height:1px;}
.q_step .lst button:hover, .q_step .lst button:active {background:#E2FAFC;}
.q_step .btns {margin:3% 0; text-align:center;}
.q_step .btns button {margin:0; padding:0.7834em 3em; border:0; border-radius:15px; background:#6F6D6D; box-shadow:0 4px 10px rgba(0,0,0,0.2); font-size:1.6667em; color:#FFF; line-height:23px; text-align:center; -webkit-appearance:none;}
.q_step .btns button:active {background:#454545; box-shadow:none;}
.q_step .btns .prev:before, .q_step .btns .next:before {float:left; width:30px; height:23px; margin:0 10px 0 -10px; background:url(../design/arw_prev.png) no-repeat 50% 50%/30px 23px; content:'';}
.q_step .btns .next:before {float:right; margin:0 -10px 0 10px; background-image:url(../design/arw_next.png);}
.q_intro, .q_agree, .q_profile, .q_result {position:relative; margin:0 2%; padding:5%; background:#FFF;}
.q_intro {font-size:1.5em;}
.q_agree .tit {font-size:1.5em;}
.q_agree .note {overflow:auto; max-height:200px;}
.q_agree .chk {margin-top:3%; padding-top:3%; border-top:2px solid #DDD; font-size:1.5em;}
.q_agree .chk input[type="checkbox"] {width:1.5em; height:1.5em;}
.q_agree+.q_agree:before {position:absolute; right:2%; top:0; left:2%; height:2px; background:#333; content:'';}
.q_profile table {width:90%; margin:0 auto; border:0;}
.q_profile caption {display:none;}
.q_profile th, .q_profile td {padding:1% 0; border:0; text-align:left;}
.q_profile th {width:20%; font-weight:normal; line-height:1.2; white-space:nowrap;}
.q_profile td {padding-left:2%;}
.q_profile input[type="text"] {height:2.5em; margin:0; padding:0 5px; border:0; border-bottom:1px solid #CCC; background:#FFF; line-height:2.5em; -webkit-appearance:none;}
.q_result .your_type {margin:5% 0; padding:3% 2%; background:#F1F0F0; border-radius:15px; text-align:center;}
.q_result .your_type p {margin-bottom:2%; font-family:'바탕',Batang; font-size:30px; line-height:1.5;}
.q_result .your_type p b {font-family:'GangwonState'; font-size:35px;}
.q_result .your_sleep {margin:5% 0; padding:3% 4%; background:#F6F6F6; border-radius:15px;}
.q_result .your_sleep .tit {margin-bottom:2%; font-weight:600; font-size:1.25em;}
.q_result .your_sleep .tit b:before {margin:0 2px; content:'\201C';}
.q_result .your_sleep .tit b:after {margin:0 2px; content:'\201D';}
.q_result .btns {margin:2% 0 0;}
.q_result .btns:empty {display:none;}
.q_result .btns a {display:inline-flex; flex-direction:column; justify-content:center; align-items:center; height:40px; margin:5px; padding:10px 50px; border-radius:13px; background:#060606; font-weight:500; font-size:18px; color:#FFF; line-height:20px; vertical-align:middle; white-space:nowrap;}
.q_result .btns a em {display:block; font-size:14px; font-style:normal;}
.q_result .btns a:hover {text-decoration:none;}
.q_result .mail_to {margin:5% 0; text-align:center;}
.q_result .mail_to p {margin-bottom:3%;}
.q_result .mail_to input[type="text"] {width:70%; max-width:300px; height:40px; margin:0; padding:0 18px; border:1px solid #CCCFD4; border-radius:5px; background:#FFF; line-height:38px; -webkit-appearance:none;}
.q_result .mail_to input[type="text"]::placeholder {color:#ABAFB8;}
.q_result .mail_to button {height:40px; margin:0; padding:0 18px; border:0; border-radius:5px; background:#0B6C7E; color:#FFF; line-height:40px; white-space:nowrap; -webkit-appearance:none;}
.q_result .share_to {margin-top:5%; padding-top:4%; border-top:1px solid #DDD; text-align:center;}
.q_result .share_to p {margin-bottom:2%;}
.q_result .share_to button {width:100px; height:130px; margin:5px; padding:0; border:0; border-radius:0; background:none; font-size:16px; line-height:30px; text-align:center; -webkit-appearance:none;}
.q_result .share_to button:before {display:block; width:100px; height:100px; border-radius:50%; background:url(../image/sp_share_sns.png) no-repeat 0 0/100px auto; content:'';}
.q_result .share_to .twitter:before {background-position:0 -100px;}
.q_result .share_to .band:before {background-position:0 -200px;}
.q_result .share_to .kakaotalk:before {background-position:0 -300px;}
.q_result .share_to .email:before {background-position:0 -400px;}
.q_result .copy {margin-top:5%; font-size:0.9375em; color:#888;}

.q_grp .q2 {overflow:hidden; margin:20px 0; border:1px solid #CECECE; border-radius:7px; background:#FFF; line-height:1.5;}
.q_grp .q2 .tit {padding:2% 3%; font-size:1.125em;}
.q_grp .q2 .lst {padding:2% 3%; background:#FAFAFA;}
.q_grp .q2 .lst:after {display:block; clear:both; content:'';}
.q_grp .q2 .a {float:left; min-width:22%; margin-right:3%; white-space:nowrap;}
.q_grp .q2 .a input {width:1.25em; height:1.25em;}
.q_grp .q2:hover {border-color:#1594D6;}
.q_grp .q2:hover .lst {background:#E6F3FA;}
.q_grp .btns {margin:3% 0; text-align:center;}
.q_grp .btns button {overflow:hidden; width:50px; height:50px; margin:0 20px; padding:0; border:0; border-radius:50%; background:#6F6D6D; box-shadow:0 4px 10px rgba(0,0,0,0.2); color:#FFF; line-height:50px; -webkit-appearance:none;}
.q_grp .btns button:active {background:#454545; box-shadow:none;}
.q_grp .btns button:before {float:left; width:18px; height:18px; margin:16px 19px; box-shadow:inset 3px 3px #FFF; transform:rotate(-45deg); content:'';}
.q_grp .btns .next:before {margin-left:13px; transform:rotate(135deg);}

.q_mypage {text-align:center;}
.q_mypage ul {margin:0; padding:1.125em 0 0; list-style:none;}
.q_mypage li {margin:0; padding:0;}
.q_mypage .item {position:relative; padding:2em 10px; border-top:1px solid #DDD;}
.q_mypage .date {position:absolute; top:-1em; right:0; left:0; width:9em; height:2em; margin:0 auto; border:1px solid #CCC; border-radius:1.0556em; background:#FFF; font-weight:600; font-size:1.125em; line-height:2em; white-space:nowrap; z-index:290;}
.q_mypage .more {position:absolute; top:0; right:0; bottom:0; left:0; overflow:hidden; text-align:left; text-indent:-999px; z-index:200;}
.q_mypage .more:hover {background:rgba(0,0,0,0.05);}
.q_mypage .body {display:flex; max-width:500px; margin:0 auto;}
.q_mypage .age {flex-grow:1; text-align:left;}
.q_mypage .h_cm {flex-grow:1;}
.q_mypage .w_kg {flex-grow:1; text-align:right;}
.q_mypage .result {display:flex; max-width:500px; margin:10px auto 5%;}
.q_mypage .type {flex-grow:1; text-align:left;}
.q_mypage .age+.type {text-align:right;}
.q_mypage .bmi {flex-grow:1; text-align:right;}

.p_result {position:relative; margin:15px 0; padding:20px; background:#F3F6F9; font-size:1.125em; text-align:center;}
.p_result:before {position:absolute; top:4px; right:4px; bottom:4px; left:4px; border:2px solid #FFF; content:'';}

.ox_srch {margin-bottom:50px; padding:20px 30px; border-radius:3px; background:#F7F7F7; text-align:left;}
.ox_srch .kwd {width:30%; min-width:150px; max-width:300px;}
.ox_srch select {min-width:100px;}
.btn_srch_opt {height:1.715em; margin:0 4px; padding:0; border:0; background:none; font-size:0.875rem; line-height:1.715em;}
.btn_srch_opt:before {float:left; margin-right:4px; font-size:12px; color:#333; content:'\25BC';}
.btn_srch_opt.on:before {content:'\25B2';}
.ox_srch .opt+.opt {margin-top:10px;}
.ox_srch .kwd_bar+.opt_bar {margin-top:20px; border-top:2px solid #DDD;}
.ox_srch .opt_bar .opt {margin:20px 0;}
.ox_srch input:read-only {font-style:italic; color:#888;}
.ox_srch .lb {display:inline-block; margin-right:15px; font-weight:500; color:#888; vertical-align:middle;}
.ox_srch .sl {display:inline-block; width:1px; height:1em; margin:0 12px; background:#BBB; vertical-align:middle;}
.ox_srch .btns {margin:10px 0; text-align:center;}
.ox_srch .btns .btn_b {margin:0 2px;}

.ox_srch table {margin:-5px 0;}
.ox_srch table, .ox_srch th, .ox_srch td {border:0;}
.ox_srch caption {display:none;}
.ox_srch th {padding:5px 20px 5px 0; font-weight:500; color:#888; word-break:keep-all;}
.ox_srch td {padding:5px 40px 5px 0;}
.ox_srch .opt table {margin-top:-10px; margin-bottom:-10px;}
.ox_srch .opt th, .ox_srch .opt td {padding-top:10px; padding-bottom:10px;}

.ox_tbl_wrap {overflow-x:auto;}
.ox_tbl_wrap>table {min-width:800px;}

.ox_tbl_list tr.go:hover {cursor:pointer;}
.ox_tbl_list tr.go a:hover {color:#000; text-decoration:none;}
.ox_tbl_list tr.go td[onclick] {cursor:default;}
.ox_tbl_list th.num {width:70px;}
.ox_tbl_list td.num {padding-left:5px; padding-right:5px; white-space:nowrap;}
.ox_tbl_list th.edit {width:20px; font-size:10px; letter-spacing:-10px; color:#F6F6F6;}

.ox_tbl_grid .off {color:#888;}
.ox_tbl_grid .on {font-weight:500;}
.ox_tbl_grid tfoot tr:first-child td {border-top-width:3px; border-top-style:double;}

tr.disabled td,
tr.disabled a,
tr.disabled a:hover,
td.disabled,
td.disabled a,
td.disabled a:hover {font-style:italic; color:#888!important;}

.a_pop {border-bottom:1px solid #000; color:#000;}
.a_pop:hover {border-bottom:none; color:#000; text-decoration:none;}

/* chart */
.ox_chart {display:flex; flex-wrap:wrap; justify-content:space-between;}
.ox_chart .item {width:46%; padding:2% 0;}
.ox_chart .h {font-weight:500; font-size:1.5em;}
.ox_chart .unit {margin-top:-2em; font-size:0.875em; color:#888; line-height:2em; text-align:right;}
.ox_chart .legend {height:3em; font-size:0.875em; line-height:1.5em;}
.ox_chart .legend ul {display:flex; flex-wrap:wrap; margin:0; padding:0; list-style:none;}
.ox_chart .legend li {margin:0; padding:0 15px 0 0; white-space:nowrap;}
.ox_chart .legend li .bu {display:inline-block; width:20px; height:1em; background:#37D; vertical-align:middle;}
.ox_chart .legend li:nth-child(2) .bu {background:#E53;}
.ox_chart .legend li:nth-child(3) .bu {background:#F90;}
.ox_chart .legend li:nth-child(4) .bu {background:#293;}
.ox_chart .legend li:nth-child(5) .bu {background:#A4A;}
.ox_chart .legend li:nth-child(6) .bu {background:#09C;}
.ox_chart .legend li:nth-child(7) .bu {background:#E69;}
.ox_chart .legend li:nth-child(8) .bu {background:#9B5;}
.ox_chart .legend li:nth-child(9) .bu {background:#E43;}
.ox_chart .chart {font-size:0.875em; text-align:center;}
.ox_chart .chart ul {display:flex; height:300px; margin:0; padding:40px 0 0; list-style:none;}
.ox_chart .chart li {position:relative; width:25%; height:249px; margin:0; padding:0; border-bottom:1px solid #555;}
.ox_chart .chart .nm {display:-webkit-box; position:absolute; top:264px; left:0; overflow:hidden; width:100%; height:36px; line-height:18px; text-overflow:ellipsis; -webkit-box-orient:vertical; -webkit-line-clamp:2;}
.ox_chart .chart .col, .ox_chart .chart .bar {position:absolute; left:0; bottom:0; right:0; width:50%; height:0; margin:0 auto;}
.ox_chart .chart .bar {background:#37D;}
.ox_chart .chart .col {display:flex; flex-direction:column-reverse;}
.ox_chart .chart .col .bar {position:static; width:100%;}
.ox_chart .chart .col .bar:nth-child(2) {background:#E53;}
.ox_chart .chart .col .bar:nth-child(3) {background:#F90;}
.ox_chart .chart .col .bar:nth-child(4) {background:#293;}
.ox_chart .chart .col .bar:nth-child(5) {background:#A4A;}
.ox_chart .chart .col .bar:nth-child(6) {background:#09C;}
.ox_chart .chart .col .bar:nth-child(7) {background:#E69;}
.ox_chart .chart .col .bar:nth-child(8) {background:#9B5;}
.ox_chart .chart .col .bar:nth-child(9) {background:#E43;}
.ox_chart .chart .pct {display:flex; justify-content:center; align-items:center; position:absolute; top:-40px; right:-50%; left:-50%; height:40px; line-height:18px;}
.ox_chart .chart .pct em {font-style:normal;}

/* google chart */
circle[stroke-opacity],
rect[stroke-opacity] {stroke-width:0!important;}
.g_tip {padding:10px 15px; font-size:13px; text-align:left; white-space:nowrap;}
.g_tip .bu {display:inline-block; width:8px; height:8px; margin-right:5px; border-radius:50%; background:#DDD; vertical-align:middle;}

.ox_g_chart_tit {margin:50px 0 20px; font-weight:600; font-size:1.5em; text-align:center;}
.ox_g_chart_tit:before {content:'\3010';}
.ox_g_chart_tit:after {content:'\3011';}
.ox_g_chart {display:flex; flex-wrap:wrap; justify-content:center;}
.ox_g_chart .item {position:relative;}
.ox_g_chart:after {width:600px; content:'';}
.ox_g_chart .canvas {width:100%; height:100%;}
.ox_g_chart .tit {position:absolute; right:0; bottom:0; left:0; font-size:15px; text-align:center;}
.ox_g_chart .tit:before {content:'\003C';}
.ox_g_chart .tit:after {content:'\003E';}
.ox_g_chart .nodata {position:absolute; top:0; right:100px; bottom:0; left:100px; height:198px; margin:auto; border:1px solid #DDD; border-right:0; border-left:0; color:#888; line-height:200px; text-align:center;}