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

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

/* ------------------------------------- section ------------------------------------- */
	/* Centered texts in each section
	* --------------------------------------- */
	.section{text-align:center;}
	/* Backgrounds will cover all the section
	* --------------------------------------- */
	#section1,
	#section2,
	#section3,
	#section4,
  #section5{
    background-size: cover;
    background-attachment: fixed;
    /* visual 사이즈에 맞춰서 max-width 맞춰줌  reset에서는 width 100%*/
    max-width: 800px;
    margin:0 auto;
  }
  

	/* Defining each sectino background and styles
	* --------------------------------------- */
	#section1{background-image: url(../../img/section1/section1_1_bg.jpg);}
	#section2{background-image: url(../../img/section2/section2_1_bg.jpg);}
	#section3{background-image: url(../../img/section3/section3_bg.jpg);}
  #section4{background-image: url(../../img/section4/section4_bg.jpg);}
  
	/* * --------------------------------------- * */
  /* #fp-nav ul li a.active span, .fp-slidesNav ul li a.active span, #fp-nav ul li:hover a.active span, .fp-slidesNav ul li:hover a.active span{background-color: #202e03;}  네비 엑티브 색상 */
  #fp-nav ul li a span, .fp-slidesNav ul li a span{background-color: #fff;}

/* header start */
header{position: fixed; width:100%; height:100px; z-index: 9999; top:0; left:0; transition: all .3s ease-in-out;}
header.on{background-color: rgba(0, 0, 0, 0.4);}
.fp-viewing-1 header,
.fp-viewing-2 header,
.fp-viewing-3 header{background-color: rgba(0, 0, 0, 0.4);}

nav{
    width:100%;
    height:100px;
    margin:0 auto;
    position: relative;
    /* overflow: hidden; */
}
nav .logo a{
  display: block;
  background: url(../../img/logo_w.png) no-repeat;
  background-size: 65px;
  width:65px;
  height:54px;
  position: absolute;
  top:50%;
  transform: translateY(-50%);
  left:5%;
  z-index: 9999;
}
nav .menu_on{
  position: absolute;
  top:50%;
  transform: translateY(-50%);
  right:5%;
  z-index: 9999;
}
nav .menu_on a{display: block; width:40px; height:40px; 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);}
nav .menu_on.on a .m{opacity: 0;}
nav .menu_on.on a .b{transform: rotate(-45deg);}

.manu_wrap{
  position: fixed;
  width:100%;
  height:100vh;
  z-index: 999999999;
  display: none;
}
.manu_wrap .nav{
  width:100%;
  height:100px;
  margin:0 auto;
  position: absolute;
  top:0;
  left:0;
}
.manu_wrap .nav .logo a{
display: block;
width:78px;
height:65px;
position: absolute;
top:50%;
transform: translateY(-50%);
left:5%;
z-index: 9999;
}
.manu_wrap .nav .close_off{
position: absolute;
top:50%;
transform: translateY(-50%);
right:5%;
z-index: 9999;
}
.manu_wrap .nav .close_off a{display: block; width:40px; height:40px; position: relative;}
.manu_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);}
.manu_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;}
.manu_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);}

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

.manu_wrap ul{
  width:100%;
  display: flex;
  align-items: center;
}
.manu_wrap ul li{width:25%; height:100vh; transition: all 1s ease-in-out;}

.manu_wrap ul li a{
  position: relative;
  display: block;
  width:100%;
  height:100%;
}
.manu_wrap ul li a::after{
  position: absolute;
  content: '';
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 3;
  transition: all .3s ease-in-out;
}
.manu_wrap ul li a:hover::after{opacity: 0;}

.manu_wrap ul li a .main_menu{
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  transition: all .3s ease-in-out;
  z-index: 99;
  width:100%;
}
.manu_wrap ul li a .main_menu span{
  display: block;
  font-size:7px;
  font-weight: 800;
  color:#bf0b2c;
  text-align: center;
}
.manu_wrap ul li a .main_menu h3{
  font-size:14px;
  font-weight: 800;
  color:#fff;
  text-align: center;
  font-family: 'Noto Serif KR', serif; 
}
.manu_wrap ul li a img{
  position: absolute;
  width:100%;
  height:100vh;
  object-fit: cover;
  transition: all .3s ease-in-out;
}
/* main_visual swiper start */

/* visual swiper start */
.main_visual{
  width:100%;
  height:100%;
  /* max-width:800px; */
  margin:0 auto;
  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:60px;
  height:3px;
}
.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:150px;
  transform: translate(-50%, 100%);
}
.main_visual .swiper-button-prev,
.main_visual .swiper-container-rtl .swiper-button-next {
  left: 0px;
  right: auto;
  width:20px;
  color:#fff
}
.main_visual .swiper-button-next,
.main_visual .swiper-container-rtl .swiper-button-prev {
  right: 0px;
  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:24px;}
.main_visual .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after{font-size:24px;}

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

/* ------------------------------------- section ------------------------------------- */
.main_visual .slide_right_box{
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  width:300px;
  height:480px;
  z-index: 9;
  transition: all .3 ease-in-out;
  /* background-color: rgba(0, 0, 0, 0.4); */
}

.scrollline{
  position: fixed;
  bottom: 65px;
  left:50%;
  z-index: 99999;
}
.scrollline span{
  display: block;
  width:2px;
  height:35px;
  background-color: rgba(255, 255, 255, 0.27);
  position: relative;
  overflow: hidden;
}
.scrollline span::before{
  position: absolute;
  content: '';
  width:20px;
  height:20px;
  background-color: #fff;
  top:-20px;
  left:50%;
  transform: translateX(-50%);
  animation: down 2s 1s infinite normal;
}
@keyframes down{
	0% {
		top: -100%;
	}
	100% {top: 100%;}
}

#scrollButton {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
  color: #fff;
  padding: 10px 20px;
  border: none;
  z-index: 99999;
  background-color: transparent;
}

.inner_wrap{
  width:80%;
  margin:0 auto;
  position: relative;
}
.right_box{
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  width:300px;
  height:480px;
  z-index: 99;
  transition: all .3 ease-in-out;
}
.left_box{
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  width:300px;
  height:480px;
  z-index: 99;
  transition: all .3 ease-in-out;
}

.box_wrap{
  width:100%;
  height:100%;
  position: relative;
}
.box_wrap .box_tit{
  position: absolute;
  top:50%;
  left:0;
  transform: translateY(-50%);
  /* padding-left:30px; */
}
.box_wrap .box_tit span{
  display: block;
  font-size:12px;
  color:#bf0b2c;
  font-weight: 800;
  text-align: left;
}
.box_wrap .box_tit h3{
  font-size:20px;
  color:#fff;
  text-align: left;
  padding:15px 0;
  /* letter-spacing: -.5px; */
  font-family: 'Noto Serif KR', serif;
}
.box_wrap .box_tit p{
  font-size:14px;
  line-height: 28px;
  color:#fff;
  text-align: left;
}
.box_wrap .box_tit a{
  display: block;
  font-size:14px;
  color:#fff;
  text-align: left;
  margin-top:60px;
  position: relative;
  transition: all .3s ease-in-out;
}
.box_wrap .box_tit a::after{
  position: absolute;
  content: '>';
  font-size:16px;
  color:#fff;
  top:50%;
  transform: translateY(-50%);
  left:100px;
  transition: all .3s ease-in-out;
}
.box_wrap .box_tit a:hover{color:#bf0b2c;}
.box_wrap .box_tit a:hover::after{left:105px; color:#bf0b2c;}

#fp-nav{top:75%;}
#fp-nav ul li:hover .fp-tooltip, #fp-nav.fp-show-active a.active + .fp-tooltip{font-size:10px;}
#fp-nav ul li a span, .fp-slidesNav ul li a span{background-color: #bf0b2c;}

.footer{
  padding:30px 0;
  background-color: #000;
  position: relative;
}
.footer .footer_logo img{width:78px;}
.footer .footer_logo{
  position: absolute;
  top:15px;
  left:5%
}
.footer p{
  font-size:13px;
  line-height: 26px;
  color:#ccc;
  text-align: center;
  font-weight: 200;
  opacity: .8;
}
/* ------------------------------------- section ------------------------------------- */






























/* top_btn */
.topbtn{
  position: fixed;
  bottom:70px;
  right:20px;
  z-index:9999999;
  width:30px;
  height:30px;
  border-radius: 40px;
  background-color:  #bf0b2c;
  transition: all 1s ease;
  transition-delay:2s;
  display: none;
}

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

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