first commit
This commit is contained in:
ericli1018
722
public/assets/css/revise.css
Normal file
722
public/assets/css/revise.css
Normal file
@ -0,0 +1,722 @@
|
||||
|
||||
/*========================================================
|
||||
共同設定設定
|
||||
=========================================================*/
|
||||
|
||||
html {
|
||||
image-rendering: -webkit-optimize-contrast;
|
||||
}
|
||||
a {
|
||||
transition: all 0.2s;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
}
|
||||
.img-style img {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
height: auto !important;
|
||||
}
|
||||
.font-300 {
|
||||
text-align: center;
|
||||
font-size: 2rem;
|
||||
line-height: 300px;
|
||||
}
|
||||
|
||||
|
||||
/* 標題 */
|
||||
.title-wrap {
|
||||
color: #000;
|
||||
text-align: center;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
.title-wrap h2 {
|
||||
font-size: 1rem;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.title-wrap h2 span {
|
||||
padding: 0 10px;
|
||||
}
|
||||
.title-wrap h2:before,
|
||||
.title-wrap h2:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
height: 1px;
|
||||
background-color: #246b24;
|
||||
}
|
||||
.title-wrap h2:before {
|
||||
width: 100px;
|
||||
margin-left: -100px;
|
||||
}
|
||||
.title-wrap h2:after {
|
||||
width: 100px;
|
||||
margin-right: -100px;
|
||||
}
|
||||
.title-wrap h2+p {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/*========================================================
|
||||
Grid 設定
|
||||
=========================================================*/
|
||||
|
||||
@media (min-width: 1600px) {
|
||||
.container {
|
||||
max-width: 1480px;
|
||||
}
|
||||
}
|
||||
|
||||
.col-bg-1, .col-bg-2, .col-bg-3, .col-bg-4, .col-bg-5, .col-bg-6, .col-bg-7, .col-bg-8, .col-bg-9, .col-bg-10, .col-bg-11, .col-bg-12, .col-bg,
|
||||
.col-bg-auto {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
@media (min-width: 1600px) {
|
||||
.col-bg {
|
||||
-ms-flex-preferred-size: 0;
|
||||
flex-basis: 0;
|
||||
-ms-flex-positive: 1;
|
||||
flex-grow: 1;
|
||||
max-width: 100%;
|
||||
}
|
||||
.col-bg-auto {
|
||||
-ms-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
.col-bg-1 {
|
||||
-ms-flex: 0 0 8.333333%;
|
||||
flex: 0 0 8.333333%;
|
||||
max-width: 8.333333%;
|
||||
}
|
||||
.col-bg-2 {
|
||||
-ms-flex: 0 0 16.666667%;
|
||||
flex: 0 0 16.666667%;
|
||||
max-width: 16.666667%;
|
||||
}
|
||||
.col-bg-3 {
|
||||
-ms-flex: 0 0 25%;
|
||||
flex: 0 0 25%;
|
||||
max-width: 25%;
|
||||
}
|
||||
.col-bg-4 {
|
||||
-ms-flex: 0 0 33.333333%;
|
||||
flex: 0 0 33.333333%;
|
||||
max-width: 33.333333%;
|
||||
}
|
||||
.col-bg-5 {
|
||||
-ms-flex: 0 0 41.666667%;
|
||||
flex: 0 0 41.666667%;
|
||||
max-width: 41.666667%;
|
||||
}
|
||||
.col-bg-6 {
|
||||
-ms-flex: 0 0 50%;
|
||||
flex: 0 0 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
.col-bg-7 {
|
||||
-ms-flex: 0 0 58.333333%;
|
||||
flex: 0 0 58.333333%;
|
||||
max-width: 58.333333%;
|
||||
}
|
||||
.col-bg-8 {
|
||||
-ms-flex: 0 0 66.666667%;
|
||||
flex: 0 0 66.666667%;
|
||||
max-width: 66.666667%;
|
||||
}
|
||||
.col-bg-9 {
|
||||
-ms-flex: 0 0 75%;
|
||||
flex: 0 0 75%;
|
||||
max-width: 75%;
|
||||
}
|
||||
.col-bg-10 {
|
||||
-ms-flex: 0 0 83.333333%;
|
||||
flex: 0 0 83.333333%;
|
||||
max-width: 83.333333%;
|
||||
}
|
||||
.col-bg-11 {
|
||||
-ms-flex: 0 0 91.666667%;
|
||||
flex: 0 0 91.666667%;
|
||||
max-width: 91.666667%;
|
||||
}
|
||||
.col-bg-12 {
|
||||
-ms-flex: 0 0 100%;
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
.order-bg-first {
|
||||
-ms-flex-order: -1;
|
||||
order: -1;
|
||||
}
|
||||
.order-bg-last {
|
||||
-ms-flex-order: 13;
|
||||
order: 13;
|
||||
}
|
||||
.order-bg-0 {
|
||||
-ms-flex-order: 0;
|
||||
order: 0;
|
||||
}
|
||||
.order-bg-1 {
|
||||
-ms-flex-order: 1;
|
||||
order: 1;
|
||||
}
|
||||
.order-bg-2 {
|
||||
-ms-flex-order: 2;
|
||||
order: 2;
|
||||
}
|
||||
.order-bg-3 {
|
||||
-ms-flex-order: 3;
|
||||
order: 3;
|
||||
}
|
||||
.order-bg-4 {
|
||||
-ms-flex-order: 4;
|
||||
order: 4;
|
||||
}
|
||||
.order-bg-5 {
|
||||
-ms-flex-order: 5;
|
||||
order: 5;
|
||||
}
|
||||
.order-bg-6 {
|
||||
-ms-flex-order: 6;
|
||||
order: 6;
|
||||
}
|
||||
.order-bg-7 {
|
||||
-ms-flex-order: 7;
|
||||
order: 7;
|
||||
}
|
||||
.order-bg-8 {
|
||||
-ms-flex-order: 8;
|
||||
order: 8;
|
||||
}
|
||||
.order-bg-9 {
|
||||
-ms-flex-order: 9;
|
||||
order: 9;
|
||||
}
|
||||
.order-bg-10 {
|
||||
-ms-flex-order: 10;
|
||||
order: 10;
|
||||
}
|
||||
.order-bg-11 {
|
||||
-ms-flex-order: 11;
|
||||
order: 11;
|
||||
}
|
||||
.order-bg-12 {
|
||||
-ms-flex-order: 12;
|
||||
order: 12;
|
||||
}
|
||||
.offset-bg-0 {
|
||||
margin-left: 0;
|
||||
}
|
||||
.offset-bg-1 {
|
||||
margin-left: 8.333333%;
|
||||
}
|
||||
.offset-bg-2 {
|
||||
margin-left: 16.666667%;
|
||||
}
|
||||
.offset-bg-3 {
|
||||
margin-left: 25%;
|
||||
}
|
||||
.offset-bg-4 {
|
||||
margin-left: 33.333333%;
|
||||
}
|
||||
.offset-bg-5 {
|
||||
margin-left: 41.666667%;
|
||||
}
|
||||
.offset-bg-6 {
|
||||
margin-left: 50%;
|
||||
}
|
||||
.offset-bg-7 {
|
||||
margin-left: 58.333333%;
|
||||
}
|
||||
.offset-bg-8 {
|
||||
margin-left: 66.666667%;
|
||||
}
|
||||
.offset-bg-9 {
|
||||
margin-left: 75%;
|
||||
}
|
||||
.offset-bg-10 {
|
||||
margin-left: 83.333333%;
|
||||
}
|
||||
.offset-bg-11 {
|
||||
margin-left: 91.666667%;
|
||||
}
|
||||
.d-bg-flex {
|
||||
display: -ms-flexbox !important;
|
||||
display: flex !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*========================================================
|
||||
影片大小設定
|
||||
=========================================================*/
|
||||
|
||||
.video-iframe iframe, .video-iframe embed {
|
||||
width: 100% !important;
|
||||
height: 300px !important;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.video-embed {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.video-iframe iframe, .video-iframe embed {
|
||||
height: 420px !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.video-iframe iframe, .video-iframe embed {
|
||||
height: 520px !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.video-iframe iframe, .video-iframe embed {
|
||||
height: 460px !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1600px) {
|
||||
.video-iframe iframe, .video-iframe embed {
|
||||
width: 70% !important;
|
||||
margin: 0 auto;
|
||||
height: 640px !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1800px) {
|
||||
.video-iframe iframe, .video-iframe embed {
|
||||
width: 65% !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*========================================================
|
||||
其他設定
|
||||
=========================================================*/
|
||||
|
||||
|
||||
/* 寬度設定 */
|
||||
@media (min-width: 576px) {
|
||||
.w-sm-25 {
|
||||
width: 25% !important;
|
||||
}
|
||||
.w-sm-50 {
|
||||
width: 50% !important;
|
||||
}
|
||||
.w-sm-75 {
|
||||
width: 75% !important;
|
||||
}
|
||||
.w-sm-100 {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.w-md-25 {
|
||||
width: 25% !important;
|
||||
}
|
||||
.w-md-50 {
|
||||
width: 50% !important;
|
||||
}
|
||||
.w-md-75 {
|
||||
width: 75% !important;
|
||||
}
|
||||
.w-md-100 {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.w-lg-25 {
|
||||
width: 25% !important;
|
||||
}
|
||||
.w-lg-50 {
|
||||
width: 50% !important;
|
||||
}
|
||||
.w-lg-75 {
|
||||
width: 75% !important;
|
||||
}
|
||||
.w-lg-100 {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.w-xl-25 {
|
||||
width: 25% !important;
|
||||
}
|
||||
.w-xl-50 {
|
||||
width: 50% !important;
|
||||
}
|
||||
.w-xl-75 {
|
||||
width: 75% !important;
|
||||
}
|
||||
.w-xl-100 {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1600px) {
|
||||
.w-bg-25 {
|
||||
width: 25% !important;
|
||||
}
|
||||
.w-bg-50 {
|
||||
width: 50% !important;
|
||||
}
|
||||
.w-bg-75 {
|
||||
width: 75% !important;
|
||||
}
|
||||
.w-bg-100 {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 字體大小 */
|
||||
.fs-1x {
|
||||
font-size: 1rem;
|
||||
}
|
||||
.fs-2x {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.fs-3x {
|
||||
font-size: 2rem;
|
||||
}
|
||||
.fs-4x {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
.fs-5x {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
/* 按鈕顏色 */
|
||||
.btn-warning {
|
||||
color: #fff;
|
||||
background-color: #bb4c15;
|
||||
border-color: #bb4c15;
|
||||
}
|
||||
.btn-warning:hover {
|
||||
color: #fff;
|
||||
background-color: #e5b35c;
|
||||
border-color: #e5b35c;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 頁碼 */
|
||||
.page-ex2 .page-link {
|
||||
padding: 0.1rem 0.5rem;
|
||||
border-radius: 50%;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
color: #333;
|
||||
}
|
||||
.page-ex2 .prev, .page-ex2 .next {
|
||||
border: none;
|
||||
}
|
||||
.page-ex2 .page-item.active .page-link, .page-ex2 .page-item .page-link:hover {
|
||||
color: #fff;
|
||||
background-color: #333;
|
||||
border-color: #333;
|
||||
}
|
||||
|
||||
/*========================================================
|
||||
頁面置頂 scrollUp
|
||||
=========================================================*/
|
||||
|
||||
#scrollUp {
|
||||
position: fixed;
|
||||
bottom: 80px;
|
||||
right: 20px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: #137eb6;
|
||||
border-radius: 50%;
|
||||
}
|
||||
#scrollUp:after {
|
||||
font-family: 'Font Awesome 5 free';
|
||||
content: "\f077";
|
||||
font-weight: 900;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
z-index: 9;
|
||||
color: #fff;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
@media (max-width: 991.98px){
|
||||
#scrollUp {
|
||||
bottom: 100px;
|
||||
right: 10px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
/*========================================================
|
||||
footer-icon (右側)
|
||||
=========================================================*/
|
||||
|
||||
.icon_Community a.js-btn-icon_Community {
|
||||
text-align: center;
|
||||
width: 50px;
|
||||
line-height: 47px;
|
||||
border-radius: 100px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
background: #000;
|
||||
font-size: 22px;
|
||||
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5);
|
||||
height: 50px;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.js-btn-icon_Community:hover,
|
||||
.js-btn-icon_Community:focus {
|
||||
color: #fff;
|
||||
background-color: #d0a57f;
|
||||
border-color: #d0a57f;
|
||||
}
|
||||
|
||||
.js-icon_Community .icon_li {
|
||||
position: relative;
|
||||
left: -100px;
|
||||
|
||||
}
|
||||
.icon_li_img {
|
||||
max-width: 50px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
|
||||
.js-icon_Community.active .icon_li {
|
||||
left: 0;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.js-icon_Community .icon_li:nth-child(1) {
|
||||
transition: all 0.1s ease-out;
|
||||
-moz-transition: all 0.1s ease-out;
|
||||
-o-transition: all 0.1s ease-out;
|
||||
-webkit-transition: all 0.1s ease-out;
|
||||
}
|
||||
|
||||
.js-icon_Community .icon_li:nth-child(2) {
|
||||
transition: all 0.3s ease-out;
|
||||
-moz-transition: all 0.3s ease-out;
|
||||
-o-transition: all 0.3s ease-out;
|
||||
-webkit-transition: all 0.3s ease-out;
|
||||
}
|
||||
|
||||
.js-icon_Community .icon_li:nth-child(3) {
|
||||
transition: all 0.5s ease-out;
|
||||
-moz-transition: all 0.5s ease-out;
|
||||
-o-transition: all 0.5s ease-out;
|
||||
-webkit-transition: all 0.5s ease-out;
|
||||
}
|
||||
|
||||
|
||||
.icon_li a:hover .icon{
|
||||
animation: go 3s linear infinite;
|
||||
}
|
||||
@keyframes go {
|
||||
10% {
|
||||
transform: rotate(15deg);
|
||||
}
|
||||
20% {
|
||||
transform: rotate(-10deg);
|
||||
}
|
||||
30% {
|
||||
transform: rotate(5deg);
|
||||
}
|
||||
40% {
|
||||
transform: rotate(-5deg);
|
||||
}
|
||||
50%,100% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 539px){
|
||||
.icon_Community_ul .icon_li:nth-of-type(1),
|
||||
.icon_Community_ul .icon_li:nth-of-type(2) {
|
||||
width: 17%;
|
||||
}
|
||||
.icon_Community_ul .icon_li:nth-of-type(3),
|
||||
.icon_Community_ul .icon_li:nth-of-type(5) {
|
||||
width: 21%;
|
||||
}
|
||||
.icon_Community_ul .icon_li:nth-of-type(4){
|
||||
width: 24%;
|
||||
}
|
||||
}
|
||||
@media (max-width: 991.98px){
|
||||
.icon_Community {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
left: auto;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 999998;
|
||||
pointer-events: none;
|
||||
}
|
||||
.icon_Community_ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
}
|
||||
.icon_Community_ul .icon_li {
|
||||
width: 33.33%;
|
||||
border-right: 1px solid #fff;
|
||||
}
|
||||
.icon_Community_ul .icon_li:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
.icon_Community_ul .icon_name {
|
||||
font-size: 0.9rem;
|
||||
padding-top: 5px;
|
||||
}
|
||||
.icon_img {
|
||||
display: block;
|
||||
background: #d0a57f;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
padding: 10px 5px;
|
||||
text-decoration: none;
|
||||
}
|
||||
.icon_img_add {
|
||||
background: #bb4c15;
|
||||
}
|
||||
.icon_img_buy {
|
||||
background: #b22b30;
|
||||
}
|
||||
.icon_Community a{
|
||||
color: #fff;
|
||||
text-decoration:none;
|
||||
}
|
||||
.icon_Community a img{
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
width: 22px;
|
||||
}
|
||||
.icon_Community a:hover{
|
||||
background-color: #e5b35c;
|
||||
}
|
||||
.icon_Community a:hover img{
|
||||
animation: go 3s linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px){
|
||||
.icon_Community {
|
||||
position: fixed;
|
||||
right: 20px;
|
||||
bottom: 80px;
|
||||
z-index: 9998;
|
||||
pointer-events: none;
|
||||
}
|
||||
.icon_Community_ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
display: flex;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
.icon_img {
|
||||
background: #d0a57f;
|
||||
border: none;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
margin-bottom: 6px;
|
||||
width: 50px;
|
||||
text-decoration: none;
|
||||
border-radius: 100px;
|
||||
color: #fff;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.icon_img_add {
|
||||
background: #bb4c15;
|
||||
}
|
||||
.icon_img_buy {
|
||||
background: #b22b30;
|
||||
}
|
||||
.icon_img.active {
|
||||
width: 142px;
|
||||
}
|
||||
.icon_img.active .icon_name {
|
||||
text-indent: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
.icon_img:hover {
|
||||
text-decoration: none;
|
||||
width: 142px;
|
||||
}
|
||||
.icon_img:before {
|
||||
opacity: 0;
|
||||
|
||||
}
|
||||
.icon_img .icon {
|
||||
color: #fff;
|
||||
font-size: 22px;
|
||||
width: 50px;
|
||||
line-height: 50px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
.icon_img:hover .icon {
|
||||
text-decoration: none;
|
||||
}
|
||||
.icon_img:hover .icon_name {
|
||||
opacity: 1;
|
||||
text-indent: 0;
|
||||
}
|
||||
.icon_name {
|
||||
position: relative;
|
||||
line-height: 50px;
|
||||
padding-left: 15px;
|
||||
padding-right: 50px;
|
||||
transition: all 0.3s ease;
|
||||
opacity: 0;
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
white-space: nowrap;
|
||||
border-radius: 100px;
|
||||
overflow: hidden;
|
||||
font-family: Arial, "Microsoft JhengHei", sans-serif;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.modal {
|
||||
z-index: 9999;
|
||||
}
|
||||
Reference in New Issue
Block a user