@charset "utf-8";

.page-header {
  contain: content; position: relative; z-index: 7; display: flex; align-items: center; justify-content: center; height: clamp(400rem, calc(500 / var(--container) * 100vw), 500rem); color: #fff; isolation: isolate;

  &::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--black) no-repeat 50% / cover; }
  &.nav-about::before { background-image: url("/assets/images/pages/page-header-1.webp"); }
  &.nav-contact::before { background-image: url("/assets/images/pages/page-header-1.webp"); }
  &.nav-board::before { background-image: url("/assets/images/pages/page-header-1.webp"); }
  &.nav-legal::before { background-image: url("/assets/images/pages/page-header-1.webp"); }

  /* TODO: after 삭제 */
  &::after { content: "페이지 헤더 영역"; position: absolute; inset: 0; z-index: -1; margin: auto; align-content: center; background: radial-gradient(circle at 20% 0, #648de3 10%, #6768e3) 0 / cover no-repeat; font: 200 var(--font-size-32) var(--font-sans); color: #fff; text-align: center; }
  .page-header-container { display: grid; }
  .heading { font: var(--font-size-50) var(--font-sans); }

  @media (prefers-reduced-motion: no-preference) {
    &::before { animation: page-header-bg 1.8s both; }
    .heading { animation: slide-up 0.6s 0.2s both; opacity: 0; }
  }

}
@keyframes page-header-bg {
  0% { scale: 1.05; }
  100% { scale: 1; }
}
@keyframes slide-up {
  0% { translate: 0 40rem; opacity: 0; }
  100% { translate: 0; opacity: 1; }
}
@keyframes slide-right {
  0% { translate: -40rem; opacity: 0; }
  100% { translate: 0; opacity: 1; }
}

.local-nav {
  position: relative; z-index: 7; font: var(--font-size-18-to-14) var(--font-sans); .container { display: flex; height: 3.88888889em; }

  .home { display: grid; place-items: center; width: auto; height: 100%; aspect-ratio: 1; background: var(--black); }
  .home-icon { display: block; width: 1.05555556em; height: auto; fill: white; }
  details { position: relative; }
  summary { position: relative; display: block; align-content: center; height: 100%; padding-inline: 1.66666667em 3.83333333em; background: lightgray; color: var(--black); text-align: left; }
  summary::after { content: ""; position: absolute; inset: 0; margin: auto 29rem auto auto; width: 0.55555556em; aspect-ratio: 1; border: solid currentColor; border-width: 0 1px 1px 0; rotate: 45deg; translate: 0 -25%; }
  [open] summary::after { scale: -1; translate: 0 25%; }
  .nav-menu { position: absolute; inset: 100% 0 auto; background: #fff; border: 1px solid var(--border-color); box-shadow: 0 10rem 30rem #0000000d; color: var(--black); }
  .details-level-1 .nav-menu-level-2 { display: none; }
  .details-level-2 .nav-menu-level-3 { display: none; }
  .nav-link { display: block; padding: 1em 1.61111111em; }

  @media (any-hover) {
    .nav-link:hover { background: #f4f4f4; }
  }
}

/* main layout */
.sub-page {
  min-height: 300px; padding-block: clamp(60rem, calc(90 / var(--container) * 100vw), 90rem); .legal-document .page-heading, .page-heading-block { margin-bottom: calc(var(--font-size-35) * 2); text-align: center; }
  
  .page-heading { font-size: var(--font-size-35); }
  .page-subheading { margin-top: 0.125em; font-weight: 700; font-size: var(--font-size-16); color: #999; }
  #main:has(.join_area) .sub_title { display: none; }
  /* 멤버 페이지는 각 페이지가 타이틀을 가진 경우가 많아서 공통 서브 타이틀 숨기기 */
}

/* Video Banner */
.video-banner { display: flex; }
.video-banner video { width: 100%; height: 100%; aspect-ratio: 1920/830; object-fit: cover; }

.subhead {position: relative; background: #000; /*border-bottom: 1rem solid #333333;*/}
.subhead .video-subhead { position: absolute; width: 100%; height: 100%; top: 0; z-index: 0; display: none;}
.subhead .video-subhead video { width: 100%; height: 100%; object-fit: cover; }
.subhead .container {position: relative; width: 92%; height: 100%; z-index: 1;}
.subhead h1 { position: relative; display: flex; padding:40rem 0 25rem; color: #fff; font: 600 75rem var(--font-mont); z-index: 1;}
.subhead .board-category {display: flex;/* flex-wrap: wrap; */ padding-bottom:30rem; gap: 10rem;}
.subhead .board-category li {display: flex; }
.subhead .board-category a {color: #fff;font-size: var(--font-size-18);padding: 5rem 30rem; border: 1rem solid #fff;background: transparent;border-radius: 50rem;text-wrap-mode: nowrap;}
.subhead .board-category a.active {background: #4071fb;color: #fff;}

@media(max-width: 1024px){
  .subhead .board-category {position: relative;padding-block: 10rem;}
  .subhead .board-category a {padding: 5rem 15rem;font-size: 14rem;text-wrap-mode: nowrap;color: #222;border-color: #ddd;}
  .subhead .bcat-wrap { width: 100%; display: block; bottom: 0; overflow: auto; border-radius: 10rem 10rem 0rem 0rem; padding: 5rem 15rem; background: #fff; z-index: 2; }
  
}
@media(max-width: 767px){
  .subhead .container { display: flex; flex-direction: column; justify-content: center; }
  .subhead h1 {position: relative;inset: unset;transform: none;font-size: 50rem;}
}

/* About */
.banner-slider {position: relative;height: calc(100vh - var(--header-height));}
.banner-slider::after {display: none !important; content: '';display: block;position: absolute;width: 100%;height: 100%;background: linear-gradient( 90deg, black, transparent);pointer-events: none;z-index: 1;opacity: 0.7;top: 0;}
.banner-slider .aboutSlider {width: 100%;height: calc(100vh - var(--header-height));overflow: hidden;}
.banner-slider .aboutSlider .swiper-slide { display: flex; align-items: center; justify-content: center; font-size: 28px; background: #ddd; }
.banner-slider .aboutSlider .swiper-slide img { width: 100%; height: 100%; object-fit: cover; }
.banner-slider .aboutSlider .swiper-slide img { transform : scale(1); transition : all 1s; }
.banner-slider .aboutSlider .swiper-slide-active img { transform : scale(1); transition : all 1s; }
.banner-slider .text-area {position: absolute; top:40rem; width: 100%;padding: 0 90rem;display: flex;gap: 10rem;z-index: 2;flex-direction: column;}
.banner-slider .text-area span {font: 300 75rem var(--font-mont);color: #fff;display: flex;gap: 10rem;line-height: 1;flex-wrap: wrap;}
.banner-slider .text-area span b { font-weight: 800; }
.banner-slider .text-area p {font-size:var(--font-size-25);line-height: 1.3;color: #ffffff;font-weight: 300; letter-spacing: -1rem;}
.banner-slider .scroll-anim { position: absolute; color: #fff; font-size: 14rem; display: flex; justify-content: center; flex-direction: column; gap: 10rem; bottom: 20rem; left: 50%; transform: translateX(-50%); z-index: 3;}

@media(max-width: 1024px){
  .banner-slider {height: auto;}
  .banner-slider .text-area span { font-size: 50rem; }
  .banner-slider .text-area {padding: 0 20rem;}
  .banner-slider .text-area br { display: none; }
  .banner-slider .aboutSlider { height: 400rem; }
  .banner-slider .scroll-anim { align-items: center; gap: 5rem; font-size: 10rem; }
  .banner-slider .scroll-anim svg { width: 16rem; height: 100%; }
}

.accordion { border-top: 1px solid #ddd; }
.accordion-item { border-bottom: 1px solid #333; }
.accordion-header {width: 100%;background: #000;color: #fff;cursor: pointer;min-height: 150rem;}
.accordion-header:hover {background: #4071fb;}
.accordion-item.active .accordion-header {background: #3970fd;border-bottom: 1rem solid #eee;}
.accordion-icon { font-size: 24px; transition: transform 0.3s ease; }
.accordion-item.active .accordion-icon {background: #3559c0;}
.accordion-body {max-height: 0;overflow: hidden;transition: max-height 0.35s ease;background: #f2f2f2;}
.accordion-item.active .accordion-body { overflow: visible;  }
.accordion-body > p { padding: 20px; margin: 0; line-height: 1.6; }
.title { display: flex; justify-content: space-between; align-items: center; }
.title span { font: 800 64rem var(--font-mont); }
.title .accordion-icon {position: relative;display: flex;width: 60rem;height: 100%;aspect-ratio: 1;background: #3e3e3e;border-radius: 100rem;justify-content: center;align-items: center;}
.accordion-item .title .accordion-icon::before { content: '+'; position: absolute; font-size: 60rem; line-height: 0; font-weight: 400; color: #fff; vertical-align: middle; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.accordion-item.active .title .accordion-icon::before { content: ''; width: 25rem; height: 4rem; background: white; }
.s-tit {display: flex;flex-direction: column;padding-block: clamp( 50rem, calc(100 / var(--container) * 100vw), 50rem );font-size: var(--font-size-28);letter-spacing: -2rem;gap: 10rem;}
.s-tit h1 { font-size: 70rem; font-weight: 800; }
.s-tit p { padding: 0; }

.temp-post { width: 90%; margin: 0 auto; padding: 40rem; display: block; text-align: center; margin-block: 40rem; border: 1rem solid #eee; font-size: 20rem; font-weight: 200; }

@media(max-width: 767px){
  .accordion-header { min-height: auto; padding-block: 20rem; }
  .title span { font-size: 24rem; }
  .title .accordion-icon { width: 40rem; }
  .s-tit h1 { font-size: 36rem; line-height: 1; margin-bottom: 10rem; }
  .s-tit p { font-size: 14rem; }
  .s-tit p br { display: none; }
}

.about {

  .history {

    .history-list { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 200rem; padding-bottom: 100rem; }
    .history-list ul { position: relative; display: flex; flex-direction: column; gap: 30rem; z-index: 1; }
    .history-list ul::before { content: ''; display: block; position: absolute; height: 100%; width: 1rem; background: #222; left: 60rem; z-index: 0; }
    .history-list ul li { display: flex; gap: 50rem; align-items: center; }
    .history-list ul li .year { position: relative; display: flex; justify-content: center; align-items: center; min-width: 120rem; aspect-ratio: 1; border-radius: 100rem; border: 1rem solid #3970FD; color: #3970FD; font-size: var(--font-size-36); font-weight: 800; background: #fff; }
    .history-list ul li p { padding: 0; font-size: var(--font-size-24); }
    .history-list figure { position: sticky; top: 30rem; height: fit-content; }
    .history-list figure img { display: block; width: 100%; }

    @media(max-width: 767px){
      .history-list { display: flex; flex-direction: column-reverse; gap: 50rem; }
      .history-list ul::before { left: 40rem; }
      .history-list ul li { gap: 20rem; }
      .history-list ul li .year { min-width: 80rem; }
      .history-list figure {position: relative; top: unset;}
    }
  }

  .field {padding-bottom: clamp(50rem, calc(100 / var(--container) * 100vw), 100rem);

    .graph { display: flex; justify-content: center; }
    .graph img { width: 100%; max-width: 750rem; }
    .cast { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10rem; padding-top: 100rem; }
    .cast li { border: 1rem solid; min-height: 80rem; display: flex; justify-content: center; align-items: center; font-size: var(--font-size-24); }

    @media(max-width: 767px){
      .cast { grid-template-columns: repeat(2, 1fr); }
    }
  }

  .organization {padding-bottom: clamp(50rem, calc(100 / var(--container) * 100vw), 100rem);

    .graph { display: flex; justify-content: center; }
    .graph img { width: 100%; max-width: 1260rem; }

  }

  .vision {padding-bottom: clamp(50rem, calc(100 / var(--container) * 100vw), 100rem);

    .vision-mision { position: relative; display: flex; gap: 70rem; justify-content: center; z-index: 1; margin-bottom: 100rem; }
    .vision-mision::before { content: ''; position: absolute; display: block; width: 100rem; height: 1rem; background: #222; top: 50%; z-index: -1; }
    .vision-mision .circle { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 20rem; min-width: 350rem; aspect-ratio: 1/1; border: 1rem solid #3970FD; background: #f5f8ff; justify-content: center; border-radius: 100%; font-size: var(--font-size-18); gap: 20rem; }
    .vision-mision .circle::after { content: ''''; position: absolute; width: 1rem; height: 100rem; border: 1rem dashed; bottom: -100rem; }
    .vision-mision .circle h4 { font-size: var(--font-size-50); color: #3970FD; }
    .vision-mision .circle span { font-size: var(--font-size-24); font-weight: 700; line-height: 1.3; }
    .vision-mision .circle p { padding: 0; }
    .txt-vm { display: flex; flex-direction: column; align-items: center; text-align: center; font-size: var(--font-size-24); gap: 20rem; }
    .txt-vm h4 { font-size: var(--font-size-40); }
    .txt-vm p { padding: 0; }
    .photo-grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 180rem; gap: 10rem; margin-top: 100rem; }
    .photo-grid .item { overflow: hidden; border-radius: 5rem; background: #ddd; }
    .photo-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
    .photo-grid .item:hover img { transform: scale(1.05); }
    .photo-grid .item.big { grid-column: span 2; grid-row: span 2; }
    .photo-grid .item.wide { grid-column: span 2; }
    .photo-grid .item.tall { grid-row: span 2; }

    @media (max-width: 1024px) {
      .vision-mision { flex-direction: column; align-items: center; gap: 40rem; }
      .vision-mision::before { display: none; }
      .vision-mision .circle { min-width: 250rem; }
      .photo-grid { grid-template-columns: repeat(3, 1fr); }
    }

  }

  .license {padding-bottom: clamp(50rem, calc(100 / var(--container) * 100vw), 100rem);

    .certi-list {display: grid;grid-template-columns: repeat(7, 1fr);gap: 0;}
    .certi-list li {display: flex;flex-direction: column;gap: 20rem;text-align: center;font-size: var(--font-size-20);padding-inline: 25rem;padding-bottom: 25rem;margin-bottom: 50rem;border-bottom: 1rem solid #bbb;}
    .certi-list li img {width: 100%;height: 100%;object-fit: contain;border: 1rem solid #ddd;background: #fff;aspect-ratio: 21/29.7;}
    .certi-list li p { min-height: 60rem; }

    @media(max-width: 1024px){
      .certi-list {grid-template-columns: repeat(3, 1fr);}
    }
    @media(max-width: 767px){
      .certi-list {grid-template-columns: repeat(2, 1fr);}
    }
  }

  .client {padding-bottom: clamp(50rem, calc(100 / var(--container) * 100vw), 100rem);

    .logo-client {display: grid;grid-template-columns: repeat(4, 1fr);gap: 50rem 20rem;}
    .logo-client li {display: flex;padding: 12rem 20rem;border: 1rem solid #ddd;aspect-ratio: 440 / 100;background: #fff;}
    .logo-client li img { width: 100%; object-fit: contain; }

    @media(max-width: 1024px){
      .logo-client { grid-template-columns: repeat(3, 1fr); }
    }
    @media(max-width: 767px){
      .logo-client { grid-template-columns: repeat(2, 1fr); }
      .logo-client li {padding: 10rem;}
    }
  }

  .process {padding-bottom:clamp(10rem, calc(200 / var(--container) * 100vw), 200rem);

    .process-content { }
    .process-content .video { overflow: hidden; }
    .process-content .video video { width: 100%; }
    .process-content .list { padding-top: 80rem; display: flex; gap: 40rem; }
    .process-content .list .items { position: relative; width: 100%; border: 1rem solid #222; }
    .process-content .list .items::after { content: ""; position: absolute; right: -35rem; top: 0%; transform: translateY(-50%) rotate(45deg); width: 30rem; height: 30rem; border-top: 4px solid currentColor; border-right: 4px solid currentColor; }
    .process-content .list .items::before { content: ''; position: absolute; top: -2rem; right: -35rem; width: 55%; height: 4px; background: #000; }
    .process-content .list .items:last-child::before, .process-content .list .items:last-child::after { display: none; }
    .process-content .list .items i { position: absolute; display: flex; aspect-ratio: 1; width: 60rem; height: 60rem; padding: 10rem; background: #000; color: #fff; justify-content: center; align-items: center; font-size: 30rem; font-style: normal; font-weight: 800; border-radius: 100rem; top: -30rem; left: 50%; transform: translateX(-50%); }
    .process-content .list .items .card { display: flex; flex-direction: column; background: #fff; }
    .process-content .list .items .card h3 { min-height: 300rem; font-size: 40rem; text-align: center; display: flex; justify-content: center; align-items: center; line-height: 1.3; }
    .process-content .list .items .card span { display: flex; padding: 20rem 10rem; border-top: 1rem solid; align-items: center; justify-content: center; text-align: center; font-size: 20rem; }

   
    @media(max-width: 768px){
      .process-content .list { flex-wrap: wrap; gap: 20rem; }
      .process-content .list .items { width: calc(50% - 20rem); }
      .process-content .list .items::before, .process-content .list .items::after { display: none; }
      .process-content .list .items .card h3 { font-size: 25rem; min-height: auto; padding-block: 40rem; }
      .process-content .list .items .card span { font-size: 16rem; }
    }

  }

}


/* Works */
.works {
    position: relative;
    padding-bottom: clamp( 75rem, calc(150 / var(--container) * 100vw), 150rem );

	.title { display: flex; justify-content: space-between; align-items: center; }
	.title h1 { font: 700 100rem var(--font-mont); text-transform: uppercase; }
	.title a { display: flex; align-items: center; gap: 20rem; font-size: var(--font-size-20); font-weight: 600; text-transform: uppercase; }
	.title a svg { rotate: 0deg; transition: all .3s; }
	.title a:hover svg { rotate: -45deg; transition: all .3s; }
	.board-gallery { }
	.board-gallery .board-gallery-list {display: grid;grid-template-columns: repeat(4, 1fr);gap: 30rem 10rem;padding-block: clamp(30rem, calc(75 / var(--container) * 100vw), 50rem);}
	.board-gallery .board-gallery-list a {display: flex;flex-direction: column;gap: 15rem;}
	.board-gallery .board-gallery-list a figure {position: relative;display: flex;aspect-ratio: 4/3; overflow: hidden;}
	.board-gallery .board-gallery-list a figure img { width: 100%; height: 100%; object-fit: cover; }
	.board-gallery .board-gallery-list a figure .hover-img { position: absolute; display: flex; width: 100%; height: 100%; background: rgb(34 34 34 / 70%); align-items: center; justify-content: center; opacity: 0; transition: all .3s; }
	.board-gallery .board-gallery-list a figure .hover-img:hover { opacity: 1; transition: all .3s; }
	.board-gallery .board-gallery-list a figure .hover-img img { max-width: 250rem; height: fit-content; object-fit: contain; }
	.board-gallery .board-gallery-list a hgroup { display: flex; flex-direction: column; font-size: var(--font-size-18); }
	.board-gallery .board-gallery-list a hgroup > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 400rem; width: 100%; }
	.board-gallery .board-gallery-list a hgroup p { font-weight: 200; font-size: var(--font-size-17); }
	.board-gallery .common-pagination { margin: 0; }
	.board-gallery .common-pagination .number { border-color: transparent; }
	.board-gallery .common-pagination .number[aria-current="page"] { border-color: #222; }
  .board-list-empty { margin-block: clamp(50rem, calc(100 / var(--container) * 100vw), 100rem); }

	@media(max-width: 1024px){
		.title h1 { font-size: 50rem; }
		.board-gallery .board-gallery-list { grid-template-columns: repeat(2, 1fr); }
		.board-gallery .board-gallery-list a hgroup > * { max-width: 320rem; }
	}
	@media(max-width: 767px){
		.title { align-items: flex-start; flex-direction: column; gap: 10rem; }
		.title h1 { font-size: 40rem; }
		.title a { gap: 10rem; }
		.board-gallery .board-gallery-list { gap: 30rem 10rem !important; }
		.board-gallery .board-gallery-list a hgroup > * { max-width: 150rem; }
		.board-gallery .board-gallery-list a figure .hover-img img { max-width: unset; padding: 10rem; }
	}

  &.view {
    padding-bottom: clamp(50rem, calc(100 / var(--container) * 100vw), 100rem);
    border-top: 1rem solid #ddd;
    
    .gallery-view { position: relative; }
    .gallery-view .img-wide { display: flex; }
    .gallery-view .img-wide img { width: 100%; height: 100%; object-fit: cover; }
    .gallery-view .data-gallery { display: flex; flex-direction: column; }
    .gallery-view .data-gallery section { display: flex; justify-content: space-between; gap: 100rem; padding-block: 50rem; }
    .gallery-view .data-gallery section * { width: 100%; }
    .gallery-view .data-gallery section:first-child { border-bottom: 1rem solid; }
    .gallery-view .data-gallery section .name { font-size: var(--font-size-40); font-weight: 200; }
    .gallery-view .data-gallery section .name h4 { font-size: var(--font-size-50); }
    .gallery-view .data-gallery section .spec { display: flex; flex-direction: column; gap: 20rem; font-size: var(--font-size-18); }
    .gallery-view .data-gallery section .spec li { display: flex; }
    .gallery-view .data-gallery section .spec li b { min-width: 100rem; width: unset; }
    .gallery-view .data-gallery section p { font-size: var(--font-size-20); }
    .gallery-view .data-gallery section p.eng { font-size: var(--font-size-17); line-height: 1.4; }
    .gallery-view .img-grid { display: flex; flex-wrap: wrap; gap: 20rem; justify-content: center; padding-top: clamp(50rem, calc(100 / var(--container) * 100vw), 100rem); }
    .gallery-view .img-grid img { width: 100%; object-fit: cover; cursor: zoom-in;}
    .gallery-view .img-grid .col2 { width: calc(50% - 10rem); }
    .btn-list { display: flex; justify-content: center; margin-top: clamp(50rem, calc(100 / var(--container) * 100vw), 100rem); }
    .btn-list a { padding: 20rem 50rem; background: #222; color: #fff; display: flex; gap: 20rem; align-items: center; }
    .btn-list a:hover { background: #444444 !important; }
    .btn-list a:hover svg { transform: rotate(-90deg) scale(1.1); transition: all .3s; }
    .btn-list a svg { transform: rotate(0deg) scale(1); }
    .gall-slide {position: relative;height: calc(95vh - var(--header-height));}
    .gall-slide .swiper {width: 100%;height: 100%;}
    .gall-slide .swiper .swiper-wrapper { }
    .gall-slide .swiper .swiper-slide {width: 100%;/* height: 750rem; */object-fit: cover;object-position: center;}
    .gall-slide .swiper .swiper-slide img { width: 100%; height: 100%; object-fit: cover; }
    .gall-slide .swiper .swiper-pagination { display: flex; align-items: center; justify-content: center; padding-bottom: 10rem; }
    .gall-slide .swiper .swiper-pagination-bullet-active { background: #fff; width: 10rem; height: 10rem; }
    .gall-slide .swiper .swiper-nav { position: absolute; display: flex; width: 100%; top: 50%; transform: translateY(-50%); z-index: 1; justify-content: space-between; padding-inline: 20rem; }
    .gall-slide .swiper .swiper-nav .swiper-button-prev, .gall-slide .swiper .swiper-nav .swiper-button-next { position: relative; inset: unset; margin: unset; }
    .gall-slide .swiper .swiper-nav svg path { fill: #fff; }
    .gallery-view .data-gallery .youtube-wrap { position: relative; display: flex; padding-top: clamp(20rem, calc(100 / var(--container) * 100vw), 50rem); }
    .gallery-view .data-gallery .youtube-wrap iframe { width: 100%; height: auto; margin: 0 auto; aspect-ratio: 16/9; }

    .img-layer { position: fixed; inset: 0; background: rgba(0,0,0,0.9); display: none; align-items: center; justify-content: center; z-index: 9999; }
    .img-layer.active { display: flex; }
    .img-layer img { max-width: 90vw; height: 100vh; object-fit: contain;}
    .layer-close { position: absolute; top: 20px; right: 30px; font-size: 36px; color: #fff; cursor: pointer; }

    @media(max-width: 1024px){
      .gallery-view .img-grid .col2 { width: 100%; }
      .gallery-view .data-gallery section { gap: 50rem; padding-block: 50rem; }
      .gall-slide {height: auto}
      .gall-slide .swiper .swiper-slide {height: auto;}
    }
    @media(max-width: 767px){
      .gallery-view .data-gallery section { flex-direction: column; }
    }

  }

}

/* Press */
.press {
    position: relative;
    padding-block: 0rem clamp( 75rem, calc(150 / var(--container) * 100vw), 150rem );
    background: #000;
    
  h1, h2, h3, h4, h5, h6, p, span, a, strong, em, small {color: #fff !important;}
  * {color: #fff; fill: #fff; stroke: #fff;}
	.board-gallery .board-gallery-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 50rem 25rem; padding-block: clamp( 50rem, calc(60 / var(--container) * 100vw), 50rem ); }
	.board-gallery .board-gallery-list .img-group { background: #fff url(/assets/images/pages/img-placeholder.jpg) no-repeat 50% / cover; }
  .board-gallery .board-gallery-list .img-group .img {object-fit: cover;}
	.board-gallery .common-pagination { margin: 0; }
	.board-gallery .common-pagination .number { background: transparent;border: 2rem solid #222; }
	.board-gallery .common-pagination .number[aria-current="page"] { border-color: #fff; }
  .board-list-empty {margin-bottom: clamp(30rem, calc(60 / var(--container) * 100vw), 60rem);}
  .board-gallery-list .title {font-size: var(--font-size-18); font-weight:600; word-break: break-all;}

	@media(max-width: 1024px){
		.board-gallery .board-gallery-list { grid-template-columns: repeat(2, 1fr); }
	}
	@media(max-width: 767px){
		.board-gallery .board-gallery-list { gap: 30rem 10rem !important; }
	}

	@media(max-width: 1024px){
		
	}
	@media(max-width: 767px){
		
	}

  &.view {
      .content{max-width:1000px; width:100%; margin:auto;}
    padding-block: 50rem clamp(50rem, calc(100 / var(--container) * 100vw), 100rem);
    border-top: 1rem solid #ddd;

    .press-title { display: flex; justify-content: center;}
    .press-title h3 { font-family: var(--font-mont); font-size: var(--font-size-40); padding-bottom: 10rem; margin-bottom: 20rem; border-bottom: 1rem solid;}
    .post-title {font: 600 30rem var;text-align: center;display: block;margin-bottom: 50rem;}
    .content p { font-size: var(--font-size-18); }
    .content img { width: 100% !important; height:auto !important; padding-block: 30rem; }
    .navigation {display: flex;font-size: var(--font-size-20);margin-top: 50rem;flex-direction: column;}
    .navigation a { display: flex; gap: 20rem; padding: 20rem; border-block: 1rem solid; align-items: center; }
    .navigation a:hover { background: #3a3a3a; transition: all .3s; }
    .navigation a.prev { border-bottom: none; }
    .navigation a.prev i { transform: rotate(180deg); }
    .navigation a svg { max-width: 15rem; }
    .btn-invent { display: flex; justify-content: flex-end; padding-top: 30rem; }
    .btn-invent button { background: #222; color: #fff; display: flex; padding: 15rem 50rem; }

    @media(max-width: 1024px){
      
    }
    @media(max-width: 767px){
      
    }

  }

}

/* Contact */
.contact {
  position: relative;
  padding-block:0 clamp( 75rem, calc(150 / var(--container) * 100vw), 150rem );
  background: #000;

  .info {display: flex; justify-content:space-between; padding-top:20rem; margin-bottom: 50rem;}
  .info li:not(.line) {position: relative;font-size: var(--font-size-35); font-weight: 700; display: flex; align-items: center; gap: 10rem; justify-content: center; padding:10rem 0; color:#fff;}
  .info li i {font-style: unset; min-width: 60rem; color:#2e70ff;}
  .info li span{display:block; width:1px; height:100%; background:#fff;}
  .maps { position: relative; }
  .maps iframe { width: 100%; height:550rem;}
  .address { display: flex; padding-block: clamp( 50rem, calc(100 / var(--container) * 100vw), 100rem ); gap: 50rem; }
  .address address { width: 100%; display: flex; flex-direction: column; gap: 10rem; padding-left: 30rem; border-left: 1rem solid; font-size: var(--font-size-18); font-family: var(--font-mont); }
  .address address h3 { font-size: var(--font-size-30); }
  .address address span { font-weight: bold; color: #fff; }

  .map-column { display: flex; flex-direction: column; padding-top: 50rem; }
  .map-column .add { display: grid; grid-template-columns: 600rem 1fr; gap: 100rem; }
  .map-column .add:first-child { padding-bottom: 80rem; margin-bottom: 80rem; border-bottom: 1rem solid #ddd; }
  .map-column .add .address-detail { display: flex; flex-direction: column; gap: 20rem; font-size: var(--font-size-30); color:#fff;}
  .map-column .add .address-detail p { color: #929292; }

  @media(max-width: 1280px){
      .info li:not(.line){font-size: var(--font-size-25);}
      .maps iframe{height:450rem;}
    .map-column .add { grid-template-columns: 1fr; gap: 50rem; }
      .map-column .add .address-detail{font-size: var(--font-size-25);}
  }
  @media(max-width: 767px){
      .info { flex-direction: column; }
    .info li:not(.line) {justify-content: flex-start;border: none;padding: 15rem 20rem;gap: 0;border-bottom: 1rem solid #ddd;}
    .maps iframe { height: 300rem; }
    .address { flex-direction: column; }
      .map-column .add{gap:30rem;}
      .map-column .add:first-child{padding-bottom: 50rem; margin-bottom: 50rem;}
  }
}