.new_match {padding:0}
.new_match .container {padding: 0 0 25px 0; width: 100%}
.main_match {background-repeat: no-repeat;background-size: 100% 350px;background-position: top; padding: 10px}
.main_match.area1{background-image: linear-gradient(#9b73b9 50%,#fff);}
.main_match.area2{background-image: linear-gradient(#886c48 50%,#fff);}
.main_match.area3{background-image: linear-gradient(#5d6e90 50%,#fff);}
.main_match.area4{background-image: linear-gradient(#7f8862 50%,#fff);}
.top_graybg.gray.pc { display: block}
.evt_area {padding: 15px}

/* 아코디언 컨테이너 */
.accordion-area {
position: relative;  border-radius: 12px;  padding: 4px;
background: linear-gradient(to bottom, #835d9f 0%, #835d9f 100%); /* 바깥쪽 그라데이션 */
z-index: 0;overflow: hidden; /* 둥근 모서리 안쪽 잘림 */}
.accordion-container { background: #fff; padding:15px; border-radius: 8px}
.white-box .accordion-container {padding: 0}
.accordion-container input[type="checkbox"], .accordion-container input[type="radio"] {width: 1.4em; height: 1.4em; margin-right: 8px; }
.accordion-item.value2 input[type="checkbox"] + label, .accordion-item.self4 input[type="radio"] + label {display: inline-block;max-width: 250px;vertical-align: top;}
.accordion-container label { font-size: 1.1em}
.accordion-container select, .accordion-container #txt_start_dt, .accordion-container #txt_end_dt{ background: #fff;}
.accordion-container #txt_start_dt, .accordion-container #txt_end_dt {width: 110px !important} /*날짜입력*/
.accordion-container #sel_value_area_nation, .accordion-container  #sel_value_area_sido, .accordion-container #sel_over_nation, .accordion-container #sel_over_sido {width: 100%}

.main_match.area2 .accordion-area{background: linear-gradient(to bottom,#886c48 0%, #886c48 100%);}
.main_match.area3 .accordion-area{background: linear-gradient(to bottom, #5d6e90 0%, #5d6e90 100%);}
.main_match.area4 .accordion-area{background: linear-gradient(to bottom, #7f8862 0%, #7f8862 100%);}


/* 타이틀 */
.accordion-title {font-size: 24px;font-weight: 700;color: #fff; padding: 8px}
.accordion-title a, .accordion-title a:link {color: #fff; }
.accordion-txt {color: #fff; padding: 8px; font-size: 16px}
.accordion-txt strong {color: #fff391; font-weight: normal}

.accordion-item {border-bottom: 1px solid #ddd;}
.accordion-item.self1 span, .accordion-item.value1 span, .accordion-item.overseas1 span, .accordion-item.personality1 span{display: block; padding-bottom:10px}
.accordion-item.self2 span, .accordion-item.self3 span, .accordion-item.self4 span, .accordion-item.self6 span, .accordion-item.self7 span, 
.accordion-item.overseas2 span, .accordion-item.overseas3 span, 
.accordion-item.value2 span, .accordion-item.value3 span, 
.accordion-item.personality3 span {display: block; padding-bottom:10px}
.accordion-item.value2 input[type="checkbox"] + label, .accordion-item.self4 input[type="radio"] + label {display: inline-block;max-width: 250px; margin-right: 0; vertical-align: top;}

.accordion-item.self3 br {display: none}
.accordion-item.self5 #disp_psnlt span, .accordion-content.div_personality_list span, .accordion-item.overseas2 #div_nation span, .accordion-item.overseas2 #div_over_area_typ span {display: inline-block;width: 49%; padding-bottom: 6px} /* 항목 2단**/
.accordion-item #div_child_typ span {width: auto; display: inline-block}
.accordion-item div.area_typ, .accordion-item div.relign_typ, .accordion-item .div_v_area 
{border: none;background: #eee; padding:10px !important; margin:0 !important; width: 100%}


/* 헤더 */
.accordion-header {
cursor: pointer;padding: 14px 8px;display: flex;justify-content: space-between;align-items: center;font-size: 16px; font-weight: bold;
color: #333;transition: background 0.3s;
}
.accordion-header br {display: none !important}
.accordion-header:hover {background: #f9f9f9;}

.accordion-header .arrowup {
background: url('/images/arrow-accordion.png') no-repeat top 6px center; width: 16px; height: 16px; background-size: 100%;
transition: transform 0.3s;
}

/* 모바일 기본(접힘) */
.accordion-content {max-height: 0;overflow: hidden;transition: all 0.3s ease;background: #fafafa;color: #444;font-size: 14px;padding: 0 8px;}
.accordion-content.open {padding: 12px;max-height: 250px;}
.accordion-header.active .arrowup {transform: rotate(180deg);}

.accordion-content.open {  padding: 12px 8px;  max-height: 500px;}
.accordion-header .arrow {  font-size: 18px;  transition: transform 0.3s;}
.accordion-header.active .arrow {  transform: rotate(180deg);}
.accordion-content img { margin-left: 6px;    vertical-align: middle;}


/* 버튼 */
.submit-btn {margin-top: 24px;width: 100%;background: #9b7ab3;color: #fff;border: none;padding: 10px;font-size: 16px;border-radius: 8px;cursor: pointer;}
.submit-btn:hover {background: #a15b9b;}
.main_match.area2 .submit-btn{background: #84663f;}
.main_match.area3 .submit-btn{background: #5d6e90;}
.main_match.area4 .submit-btn{background: #7f8862;}

/** 메인 영역 **/
.main_match.area3 .accordion-txt .txt{display: none;}
.ytube_list.txt li.eventlist, .ytube_list.txt li.list_blog { width: 100% ;}
.ytube_list.txt li.eventlist div.event_photo, .ytube_list.txt li.list_blog .blog_photo {width: 30%; float: left}
.ytube_list.txt li.eventlist div.contents, .ytube_list.txt li.list_blog .item_tit {width: 70%; float: left; padding:2px 0 5px 10px ; font-size:16px; display: -webkit-box;
  -webkit-line-clamp: 3;  overflow: hidden;  text-overflow: ellipsis;  -webkit-box-orient: vertical;}
.ytube_list.txt li.eventlist div.event_photo img, .ytube_list.txt li.list_blog .blog_photo img {width: 100%; height: 90px; border-radius:14px}


@media all and (max-width:376px) {
	.ytube_list.txt li.eventlist div.event_photo img, .ytube_list.txt li.list_blog .blog_photo img { height: 80px;border-radius:10px}
}
.new_match .ytube_list.sqare3grid li{width: 33.3%}
.new_match .ytube_list.sqare3grid li.eventlist div.contents {display: }

/* 셀프서칭 서브페이지 **/
.tab_search { display: none}
.floatleft35 div.tt{font-size: 2em; color:  #AB3083; width: 100%; text-align: left; padding-left: 15px; display:none}
.floatleft35 div.txt {width: 100%; float: left;font-size: 1.2em; text-align: left;padding:0 15px 15px 15px}
.floatleft35 div.txt strong {color:#ab0082 }
.floatleft35 div.txt .setting {clear: both; padding-top: 15px; width: 100% !important; float: none !important; text-align: center}
.floatleft35 div.img {display: none}


/*  PC에서는 항상 펼쳐진 상태로 */
@media only screen and (min-width: 1024px) {
   .new_match { border-top:1px solid #bbb}
   .new_match .float_l { float: left; width: 35%; padding-top: 20px}
   .new_match .float_r { float: right; width: 63%; padding-top: 15px}
	.main_match.area1, .main_match.area2, .main_match.area3, .main_match.area4{ border-radius: 20px}
   .accordion-container { padding: 11px}
   .accordion-header { padding: 12px 8px}
   .accordion-title {font-size: 2em; }
   .accordion-txt { font-size: 1.2em;}
   .accordion-txt:lang(en) { line-height: 1.1em}
   .accordion-content, .accordion-content.open { padding-left:15px; padding-right:10px}
   .top_graybg_self .accordion-item.value2 input[type="checkbox"] + label, .top_graybg_self .accordion-item.self4 input[type="radio"] + label {display: inline;vertical-align: middle}
   .accordion-item.self5 #disp_psnlt span, .accordion-content.div_personality_list span, .accordion-item.overseas2 #div_nation span, .accordion-item.overseas2 #div_over_area_typ span { display: inline-block; width: 24.5%} /* 항목 4단**/
	.main_match .accordion-item.self5 #disp_psnlt span, .main_match .accordion-content.div_personality_list span, .main_match .accordion-item.overseas2 #div_over_area_typ span {width: 49%}
   
   .ytube_list.txt li.eventlist, .ytube_list.txt li.list_blog { width: 50%}
   .ytube_list.txt li.eventlist div.event_photo, .ytube_list.txt li.list_blog .blog_photo {width: 40%;}
   .ytube_list.txt li.eventlist div.contents, .ytube_list.txt li.list_blog .item_tit {width: 60%;display: -webkit-box;  -webkit-line-clamp: 4;  overflow: hidden;  text-overflow: ellipsis;  -webkit-box-orient: vertical;font-size:16px; }
   .ytube_list.txt li.eventlist div.event_photo img, .ytube_list.txt li.list_blog .blog_photo img {height: 100px}
	
	.tab_search { display: block; padding:  10px}
   .tab_search li{list-style: none; float: left;font-size: 1.4em; width:32.33%; margin-right: 1%; border: 2px solid #bbb; border-radius: 12px; text-align: center;margin-bottom: 8px; padding: 10px 0;}
   .tab_search li.on {color: #AB3083; font-weight: bold}
   .floatleft35 div.tt {text-align: center; display: none}
   .floatleft35 div.txt {font-size: 1.2em; padding:25px}
   .floatleft35 div.txt , .floatleft35 div.img  {width: 100%; float: none; display: block}
   .white-box .accordion-container {padding: 20px;}
	.top_graybg_self .accordion-container #sel_value_area_nation, .top_graybg_self .accordion-container  #sel_value_area_sido  {width: auto}
	
	
	
}
