/*---漢堡選單----*/
.sidenav {  width: 0;  position: fixed;  z-index:9999;  top:0px;  right:00px;  background-color:#262626;  overflow-x: hidden;  transition: 0.5s;  padding-top:40px;height:100%;box-shadow: 0px 0px 3px 1px #8e8585;}
.sidenav a {  padding:8px 8px;  text-decoration: none;  font-size:18px;  color: #000;  display: block;  transition: 0.3s;text-align: center;color: #fff;}
.sidenav a:hover {  color: #f7e8a9;}
.sidenav .closebtn {  position: absolute;  top:-15px;  right:-5px;  font-size: 36px;  margin-left: 00px;color: #fff;}
.sidenav .exam_link{color:#f4a45e;}

#hambger {  display:none;  transition: margin-right .5s;  padding:10px;  box-sizing: border-box;  position:fixed;   z-index: 99;  right:0px;  color: #262626;  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; }

.trendlogo {display: inline-block;position: absolute;top: 15px;left: 5px; z-index: 999;}
.share {display: inline-block;position: absolute;left: 150px;top:20px;z-index: 99;}
.container.content{padding-top: 0;}
.trend_wapper{background-color: #f5f1e5;}
.main_visual{display: block; max-width: 1240px;margin: 0 auto;padding-top:2.5vw;}
.main_visual img , .mobile_main_visual img{width: 100%;}
.mobile_main_visual{display:none; max-width: 640px;height:0; margin: 0 auto;margin-top:60px;padding-bottom:62%;}
.curation_nav {display: inline-block;width: 100px;border-radius: 8px;position: fixed;text-align: center;right: 20px;top: 10px;z-index: 99;}
.curation_nav ul li{margin-bottom: 8px;}
.curation_nav ul li a {display: block;width: 100px;height: 35px;line-height: 35px;overflow: hidden;background-color: #fff;border:dotted 2px #3a2413;font-weight: 600;}
.curation_nav ul li a:hover{background-color: #3a2413;color: #fff;}
.curation_nav ul li a.exam_link{background-color: #3a2413 ;color: #f3a55d;}
.curation_nav ul li a.exam_link:hover{background-color:#c34913;color: #fff;}
.exam_side {display: block;width: 100px;height: 100px;position: fixed;right: 18px;top: 300px;z-index: 99;}

.trend_container{display: block; max-width: 1200px; margin: 0 auto;padding:50px 30px;box-sizing: border-box;font-size: 18px;line-height: 1.8em;}
section{margin-top:80px;}
.foreword{display: flex; justify-content: space-around;flex-wrap: wrap;}
.foreword i{display: block; width: 175px;}
.foreword div{width:75%;}
.foreword strong{font-size: 28px; font-weight:600;}
.foreword p{margin-bottom: 20px;}
.foreword .red{color: #ff0000;}

.headline{display: flex;line-height:100px;font-size: 28px; font-weight: 500; flex-wrap: wrap;line-height: 1.6em;margin-bottom:30px;}
.headline h3{display: block; margin-top: 30px;width:77%;}
.headline i{display: block;margin-right: 30px;}
.related_cases {display: block; width: 100%; display: flex;flex-wrap: wrap; justify-content: space-between;}
.related_cases.two_column div{width: 49%;position: relative;}
.related_cases a{display: block;width: 100%;height: 0;padding-bottom: 66.7%;overflow: hidden;position: relative;overflow: hidden;}
.related_cases a img {display: block;position: absolute;top: 0;left: 0;right: 0;margin: 0 auto;width: 100%;height: 100%;} /*讓手機畫面的圖片對齊，但是可能會拉到圖片*/

.description{display: flex;justify-content:space-between;max-width: 1050px;margin: 0 auto;margin-top:50px;margin-bottom: 50px;flex-wrap: wrap;}
.diagram{display: block; width:400px;height: 180px; }
.diagram img{width: 100%;}
.description div{display: block; width:55%; }
.description_no_diagram div{width: 100%;}
.description em{color: #beb6b0; font-size: 24px; font-weight: 500;}

.related_cases.three_column{max-width: 1050px;margin: 0 auto;}
.related_cases.three_column div{width: 32%;position: relative;}

.producer{display: block; width: 100%;background-color:#957f68; text-align: center;color: #fff;margin-top: 30px;}

.five_column{ display: flex;flex-wrap: wrap;}
.five_column .right_img{width:49%;}
.five_column .left_img{ display: flex;width:23%;flex-direction:row;align-content:space-between;flex-wrap: wrap;}
.five_column .left_img div{width: 100%;}

table{ margin-bottom:50px;margin-top:20px;width:100%;border-collapse: collapse; border-style:hidden ;border-radius: 4px;margin-bottom: 30px;overflow: hidden;color: #3a2413;}
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:3px 10px; }
th{background-color: #3a2413;color: #fff}
table tr:nth-child(odd){background-color: #fff;}
table tr:nth-child(even){background-color: #eeeeee;}
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; }
table img{display:inline-block; width:46px; height:26px;margin:0 auto;position: relative;top: 5px;}

section table{font-size: 16px;}
.foreword table{width: 80%;}

section table td:nth-child(6){width: 300px;}
section table td:nth-child(7){width: 240px;}

.trend_container.exam_container{padding: 0 30px;}
.exam_container section{display: flex; flex-wrap: wrap;}
.exam_container section ul , .exam_container section em {display: block; width: 78%;margin-left: 30px;}

.exam_container ul li {list-style-type: decimal;margin-left: 30px;margin-bottom:10px;}

.date{font-size: 30px;font-weight: 500; line-height: 110px;margin-left:40px;}

.prize{display: flex; flex-wrap: wrap;width: 75%;margin-left:40px;}
.prize div{width:200px; margin-right:40px;margin-bottom:40px; text-align:center;}
.prize div img{width: 100%;border-radius: 100%;}
.prize span{font-size: 1.25em; font-weight:600;}
.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: 40px;flex-wrap: wrap;padding-bottom:80px;}
.exam_btn a {display: block;background-color: #f4a45e;color: #fff;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:#362c19;color:#f4a45e; }
.exam_btn a.review {background-color: #362c19;}
.exam_btn a.review:hover{background-color:#beb6b0;color:#362c19;}

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

.exam_container h2 span {display: block;font-size: 1.8em;margin-bottom: 30px;}
.exam_container h2 {font-size: 1.625em;margin-bottom: 30px;font-weight: 600;display: block;text-align: center;line-height: 1.4em;}
.exam_btn a.negative {background-color: #333;color: #fff;}
.tip {margin-top: 20px;display: block;text-align: center;}
.tip a {text-decoration: underline;color: #ea7b54;}

.result{text-align: center;margin-top: 20px;}
.result em{ display: block; font-size: 40px; color: #f4a45e; font-weight: 600;}
.result strong{display: block;font-size: 32px; font-weight: 600; margin-top:40px;line-height: 1.4em;}
.result p{display: block; font-weight: 500;margin-top: 20px;}
a.fb_btn {background: #4267b2;color: #fff;}
a.fb_btn:hover{background: #244381;color: #fff;}

/*圖片底層*/
.trend_container{display: block; width:100%; padding:20px;box-sizing: border-box;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_container a.negative{ 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_container a.negative.review{background-color:#fff; color:#211612;}
.trend_container a.negative:hover { background-color:#f78b65;color:#fff; }
.trend_container a.negative.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: 6%;
    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: 6%;
    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 .swiper-slide {
    height: 100%;
}

.trend_view_box .swiper-container-thumbs .bgImage {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

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

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


@media (min-width:320px) and (max-width: 1024px) {     
    .exam_side {right: 10px;}
	.curation_nav{display: none;}
    #hambger { display: inline-block;}
    .main_visual{padding-top:6vw;}
    .headline h3{width: 100%;margin-top: 0;}
    .description div{width: 100%;}
    .diagram{margin:0 auto;margin-bottom: 30px;} 
    .five_column .right_img{width: 100%;}
    .five_column .left_img{width:48%;}
    .five_column .left_img div{margin-top:2vh;}

}
@media (min-width:320px) and (max-width: 820px) {  
    .main_visual{padding-top:8vw;}
    .foreword{justify-content: flex-start;}
    .foreword div{width: 100%;}
    .foreword i{margin-bottom: 30px;}
    .related_cases.two_column div{width: 100%;}
    .related_cases.two_column div:first-child{margin-bottom:30px;}
	
	.exam_btn {  flex-direction: column-reverse;}
	.exam_btn a{margin: 0 auto;margin-bottom:30px;}
	.exam_container section{display: block;margin-top: 30px;}
    .exam_container section ul , .exam_container section em { width: 100%;margin-left:0px;}
	.date{text-align: center;margin-left: 0;}
	.prize{display: block;margin: 0 auto;}
	.prize div{margin: 0 auto;margin-bottom: 40px;}
    .swiper-container .btn_arrow_pre {position: absolute;left: 0;top: 50%;display: block;width: 46px; height: 46px; z-index: 99; cursor: pointer;}

    .swiper-container .btn_arrow_next {position: absolute;right: 0;top: 50%;display: block;width: 46px;height: 46px; z-index: 99;cursor: pointer;}

}

@media (min-width:320px) and (max-width: 768px) {
    .foreword table{width: 100%;}
	thead {display: none;}
    td {display: flex;padding:5px;	text-align: left;border:none;font-size: 15px;}
    td:before {content: attr(data-title);display: inline-block;width: auto;min-width:20%;font-weight: 900;padding-right: 1rem;	font-weight: 500;color: #000;font-weight: 500;}
	tr:nth-child(even) {  background: rgba(0, 0, 0, 0.1);}
    section table td:nth-child(6) , section table td:nth-child(7){width: 100%;}
    table img{margin:0;}	
}

@media (min-width:320px) and (max-width:640px) {
    td:before {
        min-width: 35%;
    }

    .main_visual {
        display: none;
    }

    .mobile_main_visual {
        display: block;
    }

}

@media (min-width:320px) and (max-width:480px) {
    .main_visual {
        padding-top: 15vw;
    }
}

@media (min-width:320px) and (max-width:320px) {
    .exam_btn a {
        width: 220px;
    }
}