1262 lines
24 KiB
SCSS
1262 lines
24 KiB
SCSS
@charset "utf-8";
|
|
|
|
@import "../initial";
|
|
|
|
$title-font: "Source Sans Pro", "微軟正黑體", sans-serif;
|
|
$theme-black: #000;
|
|
@mixin centerElement() {
|
|
position: fixed;
|
|
left: 50%;
|
|
top: 50%;
|
|
-webkit-transform: translate(-50%, -50%);
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
// Space index
|
|
.i-space {
|
|
// position: fixed;
|
|
z-index: 100;
|
|
// top: 60%;
|
|
// left: 50%;
|
|
|
|
margin:auto;
|
|
// margin-top:300px;
|
|
// margin-left: 50%;
|
|
// -webkit-transform: translate(-50%, -50%);
|
|
// transform: translate(-50%, -50%);
|
|
|
|
@media (min-width: $screen-xs) {
|
|
top: 50%;
|
|
width: 45%;
|
|
}
|
|
|
|
.i-sapce__building-wrap {
|
|
width:100%;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.i-space__building {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 220px;
|
|
margin: 0 2%;
|
|
|
|
@media (min-width: $screen-xs) {
|
|
width:100%;
|
|
}
|
|
}
|
|
|
|
.i-space__building-title {
|
|
font-family: $title-font;
|
|
font-size: 15px;
|
|
display: inline-block;
|
|
margin: 5px 0;
|
|
text-transform: uppercase;
|
|
color: $theme-white;
|
|
}
|
|
|
|
.i-space__floor-item {
|
|
position: relative;
|
|
overflow: hidden;
|
|
height: 80px;
|
|
margin-bottom: 10px;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.i-space__img-wrap {
|
|
position: relative;
|
|
display: block;
|
|
cursor: pointer;
|
|
border: 20px solid lighten($theme-black, 10%);
|
|
-webkit-filter: grayscale(0);
|
|
filter: grayscale(0);
|
|
|
|
&:before {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
content: "";
|
|
transition: .3s all;
|
|
background-color: rgba($theme-black, 0);
|
|
}
|
|
|
|
&:hover,
|
|
&.active {
|
|
&:before {
|
|
background-color: rgba($theme-black, 0.5);
|
|
}
|
|
}
|
|
}
|
|
|
|
.i-space__building-img {
|
|
display: block;
|
|
background-color: rgba($theme-black, 0.8);
|
|
}
|
|
|
|
.i-space__floors {
|
|
position: absolute;
|
|
top: 10%;
|
|
left: 0;
|
|
visibility: hidden;
|
|
width: 220px;
|
|
padding: .5rem .6rem;
|
|
transition: .3s all;
|
|
-webkit-transform: translate(0, -50%);
|
|
transform: translate(0, -50%);
|
|
opacity: 0;
|
|
background-color: rgba($theme-black, 0.8);
|
|
|
|
@media (min-width: $screen-xs) {
|
|
width:30%;
|
|
height:auto;
|
|
left: 100%;
|
|
top: 50%;
|
|
}
|
|
|
|
&.active {
|
|
left: 0;
|
|
visibility: visible;
|
|
opacity: 1;
|
|
z-index: 1200;
|
|
|
|
@media (min-width: $screen-xs) {
|
|
left: 108%;
|
|
}
|
|
}
|
|
|
|
&:before {
|
|
@media (min-width: $screen-xs) {
|
|
position: absolute;
|
|
top: 45px;
|
|
left: -24px;
|
|
content: "";
|
|
border: 12px solid transparent;
|
|
border-right-color: $theme-black;
|
|
}
|
|
}
|
|
|
|
.i-space__floor-name {
|
|
font-size: 13px;
|
|
padding: 5px 10px;
|
|
color: $theme-white;
|
|
background-color: $theme-color-main;
|
|
}
|
|
}
|
|
|
|
.i-space__floor-name {
|
|
position: absolute;
|
|
z-index: 100;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
.i-space__floor-img {
|
|
position: relative;
|
|
z-index: 10;
|
|
top: 50%;
|
|
transition: .3s all;
|
|
-webkit-transform: translate(0, -50%);
|
|
transform: translate(0, -50%);
|
|
|
|
&:hover {
|
|
opacity: .5;
|
|
}
|
|
}
|
|
}
|
|
|
|
.background-image {
|
|
position: absolute;
|
|
z-index:-1;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: .1;
|
|
background-size: cover;
|
|
-webkit-filter: blur(10px);
|
|
filter: blur(10px);
|
|
}
|
|
|
|
.s-space__back-btn-wrap {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.s-space__back-btn {
|
|
border-radius: 50%;
|
|
width: 35px;
|
|
height: 35px;
|
|
line-height: 20px;
|
|
text-align: center;
|
|
|
|
i {
|
|
position: relative;
|
|
left: -2px;
|
|
}
|
|
}
|
|
|
|
.has-lightbox {
|
|
// lightbox
|
|
.s-space__light-box {
|
|
position: fixed;
|
|
z-index: 2000;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
background-color: rgba($theme-black, 0.9);
|
|
}
|
|
|
|
.s-space__close-btn {
|
|
font-size: 1.5rem;
|
|
position: fixed;
|
|
z-index: 2200;
|
|
top: 20px;
|
|
right: 20px;
|
|
cursor: pointer;
|
|
color: $theme-white;
|
|
}
|
|
|
|
.s-space {
|
|
.s-space__floor-img-large {
|
|
img {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
body[data-module="space"] {
|
|
.layout-content-inner {
|
|
@media (max-width: $screen-xs) {
|
|
padding: 0 0 0 0;
|
|
}
|
|
}
|
|
|
|
.layout-content-box {
|
|
@media (max-width: $screen-xs) {
|
|
background-color: transparent;
|
|
padding: 0;
|
|
}
|
|
|
|
.s-space__apartment-name {
|
|
@media (max-width: $screen-xs) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.s-space__back-btn-wrap {
|
|
@media (max-width: $screen-xs) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
#layout-image {
|
|
@media (max-width: $screen-xs) {
|
|
width: 170%;
|
|
max-width: none;
|
|
height:auto !important;
|
|
}
|
|
@media (min-width: $screen-sm){
|
|
width: 100%;
|
|
max-width: none;
|
|
height:auto !important;
|
|
}
|
|
}
|
|
#layout-image-small {
|
|
@media (max-width: $screen-xs) {
|
|
width: 100%;
|
|
max-width: none;
|
|
height:auto !important;
|
|
}
|
|
@media (min-width: $screen-lg){
|
|
width: auto;
|
|
max-width: none;
|
|
height:765px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Space show
|
|
.s-space {
|
|
position: relative;
|
|
padding-top: 2em;
|
|
|
|
@media (max-width: $screen-xs){
|
|
overflow:scroll;}
|
|
|
|
@media (min-width: $screen-sm){
|
|
overflow:scroll;
|
|
}
|
|
|
|
&.none{
|
|
display: none;
|
|
}
|
|
#full-layout-canvas {
|
|
border: none;
|
|
background-color: transparent;
|
|
height:auto !important;
|
|
|
|
@media (max-width: $screen-xs){
|
|
// width: 100% !important;
|
|
height: 100% !important;
|
|
width:170%;
|
|
}
|
|
|
|
@media (min-width: $screen-sm){
|
|
height: 100% !important;
|
|
width:100%;
|
|
}
|
|
|
|
.image-cover {
|
|
z-index: 13;
|
|
left: 0;
|
|
-webkit-transform: translate(0, -50%);
|
|
transform: translate(0, -50%);
|
|
|
|
@media (max-width: $screen-xs){
|
|
// width: 100% !important;
|
|
height: 100% !important;
|
|
}
|
|
|
|
|
|
|
|
@media (min-width: $screen-sm) {
|
|
left: 50%;
|
|
// width:100% !important;
|
|
height: 100% !important;
|
|
-webkit-transform: translate(-50%, -50%);
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.small-image{
|
|
@media (max-width: $screen-xs){
|
|
max-width:none;
|
|
width:100% !important;
|
|
height:765px;
|
|
}
|
|
|
|
}
|
|
|
|
.s-space__apartment-name {
|
|
color: $theme-white;
|
|
text-align: center;
|
|
font-size: 1.375rem;
|
|
margin-bottom: 20px;
|
|
display: none;
|
|
}
|
|
|
|
.selection-box {
|
|
transition: .3s all;
|
|
background-color: rgba(0, 0, 0, 0);
|
|
|
|
.selection-box-label {
|
|
font-size: 0.75rem;
|
|
display: none;
|
|
padding: 5px 8px;
|
|
color: $theme-white;
|
|
background-color: lighten($theme-black, 20%);
|
|
white-space: nowrap;
|
|
min-width: 100%;
|
|
}
|
|
|
|
&:hover {
|
|
// background-color: rgba(0, 0, 0, 0.3);
|
|
|
|
.selection-box-label {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
.s-space__floor-img-small {
|
|
position: absolute;
|
|
top: 60px;
|
|
left: 0;
|
|
width: 200px;
|
|
height: auto;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.s-space__floor-img-large {
|
|
img {
|
|
@include centerElement;
|
|
|
|
z-index: 2100;
|
|
transition: .3s all ease-in-out;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
width: 70%;
|
|
}
|
|
}
|
|
|
|
.pin {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 25px;
|
|
height: 25px;
|
|
margin: -15px 0 0 -15px;
|
|
-webkit-transform: rotate(-45deg);
|
|
transform: rotate(-45deg);
|
|
-webkit-animation-name: bounce;
|
|
animation-name: bounce;
|
|
-webkit-animation-duration: 1s;
|
|
animation-duration: 1s;
|
|
border-radius: 50% 50% 50% 0;
|
|
background:#e3053a;
|
|
-webkit-animation-fill-mode: both;
|
|
animation-fill-mode: both;
|
|
|
|
// @media (min-width: $screen-sm) {
|
|
// width: 30px;
|
|
// height: 30px;
|
|
// margin: -20px 0 0 -20px;
|
|
// }
|
|
|
|
}
|
|
|
|
.pin:after {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 9px;
|
|
height: 9px;
|
|
margin: 8px 0 0 8px;
|
|
content: "";
|
|
border-radius: 50%;
|
|
background: $theme-white;
|
|
|
|
// @media (min-width: $screen-sm) {
|
|
// width: 14px;
|
|
// height: 14px;
|
|
// }
|
|
|
|
}
|
|
|
|
.pulse {
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 11px;
|
|
height: 11px;
|
|
margin: 11px 0 0 -8px;
|
|
-webkit-transform: rotateX(55deg);
|
|
transform: rotateX(55deg);
|
|
border-radius: 50%;
|
|
background: rgba(0, 0, 0, 0.1);
|
|
|
|
// @media (min-width: $screen-sm) {
|
|
// width: 16px;
|
|
// height: 16px;
|
|
// margin: 11px 0 0 -12px;
|
|
// }
|
|
|
|
}
|
|
|
|
.pulse:after {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 35px;
|
|
height: 35px;
|
|
margin: -13px 0 0 -12px;
|
|
content: "";
|
|
-webkit-animation: pulsate 1s ease-out;
|
|
animation: pulsate 1s ease-out;
|
|
-webkit-animation-delay: 1.1s;
|
|
animation-delay: 1.1s;
|
|
-webkit-animation-iteration-count: infinite;
|
|
animation-iteration-count: infinite;
|
|
opacity: 0;
|
|
border-radius: 50%;
|
|
box-shadow: 0 0 1px 2px #e3053a;
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
|
|
filter: alpha(opacity = 0);
|
|
|
|
// @media (min-width: $screen-sm) {
|
|
// width: 40px;
|
|
// height: 40px;
|
|
// margin: -13px 0 0 -13px;
|
|
// }
|
|
|
|
}
|
|
}
|
|
|
|
// unit
|
|
#space-for-ad-banner {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
background-color: $theme-black;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: none;
|
|
z-index: 11500;
|
|
overflow: auto;
|
|
}
|
|
|
|
#space-for-ad-banner .w-ad-banner__pager-wrap {
|
|
bottom: 0;
|
|
transition: .3s all ease 0s;
|
|
|
|
&.active {
|
|
bottom: -130px;
|
|
}
|
|
}
|
|
|
|
// showcase page
|
|
.s-showcase {
|
|
.w-ad-banner__image {
|
|
margin-top: 0;
|
|
@media (max-width: $screen-xs) {
|
|
margin: 50%;
|
|
//left: 0 !important;
|
|
//top: 0 !important;
|
|
}
|
|
}
|
|
|
|
.w-ad-banner__widget-title {
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
.w-ad-banner__collpase {
|
|
// @include transition($speed-fast);
|
|
transition:.3s;
|
|
cursor: pointer;
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 109px;
|
|
background-color: rgba($theme-black, 0.5);
|
|
padding: 10px 12px;
|
|
|
|
&.active {
|
|
bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
// animation for map pin
|
|
@-webkit-keyframes pulsate {
|
|
0% {
|
|
-webkit-transform: scale(0.1, 0.1);
|
|
transform: scale(0.1, 0.1);
|
|
opacity: 0;
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
|
|
filter: alpha(opacity = 0);
|
|
}
|
|
|
|
50% {
|
|
opacity: 1;
|
|
-ms-filter: none;
|
|
-webkit-filter: none;
|
|
filter: none;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: scale(1.2, 1.2);
|
|
transform: scale(1.2, 1.2);
|
|
opacity: 0;
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
|
|
filter: alpha(opacity = 0);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes pulsate {
|
|
0% {
|
|
-webkit-transform: scale(0.1, 0.1);
|
|
transform: scale(0.1, 0.1);
|
|
opacity: 0;
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
|
|
filter: alpha(opacity = 0);
|
|
}
|
|
|
|
50% {
|
|
opacity: 1;
|
|
-ms-filter: none;
|
|
-webkit-filter: none;
|
|
filter: none;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: scale(1.2, 1.2);
|
|
transform: scale(1.2, 1.2);
|
|
opacity: 0;
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
|
|
filter: alpha(opacity = 0);
|
|
}
|
|
}
|
|
|
|
@keyframes pulsate {
|
|
0% {
|
|
-webkit-transform: scale(0.1, 0.1);
|
|
transform: scale(0.1, 0.1);
|
|
opacity: 0;
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
|
|
filter: alpha(opacity = 0);
|
|
}
|
|
|
|
50% {
|
|
opacity: 1;
|
|
-ms-filter: none;
|
|
-webkit-filter: none;
|
|
filter: none;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: scale(1.2, 1.2);
|
|
transform: scale(1.2, 1.2);
|
|
opacity: 0;
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
|
|
filter: alpha(opacity = 0);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes bounce {
|
|
0% {
|
|
-webkit-transform: translateY(-2000px) rotate(-45deg);
|
|
transform: translateY(-2000px) rotate(-45deg);
|
|
opacity: 0;
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
|
|
filter: alpha(opacity = 0);
|
|
}
|
|
|
|
60% {
|
|
-webkit-transform: translateY(30px) rotate(-45deg);
|
|
transform: translateY(30px) rotate(-45deg);
|
|
opacity: 1;
|
|
-ms-filter: none;
|
|
-webkit-filter: none;
|
|
filter: none;
|
|
}
|
|
|
|
80% {
|
|
-webkit-transform: translateY(-10px) rotate(-45deg);
|
|
transform: translateY(-10px) rotate(-45deg);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translateY(0) rotate(-45deg);
|
|
transform: translateY(0) rotate(-45deg);
|
|
}
|
|
}
|
|
|
|
@keyframes bounce {
|
|
0% {
|
|
-webkit-transform: translateY(-2000px) rotate(-45deg);
|
|
transform: translateY(-2000px) rotate(-45deg);
|
|
opacity: 0;
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
|
|
filter: alpha(opacity = 0);
|
|
}
|
|
|
|
60% {
|
|
-webkit-transform: translateY(30px) rotate(-45deg);
|
|
transform: translateY(30px) rotate(-45deg);
|
|
opacity: 1;
|
|
-ms-filter: none;
|
|
-webkit-filter: none;
|
|
filter: none;
|
|
}
|
|
|
|
80% {
|
|
-webkit-transform: translateY(-10px) rotate(-45deg);
|
|
transform: translateY(-10px) rotate(-45deg);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translateY(0) rotate(-45deg);
|
|
transform: translateY(0) rotate(-45deg);
|
|
}
|
|
}
|
|
|
|
//btn-close
|
|
// helper classes
|
|
.absolute-center {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 100%;
|
|
-webkit-transform: translateX(-50%);
|
|
transform: translateX(-50%);
|
|
z-index: 100;
|
|
}
|
|
|
|
.absolute-bottom {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 100%;
|
|
-webkit-transform: translate(-50%, 0);
|
|
transform: translate(-50%, 0);
|
|
z-index: 100;
|
|
}
|
|
|
|
.lightbox-cover {
|
|
position: fixed;
|
|
background-color: rgba(0, 0, 0, 0.9);
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 1100;
|
|
}
|
|
|
|
// image as button
|
|
.img-btn {
|
|
transition:.3s;
|
|
|
|
opacity: 1;
|
|
|
|
&:hover {
|
|
opacity: .7;
|
|
}
|
|
}
|
|
|
|
// lightbox close button
|
|
.btn-close {
|
|
transition:.3s;
|
|
|
|
position: fixed;
|
|
right: 2rem;
|
|
top: 2rem;
|
|
font-size: 20px;
|
|
cursor: pointer;
|
|
z-index: 3000;
|
|
padding: 8px 15px;
|
|
background-color: rgba($theme-black, 0.5);
|
|
|
|
&:hover {
|
|
background-color: $theme-color-main;
|
|
}
|
|
|
|
&.active {
|
|
top: -3rem;
|
|
}
|
|
|
|
.fa-times {
|
|
transition:.3s;
|
|
color:#fff;
|
|
-webkit-transform-origin: center 11px;
|
|
transform-origin: center 11px;
|
|
|
|
&:hover {
|
|
-webkit-transform: rotate(-180deg);
|
|
transform: rotate(-180deg);
|
|
}
|
|
}
|
|
}
|
|
|
|
.loading-cover {
|
|
@include centerElement;
|
|
|
|
transition:.3s;
|
|
|
|
z-index: 3000;
|
|
height: 100%;
|
|
width: 100%;
|
|
opacity: 1;
|
|
visibility: visible;
|
|
background-color: rgba($theme-black, 0.7);
|
|
}
|
|
|
|
// animation loader
|
|
.loading {
|
|
@include centerElement;
|
|
|
|
transition:.3s;
|
|
|
|
width: 40px;
|
|
height: 40px;
|
|
background-color:#54d1ff;
|
|
margin-top: -40px;
|
|
opacity: 1;
|
|
visibility: visible;
|
|
-webkit-animation: loader-animation 1.2s infinite ease-in-out;
|
|
animation: loader-animation 1.2s infinite ease-in-out;
|
|
}
|
|
|
|
.loading-hide {
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
}
|
|
|
|
.js-show {
|
|
transition:.7s;
|
|
|
|
opacity: 1 !important;
|
|
visibility: visible !important;
|
|
}
|
|
|
|
.js-hide {
|
|
transition:.7s;
|
|
|
|
opacity: 0 !important;
|
|
visibility: hidden !important;
|
|
}
|
|
|
|
@-webkit-keyframes loader-animation {
|
|
0% {
|
|
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
|
|
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
|
|
}
|
|
|
|
50% {
|
|
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
|
|
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
|
|
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
|
|
}
|
|
}
|
|
|
|
@keyframes loader-animation {
|
|
0% {
|
|
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
|
|
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
|
|
}
|
|
|
|
50% {
|
|
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
|
|
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
|
|
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
|
|
}
|
|
}
|
|
//for showcase
|
|
.ad-banner-widget-1,
|
|
.ad-banner-widget-3 {
|
|
.w-ad-banner__wrap {
|
|
height: 100%;
|
|
}
|
|
|
|
.w-ad-banner__slide {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.w-ad-banner__image {
|
|
margin-top: 0;
|
|
left: 50% !important;
|
|
top: 0% !important;
|
|
-webkit-transform: translate(-50%, 0%);
|
|
transform: translate(-50%, 0%);
|
|
position: absolute !important;
|
|
width: 100%;
|
|
|
|
@media (max-width: $screen-xs){
|
|
margin-top: 50%;
|
|
left:0 !important;
|
|
height:auto !important;
|
|
}
|
|
|
|
@media (min-width: $screen-xs) and (max-width: $screen-sm){
|
|
margin-top:25% !important;
|
|
}
|
|
|
|
@media (min-width: $screen-sm) {
|
|
width: auto;
|
|
margin-top: 0;
|
|
top: 110px !important;
|
|
-webkit-transform: translate(-50%, -113px);
|
|
transform: translate(-50%, -110px);
|
|
}
|
|
}
|
|
|
|
.w-ad-banner__caption {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 300px;
|
|
z-index: 990;
|
|
color: $theme-white;
|
|
font-family: $main-font;
|
|
max-width: 100%;
|
|
width: 100%;
|
|
padding: 5px 2rem;
|
|
|
|
@media (min-width: $screen-sm) {
|
|
left: 10%;
|
|
max-width: 60%;
|
|
width: auto;
|
|
padding: 30px 2rem;
|
|
background-color: rgba($theme-black, 0.4);
|
|
}
|
|
|
|
h2 {
|
|
margin: 0 0 15px;
|
|
font-family: $title-font;
|
|
font-weight: 400;
|
|
font-size: 1.25rem;
|
|
text-transform: uppercase;
|
|
overflow: hidden;
|
|
line-height: 2;
|
|
margin-bottom: 0;
|
|
|
|
@media (min-width: $screen-sm) {
|
|
font-size: 2.25rem;
|
|
height: 60px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
&:empty {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
p {
|
|
font-size: 13px;
|
|
|
|
// height: 120px;
|
|
overflow: hidden;
|
|
|
|
@media (min-width: $screen-sm) {
|
|
font-size: 14px;
|
|
}
|
|
|
|
&:empty {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.w-ad-banner__desc {
|
|
line-height: 1.8;
|
|
}
|
|
|
|
.w-ad-banner__pager-wrap {
|
|
display: none;
|
|
|
|
@media (min-width: $screen-sm) {
|
|
display: block;
|
|
position: fixed;
|
|
bottom: 45px;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 990;
|
|
background-color: rgba($theme-black, 0.5);
|
|
padding: 20px 60px 20px 20px;
|
|
text-align: right;
|
|
opacity: 0;
|
|
transition: .5s all ease 1s;
|
|
}
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
transition: .3s all;
|
|
}
|
|
|
|
&.w-ad-banner__page--active {
|
|
transition: .5s all ease 1s;
|
|
opacity: 1;
|
|
}
|
|
|
|
.w-ad-banner__widget-title {
|
|
display: inline-block;
|
|
margin-right: 20px;
|
|
color: $theme-white;
|
|
font-weight: normal;
|
|
font-size: 1.625rem;
|
|
font-weight: 400;
|
|
font-family: $title-font;
|
|
position: relative;
|
|
top: 2px;
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
.w-ad-banner__pager {
|
|
display: inline-block;
|
|
}
|
|
|
|
.w-ad-banner__btn {
|
|
// @include transition($speed-fast, all);
|
|
transition:.3s;
|
|
position: absolute;
|
|
left: 1rem;
|
|
top: 50%;
|
|
-webkit-transform: translate(0, -50%);
|
|
transform: translate(0, -50%);
|
|
border: none;
|
|
width: 50px;
|
|
height: 50px;
|
|
background-color: rgba($theme-black, 0.5);
|
|
color: $theme-white;
|
|
outline: none;
|
|
font-size: 1.3rem;
|
|
border-radius: 50%;
|
|
|
|
&:hover {
|
|
background-color: rgba($theme-black, 1);
|
|
}
|
|
}
|
|
|
|
.w-ad-banner__pager-item {
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
margin-right: 10px;
|
|
position: relative;
|
|
|
|
&:after {
|
|
transition:background-color .3s;
|
|
|
|
position: absolute;
|
|
content: '';
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba($theme-black, 0.5);
|
|
z-index: 100;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
}
|
|
|
|
&:hover,
|
|
&.cycle-pager-active {
|
|
&:after {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
}
|
|
|
|
img {
|
|
width: 60px;
|
|
height: 60px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.building .selection-box{
|
|
width: auto !important;
|
|
height: auto !important;
|
|
line-height: 0 !important;
|
|
&:hover {
|
|
.selection-box-label {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
.building .selection-box:first-child{
|
|
left: 60% !important;
|
|
top:82.5% !important;
|
|
}
|
|
.building .selection-box:nth-child(2){
|
|
left: 60% !important;
|
|
top:77.5% !important;
|
|
}
|
|
.building .selection-box:nth-child(3){
|
|
left: 60% !important;
|
|
top: 50% !important;
|
|
}
|
|
.building .selection-box:nth-child(4){
|
|
left: 60% !important;
|
|
top: 39% !important;
|
|
}
|
|
.building .selection-box:nth-child(5){
|
|
left: 60% !important;
|
|
top: 33% !important;
|
|
}
|
|
.building .selection-box > a {
|
|
width: 42px;
|
|
height: 33px;
|
|
position: relative;
|
|
}
|
|
.building .selection-box:nth-child(3) > a{
|
|
width: 126px;
|
|
}
|
|
.building .selection-box:nth-child(4) > a{
|
|
width: 62px;
|
|
}
|
|
.building .selection-box:nth-child(5) > a{
|
|
width: 126px;
|
|
}
|
|
.building .selection-box .pulse{
|
|
display: none;
|
|
margin:0;
|
|
left: 50%;
|
|
top: auto;
|
|
bottom:0;
|
|
transform:translateX(-50%);
|
|
width: 31px;
|
|
&:after{
|
|
width: 31px;
|
|
height: 11px;
|
|
margin: 0;
|
|
}
|
|
}
|
|
.building .selection-box .pin {
|
|
border-radius: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
left:0;
|
|
width: 42px;
|
|
height: 33px;
|
|
margin:0;
|
|
-webkit-animation: bounce2 1s 1s;
|
|
animation: bounce2 1s 1s;
|
|
// -webkit-animation-duration:;
|
|
// animation-duration:;
|
|
background:url(/assets/1f.png);
|
|
-webkit-animation-fill-mode: both;
|
|
animation-fill-mode: both;
|
|
transition:.5s;
|
|
&:hover{
|
|
background:url(/assets/1f_hover.png);
|
|
}
|
|
}
|
|
.building .selection-box:nth-child(2) .pin {
|
|
position: absolute;
|
|
width: 42px;
|
|
height: 33px;
|
|
-webkit-animation: bounce2 1s 1s;
|
|
animation: bounce2 1s 1s;
|
|
// -webkit-animation-duration:;
|
|
// animation-duration:;
|
|
background:url(/assets/2f.png);
|
|
-webkit-animation-fill-mode: both;
|
|
animation-fill-mode: both;
|
|
transition:.5s;
|
|
&:hover{
|
|
background:url(/assets/2f_hover.png);
|
|
}
|
|
}
|
|
.building .selection-box:nth-child(3) .pin {
|
|
position: absolute;
|
|
width: 126px;
|
|
height: 33px;
|
|
-webkit-animation: bounce2 1s 1s;
|
|
animation: bounce2 1s 1s;
|
|
// -webkit-animation-duration:;
|
|
// animation-duration:;
|
|
background:url(/assets/3f.png);
|
|
-webkit-animation-fill-mode: both;
|
|
animation-fill-mode: both;
|
|
transition:.5s;
|
|
&:hover{
|
|
background:url(/assets/3f_hover.png);
|
|
}
|
|
}
|
|
.building .selection-box:nth-child(4) .pin {
|
|
position: absolute;
|
|
width: 62px;
|
|
height: 33px;
|
|
-webkit-animation: bounce2 1s 1s;
|
|
animation: bounce2 1s 1s;
|
|
// -webkit-animation-duration:;
|
|
// animation-duration:;
|
|
background:url(/assets/12f.png);
|
|
-webkit-animation-fill-mode: both;
|
|
animation-fill-mode: both;
|
|
transition:.5s;
|
|
&:hover{
|
|
background:url(/assets/12f_hover.png);
|
|
}
|
|
}
|
|
.building .selection-box:nth-child(5) .pin {
|
|
position: absolute;
|
|
width: 126px;
|
|
height: 33px;
|
|
-webkit-animation: bounce2 1s 1s;
|
|
animation: bounce2 1s 1s;
|
|
// -webkit-animation-duration:;
|
|
// animation-duration:;
|
|
background:url(/assets/13f.png);
|
|
-webkit-animation-fill-mode: both;
|
|
animation-fill-mode: both;
|
|
transition:.5s;
|
|
&:hover{
|
|
background:url(/assets/13f_hover.png);
|
|
}
|
|
}
|
|
.building .pin:after {
|
|
display: none;
|
|
}
|
|
@-webkit-keyframes bounce2 {
|
|
0% {
|
|
-webkit-transform: translateY(-2000px);
|
|
transform: translateY(-2000px);
|
|
opacity: 0;
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
|
|
filter: alpha(opacity = 0);
|
|
}
|
|
|
|
60% {
|
|
-webkit-transform: translateY(30px);
|
|
transform: translateY(30px);
|
|
opacity: 1;
|
|
-ms-filter: none;
|
|
-webkit-filter: none;
|
|
filter: none;
|
|
}
|
|
|
|
80% {
|
|
-webkit-transform: translateY(-10px);
|
|
transform: translateY(-10px);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes bounce2 {
|
|
0% {
|
|
-webkit-transform: translateY(-2000px);
|
|
transform: translateY(-2000px) ;
|
|
opacity: 0;
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
|
|
filter: alpha(opacity = 0);
|
|
}
|
|
|
|
60% {
|
|
-webkit-transform: translateY(30px);
|
|
transform: translateY(30px);
|
|
opacity: 1;
|
|
-ms-filter: none;
|
|
-webkit-filter: none;
|
|
filter: none;
|
|
}
|
|
|
|
80% {
|
|
-webkit-transform: translateY(-10px);
|
|
transform: translateY(-10px);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.s-space #full-layout-canvas .image-cover{
|
|
@media (min-width: 480px) and (max-width: 768px){
|
|
height: 100% !important;
|
|
width: 100% !important;
|
|
}
|
|
}
|