@charset "UTF-8";
:root{
    --ci1:#1a3d5d; --ci2:#292929; --color2:#e5c248; --color3:#9f893c; --color4:#0083b9; --white:#fff; --brand:#878787; --price:#bfbfbf; --mprice:#ff3d3d; --title:#4b4b4b; --gray1:#e5e9ef; --gray2:#776060; --gray3:#cacaca; --gray4:#fafafa; --blue1:#0f81c6; --red:crimson;
}
html{font-size:16px;} iframe{border:none;}
html, body{max-width:100%;}
*, body, header, footer, div, p, input, button, a, strong, td, li, i, h1, h2, h3, h4, h5, h6, strong, button, span, .btn, select, option{font-size:1rem; letter-spacing:1px; line-height:2; font-weight:400; font-family:Arial, '標楷體', '微軟正黑體' !important; text-decoration:none; text-shadow:none; margin:0; padding:0; color:#4B4B4B;}
*{transition: all .3s ease;} img, iframe{max-width:100%;}
h1, h2, h3, h4, h5, h6, strong{font-weight:700;}
h1{font-size:2rem;} h2{font-size:1.6rem;} h3{font-size:1.4rem;} h4{font-size:1.2rem;}
input, select, option{font-size:1rem !important;}
input:focus-visible{outline: 0px solid crimson;}
a:hover{color:var(--color2);}
img{max-width:100%; height: auto;}
table{border-collapse: collapse; width:100%; max-width:100%; border-spacing: 0;}
td, th{border:1px #e5e5e5 solid; padding:5px 10px;}
video{max-width:100%;}
section{width:calc(100% - 2rem); max-width:82.5rem; margin:0 auto; position: relative;}
section:after{content:''; display: block; clear:both;}
.slick-dots li button::before{font-size:1.5rem !important;}
.pagination{text-align: center; width:100%;}
.pagination li{display: inline-block; list-style: none; font-size:1.2rem; line-height: 1;}
.pagination li a, .pagination li span{display: block; font-size:1.2rem; line-height: 1; margin:0 5px; padding:2px 5px;}
.pagination li.active span{background: var(--ci1); color:#fff;}
.red{color:var(--red);}
header{width:100%;}
header .cloud{width:100%; height: 300px; background: url('../img/cloud.webp') repeat-x center; background-size: auto 100%; position: absolute; animation: panoramic 50s linear infinite;}
#float_nav{position: fixed; z-index:9999; right: 10px; bottom:160px; }
#float_nav a{display:flex; width:60px; height: 60px; justify-content: center; align-items: center; background:rgba(68, 77, 89, 1); border:1px rgba(68, 77, 89, 1) solid; border-radius: 10px; color:#fff; flex-direction: column; cursor: pointer;}
#float_nav a box-icon{fill: #fff;}
#float_nav .line-add{margin-top:10px; background:#06c755; border-color:#06c755; box-shadow:0 8px 18px rgba(6, 199, 85, 0.24);}
#float_nav .line-add .line-add__icon{width:38px; height:38px; fill:#fff;}
#float_nav .line-add:hover{background:#05b34c; border-color:#05b34c; transform:translateY(-2px);}
@keyframes panoramic {
    to { background-position: 100% 0; }
}
header .tools{padding:0.5rem 0.5rem; position: absolute; right: 0; top:0.5rem;}
header .tools, header .tools *{color:var(--ci1); font-size:0.875rem;}
header .tools a:hover{color:var(--color2);}
header section{max-width:87.5rem;}
header .logo{display: inline-block; margin-top:1rem; position: relative;}
header .logo img{width:100%; filter: drop-shadow(2px 2px 2px #222); }
header .logo strong{position: absolute; left:14rem; color:var(--ci1); display: inline-block; font-size:1.6rem; font-weight:900; width:30vw;}
header .search{border:1px var(--ci1) solid; position: absolute; right:9rem; top:0.75rem; padding:0.2rem 0.5rem; border-radius: 2.25rem; width:8rem;}
header .search input{background: transparent; border:none; font-size:0.875rem; font-weight: 400; width:calc(100% - 1.6rem); color:var(--ci1);}
header .search button{border:none; float: right; margin-top:0.4rem; background:transparent; color:var(--ci1); font-size:1.3rem; line-height:1.2;}
#headermp4{height:calc(100vw * 0.56);}
#headermp4 video{display:block; width:100%; height:100%; object-fit:cover;}
.header-video__headline{position:relative; display:flex; min-height:clamp(108px,10vw,142px); align-items:center; justify-content:center; margin:0; padding:20px clamp(88px,18vw,230px); overflow:hidden; border-top:1px solid rgba(185,146,87,.28); border-bottom:1px solid rgba(185,146,87,.32); color:#17332b; background:radial-gradient(ellipse at 3% 50%,rgba(185,146,87,.13),transparent 28%),radial-gradient(ellipse at 97% 50%,rgba(185,146,87,.11),transparent 28%),linear-gradient(105deg,#f5eddd,#fffaf0 46%,#f7efdf); font-family:"DFKai-SB","BiauKai","KaiTi","標楷體",serif !important; font-size:clamp(1.2rem,2.15vw,2.1rem); font-weight:700; letter-spacing:.11em; line-height:1.35; text-align:center; text-shadow:0 1px 0 rgba(255,255,255,.78); white-space:nowrap;}
.header-video__headline::before,.header-video__headline::after{position:absolute; top:50%; width:clamp(54px,9vw,150px); height:1px; content:""; background:linear-gradient(90deg,transparent,rgba(185,146,87,.88)); transform:translateY(-50%);}
.header-video__headline::before{left:clamp(18px,5vw,90px);}
.header-video__headline::after{right:clamp(18px,5vw,90px); transform:translateY(-50%) scaleX(-1);}
.header-video__headline>span{position:relative; z-index:1; display:inline-block; color:#17332b; font-family:inherit !important; font-size:inherit; font-weight:inherit; letter-spacing:inherit; line-height:inherit;}
@supports ((-webkit-background-clip:text) or (background-clip:text)){.header-video__headline>span{color:transparent; background:linear-gradient(120deg,#123f33 0%,#1f7a43 20%,#ef2435 43%,#ff4050 53%,#197044 74%,#123f33 100%); background-size:260% 100%; background-position:0 50%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; text-shadow:none; filter:drop-shadow(0 1px 0 rgba(255,255,255,.72)); animation:header-headline-spectrum 8s ease-in-out infinite;}}
@keyframes header-headline-spectrum{0%,100%{background-position:0 50%;}50%{background-position:100% 50%;}}
@media(prefers-reduced-motion:reduce){.header-video__headline>span{animation:none !important;}}
@media(max-width:560px){.header-video__headline{min-height:78px; padding:13px 7px; font-size:clamp(1rem,4.55vw,1.18rem); letter-spacing:.03em; line-height:1.25;}.header-video__headline::before,.header-video__headline::after{display:none;}}
nav{text-align: center; margin-top:-2px; display: flex; flex-wrap: wrap; background: #03674a}
nav, nav a{font-size: 2rem; font-weight: 600;}
nav a{display: inline-block; width:calc(25% - 1px); color:#fff; line-height: 2;}
nav a:hover{background: var(--color2); color:#fff;}
#nav{position: absolute; right:0rem; bottom:0.4rem;}
#nav ul{margin:0; padding:0;}
#nav ul li{list-style: none; display:inline-block; position: relative;}
#nav ul li a{font-size:1.2rem; line-height:1; padding:0.25rem 0.5rem; display: inline-block; color:var(--ci1); font-weight:600;}
#nav ul li a.active, #nav ul li a:hover{color:var(--color2);}
#nav ul li:hover .subnav{display: inline-block;}
#nav .subnav{position: absolute; background:var(--white); display: none; left:0; top:1.5rem; width:12rem; box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.10);}
#nav .subnav a{display: block; line-height: 1; padding:0.5rem 0.5rem;}
#btnSearch, #navation{position: absolute; right:0; bottom:0rem; font-size:2.5rem; display: none; color:var(--ci1); cursor: pointer;}
#btnSearch{right:3.5rem; font-size:2rem;}
main{margin:1rem 0 1rem 0; padding:2rem 0;}
#contactBox{background:url('../img/bg_footer.jpg') center top; text-align: center; padding:3rem 10px 8rem 10px}
#contactBox h5{font-size: 3rem; font-weight: 600; color:rgba(101, 73, 133, 1);}
.fieldBox, #contactBox textarea{border: 1px solid rgba(136, 136, 136, 1); border-radius: 9px; width:100%; max-width:600px; margin:10px auto; padding:5px 10px; background: #fff;}
#contactBox textarea{height: 150px;}
.fieldBox input{border:none; box-shadow: none; width:calc(100% - 130px);}
.fieldBox label{display: inline-block; color:rgba(90, 90, 90, 1); width:100px; text-align:center; border-right: 1px rgba(90, 90, 90, 1) solid; margin-right: 1rem;}
footer{background: rgba(68, 77, 89, 1); text-align: center;}
footer section{padding:1.25rem 1rem;}
footer, footer *{color:var(--white); font-size:1rem; line-height:1.3;}
footer .logo{max-width:220px;}
.btn{background:var(--ci1); color:var(--white); line-height: 1; border-radius:0.25rem; padding:0.5rem 0.75rem; display: inline-block; font-weight: 900;}
.btn *{color:var(--white); line-height: 1; font-size: 1rem;}
button.facebook{background:#3B5998; color:#fff; border-color:#3B5998;}
button.facebook .fab{font-size: 18px; color:#fff; margin-right: 10px;}
button.facebook:hover{opacity: 0.9;}
.hr{border-bottom:1px #000 solid; margin:1.5rem 0 3rem 0; text-align:center;}
.hr span{background:var(--white); line-height: 1; display:inline-block; position:relative; bottom:-10px; padding:0 10px;}
.c2{margin:1rem 0 1rem -1rem;}
.c2 li{list-style: none; width:calc(50% - 1rem); float: left;}
.c2 li:nth-child(even){float: right;}
.c3{margin:1.5rem auto 1.5rem -1.5rem; width:100%;}
.c3 li{list-style: none; margin:0 0 2rem 1.5rem; display: inline-block; width:calc(33.3333% - 1.7rem); float: left; background:var(--gray1); border:1px var(--ci2) solid; box-shadow:1px 1px 2px rgba(0,0,0,0.4); position: relative;}
.c3 .img{width:100%; padding-bottom:67%; background:no-repeat center; background-size:cover; display: block;}
.c3 .title{color:var(--color4); font-weight:700; font-size:1.3rem; line-height:1.2; margin:1rem 0.75rem 0.5rem 0.75rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:2; overflow: hidden; height: 3.2rem;}
.c3 .info{display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:3; overflow: hidden; line-height:1.4; margin:0 0.75rem 1rem 0.75rem; height:6rem;}
.c3 .info span{line-height:1.4; display: inline-block; margin-right:1rem;}
.c3 .more{text-align: center; margin:1rem 0;}
.c3 .tools{position:absolute; right:10px; top:10px;}
.c3 .tools a{display: inline-block; background:var(--mprice); color:var(--white); border-radius:0.5rem; padding:0.25rem 0.5rem; line-height: 1;}
.c4 li{width:calc(25% - 1.7rem);}
#title{font-size:1.8rem; font-weight: bold; line-height: 1.4; border-bottom:1px var(--gray1) solid; padding-bottom:0.25rem; margin-bottom: 1rem; color:var(--color3);}
.area_title{color:var(--color3); font-size: 1.4rem; font-weight: 900; margin-bottom:1rem; position: relative; width:100%; display: block;}
.area_title .more, .area_title .more *{color:var(--blue1); font-weight:600;}
.area_title .more{position: absolute; right: 0; top:0.7rem; display: inline-block; padding-right:1rem;}
.area_title1{color:var(--blue1);}
.area_title1 .more{float:right;}
#indexBanners{margin-bottom:2rem; position: relative; background:var(--white);}
#indexBanners *{transition: unset;}
#indexBanners, #indexBanners a{width:100%; display:inline-block;}
#indexBanners a{background: no-repeat center; height:calc(100vw * 0.4); background-size:cover;}
.slick-dots{bottom:1rem;}
.slick-dots li button:before{font-size: 5rem; width:5rem; height: 5rem; text-shadow: 1px 1px 0 #fff;}
.imgBox{background:var(--gray2); box-shadow:2px 2px 5px rgba(0,0,0,0.4);}
.imgBox img{transform:translate(-15px, -10px);}
#indexAboutUs{width:80%; margin:2rem auto;}
#indexAboutUs .imgBox{width:50%; float: left;}
#indexAboutUs .info{width:45%; float: right; font-size:1.2rem; line-height:1.4;}
#captcha{width:80px; margin-right:20px;}
.captcha{cursor: pointer;}
.btn1{color:var(--white); display: inline-block; line-height: 1; background:var(--ci1); padding:8px 15px; border-radius:3px; border:1px var(--ci1) solid;}
.btn1 *{color:var(--white); line-height: 1;}
.btn1:hover{background:var(--white); color:var(--ci1);}
.btn1:hover *{color:var(--ci1);}
.boxshadow{padding: 2rem 2.5rem; box-shadow:0 0 15px rgba(0,0,0,0.1); border:1px #e7e7e7 solid; margin:1.5rem auto; border-radius:8px; max-width:500px; margin:2rem auto;}
.fields{float: left; margin:0 0 0px 10px; width:calc(100% - 10px); position: relative; display: inline-block;}
.fields .title{color:#666; width:90%;}
.fields .title.must:before{content:'*'; color:#eb5049; top:3px; left:-15px; position:absolute;}
.fields [type=text], .fields [type=password], .fields textarea, .fields select{width:calc(100% - 3rem); margin-bottom: 1rem; padding:0 10px; border:1px #e7e7e7 solid; border-radius:5px; background: #fff;}
.fields.half{width:calc(50% - 10px);}
.fields .bx{font-size:1.6rem;}
.checkBox{display: inline-block;}
.checkBox input{display: none;}
.checkBox input:checked + label{background:#666; color:#fff;}
.checkBox label{border:1px #e7e7e7 solid; color:#e7e7e7; display: inline-block; line-height:1.3; padding:5px 15px; float: left; cursor: pointer;}
.checkBox label:nth-child(2){border-radius:8px 0 0 8px; border-right:0;}
.checkBox label:nth-last-child(1){border-radius:0 8px 8px 0; border-left:0;}
.news_list{margin:2rem 1rem;}
.news_list li{list-style: none; background:var(--gray3); border-left-width:230px; width:calc(50% - 1rem); float: left; position: relative; margin-bottom: 2rem;}
.news_list li:nth-child(even){float: right;}
.news_list li .info{margin:15px 5px 5px 150px; padding:10px 10px 10px 20px; background:var(--white);}
.news_list li .info .img{background:no-repeat center; background-size: cover; width:150px; padding-bottom:100px; border:2px var(--white) solid; position: absolute; left:5px; top:8px; display: inline-block; box-shadow:1px 1px 2px rgba(0,0,0,0.2);}
.news_list li .info .title, .news_list li .info .d, .news_list li .info .note{width:calc(100% - 10px);}
.news_list li .info .title{font-size:1.2rem; font-weight:700; line-height:1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom:5px; color:var(--blue1); border-bottom:1px #eee solid; padding-bottom:5px; margin-bottom:10px;}
.d, .d *{font-size:0.9rem; color:var(--brand); line-height: 1;}
.news_list li .info .note{display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:2; overflow: hidden; height:2.7rem; line-height:1.4; font-size:0.9rem; margin-top:5px;}
.row_table{margin:2rem 1rem; width:calc(100% - 2rem); border-collapse: collapse;}
.row_table tr td{border:1px #000 solid; padding:5px 8px;}
.row_table tr:nth-child(2n+1){background:#fffedb;}
.row_table tr.title{background:var(--blue1);}
.row_table tr.title td{color:#fff; font-weight:700;}
.row_table .host{width:13rem;}
.row_table .host span{display: block;}
.row_table .d{width:4rem;}
.row_list li{list-style: none; position: relative; margin-top:1.5rem;}
.row_list li .img{width:180px; padding-bottom:14.2%; display: inline-block; float: left; margin-right:1rem; background:no-repeat center; background-size: cover;}
.row_list li .tag{color:var(--blue1); line-height:1.2;}
.row_list li .d{float: right; color:var(--brand); line-height: 1.2;}
.row_list li .title{display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:1; overflow: hidden; font-weight:900; font-size:1.2rem;}
.row_list li .info{display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:1; overflow: hidden;}
.list_qa{max-width:800px; margin:2rem auto; padding:0;}
.list_qa li{list-style: none; margin:3rem 0; padding:1.5rem 2rem; background: rgba(255, 255, 254, 1); box-shadow: 0px 8px 18.6px 0px rgba(0, 0, 0, 0.19); border-radius: 9px;}
.list_qa li .q{color:rgba(66, 130, 159, 1); font-weight: 700; line-height: 1.4; margin-bottom: 10px;}
.list_qa li .a{color:rgba(0, 0, 0, 1); font-weight: 400;}
.list_qa li ol{max-width: none; margin:1rem;}
.list_qa li ol li{box-shadow: none; margin:10px 0; list-style: decimal; padding:0;}
.mobile-x{display:inline-block;} .mobile{display: none;} td.mobile-x{display:table-cell;}
.hideit{display: none;} .fl{float: left;} .fr{float: right;}  .clear{clear: both;} .clearUp:after{content:''; display: block; clear:both;}

@media screen and (max-width:825px) {
    .mobile-x, td.mobile-x{display:none;} .mobile{display: inline-block;} td.mobile{display: table-cell;}
    .c3 li{width:100%; float: none;}
    header .cloud{height: 300px;}
    header .search, #nav{position: absolute; right:-1rem; bottom:auto; top:6.7rem; display: none; width:100vw; background:var(--ci1);}
    header .search{right:3rem; width:10rem;}
    header .logo{width:auto; margin-top:0.5rem;} header .logo img{width:auto; height:5rem;}
    header .logo strong{line-height:1.2; left:10rem; top:0.3rem; font-size:1.2rem;}
    header .search input, header .search button{color:var(--white);}
    nav a{width:calc(50% - 2px); font-size: 1.2rem; line-height: 3; margin: 0; padding: 0;}
    #nav ul li{display: block; margin:1rem 1.5rem;}
    #nav ul li a{display: block; color:var(--white);}
    #btnSearch, #navation{display: inline-block;}
    main{margin-top:6rem;}
    body#index main{margin-top:0; padding-top:0;}
    #indexAboutUs .imgBox, #indexAboutUs .info{float: none; width:100%;}
    #indexAboutUs .imgBox{margin-bottom:1rem;}
    aside, article{width:100%; float: none;} aside{margin-left:-0.5rem; padding:0;}
    article{width:calc(100% - 3rem);}
    aside a{display: inline-block; margin-right:1rem; padding:0.25rem 1rem; background: var(--color2); color:var(--white); border:1px var(--color2) solid; font-size:1rem;}
    aside a:hover{color:var(--color2); background:var(--white);}
    .news_list li, .news_list li:nth-child(even){float: none; width:100%;}
    .row_list li .img{display: none;}
    .row_table{width:100%; margin:2rem 0; border:1px #000 solid;}
    .row_table td.title{display: block; border:none; font-weight: 900; color:var(--blue1);}
    .row_table td.host{width:calc(100% - 9rem); display: inline-block; border:none;}
    .row_table td.host span{display: inline-block; margin-right:1rem;}
    .row_table td.d{display: inline-block; width:5rem; border:none; vertical-align: top; padding-top:1rem;}
    .row_table tr.title{display: none;}
    .row_table tr.title td{border:none;}
    .cfeList li{width:calc(50% - 1.5rem);}
    .fieldBox, #contactBox textarea{width:90%;}
}

@media print{
    html, body{ width:100%; height:auto; overflow:auto; }
}