orbit_demo_new_old3/assets/stylesheets/template/layout/content.scss

192 lines
3.7 KiB
SCSS

@charset "utf-8";
@import "../initial";
.verticalhome{
position: relative;
width: 100%;
background-color: #fff;
}
.internal-page{
.layout-content{
background: #F8F9FA;
padding-top: 1em;
}
}
.big-banner{
width: 100%;
position: relative;
}
.layout-content {
position: relative;
min-height: 42.5em;
background: #fff;
.container {
@extend .response-container;
}
}
.layout-content-inner{
overflow: hidden;
}
.video-banner{
max-width: 850px;
}
.homebanner{
-webkit-transition: .3s ease-out;
-moz-transition: .3s ease-out;
-ms-transition: .3s ease-out;
-o-transition: .3s ease-out;
transition: .3s ease-out;
}
.fa, .fas{
font-family: "FontAwesome";
font-weight: 900;
font-style: normal;
}
.fab{
font-family: "Font Awesome 5 Brands";
}
.padding0{
.layout-content-box{
&:hover{
opacity: .8;
transition: all .3s;
}
}
a{
color: #fff;
}
.layout-content-box{
padding: 0;
}
padding: 0 1em;
}
.image-carousel{
padding: 15px 0px 25px 0px;
}
.hide0{
opacity: 0;
-webkit-transform: translateY(15%) translateZ(0);
-moz-transform: translateY(15%) translateZ(0);
-o-transform: translateY(15%) translateZ(0);
-ms-transform: translateY(15%) translateZ(0);
transform: translateY(15%) translateZ(0);
-webkit-transition: transform 0.8s ease-out, opacity 0.4s ease;
-moz-transition: transform 0.8s ease-out, opacity 0.4s ease;
-o-transition: transform 0.8s ease-out, opacity 0.4s ease;
-ms-transition: transform 0.8s ease-out, opacity 0.4s ease;
transition: transform 0.8s ease-out, opacity 0.4s cubic-bezier(0.63, 0.01, 0, 1.02);
}
.animationvisible{
opacity: 1;
-webkit-transform: translateY(0) translateZ(0);
-moz-transform: translateY(0) translateZ(0);
-o-transform: translateY(0) translateZ(0);
-ms-transform: translateY(0) translateZ(0);
transform: translateY(0) translateZ(0);
}
.swiper-banner{
.ba-banner-widget-1 {
.ad-overlay{
background-image: none!important;
}
ul.button-mid .next-button{
color: #E4002B!important;
background: none!important;
}
ul.button-mid .prev-button{
color: #E4002B!important;
background: none!important;
}
}
}
.information{
.informationicon{
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
text-align: center;
cursor: pointer;
@media(max-width: $screen-xs){
width: 50%;
padding: 1em;
}
&:hover{
color: $theme-color-second;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
-webkit-transform: translateY(-6px);
-ms-transform: translateY(-6px);
transform: translateY(-6px);
}
i{
font-size: 2.5em;
padding-bottom:10px;
}
strong{
width: 100%;
}
span{
width: 100%;
}
}
}
//內頁
.contentwrap{
overflow: hidden;
position: relative;
width: 100%;
background: #F8F9FA;
padding-bottom: 4em;
padding-top: 4em;
p{
padding-bottom: 1em;
}
}
.contentwrap1{
overflow: hidden;
position: relative;
width: 100%;
// background-image: linear-gradient(280deg, #e6e6e6 56%, #fff 0);
margin-top: 4em;
margin-bottom: 4em;
}
.contentwrap2{
overflow: hidden;
position: relative;
width: 100%;
margin-top: 4em;
margin-bottom: 4em;
}
.iconwrap{
padding: 4em 0 0;
}
.kenopacity{
.box{
&:hover{
opacity: .8;
transition: all .3s;
}
}
}
.kenopacity{
padding-bottom: 1em;
}
.zero{
transition: opacity 0.25s linear;
padding: 0;
&:hover{
opacity: .8;
cursor: pointer;
}
a{
color: #fff;
font-weight: bold;
}
}