@charset "utf-8";
/* *******************************************************
 * filename : common_responsive.css
 * description : 공통 컨텐츠 반응형 CSS
 * date : 2021-11-30
******************************************************** */

/* ========================================================
 * SUB COMMON 
======================================================== */
/* -------- 공통 레이아웃(휠)  -------- */
@media all and (max-height:900px) {
	.wheel-container{}
}
@media all and (max-height:768px), (max-width:1281px) {
	.wheel-container{height:auto; display:block; min-height:auto}
	.wheel-inner-container{display:block;}
}

/* -------- 공통 스크롤바  -------- */
@media all and (max-width:1280px){
	.custom-scrollbar-wrapper .scroll-object{max-width:100%;}
}
@media all and (max-width:800px){
	.custom-scrollbar-wrapper{position:relative;margin-right:-15px; cursor:move}
	.custom-scrollbar-wrapper .scroll-object{max-width:none; width:800px; }
	.custom-scrollbar-cover{display:block; position:absolute; top:0px; left:0px; right:0px; bottom:0px; background-color:rgba(0,0,0,0.5)}
	.custom-scrollbar-cover .scroll-cover-txt{position:absolute; top:50%; left:0; width:100%; text-align:center; color:#fff; font-size:300; font-size:15px;}
	.custom-scrollbar-cover .scroll-cover-txt i{font-size:30px; display:block; margin-bottom:20px; }
}

/* -------- 공통 :: 탭 -------- */
@media all and (max-width:1220px){
	.sub-tab-list-style .area{padding:0}
}
@media all and (max-width:1024px){
	/* Tab Fixed Move*/
	.sub-tab-list-style.top-fixed{top:80px;}
}
@media all and ( max-width: 800px ){
	/* Tab 공통 스타일 */
	.sub-tab-wrapper-style,
	.sub-tab-list-style.top-fixed,
	.sub-tab-list-style ul li a{height:40px; }
	.sub-tab-list-style ul li a em{font-size:13px}
	/* Tab Fixed Move*/
	/* Mobile Tab Drop Menu */
	.sub-drop-menu-style{position:relative;}
	.sub-drop-open-btn-style{display:block; position:relative; padding:0 15px; height:40px; line-height:40px; font-size:15px; background-color:#333; box-sizing:border-box;}
	.sub-drop-open-btn-style span{color:#fff; }
	.sub-drop-open-btn-style .arrow{color:#fff; position:absolute; top:50%; right:15px; margin-top:-7px}
	.sub-drop-open-btn-style.open .arrow{transform:rotate(180deg)}
	.sub-drop-menu-style ul{display:none; margin:0; height:auto; position:absolute; top:100%; left:0px; right:0px; background-color:#fff; border:1px solid #ddd; border-top:0; z-index:11; box-sizing:border-box;}
	.sub-drop-menu-style ul li{position:static; display:block; float:none; border:0; border-top:1px solid #eee; width:auto; background-color:transparent}
	.sub-drop-menu-style ul li:first-child{border-top:0; border-left:0}
	.sub-drop-menu-style ul li a{display:block; width:auto; height:auto; padding:10px 15px; border:0;}
	.sub-drop-menu-style ul li a em{font-size:13px;}
	.sub-drop-menu-style ul li.selected a{background-color:transparent;}
	.sub-drop-menu-style ul li.selected a em{color:#f57f20; font-weight:600; }
}
@media all and (max-width:480px){
	/* Tab Fixed Move*/	
	.sub-tab-list-style.top-fixed{top:60px;}
}


/* ****************** 공통 :: 스크롤아이콘 ********************** */
@media all and (max-width:1700px){
	.cm-scroll-icon .scroll-icon-wrapper{max-width:none; margin:0 30px}
	.cm-scroll-icon .scroll-icon-inner{width:20px; margin-right:0}
}
@media all and (max-width:1500px){
	.cm-scroll-icon .scroll-icon-wrapper{margin:0px}
}

/* ****************** 공통 :: splitting hover ********************** */
@media all and (max-width:1500px){
	.cm-sub-menu-wrapper.area{max-width:none; }
	.area .cm-sub-menu-wrapper.area{padding:0}
	#cmSubMenuListCon.top-fixed .cm-sub-menu-wrapper.area{padding:0 5%}
}
@media all and (max-width:1280px){
	#cmSubMenuListCon{margin-bottom: 9.3750vw;}
	#cmSubMenuListCon.mb60{margin-bottom:4.6875vw;}
	.cm-sub-menu-container{height:40px; }
	.cm-sub-menu-list-con .cm-sub-menu-item .cm-sub-menu-btn{height:40px; padding:0 24px; font-size:1.066em;}
	.cm-sub-menu-indicator{height:40px;}
}
@media all and (max-width:767px){
	#cmSubMenuListCon.top-fixed .cm-sub-menu-list-con .cm-sub-menu-item .cm-sub-menu-btn{padding:0 20px;}
}
/* ****************** 공통 :: Button ********************** */
@media all and (max-width:1920px){
	/* -------- 공통 :: 이전,다음 버튼 -------- */
	.cm-arrow-btn{width:4.166666em; height:4.166666em}
}

/* ****************** 공통 :: 타이틀 ********************** */
@media all and (max-width:1920px){
	.cm-sub-con-tit{font-size:3.333vw;}
}
@media all and (max-width:1280px){
	.cm-sub-con-tit{font-size:4.2969vw;}
}
@media all and (max-width:768px){
	.cm-sub-con-tit{font-size:2.615em;}
}