@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.5rem;}
	/* 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:5rem; line-height:5rem; 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-menu-style.open .sub-drop-open-btn-style .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: 1.5rem 1.5rem; border:0;}
	.sub-drop-menu-style ul li a em{font-size:1.5rem;}
	.sub-drop-menu-style ul li.selected{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;}
}

/* ****************** 01 Company :: 01 CEO 인사말 ********************** */
@media all and ( max-width:800px ){	
	.ceo-page {padding-bottom: 10rem;}
	.ceo-page:before {height: 88%;}
	.ceo-con01-img img {border-radius:15px;}
	.ceo-con01-img img:last-of-type {max-width:28rem;}
	.ceo-con01-txt {flex-direction:column; margin-top: 8rem;}
	.ceo-con01-txt .tit {width: 100%; padding-left: 1rem; font-size: 3.4rem;}
	.ceo-con01-txt .txt-box {width: 100%; padding-top: 3rem;}
	.ceo-con01-txt .tit:before {left: -1rem;}
	.ceo-con01-txt .txt-box:after {right: 0; bottom: 0;}
}
@media all and ( max-width:480px ){	
	.ceo-page:before {height: 92%;}
}

/* ****************** 01 Company :: 04 오시는길 ********************** */
@media all and (max-width:800px){
	/* 오시는길 :: 하단 */
	.location-bottom-con{margin-top: 5rem;}
	.location-bottom-left{width: 100%;}
	.location-bottom-left h5{font-size: 4rem;}
	.location-bottom-right{padding-top: 4rem; width: 100%; padding-left: 0; border-left:none;}
	.location-bottom-right-list li{width: 100%; font-size: 1.8rem; line-height: 1.3;}
	.location-bottom-right-list li + li{margin-top: 1.6rem;}
	.location-bottom-right-list li .icon{margin-right: 2.4rem; width: 4.4rem; height: 4.4rem; font-size: 2rem;}
}

/* ****************** 02 ESG :: 01 ESG 경영 ********************** */
@media all and (max-width:1280px){
	#fullpageEsg .section {height:auto !important;}
	#fullpageEsg .fp-section .fp-tableCell {height:auto !important;}
	#esg01 {padding: 12rem 0;}
	.esg-tit {font-size:4rem;}
	.esg-txt {font-size:1.6rem;}
	.regulation-list p {font-size:1.7rem;}

	.esg01-result-txt p {font-size:4rem;}
	
	#esg02 {padding: 12rem 0;}
	#esg03 {padding: 12rem 0;}
	#esg04 {padding: 12rem 0;}
	#esg05 {padding: 20rem 0;}
	
	.esg-cm-list li {width: 20rem;}
	.esg-cm-list .icon-box {width: 10rem; height: 10rem;}
	.esg-cm-list-tit {font-size:1.7rem;}
	
	.esg-bg-txt svg {height: 30rem;}
	#esg03 .esg-bg-txt {left: auto; right: -2rem;}
	#esg04 .esg-bg-txt {left: -1rem; }
}

@media all and (max-width:800px){
	.esg-tit {font-size: 3.6rem;}
	.esg-tit02 {font-size: 2.8rem;}
	
	.esg-cm-list li {width: 33.333%;}
	
	.esg02-list-box ul li:not(:nth-child(1))  {width: 26%;}
	.esg02-list-box ul li:nth-child(1) {width: 22%;}
	.esg02-list-box ul .center .icon-box span {display: block; height: 4.9rem;}
	.esg02-list-box ul .center .icon-box span img {max-height: 100%;}
	.esg02-list-box .tit {font-size: 1.6rem;}
	.esg02-list-box ul .center .item-tit {font-size: 1.6rem;}
	.esg02-list-box ul .bottom .item-tit {font-size: 1.4rem;}
	.esg02-list-box ul .bottom .icon-box span {display: block; height: 3.7rem;}
	.esg02-list-box ul .bottom .icon-box span img {max-height: 100%;}
	
	.regulation-list li {height: 26rem;}
	.regulation-list span {width: 10rem; height: 10rem; line-height: 10rem; margin: 0 auto 3rem;}
	.regulation-list span img {height: 50px;}
	
	#esg05 {padding: 12rem 0;}
	
}

@media all and (max-width:640px){

	.esg01-result-txt {margin-left: 0; text-align:center; padding-top: 12rem;}
	.esg01-result-txt p {font-size:3.5rem;}
	
	.esg-cm-list {flex-wrap:wrap;}
	.esg-cm-list li {width: 100%; display:flex; padding: 2rem; margin-top: 1.5rem; align-items: center;}
	.esg-cm-list li:first-of-type {margin-top: 0;}
	.esg-cm-list .icon-box {margin: 0;}
	.esg-cm-list .icon-box span {width: 5.5rem;}
	.esg-cm-list-txt {margin-left: 3rem; text-align:left; width: calc(100% - 10rem); margin-left: 0; padding-left: 2rem; box-sizing: border-box;}
	
	.esg-bg-txt  {display: none;}
}

@media all and (max-width:480px){
	.esg01-result-txt p span > em:before {top: -0.5rem; width: 5px; height: 5px;}

}

/* ****************** 03 Product  ********************** */
@media all and (max-width:1280px){
	/* 황토볼 */
	.pd-con.key-intro {padding: 15rem 0;}
	.pd-con.key-intro .inner-box {display: block;}
	.pd-con.key-intro .inner-box .left-con {margin-bottom: 10rem;}
	
	.key-intro-list {display: flex; gap:4rem;}
	.key-intro-list li:last-of-type {margin-top: 0;}
	
	.pd-strength-list li {width: calc(25% - 2rem);}
	
	.pd01-materials-item .top-con .img {width: 56.16%;}
	.pd01-materials-item .top-con .img .inner .tit strong {height: 5rem; padding: 0 3.7rem; font-size: 2rem;}
	.pd01-materials-item .top-con .txt-list {width: 43.84%;}
	
	/* 천연충전재 */
	.pd02-materials-item .txt-box {padding: 2rem 4rem;}

}
@media all and (max-width:800px){
	/* 황토볼 */
	.pd-intro-box .tit {font-size: 3.4rem;}
	.pd-intro-box .txt {margin-top: 3.5rem;}
	
	.pd-intro-flow-wrap {bottom: -2.7rem;}
	.pd-intro-flow-wrap  .inner {height: 14rem;}
	.pd-intro-flow-wrap .maskBg .marquee .absol h4 {font-size: 12rem;}
	
	.pd-cm-tit {font-size: 3.8rem;}
	.pd-con.key-intro {padding: 8rem 0;}
	.pd-con.key-intro .inner-box .left-con {margin-bottom: 5rem;}
	.key-intro-list {display: block;}
	.key-intro-list li {width: 100%; height: auto;}
	.key-intro-list li:last-of-type{margin-top: 2rem;}
	
	.pd-con.key {padding: 10rem 0;}
	.pd-strength-list li {width: calc(50% - 2rem); padding:2.8rem 2rem ;}
	
	.pd-con.specifications {padding: 10rem 0;}
	.pd-specifications-list {}
	.pd-specifications-list li {width: 100%;}
	.pd-specifications-list li .tit-box {font-size: 2rem;}
	.pd-specifications-list li .inner {padding: 0 2.5rem;}
	
	.pd-specifications-list.pd01 li.s-item {max-width: 42rem; width: 90%;} 
	
	.pd-con.materials {padding: 10rem 0;}
	.pd01-materials-list {display: block;}
	.pd01-materials-item {width: 100%;}
	.pd01-materials-item .top-con {left: 0; display: block;}
	.pd01-materials-item .top-con .img {width: 100%;}
	.pd01-materials-item .top-con .txt-list {width: 100%; flex-direction: row; flex-wrap: wrap; gap:2rem; padding-top: 5rem;}
	.pd01-materials-item .top-con .txt-list li {width: calc(50% - 1rem);}
	.pd01-materials-item.item01 .top-con {width: 100%;}
	.pd01-materials-item.item02 {margin-top: 10rem;}
	.pd01-materials-item.item02 .top-con {left: 0;}
	.pd01-materials-item .bottom-con {display: block; margin-top: 4rem; padding: 0;}
	.pd01-materials-item .bottom-con dl { max-width: none; min-height: 0;}
	
	.pd-con.plant {padding: 10rem 0;}
	.pd-plant-inner {padding-right: 0;}
	.pd-plant-box {padding: 5rem 3.5rem;}
	.pd-plant-box .txt01 {font-size: 2rem;}
	
	.pd-con.applications {padding: 10rem 0;}
	.pd01-applications-list li .txt-box .tit {font-size: 2.2rem;}
	
	/* 천연충전재 */
	.pd02-page .pd-strength-list {margin: -1rem;}
	.pd02-page .pd-strength-list li { width: calc(50% - 2rem); margin: 1rem;}
	.pd02-materials-item {display: block; padding: 2.5rem;}
	.pd02-materials-item .img-box {margin-right: 0; width: 100%; margin-bottom: 2rem;}
	.pd02-materials-item .txt-box {width: 100%; padding: 3rem 2.5rem;}
	.pd02-materials-item .txt-box dl dt strong {font-size: 2.4rem;}
	.pd02-materials-item .img-box strong {font-size: 2rem;}
	.pd02-applications-list li .txt-box {padding: 3rem 3rem 4rem;}
	
	/* 천연잔디 보호매트 */
	.pd03-page .pd-strength-list {margin: -1rem;}
	.pd03-page .pd-strength-list li {margin: 1rem; width: calc(50% - 2rem);}
	
	.pd-con.structures {padding: 10rem 0;}
	.pd-structures-con {padding: 3rem;}
	.pd-structures-con .left-con {width: 100%; margin-bottom: 2rem;}
	.pd-structures-con .right-con {width: 100%;}
	.pd-structures-box {width: calc(50% - 1rem); padding: 2.5rem;}
	.pd03-page .pd-con.applications {padding: 10rem 0;}
	.pd03-applications-list li .img-box {padding: 2rem;}
}
@media all and (max-width:480px){
	.pd-structures-box {width:100%;}
}


/* ****************** 04 Business :: 01 스포츠시설 ********************** */
@media all and (max-width:1280px){
	.business-tit-con .tit span:before { top: -0rem;  width: 0.8rem; height: 0.8rem; }
	.business-bt-con.bt-03 {height:auto; padding: 5rem 0 10rem;}
	.business-bt-box {display: block;}
	.business-bt-box.box2 {padding: 0;}
	.business-bt-box .img-box {width: 100%; padding: 0 4rem;}
	.business-bt-box .tit-box {text-align: center; padding-left: 0; width: 100%;}
	.business-bt-box .tit-box a {margin: 3rem auto 0;}
}
@media all and (max-width: 800px) {
	.business-tit-con .tit {font-size: 3rem;}
	.business-con {gap:6rem; padding: 7rem 0 12rem;}
	.business-item {width: 100%;}
	.business-item .img-box .inner strong {min-width: 21rem; font-size: 2rem;}
	
	.business-bt-con {height:auto; padding: 5rem 0 12rem;}
	.business-bt-con.bt-03 { padding: 5rem 0 12rem;}
	.business-bt-inner {display: block;}
	.business-bt-inner .img-box {width: 100%; padding: 0 4rem; box-sizing: border-box;}
	.business-bt-inner .tit-box {width: 100%; padding-left: 0; text-align: center;}
	.business-bt-inner .tit-box a {margin: 4rem auto 0;}
	.business-bt-inner .tit-box strong {font-size: 3.6rem;}
	.business-bt-box {width: 100%;}
	.business-bt-box:before {display: none;}
	.business-bt-box.box2 {padding-top: 5rem;}
}