@charset "utf-8";
html { scroll-behavior: smooth; font-size: 16px; } 
body { font-size: 1rem; } 



.main { width: 100vw; } 
.header { position: fixed; width: 100%; z-index: 100; } 
.header_contents { width: calc(100% - 8.75rem); margin: 2.5rem auto 0; } 
.header_contents a { color: #fff; } 
.h1_logo { background: url(../images/common/h1_logo.svg) no-repeat; background-size: 100% 100%; display: inline-block; width: 11.875rem; height: 2.0625rem; z-index: 999; } 
.btn_nav,
.total_nav .close { background-repeat: no-repeat; background-position: center; background-size: 100% 100%; background-color: transparent; display: inline-block; width: 1.875rem; height: 1.25rem; margin-left: 2.8125rem; } 
.btn_nav { background-image: url(../images/common/hamberger.svg); } 
.total_nav { display: none; position: fixed; top: 0; right: 0; left: 0; height: 100vh; z-index: 101; background: rgba(0, 0, 0, 1); } 
.total_nav > nav { width: calc(100% - 8.75rem); margin: 3.25rem auto 0; } 
.total_navWrap { position: absolute; top: 12.5rem; left: 18.75rem; width: calc(100% - 37.5rem); } 
.total_nav .close { background-image: url(../images/common/btn_close.svg); position: absolute; top: 3.25rem; right: 4.375rem; } 
/* .megamenu { position: absolute; top: 200px; left: 200px; } */
.megamenu li { margin-bottom: 5rem; } 
.megamenu li a { font-size: 3.75rem; font-weight: 700; -webkit-text-stroke: 0px transparent; margin-left: 0; -webkit-text-fill-color: #fff; transition: -webkit-text-stroke-width 300ms, -webkit-text-stroke-color 300ms, -webkit-text-fill-color 300ms, margin-left 300ms; position: relative; } 
.megamenu li a::after {content: ""; position: absolute; right: 15px; top: 50%; width: 100%; height: 2px; background: var(--purple); opacity: 0; transition: .4s;}
/* .total_nav > div { padding: .75rem 0; border-top: 1px solid #ebebeb; } */
.megamenu li a:hover { -webkit-text-stroke: 2px #fff; -webkit-text-fill-color: transparent; margin-left: 1.875rem;}
.megamenu li a:hover:after,
.megamenu li a:focus:after {right: 1.5625rem; opacity: 1;}

.quick { position: fixed; right: 5rem; top: 50%; z-index: 10; transform: translateY(-50%); } 
.quick a { display: block; width: 0.625rem; height: 0.625rem; border-radius: 0.625rem; background-color: rgba(255, 255, 255, 0.8); margin-bottom: 0.625rem; transition: all 0.2s; } 
.quick a:hover,
.quick a.active { background-color: var(--purple); } 

.swiper-pagination { position: fixed !important; right: 5rem !important; top: 50% !important; z-index: 10 !important; transform: translateY(-50%) !important; } 
.swiper-pagination span { display: block; width:5px; height: 1.875rem; border-radius: 2px; background-color: rgba(255, 255, 255, 0.8); margin-bottom: 0.625rem !important; transition: all 0.3s; opacity: 1; } 
.swiper-pagination span:hover,
.swiper-pagination span.swiper-pagination-bullet-active { background-color: var(--purple); } 
.section01 { position: relative; width: 100%; /* height: 100vh;  */overflow: hidden; } 
.video_main { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100vw; /* height: 100vh;  */object-fit: cover; z-index: -1; overflow: hidden; } 
/* .main_video { width: 100%; height: 100vh; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: max-content; } */
.section02,
.section03,
.footer { position: relative; width: 100%; height: 100vh; background-repeat: no-repeat; background-size: cover; background-position: center; overflow: hidden; } 
.section02 .h2,
.section03 .h2 { /* font-family: 'GmarketSans';  */font-size: 6.5rem; font-weight: 700; text-align: center; color: var(--white); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: max-content; transition: all 300ms;} 
.section02 .h2 > br,
.section03 .h2 > br { display: none;}
.section02 .h2 span,
.section03 .h2 span {-webkit-text-stroke: 2px #fff; -webkit-text-fill-color: transparent; /* text-transform: uppercase; */ }

.section01 { background-image: url(../images/main/visual_video.mp4); } 
.section02 { background-image: url(../images/main/visual_01.png); } 
.section03 { background-image: url(../images/main/visual_02.png); } 

.footer_contents {/*  width: calc(100% - 12.5rem); height: calc(100vh - 250px); margin: 125px auto; */width: 100%; height: 100vh; /* padding: 20.625rem 20.9375rem 0 12.5rem; */ background-color: var(--black); align-items: center; justify-content: space-around; column-gap: 1.875rem;} 
.h1_logoFooter { background: url(../images/common/footer_logo.svg) no-repeat; background-size: 100% 100%; display: inline-block; width: 3.3125rem; height: 3.3125rem; z-index: 1; } 

.footer_nav .gnb a,
.copyright dd,
.copyright dd a { color: var(--white); } 
.footer_nav .gnb li { margin-bottom: 5rem; } 
.footer_nav .gnb a { font-size: 2.5rem; line-height: 1; -webkit-text-stroke: 0px transparent; margin-left: 0; -webkit-text-fill-color: #fff; transition: -webkit-text-stroke-width 300ms, -webkit-text-stroke-color 300ms, -webkit-text-fill-color 300ms, margin-left 300ms; position: relative;} 
.footer_nav .gnb a::after {content: ""; position: absolute; right: 0.9375rem; top: 50%; width: 100%; height: 2px; background: var(--purple); opacity: 0; transition: .4s;}
.footer_nav .gnb a:hover { -webkit-text-stroke: 2px #fff; -webkit-text-fill-color: transparent; margin-left: 1.875rem;}
.footer_nav .gnb a:hover:after,
.footer_nav .gnb a:focus:after {right: 1.5625rem; opacity: 1;}

.copyright dt { color: var(--gray8c); font-size: 1.25rem; margin-bottom: 0.75rem; } 
.copyright dd { font-size: 1.0625rem; margin-bottom: 3.75rem; }