.lbl-note {text-align:left; font-family:var(--font-family-body); color:var(--color-black); font-size:var(--font-sm); margin-bottom:var(--spacing-sm);}
body {background-color:var(--color-lightbrown);}
.sec0 h1 {text-align:center; color:var(--color-white); left:0; top:calc(50% - 10vw); width:50%; transform:translate(50%, 0%);}
.sec0 h1 span {font-size:calc(var(--font-x-lg) - 55%); color:var(--colr-black); opacity:0.6;}
.sec2 {overflow:hidden; position:relative; background-color:var(--color-darkgold);}
.sec2 .sec-prlx {background-image:url(../img/marum-residence/banner_sec2.webp);}
.sec2 .content {text-align:center; font-size:var(--font-body); margin:0px auto; display:block; margin-top:var(--spacing-lg); margin-bottom:var(--spacing-lg);}
.sec2 .cnt-wrapper {margin-bottom:var(--spacing-md); display:inline-block;}
.sec2 .content h2 {text-align:center; font-family:var(--font-family-heading); color:var(--color-dark); font-size:var(--font-lg); margin-bottom:var(--spacing-sm); text-transform:none;}
.sec2 .content p {margin-bottom:1.5vw; color:var(--color-white);}
.sec2 .content img {display:block; width:1.9vw; height:auto; margin:0 auto; margin-bottom:var(--spacing-sm);}
.sec2 .content ul {display:inline-block; width:100%;}
.sec2 .content ul li {width:100%; padding:0 1vw; text-align:left; padding:var(--spacing-sm); font-size:calc(var(--font-md) * 0.8); font-family:var(--font-family-heading); border-top:1px solid rgba(255, 255, 255, 0.3);}
.sec2 .content ul li:last-child {border-bottom:1px solid rgba(255, 255, 255, 0.3);}
.sec2 .content ul li:hover {background-color:var(--color-lightgold);}
.sec2 .content ul li a {color:var(--color-white); text-decoration:none; display:block;}
.sec2 .content ul li img {width:3vw; float:right; margin-top:0.5vw;}
.sec3 {display:inline-block; width:100%; position:relative; background-color:var(--color-white); text-align:left; padding:var(--spacing-lg) 50px var(--spacing-md) 50px;}
.sec3 .cnt-title {margin-bottom:var(--spacing-md); padding:0 var(--spacing-sm); text-align:center;}
.sec3 .cnt-title h2 {font-family:var(--font-family-heading); text-transform:none; font-size:var(--font-lg); color:var(--color-dark); display:block; margin-bottom:var(--spacing-sm);}
.sec3 .cnt-title p {font-family:var(--font-family-body); text-transform:none; font-size:var(--font-body); display:block;}
.sec3 .grow-wrapper {overflow:hidden;}
.sec4 {overflow:hidden; position:relative; background-color:var(--color-softblack); padding:var(--spacing-lg) 0;}
.sec4 .note {color:var(--color-lightgold); bottom:5vw;}
.sec4 h2 {font-family:var(--font-family-heading); text-transform:none; text-align:center; font-size:var(--font-lg); color:var(--color-white); -ms-transform:translateY(-2.3vw); -webkit-transform:translateY(-2.3vw); transform:translateY(-2.3vw); display:block; line-height:2.5;}
.sec4 h2 span {color:var(--color-lightgold);}
.sec4 .cnt-wrapper ul h3 {color:var(--color-white); font-family:var(--font-family-heading); white-space:nowrap; font-size:var(--font-md-s); text-transform:none; -ms-transform:translateY(-0.5vw); -webkit-transform:translateY(-0.5vw); transform:translateY(-0.5vw); line-height:1.2;}
.sec4 .cnt-wrapper p {color:var(--color-lightgold); font-family:var(--font-family-body); font-size:0.93vw; line-height:1.2; -ms-transform:translateY(-0.3vw); -webkit-transform:translateY(-0.3vw); transform:translateY(-0.3vw);}
.sec4 .cnt-wrapper ul {display:flex; gap:10px; margin:var(--spacing-sm) 0;}
.sec4 .cnt-wrapper ul li {width:100%;}
.sec4 .cnt-wrapper ul ._l1 {border-left:1px solid #fff; padding-left:0.9vw; height:7.9vw;}
.tab {position:relative; display:flex; flex-direction:column;}
.tab__content {position:relative; margin-bottom:var(--spacing-sm); min-height:35vw;}
.img-abs {position:absolute; top:0; left:0; z-index:1;}
.tab__list {display:flex; gap:0.7vw; order:2;}
.tab__item {width:100%; border:none; color:#333; background-color:#595959; border-radius:50px; font-weight:500; padding:7px 10px; cursor:pointer; transition:background-color 0.3s ease; font-size:calc(var(--font-sm) * 1.2); text-align:center;}
.tab__item.view-all {background:no-repeat; color:#fff; padding:0; border-radius:0; text-align:center; border-radius:50px; border:1px solid; padding:7px 10px;}
.tab__item[content-id="reserve-residences-1"].is--active, .tab__item[content-id="reserve-residences-1"]:hover {background-color:#b09c56;}
.tab__item[content-id="reserve-residences-2"].is--active, .tab__item[content-id="reserve-residences-2"]:hover {background-color:#d0c196;}
.tab__item[content-id="sanctuary-residences"].is--active, .tab__item[content-id="sanctuary-residences"]:hover {background-color:#7d7240;}
.tab__item[content-id="orchard-residences-1"].is--active, .tab__item[content-id="orchard-residences-1"]:hover {background-color:#b3a08c;}
.tab__item[content-id="orchard-residences-2"].is--active, .tab__item[content-id="orchard-residences-2"]:hover {background-color:#967865;}
.tab__item[content-id="greenwood-residences"].is--active, .tab__item[content-id="greenwood-residences"]:hover {background-color:#7a6754;}
.tab__item:hover, .tab__item.is--active {color:var(--color-white);}
.tab__item.view-all:hover, .tab__item.view-all.is--active {color:var(--color-lightgold);}
.sec4 .tab__content-item {display:none;}
.sec4 .tab__content-item img {z-index:2;}
.sec4 .tab__content .tab__content-item.is--active {display:flex;}
.sec4 .tab__content .tab__content-item.is--active img {animation:hotspotfadeIn 1s;}
.sec5 {width:100%; padding-bottom:var(--spacing-lg); background:var(--color-white); display:block; padding-bottom:var(--spacing-lg); padding-top:var(--spacing-lg);}
.sec5 h2 {font-family:var(--font-family-heading); text-transform:none; font-size:var(--font-md); color:var(--color-dark); -ms-transform:translateY(-2.3vw); -webkit-transform:translateY(-2.3vw); transform:translateY(-2.3vw); margin-bottom:var(--spacing-sm); text-align:center;}
.sec5 .cnt-row {margin-bottom:var(--spacing-lg);}
.sec5 .cr-1, .sec5 .cr-2 {margin-bottom:0; display:inline-flex; align-items:center;}
.sec5 .cr-1 {margin-left:calc(var(--spacing-sm) + 5px);}
.sec5 .cnt-img {width:49%; display:inline-block; border-right:5px solid var(--color-lightgold);}
.sec5 .cr-1 .cnt-img, .sec5 .cr-2 .cnt-img {width:calc(50% - 0px); overflow:hidden;}
.sec5 .cr-1 .cnt-img {width:calc(50% - var(--spacing-sm));}
.sec5 .cnt-row.cr-2 .cnt-img {border-right:0; border-left:5px solid var(--color-lightgold);}
.sec5 .cnt-desc {width:calc(50% - 3vw); margin-right:3vw; display:inline-block; vertical-align:top;}
.sec5 .cr-1 .cnt-desc, .sec5 .cr-2 .cnt-desc {display:block; float:right;}
.sec5 .cr-2 .cnt-desc {float:left; padding-left:10%; padding-right:var(--spacing-sm); text-align:right;}
.sec5 .cnt-desc.alt {margin-right:0; margin-left:calc(var(--spacing-sm) + 3vw); padding-right:var(--spacing-lg);}
.sec5 .cnt-desc h3 {margin-bottom:var(--spacing-xs); display:inline-block; font-family:var(--font-family-heading); text-transform:none; font-size:var(--font-md); color:var(--color-dark); line-height:1;}
.sec5 .cr-2 .cnt-desc h3 {text-align:right; display:block;}
.sec5 .cnt-desc ul {list-style-type:unset; padding-left:10px; display:block; padding-right:18px;}
.sec5 .cr-2 .cnt-desc ul {float:right; text-align:right;}
.sec5 .cnt-desc li {width:100%; display:revert; font-family:var(--font-family-body); text-transform:none; font-size:var(--font-body); color:var(--color-black); line-height:1.5;}

@media (min-width: 1500px) {
.container, .container-lg, .container-md, .container-sm, .container-xl {max-width:1440px;}
}

@media (max-width: 1023px) {
.sec0 {background-image:url(../img/teaser/mob_comp1_bg.webp); background-size:cover;}
.sec0 h1 {text-align:center; left:0; top:calc(50% - 30vw); width:100%; padding-left:6vw; padding-right:6vw; transform:unset;}
.glass-case {position:relative; height:auto !important; width:100% !important; margin-left:0; border:1px solid rgba(000, 000, 000, 0.2); overflow:hidden;}
.glass-case img {width:auto !important; height:100vh !important;}
.gc-display-area {border:none !important; background-color:transparent !important; overflow:hidden !important;}
.sm-zoom-img .gc-display-container, .sm-zoom-img .gc-overlay-left-icons, .sm-zoom-img .gc-overlay-right-icons {display:none !important;}
.sec2 .content ul li img {width:7vw; margin-top:1.5vw;}
.sec3 {padding-left:6vw; padding-right:6vw;}
.sec3_1 {position:relative;}
.sec3_1 .glass-case {background-image:url(../img/marum-residence/img_sec3_1.webp); background-size:cover;}
.sec5 {padding-left:6vw; padding-right:6vw;}
.sec5 .cr-1, .sec5 .cr-2 {margin-bottom:var(--spacing-md); display:flex; align-items:center; flex-direction:column; gap:calc(var(--spacing-sm) * 1.5); margin-left:0;}
.sec5 .cr-2 .cnt-desc h3 {text-align:left;}
.sec5 .cnt-row .cnt-desc, .sec5 .cnt-row .cnt-desc {padding-left:0; padding-right:0; text-align:left; width:100%; order:2; margin-right:0; margin-left:0;}
.sec5 .cnt-row .cnt-img, .sec5 .cnt-row .cnt-img {border-right:0 !important; border-left:0 !important; margin-left:0; margin-right:0; width:100%; order:1;}
.sec4 h2 {line-height:1.2; text-align:left;}
.sec4 h2 span {display:block;}
.sec4 .cnt-wrapper ul {gap:5vw; flex-direction:column; margin-left:var(--spacing-sm); margin-bottom:var(--spacing-md);}
.sec4 .cnt-wrapper ul ._l1 {padding-left:2vw; height:auto;}
.sec4 .cnt-wrapper ul h3, .sec4 .cnt-wrapper p {font-size:var(--font-body);}
.sec4 .cnt-wrapper ul h3 br {display:none;}
.sec4 .tab__list {order:1;}
.sec4 .tab__list.flex-box {display:flex; flex-direction:column; margin-bottom:var(--spacing-sm);}
.sec4 .tab__list.flex-box .tab__item {order:1; text-align:center; position:relative; border-radius:0;}
.sec4 .tab__list.flex-box .tab__item.is--active {order:0;}
.sec4 .tab__list.flex-box .tab__item.is--active:after {width:1px; height:1px; border:5px solid transparent; border-top:5px solid #555; content:""; position:absolute; right:1.5em; top:1em; z-index:9999;}
.sec4 .tab__list.flex-box .tab__item:not(.is--active) {position:absolute; top:-999em;}
.sec4 .tab__list.flex-box.expanded .tab__item.is--active:after {border-top-color:transparent; border-bottom-color:#555; top:0.7em;}
.sec4 .tab__list.flex-box.expanded .tab__item:not(.is--active) {position:relative; top:auto;}
.tab__item.view-all:hover, .tab__item.view-all.is--active {color:var(--color-lightgold); background:#fff;}
.tab-wrap {display:flex; flex-direction:column; gap:6vw;}
.tab__content {order:2; overflow-x:scroll; min-height:unset; margin-bottom:0;}
.tab__content img {width:200%;}
.tab__content-wrapper {position:relative; order:2;}
.img-abs {top:unset; bottom:0; width:200%;}
.sec4 .note {bottom:-5vw;}
._iconpan {width:10vw; bottom:-10vw; left:calc(50% - 5vw); -webkit-animation:hotspotfadeIn 2s linear infinite; -moz-animation:hotspotfadeIn 2s linear infinite; -ms-animation:hotspotfadeIn 2s linear infinite; -o-animation:hotspotfadeIn 2s linear infinite; animation:hotspotfadeIn 2s linear infinite;}
}