﻿@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@200..900&display=swap');  body { margin: 0; padding: 0; font-family: 'Noto Serif TC',sans-serif; font-size: 20px; font-weight: 400; color: #333; box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box }  body a { transition: .5s all; -webkit-transition: .5s all; -moz-transition: .5s all; -o-transition: .5s all; -ms-transition: .5s all }  h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0 }  a { color: #717037; text-decoration: none }  a:hover { color: #ff6d39; text-decoration: none }  p { margin: 0; padding: 0; text-align: justify; line-height: 32px }  img { max-width: 100%; height: auto; vertical-align: bottom }  .img4x3, .img3x2, .img16x8 { width: 100%; height: 100%; margin: 0; padding: 0 }  .ease { -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease }  .clear { clear: both }  .container01 { max-width: 1600px; margin: 0 auto; padding: 0 20px; overflow: hidden }  .container02 { max-width: 1620px; margin: 0 auto; padding: 0 10px; overflow: hidden }  ul, li { margin: 0; padding: 0; list-style: none }  li.vertical_line { margin: 0 5px }  ul.listy_01 li { width: 100% }  ul.listy_02 li { width: 50% }  ul.listy_03 li { width: 33.3333% }  ul.listy_04 li { width: 25% }  input.btn, input.s { -webkit-appearance: none; -moz-appearance: none; border-radius: 0 }  .gap { height: 0px }  .color01 { color: #8cc63f }  .color02 { color: #547726 }  .color03 { color: #f63 }  header.active { width: 100%; position: fixed; z-index: 9999 }  .btn.active, .top_guide.active { display: none !important }  .btn2 { float: left; font-size: 1em; display: none }  .btn2.active { display: block !important }  #sticky_navigation_wrapper { width: 100% }  #sticky_navigation { width: 100%; z-index: 100 }  #sticky_navigation_wrapper.active .top_guide, #sticky_navigation_wrapper.active .btn { display: none }  #sticky_navigation_wrapper.active header { box-shadow: 0 2px 10px rgba(0,0,0,.1) }  #sticky_navigation_wrapper.active header .btn2 { float: left; display: block }  .top_guide { width: 100%; padding-bottom: 2px; font-size: 13px; color: #fff; background: #575757; overflow: hidden }  .top_guide_left { float: left }  .top_guide_right { float: right }  ul.ul_list01 li { float: left; line-height: 28px }  ul.ul_list01 li.member { padding: 0 0 0 20px; background: url(../img/icon-member.png) 0 7px no-repeat }  ul.ul_list01 li a { color: #fff }  ul.ul_list01 li a:hover { color: #fff; text-decoration: underline }  header { overflow: hidden; border-bottom: 1px solid #eee; background: #fff }  .logo { float: left; padding: 13px 0; overflow: hidden }  a .logo, a:hover .logo { color: #333 }  .logo_img { float: left; width: 42px; margin-right: 10px }  .logo_img img { max-width: 100%; height: auto }  .logo h1 { float: left; font-size: 24px; font-weight: 300; line-height: 1.8em }  .function { float: right; padding: 19px 0; overflow: hidden }  button.search { float: left; width: 32px; height: 32px; border: 0; outline: 0; background: url(../img/icon-search.png) no-repeat; background-size: cover; text-indent: -9999px; cursor: pointer }  button.icon_menu { float: left; width: 32px; height: 32px; margin-left: 20px; border: 0; outline: 0; background: url(../img/icon-menu_toggle.png) no-repeat; background-size: cover; text-indent: -9999px; cursor: pointer }  .btn { background: #eee }  ul.ul_btn { width: 100%; overflow: hidden }  ul.ul_btn li { float: left; margin-right: 30px; padding: 20px 0; font-size: 18px }  ul.ul_btn li a { color: #333 }  ul.ul_btn li a:hover { color: #8cc63f }  .banner { max-width: 1608px; margin: 0 auto; padding: 0 16px; clear: both }  ul.ul_banner { padding: 40px 0; overflow: hidden }  ul.ul_banner li { float: left }  ul.ul_banner li h2 { padding: 10px 10px 10px 40px; color: #fff; font-size: 20px; font-weight: 300 }  ul.ul_banner li:first-child { width: 50.07% }  ul.ul_banner li:first-child h2 { padding: 20px 20px 20px 40px; color: #fff; font-size: 26px; font-weight: 300 }  ul.ul_banner li:nth-child(2), ul.ul_banner li:nth-child(3), ul.ul_banner li:nth-child(4), ul.ul_banner li:nth-child(5) { width: 24.965% }  .bannerbox { margin: 4px; position: relative }  .bannertitle { width: 100%; background: rgba(0,0,0,.75) url(../img/line01.gif) left repeat-y; position: absolute; bottom: 0 }  .ad01 { padding: 40px 0; background: #f6f6f6 }  .ad01 span { height: 90px; margin: 0 auto; display: block }  .ad02 { padding: 20px 0 }  .wrap { display: -webkit-flex; display: flex }  .main { max-width: 1302px; -webkit-flex: 1; flex: 1 }  .list_cap { width: auto; margin: 32px 10px 20px; padding-bottom: 8px; border-bottom: 3px solid #8cc63f; position: relative }  .list_cap h2 { font-size: 36px; text-align: center }  .list_cap h2.inner { margin-bottom: 15px; line-height: 1.2em; font-weight: 600; text-align: left; display: block }  .list_cap span { font-size: 14px; display: block; position: absolute; right: 0; top: 17px }  .list_cap .ul_listinfo { margin-top: 8px; margin-bottom: 12px }  .list_cap .ul_listinfo li { font-size: 16px; line-height: 2em }  .list_cap .ul_listinfo span { font-size: 16px; display: block; position: static }  ul.ul_indexlist { width: 100%; overflow: hidden }  ul.ul_indexlist h3 { margin: 40px 10px -20px; font-size: 24px; font-weight: 300 }  ul.ul_indexlist li { float: left }  .thumbox { margin: 0 10px }  .thumbox.thumb2 { margin-top: 40px }  .thumbox a { display: block; color: #333 }  .thumbox a:hover { color: #8cc63f }  .thumbox img { width: 100%; height: auto }  .thumbox h2 { overflow: hidden; height: 2.4em; margin-top: 8px; margin-bottom: 8px; font-size: 18px; font-weight: 500; line-height: 1.2em }  .thumbox p { font-size: 16px; font-weight: 100; line-height: 1.5em; color: #666 }  ul.ul_listinfo { margin-top: 20px; overflow: hidden }  ul.ul_listinfo li { float: left; width: auto; margin: 0 10px 0 0; padding: 0; font-size: 14px; line-height: 28px; color: #666 }  ul.ul_listinfo li span { display: inline-block; padding: 5px; font-size: 14px; color: #fff; line-height: 1.5em; background: #547726 }  .nav_guide { padding: 10px 0; color: #666; font-size: 13px; font-weight: 100 }  .nav_guide a { color: #666 }  .nav_guide a:hover { color: #8cc63f }  .bigbox { margin: 0 10px 40px; display: -webkit-flex; display: flex; flex-direction: row }  .bigimg { -webkit-flex: 1; flex: 1 }  .bigimg img { width: 100%; height: auto }  .bigtxt { -webkit-flex: 1; flex: 1 }  .bigtxt h2 { font-size: 32px; font-weight: 300; margin-bottom: 20px }  .bigtxt p { margin-bottom: 20px; font-size: 22px; line-height: 1.5em; display: block }  .bigtxt h2 a { color: #333 }  .bigtxt h2 a:hover { color: #8cc63f }  .btxt { margin-left: 30px }  .btxt ul.ul_listinfo li { float: left; width: auto; margin: 0 10px 0 0; padding: 0; font-size: 18px; line-height: 34px; color: #666 }  .btxt ul.ul_listinfo li span { display: inline-block; padding: 5px; font-size: 18px; color: #fff; line-height: 1.5em; background: #547726 }  .pageguide { width: 204px; margin: 40px auto 0; text-align: center }  .pageguide p { font-size: 15px; text-align: center }  ul.ul_page { height: 30px; margin: 0; padding: 0; overflow: hidden }  ul.ul_page li { float: left; border: 1px solid #ccc; border-left: 0 }  ul.ul_page li:first-child { border-left: 1px solid #ccc }  ul.ul_page li:first-child a, ul.ul_page li:last-child a { width: 28px; height: 28px; display: block; font-size: 24px; line-height: 22px; color: #333 }  ul.ul_page li:first-child a:hover, ul.ul_page li:last-child a:hover { color: #8cc63f }  .pageguide select { float: left; width: 144px; height: 28px; border: 0 }  ul.ul_page2 { margin-top: 40px; overflow: hidden; clear: both }  ul.ul_page2 li { float: left; width: 50% }  ul.ul_page2 li:last-child .page2box a h3 { text-align: right !important }  .page2box { margin: 0 10px; background: #f2f2f2 }  .page2box a { display: block; color: #666 }  .page2box a:hover { display: block; color: #8cc63f }  .page2box a h3, .page2box a:hover h3 { color: #333 }  .page2 { padding: 20px; overflow: hidden }  .page2 h3 { margin-bottom: 20px; padding-bottom: 20px; font-size: 24px; font-weight: 400; line-height: 1em; border-bottom: 2px solid #8cc63f }  .page2_imgtxt { display: flex; display: -webkit-flex }  .page2_img01 { flex-basis: 26%; -webkit-flex-basis: 26% }  .page2_txt01 { flex-basis: 74%; -webkit-flex-flex-basis: 74% }  .page2_txt01 p { margin-left: 20px; font-size: 18px; line-height: 1.2em }  .page2_img02 { flex-basis: 26%; -webkit-flex-basis: 26% }  .page2_txt02 { flex-basis: 74%; -webkit-flex-flex-basis: 74% }  .page2_txt02 p { margin-right: 20px; font-size: 18px; line-height: 1.2em; text-align: right }  .guestbox { margin: 0 10px }  .guest_cap { margin-top: 40px; padding: 10px; font-size: 16px; color: #547726; background: #eee }  .guestbox textarea { width: 100%; height: 80px; margin: 15px 0 0; border: 1px solid #a9a9a9; border-radius: 0; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-appearance: none }  .guestbox input { margin-top: 12px; padding: 10px 40px; font-family: 'Noto Serif TC',sans-serif; font-size: 18px; font-size: 300; background: #fff; border: 1px solid #ccc; border-radius: 0; display: block; cursor: pointer; -webkit-appearance: none }  ul.ul_gb { margin-top: 30px; border-top: 1px dashed #ccc }  ul.ul_gb li { padding: 10px 0; font-size: 15px; border-bottom: 1px dashed #ccc; overflow: hidden }  ul.ul_gb li p { margin-top: 40px; line-height: 1.5em; display: block; clear: both }  .gb_img { float: left; width: 30px; height: 30px }  .gb_img img { width: 100%; height: auto }  .gb_info { float: left; margin-left: 10px; line-height: 2em }  .article_img img { width: 100% }  .article_txt { padding: 40px 50px 0 120px; word-wrap: break-word; max-width: 800px }  .article_txt p, .article_txt table, .article_txt ul, .article_txt li, .article_txt ol, .article_txt div { margin-bottom: 2em }  .article_txt blockquote { color: #333; font-style: italic; margin: 10px 0 50px; padding: 30px 20px 1px; background-color: #eaeaea }  .article_txt a:link { color: #00f; text-decoration: none; font-weight: 700 }  .article_txt a:visited { color: #00f; text-decoration: none }  .article_txt a:hover { color: #f63; position: relative; top: 1px; left: 1px }  .article_txt ul { display: block; list-style-type: disc; padding-left: 40px }  .article_txt ul li { list-style-type: disc; margin-bottom: .5em; letter-spacing: 1px }  .article_txt ol li { list-style-type: decimal; margin-bottom: .5em; letter-spacing: 1px }  .article_txt h1 { font-size: 1.5em; padding: 10px 0; color: #547726; line-height: 1.1em }  .article_txt h2 { font-size: 1.3em; padding: 5px 0; color: #b22222; line-height: 1.1em }  .article_note { font-size: .7em; color: #666 }  .sharebox { margin-top: 40px; border-top: 1px dotted #666; border-bottom: 1px dotted #666; padding: 14px 0; overflow: hidden }  ul.ul_share li { float: left; margin-right: 8px; font-size: 18px; font-weight: 300; line-height: 1.8em }  ul.ul_share li a { color: #333 }  ul.ul_share li img { max-width: 100%; height: auto; vertical-align: bottom }  ul.ul_share li:nth-child(3), ul.ul_share li:nth-child(4), ul.ul_share li:nth-child(5) { width: 40px; height: 40px }  ul.ul_share li:nth-child(7) { margin-top: 2px }  ul.ul_share li:last-child { float: right; padding-left: 26px; background: url(../img/icon-back.png) 0 8px no-repeat; background-size: auto 50% }  .relatedbox { margin-top: 40px; padding: 12px 20px; background: #f2f2f2 }  .relatedbox h2 { margin: 0; padding: 0; font-size: 24px; font-weight: 300 }  ul.ul_related { margin-top: 9px }  ul.ul_related li { margin-left: 30px; font-size: 18px; font-weight: 300; line-height: 1.7em; list-style: disc }  ul.ul_related li a { color: #547726 }  ul.ul_related li a:hover { color: #8cc63f }  .iframe-rwd { position: relative; height: 0; overflow: hidden }  .iframe-rwd iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100% }  .right { width: 298px; margin: 40px 10px 0 }  .right_cap { padding: 10px; font-size: 16px; color: #547726; background: #eee }  ul.ul_right01 li, ul.ul_right02 li { padding: 20px 0; overflow: hidden; border-bottom: 1px dashed #ccc }  .rightimgbox { float: left; width: 76px; height: 76px; margin-right: 10px; background: #8cc63f; position: relative }  .rightimgbox span { width: 76px; height: 76px; color: #fff; font-size: 50px; line-height: 70px; font-weight: 700; text-align: center; position: absolute }  ul.ul_right01 li h2 { height: 2.5em; margin: 0 0 5px; padding: 0; font-size: 18px; line-height: 1.2em; font-weight: 400; color: #000 }  ul.ul_right01 li p { float: left; margin: 0; padding: 6px 8px; line-height: 1em; font-size: 14px; color: #fff; background: #547726; display: inline-block }  ul.ul_right02 li h2 { height: 2.5em; margin: 0 0 5px; padding: 0; font-size: 15px; line-height: 1.2em; font-weight: 300; color: #000; overflow: hidden }  ul.ul_right02 li p { margin: 0; padding: 0; line-height: 1.4em; font-size: 13px }  ul.ul_right01 li a, ul.ul_right02 li a { color: #333; display: block }  ul.ul_right01 li a h2, ul.ul_right02 li a h2 { color: #000 }  ul.ul_right01 li a:hover h2, ul.ul_right02 li a:hover h2 { color: #8cc63f }  footer { margin-top: 40px; padding: 40px 0; background: #343434; clear: both }  ul.ul_footer { max-width: 1640px; margin: 0 auto; overflow: hidden }  ul.ul_footer li { float: left }  .fbox { margin: 0 20px; font-size: 14px; font-weight: 100; line-height: 1.6em; color: #fff; overflow: hidden }  .fbox h3 { margin-bottom: 18px; padding-bottom: 10px; font-size: 24px; font-weight: 300; border-bottom: 3px solid #8cc63f }  .fbox a { color: #fff }  .fbox a:hover { color: #8cc63f }  .fbox p { margin: 0; padding: 0; line-height: 1.6em }  .fbox b { font-weight: 300 }  .f_flex { display: -webkit-flex; display: flex }  .img_footer { max-width: 79px; margin-right: 20px }  .img_footer img { max-width: 79px }  .txt_footer { -webkit-flex: 1; flex: 1; text-align: justify }  .socialbox { width: 208px; overflow: hidden }  .socialbox div { float: left; margin-right: 10px }  .socialbox div.s_email a { width: 42px; height: 42px; background: #191919 url(../img/pic-social.png) 0 0 no-repeat; background-size: auto 100%; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; display: inline-block; text-indent: -9999px }  .socialbox div.s_email a:hover { width: 42px; height: 42px; background: #8cc63f url(../img/pic-social.png) 0 0 no-repeat; background-size: auto 100% }  .socialbox div.s_fb a { width: 42px; height: 42px; background: #191919 url(../img/pic-social.png) -42px 0 no-repeat; background-size: auto 100%; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; display: inline-block; text-indent: -9999px }  .socialbox div.s_fb a:hover { width: 42px; height: 42px; background: #8cc63f url(../img/pic-social.png) -42px 0 no-repeat; background-size: auto 100% }  .socialbox div.s_google a { width: 42px; height: 42px; background: #191919 url(../img/pic-social.png) -84px 0 no-repeat; background-size: auto 100%; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; display: inline-block; text-indent: -9999px }  .socialbox div.s_google a:hover { width: 42px; height: 42px; background: #8cc63f url(../img/pic-social.png) -84px 0 no-repeat; background-size: auto 100% }  .socialbox div.s_line a { width: 42px; height: 42px; background: #191919 url(../img/pic-social.png) -126px 0 no-repeat; background-size: auto 100%; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; display: inline-block; text-indent: -9999px }  .socialbox div.s_line a:hover { width: 42px; height: 42px; background: #8cc63f url(../img/pic-social.png) -126px 0 no-repeat; background-size: auto 100% }  .web_symble { font-family: EntypoRegular; font-size: 1.5em }  .copyright { padding: 15px 0; background: #121212; color: #fff; font-size: 12px; font-weight: 100 }  .copyright a { color: #fff }  .copyright a:hover { color: #8cc63f }  ul.ul_copyright { margin: 0 auto; overflow: hidden }  ul.ul_copyright li:first-child { float: right }  ul.ul_copyright li:last-child { float: left }  .cd-top { display: inline-block; height: 40px; width: 40px; position: fixed; bottom: 40px; border-radius: 40px; right: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.05); overflow: hidden; text-indent: 100%; white-space: nowrap; background: rgba(140,198,63,.95) url(../img/cd-top-arrow.png) no-repeat center 50%; background-size: auto 100%; visibility: hidden; opacity: 0; -webkit-transition: opacity .3s 0s,visibility 0 .3s; -moz-transition: opacity .3s 0s,visibility 0 .3s; transition: opacity .3s 0s,visibility 0 .3s }  .cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover { -webkit-transition: opacity .3s 0s,visibility 0 0; -moz-transition: opacity .3s 0s,visibility 0 0; transition: opacity .3s 0s,visibility 0 0 }  .cd-top.cd-is-visible { visibility: visible; opacity: 1 }  .cd-top.cd-fade-out { opacity: .95 }  .no-touch .cd-top:hover { background-color: #e86256; opacity: 1 }  @media only screen and (min-width:768px) { .cd-top { right: 20px; bottom: 20px } }  @media only screen and (min-width:1024px) { .cd-top { height: 60px; width: 60px; right: 30px; bottom: 30px } }  .fadeandscale { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8) }  .popup_visible .fadeandscale { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1) }  .popupbox { width: auto; min-height: 131px; margin: 20px; padding: 30px; background: #fff; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; position: relative }  .popup_close { width: 22px; height: 22px; background: url(../img/cross.png) center center no-repeat; background-size: auto 100%; border: 0; text-indent: -9999px; cursor: pointer; position: absolute; top: 10px; right: 10px }  .searchbox { width: 650px; margin: 31px auto 0; position: relative }  input.input_search { width: 100%; font-family: 'Noto Serif TC',sans-serif; font-size: 54px; font-weight: 300; border: 0; border-radius: 0; border-bottom: 5px solid #8cc63f; text-align: center; -webkit-appearance: normal; box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box; position: absolute; left: 0 }  .input_submit { width: 50px; height: 50px; margin: 17px 0 0; padding: 0; border: 0; text-indent: -9999px; background: url(../img/icon-search2.png) center center no-repeat; background-size: auto 100%; cursor: pointer; position: absolute; right: 0; top: 0; -webkit-appearance: normal }  #fadeandscale_menu_background { transition: all .3s .3s }  #fadeandscale_menu, #fadeandscale_menu_wrapper { transition: all .3s ease-out }  #fadeandscale_menu { transform: translateX(0) translateY(-40%) }  .popup_visible #fadeandscale_menu { transform: translateX(0) translateY(0) }  .menubox { width: 1200px; margin: 0 auto; overflow: hidden }  .menubox a { color: #333 }  .menubox a:hover { color: #8cc63f }  ul.ul_overlay_member { margin: 20px; padding: 0 0 10px; border-bottom: 1px dashed #ccc; list-style: none; overflow: hidden }  ul.ul_overlay_member li { float: left; border: 0 }  ul.ul_overlay_member li.member { padding: 0 0 0 20px; background: url(../img/icon-member2.png) 0 9px no-repeat; background-size: auto 15px }  ul.ul_overlay_member span { float: right }  .menu_l { float: left; width: 240px; margin: 0 20px 20px }  .menu_r { float: left; width: calc(100% - 280px) }  a .menu { padding: 5px 0; border-bottom: 3px solid #8cc63f }  ul.ul_menu { margin: 0; padding: 0; list-style: none; overflow: hidden }  ul.ul_menu li { float: left; width: 33.3333% }  .menu_r_box { margin: 0 20px 40px }  .menu_r_box h3 { padding-bottom: 7px; font-size: 22px; font-weight: 300; color: #8cc63f; text-align: center; border-bottom: 3px solid #ccc }  .menu_r_box p { margin-top: 8px; line-height: 1.2em }  .row { overflow: hidden }  .menu_info { width: auto; margin: 0 20px; padding: 5px 0 6px; border-bottom: 1px dashed #ccc; display: block; overflow: hidden }  .menu_info p { float: left; margin-right: 20px; font-size: 15px; line-height: 1.5em; display: block }  .menu_info a { color: #333 }  .menu_info a:hover { color: #8cc63f }  @keyframes fadeInScale { 0% { transform: scale(0.9); opacity: 0 }  100% { transform: scale(1); opacity: 1 } }  .video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden }  .video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100% }
