/* image_show_wrap 공통 */
.image_show_wrap,
.image_show_wrap2{
    position: relative;
    top: 0px;
    left: 0%;
    width: 100%;
}
.image_show_wrap{overflow: hidden; animation-duration: 1.4s;}
.image_show_wrap2{animation-duration: 1.4s;}

.show_img01{animation-name: show_img01;}
@keyframes show_img01{
    0%{opacity: 0; transform: translate3d(-100%, 0, 0);}
}
.show_img02{animation-name: show_img02;}
@keyframes show_img02{
    0%{opacity: 0; transform: translate3d(100%, 0, 0);}
}
.show_img03{animation-name: show_img03;}
@keyframes show_img03{
    0%{opacity: 0; transform: translate3d(100%, 0, 0);}
}
.show_img04{animation-name: show_img04;}
@keyframes show_img04{
    0%{opacity: 0; transform: translate3d(-100%, 0, 0);}
}
.show_img05{animation-name: show_img05;}
@keyframes show_img05{
    0%{opacity: 0; transform: translate3d(0, 100%, 0);}
}
.show_img06{animation-name: show_img06;}
@keyframes show_img06{
    0%{opacity: 0; transform: translate3d(0, -100%, 0);}
}
/* image_show_wrap 공통 */

/* ------------------------------------- section ------------------------------------- */
.section{text-align:center;}
/* header start */
header{
  position: fixed;
  width:100%;
  height:80px;
  z-index: 9999;
  top:0;
  left:0;
  transition: all .3s ease-in-out;
}
.sub_header{
  position: fixed;
  width:100%;
  height:80px;
  z-index: 9999;
  top:0;
  left:0;
  transition: all .3s ease-in-out;
  background-color: #fff;
}
.sub_header3{
  position: fixed;
  width:100%;
  height:80px;
  z-index: 9999;
  top:0;
  left:0;
  transition: all .3s ease-in-out;
}

nav{
    width:90%;
    height:80px;
    margin:0 auto;
    position: relative;
    /* overflow: hidden; */
}
nav .logo a{
  display: block;
  background: url(../img/logo_w.png) no-repeat;
  background-size: 90px;
  width:90px;
  height:30px;
  position: absolute;
  top:50%;
  transform: translateY(-50%);
  left:0;
  z-index: 9999;
}
/* sub top */
nav .sub_logo a{
  display: block;
  background: url(../img/logo_b.png) no-repeat;
  background-size: 90px;
  width:90px;
  height:30px;
  position: absolute;
  top:50%;
  transform: translateY(-50%);
  left:0;
  z-index: 9999;
}
/* sub top */

/* sub top3 */
nav .sub_logo3 a{
  display: block;
  background: url(../img/logo_b.png) no-repeat;
  background-size: 90px;
  width:90px;
  height:30px;
  position: absolute;
  top:50%;
  transform: translateY(-50%);
  left:0;
  z-index: 9999;
}
/* sub top3 */

nav .menu_on{
  position: absolute;
  top:50%;
  transform: translateY(-50%);
  right:0;
  z-index: 9999;
}
nav .menu_on a{display: block; width:30px; height:30px; position: relative;}
nav .menu_on a .t{width:100%; height:2px; background-color: #fff; position: absolute; top:5px; left:0; transition: all .3s ease-in-out; transform-origin: left center;}
nav .menu_on a .m{width:50%; height:2px; background-color: #fff; position: absolute; top:50%; transform:translateY(-50%); left:0; transition: all .3s ease-in-out; transform-origin: left center;}
nav .menu_on a .b{width:100%; height:2px; background-color: #fff; position: absolute; bottom:5px; left:0; transition: all .3s ease-in-out; transform-origin: left center;}

nav .menu_on.on a .t{transform: rotate(45deg); opacity: 0;}
nav .menu_on.on a .m{opacity: 0;}
nav .menu_on.on a .b{transform: rotate(-45deg); opacity: 0;}

/* sub top */
nav .sub_menu_on{
  position: absolute;
  top:50%;
  transform: translateY(-50%);
  right:0;
  z-index: 9999;
}
nav .sub_menu_on a{display: block; width:30px; height:30px; position: relative;}
nav .sub_menu_on a .t{width:100%; height:2px; background-color: #000; position: absolute; top:5px; left:0; transition: all .3s ease-in-out; transform-origin: left center;}
nav .sub_menu_on a .m{width:50%; height:2px; background-color: #000; position: absolute; top:50%; transform:translateY(-50%); left:0; transition: all .3s ease-in-out; transform-origin: left center;}
nav .sub_menu_on a .b{width:100%; height:2px; background-color: #000; position: absolute; bottom:5px; left:0; transition: all .3s ease-in-out; transform-origin: left center;}

nav .sub_menu_on.on a .t{transform: rotate(45deg); opacity: 0;}
nav .sub_menu_on.on a .m{opacity: 0;}
nav .sub_menu_on.on a .b{transform: rotate(-45deg); opacity: 0;}
/* sub top */

.menu_wrap{
  position: fixed;
  right:-100%;
  width:235px;
  height:100vh;
  z-index: 999999999;
  transition: all .3s ease-in-out;
  background-color: rgba(0, 0, 0, 0.4);
}
.menu_wrap.on{right:0;}

.menu_wrap .nav{
  width:100%;
  height:100px;
  margin:0 auto;
  position: absolute;
  top:0;
  left:0;
}
.menu_wrap .nav .logo a{
display: block;
width:78px;
height:65px;
position: absolute;
top:50%;
transform: translateY(-50%);
left:5%;
z-index: 9999;
}
.menu_wrap .nav .close_off{
position: absolute;
top:50%;
transform: translateY(-50%);
right:100px;
z-index: 9999;
}
.menu_wrap .nav .close_off a{display: block; width:25px; height:30px; position: relative;}
.menu_wrap .nav .close_off a .t{width:100%; height:2px; background-color: #fff; position: absolute; top:5px; left:0; transition: all .3s ease-in-out; transform-origin: left center; transform: rotate(45deg);}
.menu_wrap .nav .close_off a .m{width:50%; height:2px; background-color: #fff; position: absolute; top:50%; transform:translateY(-50%); left:0; transition: all .3s ease-in-out; transform-origin: left center; opacity: 0;}
.menu_wrap .nav .close_off a .b{width:100%; height:2px; background-color: #fff; position: absolute; bottom:5px; left:0; transition: all .3s ease-in-out; transform-origin: left center; transform: rotate(-45deg);}

.menu_wrap .nav .close_off.on a .t{transform: rotate(0deg);}
.menu_wrap .nav .close_off.on a .m{opacity: 1;}
.menu_wrap .nav .close_off.on a .b{transform: rotate(0deg);}


/* sub top */
.menu_wrap .sub_nav{
  width:100%;
  height:100px;
  margin:0 auto;
  position: absolute;
  top:0;
  left:0;
}
.menu_wrap .sub_nav .logo a{
display: block;
width:78px;
height:65px;
position: absolute;
top:50%;
transform: translateY(-50%);
left:5%;
z-index: 9999;
}
.menu_wrap .sub_nav .close_off{
  position: absolute;
  top:50%;
  transform: translateY(-50%);
  right:100px;
  z-index: 9999;
  }
  .menu_wrap .sub_nav .close_off a{display: block; width:25px; height:30px; position: relative;}
  .menu_wrap .sub_nav .close_off a .t{width:100%; height:2px; background-color: #fff; position: absolute; top:5px; left:0; transition: all .3s ease-in-out; transform-origin: left center; transform: rotate(45deg);}
  .menu_wrap .sub_nav .close_off a .m{width:50%; height:2px; background-color: #fff; position: absolute; top:50%; transform:translateY(-50%); left:0; transition: all .3s ease-in-out; transform-origin: left center; opacity: 0;}
  .menu_wrap .sub_nav .close_off a .b{width:100%; height:2px; background-color: #fff; position: absolute; bottom:5px; left:0; transition: all .3s ease-in-out; transform-origin: left center; transform: rotate(-45deg);}
  
  .menu_wrap .sub_nav .close_off.on a .t{transform: rotate(0deg);}
  .menu_wrap .sub_nav .close_off.on a .m{opacity: 1;}
  .menu_wrap .sub_nav .close_off.on a .b{transform: rotate(0deg);}
/* sub top */



.menu_wrap .button{margin-top:200px;}
.menu_wrap .button .sidemenu{margin-bottom:5px;}
.menu_wrap .button .sidemenu p{position:relative; padding:15px 20px; font-size:16px; font-weight:700; color:#fff; transition:all 0.5s;}
.menu_wrap .button .sidemenu p .arrow{position:absolute; top:23px; right:30px; width:10px; height:10px; background:url('../img/mplus.png') no-repeat center; transition:all 0.3s;}
.menu_wrap .button .sidemenu p.open .arrow{transform:rotate(135deg);}
.menu_wrap .button .sidemenu p a{color:#fff; display: block; font-weight: 200; transition: all .3s ease-in-out;}
.menu_wrap .button .sidemenu p a.on{color:#bf0b2c;}
.menu_wrap .button .sidemenu ul{display:none; padding:5px 0 20px;}
.menu_wrap .button .sidemenu ul li{margin-bottom:5px;}
.menu_wrap .button .sidemenu ul li a{display:block; padding:15px 35px; font-size:14px; font-weight:200; color:#fff; transition: all 0.3s ease-in-out;}
.menu_wrap .button .sidemenu p a:hover{color:#bf0b2c;}
.menu_wrap .button .sidemenu ul li a:hover{color:#bf0b2c;}

.menu_wrap .sns{margin-top:20px;}
.menu_wrap .sns ul{
  display: flex;
  align-items: center;
  justify-content: start;
  gap:10px;
  padding-left: 30px;
}
.menu_wrap .sns a{display: block;}
.menu_wrap .sns a img{width:40px; transition: all .3s ease-in-out;}
.menu_wrap .sns a:hover img{transform: scale(1.1);}


/* main_visual swiper start */
/* visual swiper start */
.main_visual{
  width:100vw;
  height:100vh;
  position: relative;
}
.main_visual .swiper {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.main_visual .swiper-slide {
  width:100%;
  height:100%;
  text-align: center;
  font-size: 18px;
  background: #fff;
  overflow: hidden;

/* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.main_visual .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 이미지를 화면에 맞게 잘라서 꽉 차게 함 */
}

.main_visual .swiper .swiper-pagination span{
  margin:0 5px;
  width:10px;
  height:10px;
  border-radius: 50%;
}
.main_visual .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  border:1px solid #fff;
  background: none;
  border-radius: 0;
  background-color: #fff;
}

.main_visual .swiper-pagination-bullet-active {
  opacity: 1;
  background: #fff;
}
.main_visual .swiper .swiper-pagination {
  position: absolute;
  text-align: center;
  -webkit-transition: .3s opacity;
  -o-transition: .3s opacity;
  transition: .3s opacity;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  z-index: 10;
  left:50%;
  bottom:100px;
  transform: translate(-50%, 100%);
}
/* .main_visual .swiper-button-prev,
.main_visual .swiper-container-rtl .swiper-button-next {
  left: 75px;
  right: auto;
  width:20px;
  color:#fff
}
.main_visual .swiper-button-next,
.main_visual .swiper-container-rtl .swiper-button-prev {
  right: 75px;
  left: auto;
  width:20px;
  color:#fff
} */

.main_visual .swiper-slide > img{width:100%; transform:scale(1.1); transition:all 5s ease;}
.main_visual .swiper-slide.swiper-slide-active > img.zoom{transform:scale(1);}


/* .main_visual .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after{font-size:44px;}
.main_visual .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after{font-size:44px;}

.main_visual .swiper-button-next,
.main_visual .swiper-button-prev {
  position: absolute;
  top: 50%;
  width: 40px;
  height: 60px;
  margin-top: -22px;
  z-index: 10;
  cursor: pointer;
  background-size: 40px 60px;
  background-position: center;
  background-repeat: no-repeat
} */
/* main_visual swiper end */

/* ------------------------------------- section ------------------------------------- */
/* ------------------------------------- section ------------------------------------- */

.footer{
  position: fixed;
  bottom:0;
  left:0;
  width:100%;
  padding:15px 0;
  background-color: transparent;
  z-index: 999;
}
.footer p{
  font-size:13px;
  line-height: 26px;
  color:#fff;
  text-align: center;
}


.sub_footer{padding:15px 0; background-color: #333;}
.sub_footer{
  font-size:13px;
  color:#ccc;
  text-align: center;
}

/* ------------------------------------- section ------------------------------------- */

/* top_btn */
.topbtn{
    position: fixed;
    bottom:100px;
    right:60px;
    z-index:999;
    width:50px;
    height:50px;
    border-radius: 40px;
    background-color:  #000;
    transition: all 1s ease;
    transition-delay:2s;
    display: none;
}

.topbtn img{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    width:30px;
}

.topbtn:hover{
    transition: all 0.5s ease;
    background-color: #151515;
}
/* top_btn */