@charset "utf-8";

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
@font-face {
    font-family: 'S-CoreDream';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-6Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* css reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	vertical-align: baseline;
    color: inherit;
    font-family: inherit;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
a {
    text-decoration: none;
    color: inherit;
}

a:hover {
    text-decoration: none;
}
:focus {outline: none;}

html {
    font-size: 10px;
    font-family: 'Pretendard', serif;
    --point : #cfa670;
    color: #212121;
}

 
* {
    word-break: keep-all;
    line-height: 1.4;
    box-sizing: border-box;
 }
 

.ff-sc { font-family: 'S-CoreDream';}
b {font-weight: 600;}
.flx1 {display: flex; flex-flow: row wrap;}
.flx2 {display: flex; flex-flow: column wrap;}
.grid {display: grid;}
.view-768 {display: none;}
.hide-768 {}
.inner {width: 100%; max-width: 1500px; margin: 0 auto;}
.cont-title h5 {color: var(--point); font-size: max(13px, 2rem); margin-bottom: 10px;}
.cont-title h2 {font-size: 4rem; font-weight: 700;}
img {max-width: 100%; object-fit: cover;}

@media (max-width:1500px) {
    .inner {padding: 0 5%;}
    html {font-size: 9px;}
}
@media (max-width:1200px) {
    html {font-size: 8px;}
}
@media (max-width:1080px) {
    html {font-size: 7px;}
}
@media (max-width:768px) {
    html {font-size: 6px;}
    .view-768 {display: block;}
    .hide-768 {display: none;}
}

.swiper-button-next:after, .swiper-button-prev:after {display: none;}

.btn-type1 {font-size: 2.2rem; padding: 1rem 2rem; background: var(--point); display: flex; flex-flow: row wrap; align-items: center; width: max-content; border-radius: 3rem; color: #fff; font-weight: 500; transition: all 0.2s;}
.btn-type1 img {margin-left: 2rem;}
.btn-type1:hover {background: #212121;}

/* 헤더 */
header {position: fixed; top: 0; left:0; width: 100%; z-index: 97; background: #fff; transition: all 0.3s;} 
header .inner {height: 10rem; align-items: center; justify-content: space-between; }
header .logo {width: clamp(110px,18%,173px);}
header .menu {align-items: center;}
header .menu li {margin-left: 5rem;}
header .menu li:not(:last-child) a {font-size: 2.2rem; font-weight: 600;  padding: 0.5rem 0; position: relative;}
header .menu li:not(:last-child) a::before {content:""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width:0; height: 2px; background: #212121; transition: all 0.3s;}
header .menu li:hover a::before,
header .menu li a.active::before {width: 100%;}

header .mo_btn {width: 30px; height: 30px; justify-content: space-between; align-content: space-between; cursor: pointer; display: none;}
header .mo_btn span {width: 12px; height: 12px; background: #212121;}

header.f-nav {border-bottom: 1px solid #e1e1e1;}
header.f-nav2 {top: -10rem;}


.mo_menu {position: fixed; top: 0; right:0; width: min(550px,85%); height: 100vh; background: #fff; z-index: 99; transform: translateX(100%); transition: all 0.3s;}
.mo_menu::before {content:""; position: absolute; top:0; left: 0; width: 100%; height: 3px; background: var(--point);}
.mo_menu .mo_btn_close {position: absolute; top:2%; right:5%; width: 30px; height: 30px; cursor: pointer; }
.mo_menu .mo_btn_close span {position: absolute; top:50%; left:50%; transform: translate(-50%,-50%) rotate(45deg); width: 100%; height: 3px; background: #212121;}
.mo_menu .mo_btn_close span:last-child {transform: translate(-50%,-50%) rotate(-45deg);}
.mo_menu .inner {padding: 20rem 8rem 10rem; height: 100%; justify-content: space-between;}
.mo_menu li {font-size: 3.8rem; margin-top: 4%; font-weight: 500;}
.mo_menu li a.active {font-weight: 700;}
.mo_menu .bottom a {margin-right: 4%;}
.mo_menu .bottom p {font-size: 2rem; width: 100%; margin-top: 5%;}
.mo_menu_bg {position: fixed; top:0; left:0; width: 100%; height: 100vh; background: rgba(0,0,0,0.75); z-index: 98; visibility: hidden; opacity: 0; transition: all 0.2s;}

.open .mo_menu {transform: translateX(0);}
.open .mo_menu_bg {visibility: visible; opacity:1;}
@media (max-width:768px) {
    header .menu {display: none;}
    header .mo_btn {display: flex;}
}

.top-btn {position: fixed; bottom:7rem; right: 5%; width: max(40px,5rem); height: max(40px,5rem); background: var(--point); border-radius: 50%; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; box-shadow: 0 0 3px 0 rgba(0,0,0,0.15); z-index: 94;}
.top-btn img {max-width: 33%;}
.top-btn:hover {background: #212121;}
@media (max-width:1200px) {
    .top-btn {right: 2%;}
}
@media (max-width:1080px) {
    .top-btn {display: none;}
}

footer {padding: 3rem 0 4rem; border-top: 1px solid #212121; margin-top: 12rem;}
footer .inner {align-items: center;}
footer .ft_logo {width: min(173px,20%);}
footer p {width: calc(80% - 100px); padding-left: 5%; font-size: 14px; padding-top: 2rem; line-height: 1.6; color: #646464;}
footer ul {width: 100px; justify-content: flex-end;}
footer ul li {margin-left: 2rem;}
@media (max-width:768px) {
    footer {margin-top: 10rem;}
    footer ul {order: 1; width: 100%; justify-content: center;}
    footer .ft_logo {order:2; width: min(173px,100%); margin: 2rem auto;}
    footer p {order: 3; width: 100%; text-align: center;}
}

#popup-wrap {position: fixed;  top: 10%; left: 50%; transform: translateX(-50%); width: max-content; max-width: 90%; z-index: 999; display: grid; grid-template-columns: repeat(2,1fr); gap: 4rem;}
.popup {display: none; border-radius: 1.5rem; overflow: hidden;box-shadow: 0 0 1.5rem 0 rgba(0, 0, 0, 0.1);}
.popup img {width: 45rem;}
.popup .btn-wrap { background: #fff;justify-content: space-between;}
.popup .btn-wrap div:first-child {color: #999;}
.popup .btn-wrap div {cursor: pointer; font-size: max(14px,1.6rem);  padding: 1.5rem 2rem; }
@media (max-width:768px) {
    #popup-wrap {grid-template-columns: repeat(1,1fr);width: 90%;}
    .popup {position: absolute; top:0; left: 0; }
    .popup img {width: 100%;}
}