@charset "utf-8";

:root {
	--black: #232323;
	--white: #ffffff;
	--l-brown: #9E8080;
	--brown: #2C2424;
	--black: #2C2424;
}

.mob {
	display: none;
}

html {
	scroll-behavior: smooth;
}

body {
	background: var(--brown) url('/hongt/file/IMAGE/uu/f7346c327e91479e9bf48e2e71da233f') repeat;
	background-blend-mode: overlay;
}

.inner-wrapper {
	max-width: calc(100% - 180px);
	width: 100%;
	margin: 0 auto;
}

.flex {
	display: flex;
}

header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 10;
}

header .header-blur-background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgb(0 0 0 / .1);
    backdrop-filter: blur(1.25vw);
    opacity: 0;
    transition: all .3s ease;
    z-index: -1;
}

header.scrolled .header-blur-background {
	opacity: 1;
}

header .inner-wrapper {
	height: 90px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

header .inner-wrapper #logo {
	max-width: 83px;
}

header .inner-wrapper #logo a img {
	vertical-align: middle;
}

header .inner-wrapper .menu {
	display: flex;
	align-items: center;
	color: #fff;
	gap: 60px;
}

header .inner-wrapper .menu li:last-child a {
	border: 1px solid #fff;
	border-radius: 40px;
	padding: 10px 20px;
	transition: all 0.3s ease;
}

header .inner-wrapper .menu li:last-child a:hover {
	background: #fff;
	color: var(--brown);
}

/*
	company-info
*/
footer {
	padding-bottom: 100px;
}

footer .inner-wrapper > div {
	display: flex;
}

footer .inner-wrapper > div:first-child > div {
	width: 50%;
	height: 250px;
	border-top: 1px solid rgba(188, 172, 172, 0.80);
	border-bottom: 1px solid rgba(188, 172, 172, 0.80);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 40px
}

footer .inner-wrapper > div:first-child > div p {
	color: #FFE7E7;
	font-size: 42px;
	font-weight: 400;
}

footer .inner-wrapper > div:first-child > div a {
	display: block;
	width: 104px;
	height: 38px;
	text-align: center;
	line-height: 38px;
	border-radius: 100px;
	background: #FFE7E7;
	color: #2C2424;
	font-size: 15px;
	font-weight: 400;
}

footer .inner-wrapper > div:first-child > div:first-child {
	border-right: 1px solid rgba(188, 172, 172, 0.80);
}

footer .inner-wrapper > div:last-child {
	margin-top: 40px;
	display: flex;
}

footer .inner-wrapper > div:last-child > div {
	width: 50%;
}

footer .inner-wrapper > div:last-child > div:last-child p {
	color: #fff;
	text-align: right;
}

footer .inner-wrapper > div:last-child > div ul li {
	width: 100%;
	height: 60px;
	border-bottom: 1px solid rgba(188, 172, 172, 0.80);
	color: #bcacac;
}

footer .inner-wrapper > div:last-child > div ul li span {
	font-size: 24px;
	color: #bcacac;
}

footer .inner-wrapper > div:last-child > div ul li > a {
	display: flex;
	width: 100%;
	justify-content: space-between;
	align-items: center;
	height: 100%;
}

footer .inner-wrapper > div:last-child > div ul li > a span:last-child {
	color: #fff;
	text-decoration: underline;
	text-align: right;
}

footer .inner-wrapper > div:last-child > div ul li > a:hover {
	background: rgba(188, 172, 172, 0.80);
}

footer .inner-wrapper > div:last-child > div ul li > div {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 100%;
}

footer .inner-wrapper > div:last-child > div ul li > div a {
	transform: translateX(-10px);
}

/* 햄버거 버튼 */
.hamburger {
    display: none;
    cursor: pointer;
    width: 30px;
    flex-direction: column;
    justify-content: space-between;
    height: 20px;
    z-index: 999;
}
.hamburger span {
    display: block;
    height: 3px;
    background: #fff;
    border-radius: 2px;
}

/* 사이드 메뉴 */
.side-menu {
    position: fixed;
    top: 0;
    right: -250px;
    width: 250px;
    height: 100%;
    background: #fff;
    box-shadow: -2px 0 5px rgba(0,0,0,0.2);
    transition: right 0.3s ease;
    z-index: 999;
    padding: 20px;
}
.side-menu.open {
    right: 0;
}

.side-menu-list > li {
    margin-bottom: 15px;
    position: relative;
}

.side-menu .close-btn {
    font-size: 36px;
    cursor: pointer;
    text-align: right;
    margin-bottom: 20px;
}

/* 반응형 처리 */
@media screen and (max-width: 768px) {
    header .inner-wrapper .menu {
        display: none; /* 기본 메뉴 숨기기 */
    }
    .hamburger {
        display: flex;
    }
    
    footer .inner-wrapper > div:last-child > div:last-child p {
    	margin-top: 20px;
    	font-size: 13px;
    }
}

@media(max-width: 768px) {
	.mob { display: block; }
	.web { display: none; }
	.inner-wrapper { max-width: calc(100% - 40px); }
	
	header .inner-wrapper .menu { gap: 10px;}
	
	footer .inner-wrapper > div { flex-direction: column; }
	footer .inner-wrapper > div:first-child > div { width: 100%; }
	footer .inner-wrapper > div:first-child > div:first-child { border-right: none; }
	footer .inner-wrapper > div:last-child > div { width: 100%; }
	footer .inner-wrapper > div:last-child > div ul li { height: 80px; }
	footer .inner-wrapper > div:last-child > div ul li span { font-size: 18px; width: 80%; }
}