/*---漢堡選單----*/
.sidenav { /*height: 100%;*/ display: none; width: 0;  position: fixed;  z-index:9999;  top: 0;  right: 0;  background-color: #111;  overflow-x: hidden;  transition: 0.5s;  padding-top: 60px; }
.sidenav a {  padding: 8px 8px 10px 30px;  text-decoration: none;  font-size: 20px;  color: #fff;  display: block;  transition: 0.3s;}
.sidenav a:hover {  color: #f89903;}
.sidenav .closebtn {  position: absolute;  top: 0;  right: 25px;  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; }


#wrapper{box-sizing: border-box;position: relative;background-color: #f5f5f5; }
#wrapper h2 ,#wrapper h3 , #wrapper h4{font-weight:600;}
.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;}
.team{display: block; text-align: center;margin-top:0px;padding: 10px;}

.sidenav.openNav {height: 100%;width: 250px;display: block;}
/*.function {
    display: block;
    position: absolute;
    top: 0px;
	right:0px;
}
.openNav .sidenav{ height: 100%; width:250px; display:block; }*/
#hambger.openNav {margin-left: 200px;}


/*---趨勢版頭&測驗版頭-------------*/
.trend_visual , .exam_visual{width: 100%;height: 430px;background-image:url(/images/project/2022/trendanalysis/bg.jpg);position:relative;z-index:15;padding-top: 45px;}
.trend_visual div , .exam_visual div{display: block; max-width: 910px;padding-bottom: 520px; background-image: url(/images/project/2022/trendanalysis/visual_title.png);background-repeat: no-repeat;margin: 0 auto;background-size: contain;}
.exam_visual div{background-image: url(/images/event/2022/trendquiz/exam_title.png);}

.data{display:inline-block; position:absolute;bottom:0px;left: 50%;margin-left:320px;}



/*---類別選單-------------*/
.trend_nav{display:block;max-width: 1200px;margin: 0 auto;position: relative;top:-30px;z-index:99;}
.trend_nav ul li{display: inline-block;background-repeat: no-repeat; padding:5px 20px;background-image: url(/images/project/2022/trendanalysis/nav_bg.png);width: 143px; height:98px;box-sizing: border-box;margin-right:8px;}
.trend_nav ul li:after{display:block; content: "TREND 1";background-color: #fff; padding:0 5px;position: relativep;font-weight: 500;top:45px; color:#135793;text-align: center;font-weight:600;}
.trend_nav ul li a{display: block; font-size: 1.25em; font-weight:600; color: #135994;text-align: center;}
.trend_nav ul li:nth-child(2):after{content: "TREND 2";}
.trend_nav ul li:nth-child(3):after{content: "TREND 3";}
.trend_nav ul li:nth-child(4):after{content: "TREND 4";}
.trend_nav ul li:nth-child(5):after{content: "TREND 5";}
.trend_nav ul li a:hover, .trend_nav ul li .checked{ color: #f89903;}



/*---趨勢內容樣式-------------*/
.trend_container {display: block; width:100%;margin: 0 auto;box-sizing: border-box;color: #000;line-height: 1.8em;background: #fff; padding: 30px 0; }
.inner_box{display: block; max-width: 1200px;margin: 0 auto;position: relative;background-color: #fff;}
.sidebar{display: inline-block; position: fixed;right:18%;top:500px;z-index:99; }

/*---前言-------------*/
.foreword{ display: block;width: 70%; margin: 0 auto;box-sizing: border-box;margin-top:80px;text-align: left;position: relative;padding-bottom:60px; border-bottom:1px solid #000;}
.foreword h2{display: inline-block;font-size:2.5em;line-height: 1.2em;position: relative;z-index:1;}
.foreword h2:after{display:block;content: ""; width:100%; height: 20px; background-color: #fcf400;position:absolute;bottom: 0;left: 0;z-index:-1;}
.subtitle{display: block; font-size: 1.25em;color:#10538f; font-weight: 500;position: relative;}
.subtitle:before{display:block;content:"";  width:90px; height:105px;background-image:url(/images/project/2022/trendanalysis/icon.gif);left:-80px;top:-30px; position: absolute;}

section{display: flex;flex-wrap: wrap;margin-top:150px;max-width: 1200px;}

table{ margin-bottom: 70px;border:1px solid #2170b9; border-top: 4px solid #2170b9;  border-bottom: 4px solid #2170b9;font-size: 1.2em;margin: 0 auto; margin-top:30px;width: 100%;}
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 #2170b9; }
th{background-color: #0f508c;color: #fff}
td{border:1px solid #2170b9;}
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;}



/*---section區塊樣式-------------*/
.descrip_box{display:flex; margin: 0 auto; max-width: 1000px;position: relative;justify-content: space-around; flex-wrap: wrap;}
.description{display:flex;width:58%;position: relative;flex-wrap: wrap;margin-left:20px;}

.descrip_box i{display:block; font-weight:700;box-sizing: border-box;text-align: center;width: 100px;height:100px;border-radius:100%;margin: 0 auto;border:7px solid #135994;color:#135994;font-size:3.75em;line-height:79px;position: relative;}
.descrip_box i:before{display: block;content: ""; width: 110px; height: 15px;background-image: url(/images/project/2022/trendanalysis/line.gif);position: absolute;top:-30px;left:-12px}

.description h3{display:block;font-size: 1.8em;padding:10px 0;width: 100%;}
.description h4{display:block;font-size: 1.5em;}
.description p{display:block;display: inline-block;margin-top: 15px;}
.descrip_box .description.video{margin: 0 auto;width: 75%;}

.video_box .description{width:87%;}

/*---大圖瀏覽-------------*/
.view{display: block; max-width: 1000px; margin: 0 auto;margin-top:20px; position: relative;}
.img_show{display:block; max-width: 1200px; position: relative;}
.img_show a{display: block;}
.img_show a:hover{transform: scale(1.02);}
.slide{display: flex; justify-content: center;}
.slide div{margin:10px;width:10%;}
.view img , .slide img{width: 100%;}
.event_bn{background-color: #e1dcd6;}
.event_bn a{display: block;max-width: 1200px; margin: 0 auto;}
.event_bn img{width: 100%; }
.video_container{ position: relative;width: 83%; padding-bottom:46.8%;height: 0;overflow:hidden;margin: 0 auto;margin-top:20px;}

.videobox {	display: block;position: relative;width:100%;height: 0;padding-bottom: 56%;}
.videobox iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}

/*---圖片底層-------------*/
.trend_view{display: block; width:100%; padding:20px;background-color: #fff;box-sizing: border-box;text-align: center;position: relative; z-index:10;}
.trend_view_box{display: block; max-width: 1200px; margin: 0 auto;text-align: center; color: #000;}
.trend_view a.trend_btn , .exam_btn a.review{ display:inline-block;text-align: center;width: 250px; height:45px;line-height: 45px; margin: 10px 20px;border-radius: 30px;border:2px solid #0e4d8a;color:#0e4d8a;font-weight:600;font-size: 1.25em;}
.trend_view a.trend_btn:hover , .exam_btn a.review:hover{ background-color:#0e4d8a; color: #fff; }

.trend_view_box .img_full .swiper-slide img {
    max-width: 900px;
}
.swiper-container .btn_arrow_pre {
	position: absolute;
	left: 0px;
	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: 0px;
	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;
}


.exam_container{max-width: 1200px; margin: 0 auto;box-sizing: border-box;padding:80px;background-color: #f5f5f5;color: #000;}
.exam_container strong{display: block; color:#000;font-size:1.5em; font-weight:600;margin-top: 20px;}
.exam_container ul li{list-style-type: decimal;margin-left:30px;margin-top: 10px;}
.prize{display: flex; flex-wrap: wrap;}
.prize div{width: 180px; 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 #000; padding-top: 20px;}
.exam_btn{text-align: center;margin-top: 30px;}
.exam_btn a{display:inline-block;color: #f89903; border-radius: 50px;margin: 0 auto;margin: 20px;width: 250px;border:2px solid #f89903;line-height: 45px;font-size: 1.25em; font-weight: 500;}
.exam_btn a:hover{ background-color: #f89903;color:#fff; }
.exam_btn a.negative{border-color: #363636;color: #363636;}
.exam_btn a.negative:hover{background-color: #363636; color: #fff;}


.exam_img img{width: 100%;}
.exam_star{text-align: center;}
.exam_star h2{font-size:1.625em;margin-bottom: 30px; }
.exam_star h2 span{display: block;font-size:1.8em;}
.tip{margin-top: 20px;}
.tip a{text-decoration: underline; color:#f89903;}
.result{text-align: center;font-size: 1.25em;}
.result em{display: block;width: 250px; margin: 0 auto;line-height: 50px; font-size: 1.4em; border-radius: 60px;background-color: #000;color: #fff; font-weight:600;margin-top:20px;margin-bottom:30px;}
.result i{font-weight: 500;}
.result h3{font-size: 2em;color: #f89903;}
.result p{width: 60%; margin: 0 auto;}
a.fb_btn {background: #4267b2;border-color:#4267b2;color: #fff;}
a.fb_btn:hover{background: #244381;border-color: #244381}

/*贊助商*/
.sponser{background-color:#272727;text-align: center;color:#fff;padding: 20px 0;}
.sponser a {display:inline-block;margin:30px 20px;}


@media (min-width:320px) and (max-width: 1024px) {  
#hambger { display: inline-block;}
.trend_nav	{display: none;}
.trend_visual , .exam_visual{padding:40px 20px;box-sizing: border-box;}
.data{display: none;}
.sidebar{right:2%;top: 500px; } 
.descrip_box{padding:0 20px;}   
.view{padding:0 20px;}
.slide div{width:17%;}
	
.exam_container{padding:40px 20px;}

}

@media (min-width:320px) and (max-width: 780px) {  
.sidebar{top: 380px; } 
.trend_visual, .exam_visual{height: 350px;}	
.foreword{margin-top:60px;padding-bottom: 30px;}  
section{margin-top: 80px;}
.description{display: block;width:100%;}
.diagram{display: block; text-align: center;margin: 0 auto;margin-top: 10px;}
.prize{justify-content: center;}
.prize div{width: 250px; margin:15px 30px;}

/*---趨勢版頭&測驗版頭-------------*/
.trend_visual div , .exam_visual div{display: block; max-width: 910px;padding-bottom: 57%; background-image: url(/images/project/2022/trendanalysis/visual_title.png);background-repeat: no-repeat;margin: 0 auto;background-size: contain;}

}

@media (min-width:320px) and (max-width: 640px) {
.trend_visual, .exam_visual{height: 320px;}	
.foreword h2{font-size: 1.6em;}
.descrip_box h3{font-size: 1.6em;}
.descrip_box h4{font-size: 1.4em;}
table{font-size: 1em;}

.prize div{width:180px;}	

	

.exam_star .trend_btn a{width: 100px; margin: 20px;}
.exam_star h2{font-size:1.4em;}
.result p{width: 80%;}
.result em{ font-size: 1.25em;}
.result h3{font-size:1.6em;}
}

@media (min-width:320px) and (max-width: 480px) {
.trend_visual , .exam_visual{padding-top:60px;	height: 280px;}
.sidebar{top: 320px; } 
 
.foreword { padding-left:15px;}   
.descrip_box h4{font-size: 1.25em;}
.slide div{width:18%;margin:8px;}   

thead {display: none;}
td {display: block;padding:5px;	text-align: left;border:none;}
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_btn {margin-bottom: 50px;}	
.trend_view a.trend_btn, .exam_btn a.review{margin: 0;margin-bottom:30px }
.exam_visual img{width:80%;padding-top:120px;} 
.result{font-size: 1em;}

.trend_view_box .img_full .swiper-slide img {
    max-width: 325px;
}

.swiper-container .btn_arrow_pre {
    position: absolute;
    top: 40%;
}
.swiper-container .btn_arrow_next {
    position: absolute;
    top: 40%;
}
}

@media (min-width:412px) and (max-width:414px) {
.trend_visual , .exam_visual{	height:230px;}
.sidebar{top:260px; } 
.foreword h2:after{height:30px;}


}

@media (min-width:320px) and (max-width:375px) {
.trend_visual , .exam_visual{	height:220px;}
.sidebar{top:250px; } 
.foreword{width: 80%;}
.share {left: 125px;}
}

@media (min-width:320px) and (max-width:320px) {
.trend_visual , .exam_visual{	height:190px;}
.foreword{ width:80%;margin-top:0px; padding: 10px;padding-top:40px;}  
.subtitle:before {display: none;}
.sidebar{top:200px; } 
.diagram img{width: 95%;}
 td:before {min-width:55%; }
	
.share {left: 110px;}

.result p{width: 80%;}
.exam_btn a{ margin:0px;margin-bottom:30px; }
}