*{padding:0;margin:0;box-sizing:border-box;font-family:'Noto Sans TC',sans-serif}h1,h2,h3,h4,h5,h6{font-weight:400}header{display:flex;align-items:center;flex-wrap:wrap;position:sticky;top:0;z-index:4;background-color:#fff}div.logo{display:flex;align-items:center;flex:5 1 400px;margin:.5rem 6rem}div.logo img{width:5vw;height:3.6vw}header .hbgIcon{display:none}nav{flex:2 1 400px}nav ul{display:flex;list-style-type:none;justify-content:space-around}nav ul li a{color:#888;text-decoration:none;font-size:1rem;font-weight:300}nav ul li a:hover{color:#e08958;font-weight:700}main section.backimage{min-height:80vh;width:100%;background-image:url(/方最切版練習/img/a33cd24812be26a7d0dc46d0baa08eaf7b98ad19/firstpage.jpg);background-size:cover;background-position:center;position:relative;z-index:0;display:flex;justify-content:center;align-items:center;flex-direction:column;text-align:center}main section.backimage h3{font-size:3rem;color:#fff;font-weight:100;margin:2rem 0}main section.backimage div.filter{background-image:linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,.2));width:100%;min-height:80vh;position:absolute;top:0;z-index:-1}section{display:flex;align-items:center;justify-content:center}section div.second{display:flex;align-items:center;justify-content:center}section div.second img{height:3vh;margin-top:5rem}section div.second h2{font-size:1.4rem;font-weight:300;margin:5rem 0 0 0;color:#e29e6a}section2{display:flex;align-items:center;justify-content:center}section2 div.third{display:flex;align-items:center;justify-content:center}section2 div.third img{height:3vh;margin-top:5rem}section2 div.third h2{font-size:1.4rem;font-weight:300;margin:5rem 0 0 0;color:#e29e6a}banner{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;margin:5rem}banner div.left{position:relative}banner div.left img{height:21vw;width:25vw}banner div.left div.orangerect{width:25vw;height:20vw;background-color:#e08958;position:absolute;top:30px;left:20px;z-index:-1}banner div.right hr{margin:3rem 0 0 0;display:flex;background-color:#e08958;height:1px;border:none}banner div.right p{padding:2rem 7.5rem;color:#40301b}banner2{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;margin:5rem;line-height:1.5}banner2 div.right hr{margin:3rem 0 0 0;display:flex;background-color:#e08958;height:1px;border:none}banner2 div.right p{padding:2rem 4.5rem;color:#40301b}banner2 div.left{position:relative}banner2 div.left img{height:21vw;width:25vw}banner2 div.left div.orangerect2{width:25vw;height:20vw;background-color:#e08958;position:absolute;top:30px;left:20px;z-index:-1}banner3{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}banner3 section.cards{display:flex;max-width:1200px;min-height:80vh;flex-wrap:wrap}banner3 section.cards div.card{display:flex;flex-direction:column;align-items:center;justify-content:space-around;padding:4rem;flex:1 1 300px}banner3 section.cards div.card div.image-container{overflow:hidden}banner3 section.cards div.card div.image-container img{width:15vw;transition:all .2s}banner3 section.cards div.card div.image-container img:hover{transform:scale(1.2)}banner3 section.cards div.card h4{margin:1rem 0;font-size:1rem;color:#e08958}banner3 section.cards div.card p{color:#40301b;font-size:.6rem}banner3 section.cards div.card a{margin:1rem 0;text-decoration:none;padding:1rem 1.5rem;background-color:#e08958;color:#fff;font-size:1rem;border-radius:15px}footer{display:flex;flex-direction:column;align-items:center;min-height:40vh;justify-content:space-around;border-top:1px solid #e08958}footer div.logo2{display:flex}footer div.logo2 img{width:6vw;height:4.2vw}footer nav2{width:30%}footer nav2 ul{display:flex;list-style-type:none;width:100%;justify-content:space-around;flex-wrap:wrap}footer nav2 ul li{flex-basis:100px;text-align:center}footer nav2 ul li a{color:#e08958;text-decoration:none;font-size:1rem;font-weight:300}footer nav2 ul li a:hover{font-weight:700}footer section.links a{margin:0 1rem}footer section.links a img{color:#e08958;width:2vw;height:2vw}@media screen and (max-width:768px){header .hbgIcon{margin:1rem;display:block;border:none;cursor:pointer;background-color:#fff}header .logo{position:fixed}header nav{background-color:#fff;position:absolute;top:100%;width:50%;transition:transform .3s ease-out;transform:scale(1,0);transform-origin:top}header nav ul{width:100%;flex-direction:column}header nav ul li{padding:1rem 2rem}.show{transform:scale(1,1)}.logo img{min-height:2.5rem;min-width:3.4rem}footer div.logo2 img{width:15vw;height:11vw}footer section.links a img{width:6vw;height:6vw}}@media screen and (max-width:576px){main section.backimage{min-height:60vh}main section.backimage div.filter{min-height:60vh}banner div.left img{height:61vw;width:65vw}banner div.right p{padding:2rem;color:#40301b}banner2 div.left img{height:61vw;width:65vw}banner2 div.right p{padding:2rem;color:#40301b}banner3 section.cards div.card div.image-container img{width:60vw}}