@charset "UTF-8";
/*-------------------------------------------------
title       : 레이아웃 반응형
Author      : ㅈㅁㅈ
Create date : 2026-06-11
-------------------------------------------------*/
@media (max-width: 1380px) {
  #gnb .depth1 > li > a {
    padding: 0 2.5rem;
  }
}
@media (max-width: 1280px) {
  #gnb {
    display: none;
  }
  #header.type2 #gnb .depth1 > li > a {
    font-size: 3.5rem;
  }
  #header.type2 #gnb .depth1 > li > a::after {
    display: none;
  }
  .section1 .group, .list1 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 10rem;
  }
  .section1 .group .item2 .arr span, .list1 .item2 .arr span {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    left: 50%;
    width: 15rem;
    height: 10rem;
    padding: 0;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    clip-path: initial !important;
    text-align: right;
    -webkit-box-pack: right;
        -ms-flex-pack: right;
            justify-content: right;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .section1 .group .item2 .arr span::before, .list1 .item2 .arr span::before {
    position: absolute;
    right: 0;
    top: 50%;
    width: 12rem;
    -webkit-transform: rotate(90deg) translateX(calc(50% - 1.5rem));
            transform: rotate(90deg) translateX(calc(50% - 1.5rem));
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    background-position-x: 0;
    -webkit-mask-image: -webkit-gradient(linear, left top, right top, color-stop(30%, black), color-stop(90%, transparent));
    -webkit-mask-image: linear-gradient(to right, black 30%, transparent 90%);
            mask-image: -webkit-gradient(linear, left top, right top, color-stop(30%, black), color-stop(90%, transparent));
            mask-image: linear-gradient(to right, black 30%, transparent 90%);
  }
  .section1 .group .item2 .arr span::after, .list1 .item2 .arr span::after {
    bottom: auto;
    top: -2rem;
    width: 13rem;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
    -webkit-transform-origin: left top;
            transform-origin: left top;
  }
  .section1 .group .item2 .arr span:first-child, .list1 .item2 .arr span:first-child {
    bottom: calc(100% + 1.5rem);
  }
  .section1 .group .item2 .arr span:last-child, .list1 .item2 .arr span:last-child {
    right: auto;
    bottom: auto;
    left: 50%;
    top: calc(100% + 1.5rem);
  }
  .section1 .group .item2 .arr span:last-child::before, .list1 .item2 .arr span:last-child::before {
    -webkit-transform: rotate(-90deg) translate(calc(50% + 3rem), 100%);
            transform: rotate(-90deg) translate(calc(50% + 3rem), 100%);
  }
}
@media (max-width: 767px) {
  #header {
    min-height: 0;
  }
  #header.type2 {
    top: 3rem;
    max-width: calc(100% - 6rem);
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
  }
  #header.type2 #gnb .depth1 {
    overflow: hidden;
    overflow-y: auto;
    top: calc(100% + 3rem);
    height: calc(100dvh - 10rem);
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    text-align: left;
  }
  #header.type2 #gnb .depth1 > li {
    width: 100%;
    padding: 3rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
  }
  #header.type2 #gnb .depth1 > li > a {
    padding-left: 0;
  }
}
@media (max-width: 500px) {
  #footer {
    padding-top: 15rem;
  }
  #siteinfo .logo {
    position: absolute;
    left: 0;
    top: 6.4rem;
  }
  .related {
    position: static;
    width: 100%;
  }
  .section1 .group .item, .list1 .item {
    width: 25rem;
    height: 25rem;
    font-size: 2rem;
  }
  .section1 .group .item img, .list1 .item img {
    height: 8rem;
  }
  .section1 .group .item2, .list1 .item2 {
    width: 36rem;
    height: 36rem;
    border-width: 0.5rem;
  }
  .section1 .group .item2 .label, .list1 .item2 .label {
    width: 15rem;
    height: 15rem;
    font-size: 1.8rem;
  }
  .section1 .group .item2 .arr span, .list1 .item2 .arr span {
    width: 11rem;
    font-size: 1.4rem;
  }
}