@charset "utf-8";
/* *******************************************************
 * filename : content_responsive.css
 * description : 서브페이지 컨텐츠 반응형 CSS
 * date : 2022-03-14
******************************************************** */


/* ******************  서브공통 ********************** */
/* -------- 공통 스크롤바  -------- */
@media all and (max-width:1220px){
	.custom-scrollbar-wrapper .scroll-object{max-width:100%;}
}
@media all and (max-width:800px){
	.custom-scrollbar-wrapper{position:relative;margin-right:calc(-1* var(--area-padding)); cursor:move}
	.custom-scrollbar-wrapper .scroll-object{max-width:none; width:800px; }
	.cm-scroll-drag-guide {display:flex; justify-content:flex-end; margin-right:var(--area-padding); }
	.cm-scroll-drag-guide .cm-scroll-drag-inner { position: relative; width:50px; height: 50px; }
	.cm-scroll-drag-guide .cm-scroll-drag-inner:before { position:absolute; top:4px; right:0; width:100%; height:3px; background-color:#ccc; content:""; border-radius:5px;}
	.cm-scroll-drag-guide .drag-tail { position: absolute; z-index: 1; left: 0px; top: 3px; animation:moveScrollAni 3s both infinite; }
	.cm-scroll-drag-guide .drag-tail .tail{display:block; width: 25px; height: 5px; background-color: rgba(0, 0, 0, 0.7); border-radius:5px; opacity:1; }
	.cm-scroll-drag-guide .drag-tail .hand-icon{ font-size:30px; color:#aaa }
	@keyframes moveScrollAni {
		0%, 10% {
			left: 0;
			margin-left: 0px;
		}
		50% {
			left: 100%;
			margin-left: -25px;
		}
		100% {
			left: 0;
			margin-left: 0px;
		}
	}
}

/* -------- 공통 :: 탭 -------- */
@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:5rem; }
	.sub-tab-list-style ul li a em{font-size:1.3rem}
	/* Tab Fixed Move*/
	/* Mobile Tab Drop Menu */
	.sub-drop-menu-style{position:relative;}
	.sub-drop-open-btn-style{display:block; position:relative; padding:0 2rem; height:4.8rem; line-height:4.8rem; font-size:1.5rem; background-color: var(--main-color2); box-sizing:border-box; border-radius: 3rem;}
	.sub-drop-open-btn-style span{color:#fff; }
	.sub-drop-open-btn-style .arrow{color:#fff; position:absolute; top:50%; right:1.5rem; 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: #fff; z-index:11; border-radius: 3rem; box-sizing:border-box;     box-shadow: 0.6rem 0.6rem 2rem rgba(0, 0, 0, 0.16); padding: 0.5rem 0;}
	.sub-drop-menu-style ul li{position:static; display:block; float:none; border:0; border-top:1px solid #eee; margin: 0; min-width: 0; 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:1rem 2rem; border:0; border-radius: 0; background-color: transparent;}
	.sub-drop-menu-style ul li a em{font-size:13px;}
	.sub-drop-menu-style ul li.selected a {background-color:transparent; box-shadow:none}
	.sub-drop-menu-style ul li.selected a em{color:var(--main-color2); font-weight:600; }
}
@media all and (max-width:480px){
	/* Tab Fixed Move*/	
	.sub-tab-list-style.top-fixed{top:60px;}
}

/* ******************  03.INDUSTRY ********************** */
@media all and (max-width:1280px){
	/* 공통 레이아웃 */
	.industry-func-list02 li {padding: 5.4rem 4.4rem 4.5rem;}
	.industry-func-list02 li .num {right: 4.4rem;}
	
	/* 교통안전 */
	.industry01-page .industry-tab-wrapper-style {max-width: none;}
}
@media all and (max-width:800px){
	/* 공통 레이아웃 */
	.industry-tab-wrapper-style {  margin: 0 auto 7rem;}
	.industry-intro-con .tit-box .tit {font-size: 4rem;}
	.industry-intro-con .img-box:before {border-radius: 3rem;}
	.industry-intro-con .img-box span {width: 100%; padding: 0 2rem 2rem; box-sizing: border-box;}
	
	.industry-slogan-con {border-radius: 3rem;}
	.industry-slogan-con .inner {padding: 12rem 0;}
	.industry-slogan-con .inner .tit {font-size: 3rem;}
	
	/* .industry-con02 {padding-top: 12rem;} */
	.industry-con-tit {font-size: 2.8rem;}
	.industry-func-list01 li {width: 50%;}
	.industry-func-list01 li:after {display: none;}
	.industry-func-list01 li dl dd {font-size: 1.8rem;}
	.industry-func-list01 li .icon {max-height: 5.3rem;}
	.industry-func-list01 li .icon img {max-height: 100%;}
	.industry-func-list02 {padding-top: 7rem; margin: -1rem 0;}
	.industry-func-list02 li {width: 100%; margin: 1rem 0; padding: 4.4rem 3.4rem 3.5rem; }
	.industry-func-list02 li .txt-box .tit {font-size: 2.4rem;}
	.industry-func-list02 li .num {width: 5rem; height: 5rem; line-height: 5rem; font-size: 1.6rem; right: 3.4rem; bottom: 4rem;}
	
	.industry-con03 {padding: 12rem 0;}
	.industry-reference-list li {flex-wrap: wrap; height: auto; padding: 2rem;}
	.industry-reference-list li .num {width: 4rem; height: 4rem; line-height: 4rem; font-size: 1.4rem;}
	.industry-reference-list li .tit {width: calc(100% - 4rem) !important; padding: 0 0 0 2rem;}
	.industry-reference-list li .tit strong {white-space: normal; overflow: visible; text-overflow: unset;}
	.industry-reference-list li .info-list {width: 100% !important; padding-left: 6rem; margin-top: 0.5rem;}
	
	.industry-bottom-con .inner {padding: 12rem 0 11rem;}
	.industry-bottom-con .inner .txt {font-size: 3rem;}
}