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


/* ******************  서브공통 ********************** */
/* -------- 공통 스크롤바  -------- */
@media all and (max-width:1279px){
	.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:1279px){
	.sub-tab-list-style .area{padding:0}
	/* Tab Fixed Move*/
	/* .sub-tab-list-style.top-fixed{top:var(--header-height);} */
}
@media all and ( max-width: 800px ){
	.sub-tab-wrapper-style{margin-bottom:3rem; width: 100%;}
	.sub-tab-list-style ul{border-radius: 0;}
	.sub-tab-list-style ul li a{border-radius: 0;}
	
	/* Tab 공통 스타일 */
	.sub-tab-wrapper-style,
	.sub-tab-list-style.top-fixed,
	.sub-tab-list-style ul li a{height:5rem;}
	.sub-tab-list-style.top-fixed {width: calc(100% - 2*(var(--area-padding)));}
	.sub-tab-list-style ul li a em{font-size:1.6rem;}
	/* Tab Fixed Move*/
	/* Mobile Tab Drop Menu */
	.sub-drop-menu-style{position:relative;}
	.sub-drop-open-btn-style{display:block; position:relative; padding:0 2.5rem; height:5rem; line-height:5rem; font-size:1.7rem; background-color:var(--main-color2); box-sizing:border-box; border-radius: 3rem;}
	.sub-drop-open-btn-style span{font-weight: 600; color:#fff;}
	.sub-drop-open-btn-style .arrow{color:#fff; position:absolute; top:50%; right:2rem; margin-top:-0.8rem;}
	.sub-drop-menu-style.open .arrow,
	.sub-drop-open-btn-style.open .arrow{margin-top: -0.9rem; 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; z-index:11; box-sizing:border-box; border-radius: 2rem;}
	.sub-drop-menu-style ul li{position:static; display:block; float:none; border:0; border-top:1px solid #eee; border-radius: 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 2.5rem; border:0; background-color:transparent;}
	.sub-drop-menu-style ul li a em{font-size:1.6rem;}
	.sub-drop-menu-style ul li.selected{background-color:transparent; border-color: #eee;}
	.sub-tab-list-style ul li.selected a{background-color:transparent;}
	.sub-drop-menu-style ul li.selected a em{color: var(--main-color2); font-weight:700;}
	
	/* -------- 공통 :: 타이틀 -------- */
	.cm-tit-con {padding-bottom: 6rem !important;}
	.cm-tit-con .cm-tit {font-size: 3.2rem;}
}

/* ****************** 01. 회사소개 ********************** */
/* -------- 인사말 -------- */
@media all and (max-width:1279px){
	.greeting-con .txt-box {padding-left: 12rem;}
}
@media all and (max-width:800px){
	.greeting-con-wrap {padding: 6rem 0 14rem;}
	.greeting-con {display: block;}
	.greeting-con .img-box  {width: calc(100% - 3.1rem);}
	.greeting-con .img-box .bg {top: 3.1rem; left: 3.1rem;}
	.greeting-con .img-box .bg:before {width: calc(100% - 2.4rem); height: calc(100% - 2.4rem); top: 1.2rem; left: 1.2rem;}
	.greeting-con .txt-box {width: 100%; padding-left: 0; padding-top: 9rem;}
	.greeting-con .txt-box strong {margin-bottom: 4.5rem;}
	.greeting-con .txt-box .txt01 {font-size: 2.4rem;}
	.greeting-con .txt-box .txt02 {font-size: 1.7rem; margin-top: 2.5rem;}
}

/* -------- 연력 -------- */
@media all and (max-width:800px){
	.history-img-con {margin-bottom: 7rem; padding-top: 44.333%;}
	.history-percent-bar {left: 3rem; }
	.history-percent-bar .percent-bar-child .point {bottom: -3rem;}
	.history-year-group-box { flex-wrap: wrap; padding: 1rem 0 10rem 7rem;}
	.history-year-group-box .dots {left: 3rem; }
	.history-year-group-box .history-year-group-tit-box {text-align: left; width: 100%; padding: 0;}
	.history-year-group-box .history-year-group-tit {font-size: 4.6rem;}
	.history-year-group-box .history-year-list-box {width: 100%; padding: 4rem 0 0 0;}
	.history-year-group-box .history-year-item {margin-bottom: 3.5rem;}
	.history-year-group-box .history-year-item .history-year {width: 9rem;}
	.history-year-group-box .history-year-item .history-detail-txt-con {width: calc(100% - 9rem);}
}

/* -------- ESG -------- */
@media all and (max-width:1279px){
	.esg-list01 {margin: 0 -3rem;}
	.esg-list01 li {width: calc(33.333% - 6rem); margin: 0 3rem;}
	.esg-list01 li .inner .tit-box {padding: 3.5rem;}

	.esg-list02 li strong {width: 22%;}
	.esg-list02 li dl {width: calc(78% - 22rem);}
}
@media all and (max-width:800px){
	.esg-con01 {padding-bottom:18rem;}
	.esg-list01 {display: block; margin: 0;}
	.esg-list01 li {width: 100%; margin: 1rem 0;}
	.esg-list01 li:nth-child(odd) .inner {    transform: translateY(0);}
	.esg-list01 li .inner .bg { padding-top: 68.34%;}
	.esg-list01 li .inner .tit-box strong {font-size: 3.2rem;}
	.esg-flow-txt-wrap {height: 12rem;}
	.esg-flow-txt-wrap .inner {height: 12rem;}
	.esg-flow-txt-wrap .maskBg .marquee .absol h4 {font-size: 8rem;}
	
	.esg-con02 {padding: 8rem 0 12rem;}
	.esg-list02 li {display: block; padding: 3.5rem ;  border-radius: 5rem;}
	.esg-list02 li strong {width: 100%; text-align: left; font-size: 5.6rem;}
	.esg-list02 li dl {width: 100%; margin: 2rem 0 3rem;}
	.esg-list02 li .icon {display: block; width: 100%; padding: 0;}
	.esg-list02 li .icon img {height: 14rem;}
}

/* -------- 오시는길 -------- */
@media all and (max-width:800px){
	.location-map-box {padding-top: 49%;}
	.location-info-box .tit-box {display: block;}
	.location-info-box .tit-box .tit {margin-bottom: 2rem; font-size: 2.8rem;}
	.location-info-box .tit-box .right-box {margin: 0 -0.5rem;}
	.location-info-box .tit-box a {width: calc(50% - 1rem); margin: 0 0.5rem;}
	.location-info-box .info-box .info-list {flex-direction: column; padding: 0;}
	.location-info-box .info-box .info-list:last-child {flex-direction: column-reverse;}
	.location-info-box .info-box .info-list dl {width: 100% !important; padding: 0.8rem 0;}
	.location-info-box .info-box .info-list dl dt {width: 13rem !important;}
	.location-info-box .info-box .info-list dl dd {width: calc(100% - 13rem) !important;}
}

/* ******************  02. Business ********************** */
@media all and (max-width:800px){
	/* -------- 인트로 -------- */
	.business-intro-con .bottom-txt-con {padding: 7rem 0 10rem;}
	.business-intro-con .bottom-txt-con strong {font-size: 5rem;}
	
	/* -------- 사업영역 -------- */
	.business-page {padding-bottom: 5rem;}
	.business-top-con {padding-bottom: 15rem;}
	.business-img-bnr  {height:40rem; background-attachment: unset;}
	.business-flow-txt-wrap {height: 12rem;}
	.business-flow-txt-wrap .inner {height: 12rem;}
	.business-flow-txt-wrap .maskBg .marquee .absol h4 {font-size: 8rem;}
	.business-tab-container {padding-top: 7rem;}
	.business-tab-con {padding: 5rem 0;}
	.business-tit {font-size: 3.6rem;}
	.business-tit-box {padding-bottom: 3.5rem;}
	.business-tit-box .tit {font-size: 3rem; margin-bottom: 2rem;}
	.business-tit-box dl dt {font-size: 1.8rem; display: block;}
	.business-tit-box dl dd {display: block; padding-top: 0.5rem;}
	.business-tit-box dl dd i {top: 0.1rem;}
	
	.business-img-list {gap:2rem}
	.business-img-list li {width: calc(50% - 1rem);}
}
@media all and (max-width:480px){
	.business-img-bnr {height: 23rem;}
}

/* ******************  03. 홍보센터 ********************** */
@media all and (max-width:800px){
	/* -------- 인증서 -------- */
	.bbs-list-style08 .bbs-item > a{height:auto; line-height: 1.4;  padding:1.5rem;}
	.bbs-list-style08 .bbs-item .bbs-list-num{width: 4rem; text-align: left; }
	.bbs-list-style08 .bbs-item .bbs-list-info-con {width: calc(100% - 4rem);}
	.bbs-list-style08 .bbs-item .bbs-subject-txt {    text-overflow: unset; white-space: unset; overflow: visible;}
	.certification-con + .certification-con {padding-top: 10rem;}
	.certification-tit {font-size: 3rem;}
	#certification02 .certification-tit {margin-bottom: 1.5rem;}
	.certification-con02  {display: block;}
	.certification-con02 .certification-con02-list {width: 100%; padding-right: 0;}
	.certification-con02 .certification-con02-img {width: 100%; margin-top: 5rem;}
	.certification-con02 .certification-con02-img span {padding-top: 42.5%;}
	.certification-con02 .certification-con02-img span img.display-pc {display: none;}
	.certification-con02 .certification-con02-img span img.display-m {display: block;}
	
	/* -------- 주요거래처 -------- */
	.bbs-img-wrap {display: none !important;}
	.partners-tab-container .sub-tab-list-style ul li {width: 100%;}
	.partners-tab-con {padding: 5rem 0;}
	.partners-tab-con .partners-tit {font-size: 3rem; margin-bottom: 2rem;}
	.partners-total-con {height: 6rem;}
	.partners-total-con .txt {font-size: 1.6rem;}
}