strong { font-weight: bolder; }

.project_wrapper{display:block; width: 100%;background: linear-gradient(to bottom, #1f1f1f 0%,#0e0a08 320px,#f7f7f7 320px,#f7f7f7 99%);font-size: 18px;color: #191919;margin-bottom: 50px;position: relative;}
.project_wrapper img {width: 100%; height: 100%;}
.style_section img{display: block;position: absolute;top: 0;left: 0;right: 0;margin: 0 auto;width: auto;height: 100%;}
 .style_section a:hover img , .portfolio_caption .image_viewer .image_viewer_main a:hover img{-webkit-transition: all .8s;-o-transition: all .8s;-moz-transition: all .8s;-ms-transition: all .8s;transition: all .8s;   transform: scale(1.02);}

/* ------------功能選單---------- */
.event_nav{display:inline-block;border-radius: 50px;position: absolute;right: 20px;top:20px; z-index: 10;}
.event_nav ul li{display: inline-block;height: 50px;width:160px;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;color: #cfa989;border:1px solid #796351;margin: 0 10px;box-sizing: border-box; background-image: linear-gradient(#cfa989, #cfa989), linear-gradient(#0e0a08, #0e0a08);
  background-size: 0 100%, auto;
  background-repeat: no-repeat;
  background-position: center center;
  transition: all .2s ease-out;}
.event_nav ul li a:hover , .event_nav ul li a:focus{color:#000;background-size: 100% 100%, auto; }

/*---測欄選單----*/
.key_visual{display:block; max-width: 1150px;margin: 0 auto;position: relative; left: -27px;padding-top:100px;}
.curation_nav{ display:block;width: 120px;background-color:#fff;border-radius: 8px;position: fixed;text-align: center;right:20px;top:170px;z-index: 10;border:2px solid #bf9879;z-index: 20;}
.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{padding: 3px 0;margin: 3px 0; }
.curation_nav ul li a{display: block; color: #191919; width:80%; overflow: hidden;text-align: center;font-weight: 500;margin: 0 auto;}
    .curation_nav ul li a:hover, .curation_nav ul li a.selected {
        background-color: #191919;
        color: #fff;
        border-radius: 50px;
    }
.curation_nav ul li a.top_link{color:#bf9879; }
.curation_nav ul li:hover a.top_link{background-color:#bf9879;color: #fff; }
.curation_nav:after {display: block;content: "";width: 0;height: 0;border-style: solid;border-width: 12px;border-color: #bf9879 transparent transparent transparent;position: absolute;left: 0;margin: auto;right: 0;z-index: 9;}

/*---手機選單----*/
.mobile_curation_nav{display:none; margin: 0 auto;max-width: 330px;height:105px; text-align: center;padding: 5px;box-sizing: border-box;}
.mobile_curation_nav ul li{display: inline-block;}
.mobile_curation_nav ul li a{display: block;width:100px;line-height:40px;font-weight: 500;overflow: hidden;border:1px solid #bf9879;border-radius: 50px;}
.mobile_curation_nav ul li a:hover, .mobile_curation_nav ul li a.selected{background-color:#191919;color:#fff;border:1px solid #191919;} 

/*---前言----*/
.foreword{display: block; max-width: 1000px; margin: 0 auto;overflow: hidden;padding: 0 20px;}
.foreword h2{font-size: 2em;font-family: 'Noto Serif TC';font-weight: 600;}
.foreword h2:before{display: inline-block;content: ""; width: 60px; height: 100px; background-image: url(/images/mansionhousetop/chapter_icon.png);position: relative; bottom: -20px;margin-right: 5px;}
.foreword p{display:block;margin-left:65px;}

/*---按鈕樣式----*/
.btn_dark_style{display:block; width: 130px; height: 40px; background-color:#191919;color: #fff; text-align: center;line-height: 40px;border-radius: 50px;}
.btn_dark_style:hover{background-color:#bf9879; }
.btn_line_style{display:block; width:130px; height: 40px; border:1px solid #191919; text-align: center;line-height: 40px;border-radius: 50px;}
.btn_line_style:hover , .style_section.trend .btn_line_style:hover{background-color:#191919;color: #fff;}
.style_section.trend .btn_line_style{position: absolute;bottom:-20px;right: 0;background-color:#edeae3; }
.foreword div .btn_dark_style , .style_section.skills .btn_line_style , .portfolio_caption .btn_line_style , .faq_is_open .btn_line_style {float: right;}
a.a_line_style{ text-decoration:underline; }

/*---內容樣式----*/
.project_container{ max-width: 1200px;  margin: 0 auto; border-radius:20px;background-color: #edeae3;box-sizing: border-box; padding:10px 50px 80px 50px;margin-top: 50px;}

/*---豪宅建案----*/
.style_section{display:flex; justify-content: space-between;margin-top:80px;flex-wrap: wrap;width: 100%;}
.style_section.estate .content_text{display: block; width:33%;margin-top: 30px;}
.content_text em{display:block;width: 120px; font-family: 'Noto Serif TC';font-style: italic;font-weight: 600; }
.style_section.estate .content_text em{background-color: #9b887a;color: #fff;text-align: center; margin: 0 auto;}
.content_text h2{display: block;font-size: 2.77em; font-family: 'Noto Serif TC';font-weight: 600;line-height: 1.2em;}
.style_section.estate .content_text h2{text-align: center; word-spacing:.3em;margin: 0 auto;margin-bottom: 20px;}
.dividing_line{display: block; width: 100%; height: 1px; background-color:  #191919;}
.dividing_line span{display: block; width: 1px; height:20px; background-color: #191919;margin: 0 auto;position: relative;top: -10px;}
.content_text h3{font-size: 1.33em;font-family: 'Noto Serif TC';font-weight: 600;line-height:1.4em;}
.style_section.estate .content_text h3{margin-top: 20px;}
.content_text p{display: block;}
.style_section.deco_style .content_text p{margin-top:20px;}

/*---大圖輪播圖----*/
.image_viewer{width:58%;}
.image_viewer_main a{display: block;width: 100%;height: 0;padding-bottom: 66.7%;overflow: hidden;position: relative;overflow: hidden;}
.img_box a {display: block;width: 100%;height: 0;padding-bottom: 66.7%;overflow: hidden;position: relative;overflow: hidden;}
.image_viewer_thumbnails{display:flex; justify-content:space-evenly;align-items: center;margin-top: 20px;flex-wrap: wrap;}
.image_viewer_prev , .image_viewer_next{display: block;width:25px;height: 25px;background-repeat: no-repeat;background-position: center;background-image: url(/images/mansionhousetop/arrow-pre.svg);}
.image_viewer_next{background-image: url(/images/mansionhousetop/arrow-next_black.svg);}

/*---輪播圖小圖----*/
.image_viewer_thumb{width:20%; }
.image_viewer_thumb a {display: block;width: 100%;height: 0;padding-bottom: 66.7%;overflow: hidden;position: relative;overflow: hidden;}

/*---輪播圖切換鍵----*/
.option_btn{display: flex; flex-direction: column;}
.option_btn:after{display: block;content: ""; width:1px; height:40%; background-color:#191919;margin: 0 auto;}
.option_btn a{display: block; width: 30px; height: 30px;  border:1px solid #191919;box-sizing: border-box;font-size: 16px; border-radius: 100%;text-align: center;font-weight: 600; margin-bottom: 10px;background-color: #edeae3;}
.option_btn a:hover , .option_btn a:focus, .option_btn a.selected{background-color:#191919;color: #fff; }

/*---設計趨勢----*/
.style_section.trend .content_text{display: flex;width: 100%;padding-bottom: 20px;border-bottom: 1px solid #191919;margin-bottom:50px;flex-wrap:wrap;position: relative;}
.style_section.trend .content_text .content_text_block_left{width:30%;margin-top:20px;}
.style_section.trend .content_text .content_text_block_right{width:65%;padding-left:30px;border-left: 1px solid #191919;position: relative;}
.style_section.trend .content_text .content_text_block_right:before{display: block; content: ""; border-style: solid; width:0px; height:0px;border-width: 15px; border-color: transparent #191919 transparent transparent;position: absolute; left:-30px;top:48px; }
.style_section.trend .image_viewer{width: 55%;}
.image_viewer_caption{width:36%;}
.image_viewer_caption strong{display: block; color: #9b887a; background-image: url(/images/mansionhousetop/point_icon.png);width: 140px; height: 50px;line-height: 65px; padding-left: 50px;font-size: 20px;box-sizing: border-box;}
.image_viewer_caption h4{font-size: 20px; font-weight: 600; font-style: italic; margin-top:10px;}
.image_viewer_main_text{display: block;padding-left: 10px;position: relative;}
.image_viewer_main_text:after{display: block; content: "";width: 45px; height:35px; background-image: url(/images/mansionhousetop/tips_icon.png);background-repeat: no-repeat;position: absolute;left: 0;bottom:-10px;}

/*---裝潢秘技----*/
.style_section.skills .content_text h2{word-spacing:0em;}
.style_section.skills .content_text em{background-color: transparent; color: #191919;}
.style_section.skills .btn_line_style , .style_section.deco_style .btn_line_style{margin-top: 20px;}

/*---熱門風格----*/
.portfolio_caption{display: flex;width: 100%;justify-content:space-between;flex-wrap: wrap;}
.portfolio_caption .content_text{width:35%; }
.portfolio_caption .image_viewer{width: 62%;}
.style_section.deco_style .portfolio_caption .image_viewer .image_viewer_main a{padding-bottom: 56.2%;overflow: hidden;}
.portfolio_caption .image_viewer .image_viewer_main a i {display: block;width: 100px;height: 100px;text-align: center;line-height: 100px;border-radius: 100%;border: 2px solid #fff;position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;background-color: rgba(0, 0, 0, .3);box-sizing: border-box;padding-left: 10px;z-index: 5;font-size: 2em;color: #fff;}
.portfolio_caption .image_viewer .image_viewer_main a  i.shi-play {background-image: url(/images/mansionhousetop/icons-play.svg);filter: invert(100%);margin: auto;border: 2px solid #000;background-size: 40%;background-repeat: no-repeat;background-position: 55% center;min-height: auto;}
.portfolio_caption .image_viewer .image_viewer_main a:hover i{background-color: rgba(255, 255, 255, 1);border: 2px solid #fff;}
.portfolio_caption .image_viewer .image_viewer_main a:hover  i.shi-play { filter: invert(0);}

.portfolio_img{width: 100%;display: flex;justify-content: flex-end;margin-top: 20px;}
.portfolio_img .image_viewer{ width:36.2%;margin-left: 20px;}
.style_section.deco_style .portfolio_caption{flex-direction:row-reverse; }
.style_section.deco_style .content_text h2 {margin-bottom: 20px;}

/*---熱門風格--箭頭樣式----*/
.navigation {display:block;text-align: end;position:unset; right:unset;top:unset;}
.navigation a.nav_prev,  a.nav_next {display:inline-block;width:0px;height: 31px;background-repeat: no-repeat;background-position: center;background-size: contain;}
.navigation a.nav_prev {background-image: url(/images/mansionhousetop/arrow-pre_black.svg);border-right: 1px solid #191919;padding-left: 50px;background-repeat: no-repeat;}
.navigation a.nav_next {background-image: url(/images/mansionhousetop/arrow-next_black.svg);padding-right: 50px;background-repeat: no-repeat;}
.style_section.deco_style .navigation{margin-top: 20px; margin-bottom: 20px;}

/*---豪宅建材----*/
.materials_nav{display:block;max-width: 1200px; margin: 0 auto;margin-top: 50px;z-index: 10;}
.materials_nav ul{display: flex;justify-content: center;flex-wrap: wrap; }
.materials_nav ul li{display: block; width: 120px; height: 120px;border-radius: 100%;border:2px solid #9b887a; margin: 0 20px;position: relative;background-color: #fff;z-index: 10;}
.materials_nav ul li:after{display:none;content: ""; width: 0; height: 0; border-style: solid; border-width: 12px; border-color:#9b887a transparent transparent transparent;position: absolute;margin: 0 auto; left: 0; right: 0;bottom:-23px;z-index: 1;}
.materials_nav ul li a{display: block; color: #9b887a;text-align: center;font-weight: 600;font-size: 24px;  }
.materials_nav ul li a span{display: block;width:50px;margin: 0 auto;border-top: 1px solid #9b887a; border-bottom: 1px solid #9b887a;}
.materials_nav ul li a:before{display: block; content: "Materials";font-size: 14px;margin-top: 25px;}
    .materials_nav ul li:hover, .materials_nav ul li.selected {
        background-color: #9b887a;
    }
        .materials_nav ul li:hover a, .materials_nav ul li.selected a {
            color: #edeae3;
        }
        .materials_nav ul li:hover span, .materials_nav ul li.selected span {
            border-color: #edeae3;
        }
        .materials_nav ul li:hover:after, .materials_nav ul li.selected:after {
            display: block;
        }

.style_section.materials{ position: relative;justify-content:space-between;flex-wrap: wrap;}
.style_section.materials .portfolio_caption{display: block;width:52%;margin-left: 50px;margin-top:30px;}
.style_section.materials .portfolio_caption .image_viewer{width: 100%;margin-top: 20px;} 
.style_section.materials .portfolio_img{display: block;width:40%;margin-top: 0;}
.style_section.materials .portfolio_img .image_viewer{width: 100%;margin-left: 0;margin-bottom: 20px; } 
.style_section.materials .content_text{width: 90%;margin: 0 auto;}

.side_tag{display: inline-block;font-family: 'Noto Serif TC';transform: rotate(90deg);width: 130px; height: 30px;font-weight: 600; color: #9b887a;position: absolute; left:-60px;top:55px;}
.side_tag:after{ display: block; content:""; width: 150px; height: 1px; background-color: #9b887a;position: absolute;right:-160px;top:15px;}

.style_section.materials.template .portfolio_caption{width: 37%;}
.style_section.materials.template .portfolio_img{width: 55%;}

/*.style_section.materials .select_dot{display:none; width: 100%;justify-content: center;margin-top: 10px;}
.style_section.materials .select_dot a{width: 12px; height: 12px; border-radius: 50%; border:1px solid #191919;margin: 10PX; }
    .style_section.materials .select_dot a:hover, .style_section.materials .select_dot a.selected {
        background-color: #191919;
    }*/

/*---常見QA----*/
.faq_section{width: 100%;}
.faq_section li{display: block; position: relative;padding:20px 35px; box-sizing: border-box;border-bottom: 1px dotted #191919;overflow: hidden;}
.faq_item{display: block; }
.faq_item span , .faq_item em{font-size: 30px;font-family: 'Noto Serif TC';font-weight: 600;cursor:pointer;}
.faq_icon_dropdown, .faq_icon_close {display: block;width: 20px;height: 20px;background-repeat: no-repeat;background-position: center;box-sizing: border-box;background-size: contain;right: 15px;top:38px;position: absolute;}
.faq_icon_dropdown{border:1px solid #edeae3;border-radius: 100%;}
.faq_icon_dropdown:hover{border:1px solid #191919;border-radius: 100%;}
.faq_icon_dropdown {    background-image: url(/images/mansionhousetop/icon_open.svg);}
.faq_icon_close {    background-image: url(/images/mansionhousetop/icon_close.svg);background-color: #191919;border-radius: 100%;}
.faq_section li.open_state{display: block;background-color: #fff;border-radius: 30px;border-bottom:0px;box-sizing: border-box;}
.faq_is_open strong{display: block; margin-top: 15px;}
.faq_is_open .btn_line_style{margin-top: 20px;}

/*---大圖底層----*/
.project_wrapper_slide{display:block; width: 100%;background-color:#fff ;position: relative;background-color:#0e0a08;}
    .project_wrapper_slide img {
        width: 100%;
        height: 100%;
        max-width: 960px;
        max-height: 640px;
        width: auto;
        margin: 0 auto;
        text-align: center;
        display: block;
    }
.slide_top{display: block; max-width: 1442px;height:auto; margin: 0 auto;text-align: center;padding-top:100px;}
.slide_image_gallery{display: block; max-width:1000px; margin: 0 auto;margin-top: 50px;padding: 0 20px;box-sizing: border-box;}
.image_gallery_thumbnails{display: flex;justify-content: space-between;align-items: center;margin-top: 20px;position: relative;}
/*.image_gallery_thumb{width: 20%;}*/
.image_gallery_thumb { width: 850px; display: block; margin: 0 auto;}
    .image_gallery_thumb a {
        display: inline-block;
        position: relative;
        float: left;
        width: 20%;
        height: calc(860px * 0.2 /3 * 2);
        text-align: center;
        overflow: hidden;
/*        margin: 0 20px;*/
    }
        .image_gallery_thumb a img {
            position: absolute;
            top: 0px;
            left: 0px;
            right: 0px;
            width: auto;
            height: 100%;
            margin: 0px auto;
        }
.image_gallery_thumbnails .image_viewer_prev , .image_gallery_thumbnails .image_viewer_next{display: block;width:30px;height: 32px;background-repeat: no-repeat;background-position: center;background-image: url(/images/mansionhousetop/arrow-pre_white.svg); cursor:pointer;}
.image_gallery_thumbnails .image_viewer_next{background-image: url(/images/mansionhousetop/arrow-next_white.svg);}
.btn_element {display: flex; justify-content: center;}
.btn_line_style_white , .btn_line_style_golden{display: block; width: 200px; height:50px; border-radius:50px; text-align: center;color: #fff;font-size: 20px; line-height: 50px;border:1px solid #fff; margin:50px 20px;font-weight: 600;}
.btn_line_style_golden{color: #bf9879; border-color: #bf9879;}
.btn_line_style_white:hover{background-color: #fff; color: #191919;}
.btn_line_style_golden:hover{background-color:#bf9879;color: #fff; }


@media (min-width:320px) and (max-width: 1024px) {
    .curation_nav{display: none;}
    .mobile_curation_nav{display: block;}
    .key_visual{left: -25px;}
    .event_nav{display:none;}
    .key_visual , .slide_top{padding-top:50px;}
    .style_section{margin-top:60px;}
    .style_section.estate .content_text{width: 100%;margin-top: 0px;}
    .image_viewer {width: 93%;margin-top:20px;}
    .style_section.trend .image_viewer{width: 93%;}
    .option_btn{margin-top: 20px;}
    .image_viewer_caption{width: 100%;}    
    .style_section.trend .content_text .content_text_block_left{width: 100%;margin-top: 0px;}
    .style_section.trend .content_text .content_text_block_right{width: 100%;margin-top: 10px; border-top: 1px solid #191919;border-left: 0px;padding-top: 10px;padding-left: 0; }
    .style_section.trend .content_text{margin-bottom:20px;}
    .style_section.trend .content_text .content_text_block_right:before{display: none;}
   
}

@media (min-width:320px) and (max-width: 820px) {
    .project_container{padding: 10px 20px 50px 20px;}
    .key_visual{left: -17px;}
    .style_section.deco_style .portfolio_caption{flex-direction:row;}
    .portfolio_caption .content_text , .portfolio_caption .image_viewer{width: 100%;}
    .portfolio_img{justify-content:space-between;margin-top: 0;}
    .portfolio_img .image_viewer{width:48%;margin-left: 0;}
    .style_section.materials .content_text{width:100%;margin: 0 auto;}
    .style_section.materials .portfolio_caption , .style_section.materials.template .portfolio_caption{width: 100%;}
    .side_tag{left: -65px;}
    .style_section.materials .select_dot{display: flex;}
/*    .style_section.materials .portfolio_img{display:none;}*/
    .style_section.materials .portfolio_img{width:100%}
    .project_wrapper_slide img {max-width:100%;max-height:100%;}
    .image_gallery_thumb a {
        width: calc(100vw * .89 * .33);
        height: calc(100vw * .89 * .33 / 3 * 2);
    }
}

@media (min-width:320px) and (max-width:640px) {
    .project_wrapper {    background: linear-gradient(to bottom, #1f1f1f 0%, #0e0a08 220px, #f7f7f7 220px, #f7f7f7 99%);}
    .foreword h2{font-size:34px;}
    .image_viewer , .style_section.trend .image_viewer{width:92%;}
    .materials_nav ul li{width: 100px; height: 100px;margin: 10px 30px;}
    .materials_nav ul li a{font-size: 20px;}
    .materials_nav ul li a:before{margin-top: 18px;}
    .side_tag{display: block;width: 100%; transform: rotate(0deg);position: relative;left: 0;top: 0;text-align: center;}
    .side_tag:after{display: none;}
    .style_section.materials .portfolio_caption{margin-left:0px;margin-top: 0px;}
    .style_section.materials .content_text{width: 100%;}
    .style_section.materials .content_text h2{text-align: center;}
    .style_section.deco_style .navigation{margin-top: 0;}
    .style_section.materials.template .portfolio_caption{width: 100%;}
    .slide_image_gallery{margin-top: 30px;}
    
}

@media (min-width:320px) and (max-width:460px) {    
    .project_wrapper {background: linear-gradient(to bottom, #1f1f1f 0%, #0e0a08 150px, #f7f7f7 150px, #f7f7f7 99%);}
    .key_visual{left: -10px;}
    .content_text h2{font-size: 34px;}
    .content_text h2{font-size: 34px;}
    .btn_dark_style{margin-top: 20px;}
    .image_viewer , .style_section.trend .image_viewer{width:87%;}
/*    .image_viewer_thumbnails div:nth-child(2) , .image_gallery_thumb:nth-child(2){display: none;}*/
    .IsMobile .image_viewer_thumbnails .image_viewer_thumb:nth-child(4) {
        display: none;
    }
    .image_viewer_thumb{width:25%;}
    .image_gallery_thumb {width: 100%;}
    .style_section.skills .option_btn:after{height: 20%;}
    .faq_item span, .faq_item em{font-size: 24px;}
    .faq_icon_dropdown, .faq_icon_close{top:30px; }
    
}

@media (min-width:320px) and (max-width:375px) { 
  .key_visual{left: -8px;}
  .foreword h2{font-size:30px;}
  .materials_nav ul li {margin: 10px 20px;} 
}