@charset "big5";
/* CSS Document */
body {margin: 0; background:#01bab4;}
h1 {margin: 0; padding: 0; height: 0; text-indent: 100%; white-space: nowrap; overflow: hidden; _display: none;}
.main {width:980px; margin:auto; padding:0px 15px; background:white;}
.main a img {border: none;}
#menu {display: flex; padding-top: 10px; gap: 0.2rem;}

.top-normal {height: 400px; background: url(../images/top3.jpg) center top round; margin-top:40px; background-position: unset;}
.top-mobile {display: none; padding-top: 40px; background-position: center top;}
.top-mobile img {display: block; width: 100%;}

.container {margin: 0 auto; width: 980px; /*background: url(../images/top_02.gif) center top no-repeat;*/ position: relative;}
.article {width: 530px; float: left; margin-top: 0;}
.aside {width: 440px; float: right; padding-bottom: 10px; margin-top: 0;}
.footer {height: 10px; clear: both;}
.center-line {width: 1px; height: 100%; background-color: #006458; position: absolute; top: 0; left: 540px; _display: none;}

.title img {display: block; margin: auto; width: 100%; max-width: 420px; _width: 420px;}
.section {margin: 10px 0; clear: both;}
.section-hk {margin-bottom: 0; background-image: url(../images/hk-bg.jpg); color: #fff; background-size: contain; border-radius: 5px;}
.section h2 {margin-bottom: 10px;; padding: 2px 8px; background-color: #006458; color: #ffffff; font-size: 18px; line-height: 21px; letter-spacing: 1px; border-radius: 5px;}
.section h2 small {font-size: 10px; font-weight: normal; letter-spacing: 0;}
.section p {padding: 5px; font-size: 13px; line-height: 20px; letter-spacing: 1px; text-align: justify;}
.section .section-content {display: flex; gap: 1rem;}
.section .section-content-hk {text-align: center; padding: 1rem .5rem;}
.section .section-content-hk p, .section .section-content-hk ul {padding: 5px; font-size: 13px; line-height: 20px; letter-spacing: 1px; text-align: center;}
.section .section-content-hk .link a {background-color: #ad00bc; color: #fff; padding: 4px 4px 4px 10px; font-size: 1rem; font-weight: bolder; border-radius: 15px 0 0 15px;}
.section .section-content-hk a{color: #fff;}
.section .figure {/*width: 120px;*/ width:180px; height: 160px; position: relative;}
.section .figure img {display: block; border-radius: 5px;}
.section .text {text-align: justify;}
.section:nth-child(odd) .section-content {flex-direction: row-reverse;}

.intext{text-align: left; font-size: 10pt;}

.dc {color: #ffffff; font-size: 12px; position: absolute; bottom: 0; right: 5px;}
.link {padding: 15px 10px; text-align: right; clear: both;}
.link-btn {color: #006458; padding: 10px 0; border-radius: 5px; font-size: 15px; width: 100%; text-align: center; border: 1px solid #006458; cursor: pointer; display: flex; margin: 0; align-items: center; justify-content: center;}
.link-btn.current, .link-btn:hover {font-size: 15px; background-color: #006458; color: #fff;}

.hotline {width: 94%; height: 1px; margin: 0px auto; background: url(../images/line.gif) center bottom repeat-x;}
.tag {border-radius: 5px; margin: 1rem auto; width: fit-content; padding: 0.5rem 1rem !important; background-color: #fec956; color: #d02c3d; font-weight: bolder;}
.notice {display: flex; align-items: center; border-radius: 5px; padding: .5rem; text-align: justify; background-color: #0003; margin: 2rem 0;}
.notice p {width: 10%;}
.kaohsiung:target { padding-top: 40px; margin-top: -40px;}
.kaohsiung:target {padding-top: 40px;}

.prod-menu {text-align: center; padding-top: 10px;}
.prod-menu a {display: inline-block; position: relative; width: 32%; height: 4rem; max-width: 130px; *display: block; *float: left;}
.prod-menu a img {width: 100%; height: 100%; object-fit: cover;}
.prod-menu a img.hover {position: absolute; top: 0; left: 0; visibility: hidden;}
.prod-menu a.current img, .prod-menu a:hover img {visibility: hidden;}
.prod-menu a.current img.hover, .prod-menu a:hover img.hover {visibility: visible;}
.prod-menu-sub {text-align: center;}
.prod-menu-sub a {display: inline-block; margin: 0 3%; padding: 3px 12px; background-color: #ffffff; color: #ff0000; font-size: 16px; letter-spacing: 2px; text-indent: 2px; font-weight: bold; font-family: '�L�n������'; border: solid 1px #ff0000; border-radius: 50%;}
.prod-menu-sub a:hover, .prod-menu-sub a.current {background-color: #ff0000; color: #ffffff;}
.prod {margin-top: 10px; clear: both;}

.circle-group {display: flex;}
.circle-group .circle-outter {border-radius: 50%; background-color: #006458; color: #fff; border: 12px double #fff; width: 9rem; height: 9rem; font-weight: bolder;}
.circle-group .circle-outter .circle-inner {display: flex; flex-direction: column; width: 75%; height: 100%; align-items: center; justify-content: center;}
.circle-group .circle-outter .circle-inner img {width: 3rem; height: 3rem; margin: 0;}


/* å»????*/
#slider-wrapper {width: auto; margin: 1rem auto; padding-bottom: 1.5rem; position: relative; margin-bottom: 0px; background: #fff; overflow: hidden;}
#s1 {padding: 6px; background: #000; position: absolute; left: 50%; bottom: .2rem; margin-left: -36px; border-radius: 20px; opacity: 0.3; cursor: pointer; z-index: 999;}
#s2 {padding: 6px; background: #000; position: absolute; left: 50%; bottom: .2rem; margin-left: -12px; border-radius: 20px; opacity: 0.3; cursor: pointer; z-index: 999;}
#s3 {padding: 6px; background: #000; position: absolute; left: 50%; bottom: .2rem; margin-left: 12px; border-radius: 20px; opacity: 0.3; cursor: pointer; z-index: 999;}
#s4 {padding: 6px; background: #000; position: absolute; left: 50%; bottom: .2rem; margin-left: 36px; border-radius: 20px; opacity: 0.3; cursor: pointer; z-index: 999;}
#s1:hover, #s2:hover, #s3:hover, #s4:hover, #s5:hover, #s6:hover {opacity: .50;}
.inner-wrapper {width: -webkit-fill-available; height: 100%; margin-bottom: 0px; overflow: hidden; border-radius: 5px;}
.control {display: none;}
#Slide1:checked ~ .overflow-wrapper {margin-left: 0%;}
#Slide2:checked ~ .overflow-wrapper {margin-left: -100%;}
#Slide3:checked ~ .overflow-wrapper {margin-left: -200%;}
#Slide4:checked ~ .overflow-wrapper {margin-left: -300%;}
#Slide1:checked + #s1 {opacity: 1;}
#Slide2:checked + #s2 {opacity: 1;}
#Slide3:checked + #s3 {opacity: 1;}
#Slide4:checked + #s4 {opacity: 1;}
.overflow-wrapper {width: 400%;height: 100%;overflow-y: hidden;z-index: 1;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
.slide video {width: 25%;float: left;}


/* .ads {display: flex; width: 100%; margin: 5px; flex-wrap: wrap;} */
.card {margin:5px;}
.ad-title {font-size:20px; line-height:28px;}
.ad-text {font-size:16px; line-height:24px;}

.ads a:hover{box-shadow: 0px 0px 5px #888888;}