/* animation */
.animation{
  margin-top: 120px;
    /* background: linear-gradient(to bottom, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.3) 100%); */
}
.animation .img-box{
    position: absolute;
    top: 0;
    left: 0;
    width:100%;
    height:100%;
}
.animation .frame{
  width: 62%;
  left: 60%;
  top: 5%;
  transform: translateX(-50%);
}
.animation .frame img{
  position: absolute;
  top: 0;
  width: 100%;
}

.frame #buttom{
  animation-name: buttom;
  animation-duration: 1s;
  animation-delay: 1s;
  animation-timing-function: ease-out;
  animation-direction: alternate-reverse;
  transform: translateX(200%);
  animation-fill-mode: forwards;  
}
.frame #main{
  animation-name: main;
  animation-duration: 1s;
  animation-delay: 1s;
  animation-timing-function: ease-out;
  animation-direction: alternate-reverse;
  transform: translateX(-200%);
  animation-fill-mode: forwards;  
}
.frame #people{
  animation-name: people;
  animation-duration: 1s;
  animation-delay: 2s;
  animation-timing-function: ease-out;
  animation-direction: alternate-reverse;
  height: 0;
  animation-fill-mode: forwards;  
}
.frame #methe{
  animation-name: methe;
  animation-duration: 2s;
  animation-delay: 2s;
  animation-timing-function: ease-out;
  animation-direction: alternate-reverse;
  opacity: 0;
  animation-fill-mode: forwards;  
}

@keyframes buttom{
  
  0%{transform: translateX(0);}
  100%{transform: translateX(200%);}
}
@keyframes main{
  0%{transform: translateX(0);}
  100%{transform: translateX(-200%);}
}
@keyframes mainOut{
  0%{opacity: 0;}
  100%{opacity: 100;}
}
@keyframes people{
  0%{height: 100%;}
  5%{height: 95%;}
  15%{height: 100%;}
  25%{height: 90%;}
  35%{height: 100%;}
  45%{height: 85%;}
  55%{height: 100%;}
  75%{height: 80%;}
  90% {height: 100%;}
  100% {height: 0;}
}
@keyframes methe{
  0%{opacity: 100;}
  100%{opacity: 0;}
}



.pointing-down{
  /* position:absolute; */
  /* left:50%; */
  /* bottom: -40px; */
  width:80px;
  height:80px;
  background-color:rgba(0,0,0,0.1);
  border-radius:50%;
  z-index: 2;
  /* transform: translate(-50%,50%); */
  animation-name:sparkle;
  animation-duration:1s;
  animation-iteration-count: 5;
}
.pointing-down span{
  font-size: 80px;
  display: block;
  width: 100%;
  height: 100%;
  line-height: 80px;
  color: #fff;
  transform: scale(0.6) translateY(20px);
}
@keyframes sparkle{
  0%{
      opacity:0;
  }
  50%{
      opacity:100;
  }
  100%{
    opacity:0;
  }
}
/* introduce */
.introduce-bg{
    position: absolute;
    background: linear-gradient( 200deg, rgba(2, 77, 131, 0.95) 0%, rgba(23, 28, 97, 0.9) 100%);
    height:auto;
    height: 500px;
    width: 100%;
    background-size: cover;
    background-position: 0 30%;
    opacity: 0;
    
}
.introduce{
  height: 500px;
  text-align:center;
}

.introduce .inbox{
  opacity: 0;
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
}
.introduce p{
    font-size: 22px;
    color: #fff;
}

/* service */
.service{
  background: linear-gradient( 200deg, rgba(2, 77, 131, 0.95) 0%, rgba(23, 28, 97, 0.9) 100%);
  padding: 72px 0 128px 0;
}
.service h2{
  text-align:center;
  margin-bottom:56px;
}
.service-title ul{
    padding:0;
}

.service-title ul > li{
    display: inline-block;
    width:calc(100% / 3);
    text-align: center;
    line-height: 56px;
    border-radius: .5rem .5rem 0 0;
    cursor: pointer;
    color: #fff;
}
.service-title ul > li.show{
    background-color: rgba(0,0,0,0.3);
}
.service-display{
    width:100%;
    height: 100%;
    background-color: rgba(0,0,0,0.3);
    padding:56px;
}




/* spirit */
.spirit{
  text-align: center;
  padding: 56px 0 180px 0;
}
.spirit .icon-box{
    padding-top: 100%;
}
.spirit .icon-box img{
    position: absolute;
    width:100%;
    height:100%;
    top: 0;
    left: 0;
    border-radius: 50%;
    transform: scale(0.6);
}

.spirit .spirit-text{
  position: absolute;
  left: 50%;
  top: 90%;
  transform: translateX(-50%);
  color: rgb(255, 133, 20);
  text-shadow: -5px 5px 6px #434a54;
}


/* gallery  */

.cf:before, .cf:after { content: " "; display: table; }.cf:after { clear: both; }
/* *,*:after,*:before{transition: all 0.5s ease;} */
#gallery img { width: 100%; height: auto; }

#gallery { 
  width: 100%;
  margin: 0 auto;
  position: relative; 
  font-family: Verdana; 
}
#gallery .gallery-caption {
  color: white;
  background-color: rgba(255,255,255,0);
  border-radius: 50%;
  text-align: center;
  position: absolute;
  top: 100%;
  left: 5%;
  width: 90%;
  height: 90%;
  margin: 0 auto;
  text-shadow: -1px 1px 0 black, -2px 2px 0 black;
  text-transform:uppercase;
}
#gallery .gallery-slide:hover .gallery-caption {
  top: 50%;
}
#gallery .gallery-slide {
  margin: 0;
  padding: 0;
  float: left;
  width: 100%;
  position: relative;
  overflow: hidden;
}
#gallery .gallery-slide:after {
  position: absolute;
  content: "";
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
/* #gallery:hover .gallery-slide:after{
  background: rgba(0,0,0,0.5);
}
#gallery .gallery-slide:hover:after {
  background: transparent;
}
#gallery .gallery-slide:hover img{
  transform: scale(1.3) rotate(-10deg);
} */
@media only screen and (min-width:480px){
  #gallery .gallery-slide { width: 50%; }
}
@media only screen and (min-width:640px){
  #gallery .gallery-slide { width: 25%; }
}
@media only screen and (min-width:767px){
  #gallery { 
    
  }  
}
.map{
  padding:160px 0 ;
}
/* map */
.map h4{
  background-color:rgba(0,0,0,0.5);
  color: #fff;
  display:inline-block;
  margin:0;
  padding: 10px 20px;
  border-top-left-radius: .5rem;
  border-top-right-radius: .5rem;
}

@media(max-width:450px){
/* animation */
.animation{
  margin-top: 100px;
  margin-bottom: 20px;
}
.animation .img-box{
    position: absolute;
    top: 0;
    left: 0;
    width:100%;
    height:100%;
}
.animation .frame{
  width: 100%;
  left: 50%;
  top: 5%;
  transform: translateX(-50%);
}
.animation .frame img{
  position: absolute;
  top: 0;
  width: 100%;
}

.frame #buttom{
  animation-name: buttom;
  animation-duration: 1s;
  animation-delay: 1s;
  animation-timing-function: ease-out;
  animation-direction: alternate-reverse;
  transform: translateX(200%);
  animation-fill-mode: forwards;  
}
.frame #main{
  animation-name: main;
  animation-duration: 1s;
  animation-delay: 1s;
  animation-timing-function: ease-out;
  animation-direction: alternate-reverse;
  transform: translateX(-200%);
  animation-fill-mode: forwards;  
}
.frame #people{
  animation-name: people;
  animation-duration: 1s;
  animation-delay: 2s;
  animation-timing-function: ease-out;
  animation-direction: alternate-reverse;
  height: 0;
  animation-fill-mode: forwards;  
}
.frame #methe{
  animation-name: methe;
  animation-duration: 2s;
  animation-delay: 2s;
  animation-timing-function: ease-out;
  animation-direction: alternate-reverse;
  opacity: 0;
  animation-fill-mode: forwards;  
}



.pointing-down{
  /* bottom: -160px; */
}
.pointing-down span{
  font-size: 80px;
  display: block;
  width: 100%;
  height: 100%;
  line-height: 80px;
  color: #fff;
  transform: scale(0.6) translateY(20px);
}

/* introduce */
.introduce-bg{
    height: 600px;
}
.introduce{
  height: 600px;
  text-align:center;
}

.introduce .inbox{
  height: 100%;
  padding-top: 72px;
}
.introduce p{
  font-size: 14px;
  padding: 0 14px;
}

/* service */
.service{
  padding: 40px 0 40px 0;
}
.service-title ul{
    padding:0;
}
.service h2{
  margin-bottom:20px;
}
.service-title ul > li{
    display: inline-block;
    width:calc(100% / 3);
    text-align: center;
    line-height: 56px;
    border-radius: .5rem .5rem 0 0;
    cursor: pointer;
    color: #fff;
}
.service-title ul > li.show{
    background-color: rgba(0,0,0,0.3);
}
.service-display{
    width:100%;
    height: 100%;
    background-color: rgba(0,0,0,0.3);
    padding:56px;
}




/* spirit */

.spirit .icon-box{
    padding-top: 100%;
}
.spirit .icon-box img{
  position: absolute;
  width:100%;
  height:100%;
  top: 0;
  left: 0;
  border-radius: 50%;
  transform: scale(0.6);
}

.spirit .spirit-text{
position: absolute;
left: 50%;
top: 90%;
transform: translateX(-50%);
}


/* gallery  */



#gallery .gallery-slide {
  width: 50%;
}

  .map{
    padding:20px 0 ;
  }
  .map .second-map{
    margin-top: 20px;
  }
  .map h4{
    background-color:rgba(0,0,0,0.5);
    color: #fff;
    display:inline-block;
    margin:0;
    padding: 10px 20px;
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
  }
}
.video-container{
  position: relative;
  /* padding-bottom: 50%; */
  height: 95%;
  width: 80%;
  overflow: hidden;
}

.video_sidebar{
  overflow-y: auto;
  height: 95%;
}

.video_thumbnail{
  cursor: pointer;
}

.video-container iframe, .video-container object, .video-container embed{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.img-box_out{
  animation-name: mainOut;
  animation-duration: 2s;
/*   animation-delay: 9s; */
  animation-timing-function: ease-out;
  animation-direction: alternate-reverse;
  animation-fill-mode: forwards;
}

.video_box{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation-name: methe;
  animation-duration: 2s;
  animation-delay: 4s;
  opacity: 0;
  animation-timing-function: ease-out;
  animation-direction: alternate-reverse;
  animation-fill-mode: forwards;   
}

.video_box_mobile{
  /* animation-name: methe;
  animation-duration: 2s; */
  /* animation-delay: 11s; */
  opacity: 0;
  /* animation-timing-function: ease-out;
  animation-direction: alternate-reverse;
  animation-fill-mode: forwards;   */
}

#scroll {
  width:100%;
  margin:0px auto;
  overflow-y:hidden;
}
#scroll ul {
    margin:0; 
    padding:0;
    display:table;
    list-style:none;
}
#scroll li {
  text-align:center;
  display:table-cell;
  vertical-align:middle;
  border:1px solid #eee;
  padding-left: 15px;
  padding-right: 15px;
}
#scroll img {
  width:200px;
  border:0;
  display:block;
  margin:0px auto;
}