/* ----------------------------------------- */
/* 內容範本：Home Slider – 開始 */
/* ----------------------------------------- */
.service-link {
position: relative;
display: inline-table;
z-index: 1;
}
.error {
color: #fff;
}
.service-link > a {
display: inherit;
width: 50vw;
}
.service-link a > img {
width: 100%;
height: 100%;
vertical-align: bottom;
}
.service-link a > img:hover {
filter: brightness(0.5);
}
.mask-video {
width: 100vw;
height: 100vh;
filter: brightness(.7);
object-position: center;
}
@media only screen and (max-width: 750px) {
.service-link > a {
width: 100vw;
}
}
/* ----------------------------------------- */
/* 內容範本：Home Slider – 結束 */
/* ----------------------------------------- */
/* ----------------------------------------- */
/* 內容範本：TopContentForHome – 開始 */
/* ----------------------------------------- */
.top-content {
display: none;
width: 93%;
text-align: right;
color: #fff;
z-index: 1;
filter: drop-shadow(1px 1px 3px #000);
}
.swiper-slide-active .top-content {
display: block;
}
h1 {
margin-bottom: -1rem;
}
.top-content .description {
font-size: 1.875rem;
}
.link-button {
display: inline-block;
cursor: pointer;
}
@media only screen and (min-width: 751px) {
.top-content {
top: 53.5% !important;
}
.top-content .supplementry {
font-size: 1.625rem;
}
.link-button p {
width: 250px;
line-height: 2em;
text-align: center;
color: #000;
background-color: #fff;
filter: drop-shadow(2px 4px 0px #2d2d2d);
}
.link-button p:before,
.link-button p:after {
content: '';
position: absolute;
border: 1em solid transparent;
}
.link-button p:before {
right: 100%;
border-right: .5em solid #fff;
filter: drop-shadow(2px 0px 1px #fff);
}
.link-button p:after {
left: 100%;
border-left: .5em solid #fff;
filter: drop-shadow(-2px 0px 1px #fff);
}
.link-button:hover p {
color: #fff;
background-color: #2d2d2d;
filter: drop-shadow(0 0 2px #2f2f2f);
}
.link-button:hover p:before {
border-right: .5em solid #2d2d2d;
filter: drop-shadow(2px 0px 1px #2d2d2d);
}
.link-button:hover p:after {
border-left: .5em solid #2d2d2d;
filter: drop-shadow(-2px 0px 1px #2d2d2d);
}
}
@media only screen and (max-width: 750px) {
.top-content .supplementry {
display: none;
}
.link-button p {
color: #fff;
text-decoration: underline;
}
}
@media only screen and (max-width: 460px) {
.top-content .description {
font-size: 1.4rem;
text-align: justify;
line-height: 1.4em;
}
}
/* ----------------------------------------- */
/* 內容範本：TopContentForHome – 結束 */
/* ----------------------------------------- */
/* ----------------------------------------- */
/* 內容範本：InfluencerTile – 開始 */
/* ----------------------------------------- */
@media only screen and (min-width: 751px) {
.container {
display: inline-table;
}
img.tile {
width: 100%;
height: 50%;
}
.tile,
.big-tile {
object-fit: cover;
vertical-align: bottom;
padding: 3px;
}
img.big-tile {
width: 33.3vw;
height: 33.3vh;
}
.tile-wrapper {
width: 16.6vw;
height: 33.4vh;
display: inline-table;
}
}
@media only screen and (max-width: 750px) {
.container {
display: inline-table;
}
.tile-wrapper {
display: none;
}
.big-tile {
width: 50%;
height: 33.3vh;
object-fit: cover;
vertical-align: bottom;
padding: 1%;
}
}
/* ----------------------------------------- */
/* 內容範本：InfluencerTile – 結束 */
/* ----------------------------------------- */