@charset "utf-8";

/* ================================================
  common
==================================================*/

/* header 
--------------------------*/
.sub-lovetest .lovetest-header {margin-top: 20px; text-align: center;}
.sub-lovetest .lovetest-header .subtitle {font-size: 16px; color: #000; font-weight: 900; text-transform:uppercase;}
.sub-lovetest .lovetest-header .subtitle .heart {color: #d51168; }
.sub-lovetest .lovetest-header .title {position: relative; font-size: 30px; font-weight: 900; }
.sub-lovetest .lovetest-header .title:after {content: ''; display: inline-block; position: absolute; bottom: -30px; left: 50%; width: 1px; height: 30px; background-color: #000; }
.sub-lovetest .lovetest-header .assistant {margin-top: 50px; font-size: 14px; color: #232323; font-weight: 400; }

/* body 
------------------------------*/
.sub-lovetest .lovetest-form {margin: 30px auto 50px; text-align: center; }
.sub-lovetest .lovetest-form .subjext-box {display: inline-block; min-width: 200px; padding: 5px 5px; box-sizing: border-box; border-radius: 100px;}
.sub-lovetest .lovetest-form .subject {padding: 10px 30px; box-sizing: content-box; border: 1px dashed rgba(255,255,255,0.4);  border-radius: 100px; font-family: "KCC-eunyoung" , dotum, sans-serif; font-size: 28px; color: #fff; line-height: 28px; font-weight: normal; text-align: center;}
.sub-lovetest .lovetest-form .subject.subject-ellipsis02 {line-height: 1.0;} /* 서브타이틀이 2줄 인경우  */
.sub-lovetest .score-form {margin-top: 40px; }
.sub-lovetest .score-form .input-score {display: inline-block; width: 110px; height: 48px; padding: 0 5px; box-sizing: border-box; border: 1px solid #ebebeb; background-color: #fff; line-height: 46px;  font-size: 24px; color: #232323; font-weight: 400; text-align: center; }
.sub-lovetest .score-form .select-score {display: inline-block; width: 110px; height: 48px; margin: 0; padding: 0 5px; box-sizing: border-box; border: 1px solid #ebebeb; background-color: #fff; font-size: 24px; color: #232323; font-weight: 400; vertical-align: baseline;}
.sub-lovetest .score-form .select-score.select-large {width: 350px; }

/* 출생년도 */
.score-form.birth span {display: inline-block; font-size: 20px; color: #232323; }

/* lovetest-score */
.lovetest-score {
	margin: 40px auto 0; 
	display: -webkit-box; 
	display: -webkit-flex; 
	display: flex;
	-webkit-flex-direction: row; 
	flex-direction: row; 
	-webkit-box-lines: single;
	-webkit-flex-wrap: wrap; 
	flex-wrap: wrap; 
	-webkit-box-pack: justify;
	justify-content: center;
	-webkit-box-align: stretch;
	align-items: center; 
}
.lovetest-score li {margin: 0 5px 5px; }
.lovetest-score .btn-score {display: block; width: 75px; height: 75px; margin: 0 auto; box-sizing: border-box; border-radius: 100%; background-repeat: no-repeat; background-position: center; background-size: contain; font-family: "KCC-eunyoung" , dotum, sans-serif; font-size: 30px; color: #fff; font-weight: normal; line-height: 75px; text-align: center; vertical-align: middle;}

/* 텍스트가 두 줄인경우 (a tag 사용)*/
.lovetest-score .btn-score.line-height {font-size: 28px; line-height: 25px;}
.lovetest-score .btn-score.line-height > span {display: inline-block; padding-top: 11px;}

/* 직종 //텍스트 3줄인 경우 */
.lovetest-score.score-txtlong {}
.lovetest-score.score-txtlong.grid-3 .btn-score {width: 90px; height: 90px; line-height: 90px; }

.lovetest-score.score-txtlong .btn-score.line-height {font-size: 22px; line-height: 22px;}
.lovetest-score.score-txtlong .btn-score.line-height > span {display: inline-block; padding-top: 22px;}
.lovetest-score.score-txtlong .btn-score.line-height02 > span {display: inline-block; padding-top: 12px;}

.lovetest-score .colorRed {background-color: transparent !important; background-image: url("/images/lovetest/color_red.png"); }
.lovetest-score .colorGreen {background-color: transparent !important; background-image: url("/images/lovetest/color_green.png"); }
.lovetest-score .colorYellow {background-color: transparent !important; background-image: url("/images/lovetest/color_yellow.png"); }
.lovetest-score .colorBlue {background-color: transparent !important; background-image: url("/images/lovetest/color_blue.png"); }


/* grid-3 //한줄에 갯수가 3 */
.lovetest-score.grid-3 {max-width: 300px; }

/* grid-4 //한줄에 갯수가 4 */
.lovetest-score.grid-4 {max-width: 400px;}
.lovetest-score.grid-4 .btn-score {width: 70px; height: 70px; font-size: 28px; line-height: 70px;}
.lovetest-score.grid-4 .btn-score.line-height {font-size: 28px; line-height: 28px;}
.lovetest-score.grid-4 .btn-score.line-height > span {display: inline-block; padding-top: 7px; }

/* grid-5 //한줄에 갯수가 5 */
.lovetest-score.grid-5 .btn-score {width: 70px; height: 70px; font-size: 26px; line-height: 70px;}
.lovetest-score.grid-5 .btn-score.line-height {font-size: 26px; line-height: 26px;}
.lovetest-score.grid-5 .btn-score.line-height > span {display: inline-block; padding-top: 10px; }


/* result : 결과페이지  
-----------------------------------*/
.lovetest-result {margin: 30px auto 50px; padding: 0 10px; box-sizing: border-box; text-align: center; }
.lovetest-result .result-box {padding: 25px 15px; box-sizing: border-box; border-radius: 20px; }
.result-box .result-tit {font-size: 18px; color: #fff; font-weight: 300; line-height: 1.5; }
.result-box .result-stage {font-size: 20px; font-weight: 500; }

.result-box .result-detail {margin-top: 30px; }
.result-box .result-detail .detail-tit {display: block; padding-bottom: 10px; font-size: 14px; color: #fff; font-weight: 700; }
.result-box .result-detail .detail-txt {font-size: 14px; color: #fff; font-weight: 300; line-height: 1.5; word-break: break-all;}

.result-box .detail-box {margin: 20px auto 0;  box-sizing: border-box; border-radius: 4px; box-shadow: 6px 7px 5px rgba(0,0,0,0.1); overflow: hidden; }
.result-box .detail-box .detail-header {padding: 20px 20px; text-align: center; }
.detail-box .detail-header p {color:#fff; font-size: 13px; font-weight: 300; }
.detail-box .detail-header .count {color:#fff; font-size: 22px; font-weight: 700; }
.detail-box .detail-header .count > em {color:#fff; font-size: 28px; font-weight: 700; }
.detail-box .detail-list {padding: 30px 10px; background-color: #fff; }
.detail-box .detail-list:after {content: ''; display:  block; clear: both; visibility: hidden;}
.detail-box .detail-list .detail-dl {float:left; width: calc(50% - 20px); padding: 0 10px; margin-bottom: 15px; }
.detail-box .detail-list .detail-dl:after {content: ''; display:  block; clear: both; visibility: hidden;}
.detail-box .detail-list .detail-dl dt {float: left; color: #545454; font-size: 14px; font-weight: 400; }
.detail-box .detail-list .detail-dl dd {float: right; font-size: 14px; font-weight: 500; vertical-align: middle;}





/* ================================================
  러브테스트 페이지별 컬러 
==================================================*/
/* 결혼 나이 */
.marriage .txtColor {color: #3b60fc; }
.marriage .bgClor {background-color: #3b60fc; }
.marriage .btn-score {background-color: #6e8aff; }
.marriage .result-box {background-color: #3b60fc; }
.marriage .result-box .result-stage {color: #00deff; }

/* 결혼가능 점수 */
.possible .txtColor {color: #ff90c2; }
.possible .bgClor {background-color: #ff90c2; }
.possible .btn-score {background-color: #ffc0dc; }
.possible .result-box {background-color: #ff90c2; }

/* 가입비 산출 */
.subscription-cost .txtColor {color: #89cbfe; }
.subscription-cost .bgClor {background-color: #89cbfe; }
.subscription-cost .btn-score {background-color: #59a6e0; }
.subscription-cost .result-box {background-color: #89cbfe; }
.subscription-cost .result-box .result-stage {color: #1772b9; }

/* 이상형 찾기 */
.ideal-type .txtColor {color: #bddc51; }
.ideal-type .bgClor {background-color: #bddc51; }
.ideal-type .btn-score {background-color: #a4c728; }
.ideal-type .result-box {background-color: #bddc51; }
.ideal-type .result-box .result-tit {color: #2c2c2c; font-weight: 400; }
.ideal-type .result-box .detail-header {background-color: #788F27; }
.ideal-type .result-box .detail-list .detail-dl dd {color: #788F27; }

/* 무료추천 요청 */
.free-push .txtColor {color: #2dca65; }
.free-push .bgClor {background-color: #2dca65; }
.free-push .btn-score {background-color: #64e391; }