* {margin: 0; padding: 0; box-sizing: border-box;}
ul, li {list-style: none;}
table {border-collapse: collapse;}

.diagnosis_outBg {width: 600px; height: 800px; padding: 35px; background: url("../images/selfTest/diagnosis_outBg.jpg") no-repeat center; font-family: 'NanumSquare', sans-serif;  font-weight: bold; text-align: center; color: #19154e; position:fixed; left:50%; margin-left:-300px; top:50%; margin-top:-400px; z-index:99;}
.diagnosis_inBg {width: 530px; height: 730px; padding: 18px; background-color: white; box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.05), 0 15px 20px 0 rgba(0, 0, 0, 0.05);}
.diagnosis_btn {overflow: hidden; margin-bottom: 5px;}
.diagnosis_returnBtn {width: 100px; height: 38px; border: 0; background-color: #19154e; color: white; font-size: 16px; font-family: 'NanumSquare', sans-serif;font-weight: bold; transform: skew(-0.03deg); cursor: pointer; float: left;}
.diagnosis_closeBtn {text-align: right;}
.diagnosis_closeBtn > img {cursor: pointer;}

/* diagnosis_start */
.diagnosis_logo {width: 140px; margin: 0 auto;}
.diagnosis_inBg h3 {margin-top: 80px; font-size: 17px;}
.diagnosis_inBg h2 {margin-bottom: 40px; font-size: 48px;}
.diagnosis_text {margin-bottom: 40px; font-size: 17px;}
.diagnosis_linetxt {display: flex; overflow: hidden;}
.diagnosis_linetxt li {width: 50%; margin: 20px auto; float: left; font-size: 23px;}
.diagnosis_linetxt li:first-child {padding-right: 40px;}
.diagnosis_linetxt li:last-child {padding-left: 40px;}
.diagnosis_check {margin: 20px auto 30px; font-size: 19px;}
.diagnosis_check li {line-height: 34px;}
.diagnosis_startBtn {width: 262px; height: 85px;font-family: 'NanumSquare', sans-serif; font-weight: bold; font-size: 28px; color: white; border: 0; background-color: #19154e; cursor: pointer;}
.diagnosis_startBtn:hover {opacity: 90%;}

/* diagnosis_sub */
.diagnosis_sub {overflow: hidden;}
.diagnosis_sublogo {width: 105px; margin: 0 auto 20px;}
.diagnosis_icon {margin: 0 0 5px 35px; overflow: hidden; font-weight: normal;}
.diagnosis_iconWrap {opacity: 0.5;}
.diagnosis_iconActive {opacity: 1;}
.diagnosis_icon li {margin: 5px; float: left;}
.diagnosis_icon li:nth-child(even) {margin-top: 116px;}
.diagnosis_iconBox {width: 74px; height: 74px; margin-bottom: 14px; background-color: #19154e; border-radius: 50%; cursor: pointer;}
.diagnosis_iconBox img {margin-top: 10px;}
.diagnosis_icon p {font-size: 22px;}
.diagnosis_sub > table {width: 100%; font-size: 17.5px; font-weight: 500; text-align: left; color: #666;}
.diagnosis_sub > table, .diagnosis_sub > table th, .diagnosis_sub > table td {padding: 12px 20px; border: 1px solid #ccc;}
.diagnosis_sub > table > tbody > tr.check_on{background: #e8e7ed;}
.diagnosis_sub > table > tbody > tr.check_on span{filter: grayscale(0); opacity: 1;}
.diagnosis_sub tr:hover {background-color: #e8e7ed; cursor: pointer;}    
.diagnosis_sub > table span {float: right; filter: grayscale(1); opacity: 0.1;}
.diagnosis_sub button {width: 100px; height: 38px; margin: 15px 0; border: 0; background-color: #19154e; color: white; font-size: 16px; font-family: 'NanumSquare', sans-serif; font-weight: bold; transform: skew(-0.03deg); cursor: pointer;}
.guideMent {margin: 10px 0 0 10px; color: rgb(200, 0, 0); font-size: 16px; text-align: left; font-weight: normal; transform: skew(-0.03deg); letter-spacing: -1px;}
.diagnosis_reset {float: left;}
.diagnosis_next {float: right;}
.diagnosis_next.fl_none {float: none;}
.diagnosis_sub button span {line-height: 30px;}

/* diagnosis_result */
.diagnosis_graph {overflow: hidden; width:100%; text-align:center;}
.diagnosis_graph li {width: 160px; height: 160px; margin: 5px 30px 15px; padding-top: 45px; background-color: #19154e; border-radius: 50%; box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.05), 0 10px 15px 0 rgba(0, 0, 0, 0.05); font-size: 32px; color: white; display:inline-block; vertical-align:top;}
.diagnosis_graph li:first-child {position: relative; color: #19154e;}
.diagnosis_graph span {width: 80%; height: 80%; position: absolute; background-color: white; border-radius: 50%; left:50%; margin-left:-40%; top:50%; margin-top:-40%; padding:30px 0px;}
.diagnosis_resultTxt {margin: 10px auto 30px; font-size: 40px;}
.diagnosis_result_set {margin: 100px auto 30px; font-size: 40px;}
.diagnosis_result2 .diagnosis_resultTxt {margin: 70px auto; font-size: 36px;}
.diagnosis_result > table {margin: 0 auto; color: #666;}
.diagnosis_result > table th {width: 90px; padding: 7px 5px; font-size: 17px; color: #444; border-right: 1px solid #aaa; border-bottom: 1px solid #aaa;}
.diagnosis_result > table th:last-child {border-right: none;}
.diagnosis_result > table td {padding: 7px 5px; font-size: 15px; font-weight: normal; line-height: 22px; transform: skew(-0.03deg); border-right: 1px solid #aaa;}
.diagnosis_result > table td:last-child {border-right: none;}
.diagnosis_resultTxt2 {margin: 20px auto; font-size: 17px; line-height: 28px; color: #555;}
.diagnosis_result2 .diagnosis_resultTxt2 {margin: 60px auto 50px;}
.diagnosis_phoneNumber, .diagnosis_name {margin-bottom: 20px; padding: 10px 15px; background-color: #eee; border: none; font-size: 16.5px; font-weight: bold; font-family: 'NanumSquare', sans-serif;}
.diagnosis_name {width: 140px; margin-right: 12px;}
.diagnosis_phoneNumber {width: 210px;}

.agreeCheck {margin: 10px auto 20px; font-size: 12px; font-weight: normal; transform: skew(-0.03deg); vertical-align: bottom; color: #555;}

.diagnosis_result button {width: 118px; height: 44px; background-color: #19154e; border: none; font-size: 18px; font-family: 'NanumSquare', sans-serif; font-weight: bold; color: white; cursor: pointer;}
.diagnosis_result2 button {margin-top: 25px;}    
.diagnosis_result .diagnosis_next {width: 118px; height: 44px; background-color: #19154e; border: none; font-size: 18px; font-family: 'NanumSquare', sans-serif; font-weight: bold; color: white; cursor: pointer;}
.diagnosis_result2 .diagnosis_next {margin-top: 25px;}

/* cunsulting Modal */
.cunsultingModalBg {width: 500px; height: 180px; padding: 33px; /* position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); */ background: url("../images/selftTest/diagnosis_outBg.jpg") no-repeat center; font-family: 'NanumSquare', sans-serif; font-weight: bold; text-align: center; color: #19154e;}
.cunsultingModalInner {width: 430px; height: 115px; padding: 20px; background-color: white; box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.05), 0 15px 20px 0 rgba(0, 0, 0, 0.05);}
.cunsultingModalInner > p {margin-top: 7px; font-size: 22px;}

/* 241031 - 추가 */
.diagnosis_result > .cont01 {}
.diagnosis_result > .cont01 .diagnosis_result_set .dot {opacity:0;}
.diagnosis_result > .cont01 > .list_con {}
.diagnosis_result > .cont01 > .list_con > ul {display:flex; justify-content:center; gap:90px;}
.diagnosis_result > .cont01 > .list_con > ul > li {}
.diagnosis_result > .cont01 > .list_con > ul > li > .list_div {}
.diagnosis_result > .cont01 > .list_con > ul > li > .list_div > .img_con {position:relative;}
.diagnosis_result > .cont01 > .list_con > ul > li > .list_div > .img_con > .diagnosis_iconBox {width:74px; height:74px; background-color:#8c8aa6; margin-bottom:14px; border-radius:50%; cursor:auto;}
.diagnosis_result > .cont01 > .list_con > ul > li > .list_div > .img_con > .diagnosis_iconBox > img {margin-top:10px;}
.diagnosis_result > .cont01 > .list_con > ul > li > .list_div > .img_con > .gif_con {position:absolute; top:0; left:0;}
.diagnosis_result > .cont01 > .list_con > ul > li > .list_div > .img_con > .gif_con > img {display:none; width:76px;}
.diagnosis_result > .cont01 > .list_con > ul > li > .list_div > .text_con{}
.diagnosis_result > .cont01 > .list_con > ul > li > .list_div > .text_con > span {font-size:22px; color:#8c8aa6; font-weight:400; letter-spacing:-0.25px;}
.diagnosis_result > .cont01 > .list_con.list_con01 {margin:60px 0 28px;}
.diagnosis_result > .cont01 > .list_con.list_con02 {}
.diagnosis_result > .cont02 {transform:scale(0); transition:all 0.5s;}
.diagnosis_result > .cont02 > .img_con {margin-top:70px; text-align:center;}
.diagnosis_result > .cont02 > .img_con > img {}
.diagnosis_result > .cont03 {display:none;}
    
    
    
    
   
@media screen and (max-width: 767px){
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}
	ul, li {
		list-style: none;
	}
	table {
		border-collapse: collapse;
	}

	.diagnosis_outBg {
		width: 94%;
		height: auto;
		padding: 2em;  
		background: url("../images/selfTest/diagnosis_outBg.jpg") no-repeat center;
		font-family: 'NanumSquare', sans-serif;
		font-weight: bold;
		text-align: center;
		color: #19154e;
		position:fixed;
		left:50%;
		top: 50%;
		transform: translate(-50%, -50%);
		margin-left:-0%;
		margin-top:-0%;
		z-index:99;
	}
	.diagnosis_inBg {
		width: 100%;
		height: 100%;
		padding: 1em;
		background-color: white;
		box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.05), 0 15px 20px 0 rgba(0, 0, 0, 0.05);
	}
    .diagnosis_returnBtn {
		width: 70px;
		height: 28px;
		font-size: 12px;
    }
    .diagnosis_closeBtn {
		margin-bottom: 5px;
		overflow: hidden;
    }
	.diagnosis_closeBtn > img {
		float: right;
		cursor: pointer;
	}

	/* diagnosis_start */
    .diagnosis_logo {
		width: 100px;
		margin: 0 auto;
    }
	.diagnosis_logo img {
		width: 100%;
	}
    .diagnosis_inBg h3 {
		margin-top: 2em;
		font-size: 13px;
    }
    .diagnosis_inBg h2 {
		margin-bottom: 0.5em;
		font-size: 32px;
    }
    .diagnosis_text {
		margin-bottom: 2em;
		font-size: 14px;
    }
    .diagnosis_line{
    	width: 80%;
		margin: 0 auto;
    }
    .diagnosis_line img{
    	width:100%;
    }
    
    .diagnosis_linetxt {
		display: flex;
		overflow: hidden;
    }
	.diagnosis_linetxt li {
		width: 50%;
		margin: 15px auto;
		float: left;
		font-size: 13px;
	}
	.diagnosis_linetxt li:first-child {
		padding-right: 50px;
	}
	.diagnosis_linetxt li:last-child {
		padding-left: 39px;
	}
    .diagnosis_check {
		margin: 15px auto 20px;
		font-size: 15px;
    }
	.diagnosis_check li {
		line-height: 34px;
	}
    .diagnosis_startBtn {
		width: 70%;
		height: auto;
		font-family: 'NanumSquare', sans-serif;
		font-weight: bold;
		font-size:18px;
		color: white;
		border: 0;
		background-color: #19154e;
		cursor: pointer;
		padding:0.8em 0em;
		margin-bottom: 1.5em;
    }
    .diagnosis_startBtn:hover {
		opacity: 90%;
    }

	/* diagnosis_sub */
	.diagnosis_sub {
		overflow: hidden;
	}
    .diagnosis_sublogo {
		width: 80px;
		position: absolute;
		top: 3.3em;
		left: 50%;
		transform: translateX(-50%);
    }
	.diagnosis_sublogo img {
		width: 100%;
	}
    .diagnosis_icon {
		width: 90%;
		margin: 5px 0 10px 15px;
		overflow: hidden;
    }
    
    .diagnosis_iconWrap {
		opacity: 0.5;
    }
    .diagnosis_iconActive {
		opacity: 1;
    }
    .diagnosis_icon li {
		margin: 0px;
		float: left;   
		width:20%;
    }
    .diagnosis_icon li:nth-child(even) {
		margin-top: 5em;
    }
    .diagnosis_iconBox {
		width: 50px;
		height: 50px;
		margin-bottom: 5px;
		background-color: #19154e;
		border-radius: 50%;
		position:relative;
    }
	.diagnosis_iconBox img {
		margin-top: 0px;
		width:70%;
		left:50%;
		margin-left:-35%;
		top:50%;
		transform:translateY(-50%);
		position:absolute;
	}
    .diagnosis_icon p {
		font-size: 13px;
    }
    .diagnosis_sub > table {
		width: 100%;
		font-size: 14px;
		font-weight: 500;
		text-align: left;
		color: #666;
    }
    .diagnosis_sub > table, .diagnosis_sub > table th, .diagnosis_sub > table td {
		padding: 8px 10px;
		border: 1px solid #ccc;
		font-size: 13px;
    }
    .diagnosis_sub > table > tbody > tr.check_on{
		background: #ddd;
    }
    .diagnosis_sub td:hover {
		background-color: #e8e7ed;
		cursor: pointer;
    }
	.diagnosis_sub > table span {
		float: right;
		filter: grayscale(1);
		opacity: 0.1;
	}
    .diagnosis_sub button {
		width: 80px;
		height: 28px;
		margin-top: 10px;
		border: 0;
		background-color: #19154e;
		color: white;
		font-size: 12px;
		font-family: 'NanumSquare', sans-serif;
		font-weight: bold;
		transform: skew(-0.03deg);
		cursor: pointer;
    }
    .guideMent {
		margin: 5px 0 0 2px;
		font-size: 11px;
    }
    .diagnosis_reset {
		float: left;
    }
    .diagnosis_next {
		float: right;
    }
	.diagnosis_sub button span {
		line-height: 30px;
	}

	/* diagnosis_result */
    .diagnosis_graph {
		overflow: hidden;
		text-align:center;
		width:100%;
     
    }
	.diagnosis_graph li {
		display:inline-block;
		width: 100px;
		height: 100px;
		margin: 15px 10px;
		padding-top: 35px;
		background-color: #19154e;
		border-radius: 50%;
		box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.05), 0 10px 15px 0 rgba(0, 0, 0, 0.05);
		font-size: 16px;
		color: white;
	}
	.diagnosis_graph li:first-child {
		position: relative;
		color: #19154e;
	}
	.diagnosis_graph span {
		width: 80px;
		height: 80px;
		margin: 0px;
		padding-top: 0px;
		display: inline-block;
		position: absolute;
		background-color: white;        
		border-radius: 50%;
		left:50%;
		margin-left:-40%;
		top:50%;
		margin-top:-40%;
		padding:25px 0px;
		box-sizing:border-box;
	}
    .diagnosis_resultTxt {
		margin: 25px auto;
		font-size: 18px;
    }
	.diagnosis_result_set {
		margin: 45px auto 25px;
		font-size: 22px;
    }
    .diagnosis_result2 .diagnosis_resultTxt {
		margin: 70px auto;
		font-size: 36px;
    }
    .diagnosis_result > table {
		margin: 0 auto;
		color: #666;
    }
    .diagnosis_result > table th {
		width: 90px;
		padding: 7px 5px;
		font-size: 12px;
		color: #444;
		border-right: 1px solid #aaa;
		border-bottom: 1px solid #aaa;
    }
    .diagnosis_result > table th:last-child {
		border-right: none;
    }
    .diagnosis_result > table td {
		padding: 7px 5px;
		font-size: 11px;
		font-weight: normal;
		line-height: 20px;
		transform: skew(-0.03deg);
		border-right: 1px solid #aaa;
    }
    .diagnosis_result > table td:last-child {
		border-right: none;
    }
    .diagnosis_resultTxt2 {
		margin: 25px auto;
		font-size: 13px;
		line-height: 22px;
		color: #555;
    }
    .diagnosis_result2 .diagnosis_resultTxt2 {
		margin: 60px auto 50px;
    }
    .diagnosis_result input {
		margin-bottom: 0px;
		padding: 10px 15px;
		background-color: #eee;
		border: none;
		font-size: 12px;
		font-weight: bold;
		font-family: 'NanumSquare', sans-serif;
    }
    .diagnosis_name {
		width: 35%;
		margin-right: 2%;
    }
    .diagnosis_phoneNumber {
		width: 60%;
    }
    .diagnosis_result button {
		width: 100px;
		height: 37px;
		background-color: #19154e;
		border: none;
		transform: skew(-0.03deg);
		font-size: 15px;
		font-family: 'NanumSquare', sans-serif;
		font-weight: bold;
		color: white;
		cursor: pointer;
		margin-bottom: 1.5em;
    }
    .diagnosis_result2 button {
		margin-top: 25px;
    }
    
    .diagnosis_result .diagnosis_next {
		width: 118px;
		height: 44px;
		background-color: #19154e;
		border: none;
		font-size: 18px;
		font-family: 'NanumSquare', sans-serif;
		font-weight: bold;
		color: white;
		cursor: pointer;
    }

	.diagnosis_result .diagnosis_next.fl_none {
		width: 100px;
		height: 37px;
		background-color: #19154e;
		border: none;
		transform: skew(-0.03deg);
		font-size: 15px;
		font-family: 'NanumSquare', sans-serif;
		font-weight: bold;
		color: white;
		cursor: pointer;
		margin-bottom: 1.5em;
    }
    .diagnosis_result2 .diagnosis_next {
		margin-top: 25px;
    }

	/* cunsulting Modal */
	.cunsultingModalBg {
		width: 500px;
		height: 180px;
		padding: 33px;
		/* position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%); */
		background: url("../images/selftTest/diagnosis_outBg.jpg") no-repeat center;
		font-family: 'NanumSquare', sans-serif;
		font-weight: bold;
		text-align: center;
		color: #19154e;
	}
	.cunsultingModalInner {
		width: 430px;
		height: 115px;
		padding: 20px;
		background-color: white;
		box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.05), 0 15px 20px 0 rgba(0, 0, 0, 0.05);
	}
    .cunsultingModalInner > p {
		margin-top: 7px;
		font-size: 22px;
    }
    
    /* 241031 - 추가 */
	.diagnosis_result > .cont01 {}
	.diagnosis_result > .cont01 .diagnosis_result_set .dot {opacity:0; transition: opacity 0.3s ease;}
	.diagnosis_result > .cont01 > .list_con {}
	.diagnosis_result > .cont01 > .list_con > ul {display:flex; justify-content:center; gap:70px;}
	.diagnosis_result > .cont01 > .list_con > ul > li {}
	.diagnosis_result > .cont01 > .list_con > ul > li > .list_div {}
	.diagnosis_result > .cont01 > .list_con > ul > li > .list_div > .img_con {position:relative;}
	.diagnosis_result > .cont01 > .list_con > ul > li > .list_div > .img_con > .diagnosis_iconBox {width:50px; height:50px; background-color:#8c8aa6; margin-bottom:5px; border-radius:50%; cursor:auto;}
	.diagnosis_result > .cont01 > .list_con > ul > li > .list_div > .img_con > .diagnosis_iconBox > img {margin-top:0;}
	.diagnosis_result > .cont01 > .list_con > ul > li > .list_div > .img_con > .gif_con {position:absolute; top:0; left:0;}
	.diagnosis_result > .cont01 > .list_con > ul > li > .list_div > .img_con > .gif_con > img {display:none; width:52px;}
	.diagnosis_result > .cont01 > .list_con > ul > li > .list_div > .text_con{}
	.diagnosis_result > .cont01 > .list_con > ul > li > .list_div > .text_con > span {font-size:13px; color:#8c8aa6; font-weight:400; letter-spacing:-0.25px;}
	.diagnosis_result > .cont01 > .list_con.list_con01 {margin:60px 0 28px;}
	.diagnosis_result > .cont01 > .list_con.list_con02 {margin-bottom:100px;}
	.diagnosis_result > .cont02 {display:none; transform:scale(0); margin-bottom:100px; transition:all 0.5s;}
	.diagnosis_result > .cont02 > .img_con {margin:70px 0; text-align:center;}
	.diagnosis_result > .cont02 > .img_con > img {width:80%; margin:0 auto;}
	.diagnosis_result > .cont03 {display:none;}
		
}

@media screen and (max-width: 400px){ 

	.diagnosis_result_set {font-size:18px;}

}

@media screen and (max-width: 380px){ 

	.diagnosis_result > .cont01 > .list_con > ul {gap:45px;}

}