/********** CSS Reset **********/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
font-family:'Helvetica', 'Arial','PingFang','Microsoft JhengHei', sans-serif;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
img {
width: 100%;
height: auto;
}
html, body {
position: relative;
height: 100%;
}
::-moz-selection { /* Code for Firefox */
color: #ffffff;
background: #333;
}
::selection {
color: #ffffff;
background: #333;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
/******************** gotop - START********************/
#gotop {
display: block;
background-image: url(../img/gotop.svg);
width: 40px;
height: 40px;
position: fixed;
right: 30px;
bottom: 30px;
z-index: 999;
opacity: 0.8;
transition: all 0.3s;
}
#gotop:hover {
text-decoration: none;
background-image: url(../img/gotop-red.svg);
opacity: 1;
}
#gotop:active {
opacity: 1;
background-image: url(../img/gotop-red.svg);
opacity: 1;
}
/******************** gotop - END ********************/
/********** navbar **********/
/*
nav {
position:fixed;
top: 0;
left: 0;
width: 100%;
height: 85px;
background-color: #fff;
opacity: 0.95;
-webkit-transition: all 0.3s;
transition: all 0.3s;
z-index: 999;
}
nav a.nav-logo {
float: left;
width: 220px;
height: 50px;
margin-top: calc((85px - 50px)/2);
margin-left: 30px;
background-image: url(../img/graser_logo.svg);
background-size: contain;
background-repeat: no-repeat;
text-indent: 101%;
white-space: nowrap;
overflow: hidden;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
nav ul.nav-menu {
float: right;
}
nav ul.nav-menu li {
display: inline-block;
text-align: center;
margin-right: -4px;
}
nav ul.nav-menu li a {
display: block;
color: #333;
padding: 0 25px;
font-size: 16px;
line-height: 85px;
letter-spacing: 0.1em;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
nav ul.nav-menu li a:hover{
text-decoration: none;
background-color: #eee;
color: #333;
}
nav ul.nav-menu li a:active{
text-decoration: none;
background-color: #c4141b;
color: #fff;
}
nav ul.nav-menu li a.active{
background-color: #c4141b;
color: #fff;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
*/
/*** navbar-sticky ***/
/*
nav.nav-sticky {
height: 60px;
}
nav.nav-sticky a.nav-logo {
width: 185px;
height: 38px;
margin-top: calc((60px - 38px)/2);
margin-left: 30px;
}
nav.nav-sticky ul.nav-menu li a {
padding: 0 20px;
font-size: 15px;
line-height: 60px;
letter-spacing: 0.08em;
}
*/
/******************** link down - START ********************/
a.linkDown {
display: block;
text-align: center;
color: #c4141b;
font-weight: bold;
background-image: url(../img/index/down.svg);
background-repeat: no-repeat;
width: 100px;
height: 100px;
position: absolute;
bottom: 0px;
right: calc(50% - 50px);
z-index: 10;
opacity: 0.6;
transition: all 0.3s;
}
a.linkDown:hover {
opacity: 1;
/* color: #ed5259;*/
}
a.linkDown.infinite-down {
-webkit-animation: pulse 3s infinite;
animation: pulse 3s infinite;
opacity: 1;
}
a.linkDown.infinite-down:hover {
filter: brightness(250%);
}
@-webkit-keyframes pulse {
0% {
-webkit-transform: translate(0, -5px);
transform: translate(0, -5px); }
50% {
-webkit-transform: translate(0, 10px);
transform: translate(0, 10px); }
100% {
-webkit-transform: translate(0, -5px);
transform: translate(0, -5px); } }
@keyframes pulse {
0% {
-webkit-transform: translate(0, -5px);
transform: translate(0, -5px); }
50% {
-webkit-transform: translate(0, 10px);
transform: translate(0, 10px); }
100% {
-webkit-transform: translate(0, -5px);
transform: translate(0, -5px); } }
@media (max-width: 575.98px) {
a.linkDown {
display: none;
background-image: url(../img/index/down.svg);
background-repeat: no-repeat;
width: 100px;
height: 100px;
position: absolute;
bottom: 0px;
right: calc(50% - 50px);
z-index: 10;
opacity: 0.6;
transition: all 0.3s;
}
}
/******************** link down - END ********************/
/******************** header - START ********************/
#header-index {
position: relative;
width: 100%;
height: 100%;
overflow:hidden;
display: block;
}
/***** header swiper *****/
.header-swiper-container {
width: 100%;
height: 100%;
}
.header-swiper-slide {
position: relative;
width: 100%;
height: 100%;
text-align: left;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
/* display: -webkit-flex;*/
display: block;
overflow: hidden;
/*
-webkit-box-pack: flex-start;
-ms-flex-pack: flex-start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
*/
}
.header-swiper-slide-bg-01 {
width: 100%;
height: 100vh;
background-image: url(../img/index/header_under_construction_VNM_1920.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.header-swiper-slide-bg-02 {
width: 100%;
height: 100vh;
background-image: url(../img/index/header_Allegro_X_1920.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.header-swiper-slide-bg-03 {
width: 100%;
height: 100vh;
background-image: url(../img/index/header_OrCAD_X_1920.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.header-swiper-slide-bg-04 {
width: 100%;
height: 100vh;
background-image: url(../img/index/header_MSA_1920.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.header-swiper-slide-bg-05 {
width: 100%;
height: 100vh;
background-image: url(../img/index/header_cadence_cp_VNM_1920.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.g30th {
margin-top: 18%;
text-align: center;
}
.g30th img {
width: 50%;
margin: 0;
}
.ccp {
position: absolute;
top: 50%;
transform: translateY(-50%);
text-align: center;
}
.ccp img {
width: 50%;
margin: 0;
}
.ccp img.Glogo {
max-width: 600px;
}
/*
.g30th {
position: relative;
width: 50%;
height: 100%;
margin: auto;
overflow: hidden;
}
.g30th img {
position: absolute;
width: 100%;
height: auto;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
}
*/
.header-swiper-content {
/* height: 100%;*/
/* margin-left: 10%;*/
margin-top: 15%;
/* z-index: 99!important;*/
}
.header-swiper-content h1 {
/* margin-top: 300px;*/
margin-top: 20%;
font-size: 55px;
color: #c4141b;
margin-bottom: 15px;
}
.header-swiper-content img {
width: 450px;
height: auto;
}
.header-swiper-content img.guc-event {
width: 350px;
height: auto;
}
.header-swiper-content img.guc-event-title {
width: 70%;
height: auto;
display: block;
}
.header-swiper-content img.guc-event-title-2 {
width: auto;
height: auto;
display: none;
}
/*
.header-swiper-content p.slogan-guc-event {
font-size: 45px;
color: #333;
line-height: 1.3;
margin-bottom: 60px;
font-weight: 500;
}
*/
.header-swiper-content h2 {
font-size: 26px;
color:#808080;
margin-bottom: 30px;
z-index: 10;
}
.header-swiper-content p.slogan-white {
font-size: 35px;
color: #fff;
line-height: 1.3;
margin-bottom: 60px;
font-weight: 500;
}
.header-swiper-content p.slogan-grey {
font-size: 35px;
color: #333;
line-height: 1.3;
margin-bottom: 60px;
font-weight: 500;
}
.header-swiper-content a.relocation_address {
font-size: 30px;
line-height: 1.5;
color: #555;
margin-bottom: 60px;
display: block;
transition: all 0.3s;
}
.header-swiper-content a.relocation_address:hover {
color: #c4141b;
}
.header-swiper-content div.more {
display: inline-block;
border: 1px solid #c4141b;
-ms-transform: skew(-14deg);
-webkit-transform: skew(-14deg);
transform: skew(-14deg);
-webkit-transition: background 0.3s;
transition: background 0.3s;
}
.header-swiper-content div.more a {
font-size: 16px;
font-weight: 600;
color: #c4141b;
padding: 10px 20px;
display: block;
-ms-transform: skew(14deg);
-webkit-transform: skew(14deg);
transform: skew(14deg);
}
.header-swiper-content div.more:hover {
background-color: #c4141b;
opacity: 0.9;
}
.header-swiper-content div.more:hover a {
text-decoration: none;
font-weight: 600;
font-size: 16px;
color: #fff;
}
.header-bevel-angle-left {
position: absolute;
top: 0;
left: -50%;
height: 100vh;
width: 100%;
-ms-transform: skew(-14deg);
-webkit-transform: skew(-14deg);
transform: skew(-14deg);
/* background: linear-gradient(to left, #c4141b, rgba(196, 20, 27, 0.9));*/
/* z-index: 0;*/
/* opacity: 0.9;*/
}
.header-bevel-angle-left.header-bg-grey {
background: rgba(50, 50, 50, 0.5);
}
.header-bevel-angle-left.header-bg-white {
background: rgba(255, 255, 255, 0.5);
}
.header-swiper-pagination {
position: absolute;
text-align: right;
padding-right: 80px;
-webkit-transition: .3s opacity;
-o-transition: .3s opacity;
transition: .3s opacity;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
z-index: 99;
}
.header-swiper-pagination-bullet-position {
bottom: 5% !important;
left: 0 !important;
width: 100% !important;
}
/* 桌機 大於1920 */
@media (min-width: 1920px) {
.header-swiper-content {
margin-left: 10%;
}
}
/* 桌機 平板 小於1200 */
@media (max-width: 1199.98px) {
#header-index {
position: relative;
width: 100%;
/* height: 100%;*/
height: 768px;
overflow: hidden;
display: block;
}
.header-swiper-slide-bg-01 {
width: 100%;
height: 768px;
background-image: url(../img/index/header_under_construction_VNM_768.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.header-swiper-slide-bg-02 {
width: 100%;
height: 768px;
background-image: url(../img/index/header_Allegro_X_768.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.header-swiper-slide-bg-03 {
width: 100%;
height: 768px;
background-image: url(../img/index/header_OrCAD_X_768.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.header-swiper-slide-bg-04 {
width: 100%;
height: 768px;
background-image: url(../img/index/header_MSA_768.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.header-swiper-slide-bg-05 {
width: 100%;
height: 768px;
background-image: url(../img/index/header_cadence_cp_VNM_768.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.header-swiper-slide-bg-06 {
width: 100%;
height: 768px;
background-image: url(../img/index/header_relocation_notice_768.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.header-swiper-slide-bg-07 {
width: 100%;
height: 768px;
background-image: url(../img/index/header_30th_768.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.g30th {
margin-top: 25%;
text-align: center;
}
.g30th img {
width: 50%;
margin: 0;
margin-left: 5%;
}
.header-bevel-angle-left {
left: -35%;
}
}
/* 平板 小於992 */
@media (max-width: 991.98px) {
#header-index {
position: relative;
width: 100%;
/* height: 100%;*/
height: 600px;
overflow: hidden;
display: block;
}
.header-swiper-slide-bg-01 {
width: 100%;
height: 600px;
}
.header-swiper-slide-bg-02 {
width: 100%;
height: 600px;
}
.header-swiper-slide-bg-03 {
width: 100%;
height: 600px;
}
.header-swiper-slide-bg-04 {
width: 100%;
height: 600px;
}
.header-swiper-slide-bg-05 {
width: 100%;
height: 600px;
}
.header-swiper-slide-bg-07 {
width: 100%;
height: 600px;
}
.header-bevel-angle-left {
left: -30%;
height: 100%;
}
.header-swiper-content h1 {
/* margin-top: 300px;*/
margin-top: 25%;
font-size: 50px;
color: #c4141b;
margin-bottom: 15px;
}
.header-swiper-content img {
max-width: 350px;
height: auto;
}
.header-swiper-content img.guc-event {
max-width: 400px;
height: auto;
}
.header-swiper-content img.guc-event-title {
max-width: 60%;
height: auto;
display: block;
}
/*
.header-swiper-content img.guc-event-title {
width: 100%;
height: auto;
display: none;
}
.header-swiper-content img.guc-event-title-2 {
width: 60%;
height: auto;
display: block;
}
*/
.header-swiper-content h2 {
font-size: 24px;
color: #808080;
margin-bottom: 30px;
z-index: 10;
}
.header-swiper-content p.slogan-white {
font-size: 30px;
color: #fff;
line-height: 1.3;
margin-bottom: 60px;
}
.header-swiper-content p.slogan-grey {
font-size: 30px;
color: #333;
line-height: 1.3;
margin-bottom: 60px;
}
.header-swiper-content a.relocation_address {
font-size: 26px;
line-height: 1.3;
color: #555;
margin-bottom: 60px;
display: block;
transition: all 0.3s;
}
}
/* 平板 小於768 */
@media (max-width: 767.98px) {
.header-bevel-angle-left {
position: absolute;
top: 0;
left: -50%;
height: 100%;
width: 130%;
-ms-transform: skew(-14deg);
-webkit-transform: skew(-14deg);
transform: skew(-14deg);
}
.g30th {
margin-top: 30%;
text-align: center;
}
.g30th img {
width: 70%;
margin: 0;
margin-left: 5%;
}
.ccp img {
width: 70%;
margin: 0;
}
}
/* 手機 小於576 */
@media (max-width: 575.98px) {
#header-index {
position: relative;
width: 100%;
/* height: 100%;*/
max-height: 568px;
overflow: hidden;
display: block;
}
.header-swiper-slide-bg-01 {
width: 100%;
max-height: 568px;
background-image: url(../img/index/header_under_construction_VNM_576.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.header-swiper-slide-bg-02 {
width: 100%;
max-height: 568px;
background-image: url(../img/index/header_Allegro_X_576.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.header-swiper-slide-bg-03 {
width: 100%;
max-height: 568px;
background-image: url(../img/index/header_OrCAD_X_576.jpg);
background-repeat: no-repeat;
background-position: right;
background-size: cover;
}
.header-swiper-slide-bg-04 {
width: 100%;
max-height: 568px;
background-image: url(../img/index/header_MSA_576.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.header-swiper-slide-bg-05 {
width: 100%;
max-height: 568px;
background-image: url(../img/index/header_cadence_cp_VNM_576.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.header-swiper-slide-bg-06 {
width: 100%;
max-height: 568px;
background-image: url(../img/index/header_relocation_notice_576.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.header-swiper-slide-bg-07 {
width: 100%;
height: 568px;
background-image: url(../img/index/header_30th_576.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.g30th {
margin-top: 50%;
text-align: center;
}
.g30th img {
width: 80%;
margin: 0;
margin-left: 10%;
}
.ccp img {
width: 80%;
margin: 0;
}
.header-swiper-content h1 {
/* margin-top: 300px;*/
margin-top: 30%;
font-size: 40px;
color: #c4141b;
margin-bottom: 15px;
}
.header-swiper-content img {
max-width: 300px;
height: auto;
}
.header-swiper-content img.guc-event {
width: 60%;
height: auto;
display: block;
margin-top: 100px;
}
.header-swiper-content img.guc-event-title {
max-width: 100%;
height: auto;
display: block;
}
/*
.header-swiper-content img.guc-event-title {
width: 100%;
height: auto;
display: none;
}
.header-swiper-content img.guc-event-title-2 {
width: 60%;
height: auto;
display: block;
}
*/
.header-swiper-content h2 {
font-size: 24px;
color: #808080;
margin-bottom: 25px;
z-index: 10;
}
.header-swiper-content p.slogan-white {
font-size: 27px;
color: #fff;
line-height: 1.3;
margin-bottom: 40px;
}
.header-swiper-content p.slogan-grey {
font-size: 27px;
color: #333;
line-height: 1.3;
margin-bottom: 40px;
}
.header-swiper-content a.relocation_address {
font-size: 22px;
line-height: 1.3;
color: #555;
margin-bottom: 30px;
display: block;
transition: all 0.3s;
}
.header-bevel-angle-left {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
-ms-transform: skew(0deg);
-webkit-transform: skew(0deg);
transform: skew(0deg);
display: none;
}
.header-bevel-angle-left.header-bg-grey {
background: rgba(0, 0, 0, 0.5);
}
.header-bevel-angle-left.header-bg-white {
background: rgba(255, 255, 255, 0.7);
}
.header-swiper-content div.more {
display: inline-block;
border: 1px solid #c4141b;
-ms-transform: skew(-14deg);
-webkit-transform: skew(-14deg);
transform: skew(-14deg);
-webkit-transition: background 0.3s;
transition: background 0.3s;
margin-bottom: 5px;
}
.header-swiper-pagination {
position: absolute;
text-align: right;
padding-right: 5%;
padding-left: 5%;
-webkit-transition: .3s opacity;
-o-transition: .3s opacity;
transition: .3s opacity;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
z-index: 99;
}
.header-swiper-pagination-bullet-position {
bottom: 5% !important;
left: 0 !important;
width: 100% !important;
}
}
/* 手機 小於320 */
@media (max-width: 330px) {
.header-swiper-content h1 {
/* margin-top: 300px;*/
margin-top: 35%;
font-size: 40px;
color: #c4141b;
margin-bottom: 15px;
}
.header-swiper-content img {
/* max-width: 300px;*/
width: 100%;
height: auto;
}
.header-swiper-content h2 {
font-size: 22px;
color: #808080;
margin-bottom: 20px;
z-index: 10;
}
.header-swiper-content p.slogan-white {
font-size: 28px;
color: #fff;
line-height: 1.3;
margin-bottom: 30px;
}
.header-swiper-content p.slogan-grey {
font-size: 28px;
color: #333;
line-height: 1.3;
margin-bottom: 30px;
}
.header-swiper-content div.more {
display: inline-block;
border: 1px solid #c4141b;
-ms-transform: skew(-14deg);
-webkit-transform: skew(-14deg);
transform: skew(-14deg);
-webkit-transition: background 0.3s;
transition: background 0.3s;
margin-bottom: 5px;
}
.header-swiper-content div.more a {
font-size: 16px;
font-weight: 600;
color: #c4141b;
padding: 10px 20px;
display: block;
-ms-transform: skew(14deg);
-webkit-transform: skew(14deg);
transform: skew(14deg);
}
.header-swiper-content div.more:hover {
background-color: #c4141b;
opacity: 0.9;
}
.header-swiper-content div.more:hover a {
text-decoration: none;
font-weight: 600;
font-size: 16px;
color: #fff;
}
/*
.header-bevel-angle-left {
position: absolute;
top: 0;
left: -20%;
height: 100vh;
width: 122%;
-ms-transform: skew(-14deg);
-webkit-transform: skew(-14deg);
transform: skew(-14deg);
}
*/
}
/******************** header - END ********************/
/******************** Swiper Pagination Bullet - START ********************/
.swiper-pagination-bullet {
width: 10px;
height: 10px;
display: inline-block;
border-radius: 100%;
border: 1.5px solid #c4141b;
background: rgba(0,0,0,0);
opacity: 1;
-webkit-transition: all 0.3s;
transition: all 0.3s;
margin: 0 10px !important;
}
.swiper-pagination-bullet-active {
opacity: 1;
background: #c4141b;
}
/******************** Swiper Pagination Bullet - END ********************/
/******************** All section - START ********************/
.title-index {
font-size: 50px;
font-weight: bold;
color: #c4141b;
margin-bottom: 40px;
}
.title-index-white {
font-size: 50px;
font-weight: bold;
color: #fff;
margin-bottom: 40px;
}
/* 桌機 平板 小於1500 */
@media (max-width: 1500px) {
.title-index {
font-size: 45px;
font-weight: bold;
color: #c4141b;
margin-bottom: 3%;
}
.title-index-white {
font-size: 45px;
font-weight: bold;
color: #fff;
margin-bottom: 30px;
}
}
/* 手機 小於480 */
@media (max-width: 480px) {
.title-index {
font-size: 35px;
font-weight: bold;
color: #c4141b;
margin-bottom: 3%;
}
.title-index-white {
font-size: 35px;
font-weight: bold;
color: #fff;
margin-bottom: 30px;
}
}
/******************** All section - END ********************/
/******************** Event - START ********************/
section.event-index {
position:relative;
width: 100%;
height: 100%;
overflow: hidden;
/* background-color: aquamarine;*/
}
.event-box-index {
margin-top: 120px;
width: 50%;
}
.event-content-index {
padding: 30px 30px;
border-bottom: 1px solid #cccccc;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.event-content-index:hover {
background: #eee;
background: linear-gradient(to right, #eee, rgba(238, 238, 238, 0));
}
.event-day-index {
float: left;
height: 120px;
margin-right: 40px;
border-right: 2px solid #c4141b;
vertical-align: middle;
text-align: center;
-ms-transform: skew(-14deg);
-webkit-transform: skew(-14deg);
transform: skew(-14deg);
}
.event-day-index p {
-ms-transform: skew(14deg);
-webkit-transform: skew(14deg);
transform: skew(14deg);
color: #c4141b;
font-weight: bold;
padding: 15px 20px 0 0;
}
.event-day-index p span.event-month {
font-size: 14px;
}
.event-day-index p span.event-date {
font-size: 28px;
}
.event-day-index p span.event-two-months {
font-size: 18px;
line-height: 28px;
}
.event-img-index {
width: 220px;
float: right;
margin-right: 40px;
overflow: hidden;
-ms-transform: scale(1,1);
-webkit-transform: scale(1,1);
transform: scale(1,1);
}
.event-content-index div.event-img-index img {
/* opacity: 0.9;*/
-ms-transform: scale(1,1);
-webkit-transform: scale(1,1);
transform: scale(1,1);
-webkit-transition: all 0.8s;
transition: all 0.8s;
-webkit-transition-timing-function: ease;
transition-timing-function: ease;
}
.event-content-index:hover div.event-img-index img {
/* opacity: 1;*/
-ms-transform: scale(1.05,1.05);
-webkit-transform: scale(1.05,1.05);
transform: scale(1.05,1.05);
}
.event-topic-index {
float: right;
}
.event-topic-index h2 {
font-size: 20px;
line-height: 30px;
font-weight: bold;
margin-bottom: 20px;
}
.event-more {
display: inline-block;
border: 1px solid #c4141b;
-ms-transform: skew(-14deg);
-webkit-transform: skew(-14deg);
transform: skew(-14deg);
-webkit-transition: background 0.3s;
transition: background 0.3s;
-webkit-transition-timing-function: ease;
transition-timing-function: ease;
}
.event-more a {
font-size: 14px;
font-weight: 600;
color: #c4141b;
padding: 10px 15px;
display: block;
-ms-transform: skew(14deg);
-webkit-transform: skew(14deg);
transform: skew(14deg);
}
.event-more:hover {
background-color: #c4141b;
opacity: 0.9;
}
.event-more:hover a {
text-decoration: none;
font-weight: 600;
font-size: 14px;
color: #fff;
}
.event-bevel-angle {
position: absolute;
top: 0;
right: -15%;
height: 100%;
width: 40%;
-ms-transform: skew(-14deg);
-webkit-transform: skew(-14deg);
transform: skew(-14deg);
background: #c4141b;
background: linear-gradient(to right, #c4141b, rgba(196, 20, 27, 0.95));
/* opacity: 0.9;*/
}
.event-bevel-angle a div.view-all {
height: 22px;
position: absolute;
opacity: 0.8;
-ms-transform: skew(14deg);
-webkit-transform: skew(14deg);
transform: skew(14deg);
bottom: 8%;
left: 5%;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
/*
.event-bevel-angle a div.view-all span {
-webkit-transition: all 0.05s;
transition: all 0.05s;
}
*/
.event-bevel-angle a {
color: #fff;
font-size: 18px;
font-weight: bold;
}
.event-bevel-angle a:hover {
text-decoration: none;
}
.event-bevel-angle a div.view-all img{
height: 100%;
width: auto;
margin-right: 10px;
}
.event-bevel-angle a div.view-all:hover {
opacity: 1;
left: 7%;
}
/*
.event-bevel-angle a div.view-all:hover span {
-ms-transform: skew(-14deg);
-webkit-transform: skew(-14deg);
transform: skew(-14deg);
}
*/
/* 桌機 小於1610 */
@media (max-width: 1610px) {
.event-content-index {
padding: 20px 30px;
border-bottom: 1px solid #cccccc;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.event-topic-index {
float: right;
width: 50%;
}
}
/* 桌機 平板 小於1500 */
@media (max-width: 1500px) {
.event-box-index {
margin-top: 100px;
width: 50%;
margin-left: 15%;
}
.event-content-index {
padding: 20px 30px;
border-bottom: 1px solid #cccccc;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.event-day-index {
float: left;
height: 120px;
margin-right: 30px;
border-right: 2px solid #c4141b;
vertical-align: middle;
text-align: center;
-ms-transform: skew(-14deg);
-webkit-transform: skew(-14deg);
transform: skew(-14deg);
}
.event-img-index {
width: 180px;
float: right;
margin-right: 30px;
overflow: hidden;
-ms-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
.event-topic-index {
float: right;
width: 50%;
}
.event-topic-index h2 {
font-size: 18px;
line-height: 26px;
font-weight: bold;
margin-bottom: 20px;
}
.event-bevel-angle a div.view-all {
height: 20px;
position: absolute;
opacity: 0.8;
-ms-transform: skew(14deg);
-webkit-transform: skew(14deg);
transform: skew(14deg);
bottom: 8%;
left: 8%;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.event-bevel-angle a {
color: #fff;
font-size: 16px;
font-weight: bold;
}
}
/* 桌機 平板 原 小於1200 1199.98 後改為 1265 */
@media (max-width: 1265px) {
section.event-index {
position: relative;
width: 100%;
height: auto;
overflow: hidden;
}
.event-box-index {
margin-top: 100px;
margin-bottom: 120px;
width: 65%;
margin-left: 10%;
}
.event-img-index {
width: 180px;
float: right;
margin-right: 20px;
overflow: hidden;
-ms-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
.event-topic-index {
float: right;
width: 52%;
}
.event-topic-index h2 {
font-size: 18px;
line-height: 26px;
font-weight: bold;
margin-bottom: 20px;
}
.event-bevel-angle {
position: absolute;
top: 0;
right: -26%;
height: 100%;
width: 40%;
-ms-transform: skew(-14deg);
-webkit-transform: skew(-14deg);
transform: skew(-14deg);
background: #c4141b;
background: linear-gradient(to right, #c4141b, rgba(196, 20, 27, 0.95));
}
.event-bevel-angle a div.view-all {
height: 20px;
position: absolute;
opacity: 0.8;
-ms-transform: skew(14deg);
-webkit-transform: skew(14deg);
transform: skew(14deg);
bottom: 8%;
left: 8%;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.event-bevel-angle a {
color: #fff;
font-size: 16px;
font-weight: bold;
}
.event-bevel-angle a div.view-all:hover {
opacity: 1;
left: 12%;
}
}
/* 平板 小於992 */
@media (max-width: 991.98px) {
section.event-index {
position: relative;
width: 100%;
height: auto;
overflow: hidden;
}
.event-box-index {
margin-top: 100px;
margin-bottom: 120px;
width: 68%;
margin-left: 10%;
padding-right: 30px;
}
.event-content-index {
padding: 20px 20px 20px 10px;
border-bottom: 1px solid #cccccc;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.event-day-index {
float: left;
height: 110px;
margin-right: 25px;
border-right: 2px solid #c4141b;
vertical-align: middle;
text-align: center;
-ms-transform: skew(-14deg);
-webkit-transform: skew(-14deg);
transform: skew(-14deg);
}
.event-day-index p {
padding: 15px 15px 0 0;
}
.event-day-index p span.event-month {
font-size: 14px;
}
.event-day-index p span.event-date {
font-size: 28px;
}
.event-day-index p span.event-two-months {
font-size: 16px;
line-height: 28px;
}
.event-img-index {
width: 160px;
float: right;
margin-right: 20px;
overflow: hidden;
-ms-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
.event-topic-index {
float: right;
width: 48%;
}
.event-topic-index h2 {
font-size: 18px;
line-height: 24px;
font-weight: bold;
margin-bottom: 15px;
}
.event-more a {
font-size: 13px;
font-weight: 600;
color: #c4141b;
padding: 8px 14px;
display: block;
-ms-transform: skew(14deg);
-webkit-transform: skew(14deg);
transform: skew(14deg);
}
.event-more:hover a {
text-decoration: none;
font-weight: 600;
font-size: 13px;
color: #fff;
}
.event-bevel-angle {
position: absolute;
top: 0;
right: -26%;
height: 100%;
width: 40%;
-ms-transform: skew(-14deg);
-webkit-transform: skew(-14deg);
transform: skew(-14deg);
background: #c4141b;
background: linear-gradient(to right, #c4141b, rgba(196, 20, 27, 0.95));
/* opacity: 0.9;*/
}
.event-bevel-angle a div.view-all {
height: 20px;
position: absolute;
opacity: 0.8;
-ms-transform: skew(14deg);
-webkit-transform: skew(14deg);
transform: skew(14deg);
bottom: 8%;
left: 10%;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.event-bevel-angle a {
color: #fff;
font-size: 16px;
font-weight: bold;
}
.event-bevel-angle a div.view-all:hover {
opacity: 1;
left: 14%;
}
}
/* 平板 小於768 */
@media (max-width: 770px) {
section.event-index {
position: relative;
width: 100%;
height: auto;
overflow: hidden;
}
.event-box-index {
margin-top: 100px;
margin-bottom: 120px;
width: 80%;
margin-left: 10%;
/* padding-right: 30px;*/
background: rgba(255, 255, 255, 0.85);
z-index: 2;
padding: 30px;
}
.event-content-index {
padding: 20px 20px 20px 10px;
border-bottom: 1px solid #bababa;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.event-img-index {
display: none;
/*
width: 160px;
float: right;
margin-right: 20px;
overflow: hidden;
-ms-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
*/
}
.event-topic-index {
float: right;
width: 80%;
}
.event-bevel-angle {
position: absolute;
top: 0;
right: -30%;
height: 100%;
width: 60%;
-ms-transform: skew(-14deg);
-webkit-transform: skew(-14deg);
transform: skew(-14deg);
background: #c4141b;
background: linear-gradient(to right, #c4141b, rgba(196, 20, 27, 0.95));
/* opacity: 0.9;*/
}
}
/* 手機 小於576 */
@media (max-width: 575.98px) {
.event-box-index {
margin-top: 50px;
margin-bottom: 120px;
width: 90%;
margin-left: 3.5%;
/* padding-right: 30px;*/
background: rgba(255, 255, 255, 0.85);
z-index: 2;
padding: 30px;
}
.event-content-index {
padding: 20px 0px 20px 10px;
border-bottom: 1px solid #bababa;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.event-day-index {
float: left;
height: 120px;
margin-right: 23px;
border-right: 2px solid #c4141b;
vertical-align: middle;
text-align: center;
-ms-transform: skew(-14deg);
-webkit-transform: skew(-14deg);
transform: skew(-14deg);
}
.event-day-index p {
padding: 15px 12px 0 0;
}
.event-day-index p span.event-month {
font-size: 13px;
}
.event-day-index p span.event-date {
font-size: 26px;
}
.event-day-index p span.event-two-months {
font-size: 15px;
line-height: 28px;
}
.event-topic-index {
float: right;
width: 72%;
}
.event-topic-index h2 {
font-size: 17px;
line-height: 23px;
font-weight: bold;
margin-bottom: 15px;
}
.event-more a {
font-size: 13px;
font-weight: 600;
color: #c4141b;
padding: 8px 14px;
display: block;
-ms-transform: skew(14deg);
-webkit-transform: skew(14deg);
transform: skew(14deg);
}
.event-more:hover a {
text-decoration: none;
font-weight: 600;
font-size: 13px;
color: #fff;
}
.event-bevel-angle {
position: absolute;
top: 0;
right: -30%;
height: 100%;
width: 65%;
-ms-transform: skew(-14deg);
-webkit-transform: skew(-14deg);
transform: skew(-14deg);
background: #c4141b;
background: linear-gradient(to right, #c4141b, rgba(196, 20, 27, 0.95));
/* opacity: 0.9;*/
}
.event-bevel-angle a div.view-all {
height: 20px;
position: absolute;
opacity: 0.8;
-ms-transform: skew(14deg);
-webkit-transform: skew(14deg);
transform: skew(14deg);
bottom: 8%;
left: 15%;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.event-bevel-angle a {
color: #fff;
font-size: 16px;
font-weight: bold;
}
.event-bevel-angle a div.view-all:hover {
opacity: 1;
left: 18%;
}
}
/* 手機 小於320 */
@media (max-width: 330px) {
.event-box-index {
margin-top: 50px;
margin-bottom: 120px;
width: 90%;
margin-left: 3.5%;
/* padding-right: 30px;*/
background: rgba(255, 255, 255, 0.85);
z-index: 2;
padding: 30px;
}
.event-content-index {
padding: 20px 0px 20px 10px;
border-bottom: 1px solid #bababa;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.event-day-index {
float: left;
height: 120px;
margin-right: 20px;
border-right: 2px solid #c4141b;
vertical-align: middle;
text-align: center;
-ms-transform: skew(-14deg);
-webkit-transform: skew(-14deg);
transform: skew(-14deg);
}
.event-day-index p {
padding: 15px 12px 0 0;
}
.event-day-index p span.event-month {
font-size: 13px;
}
.event-day-index p span.event-date {
font-size: 26px;
}
.event-day-index p span.event-two-months {
font-size: 15px;
line-height: 28px;
}
.event-topic-index {
float: right;
width: 70%;
}
.event-topic-index h2 {
font-size: 17px;
line-height: 23px;
font-weight: bold;
margin-bottom: 15px;
}
.event-more a {
font-size: 13px;
font-weight: 600;
color: #c4141b;
padding: 8px 14px;
display: block;
-ms-transform: skew(14deg);
-webkit-transform: skew(14deg);
transform: skew(14deg);
}
.event-more:hover a {
text-decoration: none;
font-weight: 600;
font-size: 13px;
color: #fff;
}
.event-bevel-angle {
position: absolute;
top: 0;
right: -60%;
height: 100%;
width: 100%;
-ms-transform: skew(-14deg);
-webkit-transform: skew(-14deg);
transform: skew(-14deg);
background: #c4141b;
background: linear-gradient(to right, #c4141b, rgba(196, 20, 27, 0.95));
/* opacity: 0.9;*/
}
.event-bevel-angle a div.view-all {
height: 20px;
position: absolute;
opacity: 0.8;
-ms-transform: skew(14deg);
-webkit-transform: skew(14deg);
transform: skew(14deg);
bottom: 8%;
left: 15%;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.event-bevel-angle a {
color: #fff;
font-size: 16px;
font-weight: bold;
}
}
/******************** Event - END ********************/
/******************** News - START ********************/
section.news-index {
position:relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.news-box-index {
margin-top: 120px;
/* margin-bottom: 10%;*/
/* background: #00c6c6;*/
}
.news-swiper-container {
width: 70%;
height: 60%;
/* background: #fdcfcf;*/
float: right;
overflow: hidden;
margin-top: 5%;
}
.news-swiper-wrapper {
position: relative;
width: 100%;
height: 100%;
/* z-index: 1;*/
display: flex;
transition-property: transform;
box-sizing: content-box;
/* padding: 50px;*/
}
.news-swiper-slide {
width: 100%;
height: 80%;
margin-top: 50px;
text-align: left;
font-size: 18px;
/* background: #b2b2b2;*/
display: -webkit-box;
display: -ms-flexbox;
display: block;
/* border-radius: 3%;*/
/* overflow: hidden;*/
/* z-index: 2 !important;*/
}
.news-swiper-pagination {
height: 30px;
position: absolute;
text-align: right;
padding-right: 0px;
-webkit-transition: .3s opacity;
-o-transition: .3s opacity;
transition: .3s opacity;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
/* background: #94a000;*/
}
.news-swiper-pagination-bullet-position {
top: 0 !important;
left: 0 !important;
width: 100% !important;
/* z-index: 1 !important;*/
}
.news-swiper-slide .card .card-body .card-title {
font-size: 20px;
line-height: 25px;
font-weight: bold;
}
.news-swiper-slide .card {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 0.8rem;
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.5);
height: 100%;
width: 95%;
margin: auto;
overflow: hidden;
}
.news-swiper-slide .card .card-img-top {
width: 100%;
border-top-left-radius: calc(0.8rem - 1px);
border-top-right-radius: calc(0.8rem - 1px);
}
.news-swiper-slide .card .card-body .card-text {
font-size: 18px;
line-height: 26px;
margin-bottom: 10px;
}
.news-swiper-slide .card .card-body .card-date {
font-size: 15px;
line-height: 22px;
color: #888;
}
div.news-more {
position: absolute;
right: 10%;
bottom: 5%;
display: inline-block;
border: 1px solid #c4141b;
-ms-transform: skew(-14deg);
-webkit-transform: skew(-14deg);
transform: skew(-14deg);
-webkit-transition: background 0.3s;
transition: background 0.3s;
-webkit-transition-timing-function: ease;
transition-timing-function: ease;
/* z-index: 3 !important;*/
}
div.news-more a {
font-size: 14px;
font-weight: 600;
color: #c4141b;
padding: 10px 15px;
display: block;
-ms-transform: skew(14deg);
-webkit-transform: skew(14deg);
transform: skew(14deg);
/* z-index: 10;*/
}
div.news-more:hover {
background-color: #c4141b;
opacity: 0.9;
/* z-index: 10;*/
}
div.news-more:hover > a {
text-decoration: none;
font-weight: 600;
font-size: 14px;
color: #fff;
/* z-index: 10;*/
}
.news-bevel-angle-right {
position: relative;
/*
top: calc(50%);
right: -15%;
*/
height: 70%;
width: 130%;
margin-left: 18%;
-ms-transform: skew(-14deg);
-webkit-transform: skew(-14deg);
transform: skew(-14deg);
background: #ddd;
background: linear-gradient(to right, #ddd, rgba(221, 221, 221, 0.1));
z-index: -3;
opacity: 0.8;
}
.news-bevel-angle-left {
position: absolute;
top: 0;
left: -10%;
height: 100%;
width: 50%;
-ms-transform: skew(-14deg);
-webkit-transform: skew(-14deg);
transform: skew(-14deg);
background: #c4141b;
background: linear-gradient(to left, #c4141b, rgba(196, 20, 27, 0.9));
z-index: -5;
/* opacity: 0.9;*/
}
.news-box-index a div.view-all {
height: 22px;
position: absolute;
opacity: 0.8;
bottom: 8%;
left: 30%;
transform: translate(0,0);
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.news-box-index a {
color: #c4141b;
font-size: 18px;
font-weight: bold;
}
.news-box-index a:hover {
text-decoration: none;
}
.news-box-index a div.view-all img{
height: 100%;
width: auto;
margin-right: 10px;
}
.news-box-index a div.view-all:hover {
opacity: 1;
transform: translate(13%,0);
}
/*
.news-box-index a div.view-all:hover span {
-ms-transform: skew(-14deg);
-webkit-transform: skew(-14deg);
transform: skew(-14deg);
}
*/
/* 桌機 小於1800 */
@media (max-width: 1800px) {
.news-swiper-container {
width: 85%;
height: 520px;
float: right;
overflow: hidden;
margin-top: 3%;
/* background: #fdcfcf;*/
}
.news-swiper-slide .card .card-body .card-title {
font-size: 20px;
line-height: 25px;
font-weight: bold;
margin-bottom: 8px;
}
.news-bevel-angle-right {
position: relative;
height: 580px;
width: 130%;
margin-left: 8%;
margin-top: -10px;
-ms-transform: skew(-14deg);
-webkit-transform: skew(-14deg);
transform: skew(-14deg);
background: #ddd;
background: linear-gradient(to right, #ddd, rgba(221, 221, 221, 0.1));
z-index: -3;
opacity: 0.8;
}
}
/* 桌機 平板 小於1500 */
@media (max-width: 1500px) {
.news-box-index {
margin-top: 100px;
/* margin-bottom: 10%;*/
/* background: #00c6c6;*/
}
.news-swiper-container {
width: 95%;
height: 480px;
float: right;
overflow: hidden;
margin-top: 2%;
/* background: #fdcfcf;*/
}
.news-swiper-slide {
width: 100%;
height: 380px;
margin-top: 40px;
text-align: left;
font-size: 16px;
/* background: #b2b2b2;*/
display: -webkit-box;
display: -ms-flexbox;
display: block;
}
.news-swiper-slide .card .card-body .card-title {
font-size: 18px;
line-height: 25px;
font-weight: bold;
margin-bottom: 8px;
}
.news-swiper-slide .card .card-body .card-text {
font-size: 16px;
line-height: 24px;
margin-bottom: 10px;
}
.news-swiper-slide .card .card-body .card-date {
font-size: 14px;
line-height: 20px;
color: #888;
}
div.news-more {
position: absolute;
right: 10%;
bottom: 5%;
display: inline-block;
border: 1px solid #c4141b;
-ms-transform: skew(-14deg);
-webkit-transform: skew(-14deg);
transform: skew(-14deg);
-webkit-transition: background 0.3s;
transition: background 0.3s;
-webkit-transition-timing-function: ease;
transition-timing-function: ease;
/* z-index: 3 !important;*/
}
.news-bevel-angle-right {
position: relative;
height: 490px;
width: 150%;
margin-left: -3%;
margin-top: -5px;
-ms-transform: skew(-14deg);
-webkit-transform: skew(-14deg);
transform: skew(-14deg);
background: #ddd;
background: linear-gradient(to right, #ddd, rgba(221, 221, 221, 0.1));
z-index: -3;
opacity: 0.8;
}
.news-bevel-angle-left {
position: absolute;
top: 0;
left: -20%;
height: 100%;
width: 50%;
-ms-transform: skew(-14deg);
-webkit-transform: skew(-14deg);
transform: skew(-14deg);
background: #c4141b;
background: linear-gradient(to left, #c4141b, rgba(196, 20, 27, 0.9));
z-index: -5;
/* opacity: 0.9;*/
}
.news-box-index a div.view-all {
height: 20px;
position: absolute;
opacity: 0.8;
bottom: 5%;
left: 15%;
transform: translate(0, 0);
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.news-box-index a {
color: #c4141b;
font-size: 16px;
font-weight: bold;
}
}
/* 平板 原 小於1200 1199.98 後改為 1265*/
@media (max-width: 1199.98px) {
section.news-index {
position: relative;
width: 100%;
height: auto;
overflow: hidden;
}
.news-box-index {
margin-top: 100px;
margin-bottom: 100px;
margin-left: 10%;
/* margin-bottom: 10%;*/
/* background: #00c6c6;*/
}
.news-swiper-container {
width: 93%;
height: 480px;
float: right;
overflow: hidden;
margin-top: 2%;
/* background: #fdcfcf;*/
}
.news-swiper-slide {
width: 100%;
height: 380px;
margin-top: 40px;
text-align: left;
font-size: 16px;
/* background: #b2b2b2;*/
display: -webkit-box;
display: -ms-flexbox;
display: block;
}
.news-bevel-angle-right {
position: relative;
height: 490px;
width: 150%;
margin-left: 0%;
margin-top: -5px;
-ms-transform: skew(-14deg);
-webkit-transform: skew(-14deg);
transform: skew(-14deg);
background: #ddd;
background: linear-gradient(to right, #ddd, rgba(221, 221, 221, 0.1));
z-index: -3;
opacity: 0.8;
}
.news-bevel-angle-left {
position: absolute;
top: 0;
left: -22%;
height: 100%;
width: 50%;
-ms-transform: skew(-14deg);
-webkit-transform: skew(-14deg);
transform: skew(-14deg);
background: #c4141b;
background: linear-gradient(to left, #c4141b, rgba(196, 20, 27, 0.9));
z-index: -5;
/* opacity: 0.9;*/
}
.news-box-index a div.view-all {
height: 22px;
position: absolute;
opacity: 0.8;
bottom: -8%;
left: 16%;
transform: translate(0, 0);
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
}
/* 平板 小於992 */
@media (max-width: 991.98px) {
section.news-index {
position: relative;
width: 100%;
height: auto;
overflow: hidden;
margin-top: 50px;
}
.news-box-index {
margin-top: 100px;
margin-bottom: 100px;
margin-left: 10%;
/* margin-bottom: 10%;*/
/* background: #00c6c6;*/
}
.news-swiper-container {
width: 88%;
height: 480px;
float: right;
overflow: hidden;
margin-top: 2%;
/* background: #fdcfcf;*/
}
.news-swiper-slide {
width: 100%;
height: 380px;
margin-top: 40px;
text-align: left;
font-size: 16px;
/* background: #b2b2b2;*/
display: -webkit-box;
display: -ms-flexbox;
display: block;
}
.news-swiper-slide .card .card-body .card-title {
font-size: 18px;
line-height: 25px;
font-weight: bold;
margin-bottom: 8px;
}
.news-swiper-slide .card .card-body .card-text {
font-size: 16px;
line-height: 24px;
margin-bottom: 10px;
}
.news-swiper-slide .card .card-body .card-date {
font-size: 14px;
line-height: 20px;
color: #888;
}
div.news-more a {
font-size: 13px;
font-weight: 600;
color: #c4141b;
padding: 8px 14px;
display: block;
-ms-transform: skew(14deg);
-webkit-transform: skew(14deg);
transform: skew(14deg);
/* z-index: 10;*/
}
div.news-more:hover > a {
text-decoration: none;
font-weight: 600;
font-size: 13px;
color: #fff;
/* z-index: 10;*/
}
.news-bevel-angle-right {
position: relative;
height: 490px;
width: 150%;
margin-left: 3%;
margin-top: -5px;
-ms-transform: skew(-14deg);
-webkit-transform: skew(-14deg);
transform: skew(-14deg);
background: #ddd;
background: linear-gradient(to right, #ddd, rgba(221, 221, 221, 0.1));
z-index: -3;
opacity: 0.8;
}
.news-bevel-angle-left {
position: absolute;
top: 0;
left: -22%;
height: 100%;
width: 50%;
-ms-transform: skew(-14deg);
-webkit-transform: skew(-14deg);
transform: skew(-14deg);
background: #c4141b;
background: linear-gradient(to left, #c4141b, rgba(196, 20, 27, 0.9));
z-index: -5;
/* opacity: 0.9;*/
}
.news-box-index a div.view-all {
height: 22px;
position: absolute;
opacity: 0.8;
bottom: -8%;
left: 16%;
transform: translate(0, 0);
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
}
/* 平板 小於768 */
@media (max-width: 767.98px) {
.news-box-index {
margin-top: 100px;
margin-bottom: 100px;
margin-left: 10%;
/* margin-bottom: 10%;*/
/* background: #00c6c6;*/
}
.news-swiper-container {
width: 100%;
height: 480px;
float: right;
overflow: hidden;
margin-top: 2%;
/* background: #fdcfcf;*/
}
.news-swiper-slide {
width: 100%;
height: 380px;
margin-top: 40px;
text-align: left;
font-size: 16px;
/* background: #b2b2b2;*/
display: -webkit-box;
display: -ms-flexbox;
display: block;
}
.news-bevel-angle-right {
position: relative;
height: 490px;
width: 150%;
margin-left: -11%;
margin-top: -5px;
-ms-transform: skew(-14deg);
-webkit-transform: skew(-14deg);
transform: skew(-14deg);
background: #ddd;
background: linear-gradient(to right, #ddd, rgba(221, 221, 221, 0.1));
z-index: -3;
opacity: 0.8;
}
.news-bevel-angle-left {
position: absolute;
top: 0;
left: -22%;
height: 100%;
width: 50%;
-ms-transform: skew(-14deg);
-webkit-transform: skew(-14deg);
transform: skew(-14deg);
background: #c4141b;
background: linear-gradient(to left, #c4141b, rgba(196, 20, 27, 0.9));
z-index: -5;
/* opacity: 0.9;*/
}
.news-box-index a div.view-all {
height: 22px;
position: absolute;
opacity: 0.8;
bottom: -8%;
left: 16%;
transform: translate(0, 0);
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
}
/* 手機 小於576 */
@media (max-width: 580px) {
section.news-index {
position: relative;
width: 100%;
height: auto;
overflow: hidden;
margin-top: 50px;
}
.news-box-index {
margin-top: 100px;
margin-bottom: 100px;
margin-left: 10%;
/* margin-bottom: 10%;*/
/* background: #00c6c6;*/
}
.news-swiper-container {
width: 70%;
height: 480px;
float: right;
overflow: hidden;
margin-top: 5%;
/* background: #fdcfcf;*/
}
.news-swiper-slide {
width: 100%;
height: 380px;
margin-top: 35px;
text-align: left;
font-size: 16px;
/* background: #b2b2b2;*/
display: -webkit-box;
display: -ms-flexbox;
display: block;
}
.news-bevel-angle-right {
position: relative;
height: 490px;
width: 150%;
margin-left: -10%;
margin-top: -5px;
-ms-transform: skew(-14deg);
-webkit-transform: skew(-14deg);
transform: skew(-14deg);
background: #ddd;
background: linear-gradient(to right, #ddd, rgba(221, 221, 221, 0.1));
z-index: -3;
opacity: 0.8;
}
.news-bevel-angle-left {
position: absolute;
top: 0;
left: -40%;
height: 100%;
width: 80%;
-ms-transform: skew(-14deg);
-webkit-transform: skew(-14deg);
transform: skew(-14deg);
background: #c4141b;
background: linear-gradient(to left, #c4141b, rgba(196, 20, 27, 0.9));
z-index: -5;
/* opacity: 0.9;*/
}
.news-box-index a div.view-all {
height: 22px;
position: absolute;
opacity: 0.8;
bottom: -8%;
left: 25%;
transform: translate(0, 0);
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
}
/* 手機 小於480 */
@media (max-width: 480px) {
section.news-index {
position: relative;
width: 100%;
height: auto;
overflow: hidden;
margin-top: 50px;
}
.news-box-index {
margin-top: 100px;
margin-bottom: 100px;
margin-left: 10%;
/* margin-bottom: 10%;*/
/* background: #00c6c6;*/
}
.news-swiper-container {
width: 90%;
height: 480px;
float: right;
overflow: hidden;
margin-top: 6%;
/* background: #fdcfcf;*/
}
.news-swiper-slide {
width: 100%;
height: 380px;
margin-top: 35px;
text-align: left;
font-size: 16px;
/* background: #b2b2b2;*/
display: -webkit-box;
display: -ms-flexbox;
display: block;
}
.news-bevel-angle-right {
position: relative;
height: 490px;
width: 150%;
margin-left: -10%;
margin-top: -5px;
-ms-transform: skew(-14deg);
-webkit-transform: skew(-14deg);
transform: skew(-14deg);
background: #ddd;
background: linear-gradient(to right, #ddd, rgba(221, 221, 221, 0.1));
z-index: -3;
opacity: 0.8;
}
.news-bevel-angle-left {
position: absolute;
top: 0;
left: -40%;
height: 100%;
width: 80%;
-ms-transform: skew(-14deg);
-webkit-transform: skew(-14deg);
transform: skew(-14deg);
background: #c4141b;
background: linear-gradient(to left, #c4141b, rgba(196, 20, 27, 0.9));
z-index: -5;
/* opacity: 0.9;*/
}
.news-box-index a div.view-all {
height: 22px;
position: absolute;
opacity: 0.8;
bottom: -8%;
left: 22%;
transform: translate(0, 0);
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
}
/* 手機 小於320 */
@media (max-width: 330px) {
section.news-index {
position: relative;
width: 100%;
height: auto;
overflow: hidden;
margin-top: 50px;
}
.news-box-index {
margin-top: 100px;
margin-bottom: 60px;
margin-left: 10%;
/* margin-bottom: 10%;*/
/* background: #00c6c6;*/
}
.news-swiper-container {
width: 100%;
height: 480px;
float: right;
overflow: hidden;
margin-top: 6%;
/* background: #fdcfcf;*/
}
.news-swiper-slide {
width: 100%;
height: 350px;
margin-top: 35px;
text-align: left;
font-size: 16px;
/* background: #b2b2b2;*/
display: -webkit-box;
display: -ms-flexbox;
display: block;
}
.news-bevel-angle-right {
position: relative;
height: 450px;
width: 150%;
margin-left: -20%;
margin-top: -5px;
-ms-transform: skew(-14deg);
-webkit-transform: skew(-14deg);
transform: skew(-14deg);
background: #ddd;
background: linear-gradient(to right, #ddd, rgba(221, 221, 221, 0.1));
z-index: -3;
opacity: 0.8;
}
.news-bevel-angle-left {
position: absolute;
top: 0;
left: -40%;
height: 100%;
width: 80%;
-ms-transform: skew(-14deg);
-webkit-transform: skew(-14deg);
transform: skew(-14deg);
background: #c4141b;
background: linear-gradient(to left, #c4141b, rgba(196, 20, 27, 0.9));
z-index: -5;
/* opacity: 0.9;*/
}
.news-box-index a div.view-all {
height: 22px;
position: absolute;
opacity: 0.8;
bottom: -2%;
left: 22%;
transform: translate(0, 0);
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
}
/******************** News - END ********************/
/******************** Technote - START ********************/
section.technote-index {
position:relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.technote-box-index {
margin-top: 120px;
/* margin-bottom: 10%;*/
/* background: rgba(0, 198, 198, 0.33);*/
}
.title-index-technote {
margin-bottom: 70px;
}
a.technote-content-link-index {
display: block;
margin-left: 2%;
width: 70%;
transform: perspective(1px) scale(1,1);
backface-visibility: hidden;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
a.technote-content-link-index:hover {
text-decoration: none;
-webkit-transform: perspective(1px) scale(1.02,1.02);
-moz-transform: perspective(1px) scale(1.02,1.02);
transform: perspective(1px) scale(1.02,1.02);
backface-visibility: hidden;
background: rgba(255, 255, 255, 0.4);
border-radius: 10px;
}
.technote-content-index {
width: 100%;
padding: 20px 30px;
border-bottom: 1px solid #bbb;
}
a.technote-content-link-index:hover .technote-content-index {
border-bottom: none;
border: 1px solid #bbb;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
border-radius: 10px;
}
.technote-content-right {
text-align: right;
}
.technote-type-index {
color: #c4141b;
font-size: 16px;
margin-bottom: 10px;
font-weight: bold;
}
.technote-title-index {
color: #222;
font-size: 18px;
line-height: 25px;
/* font-weight: 500;*/
}
.technote-date-index {
font-size: 15px;
line-height: 22px;
color: #555;
}
.technote-date-index span.double_arrow_tech {
font-family: 'Arial','Helvetica',sans-serif;
color: #c4141b;
font-weight:700;
margin-left: 10px;
}
.technote-bevel-angle-left {
position: absolute;
top: 100px;
left: -50%;
/*
top: calc(50%);
right: -15%;
*/
height: 75%;
width: 130%;
margin-left: 0;
-ms-transform: skew(-14deg);
-webkit-transform: skew(-14deg);
transform: skew(-14deg);
background: #eaeaea;
background: linear-gradient(to right, #eee, rgba(244, 244, 244, 0.67));
z-index: -3;
opacity: 0.8;
}
.technote-bevel-angle-right {
position: absolute;
top: 0;
right: -18%;
height: 100%;
width: 65%;
-ms-transform: skew(-14deg);
-webkit-transform: skew(-14deg);
transform: skew(-14deg);
background: #ccc;
background: linear-gradient(to right, #ccc, rgba(221, 221, 221, 0.76));
z-index: -5;
/* opacity: 0.6; */
}
.technote-box-index a div.view-all {
height: 22px;
position: absolute;
opacity: 0.8;
bottom: 16%;
right: 15%;
transform: translate(0,0);
-webkit-transition: all 0.2s;
transition: all 0.2s;
color: #ffffff;
font-size: 18px;
font-weight: bold;
}
.technote-box-index a div.view-all:hover {
text-decoration: none;
}
.technote-box-index a div.view-all img{
height: 100%;
width: auto;
margin-right: 10px;
}
.technote-box-index a div.view-all:hover {
opacity: 1;
transform: translate(13%,0);
}
/*
.technote-box-index a div.view-all:hover span {
-ms-transform: skew(-14deg);
-webkit-transform: skew(-14deg);
transform: skew(-14deg);
}
*/
/* 桌機 小於1700 */
@media (max-width: 1700px) {
.title-index-technote {
margin-bottom: 40px;
}
a.technote-content-link-index {
display: block;
margin-left: 0%;
width: 75%;
transform: scale(1, 1);
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.technote-bevel-angle-left {
position: absolute;
top: 80px;
left: -50%;
height: 610px;
width: 135%;
margin-left: 0;
-ms-transform: skew(-14deg);
-webkit-transform: skew(-14deg);
transform: skew(-14deg);
background: #eaeaea;
background: linear-gradient(to right, #eee, rgba(244, 244, 244, 0.67));
z-index: -3;
opacity: 0.8;
}
.technote-box-index a div.view-all {
height: 22px;
position: absolute;
opacity: 0.8;
bottom: 19%;
right: 9%;
transform: translate(0, 0);
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
}
/* 桌機 平板 小於1500 */
@media (max-width: 1500px) {
.technote-box-index {
margin-top: 100px;
/* margin-left: 15%;*/
/* margin-bottom: 10%;*/
/* background: rgba(0, 198, 198, 0.33);*/
}
.title-index-technote {
margin-bottom: 30px;
}
a.technote-content-link-index {
display: block;
margin-left: 0%;
width: 80%;
transform: scale(1, 1);
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.technote-content-index {
width: 100%;
padding: 15px 30px;
border-bottom: 1px solid #bbb;
}
.technote-type-index {
color: #c4141b;
font-size: 16px;
margin-bottom: 5px;
font-weight: bold;
}
.technote-title-index {
color: #222;
font-size: 16px;
line-height: 25px;
font-weight: 500;
}
.technote-date-index {
font-size: 14px;
line-height: 22px;
color: #555;
}
.technote-bevel-angle-left {
position: absolute;
top: 70px;
left: -50%;
height: 510px;
width: 140%;
margin-left: 0;
-ms-transform: skew(-14deg);
-webkit-transform: skew(-14deg);
transform: skew(-14deg);
background: #eaeaea;
background: linear-gradient(to right, #eee, rgba(244, 244, 244, 0.67));
z-index: -3;
opacity: 0.8;
}
.technote-bevel-angle-right {
position: absolute;
top: 0;
right: -10%;
height: 100%;
width: 60%;
-ms-transform: skew(-14deg);
-webkit-transform: skew(-14deg);
transform: skew(-14deg);
background: #ccc;
background: linear-gradient(to right, #ccc, rgba(221, 221, 221, 0.76));
z-index: -5;
/* opacity: 0.6; */
}
.technote-box-index a div.view-all {
height: 20px;
position: absolute;
opacity: 0.8;
bottom: 20%;
right: 4%;
transform: translate(0, 0);
-webkit-transition: all 0.2s;
transition: all 0.2s;
color: #ffffff;
font-size: 16px;
font-weight: bold;
}
}
/* 桌機 平板 原 小於1200 1199.98 後改為 1265 */
@media (max-width: 1265px) {
section.technote-index {
position: relative;
width: 100%;
height: auto;
overflow: hidden;
}
.technote-box-index {
margin-top: 100px;
/* margin-left: 15%;*/
margin-bottom: 110px;
/* background: rgba(0, 198, 198, 0.33);*/
}
.title-index-technote {
margin-bottom: 40px;
}
a.technote-content-link-index {
display: block;
margin-left: 0%;
width: 80%;
transform: scale(1, 1);
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.technote-content-index {
width: 100%;
padding: 15px 30px;
border-bottom: 1px solid #bbb;
}
.technote-type-index {
color: #c4141b;
font-size: 16px;
margin-bottom: 5px;
font-weight: bold;
}
.technote-title-index {
color: #222;
font-size: 16px;
line-height: 25px;
font-weight: 500;
}
.technote-date-index {
font-size: 14px;
line-height: 22px;
color: #555;
}
.technote-bevel-angle-left {
position: absolute;
top: 70px;
left: -50%;
height: 520px;
width: 140%;
margin-left: 0;
-ms-transform: skew(-14deg);
-webkit-transform: skew(-14deg);
transform: skew(-14deg);
background: #eaeaea;
background: linear-gradient(to right, #eee, rgba(244, 244, 244, 0.67));
z-index: -3;
opacity: 0.8;
}
.technote-bevel-angle-right {
position: absolute;
top: 0;
right: -15%;
height: 100%;
width: 60%;
-ms-transform: skew(-14deg);
-webkit-transform: skew(-14deg);
transform: skew(-14deg);
background: #ccc;
background: linear-gradient(to right, #ccc, rgba(221, 221, 221, 0.76));
z-index: -5;
/* opacity: 0.6; */
}
.technote-box-index a div.view-all {
height: 20px;
position: absolute;
opacity: 0.8;
bottom: 0;
right: 3%;
transform: translate(0, 0);
-webkit-transition: all 0.2s;
transition: all 0.2s;
color: #ffffff;
font-size: 16px;
font-weight: bold;
}
}
/* 平板 小於992 */
@media (max-width: 991.98px) {
section.technote-index {
position: relative;
width: 100%;
height: auto;
overflow: hidden;
margin-top: 50px;
}
.technote-box-index {
margin-top: 100px;
margin-bottom: 200px;
margin-left: 10%;
}
.title-index-technote {
margin-bottom: 40px;
}
a.technote-content-link-index {
display: block;
margin-left: 0%;
width: 95%;
transform: scale(1, 1);
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.technote-content-index {
width: 100%;
padding: 15px 30px;
border-bottom: 1px solid #bbb;
}
.technote-bevel-angle-left {
position: absolute;
top: 70px;
left: -30%;
height: 520px;
width: 140%;
margin-left: 0;
-ms-transform: skew(-14deg);
-webkit-transform: skew(-14deg);
transform: skew(-14deg);
background: #eaeaea;
background: linear-gradient(to right, #eee, rgba(244, 244, 244, 0.67));
z-index: -3;
opacity: 0.8;
}
.technote-bevel-angle-right {
position: absolute;
top: 0;
right: -18%;
height: 100%;
width: 60%;
-ms-transform: skew(-14deg);
-webkit-transform: skew(-14deg);
transform: skew(-14deg);
background: #ccc;
background: linear-gradient(to right, #ccc, rgba(221, 221, 221, 0.76));
z-index: -5;
/* opacity: 0.6; */
}
.technote-box-index a div.view-all {
height: 20px;
position: absolute;
opacity: 0.8;
bottom: -13%;
right: 36%;
transform: translate(0, 0);
-webkit-transition: all 0.2s;
transition: all 0.2s;
color: #ffffff;
font-size: 16px;
font-weight: bold;
}
}
/* 平板 小於768 */
@media (max-width: 767.98px) {
.technote-box-index {
margin-top: 50px;
margin-bottom: 200px;
margin-left: 10%;
}
.title-index-technote {
margin-bottom: 40px;
}
a.technote-content-link-index {
display: block;
margin-left: 0%;
width: 95%;
transform: scale(1, 1);
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.technote-content-index {
width: 100%;
padding: 15px 15px 5px 15px;
border-bottom: 1px solid #bbb;
}
.technote-content-right {
text-align: left;
}
.technote-type-index {
color: #c4141b;
font-size: 16px;
margin-bottom: 5px;
font-weight: bold;
}
.technote-title-index {
color: #222;
font-size: 16px;
line-height: 24px;
font-weight: 500;
margin-bottom: 10px;
}
.technote-date-index {
font-size: 14px;
line-height: 20px;
color: #555;
}
.technote-date-index span.double_arrow_tech {
font-family: 'Arial', 'Helvetica', sans-serif;
color: #c4141b;
font-weight: 700;
margin-left: 10px;
display: inline-block;
float: right;
}
.technote-bevel-angle-left {
position: absolute;
top: 70px;
left: -40%;
height: 670px;
width: 180%;
margin-left: 0;
-ms-transform: skew(-14deg);
-webkit-transform: skew(-14deg);
transform: skew(-14deg);
background: #eaeaea;
background: linear-gradient(to right, #eee, rgba(244, 244, 244, 0.8));
z-index: -3;
opacity: 0.9;
}
.technote-bevel-angle-right {
position: absolute;
top: 0;
right: -50%;
height: 100%;
width: 105%;
-ms-transform: skew(-14deg);
-webkit-transform: skew(-14deg);
transform: skew(-14deg);
background: #ccc;
background: linear-gradient(to right, #ccc, rgba(221, 221, 221, 0.76));
z-index: -5;
/* opacity: 0.6; */
}
.technote-box-index a div.view-all {
height: 20px;
position: absolute;
opacity: 0.8;
bottom: -15%;
right: 53%;
transform: translate(0, 0);
-webkit-transition: all 0.2s;
transition: all 0.2s;
color: #ffffff;
font-size: 16px;
font-weight: bold;
}
}
/* 手機 小於480 */
@media (max-width: 480px) {
.technote-box-index {
margin-top: 40px;
margin-bottom: 180px;
margin-left: 8%;
}
.title-index-technote {
margin-bottom: 40px;
}
a.technote-content-link-index {
display: block;
margin-left: 0%;
width: 100%;
transform: scale(1, 1);
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.technote-content-index {
width: 100%;
padding: 15px 15px 5px 15px;
border-bottom: 1px solid #bbb;
}
.technote-bevel-angle-left {
position: absolute;
top: 70px;
left: -50%;
height: 750px;
width: 200%;
margin-left: 0;
-ms-transform: skew(-14deg);
-webkit-transform: skew(-14deg);
transform: skew(-14deg);
background: #eaeaea;
background: linear-gradient(to right, #eee, rgba(244, 244, 244, 0.8));
z-index: -3;
opacity: 0.9;
}
.technote-bevel-angle-right {
position: absolute;
top: 0;
right: -50%;
height: 100%;
width: 105%;
-ms-transform: skew(-14deg);
-webkit-transform: skew(-14deg);
transform: skew(-14deg);
background: #ccc;
background: linear-gradient(to right, #ccc, rgba(221, 221, 221, 0.76));
z-index: -5;
/* opacity: 0.6; */
}
.technote-box-index a div.view-all {
height: 20px;
position: absolute;
opacity: 0.8;
bottom: -18%;
right: 53%;
transform: translate(0, 0);
-webkit-transition: all 0.2s;
transition: all 0.2s;
color: #ffffff;
font-size: 16px;
font-weight: bold;
}
}
/******************** Technote - END ********************/
/******************** Community - START ********************/
section.community-index {
position:relative;
width: 100%;
height: auto;
/* overflow: hidden;*/
}
.community-box-index {
margin-top: 120px;
/* margin-bottom: 10%;*/
/* background: rgba(0, 198, 198, 0.33);*/
}
.community-swiper-container {
width: 85%;
height: auto;
/* background: #fdcfcf;*/
/* float: right;*/
overflow: hidden;
margin-bottom: 100px;
margin-top: 5%;
}
.community-swiper-wrapper {
position: relative;
width: 100%;
/* height: 100%;*/
/* z-index: 1;*/
display: flex;
transition-property: transform;
box-sizing: content-box;
/* padding: 50px;*/
}
.community-swiper-slide {
width: 100%;
height: auto;
text-align: left;
font-size: 18px;
/* background: #b2b2b2;*/
display: -webkit-box;
display: -ms-flexbox;
display: block;
}
.community-swiper-pagination {
height: 30px;
position: absolute;
text-align: center;
padding-right: 0px;
-webkit-transition: .3s opacity;
-o-transition: .3s opacity;
transition: .3s opacity;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
/* background: #94a000;*/
}
.community-swiper-pagination-bullet-position {
width: 100% !important;
}
.community-link {
color: #333;
transition: all 0.3s;
}
.community-link .community-img {
transition: all 0.3s;
}
.community-link:hover {
color: #c4141b;
text-decoration: none;
}
.community-link:hover .community-img {
opacity: 0.8;
}
.community-content {
margin-top: 20px;
margin-bottom: 100px;
}
.community-icon {
width: 10%;
}
.community-icon img {
max-width: 16px;
}
.community-title {
width: 90%;
padding-left: 1%;
}
.community-title h2{
font-size: 20px;
line-height: 25px;
font-weight: bold;
margin-bottom: 6px;
}
.community-title p{
font-size: 20px;
line-height: 25px;
}
.community-bevel-angle-left {
position: absolute;
top: 0;
left: -40%;
height: 100%;
width: 50%;
margin-left: 0;
-ms-transform: skew(-14deg);
-webkit-transform: skew(-14deg);
transform: skew(-14deg);
background: #eaeaea;
background: linear-gradient(to left, #c4141b, rgba(196, 20, 27, 0.9));
z-index: -3;
/* opacity: 0.8; */
}
.community-box-index a div.view-all {
height: 22px;
position: absolute;
opacity: 0.8;
bottom: 8%;
right: 0;
transform: translate(0,0);
-webkit-transition: all 0.2s;
transition: all 0.2s;
color: #c4141b;
font-size: 18px;
font-weight: bold;
}
.community-box-index a div.view-all img{
height: 100%;
width: auto;
margin-right: 10px;
}
.community-box-index a div.view-all:hover {
opacity: 1;
transform: translate(13%,0);
}
/*
.community-box-index a div.view-all:hover span {
-ms-transform: skew(-14deg);
-webkit-transform: skew(-14deg);
transform: skew(-14deg);
}
*/
/* 筆電 小於1600 */
@media (max-width: 1500px) {
.community-box-index a div.view-all {
font-size: 16px;
height: 20px;
}
}
/* 筆電 小於1600 */
@media (max-width: 1600px) {
.community-swiper-container {
width: 100%;
height: auto;
/* background: #fdcfcf;*/
overflow: hidden;
margin-bottom: 80px;
margin-top: 5%;
}
}
/* 平板 原 小於1200 1199.98 後改為 1265*/
@media (max-width: 1199.98px) {
.community-bevel-angle-left {
position: absolute;
top: 0;
left: -48%;
height: 100%;
width: 50%;
margin-left: 0;
-ms-transform: skew(-14deg);
-webkit-transform: skew(-14deg);
transform: skew(-14deg);
background: #eaeaea;
background: linear-gradient(to left, #c4141b, rgba(196, 20, 27, 0.9));
z-index: -3;
/* opacity: 0.8; */
}
}
/* 平板 小於992 */
@media (max-width: 992px) {
section.community-index {
position:relative;
width: 100%;
height: auto;
margin-top: 50px;
/* overflow: hidden;*/
}
.community-box-index {
margin-top: 110px;
/* margin-bottom: 10%;*/
/* background: rgba(0, 198, 198, 0.33);*/
}
.community-swiper-container {
width: 90%;
height: auto;
/* background: #fdcfcf;*/
overflow: hidden;
margin-bottom: 80px;
margin-top: 5%;
}
.community-bevel-angle-left {
position: absolute;
top: 0;
left: -49%;
height: 100%;
width: 50%;
margin-left: 0;
-ms-transform: skew(-14deg);
-webkit-transform: skew(-14deg);
transform: skew(-14deg);
background: #eaeaea;
background: linear-gradient(to left, #c4141b, rgba(196, 20, 27, 0.9));
z-index: -3;
/* opacity: 0.8; */
}
.community-title h2 {
font-size: 18px;
font-weight: bold;
margin-bottom: 8px;
}
.community-title p {
font-size: 18px;
}
.community-box-index a div.view-all {
position: absolute;
opacity: 0.8;
bottom: 8%;
right: 10%;
}
}
/* 手機 小於576 */
@media (max-width: 580px) {
.community-swiper-container {
width: 100%;
height: auto;
/* background: #fdcfcf;*/
overflow: hidden;
margin-bottom: 80px;
margin-top: 5%;
}
.community-bevel-angle-left {
position: absolute;
top: 0;
left: -50%;
height: 100%;
width: 50%;
margin-left: 0;
-ms-transform: skew(-14deg);
-webkit-transform: skew(-14deg);
transform: skew(-14deg);
background: #eaeaea;
background: linear-gradient(to left, #c4141b, rgba(196, 20, 27, 0.9));
z-index: -3;
/* opacity: 0.8; */
}
}
/* 手機 小於480 */
@media (max-width: 480px) {
.community-box-index {
margin-top: 100px;
/* margin-left: 10%;*/
/* margin-bottom: 10%;*/
/* background: rgba(0, 198, 198, 0.33);*/
}
.community-swiper-container {
width: 85%;
height: auto;
/* background: #fdcfcf;*/
overflow: hidden;
margin-bottom: 80px;
margin-top: 5%;
}
.community-content {
margin-top: 20px;
margin-bottom: 60px;
}
.community-bevel-angle-left {
position: absolute;
top: 0;
left: -58%;
height: 100%;
width: 50%;
margin-left: 0;
-ms-transform: skew(-14deg);
-webkit-transform: skew(-14deg);
transform: skew(-14deg);
background: #eaeaea;
background: linear-gradient(to left, #c4141b, rgba(196, 20, 27, 0.9));
z-index: -3;
/* opacity: 0.8; */
}
.community-title h2 {
font-size: 18px;
font-weight: bold;
margin-bottom: 5px;
}
.community-title p {
font-size: 18px;
}
.community-swiper-pagination {
height: 30px;
position: absolute;
text-align: center;
padding-right: 0px;
-webkit-transition: .3s opacity;
-o-transition: .3s opacity;
transition: .3s opacity;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
/* background: #94a000;*/
}
}
/* 手機 小於320 */
@media (max-width: 320px) {
.community-box-index {
margin-top: 100px;
/* margin-left: 10%;*/
/* margin-bottom: 10%;*/
/* background: rgba(0, 198, 198, 0.33);*/
}
.community-swiper-container {
width: 85%;
height: auto;
/* background: #fdcfcf;*/
overflow: hidden;
margin-bottom: 80px;
margin-top: 5%;
}
.community-content {
margin-top: 20px;
margin-bottom: 70px;
}
.community-bevel-angle-left {
position: absolute;
top: 0;
left: -60%;
height: 100%;
width: 50%;
margin-left: 0;
-ms-transform: skew(-14deg);
-webkit-transform: skew(-14deg);
transform: skew(-14deg);
background: #eaeaea;
background: linear-gradient(to left, #c4141b, rgba(196, 20, 27, 0.9));
z-index: -3;
/* opacity: 0.8; */
}
.community-title h2 {
font-size: 18px;
font-weight: bold;
margin-bottom: 5px;
}
.community-title p {
font-size: 18px;
}
.community-swiper-pagination {
height: 30px;
position: absolute;
text-align: center;
padding-right: 0px;
-webkit-transition: .3s opacity;
-o-transition: .3s opacity;
transition: .3s opacity;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
/* background: #94a000;*/
}
}
/******************** Community - END ********************/
/******************** Footer - START ********************/
footer {
position:relative;
width: 100%;
height: auto;
background: #333;
z-index: 1;
}
.footer-box {
color: #fff;
padding: 50px 0 30px 0;
}
.footer-content {
padding-bottom: 30px;
border-bottom: 1px solid #eee;
}
.footer-address h2 {
font-size: 18px;
margin-bottom: 15px;
/* font-weight: 400;*/
}
.footer-address p {
font-size: 16px;
line-height: 24px;
/* padding: 30px;*/
}
.footer-address-content {
padding: 20px 30px;
}
.footer-address-content p a{
color: #fff;
transition: all 0.3s;
}
.footer-address-content p a:hover{
color: rgba(255, 255, 255, 0.5);
}
.footer-contact {
border-right: 1px solid #eee;
border-left: 1px solid #eee;
}
.footer-contact p {
font-size: 16px;
line-height: 24px;
transition: all 0.3s;
}
.footer-contact-box {
margin: auto;
}
.footer-contact-box p a{
color: #fff;
transition: all 0.3s;
}
.footer-contact-box p a:hover{
color: rgba(255, 255, 255, 0.5);
}
.footer-icon {
margin-top: 15px;
opacity: 1;
transition: all 0.3s;
}
.footer-icon img {
width: 36px;
margin-right: 10px;
transition: all 0.3s;
}
.footer-icon a:hover img {
opacity: 0.5;
}
.footer-cadence-partner {
/* background: #c10000;*/
text-align: center;
}
.footer-cp-logo {
padding: 30px;
}
.footer-cadence-partner img {
width: 220px;
}
.footer-logo {
text-align: center;
margin-top: 30px;
}
.footer-logo img {
width: 200px;
margin-bottom: 30px;
}
/* 筆電 小1600*/
@media (max-width: 1605px) {
.footer-address-content {
padding: 0px 20px;
}
}
/* 平板 小於992 */
@media (max-width: 992px) {
.footer-box {
color: #fff;
padding: 50px 0 30px 0;
/* background: red;*/
}
.footer-content {
padding-bottom: 0px;
border-bottom: 1px solid rgba(238, 238, 238, 0.6);
}
.footer-address-content {
padding: 0px 0px 30px 0px;
border-bottom: 1px solid rgba(238, 238, 238, 0.6);
}
.footer-address h2 {
font-size: 16px;
margin-bottom: 15px;
/* font-weight: 400;*/
}
.footer-address p {
font-size: 14px;
line-height: 22px;
}
.footer-contact {
border-right: 0px solid rgba(238, 238, 238, 0.6);
border-left: 0px solid #eee;
padding: 0px 0px 0px 0px;
margin: 20px 0;
/* border-bottom: 1px solid rgba(238, 238, 238, 0.6);*/
}
.footer-contact-box {
margin: 0;
padding: 0;
/* margin-top: 20px;*/
}
.footer-contact p {
font-size: 14px;
line-height: 22px;
display: inline-block;
margin-right: 15px;
}
.footer-icon {
margin-top: 15px;
opacity: 1;
transition: all 0.3s;
}
.footer-icon img {
width: 30px;
margin-right: 5px;
}
.footer-icon a:hover img {
opacity: 0.5;
}
.footer-cadence-partner {
/* background: #c10000;*/
text-align: center;
/* padding: 30px;*/
margin: 60px 0;
box-sizing: border-box;
}
.footer-cp-logo {
padding: 0px;
}
.footer-cadence-partner img {
max-width: 100%;
}
.footer-logo {
text-align: center;
margin-top: 30px;
}
.footer-logo img {
width: 180px;
margin-bottom: 15px;
}
.copyright {
font-size: 13px;
line-height: 20px;
}
}
/* 手機 小於320 */
@media (max-width: 365px) {
.footer-contact p {
font-size: 12.5px;
line-height: 22px;
display: inline-block;
margin-right: 0px;
}
}
/******************** Footer - END ********************/
/*
[data-aos="skew"] {
transform: skew(0deg);
opacity: 0.5;
transition: all;
}
[data-aos="skew"].aos-animate {
transform: skew(-14deg);
opacity: 1;
}
*/