@charset "utf-8";

/*공통*/
.selfcheck_box{text-align:center;}
.source_txt{color:#9e9e9e;font-family:'Montserrat','s-core-dream-regular',sans-serif;}

/*자가진단 남녀선택*/
.gender_step{background:#f5f5f5;padding:60px 0 30px;}
.gender_step h4.tit{text-align:center;font-size:3.3rem;font-weight:600;padding:40px 0;}

.gender_step .item_list{display:flex;justify-content:center;gap:50px;}
.selfcheck_box input[type="radio"]{display:none;}
.selfcheck_box input[type="radio"].gender + label{display:block;}
.selfcheck_box input[type="radio"].gender + label span{display:inline-block;cursor:pointer;opacity:0.8;padding-top:150px;text-align:center;font-size:2rem;font-weight:600;background-position:50% 35%;background-repeat:no-repeat;background-size:60px auto;}
.selfcheck_box input[type="radio"].gender + label{_background:#fff;border:1px solid #ddd;border-radius:30px;}
.selfcheck_box input[type="radio"].gender + label span{width:220px;height:60px;color:#999;}
.selfcheck_box input[type="radio"].gender.woman + label span{background-image:url(/nanum/site/poll/img/woman.png);}
.selfcheck_box input[type="radio"].gender.man + label span{background-image:url(/nanum/site/poll/img/man.png);}

.selfcheck_box .btn_w{width:100%;padding:30px 0;text-align:center;}
.selfcheck_box .btn_w .btn{display:inline-block;text-align:center;color:#fff;font-size:1.8rem;font-weight:600;border-radius:50px;padding:0 50px;height:54px;line-height:54px;background:#fa741e;flex-grow:0;margin:20px auto 0;}

.selfcheck_box input[type="radio"].gender:checked + label{border:none;opacity:1;background:#fff url(/nanum/site/poll/img/chk_on.png)no-repeat 15% 20px;background-size:27px auto;box-shadow:10px 10px 10px rgba(0,0,0,0.2);}
.selfcheck_box input[type="radio"].gender:checked + label span{color:#000;opacity:1}


/*테스트*/
.selfcheck_box .question_step{border:1px solid #dedede;padding:70px 0 40px;position:relative;}
.selfcheck_box .question_step .category{display:inline-block;font-size:1.8rem;border:1px solid #dedede;padding:10px 20px;margin-bottom:20px;font-weight:500;}
.selfcheck_box .question_step .q_num > p{font-size:2rem;font-weight:700;text-align:center;padding-bottom:20px;font-family:"Montserrat",sans-serif;letter-spacing:0;}
.selfcheck_box .question_step .q_tit > h4{padding:40px 0 50px 0;}
.selfcheck_box .item_list ul{display:inline-block;padding-bottom:70px;}
.selfcheck_box .item_list ul li{display:inline-block;margin:0 30px;}
.selfcheck_box input[type="radio"].rd_num + label{display:block;cursor:pointer;font-size:1.7rem;color:#978f82;padding-bottom:20px;}
.selfcheck_box input[type="radio"].rd_num + label span{display: block;width: 90px;height: 90px;text-align: center;background: #f2eee7;border-radius: 30px;line-height: 90px;font-size: 3rem;margin:0 auto 20px;color: #978f82;font-weight: 600;font-family:"Montserrat",sans-serif;}

.selfcheck_box .btn_q{display:flex;justify-content:center;margin-bottom:40px;}
.selfcheck_box .btn_q a{display: inline-block;height:50px;line-height:50px;border: 1px solid #dedede;color:#9e9e9e;box-sizing: border-box;margin-left: -1px;background-repeat:no-repeat;}

.selfcheck_box .btn_q a.q_prev{background-image:url(/nanum/site/poll/img/q_prev.png);background-position:20px 50%;padding:0 40px 0 60px;}
.selfcheck_box .btn_q a.q_next{background-image:url(/nanum/site/poll/img/q_next.png);background-position:90% 50%;padding:0 60px 0 40px;}


.question_step .progress{position:absolute;bottom:0;width:100%;text-align:left;}
.question_step .progress .fraction{font-size:1.6rem;font-weight:700;margin:0 0 20px 40px;font-family:"Montserrat",sans-serif;letter-spacing:0;}
.question_step .progress .fraction strong{display:inline-block;color:#fa741e;font-size:2.2rem;}
.question_step .progress .bar{height:6px;background:#fa741e url(/nanum/site/poll/img/progess_divi.png)repeat-x 100% 50%;}

.selfcheck_box input[type="radio"].rd_num:checked + label{color:#fa741e;font-weight:bold;}
.selfcheck_box input[type="radio"].rd_num:checked + label span{background:#fa741e;color:#fff;}

.selfcheck_box .btn_q .btn.on{background:#fa741e url(/nanum/site/poll/img/q_next_on.png)no-repeat 90% 50%;color:#fff;}


/*결과*/
.result_step{padding:60px 0 40px;border:1px solid #dedede;}
.result_step .result{padding-top:60px;}
.result_step .result .cir{display:inline-block;width:150px;height:150px;border-radius:20px;text-align:center;}
.result_step .result.danger .cir{background-color:#feeae3;}
.result_step .result.normal .cir{background-color:#edf9f0;}

.result_step .result .cir span{display:block;padding-top:110px;background-repeat:no-repeat;background-position:50% 30px;font-size:1.7rem;font-weight:700;}
.result_step .result.danger .cir span{background-image:url(/nanum/site/poll/img/result_danger.png);color:#fc632e;}
.result_step .result.normal .cir span{background-image:url(/nanum/site/poll/img/result_normal.png);color:#00cf4f;}

.result_step .result_txt{padding:30px 0;line-height:28px;}
.result_step .result.danger .result_txt strong{color:#fc632e;}
.result_step .result.normal .result_txt strong{color:#00cf4f;}

.selfcheck_box .result_step .btn_w{display:inline-block;}
.selfcheck_box .result_step .btn_w a{display:inline-block;border-radius:50px;border:1px solid #eaeaea;box-sizing:border-box;margin:10px 10px;background:#fff;color:#666;font-size:1.5rem;font-weight:500;}
.selfcheck_box .result_step .btn_w a:hover{border:1px solid #888;color:#000;}


.result_step .tac{display:flex;justify-content:center;}


/********************767px********************/
@media all and (max-width:767px){
.selfcheck_box .question_step{padding-top:30px;}
.gender_step{padding:0;padding:30px;}
.gender_step .item_list{flex-direction:column;}
.selfcheck_box .btn_w{width:90%;margin:0 auto;}
.selfcheck_box .btn_w .btn{box-sizing:border-box;}
	
}