* { margin: 0; padding: 0; box-sizing: border-box; font-family: 微軟正黑體; } $desktop: 1025px; $table: 1024px; $moblie: 767px; $Font-color: #fff; $title-color: #646464; $bgcolor: #f4fffc; $navbgcolor: #a9d0c5; body { position: relative; // background: url(./img/banner/banner-m.png), linear-gradient(180deg, transparent 10%, #363636 10%); // background-size: 100vw; // background-repeat: no-repeat; // background-blend-mode: overlay; background: #363636; @media screen and(max-width:$moblie) { background: #363636; } .arrow { position: fixed; right: 30px; bottom: 150px; width: 45px; height: 40px; z-index: 10; a { margin: 30px 0px; } .icon { @media screen and(max-width:$moblie) { display: none; } } &:hover { box-shadow: 1px 3px 13px -2px rgba(0, 0, 0, 0.35); } @media screen and(max-width:$moblie) { position: absolute; bottom: 200px; } } } // 主選單 #Navigation { background: rgba(112, 112, 112, 0.75); height: 4.5vw; width: 100vw !important; position: fixed; z-index: 10; @media screen and(max-width:$table) { height: 8vw; } @media screen and(max-width:$moblie) { height: 15vw; position: fixed; z-index: 5; background: rgba(0, 0, 0, 0.8); } #nav { width: 100vw; margin: 0 auto; } // rwd要注意高度 #logo { padding-top: 0.5vw; @media screen and(max-width:$moblie) { padding-top: 0; } img { width: 120px; } } #link { text-align: right; padding: 1.5vw 3vw; @media screen and(max-width:$table) { padding-top: 2vw; } @media screen and(max-width:$moblie) { display: none; } a { text-decoration: none; color: $Font-color; letter-spacing: 1px; font-size: 0.9rem; font-weight: 600; cursor: pointer; padding: 5px; position: relative; img { object-fit: cover; } } } #menu-btn1 { position: absolute; right: 1vw; top: 1vw; width: 18vw; z-index: 6; @media screen and(min-width:$desktop) { display: none; } @media screen and(min-width:768px) { display: none; } } } // 行動版-預約選單 #Navigation2 { background: rgba(112, 112, 112, 0.75); height: 4.5vw; width: 100vw !important; position: fixed; bottom: 0px; z-index: 10; @media screen and(min-width:$desktop) { display: none; } @media screen and(max-width:$table) { height: 8vw; } @media screen and(max-width:$moblie) { height: 15vw; position: fixed; z-index: 5; background: rgba(0, 0, 0, 0.8); } #nav { width: 90vw; margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); text-align: center; a { text-decoration: none; color: $Font-color; letter-spacing: 1px; font-size: 0.9rem; font-weight: 600; cursor: pointer; position: relative; img { margin: 10px auto; object-fit: cover; } } } // rwd要注意高度 } #banner { position: relative; #bannerdes-img { position: absolute; z-index: -1; opacity: 1; .banner-img { width: 100vw; object-fit: cover; height: 50vw; animation-name: Picture; animation-duration: 1s; @media screen and(max-width:$moblie) { height: 80vh; } } } @media screen and(max-width:$moblie) { // background-image: url(../img/about/banner/banner-m2.png); background-size: 115vw; background-repeat: no-repeat; } #banner-container { width: 90vw; padding-top: 18vw; @media screen and(max-width:$moblie) { padding-top: 0vw; width: 95vw; } // 電腦版 .banner-des { @media screen and(max-width:$moblie) { display: none; } .banner-1 { @media screen and(max-width:$moblie) { margin: 0; } background: rgba(141, 194, 31, 0.8); .banner1-1 { font-size: 24px; } } } // 手機板 .banner-m { padding-top: 10vw; @media screen and(min-width:$desktop) { display: none; } .bannerm-1 { @media screen and(max-width:$moblie) { margin: 0; } background: rgba(141, 194, 31, 0.8); .banner1-1 { font-size: 18px; } } } #sec01 { padding-top: 5vw; @media screen and(max-width:$moblie) { padding-top: 0; } .col-lg-2 { background: rgb(128, 171, 41); position: relative; transition: 0.5s ease-in-out; cursor: pointer; img{ } .sec02-p-m { color: #fff; text-align: center; font-size: 14px; font-weight: 900; transition: 0.5s; @media screen and(max-width:$moblie) { display: none; } @media screen and(min-width:$desktop) { width: 100%; position: absolute; top: 70px; left: 0px; font-size: 16px; opacity: 0; } } &:hover { .sec02-p-m, .sec03-p-m { opacity: 1; } img { opacity: 0.2; @media screen and(max-width:$moblie) { opacity: 1; } } } } } } } // 頁尾 footer #footer { background: #363636; text-align: center; width: 80vw; margin: 0 auto !important; a { text-decoration: none; color: #fff; } p { padding: 15px; color: #fff; } } @keyframes Picture { 0% { transform: scale(1.3); } 100% { transform: scale(1); } } @keyframes Picture2 { 0% { opacity: 0.5; } 100% { opacity: 1; } }