@charset "utf-8";

body {background-color: var(--ivory);}
.inner {width: calc(100% - 32px); max-width: 1500px; margin: 0 auto;}
.inner-m {width: calc(100% - 32px); max-width: 1350px; margin: 0 auto;}

.primary {color: var(--primary) !important;}
.primary_bg {background-color: var(--primary);}
.secondary {color: var(--secondary);}
.secondary_bg {background-color: var(--secondary);}
.ivory {color: var(--ivory);}
.ivory_bg {background-color: var(--ivory);}

.mo-mode {display: none;}

/* header */
header {background-color: #fff; position: sticky; top: 0; z-index: 9999;}
header .header-top {position: relative; height: 100px; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--line1);}
header .header-top .mo-btn {display: none; position: absolute; top: 50%; right: 16px; transform: translate(0, -50%);}
header .menu {height: 50px; display: flex; align-items: center; border-bottom: 1px solid var(--line1);}
header .menu li {position: relative; width: calc(100% / 4); height: 100%;}
header .menu li::after {position: absolute; bottom: -1px; left: 0; width: 100%; height: 2px; background-color: var(--primary); content: ''; display: none;}
header .menu li a {width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-weight: 500;}
header .menu li:hover::after,
header .menu li.active::after  {display: block; transition: all 0.2s;}
header .menu li:hover a,
header .menu li.active a {color: var(--primary); transition: all 0.2s;}

/* footer */
.footer-top {background-color: var(--secondary); padding: 30px 0;}
.footer-top ul {display: flex; align-items: center; column-gap: 24px;}
.footer-top ul li a {color: #fff; font-size: 16px; font-weight: 500;}

footer {background-color: var(--bg);}
footer .inner {display: flex; flex-direction: column; row-gap: 30px; padding: 70px 0;}
footer .inner .sns {display: flex; align-items: center; column-gap: 14px;}
footer .inner .sns a {display: flex; align-items: center; justify-content: center;}
footer .inner .sns a:hover svg path {fill: var(--primary); transition: all 0.2s;}
footer .inner ul {width: 710px; display: flex; flex-wrap: wrap; column-gap: 28px; row-gap: 6px;}
footer .inner ul li {position: relative; color: var(--gray1); font-size: 20px;}
footer .inner ul li::after {position: absolute; width: 1px; height: 14px; background-color: var(--gray1); top: 50%; right: -14px; transform: translate(0, -50%); display: block; content: '';}
footer .inner ul li:nth-of-type(2):after,
footer .inner ul li:nth-of-type(4):after {display: none;}
footer .inner > p {font-size: 16px; color: var(--gray2); padding-top: 10px;}

.quick {position: fixed; z-index: 10; right: 5vw; bottom: 6vw; display: none; flex-direction: column; row-gap: 10px;}
.quick li a {width: 64px; height: 64px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; row-gap: 2px; font-size: 11px; font-weight: 600; color: #fff; box-shadow: 0px 4px 23px rgba(108, 74, 49, 0.16);}


/* 반응형 */
@media screen and (max-width: 1520px) {

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

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

}
@media screen and (max-width: 768px) {
    header .header-top {height: 60px;}
    header .header-top .logo img {height: 40px;}
    .quick {display: flex;}
    .footer-top {padding: 20px 0;}
    footer .inner {padding: 50px 0;}
    footer .inner .sns a svg {width: 28px; height: 28px;}
    footer .inner ul {width: auto;}
    footer .inner ul li {font-size: 16px;}
    footer .inner > p {font-size: 14px;}
}
@media screen and (max-width: 600px) {
    footer .inner ul li:nth-of-type(3):after {display: none;}
}
@media screen and (max-width: 500px) {
    header .menu li a {font-size: 3.2vw;}
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 360px) {
}
@media screen and (max-width: 340px) {
}

/*****/
/*****/
/*****/
/*****/
/*****/
/*****/
/*****/
/*****/
/*****/
/*****/
/*****/
/*****/
/*****/
/*****/
/*****/
/*****/
/*****/
/*****/
/*****/
/*****/
/*****/
/*****/
/*****/
/*****/
/*****/
/*****/
/*****/
/*****/
/*****/
/*****/
/*****/
/*****/
/*****/
/*****/
/*****/
/*****/
/*****/
/*****/
/*****/
/*****/
/*****/
/*****/