/* root ----------------------- */
:root {
    /* background, button text, icon */
    --hoam-white: #FFFFFF;
    --hoam-text-btn: #FFFFFF;

    /* solid color */
    --hoam-green: #00662E;
    --hoam-blue: #000F9F;
    --hoam-red: #FF7276;
    --hoam-gray: #F0ECE9;

    /* line */
    --hoam-line200: #D2CCC7;
    --hoam-line100: #F0ECE9;

    /* text */
    --hoam-text-green: #00662E;
    --hoam-text-gray: #5F574E;
    --hoam-text-black: #000000;

    /* drag */
    --hoam-drag-bg: #5F574E;
    --hoam-drag-text: #FFFFFF;
}

/* page top scroll */
#page-top-scroll {position: fixed; top: 0; left: 0; z-index: 999; height: .2rem; background-color: var(--hoam-text-gray);}

/* header 헤더 ----------------------- */
header {width: 100%; height: 6.4rem; padding: 0 2.5rem; display: flex; align-items: center; justify-content: space-between; background-color: transparent; position: sticky; top: 0; z-index: 99; transition: background-color .4s;}
header > h1 {z-index: 100; cursor: pointer;}
header .quick {display: flex; position: fixed; top: -3000%; left: 0; width: 100%; height: 2.8rem; border-radius: 0; font-size: 1.4rem; align-items: center; justify-content: center; z-index: 101; background-color: #000; color: #fff; border-color: #000;}
header .quick:focus {top: 0;}
header .header-btn {display: flex; align-items: center; column-gap: 1rem; position: relative; z-index: 100;}
header .header-btn > div {display: flex; align-items: center; column-gap: 1rem;}
header .header-btn button {height: 2.5rem; padding: 0 1rem; font-size: 1.2rem; position: relative; z-index: 1;}
header .header-gnb-wrap {width: 100%; min-width: 128rem; display: flex; flex-flow: column; position: absolute; top: 0; left: 0;}
header .header-gnb-wrap .gnb-wrap {position: absolute;  left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); z-index: 99;}
header .header-gnb-wrap .gnb-wrap > ul {display: flex; align-items: flex-start; justify-content: center; column-gap: 8rem;}
header .header-gnb-wrap .gnb-wrap > ul > li {position: relative;}
header .header-gnb-wrap .gnb-wrap > ul > li > a {display: flex; align-items: center; height: 6.4rem; font-size: 1.9rem; width: fit-content;}
header .header-gnb-wrap .gnb-wrap > ul > li > ul {display: none; width: max-content; height: 24rem; border-left: 1px solid var(--hoam-line200); position: absolute; padding-top: 1.8rem; padding-left: 1.6rem; flex-flow: column; row-gap: 1.2rem;}
header .header-gnb-wrap .gnb-wrap > ul > li > ul > li > a {font-size: 1.4rem; color: var(--hoam-text-gray); width: fit-content;}
header .header-gnb-wrap .gnb-wrap > ul > li > ul > li > a:hover {color: var(--hoam-text-black);}
header .header-gnb-wrap .background {display: none; width: 100%; position: absolute; top: 6.4rem; left: 0; height: 24rem; background-color: var(--hoam-white); z-index: 1; border-bottom: 1px solid var(--hoam-line200); border-top: 1px solid var(--hoam-line200);}
header .header-gnb-wrap .background > p {font-size: 1.4rem; color: var(--hoam-text-black); line-height: 2.2rem; padding: 2rem 2.6rem; opacity: .8;}
header .header-gnb-wrap .background > img {position: absolute; right: 2.6rem; bottom: 2rem;}

header > a {z-index: 100; cursor: pointer;}

header:not(.disable-hover):hover {background-color: var(--hoam-white);}
header:not(.disable-hover):hover .header-gnb-wrap .gnb-wrap > ul {height: 30.4rem; width: 100vw;}
header:not(.disable-hover):hover .header-gnb-wrap .gnb-wrap > ul > li > ul {display: flex;}
header:not(.disable-hover):hover .header-gnb-wrap .gnb-wrap + .background {display: block;}
header.hovered {background-color: var(--hoam-white);}
header.hovered .header-gnb-wrap .gnb-wrap > ul {height: 30.4rem; width: 100vw;}
header.hovered .header-gnb-wrap .gnb-wrap > ul > li > ul {display: flex;}
header.hovered .header-gnb-wrap .gnb-wrap + .background {display: block;}

body[data-lang="en"] header .header-gnb-wrap .gnb-wrap > ul {column-gap: 6rem; margin-left: -20rem;}
body[data-lang="en"] header .header-gnb-wrap .gnb-wrap > ul > li > a {font-size: 1.6rem;}
body[data-lang="en"] header .header-gnb-wrap .gnb-wrap > ul > li > ul > li > a {display: block; word-break: keep-all; line-height: 1.2;}
body[data-lang="en"] header .header-gnb-wrap .gnb-wrap > ul > li:nth-child(1)> ul > li > a {width: 20rem;}

/* header .header-gnb-wrap {width: 100%; min-width: 128rem; opacity: 0; display: flex; flex-flow: column; position: fixed; top: 0; left: 0;} */
/* header .header-gnb-wrap .gnb-title {display: flex; align-items: center; justify-content: center; column-gap: 3rem; width: fit-content; height: 6.4rem; margin: 0 auto; position: relative; z-index: 0;}
header .header-gnb-wrap .gnb-title > li {font-size: 1.8rem;}
header .header-gnb-wrap .gnb-cont {display: flex; width: 100%; height: 0; padding: 0; align-items: start; justify-content: center; column-gap: 15rem; background-color: var(--hoam-white); border-top: 1px solid var(--hoam-line100); border-bottom: 1px solid var(--hoam-line100); opacity: 0; transition: opacity .4s;}
header .header-gnb-wrap .gnb-cont > * {display: none!important;}
header .header-gnb-wrap .gnb-cont > ul {display: flex; align-items: start; column-gap: 6rem; position: relative; padding-left: 14rem;}
header .header-gnb-wrap .gnb-cont > ul > li {display: flex; flex-flow: column; row-gap: 1rem;}
header .header-gnb-wrap .gnb-cont > ul > li:nth-child(1) {position: absolute; left: 0;}
header .header-gnb-wrap .gnb-cont > ul > li > h6 {font-size: 1.2rem; color: var(--hoam-text-gray); cursor: default;}
header .header-gnb-wrap .gnb-cont > ul > li > a {font-size: 1.2rem; color: var(--hoam-text-gray);}
header .header-gnb-wrap .gnb-cont > ul > li > ul > li {font-size: 1.4rem; line-height: 2.2rem;}
header .header-gnb-wrap .gnb-cont > div {height: 100%; display: flex; flex-flow: column; align-items: start; justify-content: space-between;}
header .header-gnb-wrap .gnb-cont > div .post {display: flex; flex-flow: column; row-gap: 1rem;}
header .header-gnb-wrap .gnb-cont > div .post > h6 {font-size: 1.2rem; color: var(--hoam-text-gray);}
header .header-gnb-wrap .gnb-cont > div .post > div {display: flex; align-items: start; column-gap: 2rem;}
header .header-gnb-wrap .gnb-cont > div .post > div img {width: 19rem; height: 10.6rem;}
header .header-gnb-wrap .gnb-cont > div .post > div .info {width: 19rem; display: flex; flex-flow: column; row-gap: 1rem;}
header .header-gnb-wrap .gnb-cont > div .post > div .info > a {text-align: left; font-size: 1.4rem;}
header .header-gnb-wrap .gnb-cont > div .post > div .info .desc > p {font-size: 1.2rem; color: var(--hoam-text-gray); line-height: 2rem;}
header .header-gnb-wrap .gnb-cont > div .user {display: flex; align-items: center; column-gap: 1rem;} */

header .header-gnb-wrap .gnb-title:hover + .gnb-cont,
header .header-gnb-wrap .gnb-title:focus-within + .gnb-cont,
header .header-gnb-wrap .gnb-cont:hover {opacity: 1; height: 29.7rem; padding: 2rem 10rem; transition: opacity .4s;}
header .header-gnb-wrap .gnb-title:hover + .gnb-cont > *,
header .header-gnb-wrap .gnb-title:focus-within + .gnb-cont > *,
header .header-gnb-wrap .gnb-cont:hover > * {display: flex!important;}


@media screen and (max-width: 767px) {
    header {height: 5.2rem; padding: 0 1rem;}
    header .hoam-emblem {z-index: 2;position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
    header .header-btn {width: 100%; justify-content: space-between; column-gap: .6rem; position: relative; z-index: 1;}
    header .header-btn > div {display: none;}
    header .header-gnb-wrap {display: none;}
}

/* 메뉴 ----------------------- */
.menu-wrap {width: 100%; position: fixed; left: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); z-index: 10000;}
.menu-wrap .custom {width: 5rem; height: 5rem; padding: 0; background-color: var(--hoam-green); cursor: pointer; position: absolute; left: 2.5rem;}
.menu-wrap .menu {width: 5rem; height: 5rem; padding: 0; background-color: var(--hoam-green); background-repeat: no-repeat; background-position: center; cursor: pointer; position: absolute; right: 2.5rem;}
.menu-wrap .menu > span {width: 3rem; height: .15rem; display: block; background-color: var(--hoam-white); position: relative;}
.menu-wrap .menu > span::before,
.menu-wrap .menu > span::after {content: ''; background-color: var(--hoam-white); display: block; width: 100%; height: .15rem; position: absolute;}
.menu-wrap .menu > span::before {top: -.8rem;}
.menu-wrap .menu > span::after {bottom: -.8rem;}

.menu-wrap .menu.active > span {background-color: transparent;}
.menu-wrap .menu.active > span::before {transform: rotate(45deg); top: 0; background-color: #fff;}
.menu-wrap .menu.active > span::after {transform: rotate(-45deg); top: 0; background-color: #fff;}

@media screen and (max-width: 767px) {
    .menu-wrap {min-width: initial; top: initial; -webkit-transform: initial; -moz-transform: initial; -ms-transform: initial; -o-transform: initial; transform: initial; bottom: 1.5rem;}
    .menu-wrap .custom {width: 4rem; height: 4rem; left: 1rem; bottom: 0;}
    .menu-wrap .custom.active + .menu {opacity: 0;}
    .menu-wrap .menu {width: 4rem; height: 4rem; right: 1rem; bottom: 0;}
    .menu-wrap .menu > span {width: 2.4rem; height: 1px;}
    .menu-wrap .menu > span::before,
    .menu-wrap .menu > span::after {height: 1px;}
    .menu-wrap .menu > span::before {top: -.6rem;}
    .menu-wrap .menu > span::after {bottom: -.6rem;}
}

/* 메뉴 > 사용자화 */
.custom-wrap {position: relative; z-index: 9999;}
.custom-wrap .cont {width: 36%; height: 100vh; display: flex; flex-flow: column; padding: 3rem 2.5rem 2.5rem; position: fixed; top: 0; left: -36%; background-color: #fff; backdrop-filter: saturate(200%) blur(2rem); -webkit-backdrop-filter: saturate(200%) blur(2rem); overflow-y: auto;}
.custom-wrap .cont > p {padding-bottom: 3rem; border-bottom: 1px solid var(--hoam-line100); text-align: center; font-size: 1.6rem; line-height: 2.8rem; word-break: keep-all; color: #000;}
.custom-wrap .cont .option {padding: 3rem 0; display: flex; flex-flow: column; row-gap: 2rem;}
.custom-wrap .cont .option > p {text-align: center; font-size: 1.2rem; line-height: 2.2rem; color: #000;}
.custom-wrap .cont .option > ul {display: flex; flex-flow: column; row-gap: 2rem; align-items: center;}
.custom-wrap .cont .option > ul > li {display: flex; flex-flow: column; row-gap: 1rem; align-items: center;}
.custom-wrap .cont .option > ul > li > h6 {font-size: 1.2rem; line-height: 1.8rem; color: #000;}
.custom-wrap .cont .option > ul > li > ul {display: flex; flex-flow: wrap; align-items: center; justify-content: center; grid-gap: 1rem;}
.custom-wrap .cont .option > ul > li > ul > li button {width: 4rem; height: 4rem; border: 1px solid transparent; background-color: #FFFFFF; position: relative; display: flex; align-items: center; justify-content: center; cursor: pointer;}
.custom-wrap .cont .option > ul > li > ul > li button.active::after {content: ''; width: calc(100% + 1rem); height: calc(100% + 1rem); background-color: transparent; border: .25rem solid #00662E; display: block; position: absolute;}

.custom-wrap .cont .option > ul > li > ul > li button.theme-black {background-color: #000000;}
.custom-wrap .cont .option > ul > li > ul > li button.theme-red {background-color: #FF7276; border-color: #000000;}
.custom-wrap .cont .option > ul > li > ul > li button.theme-green {background-color: #00662E; border-color: #000000;}
.custom-wrap .cont .option > ul > li > ul > li button.theme-blue {background-color: #000F9F; border-color: #000000;}
.custom-wrap .cont .option > ul > li > ul > li button.theme-gray {background-color: #7D7369; border-color: #000000;}
.custom-wrap .cont .option > ul > li > ul > li button.theme-white {background-color: #FFFFFF; border-color: #000000;}

.custom-wrap .cont .option > ul > li > ul > li button.custom-text {background-image: url(/img/ico/ic-text-color-wh-hoam-82f1dc8eb7a9019eed43dced03dcc21e.svg); background-repeat: no-repeat; background-size: 1.5rem; background-position: center;}
.custom-wrap .cont .option > ul > li > ul > li button.custom-text.theme-white {background-image: url(/img/ico/ic-text-color-gr-hoam-49e89a5e1131471fd396d637211c3096.svg);}

.custom-wrap .cont .option > ul > li > ul > li button.custom-size {background-image: url(/img/ico/ic-font-size-c14d85f9c0ce6b208c48046b72886ed6.svg); background-repeat: no-repeat; background-position: center;}
.custom-wrap .cont .option > ul > li > ul > li button.custom-size.sm {background-size: 1.2rem;}
.custom-wrap .cont .option > ul > li > ul > li button.custom-size.md {background-size: 1.6rem;}
.custom-wrap .cont .option > ul > li > ul > li button.custom-size.lg {background-size: 2.2rem;}

.custom-wrap .cont .option > ul > li > ul > li button.custom-option {width: fit-content; height: 2.8rem; padding: 0 1.2rem; border: 0; background-color: #FFFFFF; display: flex; align-items: center; justify-content: center; column-gap: .3rem; font-size: 1.4rem;}
.custom-wrap .cont .option > ul > li > ul > li button.custom-option::before {content: ''; width: 1.4rem; height: 1.4rem; display: block;}
.custom-wrap .cont .option > ul > li > ul > li button.custom-option.default {color: #000000;}
.custom-wrap .cont .option > ul > li > ul > li button.custom-option.default::before {background-color: #000000;}
.custom-wrap .cont .option > ul > li > ul > li button.custom-option.dark {color: #7D7369; background-color: #000000;}
.custom-wrap .cont .option > ul > li > ul > li button.custom-option.dark::before {background-color: #7D7369;}
.custom-wrap .cont .option > ul > li > ul > li button.custom-option.echo {color: #1878F0;}
.custom-wrap .cont .option > ul > li > ul > li button.custom-option.echo::before {background-color: #1878F0;}
.custom-wrap .cont .option > ul > li > ul > li button.custom-option.contrast {color: #000000;}
.custom-wrap .cont .option > ul > li > ul > li button.custom-option.contrast::before {background-color: #000000;}

.custom-wrap .cont .keyword {width: 100%; margin-top: auto; padding-top: 2rem; border-top: 1px solid var(--hoam-line100);}
.custom-wrap .cont .keyword > p {font-size: 1.2rem; line-height: 1.8rem; color: #000;}
.custom-wrap .cont .keyword > ul {margin-top: 1rem; display: flex; flex-wrap: wrap; align-items: center; grid-gap: 1rem;}
.custom-wrap .cont .keyword > ul > li > a {height: 2.8rem; width: fit-content; padding: 0 1.2rem; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: var(--hoam-text-black); border: 1px solid var(--hoam-line200);}

.custom-wrap.active .menu-wrap .custom {opacity: 1;}
.custom-wrap.active .cont {left: 0;}

@media screen and (max-width: 767px) {
    .custom-wrap .cont {width: 100%; padding: 3rem; left: -100%;}
    .custom-wrap .cont > p {font-size: 1.4rem; line-height: 2.6rem;}
    .custom-wrap .cont .option > p {font-size: 1.3rem; line-height: 1.6rem;}

    .custom-wrap .cont .option > ul > li {row-gap: .5rem;}
    .custom-wrap .cont .option > ul > li > h6 {font-size: 1.3rem; line-height: 1.6rem;}
    .custom-wrap .cont .option > ul > li > ul > li button {width: 3rem; height: 3rem;}

    .custom-wrap .cont .option > ul > li > ul > li button.custom-text {background-size: 1.2rem;}
    .custom-wrap .cont .option > ul > li > ul > li button.custom-size.sm {background-size: .8rem;}
    .custom-wrap .cont .option > ul > li > ul > li button.custom-size.md {background-size: 1.2rem;}
    .custom-wrap .cont .option > ul > li > ul > li button.custom-size.lg {background-size: 1.6rem;}

    .custom-wrap .cont .option > ul > li > ul > li button.custom-option {height: 2.2rem; padding: 0 1rem; font-size: 1.3rem;}
    .custom-wrap .cont .option > ul > li > ul > li button.custom-option::before {width: 1rem; height: 1rem;}

    .custom-wrap .cont .keyword {padding-top: 2rem; padding-bottom: 4.5rem;}
    .custom-wrap .cont .keyword > p {text-align: left; font-size: 1.3rem; line-height: 1.6rem;}
    .custom-wrap .cont .keyword > ul > li > a {height: 2.2rem; padding: 0 1rem; font-size: 1.3rem;}
}

/* 메뉴 > 전체 페이지 메뉴 */
.page-gnb-wrap .gnb-cont {opacity: 0; position: fixed; top: 0; left: 0; width: /*100vw*/100%; height: 100vh; z-index: -10;}
.page-gnb-wrap .gnb-cont .header {width: 100%; height: 6.4rem; padding: 0 2.5rem; display: flex; align-items: center; justify-content: /*space-between*/end; column-gap: 1rem; background-color: transparent; position: sticky; top: 0; z-index: 99;}
.page-gnb-wrap .gnb-cont .header > div {display: flex; align-items: center; column-gap: 1rem; position: relative; z-index: 1;}
.page-gnb-wrap .gnb-cont .header > a {position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); cursor: pointer;}
.page-gnb-wrap .gnb-cont .header .hoam-emblem {width: 11rem; z-index: 1;}
.page-gnb-wrap .gnb-cont .header .hoam-emblem path {fill: #ffffff;}
.page-gnb-wrap .gnb-cont .header button {background-color: #00662E; border-color: #00662E; height: 2.5rem; padding: 0 1rem; font-size: 1.2rem; display: flex; position: relative; z-index: 1; color: #fff;}
.page-gnb-wrap .gnb-cont .header button .svg-ic-change path {fill: #fff;}
.page-gnb-wrap .gnb-cont .cont {height: calc(100% - 6.4rem); padding: 5.6rem 2.5rem; display: flex; flex-flow: column; align-items: center; }
.page-gnb-wrap .gnb-cont .cont .search {display: flex; align-items: center;}
.page-gnb-wrap .gnb-cont .cont .search > div {position: relative; display: flex; align-items: center;}
.page-gnb-wrap .gnb-cont .cont .search > div > button {position: absolute; right: 1.2rem;}
.page-gnb-wrap .gnb-cont .cont .search > div > button .ic-delete-14 path {fill: #ffffff;}
.page-gnb-wrap .gnb-cont .cont .search input {width: 31rem; border-color: #ffffff; color: #ffffff;}
.page-gnb-wrap .gnb-cont .cont .search > button {height: 3.6rem; border: 1px solid #ffffff; border-left: 0; background-color: transparent; color: #fff;}
.page-gnb-wrap .gnb-cont .cont .menu {width: calc(100% - 40rem); max-width: 102rem; height: 100%; display: flex; align-items: center; justify-content: space-between; position: relative;}
.page-gnb-wrap .gnb-cont .cont .menu::before {content: ''; width: 100%; height: 10rem; background: transparent linear-gradient(180deg, #000F9F00 0%, #000F9F 100%) 0% 0% no-repeat padding-box; position: absolute; top: 0; left: 0; opacity: 0;}
.page-gnb-wrap .gnb-cont .cont .menu::after {content: ''; width: 100%; height: 10rem; background: transparent linear-gradient(180deg, #000F9F00 0%, #000F9F 100%) 0% 0% no-repeat padding-box; position: absolute; bottom: 0; left: 0; opacity: 0;}
.page-gnb-wrap .gnb-cont .cont .menu > ul {width: 29.5rem; height: 100%; overflow-y: auto; padding: 10rem 0; display: flex; flex-flow: column; row-gap: 1rem; align-items: center; justify-content: center;}
.page-gnb-wrap .gnb-cont .cont .menu > ul:nth-child(2) {justify-content: flex-start;}
.page-gnb-wrap .gnb-cont .cont .menu > ul > li {display: flex; flex-flow: column; row-gap: 1rem; align-items: center;}
.page-gnb-wrap .gnb-cont .cont .menu > ul > li > a {font-size: 1.8rem; line-height: 2.6rem; color: #FFFFFF;}
.page-gnb-wrap .gnb-cont .cont .menu > ul > li > ul {padding-bottom: 2rem;}
.page-gnb-wrap .gnb-cont .cont .menu > ul > li > ul > li {text-align: center;}
.page-gnb-wrap .gnb-cont .cont .menu > ul > li > ul > li > a {font-size: 1.8rem; line-height: 3.2rem; color: #D2CCC7;}
.page-gnb-wrap .gnb-cont .user {display: none;}

.page-gnb-wrap .gnb-cont .cont .menu::-webkit-scrollbar {width: 0; height: 0; background-color: transparent;}
.page-gnb-wrap .gnb-cont .cont .menu::-webkit-scrollbar-thumb {background-color: transparent;}
.page-gnb-wrap .gnb-cont .cont .menu::-webkit-scrollbar-track {background-color: transparent;}
.page-gnb-wrap .gnb-cont .cont .menu > ul::-webkit-scrollbar {width: 0; height: 0; background-color: transparent;}
.page-gnb-wrap .gnb-cont .cont .menu > ul::-webkit-scrollbar-thumb {background-color: transparent;}
.page-gnb-wrap .gnb-cont .cont .menu > ul::-webkit-scrollbar-track {background-color: transparent;}

.page-gnb-wrap .background {width: 0; height: 0; border-radius: 100%; background-color: #000F9F; position: fixed; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 1000;}

.page-gnb-wrap .gnb-cont.active {opacity: 1; z-index: 9998;}
.page-gnb-wrap .gnb-cont.active + .background {opacity: 1; width: 200vw; height: 200vw;}
.page-gnb-wrap .gnb-cont.active .cont .menu::before {opacity: 1; background: transparent linear-gradient(180deg, #000F9F00 0%, #000F9F 100%) 0% 0% no-repeat padding-box; transform: matrix(-1, 0, 0, -1, 0, 0);}
.page-gnb-wrap .gnb-cont.active .cont .menu::after {opacity: 1; background: transparent linear-gradient(180deg, #000F9F00 0%, #000F9F 100%) 0% 0% no-repeat padding-box;}

@media screen and (max-width: 767px) {
    .page-gnb-wrap .gnb-cont .header {height: 5.2rem; padding: 0 1rem;}
    .page-gnb-wrap .gnb-cont .header > div {width: 100%; justify-content: space-between;}
    .page-gnb-wrap .gnb-cont .header > div .lang {display: none;}
    .page-gnb-wrap .gnb-cont .header .svg-hoam-white {display: none;}
    .page-gnb-wrap .gnb-cont .header .svg-hoam-mobile {display: block;}
    .page-gnb-wrap .gnb-cont .header button {height: 2.2rem; padding: 0 1rem; font-size: 1.3rem;}

    .page-gnb-wrap .gnb-cont .cont {padding: 4.8rem 3rem 0; height: calc(100% - 5.2rem);}
    .page-gnb-wrap .gnb-cont .cont .search {width: 100%;}
    .page-gnb-wrap .gnb-cont .cont .search > div {flex: 1;}
    .page-gnb-wrap .gnb-cont .cont .search input {width: 100%;}
    .page-gnb-wrap .gnb-cont .cont .search > button {height: 3.2rem;}
    .page-gnb-wrap .gnb-cont .cont .menu {width: 100%; max-width: initial; height: calc(100% - 3.2rem); overflow-y: auto; display: block; padding: 5rem 0 10rem;}
    .page-gnb-wrap .gnb-cont .cont .menu::before {height: 5rem; position: fixed; top: calc(10rem + 3.2rem);}
    .page-gnb-wrap .gnb-cont .cont .menu::after {height: 5rem; position: fixed;}
    .page-gnb-wrap .gnb-cont .cont .menu > ul {width: 100%; height: fit-content; overflow-y: hidden; padding: 0;}
    .page-gnb-wrap .gnb-cont .cont .menu > ul + ul {margin-top: 5rem;}
    .page-gnb-wrap .gnb-cont .cont .menu > ul > li > a {font-size: 1.6rem; line-height: 2.4rem;}
    .page-gnb-wrap .gnb-cont .cont .menu > ul > li > ul > li > a {font-size: 1.6rem; line-height: 2.4rem;}
    .page-gnb-wrap .gnb-cont .user {display: flex; flex-flow: column; row-gap: 1rem; align-items: end; right: 1rem; bottom: 7.5rem; position: fixed;}
    .page-gnb-wrap .gnb-cont .user button {background-color: #00662E; border-color: #00662E; height: 2.2rem; padding: 0 1rem; font-size: 1.3rem; color: #fff;}
    .page-gnb-wrap .gnb-cont .user .membership {position: fixed; right: 50%; bottom: calc(1.5rem + .9rem); transform: translateX(50%);}

    .page-gnb-wrap .gnb-cont.active + .background {width: 300vw; height: 300vw;}
}

/* footer 푸터 ----------------------- */
footer {width: 100%; padding: 2.5rem; display: flex; flex-flow: column; row-gap: 5rem; border-top: 1px solid var(--hoam-line100); background-color: var(--hoam-white);}
footer .info-wrap {display: flex; align-items: start; justify-content: space-between;}
footer .info-wrap .info {display: flex; flex-flow: column;}
footer .info-wrap .info > div {font-size: 1.8rem; line-height: 2.6rem; margin-bottom: 1rem;}
footer .info-wrap .info > p {font-size: 1.6rem; line-height: 2.8rem;}
footer .info-wrap .sns {display: flex; align-items: center; column-gap: 1rem;}
footer .desc-wrap {display: flex; align-items: flex-end; justify-content: space-between; position: relative;}
footer .desc-wrap > div {display: flex; flex-flow: column; row-gap: 1.6rem; position: relative;}
footer .desc-wrap > div .menu {display: flex; align-items: center;}
footer .desc-wrap > div .menu > li {display: flex; align-items: center; cursor: pointer;}
footer .desc-wrap > div .menu > li + li::before {content: '｜'; color: var(--hoam-text-black);}
footer .desc-wrap > div .menu > li > a {font-size: 1.4rem; color: var(--hoam-text-black);}
footer .desc-wrap > div .link {display: flex; align-items: center;}
footer .desc-wrap > div .link > li {display: flex; align-items: center; cursor: pointer;}
footer .desc-wrap > div .link > li + li::before {content: '｜'; color: var(--hoam-text-gray);}
footer .desc-wrap > div .link > li > button {width: fit-content; height: fit-content; padding: 0; background-color: transparent; border: 0; font-size: 1.4rem; color: var(--hoam-text-gray);}
footer .desc-wrap > div .link > li > button > font {padding: 4px 6px 5px 6px !important;margin-right: -2px;background-color: #00662E;color: #fff !important;}   /* 개인정보 처리방침 폰트 색상 적용 - 2025-04-01 */
footer .desc-wrap > div .iso {display: flex; column-gap: 1rem; justify-content: flex-end;}

footer .desc-wrap > div .link-new {display: flex; column-gap: 1rem; justify-content: flex-end;}
footer .desc-wrap > div .link-new label {visibility: hidden; display: block; width: 0; height: 0;}
footer .desc-wrap > div .link-new .select select {height: 3rem; padding: 0 2.8rem 0 1rem; border: 1px solid var(--hoam-gray); background-position: right 1rem center; font-size: 1.2rem;}
footer .desc-wrap > div .link-new .button button {font-size: 1.2rem; height: 3rem;}

footer .desc-wrap .copyright {font-size: 1.4rem; position: absolute; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%);}

footer .iso button {width: fit-content; height: fit-content; background-color: transparent; border: 0; padding: 0;}
footer .iso .wa {margin-left: 2rem;}
footer .family > label {opacity: 0;}
footer select {height: fit-content; padding: 0 2rem 0 0; font-size: 1.4rem; color: var(--hoam-text-gray); border: 0; background-image: url(/img/ico/ic-select-up-hoam-ef3f47f35d88151717b8554f34422841.svg); background-size: 1rem; background-position: right center;}

.terms-ver {height: fit-content; padding: 0 1.4rem 0 0; font-size: 1.4rem; color: var(--hoam-text-gray); border: 0; background-position: center right;}

@media screen and (max-width: 767px) {
    footer {padding: 2rem; row-gap: 4rem;}
    footer .info-wrap {position: relative;}
    footer .info-wrap .info > div {font-size: 1.6rem; line-height: 2.4rem; margin-bottom: 1.5rem;}
    footer .info-wrap .info > p {font-size: 1.3rem; line-height: 1.9rem;}
    footer .info-wrap .sns {column-gap: .5rem; position: absolute; top: 0; right: 0;}
    footer .info-wrap .sns svg {width: 2.5rem; height: 2.5rem;}
    footer .desc-wrap {padding-bottom: 5rem; flex-flow: column; align-items: start;}
    footer .desc-wrap > div {width: 100%;}
    footer .desc-wrap > div .menu {flex-wrap: wrap; row-gap: .2rem;}
    footer .desc-wrap > div .menu > li > a {font-size: 1.2rem; line-height: 1.6rem;}
    footer .desc-wrap > div .link > li > button {font-size: 1.2rem; line-height: 1.6rem;}
    footer .desc-wrap > div > select {position: absolute; bottom: 5rem; align-self: flex-end;}
    footer .desc-wrap > div .iso {justify-content: initial; margin-top: 2rem;}
    footer .desc-wrap > div .link-new .select {flex: 1;}
    footer .desc-wrap > div .link-new .select select {width: 100%;}
    footer .desc-wrap .copyright {font-size: 1.2rem; position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); width: 100%; text-align: center;}

    footer select {padding-right: 1.2rem; font-size: 1.2rem; background-image: url(/img/ico/ic-select-up-mb-67eeac77c19408ce4e04422b3b224391.svg); background-size: .7rem;}

    .box-desc > li {font-size: 1.3rem; line-height: 1.6rem;}
    .terms-ver {font-size: 1.3rem;}
}

/* container ----------------------- */
.container {padding: 0 0 10rem; margin-top: 5.6rem; min-height: calc(100vh - 12rem);}

@media screen and (max-width: 767px) {
    .container {padding: 0 3rem 10rem; margin-top: 4.8rem; min-height: calc(100vh - 4.8rem);}
}

/* cont box */
.cont-box + .cont-box {margin-top: 5rem; padding-top: 5rem; border-top: 1px solid var(--hoam-line100);}
.cont-box > p {font-size: 1.6rem; line-height: 2.8rem;}

.cont-box .title {display: flex; flex-flow: column; align-items: center; justify-content: center; row-gap: 1rem; margin-bottom: 3rem;}
.cont-box .title > h2 {text-align: center; font-size: 3.6rem; line-height: 4.4rem; word-break: keep-all;}
.cont-box .title > h3 {text-align: center; font-size: 2.8rem; line-height: 3.6rem; word-break: keep-all;}   /* 방문안내 제목 <h4> -> <h3> 변경 - 2025-05-22 */
.cont-box .title > h4 {text-align: center; font-size: 2.4rem; line-height: 3.2rem; word-break: keep-all;}
.cont-box .title > h6 {text-align: center; font-size: 2rem; line-height: 2.8rem; word-break: keep-all;}
.cont-box .sub-title {display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem;}
.cont-box .sub-title > h4 {font-size: 1.8rem; line-height: 2.6rem;}
.cont-box .sub-title > p {font-size: 1.8rem; line-height: 2.6rem;}

@media screen and (max-width: 767px) {
    .cont-box > p {font-size: 1.4rem; line-height: 2.6rem;}
    .cont-box .title > h2 {font-size: 3rem; line-height: 3.9rem;}
    .cont-box .title > h4 {font-size: 2rem; line-height: 2.8rem;}
	.cont-box .title > h3 {font-size: 2.4rem; line-height: 3.2rem;}   /* 방문안내 제목 <h4> -> <h3> 변경 - 2025-05-22 */
    .cont-box .title > h6 {font-size: 1.6rem; line-height: 2.4rem;}
    .cont-box .sub-title > h4 {font-size: 1.6rem; line-height: 2.4rem;}
    .cont-box .sub-title > p {font-size: 1.6rem; line-height: 2.4rem;}
}

/* box */
.box + .box {margin-top: 3rem;}
.box + .box .title {margin-top: 5rem;}

/* page title */
.page-title {margin-bottom: 5rem; display: flex; align-items: center; justify-content: center; flex-flow: column; row-gap: 2rem;}
.page-title > h1 {text-align: center; font-size: 3.6rem; line-height: 4.5rem; word-break: keep-all;}

.page-wrap {width: calc(100% - 20rem); margin: 0 auto;}

@media screen and (max-width: 767px) {
    .page-title {margin-bottom: 3rem; row-gap: 1rem;}
    .page-title > h1 {font-size: 3rem; line-height: 3.9rem;}

    .page-wrap {width: 100%;}
}

/* account ----------------------- */
/* 로그인 */
html.account, html.account body {background-color: var(--hoam-white);}
html.account .container {margin-top: 9rem; display: flex; align-items: center; justify-content: center;}

.account-wrap {width: 40rem; padding: 3rem 2rem; margin: 0 auto; background-color: var(--hoam-white); border: 1px solid var(--hoam-line200);}
.account-wrap button {width: 100%; height: 3.6rem; color: var(--hoam-text-btn); background-color: var(--hoam-green); border-color: var(--hoam-green);}
.account-wrap button.beige {color: #EFE2CD;}
.account-wrap .cont-box + .cont-box {margin-top: 3rem; padding-top: 3rem;}
.account-wrap .cont-box#box-3 {margin-top: 0; padding-top: 0; border-top: 0;}
.account-wrap .title > h6 {font-size: 1.8rem; line-height: 2.6rem; margin-bottom: -1rem;}
.account-wrap .input-wrap {display: flex; flex-flow: column; row-gap: 1rem;}
.account-wrap .input-wrap > li input {width: 100%;}
.account-wrap .input-wrap .find-link {display: flex; align-items: center;}
.account-wrap .input-wrap .find-link > li > a {font-size: 1.4rem; color: var(--hoam-text-gray);}
.account-wrap .input-wrap .find-link > li + li::before {content: '｜'; font-size: 1.4rem; color: var(--hoam-text-gray);}
.account-wrap .sns-login {display: flex; column-gap: 3rem; justify-content: center;}
.account-wrap .sns-login > li > button {display: flex; flex-flow: column; row-gap: 1rem; align-items: center; width: fit-content; background-color: transparent; border: 0; height: initial;}
.account-wrap .sns-login > li > button > p {font-size: 1.4rem; color: var(--hoam-text-gray);}

@media screen and (max-width: 767px) {
    html.account, html.account body {background-color: var(--hoam-white);}
    html.account .container {margin-top: 10rem; align-items: start; min-height: auto;}

    .account-wrap {width: 100%; max-width: 40rem; padding: 0; background-color: transparent; border: 0;}
    .account-wrap button {height: 3.2rem;}
    .account-wrap .title > h6 {font-size: 1.6rem; line-height: 2.4rem;}
    .account-wrap .input-wrap .find-link > li > a {font-size: 1.3rem;}
    .account-wrap .input-wrap .find-link > li + li::before {font-size: 1.3rem;}
    .account-wrap .sns-login > li > a > i {width: 4rem; height: 4rem;}
    .account-wrap .sns-login > li > a > p {font-size: 1.3rem;}
}

/* 회원가입 */
.join-wrap {display: flex; flex-flow: column; row-gap: 2rem;}
.join-wrap > p {font-size: 1.4rem; line-height: 2.2rem; text-align: center;}

@media screen and (max-width: 767px) {
    .join-wrap > p {font-size: 1.3rem; line-height: 1.9rem;}
}

/* 약관동의 */
.terms-wrap + .terms-wrap {margin-top: 2rem;}
.terms-wrap .box-desc {margin-top: 1rem; background-color: var(--hoam-white); border: 1px solid var(--hoam-line100);}
.terms-wrap .box-desc > li {font-size: 1.2rem; line-height: 1.8rem;}

@media screen and (max-width: 767px) {
    .terms-wrap .box-desc > li {font-size: 1.3rem; line-height: 1.6rem;}
}

/* 본인인증 */
.account-box {display: flex; flex-flow: column; row-gap: 3rem;}
.account-box > p {text-align: center; font-size: 1.6rem; line-height: 2.8rem; display: flex; flex-flow: column; align-items: center; word-break: keep-all;}
.account-box > p > span {font-size: 1.4rem; line-height: 2.2rem; color: var(--hoam-text-gray);}

@media screen and (max-width: 767px) {
    .account-box > p {font-size: 1.4rem; line-height: 2.6rem;}
    .account-box > p > span {font-size: 1.3rem; line-height: 1.9rem;}
}

/* 가입정보 */
.info-input {display: flex; flex-flow: column; row-gap: 2rem;}
.info-input > li {display: flex; flex-flow: column; row-gap: .5rem;}
.info-input > li > p {font-size: 1.6rem; font-weight: 700; line-height: 2.8rem;}
.info-input > li h6 {font-size: 1.2rem; line-height: 1.8rem;}
.info-input > li > button {width: 100%; height: 3.6rem; background-color: var(--hoam-blue); color: var(--hoam-text-btn); border-color: var(--hoam-blue); margin-top: -1rem;}
.info-input > li > button.gray {width: fit-content; height: 2.5rem; padding: 0 1rem; font-size: 1.2rem; background-color: var(--hoam-gray); border-color: var(--hoam-line100); color: var(--hoam-text-gray); margin-top: 0;}
.info-input > li > select {width: 100%;}
.info-input > li > span {font-size: 1.2rem; line-height: 1.8rem; color: var(--hoam-text-gray);}
.info-input > li input ~ .box-desc,
.info-input > li .input-btn-wrap ~ .box-desc,
.info-input > li .input-btn-wrap ~ .box-desc-list {margin-top: .5rem;}
.info-input > li .list-desc-sub > li {font-size: 1.2rem; line-height: 1.8rem;}

.info-input .double-btn {flex-flow: initial; column-gap: 1rem;}
.info-input .double-btn button:nth-child(1) {background-color: var(--hoam-gray); color: var(--hoam-text-gray); border-color: var(--hoam-gray);}
.info-input .double-btn button {width: calc((100% - 1rem) / 2);}

.info-input .box {width: 100%; min-height: 3.6rem; background-color: var(--hoam-gray); display: flex; align-items: center; padding: .6rem 1rem; font-size: 1.4rem; line-height: 2.2rem;}
.info-input .box + .box {margin-top: 0!important;}

.info-input .terms {display: flex; align-items: center; flex-wrap: wrap; grid-gap: 1rem;}
.info-input .terms button {height: 2.5rem; padding: 0 1rem; font-size: 1.2rem; background-color: var(--hoam-gray); color: var(--hoam-text-gray); border-color: var(--hoam-line100);}
.info-input .terms .box-desc + button {margin-top: 1rem;}

.info-input .flex-input .payment {display: flex; align-items: center; column-gap: 1rem; flex: 1;}
.info-input .flex-input .payment input[type="text"] {width: 100%; height: 2.5rem; font-size: 1.2rem;}
.info-input .flex-input + .box-desc {margin-top: .5rem;}

.info-input .flex-row {flex-flow: row; column-gap: 1.5rem;}
.info-input .flex-row > div {display: flex; flex-flow: column; row-gap: .5rem;}
.info-input .flex-row > div:nth-child(1) {flex: 1;}
.info-input .flex-row > div > select {width: 100%;}
.info-input .flex-row > div .flex-input {height: 3.6rem;}

.info-input .half {flex-flow: row; column-gap: 1rem; flex-wrap: wrap; width: 100%;}
.info-input .half > div {width: calc((100% - 1rem) / 2); display: flex; flex-flow: column; row-gap: .5rem;}

.pop-cont p + .info-input {margin-top: 3rem;}

.input-btn-wrap {display: flex; align-items: center; column-gap: 1rem;}
.input-btn-wrap > input {flex: 1; height: 3.6rem;}
.input-btn-wrap > button {width: fit-content; height: 3.6rem; padding: 0 1rem; background-color: var(--hoam-gray); color: var(--hoam-text-gray); border-color: var(--hoam-line100);}

.email-wrap {display: flex; align-items: center; justify-content: space-between; column-gap: .4rem; text-align: center; font-size: 1.4rem;}
.email-wrap > input {width: calc((100% - .4rem - 1rem - .4rem) / 2);}
.email-wrap > select {width: calc((100% - .4rem - 1rem - .4rem) / 2); margin-left: .6rem;}
.email-wrap > button {width: fit-content; padding: 0 1rem; background-color: var(--hoam-gray); color: var(--hoam-text-gray); border-color: var(--hoam-line100); margin-left: .6rem;}

.phone-wrap {display: flex; align-items: center; justify-content: space-between; column-gap: .4rem; text-align: center; font-size: 1.4rem;}
.phone-wrap > input,
.phone-wrap > select {width: calc((100% - .4rem - 1rem - .4rem - .4rem - 1rem - .4rem) / 3);}
.phone-wrap > button {width: fit-content; padding: 0 1rem; background-color: var(--hoam-gray); color: var(--hoam-text-gray); border-color: var(--hoam-line100); margin-left: .6rem;}

.address-wrap {display: flex; flex-flow: column; row-gap: 1rem;}
.address-wrap > li {display: flex; align-items: center; column-gap: 1rem;}
.address-wrap > li > input {flex: 1;}
.address-wrap > li > input:disabled,
.address-wrap > li > input:read-only {background-color: var(--hoam-white);}
.address-wrap > li > button {width: fit-content; height: 3.6rem; padding: 0 1rem; background-color: var(--hoam-gray); color: var(--hoam-text-gray); border-color: var(--hoam-line100);}

@media screen and (max-width: 767px) {
    .info-input > li > p {font-size: 1.4rem; line-height: 2.6rem;}
    .info-input > li h6,
    .info-input > li > span,
    .info-input > li .list-desc-sub > li {font-size: 1.3rem; line-height: 1.6rem;}
    .info-input > li > button {height: 3.2rem;}
    .info-input > li > button.gray {height: 2.2rem; font-size: 1.3rem;}

    .info-input .box {min-height: 3.2rem; font-size: 1.3rem; line-height: 1.9rem;}

    .info-input .terms button {height: 2.2rem; font-size: 1.3rem;}

    .info-input .flex-input .payment input[type="text"] {width: 100%; height: 2.2rem; font-size: 1.3rem;}

    .info-input .flex-row {column-gap: 1rem;}
    .info-input .flex-row > div .flex-input {height: 3.2rem;}

    .input-btn-wrap > input {height: 3.2rem; width: calc(100% - 10rem);}
    .input-btn-wrap > button {height: 3.2rem;}

    .email-wrap,
    .phone-wrap {font-size: 1.3rem;}
    .address-wrap > li > button {height: 3.2rem;}
}

/* main ----------------------- */
.main-swiper-wrap {width: 100%; min-width: 128rem; height: 100vh; margin-top: calc(-5.6rem - 6.4rem); position: sticky; top: 0;}
.main-swiper-wrap .scroll {width: 5rem; height: 5rem; background-color: var(--hoam-green); background-image: url(/img/ico/hoam_icon_scrolldown-348ec2ac2a7da4d6114b83761d8991ac.svg); background-repeat: no-repeat; background-size: 4rem; background-position: center; position: absolute; bottom: 2rem; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); z-index: 9;}

.main-swiper-wrap .main-swiper.swiper {width: 100%; height: 100%;}
.main-swiper-wrap .main-swiper.swiper .img {width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: center; position: relative;}
.main-swiper-wrap .main-swiper.swiper .img .info {display: flex; flex-flow: column; width: 40%; max-width: 60rem; padding: 1.5rem; background-color: rgba(255,255,255,0.8); position: absolute; left: 2.5rem; bottom: -3rem; opacity: 0;}
.main-swiper-wrap .main-swiper.swiper .img .info > h4 {font-size: 2rem; text-align: center; line-height: 2.6rem;}
.main-swiper-wrap .main-swiper.swiper .img .info > h4 > i {display: initial; font-style: italic;}
.main-swiper-wrap .main-swiper.swiper .img .info > button {margin: .8rem auto 0; background-color: var(--hoam-blue); border-color: var(--hoam-blue);}
.main-swiper-wrap .main-swiper.swiper .img .info .desc {margin-top: 3.4rem;}
.main-swiper-wrap .main-swiper.swiper .img .info .desc > p {font-size: 1.6rem; line-height: 2.8rem; color: var(--hoam-text-gray);}
.main-swiper-wrap .main-swiper.swiper .swiper-slide-active .img .info {bottom: 2rem; opacity: 1;}
.main-swiper-wrap .main-swiper.swiper iframe {width: 100%; height: 100%;}

.main-swiper-wrap .main-swiper.swiper .swiper-pagination {top: initial; left: initial; right: 2.5rem; bottom: 2rem; width: fit-content; display: flex; align-items: center; column-gap: .8rem;}
.main-swiper-wrap .main-swiper.swiper .swiper-pagination .swiper-pagination-bullet {width: 1rem; height: 1rem; background-color: var(--hoam-gray); opacity: .3; margin: 0; border-radius: 0;}
.main-swiper-wrap .main-swiper.swiper .swiper-pagination .swiper-pagination-bullet-active {background-color: var(--hoam-gray); opacity: 1;}

@media screen and (max-width: 767px) {
    .main-swiper-wrap {width: 100vw; min-width: initial; margin-top: -10rem; margin-left: -3rem;}
    .main-swiper-wrap .scroll {width: 4rem; height: 4rem; background-size: 3.2rem; bottom: 1.5rem;}

    .main-swiper-wrap .main-swiper.swiper .img .info {width: 40%; padding: 1.2rem 1.6rem; left: 1rem; bottom: -3rem;}
    .main-swiper-wrap .main-swiper.swiper .img .info > h4 {font-size: 1.6rem; line-height: 2.4rem;}
    .main-swiper-wrap .main-swiper.swiper .img .info > button {margin: 1rem auto 0;}
    .main-swiper-wrap .main-swiper.swiper .img .info .desc {margin-top: 3rem;}
    .main-swiper-wrap .main-swiper.swiper .img .info .desc > p {font-size: 1.4rem; line-height: 2.6rem;}
    .main-swiper-wrap .main-swiper.swiper .swiper-slide-active .img .info {width: calc(100% - 2rem); left: 1rem; bottom: 8.8rem; padding: 2rem 1.5rem;}

    .main-swiper-wrap .main-swiper.swiper .swiper-pagination {right: 1rem; bottom: 7rem; column-gap: .5rem;}
    .main-swiper-wrap .main-swiper.swiper .swiper-pagination .swiper-pagination-bullet {width: .8rem; height: .9rem;}
}

.main-wrap {width: 100%; margin-bottom: -10rem; padding: 5rem 10% 10rem; background-color: var(--hoam-white); position: relative; z-index: 10;}

@media screen and (max-width: 767px) {
    .main-wrap {padding: 5rem 3rem 0; margin: 0 -3rem; width: 100vw;}
    .main-wrap .post-list.grid-4 > li {width: 100%;}
}

/* 메인 > 소장품 */
.own-swiper .swiper-slide {display: flex; flex-flow: column; row-gap: 1.4rem; cursor: pointer;}
.own-swiper .swiper-slide .img {width: 100%; display: flex; align-items: flex-end; line-height: 1; position: relative; overflow: hidden;}
.own-swiper .swiper-slide .img img {width: 100%; cursor: pointer; line-height: 1;}
.own-swiper .swiper-slide .img::before {content: '자세히 보기'; width: 100%; height: 2.2rem; font-size: 1.2rem; line-height: 1.2rem; display: flex; align-items: center; justify-content: center; background-color: var(--hoam-white); position: absolute; bottom: -2.2rem; left: 0; transition: bottom .4s;}
.own-swiper .swiper-slide:hover .img::before {transition: bottom .4s ease-in-out; bottom: 0;}
.own-swiper .swiper-slide .info {display: flex; flex-flow: column; row-gap: .5rem;}
.own-swiper .swiper-slide .info > a {font-size: 1.8rem; line-height: 2.6rem;}
.own-swiper .swiper-slide .info .desc > p {font-size: 1.4rem; line-height: 2.2rem; color: var(--hoam-text-gray);}

/* 영문 반영 위함 2023-08-03 서규범*/
.own-swiper .swiper-slide .img-eng {width: 100%; display: flex; align-items: flex-end; line-height: 1; position: relative; overflow: hidden;}
.own-swiper .swiper-slide .img-eng img {width: 100%; cursor: pointer; line-height: 1;}
.own-swiper .swiper-slide .img-eng::before {content: 'More'; width: 100%; height: 2.2rem; font-size: 1.2rem; line-height: 1.2rem; display: flex; align-items: center; justify-content: center; background-color: var(--leeum-white); position: absolute; bottom: -2.2rem; left: 0; transition: bottom .4s;}
.own-swiper .swiper-slide:hover .img-eng::before {transition: bottom .4s ease-in-out; bottom: 0;}

.own-swiper-wrap {position: relative;}
.own-swiper-wrap .swiper-button-prev {left: -2.5rem; width: 5rem; height: 5rem;}
.own-swiper-wrap .swiper-button-next {right: -2.5rem; width: 5rem; height: 5rem;}
.own-swiper-wrap .swiper-button-prev::after,
.own-swiper-wrap .swiper-button-next::after {content: none;}
.own-swiper-wrap .swiper-button-prev::before,
.own-swiper-wrap .swiper-button-next::before {content: ''; width: 100%; height: 100%; background-color: var(--hoam-green); background-repeat: no-repeat; background-size: 2.5rem; background-position: center; cursor: pointer;}
.own-swiper-wrap .swiper-button-prev::before {background-image: url(/img/ico/ic-arrow-swiper-prev-hoam-66bce54be0aff8380e7d5a61e831c53b.svg);}
.own-swiper-wrap .swiper-button-next::before {background-image: url(/img/ico/ic-arrow-swiper-next-hoam-37fc7a20bf72563f69bc1353fd775e74.svg);}

@media screen and (max-width: 767px) {
    .own-swiper .swiper-slide .info > a {font-size: 1.6rem; line-height: 2.4rem;}
    .own-swiper .swiper-slide .info .desc > p {font-size: 1.3rem; line-height: 1.9rem;}

    .own-swiper-wrap {position: relative;}
    .own-swiper-wrap .swiper-button-prev {left: -2rem; width: 4rem; height: 4rem;}
    .own-swiper-wrap .swiper-button-next {right: -2rem; width: 4rem; height: 4rem;}
    .own-swiper-wrap .swiper-button-prev::before,
    .own-swiper-wrap .swiper-button-next::before {background-size: 2rem;}
}

/* 메인 > 공지사항 */
.notice-list {border-top: 1px solid var(--hoam-line200);}
.notice-list > li {height: 4.5rem; display: flex; align-items: center; column-gap: 3rem; font-size: 1.6rem; line-height: 2.8rem; border-bottom: 1px solid var(--hoam-line200); cursor: pointer; color: var(--hoam-text-gray);}
.notice-list > li > a {width: calc(100% - 12.6rem - 3rem); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--hoam-text-black);}
.notice-list > li > a > i {font-style: italic!important; display: initial;}
.notice-list > li .date {width: 12.6rem; text-align: right;}

@media screen and (max-width: 767px) {
    .notice-list > li {min-height: 3.7rem; height: auto; padding: 1rem 0; flex-flow: column; row-gap: .5rem; align-items: start; font-size: 1.4rem; line-height: 2.6rem;}
    .notice-list > li > a {width: 100%; overflow: initial; text-overflow: initial; white-space: initial;}
    .notice-list > li .date {width: 100%; text-align: left;}
}

/* 메인 > 개인정보 처리방침 팝업 */
.policy-wrap {display: flex; flex-flow: column; row-gap: 1rem;}
.policy-wrap iframe {min-height: 50vh;}

.policy-wrap > ul {display:flex;align-items:center;}
.policy-wrap > ul > li {padding-right:10px;}

/* 리스트 ----------------------- */
.category-summary {padding-bottom: 3rem; border-bottom: 1px solid var(--hoam-line100); display: flex; flex-flow: column; row-gap: 1rem; background-image: none!important; margin-bottom: 3rem; position: relative;}
.category-summary > h4 {font-size: 2.4rem; color: var(--hoam-text-black); position: relative; z-index: 2;}
.category-summary > p {font-size: 1.4rem; line-height: 2.2rem; width: 60%; color: var(--hoam-text-black); position: relative; z-index: 2;}

@media screen and (max-width: 767px) {
    .category-summary > h4 {font-size: 2rem;}
    .category-summary > p {font-size: 1.3rem; line-height: 1.9rem; width: 100%;}
}

.post-list {width: 100%; display: flex; grid-gap: 4rem 2rem; flex-wrap: wrap; justify-content: center;}
.post-list > li {width: calc((100% - (2rem * 0)) / 1); cursor: pointer;}
.post-list > li > a {display: flex; flex-flow: column; row-gap: 1.4rem; cursor: pointer;}
.post-list > li .img {position: relative; overflow: hidden; line-height: 1;}
.post-list > li .img img {width: 100%; cursor: pointer; line-height: 1;}
.post-list > li .img::before {content: '자세히 보기'; width: 100%; height: 2.2rem; font-size: 1.2rem; line-height: 1.2rem; display: flex; align-items: center; justify-content: center; background-color: var(--hoam-white); position: absolute; bottom: -2.2rem; left: 0; transition: bottom .4s;}
.post-list > li:hover .img::before {transition: bottom .4s ease-in-out; bottom: 0;}
.post-list > li .info {display: flex; flex-flow: column; row-gap: .5rem;}
.post-list > li .info > h4 {text-align: center; font-size: 2rem; line-height: 2.8rem; word-break: keep-all;}
.post-list > li .info > h4 > i {font-style: italic!important; display: initial;}
.post-list > li .info > div {display: flex; align-items: start; justify-content: space-between;}
.post-list > li .info > div .desc > p {font-size: 1.6rem; line-height: 2.6rem; color: var(--hoam-text-gray);}
.post-list > li .info > div .desc > span {display: block; margin-top: .4rem; font-size: 1.6rem; line-height: 2.6rem; color: var(--hoam-text-gray); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.post-list > li .info .label-wrap {height: 2rem;}

.post-list > li .info > hhhh {text-align: center; font-size: 1.6rem; line-height: 2.6rem; word-break: keep-all;}
.post-list > li .info > hhhh > i {font-style: italic!important; display: initial;}

/* 영문 반영 위함 2023-08-03 서규범*/
.post-list > li .img-eng {position: relative; overflow: hidden; line-height: 1;}
.post-list > li .img-eng img {width: 100%; cursor: pointer; line-height: 1;}
.post-list > li .img-eng::before {content: 'More'; width: 100%; height: 2.2rem; font-size: 1.2rem; line-height: 1.2rem; display: flex; align-items: center; justify-content: center; background-color: var(--leeum-white); position: absolute; bottom: -2.2rem; left: 0; transition: bottom .4s;}
.post-list > li:hover .img-eng::before {transition: bottom .4s ease-in-out; bottom: 0;}

/* 리스트 > 3개 이상 */
/* .post-list > li:nth-child(1):nth-last-child(3) .img, .post-list > li:nth-child(1):nth-last-child(3) ~ li .img {height: 14.6vw;} */

/* 리스트 > 4개 이상 */
/* .post-list > li:nth-child(1):nth-last-child(n+4) .img, .post-list > li:nth-child(1):nth-last-child(n+4) ~ li .img {height: 10.8vw;} */
/* .post-list > li:nth-child(1):nth-last-child(n+4) .info > a, .post-list > li:nth-child(1):nth-last-child(n+4) ~ li .info > a {text-align: left;}
.post-list > li:nth-child(1):nth-last-child(n+4) .info > div .desc > p, .post-list > li:nth-child(1):nth-last-child(n+4) ~ li .info > div .desc > p {font-size: 1.4rem; line-height: 2.1rem;}
.post-list > li:nth-child(1):nth-last-child(n+4) .info > div > button, .post-list > li:nth-child(1):nth-last-child(n+4) ~ li .info > div > button {height: 2.8rem; font-size: 1.2rem;} */

@media screen and (max-width: 767px) {
    .post-list {grid-gap: 4rem 1.6rem;}
    .post-list > li {width: 100%;}
    .post-list > li .info > h4 {font-size: 1.8rem; line-height: 2.6rem; display: initial; overflow: initial; text-overflow: initial; white-space: initial;}
    .post-list > li .info > div .desc > p {font-size: 1.3rem; line-height: 1.9rem;}
    .post-list > li .info > div .desc > span {font-size: 1.3rem; line-height: 1.9rem;}
	
	.post-list > li .info > hhhh {font-size: 1.8rem; line-height: 2.6rem; display: initial; overflow: initial; text-overflow: initial; white-space: initial;}

    /* .post-list > li:nth-child(1):nth-last-child(n+4) .info > div .desc > p, .post-list > li:nth-child(1):nth-last-child(n+4) ~ li .info > div .desc > p {font-size: 1.2rem; line-height: 1.9rem;}
    .post-list > li:nth-child(1):nth-last-child(n+4) .info > div > button, .post-list > li:nth-child(1):nth-last-child(n+4) ~ li .info > div > button {height: 2.8rem; font-size: 1.2rem;} */
}

.post-list.grid-2 + .post-list {margin-top: 4rem;}
.post-list.grid-2 > li {width: calc((100% - (2rem * 1)) / 2);}

@media screen and (max-width: 767px) {
    .post-list.grid-2 > li {width: 100%;}
}

.post-list.grid-3 > li {width: calc((100% - (2rem * 2)) / 3);}
.post-list.grid-3 > li .info > h4 {font-size: 1.8rem; line-height: 2.8rem;}
.post-list.grid-3 > li .info > div .desc > p {color: var(--hoam-text-black); font-size: 1.4rem; line-height: 2.4rem;}
.post-list.grid-3 > li .info > div .desc > span {font-size: 1.4rem; line-height: 2.4rem;}

.post-list.grid-3 > li .info > hhhh {font-size: 1.8rem; line-height: 2.8rem;}

@media screen and (max-width: 767px) {
    .post-list.grid-3 > li {width: 100%;}
    .post-list.grid-3 > li .info > h4 {font-size: 1.6rem; line-height: 2.6rem;}
    .post-list.grid-3 > li .info > div .desc > p {font-size: 1.3rem; line-height: 1.9rem;}
    .post-list.grid-3 > li .info > div .desc > span {font-size: 1.3rem; line-height: 1.9rem;}
	
	.post-list.grid-3 > li .info > hhhh {font-size: 1.6rem; line-height: 2.6rem;}
}

.post-list.grid-4 > li {width: calc((100% - (2rem * 3)) / 4);}
.post-list.grid-4 > li .info > h4 {text-align: left; font-size: 1.6rem; line-height: 2.6rem;}
.post-list.grid-4 > li .info > div .desc > p {font-size: 1.4rem; line-height: 2.4rem;}
.post-list.grid-4 > li .info > div .desc > span {font-size: 1.4rem; line-height: 2.4rem;}

.post-list.grid-4 > li .info > hhhh {text-align: left; font-size: 1.6rem; line-height: 2.6rem;}

@media screen and (max-width: 767px) {
    .post-list.grid-4 > li {width: calc((100% - (1.6rem * 1)) / 2);}
    .post-list.grid-4 > li .info > h4 {font-size: 1.4rem; line-height: 2.4rem;}
    .post-list.grid-4 > li .info > div .desc > p {font-size: 1.2rem; line-height: 1.8rem;}
    .post-list.grid-4 > li .info > div .desc > span {font-size: 1.2rem; line-height: 1.8rem;}
	
	.post-list.grid-4 > li .info > hhhh {font-size: 1.4rem; line-height: 2.4rem;}
}

/* 리스트 > 이미지 반대 */
.post-list.reverse {align-items: end;}

/* 리스트 > 텍스트 */
.post-text-list > li {height: 4.5rem; padding: 1rem 0; display: flex; align-items: center; column-gap: 10rem; border-bottom: 1px solid var(--hoam-line200);}
.post-text-list > li:nth-child(1) {border-top: 1px solid var(--hoam-line200);}
.post-text-list > li > a {font-size: 1.6rem; line-height: 2.8rem; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: .5rem; flex: 1;}
.post-text-list > li > a > i {font-style: italic!important; display: initial;}
.post-text-list > li > a > span {display: inline-flex;}
.post-text-list > li > p {font-size: 1.6rem; line-height: 2.8rem; color: var(--hoam-text-gray); white-space: nowrap;}

@media screen and (max-width: 767px) {
    .post-text-list > li {height: fit-content; flex-flow: column; row-gap: .5rem; align-items: start;}
    .post-text-list > li > a {font-size: 1.4rem; line-height: 2.6rem; display: inline-block; overflow: initial; text-overflow: initial; white-space: initial;}
    .post-text-list > li > p {font-size: 1.4rem; line-height: 2.6rem;}
}

/* 상세 ----------------------- */
.detail-wrap .cont-box {min-width: 72rem; max-width: 50%; margin: 0 auto;}
.detail-wrap .cont-box + .cont-box {margin-top: 5rem;}
.detail-wrap .back {position: sticky; left: 2.5rem; top: calc(100vh - 3.2rem - 2rem); z-index: 9;}
.detail-wrap .back + .cont-box {margin-top: -3.2rem;}

.detail-wrap .cont-box > h4 {font-size: 2rem; line-height: 3.2rem; text-align: left; cursor: text; margin-bottom: 3.6rem;}
.detail-wrap .cont-box > h4  > i {font-style: italic!important; display: initial;}

@media screen and (max-width: 767px) {
    .detail-wrap .cont-box {min-width: initial; max-width: initial; width: 100%;}
    .detail-wrap .back {margin-bottom: .6rem; position: fixed; top: auto; bottom: 1.5rem; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%);}
    .detail-wrap .back + .cont-box {margin-top: -2.8rem;}
	
	.detail-wrap .cont-box > h4 {font-size: 1.6rem; line-height: 2.4rem; margin-bottom: 2.6rem;}
}

/* 상세 > 상단 요약 */
.detail-summary {display: flex; flex-flow: column; row-gap: 2rem;}
.detail-summary > img {width: 100%;}
.detail-summary > iframe {width: 100%; height: 28.4vw; min-height: 40.5rem;}
.detail-summary > video {width: 100%; height: 28.4vw; min-height: 40.5rem;}
.detail-summary .info {display: flex; flex-flow: column; row-gap: 1rem;}
.detail-summary .info > a {font-size: 2rem; line-height: 3.2rem; text-align: center; cursor: text;}
.detail-summary .info > a  > i {font-style: italic!important; display: initial;}
.detail-summary .info > div {display: flex; align-items: start; justify-content: space-between;}
.detail-summary .info .desc {display: flex; flex-flow: column;}
.detail-summary .info .desc > p {font-size: 1.6rem; line-height: 2.4rem; color: var(--hoam-text-gray);}
.detail-summary .info > span {font-size: 1.2rem; line-height: 1.8rem; color: var(--hoam-text-gray);}
.detail-summary .expand {margin-top: auto;}

.detail-summary.horiz {flex-flow: row; column-gap: 2rem;}
.detail-summary.horiz > img {width: 29.5rem; height: fit-content;}
.detail-summary.horiz .info {width: calc(100% - 29.5rem - 2rem);}
.detail-summary.horiz .info > a {text-align: left;}
.detail-summary.horiz .info > div {display: flex; align-items: start; justify-content: space-between;}

.detail-summary .info > h3 {font-size: 2rem; line-height: 3.2rem; text-align: center; cursor: text;}

.detail-summary .info > h4 {font-size: 2rem; line-height: 3.2rem; text-align: center; cursor: text;}
.detail-summary .info > h4  > i {font-style: italic!important; display: initial;}

@media screen and (max-width: 767px) {
    .detail-summary > iframe {height: 48.8vw; min-height: initial;}
    .detail-summary .info > a {font-size: 1.6rem; line-height: 2.4rem;}
    .detail-summary .info > div {flex-flow: column; row-gap: 1rem;}
    .detail-summary .info .desc {row-gap: 0;}
    .detail-summary .info .desc > p {font-size: 1.3rem; line-height: 1.9rem;}
    .detail-summary .info > span {font-size: 1.1rem; line-height: 1.6rem;}

    .detail-summary.horiz {flex-flow: column; row-gap: 2rem;}
    .detail-summary.horiz > img {width: 100%;}
    .detail-summary.horiz .info {width: 100%;}
	
	.detail-summary .info > h3 {font-size: 1.6rem; line-height: 2.4rem;}
	
	.detail-summary .info > h4 {font-size: 1.6rem; line-height: 2.4rem;}
}

/* 상세 > 관련 게시글 */
.conn-swiper .swiper-slide {display: flex; flex-flow: column; row-gap: 1.4rem;}
.conn-swiper .swiper-slide > a {display: flex; flex-flow: column; row-gap: 1.4rem;}
.conn-swiper .swiper-slide img {width: 100%;}
.conn-swiper .swiper-slide .img {width: 100%; background-color: var(--hoam-gray); background-repeat: no-repeat; background-size: cover; background-position: center;}
.conn-swiper .swiper-slide > a > p {font-size: 1.8rem; text-align: center; line-height: 2.6rem;}
.conn-swiper .swiper-slide .info {display: flex; flex-flow: column; row-gap: 1rem;}
.conn-swiper .swiper-slide .info > h6 {font-size: 1.8rem; line-height: 2.6rem; text-align: left;}
.conn-swiper .swiper-slide .info .desc {display: flex; flex-flow: column; align-items: start;}
.conn-swiper .swiper-slide .info .desc > p {font-size: 1.4rem; line-height: 2.2rem; color: var(--hoam-text-black);}

.conn-swiper-wrap {position: relative;}
.conn-swiper-wrap .swiper-button-prev {top: calc((100% - 4rem) / 2); left: -2rem; width: 4rem; height: 4rem; margin-top: -2rem;}
.conn-swiper-wrap .swiper-button-next {top: calc((100% - 4rem) / 2); right: -2rem; width: 4rem; height: 4rem; margin-top: -2rem;}
.conn-swiper-wrap .swiper-button-prev::after,
.conn-swiper-wrap .swiper-button-next::after {content: none;}
.conn-swiper-wrap .swiper-button-prev::before,
.conn-swiper-wrap .swiper-button-next::before {content: ''; width: 100%; height: 100%; background-color: var(--hoam-green); background-repeat: no-repeat; background-size: 2rem; background-position: center; cursor: pointer;}
.conn-swiper-wrap .swiper-button-prev::before {background-image: url(/img/ico/ic-arrow-swiper-prev-hoam-66bce54be0aff8380e7d5a61e831c53b.svg);}
.conn-swiper-wrap .swiper-button-next::before {background-image: url(/img/ico/ic-arrow-swiper-next-hoam-37fc7a20bf72563f69bc1353fd775e74.svg);}

.conn-swiper .swiper-slide > a:focus {outline-offset: -1px;}

@media screen and (max-width: 767px) {
    .conn-swiper .swiper-slide > a > p {font-size: 1.6rem; line-height: 2.4rem;}
}

.conn-list {border-top: 1px solid var(--hoam-line200);}
.conn-list > li {height: 4.5rem; display: flex; align-items: center; border-bottom: 1px solid var(--hoam-line200);}
.conn-list > li > a {display: flex; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.6rem;line-height: 2.8rem;}
.conn-list > li > a  > i {font-style: italic!important; display: initial;}

@media screen and (max-width: 767px) {
    .conn-list > li {height: 3.7rem;}
    .conn-list > li > a {font-size: 1.4rem; line-height: 2.6rem;}
}

/* 배움과 연구 ----------------------- */
/* 아카이브 */
.archive-wrap {display: flex; column-gap: 3.5rem; justify-content: space-between;}

.archive-wrap .archive-depth {width: 28.6rem;}
.archive-wrap .archive-depth .ic-archive {display: none;}
.archive-wrap .archive-depth .archive-depth-title {height: 3.6rem; display: flex; align-items: center; justify-content: space-between; padding: 0 1.5rem; background-color: var(--hoam-gray);}
.archive-wrap .archive-depth .archive-depth-title > h6 {font-size: 1.6rem; color: var(--hoam-text-btn);}
.archive-wrap .archive-depth .archive-depth-cont {padding: 2rem 1.5rem 5.6rem; display: flex; flex-flow: column; row-gap: .6rem; position: relative; background-color: var(--hoam-white); border: 1px solid var(--hoam-line200); border-top: 0;}
.archive-wrap .archive-depth .archive-depth-cont::after {content: ''; width: 1px; height: calc(100% - 7.6rem - 1rem); background-color: var(--hoam-gray); display: block; position: absolute; left: calc(1.5rem + .6rem); top: calc(2rem + .5rem); z-index: 1;}

.archive-wrap .archive-depth .archive-depth-cont li {display: flex; flex-flow: column; row-gap: 1rem;}
.archive-wrap .archive-depth .archive-depth-cont li > a::before {content: ''; width: 1.4rem; height: 1.4rem; margin-top: .5rem; background-image: url(/img/ico/ic-won-plus-cbefbbd873a358dedfecc46067627b67.svg); position: relative; z-index: 2;}

.archive-wrap .archive-depth .archive-depth-cont > li a {display: flex; align-items: start; column-gap: 1rem; cursor: default; pointer-events: none;}
.archive-wrap .archive-depth .archive-depth-cont > li a > h6 {font-size: 1.4rem; line-height: 2.2rem; color: var(--hoam-text-gray); max-width: calc(100% - 1.4rem - 1rem); cursor: pointer; pointer-events: all;}
.archive-wrap .archive-depth .archive-depth-cont > li ul {flex-flow: column; align-items: start; padding-left: 2rem; row-gap: .6rem; position: relative;}
.archive-wrap .archive-depth .archive-depth-cont > li > ul::after {content: ''; width: 1px; height: calc(100% - 1rem); background-color: var(--hoam-gray); display: block; position: absolute; left: calc(2rem + .6rem); top: .5rem; z-index: 1; pointer-events: all;}

.archive-wrap .archive-depth .archive-depth-cont > li > ul,
.archive-wrap .archive-depth .archive-depth-cont > li.active > ul > li > ul {display: none;}
.archive-wrap .archive-depth .archive-depth-cont > li.active > ul,
.archive-wrap .archive-depth .archive-depth-cont > li.active > ul > li.active > ul {display: flex;}

.archive-wrap .archive-depth .archive-depth-cont > li.active > a > h6,
.archive-wrap .archive-depth .archive-depth-cont > li.active > ul li.active > a > h6 {color: var(--hoam-text-black);}
.archive-wrap .archive-depth .archive-depth-cont > li.active > a::before {background-image: url(/img/ico/ic-won-minus-bl-a5e52d5c04dcee6acf4e0de0263c93cc.svg);}
.archive-wrap .archive-depth .archive-depth-cont > li.active > ul > li.active > ul > li.active > a::before,
.archive-wrap .archive-depth .archive-depth-cont > li.active > ul > li.active > a::before {background-image: url(/img/ico/ic-won-minus-bl-a5e52d5c04dcee6acf4e0de0263c93cc.svg);}

.archive-wrap .archive-cont {width: calc(100% - 28.6rem - 3.5rem);}
.archive-wrap .archive-cont .archive-title {padding-bottom: 2rem; border-bottom: 1px solid var(--hoam-line200);}
.archive-wrap .archive-cont .archive-title > h4 {font-size: 2.4rem; line-height: 3.2rem;}
.archive-wrap .archive-cont .archive-summary {padding-top: 2rem; margin-bottom: 4rem; display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 2.6rem 1.5rem;}
.archive-wrap .archive-cont .archive-summary > li > h6 {font-size: 1.2rem; line-height: 1.8rem; color: var(--hoam-text-gray);}
.archive-wrap .archive-cont .archive-summary > li > p {font-size: 1.6rem; line-height: 2.8rem;}

.archive-list-type01 {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 4rem 2rem;}
.archive-list-type01 > li {display: flex; flex-flow: column; row-gap: 1.8rem; cursor:pointer;}
.archive-list-type01 > li > img {width: 100%; border: 1px solid var(--hoam-line100);}
.archive-list-type01 > li > h6 {font-size: 1.8rem; line-height: 2.6rem; text-align: center;}

.archive-list-type02 .desktop-only {display: table;}
.archive-list-type02 tr {cursor:pointer;}

.archive-list-type03 {display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 4rem 2rem;}
.archive-list-type03 > li a {display: block; width: 100%; cursor: default;}
.archive-list-type03 > li img {width: 100%;}

@media screen and (max-width: 767px) {
    .archive-wrap {display: flex; column-gap: 3.5rem; justify-content: space-between;}

    .archive-wrap .archive-depth {position: fixed; top: 10rem; left: -28.6rem; z-index: 1; max-height: calc(100vh - 10rem);}
    .archive-wrap .archive-depth.active {left: 0;}
    .archive-wrap .archive-depth .ic-archive {display: flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; background-color: var(--hoam-green); position: absolute; right: -4rem; top: 0; cursor: pointer;}

    .archive-wrap .archive-depth .archive-depth-title {height: 4rem;}
    .archive-wrap .archive-depth .archive-depth-title > h6 {font-size: 1.4rem;}
    .archive-wrap .archive-depth .archive-depth-cont {padding: 1.6rem 1.5rem 3.2rem; border-left: 0;}
    .archive-wrap .archive-depth .archive-depth-cont::after {height: calc(100% - 1.6rem - 3.2rem - 1rem); top: calc(1.6rem + .5rem);}

    .archive-wrap .archive-depth .archive-depth-cont > li a > h6 {font-size: 1.3rem; line-height: 1.9rem;}

    .archive-wrap .archive-cont {width: 100%;}
    .archive-wrap .archive-cont .archive-title {padding-bottom: 1.5rem;}
    .archive-wrap .archive-cont .archive-title > h4 {font-size: 2rem; line-height: 2.4rem;}
    .archive-wrap .archive-cont .archive-summary {padding-top: 1.5rem; grid-template-columns: repeat(1, 1fr); row-gap: 1.5rem;}
    .archive-wrap .archive-cont .archive-summary > li > h6 {font-size: 1.3rem; line-height: 1.6rem;}
    .archive-wrap .archive-cont .archive-summary > li > p {font-size: 1.4rem; line-height: 2.6rem;}

    .archive-list-type01 {grid-template-columns: repeat(1, 1fr); grid-gap: 4rem 1.6rem;}
    .archive-list-type01 > li > h6 {font-size: 1.6rem; line-height: 2.4rem;}

    .archive-list-type02 .mobile-only {display: table;}
    .archive-list-type02 table th {height: 3.3rem; padding: 1rem 0;}
    .archive-list-type02 table td {height: 3.7rem; padding: 1rem 0;}

    .archive-list-type03 {grid-template-columns: repeat(2, 1fr); grid-gap: 4rem 1.6rem;}
}

/* visit 방문안내 ----------------------- */
.sub-wrap .sub-cont {min-width: 72rem; max-width: 50%; margin: /*-16.8rem auto 0;*/ 0 auto;}
.sub-wrap .sub-cont * + .list-desc {margin-top: 1rem;}

.sub-menu {position: sticky; height: 19.6rem; width: fit-content; padding-left: 2.5rem; top: calc(100vh - 19.6rem - 2rem);}
.sub-menu > li > a {font-size: 1.6rem; line-height: 2.8rem; color: var(--hoam-text-gray);}
.sub-menu > li.active > a {color: var(--hoam-text-green);}

@media screen and (max-width: 767px) {
    .sub-wrap .sub-cont  {min-width: initial; max-width: initial; width: 100%; margin: 0 auto;}
    .sub-menu {display: none;}
}

/* 방문안내 > 오시는 길 */
.map-wrap .map {position: relative; height: 42rem;}
.map-wrap .map > svg {position: absolute; bottom: 1rem; right: 1rem; cursor: pointer; z-index: 1;}
.map-wrap .map > iframe {width: 100%; height: 100%;}
.map-wrap > p {font-size: 1.6rem; line-height: 2.8rem; margin-top: 1rem;}
.map-wrap > .map > .quick {display: flex; position: absolute; left: -3000%; width: 100%; height: 2.8rem; border-radius: 0; font-size: 1.4rem; align-items: center; justify-content: center; z-index: 101; background-color: #000; color: #fff; border-color: #000;}
.map-wrap > .map > .quick:focus {left: 0;}

@media screen and (max-width: 767px) {
    .map-wrap .map {height: 50vw; max-height: initial;}
    .map-wrap .map > svg {width: 3rem; height: 3rem;}
    .map-wrap .map > iframe {width: 100%; height: 100%;}
    .map-wrap > p {font-size: 1.4rem; line-height: 2.6rem;}
}

/* 방문안내 > 순회 셔틀버스 */
.bus + .bus {margin-top: 3rem;}
.bus > div {border: 1px solid var(--hoam-line100); padding: 3rem;}
.bus > div > img {width: 100%;}
.bus > div + ul {margin-top: 1rem;}

/* 방문안내 > 카페와 스토어 */
/*.store-wrap {display: grid;grid-template-columns: repeat(3, 1fr);grid-gap: 3rem 2rem;}*/
.store-wrap {grid-template-columns: repeat(1, 1fr);}
.store-wrap > li > p {font-size: 1.6rem; line-height: 2.4rem;}
.store-wrap > img {width: 100%;}
.store-wrap > p {font-size: 1.6rem; line-height: 2.8rem; margin-top: 1rem;}

@media screen and (max-width: 767px) {
	.store-wrap {grid-template-columns: repeat(1, 1fr);}
	.store-wrap > li > p {font-size: 1.3rem; line-height: 1.9rem;}
    .store-wrap > p {font-size: 1.4rem; line-height: 2.6rem;}
}

/* 방문안내 > 자주하는 질문 */

.folding-list {border-top: 1px solid var(--hoam-line200);}
.folding-list > li {border-bottom: 1px solid var(--hoam-line200); display: flex; flex-flow: column; row-gap: 1rem; padding: 1rem 4.3rem 1rem 0; background-image: url(/img/ico/ic-arrow-down-bl-efbb232c316ea90925fae2bdbabfe79b.svg); background-repeat: no-repeat; background-size: 1.1rem auto; background-position: right 1.6rem top 2rem; cursor: pointer;}
.folding-list > li > button {display: flex; column-gap: 3rem; height: unset; padding: unset; border: unset; background-color: unset; color: inherit; justify-content: unset; width: 100%; text-wrap: wrap; text-align: left;}
.folding-list > li > button > .num {font-size: 1.6rem; width: 1rem; text-align: center; line-height: 2.8rem;}
.folding-list > li > button > span:not(.num) {font-size: 1.6rem; line-height: 2.8rem;}
.folding-list > li .folding {display: none;}
.folding-list > li .folding.active {display: flex; padding-left: 4rem; flex-flow: column; row-gap: 1rem;}
.folding-list > li .folding > p {font-size: 1.6rem; line-height: 2.8rem;}
.folding-list > li .folding button {background-color: var(--hoam-gray); color: var(--hoam-text-gray); border-color: var(--hoam-gray);}

@media screen and (max-width: 767px) {
    .folding-list > li {padding: .8rem 3rem .8rem 0; background-position: right 1rem top 1.6rem;}
    .folding-list > li > button {display: flex; align-items: flex-start; column-gap: 2rem;}
    .folding-list > li > button > .num {font-size: 1.4rem; line-height: 2.6rem;}
    .folding-list > li > button > span:not(.num) {font-size: 1.4rem; line-height: 2.6rem;}
    .folding-list > li .folding {padding-left: 3rem;}
    .folding-list > li .folding > p {font-size: 1.4rem; line-height: 2.6rem;}
}

/* membership 멤버십 ----------------------- */
.mem-wrap {min-width: 72rem; max-width: 50%; margin: 0 auto; border-top: 1px solid var(--hoam-line100); padding-top: 5rem;}

@media screen and (max-width: 767px) {
    .mem-wrap {min-width: initial; max-width: initial; width: 100%;}
}

.mem-card-info {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 2rem;}
.mem-card-info > li {border: 1px solid var(--hoam-line100); border-radius: .4rem; padding: 5rem 2rem; display: flex; flex-flow: column; align-items: center;}
.mem-card-info > li > img {width: 11rem;}
.mem-card-info > li > h4 {margin-top: 3rem; font-size: 1.8rem; line-height: 2.6rem;}
.mem-card-info > li > div {margin-top: 1rem; display: flex; align-items: center; column-gap: 1rem;}
.mem-card-info > li > ul {width: 100%; border-top: 1px solid var(--hoam-line100); border-bottom: 1px solid var(--hoam-line100); margin: 3rem 0; padding: 3rem 0; display: flex; flex-flow: column; row-gap: 3rem; align-items: center;}
.mem-card-info > li > ul > li {display: flex; flex-flow: column; align-items: center;}
.mem-card-info > li > ul > li > i,
.mem-card-info > li > ul > li > div {margin-bottom: .4rem;}
.mem-card-info > li > ul > li .ic-people {width: 2rem; height: 2rem; background-image: url(/img/ico/ic-people-e75b13bdd95e002f3231e268779cdc3c.svg);}
.mem-card-info > li > ul > li .ic-price {width: 3rem; height: 2rem; background-image: url(/img/ico/ic-price-8769f4b24a1111e1333037c1e0f2772d.svg);}
.mem-card-info > li > ul > li > div {display: flex; align-items: center; flex-flow: column; row-gap: 1rem;}
.mem-card-info > li > ul > li > div > ul {display: flex; align-items: center; justify-content: center; column-gap: .6rem;}
.mem-card-info > li > ul > li > div > ul > li {display: flex; align-items: center;}
.mem-card-info > li > ul > li > h6 {font-size: 1.8rem; line-height: 2.6rem; color: var(--hoam-text-black);}
.mem-card-info > li > ul > li > p {font-size: 1.4rem; line-height: 2.2rem; color: var(--hoam-text-gray);}
.mem-card-info > li > p {text-align: center; font-size: 1.4rem; line-height: 2.2rem;}

@media screen and (max-width: 767px) {
    .mem-card-info {grid-template-columns: repeat(1, 1fr);}
    .mem-card-info > li {width: 100%;}
    .mem-card-info > li > h4 {font-size: 1.4rem; line-height: 2.2rem;}
    .mem-card-info > li > ul > li {display: flex; flex-flow: column; align-items: center;}
    .mem-card-info > li > ul > li > h6 {font-size: 1.4rem; line-height: 2.2rem;}
    .mem-card-info > li > ul > li > p {font-size: 1.3rem; line-height: 1.9rem;}
    .mem-card-info > li > p {font-size: 1.3rem; line-height: 1.9rem;}
}

.mem-update {padding: 3rem; background-image: url(/img/membership/mem-update-adc70700c9a2444ff857751a4715d831.png); background-size: cover; background-position: center; display: flex; flex-flow: column; row-gap: 19.2rem; align-items: center; justify-content: center;}
.mem-update .title > h4 {color: #fff;}
.mem-update > p {font-size: 1.4rem; color: #fff;}

.inquiry > p {font-size: 1.6rem; line-height: 2.4rem; margin-bottom: 1rem;}

@media screen and (max-width: 767px) {
    .mem-update {row-gap: 20rem;}
    .mem-update .title > h4 {color: #fff;}
    .mem-update > p {font-size: 1.3rem;}

    .inquiry > p {font-size: 1.4rem; line-height: 2.2rem;}
}

.mem-list {display: flex; grid-gap: 4rem 2rem; flex-wrap: wrap; justify-content: center;}
.mem-list > li {width: calc((100% - (2rem * 2)) / 3); height: 50rem; border: 1px solid var(--hoam-line200); background-repeat: no-repeat; background-size: cover; background-position: center bottom;}
.mem-list > li > a {display: block; height: 100%; position: relative; cursor: default;}
.mem-list > li > a .info {display: flex; justify-content: space-between; column-gap: 2rem; padding: 3rem 2rem; min-height: 12rem; background-color: var(--hoam-white);}
.mem-list > li > a .info > div {display: flex; flex-flow: column; row-gap: .6rem;}
.mem-list > li > a .info > div > h4 {font-size: 2rem; line-height: 2.8rem;}
.mem-list > li > a .info > div .desc > p {font-size: 1.6rem; line-height: 2.8rem; color: var(--hoam-text-gray);}
.mem-list > li > a .more {display: flex; flex-flow: column; row-gap: 2rem; width: 100%; height: 100%; padding: 3rem 2rem; position: absolute; top: 0; overflow: hidden;}
.mem-list > li > a .more * {position: relative; z-index: 1;}
.mem-list > li > a .more::before {content: ''; width: 100%; height: 100%; background-color: var(--hoam-white); position: absolute; left: 0; z-index: 0; opacity: 0;}
.mem-list > li > a .more .info {padding: 0; min-height: auto;}
.mem-list > li > a .more > p {font-size: 1.6rem; line-height: 2.8rem; color: var(--hoam-text-gray); opacity: 0;}
.mem-list > li > a .more > p > i {font-style: italic!important; display: initial;}
.mem-list > li > a:focus-visible .more::before,
.mem-list > li > a:hover .more::before {opacity: .96;}
.mem-list > li > a:focus-visible .more > p,
.mem-list > li > a:hover .more > p {opacity: 1;}

.mem-list.lg > li > a .info {min-height: 17rem;}
.mem-list.grid-4 > li {width: calc((100% - (2rem * 3)) / 4); height: 40rem;}

@media screen and (max-width: 767px) {
    .mem-list > li {width: 100%; height: 39.5rem;}
    .mem-list > li > a .info {min-height: 10rem;}
    .mem-list > li > a .info > div > h4 {font-size: 1.6rem; line-height: 2.4rem;}
    .mem-list > li > a .info > div .desc > p {font-size: 1.4rem; line-height: 2.6rem;}
    .mem-list > li > a .more {display: none;}

    .mem-list.lg > li > a .info {min-height: 15rem;}
    .mem-list.grid-4 > li {width: 100%;}
}

.mem-guide > li {display: flex; align-items: center; flex-flow: column; justify-content: center; row-gap: 2rem;}
.mem-guide > li + li {margin-top: 3rem; padding-top: 3rem; border-top: 1px solid var(--hoam-line100);}
.mem-guide > li > p {font-size: 1.4rem; line-height: 2.2rem;}
.mem-guide > li > button {width: 100%;}

@media screen and (max-width: 767px) {
    .mem-guide > li > p {font-size: 1.3rem; line-height: 1.9rem;}
}

/* 가입과 안내 */
.mem-btn {margin: 2rem auto 0;}

.mem-benefit {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 3rem 2rem;}
.mem-benefit > li {display: flex; flex-flow: column; row-gap: 1rem;}
.mem-benefit > li > p {font-size: 1.6rem; line-height: 2.4rem;}
.mem-benefit > li > img {width: 100%;}
.mem-benefit > li > .desc > p {font-size: 1.4rem; line-height: 2.4rem; color: var(--hoam-text-gray);}

@media screen and (max-width: 767px) {
    .mem-benefit {grid-template-columns: repeat(1, 1fr);}
    .mem-benefit > li > p {font-size: 1.3rem; line-height: 1.9rem;}
    .mem-benefit > li > .desc > p {font-size: 1.3rem; line-height: 1.9rem; color: var(--hoam-text-gray);}
}

/* notice 공지사항 ----------------------- */
.download-wrap {display: flex; flex-flow: column; row-gap: 1rem;}
.download-wrap button {display: inline-block; white-space: initial; height: fit-content; padding: .4rem 1.5rem; text-align: left;}
.download-wrap button svg {margin-left: .6rem;}

/* company 법인회원·전시협찬 ----------------------- */
.sub-wrap.company .sub-cont {margin: 0 auto 0;}

.company-wrap {display: flex; flex-flow: column; row-gap: 1rem;}
.company-wrap > img {width: 100%;}
.company-wrap > p {font-size: 1.6rem; line-height: 2.8rem;}
.company-wrap > div {margin-top: 2rem; display: flex; flex-flow: column; row-gap: 1rem;}
.company-wrap > div > h6 {font-size: 1.8rem; line-height: 2.6rem;}

@media screen and (max-width: 767px) {
    .company-wrap > p {font-size: 1.4rem; line-height: 2.6rem;}
    .company-wrap > div > h6 {font-size: 1.6rem; line-height: 2.4rem;}
}

/* museum 미술관 소개 ----------------------- */
.sub-wrap.museum .sub-cont {margin: /*-8.4rem auto 0;*/ 0 auto;}
.sub-wrap.museum .sub-menu {height: 8.4rem; top: calc(100vh - 8.4rem - 2rem);}

.museum-wrap {display: flex; flex-flow: column; align-items: center; row-gap: 1rem;}
.museum-wrap > video,
.museum-wrap > img {width: 100%;}
.museum-wrap > p {font-size: 1.6rem; line-height: 2.8rem; word-break: keep-all;}
.museum-wrap > p + button {margin-top: 1rem;}

.museum-people {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 4rem 2rem;}
.museum-people > li {display: flex; flex-flow: column; row-gap: 2rem; cursor: pointer;}
.museum-people > li .img {position: relative; overflow: hidden; line-height: 1;}
.museum-people > li .img img {width: 100%; cursor: pointer; line-height: 1;}
.museum-people > li .img::before {content: '자세히 보기'; width: 100%; height: 2.2rem; font-size: 1.2rem; line-height: 1.2rem; display: flex; align-items: center; justify-content: center; background-color: var(--leeum-white); position: absolute; bottom: -2.2rem; left: 0; transition: bottom .4s;}
.museum-people > li:hover .img::before {transition: bottom .4s ease-in-out; bottom: 0;}
.museum-people > li .info {display: flex; align-items: center; justify-content: space-between;}
.museum-people > li .info > h5 {font-size: 1.6rem; line-height: 2.6rem;}
.museum-people > li .info > p {font-size: 1.6rem; line-height: 2.6rem;}

@media screen and (max-width: 767px) {
    .sub-wrap.museum .sub-cont {margin: 0 auto;}

    .museum-wrap > p {font-size: 1.4rem; line-height: 2.6rem;}
    .museum-wrap > p + button {margin-top: 2rem;}

    .museum-people {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 4rem 1.6rem;}
    .museum-people > li {display: flex; flex-flow: column; row-gap: 1.6rem;}
    .museum-people > li .img::before {content: none;}
    .museum-people > li .info {flex-flow: column; align-items: start;}
    .museum-people > li .info > h5 {font-size: 1.4rem; line-height: 2.2rem;}
    .museum-people > li .info > p {font-size: 1.4rem; line-height: 2.2rem;}
}

.museum-info {display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 3rem 2rem;}
.museum-info > li {max-width: 19rem; margin: 0 auto; display: flex; flex-flow: column; row-gap: 4rem; align-items: center;}
.museum-info > li .motion {position: relative;}
.museum-info > li .motion .lottie-player {width: 100%;}
.museum-info > li .motion > p {text-align: center; font-size: 1.6rem; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.museum-info > li > p {text-align: center; font-size: 1.3rem; line-height: 1.9rem; word-break: keep-all;}

@media screen and (max-width: 767px) {
    .museum-info {grid-template-columns: repeat(1, 1fr);}
    .museum-info > li {width: 100%; row-gap: 3rem;}
    .museum-info > li .motion > p {font-size: 1.4rem;}
    .museum-info > li > p {font-size: 1.3rem; line-height: 1.8rem;}
}

/* error 오류 페이지 ----------------------- */
html.guide .container {display: flex; align-items: center; justify-content: center;}
.guide-wrap {width: 100%; max-width: 108rem; display: flex; flex-flow: column; align-items: center; justify-content: center;}
.guide-wrap .cont-box + .cont-box {margin-top: 0; border-top: 0;}
.guide-wrap .title {margin-bottom: 5rem;}
.guide-wrap p {font-size: 1.8rem; line-height: 2.6rem; text-align: center; word-break: keep-all; text-transform: uppercase;}
.guide-wrap .list-desc-box {width: 61rem;}
.guide-wrap .btn-wrap {width: 36rem; margin-top: 3rem;}

@media screen and (max-width: 767px) {
    .guide-wrap {max-width: initial;}
    .guide-wrap p {font-size: 1.6rem; line-height: 2.4rem;}
    .guide-wrap .list-desc-box {width: 100%; max-width: 61rem;}
    .guide-wrap .btn-wrap {width: 100%; max-width: 36rem;}
}

/* mypage 마이페이지  ----------------------- */
/* 기본정보 */
.mypage-wrap {display: flex; justify-content: space-between;}
.mypage-wrap .menu {display: none;}

.mypage-wrap .mypage-menu {width: 22rem; display: flex; flex-flow: column; row-gap: .8rem; position: sticky; top: 21.5rem;}
.mypage-wrap .mypage-menu > li > a {font-size: 1.6rem; line-height: 2.8rem; color: var(--hoam-text-gray);}
/*.mypage-wrap .mypage-menu > li.active > a {color: var(--hoam-text-black);}*/

.mypage-wrap .mypage-cont {width: calc(100% - 22rem - 8rem); position: relative; display: flex; flex-flow: column;}

.mypage-wrap .mypage-box {width: 40rem; margin-left: -30rem; padding: 3rem 2rem; border: 1px solid var(--hoam-line200); align-self: center;}
.mypage-wrap .mypage-box .cont-box + .cont-box {margin-top: 3rem; padding-top: 3rem;}
.mypage-wrap .mypage-box .info-input button {height: 3.6rem;}
.mypage-wrap .mypage-box .info-input .sns-login {display: flex; column-gap: 3rem; justify-content: center;}
.mypage-wrap .mypage-box .info-input .sns-login > li > button {display: flex; flex-flow: column; row-gap: 1rem; align-items: center; width: fit-content; background-color: transparent; border: 0; height: initial;}
.mypage-wrap .mypage-box .info-input .sns-login > li > button > p {font-size: 1.4rem; color: var(--hoam-text-gray);}
.mypage-wrap .withdrawal {width: 40rem; margin-top: 1rem; margin-left: -30rem; align-self: center;}
.mypage-wrap .withdrawal > a {font-size: 1.4rem; color: var(--hoam-text-gray);}

.certify-wrap {display: flex; flex-flow: column; row-gap: 3rem;}
.certify-wrap > p {text-align: center; font-size: 1.6rem; line-height: 2.6rem;}
.certify-wrap > button {width: 100%; height: 3.6rem; border-radius: .4rem; background-color: var(--hoam-blue); border-color: var(--hoam-blue); color: var(--hoam-text-btn);}

@media screen and (max-width: 767px) {
    .mypage-wrap {position: relative;}

    .mypage-wrap .menu {display: flex; font-size: 1.3rem; background-color: var(--hoam-green); border-color: var(--hoam-green); color: var(--hoam-text-btn); position: fixed; bottom: 2.1rem; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); z-index: 99;}
    .mypage-wrap .menu > svg path {stroke: var(--hoam-text-btn);}

    .mypage-wrap .mypage-menu {width: fit-content; padding: 1.2rem 1.5rem; display: flex; flex-flow: column; align-items: center; justify-content: center; row-gap: .6rem; background-color: var(--hoam-green); position: fixed; top: auto; bottom: calc(2.1rem + 2.8rem + 1rem); left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); z-index: 99;}
    .mypage-wrap .mypage-menu > li {text-align: center;}
    .mypage-wrap .mypage-menu > li > a {color: var(--hoam-white); font-size: 1.2rem; line-height: 2.4rem;}

    .mypage-wrap .mypage-cont {width: 100%; display: block;}

    .mypage-wrap .mypage-box {width: 100%; max-width: 40rem; margin: 0 auto; padding: 0; border: initial;}
    .mypage-wrap .mypage-box .info-input button {height: 3.2rem;}
    .mypage-wrap .mypage-box .info-input .sns-login > li > a > i {width: 4rem; height: 4rem;}
    .mypage-wrap .mypage-box .info-input .sns-login > li > a > p {font-size: 1.3rem;}
    .mypage-wrap .withdrawal {width: 100%; max-width: 40rem; margin: 1rem auto 0;}
    .mypage-wrap .withdrawal > a {font-size: 1.3rem;}

    .certify-wrap > p {font-size: 1.4rem; line-height: 2.2rem;}
    .certify-wrap > button {height: 3.2rem;}
}

/* 기본정보 > 회원탈퇴 */
.withdrawal-wrap {display: flex; flex-flow: column; row-gap: 1rem;}
.withdrawal-wrap > h6 {font-size: 1.6rem; line-height: 2.8rem;}
.withdrawal-wrap > p {font-size: 1.4rem; line-height: 2.2rem;}
.withdrawal-wrap > div {margin-top: 1rem; display: flex; flex-flow: column; row-gap: .5rem;}
.withdrawal-wrap > div > h6 {font-size: 1.2rem;}
.withdrawal-wrap > div > p {padding: .6rem 1rem; font-size: 1.4rem; line-height: 2.2rem; background-color: var(--hoam-gray); word-break: keep-all;}

@media screen and (max-width: 767px) {
    .withdrawal-wrap > h6 {font-size: 1.4rem; line-height: 2.6rem;}
    .withdrawal-wrap > p {font-size: 1.3rem; line-height: 1.9rem;}
    .withdrawal-wrap > div > h6 {font-size: 1.3rem;}
    .withdrawal-wrap > div > p {padding: .5rem .7rem; font-size: 1.4rem; line-height: 2.6rem;}
}

/* 프로그램 신청 확인 */
.list-desc + .program-list {margin-top: 3rem;}
.program-list {display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 4rem 2rem;}
.program-list > li {min-height: 42rem; border: 1px solid var(--hoam-line200); padding: 3rem 2rem; display: flex; flex-flow: column;}
.program-list > li .info {display: flex; flex-flow: column; row-gap: 1rem;}
.program-list > li .info > h4 {font-size: 2rem; line-height: 2.8rem;}
.program-list > li .info > p {font-size: 1.6rem; line-height: 2.8rem;}
.program-list > li .desc {margin-top: 3rem; padding-top: 3rem; border-top: 1px solid var(--hoam-line100); display: flex; flex-flow: column; row-gap: 1rem; flex: 1;}
.program-list > li .desc > li {display: flex; column-gap: .8rem; align-items: start;}
.program-list > li .desc > li > h6 {font-size: 1.4rem; line-height: 2.2rem; color: var(--hoam-text-gray); min-width: 5.2rem;}
.program-list > li .desc > li > p {font-size: 1.4rem; line-height: 2.2rem; width: calc(100% - 5.2rem - 1rem); display: flex; align-items: center; column-gap: 1rem; word-break: break-all;}
.program-list > li .btn-wrap button {padding: 1;}

@media screen and (max-width: 767px) {
    .program-list {grid-template-columns: repeat(1, 1fr);}
    .program-list > li {min-height: 35rem;}
    .program-list > li .info > h4 {font-size: 1.6rem; line-height: 2.4rem;}
    .program-list > li .info > p {font-size: 1.4rem; line-height: 2.6rem;}
    .program-list > li .desc {margin-top: 2rem; padding-top: 2rem;}
    .program-list > li .desc > li > h6 {font-size: 1.3rem; line-height: 1.9rem;}
    .program-list > li .desc > li > p {font-size: 1.3rem; line-height: 1.9rem;}
}

.seat-map {width: 100%; padding: 1rem; border: 1px solid var(--hoam-line100); border-radius: .4rem;}

/* 멤버십 신청 내역 */
.membership-list {margin-top: 3rem; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 4rem 2rem;}
.membership-list > li {min-height: 42rem; border: 1px solid var(--hoam-line200); display: flex; flex-flow: column;}
.membership-list > li .info {min-height: 10.6rem; padding: 3rem 2rem; display: flex; flex-flow: column; row-gap: 1rem;}
.membership-list > li .info > h4 {font-size: 2rem; line-height: 2.8rem;}
.membership-list > li .info > p {font-size: 1.6rem; line-height: 2.8rem;}
.membership-list > li .desc {border-top: 1px solid var(--hoam-line200); background-color: var(--hoam-gray); padding: 3rem 2rem; display: flex; flex-flow: column; row-gap: 1rem; flex: 1;}
.membership-list > li .desc > li {display: flex; column-gap: .8rem; align-items: start;}
.membership-list > li .desc > li > h6 {font-size: 1.4rem; line-height: 2.2rem; color: var(--hoam-text-gray); width: 5.2rem;}
.membership-list > li .desc > li > p {font-size: 1.4rem; line-height: 2.2rem; width: calc(100% - 5.2rem - 1rem); display: flex; align-items: center; column-gap: 1rem; word-break: break-all;}
.membership-list > li .btn-wrap {padding: 0 2rem 3rem; background-color: var(--hoam-gray); margin: 0;}
.membership-list > li .btn-wrap button {padding: 0;}
.membership-list > li .btn-wrap p {font-size: 1.3rem; line-height: 1.9rem; width: 100%; position: relative; padding-left: 1rem; position: relative;}
.membership-list > li .btn-wrap p::before {content: '*'; position: absolute; left: 0;}

@media screen and (max-width: 767px) {
    .membership-list {grid-template-columns: repeat(1, 1fr);}
    .membership-list > li {min-height: 35rem;}
    .membership-list > li .info {min-height: 8rem; padding-bottom: 2rem;}
    .membership-list > li .info > h4 {font-size: 1.6rem; line-height: 2.4rem;}
    .membership-list > li .info > p {font-size: 1.4rem; line-height: 2.6rem;}
    .membership-list > li .desc {padding-top: 2rem;}
    .membership-list > li .desc > li > h6 {font-size: 1.3rem; line-height: 1.9rem;}
    .membership-list > li .desc > li > p {font-size: 1.3rem; line-height: 1.9rem;}
}

/* 멤버십 인증 및 기프트 사용 등록 */
.membership-btn {display: flex; flex-flow: column; row-gap: 1rem;}
.membership-btn button {width: 100%; min-height: 3.6rem; height: auto; padding: .8rem 0; color: var(--hoam-text-btn); background-color: var(--hoam-green); border-color: var(--hoam-green); white-space: initial; word-break: keep-all;}

@media screen and (max-width: 767px) {
    .membership-btn button {min-height: 3.2rem; column-gap: .4rem;}
}

/* 인턴 이수증 발급 */
.internship-wrap {display: flex; flex-flow: column; row-gap: 3rem;}
.internship-wrap > p {font-size: 1.6rem; line-height: 2.8rem;}
.internship-wrap .stamp-wrap {display: flex; align-items: center; justify-content: space-between;}

/* 멤버십 QR */
.membership-qr {width: 100%; max-width: 29.5rem; margin: 0 auto; border: 1px solid var(--hoam-line200);}
.membership-qr .info {padding: 3rem 2rem; display: flex; flex-flow: column; row-gap: 1rem; position: relative;}
.membership-qr .info > h6 {font-size: 2rem; line-height: 2.8rem;}
.membership-qr .info > p {font-size: 1.6rem; line-height: 2.8rem;}
.membership-qr .qr {border-top: 1px solid var(--hoam-line200); background-color: var(--hoam-gray); display: flex; align-items: center; justify-content: center; padding: 5rem 0;}
.membership-qr .qr > img {width: 16rem; height: 16rem;}

#lottie-qr {width: 4.5rem; height: 4.5rem; position: absolute; top: 3rem; right: 2rem; display: block;}

/* search 통합검색 ----------------------- */
.page-title .search {display: flex; align-items: center;}
.page-title .search > div {position: relative; display: flex; align-items: center;}
.page-title .search > div > button {position: absolute; right: 1.2rem;}
.page-title .search input {width: 31rem; border-color: var(--hoam-line200);}
.page-title .search > button {height: 3.6rem; border: 1px solid var(--hoam-line200); border-left: 0; background-color: transparent; color: var(--hoam-text-gray);}

.filter-wrap + .search-result {margin-top: 5rem;}
.search-result-cont + .search-result-cont {margin-top: 5rem; padding-top: 5rem; border-top: 1px solid var(--hoam-line100);}
.search-result-cont > p {font-size: 1.8rem; line-height: 2.6rem; text-align: center; margin-bottom: 3rem;}
.search-result-cont .empty-cont {margin-top: 0;}
.search-result-cont .empty-cont > p {text-align: center;}
.search-result-cont .title {display: flex; align-items: center; justify-content: center; flex-flow: column; row-gap: 1rem; margin-bottom: 3rem;}
.search-result-cont .title > h4 {font-size: 1.8rem; line-height: 2.6rem;}

@media screen and (max-width: 767px) {
    .page-title .search {width: 100%;}
    .page-title .search > div {flex: 1;}
    .page-title .search input {width: 100%;}
    .page-title .search > button {height: 3.2rem;}

    .search-result-cont > p {font-size: 1.6rem; line-height: 2.4rem;}
}

/* heewon */
.heewon-wrap .svg-ic-close {position: fixed; top: 3rem; right: 3rem; background-color: #00662E!important;}
.heewon-wrap .svg-ic-close circle {fill: #00662E!important;}
.heewon-wrap .svg-ic-close rect {fill: #fff!important;}
.heewon-wrap * {color: #000;}

.heewon-map {height: 70vh; overflow-y: auto; display: flex; justify-content: center;}
.heewon-map > svg {height: 100%;}

.heewon-info-wrap .heewon-info {width: 100%; padding: 2rem 3.2rem 3.2rem; position: fixed; bottom: 0; left: 0; display: flex; flex-flow: column; row-gap: 2.4rem; align-items: center; background-color: #fff; border-top: .2rem solid #221E1F;}
.heewon-info-wrap .heewon-info > h1 {font-size: 3rem; line-height: 1.7;}
.heewon-info-wrap .heewon-info > div {display: flex; flex-flow: wrap; grid-gap: 2.4rem 3.2rem;}
.heewon-info-wrap .heewon-info > div > button {width: 10%; display: flex; column-gap: .8rem; justify-content: initial; white-space: initial; height: fit-content; padding: 0; align-items: initial; text-transform: initial; background-color: transparent; border-color: transparent;}
.heewon-info-wrap .heewon-info > div > button > p {width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #221E1F;}
.heewon-info-wrap .heewon-info > div > button > div {display: flex; flex-flow: column;}
.heewon-info-wrap .heewon-info > div > button > div > p {font-size: 1.5rem; line-height: 1.3; color: #221E1F; text-align: left;}
.heewon-info-wrap .heewon-info > div > button:hover > p {background-color: #00662E; color: #fff;}
.heewon-info-wrap .heewon-info > div > button:hover > div > p,
.heewon-info-wrap .heewon-info > div > button:hover > div > p {color: #00662E;}

.heewon-pop {position: fixed; top: 100%; left: 3rem; opacity: 0; visibility: hidden;}
.heewon-pop.active {visibility: visible; opacity: 1; top: 3rem;}
.heewon-pop .svg-ic-close {width: 3.2rem; height: 3.2rem; position: absolute; top: -1.2rem; right: -1.2rem;}
/*.heewon-pop .heewon-pop-wrap {width: 40%; min-width: 30rem; max-width: 35rem; padding: 2rem; border-radius: 1.2rem; box-shadow: rgba(0, 0, 0, 0.2) 0 1.8rem 5rem -1rem; backdrop-filter: saturate(200%) blur(2rem); -webkit-backdrop-filter: saturate(200%) blur(2rem); background-color: rgba(255,255,255,0.7);}*/
.heewon-pop .heewon-pop-wrap {width: 35rem; min-width: 35rem; max-width: 35rem; padding: 2rem; border-radius: 1.2rem; box-shadow: rgba(0, 0, 0, 0.2) 0 1.8rem 5rem -1rem; backdrop-filter: saturate(200%) blur(2rem); -webkit-backdrop-filter: saturate(200%) blur(2rem); background-color: rgba(255,255,255,0.7);}
.heewon-pop .heewon-pop-tit {margin-bottom: 2rem;}
.heewon-pop .heewon-pop-tit > h2 {font-size: 2.2rem; line-height: 4rem; color: #000000;}
/*.heewon-pop .heewon-pop-cont {display: flex; flex-flow: column; row-gap: 2rem;}*/
.heewon-pop .heewon-pop-cont {display: flex; flex-flow: column; row-gap: 2rem; width: 30rem; margin: 0 auto;}
.heewon-pop .heewon-pop-cont .sub-img {height: 8rem; position: absolute; top: 3rem; right: 4rem; z-index: 2;}
.heewon-pop .heewon-pop-cont .main-ing {width: 100%; min-height: 100%}
.heewon-pop .heewon-pop-cont > p {font-size: 1.6rem; line-height: 2.8rem; overflow-y: auto; max-height: 20rem; color: #000000;}
.heewon-pop .heewon-pop-cont > p::-webkit-scrollbar {width: 0; height: 0; background-color: transparent;}
.heewon-pop .heewon-pop-cont > p::-webkit-scrollbar-thumb {background-color: transparent;}
.heewon-pop .heewon-pop-cont > p::-webkit-scrollbar-track {background-color: transparent;}


@media screen and (max-width: 767px) {
    .heewon-wrap .svg-ic-close {top: 0; right: 0; width: 3.8rem; height: 3.8rem;}

    .heewon-map {height: auto; overflow-y: initial;}
    .heewon-map > svg {height: auto; width: 100%;}

    .heewon-info-wrap > div:not(.heewon-info) {display: none;}
    .heewon-info-wrap .heewon-info {padding: 2rem; margin-top: 2rem; position: relative; bottom: auto; left: auto; row-gap: 2rem;}
    .heewon-info-wrap .heewon-info > h1 {font-size: 2.4rem; line-height: 1.7;}
    .heewon-info-wrap .heewon-info > div {grid-gap: 2rem;}
    .heewon-info-wrap .heewon-info > div > button {width: calc((100% - 2rem) / 2);}
    .heewon-info-wrap .heewon-info > div > button > p {font-size: 1.3rem;}
    .heewon-info-wrap .heewon-info > div > button > div > h2 {font-size: 1.3rem;}
    .heewon-info-wrap .heewon-info > div > button > div > p {font-size: 1.3rem;}

    .heewon-pop {width: 100vw; height: 100vh; top: 0; left: 0; background-color: rgba(0,15,159,.85); display: flex; align-items: center; justify-content: center; z-index: 99999; backdrop-filter: saturate(200%) blur(2rem); -webkit-backdrop-filter: saturate(200%) blur(2rem);}
    .heewon-pop.active {visibility: visible; opacity: 1; top: 0;}
    /*.heewon-pop .heewon-pop-wrap {width: 90%; min-width: initial; max-width: initial; padding: 1.6rem;}*/
    .heewon-pop .heewon-pop-wrap {width: 90vw; min-width: 90vw; max-width: 90vw; padding: 1.6rem; position: relative;}
    .heewon-pop .heewon-pop-cont {display: flex; flex-flow: column; row-gap: 2rem; width: 80vw; margin: 0 auto;}
    .heewon-pop .heewon-pop-tit > h2 {font-size: 2rem; line-height: 3.8rem;}
    .heewon-pop .heewon-pop-cont > p {font-size: 1.4rem; line-height: 2.6rem;}
}


/* 목록 돌아가기 위치 이슈 해결 */
.contents {min-height: inherit}
.contents .detail-wrap {min-height: inherit}

.a11y-hidden {position: relative; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: polygon(0 0, 0 0, 0 0);}
caption {position:absolute;top:0;left:-9999px;height:0;line-height:0;font-size:1px;text-indent:-9999em;overflow:hidden;}