@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC&family=Noto+Serif+TC:wght@700;900&family=ZCOOL+XiaoWei&display=swap');

.winde-mx{
  position: relative;
  max-width: 1700px;
  width: 100%;
  margin: 0 auto;
  height: auto;
}
.top-word{
  display: none;
}
.bannerMB{
  display: none;
}
.mb01{
  display: none;
}

hr {
    margin-top: 5px;
    margin-bottom: 5px;
    border: 0;
    border-top: 2px solid #e1c79d;
}

.bk {
  display: block;
  height: 1px;
}


/* swiper */
.swiper-container {
  width: 1060px;
  height: 25em;
}

.swiper-slide {
  width: auto !important;
}

.card {
    background-image: url(../images/board.svg);
    background-position: center;
    background-size: cover;
    width: 270px;
    height: 270px;
    border-radius: 100%;
    overflow: hidden;
    border-color: #f6e6d4;
    border-style: solid;
}

.card__img {
  display: block;
  width: 100%;
  height: 270px;
  -o-object-fit: cover;
     object-fit: cover;
}

.card__body {
    position: absolute;
    font-weight: 600;
    text-align: center;
    margin: 0 auto;
    top: 17%;
    left: 0;
    right: 0;
}

.card__body > h4 {
  font-size: 29px;
  font-weight: 900;
  line-height: 1;
  color: #3e5a74;
}

.card__body > span {
  display: block;
  font-size: 47px;
  font-weight: bolder;
  line-height: 0.9;
}


/* Fade */
.hvr-fade {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  overflow: hidden;
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -webkit-transition-property: color, background-color;
  transition-property: color, background-color;
  border-radius: 5px;
  box-shadow: 2px 2px 1px rgb(0 0 0 / 30%);
  width: 95px;
  height: 33px;
  text-align: center;
  padding: 5px;
  color: #fff;
  font-size: 16px;
  letter-spacing: 1px;
  font-weight: 500;
  cursor: pointer;
  background-color: #3e5a74
}


.hvr-fade:hover, .hvr-fade:focus, .hvr-fade:active
 {
  background-color:  #a7681b;
  color: #fff;
  border-radius: 5px;
}

.banner {
    position: relative;
    width: 100vw;
    height: 75em;
    background-image: url(../images/bg02.jpg);
    background-repeat: repeat-x;
    background-size: 70%;
}

.banner h1 {
    font-size: 28px;
    color: #325163;
    text-align: center;
    letter-spacing: 2px;
    line-height: 1.3;
    position: absolute;
    top: 49%;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.banner_bg, .title, .banner01, .banner02, .left, .right, .right2 {
  position: absolute;
}

.banner_bg {
  position: relative;
  width: 100vw;
  height: auto;
  margin-top: 0;
}
.title {
    top: 10%;
    left: 0;
    right: 0;
    width: 625px;
    margin: 0 auto;
    z-index: 2;
}
.banner01 {
    top: 54%;
    right: 0;
    left: 0;
    width: 1100px;
    margin: 0 auto;
    z-index: 2;
}
.banner02 {
  display: none;
}

.right {
    right: 0;
    width: 18%;
    height: auto;
    z-index: 2;
    top: 7%;
}
.right2 {
    right: 0;
    width: 18%;
    height: auto;
    z-index: 2;
    bottom: 5%;
}
.left{
    top: 7%;
    left: 0;
    width: 17%;
    height: auto;
    z-index: 2;
}

.title  {-webkit-animation-delay: 1.1s; animation-delay: 0.9s;}
.banner01 {-webkit-animation-delay: 1.3s; animation-delay: 0.7s;}
.left {-webkit-animation-delay: 0.5s; animation-delay: 0.5s;}
.right  {-webkit-animation-delay: 0.7s; animation-delay: 0.7s;}
.right2  {-webkit-animation-delay: 0.9s; animation-delay: 0.9s;}

.content01 {
  position: relative;
  display: inline-block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding-top: 4%;
  overflow: hidden;
}

.content01 .top, .content02 .top {
  padding-bottom: 2%;
}

.content01 .tex-box {
  padding-right: 6%;
  text-align: left;
  margin: 8% 0;
}

.content01 span {
  font-size: 17px;
}

.content01 h2, .content02 h2, .send h2 {
  text-align: center;
  font-size: 43px;
  color: #3e5a74;
  font-weight: bolder;
  font-family: 'Noto Serif TC', serif;
  line-height: 1.3;
  width: 800px;
  border-bottom: 2px solid #e1c79d;
  margin: 0 auto;
}
.content01 h3 {
  font-size: 21px;
  font-weight: 900;
  color: #686868;
  letter-spacing: 1px;
  border-bottom: 4px solid #e1c79d;
  padding-bottom: 8px;
}
.content01 p {
  font-size: 17px;
  color: #686868;
  letter-spacing: 1px;
}

.content01 .picture {
  margin: 0 11%;
}

.content01 img {
  width: 100%;
  height: auto;
}

.content01 .name-card {
  background-image: url(../images/name-card.svg);
  background-size: 100%;
  width: 92%;
  height: 52px;
  text-align: center;
  font-size: 22px;
  color: #fff;
  margin: 0 4%;
  line-height: 52px;
  margin-bottom: 20%;
}

.content02 {
  position: relative;
  width: 100%;
  height: 47em;
  margin: 0 auto;
  padding-top: 4%;
  /* overflow: hidden; */
}

.content02 span {
  color: #b58756;
}

.content02 h3 {
  font-size: 20px;
  text-align: center;
  letter-spacing: 1px;
  color: #686868;
}


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

.banner01 {
    top: 55%;
    width: 96%;
}
.left {
    width: 29%;
}
.right {
    width: 27%;;
}
.right2 {
    width: 20%;
}
/* swiper */
.swiper-container {
  width: 100%;
}
.content01 .name-card {
    width: 92%;
    height: 45px;
    line-height: 45px;
    font-size: 17px;
}
.content02 {
    height: 41em;
}


}
  

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

}

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

.banner {
    height: 67em;
    overflow: hidden;
}
.banner_bg {
    position: absolute;
    width: 206vw;
    height: auto;
    left: -50%;
    right: -50%;
}

.banner01 {
    top: 61%;
    width: 106%;
    margin: 0 -3%;
}
.banner h1 {
    top: 54%;
}
.send h2 {
    width: 90%;
}
.content01 .top, .content02 .top {
  padding-bottom: 10%;
}

.content01 h2, .content02 h2, .send h2 {
    width: 90%;
}
.content01 .name-card {
    margin-bottom: 0;
}
.content01 .tex-box {
    padding-right: 0;
    text-align: left;
    margin: 6%;
    height: 13em;
}
.content01, .content02 {
    padding-top: 7%;
}
.content02 {
    width: 100%;
    height: 49em;
}

}


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

.banner {
    height: 48em;
    overflow: hidden;
}
.title {
    top: 15%;
    width: 90%;
}
.left {
    top: 11%;
    width: 39%;
}
.right {
    top: 11%;
    width: 37%;
}
.right2 {
    display: none;
}
.banner_bg {
    position: absolute;
    width: 222vw;
    height: auto;
    left: -62%;
    right: -62%;
    top: 9%;
}
.banner01 {
    display: none;
}
.banner02 {
    top: 58%;
    width: 111%;
    margin: 0 -6%;
    display: block;
}
.banner h1 {
    top: 51%;
    font-size: 18px;
}
.send h2 {
    width: 90%;
}
.content01 h2, .content02 h2, .send h2 {
    font-size: 38px;
    width: 90%;
}
.content01 .name-card {
    margin-bottom: 0;
    width: 306px;
    height: 50px;
    line-height: 50px;
    margin: 0 auto;
    font-size: 23px;
}
.content01 .tex-box {
    padding-right: 0;
    text-align: center;
    margin: 6%;
    height: auto;
    padding-bottom: 8%;
}
.content01, .content02 {
    padding-top: 7%;
}
.content01 h3 {
    font-size: 21px;
}
.content01 p {
    font-size: 18px;
}
.content01 .picture {
    width: 295px;
    margin: 0 auto;
}
.content02 {
    width: 100%;
    height: 41em;
}
.content02 h3 {
    font-size: 19px;
    margin: 2% 5%;
    line-height: 1.3;
}

.hvr-fade {
    width: 200px;
    height: 40px;
    font-size: 20px;
}


}

@media screen and (max-width: 320px) {
.banner {
    height: 48em;
    overflow: hidden;
}
.title {
    top: 15%;
    width: 90%;
}
.left {
    top: 11%;
    width: 39%;
}
.right {
    top: 11%;
    width: 37%;
}
.right2 {
    display: none;
}
.banner_bg {
    position: absolute;
    width: 222vw;
    height: auto;
    left: -62%;
    right: -62%;
    top: 9%;
}
.banner01 {
    display: none;
}
.banner02 {
    top: 58%;
    width: 111%;
    margin: 0 -6%;
    display: block;
}
.banner h1 {
    top: 51%;
    font-size: 18px;
}
.send h2 {
    width: 90%;
}
.content01 h2, .content02 h2, .send h2 {
    font-size: 38px;
    width: 90%;
}
.content01 .name-card {
    margin-bottom: 0;
    width: 306px;
    height: 50px;
    line-height: 50px;
    margin: 0 auto;
    font-size: 23px;
}
.content01 .tex-box {
    padding-right: 0;
    text-align: center;
    margin: 6%;
    height: auto;
    padding-bottom: 8%;
}
.content01, .content02 {
    padding-top: 7%;
}
.content01 h3 {
    font-size: 21px;
}
.content01 p {
    font-size: 18px;
}
.content01 .picture {
    width: 260px;
    margin: 0 auto;
}
.content02 {
    width: 100%;
    height: 41em;
}
.content02 h3 {
    font-size: 19px;
    margin: 2% 5%;
    line-height: 1.3;
}

.hvr-fade {
    width: 200px;
    height: 40px;
    font-size: 20px;
}


}