@-webkit-keyframes right {
  from {
    -webkit-transform: translateX(calc((-4vw + -4vh + -4%)/3)) rotate(0.01deg);
    transform: translateX(calc((-4vw + -4vh + -4%)/3)) rotate(0.01deg);
    -ms-transform: translateX(-4%);
  }
  to {
    -webkit-transform: translateX(calc((4vw + 4vh + 4%)/3)) rotate(0.01deg);
    transform: translateX(calc((4vw + 4vh + 4%)/3)) rotate(0.01deg);
    -ms-transform: translateX(4%);
  }
}

@keyframes right {
  from {
    -webkit-transform: translateX(calc((-4vw + -4vh + -4%)/3)) rotate(0.01deg);
    transform: translateX(calc((-4vw + -4vh + -4%)/3)) rotate(0.01deg);
    -ms-transform: translateX(-4%);
  }
  to {
    -webkit-transform: translateX(calc((4vw + 4vh + 4%)/3)) rotate(0.01deg);
    transform: translateX(calc((4vw + 4vh + 4%)/3)) rotate(0.01deg);
    -ms-transform: translateX(4%);
  }
}

@-webkit-keyframes left {
  from {
    -webkit-transform: translateX(calc((4vw + 4vh + 4%)/3)) rotate(0.01deg);
    transform: translateX(calc((4vw + 4vh + 4%)/3)) rotate(0.01deg);
    -ms-transform: translateX(4%);
  }
  to {
    -webkit-transform: translateX(calc((-4vw + -4vh + -4%)/3)) rotate(0.01deg);
    transform: translateX(calc((-4vw + -4vh + -4%)/3)) rotate(0.01deg);
    -ms-transform: translateX(-4%);
  }
}

@keyframes left {
  from {
    -webkit-transform: translateX(calc((4vw + 4vh + 4%)/3)) rotate(0.01deg);
    transform: translateX(calc((4vw + 4vh + 4%)/3)) rotate(0.01deg);
    -ms-transform: translateX(4%);
  }
  to {
    -webkit-transform: translateX(calc((-4vw + -4vh + -4%)/3)) rotate(0.01deg);
    transform: translateX(calc((-4vw + -4vh + -4%)/3)) rotate(0.01deg);
    -ms-transform: translateX(-4%);
  }
}

@-webkit-keyframes down {
  from {
    -webkit-transform: translateY(calc((-4vw + -4vh + -4%)/3)) rotate(0.01deg);
    transform: translateY(calc((-4vw + -4vh + -4%)/3)) rotate(0.01deg);
    -ms-transform: translateY(-4%);
  }
  to {
    -webkit-transform: translateY(calc((4vw + 4vh + 4%)/3)) rotate(0.01deg);
    transform: translateY(calc((4vw + 4vh + 4%)/3)) rotate(0.01deg);
    -ms-transform: translateY(4%);
  }
}

@keyframes down {
  from {
    -webkit-transform: translateY(calc((-4vw + -4vh + -4%)/3)) rotate(0.01deg);
    transform: translateY(calc((-4vw + -4vh + -4%)/3)) rotate(0.01deg);
    -ms-transform: translateY(-4%);
  }
  to {
    -webkit-transform: translateY(calc((4vw + 4vh + 4%)/3)) rotate(0.01deg);
    transform: translateY(calc((4vw + 4vh + 4%)/3)) rotate(0.01deg);
    -ms-transform: translateY(4%);
  }
}

@-webkit-keyframes up {
  from {
    -webkit-transform: translateY(calc((4vw + 4vh + 4%)/3)) rotate(0.01deg);
    transform: translateY(calc((4vw + 4vh + 4%)/3)) rotate(0.01deg);
    -ms-transform: translateY(4%);
  }
  to {
    -webkit-transform: translateY(calc((-4vw + -4vh + -4%)/3)) rotate(0.01deg);
    transform: translateY(calc((-4vw + -4vh + -4%)/3)) rotate(0.01deg);
    -ms-transform: translateY(-4%);
  }
}

@keyframes up {
  from {
    -webkit-transform: translateY(calc((4vw + 4vh + 4%)/3)) rotate(0.01deg);
    transform: translateY(calc((4vw + 4vh + 4%)/3)) rotate(0.01deg);
    -ms-transform: translateY(4%);
  }
  to {
    -webkit-transform: translateY(calc((-4vw + -4vh + -4%)/3)) rotate(0.01deg);
    transform: translateY(calc((-4vw + -4vh + -4%)/3)) rotate(0.01deg);
    -ms-transform: translateY(-4%);
  }
}

@-webkit-keyframes out {
  from {
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes out {
  from {
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@-webkit-keyframes in {
  from {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  to {
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
  }
}

@keyframes in {
  from {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  to {
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
  }
}

.slideVisual{position:relative;width:100%;height:550px;overflow: hidden;}
.slideVisual.sub{height:400px;}
#slides {position: absolute;width: 1px;height: 1px;left: -9999px;}
#slideshow {position: absolute;overflow: hidden;top: 0;left: 0;right: 0;bottom: 0;}
#slideshow .slide, #slideshow span, #slideshow .static-content {display: block;position: absolute;top: 0;left: 0;right: 0;bottom: 0;}
.static-content {padding: 20px;}
.static-content .contentBox {max-width: 1400px;margin: 40px auto 0;}
.static-content .contentBox .borderBox{padding:30px;background-color:rgba(0,0,0,0.5);max-width:340px;color: white;text-shadow: 0 2px 4px rgba(0,0,0,.4);}
.static-content .contentBox .imgCaption{margin-top:20px;font-size:1.5rem;color:#fff;font-family:'NanumMyeongjo',"함초롱바탕", "한양해서", "Noto Serif KR", sans-serif;}
.static-content .contentBox h1 {font-size:1.5rem;font-weight:300;margin-bottom:20px;font-family: "함초롱바탕", "한양해서","Noto Serif KR", sans-serif; }
.static-content .contentBox h1 strong{font-weight:700;}
.static-content .contentBox p {font-size:1.2rem;line-height:2rem;font-family:"함초롱바탕", "한양해서", "Noto Serif KR", sans-serif; }

@media (max-width: 768px) {
  .slideVisual{height:400px;}
  .static-content .contentBox {margin: 20px auto 0;}

 .static-content .contentBox h1 {font-size:1.4rem;font-weight:300;}
 .static-content .contentBox p {font-size:.9rem;line-height:1.3rem;}

}


#slideshow .slide span {background-size: cover;background-position: center;}
#slideshow .slide span.animate.right, #slideshow .slide span.animate.left {left: calc((-4vw + -4vh + -4%)/3);right: calc((-4vw + -4vh + -4%)/3);}
#slideshow .slide span.animate.up, #slideshow .slide span.animate.down {top: calc((-4vw + -4vh + -4%)/3);bottom: calc((-4vw + -4vh + -4%)/3);}
#slideshow span.animate {-webkit-animation-fill-mode: forwards;animation-fill-mode: forwards;-webkit-animation-timing-function: linear;animation-timing-function: linear;}
#slideshow span.animate.right {-webkit-animation-name: right;animation-name: right;}
#slideshow span.animate.left {-webkit-animation-name: left;animation-name: left;}
#slideshow span.animate.up {-webkit-animation-name: up;animation-name: up;}
#slideshow span.animate.down {-webkit-animation-name: down;animation-name: down;}
#slideshow span.animate.in {-webkit-animation-name: in;animation-name: in;}
#slideshow span.animate.out {-webkit-animation-name: out;animation-name: out;}
#slideshow span.animate.paused {-webkit-animation-play-state: paused;animation-play-state: paused;}