/**** 공통 css 클래스 추가 ****/
.displaynone { display: none !important; }
.displayFlex { display: -ms-flexbox !important; display: -webkit-box !important; display: flex !important; }
.displayFlex.flexWrap { -ms-flex-wrap: wrap; -webkit-box-lines: multiple; flex-wrap: wrap; }
.displayFlex.directionRow { -ms-flex-direction: row; -webkit-box-orient: horizontal; flex-direction: row; }
.displayFlex.directionColumn { -ms-flex-direction: column; -webkit-box-orient: vertical; flex-direction: column; }
.displayFlex.directionRowR { -ms-flex-direction: row-reverse; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; flex-direction: row-reverse; }
.displayFlex.directionColumnR { -ms-flex-direction: column-reverse; -webkit-box-orient: vertical; -webkit-box-direction: reverse; flex-direction: column-reverse; }
.displayFlex.contentCenter { -ms-flex-pack: center; -webkit-box-pack: center; justify-content: center; }
.displayFlex.contentStart { -ms-flex-pack: start; -webkit-box-pack: start; justify-content: flex-start; }
.displayFlex.contentEnd { -ms-flex-pack: end; -webkit-box-pack: end; justify-content: flex-end; }
.displayFlex.contentBetween { -ms-flex-pack: justify; -webkit-box-pack: justify; justify-content: space-between; }
.displayFlex.contentAround { justify-content: space-around; }
.displayFlex.contentEvenly { justify-content: space-evenly; }
.displayFlex.alignCenter { -ms-flex-align: center; -webkit-box-align: center; align-items: center; }
.displayFlex.alignStart { -ms-flex-align: start; -webkit-box-align: start; align-items: start; }
.displayFlex.alignEnd { -ms-flex-align: end; -webkit-box-align: end; align-items: flex-end; }
.displayFlex.alignStretch { -ms-flex-align: stretch; -webkit-box-align: stretch; align-items: stretch; }
.displayFlex.flexCenter { -ms-flex-pack: center; -webkit-box-pack: center; justify-content: center; -ms-flex-align: center; -webkit-box-align: center; align-items: center; }

/**** 상단영역 ****/
.header-dummy { height: 64px; display: none;}
.header { position: fixed; top: 0; left: 0; width: 100%; z-index: 11; -khtml-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;    }
.header_top{-khtml-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
.header_top.on {background: #fff;}
.header.open_menu .header_top{ z-index: 51; position: relative; }
.header_top .inner { margin: 0px 50px; }
.header_top .logo { position: absolute; top: 21px; left: 0; display: block; width: 105px; height: 34px; background: url(../img/logo/logo-black.png) no-repeat center; background-size: 100%; z-index: 99999 !important;}
.header.open_menu .logo{background: url(../img/logo/logo-white.png) no-repeat !important;background-size: 100% !important;}
.header_top.on .logo, 
.header_top.prepare .logo { background: url(../img/logo/logo-black.png) no-repeat; }
.header_top .header-category{ transition: all 0.35s; -webkit-transition: all 0.35s; -ms-transition: all 0.35s; }
.header.open_menu .header_top .header-category{ opacity: 0; visibility: hidden; }
.header_top .header-category ul { list-style: none; }
.header_top .header-category li { margin: 0px 20px; padding: 34px 0px; }
.header_top .header-category li a { color: #3b3c3c; font-size: 14px; font-family: 'Lato', sans-serif; text-decoration: none; display: block; font-weight: 700; position: relative; }
.header_top.on .header-category li a, .header_top.prepare .header-category li a { color: #3b3c3c; }
.header_top .header-category li a:after { content: ''; position: absolute; bottom: -5px; height: 2px; right: 0; width: 0; background-color: #3b3c3c; -khtml-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s; }
.header_top.on .header-category li a:after, .header_top.prepare .header-category li a:after { background-color: #3b3c3c; }
.header_top .header-category li:hover a:after { left: 0; width: 100%; }

/* 상단 fixed */
.header.fixed .header_top{background: rgba(255,255,255,1); height: 86px;}
.header.fixed .header_top .logo,
.header.fixed.white_header .header_top .logo{ background: url('../img/logo/logo-black.png') no-repeat; background-size: 100%;}
.header.fixed .header_top .header-category li a,
.header.fixed.white_header .header_top .header-category li a{color: #222 !important;}
.header.fixed .icon-menu li.menu span,
.header.fixed.white_header .icon-menu li.menu span,
.header.fixed.white_header .header_top .header-category li a:after{background: #222 !important;}
.header.fixed .icon-menu .icon-menu-inner{border-color: #222 !important;}

/* 상단 화이트버전 */
.header.white_header .header_top .logo{ background: url('../img/logo/logo-white.png') no-repeat; background-size: 100%;}
.header.white_header .header_top .header-category li a{color: #fff;}
.header.white_header .header_top .header-category li a:after,
.header.white_header .icon-menu li.menu span,
.header.white_header .icon-menu li.menu .open span{background: #fff;}
.header.white_header .icon-menu .icon-menu-inner{border-color: #fff;}

/* 아이콘 메뉴 */
.icon-menu { position: fixed; top: 17px; right: 50px; z-index: 51; }
.icon-menu .main-category { margin: 19px 30px 0 0; transition: all 0.35s; -webkit-transition: all 0.35s; -ms-transition: all 0.35s; opacity: 0; visibility: hidden; }
.icon-menu.open_menu .main-category { opacity: 1; visibility: visible; }
.icon-menu .icon-menu-inner { margin: 0px; border: 1px solid #222; padding: 10px; cursor: pointer; border: none !important;}
.icon-menu li { margin-left: 20px; vertical-align: middle; }
.icon-menu li a { font-size: 14px; color: #8e8e8e; }
.icon-menu li.menu { width: 30px; height: 30px; position: relative; margin: 0px;}
.icon-menu li.menu a { display: block; height: 100%; width: 100%; }

/* 아이콘 메뉴 효과 */
.icon-menu li.menu .open:hover .line01{width: 90%;}
.icon-menu li.menu .open:hover .line02{width: 50%;}
.icon-menu li.menu .open:hover .line03{width: 80%;}
.icon-menu li.menu .open span { display: block; position: absolute; left: 0; width: 100%; height: 2px; background: #3b3c3c; -khtml-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
.icon-menu li.menu .open .line01 {top: 5px;}
.icon-menu li.menu .open .line02 {top: 15px;}
.icon-menu li.menu .open .line03 {top: 25px;}
.icon-menu.open_menu li.menu .open span{width: 0%;}
.icon-menu.open_menu li.menu .open .line01 {transition-delay: .4s;}
.icon-menu.open_menu li.menu .open .line02 {transition-delay: .5s;}
.icon-menu.open_menu li.menu .open .line03 {transition-delay: .6s;}
.icon-menu li.menu .close{opacity: 0;visibility: hidden;display: block; top: 0; left: 0; position: absolute; -khtml-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);}
.icon-menu li.menu .close span{background: #fff !important; display: block;position: absolute; -khtml-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
.icon-menu li.menu .close .line01{height: 2px;width: 0%;top: 14px; left: 0;}
.icon-menu li.menu .close .line02{width: 2px; height: 0%; top: 0; left: 50%; margin-left: -1px;}
.icon-menu.open_menu li.menu .close{opacity: 1; visibility: visible;}
.icon-menu.open_menu li.menu .close span{}
.icon-menu.open_menu li.menu .close .line01 {transition-delay: .9s;width: 100%;}
.icon-menu.open_menu li.menu .close .line02 {transition-delay: 1.0s;height: 100%;}
.icon-menu.open_menu .icon-menu-inner{border: 1px solid #fff;}

/* 견적문의 버튼 */
.btn-quote-wrap{position: fixed; transition: all 0.5s ease-in-out;overflow: hidden; width:52px; height: 52px; right: 50px; bottom: 50px; -webkit-animation: heartbeat 1.5s ease-in-out infinite both;animation: heartbeat 1.5s ease-in-out infinite both;}
.btn-quote-wrap:hover{width: 150px;}
.btn-quote-wrap::before{content:"";opacity: 0; width: 0px; height: 52px; display: block; position: absolute; left: -20px; background: #fff; right: 0; top: 0; transition: all 0.4s ease-in-out;}
.btn-quote-wrap:hover::before{left: 150px; width: 20px; opacity: 1;}
.btn-quote-wrap .btn-quote {display: block; float: right; background: #181818 url(../img/icon/btn-quote6.png) no-repeat center center;  padding: 0; height: 52px; width: 52px; z-index: 13;}
.btn-quote-wrap .text{color: #fff; background: #181818;overflow: hidden; opacity: 0; visibility: hidden; line-height: 52px; height: 52px; width: 0px; position: absolute; bottom: 0; right: 0; text-align: center;font-size: 13px; z-index: 13;}
.btn-quote-wrap:hover .text{opacity: 1; visibility: visible; width: 150px;}
.btn-quote-wrap .text a{color: #fff;display: block;box-sizing: border-box;padding-right: 20px;}
.btn-quote-wrap .text .icon{position: absolute; top: 21px; width: 25px; height: 11px; right: 14px;}
.btn-quote-wrap .text svg { vertical-align: top; height: 11px; width: 25px; -webkit-transform: translateZ(0); transform: translateZ(0); }
.btn-quote-wrap .text polyline { stroke-dasharray: 55; stroke-dashoffset: 55; -webkit-transition: .3s; transition: .3s; }
.btn-quote-wrap .text svg .st0 { stroke: #fff; fill: none; stroke-width: 4; }
.btn-quote-wrap:hover .text polyline { stroke-dashoffset: 0; -webkit-transition: .3s .4s; transition: .3s .4s; transition-delay: .5s;}
.btn-quote-wrap:hover .text line { stroke-dashoffset: 0; -webkit-transition: .3s .3s; transition: .3s .3s; transition-delay: .5s;}}
.btn-quote-wrap .text svg .st0 { stroke: #fff; fill: none; stroke-width: 4; }
.btn-quote-wrap .text line { stroke-dasharray: 140; stroke-dashoffset: 140; -webkit-transition: .4s; transition: .4s; }
@keyframes heartbeat {
  30% {
		transform: translateY(-10px);
		animation-timing-function: ease-out;
  }
  100% {
		transform: translateY(0px);
		animation-timing-function: ease-in;
  }
}

/* 탑 버튼 */
a.btn-top {position: fixed; overflow: hidden; font-size: 16px; border-radius: 0; bottom: 150px; color: #000; font-weight: 600; transform: rotate(270deg); letter-spacing: 2px; right: 58px;}
a.btn-top span{transform: translateY(-16px);display: block;-khtml-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.2s ease-in-out;}
a.btn-top:after { content: ""; position: absolute; display: block; width: 20px; height: 12px; background: url(../img/icon/icon-arrow-top.png) no-repeat; top: 22px; left: 50%; margin-left: -10px; opacity: 0; visibility: hidden; -khtml-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;    }
a.btn-top:hover { background-position: center 12px; }
a.btn-top:hover:after { opacity: 1; visibility: visible; top: 17px; }
a.btn-top.show {bottom: 150px;}
a.btn-top.show span{transform: translateY(-2px);}

/* 검색영역 */
.side-search { position: fixed; top: 0; right: 0; width: 33.333%; height: 100%; background: rgba(0, 0, 0, .9); z-index: 12; opacity: 0; visibility: hidden; transition: all .8s cubic-bezier(0.165, 0.84, 0.44, 1); }
.side-search.on { opacity: 1; visibility: visible;    }

/* 우측 메뉴 */
.side-menu-bg{position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 11; opacity: 0; visibility: hidden;}
.side-menu-bg.open_menu{opacity: 1; visibility: visible;}
.side-menu { position: fixed; top: 0; left: -100%; width: 100%; height: 100%; background: rgba(37, 37, 37, 1); z-index: 12; opacity: 0; visibility: hidden; -khtml-transition: all 0.8s ease-in-out; -moz-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; }
.side-menu.open_menu {left: 0%; opacity: 1; visibility: visible; }
.side-menu .wrap-inner { display: table; width: 100%; height: 100%; }
.side-menu .wrap-inner .all-category { display: table-cell; vertical-align: middle; height: 100%; width: 100%; text-align: center; }
.side-menu .wrap-inner .all-category .category-box { margin: 0 4%; text-align: left; position: relative; }
.side-menu .wrap-inner .all-category .category-box .depth-one, 
.side-menu .wrap-inner .all-category .category-box .depth-two-wrap, 
.side-menu .wrap-inner .all-category .category-box .depth-two-wrap li::before { opacity: 0; visibility: hidden; -khtml-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; }
.side-menu.open_menu .wrap-inner .all-category .category-box .depth-one, 
.side-menu.open_menu .wrap-inner .all-category .category-box .depth-two-wrap { opacity: 1; visibility: visible; }
.side-menu .wrap-inner .all-category .category-box .depth-one { font-size: 35px; font-weight: 500; line-height: 1; display: block; color: #fff; margin-top: 0px; }
.side-menu.open_menu .wrap-inner .all-category .category-box .depth-one { margin-top: 0px; transition-delay: 0.3s; }
.side-menu .wrap-inner .all-category .category-box .depth-two-wrap { margin: 45px 0 0 -50px; }
.side-menu.open_menu .wrap-inner .all-category .category-box .depth-two-wrap { margin-left: 4px; transition-delay: 0.5s; }
/*
.side-menu .wrap-inner .all-category .category-box .depth-two-wrap li::before { content: ""; display: inline-block; vertical-align: middle; width: 8px; height: 2px; background: #8e8e8e; margin-left: -10px; margin-bottom: 7px; }
.side-menu .wrap-inner .all-category .category-box .depth-two-wrap li:hover::before { opacity: 1; visibility: visible; margin-right: 6px; margin-left: 0px; background: #fff; }
*/
.side-menu .wrap-inner .all-category .category-box .depth-two-wrap li a { font-size: 18px; color: #8e8e8e; line-height: 40px; -khtml-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; }
.side-menu .wrap-inner .all-category .category-box .depth-two-wrap li:hover a { color: #fff; margin-left: 5px; }
.side-menu .wrap-inner .sns_wrap{ position: absolute; top: 50%; left: 50px; transform: translateY(-50%); }
.side-menu .wrap-inner .sns_wrap li{ margin: 22px 0; }
.side-menu .wrap-inner .sns_wrap li a img{ width: 20px; height: auto; }


/**** 하단 영역 ****/
.footer{ text-align: center; margin: 150px 0 50px; }
.footer .ft_menu{ margin-bottom: 13px; }
.footer .ft_menu li a{ font-size: 15px; margin: 0 15px; color: #222; }
.footer .simple-footer p span{ font-size: 14px; color: #8e8e8e; padding: 0 10px; line-height: 24px; }
.footer .simple-footer p span *{color: #8e8e8e;}
.side-menu .footer { position: absolute; bottom: 0px; left: 0; width: 100%; transition: all 0.5s; -webkit-transition: all 0.5s; -ms-transition: all 0.5s; opacity: 0; visibility: hidden; }
.side-menu.open_menu .footer{ opacity: 1; visibility: visible; transition-delay: 0.9s; bottom: 30px; }
.side-menu .footer *, .side-menu .footer .ft_menu li a{ color: #fff; }
.side-menu.footer .simple-footer p span{ color: #8e8e8e; }


/**** 모바일/테블릿 리사이징 ****/

@media(max-width: 1280px) {

    /* 상단영역 */ 
	.header_top .inner { margin: 0 20px; } 
	.icon-menu { right: 15px; }
}

@media(max-width: 950px) {

    /* 상단영역 */
	.side-menu .wrap-inner .all-category .category-box {margin: 0 3%;}
	.side-menu .wrap-inner .all-category .category-box .depth-one {font-size: 25px;}
	.side-menu .wrap-inner .all-category .category-box.on .depth-one {color: #fff;}
	.side-menu .wrap-inner .all-category .category-box .depth-two-wrap {margin: 20px 0 0;}
    .side-menu .wrap-inner .all-category .category-box .depth-two-wrap li a { font-size: 16px; line-height: 29px; -khtml-transition: all 0.5s ease-in-out;  -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; }
}

@media(max-width: 769px) {

    /* 상단영역 */
	.header_top .logo{z-index: 999;}
    .header_top .header-category{ display: none; } 
	.header.open_menu .header_top{ z-index: 99999;}
	.icon-menu{ width: 100%; height: 32px; }
	.icon-menu .icon-menu-inner { margin: 0px; float: right; border: none; padding: 0;}
	.icon-menu .main-category{ margin: 50px 0 0 20px; }
	.icon-menu li.kcp_link{display: none;}
	.icon-menu.open_menu li.menu .open:hover span{width: 0%;}
	.icon-menu li.menu .open:hover span{width: 100% !important;}

	/* 상단 fixed */
	.header.fixed .header_top{height: 70px;}
	.header.fixed .header_top .logo{top: 14px;}	

	/* 탑버튼 */
	a.btn-top{bottom: 100px; right: 30px; font-size: 12px;}
	a.btn-top:hover { background-position: center 21px; }
	a.btn-top:after{display: none;}
	a.btn-top.show { bottom: 100px; }
	a.btn-top span { transform: translateY(-12px);}

	/* 견적의뢰 버튼 */
	.btn-quote-wrap{bottom: 19px; right: 20px; width: 50px; height: 50px; }
	.btn-quote-wrap:hover{width: 50px;}
	a.btn-quote{background-size: 20px;}
	.btn-quote-wrap::before,
	.btn-quote-wrap .text{display: none;}
	.btn-quote-wrap a.btn-quote + .text{ bottom: 18px;}
	.btn-quote-wrap a.btn-quote.show + .text{ bottom: 75px;}

	/* 전체카테고리 */
	.side-menu{height: calc(100% + 300px);padding: 120px 0;}
	.side-menu.open_menu{ } 
	.side-menu .wrap-inner{display: block; width:calc(100% - 25px); margin-right:25px; height: 60vh; overflow-y: auto;}
	.side-menu .wrap-inner::-webkit-scrollbar { width: 5px; background: #8e8e8e; border-radius:15px;} 
	.side-menu .wrap-inner::-webkit-scrollbar-thumb { background: #fff; border-radius:15px;}
	.side-menu .wrap-inner .all-category{ display: block; margin: 0px 20px 100px; width: auto; height: auto; } 
	.side-menu .wrap-inner .all-category .category-box{ display: block; margin: 0 0 26px; } 
	.side-menu .wrap-inner .all-category .category-box .depth-one { color: #8e8e8e; display: inline-block; } 
	.side-menu.open_menu .wrap-inner .all-category .category-box .arrow{ background: url('../img/icon/icon-arrow-top.png') no-repeat center; width: 13px; height: 8px; display: inline-block; background-size: 13px; opacity: 0.5; padding: 4px 10px; transform: rotate(180deg); transition: all 0.35s; -webkit-transition: all 0.35s; -ms-transition: all 0.35s; } 
	.side-menu.open_menu .wrap-inner .all-category .category-box.on .arrow{ transform: rotate(0deg); } 
	.side-menu .wrap-inner .all-category .category-box .depth-two-wrap{ display: none; transition: none; } 
	.side-menu .wrap-inner .all-category .category-box .depth-two-wrap li a{ transition-delay: 0.3s; } 
	.side-menu .wrap-inner .all-category .category-box.on .depth-two-wrap li a{ color: #c3c3c3; } 
	.side-menu .wrap-inner .all-category .category-box .depth-two-wrap li:hover a{margin-left: 0;}
	.side-menu .wrap-inner .sns_wrap{ text-align: center; position: static; transform: none; transition: all 0.35s; -webkit-transition: all 0.35s; -ms-transition: all 0.35s; opacity: 0; visibility: hidden; } 
	.side-menu.open_menu .wrap-inner .sns_wrap{ opacity: 1; visibility: visible; transition-delay: 0.9s; } 
	.side-menu .wrap-inner .sns_wrap li{ display: inline-block; vertical-align: top; margin: 0 8px; } 
	.side-menu .wrap-inner .sns_wrap li a img { width: 18px; }

	/* 하단영역 */
	.footer{margin: 60px 0 30px;}
	.side-menu .footer{ position: static; margin-top: 100px; } 
	.side-menu.open_menu .footer{ margin-top: 20px; } 
	.footer .ft_menu{ margin-bottom: 10px; } 
	.footer .ft_menu li a { font-size: 11px; margin: 0 6px; } 
	.footer .simple-footer{padding: 0 10px;}
	.footer .simple-footer p span { font-size: 11px; padding: 0 3px; line-height: 19px; }
	.footer .simple-footer p span.dib{display: inline-block;}
	.footer .simple-footer p span.db{display: block;}
}