html > * {
box-sizing: border-box;
}
body{
font-family: '微軟æ£黑é«â€',Arial,Helvetica,sans-serif;
}
body{
background: url('images/base.png') ;
background-size: auto 100%;
background-attachment: fixed;
padding: 0px;
margin: 0px;
}
a {
text-decoration: none;
color:#999;
}
.page{
margin: 0 auto;
width:960px;
position: relative;
/* z-index: 50; */
}
.logo img {width: 411px;}
.page.home{
height: 1280px;
}
.nav-logo img {
width: 206px;
margin-left: 75px;
}
.home .logo{position: absolute;/* left:-80px; */
top:0px;}
.mall-select-bg{
background: url('images/select_bg.png');
width:589px;
left:400px;
top:0px;
position: absolute;
height: 1467px;
}
.mall-select{
left:480px;
top:130px;
position: absolute;
}
.mall-select-dummy{
position: absolute;
left:480px;
top:160px;
}
.slogan{
position: absolute;
top:350px;
left:0px;
}
.left-photo{
position: absolute;
top:500px;
left:0px;
}
.branch{
position: absolute;
left:400px;
top:480px;
width: 600px;
height: 1472px;
}
.home-content{
position: absolute;
top: 1006px;
left:0px;
-webkit-box-shadow: 2px 2px 5px 0px rgba(80,80,80,1);
-moz-box-shadow: 2px 2px 5px 0px rgba(80,80,80,1);
box-shadow: 2px 2px 5px 0px rgba(80,80,80,1);
border-radius: 10px;
background:#fff;
border:1px solid #dedede;
padding:38px;
}
.home-content-left{
width:300px;
float:left;
font-size:12px;
line-height: 24px;
color:#59544F;
}
.home-content-video{
margin-left:20px;
float:left;
width:560px;
}
.header{
position: relative;
min-height: 150px;
z-index: 1;
}
.nav-bg{
background: url('images/nav.png');
position: absolute;
top:0px;
left:-180px;
width:1290px;
height: 195px;
z-index:-100;
}
.nav-logo{
position: absolute;
left:-80px;
top:0px;
z-index:-5;
}
.header .nav{
position: absolute;
left:200px;
top:80px;
}
.nav ul{
list-style: none;
padding:0px;
margin: 0px;
}
.nav ul li{
float:left;
}
.nav ul li a{
text-decoration: none;
color:#333;
font-weight: bold
}
.nav ul li a{
padding:5px 0px;
margin: 0px 8px;
display:block;
}
.nav ul li a:hover, .nav ul li.selected a{
color:#FF5500;
}
.home .nav {
position: absolute;
top:20px;
right:0px;
}
.home .nav ul{
list-style: none;
padding:0px;
margin: 0px;
}
.home .nav ul li{
float:left;
}
.home .nav ul li a{
text-decoration: none;
display:block;
color:#444;
padding:2px 4px;
margin:0px 4px;
color:#333;
font-weight: 300;
cursor:pointer;
}
.home .nav ul li a:hover{
color:#ff5500;
}
.search{
text-align: center;
margin-bottom: 40px;
}
.search img{
}
.grid {
width:1000px;
overflow: hidden;
margin-bottom: 40px;
}
.grid-item{
background:#fff;
overflow: hidden;
font-weight: 400;
color:#666;
font-size: 14px;
-webkit-box-shadow: 2px 2px 5px 0px rgba(156,156,156,1);
-moz-box-shadow: 2px 2px 5px 0px rgba(156,156,156,1);
box-shadow: 2px 2px 5px 0px rgba(156,156,156,1);
margin-bottom: 15px;
}
.grid-item.featured{
background-color: #FFFBEB;
}
.grid-title{
overflow: hidden;
background:#B8B0AA;
opacity: 0.8;
color:#585451;
font-weight: bold;
margin-bottom: 15px;
font-size: 16px;
padding:8px;
}
.grid .col1{
width:400px;
float:left;
}
.grid .col2{
width:150px;
float:left;
}
.grid .col3{
width:130px;
float:left;
}
.grid-body{
float:left;
width:700px;
}
.grid-right{
width:250px;
float:left;
margin-left: 10px
}
.solo-video{
border:2px solid #666;
padding-top:5px;
background:#000;
}
.abcd-photo{
float:left;
width:100px;
height:100px;
overflow: hidden;
}
.abcd-photo-wrapper{
width:100px;
height: 100px;
}
.fa {
margin-right:5px;
color:#fff;
padding:8px;
font-size:16px;
border-radius: 20px;
line-height: 20px;
text-shadow:none;
background-color:#dedede;
min-width: 18px;
text-align: center;
}
.info-board .fa-whatsapp,.footer-contact .fa-whatsapp{
background-color:#00BD24;
}
.info-board .fa-facebook,.footer-contact .fa-facebook{
background-color:#3664a2;
}
.info-board .fa-envelope,.footer-contact .fa-envelope{
background-color: #32c5ec;
}
.abcd-summary{
}
.abcd-location, .abcd-contact{
padding:5px;
}
.abcd-content{
float:left;
width:100%;
max-width: 270px;
margin-left: 10px;
padding:5px;
}
.abcd-title{
font-weight: bolder;
color:#444;
margin:1px 0px;
font-size:16px;
}
.abcd-desc{
line-height: 20px;
max-height: 80px;
overflow: hidden;
margin-bottom: 5px;
text-overflow:ellipse;
}
.hotkeywords h2{
color:#585451;
margin:8px;
}
ul.keywords {
list-style: none;
padding:0px;
margin: 0px;
overflow: hidden;
}
ul.keywords li{
float:left;
}
ul.keywords li a{
padding:2px 5px;
margin: 2px;
color:#666;
font-size:14px;
cursor: pointer;
text-decoration: none;
display:block;
}
ul.keywords li a:hover{
color:#FF5500;
}
.grid-nav {
width:100%;
text-align: center;
padding:5px 0px;
border:1px solid #efefef;
background: #fff;
-webkit-box-shadow: 2px 2px 5px 0px rgba(156,156,156,1);
-moz-box-shadow: 2px 2px 5px 0px rgba(156,156,156,1);
box-shadow: 2px 2px 5px 0px rgba(156,156,156,1);
overflow: hidden;
}
.grid-nav ul{
padding:0px;
text-align: center;
list-style: none;
margin: 0 auto;
overflow: hidden;
float:right;
}
.grid-nav ul li{
float:left;
}
.grid-nav ul li a{
text-decoration: none;
color:#999;
display: block;
padding:3px 5px;
margin:2px 5px;
font-size:18px;
border-radius: 40px;
line-height: 30px;
min-width:30px;
text-align: center;
background: #fff;
border:1px solid #efefef;
}
.grid-nav ul li a:hover{
background: #FF9C00;
color:#fff;
}
.grid-nav ul li.current a{
background:#A79A96;
color:#fff;
}
.btn{
padding:1px 5px;
border-radius: 3px;
border-bottom: 3px solid #999;
border-right: 2px solid #999;
background:#efefef;
font-size:14px;
display:inline-block;
cursor: pointer;
}
.btn-red{
border-bottom: 3px solid #db3838;
border-right: 2px solid #db3838;
background-color:#FF3F3F;
color:#fff;
}
.btn-red:hover{
background-color:#FF5500;
}
.search_row{
width:100%;
overflow: hidden;
margin:10px 0px;
}
.search_row label{
float:left;
width:100px;
line-height: 30px;
font-size:18px;
padding:10px;
color:#666;
}
.solo_input{
padding:10px;
font-size:18px;
display:block;
color:#333;
border:none;
}
input{
font-family: '微軟æ£黑é«â€',Arial,Helvetica,sans-serif;
color:#999;
}
.shop_filter {
float:left;
width:400px;
margin-right:50px;
padding-right:20px;
display:block;
overflow: hidden;
border:5px solid #ccc;
border-radius: 8px;
position: relative;
}
.shop_filter:after{
content:"\f0dd";
font-family: FontAwesome;
position: absolute;
right:10px;
top:0px;
font-size:22px;
padding:8px;
color:#999;
}
.shop_filter select{
width:440px;
}
.shop_keyword_search{
width:100%;
max-width:650px;
float:left;
border:5px solid #ccc;
border-radius: 8px;
}
.btn-submit-search{
float:left;
padding:10px;
font-size:18px;
min-width:80px;
margin-left:10px;
border:5px solid #ccc;
border-bottom:5px solid #999;
border-right:5px solid #999;
background: #aaa;
color:#fff;
}
#home-hot{
position: absolute;
top: 190px;
right: -50px;
}
#home-hot-title{
position: absolute;
top: 130px;
opacity: 0.55;
right: 75px;
font-size:28px;
color:#A79A96;
background: #fff;
padding:2px;
}
.home-hot-item{
background: url(images/hot_bg.png) no-repeat;
background-position: 0 14px;
min-width:112px;
height:34px;
line-height: 20px;
font-size: 16px;
color:#A79A96;
}
.home-hot-item:nth-child(2){
margin-left:15px;
}
.home-hot-item:nth-child(3){
margin-left:30px;
}
.home-hot-item:nth-child(4){
margin-left:45px;
}
.home-hot-item:nth-child(5){
margin-left:60px;
}
.home-hot-item:nth-child(6){
margin-left:75px;
}
.home-hot-item:nth-child(7){
margin-left:90px;
}
.home-hot-item:nth-child(8){
margin-left:105px;
}
.home-hot-item:nth-child(9){
margin-left:130px;
}
.home-hot-item:nth-child(10){
margin-left:6.75em;
}
.home-hot-item a{
text-decoration: none;
color: #151312;
margin-left:15px;
font-weight: bolder;
display:inline-block;
font-size:18px;
padding:2px;
background: #fff;
opacity: 0.55;
}
.home-hot-item a:hover{
color:#ffcc00;
}
.home_shop_select_dd,.home_shop_select_text{
width:230px;
border:5px solid #A79A96;
border-radius: 8px;
overflow:hidden;
position: relative;
}
.home_shop_select_dd:after{
content:"\f0dd";
font-family: FontAwesome;
position: absolute;
top:0px;
right:10px;
padding:8px;
font-size:22px;
color:#A79A96;
}
.home_shop_select_dd select{
width:250px;
border:none;
padding:10px;
line-height: 30px;
font-size:18px;
}
.home_shop_select_text input{
width:230px;
border:none;
padding:5px;
line-height: 30px;
font-size:18px;
}
#home_search_box_1{
position: absolute;
top:20px;
left:20px;
}
#home_search_box_2{
position: absolute;
top:120px;
left:50px;
}
#home_search_box_3{
position: absolute;
top:220px;
left:20px;
}
#grid-item-template{
display:none;
}
.bigbanner {
position: relative;
opacity: 0.85;
height:290px;
width:100%;
z-index: -1;
min-width: 960px;
}
.glass{
/* Fallback to SVG filters */
filter: url(blur.svg#blur);
-webkit-filter: blur(3px); filter: blur(3px);
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
}
.bigbanner:after {
content: " ";
width: 100%;
height: 290px;
position: absolute;
z-index: -1;
top: 0;
left: 0;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+69,0.65+92,0.86+100 */
background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 69%, rgba(0,0,0,0.65) 92%, rgba(0,0,0,0.86) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0)), color-stop(69%,rgba(0,0,0,0)), color-stop(92%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0.86))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 69%,rgba(0,0,0,0.65) 92%,rgba(0,0,0,0.86) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 69%,rgba(0,0,0,0.65) 92%,rgba(0,0,0,0.86) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 69%,rgba(0,0,0,0.65) 92%,rgba(0,0,0,0.86) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 69%,rgba(0,0,0,0.65) 92%,rgba(0,0,0,0.86) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#db000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.layout-table{
padding:0px;
margin:0px;
border:none;
width:100%;
}
.rent-layout-table td{
text-align: center;
padding:20px 40px;
}
.rent-info {
font-size:16px;
}
.rent-info div{
margin:10px;
}
.rent-info .solo-mall-name{
font-size:24px;
}
.solo-mall-call-btn {
padding:5px 10px;
background: #9f938c;
color:#fff;
display:inline-block;
font-size:12px;
border-radius: 2px;
}
.solo-mall-call-btn .fa{
background-color: #8B817C;
}
.info-board{
padding:40px;
position: relative;
top:-150px;
width:100%;
color:#fff;
text-shadow: 2px 2px 2px rgba(79, 79, 79, 1);
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#9f938c+0,ffffff+100&0.8+0,0.75+69,0.75+69,0.75+69,0+100 */
background: -moz-linear-gradient(left, rgba(159,147,140,0.8) 0%, rgba(167,162,158,0.75) 69%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(159,147,140,0.8)), color-stop(69%,rgba(167,162,158,0.75)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(159,147,140,0.8) 0%,rgba(167,162,158,0.75) 69%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(159,147,140,0.8) 0%,rgba(167,162,158,0.75) 69%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(159,147,140,0.8) 0%,rgba(167,162,158,0.75) 69%,rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(159,147,140,0.8) 0%,rgba(167,162,158,0.75) 69%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc9f938c', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
}
h1{
font-size:40px;
font-weight: 300;
margin-top:10px 0px;
}
h2 {
padding: 15px 0;
font-size: 30px;
font-weight: 300;
}
.info-board .row{
margin:10px 0px;
}
/* about us */
.solo-mall-thumb{
width:270px;
height:180px;
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
background-color: #fff;
}
.solo-list{
color:#484848;
margin-top:-140px;
font-size:20px;
}
.solo-mall-info div{
margin:10px 0px;
}
.solo-list .layout-table td{
padding:20px;
}
.info-board iframe{
border:3px solid #B8B0AA;
}
.solo-mall-name{
font-size:30px;
margin-top:10px;
margin-bottom: 10px;
}
#malldetail .solo
.mall .info-board{
text-align: center;
}
.mall-video-links{
width:100%;
margin-left:-40px;
width:960px;
overflow: hidden;
margin-bottom: -40px;
}
.mall-video-links a{
float:left;
width:210px;
padding:12px;
padding-top:20px;
border:3px solid #fff;
text-decoration: none;
color:#fff;
font-size:18px;
height:60px;
display:block;
}
.mall-video-links a:hover{
background-color:#ffcc00;
}
.mall-video-links a.active{
background-color:#ff5500;
}
.mag-list { width: 100%; top:-100px; position: relative; }
.mag-list .mag-img-page, .mag-list .mag-img-page img { width: 100%; margin-bottom: 10px; }
.news .info-board{
color:#484848;
text-shadow:none;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+0,0.45+18,0.1+38,0+100 */
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0.45) 18%, rgba(255,255,255,0.1) 38%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(18%,rgba(255,255,255,0.45)), color-stop(38%,rgba(255,255,255,0.1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0.45) 18%,rgba(255,255,255,0.1) 38%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0.45) 18%,rgba(255,255,255,0.1) 38%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0.45) 18%,rgba(255,255,255,0.1) 38%,rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0.45) 18%,rgba(255,255,255,0.1) 38%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
}
.news-item{
width:100%;
margin:0 auto;
overflow: hidden;
padding-bottom: 20px;
margin-bottom: 20px;
border-bottom:2px solid #fff;
}
.news-item-left{
width:300px;
float:left;
background: #fff;
}
.news-item-right{
width:580px;
padding:40px;
float:left;
}
.news-item-image{
width:300px;
height:210px;
}
.news-item-image-long {
width:300px;
height:400px;
}
.news-item-title{
font-size:30px;
}
.mall-detail{
overflow: hidden;
margin-top: 20px;
width:960px;
margin-top:-140px;
}
.mall-detail-lhs{
float:left;
width:550px;
background-color: #fff;
border-radius: 10px;
padding:20px;
}
.mall-detail-rhs{
float:right;
width:320px;
background-color: #fff;
border-radius: 10px;
padding:10px;
}
.mall-detail-full{
width:100%;
padding:10px;
}
.mall-detail-content{
color:#668;
overflow: hidden;
}
.mall-detail-content p{
font-size:16px;
line-height: 24px;
letter-spacing: 3px;
}
.mall-detail-content img{
border:5px solid #f0f0f0;
border-radius: 10px;
}
.img-desc{
font-size:12px;
}
.home-branch{
width:150px;
height: 160px;
position: relative;
/*margin-right:15px;*/
display: flex;
background-color: #000000cc;
border-radius: 5px;
transition: 0.5s;
}
.home-branch-name{/* position: absolute; *//* top:0; *//* left:0; *//*width:170px;*/width: 100%;/* height:125px; */text-align: center;line-height: 36px;font-size: 16px;color:#fff;/* opacity: 0.65; *//* padding-top: 13px; */border-radius: 5px;line-height: 2rem;padding-left: 5px;padding-right: 5px;box-sizing: border-box;margin: auto;position: relative;}
.home-branch:hover {
background-color: #999999cc;
color: #000;
}
.footer {
background: #B8B0AA;
width:100%;
min-height: 300px;
color:#fff;
font-size:20px;
padding-bottom: 40px;
padding-top:40px;
}
.footer .footer-title{
font-size:30px;
margin:20px 0px;
}
.footer-links{
}
ul.footer-links{
list-style: none;
padding:0px;
margin: 0px;
}
ul.footer-links li {
margin:10px 0px;
}
ul.footer-links li a{
text-decoration: none;
padding:10px;
color:#fff;
}
ul.footer-links li a:hover,ul.footer-links li a.active{
color:#ff5500;
}
.footer-dummy{
text-align: center;
width:100%;
padding-top:100px;
}
.footer-col{
float:left;
max-width:320px;
width:0%;
min-width:300px;
}
.footer-row{
overflow: hidden;
}
.footer-contact{
font-size:16px;
}
.footer-contact .row{
margin:10px 0px;
}
.copyright{
font-size:14px;
border-top:1px solid #fff;
padding:15px;
margin-top:15px;
}
#backTo88DB{
font-size: 12px;
background-color: #fff;
border-bottom: 1px solid #999;
width: 100%;
padding-left:20px;
color:#663500;
display:none;
}
/* New Ad Listing */
.solo-list {
/*position: relative;*/
}
.listing_c {
border-right: 0;
/*float: left;*/
border: 1px solid #e0e0e0;
border-radius: 10px;
margin: 0 2% 10px 0;
padding: 10px;
padding-bottom: 20px;
overflow: hidden;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
width: 450px;
background-color: #fff;
position: relative;
}
.listing_c .foto {
width: 45%;
height: auto;
min-height: 250px;
vertical-align: middle;
text-align: center;
float: left;
position: relative;
margin-top: 5px;
overflow: hidden;
background-size: contain;
background-repeat: no-repeat;
background-position: center top;
}
.listCnt {
float: left;
line-height: 24px;
margin-left: 10px;
margin-top: 10px;
width: 50%;
}
.listCnt .adTit a {
font-size: 18px;
color: black;
}
.listCnt .adDes {
color: #777;
font-size: 14px;
}
.appleSolo {
color: #666;
}
.info-board .layout-table {
font-size: 19px;
}
.appleSolo figcaption { min-height: 80px; }
.appleSolo #cwb { margin-top: 50px; }
.solo-mall-thumb img {
width: 100%;
height: 100%;
object-fit: contain;
}
.bigbanner img {
width: 100%;
height: 100%;
object-fit: cover;
}
.news-item-image-long a {
width: 100%;
height: 100%;
display: block;
}
.news-item-image-long a img {
width: 100%;
height: 100%;
object-fit: contain;
}
.news-item-image img {
width: 100%;
height: 100%;
object-fit: contain;
}
.news-item-right {}
@media all and (max-device-width:600px){
.page.home {
width: 100vw;
height: auto;
padding-bottom: 426px;
overflow: hidden;
}
.home .logo {
position: relative;
left: 28px;
height: 196px;
width: 100vw;
overflow: hidden;
}
.home .logo img {
width: 150vw;
object-fit: contain;
margin-top: -24vw;
margin-left: -24vw;
}
.mall-select {
position: relative;
top: 38px;
left: 60px;
width: auto;
}
.slogan {
position: relative;
top: auto;
}
.mall-select-bg {
/* position: relative; */
/* float: right; */
left: 0;
top: 353px;
width: 100vw;
}
.left-photo {
display: none;
}
.mall-select-dummy {
left: 58px;
position: relative;
top: 60px;
height: 50px;
}
table.layout-table {overflow: hidden;}
.branch {
position: relative;
left: 0;
top: 388px;
text-align: center;
overflow: hidden;
height: auto;
}
.layout-table td {
float: none;
display: inline-block;
width: auto;
}
.malldetail .layout-table td {
WIDTH: 100%;
}
a.home-branch.imgLiquid {
width: 100%;
}
.branch .layout-table td {
width: 45%;
}
.home-content {
position: relative;
top: 401px;
padding: 10px;
width: auto;
overflow: hidden;
}
.home-content-left {
float: none;
width: 100%;
}
.home-content-video {
float: none;
margin-left: 0;
width: auto;
}
div#home-hot {
display: none;
}
div#home-hot-title {
display: none;
}
.footer-col {
float: none;
max-width: 100vw;
min-width: auto;
width: auto;
padding: 10px;
}
.footer {
padding-top: 10px;
}
.footer-row {
font-size: 14px;
}
.page {
width: 100vw;
overflow: hidden;
}
.slogan img {
width: 100%;
}
.page.home {}
.home .nav {
position: fixed;
top: 0;
right: auto;
left: -100vw;
background: #FFF;
min-height: 100vh;
z-index: 100;
box-shadow: 0px 5px 5px #333;
transition:0.5s;
}
.home .nav ul li {
float: none;
padding: 15px;
border-bottom: 1px dashed #dedede;
}
.home .nav.show{
left:0px;
}
.header .nav {
position: fixed;
top: 0;
right: auto;
left: -100vw;
background: #FFF;
min-height: 100vh;
z-index: 100;
box-shadow: 0px 5px 5px #333;
transition:0.5s;
}
.header .nav ul li {
float: none;
padding: 15px;
border-bottom: 1px dashed #dedede;
}
.header .nav.show{
left:0px;
}
.mobileonly{
display: block;
}
.menu-toggle-ani {
display: inline-block;
box-flex: 0;
flex-grow: 0;
flex-shrink: 0;
font-size: 18px;
padding: 15px;
text-align: left;
-webkit-user-select: none;
float: left;
margin-top: 3px;
}
.menu-toggle-ani .mtb-bar {
display: block;
height: 2px;
margin-bottom: 5px;
transition: transform 250ms,opacity 250ms;
width: 18px;
background: #6c6c6c;
}
.info-board {
/* top: -251px; */
top: 0px;
padding: 10px;
width: auto;
}
.nav-logo {
/* top: 25px; */
}
.navmobile {
height: 50px;
}
.bigbanner.glass {
display: none;
}
.nav-bg {
/* top: 20px; */
width: calc(100vw + 175px);
}
.mall-detail {
margin-top: 0;
width: auto;
}
.mall-detail-lhs {
width: auto;
padding: 15px;
float: none;
}
.bigbanner {
min-width: auto;
}
.page.apple.solo .layout-table td {
width: auto;
max-width: 100vw;
}
.info-board {}
.aboutus .layout-table td {
width: auto;
/* text-align: center; */
}
table.layout-table {}
.solo-list {
margin-top: 0;
}
.foto {
width: 100%;
float: none;
}
.listCnt {
float: none;
width: 100%;
}
.listing_c .foto {
float: none;
min-height: 120px;
width: 100vw;
}
.mall-video-links a {width: 42%;float: left;background: #00000033;}
.mall-video-links {
width: auto;
margin-left: 0;
margin-bottom: 0;
}
.shop_filter {
float: none;
width: auto;
}
.shop_keyword_search {
width: auto;
}
form#searchMall {
padding: 10px;
}
.grid-body {
float: none;
width: 100vw;
}
.grid-nav ul {
float: none;
margin: 0 auto;
}
.grid-right {
width: 100vw;
margin-left: 0;
}
.solo-video iframe{
width:100%
}
.news-item-right {
float: none;
width: auto;
padding: 15px;
}
.news-item-left {
width: auto;
float: none;
}
}
#hexGrid {
display: flex;
flex-wrap: wrap;
width: 95%;
margin: 0 auto;
overflow: hidden;
font-family: 'Raleway', sans-serif;
font-size: 15px;
list-style-type: none;
margin: 0 auto;
padding: 0;
}
.hex {
position: relative;
visibility:hidden;
outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
}
.hex::after{
content:'';
display:block;
padding-bottom: 86.602%; /* = 100 / tan(60) * 1.5 */
}
.hexIn{
position: absolute;
width:96%;
padding-bottom: 110.851%; /* = width / sin(60) */
margin:0 2%;
overflow: hidden;
/* background: #000; */
visibility: hidden;
outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
-webkit-transform: rotate3d(0,0,1,-60deg) skewY(30deg);
-ms-transform: rotate3d(0,0,1,-60deg) skewY(30deg);
transform: rotate3d(0,0,1,-60deg) skewY(30deg);
}
.hexIn * {
position: absolute;
visibility: visible;
outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
}
.hexLink {
display:
block;
width: 100%;
height: 100%;
text-align: center;
color: #fff;
overflow: hidden;
-webkit-transform: skewY(-30deg) rotate3d(0,0,1,60deg);
-ms-transform: skewY(-30deg) rotate3d(0,0,1,60deg);
transform: skewY(-30deg) rotate3d(0,0,1,60deg);
}
/*
#e50013
#ed741f
#284682
#008042
*/
.c1 {
background: #e50013;
}
.c2 {
background: #ed741f;
}
.c3 {
background: #284682;
}
.c4 {
background: #008042;
}
/*** HEX CONTENT **********************************************************************/
.hex img {
left: -100%;
right: -100%;
width: auto;
height: 100%;
margin: 0 auto;
-webkit-transform: rotate3d(0,0,0,0deg);
-ms-transform: rotate3d(0,0,0,0deg);
transform: rotate3d(0,0,0,0deg);
}
.hex h1, .hex p {
width: 100%;
padding: 5%;
box-sizing:
border-box;
font-weight: 300;
-webkit-transition: -webkit-transform .2s ease-out, opacity .3s ease-out;
transition: transform .2s ease-out, opacity .3s ease-out;
}
.hex h1 {
bottom: 40%;
padding-top: 50%;
font-size: 1em;
z-index: 1;
-webkit-transform:translate3d(0,0,0);
-ms-transform:translate3d(0,0,0);
transform:
translate3d(0,0,0);
}
.hex h1::after {
content: '';
position: absolute;
bottom: 0;
left: 45%;
width: 10%;
text-align: center;
/* border-bottom: 1px solid #fff; */
}
.hex p {
top: 40%;
padding-bottom:50%;
-webkit-transform:translate3d(0,0,0);
-ms-transform:translate3d(0,0,0);
transform:
translate3d(0,0,0);
}
/*** HOVER EFFECT **********************************************************************/
.hexLink:hover h1, .hexLink:focus h1,
.hexLink:hover p, .hexLink:focus p{
-webkit-transform:translate3d(0,0,0);
-ms-transform:translate3d(0,0,0);
transform:translate3d(0,0,0);
}
#hexGrid{
padding-bottom: 5.5%
}
.hex {
width: 22%; /* = 100 / 4 */
}
.hex:nth-child(5){ /* first hexagon of even rows */
margin-left: 11%; /* = width of .hex / 2 to indent even rows */
}
@media (max-width: 400px) {
#hexGrid {
font-size: 13px;
}
}