@charset "UTF-8";

@import url(base.css);

/* common */
html {
    font-size:var(--pc-default);
}
body {
	font-size: 1.6rem; 
}
#wrap {
	overflow: hidden;
}
.inner {
	width:calc(100% - 30px);
	max-width:1392px;
	margin: 0 auto;
} 
.only_mo,.only_t {display: none !important;}

.f_serif, .f_serif * { font-family: var(--font-serif); letter-spacing: -0.07em; }
.f_dokrip, .f_dokrip * { font-family: var(--font-dokrip); }
.f_chosun, .f_chosun * { font-family: var(--font-chosunilbo); }
.f_kopubD, .f_kopubD * { font-family: var(--font-kopubD); letter-spacing: -0.01em; }
.f_kopubB, .f_kopubB * { font-family: var(--font-kopubB); }
.f_kotraB, .f_kotraB * { font-family: var(--font-kotraB); }
.f_kotraG, .f_kotraG * { font-family: var(--font-kotraG); }
.f_cafe24, .f_cafe24 * { font-family: var(--font-cafe24); }
.f_cafe24A, .f_cafe24A * { font-family: var(--font-cafe24A); }

/* header */
.header {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	z-index: 999;
	/* backdrop-filter: blur(3px); */
	background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%);
}
.header .inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height:90px;
}
.header .nav ul {
	display: flex;
	align-items: center;
}
.header .nav ul li {
	margin: 0 30px;
}
.header .nav ul li a {
	display: block;
	font-size: 2rem;
	color: var(--white-basic-color);
}

/* footer */
.footer {
	background-color: #2B2B2B;
}
.footer .inner {
	display: flex;
	align-items: flex-start;
	padding: 55px 0 115px;
	position:relative;
}
.footer .inquiry_btn {
	display: flex;
	align-items: center;
	justify-content: center;
	position:fixed;
	bottom: 80px;
	right:20px;
	width:124px;
	height:124px;
	font-size: 2.6rem;
	font-weight: 700;
	color:var(--blue-color100);
	-webkit-text-stroke: 0.5px var(--blue-color100);
	line-height: 1.3;
	border-radius: 50%;
	border: 4px solid var(--blue-color100);
	box-shadow: 0 0 20px 0 rgba(0,0,0,.4);
	background: rgb(255,254,254);
	background: linear-gradient(180deg,rgba(211,212,214,1) 0%, rgba(255,254,254,1) 24%, rgba(255,255,255,1) 80%, rgba(209,211,212,1) 100%);
	z-index: 99;
}
.footer .f_logo {
	flex: 0 0 auto;
}
.footer .f_info {
	margin-left: 48px;
}
.footer .f_menu ul {
	display: flex;
	align-items: center;
}
.footer .f_menu ul li {
	margin-right: 60px;
}
.footer .f_menu ul li a {
	display: block;
	font-size: 2rem;
	color: var(--white-basic-color);
	line-height: 50px;	
}
.footer .info_box {
	margin-top: 25px;
}
.footer .info_box div {
	display: flex;
	align-items: center;
}
.footer .info_box div span {
	font-size: 1.6rem;
	font-weight: 500;
	color: var(--white-basic-color);
	line-height: 2.125;
}
.footer .info_box div span:not(:last-child) {
	position: relative;
	padding-right: 13px;
	margin-right: 12px;
}
.footer .info_box div span:not(:last-child):after {
	content:'';
	display: block;
	position: absolute;
	top: 10px;
	right: 0;
	width: 1px;
	height: 12px;
	background-color: var(--white-basic-color);
}

/* responsive */
@media screen and (max-width:1392px) {

}

@media screen and (max-width:1300px) {

	html {font-size: var(--tablet-default);}

}

@media screen and (max-width:1024px) {

	/* common */
	.only_t {display: block !important;}

	/* header */
	.header.open {
		background: var(--white-basic-color);
		border-bottom: 1px solid var(--gray-color350);
	}
	.header.open .logo {
		background: url('/assets/images/common/logo_bk.png') no-repeat center / contain;
	}
	.header.open .logo img {
		opacity: 0;
	}
	.header .inner {
		height: 85px;
	}
	.header .ham_btn {
		display: flex !important;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		gap: 10px;
		width: 60px;
		height: 85px;
		margin-right: -15px;
	}
	.header .ham_btn span {
		width: 30px;
		height: 3px;
		border-radius: 3px;
		background-color: var(--white-basic-color);
		transition: .4s;
	}
	.header.open .ham_btn span {
		background-color: var(--gray-color100);
	}
	.header.open .ham_btn span:nth-child(1) {transform: translateY(13px) rotate(45deg);}
	.header.open .ham_btn span:nth-child(2) {opacity: 0;}
	.header.open .ham_btn span:nth-child(3) {transform: translateY(-13px) rotate(-45deg);}
	.header .nav {
		display: none;
		position: absolute;
		top: calc(100% + 1px);
		left: 0;
		width: 100%;
		height: calc(100vh - 85px);
		background-color: var(--white-basic-color);
	}
	.header.open .nav {
		display: block;
	}
	.header .nav ul {
		align-items: flex-start;
		flex-direction: column;
		margin-top: 20px;
	}
	.header .nav ul li {
		margin: 0;
	}
	.header .nav ul li a {
		padding: 18px 15px;
		font-size: 23px;
		color: var(--gray-color100);
	}

	/* footer */
	.footer .inner {
		flex-direction: column;
		padding: 40px 0 80px;
	}
	.footer .f_info {
		margin-left: 0;
		margin-top: 20px;
	}

}

@media screen and (max-width:850px) {

	html {
		font-size: var(--pc-default);
	}
	.only_pc {
		display: none !important;
	}
	.only_mo {
		display: block !important;
	}

	/* header */
	.header .logo {
		width: 210px;
	} 
	.header .nav ul li a {
		font-size: 18px;
	}

	/* footer */
	.footer .inquiry_btn {
		bottom: 40px;
		width: 80px;
		height: 80px;
		font-size: 20px;
		border-width: 2px;
	}
	.footer .inner {
		padding: 40px 0;
	}
	.footer .f_logo {
		width: 175px;
		margin: 0 auto;
	}
	.footer .f_menu ul {
		flex-wrap: wrap;
		justify-content: center;
		gap: 20px;
	}
	.footer .f_menu ul li {
		position: relative;
		margin-right: 0;
	}
	.footer .f_menu ul li a {
		line-height: 1.5;
		font-size: 1.5rem;
	}
	.footer .f_menu ul li:not(:last-child):after {
		content:'';
		display: block;
		position: absolute;
		top: 3px;
		right: -13px;
		width: 1px;
		height: 15px;
		background-color: var(--gray-color250);
	}
	.footer .info_box div span:not(:last-child):after {
		top: 6px;
	}
	.footer .info_box div {
		justify-content: center;
		flex-wrap: wrap;
	}
	.footer .info_box div span {
		font-size: 1.3rem;
	}

}