@charset "UTF-8";
@import url("reset.css");

:root{
    /* 사용법 var(--color-brand); */
    --color-brand: #B40015;
}
#wrap {width: 100vw;}
body{position: relative; overflow-x: hidden; min-height: 100vh;
    @supports (-webkit-appearance:none) and (stroke-color: transparent) {
      min-height: -webkit-fill-available;
    } }
#hd_login_msg{display: none;}


/* header */
#header{position: fixed; top: 0; left: 0; width: 100%; height: 90px; z-index: 9999; box-sizing: border-box; background-color: transparent;}
#header.bg{background-color: #fff; box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;}
#header .header_inner{ position: relative; display: flex; justify-content: space-between; width: 100%; height: 100%; padding: 0 11.4583vw; box-sizing: border-box; border-bottom: 1px solid rgba(239,239,239,0);}
#header .header_inner .logo{z-index: 999;}
#header .header_inner .logo a{display: flex; align-items: center; height: 100%;}
#header .header_inner #nav{display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center;}
#header .header_inner #nav::before{content: ''; display: block; position: absolute; top: -100%; left: 0;  width: calc(100vw - 18px); height: calc(100% + 187px); background-color: #fff; z-index: -1; opacity: 0; visibility: hidden; -webkit-transition: 0.25s ease-out; -o-transition: 0.25s ease-out; transition: 0.25s ease-out; box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;}
#header.nav-hover .header_inner{border-bottom: 1px solid #efefef;}
#header.nav-hover .header_inner #nav::before { top: 0; opacity: 1; visibility: visible;}
#header .header_inner #nav>ul.gnb_wrap{display: flex; height: 100%;}
#header .header_inner #nav>ul.gnb_wrap>li{position: relative; padding: 0 48px; /* min-width: 172px; */}
#header .header_inner #nav>ul.gnb_wrap>li>a{display: flex; justify-content: center; align-items: center; width: 100%; height: 90px; font-weight: bold; color: #fff; font-size: 21px;}
#header.bg .header_inner #nav>ul.gnb_wrap>li>a{display: flex; justify-content: center; align-items: center; width: 100%; height: 90px; font-weight: bold; color: #111; font-size: 21px;}
#header.nav-hover .header_inner #nav>ul.gnb_wrap>li>a{position: relative; color: #323232; }
#header.nav-hover .header_inner #nav>ul.gnb_wrap>li>a:hover{ color: var(--color-brand);;}
#header.nav-hover .header_inner #nav>ul.gnb_wrap>li>a::after{content: ""; display: block; position: absolute; left: 50%; bottom: 0; width: 0; height: 1px; background: var(--color-brand); transition: width 0.3s ease 0s, left 0.3s ease 0s;}
#header.nav-hover .header_inner #nav>ul.gnb_wrap>li>a:hover::after{width: 100%; left: 0; }
#header .header_inner #nav>ul.gnb_wrap>li>ul.inner{position: absolute; width: 100%; left: 0; padding:25px 0 45px;}
#header .header_inner #nav>ul.gnb_wrap>li>ul.inner a{display: flex; justify-content: center; align-items: center; padding: 10px 0; font-size: 16px; /* font-weight: bold; */ color: #323232; /* letter-spacing: -0.07em; */}
#header .header_inner #nav>ul.gnb_wrap>li>ul.inner a:hover{color: var(--color-brand);;}
#header:not(.nav-hover) #nav>ul.gnb_wrap > li > a + ul {display: none;}
#header .header_inner .lang{position: absolute; top: 50%; right: 11.4vw; transform: translateY(-50%); z-index: 999;}
#header .header_inner .lang a{font-size: 18px;}
#header .header_inner .lang span{margin: 0 4px; font-size: 18px;}

/* 햄버거 아이콘 */
.menu_icon { display: none; position: absolute; top: 50%; right: 3.211vw; transform: translateY(-50%); width: 36px; height: 20px; z-index: 9999; } 
.menu_icon.sub.active span{ background-color: #fff;  } 
.menu_icon.active span{ background-color: #333;  } 
.menu_icon span { position: absolute; left: 50%; width: 100%; height: 2px; background: #fff; border-radius: 4px; transform:translate(-50%,0) rotate(0deg); transition: 0.2s ease-in-out; } 
#header.bg .menu_icon span { background-color: #111; }
.menu_icon span:nth-child(1) { top: 0px; } 
.menu_icon span:nth-child(2), 
.menu_icon span:nth-child(3) { top: 50%; transform: translate(-50%,-50%); } 
.menu_icon span:nth-child(4) { bottom: 0; } 
.menu_icon.active span:nth-child(1) { top: 50%; width: 0; transform: translate(-50%,-50%); }
.menu_icon.active span:nth-child(2) { transform:translate(-50%, -50%) rotate(45deg); } 
.menu_icon.active span:nth-child(3) { transform:translate(-50%, -50%) rotate(-45deg); } 
.menu_icon.active span:nth-child(4) { bottom: 50%; width: 0; transform: translate(-50%,50%); }


/*모바일 gnb*/
#moWrap>.header_inner{height: 90px; background-color: #fff;}
nav.mobile{ position: fixed !important; opacity: 0; transition: opacity 0.5s; /* transition: right .5s; */ right: -100vw; top:0; width: 100%; height: calc(100vh - 80px); z-index: 999; box-sizing: border-box;}
nav.mobile .mo_gnb_wrap{position: absolute; right: -100%; width: 100%; height: 100vh; background: rgba(25, 34, 48, 0.95); transition: right .5s;}
nav.mobile.active .mo_gnb_wrap{right: 0;}
nav.mobile .mo_gnb_wrap>li{width: 100%;}
nav.mobile .mo_gnb_wrap>li>.dep_1{display: flex; align-items: center; width: 100%; height: 60px; padding-left: 16px; border-bottom: 1px solid rgba(255,255,255,0.1); font-size: 18px; font-weight : bold; color: #fff; cursor: pointer;}
nav.mobile .mo_gnb_wrap>li>.dep_1 span{color: #fff;}
nav.mobile .mo_gnb_wrap>li>ul.dep_2_box{display: none; width: 100%;}
nav.mobile .mo_gnb_wrap>li>ul.dep_2_box.active{display: block;}
nav.mobile .mo_gnb_wrap>li>ul.dep_2_box li{display: flex; align-items: center; width: 100%; height: 48px; color: #222; border-bottom: 1px solid #e1e1e1; background: #fff;}
nav.mobile .mo_gnb_wrap>li>ul.dep_2_box li a{ display: flex; align-items: center; width: 100%; height: 100%; padding-left: 32px; box-sizing: border-box; font-size: 16px;}
nav.mobile.active{opacity: 1; right: 0;}

/* float */
.float_btn{position: fixed; right: 42px; bottom: 86px; width: 224px; height: 136px; z-index: 999; color: #fff;  background-color: rgba(0, 0, 0, 1); cursor: pointer;}
/* .float_btn .info:hover{background-color: rgba(0, 0, 0, 1);} */
.float_btn:hover .info{background-color: #133AF6;}
.float_btn:hover .info .text p{color: #fff;}
.float_btn:hover .top{background-color: #111;}
.float_btn .info{width: 100%; height: 96px; padding: 12px; box-sizing: border-box;  color: #fff;}
.float_btn .info a{display: flex; flex-wrap: wrap; justify-content: space-between;  width: 100%;}
.float_btn .info .text{display: flex; flex-direction: column; justify-content: space-between; height: 70px;}
.float_btn .info .text span{font-size: 16px; color: #fff;}
.float_btn .info .text p{font-size: 18px; font-weight: bold; color: #B40015;}
.float_btn .top{width: 100%; height: calc(100% - 96px); background-color: rgba(180,0,21,0.9);}
.float_btn .top span{display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; color: #fff; font-size: 18px; font-weight: bold;}

/* 메인비주얼 */
#wrap .main_visual{width: 100%; height: 100vh;}
#wrap .main_visual .visual{width: 100%; height: 100%;}
#wrap .main_visual .visual .swiper-slide{position: relative;}
#wrap .main_visual .visual .swiper-slide .slide_img{position: relative; width: 100%; height: 100%; background-size: cover; background-position: center;}
/* #wrap .main_visual .visual .swiper-slide .slide_img.one{background-image: url(../img/dao/mainvisual01.png);} */
#wrap .main_visual .visual .swiper-slide video{position: relative; width: 100%; height: 100vh; object-fit: cover; aspect-ratio: 16 / 9; filter: brightness(0.4);}
#wrap .main_visual .visual .swiper-slide .main_text{display: flex; flex-direction: column; align-items: center; width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
#wrap .main_visual .visual .swiper-slide .main_text .text{display: flex; flex-direction: column; align-items: center; text-align: center;}
#wrap .main_visual .visual .swiper-slide .main_text .text span{font-size: 62px; line-height: 72px; font-weight: bold; color: #fff;}
#wrap .main_visual .visual .swiper-slide .main_text .text span strong{font-size: 48px; color: var(--color-brand);}
#wrap .main_visual .visual .swiper-slide .main_text .text p{margin-top: 20px; font-size: 20px; line-height: 36px; color: #fff;}
#wrap .main_visual .visual .swiper-slide .main_text a{display: flex; justify-content: center; align-items: center;  margin-top: 30px; padding: 12px 16px; font-size: 18px; background-color: var(--color-brand); color: #fff; border-radius: 130px;}
#wrap .main_visual .visual .swiper-slide .main_text .img_wrap{display: none;}
/* #wrap .main_visual .visual .swiper-slide .main_text .img_wrap img{width: 100%;} */
/* #wrap .main_visual .visual .swiper-slide .img_wrap{position: absolute; right: 11.4583vw; top: 50%; transform: translateY(-50%); width: 24%;}
#wrap .main_visual .visual .swiper-slide .img_wrap img{width: 100%;}
#wrap .main_visual .visual .swiper-slide.two .img_wrap{right: 20.4583vw;}
#wrap .main_visual .visual .swiper-slide.three .img_wrap{right: 20.4583vw;} */
#wrap .main_visual .visual .swiper-slide .main_text_left a{display: flex; justify-content: center; align-items: center; width: 150px; height: 50px; margin-top: 30px; padding: 12px 0; font-size: 24px; background-color: var(--color-brand); color: #fff; border-radius: 130px;}


/* swiper */
.main_visual .swiper-pagination-bullets{bottom: 108px !important;}
.main_visual .swiper-pagination-bullet{position: relative;  width: 300px !important; height: 2px !important; margin: 0 !important; border-radius: 0 !important; background-color: #fff !important; opacity: 1 !important;}
.main_visual .swiper-pagination-bullet span{position: absolute; left: 0; display: flex; padding: 12px; box-sizing: border-box; font-size: 20px; font-weight: 500; color: #fff;}
.main_visual .swiper-pagination-bullet-active{height: 3px !important; background-color: var(--color-brand) !important;}
.main_visual .swiper-pagination-bullet-active span{color: var(--color-brand);}

.section01 .swiper-pagination-bullets{top: 0 !important; left: 0; width: auto !important; height: fit-content;}
.section01 .swiper-pagination-bullet{width: auto !important; margin-right: 48px !important; background-color: transparent; height: fit-content;}
.section01 .swiper-pagination-bullet span{font-size: 24px;}
.section01 .swiper-pagination-bullet-active span{font-weight: bold; color: #B40015;}

/* 섹션 공통 */
.section{overflow: hidden; width: 1500px; margin: 0 auto; padding: 150px 0; box-sizing: border-box;}
.section .tit_wrap{display: flex; flex-direction: column; align-items: center;}
.section .tit_wrap.left{align-items: start;}
.section .tit_wrap .sec_tit{font-size: 26px; font-weight: bold; color: var(--color-brand);}
.section .tit_wrap .sec_subtit{ font-size: 20px; font-weight: 500; margin-top: 6px;} 
.section .tit_wrap .sec_subtext{ font-size: 36px; font-weight: 500; margin-top: 48px; text-align: center;} 
/* 공통 버튼 */
a.view{display: flex; justify-content: center; align-items: center; padding: 16px 30px; box-sizing: border-box; border: 1px solid #111; border-radius: 400px; font-size: 16px;}
a.view.white{border-color: #fff; color: #fff;}



.section01{width: 1600px; padding: 150px 0; border-bottom: 1px solid #e5e5e5;}
.section01 .product{width: 100%; height: 100%; padding: 80px 0 0; box-sizing: border-box;}
.section01 .product .swiper-slide{display: flex; justify-content: space-between; position: relative; gap: 96px;}
.section01 .product .swiper-slide .slide_img{overflow: hidden; width: 800px; height: 460px; background-size: cover; background-position: center; border: 1px solid #f4f4f4; border-radius: 30px;}
.section01 .product .swiper-slide .slide_img.one{background-image: url(../img/dao/main_pro01.png);}
.section01 .product .swiper-slide .slide_img.two{background-image: url(../img/dao/main_pro02.png);}
.section01 .product .swiper-slide .slide_img.three{background-image: url(../img/dao/main_pro03.png);}
.section01 .product .swiper-slide .slide_img.four{background-image: url(../img/dao/main_pro04.png);}
.section01 .product .swiper-slide .slide_img.five{background-image: url(../img/dao/main_pro05.png);}
.section01 .product .swiper-slide .main_text{position: relative; display: flex; flex-direction: column; justify-content: center; width: 50%;}
.section01 .product .swiper-slide .main_text .inner{position: absolute; top: 50%; transform: translateY(-50%);}
.section01 .product .swiper-slide .main_text .text span{display: block; font-size: 48px; font-weight: bold; margin-bottom: 20px;}
.section01 .product .swiper-slide .main_text .text p{font-size: 20px; line-height: 32px; margin-bottom: 50px;}
.section01 .product .swiper-slide .main_text a{padding: 12px 16px; background-color: var(--color-brand); color: #fff; font-size: 20px; border-radius: 100px; box-sizing: border-box;}
.section01 .product .swiper-slide.swiper-slide-active .inner{animation-name: mainTitle; animation-duration: 1.8s;}
@keyframes mainTitle {
    00%{opacity: 0; top: 60%;}
    60%{opacity: 0; top: 60%;}
    100%{opacity: 1; top: 50%;}    
}

.section02{width: 100%; background-color: #fff;}
.section02 .sec_inner{display: flex; flex-direction: column; justify-content: space-between; align-items: center; width: 1600px; margin: 0 auto;}
.section02 .sec_inner .tit{text-align: center;}
.section02 .sec_inner .tit span{font-size: 20px; font-weight: bold; color: #B40015;}
.section02 .sec_inner .tit p{margin-top: 36px; font-size: 42px; font-weight: bold;  line-height: 56px;}
.section02 .sec_inner .itemBox{display: flex; flex-direction: row; flex-wrap: wrap; gap: 26px; margin-top: 82px; width: 100%;}
.section02 .sec_inner .itemBox .item{display: flex; flex-direction: column; justify-content: space-between; width: calc((100% - 52px)/3); height: 322px; padding: 36px 36px 42px; border-radius: 10px; background-color: #F2F3F6; box-sizing: border-box;}
.section02 .sec_inner .itemBox .item .top{display: flex; justify-content: space-between;}
.section02 .sec_inner .itemBox .item .top span{font-size: 32px; font-weight: bold;}
.section02 .sec_inner .itemBox .item .bot{display: flex; justify-content: space-between; gap: 32px;}
.section02 .sec_inner .itemBox .item .bot a{display: flex; justify-content: center; align-items: center; width: 50%; background-color: #1A1A1A; border-radius: 300px; padding: 16px 16px; font-size: 18px; color: #fff; box-sizing: border-box;}
.section02 .sec_inner .itemBox .item .bot a:hover{background-color: #2F77E2;}


.section03{width: 100%; padding: 0;}
.section03 video{position: relative; width: 100%; height: 460px; object-fit: cover; aspect-ratio: 16 / 9;}


.section04{width: 100%; background-color: #fff;}
.section04 .sec_inner{overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; align-items: center; width: 1200px; margin: 0 auto;}
.section04 .sec_inner .tit{text-align: center;}
.section04 .sec_inner .tit span{font-size: 20px; font-weight: bold; color: #B40015;}
.section04 .sec_inner .tit p{margin-top: 36px; font-size: 42px; font-weight: bold; line-height: 56px;}
.section04 .sec_inner .itemBox{display: flex; flex-direction: column; align-items: center;}
.section04 .sec_inner .itemBox .mainlogo{margin-top: 82px;}
.section04 .sec_inner .itemBox .marquee .img_wrap img{width: 80%; opacity: 0.8;}

:root {
    --size: clamp(10rem, 1rem + 40vmin, 30rem);
    --gap: calc(var(--size) / 22);
    --duration: 120s;
    --scroll-start: 0;
    --scroll-end: calc(-100% - var(--gap));
  }
  

  
  .marquee {
    display: flex;
    overflow: hidden;
    user-select: none;
    /* gap: var(--gap); */
    gap: 100px;
    mask-image: linear-gradient(
      var(--mask-direction, to right),
      hsl(0 0% 0% / 0),
      hsl(0 0% 0% / 1) 20%,
      hsl(0 0% 0% / 1) 80%,
      hsl(0 0% 0% / 0)
    );
  }
  
  .marquee__group {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    /* gap: var(--gap); */
    gap: 100px;
    min-width: 100%;
    animation: scroll-x var(--duration) linear infinite;
  }
  
  @media (prefers-reduced-motion: reduce) {
    .marquee__group {
      animation-play-state: paused;
    }
  }
  
  .marquee--vertical {
    --mask-direction: to bottom;
  }
  
  .marquee--vertical,
  .marquee--vertical .marquee__group {
    flex-direction: column;
  }
  
  .marquee--vertical .marquee__group {
    animation-name: scroll-y;
  }
  
  .marquee--reverse .marquee__group {
    animation-direction: reverse;
    animation-delay: -3s;
  }
  
  @keyframes scroll-x {
    from {
      transform: translateX(var(--scroll-start));
    }
    to {
      transform: translateX(var(--scroll-end));
    }
  }
  
  @keyframes scroll-y {
    from {
      transform: translateY(var(--scroll-start));
    }
    to {
      transform: translateY(var(--scroll-end));
    }
  }
  
  /* Element styles */
  .marquee svg {
    display: grid;
    place-items: center;
    width: var(--size);
    fill: var(--color-text);
    background: var(--color-bg-accent);
    aspect-ratio: 16/9;
    padding: calc(var(--size) / 10);
    border-radius: 0.5rem;
  }
  
  .marquee--vertical svg {
    aspect-ratio: 1;
    width: calc(var(--size) / 1.5);
    padding: calc(var(--size) / 6);
  }
  
  /* Parent wrapper */
  .wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    margin: auto;
    max-width: 100vw;
    margin-top: 94px;
  }
  
  .wrapper--vertical {
    flex-direction: row;
    height: 100vh;
  }
  
  /* Toggle direction button */
  .toggle {
    --size: 3rem;
    position: relative;
    position: fixed;
    top: 1rem;
    left: 1rem;
    width: var(--size);
    height: var(--size);
    font: inherit;
    text-align: center;
    cursor: pointer;
    outline: none;
    border: none;
    border-radius: 50%;
    color: inherit;
    background-color: var(--color-bg-accent);
    z-index: 1;
  }
  
  .toggle:focus-visible {
    box-shadow: 0 0 0 2px var(--color-text);
  }
  
  .toggle span {
    position: absolute;
    display: inline-block;
    top: 50%;
    left: calc(100% + 0.4em);
    width: fit-content;
    white-space: nowrap;
    transform: translateY(-50%);
    animation: fade 400ms 4s ease-out forwards;
    user-select: none;
  }
  
  .toggle svg {
    --size: 1.5rem;
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--size);
    height: var(--size);
    fill: currentcolor;
    transform: translate(-50%, -50%);
    transition: transform 300ms cubic-bezier(0.25, 1, 0.5, 1);
  }
  
  .toggle--vertical svg {
    transform: translate(-50%, -50%) rotate(-90deg);
  }
  
  @keyframes fade {
    to {
      opacity: 0;
      visibility: hidden;
    }
  }
  
  .section05{width: 100%; background-color: #fff; padding: 0;}
  .section05 .sec_inner{position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; align-items: center; width: 100%; margin: 0 auto;}
  .section05 .sec_inner .text{position: absolute; left: 11.4583vw; top: 50%; transform: translateY(-50%);}
  .section05 .sec_inner .text span{font-size: 36px; font-weight: bold; color: #fff;}
  .section05 .sec_inner .text p{font-size: 20px; margin-top: 24px; color: #fff;}



footer{width: 100%; padding: 56px 0;z-index: 999; border-top: 1px solid #e5e5e5; }
footer .ft_inner{width: 100%; padding: 0 11.4583vw; box-sizing: border-box;}
footer .ft_top{display: flex; flex-direction: column; justify-content: space-between;}
footer .ft_top .ft_nav{width: 100%;}
footer .ft_top .ft_nav ul.ft_gnb{display: flex; width: 100%;}
footer .ft_top .ft_nav ul.ft_gnb>li{position: relative; margin-bottom: 46px;  padding: 0 24px; font-size: 14px; color: #232323;}
footer .ft_top .ft_nav ul.ft_gnb>li:after{position: absolute; right: 0; top: 50%; content: ""; width: 1px; height: 8px; background-color: #232323; transform: translateY(-50%);}
footer .ft_top .ft_nav ul.ft_gnb>li:first-child{padding-left: 0;}
footer .ft_bot{margin-top: 30px;}
footer .ft_bot div {margin-bottom: 4px;}
footer .ft_bot div p{display: inline-block; margin-left: 12px; font-size: 14px; color: #232323;}
footer .ft_bot div p:first-child{margin-left: 0;}
footer .ft_bot div.copy{margin-top: 82px; font-size: 14px; color: #232323;}




@media screen and (max-width:1600px){
    #header .header_inner{padding: 0 3.211vw;}
    #header .header_inner #nav{display: none;}
    .menu_icon { display: block;}
    .section{width: 100%;}
    .section01 .product{width: 88%;}
    .section01 .product .swiper-slide .slide_img{width: 50%;}
    .section01 .product .swiper-slide .main_text{width: calc(50% - 100px);}
    .section01 .product .swiper-slide{width: 100% !important;}
    .section02 .sec_inner{width: 88%;}
    .section02 .sec_inner .text_wrap{width: 50%;}
    .section02 .sec_inner .img_wrap{width: 50%;}
    .section02 .sec_inner .img_wrap img{width: 100%;}
    .section02 .sec_inner .itemBox .item .bot{flex-wrap: wrap;}
    .section02 .sec_inner .itemBox .item .bot a{width: 100%;}
    .section03{width: 100%;}
    .section04 .sec_inner{width: 88%;}
    .section05 .sec_inner{width: 100%;}
    footer .ft_inner {padding: 0 3.211vw;}
    
}
@media screen and (max-width:1400px){
  .section02 .sec_inner .itemBox .item .top span{font-size: 28px;}
}

@media screen and (max-width:1024px){
    .section{padding: 100px 0;}
    .section01{padding: 100px 0;}
    .section03{padding: 0;}
    .section05{padding: 0;}
    #wrap .main_visual .visual .swiper-slide .main_text .text span{font-size: 42px;}
    #wrap .main_visual .visual .swiper-slide .main_text_left .text span{font-size: 42px;}
    #wrap .main_visual .visual .swiper-slide .main_text .text p{font-size: 18px;}
    #wrap .main_visual .visual .swiper-slide .main_text a{font-size: 18px;}
    #wrap .main_visual .visual .swiper-slide .main_text_left a{font-size: 18px;}
    .main_visual .swiper-pagination-bullet{width: 220px !important;}
    .section01 .swiper-pagination-bullet{margin-right: 24px !important;}
    .section01 .swiper-pagination-bullet span{font-size: 18px;}
    .section01 .product .swiper-slide{flex-direction: column; gap: 48px; align-items: center;}
    .section01 .product .swiper-slide .slide_img{width: 70%;}
    .section01 .product .swiper-slide .main_text{width: 100%; margin-left: 0; justify-content: unset; margin-bottom: 36px;}
    .section01 .product .swiper-slide .main_text .inner{position: relative; top: unset; transform: translateY(0);}
    .section02 .sec_inner{flex-wrap: wrap;}
    .section02 .sec_inner .text_wrap{width: 100%; margin-bottom: 36px;}
    .section02 .sec_inner .img_wrap{width: 100%;}
    .section02 .sec_inner .itemBox{flex-direction: column; align-items: center;}
    .section02 .sec_inner .itemBox .item{width: 60%;}
    
}

@media screen and (max-width:768px){
    #header .header_inner .logo a img{width: 60%;}
    .menu_icon{width: 24px;}
    #wrap .main_visual .visual .swiper-slide .main_text{transform: translate(-50%,-60%);}
    #wrap .main_visual .visual .swiper-slide .main_text_left{width: 100%; align-items: center; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center;}
    #wrap .main_visual .visual .swiper-slide .main_text .text{order: 2;}
    #wrap .main_visual .visual .swiper-slide .main_text .text span{font-size: 36px; line-height: 48px;}
    #wrap .main_visual .visual .swiper-slide .main_text_left .text span{font-size: 36px;}
    
    #wrap .main_visual .visual .swiper-slide .main_text_left a{width: auto; padding: 0 36px;}
    #wrap .main_visual .visual .swiper-slide .main_text .img_wrap{display: block; order: 1;}
    #wrap .main_visual .visual .swiper-slide .main_text a{order: 3;}
    .main_visual .swiper-pagination-bullet{width: calc(88% / 3) !important;}
    .main_visual .swiper-pagination-bullet span{padding: 8px 6px; font-size: 16px;}
    .main_visual .swiper-pagination-bullets{display: none;}
    .section01 .product .swiper-slide .main_text .text span{font-size: 36px;}
    .section01 .product .swiper-slide .main_text .text p{font-size: 18px;}
    .section01 .swiper-pagination-bullets{display: flex; flex-wrap: wrap;}
    .section01 .swiper-pagination-bullet{margin-bottom: 12px !important;}
    .section01 .product{padding: 100px 0 0;}
    .section01 .product .swiper-slide .slide_img{width: 100%;}
    .section02 .sec_inner .text_wrap .text span{font-size: 36px;}
    .section02 .sec_inner .text_wrap .text p{font-size: 18px; line-height: 32px;}
    footer .ft_top .ft_nav ul.ft_gnb>li{padding: 0 12px; font-size: 12px;}
    footer .ft_bot div:nth-child(2){display: flex; flex-direction: column;}
    /* footer .ft_bot div:nth-child(3){display: flex; flex-direction: column;} */
    footer .ft_bot div:nth-child(2) p{margin-left: 0;}
    footer .ft_bot div:nth-child(3) p:last-child{margin-left: 0;}
    footer .ft_bot div:nth-child(2) p:nth-child(1){margin-bottom: 10px;}
    /* footer .ft_bot div:nth-child(3) p:nth-child(1){margin-bottom: 10px;}
    footer .ft_bot div:nth-child(3) p:nth-child(2){margin-bottom: 10px;} */
    footer .ft_bot div{margin-bottom: 10px;}
    footer .ft_bot div p{line-height: 22px;}
    .section02 .sec_inner .itemBox .item{width: 100%;}
    .section02 .sec_inner .itemBox .item .bot{flex-direction: column;}
    .section02 .sec_inner .itemBox .item .bot a{width: unset;}
    .section05 .sec_inner .text{width: 80%; left: 50%; transform: translate(-50%,-50%);}
    .section05 .sec_inner .text span{font-size: 22px;}
    .section05 .sec_inner .text p{font-size: 16px;}
}

@media screen and (max-width:475px){
    .section01 .swiper-pagination-bullet{margin-right: 16px !important;}
    #wrap .main_visual .visual .swiper-slide .main_text .text{width: 90%;}
    #wrap .main_visual .visual .swiper-slide .main_text .text span{font-size: 36px; line-height: 46px;}
    .section01 .product .swiper-slide .slide_img{height: 320px;}
    .section01 .product .swiper-slide .main_text .text p br{display: none;}
    #wrap .main_visual .visual .swiper-slide .main_text .text p br{display: none;}
    .float_btn{right: unset; bottom: 0; width: 100%; display: none;}
    .float_btn:hover .info{background-color: #000;}
    .float_btn:hover .info .text p{color: #B40015;}
    .float_btn:hover .top{background-color: #B40015;}

    .section01 .product .swiper-slide .main_text .text span{font-size: 28px;}
    .section01 .product .swiper-slide .main_text .text p{font-size: 16px;}
    .section01 .product .swiper-slide .main_text a{font-size: 18px;}

    .section02 .sec_inner .tit span{font-size: 16px;}
    .section02 .sec_inner .tit p{font-size: 24px; line-height: 32px;}
    .section02 .sec_inner .tit p br{display: none;}
    .section02 .sec_inner .itemBox .item .top span{font-size: 22px;}
    .section02 .sec_inner .itemBox .item .top img{width: 22px; height: 22px;}
    .section02 .sec_inner .itemBox .item .bot a{font-size: 16px;}

    .section04 .sec_inner .tit span{font-size: 16px;}
    .section04 .sec_inner .tit p{font-size: 24px; line-height: 32px;}
}