@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/*
@media (min-width: 576px) { }   @media (max-width: 540px) { }
@media (min-width: 768px) { }   @media (max-width: 720px) { }
@media (min-width: 992px) { }   @media (max-width: 960px) { }
@media (min-width: 1200px) { }  @media (max-width: 1140px) { }
@media (min-width: 1400px) { }  @media (max-width: 1320px) { }
*/

/* 取消討厭的 href=# */
a{ cursor:pointer !important; text-decoration:none; }
a.cssinherit { color: inherit !important; font: inherit !important; text-decoration:none; }

:root {
  --maincolor: #289AE4;
  --titlecolor: #252B42;
  --textcolor: #737373;
}

body { font-family: "Inter", serif; 
    font-size:16px; color:var(--textcolor); 
    background-color:#FAFAFA;
}
h1{ font-size: 3.7rem; color:var(--maincolor); font-weight:700; }
h2{ font-size: 3.1rem; color:var(--maincolor); font-weight:700; }
h3{ font-size: 1.8rem; color:var(--maincolor); font-weight:700; }
h4{ font-size: 1.5rem; color:var(--titlecolor); font-weight:700; }

h1.titlec{ color:var(--titlecolor) !important; }
h2.titlec{ color:var(--titlecolor) !important; }
h3.titlec{ color:var(--titlecolor) !important; }

.mt-px100{ margin-top:100px; }
.mb-px100{ margin-top:100px; }

/* 改寫手機memu按鈕 */
.navbar-toggler{ border: 0px; }
.navbar-toggler-icon { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='rgba(33, 37, 41, 0.75)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M4 7h22  M11 15h15  M19 23h7'/></svg>"); }
.navbar-toggler:focus{box-shadow:none; }

#navbarCollapse{ background-color:rgba(255, 255, 255, 1.0); }
#navbarCollapse li{ text-align:center; margin-bottom:2rem; }
@media (min-width: 768px) {
    #navbarCollapse{ background-color:rgba(255, 255, 255, 0.0); }
    #navbarCollapse li{ text-align:left; margin-bottom:0px; }
}

i.ij{ display:inline-block; width: 24px; height: 24px;}
i.ij img{ width: 24px; }

.btn-gotopage{ padding: 1rem 3rem; font-weight: 900; color: var(--maincolor) !important; background-color: #ffffff; text-align:center; display:inline-block; border:1px solid var(--maincolor); border-radius: 2rem; }
.btn-footcontact{ padding:1.2rem 3rem; color:#ffffff; }
.btn-submit{ 
    padding:1.2rem 3rem; color:#ffffff; 
    background-color: var(--maincolor);
    border-color: var(--maincolor);
}
.listimg img{ width:100%; }

header{ position: relative; z-index: 2; height: 104px; background-color:rgba(255, 255, 255, 0.8); }
header .nav-link.active{ font-weight:900; color:var(--maincolor) !important; }
.topbigimg{ position:relative; top:-104px; }
.topbigimg > img{ width:100%; }
.bgw{ padding-top:4rem; background-color:#ffffff; }


footer{ margin-top:3rem; }
.footermargintop{ width: 100%; min-height:320px; background-color:#ffffff; }
.footsponsor{ 
    display: flex;
    flex-direction: column;   /* 每組 sponsor 直向排列 */
    gap: 20px;                /* 組與組之間空隙，可調整 */
}
.footsponsor .sponsorgroup{
    display: flex;
    justify-content: center;  /* 水平置中所有 a */
    align-items: center;      /* a 的高度如不同，也一起垂直置中 */
    flex-wrap: wrap;          /* 超過寬度自動換行 */
    gap: 3rem;                /* 圖與圖之間空隙 */
    margin-bottom: 2rem;
}
.footsponsor .sponsorgroup a{
    display: flex;            /* 為了垂直置中 img */
    align-items: center;      /* 垂直置中圖片 */
    justify-content: center;  /* 若你給 a 固定尺寸時用得上 */
}
.footsponsor .sponsorgroup img {
    max-width: 100%;
    height: auto;
    display: block;
    filter: grayscale(100%) brightness(65%);
}

.foothrblock{ width:100%; height:77px; background-color:var(--titlecolor); }
.footcontactus{}
.footcontactusbg{ width: 100%; height:380px; background-image:url('./../imgs/footerbg.png'); background-position:bottom center; }
.footinfo{ background-color:var(--maincolor); padding:50px 10%; }
.footlogo{ padding-top:1rem; }
.footmails{ color:#ffffff; line-height:2.5rem; }
.footcopy{   padding:20px 16%; }

.pageboxtitle{}
.pageboxtitle h1{ text-align:center; color:var(--titlecolor); }
.pageboxtitle p{ text-align:center;  }

.pageboxcate{ padding: 3rem 1rem; display: flex; justify-content: space-between; flex-wrap: nowrap; }
.pageboxcate a { flex: 0 0 auto; white-space: nowrap; }
.pageboxgallery{ margin-top:200px; }

dl.joinusdl{ padding-left:60px; }
dl.joinusdl dt{ color:var(--titlecolor); position:relative; }
dl.joinusdl dt .dlicon{ position:absolute; left:-60px; }
dl.joinusdl dd{}
.joinusboxscale{ width:70%; margin:auto; }

.aboutusboxscale{ width:70%; margin:auto; }
.aboutintro{ width:100%; padding: 2rem; background-color:#ffffff; }
.aboutintro figure{ text-align:center; }
.aboutintro h4{ text-align:center; margin-bottom:1.6rem; }
.aboutintro p{ text-align:center; }

.memboxlone{ background-color:#ffffff; }
.memboxltxt{ padding:1.8rem; }
.memboxltxt label{ color:##949494; }
.memboxltxt h2{ font-size:1.1rem; font-weight: 900; color:var(--titlecolor); margin-bottom:1rem;  }
.memboxltxt p{ margin:0px; }
.memboxlone figure img{ width:100%; }
.memboxscale{ width:70%; margin:auto; }

.newsboxlone{ background-color:#ffffff; }
.newsboxltxt{ padding:1.8rem; }
.newsboxltxt h2{ font-size:1.1rem; font-weight: 900; color:var(--titlecolor); margin-bottom:1rem;  }
.newsboxltxt p{ height:5rem; overflow:hidden; margin:0px; }
.newsboxlone figure img{ width:100%; }
.newsboxscale{ width:70%; margin:auto; }

.gayboxfull{ padding: 3rem 0px; background-color:#ffffff; }
.galleryboxlone{ background-color:#ffffff; padding-top:30px; }
.galleryboxltxt{ padding:1.8rem; }
.galleryboxltxt h2{ font-size:1.1rem; font-weight: 900; color:var(--titlecolor); margin-bottom:1rem;  }
.galleryboxltxt p{ height:5rem; overflow:hidden; margin:0px; }
.galleryboxlone figure { width:80%; margin:auto; }
.galleryboxlone figure img{ width:100%; }
.galleryboxscale{ width:70%; margin:auto; }
.galleryboxbpics{ display:none; }

.dwfboxlist{  }
.dwfboxscale{ width:74%; margin:auto; }
.dwfboxone{
    background-color: #ffffff;
    box-shadow: 0 5px 5px rgba(0,0,0,0.3);
    border: 1px solid #ffffff;
    border-radius: 8px;
    margin-bottom: 2rem;
}

.ctiboxfull{ padding: 3rem 0px; background-color:#ffffff; }
.ctiboxscale{ width:90%; margin:auto; }
@media (min-width: 576px) { .ctiboxscale{ width:80%; margin:auto; } }
@media (min-width: 768px) { .ctiboxscale{ width:70%; margin:auto; } }
@media (min-width: 992px) { .ctiboxscale{ width:60%; margin:auto; } }
@media (min-width: 1200px) { .ctiboxscale{ width:50%; margin:auto; } }
@media (min-width: 1400px) { }

/* 月曆 */
.calboxfull{ padding: 3rem 0px; background-color:#ffffff; }
.calendar{ width:100%; }
.calendarM{ width:100%; border:0px solid #DEE2E6; border-left-width:1px; border-top-width:1px;}
.calendarT{ font-size:3rem; color:var(--titlecolor); }
.calendarW{ font-weight: 700; color: var(--maincolor); width:14.26%; float:left; height:2.2rem; text-align: center; padding: 0.2rem 0.2rem; border:0px solid #E5E5E5; border-right-width:1px; border-bottom-width:1px; }
.calendarD{ cursor: pointer; width:14.26%; float:left; min-height:8rem; padding: 0.2rem 0.2rem; position:relative; border:0px solid #DEE2E6; border-right-width:1px; border-bottom-width:1px; }
.calendarD.calendarToday{ background-color:#FFFADF !important; }
.calendarDnum{ font-weight: 700; color: var(--maincolor); display: block; text-align:right; }
.calendarBtn{ width: 99%; background-color:#3788D8; color:#ffffff; }
.confirmaddcal{  }
.confirmaddcal h1{ font-size:1.2rem; color:var(--titlecolor); }
.confirmaddcal time{ display:block; }

input[type="text"].form-control{ border-color:var(--maincolor); }
textarea.form-control{ border-color:var(--maincolor); }