@charset "utf-8";

body, p{word-break:keep-all;}

/*기본*/
.inner{max-width:1200px; margin:0 auto;}
.cf::after{content:""; display:block; clear:both;}

/*header*/
.header{position:relative; text-align:center;}
.header > .logo{position:absolute; left:7%; top:50%; transform:translate(0, -50%);}
.header > .logo > a{display:block;}
.header > .logo > a > img{height:50px;}
.header > .gnb{line-height:90px;}
.header > .gnb > li{position:relative; display:inline-block;}
.header > .gnb > li > a{display:block; font-size:18px; font-weight:700; padding:0 36px;}
.header > .gnb > li > .subMenu{display:none; position:absolute; padding-top:10px; width:100%; z-index:3; line-height:40px;}
.header > .gnb > li > .subMenu > li > a{}
.header > .tel{position:absolute; right:3%; top:50%; transform:translate(0, -50%);}
.header > .tel > p{font-size:20px;}
.header > .tel > p > img{height:20px;}
.header > .menuBg{display:none; width:100%; height:140px; background:rgba(255,255,255,.5); position:absolute; left:0; top:90px; z-index:2;}

.header > .gnb > li > .subMenu > li > a:hover{font-weight:700;}

/*footer*/
.footer{background:#222; /* padding:30px 0 10px; */ line-height:30px;}
.footer > div > ul{display:flex;}
.footer > div > ul > li{position:relative; margin-right:16px; padding-right:16px; color:#fff; font-size:16px; font-weight:300;}
.footer > div > ul > li::after{content:""; display:block; width:1px; height:16px; background:#fff; position:absolute; right:0; top:50%; transform:translate(0, -50%);}
.footer > div > ul > li:last-child{margin-right:0; padding-right:0;}
.footer > div > ul > li:last-child::after{display:none;}
.footer > div > p{border-top:1px solid #fff; padding-top:10px; margin-top:26px; color:#fff; font-size:16px; font-weight:300; }
.footer > div > p img {height:18px;}

.footerNew {padding:30px 0 10px;}


.headerM{display:none;}

@media (max-width:1200px) {
	#container{overflow-x:hidden;}

	body, p{word-break:normal;}

	.header{display:none;}

	.headerM{display:block;}

	.inner{width:100%; margin:0 auto;}

	.headerM, .popupM{display:block;}

	.inner{width:100%; margin:0 auto;}

	#hd, #wrapper, #ft{min-width:0;}

	/*header*/
	.headerM > .top{position:relative; padding:16px 3%;}
	.headerM > .top > h1{text-align:center;}
	.headerM > .top > h1 > a{display:inline-block;}
	.headerM > .top > h1 > a > img{height:55px;}
	.headerM > .top > .panel{position:absolute; right:5%; top:50%; margin-top:-10px;}
	.headerM > .top > .panel::before{content:""; display:block; width:20px; height:2px; border-top:3px solid #333;}
	.headerM > .top > .panel::after{content:""; display:block; width:20px; height:2px; border-top:3px solid #333;}
	.headerM > .top > .panel > a{display:block; width:16px; height:2px; border-top:3px solid #333; margin:5px 0; text-indent:-9999px;}
	.headerM > .top > .utilBox{position:absolute; left:2%; top:50%; transform:translate(0,-50%);}
	.headerM > .top > .utilBox > a{display:block; background:#ff8100; border-radius:5px; padding:8px 10px; color:#fff; font-weight:700;}

	.headerM .util{position:absolute; top:30px; left:10px; transform:translate(0, -50%); padding:14px;}
	.headerM .util > ul{display:flex;}
	.headerM .util > ul > li{background:#767676; border-radius:5px; margin-right:5px;}
	.headerM .util > ul > li:nth-child(2){background:#2185d0; }
	.headerM .util > ul > li:last-child{background:#333; margin-right:0;}
	.headerM .util > ul > li > a{display:block; padding:8px 12px; font-size:1rem; font-weight:700; color:#fff;}

	.headerM > .menu{display:none; background:#fff; width:80%; height:100vh; position:fixed; right:-80%; top:0; z-index:10; padding:100px 0 0;}
	.headerM > .menu > .close{position:absolute; right:5%; top:20px; display:flex;}
	.headerM > .menu > .close > a{display:block; text-indent:-9999px;}
	.headerM > .menu > .close::after{content:""; display:block; width:16px; height:16px; border-top:3px solid #333; border-right:3px solid #333; transform:rotate(225deg);}
	.headerM > .menu > .close::before{content:""; display:block; width:16px; height:16px; border-top:3px solid #333; border-right:3px solid #333; transform:rotate(45deg); margin-right:2px;}
	.headerM > .menu > .gnbM > li{width:90%; margin:0 auto;}
	.headerM > .menu > .gnbM > li > a{position:relative; display:block; padding:16px 10px; border-bottom:1px solid #cdcdcd; font-size:1.2rem; font-weight:500;}
	.headerM > .menu > .gnbM > li > a::after{content:""; display:none; width:8px; height:8px; border-top:2px solid #777; border-right:2px solid #777; transform:rotate(135deg); position:absolute; right:3%; top:50%; margin-top:-4px;}
	.headerM > .menu > .gnbM > li > ul{display:none; background:#f5f5f5; padding:8px 16px; border-radius:0 0 10px 10px;}
	.headerM > .menu > .gnbM > li > ul > li > a{display:block; padding:10px 0; font-size:1rem; font-weight:300;}
	
	.headerM > .menu > .gnbM > li > a.on::after{transform:rotate(315deg); border-color:#333;}
	

	/*footer*/
	.footer{padding:30px 3% 10px;}
	.footer > div > ul{flex-wrap:wrap;}
	.footer > div > ul > li{padding-right:0; font-size:1rem;}
	.footer > div > ul > li::after{display:none;}
	.footer > div > p{font-size:1rem;}

}