@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*/
}
@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:4rem; }
	.sub-tab-list-style ul li a em{font-size:1.4rem}
	/* Tab Fixed Move*/
	/* Mobile Tab Drop Menu */
	.sub-drop-menu-style{position:relative;}
	.sub-drop-open-btn-style{display:block; position:relative; padding:0 1.5rem; height:4rem; line-height:4rem; font-size:1.5rem; 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:1.5rem; margin-top:-0.7rem}
	.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:14; 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; padding: 0; height: auto;}
	.sub-drop-menu-style ul li:first-child{border-radius: 0;}
	.sub-drop-menu-style ul li:last-child{border-radius: 0;}
	.sub-drop-menu-style ul li a{display:block; width:auto; height:auto; padding:1rem 1.5rem; border:0; border-radius: 0;}
	.sub-drop-menu-style ul li a em{font-size:1.4rem;}
	.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;}
}

/* 드롭다운메뉴 :: drop-custom */
@media all and (max-width:800px){
	.cm-sub-select-menu{position: relative; min-height:4rem;}

	.cm-sub-select-menu .drop-custom-menu{height:4rem; width:100%;}
	.cm-sub-select-menu .drop-custom-menu > .drop-custom{height:4rem;}
	.cm-sub-select-menu .drop-custom-menu .location-menu-con{top:4rem;}

	/* 메뉴 2개 */
	.drop-custom-wrap02.cm-sub-select-menu .drop-custom-menu{width:48%;}
}

/********** 공통 리스트 **********/
@media all and (max-width:640px){
	/***** 리스트 *****/
	.download-content .down-list-con {flex-wrap: wrap; margin: -1rem 0;}
	.download-content .down-list-box {width: 100%; margin: 1rem 0;}
}

/* ******************  회사소개 ********************** */
@media all and (max-width:1220px){
	
}

/********** company 공통 **********/

/********** company :: about us **********/
@media all and (max-width:1280px) {
	/***** 탑 배너 *****/
	.about-banner-con .banner-top-txt-box .txt-box-left {width: 36%; margin-right: 10rem;}
	.about-banner-con .banner-top-txt-box .txt-box-right {width: 64%;}
	/***** 하단 정보 *****/
	.about-info-con .info-inner .info-list .info-tit-box {margin-right: 1.5rem;}
	.about-info-con .info-txt, .about-info-con .txt-box-list > span {font-size: 1.4rem;}
	.about-info-con .info-inner .info-list .info-txt-box .txt-box-list:last-child {margin-left: 1.5rem;}
}

@media all and (max-width:800px) {
	.about-banner-con .banner-top-txt-box .txt-box-left {margin-bottom: 2rem;}
	.company-page .company-con-tit {font-size: 4.5rem;}
	.company-page .company-con-bold-txt {font-size: 2.2rem;}
	.company-page .company-con-txt {font-size: 1.5rem;}
	/***** 탑 배너 *****/
	.about-banner-con .banner-top-txt-box {flex-direction: column;}
	.about-banner-con .banner-top-txt-box .txt-box-left {width: 100%; margin-right: 0; margin-bottom: 4rem;}
	.about-banner-con .banner-top-txt-box .txt-box-right {width: 100%;}
	/***** 하단 정보 *****/
	.about-info-con {margin-top: 3rem;}
	/* .about-info-con .info-inner .info-list {padding: 2rem; display: block;} */
	/* .about-info-con .info-inner .info-list:last-child {align-items: flex-start;} */
	.about-info-con .info-inner .info-list .info-tit-box {width: 100px;}
	.about-info-con .info-inner .info-list .info-tit-box span{font-size:1.4rem;}
	.about-info-con .info-inner .info-list .info-txt-box{width:calc(100% - 100px); /* margin-top:1rem; */}
	.about-info-con .info-inner .info-list .info-txt-box.flexBox {flex-direction: column; align-items: flex-start;}
	.about-info-con .info-inner .info-list .info-txt-box .txt-box-list:last-child {margin-left: 0; margin-top: 1rem;}
}

@media all and (max-width:640px) {
	/***** 하단 정보 *****/
	.about-info-con .info-inner .info-list.grayBg {border-radius: 3rem;}
	.about-info-con .info-inner .info-list .info-txt-box .txt-box-list {flex-direction: column; align-items: flex-start;}
	.about-info-con .txt-box-list > span::before {display: none;}
	.about-info-con .txt-box-list .info-txt {padding-left: 0;}
}
@media all and (max-width:480px) {
	/***** 하단 정보 *****/
	.about-info-con .info-inner .info-list .info-tit-box{height:3.5rem;}
	.about-info-con .info-inner .info-list.m-block{display: block;}
	.about-info-con .info-inner .info-list.m-block .info-txt-box{margin-top:1rem; width:100%;	}
}

/********** company :: our contact **********/
@media all and (max-width:800px) {
	.location-page .cm-list-content .cm-list-layout-con {margin: 0;}
	.location-page .cm-list-content .cm-list-layout-box {width: 100%; height: auto; margin: 0 0 2rem 0; padding: 2.5rem;}
	.location-page .cm-list-content .btn-box {margin-bottom: 1rem;}
	.cm-list-content .cm-list-txt{font-size:1.7rem;}
}

/********** customer :: download **********/
@media all and (max-width:800px){
	.download-page .drop-custom-wrap02{width:100%; height:4rem;}
}
@media all and (max-width:640px) {
	.download-page .cm-list-content .cm-list-layout-con {margin: 0;}
	.download-page .cm-list-content .cm-list-layout-box {width: 100%; margin: 0 0 2rem 0; padding:2.3rem 2rem;}
	.download-page .cm-list-content .cm-list-txt{height:5.8rem;}
}

/********** careers :: 직무소개 **********/
@media all and (max-width:1280px) {
	.job-content .job-list-con .job-list {padding: 6rem;}
	.job-content .job-list-con .job-list .img-box {margin-right: 5rem;}
}

@media all and (max-width:800px) {
	.job-content {padding: 6rem 0;}
	.job-content .job-list-con .job-list {padding: 4rem;}
}

@media all and (max-width:640px) {
	.job-content .job-list-con .job-list {flex-direction: column; align-items: initial;}
	.job-content .job-list-con .job-list .img-box {display: block; margin-right: 0; top: 0; width:auto;}
	.job-content .job-list-con .job-list .img-box img {margin: 0;}
	.job-content .job-list-con .job-list-tit {padding-top: 1.5rem; position: static; text-align:left;}
	.job-content .job-list-con .job-list-tit.no-image-tit{transform:none; padding-top:0;}
	.job-content .job-list-con .job-list .txt-box {margin-top: 3rem; width:100%;}
}

/********** careers :: 복리후생 **********/
@media all and (max-width:1280px) {
	.welfare-page .cm-list-content .cm-list-layout-box {width: calc(33.333% - 2rem);}
	.welfare-page .cm-list-content .cm-list-layout-box {padding: 3rem;}
}

@media all and (max-width:800px) {
	/* 탭 */
	.welfare-page .sub-drop-menu-style {width: 100%;}
	.welfare-page .sub-tab-list-style .cm-drop-list-JS, .welfare-page .sub-tab-list-style .cm-drop-list-JS li {/* transition: none; */}
	.welfare-page .sub-tab-list-style ul {width: 100%; height: auto; border-radius: 0;}
	.welfare-page .sub-tab-list-style.top-fixed .cm-drop-list-JS {border-radius: 0; box-shadow: none; /* background-color: #fff; backdrop-filter: none; */}
	.welfare-page .cm-list-content .cm-list-layout-box {width: calc(50% - 2rem);}
	.welfare-page .sub-tab-list-style.top-fixed {top: 60px;}

	.welfare-page .sub-tab-con, .welfare-page .sub-tab-con#fixedContentM1, .welfare-page .sub-tab-con#fixedContentM3 {margin-top: 0; padding-top: 0;}
}

@media all and (max-width:640px) {
	.welfare-page .cm-list-content .cm-list-layout-box {width: 100%; height: auto;}
	.welfare-page .cm-list-content .cm-list-layout-box .icon-box {position: static; margin: 3rem 0 0 auto;}
}


/* ****************** 제품 리스트페이지 ********************** */
@media all and (min-width:801px){
	.product-list-type01 .list-item.txt-item .inner-list{min-height:12rem; align-items: flex-end;}
}
@media all and (max-width:1280px){
	.product-list-type01 .list-item{padding:3rem;}

	.product-list-type01 .list-item .bottom-box{position: relative; width:100%; top:auto; left:auto; bottom:auto}
}
@media all and (max-width:800px){
	.product-list-type01 .list-item{width:calc(50% - 2rem); padding:3rem 1.5rem;}
	/* .product-list-type01 .list-item .top-box{min-height:24rem;} */
	.product-list-type01 .list-item .tit{font-size:2.4rem;}
	.product-list-type01 .list-item .inner-list .inner-item a{height:4rem; font-size:1.4rem; padding:0 1rem;}
}
@media all and (max-width:480px){
	.product-list-type01 .list-item{width:calc(100% - 2rem);}
}

/* ****************** 제품 리스트페이지02 ********************** */
@media all and (max-width:1280px){
	.product-list-type02 .list-item{width:calc(20% - 0.8rem)}
}
@media all and (max-width:800px){
	.product-bg{padding:3rem var(--area-padding);}

	.product-location-wrap{display: block; margin-bottom:5rem;}
	.product-location-wrap .left-box{width:100%;}
	.product-location-wrap .left-box .prd-location{flex-wrap:wrap;}
	.product-location-wrap .left-box .prd-location li{margin-right:2rem; margin-bottom:1rem;}
	.product-location-wrap .left-box .prd-location li:before{font-size:1.4rem; right:-1.7rem;}

	.product-location-wrap .right-box{width:100%; margin-top:2rem;}
	.cm-sub-select-menu{width:100%;}
	.cm-sub-select-menu .menu-location{width: calc(50% - 0.5rem); max-width:16rem;}
	.cm-sub-select-menu .menu-location:first-child{margin-left:0;}
	.cm-sub-select-menu .menu-location > .cur-location{height:3.5rem; padding:0 1rem; border-radius: 1.65rem;}
	.cm-sub-select-menu .menu-location > .cur-location span{font-size:1.3rem;}
	.cm-sub-select-menu .menu-location > .cur-location .arrow{font-size:2rem;}
	.cm-sub-select-menu .menu-location .location-menu-con{top:calc(100% - 1.65rem); padding-top:1.65rem; border-radius: 0 0 1.65rem 1.65rem;}
	.cm-sub-select-menu .menu-location .location-menu-con li a{padding:0.7rem 1rem;}
	
	.cm-sub-select-menu .menu-location.open > .cur-location{border-radius: 1.65rem 1.65rem 0 0;}

	.product-list-type02 .list-item{width:calc(25% - 0.8rem);}
}
@media all and (max-width:640px){
	.product-list-type02 .list-item{width:calc(33.33% - 0.8rem);}
	.product-list-type02 .list-item .tit-box{padding:0 1rem;}
}
@media all and (max-width:480px){
	.product-list-type02 .list-item{width:calc(50% - 0.8rem);}
	.cm-sub-select-menu .menu-location{max-width:none;}
}


/* ****************** 제품 뷰페이지 ********************** */
@media all and (max-width:1280px){
	.prd-view-con:not(.prd-top-info){display: block;}
	.prd-view-con:not(.prd-top-info) .left-box{width:100%; margin-bottom:3rem;}
	.prd-view-con:not(.prd-top-info) .right-box{width:100%;}

	/* 제품 정보 :: Related Products */
	.prd-related-list-wrap{margin-right:-3.5rem;}
	.prd-related-list.list-style01{margin-top:0;}
}
@media all and (max-width:800px){
	/* 제품 상단 정보 */
	.prd-view-con.prd-top-info{display: block; padding:3rem 0 5rem;}
	.prd-view-con.prd-top-info .left-box{width:100%; margin-bottom:3rem;}
	.prd-top-info .left-box .prd-tit{font-size:3.2rem;}
	.prd-top-info .left-box .prd-txt{font-size:1.8rem;}
	.prd-top-info .left-box .prd-info{margin-bottom:3rem;}
	.prd-top-info .left-box .prd-info li{font-size:1.4rem;}
	.prd-top-info .left-box .prd-btn-box a{width:calc(50% - 0.5rem); max-width:180px; height:4rem; padding:0 1rem; font-size:1.3rem;}
	.prd-top-info .left-box .prd-btn-box a i{font-size:2rem;}
	.prd-top-info .left-box .prd-btn-box a:last-child{margin-right:0;}

	.prd-view-con.prd-top-info .right-box{width:100%;}
	.prd-top-info .right-box .txt-box{padding:2rem var(--area-padding)}

	/* 제품 정보 :: Related Products */
	.prd-related-list-wrap:before{display: none;}
	
	/* 제품 정보 :: Download */
	.prd-down-wrap{display: block;}
	.prd-down-wrap .prd-down-item{margin-right:0; margin-bottom:3rem; width:100%;}
	.prd-down-wrap .prd-down-item:last-child{margin-bottom:0;}
	.prd-down-wrap .prd-down-item .inner-list{margin-top:1rem; width: calc(100% + 1rem);}
	.prd-down-wrap .prd-down-item .inner-list .inner-item{width: calc(33.33% - 1rem); max-width:12rem; padding:0 1rem; height:4rem; margin-right:1rem;}
	.prd-down-wrap .prd-down-item .inner-list .inner-item i{font-size:1.6rem;}
}
@media all and (max-width:480px){
	.prd-top-info .right-box .txt-box .inner-list{display: block;}
	.prd-top-info .right-box .txt-box .inner-list .list-item{width:100%; padding:1rem 0;}
	.prd-top-info .right-box .txt-box .inner-list .list-item:before{width:100%; height:1px; top:100%;}
}

/* ****************** Company :: CI ********************** */
@media all and (max-width:800px){
	.ci-top-wrap{padding:6rem 0;}
	.ci-top-con{display: block;}
	.ci-top-con .left-box{width:100%; margin-bottom:3rem;}
	.ci-top-con .left-box .img-box{padding:10rem 5rem;}
	.ci-top-con .right-box{width:100%;}
	.ci-top-con .right-box .txt-box .tit{font-size:2rem;}
	.ci-top-con .right-box .txt-box .txt{font-size:2.6rem;}
	.ci-top-con .right-box .txt-box .txt02{font-size:1.4rem;}
	/* 공통 버튼 */
	.cm-sub-btn-box .cm-btn{max-width:20rem; width:calc(50% - 0.5rem); height:4rem; font-size:1.4rem; padding:0 1.5rem;}
	.cm-sub-btn-box .cm-btn i{font-size:2rem;}
	
	/* CI 하단 정보 */
	.ci-bottom-wrap{padding:6rem 0;}
	.ci-bottom-con{display: block;}
	.ci-bottom-con .con-box{width:100%; margin-right:0rem; margin-bottom:5rem;}
	.ci-bottom-con .con-box .img-box{width:100%; height:auto; margin-bottom:2rem;}

}

/* ****************** Customer :: 고객문의 ********************** */
@media all and (max-width:800px){
	.inquiry-tit{padding-top:0;}
	.inquiry-tab-box{width:100%; margin:5rem 0;}
	.inquiry-tab-box .sub-tab-wrapper-style{width:100%;}
	.inquiry-tab-box .sub-tab-list-style ul li a em{font-size:1.4rem;}
	.inquiry-tab-box .sub-tab-list-style ul li.selected a{background:#fff;}

	.inquiry-con-wrap{display: block;}
	.inquiry-con-wrap > .inquiry-essential-txt{position: relative; top:auto; right:auto; text-align:right;}
	.inquiry-con-wrap .inquiry-left-box{width:100%; max-width:none;}
	.inquiry-con-wrap .inquiry-right-box{width:100%; max-width:none;}

	.inquiry-right-info{padding:3rem 2rem; margin-top:5rem;}
	.inquiry-right-info .inner-info-box{display: block;}
	.inquiry-right-info .inner-info-box .inner-tit{width:100%; margin-bottom:1rem;}
	.inquiry-right-info .inner-info-box .inner-tit br{display: none;}
	.inquiry-right-info .inner-info-box .inner-txt{width:100%;}

}

/* ****************** ir ********************** */
@media all and (max-width:800px){
	.ir-page .sub-tab-wrapper-style{margin-bottom:4rem;}
	.ir-page .sub-tab-wrapper-style02 {width: 100%;}
	.ir-page .sub-tab-list-style02 ul {justify-content: flex-start;}
	.ir-page .sub-tab-list-style02 ul li {width: 33.333%; max-width:15rem; height:3rem;}
	.ir-page .sub-tab-list-style02 ul li a{height:3rem;}
	.ir-page .sub-tab-list-style02 ul li a em{font-size:1.5rem;}
}

@media all and (max-width:800px){
	.ir-page .cm-list-content .cm-list-layout-con{display: block;}
	.ir-page .cm-list-content .cm-list-layout-box{padding:2rem; width:100%;}
}


/* 모바일 탭(3개) pc형태 유지 2023-12-07  */
@media all and (max-width:800px){
	.welfare-page .triple-tab-style.sub-tab-wrapper-style{margin-bottom:25px;}
	.triple-tab-style .sub-tab-list-style:before{position: absolute; content:''; width:0; height:calc(4rem + 14px); /* background:#f5f5f5 !important; */ left:50%; transform:translateX(-50%); transition:width 0.4s;}
	.triple-tab-style .sub-tab-list-style.top-fixed{width:calc(100% - (2 * var(--area-padding)));}
	.triple-tab-style .sub-tab-list-style.top-fixed:before{width:100vw;}
	.triple-tab-style .sub-tab-list-style ul li{width:33.33%;}
	.welfare-page .triple-tab-style .sub-tab-list-style.top-fixed .cm-drop-list-JS li{/* background:#f5f5f5; */}
}

/* 사업장 탭 fixed */
@media all and (max-width:800px){
	.location-tab-JS .sub-tab-wrapper-style{width:100%;}
	.location-tab-JS .sub-tab-wrapper-style.top-fixed{width:calc(100% - (2 * var(--area-padding))); top:60px;}
	.location-tab-JS .sub-tab-wrapper-style.top-fixed ul{border-radius: 0; box-shadow: none;}

	.location-tab-JS .sub-tab-content-style{padding-top:50px;}
}