@charset "utf-8";

html, body {
  height: 100%;
  margin: 0; 
}
#modalContainer{display: none;}

.wrapper {
  max-width: 350px;
  margin: 0 10%; }

.wrapper {
    width: 90%;
    margin: 0 5%;
}

  
#intro{background: #222;}
#slide01 {
  background-color: #f2f2f2; 
}
#slide01 h1 span{color:#e16a38}
#slide01.slide{height: 400vh;}
#slide02.slide{height: 200vh;}
#slide02 .wrapper{top:20%}
#slide02 .owl-carousel .owl-stage-outer{height: 100vh;}
#slide03, #slide05{background: #fff;}

#slide02, #slide04 {
  background-color: #f2f2f2; 
}
#slide02{background: #e16a38;}
  
.background-container {
    width: 100%;
    height: 100%;
    background: url(/images/main/main_bg.jpg) center no-repeat;
    background-size: cover;
  
}
.background-container img{width:300px; position: absolute; left:50%; top:50%; transform: translate(-50%,-50%);}
  
  
.intro, .slide  {
  position: relative;
  overflow: hidden;
  height: 100vh; 
}

.slide .pin-wrapper {
    width: 100%;
    height: 100%;
}
.slide .wrapper {
    position: absolute;
    top: 45%;
    left: 50%; 
}
  
#slide02 .pin-wrapper,
#slide03 .pin-wrapper,
#slide04 .pin-wrapper {
    transform: translateY(-100%);
}
#slide02 .pin-wrapper{transform: translateY(0);}
#slide03 .pin-wrapper{transform: translateY(-150vh);}
.scrollmagic-pin-spacer {
    position: absolute !important;
    clip: rect(auto, auto, auto, auto);
}
.wrapper h1{line-height: 45px;}
.wrapper.gallery_main{
  position: static;
  max-width: none;
  padding:100px 0;
}
.wrapper.gallery_main h1{margin-bottom: 30px;}
.gallery_img{width: 10000px; overflow: hidden;}
.gallery_img div{float:left; margin-right: 30px;}
.con2_gallery_img{
  width:40%;
  height: 100%;
  position: absolute;
  top:0;
  left:0;
}
.owl-carousel .owl-stage-outer,.owl-carousel .owl-stage,.owl-carousel.owl-drag .owl-item,.owl-carousel.owl-drag .owl-item>div,.owl-carousel .owl-item img{height: 100%;}
.con3_menu li{
  width:20%;
  display: inline-block;
  border: 1px solid #222;
  text-align: center;
  border-radius: 50%;
  margin:0 10px;
  cursor: pointer;
  font-size: 75%;
  transition: 0.5s background, 0.5s color;
}
.con3_menu li:hover{
  background: #222;
  color: #fff;
}
.con3_menu li span{
  height: 80px;
  line-height: 80px;
}
.con3_menu li.active{background: white; color:#222}
.con3_img{
  position: absolute;
  z-index: -1;
}
.con3_img li{position: absolute; opacity: 0; transition: 1s all;}
.con3_img li.active{opacity: 1;}
#slide03 .wrapper{
  width: 70%;
  text-align: center;
  max-width: none;
  transform: translate(-50%);
  margin:0;
}

#slide04{background: #fff;}
#slide04 .wrapper{
  width: 100%;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  margin:0;
  max-width: none;
  text-align: center;
}
#slide04 h1{font-size: 40px; transform: translateX(100%);}
#slide04 h1 span{font-family: 'EB Garamond', serif; font-style: italic; transition: 0.5s color;}
#slide04 h1 span:hover{color:#e16a38}

.contact{
  position: fixed;
  bottom:10px;
  right:10px;
  z-index: 100000;
  color:#fff;
}
.contact span a{
  width:50px;
  height: 50px;
  border-radius: 50%;
  line-height: 50px;
  text-align: center;
  display: block;
}
.contact .kakao a{
  background:none;
   box-sizing: border-box;
}
.contact span img{width: 30px; padding-top: 10px;}

#slide04 .contact h1 span{margin:0 10px;}

/*반응형*/
@media (max-width: 767px) {
  body{min-width: auto;}
  .background-container img{width: 200px;}
  .gallery_img{width: 5900px;}
  .gallery_img div{width: 400px;}
  .gallery_img img{width: 100%;}
  .con2_gallery_img{width: 100%; z-index: -1;}
  #slide02 .wrapper{z-index: 10000; transform: translate(-50%);}
  #slide03 .wrapper{top:50%; transform: translate(-50%,-50%);}
  .con3_menu li{width: 100%; margin:5px 0;}
  .con3_menu li span{height: 60px; line-height: 60px;}
  .wrapper.gallery_main{padding:0; transform: translateY(50%);}
  .con3_img{width:100%; height: 100vh;}
  .con3_img img{ width: 100%; height: 100vh; object-fit: cover;}
  #slide04 h1 span{display: block;}
}