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

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

 @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;
     box-sizing: border-box;
     font-family: 'GMarketSans';
     color: #34343c;
 }

 html,
 body {
     width: 100%;
     height: 100%;
     overflow: hidden;
     font-family: Arial, sans-serif;
 }




 /*  */
 /* nav */
 /*  */

 header {
     width: 100%;
     height: 100%;
     position: fixed;
     z-index: 100;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     pointer-events: none;
 }

 header a {
     pointer-events: auto;
     /* nav 링크만 클릭 가능 */
 }


 .nav {
     max-width: 1200px;
     width: 100%;
     height: 80px;
     margin: 0 auto;
     /* border: 1px solid red; */
     display: flex;
     justify-content: center;
     align-items: center;
 }


 .nav ul {
     display: flex;
     justify-content: center;
     list-style: none;
     gap: 50px;
 }

 .nav ul li a {
     font-size: 15px;
     font-style: italic;
     text-decoration: none;
     color: #333;
     transition: all 0.2s;
     padding: 0 2px;
 }

 .nav ul li a:hover,
 .nav ul li a.active {
     background: #333;
     color: #ffffff;
     border-radius: 5px;
 }



 /*  */
 /* 홈버튼 */
 /*  */
 .home-btn {
     width: 50px;
     height: 113px;
     position: fixed;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: space-between;
     right: 2.2%;
     bottom: 7%;
     z-index: 999;
 }


 .home2 {
     width: 48px;
     height: 48px;
     border-radius: 50px;
     background-color: rgba(255, 255, 255, 0.757);
     border: 1px solid rgb(65, 65, 65);
 }

 .home2 a {
     width: 100%;
     height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .home2 img {
     width: 55%;
 }


 .btn {
     width: 48px;
     height: 48px;
     border-radius: 50px;
     background-color: rgba(255, 255, 255, 0);
     border: 1px solid rgba(65, 65, 65, 0);
     display: flex;
     justify-content: center;
     align-items: center;
 }



 /* ===== container ===== */
 .container {
     width: 100%;
     height: 100%;
     transition: transform 0.8s ease;
     transform-style: preserve-3d;
 }

 /* ===== section ===== */
 section {
     width: 100%;
     height: 100vh;
     background-size: cover;
     /* 꽉 채우기 */
     background-position: center;
     /* 가운데 정렬 */
     background-repeat: no-repeat;
     /* 반복 제거 */
 }


 .wrap {
     width: 100%;
     height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .p1 {
     background-image: url("../img/video_bg01.jpg");
 }

 .p2 {
     background-image: url("../img/video_bg02.jpg");
 }

 .p3 {
     background-image: url("../img/video_bg03.jpg");
 }

 .p4 {
     background-image: url("../img/");
 }


 /* ===== 섹션별 설정 ===== */
 section .wrap {
     display: flex;
     flex-direction: column;
     gap: 19px;
     padding-top: 45px;
 }





 /*비디오 크기 조절*/
 section .video {
     width: 720px;
     max-width: 100%;
     aspect-ratio: 16 / 9;
     border: 0;
 }

 .tool_editing {
     display: flex;
     flex-direction: row;
     gap: 40px;
 }

 .tool_editing2 {
     display: flex;
     flex-direction: row;
     gap: 20px;
 }

 section h4 {
     font-size: 15px;
     font-weight: 300;
     text-align: center;
 }

 .wrap span {
     font-weight: 500;
 }

 .wrap .notice {
     font-size: 13px;
     color: rgb(40, 40, 203);
     font-weight: 300;
 }





 .reels {
     position: relative;
     width: 100%;
     max-width: 1300px;
     padding: 40px 0 60px;
 }

 .reels-track {
     display: flex;
     gap: 24px;
     padding: 0 70px;
     overflow-x: hidden;
     scroll-behavior: smooth;
     margin-top: 30px;
 }

 /* 카드 */
 .reels-item {
     flex: 0 0 265px;
     height: 560px;
     background: #d8d8d800;
     border-radius: 12px;
 }

 /* 버튼 */
 .reels-btn {
     position: absolute;
     top: 45%;
     transform: translateY(-50%);
     width: 44px;
     height: 44px;
     border-radius: 50%;
     border: 1px solid rgba(188, 188, 188, 0.973);
     background: rgba(0, 0, 0, 0.6);
     color: #fff;
     font-size: 24px;
     cursor: pointer;
     z-index: 999;
 }

 .reels-prev {
     left: 12px;
 }

 .reels-next {
     right: 12px;
 }

 .reels-btn:disabled {
     opacity: 0.3;
     cursor: default;
 }

 /* Pagination */
 .reels-pagination {
     display: flex;
     justify-content: center;
     gap: 8px;
     margin-top: 24px;
 }

 .reels-dot {
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background: #ccc;
     cursor: pointer;
 }

 .reels-dot.active {
     background: #000;
 }

 /* 릴스 영상 사이즈 조절 */
 .wrap2 {
     width: 265px;
     aspect-ratio: 9 / 16;
     display: flex;
     flex-direction: column;
     align-items: start;
 }

 .wrap2 h2 {
     font-size: 15px;
     font-weight: 400;
     margin-bottom: 4px;
 }

 .wrap2 h3 {
     font-size: 13px;
     font-weight: 300;
 }

 .wrap2 span {
     font-weight: 400;
 }

 .wrap2 .video {
     width: 100%;
     height: 100%;
     border: 0;
 }

 .wrap2 h4 {
     font-size: 14px;
 }

 .h4_m {
     display: none;
 }





 /* ===== 페이지네이션 ===== */
 .pagination {
     position: fixed;
     top: 50%;
     right: 40px;
     transform: translateY(-50%);
     display: flex;
     flex-direction: column;
     gap: 18px;
     z-index: 100;
 }

 .pagination button {
     background: none;
     border: none;
     font-size: 18px;
     cursor: pointer;
     font-weight: bold;
     color: #333;
     transition: all 0.3s;
 }

 .pagination button.active,
 .pagination button:hover {
     color: #b41a1a;
     font-weight: bold;
 }



 .p3 h4,
 .p3 h3,
 .p3 h2,
 .p3 span,
 .p3 h4 span {
     color: #fff !important;
 }





 /*  */
 /* 모바일 */
 /*  */


 @media (max-width: 767px) {
     body {
         width: 100vw;
         height: 100vh;
     }


     header {
         width: 100%;
         height: 90px;
         position: fixed;
         z-index: 1000;
         display: flex;
         justify-content: center;
         align-items: center;
     }


     .nav {
         width: 90%;
         margin: 0 auto;
         display: flex;
         justify-content: center;
         align-items: center;
     }


     .nav ul {
         width: 100%;
         display: flex;
         justify-content: space-between;
         list-style: none;
         gap: 30px;
     }

     .nav ul li a {
         display: inline-block;
         /* 또는 block */
         line-height: 10px;
         font-size: 10px;
         padding: 0 2px;
         line-height: 1.5;
     }

     .nav ul li a:hover,
     .nav ul li a.active {
         background: #333;
         color: #ffffff;
         border-radius: 5px;
     }


     /* container */
     section {
         width: 100%;
         height: 100vh;
     }

     section .wrap {
     gap: 15px;
 }

     .h4_W {
         display: none;
     }

     .h4_m {
         display: block;
     }

     .h4_m>.notice {
         display: block;
         margin-top: 15px;
     }

     .tool_editing {
         width: 80%;
         height: 67px;
         flex-direction: column;
         gap: 3px;
     }

     .tool_editing h4 {
        font-size: 11px;
     }



     /* 릴스부분 */
     /* 영상 화면중앙에 오도록 */
     .reels-track {
         scroll-snap-type: x mandatory;
     }

     .reels-item {
         scroll-snap-align: center;
     }


     .wrap2 h2 {
         font-size: 15px;
         font-weight: 400;
         margin-bottom: 4px;
     }

     .wrap2 h3 {
         font-size: 13px;
         font-weight: 300;
     }

     .wrap2 span {
         font-weight: 400;
     }

     .wrap2 .video {
         width: 100%;
         height: 100%;
         border: 0;
     }

     .wrap2 h4 {
         font-size: 13px;
     }

     .wrap2 .tool_editing {
         height: auto;
         flex-direction: row;
         gap: 15px
     }





     /* 하단 홈버튼 */
     .home-btn {
         width: 30px;
         height: 66px;
         right: 2.8%;
         bottom: 5%;
     }

     .home2 {
         width: 30px;
         height: 30px;
     }

     .btn {
         width: 30px;
         height: 30px;
     }

     .btn a {
         text-align: center;
         text-decoration: none;
         font-size: 6px;
         font-weight: 700;
         padding: 11px 2px;
     }



     /* ===== 페이지네이션 ===== */
     .pagination {
         display: none;
     }

     .p1 {
         background-image: url("../img/video_bg01_2.jpg");
     }

     .p2 {
         background-image: url("../img/video_bg02_2.jpg");
     }

     .p3 {
         background-image: url("../img/video_bg03_2.jpg");
     }

     .p4 {
         background-image: url("../img/");
     }


 }