@media screen and (min-width: 769px) {
#sidebar,#ContentPlaceHolder1_sidebar{padding:1px;}
#sidebar header,#ContentPlaceHolder1_sidebar header{border-bottom-left-radius: 0px;border-bottom-right-radius: 0px;}
}
@media screen and (max-width: 768px) {
#sidebar{display: none;}
#sidebar #TabbedPanels4 .TabbedPanelsContent{display: none;height: 477px;}
}
.sidebar-R{position: relative;}
.sidebar-R .item_num{font-size: 0.876rem;margin-bottom: 10px;text-align: right; padding: 0;}
.sidebar-R .item_main_info dl{margin-bottom: 30px;gap: 5px;}
.sidebar-R .item_main_info dl font{color: #888888;font-weight: normal;font-size: 0.875rem;vertical-align: top;}
.sidebar-R .item_main_info dl dt{font-size: 1.25rem;color: #000;font-weight: bold;line-height: 30px;float: left;padding: 0 5px;}
.sidebar-R .item_main_info dl dt:first-child{/*width: 43%;*/padding-left: 0;}
/*.sidebar-R .item_main_info dl dt:nth-child(2){width: 22%;}*/
.sidebar-R .item_main_info dl dt:nth-child(3){/*width: 35%;*/padding-right: 0;}
.sidebar-R .item_main_info dd.clean{border-bottom: 1px solid #e0e0e0;margin-bottom: 10px;padding-bottom: 15px;}
.sidebar-R .item_main_info dl dd:first-of-type,.sidebar-R .item_main_info dl dd:nth-of-type(2),.sidebar-R .item_main_info dl dd.aichatbnt{width: 100%;}
.sidebar-R .item_main_info dl dd{margin-bottom: 10px;width:calc(50% - 5px);}
.sidebar-R .item_main_info dl dd font{width: 80px;}
.sidebar-R .item_main_info dl dd span{width: calc(100% - 80px);color: #000;}
.sidebar-R .item_main_info dl dd.aichatbnt {gap: 10px;}
.sidebar-R .item_main_info dl dd.aichatbnt a{border-radius: 5px;background-color: #CCCCCC2D;border: 1px solid #FF9900;padding: 5px 15px;color: #666666;font-size: 1.15rem;font-weight: bold;}
.sidebar-R .item_main_info dl dd.aichatbnt a:before{content: "";width: 29px;height: 23px;background-image: url(../images/aichatimg.png);background-size: 100% auto;display: block;margin-right: 5px;}
.sidebar-R .item_main_info dl dd.aichatbnt a:hover{background-color: #FF9900;color: #FFF;}
.sidebar-R .item_main_info dl dd.aichatbnt a:hover:before{background-image: url(../images/aichatimg2.png);}
.sidebar-L,.house-photo{position: relative;}
.sidebar-L .tips{font-size: 0.85rem;line-height: 1.15em;}
.sidebar-L .tips dt{color: #999;margin: 10px 0;width: 100%;}
.sidebar-L .tips dd{width: 50%;}
.sidebar-L .tips dd i{margin-right: 10px;}
.sidebar-L .shortcut{height: 100px;max-width: 32%;position: absolute;right: 0px;bottom: 2px;gap: 2px;flex-direction:row-reverse;}
.sidebar-L .shortcut div{max-height: 100px;max-width: 100px;border: 1px solid #DDD;width: calc(100% / 3);flex: 1;position: relative;}
.sidebar-L .shortcut div img{max-height: 100%;max-width: 100%;}
.sidebar-L .shortcut .pattern span{width: 74px;height: 46px;background-image: url(../images/aipen.png);background-size: cover;display: block;position: absolute;bottom:0px;right: 0px;pointer-events: none;}
.sidebar-L .house-photo .fotorama__nav {margin: 0;}
.sidebar-L .house-photo .fotorama__nav__frame .fotorama__video-play:before {width: 32px;height: 32px;background-position: -64px -32px;}
.sidebar-L .house-photo .fotorama__video-play{height: 80%;width: 80%;left: calc((100% - 80%) / 2 );top: calc((100% - 80%) / 2 );margin: 0;background:none}
.sidebar-L .house-photo .fotorama__wrap--css2 .fotorama__video-play,
.sidebar-L .house-photo .fotorama__wrap--video .fotorama__stage .fotorama__video-play {display: none;}
.sidebar-L .house-photo .fotorama__video-play:before{content: "";background: url(../JavaScripts/Plugin/fotorama/fotorama.png) no-repeat;background-position: 0 -64px;width: 96px;height: 96px;}

@scope(#pattern_box){
:scope{padding: 10px;/*width:500px;*/position: relative;max-width: 100%;height: 100%;background-color: #FFF;display: flex;justify-content: center;align-items: center; flex-direction:column}
.imgbox{max-width: 100%;border: none;}
.imgbox img{max-height: 100%;max-width: 100%;}
.style_text{color: #000;font-size: 1.25rem;font-weight: bold;top:20px;left: 20px;text-align: center;text-shadow: 0px 0px 3px #FFF;}
.tips{bottom: 20px;left: 20px;font-size: 0.95rem;}
.bnt{bottom: 20px;right: 20px;}
.bnt a{display: flex;justify-content: center;align-items: center;gap: 5px;border: 2px solid #0099CC;border-radius: 30px;background-color: #FFFFFFCC;padding: 5px 20px 5px 5px;color: #0099CC;font-weight: bold;}
.bnt a:hover{background-color: #FFFFFF;}
.bnt a span{background-image: url(../images/pattern_box_icon.png);width: 49px;height: 40px;display: flex;zoom: .8;}
.bnt a:active{background-color:#0099CC;border: 2px solid #0099CC;color: #FFF;}
.bnt a:active span{background-position:center bottom;}
@media screen and (min-width: 769px) {
.style_text,.tips,.bnt{position: absolute;z-index: 5;}
}
@media screen and (max-width: 768px) {
.imgbox{margin: 10px 0;}
}
}


@media screen and (min-width: 769px) {
.sidebar-L{float:left;width:59.5%;}
.sidebar-R{float:right;width:37%}
/*.sidebar-L,.sidebar-R{margin-top: 30px;}*/
}
@media screen and (max-width: 768px) {
.sidebar-R,.sidebar-L{margin:0px 0 20px 0;padding: 0 0 20px 0;}
.sidebar-R .item_main_info dl dt font {font-size: 0.7rem;}
.sidebar-R .item_main_info dl dt{font-size: 1rem;text-align: center;position: relative;flex-grow: 1;}
.sidebar-R .item_main_info dl dt:before {content: "";position: absolute;background-color: #e0e0e0;width: 1px;height: 30px;right: 0;top:20px}
.sidebar-R .item_main_info dl dt:last-of-type:before {display: none;}
.sidebar-L .video{background:none;right: 0;}
/*.sidebar-L .tips{width:75%;}*/
.sidebar-L .shortcut{height: 50px;max-width: 50%;}
.sidebar-L .shortcut div{height: 50px;width:50px;}
.sidebar-L .shortcut .pattern span{zoom: .5;}
}
@media screen and (max-width: 440px) {
.sidebar-R .item_main_info dl dd{width:100%;}
}
/*---------------------*/ 
.item_features li{margin-right: 5px;padding: 0 5px;line-height: 30px;}
.item_features.Characteristic_text li:before{width: 16px;height: 16px;content: "\f005";color:#CB1C31;background-size: cover;margin-right: 5px;}
.item_features li:after,.item_features.Characteristic_text li img{display:none;}
.Inlinebox{display: none;}
.bnt-reserve,.bnt-question,.bnt-line{height:44px;width:100%;display:block;line-height:40px;text-align:center;font-size:1.25rem;}
.bnt-reserve,#TopBar .bnt-reserve:before{background-position:-185px top;}
.bnt-question,#TopBar .bnt-question:before{background-position:-185px -32px;}
.urcode{height:71px;width:71px;}
.urcode img{height:71px;width:71px}
.fotorama__wrap--css3 .fotorama__stage__shaft{background-color:#FAFAFA;}
.fotorama__wrap{margin-right: auto;margin-left: auto;}
#appoint_row .msg {margin-bottom: 10px;}

@media screen and (min-width: 769px) {
.closepage{display: none;}
}
@media screen and (max-width: 768px) {
.closepage{position: fixed;top: 60px;right: 10px;height: 38px;width: 38px;border: 1px solid #FFF;background-color:rgba(150,150,150,0.75);z-index: 999;}
.closepage a{background-image: url(../images/closepage.png);background-repeat: no-repeat;height: 38px;width: 38px;display: block;}
}
/*---------------------*/ 
#current{position:relative;margin-bottom:15px;padding-bottom: 5px;}
#current .icon{position:absolute;height:6px;width:11px;left:70px;bottom:-8px;background-repeat:no-repeat;background-position:left -80px}
#current ul{gap: 5px;}
#current ul li{font-size: 0.875rem;min-width:60px;text-align:center;}
#current ul li a{line-height:25px;padding-right:10px;padding-left:10px;display:block;}
#current ul li a img{background-position:left -100px;height:10px;width:10px;margin-left:5px}
#current ul li.bnt_color{border: 1px solid #F00;}
#current ul li.bnt_color a{color: #F00;}
@media screen and (max-width: 768px) {
#current{display:none}
}
/*---------------------*/ 
.sequence{padding-bottom:10px;line-height:30px}
.sequence dt p{font-size: 0.875rem;float:left}
.sequence dd{gap:5px;}
.sequence dd:after{content: '';display: block;clear: both;height: 0;}
.sequence dd a{font-size: 0.875rem;display:block;padding-left:8px;}
.sequence dd a:first-of-type {margin-left:0px;}
.sequence dd a img{background-repeat:no-repeat;background-position:left top;height:25px;width:24px;margin-left:5px}
.sequence dd a .up{background-position:left -25px}
.sequence dd a .down{background-position:left -50px}
.sequence .clean{display:none;}
@media screen and (max-width: 768px) {
.sequence{display:block;}
.sequence dd a{text-align:center;padding-left:3px;}
}
@media screen and (max-width: 320px) {
.sequence dd a img{margin-left:3px}
}
/*---------------------*/ 
.guild{position: absolute;z-index: 6;left: 20px;top: 20px;}
.guild span:nth-child(2),.guild span:nth-child(3){margin-left: 3px;}
.guild span{display:inline-block;color: #FFF;padding: 0 10px;}
.guild .presale{background-color: #D1156B;}
.guild .AI_watch{background-color: rgb(56, 189, 29);}
.guild .modal{background-color: #0CC;}
@media screen and (max-width: 768px) {
#TabbedPanels3.TabbedPanels .guild {left: 30px;top: 15px;}
}
/*---------------------*/ 
/*VR*/
#VR{text-align: center;}
#VR .control{width: 240px;z-index: 966;left:calc((100% - 240px) / 2);bottom: -30px;position: absolute;}
#VR .control:after{width:168px;z-index: -1;left:calc((100% - 240px) / 2);top:0;border-style: solid solid solid solid;border-width: 40px;height: 80px;}
#VR .control .searchRules.imgU,#VR .control .searchRules.imgD{width: 240px;background-repeat: no-repeat;font-size: 16px;line-height: 40px;height: 40px;}
#VR .control .searchRules.imgU {background-position: left -40px;}
#VR .control .searchRules.imgD.movie {background-position: left -80px;}
#VR .control .searchRules.imgU.movie {background-position: left -120px;}
#VRLayer,.sidebar-L .w16by9{margin-top: -1px;position: relative;overflow: hidden;padding-bottom: 50%;}
#VRLayer.w16by9,.sidebar-L .w16by9{padding-bottom: 56.25%;}
.sidebar-L .w16by9{padding-bottom: 78.75%}
#VRLayer.w4by3{padding-bottom: 62%;}
#VRLayer iframe, #VRLayer object, #VRLayer embed,.moviebox iframe, .moviebox object,.moviebox embed,
.sidebar-L .w16by9 iframe,.sidebar-L .w16by9 object,.sidebar-L .w16by9 embed{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.moviebox{position: relative;height: 0;overflow: hidden;padding-bottom: 56.25%;}
@media screen and (max-width: 768px){
#VR {margin-bottom: 50px;}
#VR.within{margin-bottom: 30px;}
#VR.within_cancel{margin-bottom: 0px;}
}
@media screen and (max-width: 480px) {
#VRLayer{padding-bottom: 100%;}
}
/*---------------------*/ 
/*物件列表*/
.ObjectList{padding-top:10px;padding-bottom:10px;margin-bottom:10px;}
.ObjectList .guild{left:5px;top: 5px;}
.ObjectList ul li.house_block{padding-top:1px;position:relative;z-index:50;margin-bottom:1px;}
.ObjectList ul li .title{line-height:35px;padding-right: 10px;padding-left: 10px;border-top:1px solid #F5F5F5;}
.ObjectList ul li .title dt a{font-size:1.125rem;}
.ObjectList ul li .title dt a:first-of-type{max-width: calc(100% - 85px);padding-right: 10px;}
.ObjectList ul li .title > dt img{height:23px;width:24px;background-repeat:no-repeat;margin-right:5px;}
.ObjectList ul li .title dt .buy{background-position:-25px 0}
.ObjectList ul li .title dt .rent{background-position:-25px -23px}
.ObjectList ul li .title > dd{position:absolute;top:1px;right:0;}
.ObjectList ul li .title dd a{display:block;width:43px;float:right;line-height: 34px;}
.ObjectList ul li .title dd a img,.ObjectList ul li .content > dt h4 a img,.ObjectList ul#photo li .content dd a img{height:33px;width:43px;vertical-align: top;}
.ObjectList ul li .title dd a .join-favourites{background-position:-55px top}
.ObjectList ul li .title dd a .join-favourites:hover{background-position:-55px -33px}
.ObjectList ul li .title dd a .del-favourites{background-position:-55px -66px}
.ObjectList ul li .title dd a .del-favourites:hover{background-position:-55px -99px}
.ObjectList ul li .title dd .apartmentbn{background-image: url(../images/apartmentbn.png);}
.ObjectList ul li .title dd .apartmentbn.join-abn{background-position: left -66px;}
.ObjectList ul li .title dd .apartmentbn.join-abn:hover{background-position: left -99px;}
.ObjectList ul li .title dd .apartmentbn.del-abn{background-position: left top;}
.ObjectList ul li .title dd .apartmentbn.del-abn:hover{background-position: left -33px;}
.ObjectList ul li .title dd.date,.ObjectList ul li .EdirBnt{display: none;}
.ObjectList ul li .title dt a.commu{padding-left: 25px;background: url(/images/icons/commu.png) no-repeat 0 3px;color:green;display:inline;font-size: 1rem;line-height: 30px;}
.ObjectList ul li .title dt a.commu::after{content:'>' }
.ObjectList ul li .content{padding:10px}
.ObjectList ul li .content > dt{cursor:pointer;position:relative;background-image: none;}
.ObjectList ul li .content > dt h3{font-size:12px;font-weight:400;position:absolute;right:0;bottom:0;float:left;padding-right:5px;padding-left:5px;-webkit-border-top-left-radius: 3px;-moz-border-radius-topleft: 3px;border-top-left-radius: 3px;}
.ObjectList ul li .content > dt h4{
	position:absolute;
	width:100%;
	right:0px;
	bottom: 0px;
	padding-top: 5px;
	padding-bottom: 5px;
	text-align: right;
	background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0.4) 100%); 
}
.ObjectList ul li .content > dt h4 a {color: #FFF;line-height: 33px;margin-right: 5px;}
.ObjectList ul li .content > dt h4 a .NOP{background-position:-636px top}
.ObjectList ul li .content > dt h4 a .map{background-position:-636px -33px}
.ObjectList ul li .content > dt h4 a .Line{background-position:-679px top}
.ObjectList ul li .content > dt h4 a .retention{background-position:-679px -33px}
.ObjectList ul li .content > dt h4 a .join-favourites{background-position:-98px top}
.ObjectList ul li .content > dt h4 a .join-favourites:hover{background-position:-98px -33px}
.ObjectList ul li .content > dt h4 a .del-favourites{background-position:-98px -66px}
.ObjectList ul li .content > dt h4 a .del-favourites:hover{background-position:-98px -99px}
.ObjectList ul li .content > dt h4 a .apartmentbn{background-image: url(../images/apartmentbn.png);}
.ObjectList ul li .content > dt h4 a .apartmentbn.join-abn{background-position: -43px -66px;}
.ObjectList ul li .content > dt h4 a .apartmentbn.join-abn:hover{background-position: -43px -99px;}
.ObjectList ul li .content > dt h4 a .apartmentbn.del-abn{background-position: -43px top;}
.ObjectList ul li .content > dt h4 a .apartmentbn.del-abn:hover{background-position: -43px -33px;}
.ObjectList ul li .content > dt a img{height: 100%;object-fit: cover;}
.ObjectList ul li .content > dd span{color:#a2a2a2;width: 60px;vertical-align: top;}
.ObjectList ul li .content dd .Price dt{line-height:25px;text-align:right}
.ObjectList ul li .content dd .Price dt span{color:#000;margin-top:3px;width: auto;padding-right: 0px;margin-left: 0;}
.ObjectList ul li .content dd .Price dt .discount-del{text-decoration:line-through;font-size:14px}
.ObjectList ul li .content dd .Price dt .discount{font-size:2rem;margin:0 5px 0 10px;}
.ObjectList ul li .content dd .Price dd{font-size:13px;line-height:16px;padding:2px 5px;}
.ObjectList ul li .content dd .Price dd img{height:13px;width:11px;background-repeat:no-repeat;margin-right:5px;margin-left:5px}
.ObjectList ul li .content dd .Price dd .down{background-position:-25px -60px}
.ObjectList ul li .content dd .Price dd .up{background-position:-38px -60px}
.ObjectList ul li .content dd h4{min-height:26px;color: #000;}
.ObjectList ul li .content dd h4.trait{width: 100%;padding-left: 0;text-indent: 0; }
.ObjectList ul li .content dd h4.trait p{width:calc(100% - 60px);display: inline-block;}
.ObjectList ul li .content dd h4 .tel {font-size:1.25rem;}
.ObjectList ul li .content dd h4 .num_text {font-size:1.25rem;}
.ObjectList ul li .content .AI_watch{left: 5px;top:5px;z-index: 2;}
.ObjectList ul li .content .imgbox .guild  span{display:inline-block}
.ObjectList ul li .content .imgbox img.youtubebnt{left: calc((100% - 80px) / 2);top: calc((100% - 160px) / 2);}
.ObjectList ul li .content .imgbox img.FBplaybnt{left: calc((100% - 80px) / 2);top: calc((100% - 160px) / 2);}
.ObjectList ul li .content .imgbox img.tiktokbnt{left: calc((100% - 80px) / 2);top: calc((100% - 160px) / 2);}
.ObjectList ul li .content .imgbox .friendly{width: 50px;height: 50px;background-image: url(../images/ic-friendly-source.png);background-size: cover;position: absolute;right: 5px;bottom: 30px;}
.ObjectList .ImageBox{height:260px;width:445px;position:absolute;left:-1px;top:-150px;visibility:hidden;z-index: 6;border-bottom-left-radius: 0px;border-bottom-right-radius: 0px;}
.ObjectList .ImageBox dl{padding:6px;}
.ObjectList .ImageBox dl dt{height:229px;width:305px;order:2}
.ObjectList .ImageBox dd{width:120px;overflow:hidden;order:1}
.ObjectList .ImageBox dd a{line-height:28px;color:#000;height:28px;width:118px;text-align:center;display:block;}
.ObjectList .ImageBox dd .small{margin-top:7px;}
.ObjectList .ImageBox dd .small li{height:42px;width:56px;margin-right:3px;margin-bottom:6px;}
.ObjectList ul li .ShowRent{display:none}
.ObjectList ul#photo li.house_block{z-index:50;margin-bottom:15px;}
.ObjectList ul li .title{border-top: none;}
.ObjectList ul#photo li .title dt{justify-content: center;}
.ObjectList ul#photo li .title dt a{width: 100%;}
.ObjectList ul#photo li .content{padding:0;position:relative;border-style:none;margin:0 0 5px}
.ObjectList ul#photo li .content dt{border-style:none}
.ObjectList ul#photo li .content dd{position:absolute;width:auto;transition:all .4s ease ;opacity:0;}
.ObjectList ul#photo li:hover .content dd {animation:fadeInUp .4s ease ;opacity:1;}
.ObjectList ul#photo li .content dd a .join-favourites{background-position:-98px top;opacity:0.6;}
.ObjectList ul#photo li .content dd a .join-favourites:hover{background-position:-98px -33px;opacity:1;}
.ObjectList ul#photo li .content dd a .del-favourites{background-position:-98px -66px;opacity:0.6;}
.ObjectList ul#photo li .content dd a .del-favourites:hover{background-position:-98px -99px;opacity:1;}
.ObjectList ul#photo li .title{background-color:transparent;text-align:center;line-height:26px;border-bottom: none;clear: both;}
.ObjectList ul#photo li .title dt span{margin-top:3px}
.ObjectList ul#photo li .title dt .discount{font-size:2rem;margin:0 5px 0 10px}
.ObjectList ul#photo li .title dd{position: relative;display: inline-block;padding-right: 5px;padding-left: 5px;}
.ObjectList ul#photo li .title dd span{font-size: 1.2rem;}
.ObjectList ul#photo li .title dd:after{background-color:#ccc;height: 15px;width: 1px;top:5px;right: 0px;}
.ObjectList ul#photo li .title dd:last-of-type:after{display:none;}

@media screen and (min-width: 769px) {
.ObjectList ul li .title dt a{width:auto;}

.ObjectList ul li .content > dt{height:180px;width:210px;}
/*.ObjectList ul li .content > dt.imgbox img{max-height: 160px;}*/
.ObjectList ul li .content > dt.imgbox img.youtubebnt,.ObjectList ul li .content > dt.imgbox img.FBplaybnt,.ObjectList ul li .content .imgbox img.tiktokbnt{height: 160px;}
.ObjectList ul li .content > dt h4{display: none!important;}
.ObjectList ul li .content > dd{width:calc(100% - 230px);position:relative}
.ObjectList ul li .content dd h3{font-size:16px;font-weight:400;margin-bottom:5px}
.ObjectList ul li .content dd h4{font-weight:400;width:40%;float:left;font-size: 0.875rem; padding-left: 3.5em; text-indent:-2.5em;margin-right: 3px;}
.ObjectList ul li .content > dd span{padding-right: 20px;margin-left: -1em}
.ObjectList ul li .content > dd span.desktop{display: inline-block;text-indent: 0em;width: auto;}
.ObjectList ul li .content dd h4.trait span{margin-left:0}
.ObjectList ul li .content dd .Price{position:absolute;top:30px;right:0px}
.ObjectList ul li .content dd .Price dd{float:right}
.ObjectList ul#photo li.house_block{width:calc((100% - 18px) / 4);margin-right:2px;margin-left:2px;padding:10px 5px}
.ObjectList ul#photo li .content dt{height:173px;width:100%;margin-bottom: 5px;}
.ObjectList ul#photo li .content dd{top:130px;right:10px;}
.ObjectList ul li p{clear: both;font-size: 0.875rem;}
.ObjectList .item_features{margin-bottom: 5px;}
}
@media only screen and (min-width: 769px) and (max-width: 1024px) {
.ObjectList ul#photo li.house_block{width:calc((100% - 18px) / 3);}
}
@media screen and (max-width: 768px) {
.ObjectList ul li .title > dd{display:none;}
.ObjectList ul li .title > dt img{margin-top:5px;vertical-align:top;float:left}
.ObjectList ul li .title input[type="checkbox"] + label span{margin-top:8px;float:left}
.ObjectList ul li .title dt a:first-of-type{max-width: calc(100% - 30px);}
.ObjectList .ImageBox{display:none}
.ObjectList ul li .content{padding:0}
.ObjectList ul li .content > dt{height: 50vw;width:100%;border-radius: 0px;}
.ObjectList ul li .content > dt h3{display:none}
.ObjectList ul li .content .imgbox img.youtubebnt,.ObjectList ul li .content .imgbox img.FBplaybnt,.ObjectList ul li .content .imgbox img.tiktokbnt{top: calc((100% - 60px) / 2);}
.ObjectList ul li .content > dd{margin:10px;margin-bottom:15px}
.ObjectList ul li .content dd h3{font-weight:400;margin-bottom:5px}
.ObjectList ul li .content dd h4{font-weight:400}
.ObjectList ul li .content dd h4:last-child{width: 100%;}
.ObjectList ul li .content > dd span{display: inline-block;width: 50px;}
.ObjectList ul li .content dd h4 ,.ObjectList ul li .content dd p{font-size: 0.875rem;}
.ObjectList ul li .content dd .Price{margin-bottom:10px}
.ObjectList ul li .content dd .Price dt{line-height:25px;text-align:left}
.ObjectList ul li .content dd .Price dt .discount{font-size:30px;margin:0 5px 0 0px}
.ObjectList ul li .content dd .Price{position: relative;}
.ObjectList ul li .content dd .Price dd{position: absolute;right: 0px;bottom: 5px;}
.ObjectList ul#photo li.house_block{width:100%}
.ObjectList ul#photo li .title{height:auto;margin-bottom:10px;line-height:30px;}
.ObjectList ul#photo li .content dt{width:97%;margin-top:8px;margin-right:auto;margin-left:auto}
.ObjectList ul#photo li .content dd{right:10px;bottom:10px}
.ObjectList .item_features li{font-size: 0.8rem;margin-bottom: 5px;}
.ObjectList .m_hide{display: none;}
.ObjectList .ShowBuy h4,.ObjectList .ShowRent h4{width:50%;float: left;}
.ObjectList .ShowBuy h4:first-of-type,.ObjectList .ShowBuy h4:nth-of-type(2),.ObjectList .ShowRent h4:first-of-type{width:100%;}
}
@media screen and (max-width: 480px) {
.ObjectList ul li .content > dd span.desktop{display: none;}
}
/*物件圖檔列表*/
#PicObjList.ObjectList ul li .title dt a{display:block;overflow : hidden;text-overflow : ellipsis;white-space : nowrap;}
/*最愛+會員物件列表*/
#FavouritesBox .ObjectList,#member .ObjectList{margin-top:10px;	width: 100%;}
#FavouritesBox .ObjectList > ul,#FavouritesBox .ObjectList ul li.house_block,#member .ObjectList > ul,#member .ObjectList ul li.house_block{width:auto}

#rent #TabbedPanels5 .TabbedPanelsTab{background-position:right -21px;}
#rent #TabbedPanels5 .TabbedPanelsTab .icon01{background-position:-51px -60px}
#rent #TabbedPanels5 .TabbedPanelsTab .icon02{background-position:-51px -75px}
#rent #TabbedPanels5 .TabbedPanelsTab .icon03{background-position:-51px -90px}
#rent #TabbedPanels5 .TabbedPanelsTabSelected .icon01{background-position:-34px -60px}
#rent #TabbedPanels5 .TabbedPanelsTabSelected .icon02{background-position:-34px -75px}
#rent #TabbedPanels5 .TabbedPanelsTabSelected .icon03{background-position:-34px -90px}
#rent #TabbedPanels5 .TabbedPanelsTabSelected{background-position:right -14px}
#rent .ObjectList ul li .ShowBuy,#rent .ObjectList ul li .content dd .Price dd{display:none}
#rent .ObjectList ul li .ShowRent{display:block}
#business #TabbedPanels5 .TabbedPanelsTab{background-position:right -21px;}
#business #TabbedPanels5 .TabbedPanelsTab .icon01{background-position:-51px -60px}
#business #TabbedPanels5 .TabbedPanelsTab .icon02{background-position:-51px -75px}
#business #TabbedPanels5 .TabbedPanelsTab .icon03{background-position:-51px -90px}
#business #TabbedPanels5 .TabbedPanelsTabSelected .icon01{background-position:-34px -60px}
#business #TabbedPanels5 .TabbedPanelsTabSelected .icon02{background-position:-34px -75px}
#business #TabbedPanels5 .TabbedPanelsTabSelected .icon03{background-position:-34px -90px}
#business #TabbedPanels5 .TabbedPanelsTabSelected{background-position:right -14px}
/*---------------------*/ 
/*分享連結*/
.ObjectLink li label{margin-bottom: 0px;}
.ObjectLink li .fa{border-radius: 3px;width: 25px;height: 25px;background: linear-gradient(to bottom, #069 80%,#1e5799 81%);display: flex;justify-content: center;align-items: center;color: #FFF;}
.ObjectLink li a:hover .fa{background:transparent;color: #BBB;border: 1px solid #BBB;}
.ObjectLink li .share:before{content: "\f1e0";}
.ObjectLink .SubNav{display:none;z-index:999;top:30px;position:absolute;line-height:30px;width: 210px;padding: 5px;right: 0px;}
.ObjectLink .SubNav input[type="text"],.Inlinebox input[type="text"]{height: 25px;width: 62%;padding-left: 3px;padding-top: 2px;}
.ObjectLink .searchbn,.Inlinebox .searchbn {font-weight: bold;padding-right: 10px;padding-bottom: 3px;padding-left: 10px;border: none;margin-left: 10px;cursor: pointer;}
#MainTitle dd{margin-left: auto;}
@media screen and (min-width: 769px) {
.ObjectLink.desktop{display: flex;}
.ObjectLink{gap: 5px;}
.ObjectLink li.mobile{display: none;}
.ObjectLink li{position: relative;}
.ObjectLink li:hover .SubNav{display:block}
.ObjectLink li a img{background-repeat:no-repeat;height:26px;width:25px;display:block;cursor: pointer;}
.ObjectLink li .join-favourites{width:90px;background-position:-90px top}
.ObjectLink li .join-favourites:hover{background-position:-90px -26px}
.ObjectLink li .del-favourites{width:90px;background-position:left top}
.ObjectLink li .del-favourites:hover{background-position:left -26px}
.ObjectLink li .join-apartment{width:90px;background-position:-180px top}
.ObjectLink li .join-apartment:hover{background-position:-180px -26px}
.ObjectLink li .del-apartment{width:90px;background-position:-270px top}
.ObjectLink li .del-apartment:hover{background-position:-270px -26px}
.ObjectLink li .print{background-position:left -52px}
.ObjectLink li .print:hover{background-position:left -78px}
.ObjectLink li .fb{background-position:-25px -52px}
.ObjectLink li .fb:hover{background-position:-25px -78px}
.ObjectLink li .mail{background-position:-50px -52px}
.ObjectLink li .mail:hover{background-position:-50px -78px}
.ObjectLink li .line{background-position:-75px -52px;padding: 0px;margin: 0px;border-bottom: none;}
.ObjectLink li .line:hover{background-position:-75px -78px}
.ObjectLink li .twitter{background-position:-100px -52px}
.ObjectLink li .twitter:hover{background-position:-100px -78px}
.ObjectLink li .skype{background-position:-150px -52px}
.ObjectLink li .skype:hover{background-position:-150px -78px}
.ObjectLink li .wx{background-position:-175px -52px}
.ObjectLink li .wx:hover{background-position:-175px -78px}
.ObjectLink li .oneself{background-position:-200px -52px}
.ObjectLink li .oneself:hover{background-position:-200px -78px}
.ObjectLink li .qrcode{background-position:-225px -52px}
.ObjectLink li .qrcode:hover{background-position:-225px -78px}
.ObjectLink li .Blogger{background-position:-250px -52px}
.ObjectLink li .Blogger:hover{background-position:-250px -78px}
.ObjectLink li .catalog{background-position:-275px -52px}
.ObjectLink li .catalog:hover{background-position:-275px -78px}

}
@media screen and (max-width: 768px) {
.ObjectLink li.mobile{display: block;}
.ObjectLink.desktop{margin-bottom: 10px; display: none;}
.ObjectLink.desktop li{display: inline-block;}
.ObjectLink li{zoom: .8;}
.ObjectLink li a img{background-repeat:no-repeat;width:38px;height: 38px;display: inline-block;}
.ObjectLink li .fa{width: 38px;height: 38px;font-size: 1.25rem;}
.ObjectLink .del-favourites{background-position:left top;}
.ObjectLink .join-favourites{background-position:-38px top;}
.ObjectLink .print{background-position:-76px top;}
.ObjectLink .phone{background-position:-114px top;}
.ObjectLink .fb{background-position:-152px top;}
.ObjectLink .line{background-position:-190px top;padding: 0px;margin: 0px;border-bottom: none;}
.ObjectLink .twitter{background-position:-228px top;}
.ObjectLink .mail{background-position:-722px top;}
.ObjectLink .skype{background-position:-304px top;}
.ObjectLink .wx{background-position:-342px top;}
.ObjectLink .qrcode{background-position:-380px top;}
.ObjectLink .reservation{background-position:-418px top;}
.ObjectLink .question{background-position:-456px top;}
.ObjectLink .line2{background-position:-608px top;}
.ObjectLink .fb2{background-position:-532px top;}
.ObjectLink .close_vr{background-position:-646px top;}
.ObjectLink .del-apartment{background-position:-798px top;}
.ObjectLink .join-apartment{background-position:-835px top;}
.ObjectLink .Blogger{background-position:-684px top;}
.ObjectLink .catalog{background-position:-950px top}
}
@media screen and (max-width: 480px) {
#MainTitle .ObjectLink .line{background-position:-190px top;}
#MainTitle .ObjectLink .fb{background-position:-760px top;}
}
/*分享連結-上方*/
#TopBar .ObjectLink li a img.favourites{width:25px;}
#TopBar .ObjectLink li .join{background-position:-154px top}
#TopBar .ObjectLink li .join:hover{background-position:-154px -26px}
#TopBar .ObjectLink li .del{background-position:-64px top}
#TopBar .ObjectLink li .del:hover{background-position:-64px -26px}
#TopBar .ObjectLink li .join-favourites{width:26px;background-position:-154px top}
#TopBar .ObjectLink li .join-favourites:hover{background-position:-154px -26px}
#TopBar .ObjectLink li .del-favourites{width:26px;background-position:-64px top}
#TopBar .ObjectLink li .del-favourites:hover{background-position:-64px -26px}
#TopBar .ObjectLink li .join-apartment{width:26px;background-position:-334px top}
#TopBar .ObjectLink li .join-apartment:hover{background-position:-334px -26px}
#TopBar .ObjectLink li .del-apartment{width:26px;background-position:-244px top}
#TopBar .ObjectLink li .del-apartment:hover{background-position:-244px -26px}
/*分享連結-下方*/
#BottomBar .ObjectLink > li{width: calc(100% /5);height: 39px;filter:alpha(opacity=80); -moz-opacity:0.8;opacity: 0.8;}
#BottomBar .ObjectLink li a{display: block;}
@media screen and (max-width: 768px) {
#BottomBar .ObjectLink .fb{background-position:-532px top;}
#BottomBar .ObjectLink .mail{background-position:-570px top;}
#BottomBar.iteminfor {bottom: 61px;}
}
/*分享連結-個人頁*/
.StatusNav {padding: 5px;margin: 10px 0;}
.StatusNav .clean{display: none;}
#team_object .StatusNav .ObjectLink li a img {height: 38px;width: 38px;background-image: url(../images/link-mobile.png);}
#team_object .StatusNav .ObjectLink .fb{background-position:-760px top;}
#team_object .StatusNav .ObjectLink .line{background-position:-190px top;padding: 0px;margin: 0px;border-bottom: none;}
#team_object .StatusNav .ObjectLink .twitter{background-position:-228px top;}
#team_object .StatusNav .ObjectLink .mail{background-position:-722px top;}
#team_object .StatusNav .ObjectLink .qrcode{background-position:-380px top;}
@media screen and (min-width: 769px) {
.StatusNav .ObjectLink li{padding-top: 5px;}
}
@media screen and (max-width: 768px) {
.StatusNav {padding-bottom:0px;}
.StatusNav .page{order:1}
.StatusNav .ObjectLink{order:2;margin-bottom:10px}
.StatusNav .ObjectLink li{margin-right:4px}
.StatusNav .ObjectLink .twitter{background-position:-874px top;}
.StatusNav .ObjectLink .line{background-position:-494px top;}
.StatusNav .ObjectLink .qrcode{background-position:-912px top;}
}

/*---------------------*/ 
/*物件上方浮動資訊-電腦*/
#TopBar{width:100%;position:fixed;height:80px;box-shadow: 0 2px 12px rgb(136 136 136 / 20%);z-index:1002;top:-80px;}
#TopBar .content{margin-right:auto;margin-left:auto;margin-top:3px;position:relative}
#TopBar .ObjectMsg h1{font-size:1.875rem;font-weight:700;float: left;max-width: 390px;overflow : hidden;text-overflow : ellipsis;white-space : nowrap;line-height: 40px;}
#TopBar .ObjectMsg h2 {font-size:16px;float: left;margin-left: 10px;line-height: 30px;}
#TopBar .ObjectMsg h2 span{margin-right: 10px;font-size:1.5rem;}
#TopBar .ObjectMsg h2 span.mark{font-size:2rem;line-height:40px;margin-right: 10px;margin-left: 0px;}
#TopBar .ObjectMsg h2 span:nth-child(2){margin-left: 20px;}
#TopBar .ObjectMsg .urcode{float:right}
#TopBar .ObjectMsg dl{float:right;padding-right:10px;padding-left:10px;position: absolute;top: 0px;right: 0px;max-width: 400px;}
#TopBar .ObjectMsg dl dt{align-content:space-between;width:calc(100% - 120px)}
#TopBar .ObjectMsg dl dt h3{font-size:1rem;font-weight:400;line-height:20px;height: 45px;width:100%}
#TopBar .ObjectMsg dl dt h4{font-size:21px;font-weight:400;margin-bottom: 5px;}
#TopBar .ObjectMsg dl dd{margin-left:10px;width: 110px;}
#TopBar .ObjectMsg dl dd .bnt-reserve{margin-bottom:3px}
#TopBar .ObjectMsg .ObjectLink{float: left;margin: 6px 0 0 5px;}
#TopBar .ObjectMsg .ObjectLink.Text{clear: both;margin-top: 3px;}
#TopBar .ObjectMsg .ObjectLink.Text a{display: block;height: 30px;margin-right: 0px;padding: 0 10px;font-size:0.875rem;}
#TopBar .ObjectMsg .ObjectLink.Text{float: left;}
#TopBar.apartment_top .ObjectLink{float: right;}
#TopBar.apartment_top .ObjectLink li .join-apartment{width:90px;background-position:-180px top}
#TopBar.apartment_top .ObjectLink li .join-apartment:hover{background-position:-180px -26px}
#TopBar.apartment_top .ObjectLink li .del-apartment{width:90px;background-position:-270px top}
#TopBar.apartment_top .ObjectLink li .del-apartment:hover{background-position:-270px -26px}
#TopBar.apartment_top h2 {margin-left:10px}
#TopBar.apartment_top h2 font{color: #FFF;padding-right: 10px;padding-left: 10px;margin:0 10px;}
#TopBar.apartment_top h2 span:nth-child(2) {margin-left: 10px;}
#TopBar .bnt-reserve,#TopBar .bnt-question,#TopBar .bnt-line{height:35px;line-height:31px;text-align:center;font-size:1rem;padding:0 10px 0 14px;position: relative;}
#TopBar .ObjectMsg dl dd a:before{content: "";display: block;width: 28px;height: 27px;position: absolute;left: 0px;top: 0px;}
#TopBar .ObjectMsg dl dd .bnt-line:before{width: 20px;height: 19px;left: 5px;top: 5px;opacity:0.5;}
#TopBar .ObjectMsg dl dd.self_bnt {width: 110px;}
#TopBar .ObjectMsg dl dd.self_bnt a{width: calc((100% - 10px) / 3);height: 100%;margin-left: 5px;padding: 25px 5px 2px 5px;line-height: 20px;}
#TopBar .ObjectMsg dl dd.self_bnt a:first-of-type{margin-left:0px;}
@media screen and (max-width: 768px) {
#TopBar{display:none;}
}
/*---------------------*/ 
/*物件下方浮動資訊-手機*/
#BottomBar{width:100%;position: fixed;left: 0px;bottom: 0px;-webkit-box-shadow:2px 0 5px #333;-moz-box-shadow:2px 0 5px #333;box-shadow:2px 0 5px #333;z-index:1000;border-top-width: 1px;border-top-style: solid;background:rgba(0,0,0,0.8);z-index: 999;}
#BottomBar .content{position: relative;padding-top: 5px;}
#BottomBar .content header{margin-left: 5px;margin-top: 5px;margin-right: 5px;}
#BottomBar .ObjectMsg header{height: 65px;}
#BottomBar .ObjectMsg a{text-decoration: none;}
#BottomBar .ObjectMsg header.row3 {height: auto;align-content: flex-start;}
#BottomBar .ObjectMsg header.row3 h2{margin-top: 0px;}
#BottomBar .ObjectMsg header.row3 h2 a{display: block;}
#BottomBar .ObjectMsg h1,#BottomBar .ObjectMsg h2,#BottomBar .ObjectMsg h3{margin-left: 5px;vertical-align: top;}
#BottomBar .ObjectMsg h1{font-size:18px;line-height: 22px;width: calc(100% - 105px);}
#BottomBar .ObjectMsg h2{font-size:25px;font-weight:bold;margin-top: 2px;}
#BottomBar .ObjectMsg h2 span{font-size:18px;margin-right: 10px;}
#BottomBar .ObjectMsg h2 a font{font-size:18px;}
#BottomBar .ObjectMsg h3{font-size:14px;display: inline-block;width: 95px;text-align: center;line-height: 22px;}
#BottomBar .ObjectMsg h3 span{line-height: 22px;}
#BottomBar .ObjectMsg .phone{background-repeat: no-repeat;background-position: left top;float: right;height: 61px;width: 80px;}
#BottomBar dl dt{line-height: 35px;color: #FFF;margin: 5px 0 0 5px;}
#BottomBar dl dd{margin:5px;gap: 5px;}
#BottomBar dl dd a{line-height: 30px;text-align: center;padding-right: 5px;padding-left: 5px;}
/*物件下方浮動資訊-手機-社區*/
#BottomBar .ap_price_box h1{width:100%;text-align: center;font-size: 22px;margin-left: 0px;}
#BottomBar .ap_price_box ul{padding:30px 0 0 0}
#BottomBar .ap_price_box ul li{width: 50%;color: #FFF;font-size:16px;}
#BottomBar .ap_price_box ul li h5 {right: calc((100% - 25px) / 2);top: -27px;}
@media screen and (min-width: 769px) {
#BottomBar{display: none;}
}
/*---------------------*/ 

#ObjectTitle{position: relative;margin-bottom: 10px;gap: 5px ;}
#ObjectTitle h1{font-size:20px;}
#ObjectTitle h2 {font-size:16px;gap: 5px;}
#ObjectTitle h2 .total_price,#ObjectTitle h2 .deposit{margin-left: 5px;}
#ObjectTitle h2 .total_price{position: relative;}
#ObjectTitle h2 .total_price .reduction{position: absolute;right: 0px;bottom: 40px;padding: 5px;font-size: 0.7rem;border: 1px solid #ccc;white-space: nowrap;background-color: #EFEFEF;z-index: 966;gap: 5px;}
#ObjectTitle h2 .total_price .reduction dt{color: #CB1C31;border:none;font-size: 1rem;}
#ObjectTitle h2 .total_price .reduction dt i{margin-left: 5px;}
#ObjectTitle h2 .total_price .reduction dd{text-decoration: line-through;color: #666;}
#ObjectTitle h2 .total_price .reduction dt,#ObjectTitle h2 .total_price .reduction dd{display: inline-block;text-align: center;margin: 0 2px;}
#ObjectTitle h2 .total_price .reduction:before{width:6px; height:6px; border-style:solid; border-width:1px; border-color:#CCC transparent transparent #CCC ; background:#EFEFEF;right:30px; bottom :-5px; transform:rotateZ(225deg);} 
#ObjectTitle h2 span{font-size:1.5rem;}

#ObjectTitle h2 span.mark{font-size:40px;line-height:40px;}
#ObjectTitle .bnt-spreadsheet img{background-repeat: no-repeat;background-position: left top;height: 34px;width: 34px;}
#ObjectTitle .bnt-spreadsheet a{display: flex;justify-content: center;align-items: center;}
#ObjectTitle .item_features li img{background-repeat: no-repeat;background-position: -116px -144px;height: 16px;width: 16px;}
#ObjectTitle .item_features.Characteristic_text li img{background-position: -145px -144px;}
#ObjectTitle .tips{font-size:0.85rem;gap: 10px;}
@media screen and (min-width: 769px) {
#ObjectTitle .desktop{display:flex;}
#ObjectTitle .bnt-spreadsheet{font-size:0.875rem;line-height:25px;height:25px;text-align:center;width:75px;}
#ObjectTitle dt h2,#ObjectTitle dt .bnt-spreadsheet{float:left}
}
@media screen and (max-width: 768px) {
#ObjectTitle .desktop{display: flex;}
#ObjectTitle .bnt-spreadsheet a{width: 40px;height: 40px;text-align: center;line-height: 17px;font-size: 15px;}
#ObjectTitle .mobile{display:none;}
#ObjectTitle{margin:0 5px;}
#ObjectTitle .mobile{display:none;vertical-align: top;margin-top: 5px;margin-left: 10px;}
#ObjectTitle .item_features li {font-size: 0.8rem;margin-bottom: 5px;}
#ObjectTitle .item_features.Characteristic_text li {display: block;font-size: 0.875rem;}
}
@media screen and (max-width: 480px) {

#ObjectTitle {margin: 0px;}
#ObjectTitle h2 span:nth-child(2) {margin:0;}
#ObjectTitle h2 span.mark {font-size: 35px;margin-right: 0px;}
#ObjectTitle dt{padding-left:0px;}
#ObjectTitle dt .buy,#ObjectTitle dt .rent{display: none;}
}
/*---------------------*/ 
.CustomerService{flex: 1;flex-direction:column;}
.CustomerService li{margin-bottom:5px;line-height: 37px;width: 100%;}
/*.CustomerService li input[type="checkbox"] + label {font-size: 0.875rem;}*/
.CustomerService li .bnt-reserve,.CustomerService li .bnt-question{margin-right:auto;margin-left:auto;}
.CustomerService li .inhibit{opacity:0.5;border: 2px solid #CCC;color: #CCC;cursor: not-allowed;background-color: transparent;}
.CustomerService #ValidateNumber1 input[type="text"]{height:35px}
@media screen and (min-width: 769px) {
.CustomerService li input[type="text"]{width:95%;height:35px}
.CustomerService li input.small{width:calc((100% - 16px) / 2);}
.CustomerService li textarea{width:calc(100% - 8px);height:35px;padding-top:3px;padding-left:3px}
}
@media screen and (max-width: 768px) {
.CustomerService li:nth-child(1){margin-bottom:0px;}
.CustomerService li input.small,.CustomerService li textarea{width:100%;height: 39px;margin-bottom: 5px;}
.CustomerService li:first-child input{width:calc(100% - 172px);}
.CustomerService li font{display: block;width: 100%;font-size: 0.8rem;line-height: 1.5em;margin-left: 5px;}
.CustomerService .SelectBlock2 input[type="radio"] + label{flex: 1;min-width: auto;}
}
/*---------------------*/ 
#ShopData{margin-bottom: 10px;}
#ShopData li{vertical-align: top;width: calc(100% - 125px);color: #666666;}
#ShopData li.imgbox{height: 105px;width: 105px;margin-right: 15px;background-color: #FFF; border: 5px solid rgba(0,0,0,.05); border-radius: 50%;overflow: hidden;text-align: center;background-size: cover; background-position: center top; background-repeat: no-repeat;}
#ShopData li.imgbox img.set_h,#ShopData li.imgbox img{max-width: none;max-height: 105px;}
#ShopData li.phone{height: 105px;width: 105px;text-align: center;margin-right: 15px;}
#ShopData li.phone span{color: #FFF;font-size: 1.125rem;display: block;}
#ShopData li h3 > a,#ShopData li h2{text-decoration: none;}
#ShopData li h2{font-size: 1.25rem;color: #CB1C31;margin-top: 10px;line-height:1.3rem;font-weight: bold;}
#ShopData li h2 a{color: #CB1C31;}
#ShopData li h3{font-size: 1.25rem;font-weight: bold;color: #000;line-height: 1.5rem;}
#ShopData li h3 span{color: #999;font-weight: normal;}
#ShopData li h4{font-size: 0.875rem;}
#ShopData li h5{font-size: 0.875rem;}
#ShopData li h3,#ShopData li h4,#ShopData li h5{margin-bottom: 5px;}
#ShopData li h3 a{margin-right: 5px;}
#ShopData li h3 .contact_info,#ShopData li h3 .contact_info li{display: inline-block;width: auto;margin-right: 5px;margin-bottom: 0px;vertical-align: middle;}
#ShopData li h3 .contact_info li a{width: auto;display: inline-block;padding: 5px;opacity: 0.5;margin-right: 0px;}
#ShopData li h3 .contact_info li a:hover {opacity:1;}
#ShopData li h3 .contact_info .bnt-line font:before {margin-right:0px}
@media screen and (min-width: 769px) {
#ShopData li h3 span{margin-left: 10px;}
}
@media screen and (max-width: 768px) {
#ShopData li{width: calc(100% - 75px);}
#ShopData li.imgbox,#ShopData li.phone,#ShopData li.phone img{height: 60px;width: 60px;}
#ShopData li h3,#ShopData li h4,#ShopData li h5{margin-bottom: 0px;}
#ShopData li h4,#ShopData li h5{font-size: 0.8rem;line-height: 1.2em;}
#ShopData li.phone span{color: #FFF;font-size: 1.125rem;display: none;}
}

/*---------------------*/ 
.contact_info li{margin-bottom: 10px;position: relative;}
.contact_info li a i{margin-right:10px;font-size: 25px;vertical-align: middle;}
.contact_info li a{color: #004E73;background-color: #CFE2ED;text-align: center;	width: 100%;display: block;padding: 10px;line-height: 30px;font-size: 20px;}
.contact_info li.bnt-line font:before {content: "";display: inline-block;width: 28px;height: 27px;cursor: pointer;background-image: url(../images/LINE02.svg);background-position: left top;vertical-align: middle;margin-right:10px}
.contact_info li.bnt-line a{color: #060;background-color: #D5EABF;}
.contact_info li.bnt-line a font{font-family: "微軟正黑體";}
.contact_info li .qrcode_bnt{background-color: #A0AEC5;color: #FFF;position: absolute;height: 100%;width: 50px;top: 0px;right: 0px;border-top-left-radius: 0px;border-bottom-left-radius: 0px;}
.contact_info li .qrcode_bnt i{position: relative;font-size: 20px;display: inline-block;}
.contact_info li .qrcode_bnt:hover .qrcode-tel {display: block;}
.contact_info li .qrcode_bnt .qrcode-tel {width: 146px;height: 170px;position: absolute;right: 5px;top: -188px;text-align: center;background-color: #ffffff;box-shadow: 0px 0px 4px 1px #e6e6e6;display: none;}
.contact_info li .qrcode_bnt .qrcode-tel .qrcode-txt{color: #666;font-size: 12px;padding: 15px 0;}
/*---------------------*/ 
#ObjectInfo{margin-top:10px;clear:both}
#ObjectInfo > dt{position: relative;}
#ObjectInfo > dt:after{z-index: -1;background-image:linear-gradient(to right, #CCC 0%, #CCC 50%, transparent 50%);}
#ObjectInfo > dt h3{font-size:1rem;line-height:30px;padding-right:10px;padding-left:10px;font-weight: bold;position:relative;}
#ObjectInfo > dt:after,#ObjectInfo > dt h3:after{left: 0px;bottom: 0px;width: 100%;height: 2px;background-size:15px 2px;background-repeat:repeat-x;}
#ObjectInfo > dt h3 img{background-repeat:no-repeat;height:16px;width:16px;margin-right:10px}
#ObjectInfo > dt .control{top: -5px;left: 140px;position: absolute;}
#ObjectInfo > dt h3 .icon01{background-position:-150px top}
#ObjectInfo > dt h3 .icon02{background-position:-150px -16px}
#ObjectInfo > dt h3 .icon03{background-position:-150px -32px}
#ObjectInfo > dt h3 .icon04{background-position:-166px top}
#ObjectInfo > dt h3 .icon05{background-position:-166px -16px}
#ObjectInfo > dt .point,#TabbedPanels6 .TabbedPanelsTabSelected .point{position:absolute;top: -90px;height: 90px;width: 1px;display: block;}
#ObjectInfo > dd{padding-top:10px;padding-bottom:10px;overflow:hidden;}
#ObjectInfo dd .detailed > li{margin-bottom: 10px;padding-bottom: 10px;}
#ObjectInfo dd .detailed > li:last-child {border: none;}
#ObjectInfo dd .detailed > li h3{text-align: center;position: relative;}
#ObjectInfo dd .detailed > li h3:before{display: block;height: 100%;width: 100%;z-index: -1;left:0;top:0}
#ObjectInfo dd .detailed > li h3 span{color: #FFF;font-size: 1.125rem;line-height: 1.5em;}
#ObjectInfo dd .detailed > li a h3 span{margin: -2px 5px 0 5px;border-radius: 5px;}
#ObjectInfo dd .detailed dl{width: calc(100% / 4);float: left;padding-right: 15px;}
#ObjectInfo dd .detailed dl dt{color: #888888;font-size: 0.875rem;}
#ObjectInfo dd .detailed dl dd{font-size: 1rem;min-height: 30px;}
#ObjectInfo dd .detailed dl dt img{background-repeat:no-repeat;background-position:left -55px;height:11px;width:6px;margin-left:10px}
#ObjectInfo dd .features li{font-size: 1rem;padding: 5px;}
#ObjectInfo dd .detailed .msg{font-size: 0.875rem;clear: both;}
#ObjectInfo dd .detailed .device,#ObjectInfo dd .detailed .device li{width: 100%;}
#ObjectInfo dd .detailed .device li{margin-bottom: 15px;}
#ObjectInfo dd .detailed .device dl{width:calc(100% - 55px);}
#ObjectInfo dd .detailed .device dl dt{font-size: 1rem;}
#ObjectInfo dd .detailed .device dl dd{display: inline-block;width: 110px;color: #CCC;}
#ObjectInfo dd .detailed .device dl dd.longbox{width: 220px;}
#ObjectInfo dd .detailed .device dl dd.select{color: #000;}
#ObjectInfo dd .detailed .device dl dd.select:before {content: "\f10c";opacity: 1;}
#ObjectInfo dd .detailed .device dl dd.no-select{display: none;}
#ObjectInfo dd .detailed .device dl dd:before {content: "\f00d";text-align: center;opacity: 0.5;font-size: 25px;margin-right: 10px;}
#ObjectInfo dd .detailed .device img{background-repeat: no-repeat;height: 45px;width: 45px;float: left;margin-right: 10px;}
#ObjectInfo dd .detailed .device img.icon01{background-position: left top;}
#ObjectInfo dd .detailed .device img.icon02{background-position: left -45px;}
#ObjectInfo dd .detailed .device img.icon03{background-position: left -90px;}
#ObjectInfo dd .detailed .device img.icon04{background-position: left -135px;}
#ObjectInfo dd .detailed .device img.icon05{background-position: left -180px;}
#ObjectInfo dd .detailed .device img.icon06{background-position: left -225px;}
#ObjectInfo dd .detailed .detailed_text .TableBox .price{color:#e60012;}
#ObjectInfo .TableBox.style09{border: none;overflow: hidden;}
#ObjectInfo .item_features{margin: 10px 0;font-size: 20px;}
@media screen and (min-width: 769px) {
#ObjectInfo dd .detailed .ClienLink{height: 290px;}
#ObjectInfo dd .detailed > li h3{height: 105px;width: 105px;}
#ObjectInfo dd .detailed > li h3 span{display: block;}
#ObjectInfo dd .detailed .detailed_text{width: calc(100% - 150px);}
#ObjectInfo dd .detailed .detailed_text .TableBox .t-tr .t-th:first-child {border-top-left-radius: 5px;border-bottom-left-radius: 5px;}
#ObjectInfo dd .detailed .detailed_text .TableBox .t-tr .t-th:last-child {border-top-right-radius: 5px;border-bottom-right-radius: 5px;}
#ObjectInfo dd .detailed .detailed_text .TableBox .t-th,#ObjectInfo dd .detailed .detailed_text .TableBox .t-tr .t-td {text-align:center;}
#ObjectInfo dd .detailed .detailed_text .TableBox .t-th p{padding-left: 0px;}
}
@media screen and (max-width: 768px) {
#ObjectInfo > dt h3{font-size:1.125rem}
#ObjectInfo > dt h4{font-size: 0.875rem;top:0}
#ObjectInfo dd .detailed > li h3{margin-bottom:10px;}
#ObjectInfo dd .detailed .device dl dd.no-select{display:none}
#ObjectInfo dd .detailed{width:auto}
#ObjectInfo dd .detailed > li {margin-bottom: 0px;padding-bottom: 0px;}
#ObjectInfo dd .detailed > li h3 {padding:5px;width:100%;}
#ObjectInfo dd .detailed > li h3 span{font-size:1rem;vertical-align:middle;padding: 2px 5px;}
#ObjectInfo dd .detailed > li h3 img{height:30px;width: 30px;}
#ObjectInfo dd .detailed dl{width: calc(100% / 2);}
#ObjectInfo dd .detailed dl dt {font-size: 0.8rem;}
#ObjectInfo dd .detailed .detailed_text{padding:0 5px;width: 100%;}
#ObjectInfo dd .detailed .detailed_text dl{padding: 5px;}
#ObjectInfo dd p{font-size: 1rem;}
#ObjectInfo dd .subtitle p{padding-bottom: 5px;text-align: left;}
#ObjectInfo dd .subtitle span{font-size: 1.15rem;vertical-align: middle;}
#ObjectInfo .TableBox .t-td p{border:none}
#ObjectInfo dd .detailed .detailed_text .TableBox .t-tr:first-child{display: none;}
#ObjectInfo dd .detailed .detailed_text .TableBox .t-tr{margin-bottom: 10px;border-radius: 5px;padding:0 8px;}
#ObjectInfo dd .detailed .detailed_text .TableBox .t-tr .title{font-size: 0.85rem;}
}
/*周邊資訊*/
#ObjectInfo .TableBox.style09{border-collapse: separate;}
#ObjectInfo .TableBox.style09 .t-td{width: 20%;padding: 10px;}
#ObjectInfo .TableBox.style09 .TableBox .t-td{text-align: left;padding: 0px;}
#ObjectInfo .TableBox.style09 .TableBox .t-td.subtitle{font-size: 1rem;padding-bottom:5px;}
#ObjectInfo .TableBox.style09 .TableBox .t-td span{margin-left: 5px;text-align: left;}
#ObjectInfo .TableBox.style09 .TableBox .t-td span,.TableBox.style09 .TableBox .t-td img{display: inline-block;	vertical-align: bottom;font-weight: bold;}
#ObjectInfo dd .subtitle span{line-height: 40px;}
@media screen and (max-width: 768px) {
#ObjectInfo .TableBox.style09 .TableBox {padding:10px;}
#ObjectInfo .TableBox.style09 .TableBox .t-td {text-align: left;}
#ObjectInfo .TableBox.style09 .TableBox .t-td p{padding:0px;}
#ObjectInfo .TableBox.style09 .TableBox .t-td span{font-size:1.025rem;}
}


/*---------------------*/ 
/*促銷圖示*/
.ObjectIcon {position: absolute;top: 10px;left: 0px;z-index: 50;width: 103px;}
.ObjectIcon img{background-image: url(../images/objecticon.png?200303);height: 110px;width: 103px;}
.ObjectIcon .icon01{background-position: left top;}
.ObjectIcon .icon02{background-position: -103px top;}
.ObjectIcon .icon03{background-position: -206px top;}
.ObjectIcon .icon04{background-position: -309px top;}
.ObjectIcon .icon05{background-position: -412px top;}
.ObjectIcon .icon06{background-position: -515px top;}
.ObjectIcon .icon07{background-position: -618px top;}
.ObjectIcon .icon08{background-position: -721px top;}
.ObjectIcon .icon09{background-position: -824px top;}
.ObjectIcon .icon10{background-image: url(../images/ic-friendly-source.png);background-size: cover;height: 100px;width: 100px;}
#TabbedPanels4 .TabbedPanelsContent img.pattern{max-height:calc(100% - 21px);}
#TabbedPanels4 .TabbedPanelsContent div.tips{font-size:15px;}
@media screen and (max-width: 480px) {
#TabbedPanels4 .TabbedPanelsContent img.pattern{max-height:calc(100% - 42px);}
}

.modal-obj-bnt{width: 60px;height: 60px;position: absolute;top:50px;right:10px;background-color: #FFF;border: 2px solid #5F98C6;z-index: 5;overflow: hidden;}
.modal-obj-bnt a{color: #5F98C6;font-weight: bold;position: relative;height: 60px;}
.modal-obj-bnt a:hover{color:#5F98C6;}
.modal-obj-bnt a:before{border-color:#DDDDDD33 #5F98C633 transparent transparent;border-style: solid solid solid solid;border-width: 60px 60px 0px 0px;left: 0;top:0;z-index: -1;}
.modal-obj-bnt a:hover:before{border-color:#5F98C633 #DDDDDD33 transparent transparent;}

.obj-bnt{position: absolute;top:65px;right:10px;z-index: 5;gap: 5px;flex-direction: column}
.obj-bnt li{width: 60px;height: 60px;overflow: hidden;background-color: #FFFFFF;}
.obj-bnt li.modal{border: 2px solid #5F98C6;}
.obj-bnt li.modal a{color: #5F98C6;font-weight: bold;position: relative;height: 60px;}
.obj-bnt li.modal a:hover{color:#5F98C6;}
.obj-bnt li.modal a:before{border-color:#DDDDDD33 #5F98C633 transparent transparent;border-style: solid solid solid solid;border-width: 60px 60px 0px 0px;left: 0;top:0;}
.obj-bnt li.modal a:hover:before{border-color:#5F98C633 #DDDDDD33 transparent transparent;}
.obj-bnt li img{max-height: 95%;max-width: 95%;}
.obj-bnt li.tiktok{border: 2px solid #FF0055;}
.obj-bnt li.ai_ab_bnt{width: 80px;height: 80px;background-color: transparent;transition: all .5s ease-out;display: flex;justify-content: center;}
.obj-bnt li.ai_ab_bnt img{width: 100%;height: 100%;}
.obj-bnt li.ai_ab_bnt:hover{transform: scale(1.1);transform-origin: center;}
/*---------------------*/ 
.imgbox img.youtubebnt,#TabbedPanels3 .item-recommend#self-item .imgbox img.youtubebnt{position: absolute;background-image: url(../images/youtube.png);background-repeat: no-repeat;background-position: center center;height: 60px;width: 80px;z-index: 5;left: calc(100%  / 2);top: calc(100%  / 2);border:none;}
.imgbox img.youtubebnt:hover,#TabbedPanels3 .item-recommend#self-item .imgbox img.youtubebnt:hover{background-image: url(../images/youtube-hover.png);}
.imgbox img.FBplaybnt,#TabbedPanels3 .item-recommend#self-item .imgbox img.FBplaybnt{position: absolute;background-image: url(../images/FBplay.png);background-repeat: no-repeat;background-position: center center;height: 60px;width: 80px;z-index: 5;left: calc(100%  / 2);top: calc(100%  / 2);border:none;}
.imgbox img.FBplaybnt:hover,#TabbedPanels3 .item-recommend#self-item .imgbox img.FBplaybnt:hover{background-image: url(../images/FBplay-hover.png);}
.imgbox img.tiktokbnt{position: absolute;background-image: url(../images/tiktokapp.png);background-repeat: no-repeat;background-position: center center;height: 60px;width: 80px;z-index: 5;left: calc(100%  / 2);top: calc(100%  / 2);border:none;opacity: .6;zoom: .8;}
.imgbox a.vertical:hover,.imgbox img.tiktokbnt:hover{opacity: 1;}
.imgbox a.vertical{background-color: #FFF;border-radius: 8px;opacity: .8;border: 2px solid #FF005580;}
.imgbox a.vertical:hover{opacity: 1;border: 2px solid #FF0055;}
@media screen and (min-width: 769px) {
#TabbedPanels3 .item-recommend .imgbox img.youtubebnt{background-image: url(../images/youtube-S.png);height: 30px;width: 50px;}
#TabbedPanels3 .item-recommend .imgbox img.youtubebnt:hover{background-image: url(../images/youtube-S-hover.png);}
#TabbedPanels3 .item-recommend .imgbox img.FBpalybnt{background-image: url(../images/FBplay-S.png);height: 30px;width: 50px;}
#TabbedPanels3 .item-recommend .imgbox img.FBpalybnt:hover{background-image: url(../images/FBplay-S-hover.png);}
}
@media screen and (max-width: 768px) {
.obj-bnt li.ai_ab_bnt{width: 65px;height: 65px;}
}
/*---------------------*/ 
/*特殊按鈕*/
.CustomerService input[type="button"] {line-height: 35px;height: 35px;border: 1px solid #CCC;}

/*閃動按鈕*/
.button_wrapper {display: inline-block;position: relative;width: 200px;height: 40px;display: flex;justify-content: center;align-items: center;margin:0 0 10px 0;}
.button_wrapper a {background: transparent;color: #fff;border: 3px solid #fff;border-radius: 50px;padding:8px 10px;outline: none;cursor: pointer;position: relative;transition: 0.2s ease-in-out;letter-spacing: 2px;}
.button_pulse a {width: 100%;position: absolute;top: 0;left: 0;z-index: 2;text-align: center;font-size: 16px;line-height: 18px;}
.pulsing:before, .pulsing:after,.button_pulse a {background: #FFC000;}
.button_pulse a:hover{color: #FFF;background-color: #F60;}
.button_pulse .button_wrapper:hover .pulsing:before {animation: pulsing 0.2s linear infinite;content: ""; position: absolute;background-color: #F60;}
.button_pulse .button_wrapper:hover .pulsing:after {animation: pulsing1 0.2s linear infinite;content: ""; position: absolute;background-color: #F60;}
.pulsing { width: 99%; height: 99%;border-radius: 50px;z-index: 1;position: relative;}
.pulsing:before, .pulsing:after {width: 100%;height: 100%;border: inherit;top: 0;left: 0;z-index: 0;border-radius: inherit;animation: pulsing 2.5s linear infinite;content: ""; position: absolute;}
.pulsing:after {animation: pulsing1 2.5s linear infinite;}
@keyframes pulsing {
  0% {opacity: 1;transform: scaleY(1) scaleX(1);}
  20% {opacity: 0.5;}
  70% {opacity: 0.2;transform: scaleY(1.8) scaleX(1.4);}
  80% {opacity: 0;transform: scaleY(1.8) scaleX(1.4);}
  90% {opacity: 0;transform: scaleY(1) scaleX(1);}
}
@keyframes pulsing1 {
  0% {opacity: 1;transform: scaleY(1) scaleX(1);}
  20% {opacity: 0.5;}
  70% {opacity: 0.2;transform: scaleY(1.3) scaleX(1.15);}
  80% {opacity: 0;transform: scaleY(1.3) scaleX(1.15);}  
  90% {opacity: 0;transform: scaleY(1) scaleX(1);}
}

/*複製分享內容按鈕*/
.learn-more {position: absolute;display: inline-block;cursor: pointer;outline: none;vertical-align: middle;text-decoration: none;padding: 0;width: 100px;height: auto;top: -5px;right: 0px;background: #EEE;}
.learn-more .circle {transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);position: relative;display: block;margin: 0;width: 30px;height: 30px;background-color: #069;}
.learn-more .circle i{color: #fff;position: absolute;left: 7px;top: 7px;}
.learn-more a {transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);position: absolute;top: 0;left: 0;right: 0;bottom: 0;padding: 0;margin: 0 5px 0 35px;color: #069;font-weight: 700;line-height: 30px;text-align: center;text-transform: uppercase;font-size: 14px;}
.learn-more:hover .circle {width: 100%;}
.learn-more:hover a { color: #fff;}
/*---------------------*/ 
/*分享內容按鈕*/
.sharebnt {position: relative;display: inline-block;cursor: pointer;vertical-align: middle;width: 80px;height: auto;background: #EEE;border: 1px solid #00C000;}
.sharebnt.lineicon .circle{transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);position: relative;display: block;margin: 0;width: 30px;height: 30px;}
.sharebnt .circle:before{content: "";background: url(../images/LINE02.svg) no-repeat center center;width: 30px;height: 30px;display: block;background-size:80%;}
.sharebnt a {transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: 0 10px 0 30px;color: #00C000;line-height: 30px;text-align: center;}
.sharebnt:hover .circle {width: 100%;background-color: #00C00066;}
.sharebnt:hover a {color: #fff;}
/*---------------------*/ 





.error {margin-top: 10%;margin-bottom:10%;}
.error dt{height: 179px;width: 225px;margin-right: auto;margin-left: auto;}
.error dt img{height:100%;width:100%;}
.error dd{text-align: center;padding-top: 10px;}
.error dd h3{font-size: 30px;line-height: 55px;}
.error dd h4{font-size:16px;color: #666;margin-bottom: 20px;}
.error dd a{font-size:16px;line-height: 35px;display: inline-block;	width: 100px;margin-right: 5px;margin-left: 5px;}


#StreetView{margin-bottom:10px}
#SubTitle{margin-bottom:10px;padding-bottom:10px;font-size:16px}
#SubTitle .spreadsheet{background-position:-150px -90px;height:16px;width:14px;background-repeat:no-repeat;margin-right:5px;vertical-align:middle}




/*公告*/
.bulletinbox{position: fixed;border: 1px solid #CCC;background-color: #F9F9F9;padding: 25px 15px 15px 15px;width: 450px;top: calc((100% - 250px) / 2);left: calc((100% - 450px) / 2);z-index: 10001;box-shadow:1px 1px 5px 0px rgba(20%,20%,40%,0.5);}
.bulletinbox section{position: relative;}
.bulletinbox section i{position: absolute;top: -30px;right:-15px;padding: 10px;}
.bulletinbox span{color: #F00;font-weight: bold;}
.bulletinbox a.bnt{color: #FFF;padding: 5px 10px;margin-top: 10px;display: inline-block;background-color: #069;}
@media screen and (max-width: 480px) {
.bulletinbox{width: 80%;left: calc((100% - 80%) / 2);}
}

/*節能E好宅*/
.ObjectList .item_features li.good-e-tag,#ObjectInfo .item_features li.good-e-tag{margin:0 5px 0 0px;height:32px;border: none;padding: 2px;}
.good-e-tag .tag:before{content:"";display:inline-block;width:100px;height:26px;background-size: 100% 100%;}
.good-e-tag .tag3::before{background-image: url(../images/e-tag-3.svg);}
.good-e-tag .tag4::before{background-image: url(../images/e-tag-4.svg);}
.good-e-tag .tag5::before{background-image: url(../images/e-tag-5.svg);}
.good-e-tag .tag6::before{background-image: url(../images/e-tag-6.svg);}


.mapschool, .mapLoc{gap: 3px; position:absolute; z-index:1}
.mapschoolTip{font-size:13px;margin-top: -5px;margin-bottom: 5px;gap: 5px;flex-wrap: nowrap;}
/* 那個 margin-top:-5px 會讓地圖「下方」那行說明往上鑽進地圖的方框裡。
   沒有列表面板時看不出來，有面板時面板正好蓋在那 5px 上（面板是貼齊地圖
   上下緣的，見 objlist.js 的 syncPanelToMap），那行字的上緣就被切掉。
   只在有面板的地圖上取消負邊界，不影響其他頁面的間距。 */
.map-wrap > .mapschoolTip{margin-top:0;}
@scope(.mapschoolTip){
dt{flex: 1;line-height: 1.2em;}
dd{flex-wrap: nowrap;}
dd a{border-radius: 5px;padding: 5px;color: #FFF;font-size: 1rem;}
dd a:hover{color: #FFF;}
dd a span{margin-right: 5px;}
dd a.default{background-color: #006699;}
dd a.default span{width: 12px;height: 12px;display: block;position: relative;margin: 2px 5px 6px 5px;}
dd a.default span i,dd a.default span:before,dd a.default span:after{width: 12px;height: 12px;border-radius: 50%;background-color: #FFFFFF80;content: "";display: block;}
dd a.default:hover span i,dd a.default:hover span:before,dd a.default:hover span:after{width: 14px;height: 14px;}
dd a.default span i {position: absolute;left: calc((100% - 12px) / 2);top:0}
dd a.default span:before{position: absolute;left: -4px;bottom: -6px;}
dd a.default span:after{position: absolute;right:-4px;bottom: -6px;}
dd a.default:hover span i {left: calc((100% - 14px) / 2);}
dd a.location{background-color: #009966;}
dd a.location span{position: relative;margin: 10px 5px 0px 5px;width: 12px;height: 12px;border-radius: 50%;background-color: #FFFFFF80;}
dd a.location span:before{content: "\f1ae";position: absolute;bottom: 5px;left: calc((100% - 12px) / 2);color: #FFF;font-size: 16px !important;}
dd a.location:hover span:before{bottom: 8px;transition: all 0.5s ease-out;}
}
@scope(.mapLoc){
a{border-radius: 27px;padding: 5px 10px;color: #FFF;font-size: 0.9rem;display: inline-block;text-align: center;}
a:hover{color: #FFF;}
a span{margin-right: 5px;}
a.default{background-color: #006699;}
a.default span{width: 12px;height: 12px;display: block;position: relative;margin: 2px auto 6px;}
a.default span i,a.default span:before,a.default span:after{width: 12px;height: 12px;border-radius: 50%;background-color: #FFFFFF80;content: "";display: block;}
a.default:hover span i,a.default:hover span:before,a.default:hover span:after{width: 14px;height: 14px;}
a.default span i {position: absolute;left: calc((100% - 12px) / 2);top:0}
a.default span:before{position: absolute;left: -4px;bottom: -6px;}
a.default span:after{position: absolute;right:-4px;bottom: -6px;}
a.default:hover span i {left: calc((100% - 14px) / 2);}
a.location{background-color: #009966;}
a.location span{position: relative;margin: 10px auto 0px;width: 12px;height: 12px;border-radius: 50%;background-color: #FFFFFF80;display: block;}
a.location span:before{content: "\f1ae";position: absolute;bottom: 5px;left: calc((100% - 12px) / 2);color: #FFF;font-size: 16px !important;}
a.location:hover span:before{bottom: 8px;transition: all 0.5s ease-out;}
}
@media screen and (min-width: 769px) {
.mapschool{top:20px; right:10px;}
.mapschool .btn{padding:5px 10px;font-size: 1.25rem;}
.mapschool .btn:before{content: "";display: block;margin-right: 5px;width: 20px;height: 20px;background-size: cover;}
.mapschool .btn:first-child:before{content: "\f00d";}
.mapLoc{bottom:40px; right:10px;}
}
@media screen and (max-width: 768px) {
.mapschool{top:10px; right:0px;}
.mapschool .btn{padding:3px 5px;font-size: 15px;}
.mapschoolTip dd a font{display: none;}
.mapLoc{bottom:40px; right:0px;}
}


/*物件列表精選*/
#recomBox{position: relative;margin-bottom: 20px;}
#recomBox header {height: 5px;margin-top: 15px;margin-bottom: 20px;position: relative;}
#recomBox header h3,#recomBox header h4 {position: absolute;top: -13px;padding-right: 10px;line-height: 30px;}
#recomBox header h3 {left: 0px;font-size: 1.25em;font-weight: bold;}
#recomBox header h4 {right: 0px;font-size: 0.875rem;padding-left: 10px;}
#recomBox header h3 img {height: 30px;width: 36px;background-repeat: no-repeat;margin-right: 10px;}
#recomBox header h3.ShowBuy img{background-position: -184px -127px;}
#recomBox header h3.ShowRent img{background-position: -220px -127px;}
#recomBox #recomList {padding: 0 10px;}
#recomBox #recomList ul li {width:calc(100% / 6);padding: 0 10px;height: auto;position: relative;}
#recomBox #recomList ul li .imgbox{height: 55%;width: calc(100% - 10px);position: absolute;top: 5px;overflow: hidden;}
#recomBox #recomList ul li .imgbox img {width: 100%;}
#recomBox #recomList ul li dl{align-content: stretch;padding: 5px;width: 100%;}
#recomBox .swiper-button-next{right: -5px;}
#recomBox .swiper-button-prev{left: -5px;}
#recomBox #recomList ul li.house_block{position:relative;z-index:50;}
#recomBox #recomList ul li.house_block dl {cursor: pointer;position: relative;padding-top:65%;}
#recomBox #recomList dl dt .imgbox{height: 130px;border-style: none;}
#recomBox #recomList dl dd{padding: 5px;font-size: 0.875rem;width:100%;}
#recomBox #recomList dl h2 a{font-size: 16px;font-weight: bold;overflow : hidden; text-overflow : ellipsis; white-space : nowrap;display: block;}
#recomBox #recomList dl h3{font-size: 14px;}
#recomBox #recomList dl h4 span{margin-top:3px}
#recomBox #recomList dl h4 .discount{font-family:Arial,Helvetica,sans-serif;font-size:24px;}
#rent #recomBox header h3.ShowBuy{display: none;}
#rent #recomBox header h3.ShowRent{display: block;}
@media screen and (max-width: 768px) {
#recomBox #recomList ul li .imgbox *{vertical-align:middle}
#recomBox #recomList dl h2,#recomBox #recomList dl h3{line-height: 20px;}
}
@media screen and (max-width: 400px) {
#recomBox #recomList ul li.house_block dl {padding-top: 90%;}
#recomBox #recomList ul li .imgbox {height: 48%;}
}
/*----------------*/


/*===== 地圖搜尋的物件列表面板 =====================================
  面板絕對定位在地圖右側，地圖容器的 max-width 與高度都不動。
  卡片刻意使用自己的 class（mol-*）而不沿用 .item-recommend / .house_block ——
  那兩組在 item-recommend.css、layout0.css、FocusBoxItem*.css 與九支 colorN.css
  裡有幾十條輪播專用的版面規則，在窄面板裡要逐條覆蓋，且那九支配色檔無法實測。
  代價是不會自動繼承品牌配色；價格沿用全站慣用的紅色，其餘為中性色，
  各品牌要調整時在自己的 colorN.css 加規則即可。
================================================================*/
/* 面板尺寸只在這裡定義一次：面板自己的寬高，以及地圖要讓出多少空間
   （桌機 width: calc(100% - var(--mol-w))、手機 height: calc(78vh - var(--mol-h))），
   兩邊各寫一份數字遲早會不同步。

   --mol-w 的 30% 是相對 .map-wrap 算的 —— 面板與那條 calc 都在 .map-wrap
   底下，同一個基準，所以地圖與面板加起來剛好等於容器寬。

   --mol-h 刻意用 vh 而不是 %：它要被放進 calc(78vh - …)，% 在那裡沒有意義
   （會變成相對容器高，而容器高本身就是被這個 calc 決定的，循環）。 */
/* --mol-h 從 34vh 提高到 45vh（UX 回報：「抽屜裡只看得到 1.4 張卡片」）。

   實測（視窗 606×717、手機斷點）一張卡片連間距是 131px，而抽屜可視區高度
   ≈ --mol-h × 視窗高 - 標題列 - 載入更多：
     34vh → 可掃視 1.25 張
     42vh → 1.87 張
     45vh → 2.03 張（兩張完整）
   45vh 是「剛好看得到兩張完整卡片」的門檻，也是可接受的上限 ——
   地圖還剩 33vh（78vh - 45vh，約 237px），再往上加就矮到看不出位置關係了。
   卡片本身也壓過一輪（見下面手機斷點裡把標記與「查看物件」併成一行），
   150px → 123px，兩件事一起才跨過兩張。 */
.map-wrap{position:relative;--mol-w:clamp(300px,30%,380px);--mol-h:45vh;}

.map-objlist{position:absolute;top:0;right:0;height:100%;z-index:80;
  width:var(--mol-w);
  display:flex;flex-direction:column;
  background:#fff;box-shadow:-2px 0 8px rgba(0,0,0,.15);
  font-size:14px;color:#333;text-align:left;}

.map-objlist-head{flex:0 0 auto;padding:10px 12px;border-bottom:1px solid #ddd;
  font-size:14px;line-height:1.4;}
.map-objlist-count b{font-weight:bold;}

.map-objlist-body{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;padding:8px;}
.map-objlist-body ul{display:block;margin:0;padding:0;list-style:none;}

.map-objlist li.mol-card{display:block;position:relative;width:auto;height:auto;float:none;
  margin:0 0 8px 0;padding:0;overflow:hidden;
  border:1px solid #e3e3e3;border-radius:3px;background:#fff;cursor:pointer;}
.map-objlist li.mol-card:after{content:"";display:block;clear:both;}
.map-objlist li.mol-card:hover{box-shadow:0 2px 8px rgba(0,0,0,.18);}

/* font-size:0 讓照片 404 時退化成灰底，而不是撐出一段 alt 文字 */
/* 縮圖 96px 而不是 112px：面板在 1440 這種常見筆電寬度會撞到 --mol-w 的下限
   300px，扣掉縮圖只剩 131px 給文字，而案名實測需要 176px —— 三行全部被裁。
   縮圖讓出 16px，其餘靠案名折行解決（見下）。
   不改用「把面板加寬」處理：面板每寬一分，地圖就窄一分，而地圖才是主角。 */
.map-objlist .mol-thumb{float:left;display:block;width:96px;height:88px;
  margin:0;padding:0;border:0;background:#efefef;overflow:hidden;font-size:0;}
.map-objlist .mol-thumb img{display:block;width:96px;height:88px;object-fit:cover;border:0;}
.map-objlist .mol-nopic{display:block;width:96px;height:88px;background:#efefef;}

.map-objlist .mol-info{display:block;margin-left:96px;padding:6px 8px;min-height:88px;}
/* 案名允許折兩行。原本是 nowrap + ellipsis，窄面板下會裁成
   「測試物件0059號 …」—— 編號後面的「捷運三房／公園首排」全沒了，
   使用者分不出是哪一筆。案名是卡片上最重要的欄位，寧可多佔一行。
   line-clamp 是為了讓超長案名仍有上限；不支援的瀏覽器會退成完整顯示（可接受）。 */
.map-objlist .mol-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  font-size:15px;line-height:1.35;color:#222;text-decoration:none;
  overflow:hidden;word-break:break-all;}
.map-objlist .mol-name:hover{text-decoration:underline;}
.map-objlist .mol-addr{display:block;margin-top:3px;font-size:12px;line-height:1.35;color:#777;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.map-objlist .mol-price{display:block;margin-top:5px;line-height:1.2;}
.map-objlist .mol-price span{font-size:12px;color:#777;margin-right:4px;}
.map-objlist .mol-price b{font-size:18px;font-weight:bold;color:#d0021b;}

.map-objlist-msg{display:none;padding:24px 16px;text-align:center;font-size:14px;line-height:1.7;color:#666;}

/* 重查期間只遮面板，不用全頁遮罩 */
.map-objlist-loading{display:none;position:absolute;top:0;left:0;right:0;bottom:0;
  background:rgba(255,255,255,.7);z-index:5;}
.map-objlist.is-loading .map-objlist-loading{display:block;}
.map-objlist-loading span{position:absolute;left:50%;top:40%;width:28px;height:28px;margin:-14px 0 0 -14px;
  border:3px solid #ccc;border-top-color:#888;border-radius:50%;
  animation:mapObjListSpin .8s linear infinite;}
@keyframes mapObjListSpin{to{transform:rotate(360deg)}}

.map-objlist-head{display:flex;align-items:center;justify-content:space-between;gap:8px;}

/* 同座標分組（#42）：列表收斂成「這個位置的那幾筆」時的說明列。
   底色與主體區分開，讓「現在不是全部」一眼看得出來；出口就在同一列，
   使用者不會被困在過濾狀態裡。 */
.map-objlist-stack{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:8px;padding:7px 12px;border-bottom:1px solid #ddd;background:#fff8e1;
  font-size:13px;line-height:1.4;color:#5d4200;}
.map-objlist-stack-back{flex:0 0 auto;padding:2px 10px;border:1px solid #b98900;border-radius:3px;
  background:#fff;color:#7a5a00;font-size:12px;cursor:pointer;}
.map-objlist-stack-back:hover{background:#fff3cd;}
.map-objlist-sort{flex:0 0 auto;max-width:46%;padding:2px 4px;font-size:12px;
  border:1px solid #ccc;border-radius:3px;background:#fff;color:#333;cursor:pointer;}

/* 卡片的完整欄位（#32）：規格、降幅、標記、收藏 */
.map-objlist .mol-thumb,.map-objlist .mol-thumb img,.map-objlist .mol-nopic{height:104px;}
.map-objlist .mol-info{min-height:104px;position:relative;padding-right:26px;}

/* 規格改成可折行，不再 nowrap + ellipsis。

   截斷在這一行特別糟：實測窄面板會顯示「建坪 55.36 · 55 · 15…」——
   那個「15…」是「15年」被切一半，讀出來變成錯的資訊（15 什麼？），
   比不顯示更差。折行只是多佔一行高度，但每個值都是完整的。

   分隔點的左右留白從 5px 收到 4px，順便讓一行塞得下更多。 */
.map-objlist .mol-specs{margin-top:2px;font-size:12px;line-height:1.35;color:#555;
  white-space:normal;overflow:hidden;}
.map-objlist .mol-specs i{margin:0 4px;font-style:normal;color:#ccc;}

.map-objlist .mol-price{margin-top:3px;white-space:nowrap;overflow:hidden;}
.map-objlist .mol-cut{margin-left:6px;}
.map-objlist .mol-cut del{font-size:12px;color:#999;margin-right:4px;}
.map-objlist .mol-cut em{font-size:12px;font-style:normal;color:#fff;background:#d0021b;
  padding:1px 4px;border-radius:2px;}

.map-objlist .mol-badges{margin-top:4px;line-height:1;white-space:nowrap;overflow:hidden;}
.map-objlist .mol-badge{display:inline-block;margin:0 4px 0 0;padding:2px 5px;
  font-size:11px;line-height:1.3;color:#556;background:#eef1f5;border-radius:2px;}

/* 收藏愛心。
   結構完全照抄站上既有的 a.favorites > img.join-favourites —— favorites.js 靠
   find('img').hasClass('join-favourites') 判斷要送 add 還是 del，靠 .children()
   換 class 改狀態，少了那個 img 會員就永遠加不進最愛。
   既有的心形圖是 .ObjectList 底下的 CSS sprite，取不到，這裡用 inline SVG 自己畫，
   不新增圖檔（images/ 被 .gitignore 全域忽略，新圖進不了版控）。 */
.map-objlist .mol-fav{position:absolute;top:5px;right:2px;width:22px;height:22px;
  display:block;text-decoration:none;background:none;border:0;padding:0;}
.map-objlist .mol-fav img{display:block;width:22px;height:22px;border:0;
  background-repeat:no-repeat;background-position:center;background-size:19px 19px;}
.map-objlist .mol-fav img.join-favourites{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b0b0b0' stroke-width='2'%3E%3Cpath d='M12 20.5C12 20.5 3 15 3 9.2 3 6.3 5.2 4.5 7.5 4.5c1.7 0 3.4 1 4.5 2.6 1.1-1.6 2.8-2.6 4.5-2.6 2.3 0 4.5 1.8 4.5 4.7 0 5.8-9 11.3-9 11.3z'/%3E%3C/svg%3E");}
.map-objlist .mol-fav:hover img.join-favourites{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d0021b' stroke-width='2'%3E%3Cpath d='M12 20.5C12 20.5 3 15 3 9.2 3 6.3 5.2 4.5 7.5 4.5c1.7 0 3.4 1 4.5 2.6 1.1-1.6 2.8-2.6 4.5-2.6 2.3 0 4.5 1.8 4.5 4.7 0 5.8-9 11.3-9 11.3z'/%3E%3C/svg%3E");}
.map-objlist .mol-fav img.del-favourites{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d0021b'%3E%3Cpath d='M12 20.5C12 20.5 3 15 3 9.2 3 6.3 5.2 4.5 7.5 4.5c1.7 0 3.4 1 4.5 2.6 1.1-1.6 2.8-2.6 4.5-2.6 2.3 0 4.5 1.8 4.5 4.7 0 5.8-9 11.3-9 11.3z'/%3E%3C/svg%3E");}

/* ---- 收合／展開（#34）----------------------------------------------
   收合鈕在可收合內容之外，收合後仍看得見。桌機收成右緣的窄把手，
   手機收成底部的把手 —— 同一個 class，兩種尺寸交給下面的斷點處理。 */
/* 對比刻意比原本高（原本是 #ddd 邊框 + #666 箭頭，UX 回報「看不出那是可以點的」）。
   邊框與文字都加深，箭頭加粗 —— 這是整個面板唯一的開關，找不到它就等於面板不見了。 */
.map-objlist-toggle{position:absolute;z-index:10;padding:0;margin:0;cursor:pointer;
  border:1px solid #999;background:#fff;color:#222;font-size:14px;line-height:1;
  font-weight:bold;}
.map-objlist-toggle:before{content:"›";display:block;font-size:20px;line-height:1;}
.map-objlist.is-collapsed .map-objlist-toggle:before{content:"‹";}
.map-objlist.is-collapsed .map-objlist-head,
.map-objlist.is-collapsed .map-objlist-body,
.map-objlist.is-collapsed .map-objlist-msg,
.map-objlist.is-collapsed .map-objlist-loading{display:none;}

/* 手機版的「查看物件」連結，桌機不需要（卡片較寬、留白足夠） */
.map-objlist .mol-more{display:none;}

@media screen and (min-width: 769px) {
  /* 面板不浮在地圖上，而是讓地圖真的變窄（#51）。
     這一條是整張票的關鍵：地圖元素 == 看得到的地圖，於是
     mapBoundsStr() 送出的範圍、後端距離排序用的中點（t/b/l/r 的中心）、
     以及定位鈕與點 marker 的「置中」全部自動正確 ——
     不需要任何「扣掉被面板蓋住那塊」的補償計算。
     收合後不加這條，地圖回到滿寬（把手只有 22px 且 pointer-events:none，
     蓋住的那一絲不值得為它再算一次範圍）。 */
  .map-wrap.list-open > #searchMap{width:calc(100% - var(--mol-w));}

  .map-objlist-toggle{top:50%;left:-22px;margin-top:-24px;width:22px;height:48px;
    border-right:0;border-radius:3px 0 0 3px;box-shadow:-2px 0 6px rgba(0,0,0,.12);}
  /* 收合後只剩一條透明的窄長條，但它仍是 z-index:80 的整段高度，會攔截底下
     地圖按鈕最右側的點擊 —— 看不見卻擋得住。除了把手本身，一律讓點擊穿透。 */
  .map-objlist.is-collapsed{width:22px;background:transparent;box-shadow:none;
    pointer-events:none;}
  .map-objlist.is-collapsed .map-objlist-toggle{left:0;pointer-events:auto;}
}

/* ---- 手機：地圖與列表剛好一屏（#34）--------------------------------
   #searchMap 的高度是伺服器端寫成 inline style 的（桌機 850px），而決定它的
   判斷只認 `^mobile` 開頭的主機名 —— 主站在窄視窗下走的是 RWD，不匹配那個條件，
   所以手機上會拿到比視窗還高的 850px 地圖。這裡用 !important 覆蓋掉：
   醜，但比為了乾淨去動一支所有品牌共用的 inline style 安全得多。
   （把高度整體搬進 CSS 是另一件事，不在本票範圍。）                        */
@media screen and (max-width: 768px) {
  /* 選擇器必須限定在 .map-wrap 底下：object.css 是無條件套用到全站的，而
     id="searchMap" 不是 buy.aspx 專屬 —— ai_chat/Default.aspx、DefaultV2.aspx
     （inline 850px、沒有任何手機判斷）與 object/view.aspx（inline 677px）
     都用同一個 id。不限定範圍的話這條 !important 會一併改掉那三頁的地圖高度，
     而本票只驗過 buy.aspx。
     .map-wrap 是 objlist.js 建立面板時包上去的，而它在 Ajax_Record 送出請求前
     就透過 loading(true) 建好 —— 早於後端回應裡的 showmap()，所以地圖建構時
     量到的高度已經是正確的。 */
  .map-wrap > #searchMap{height:78vh !important;}

  .map-objlist{top:auto;right:0;left:0;bottom:0;width:auto;height:var(--mol-h);
    box-shadow:0 -2px 8px rgba(0,0,0,.15);}
  .map-objlist.is-collapsed{height:34px;background:#fff;box-shadow:0 -2px 8px rgba(0,0,0,.15);}

  /* 兩態抽屜（#51）。手機預設是收起 —— 那是「看地圖」的狀態，
     地圖佔滿全高，底部只留一條把手。

     打開時抽屜排到地圖「下方」（正常流），地圖同步變矮讓出空間，
     而不是浮上去把地圖下半蓋掉。理由與桌機那條相同：
     地圖元素 == 看得到的地圖，範圍與置中就不必補償。

     用 relative 而不是 static：把手是 position:absolute，
     靠面板自己當定位基準；改成 static 的話它會跑去對齊 .map-wrap 的右上角。
     （對應地，syncPanelToMap 在這個狀態下不能再寫 inline bottom ——
     relative 的 bottom 是位移，不是貼齊。） */
  .map-wrap.list-open > #searchMap{height:calc(78vh - var(--mol-h)) !important;}
  .map-wrap.list-open .map-objlist{position:relative;height:var(--mol-h);}

  .map-objlist-toggle{top:-1px;right:8px;left:auto;width:44px;height:34px;
    border-bottom:0;border-radius:3px 3px 0 0;box-shadow:0 -2px 6px rgba(0,0,0,.12);}
  .map-objlist-toggle:before{content:"⌄";font-size:18px;}

  /* 收起狀態下整個面板就是一條 34px 的白色橫條，只有一個箭頭 —— 使用者看不出那是
     什麼（UX 回報）。收起時給它文字標籤，寬度改成隨內容走。
     只在收起時加字：展開時標題列已經寫著筆數，把手旁邊再放字是重複的。 */
  .map-objlist.is-collapsed .map-objlist-toggle{top:0;width:auto;padding:0 12px;
    font-size:13px;}
  .map-objlist.is-collapsed .map-objlist-toggle:before{content:"⌃ 物件列表";
    font-size:13px;}

  /* 標題列讓出收合鈕的位置 */
  .map-objlist-head{padding-right:60px;}

  /* 抽屜高度有限，卡片每省一列就多看到一點下一張。「標記」與「查看物件」原本各佔
     一列（實測 18px + 27px），改成同一列：標記靠左、連結靠右。
     卡片總高由資訊區決定（實測資訊區 148px、縮圖只有 104px），所以省資訊區的列
     才會真的變矮 —— 縮小縮圖是沒有用的。 */
  .map-objlist .mol-badges{display:inline-block;vertical-align:middle;
    max-width:calc(100% - 72px);}
  .map-objlist .mol-more{display:inline-block;float:right;margin-top:4px;
    font-size:12px;color:#0066cc;text-decoration:underline;}
}

/* ---- 「讓開地圖自己的按鈕」已經不需要了（#51）--------------------
   這裡原本有兩組規則，把圖霸絕對定位在地圖右緣的按鈕（.mapschool 在右上、
   .mapLoc 在右下）往內推 var(--mol-w) / var(--mol-h)，因為浮動面板整組蓋住
   它們、而且面板 z-index 80 對它們的 1，是完全點不到。

   面板改成「讓開地圖」之後（桌機並排、手機兩態抽屜），面板與地圖不再重疊，
   那些按鈕本來就在自己的地圖裡、沒有被任何東西蓋到。補償規則留著反而是錯的：
   會把按鈕從地圖右緣往內推 374px（桌機）或從下緣抬高 34vh（手機），
   推到地圖中間去。所以整段移除，而不是改參數。 */

/* 被點選的卡片（#33）：與地圖上開啟的資訊窗互相對應 */
.map-objlist li.mol-card{cursor:pointer;}
.map-objlist li.mol-card.is-active{border-color:#d0021b;box-shadow:0 0 0 1px #d0021b inset;}

/* 取得焦點的卡片：桌機是指標所在那張，手機是捲到焦點線的那張。
   邊框色刻意用 marker 高亮的同一個琥珀色（PIN_HOT #F9AB00），
   使用者才看得出「這張卡片」與「那顆亮起來的 marker」是同一個物件。 */
.map-objlist li.mol-card.is-focus{border-color:var(--map-focus,#F9AB00);
  box-shadow:0 0 0 2px var(--map-focus,#F9AB00) inset;
  background:var(--map-focus-bg,#fffdf6);}
/* 點選狀態比焦點狀態優先：兩個同時成立時看得出哪張是真的被點開的 */
.map-objlist li.mol-card.is-active.is-focus{border-color:#d0021b;
  box-shadow:0 0 0 1px #d0021b inset;}

/* 「載入更多」（#35） */
.map-objlist-more{display:none;padding:4px 0 10px;text-align:center;}
.map-objlist-more button{width:100%;padding:8px 10px;font-size:13px;cursor:pointer;
  color:#333;background:#f2f4f7;border:1px solid #d8dde3;border-radius:3px;}
.map-objlist-more button:hover{background:#e8ecf1;}
.map-objlist-more button[disabled]{cursor:default;color:#999;background:#f7f8fa;}

/* ---- 地圖資訊窗（#46）------------------------------------------------
   後端組出的 .map-iw 區塊，兩套地圖共用同一份 HTML：
   Google 塞進 google.maps.InfoWindow（maxWidth 是 GMW，780/970/1248），
   圖霸塞進 gomp 的 popup（窄）。做法是把兩邊的容器都收斂到同一個寬度上限，
   內容本身則完全流動 —— 這正是「統一」的做法，而不是像原本那樣在 JS 裡用
   字串置換去適應不同容器。

   視覺 token 沿用地圖列表卡片（.mol-*）：同一個物件在資訊窗與列表裡
   顯示的是同一批欄位，字級與顏色一致比較好認。 */
/* 注意：圖霸 popup 的寬度**不能用 CSS 調**。gomp（MapLibre）把 maxWidth
   當成 inline style 寫在 popup 元素上（預設 240px），任何外部樣式都蓋不過去。
   要改只能從建構子的 maxWidth 選項給 —— 見 map8func.js 的 _objectPopupClick。
   Google 的 InfoWindow 則是用 maxWidth: GMW（780 起跳），本來就夠寬。

   寬度交給容器決定，不自己寫死 —— 寫死再配 max-width:100% 只會被容器壓縮，
   然後還得用 viewport 斷點去救，而 viewport 寬度跟容器寬度是兩件事。 */
.map-iw{width:auto;min-width:0;box-sizing:border-box;
  font-size:14px;line-height:1.4;color:#333;text-align:left;}
.map-iw:after{content:"";display:block;clear:both;}

.map-iw-thumb{float:left;display:block;width:96px;height:76px;overflow:hidden;
  margin-right:10px;background:#efefef;}
.map-iw-thumb img{display:block;width:96px;height:76px;object-fit:cover;border:0;}
.map-iw-nopic{display:block;width:96px;height:76px;background:#efefef;}

.map-iw-info{display:block;overflow:hidden;}

/* 案名最多兩行。測試資料的案名很長（「測試物件0039號 角間店面」），不限制
   會把資訊窗撐得比縮圖高一倍，其餘欄位被推到看不見的地方。 */
.map-iw-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;font-size:15px;font-weight:bold;line-height:1.35;
  color:#222;text-decoration:none;}
.map-iw-name:hover{color:#222;text-decoration:underline;}

.map-iw-addr{display:block;margin-top:3px;font-size:12px;line-height:1.35;color:#777;}

.map-iw-specs{display:block;margin-top:2px;font-size:12px;line-height:1.35;color:#555;}
.map-iw-specs i{margin:0 5px;font-style:normal;color:#ccc;}

.map-iw-price{display:block;margin-top:5px;line-height:1.2;}
.map-iw-price span{font-size:12px;color:#777;margin-right:4px;}
.map-iw-price b{font-size:18px;font-weight:bold;color:#d0021b;}

.map-iw-more{display:inline-block;margin-top:6px;font-size:12px;
  color:#0066cc;text-decoration:underline;}
.map-iw-more:hover{color:#0066cc;}

/* 真正的小螢幕：視窗本身就窄，popup 上限吃不到 340px，改成縮圖在上、
   文字在下的直式排列。注意這是「視窗」斷點而不是「容器」斷點 —— 兩者是
   不同的東西，桌機上容器窄的問題已經用上面放寬 popup 上限解決了，
   不能靠這個斷點去救（我第一版就是這樣寫錯的）。 */
@media screen and (max-width: 420px) {
  .map-iw-thumb{float:none;width:100%;height:120px;margin:0 0 8px;}
  .map-iw-thumb img,.map-iw-nopic{width:100%;height:120px;}
}

/* hover 小提示（Google 端）：只有一行案名。
   Maps 的 InfoWindow 一定會畫一顆關閉鈕，但滑過去就出現、移開就消失的提示不需要
   關閉鈕（圖霸的 hover 提示也沒有），而且它會把提示撐寬。這裡把它藏掉 ——
   只針對提示，完整資訊窗的關閉鈕要留著。 */
.gm-style .map-iw-tip{font-size:13px;line-height:1.4;white-space:nowrap;}
.gm-style .gm-style-iw-c:has(.map-iw-tip) .gm-ui-hover-effect{display:none !important;}

/* 這裡原本有一顆「定位鈕」（卡片右上角的大頭針），已移除。

   它做的事 —— 置中該物件、開資訊窗、高亮卡片 —— 點卡片本體全部都有，
   兩者差別只剩「列表要不要依新中心重排」。而列表在使用者剛點完之後重排，
   等於他點的那張卡片自己跳走，那正是這一系列改動一路在消除的錯位感
   （hover 自動平移造成的無限重查是同一家族）。所以留一種行為，不留兩種。

   卡片點擊走 bindCardClick → mapPanTo（會抑制那一次重查，列表不動）+
   mapOpenPopup。 */

/* ---- 地圖圖釘的品牌色 ------------------------------------------------
   兩套地圖（Google 與圖霸）的圖釘都是用 canvas / SVG 現場畫的，顏色從這個
   自訂屬性讀（見 googlemapfunc.js 的 PIN_COLOR、map8func.js 的 PIN_FILL）。
   讀不到就退回預設的綠，所以沒有指定的品牌維持原本外觀。

   為什麼掛在 body.brand-{KeyBrands} 而不是主題檔（css/color{N}.css）：
   主題是按 DB 的 Style 分的，多個品牌會共用同一支（實測 www.houseol.com.tw
   與 aidemo 都是 color9），寫進主題檔會連帶改到其他品牌。
   body 的 brand-* class 由 MasterPage.master.vb 掛上。

   hover 的高亮色刻意不跟著品牌走 —— 那是狀態色，兩套地圖、所有品牌都用同一個
   琥珀色，使用者才不需要每換一個站就重新學一次。 */
:root{--map-pin:#199f6a;}
/* 台灣房仲網（houseol，KeyBrands=2）：品牌紅。取樣自站上實際使用的紅字。 */
body.brand-2{--map-pin:#E60012;}

/* 列表卡片取得焦點時的邊框色，可依品牌設定。
   預設琥珀 —— 它同時是 marker 高亮的顏色，兩邊一致。
   群義（chyi，KeyBrands=42）改用品牌綠。
   **marker 的高亮色刻意不跟著改**：chyi 的圖釘本身就是綠的，marker 也綠就分不出
   哪一顆亮著 —— 高亮的功能是「在一堆同色的東西裡指出一個」。所以只有卡片邊框
   跟品牌走，地圖上的高亮一律維持琥珀。 */
:root{--map-focus:#F9AB00;--map-focus-bg:#fffdf6;}
body.brand-42{--map-focus:#199f6a;--map-focus-bg:#f6fdf9;}

/* ---- Google InfoWindow 的表頭留白 ------------------------------------
   新版 Maps JS 會在內容上方放一個 .gm-style-iw-ch 表頭區（給關閉鈕與
   無障礙標題用），預設有一大塊 padding-top。我們的 .map-iw 自己就有完整
   版面，那塊留白只是讓圖卡上方空一大截。
   收掉表頭內距、並把外層容器的內距調小到剛好包住內容。

   ## 為什麼要用 :has(.map-iw) 限定範圍

   這支 css/object.css 是站台全域載入的（header.ascx / headerv2.ascx 的
   Css_ts），而 .gm-style-iw-* 是 Maps 自己的內部 class —— 不限定範圍的話，
   站上每一個 google.maps.InfoWindow 都會被改到，包含：
     - JavaScripts/objectview.js（物件詳情頁的地圖）
     - JavaScripts/module/member/object_edit.js（會員刊登頁的定位彈窗，
       內容只是「確認定位／重新定位」兩顆按鈕）
   那些資訊窗沒有 .map-iw 的完整版面，表頭被收掉、關閉鈕被改成絕對定位之後
   會直接壓在內容上。

   限定的方式是綁「內容」而不是綁「容器 id」：Template/object/view.aspx.vb
   的地圖容器也叫 searchMap、也載同一支 googlemapfunc.js，所以
   `#searchMap …` 這種寫法擋不住它。只有搜尋地圖的資訊窗內容才有
   <div class="map-iw">（Function/Ajax/SearchObj.aspx.vb 組的）。

   :has() 在舊瀏覽器不支援時，退化成「表頭留白還在」——也就是修好之前的樣子，
   不會壞版。 */
.gm-style .gm-style-iw-c:has(.map-iw){padding:10px !important;}
.gm-style .gm-style-iw-c:has(.map-iw) .gm-style-iw-d{
  overflow:hidden !important;max-height:none !important;}
/* 空白的真正來源是 .gm-style-iw-chr 這一列（實測 48px 高）——
   它被 48×48 的關閉鈕撐開，而不是內距。把整列收成 0 高，關閉鈕改成
   絕對定位浮在右上角，內容就會貼齊容器頂端。 */
.gm-style .gm-style-iw-c:has(.map-iw) .gm-style-iw-chr{
  height:0 !important;min-height:0 !important;overflow:visible !important;}
.gm-style .gm-style-iw-c:has(.map-iw) .gm-style-iw-ch{
  height:0 !important;min-height:0 !important;padding:0 !important;}
.gm-style .gm-style-iw-c:has(.map-iw) .gm-ui-hover-effect{
  position:absolute !important;top:0 !important;right:0 !important;
  width:28px !important;height:28px !important;}
.gm-style .gm-style-iw-c:has(.map-iw) .gm-ui-hover-effect > span{
  width:18px !important;height:18px !important;margin:5px !important;}

/* ---- 群集泡泡的焦點高亮（#54）------------------------------------------
   物件被群集收在「N 筆」泡泡裡時，焦點高亮打在泡泡上，而不是在物件的原始座標
   畫一顆琥珀色圖釘 —— 那裡畫面上什麼都沒有，使用者的原話是「指著不知道什麼東西」。

   class 由 googlemapfunc.js 的 clusterHotOn() 掛上（Google 的群集泡泡是
   MarkerClustererPlus 產生的 div.cluster）。

   用 outline 而不是 border：泡泡的尺寸是套件用 inline style 算好的，
   加 border 會把內容推位；outline 不佔空間，不會改變泡泡的排版。
   顏色沿用 --map-focus（與散開時那顆圖釘的高亮同色，兩種狀態一眼看得出是同一件事）。 */
.map-cluster-hot{outline:3px solid var(--map-focus,#F9AB00);outline-offset:1px;
  border-radius:50%;box-shadow:0 0 0 6px rgba(249,171,0,.25);}