@charset "utf-8";
*{ list-style: none; margin: 0; padding: 0; border: 0; box-sizing: border-box; text-decoration: none; font-family: "Pretendard", sans-serif; line-height: 1.5; font-weight: 400; letter-spacing: -0.5px; color: #000;}
select::-ms-expand{ display: none;}
html{ width: 100%; height: 100%;}
body{ overflow: hidden; -webkit-text-size-adjust: none;}
@media(max-width: 767px){
    html{ font-size: calc(100vw / 30);}
}


.home_logo{ position: fixed; z-index: 100; top: 50px; left: calc(50% - 400px);}
.home_logo img{ display: block; height: 100px;}
@media(max-width: 1500px){
    .home_logo{ position: fixed; z-index: 100; top: 30px; left: 50px;}
}
@media(max-width: 767px){
    .home_logo{ top: 2rem; left: 2rem;}
    .home_logo img{ height: 5rem;}
}

.home_btn{ display: flex; grid-gap: 10px; position: fixed; z-index: 100; bottom: 100px; right: calc(50% - 400px); left: calc(50% - 400px);}
.home_btn a{ display: flex; justify-content: center; align-items: center; grid-gap: 20px; width: 100%; height: 60px; border-radius: 30px; background: #d40000; cursor: pointer;}
.home_btn a p{ font-size: 18px; font-weight: 700; color: #FFF;}
.home_btn a svg{ width: 20px; height: 20px;}
.home_btn a svg path{ fill: #FFF;}
.home_btn a:last-child{ background: #4b5562;}
@media(max-width: 1500px){
    .home_btn{ bottom: 50px; right: 50px; left: 50px;}
}
@media(max-width: 767px){
    .home_btn{ flex-direction: column; grid-gap: 0.5rem; bottom: 2rem; right: 2rem; left: 2rem;}
    .home_btn a{ grid-gap: 0.5rem; height: 3.5rem; border-radius: 3rem;}
    .home_btn a p{ font-size: 1.1rem;}
    .home_btn a svg{ width: 1.1rem; height: 1.1rem;}
}

.home_bg{ display: flex; justify-content: center; align-items: center; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: #000;}
.home_bg:before{ content: ""; position: fixed; z-index: 10; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(180deg, rgba(80 80 80/100%), rgba(0 0 0/20%), rgba(0 0 0/100%));}
.home_bg img{ display: block; width: auto; height: 100%; transition: all 1s;}
.home_bg.bg01 img{ transform: translate(300px,0) scale(0.8);}
.home_bg.bg02 img{ transform: translate(150px,0) scale(0.9);}
.home_bg.bg03 img{ transform: translate(0,0) scale(1);}
@media(max-width: 767px){
    .home_bg.bg01 img{ transform: translate(14rem,0) scale(0.8);}
    .home_bg.bg02 img{ transform: translate(7rem,0) scale(0.9);}
    .home_bg.bg03 img{ transform: translate(0,0) scale(1);}
}


.home_visual{ overflow: hidden; position: fixed; z-index: 10; top: 0; right: 0; bottom: 0; left: 0;}
.home_visual .swiper-wrapper{}
.home_visual .swiper-wrapper .swiper-slide{}
.home_visual .swiper-wrapper .swiper-slide .text{ display: flex; position: absolute; z-index: 20; top: 200px; right: calc(50% - 300px); bottom: 0; left: calc(50% - 400px);}
.home_visual .swiper-wrapper .swiper-slide .text{ line-height: 1.2; font-size: 60px; font-weight: 900; color: #FFF; opacity: 0; transform: translate(50px,0); transition: all .3s;}
.home_visual .swiper-wrapper .swiper-slide .text.on{ opacity: 1; transform: translate(0,0) scale(1); transition: all 0.5s;}

.home_visual_page{ display: flex; grid-gap: 10px; position: fixed; z-index: 100; right: inherit !important; left: calc(50% - 400px) !important; top: 400px !important; bottom: initial !important; margin: 0; width: auto !important;}
.home_visual_page .swiper-pagination-bullet{ display: flex; justify-content: center; align-items: center; margin: 0 !important; width: 10px; height: 10px; border-radius: 10px; border: 0; background: rgba(255 255 255/50%); opacity: 1; transition: all .3s;}
.home_visual_page .swiper-pagination-bullet-active{ width: 30px; background: #FFF;}
@media(max-width: 1500px){
    .home_visual .swiper-wrapper .swiper-slide .text{ top: 180px; right: 50px; bottom: 0; left: 50px;}
    .home_visual_page{ left: 50px !important; top: 370px !important;}
}
@media(max-width: 767px){
    .home_visual .swiper-wrapper .swiper-slide .text{ top: 9rem; right: 2rem; left: 2rem;}
    .home_visual .swiper-wrapper .swiper-slide .text{ font-size: 2rem;}

    .home_visual_page{ grid-gap: 0.5rem; left: 2rem !important; top: 17rem !important;}
    .home_visual_page .swiper-pagination-bullet{ width: 0.5rem; height: 0.5rem; border-radius: 0.5rem;}
    .home_visual_page .swiper-pagination-bullet-active{ width: 2rem;}
}