723 lines
14 KiB
CSS
723 lines
14 KiB
CSS
|
|
/*========================================================
|
|
共同設定設定
|
|
=========================================================*/
|
|
|
|
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;
|
|
}
|