/* performance */
.perf_search_wrap {position:relative; width:100%; padding-top:30px;}
.perf_info {position:relative; width:100%; padding-top:40px; padding-bottom:15px; color:#666; font-size:16px; font-weight:600; letter-spacing:-0.5px; line-height:100%; text-align:right;}
.perf_col {color:#000; font-weight:800;}
.perf_none {position:relative; width:100%; border:solid 1px #d2d2d2; padding:80px 0px; color:#666; font-size:16px; font-weight:600; letter-spacing:-0.5px; line-height:150%; text-align:center;}
.perf_list_wrap {position:relative; width:100%; padding-top:26px; border-top:solid 3px #000;}
.perf_list_wrap > ul > li {position:relative; float:left; width:calc(50% - 10px); margin-right:20px; margin-bottom:26px; border:solid 1px #d2d2d2; padding:20px;}
.perf_list_wrap > ul > li:nth-child(2n + 2) {margin-right:0px;}
.perf_list_imgbox {position:relative; float:left; width:228px; height:390px;}
.perf_list_img {position:relative; width:228px; height:320px; box-shadow:0px 0px 15px rgba(0,0,0,.2); background-position:50% 50%; background-size:cover; background-repeat:no-repeat;}
.perf_list_bt {position:relative; width:100%; height:60px; margin-top:10px; border:solid 1px #d2d2d2; background:url("../img/comm/comm_arr_r.svg") no-repeat calc(100% - 15px) 50%; background-size:8px; transition:all 0.3s ease 0s;}
.perf_list_bt:hover {border:solid 1px #666;}
.perf_list_bt a {display:block; width:100%; height:58px; color:#000; font-size:15px; font-weight:400; letter-spacing:-0.5px; line-height:58px; text-align:center;}
.perf_list_infobox {position:relative; float:left; width:calc(100% - 228px); padding-left:40px;}
.perf_list_info_tit {position:relative; width:90%; color:#000; font-size:20px; font-weight:600; letter-spacing:-0.5px; line-height:160%; padding-top:20px; margin-bottom:25px; word-break:keep-all; display:-webkit-box; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.perf_list_info_txt {position:relative; width:100%; color:#666; font-size:16px; font-weight:400; letter-spacing:-0.5px; line-height:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:13px;}
.perf_col_2 {color:#000; font-weight:800; padding-right:8px;}
.perf_cat {position:absolute; height:40px; left:-10px; top:-10px; color:#fff; font-size:15px; font-weight:600; letter-spacing:-0.5px; line-height:40px; text-align:center; background:#000; padding:0px 18px; border-radius:20px;}

.perf_list_bt_2 {position:relative; display:none; float:left; width:100%; height:56px; margin-top:15px; border:solid 1px #d2d2d2; background:url("../img/comm/comm_arr_r.svg") no-repeat calc(100% - 15px) 50%; background-size:7px; transition:all 0.3s ease 0s;}
.perf_list_bt_2 a {display:block; width:100%; height:56px; color:#000; font-size:14px; font-weight:600; letter-spacing:-0.5px; line-height:54px; text-align:center;}

/* page num */
.list_page_wrap {position:relative; width:100%; height:29px; box-sizing:border-box; text-align:center; margin-top:10px;}
.list_pagenum {position:relative; display:inline-block; height:29px;}
.list_pagenum ul li {position:relative; float:left; width:29px; height:29px; line-height:100%; padding-top:8px; box-sizing:border-box; border-top:solid 1px #f2f2f2; border-left:solid 1px #f2f2f2; border-bottom:solid 1px #f2f2f2; text-align:center; cursor:pointer; color:#afafaf; font-size:12px; background:rgba(255,255,255,.5);}
.list_pagenum ul li:nth-last-child(1) {border-right:solid 1px #f2f2f2;}
.list_pagenum ul li:hover {background:#fafbfe;}
.list_pagenum ul li.page_on {background:#fafbfe; color:#666; font-weight:600;}
.list_pagenum ul li.ar_l {background:url("../img/comm/comm_arr_l.svg") no-repeat 50% 9px; background-size:6px;}
.list_pagenum ul li.ar_r {background:url("../img/comm/comm_arr_r.svg") no-repeat 50% 9px; background-size:6px;}

/* view */
.perf_v_title {position:relative; width:80%; color:#000; font-size:24px; font-weight:600; letter-spacing:-0.7px; line-height:150%; padding-top:50px; padding-bottom:30px; word-break:keep-all;}
.perf_v_infowrap {position:relative; width:100%; border-top:solid 3px #000; border-bottom:solid 3px #000; padding:30px 0px;}
.perf_v_imgbox {position:relative; float:left; width:330px; height:463px; box-shadow:0px 0px 15px rgba(0,0,0,.2); background-position:50% 50%; background-size:cover; background-repeat:no-repeat;}
.perf_v_infobox {position:relative; float:left; width:calc(100% - 330px); padding-left:50px;}
.perf_v_info {position:relative; width:100%; margin-bottom:5px;}
.perf_v_cat {position:relative; display:inline-block; vertical-align:top; border:solid 1px #e0e0e0; height:40px; line-height:38px; border-radius:20px; padding:0px 15px;  color:#000; font-size:15px; font-weight:600; letter-spacing:-0.5px; margin-right:8px;}
.perf_v_txt {position:relative; display:inline-block; vertical-align:top; font-size:16px; font-weight:600; letter-spacing:-0.5px; color:#7f7f7f; padding-top:10px; padding-bottom:6px;}

.perf_v_subinfo {position:relative; width:100%; margin-top:60px;}
.perf_v_subinfo_tit {position:relative; width:100%; color:#000; font-size:19px; font-weight:600; letter-spacing:-0.5px; line-height:100%; padding-bottom:20px; border-bottom:solid 1px #e2e2e2;}
.perf_v_subinfo_txt {position:relative; width:80%; min-height:100px; color:#666; font-size:16px; font-weight:400; letter-spacing:-0.5px; line-height:180%; padding-top:25px; word-break:keep-all; overflow:hidden;}
.perf_v_subinfo_txt img {display:block; max-width:100%; height:auto; margin-top:20px; margin-botom:20px;}
.perf_v_subinfo_none {position:relative; width:100%; color:#666; font-size:16px; font-weight:600; letter-spacing:-0.5px; line-height:100%; padding-bottom:20px; padding-top:50px; text-align:center;}

/* form */
.inputForm_search
{
	font-size:16px;
	font-weight:600;
	letter-spacing:-0.5px;
	color:#666;
	width:calc(100% - 70px);
	height:70px;
	background-color:#fafbfc;
	border-radius:0px;
    border:solid 1px #dbdcdc;
	border-right:none;
	padding-left:20px;
    transition:all 0.3s ease 0s;
}
input.inputForm_search::-webkit-input-placeholder{color:#666; font-size:16px; font-weight:600; letter-spacing:-0.5px;}
input.inputForm_search::-moz-placeholder{color:#666; font-size:16px; font-weight:600; letter-spacing:-0.5px;}
input.inputForm_search:-moz-placeholder{color:#666; font-size:16px; font-weight:600; letter-spacing:-0.5px;}
input.inputForm_search:-ms-input-placeholder{color:#666; font-size:16px; font-weight:600; letter-spacing:-0.5px;}
.inputForm_search:focus {border:solid 1px #4e5151; border-right:none;}
.inputForm_search_bt {float:right; width:70px; height:70px; background:#4e5151 url("../img/performance/search.svg") no-repeat 50% 50%; cursor:pointer; background-size:18px; transition:all 0.2s ease 0s;}
.inputForm_search_bt:hover {background:#404444 url("../img/performance/search.svg") no-repeat 50% 50%; background-size:18px;}

@media screen and (max-width: 1550px) {
	.perf_list_wrap > ul > li {width:100%; margin-right:0px; margin-bottom:20px;}
	.perf_list_imgbox {width:190px; height:336px;}
	.perf_list_img {width:190px; height:266px;}
	.perf_list_infobox {width:calc(100% - 190px);}
	.perf_v_subinfo_txt {width:100%;}
}

@media screen and (max-width: 1200px) {
	.perf_v_title {width:100%;}
	.perf_v_imgbox {width:260px; height:365px;}
	.perf_v_infobox {width:calc(100% - 260px); padding-left:40px;}	
}

/* ==========================================
   2. 태블릿 스타일 (768px ~ 1024px)
   - 아이패드, 갤럭시 탭 등
   ========================================== */
@media screen and (max-width: 1024px) {
	.inputForm_search {font-size:16px; width:calc(100% - 60px); height:60px;}
	.inputForm_search_bt {width:60px; height:60px;}
	.perf_list_imgbox {width:170px; height:298px;}
	.perf_list_img {width:170px; height:238px;}
	.perf_list_infobox {width:calc(100% - 170px);}	
	.perf_list_bt {height:50px; margin-top:10px;}
	.perf_list_bt a {height:48px; line-height:48px;}
	
	.perf_v_title {font-size:20px; letter-spacing:-0.5px; padding-top:35px; padding-bottom:25px;}
	.perf_v_imgbox {width:230px; height:323px;}
	.perf_v_infobox {width:calc(100% - 230px); padding-left:30px;}	
	.perf_v_subinfo_tit {font-size:18px;}
}

/* ==========================================
   3. 모바일 스타일 (767px 이하)
   - 스마트폰 세로/가로 모드
   ========================================== */
@media screen and (max-width: 767px) {
	.perf_no_tit {display:none;}
	.perf_search_wrap {padding-top:0px;}
	.inputForm_search {font-size:15px; width:calc(100% - 54px); height:54px;}
	input.inputForm_search::-webkit-input-placeholder{font-size:15px;}
	input.inputForm_search::-moz-placeholder{font-size:15px;}
	input.inputForm_search:-moz-placeholder{font-size:15px;}
	input.inputForm_search:-ms-input-placeholder{font-size:15px;}
	.inputForm_search_bt {width:54px; height:54px; background-size:14px;}
	.inputForm_search_bt:hover {background-size:14px;}
	.perf_info {padding-top:30px; padding-bottom:13px; font-size:15px;}
	
	.perf_list_wrap > ul > li {margin-right:0px; margin-bottom:15px; box-shadow:0px 0px 10px rgba(0,0,0,.05);}
	.perf_list_imgbox {width:100%; height:160px;}
	.perf_list_img {width:100%; height:160px;}
	.perf_list_bt {display:none;}
	.perf_list_infobox {width:100%; float:none; padding-left:0px;}
	.perf_list_info_tit {font-size:17px; padding-top:25px; margin-bottom:17px; line-height:150%;}
	.perf_list_info_txt {font-size:15px; margin-bottom:10px; font-weight:600;}
	.perf_col_2 {font-weight:600; padding-right:8px;}
	.perf_cat {font-size:13px;}
	.perf_none {padding:60px 0px; font-size:15px;}
	.perf_list_bt_2 {display:block;}
	
	.perf_v_title {font-size:18px; padding-top:0px;}
	.perf_v_infowrap {padding:25px 0px;}
	.perf_v_imgbox {width:100%; max-width:450px; height:auto; aspect-ratio: 1 / 1.4;}
	.perf_v_infobox {width:100%; padding-left:0px; margin-top:25px;}
	.perf_v_cat {height:36px; line-height:34px; border-radius:18px; padding:0px 14px; font-size:14px; margin-right:5px;}
	.perf_v_txt {font-size:15px; padding-top:8px; padding-bottom:5px;}
	.perf_v_subinfo {margin-top:50px;}
	.perf_v_subinfo_tit {font-size:17px; padding-bottom:16px;}
	.perf_v_subinfo_txt {font-size:15px; padding-top:23px; line-height:190%;}
}