@charset "utf-8";

/* CSS Document */
body{font-family:'Lato','微軟正黑體',sans-serif;font-size: 1rem;/* letter-spacing: 3px; */line-height: 1.8;color:#333}
a{color:#000;text-decoration:none}
a:hover{color:#777;-o-transition:all .3s linear;-webkit-transition:all .3s linear;-moz-transition:all .3s linear;transition:all .3s linear}
*{ backface-visibility: hidden; -wetkit-backface-visibility: hidden;}
/*---------------------- 基礎設定 ----------------------*/
/*反白設定
::selection { background: #666; color: #FFF; }
::-moz-selection { background: #666; color: #FFF; }
*/
.alert_line{border-color: #d40023;}
.red{color: #d40023;}
/* 回頂端 */
#goTop{display:none;cursor:pointer;position:fixed;bottom:1rem;right:1rem;width:50px;height:50px;line-height:50px;text-align:center;color:#ccc;background:#fff;border:solid 1px #ccc;border-radius:100%;box-shadow:rgba(0,0,0,.5) 0 0 5px}
#goTop:hover{background:#999;color:#FFF}

/*按鈕*/
.btnStyle{display: inline-block;padding: 8px 30px;border-radius: 25px;overflow: hidden;color: #fff;background: #000;font-weight: bold;box-shadow: 0px 5px 5px rgb(0 0 0 / 65%);}
.btnStyle.brown{background: url(../images/index/btnBrown.jpg)no-repeat center/cover;}
.btnStyle.lightBrown{background: url(../images/index/btnGray.jpg)no-repeat center/cover;padding: 8px 110px;color: #000;box-shadow: none;font-weight: 500;}
.btnStyle+.btnStyle{}
.btnStyle:hover{opacity:.8;color:#fff;}


/*RWD編輯器表格(X捲軸)*/
.table-container table td{min-width:100px;padding:5px;border:1px solid #ccc;white-space:inherit}
@media screen and (max-width: 768px) {
.table-container{width:100%;overflow-y:auto;_overflow:auto;margin:0 0 1em}
}
/*IE瀏覽器*/
.warning{width:100%;color:#fff;text-align: center;max-width: 1500px;padding: 60px 50px 50px;position:fixed;left:50%;transform: translate(-50%, -50%);top: 50%;background-color: #283d86;box-shadow:0 0 15px rgba(51,51,51,.5);border-radius:3px;z-index:9999999999;-o-transition:all .3s linear;-webkit-transition:all .3s linear;-moz-transition:all .3s linear;transition:all .3s linear;}
.off{cursor: pointer;position:absolute;right: 10px;top: 10px;border: 1px solid #eee;padding: 3px 5px 3px 10px;}
.off:hover{background-color:#fff;color:#333;}

.warning-item p{font-size: 25px;font-weight: 600;margin-bottom: 30px;}
.use-tool ul{padding-left:0;list-style:none}
.use-tool ul li{display:inline-block;margin: 0 5px;}
.use-tool ul a{display:block;background: #fff;padding: 7px 10px;border-radius: 60px;}
.use-tool-sm{margin-bottom: 10px;display: block;text-align: center;}
.use-tool figure{width: 30px;float:left;margin-right: 5px;margin-bottom: 0;}
.use-tool span{float:right;margin-top: 2px;font-weight: 600;}
/*---------------------- 頁面開始 ----------------------*/
/*表格*/
.tableStyle{width: 100%;border: 1px solid #9f9f9f;margin-bottom: 20px;}
.tableStyle td{border-bottom:1px solid #9f9f9f}
.tableStyle td{padding:5px;}
.tableStyle tr td:first-child{background:#eee;width: 150px;}
/*全頁佈局*/
/*.wrapper { padding:2rem 0; }*/
.blockHeight{padding-top: 6rem;padding-bottom:8rem;}
.blockHeight:last-child{padding-bottom: 4rem;}
.boxHeight{margin-top: 40px;}
h1,h2,h3,h4,h5,figure,ul,p{margin-bottom:0;}
.grayBg{background: #c1c1c1;}
.boxBorder{border:3px solid }
.lighBrownBg{background: #ece3d4;}
.fontMid{font-size:1.4rem}
/*標題*/
.mainTitle{display:flex;align-items: center;justify-content: center;color: #221714;border-bottom: 1px solid;padding-bottom: 20px;}
.mainTitle .big{font-weight:bold;letter-spacing: 6px;}
.mainTitle .num{width: 50px;height: 50px;text-align:center;background: #221714;color: #fff;line-height: 50px;border-radius: 100%;margin-right: 10px;font-size: 1.6rem;font-weight: bold;}
.subTitle{color:#221714;font-size: 1.8rem;margin-bottom: 20px;padding-bottom: 8px;border-bottom: 1px solid;font-weight: bold;letter-spacing: 3px;}
.vsTitle{font-size: 1.6rem;margin-bottom: 20px;position: relative;}
.vsTitle:before{content:'';position:absolute;left: 14px;width: 94%;background: #969696;height: 3px;bottom: 1px;}
.vsTitle h3{background:#969696;color: #fff;font-weight: bold;display: inline-block;padding: 5px 15px;line-height: 1.4;}
.vsTitle.blue h3{background:#2b4f8a}
.vsTitle.blue:before{background:#2b4f8a}
/*----------------首頁----------------*/
.area_pro{position: absolute;margin-top: -50px;}
.area_pro .area_abso{/* position:absolute; *//* left:0; *//* top: -150px; */}
/*主選單*/
.navbar-toggler{color:#fff;font-size: 1.6rem;}
header{background:#000;position: fixed;top: 0;width: 100%;z-index: 10;}
.menuTxt{font-size: .9rem;line-height: 1.4;left: 3px;margin-left: 15px;}
.navbar{padding: 10px 20px;}
.navbar-brand{display:flex;color: #fff;align-items: center;padding-top: 0;}
/*.menuLogo img{max-width:120px}*/
.navbar-expand-lg .navbar-nav .nav-link{color:#fff;position:relative;padding: 1rem 1.5rem;text-align: center;}
.navbar-nav .nav-item:not(:last-child) .nav-link:before{content:'';position:absolute;right:0;bottom: 0px;width: 100%;height: 1px;background: rgb(255 255 255 / 60%);}
/*首頁--第一區塊*/
.firstZone__outer{/* display:flex; */margin-top: 61px;}
.firstZone__left{width: 100%;background:url(../images/index/ixBnLeft.jpg)no-repeat center/cover;padding: 50px;display: flex;justify-content: center;align-items: center;}
.leftLogo img{max-width:250px;}
.firstZone__right{width: 100%;background: url(../images/index/ixBnRight.jpg);padding: 25px 35px;}
.firstBox{color:#fff;}
.firstBox:not(:last-child){margin-bottom:35px}
.firstBox .boxName{color: #000;mix-blend-mode: lighten;background: #fff;display: inline-block;padding: 8px 16px;font-size: 1rem;font-weight: bold;letter-spacing: 3px;}
.firstBox .txt{border-top: 1px solid #fff;padding-top: 20px;color: rgb(255 255 255 / 80%);line-height: 1.4;/* font-size: .9rem; */}
.firstBox:last-child .txt{display:flex;justify-content: space-between;}
.firstBox:last-child .txt figure{margin-top: -20px;}
/*首頁--投票說明*/
.voteInfo__box{padding: 0px 20px;}
.boxTxt:not(:last-child){margin-bottom:10px;/* font-size:1.2rem; */}
.voteStep__box{display:flex;align-items: center;justify-content: center;flex-wrap: wrap;}
.voteStep__box figure{padding: 0px 20px;position: relative;margin-bottom: 20px;}
.voteStep__box figure:not(:last-child):after{content:'\F285';font-family: bootstrap-icons !important;right: -13px;position: absolute;top: 50%;transform: translateY(-50%);font-size: 1.4rem;}
.voteStep__box figure img{max-width: 130px;}
.voteCount__box{justify-content: center;margin-left: 30px;}
.voteItem{display:flex;align-items: center;font-size: 1rem;font-weight: bold;/* justify-content: center; */margin-bottom: 20px;}
.voteItem .txt{padding-left:10px;}
.voteStep__box figure:not(:nth-child(odd)):after{display:none;}
/*注意事項*/
.voteBtn{display: flex;align-items: center;justify-content: center;border: 1px solid #202020;/* width: 100%; */margin: 0 auto;/* padding: 10px; */border-radius: 40px;width: 80%;cursor: pointer;background: #fff;position: relative;transition: all .5s;}
.voteBtn h3{font-size:1rem}
.voteBtn.active{border:none;margin-bottom: 45px;}
.voteBtn.active i{display:none}
.voteBtn i{font-size: 1.4rem;margin-left: 5px;}
.voteWarn__txt{border:1px solid ;padding: 20px;margin-top: -30px;z-index: -1;display: none;}
.voteWarn__txt ul{list-style: decimal-leading;font-size: 1.2rem;}
.voteWarn__txt ul li:not(:last-child){margin-bottom:15px;}
.boxTxt{display:flex;}
/*首頁--案例投票*/
.ixCase__zone{background: url(../images/index/voteBg-top.jpg)no-repeat bottom;padding-bottom: 2rem!important;}
.ixCase__voteBtn{background: url(../images/index/voteBg-btm.jpg) bottom;padding: 20px;}
.caseVote__zone{display: grid;grid-template-columns: repeat(1, 1fr);grid-column-gap: 2em;margin-top: 50px;}
.caseVote__box{text-align:center;position: relative;}
.caseMid{margin: 40px 0;position: relative;}
.caseMid:before{content:'';position:absolute;left:50%;bottom: -15px;transform:translateX(-50%);width: 50px;height:1px;background:#000;}
.caseName{font-weight:bold;font-size: 1.5rem;}
.caseDesign{font-weight:bold;}
.caseType{margin:20px 0;display: flex;justify-content: center;}
.caseType span{border-radius: 20px;color: #b48f80;padding: 4px 6px;font-weight: bold;margin: 0px 5px;font-size: .9rem;position: relative;}
.caseType span:before{content:'';position:absolute;left: -8px;top:50%;transform:translateY(-50%);width: 8px;height: 8px;background: #b48f80;border-radius: 100%;}
.voteTick i{color:#e3a633}
.voteTxt{margin:20px 0;display: -webkit-box;white-space: normal;-webkit-line-clamp: 2;-webkit-box-orient: vertical;height: 59px;overflow: hidden;}
.votePic img{margin:0 auto;}
.votePic .first{display: block;}
.votePic .sec{display: none;}
.votePic:hover .first{display: none;}
.votePic:hover .sec{display: block;}
/*列表--案例*/
.caseVote__zone.inner{grid-row-gap: 2.5em;grid-column-gap: 2.5em;}
.caseVote__zone.inner .caseVote__box{text-align:left;border: 1px solid;}
.caseVote__zone.inner .caseInfo__txt{padding:20px;}
.caseVote__zone.inner .caseMid{margin: 15px 0;}
.caseVote__zone.inner .caseMid:before{display:none;}
.caseVote__zone.inner .caseVote__box:not(:last-child):after{display:none;}

.caseVote__box.animation figure{overflow: hidden;opacity:0;transition: all .3s;position: relative;}
.caseVote__box.animation figure::before{content:'';position: absolute;background: #fff;position: absolute;top: 0;left: 0;width: 100%;height: 100%;-webkit-transform: translate(-101%,0);transform: translate(-101%,0);z-index: 1;}
.caseVote__box.animation.is_animated figure{opacity:1;-o-transition:all .3s 1000ms linear;-webkit-transition:all .3s 1000ms linear;-moz-transition:all .3s 1000ms linear;transition:all .3s 1000ms linear}
.caseVote__box.animation.is_animated figure::before{animation: move_go 1500ms 100ms cubic-bezier(0.77,0,0.175,1);}


@keyframes move_go {
    0%{-webkit-transform:translate(-101%,0);transform:translate(-101%,0)}
    42%,58%{-webkit-transform:translate(0,0);transform:translate(0,0)}
    100%{-webkit-transform:translate(101%,0);transform:translate(101%,0)}
    }
@-webkit-keyframes move_go {
    0%{-webkit-transform:translate(-101%,0);transform:translate(-101%,0)}
    42%,58%{-webkit-transform:translate(0,0);transform:translate(0,0)}
    100%{-webkit-transform:translate(101%,0);transform:translate(101%,0)}
}
/*page number*/
.page-number{margin: 20px auto;}
.pagination{display: block;margin-top: 30px;}
.pagination>li{display: inline-block;}
.pagination>li>a{border:none;color:#333;transition: all .5s;padding: 5px 10px;}
.pagination>li>a:hover{color: #000;}
.pagination>li.on a{background: #000;color: #fff;border-radius: inherit;}

/*首頁--得獎名單*/
.awardZone__outer{background: url(../images/index/awardBg.jpg)no-repeat center/cover;margin-top: 4rem;}
.awardBox{background:rgb(255 255 255 / 0.75);padding: 20px;}
.awardTitle{/* display:flex; *//* align-items: center; *//* justify-content: space-between; *//* position: relative; */}
.awardTitle figure{position:relative;margin-top: -29px;margin-bottom: 20px;}
.awardIntro{/* width:50%; */}
/*表格*/
.awardTable tr:first-child{background:url(../images/index/btnBrown.jpg);color: #fff;}
.awardTable{width:100%;overflow-y:auto;}
.awardTable table{border:1px solid #221714;margin-top: 20px;overflow-y: auto;}
.awardTable tr{border-bottom:1px solid #221714}
.awardTable tr td{padding: 5px;text-align:center;min-width: 150px;}
.awardTable tr:not(:first-child) td{background:rgb(255 255 255 / 0.6)}
/*頁尾*/
/*footer{background: #000;color:#fff;padding: 20px;text-align:center;/-* display: flex; *-/align-items: center;justify-content: space-between;}
.ftLeft{/-* display:flex; *-//-* align-items: center; *-/}
.ftLogo img{max-width:150px}
.ftList{margin-bottom: 0;font-size: .9rem;/-* margin-left: 10px; *-/display: flex;flex-wrap: wrap;margin-top: 10px;}
.ftList li:not(:last-child) a:after{content:'';position:absolute;width: 1px;height: 15px;background: #fff;right: 20px;bottom: 7px;}
.copyright{font-size:1rem;text-align: left;}
footer ul{margin-bottom:10px;padding-left:0;list-style:none}
footer ul li{display:inline-block;/-* padding: 0 10px; *-/position: relative;width: 33.3%;text-align: left;}
footer a{color: rgba(255,255,255,.75);}
footer a:hover{color:rgba(255,255,255,1); text-decoration:none;}*/
/*案例底層*/
.casePic__zone{margin-top:30px}
.casePic__slide{margin-top:50px}
.casePic__slide .slick-prev,.casePic__slide .slick-next,.casePic__slide .slick-prev:focus,.casePic__slide .slick-next:focus{/* z-index:10; */width: 40px;height: 40px;/* background: #000; */}
.casePic__slide .slick-prev{left:0;}
.casePic__slide .slick-prev:before,.casePic__slide .splide__arrow--prev:before{content: "\F22D";font-family: bootstrap-icons !important;color: #000;font-size: 2rem;}
.casePic__slide .slick-next{right:0;}
.casePic__slide .slick-next:before,.casePic__slide .splide__arrow--next:before{content: "\F231";font-family: bootstrap-icons !important;color: #000;font-size: 2rem;}
.casePic__slide .slick-prev:hover,.casePic__slide .slick-next:hover{opacity: .8;}
.casePic__big .slick-slide img,.casePic__big .splide__slide img{    object-fit: cover;width: 80%;margin: 0 auto;}
.casePic__sm .slick-slide{margin: 20px;}

.splide__track--fade > .splide__list > .splide__slide
{
    display:flex;
    justify-content: center;
    align-items: center;
}

.casePic__big .splide__slide figure {
    margin: 0 auto;
    text-align:center;
}

.casePic__slide .splide__arrow--prev, .casePic__slide .splide__arrow--next
{
    z-index:11;width: 80px;height: 80px;background:none;
}

.casePic__slide .splide__arrow--prev
{
    left:0;
}

.casePic__slide .splide__arrow--next
{
    right:0;
}

.casePic__slide .splide__arrow--prev:focus, .casePic__slide .splide__arrow--next:focus
{
    outline:none;
}

.casePic__sm .splide__slide {
  opacity: 0.6;
}

.casePic__sm .splide__slide.is-active {
  opacity: 1;
  border:0 !important;
}

@media (min-width: 768px)
{
    .casePic__slide .splide__arrow--prev:before, .casePic__slide .splide__arrow--next:before
    {
        font-size: 4rem;
    }
    .casePic__sm .splide__slide figure
    {
        padding:15px 0;
        /*margin: 40px 20px;*/
    }
}

.caseCenter__txt{display:flex;align-items: center;justify-content: center;}
.ideaBox{padding: 20px 0;}
.ideaList{list-style:none;padding-left:0;}
.ideaList li{display:flex;margin-bottom:10px;}
.ideaList li i{margin-top:-1px;margin-right:5px;}

.boxBtm{display: grid;grid-template-columns: repeat(1, 1fr);grid-row-gap: 2em;}

/*投票案例介紹*/
.voteName{background: url(../images/index/btnBrown.jpg)no-repeat center/cover;color: #fff;padding: 16px 0;font-weight: bold;}
.caseVote__outer{margin-top: 104px;}
.caseBar{position:fixed;top: 62px;width: 100%;z-index: 9;}
.caseBar a{background: #575757;color: #fff;display: block;text-align: center;padding: 5px;}
.caseBar li.active a{background:#fff;color:#575757}
.caseBar ul{list-style:none;padding-left:0;display: flex;}
.caseBar ul li{width:33.3%}
.picBox{position:relative;}
.picBox span{position:absolute;background:#575757;color:#fff;display:inline-block;font-size:.9rem;font-weight:bold;padding:0 10px;letter-spacing: 0;bottom: 0;left: 0;}
.picBox:last-child span{top:0;right:0;left:inherit;bottom:inherit;background:#000}
.txtBlock{display:flex;width: 100%;}
.txtBlock span{display:inline-block;margin-right: 10px;width: 60px;}
.txtBlock span+span{display:inline-block;margin-right:0;width: calc(100% - 60px);}

/*投票完成燈箱*/
.closeBtn{position:absolute;right: 25px;top: 30px;color:#fff;cursor: pointer;}
.votePop__outer{position:fixed;/* left:50%; *//* transform:translate(-50%,-50%); */width: 100%;height: 100%;top: 0;left: 0;z-index: 10;display: none;}
.votePop__zone{display: flex;align-items: center;color: #fff;flex-wrap: wrap;width: 100%;position: absolute;top: 50%;height: 100%;left: 50%;transform: translate(-50%,-50%);z-index: 1;}
.votePop__left img{max-width: 300px;margin:0 auto;}
.votePop__left{width: 100%;text-align: center;position: relative;}
.votePop__left:before{content:'';position:absolute;left:0;bottom: -80px;width:100%;height:1px;background:#fff;}
.votePop__right{padding: 0px;font-weight: bold;text-align: center;}
.votePop__right h3{font-size:2.5rem}
.voteShare{display:flex;flex-wrap: wrap;font-size: 1.4rem;align-items: center;justify-content: center;margin-top: 20px;}
.fb_iframe_widget{margin:0px 10px;margin-top: -10px;}
.overlay{position:fixed;top:0;left:0;width:100%;height:100%;background: rgb(255 255 255 / 70%);}