/*版頭*/
header div {
    height: 60px;
}

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

#wrapper{background-color:#e1dcd6;box-sizing: border-box;position: relative; }
#wrapper h2 ,#wrapper h3 , #wrapper h4{font-weight:600;}
.trendlogo{display: inline-block;position: absolute; top:15px;}
.share{display: inline-block; position: absolute; right: 20px;top:15px;}
.team{display: block; text-align: center;margin-top:0px;background-color: #e1dcd6;padding: 10px 0;}
/*---趨勢版頭&測驗版頭-------------*/
.trend_visual , .exam_visual{max-width: 1200px; background-image: url(/images/event/2021/trendquiz/trendvisual.jpg);height: 400px;background-repeat: no-repeat;background-position: center; background-repeat: no-repeat;margin: 0 auto;box-sizing: border-box;}
.trend_visual img{display: block; padding-top:150px;padding-left:30px;}
.exam_visual{ height: 400px;background-image: url(/images/event/2021/trendquiz/examvisual.jpg);}
.exam_visual img{display: block; padding-top:100px;padding-left:30px;}

/*---類別選單-------------*/
.trend_container nav{display:block;text-align: center;}
.trend_container nav ul li{display: inline-block;background-image:url(/images/event/2021/trendquiz/nav_trend01.png);padding:0px 60px;background-repeat: no-repeat; background-position: top right 30px;}
.trend_container nav ul li:nth-child(2){background-image:url(/images/event/2021/trendquiz/nav_trend02.png);}
.trend_container nav ul li:nth-child(3){background-image:url(/images/event/2021/trendquiz/nav_trend03.png);}
.trend_container nav ul li:nth-child(4){background-image:url(/images/event/2021/trendquiz/nav_trend04.png);}
.trend_container nav ul li a{display: block; font-size: 1.25em; font-weight: 500; color: #333;padding-top:30px;text-align: right;border-bottom: 3px solid #e1dcd6;}
.trend_container nav ul li a:hover , .trend_container nav ul li a:focus{border-bottom: 3px solid #b49b63;}

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

/*---前言-------------*/
.foreword{ display: block;width: 70%; margin: 0 auto;box-sizing: border-box;margin-top:30px;text-align: left;padding-top:90px;}
.foreword h2{display: inline-block;font-size:2.5em;z-index:2;line-height: 1.2em;}
.subtitle{display: block; font-size: 1.25em;color: #b49b63; font-weight: 500;position: relative;}
.subtitle:before{display:block;content:"";  width:150px; height:22px;background-image:url(/images/event/2021/trendquiz/icon.png);left:-30px;top: -30px; position: absolute;}
.subtitle:after{display:block;content:"TREND";writing-mode: vertical-lr;font-family:"Times New Roman";position: absolute; left:-40px;top:5px;}
section{display: flex;flex-wrap: wrap;margin-top: 60px;max-width: 1200px;}

table{display:block; font-size: 1.2em;border-top: 4px solid #b49b63;  border-bottom: 4px solid #b49b63; margin:0 auto;max-width: 800px;margin-top: 30px;}
tr{  height: 40px; line-height: 40px; text-align: center;font-weight:500;}
th{padding: 0 15px; width:18%;box-sizing: border-box;line-height: 1.8em;vertical-align: middle}
th:first-child{width: 26%;}
th:last-child{width: 18%;}
th{border:1px solid #b49b63;}
table i{ display:inline-block; margin-right: 5px;color:#bd433e;}
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 i{margin-left: -15px;}
table span{ color: #b3253d; }
th[scope="col"]{color:#b49b63;}

table.trend03{width: 70%;}
table.trend03 th:first-child , .foreword table.trend04 th:first-child{width: 10%;}
table.trend04 th:last-child{width: 20%;}
table.trend03 i , table.table05 i{margin-left: 0; margin-right: 0;}
table.trend04 i.new_icon{margin-left: -70px;}
i.new_icon{display:inline-block; width: 75px; height: 25px; font-size: 14px; line-height: 25px;background-color:#bd433e;color: #fff; }
table.table05{width: 50%;}
table.table06{width: 100%;}
table.table06 th:first-child{width:2%}

/*---section區塊樣式-------------*/
.descrip_box{display:flex; margin: 0 auto; max-width: 1000px;position: relative;justify-content:space-between;flex-wrap: wrap;text-align: center;}
.description{display:block;width:65%;position: relative;}
.description:before{display: inline-block; content: "[";font-size: 6em; color:#9cb1b3;position: absolute;left: 0;top:30px;}
.description:after{display: inline-block; content: "[";font-size: 6em; color:#9cb1b3;position: absolute;content: "]";right:0;top:30px;}
.description_width{width:60%;}
.description i{display:block; font-weight: 500;box-sizing: border-box;text-align: center;width: 130px;padding-right: 5px;background-color: #9cb1b3;border-radius: 30px;color:#fff;margin: 0 auto;}
.description h3{display: inline-block;font-size: 1.8em;padding:10px 0;}
.description h4{font-size: 1.5em;}
.description p{display: inline-block;margin-top: 15px;}
.descrip_box .description.video{margin: 0 auto;width: 75%;}

/*---大圖瀏覽-------------*/
.view{display: block; max-width: 1000px; margin: 0 auto;margin-top:20px; }
.img_show{display:block; max-width: 1200px;}
.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: 82%; padding-bottom:46.125%;height: 0;overflow:hidden;margin: 0 auto;margin-top: 30px; margin-bottom: 30px;}
.video-container iframe, .video-container object, .video-container embed {position: absolute;left: 0;width: 100%;height: 100%;padding-bottom: 56.25%;}

/*---圖片底層-------------*/
.trend_view{display: block; width:100%; padding:20px;background-color: #fff;box-sizing: border-box;text-align: center;}
.trend_view_box{display: block; max-width: 1200px; margin: 0 auto;text-align: center; color: #000;}
.trend_view a.trend_btn{ display:inline-block;text-align: center;width: 180px; height:40px;line-height: 40px; margin: 10px 20px;border-radius: 30px;border:2px solid #b49b63;color:#b49b63;font-weight: 500;}
.trend_view a.trend_btn:hover{ background-color:#b49b63; color: #fff; }


.exam_container{max-width: 1200px; margin: 0 auto;box-sizing: border-box;padding:40px 80px;background-color: #a64637;color: #fff;}
.exam_container strong{display: block; color:#d7b3a7;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;}
.prize div{width: 150px; margin-right:50px;margin-top: 10px; text-align:center;}
.prize div img{width: 100%;border:10px solid #c9776a;}
.exam_btn{text-align: center;margin-top: 30px;}
.exam_btn a{display:inline-block;color: #fff; border-radius: 50px;margin: 0 auto;margin: 20px;width: 250px;border:1px solid #fff;line-height: 45px;font-size: 1.25em; font-weight: 500;}
.exam_btn a:hover{ background-color: #fff;color:#a64637; }
.exam_btn input{display:inline-block;color: #fff; border-radius: 50px;margin: 0 auto;margin: 20px;width: 250px;border:1px solid #fff;line-height: 45px;font-size: 1.25em; font-weight: 500;background-color: #a64637;}
.exam_btn input:hover{ background-color: #fff;color:#a64637; }
.exam_img{width: 80%;margin: auto;}
.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: #d7b3a7;}
.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: #e1dcd6;color: #a64637; font-weight:600;margin-top: 30px;margin-bottom:10px;}
.result h3{font-size: 2em;}
.result p{width: 60%; margin: 0 auto;}
a.fb_btn {background: #4267b2;border-color:#4267b2;}



@media (min-width:896px) and (max-width: 1024px) {    
.trend_visual { background-image: url(/images/event/2021/trendquiz/trendvisual_1024.jpg);}
.trend_visual img{padding-top:150px;}
.sidebar{margin-right:-480px;top:50px; }
.foreword{ width:75%;  }   
.descrip_box{padding:0 20px;}   
.view{padding:0 20px;}
.description_width{width:50%;}
.slide div{width:17%;}
.video-container{ width:95%;padding-bottom:53.4%;}
.exam_container{padding:40px;}

}

@media (min-width:700px) and (max-width: 768px) {  
.trend_visual { background-image: url(/images/event/2021/trendquiz/trendvisual_1024.jpg);}
.trend_visual img{padding-top:150px;}
.sidebar{display: none;}
.trend_container nav ul li{padding:0px 40px;}
.trend_container nav ul li{background-position: top right 0px;}
.foreword{ width:85%;margin-top: 40px;}  
.foreword h2{font-size:2em;}
.descrip_box{padding:0 20px;}
.description{display: block;width:100%;}
table{font-size: 1em;}
table.table05{width:60%;}
.diagram{display: block; text-align: center;margin: 0 auto;margin-top: 10px;}
.view{padding:0 20px;}   
.slide div{width:17%;}
.descrip_box .description.video{width:100%;}
.video-container{ width:95%;padding-bottom:53.4%;}
.exam_container{padding:40px;}
.exam_img{ width: 80%;}
.trend_btn a { width: 80%; margin:0px;margin-bottom:20px;padding:0 10px;}
.exam_btn a{ width: 50%;  }

}

@media (min-width:375px) and (max-width: 640px) {
.trend_visual img{width:80%; padding-top:140px;}
.trend_container nav ul li{margin-bottom: 10px;}
.foreword{ width:90%;padding:60px 20px;padding-bottom: 0;}  
.foreword h2{font-size: 1.6em;}
.descrip_box{padding:0 20px;}
.description{width:100%;}
table{font-size: 1em;}
th:first-child{width:22%;}
th:last-child{width:15%;}
table.trend03{width: 90%;}
table.table05{width:80%;}
.diagram{display: block; text-align: center;margin: 0 auto;}
.slide div{width:17%;}
.view{padding:0 20px;}
.descrip_box .description.video{width:100%;}
.descrip_box h3{font-size: 1.6em;}
.descrip_box h4{font-size: 1.4em;}
.video-container{ width:90%;padding-bottom:50.7%;}
.trend_btn a { width: 80%; margin:0px;margin-bottom:20px;padding:0 10px;}
.event_bn img{margin-top:-20px;}
    
.exam_visual img{width:70%;padding-top:120px;padding-left:20px;}    
.exam_container{padding:20px;}
.exam_btn a{ width: 60%; margin:0px;margin-bottom:20px; }
.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 {height: 400px;}  
.trend_container{padding-top: 0;}
.trend_container nav ul li , .trend_container nav ul li:nth-child(2) , .trend_container nav ul li:nth-child(3) , .trend_container nav ul li:nth-child(4){display: inline-block;background-image:none;padding:0px 20px;margin:15px;}   
.foreword { width: 85%;margin-top: 0;}
.trend_container nav ul li a{padding-top: 0;}   
.foreword h2{padding: 10px 0px;}    
.descrip_box h4{font-size: 1.25em;width: 80%;margin: 0 auto;}
.slide div{width:18%;margin:8px;}   
.diagram{margin-top: 20px;}
table.trend03{width: 100%;}
table.trend03 th:first-child{width: 15%;}   
.foreword table.trend04 th:last-child i{display: none;}
table.table05{width:90%;}
table.table05 th:first-child{width:18%;}
.trend_btn a { width: 80%; margin:0px;margin-bottom:20px;padding:0 10px;}
.event_bn img{margin-top:-30px;}    
.exam_container{padding:20px;}   
.exam_visual img{width:80%;padding-top:120px;} 
.result{font-size: 1em;}
.exam_btn a{ width: 100%; margin:0px;margin-bottom:30px; }
.share{display: inline-block; position: absolute; right: 0px;top:15px;}
}

@media (min-width:414px) and (max-width:414px) {
.trend_visual {height: 400px;}   
.trend_visual img{width:85%; padding-top:140px;padding-left: 15px;}
.trend_container nav ul li , .trend_container nav ul li:nth-child(2) , .trend_container nav ul li:nth-child(3) , .trend_container nav ul li:nth-child(4){margin:10px 5px;}  
.foreword{ width:85%;margin-top:0px; padding: 10px 10px;padding-top:60px;} 
.subtitle:before{left:-20px;}
.subtitle:after{left:-35px; }
table{width: 320px;box-sizing: border-box;}
table th{ padding: 0 5px;}
table th i{margin-right: 0;margin-left:2px;}
.event_bn{margin-top: 20px;}
.trend_btn a { width: 60%; margin:0px;margin-bottom:20px; }
.event_bn img{margin-top:0px;}

}

@media (min-width:375px) and (max-width:375px) {
.trend_container nav ul li , .trend_container nav ul li:nth-child(2) , .trend_container nav ul li:nth-child(3) , .trend_container nav ul li:nth-child(4){margin: 10px;}
table th{ padding: 0 5px;}
table th i{margin-right: 0;margin-left:5px;}
.exam_btn a{ width: 80%; margin:0px;margin-bottom:20px; }
}

@media (min-width:320px) and (max-width:320px) {
.trend_visual img{ width: 95%;padding-top:140px;padding-left:10px;}     
.trend_container nav ul li , .trend_container nav ul li:nth-child(2) , .trend_container nav ul li:nth-child(3) , .trend_container nav ul li:nth-child(4){margin: 10px 20px;} 
.foreword{ width:85%;margin-top:0px; padding: 10px;padding-top: 60px;}  
.subtitle:before{left:-15px;}
.subtitle:after{left:-30px; }
.description h3{font-size: 1.4em;}
.description h4{font-size: 1em;width: 75%;}
.diagram img{width: 90%;}
table{width: 260px;font-size: 14px;}
table th{ padding: 0 5px;}
table th i{margin-right: 0;margin-left:2px;}   
.team{padding: 10px;}
.foreword h2{font-size: 1.25em;}
.descrip_box{padding:0 20px;}
.description{width:95%;}
.descrip_box .description.video{width: 100%;padding: 0;}
.view{padding:0 20px;}
.foreword_diagram p{ padding:5px 10px;font-size: 1em;}

.prize div{margin-right:30px;}
.prize div img{border:5px solid #c9776a;}
.exam_star h2{font-size:1.25em;}
.result p{width: 80%;}
.exam_btn a{ width: 90%; margin:0px;margin-bottom:20px; }
}