html, body{
    padding: 0px;
    font-family:  'Noto Sans TC', sans-serif;
    background-color: #FEF7F1;
    /* background-color: #FCF5E7; */
    margin:auto;
    scroll-behavior: smooth;
    /* width: 100%;
		height: 100%; */
}

p{
    letter-spacing: 1px;
    color:#414141;
    line-height: 1.6;
}

a{
  text-decoration: none;
}


.nava {
    cursor: pointer;
    position: relative; 
}

.nava:after {
    content: "";
    background-color: #2368BA;
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 0%;
    height: 4px;
    transition: 0.3s ease-in;
}

a:hover:after{
    width: 100%;
}

.button {
  border: 1.5px solid #414141;
}

.button:hover {
  border: 1.5px solid #2368BA;
}

img {
    cursor: pointer; 
}

.mainStyle{
    position: relative;
}

.mainStyle:after{
    content: "";
    background-color: #2368BA;
    position: absolute;
    left: 0;
    bottom: 0px;
    width: 4px;
    height: 32px;
    border-radius: 12px;
}

.mainStyle28{
  position: relative;
}

.mainStyle28:after{
  content: "";
  background-color: #2368BA;
  position: absolute;
  left: 0;
  bottom: 3px;
  width: 4px;
  height: 32px;
  border-radius: 12px;
}


.titleStyle{
  letter-spacing: 0.12em;
}

.titleStyleBlue{
  -webkit-text-stroke: 1.5px #2368BA;
  -webkit-text-fill-color: transparent;
}

.navStyle{
    position: relative;
    backdrop-filter: blur(2rem);
    -webkit-backdrop-filter: blur(2rem);
    background: -webkit-gradient(linear,bottom,rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.0)); /* Chrome, Safari4+ */
    background: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.0)); /* Chrome10+, Safari5.1+ */
    background: -moz-linear-gradient(bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.0));    /* FF3.6+ */
    background: linear-gradient(to bottom,rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.0));      /* W3C */

}





/* 人物 */

.person .body {
  width: 236px;
  height: 180px;
  border-radius: 180px;
  /* margin-top: -40px; */
  padding-top: 60px;
  background-color: #2368BA;
  box-shadow: inset -10px -10px 0px rgba(0, 0, 0, 0.1);
  position: relative;
  transform-origin: bottom;
  -webkit-animation: 2s bodyWave ease-in infinite;
          animation: 2s bodyWave ease-in infinite;
}

@keyframes bodyWave{
  0%{}
  20%{ transform: rotate(-9deg); }
  50%{}
  100%{}
}


.person .eyes .eye {
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 20px;
  margin-right: -32px;
  margin-left: 52px;
  background-color: #fff;
  position: relative;
}

.person .eyes .eyeball {
  width: 26px;
  height: 26px;
  border-radius: 12px;
  background-color: #414141;
  position: absolute;
  left: calc( 50% - 13px);
  top: calc( 50% - 13px);
  transform-origin: center;
  -webkit-animation: 2s closeEyes ease-in infinite;
          animation: 2s closeEyes ease-in infinite;
}

@keyframes closeEyes{
  0%{}
  20%{ transform: scaleY(0); }
  50%{}
  100%{}
}


.person .mouth {
  margin-top: 15px;
  margin-left: 42%;
  /* background-color: #414141; */
  border: 5px solid #414141;  
  width: 15px;
  height: 5px;
  border-top: 0;
  /* margin: 10px auto; */
  border-radius: 0 0 20px 20px;
}
.person .blush {
  display: inline-block;  
  width: 40px;
  height: 40px;
  border-radius: 40px;
  background-color: #ED7373;
  /* transform: translateX(-63px); */
  margin-left: 19%;
}


.mouth:after {
  content: "";
  position: absolute;
  right: 15px;
  top: 40%;
  width: 4px;
  height: 56px;
  border-radius: 40px;
  background-color: #414141;
  transform: rotate(45deg);
  -webkit-animation: 2s handL infinite;
          animation: 2s handL infinite;
  transform-origin: bottom;
}

@keyframes handL{
  0%{}
  50%{ transform: rotate(-45deg);}
  100%{}
}

.mouth:before {
  content: "";
  position: absolute;
  left: 12px;
  top: 40%;  
  width: 5px;
  height: 56px;
  border-radius: 40px;
  background-color: #414141;
  transform: rotate(-45deg);
  -webkit-animation: 2s handR infinite;
          animation: 2s handR infinite;
  transform-origin: bottom;

}

@keyframes handR{
  0%{}
  50%{ transform: rotate(45deg);}
  100%{}
}

.person .message {
  font-size: 20px;
  font-weight: bold;
  color: white;
  position: absolute;
  left: -200px;
  top: 50px;
  opacity: 0;
}

.hairs{
  position: absolute;
  width: 80%;
  height: 15px;
  margin: auto;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  top: -190px;
  border-radius: 6px;
  background: #ED7373;
}

.hairs:before{
  content: "";
  position: absolute;
  width: 80%;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  height: 80px;
  border-radius: 10px 10px 0 0;
  margin-top: -80px;
  background: linear-gradient(to bottom, #ED7373 0%, #ED7373 80%, #b34a4a 80%);
}

.legs{
    margin: 0 auto;
    margin-top: -26px;
    position: absolute;
    left: 40px;
}

.legs .leg1, .legs .leg2{
    display: inline-block;
}

.legs .leg1{
  margin: 0 5px 0 50px;
}


.legs .l1, .legs .l2{
  background-color: #414141;
  height: 25px;
  width: 5px;
  margin: 0 auto;
} 

.legs .foot{
  height: 5px;
  background-color: #414141;
  width: 25px;
}

.leg1 .l2, .leg2 .l2{
  margin-top: -2px;
}

.legs .leg1 .foot{
  margin: -4px 0 0 -20px;
  border-radius: 10px 0px 0px 10px;
}

.legs .leg2 .foot{
  margin: -4px 0px 0 20px ;
  border-radius: 0 10px 10px 0;
}





/* Scroll Down 透明度效果 */

/* .scrollAni {
  -webkit-animation: scroll 1.5s infinite alternate;
          animation: scroll 1.5s infinite alternate;
} */

@keyframes scroll{
  0%{
    opacity: 0;
  }

  100%{
    opacity: 1;
  }
}


.dot{
  opacity: 0;
  -webkit-animation: mouseBall 2s ease-in infinite;
          animation: mouseBall 2s ease-in infinite;
  transform-origin: bottom bottom;
}

.aniText {
  animation: nudgeText 4s ease-in infinite;
}



@keyframes mouseBall {
  /* 0% {
    transform: scale(1) translateY(0px);
  }

  20% {
    transform: scaleY(1) translateY(8px);
  }

  30% {
    transform: scaleY(1.2) translateY(0px);
  }


  50% {
    transform: scaleY(1) translateY(8px);
  }

 80% {
    transform: scaleY(1.2) translateY(0px);
  }

 90% {
    opacity: 0;
    transform: scaleY(0.8) translateY(2px);
  } */

  0% {
    opacity: 0;
    d: path("M6 6V7.2"); }
  50% {
    opacity: 1;
    d: path("M6 6V13.2"); }
  100% {
    opacity: 0;
    d: path("M6 6V13.2"); }

}


.carousel {
  display: flex;
  overflow: hidden;
  position: relative;
  border-radius: 8px;
}

.carouselStyle {
  visibility:visible;
  display: flex;
  width: 100%;
  height: inherit;
  align-items: center;
  justify-content: flex-end;
  -webkit-align-items: center;
  -webkit-justify-content: flex-end;
  position: relative;
  background-color: #fff;
  flex-shrink: 0;
  -webkit-flex-shrink: 0;
  position: absolute;
  z-index: 0;
  transition: 2s all ease-in;
}


.pat1 {
  background-image: url(/img/elifeB/ToBB.png);
}
.pat2 {
  background-image: url(/img/elifeB/ToBA.png);
}

.patC1 {
  background-image: url(/img/elifeC/ToCB.png);
}
.patC2 {
  background-image: url(/img/elifeC/ToCA.png);
}

.beer-handle {
  bottom: 0;
  top: auto;
}

.beer-slider {
  position: absolute;
  width: 100%;
  height: 100%;
}

.box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
}

#dec {
  opacity: 0;
  transition: .4s ease opacity,.4s ease transform;
}

#dec2 {
  opacity: 0;
  transition: .4s ease opacity,.4s ease transform;
}

#dec3 {
  opacity: 0;
  transition: .4s ease opacity,.4s ease transform;
}