@charset "utf-8";

     @font-face {
         font-family: 'GMarketSans';
         src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
         font-weight: 700;
         font-display: swap;
     }

     * {
         margin: 0;
         padding: 0;
         list-style: none;
         box-sizing: border-box;
         text-decoration: none;
         font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
     }

     img {
         display: block;
         max-width: 100%;
     }

     a {
         display: block;
         color: #fff;
     }

     .sns {
         position: fixed;
         z-index: 99;
         right: 2rem;
         top: 50%;
         transform: translateY(-50%);
         display: flex;
         flex-direction: column;
         align-items: center;
         gap: 1.1rem;
     }

     .sns li {
         opacity: 0.8;
         transition: 0.2s;
     }

     .sns li:hover {
         opacity: 1;
     }

     .sns li a {
         position: relative;
     }

     .sns li a::before {
         position: absolute;
         content: attr(data-label);
         color: #fff;
         background: #121212c2;
         padding: .25rem 1rem;
         font-size: 1rem;
         font-weight: 500;
         top: 50%;
         right: 120%;
         transform: translateY(-50%);
         border-radius: .25rem;
         opacity: 0;
         transition: opacity .2s ease;
         pointer-events: none;
         text-wrap: nowrap;
     }

     .sns li a:hover::before {
         opacity: 1;
     }

     main {
         position: relative;
         overflow: hidden;
         background: #000;
         height: 100dvh;
     }

     .bg {
         position: absolute;
         height: 100%;
         inset: 0;
         z-index: 0;
         overflow: hidden;
     }

     .bg img {
         animation: scale 18s linear forwards;
         width: 100%;
         height: 100%;
         scale: 1.2;
     }

     @keyframes scale {
         to {
             scale: 1;
         }
     }

     .cont {
         position: absolute;
         z-index: 1;
         inset: 0;
         text-align: center;
         margin: 0 auto;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
     }

     .cont-wrap {
         display: flex;
         flex-direction: column;
         justify-content: flex-end;
         align-items: flex-end;
         max-width: 84%;
         gap: 4vh;
     }

     .cont-wrap h2 {
         font-family: "Noto Serif KR", serif;
         font-weight: 400;
         font-size: clamp(1.5rem, 2.7vw, 3.24rem);
         padding-inline: 2rem;
     }

     b {
         font-family: inherit;
     }


     .logo {
         max-width: 20rem;
         margin-bottom: 2rem;
     }

     .symbol {
         max-width: 10rem;
         padding-block: 4rem;
     }

     .symbol img {
         display: none;
     }

     .cont .desc {
         font-size: 2rem;
         padding: 1rem 10%;
         background: linear-gradient(90deg, transparent, #3f3f3fb9, transparent);
     }

     .cont .desc p {
         color: #fff;
     }

     .bt-wrap {
         position: relative;
         display: flex;
         justify-content: space-between;
         align-items: center;
         padding-inline: 10%;
         padding-block: 2rem;
     }

     .wrap {
         width: 100%;
         display: flex;
         flex-wrap: wrap;
         padding: 2rem 1rem;
         gap: 1rem;
         z-index: 5;
     }

     .wrap>div {
         flex: 1;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
         overflow: hidden;
         gap: 0.5rem;
     }

     .wrap>div span {
         color: #424242;
         font-size: 1.5rem;
         display: block;
         font-weight: 700;
         margin-bottom: 0.45rem;
     }

     .wrap>div h3 {
         font-family: 'GMarketSans';
         font-weight: 700;
         /* color: #bfc5bf; */
         color: #000;
         font-size: 2.625rem;
         letter-spacing: -0.02vw;
         opacity: 0.15;
         backdrop-filter: blur(4px);
         transition: 0.3s;
     }

     .wrap>div:hover h3 {
         opacity: 1;
     }

     .wrap>div img {
         scale: 0.8;
         display: block;
         margin: 0 auto;
         transition: 1s;
     }

     .wrap>div .arrow-wrap {
         height: 6rem;
         padding-block: 1rem;
         display: flex;
         flex-direction: column;
         align-items: center;
     }

     .wrap>div:hover .arrow {
         overflow: hidden;
         opacity: 0;
         display: none;
     }

     .wrap>div .down {
         opacity: 0;
         height: 2rem;
         overflow: hidden;
     }

     .wrap>div:hover .down {
         height: 5rem;
         opacity: 1;
     }

     .wrap>div .imgbox {
         position: relative;
         overflow: hidden;
         min-height: 70vh;
         height: 100%;
         z-index: 1;
     }

     .wrap>div .imgbox::after {
         position: absolute;
         content: '';
         inset: 0;
         z-index: 2;
         transition: 0.7s;
         background: radial-gradient(transparent, black);
     }

     .wrap>div .imgbox:hover::after {
         opacity: 0;
         transition: 0.5s;
     }

     .wrap>div .imgbox .title {
         position: absolute;
         z-index: 3;
         display: flex;
         align-items: center;
         bottom: 0;
         font-weight: 300;
         font-size: clamp(1.375rem, 2.5vw, 3rem);
         padding: max(2rem, 3%);
         gap: 1rem;
     }


     .wrap>div ul {
         display: flex;
         flex-wrap: wrap;
         align-items: center;
         min-height: 20vh;
         margin-bottom: 1.5rem;
         transition: 0.7s;
         padding: 1rem;
         opacity: 0;
         background: linear-gradient(45deg, transparent, white, transparent);
     }

     .wrap>div ul.active {
         opacity: 1;
     }

     .wrap>div ul li {
         min-width: 25%;
     }

     .wrap>div ul li a {
         padding: 1rem;
         font-size: clamp(14px, 1.146vw, 1.625rem);
         font-weight: 500;
         line-height: 1.3;
         text-align: center;
         color: black;
         border-radius: 50rem;
     }

     .wrap>div ul li a:hover {
         transition: 0.3s;
         text-decoration: underline;
     }

     /* <!-- Google 번역 --> */

     #google_translate_section {
         position: fixed;
         z-index: 999;
         right: 2rem;
         top: 1rem;
     }

     #google_translate_view {
         position: relative;
         display: inline-flex;
         min-width: 200px;
         height: 2.5rem;
         margin: 5px;
         border: 1px solid #ccc;
         border-radius: .25rem;
         padding: 10px;
         background-color: #fff;
         cursor: pointer;
     }

     #google_translate_view::before {
         position: absolute;
         content: 'Select Language';
         display: block;
         top: 50%;
         left: 35px;
         transform: translateY(-50%);
         font-size: 14px;
         width: 100%;
         color: #333;
         letter-spacing: -.5px;
     }

     #google_translate_view::after {
         position: absolute;
         content: '<>';
         font: 1rem "Consolas", monospace;
         color: #666;
         transform: rotate(90deg);
         right: 10px;
         cursor: pointer;
     }

     #google_translate_box {
         display: none;
         position: absolute;
         top: 50px;
         left: 5px;
         z-index: 1801;
     }

     #translation-links {
         min-width: calc(200px - .5rem);
         margin: 0 .5rem;
         background-color: #fff;
         display: inline-block;
         border: 1px solid #ccc;
         border-radius: .25rem;
     }

     #translation-links>li {
         padding: .5rem 1rem;
         font-size: .8rem;
         transition: background-color .2s;
         letter-spacing: -.5px;
     }

     #translation-links>li:hover {
         background-color: #f1f1f1;
     }

     #translation-links>li>a {
         display: flex;
         justify-content: space-between;
         color: #333;
         font-weight: 400;
     }

     #translation-links>li img.flag {
         width: 20px;
         height: 20px;
         border-radius: 50%;
         overflow: hidden;
         object-fit: cover;
         border: 1px solid #eee;
     }

     #goog-gt-tt {
         display: none !important;
     }



     /* mobile */
     @media all and (max-width:812px) {
         .cont {
             padding-block: 2rem;
         }

         .cont-wrap {
             justify-content: center;
             flex-direction: column-reverse;
             align-items: center;
             max-width: 100%;
             width: 100%;
             gap: 0;
             margin: 0 auto;
         }

         .bt-wrap::before {
             display: none;
         }

         .bt-wrap>div img {
             scale: 0.9;
         }

         .wrap {
             height: auto;
             padding: 3rem;
             flex-direction: column;
         }

         .wrap>div {
             gap: 1rem;
             max-width: 80%;
         }

         .wrap>div ul {
             display: none;
         }

         .wrap>div .imgbox {
             min-height: 380px;
         }

         .wrap>div ul li {
             width: 33%;
         }

         .wrap>div ul li a {
             text-align: left;
             /* text-wrap: nowrap; */
         }

         .wrap>div .imgbox .title {
             width: 100%;
             justify-content: space-between;
             padding: 0.75rem 1.25rem;
         }

         .bg-video {
             min-height: 380px;
         }

         .logo {
             max-width: 5rem;
         }

         .symbol {
             padding-block: 2rem;
         }

         .symbol img {
             display: block;
         }

         .cont .desc {
             font-size: 1rem;
         }

         .wrap>div .down {
             display: none;
         }

         .wrap>div:hover .arrow {
             opacity: 1;
             display: block;
         }

         .wrap>div span {
             font-size: 1.25rem;
         }

         .wrap>div h3 {
             font-size: 2rem;
         }

         .sns {
             right: 1rem;
         }

         #google_translate_section {
             right: 1rem !important;
         }

         #google_translate_view {
             min-width: auto !important;
             height: 3rem !important;
         }

         .sns {
             width: 100%;
             padding-inline: 1rem;
             left: 0;
             justify-content: center;
             bottom: 1rem;
             top: auto;
             transform: none;
             display: flex;
             flex-direction: row;
             gap: 1rem;
         }

         .sns li a {
             max-width: 3rem;
         }

         .sns li a::before {
             display: none;
         }

         #google_translate_view::after,
         #google_translate_view::before {
             display: none !important;
         }

         #google_translate_box {
             left: -250% !important;
         }
     }