@charset "UTF-8";
/* CSS Document */

.hiWrap { position: relative; width: 100%; height: auto; background-color: #e9e7e1; }
.hiCon { position: relative; max-width: 1200px; height: 100%; margin: 0 auto; text-align: center; }
.hiTit { display: inline-block; font-size: 24px; letter-spacing: 2px; padding: 15px 0; color: rgb(41, 35, 33);}
.slick-slide { margin: 0px 20px !important; }
.slick-slide img { width: 100%; display: block; }
.slick-slide img.full { border-radius: 10px 10px 0 0; }
.slick-prev:before,
.slick-next:before {
    color: rgb(50, 52, 61);
}
.slick-slide { transition: all ease-in-out .3s; opacity: .2; }    
.slick-active { opacity: 1; }
.slick-current { opacity: 1;}
.slideWrap a { text-decoration: none; color: rgb(40, 43, 48);}
.hiWrap { font-family: 'ProximaNova_Regular', sans-serif, 微軟正黑體, 'Microsoft JhengHei', sans-serif !important; position: relative; width: 100%; height: auto; background-color: #e9e7e1; }
.hiCon { position: relative; max-width: 1200px; height: 100%; margin: 0 auto; text-align: center; }
.hiTit { display: inline-block; font-size: 24px; letter-spacing: 2px; line-height: 28px; font-weight: 500; padding: 15px 0 10px 0; color: rgb(41, 35, 33);}
.hiTit p { margin: 0 0; }
.miniSlider { position: relative; width: 84%; margin: 10px auto 20px auto; }
.miniSlider.inner { margin: 0 auto 0 auto; }
.slideWrap { position: relative; top: 0; bottom: 0; left: 0; right: 0; vertical-align: bottom;  }
.picWrap { width: 100%; display: block; }
.gisWrap {   width: 100%; height: auto;  text-align: left;  box-sizing: border-box;}
.gisWrap p { margin: 0 0;}
.gisTit { font-size: 22px; line-height: 26px; font-weight: 500; letter-spacing: 1px; padding: 10px 0 3px 0;max-height:52px;}
.gisCon { font-size: 18px; line-height: 23px; letter-spacing: 1px; padding-bottom: 10px;max-height:46px; }
.gis { padding: 0 !important;}

.videoSection {
    position: relative;
    width: 100%; 
    background: #f8c258;
    background: -webkit-linear-gradient(bottom left, #f8c258 0%, #ea3741 49%, #c939a3 100%);
    background: -o-linear-gradient(bottom left, #f8c258 0%, #ea3741 49%, #c939a3 100%);
    background: linear-gradient(to top right, #f8c258 0%, #ea3741 49%, #c939a3 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8c258', endColorstr='#c939a3',GradientType=1 );
}
.vidBackWrap { position: absolute; top:0; width: 100%; height: 100%;background: url(../img/headBack.svg); opacity: 0.1;}
.videoWrap { 
    font-family: 'ProximaNova_Regular', sans-serif, 微軟正黑體, 'Microsoft JhengHei', sans-serif !important;
    position: relative; max-width: 1200px; margin: 0 auto; padding: 90px 0 0px 0; 
}
.sTitle {
    width:85%;
    margin: 0 auto 15px auto;
    font-size: 24px;
    letter-spacing: 2px;
    line-height: 30px;
    text-decoration: underline;
  }
.sTitle a { color: black;}
.tagBlock.titTxt { background-color:initial; margin: 0 0 15px 0; padding: 7px 0 5px 10px;}
.videoFrame { width: 85%; margin: 0 auto; }
.vidGis { width: 100%; padding: 10px 0 0 0; font-size: 18px; line-height: 22px; letter-spacing: 2px;}
.videoDis { 
    width: 85%; margin: 15px auto; box-sizing: border-box; padding: 15px 2%;
    border-radius: 5px; 
    background-color: rgba(255, 255, 255, 0.7)
}
.disTit { font-size: 24px; line-height: 32px; letter-spacing: 2px; padding-bottom: 8px; }
.disSyn { font-size: 16px; line-height: 22px; letter-spacing: 2px;}



/* -------------------Episode Page-------------------- */
.headSectionWrap { position: relative; width: 100%; height: auto;}

.mobTitBlock { display: none; max-width: 1200px; margin: 0 auto 25px auto; text-align: center ; }
.mobTitWrap { display: inline-block; height: 100%; margin-left: -4px; border-radius: 5px; padding: 0 10px; background-color: #2b3d51; }
.mobTit { 
    display: inline-block; font-size: 21px; line-height: 32px; letter-spacing: 2px; 
    color: rgb(255, 255, 255); padding: 5px 20px 2px 20px; box-sizing: border-box;
    border-bottom: 1px solid #bdd9e4;
    vertical-align: bottom;
}
.mobGis { font-size: 14px; line-height: 20px; letter-spacing: 2px; padding: 2px 20px 4px 20px; color: rgb(255, 255, 255); }
.mobPicWrap { display: block; margin: 0 auto;  width:150px; vertical-align:top; font-size: 0;  }
.mobPic { width:100%; display: block; }
.miniWrap { 
    font-family: 'ProximaNova_Regular', sans-serif, 微軟正黑體, 'Microsoft JhengHei', sans-serif !important; 
    position: relative; width: 100%; height: auto; 
    text-align: center; 
}
.tagWrap { width: 85%; margin: 15px auto 25px auto; box-sizing: border-box; font-size: 16px; line-height: 22px; letter-spacing: 2px; }
.tagBlock { display: inline-block; padding: 7px 10px 5px 10px; margin: 0 10px 15px 0; color: rgb(255, 255, 255); border-radius: 5px; background-color: #60687d;}

.sldPos { position: absolute; width:100%; top:0; height: auto; text-align: center; z-index: 2;}
/* .miniSlide { position: relative; max-width: 1200px; height: 100%; margin: 0 auto; text-align: center; } */
.miniSlide { position: relative; max-width: 1200px; margin: 0 auto; height: 100%; text-align: center; }
.epiSidWrap {  position: relative;  width: 65%; float: right; margin-right: 4%;  }
.epiSidWrap.full {  width: 94%; float: right; margin-right: 3%;  }
.setSlider { position: relative; width: 94%; margin: 0 auto; }
/* .itemWrap { position: relative; top: 0; bottom: 0; left: 0; right: 0; vertical-align: bottom; margin: 0px 0px !important; }
.itemWrap a { text-decoration: none; color: rgb(40, 43, 48);} */
.imgWrap { width: 100%; display: block; }
.txtBlock { width: 100%; height: auto;  text-align: left;  box-sizing: border-box; border-radius: 0 0 10px 10px; padding: 0 8px; color:rgb(228, 232, 238) ; background-color:#2b3d51 }
.txtBlock p { margin: 0 0;}
.adTit { font-size: 20px; line-height: 26px; font-weight: 500; letter-spacing: 1px; padding: 10px 0 3px 0;max-height:52px;}
.adTxt { padding: 0 !important;}
.adCon { font-size: 16px; line-height: 23px; letter-spacing: 1px; padding-bottom: 10px; }

/* .mainConWrap { position: absolute; top:0; width: 100%; } */
.mainConWrap { position: relative; width: 100%;  }

.posImgWrap { position: relative; width: 100%;  opacity: 0; }
.posImg { width: 100%; display: block; }
.proBannerWrap { width: 100%; background-color: #bdd9e4; }
.proBanner { max-width: 1200px; margin: 0 auto; background-color: #bdd9e4; }
.btnWrap { position: absolute; width:100%; top:20%; left: 0;}
.btnWrap.full { top:40%; left: 0;}
.adPrev { top:25%; left: 5px; }
.adNext { top:25%; right: 5px; }
.conBtn { position: absolute;  width: 25px; height: 25px; border-radius: 50%; cursor: pointer; background-color: rgb(98, 104, 112);}
.conArr { position: relative; width: 42%; left: 29%; top: 22%; display: block; opacity: 0.6; }

.slidTemWrap { position: relative; width: 25%; float: left; margin-left: 4%; }
.slidTemPos { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
.temBack { position: absolute; top:0; }
.slidTemPic { position: relative; width: 100%; margin: 0 auto; }
.temTxtBlock { position: relative; width: 70%; border-radius: 0 0 10px 10px; margin: 0 auto;  background-color:#2b3d51}
.temTit { font-size: 22px; line-height: 26px; font-weight: 500; letter-spacing: 2px; font-weight: 700; margin: 0 10px 8px 10px; padding: 10px 0 5px 0; border-bottom: 1px solid rgb(219, 215, 215); color: rgb(228, 232, 238); }
.temGis {  font-size: 18px; line-height: 26px; letter-spacing: 2px; margin: 0 10px; padding-bottom: 8px;  color: rgb(228, 232, 238)}

.vidCardSect { 
    font-family: 'ProximaNova_Regular', sans-serif, 微軟正黑體, 'Microsoft JhengHei', sans-serif !important;
    width:100%; background-color: #bdd9e4; 
  }
  .titSect { position: relative; max-width: 1200px; margin: 0 auto; padding-bottom: 25px; background-color: #bdd9e4;}
  .shdWrap { position: absolute; top:0; width: 100%; }
  .shdImg { width: 100%; display: block;  }
  .vidCardWrap { position: relative; max-width: 1200px; margin: 0 auto; background-color: #bdd9e4; }
  .vidsecTit { position: relative;  width: 100%; text-align: center; padding-top: 45px; font-size: 22px; line-height: 26px; font-weight: 700; letter-spacing: 2px; color: rgb(25, 35, 53); }
  .vidCardBlock {
    position: relative; 
    width: 90%; 
    height: 100%; 
    margin:0 auto; 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: space-between; 
  }
  .vidCardItem{ 
    position: relative;
    /* flex: 0 1 calc(33% - 0.5em); */
    width: calc(25% - 0.5em);
    height: 100%;
    margin-bottom: 5%;
    cursor: pointer; 
    height: auto;
    box-sizing: border-box; 
    display: flex; 
    flex-flow: column; 
  }
  /* .vidCardBlock::after { content: ''; width: calc(50% - 0.5em); } */
  i { width: calc(25% - 0.5em); height: 100%; margin-bottom: 5%; }
  .vidPicWrap { position: relative; width:95%; background-color: darkgreen; }
  .vidPic { width: 100%; display: block; }
  .epiBarWrap { width: 100% ;}
  .epiBar { float: left; width:80%; font-size: 14px; letter-spacing: 2px; color: cornsilk; padding: 15px 5% 10px 5%; box-sizing: border-box; }
  .epiNum { float: right; width:20%; font-size: 14px; letter-spacing: 2px; color: cornsilk; padding: 15px 5% 10px 6%; box-sizing: border-box;  font-weight: 700; background-color: #2b3d51; }
  .triWrap {position: absolute; bottom:-1px; right: -5%; width:5%; }
  .triSvg { width:100%; display: block; }
  .vidGisBlock { 
    position: relative; 
    display: flex; flex-flow: column;  flex: 1; 
    width: 88%; padding: 12px 6%; 
    text-align: left;
    color: cornsilk;
    background-color: #2b3d51; 
    z-index: 2; 
  }
  .gisTitBlock { display: block; font-size: 21px; letter-spacing: 2px; line-height: 26px; max-height:52px; }
  .gisEpiBlock { display: block; padding-top: 5px; font-size: 16px; letter-spacing: 2px; line-height: 24px; }
  .lime { background-color: #80c342; }
  .brick { background-color: #d06b68; }
  .aqua { background-color: #00a99d; }
  .violet { background-color: #785da7; }
  .coral { background-color: #f08829; }
  .rose { background-color: #a25c63; }
  .azure { background-color: #4363ae; }
  .pink { background-color:  #e16079; }
/* -----------Epi slider setting ------------------- */
#epiSlider .slick-slide { margin: 0px 20px !important;}

@media screen and (max-width: 1000px) {
    .videoWrap { padding: 45px 0 0 0;}
    .miniSlider { width: 80%; }
    .slick-slide { margin: 0px 10px; }
    .hiTit { padding: 15px 0 3px 0; }
    .gisTit { font-size: 20px; line-height: 24px; letter-spacing: 1px; }
    .gisCon { font-size: 16px; line-height: 20px; letter-spacing: 0px; }
    .btnWrap.full { top:30%; left: 0;}
/* -------------------Episode Page-------------------- */
    .epiSidWrap { width: 72%; float: right; margin-right: 4%;  }
    #epiSlider .slick-slide { margin: 0px 10px !important;}
    .slidTemWrap { width: 15%; }
    .temTxtBlock  { width: 100%; }
    .temTit { font-size: 18px; line-height: 22px; font-weight: 500; letter-spacing: 0px; }
    .temGis {  font-size: 14px; line-height: 20px; letter-spacing: 0px; }
    .adPrev { top:25%; left: -5px; }
    .adNext { top:25%; right: -5px; }

}
@media screen and (max-width: 825px) {
    .sTitle { font-size: 20px; }
    .miniSlider {margin: 15px auto 5px auto; }
    .hiTit { padding: 15px 0 3px 0; }
    .gisTit { font-size: 18px; line-height: 22px; letter-spacing: 0px; }
    .gisCon { font-size: 14px; line-height: 18px; letter-spacing: 0px; }

    .vidCardItem{ width: calc(33% - 0.5em); }
    .epiBar { font-size: 13px; letter-spacing: 1px;}
    .epiNum {  font-size: 13px; letter-spacing: 1px;}
    .vidGisBlock { padding: 10px 6%; }
    .gisTitBlock { font-size: 18px; letter-spacing: 1px; line-height: 22px; }
    .gisEpiBlock { padding-top: 5px; font-size: 14px; letter-spacing: 1px; line-height: 18px; }
/* -------------------Episode Page-------------------- */

    .temTit { font-size: 16px; line-height: 20px; letter-spacing: 0px; }
    .temGis {  font-size: 13px; line-height: 18px; letter-spacing: 0px; }
    .adTit { font-size: 16px; line-height: 20px;  letter-spacing: 0px; }
    .adCon { font-size: 12px; line-height: 16px; letter-spacing: 0px; }
}
@media screen and (max-width: 625px) {
    .sldPos { position: relative; margin-bottom: 15px; }
    .posImgWrap { display: none;}
    .slick-prev { left: -15px; }
    .slick-next { right: -15px; }

    .vidCardItem{ width: calc(50% - 0.5em); }
    .vidGisBlock { padding: 8px 6%; }
    .gisTitBlock { font-size: 16px; letter-spacing: 0px; line-height: 20px; }
    .gisEpiBlock { padding-top: 5px; font-size: 12px; letter-spacing: 0px; line-height: 16px; }
    /* -------------------Episode Page-------------------- */
    .mobTitBlock { display: block; }
    .tagWrap {  margin: 15px auto 5px auto; }
    .epiSidWrap { width: 90%; float: none; margin:  0 auto; }
    .slidTemWrap { display: none; }
    .temTit { font-size: 14px; line-height: 18px; letter-spacing: 0px; }
    .temGis {  font-size: 12px; line-height: 16px; letter-spacing: 0px; }
    .conBtn { width: 20px; height: 20px; }
}
@media screen and (max-width: 425px) {
}

.paginWrap { max-width:1170px; margin: -5% auto 0; text-align:center; position:relative;padding-bottom: 5%;}
.pagin { display:inline-block; }
.pagin > a { display:inline-block; }  /*-- added for responsive in paging part --*/
.paginArr { font-size: 32px; margin: 0 10px; color:#8A8F96; }
.paginNum { vertical-align:text-top; letter-spacing: 5px; color:#000000;}
.paginNumCur { vertical-align:text-top; letter-spacing: 5px; color:#ff0000;}
.vBar {margin: 0 5px 0 10px;color: #AFAFAF;}