@charset "utf-8";
html {
  scroll-behavior: smooth;
}
body nav h3 {
  font-size: 18px;
  margin-left: 20px;
  font-weight: 500;
}
body {
  font-family: 'Noto Sans TC', sans-serif;
}
body nav {
  width: 98.75%;
  height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  z-index: 1000;
  background-color: #0E3708;
  opacity: 0.9;
}
body nav a:link {
  color: #F2F5F1;
  text-decoration: none;
}
nav ul li {
  display: inline;
  margin-right: 43px;
}
body nav a:visited {
  text-decoration: none;
	color: #F2F5F1;
}
body nav a:hover {
    color: #B9EDC3;
}

body header h1 {
  color: #FFFFFF;
  text-align: center;
  font-weight: 700;
  line-height: 95px;
  font-size: 70px;
  padding-top: 60px;
}
body header {
  width: 100%;
  height: 100vh;
  background-image: url(tea.png);
  background-size: cover;
  background-position: 0% center;
  padding-top: 10%;
}
body header h2 {
  color: #FFFFFF;
  text-align: center;
  font-weight: 700;
  line-height: 95px;
  font-size: 30px;
  margin-top: -50px;
}
body footer {
  width: 100%;
  height: 60px;
  background-color: #264B21;
  text-align: center;
  font-size: 14px;
  line-height: 60px;
  color: #E6E6E6;	
}
body footer a:link {
  color: #F2F5F1;
  text-decoration: none;
}
body footer a:visited {
  color: #B9EDC3;
  text-decoration: none;
}
body footer a:hover {
    color: #B9EDC3;
}
#a01 h2 {
  color: #563916;
  margin-top: 30px;
  margin-left: 30px;
}
#a01 .word1 {
  background-color: #F8EEDE;
  border-radius: 10px;
  padding-top: 50px;
  padding-right: 50px;
  padding-bottom: 30px;
  padding-left: 50px;
  color: #6B5E50;
  letter-spacing: 5px;
  font-size: large;
  margin-left: 10%;
}
#a01 .container1 {
  display: flex;
  margin-top: 40px;
  margin-bottom: 20px;
}
#a01 .container1 .title1 {}
#a01 .container1 .p1 {
  background-image: url(%E5%9C%96%E7%A4%BA/%E5%B0%8F%E8%88%B9.png);
  background-size: cover;
  background-position: center center;
  margin-left: 60%;
}
#a01 .container2 {
  display: flex;
}
#a01 .container2 .p2 {
  background-image: url(%E5%9C%96%E7%A4%BA/%E7%AE%B1%E5%AD%90.png);
  background-position: center center;
  background-size: cover;
  margin-right: 10%;
  margin-top: 10%;
}
#a01 .p3 {
  background-image: url(%E5%9C%96%E7%A4%BA/%E5%A4%A7%E8%88%B9.png);
  background-position: center center;
  background-size: cover;
  margin-left: 10%;
  margin-right: 80%;
  margin-top: 20px;
  margin-bottom: 20px;
  padding-bottom: 30px;
  padding-top: 30px;
}
#a02 .word2 {
  color: #1B4415;
  border-radius: 10px;
  padding-top: 50px;
  padding-right: 50px;
  padding-bottom: 30px;
  padding-left: 50px;
  background-color: #EDF9E5;
  letter-spacing: 5px;
  font-size: large;
  margin-right: 100px;
}
#a02 .title2 h2 {
  color: #1B4415;
  text-align: right;
  margin-right: 50px;
  margin-top: 50px;
}
#a02 .container3 {
  display: flex;
  margin-top: 40px;
  margin-bottom: 60px;
  margin-left: 30px;
}
#a02 .container3 .p4 {
  background-size: cover;
  background-image: url(%E5%9C%96%E7%A4%BA/%E6%BC%A2%E4%BA%BA.png);
  background-position: center center;
  margin-left: 50px;
  padding-left: 0px;
  padding-right: 0px;
  margin-right: 20px;
}
#a02 .container4 {
    display: flex;
    margin-left: 70%;
    height: 80px;
    margin-top: -100px;
    padding-bottom: 0px;
    margin-bottom: 60px;
}
#a02 .container4 .p5 {
  background-position: center center;
  margin-top: 20px;
  margin-right: -48px;
  margin-bottom: 20px;
  margin-left: 144px;
  background-size: 80% auto;
  background-image: url(%E5%9C%96%E7%A4%BA/%E7%B6%A0%E8%8C%B6.png);
}
#a02 .container4 .p6 {
  background-image: url(%E5%9C%96%E7%A4%BA/%E7%B6%A0%E8%8C%B6.png);
  background-position: center center;
  margin-top: 20px;
  margin-right: -52px;
  margin-bottom: 20px;
  margin-left: 38px;
  background-size: 80% auto;
  padding-left: 0px;
  padding-bottom: 0px;
  padding-right: 0px;
}
#a02 .container4 .p7 {
  background-image: url(%E5%9C%96%E7%A4%BA/%E7%B6%A0%E8%8C%B6.png);
  background-position: center center;
  margin-top: 20px;
  margin-right: -52px;
  margin-bottom: 20px;
  margin-left: 38px;
  background-size: 80% auto;
  padding-left: 0px;
  padding-bottom: 0px;
  padding-right: 0px;
}
#a02 .container5 {
  display: flex;
}
#a02 .container5 .word3 {
    color: #21567C;
    background-color: #E1F9F9;
    border-radius: 10px;
    padding-top: 50px;
    padding-right: 50px;
    padding-bottom: 30px;
    padding-left: 50px;
    letter-spacing: 5px;
    font-size: large;
    margin-left: 100px;
    margin-right: 20px;
}
#a02 .container5 .container6 {
    margin-top: 200px;
}
.container5 .container6 .p8 {
    background-image: url(%E5%9C%96%E7%A4%BA/%E8%88%B9+%E5%BD%8E%E5%88%80.png);
    background-position: center bottom;
    background-size: cover;
    height: 60px;
    margin-top: -60px;
    margin-right: 150px;
}
.container5 .container6 .p9 {
    height: 60px;
    background-position: center center;
    background-image: url(%E5%9C%96%E7%A4%BA/%E8%88%B9+%E8%8C%B6%E8%91%89.png);
    background-size: cover;
    margin-left: 100px;
    margin-top: 20px;
}
#a02 .container5 .p10 {
    background-image: url(%E5%9C%96%E7%A4%BA/%E5%9C%B0%E7%90%83.png);
    background-position: center center;
    background-size: cover;
    margin-top: 50px;
    margin-bottom: 50px;
    padding-left: 10px;
    margin-right: 40px;
    padding-right: 20px;
}
#a02 .word4 {
    color: #6E1313;
    background-color: #FBECF6;
    border-radius: 10px;
    padding-top: 50px;
    padding-right: 50px;
    padding-bottom: 30px;
    padding-left: 50px;
    letter-spacing: 5px;
    font-size: large;
    margin-top: 100px;
    margin-left: 100px;
    margin-right: 100px;
}
#a02 .container7 {
    display: flex;
    height: 50px;
    margin-left: 30%;
    margin-bottom: 20px;
    margin-top: 25px;
}
#a02 .container7 .p11 {
    background-image: url(%E5%9C%96%E7%A4%BA/%E8%8A%B1%E8%8C%B6.png);
    background-position: center center;
    background-size: cover;
    margin-right: 9px;
    margin-left: -30px;
    padding-bottom: 6px;
    padding-left: 6px;
    margin-top: -13px;
    margin-bottom: -14px;
}
#a02 .container7 .p12 {
    background-image: url(%E5%9C%96%E7%A4%BA/%E6%A2%94%E5%AD%90%E8%8A%B1.png);
    background-position: center center;
    background-size: cover;
    margin-top: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    padding-top: 8px;
    padding-bottom: 40px;
}
#a02 .container7 .p13 {
    background-image: url(%E5%9C%96%E7%A4%BA/%E8%8A%B1%E8%8C%B6.png);
    background-position: center center;
    background-size: cover;
    margin-left: 19px;
    margin-top: -10px;
    margin-bottom: -5px;
}
#a02 .container7 .p14 {
    background-image: url(%E5%9C%96%E7%A4%BA/%E8%8C%89%E8%8E%89%E8%8A%B1.png);
    background-position: center center;
    background-size: cover;
    margin-left: 17px;
    padding-top: 39px;
    padding-bottom: 20px;
    padding-left: 19px;
}
#a02 .container7 .p15 {
    background-image: url(%E5%9C%96%E7%A4%BA/%E8%AE%9A.png);
    background-position: center center;
    background-size: cover;
    margin-left: 28px;
    margin-top: -6px;
}
#a02 .container8 {
    display: flex;
    margin-top: 100px;
}
#a02 .container8 .container9 {
    margin-top: 20px;
}
.container8 .container9 .container10 {
    display: flex;
    height: 100px;
}
.container9 .container10 .p16 {
    background-image: url(%E5%9C%96%E7%A4%BA/%E9%8C%A2.png);
    background-position: center center;
    background-size: cover;
}
.container9 .container10 .p17 {
	    background-image: url(%E5%9C%96%E7%A4%BA/%E9%8C%A2.png);
    background-position: center center;
    background-size: cover;
}
.container9 .container10 .p18 {
	    background-image: url(%E5%9C%96%E7%A4%BA/%E9%8C%A2.png);
    background-position: center center;
    background-size: cover;
}
.container8 .container9 .p19 {
    background-image: url(%E5%9C%96%E7%A4%BA/%E9%8C%A2.png);
    background-position: center center;
    background-size: cover;
}
#a02 .container8 .p20 {
    background-position: center center;
    background-image: url(%E5%9C%96%E7%A4%BA/%E5%8F%B0%E7%81%A3.png);
    margin-right: 10px;
    background-size: 100% 100%;
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 0px;
    margin-top: 30px;
    margin-bottom: 30px;
    margin-left: 0px;
}
#a02 .container8 .word5 {
    color: #664111;
    background-color: #FFFBE0;
    border-radius: 10px;
    padding-top: 50px;
    padding-right: 50px;
    padding-bottom: 30px;
    padding-left: 50px;
    letter-spacing: 5px;
    font-size: large;
    margin-right: 100px;
}
#a03 .container11 {
	display: flex;
}
#a03 .container11 .word6 {
    border-radius: 10px;
    padding-top: 50px;
    padding-right: 50px;
    padding-bottom: 30px;
    padding-left: 50px;
    letter-spacing: 5px;
    font-size: large;
    color: #5C5B74;
    background-color: #E6E6F1;
    margin-left: 100px;
}
#a03 .container11 .container12 {
    margin-left: 30px;
    margin-right: 30px;
}
.container11 .container12 .p21 {
    background-position: center center;
    background-size: cover;
    padding-top: 40px;
    padding-left: 30px;
    padding-right: 30px;
    margin-right: 10px;
    background-image: url(%E5%9C%96%E7%A4%BA/%E7%81%B0%E8%8C%B6.png);
}
.container11 .container12 .container13 {
    display: flex;
    margin-top: 20px;
    margin-bottom: 30px;
    height: 60px;
}
.container12 .container13 .p22 {
    background-position: center center;
    background-size: cover;
    background-image: url(%E5%9C%96%E7%A4%BA/%E5%AF%A6%E9%A9%97.png);
}
.container12 .container13 .p23 {
    background-position: center center;
    background-size: cover;
    background-image: url(%E5%9C%96%E7%A4%BA/%E6%A9%9F%E5%99%A8.png);
}
.container11 .container12 .p24 {
    background-position: center center;
    background-size: cover;
    margin-left: 18px;
    margin-right: 8px;
    margin-top: 30px;
    background-image: url(%E5%9C%96%E7%A4%BA/%E8%8C%B6x4.png);
}
#a03 .title3 {
    color: #464646;
    margin-top: 100px;
    margin-left: 30px;
}
#a03 .container14 {
    display: flex;
    margin-top: 100px;
    margin-left: 20px;
}
#a03 .container14 .p25 {
    background-image: url(%E5%9C%96%E7%A4%BA/%E6%98%9F%E6%98%9F.png);
    background-position: center center;
    margin-top: 60px;
    background-size: 108% 100%;
}
.container14 .p25 .p26 {
    background-image: url(%E5%9C%96%E7%A4%BA/%E6%97%A5%E6%9C%88%E8%8C%B6.png);
    background-position: center center;
    margin-left: 50px;
    margin-right: 50px;
    background-size: cover;
    margin-top: 70px;
    padding-top: 30px;
}
#a03 .container14 .word7 {
    border-radius: 10px;
    padding-top: 50px;
    padding-right: 50px;
    padding-bottom: 30px;
    padding-left: 50px;
    letter-spacing: 5px;
    font-size: large;
    color: #681A1D;
    background-color: #FFE5E5;
    margin-right: 100px;
    margin-left: 50px;
}
#a03 .container15 {
    display: flex;
    margin-top: 100px;
    margin-right: 20px;
    margin-bottom: 200px;
}
#a03 .container15 .word8 {
    border-radius: 10px;
    padding-top: 50px;
    padding-right: 50px;
    padding-bottom: 30px;
    padding-left: 50px;
    letter-spacing: 5px;
    font-size: large;
    margin-left: 100px;
    color: #604920;
    background-color: #E3D9CA;
    margin-right: 30px;
}
#a03 .container15 .p27 {
    background-image: url(%E5%9C%96%E7%A4%BA/%E5%BA%95%E5%9C%96.png);
    background-position: center center;
    background-size: cover;
    margin-left: 20px;
}
.container15 .p27 .container16 {
    display: flex;
    margin-top: 80px;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: -80px;
}
.p27 .container16 .p28 {
    background-image: url(%E5%9C%96%E7%A4%BA/%E7%B4%85%E8%8C%B6%E5%9C%96.png);
    background-position: center center;
    background-size: cover;
    margin-top: -43px;
}
.p27 .container16 .p29 {
    background-image: url(%E5%9C%96%E7%A4%BA/%E7%83%8F%E9%BE%8D%E8%8C%B6%E5%9C%96.png);
    background-position: center center;
    background-size: cover;
    margin-top: -38px;
}
.p27 .container16 .p30 {
    background-image: url(%E5%9C%96%E7%A4%BA/%E7%B6%A0%E8%8C%B6%E5%9C%96.png);
    background-position: center center;
    background-size: cover;
    margin-top: -21px;
}
body p {
    color: #0F3F0B;
}

.p27 .container16 div {
    background-image: url(%E5%9C%96%E7%A4%BA/%E7%B4%85%E8%8C%B6%E5%9C%96.png);
    background-position: center top;
    margin-top: 94px;
    margin-bottom: 95px;
}
body nav a {
    -webkit-transition: all 500ms 0s;
    -o-transition: all 500ms 0s;
    transition: all 500ms 0s;
}
body footer {
    -webkit-transition: all 500ms 0s;
    -o-transition: all 500ms 0s;
    transition: all 500ms 0s;
}