@charset "utf-8";
/*Background_setting*/
@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
*{ margin:0; padding:0; line-height:160%; font-family:'Noto Sans TC',sans-serif; font-weight:400; box-sizing:border-box; scroll-behavior: smooth}
*:focus { outline: none;}
::selection{ background-color:#107140; color:#fff;}
a{ text-decoration:none;}
img{ max-width: 100%;}
strong{ font-weight: 700;}
body{overflow-x: hidden;}
font{ font: inherit; color: inherit; line-height: inherit;}

/*Header*/
header{ background-color:#fff; position: fixed; top: 0; left: 0; right: 0; box-shadow: 0 5px 30px rgba(0,0,0,.1); z-index: 10;}
header .FunctionBox{ padding:15px 30px; display: flex; gap: 50px; align-items: center; justify-content: space-between;}
header .FunctionBox .LogoArea{ font-size: 0; display: block;}
header .FunctionBox .LogoArea img{ height:60px;}
header .FunctionBox .MobileBtn{ display: none;}
header .MenuArea{ display: flex; gap: 10px; justify-content: space-between; align-items: center;}
header .MenuArea .Item{ font-size: 18px; color: #333; position: relative; padding: 0 10px; cursor:pointer;}
header .MenuArea .Item::after{ content: ''; display: block; border-bottom: 3px solid #f46262; position: absolute; bottom: -12px; left: 50%; right: 50%; opacity: 0; transition: .3s;}
header .MenuArea .Item.Arrow{ background:url(../images/icon-arrow-down.svg) no-repeat center right; padding-right:25px;}
header .MenuArea .Tiers{ position:relative;}
header .MenuArea ul{ position:absolute; top:40px; left:0; right:0; background-color:#fff; list-style-type:none; border:1px solid #ccc;}
header .MenuArea ul .Item{ padding:5px 20px; display:block; border-radius: 10px;}
header .MenuArea ul .Item::after{ display:none;}

/*Banner*/
.Banner{ font-size:0; position:relative;}
.Banner .Slide{ /*overflow:hidden;*/ text-align: center;}
.Banner .Points{ display:flex; gap:8px; justify-content: center; position:absolute; bottom:30px; left:0; right:0; z-index: 2;}
.Banner .Points .Item{ width:8px; height:8px; border-radius:100px; display:block; background-color:rgba(255,255,255,.5); cursor: pointer; transition: .2s;}
.Banner .Points .Item.Focus{ width:50px; background-color:rgba(255,255,255,1);}
.Banner .LeftArrow{ width:44px; height:44px; background:rgba(255,255,255,.3) url(../images/icon-arrow-left.svg) no-repeat center; background-size:24px; position:absolute; top:50%; left:30px; border-radius:50%; transform: translateY(-50%); display:block; transition:.2s;}
.Banner .RightArrow{ width:44px; height:44px; background:rgba(255,255,255,.3) url(../images/icon-arrow-right.svg) no-repeat center; background-size:24px; position:absolute; top:50%; right:30px; border-radius:50%; transform: translateY(-50%); display:block; transition:.2s;}
.Banner.Page{ height:512px; background:no-repeat center; background-size:cover;}
.Banner h1{ display:flex; position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%; line-height:1.2; font-size:60px; font-weight:900; color:#333; justify-content: center; align-items: center; text-align:center; padding:20px;}
.Banner .Breadcrumb{ background-color:#fff; position:absolute; left: 50%; transform: translateX(-50%); bottom:0; border-radius:50px 50px 0 0; padding:10px 30px 0 30px;}
.Banner .Breadcrumb a{ font-size:16px; color:#333; display:inline-block;}
.Banner .Breadcrumb a::after{ content:">"; display:inline-block; font-size:16px; color:#333; padding:0 10px;}
.Banner .Breadcrumb span{ font-size:16px; color:#333; display:inline-block;}

.Banner .LeftArrow,
.Banner .RightArrow{ z-index: 2; border: unset; box-shadow: unset; cursor: pointer; }

/* 操作工具 */
[swiper-target] .BannerTool{ display: none !important; gap: 10px; width: 120px; 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; }
[swiper-target] .BannerTool button{ width: 44px; height: 44px; background:rgba(255,255,255,.3); border-radius:50%; display:block; transition:.2s; border: unset; box-shadow: unset; cursor: pointer; }
[swiper-target] .BannerTool button img{ width: 100%; height: 100%; }

[swiper-target] .BannerTool a:focus,
[swiper-target] .BannerTool button:focus,
[swiper-target] .BannerTool button:hover{ outline-color: #FFFFFF; transition:.2s; /*box-shadow: rgba( 0, 0, 0, 1) 0px 1px 4px, rgb( 0, 0, 0 ) 0px 0px 0px 6px*/; }

/*Main*/
main{ padding-top: 90px; min-height: 100dvh;}
main h2{ font-size: 48px; font-weight: 900; color: #10703E; padding-bottom: 20px; text-align:center;}
main h3{ font-size: 24px; font-weight: 900; color: #1B2F69; padding-bottom: 20px;}
main p{ font-size: 18px; color: #333; padding-bottom: 20px;}
section{ padding:100px 0;}
.BtnBox{ padding:20px 0; text-align:center;}
.Btn{ padding:15px 30px; line-height:1.2; border-radius:100px; background-color:#F85A5A; color:#fff; font-size:18px; display:inline-block; text-align:center;}
.Container{ max-width: 1200px; width: 100%; margin: auto; padding: 0 30px;}
.text_red{ color:#f46262 !important;}
.text_orange{ color:#f18b48 !important;}
.text_yellow{ color:#eacf2c !important;}
.text_green{ color:#2BB47D !important;}
.text_blue{ color:#5d76bf !important;}
.text_purple{ color:#9731ea !important;}
.text_gray{ color:#777 !important;}
.text_white{ color:#fff !important;}
.text_bold{ font-weight:700 !important;}
.bg_red{ background-color:#f46262 !important;}
.bg_orange{ background-color:#f18b48 !important;}
.bg_yellow{ background-color:#eacf2c !important;}
.bg_green{ background-color:#2BB47D !important;}
.bg_blue{ background-color:#5d76bf !important;}
.bg_purple{ background-color:#9731ea !important;}
.bg_gray{ background-color:#777 !important;}
.bg_white{ background-color:#fff !important;}
.Row{ display:flex;}
.Row .Even{ flex:1;}
.Checkpoints{ scroll-margin-top:70px;}

/*Index*/
.IndexH1{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;}
.IndexAboutArea{ text-align:center; justify-content: center;}
.IndexAboutArea .Item{ padding:20px;}
.IndexAboutArea .Icon{ padding:20px; border-radius:50%; box-shadow:0 10px 30px rgba(0,0,0,.15); position:relative; display: inline-block;}
.IndexAboutArea .Icon::after{ content:""; display:block; position:absolute; top:-10px; left:-10px; right:-10px; bottom:-10px; border-radius:50%; background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='100' ry='100' stroke='%23BBBBBBFF' stroke-width='1' stroke-dasharray='6%2c 6' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");}
.IndexAboutArea .Name{ font-size:16px; color:#333; font-weight:400; line-height:1.4; padding-top:20px;}
.PhotoText{ gap:40px; align-items: center;}
.PhotoText .Photo.Skin{ width:500px; border-radius:0 100px 0 100px; background-color:rgba(0,0,0,.04); padding:20px; flex-shrink:0;}
.PhotoText .Photo.Skin img{ border-radius:100px 0 100px 0;}
.PhotoText .Note{ text-align:left;}
.PhotoText .Note p{ font-size:18px; color:#333; text-align:justify; line-height:1.8;}
.IndexEarth{ background:no-repeat center bottom; background-size:100% auto; padding-top:0; padding-bottom:30dvw;}
.IndexEarth p{ font-size:18px; color:#333; text-align:justify; line-height:1.8;}
.IndexEarth .LightArea{ position: relative; bottom: 0; left: 0;}
.IndexEarth .LightArea .Points{ width: 100px; height: 100px; border-radius: 50%; position: absolute; background: radial-gradient(ellipse at center, rgba(255,255,255,1) 5%,rgba(255,255,255,0) 70%); animation: Points 6s ease-in-out 0s infinite alternate;}
.IndexEarth .LightArea .Style01{ top: 10.8dvw; left: 9.8dvw; }
.IndexEarth .LightArea .Style02{ top: 7.5dvw; left: 30.5dvw; animation-delay: -1s; }
.IndexEarth .LightArea .Style03{ top: 21.4dvw; left: 39.6dvw; animation-delay: -2.5s; }
.IndexEarth .LightArea .Style04{ top: 5.2dvw; left: 55.6dvw; }
.IndexEarth .LightArea .Style05{ top: 11dvw; left: 77.1dvw; animation-delay: -1s; }
@keyframes Points {0% { transform: scale(0); opacity: 0; } 70% { transform: scale(0); opacity: 0; } 100% { transform: scale(1); opacity: 1; }}
.Contact .Info{ padding-bottom:20px;}
.Contact .Item{ gap:10px; padding-bottom:15px;}
.Contact .Name{ width:110px; flex-shrink:0; font-size:18px; color:#333; gap:10px; padding:0;}
.Contact .Data{ color:#333; font-size:18px;}
.Contact .Data a{ font-size:inherit; color:inherit;}
.Contact .Map{ width:100%; height:400px; position:relative;}
.Contact .Map iframe{ position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%; border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.1);}

/*Page*/
.TickList{ list-style-type:none;}
.TickList li{ background:url(../images/icon-tick.png) no-repeat top left; background-size:24px 24px; padding-left:30px; padding-bottom:10px;}
.FenceList{ gap:20px;}
.FenceList .Note{ font-size:14px; color:#333;}
.Highlight{ background:#222 no-repeat center; background-size:cover;}
.Highlight h2,
.Highlight h3,
.Highlight p,
.Highlight li{ color:#fff;}
/*LightBox*/
.LightBox{ position:fixed; display:flex; justify-content: center; align-items: center; top:0; left:0; right:0; bottom:0; background-color:rgba(0,0,0,.7); padding:80px; z-index:11;}
.LightBox .ContentBox{ width:100%; max-width:800px; background-color:#fff; border-radius:10px; padding:30px; max-height: 100%; overflow-y: auto;}
.LightBox .ContentBox .CloseBtn{ position:absolute; left:0; right:0; bottom:30px; margin:auto; background-color:#C93434; padding:5px; border-radius:50%; font-size:0; width:34px; height:34px;}
.LightBox.Notify .ContentBox{ max-width:400px;}
.LightBox.Notify .ContentBox p{ font-size: 24px; text-align: center; font-weight: 700; color: #333;}
.LightBox.Notify .ContentBox .BtnBox{ padding: 0;}
.LightBox .TableBox{ padding: 10px 0;}
/* .LightBox .FormBox{ display: inherit;} */
.LightBox .BtnClose{ position: absolute; bottom: 20px; left: 0; right: 0; margin: auto; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: #C93434; border: 2px solid rgba(255,255,255,.3); cursor: pointer;}


/*Footer*/
footer{ background-color: #10703E;}
footer .FuncitionBox{ padding: 50px 30px; display: flex; justify-content: space-between; align-items: center;}
footer .FuncitionBox .TopBox{ display:flex; padding:0 0 30px 0; justify-content: space-between; align-items: center;}
footer .FuncitionBox .LogoArea{ display: inline-block; font-size: 0;}
footer .FuncitionBox .LogoArea img{ height:60px;}
footer .FuncitionBox .Menu{ display: flex; gap:40px;}
footer .FuncitionBox .Menu .Type .Item{ color: #fff; display: block; font-size: 16px;}
footer .FuncitionBox .Menu .Type .Item:first-child{ font-weight: 700; font-size: 18px;}
footer .Main{ display: flex; justify-content: space-between; padding: 30px; border-top: 1px solid rgba(0,0,0,.2); gap:30px; align-items: flex-end;}
footer .Main .Data{ color: #fff; display: flex; gap:5px; flex-direction: column;}
footer .Main .Data a{ color: #fff; font-size: 16px;}
footer .Main .Data .Link{ display: flex; gap:10px;}
footer .Main .Data .Link a{ display: inline-block; font-size: 0;}
footer .Main .Data .Link img{ width: 30px;}
footer .CoprightBox{ text-align: right; color: #fff;}
footer .CoprightBox *{ color: #fff; font-size: 12px; font-weight: 700;}

@media screen and ( min-width: 1200px) {
/*Hover*/
header .MenuArea .Item:hover::after{ left: 0; right: 0; opacity: 1; transition: .3s;}

/*Banner*/
.Banner .LeftArrow:hover{ width:55px; height:55px; left:25px; background-color:rgba(255,255,255,.7); transition:.2s;}
.Banner .RightArrow:hover{ width:55px; height:55px; right:25px; background-color:rgba(255,255,255,.7); transition:.2s;}
[swiper-target] .BannerTool button:hover,
[swiper-target] .BannerTool button:focus,
[swiper-target] .BannerTool button:hover,
[swiper-target] .BannerTool button:focus{ width:55px; height:55px; background-color:rgba(255,255,255,.7);}

/*Footer*/
footer .FuncitionBox .Main .Menu .Type .Item:hover{ text-decoration: underline;}
}



@media screen and ( max-width: 1200px) and ( min-width: 768px) {
    /*Header*/
header .FunctionBox{ gap:30px; padding: 15px 66px 15px 20px;}
header .FunctionBox .LogoArea{ width: 260px;}
header .FunctionBox .MobileBtn{ display:none;}
header .FunctionBox .MobileBtn span{ width: 100%; border-top: 2px solid #1B2F69;}
header .MenuArea .Item{ padding: 6px;}

/*Main*/
main{ padding-top: 90px;}

/*Index*/
.IndexAboutArea{ flex-wrap: wrap;}
.PhotoText .Photo.Skin{ width:300px; height:300px; padding:15px;}
.IndexEarth .LightArea .Style01{ top: 9.4dvw; left: 8.3dvw; }
.IndexEarth .LightArea .Style02{ top: 5.8dvw; left: 28.7dvw;}
.IndexEarth .LightArea .Style03{ top: 19.6dvw; left: 37.8dvw;}
.IndexEarth .LightArea .Style04{ top: 3.6dvw; left: 53.9dvw; }
.IndexEarth .LightArea .Style05{ top: 9.7dvw; left: 75.3dvw;}

/*Footer*/
footer .FuncitionBox .Menu{ gap: 20px;}
footer .FuncitionBox .Menu .Type .Item{ font-size: 14px;}
footer .FuncitionBox .Menu .Type .Item:first-child{ font-size: 16px;}
footer .FuncitionBox .Main .Data{ gap:2px;}
footer .FuncitionBox .Main .Data *{ font-size: 14px;}
}


@media screen and ( max-width: 767px) {
/*Header*/
header .FunctionBox{ padding: 15px 20px 15px 20px; position: relative;}
header .FunctionBox .LogoArea{ width: 260px;}
header .FunctionBox .LogoArea img{ height:40px;}
header .FunctionBox .MobileBtn{ width: 70px; height: 70px; display: flex; position: absolute; top: 0; right: 0; padding: 23px; flex-direction: column; justify-content: center; gap: 6px; cursor: pointer;}
header .FunctionBox .MobileBtn span{ width: 100%; border-top: 2px solid #1B2F69;}
header .MenuArea{ flex-direction: column; position: fixed; top:70px; left: 0; right: 0; background-color: #fff; padding: 120px 20px 20px 20px; box-shadow: 0 20px 20px rgba(0,0,0,.1);}
header .MenuArea{ display:none; flex-direction: column; width: 100%; text-align: center; padding: 0; gap:0;}
header .MenuArea .Item{ width:100%; padding: 6px; font-weight: 700; display:block; border-top:1px solid #ccc;}
header .MenuArea .Item.Arrow{ background-position: center right 12.5px; }
header .MenuArea .Tiers{ width:100%;}
header .MenuArea ul{ position:static; border:0; background-color:#f5f5f5; border-radius: 0px;}
header .MenuArea ul .Item{ border-top:1px solid #ddd; font-weight:400;}

header.MenuOpen .MenuArea{ display: flex; }

/*Main*/
main{ padding-top: 70px;}
main h2{ font-size:36px; line-height:1.3;}
main h3{ font-size:20px;}
main p{ text-align:justify; font-size:14px;}
.Container{ padding: 0 20px;}
section{ padding:60px 0;}
.Row.MVertical{ flex-direction: column;}

/*Banner*/
.Banner{ overflow:hidden; position: relative;}
.Banner.Page{ height:350px;}
.Banner h1{ font-size:48px;}
.Banner .Points{ position:static; padding-top:10px;}
.Banner .Points .Item{ background-color:#eee;}
.Banner .Points .Item.Focus{ background-color:#777;}
.Banner .LeftArrow{ left:-10px;}
.Banner .RightArrow{ right:-10px;}
.Banner .Breadcrumb{ left:0; right:0; transform:none; text-align:center;}

[swiper-target] .BannerTool{ gap: 5px; bottom: calc( 10% + 10px ); right: calc( 2.5dvw + 10px ); transform: translateY( calc( 50% - 10px ) ); }

/*Index*/
.IndexAboutArea{ width:100%; flex-wrap: wrap;}
.IndexAboutArea .Item{ width:50%;}
.PhotoText{ flex-direction: column; text-align:center;}
.PhotoText .Note p{ font-size:16px;}
.PhotoText .Photo.Skin{ width:100%; height:auto; padding:15px;}
.IndexEarth{ background-size: 150% auto; padding-bottom: 15dvw;}
.IndexEarth p{ font-size:16px;}
.IndexEarth .LightArea .Style01{ top: -17.4dvw; left: 5.3dvw; }
.IndexEarth .LightArea .Style02{ top: -22.2dvw; left: 16.7dvw;}
.IndexEarth .LightArea .Style03{ top: -1.6dvw; left: 29.8dvw;}
.IndexEarth .LightArea .Style04{ top: -25.4dvw; left: 54.5dvw; }
.IndexEarth .LightArea .Style05{ top: -16.3dvw; left: 85.9dvw;}
.Contact .Item{ flex-direction: column; gap:0;}
.Contact .Name{ font-weight:700;}

/*Page*/
.TickList li{ text-align:justify;}

/*LightBox*/
.LightBox{ padding: 10px;}
.LightBox .ContentBox{ padding: 20px;}
.LightBox .TableBox{ margin: 0 -10px; max-width: none; padding: 5px 0;}
.LightBox .BtnClose{ bottom: auto; top: 15px; left: auto; right: 15px;}

/*Footer*/
footer .FuncitionBox{ padding: 30px 20px; flex-direction: column-reverse; gap:20px;}
footer .FuncitionBox .TopBox{ flex-direction: column; gap:20px;}
footer .FuncitionBox .LogoArea img{ height:40px;}
footer .FuncitionBox .Menu{ width:100%; flex-wrap: wrap; gap:10px;}
footer .FuncitionBox .Menu .Type{ width: 100%;}
footer .FuncitionBox .Menu .Type .Item{ font-size: 14px; padding-left:20px;}
footer .FuncitionBox .Menu .Type .Item:first-child{ font-size: 16px; padding-left:0;}
footer .FuncitionBox .Main .Data *{ font-size: 14px;}
footer .Main{ flex-direction: column; padding-top: 20px; align-items: flex-start; gap:10px;}
footer .CoprightBox{ text-align:left;}


}


/* 選單展開反應 */
header.openMenu .DataBox{display:flex}

/* 跑馬燈 */
.Row .swiper-wrapper{ transition-timing-function: linear; }
.Row .swiper-slide{ width:auto; }

/* Ajax 光箱表單 補正 */
td form:has([lightbox-ajax]){ display: inline-block; }

/* 文章收合功能 */
.PhotoText .Note p { margin: 1em 0; transition: all 0.5s ease; }
.PhotoText .Note p:nth-of-type(n+3) { display: none; }
.PhotoText .Note p.second { position: relative; max-height: 1.5em; overflow: hidden; }
.PhotoText .Note p.second::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 1.5em; background: linear-gradient(to bottom, transparent, white); }
.PhotoText .Note.expanded p { max-height: none !important; overflow: visible; }
.PhotoText .Note.expanded p:nth-of-type(n+3) { display: block; }
.PhotoText .Note.expanded p.second::after { display: none; }
.PhotoText .Btn { display: inline-block; margin-top: 0.5em; opacity: 1; transition: opacity 0.4s ease; }
.PhotoText .Btn.hidden { opacity: 0; margin: 0em; padding: 0; font-size: 0; pointer-events: none; }