@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: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:var(--main-color); 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:1220px){
	
}

/* ****************** PRODUCT ********************** */
@media all and (max-width:1220px){
	.product-top-wrap .product-txt-box .tit{font-size:55px;}
	.product-top-wrap .product-txt-box .txt br{display: none;}
}
@media all and (max-width:1024px){
	.product-top-wrap{flex-wrap:wrap;}
	.product-top-wrap .product-txt-box{width:100%; margin-top:0; padding-right:0px; margin-bottom:30px;}
	.product-top-wrap .product-txt-box .tit{margin-bottom:20px;}
	.product-top-wrap .product-txt-box .tit br{display: none; margin-bottom:20px;}
	.product-top-wrap .product-txt-box .txt{margin-bottom:20px;}
	.product-top-wrap .product-img-box{width:100%;}
	.product-slide-con .slide-box{max-width:none;}
}
@media all and (max-width:800px){
	.product-top-wrap .product-txt-box .tit{font-size:42px; margin-bottom:10px;}
	.product-top-wrap .product-txt-box .sub-tit{font-size:20px; margin-bottom:10px;}
	.product-top-wrap .product-txt-box .txt{font-size:14px; margin-bottom:15px;}
	.product-top-wrap .product-txt-box .cm-down-btn{font-size:14px; height:45px; line-height:45px; padding:0 20px;}
	.product-top-wrap .product-txt-box .cm-down-btn i{font-size:17px; top:2px;}

	/* product - spec */
	.table-tit-box .sub-txt{font-size:14px;}
	.product-spec-table thead tr th, .product-spec-table tbody td{font-size:13px; height:30px;}
	/* product - info */
	.product-info-box{padding-top:50px;}
	.product-info-con .info-item{margin-top:20px;}
	.product-info-con .info-item:first-child, .product-info-con .info-item.item-table{margin-top:40px;}
	.cm-tit-dotted{font-size:20px; padding-left:10px;}
	.cm-tit-dotted:after,.cm-tit-dotted:before{width:5px; height:5px;}
	.cm-tit-dotted:after{top:9px;}
	.cm-tit-dotted:before{top:17px;}
	.product-info-con .info-item .txt{font-size:14px;}

	.product-info-table tr th, .product-info-table tr td{font-size:13px;}
	.product-info-table colgroup col:first-child{width:120px;}

	.product-info-img{margin-top:12px;}
	.product-info-img .img-item{width:48%;  margin-bottom:20px;}
	.product-info-img .img-item .img-txt{font-size:15px; margin-top:5px;}
}
@media all and (max-width:640px){
	.thumb-slide-box .product-thumb-slide{margin:10px -5px 0; max-width:none; width:calc(100% + 10px);}
	.thumb-slide-box .product-thumb-slide li{width:100%; margin:0 5px;}
	.thumb-slide-box .product-thumb-slide .img-wrap{width:100%;}
	.product-slide-con .slick-arrow{margin-left:0 !important; -webkit-transform:translate(0,0);transform:translate(0,0); top:auto; bottom:-30px;}
	.product-slide-con .slick-arrow.slick-prev{left:0;}
	.product-slide-con .slick-arrow.slick-next{left:auto; right:0;}
}

/* *********** CONTACT - INQUIRY *********** */
@media (min-width:1025px) and (max-width:1220px){
	.inquiry-top-item .company-title dd .sub-tit{display: block; margin-left:0; line-height:1.2;}
}
@media all and (max-width:1024px){
	.inquiry-top-con{display: block;}
	.inquiry-top-con:before{display: none;}
	.inquiry-top-item{width:100%;}
	.inquiry-page .inquiry-top-item:first-child{border-bottom:1px solid #ddd; padding-bottom:15px; margin-bottom:15px;}
}
@media all and (max-width:800px){
	.inquiry-top-wrap{padding:50px 0 150px;}
	.inquiry-top-item .company-info dd{padding-left:80px;}
	.inquiry-top-item .company-title dd .tit{font-size:21px;}
	.inquiry-top-item .company-title dd .sub-tit{display: block; margin-left:0; line-height:1.2; font-size:14px;}
	.inquiry-top-item .company-info dt, .inquiry-top-item .company-info dd{font-size:14px;}

	.inquiry-style03-wrapper{margin-top:-100px;}
	.inquiry-tit{font-size:29px; margin-bottom:30px;}
	.inquiry-agreement-con.editor{font-size:13px;}
}

/* *********** Family - Family *********** */
@media all and (max-width:1024px){
	.family-con-wrap .family-txt-box .tit{font-size:55px;}	
}
@media all and (max-width:800px){
	.family-con-wrap{padding:40px 0 320px;}
	.family-con-wrap .family-txt-box .txt{font-size:15px;}
	.family-con-wrap .family-txt-box .tit{font-size:36px; margin-bottom:20px;}
	.family-con-wrap .family-txt-box .family-link{height:44px; line-height:44px; border-radius:44px; padding:0 18px; font-size:13px;}
	.family-con-wrap .family-txt-box .family-link i{font-size:17px; margin-left:30px; }
}


/* *********** company - about *********** */
@media all and (max-width:1024px){
	.about-con02{flex-wrap:wrap;}
	.about-con02 .about-con-list{display: flex; flex-wrap:wrap; width:100%; padding:70px 0;}
	.about-con02 .about-con-list .tit-box{width:100%; margin-bottom:50px;}
	.about-con02 .about-con-list .txt-box{width:50%; margin:0 auto;}
	.about-con02 .about-con-list.last-list .tit-box{margin-bottom:50px;}
	.about-con02 .about-con-list.last-list .txt-box{width:33.33%;}
}
@media all and (max-width:800px){
	.about-con01 .about-top-list{display: block; width:100%; margin-bottom:30px;}
	.about-con01 .about-top-list dt{margin:auto; margin-bottom:20px; width:140px; height:140px;}
	.about-con01 .about-top-list dt span{background-size:cover;}
	.about-con01 .about-top-list dd{width:100%; margin-left:0;}
	.about-con01 .about-top-list dd .txt01{font-size:20px;}
	.about-con01 .about-top-list dd .txt02{font-size:14px;}

	.about-con02 .about-con-list .tit-box{margin-bottom:30px;}
	.about-con02 .about-con-list .tit-box .flag{margin-bottom:5px;}
	.about-con02 .about-con-list .tit-box .tit-en{font-size:14px;}
	.about-con02 .about-con-list .tit-box .tit{font-size:29px;}
	.about-con02 .about-con-list .txt-box .txt{font-size:16px; margin-bottom:10px;}
	.about-con02 .about-con-list .txt-box .txt-num{font-size:14px;}
	.about-con02 .about-con-list .txt-box .txt-num strong{font-size:30px;}

	.about-con02 .about-con-list.last-list .txt-box span{font-size:20px;}
	.about-con02 .about-con-list.last-list .txt-box p{font-size:15px;}
	.about-con02 .about-con-list.last-list .tit-box{margin-bottom:30px;}
	
	.about-banner-wrap{padding-top:280px; margin-bottom:50px;}
}
@media all and (max-width:480px){
	.about-con01 .about-top-list dt{width:100px; height:100px;}

	.about-con02 .about-con-list .txt-box{width:100%; margin-bottom:15px;}
	.about-con02 .about-con-list .txt-box:last-child{margin-bottom:0;}
	.about-con02 .about-con-list.last-list .txt-box{width:100%; margin-bottom:15px;}
	.about-con02 .about-con-list.last-list .txt-box:last-child{margin-bottom:0;}
}

/* *********** company - history *********** */
@media all and (max-width:800px){
	.history-banner{padding:50px; margin-bottom:60px;}
	.history-banner .txt{font-size:21px;}
	.history-banner .txt strong{font-size:35px;}
}

/* *********** company - location *********** */
@media all and (max-width:1024px){
	.location-con-wrap{flex-wrap:wrap; flex-direction:column-reverse; margin-bottom:50px;}
	.location-con-wrap .location-map{width:100%;}
	.location-con-wrap .location-info{width:100%; padding:0; margin-bottom:20px;}
}
@media all and (max-width:480px){
	.location-con-wrap .location-map .location-map-wrap{padding-top:240px;}
}