@charset "utf-8";

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

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

/*header*/
.header{position:relative;width:100%;background:#fff;z-index:9999; height: 80px;}
.header > * {font-family: 'pretendard' !important;}
.header > .logo{display:none;}
.header > .gnb{display:none;}

.header .header-inner{width:1280px;height:80px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;position:relative;}

.header .header-inner > .logo{flex-shrink:0;}
.header .header-inner > .logo > a{display:block;}
.header .header-inner > .logo img{display:block;height:50px;width:auto;position:static;}

.header .header-inner > .gnb{display:flex;align-items:center;height:80px;}
.header .header-inner > .gnb > li{position:relative;}
.header .header-inner > .gnb > li > a{display:block;padding:0 25px;line-height:80px;font-size:18px;font-weight:700;color:#000;position:relative;transition:.3s;}

.header .header-inner > .gnb > li > a::after{content:'';position:absolute;left:50%;bottom:25px;width:0;height:2px;background:#009d3a;transform:translateX(-50%);transition:.3s;}
.header .header-inner > .gnb > li > a:hover::after{width:60%;}

.header .header-inner > .gnb > li > .subMenu{display:none;position:absolute;left:0;top:80px;width:100%;padding-top:10px;line-height:50px;z-index:3;text-align:center;}
.header .header-inner > .gnb > li > .subMenu > li > a{color:#000;}
.header .header-inner > .gnb > li > .subMenu > li > a:hover{font-weight:700;}

.header > .menuBg{display:none;position:absolute;left:0;top:80px;width:100%;height:250px;background:rgba(255,255,255,.7);z-index:2;}

/* 번역기 */
/* .translate-fixed{
    position:absolute;
    top:25px;
    right:50px;
    z-index:99999;
}

.translate-fixed #google_translate_element{
    position:relative;
}

.goog-te-gadget{
    font-size:0 !important;
}

.goog-te-gadget .goog-te-combo{
    width:100px !important;
    max-width:100px !important;
} */

/*footer*/

.footer-wrap{background:#393C41; }
.footer-wrap > * {font-family: 'pretendard' !important;}
.footer-wrap > .foot-inner {display: flex; justify-content: flex-start; gap: 50px; width: 1280px; margin: 0 auto; align-items: center;}
.footer-wrap > .foot-inner > .foot-logo > img{height: 70px;}
.footer > .inner{width: auto; margin: 0 auto !important;}

.footer{background:#393C41; padding:20px 0 30px; line-height:30px; }
.footer > div {position:relative;}
.footer > div > ul{display:flex;}
.footer > div > ul.margin {margin-bottom:30px;}
.footer > div > ul > li{position:relative; margin-right:16px; padding-right:16px; color:#e3e3e3; 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 > ul > li > a {color:#e3e3e3; font-size:12px; font-weight:800;}
.footer > div > p{border-top:1px solid #fff; padding-top:10px; margin-top:10px; color:#e3e3e3; font-size:16px; font-weight:300; }
.footer > div > p > span > a > img {height:20px; margin-left: 5px;}
.foot-logo > img{opacity: 0.5;}



/*modal*/
.modal{display:none; background:#fff; position:fixed; left:50%; top:50%; transform:translate(-50%, -50%); width:500px; height:800px; padding:20px 30px; border-radius:10px; overflow-y:scroll; z-index:5;}
.modal::-webkit-scrollbar{display:none;}
.modal > a{display:block; width:fit-content; margin:0 0 10px auto; font-size:30px; } 
.modal > div{font-size:15px; line-height:23px;}
.modal > div > strong{display:block;}



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

	.header{display:none;}

	.headerM{display:block;}

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

	/*header*/
	.headerM .logo{display: flex; justify-content: center; align-items: center;}
	.headerM > .top{position:relative; padding:10px 3%;}
	.headerM > .top > h1 > a > img{height:36px; margin-left: -10px;}
	.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 > .menu{display:none; background:#fff; width:80%; height:100vh; position:fixed; right:-80%; top:0; z-index:100; 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.1rem; font-weight:500;}
	.headerM > .menu > .gnbM > li > a::after{content:""; display:block; 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:.92rem; 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; }
	.footer > div > p > span{display: inline-block;}
	.footer > div > p > span> a > img {height:20px;}

	.footer > .snsWrap > ul > li img {height:70px;}
	.footer > div > img.qrCode {height:50px;}
	

	.modal{width:90%; height:70vh; padding:20px 16px;}
	
	.footer-wrap > .foot-inner {flex-direction: column; justify-content: center;width: 100% !important; margin: 0 auto;}
	.footer-wrap > .foot-inner > .foot-logo {display: none;}


}