body {font-family: 'noto-sans', sans-serif; overflow-x: hidden; max-width: 1920px; margin: auto; word-break: keep-all}
.wrap {overflow-x: hidden; z-index: 1;  width: 100%; left: 0px;}

.btn-group {z-index: 99;}

#header  {position: absolute; left: 0; top: 0; right: 0; z-index: 100; padding-top: 25px; height: 100px; background: #fff; box-sizing: border-box; z-index: 20;}
.gnbWrap .logo {float: left; z-index: 99;}
.gnbWrap .logo:before {display: block; content: ''; width: 600px; height: 100px; background: #000; position: absolute; left: 0; top: 0; top: -25px; left: -340px; z-index: -1;}
.gnbWrap .logo a {display: block;}
.gnbWrap .logo span {display: block; width: 187px; height: 47px; background: url(../images/logo.png) 0 0 no-repeat; text-indent: -9999px;}
.mobileWrap {float: right; padding-top: 8px; margin-right: -40px;}
#gnb, #gnb .level1>li {float: left;}
#gnb .level1>li {position: relative;}
#gnb .level1>li>a {display: block; color: #000; font-size: 19px; font-weight: 300; letter-spacing: -.5px; padding: 0 40px; letter-spacing: -.4px}
#gnb .level1>li>a span {display: block; padding: 5px 0 34px; position: relative;}
#gnb .level1>li>a span:before {display: block; content: ''; width: 100%; padding: 0 2px; height: 5px; background: #000; z-index: -1; position: absolute; left: -2px; bottom: 0; opacity: 0; transition: ease-in-out .2s}
#gnb .level1>li.current>a {font-weight: 400;}
#gnb .level1>li.current>a span:before, #gnb .level1>li:hover>a span:before {opacity: 1;}

#gnb .depth2 {display: none; position: absolute; background: #fff; padding: 20px 10px 15px; width: 220px; text-align: center; box-sizing: border-box; left: 50%; margin-left: -110px;}
#gnb .depth2>li {}
#gnb .depth2>li>a {white-space: nowrap; font-size: 17px; color: #666; line-height: 35px; letter-spacing: -.4px}
#gnb .depth2>li>a:hover {color: #000; font-weight: 600; border-bottom: 1px solid #000;}


.menu_logo{display: none;}

.menu-toggle {width: 40px; height: 40px; background: transparent; border: 0 none; position: absolute; right: 0; top: 4px;} 
.menu-toggle span {display: block;  width: 100%; height: 3px; background: #000; text-indent: -9999px; position: relative;}
.menu-toggle span:before, .menu-toggle span:after {display: block; content: ''; width: 100%; height: 3px; background: #000; position: absolute; left: 0; transition: ease-in-out .2s}
.menu-toggle span:before {top: -12px; }
.menu-toggle span:after {top: 12px;}

.menu-toggle.on {z-index: 999999999;}
.menu-toggle.on span {background: transparent;}
.menu-toggle.on span:before {transform: rotate(45deg); top: 0;}
.menu-toggle.on span:after {transform: rotate(-45deg); top: 0;}

#footer {background: #000; position: relative; z-index: 20;}
.footerExtra {border-bottom: 1px solid rgba(255,255,255,.1);}
.footerMenu {height: 100px; line-height: 100px;}
.footerMenu li {float: left; margin-right: 30px;}
.footerMenu a {color: #777; font-weight: 300; font-size: 16px;}
.footerMenu li a:hover{color: #fff;}

.copyright {font-size: 14px;height: 100px; line-height: 100px; color: #777;}

.footerInfo {padding: 40px 0;}
.catchphrase p {color: #fff; font-size: 28px; font-weight: 300; line-height: 1; margin-top: 8px;}
.companyInfo  {line-height: 1.4;}
.companyInfo span {display: inline-block; font-size: 14px; margin-left: 30px; color: #777;}


.menu-toggle  {display: none;}

.quickWrap {position: fixed; width: 100px; right: 0; top: 180px; z-index: 999;}
.quickWrap li a {display: block; width: 100px; height: 100px; cursor: pointer}
.quickWrap .katok a {background: url(../images/q_katok.png) 0 0 no-repeat;}
.quickWrap .estimate a {background: url(../images/q_inq.png) 0 0 no-repeat;}

.buttonTop {position: fixed; right: 40px; bottom: 80px; z-index: 99;opacity: 0; transition: .3s}
.buttonTop span {display: block; background: #f65d5d; width: 40px; height: 40px; border-radius: 20px; position: relative;}
.buttonTop span:before, .buttonTop span:after {display: block; content: ''; position: absolute; left: 50%; margin-left: -9px; width: 0; height: 0; border: 9px solid transparent;}
.buttonTop span:before {border-bottom: 10px solid #fff; border-top: 0 none; top:13px}
.buttonTop span:after {border-bottom: 10px solid #f65d5d; border-top: 0 none; top:15px}
.buttonTop.buttonTopVisible {opacity: 1; bottom: 40px;}


/* sub */
.contentWrap {padding-top: 100px;}
.pageHeader {background: center center no-repeat; box-sizing: border-box; position: relative;}


.pageHeader .pageTitle h2{display: inline-block; color: #fff; font-size: 20px; border-top: 2px solid #fff; line-height: 1; padding-top: 8px;}

.setWidth {width: 100%; margin: 0 auto; max-width: 1240px; box-sizing: border-box; }


@media all and (min-width: 1920px) {
	.kakaoWrap {right: 50%; margin-right: -920px;}
}

@media all and (max-width: 1366px) {
	.setWidth {max-width: 1160px;}
}
@media all and (max-width: 1280px) {
	.setWidth { max-width: 1024px;}
	#gnb .level1>li>a {padding: 0 25px;}
}
@media all and (max-width: 1112px) {
	.setWidth {max-width: 960px; }
	#gnb .level1>li>a {padding: 0 20px;}
}

@media all and (max-width: 1024px) {
	.setWidth {max-width: 100%; padding: 0 40px;}
	.menu-toggle {display: block;}
	.mobileWrap {display: none;}
	.mobileWrap.active {display: block; position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: #ffdb33; margin-right: 0; z-index: 999;}
	
	.menu_logo{display: block; width: 60px; height: 100px; background: url(../images/0_menu_logo.png) 0  center no-repeat; position: fixed; left: 40px; top: 0; background-size: contain} 
	
	#gnb, #gnb .level1>li {float: none;}
	#gnb {position: absolute; width: 100%; top: 50%; transform: translateY(-50%)}
	#gnb .level1>li {padding: 20px 0;}
	#gnb .level1>li>a {font-size: 30px; box-sizing: border-box; width: 100%;}
	#gnb .level1>li>a span {display: inline-block; padding-bottom: 5px;}
	#gnb .level1>li>a span:before{height: 3px;}
	#gnb .level1>li.on>a span:before{opacity: 1;}
	#gnb .depth2 {position: relative; background: #000; width: 100%; left: 0; margin-left: 0;}
	#gnb .depth2>li>a {color: #fff;}
}
@media all and (max-width: 768px) {
	.setWidth {padding: 0 30px;}
	#header {height: 50px; padding-top: 10px;}
	.gnbWrap .logo:before {width: 180px; left: -30px; height: 50px; top: -10px;}
	.gnbWrap .logo span {height: 28px; background-size: contain}
	.menu-toggle {width: 25px; height: 25px; top: 1px;}
	.menu-toggle span {height: 2px;}
	.menu-toggle span:before, .menu-toggle span:after {height: 2px;}
	.menu-toggle span:before {top: -7px; }
	.menu-toggle span:after {top: 7px;}
	.menu_logo{width: 35px; height: 48px; left: 30px;} 
	#gnb .level1>li>a {font-size: 20px;}
	
	.catchphrase img{height: 30px;}
	
	.contentWrap {padding-top: 50px;} 
	
	.footerMenu, .copyright {line-height: 50px; height: 50px;}
	.footerMenu a, .copyright {font-size: 13px;}
	.footerInfo {padding: 20px 0;}
	.companyInfo {text-align: left; margin-top: 10px;}
	.companyInfo span {margin-left: 0; margin-right: 30px; font-size: 12px;}
	.quickWrap {width: 50px; top: 100px;}
	.quickWrap li a {width: 50px; height: 50px;}
	.quickWrap .katok a {background: url(../images/q_katok_mob.png) 0 0 no-repeat; background-size: cover}
	.quickWrap .estimate a {background: url(../images/q_inq_mob.png) 0 0 no-repeat; background-size: cover}
}
@media all and (max-width: 479px) {
	.setWidth {padding: 0 20px;}
	.menu_logo{left: 20px;}
	#gnb .level1>li {padding: 15px 0;}
	#gnb .level1>li>a {font-size: 16px; }
	#gnb .depth2>li>a {font-size: 13px; line-height: 20px;}
	.footerExtra .right {float: left !important; margin-left: 0;}
}