@charset "utf-8";

/*
 * File    : sub-brandex.css
 * Author  : STUDIO-JT
 *
 * SUMMARY :
 * 견학안내
 * 견학신청
 * 견학후기
 * 공식 캐릭터즈
 */

 

/* **************************************** *
 * 견학안내
 * **************************************** */
/* LAYOUT */
body.page-template-brandex-tour-info .main-container { padding-top: 0; }

.factory-tourinfo { --section-margin: 52rem; }

/* GLOBAL */
.factory-tourinfo__headline { margin-bottom: 80rem; text-align: center; }
.factory-tourinfo__headline p { margin-top: 24rem; color: var(--color-gray-800); }

/* VISUAL */
.tourinfo-visual__mask { width: 100%; height: 100%; position: absolute; top: 0; left: 0; -webkit-mask-image: url(../images/sub/brandex/factory-info-mask-visual.svg); mask-image: url(../images/sub/brandex/factory-info-mask-visual.svg); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; }
.tourinfo-visual__mask:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.2); z-index: 1; }

.tourinfo-visual__illust { position: absolute; background: no-repeat center center / contain; z-index: 2; }
.tourinfo-visual__illust--cloud { width: 303rem; height: 141rem; top: 153rem; right: 31rem; }
.tourinfo-visual__illust--grass { width: 470rem; height: 510rem; bottom: -18rem; left: -159rem; transform-origin: left center; rotate: 6deg; }

/* GALLERY */
.tourinfo-gallery { padding-top: 263rem; }

.tourinfo-gallery__slider { margin: 0 calc( -1 * var(--section-margin) ); overflow: hidden; }
.tourinfo-gallery__slider-item { display: inline-block; vertical-align: middle; margin: 0 16rem; }
.tourinfo-gallery__slider-item--primary { width: 585rem; }
.tourinfo-gallery__slider-item--secondary { width: 444rem; }

.tourinfo-gallery__slider-picture { position: relative; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; }
.tourinfo-gallery__slider-picture .jt-lazyload { width: calc(100% - 4rem); height: calc(100% - 4rem); position: absolute; top: 2rem; bottom: 2rem; left: 2rem; right: 2rem; }
.tourinfo-gallery__slider-picture .jt-lazyload img { height: 100%; object-fit: cover; }
.tourinfo-gallery__slider-item--primary .tourinfo-gallery__slider-picture { padding-top: 92.79%; -webkit-mask-image: url(../images/sub/brandex/factory-info-mask-horizontal-large.svg); mask-image: url(../images/sub/brandex/factory-info-mask-horizontal-large.svg); }
.tourinfo-gallery__slider-item--secondary .tourinfo-gallery__slider-picture { padding-top: 91.9%; -webkit-mask-image: url(../images/sub/brandex/factory-info-mask-horizontal-small.svg); mask-image: url(../images/sub/brandex/factory-info-mask-horizontal-small.svg); }

/* BRAND */
.tourinfo-brand { margin-top: 288rem; }

.tourinfo-brand__list-wrap { margin: 0 calc(-1 * var(--section-margin)); position: relative; overflow: hidden; }
.tourinfo-brand__list { max-width: 1467rem; margin: -2rem auto 0; }
.tourinfo-brand__list:after { content: ''; display: table; clear: both; }
.tourinfo-brand__list-item { width: 697rem; position: relative; clear: both; }
.tourinfo-brand__list-item:nth-child(odd) { float: left; }
.tourinfo-brand__list-item:nth-child(even) { float: right; }
.tourinfo-brand__list-item:nth-child(2) { margin-top: -293rem; }
.tourinfo-brand__list-item:nth-child(3) { margin-top: -194rem; margin-left: 8rem; }
.tourinfo-brand__list-item:nth-child(4) { width: 515rem; margin-top: -478rem; margin-right: 43rem; }

.tourinfo-brand__list-slider { padding-top: 124.24%; position: relative; background: var(--color-gray-100); -webkit-mask-image: url(../images/sub/brandex/factory-info-mask-vertical.svg); mask-image: url(../images/sub/brandex/factory-info-mask-vertical.svg); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; }
.tourinfo-brand__list-slider .swiper { width: calc(100% - 4rem); height: calc(100% - 4rem); position: absolute; top: 2rem; bottom: 2rem; left: 2rem; right: 2rem; }
.tourinfo-brand__list-slider .swiper-slide { background: no-repeat center center / cover; }

.tourinfo-brand__list-typo { margin-top: 46rem; text-align: center; }

.tourinfo-brand__reservation-message { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24rem; height: 420rem; padding-bottom: 34rem; position: relative; text-align: center; color: var(--color-white); background: var(--color-quinary); -webkit-mask-image: url(../images/sub/brandex/factory-info-mask-bubble.svg); mask-image: url(../images/sub/brandex/factory-info-mask-bubble.svg); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; z-index: 2; }
.tourinfo-brand__reservation-illust { margin-top: -78rem; padding-right: 36rem; }
.tourinfo-brand__reservation-illust-inner { width: 170rem; margin: 0 auto; }
.tourinfo-brand__reservation-illust .jt-lazyload { padding-top: 176.47%; }

.tourinfo-brand__illust { position: absolute; background: no-repeat center center / contain; }
.tourinfo-brand__illust--water { width: 754rem; height: 674rem; top: 15rem; right: 0; }
.tourinfo-brand__illust--soy { width: 148rem; height: 218rem; top: 179rem; left: -132rem; }
.tourinfo-brand__illust--bean { width: 158rem; height: 148rem; bottom: 154rem; right: -99rem; }
.tourinfo-brand__illust--grass { width: 208rem; height: 163rem; bottom: 180rem; right: -45rem; z-index: 2; }
.tourinfo-brand__illust--tofu { width: 273rem; height: 283rem; top: -146rem; left: -129rem; }
.tourinfo-brand__illust--greenbean { width: 160rem; height: 160rem; bottom: 147rem; right: -138rem; }

/* SCHEDULE */
.tourinfo-schedule { --padding-bottom: 220rem; padding-top: 593rem; padding-bottom: var(--padding-bottom); position: relative; overflow: hidden; }

.tourinfo-schedule .factory-tourinfo__headline > * { color: var(--color-white); }

.tourinfo-schedule__bg { width: 100%; position: absolute; left: 0; }
.tourinfo-schedule__bg:before { content: ''; width: 100%; position: absolute; left: 0; background: no-repeat center center / 100% 100%; }
.tourinfo-schedule__bg--dark { height: calc(100% - (663rem + var(--padding-bottom))); top: 663rem; background: #016E41; }
.tourinfo-schedule__bg--dark:before { height: 624rem; top: -624rem; background-image: url(../images/sub/brandex/factory-info-schedule-ridge-01.png); }
.tourinfo-schedule__bg--light { height: calc(100% - (1477rem + var(--padding-bottom))); top: 1477rem; background: #1B8A11; }
.tourinfo-schedule__bg--light:before { height: 638rem; top: -638rem; background-image: url(../images/sub/brandex/factory-info-schedule-ridge-02.png); }
.tourinfo-schedule__bg--mountain { height: 271rem; bottom: 0; background: url(../images/sub/brandex/factory-info-schedule-mountain.png) no-repeat center center / 100% 100%; }

.tourinfo-schedule__pic { width: 288rem; height: 133rem; position: absolute; right: -288rem; z-index: 2; }
.tourinfo-schedule__pic > i { display: block; height: 100%; background: url(../images/sub/brandex/factory-info-illust-cloud.svg) no-repeat center center / contain; }
.tourinfo-schedule__pic--large { width: 446rem; height: 205rem; right: -446rem; }
.tourinfo-schedule__pic--large > i { background-image: url(../images/sub/brandex/factory-info-illust-cloud-large.svg); }

.tourinfo-schedule__pic-group { width: 100vw; display: flex; flex-direction: column; gap: 300rem; position: absolute; top: 10rem; right: 0; }
.tourinfo-schedule__pic-group ~ .tourinfo-schedule__pic-group { right: -100vw; }
.tourinfo-schedule__pic-group .tourinfo-schedule__pic { position: relative; top: 0; left: inherit; right: inherit; flex-shrink: 0; }
.tourinfo-schedule__pic-group .tourinfo-schedule__pic:nth-child(1) { left: 30%; }
.tourinfo-schedule__pic-group .tourinfo-schedule__pic:nth-child(2) { align-self: flex-end; right: 0; }
.tourinfo-schedule__pic-group.tourinfo-schedule__pic-group--02 { top: 160rem; gap: 40rem; }

.tourinfo-schedule__pic.tourinfo-schedule__pic--cloud-01 { right: inherit; left: 500rem; }
.tourinfo-schedule__pic.tourinfo-schedule__pic--cloud-02 { right: 143rem; }
.tourinfo-schedule__pic.tourinfo-schedule__pic--cloud-01,
.tourinfo-schedule__pic.tourinfo-schedule__pic--cloud-04,
.tourinfo-schedule__pic.tourinfo-schedule__pic--cloud-06 { top: 1250rem; }
.tourinfo-schedule__pic.tourinfo-schedule__pic--cloud-02,
.tourinfo-schedule__pic.tourinfo-schedule__pic--cloud-05 { top: 1700rem; }
.tourinfo-schedule__pic.tourinfo-schedule__pic--cloud-03 { top: 1520rem; }

.tourinfo-schedule__content { position: relative; z-index: 3; }

.tourinfo-schedule__detail { display: flex; flex-direction: column; gap: 16rem; }
.tourinfo-schedule__detail-item { padding: 80rem 60rem; border-radius: var(--round-06); }
.tourinfo-schedule__detail--primary { background: var(--color-point-01); }
.tourinfo-schedule__detail--secondary { background: var(--color-point-02); }

.tourinfo-schedule__pamphlet { display: flex; flex-direction: column; gap: 38rem; }
.tourinfo-schedule__pamphlet > li:not(:last-child):after { content: ''; display: block; width: 100%; margin-top: 38rem; border-bottom: 1px dashed var(--color-point-03); }
.tourinfo-schedule__pamphlet h3 { display: flex; align-items: center; gap: 8rem; margin-bottom: 8rem; position: relative; }
.tourinfo-schedule__pamphlet h3:before { content: ''; width: 5rem; height: 5rem; background: var(--color-quinary); border-radius: 50%; flex-shrink: 0; }
.tourinfo-schedule__pamphlet p { color: var(--color-gray-800); }

.tourinfo-schedule__timeline h3 { margin-bottom: 40rem; text-align: center; }
.tourinfo-schedule__timeline ul { display: flex; flex-direction: column; gap: 32rem; }
.tourinfo-schedule__timeline ul > li { display: flex; align-items: center; gap: 20rem; }
.tourinfo-schedule__timeline ul > li > b { display: inline-block; width: 200rem; padding: 4rem 0; text-align: center; border-radius: 30rem; background: var(--color-point-01); border: 1px dashed var(--color-black); box-sizing: border-box; flex-shrink: 0; }

/* FOREIGN */
.tourinfo-schedule__foreign { display: flex; flex-direction: column; gap: 16rem; padding-bottom: 54rem; }

.tourinfo-schedule__foreign-title { padding: 159rem 60rem; background: no-repeat center / cover; border-radius: var(--round-06); }
.tourinfo-schedule__foreign-title p { text-align: center; color: var(--color-white); }

.tourinfo-schedule__foreign-visit { display: flex; gap: 16rem; }
.tourinfo-schedule__foreign-visit > * { width: 50%; background: var(--color-point-02) no-repeat center / cover; border-radius: var(--round-06); }
.tourinfo-schedule__foreign-visit-report { padding: 123rem 32rem; text-align: center; }
.tourinfo-schedule__foreign-visit-report > b { display: flex; align-items: baseline; justify-content: center; gap: 18rem; }
.tourinfo-schedule__foreign-visit-report > p { color: var(--color-gray-800); }

.tourinfo-schedule__foreign-message { padding: 80rem 60rem; background: var(--color-point-01); border-radius: var(--round-06); }
.tourinfo-schedule__foreign-message > p { color: var(--color-gray-800); }

/* BANNER */
body.page-template-brandex-tour-info .sub-tour-banner { margin-top: 160rem; }



/* **************************************** *
 * 견학신청
 * **************************************** */
body.page-template-brandex-tour-apply .go-top { display: none !important; }



/* **************************************** *
 * 견학후기
 * **************************************** */
.jt-review-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 120rem 32rem; }
.jt-review-list__item { display: flex; flex-direction: column; }
.jt-review-list__item a { color: inherit; }
.jt-review-list__thumb { display: block; padding-top: 71.92%; position: relative; border-radius: var(--round-06); }
.jt-review-list__content { display: flex; flex-direction: column; gap: 4rem; margin-top: 16rem; padding: 16rem 60rem; position: relative; text-align: center; }
.jt-review-list__content > *:not(.jt-review-list__bracket) { display: block; position: relative; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.jt-review-list__place { color: var(--color-gray-700); }
.jt-review-list__bracket { position: absolute; width: 100%; height: 100%; left: 0; top: 0; border: solid var(--color-quinary); border-radius: 999rem; }
.jt-review-list__bracket--left { border-width: 0 0 0 2px; }
.jt-review-list__bracket--right { border-width: 0 2px 0 0; }

/* BANNER */
.sub-tour-banner { margin-top: 260rem; position: relative; background: var(--color-quinary); border-radius: var(--round-07); overflow: hidden; }

.sub-tour-banner .jt-background-video { border-radius: inherit; }
.sub-tour-banner .jt-background-video__vod video { width: 100%; height: 100%; min-width: inherit; min-height: inherit; top: auto; left: auto; bottom: 0; right: 0; translate: none; object-fit: cover; }

.sub-tour-banner__inner { padding: 167rem 52rem; position: relative; z-index: 1; text-align: center; }
.sub-tour-banner__inner > * { color: var(--color-white); }
.sub-tour-banner__inner b { display: block; margin-bottom: 32rem; }
.sub-tour-banner__charactor { display: none; }
.sub-tour-banner__btn-wrap { display: inline-flex; gap: 20rem; margin-top: 40rem; }

/* SINGLE */
.jt-related-list.jt-review-list { display: block; overflow: visible; }
.jt-related-list .jt-review-list__item { width: calc(33.33% - 21.33rem); margin-right: 32rem; }
.jt-related-list .jt-review-list__item:last-child { margin-right: 0; }



/* **************************************** *
 * 공식 캐릭터즈
 * **************************************** */
/* LAYOUT */
body.page-template-brandex-character .main-container { padding-top: 0; }

.official-character { --section-padding: 260rem; }
.official-character > * { padding-top: var(--section-padding); position: relative; overflow: hidden; }

.official-character__pictogram { position: absolute; background: no-repeat center / cover; z-index: -1; }
.official-character__pictogram--star { width: 64rem; height: 75rem; animation: twinkle 2s cubic-bezier(0.46, 0.03, 0.52, 0.96) infinite; }
.official-character__pictogram--cloud { width: 467rem; height: 167rem; animation: floating 3s ease-in-out infinite; }

/* VISUAL */
#visual-star canvas { width: 100%; height: 100%; object-fit: cover; }
.visual-star_character { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: url(../images/sub/brandex/character-visual-runny.png) no-repeat center / cover; }

/* FRIENDS */
.official-character-friends__slider .swiper-wrapper { display: flex; justify-content: center; align-items: flex-end; gap: 24rem; }
.official-character-friends__item { width: fit-content; display: flex; flex-direction: column; align-items: center; gap: 40rem; }
.official-character-friends__item:first-child { margin-right: 56rem; }
.official-character-friends__item:last-child { margin-left: 56rem; }
.official-character-friends__image { width: 200rem; position: relative; }
.official-character-friends__image .jt-lazyload { padding-top: 100%; }
.official-character-friends__image-move { width: 100%; height: 100%;; position: absolute; top: 0; left: 0; }
.official-character-friends__image-move img { display: block; width: 100%; height: auto; }
.official-character-friends__name { padding: 5rem 40rem 2rem; background: var(--color-point-03); border-radius: 99rem; }

.official-character-friends--soy .official-character-friends__image .jt-lazyload { padding-top: 139%; }
.official-character-friends--runny .official-character-friends__image { width: 422rem; }
.official-character-friends--runny .official-character-friends__image .jt-lazyload { padding-top: 114.21%; }

/* BOOK */
.official-character-book .official-character__pictogram--star { top: 221rem; right: 354rem; }

.official-character-book--small-slider { display: none; }
.official-character-book__slider { border-radius: var(--round-06); overflow: hidden; }
.official-character-book__item { padding-top: 47.35%; }
.official-character-book__bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: no-repeat center / cover; }
.official-character-book__bg[data-swiper-parallax] { width: calc(100% + 40px); left: -20px; }
.official-character-book__typo { position: absolute; top: 120rem; left: 120rem; white-space: pre; color: var(--color-white); }

.official-character-book__item--01 .official-character-book__typo,
.official-character-book__item--02 .official-character-book__typo { text-align: center; top: inherit; bottom: 146rem; left: 50%; translate: -50% 0; }
.official-character-book__item--03 .official-character-book__typo { left: inherit; right: 120rem; }

.official-character-book__slider .swiper-control { bottom: 60rem; }
.official-character-book__slider .swiper-navigation .swiper-button { background: rgba(51, 51, 51, 0.7); }
.official-character-book__slider .swiper-navigation .swiper-button-prev { left: 34rem; }
.official-character-book__slider .swiper-navigation .swiper-button-next { right: 34rem; }

/* INTRO */
.official-character .official-character-intro { padding-bottom: var(--section-padding); }

.official-character-intro .official-character__pictogram--star { top: 148rem; left: 204rem; }
.official-character-intro .official-character__pictogram--cloud { top: 253rem; right: -170rem; }

.official-character-intro__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32rem; }
.official-character-intro__list-inner { position: relative; aspect-ratio: 1 / 1.15; perspective: 1000rem; }
.official-character-intro__card { display: flex; align-items: center; justify-content: center; position: absolute; width: 100%; height: 100%; border-radius: var(--round-05); transition: transform 0.5s cubic-bezier(0.42, 0.12, 0.49, 0.97); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.official-character-intro__card--front { background: var(--color-point-02); }
.official-character-intro__card--back { background: var(--color-point-01); transform: rotateY(-180deg); }
.official-character-intro__card--back:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; border: 12rem solid var(--color-primary); border-radius: inherit; }

.official-character-intro__label { position: absolute; top: 50%; rotate: -90deg; translate: 0 -50%; }
.official-character-intro__label--left { left: 6rem; }
.official-character-intro__label--right { right: 6rem; }

.official-character-intro__image { width: 335rem; position: relative; }
.official-character-intro__image .jt-lazyload { padding-top: 118.2%; }
.official-character-intro__name { width: 100%; position: absolute; bottom: 40rem; text-align: center; }

.official-character-intro__content { width: 100%; padding: 0 80rem; text-align: center; }
.official-character-intro__content b { display: block; margin-top: 10rem; }
.official-character-intro__content p { margin-top: 24rem; color: var(--color-gray-800); }

.official-character-intro__list > li:has(.official-character-intro__card--back):hover .official-character-intro__card--front { transform: rotateY(180deg); }
.official-character-intro__list > li:has(.official-character-intro__card--back):hover .official-character-intro__card--back { transform: rotateY(0deg); }

.official-character-intro--lusani .official-character-intro__card--back:after { border-color: #B4CE63; }
.official-character-intro--ganjjangi .official-character-intro__card--back:after { border-color: var(--color-tertiary); }
.official-character-intro--doobee .official-character-intro__card--back:after { border-color: #CEA763; }

.official-character-intro--etc .official-character-intro__card--front { background: var(--color-quinary); }
.official-character-intro--etc .official-character-intro__label { color: var(--color-white); }
.official-character-intro--etc .official-character-intro__image { width: 400rem; margin: 24rem auto 40rem; }
.official-character-intro--etc .official-character-intro__image:after { content: ''; width: 100%; height: 3rem; position: absolute; left: 0; bottom: 0; background: var(--color-black); }
.official-character-intro--etc .official-character-intro__image .jt-lazyload { padding-top: 59%; }
.official-character-intro__factory { width: 100%; padding: 0 80rem; color: var(--color-white); text-align: center; }
.official-character-intro__factory .jt-btn__line { display: block; margin-top: 40rem; }

/* BOOK */
.official-character .official-character-story { padding-top: 0; padding-bottom: 44rem; }

.official-character-story__group { display: flex; flex-direction: column; gap: 180rem; margin: 140rem 52rem 0; }
.official-character-story__row { display: flex; align-items: stretch; }
.official-character-story__row > * { position: relative; }

.official-character-story__primary { width: 1046rem; }
.official-character-story__primary-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; max-width: 987rem; aspect-ratio: 1 / 0.8024; background: no-repeat center / contain; }
.official-character-story__primary p { margin-top: 40rem; text-align: center; }

.official-character-story__secondary { width: 755rem; }
.official-character-story__pic { position: absolute; background: no-repeat center / cover; }
.official-character-story__obj { position: absolute; background: no-repeat center / cover; }

.official-character-story--together .official-character-story__image { width: 730rem; }
.official-character-story--together .official-character-story__image .jt-lazyload { padding-top: 62.19%; }
.official-character-story--together .official-character-story__pic { width: 857rem; height: 891rem; right: -200rem; top: -159rem; }
.official-character-story--together [class*="official-character-story__star"] { width: 64rem; height: 75rem; }
.official-character-story--together .official-character-story__star--01 { top: -52rem; left: 334rem; }
.official-character-story--together .official-character-story__star--02 { top: 69rem; left: 166rem; }
.official-character-story--together .official-character-story__star--03 { top: 232rem; left: 409rem; }

.official-character-story--enjoy .official-character-story__image { width: 564rem; }
.official-character-story--enjoy .official-character-story__image .jt-lazyload { padding-top: 68.43%; }
.official-character-story--enjoy .official-character-story__pic { width: 647rem; height: 698rem; left: 8rem; top: 39rem; }

.official-character-story--balance .official-character-story__primary-inner { max-width: 855rem; margin-top: 49rem; margin-left: 65rem; }
.official-character-story--balance .official-character-story__primary p { color: var(--color-white); }
.official-character-story--balance .official-character-story__image { width: 362rem; }
.official-character-story--balance .official-character-story__image .jt-lazyload { padding-top: 76.24%; }
.official-character-story--balance .official-character-story__pic { width: 690rem; height: 779rem; left: -29rem; top: -3rem; }
.official-character-story--balance [class*="official-character-story__star"] { width: 58rem; height: 68rem; }
.official-character-story--balance .official-character-story__star--01 { top: 48rem; left: 190rem; }
.official-character-story--balance .official-character-story__star--02 { top: 252rem; left: 13rem; }



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

    /* 공식 캐릭터즈 */
    .official-character-book__slider .swiper-navigation .swiper-button:hover { background: var(--color-gray-900); }

}