@charset "utf-8";
/* CSS Document */
.container #wrapper {
	width: 100%;
    background-image: url(/images/project/2018/trendreport/bg.jpg);
  
}


header {
	-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.5);
	box-shadow: 0px 0px 8px rgba(0,0,0,0.50);
	-webkit-transition: all 400ms ease;
	transition: all 400ms ease;
	height: 60px;
	left: 0px;
	width: 100%;
	min-width: 100%;
	position: fixed;
	background-color: #3aa796;
	border-bottom: none;
    top: 0;
    font-size: 16px;
    z-index: 100;
}
.wrapper {
	max-width: 1200px;
	position: relative;
	margin-left: auto;
	margin-right: auto;
   
}
.Designer_logo {
	background-image: url(/images/logo/2017/80X45_white.png);
	width: 80px;
	height: 42px;
	position: absolute;
	left: 0px;
	top: 6px;
}
.Designer_logo a {
	display: block;
	height: 100%;
    background-color: transparent;
}
.seo {
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}
nav {
	position: absolute;
	top: 10px;
	left: 110px;
}
nav>a {
	width: 100px;
	line-height: 37px;
	text-align: center;
	display: inline-block;
	position: relative;
	color: #3aa796;
	margin-right: 6px;
	font-size: 16px;
}
nav>a:hover {
	color: #3aa796;
}

#openMenu {
	position: relative;
	display: none;
}
#blackOverlay {
	display: none;
	position: fixed;
	z-index: 60;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAxMi8zMS8xNdOFLqwAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAAAGElEQVQYlWNkYGBoYCACMBGjaFQh9RQCANyeAJRQ3dKnAAAAAElFTkSuQmCC);
}



/*主視覺*/
.box{  max-width: 1200px; margin: 0 auto;background-color: #f9ece4;   box-shadow:4px 4px 3px rgba(20%,20%,40%,0.3); font-size:18px; }
.main_visual {    
    background-repeat: no-repeat;
    background-position: center top;
    margin-top: 60px;
    overflow: hidden;
    position: relative;
   
}
.main_visual div {
    margin: 0 auto;
    display: block;
    max-width: 1200px;
    height:400px;   
    background-image: url(/images/project/2018/trendreport/trend_main_visual.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50% top ;
}
/*主視覺 End*/

.content_box{display: block;max-width: 1200px; margin: 0 auto;  }
.select , .trend_select , .style_box{ display: block; padding:0 100px; box-sizing: border-box;overflow: hidden; background-color:transparent;}
.select { flex-direction:unset;width:auto;height:auto;background-color:unset;color:initial;float:unset;}
.select ul li{ display:inline-block; width:31.3%; height:310px; float: left;margin-right:3%;margin-bottom: 20px;}
.select ul li:nth-child(3n){ margin-right: 0;}
.select ul li a , .trend_select ul li a{ color:#333;line-height: 1.6em;}
.select ul li div{ display: block; max-width: 280px; height: 0px; padding-bottom: 65%;overflow: hidden;}
.select ul li div img{width: 100%;}
.select ul li h2 , {font-size:2em;font-weight:600;margin: 10px 0; }
.select ul li p{font-weight: 500;font-size: 17px;}
.select ul li p i{ color:#b3253d;}
.select .event img{ width: 100%;}

.trend_select ul{ display:flex; justify-content: space-between;width: 100%;box-sizing: border-box; border-top: 5px solid #333; border-bottom: 1px solid #333;margin-top:50px;}
.trend_select ul li {  width: 20%;padding: 15px 0;  }
.trend_select ul li:hover,.trend_select ul li.selected{ background-color:#333;}
.trend_select ul li:hover a,.trend_select ul li.selected a{ color: #fff;}
.trend_select ul li:first-child a{border-left:0;}
.trend_select ul li i{display: block; font-family: Times New Roman; font-weight:bold;font-size: 16px;line-height:16px; margin-bottom:10px;}
.trend_select ul li a{display: block; font-weight: 600; font-size: 2.6em;line-height: 1.15em; border-left: 1px solid #333;padding:0 15px;box-sizing: border-box; }

.style_box{ padding-top:30px;}
.exterior , .view_img_box , .billboard , .img_view{display: block; width: 100%;clear: both;overflow:hidden; color: #333;}
.exterior {padding-bottom: 20px;border-bottom:5px solid #333;}
.graphic{display: inline-block; width:28%;float: left; margin-top:20px;}
.graphic img{ width:100%;}
.trend_content{display: inline-block;width:72%; padding:20px 0 20px 20px; box-sizing: border-box;}
.trend_content div{ display: block; width: 100%; padding: 20px 0;box-sizing: border-box; overflow: auto; border-bottom: 1px solid #333;}
.trend_content div:nth-child(2){ border-bottom: 0;}
.trend_content strong{display: inline-block;  font-size: 2em; font-weight: 600; color: #ccbdb3; width: 18%; float: left;border-right: 1px solid  #333;line-height: 1.2em;}
.trend_content h3{display: inline-block;width: 80%; padding-left: 30px;box-sizing: border-box;font-size: 2em; font-weight: 600;  margin-bottom: 10px; }
.trend_content p{ display: inline-block;width: 80%;  padding-left: 30px;box-sizing: border-box;line-height: 1.6em;}
.slide{ width:70%;float: left;}
.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 ul{display:inline-block;width:16%;margin-left:15px;}
.view_img_box ul li{width:100%; margin-bottom:5px;  overflow: hidden;}
.view_img_box ul li a img{width: 100%;}
.img_description{display: inline-block; width:30%; float: right; line-height: 1.6em; margin-top:8%; padding: 20px 0; border-bottom: 1px solid #333; border-top:1px solid #333; font-weight: 500; }
.more_news{display: block; text-align: right; font-size: 1.2em; line-height: 2em; font-weight:600;color: #333;}
.more_news:hover{ color:#b3253d;}
.exam_box img{ width: 100%;margin-bottom: 30px; }

.billboard h2{ font-size: 1.6em; text-align: center; line-height:1.6em;font-weight: 600; color: #b3253d;padding: 20px 0; }
.billboard table{display: block;width: 65%;  margin: 0 auto;font-size: 1.2em;border-top: 5px solid #333;  border-bottom: 2px solid #333;}
.billboard tr{  height: 40px; line-height: 40px; text-align: center;font-weight:600;}
.billboard th:nth-child(even){ width:61%;}
.billboard th:nth-child(odd){padding:  0 30px;}
.billboard th{border:1px solid #333;}
.billboard table i{ display:inline-block; margin-right: 5px;}
.billboard table em {display:inline-block;height: 20px; line-height: 18px; padding: 0 5px;background-color: #f4a242; color: #fff;font-size: 14px; margin-right: 5px;}
.billboard table span{ color: #b3253d; }

.project_member{text-align: center; color: #333;font-size: 13px;line-height:1.6em;padding-top: 0;}



@media (max-width: 960px) {

.Designer_logo {
	left: 10px;
}
body {
	position: relative;
	right: 0;
}
	
/*按了漢堡後，版面往左推0px*/
.showMenu header, .showMenu main, .showMenu footer {
	left: 0px;
}
nav {
	display: block;
	width: 260px;
	position: fixed;
	top: 0;
	bottom: 0;
	right: -270px;
	left: auto;
	z-index: 5;
	border-style: none;
	box-shadow: 0px 0px 8px rgba(0,0,0,0.5);
	margin: 0;
	background-color: #333;
	-webkit-overflow-scrolling: touch;
	-webkit-transition: all 300ms ease;
	transition: all 300ms ease;
	text-align: left;
	height: auto;
}
nav a {
	display: block;
	width: 250px;
	height: 48px;
	line-height: 47px;
	font-size: 18px;
	color: #ead2b5;
	-webkit-transition: all 400ms ease;
	transition: all 400ms ease;
	margin: 0;
	padding-left: 10px;
	background-color: #333;
	position: relative;
	border-bottom: 1px solid #3b3b3b;
	text-align: left;
	background-image: none;
	background-position: 0 !important;
    　
}
nav a:hover {
	background-color: #272727;
    color: #e6c192;
}
nav>a {
	width: 100%;
}
header div {
	height: 60px;
	text-align: right;
}
header div>a {
	display: inline-block;
	width: 60px;
	height: 60px;
	background-color: #3aa796;
	vertical-align: top;
	line-height: 60px;
	text-align: center;
	margin-right: 1px;
	font-size: 13px;
	-webkit-transition: all 400ms ease;
	transition: all 400ms ease;
}
#openMenu {
	display: inline-block;
	border-left: 1px solid #FFF;
}
#openMenu:hover {
	background-color: #00796B;
}
#openMenu span {
	position: absolute;
	display: block;
	width: 40%;
	height: 2px;
	background-color: #FFF;
	top: 50%;
	left: 50%;
	margin-top: -2px;
	margin-left: -20%;
	-webkit-transition: all 400ms ease;
	transition: all 400ms ease;
}
#openMenu span:before {
	top: -8px;
}
#openMenu span:after {
	bottom: -8px;
}
#openMenu span:before, #openMenu span:after {
	position: absolute;
	content: '';
	display: block;
	width: 100%;
	height: 2px;
	background-color: #FFF;
	-webkit-transition: all 600ms ease;
	transition: all 600ms ease;
}
    
/*按了漢堡後，版面往左推0px*/
body.showMenu {
	overflow: hidden;
	right: 0px
}
.showMenu #openMenu span {
	background-color: rgba(255,255,255,0)
}
.showMenu #openMenu span:before {
	top: 0;
	transform: rotate(45deg)
}
.showMenu #openMenu span:after {
	bottom: 0;
	transform: rotate(-45deg)
}
.showMenu nav {
	right: 0
}
    
    .trend_select ul{ margin-top: 0;}
}

@media (min-width: 640px) and (max-width:768px) {
    
.main_visual div {height:380px;  background-image: url(/images/project/2018/trendreport/trend_main_visual_768.png);}     
.select , .trend_select , .style_box{  padding:0 20px;}
.select ul li p{font-weight: 500;font-size: 16px;}
.trend_select ul li a{  font-size: 2em; }        
.trend_content strong{font-size: 1.8em; width: 26%; }
.trend_content h3{font-size:1.8em;  }
.trend_content h3{width:73%; padding-left:20px;font-size:1.8em;  }
.trend_content p{ width: 73%;  padding-left: 20px;font-size: 16px; }
.slide{ width:70%;float: left;}    
.view_img_box ul li{ margin-bottom:7px;}
.img_description{ margin-top:5%; padding: 10px 0;font-size: 16px;  }    
.billboard table{width: 80%;}
.showMenu header, .showMenu main, .showMenu footer {
	left: 0px;
}
    
}

@media (max-width: 640px)  {    
.main_visual div {height:300px;  background-image: url(/images/project/2018/trendreport/trend_main_visual_768.png);}   
    
}


@media (max-width: 480px) {    
.main_visual div {height:230px; }   
.select ul li{ display:none;}    
.select , .trend_select , .style_box{  padding:0 20px;}   
.trend_select ul li a{  font-size:1.4em; }     
.graphic{display: block; width:70%;float: none; margin: 0 auto;}
.graphic img{ width:100%;}    
.trend_content{;width:100%;padding:0px;}
.trend_content strong{font-size:1.6em;  width: 23%;}
.trend_content h3{width:76%; padding-left:20px;font-size: 1.6em;  }
.trend_content p{ width: 76%;  padding-left: 20px;line-height: 1.6em;}
.slide{ width:100%;}
.img_box{  width:80%;padding-bottom: 53%; }
.img_box img{display: inline-block; width:100%;float:left; }
.view_img_box ul{width:16%;margin-left:12px;}
.view_img_box ul li{margin-bottom:12px; }
.img_description{width:100%; float:none; margin-top:0%;  }
.billboard table{width:100%;font-size: 1em;}
.billboard tr{  height: 35px; line-height:35px;}   
}


@media (min-width: 320px) and (max-width: 414px) {  
.main_visual div {height:150px; } 
.trend_select ul li {  padding: 5px 0;  }
.trend_select ul li i{display: none;}
.trend_select ul li a{  font-size:1em;padding: 5px;   } 
.select , .trend_select , .style_box{  padding:0 10px;}  
.graphic{display: block; width:90%;}
.trend_content strong{font-size:1.2em;  width: 25%;}
.trend_content h3{width:70%; padding-left:15px;font-size: 1.2em;  }
.trend_content p{ font-size: 16px; width: 70%;  padding-left:15px;}
.slide{ width:100%;}
.img_box{ width:100%; padding-bottom:68%;float: none;}
.view_img_box ul{display:block;width:100%;margin-left:0px;}
.view_img_box ul li{display: inline-block; float: left; width:20%; margin:7px;  overflow: hidden;}
.img_description{font-size: 16px;  }

    
}


/*code add begin*/
.exam_box {
    margin-top: 10px;
}
/*分享元件*/
.fb_share{display: inline-block; position: absolute; right: 20px;  margin-top: 95px;margin-right: 100px;}

.fb_share.fixedTop {
    margin-top: 19px;
    margin-right: 99px;
}

@media (max-width: 960px) {    
    .fb_share {
        display: inline-block;
        position: absolute;
        right: 0px;
        margin-top: 3%;
        margin-right: 80px;
    }

    .fb_share.fixedTop {
        margin-top: -40px;
        margin-right: 80px;
    }
}
@media (max-width: 640px) {
    .fb_share {
        display: inline-block;
        position: absolute;
        right: 0px;
        margin-top: -40px;
        
    }
}
@media (max-width: 320px) {
    .fb_base div:last-child {
        display:none;
    }
}

/*圖片檢視頁*/
.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; height:600px; margin: 0 auto; }
.img_full img{ display: block; width: auto; height:600px; 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:#ccc; }
.slidenav li a{display:block; width: 170px; height: 113px;  }
.slidenav li a:hover{ opacity: .5;}
.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: -80px;
	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: -80px;
    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: -85px;
}

.bx-wrapper .bx-controls-direction .bx-next:hover {
	opacity: .7;
	filter: opacity(70);
	right: -85px;
}
.img_full .bx-wrapper .bx-controls-direction .bx-prev{
    left: 5px;
}
.img_full .bx-wrapper .bx-controls-direction .bx-next {
    right: 5px;
}
.img_full .bx-wrapper .bx-controls-direction .bx-prev:hover {
	left: 0;
}
.img_full .bx-wrapper .bx-controls-direction .bx-next:hover {
	right: 0;
}

@media (max-width: 1024px) {
    .img_full {
        width: 100%;
        height: auto;
    }
    .img_full img{
        width: 100%;
        height: calc(100% * 2 / 3);
    }
}
@media (max-width: 768px) {
    .fb_share {
        display: inline-block;
        position: absolute;        
        margin-top: -40px;
        margin-right: 80px;
    }
    .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:140px;
        height: calc(140px * 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: 318px;
    height: 45px;
    border: 1px solid #333;
    line-height: 45px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    margin: 0 auto;
    margin-bottom: 30px}
    .div_btn a.btn:hover {
        color:#fff;
        background-color:#333;
    }
/*code add end*/