652 lines
13 KiB
SCSS
652 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{
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 760px;
|
|
//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{
|
|
opacity: .5;
|
|
}
|
|
}
|
|
.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;
|
|
}
|
|
}
|
|
.bannertwo{
|
|
|
|
@media(min-width:1024px){
|
|
padding: 0;
|
|
.w-ba-banner{
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
.w-ba-banner__wrap{
|
|
flex: 0 0 65%;
|
|
}
|
|
.ad-overlay{
|
|
position: relative;
|
|
background: none;
|
|
}
|
|
}
|
|
}
|
|
@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: 36px;
|
|
font-weight: 900;
|
|
text-transform: none;
|
|
line-height: 40px;
|
|
}
|
|
.colorbox{
|
|
background-color:#e7e8ea;
|
|
}
|
|
.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-size: 36px;
|
|
font-weight: 900;
|
|
text-transform: none;
|
|
height: 280px;
|
|
cursor: pointer;
|
|
overflow: hidden;
|
|
transition: all .25s;
|
|
@media(min-width: 1025px){
|
|
&:hover{
|
|
flex: 4;
|
|
// img{
|
|
// transform: scale(1.5);
|
|
// transition: all .25s;
|
|
// }
|
|
}
|
|
}
|
|
@media(max-width: 1024px){
|
|
flex: none;
|
|
width: 100%;
|
|
height: 250px;
|
|
padding-bottom: 0.5em;
|
|
}
|
|
}
|
|
.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;
|
|
}
|
|
@media(max-width: $screen-sm){
|
|
padding: 0;
|
|
}
|
|
}
|
|
.onesection{
|
|
color: #fff;
|
|
@media(max-width:$screen-xs){
|
|
padding: 0 15px;
|
|
}
|
|
}
|
|
.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;
|
|
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;
|
|
}
|
|
//內頁
|
|
.inner-page{
|
|
padding: 50px 0;
|
|
}
|
|
.internal-page{
|
|
background-color: #fff;
|
|
.kenjohn {
|
|
flex-wrap:wrap-reverse;
|
|
display: flex;
|
|
.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 (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;
|
|
}
|
|
.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-reverse;
|
|
.aside{
|
|
width: 100%;
|
|
}
|
|
.right-column{
|
|
width: 100%;
|
|
padding: 0;
|
|
}
|
|
}
|
|
}
|