/*---漢堡選單----*/
.sidenav {  height: 100%; width: 0;  position: fixed;  z-index:9999;  top: 0;  right: 0;  background-color:#211612;  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: #f2d0c4;}
.sidenav .closebtn {  position: absolute;  top: 0;  right: 10px;  font-size: 36px;  margin-left: 50px;}

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

.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; }

.trend_wapper{box-sizing: border-box;position: relative;background-color: #71736b;background-image: url(/images/project/2025/trend_images/pattern.png);padding-bottom: 50px;}
.trend_visual{display: block; width: 100%; background-image:url(/images/project/2025/trend_images/bg.jpg);height:750px; background-repeat:no-repeat;background-position: top center;box-sizing: border-box;position:relative;}
.trend_visual div , .exam .trend_visual div{display: block; max-width:850px; position: absolute; left: 0; right: 0;bottom:0; margin: auto;}
.trend_visual div img , .exam .trend_visual div img{width: 100%;}
.trendlogo{display: inline-block;position: absolute; top:15px;z-index:999}
.share{display: inline-block; position: absolute;left:150px;top:20px;color: #fff;z-index: 99;}

.curation_nav{ display:inline-block;width: 100px;background-color:#211612;border-radius: 8px;position: fixed;text-align: center;right:20px;top: 10px;z-index: 11;}
.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 #413530;}
.curation_nav ul li:last-child{border-bottom:0;}
.curation_nav ul li a{display: block; color: #fff; width: 100px; height:45px;line-height: 45px;overflow: hidden;}
.curation_nav ul li a:hover{background-color:#f8c9b9;color:#211612;}
.curation_nav ul li a.top_link{color:#f8c9b9; }
.curation_nav ul li:hover a.top_link{background-color:#a5c7c3;color: #2b2b2b; }
.exam_side{display: block; width: 100px;height: 100px;position: fixed;right:20px;top: 300px;z-index:99;}
.exam_side img{width: 100%;}

.trend_container{display: block; max-width: 1200px; margin: 0 auto;position: relative;font-size: 18px;margin-top:70px;position: relative;padding: 15px;box-sizing: border-box;}
.foreword{ display: block; max-width: 850px; height:auto;padding: 40px 50px;box-sizing: border-box;margin: 0 auto;background-color: #fff;position: relative;border:3px solid #211612;box-shadow: 10px 10px #f2d0c4;}
.foreword:before{display:inline-block;content:"“";font-size:190px;position:absolute;top:-105px;right:10px;color:#211612;font-family:fantasy; }
.foreword:after{display:inline-block;content:"”";font-size:190px;position:absolute;bottom:-205px;left:10px;color:#211612;font-family:fantasy; }
.foreword i{display: block;width: 230px; height: 75px;background-image: url(/images/project/2025/trend_images/tips_bg.png);font-size:26px; font-weight:600;text-align: center;position:absolute; top: -30px;left: 10px;}
.foreword strong{font-size: 30px;text-align: center;display: block; font-weight: 600;margin-bottom: 10px;}

/*---section區塊樣式-------------*/
section{background-color: #fff; max-width: 1100px; margin: 0 auto;border-radius:10px;border:3px solid #211612;margin-top:100px;padding:30px 20px;box-sizing: border-box;position: relative;}
.descrip_box{display:flex;max-width: 1000px; margin: 0 auto;position: relative; flex-wrap: wrap;justify-content:space-between;align-items: center;}
.description{width:70%;position: relative;flex-wrap: wrap;}
.description.adjust{width:100%;}
.descrip_box i{display:block; font-weight:600;color: #8b8f7e;margin-top: 10px;}
.description h3{display:block;font-size: 30px;font-weight: 500;}
.description h4{display:block;font-size: 22px;font-weight:600;padding-bottom: 10px;border-bottom:1px solid #d8d8d8;}
.description p{display:block;display: inline-block;}
.description a  , .foreword a{color: #b35539;display: block;text-align: right;font-size: 16px;}
.descrip_box .description.video{margin: 0 auto;width: 75%;}

section.trend01:before , section.trend02:before , section.trend03:before ,  section.trend04:before{display: block;content: "TREND 01"; width:100px; height:45px; background-color:#211612;border-radius: 0 0 10px 10px; transform:rotate(90deg);text-align: center;font-size:16px; line-height: 45px;font-weight: 500;color:#fbd2c3;position: absolute;left:-75px;top:70px;font-family:sans-serif;}
section.trend02:before{content: "TREND 02";}
section.trend03:before{content: "TREND 03";}
section.trend04:before{content: "TREND 04";}

/*---大圖瀏覽-------------*/
.img_show{display:block; max-width:1000px; position: relative;margin:0 auto;margin-top: 30px;}
.view {display: block;position: relative;width: 100%;height: 0;padding-bottom: 66.7%;overflow: hidden;}
.view a{display: block;width: 100%;height: 0;padding-bottom: 66.7%;overflow: hidden;position: relative;overflow: hidden;}
.view a img {display: block;position: absolute;top: 0;left: 0;right: 0;margin: 0 auto;width: 100%;height: 100%;}
.img_show a:hover img{transform: scale(1.02);}
.slide{display: flex; justify-content: center;}
.slide div{display: block; width:12%;position: relative; margin:15px 10px;}
.slide div a{display: block;width: 100%;height: 0;padding-bottom: 66.7%;overflow: hidden;position: relative;overflow: hidden;}
.slide div img{display: block;position: absolute;top: 0;left: 0;right: 0;margin: 0 auto;width: 100%;height: 100%;}


table{ margin-bottom:50px;border:3px solid #52423d;font-size: 1.2em;margin: 0 auto; margin-top:20px;width:100%;border-collapse: collapse; border-style:hidden ;border-radius: 4px;box-shadow: 0 0 0 3px #52423d; margin-bottom: 30px;}
tr{  height: 40px; line-height: 40px; text-align: center;font-weight:500;}
th , td{box-sizing: border-box;line-height: 1.8em;vertical-align: middle; padding:5px 15px;border:1px solid #52423d; }
th{background-color: #211612;color: #fff}
td{border:1px solid #52423d;}
table i{ display:inline-block; margin-right:5px;color:#f89903;}
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;}
table span{ color: #b3253d; }
th[scope="col"]{background-color:#0f508c;  color:#fff;}
table img{display:inline-block; width:30px; height:30px;margin:0 auto;position: relative;top: 5px;}

.team{display: block; text-align: center;margin-top: 15px;}

/*---圖片底層-------------*/
.trend_view{display: block; width:100%; padding:20px;box-sizing: border-box;text-align: center;position: relative; z-index:10;margin-top: 50px; }
.trend_view_box{display: block; max-width: 1200px; margin: 0 auto;text-align: center; color: #000;margin-bottom:70px;}
.trend_view a.trend_btn{ display:inline-block;text-align: center;width: 250px; height:50px;line-height:50px; margin:0 30px ;border-radius: 30px;background-color:#f2d0c4; color:#211612;font-weight:600;font-size: 1.25em;}
.trend_view a.trend_btn.review{background-color:#fff; color:#211612;}
.trend_view a.trend_btn:hover { background-color:#f78b65;color:#fff; }
.trend_view a.trend_btn.review:hover { background-color:#211612;color:#fff; }
.trend_view_box .img_full .swiper-slide img {
	max-width: 900px;
	width:100%;
}

.swiper-container .btn_arrow_pre {
	position: absolute;
	left: 8%;
	top: 50%;
	background: url(/images/project/2022/trendanalysis/index_arrow_pre.png) no-repeat;
	display: block;
	width: 46px;
	height: 46px;
	z-index: 99;
	cursor: pointer;
}

.swiper-container .btn_arrow_next {
	position: absolute;
	right: 8%;
	top: 50%;
	background: url(/images/project/2022/trendanalysis/index_arrow_next.png) no-repeat;
	display: block;
	width: 46px;
	height: 46px;
	z-index: 99;
	cursor: pointer;
}

.trend_view_box .swiper-container-thumbs {
	height: 113px;
	padding: 10px 0;
}

	.trend_view_box .swiper-container-thumbs .img_thumbs_full {
		opacity: 0.3;
	}

	.trend_view_box .swiper-container-thumbs .swiper-slide-thumb-active {
		opacity: 1;
	}

.bgImage {
	height: 100%;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}


/*---測驗首頁-------------*/
.trend_wapper.exam{background-color: #333333;background-image: url(/images/project/2025/trend_images/exam_pattern.png);}
.exam .trend_visual{background-image:url(/images/project/2025/trend_images/exam_bg.jpg);}

.exam_container{max-width: 1200px; margin: 0 auto;box-sizing: border-box;padding:80px;color:#fff;}
.exam_container strong{display: block; color:#f2d0c4;font-size:30px; font-weight:600;margin-top:50px;}
.exam_container ul li{list-style-type: decimal;margin-left:30px;margin-top: 10px;}
.exam_container i{font-size: 30px; font-weight: 600;}
.prize{display: flex; flex-wrap: wrap;}
.prize a{color: #fff;}
.prize div{width:200px; margin-right:50px;margin-top: 10px; text-align:center;}
.prize div img{width: 100%;border-radius: 100%;}
.prize span{font-size: 1.25em; font-weight: 500;}
.prize p{padding-bottom: 20px;}
.prize em{display: block;border-top: 1px solid #6f6f6f; padding-top: 20px;}

.exam_btn{display: flex;text-align: center;justify-content: center; margin-top:70px;flex-wrap: wrap;}
.exam_btn a{display:block;background-color:#f2d0c4; color:#211612; 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:#f78b65;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: #ababab;}
.exam_btn a.review:hover{ background-color:#000;color:#fff; }

/*贊助商*/
.sponser{background-color:#f1f1f1;text-align: center;color:#000;padding: 20px 0;font-size: 30px;font-weight: 600;}
.sponser a {display:inline-block;margin:30px 20px;}

/*測驗問題*/
.exam_container h2{font-size:1.625em;margin-bottom: 30px;font-weight: 600;display: block;text-align: center;}
.exam_container h2 span{display: block;font-size:1.8em;}
.tip{margin-top: 20px;display: block;text-align: center;}
.tip a{text-decoration: underline; color:#f2d0c4;}

/*測驗結果*/
.result{text-align: center;font-size: 1.25em;}
.result em{display: block;max-width:300px; margin: 0 auto;line-height: 50px; font-size: 1.4em; border-radius: 60px;background-color: #eaab88;color: #fff; font-weight:600;margin-top:20px;margin-bottom:30px;}
.result i{font-weight: 500;}
.result h3{font-size:26px;color: #fff;font-weight:600;}
.result p{display: block; font-size: 36px; font-weight:600;margin-top: 20px;color: #f2d0c4;}
a.fb_btn {background: #4267b2;border-color:#4267b2;color: #fff;}
a.fb_btn:hover{background: #244381;border-color: #244381}

/*圖片示意文字*/
.exmapleP {
	z-index: 99;
	position: absolute;
	color: #ffff;
	display: block;
	font-size: 16px;
	left: 0;
	bottom: 8%;
	width: 100%;
}
.toptitlte {width: 100%;position: fixed;z-index:999;}

@media (min-width:320px) and (max-width: 1200px) { 
.trend_visual{height:730px; }
	.swiper-container .btn_arrow_pre {
		position: absolute;
		left: 0;
		top: 50%;
		background: url(/images/project/2022/trendanalysis/index_arrow_pre.png) no-repeat;
		display: block;
		width: 46px;
		height: 46px;
		z-index: 99;
		cursor: pointer;
	}

	.swiper-container .btn_arrow_next {
		position: absolute;
		right: 0;
		top: 50%;
		background: url(/images/project/2022/trendanalysis/index_arrow_next.png) no-repeat;
		display: block;
		width: 46px;
		height: 46px;
		z-index: 99;
		cursor: pointer;
	}
}
@media (min-width:320px) and (max-width: 1024px) {  
	#hambger { display: inline-block;}
	.curation_nav{display: none;}
	section.trend01:before , section.trend02:before , section.trend03:before ,  section.trend04:before{display: none;}
	.exam_side{top:50px;right: 10px;}
	.trend_visual{height:630px; }
	
	.exam_container{padding:20px 25px;}
	.prize div{width: 180px;}
	

}

@media (min-width: 320px) and (max-width: 1024px) {
	.exmapleP {
		font-size: 10px;
	}
}

@media (min-width:320px) and (max-width:820px) {  	
	.trend_visual{height:580px; }
	.descrip_box{display: block;}
	.description{width: 100%;}
	.diagram{text-align: center;margin-top: 30px;}
	.exam_btn {  flex-direction: column-reverse;}
	.exam_btn a{margin: 0 auto;margin-bottom:50px;}
	.trend_view a.trend_btn{margin: 0 auto;margin-bottom:50px;}
}

@media (min-width:320px) and (max-width:640px) {  	
.trend_visual{height:470px; }
	.prize{display: block;}
	.prize div{margin: 0 auto; margin-bottom:20px;}
	.exam_container strong{margin-top: 30px;}
}

@media (min-width:320px) and (max-width:480px) {  	
.trend_visual , .exam .trend_visual{background-image: none;height:370px;  }
	.foreword{padding:45px 20px;}
	.slide div{width: 20%;}
	thead {display: none;}
    td {display: block;padding:5px;	text-align: left;border:none;font-size: 18px;}
    td:before {content: attr(data-title);display: inline-block;width: auto;min-width: 45%;font-weight: 900;padding-right: 1rem;	font-weight: 500;}
	tr:nth-child(even) {  background: rgba(0, 0, 0, 0.1);}
	
	.exam_container i{font-size: 22px;}
}

@media (min-width:320px) and (max-width:412px) { 
.trend_visual  , .exam .trend_visual{height:320px;  }

}

@media (min-width:320px) and (max-width:320px) { 
.trend_visual  , .exam .trend_visual{height:280px;  }
.exam_side{display: none;}
.foreword:before , .foreword:after{display: none;}
	.exam_btn a{width:220px;}
	.result h3{font-size: 20px;}
	.result p{font-size: 26px;}
}