@charset "utf-8";
/*Background_setting*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@200..900&display=swap');
*{ margin:0; padding:0; line-height:160%; font-family:"Noto Serif TC", serif; font-size:16px; font-weight:500; box-sizing:border-box; scroll-behavior: smooth; }
*:focus { outline: none;}
::selection{ background-color:#25a2a2; color:#fff;}
a{ text-decoration:none;}
img{max-width:100%}
font{ color:inherit; font:inherit;}
strong{ font-weight:bold;}

.ProtectedArea{ width:100%; max-width:1600px; margin:auto; padding:0 50px;}
.ProtectedArea.ListWidth{ max-width:1400px;}
.Wrapper{ padding:135px 0 0 0;}
.AP{ scroll-margin-top:170px;}

/*Header*/
header{ transition: background 0.3s; display:flex; align-items:center; justify-content:space-between; padding:0 50px; background-color:#fff; position:fixed; top:0; left:0; right:0; gap:10px; z-index:10;}
header .Logo{ width:235px; padding:15px 0; font-size:0;}
header .MobileBtn{ display:none;}
header .FunctionBox{ display:flex; align-items:center; gap:30px;}
header .MenuBox{ display:flex;}
header .MenuBox .Item{ font-size:1.125rem; color:#333; font-weight:600; display:block; padding:38px 20px; position:relative;}
header .MenuBox .Item::after{ content:""; display:block; position:absolute; left:50%; right:50%; bottom:-1px; background-color:#25a2a2; height:3px; transition:.2s;}
header .Community{ display:flex; align-items:center; background-color:#f3f3f3; border-radius:50px; padding:5px 20px; flex-shrink:0;}
header .Community .Item{ padding:10px; display:block; flex-shrink:0; font-size:0;}
header .Community .Item img{ width:20px;}
header .MenuBox .Item:hover{ color:#25a2a2;}
header .MenuBox .Item:hover::after{ left:0; right:0; transition:.2s;}
header .Community .Item:hover img{ transform: scale(1.2);}

header.open,
header.shadow{ background-color: #ffffff; }

main{ background-color:#f5f5f5;}

/*Footer*/
footer{ background-color:#fff;}
footer .Info{ width:100%; display:flex; align-items:flex-end; justify-content:space-between; padding:30px 50px;}
footer .Info .LeftArea .Logo{ display:block;}
footer .Info .LeftArea .Logo img{ width:235px;}
footer .Info .LeftArea .Copyright{ font-size:0.875rem; color:#333; font-weight:600;}
footer .Info .LeftArea .Copyright a{ font:inherit; color:inherit;}
footer .Info .RightArea{ display:flex; flex-direction: column; align-items: flex-end; gap:30px;}
footer .Info .RightArea .MenuBox{ display:flex; gap:40px;}
footer .Info .RightArea .MenuBox .Item{ font-size:1.125rem; color:#333; font-weight:600;}
footer .Info .RightArea .Community{ display:flex; align-items:center; background-color:#f3f3f3; border-radius:50px; padding:5px 20px;}
footer .Info .RightArea .Community .Item{ padding:10px; display:block; flex-shrink:0; font-size:0;}
footer .Info .RightArea .Community .Item img{ width:20px;}
footer .Organizer{ border-top:1px solid #ccc; padding:40px 50px; display:flex; align-items: center; justify-content: center; gap:40px;}
footer .Organizer .Item{ display:flex; align-items: center;}
footer .Organizer .Item .Logo{ padding-right:15px;}
footer .Organizer .Item .Logo img{ width:60px;}
footer .Organizer .Item .Word{ border-left:1px solid #ccc; padding-left:15px}
footer .Organizer .Item .Word .Title{ font-size:0.75rem; color:#777; display:block; font-weight:600;}
footer .Organizer .Item .Word .Name{ font-size:1.25rem; color:#333; display:block; font-weight:900;}
footer .FooterName{ padding:10px; background-color:#eee; color:#333; text-align:center;}

/*swiper*/
[swiper-button-prev],
[swiper-button-next]{ z-index: 2; }
[light-name]{ font-size: inherit; font-weight: inherit; }

.letter{ opacity: 0; }

/*Fadein*/
.fadeIn_base {
    opacity: 0;
    visibility: hidden;
    transform: translate(0px, 0px);
    -webkit-transition: all 0.75s cubic-bezier(0.42, 0, 0.58, 1);
    -moz-transition: all 0.75s cubic-bezier(0.42, 0, 0.58, 1);
    -o-transition: all 0.75s cubic-bezier(0.42, 0, 0.58, 1);
    transition: all 0.75s cubic-bezier(0.42, 0, 0.58, 1);
}

.fi_end { opacity: 1; visibility: visible; transform: translate(0, 0); }

.fadeInBox .fadeIn_base:nth-child(1) { transition-delay: 0.15s; }
.fadeInBox .fadeIn_base:nth-child(2) { transition-delay: 0.3s; }
.fadeInBox .fadeIn_base:nth-child(3) { transition-delay: 0.45s; }
.fadeInBox .fadeIn_base:nth-child(4) { transition-delay: 0.6s; }
.fadeInBox .fadeIn_base:nth-child(5) { transition-delay: 0.75s; }
.fadeInBox .fadeIn_base:nth-child(6) { transition-delay: 0.9s; }
.fadeInBox .fadeIn_base:nth-child(7) { transition-delay: 1.05s; }
.fadeInBox .fadeIn_base:nth-child(8) { transition-delay: 1.2s; }
.fadeInBox .fadeIn_base:nth-child(9) { transition-delay: 1.35s; }
.fadeInBox .fadeIn_base:nth-child(10) { transition-delay: 1.5s; }
.fadeInBox .fadeIn_base:nth-child(11) { transition-delay: 1.65s; }
.fadeInBox .fadeIn_base:nth-child(12) { transition-delay: 1.8s; }
.fadeInBox .fadeIn_base:nth-child(13) { transition-delay: 1.95s; }

@media screen and ( max-width: 1200px) and ( min-width: 769px) {
.ProtectedArea{ padding:0 20px;}

/*Header*/
header{ padding:0 25px;}
header .Logo{ width:118px;}
header .FunctionBox{ gap:10px;}
header .MenuBox .Item{ padding:20px 8px;}
header .Community{ padding:2px 15px;}

/*Footer*/
footer .Info .RightArea .MenuBox{ gap:20px;}

}


@media screen and ( max-width: 768px) {
.ProtectedArea{ padding:0 20px;}
.Wrapper{ padding-top:75px;}
.AP{ scroll-margin-top:80px;}
/*Header*/
header{ padding:0 0 0 20px;}
header .Logo{ width:116px;}
header .MobileBtn{ width:70px; height:70px; display:flex; padding:25px; flex-direction: column; justify-content: center; gap:7px;}
header .MobileBtn span{ border-top:2px solid #333; display:block;}
header.open .FunctionBox{ display:inline-flex; }
header .FunctionBox{ display:none; flex-direction: column; position:fixed; top:70px; left:0; right:0; bottom:0; background-color:#fff; z-index:10;}
header .MenuBox{ width:100%; flex-direction: column;}
header .MenuBox .Item{ text-align:center; padding:20px;}

/*Footer*/
footer .Info{ flex-direction: column; align-items: flex-start; padding:30px 20px; gap:20px;}
footer .Info .LeftArea .Logo img{ width:116px;}
footer .Info .RightArea{ width:100%; gap:15px; align-items: flex-start;}
footer .Info .RightArea .MenuBox{ flex-wrap: wrap; flex-direction: row; gap:0;}
footer .Info .RightArea .MenuBox .Item{ width:50%; padding:5px 10px 5px 0;}
footer .Organizer{ flex-direction: column; padding:30px 20px; align-items: flex-start; gap:20px;}
footer .Organizer .Item .Word .Name{ font-size:1rem;}
}