/* 字體設定 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&display=swap');
/* font-family: "Noto Sans TC", sans-serif; 中文 */
/* font-family: "Roboto", sans-serif; 英文 */
/* font-family: "Noto Sans TC", sans-serif,font-family: "Roboto", sans-serif; 中英文 */

/* 跨區共用設定 ========================================================*/

* {box-sizing: border-box;margin: 0;padding: 0;font-family: var(--f-family-02);}

html {font-size: 19px;}
html.small{font-size: 17px;}
html.big{font-size: 21px;}
body {color: #333;}
.index-sec1 h2,.index-sec2 h2,.index-sec3 h2,.index-sec4 h2,.index-sec5 h2,.index-sec6 h2,.index-sec7 h2 {line-height: 8rem;font-size: 2rem;font-family: var(--f-family-01);}
a {text-decoration: none;}
button{background-color: transparent;border: none;display: block;cursor: pointer;}
.container {max-width: 1500px;margin: 0 auto;padding: 0 20px;}
.divClose {display: none;}

/* focus */
a:focus,input:focus,select:focus,button:focus{outline: 3px solid var(--c-orange-01); outline-offset: 1px; }
footer a:focus{outline: 3px solid #fdff94;}
.sidebar a:focus{outline: 3px solid #fdff94;outline-offset: -3px; }
.Donation-layout a:focus,.choose a:focus,.btn-area a:focus,.title:focus,.item-active:focus,.fancybox-outer a:focus {outline: none;}
.Donation-layout a:focus div{color: var(--c-orange-01);}
@media screen and (max-width:768px) {
    a:focus,input:focus,select:focus,button:focus {outline: none;}
    footer a:focus{outline: none;}
    .sidebar a:focus{outline: none;}
}


/* 設定變數 =========================================================*/

:root {
    --c-orange-01: #ED6C00;
    --c-orange-02: #dc8b49;
    --c-orange-03: #ee791b;
    --c-orange-04: #d5864c;
    --c-orange-05: #FF7D00;
    --c-black-01: #818181;

    --f-family-01: "Noto Sans TC","Noto Sans JP","Noto Sans SC", sans-serif;
    --f-family-02: "Noto Sans TC","Noto Sans JP","Noto Sans SC","Roboto", sans-serif;
}

/* 光箱LightBox ========================================================= */
.lightbox {background: rgba(0,0,0,0.7);position: fixed;top: 0;left: 0;bottom: 0;right: 0;margin: auto;z-index: 200}
.lightbox p,.lightbox a{line-height:1.8; color:#333; padding-bottom:20px;}
.lightbox span{font-size:20px;font-weight: 700;color:#FF1A1A}
.lightbox .prevent{color: #FF1A1A;font-size: 24px;font-weight: 800;text-align: center;margin-bottom: 20px;}
.lightbox .marbox {position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;display: flex;justify-content: center;align-items: center}
.lightbox .w_bg_1 {width: 90%;background: #fff;padding: 30px;max-width: 600px;border-radius: 5px;}
.lightbox .closebox {display: flex;justify-content: end;width: 100%;margin-bottom: 20px;}
.lightbox .closebox .btn {display: inline-block;width: 22px;height: 22px;position: relative;cursor: pointer;box-sizing: content-box;padding: 2px;}
.lightbox .closebox .btn:before {content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;display: block;width: 100%;height: 2px;background: #bfbfbf;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg)}
.lightbox .closebox .btn:after {content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;display: block;width: 100%;height: 2px;background: #bfbfbf;transform: rotate(-45deg);-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg)}
.lightbox .pstxt {margin-bottom: 20px;max-height: 60vh;overflow: auto;text-align: justify;}



/* 側邊欄位 =========================================================*/

.sidebar {position: fixed;right: 0;top: 60%;height: 610px;transform: translateY(-50%);border-radius: 10px 0 0 10px;display: flex;flex-direction: column;z-index: 80;align-items: end;}

.sidebar a:nth-child(1) {border-radius: 10px 0 0 0;}

.sidebar a:last-child {border-radius: 0 0 0 10px;}

.sidebar a {background-color: var(--c-orange-05);display: flex;flex-direction: column;justify-content: center;align-items: center;width: 100px;height: 100px;position: relative;}

.sidebar a:hover {box-sizing: content-box;border-radius: 10px 0 0 10px;padding-left: 20px;background-color: rgb(253, 234, 207);}

.sidebar svg {width: 100%;height: auto;transform: translateY(-8px);}

.sidebar a:hover .icon-1 path {stroke: var(--c-orange-01);}

.sidebar a:hover .icon-2 path {stroke: var(--c-orange-01);}

.sidebar a:hover .icon-2 path:nth-child(1) {fill: var(--c-orange-01);stroke: none;}

.sidebar a:hover .icon-3 path {fill: var(--c-orange-01)}

.sidebar a:hover .icon-4 path {fill: var(--c-orange-01)}

.sidebar .icon-5 circle {stroke: white;}

.sidebar .icon-5 rect {stroke: white;}

.sidebar a:hover .icon-5 path {stroke: var(--c-orange-01);}

.sidebar a:hover .icon-5 circle {stroke: var(--c-orange-01);}

.sidebar a:hover .icon-5 rect {stroke: var(--c-orange-01);}

.sidebar a:hover .icon-6 path {stroke: var(--c-orange-01);}

.sidebar span {position: absolute;bottom: 0px;font-family: var(--f-family-02);font-size: .8rem;font-weight: 600;color: white;white-space: nowrap;line-height: 1.8rem;}

.sidebar a:hover span {color: var(--c-orange-01)}

.sidebar hr {width: 100px;border-color: white;}

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

    .sidebar {position: fixed;flex-direction: row;justify-content:center;border-radius: 0;width: 100%;height: auto;top: auto;bottom: 0;transform: none;/* background-color: white; */}
    .sidebar hr {height: 100px;width: auto;}
    .sidebar a:last-child {border-radius: 0 10px 0 0;}
    .sidebar a:hover {box-sizing: content-box;border-radius: 10px 10px 0 0;padding:10px 0 0 0;background-color: rgb(253, 234, 207);}
    
}
    

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

    .sidebar {position: fixed;flex-direction: row;border-radius: 0;width: 100%;height: auto;top: auto;bottom: 0;transform: none;background-color: white;}

    .sidebar a {flex: 1;width: auto;height: auto;}

    .sidebar a:nth-child(1) {border-radius: 0 0 0 0;}

    .sidebar a:last-child {border-radius: 0 0 0 0;}

    .sidebar a:hover { padding: 0;border-radius: 0 0 0 0;}

    .sidebar span { font-size: .7rem;line-height: 1.3rem;}

    .sidebar hr {height: 100%;width: auto;}

}

/* header area - 導覽列 ========================================================= */

/* 無障礙 */

.font-settings .Accessibility-M{font-size: 15px;border: none;padding: 5px 0;}

.font-settings .Accessibility-M:hover{background-color: white;color: var(--c-orange-01);}

.box .Accessibility-Z {font-size: 15px;border: none;padding: 0 1rem;position: absolute;left: -5px;top: 22px;}

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

    .box .Accessibility-Z {position: absolute;left: -36px;top: 15px;}
}

/* 字體設定=========================================== */

.font-settings{font-family: var(--f-family-01);white-space: nowrap;display: flex;align-items: center;}
.font-settings div{display:flex;align-items: center;}

.font-settings span{line-height: 1rem;padding: 5px;}

.font-settings button{margin:0 3px}
.font-settings a,
.font-settings button{line-height: 1rem;color: #808080;border: 1px solid #808080;padding: 5px;}
/* .font-settings a:nth-of-type(3) {font-size: 11px;}
.font-settings a:nth-of-type(4){font-size: 13px;}
.font-settings a:nth-of-type(5){font-size: 15px;} */
.font-settings a:hover{background-color: var(--c-orange-01);color: white;}
/* .font-settings .font-focus{background-color: var(--c-orange-01);color: white;} */
.small [btn-fontsize="small"]{ background-color: var(--c-orange-01);color: white; }
.small [btn-fontsize="middle"]{ background-color: white;color: #333; }
button[btn-fontsize="middle"]{ background-color: var(--c-orange-01);color: white; }
.middle [btn-fontsize="middle"]{ background-color: var(--c-orange-01);color: white; }
.big [btn-fontsize="big"]{ background-color: var(--c-orange-01);color: white; }
.big [btn-fontsize="middle"]{ background-color: white;color: #333; }

.font-settings .sitemap-link-1{border: none;}
.font-settings .sitemap-link-1:hover{background-color: transparent;color: var(--c-orange-01);}

.small .font-settings [btn-fontsize="small"]{ font-size: 1rem; }
.small .font-settings [btn-fontsize="middle"]{ font-size: 1.142857142857143rem; }
.small .font-settings [btn-fontsize="big"]{ font-size: 1.285714285714286rem; }

.font-settings [btn-fontsize="small"]{ font-size: 0.875rem; }
.font-settings [btn-fontsize="middle"]{ font-size: 1rem; }
.font-settings [btn-fontsize="big"]{ font-size: 1.125rem; }

.big .font-settings [btn-fontsize="small"]{ font-size: 0.7777777777777778rem; }
.big .font-settings [btn-fontsize="middle"]{ font-size: 0.8888888888888889rem; }
.big .font-settings [btn-fontsize="big"]{ font-size: 1rem; }

/* ==================================================== */

/* search */

.search {position: absolute;font-family: var(--f-family-02);display: flex;right: 200px;top: 20px;gap: 15px;background-color: white;font-size: 0.875rem;color: #808080;}
.search .sitemap-link-2{display: none;}
.search .language{display: flex;align-items: center;gap: 10px;}
.search .language div{display:flex;align-items: center;}
.search .language-icon {width: 20px;height: 20px;}

.search div a {padding-left: .4rem;color:#808080}

.search div a:hover {color: var(--c-orange-01);}

.search hr {color: #b0b0b0;height: 20px;transform: translateY(3px);}

.search form {display: flex;align-items: center;border: 1px solid #333333c6;border-radius: 100px;}

.search form input {border: none;border-radius: 100px;padding-left: 20px;height: 40px;width: 200px;font-size: 18px;}

.search form input::placeholder{font-size: 16px;}

.search form input:focus {outline: none;}

.search form button {display: flex;justify-content: center;align-items: center;;height: 100%;border: none;background-color: transparent;cursor: pointer;}

.search form button i {transform: translateY(1px);padding: 0 10px;font-size: 1.5rem;}

header {background-color: white;position: relative;z-index: 90;box-shadow: 0 3px 10px #a8a8a89a;}

header .container {height: 200px; display: flex;align-items: center;max-width: 1600px;position: relative;justify-content: space-between;}

/* logo */

.logo{z-index: 1;}
.logo h1{/* transform: translate(0, .65rem); */font-size: 0;}
header .logo img {width: 100%;height: auto;max-width: 310px;vertical-align: middle;}

/* nav */

nav {margin: 0 40px 0 auto; font-family: var(--f-family-02);display: flex; transform: translate(0, 1.5rem);gap:65px;}

nav button{font-family: var(--f-family-02);}

/* 調li點點====================================================== */

.item {font-family: var(--f-family-02); font-weight: 500; white-space: nowrap;position: relative;text-align: center;display: flex;justify-content: center;}

.item::after {content: "";display: block;position: absolute;left: 0;bottom: -10px;width: 100%;height: 5px;background-color: var(--c-orange-01);transform: scaleX(0);transition: .3s;z-index: -1;}

.item:hover::after {transform: scaleX(1);}

.item .bx{display: none;}

.item a {color: #333;}

/* 電腦版nav面板展開 ---------- */ 

nav button{font-size: 1.1rem;font-weight: 500;color: #333;}

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

    nav::after{content: "";display: block;background-color: white;position: absolute;top: 32px;left: -60px;width: 100%;padding: 0 50px;height: 340px;z-index: -2;box-shadow: 0 5px 5px #a8a8a89a;opacity: 0;pointer-events: none;}

    .item ul{ display: block; opacity: 0; pointer-events: none;box-sizing: content-box;padding-top: 60px ;z-index: -1;height: 300px;}
    
    /* 元素 hover 隔壁 Block */
    nav:hover::after ,nav:hover ul,.item:hover > ul { opacity: 1; pointer-events: auto; }
    
    /* 子層 Focus 父層 Block */
    .item:focus-within ~ .item ul,
    .item a:focus+ul,
    nav:has(a:focus),
    nav:has(button:focus) ul,
    nav:has(a:focus) ul,
    nav:has(a:focus) a{ opacity: 1; pointer-events: auto; }
    nav:has(a:focus)::after,nav:has(button:focus)::after{ opacity: 1; pointer-events: auto; }

}

@media screen and (max-width: 1360px) {
    /* 網站導覽 */
    .font-settings .sitemap-link-1{border: none;}
    .font-settings .sitemap-link-1:hover{background-color: transparent;color: var(--c-orange-01);}
    .search .sitemap-link-2{color: #333;display: block;flex: 1 1 100%;text-align: center;}
}


/* 撐開header區塊 */

nav ul{ display: none; position: absolute; list-style-type:none;}

/* --------------------------- */

nav li{line-height: 2rem;}

.item .item-link{/* font-size: 18px; */font-weight: 400;}

.item .item-link:hover{color: var(--c-orange-01);}

/* donate */

.donate {transform: translateY(-12px);height: 95%;position: relative;}

.donate img {width: 100%;height: auto;max-height: 95%;position: relative;cursor: pointer;}

.donate a:hover{opacity: 0;}

.donate img:nth-child(2) {position: absolute;right: 0;top: 0;z-index: -1;}

/* menu */

header .menu {display: none;}

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

    header{touch-action: none;}
    header .container {height: 100px;justify-content: space-between;padding: 0 .8rem;gap: 0;}
    header.MenuOpen{position:fixed;left:0;right:0}

    /* 字體設定 */

    .font-settings{display: flex;flex-direction: column;gap: 20px;}


    /* js 展開 search */

    .search {display: none;/* display: flex; *//* justify-content: center; */left: 50%;transform: translateX(-50%);top:100px;width: 100%;height: 154px;padding: 0 1rem;gap: 0;z-index: 50;touch-action: none;}

    .search form{width: 100%;}

    .search input{flex: 1;}

    .search hr{transform: translateY(2px);}

    .logo {max-width: 200px;}

    header .logo img {width: 100%;height: auto;padding: 0 10px;}

    /*nav*/

    /* js - menu 展開 nav */
    .MenuOpen .search{display: flex;flex-direction: column;align-items: center;gap: 20px;}

    .MenuOpen nav{display: block;padding-bottom: 20px;}

    .item::after{display: none;}

    .nav-phone {display: none;margin: 0;width: 100%;background-color: white;left: 0;position: absolute;transform: translate(0, 0);z-index: 50;overflow: auto;box-sizing: content-box;top: calc(100px + 154px);box-shadow: 0 10px 5px #a8a8a89a;height: calc(100dvh - 154px - 100px);}
    
    .item-phone {font-family: var(--f-family-02);margin: 0 auto;white-space: nowrap;position: relative;border-bottom: 1px solid rgb(199, 199, 199);display: block;}
    
    .item-phone:nth-last-child(1){border: none;}

    .nav-phone button {display: block;position: relative;width: 100%;line-height: 46px;/* font-size: 20px; */}

    .item-phone .item-active{color: var(--c-orange-01);}

    .item-phone .bx{color: #333;display: inline-block;position: absolute;font-size: 2rem;font-weight: 200;right: 24px;top:50%;transform: translateY(-50%) scale(1.5);}

    .item-phone .active{transform: translateY(-50%) scale(1.5) rotate(180deg);}

    .item-phone ul{display: block;background-color: rgb(229, 229, 229);padding: 1rem 0;position: relative;z-index: 50;}
    
    .item-phone .item-link{font-weight: 400;color: #4d4d4d;line-height: 2.4rem;display: inline-block;width: 100%;}

    /* 行動次選單 */
    /* .item:not(:has( ul )) .bx{ display: none; } */
    
    /* 行動次選單 收合 */
    /* header nav .item.itemOpen ul{ display: block; }
    header nav .item.itemOpen .bx{ transform: translateY(-50%) scale(1.5) rotate(180deg); } */


    .donate {height: 80%;transform: translateY(-16px);order: -1;margin: 0;}

    .donate img {height: 110%;object-fit: contain;width: auto;}

    /* menu */

    header .menu {display: flex;flex-direction: column;gap: 6px;align-items: center;width: 60px;cursor: pointer;padding: 1rem 0;}

    header .menu span {display: block;background-color: var(--c-black-01);width: 25px;height: 2px;border-radius: 3px;}

    .open span:nth-of-type(1){position: absolute; transform: rotate(45deg);}

    .open span:nth-of-type(2){display: none;}

    .open span:nth-of-type(3){position:absolute; transform: rotate(-45deg);}

}

/* footer area - 頁尾區 ==========================================================*/

footer {background-color: var(--c-orange-04);padding-bottom: 30px;position: relative;}

footer .container {display: flex;flex-direction: column;justify-content: center;}

.box-area {display: flex;padding: 1.5rem 0 2rem;}

.box {padding-left: 2.5rem;font-family: var(--f-family-02);color: white;display: flex;flex-direction: column;position: relative;}

.box:nth-child(1) {flex: 2;}

.box:nth-child(2) {flex: 2;}

.box:nth-child(3) {flex: 1;}

.box:nth-child(4) {display: block;flex: 2;flex-direction: row;flex-wrap: wrap;}
.box:nth-child(4) .footer-title{width: 100%;}
.box:nth-child(4) a {display: inline-block;margin: 0 10px 10px 0;height:min-content;line-height: normal;}
.box:nth-child(4) a img{display: inline-block;}


.question-layout{display: flex;flex-direction: column;}

.question-layout hr{display: none;}

.l-icon {margin-right: .5rem;transform: translateY(3px);}

.box .footer-title {line-height: 5rem;font-weight: 600;font-size: 1.5rem;letter-spacing: 1px;}

footer .box p,.box a {line-height: 2.5rem;letter-spacing: 1px;color: white;}

.box .icons {display: flex;flex-wrap: wrap;gap: 15px;}

.box .icons svg {width: 50px;height: 50px;}

.fb:hover circle {fill: white;}

.fb:hover path:nth-child(2) {fill: var(--c-orange-03);}

.fb:hover path:nth-child(3) {fill: white;}

.ig:hover circle {fill: white}

.ig:hover path:nth-child(1) {fill: var(--c-orange-03);}

.ig:hover path:nth-child(2) {fill: white;}

.ig:hover path:nth-child(3) {fill: white;}

.yt:hover circle {fill: white;}

.yt:hover path:nth-child(1) {fill: var(--c-orange-03);}

.yt:hover path:nth-child(2) {fill: white;}

.point:hover circle {fill: white;}

.point:hover path:nth-child(1) {fill: var(--c-orange-03);}

.point:hover path:nth-child(2) {fill: var(--c-orange-03);}

.point:hover path:nth-child(3) {fill: var(--c-orange-03);}

.point:hover path:nth-child(4) {fill: var(--c-orange-03);}

.line:hover circle {fill: white;}

.line:hover path {fill: var(--c-orange-03);}

footer a{color: white;}

.Newsletter {width: 100%;}
footer .box .Newsletter a {padding:5px 15px;text-align: center;display: inline-block;border-radius: 50px;border: 1px solid white;color: white;margin-top: .5rem;}

footer .box .Newsletter a:hover {color: var(--c-orange-01);background-color: white;}

footer hr {margin: 2rem 0;border-color: white;}

.copyright {display: flex;justify-content: center;gap: 3rem;}

.copyright p {color: white;line-height: 5rem;font-family: var(--f-family-02);}

.copyright br{display: none;}

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

    .box-area {flex-direction: row;flex-wrap: wrap;justify-content: space-around;margin: 0 auto;padding-bottom: 0;gap: 30px;}

    .box {width: 45%;}

    .box:nth-child(1) {flex: none;}
    
    .box:nth-child(2) {flex: none;}
    
    .box:nth-child(3) {flex: none;}
    
    .box:nth-child(4) {flex: none;}

    .question-layout{flex-direction: row;flex-wrap: wrap;}

    .question-layout a{display: flex;align-items: center;}

    .question-layout hr{display: inline-block; width: 1px;height: 20px;margin: 0 10px;border: 1px solid white;}

    .copyright {flex-direction: column;margin: 0 auto;gap:0;}

    .copyright p {line-height: 3rem;}

}

@media screen and (max-width: 768px) {
    
    footer {padding-bottom: 70px;}
    
    .box-area {flex-direction: column;flex-wrap: nowrap;justify-content: space-around;margin: 0 auto;padding-bottom: 0;gap: 15px;}

    .box{padding-left: 0;}

    .box p,.box a {font-size: .9rem;line-height: 2.1rem;}

    .box .footer-title{font-size: 1.2rem;line-height: 4rem;}

    .question-layout{flex-direction: row;flex-wrap: wrap;}

    .question-layout a{display: flex;align-items: center;}

    .question-layout hr{display: inline-block; width: 1px;height: 20px;margin: 0 10px;border: 1px solid white;}

    .box .icons {gap: 10px;}

    .Newsletter {}

    footer hr{margin: 2rem 0;}

    .copyright {flex-direction: column;margin: 0 auto;gap:1rem;}

    .copyright p {line-height: 2rem;}

    .copyright br{display: block;}

}