.banner{ padding-bottom: 50px; padding-top: 230px; }
.banner .bannerRange{ position: relative; }
.banner .bannerRange .btnBlock{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; max-width: 1144px; width: 74%; pointer-events: none; }
.banner .bannerRange .btnArrow{ position: absolute; top: 50%; font-size: 0; width: 59px; z-index: 5; width: 5%; max-width: 59px; pointer-events: auto; }
.banner .bannerRange .btnArrow.left{ transform: translate(0, -50%); left: 20px;}
.banner .bannerRange .btnArrow.left:after{ content: ""; display: block; width: 100%; padding-bottom: 135.59%; background-image: url(../images/index/banner_arrow_left.png); background-position: center; background-repeat: no-repeat; background-size: cover; }
.banner .bannerRange .btnArrow.right{ transform: translate(0, -50%); right: 20px;}
.banner .bannerRange .btnArrow.right:after{ content: ""; display: block; width: 100%; padding-bottom: 135.59%; background-image: url(../images/index/banner_arrow_right.png); background-position: center; background-repeat: no-repeat; background-size: cover; }
.banner .bannerImgBox{ display: flex; justify-content: center; }
.banner .bannerImgBox .imgs{ display: block; max-width: 1144px; width: 74%; border-radius: 30px; overflow: hidden; position: relative; font-size: 0; }
.banner .bannerImgBox .imgs.hide:before{ content: ""; display: block; position: absolute; z-index: 2; width: 100%; height: 100%; top: 0; left: 0; bottom: 0; right: 0; margin: auto; box-shadow: rgba(144, 172, 80, 0.4) 3px 3px 15px 13px inset; }
.banner .bannerImgBox .imgs.hide .img{ opacity: 0.2; }
.banner .bannerImgBox .imgs .img{ width: 100%;  background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; z-index: 1; }
.banner .bannerImgBox .imgs .img:after{ content: ""; display: block; width: 100%; padding-bottom: 50%; }

.banner .pointBox{ padding: 10px 0 0 0; display: flex; grid-gap:15px; justify-content: center; }
.banner .pointBox .points{ font-size: 0; width: 28px; height: 16px; border-radius: 50px; background-color: #dcdcdc; cursor: pointer; transition: width 0.2s; }
.banner .pointBox .points.hold{ width: 70px; background-color: #ff9048; }
.banner .pointBox .points:focus,.banner .pointBox .points:hover{ background-color: #ff9048; }


section{ padding: 0 20px; }
section.pad70{ padding-left: 70px; padding-right: 70px; }
section.ad{ padding-top: 150px; padding-bottom: 120px; }
section.twoBg{ background-color: #fff8f0; padding-top: 40px; padding-bottom: 40px; position: relative; }
section.twoBg:before{ content: ""; display: block; width: 8%; aspect-ratio: 1 / 2; background-image: url(../images/index/bg_triangle_left.png); background-position: center; background-repeat: no-repeat; background-size: cover; position: absolute; left: 0; top: 0; transform: translateY(-50%); }
section.twoBg:after{ content: ""; display: block; width: 8%; aspect-ratio: 1 / 2; background-image: url(../images/index/bg_triangle_right.png); background-position: center; background-repeat: no-repeat; background-size: cover; position: absolute; right: 0; bottom: 0; transform: translateY(50%); }
section.tcml{ background-image: url(../images/index/tcml_bg.png); background-repeat: no-repeat; background-position: center top 90px; padding-bottom: 110px; position: relative; }

.centerBlock{ max-width: 1200px; margin: auto; padding: 0 30px; }
.centerBlock.spacing{ margin-bottom: 150px; }
.centerBlock.spacing_70{ margin-bottom: 70px; }

.h2Title{ margin-bottom: 30px; text-align: center; }
.h2Title .ch{ font-size: 1.875rem; color: #000; font-weight: bold; }
.h2Title .en{ font-size: 1.5rem; color: #636363; }

/*news*/
.indexNewsBox .newsList{ display: block; margin-bottom: 20px; }
.indexNewsBox .newsList:last-child{ margin-bottom: 0; }
.indexNewsBox .newsList .newsImg{ display: none; }
.indexNewsBox .newsList .contentData .flexBox{ display: grid; grid-template-columns: 70px 1fr; grid-gap:20px; }
.indexNewsBox .newsList .contentData .flexBox .flexSort .sort{ width: 100%; line-height: 30px; background-color: #ccc; color: #fff; text-align: center; font-size: 1rem; font-weight: bold; border-radius: 10px; }
.indexNewsBox .newsList .contentData .flexBox .flexSort .sort.orange{ background-color: #ff9048; }
.indexNewsBox .newsList .contentData .flexBox .flexSort .sort.green{ background-color: #90ac50; }
.indexNewsBox .newsList .contentData .flexBox .flexSort .sort.blue{ background-color: #4889ff; }
.indexNewsBox .newsList .contentData .flexBox .flexSort .sort.red{ background-color: #f6687c; }
.indexNewsBox .newsList .contentData .flexBox .flexSort .sort.greenLake{ background-color: #009fb7; }
.indexNewsBox .newsList .contentData .flexBox .listLine{ display: grid; grid-gap:20px; grid-template-columns: 110px 1fr; border-bottom: 1px solid #009fb7; padding-bottom: 5px; }
.indexNewsBox .newsList .contentData .flexBox .listLine .date{ color: #009fb7; font-size: 1.25rem; font-weight: bold; }
.indexNewsBox .newsList .contentData .flexBox .listLine .h2{ display: grid; width: 100%; }
.indexNewsBox .newsList .contentData .flexBox .listLine .h2 .txt{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #000; font-size: 1.25rem; line-height: 1.6; }

/*TCML*/
.indexTCML .logo{ display: flex; justify-content: center; align-items: center; grid-gap:0 35px; }
.indexTCML .flexBox{ display: flex; margin-left: -40px; margin-top: 120px; }
.indexTCML .flexBox .grids{ width: 33.33334%; padding-left: 40px; }
.indexTCML .flexBox .grids:nth-child(2){ transform: translateY(-80px); }
.indexTCML .flexBox .grids .gs{ position: relative; width: 100%; display:block;  }
.indexTCML .flexBox .grids .gs:after{ content: ""; position: absolute; z-index: 3; bottom: -25px; left: 0; right: 0; margin: auto; display: block; width: 29px; height: 25px; background-image: url(../images/index/tcml_arrow.png); background-position: center top; background-repeat: no-repeat; background-size: 100%; }
.indexTCML .flexBox .grids .gs .bgs{ position: relative; z-index: 2; background-color: #fff; border-radius: 10px; box-shadow: 0 0 10px 4px rgba(0,0,0,0.1); padding: 15px 20px; display: flex; }
.indexTCML .flexBox .grids .gs .bgs .imgs{ max-width: 117px; width: 38%; }
.indexTCML .flexBox .grids .gs .bgs .imgs .img{ width: 100%; position: relative; overflow: hidden; border-radius: 100%; }
.indexTCML .flexBox .grids .gs .bgs .imgs .img img{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; }
.indexTCML .flexBox .grids .gs .bgs .imgs .img:after{ content: ""; display: block; width: 100%; padding-bottom: 100%; }
.indexTCML .flexBox .grids .gs .bgs .imgs .img .icon{ position: absolute; z-index: 2; bottom: -2px; left: 0; right: 0; margin: auto; max-width:36px; width: 30.76%; }
.indexTCML .flexBox .grids .gs .bgs .imgs .img .icon:after{ content: ""; display: block; width: 100%; padding-bottom: 136.11%; background-image: url(../images/index/tcml_icon.png); background-position: center; background-size: cover; background-repeat: no-repeat; }
.indexTCML .flexBox .grids .gs .bgs .imgs .country{ padding: 2px 0 0 0; font-weight: bold; font-size: 1rem; color: #009fb7; text-align: center; }
.indexTCML .flexBox .grids .gs .bgs .textbox{ flex:1; padding: 0 0 0 20px; }
.indexTCML .flexBox .grids .gs .bgs .textbox .en{ font-size: 1.125rem; line-height: 1.6; color: #636363; font-weight: bold; }
.indexTCML .flexBox .grids .gs .bgs .textbox .ch{ font-size: 1.125rem; line-height: 1.6; color: #000; font-weight: bold; }

.tcml_live{ width: 12%; max-width: 230px; z-index: 5; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); }

/*相關連結*/
.aboutLink{ background-color: #e6e6ea; padding: 30px 70px; }
.aboutLink .centerBlock{ max-width: 1550px; position: relative; }
.aboutLink .arrowBtn{ position: absolute; top: 50%; transform: translateY(-50%); font-size: 0; }
.aboutLink .arrowBtn.left{ left: -20px; }
.aboutLink .arrowBtn.left:after{ content: ""; display: block; border-style: solid; border-width: 14px 24px 14px 0; border-color:transparent #009fb7 transparent transparent; }
.aboutLink .arrowBtn.right{ right: -20px; }
.aboutLink .arrowBtn.right:after{ content: ""; display: block; border-style: solid; border-width: 14px 0 14px 24px; border-color:transparent transparent transparent #009fb7; }
.aboutLink .flexBox{ display: flex; margin-left: -30px; }
.aboutLink .flexBox .grids{ padding: 0 0 0 30px; width: 25%; }
.aboutLink .flexBox .grids .gs{ display: block; width: 100%; position: relative; overflow: hidden; border-radius: 15px; }
.aboutLink .flexBox .grids .gs:after{ content: ""; display: block; width: 100%; padding-bottom: 34.355%; }
.aboutLink .flexBox .grids .gs img{ position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; z-index: 1; }


/*看更多*/
.moreBlock{ display: flex; padding-top: 20px; justify-content: end; }
.moreBlock .moreBtn{ display: block; border-radius: 50px; border: 1px solid #009fb7; width: 160px; line-height: 38px; text-align: center; color: #009fb7; font-size: 1.25rem; font-weight: bold; }

.moreBlock.center{ justify-content:center; padding-top:35px; }
.moreBlock.center .moreBtn{ background-color: #009fb7; color: #fff; }
.moreBlock.pt80{ padding-top: 80px; }


/***************************************** Hover *****************************************/
@media screen and (min-width:1281px) {
    /*news*/
    .indexNewsBox .newsList:hover .contentData .flexBox .listLine .h2 .txt{ color: #009fb7; }
    .moreBlock .moreBtn:hover{ background-color: #009fb7; color: #fff; }
}

/***************************************** 平板 *****************************************/
@media screen and (min-width: 768px) and (max-width:1280px) {
    

    /*TCML*/
    .indexTCML .flexBox{ margin-left: -20px; }
    .indexTCML .flexBox .grids{ padding-left: 20px; }
    .indexTCML .flexBox .grids .gs .bgs .textbox .en{ line-height: 1.5; font-size: 1rem; }
    .indexTCML .flexBox .grids .gs .bgs .textbox .ch{ line-height: 1.5; font-size: 1rem; }
    .tcml_live{ transform: translateY(100%); }

    /*相關連結*/
    .aboutLink .flexBox{ margin-left: -20px; }
    .aboutLink .flexBox .grids{ padding: 0 0 0 20px; }
    .aboutLink .flexBox .grids .gs{ border-radius: 10px; }
    .aboutLink .arrowBtn.left:after{ border-width: 10px 18px 10px 0; }
    .aboutLink .arrowBtn.right:after{ border-width: 10px 0 10px 18px; }
}


/***************************************** 手機版 *****************************************/
@media screen and (max-width:767px) {
    .banner{ padding: 70px 10px 30px 10px; }
    .banner .bannerImgBox .imgs{ width: 100%; }
    .banner .pointBox{ grid-gap: 10px; }
    .banner .pointBox .points{ height: 10px; width: 20px; }
    .banner .pointBox .points.hold{ width: 45px; }
    .banner .bannerRange .btnBlock{ display: none; }
    
    
    section{ padding:0 10px; }
    section.pad70{ padding-left: 10px; padding-right: 10px; }
    section.ad{ padding-top: 15px; padding-bottom: 25px; }
    section.twoBg:before{ display: none; }
    section.twoBg:after{ display: none; }
    section.tcml{ padding-top: 30px; padding-bottom: 50px; background-position: center top -2%; }
    section.tcml:after{ content: ""; position: absolute; left: 0; bottom: 0; display: block; width: 100%; padding-bottom: 10%;  background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 100%); 
    }

    /* 園地 / 周刊 Mobile 圖片 Cover */
    section.twoBg .flexBox .grids .gs .imgs{ background-size: cover; }

    .centerBlock{ padding: 0; }
    .centerBlock.spacing{ margin-bottom: 40px; }
    .centerBlock.spacing_70{ margin-bottom: 40px; }

    .h2Title{ margin-bottom: 15px; }
    .h2Title .ch{ font-size: 1.375rem; }
    .h2Title .en{ font-size: 1rem; }
    /*news*/
    .indexNewsBox .newsList{ display:none; grid-template-columns: 74px 1fr; grid-gap:10px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #009fb7; }
    .indexNewsBox .newsList:nth-child(-n+3){ display: grid; }
    .indexNewsBox .newsList .newsImg{ display: block; }
    .indexNewsBox .newsList .newsImg .img{ position: relative; width: 100%; padding-bottom: 76.19%; background-position: center; background-repeat: no-repeat; background-size: cover; }
    .indexNewsBox .newsList .contentData .flexBox{ display: block; position: relative; }
    .indexNewsBox .newsList .contentData .flexBox .flexSort{ width: 50px; }
    .indexNewsBox .newsList .contentData .flexBox .flexSort .sort{ font-size: 0.875rem; border-radius: 5px; line-height: 24px; }
    .indexNewsBox .newsList .contentData .flexBox .listLine{ display: block; border-bottom: none; padding-bottom: 0; }
    .indexNewsBox .newsList .contentData .flexBox .listLine .date{ font-size: 1rem; position: absolute; top: 2px; left: 60px; }
    .indexNewsBox .newsList .contentData .flexBox .listLine .h2{ padding: 5px 0 0 0; }
    .indexNewsBox .newsList .contentData .flexBox .listLine .h2 .txt{ font-size: 1rem; overflow:initial; text-overflow:initial; white-space:initial; }

    /*TCML*/
    .indexTCML .logo .en{ display: none; }
    .indexTCML .logo .ch{ text-align: center; }
    .indexTCML .logo .ch img{ width: 56.8%; }
    .indexTCML .flexBox{ display: none; }
    .tcml_live{ display: none; }

    /*相關連結*/
    .aboutLink{ padding: 15px 40px; }
    .aboutLink .flexBox{ margin-left: -10px; }
    .aboutLink .flexBox .grids{ width: 50%; padding: 0 0 0 10px; }
    .aboutLink .flexBox .grids .gs{ border-radius: 5px; }
    .aboutLink .arrowBtn.left{ left: -28px; }
    .aboutLink .arrowBtn.left:after{ border-width: 7px 12px 7px 0; }
    .aboutLink .arrowBtn.right{ right: -28px; }
    .aboutLink .arrowBtn.right:after{ border-width: 7px 0 7px 12px; }

    /*看更多*/
    .moreBlock{ justify-content: center; padding-top: 10px; }
    .moreBlock.center{ padding-top: 20px; }
    .moreBlock .moreBtn{ font-size: 1rem; line-height: 30px; border-radius: 10px; width: 100px; }


}


/* 首頁 效果補正 */
.banner .bannerImgBox .imgs.hide .img{ transition: opacity 0.5s; }

.banner .bannerImgBox.slick-initialized{ overflow: hidden; display: block; }
.banner .bannerImgBox.slick-initialized .imgsWrapper .imgs{ width: 100%; max-width: unset; }

.indexAdBox .flexBox.slick-initialized{ display: block; margin: -30px -13px -5px; padding: 15px 0 0px; }
.indexAdBox .flexBox.slick-initialized .gridsWrapper{}
.indexAdBox .flexBox.slick-initialized .gridsWrapper .grids{ padding: 20px 15px; width: 100%; }

.indexEbookBox .flexBox.video.slick-initialized{ display: block; justify-content: center; }
.indexEbookBox .flexBox.video.slick-initialized .slick-list{ padding: 10px; }
.indexEbookBox .flexBox.video.slick-initialized .slick-list .gridsWrapper{ }
.indexEbookBox .flexBox.video.slick-initialized .slick-list .gridsWrapper .grids{ transition: opacity 0.5s; opacity: 0.2; width: 100%; padding: 10px; }
.indexEbookBox .flexBox.video.slick-initialized .slick-list .gridsWrapper.slick-active .grids{ opacity: 1; }


@media screen and ( min-width: 1280px ) {
    .indexEbookBox .flexBox.four.slick-initialized{ margin: -20px -28px; }
    .indexEbookBox .flexBox.four.slick-initialized .slick-list .gridsWrapper .grids{ padding: 10px 18px; }
    .indexEbookBox .flexBox.four.slick-initialized .grids .likebtn{ right: 28px; bottom: -2px; }
    .indexEbookBox .flexBox.four.slick-initialized .grids .stateDiv{ top: 20px; left: 7px; }
    
    .indexEbookBox .flexBox.video.slick-initialized{ margin: -20px -28px; }
    .indexEbookBox .flexBox.video.slick-initialized .slick-list .gridsWrapper .grids{ padding: 10px 18px; }
    .indexEbookBox .flexBox.video.slick-initialized .grids .likebtn{ right: 28px; bottom: -2px; }
    .indexEbookBox .flexBox.video.slick-initialized .grids .stateDiv{ top: 20px; left: 7px; }
}

@media screen and ( min-width: 768px ) {
    header .ranges .menublock .headerBottom .menus .grids:hover .titles .ch,
	header .ranges .menublock .headerBottom .menus .grids:hover .titles .en{ color:#ff9048;}
	header .ranges .menublock .headerBottom .menus .grids:hover .du,
    header .ranges .menublock .headerBottom .menus .grids.hover .du{ display: block; }
    
    .banner .bannerImgBox.slick-initialized .slick-list{ max-width: calc( 1144px + 40px ); width: calc( 74% + 40px ); margin: auto; overflow: unset; }
    .banner .bannerImgBox.slick-initialized .imgsWrapper{ margin: 0 20px; padding: 3px 0; }

    .indexEbookBox .flexBox.four.slick-initialized{ margin: -20px; justify-content: center; }
    .indexEbookBox .flexBox.four.slick-initialized .slick-list{ padding: 10px; }
    .indexEbookBox .flexBox.four.slick-initialized .slick-list .gridsWrapper{ }
    .indexEbookBox .flexBox.four.slick-initialized .slick-list .gridsWrapper .grids{ transition: opacity 0.5s; opacity: 0.2; width: 100%; padding: 10px; }
    .indexEbookBox .flexBox.four.slick-initialized .slick-list .gridsWrapper.slick-active .grids{ opacity: 1; }
    .indexEbookBox .flexBox.four.slick-initialized .grids .likebtn{ right: 20px; bottom: -2px; }
    
    .indexEbookBox .flexBox.video.slick-initialized{ margin: -20px; }
    .indexEbookBox .flexBox.video.slick-initialized .grids .likebtn{ right: 20px; bottom: -2px; }

    .indexEbookBox .flexBox.slick-initialized .grids .stateDiv{ opacity: 0; top: 20px; left: 0; }
    .indexEbookBox .flexBox.slick-initialized .slick-list .gridsWrapper.slick-active .grids .stateDiv{ opacity: 1; }
}