@charset "utf-8";

/*-------------------------------------------------
Author : WEB,Seo
Create date : 2025. 01. 17
Last update : 
-------------------------------------------------*/

/* ========== import ========== */
@import url('/resources/css/assets/fonts.css');
@import url('/resources/css/assets/mixin.css');

/* ========== default setting ========== */
html {
    font: 300 16px/1.2 'Pretendard', sans-serif;
    letter-spacing: 0.2px;
    scroll-behavior: smooth;
}

body {
    font-family: 'Pretendard', sans-serif;
    word-break: keep-all;
    /* overflow-y: scroll; */
    overflow-x: clip;
    color: var(--txt-color);
}

body.body_txt_sm {
    font: 300 12px/1.2 'Pretendard', sans-serif;
}

body.body_txt_m {
    font: 300 16px/1.2 'Pretendard', sans-serif;
}

body.body_txt_lg {
    font: 300 22px/1.2 'Pretendard', sans-serif;
}

body::-webkit-scrollbar {
    width: 8px;
}

body::-webkit-scrollbar-thumb {
    width: 10px;
    background: rgba(0, 0, 0, 0.3);
    /* 스크롤바 색상 */
    border-radius: 10px;
    /* 스크롤바 둥근 테두리 */
}

/* ========== //default setting ========== */


/* ========== main ========== */
.main {
    z-index: 1;
    position: relative;
}

/* visual */
.visual {
    width: 100%;
    background: var(--bg-color);
}

.visual .title {
    text-align: center;
    padding: 275px 0 120px;
}

.vis_sub_img {
    display: inline-block;
    max-width: 200px;
    transform: translateY(25px);
}

.visual_img_wrap img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

/* shelter */
.shelter {
    padding: 200px 0;
    background: #1e1c19;
    color: var(--white-color);
    font-weight: 100;
    z-index: 0;
    position: relative;
}

.shelter .title {
    position: relative;
    width: 1100px;
    text-align: center;
    line-height: 1.3;
    padding: 0px 0 700px;
}

.shelter .title:before {
    content: '';
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    z-index: -1;
    background: url(/resources/images/main/sky2.png) center bottom / 1100px no-repeat;
}

.shelter .title:after {
    content: '';
    background: linear-gradient(181deg, #1e1c19, #ffffff00);
    width: 100%;
    height: 50%;
    left: 0;
    top: 0;
    position: absolute;
    z-index: -1;
}

.shelter span,
.shelter p {
    color: rgba(255, 255, 255, 0.70);
}

.punctuation {
    display: block;
    transform: translateY(40px);
    font-family: "Cinzel";
}

/* memorial */
.memorial {
    background: url(/resources/images/main/memorial_bg.jpg) center center / cover no-repeat;
    padding: 150px 0 120px;
    text-align: center;
}

.memorial .title {
    padding: 50px 0 220px;
}

.memorial em {
    font-weight: 400;
}

/* room */
.room .left_area,
.room .right_area {
    width: 50%;
    height: 100%;
    position: relative;
    text-align: center;
}

.room_box {
    background: var(--white-color);
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.room_box+.room_box {
    /* position: absolute; */
    left: 0;
    top: 0;
}

.room_box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.room .dark_bg .cont_txt {
    font-weight: 100;
    color: rgba(255, 255, 255, 0.856);
}

.room .txt_box.dark_bg {
    background: var(--txt-color);
    color: var(--white-color);
}

.room .dark_bg .num {
    color: var(--sub-color);
}

/* enshrine */
.enshrine_inner {
    background: url(/resources/images/main/enshrine_bg.png) center / cover no-repeat;
    height: 880px;
    color: white;
    text-align: center;
    margin: 160px auto;
}

.enshrine .num {
    color: var(--sub-color);
}

.enshrine .cont_txt {
    font-weight: 100;
}

/* park */
.park_txt {
    background: url(/resources/images/main/park_bg.jpg) center center / cover no-repeat;
    text-align: center;
    position: relative;
    color: var(--white-color);
    padding: 170px 0 120px;
}

.park_txt .title {
    padding: 50px 0 220px;
}

.park_txt:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, black, rgb(0 0 0 / 51%), rgba(0, 0, 0, 0.199));
    z-index: 0;
}

.park_txt span,
.park_txt h2,
.park_txt em,
.park_txt p {
    z-index: 1;
}

.pro_name {
    display: block;
}

.park .cont_txt {
    font-weight: 100;
    min-height: 137px;
    box-sizing: border-box;
}

.park_place {
    background: black;
    color: white;
    padding: 200px 0;
}

.pp_li {
    width: calc(33% - 50px);
}

.pp_li .num {
    color: var(--sub-color);
    display: inline-block;
}

.pp_li .img_wrap {
    height: 575px;
}

.pp_li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* natural */
.natural {
    background: #201c11;
    color: var(--white-color);
    padding: 200px 0 250px;
}

.natural .title {
    margin-bottom: -25px;
    z-index: 1;
}

.natural .img_wrap {
    width: 100%;
}

.natural .img_wrap img {
    max-width: 1050px;
    margin: 0 auto;
}

.natural_ul {
    justify-content: space-between;
    width: 100%;
    margin: -150px 0 -270px;
}

.natural .bottom_txt {
    width: 500px;
}

.natural .cont_txt {
    font-weight: 100;
}

/* award */
.award {
    background: url(/resources/images/main/award_bg.jpg) top / 100% auto no-repeat;
    position: relative;
}

.award:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #1e1c19;
    z-index: -1;
}

.award_inner {
    padding: 800px 0 200px;
    background: linear-gradient(359deg, var(--txt-color) 50%, transparent);
}

.award_header {
    color: var(--white-color);
    text-align: center;
}

.award_header img {
    width: 145px;
}

.award .title {
    line-height: 1.2;
}

.award_conts .title {
    line-height: 1.5;
}

.award_conts {
    color: white;
    padding: 250px 0 100px;
}

.award .sub_title {
    color: var(--sub-color);
    text-transform: capitalize;
}

.award .cont_txt {
    font-weight: 100;
}

.award_swiper {
    overflow: initial;
    position: relative;
}

.award_swiper li {
    height: 700px;
    position: relative;
    opacity: 0.2;
}

.award_swiper li.swiper-slide-active {
    opacity: 1;
}

.award_swiper li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.award_swiper li:after {
    position: absolute;
    content: '';
    display: block;
    left: 0;
    top: 0;
    width: 115px;
    height: 59px;
    background: white url('/resources/images/common/award_logo01.svg') center / contain no-repeat;
}

.award_swiper.award_2023 .swiper-slide:after {
    background: white url('/resources/images/common/award_logo02.svg') center / contain no-repeat;
}

/* media */
.media {
    padding: 180px 0;
}

.media_swiper {
    overflow: initial;
}

.media_swiper li {
    width: 486px;
    height: 660px;
}

.media_swiper li:nth-child(even) {
    margin-top: 100px;
}

.media_swiper li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    display: block;
    background: #eee;
}

/* social */
.social {
    background: var(--bg-color);
    padding: 170px 0;
}

.insta_id {
    display: block;
    color: var(--navy-color);
}

.social_ul {
    gap: 40px;
}

.social_li {
    width: calc(25% - 30px);
    height: 370px;
}

.social_li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.social_photo {
    text-align: center;
}

/* way */
.way {
    padding: 170px 0;
}

.way .title {
    line-height: 1.5;
}

.way dl {
    color: #463C23;
    border-bottom: 1px solid #DCDCDC;
    align-items: flex-start;
    padding: 6px 0;
}

.way dl:last-child {
    border: unset;
}

.way dd {
    text-align: right;
}

.way dd span {
    opacity: 0.6;
}

/* ========== //main ========== */


/* popup */
#popup {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
}

#popup>div {
    width: 100%;
    height: 100%;
    overflow: auto;
}

#popup .slick-track {
    gap: 0;
}

#popup .slick-list {
    margin-top: 70px;
}

#popup .slick-slider .slick-next {
    right: 0px;
    top: -60px;
    left: unset;
    bottom: unset;
    border: 2px solid white;
    background: unset;
}

#popup .slick-slider .slick-prev {
    right: 60px;
    top: -60px;
    left: unset;
    bottom: unset;
    border: 2px solid white;
    background: unset;
}

#popup .slick-slider .slick-prev:before,
#popup .slick-slider .slick-next:before {
    color: white;
}

#popup .popup-wrap {
    max-width: 590px;
    width: calc(100% - 20px);
    height: 100vh;
    /* overflow: auto; */
    padding: 30px 0;
    height: fit-content;
}

#popup .swiper-slide {
    text-align: center;
    /* height: 32.5em; */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: fit-content !important;
    /* height: 100%; */
}

#popup .swiper-slide img {
    display: block;
    width: 100%;
    /* width: fit-content; */
    height: 100%;
    /* object-fit: cover; */
}

#popup .num-wrap {
    color: #fff;
    font-size: 1.25em;
    width: auto;
}

#popup .pagin-wrap {
    margin-bottom: 16px;
    justify-content: space-between;
    align-items: flex-end;
}

#popup .pagin-wrap .btns-wrap {
    gap: 1em;
}

#popup .pagin-wrap .btns-wrap button {
    border: 2px solid white;
    position: unset;
    color: #5f3f3f;
    width: 45px;
    height: 45px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    border-radius: 99px;
    background: none;
    color: white;
}

#popup .pagin-wrap .btns-wrap button:after {
    font-size: 1.125em;
}

#popup .swiper-wrapper {
    height: fit-content;
}

#popup .close-wrap {
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
    font-size: 1.25em;
    /* position: absolute; */
    bottom: 0;
    right: 0;
    width: 100%;
    z-index: 999;
    position: relative;
}

#popup .close-wrap .btn-close {
    align-items: center;
    gap: 10px;
    color: #fff;
    margin-top: 10px;
}

#popup .close-wrap .btn-close i {
    font-size: 1.5em;
}

#popup .close-wrap .btn-close:hover {
    opacity: 0.7;
}

@media screen and (max-width: 650px) {
    /* #popup .swiper-slide {
        height: auto;
    }

    #popup .swiper-slide img {
        height: auto;
    }

    .blind_650 {
        display: none;
    }

    .m_show.m_650 {
        display: block;
    } */

}