|
|
| Line 1: |
Line 1: |
| | {{Mingdao}} | | {{Mingdao}} |
| − |
| |
| − |
| |
| | <html lang="en"> | | <html lang="en"> |
| | <head> | | <head> |
| Line 11: |
Line 9: |
| | | | |
| | <style type="text/css"> | | <style type="text/css"> |
| − |
| |
| − | * {
| |
| − | margin: 0;
| |
| − | padding: 0;
| |
| − | box-sizing: border-box; }
| |
| − |
| |
| − | body {
| |
| − | width: 100%;
| |
| − | margin: 0;
| |
| − | padding: 0;
| |
| − | font-family: 'Ubuntu' !important; }
| |
| − |
| |
| − |
| |
| − | .bg-container {
| |
| − | background-attachment: fixed;
| |
| − | background-color: white;
| |
| − | margin-top: 0px;
| |
| − | overflow: scroll;
| |
| − | position: relative;
| |
| − | background-image: url();
| |
| − | background-repeat: no-repeat;
| |
| − | background-size: 100%;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | .my-main-container {
| |
| − | width: 100%;
| |
| − | padding: 0%;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | .main-content {
| |
| − | background-color: black;
| |
| − | width: 100%;
| |
| − | margin-left: 0%;
| |
| − | padding: 50px;
| |
| − | min-height: 150vh;
| |
| − | z-index: 10; }
| |
| − |
| |
| − | .text-area {
| |
| − | margin-bottom: 80px; }
| |
| − | .text-area h1 {
| |
| − | font-size: 130px;
| |
| − | font-weight: 700;
| |
| − | font-family: 'Arizonia' !important;
| |
| − | text-align: center;
| |
| − | margin-bottom: 1rem; }
| |
| − | .text-area p {
| |
| − | font-size: 22px;
| |
| − | font-weight: 500; }
| |
| − |
| |
| − | .m-block img {
| |
| − | width: 100%; }
| |
| − |
| |
| − | .path-btns {
| |
| − | position: fixed;
| |
| − | width: 250px;
| |
| − | top: 100px;
| |
| − | left: 225px; }
| |
| − | .path-btns .path-dot {
| |
| − | width: 25px;
| |
| − | height: 25px;
| |
| − | border-radius: 50%;
| |
| − | position: absolute;
| |
| − | background-color: #fff;
| |
| − | top: 5px;
| |
| − | left: 27px;
| |
| − | border: 5px solid #385e66;
| |
| − | cursor: pointer; }
| |
| − | .path-btns .path-dot.active {
| |
| − | background-color: #385e66; }
| |
| − | .path-btns .path-dot:hover {
| |
| − | transition: all .3s;
| |
| − | transform: scale(1.2); }
| |
| − |
| |
| − |
| |
| − | .path {
| |
| − | height: 100px;
| |
| − | display: flex; }
| |
| − | .path .pathSvg {
| |
| − | display: block; }
| |
| − | .path .pathWord {
| |
| − | padding-right: 10%; }
| |
| − | .path .path-btn {
| |
| − | cursor: pointer;
| |
| − | fill: #fff; }
| |
| − | .path .path-btn.path-active {
| |
| − | fill: #385e66; }
| |
| − | .path .path-word-sm {
| |
| − | font-size: 12px; }
| |
| − | #HQ_page .path .pathWord p {
| |
| − | font-weight: 700;
| |
| − | text-align: left !important;
| |
| − | font-size: 16px;
| |
| − | }
| |
| − | #HQ_page .text-area p {
| |
| − | font-size: 22px;
| |
| − | font-family: 'Ubuntu';
| |
| − | font-weight: 500; }
| |
| − | img.center {
| |
| − | display: block;
| |
| − | margin: 0 auto; }
| |
| − |
| |
| − | .text-area h2{
| |
| − | text-align: center;
| |
| − | margin-bottom: 2rem !important;
| |
| − | margin-top: 2rem;
| |
| − | color: black!important;
| |
| − | font-size: 60px;
| |
| − | font-weight:bold;
| |
| − | font-family:serif;
| |
| − | }
| |
| − | .text-area h3{
| |
| − | text-align: left;
| |
| − | margin-bottom: 2rem !important;
| |
| − | margin-top: 2rem;
| |
| − | color: #4682B4 !important;
| |
| − | font-size: 28px;
| |
| − | font-weight:bold;
| |
| − | }
| |
| − | //hot紅色區塊
| |
| − | .fig_icon{
| |
| − | position: absolute;//設為絕對定位(absolute)
| |
| − | font-weight: bold;
| |
| − | font-size:8;
| |
| − | top: 40%;
| |
| − | bottom: 0px;
| |
| − | left: 50px;
| |
| − | right : 0px; //右邊上面都設0，則出現在右上方
| |
| − | color: white;
| |
| − | display: block;
| |
| − | background: red;
| |
| − | width: 110px;
| |
| − | height: 40px;
| |
| − | text-align: center;
| |
| − | z-index:1;
| |
| − | }
| |
| − | .fig_icon1{
| |
| − | position: absolute;//設為絕對定位(absolute)
| |
| − | font-weight: bold;
| |
| − | font-size:50;
| |
| − | top: 85%;
| |
| − | bottom: 0px;
| |
| − | left: 40px;
| |
| − | right : 0px; //右邊上面都設0，則出現在右上方
| |
| − | color: white;
| |
| − | display: block;
| |
| − |
| |
| − | width: 110px;
| |
| − | height: 30px;
| |
| − | text-align: center;
| |
| − |
| |
| − | }
| |
| − | .top {
| |
| − | position: fixed;
| |
| − | right: 50px;
| |
| − | bottom: 50px;
| |
| − | height: 50px;
| |
| − | width: 50px;
| |
| − | cursor: pointer; }
| |
| − | .top img {
| |
| − | width: 100%; }
| |
| − | img.pic {
| |
| − | display: block !important;
| |
| − | margin: 40px auto !important;
| |
| − | }
| |
| − | .top-picture{
| |
| − | z-index:1;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | .video {
| |
| − | position:relative;
| |
| − | width: 100%;
| |
| − | height:auto;
| |
| − | margin: 20px auto !important;
| |
| − | }
| |
| − | hr.style-two {
| |
| − | border: 0;
| |
| − | height: 1px;
| |
| − | background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
| |
| − | }
| |
| − |
| |
| − |
| |
| | | | |
| | </style> | | </style> |
