/* BG Image */
.full-bg-image {
 position: absolute;
 z-index: 0;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 background-position: 50% 50%;
 background-repeat: repeat;
 background-size: cover;
  
}
.no-touch .full-bg-image { 
 /*background-attachment: fixed;
 background-size: cover;*/
}
.touch .full-bg-image { background-size: cover; }
.parallax-bg-1 .full-bg-image { background-image: url(../../img/main01.jpg) ;}
.parallax-bg-2 .full-bg-image { background-image: url(../../img/main02.jpg) ;}
.parallax-bg-3 .full-bg-image { background-image: url(../../img/main03.jpg); }
.parallax-bg-4 .full-bg-image { background-image: url(../../img/main04.jpg); }

.bg-black-color .full-bg-image { opacity:1; }
  

.sequence-theme { background-color: transparent; height:750px !important}

/* main -------------------------------------------------- */
.section { padding-top:91px}
.sequence {margin: 0 auto; position: relative; overflow: hidden; width: 100%; height: 750px !important; }
#sequence {/*height: 600px;*/ }
 .sequence > .sequence-canvas {
  height: 100%;
  width: 100%; 
 }
  
  .sequence > .sequence-canvas > li {
   position: absolute;
   width: 100%;
   height: 100%;
   z-index: 1;
   display: block;
   list-style: none;
   opacity: 1 !important;
  }
  .sequence > .sequence-canvas > li img { height: 100%; }
  
 .sequence li > .sequence-entry {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 11;
  padding: 0px;
  width: 100%;
  height: 100%;
 }
 
/* Next Prev Buttons -------------------------------------------------- */ 
.sequence-theme .sequence-prev,
.sequence-theme .sequence-next {
 position: absolute;
 top: 50%;
 z-index: 5;
 display: block;
 margin-top: -25px;
 width: 48px;
 height: 80px;
 font-size: 0;
 cursor: pointer;
 text-align: center;
 
 -webkit-transition: all .30s ease-in-out;
   transition: all .30s ease-in-out;
/* border:1px solid #fff;
 -webkit-border-radius: 50%; border-radius: 50%;*/
}
.no-touch .sequence-theme .sequence-prev { left:  -60px; }
.no-touch .sequence-theme .sequence-next { right: -60px; }
.touch .sequence-theme .sequence-prev { left:  40px; }
.touch .sequence-theme .sequence-next { right: 40px; }
.sequence-theme:hover .sequence-prev { left:  40px; }
.sequence-theme:hover .sequence-next { right: 40px; }
.sequence-theme .sequence-prev:after,
.sequence-theme .sequence-next:after {
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 color: #fff;
 text-align: center;
 font-size: 52px;
 font-family: 'fontello';
 line-height: 1em;
}
.sequence-theme .sequence-next{background: url(../../img/btn_roll_right.png) no-repeat center center; background-size: contain}
.sequence-theme .sequence-prev{background: url(../../img/btn_roll_left.png) no-repeat center center; background-size: contain}
 
.sequence-pause {
 bottom: 0;
 cursor: pointer;
 position: absolute;
 z-index: 1000; 
}
.sequence-paused    { opacity: 0.3; }
#sequence-preloader { background-color: #d9d9d9; }

/* Pagination -------------------------------------------------- */

.sequence-pagination { position: absolute; bottom: 15.5%; z-index: 10; display: none;    width: 100%; text-align: center; font-size: 0;
 -webkit-transition-duration: .5s;
   transition-duration: .5s; 
}
.sequence-pagination .page { display: inline-block; width: 17px; height: 17px; margin: 0 1px; /*cursor: pointer;
      -webkit-border-radius: 50%; border-radius: 50%;*/ background: url(../../img/bullet-out.png) no-repeat center center;}

.sequence-pagination .page span { display: inline-block; margin: 0px 3px; padding: 0px;
 width: 17px; height: 17px;/* border-width: 1px; border-style: solid; border-color: transparent;
 background-color: rgba(255,255,255,1); cursor: pointer; vertical-align: middle;
 -webkit-transition: all .25s ease-in-out;
   transition: all .25s ease-in-out;
 -webkit-border-radius: 50%;
   border-radius: 50%;*/
}
.sequence-pagination .page.current,
.sequence-pagination .page:hover {background: url(../../img/bullet-over.png) no-repeat center center; }

.sequence-pagination .page.current span,
.sequence-pagination .page:hover span {
/* border-color: transparent;
 background-color: #fff;
-webkit-transform: scale(1.4);
   transform: scale(1.4);*/
}


@media screen and (max-width: 1201px)  {

.sequence-pagination { position: absolute; bottom: 18%; z-index: 10; display: none;    width: 100%; text-align: center; font-size: 0;
 -webkit-transition-duration: .5s;
   transition-duration: .5s; }

}



@media screen and (max-width: 992px)  {



.sequence-pagination { position: absolute; bottom: 20%; z-index: 10; display: none;    width: 100%; text-align: center; font-size: 0;
 -webkit-transition-duration: .5s;
   transition-duration: .5s; }

}

@media screen and (max-width: 860px)  {

.sequence-pagination { position: absolute; bottom: 22%; z-index: 10; display: none;    width: 100%; text-align: center; font-size: 0;
 -webkit-transition-duration: .5s;
   transition-duration: .5s; }


}


@media screen and (max-width: 640px)  {

.sequence-pagination { position: absolute; bottom: 25%; z-index: 10; display: none;    width: 100%; text-align: center; font-size: 0;
 -webkit-transition-duration: .5s;
   transition-duration: .5s; }
.sequence-pagination .page { display: inline-block; width: 17px; height: 17px; margin: 0 2px; /*cursor: pointer;
      -webkit-border-radius: 50%; border-radius: 50%;*/ background: url(../../img/bullet-out.png) no-repeat center center;}

}


@media screen and (max-width: 480px)  {
.sequence-pagination .page{display:none;}
}


/* Fullscreen Image -------------------------------------------------- */
.sequence-canvas .parallax-overlay {
 position: absolute;
 left: 0;
 top: 0;
 z-index: 0;
 width: 100%;
 height: 100%;
 background-image: url(overlay-pattern.png);
 background-repeat: repeat;
}
#sequence-fullscreen .animate-in .parallax-overlay {
 z-index: 1;
 background-color:transparent;/* rgba(0,0,0, .2) */
}
.animated-element {
 position: relative;
 opacity: 0;
 
 -webkit-transition-duration: 1s;
   transition-duration: 1s;
}
.animate-out .animated-element { opacity: 0; }
.animate-in  .animated-element { opacity: 1; }

.full-bg-image.animated-element {
    -webkit-transition-duration: 0.5s;
            transition-duration: 0.5s;
    -webkit-transition-delay: 0;
            transition-delay: 0;
   background-position:center center !important
}


/* Elements -------------------------------------------------- */

.sequence-extra   {display: table; width: 100%; max-width: 1200px; margin: 0 auto; height: 50%; padding-top:15%; vertical-align: middle; text-align:center; }  /*  ¸ÞÀÎÅؽºÆ® Àüü»çÀÌÁî, À§Ä¡, Á¤·Ä */
.sequence-content { width: auto; height: 100%; vertical-align: middle;  border-top:0px solid #fff;  }
.sequence-content { /*display: table-cell;*/ display: inline-block; color:#fff; }
.sequence-content .sequence-slogan,
.sequence-content .sequence-text,
.sequence-content .sequence-add { margin-bottom: 0px; opacity: 0; }
 
.sequence-content .sequence-slogan { font-size:50px; font-weight:600; line-height: 60px;  letter-spacing: -1px;  text-shadow:1px 1px 1px #444; }
.sequence-content .sequence-text   { font-size:30px; font-weight:600; line-height: 30px; margin-top: 8%;  text-shadow:1px 1px 1px #444;}
.sequence-content .sequence-add { font-size:15px; margin-top: 4%;  line-height: 25px; text-shadow:1px 1px 1px #444; }
.sequence-slogan img { height: auto !important; margin: 0 auto; }
.sequence-content .sequence-slogan,
.sequence-content .sequence-text,
.sequence-content .sequence-add, .sequence-content .sequence-add1, .sequence-content .sequence-sign{
 -webkit-transform: translateY(50px);
   transform: translateY(50px);
   
 -webkit-transition-property: -webkit-transform, opacity;
   transition-property: transform, opacity;
 -webkit-transition-duration: .7s;
   transition-duration: .7s;
 -webkit-transition-timing-function: ease;
   transition-timing-function: ease;
}
.sequence-content .sequence-button {opacity: 0;
 
 -webkit-transform: translateY(50px);
   transform: translateY(50px);
   
 -webkit-transition-property: -webkit-transform, opacity;
   transition-property: transform, opacity;
 -webkit-transition-duration: .7s;
   transition-duration: 1.7s;
 -webkit-transition-timing-function: ease;
   transition-timing-function: ease;
}
 
/* Animation -------------------------------------------------- */

/* Sequence Fullscreen */
 .animate-out .sequence-slogan {
  opacity: 0;
  -webkit-transform: translateY(50px);
    transform: translateY(50px);
    
 }
 .animate-in .sequence-slogan {
  opacity: 1;
  -webkit-transform: translateY(0);
    transform: translateY(0);
    
  -webkit-transition-delay: .6s;
    transition-delay: .6s;
 }

 .animate-out .sequence-text {
  opacity: 0;
  -webkit-transform: translateY(50px);
    transform: translateY(50px);
 }
 .animate-in .sequence-text {
  opacity: 1;
  -webkit-transform: translateY(0);
    transform: translateY(0);
    
  -webkit-transition-delay: 1.5s;
    transition-delay: 1.5s;
 }


 .animate-out .sequence-add {
  opacity: 0;
  -webkit-transform: translateY(50px);
    transform: translateY(50px);
 }
 .animate-in .sequence-add {
  opacity: 1;
  -webkit-transform: translateY(0);
    transform: translateY(0);
    
  -webkit-transition-delay: 1.5s;
    transition-delay: 1.5s;
 }

 .animate-out .sequence-add1 {
  opacity: 0;
  -webkit-transform: translateY(50px);
    transform: translateY(50px);
 }
 .animate-in .sequence-add1 {
  opacity: 1;
  -webkit-transform: translateY(0);
    transform: translateY(0);
    
  -webkit-transition-delay: 2.4s;
    transition-delay: 2.4s;
 }




 .animate-out .sequence-button {
  opacity: 0;
  -webkit-transform: translateY(50px);
    transform: translateY(50px);
 }
 .animate-in .sequence-button {
  opacity: 1;
  -webkit-transform: translateY(0);
    transform: translateY(0);
    
  -webkit-transition-delay: 1.6s;
    transition-delay: 1.6s;
 }
 



 /* Sequence with Extra Radius */
 
 .sequence-canvas .extra-radius {
  opacity: 0;
  
  -webkit-transition: -webkit-transform .65s cubic-bezier(0.000, 1.035, 0.265, 1.550) .5s, opacity .45s ease .5s;
    transition: transform .65s cubic-bezier(0.000, 1.035, 0.265, 1.550) .5s, opacity .45s ease .5s;
  -webkit-transform: scale(0);
    transform: scale(0);
 }
 
 .animate-out .extra-radius {
  opacity: 0;
  
  -webkit-transform: scale(0);
    transform: scale(0);
 } 
 
 .animate-in .extra-radius {
  opacity: 1;
  
  -webkit-transform: scale(1);
    transform: scale(1);
 }
 
  .sequence-canvas .inner-content h2 {
   opacity: 0;
   -webkit-transition-duration: 0;
     transition-duration: 0;
   -webkit-transition-property: opacity, transform;
     transition-property: opacity, transform;
   -webkit-transition-timing-function: ease;
     transition-timing-function: ease;
   -webkit-animation-fill-mode: both;
     animation-fill-mode: both;
  }
  
  .sequence-canvas .inner-content > h2:nth-child(1) {
   -webkit-transform: translateX(-15px);
     transform: translateX(-15px);
  }
  .sequence-canvas .inner-content > h2:nth-child(2) {
   -webkit-transform: translateX(15px);
     transform: translateX(15px);
  }
  .sequence-canvas .inner-content > h2:nth-child(3) {
   -webkit-transform: translateX(-15px);
     transform: translateX(-15px);
  }
  .sequence-canvas .inner-content > h2:nth-child(4) {
   -webkit-transform: translateX(15px);
     transform: translateX(15px);
  }
  .sequence-canvas .inner-content > h2:nth-child(5) {
   -webkit-transform: translateX(-15px);
     transform: translateX(-15px);
  }
  .animate-in .inner-content > h2:nth-child(1) { 
   -webkit-transition-delay: 1.2s;
     transition-delay: 1.2s;
   -webkit-transition-duration: .6s;  
     transition-duration: .6s;  
  }
  .animate-in .inner-content > h2:nth-child(2) { 
   -webkit-transition-delay: 1.8s;
     transition-delay: 1.8s;
   -webkit-transition-duration: .6s; 
     transition-duration: .6s; 
  }
  .animate-in .inner-content > h2:nth-child(3) { 
   -webkit-transition-delay: 2.4s;
     transition-delay: 2.4s;
   -webkit-transition-duration: .6s; 
     transition-duration: .6s; 
  }
  .animate-in .inner-content > h2:nth-child(4) { 
   -webkit-transition-delay: 3s;
     transition-delay: 3s;
   -webkit-transition-duration: .6s; 
     transition-duration: .6s; 
  }
  .animate-in .inner-content > h2:nth-child(5) { 
   -webkit-transition-delay: 3.6s;
     transition-delay: 3.6s;
   -webkit-transition-duration: .6s; 
     transition-duration: .6s; 
  }
  
  .sequence-canvas .animate-in .inner-content > h2 { 
   opacity: 1;
   -webkit-transform: translateX(0);
     transform: translateX(0);
  } 
 




@media screen and (max-width:1250px){

 .sequence-theme { height:700px !important}
 .sequence {height:700px !important}
 .sequence-content { padding-top: 6%;  }
 .sequence-extra { width:100% !important; text-align:center;  }
/* .sequence-add1 img { width: 30%; }*/
}

@media screen and (max-width:1050px){

.sequence-theme { height:650px !important}
.sequence {height:650px !important}
.sequence-content { padding-top: 7%;  }
}


@media only screen and (max-width: 991px) {

  .section { padding-top: 65px; }
  .sequence-theme { height:65vw !important}
  .sequence { height:65vw !important}
  
  .no-touch .full-bg-image { }
  
  
  .sequence-content { padding-top: 10%; }
  .sequence-content { padding-left: 0%; }
.sequence-content .sequence-slogan { font-size:35px; font-weight:600; line-height: 60px;  }
.sequence-content .sequence-text   { font-size:25px; font-weight:600; line-height: 30px; margin-top: 5%;  letter-spacing: -1px; }
.sequence-content .sequence-add { font-size:14px; margin-top: 3%;  line-height: 20px; }

  /*.sequence-slogan img { width: 80%;  max-width: 748px; }*/
  
  

}

@media only screen and (max-width: 860px) {

  .sequence-content { padding-top: 6%; }

}

@media only screen and (max-width: 780px) {
  
  
 .sequence li > .sequence-entry {  } 
 
  .touch .sequence-theme .sequence-prev { left: 10px; }
  .touch .sequence-theme .sequence-next { right: 10px; }
  .sequence-theme:hover .sequence-prev { left:  10px; }
  .sequence-theme:hover .sequence-next { right: 10px; }
  
  
  .sequence-theme .sequence-prev, .sequence-theme .sequence-next { width:40px; height:40px;}
  
  .sequence-content {}
  .sequence > .sequence-canvas > li img { }
  .sequence-content { padding-top: 4%; }
  
 
}

@media only screen and (max-width: 767px) and (orientation: portrait) {
 
 
 
 #sequence li > .sequence-entry { /*padding: 25px;*/ } 
 

.sequence-content .sequence-slogan { font-size:30px; font-weight:600; line-height: 40px;  }
.sequence-content .sequence-text   { font-size:20px; font-weight:600; line-height: 30px; margin-top: 5%;  letter-spacing: -1px; }
.sequence-content .sequence-add { font-size:13px; margin-top: 3%;  line-height: 20px; }
 
} 

@media only screen and (max-width: 767px)  {
 
    
 
 #sequence li > .sequence-entry { padding: 0; } 
 
 
 
 
} 


@media screen and (max-width: 560px)  {
 .sequence-content { padding-top: 4vw; }
 .sequence > .sequence-canvas > li img { }
 
 
} 


@media screen and (max-width: 460px)  {
.sequence-theme { height:70vw !important}
.sequence { height:70vw !important}
.sequence-content .sequence-slogan { font-size:25px; font-weight:600; line-height: 40px;   letter-spacing: -1px;  }
.sequence-content .sequence-text   { font-size:15px; font-weight:600; line-height: 30px; margin-top: 3%;  letter-spacing: -1px; }
.sequence-content .sequence-add { font-size:13px; margin-top: 2%;  line-height: 20px; letter-spacing: -1px;  }
}






#sbtom{ position:absolute; bottom:3%;  width:100%; text-align:center;  z-index:111; -webkit-transition-duration: .5s; transition-duration: .5s; }
#sbtom img{width:82px; height:92px;}



@media all and (max-width:860px) {

#sbtom img{width:69.7px; height:78.2px;}

}



@media all and (max-width:640px) {

#sbtom img{width:61.5px; height:69px;}

}



@media all and (max-width:420px) {
#sbtom{display:none;}
}