html {
  min-height: 100%;
}

body {
  background-color: #EFEBE0;
  margin: 0;
  font-family: FangSong;
/*  font-family: FangSong, STSong;*/
}
div {
  text-align: center;
}

a{
	text-decoration:none;
}

.more a{
  color:inherit;
  text-decoration:none;
}

.text {
  position: relative;
  width: 20px;
  height: 40px;
}

#layer.inactive{
  opacity:0;
}
#layer{
  opacity:1;
  transition:0.7s all;
}

.subtitle img {
  opacity: 0;
  margin: 0;
  margin-right: 15px;
  opacity: 1\9;
}
.subtitleImg {
    position: relative;
    top: 65px;
}

img#latest_sub7, img#appointment_sub7, img#about_sub6, img#contact_sub8 {
    margin-left: 20px;
}

.subtitle img:nth-child(1) {
  animation: flyin1 1.5s ease-out 1 forwards;
  -webkit-animation-name: flyin1;
  -webkit-animation-duration: 1.5s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes flyin1{
  0% {
    -webkit-transform: translate(-331px, 324px);
  }
  25% {
    opacity: .1;
  }
  100% {
    -webkit-transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes flyin1 {
  0% {
    transform: translate(-331px, 324px);
  }
  25% {
    opacity: .1;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}
.subtitle img:nth-child(2) {
  animation: flyin2 1.5s ease-out 1 forwards;
  -webkit-animation-name: flyin2;
  -webkit-animation-duration: 1.5s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes flyin2{
  0% {
    -webkit-transform: translate(-79px, -253px);
  }
  25% {
    opacity: .1;
  }
  100% {
    -webkit-transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes flyin2 {
  0% {
    transform: translate(-79px, -253px);
  }
  25% {
    opacity: .1;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}
.subtitle img:nth-child(3) {
  animation: flyin3 1.5s ease-out 1 forwards;
    -webkit-animation-name: flyin3;
  -webkit-animation-duration: 1.5s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-fill-mode: forwards;
}
  
@-webkit-keyframes flyin3{
  0% {
    -webkit-transform: translate(19px, -192px);
  }
  25% {
    opacity: .1;
  }
  100% {
    -webkit-transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes flyin3 {
  0% {
    transform: translate(19px, -192px);
  }
  25% {
    opacity: .1;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}
.subtitle img:nth-child(4) {
  animation: flyin4 1.5s ease-out 1 forwards;
  -webkit-animation-name: flyin4;
  -webkit-animation-duration: 1.5s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-fill-mode: forwards;
  
}
  
@-webkit-keyframes flyin4{
  0% {
    -webkit-transform: translate(-88px, 174px);
  }
  25% {
    opacity: .1;
  }
  100% {
    -webkit-transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes flyin4 {
  0% {
    transform: translate(-88px, 174px);
  }
  25% {
    opacity: .1;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}
.subtitle img:nth-child(5) {
  animation: flyin5 1.5s ease-out 1 forwards;
  -webkit-animation-name: flyin5;
  -webkit-animation-duration: 1.5s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-fill-mode: forwards;
  /* margin-right: 5px; */
}
@-webkit-keyframes flyin5{
  0% {
    -webkit-transform: translate(618px, 29px);
  }
  25% {
    opacity: .1;
  }
  100% {
    -webkit-transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes flyin5 {
  0% {
    transform: translate(618px, 29px);
  }
  25% {
    opacity: .1;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}
.subtitle img:nth-child(6) {
  animation: flyin6 1.5s ease-out 1 forwards;
  -webkit-animation-name: flyin6;
  -webkit-animation-duration: 1.5s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes flyin6{
  0% {
    -webkit-transform: translate(866px, -191px);
  }
  25% {
    opacity: .1;
  }
  100% {
    -webkit-transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes flyin6 {
  0% {
    transform: translate(866px, -191px);
  }
  25% {
    opacity: .1;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}
.subtitle img:nth-child(7) {
  animation: flyin7 1.5s ease-out 1 forwards;
  -webkit-animation-name: flyin7;
  -webkit-animation-duration: 1.5s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes flyin7{
  0% {
    -webkit-transform: translate(-345px, 98px);
  }
  25% {
    opacity: .1;
  }
  100% {
    -webkit-transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes flyin7 {
  0% {
    transform: translate(-345px, 98px);
  
  }
  25% {
    opacity: .1;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}
.subtitle img:nth-child(8) {
  animation: flyin8 1.5s ease-out 1 forwards;
  -webkit-animation-name: flyin8;
-webkit-animation-duration: 1.5s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-out;
-webkit-animation-fill-mode: forwards;
  
}
@-webkit-keyframes flyin8{
  0% {
    -webkit-transform: translate(87px, 250px);
  }
  25% {
    opacity: .1;
  }
  100% {
    -webkit-transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes flyin8 {
  0% {
    transform: translate(87px, 250px);
  }
  25% {
    opacity: .1;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}
.subtitle img:nth-child(9) {
  animation: flyin9 1.5s ease-out 1 forwards;
  -webkit-animation-name: flyin9;
-webkit-animation-duration: 1.5s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-out;
-webkit-animation-fill-mode: forwards;
  
}
@-webkit-keyframes flyin9{
  0% {
    -webkit-transform: translate(713px, -101px);
  }
  25% {
    opacity: .1;
  }
  100% {
    -webkit-transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes flyin9 {
  0% {
    transform: translate(713px, -101px);
  }
  25% {
    opacity: .1;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}
.subtitle img:nth-child(10) {
  animation: flyin10 1.5s ease-out 1 forwards;
  -webkit-animation-name: flyin10;
-webkit-animation-duration: 1.5s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-out;
-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes flyin10{
  0% {
    -webkit-transform: translate(708px, -204px);
  }
  25% {
    opacity: .1;
  }
  100% {
    -webkit-transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes flyin10 {
  0% {
    transform: translate(708px, -204px);
  }
  25% {
    opacity: .1;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}
.subtitle img:nth-child(11) {
  animation: flyin11 1.5s ease-out 1 forwards;
  -webkit-animation-name: flyin11;
-webkit-animation-duration: 1.5s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-out;
-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes flyin11{
  0% {
    -webkit-transform: translate(556px, -296px);
  }
  25% {
    opacity: .1;
  }
  100% {
    -webkit-transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes flyin11 {
  0% {
    transform: translate(556px, -296px);
  }
  25% {
    opacity: .1;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}
.subtitle img:nth-child(12) {
  animation: flyin12 1.5s ease-out 1 forwards;
  -webkit-animation-name: flyin12;
-webkit-animation-duration: 1.5s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-out;
-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes flyin12{
  0% {
    -webkit-transform: translate(-205px, 263px);
  }
  25% {
    opacity: .1;
  }
  100% {
    -webkit-transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes flyin12 {
  0% {
    transform: translate(-205px, 263px);
  }
  25% {
    opacity: .1;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}
.subtitle img:nth-child(13) {
  animation: flyin13 1.5s ease-out 1 forwards;
  -webkit-animation-name: flyin13;
-webkit-animation-duration: 1.5s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-out;
-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes flyin13{
  0% {
    -webkit-transform: translate(785px, -82px);
  }
  25% {
    opacity: .1;
  }
  100% {
    -webkit-transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes flyin13 {
  0% {
    transform: translate(785px, -82px);
  }
  25% {
    opacity: .1;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}
.subtitle img:nth-child(14) {
  animation: flyin14 1.5s ease-out 1 forwards;
  -webkit-animation-name: flyin14;
-webkit-animation-duration: 1.5s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-out;
-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes flyin14{
  0% {
    -webkit-transform: translate(338px, 36px);
  }
  25% {
    opacity: .1;
  }
  100% {
    -webkit-transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes flyin14 {
  0% {
    transform: translate(338px, 36px);
  }
  25% {
    opacity: .1;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}
.subtitle img:nth-child(15) {
  animation: flyin15 1.5s ease-out 1 forwards;
  -webkit-animation-name: flyin15;
-webkit-animation-duration: 1.5s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-out;
-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes flyin15{
  0% {
    -webkit-transform: translate(-181px, -348px);
  }
  25% {
    opacity: .1;
  }
  100% {
    -webkit-transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes flyin15 {
  0% {
    transform: translate(-181px, -348px);
  }
  25% {
    opacity: .1;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}
.subtitle img:nth-child(16) {
  animation: flyin16 1.5s ease-out 1 forwards;
  -webkit-animation-name: flyin16;
-webkit-animation-duration: 1.5s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-out;
-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes flyin16{
  0% {
    -webkit-transform: translate(886px, -280px);
  }
  25% {
    opacity: .1;
  }
  100% {
    -webkit-transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes flyin16 {
  0% {
    transform: translate(886px, -280px);
  }
  25% {
    opacity: .1;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}
.subtitle img:nth-child(17) {
  animation: flyin17 1.5s ease-out 1 forwards;
  -webkit-animation-name: flyin17;
  -webkit-animation-duration: 1.5s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-fill-mode: forwards;
  /* margin-right: 0; */
}
@-webkit-keyframes flyin17{
  0% {
    -webkit-transform: translate(149px, -210px);
  }
  25% {
    opacity: .1;
  }
  100% {
    -webkit-transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes flyin17 {
  0% {
    transform: translate(149px, -210px);
  }
  25% {
    opacity: .1;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}
.subtitle img:nth-child(18) {
  animation: flyin18 1.5s ease-out 1 forwards;
  -webkit-animation-name: flyin18;
-webkit-animation-duration: 1.5s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-out;
-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes flyin18{
  0% {
    -webkit-transform: translate(-85px, -150px);
  }
  25% {
    opacity: .1;
  }
  100% {
    -webkit-transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes flyin18 {
  0% {
    transform: translate(-85px, -150px);
  }
  25% {
    opacity: .1;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}

#poem.active span {
  display: inline-block;
  opacity: 0;
  margin: 0;

}

.dot_mask {
    background-image: url(../../common/images/dot.png);
    width: 100%;
    z-index: 1;
    height: 100%;
    position: absolute;
}

.dot_mask.no-dot {
    background-image: none;
}

.email_title {
    display: inline-block;
	font-size:20px;
}

a#email {
    display: inline-block;
}

#poem.active span:nth-child(1) {
  animation: flypoem1 1s 1 forwards;
  animation-delay: 0.05s;
  -webkit-animation-name: flypoem1;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: 0.05s;
}
#poem.active span:nth-child(2) {
  animation: flypoem2 1s 1 forwards;
  animation-delay: 0.1s;
-webkit-animation-name: flypoem2;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: 0.15s;;
}
 #poem.active span:nth-child(3) {
  animation: flypoem3 1s 1 forwards;
  animation-delay: 0.15s;
  -webkit-animation-name: flypoem3;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: 0.15s;
}
#poem.active span:nth-child(4) {
  animation: flypoem4 1s 1 forwards;
  animation-delay: 0.2s;
  -webkit-animation-name: flypoem4;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: 0.2s;
}
#poem.active span:nth-child(5) {
  animation: flypoem5 1s 1 forwards;
  animation-delay: 0.25s;
  -webkit-animation-name: flypoem5;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: 0.25s;
}
#poem.active span:nth-child(6) {
  animation: flypoem6 1s 1 forwards;
  animation-delay: 0.3s;
  -webkit-animation-name: flypoem6;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: 0.3s;
}
#poem.active span:nth-child(7) {
  animation: flypoem7 1s 1 forwards;
  animation-delay: 0.35s;
  -webkit-animation-name: flypoem7;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: 0.35s;
}
#poem.active span:nth-child(8) {
  animation: flypoem8 1s 1 forwards;
  animation-delay: 0.4s;
  -webkit-animation-name: flypoem8;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: 0.4s;
}
#poem.active span:nth-child(9) {
  animation: flypoem9 1s 1 forwards;
  animation-delay: 0.45s;
-webkit-animation-name: flypoem9;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: 0.45s;
}
#poem.active span:nth-child(10) {
  animation: flypoem10 1s 1 forwards;
  animation-delay: 0.5s;
  -webkit-animation-name: flypoem10;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: 0.5s;
}
#poem.active span:nth-child(11) {
  animation: flypoem11 1s 1 forwards;
  animation-delay: 0.55s;
  -webkit-animation-name: flypoem11;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: 0.55s;
}
#poem.active span:nth-child(12) {
  animation: flypoem12 1s 1 forwards;
  animation-delay: 0.6s;
-webkit-animation-name: flypoem12;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: 0.6s;
}
#poem.active span:nth-child(13) {
  animation: flypoem13 1s 1 forwards;
  animation-delay: 0.65s;
  -webkit-animation-name: flypoem13;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: 0.65s;
}
#poem.active span:nth-child(14) {
  animation: flypoem14 1s 1 forwards;
  animation-delay: 0.7s;
  -webkit-animation-name: flypoem14;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: 0.7s;
}
#poem.active span:nth-child(15) {
  animation: flypoem15 1s 1 forwards;
  animation-delay: 0.75s;
  -webkit-animation-name: flypoem15;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: 0.75s;
}
#poem.active span:nth-child(16) {
  animation: flypoem16 1s 1 forwards;
  animation-delay: 0.8s;
  -webkit-animation-name: flypoem16;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: 0.8s;

}
#poem.active span:nth-child(17) {
  animation: flypoem17 1s 1 forwards;
  animation-delay: 0.85s;
-webkit-animation-name: flypoem17;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: 0.85s;
}
#poem.active span:nth-child(18) {
  animation: flypoem18 1s 1 forwards;
  animation-delay: 0.9s;
  -webkit-animation-name: flypoem18;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: 0.9s;

}
#poem.active span:nth-child(19) {
  animation: flypoem19 1s 1 forwards;
  animation-delay: 0.95s;
  -webkit-animation-name: flypoem19;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: 0.95s;
}
#poem.active span:nth-child(20) {
  animation: flypoem20 1s 1 forwards;
  animation-delay: 1s;
  -webkit-animation-name: flypoem20;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: 1s;
}
#poem.active span:nth-child(21) {
  animation: flypoem21 1s 1 forwards;
  animation-delay: 1.05s;
  -webkit-animation-name: flypoem21;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: 1.05s;
}
#poem.active span:nth-child(22) {
  animation: flypoem22 1s 1 forwards;
  animation-delay: 1.1s;
  -webkit-animation-name: flypoem22;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: 1.1s;
}
#poem.active span:nth-child(23) {
  animation: flypoem23 1s 1 forwards;
  animation-delay: 1.15s;
  -webkit-animation-name: flypoem23;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: 1.15s;

}
#poem.active span:nth-child(24) {
  animation: flypoem24 1s 1 forwards;
  animation-delay: 1.2s;
  -webkit-animation-name: flypoem24;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: 1.2s;
}
#poem.active span:nth-child(25) {
  animation: flypoem25 1s 1 forwards;
  animation-delay: 1.25s;
  -webkit-animation-name: flypoem25;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: 1.25s;
}
#poem.active span:nth-child(26) {
  animation: flypoem26 1s 1 forwards;
  animation-delay: 1.3s;
  -webkit-animation-name: flypoem26;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: 1.3s;
}
#poem.active span:nth-child(27) {
  animation: flypoem27 1s 1 forwards;
  animation-delay: 1.35s;
  -webkit-animation-name: flypoem27;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: 1.35s;

}
#poem.active span:nth-child(28) {
  animation: flypoem28 1s 1 forwards;
  animation-delay: 1.4s;
  -webkit-animation-name: flypoem28;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: 1.4s;
}
#poem.active span:nth-child(29) {
  animation: flypoem29 1s 1 forwards;
  animation-delay: 1.45s;
  -webkit-animation-name: flypoem29;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: 1.45s;
}
#poem.active span:nth-child(30) {
  animation: flypoem30 1s 1 forwards;
  animation-delay: 1.5s;
  -webkit-animation-name: flypoem30;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: 1.5s;
}
#poem.active span:nth-child(31) {
  animation: flypoem31 1s 1 forwards;
  animation-delay: 1.55s;
  -webkit-animation-name: flypoem31;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: 1.55s;
}
#poem.active span:nth-child(32) {
  animation: flypoem32 1s 1 forwards;
  animation-delay: 1.6s;
  -webkit-animation-name: flypoem32;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: 1.6s;
}
#poem.active span:nth-child(33) {
  animation: flypoem33 1s 1 forwards;
  animation-delay: 1.65s;
  -webkit-animation-name: flypoem1;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: 1.65s;
}
#poem.active span:nth-child(34) {
  animation: flypoem34 1s 1 forwards;
  animation-delay: 1.7s;
  -webkit-animation-name: flypoem34;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: 1.7s;
}
#poem.active span:nth-child(35) {
  animation: flypoem35 1s 1 forwards;
  animation-delay: 1.75s;
  -webkit-animation-name: flypoem35;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: 1.75s;
}
#poem.active span:nth-child(36) {
  animation: flypoem36 1s 1 forwards;
  animation-delay: 1.8s;
  -webkit-animation-name: flypoem36;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: 1.8s;
}
#poem.active span:nth-child(37) {
  animation: flypoem37 1s 1 forwards;
  animation-delay: 1.85s;
  -webkit-animation-name: flypoem37;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: 1.85s;
}

#poem.active span:nth-child(38) {
  animation: flypoem38 1s 1 forwards;
  animation-delay: 1.9s;
  -webkit-animation-name: flypoem38;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: 1.9s;
}
#poem.active span:nth-child(39) {
  animation: flypoem39 1s 1 forwards;
  animation-delay: 1.95s;
  -webkit-animation-name: flypoem39;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: 1.95s;
}
#poem.active span:nth-child(40) {
  animation: flypoem40 1s 1 forwards;
  animation-delay: 2s;
  -webkit-animation-name: flypoem40;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: 2s;
} 
/* 
#poem.active span:nth-child(41) {
  animation: flypoem41 1s 1 forwards;
  animation-delay: 2.05s;
}

#poem.active span:nth-child(42) {
  animation: flypoem42 1s 1 forwards;
  animation-delay: 2.1s;
}

#poem.active span:nth-child(43) {
  animation: flypoem43 1s 1 forwards;
  animation-delay: 2.15s;
}

#poem.active span:nth-child(44) {
  animation: flypoem44 1s 1 forwards;
  animation-delay: 2.2s;
}

#poem.active span:nth-child(45) {
  animation: flypoem45 1s 1 forwards;
  animation-delay: 2.25s;
}

#poem.active span:nth-child(46) {
  animation: flypoem46 1s 1 forwards;
  animation-delay: 2.3s;
}

#poem.active span:nth-child(47) {
  animation: flypoem47 1s 1 forwards;
  animation-delay: 2.35s;
}

#poem.active span:nth-child(48) {
  animation: flypoem48 1s 1 forwards;
  animation-delay: 2.4s;
} */
@-webkit-keyframes flypoem1{
  0% {
    -webkit-transform: translate(0, -200px);
  }
  25% {
    opacity: .1;
  }
  100% {
    -webkit-transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes flypoem1{
  0% {
    transform: translate(0, -200px);
  }
  25% {
    opacity: .1;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}
@-webkit-keyframes flypoem2{
  0% {
    -webkit-transform: translate(0, -200px);
  }
  25% {
    opacity: .1;
  }
  100% {
    -webkit-transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes flypoem2{
  0% {
    transform: translate(0, -200px);
  }
  25% {
    opacity: .1;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}
@-webkit-keyframes flypoem3{
  0% {
    -webkit-transform: translate(0, -200px);
  }
  25% {
    opacity: .1;
  }
  100% {
    -webkit-transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes flypoem3{
  0% {
    transform: translate(0, -200px);
  }
  25% {
    opacity: .1;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}
@-webkit-keyframes flypoem4{
  0% {
    -webkit-transform: translate(0, -200px);
  }
  25% {
    opacity: .1;
  }
  100% {
    -webkit-transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes flypoem4{
  0% {
    transform: translate(0, -200px);
  }
  25% {
    opacity: .1;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}
@-webkit-keyframes flypoem5{
  0% {
    -webkit-transform: translate(0, -200px);
  }
  25% {
    opacity: .1;
  }
  100% {
    -webkit-transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes flypoem5{
  0% {
    transform: translate(0, -200px);
  }
  25% {
    opacity: .1;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}
@-webkit-keyframes flypoem6{
  0% {
    -webkit-transform: translate(0, -200px);
  }
  25% {
    opacity: .1;
  }
  100% {
    -webkit-transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes flypoem6{
  0% {
    transform: translate(0, -200px);
  }
  25% {
    opacity: .1;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}
@-webkit-keyframes flypoem7{
  0% {
    -webkit-transform: translate(0, -200px);
  }
  25% {
    opacity: .1;
  }
  100% {
    -webkit-transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes flypoem7{
  0% {
    transform: translate(0, -200px);
  }
  25% {
    opacity: .1;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}
@-webkit-keyframes flypoem8{
  0% {
    -webkit-transform: translate(0, -200px);
  }
    25% {
    opacity: .1;
    }
    100% {
    -webkit-transform: translate(0, 0);
    opacity: 1;
    }
}
@keyframes flypoem8{
  0% {
    transform: translate(0, -200px);
  }
    25% {
    opacity: .1;
    }
    100% {
    transform: translate(0, 0);
    opacity: 1;
    }
}
@-webkit-keyframes flypoem9{
  0% {
    -webkit-transform: translate(0, -200px);
  }
    25% {
    opacity: .1;
    }
    100% {
    -webkit-transform: translate(0, 0);
    opacity: 1;
    }
}
@keyframes flypoem9{
  0% {
    transform: translate(0, -200px);
  }
    25% {
    opacity: .1;
    }
    100% {
    transform: translate(0, 0);
    opacity: 1;
    }
}
@-webkit-keyframes flypoem10{
  0% {
    -webkit-transform: translate(0, -200px);
  }
    25% {
    opacity: .1;
    }
    100% {
    -webkit-transform: translate(0, 0);
    opacity: 1;
    }
}
@keyframes flypoem10{
  0% {
    transform: translate(0, -200px);
  }
    25% {
    opacity: .1;
    }
    100% {
    transform: translate(0, 0);
    opacity: 1;
    }
}
@-webkit-keyframes flypoem11{
  0% {
    -webkit-transform: translate(0, -200px);
  }
    25% {
    opacity: .1;
    }
    100% {
    -webkit-transform: translate(0, 0);
    opacity: 1;
    }
}
@keyframes flypoem11{
  0% {
    transform: translate(0, -200px);
  }
    25% {
    opacity: .1;
    }
    100% {
    transform: translate(0, 0);
    opacity: 1;
    }
}
@-webkit-keyframes flypoem12{
  0% {
    -webkit-transform: translate(0, -200px);
  }
    25% {
    opacity: .1;
    }
    100% {
    -webkit-transform: translate(0, 0);
    opacity: 1;
    }
}
@keyframes flypoem12{
  0% {
    transform: translate(0, -200px);
  }
    25% {
    opacity: .1;
    }
    100% {
    transform: translate(0, 0);
    opacity: 1;
    }
}
@-webkit-keyframes flypoem13{
  0% {
    -webkit-transform: translate(0, -200px);
  }
    25% {
    opacity: .1;
    }
    100% {
    -webkit-transform: translate(0, 0);
    opacity: 1;
    }
}
@keyframes flypoem13{
  0% {
    transform: translate(0, -200px);
  }
    25% {
    opacity: .1;
    }
    100% {
    transform: translate(0, 0);
    opacity: 1;
    }
}
@-webkit-keyframes flypoem14{
  0% {
    -webkit-transform: translate(0, -200px);
  }
    25% {
    opacity: .1;
    }
    100% {
    -webkit-transform: translate(0, 0);
    opacity: 1;
    }
}
@keyframes flypoem14{
  0% {
    transform: translate(0, -200px);
  }
    25% {
    opacity: .1;
    }
    100% {
    transform: translate(0, 0);
    opacity: 1;
    }
}
@-webkit-keyframes flypoem15{
  0% {
    -webkit-transform: translate(0, -200px);
  }
    25% {
    opacity: .1;
    }
    100% {
    -webkit-transform: translate(0, 0);
    opacity: 1;
    }
}
@keyframes flypoem15{
  0% {
    transform: translate(0, -200px);
  }
    25% {
    opacity: .1;
    }
    100% {
    transform: translate(0, 0);
    opacity: 1;
    }
}
@-webkit-keyframes flypoem16{
  0% {
    -webkit-transform: translate(0, -200px);
  }
    25% {
    opacity: .1;
    }
    100% {
    -webkit-transform: translate(0, 0);
    opacity: 1;
    }
}
@keyframes flypoem16{
  0% {
    transform: translate(0, -200px);
  }
    25% {
    opacity: .1;
    }
    100% {
    transform: translate(0, 0);
    opacity: 1;
    }
}
@-webkit-keyframes flypoem17{
  0% {
    -webkit-transform: translate(0, -200px);
  }
    25% {
    opacity: .1;
    }
    100% {
    -webkit-transform: translate(0, 0);
    opacity: 1;
    }
}
@keyframes flypoem17{
  0% {
    transform: translate(0, -200px);
  }
    25% {
    opacity: .1;
    }
    100% {
    transform: translate(0, 0);
    opacity: 1;
    }
}
@-webkit-keyframes flypoem18{
  0% {
    -webkit-transform: translate(0, -200px);
  }
    25% {
    opacity: .1;
    }
    100% {
    -webkit-transform: translate(0, 0);
    opacity: 1;
    }
}
@keyframes flypoem18{
  0% {
    transform: translate(0, -200px);
  }
    25% {
    opacity: .1;
    }
    100% {
    transform: translate(0, 0);
    opacity: 1;
    }
}
@-webkit-keyframes flypoem19{
  0% {
    -webkit-transform: translate(0, -200px);
  }
    25% {
    opacity: .1;
    }
    100% {
    -webkit-transform: translate(0, 0);
    opacity: 1;
    }
}
@keyframes flypoem19{
  0% {
    transform: translate(0, -200px);
  }
    25% {
    opacity: .1;
    }
    100% {
    transform: translate(0, 0);
    opacity: 1;
    }
}
@-webkit-keyframes flypoem20{
  0% {
    -webkit-transform: translate(0, -200px);
  }
    25% {
    opacity: .1;
    }
    100% {
    -webkit-transform: translate(0, 0);
    opacity: 1;
    }
}
@keyframes flypoem20{
  0% {
    transform: translate(0, -200px);
  }
    25% {
    opacity: .1;
    }
    100% {
    transform: translate(0, 0);
    opacity: 1;
    }
}
@-webkit-keyframes flypoem21{
  0% {
    -webkit-transform: translate(0, -200px);
  }
    25% {
    opacity: .1;
    }
    100% {
      -webkit-transform: translate(0, 0);
    opacity: 1;
    }
}
@keyframes flypoem21{
  0% {
    transform: translate(0, -200px);
  }
    25% {
    opacity: .1;
    }
    100% {
    transform: translate(0, 0);
    opacity: 1;
    }
}
@-webkit-keyframes flypoem22{
  0% {
    -webkit-transform: translate(0, -200px);
  }
    25% {
    opacity: .1;
    }
    100% {
      -webkit-transform: translate(0, 0);
    opacity: 1;
    }
}
@keyframes flypoem22{
  0% {
    transform: translate(0, -200px);
  }
    25% {
    opacity: .1;
    }
    100% {
    transform: translate(0, 0);
    opacity: 1;
    }
}
@-webkit-keyframes flypoem23{
  0% {
    -webkit-transform: translate(0, -200px);
  }
    25% {
    opacity: .1;
    }
    100% {
    -webkit-transform: translate(0, 0);
    opacity: 1;
    }
}
@keyframes flypoem23{
  0% {
    transform: translate(0, -200px);
  }
    25% {
    opacity: .1;
    }
    100% {
    transform: translate(0, 0);
    opacity: 1;
    }
}
@-webkit-keyframes flypoem24{
  0% {
    -webkit-transform: translate(0, -200px);
  }
    25% {
    opacity: .1;
    }
    100% {
    -webkit-transform: translate(0, 0);
    opacity: 1;
    }
}
@keyframes flypoem24{
  0% {
    transform: translate(0, -200px);
  }
    25% {
    opacity: .1;
    }
    100% {
    transform: translate(0, 0);
    opacity: 1;
    }
}
@-webkit-keyframes flypoem25{
  0% {
    -webkit-transform: translate(0, -200px);
  }
    25% {
    opacity: .1;
    }
    100% {
    -webkit-transform: translate(0, 0);
    opacity: 1;
    }
}
@keyframes flypoem25{
  0% {
    transform: translate(0, -200px);
  }
    25% {
    opacity: .1;
    }
    100% {
    transform: translate(0, 0);
    opacity: 1;
    }
}
@-webkit-keyframes flypoem26{
  0% {
    -webkit-transform: translate(0, -200px);
  }
    25% {
    opacity: .1;
    }
    100% {
    -webkit-transform: translate(0, 0);
    opacity: 1;
    }
}
@keyframes flypoem26{
  0% {
    transform: translate(0, -200px);
  }
    25% {
    opacity: .1;
    }
    100% {
    transform: translate(0, 0);
    opacity: 1;
    }
}
@-webkit-keyframes flypoem27{
  0% {
    -webkit-transform: translate(0, -200px);
  }
    25% {
    opacity: .1;
    }
    100% {
    -webkit-transform: translate(0, 0);
    opacity: 1;
    }
}
@keyframes flypoem27{
  0% {
    transform: translate(0, -200px);
  }
    25% {
    opacity: .1;
    }
    100% {
    transform: translate(0, 0);
    opacity: 1;
    }
}
@-webkit-keyframes flypoem28{
  0% {
    -webkit-transform: translate(0, -200px);
  }
    25% {
    opacity: .1;
    }
    100% {
    -webkit-transform: translate(0, 0);
    opacity: 1;
    }
}
@keyframes flypoem28{
  0% {
    transform: translate(0, -200px);
  }
    25% {
    opacity: .1;
    }
    100% {
    transform: translate(0, 0);
    opacity: 1;
    }
}
@-webkit-keyframes flypoem29{
  0% {
    -webkit-transform: translate(0, -200px);
  }
    25% {
    opacity: .1;
    }
    100% {
    -webkit-transform: translate(0, 0);
    opacity: 1;
    }
}
@keyframes flypoem29{
  0% {
    transform: translate(0, -200px);
  }
    25% {
    opacity: .1;
    }
    100% {
    transform: translate(0, 0);
    opacity: 1;
    }
}
@-webkit-keyframes flypoem30{
  0% {
    -webkit-transform: translate(0, -200px);
  }
    25% {
    opacity: .1;
    }
    100% {
    -webkit-transform: translate(0, 0);
    opacity: 1;
    }
}
@keyframes flypoem30{
  0% {
    transform: translate(0, -200px);
  }
    25% {
    opacity: .1;
    }
    100% {
    transform: translate(0, 0);
    opacity: 1;
    }
}
@-webkit-keyframes flypoem31{
  0% {
    -webkit-transform: translate(0, -200px);
  }
    25% {
    opacity: .1;
    }
    100% {
    -webkit-transform: translate(0, 0);
    opacity: 1;
    }
}
@keyframes flypoem31{
  0% {
    transform: translate(0, -200px);
  }
    25% {
    opacity: .1;
    }
    100% {
    transform: translate(0, 0);
    opacity: 1;
    }
}
@-webkit-keyframes flypoem32{
  0% {
    -webkit-transform: translate(0, -200px);
  }
    25% {
    opacity: .1;
    }
    100% {
    -webkit-transform: translate(0, 0);
    opacity: 1;
    }
}
@keyframes flypoem32{
  0% {
    transform: translate(0, -200px);
  }
    25% {
    opacity: .1;
    }
    100% {
    transform: translate(0, 0);
    opacity: 1;
    }
}
@-webkit-keyframes flypoem33{
  0% {
    -webkit-transform: translate(0, -200px);
  }
    25% {
    opacity: .1;
    }
    100% {
    -webkit-transform: translate(0, 0);
    opacity: 1;
    }
}
@keyframes flypoem33{
  0% {
    transform: translate(0, -200px);
  }
    25% {
    opacity: .1;
    }
    100% {
    transform: translate(0, 0);
    opacity: 1;
    }
}
@-webkit-keyframes flypoem34{
  0% {
    -webkit-transform: translate(0, -200px);
  }
    25% {
    opacity: .1;
    }
    100% {
    -webkit-transform: translate(0, 0);
    opacity: 1;
    }
}
@keyframes flypoem34{
  0% {
    transform: translate(0, -200px);
  }
    25% {
    opacity: .1;
    }
    100% {
    transform: translate(0, 0);
    opacity: 1;
    }
}
@-webkit-keyframes flypoem35{
  0% {
    -webkit-transform: translate(0, -200px);
  }
    25% {
    opacity: .1;
    }
    100% {
    -webkit-transform: translate(0, 0);
    opacity: 1;
    }
}
@keyframes flypoem35{
  0% {
    transform: translate(0, -200px);
  }
    25% {
    opacity: .1;
    }
    100% {
    transform: translate(0, 0);
    opacity: 1;
    }
}
@-webkit-keyframes flypoem36{
  0% {
    -webkit-transform: translate(0, -200px);
  }
    25% {
    opacity: .1;
    }
    100% {
    -webkit-transform: translate(0, 0);
    opacity: 1;
    }
}
@keyframes flypoem36{
  0% {
    transform: translate(0, -200px);
  }
    25% {
    opacity: .1;
    }
    100% {
    transform: translate(0, 0);
    opacity: 1;
    }
}
@-webkit-keyframes flypoem37{
  0% {
    -webkit-transform: translate(0, -200px);
  }
    25% {
    opacity: .1;
    }
    100% {
    -webkit-transform: translate(0, 0);
    opacity: 1;
    }
}
@keyframes flypoem37{
  0% {
    transform: translate(0, -200px);
  }
    25% {
    opacity: .1;
    }
    100% {
    transform: translate(0, 0);
    opacity: 1;
    }
}
@-webkit-keyframes flypoem38{
  0% {
    -webkit-transform: translate(0, -200px);
  }
    25% {
    opacity: .1;
    }
    100% {
    -webkit-transform: translate(0, 0);
    opacity: 1;
    }
}
@keyframes flypoem38{
  0% {
    transform: translate(0, -200px);
  }
    25% {
    opacity: .1;
    }
    100% {
    transform: translate(0, 0);
    opacity: 1;
    }
}
@-webkit-keyframes flypoem39{
  0% {
    -webkit-transform: translate(0, -200px);
  }
    25% {
    opacity: .1;
    }
    100% {
    -webkit-transform: translate(0, 0);
    opacity: 1;
    }
}
@keyframes flypoem39{
  0% {
    transform: translate(0, -200px);
  }
    25% {
    opacity: .1;
    }
    100% {
    transform: translate(0, 0);
    opacity: 1;
    }
}
@-webkit-keyframes flypoem40{
  0% {
    -webkit-transform: translate(0, -200px);
  }
    25% {
    opacity: .1;
    }
    100% {
    -webkit-transform: translate(0, 0);
    opacity: 1;
    }
}
@keyframes flypoem40{
  0% {
    transform: translate(0, -200px);
  }
    25% {
    opacity: .1;
    }
    100% {
    transform: translate(0, 0);
    opacity: 1;
    }
}
@-webkit-keyframes poemfadeInOut {
    0% {
        opacity: 1;
    }
    95%{
      opacity: 1;
    }
    100% {
       opacity: 0;
    }
}
@keyframes poemfadeInOut {
    0% {
        opacity: 1;
    }
    95%{
      opacity: 1;
    }
    100% {
       opacity: 0;
    }
}
#s1, #s2, #s3, #s4, #s5 {
    width: 100%;
    position: relative;
    height: auto;
}
 #bg_s1 {
      /* background-image: url(../../common/images/TSM_Home-22.png); */
	  background-color: #000;
      height: 100%;
 }

 #bg_s2, #bg_s3, #bg_s5, #s3List {
      background-color: #EFEBE0;
  }

/* @media (min-width: 1024px) and (max-width: 1920px) { */

  #header {
      background-image: url(../images/TSM_Home-07.jpg);
      width: 1440px;
      height: 60px;
      position: fixed;
      top: 0;
      z-index: 999;
      left: 0;
      right: 0;
      margin: 0 auto;
      opacity: 0.8;
  }
li#sub1 {
    background-image: url(../images/TSM_Home-16.png);
}
li#sub1:hover {
    background-image: url(../images/TSM_Home-11.png);
}
li#sub2 {
    background-image: url(../images/TSM_Home-15.png);
}
li#sub2:hover {
    background-image: url(../images/TSM_Home-10.png);
}
li#sub3 {
    background-image: url(../images/TSM_Home-14.png);
}
li#sub3:hover {
    background-image: url(../images/TSM_Home-09.png);
}
li#sub4 {
    background-image: url(../images/TSM_Home-13.png);
}
li#sub4:hover {
    background-image: url(../images/TSM_Home-08.png);
}
li#sub5 {
    background-image: url(../images/TSM_Home-12.png);
}
li#sub5:hover {
    background-image: url(../images/TSM_Home-07.png);
}

  #bg_s1>#icon {
    background-image: url(../../common/images/TSM_Home-04.png);
    width: 91px;
    height: 187px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    position: absolute;
  }
  #reminder {
    position: absolute;
    right: 20px;
    top: 60px;
}
  #poem.active {
      position: absolute;
      width: 100%;
      top: 530px;
      color: #FFFFFF;
      font-family: FangSong, "仿宋", STSong, "华文宋体";
      letter-spacing: 7px;
      line-height: 1.5;
      font-size: 17px;
      -webkit-animation: fadeInOut 49.6s infinite;
      animation: poemfadeInOut 49.6s infinite;
      z-index: 2;
  }
  #instantsNewsWrapper {
    width: 100%;
    height: 16px;
    background-color: #F6F5F0;
    position: absolute;
	left: 0;
    bottom: 0;
    /* padding: 19px 0; */
    z-index: 11;
    font-family: Microsoft JhengHei,"微軟正黑體";
    height: 54px;
    overflow: hidden;
  }
  #instantNews {
    /* height: 21px; */
    overflow: hidden;
    width: 800px;
    left: 0;
    right: 0;
    margin: 0 auto;
    line-height: 1.2em;
    width: 80%;
    max-width: 800px;
}
ul#newsList {
    position: relative;
	list-style-type: none;
}
li.news {
    width: 100%;
    position: relative;
    height: 21px;
    height: 54px;
    font-family: serif;
}

li.news .desc {
    /* float: left; */
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-opacity: translateY(-50%);
}

li.news .more {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
}

  #bg_s1 {
      /*height: 816px;*/
      position: relative;
      /*       min-width: 768px; */
      background-repeat: no-repeat;
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      overflow: hidden;
/*      background-image: url(../../common/images/video/bgcolor.png);*/
      background-color: #FFF;
  }
 .top-slider-slide {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    /* background: #FFF; */
}
.top-slider-slide a{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    z-index: 1;
}

  #bg_s2 {
      height: 100%;
      position: relative;
      padding-top: 70px;
      background-repeat: no-repeat;
  }

  #bg_s3 {
      height: 475px;
      position: relative;
      padding-top: 70px;
      background-repeat: no-repeat;
      /* overflow: hidden; */
      height: calc(100% - 268px - 70px);
  }

  #bg_s4 {
      height: 830px;
      position: relative;
      padding-top: 70px;
      background-repeat: no-repeat;
      /* background-color: #000000; */
      /* opacity: 0.6; */
      z-index: 11;
  }

  #bg_s5 {
      /* height: 1074px; */
      position: relative;
      padding-top: 70px;
  }
  #s2.section,
  #s3.section,
  #s4.section,
  #s5.section,
  #s2.section .fp-slide,
  #s3.section .fp-slide,
  #s4.section .fp-slide,
  #s5.section .fp-slide,
  #s2.section .fp-tableCell,
  #s3.section .fp-tableCell,
  #s4.section .fp-tableCell,
  #s5.section .fp-tableCell{
      /* height: auto !important; */
      /*       min-width: 768px; */
      max-width: 1920px;
      left: 0;
      right: 0;
      margin: 0 auto;
      position: relative;
      overflow: hidden;
  }
  .subtitle{
      left: 0;
      right: 0;
      margin: 0 auto;
      width: 23px;
      height: 130px;
      position: relative;
      border-bottom: 1px solid #986A50;
      padding: 0 10px;
      margin-bottom: 40px;
      z-index: 10;
      margin-top:20px;
      /*max-height: 130px;
      height: 10%;*/
  }
  
  .subtitle:lang(en){
	 top:-19px; 
	}
  .title_latest_underline:lang(en){
    height: 1px;
    width: 50px;
    background-color: #986A50;
    position: absolute;
    /* text-align: center; */
    left: 50%;
    margin-left: -25px;
    /* top: 200px; */
    z-index:1;
    bottom: 0;
}
  
  .subtitle:lang(en){
      border-bottom: 0px solid #986A50;
  }
#s2 .subtitle {
    max-width: 526px;
    width: 97%;
}
#s3 .subtitle {
    max-width: 553px;
    width: 100%;
}
  #s4 .subtitle {
    width: 267px;
}
  #s5 .subtitle {
    width: 295px;
}
  .inline {
    font-family: serif;
      font-family: Serif !important;
      /* letter-spacing: 3px; */
      line-height: 1.5;
      width: 630px;
      text-align: justify;
      left: 0;
      right: 0;
      margin: 0 auto;
      position: relative;
      /* top: 270px; */
      margin-bottom: 60px;
      opacity: 0;
	   opacity: 1\9;
  }
  #ink1 {
    opacity: 0;/* make things invisible upon start */
    -webkit-animation: fadeinout1 10s linear infinite;
    animation: fadeinout1 10s linear infinite;
    background: url(../../common/images/water2.png);
    width: 44%;
    height: 906px;
    position: absolute;
    top: -10px;
    left: -165px;
    background-size: 110%;
    background-repeat: no-repeat;
    opacity: .5;
    background-size: 100%;
}
@-webkit-keyframes fadeinout1 {
  0%,100% { opacity: 0; }
  50%,80% { opacity: .5; }
}

@keyframes fadeinout1 {
  0%,100% { opacity: 0; }
  50%,80% { opacity: .5; }
}

ul#latestItem::after {
    clear: both;
    display: block;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    content: ".";
    font-size: 0;
}
#s2.first #latestItem>li#latest1 {
  animation: listIn 1s 1s forwards;
  -webkit-animation-name: listIn;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
}
#s2.first #latestItem>li#latest2 {
  animation: listIn 1s 1.5s forwards;
  -webkit-animation-name: listIn;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-delay: 1.5s;
}
#s2.first #latestItem>li#latest3 {
  animation: listIn 1s 2s forwards;
  -webkit-animation-name: listIn;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-delay: 2s;
}
#s2.first #latestItem>li#latest4 {
  animation: listIn 1s 2.5s forwards;
  -webkit-animation-name: listIn;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-delay: 2.5s;
}
#s2.first #latestItem>li#latest5 {
  animation: listIn 1s 3s forwards;
  -webkit-animation-name: listIn;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-delay: 3s;
}
#s2.first #latestItem>li#latest6 {
  animation: listIn 1s 3.5s forwards;
  -webkit-animation-name: listIn;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-delay: 3.5s;
}
ul#latestItem>li.item.video:after {
    content: '';
    background-image: url(../../common/images/event/play_button.png);
    width: 56px;
    height: 57px;
    position: absolute;
    top: 150px;
    /* bottom: 0; */
    /* left: 0; */
    right: 10px;
    /* margin: auto; */
    opacity: 1;
    background-size: 100%;
}
ul#latestItem>li.item.video:hover:after {
    background-position: bottom left;
}
ul#latestItem>li.video .latestDetail {
    transform: translateX(0);
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    -moz-transform: translateX(0);
    transition: transform 0s;
    -webkit-transition-name: transform;
    -webkit-transition-delay: 0;
}
#s2 .homeBtn {
	
    position: relative;
    color: #FFFFFF;
    border: 1px solid #986A50;
    padding: 10px 40px;
    opacity: 0;
    /* text-indent: -9999; */
    /* margin-bottom: 30px; */
    background-color: #986A50;
    
    width: 10%;
    left: 0;
    right: 0;
    /* margin: 0 auto; */
    margin-bottom: 30px;
	
	
}

a#btnMoreFunc {
    margin-right: 5%;
}


#s2.first .homeBtn{
  animation: listIn 2s 2s forwards;
  -webkit-animation-name: listIn;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-delay: 2s;
  letter-spacing: 3px;
  font-size: 14px;
}
#s2 .mask {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    transform: translateX(-100%);
    transition: transform 0.4s;
    -webkit-transition-name: transform;
    -webkit-transition-delay: 0.4s;
    -webkit-transform: translateX(-100%); 
    -ms-transform:translateX(-100%);
    -o-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
}

/* ul#latestItem>li:hover .mask { */
ul#latestItem>li:hover .videoMask, ul#latestItem>li:hover .mask {
    transform: translateX(0);
  -webkit-transform: translateX(0); 
    -ms-transform:translateX(0);
    -o-transform: translateX(0);
    -moz-transform: translateX(0);
    transition: transform 0.4s;
  -webkit-transition-name: transform;
  -webkit-transition-delay: 0.4s;
}
ul#latestItem>li:hover .latestDetail {
    transform: translateX(0);
    -webkit-transform: translateX(0);
    -ms-transform:translateX(0);
    -o-transform: translateX(0);
    -moz-transform: translateX(0);
    transition: transform 0.4s;
    -webkit-transition-delay: 0.2s;/* Safari */
    -ms-transition-delay: 0.2s;
    -o-transition-delay: 0.2s;
    transition-delay: 0.2s;
  /*   position: relative;
    width: 100%;
    height: 62px;
    background-color: #FFFFFF;
    text-align: left;
    top: 0; */
}
ul#latestItem>li:last-child {
    margin-right: 0;
}

ul#s3List {
    margin: 0;
    padding: 0;
    bottom: 0;
    width: 100%;
    position: relative;
    height: 268px;
}
ul#latestItem {
    margin: 0;
    padding: 0;
    margin-bottom: 4%;
    /* z-index: 10; */
/*     margin: 0;
    padding: 0;
    margin-bottom: 4%; */
    /* z-index: 10; */
    /* padding-top: 80px; */
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 980px;
    position: relative;
    padding-bottom: 35px;
}

ul#latestItem>li {
    width: 310px;
    height: 235px;
/*     margin-right: 30px;
    position: relative;
    overflow: hidden;
    display: inline-block;
    opacity: 0;
    height: 235px; */
    margin-right: 10px;
    position: relative;
    overflow: hidden;
    float: left;
    opacity: 0;
    vertical-align: top;
    margin-bottom: 15px;
	opacity: 1\9;
}
/* ul#latestItem>li>.latestDetail {
    text-align: left;
}
 */
li.item .latestDetail>p{
    padding: 10px;
    color: #000;
}
li.item.video .latestDetail>p {
    padding-right: 60px;
}
ul#latestItem>li .latestDetail{
    position: relative;
    width: 100%;
    height: 62px;
    background-color: #FFFFFF;
    text-align: left;
/*     transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    -ms-transform:translateX(-100%);
    -o-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    transition: transform 0.4s;
    -webkit-transition-name: transform;
    -webkit-transition-delay: 0.4s; */
    top: 0;
}
ul#latestItem>li .lastestDetail {
    display: none;
}


ul#latestItem>li:hover {
    cursor: pointer;
}



#s2 .videoMask {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}


.txtLatestDateTime {
    font-family: Microsoft JhengHei,"微軟正黑體";
}

body.fontsize_normal .txtLatestTitle {
    font-size: 21px;
}

body.fontsize_small .txtLatestTitle {
    font-size: 19px;
}

body.fontsize_Large.txtLatestTitle {
    font-size: 23px;
}
div#s2 {
    border-bottom: 1px solid rgba(172,172,174,0.7);
}
ul#s3List>li {
    width: 33.33333333333333333%;
    position: relative;
    float: left;
    overflow: hidden;
    /* display: table; */
    cursor: pointer;
    opacity: 0;
	opacity: 1\9;
    height: 268px;
    display: inline-table;
}

#s3 .homeBtn {
    /* top: 150px; */
    position: relative;
    color: #986A50;
    border: 1px solid #986A50;
    padding: 10px 30px;
    opacity: 0;
	 opacity: 1\9;
}

#s3.first .inline {
    animation: listIn 0.5s 2s forwards;
    -webkit-animation-name: listIn;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-delay: 2s;
}
#s3.first .homeBtn {

animation: listIn 0.5s 2.5s forwards;

-webkit-animation-name: listIn;

-webkit-animation-duration: 0.5s;

-webkit-animation-timing-function: linear;

-webkit-animation-fill-mode: forwards;

-webkit-animation-delay: 2.5s;

background-color: #986A50;

color: #ffffff;

cursor: pointer;

transition: 500ms ease-out;

-moz-transition: 500ms ease-out;

-webkit-transition: 500ms ease-out;

-o-transition: 500ms ease-out;

-ms-transition: 500ms ease-out;

-ms-transition: 500ms ease-out;

letter-spacing: 3px;

text-transform: uppercase;
}
#s3List>li#itemTraffic {
    animation: listIn 1s 5.5s forwards;
  -webkit-animation-name: listIn;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-delay: 5.5s;
}
#s3List>li#itemPlan {
    animation: listIn 1s 6s forwards;
  -webkit-animation-name: listIn;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-delay: 6s;
}
#s3List>li#itemMap {
    animation: listIn 1s 6.5s forwards;
  -webkit-animation-name: listIn;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-delay: 6.5s
}

#s2 .homeBtn:hover{
    background-color: transparent;
    color: #986A50;
    cursor: pointer;
    transition: 500ms ease-out;
    -moz-transition: 500ms ease-out;
    -webkit-transition: 500ms ease-out;
    -o-transition: 500ms ease-out;
    -ms-transition: 500ms ease-out;
    border: 1px solid #986A50;
    /* background-color: inherit; */
    /* color: #fff; */
    cursor: pointer;
    transition: 500ms ease-out;
    -moz-transition: 500ms ease-out;
    -webkit-transition: 500ms ease-out;
    -o-transition: 500ms ease-out;
    -ms-transition: 500ms ease-out;
    border: 1px solid #986A50;
}
#s3 .homeBtn:hover {
    background-color: transparent;
    color: #986A50;
    cursor: pointer;
    transition: 500ms ease-out;
    -moz-transition: 500ms ease-out;
    -webkit-transition: 500ms ease-out;
    -o-transition: 500ms ease-out;
    -ms-transition: 500ms ease-out;
    border: 1px solid #986A50;
    /* background-color: inherit; */
    color: #986A50;
    cursor: pointer;
    transition: 500ms ease-out;
    -moz-transition: 500ms ease-out;
    -webkit-transition: 500ms ease-out;
    -o-transition: 500ms ease-out;
    -ms-transition: 500ms ease-out;
    border: 1px solid #986A50;
}
a#btnBookingI {
    margin-right: 5%;
}

#ink2 {
    opacity: 0;/* make things invisible upon start */
    -webkit-animation: fadeinout2 8s linear infinite;
    animation: fadeinout2 8s linear infinite;
    background: url(../../common/images/water1.png);
    width: 29%;
    height: 336px;
    position: absolute;
    bottom: 268px;
    right: -80px;
    background-size: 110%;
    background-repeat: no-repeat;
    opacity: .5;
    background-size: 100%;
}
@-webkit-keyframes fadeinout2 {
  0%,100% { opacity: 0; }
  50%, 80% { opacity: .5; }
  
}

@keyframes fadeinout2 {
  0%,100% { opacity: 0; }
  50%, 80%  { opacity: .5; }
}
a#imgPlan {
    width: 100%;
    height: 268px;
    background-image: url(../../common/images/home/TSM_Home-08.jpg);
    position: relative;
    display: block;
    background-repeat: no-repeat;
    background-size: cover;
}

a#imgTraffic {
    height: 268px;
    background-image: url(../../common/images/home/TSM_Home-07.jpg);
    display: block;
    background-repeat: no-repeat;
    background-size: cover;
}

a#imgMap {
    height: 268px;
    background-image: url(../../common/images/home/TSM_Home-10.jpg);
    display: block;
    background-repeat: no-repeat;
    background-size: cover;
}
li#itemPlan:hover>a, li#itemTraffic:hover>a, li#itemMap:hover>a {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}
/* .mask { */
.videoMask, .mask {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #000000;
    opacity: .6;
}
#s3List .mask:hover {
    opacity: .8;
}
#s3List .mask {
    opacity: .4;
    transition: opacity 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
span.txtList {
    position: absolute;
    color: #FFFFFF;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 50%;
    letter-spacing: 6px;
}
#s3List>li>a {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    -webkit-transition: -webkit-transform 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    -ms-transition: -o-transform 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    -o-transition: -o-transform 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: transform 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: absolute;
    top: 0;
    display: block;
    width: 100%;
    background-position: center;
}
ul#s3List::after {
    content: '';
    clear: both;
}
#s4NavWrapper {
    position: relative;
    top: 5%;
    width: 90%;
    max-width: 800px;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 10;
    opacity: 0;
    opacity: 1\9;
}
ul#s4FeatureNav {
    /* width: 80%; */
    padding: 0;
    position: relative;
    /* text-align: center; */
    margin: 0 auto;
    /* padding-top: 5%; */
    letter-spacing: 1px;
}

ul#s4FeatureNav li {
    color: #FFFFFF;
    width: 158px;
    height: 48px;
    border-right: 1px solid #986A50;
    /* padding-right: 10px; */
    background-repeat: no-repeat;
    /* margin-right: 2%; */
    position: relative;
    list-style-type: none;
    display: inline-block;
    /* text-align: justify; */
    /* line-height: 1.5em; */
    letter-spacing: 1px;
    padding: 10px;
}
li#slide1Nav {
    line-height: 1.55em;
}
ul#s4FeatureNav2 li {
    width: 630px;
    list-style-type: none;
    text-align: justify;
	font-size:20px;
}
#s4 .inline {
    top: 10%;
    color: #FFFFFF;
}
#s4GalleryWrapper {
    height: 900px;
    position: relative;
}

#s4FeatureGallery {
    height: 900px;
}
ul#s4FeatureNav li:hover, ul#s4FeatureNav li.is-selected {
    background-image: url(../../common/images/TSM_Home-21.png);
    cursor: pointer;
    background-position: 34px 12px;
}

ul#s4FeatureNav li:last-child {
    border-right: none;
    margin-right: 0;
    padding-right: 0;
}
#btnKnowMore {
    padding: 10px 30px;
    position: absolute;
    bottom: 5%;
    display: block;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 90px;
    color: #FFFFFF;
    border: 1px solid #FFFFFF;
    cursor: pointer;
    transition: 500ms ease-out;
    -moz-transition: 500ms ease-out;
    -webkit-transition: 500ms ease-out;
    -o-transition: 500ms ease-out;
    -ms-transition: 500ms ease-out;
    opacity: 0;
    letter-spacing: 3px;
    font-size: 14px;
    opacity: 1\9;
}
a#btnKnowMore:hover {
    background-color: #986A50;
    color: #FFFFFF;
    border: 1px solid #986A50;
}
#s4.first #s4NavWrapper {
    animation: listIn 0.2s 2.5s forwards;
  -webkit-animation-name: listIn;
  -webkit-animation-duration: 0.2s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-delay: 2.5s;
}
#s4.first .inline{
      animation: listIn 0.5s 3s forwards;
      -webkit-animation-name: listIn;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-delay: 3s;
}
#s4.first #btnKnowMore{
      animation: listIn 0.5s 3.5s forwards;
  -webkit-animation-name: listIn;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-delay: 3.5s;
}
#ink3 {
    opacity: 0;/* make things invisible upon start */
    -webkit-animation: fadeinout3 8s linear infinite;
    animation: fadeinout3 8s linear infinite;
    background: url(../../common/images/water3.png);
    width: 300px;
    height: 326px;
    position: absolute;
    top: -75px;
    left: 360px;
    background-size: 110%;
    background-repeat: no-repeat;
    opacity: .5;
    background-size: 100%;
}
@-webkit-keyframes fadeinout3 {
  0%,100% { opacity: 0; }
  50%,80% { opacity: .5; }
}

@keyframes fadeinout3 {
  0%,100% { opacity: 0; }
  50%,80% { opacity: .5; }
}
div#s5bottom {
    background-color: #403030;
    width: 100%;
    padding: 60px 0;
    line-height: 1.5em;
}
div#openingHr {
    margin-bottom: 20px;
}

p.emailAddr {
    color: #986A50;
    text-decoration: underline;
}
#s5bottom, #footer {
    color: #FFFFFF;
}
#s5 a#phone>p, #s5 a#email>p {
    margin: 0;
}

#s5 #info {
    padding-bottom: 30px;
    line-height: 1.5em;
    font-size:20px;
}
#s5 a#phone {
    margin-bottom: 50px;
    position: relative;
    display: block;
}
a#btnContact {
    padding: 10px 30px;
    position: relative;
    /* bottom: 20%; */
    /* display: block; */
    left: 0;
    right: 0;
    margin: 0 auto;
    /* width: 20%; */
    color: #FFFFFF;
    border: 1px solid #986A50;
    cursor: pointer;
    background-color: #986A50;
    transition: 500ms ease-out;
    -moz-transition: 500ms ease-out;
    -webkit-transition: 500ms ease-out;
    -o-transition: 500ms ease-out;
    -ms-transition: 500ms ease-out;
    /* opacity: 0; */
    font-size: initial;
    line-height: 1em;
    letter-spacing: 3px;
}

a#btnContact:hover{
	background-color: transparent;
    color: #986A50;
    cursor: pointer;
    transition: 500ms ease-out;
    -moz-transition: 500ms ease-out;
    -webkit-transition: 500ms ease-out;
    -o-transition: 500ms ease-out;
    -ms-transition: 500ms ease-out;
    border: 1px solid #986A50;
    /* background-color: inherit; */
    color: #986A50;
    cursor: pointer;
    transition: 500ms ease-out;
    -moz-transition: 500ms ease-out;
    -webkit-transition: 500ms ease-out;
    -o-transition: 500ms ease-out;
    -ms-transition: 500ms ease-out;
    border: 1px solid #986A50;
}
#myVideo{
    position: absolute;
    right: 0;
    bottom: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    background-color: #efebe0;
    background-image: /* our video */;
    background-position: center center;
    background-size: contain;
    object-fit: cover;
    overflow: hidden;
}

a#btnMoreFunc {
    margin-right: 5%;
}

.footer_popup_wrapper {
    position: absolute;
    z-index: 12;
    background: #fff;
    width: 960px;
    /* margin: 0 auto; */
    left: 50%;
    margin-left: -490px;
    top: -40px;
}


.footer_popup_mask {
    background: #000;
    width: 100%;
    height: 200%;
    position: absolute;
    top: -590px;
    opacity: 0.7;
    z-index: 10;
}

#latestItem img {
    width: 100%;
    width: 310px;
    height: 175px;
}
body.mmode #menuWrapper, body.mmode #menuWrapperS1 {
    display: none;
}
img#latest_sub17, img#about_sub8, #contact_sub9, #appointment_sub18 {
    margin-right: 0;
}

@media screen and (max-width: 980px) {
/* 	ul#latestItem {
		width: 640px;
	} */
}
@media screen and (max-width: 1025px) {
  .footer_popup_wrapper {
    position: absolute;
    z-index: 12;
    background: #fff;
    width: 920px;
    /* margin: 0 auto; */
    left: 50%;
    margin-left: -460px;
/*    top: 130px;*/
  }
  .footer_popup_content {
    padding-top: 30px;
    padding-left: 20px;
    padding-right: 10px;
    padding-bottom: 20px;
    /* font-size: 12px; */
    color: #4C4C4E;
    overflow: auto;
    height: 390px;
    /* margin-top: 11px; */
    text-align: left;
  }
}

@media screen and (max-height: 900px) {
  #instantsNewsWrapper{
        position: absolute;
    bottom: 0;
  }
}
@media screen and (min-width: 680px) and (max-width: 980px) {
	ul#latestItem {
		width: 640px;
	}

}
@media screen and (max-width: 679px) {
	ul#latestItem>li{
   		float: initial;
   		margin-right: 10px;
   }
   	ul#latestItem{
		width: 90%;
	}
	ul#latestItem>li:last-child{
		margin-right: inherit;
	}
}
@media screen and (max-width: 1025px) and (min-width: 768px) {
	#instantNews {
	 	/* width: 80%; */
	}
	.footer_popup_wrapper {
		width: 80%;
		left: 0;
		right: 0;
		margin: 0 auto;
	}
}
@media screen and (max-width: 767px) {
	#s1.section, #s1.section .fp-slide, #s1.section .fp-tableCell {
		height: auto !important;
		/* min-width: 768px; */
		max-width: 1920px;
		left: 0;
		right: 0;
		margin: 0 auto;
		position: relative;
	}
	#bg_s1 {
     	height: 350px;
     	padding-top: 50px;
	}
	#bg_s1.mbg {
     	height: inherit;
     	background-color: #FFFFFF;
     	background-image: none;
 }
	li.news .more {
		position: relative;


		float: right;
		/* top: 50%; */
		/* transform: translateY(-50%); */
	}
	#bg_s1.mbg .video-slide{
		height: initial;
	}
	
	#bg_s1 #myVideo{	
		background-size: 100%;
	}
 	.video-slide>img {
   		height: 350px;
	}
	#bg_s1.mbg .video-slide>img {
   		height: initial;
   		width: 100%;
 }
	#videoSlide {
		position: relative;
		height: 350px;
	}
	#bg_s1.mbg  #videoSlide {
		height: inherit;
	}
	#instantsNewsWrapper{
		position: relative;
	}
	#instantNews {
		/* height: 21px; */
		overflow: hidden;
		/* width: 690px; */
		left: 0;
		right: 0;
		margin: 0 auto;
		line-height: 1em;
		width: 90%;
	}
	li.news .desc{
		position: relative;
		text-align: left;
		/* display: inline-block; */
		float: left;
		width: 75%;
		margin: auto 0;
	}
	#ink2{
		right: 0;
	}
	#ink3{
		left:0;
		right: 0;
	}
	li.news{
		font-size: 12px;
		top: 0;
		bottom: 0;
		margin: auto 0;
		height: initial;
		height: 34px;
		padding: 10px 0;
		/* line-height: 2.5em; */
	}
	li.news::after{
	  display: block;
	  height: 0;
	  overflow: hidden;
	  visibility: hidden;
	  content: ".";
	  font-size: 0;
	}
	#bg_s2{
		height: auto;
		margin-bottom: 40px;
		padding: 40px 0;
	}
	#s2 .homeBtn{
	  width: 70%;
	}
	.subtitle{
	  margin-top: 0;
	  padding: 0;
	}
	img#latest_sub7, img#appointment_sub7, img#about_sub6, img#contact_sub8{
	  margin-left: 3.5%;
	}
    .subtitle>img {
        height: 25.07%;
        width: auto;
        max-height: 15.27px;
        margin-right: 1.5%;
    }
    .subtitleImg{
        top: 40%;
    }
    img#latest_sub7 {
        margin-right: 3%;
        margin-left: 2%;
    }
    ul#latestItem>li {
		width: 100%;
		/* height: 316px; */
		margin-right: 10px;
		position: relative;
		overflow: hidden;
		display: block;
		opacity: 0;
		max-width: 310px;
		left: 0;
		right: 0;
		margin: 0 auto;
		/* float: initial; */
		margin-bottom: 30px;
		margin-right: inherit;
	}


	#latestItem img{
		width: 100%;
	}
	.inline{
		width: 80%;
		margin-bottom: 40px;
		height: auto;
	}
	#s3.first .homeBtn{
		width: 70%;
		display: block;
		left: 0;
		right: 0;
		margin: 0 auto;
		margin-bottom: 10px;
	}
	#bg_s3{
		height: auto;
		padding: 40px 0;
	}
	a#btnBookingI{
		margin-right: 5%;
	}
	ul#s3List>li, a#imgTraffic, a#imgPlan, a#imgMap{
		height: 100px;
	}
	#s3List>li#itemTraffic, #s3List>li#itemPlan, #s3List>li#itemMap{
		width: 100%;
	}
	ul#s3List{
		height: 300px;
	}
	#bg_s4{
	    padding: 40px 0;
	}
	#s4NavWrapper{
		width: 100%;
	}
	ul#s4FeatureNav{
		width: 80%
	}
	ul#s4FeatureNav2 li{
		width: 100%;
		line-height: 1.2em;
		font-size: 17px;
	}
	#s4 .inline{
		/* top: 10%; */
	}
	#btnKnowMore{
		width: 70%;
	}
	#s4 .inline .flickity-viewport{
		/* height: auto !important; */
	}
	.footer_popup_wrapper {
		width: 90%;
		left: 0;
		right: 0;
		margin: 0 auto;
        top: 0;
	}
	.footer_popup_content{
		width: 90%;
	}
	#bg_s5{
	     padding: 40px 0 ;
	}
	a#btnContact {
		width: 70%;
		display: block;
		left: 0;
		right: 0;
		margin: 0 auto;
		margin-bottom: 10px;
	}
}

/*.video-imgs { position: relative; margin:0; padding:0; overflow:hidden; width:100%; height:100%; background-color: #000; }
.video-imgs img { position:absolute; top:50%; left:50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
*/
.btn-mute { position:absolute; top:0; right:0; left:0; bottom:0; margin: 70px 32px 0 auto; background-image:url(../../common/images/btn-mute.png); width:18px; height:19px; background-position: 0 0; z-index:1; }
.btn-mute.off { background-position: 0 -19px; }

.loading-gif { position: absolute; left: 0; right: 0; top: 460px; margin: 0 auto; z-index:1; }

.video-imgs { width:1451px; height:816px; position: absolute; overflow: hidden; background-color:#000; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.video-imgs .video-canvas { position:absolute; }
.video-imgs .video-canvas img { width:1451px; height:816px; }

.btn-play { position: absolute; left: 0; right: 0; top: 0; bottom:0; margin: auto; z-index:1; width:54px; height:54px; background-color:#986a50; border-radius: 50px; }
.play-txt {position: absolute;left: -23px;bottom: -25px;width: 100px;color: #FFF;display: none;}
.btn-play span { display: block; width: 0; height: 0; border-style: solid; border-width: 11px 0 11px 16px; border-color: transparent transparent transparent #FFF; position: absolute; top:0; right:0; bottom:0; left:6px;margin: auto; }
#lightboxWrapper {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 13;
    width: 100%;
    height: 100%;
}

#overlay {
    background-color: #000000;
    width: 100%;
    height: 100%;
    opacity: 0.9;
    position: absolute;
}

#lightboxContent {
    width: 768px;
    height: 418px;
    left: 0;
    right: 0;
    margin: 0 auto;
    padding-top: 40px;
    position: relative;
}

#lightboxLayer {
    position: absolute;
    background-color: #403130;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    opacity: 0.7;
}

#close {
    background-image: url("../../zh-hk/images/map/visit_point.png");
    background-repeat: no-repeat;
    display: inline-block;
    width: 25px;
    height: 25px;
    background-position: 0px -105px;
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 20px;
}

#popupVideo {
    width: 640px;
    left: 0;
    right: 0;
    position: absolute;
    height: 360px;
    top: 0;
    bottom: 0;
    margin: auto;
}
.newTag {
    background-image: url(../images/event/Events_new_tc.png);
    width: 52px;
    height: 22px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
}
 
#videoSlide>ul {
    list-style: none;
}

.video-slide {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-repeat: no-repeat;
} 
video.mobileVideo::-webkit-media-controls {
    display:none !important;
} 


@media screen and (max-width: 500px) {
    #s2 .homeBtn{
      width: 50%;
	  display: block;
	  left: 0;
	  right: 0;
	  margin: 0 auto;
	  margin-bottom: 10px;
	}
}