/* 無障礙 */
.Accessibility{font-family: var(--f-family-02); display: inline-block; font-size: 0.938rem;color: #333;}
.Accessibility:hover{color: var(--c-orange-01);}
.Accessibility-index-C{position: absolute;left: 32px;top: 0;}
.font-0{display: none;font-size: 0;}
.visually-hidden {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;}

/* index-sec1 - 首頁區 ========================================================== */

.index-sec1 {overflow: hidden;position: relative;}

.slider {width: 100%;height: 90%;}

.slider img {width: 100%;height: 100%;object-fit: cover;}

.index-sec1 .button {height: 10%;text-align: center;margin-top: 1rem;z-index: 1;position: relative;}

.index-sec1 .button a {display: inline-block;margin: 0 .2rem;width: 16px;height: 16px;border-radius: 50%;background-color: var(--c-black-01);}

.index-sec1 .button a:hover {background-color: var(--c-orange-01);}

.index-sec1 .button .active {background-color: var(--c-orange-01);}



@media screen and (max-width:768px) {


    .slider img {width: 100%;height: auto;object-fit: cover;}

}

/* 無障礙 A 補正 播放工具 */

/*深色*/
.index-sec1 a:focus,
.index-sec1 button:focus,
.index-sec1 button:hover{ outline-color: #FFFFFF; box-shadow: rgba( 0, 0, 0, 1) 0px 1px 4px, rgb( 0, 0, 0 ) 0px 0px 0px 6px; }

/*淺色元素:focus*/
.index-sec1 .pointbox .point:focus{ outline-color: #000000; box-shadow: rgba( 255, 255, 255, 1) 0px 1px 4px, rgb( 255, 255, 255 ) 0px 0px 0px 7px; }

.index-sec1 button img{ width: 48px; height: 48px; }

.index-sec1 button{ z-index: 1; font-size: 0; background: hsla(0, 0%, 0%, 0.6); border: unset; border-radius: 5px; cursor: pointer; }

.index-sec1 button:focus,
.index-sec1 button:hover{ background: hsla(0, 0%, 0%, 1); }

.index-sec1 [btn-previous],
.index-sec1 [btn-next]{ position: absolute; bottom: calc(10% + -38px); z-index: 2; transform: translateY(-50%); }

.index-sec1 [btn-previous]{ left: calc( 2.5dvw + 100px ); transform: rotate( 180deg ) translateY(50%) }

.index-sec1 [btn-next]{ left: calc( 2.5dvw + 100px + 58px); }

.index-sec1 .banner-tool{ gap: 10px; position: absolute; bottom: calc( 10% + 10px ); right: calc( 2.5dvw + 100px ); transform: translateY( 50% ); display: inline-flex; flex-direction: row; align-items: center; z-index: 1; }

@media screen and (max-width:768px) {
	.index-sec1 button img{ width: 36px; height: 36px; }

	.index-sec1 [btn-previous]{ left: calc( 2.5dvw + 10px ); }

	.index-sec1 [btn-next]{ left: calc(2.5dvw + 10px + 41px); }

	.index-sec1 .banner-tool{ gap: 5px; bottom: calc( 10% + 10px ); right: calc( 2.5dvw + 10px ); transform: translateY( calc( 50% - 10px ) ); }

    .index-sec1 [btn-previous],
    .index-sec1 [btn-next]{
        bottom: calc(10% - 16px);
    }
}


/* index-sec2 - 標圖區 ===========================================================*/

.index-sec2 {padding: 30px 0;height: 300px;position: relative;background-repeat: no-repeat;background-position: center bottom 30px;overflow: hidden;}
.index-sec2 img{position: absolute;object-fit: cover;object-position: center;width: auto;height: 100%;z-index: -1;}


/* .index-sec2::after {content: "";display: block;position: absolute;background-image: url(../images/bg_hand01.jpg);background-repeat: no-repeat;background-position: center bottom;width: 100%;height: 160%;top: 0;left: 0;z-index: -1;transform: translateY(-42%);} */

.index-sec2 .container {height: 100%;display: flex;justify-content: center;align-items: center;}

.index-sec2 h2 {font-family: var(--f-family-01);font-weight: 400;color: var(--c-orange-01);text-align: center;line-height: 2rem;text-shadow: 0 0 10px #b1b1b1;letter-spacing: 3px;font-size: 1.875rem;}

@media screen and (max-width: 1360px) and (min-width: 769px) {

    .index-sec2 h2 {line-height: 3rem;}

    .index-sec2 h2 br {display: inline;}

}

@media screen and (max-width:768px) {

    .index-sec2 {height: 150px;background-size: auto 140% ;background-position: center top;}

    .index-sec2 h2 {font-size: 1.2rem;line-height: 2.2rem;}

    .index-sec2::after {width: 100%;height: 150%;top: 0;left: 0;z-index: -1;transform: translateY(-35%);background-size: 120% auto;}}

/* index-sec3 - 新聞發布 =========================================================*/

.index-sec3 {padding-bottom: 150px;position: relative;}

.index-sec3::after {position: absolute;display: block;content: "";background-image: url(../images/sec4-pc-bg.png);background-repeat: no-repeat;
    background-size: 100%; background-position: left bottom;width: 100%;height: 20vh;left: 0;bottom: 0;transform: translateY(5px);z-index: -1;}

.index-sec3 .container {text-align: center;position: relative;}

.card-area {display: flex;gap: 30px;}

.card {font-family: var(--f-family-01);background-color: #fff;display: flex;flex-direction: column;padding: 1.5rem;
    width: 33%;border-radius: 10px;text-align: left;line-height: 1.8rem;box-shadow: 0 0 10px #dadada;gap: 15px;flex: 0 0 calc(33% - 15px);}

.image {width: 100%;height: auto;background-size: cover;position: relative;background-image: url(../images/Preview.png);overflow: hidden;aspect-ratio: 1200 / 780;}

.card img{width: 100%;height: 100%;aspect-ratio: 1200 / 780; object-fit: cover;object-position: center;flex-shrink: 0;}

/* 隱藏面板 */

.board {display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;left: 0;top: 0;position: absolute;background-color: rgba(255, 255, 255, 0.808);
    opacity: 0;transition: .6s;cursor: pointer;}

.board:hover {opacity: 1;}

.board span {display: inline-block;text-align: center;font-size: 1.2rem;line-height: 2.5rem;
    border-radius: 20px;color: white;width: 150px;background-color: var(--c-orange-01);}

.card .title {color: var(--c-orange-01);font-family: var(--f-family-02);font-size: 1.3rem;font-weight: 600;display: inline;
    /*line-height: 2.2rem;-webkit-line-clamp: 2;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;text-overflow: clip;height: min-content;*/}

.label {font-size: .8rem;line-height: 1.4rem;width: 60px;margin-left: .5rem;border-radius: 10px 0 ;
    transform: translateY(-4px);display: inline-block;text-align: center;color: white;background-color: rgb(237, 116, 89);}

.content {font-size: 1.1rem;line-height: 2rem; -webkit-line-clamp: 3;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;margin-top: auto;}

.data-line {font-family: var(--f-family-01);font-size: 1rem;width: 100%;text-align: right;
    display: flex;justify-content: right;align-items: center;}

.data-line hr {display: none;}

.information-btn {display: inline-block;margin-top: 70px;max-width: 300px;width: 100%;background-color: white;
    color: var(--c-orange-01);border: solid 1px var(--c-orange-01);border-radius: 50px;position: relative;transition: 1s;}

.information-btn:hover {color: white;background: linear-gradient(90deg, rgba(231, 69, 46, 1) 0%, rgba(225, 105, 14, 1) 100%);;border-color: transparent;}

.information-btn span {font-family: var(--f-family-01);font-weight: 800;font-size: 1.4rem;line-height: 70px;}

.information-btn i {position: absolute;right: 10%;top: 50%;transform: translateY(-50%) scaleY(3);line-height: 72px;}

@media screen and (max-width: 1300px) and (min-width: 769px) {

    .card-area {gap: 30px;}

}

@media screen and (max-width: 768px) {

    .index-sec3 {padding-bottom: 100px;}

    .index-sec3::after {background-image: url(../images/sec4-phone-bg.png);height: 100px;}

    .index-sec3 h2{font-size: 1.875rem;}

    .card-area {justify-content: center;flex-wrap: wrap;gap: 0;}

    .card {padding: 0;width: 100%;box-shadow: none;gap: 10px;flex: 0 0 auto;}

    .image {border-radius: 20px 0 50px 0;}

    .title{height: 60px;align-items: center;line-height: 1.8rem;;overflow: hidden;/*display: -webkit-box;-webkit-box-orient: vertical;*/}

    .data-line{margin-bottom: 40px;}

    .data-line hr {display: inline;flex: 1;margin-right: 8px;border: 1px dashed rgb(197, 197, 197);}

    .information-btn {margin-top: 30px;}

    .information-btn span {font-size: 1.25rem;}

}

/* index-sec4 - 活動訊息 =========================================================*/

.index-sec4 {background-color: rgb(255, 246, 235);padding-bottom: 60px;}

.index-sec4 .container {text-align: center;}

@media screen and (max-width: 768px) {

    .index-sec4 h2{font-size: 1.875rem;}

    .index-sec4 .card{background-color: transparent;}

}

/* .index-sec5 area - 關鍵數字 =========================================================*/

.index-sec5 {padding-top: 150px;position: relative;}

.index-sec5::after {-moz-transform: scaleY(-1);-webkit-transform: scaleY(-1);-o-transform: scaleY(-1);transform: scaleY(-1) translateY(5px);position: absolute;
    display: block;content: "";background-image: url(../images/sec4-pc-bg.png);background-repeat: no-repeat;background-size: 100%;
    background-position: left bottom;width: 100%;height: 20vh;left: 0;top: 0;z-index: -1;
}

.index-sec5 .container {gap: 60px;text-align: center;height: 100%;position: relative;display: flex;flex-direction: column;align-items: center;}
.index-sec5 h2 {line-height: 3rem;}

/* .bg-area {background-image: url(../images/bg_heart.svg);background-repeat: no-repeat;padding-top: 50%;background-repeat: no-repeat;
    background-position: center;background-size: 100% auto;width: 90%;height: 100%;position: absolute;top: 60px;z-index: -1;} */

.bg-area {position: relative;}
.bg-area img{display: block;width: 100%;height: auto;}
.bg-area .bg-pc{display: block;}
.bg-area .bg-ph{display: none;}

.bg-area .nb-box p {font-family: var(--f-family-02);font-size: 1.4rem;white-space: nowrap;}
.bg-area .nb-box span{font-size: 1.4rem;}
.bg-area .nb-box span:last-child{font-size: 1rem;}
.bg-area .nb-box .title{height: auto;}
/* .nb-box{width: max-content;} */

.bg-area .nb-box:nth-of-type(1) {color: white;}
.bg-area .nb-box:nth-of-type(1) .title{position: absolute;top: 33%;left: 11.5%;transform: translate(-50%, -50%);}
.bg-area .nb-box:nth-of-type(1) .text{position: absolute;top: 40.5%;left: 11.5%;transform: translate(-50%, -50%);}

.bg-area .nb-box:nth-of-type(2) {color: rgb(237, 116, 89);;}
.bg-area .nb-box:nth-of-type(2) .title{position: absolute;top: 15%;left: 36%;transform: translate(-50%, -50%);}
.bg-area .nb-box:nth-of-type(2) .text{position: absolute;top: 22.6%;left: 36%;transform: translate(-50%, -50%);}

.bg-area .nb-box:nth-of-type(3) {color: white;}
.bg-area .nb-box:nth-of-type(3) .title{position: absolute;top: 33%;left: 63.5%;transform: translate(-50%, -50%);}
.bg-area .nb-box:nth-of-type(3) .text{position: absolute;top: 40.5%;left: 63.5%;transform: translate(-50%, -50%);}

.bg-area .nb-box:nth-of-type(4) {color: rgb(237, 116, 89);;}
.bg-area .nb-box:nth-of-type(4) .title{position: absolute;top: 15%;left: 88%;transform: translate(-50%, -50%);}
.bg-area .nb-box:nth-of-type(4) .text{position: absolute;top: 22.6%;left: 88%;transform: translate(-50%, -50%);}

@media screen and (max-width: 1360px) and (min-width: 769px) {

    .index-sec5 {height: auto;}

    .index-sec5 .container {gap: 0;}

    .index-sec5 h2{margin-bottom: 30px;}

    /* .bg-area {background-image: url(../images/bg-phone-bg.png);background-repeat: no-repeat;background-size: cover;top:0;
        padding: 0;position: relative;width: 100%;background-position: center top;} */

    .bg-area .bg-pc{display: none;}
    .bg-area .bg-ph{display: block;}

    .nb-box{width: 100%;}
    .nb-box p{font-size: 1.5rem;}
    .nb-box span{font-size: 3rem;font-weight: 600;}
    .nb-box span:last-child {font-size: 1.2rem;}

    .bg-area .nb-box:nth-of-type(1) {color: rgb(237, 116, 89);position: absolute;top: 10%;}
    .bg-area .nb-box:nth-of-type(1) .title{position: static;transform: none;}
    .bg-area .nb-box:nth-of-type(1) .text{position: static;transform: none;}
    
    .bg-area .nb-box:nth-of-type(2) {color: rgb(237, 116, 89);position: absolute;top: 30%;}
    .bg-area .nb-box:nth-of-type(2) .title{position: static;transform: none;}
    .bg-area .nb-box:nth-of-type(2) .text{position: static;transform: none;}
    
    .bg-area .nb-box:nth-of-type(3) {color: rgb(237, 116, 89);position: absolute;top: 50%;}
    .bg-area .nb-box:nth-of-type(3) .title{position: static;transform: none;}
    .bg-area .nb-box:nth-of-type(3) .text{position: static;transform: none;}
    
    .bg-area .nb-box:nth-of-type(4) {color: rgb(237, 116, 89);position: absolute;top: 70%;}
    .bg-area .nb-box:nth-of-type(4) .title{position: static;transform: none;}
    .bg-area .nb-box:nth-of-type(4) .text{position: static;transform: none;}
}


@media screen and (max-width: 768px) {

    .index-sec5 {height: auto;padding-top: 100px;}
    
    .index-sec5::after {background-image: url(../images/sec4-phone-bg.png);height: 100px;}

    .index-sec5 .container {padding: 0;gap: 0;}

    .index-sec5 h2{font-size: 1.875rem;}

    /* .bg-area {background-image: url(../images/bg-phone-bg.png);background-repeat: no-repeat;
        top:0;padding: 0;position: static;background-position: center bottom 40%;width: 100%;} */

    .bg-area .bg-pc{display: none;}
    .bg-area .bg-ph{display: block;}

    .bg-area .nb-box p {font-size: 1.2rem;white-space: nowrap;}
    .bg-area .nb-box span{font-size: 1.2rem;}
    .bg-area .nb-box span:last-child{font-size: 1rem;}

    .nb-box{width: 100%;}
    .nb-box p{font-size: 1.5rem;}
    .nb-box span{font-size: 3rem;font-weight: 600;}
    .nb-box span:last-child {font-size: 1.2rem;}

    .bg-area .nb-box:nth-of-type(1) {color: rgb(237, 116, 89);position: absolute;top: 10%;}
    .bg-area .nb-box:nth-of-type(1) .title{position: static;transform: none;}
    .bg-area .nb-box:nth-of-type(1) .text{position: static;transform: none;}
    
    .bg-area .nb-box:nth-of-type(2) {color: rgb(237, 116, 89);position: absolute;top: 30%;}
    .bg-area .nb-box:nth-of-type(2) .title{position: static;transform: none;}
    .bg-area .nb-box:nth-of-type(2) .text{position: static;transform: none;}
    
    .bg-area .nb-box:nth-of-type(3) {color: rgb(237, 116, 89);position: absolute;top: 50%;}
    .bg-area .nb-box:nth-of-type(3) .title{position: static;transform: none;}
    .bg-area .nb-box:nth-of-type(3) .text{position: static;transform: none;}
    
    .bg-area .nb-box:nth-of-type(4) {color: rgb(237, 116, 89);position: absolute;top: 70%;}
    .bg-area .nb-box:nth-of-type(4) .title{position: static;transform: none;}
    .bg-area .nb-box:nth-of-type(4) .text{position: static;transform: none;}
    
}

/* index-sec6 - 編輯嚴選 =========================================================*/

.index-sec6 {margin-bottom: 200px;}

.index-sec6 .container {text-align: center;}

.index-sec6 .title {margin-bottom: 2rem;}

.sticker {text-align: center;line-height: 3rem;font-size: 1.5rem;z-index: 1;}

.more-btn {font-family: var(--f-family-02);font-weight: 600;font-size: 1rem;color: #333;display: inline-block;border: 1px solid #333;
    border-radius: 50px;text-align: center;width: 120px;line-height: 2.2rem;margin-top: auto;}

.more-btn:hover {color: white;background-color: #333;}

.more-btn span {display: none;}

@media screen and (max-width: 768px) {

    .index-sec6 {margin-bottom: 180px;}

    .index-sec6 h2{font-size: 1.875rem;}

    .index-sec6 h4{padding: 0 15px;order: 3;}

    .index-sec6 .card-area {gap: 80px;}

    .index-sec6 .card {position: relative;background-color: #FFECD1;border-radius: 50px 0 50px 0;gap: 0;}

    .index-sec6 .card .image {border-radius: 50px 0 0 0;order: 1;}

    .sticker {display: inline-block;padding: 0 30px;position: relative;width: min-content;white-space: nowrap;;transform: translate(-10px, -25px);font-size: 1.2rem;color: white;background-color: var(--c-orange-01);border-radius: 0 40px 40px 0;order: 2;}

    .sticker::after {display: block;content: "";left: 0;bottom: 0;width: 0;height: 0;transform: translate(-30px, 10px);border-color: #333 #333 transparent transparent;border-style: solid;
        border-width: 5px;}

    .index-sec6 .title {font-size: 1rem;color: #333;}

    .more-btn {font-size: 1rem;color: var(--c-orange-01);background-color: white;border: 2px dashed var(--c-orange-01);
        border-radius: 50px;text-align: center;width: 200px;padding: 5px 0;margin: 0 auto;transform: translateY(50%);order: 4;}

    .more-btn span {display: inline;}

    .more-btn:hover {color: white;background-color: var(--c-orange-01);}

}

/* index-sec7- 年度議題 =========================================================*/


.index-sec7 {margin-bottom: 150px;position: relative;}

.index-sec7::after {display: block;content: "";position: absolute;right: 0;top: 0;background-image: url(../images/bg_hand02.png);background-repeat: no-repeat;
    background-position: right top;width: 100%;height: 100%;z-index: -1;transform: translateY(-45%);}

.index-sec7 .container {text-align: center;}

/* .index-sec7 .card-area{gap:25px} */

.index-sec7 .card {box-shadow: none;padding: 0;}


@media screen and (max-width: 768px) {

    .index-sec7 {margin-bottom: 80px;}

    .index-sec7::after {transform: translateY(-12%);background-size: 90%;}

    .index-sec7 .card-area{gap:30px}

    .index-sec7 .image {border-radius: 0;}

}