@charset "utf-8";

body.interview .progress-bar::after {
	content: " ";
	display: inline-block;
	position: relative;
	height: 2px;
	background-color: #6045E2;
	position: absolute;
	top: 54px;
}
body.interview .progress01::after {
	width: 33.333%;
}
body.interview .progress02::after {
	width: 66.666%;
}
body.interview .progress03::after {
	width: 100%;
}
body.interview .main-inner {
    width:88.8%; max-width:400px;
    letter-spacing:-1px;
    padding-top:50px;
    position:relative;
    margin:0 auto;
}

/* 증상 질문 - symptom*/
body.interview .main-inner .symptom {
    width:100%;
    padding:0 0 80px;
    text-align: center;
}
body.interview .main-inner .symptom h2 {
    font-size:24px;
    color:#222;
    line-height:140%;
    margin-bottom: 10px;
    font-weight: 500;
}
body.interview .main-inner .symptom p {
    font-size:16px;
    color:#444;
    margin:10px 0 17px;
}
body.interview .main-inner .symptom h3 br {display:none;}
body.interview .main-inner .symptom ul {
    font-size:0;
    text-align:center;
    max-width:320px;
    margin:0 auto;
}
body.interview .main-inner .symptom li {
    margin-top:34px;
    display:inline-block;
    margin-left:16px;
    font-size:16px; font-weight:500;
    letter-spacing:-1px;
}
body.interview .main-inner .symptom li:hover {
    color:#7F42EC;
    font-weight:700;
}
body.interview .main-inner .symptom li:hover div {
    border-color:#7F42EC;
    box-shadow: 10px 10px 30px rgba(159, 168, 191, 0.2);
}
body.interview .main-inner .symptom li:nth-of-type(1), body.interview .main-inner .symptom li:nth-of-type(5) {
    margin-left:0;
}
body.interview .main-inner .symptom li div {
    width:60px; height:60px;
    position:relative;
    border-radius:100px;
    border:1px solid #F4F3F5;
    background:#F4F3F5;
    margin-bottom:17px;
}
body.interview .main-inner .symptom li div img {
    width:36px;
    display:block;
    position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%);
}
/*
body.interview .main-inner .symptom li:first-child div img {
    width:50px;
}
*/
/* 질문 - question */
body.interview .main-inner .question {
	text-align: center;
}
body.interview .main-inner .question img {
	width: 80px; height: 80px;
	display: block;
	margin: 0 auto 14px;
}
body.interview .main-inner .question h2 {
	font-size: 24px;
	font-weight: 500;
	line-height: 140%;
}
body.interview .main-inner .question p {
	font-size: 16px;
	font-weight: 500;
	color: #ababab;
	margin: 18px 0 40px;
}
body.interview .main-inner .question p span {
	font-size: 16px;
	font-weight: 500;
	color: #7F42EC;
	font-weight: 700;
}
body.interview .main-inner .question li {
	width: 100%; height: 70px;
	border-radius: 10px;
	border: 1px solid #E8E8E8;
	font-size: 16px; font-weight: 500;
	color: #444;
	margin-bottom: 30px;
}
body.interview .main-inner .question li:hover, body.interview .main-inner .question li:active, body.interview .main-inner .question li.on {
	border: 1px solid #7f42ec;
	box-shadow: 10px 10px 30px rgba(159, 168, 191, 0.2);
}
body.interview .main-inner .question li {
	display: block; width: 100%; height: 70px;
	line-height: 70px;
	cursor: pointer;
}
body.interview .main-inner .question li input[type='radio'] {
  display: none;
}

body.interview .main-inner .question li input[type='radio']+label {
  display: inline-block;
  background-color: #F8F8F8;
  border: 1px solid #CDCDCD;
  width: 24px;
  height: 24px;
  border-radius: 100%;
  margin-right: 8px;
  vertical-align: middle;
}
body.interview .main-inner .question li input[type='radio']:checked+label {
  background: #7F42EC url(../img/common/check_icon.svg) no-repeat;
  background-position: 50% 50%;
}

body.interview .main-inner .question textarea {
	width: 100%; height: 300px;
	border-radius: 10px;
	border:  1px solid #e8e8e8;
	padding: 16px;
	font-size: 16px; color: #222;
	line-height: 150%;
	resize: none;
	outline: none;
}
body.interview .main-inner .question textarea:focus {
	border: 1px solid #7f42ec;
}
body.interview .main-inner .question textarea::placeholder {
	font-size: 16px; color: #b6b7bd;
}
body.interview .main-inner .button {
	margin: 40px 0 80px;
}
body.interview .main-inner .button .next {
	width: 180px; height: 54px;
	background-color: #EDEDED;
	color: #999;
	font-size: 18px; font-weight: 700;
	border-radius: 4px;
	float: right;
	transition: .1s;
	cursor: auto;
}
body.interview .main-inner .button .prev {
	font-size: 16px; font-weight: 500;
	color: #757575;
	line-height: 54px;
}
body.interview .main-inner .button .prev span {
	background: url(../img/interview/prev_icon.svg) no-repeat 50%;
	display: inline-block;
	width: 12px; height: 12px;
	background-size: contain;
	margin-right: 4px;
}
body.interview .main-inner .textarea-btn .next {
	background-color: #6045E2;
	color: #fff;
	cursor: pointer;
}

/* 질문지 수정 */
body.interview .main-inner.ask {
    padding-top:30px;
}
body.interview .main-inner.ask .ask-img {
    display:block;
    width:70px;
    margin:0 auto 30px;
}
body.interview .main-inner.ask .ask-box {
    margin-bottom:50px;
}
body.interview .main-inner.ask .ask-box .a-title {
    font-size:18px; font-weight:500;
    letter-spacing:-1px;
    line-height:140%;
    color:#222;
    margin-bottom:8px;
}
body.interview .main-inner.ask .ask-box .notice-msg {
    color:#FF4E4E;
    font-size:15px;
    margin-top:4px;
    margin-bottom:10px;
}
body.interview .main-inner.ask .ask-box .i-box input[type="text"] {
    display:block;
    float:left;
    width:calc(100% - 60px);
    margin-right:12px;
    height:48px;
    border-radius:4px;
    background:#fff;
    padding:0 16px;
    font-size:16px;
    border:1px solid #E8E8E8;
    outline:none;
}
body.interview .main-inner.ask .ask-box .i-box input[type="text"]:focus,
body.interview .main-inner.ask .ask-box textarea:focus {
    border-color:#7F42EC;
}
body.interview .main-inner.ask .ask-box .i-box input[type="text"]::placeholder {
    color:#B6B7BD;
}
body.interview .main-inner.ask .ask-box textarea {
    display:block;
    width:100%;
    height:200px;
    border-radius:4px;
    background:#fff;
    padding:16px;
    font-size:16px;
    border:1px solid #E8E8E8;
    outline:none;
    resize:none;
}
body.interview .main-inner.ask .ask-box textarea::placeholder {
    color:#B6B7BD;
}
body.interview .main-inner.ask .ask-box .i-box .sub-text {
    line-height:48px;
    font-size:16px;
    font-weight:500;
    color:#444;
    float:left;
}
body.interview .main-inner.ask .ask-box .i-box .calender {
    text-indent:-9999px;
    display:block;
    float:left;
    width:48px; height:48px;
    border-radius:4px;
    border:1px solid #7F42EC;
    background:url(../img/interview/calender_icon.svg) no-repeat;
    background-size:24px;
    background-position:50%;
}
body.interview .main-inner.ask .ask-box .check-box input[type="radio"],
body.interview .main-inner.ask .ask-box .check-box input[type="checkbox"] {display:none;}
body.interview .main-inner.ask .ask-box .check-box input[type="radio"] + label,
body.interview .main-inner.ask .ask-box .check-box input[type="checkbox"] + label {
    display:flex;
    width:100%; min-height:48px;
    border-radius:4px;
    background-color:#fff;
    border:1px solid #E8E8E8;
    align-items: center;
    position:relative;
    padding:12px 16px 12px 44px;
    font-size:16px; font-weight:500;
    color:#444;
    margin-top:10px;
    line-height:150%;
    cursor:pointer;
}
body.interview .main-inner.ask .ask-box .check-box input[type="radio"] + label::after,
body.interview .main-inner.ask .ask-box .check-box input[type="checkbox"] + label::after {
    content:""; display:block;
    position:absolute; top:50%; left:16px;
    transform:translateY(-50%);
    width:20px; height:20px;
    border-radius:100px;
    border:1px solid #CDCDCD;
    background-color:#F8F8F8;
    background-size:16px;
    background-position:50%;
    background-repeat:no-repeat;
    box-sizing:border-box;
}
body.interview .main-inner.ask .ask-box .check-box input[type="checkbox"] + label::after {
    border-radius:2px;
    border-color:#E8E8E8;
}
body.interview .main-inner.ask .ask-box .check-box input[type="radio"]:checked + label,
body.interview .main-inner.ask .ask-box .check-box input[type="checkbox"]:checked + label {
    border-color:#7F42EC;
    box-shadow: 10px 10px 30px rgba(159, 168, 191, 0.2);
    color:#7F42EC;
}
body.interview .main-inner.ask .ask-box .check-box input[type="radio"]:checked + label::after,
body.interview .main-inner.ask .ask-box .check-box input[type="checkbox"]:checked + label::after {
    background-image:url(../img/interview/check_on.svg);
    background-color:#7F42EC;
    border-color:#7F42EC;
}
body.interview .main-inner.ask .ask-box .check-box + .i-box {
    margin-top:10px;
}

/* 가로 해상도 768 이상 */
@media screen and (min-width:768px){
	body.interview .progress-bar::after {
		top: 44px;
	}
	/* 증상 질문 - symptom*/
	body.interview .main-inner {
		width: 660px; max-width: none;
		padding-top: 0;
	}
	body.interview .main-inner .symptom {
		padding: 130px 0 100px;
	}
	body.interview .main-inner .symptom h2 {
		font-size: 32px;
	}
	body.interview .main-inner .symptom p {
		margin: 16px 0 26px;
	}
	body.interview .main-inner .symptom ul {
		max-width: 100%;
		padding: 0 30px;
	}
	body.interview .main-inner .symptom li {
		font-size: 18px;
		margin-left: 40px;
	}
	body.interview .main-inner .symptom li div img {
		width: 60px;
	}
	body.interview .main-inner .symptom li:nth-of-type(1) {
		margin-left: 0;
	}
	body.interview .main-inner .symptom li div {
		width: 100px; height: 100px;
	}

	/* 질문 - question */
	body.interview .main-inner .question h2 {
		font-size: 32px;
	}
	body.interview .main-inner .question h2 br {
		display: none;
	}
	body.interview .main-inner .question {
		padding: 80px 0 0;
	}
	body.interview .main-inner .question li {
		width: 390px; height: 70px;
		margin: 0 auto 30px;
	}
	body.interview .main-inner .button {
		width: 530px;
		margin: 40px auto 80px;
	}
	body.interview .main-inner .question textarea, body.interview .main-inner .textarea-btn {
		width: 520px;
	}
	body.interview .main-inner .question textarea {
		height: 200px;
	}
    
    /* 질문지 수정 */
    body.interview .main-inner.ask {
        padding-top:70px;
        width:530px;
    }
    body.interview .main-inner.ask .ask-img {
        width:80px;
        margin:0 auto 48px;
    }
    body.interview .main-inner.ask .ask-box {
        margin-bottom:60px;
    }
    body.interview .main-inner.ask .ask-box .a-title {
        font-size:20px; 
        margin-bottom:10px;
    }
    body.interview .main-inner.ask .ask-box .i-box input[type="text"] {
        width:255px;
    }
    body.interview .main-inner.ask .ask-box .check-box input[type="radio"],
    body.interview .main-inner.ask .ask-box .check-box input[type="checkbox"] {display:none;}
    body.interview .main-inner.ask .ask-box .check-box input[type="radio"] + label,
    body.interview .main-inner.ask .ask-box .check-box input[type="checkbox"] + label {
        width:255px;
        padding:12px 16px 12px 48px;
        margin-top:0;
    }
    body.interview .main-inner.ask .ask-box .check-box input[type="radio"] + label::after,
    body.interview .main-inner.ask .ask-box .check-box input[type="checkbox"] + label::after {
        width:24px; height:24px;
    }
    body.interview .main-inner.ask .ask-box .check-box input[type="radio"] + label {
        float:left;
    }
    body.interview .main-inner.ask .ask-box .check-box input[type="radio"] + label:nth-of-type(1) {margin-right:20px;}
    body.interview .main-inner.ask .ask-box .check-box input[type="checkbox"] + label,
    body.interview .main-inner.ask .ask-box .check-box.w100 input[type="radio"] + label {
        width:100%;
    }
    body.interview .main-inner.ask .ask-box .check-box input[type="checkbox"] + label:nth-of-type(n+2),
    body.interview .main-inner.ask .ask-box .check-box.w100 input[type="radio"] + label:nth-of-type(n+2){
        margin-top:18px;
    }
    body.interview .main-inner.ask .ask-box .check-box + .i-box {
        margin-top:18px;
    }
    body.interview .main-inner.ask .ask-box .nice-select {
        width:255px;
    }
}

/* 가로 해상도 1280 이상 */
@media screen and (min-width:1280px){
	body.interview .progress-bar::after {
		top: 80px;

	}
}