asia-home-b-en/assets/stylesheets/template/layout/content.scss

681 lines
13 KiB
SCSS

@charset "utf-8";
@import "../initial";
body{
@media (min-width: 1150px){
.black-screen-social-window.reactable{
.content-social .social_wrap i, .content-social .social_wrap img {
width: 1.2em;
font-size: 2em;
}
.content-social .social_wrap>div{
width: 3.2em;
}
}
}
}
.downIcon {
display: block!important;
position: absolute;
left: 50%;
bottom: 10%;
z-index: 2;
color: #fff;
span {
position: absolute;
top: 0;
left: 50%;
width: 46px;
height: 46px;
margin-left: -23px;
border: 2px solid #fff;
border-radius: 100%;
behavior: url("/assets/ie_support/PIE2/PIE.htc");
box-sizing: border-box;
}
a:hover span {
width: 60px;
height: 60px;
margin-left: -30px;
top: -7px;
border-width: 4px;
border-color: #facf3d;
}
}
.downIcon a:hover span::after {
width: 21px;
height: 21px;
border-left-width: 4px;
border-bottom-width: 4px;
margin: -14px 0 0 -10px;
border-color: #facf3d;
}
.downIcon a span::after{
position: absolute;
top: 50%;
left: 50%;
content: '';
width: 16px;
height: 16px;
margin: -12px 0 0 -8px;
border-left: 2px solid #fff;
border-bottom: 2px solid #fff;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
box-sizing: border-box;
}
.downIcon a span::before{
position: absolute;
top: 0;
left: 0;
z-index: -1;
content: '';
width: 44px;
height: 44px;
box-shadow: 0 0 0 0 #ffffff1a;
border-radius: 100%;
behavior: url("/assets/ie_support/PIE2/PIE.htc");
opacity: 0;
-webkit-animation: sdb03 3s infinite;
animation: sdb03 3s infinite;
box-sizing: border-box;
}
@-webkit-keyframes sdb03 {
0% {
opacity: 0;
}
30% {
opacity: 1;
}
60% {
box-shadow: 0 0 0 60px #ffffff1a;
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes sdb03 {
0% {
opacity: 0;
}
30% {
opacity: 1;
}
60% {
box-shadow: 0 0 0 60px #ffffff1a;
opacity: 0;
}
100% {
opacity: 0;
}
}
.bigcontent{
background-color: #fff;
margin-bottom: -25px;
@media(max-width: $screen-xs){
//padding-top: 1em;
}
}
.layout-content-inner{
background-color: #fff;
@media(max-width:$screen-xs){
padding-right: 0;
padding-left: 0;
}
}
.layout-content {
min-height: 37.5em;
.container {
@extend .response-container;
}
.pagecontainer {
@extend .response-pagecontainer;
}
}
#onesection{
margin: 0 0.9375em;
}
.bannertwo{
padding: 0;
@media(min-width:1024px){
.w-ba-banner{
display: flex;
flex-direction: row-reverse;
align-items: center;
.w-ba-banner__wrap{
flex: 0 0 65%;
}
.ad-overlay{
position: relative;
background: none;
width: 35%;
p{
max-width: 100%;
overflow-wrap: break-word;
}
}
}
}
@media(min-width:800px){
.ad-overlay{
p{
margin-top: 4em;
}
}
}
@media(min-width:768px){
.ad-overlay{
p{
margin-top: 1em;
}
}
.ba-banner-widget-1 .w-ba-banner__caption{
padding: 3em;
}
}
.button-mid .prev-button{
background: none;
}
.button-mid .next-button{
background: none;
}
}
.video-banner{
max-width: 850px;
margin: auto;
@media(min-width:1200px){
margin-top: -20em;
}
@media only screen and (max-width: 1200px) and (min-width: 1024px){
margin-top: -17em;
}
@media only screen and (max-width: 1024px) and(min-width:789px){
margin-top: -9em;
}
img{
border-radius: 20px;
behavior: url("/assets/ie_support/PIE2/PIE.htc");
}
.w-ba-banner{
box-shadow: 0px 55px 50px -40px #212121;
border-radius: 20px;
behavior: url("/assets/ie_support/PIE2/PIE.htc");
}
.ba-banner-widget-4 .w-ba-banner__wrap img img{
margin: 0;
}
}
// .one{
// width: 50%;
// text-align: end;
// padding: 1em;
// @media(max-width: $screen-xs){
// position: relative;
// width: 100%;
// text-align: center;
// padding: 1em;
// margin-bottom: 2em;
// }
// }
// .two{
// width: 50%;
// text-align: start;
// padding: 1em;
// @media(max-width: $screen-xs){
// position: relative;
// width: 100%;
// text-align: center;
// padding: 1em;
// margin-bottom: 2em;
// }
// }
.leftannounce{
@media(max-width: 769px){
margin-bottom: 1em;
}
}
.subword{
text-align: center;
color: #333333;
font-family: "Barlow", Sans-serif;
font-size: 2em;
font-weight: 900;
text-transform: none;
line-height: 40px;
}
.colorbox{
background-color:#e7e8ea;
padding-top: 1em;
}
.group{
width: 100%;
display: flex;
padding: 2em;
@media(max-width: 1024px){
flex-wrap: wrap;
padding: 0 15px;
}
}
.fontgroup{
width: 100%;
display: flex;
flex-wrap: wrap;
padding: 2em;
@media(max-width: $screen-xs){
flex-wrap: wrap;
}
}
.iconbox{
width: 20% !important;
flex: 1 1 20%;
.fas{
font-size: 2.5em;
color: #abb5b4;
}
.fab{
font-size: 2.5em;
color: #abb5b4;
}
@media(max-width: $screen-xs){
flex: 50%;
width: 50% !important;
padding-bottom: 0.5em;
}
}
.box:empty{
flex: none;
display: none;
}
.box img {
width: 100% !important;
height: 100% !important;
object-fit: cover;
}
.box .w-ba-banner__slide, .box .w-ba-banner__slide a {
height: 100%;
display: block;
}
.box{
flex: 3;
color: #666666;
font-family: "Barlow", Sans-serif;
font-weight: 900;
text-transform: none;
cursor: pointer;
overflow: hidden;
transition: all .25s;
@media(min-width: 1025px){
font-size: 1vw;
&:hover{
flex: 4;
// img{
// transform: scale(1.5);
// transition: all .25s;
// }
}
}
@media(max-width: 1024px){
flex: none;
width: 100%;
font-size: 0.8em;
max-height: 280px;
}
}
.layout-content-box3{
@media(min-width: $screen-xs){
top: -9em;
}
}
.score{
.scorebutton{
&:hover{
color:#E4200B!important ;
}
}
}
.image-carousel{
padding: 15px 0px 25px 0px;
}
.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;
}
}
}
.bannertwo{
@media(min-width:1024px){
background-color: #72bcad;
}
}
.onesection{
color: #fff;
@media(max-width:$screen-xs){
padding:0;
}
}
.onepicture{
padding: 0;
}
.onetext{
padding:3em;
}
.line{
@media(min-width:1025px){
width: 80%!important;
margin: auto!important;
}
}
.threesection{
padding: 2em 0;
}
.widget-event_news-0.widget-event_news-0-new{
.w-event_news__list{
.card0{
border-top: 0px;
}
.top-block{
position: relative;
float: left;
display: block;
width: 100%;
min-height: 8em;
}
.top-inner-block{
margin-left: 4.5em;
&>h4 {
min-height: 3.2em;
//overflow: hidden;
//text-overflow: ellipsis;
color: #f49a04;
& > a{
color: inherit !important;
}
}
}
.top-inner-info{
//background: #eeecec;
//min-height: 3em;
//padding: 0.3em 0.7em;
}
.bottom-block{
float: left;
padding: 1em 0;
}
.w-event_news__meta{
top: 0px!important;
clear: none;
float: left;
position: absolute;
height: 100%;
.w-event_news__postdate-wrap{
height: 100%;
}
}
}
}
.widget-event_news-0{
.w-event_news__list{
.w-event_news__img-wrap.bullseye{
display: none;
}
.card0{
border-top: 25px solid #72bcad;
}
.w-event_news__meta{
top: -25px!important;
display: inline-block;
}
.w-event_news__category-wrap{
display: block;
}
}
}
//event_news
.w-event_news__widget-title{
text-align: center;
padding-top: 0.7em;
background: url(/assets/titlecap.png) top no-repeat;
background-size: 164px 35px;
background-position-y: -7px;
font-size: 1.2rem;
}
.foursection{
background-color: #e6e7e9;
padding: 1em 0;
.w-event_news__img{
position: relative!important;
}
.w-event_news__list{
padding: 0;
display: flex;
flex-wrap: wrap;
li{
width: 100%;
float: left;
}
@media (min-width: 480px){
//display: flex;
//flex-wrap: wrap;
//flex-direction: row-reverse;
li{
width: 25%;
}
}
li{
padding: 0.5em;
//flex: 0 0 25%;
position: relative;
@media screen and (min-width:$screen-xs) and (max-width:990px){
//flex: 0 0 50%;
width: 50%;
}
}
.card0{
background-color: #fff;
padding: 0 0em 1em 0.5em;
height: 100%;
float: left;
width: 100%;
}
.w-event_news__meta{
position: relative;
top: -30px;
}
.w-event_news__postdate-wrap{
background-color: #333;
color: #fff;
width: fit-content;
padding: 0.8em;
text-align: center;
.month{
font-size:12px;
}
}
}
}
.w-event_news__img-wrap.bullseye{
overflow: visible!important;
}
//內頁
.internal-page{
background-color: #fff;
.site-trigger__text{
color: #333;
top: -0.4em;
right: 1em;
text-shadow:none;
}
.dropdowns{
justify-content: center;
}
.kenjohn {
//flex-wrap:wrap-reverse;
display: flex;
flex-direction: column;
.navbar-header{
display: flex!important;
}
.header-nav{
@media(min-width: 480px){
display: flex!important;
}
}
.layout-header .header-nav a{
text-shadow: none;
}
z-index: 10;
position: fixed!important;
left: 0;
//top:2.5em;
background-color: #fff;
margin-top: 0;
min-width: 100%;
opacity: 0.98;
transition: opacity .5s ease-out;
.collapse{
flex: 0 0 62%;
@media screen and (min-width:1025px) and (max-width:1599px){
flex: 0 0 65%;
}
@media(min-width: 1900px){
flex: 0 0 65%;
}
}
@media(min-width: 769px){
.dropdowns{
display: flex;
//flex-direction: row-reverse;
}
}
.navbar-header{
@media screen and (min-width:769px) {
height: 78px;
margin-bottom: 1em;
width: 35%;
justify-content: center;
}
@media (min-width: 1900px){
height: 90px;
}
}
.navbar-brand {
margin: 0;
padding-bottom: 0;
line-height: 2.125em;
color: $theme-color-main;
font-size: 0.6em;
font-family: $main-font;
@media(min-width:769px){
display: block!important;
}
@media (max-width: $screen-sm) {
height: 5em;
display: none;
}
@media (max-width: 480px) {
margin: 0;
}
.default_site_h1{
width:100%!important;
}
.site-logo{
width:100%!important;
}
@media(min-width:1900px){
width: 225px;
margin-top: -12px;
}
@media screen and (min-width:1025px) and (max-width:1899px){
width: 181px;
margin-top: -3px;
}
@media screen and (min-width:769px) and (max-width:1025px){
width: 150px;
margin-top: -5px;
}
@media screen and (min-width:$screen-xs) and (max-width:769px){
width: 146px !important;
}
@media screen and (max-width:$screen-xs){
width: 110px !important;
margin-top: 3px;
}
}
.navbar-brand:nth-child(2){
@media(min-width:1900px){
width: 330px!important;
margin-top: -14px;
}
@media screen and (min-width:1025px) and (max-width:1899px){
width: 261px!important;
margin-top: -5px;
}
@media screen and (min-width:769px) and (max-width:1025px){
width: 200px!important;
}
@media screen and (max-width:768px){
width: 140px!important;
}
}
.modules-menu .modules-menu-level-0 > li > a{
color: #333;
text-shadow: none;
}
.header-nav{
background: #e7e8ea;
padding:0.5em !important;
}
.header-nav a{
text-shadow:none;
color: #333333;
}
.navbar-toggle .icon-bar{
background-color: #333;
box-shadow: none;
}
.navbar-header .navbar-brand{
@media(max-width: 769px){
display: block!important;
}
}
.navbar-toggle{
position: absolute;
right: 0;
}
}
}
@media(max-width:768px){
.pagerow{
display:flex;
flex-wrap: wrap;
.aside{
width: 100%;
}
.right-column{
width: 100%;
padding: 0;
}
}
}
.black-screen-social-window{
padding: 0!important;
}