html,body {
	font-family: "Noto Sans KR","맑은 고딕","Malgun Gothic","돋움","san-serif";
	font-size: 16px;
	color:#333;
	line-height: 1.5;

	/* background-image: url("../images/layout/abstrakt-tile.jpg");		백그라운드 패턴넣기
	background-repeat: no-repeat;
	background-color: #f00;  밑에껄로 쓰면 한줄에 이 내용이 된다
	background:url("../images/layout/abstrakt-tile.jpg") no-repeat #f00;*/
}


a {color:inherit;text-decoration:none;}
img {vertical-align: top;}		/* 기본적으로 이미지에는 아랫쪽에 여백이있는데 그걸 없애주는거라고함 */

* {box-sizing:border-box;}		/* 다포함시킨다고함 */
.clearFix:after,.container:after {content:"";display:block;width:0;height:0;overflow: hidden;clear:both;}
.container {width:1240px;margin: 0 auto;position: relative;}

#header {width: 100%;background: #fff;height: 100px;overflow: hidden;position: fixed; z-index:200; top: 0;}
#header:after {content: "";width: 100%;height: 1px;background: #d9d9d9;position: absolute;top: 99px;}
#header h1 {float: left; width:15%;}
#header h1 a {display: block;padding: 20px 0;}
#gnb {float: left; margin-left: 4%; width:80%} /* {float: left;margin-left: 40px;}*/
#gnb .gnbList > li {float: left; width:14.2%;}
#gnb .gnbList > li > a {display: block;height: 60px;line-height: 20px;/*width: 137px;*/font-size: 18px;margin-top: 40px;
font-weight: 500;text-align: center;position: relative;
}
#gnb .gnbList > li > a:after {content: "";display: block;width: 100%;height: 3px;background: #39f;
position: absolute;bottom: 0;transform:scaleX(0);transition:all 0.5s ease-out;
}
#gnb .gnbList > li:hover > a:after {transform:scaleX(1);background: #f00;}

#gnb .gnbList > li .sub {padding: 15px 0;border-right: 1px solid #d9d9d9;height: 330px;}
#gnb .gnbList > li:first-child .sub {border-left: 1px solid #d9d9d9;}
#gnb .gnbList > li .sub li a {display: block;padding: 5px 0 5px 20px;}
#gnb .gnbList > li .sub li:hover {background-color: #f1f1f1;}


#mobileGnb {background: #fff;position: fixed;left: -100%;top: 100px;width: 70%;height: 100%;display: none;}		/* fixed를 주면 넓이, 높이를 잃는다 */
#mobileGnb .gnbList {height: 90%;overflow-y: scroll;}
#mobileGnb .gnbList > li {}	/* gnb를 li옆으로 붙이기 */
#mobileGnb .gnbList > li > a {display:block;height:100px;line-height: 100px;font-size: 1.5rem;font-weight:500;
padding-left: 20px;position: relative;border-top:1px solid #d9d9d9;}
#mobileGnb .gnbList > li > a.on i {transform:rotate(180deg);}			/* rotate 회전시키는것*/ 
#mobileGnb .gnbList > li > a i {position: absolute;right: 10px;height: 50px;line-height: 50px;font-size: 30px;
transition:all 0.2s ease-out;}
#mobileGnb .gnbList > li .sub {background: #f8f8f8;display: none;}
#mobileGnb .gnbList > li .sub a {display:block;height: 80px;line-height: 80px;border-top: 1px solid #d9d9d9;
padding-left: 40px;position: relative;font-size: 1.2rem;}

#m obileGnb .gnbList > li .sub a:before {content:"";display: block;width: 3px;height: 3px;background: #33ccff;position: absolute;left: 30px,top: 50%;margin-top: -1px;}

#header .searchBox i {font-size: 25px;color: #39f;display: inline-block;position: relative;top: 3px;}
#header .searchBox {float: right;border: 1px solid #d9d9d9;padding: 0 15px;margin-top: 30px;}
#header .searchBox input {border:none;height: 32px;line-height: 32px;}

#header .btnAll { position: absolute; left:0; top:0; height: 100px; width: 100px; display: none;}
#header .btnAll span { display: block; width: 60px; height: 5px; background: #333; position: absolute; left:20px; transition:all 0.5s ease-out;}
#header .btnAll span:nth-child(1) { top: 28px; }
#header .btnAll span:nth-child(2) { top: 48px; background: #d8241b; }
#header .btnAll span:nth-child(3) { top: 68px; }

#header.open .btnAll span:nth-child(1) {transform:rotate(45deg);top: 50px;}
#header.open .btnAll span:nth-child(2) {opacity: 0;left: -0px;}
#header.open .btnAll span:nth-child(3) {transform:rotate(-45deg);top: 50px;}

#header .btnTel { display: block; position: absolute; right: 0px; top: 0px; width: 100px; height: 100px; padding:20px; display: none;}

#header .btnTel img {height: 60px;}

.bgCover {position: fixed;width: 100%;height: 100%;background: rgba(0,0,0,0.7);top: 0;left: 0;display: none;}



#footer {border-top: 1px solid #d9d9d9;}
#footer .util ul {float: left;}
#footer .util ul li {float: left;width: 150px;}
#footer .util ul li a {display: block; height: 50px; line-height: 50px; text-align: center;
border-right: 1px solid #d9d9d9;}

#footer .util ul li:first-child a {border-left: 1px solid #d9d9d9;}
#footer .util .btnTop {float: right; display: block; width: 50px; height: 50px; line-height: 50px; 
text-align: center; border-right: 1px solid #d9d9d9; border-left: 1px solid #d9d9d9;}

#footer .addrWrap {border-top: 1px solid #d9d9d9;padding: 30px 0;}
#footer .addrWrap .fLogo {float: left;}
#footer .addrWrap address {float: left;margin-left: 120px;}













/* 반응형 responsive web	/ adaptive web */
@media all  and (max-width:1240px) {
	.container {width:100%;}
	#header {overflow: visible;}
	#gnb {display:none;}
	#mobileGnb {display:block;}
	#header h1 {text-align: center; float:none;}
	#header .btnAll {display: block;}
	#header .btnTel {display: block;}
	#header .searchBox {display: none;}
}

@media all and (max-width:768px) {
	#header {height: 60px;z-index: 99999;}
	#header:after {top: 59px;}
	#header h1 a {height: 60px; padding: 15px 0;position: absolute;left: 100px}
	#header h1 a img {height: 30px;}
	#header .btnAll {width: 60px; height: 60px;}
	#header .btnAll span {width: 30px; height: 2px; left: 15px;}
	#header .btnAll span:nth-child(1) {top: 19px;}
	#header .btnAll span:nth-child(2) {top: 29px;}
	#header .btnAll span:nth-child(3) {top: 39px;}
	#header .btnTel {width: 60px; height: 60px; padding: 15px;}
	#header .btnTel img {height: 30px;}
	#mobileGnb {top: 59px;}
	#mobileGnb .gnbList > li > a {height: 60px; line-height: 60px; font-size: 1.0rem;}
	#mobileGnb .gnbList > li .sub a {height: 60px; line-height: 60px; font-size: 1rem;}
	#header.open .btnAll span:nth-child(1) {transform:rotate(45deg);top: 30px;}
	#header.open .btnAll span:nth-child(2) {opacity: 0;left: -0px;}
	#header.open .btnAll span:nth-child(3) {transform:rotate(-45deg);top: 30px;}
	
	#footer .util .btnTop {display: none;}
	#footer .util ul {float: none;width: 100%;}
	#footer .util ul li {width: 33.33%;}

	#footer .addrWrap {text-align: center;}
	#footer .addrWrap .fLogo {float: none;}
	#footer .addrWrap address {float: none;margin-top: 20px;margin-left: 0;}
}