@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 > .inner {display: flex; justify-content: space-between; align-items: center;}
.header > .inner > .logo{}
.header > .inner > .logo > a{}
.header > .inner > .logo > a > img{height:50px;}
.header > .inner > .gnb{line-height:80px;}
.header > .inner > .gnb > li{position:relative; display:inline-block;}
.header > .inner > .gnb > li > a{display:block; font-size:18px; font-weight:700; padding:0 45px;}
.header > .inner > .gnb > li > .subMenu{display:none; position:absolute; padding-top:10px; width:100%; z-index:3; line-height:40px;}
.header > .inner > .gnb > li > .subMenu > li > a{}

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

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

/*footer*/
.footer { width: 100%; font-family: 'Malgun Gothic', '맑은 고딕', sans-serif; font-size: 16px; letter-spacing: -0.5px; }
.footer > .footer-top { background: #222222; padding: 40px 0; border-top: 1px solid #333333; }
.footer > .footer-top > .inner { width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; }
.footer > .footer-top > .inner > .f-logo { width: 230px; border-right: 1px solid #444444; padding-right: 30px; margin-right: 30px; text-align: left; }
.footer > .footer-top > .inner > .f-logo > img { max-width: 100%; vertical-align: middle; }
.footer > .footer-top > .inner > .f-info { flex: 1; text-align: left; line-height: 2.2; color: #cccccc; }
.footer > .footer-top > .inner > .f-info > .f-policy-top { margin-bottom: 15px; }
.footer > .footer-top > .inner > .f-info > .f-policy-top > a { color: #cccccc; text-decoration: none; font-size: 15px; font-weight: 700;}
.footer > .footer-top > .inner > .f-info > .f-policy-top > a:hover { color: #ffffff; }
.footer > .footer-top > .inner > .f-info > .f-policy-top > a + a::before { content: '|'; display: inline-block; margin: 0 12px; color: #444444; font-size: 12px; }
.footer > .footer-top > .inner > .f-info > .f-info-row { display: flex; align-items: center; flex-wrap: wrap; }
.footer > .footer-top > .inner > .f-info > .f-info-row > .info-item { display: inline-flex; align-items: center; }
.footer > .footer-top > .inner > .f-info > .f-info-row > .info-item + .info-item::before { content: '|'; display: inline-block; margin: 0 15px; color: #555555; font-size: 13px; font-weight: normal; }
.footer > .footer-top > .inner > .f-info > .f-info-row > .info-item > i { color: #8cb24a; margin-right: 8px; font-size: 15px; }
.footer > .footer-top > .inner > .f-info > .f-info-row > .info-item > strong { color: #8cb24a; font-weight: normal; margin-right: 5px; }
.footer > .footer-top > .inner > .f-family { width: 230px; text-align: left; }
.footer > .footer-top > .inner > .f-family > strong { display: block; color: #8cb24a; font-weight: 600; margin-bottom: 10px; font-size: 16px; }
.footer > .footer-top > .inner > .f-family > select { width: 100%; height: 42px; font-size: 15px; border: 1px solid #444444; color: #cccccc; padding: 0 10px; outline: none; background: #333333; }
.footer > .footer-bottom { background: #1a1a1a; border-top: 1px solid #2a2a2a; padding: 22px 0; }
.footer > .footer-bottom > .inner { width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: center; font-size: 15px; color: #888888; }
.footer > .footer-bottom > .inner > .f-bottom-text { display: flex; align-items: center; }
.footer > .footer-bottom > .inner > .f-bottom-text > span + span::before { content: '|'; display: inline-block; margin: 0 20px; color: #444444; font-size: 14px; }
.footer > .footer-bottom > .inner > .f-bottom-text > span > img { height: 20px; margin-left: 5px; vertical-align: middle; }
.footer > .footer-bottom > .inner > .f-admin { margin-left: 20px; }
.footer > .footer-bottom > .inner > .f-admin > .btn-admin { display: inline-block; border: 1px solid #8cb24a; color: #8cb24a; padding: 6px 18px; font-size: 14px; text-decoration: none; border-radius: 3px; background: transparent; margin-left: 5px; transition: all 0.2s; }
.footer > .footer-bottom > .inner > .f-admin > .btn-admin:hover { background: #8cb24a; color: #ffffff; }



.headerM{display:none;}

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

	.header{display:none;}

	.headerM{display:block;}

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

	/*header*/
	.headerM > .top{position:relative; padding:10px 3%;}
	.headerM > .top > h1 > a { display: flex; justify-content: center; align-items: center;}
	.headerM > .top > h1 > a > img{height:36px;}
	.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: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.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 > .footer-top { padding: 30px 20px; }
    .footer > .footer-top > .inner { width: 100%; max-width: 100%; flex-direction: column; align-items: stretch; gap: 20px; box-sizing: border-radius; }
    .footer > .footer-top > .inner > .f-logo { width: 100%; border-right: none; padding-right: 0; margin-right: 0; border-bottom: 1px solid #333333; padding-bottom: 15px; }
    .footer > .footer-top > .inner > .f-logo > img { max-width: 160px; }
    .footer > .footer-top > .inner > .f-info { width: 100%; line-height: 1.6; }
	.footer > .footer-top > .inner > .f-info > .f-info-row > .info-item > strong {white-space:nowrap;}
    .footer > .footer-top > .inner > .f-info > .f-policy-top { margin-bottom: 12px; }
    .footer > .footer-top > .inner > .f-info > .f-info-row { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; }
    .footer > .footer-top > .inner > .f-info > .f-info-row + .f-info-row { margin-top: 8px; }
    .footer > .footer-top > .inner > .f-info > .f-info-row > .info-item { display: flex; align-items: flex-start; width: 100%; word-break: break-all; }
    .footer > .footer-top > .inner > .f-info > .f-info-row > .info-item + .info-item::before { display: none; }
    .footer > .footer-top > .inner > .f-info > .f-info-row > .info-item > i { margin-top: 4px; flex-shrink: 0; width: 18px; }
    .footer > .footer-top > .inner > .f-family { width: 100%; }
    .footer > .footer-bottom { padding: 20px; }
    .footer > .footer-bottom > .inner { width: 100%; max-width: 100%; flex-direction: column; gap: 12px; text-align: center; }
    .footer > .footer-bottom > .inner > .f-bottom-text { flex-direction: column; gap: 6px; }
    .footer > .footer-bottom > .inner > .f-bottom-text > span + span::before { display: none; }
    .footer > .footer-bottom > .inner > .f-admin { margin-left: 0; }
}