|
@@ -0,0 +1,655 @@
|
|
|
+.navbar {
|
|
|
+ box-shadow: 0 2px 10px 2px rgb(204, 204, 204);
|
|
|
+ background-color: white;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.navbar .navbar-collapse {
|
|
|
+ flex-grow: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.header {
|
|
|
+ margin-top: 77px;
|
|
|
+ padding-top: 6.5rem;
|
|
|
+ height: 75vh;
|
|
|
+ position: relative;
|
|
|
+ padding-bottom: 3rem;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.header__lefttop {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ z-index: -1;
|
|
|
+ width: 350px;
|
|
|
+}
|
|
|
+
|
|
|
+.header__title {
|
|
|
+ font-size: 4rem;
|
|
|
+ color: #20616D;
|
|
|
+ font-weight: 400;
|
|
|
+}
|
|
|
+
|
|
|
+.header__sub {
|
|
|
+ color: #38A7BB;
|
|
|
+ font-size: 1.5rem;
|
|
|
+ font-weight: 300;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.header__sub::before, .header__sub::after {
|
|
|
+ content: " ";
|
|
|
+ position: absolute;
|
|
|
+ width: 12%;
|
|
|
+ height: 1px;
|
|
|
+ background-color: #38A7BB;
|
|
|
+ top: 50%;
|
|
|
+}
|
|
|
+
|
|
|
+.header__sub::before {
|
|
|
+ left: 28%;
|
|
|
+}
|
|
|
+
|
|
|
+.header__sub::after {
|
|
|
+ left: 60%;
|
|
|
+}
|
|
|
+
|
|
|
+.header__form {
|
|
|
+ margin: 1rem auto;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+.header__form__input {
|
|
|
+ border-radius: 10rem;
|
|
|
+ padding: .4rem .8rem;
|
|
|
+ width: 60%;
|
|
|
+ margin-left: 4.5rem;
|
|
|
+}
|
|
|
+
|
|
|
+.header__form__sub {
|
|
|
+ border-radius: 10rem;
|
|
|
+ background-color: #FCA25E;
|
|
|
+ color: white;
|
|
|
+ border: none;
|
|
|
+ width: 5rem;
|
|
|
+ transform: translateX(-100%);
|
|
|
+ transition: all .3s;
|
|
|
+}
|
|
|
+
|
|
|
+.header__form__sub:hover {
|
|
|
+ background-color: #ff892e;
|
|
|
+}
|
|
|
+
|
|
|
+.header__right {
|
|
|
+ width: 80%;
|
|
|
+ height: 50vh;
|
|
|
+ background-image: url('../imgs/電腦2.webp');
|
|
|
+ background-size: contain;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ margin: 0 auto;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.header__right__cir {
|
|
|
+ width: 60%;
|
|
|
+ position: absolute;
|
|
|
+ right: 0%;
|
|
|
+ top: -5%;
|
|
|
+ z-index: -1;
|
|
|
+}
|
|
|
+
|
|
|
+.header__right__video {
|
|
|
+ position: absolute;
|
|
|
+ width: calc(80% - 10%);
|
|
|
+ height: auto;
|
|
|
+ left: 3.3rem;
|
|
|
+ top: 1.8rem;
|
|
|
+}
|
|
|
+
|
|
|
+.header__right__magnifier {
|
|
|
+ position: absolute;
|
|
|
+ width: 25%;
|
|
|
+ right: 3%;
|
|
|
+ bottom: 1%;
|
|
|
+}
|
|
|
+
|
|
|
+.header__right__bubble {
|
|
|
+ position: absolute;
|
|
|
+ width: 22%;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ transform: translate(-60%, -50%);
|
|
|
+}
|
|
|
+
|
|
|
+.header__right__linecir {
|
|
|
+ width: 45%;
|
|
|
+ position: absolute;
|
|
|
+ left: -8%;
|
|
|
+ bottom: -3%;
|
|
|
+ z-index: -1;
|
|
|
+}
|
|
|
+
|
|
|
+.category {
|
|
|
+ padding: 2rem 0;
|
|
|
+}
|
|
|
+
|
|
|
+.category__btngrp {
|
|
|
+ padding: 0 8rem;
|
|
|
+}
|
|
|
+
|
|
|
+.category__btn {
|
|
|
+ background-color: #A7D9E2;
|
|
|
+ border: none;
|
|
|
+ border-radius: 5rem;
|
|
|
+ outline: none;
|
|
|
+ color: white;
|
|
|
+ font-size: 1.3rem;
|
|
|
+ padding: .4rem 2rem;
|
|
|
+}
|
|
|
+
|
|
|
+.category__btn.active {
|
|
|
+ background-color: #38A7BB;
|
|
|
+}
|
|
|
+
|
|
|
+.card__rank {
|
|
|
+ border: 1px solid #CECECE;
|
|
|
+ box-shadow: 1px 1px 5px 1px rgb(211, 211, 211);
|
|
|
+ position: relative;
|
|
|
+ padding: 1rem 1.5rem;
|
|
|
+}
|
|
|
+
|
|
|
+.top20 .card__rank {
|
|
|
+ margin-bottom: 1.5rem;
|
|
|
+}
|
|
|
+
|
|
|
+.top3 {
|
|
|
+ padding: 3rem 0rem;
|
|
|
+ padding-bottom: 5rem;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.top3 .row {
|
|
|
+ padding: 0rem 4rem;
|
|
|
+}
|
|
|
+
|
|
|
+.top3 .backfill {
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ height: 100px;
|
|
|
+ background-color: #FFEBE8;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ top: 7rem;
|
|
|
+}
|
|
|
+
|
|
|
+.top3__num {
|
|
|
+ color: #FCA25E;
|
|
|
+ font-size: 5.8rem;
|
|
|
+ font-family: 'Trebuchet MS';
|
|
|
+ position: absolute;
|
|
|
+ left: 1rem;
|
|
|
+ top: -3.5rem;
|
|
|
+ font-weight: 300;
|
|
|
+}
|
|
|
+
|
|
|
+.card__rank__word {
|
|
|
+ color: #20616D;
|
|
|
+ margin-left: 3rem;
|
|
|
+ font-size: 1.8rem;
|
|
|
+ font-weight: 400;
|
|
|
+}
|
|
|
+
|
|
|
+.card__rank__goto {
|
|
|
+ text-align: right;
|
|
|
+}
|
|
|
+
|
|
|
+.card__rank__link {
|
|
|
+ color: #38A7BB;
|
|
|
+ text-decoration: none;
|
|
|
+ font-weight: 400;
|
|
|
+}
|
|
|
+.card__rank__link:hover {
|
|
|
+ color: #19879b;
|
|
|
+}
|
|
|
+
|
|
|
+.top20 {
|
|
|
+ padding-bottom: 5rem;
|
|
|
+}
|
|
|
+
|
|
|
+.top20 .row {
|
|
|
+ padding: 0rem 4rem;
|
|
|
+}
|
|
|
+
|
|
|
+.top20 .card__rank__word {
|
|
|
+ margin-left: 0;
|
|
|
+}
|
|
|
+.top20__num {
|
|
|
+ color: #FCA25E;
|
|
|
+ font-size: 2.5rem;
|
|
|
+ font-family: 'Trebuchet MS';
|
|
|
+ font-weight: 300;
|
|
|
+ display: inline-block;
|
|
|
+ width: 2.2rem;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.footer {
|
|
|
+ background-color: #555555;
|
|
|
+ padding: 50px 0;
|
|
|
+ color: #999999;
|
|
|
+}
|
|
|
+
|
|
|
+.footer h4 {
|
|
|
+ text-transform: uppercase;
|
|
|
+ color: white;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 800;
|
|
|
+}
|
|
|
+
|
|
|
+.footer__btn__text {
|
|
|
+ font-size: 1.3rem;
|
|
|
+ color: white;
|
|
|
+}
|
|
|
+
|
|
|
+.footer .btn {
|
|
|
+ border: 2px solid #38a7bb;
|
|
|
+ color: #38a7bb;
|
|
|
+ text-decoration: none;
|
|
|
+}
|
|
|
+
|
|
|
+.followus__btn {
|
|
|
+ text-decoration: none;
|
|
|
+ color: white;
|
|
|
+}
|
|
|
+
|
|
|
+.followus__btn:hover {
|
|
|
+ color: #38a7bb;
|
|
|
+}
|
|
|
+
|
|
|
+.footer .btn:hover {
|
|
|
+ color: white;
|
|
|
+ background-color: #38a7bb;
|
|
|
+}
|
|
|
+
|
|
|
+.followus__txt {
|
|
|
+ display: inline-block;
|
|
|
+ margin-right: 1rem;
|
|
|
+ color: white;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+
|
|
|
+.footer_img {
|
|
|
+ height: 60px;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+/* content page */
|
|
|
+
|
|
|
+.cntheader {
|
|
|
+ margin-top: 81px;
|
|
|
+ padding: 4rem 0;
|
|
|
+ position: relative;
|
|
|
+ padding-bottom: 2rem;
|
|
|
+}
|
|
|
+
|
|
|
+.cntheader__sub {
|
|
|
+ color: #38A7BB;
|
|
|
+ font-size: 1.5rem;
|
|
|
+ font-weight: 300;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.cntheader__sub::before, .cntheader__sub::after {
|
|
|
+ content: " ";
|
|
|
+ position: absolute;
|
|
|
+ width: 15%;
|
|
|
+ height: 1px;
|
|
|
+ background-color: #38A7BB;
|
|
|
+ top: 50%;
|
|
|
+}
|
|
|
+
|
|
|
+.cntheader__sub::before {
|
|
|
+ left: 18%;
|
|
|
+}
|
|
|
+
|
|
|
+.cntheader__sub::after {
|
|
|
+ left: 67%;
|
|
|
+}
|
|
|
+
|
|
|
+.cntheader .category__btngrp {
|
|
|
+ padding: 0 4rem;
|
|
|
+}
|
|
|
+
|
|
|
+.card__art {
|
|
|
+ padding: 1rem;
|
|
|
+ border: 1px solid #20616D;
|
|
|
+ border-radius: 1rem;
|
|
|
+ margin-bottom: 1rem;
|
|
|
+}
|
|
|
+
|
|
|
+.card__title {
|
|
|
+ font-size: 1.8rem;
|
|
|
+ font-weight: 400;
|
|
|
+}
|
|
|
+
|
|
|
+.card__text {
|
|
|
+ color: #918F8F;
|
|
|
+}
|
|
|
+
|
|
|
+.card__link {
|
|
|
+ display: inline-block;
|
|
|
+ color: #38A7BB;
|
|
|
+ margin-right: 1rem;
|
|
|
+ text-decoration: none;
|
|
|
+}
|
|
|
+
|
|
|
+.card__link:hover {
|
|
|
+ color: #20616D;
|
|
|
+}
|
|
|
+
|
|
|
+.toparticle {
|
|
|
+ border: 1px solid #CECECE;
|
|
|
+ box-shadow: 1px 2px 3px 1px rgb(224, 224, 224);
|
|
|
+}
|
|
|
+
|
|
|
+.toparticle__title {
|
|
|
+ color: white;
|
|
|
+ background-color: #38A7BB;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 1.3rem;
|
|
|
+ padding: .3rem 0;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.toparticle__title img {
|
|
|
+ position: absolute;
|
|
|
+ width: 150px;
|
|
|
+ right: -4rem;
|
|
|
+ top: -3.5rem;
|
|
|
+}
|
|
|
+
|
|
|
+.toparticle__list {
|
|
|
+ padding: 1.5rem;
|
|
|
+ padding-top: 0;
|
|
|
+ list-style: none;
|
|
|
+ padding-bottom: 1rem;
|
|
|
+}
|
|
|
+
|
|
|
+.toparticle__list-item {
|
|
|
+ padding: .3rem;
|
|
|
+ border-bottom: 1px solid #CECECE;
|
|
|
+ color: #38A7BB;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.toparticle__list-item:nth-of-type(10) {
|
|
|
+ border: none;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.toparticle__list-item a {
|
|
|
+ text-decoration: none;
|
|
|
+ color: #38A7BB;
|
|
|
+}
|
|
|
+
|
|
|
+.toparticle__num {
|
|
|
+ color: #FCA25E;
|
|
|
+ font-size: 1.8rem;
|
|
|
+ font-family: 'Trebuchet MS';
|
|
|
+ font-weight: 300;
|
|
|
+ margin-right: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.toparticle__top {
|
|
|
+ font-size: 2rem;
|
|
|
+}
|
|
|
+
|
|
|
+.toparticle__list-item small {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 45%;
|
|
|
+}
|
|
|
+
|
|
|
+.cntsubscribe {
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.cntsubscribe__form {
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.cntsubscribe__sub {
|
|
|
+ border-radius: 10rem;
|
|
|
+ background-color: #FCA25E;
|
|
|
+ color: white;
|
|
|
+ border: none;
|
|
|
+ width: 5rem;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ padding: .45rem .8rem;
|
|
|
+}
|
|
|
+
|
|
|
+.cntsubscribe__sub:hover {
|
|
|
+ background-color: #ff892e;
|
|
|
+ color: white;
|
|
|
+}
|
|
|
+
|
|
|
+.cntsubscribe__input {
|
|
|
+ border-radius: 10rem;
|
|
|
+ padding: .4rem .8rem;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+@media (max-width: 1300px) {
|
|
|
+ .header__right__video {
|
|
|
+ position: absolute;
|
|
|
+ width: calc(80% - 4%);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media (max-width: 992px) {
|
|
|
+ .header__title {
|
|
|
+ font-size: 3rem;
|
|
|
+ }
|
|
|
+ .cntheader .header__title {
|
|
|
+ font-size: 2.2rem;
|
|
|
+ }
|
|
|
+ .header {
|
|
|
+ padding-top: 4rem;
|
|
|
+ height: 50vh;
|
|
|
+ }
|
|
|
+ .header__right {
|
|
|
+ height: 40vh;
|
|
|
+ }
|
|
|
+ .header__right__magnifier {
|
|
|
+ right: -2.5rem;
|
|
|
+ bottom: 1rem;
|
|
|
+ }
|
|
|
+ .header__sub {
|
|
|
+ font-size: 1.3rem;
|
|
|
+ }
|
|
|
+ .header__sub::before, .header__sub::after {
|
|
|
+ width: 8%;
|
|
|
+ }
|
|
|
+ .header__sub::before {
|
|
|
+ left: 30%;
|
|
|
+ }
|
|
|
+ .header__sub::after {
|
|
|
+ left: 62%;
|
|
|
+ }
|
|
|
+ .header__form__input {
|
|
|
+ font-size: .9rem;
|
|
|
+ }
|
|
|
+ .category__btngrp {
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ .category__btn {
|
|
|
+ padding: .3rem 1.5rem;
|
|
|
+ font-size: 1.2rem;
|
|
|
+ }
|
|
|
+ .ctncategory__btn {
|
|
|
+ padding: .2rem 1rem;
|
|
|
+ font-size: 1rem;
|
|
|
+ }
|
|
|
+ .top3 .row {
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ .card__rank {
|
|
|
+ padding: .8rem 1rem;
|
|
|
+ }
|
|
|
+ .top3__num {
|
|
|
+ left: .6rem;
|
|
|
+ top: -2.5rem;
|
|
|
+ font-size: 4rem;
|
|
|
+ }
|
|
|
+ .card__rank__word {
|
|
|
+ margin-left: 1.5rem;
|
|
|
+ font-size: 1.2rem;
|
|
|
+ }
|
|
|
+ .card__rank hr {
|
|
|
+ margin-top: 8px;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ }
|
|
|
+ .top20 .row {
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ .top20__num {
|
|
|
+ font-size: 2.1rem;
|
|
|
+ width: 1.6rem;
|
|
|
+ }
|
|
|
+ .container__footer {
|
|
|
+ width: 95vw;
|
|
|
+ }
|
|
|
+ .header__form {
|
|
|
+ width: 85%;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .header__form__input {
|
|
|
+ margin-left: 0;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .header__form__sub {
|
|
|
+ transform: none;
|
|
|
+ position: absolute;
|
|
|
+ right:0;
|
|
|
+ top: 0;
|
|
|
+ }
|
|
|
+ .header__right__linecir {
|
|
|
+ bottom: 0;
|
|
|
+ }
|
|
|
+ .cntheader__sub {
|
|
|
+ font-size: 1.2rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cntheader__sub::before {
|
|
|
+ left: 13%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cntheader__sub::after {
|
|
|
+ left: 72%;
|
|
|
+ }
|
|
|
+ .toparticle__title img {
|
|
|
+ position: absolute;
|
|
|
+ width: 90px;
|
|
|
+ right: -2rem;
|
|
|
+ top: -2rem;
|
|
|
+ }
|
|
|
+ .toparticle__top {
|
|
|
+ font-size: 1.7rem;
|
|
|
+ }
|
|
|
+ .fb__fr {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .cntsubscribe__form {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media (max-width: 768px) {
|
|
|
+ .header {
|
|
|
+ height: 70vh;
|
|
|
+ }
|
|
|
+ .header .col-md-5 {
|
|
|
+ margin-bottom: 3rem;
|
|
|
+ }
|
|
|
+ .header__right__bubble {
|
|
|
+ width: 15%;
|
|
|
+ }
|
|
|
+ .header__right__magnifier {
|
|
|
+ right: 4rem;
|
|
|
+ bottom: 1rem;
|
|
|
+ }
|
|
|
+ .category {
|
|
|
+ padding-top: 4rem;
|
|
|
+ }
|
|
|
+ .top3 {
|
|
|
+ padding-bottom: 2rem;
|
|
|
+ }
|
|
|
+ .top3 .col-md-4 {
|
|
|
+ margin-bottom: 1.5rem;
|
|
|
+ }
|
|
|
+ .top3 .col-md-4:nth-of-type(3) {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+ .card__rank {
|
|
|
+ margin-bottom: 1.5rem;
|
|
|
+ }
|
|
|
+ .row-right {
|
|
|
+ margin-top: 2rem;
|
|
|
+ }
|
|
|
+ .cntheader {
|
|
|
+ padding-bottom: 0rem;
|
|
|
+ }
|
|
|
+ .header__right__video {
|
|
|
+ position: absolute;
|
|
|
+ width: calc(80% - 10%);
|
|
|
+ left: 2.3rem;
|
|
|
+ top: 1.5rem;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media (max-width: 576px) {
|
|
|
+ .header__title {
|
|
|
+ font-size: 2.5rem;
|
|
|
+ }
|
|
|
+ .header {
|
|
|
+ padding-top: 3rem;
|
|
|
+ height: 63vh;
|
|
|
+ padding-bottom: 0rem
|
|
|
+ }
|
|
|
+ .header__right {
|
|
|
+ height: 30vh;
|
|
|
+ }
|
|
|
+ .header__right__magnifier {
|
|
|
+ right: 0rem;
|
|
|
+ bottom: 1.5rem;
|
|
|
+ }
|
|
|
+ .category__btn {
|
|
|
+ padding: .2rem 1rem;
|
|
|
+ font-size: 1rem;
|
|
|
+ }
|
|
|
+ .category {
|
|
|
+ padding: 1rem;
|
|
|
+ }
|
|
|
+ .footer_img {
|
|
|
+ height: 50px;
|
|
|
+ }
|
|
|
+ .footer {
|
|
|
+ font-size: .9rem;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media (max-width: 480px) {
|
|
|
+ .ctncategory__btn {
|
|
|
+ margin-top: .6rem;
|
|
|
+ }
|
|
|
+ .header__right__video {
|
|
|
+ position: absolute;
|
|
|
+ width: calc(80% - 5%);
|
|
|
+ left: 2.1rem;
|
|
|
+ top: 1.3rem;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|