@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@font-face {src:url("/skin/view/images/Jalnan.ttf") format('truetype'); font-family: 'jalnan';}
@import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap');
@font-face {
    font-family: 'HeirofLightBold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/HeirofLightBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GowunBatang-Regular';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/GowunBatang-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: '양진체';
    src: url('https://cdn.jsdelivr.net/gh/supernovice-lab/font@0.9/yangjin.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/*
.btn1{form control 객체에 버튼 요소만 추가 함
		width:80%;height:38px;border:1px solid #cc3300;font-weight:bold;padding:0px;font-size:20px;padding-bottom:2px;margin-left:10px;
		transition:0.3s;
	}
*/

	.box1{
        height:50px;padding:10px 20px;font-size:20px;color: #4d405d;
        border:1px solid #4d405d;
	}

	.box2{
		height:50px;color: #4d405d;
        border:1px solid #4d405d;padding:10px 20px;font-size:20px;color: white;
        float: left
	}

	.btn1:hover{
		background-color:#eaeaea;
	}

	.select1{
		height:50px;padding:3px 20px;font-size:20px;color: #4d405d;
        border:1px solid #4d405d;
	}

	.tr1{
        overflow-x:hidden;background-color:#fff;color: #4d405d; font-size:12px;resize:none;height:20px;margin-top: 10px;width: 100%
	}

	.test_title{/*타이틀 효과*/
	  color: #4d405d;
      margin-bottom: 20px
	  }

	.test_title2{/*타이틀 효과*/
	  color: #fa6966;
      margin-bottom: 20px
	}

    .test_title3{/*타이틀 효과*/
      font-size: 20px;
	  color: #697bc5;
      margin-bottom: 10px
	}

	.result-text{
	  font: 14px Georgia Bold, Sans-Serif;
	  color: #fff;
	  text-shadow: 0px 1px 4px #2a2a2a;
	  float:left;
	  width:100%;
	  padding:30px;	
	}

	.wid_33 { width:50%;float:left;height:55px;line-height:55px;padding-top:13px;padding-bottom:13px;}
	.wid_50 { width:50%;float:left;height:55px;line-height:55px;padding-top:13px;padding-bottom:13px; }
	 .in1 { font-size:20px;cursor:pointer;width:23%;height:50px;line-height:50px;text-align:center;color:white;background:#fa6966;border-radius:4px;float:right;}
	 .in1:hover {background:#697bc5;
 -webkit-transition: background-color 0.3s linear;
    -moz-transition: background-color 0.3s linear;
    -ms-transition: background-color 0.3s linear;
    -o-transition: background-color 0.3s linear;
    transition: background-color 0.3s linear;}
	.in2 { font-size:20px;cursor:pointer;width:23%;height:50px;line-height:50px;text-align:center;color:white;background:#fa6966;border-radius:4px;float:right;}
	.in2:hover {background:#697bc5;
 -webkit-transition: background-color 0.3s linear;
    -moz-transition: background-color 0.3s linear;
    -ms-transition: background-color 0.3s linear;
    -o-transition: background-color 0.3s linear;
    transition: background-color 0.3s linear;}
	
	.plno { padding-left:0px !important; }
	.r1 {float: left; width:24%;margin-right: 1.5%;height:50px;border:1px solid #4d405d;color: #4d405d;font-size: 20px}
	 .r2 {float: left; width:75%;margin-right: 1.5%;height:50px;border:1px solid #4d405d;padding:3px 20px;font-size:20px;color: #4d405d;}

	input[type=checkbox] {
    transform: scale(2);margin:-2px 10px 10px 5px;}
input[type=radio] {
    transform: scale(2);margin:-2px 10px 10px 5px;}

	@media all and (max-width:1500px){ 
	.wid_33 { width:100%;float:left;height:99px;line-height:99px;padding-top:13px;padding-bottom:13px; }
	.wid_50 { width:100%;float:left;height:99px;line-height:99px;padding-top:13px;padding-bottom:13px; }
	.plno { padding-left:0px !important; }
	select { height:50px !important;}
	input[type=text] { height:50px !important;font-size:20px !important; }
	input[type=checkbox] {
    transform: scale(2);margin:-2px 10px 10px 5px;
}
input[type=radio] {
    transform: scale(2);margin:-2px 10px 10px 5px;
}
 .nb { width:180px; }
 .r1 { float: left;}
 .pb { width:180px; }

 .r2 {  float: left;}
	}



/*leftmenu*/
.ul{list-style:none;margin: 0;padding: 0}
.lnb_style{width:200px;position:relative;float:left;margin-right:70px;margin-top:-20px;}
.ul_style li .ul_top{text-align:center;}
.ul_style li{width:100%;float:left;padding-top:5px;padding-bottom:5px;font-size:12px;}
.ul_style li div{width:180px;margin-right:auto;margin-left:auto;padding:5px;}
.ul_style li .sel{width:180px;margin-right:auto;margin-left:auto;background:#f9eae1;padding:8px;}
.clear{clear:both;}

/*---------------외주코딩-------------------*/


/*이상형찾기 리뉴얼*/
#div2{display:none;}
#div3{display:none;}
#div4{display:none;}
#div5{display:none;}
#div6{display:none;}
#div7{display:none;}
#result1{display:none;}

/*제목*/
.swid .lovetest{width:100%;font-family: 'jalnan';text-align: center;margin: 100px 0}

.lovetest .warn{color: #4d405d;font-size: 25px;line-height: 40px;}
.lovetest .warn span{color: #aaafc6;font-size: 20px;line-height: 35px;font-family: 'Noto Sans KR', sans-serif;font-weight: 100}

/*테스트 내용*/
.sel_box .question{line-height: 55px;font-size: 30px;color: #4d405d;}
.sel_box .question .que{line-height: 70px;font-size: 40px;color: #fa6966;}
.sel_box .question .question_under1{color: #fa6966;}
.sel_box .question .question_under2{color: #aaafc6;font-family: 'Noto Sans KR', sans-serif;font-size: 17px;line-height: 30px;}

.sel_box #mbti_btn{color: white;margin: 0 auto}
.sel_box #mbti_btn div{
    cursor: pointer;
    border-radius: 1000px;
    margin: 30px 0;}
.sel_box #mbti_btn div:hover span{color: white}

.sel_box #mbti_btn .mbti_btn_1{
    font-family: '양진체';
    float: left;
    background: #ffc1c2}
.sel_box #mbti_btn .mbti_btn_1:hover{background: #fa6966;color: white}
.sel_box #mbti_btn .mbti_btn_1 span{color: #fa6966}

.sel_box #mbti_btn .mbti_btn_2{
    cursor: default;
    color: #fa6966;
    position: absolute;
    left: 50%;
    transform:translate(-50%, -50%);}
.sel_box #mbti_btn .mbti_btn_2 span{color: #697bc5}

.sel_box #mbti_btn .mbti_btn_3{
    font-family: '양진체';
    float: right;
    background: #81e1df}
.sel_box #mbti_btn .mbti_btn_3:hover{background: #697bc5;color: white}
.sel_box #mbti_btn .mbti_btn_3 span{color: #697bc5}




/*div1*/
#div1 {font-family: '양진체';
    background: #ffc1c2;
    margin: 100px auto;
    padding: 50px;
    position: relative;
    height: 600px;
    border-radius: 30px}
#div1 li:first-child{
    float: left;
    text-align: left;
    color: white;}
#div1 li:first-child span{color: #fa6966;}
#div1 li:last-child{
    position: absolute;
    right: 50px;
    bottom: 50px;
    text-align: center;
    font-size: 30px;
    color: #fa6966;
    background: white;
    border-radius: 1000px;
    width: 150px;
    height: 150px;
    padding-top: 35px;
    cursor: pointer}
#div1 li:last-child:hover{background: #fa6966;color: white}
#div1 img{width: 77px;margin-left: 400px;position: absolute;right: 50px}

.sel_box .mbti_title .title_b{color: #697bc5;}
.sel_box .mbti_title .title_r{color: #fa6966;}


/*div7*/
.swid .warn1{font-family: 'Noto Sans KR', sans-serif;color: #4d405d;} 
.swid .italic{font-style: italic;font-weight: bold} 
.swid .warn1 {margin-bottom: 20px}
.swid .warn1 .impact{font-style: italic;background: linear-gradient(180deg,rgba(255,255,255,0) 50%, #ffc1c2 50%);}
.swid .warn1 span{font-weight: bold;color:#4d405d;}
.swid .warn2{color: #4d405d;line-height: 30px;font-style: italic;font-family: 'GowunBatang-Regular';} 
.swid .warn2 .underline1 {height: 5px;width: 150px; position: absolute;margin-left: -155px} 
.swid .warn2 .underline2 {height: 5px;position: absolute;margin-left: -65px} 
.swid .warn2 .underline3 {height: 5px;position: absolute;margin-left: -75px} 
.swid .warn2 span{font-weight: bold;color:#4d405d;}
.swid .title{text-align:center;color: #4d405d;font-weight: bold;}
.swid .t_under{text-align:center;}


.info {margin: 0 auto;border: 3px solid #697bc5;padding: 30px;margin-top: 50px;border-radius: 30px;width: 100%}
.info ul{font-size: 20px;text-align: left;margin: 50px 0}

#name_gender {height: 100px; width: 100%;}
#name_gender li {float: left;}
#name_gender li:last-child {float: right;}

#born_live {height: 100px; width: 100%;}
#born_live li {float: left;}
#born_live li:last-child {float: right;}

.div7_year {width:45%;}

.div7_name {width:45%;}

.div7_agree {width: 100%; display:inline-block;text-align:left;margin-top: 50px;font-family: 'Noto Sans KR', sans-serif;}
.div7_agree ul{margin: 0;text-align: center}
.div7_agree li{display: inline-block;font-size: 10px;color: #4d405d;}
.div7_agree li:first-child{margin-right: 30px;}



/*result1*/
.result {border-radius: 50px; font-size: 30px;margin: 50px auto;height:60px;background: #fa6966;text-align: center;line-height: 60px;cursor: pointer;box-shadow: 0px 5px 10px rgba(0, 0, 0, .3);color: white}
.result:hover{background: #697bc5;
 -webkit-transition: background-color 0.3s linear;
    -moz-transition: background-color 0.3s linear;
    -ms-transition: background-color 0.3s linear;
    -o-transition: background-color 0.3s linear;
    transition: background-color 0.3s linear;}

.end{margin: 0 auto;width: 100%;text-align: center;line-height: 50px;}
.mbti_end_1 .about_result{font-size: 30px;color: #4d405d;line-height: 55px;margin-bottom: 30px}
.mbti_end_1 .about_result span{color: #f56101;}
.mbti_end_1 .about{line-height: 45px;font-size: 25px;color: #4d405d;font-family: 'Noto Sans KR', sans-serif;}
.mbti_end_1 .about span{color: #f56101;font-weight: bold}
.mbti_end_1 img{
    border: 5px solid #f56101;
    width: 333px;
    border-radius: 1000px;
    margin: 30px 0;}

.mbti_end_2 .about_result{font-size: 30px;color: #4d405d;line-height: 55px;margin-bottom: 30px}
.mbti_end_2 .about_result span{color: #697bc5;}
.mbti_end_2 .about{line-height: 45px;font-size: 25px;color: #4d405d;font-family: 'Noto Sans KR', sans-serif;}
.mbti_end_2 .about span{color: #697bc5;font-weight: bold}
.mbti_end_2 img{
    border: 5px solid #697bc5;
    width: 333px;
    border-radius: 1000px;
    margin: 30px 0;}

.mbti_end_3 .about_result{font-size: 30px;color: #4d405d;line-height: 55px;margin-bottom: 30px}
.mbti_end_3 .about_result span{color: #fa6966;}
.mbti_end_3 .about{line-height: 45px;font-size: 25px;color: #4d405d;font-family: 'Noto Sans KR', sans-serif;}
.mbti_end_3 .about span{color: #fa6966;font-weight: bold}
.mbti_end_3 img{
    border: 5px solid #fa6966;
    width: 333px;
    border-radius: 1000px;
    margin: 30px 0;}

.mbti_end_4 .about_result{font-size: 30px;color: #4d405d;line-height: 55px;margin-bottom: 30px}
.mbti_end_4 .about_result span{color: #00c3f4;}
.mbti_end_4 .about{line-height: 45px;font-size: 25px;color: #4d405d;font-family: 'Noto Sans KR', sans-serif;}
.mbti_end_4 .about span{color: #00c3f4;font-weight: bold}
.mbti_end_4 img{
    border: 5px solid #00c3f4;
    width: 333px;
    border-radius: 1000px;
    margin: 30px 0;}