html {  scroll-behavior: smooth;}

/*---mobile選單----*/
.sidenav {height: 100%;width: 0;position:absolute;z-index: 99;top:50px;left: 0;  background-color:#272727;overflow-x: hidden;  transition: 0.5s;  padding-top:50px;}
.sidenav a {padding: 8px 8px 8px 20px;text-decoration: none;font-size:20px;color:#c0a299;display: block;  transition: 0.3s;  font-family:times new roman;line-height: 1.2em;}
.sidenav a:hover {color: #f7f4ef;}
.sidenav .closebtn {position: absolute;top:-10px;right: 10px;font-size: 36px;}
#open_menu {display:none;transition: margin-left .5s;padding: 10px 15px;  color: #f7f4ef;  background-color:#c0a299;
border-bottom: 1px solid #f7f4ef;	}
@media screen and (max-height: 450px) {  .sidenav {padding-top: 15px;}  .sidenav a {font-size: 18px;}
}

/*---web選單----*/
.footer_bar {display: none;}
.container #wrapper div{box-sizing: border-box;}
.top_designer_box{display:block; width: 100%;position: relative;}
.aside {display: block; width:21%; background-color:#272727;float: left;position: fixed;left: 0;height: 100%;}
.aside img{width: 100%;}
.aside span{display: block; max-width:400px;margin:20px 0;}
.aside a , .sidenav a{display:flex; color:#c0a299;font-size: 1.87em;padding: 15px;font-weight:600; font-family:times new roman;border-top: 1px solid #c0a299;justify-content: space-between;}
.aside div , .sidenav div{display:flex; color:#c0a299;font-size: 30px;padding: 15px;font-weight:600; font-family:times new roman;border-top: 1px solid #c0a299;justify-content: space-between;}
.article_img .play {position: absolute;z-index: 4;left: 50%;top: 33%;margin-left: -44px;}
.article_img .play span {width: 80px;height: 80px;font-size: 30px;line-height: 80px;padding-left: 5px;transition: all .3s;border-radius: 100%; box-sizing: border-box;background: rgba(0,0,0,.3);border: 2px solid #fff;}
.article_img .play span:hover {width: 80px;height: 80px;font-size: 30px;line-height: 80px;padding-left: 5px;transition: all .3s;color: #333;border-radius: 100%; box-sizing: border-box;background-color: rgba(255,255,255,.7);border: 2px solid #fff;}
.article_img .fa-play:before {padding: 25px;}
.sidenav a {font-size: 1.25em;}
.aside a:nth-child(5) , .sidenav a:nth-child(5){border-bottom: 1px solid #c0a299;}
.aside a:hover , .aside a:focus{background-color:#c0a299;  color: #fff;}
.aside div:hover , .aside div:focus{background-color:#c0a299;  color: #fff;}
.aside i , .sidenav i{display: block;width: 20px;height: 20px;border-width: 1px 1px 0 0;border-style: solid;margin: 10px;transform: rotate(90deg);position: relative;top: 5px;}
.sidenav i{width: 15px;height: 15px;top:5px;margin-top: 0;}
.aside i:before , .sidenav a i:before{display: block;content: ""; right: 0;top: 0px;position: absolute;height: 1px;box-shadow: inset 0 0 0 32px;transform: rotate(-45deg);width:30px;transform-origin: right top;}
.sidenav a i:before{width:20px;}
.fixed-aside {position: fixed;bottom: 0;/* 其他樣式設置，例如固定在底部 */}

/*---焦點設計師----*/
.designer_wrapper{display:block;width:79%; color: #f7f4ef;background-color:#c0a299;float: right;overflow:hidden;}
.designer_wrapper a {color: #f7f4ef;}
.focus{display:flex;padding: 50px;flex-wrap: wrap;}
.focus_designer_img{display: block; width:20%; height:20%;padding-right:30px;}
.focus_designer_img a{display: block;}
.focus_designer_img a img{width: 100%;height: 100%; border-radius: 100%;overflow: hidden;}
.focus_desc { width: 80%; padding-left:30px;}
.focus_interior_img a{display: block;width: 100%;height: 0; padding-bottom: 66.6%;overflow: hidden;position: relative;background-color: #c0a299;}
.focus_interior_img a img{display: block;max-width: 100%;max-height: 100%;position: absolute;top: 0;right: 0;left: 0;margin: auto;}
.designer_wrapper strong{display: block; font-size: 1.25em; font-weight: 500; padding-bottom:5px;}
.focus_desc{font-size: 1.25em;}
.focus_desc h2{display: inline-block;font-size: 1.3em;font-weight: 500;padding-top: 10px; border-top: 1px solid #f7f4ef;}
.focus_desc h3{font-weight: 500;}
.focus_desc p{display: block; padding: 10px 0; border-top: 1px solid #f7f4ef; border-bottom: 1px solid #f7f4ef;margin-top:20px;position: relative;margin-left:50px;}
.focus_desc p:before{display: inline-block;content: "“";font-size:3.5em; font-weight: 600;position: absolute; top:-35px;left:-85px;}
.reach_out{display:block; float: right; }
.reach_out a{display:inline-block; width: 200px; height: 45px; border-radius: 50px; border:1px solid #f7f4ef;margin:30px 0 30px 30px;text-align: center; line-height: 45px;font-weight: 500;color: #f7f4ef;font-size:16px;  }
.reach_out a:hover , .reach_out a:focus{background-color: #f7f4ef;color:#c0a299;}

/*---會員設計師----*/
.member_box{display: block;width: 100%; background-color: #fff;}
.member_field{display: flex;position: relative;flex-wrap: wrap;}
.member_field>div{display: block; width: 20%;height:20%;position: relative;overflow: hidden;border-bottom: 1px solid  #c0a299; border-right: 1px solid #c0a299; }
.member_field div img{display: block; width: 100%;height: 100%;width: 100%;border-radius: 100%; z-index: 1;position: relative;-webkit-transition: ease-in .1s;-o-transition: ease-in .1s;-moz-transition:ease-in .1s;-ms-transition:ease-in .1s;transition: ease-in .1s;padding: 20px;box-sizing: border-box;}
.designer_info {display:none; width: 101%; height:100%;z-index: 2;background-color:rgba(0, 0, 0, 0.6);position: absolute; bottom: 0; left: 0;color: #fff;padding: 20px;text-align: center;-moz-transition:ease-in .5s;-ms-transition:ease-in .5s;transition: ease-in .5s; }
.designer_info a {display: block; color: #fff;}
.designer_info a:hover h2 , .designer_info a:hover p{color: #fff;}
.designer_info h2{font-size: 1.25em;font-weight: 500;margin-top:20%;}
.designer_info div a{display: block; width: 150px;height: 40px; border:1px solid #fff;border-radius: 50px; margin: 0 auto;line-height: 40px;margin-top: 20px;}
.designer_items:hover > .designer_info{display: block;}
.member_field>div:hover{border:15px solid #c0a299;top: -1px;}

/*---策展----*/
.theme_box{display: block;background-color: #f7f4ef;padding:50px;}
.theme_box strong{display: block; width:80px; text-align: center; color: #c0a299;line-height:1em;border-bottom: 1px solid #c0a299;margin: 0 auto;}
.theme_box h2{display: block;text-align: center; color: #000;font-size:2.25em;font-weight:600;margin-top: 20px; }
.theme_box .article_row {display: flex;margin-top: 25px;color: #000;flex-wrap: wrap;margin-bottom:50px; gap: 20px;}
.theme_box .article_row a{color: #000;}
.article_row article {width: 100%;}
/*.article_row h3{display: block; font-size: 1.62em;font-weight: 500;line-height: 1.5em;}*/
.article_img {display: block;width: 100%;height: 0;padding-bottom: 66.6%;overflow: hidden;position: relative;}
.article_row article img {display: block;max-width: 100%;max-height: 100%;position: absolute;top: 0;right: 0;left: 0;margin: auto;background-color: #c0a299;}
.article_row h3 {display: block;font-size: 1.62em;font-weight: 500;line-height: 1.5em;text-align: left;}
.article_row .insidecontent h3 {display: block;font-size: 1.25em;font-weight: 500;line-height: 1.5em;text-align: left;margin-bottom:10px;}
p {margin-bottom: 30px;}

.article_card {
	flex: 1 0 calc(50% - 20px);
	margin-right: 25px;
	margin-bottom: 40px;
	display: flex;
	flex-direction: column;
	min-height: 300px; /* Adjust this value as needed */
}
.article_row .swiper-wrapper {padding-bottom: 50px;}
.theme_box .article_row .swiper-pagination-bullet-active{background:#000;opacity:2;margin:20px;width:15px;height:15px;}
.theme_box .swiper-pagination-bullet-active a:hover, .theme_box .swiper-pagination-bullet-active a:focus {background-color: #c0a299;width:15px;height:15px;}
.theme_box .article_row .swiper-pagination-bullet{width: 15px;height: 15px;}
.theme_box .article_row .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet{margin:20px;}

/*---裝修精選----*/
.exhibitions_box {color: #f7f4ef;padding: 50px 20px;}
.exhibitions_box strong {font-size: 4.68em;text-align: center;}
.exhibitions_box strong span {display: block;margin: 0 auto;width: 170px;height: 1px;background-color: #f7f4ef;position: relative;bottom: 12px;}
.exhibitions_box nav {display: block;text-align: center;margin-top: 40px;margin-bottom: 80px;}
.exhibitions_box nav ul li {display: inline-block;}
.exhibitions_box nav ul li a {display: inline-block;width: 180px;height: 45px;font-size: 1.25em;border-radius: 8px;border: 1px solid #f7f4ef;line-height: 45px;margin: 0 20px;color: #f7f4ef;}
.exhibitions_box nav ul li div {display: inline-block;width: 180px;height: 45px;font-size: 1.25em;border-radius: 8px;border: 1px solid #f7f4ef;line-height: 45px;margin: 0 20px;color: #f7f4ef;}
.exhibitions_box nav ul li div:hover{cursor:pointer;}
.exhibitions_box nav ul li div:hover, exhibitions_box nav ul li div:focus {background-color: #f7f4ef;color: #c0a299;}
.exhibitions_box .article_row article {width: 30%;margin-bottom: 50px;}
.exhibitions_box .article_row article a {color: #f7f4ef;}
.insidecontent {margin-top: 50px;color: #000;flex-wrap: wrap;justify-content: space-around;}
.exhibitions_box .article_row #hotCase {margin-top: 50px;color: #000;flex-wrap: wrap;justify-content: space-around;}
/*.exhibitions_box .article_img .fa fa-play {display:flex;justify-content:center;align-items:center;height:100vh;}*/

.exhibitions_box .article_img .sh_icon.shi-play {
	filter: invert(1);
	border: 2px solid #000;
	background-image: url(https://www.searchome.net/images/icons/icons-play.svg);
	background-size: 40%;
	background-repeat: no-repeat;
	background-position: 55% center;
}
.exhibitions_box .article_img a:hover .sh_icon.shi-play {
	filter: invert(0);
	border: 2px solid #fff;
}


footer {
	clear: both;
	position: relative;
}


@media (min-width:320px) and (max-width:1024px) {
	.IsWeb .container.content {padding-top:50px;}
	.aside {display: none;}
	#open_menu { display:block;}
	.designer_wrapper{width: 100%;}
	.member_field>div{width: 33.3%;}
}

@media (min-width:320px) and (max-width:780px) {
	
	.focus_designer_img{width:40%;margin: 0 auto;padding-right: 0px;}
	.focus_desc{width: 100%;text-align: center;padding-left: 0;}
	.member_field>div{width:50%;padding: 20px;}
	.reach_out{float: none;}	
	.article_row article{width: 100%;margin-bottom:100px;}
	.article_row .swiper-wrapper {padding-bottom: 50px;margin-left: 13px;}
	.switch_dot{margin-top: 0;}
	.exhibitions_box{padding: 50px;}
	.exhibitions_box .article_row article{width: 100%;margin-bottom:50px;}
	.exhibitions_box nav{margin-bottom: 0;}
	.exhibitions_box nav ul li div{width: 180px;margin: 12px;}
	
}

@media (min-width:320px) and (max-width:640px) {	
	.exhibitions_box nav ul li div{width: 150px;margin: 12px;}
	.exhibitions_box strong{font-size:3.75em;}
	.exhibitions_box strong span{bottom:5px;}
	
}

@media (min-width:320px) and (max-width:480px) {
	.focus_designer_img{width: 50%;}
	.focus , .theme_box , .exhibitions_box{padding:50px 20px;}
	.member_field>div{width:100%;}	
	.exhibitions_box nav ul li{display: block;}
	.exhibitions_box nav ul li div{ width:100%;margin: 15px 0;}
	.exhibitions_box strong{font-size:3em;}
	.exhibitions_box nav{margin-top:10px;}
	.focus_desc p{margin-left: 20px;}
	.focus_desc p:before{left: -75px;}
	.reach_out{margin:30px 0;}
	.reach_out a{width:80%; margin:15px 0;}
		
}

@media (min-width:320px) and (max-width:375px) {
	.switch_dot a{margin:15px; }
}