html {	scroll-behavior: smooth;}


.event_nav{display:block;width: 1000px; background-color: #fff; border-radius: 50px;border:1px solid #e0d7c9;position: relative; top: 70px; left:40px;}
.event_nav ul li{display: inline-block;height: 50px;width:20%;text-align: center;line-height: 50px;}
.event_nav ul li a{display: block; font-size:1.25em;position: relative;border-radius: 50px;font-weight: 500;}
/*.event_nav ul li a:hover , .event_nav ul li a:focus{color: #fff;background-color:#67564a; }*/
/*.event_nav ul li a:hover:before , .event_nav ul li a:focus:before{display: block; content: ""; width: 25px; height: 36px;background-image:url(/images/small_house/pin.png);position: absolute; top:-60px;right: 0;bottom: 0;left: 0;margin: auto;}*/

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

.lcurrent {color: #fff;background-color: #67564a;}
.lcurrent:before {display: block;content: "";width: 25px;height: 36px;background-image: url(/images/small_house/pin.png);position: absolute;top: -60px;right: 0;bottom: 0;left: 0;margin: auto;}
/* ------------內頁LOGO---------- */
.event_inner_logo{display: block;width:180px;height:135px; position:absolute; right:20px; top: 10px;background-image: url(/images/small_house/inner_logo_830.png);}

/*---漢堡選單----*/
.sidenav {  height: 100%; width: 0;  position: fixed;  z-index:9999;  top: 8%;  right: 0;  background-color:#191919;  overflow-x: hidden;  transition: 0.5s;  padding-top: 50px;}
.sidenav a {  padding: 8px 8px 10px 30px;  text-decoration: none;  font-size: 20px;  color: #fff;  display: block;  transition: 0.3s;}
.sidenav a:hover {  color:#f0d1be;}
.sidenav .closebtn {  position: absolute;  top: 0;  right: 10px;  font-size: 36px;  margin-left: 50px;}

#open_menu {  display:none;  transition: margin-right .5s;  padding:10px;  box-sizing: border-box;  position: absolute;   z-index: 99;  color: #191919;  top:0px;}

.mobile_bottom_fix{display: block; width: 100%; background-color: #000;height: 50px;text-align:center; }
.mobile_bottom_fix a{color: #fff;display: inline-block; padding:15px;text-decoration: none; }

/*---測欄選單----*/
.exam_side{display: block; width: 100px;height: 67px;position: fixed;right:38px;top:20%;z-index:99;}
.exam_side img{width: 100%;}

.curation_nav{ display:inline-block;width: 130px;background-color:#fff;border-radius: 8px;position: fixed;text-align: center;right:20px;top: 30%;z-index: 10;border:2px solid #191919;}
.curation_nav:after{display:block;content:"";width: 0; height: 0; border-style: solid; border-width:12px;  border-color:#211612 transparent transparent transparent;position: absolute;left: 0; margin:auto;right: 0; z-index: 9;}
.curation_nav ul li{ border-bottom: 1px solid #c6c6c6;}
.curation_nav ul li:last-child{border-bottom:0;}
.curation_nav ul li a{display: block; color: #191919; width:100%; height:45px;line-height: 45px;overflow: hidden;text-align: center;font-size:1.22em; font-weight: 500;}
.curation_nav ul li a:hover{background-color:#191919;color:#fff;}
.curation_nav ul li a.top_link{color:#d87b6e; }
.curation_nav ul li:hover a.top_link{background-color:#d87b6e;color: #fff; }
.curation_nav:after {display: block;content: "";width: 0;height: 0;border-style: solid;border-width: 12px;border-color: #191919 transparent transparent transparent;position: absolute;left: 0;margin: auto;right: 0;z-index: 9;}

/*---分享元件----*/
.share {display: inline-block;position: absolute;left: 130px;top: 20px;color: #191919; z-index: 99;}

/*---內容樣式----*/
/*.logo{display: block; width: 100px; height:50px;position: absolute;top:15px;left:15px;}*/
.container.content{padding-top: 0;overflow: hidden;}
.campaign_block{width: 100%; position: relative;font-size: 18px;color:#191919;line-height: 1.6em;position: relative;}
.campaign_block img{width: 100%;}
.campaign_container{display: block; background-color: #f5e8e0;width: 100%;padding-bottom: 100px;}
.card{ display: block; max-width:1200px;margin: 0 auto;padding-top:100px;box-sizing: border-box;}
.card h2{display:inline-block;font-family: 'Noto Serif TC';font-size: 2em;font-weight:600;margin-bottom:30px;}
.card h2 span{display:inline-block;font-family: 'Noto Serif TC';font-size:20px;padding-left: 20px;border-left:1px solid  #191919;margin-left: 20px;position: relative; top: -5px;}
.card h2:before{display:inline-block; width: 115px; height: 80px; content: "";background-image:url(/images/small_house/small_house_event_images/chapter_icon.png);position: relative;top: 12px;}

/*---主視覺----*/
.visual_layout{display: block;width: 100%;background-image: url(/images/small_house/small_house_event_images/1250x300.png);background-repeat: no-repeat;background-position: center;height:350px;}

/*---裝潢預算----*/
.card.budget{display: flex;justify-content:space-between;flex-wrap: nowrap;margin-bottom: 30px;}
.budget_content{display: block; width:48%;position: relative;box-sizing: border-box;}
.budget_graph{max-width: 500px; text-align: center;margin-top:50px;}
.budget_graph img{width: 100%;}
.budget_content em{display: inline-block; width:auto;padding:8px 15px; background-color: #191919;border-radius:5px;color: #fff;text-align: center;position: relative;margin-bottom: 30px;box-shadow:5px 5px #c4b0a2;font-size: 1.22em;font-weight: 600;margin-left: 50px;}
.budget_content em:after{display: block;content: "";width:0px; height:0px; border-width:15px; border-color:#191919 transparent transparent transparent;border-style: solid; position: absolute; bottom:-27px;left:50px;transform: skew(-55deg, 0deg);}
.budget_content p{display: block; padding-left:50px;width: 100%;box-sizing: border-box;}

/*---看完整文章btn----*/
.components{display:flex;justify-content: flex-end;margin-top:30px;}
.components_view{ display: block; width: 150px; height: 35px; text-align: center;border:1px solid #191919; border-radius: 50px;font-weight: 500;line-height: 35px;}
.components_view i{ display: inline-block; width:23px; height:23px; background-color:#191919;border-radius: 100%; text-align: center;line-height: 15px;position: relative;top:-3px;margin-left: 5px;padding-right: 3px;
    box-sizing: border-box;}
.components_view:hover{background-color:#191919;color: #fff; }
.components_view .arrowhead {border: solid #fff;border-width: 0 2px 2px 0;display: inline-block;padding: 3px;}
.components_view .right {  transform: rotate(-45deg);  -webkit-transform: rotate(-45deg);}

/*---內容切換樣式----*/
.toggle_wrapper{display: block; max-width: 1200px;margin: 0 auto;position: relative;}
.toggle_content{display:flex; width: 100%; padding:40px 40px 40px 40px; box-sizing: border-box;background-color:#fff;border:1px solid  #191919;border-top: 6px solid  #191919;box-shadow: 5px 5px #c4b0a2;justify-content:space-between;flex-wrap: wrap;}
.toggle_option{display:flex;position: relative;top:25px;left:40px;}
.mode_deco .toggle_option{justify-content: center;left: 0;}
.toggle_option ul{display: inline-block; border:1px solid  #191919;border-radius: 5px;overflow: hidden;}
.toggle_option ul li{display: inline-block;}
.toggle_option ul li a{display: block; padding: 8px 25px;background-color: #fff;font-size: 1.22em;font-weight:600;}
.toggle_option ul li a:hover{background-color:  #191919; color: #fff;}
.toggle_option .now_index{background-color:  #191919; color: #fff;}
.is_active_desc{width: 42%;margin-top:30px;}
.is_active_desc h3{font-size: 1.66em;font-weight:600;margin-bottom:20px;}
.is_active_desc ul{list-style-type: decimal; margin-left: 20px;}
.is_active_desc ul h4{font-weight: 600;}

/*---圖片切換樣式----*/
.is_active_mode_view .navigation,.is_active_mode_view2 .navigation {display: flex;position:relative;justify-content: flex-end;right: -15px;margin-bottom:20px; top:0;}/*因為原本的css會打到所以top歸0*/
.navigation a , .image_viewer_prev , .image_viewer_next{display: block;width:35px;height:25px;background-repeat: no-repeat;background-position: center;box-sizing: border-box;background-size: contain;}
.navigation a.nav_prev , .image_viewer_prev{background-image: url(/images/small_house/small_house_event_images/arrow-pre.svg);border-right: 1px solid #848388;padding-right: 50px;}
.image_viewer_prev{border-right: 0;padding-right: 0;}
.navigation a.nav_next , .image_viewer_next{background-image: url(/images/small_house/small_house_event_images/arrow-next.svg);padding-left:50px;}
.image_viewer_next{padding-left: 0;}

.is_active_mode_view{display: block; width: 53%;position: relative;}
.is_active_mode_view2{display: block; width: 53%;position: relative;}
.img_box a,.img_box2 a{display: block;width: 100%;height: 0;padding-bottom: 66.7%;overflow: hidden;position: relative;overflow: hidden;}
.img_box img,.img_box2 img{display: block;position: absolute;top: 0;left: 0;right: 0;margin: 0 auto;width: auto;height: 100%;}

/*---tips----*/
.tips_box{display: block; background-color:#faf9e7;padding: 20px;box-sizing: border-box;border:2px solid #c95233;border-radius: 8px;margin-top:40px;position: relative;}
.tips_box:before{display: block; content:"TIPS";background-color:#c95233;width:80px;text-align: center;border-radius: 30px;color: #fff;font-size: 16px; font-weight: 600;font-style: italic;position:absolute;top: -15px;}
.tips_box i{display: block;font-size: 16px; font-weight: 500;}
.tips_box i:before{display:inline-block; content: "";width: 20px; height:20px; background-image: url(/images/small_house/small_house_event_images/check.svg);position: relative;top:3px;}
.tips_box i+i:before{background-image: url(/images/small_house/small_house_event_images/notice.svg);}

/*---風格推薦----*/
.mode_deco .toggle_option{margin: 0 auto;}
.pros , .cons{width: 48%;background-color: #afd2e5;padding:0 40px 40px 40px;box-sizing: border-box;border-radius: 20px;margin-top: 30px;}
.cons{background-color: #f4cfc9;}
.pros h3 , .cons h3{display: inline-block; width: 200px; height: 65px; background-image: url(/images/small_house/small_house_event_images/dialog.bg.png);font-size: 1.66em;font-weight: 600;text-align: center; line-height:40px;}
.pros h3{color: #587c90;}
.cons h3{color: #ae686e;}
.pros ul , .cons ul {display: block; list-style: decimal;margin-left: 20px;}
.pros ul li h4, .cons ul li h4{display: block;font-weight:600;}
.pros ul li , .cons ul li {margin-bottom:8px;}
/*---風格推薦圖片輪播----*/
.image_viewer{ display:flex;position:relative;width:100%;margin-top: 40px;justify-content:space-between;align-items:center;}
.image_viewer .swiper_wrapper_deco .img_box2{ width:33.3%;margin: 0 20px;}
a.btn_viewer{display: block;text-align: end;width: 100%; margin-top: 20px;text-decoration:underline;font-weight: 500;}
.navigation_deco{margin-left:85%;}
/*---小空間規劃與收納設計----*/
.floorplan_section{display: flex;justify-content: space-between;}
.floorplan_image{display: block;background-image: url(/images/small_house/small_house_event_images/floor_plan.png);width:50%;height: 0; padding-bottom:44%; background-size: contain;background-repeat: no-repeat;margin-top:50px;position: relative;}
.floorplan_image a{font-size: 1.66em; font-weight: 600;position:absolute;}
.floorplan_image a:hover{color: #ff5b0b;}
.floorplan_image .now_select{color: #ff5b0b;}
.floorplan_image a.bedroom{top: 30%;left:17%;}
.floorplan_image a.bathroom{top: 50%;left:43%;}
.floorplan_image a.living_room{top: 55%; right: 18%;}
.floorplan_image a.kitchen{bottom:17%; left:8%;}
.floorplan_image a.dining{bottom:20%; left:23%;}
.floorplan_image a.entrance{bottom:17%; left:55%;}

.floorplan_info{ display: block; width:45%;background-color: #fff;padding: 30px; box-sizing: border-box;border-radius: 8px;border:2px solid  #191919;position: relative;box-shadow: 5px 5px #c4b0a2;}
.floorplan_info h3{font-size: 1.66em; font-weight: 600;margin-bottom: 10px;}
.floorplan_info ul{display: block;  list-style-type: decimal;margin-left: 20px;}
.floorplan_info ul li{ padding:5px 0; border-bottom:1px solid  #191919;margin-top: 5px;font-weight: 500;}

.floorplan_info:before {display: block;content: "";width: 0px;height: 0px;border-width: 15px;border-color: transparent #191919 transparent transparent;border-style: solid;position: absolute;left:-30px;top:200PX;  }
.floorplan_info .img_box{width:100%;}

/*---QA----*/
.faq_section{display: block;max-width: 1100px; margin: 0 auto;}
.faq_section li{display: block; box-sizing: border-box; border:2px solid #191919;border-radius: 8px;margin-bottom: 20px;overflow: hidden;position: relative;}
.faq_section li .faq_item{background-color: #fff;padding: 10px;box-sizing: border-box;}
.faq_section li:hover .faq_item{background-color: #191919; color: #fff;}
.faq_section li .number{display: inline-block;font-size: 16px; font-family: 'Noto Serif TC';font-weight: 600;position: relative;top:-10px;}
.faq_section li em{font-size: 1.66em;font-weight:600;margin-left: 20px;}
.faq_section li .faq_is_open{display: block; background-color:  #faf9e7;padding: 20px 20px 20px 70px; box-sizing: border-box;}
.faq_section li .faq_is_open strong{font-weight: 600; }

.faq_icon_dropdown , .faq_icon_close{display: block;width: 30px;height: 20px;background-repeat: no-repeat;background-position: center;box-sizing: border-box;background-size: contain;right:15px;top:18px;position: absolute;}
.faq_icon_dropdown{background-image: url(/images/small_house/small_house_event_images/arrow_open.svg);}
.faq_icon_close{background-image: url(/images/small_house/small_house_event_images/arrow_close.svg);}



.exam_btn{display: flex;text-align: center;justify-content: center; margin-top:50px;flex-wrap: wrap;}
.exam_btn a{display:block;background-color:#c95233; color:#fff; border-radius: 50px;margin: 0 auto;margin:0 20px;width: 280px;line-height: 50px;font-size:20px; font-weight: 500; }
.exam_btn a:hover{ background-color:#be310d;color:#fff; }
.exam_btn a.negative{background-color:#999;color: #fff;}
.exam_btn a.negative:hover{background-color: #666; color: #fff;}
.exam_btn a.review{background-color:#844200;}
.exam_btn a.review:hover{ background-color: #BB5E00;color:#fff; }





@media (min-width: 320px) and (max-width: 960px) {
    #header_view .event_inner_logo {
/*        width: 107px;
        height: 80px;
        background-image: url(/images/small_house/inner_logo.png);
        right: 20px;*/
        top: 54px;
    }
    #header_view .sidenav {
        top: 8%;
        z-index: 999;
    }
    .event_nav{width:93%;margin: 0 auto;margin-top: 50px;}
    .event_inner_logo{width:107px;height:80px;background-image: url(/images/small_house/inner_logo.png);right:20px; top: 10px;}
}


@media (min-width:320px) and (max-width: 1024px) {  
	#open_menu { display: inline-block; margin-top: 15%;}
	.curation_nav{display:none;}
	.exam_side{top:50%;right:10px;}
    .card{box-sizing: border-box;}
   .event_nav{display: none;}
    
    .card.budget , .toggle_content{display: block;}
    .card h2{display: block;margin-left: 40px;}
    .card h2 span{width: 100%;text-align: center;border-left:none;margin-left: 0;top: 0;margin-top:30px;padding-left: 0;}
    
    .budget_content{width: 100%;padding: 0 40px;}
    .budget_content  h2{margin-left: 0;}
    .budget_content p{margin-left: 0;}
    .is_active_desc{width: 100%;}
    
    .budget_graph{margin: 0 auto;margin-top: 50px;}
    .toggle_wrapper{padding: 0 40px;}
    
    .is_active_mode_view{width: 100%; margin-top:30px;}
    .is_active_mode_view2{width: 100%; margin-top:30px;}
  
    .toggle_option{display: block;left: 0;text-align: center;}
    .pros, .cons{width: 100%;}
    .floorplan_section{display: block;}
    .floorplan_image{margin: 0 auto;}
    .floorplan_info{width:70%;margin:0 auto;margin-top:40px;}
    .floorplan_info:before{    border-color: transparent  transparent #191919 transparent;left:20%;top:-30px;}
    .faq_section{padding: 0 40px;}

    /*.exam_btn {  flex-direction: column-reverse;}*/
	.exam_btn a{margin: 0 auto;margin-bottom:40px;}
}

@media (min-width:320px) and (max-width:820px) {  
    .card h2{font-size: 1.66em;}
    .toggle_option ul li a{font-size: 1.11em;padding: 8px 15px;}
    .is_active_desc h3 , .floorplan_info h3 , .faq_section li em{font-size:22px;}
    .floorplan_image{width:70%; padding-bottom:64%;margin: 0 auto;background-position: center;}
    .floorplan_image a{font-size:20px;line-height: 1.2em;}
    .image_viewer .img_box{width: 100%;}
    /*.image_viewer .img_box:nth-child(2n){display: none;}*/
    
}

@media (min-width:320px) and (max-width:640px) {  
  .toggle_option ul li a{font-size: 1em;padding: 8px 15px;}
    .faq_section li em{font-size: 20px;margin-left: 10px;}
    .faq_section li .faq_is_open{    padding: 20px 20px 20px 60px;}
    .card h2{margin-left: 20px;}
    .budget_content h2{margin-left: 0;}
    .budget_content em{margin-left: 0;}
    .budget_content p{padding-left:  0;}
    .budget_graph{padding: 0 40px;}
    .faq_icon_dropdown , .faq_icon_close{top:15px; }
    .faq_section li em{display: block;margin-left:0px;}
}

@media (min-width:320px) and (max-width:460px) {
    .logo , .share{display: none;}
    .card{padding-top: 50px;}
    .visual_layout{background-image: url(/images/small_house/small_house_event_images/460x300.png);background-size: contain;height: 300px;margin-top: 25%;}
    .card h2{font-size: 22px;}
     .toggle_wrapper , .faq_section{padding: 0 20px;}
    .toggle_content{padding: 40px 20px;}
    .pros, .cons{padding: 0 20px 20px 20px;}
    .pros h3, .cons h3{font-size: 22px}
    .card h2 span{font-size: 16px;}
    .toggle_option ul{display: block; width:90%;margin: 0 auto;border:none;}
    .toggle_option ul li {width:48%;border:1px solid #191919;}
    .floorplan_image{width: 90%; padding-bottom:80%;}
    .floorplan_info{width: 80%;}
    .faq_section li .number{font-size: 14px;top: 0;}

    .faq_icon_dropdown, .faq_icon_close{top:15px;right:8px;}
    .faq_section li .faq_is_open{padding: 20px;}
    .event_nav ul li a{font-size: 1em;}
    .navigation_deco{margin-left:0;}
    }

@media (min-width:320px) and (max-width:414px) {
    .toggle_option ul li a{font-size: 16px;}
    .card h2 span{display: none;}
    
}

@media (min-width:100px) and (max-width:430px) {
    .exam_btn a{width: 250px;}
    .form{margin-bottom: 50px;}
}