@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{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:1280px){
	/* 연혁 */
	.history-banner-box .con-box .inner-box .tit-box{margin-left:0;}
	.history-banner-box .con-box .year-box{left: calc(-1 * var(--area-padding));}
	.history-banner-box .con-box .year-box.top-fixed{left:var(--area-padding);}
}
@media all and (max-width:800px) {
	.intro-content {padding-bottom: 7rem;}
	.intro-content .intro-img-con {flex-direction: column; margin-top: 7rem; padding: 0 var(--area-padding);}
	.intro-content .intro-img-con .img-box {width: 100%;}
	.intro-content .intro-img-con .txt-box {width: 100%; margin-left: 0; margin-top: 3rem;}
	.intro-content .intro-img-con .intro-img-st {padding-top: 1.2rem;}
	.intro-content .intro-img-con .intro-img-txt {font-size: 2.2rem;}

	/* 경영 목표 */
	.intro-target-con {margin-top: 9rem; max-width: none;}
	.intro-target-con .flex-inner {flex-direction: column;}
	.intro-target-con .flex-inner img {max-width: 100%;}
	.intro-target-con .txt-inner {position: static; margin-bottom: 2rem;}
	.intro-target-con .txt-inner:last-child {margin-bottom: 0;}
	.intro-target-con .txt-box {margin-left: 0;}
	.intro-target-con .txt-inner::before, .intro-target-con .txt-inner::after {display: none;}
	.intro-target-con .target-tit {font-size: 2.4rem;}
	.intro-target-con .target-txt {font-size: 1.6rem;}

	/* 핵심 가치 */
	.intro-value-con {margin-top: 9rem;}
	.intro-value-con .flex-inner {margin: 0;}
	.intro-value-con .value-list {width: 100%; margin: 0 0 2rem 0; height: auto;}
	.intro-value-con .value-list:last-child {margin-bottom: 0;}
	.intro-value-con .value-list .value-txt {min-height: 0;}

	/* 연혁 */
	.intro-history-con {margin-top: 9rem;}

	.history-banner-box .con-box .sub-drop-menu-style .year-box{display: block; width:100%; left:auto; top:auto; width:100%; padding:0;}
	.history-banner-box .con-box .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; padding:0;}
	.history-banner-box .con-box .sub-drop-menu-style ul li{position:static; display:block; float:none; border:0; width:auto; background-color:transparent}
	.history-banner-box .con-box .sub-drop-menu-style ul li:first-child{border-top:0; border-left:0}
	.history-banner-box .con-box .sub-drop-menu-style ul li button{display:block; width:auto; height:auto; padding:10px 15px; border:0;}
	.history-banner-box .con-box .sub-drop-menu-style ul li button em{font-size:13px;}
	.history-banner-box .con-box .sub-drop-menu-style ul li button em:before{display: none;}
	.history-banner-box .con-box .sub-drop-menu-style ul li.on{background-color:transparent;}
	.history-banner-box .con-box .sub-drop-menu-style ul li.on button em{color:#666; font-weight:600; }

	.history-banner-box .con-box .sub-drop-menu-style .year-box.top-fixed{left:0; top:var(--header-height);}
}

/* ******************  회사소개 :: 설비현황 ********************** */
@media all and (max-width:800px){
	.facility-content {padding-top: 5rem;}
	.flex-img-con {flex-direction: column !important; margin-bottom: 6rem;}
	.flex-img-con .img-box, .flex-img-con .txt-box {width: 100% !important;}
	.flex-img-con .txt-box {margin: 3rem 0 0 0 !important;}
	.flex-img-con .txt-box .icon {margin-bottom: 1.5rem;}
	.flex-img-con .txt-box .facility-tit {padding-bottom: 1rem;}
	.flex-img-con .txt-box .facility-tit {font-size: 2.8rem;}
	.flex-img-con .txt-box .facility-txt {font-size: 1.6rem;}
	.flex-img-con .icon img {max-width: 40%;}
}

/* ******************  회사소개 :: 지속가능경영********************** */
@media all and (max-width:1280px) {
	.sustain-banner-con .img-box img {max-width: 50%;}
	.sustain-certificate-con .certificate-list-box .small-img {margin-top: 6rem;}
	.sustain-certificate-con .certificate-list-box .certificate-txt {min-height: 7.5rem;}
}

@media all and (max-width:800px) {
	.sustainability-content {padding-bottom: 7rem;}
	.sustain-count-con .count-list-box .count-list {width: 50%;}
	.sustain-count-con .count-list-box .count-list:nth-child(n + 3) {margin-top: 5rem !important;}
	.sustain-count-con .count-list-box {justify-content: flex-start;}
	.sustain-count-con .count-list-box .count-list:nth-child(odd) {border-right: 1px solid #eee !important;}
	.sustain-count-con .count-list-box .count-list:nth-child(even) {border-right: transparent !important;}
	.sustain-count-con .count-list-box .icon-box > p {font-size: 2.2rem; min-height: 0;}
	.sustain-count-con .count-list-box .count-txt {font-size: 5rem;}
	.sustain-count-con .count-list-box .count-list:first-child {margin-top: 0 !important;}
	.sustain-count-con .count-list-box .count-bold-txt {font-size: 1.4rem;}
	.sustain-count-con .count-list-box .icon-box {margin-bottom: 2rem;}
	.sustain-count-con .count-list-box .count-txt.minSize {display: block; line-height: inherit;}
	.sustain-count-con .count-list-box .count-txt > span {font-size: 5rem;}

	.sustain-certificate-con .certificate-list-box .certificate-list .img-box {width: 15rem;}
	.sustain-certificate-con .certificate-list-box .certificate-list .txt-box {width: calc(100% - 18rem); margin-left: 3rem;}

	.sustain-banner-con {padding-top: 72.25%; margin-top: 4.5rem;}
	.sustain-banner-con .img-box img {max-width: 90%;}
	.sustainability-content .banner-txt {margin-top: 3.5rem;}

	.sustain-count-con {margin-top: 9rem;}
	.sustain-count-con .count-list-box {margin: 5rem 0;}

	.sustain-certificate-con .certificate-list-box {flex-direction: column; margin-top: 4.5rem;}
	.sustain-certificate-con .certificate-list-box .certificate-list:first-child {margin-right: 0; margin-bottom: 3rem;}
	.sustain-certificate-con .certificate-list-box .certificate-list {width: 100%;  border: 1px solid #eee; padding: 2rem; box-sizing: border-box;}
	.sustain-certificate-con .certificate-list-box .small-img {margin-top: 4rem;}
	.sustain-certificate-con .certificate-list-box .small-img img {max-width: 50%;}
	.sustain-certificate-con .certificate-list-box .certificate-tit {font-size: 3rem;}
	.sustain-certificate-con .certificate-list-box .certificate-txt {min-height: 5rem; font-size: 1.4rem;}
	.sustain-certificate-con .certificate-list-box .small-img {min-height: 10.3rem;}
}

@media all and (max-width:480px) {
	.sustain-count-con .count-list-box .count-list {width: 100%; border-right: none !important; margin-top: 3rem !important}
	.sustain-count-con .count-list-box .count-list:nth-child(odd) {border-right: none !important;}
	.sustain-count-con .count-list-box .count-list:nth-child(n + 3) {margin-bottom: 0 !important; margin-top: 3rem !important}
}

/* ******************  products :: 제품개요 ********************** */
@media all and (max-width:800px) {
	.product-summary-content {padding: 0 var(--area-padding); 5.8rem var(--area-padding);}
	.product-summary-content .product-img-con {margin-bottom: 8rem;}
	.product-summary-content .product-img-con:last-of-type {padding-bottom: 6rem; margin-bottom: 4rem;}
	.product-summary-content .cm-tab-container-JS {margin-top: 8rem; padding: 0;}
	.product-summary-content .product-img-con .txt-box.area-sub {padding: 0;}
	.product-summary-content .product-img-con .txt-box {flex-direction: column;}
	.product-summary-content .product-img-con .txt-box > h3 {width: 100%; text-align: left; padding-bottom: 1rem;}
	.product-summary-content .product-img-con .txt-box > p {width: 100%; padding-left: 0;}
	.product-summary-content .product-img-con .txt-box > p::before {display: none;}
	.product-summary-content .product-img-con .txt-box {margin-top: 4.5rem;}
	.product-summary-content .certification-more-btn {position: static;}
	.product-summary-content .certi-btn-box {margin-top:2rem;}
	.product-summary-content .product-img-con .img-box .img-active-txt {font-size: 3rem;}

	/* 탭 */
	.product-summary-content .sub-tab-list-style ul li a {height: auto; padding: 13px 15px;} 
	.product-summary-content .sub-tab-list-style ul li a em {font-size: 13px;}
	.product-summary-content .sub-tab-list-style ul {border: none;}
	.product-summary-content .sub-tab-list-style ul li {border-left: 1px solid #e5e5e5; border-right: 1px solid #e5e5e5;}
	.product-summary-content .sub-tab-list-style ul li:last-child {border-bottom: 1px solid #e5e5e5;}
	.product-summary-content .certifi-list-style02 .certifi-thumb-box {width: 100px; margin-right: 15px;}
	.product-summary-content .certifi-list-style02 .certifi-info-box {width: calc(100% - 120px);}
}

@media all and (max-width:480px) {
	.product-summary-content .product-img-con .img-box .img-active-txt {font-size: 2.4rem;}
}

/* ******************  products :: 드라이보드 ********************** */
/* 컨텐츠 */
@media all and (max-width: 1280px) {
	/* 탭 */
	.dryboard-content .sub-tab-list-style.top-fixed{top:calc(30px + var(--header-height))}

	.dryboard-content .flex-img-con .txt-box {width: calc(54.054% - 5rem); margin-left: 5rem;}
	.dryboard-content .flex-img-con .dryboard-tit {font-size: 6rem;}
	.dryboard-content .flex-img-con .dryboard-tit > span {font-size: 4rem;}
}

@media all and (max-width:800px) {
	/* 탭 */
	.dryboard-content .sub-tab-wrapper-style {width: 100%; z-index: 10; top: 0; height: 40px;}
	.dryboard-content .sub-tab-list-style.top-fixed {height: 40px; left: 0; top: 80px;}
	.dryboard-content .sub-tab-list-style, .dryboard-content .sub-tab-list-style.top-fixed {width: 100%; height: 0;}
	.dryboard-content .sub-drop-menu-style ul {top: 37.8px; display: none;}
	.dryboard-content .sub-tab-list-style ul li {margin-bottom: 0;}
	.dryboard-content .sub-tab-content-style {margin-top: 40px;}
	.dryboard-content .sub-tab-list-style ul li a em {padding-left: 0;}
	.dryboard-content .sub-tab-list-style ul li a::before {display: none;}
	

	.dryboard-content .flex-img-con {margin-left: 0; margin-bottom: 10rem;}
	.dryboard-content .cm-fixed-tab-container-JS {margin-top: 40px;}
	.dryboard-content .main-visual-more-btn {margin-top: 2.5rem;}

	.dryboard-content .flex-img-con img {max-width: none; width: 100%;}
}

/* ******************  markets :: 공통 ********************** */

/* 슬라이드 */
@media all and (max-width:1320px){

}

@media all and (max-width:1280px){
	/* .markets-slide-box > button {top: auto; bottom: -65px; transform: translateY(0);} */
	.markets-slide-box > button i {font-size: 48px;}
}

@media all and (max-width:1055px){
	.markets-slide-box > button {top: auto; bottom: -65px; transform: translateY(0);}
	.markets-slide-box .markets-slide-prev {left: 0;}
	.markets-slide-box .markets-slide-next {right: 0;}
}

@media all and (max-width:480px){
	.markets-slide-box > button {bottom: -58px;}
	.markets-slide-box > button i {font-size: 30px;}
}

@media all and (max-width:800px){
	/* 탑 */
	.cm-markets-page {padding: 7rem 0 15rem 0;}
	.cm-markets-page .top-txt-box .top-icon > span img {max-width: 15%;}
	.cm-markets-page .top-txt-box .top-bold-tit {font-size: 3rem;}
	.cm-markets-page .top-txt-box .top-icon {margin-bottom: 2.5rem;}
	.cm-markets-page .top-txt-box {margin-top: 4rem;}
}

@media all and (max-width:480px){
	.markets-slide-box .slide-btn-box button i {font-size: 2.6rem;}
}

/* ******************  markets :: 시장개요 ********************** */
@media all and (max-width:1260px){
	.summary-content .top-txt-box {padding: 0 var(--area-padding);}
	.summary-content .summary-map-txt-box {padding-bottom: 4rem; padding:0 var(--area-padding) 4rem var(--area-padding);}
}

@media all and (max-width:800px){
	
	/* 지도 */
	.summary-map-con {margin-top: 7rem;}
	.summary-content .summary-map-txt-box .summary-map-tit {font-size: 2.8rem;}
	.summary-content .summary-map-txt-box .summary-map-txt {font-size: 1.6rem;}
	.top-txt-box .top-txt {font-size: 1.6rem;}

	/* 이미지 컨텐츠 */
	.summary-img-con {margin-top: 9rem;}
	.summary-img-con .img-wrap {margin-bottom: 5rem;}
	.summary-img-con .img-wrap:last-child {margin-bottom: 5rem;}
	.summary-img-con .img-wrap, .summary-img-con .img-wrap.reverse {flex-direction: column;}
	.summary-img-con .img-wrap .img-box, .summary-img-con .img-wrap .txt-box {width: 100% !important;}
	.summary-img-con .img-wrap .txt-box {margin: 3rem 0 0 0 !important; }
	.summary-img-con .img-wrap.reverse .txt-box {margin-top: 9rem !important;}
	.summary-img-con .img-wrap .summary-con-tit {font-size: 2.8rem; padding-bottom: 1rem;}
	.summary-img-con .img-wrap .summary-con-txt {font-size: 1.6rem; line-height: 1.8em;}

	/* -------- 아코디언 스타일 02 -------- */
	/* 아코디언 전체 레이아웃 */
	.accordion-list-box {margin-bottom: 7rem;}
}

@media all and (max-width:1024px){
	.accordion-list .accordion-item {padding-top: 20%;}
	.accordian-tit-box .accordian-tit strong {font-size: 2.2rem; font-weight: 800;}
	.company-page .accordion-list-box .accordion-item .main-visual-more-btn {opacity: 1;}
}

@media all and (max-width:800px){
	.accordion-list .accordion-item {padding-top: 30%;}
	.accordion-list .accordion-item .accordion-inner{width: 100%;}
}

/* ******************  contact ********************** */
@media all and (max-width:1280px){
	/* 멥 */
	.contact-top-container .contact-map-con {margin-left: 3rem; width: calc(50% - 3rem);}
}

@media all and (max-width: 800px){
	.contact-page .contact-top-container {flex-direction: column-reverse;}
	.contact-top-container .bbs-write-tbl-box, .contact-top-container .contact-map-con {width: 100%;}
	.contact-top-container .bbs-write-tbl-box {margin-top: 4rem;}
	.contact-top-container .contact-map-con {margin-left: 0;}
	.contact-page form {margin-top: 7rem;}
	.contact-content {padding-bottom: 7.5rem;}
	.contact-page .agree-wrap .bbs-inquiry-agree-con {width: 71.74%;}
	.contact-page .agree-wrap .inner {justify-content: space-between;}
	.contact-top-container .contact-map-con iframe {height: 35rem;}
}