@charset "utf-8";

/*
 * File    : sub-sancnow.css
 * Author  : STUDIO-JT
 *
 * SUMMARY :
 * NEWS
 * SNS
 * GALLERY
 * FAQ
 * HOVER
 */

 

/* **************************************** *
 * NEWS
 * **************************************** */
/* List */
.jt-news-container { display: flex; gap: 82rem; }

/* Notice */
.jt-news-notice { width: 100%; max-width: 792rem; position: sticky; top: 52rem; height: fit-content; background: var(--color-secondary); border-radius: var(--round-05); padding-bottom: 50rem; }

.jt-news-notice-list { position: relative; }
.jt-news-notice-list__content { display: block; color: var(--color-white); padding: 50rem 50rem 0; }

.jt-news-notice-list__meta { display: flex; justify-content: space-between; align-items: center; padding: 4rem 0; margin-bottom: 24rem; gap: 20rem; }
.jt-news-notice-list__date { opacity: .5; }

.jt-news-notice-list__title { height: calc( var(--font-lineheight-ko-06) * 2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; margin-bottom: 40rem; }

.jt-news-notice-list__thumb { border-radius: var(--round-02); overflow: hidden; margin-bottom: 40rem; }
.jt-news-notice-list__thumb figure { padding-top: 64.6%; position: relative; }
.jt-news-notice-list__thumb figure img { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; object-fit: cover; }

.jt-news-notice-list__link { display: block; width: fit-content; border-bottom: 1px solid transparent; transition: border .3s; }
.jt-news-notice-list__link--outlink { position: relative; border: none; }
.jt-news-notice-list__link--outlink .jt-icon { width: 20rem; }
.jt-news-notice-list__link--outlink svg path { fill: var(--color-white); }

.jt-news-notice-list .swiper-control { position: static; text-align: center; margin-top: 40rem; display: none; }
.jt-news-notice-list .swiper-control .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet { width: 18rem; height: 18rem; margin: 0 5rem; }
.jt-news-notice-list .swiper-control .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet:before { border: none; }
.jt-news-notice-list .swiper-control .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet-active:after { width: 16rem; height: 16rem; margin-top: -8rem; margin-left: -8rem; background-color: var(--color-point-02); transition: .3s; }

.jt-news-notice-list.swiper-initialized .swiper-control { display: block; }

/* News */
.jt-news-list__content { display: flex; flex-direction: column; gap: 40rem; padding: 40rem 30rem; position: relative; color: var(--color-black); background: var(--color-gray-300); border-radius: var(--round-03); transition: background-color .3s; }

.jt-news-list__meta { padding: 4rem 0; display: flex; justify-content: space-between; align-items: center; gap: 20rem; }
.jt-news-list__date { opacity: .5; }

.jt-news-list__body { display: flex; flex-direction: column; gap: 20rem; }
.jt-news-list__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.jt-news-list__thumb { padding-top: 55.67%; border-radius: var(--round-02); overflow: hidden; }
.jt-news-list__thumb.jt-lazyload img { height: 100%; object-fit: cover; }
.jt-news-list__desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; color: var(--color-gray-800); }

.jt-news-list__link { display: block; width: fit-content; color: var(--color-gray-700); border-bottom: 1px solid transparent; transition: color .3s, border .3s; }
.jt-news-list__link--outlink { border: none; }
.jt-news-list__link--outlink .jt-icon { width: 16rem; }
.jt-news-list__link--outlink svg path { fill: var(--color-gray-700); }

/* RELATED */
.jt-related-list.jt-news-list .swiper-wrapper { display: flex; align-items: stretch; gap: 32rem; }
.jt-related-list.jt-news-list .jt-news-list__item { flex: 1; height: auto; }
.jt-related-list.jt-news-list .jt-news-list__content { height: 100%; padding-bottom: 98rem; }
.jt-related-list.jt-news-list .jt-news-list__link { position: absolute; left: 30rem; bottom: 40rem; }



/* **************************************** *
 * SNS
 * **************************************** */
body.page-template-sancnow-sns .main-container { padding-top: 0; }
body.page-template-sancnow-sns .article__header { padding-top: 180rem; padding-bottom: 0; position: relative; }

body.page-template-sancnow-sns .scroll-down { bottom: 35rem; }
body.page-template-sancnow-sns .scroll-down span { color: var(--color-black); }
body.page-template-sancnow-sns .scroll-down .jt-icon svg path { fill: var(--color-black); }

/* Shorcut */
.sns-shortcut__bg { position: absolute; width: 100%; height: 100%; left: 0; bottom: 0; background: url(../images/layout/sanc-illust.svg) no-repeat center / auto 100%; opacity: .1; }

.sns-shortcut { padding: 100rem 0 147rem; overflow: hidden; }
.sns-shortcut__slider .swiper-wrapper { display: flex; gap: 32rem; }
.sns-shortcut__item { flex: 1; }
.sns-shortcut__item { position: relative; aspect-ratio: 1 / 1; background: var(--color-point-02); border-radius: var(--round-05); overflow: hidden; }
.sns-shortcut__item-bg { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: no-repeat center / cover; border-radius: inherit; }
.sns-shortcut__item-inner { width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 8rem; color: var(--color-white); text-align: center; }
.sns-shortcut__item-bg--hover { opacity: 0; }
.sns-shortcut__item-bg--hover img { display: block; width: 100%; height: 100%; object-fit: cover; }

.sns-shortcut__item.sns-shortcut--yt .sns-shortcut__item-bg--basic { background-color: #c71f22; background-image: url(../images/sub/sancnow/sns-shortcut-01.jpg); }
.sns-shortcut__item.sns-shortcut--ig .sns-shortcut__item-bg--basic { background-color: var(--color-quinary); background-image: url(../images/sub/sancnow/sns-shortcut-02.jpg); }
.sns-shortcut__item.sns-shortcut--blog .sns-shortcut__item-bg--basic { background-color: #12891a; background-image: url(../images/sub/sancnow/sns-shortcut-03.jpg); }
html.mobile .sns-shortcut__item.sns-shortcut--yt .sns-shortcut__item-bg--basic { background-image: url(../images/sub/sancnow/sns-shortcut-01.webp); }
html.mobile .sns-shortcut__item.sns-shortcut--ig .sns-shortcut__item-bg--basic { background-image: url(../images/sub/sancnow/sns-shortcut-02.webp); }
html.mobile .sns-shortcut__item.sns-shortcut--blog .sns-shortcut__item-bg--basic { background-image: url(../images/sub/sancnow/sns-shortcut-03.webp); }

.sns-shortcut--more { background: var(--color-point-02); border-radius: 50%; }
.sns-shortcut--more .sns-shortcut__item-inner { flex-direction: row; gap: 14rem; color: var(--color-black); }
.sns-shortcut--more .jt-icon { width: 24rem; }

/* List */
.sns-container { display: flex; flex-direction: column; gap: 260rem; padding-top: 215rem; }

.sns-instagram .sns-contents { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32rem; }
.sns-contents__list { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 32rem; row-gap: 80rem; }
.sns-contents__item-thumb { position: relative; width: 100%; border-radius: var(--round-02); overflow: hidden; }
.sns-contents__item-thumb:after { position: absolute; content: ''; width: 40rem; height: 40rem; top: 20rem; right: 20rem; background-repeat: no-repeat; background-position: center; background-size: cover; filter: invert(1); }
.sns-contents__item-thumb figure { padding-top: 100%; }
.sns-contents__item-hover-icon { position: absolute; bottom: 20rem; right: 20rem; width: 32rem; height: 32rem; background: var(--color-white); border-radius: 50%; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .3s; }
.sns-contents__item-hover-icon svg { width: 15rem; }
.sns-contents__item-desc h3 { color: var(--color-black); }
.sns-contents__item-desc p { color: var(--color-gray-800); }

.sns-instagram .sns-contents__main { width: 100%; height: fit-content; position: sticky; top: 40rem; }
.sns-instagram .sns-contents__list { grid-template-columns: repeat(2, 1fr); row-gap: 60rem; }
.sns-instagram .sns-contents__item-thumb:after { background-image: url(../images/icon/jt-icon/jt-instagram.svg); }
.sns-instagram .sns-contents__item-desc { margin-top: 16rem; }

.sns-youtube .jt-tabs__menu { margin-bottom: 80rem; }
.sns-youtube .sns-contents__item:nth-child(1) { grid-column: 1 / span 2; }
.sns-youtube .sns-contents__item:nth-child(2) { grid-column: 3 / span 2; }
.sns-youtube .sns-contents__item:nth-child(1) .sns-contents__item-thumb:after, 
.sns-youtube .sns-contents__item:nth-child(2) .sns-contents__item-thumb:after { top: 30rem; right: 30rem; }
.sns-youtube .sns-contents__item-thumb:after { background-image: url(../images/icon/jt-icon/jt-youtube.svg); }
.sns-youtube .sns-contents__item-thumb figure { padding-top: 56.16%; }
.sns-youtube .sns-contents__item-desc { margin-top: 24rem; }
.sns-youtube .sns-contents__item-desc h3 { margin-bottom: 16rem; }

.sns-youtube__character { position: absolute; right: 178rem; top: 21rem; width: 200rem; translate: 0 -100%; z-index: -1; }
.sns-youtube__character .jt-lazyload { padding-top: 200rem; }

.sns-blog .sns-contents__item-thumb:after { background-image: url(../images/icon/jt-icon/jt-naver-blog.svg); }
.sns-blog .sns-contents__item-desc { margin-top: 20rem; }
.sns-blog .sns-contents__item-desc h3 { margin-bottom: 7rem; }
.sns-blog .sns-contents__item-hover-icon { bottom: 16rem; right: 16rem; }

.sns-contents__item-character { background: url(../images/sub/sancnow/sns-blog-character-01.webp) no-repeat center center / contain; }



/* **************************************** *
 * GALLERY
 * **************************************** */
body.open-popup { height: 100%; overflow: hidden; }

body.page-template-sancnow-gallery .main-container { padding-top: 0; }
body.page-template-sancnow-gallery .article { overflow: hidden; }
body.page-template-sancnow-gallery .article__visual-bg { background: url(../images/sub/sancnow/sanc-gallery-visual.jpg) no-repeat; }

.sanc-gallery-container { padding-top: 260rem; display: flex; flex-direction: column; gap: 200rem; }
.sanc-gallery-section__head { position: relative; display: flex; flex-direction: column; gap: 16rem; padding-right: 80rem; }
.sanc-gallery-section__head p { color: var(--color-gray-800); }
.sanc-gallery-section__head-btn { display: block; padding: 0 10rem; position: absolute; top: 16rem; right: -10rem; color: inherit; }
.sanc-gallery-section__head-btn > span { padding: 3rem 0; border-bottom: 1px solid var(--color-black); }

.sanc-gallery-list { display: block; margin-top: 40rem; margin-left: -52rem; margin-right: -52rem; overflow: visible; }
.sanc-gallery-list__item { position: relative; width: 738rem; border-radius: var(--round-06); overflow: hidden; margin-right: 32rem; }
.sanc-gallery-list__item:first-child { margin-left: 52rem; }
.sanc-gallery-list__item:last-child { margin-right: 52rem; }
.sanc-gallery-list__item .jt-lazyload { padding-top: 56.23%; }
.sanc-gallery-list__item .jt-lazyload img { height: 100%; object-fit: cover; }
.sanc-gallery-list__zoom { position: absolute; right: 40rem; bottom: 40rem; width: 40rem; height: 40rem; border-radius: var(--round-01); opacity: 0; transition: opacity .2s; }
.sanc-gallery-list__zoom svg { width: 100%; height: auto; }

/* POPUP */
.sanc-gallery-popup { position: fixed; top: 0; left: 0; right: 0; bottom: 0; height: 100%; background: var(--color-bg); opacity: 0; visibility: hidden; z-index: 900; }
.sanc-gallery-popup__title { position: absolute; top: 40rem; left: 52rem; width: calc(100% - 224rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sanc-gallery-popup__close { position: absolute; top: 40rem; right: 52rem; display: flex; gap: 8rem; align-items: center; color: var(--color-black); z-index: 10; }
.sanc-gallery-popup__close span { display: inline-block; }
.sanc-gallery-popup__close .jt-icon { width: 16rem; }
.sanc-gallery-popup__close:after { content: ''; position: absolute; bottom: 0; left: 0; display: block; width: 100%; height: 1px; background: var(--color-black); opacity: 0; transition: opacity .3s; }

.sanc-gallery-view { height: 100%; overflow-y: scroll; }
.sanc-gallery-view__inner { max-width: 1120rem; margin-left: auto; margin-right: auto; }
.sanc-gallery-view__list-item { padding-top: 100rem; }
.sanc-gallery-view__list-item:first-child { padding-top: 110rem; }
.sanc-gallery-view__list-item:last-child { padding-bottom: 110rem; }
.sanc-gallery-view__list-item b { display: block; margin-top: 10rem; text-align: center; }
.sanc-gallery-view__list-image { padding-top: 66.52%; background: no-repeat center center / cover; }

.sanc-gallery-view__nav { position: fixed; top: 0; right: 92rem; width: 90rem; display: flex; flex-direction: column; gap: 24rem; }
.sanc-gallery-view__nav-item { position: relative; }
.sanc-gallery-view__nav-item:before, .sanc-gallery-view__nav-item:after { position: absolute; top: 50%; transform: translateY(-50%); font-family: var(--font-secondary); font-size: var(--font-size-en-07); line-height: var(--font-lineheight-en-07); color: var(--color-black); z-index: 1; opacity: 0; transition: .3s; }
.sanc-gallery-view__nav-item:before { content: '('; left: -17rem; }
.sanc-gallery-view__nav-item:after { content: ')'; right: -17rem; }
.sanc-gallery-view__nav-image { padding-top: 66.67%; background: no-repeat center center / cover; }

.sanc-gallery-view__nav--fixed { height: 100%; justify-content: center; }

.sanc-gallery-view:not(.sanc-gallery-view--scroll) .sanc-gallery-view__nav--current:before, .sanc-gallery-view:not(.sanc-gallery-view--scroll) .sanc-gallery-view__nav--current:after { opacity: 1; }

/* SINGLE */
.sanc-gallery-pciture { width: 100%; margin: 0 auto; }



/* **************************************** *
 * FAQ
 * **************************************** */
.sanc-faq { padding-bottom: 113rem;}
.sanc-faq__list:not(.swiper-initialized) .swiper-wrapper { display: grid; grid-template-columns: repeat(5, 1fr); gap: 29rem;}
.sanc-faq__item { position: relative; aspect-ratio: 1/1; padding: 30rem; display: flex; flex-direction: column; gap: 8rem; border-radius: var(--round-04); background: var(--color-secondary); color: var(--color-white); transition: background .3s, color .3s; cursor: pointer; }
.sanc-faq__title { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; }
.sanc-faq__desc { display: none; }
.sanc-faq__image { position: absolute; bottom: 30rem; right: 30rem; width: 100rem; }
.sanc-faq__image .jt-lazyload { padding-top: 100%; }
.sanc-faq__image .jt-lazyload img { height: 100%; object-fit: cover; }

/* POPUP */
.sanc-faq-popup { display: none; width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 999; }
.sanc-faq-popup__overlay { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(27, 27, 27, .8); }
.sanc-faq-popup__inner { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; padding: 80rem 52rem; }
.sanc-faq-popup__content { position: relative; width: 480rem; max-height: 100%; padding: 60rem 18rem 60rem 40rem; display: flex; flex-direction: column; gap: 40rem; border-radius: var(--round-05); background: var(--color-point-02); }

.sanc-faq-popup__image { width: 100rem; }
.sanc-faq-popup__figure { position: relative; width: 100%; padding-top: 100%; }
.sanc-faq-popup__figure img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }

.sanc-faq-popup__text { max-height: 322rem; padding-right: 22rem; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: none; }
.sanc-faq-popup__desc { margin-top: 16rem; }
.sanc-faq-popup__desc > * { color: var(--color-gray-800); }
.sanc-faq-popup__desc > * ~ * { margin-top: 12rem; }

.sanc-faq-popup__category span { padding: 4rem 0; border-bottom: 1px solid currentColor; }

.sanc-faq-popup__close { width: 36rem; height: 36rem; position: absolute; top: 30rem; right: 30rem; }
.sanc-faq-popup__close .jt-icon { width: 16rem; position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); }

html.win .sanc-faq-popup__text { overflow: overlay; }
html.win .sanc-faq-popup__text::-webkit-scrollbar { width: 4rem; background: transparent; }
html.win .sanc-faq-popup__text::-webkit-scrollbar-track { background: transparent; }
html.win .sanc-faq-popup__text::-webkit-scrollbar-thumb { background: var(--color-gray-600); border-radius: 99rem; }



/* **************************************** *
 * HOVER
 * **************************************** */
@media (hover: hover) and (pointer: fine) {

    /* NEWS */
    .jt-news-notice-list__link:hover { border-color: var(--color-white); }
    
    .jt-news-list__content:hover { background: var(--color-point-02); }
    .jt-news-list__link:hover { color: var(--color-black); border-color: currentColor; }
    .jt-news-list__link:hover .jt-icon svg path { fill: var(--color-black); }

    /* SNS */
    .sns-contents__item:hover .sns-contents__item-hover-icon { opacity: 1; }
    
    /* GALLERY */
    .sanc-gallery-section__head-btn:hover > span { border-style: dashed; }

    .sanc-gallery-list__item > a:hover .sanc-gallery-list__zoom { opacity: 1; }

    .sanc-gallery-popup__close:hover:after { opacity: 1; }

    /* FAQ */
    .sanc-faq__item:hover { background: var(--color-point-02); color: var(--color-black) }

}