@charset "utf-8";

@font-face {src:url("/skin/view/images/Jalnan.ttf") format('truetype'); font-family: 'jalnan';}
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@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;
}

.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;border:0px;padding:10px 20px;font-size:20px;color: #f4957f;
        background: white
	}

	.box2{
		height:50px;border:0px;padding:10px 20px;font-size:20px;color: white;
        background: #009694;float: left
	}

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

	.select1{
		height:50px;border:0px;padding:10px 20px;font-size:20px;color: #2a2a2a;
        background: white
	}

	.tr1{
        overflow-x:hidden;background-color:#fff;font-size:12px;resize:none;height:40px;margin-top: 20px;float: left
	}

	.test_title{/*타이틀 효과*/
	  font: 50px jalnan, Sans-Serif;
	  text-align: center;
	  color: #2a2a2a;
	  }

	.test_title2{/*타이틀 효과*/
      font-size: 20px;
	  color: #2a2a2a;
      margin-bottom: 10px
	}

    .test_title3{/*타이틀 효과*/
      font-size: 20px;
	  color: #2a2a2a;
      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;	
	}


	/*#### 금글자 class ####*/
	.golden-base {
	  -webkit-background-clip: text;
	  -webkit-text-fill-color: transparent;
	  font-weight:bold;
	  -webkit-margin-before: 0.3em; 
	  -webkit-margin-after: 0.2em;
	}

	.golden1 {
	  background-image: -webkit-linear-gradient(#FFF65C, #3A2C00);
	  text-shadow: -0.02em -0.03em 0.005em rgba(255, 223, 0, 0.60);

	}

	.golden-text{
		  font-size:30px;padding-left:20px;margin-top:15px;
	}
	/*#### 금글자 class #### */

	.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:100px;height:50px;line-height:50px;text-align:center;color:white;background:#818181;border-radius:4px;float:left;}
	.in2 { font-size:20px;cursor:pointer;width:100px;height:50px;line-height:50px;text-align:center;color:white;background:#885f36;border-radius:4px;float:left;}
	
	.plno { padding-left:0px !important; }
	.r1 {float: left; width:100px;margin-right: 10px;height:50px;border:0px;color: #f4957f;background: white !important; }
	 .r2 {float: left; width:320px;margin-right: 10px;height:50px;border:0px;padding:3px 20px;font-size:20px;color: #f4957f;background: white !important; }
	@media all and (max-width:1500px){ 
		.in1 { cursor:pointer;width:120px;height:58px;line-height:58px;text-align:center;color:white;background:#818181;border-radius:4px;margin-left:10px;font-size:25px; }
	.in2 { font-size:25px;cursor:pointer;width:120px;height:58px;line-height:58px;text-align:center;color:white;background:#885f36;border-radius:4px;float:left;margin-left:10px;}
	.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; }
    .test_title2{/*타이틀 효과*/
	  font-size: 30px;
	  color: #2a2a2a
      margin-bottom: 10px
	}
    .test_title3{/*타이틀 효과*/
	  font-size: 30px;
	  color: #009694;
      margin-bottom: 10px
	}
	select { height:58px !important;font-size:30px !important; }
	input[type=text] { height:58px !important;font-size:30px !important; }
	input[type=checkbox] {
    transform: scale(2);margin-right:10px;margin-left:10px;
}
input[type=radio] {
    transform: scale(2);margin-right:10px;margin-left:10px;
}
 .nb { width:180px; }
 .r1 { float: left;width:calc( 32.6% - 56px ) !important; }
 .pb { width:180px; }

 .r2 {  float: left;width:calc( 100% - 170px ) !important; }
	}
.select1{
		height:50px;border:0px;padding:3px 20px;font-size:20px;color: #2a2a2a;
        background: white
	}


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


/*이상형찾기 리뉴얼*/

#div2{display:none;}
#div3{display:none;}
#div4{display:none;}
#div5{display:none;}
#div6{display:none;}
#div7{display:none;}
#div8{display:none;}
#div9{display:none;}
#result1{display:none}

/*제목*/
.swid {font-family: 'Noto Sans KR', sans-serif;}
.swid .lovetest_1 {width: 100%}
.swid .lovetest_1 #up_title{width: 100%;background:  url(/skin/view/images/lovetest4_1.jpg);background-size: cover;margin-bottom: -10px;}

.swid #gradient{background: linear-gradient(to right,rgba(0,0,0,0),rgba(0,0,0,.2),rgba(0,0,0,0));width: 100%;margin: 0 auto;}

.swid .logo img{display: block; margin: 0 auto}
.swid .warn1{color: white;} 
.swid .italic{font-style: italic;font-family: 'GowunBatang-Regular';} 
.swid .warn1 .impact{font-style: italic;font-weight: bold;background: linear-gradient(180deg,rgba(255,255,255,0) 50%, #f4957f 50%);}
.swid .warn1 span{font-weight: bold;color:white;}
.swid .warn2{color: white;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:white;}
.swid .title{text-align:center;color: white;font-weight: bold;}
.swid .t_under{text-align:center;}

/*테스트 내용*/
.sel_box{background:url(/skin/view/images/sub3/test_3_bg.png);background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom;
    background-position-x: right;
    background-color: #fafafa;}

.sel_box.test{background:url(/skin/view/images/sub3/test_3_test_bg.png);background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
   /* background-position-x: right;*/
    background-color: #fafafa;}

.sel_box .warn3{color: #f4957f;text-align: left;line-height: 30px;border: 1px solid #f4957f;margin: 0 auto;font-size: 15px;width: 400px;padding: 10px 20px} 
.sel_box .warn3 span{font-weight: bold;color:#009694;}
.swid .warn3 .impact{font-style: italic;font-weight: bold;border-bottom: 2px solid #009694;color: #009694} 
.sel_box #warn4_box{text-align: center} 
.sel_box #warn4_box li{display: inline-block} 
.sel_box #warn4_box img{height: 75px;margin-top: -50px} 
.sel_box .warn4{color: #f4957f;text-align: left;line-height: 25px;font-size: 15px;word-break: break-all;width: 350px;margin: 0 15px 0 20px} 

.sel_box .intitle span{background: #f3e1d0;}
.sel_box.test .intitle span{background: none;}
.sel_box .result_title span{color: #009694;}
.sel_box .intitle{font-size: 37px;color: #2a2a2a;position: relative;z-index:10;text-align:center;font-weight:500}
.sel_box .result_title{font-size: 37px;color: #f4957f;position: relative;z-index:10;text-align:center;font-weight: bold}
.sel_box .line{margin:0 auto;border: 3px dotted #00ff0000;border-bottom-color:#f4957f;}

.sel_box .margin_5{margin-bottom: 3%}
.sel_box .btn_1{font-weight: bold}

.sel_box .btn_1 .row_1 li{background: #fff;color: #885f36;}



/*
.sel_box .btn_1 .row_1 li:first-child{background:linear-gradient(45deg, #ff9aa2,#feb7b1);color: white}
.sel_box .btn_1 .row_1 li:last-child{background:linear-gradient(45deg, #feb7b1,#ffdd95);color: white}
.sel_box .btn_1 .row_2 li:first-child{background:linear-gradient(45deg, #ffdd95,#d0e6a5);color: white}
.sel_box .btn_1 .row_2 li:last-child{background:linear-gradient(45deg, #d0e6a5,#b5ead6);color: white}
.sel_box .btn_1 .row_3 li:first-child{background:linear-gradient(45deg, #b5ead6,#c7ceea);color: white}
.sel_box .btn_1 .row_3 li:last-child{background:linear-gradient(45deg, #c7ceea,#b5ead6);color: white}
.sel_box .btn_1 .row_4 li:first-child{background:linear-gradient(45deg, #bbe9ff,#c3befe);color: white}
.sel_box .btn_1 .row_4 li:last-child{background:linear-gradient(45deg, #ffcfff,#fad0ce);color: white}
*/

.sel_box .btn_1{font-size: 25px;margin: 0 auto;color: #885f36;}
.sel_box .btn_1 ul{text-align: center;}
.sel_box .btn_1 li{border-radius: 100px;height:65px;background: #fff;margin-right: 5%;text-align: center;line-height:65px;cursor: pointer;display: inline-block;}
.sel_box .btn_1 li:last-child{margin-right: 0}
.sel_box .btn_1 .row_1 li:hover{background: #885f36;
 -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;
color: #fff}
.sel_box .btn_1 .row_2 li:hover{background: #885f36;
 -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;
color: #fff}
.sel_box .btn_1 .row_3 li:hover{background: #885f36;
 -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;
color: #fff}
.sel_box .btn_1 .row_4 li:hover{background: #885f36;
 -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;
color: #fff}


.sel_box .test_top_logo{display: flex;flex-direction: column; align-items: center; padding: 0 0 40px 0;}

/*div2 버튼*/
.swid .lovetest_2 #up_title{width:100%;background:  url(/skin/view/images/lovetest4_2_1.jpg);background-size: cover;margin-bottom: -10px}



/*div3 버튼*/
.swid .lovetest_3 #up_title{width:100%;background:  url(/skin/view/images/lovetest4_3_1.jpg);background-size: cover;margin-bottom: -10px}



/*div4 버튼*/
.swid .lovetest_4 #up_title{width:100%;background:  url(/skin/view/images/lovetest4_4_1.jpg);background-size: cover;margin-bottom: -10px}


/*div5 버튼*/
.swid .lovetest_5 #up_title{width:100%;background:  url(/skin/view/images/lovetest4_5_1.jpg);background-size: cover;margin-bottom: -10px}


/*div6 버튼*/
.swid .lovetest_6 #up_title{width:100%;background:  url(/skin/view/images/lovetest4_6_1.jpg);background-size: cover;margin-bottom: -10px}



/*div7 버튼*/
.swid .lovetest_7 #up_title{width:100%;background:  url(/skin/view/images/lovetest4_7_1.jpg);background-size: cover;margin-bottom: -10px}



/*div8*/
.result1 {font-size: 25px;border-radius: 100px;margin: 0 auto;height:65px;background: #fff;text-align: center;line-height: 65px;cursor: pointer;color: #885f36;font-weight: bold}
.result1:hover{background: #885f36;
 -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;color: #fff}

.ticket img{width: 100%;}
.ticket p{color: #f4957f;text-align: center}
.ticket span{color: #009694;font-weight: bold}
.ticket .small{color: #f4957f;font-size: 23px;text-align: center;font-weight: 100}



/*div9*/
#div9{font-family: 'Noto Sans KR', sans-serif;}

.result {font-size: 25px;border-radius: 100px;height:65px;background: #fff;text-align: center;line-height: 65px;cursor: pointer;color: #885f36;font-weight: bold}
.result:hover{background: #885f36;
 -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;color: #fff}

.info {margin-bottom: 70px;}
.info ul{margin-bottom: 30px}

.div9_name li:last-child{width:50%;}
.div9_gender li span{margin-right: 50px}
.div9_gender li input{margin-top: -2px;}
.div9_year li:last-child{width:50%;}
.div9_numb li:last-child{margin-bottom: 110px}
.div9_numb2 li:last-child{margin-bottom: 110px}
.div9_agree {margin-top: 10px; width: 100%; display:inline-block;text-align:left;}
.div9_agree li{float: left;}
.div9_agree li:last-child {margin-right: 0}


/*result1*/
.end{margin-bottom: 50px;width: 100%;text-align: center;font-size: 20px;}
.end .about{color: #f4957f;}
.end .common{color: #009694;margin-top: 35px;}
.end span{color: #f4957f;font-size: 25px;}
.end .tada{font-size: 25px;margin-top: 37px;color: #f4957f}
.end .tada .in{margin-top: 40px;text-align: center}
.end .tada .numb{border:2px solid #f4957f;text-align: center;width: 20%;margin: 15px auto;border-radius: 10px}



.test_top_logo .myungjo{ font-family: "Nanum Myeongjo", serif; font-weight: 700; margin: 10px 0 0 0;font-size: 19px;letter-spacing: -1.5px;}
.test_top_logo p:nth-child(3){font-size: 13px;}


.white_box{background: rgb(255, 255, 255, 0.5);
    width: 80%;
    margin: 2% auto;
    padding: 4%;}

/* .sel_box.test .intitle{color:#885f36;}*/

.sel_box.test .btn_1 li{border-radius: 8px;}


@media screen and (max-width: 767px) {
    .sel_box.test .btn_1 li {
        width: 40%;
    }
}