@charset "utf-8";

.sub-page .site-header {
    position: absolute;
}

html.is-sitemap-open {
    overflow: hidden;
}

.sub-visual {
    position: relative;
    display: grid;
    height: 350px;
    place-items: center;
    overflow: hidden;
    isolation: isolate;
    background: #191919;
    color: #fff;
}

.sub-visual::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url("/images/sub/visual_bg.jpg") center / cover no-repeat;
    content: "";
}

.sub-visual__title {
    margin-top: 12px;
    font-size: 5rem;
    font-weight: 800;
    line-height: 1;
}

.sub-breadcrumb {
    width: min(1100px, calc(100% - 64px));
    height: 70px;
    margin: 0 auto;
}

.sub-breadcrumb ol {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sub-breadcrumb > ol > li {
    width: 263px;
    border-left: 1px solid #c8c8c8;
}

.sub-breadcrumb__home a,
.sub-breadcrumb__trigger {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 26px;
    padding: 0 20px;
}

.sub-breadcrumb__trigger::after {
    width: 10px;
    height: 10px;
    margin-left: auto;
    border-top: 1px solid #666;
    border-right: 1px solid #666;
    transform: rotate(45deg);
    content: "";
}

.sub-breadcrumb .sub-breadcrumb__home {
    width: 68px;
    border: 0;
}

.sub-breadcrumb__item {
    position: relative;
    z-index: 20;
}

.sub-breadcrumb__trigger {
    width: 100%;
    text-align: left;
    font-size: 1.8rem;
    line-height: 26px;
    transition: color 0.3s ease;
}

.sub-breadcrumb__trigger::before {
    position: absolute;
    inset: -14px 0;
    content: "";
}

.sub-breadcrumb__trigger::after {
    flex: 0 0 10px;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease;
}

.sub-breadcrumb__label {
    display: block;
}

.sub-breadcrumb__trigger:hover,
.sub-breadcrumb__item.is-open .sub-breadcrumb__trigger {
    color: #9b7649;
}

.sub-breadcrumb__item.is-open .sub-breadcrumb__trigger::after {
    border-color: #9b7649;
    transform: rotate(135deg);
}

.sub-breadcrumb__panel {
    position: absolute;
    top: calc(100% + 20px);
    right: 0;
    left: -1px;
    padding: 10px;
    border: 1px solid #e9e4dd;
    border-top: 2px solid #a77e4d;
    background: #fff;
    box-shadow: 0 18px 42px rgba(30, 25, 17, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    clip-path: inset(0 0 100% 0);
    transition:
        opacity 0.25s ease,
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        clip-path 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0s linear 0.45s;
}

.sub-breadcrumb__item.is-open .sub-breadcrumb__panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    clip-path: inset(-50px -60px -60px -60px);
    transition-delay: 0s;
}

.sub-breadcrumb__options li {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.35s ease;
}

.is-open .sub-breadcrumb__options li {
    opacity: 1;
    transform: translateY(0);
    transition-delay: calc(60ms + var(--option-index) * 35ms);
}

.sub-breadcrumb__options button {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    padding: 11px 14px;
    color: #666;
    text-align: left;
    font-size: 1.5rem;
    transition: background 0.25s ease, color 0.25s ease, padding 0.3s ease;
}

.sub-breadcrumb__options button:hover,
.sub-breadcrumb__options button:focus-visible,
.sub-breadcrumb__options button.is-selected {
    padding-left: 19px;
    background: #f7f4ef;
    color: #977044;
}

.sub-breadcrumb__options button.is-selected::after {
    width: 5px;
    height: 5px;
    margin-left: auto;
    border-radius: 50%;
    background: #a77e4d;
    content: "";
}

.sub-breadcrumb button:focus-visible {
    outline: 2px solid #a77e4d;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .sub-breadcrumb *,
    .sub-breadcrumb *::after {
        transition: none !important;
    }
}

.summary-content {
    width: min(1100px, calc(100% - 64px));
    margin: 0 auto;
    padding: 50px 0 129px;
}

.sub-title img {
    margin: 0 auto;
}

.image-page-title {
    font-size: 4.2rem;
    font-weight: 500;
    line-height: 45px;
    letter-spacing: -0.06em;
    text-align: center;
}

.sub-title::after {
    display: block;
    width: 1px;
    height: 50px;
    margin: 20px auto 48px;
    background: #999;
    content: "";
}

.summary-view {
    position: relative;
    margin: 0;
}

.summary-view > img {
    width: 100%;
    height: auto;
}

.image-page-content {
    display: block;
}

.image-page-content > img {
    display: block;
    width: 100%;
    height: auto;
}

.image-tabs__list {
    display: flex;
    max-width: 620px;
    margin: 0 auto 36px;
    border: 1px solid #d8d8d8;
}

.image-tabs__list button {
    flex: 1;
    min-width: 0;
    padding: 17px 12px;
    background: #fff;
    color: #555;
    font-size: 1.8rem;
    cursor: pointer;
}

.image-tabs__list button + button {
    border-left: 1px solid #d8d8d8;
}

.image-tabs__list button[aria-selected="true"] {
    background: #073770;
    color: #fff;
    font-weight: 700;
}

.image-tabs__list button:focus-visible {
    outline: 2px solid #a77e4d;
    outline-offset: -4px;
}

.image-tabs--secondary {
    margin-top: 36px;
}

.image-tabs--secondary .image-tabs__list {
    max-width: none;
}

.image-tabs--secondary .image-tabs__list button {
    padding-inline: 8px;
    font-size: 1.6rem;
}

.image-tabs__panel[hidden] {
    display: none;
}

.directions-content__layout {
    display: grid;
    grid-template-columns: 600px 440px;
    align-items: start;
    gap: 60px;
    box-sizing: border-box;
    max-width: 1200px;
    margin: 0 auto;
    padding: 77px 40px 83px 60px;
    background: #f8f7f7;
}

@media (min-width: 768px) {
    .directions-content {
        width: min(1200px, calc(100% - 64px));
    }
}

.directions-content__map {
    margin: 0;
}

.directions-content__map img {
    display: block;
    width: 100%;
    height: auto;
}

.directions-content__info {
    min-width: 0;
}

.directions-content__logo {
    display: block;
    width: min(341px, 100%);
    height: auto;
}

.directions-content__tel {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 22px;
    color: #111;
}

.directions-content__tel img {
    width: 26px;
    height: 31px;
}

.directions-content__tel span {
    font-size: clamp(3.8rem, 3vw, 5.2rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
}

.directions-content__place {
    margin-top: 36px;
}

.directions-content__place + .directions-content__place {
    margin-top: 24px;
}

.directions-content__place p {
    color: #555;
    font-size: 1.8rem;
    letter-spacing: -0.05em;
}

.directions-content__place strong {
    color: #222;
    font-weight: 700;
}

.directions-content__links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 200px));
    justify-content: space-between;
    margin-top: 12px;
}

.directions-content__links a {
    display: block;
}

.directions-content__links img {
    display: block;
    width: 100%;
    height: auto;
}

@media (min-width: 768px) {
    .directions-content__info {
        position: relative;
        height: 340px;
    }

    .directions-content__logo {
        position: absolute;
        top: -4px;
        left: 50%;
        translate: -50% 0;
    }

    .directions-content__tel {
        position: absolute;
        top: 82px;
        left: 50%;
        width: max-content;
        margin: 0;
        translate: -50% 0;
    }

    .directions-content__place {
        position: absolute;
        left: 0;
        width: 100%;
        margin: 0;
    }

    .directions-content__place:first-of-type {
        top: 168px;
    }

    .directions-content__place + .directions-content__place {
        top: 266px;
        margin: 0;
    }

    .directions-content__place p {
        line-height: 1.2;
    }

    .directions-content__links {
        margin-top: 7px;
    }
}

@media (min-width: 768px) and (max-width: 1200px) {
    .directions-content__layout {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.88fr);
        gap: clamp(30px, 5vw, 60px);
        padding-right: clamp(24px, 3vw, 40px);
        padding-left: clamp(24px, 5vw, 60px);
    }
}

.summary-view figcaption {
    position: absolute;
    right: 22px;
    bottom: 17px;
    left: 22px;
    color: #fff;
    font-size: 1.6rem;
    font-weight: 300;
    letter-spacing: -0.06em;
}

.summary-info {
    margin-top: 72px;
}

.summary-info__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 107px 56px;
    margin: 60px 0 0;
}

.summary-info dt {
    padding-bottom: 10px;
    border-bottom: 1px solid #c8c8c8;
    color: #555;
    font-size: 2.6rem;
    font-weight: 700;
    letter-spacing: -0.06em;
    line-height: 1.3;
}

.summary-info dd {
    min-height: 24px;
    margin: 15px 0 0;
    color: #777;
    font-size: 1.6rem;
    letter-spacing: -0.065em;
}

.summary-notice {
    margin-top: 88px;
}

.summary-notice img {
    width: 100%;
    height: auto;
}

/* 서브 콘텐츠: 처음 화면에 들어올 때 한 번만 재생합니다. */
[data-sub-reveal] {
    --sub-reveal-delay: 0ms;
}

[data-sub-reveal="up"],
[data-sub-reveal="title"] {
    opacity: 0;
    translate: 0 28px;
    transition:
        opacity 0.9s ease var(--sub-reveal-delay),
        translate 1.15s cubic-bezier(0.22, 1, 0.36, 1) var(--sub-reveal-delay);
}

[data-sub-reveal="up"].is-sub-visible,
[data-sub-reveal="title"].is-sub-visible {
    opacity: 1;
    translate: 0 0;
}

[data-sub-reveal="title"]::after {
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.35s;
}

[data-sub-reveal="title"].is-sub-visible::after {
    transform: scaleY(1);
}

[data-sub-reveal="hero"]::before {
    transform: scale(1.08);
    transition: transform 2.2s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-sub-reveal="hero"].is-sub-visible::before {
    transform: scale(1);
}

[data-sub-reveal="image"] {
    overflow: hidden;
    opacity: 0;
    clip-path: inset(7% 0 0 0);
    transition:
        opacity 0.95s ease var(--sub-reveal-delay),
        clip-path 1.5s cubic-bezier(0.22, 1, 0.36, 1) var(--sub-reveal-delay);
}

[data-sub-reveal="image"] > img {
    transform: scale(1.055);
    transition: transform 1.8s cubic-bezier(0.22, 1, 0.36, 1) var(--sub-reveal-delay);
}

[data-sub-reveal="image"].is-sub-visible {
    opacity: 1;
    clip-path: inset(0);
}

[data-sub-reveal="image"].is-sub-visible > img {
    transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
    [data-sub-reveal],
    [data-sub-reveal]::before,
    [data-sub-reveal]::after,
    [data-sub-reveal="image"] > img {
        opacity: 1;
        translate: none;
        transform: none;
        clip-path: none;
        transition: none;
    }
}

@media (min-width: 768px) and (max-width: 1750px) {
    .sub-page .site-footer {
        height: auto;
        min-height: 500px;
        padding: 72px max(64px, 8vw);
    }

    .sub-page .site-footer__left,
    .sub-page .site-footer__right {
        position: static;
    }

    .sub-page .site-footer__right {
        margin-top: 44px;
        width: auto;
    }

    .sub-page .site-footer__builder {
        margin-left: 0;
    }

    .sub-page .site-footer__tel {
        justify-content: flex-start;
        white-space: nowrap;
    }
}

@media (min-width: 1751px) {
    .sub-page .site-footer__right {
        left: auto;
        right: max(58px, calc(50% - 844px));
        width: 330px;
    }

    .sub-page .site-footer__builder {
        margin-left: auto;
    }

    .sub-page .site-footer__tel {
        justify-content: flex-end;
        width: 100%;
    }
}

@media (max-width: 767px) {
    .sub-visual {
        height: 300px;
    }

    .sub-visual__title {
        margin-top: 35px;
        font-size: 3.8rem;
    }

    .sub-breadcrumb,
    .summary-content {
        width: calc(100% - 40px);
    }

    .sub-breadcrumb {
        height: 60px;
    }

    .sub-breadcrumb > ol > li {
        flex: 1;
        width: auto;
    }

    .sub-breadcrumb .sub-breadcrumb__home {
        flex: 0 0 38px;
    }

    .sub-breadcrumb__home a,
    .sub-breadcrumb__trigger {
        padding: 0 12px;
    }

    .sub-breadcrumb__home a {
        padding-left: 0;
    }

    .summary-content {
        padding: 56px 0 70px;
    }

    .sub-title img {
        width: 134px;
        height: auto;
    }

    .image-page-title {
        font-size: 3.2rem;
        line-height: 36px;
    }

    .sub-title::after {
        height: 35px;
        margin: 28px auto 32px;
    }

    .directions-content__layout {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 32px 24px 40px;
    }

    .directions-content__info {
        display: contents;
    }

    .directions-content__logo {
        order: -1;
        justify-self: center;
        width: min(300px, 100%);
        margin-bottom: 31px;
    }

    .directions-content__map {
        order: 0;
    }

    .directions-content__tel {
        order: 1;
        justify-self: center;
        margin: 44px auto 0;
    }

    .directions-content__place {
        order: 2;
        margin-top: 42px;
    }

    .directions-content__place + .directions-content__place {
        margin-top: 24px;
    }

    .directions-content__place p {
        font-size: 1.5rem;
        line-height: 1.5;
    }

    .directions-content__links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .image-tabs--secondary .image-tabs__list {
        justify-content: flex-start;
        margin-right: calc((100vw - 100%) / -2);
        margin-left: calc((100vw - 100%) / -2);
        padding-inline: 20px;
        overflow-x: auto;
        border-right: 0;
        border-left: 0;
    }

    .image-tabs--secondary .image-tabs__list button {
        flex: 0 0 auto;
        padding: 14px 16px;
        font-size: 1.4rem;
        white-space: nowrap;
    }

    .summary-view figcaption {
        position: static;
        margin-top: 10px;
        color: #777;
        font-size: 1.2rem;
    }

    .summary-info {
        margin-top: 42px;
    }

    .summary-info h2 img {
        width: 110px;
        height: auto;
    }

    .summary-info__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 35px 22px;
        margin-top: 30px;
    }

    .summary-info dt {
        font-size: 2rem;
    }

    .summary-info dd {
        margin-top: 10px;
        font-size: 1.4rem;
    }

    .summary-notice {
        margin-top: 45px;
        overflow-x: auto;
    }

    .summary-notice img {
        width: 900px;
        max-width: none;
    }
}


/* 오리발 */
.page_info{
    display: flex;
    flex-direction: column;
    justify-content: center;
    background : #f7f7f7;
	max-width : 1408px;
    border : 1px solid #e5e5e5;
    padding : 25px 60px 25px 120px;
    min-height : 120px;
    font-size: 13px;
    letter-spacing: -0.04em;
    color : #777;
    position : relative;
	margin : 2em auto 0;
}
.page_info::after{
    display: flex;
    align-items: center;
    justify-content: center;
    color : #fff;
    font-size: 36px;
    font-weight: 700;
    content : '!';
    position : absolute;
    width : 70px;
    height : 70px;
    border-radius: 50%;
    background : #727272;
    left : 25px;
    top : 50%;
    transform: translateY(-50%);
}
.page_info > li{
    position : relative;
    padding-left : 14px;
    font-weight: 500;
}
.page_info > li + li{
    margin-top : 3px;
}
.page_info > li::before{
    content : '※ ';
    position : absolute;
    left : 0;
    font-size: 11px;
    line-height: 18px;
}

@media (max-width : 1200px){
	.moView{
		display : block !important;
	}
	.pcView{
		display : none !important;
	}
	.sub-title-box{
		height : 46.2667vw;
		max-height : 347px;
	}
	.sub-title-inner{
		justify-content : center;
		align-items : center;
		padding-top : 50px;
		padding-bottom : 0;
	}
	.sub-title{
		font-size : 28px;
	}
	.sub-title-kor{
		font-size : 14px;
	}
	.sub-menu-box{
		display : none;
	}	
	.overview-table {
			max-width : 1200px;
		}
	.overview-table > li {
		/* width : 48%; */
		width : 100%;
		gap: 0;
		margin-bottom: 4.9333vw;
		line-height: 20px;
		font-size : 14px;
	}
	.overview-th{
		font-size : 14px;
        line-height: 2;
	}
	.overview-line{
		margin-bottom : 13px;
	}
	.overview-td > img{
		width : 120px;
	}
	.overview-td img.logo{
		max-height : 1.5em;
	}
	    /* 오리발 */
    .page_info{
        justify-content: center;
        padding : 15px 20px 15px 20px;
        min-height : 0;
        font-size: 11px;
    }
    .page_info::after{
        display : none;
    }
    .page_info > li{
        position : relative;
        padding-left : 12px;
    }
    .page_info > li + li{
        margin-top : 4px;
    }
    .page_info > li::before{
        font-size: 10px;
        line-height: 18px;
    }
}

.pc {display: block !important;}
.mo {display: none !important;}

@media (max-width: 991px){ 
.pc {display: none !important;}
.mo {display: block !important;}

}