/* 성격검사 메인 추가2025.11.24)***/
.headerwrap.char div.header > div.mntop > div.center-title h1 {font-size: 1.2em; padding-top: 8px}
.headerwrap.char div.header > div.mntop > div.center-title a {background: none; color: #fff; width: auto}
div.top_graybg.gray.char h1 { display: none; padding-left: 0; padding-right: 0}
div.top_graybg.gray.char .center { font-size: 16px}
.char_area {width:100%; margin:10px auto}
.char_area .center {width: 80%; margin:0 auto; padding-bottom: 30px}
.char_area .center img {vertical-align: middle; margin-top: 5px;}
.char_area .center span {display: inline-block; height:auto; overflow: hidden}
.char_area .center span img {vertical-align: middle}
.char_area .center span:last-child { padding-left: 30px; }

.char_area .char_ban {  width: 100%;  background: #f1f1f1; border-radius: 16px;  width: 100%; height: auto; overflow: hidden;margin:0 auto 8px auto}
.char_area .char_ban .txt {display: none}
.char_area .char_ban span{display: inline-block; float: left;padding: 6px 5px;  vertical-align: middle;}
.char_area .char_ban span:first-child {width: 20%}
.char_area .char_ban span:last-child {width: 80%}
.char_area .char_ban:lang(ko) span:last-child { padding-top: 15px}
.char_area .char_ban strong{ font-size:20px; color: #000; font-weight: normal}
.char_area .char_ban img {width:50px }
.char_area .btn {text-align: center; padding-top: 10px}
.char_area .btn button { padding: 20px; font-size: 1.6em; border-radius: 0; width: 100%; text-align: center}

/** 비회원검사 **/
.modal.m-regist-survey .modal-content.nonuser {padding: 20px !important}
.modal-content.nonuser .signup_form .gender_typ dt {width:25%; float: left;}
.modal-content.nonuser .signup_form .gender_typ dd {width: 75%;float: left; clear: none;  padding-top: 5px}
.modal-content.nonuser .signup_form dl{ border-bottom: 1px solid #bbb}
.modal-content.nonuser .smalldot {padding-bottom: 6px}

.personality_area { width: 42%; max-width: 450px; margin: 30px auto; height: auto; overflow: hidden}
.personality_area .signup_form dt:lang(en) {width: 28%}
.personality_area .signup_form dd:lang(en) {width: 72%}
.tabarea {padding:0 0 30px 0; height: auto; overflow: hidden ;width: 100%}
.tabarea label.standard1, .tabarea label.standard2 {width: 49.5%;  background: #f1f1f1;color: #969696; padding:10px 0; text-align: center; display: inline-block; margin-right: 0; border-top-left-radius :10px;border-top-right-radius:10px; border-bottom: 1px solid  #941776;float: left; cursor: pointer}

.tabarea input#select1:checked + label.standard1, 
.tabarea input#select2:checked + label.standard2 {background: #fff; color: #941776; font-weight: bold;border: 1px solid #941776; border-bottom: none; }
.tabarea input#select1, .tabarea input#select2, .tabarea input#select3, .tabarea input#select4 {  display:none;}
.tabarea .page1, .tabarea .page2, .tabarea .page3, .tabarea .page4{ display:none;}

.tabarea input#select1:checked ~ .page1{  display:block; clear:both; padding-top:0}
.tabarea input#select2:checked ~ .page2{  display:block; clear:both; padding-top:0}
.tabarea input#select3:checked ~ .page3{  display:block; clear:both; padding-top:20px}
.tabarea input#select4:checked ~ .page4{  display:block; clear:both; padding-top:20px}
.tabarea button.pink {background: #941776;width: 100%;height: 45px;padding: 10px;    border-radius: 8px;}

.tabarea .signup_form .btnBc.blue {width: 105px !important; float: right; padding-left:0; padding-right: 0}
.tabarea .signup_form #txt_sms_recv_tel_no {width:calc(100% - 110px) !important}
.tabarea .signup_form { padding:20px 10px}
.tabarea .signup_form dt {padding-left: 3%}
/***************************/

/* 성격검사 */

div.top_graybg.gray.report {
	background: #d0f3fc;
   background-image:linear-gradient(90deg,#e3d9fa 10%,#e3d9fa 40%,#d0f3fc 100%);
	background-repeat: no-repeat;
	background-position:top center; 
}
div.containerwrap > div.container.result_area {width: 80%; margin: 0 auto; padding-top: 25px}
.result_area1 {padding-top: 15px; height: auto; overflow: hidden}
div.top_graybg.gray.report h1{font-size:2.1em; margin:0; text-align:center; padding: 0 15px}
div.top_graybg.gray.report p{font-size:1.2em; padding-left:30px; color:#454545;}
div.top_graybg.gray.report p.mobile_show { color:#444; display:block}
div.top_graybg.gray.report:lang(en) h1 { margin-left:10px;letter-spacing:-1px}
div.top_graybg.gray.report:lang(en) p {padding-left:10px; letter-spacing:-1px}

div.report_txt { height:auto; overflow:hidden; margin:0 auto; text-align:center}
div.report_txt p {width:50%; text-align:left;margin:0 auto; }
div.report_txt p:lang(en) {width:80%}
div.report_txt span img {width:40px; vertical-align:middle; margin-right:10px}

.txt_reports {font-size:1.2em;  height:auto; overflow:hidden;}
.txt_reports p{line-height:1.6em;}
.txt_reports .color-blue {padding-bottom:15px; height:auto; border-bottom: 1px solid #bbb; margin-bottom: 0; }
.txt_reports .color-blue p { color:#000;letter-spacing:-1px; font-weight:normal;text-align: center}
.txt_reports .color-blue p strong {color: #b00083}
.txt_reports p.blueline {color:#3f023e; background: #f3e9f4; border-radius: 10px; font-size:1em;padding-bottom:0;margin-bottom:10px; line-height:1.4em; padding:15px;text-align: center}
.txt_reports .color-blue p.blueline.nobox {border:none}
.txt_reports .color-blue p.txt_reports_result {text-align:left; font-size:.9em; padding-bottom:15px}
.txt_reports p.color-primary-1 { padding-bottom:8px; font-weight:bold}

/** 성격검사 테이블 **/
div.scroll-menu { width:100%; height:auto }

.disp_process {height:auto; background:#FFF}
.disp_process li { list-style:none; float:left; width:33.33%;height:65px; background-color: #FFF; border-bottom:3px solid #bbb; text-align: center; padding-top: 10px}
.disp_process li.ontab { background:url('/images/tab_arrow.png') no-repeat; background-position:right 30px top 20px; background-color: #FFF;color:#000; font-weight:bold;  border-bottom:4px solid #ab0082;}
.disp_process li.process3.ontab {background:url('/images/tab_arrow.png') no-repeat; background-position:right 30px top 20px;border-bottom:2px solid #AD169A;}

div.scroll-menu .disp_tit {  display: block; clear:both;background:#f1f1f1; height:auto; overflow:hidden; padding:8px 0; text-align:center;  margin-bottom:0}
div.scroll-menu .disp_tit .fr.half li { list-style:none;font-size:.9em;color: #777;line-height: 1.2em;}
div.scroll-menu .disp_tit .fr.half li:lang(en) {font-size:.85em;} 
div.scroll-menu .disp_tit .fr.half li:nth-child(3) { padding-top:10px;}
div.scroll-menu .disp_tit .fr.half:lang(zh) li {padding-top:5px}
div.scroll-menu .disp_tit .fr.half:lang(jp) li {padding-top:0}

.disp_process li span.icon_me, .disp_process li span.icon_ideal {display:inline-block;font-size:.9em; margin-right: 10px;padding:4px 10px; border-radius:8px; }
.disp_process li span.icon_me { border:1px solid #bbb;background:#FFF; color:#002c53; }
.disp_process li span.icon_ideal {border:1px solid #ab0082; background:#fceefd; color:#ab0082; }
.disp_process li span.process_txt {display: inline-table; overflow:hidden;font-size:1.6em;}


#disp_q_table li {list-style:none}
.fl.half  {float:left; width:62%;  font-weight:bold; font-size:1.1em; letter-spacing:-1px;}
.fl.half:lang(zh) { font-weight:normal}
.fr.half  {float:right; width:38%}
/** 라디오버튼 위치 **/
.fr.half li {float:left;width:18%; text-align:center;font-size:14px;}
.fr.half li:first-child {width:23%}
.fr.half li:nth-child(2) {width:23%}
.fr.half li label {margin-right: 0}
.fl.half dt { float:left;display:inline-block; width:25px;padding:3px 0 6px 0; color:#000; margin:0 10px 0 0; text-align:center; border-radius:6px; font-size:.85em; font-weight:normal; margin-left:15px }
.fl.half dd {}
.fr input[type="radio"] {width:20px; height:20px}
div.disp_q_1, div.disp_q_2, div.disp_q_3, div.disp_q_4, div.disp_q_5 { border-bottom:1px solid #ddd; height:auto; overflow:hidden; padding:8px 0; background:#FFF;color:#000;}
div.disp_q_3, div.disp_q_4, div.disp_q_5 { color: #740B96}

.tit_question p{ font-size:1.1em; text-align:center}
.center.btn_area { padding-top: 30px}
.center.btn_area button.blue {background: #ced9df; color: #000}

/** 성격검사 결과 **/
.bgtop_report{ background:url('/images/report_topimg.png') no-repeat; background-size:100%; height:65px; overflow:hidden;}
.bg_report { background:url('/images/report_bgimg.png') repeat-y; background-size:100%; height:100%; overflow:hidden; padding:10px 40px 0 40px}

.reports_result_info {height:auto; overflow:hidden; margin-bottom:30px; background:#F1F1F1; padding:30px 10px}
.reports_result_info div.fl.width60 {float:left; width:55%}
.reports_result_info div.fr.width40 {float:left; width:45%; padding-left:15px}
.reports_result_info div.fr.width40 li { list-style:none; padding-bottom:8px}
.reports_result_info div.fr.width40 li span {display:inline-block; border-radius:50%; background:#7F8DA8; color:#fff; text-align:center; width:10px; height:10px; margin-right:8px}


h2.tit_report_result {font-size:1.6em; font-weight:bold; color:#000; clear:both;padding-bottom:10px; padding-left:20px}
h2.tit_report_result.me {color:#4059ab; padding-bottom:10px;}
h2.tit_report_result.you { color:#4092ab; padding-bottom:10px;}
h2.tit_report_result.wedd { color:#ac1f73; padding-bottom:10px;}

div.reports_result {height:auto; overflow:hidden; margin-bottom:35px}
div.reports_result ul {	border:1px solid #bbb; border-radius: 20px; height:auto; overflow:hidden; padding:10px 0; margin-bottom: 10px}

div.reports_result li {float:left;list-style:none;overflow:hidden; padding:6px 0;text-align:center; vertical-align:middle;}
div.reports_result li:first-child {width:10%; color:#1d3e9d; font-size:1.1em; font-weight:bold }
div.reports_result li:nth-child(2) {width:32%; padding:0 10px }
div.reports_result li:last-child {width:56%; text-align:left; padding-right:10px}

div.reports_result li p.reports_tt{text-align:left; padding-bottom:2px; padding-left:5px; font-size:.9em}
div.reports_result li .reports_step_bg {height:22px;color:#000; width:95%;}
div.reports_result li .reports_step_bg span {background:#dbdbdb;  box-sizing:border-box;display:inline-block; width:10%; height:22px; line-height:22px; text-align:center; font-size:.8em; color:#999; padding:0; letter-spacing:-1px; float:left}
div.reports_result li .reports_step_bg span:first-child {border-top-left-radius:8px; border-bottom-left-radius:8px}
div.reports_result li .reports_step_bg span:last-child {border-top-right-radius:8px; border-bottom-right-radius:8px}
div.reports_result li .reports_step_bg span.stepcheck, div.reports_result.you li .reports_step_bg span.stepcheck { background: #ac0082; color:#FFF !important } 
div.reports_result.wedd li .reports_step_bg span.stepcheck {background:url('/images/icon_stepcheck_you.png') no-repeat center 5px; color:#ac1f73 !important; font-size:5px !important; width:30px;     background-size: 14px;} 

.wedd_txt { padding: 0 0 20px 20px}
.wedd_txt img {width: 14px; vertical-align: middle; margin-right: 3px}
.wedd_txt span.graph { display: inline-block; width: 10px; height: 15px; background: #dfa9ca;}

/** 이성 결과 **/
div.reports_result.you li:first-child {color:#4092ab;}
div.reports_result.you li p.reports_step_bg {background:#e2f7f2;}

/* 결혼 결과 **/
div.reports_result.wedd li:first-child { color:#ac1f73; }
div.reports_result.wedd li p.reports_tt{  font-weight:bold}
div.reports_result.wedd li p.reports_step_bg {border-radius:0; background:#fbeff7; margin-top: 8px }
div.reports_result.wedd span.graph_bg { background:#dfa9ca; color:#fff}

button.blue.btn_pnsl_end { border-radius: 30px;  width: 30%; background: #941776; margin: 0 auto}

.top_footer.char .container {width: 32%; margin: 0 auto; padding: 15px 0}
footer .top_footer.char .fl {width: 50%}
footer .top_footer.char address p{font-size: 1.3em}

/* 모바일 적용 **/
@media only screen and (max-width: 767px) {
	/**성격검사 **/
	div.containerwrap > div.container.report {width: 100%; padding: 0}
   div.top_graybg.gray.report h1{display: none}
	.top_graybg.gray.char.user {display: none}
   .char_area .center span:last-child {padding-left: 0}
   .char_area .center span:last-child img {width: 60%;}
	.scroll-fixed{ position: fixed; top: 0px;  padding:0; left:0; z-index:100}
	.disp_process { padding-top: 10px}
	div.scroll-menu .disp_tit { display: none}
	.disp_process li {height:68px;width: 32%; padding-top: 0}
	.disp_process li:last-child { width:36%; }
	.disp_process li span.process_txt {display: block;    font-size: 1.3em;}
	.disp_process li.ontab{background-position: center bottom 5px;}
	.disp_process li span.icon_me, .disp_process li span.icon_ideal {display:inline-block;    font-size: .8em; margin-right: 0; padding: 0 6px; }
	
   .top_footer.char .container { padding: 15px}
   footer .top_footer.char .fl{width: 100%}
   
	div.scroll-menu {text-align: center; padding:0px; height:auto; overflow:hidden; margin:0;}
	div.scroll-menu .fl.half{display:none}
	
	
	.fl.width20 {width:100%;padding-right:0}
	.fl.width20 h1 {display:none}
	.fl.width20 .btn_reg { text-align:center;  }
	.fr.width80 {width:100%; padding:0 10px; margin-top:10px}
	.fr.width80 li {width:100%}
	.fr.width80 li.center_global {width:100%; padding-left:10px; padding-right:10px}
	.fr.width80 li.center_global div.fl, .fr.width80 li.center_global div.fr { width:100%}
	.fr.width80 li.center_global div.fr { margin-top:10px}
	
	ol.command10 {padding-left:20px;overflow:hidden}
	.service_area { padding-bottom:10px}
	
	ul.disc.mt10 { margin-left:5px; margin-right:0}
	.fw600.tac.fs15em { font-size:1.2em}
	.personality_area {width: 100%; padding: 15px; margin-top: 10px}
   .personality_area .signup_form dt:lang(en), .personality_area .signup_form dd:lang(en) {width: 100%}
   .personality_area .signup_form dt { padding-left: 0; padding-bottom: 8px}
	.personality_area .signup_form dl { border-bottom: 1px solid #ddd;}
	.personality_area .signup_form dl:last-child {border-bottom: none}
   
	/* 성격검사 */
	div.top_graybg.gray.report { background-image:none,linear-gradient(90deg,#e3d9fa 10%,#e3d9fa 40%,#d0f3fc 100%);}
	div.top_graybg.gray.report h2 { font-size:1.7em; margin-bottom:15px; text-align:center;}
	div.top_graybg.gray.report p {display:none}
	div.top_graybg.gray.report p.mobile_show { display:block; text-align:center;}
	.txt_reports {font-size:1.1em;  height:auto; overflow:hidden; padding: 15px}
   .txt_reports p{line-height:1.6em;text-align: left !important}
	.txt_reports .color-blue p.blueline {}
	div.containerwrap > div.container.result_area .txt_reports {padding: 0}
	#disp_question div.tablewrap {margin-top:0; border:none;}
	.fl.half, .fr.half  {width:100%; }
   .fr.half  {height:auto;padding: 0 0 0 30px;  }
  	.fl.half {padding:5px 10px 0 0; line-height:15pt; }
	.fl.half:lang(ko) {letter-spacing: -0.1em}
	.fl.half dt { padding-top: 0; padding-bottom: 30px}
	.fl.half dd {padding-right:10px}
	.fr.half li {font-size:12px; width:17%;vertical-align:top !important; }
   .fr.half li:first-child {width:25% }
   .fr.half li:nth-child(3) {width:16%}
	.fr.half li label.none { display:block !important; color:#434343; line-height:13px}
   .fr.half input[type="radio"] {margin-top:-85px;}
	.fr.half li label { margin-top:30px; }
	.fr.half:lang(ko) li label {letter-spacing: -0.15em}
   .fr.half:lang(en) input[type="radio"], .fr.half:lang(jp) input[type="radio"] {margin-top:-100px;}
	.fr.half:lang(en) li label, .fr.half:lang(jp) li label {height: 22px;}
   #disp_q_table  .fr.half li:nth-child(even) label { color:#fff }
	
	div.container.graph button.big {width:90%; font-size: 1.2em; padding:10px 0}
	div.disp_q_1, div.disp_q_2, div.disp_q_3, div.disp_q_4, div.disp_q_5  { margin:5px 0; }
	
	.txt_reports p.clor-gray br{display:none}
	
	.white-box.tac.fw600 { padding:10px !important}
	
	.single_sign { width:100%}
	.single_sign th {width:25%;}
	.single_sign td {width:75%; }
	.single_txt { line-height:20pt; font-size:1em; margin-top:0}
	
	/** 성격검사 결과 **/
	div.containerwrap > div.container.result_area {width: 95%}
	.txt_reports p.blueline { text-align: left}
	.container.pt50 {padding-top:20px !important}
	.txt_reports .color-blue p.blueline.nobox { display:none}
	.wedd_txt { padding-left: 10px}
	
	.bgtop_report{ display:none}
	.bg_report { background:none;background-size:100%; height:100%; overflow:hidden; padding:10px 0 0 0}
	.bgend_report{display:none}

	.reports_result_info {padding:10px 0 0 0}
	.reports_result_info div.fl.width60 {float:left; width:100%; padding-bottom:15px}
	.reports_result_info div.fr.width40 {float:left; width:100%; padding-left:0}
	h2.tit_report_result { padding-bottom:0; padding-left: 0; font-size: 1.5em; text-align: center}
	h2.tit_report_result.me, h2.tit_report_result.you { font-size:1.4em}

	div.reports_result ul {	padding:10px; border-radius: 14px	}

	div.reports_result li:first-child{width:36%; font-weight:bold; font-size:1.1em; text-align:left; margin-bottom:10px;  }
	div.reports_result li:nth-child(2) {width:64%;font-size:1.1em; float: left; padding: 0}
	div.reports_result li:nth-child(3) {width:100%; padding:15px 0 0 0; line-height: 1.2em}
	div.reports_result li:nth-child(4), div.reports_result:lang(en) li:nth-child(4)  {clear:both;width:100%; text-align:left; padding:20px 10px 10px 10px}
	
	div.reports_result li p.reports_step_bg, div.reports_result.you li p.reports_step_bg, div.reports_result.wedd li p.reports_step_bg { width:100%; height: 20px}
	div.reports_result li p.reports_step_bg span {display:inline-block; font-size: 0.7em; height: 20px; line-height: 20px }
	
	div.reports_result.wedd li .reports_step_bg span.stepcheck { background-size: 12px; width: 20px}
	
	div.reports_userbox .left {float:left; background:url('/images/graph_step3.png') no-repeat; background-size:100% 180px;  text-align:left; padding:0 0 0 0; height:auto; font-size:1.1em}
	div.reports_userbox .left p.txt_3step {clear:both; padding-top:200px}
	div.reports_userbox .left p.txt_3step br { display:none}
	div.reports_userbox .right { float:right}
	button.blue.btn_pnsl_end { width: 80%}
}

@media all and (max-width:376px) {
}


/*  PC에서는 항상 펼쳐진 상태로 */
@media only screen and (min-width: 1024px) {
	
	/* 성격검사 */
   div.headerwrap.char, div.headerwrap.char div.header{height: 100px !important; min-height: 100px}
   div.headerwrap.char div.header > div.header-main {top:10px}
	.char_area {width: 80%; margin:30px auto}
	div.top_graybg.gray.char h1 { display: block;color: #ab0082;  font-weight: bold; padding: 0; font-size:2.6em;}
	div.top_graybg.gray.char .center { font-size: 1.2em}
	.char_area .center span:last-child img, .char_area .char_ban img {width: auto}
   .char_area .char_ban:lang(ko) span:last-child { padding-top: 25px}
	.char_area .char_ban {width:80%; padding-top: 15px}
	.char_area .char_ban span{padding: 6px 20px; }
	.char_area .char_ban .txt{display: inline-block;font-size: 1.4em; color: #716e6e }
	.char_area .char_ban strong{ font-size: 2em;}
	.char_area .btn { padding-top: 40px}
	.char_area .btn button { padding: 20px; font-size: 1.6em; border-radius: 40px; width: 50%; text-align: center}
	.tabarea .signup_form {border:none}
	
}