@charset "utf-8";

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

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

/*header*/
.header{position:relative; text-align:center; }
.header > div {display: flex; justify-content: space-between; white-space:nowrap;}
.header > div > .logo{margin-left: -30px;}
.header > div > .logo > a{display:block;margin-top: 15px;}
.header > div > .logo > a > img{height:60px;}
.header > div > .gnb{line-height:90px;}
.header > div > .gnb > li{position:relative; display:inline-block;}
.header > div > .gnb > li > a{display:block; font-size:18px; font-weight:700; padding:0 36px;}
.header > div > .gnb > li > .subMenu{display:none; position:absolute; padding-top:10px; width:100%; z-index:3; line-height:40px;}
.header > div > .gnb > li > .subMenu > li > a{}

.header > .menuBg{display:none; width:100%; height:150px; 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;}


.header .util {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

.header .util > a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background-color: #333; 
    color: #fff;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s ease;
    text-decoration: none;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.header .util > a:hover {
    background-color: #e67e22; 
    transform: translateY(-2px);
    box-shadow: 0 6px 10px rgba(0,0,0,0.2);
}

@media (max-width: 1700px) {
    .header .inner {
        width: 100% !important;
        max-width: 1200px !important;
        margin: 0 auto;
    }
	.header > div > .gnb > li > a {
		padding: 0 25px;
	}
}

@media (max-width: 1400px) {
	.header > div > .logo > a > img {
		height: 50px;
	}
	.header > div > .logo > a {
		display: block;
		margin-top: 20px;
	}
    .header .inner {
        width: 100% !important;
        max-width: 1100px !important;
        margin: 0 auto;
    }
    
    .header > div > .gnb > li > a {
        padding: 0 20px !important;
    }
}

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

.footer > .snsWrap {position:fixed; bottom:10%; right:3%; z-index:2;}
.footer > .snsWrap > ul {display:flex; flex-direction:column; row-gap:5px;} 
.footer > .snsWrap > ul > li {padding:3px; border:1px solid #000; border-radius:10px; background-color:#BEA997;}
.footer > .snsWrap > ul > li img {height:100px;} */



#footer { background: #8b7359; padding: 60px 20px; font-family: 'Pretendard', 'Noto Sans KR', sans-serif; }
#footer > .footer-container { max-width: 1200px; margin: 0 auto; display: flex; gap: 30px; align-items: stretch; }
#footer > .footer-container > .footer-left { width: 430px; flex-shrink: 0; background: #48362A; padding: 50px 45px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 15px 35px rgba(0,0,0,0.2); box-sizing: border-box; }
#footer > .footer-container > .footer-left > h3 { font-size: 25px; letter-spacing: 2px; color: #E2BC8C; margin: 0 0 28px 0; font-weight: 700; border-bottom: 1px solid rgba(226,188,140,0.2); padding-bottom: 18px; }
#footer > .footer-container > .footer-left > .info-box > p { margin: 18px 0; font-size: 16px; color: #D6C7B7; display: flex; align-items: flex-start; }
#footer > .footer-container > .footer-left > .info-box > p > strong { color: #E2BC8C; width: 110px; flex-shrink: 0; line-height: 1.5; }
#footer > .footer-container > .footer-left > .info-box > .phone-row > .phone-num { font-size: 21px; font-weight: 700; color: #fff; letter-spacing: 0.5px; align-self: center;}
#footer > .footer-container > .footer-left > .info-box > p > .txt { line-height: 1.5; }
#footer > .footer-container > .footer-left > .info-box > .bank-info > .txt > .owner { color: #B5A493; font-size: 14px; display: block; margin-top: 4px; }
#footer > .footer-container > .footer-right { flex: 1; background: #36261C; padding: 45px 50px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.05); box-shadow: 0 10px 30px rgba(0,0,0,0.15); box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; }
#footer > .footer-container > .footer-right > .footer-links { display: flex; gap: 30px; margin: 0; padding: 0 0 25px 0; list-style: none; border-bottom: 1px solid rgba(255,255,255,0.06); }
#footer > .footer-container > .footer-right > .footer-links > li > a { color: #D6C7B7; font-size: 16px; text-decoration: none; transition: 0.3s; }
#footer > .footer-container > .footer-right > .footer-links > li > a:hover { color: #E2BC8C; }
#footer > .footer-container > .footer-right > .footer-links > li > a.privacyBtn { color: #fff; font-weight: 600; }
#footer > .footer-container > .footer-right > .company-info { font-size: 15px; line-height: 1.8; color: #B5A493; padding: 25px 0; }
#footer > .footer-container > .footer-right > .company-info > p { margin: 8px 0; }
#footer > .footer-container > .footer-right > .company-info > .company-name { font-size: 20px; color: #E2BC8C; margin-bottom: 15px; }
#footer > .footer-container > .footer-right > .company-info > .company-name > strong { color: #fff; }
#footer > .footer-container > .footer-right > .company-info > .company-name > .bar { margin: 0 10px; color: #5C4535; }
#footer > .footer-container > .footer-right > .copyright { margin: 0; padding-top: 25px; border-top: 1px solid rgba(255,255,255,0.05); font-size: 14px; color: #8C7A6B; display: flex; justify-content: space-between; align-items: center; }
#footer > .footer-container > .footer-right > .copyright > a > .reserved-logo { height: 18px; opacity: 0.5; transition: 0.3s; }
#footer > .footer-container > .footer-right > .copyright > a:hover > .reserved-logo { opacity: 1; }


.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;}

.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{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;}
	.modal{width:90%; height:70vh; padding:20px 16px;}

	/*footer*/
	
	#footer { padding: 35px 15px; }
	#footer > .footer-container {flex-direction: column; gap: 15px;}
	#footer > .footer-container > .footer-left,
	#footer > .footer-container > .footer-right {width: 100%; padding: 22px 18px; border-radius: 16px;}
	#footer > .footer-container > .footer-left > h3 {font-size: 18px; margin-bottom: 14px; padding-bottom: 10px;}
	#footer > .footer-container > .footer-left > .info-box > p {font-size: 13px; margin: 8px 0; line-height: 1.4;}
	#footer > .footer-container > .footer-left > .info-box > .phone-row > .phone-num {font-size: 16px;}
	#footer > .footer-container > .footer-right > .footer-links {flex-wrap: wrap; gap: 10px; padding-bottom: 12px;}
	#footer > .footer-container > .footer-right > .footer-links > li > a {font-size: 13px;}
	#footer > .footer-container > .footer-right > .company-info {font-size: 12.5px; line-height: 1.5; padding: 12px 0;}
	#footer > .footer-container > .footer-right > .company-info > .company-name {font-size: 15px;}
	#footer > .footer-container > .footer-right > .copyright {flex-direction: column; align-items: flex-start; gap: 6px; font-size: 12px;}

}