body, html {
margin: 0px;
padding: 0px;
height: 100%
/*font-family:新細明體,微軟正黑體;*/
}
.sliderhome{
position: relative;
width: 100%;
height: 50rem;
height: 100vh;
background-color: #000;
color: #fff;
}
.slideshow{
position: absolute;
top: 0;
left: 0;
width: 100%;
/*visibility: hidden;*/
}
.slideshow img{
position: absolute;
top: 0;
left: 0;
width: 100%;
object-fit: cover;
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: cover;
background-size: cover;
/*visibility: hidden;*/
}
.cv{
height: 100vh;
width: 100%;
/*position: absolute;*/
top: 0;
left: 0;
display: block;
}
.tittle>h1{
text-align: center;
/*position: relative;*/
/*top: 60px;*/
/*margin-top: 128px;*/
color: white;
/*margin-top:-3170px;*/
}
.green{
}
.skin{
opacity: 1;
top: 0px;
width: 327px;
color: white;
font-size: 18px;
line-height: 1.9em;
margin: 0 auto;
position: relative;
}
.blue{
background-color: blue;
}
.turqoise{
background-color: yellow;
}
.green{
background-color: green;
}
.bordeaux{
background-color: red;
}
/*op3*/
.op3{
/*float: left;*/
position: relative;
width: 50%;
height: 100%;
display: -webkit-box;
}
#content-wrapper, #example-wrapper {
height: 100%;
width: 100%;
display: block;
}
#example-wrapper .scrollContent {
height: 100%;
display: block;
}
section#titlechart {
text-align: center;
position: relative;
height: 100%;
min-height: 500px;
min-width: 50%;
height: 100vh;
}
.demo#section-slides, .demo#section-wipes {
height: 100%;
width: 100%;
/*background-image: none;*/
}
section{
opacity: 1;
/*min-width: 50%;*/
}
.blue {
background-color: #3883d8;
}
.turqoise {
background-color: #38ced7;
}
.green {
background-color: #22d659;
}
.bordeaux {
background-color: #953543;
}
/*op4*/
.op4{
/*float: left;*/
position: relative;
width: 100%;
height: 100%;
min-height: 400px;
display: block;
/*margin-bottom: 100%;*/
clear: both;
}
#content-wrapper-2, #example-wrapper-2 {
height: 100%;
width: 100%;
display: block;
}
#example-wrapper-2 .scrollContent-2{
height: 100%;
display: block;
}
section#titlechart-2 {
text-align: center;
position: relative;
height: 100%;
min-height: 500px;
min-width: 100%;
height: 100%;
}
.demo2#section-slides-2, .demo#section-wipes-2 {
height: 100%;
width: 100%;
/*background-image: none;*/
}
section{
opacity: 1;
height: 100%;
/*min-width: 50%;*/
}
.blue {
background-color: #3883d8;
}
.turqoise {
background-color: #38ced7;
}
.green {
background-color: #22d659;
}
.bordeaux {
background-color: #953543;
}
/*op5*/
.op5{
/*float: right;*/
width: 50%;
height: 100%;
display:block;
}
#content-wrapper-3, #example-wrapper-3 {
height: 100%;
width: 100%;
display: block;
}
#example-wrapper-3 .scrollContent-3{
height: 100%;
display: block;
}
section#titlechart-3 {
text-align: center;
position: relative;
height: 100%;
min-height: 500px;
min-width: 50%;
height: 100vh;
}
.demo3#section-slides-3, .demo#section-wipes-3 {
height: 100%;
width: 100%;
/*background-image: none;*/
}
section{
opacity: 1;
height: 100%;
/*min-width: 50%;*/
}
.blue {
background-color: #3883d8;
}
.turqoise {
background-color: #38ced7;
}
.green {
background-color: #22d659;
}
.bordeaux {
background-color: #953543;
}
/*op6*/
.op6{
/*float: left;*/
position: relative;
width: 100%;
/*height: 100%;*/
display:block;
/*margin-bottom: 1334px;*/
}
/*footer*/
.footer{
color: white;
/*position: relative;*/
z-index: 1500;
/*padding: 2rem .9375rem;*/
padding: 2em 0em 2em 0em;
/*margin-top: 548vh;*/
background-color: black;
/*text-align: right;*/
width: 100%;
float: left;
z-index: 9998;
}
.footer article{
width: 80%;
/*margin-left: 15px;*/
padding-left: 25px;
}
.footer article p{
margin: 0.5px;
}
/*tepo*/
.sliderhome{
float: left;
}
.op2{
float: left;
height: 2196px;
/*height: 1900px;*/
color: white;
}
.op1{
float: left;
background-color: white;
/*border-top: solid 11px black;*/
/*height: 200px;*/
}
.logo{
position: fixed;
top: 0;
width: 110px;
padding: 40px 0 0 40px;
z-index: 1;
/*-webkit-animation-name: logo-w;
-webkit-animation-duration: 0.4s;
-webkit-animation-fill-mode: forwards;
animation-name: logo-w;
animation-duration: 0.4s;
animation-fill-mode: forwards;*/
}
/*
@-webkit-keyframes logo-w {
from {-webkit-filter:invert(1);}
to {-webkit-filter:invert(0);}
}
@keyframes logo-w {
from {-webkit-filter:invert(1);}
to {-webkit-filter:invert(0);}
}*/
.logo-t{
position: absolute;
top: 0;
right: 0;
width: 140px;
padding: 40px 40px 0 0px;
}
.menu{
position: fixed;
width: 150px;
padding: 40px 0 0 40px;
bottom: 40px;
right: 5%;
text-align: left;
line-height: 1.5em;
list-style: none;
font-size: 24px;
color: white;
z-index: 9999;
}
.menu li:hover {
opacity: 0.8;
cursor: pointer;
}
.menu li a{
text-decoration: none;
color: white;
}
.header{
display: block;
width: 100%;
height: 20rem;
position: fixed;
bottom: 0;
left: 0;
z-index: 1;
background: -webkit-gradient(linear,left top,left bottom,from(transparent),to(black));
background: -webkit-linear-gradient(top,transparent 0,#000 100%);
background: -o-linear-gradient(top,transparent 0,#000 100%);
background: linear-gradient(to bottom,transparent 0,#000 100%);
opacity: .16;
pointer-events: none;
}
.header-top{
display: block;
width: 100%;
height: 13rem;
position: fixed;
top: 0;
left: 0;
z-index: 1;
background: -webkit-gradient(linear,left top,left top,from(black),to(transparent));
background: -webkit-linear-gradient(top,black 0,#0000 100%);
background: -o-linear-gradient(top,black 0,#0000 100%);
background: linear-gradient(to bottom,black 0,#0000 100%);
opacity: .10;
pointer-events: none;
}
.cv2 {
height: 100vh;
width: 100%;
position: absolute;
top: 0;
left: 0;
display: block;
}
.homeGrid_row:after {
content: '';
clear: both;
display: table;
}
.tittle{
height: 90px;
}
.grid{
width: 80%;
float: left;
border: 0px;
min-height: 100vh;
background-color: black;
/*min-height: 500px;*/
}
.button-group{
width: 20%;
float: right;
/*margin-bottom: 50%;*/
}
.element-item{
margin: 0px;
padding: 0px;
/*height: 100%;*/
/*min-height: 179px;*/
}
/*.element-item>a>img{
width: 100%;
}*/
.item-text{
position: absolute;
width: 100%;
height: 100%;
top: 0%;
color: white;
text-align: right;
/*padding-right: 25px;*/
/*padding-top: 25%;*/
/*line-height: 20;*/
/*clear: both;*/
padding: 20% 7% 0 0;
background-color: #0000004d;
}
.item-text>h1,p{
font-size: 15px;
margin: 0px;
/*margin:0;*/
/*padding:20% 5% 0% 0%;*/
}
.button{
width: 120px;
margin: 0px 8%!important;
background-color: black;
/*text-shadow: 0 0px #ffffff00;*/
color: white;
text-align: left;
padding: 5px 10px;
/*margin: 5% 33%!important;*/
/*padding: 5px!important;*/
text-shadow: 0px 0px white;
}
.button-group{
position: fixed;
right: 0;
background: black;
min-height: 360px;
border-bottom: solid 1px white;
}
.button-group .button{
border: solid 1px white;
width: 84%;
margin-bottom: 6px!important;
}
.button:hover{
background-color: white;
color: black;
animation-name: colorchange;
-webkit-animation-name: colorchange;
animation-duration: 0.8s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
.button:active, .button.is-checked{
border: solid 1px white;
background-color: white;
color: black;
font-weight: bold;
text-shadow: 0px 0px hsla(0, 0%, 100%, 0);
}
.button-toggle{
/* position: fixed; */
/* bottom: 760px; */
/* top: 230px; */
width: 100%;
margin: 0 auto;
/* height: 100px; */
display: block;
margin-top: 12px;
float: left;
}
#toggle-btn{
cursor: pointer;
/*position: absolute;*/
width: 20%;
margin: 0 auto;
/*top: 300px;*/
bottom: 358px;
height: 30px;
color: white;
text-align: center;
font-size: 24px;
transform: scaleY(0.6);
/*transform:rotate(0deg);*/
}
/*#toggle-btn:focus{
transform: rotate(20deg);
}*/
/* .btnanimation{
animation-name: rotatechange;
-webkit-animation-name: rotatechange;
animation-duration: 0.1s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}*/
@-webkit-keyframes colorchange {
from {background-color: black;color: white;}
to {background-color: white;color: black;}
}
/* Standard syntax */
@keyframes colorchange {
from {background-color: black;color: white;}
to {background-color: white;color: black;}
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes rotatechange {
from {transform:scaleY(0.6) rotate(0deg);}
to {transform:scaleY(0.6) rotate(180deg);}
}
/* Standard syntax */
@keyframes rotatechange {
from {transform:scaleY(0.6) rotate(0deg);}
to {transform:scaleY(0.6) rotate(180deg);}
}
.innerTittle{
/*position: absolute;*/
width: 100%;
height: 50px;
margin: 0% auto;
/*bottom: 220px;*/
color: white;
text-align: center;
font-size: 18px;
line-height: 5em;
}
@media (max-width: 980px) {
.tittle{
height: 120px;
}
.tittle h1{
font-size: 20px;
text-align: center;
}
.tittle-tx{
width: 70%;
margin: 0 auto;
font-size: 15px;
}
.tittle-tx p span{
font-size: 15px;
}
.innerTittle{
font-size: 12px;
line-height: 8em;
}
}
/*product-item*/
.porduct-list{
float: left;
width: 100%;
}
.porduct-list img{
width: 100%;
height: 100%;
/*object-fit: cover;
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: cover;
background-size: cover;*/
}
.product-img{
width: 100%;
float: left;
border-top: solid 1.5px black;
/*border-bottom: solid 15px black;*/
}
.gra-back{
position: absolute;
width: 100%;
margin: 30% auto;
/*background: -webkit-gradient(linear,left top,left bottom,from(transparent),to(black));
background: -webkit-linear-gradient(top,transparent 0,#000 100%,transparent 0);
background: -o-linear-gradient(top,transparent 0,#000 100%,transparent 0);
background: linear-gradient(to bottom,transparent 0,#000 100%,transparent 0);
opacity: .16;*/
}
/*socialmedia-icon*/
.social-icon{
width: 30px;
height: 30px;
float: right;
background-color: red;
list-style: none;
margin-left: 5px;
margin-right: 5px;
background: url(../img/bt/social-icon.png);
background-repeat: no-repeat;
background-size: 311%;
cursor: pointer;
}
.pinterest{
background-position: -2px 0px;
}
.facebook{
background-position: -33px 0px;
}
.linkin{
background-position: -62px 0px;
}
.pinterest:hover{
background-position: -2px -28px;
}
.facebook:hover{
background-position: -33px -28px;
}
.linkin:hover{
background-position: -62px -28px;
}
.social-link{
position: relative;
width: 100%;
float: right;
top: -22px;
margin: 0;
padding: 0;
/*暫時*/
display: none;
}
/*pageloading event*/
/* This CSS file just define some default styles and loaders */
/* You don't need to include it if you're working with your custom overlay loader element */
.loading-overlay {
display: table;
opacity: 0.7;
}
.loading-overlay-content {
text-transform: uppercase;
letter-spacing: 0.4em;
font-size: 1.15em;
font-weight: bold;
text-align: center;
display: table-cell;
vertical-align: middle;
}
.loading-overlay.loading-theme-light {
background-color: #fff;
color: #000;
}
.loading-overlay.loading-theme-dark {
background-color: #000;
color: #fff;
}
.panel2 {
width: 100%;
position: relative;
float: left;
}
.graycover{
height: 100%;
background: #404040d9;
position: relative;
bottom: -80%;
}
.graycover h1{
width: 90%;
margin: 0 auto;
font-size: 86px;
text-align: left;
color: white;
}
.graycover p{
width: 90%;
margin: 0 auto;
font-size: 15px;
text-align:left;
color: white;
}
.newsEvent{
width: 100%;
height: 411px;
background-color:white;
position: relative;
display:block;
border-top: solid 3px black;
float:left;
}
.newsEvent article{
width: 50%;
padding: 10px 0px 0px 40px;
float:left;
}
.menuicon{
display: none;
}
.project-item-tittle{
text-align: center;
color: white;
width: 450px;
margin: 0 auto;
}
@media only screen and (max-width: 840px) {
.menu{
font-size: 18px;
padding: 0px 0px 0 20px;
right: 0%;
}
.logo-t {
padding: 20px 20px 0px 30px;
}
.logo{
padding: 20px 0 0 20px;
width: 77px;
}
.graycover{
bottom: -70%;
}
.graycover h1{
font-size: 30px;
}
.footer article {
width: 77%;
}
.header{
opacity: .36;
}
.button-toggle{
display: none;
width: 240px;
position: fixed;
right: 0px;
top: 50px;
background-color: black;
padding: 20px 5px 50px 5px;
margin-top: 0px;
}
.menuicon{
display: block;
position: fixed;
right: 0;
}
.grid{
width: 100%;
}
.newsEvent{
height: 321px;
}
.newsEvent article{
padding: 0px 0px 0px 20px;
width: 50%;
height: 321px;
}
.button-group{
width: 50px;
position: absolute;
z-index: 9999999;
min-height: 50px;
background: #ffffff00;
border-bottom: solid 0px white;
}
.gra-back{
margin: 50% auto;
}
.sliderhome {
position: relative;
width: 100%;
float: left;
/*height: 50rem;*/
height: 435px;
background-color: #000;
color: #fff;
display: block;
}
.abc71{
height: 40%;
}
.slideshow img {
height:435px;
}
.gra-back{
margin: 20% auto;
}
.studio-main{
min-height: 400px;
padding-left: 0;
width: 650px;
margin: 0 auto;
}
.studio-img img{
min-width: 650px;
}
.studio-wk img{
width: 650px;
}
.innerTittle{
font-size: 12px;
line-height: 4em;
}
}
@media only screen and (max-width: 480px) {
body, html {
display: grid;
}
.menu{
font-size: 15px;
padding: 40px 0px 0px 50px;
}
.op1{
width: 100%;
float: none;
position: relative;
}
.op2{
width: 100%;
float: none;
/*height: 1736px;*/
}
.op6{
top: 400px;
}
.logo-t {
padding: 20px 20px 0px 30px;
}
.logo{
padding: 20px 0 0 20px;
width: 77px;
}
.graycover{
bottom: -70%;
}
.graycover h1{
font-size: 30px;
}
.footer{
position: relative;
padding: 1em 0em 1.5em 0em;
}
.ft1{
bottom: -400px;
}
.footer article {
width: 70%;
}
.footer article p{
font-size: 12px;
}
.social-link{
top: 0px;
padding: 10px 0px 10px 0px;
}
.social-icon{
margin-left: 0px;
float: left;
}
.header{
opacity: .36;
}
.newsEvent article{
padding: 0px 0px 0px 20px;
width: 100%;
height: 140px;
}
.studio-main{
width: 100%;
padding-left: 0px;
margin: 0 auto;
}
.studio-img{
width: 90%;
margin: 0 auto;
float: unset;
}
.studio-img img{
width: 100%;
min-width: 100%;
}
.studio-wk{
padding: 20px;
}
.studio-wk img{
width: 100%;
}
.media-main{
width: 100%;
padding-left: 0px;
margin: 0 auto;
}
.media-concept{
width: 90%;
margin: 0 auto;
float: unset;
}
.inputarea{
width: 100%;
padding: 5px 25px 5px 25px;
height: auto;
}
.textarea{
min-width: 100%;
padding: 5px 25px 5px 25px;
height: auto;
}
.newsEvent{
height: 461px;
}
.newsEvent article{
padding: 0px 0px 0px 20px;
width: 100%;
height: 140px;
}
.sliderhome {
position: relative;
width: 100%;
float: left;
/*height: 50rem;*/
height: 280px;
background-color: #000;
color: #fff;
display: block;
}
.project-item-tittle{
text-align: center;
color: white;
width: 100%;
margin: 0 auto;
}
.gra-back{
margin: 30% auto;
}
.abc71{
height: 40%;
}
.slideshow img {
height:280px;
}
.innerTittle{
font-size: 12px;
line-height: 4em;
}
}