@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&family=Roboto:wght@100;300;400;500;700&display=swap');

body{
	font-family: "Noto Sans KR", "sans-serif";
	font-size: 12px;
	margin: 0;
	padding: 0;
	background: #f1f1f1;
}

h3 span {
	font-weight: normal;
}

#wrapper {
	width: 800px;
}

#navigation {
	background-color: #fff;
	border: #ddd 1px solid;
	border-radius: 10px;
	margin: 10px;
	padding: 10px;
}

#navigation li {
	margin: 2px 0;
}


label.error {
	color: #ff0000;
	margin-left: 10px;
	position: relative;
}

#progressbar {
	margin: 10px 0;
	width: 400px;
	height: 15px;
}

.wizard {
	margin: 10px;
	padding: 10px;
}

.wizard .wizard-header {
	padding: 5px 10px;
}

.wizard .wizard-step {
	margin: 10px 0;
}

.wizard .wizard-step p {
	padding: 5px;
}

.navigation {
	margin-top: 10px;
	padding-top: 10px;
}

.navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	gap:10px
}

.navigation li {
	flex:1 auto;
}
.navigation ul li button{
	background: #b6946e;
	color: #fff;
	padding: 15px;
	border-radius: 30px;
	width: 100%;
	font-size: 20px;
}
.navigation .submit_btn{
	display: none;
}
.navigation button{
	border:0;
}

.pad {
	padding: 5px;
}

.blue {
	background: blue;
	color: white;
}

.pink {
	background: pink;
	color: black;
}

.clearfix:before, .clearfix:after {
	content: "\0020";
	display: block;
	height: 0;
	visibility: hidden;
}

.clearfix:after {
	clear: both;
}
.borderB1{border-bottom:1px solid #939090;}

.step_cont input[type=checkbox] {display: inline-block; position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; visibility: hidden;}
.step_cont2 input[type=checkbox] + label {position: relative; display: inline-block; padding-left: 30px; cursor: pointer; box-sizing: border-box;}
.step_cont2 input[type=checkbox] + label::before {content: ''; display: block; position: absolute; left: 0; top: 3px; border: 1px solid #b0b0b0; border-radius: 0; background: #fff; width: 20px; height: 20px; clear: both; text-align: center; font-size: 16px;}
.step_cont2 input[type=checkbox]:checked + label::before {background: #4c311f; border-color: #4c311f; line-height: 16px; color: #fff; content: '\2714';}

.step_cont input[type=radio] {display: inline-block; position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; visibility: hidden;}
.step_cont input[type=radio] + label {position: relative; display: inline-block; padding-left: 35px; cursor: pointer; box-sizing: border-box;}
.step_cont input[type=radio] + label::before {content: ''; display: block; position: absolute; left: 0; top: 2px; border: 1px solid #b0b0b0; border-radius: 18px; background: #fff; width: 18px; height: 18px; clear: both; text-align: center; font-size: 16px; }
.step_cont input[type=radio]:checked + label::before {content: '●'; font-size: 11px; line-height: 16px; color: #4c311f; }


.position-r{position: relative;}
.position-a{position: absolute;}
.position-f{position: fixed;}
.d-block{display: block;}
.d-none{display: none;}
.d-flex{display: flex;}
.flex1auto{flex:1 auto;}
.align-center{align-items: center;}
.justify-content{justify-content: center;}
.flex-column{flex-direction: column;}
.spacer{flex-grow:1;}
.gap5{gap:5px;}
.gap10{gap:10px;}
.gap15{gap:15px;}
.gap20{gap:20px;}
.w-100{width:100%}
.w-50{width:50%}

.padding-B5{padding-bottom: 5px;}
.padding-B6{padding-bottom: 6px;}
.padding-B7{padding-bottom: 7px;}
.padding-B15{padding-bottom: 15px;}

.cdvptest .size {
	max-width: 540px;
	width: 100%;
	background: #fff;
	height: 100vh;
}

.ui-widget-header {
	border: 1px solid #b6946e;
	background: #b6946e !important;
	color: #222;
	font-weight: bold;
}

.size {
	width: 100%;
	max-width: 1400px;
	height: auto;
	margin: 0 auto;
	box-sizing: border-box;
	/* padding: 0 20px; */
}
.survey_logo{
	width: 100%;
	text-align: center;
	position: relative;
	margin-bottom: 30px;
}
.survey_back{
	position: absolute;
	top:50%;
	left:0;
}
.survey_back a{

	color:#000;
	font-size:16px;
}

.step{
	min-height: 500px;
}

.ai_start_btn_div{
	background: #fff;
	text-align: center;
	padding: 30px 0;
	width: 50%;
	margin: 0 auto;
}

.step_title{
	font-size: 28px;
	display: block;
	text-align: center;
	color: #3e3e3e;
	margin-bottom: 70px;
	margin-top: 55px;
	line-height: 1.4;
	transition: all 0.5s;
}

.step_cont label{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 60px;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 10px;
	font-size: 19px;
	transition: all 0.3s;
	cursor: pointer;
	color: #676565;
}

.step_cont label span{
	width: 80%;
	text-align: center;
}
.step_cont div.on label {
	/* background: url(../img/aBox.png) no-repeat center / 100% 100%; */
	background: #f9f0e5;
	border: 1px solid #b6946e;
	box-shadow: rgba(0,0,0,0.15) 0 0 10px;
}

.mainCon .qBox .aUl li.on label::after {
	content: '';
	display: block;
	width: 13px;
	height: 100%;
	position: absolute;
	top: 0;
	right: 5%;
	background: url(/include/img/icon_choice.png) no-repeat center right 5% / contain;
}


.step_duplication{
	font-size:22px;
	color:#b6946e;
	margin-top: 55px;
}


.ai_survey, .ai_result, .ai_loading {
	display: none;
	opacity: 0;
}
.ai_loading{
	align-items: center;
	align-content: center;
	height: 100vh;
	background: #b6946e;
}

.ai_result_btn_div{
	display: flex;
	justify-content: center;
	gap: 10px;
	background: #b6946e;
	padding:30px 20px;
}

.ai_result_cont{
	background: #b6946e;
	padding:30px;
}
.ai_result_cont_div{
	display: flex;
	align-items: center;
	justify-content: center;
	gap:10px;
	flex-direction: column;
	font-size: 16px;
	background: #f0ebe2;
	color:#000;
	padding:10% 4%;
	border-radius: 15px;
}
.ai_result_cont_div h2{
	color: #fff;
	background: #91714d;
	border-radius: 30px;
	margin-bottom: 10px;
}
.ai_result_cont_div h2 span{
	font-size: 27px;
	color: #fff;
	padding: 0 20px 0 20px;
}
.ai_result_cont_text{
	text-align: center;
	line-height: 25px;
}

.ask_div{width:100%;margin:0 auto;padding-bottom:50px; background: #998675}
.ask_div p{font-size:20px;color:#fff;padding:15px}
.ask_ul{
	width:95%;margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
}
.ask_ul li {
	border-left: 1px solid #d8d8d8;
	border-bottom: 1px solid #d8d8d8;
	box-sizing: border-box;
	background: #ffffff;
	height: 52px;
	display: flex;
	flex-basis: 33%;
	justify-content: center;
	align-items: center;
}
.ask_ul li img {
	width: 15%;
	padding-left: 5px;
}

.ask_ul li a {
	display: block;
	padding-top:14px;
	text-align: center;
	border-right: 1px solid #d8d8d8;
	color: #686868;
	font-size: 18px;
	height:40px;
	width:100%;
}
.ask_kaka_ul li {
	border-left: 1px solid #d8d8d8;
	border-bottom: 1px solid #d8d8d8;
	box-sizing: border-box;
	background: #ffffff;
	height: 52px;
	display: flex;
	flex-basis: 33%;
	justify-content: center;
	align-items: center;
}
.ask_kaka_ul li a {
	display: block;
	padding-top:14px;
	text-align: center;
	border-right: 1px solid #d8d8d8;
	color: #686868;
	font-size: 18px;
	height:40px;
	width:100%;

}
.acci_next_jo {
	position: absolute;
	top: 40%;
	right: 25px;
	cursor: pointer;
}
.acci_prev_jo {
	position: absolute;
	top: 40%;
	left: 25px;
	cursor: pointer;
}
.hoverOpa7:hover {
	opacity: 0.7;
}

.video{
	width: 70%;
}

@media (max-width: 1450px){

}

@media (max-width: 540px){
	.video{
		width: 100%;
	}
	.acci_next_jo {
		right: 0;
	}
	.acci_prev_jo {
		left: 0;
	}
	.survey_logo .logo_img_{
		height: 55px;
	}
	.navigation{
		margin-top:20px;
	}
	.navigation ul li button{
		font-size: 18px;
	}
	.cdvptest .size {
		max-width: 100%;
		width: 100%;
		background: #fff;
		height: 100vh;
	}
	.step {
		min-height: 380px;
	}
	.step_title {
		font-size: 24px;
		margin-top: 35px;
		margin-bottom: 50px;
	}
	.step_duplication {
		font-size: 18px;
		color: #b6946e;
		margin-top: 35px;
	}
	.step_cont label{
		height: 50px;
		font-size: 15px;
	}
	.ai_result_cont {
		background: #b6946e;
		padding: 10px;
	}

	.ai_result_cont_div{
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 30px;
		flex-direction: column;
		font-size: 13px;
		background: #f0ebe2;
		color: #000;
		padding: 10% 5px;
		border-radius: 15px;
	}
	.ask_ul li a {
		display: block;
		padding-top:14px;
		text-align: center;
		border-right: 1px solid #d8d8d8;
		color: #686868;
		font-size: 14px;
		height:40px;

	}
	.ask_kaka_ul li a {
		display: block;
		padding-top:14px;
		text-align: center;
		border-right: 1px solid #d8d8d8;
		color: #686868;
		font-size: 14px;
		height:40px;

	}
	.ai_result_cont_div h2 {
		font-size: 21px;
		color: #000;
	}

}