/* Reset ----------------------------------------------------------------------------------------------------*/ * { margin:0; padding:0; border:0;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;} body{ font-size:14px; background:#fff; font-weight:400; color:#222222; font-family: 'Ubuntu', "Microsoft JhengHei", "微軟正黑體", Verdana, Arial, PMingLiU, sans-serif; /*min-width:1140px;*/ } html{ /* Keyword values */ touch-action: auto; touch-action: none; touch-action: pan-x; touch-action: pan-left; touch-action: pan-right; touch-action: pan-y; touch-action: pan-up; touch-action: pan-down; touch-action: pinch-zoom; touch-action: manipulation; /* Global values */ touch-action: inherit; touch-action: initial; touch-action: unset; } html, div, p, ul, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, form, input, select, button, textarea, iframe, table, th, td { margin: 0; padding: 0; } table { width:100%; border-collapse:collapse; border-spacing:0; } table, th, td { border:0; margin: 0; padding: 0;} img { border: 0 none; vertical-align: top; width:auto;} /*ul { list-style-type:none;} CMS issue */ li { list-style-type:inherit; } button { cursor: pointer; } input{font-family: 'Ubuntu', "Microsoft JhengHei", "微軟正黑體", Verdana, Arial, PMingLiU, sans-serif;} ::placeholder{color: #999;opacity: 1} b{font-weight: 500 !important;} /* for Firefox */ a, a:link { text-decoration: none; color:#005880; transition: all 0.2s ease;} a:hover {color:#0b2653;} .fixed::after { content: "."; display: block; clear: both; height: 0; visibility: hidden; } .fixed { display: block; min-height: 1%; } _html .fixed { height: 1%; } .clear { display: block!important; float: none!important; clear: both; overflow: hidden; width: auto!important; height: 0!important; margin: 0 auto!important; padding: 0!important; font-size: 0; line-height: 0; } .fl, .fr { display: inline; float: left; } .fr { float: right; } h2{font-size: 32px; font-weight: 500; letter-spacing: -2px;} .red{color:#c0002a} .metal{color:#898d90;} .water{color:#00aec7;} .fire{color:#e4002b;} .earth{color:#a45a2a;} .wood{color:#a0a14f;} .verticalCenter{ text-align: center; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .linkWithArrow{color: #c77900 !important; text-transform: uppercase; text-decoration: underline !important; padding-right:30px; position: relative; font-size: 18px; font-weight: 300} .linkWithArrow:hover{text-decoration: none !important;} .linkWithArrow::after{transition: all 0.2s ease; content:""; width: 10px; height: 10px; border-width: 2px 2px 0 0; border-color: #c77900; border-style: solid; transform: rotate(45deg) ; position: absolute; right: 10px; bottom: 3px; } .linkWithArrow:hover::after{right:15px;} .normalLink{color: #c77900 !important; text-decoration: underline !important;} .normalLink:hover{text-decoration: none !important;} .fadeInDown{opacity:0; transform:translateY(-60px)} .fadeInUp{opacity:0; transform:translateY(60px)} .fadeInLeft{opacity:0; transform:translateX(-60px)} .fadeInRight{opacity:0; transform:translateX(60px)} /* `Grid ----------------------------------------------------------------------------------------------------*/ .wrap { max-width:1280px; position:relative; margin:0 auto; padding:0 20px; width:100%; } .col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 { float: left; margin-right: 2.7118644%; } .col1 { width: 5.8474576%; } .col2 { width: 14.4067796%; } .col3 { width: 22.9661016%; } .col4 { width: 31.5254236%; } .col5 { width: 40.0847456%; } .col6 { width: 48.6440676%; } .col7 { width: 57.2033896%; } .col8 { width: 65.7627116%; } .col9 { width: 74.3220336%; } .col10 { width: 82.8813556%; } .col11 { width: 91.4406776%; } .col12 { width: 99.9999996%; margin-right: 0; } .last { margin-right: 0; } .push0 {margin-left:0%;} .push1 {margin-left:8.559322%;} .push2 {margin-left:17.118644%;} .push3 {margin-left:25.677966%;} .push4 {margin-left:34.237288%;} .push5 {margin-left:42.79661%;} .push6 {margin-left:51.355932%;} .push7 {margin-left:59.915254%;} .push8 {margin-left:68.474576%;} .push9 {margin-left:77.033898%;} .push10 {margin-left:85.59322%;} .push11 {margin-left:94.152542%;} .pull0 {margin-right:0%;} .pull1 {margin-right:8.559322%;} .pull2 {margin-right:17.118644%;} .pull3 {margin-right:25.677966%;} .pull4 {margin-right:34.237288%;} .pull5 {margin-right:42.79661%;} .pull6 {margin-right:51.355932%;} .pull7 {margin-right:59.915254%;} .pull8 {margin-right:68.474576%;} .pull9 {margin-right:77.033898%;} .pull10 {margin-right:85.59322%;} .pull11 {margin-right:94.152542%;} .col1 img, .col2 img, .col3 img, .col4 img, .col5 img, .col6 img, .col7 img, .col8 img, .col9 img, .col10 img, .col11 img, .col12 img { width: 100%; height: auto; display: block; } /* Common ----------------------------------------------------------------------------------------------------*/ #header {position:absolute; top: 0; border-top: 3px solid #c77900;z-index: 999999; min-height:110px; min-width: 1280px;} #header .logo, .floorplanHead .logo{ float:left; width: 85px; height: 78px; display: block; background-size:contain !important; background:url(/eng/share_element/img/svg/logo.svg) no-repeat center center; z-index: 999px; position: relative;} .floorplanHead .logo{ background-size: 100% auto !important; width: 62px; height: 56px; float:right; margin-top: 15px;} #header .btnElementClub{display:block;width: 135px; height: 30px; background: url(/eng/share_element/img/svg/logo-header_elements_club.svg) no-repeat left center; background-size: 100% auto !important; text-indent: -9999px; text-align: left;} li.for-tourists + li a.btnElementClub{margin-right: 30px;} #header { width:100%;background:#FFF;font-size:0;font-family: 'Ubuntu', sans-serif,"Microsoft JhengHei", "微軟正黑體";position: relative;} #header .wrap{padding-top:15px; max-width:1200px;min-height: 60px;/*temp*/} #header::after{content:'';clear:both;display:block;} #header .logo{vertical-align: middle;max-width:85px;} #header .headerRight{width:calc(100% - 85px); float: left;} #header .headerRight #top{float: right;} #header #top #topNav{text-align: right; vertical-align: top; line-height: 30px;} #header #top #topNav li{display: inline-block; padding: 0 10px; line-height: 30px; height: 30px;} #header #top #topNav li:first-child, #header #top #topNav li.for-tourists{ position: relative; padding: 0 20px; margin-right: 10px;} #header #top #topNav li.for-tourists::after{ height: 20px; width: 1px; position: absolute; right: 0; top: 50%; content: ""; display: block; transform: rotate(0) translateY(-50%); background-color: #c8c8c8; } #header #top #topNav li:nth-child(2){padding-left: 10px;} #header #top #topNav li a{font-size: 16px; color: #aaaaaa;} .tourists-landing #header{height: 112px;} .tourists-landing #header #navigation{display: none;} #header #navigation{display:inline-block;vertical-align: middle;text-align: right; width: 100%; margin-top: 15px;} #header #navigation ul::after{content:'';clear:both;display:block;} #header #navigation ul {display: inline-block;vertical-align: middle;} #header #navigation ul li{float:left;list-style: none;position: relative;} #header #navigation > ul > li{height: 45px;} #header #navigation ul li > a{font-size:17px;display: block;color:#222;position: relative; padding: 0 10px; letter-spacing:-0.5px; } #header #navigation ul li.selected > a, #header #navigation ul li > a:hover{color:#c77900;} #header #navigation > ul > li > ul::before{content:""; width: 0; height: 0; border-left: 14px solid transparent; border-right: 14px solid transparent; border-bottom:14px solid #c77900; top: -15px; left: 50%; transform: translateX(-50%); position: absolute;} #header #navigation > ul > li > ul{border-top: 2px solid #c77900; top:45px !important} #header #navigation ul li > ul{box-shadow:0 6px 12px rgba(0,0,0,0.3); position: absolute;background-color: #fff;left: 50%; transform:translateX(-50%); z-index: 10;min-width: 185px;top:100%;display:none;padding-right:0;} #header #navigation ul li > ul li{margin:0;width:100%;text-align: left;} #header #navigation ul li > ul li > a{padding:15px 15px; font-size: 14px;} #header #navigation ul li > ul li > ul{left: 184px !important; transform: translateX(0); z-index: 11; top: 0; background:none !important;} #header #navigation ul li:nth-child(7) > ul li > ul{left: -184px !important; width: 184px;} #header #navigation ul li > ul li > ul > li > a{background-color: #eb8f00; color: #fff !important;} #header #navigation ul li > ul li > ul > li > ul > li > a{background-color: #D27600;} #header #navigation ul li > ul li > ul > li{border-bottom:1px solid #efa230;} #header #navigation ul li > ul li > ul > li:last-child{border-bottom:none;} #header #navigation ul li > ul li > ul > li > a:hover, #header #navigation ul li > ul li > ul > li.selected > a{background-color:#e77800; color: #fff} #header #navigation > ul > li > ul > li:hover > a { background: #c77900; /* Old browsers */ background: -moz-linear-gradient(left, #c77900 1%, #ed9000 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #c77900 1%,#ed9000 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #c77900 1%,#ed9000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c77900', endColorstr='#ed9000',GradientType=1 ); /* IE6-9 */color:#fff;} #header #navigation ul li:hover > ul {display:block;} #header .lang{display:inline-block;vertical-align: middle;margin-left:10px;} #header .lang a{display: inline-block;vertical-align: middle;font-size: 16px;color: #000;margin: 0 5px;border: 1px solid rgba(0,0,0,0.2);border-radius: 20px;width: 35px;height: 35px;text-align: center;line-height: 35px;} #header, #header > * { transition: all 0.2s ease; } #header.sticky-header, .tourists-landing #header.sticky-header { min-height:65px; height:auto; -webkit-box-shadow: 0 0 40px 0 rgba(0,0,0,0.05); box-shadow: 0 0 40px 0 rgba(0,0,0,0.05);} #header.sticky-header .wrap {padding-top: 7px; } #header.sticky-header #navigation { margin-top: 15px; } #header.sticky-header #top { display:none; } #header.sticky-header .logo { padding-top: 12px; height:50px; } .mobileMenuBtn { display:none;position:absolute; width:36px; height:25px;text-indent: 100px;right: 5px;top: 50%;transform: translateY(-50%) scale(0.7);} .mobileMenuBtn span,.mobileMenuBtn span::before,.mobileMenuBtn span::after{background:#c77900;position: absolute;left:0;width:100%;height:4px;transition: 0.2s linear all;} .mobileMenuBtn span{top:0px;} .mobileMenuBtn span::before{content:'';top:10px;} .mobileMenuBtn span::after{content:'';top:20px;} .mobileMenuBtn.on span{background:none;} .mobileMenuBtn.on span::before{transform:rotate(45deg);} .mobileMenuBtn.on span::after{transform:rotate(-45deg);top: 10px;} .mobileMenuMask { display:none; position:fixed; background-color:black; opacity:0.7; width:100%; height:100%; z-index:999998; top:0; left:0;} a.mmCloseBtn {display:block; position:absolute; top:15px; right:15px; width:21px; height:21px; background:url(/eng/share_element/images/closeBtn.svg) no-repeat; cursor:pointer;z-index:120;} footer{padding-bottom:30px; text-align: center;} .photoFancyContainer { padding:5px; } .photoFancyContainer img { width:auto; height:auto; max-height:600px; max-width:900px; } /*content style*/ .content-container{background:#FFF;padding-top:30px;padding-bottom:30px;} .error{color:#F00 !important;border-color:#F00 !important} .breadcrumb{margin-bottom:30px;font-size:0;} .breadcrumb a{color:#333;font-size:14px;} .breadcrumb a::after{content:'>';display:inline-block;margin:0 5px;} .breadcrumb a:last-child::after{display:none;} .breadcrumb a:last-child,.breadcrumb a.on{color:#ff0000;} .pagination{font-size:0;text-align:center;margin-bottom:30px;} .pagination .btn{width:30px;height:30px;padding:0;background:#ff0000;position: relative;margin:0 5px;min-width: 0px;} .pagination .btn:hover{background:#b00808;} .pagination .btn::before,.pagination .btn::after{content:'';border:6px transparent solid;background:#FFF;position: absolute;} .pagination input{width:30px;height:30px;text-align: center;font-size:14px;border:1px solid #f00;display:inline-block;vertical-align: middle;margin:0 5px;} .pagination p{display:inline-block;vertical-align: middle;height:30px;font-size:14px;line-height: 30px;margin:0 5px;margin-right: 10px;} .pagination p::before{content:'/';display:inline-block;vertical-align:top;margin-right:10px;} .pagination .btn.btn-first::before{height: 12px;width: 2px;border: none;top: 9px;left: 10px;} .pagination .btn.btn-first::after{border-width: 6px;border-right-color: #FFF;background: none;top: 9px;left: 7px;} .pagination .btn.btn-prev::before{display:none;} .pagination .btn.btn-prev::after{border-width: 6px;border-right-color: #FFF;background: none;top: 9px;left: 7px;} .pagination .btn.btn-next::before{display:none;} .pagination .btn.btn-next::after{border-width: 6px;border-left-color: #FFF;background: none;top: 9px;right: 7px;} .pagination .btn.btn-last::before{height: 12px;width: 2px;border: none;top: 9px;right: 10px;} .pagination .btn.btn-last::after{border-width: 6px;border-left-color: #FFF;background: none;top: 9px;right: 7px;} .pagination .btn.btn-next{background:#ff0000} .pagination .btn.btn-next:hover{background:#b00808;} .form{} .form h2{font-size:24px;font-weight: bold;color:#F00;padding-bottom:20px;margin-bottom:10px;position: relative;} .form h2::before{content:'';width:100%;height: 1px;background:#F00;position: absolute;bottom:0;left:0;} .form h3{font-size:16px;font-weight: bold;margin-bottom:10px;} .form h4{font-size:16px;font-weight: bold;margin-bottom:10px;padding-bottom:3px;position: relative;color:#F00;text-decoration: underline;} .form p{margin-bottom:20px;line-height:130%;} .form .mandatory-mark{position: relative;color: #F00;line-height: 0;height: 1px;display: inline-block;vertical-align: middle;top: -3px;margin-right: 2px;} .form .remark{font-size:16px;color:#888888;} .form p + h3, .form p + h4{margin-top:30px;} .form label{font-size:16px;} .form input[type="text"]{width:100%;height:47px;padding:10px 15px;font-size:16px;border:1px solid #b4a68f;display: inline-block;vertical-align: middle;} .form label + input[type="text"], .form label + select, .form label + .row, .form label ~ .select2-container{margin-top:5px;} .form .item{display:inline-block;vertical-align: middle;margin-right:20px;height: 35px;} .form .item::before{content:'';height:100%;display:inline-block;vertical-align: middle;} .form .item input, .form .item label{vertical-align: middle;} .form .item input + label{margin-left:5px;} .form .select2-container{width: 100% !important} .form .select2-container .select2-selection--single{height:47px;border-radius: 0;border-color: #b4a68f; width: 100%} .form .select2-container--default .select2-selection--single .select2-selection__rendered{font-size:16px; line-height:47px; color: #c77900} .form .select2-container--default .select2-selection--single .select2-selection__arrow{height:47px;} .form .select2-container--default .select2-selection--single .select2-selection__arrow b{display: block; width: 10px; height: 10px; border-top: 2px solid #c77900;border-right: 2px solid #c77900; border-left: none; border-bottom:none; transform: rotate(135deg); margin-left:-15px; margin-top: -8px; } .form .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{transform: rotate(-45deg);} .form .row{display:table;width:100%;table-layout: fixed;margin:0 -20px;margin-bottom:40px;} .form .row .col{display:table-cell;width:50%;padding:0 20px;} .form .row .col .row{width:calc(100% + 20px);margin-bottom: 0;} .form .captcha{margin:40px 0;text-align: center;} .form .btn-holder{margin:40px 0;text-align: center;} .btn{border:1px solid #c77900; display:inline-block;vertical-align: middle;padding:13px 19px;text-align: center;font-size:16px; color: #c77900 !important;} .btn + .btn{margin-left:10px;} .btn:hover{background-color: #c77900; color: #fff !important} .checkbox-style{background-color:#fff;display: inline-block;vertical-align: middle;width: 30px;height: 30px;border: 1px solid #b4a68f;margin-right: 10px;position: relative;top: -2px;} .checkbox-style input[type="checkbox"]{ display: block;width: 20px;height: 20px;position: absolute;top: 0;left: 0;opacity: 0;} .checkbox-style.checked{background:#fff url(/eng/share_element/img/checkbox-checked.png) no-repeat center center;background-size:20px auto;} .radio-style{display: inline-block;vertical-align: middle;width: 12px;height: 12px;border: 1px solid #c77900;margin-right: 10px;position: relative;top: -2px;border-radius: 20px;} .radio-style input[type="radio"]{display: block;width: 12px;height: 12px;position: absolute;top: 0;left: 0;opacity: 0;} .radio-style.checked{border-color: #fff} .radio-style.checked::before{content:'';position: absolute;width:6px;height:6px;background:#fff ;top:50%;left:50%;transform: translateX(-50%) translateY(-50%);border-radius: 20px;} .checkBoxGrp{padding: 30px 0;} /* Index */ #container{margin-bottom: 40px; display: block; width: 100%;} .innerBanner{position: relative; z-index: 1; overflow: hidden; width: 100%;} @keyframes revalOut { 0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 30%, 50%{ -webkit-transform: translateX(0); transform: translateX(0); } 80%, 100%{ -webkit-transform: translateX(100%); transform: translateX(100%); } } @-webkit-keyframes revalOut { 0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 30%, 50%{ -webkit-transform: translateX(0); transform: translateX(0); } 80%, 100%{ -webkit-transform: translateX(100%); transform: translateX(100%); } } @keyframes fadeOut { 0%{ opacity:1; } 50% { opacity:1; } 100%{ opacity: 0; z-index: -1; } } .floorplan #container section:nth-of-type(2){z-index: 0; padding: 0;} #container section:nth-of-type(2), .contentArea .tipsWrap, section.transportation {z-index: 2; position: relative; background-color: #fff; padding-top: 45px;} #container section.listing, #container section#miscCol{padding-top: 0;} #container section#miscCol{background:none;} #container, #mainSlider { position:relative; width: 100%;} .mainSliderOuterWrap{width: 100%; background-color: #fcf9f6; height: 375px; margin-bottom: 75px; } #mainSliderWrap{width: 1280px; height: 430px; margin: 0 auto; position: relative;} #mainSlider{background:#f6f1eb url(/eng/share_element/img/bg_event-banner.jpg) no-repeat center left; height: 375px; } #mainSlider a{outline:none; position:relative; width:100%; height:400px; display:block; overflow:hidden;text-align:center; background-position:center; } #mainSlider .CMSRecord a{height: auto !important} #mainSlider.slick-initialized{overflow: initial;} .sliderContent{ width: calc(100% - 640px); float: left; height: 375px; text-align: left; padding: 43px 110px 0 110px; font-weight: 300; } @keyframes fadeInLeftShort { from { opacity: 0; transform: translate3d(-10%, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes fadeInUpShort { from { opacity: 0; transform: translate3d(0, 10%, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes fadeInDownShort { from { opacity: 0; transform: translate3d(0, -30%, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } .fadeInUpShort{ -webkit-animation-name: fadeInUpShort; animation-name: fadeInUpShort; } .fadeInDownShort{ -webkit-animation-name: fadeInDownShort; animation-name: fadeInDownShort; } .fadeInLeftShort { animation-name: fadeInLeftShort; } .sliderContent.animate{ animation: animateSlideContent ease-in-out 1s forwards; } .sliderContent .slider-heading{ color: #c77900; font-size: 36px; margin-bottom: 40px; } .sliderContent .text{ font-size: 20px; color: #222222; line-height: 150%; } .sliderImg{ font-weight: 300; height: 375px; width: 640px; display: inline-block; overflow: hidden; float: right; position: relative; } /*#slick-slide00 .sliderImg::before{ content:""; position: absolute; left: 0; z-index: 9; top: 0; height: 100%; opacity:1; background-color: #e98d00; display: block; width: 100%; transform: translateX(0%); animation: revealLayerInit ease-in-out 0.4s forwards; }*/ /* .revealLayer{ position: absolute; right: 0; top: 0; width: 640px; height: 375px; overflow: hidden; } .revealLayer::before{ content:""; position: absolute; left: 0; z-index: 9; top: 0; height: 100%; opacity:1; background-color: #e98d00; display: block; width: 100%; z-index: -1; transform: translateX(-100%); } .revealLayer.play::before{ animation: revealLayer ease-in-out 1s forwards; z-index:9; } */ @keyframes revealLayerInit { 0% { transform: translateX(0%); } 100%{ transform: translateX(100%); } } @keyframes animateSlideContent { 0% { opacity: 0; } 20%{ transform: translateX(-60px); } 100%{ opacity: 1; transform: translateX(0); } } @keyframes revealLayer { 0% { transform: translateX(-200%); } 35%,55% { transform: translateX(0); } 80%,100%{ transform: translateX(100%); } } .slick-dots{bottom:-40px; z-index: 9999} .slick-dots li.slick-active button::before, .slick-dots li button:hover::before{color: #c77900} .signUpWrap{ text-align:center; color:#fff; height:75px;background:url(/eng/share_element/img/bg_eventbar.jpg) no-repeat center center; background-size:cover; width: calc(100% - 640px); position: absolute; left: 0; top:300px; z-index: 8} .signUpWrap p{font-size: 18px; width: 90%; position: relative;} .signUpWrap p:::before, .signUpWrap p:::after{content:""; width: 52px; height: 12px; display: block; position: absolute; top: 50%; transform: translateY(-50%); background:url(/eng/share_element/img/graph-signup.png) no-repeat center center;} .signUpWrap p:::before{left: 5%;} .signUpWrap p:::after{right: 5%; transform: rotate(180deg);} .signUpWrap a{padding:15px 0; color: #fff; display: block;} .signUpWrap a::before, .signUpWrap a::after{animation: blinking ease-in-out 1s infinite ; right:30px; top:50%; transform:translateY(-50%); position:absolute; width: 0; height: 0; content:""; display: block; border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-left: 13px solid #fff; transition: all 0.2s ease; } .signUpWrap a::before{right:40px; border-left-color:rgba(255,255,255,0.3); } .signUpWrap a:hover::before, .signUpWrap a:hover::after{opacity: 1 !important} @keyframes blinking { 0% { opacity: 0; } 100%{ opacity: 1; } } .signUpWrap a:hover::before{right: 30px; opacity: 1} #miscCol .wrap{width:1100px; margin-top: 30px;} #miscCol .boxWrap{width: 280px; opacity: 0;} #miscCol .boxWrap .thumb{margin-bottom: 35px; position: relative; height: 280px; overflow: hidden; background-color: #fcf9f6} #miscCol .boxWrap .thumb img{position: absolute; left: 50%; top: 50%; max-width: 100%; transform: translate(-50%,-50%); z-index: 0} #miscCol .boxWrap .thumb::after{content:""; position: absolute; bottom: -25px; height: 25px; width: 1px; left: 50%; transform: translateX(-50%); background-color: #c77900;} #miscCol .boxWrap .searchWrap{position: relative;} #miscCol .boxWrap .searchWrap input[type=text]{border-radius:0; background:none; border-bottom:1px solid #c77900; font-size: 16px; color: #c77900; width: 100%; line-height: 150%; padding: 10px 0; outline: none} #miscCol .boxWrap .searchWrap input[type=text]::placeholder{color: #c77900} #miscCol .boxWrap .searchWrap .searchBtn{ text-indent:-9999px;position: absolute; right: 0; top: 50%; transform:translateY(-50%); width:18px; height: 18px; background:url(/eng/share_element/img/svg/icon-home_search.svg) no-repeat center center; background-size:cover !important; border:0; cursor: pointer} #miscCol .middle .boxWrap{margin: 0 auto;} #miscCol .instagramFeed .boxWrap{float: right;} #miscCol .instagramFeed h2{margin-bottom: 23px;} #miscCol .instagramFeed .igLogo{background-size:cover !important; text-indent: -9999px; width: 59px; height: 59px; background:url(/eng/share_element/img/svg/logo-elementshk.svg) no-repeat center center; display: block; float: right; border-radius: 50%; margin-top: -37px; } #miscCol .ig::before{content:""; width: 18px; height: 18px; background:url(/eng/share_element/img/svg/icon-instagram_black.svg) no-repeat center center; background-size:cover !important; display:block; position: absolute; left: -23px;} #miscCol .ig{color:#c77900; text-decoration: underline; font-size: 16px; margin-left: 26px;position:relative;} #miscCol .ig:hover{text-decoration: none;} #miscCol .postInfo{z-index:1; width:100%; opacity:0; transition:opacity 0.2s ease; height: 100%; background-color: rgba(246,241,235,0.9); padding: 25px 23px; position: absolute;} #miscCol .postInfo .igTitle{ font-size:18px; color: #c77900; line-height: 39px; margin-bottom: 23px;} #miscCol .thumb a:hover .postInfo{opacity:1;} #miscCol .postInfo .igTitle span{float:left; margin-right:10px; border-radius: 50%; width: 39px; height: 39px; background:url(/eng/share_element/img/svg/logo-elementshk.svg) no-repeat center center; background-size: cover !important; display:inline-block;} #miscCol .postInfo .igContent{font-size:16px; line-height: 150%; color: #222;} .home #container{background:url(/eng/share_element/img/bg_contentArea.jpg) no-repeat left 0 top 590px; background-size: 83% 66%;} .home #header{opacity: 0;} #mainNewShop{margin: 100px auto 0 auto; padding-top: 0 !important; background:none !important;} section{clear: left; } section::after, .wrap::after{content:""; width: 100%; display: block;clear: both;} .mainNewShopSlider{width: 980px; margin: 0 auto; height: 286px; box-shadow: 0 12px 36px rgba(0,0,0,0.2)} .mainMovieSlider .slick-prev, .mainMovieSlider .slick-next, .mainNewShopSlider .slick-prev, .mainNewShopSlider .slick-next, .routesWrap .slick-prev, .routesWrap .slick-next, .artSlider .slick-prev, .artSlider .slick-next{width: 22px; height: 32px; background-size:cover !important;} .mainMovieSlider .slick-prev, .mainNewShopSlider .slick-prev, .routesWrap .slick-prev, .artSlider .slick-prev{left: -40px; background:url(/eng/share_element/img/svg/icon-arrow_left.svg) no-repeat center center;} .mainMovieSlider .slick-next, .mainNewShopSlider .slick-next, .routesWrap .slick-next, .artSlider .slick-next{right: -40px; background:url(/eng/share_element/img/svg/icon-arrow_right.svg) no-repeat center center;} .mainMovieSlider .slick-prev::before, .mainMovieSlider .slick-next::before, .mainNewShopSlider .slick-prev::before, .mainNewShopSlider .slick-next::before, .routesWrap .slick-prev::before, .routesWrap .slick-next::before, .artSlider .slick-prev::before, .artSlider .slick-next::before{display: none} .mainNewShopItem > div{float: left;} .mainNewShopItem .content{text-align:center; padding:40px 0; width: 550px; background: url(/eng/share_element/img/bg_news.jpg) no-repeat center center; background-size:cover !important; height: 286px;} .mainNewShopItem .content p.highlight{font-size: 44px; font-weight: 300; text-transform: uppercase; color:#c77900; margin-bottom: 20px;} html[lang=zh-hk] .mainNewShopItem .content p.highlight, html[lang=zh-cn] .mainNewShopItem .content p.highlight{ margin-bottom: 0; } .mainNewShopItem .content p.highlight span{font-weight: 500} .mainNewShopItem .content h2{text-transform: uppercase; position: relative; padding-bottom: 15px; margin-bottom:15px;} .mainNewShopItem .content h2::after{content:""; width: 35px; height: 1px; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); background-color: #c77900;} .mainNewShopItem .content .info{margin-bottom: 20px;} .mainNewShopItem .thumb{width: 430px; height: 286px; background-color:#f6f1eb; position: relative; overflow:hidden;} .mainNewShopItem .thumb img{max-width: 100%; position: absolute; left: 50%; top: 50%; max-height: 100%; transform: translate(-50%,-50%);} #movie{margin-top: 69px;} #movie .wrap h2{text-align: center; margin-bottom: 40px;} #movie .mainMovieSlider{width: 1020px; margin: 0 auto 50px auto; } #movie .mainMovieSlider .movieItem{ position: relative; padding: 0 23px; height: 320px; overflow: hidden;} #movie .mainMovieSlider .movieItem a{outline: none;} #movie .mainMovieSlider .movieItem .thumb{width: 209px; height: 297px; overflow: hidden; position: relative;} #movie .mainMovieSlider .movieItem .thumb img{max-width: 100%;} #movie .mainMovieSlider .movieItem .shareWrap{position: absolute; right: 23px; bottom: 0; width: 100%; height: 41px;} #movie .mainMovieSlider .movieItem .btnShare{outline:none; width: 41px; height: 41px; border-radius: 50%; text-indent: -99999px; position: absolute; right: 0; bottom: 0; background:#fff url(/eng/share_element/img/svg/icon-share.svg) no-repeat center center; background-size: 21px 21px; z-index: 9;} #movie .mainMovieSlider .movieItem ul{ overflow:hidden; position: absolute;right: 0; bottom: -150px; transition: all 0.5s ease} #movie .mainMovieSlider .movieItem ul.show{bottom: 18px} #movie .mainMovieSlider .movieItem ul li{display: block; margin-bottom: 5px;} #movie .mainMovieSlider .movieItem ul li a{text-indent:-9999px; width: 41px; height: 41px; border-radius: 50%; background-color:#fff; display: block;} #movie .mainMovieSlider .movieItem ul li a.icon{background-repeat:no-repeat; background-size: 25px 25px; background-position: center center} #movie .mainMovieSlider .movieItem ul li a.icon.wechat{background-image: url(/eng/share_element/img/svg/icon-wechat_green.svg)} #movie .mainMovieSlider .movieItem ul li a.icon.whatsapp{background-image: url(/eng/share_element/img/svg/icon-whatsapp.svg)} #movie .mainMovieSlider .movieItem ul li a.icon.facebook{background-image: url(/eng/share_element/img/svg/icon-facebook_blue.svg)} #movie .btnWrap{text-align: center; margin: 20px auto 50px auto} /*#mainSlider a img{ position:absolute; float:none; width:auto; height:auto; max-height:100%; left:50%; top:50%; transform:translate(-50%, -50%);} */ #planYourVisit .wrap{width: 1100px;} #planYourVisit .thumb{position: absolute; left: 20px; top: 160px;} #planYourVisit .thumb img{width: 100%;} #planYourVisit .content{width: 640px; height: 370px; background-color: #f6f1eb; float:right; margin-top: 45px; padding:45px 0 0 85px; text-align: center;} #planYourVisit .content h2{margin-bottom: 40px;} #planYourVisit .content h3{color: #c77900; font-size: 24px; font-family: 'Ubuntu Condensed', sans-serif; font-weight: 400} html[lang=zh-hk] #planYourVisit .content h3{font-family: sans-serif,"Microsoft JhengHei", "微軟正黑體";} #planYourVisit{margin-bottom:40px;} #planYourVisit .content p{font-size:16px; margin-bottom: 50px;} #planYourVisit .locationItem{list-style-type: none; padding: 0 60px;} #planYourVisit .locationItem li{width: 50%; float: left; text-align: left; margin-bottom: 30px;} #planYourVisit .locationItem li a{height:25px; line-height:25px; display:block; background-size:27px 27px; background-repeat: no-repeat; padding-left:45px; text-decoration: underline; color: #c77900; font-size: 18px; font-weight: 300;} #planYourVisit .locationItem li a:hover{text-decoration: none;} #planYourVisit .locationItem li a.transportation{background-image:url(/eng/share_element/img/svg/icon-main_trans.svg);} #planYourVisit .locationItem li a.around{background-image:url(/eng/share_element/img/svg/icon-main_man.svg)} #planYourVisit .locationItem li a.floorplan{background-image:url(/eng/share_element/img/svg/icon-main_spot.svg)} #planYourVisit .locationItem li a.wifi{background-image:url(/eng/share_element/img/svg/icon-main_wifi.svg)} .footerBar{ height: 53px; line-height: 53px; background: #c77900; background: -moz-linear-gradient(left, #c77900 1%, #ed9000 100%); background: -webkit-linear-gradient(left, #c77900 1%,#ed9000 100%); background: linear-gradient(to right, #c77900 1%,#ed9000 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c77900', endColorstr='#ed9000',GradientType=1 ); color: #fff; } .footerBar p{display: inline-block; height: 53px; float: left; text-transform: uppercase; margin-right: 10px; line-height: 53px; font-size: 16px;} .followUs{text-align: left; display: inline-block; height: 53px; float:left; } .followUs li{display: inline-block; height: 53px; margin: 0 6px;position: relative;} .wechatQRcode{opacity: 0; transition: opacity 0.2s ease; position: absolute; top: -119px; z-index:-1; left:50%; transform: translateX(-50%); width: 119px; box-shadow: 0px 3px 12px rgba(0,0,0,0.3)} .selected .wechatQRcode{opacity: 1; left: 50%; z-index:99; } .wechatQRcode img{position: relative; z-index: 99} .wechatQRcode::after{content:""; width: 24px; height: 24px; background-color: #fff; position: absolute; left: 50%; bottom: -12px; transform:rotate(45deg) translateX(-50%); box-shadow: 0px 3px 12px rgba(0,0,0,0.3)} .followUs li a.icon{display: block; width: 23px; height: 53px; text-indent: -9999px; background-position:center center; background-repeat:no-repeat;} .followUs li a.icon.facebook{background-image: url(/eng/share_element/img/svg/icon-facebook.svg); background-size: auto 18px; } .followUs li a.icon.instagram{background-image: url(/eng/share_element/img/svg/icon-instagram.svg); background-size: auto 20px;} .followUs li a.icon.wechat{background-image: url(/eng/share_element/img/svg/icon-wechat.svg); background-size: auto 22px; margin-left: 5px} .footerBar .appBtn {height: 53px; display: inline-block;background-repeat:no-repeat; background-position: center center; text-indent: -9999px; float:left; } .footerBar .appBtn.appStore{background-image:url(/eng/share_element/img/svg/icon-appstore.svg); width: 120px; background-size: 100% 33px;} .footerBar .appBtn.googleplay{background-image:url(/eng/share_element/img/svg/icon-googleplay.svg); width: 120px; background-size: 100% 33px;} .footerBar .wrap{/*width: 1280px;*/ padding: 0 20px; line-height: normal; font-size: 0;} .footerBar .wrap > .col3 {text-align: left;} .footerBar .wrap > .col5 {margin:0 0 0 2.5%;} .footerBar .wrap > .col4 {text-align: right;} .footerBar a.arrowBtn{color: #fff; height: 53px; line-height: 53px; padding-right: 35px; position: relative; font-size:16px;} .footerBar a.arrowBtn::before, .footerBar a.arrowBtn::after { right: 0; top: 50%; transform: translateY(-50%); position: absolute; width: 0; height: 0; content: ""; display: block; border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-left: 13px solid #fff; transition: all 0.2s ease; } .footerBar a.arrowBtn::before { right: 10px; opacity: 0.3; } .footerBar a.arrowBtn:hover::before { right: 0px; opacity: 1; } .footerMenu{width: 100%; clear: left; text-align: left; background-color: #f3f3f3; padding: 25px 0;} .footerMenu ul{list-style-type: none; width: 200px; display:inline-block; vertical-align: top} .footerMenu ul li a{text-align: left; color:#464646;} .footerMenu ul li a:hover{color: #c77900} .footerMenu ul li{margin-bottom: 15px;} .footerMenu .last{text-align: right; line-height: 150%; color: #464646} .footerMenu .last a{color: #464646} .footerBottom .footerMenu{list-style-type: none; text-align: center; background:none; padding: 0;} .footerBottom{text-align: center; clear: both;} .footerBottom img{width: 147px; margin: 15px 0} .footerBottom .footerMenu li{display: inline-block; margin: 8px; position: relative;} .footerBottom .footerMenu li::after{content:""; width: 1px; height: 80%; background-color: #464646; position: absolute; right: -8px; top: 50%; transform:translateY(-50%);} .footerBottom .footerMenu li:last-child::after{display:none;} .footerBottom .footerMenu li a{ color: #464646} .footerBottom .footerMenu li a:hover, .footerMenu .last a:hover{color: #c77900} .rowBox { position:relative; width:100%; min-height:200px; margin-bottom:1px; } .btnBackToTop{transition:none; text-indent:-9999px; border-radius: 50%; display:none; background:rgba(81,81,81,0.5) url(/eng/share_element/img/btntotop.png) no-repeat center center; z-index:999999; position: fixed; bottom: 30px; right: 20px; width: 50px; height: 50px;} .btnScrollDown{transition:none; text-indent:-9999px; border-radius: 50%; display:none; background:rgba(81,81,81,0.5) url(/eng/share_element/img/btnscrollDown.png) no-repeat center center; z-index:999999; position: fixed; bottom: 30px; right: 20px; width: 50px; height: 50px;}} .row1 {background-color:#ddd;} .row2 {background-color:#eee;} .row3 {background-color:#ddd;} .colContainer { padding: 10px 0;} .animated{ -webkit-animation-duration: 0.8s; animation-duration: 0.8; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .innerBanner{ height:260px; position:relative; width: 100%; background-position: center center; background-size:cover !important; background-repeat: no-repeat;} .innerBanner.small, .innerBanner.promotions{height: 260px;} .innerBanner.titleOnly{background-color: #f6f1eb; height: 146px;} .innerBanner.titleOnly .wrap h1{color: #222; font-size: 32px;} .innerBanner .wrap{position: absolute; left: 50%; top: 50%; transform:translate(-50%, -50%); text-align: center;} .innerBanner .wrap > *{opacity: 0;} .innerBanner .wrap.hidden h1{font-size: 0;} .innerBanner .wrap h1{display: block; width: 100%; color: #fff; font-size: 48px; font-weight: 300} .innerBanner .wrap .searchBar{line-height:71px; position:relative; width: 786px; border-radius: 6px; height: 71px; background-color: #fff; padding: 0 26px; margin: 48px auto 0 auto;} .innerBanner .wrap .searchBar input{outline:none; width: calc(100% - 20px); font-size: 16px; color: #464646; display: inline-block} .innerBanner .wrap .searchBar input::placeholder{color: #464646} .innerBanner .wrap .searchBar input[type=submit]{cursor:pointer; width: 13px; height: 13px; border-top:2px solid #c77900; border-right:2px solid #c77900; position: relative; display: inline-block; text-indent: -9999px; position: absolute; right:30px; top:50%; transform: rotate(45deg) translateY(-50%); background:none;} /* .contentArea (for CMS content) ----------------------------------------------------------------------------------------------------*/ .contentArea h2 {padding:20px 0 10px; } .contentArea h3 {padding:10px 0;} .contentArea p {padding-bottom:20px; line-height:150%; font-weight: 300; font-size: 16px;} .contentArea b{font-weight: 400;} .contentArea img {width:auto; float:left; margin:0 15px 5px 0; } .contentArea img.imgRight { float:right; margin:0 0 5px 15px; } .contentArea ul { clear:both; padding:0 0 10px 18px;} .contentArea ul li{ list-style-type:disc; list-style-position:outside; padding:0 0 20px 0;font-weight: 300;} .contentArea .genTable{margin-bottom: 30px;} .contentArea .genTable td, .contentArea .genTable th {border:1px solid #e1e1e1; padding:10px; background-color:white; text-align:left; vertical-align:top; } .contentArea .genTable th { background-color:#b4a68f; color:#fff; font-weight: 400} .contentArea .btn-holder{margin:40px 0;} .contentArea ol{margin-left: 23px;} .contentArea ol li{line-height: 150%; font-weight: 300; font-size: 16px; margin-bottom: 30px;} .mobileMenu{ display:none; } .listing .wrap, .resultList .wrap, .subFilter .wrap{width: 1100px; padding:0;} .resultList .wrap{padding: 0 23px;} .filterTab{list-style-type: none; width: 100%; display: block; overflow: hidden;} .filterTab li{list-style-type: none; float: left;} .filterTab > li > a{font-size: 18px; color: #222; display: block; line-height: 56px; padding:0 23px;} .filterTab > li > a:hover, .filterTab > li.selected > a{background-color: #b4a68f; color: #fff;} .filterContentWrap{width: 100%; background-color: #b4a68f; padding: 10px 0 0 0;} .filterContentWrap ul{list-style-type: none} .filterContentWrap ul li {display: inline-block; margin-bottom:8px;} .filterContentWrap ul li a{font-size:16px; color: #fff; padding: 0 14px; border-radius: 30px; line-height: 35px; display: block; width: 100%;} .filterContentWrap ul li.selected a, .filterContentWrap ul li a:hover{background-color: #c77900;} .filterContentWrap .filterContent{padding:0 23px;} .resultList .wrap .itemWrap:first-child{border-top: 1px solid #e1e1e1;} .resultList .wrap .itemWrap .logoWrap div{ border: 1px solid #ccc; text-align: center; padding: 10px !important; font-size: 12px; height: auto; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .shopInfoWrap .shopLogoWrap div{ border: 1px solid #ccc; text-align: center; padding: 10px; font-size: 12px; height: auto; } .resultList .wrap .itemWrap .logoWrap{position: relative; padding-bottom:7.4%;} .resultList .wrap .itemWrap .logoWrap img{position: absolute; left:50%; top:50%; transform:translate(-50%, -50%);} .resultList .wrap .itemWrap img{width: auto; max-width: 70px;} .resultList .wrap .itemWrap div:not(.logoWrap){padding:30px 0;} .resultList .wrap .itemWrap{transition:background 0.2s ease;padding: 10px 0; border-bottom:1px solid #e1e1e1; overflow: hidden;} .resultList .wrap .itemWrap img{width: auto;} .resultList .wrap .itemWrap a{display: block; position: relative; width:100%; overflow: hidden; color: #222; padding: 0 30px;} .resultList .wrap .itemWrap{position: relative;} .resultList .wrap .itemWrap a::after{position: absolute; right: 10px; top:50%;transition:opacity 0.2s ease; transform: translateY(-50%); opacity:0; display: block; width: 16px; height: 24px; background:url(/eng/share_element/img/svg/icon-arrow_right.svg) no-repeat center center; background-size:cover !important; content:"";} .resultList .wrap .itemWrap a:hover::after{opacity: 1;} .resultList .wrap .itemWrap .last{text-align:right; padding-right: 33px} .resultList .wrap .itemWrap:hover{background-color: #f6f1eb; } .subFilter{background-color: #fff; border-bottom:1px solid #e1e1e1; margin-bottom: 40px;} .subFilter ul{list-style-type: none; display: none; } .subFilter a.filter{padding:0 23px; font-size:18px; color: #222; display: block; width: 100%; line-height: 55px; height: 55px; } .subFilter a.filter.alphabet{background: url(/eng/share_element/img/svg/icon-directory_alphabet.svg) no-repeat right 23px center; background-size: 27px auto} .subFilter a.filter.area{background: url(/eng/share_element/img/svg/icon-directory_zone.svg) no-repeat right 23px center; background-size:25px auto } .subFilter a.filter.area::after{height: calc(100% - 20px); position: absolute; right: -2.7118644%; top:50%; transform: translateY(-50%); content:""; width: 1px; background-color: #e1e1e1} .subFilter .areaFilter, .subFilter .alphabetFilter{width:100%; position: absolute;left: 0; top: 100%; z-index: 99; background-color: #fff; box-shadow: 0 3px 12px rgba(0,0,0,0.2)} .subFilter .alphabetFilter{padding: 15px;} .subFilter .areaFilter a{display: block; line-height: 55px; padding: 0 23px; font-size: 18px; color: #222; border-bottom:1px solid #e1e1e1;} .subFilter .areaFilter a:hover, .subFilter .areaFilter li.selected a{ background: #c77900; background: -moz-linear-gradient(left, #c77900 1%, #ed9000 100%); background: -webkit-linear-gradient(left, #c77900 1%,#ed9000 100%); background: linear-gradient(to right, #c77900 1%,#ed9000 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c77900', endColorstr='#ed9000',GradientType=1 ); color: #fff; } .subFilter .areaFilter li:last-child a{border-bottom:none;} .subFilter .alphabetFilter li{ line-height: 35px; font-size: 18px; padding: 0 5px; display: inline-block; } .subFilter .alphabetFilter li a{color: #222} .subFilter .alphabetFilter li.selected a, .subFilter .alphabetFilter li a:hover{color:#c77900;} .subFilter .subFilterWrap{position: relative;} .filterWrap .filterBtn, .filterContent .filterItemBtn{font-size:16px; position:relative; color: #fff; line-height: 55px; border-bottom:1px solid #e1e1e1; display: none;} .shopInfoWrap{width: 100%; overflow: hidden; margin: 0 auto 50px auto; font-size: 16px; font-weight: 300;} .shopInfoWrap h3{font-size:18px; font-weight: 300; text-transform: uppercase;} .shopInfoWrap .infoCol{padding-left: 15px; border-left:1px solid #e1e1e1;} .shopInfoWrap .shopNameWrap{margin-bottom: 40px;} .shopInfoWrap .linkWrap{text-align: right;} .shopDetail .wrap{max-width: 1060px; padding: 0;} .shopDetail .shopInfoBox{display: none !important} .shopDetail .contentWrap{height: 454px; margin-bottom: 44px;} .shopDetail .contentWrap.extended{height: auto; overflow: hidden;} .shopDetail .contentWrap .left,.shopDetail .contentWrap .right{float: left; height: 100%;} .shopDetail .contentWrap .left{width: 680px; margin-right: 40px; position: relative; overflow: hidden; height: 453px; background-color: #f6f1eb;} .shopDetail .contentWrap .left img{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 100%} .shopDetail .contentWrap .right{width: calc(100% - 720px); position: relative;} .shopDetail .contentWrap.extended .right img{position: relative;} .shopDetail .contentWrap .right img{position: absolute; bottom: 0; left: 0; width:100%;} .shopDetail .contentWrap .right p{line-height: 150%; font-size: 16px; font-weight: 300; margin-bottom: 21px;} .shopDetail .shopInfoBox, .shopDetail .shophover{display: none !important} .btnShowMore{margin-bottom:30px; display:block; width:100%; margin-top:15px; color: #c77900 !important; font-size: 16px; font-weight: normal; text-decoration: underline !important;} .btnShowMore:hover{text-decoration:none !important;} .floorWrap{background-color: #f6f1eb; position: relative; width: 100%; height: 596px; overflow:hidden; } .floorWrap span.remark{font-size: 18px; opacity: 0.5; position: absolute; z-index: 99; right: 20px; bottom: 20px;} a.zoomBtn { position: absolute; right: 20px; width: 40px; height: 40px; background-size: cover !important; font-size:0;} .zoomInBtn{background: url(/eng/share_element/img/icon-floorplan_zoomin.png) no-repeat center center; top:20px;} .zoomOutBtn{background: url(/eng/share_element/img/icon-floorplan_zoomout.png) no-repeat center center; top:80px;} .mapContainer img.mapPointer{position: absolute;} .mapContainer img.map{position: absolute; display: block; width: auto; height: auto;} .mapContainer{position: absolute; cursor: move; cursor: grab; cursor: -moz-grab; cursor: -webkit-grab; display: block; touch-action: none;-ms-touch-action: none;} .mapContainer a.shophover{position: absolute;} .shopInfoBox{width:184px; padding:10px 0; text-align:center; position: absolute; z-index: 100; border-radius: 10px; box-shadow: 0 3px 12px rgba(0,0,0,0.2); background-color: #fff; border:1px solid #c77900; display: none; } .shopInfoBox .name{padding:0 10px; display: block; text-align: center; color: #c77900; margin-bottom: 10px; font-size: 16px;} .shopInfoBox .shopNum{color: #222; font-size: 16px;} .shopInfoBox::before{content:""; display:block; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 14px solid #c77900; position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%);} .shopInfoBox::after{content:""; display:block; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 14px solid #fff; position: absolute; bottom: -13px; left: 50%; transform: translateX(-50%);} .btnContact{transition: background 0.2s ease; width: 100%; text-align: center; color: #fff !important; background-color: #c77900; line-height: 44px; height: 44px; margin-top:18px;} .btnContact:hover{background-color: #a26301} .mapdata{display: none;} .floorplan .floorWrap .mapPointer{visibility: hidden;} .mapContainer img.mapPointer{position: absolute; width: 47px; height: 70px; left: 1000px; top: 500px; display: block} .floorplan a.zoomBtn{right: auto; left: 20px;} .floorplan #container{height: 100vh;margin-bottom:0} .floorplan .zoomInBtn{top: 260px} .floorplan .zoomOutBtn{top: 320px} .floorplan #header, .floorplan footer{display: none;} .floorplan .main > .wrap{max-width: 100%; padding: 0;} .floorplan .floorWrap{height: calc(100vh - 188px)} .floorplanHead{padding:0 45px; height: 87px; width: 100%; overflow: hidden; line-height: 87px;} .btnBack{font-size: 18px; color: #222 !important; transition: all 0.2s ease; padding-left: 30px; position: relative; text-decoration: underline !important; text-transform: uppercase;} .btnBack::before{transition: all 0.2s ease; width: 10px; height: 10px; border-width: 2px 0 0 2px; border-style:solid; border-color: #222; transform: translateY(-50%) rotate(-45deg); position: absolute; left: 0; top: 50%; content:"";} .btnBack:hover::before{left: 12px} .btnBack:hover{text-decoration: none !important;} .floorplanFooter{position: fixed;bottom: 0; left: 0; width: 100%; height: 101px; text-align: center } .floorBtnGrp{margin: 0 auto;} .legendBoxWrap{ text-align:left; display:none; overflow: auto;position: absolute; right: 0; bottom: 101px; height:calc(100vh - 188px); z-index: 99; width: 338px; background-color: #fcf9f5 } .floorplanFooter.showInfo::after{content:""; position: absolute; top: 0; right: 40px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 15px solid #f8f2e9;} .legendBoxInner{width: 100%; position: relative;} .legendBoxWrap ul{list-style: none} .floorBtnGrp{text-align: center;} .floorplanFooter a.btnInfo{width:9px; height:23px; display:block; background:url(/eng/share_element/img/svg/icon-flootplan_info.svg) no-repeat center center; background-size:cover !important; font-size:0; position: absolute; right: 45px; top:50%; transform: translateY(-50%); z-index: 99} .floorBtnGrp a{margin: 17px 23px 0 23px; display: inline-block; width: 121px; height: 65px; position:relative; background-repeat: no-repeat; background-size: 86px 47px !important; background-position: center top} .floorBtnGrp a span{position: absolute; bottom: -5px; font-size:18px; left: 50%; color:#222; transform: translateX(-50%);} .floorBtnGrp a:first-child {background-image:url(/eng/share_element/img/thumbnail-floorplan_RF_off.png);} .floorBtnGrp a:nth-child(2) {background-image:url(/eng/share_element/img/thumbnail-floorplan_2F_off.png);} .floorBtnGrp a:nth-child(3) {background-image:url(/eng/share_element/img/thumbnail-floorplan_1F_off.png);} .floorBtnGrp a:last-child {background-image:url(/eng/share_element/img/thumbnail-floorplan_GF_off.png);} .floorBtnGrp a.active:first-child {background-image:url(/eng/share_element/img/thumbnail-floorplan_RF_on.png);} .floorBtnGrp a.active:nth-child(2) {background-image:url(/eng/share_element/img/thumbnail-floorplan_2F_on.png);} .floorBtnGrp a.active:nth-child(3) {background-image:url(/eng/share_element/img/thumbnail-floorplan_1F_on.png);} .floorBtnGrp a.active:last-child {background-image:url(/eng/share_element/img/thumbnail-floorplan_GF_on.png);} .legandTitle{background-color: #b4a68f; color: #fff; display: block; padding: 0 15px; line-height: 50px; height: 50px; font-size: 24px; font-family: 'Ubuntu Condensed', sans-serif; font-weight: 400} .legendBoxWrap .btnClose{font-size: 0; width: 16px; height: 16px; font-size: 0; background:url(/eng/share_element/img/icon-close.png) no-repeat center center; position: absolute; right: 15px; top:18px;} .legendBoxWrap ul li{ min-height: 40px; padding: 15px 15px 15px 55px; background-repeat: no-repeat; background-position: left 15px center; background-size:28px 28px;} .legendBoxWrap ul li:nth-child(even){background-color: #f8f2e9;} .zoneList li:first-child{background-image: url(/eng/share_element/img/signate-floorplan_metal.png);} .zoneList li:nth-child(2){background-image: url(/eng/share_element/img/signate-floorplan_wood.png);} .zoneList li:nth-child(3){background-image: url(/eng/share_element/img/signate-floorplan_water.png);} .zoneList li:nth-child(4){background-image: url(/eng/share_element/img/signate-floorplan_fire.png);} .zoneList li:nth-child(5){background-image: url(/eng/share_element/img/signate-floorplan_earth.png);} .FSList li:first-child{background-image: url(/eng/share_element/img/signate-floorplan_hsr.png);} .FSList li:nth-child(2){background-image: url(/eng/share_element/img/signate-floorplan_airport_express.png);} .FSList li:nth-child(3){background-image: url(/eng/share_element/img/signate-floorplan_mtr.png);} .FSList li:nth-child(4){background-image: url(/eng/share_element/img/signate-floorplan_concierge.png);} .FSList li:nth-child(5){background-image: url(/eng/share_element/img/signate-floorplan_south_parking.png);} .FSList li:nth-child(6){background-image: url(/eng/share_element/img/signate-floorplan_north_parking.png);} .FSList li:nth-child(7){background-image: url(/eng/share_element/img/signate-floorplan_atm.png);} .FSList li:nth-child(8){background-image: url(/eng/share_element/img/signate-floorplan_taxi.png);} .FSList li:nth-child(9){background-image: url(/eng/share_element/img/signate-floorplan_washroom.png);} .FSList li:nth-child(10){background-image: url(/eng/share_element/img/signate-floorplan_washroom_2.png);} .FSList li:nth-child(11){background-image: url(/eng/share_element/img/signate-floorplan_washroom_3.png);} .FSList li:nth-child(12){background-image: url(/eng/share_element/img/signate-floorplan_redemption.png);} .FSList li:nth-child(13){background-image: url(/eng/share_element/img/signate-floorplan_parking_redemption.png);} .FSList li:nth-child(14){background-image: url(/eng/share_element/img/signate-floorplan_baby_room.png);} .FSList li:nth-child(15){background-image: url(/eng/share_element/img/signate-floorplan_lift.png);} .FSList li:nth-child(16){background-image: url(/eng/share_element/img/signate-floorplan_escalator.png);} .FSList li:nth-child(17){background-image: url(/eng/share_element/img/signate-floorplan_transport.png);} .FSList li:nth-child(18){background-image: url(/eng/share_element/img/signate-floorplan_locker.png);} .FSList li:nth-child(19){background-image: url(/eng/share_element/img/signate-floorplan_tourist.png);} .FSList2 li:first-child{background-image: url(/eng/share_element/img/signate-floorplan_hsr.png);} .FSList2 li:nth-child(2){background-image: url(/eng/share_element/img/signate-floorplan_airport_express.png);} .FSList2 li:nth-child(3){background-image: url(/eng/share_element/img/signate-floorplan_mtr.png);} .FSList2 li:nth-child(4){background-image: url(/eng/share_element/img/signate-floorplan_concierge.png);} .FSList2 li:nth-child(5){background-image: url(/eng/share_element/img/signate-floorplan_south_parking.png);} .FSList2 li:nth-child(6){background-image: url(/eng/share_element/img/signate-floorplan_north_parking.png);} .FSList2 li:nth-child(7){background-image: url(/eng/share_element/img/signate-floorplan_atm.png);} .FSList2 li:nth-child(8){background-image: url(/eng/share_element/img/signate-floorplan_taxi.png);} .FSList2 li:nth-child(9){background-image: url(/eng/share_element/img/signate-floorplan_washroom.png);} .FSList2 li:nth-child(10){background-image: url(/eng/share_element/img/signate-floorplan_baby_room.png);} .FSList2 li:nth-child(11){background-image: url(/eng/share_element/img/signate-floorplan_lift.png);} .FSList2 li:nth-child(12){background-image: url(/eng/share_element/img/signate-floorplan_transport.png);} .FSList2 li:nth-child(13){background-image: url(/eng/share_element/img/signate-floorplan_locker.png);} .FSList2 li:nth-child(14){background-image: url(/eng/share_element/img/signate-floorplan_tourist.png);} .floorplan .btnScrollDown{display: none !important} .shopDetail .btnContact{display: none;} .transportation .wrap{text-align: center;} .transportation .wrap h2{margin: 0 auto 60px auto; padding-top: 0;} .transportation .wrap .transportationTab{list-style-type: none;} .transportationTab li a{ position:relative; display: block; height: 127px; padding:45px 0 0 0; font-size: 18px; font-weight: 300; color: #222} .transportationTab li{outline:none; display: inline-block; margin: 0 10px; width: 125px; vertical-align: top; background-position:center top; background-size:auto 27px; background-repeat:no-repeat; } .transportationTab li:first-child {background-image: url(/eng/share_element/img/svg/icon-transport_bus.svg) , url(/eng/share_element/img/svg/icon-transport_bus_active.svg)} .transportationTab li:nth-child(2) {background-image: url(/eng/share_element/img/svg/icon-transport_minibus.svg),url(/eng/share_element/img/svg/icon-transport_minibus_active.svg)} .transportationTab li:nth-child(3) {background-image: url(/eng/share_element/img/svg/icon-transport_airport_bus.svg),url(/eng/share_element/img/svg/icon-transport_airport_bus_active.svg)} .transportationTab li:nth-child(4) {background-image: url(/eng/share_element/img/svg/icon-transport_hsr.svg), url(/eng/share_element/img/svg/icon-transport_hsr_active.svg)} .transportationTab li:nth-child(5) {background-image: url(/eng/share_element/img/svg/icon-transport_mtr.svg),url(/eng/share_element/img/svg/icon-transport_mtr_active.svg)} .transportationTab li:nth-child(6) {background-image: url(/eng/share_element/img/svg/icon-transport_driver.svg),url(/eng/share_element/img/svg/icon-transport_driver_active.svg)} .transportationTab li:first-child.selected, .transportationTab li:first-child:hover{background-image: url(/eng/share_element/img/svg/icon-transport_bus_active.svg)} .transportationTab li:nth-child(2).selected, .transportationTab li:nth-child(2):hover{background-image: url(/eng/share_element/img/svg/icon-transport_minibus_active.svg)} .transportationTab li:nth-child(3).selected, .transportationTab li:nth-child(3):hover{background-image: url(/eng/share_element/img/svg/icon-transport_airport_bus_active.svg)} .transportationTab li:nth-child(4).selected, .transportationTab li:nth-child(4):hover{background-image: url(/eng/share_element/img/svg/icon-transport_hsr_active.svg)} .transportationTab li:nth-child(5).selected, .transportationTab li:nth-child(5):hover{background-image: url(/eng/share_element/img/svg/icon-transport_mtr_active.svg)} .transportationTab li:nth-child(6).selected, .transportationTab li:nth-child(6):hover{background-image: url(/eng/share_element/img/svg/icon-transport_driver_active.svg)} /*for tourist*/ .tourist .transportationTab li:first-child {background-image: url(/eng/share_element/img/svg/icon-transport_mtr.svg) , url(/eng/share_element/img/svg/icon-transport_mtr_active.svg)} .tourist .transportationTab li:nth-child(2) {background-image: url(/eng/share_element/img/svg/icon-transport_itt.svg),url(/eng/share_element/img/svg/icon-transport_itt_active.svg)} .tourist .transportationTab li:nth-child(3) {background-image: url(/eng/share_element/img/svg/icon-transport_airport.svg),url(/eng/share_element/img/svg/icon-transport_airport_active.svg)} .tourist .transportationTab li:nth-child(4) {background-image: url(/eng/share_element/img/svg/icon-transport_hsr.svg), url(/eng/share_element/img/svg/icon-transport_hsr_active.svg)} .tourist .transportationTab li:nth-child(5) {background-image: url(/eng/share_element/img/svg/icon-transport_cncoach.svg),url(/eng/share_element/img/svg/icon-transport_cncoach_active.svg)} .tourist .transportationTab li:first-child.selected, .tourist .transportationTab li:first-child:hover{background-image: url(/eng/share_element/img/svg/icon-transport_mtr_active.svg)} .tourist .transportationTab li:nth-child(2).selected, .tourist .transportationTab li:nth-child(2):hover{background-image: url(/eng/share_element/img/svg/icon-transport_itt_active.svg)} .tourist .transportationTab li:nth-child(3).selected, .tourist .transportationTab li:nth-child(3):hover{background-image: url(/eng/share_element/img/svg/icon-transport_airport_active.svg)} .tourist .transportationTab li:nth-child(4).selected, .tourist .transportationTab li:nth-child(4):hover{background-image: url(/eng/share_element/img/svg/icon-transport_hsr_active.svg)} .tourist .transportationTab li:nth-child(5).selected, .tourist .transportationTab li:nth-child(5):hover{background-image: url(/eng/share_element/img/svg/icon-transport_cncoach_active.svg)} .transportationTab li a::after{display:none;content:""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 15px solid #f6f1eb;} .transportationTab li:hover a::after, .transportationTab li.selected a::after{display: block;} .transportationTab li:hover a, .transportationTab li.selected a{color: #c77900} .transportation-content-wrap{background-color: #f6f1eb; margin-bottom: 40px;} .transportation-content table{margin-bottom: 30px;} .transportation-content p{line-height: 150%;} .transportation-content{display:none; width: 1060px; margin:0 auto; padding: 40px 0; text-align: left;} .transportation-content table td, .transportation-content table th, .nearbyWrap table td, .nearbyWrap table th{padding: 14px 20px; width: 33%; font-size: 16px;} .transportation-content table th, .nearbyWrap table th{border-bottom:1px solid #c77900; font-weight: 700} .transportation-content table td, .nearbyWrap table td{border-bottom:1px solid #e1e1e1;} .transportation-content table tbody tr:hover, .nearbyWrap table tbody tr:hover{background-color: #ede2d1} .transportation-content#mtr{text-align: center;} .transportation .mapWrap{width: 1060px; margin: 0 auto; position: relative; display:block !important} .transportation .btnEnlarge{position: absolute; right: 0; top: 0; display: block; color: #c77900; text-decoration: underline; font-size: 18px; font-weight: 300; padding: 20px 20px 20px 62px; background:#fff url(/eng/share_element/img/svg/icon-zoom.svg) no-repeat 20px 20px; background-size:32px 32px; } .transportation .btnEnlarge:hover{text-decoration: none;} .transportation .driverWrap{margin-bottom: 15px; border-bottom: 1px solid #e1e1e1; padding-bottom: 15px;} .transportation .driverWrap h3{color:#c77900; margin-bottom: 10px;} .transportation table .mobileThead{display: none;} .transportation-content#mtr a{width: auto; display: inline-block; margin: 0 auto;} .transportation-content#mtr a img{width: auto;} .tourist .transportation-content h2{font-weight:500; font-family: 'Ubuntu Condensed', sans-serif; color: #c77900; font-size:24px; margin-bottom: 32px;} .tourist .transportation-content p{font-size: 16px; margin-bottom: 40px;} .tourist .transportation-content{text-align: center;} .promotion .wrap{max-width: 1060px;} .promotion .promotionItem:first-child{border-top:1px solid #e1e1e1; margin-top: 50px;} .promotion .promotionItem{ border-bottom:1px solid #e1e1e1; overflow: hidden;} .promotion .promotionItem a{position:relative; display: block; width: 100%; color: #222; overflow: hidden;padding: 30px;} .promotion .promotionItem a::after{position: absolute; right: 12px; top:50%;transition:opacity 0.2s ease; transform: translateY(-50%); opacity:0; display: block; width: 16px; height: 24px; background:url(/eng/share_element/img/svg/icon-arrow_right.svg) no-repeat center center; background-size:cover !important; content:"";} .promotion .promotionItem a:hover::after{opacity: 1;} .promotion .promotionItem a:hover{background-color: #f6f1eb} .promotion .promotionItem a h2{letter-spacing:normal; color:#c77900; font-size: 24px; font-family: 'Ubuntu Condensed', sans-serif; margin-bottom: 30px} .promotion .promotionItem a p{line-height: 150%; font-size: 16px;} .tourists-information .wrap{max-width: 1060px; margin-top: 50px; position: relative; padding: 0;} .tourists-information .mainItemWrap{width: 640px; float: right;} .tourists-information .primaryItemWrap{position: absolute; left: 0; top: 0; width: 400px;} .primaryItemWrap .informationItem img{width: 100%;} .informationItem{position: relative;} .informationItem ul{list-style-type: none;} .tourists-information .mainItemWrap .informationItem img{position: relative; z-index: 8;} .tourists-information .primaryItemWrap .informationItem img{margin-bottom: 20px} .tourists-information .mainItemWrap .informationItem .cardContent{position:relative; z-index:9; width: calc(100% - 40px); margin: -40px auto 30px auto; background-color: #fff; padding: 15px 30px} .tourists-information .informationItem .cardContent h2{margin-bottom: 25px;} .tourists-information .informationItem .cardContent ul{margin-bottom: 30px;} .tourists-information .informationItem .cardContent ul li{margin-bottom: 10px;} .tourists-information .informationItem .cardContent a{ text-decoration:underline; font-size:18px; color: #c77900; font-weight: 300} .tourists-information .informationItem .cardContent a:hover{text-decoration: none} #topNav, .topSearchWrap {display: inline-block;} .topSearchWrap{text-align: left; position: relative; margin-right: 15px;} .topSearchWrap .btnClose{position: absolute; right: 10px; top: 10px; color: #222; font-size: 14px;} .searchTypeWrap{display:none; position: absolute; top: 30px; background-color: #fff; width: 100%; z-index: 99; padding: 0; box-shadow: 0 4px 6px rgba(0,0,0,0.1)} .searchTypeWrap label{font-size: 16px; display: block; margin: 0; cursor: pointer; padding: 12px } .topSearchWrap .searchFieldWrap{text-align: left; box-shadow: 0 0 3px 3px rgba(0,0,0,0.1); overflow: hidden;} .topSearchWrap input[type=text]{ border-radius: 0; width:200px; height: 30px; line-height: 30px; padding: 3px 6px; float: left; display: block;} .topSearchWrap input[type=submit]{ border-radius: 0; display: block; float:left; text-indent:-9999px; width:30px; height: 30px; background: #c77900 url(/eng/share_element/img/svg/icon-home_search_white.svg) no-repeat center center; background-size:18px 18px !important; border:0; cursor: pointer} #header .wrap > .topSearchWrap{float: right; margin: 40px 70px 0 0 } label.selected{background: #c77900; background: -moz-linear-gradient(left, #c77900 1%, #ed9000 100%); background: -webkit-linear-gradient(left, #c77900 1%,#ed9000 100%); background: linear-gradient(to right, #c77900 1%,#ed9000 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c77900', endColorstr='#ed9000',GradientType=1 ); color: #fff;} .mainMenu > li:nth-child(n+8){display: none;} .tourist #topNav .for-tourists, .tourists-landing #topNav .for-tourists{display: inline-block !important;} .tipsWrap .itemWrap{width: 445px;} .tipsWrap .itemWrap img{width: 100%; margin:0 !important; float: none;} .tipsWrap .itemWrap p{font-size: 16px; line-height: 150%;} .tipsWrap .itemWrap .directionWrap p{border-top: 1px solid #e1e1e1; padding-top: 20px; color: #464646; margin-top: 20px;} .tipsWrap .itemWrap .directionWrap .btnWrap{margin-top: 20px;} .tipsWrap {text-align: center;} .tipsWrap .wrap{ margin: 0 auto 0 auto} .tipsWrap .wrap h2{padding-top: 0;} .tipsWrap .routesWrap h2{padding-top:70px; position:relative; text-align:center; font-size: 36px; font-weight: 300; color: #c77900; margin-bottom: 30px;} .tipsWrap .routesWrap h2::before{content:""; position: absolute; width:100px; height: 70px; top: 0; left: 50%; transform: translateX(-50%); display: block; background-repeat: no-repeat; background-position: center center; background-size: 100% auto;} .tipsWrap .routesWrap h3{padding:0 !important; font-family: 'Ubuntu Condensed', sans-serif; font-size: 24px; color:#c77900; font-weight: 400; margin: 20px auto 30px auto} .tipsWrap .routesWrap{margin-bottom: 50px; padding: 50px 0; overflow: hidden;} .tipsWrap .routesWrap p{padding:0 20px;} .tipsWrap .routesWrap#city-leisure-walk{background-color: #f6f1eb; } .tipsWrap .routesWrap#spiritual-journey h2::before{background-image: url(/eng/share_element/img/svg/icon-travellers_spiritual.svg)} .tipsWrap .routesWrap#city-leisure-walk h2::before {background-image: url(/eng/share_element/img/svg/icon-travellers_city.svg)} .tipsWrap .routesWrap#family-fun h2::before {background-image: url(/eng/share_element/img/svg/icon-travellers_family.svg); background-size:auto 100%; } .tipsWrap .routesWrap#city-leisure-walk .itemWrap{background-color: #fff; padding-bottom: 20px;} .tipsWrap .introBox, .tipsWrap .nearbyWrap{text-align: left;} .tipsWrap .nearbyWrap table{margin-bottom: 48px} .tipsWrap .introBox{background-color: #f6f1eb; padding: 40px; margin:40px auto;} .tipsWrap .introBox h3{font-weight: 400; color: #c77900; font-size: 24px; font-family: 'Ubuntu Condensed', sans-serif;} .pageNav{padding:0 !important; z-index: 999; position: fixed; right: 67px; top:50% ; transform: translateY(-50%);} .pageNav::after{width: 100%; display: block; clear: both; float: left; content:""; } .pageNav::before{display:block; content:""; height: 100%; width: 1px; background-color: #e1e1e1; left: 50%; top: 0; transform: translateX(-50%); position: absolute;} .pageNav li{display: block; margin-bottom: 45px;} .pageNav li:last-child{margin-bottom: 0; padding-bottom: 0;} .pageNav li a{display: block; position: relative;} .pageNav li a:hover::before{background-color:#b4a68f;} .pageNav li.selected a::before{background-color:#c77900;} .pageNav li a::before{transition:background 0.2s ease; position:relative; z-index:9; content:""; display: block; width: 16px; height: 16px; border-radius: 50%; background-color: #222222;} .pageNav li a span{transition:opacity 0.2s ease; margin-right:10px; white-space:nowrap; opacity: 0; position: absolute; right:-300px; top: 50%; transform: translateY(-50%); background-color:#c77900; color: #fff; font-size:16px; font-weight: 300; height: 35px; padding: 0 15px; line-height: 35px; } .pageNav li a span::after{width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 10px solid #c77900; position:absolute; right: -10px; top:50%; transform: translateY(-50%); content:""; } .pageNav li a:hover span{ opacity: 1; right: 25px; } .routesWrap .slick-slide{ margin: 0 30px;} .routesWrap .slick-prev, .routesWrap .slick-next{z-index: 9999999;} .routesWrap .slick-slider{width:1060px; margin: 0 auto;} .hotelWrap{width: 820px; margin: 45px auto; text-align: left;} .hotelWrap .thumb{width: 50%; float: left; margin-bottom: 25px;} .hotelWrap img{width: 100%; margin: 0} .hotelWrap h3, .parking h3{font-size: 24px; font-weight: 400; color: #c77900; font-family: 'Ubuntu Condensed', sans-serif;} .parking .wrap{max-width: 1060px;} .parking .teslaWrap{text-align: center; background-color: #f6f1eb; margin:150px auto 35px auto; padding: 40px;} .parking .teslaWrap p{padding-bottom: 0;} .parking .teslaWrap img{float: none; margin:-150px auto 30px auto; } .parkingInfo{text-align: left;} .parkingInfo img{max-width: 100%; margin-bottom: 15px;} .parkingInfo p{clear: left;} .accordian {clear:left;} .accordian > a{display:block;font-size: 18px; font-weight: 300; color: #c77900; height: auto; padding:10px 30px 10px 0; border-bottom:1px solid #e1e1e1; margin-bottom: 30px; position: relative;} .accordian > a::before, .accordian > a::after{ content: ''; position: absolute; width: 15px; height: 2px; background-color: #c77900; border-top: none; border-left: none; right: 20px; top: 50%; transition: 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19) all;} .accordian > a::after{transform: rotate(90deg);} .accordian > a.on::after{display: none;} .accordian ul, .accordian ol, .accordian > p , .accordian > div{display: none;} .accordian ol{list-style-type: none; margin-left: 0;} .accordian ul li{ list-style-type: none; line-height: 150%; } .accordian ol li{padding-left:33px; line-height: 150%; counter-increment: step-counter; position: relative;} .accordian ol li::before { content: counter(step-counter)'.'; position: absolute; padding: 3px 8px; left: 0; top: -2px; } .accordian ul li:before{content:"\2022"; color: #c77900; font-weight: bold; display: inline-block; width: 1em; margin-left: -1em;} .services .wrap{max-width:1060px; text-align: center;} .services .wrap h2{ margin-bottom: 50px; } .services .wrap p{line-height: 150%; font-size: 16px; margin-bottom: 30px;} .lockerMapWrap{padding: 30px 50px; margin: 55px 0 0 0;width: 887px; position: relative; text-align: left; background-color: #f6f1eb;} .lockerMapWrap > img{height: 435px; } .lockerMapWrap .floorNum{display:inline-block; position: absolute; right: -80px; top: 50px; font-size: 60px; font-weight: 300; color: #c77900;} .services .wrap .thumb{width: 100%;} .services .wrap .thumb.float{width:auto; position:relative; z-index:99; padding: 40px 70px ; background-color: #b4a68f; float: right; margin-top: -271px;} .services .wrap .thumb.float img{width: 308px;} .centerImgWrap{text-align: center; margin-bottom: 40px;} .centerImgWrap img{width:308px; display: inline-block; margin: 0 10px;} .centerImgWrap .CMSRecord img{width: auto !important;} .boxedContent{background-color: #f6f1eb; padding: 35px 25px; text-align: left; overflow: hidden;} .services .wrap .boxedContent p{margin-bottom: 15px;} .boxedContent h3{margin-bottom: 25px} .boxedContent h3, .servicesWrap h3{font-size: 24px; font-weight: 400; color: #c77900; font-family: 'Ubuntu Condensed', sans-serif;} .servicesWrap h3{margin-bottom: 10px; clear: both;} ul.columnList{ display: table; width: 100%; overflow: hidden;} ul.columnList li{ display:inline-block; padding:12px 30px 12px 0; margin-left: 1em; float: left; text-align: left; width: calc(25% - 1em)} ul.columnList li::before{content:"\2022"; color: #c77900; font-weight: bold; display: inline-block; width: 1em; margin-left: -1em;} .servicesWrap ul.columnList li::before{display: none;} .servicesWrap ul.serviceList li{border-bottom:1px solid #e1e1e1; padding-left: 55px; background-repeat: no-repeat; background-position: left 10px top 30px; background-size: auto 24px } .serviceList{list-style-type: none; overflow: hidden; margin-bottom: 62px;} .serviceList li{text-align: left; padding: 30px 0 30px 50px; border-bottom:1px solid #e1e1e1;} .serviceList li.baby{background-image:url(/eng/share_element/img/svg/icon-concierge_baby_stroller.svg)} .serviceList li.shawl{background-image:url(/eng/share_element/img/svg/icon-concierge_shawl.svg)} .serviceList li.wheelchair{background-image:url(/eng/share_element/img/svg/icon-concierge_wheelchair.svg)} .serviceList li.pet{background-image:url(/eng/share_element/img/svg/icon-concierge_pet_stroller.svg)} .serviceList li.umbrella{background-image:url(/eng/share_element/img/svg/icon-concierge_umbrella.svg)} .serviceList li.local-fax{background-image:url(/eng/share_element/img/svg/icon-concierge_local_fax.svg)} .serviceList li.battery{background-image:url(/eng/share_element/img/svg/icon-concierge_mobile_battery.svg)} .serviceList li.mobile-phone{background-image:url(/eng/share_element/img/svg/icon-concierge_external_battery.svg)} .serviceList li.first-aid{background-image:url(/eng/share_element/img/svg/icon-concierge_first_aid.svg)} .serviceList li.lost-found{background-image:url(/eng/share_element/img/svg/icon-concierge_lost_found.svg)} .serviceList li.parking{background-image:url(/eng/share_element/img/svg/icon-concierge_parking_redeem.svg)} .serviceList li.self-service{background-image:url(/eng/share_element/img/svg/icon-concierge_locker.svg)} .serviceList li.blood{background-image:url(/eng/share_element/img/svg/icon-concierge_blood.svg)} .serviceList li.mailing{background-image:url(/eng/share_element/img/svg/icon-concierge_mailing.svg)} .serviceList li.maps{background-image:url(/eng/share_element/img/svg/icon-concierge_hkmap.svg)} .serviceList li.sewing{background-image:url(/eng/share_element/img/svg/icon-concierge_sewing.svg)} .serviceList li.facial{background-image:url(/eng/share_element/img/svg/icon-concierge_mask.svg)} .serviceList li.sick{background-image:url(/eng/share_element/img/svg/icon-concierge_sick_bag.svg)} .serviceList li.disposable{background-image:url(/eng/share_element/img/svg/icon-concierge_raincoats.svg)} .serviceList li.lens{background-image:url(/eng/share_element/img/svg/icon-concierge_lens_cleaning.svg)} .serviceList li.stroller{background-image:url(/eng/share_element/img/svg/icon-concierge_baby_stroller.svg)} .serviceList li.wifi{background-image:url(/eng/share_element/img/svg/icon-concierge_wifi.svg)} .serviceList li.general{background-image:url(/eng/share_element/img/svg/icon-concierge_enquiries.svg)} .serviceList li.Restaurant{background-image:url(/eng/share_element/img/svg/icon-concierge_restaurant.svg)} .serviceList li.events{background-image:url(/eng/share_element/img/svg/icon-concierge_news.svg)} .serviceList li.transportation{background-image:url(/eng/share_element/img/svg/icon-concierge_transportation.svg)} .about-us .wrap h2{text-align: center; margin:0 auto 45px auto} .about-us .wrap{max-width: 1060px; position: relative;} .about-us.about-elements .wrap::before, .about-us.about-elements .wrap::after, .about-us.guest-book .wrap::before{opacity:0.3; content:""; display: block; width: 729px; height: 682px; background:url(/eng/share_element/img/svg/logoGrpahic.svg) no-repeat center center; background-size:cover !important; position: absolute; z-index:1;} .about-us.about-elements .wrap::before{left: -25%; top: 350px;} .about-us.about-elements .wrap::after{right: -5%; top:1000px;} .about-us.guest-book .wrap::before{left: -25%; top: -100px; width: 906px; height: 848px;} .about-us .wrap .imgWrap{width: 100%;margin-bottom: 35px; position: relative; z-index: 2;} .about-us .wrap .aboutRow{position: relative; margin: 0 auto; clear: both;} .about-us .wrap .aboutRow::after{content:""; width: 100%; clear: both; display: block; } .about-us .wrap .aboutRow p{line-height: 150%; font-size:16px; font-weight: 300; position: relative; z-index: 3} .about-us .wrap .aboutRow .thumb img{max-width:100%;} .about-us .wrap .aboutRow.first .contentWrap{margin:0 auto; background-color: #c77900; color: #fff; width: 703px; height:405px; padding: 50px 284px 0 50px;} .about-us .wrap .aboutRow.first .thumb{position: absolute; width: 375px; height: 280px; right: 0; top: 75px;} .about-us .wrap .aboutRow.middle{width: 100%; margin: 96px 0 50px 0;} .about-us .wrap .aboutRow.middle .contentWrap{float: right; width: 404px; margin-right: 55px;} .about-us .wrap .aboutRow.middle .thumb{width: 516px; height: 388px; position: absolute; left: 0; top:-124px; z-index:9;} .about-us .wrap .aboutRow.last .contentWrap{margin:0 auto 116px auto; width: 940px; background-color: #f6f1eb; padding: 120px 549px 0 50px; height: 407px;} .about-us .wrap .aboutRow.last .thumb{z-index:2; width: 459px; height: 343px; position: absolute; right: 0; top: 116px;} .about-us .wrap .areaWrap *{ font-size: 16px; font-weight: 400} .about-us .wrap .areaWrap p{clear:left;} .about-us .wrap .areaWrap img{margin: 25px auto;} .about-us .wrap .areaWrap div{margin-bottom: 50px;} .about-us .wrap .areaWrap .icon{line-height:23px;height: 23px; color: #222; padding-left: 40px; background-position: left center; background-repeat:no-repeat; background-size:auto 100%;} .about-us .wrap .areaWrap .icon.water{background-image: url(/eng/share_element/img/signate-floorplan_water.png);} .about-us .wrap .areaWrap .icon.fire{background-image: url(/eng/share_element/img/signate-floorplan_fire.png);} .about-us .wrap .areaWrap .icon.metal{background-image: url(/eng/share_element/img/signate-floorplan_metal.png);} .about-us .wrap .areaWrap .mapWrap{background-color: #f6f1eb; text-align: center; padding: 20px; margin-top: 50px;} .about-us .wrap .areaWrap .mapWrap img{width: 434px;} .about-us.civic-square .wrap p, .about-us.guest-book .wrap p{line-height: 150%; font-size: 16px; text-align: center; margin-bottom: 85px;} .shopLogoWrap ul{overflow: hidden; width: 100%; margin-bottom: 60px; list-style-type: none;} .shopLogoWrap ul li{width:calc( 12.5% - 20px); margin:0 10px; float: left;} .shopLogoWrap ul li a{display: block; width: 100%; padding-bottom: 100%; position: relative; border: 1px solid #e1e1e1;} .shopLogoWrap ul li a:hover{border-color: #c77900} .shopLogoWrap ul li a img{max-width: 88%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);} .about-us.civic-square .wrap .imgWrap{text-align: center;} .the-5-zones .introWrap{ margin-bottom: 55px; background-color: #f6f1eb; width: 100%; box-shadow: 0 3px 24px rgba(0,0,0,0.2); overflow: hidden;} .the-5-zones .introWrap .thumb{width: 640px; float: left;} .the-5-zones .introWrap .thumb img{margin: 5% 0 5% 5%; width: 95%} .the-5-zones .introWrap .contentWrap{width: calc(100% - 640px); float: left; padding: 30px;} .the-5-zones .introWrap .contentWrap h3, .the-5-zones .subFilter h3, .otherZoneWrap h3, .artSlider .artItem h3, .sectionWrap h3, .sectionWrap h3 a{font-weight:400; color: #c77900; font-size: 24px; font-family: 'Ubuntu Condensed', sans-serif; margin-bottom: 30px;} .the-5-zones .introWrap .contentWrap p{line-height: 150%; font-size: 16px; font-weight: 300} .the-5-zones .resultList{clear: both;} .the-5-zones .resultList .wrap{max-width: 100%; padding: 0;} .the-5-zones .subFilter{border: none; margin-bottom: 40px;} .the-5-zones .subFilter::after{content:""; display: block; width: 100%; clear: both;} .the-5-zones .subFilter h3{margin-bottom: 0; line-height: 55px;} .the-5-zones .subFilter a.filter.alphabet{width: 279px; display: inline-block; padding-right: 60px; border: 1px solid #e1e1e1; float: right;} .the-5-zones .subFilter a.filter.alphabet:hover{border-color: #c77900} .otherZoneWrap{margin-top: 50px; text-align: center;} .otherZoneWrap h3{margin-bottom: 30px;} .otherZoneWrap a{width:calc(25% - 2px); margin: 0 1px; display: block; float: left; text-align: left;} .otherZoneWrap a img{width: 100%; margin-bottom: 25px;} .otherZoneWrap a span{font-size: 18px; color: #c77900; text-decoration: underline; font-weight: 300} .otherZoneWrap a:hover span{text-decoration: none;} .artSlider{width: 845px; margin:0 auto 120px auto;} .artSlider .artItem .thumb{margin-bottom: 20px;} .artSlider .artItem h3{text-align: right;} .artSlider .artItem p{line-height: 150%; font-size: 16px; } .artSlider .artItem .contentWrap > p{padding-left: 200px; clear: both; text-align: right;} .formWrap{width: 650px; margin: 0 auto 30px auto; position: relative; z-index: 2;} .formWrap .btnArea{text-align: center;} .formWrap .btnArea .btn{cursor: pointer; background-color:#fff; transition: background 0.2s ease} .formWrap .btnArea .btn:hover{background-color: #c77900} .formWrap td{padding-bottom: 15px; vertical-align: top} .formWrap table tr td:first-child{padding-top: 10px; width: 150px;} .formWrap textarea{border: 1px solid #b4a68f; width: 100%; font-size: 16px; padding: 15px;} .formWrap a{color: #c77900; text-decoration: underline;} .formWrap a:hover{text-decoration: none;} .formWrap select option, .formWrap input, .formWrap textarea{color: #c77900 !important} .transportation-content h2{font-size: 24px; display: none; font-weight: 400; color: #c77900; font-family: 'Ubuntu Condensed', sans-serif; letter-spacing: 0 !important} .noBanner .wrap h2{text-align: center; margin: 50px auto;} .noBanner .innerBanner{display: none; opacity: 0 !important} .sectionWrap{clear: both; border-bottom:1px solid #e1e1e1; overflow: hidden; margin-bottom: 30px; padding-bottom: 15px;} .sectionWrap ul{columns: 2; list-style-type: none;} .sectionWrap ul li{padding: 6px 0; padding-left: 20px;} .sectionWrap ul li:before{ content: "\2022"; color: #c77900; font-weight: bold; display: inline-block; width: 1em; margin-left: -1em;} .sectionWrap ul li a{font-size: 16px; font-weight: 300; color:#222;} .sectionWrap ul li a:hover{color: #c77900} #top ul li.for-tourists + li > a.btnElementClub{ position:relative; } #top ul li.for-tourists + li > a.btnElementClub::after { height: 20px; width: 1px; position: absolute; right: -22px; top: 50%; content: ""; display: block; transform: rotate(0) translateY(-50%); background-color: #c8c8c8; } /******************************sch css*******************************/ /*-----------------------common--------------------*/ body:lang(zh-cn) { font-size:15px; font-family: "Open Sans", Verdana, Arial, "Microsoft yahei", "微软雅黑", PMingLiU, sans-serif; } /******************************END sch css*******************************/ /*----------------------------------------------------------------- For Tablet -----------------------------------------------------------------*/ @media screen and (max-width: 1024px) { #header #top #topNav li:first-child:not(.for-tourists){ margin-right: 0; padding: 0; } #header #top #topNav li:first-child, #header #top #topNav li:nth-child(2){ border-right:0; } #header #navigation #top ul li > a.btnElementClub::after{ height: 20px; width: 1px; position: absolute; right: -22px; top: 15px; content: ""; display: block; transform: rotate(0); background-color: #ddd; } #header{min-width: auto} .home #container{background-size: 72% 66%;} .mainSliderOuterWrap{ height: auto; } #header .btnElementClub{background-position: left bottom; margin-right: 10px;} #header .wrap, .wrap { max-width:768px; } .Tcol1, .Tcol2, .Tcol3, .Tcol4, .Tcol5, .Tcol6, .Tcol7, .Tcol8, .Tcol9, .Tcol10, .Tcol11, .Tcol12 { float: left; margin-right:2.7118644%; } .Tcol1 { width: 5.8474576%; } .Tcol2 { width: 14.4067796%; } .Tcol3 { width: 22.9661016%; } .Tcol4 { width: 31.5254236%; } .Tcol5 { width: 40.0847456%; } .Tcol6 { width: 48.6440676%; } .Tcol7 { width: 57.2033896%; } .Tcol8 { width: 65.7627116%; } .Tcol9 { width: 74.3220336%; } .Tcol10 { width: 82.8813556%; } .Tcol11 { width: 91.4406776%; } .Tcol12 { width: 99.9999996%; margin-right: 0; } .Tpush0 {margin-left:0%;} .Tpush1 {margin-left:8.559322%;} .Tpush2 {margin-left:17.118644%;} .Tpush3 {margin-left:25.677966%;} .Tpush4 {margin-left:34.237288%;} .Tpush5 {margin-left:42.79661%;} .Tpush6 {margin-left:51.355932%;} .Tpush7 {margin-left:59.915254%;} .Tpush8 {margin-left:68.474576%;} .Tpush9 {margin-left:77.033898%;} .Tpush10 {margin-left:85.59322%;} .Tpush11 {margin-left:94.152542%;} .Tpull0 {margin-right:0%;} .Tpull1 {margin-right:8.559322%;} .Tpull2 {margin-right:17.118644%;} .Tpull3 {margin-right:25.677966%;} .Tpull4 {margin-right:34.237288%;} .Tpull5 {margin-right:42.79661%;} .Tpull6 {margin-right:51.355932%;} .Tpull7 {margin-right:59.915254%;} .Tpull8 {margin-right:68.474576%;} .Tpull9 {margin-right:77.033898%;} .Tpull10 {margin-right:85.59322%;} .Tpull11 {margin-right:94.152542%;} .Tlast { margin-right: 0; } .Tcol1 img, .Tcol2 img, .Tcol3 img, .Tcol4 img, .Tcol5 img, .Tcol6 img, .Tcol7 img, .Tcol8 img, .Tcol9 img, .Tcol10 img, .Tcol11 img, .Tcol12 img { width: 100%; height: auto; display: block; } /* Common*/ .photoFancyContainer img { max-height:600px; max-width:600px; } #header #top #topNav{height: 50px;} #header #navigation #top ul li > a{line-height: 30px;} #header #top #topNav li{height: 50px; line-height: 50px;} #header .headerRight #top{float: none;} #header #top #topNav li.for-tourists{margin-right: 0;} #header #top #topNav li.for-tourists a{padding-top: 0;} #header #top #topNav li.for-tourists:after{display: none;} #header .btnElementClub{height: 35px;} /*body { min-width:760px; }*/ #header { min-height:initial; } #header .headerRight > #top #topNav{display: none;} #header .logo{padding: 12px 0;margin: 20px; width: 75px; height: 66px;} #header .wrap{padding:0; height: 112px;} #header #navigation{position: absolute;top:6px;left:0;width:100%;z-index: 999999;background-color:#fff; text-align: left; margin-top: 0; max-height: 0; transition: max-height 0.15s ease-out; overflow: hidden; } #header #navigation.open{display:block; max-height: unset;transition: max-height 0.5s ease-in-out;/* margin-left: -20px; */} #header #navigation ul{width:100%;padding-right:0;} #header #navigation #top{border-top:1px solid #ddd; border-bottom:1px solid #ddd;} #header #navigation #topNav li{padding-left: 0} #header #navigation #topNav li:first-child{border-right: none; position: relative;} #header #navigation #topNav li.for-tourists::before{content:""; height: 20px; width: 1px; background-color: #ddd; position: absolute; right: 10px; top: 6px;} #header #navigation #top ul li > a{ font-size:16px; padding: 10px; color:#aaaaaa;} #header #navigation ul li{float:none;} #header #navigation > ul > li{border-bottom:1px solid #ddd; min-height: 49px; height: auto;} #header #navigation > ul > li > ul::before{display: none;} #header #navigation > ul > li > ul{ transform: translateX(0);width:100%; min-width:auto; left: 0; box-shadow: none; border-top: none; top: 0 !important; } #header #navigation ul li > a{color:#222;padding: 15px 20px; } #header #navigation ul li > a::before, #header #navigation ul li > a::after{content:'';position: absolute;width:15px;height:2px; background-color:#c77900; border-top:none;border-left:none;right:20px;top:50%; transition: 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19) all;} #header #navigation ul li > a::after{transform: rotate(90deg);} #header #navigation ul li > a:only-child::before, #header #navigation ul li > a:only-child::after{display:none;} #header #navigation ul li.on > a::after{display: none;} #header #navigation ul li > ul{position: relative;top: 0;background-color:#eee; display:none; box-shadow: none;} #header #navigation ul li > ul li > ul{left: 0 !important; width: 100%; display: block !important} #header #navigation ul li:nth-child(7) > ul li > ul{left: 0 !important; width: 100%} #header #navigation ul li > ul li > a::after, #header #navigation ul li > ul li > a::before{display: none;} #header #navigation > ul > li > ul{border-top: 1px solid #ddd} #header #navigation ul li > ul li > ul li{border-bottom: 1px solid #efa230; } #header #navigation ul li > ul li > a{padding:20px; color: #222; font-size: 17px;} #header #navigation ul li:hover > ul{display:none;} .filterTab > li > a{font-size:16px;} #header .lang {margin-left: 15px;margin-top: 20px;margin-bottom: 30px;} #header .lang a{color:#FFF;border-color:#FFF;} .mobileMenuBtn {display:block;} .mainMovieSlider .slick-prev, .mainNewShopSlider .slick-prev, .routesWrap .slick-prev, .artSlider .slick-prev{left:-40px;} .mainMovieSlider .slick-next, .mainNewShopSlider .slick-next, .routesWrap .slick-next, .artSlider .slick-next{right: -40px;} /* Index */ #mainSliderWrap{width: 100%; height: auto; margin-bottom: 105px; font-size: 0;} .slick-track{font-size: 0} #miscCol .boxWrap{width: 100%;} .revealLayer{height: 100%} .signUpWrap{width:100%; top:auto; bottom:-75px;} .slick-dots{bottom: 20px;} #mainSlider a { height:auto; } .slick-dotted.slick-slider{margin-bottom: 0;} .controls .prevBtn, .controls .nextBtn { bottom:90px;} #header .headerRight{position: relative; width: 100%;} #mainSlider{height: auto} .revealLayer{width: 50%;} .slick-slide img{width: 100%;} .sliderContent{width: 50%; height: auto; padding:25px;} .sliderImg{width: 50%; height: auto} .sliderContent .slider-heading{font-size: 30px; margin-bottom: 35px;} .sliderContent .text{font-size: 16px;} .mainNewShopItem .content{width: 100%; height: 420px;} #mainNewShop .wrap{ z-index: 2; max-width: 685px;} .mainNewShopSlider{width: 100%; height: 605px; box-shadow: none;} .mainNewShopItem{position: relative;} .mainNewShopSlider .slick-list{height: 605px;} .mainNewShopSlider .slick-prev, .mainNewShopSlider .slick-next{top: 36%;} .mainNewShopItem .thumb{position: absolute; left: 50%; bottom: -161px; transform: translateX(-50%); width: 467px;} #mainNewShop{position: relative;} #mainNewShop::before{content:""; display:block; width: 643px; height: 420px; box-shadow: 0 12px 36px rgba(0,0,0,0.2); position: absolute; left: 50%; top: 0; transform: translateX(-50%); z-index: 1} #movie .mainMovieSlider{width: 770px; position: absolute; left: 50%; transform: translateX(-50%);} #movie .wrap{max-width: 100%; padding: 0; height: 520px; overflow: hidden;} #movie .mainMovieSlider .movieItem .thumb{width: 212px; margin:0 auto; height: auto;} #movie .mainMovieSlider .movieItem{height: auto; } #movie .slick-slide{width:258px;} #movie .mainMovieSlider .movieItem{padding: 0 23px; height: 317px;} #movie .btnWrap{position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);} #planYourVisit .wrap{width: 760px; max-width: unset;} #planYourVisit .thumb{width: 352px; margin-top: 48px; } #planYourVisit .thumb img{width: 100%} #planYourVisit .content{height: auto; width: 617px; margin-top: 0; padding-left: 248px;} #planYourVisit .locationItem li{width: 100%;} #planYourVisit .locationItem{overflow: hidden; padding: 0 15%;} #planYourVisit .content p{margin-bottom: 40px;} .footerBar{height: 108px;} .footerBar .footerSignup{ position: absolute; right: 0} .footerBar a.arrowBtn::before, .footerBar a.arrowBtn::after{ border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 10px solid #fff; } .footerBar a.arrowBtn::before{right: 10px;} .footerBar .wrap > .col5 {margin:0; } .innerBanner{height: 230px; background-size: cover !important} .innerBanner .wrap .searchBar{width: 599px;} .filterWrap{width: 768px; margin: 0 auto; padding: 0 23px;} .filterTab, .filterContentWrap ul{display: none;} .innerBanner .wrap .searchBar{margin-top: 30px;} .filterContentWrap{padding-top: 0;} .listing > .wrap{background-color: #b4a68f; max-width: 100%;} .filterWrap .filterBtn, .filterContent .filterItemBtn{display:block;} .filterContent .filterItemBtn{border-bottom:none;} .filterWrap .filterBtn::after, .filterContent .filterItemBtn::after{transition:border 0.2s ease; content:""; display: block;width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #fff; position: absolute; right: 0; top:50%; transform:translateY(-50%);} .filterWrap .filterBtn.on::after, .filterContent .filterItemBtn.on::after{border-bottom: 7px solid #fff; border-top: 0} .filterWrap{position: relative;} .filterTab, .filterContent ul{background-color: #fff; position: absolute; width: 100%; z-index: 99; left: 0; top:calc(100% - 1px); box-shadow: 0 3px 12px rgba(0,0,0,0.2)} .filterTab li, .filterContent ul li{display: block; width: 100%;} .filterContent ul li a{border-radius: 0; line-height: 55px; color: #222;padding:0 23px;} .filterContentWrap ul li{margin-bottom: 0;} .filterTab li.selected a, .filterTab li a:hover, .filterContent ul li.selected a, .filterContent ul li a:hover{ background: #c77900; background: -moz-linear-gradient(left, #c77900 1%, #ed9000 100%); background: -webkit-linear-gradient(left, #c77900 1%,#ed9000 100%); background: linear-gradient(to right, #c77900 1%,#ed9000 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c77900', endColorstr='#ed9000',GradientType=1 ); color: #fff !important; border-radius: 0; } .shopDetail .wrap{max-width: 768px; padding:0 20px;} .shopDetail .linkWrap{text-align: left;} .shopInfoWrap{margin:0 auto 5px auto;} .shopInfoWrap .shopNameWrap{margin-bottom: 25px;} .shopDetail .linkWrap{margin-bottom: 40px;} .shopDetail .infoCol{margin-bottom: 25px;} .shopDetail .contentWrap .left,.shopDetail .contentWrap .right{width: 100%; clear: both;} .shopDetail .contentWrap{height: auto;} .shopDetail .contentWrap .left{margin-bottom: 30px;} .shopDetail .contentWrap .right{min-height: 227px; margin-bottom: 30px;} .shopDetail .contentWrap .right img{left: auto; right: 0; top: 0; bottom: auto; width:100%;} .shopDetail .contentWrap .right p{width: 100%;} .floorWrap{height: 390px;} .innerBanner.small{height: 230px;} .floorBtnGrp a{margin:15px 0;} .legendBoxWrap{width: 250px;} .legandTitle{font-size: 18px; height: 40px; line-height: 40px;} .legendBoxWrap ul li{min-height: 40px; background-size: 26px 26px} .legendBoxWrap .btnClose{top: 13px;} .shopDetail .contentWrap .right img{position: relative !important;} .transportationTab li {width: 90px;} .transportationTab li a{height: 160px} .transportation-content{width: 768px;} .transportation-content table td, .transportation-content table th{padding: 5px 15px; width: auto} .transportation-content table tr td:first-child{width: 20%} .transportation-content table tr td:last-child{width: 40%} .transportation .mapWrap{width: 768px;} .transportation .mapWrap img{max-width: 100%} .promotion .wrap{max-width: 768px;} .promotion .promotionItem:first-child{margin-top: 0} .promotion .promotionItem a{padding-right: 50px} .tourists-landing #header .mainMenu{} .tourists-landing #header{height: auto;} .tourists-information .wrap{max-width: 768px;} .tourists-information .primaryItemWrap{position: relative;} .tourists-information .mainItemWrap, .tourists-information .primaryItemWrap{width: 100%} .tourists-information .mainItemWrap .informationItem img{width: 100%;} .routesWrap .slick-slider{width:768px; margin: 0 auto;} .resultList .wrap .itemWrap .logoWrap{padding-bottom:11.4%;} .pageNav{right: 20px;} .hotelWrap{width: 100%} .parkingInfo img{margin: 0 auto 25px auto; width: auto; float: none; } .parking .wrap{max-width: 768px} .teslaWrap br{display: none;} .services .wrap{max-width: 768px;} .lockerMapWrap{width: 100%; } .lockerMapWrap .floorNum{font-size: 40px; right: 50px;} .services .wrap .thumb.float{margin-top: -120px; margin-right: 40px; } .services .wrap .thumb.float img{width: 270px; height: auto;} ul.columnList li{width: calc(33% - 1em)} .about-us .wrap{max-width: 768px;} .about-us .wrap .aboutRow.first .contentWrap{width: 642px;} .about-us .wrap .imgWrap img{width: 100%} .about-us .wrap .aboutRow.first .thumb{width: 289px; right: 0; top: 100px;} .about-us .wrap .aboutRow.middle .thumb{width: 311px; height: 233px;} .about-us .wrap .aboutRow.middle{margin: 26px 0;} .about-us .wrap .aboutRow.middle .thumb{top: -55px;} .about-us .wrap .aboutRow.middle .contentWrap{width: 355px; margin-right: 0;} .about-us .wrap .aboutRow.last .contentWrap{width: 621px; height: 382px; padding: 52px 336px 0 21px;} .about-us .wrap .aboutRow.last .thumb{width: 314px; top: 195px; right: 0;} .about-us.about-elements .wrap::after{width: 447px; height: 419px;} .about-us.about-elements .wrap::after{right: 5%; top: 820px;} .about-us .wrap::before{left: -50%; top: 200px;} .shopLogoWrap ul li{width: calc(25% - 20px)} .shopLogoWrap ul li:nth-child(-n+4){margin-bottom: 20px;} .the-5-zones .introWrap .thumb{width: 100%;} .the-5-zones .introWrap .thumb img{width: 100%; margin: 0} .the-5-zones .introWrap .contentWrap{width: 100%;} .artSlider{width: 598px;} .artSlider .artItem .contentWrap > p{padding-left: 120px;} .sectionWrap ul{columns: 1} .shopDetail .contentWrap .left{height: auto; padding-bottom: 67%;} } @media screen and (max-width: 800px) { #movie .mainMovieSlider { width: 1024px; } } /*----------------------------------------------------------------- For Mobile -----------------------------------------------------------------*/ @media screen and (max-width: 767px) { /* `Grid ----------------------------------------------------------------------------------------------------*/ html[lang=zh-hk] .signUpWrap p, html[lang=zh-cn] .signUpWrap p{width: 100%;} .wrap { min-width:320px; padding:0 20px; } .Mcol1, .Mcol2, .Mcol3, .Mcol4, .Mcol5, .Mcol6, .Mcol7, .Mcol8, .Mcol9, .Mcol10, .Mcol11, .Mcol12 { float: left; margin-right:2.7118644%; } .Mcol1 { width: 5.8474576%; } .Mcol2 { width: 14.4067796%; } .Mcol3 { width: 22.9661016%; } .Mcol4 { width: 31.5254236%; } .Mcol5 { width: 40.0847456%; } .Mcol6 { width: 48.6440676%; } .Mcol7 { width: 57.2033896%; } .Mcol8 { width: 65.7627116%; } .Mcol9 { width: 74.3220336%; } .Mcol10 { width: 82.8813556%; } .Mcol11 { width: 91.4406776%; } .Mcol12 { width: 100%; margin-right: 0; } .Mlast { margin-right: 0; } .Mpush0 {margin-left:0%;} .Mpush1 {margin-left:8.559322%;} .Mpush2 {margin-left:17.118644%;} .Mpush3 {margin-left:25.677966%;} .Mpush4 {margin-left:34.237288%;} .Mpush5 {margin-left:42.79661%;} .Mpush6 {margin-left:51.355932%;} .Mpush7 {margin-left:59.915254%;} .Mpush8 {margin-left:68.474576%;} .Mpush9 {margin-left:77.033898%;} .Mpush10 {margin-left:85.59322%;} .Mpush11 {margin-left:94.152542%;} .Mpull0 {margin-right:0%;} .Mpull1 {margin-right:8.559322%;} .Mpull2 {margin-right:17.118644%;} .Mpull3 {margin-right:25.677966%;} .Mpull4 {margin-right:34.237288%;} .Mpull5 {margin-right:42.79661%;} .Mpull6 {margin-right:51.355932%;} .Mpull7 {margin-right:59.915254%;} .Mpull8 {margin-right:68.474576%;} .Mpull9 {margin-right:77.033898%;} .Mpull10 {margin-right:85.59322%;} .Mpull11 {margin-right:94.152542%;} .Mcol1 img, .Mcol2 img, .Mcol3 img, .Mcol4 img, .Mcol5 img, .Mcol6 img, .Mcol7 img, .Mcol8 img, .Mcol9 img, .Mcol10 img, .Mcol11 img, .Mcol12 img { width: 100%; height: auto; display: block; } /* Common ----------------------------------------------------------------------------------------------------*/ body {min-width:320px;} #header{min-width: auto} #header #navigation{top:0;} #container{margin-bottom: 0; display:block; width:100%;} #header .wrap{height: 50px;} #header .logo{width: 42px; height: 42px; margin: 8px 10px} .mobileMenuBtn {display:block;} .mainMenu {display:none;} .photoFancyContainer { min-width:auto; min-height:auto;} .form .row{margin:0px;} .form .row .col{display:inline-block;width:100%;padding:0px;margin-bottom:20px;} .form .row .col .row{width: 100%;margin-left:0;margin-right:0;} .form .row .col .row .col{margin-bottom:10px;} .form .row .col .row .col:last-child{margin-bottom:0;} /* .contentArea (for CMS content) ----------------------------------------------------------------------------------------------------*/ .contentArea img {width:100%; } /* index */ #mainSlider a { height:auto; min-height:200px;} #mainSlider a > img{ position:relative; width:100%; height:auto; max-width:100%; max-height:100%; left:0; top:0; transform:none; } .revealLayer{width: 100%;} .sliderContent{width: 100%;} .sliderImg{width: 100%; position: relative;} .signUpWrap{height: auto} .signUpWrap p:::before, .signUpWrap p:::after{display: none;} .signUpWrap a::before, .signUpWrap a::after{right: 15px;} .signUpWrap a::before{right: 25px;} .signUpWrap a:hover::before{right: 15px;} .sliderContent{padding:25px 15px 50px 15px;} .sliderContent .slider-heading{font-size: 27px; margin-bottom: 30px;} .sliderContent .text{font-size: 15px;} #miscCol .wrap{width: 100%} #mainSliderWrap{margin-bottom: 95px} #miscCol .boxWrap{margin-bottom: 20px !important;} #mainNewShop .wrap{width: 100%;} .mainNewShopItem .thumb{padding-bottom:67%; overflow:hidden; position: relative;left:0; top: 0; transform: translateX(0); width: 100%; bottom: auto; height: auto} #mainNewShop::before{display: none;} .mainNewShopSlider{height: auto; box-shadow: 0 12px 36px rgba(0,0,0,0.2)} .mainNewShopSlider .slick-list{height: auto;} .mainNewShopItem .content .info{font-size: 16px;} .mainNewShopSlider .slick-prev{left: -10px;} .mainNewShopSlider .slick-next{right: -10px} .mainNewShopItem .content{height: auto; padding: 30px 0;} #planYourVisit .wrap{width: 100%; padding: 0;} #planYourVisit .thumb{position: relative; left: 0; width: 100%; top: 0; transform: none !important} #planYourVisit .content{width: 100%; padding: 30px 20px;} .footerBar{height: auto; text-align: center; padding: 25px 0;} .footerBar .wrap{width: 100%;} .footerBar .col4.footerSignup{position: relative;} .footerBar p{float: none; display: block; text-align: center; margin: 0; height: 35px; line-height: 35px;} .footerBar .wrap > .col4 {text-align: center;} .footerBar .appBtn { float:none; } .footerBar p span{display: none;} .followUs{text-align: center; margin: 0 auto; float:none;} .footerBar .wrap > .col3 {text-align: center;} .footerBar a.arrowBtn{padding-right: 0; margin-right: 25px;} .footerBar a.arrowBtn::before{right: -20px;} .footerBar a.arrowBtn:hover::before{right: -30px;} .footerBar a.arrowBtn::after{right: -30px;} .followUs li{margin: 0 15px; } .footerMenu, .footerMenu .last{text-align: center;} .footerMenu .last{margin-top: 15px;} .footerBottom{padding: 20px 60px; line-height: 150%} .footerBottom .footerMenu{margin-top: 4px;} .footerBottom .footerMenu li{margin: 2px 8px} .footerMenu ul{width: 100%;} .home #container{background:none;} .listing .wrap, .resultList .wrap, .subFilter .wrap, .filterWrap{width: 100%} .resultList .wrap .itemWrap a{padding: 0 0 100% 0;} .resultList .wrap .itemWrap a img{max-width:80%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);} .resultList .wrap .itemWrap a > div{display: none} .resultList .wrap .itemWrap a::after{display:none !important;} .itemWrap{padding: 0; width:50%; float: left;} .resultList .wrap{padding: 0;} .resultList .wrap .itemWrap{border-top: none !important;} .resultList .wrap .itemWrap{border-right: 1px solid #e1e1e1} .resultList .wrap .itemWrap:nth-child(2n){border-right-color: white;} .innerBanner .wrap .searchBar{width: 80%; text-align: left; padding:0 16px;line-height: 44px; height: 44px; margin-top: 20px;} .innerBanner .wrap .searchBar a{right: 22px; top:45%;} .subFilter{margin-bottom: 0;} .subFilterWrap{width:50%; margin-right: 0;} .subFilter a.filter.area::after{right: 0;} .innerBanner.small{display: none;} .shopDetail .wrap{max-width: 100%; padding: 0 20px;} .shopLogoWrap img{width:auto; max-width:100%; margin: 0 auto} .shopInfoWrap .shopNameWrap{display: none;} .shopDetail .infoCol{border: none; padding-left: 0} .shopDetail .telephone{display: none;} .shopDetail .btnContact{display: block;} .shopDetail .linkWrap{margin-bottom: 25px;} .shopDetail .contentWrap .right img{position: relative !important; width: 100%} .shopDetail .contentWrap .right .btnShowMore{margin-bottom: 25px; display: block;} .shopDetail .contentWrap .right{height: auto;} .shopDetail .contentWrap .right p{width: 100%;} .floorWrap{height: 220px;} .legendBoxWrap{width: 100%; z-index: 9999} .floorplanFooter a.btnInfo{right: 26px;} .floorBtnGrp{width: calc(100% - 76px); text-align: left; float: left; padding-left: 15px;} .floorBtnGrp a{width: calc(25% - 2px); margin-right: 2px; float: left; height: auto; padding-bottom: 20%; background-size: 100% auto !important} .floorplanHead{position: fixed; z-index: 999; background-color: #fff; top: 0} .floorplan .main{margin-top: 87px; position: fixed;left: 0; width: 100%} .floorplanFooter{background-color: #fff} .floorplanFooter.showInfo::after{right: 20px;} .floorplan{overflow: hidden;} .floorplan .btnBackToTop, .floorplan .btnScrollDown{display: none !important;} .legendBoxWrap{height:60vh} .shopLogoWrap{margin-bottom: 20px;} .transportationTab li a{font-size: 0;} .transportationTab li{width: 15%; margin: 0} .transportationTab li a{height: 60px;} .transportation-content{width: 100%} .transportation-content table{width:90%; margin: 0 auto} .transportation-content table thead{display: none;} .transportation-content table td, .transportation-content table th{ width: 100% !important; float: left;} .transportation-content table tr th:first-child{border-top: 1px solid #c77900;} .transportation-content table tr th{border-bottom:1px solid #e1e1e1;} .transportation-content table tr td:last-child{margin-bottom: 30px;} .transportation .mapWrap{width: 100%} .transportation .btnEnlarge{font-size: 0; padding: 20px; background-position: center center; width: 50px; height: 50px;} .transportation table .mobileThead{display: block;} .transportation .driverWrap{width: calc(100% - 70px); margin: 0 auto 15px auto;} .transportation .wrap h2{margin: 0 auto 40px auto} .floorWrap, .resultList{margin-bottom: 30px;} .promotion .promotionItem:last-child{margin-bottom: 30px;} .promotion .promotionItem a{padding-right: 30px;} .promotion .promotionItem a:after{display: none !important;} .promotion .promotionThumb{margin-bottom: 30px;} .promotion .promotionDetailThumb{margin-bottom: 30px; padding:0 10%;} .innerBanner.titleOnly .wrap h1{font-size: 16px; font-weight: 500} .tourists-information .wrap{max-width: 90%; margin-top: 0;} .tourists-information .mainItemWrap .informationItem .cardContent{padding: 15px 10px;} .tourists-information .informationItem .cardContent h2{margin-bottom: 30px;} .tourists-information .primaryItemWrap .informationItem{margin-top: 30px;} .tourists-information .primaryItemWrap .informationItem:last-child{margin-bottom: 30px;} .tourists-information .primaryItemWrap .informationItem .cardContent{width: calc(100% - 40px); margin: 0 auto;} .innerBanner .wrap h1{font-size: 34px;} .tourist .transportation-content{width: 90%;} .transportation-content#mtr a img{width: calc(100% - 70px) !important} .routesWrap .slick-slider{width:90%; margin: 0 auto;} .routesWrap .slick-next{right: 0;} .routesWrap .slick-prev{left: 0;} .pageNav{right: 20px; } .tipsWrap .routesWrap{margin-bottom: 30px; padding: 30px 0} .tipsWrap .routesWrap h2{font-size:21px;} .tipsWrap .routesWrap h2::before{background-size: 80% auto;} .tipsWrap .routesWrap#family-fun h2::before{background-size: auto 37px;} .tipsWrap .routesWrap h3{font-size: 18px;} .tipsWrap .wrap{margin-top: 28px;} .hotelWrap{width: 90%} .hotelWrap .thumb{width: 100%; margin-bottom: 0;} .hotelWrap .thumb:last-of-type{margin-bottom: 25px;} .parking .teslaWrap{padding: 20px 20px 40px 20px;} .parking .teslaWrap img{width: calc(100% + 40px); margin-left: -20px; margin-bottom: 10px;} .parking .wrap{width: 100%; padding: 0;} .parking .parkingInfo{width: 100%; margin: 0 auto; padding: 0 20px;} .services .wrap{padding: 0} .services .wrap p{padding: 0 20px;} .services .wrap .thumb{background:none; width: 100%; padding: 20px; margin:0;} .services .wrap .thumb img{width: 100%; height: auto;} .lockerMapWrap > img{width: 100%; height: auto} .lockerMapWrap{padding: 20px;} .lockerMapWrap .floorNum{top: auto; right: 30px; bottom: 20px;} .boxedContent {width: calc(100% - 40px); margin: 0 auto 20px auto} .boxedContent p{padding: 0 !important;} .centerImgWrap{width: 100%; padding:0 20px; margin-bottom: 0;} .centerImgWrap img{width: 100%; margin:0 0 20px 0;} ul.columnList li:nth-child(3n+1){clear: unset;} ul.columnList li{width: 100%;} .servicesWrap{padding:0 20px; margin-bottom: 30px; clear: left; overflow: hidden;} .servicesWrap .serviceList{margin-bottom: 0;} .about-us .wrap .aboutRow.first .contentWrap{width: 100%; padding: 30px 20px; height: auto; margin-bottom: 30px;} .about-us .wrap .aboutRow.first .thumb{position: relative; width: 100%; right: auto; top: auto; height: auto} .about-us .wrap .aboutRow.middle .contentWrap{width: 100%; margin:30px auto;} .about-us .wrap .aboutRow.middle{margin: 0 auto;} .about-us .wrap .aboutRow.middle .thumb{height:auto; position: relative; left: auto; top: auto; margin-bottom: 30px; width: 100%;} .about-us .wrap .aboutRow.last .contentWrap{padding: 30px 20px; width: 100%; height: auto; margin-bottom: 30px;} .about-us .wrap .aboutRow.last .thumb{top:auto; right: auto; position: relative; width: 100%; height: auto; margin-bottom: 30px;} .about-us.about-elements .wrap::before{left: -100%;} .about-us.about-elements .wrap::after{right: 0; bottom: 10%; top: auto;} .about-us .wrap .areaWrap .mapWrap img{max-width:100%} .about-us .wrap .areaWrap img{margin: 20px auto} .shopLogoWrap ul li{width: calc(50% - 20px)} .shopLogoWrap ul li:nth-child(-n+6){margin-bottom: 20px;} .subFilter .subFilterWrap{width: 100%;} .subFilter .subFilterWrap .filter{width: 100% !important;} .the-5-zones .subFilter h3{text-align: center;} .about-us.the-5-zones .wrap{padding: 0;} .the-5-zones .introWrap, .the-5-zones .subFilter, .otherZoneWrap{width: calc(100% - 40px); margin-left:auto; margin-right: auto;} .otherZoneWrap a{width: calc(50% - 2px); margin-bottom: 25px;} .the-5-zones .resultList{border-top: 1px solid #e1e1e1;} .the-5-zones .subFilter h3{margin-bottom: 30px;} .artSlider{width:80%; } .artSlider *{text-align: left !important;} .artSlider .artItem .contentWrap > p{padding-left: 0;} .artSlider .artItem .contentWrap h3{margin-top: 25px;} .artSlider .slick-prev{left: -30px;} .artSlider .slick-next{right: -30px;} .formWrap table tr td{width: 100% !important; float: left; padding-top: 0 !important;} .formWrap{width: 100%; margin-bottom: 30px;} .about-us.civic-square .wrap p{margin-bottom: 45px;} .about-us .wrap h2{margin: 0 auto 30px auto;} .transportation-content h2{display: block; padding: 20px 35px; text-align: left;} .innerBanner::before{ animation: revalOut ease-in-out 0.8s forwards; -webkit-animation: revalOut ease-in-out 0.8s forwards;} #header #top #topNav li.for-tourists{display: block !important; padding-right: 0; } #header #top #topNav li.for-tourists a{padding-bottom: 0;} #header #top #topNav li.for-tourists::before{display: none;} .transportation-content-wrap{margin-bottom: 0;} .tourist .transportation-content h2{text-align: center;} .services .wrap .thumb.float{ margin: 0 !important; float: none; width: 100%; } .floorplan .zoomInBtn, .floorplan .zoomOutBtn{top: 30px; transform: translateX(-50%);} .floorplan a.zoomOutBtn{left: calc(43% + 50px); right: auto} .floorplan a.zoomInBtn{left: 43%; right: auto} #header .wrap > .topSearchWrap{float: right; margin: 15px 50px 0 0 } .topSearchWrap input[type=text]{width: 32vw} #header #top #topNav li{height: 30px;} #header #top #topNav li.for-tourists a{padding-top: 5px;} #header #top #topNav{height: auto;} } @media screen and (max-width: 320px) { .signUpWrap{ bottom:-93px; } #mainSliderWrap { margin-bottom: 113px; } }