.article_box{display: block; width:100%;box-sizing: border-box;line-height: 1.8em; margin-bottom:60px;}
.article_box section{display: block;max-width:1000px; margin: 0 auto; padding:20px;}
.article_box section h1.article_Title{font-size:2.25em;text-align: center;font-weight:600;line-height:1.6em;margin-top: 50px;}
.article_box section h3{font-size: 1.25em; font-weight:500;margin-bottom:10px;line-height:1.8em;}
.stickr { display:block; margin-top: 50px; }
.article_box section .stickr + h1.article_Title { margin-top: 0; }
.article_box table { margin: .5em; min-width:97%; max-width: 97vw; width: auto !important; }
.article_box table td,.article_box table th { border:1px solid #000; padding:.5em; width: auto !important; }
.article_box table p { word-break: break-all;}


/*舊css begin*/
strong {
    font-weight: bolder;
}
.article_box p span img { margin:15px 0 5px 0}
.article_box p a {color:#996600;}
.article_box p a:hover { text-decoration:none; color:#604000;}
.article_box p { font-size:16px; line-height:30px; width:100%; color:#000; text-align:justify; }
.editor_imgDescription:before { content: ' '; border: 10px solid; width: 0; height: 0; border-color: transparent transparent black transparent; display: inline-block; margin-right: 5px; }
.editor_imgDescription { margin-bottom: 30px; }
.article_box h2.editor_view { font-size: 1.25em; font-weight:600;margin-top:10px;line-height:1.8em; color: #009688;}
.article_box .data_title { font-size: 1.25em; font-weight:600;margin-top:10px;line-height:1.8em; color: #009688;}
.article_box .editor_img, .article_box .editor_img1 { display:block; margin-top:1em;}
.article_box span.editor_img img, .article_box .editor_img1 img { max-width: 100%; max-height: 800px; width: auto; display: block; margin:0 0 20px 0;}
.article_box span.editor_img, .article_box .editor_img1 {
    display:block;
    margin-top: 10px;
}
.article_box .content_data { overflow:hidden; }

/*.article_box.loading span.editor_img, .article_box.loading span.editor_img1 {*/
/*    background: url(/images/logo/2017/161x92.png) no-repeat center center;*/
    /*position: relative;
    overflow: hidden;
    min-height: 100px;
    display: block;
}
.article_box.loading span.editor_img::before, .article_box.loading span.editor_img1::before {
    content: '';
    display: block;
    position: absolute;
    left: -150px;
    top: 0;
    height: 100%;
    width: 150px;
    background: linear-gradient(to right, transparent 0%, #E8E8E8 50%, transparent 100%);
    animation: load 1s cubic-bezier(0.4, 0.0, 0.2, 1) infinite;
}
@keyframes load {
    from {
        left: -150px;
    }

    to {
        left: 100%;
    }
}*/

/*舊css end*/

/*------圖片樣式------*/
.img_mod_style01{display: block; margin: 30px 0; }
.img_mod_style01 img{width: 100%;}
.article_box a:hover img{transform:scale(1.07);-moz-transition: all .3s;-ms-transition: all .3s;transition: all .3s;}

/*------連結樣式------*/
.article_box .more_pic{display: block;width: 100%; text-align: end; text-decoration: underline; }
/*------內文關鍵字連結樣式------*/
.article_box section .link{color:#009688;text-decoration: underline; }

/*------案件資訊------*/
.article_info{display: flex;justify-content: center;margin: 20px 0;font-size: 16px;}
.article_info span{display:block;  padding:0 20px; border-right: 1px solid #999;text-align: center;}
.article_info span.view{border-right: 0;}
.supply{display: block;width: 90%; margin: 20px auto;font-size: 16px;text-align: center;}
.about_project{display:flex; padding: 20px 0; border-top: 1px solid #000; border-bottom: 1px solid #626262; margin:30px 0;flex-wrap: wrap; justify-content:space-between;}
.about_project i{color: #009688;font-size: 1.25em;margin-top: 5px;}
.about_project ul{display: block; width:30%;margin: 0 10px; }
.about_project ul li span{display: inline-block; /*width:80px;*/}
.about_project ul li.company{font-weight:600;}
.about_project ul li.company a:hover{color:#009688;}

/*------圖片切換-----*/
.switch_img{position: relative; }
.switch_img .swiper-wrapper{margin: 30px 0;}
.switch_img .btn_preview.slide_left_arrow{ position: absolute;  top:40%;left:10px; z-index:3;}
.switch_img .btn_preview.slide_right_arrow{position: absolute;  top:40%;right:10px; z-index:3;}
.switch_img .btn_preview i{ font-size:1.5em;color: #fff;  }
.switch_img .btn_preview  a {display: block; width:50px; height: 50px;line-height:55px;text-align:center;border-radius: 100%;background-color:rgba(0, 0, 0, 0.4); cursor:pointer;}
.switch_img .btn_preview  a:hover{background-color:rgba(255, 255,255, 1); }
.switch_img .btn_preview  a:hover i{color:#000;}
.switch_img .ImageGroupNav  {margin-bottom:50px;}
.switch_img .ImageGroupNav  ul {display:flex;justify-content:center;flex-wrap:wrap;}
.switch_img .ImageGroupNav  ul li{ width:15%;     margin: .5em 1em;}
.switch_img .ImageGroupNav  ul li a{display: block; text-align: center;border:1px solid #000; border-radius: 30px;padding:5px;cursor:pointer;}
.switch_img .ImageGroupNav  ul li a:hover,.switch_img .ImageGroupNav  ul li a.selected{background-color: #000;color: #fff;}
.switch_img .editor_img .ImageGroup, .switch_img .editor_img1 .ImageGroup { margin:0 auto; display:block;}

/*------影片-----*/
/*.videobox {position: relative;width: 100%;height: 0;padding-bottom: 56.25%;}
.videobox iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}*/
.article_box .editor_video { position: relative; padding-bottom: 56.25%;width: 100%;height: 0; margin: 0 0 20px;
    /* padding-bottom(top): 56.25% 讓影片的寬高比為 16:9， padding-bottom(top): 75% 則寬高比為 4:3 ; */ }
    .article_box .editor_video iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; }

/*------註解-----*/
.article_note{display: block; background-color:#f0efee;padding: 20px 30px;margin-top:30px;}

/*------TAGS-----*/
.tag{display:flex;margin:50px 0; box-sizing: border-box;flex-wrap: wrap;}
.tag span{display: inline-block;line-height:40px;}
.tag a{display:inline-block; margin: 0 10px;padding:5px 20px; border:1px solid #000;border-radius:30px;margin-bottom: 15px;}
.tag a:hover{background-color:#009688; border-color: #009688; color: #fff; }

/*------設計公司-----*/
.designer_info{display: block;text-align: center;padding-top:50px; border-top: 1px solid #000;margin-top:100px;}
.designer_logo{display: block;width: 120px; height: 120px; border-radius: 100%;box-shadow:0px 0px 7px rgb(0 0 0 / 30%);overflow: hidden;margin: 0 auto;margin-bottom: 20px;}
.designer_logo img{width: 100%;}
.designer_info h3{font-size: 1.25em;font-weight: 500;}
.designer_info h3 a:hover{color:#009688; }
.designer_info h3 span{display: block;}
.designer_info i{display: block;font-size: 2em;margin:20px 0 10px 0; color: #ea4335;}
.underline:hover , .more_case a:hover{text-decoration: underline;}
.designer_info a.address{display: block;}
/*.contact a{ margin:10px;}*/
.contact span.Title{ margin-left:10px;}
/*.web:before{display: inline-block; content:"WEB:";}
.mail:before{display: inline-block; content:"MAIL:";}*/
.more_case{margin-top:1em;}
.more_case:before{display: inline-block; content:"看更多案例：";}
.more_info{ display: inline-block; padding: 5px 30px;margin:30px 20px;border:1px solid #000;border-radius: 5px;}
.more_info:hover{background-color:#009688; color: #fff;border-color: #009688;}

/*------社群元件-----*/
.share{text-align: center;  margin: 30px 0;}
.share em{display:block;}
.sns_content{width:47%;margin:0 auto;}

/*------相關閱讀-----*/
.related_read{display: block; padding: 20px; border:1px solid #000;margin: 30px 0;position:relative;}
.related_read strong{font-size: 1.25em;font-weight: 600;}
.read_list{display: flex; justify-content: space-between;margin-top: 10px;}
/*.read_list>div{display: inline-block;width:32%;position: relative;}*/
.read_list div img{width: 100%;}
.read_img{width:160px;height: 106px; float: left;margin-right: 10px;overflow:hidden;}
.read_list div h3{font-size: 1em;line-height: 1.6em;font-weight: 600;}
.read_list span{display: block; font-size: 16px;position:absolute;right: 0;bottom: 0;}
.read_items a:hover{color: #009688; }
.related_read .btn_preview{position: absolute;top:20px;right:10px;}
.related_read .btn_preview a{font-size:1.25em; margin: 0 18px;}
.related_read .btn_preview a:hover{color: #009688;}
.read_list span.stickr {
display:inline-block;position:unset;right: unset;bottom: unset;margin-top:0;
}

/*------加入設計家社群-----*/
.add{display:block;margin: 0 auto;text-align: center; margin: 30px 0;}
.add a{display: inline-block;margin: 20px;}
.add a i{display: block;width:60px; height:60px;border-radius: 100%;border:2px solid #00b900;font-size: 1.5em;line-height: 60px;margin:0 auto;margin-bottom: 10px;color:#00b900;}
.add a+a i{color:#4267b2;border-color: #4267b2; }
.add a+a+a i{color:#ff0000;border-color: #ff0000; }
.add a span{display: block;line-height: 1.4em;font-weight: 500;}

/*------目錄 begin-----*/
.table_of_contents{ display: block; max-width: 40%; padding: 10px 15px; box-sizing: border-box; border-radius: 5px; border: 1px solid #000; margin: 0 auto 2em 0; min-width: 320px;}
.bottom_sheet a{display: block; width: 100%;position: relative;padding-bottom:8px;border-bottom: 1px solid #000;}
.bottom_sheet a span{font-size: 1.25em; font-weight: 500;}
.bottom_sheet a i{font-size: 1.25em; position: absolute; right: 0;top: 5px;}
.container.content .table_of_contents ul{display: block;list-style-type: disc;list-style-position:outside;margin-left:25px;margin-top: 15px;}
.table_of_contents ul li a{display: block; margin:5px 0; }
.table_of_contents ul li a:hover{color:#009688; }

/*------目錄 end-----*/


@media screen and (min-width:320px) and (max-width:1024px){
.IsWeb .container.content{padding-top: 0;}
.article_box { overflow:hidden; }
.article_box section h1.article_Title{margin-top:20px;}   
.article_box div img[width],.article_box p img[width] {max-width: 100% !important;width:100%; }
.article_box div img[height],.article_box p img[height] {max-height: 100% !important; height:100%;}
.article_box div img[width="100%"],.article_box p img[width="100%"] {max-width: 100% !important;max-height: none !important;width:auto;}
.article_box div img[height="100%"],.article_box p img[height="100%"] {max-width:none !important;max-height: 60vh !important;height:auto;}
.article_box .home_data p img /*for people data 裡面的圖*/
,.article_box p img[src*=freshome]  /*for freshome圖*/
,.article_box p img[src*=pacific]  /*for pacific圖*/
,.article_box a[href*=wikientry\.aspx] img  /*for wiki圖*/{ max-width:none !important;max-height: none !important;height:auto;width:auto;}    

.article_box table { margin: 0; min-width: auto; width: 100% !important; word-break: break-all; }
.article_box table td,.article_box table th { width: auto !important; }

}

@media screen and (min-width:320px) and (max-width:860px){
/*.read_list>div{width: 30%;}*/
.read_img{width:100%; height: auto;}   
.read_list span{position: relative;text-align:end;}   
.about_project ul{width:28%;}

.sns_content{width:100%;}
}

@media screen and (min-width:320px) and (max-width:700px){
.switch_img .btn_preview.slide_left_arrow , .switch_img .btn_preview.slide_right_arrow{top: 38%; }   
    
}

@media screen and (min-width:320px) and (max-width:480px){
.article_box section h1.article_Title{font-size:1.8em;}
.switch_img nav ul{justify-content: center;}
.switch_img nav ul li{ width:28%;margin:0 10px 15px 10px;}
.switch_img .btn_preview.slide_left_arrow , .switch_img .btn_preview.slide_right_arrow{top: 28%;}
.about_project ul{width:100%;}
.about_project i{margin-left: 10px;margin-top: 0;}
/*.read_items:nth-child(3){display:none;}*/
/*.read_list>div{width:47%;}*/
/*.add a{margin: 20px 10px;}*/
.tag{justify-content: center;}
.more_info{margin:30px 10px; padding: 10px 15px;}
}

@media screen and (min-width:320px) and (max-width:414px){
.switch_img nav ul li{ width:30%;margin:0 5px 15px 5px;}
.switch_img .btn_preview.slide_left_arrow , .switch_img .btn_preview.slide_right_arrow{top: 25%;}
/* .read_items:nth-child(2){display:none;}  */
/*.read_list>div{width:100%;}*/
/*.add a{display: block;margin-bottom:30px;}*/
}

@media screen and (min-width:320px) and (max-width:320px){
.switch_img .btn_preview.slide_left_arrow , .switch_img .btn_preview.slide_right_arrow{top: 18%;}
 .article_info span{padding:0 10px; }  
.more_info{display: block; }
}