#wrapper{background-color: #d7b3a7;box-sizing: border-box;position: relative;}
#wrapper h2 ,#wrapper h3{font-weight:600;}
.trendlogo{display: inline-block;position: absolute; top:15px;}
.share{display: inline-block; position: absolute; right: 20px;top:15px;}

/*---趨勢版頭&測驗版頭-------------*/
.trend_visual , .exam_visual{max-width: 1200px; background-image: url(/images/project/2020/trendanalysis/trendvisual.jpg);height: 550px;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:45px;padding-left: 50px;}
.exam_visual{ height: 470px;background-image: url(/images/project/2020/trendanalysis/examvisual.jpg);}
.exam_visual img{display: block; padding-top:40px;padding-left:30px;}

/*---類別選單-------------*/
.trend_container nav{display:block;text-align: center;}
.trend_container nav ul li{display: inline-block;background-image:url(/images/project/2020/trendanalysis/nav_living.png);padding:0px 50px;background-repeat: no-repeat; background-position: top right 40px;}
.trend_container nav ul li:nth-child(2){background-image:url(/images/project/2020/trendanalysis/nav_colors.png);}
.trend_container nav ul li:nth-child(3){background-image:url(/images/project/2020/trendanalysis/nav_elements.png);padding-left: 90px;}
.trend_container nav ul li:nth-child(4){background-image:url(/images/project/2020/trendanalysis/nav_style.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 #fff;}
.trend_container nav ul li a:hover , .trend_container nav ul li a:focus{border-bottom: 3px solid #d7b3a7;}

/*---趨勢內容樣式-------------*/
.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; color: #333; }
.inner_box{display: block; max-width: 1200px;margin: 0 auto;position: relative;}
.sidebar{display: inline-block; position: fixed; right:1em;top: 3em; }

/*---前言-------------*/
.foreword{ display: block; padding: 20px 40px; width: 60%; margin: 0 auto;box-sizing: border-box;margin-top: 90px;text-align: center;border:1px solid #333;position: relative;}
.foreword h2{display: inline-block;font-size: 1.875em;padding: 10px 15px;background-color: #fff; position: relative;z-index:2;bottom: 45px;line-height: 1.4em;}
.elements h2{padding: 10px 50px;}
.living h2:after , .colors h2:after , .elements h2:after , .styles h2:after{display: inline-block; content: "LIVING"; font-size:3.5em;font-family: "Georgia" , "Times New Roman";color:rgba(171,133,133,.3);font-style: italic;position: absolute;left: 0;right: 0;z-index:1;font-weight: 500;}
.colors h2:after{ content:"COLORS";}
.elements h2:after{ content:"ELEMENTS";font-size: 3em;}
.styles h2:after{content:"STYLES";}
.foreword p{text-align:left;margin-top: -20px;}
.colors{margin-top:0;}
section{display: flex;flex-wrap: wrap;margin-top: 60px;max-width: 1200px;}

/*---section區塊樣式-------------*/
.descrip_box{display:flex; margin: 0 auto; max-width: 1000px;position: relative;justify-content:space-between;flex-wrap: wrap; }
.description{width:65%;}
.description_width{width:60%;}
.description i{display:inline-block; font-size: 1.8em; font-style: italic; font-weight: 500;box-sizing: border-box; border:2px solid #333; border-radius: 100%; width: 60px; height: 60px;text-align: center; line-height: 55px;padding-right: 5px;font-weight: 600;}
.description h3{display: inline-block;font-size: 1.8em;padding:10px 0;font-style: italic;margin-left:10px; }
.description p{display: inline-block;margin-left: 60px;border-top: 1px solid #333;padding-top: 10px;}
.img_show{display:block; max-width: 1200px;background: -moz-linear-gradient(top, #ffffff 26%, #ffffff 26%, #d3d3d3 36%, #d3d3d3 36%);background: -webkit-linear-gradient(top, #ffffff 26%,#ffffff 26%,#d3d3d3 26%,#d3d3d3 26%);background: linear-gradient(to bottom, #ffffff 26%,#ffffff 26%,#d3d3d3 26%,#d3d3d3 26%);}
.blue{background: -moz-linear-gradient(top, #ffffff 26%, #ffffff 26%, #aab8c3 36%, #aab8c3 36%);background: -webkit-linear-gradient(top, #ffffff 26%,#ffffff 26%,#aab8c3 26%,#aab8c3 26%);background: linear-gradient(to bottom, #ffffff 26%,#ffffff 26%,#aab8c3 26%,#aab8c3 26%);}
.green{background: -moz-linear-gradient(top, #ffffff 26%, #ffffff 26%, #8c8e79 36%, #8c8e79 36%);background: -webkit-linear-gradient(top, #ffffff 26%,#ffffff 26%,#8c8e79 26%,#8c8e79 26%);background: linear-gradient(to bottom, #ffffff 26%,#ffffff 26%,#8c8e79 26%,#8c8e79 26%);}
.pink{background: -moz-linear-gradient(top, #ffffff 26%, #ffffff 26%, #c09992 36%, #c09992 36%);background: -webkit-linear-gradient(top, #ffffff 26%,#ffffff 26%,#c09992 26%,#c09992 26%);background: linear-gradient(to bottom, #ffffff 26%,#ffffff 26%,#c09992 26%,#c09992 26%);}
.brown{background: -moz-linear-gradient(top, #ffffff 26%, #ffffff 26%, #b5a088 36%, #b5a088 36%);background: -webkit-linear-gradient(top, #ffffff 26%,#ffffff 26%,#b5a088 26%,#b5a088 26%);background: linear-gradient(to bottom, #ffffff 26%,#ffffff 26%,#b5a088 26%,#b5a088 26%);}
.deep_blue{background: -moz-linear-gradient(top, #ffffff 26%, #ffffff 26%, #235273 36%, #235273 36%);background: -webkit-linear-gradient(top, #ffffff 26%,#ffffff 26%,#235273 26%,#235273 26%);background: linear-gradient(to bottom, #ffffff 26%,#ffffff 26%,#235273 26%,#235273 26%);}
.team{display: block; text-align: center; padding: 0 10px;margin-top:20px;}
/*---大圖瀏覽-------------*/
.view{display: block; max-width: 1000px; margin: 0 auto;margin-top:20px; }
.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 img{width: 100%;}

/*---色彩美學導讀文章-------------*/
article{ display: block; max-width: 1000px; margin: 0 auto;margin-top: 50px;}
.introduction_one{display: block; max-width:700px; padding: 30px 40px; box-sizing: border-box;color: #fff;background-color:rgba(70,120,158,.8);margin: 0 auto;margin-top: -50px;position:relative;bottom:120px;}
.introduction_one h2{font-size: 1.8em; margin-bottom: 10px;line-height:1.4em;}
.introduction_two{display: block; max-width:700px; padding: 30px 40px;margin: 0 auto;position:relative;bottom:100px;box-sizing: border-box; }
.introduction_two div{display: block; width:250px;float: right;margin: 10px 0 10px 10px;}
.ice_img img , .introduction_two div img{width: 100%; }

.foreword_diagram{ display: block;max-width: 750px; text-align: center;margin: 0 auto;margin-top: 50px;}
.foreword_diagram img{width:100%;}
.foreword_diagram p{display:inline-block; padding:8px 30px;font-size: 1.25em;color: #fff;background-color:#e84c50; border-radius:50px;  margin-top: 20px;}

/*---圖片底層-------------*/
.trend_view{display: block; width:100%; padding:20px;background-color: #333;box-sizing: border-box;}
.trend_view_box{display: block; max-width: 1200px; margin: 0 auto;text-align: center; color: #fff;}

/*---趨勢測驗&結果樣式-------------*/
.exam_container , .result_container{display: block; max-width:1200px; padding: 50px 80px;margin: 0 auto;background-color: #637e68;box-sizing: border-box;color: #fff;line-height: 1.8em;font-size: 16px;}
.exam_container strong{display: block;  font-size: 1.5em;color: #d7b3a7;margin-top: 30px;margin-bottom:5px;font-weight: 600;}
.exam_container i{display: block; margin-left: 15px;font-size: 1.5em;}
.exam_container ul li{list-style-type: decimal; list-style-position: outside; margin-left: 35px;margin-bottom: 8px;}
.exam_container h2 span{display: block; font-size: 1.8em;margin-bottom: 20px;}
.exam_img{display: block; width: 55%;margin: 0 auto;height: auto;}
.exam_img img{width: 100%;}
.tip{display: block;text-align: center; margin-top: 30px;}
.tip a{color:#d7b3a7;text-decoration: underline; }
/*---獎項-------------*/
.prize{display: flex;justify-content: space-around;flex-wrap: wrap;}
.prize_container{width: 16%;margin-top: 20px;text-align: center;}
.prize_container img{width: 100%;border: 10px solid #809b85;}
.prize_container span{font-size: 1.25em; font-weight: 500;}

/*---趨勢測驗&結果按鈕-------------*/
.trend_btn , .exam_btn{display:block;text-align: center;margin-top: 50px;}
.trend_btn a , .exam_btn a{display: inline-block; padding: 0 50px; height: 50px; line-height:50px; margin:  0 30px;color:#fff;font-size: 1.25em; font-weight: 500;  background-color: #d7b3a7 }
.exam_btn a{display: inline-block;width:15%; height: 50px;}
.trend_btn a:hover , .exam_btn a:hover{background-color: #d87b5c; color: #fff; }
.exam_btn a.negative{background-color:#c1c1c1; color: #fff; }
.exam_btn a.negative:hover{background-color:#989898; }
.exam_btn a.fb_btn{background-color: #4267b2; color: #fff;}
.exam_btn a.fb_btn:hover{background-color: #284683;}
#wrapper .exam_container h2{display:block; text-align: center;font-size: 1.6em;margin-bottom: 40px;line-height: 1.6em;font-weight: 500;}

/*---趨勢結果樣式-------------*/
.result_container{text-align: center;}
.result_container em{display:block; width: 200px;margin:0 auto; font-size: 1.25em; background-color:#d7b3a7; padding: 5px; border-radius:20px;}
.result_container h3{ display:inline-block;  font-size: 2em;margin: 0 auto; margin-top: 30px;line-height: 1.4em;color: #d7b3a7;font-weight:600;border-bottom: 1px solid #d7b3a7;}
.result_container h3 span{display: block;}
.result_container p{ display: block; width: 40%;font-size: 1.25em;line-height: 1.8em;margin: 0 auto;margin-top:20px;}

/*作品瀏覽*/
.bx-wrapper .bx-viewport {
    left:0;
}
.img_full {
    display: block;
    width: 900px;
    margin: 0 auto;
    margin-top: 30px;
}

    .img_full span {
        display: block;
        width: 900px;
        height: 600px;
        box-sizing: border-box;
    }

    .img_full img {
        display: block;
        /*height: 100%;*/
        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: #253241;*/
    }

        .slidenav li a {
            display: block;
            /*width: 150px;
            height: 113px;*/
            /*border: 3px solid #253241;*/
            box-sizing: border-box;
        }

            .slidenav li a:hover {
                border: 3px solid #cca19a;
            }

        /*.slidenav li:nth-child(5n) {
            margin-right: 0px;
        }*/

.slidenav_box .bx-wrapper img {
    /*height: 100%;*/
    margin: 0 auto;
}

.img_full .bx-wrapper .bx-viewport, .slidenav_box .bx-wrapper .bx-viewport {
    background-color: transparent;
}
#imgAlt a, #imgAlt a:hover {
    color: #fff;
}
/*箭頭*/
.bx-wrapper .bx-controls-direction .bx-prev {
    position: absolute;
    left: -60px;
    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: -60px;
    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: -65px;
}

.bx-wrapper .bx-controls-direction .bx-next:hover {
    opacity: .7;
    filter: opacity(70);
    right: -65px;
}
@media (max-width: 1024px) {
    .img_full {
        width: 100%;
    }

        .img_full span {
            width: 100%;
            height: calc(100vw * 2 / 3);
        }
}

@media (min-width:896px) and (max-width: 1024px) {    
.trend_visual { background-image: url(/images/project/2020/trendanalysis/trendvisual_1024.jpg);}
.trend_visual img{padding-top:80px;}
.foreword{ width:75%;  }   
.descrip_box{padding:0 20px;}   
.view{padding:0 20px;}
.description_width{width:50%;}
.slide div{width:17%;}
}

@media (max-width: 768px) {
    .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;
    }
    .sidebar{display: none;}
}

@media (min-width:700px) and (max-width: 768px) {  
.trend_visual { background-image: url(/images/project/2020/trendanalysis/trendvisual_1024.jpg);}
.trend_visual img{padding-top:80px;}
.trend_container nav ul li{padding:0px 40px;}
.trend_container nav ul li{background-position: top right 20px;}
.foreword{ width:85%;margin-top: 60px;}  
.colors{margin-top:-30px;}
.descrip_box{padding:0 20px;}
.view{padding:0 20px;}
.description{width:60%;}   
.description_width{width:45%;}
.foreword_diagram{padding: 0 60px;}
.slide div{width:17%;}
.exam_container , .result_container{padding:40px 20px;}
.result_container p{ width: 60%;}
.exam_img{ width: 80%;}
.exam_btn a{width:20%; }
}

@media (min-width:360px) and (max-width: 640px) {
.trend_visual img{width: 90%; padding-top:70px;padding-left:10px;}
.trend_container nav ul li{padding:0px 5px 0 60px;margin-bottom: 10px;background-position: top right 0px;}
.foreword{ width:90%;margin-top: 60px;padding: 20px;}  
.foreword h2{font-size: 1.625em;}
.living h2:after , .colors h2:after , .elements h2:after , .styles h2:after{font-size:3em;}
.colors{margin-top:-30px;}
.descrip_box{padding:0 20px;}
.description{width:100%;}
.description_width{width:100%;}
.diagram{display: block; text-align: center;margin: 0 auto;}
.slide div{width:17%;}
.view{padding:0 20px;}
.introduction_one{bottom:80px;}
.introduction_two{ bottom:80px; }
.introduction_one h2{font-size: 1.625em;}
.foreword_diagram{padding: 0 60px;}
.foreword_diagram p{ font-size: 1em;}
.trend_btn a , .exam_btn a{ width: 80%; margin:0px;margin-bottom:20px;padding:0 10px;}
.prize_container{width: 40%;margin-left:0px;}
.result_container p{ width: 70%;}
.event_bn img{margin-top:-20px;}
  .fb_share { margin-right: 72px;}
}

@media (min-width:320px) and (max-width: 480px) {
.trend_visual {height: 450px;}  
.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;border-bottom: 4px solid #d7b3a7;margin: 0 15px;}    
.description_width+.diagram img{width:95%;}
.trend_container nav ul li a{padding-top: 0;}   
.colors{margin-top:20px;}
.foreword h2{padding: 10px 10px;}
.living h2:after , .colors h2:after , .elements h2:after , .styles h2:after{display: none;}   
.foreword p{margin-top:-40px;}    
.introduction_one{width: 380px; bottom:50px;padding: 20px 30px; }
.introduction_two div{float: none;margin: 0 auto; margin-bottom: 20px;width: 300px;}
.introduction_two{width: 380px; bottom:30px;padding: 20px 30px; }
.foreword_diagram{padding: 0 20px;}
.foreword_diagram p{ padding:5px 50px;}
.slide div{width:18%;margin:8px;}
.exam_visual img{width: 90%; padding:20px 10px;; }
.exam_img{ width:100%;}
.exam_container, .result_container{padding:30px 20px;}
.prize_container{width: 40%;margin-left:0px;}
.trend_btn a , .exam_btn a{ width: 80%; margin:0px;margin-bottom:20px;padding:0 10px;}
.result_container p{ width: 70%;}
.event_bn img{margin-top:-30px;}
    .fb_share { margin-right: 30px;}
}


@media (max-width: 414px) {
    .bx-wrapper .bx-controls-direction .bx-prev, .bx-wrapper .bx-controls-direction .bx-prev:hover {
        left: -15px;
    }

    .bx-wrapper .bx-controls-direction .bx-next, .bx-wrapper .bx-controls-direction .bx-next:hover {
        right: -15px;
    }
}

@media (min-width:414px) and (max-width:414px) {
.trend_visual {height: 400px;}    
.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: 0 5px;}  
.foreword{ width:85%;margin-top: 40px; padding: 10px 20px;} 
.colors{margin-top:20px;}
.introduction_one{width: 300px; }
.introduction_one h2{font-size:1.25em; }
.introduction_two{width: 300px; }
.introduction_two div{width:240px;}
.event_bn{margin-top: 20px;}
.prize_container{width: 40%;margin-left:0px;}
.trend_btn a , .exam_btn a{ width: 60%; margin:0px;margin-bottom:20px; }
.event_bn img{margin-top:0px;}
    .fb_share { margin-right: 30px;}
}

@media (min-width:360px) and (max-width:375px) {
.trend_visual img{ width: 95%;padding-top:70px;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: 5px;}
.prize_container{width: 60%;margin-left:0px;}   
.introduction_one{width: 300px; }
.introduction_one h2{font-size:1.25em; }
.introduction_two{width: 300px; }
.introduction_two div{width:240px;}  
}

@media (min-width:320px) and (max-width:320px) {
.trend_visual img{ width: 95%;padding-top:70px;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: 40px; padding: 10px 20px;}  
.introduction_one{width: 280px; }
.introduction_one h2{font-size:1.25em; }
.introduction_two{width: 290px;padding: 0 30px; }
.introduction_two div{width:220px;}
.foreword h2{font-size: 1.25em;}
.descrip_box{padding:0 20px;}
.description{width:95%;}
.description_width{width:90%;}
.view{padding:0 20px;}
.foreword_diagram p{ padding:5px 10px;font-size: 1em;}
.exam_visual{height: 380px;}
.prize_container{width: 60%;margin-left:0px;}
.fb_base div:last-child { display:none;}
}