@charset "utf-8";

/* ******************  서브공통 ********************** */
/* -------- 공통 스크롤바  -------- */
@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 !important; 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 (min-width:801px){
	.sub-tab-list-style ul{border-radius:8rem; padding:1rem 0.5rem;}
	.sub-tab-list-style ul li.selected a,
	.sub-tab-list-style ul li a:hover{z-index:1; box-shadow: 3px 4px 10px 0px rgba(0, 81, 118, 0.2);
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0095da+0,0956b5+100 */
	background: #0095da; /* Old browsers */
	background: -moz-linear-gradient(left,  #0095da 0%, #0956b5 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  #0095da 0%,#0956b5 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  #0095da 0%,#0956b5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0095da', endColorstr='#0956b5',GradientType=1 ); /* IE6-9 */
	}
}
@media all and (min-width:801px){
	.product-tab-list-style ul li{display:inline-block; position:relative; max-width:40rem; width:33.33%; margin:0 2rem;}
	.product-tab-list-style ul li a{display:table; height:7rem; width:100%; background-color:#eee; border-radius:7rem; transition:var(--transition-custom);}
	.product-tab-list-style ul li.selected a,
	.product-tab-list-style ul li a:hover{z-index:1; background:var(--main-color2);}
	.product-tab-list-style ul li.selected a em,
	.product-tab-list-style ul li a:hover em{color:#fff; }
}
@media all and (max-width:1220px){
	.sub-tab-list-style .area{padding:0}
}
@media all and ( max-width: 800px ){
	.product-tab-wrapper-style{height:auto; margin-bottom:5rem;}
	/* Tab 공통 스타일 */
	.sub-tab-wrapper-style,
	.sub-tab-list-style.top-fixed,
	.sub-tab-list-style ul li a{height:40px; }
	/* 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; box-sizing:border-box; border-bottom:1px solid #ddd; font-weight:700;}
	.sub-drop-open-btn-style span{color:#333; }
	.sub-drop-open-btn-style .arrow{color:#333; position:absolute; top:50%; right:15px; margin-top:-7px}
	.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: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:var(--main-color2); font-weight:600; }
}


/* ******************  공통텍스트 ********************** */
@media all and (max-width:800px){
	.cm-tit{font-size:2.4rem;}
	.cm-txt{font-size:1.6rem;}
	.cm-sub-tit{font-size:2rem; margin-bottom:1rem;}
}

/* ******************  Company ********************** */
/* --------  Company :: 인사말 -------- */
@media all and (max-width:800px){
	/* 타이틀 */
	.greeting-tit-box{margin-bottom:5rem;}
	.greeting-tit-box .sub-txt{font-size:1.8rem;}
	.greeting-tit-box .txt{font-size:2.4rem;}
	.greeting-tit-box .txt b{margin-bottom:0.8rem;}
	/* 컨텐츠 */
	.greeting-item{display: block;}
	.greeting-item .img-box{width:100%; margin-bottom:3.2rem;}
	.greeting-item .img-box img{width:100%; max-width:none;}
	.greeting-item .txt-box{width:100%; padding-left:0;}
	.greeting-item .txt-box .greeting-txt{font-size:1.8rem;}
	.greeting-item .txt-box > p{margin-bottom:1.5rem;}
	.greeting-item .txt-box .ceo-name{margin-top:6rem;}
	.greeting-item .txt-box .ceo-name .ceo{font-size:1.8rem;}
	.greeting-item .txt-box .ceo-name .name{font-size:2.6rem;}
	/* 중간 타이틀 */
	.greeting-middle-tit{margin:9rem 0 9rem;}
	.greeting-middle-tit .tit{font-size:1.4rem;}
	.greeting-middle-tit .tit:before{font-size:5.6rem; line-height:0.82;}	
}

@media all and (max-width:800px){
	.ideology-txt-box{margin-bottom:5rem;}
	.ideology-txt-box .ideology-tit{font-size:3rem; margin-bottom:3rem;}
	.ideology-txt-box .ideology-txt{font-size:1.8rem;}
	.ideology-con-box{display: block;}
	.ideology-con-box .ideology-item{width:100%;margin-bottom:4rem;}
	.ideology-con-box .ideology-item .img-box{max-width:70%; margin:auto;}
	.ideology-con-box .ideology-item .txt-box{margin-top:1.5rem;}
	.ideology-con-box .ideology-item .txt-box .txt{font-size:1.8rem;}
}

@media all and (max-width:800px){
	.ci-con-wrap{margin-bottom:8rem;}
	.ci-tit-box{display: block; margin-bottom:2rem;}
	.ci-tit-box .cm-tit{margin-right:0rem;}
	.ci-tit-box .txt{font-size:1.8rem; margin-top:1rem;}
	/* Brand Value */
	.ci-top-banner{height:30rem;}
	.ci-top-banner .banner-tit{font-size:3rem;}
	.ci-top-banner .banner-txt{font-size:1.8rem;}
	/* Symbol Mark */
	.ci-mark-box{display: block; height:auto;}
	.ci-mark-box .left-box{width:100%; }
	.ci-mark-box .left-box:before{right:50%; top:auto; bottom:0; transform:translate(50%, 50%) rotate(90deg);}
	.ci-mark-box .left-box .txt, 
	.ci-mark-box .left-box .txt em{font-size:4rem; }
	.ci-mark-box .left-box .icon{width:4rem; height:4rem; line-height:4.2rem; font-size:1.8rem;}
	.ci-mark-box .right-box{width:100%; border-top:1px solid #ddd;}
	.ci-mark-box .right-box .logo{text-align:center;}
	.ci-mark-box .right-box .logo img{max-width:75%;}
	/* Signature */
	.ci-signature-box{height:30rem;}
	/* Color System */
	.ci-system-box{display: block;}
	.ci-system-box .system-item{width:100%; margin-top:30%;}
	.ci-system-box .system-item .item-circle{width:50%; /*padding-top:50%;*/}
	.ci-system-box .system-item .item-circle .circle-txt{font-size:2.6rem;}
	.ci-system-box .system-item .item-circle .circle-txt02{font-size:1.8rem;}
	.ci-system-box .system-item .item-box{/*padding:30% 3rem 3rem;*/}
}
/* -------- 오시는길 -------- */
@media all and (max-width:800px){
	.loaction-map-wrap .map-item{padding-top:28rem;}
	.loaction-info-wrap .loaction-item{padding:2rem 0;}
	.loaction-info-wrap .loaction-item dt{font-size:1.4rem; width:10rem;}
	.loaction-info-wrap .loaction-item dt i{margin-right:0.5rem;}
	.loaction-info-wrap .loaction-item dd{width:calc(100% - 10rem);}
	.loaction-info-wrap .loaction-item dd,
	.loaction-info-wrap .loaction-item dd a{font-size:1.4rem;}
	.img-box img {width:100%}
}


/* ----- Product ----- */
@media all adn (min-width:801px){
	.product-list-wrap .list-item:nth-child(-n+3){margin-top:0;}
	.product-list-wrap .list-item a:hover .img-box{background:#fff; border:1px solid var(--main-color2);}
	.product-list-wrap .list-item a:hover .img-box:before{opacity:1;}
	.product-list-wrap .list-item a:hover .txt-box .item-tit{color:var(--main-color2);}
}

@media all and (max-width:800px){
	.product-list-page,
	.product-editor{padding-bottom:5rem;}
	.product-list-wrap .list-item{width:calc(50% - 10px); margin:6rem 5px 0;}
	.product-list-wrap .list-item:nth-child(-n+2){margin-top:0;}
	.product-list-wrap .list-item .img-box{padding:1.5rem;}
	.product-list-wrap .list-item .txt-box{margin-top:3rem;}
	.product-list-wrap .list-item .txt-box .item-tit{font-size:2rem; }
}

@media all and (max-width:800px){
	.cm-product-txt{font-size:1.6rem;}
	.product-con-box .cm-tit{margin-bottom:3rem}

	.product-info-box{display: block; margin-bottom:10rem;}
	.product-info-box .left-box{width:100%; margin-bottom:4rem;}
	.product-big-img-list{border-radius:3rem; padding:3rem;}
	.product-small-img-list{margin:2rem 0 0; padding:0 5rem;}

	.product-info-box .right-box{width:100%; padding-left:0;}
	.product-info-box .right-box .tit{font-size:3.2rem;}
	.product-info-box .right-box .txt-box dt{font-size:2rem;}
	.product-info-box .right-box .info-btn-box .info-btn{width:48%; height:5.2rem; line-height:5.2rem; font-size:1.6rem; padding:0 2.1rem; margin-top:3rem; margin-left:1.5rem;}
}

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

	.product-casting-list .list-item:before{right:-2%;}

	.product-order-line .list-item{padding:0 1rem; box-sizing:border-box;}
	.product-order-line .list-item .txt{font-size:1.5rem;}
}
@media all and (max-width:800px){
	.product-con-box{margin-top:9rem;}

	.product-casting-list .list-item:before{width:4rem; height:4rem; line-height:4rem; font-size:1.8rem; right:-0.5rem;}

	.product-twin-box{display: block;}
	.product-twin-box .img-box{width:100%;}
	.product-twin-box .txt-box{width:100%; padding:3rem;}
	.product-twin-box .txt-box > p{margin-bottom:2.5rem;}
	.product-twin-box .txt-box .inner-example dt{font-size:1.6rem; width:4.2rem; height:4.2rem; line-height:4.2rem;}
	.product-twin-box .txt-box .inner-example dd{font-size:1.6rem;}
}

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

	.product-img-txt-box .img-box.inner-img{display: block;}
	.product-img-txt-box .img-box.inner-img .panel-spec-img01{width:100%;}
	.product-img-txt-box .img-box.inner-img .panel-spec-img02{width:100%; margin-top:2rem;}

	.product-panel-box{margin-bottom:4rem;}
	.product-panel-box .panel-img-box .img-item .img{border-radius:1rem;}
	.product-panel-box .panel-img-box .img-item .txt{font-size:1.6rem; margin-top:1rem;}
	.product-panel-box .panel-txt-box{padding:3rem 1.5rem;}

	.product-img-txt-box .img-box.inner-img .img-half{width:100%; margin-top:2rem;}

	.product-certi-box{display: block;}
	.product-certi-box .certi-item{width:100%; margin-bottom:5rem; padding:0;}
	.product-certi-box .certi-item:last-child{margin-bottom:0;}
	.product-certi-box .certi-item .certi-img{width:30rem; padding-top:41.8rem; margin:auto;}
	.product-certi-box .certi-right-box{width:100%; padding-left:0; margin-top:5rem;}
	.product-certi-box .certi-right-box .right-item{height:auto; padding:2rem 0;}
	.product-certi-box .certi-right-box:before,
	.product-certi-box .certi-right-box:after,
	.product-certi-box .certi-right-box .right-item:before,
	.product-certi-box .certi-right-box .right-item:after{display: none; }
	.product-certi-box .certi-right-box .right-item .txt-box dt{font-size:1.8rem; margin-bottom:1rem;}
	.product-certi-box .certi-right-box .right-item .txt-box dd .txt{position: relative; font-size:1.4rem; padding-left:0.8rem;}
}
@media all and (max-width:480px){

	.product-certi-box .certi-right-box .right-item .icon img{width:35%;}

}
/* ----- Product  ----- */
@media all and (max-width:800px){
	.cm-num-txt:before{font-size:1.6rem;}
	
	.product-concrete-use-box{display: block;}
	.product-concrete-use-box .item-box{width:100%; margin-bottom:3rem;}
	.product-concrete-use-box .item-box .txt-box{padding:2rem 1rem;}
	
	.product-order-line.caution-line .list-item .txt{font-size:1.6rem;}
}
/* ----- Product ----- */
@media all and (min-width:801px){
	.product-clean-box .item-box.width100 .inner-box{width:40.625%;}
	.product-clean-box .item-box.width100 .inner-box.bf-box:before{font-size:3.2rem; right:-18.75%}
}
@media all and (max-width:800px){
	
	.product-img-txt-box .plus-img{margin-top:1.5rem;}
	.product-img-txt-box .plus-img img{max-width:70%;}

	.product-img-txt-box .img-box.inner-img .img-half img{max-width:none; width:100%;}
	.product-img-txt-box .img-box.inner-img .img-half dl{margin-top:1.5rem;}
	.product-img-txt-box .img-box.inner-img .img-half dl dt{font-size:1.8rem; margin-bottom:0.3rem;}

	.product-clean-box{display: block;}
	.product-clean-box .item-box{width:100%; margin-top:3rem;}
	.product-clean-box .item-box:nth-child(2){margin-top:3rem;}
	.product-clean-box .item-box .inner-box.bf-box:before{top:calc(50% - 2.1rem); font-size:1.6rem;}
	.product-clean-box .item-box .inner-box .txt{height:3rem; line-height:3rem; font-size:1.6rem; margin-top:1.2rem;}
	.product-clean-box .item-box .inner-box .img-box img{max-width:none; width:100%;}

	.product-clean-box .item-box.triple-box{display: block; margin:0; width:100%;}
	.product-clean-box .item-box.triple-box .inner-box{width:100%; margin:0 auto 5rem; max-width:400px;}
	.product-clean-box .item-box.triple-box .inner-box .txt{background:#009fff; color:#fff;}
	.product-clean-box .item-box.triple-box .inner-box:before{position: absolute; content:'\e92f'; font-family:'xeicon'; font-size:2rem; color:var(--main-color2); top:auto; right:50%; bottom:-2.5rem; transform:translate(50%, 50%) rotate(180deg);}	
}


@media all and (max-width:800px){
	.suez-con-box{margin-bottom:4rem;}
	.suez-con-box .suez-img-list{flex-wrap:wrap; margin-top:3rem;}
	.suez-con-box .suez-img-list .img-item{width:48%; margin-bottom:1.5rem;}
}


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

	.apartment-list-box{padding:3rem; }
	.apartment-list-box .list-item{width:50%; padding-right:1rem; box-sizing:border-box;}

	.apartment-effect-box .effect-tag-box{margin-bottom:2rem;}
	.apartment-effect-box .effect-tag-box .tag-item{height:4rem; line-height:4rem;}
	.apartment-effect-box .effect-tag-box .tag-item .txt{font-size:1.6rem}
	.apartment-effect-box .effect-img-list{padding:0; flex-wrap:wrap;}
	.apartment-effect-box .effect-img-list .list-item{width:100%; margin-bottom:3rem;}
	.apartment-effect-box .effect-img-list .list-item .txt-box{margin-top:1rem;}
	.apartment-effect-box .effect-img-list .list-item .txt-box dt{font-size:1.8rem;}
	.apartment-effect-box .effect-img-list .list-item .txt-box dd{font-size:1.4rem;}
}