@charset "UTF-8";

.wrap_quicklink{height:auto !important;width:100%;}
.wrap_quicklink h2{display:none;}
.wrap_quicklink .slick-slide a{padding:3.5rem 3rem;margin-bottom:-1px;border-bottom:1px solid rgba(255,255,255,0.3);display:flex;align-items:center;}
.wrap_quicklink .slick-slide a::after{width:3.3rem;height:3.3rem;background:url(../images/next_1_w.png) no-repeat right center;content:"";display:block;margin-left:auto;transform:scale(0);transition:0.3s;}
.wrap_quicklink .item_1{height:6rem;display:flex;align-items:center;}
.wrap_quicklink .item_1 img{max-height:100%;display:inline;transition:all 0.7s cubic-bezier(0.2, 0, 0.3, 1);}
.wrap_quicklink .item_2{margin-left:4rem;}
.wrap_quicklink .text_1{font-size:2.5rem;color:#FFF;font-family:'sl';line-height:1.2;transition:0.3s;}
.wrap_quicklink .text_2{display:none;}

.wrap_quicklink .control{}
.wrap_quicklink .control .numbering{display:none;}
.wrap_quicklink .control .prevNext button{width:4rem;height:4rem;font-size:0;position:absolute;top:calc(50% - 2rem);}
.wrap_quicklink .control .prevNext .prev{background:url(../images/prev_1_w.png) no-repeat left center;left:1rem;}
.wrap_quicklink .control .prevNext .next{background:url(../images/next_1_w.png) no-repeat right center;right:1rem;}

@media all and (max-width:1280px){
	.wrap_quicklink{padding:2rem;}
	/* 2열(밭 전) 배치 - 항목 개수 무관. 바깥쪽 선은 -1px 오버플로로 잘라냄 */
	.wrap_quicklink .slick-list{width:100%;overflow:hidden;}
	.wrap_quicklink .slick-track{width:100% !important;transform:none !important;}
	/* slick.min.css 가 뒤에 로드돼 .slick-initialized .slick-slide{display:block} 로 덮으므로 !important 필요 */
	.wrap_quicklink .slick-slide{width:calc(100% + 1px) !important;display:flex !important;flex-wrap:wrap !important;float:none !important;height:auto !important;margin-bottom:-1px;}
	.wrap_quicklink .slick-slide > div{width:50%;padding:2rem 0;border-right:1px solid rgba(255,255,255,0.3);border-bottom:1px solid rgba(255,255,255,0.3);}
	.wrap_quicklink .slick-slide > div li{height:100%;}
	.wrap_quicklink .slick-slide a{padding:0 2rem;margin-bottom:0;border-bottom:0;flex-direction:column;height:100%;justify-content:center;}
	.wrap_quicklink .slick-slide a::after{display:none;}
	.wrap_quicklink .item_1{height:4.5rem;}
	.wrap_quicklink .item_2{margin-left:0;margin-top:2rem;}
	.wrap_quicklink .text_1{font-size:2rem;text-align:center;}
	/* 비주얼 슬라이더 컨트롤(01/02 <||>)을 문구 아래 · 퀵링크 위로.
	   원본은 template_5_visual/css/style.css 의 .wrap_visual .control{bottom:18rem}
	   (공용 파일이라 손대지 않고 이 파일에서 덮어씀 - 로드 순서상 이 파일이 뒤)
	   아래 값은 JS 미동작시 폴백(항목 4개=2행 기준). 실제 위치는 view.jsp 의 jf_ctlPos350() 이 항목 수만큼 계산 */
	.wrap_visual .control{top:auto;bottom:31rem;}
	/* 문구~퀵링크 사이 공간 확보용 축소 */
	.wrap_visual .control .pannel button{width:3rem;height:3rem;}
	.wrap_visual .control .numbering{font-size:1.2rem;margin-right:1.5rem;}
}
@media all and (max-width:768px){
	.wrap_quicklink .item_1{height:3rem;}
	.wrap_quicklink .item_2{margin-top:1rem;}
	.wrap_quicklink .text_1{font-size:1.6rem;}
	.wrap_visual .control{bottom:33rem;}
}
/* 모바일(CMS 반응형설정 Mobile 구간과 동일): 2열이면 긴 제목이 감겨 칸만 커짐 -> 1열 가로형(아이콘 좌 + 글자 우) */
@media all and (max-width:768px){
	.wrap_quicklink .slick-slide > div{width:100%;border-right:0;padding:1.2rem 0;}
	.wrap_quicklink .slick-slide a{flex-direction:row;justify-content:flex-start;padding:0 1rem;}
	.wrap_quicklink .item_1{height:3.6rem;width:5rem;justify-content:center;}
	.wrap_quicklink .item_2{margin-top:0;margin-left:1.6rem;}
	.wrap_quicklink .text_1{font-size:1.7rem;text-align:left;}
}

.wrap_quicklink .slick-slide a:hover .item_1 img{background:rgba(0,0,0,0.3);transform:rotatey(180deg);}
.wrap_quicklink .slick-slide a:hover::after{transform:scale(1);}
.wrap_quicklink .slick-slide a:hover .text_1{color:#8dc63f;}