header div {height:60px;-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.5);	box-shadow: 0px 0px 8px rgba(0,0,0,0.50); }
header  {	display:block;	width:100%;	height:60px;	background-color:#3aa796;	line-height: 60px;}
.Designer_logo a{background-image:url(/images/logo/2017/80X45_white.png);	width: 80px;	height: 42px;	position: absolute;	left:5px;	top:10px;}

.container #wrapper{ font-size: 16px;line-height: 1.6em;background-color: #253241;color: #fff;}
h1{text-indent: 100%;white-space: nowrap;overflow: hidden;height: 0;}
.event{ display: block; width: 140px; height:300px; position:fixed; left: 50%; margin-left:630px;top:70px;}
.main_visual{ max-width: 1200px;height: 800px;background-image:url(/images/project/2018/trendanalysis/visual_2019.jpg);margin: 0 auto;background-size: contain;background-repeat: no-repeat; }
.trend_kind{ display: block; margin: 0 auto;width:100%;overflow: hidden; background-color:#e1bfb4;}
.trend_kind ul{max-width: 1200px; margin: 0 auto;  display: flex; justify-content: space-between;}
.trend_kind li{ display: block; width:20%;padding:15px 10px; display: block;border-left: 1px dotted #253241;border-style: }
.trend_kind li a span{ display: block; font-size: 16px;font-family: Times New Roman;line-height: 1.1em;}
.trend_kind li a{display: block;  color: #253241;font-size:2.5em; font-weight: 600;line-height: 1.1em; }
.trend_kind li:hover, .trend_kind li.selected{background-color:  #253241; }
.trend_kind li:hover a, .trend_kind li.selected a{color: #e1bfb4; }

.exterior{display: block; max-width: 1200px; margin: 0 auto;margin-top: 50px;padding: 0 20px;}
.exterior em{display: block; text-align: center; font-size: 3em;font-weight: 600; color:#b6344e;}
.exterior em img{display:inline-block; margin: 0 auto;margin-right: 10px;}
.exterior em+h2{display: block; text-align: center;font-size: 1.75em;font-weight: 600;line-height: 1.6em;margin-top: 20px;}
.exterior em+h2+p{ text-align: center;line-height: 1.6em;margin-top: 20px; width:50%;margin: 0 auto;padding-bottom: 30px;}
.exterior table{display:block; font-size: 1.2em;border-top: 4px solid #4e5762;  border-bottom: 4px solid #4e5762; margin:0 auto;max-width: 650px;}
.exterior tr{  height: 40px; line-height: 40px; text-align: center;font-weight:500;}
.exterior th{padding: 0 15px; width:18%;box-sizing: border-box;}
.exterior th:first-child{width: 10%;}
.exterior th:last-child{width: 15%;}
.exterior th{border:1px solid #4e5762;}
.exterior table i{ display:inline-block; margin-right: 5px;}
.exterior table em {display:inline-block;height: 20px; line-height: 18px; padding: 0 5px;background-color: #f13555; color:#fff;font-size: 14px; margin-right: 5px;margin-left: -40px;font-weight: 500;}
.exterior table i{margin-left: -25px;}
.exterior table span{ color: #b3253d; }
.exterior section{display: flex;justify-content: space-between;margin-top: 70px;}
.trend_content{display: inline-block; width: 45%;}
.trend_content strong{display: block; font-size: 2.25em; color: #3b4a5d;font-weight:600;}
.trend_content h3{font-size: 1.8em;font-weight: 600; margin-top: 20px;color: #a0d8d3;}
.trend_content h4{font-size: 1.25em;font-weight: 600; margin-top: 10px;margin-bottom: 40px;}
.trend_content p{margin-top: 10px;}
.graphic{display:inline-block; margin-top: 10px;}
.graphic img{width: 100%;}
.view_img_box{ width:50%;background: #253241;background: #253241; background: -moz-linear-gradient(left, #253241 20%, #e1bfb4 20%); background: -webkit-linear-gradient(left, #253241 20%,#e1bfb4 20%); background: linear-gradient(to right, #253241 20%,#e1bfb4 20%); }

.img_box{ display: inline-block; width:75%; height: 0; padding-bottom:50%;float:left; overflow: hidden;}
.img_box img{display: inline-block; width:100%;float:left; }
.img_box a:hover img , .view_img_box ul li a:hover img{ transform:scale(1.1);}
.view_img_box {display: block; height: 420px; margin-top: 50px;}
.view_img_box ul{display:inline-block;width:16%;margin-left:15px;}
.view_img_box ul li{width:100%; margin-bottom:8px;  overflow: hidden;}
.view_img_box ul li a img{width: 100%;}
.img_description{display: block; width:80%; line-height: 1.6em;  font-weight: 500;float: right;padding:20px 30px;;box-sizing: border-box;color:#253241;  }
.event_bn img{width: 100%; }

/*view主視覺*/
.box{  max-width:1200px; margin: 0 auto;background-color: #253241;   box-shadow:4px 4px 3px rgba(20%,20%,40%,0.3); font-size:18px; }
.view_visual {    
    overflow: hidden;
    position: relative;
   
}
.view_visual div {
    margin: 0 auto;
    display: block;
    max-width: 1300px;
    height:520px;   
    background-image: url(/images/project/2018/trendanalysis/view_visual_2019.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    margin-top: 0px;

}
/*主視覺 End*/

/*分享元件*/
.fb_share{display: inline-block; position: absolute; right: 20px;top:20px;}

@media (max-width:1366px) {  
    .event{display: none;}
    .view_visual div {height:450px;} 
}

@media (max-width:1024px) {
 .main_visual{ height:600px;}
 .exterior em+h2+p{  width:70%;}
 .view_img_box { height: 360px;}   
 .view_img_box ul li{ margin-bottom:5px; }   
} 

@media (max-width:768px) {
  .main_visual{ height:500px;}
  .view_visual div {height:300px;}   
  .trend_kind li a{  font-size:1.8em;  } 
  .exterior section{display: flex;flex-direction:column;}
  .trend_content{width:100%;}
  .view_img_box{ width:100%;height:470px;}
  .view_img_box ul li{ margin-bottom:11px; }  
 
}

@media (max-width:640px) {
  .main_visual{ height:415px;}
  .view_visual div {height:250px;}   
  .exterior em+h2+p{ width:80%;}
  .trend_kind li a{  font-size:1.6em;} 
  .view_img_box{height:420px;background: #253241;background: #253241; background: -moz-linear-gradient(left, #253241 150%, #e1bfb4 15%); background: -webkit-linear-gradient(left, #253241 15%,#e1bfb4 15%); background: linear-gradient(to right, #253241 15%,#e1bfb4 15%);}
  .img_description{ width:85%; }
  .view_img_box ul li{ margin-bottom:8px; }  
}

@media (min-width:415px) and (max-width: 480px) {
    .main_visual{ height:290px;background-image:url(/images/project/2018/trendanalysis/480_2019.jpg); }
    .view_visual div {height:200px;}   
    .view_img_box{height:330px;}
    .view_img_box ul li{ margin-bottom:4px; }
    .img_description{ width:85%;padding:15px; }    
}

@media (max-width: 414px) {
    .main_visual{ height:240px;background-image:url(/images/project/2018/trendanalysis/480_2019.jpg); }
    .view_visual div {height:180px;}   
    .exterior em+h2+p{ width:100%;}
    .exterior table{font-size:1em;}
    .exterior th{padding: 0 5px; }
    .view_img_box{height:300px;}
    .view_img_box ul li{ margin-bottom:2px; }
    .img_description{ padding:8px 15px; }
    .trend_kind li a span{ font-size:12px;}
    .exterior em{ font-size: 2.6em;}    
}

@media (max-width: 320px) {
    .main_visual{ height:200px; }
    .trend_kind li a{  font-size:1.3em;} 
    .exterior em{ font-size: 2.2em;}
    .exterior table em{ line-height: 16px;padding: 0 3px;font-size:12px;margin-right: 2px;margin-left: -30px;}       
}


/*圖片檢視頁*/
.vote_project_view .bx-wrapper .bx-viewport{background-color: transparent; left:0;}
.vote_project_view .bx-wrapper .bx-controls-direction a { margin-top:-23px;}
.vote_project_view { display: block; max-width: 1000px;  min-width: 320px; margin: 0 auto; padding:30px; box-sizing: border-box; }
/*作品瀏覽*/
.img_full{ display: block; width: 900px; margin: 0 auto; }
.img_full span{ display: block; width: 900px; height: 600px; box-sizing: border-box;}
.img_full img{ display: block; height:100%; margin: 0 auto;}
.slidenav_box{ display: block; position: relative; margin-top:15px; }
.slidenav { display: block; width: 900px; margin:  0 auto;}
.slidenav li{  display:inline-block;  background-color:#253241; }
.slidenav li a{display:block; width: 170px; height: 113px;border:3px solid #253241;box-sizing: border-box;  }
.slidenav li a:hover{ border:3px solid #cca19a;}
.slidenav li:nth-child(5n){ margin-right: 0px;}
.slidenav_box .bx-wrapper img {
    height: 100%;
    margin: 0 auto;
}
/*箭頭*/
.bx-wrapper .bx-controls-direction .bx-prev {
	position: absolute;
	left: -60px;
	top: 50%;
    background:url('/images/index_arrow_pre.png') no-repeat;
    display: block;
    width: 46px;
    height: 46px;
    z-index: 99;
}

.bx-wrapper .bx-controls-direction .bx-next {
	position: absolute;
    right: -60px;
    top: 50%;
    background: url('/images/index_arrow_next.png') no-repeat;
    display: block;
    width: 46px;
    height: 46px;
    z-index: 99;
}

.bx-wrapper .bx-controls-direction .bx-prev:hover {
	opacity: .7;
	filter: opacity(70);
	left: -65px;
}

.bx-wrapper .bx-controls-direction .bx-next:hover {
	opacity: .7;
	filter: opacity(70);
	right: -65px;
}

@media (max-width: 1024px) {
    .img_full {
        width: 100%;
    }
    .img_full span{
        width: 100%;
        height: calc(100vw * 2 / 3);
    }
}
@media (max-width: 768px) {
    .bx-wrapper .bx-controls-direction .bx-prev,.bx-wrapper .bx-controls-direction .bx-prev:hover {
        left:-30px;
    }
    .bx-wrapper .bx-controls-direction .bx-next,.bx-wrapper .bx-controls-direction .bx-next:hover {
        right:-30px;
    }  
}
@media (max-width: 767px) {
   
    .slidenav li a {
        width:120px;
        height: calc(120px * 2 / 3);
        
        
     
    }
}
@media (max-width: 480px) {
    .slidenav li a {
        width:100px;
        height: calc(100px * 2 / 3);
    }
}
@media (max-width: 320px) {
    .slidenav li a {
        width:80px;
        height: calc(80px * 2 / 3);
    }
}


/*回上頁*/
.div_btn { display: block; overflow: hidden;  margin: 0; text-align: center;}
.div_btn a.btn { display: inline-block; width: 250px;
    height: 45px;
    border: 1px solid #cca19a;
    line-height: 45px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    margin: 0 auto;
    margin:30px;
    color:#cca19a; }
    .div_btn a.btn:hover {
        color:#253241;
        background-color:#cca19a;
    }
@media (max-width:640px)  { 
    .div_btn{padding-bottom: 30px;}
    .div_btn a.btn { width:180px; margin:15px; }

}