@charset "UTF-8";
.wpml-ls-menu-item .wpml-ls-flag{display:inline;vertical-align:baseline}.wpml-ls-menu-item .wpml-ls-flag+span{margin-left:.3em}.rtl .wpml-ls-menu-item .wpml-ls-flag+span{margin-left:0;margin-right:.3em}ul .wpml-ls-menu-item a{display:flex;align-items:center}

main.site-main {
width: 100%;
max-width: 100% !important;
}
main.site-main > div.the-banner {
height: 300px;
}
main.site-main > div.the-banner .the-banner-container-img{
position:relative;
display: flex;
display: flex;
align-items: center;
justify-content: center;
}
main.site-main > div.the-banner .the-banner-container-img:after{
content:"";
position:absolute;
top:0;
left:0;
background:rgba(0,0,0,0.35);
z-index:0;
width:100%;
height:100%;
}
main.site-main > div.the-banner .the-banner-container-img h1{
position:relative;
z-index:1;
color:#fff;
}
main.site-main > div.the-banner .the-banner-container-img,
main.site-main > div.the-banner .the-banner-container {
height: 100%;
width: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
main.site-main > div.download-container {
max-width: 1140px;
display: flex;
flex-direction: column;
margin: 0 auto;
padding: 60px 0;
}
main.site-main > div.download-container .form-container {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 36px;
}
main.site-main > div.download-container .form-container .form-container-h1 {
width: 300px;
}
main.site-main > div.download-container .form-container .form-container-h1 h1 {
color: #3a3a3a;
font-weight: 600;
font-family: "Noto Sans TC", Sans-serif !important;
margin: 0;
font-size: 30px;
}
main.site-main > div.download-container .form-container .form-container-form {
flex: 1;
display: flex;
width: 100%;
}
main.site-main > div.download-container .form-container .form-container-form form {
width: 100%;
margin: 0;
}
main.site-main > div.download-container .form-container .form-container-form form > div {
position: relative;
display: flex;
gap: 10px;
}
main.site-main > div.download-container .form-container .form-container-form form > div select {
width: 200px;
}
main.site-main > div.download-container .form-container .form-container-form form > div select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: 200px;
padding: 10px;
padding-right: 40px; font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
background: #efefef url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='black' d='M0 0l6 6 6-6z'/%3E%3C/svg%3E") no-repeat right 10px center;
background-size: 12px;
height: 45px;
border: 0;
font-family: "Noto Sans TC", Sans-serif !important;
outline: none;
padding: 0 16px;
}
main.site-main > div.download-container .form-container .form-container-form form > div .search-input {
position: relative;
width: 100%;
}
main.site-main > div.download-container .form-container .form-container-form form > div .search-input .search-input-list {
top: 45px;
left: 0;
position: absolute;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
width: 100%;
z-index:9999;
}
main.site-main > div.download-container .form-container .form-container-form form > div .search-input .search-input-list ol {
padding: 0;
margin: 0;
list-style: none;
width: 100%;
}
main.site-main > div.download-container .form-container .form-container-form form > div .search-input .search-input-list ol li {
padding: 8px 16px;
border-bottom: 1px solid #ccc;
background-color: #fff;
width: 100%;
cursor: pointer;
}
main.site-main > div.download-container .form-container .form-container-form form > div .search-input .search-input-list ol li:last-child {
border-bottom: 0;
}
main.site-main > div.download-container .form-container .form-container-form form > div .search-input .search-input-list ol li:hover {
background-color: #f0f0f0;
}
main.site-main > div.download-container .form-container .form-container-form form > div input {
background-color: #efefef;
height: 45px;
border: 0;
font-family: "Noto Sans TC", Sans-serif !important;
outline: none;
padding: 0 16px;
width: 100%;
}
main.site-main > div.download-container .form-container .form-container-form form > div button {
font-family: "Noto Sans TC", Sans-serif !important;
position: absolute;
right: 0;
border: 0;
color: gray;
height: 45px;
color: #004aa9;
background-color: transparent;
}
main.site-main > div.download-container .form-container .form-container-form form > div button:hover, main.site-main > div.download-container .form-container .form-container-form form > div button:focus, main.site-main > div.download-container .form-container .form-container-form form > div button:active {
background-color: #224da0;
color: #fff;
}
main.site-main > div.download-container .sources-container {
display: flex;
padding-top: 36px;
gap:24px;
}
main.site-main > div.download-container .sources-container .sources-category {
width: 300px;
display: flex;
gap:16px;
flex-direction: column;
}
main.site-main > div.download-container .sources-container .sources-category ol {
list-style: none;
padding: 0;
margin: 0;
gap: 24px;
display: flex;
flex-direction: column;
}
main.site-main > div.download-container .sources-container .sources-category ol li a {
color: #4e4b48;
font-size: 18px;
font-weight: 600 !important;
font-family: "Noto Sans TC", Sans-serif !important;
}
main.site-main > div.download-container .sources-container .sources-category ol li.active a {
color: #224da0 !important;
}
main.site-main > div.download-container .sources-container .sources-list {
flex: 1;
}
main.site-main > div.download-container .sources-container .sources-list ol {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 16px;
}
main.site-main > div.download-container .sources-container .sources-list ol li {
border:1px solid #eaeff5;
display: inline-flex;
gap: 16px;
flex-direction: column;
padding: 30px 12px;
}
main.site-main > div.download-container .sources-container .sources-list ol li.active a {
color: #224da0;
}
main.site-main > div.download-container .sources-container .sources-list ol li h2 {
margin: 0 !important;
}
main.site-main > div.download-container .sources-container .sources-list ol li img {
width: 18px;
height: 18px;
}
main.site-main > div.download-container .sources-container .sources-list ol li button{
background: transparent!important;
border: 1px solid #0170B9;
border-radius: 50px;
}
main.site-main > div.download-container .sources-container .sources-list ol li button:hover{
background: #0170B9!important;
}
main.site-main > div.download-container .sources-container .sources-list ol li button:hover a{
color: #fff !important;
}
main.site-main > div.download-container .sources-container .sources-list ol li a {
color: #0170B9 !important;
font-family: "Noto Sans TC", Sans-serif !important;
color: #4e4b48;
font-size: 16px;
font-weight: 400;
font-size: 16px;
}
.sources-line{
width: 1px;
height: 45px;
background: #ddd;	
}
select[name="products"],
select[name="products-child"]
{
width:100%;
}
#search-form{
display:flex;
flex-direction: column;
gap:8px;
}
#search-form [name="keyword"]{
width:100%;
}
#search-form button{
width:100%;
}
#search-form > div{
position:relative;
}
.search-input-list ol{
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
gap: 0px!important;
}
.search-input-list ol li{
padding: 5px 10px;
border-bottom: 1px solid #ccc;
font-size: 14px;
cursor: pointer;
}
.search-input-list ol li:hover{
background-color:#ddd;
}
#category-form-container > div:first-child,
#category-form2 > div:first-child
{
background:#0170B9;
padding: 8px;
color:#fff;
}
#category-form-container > div:last-child,
#category-form2 > div:last-child{
display: flex;
flex-direction: column;
gap: 8px;
padding: 16px;
border: 1px solid #ddd;
}
#category-form-container span,
#category-form2 span{
display: none;
}
#category-form-container .category-form-input{
position:relative;
}
#category-form-container .category-form-input .category-form-mask{
position:absolute;
top:0;
left:0;
z-index:100;
width:100%;
height:100%;
background:rgba(0,0,0,.5);
display: flex;
align-items: center;
justify-content: center;
}
#category-form-container .category-form-input .category-form-mask{
display:none;
}
#category-form-container .category-form-input .category-form-mask .loader1{
width: 12px;
height: 12px;
border-radius: 50%;
display: block;
margin:15px auto;
position: relative;
color: #FFF;
box-sizing: border-box;
animation: animloader 1s linear infinite alternate;
}
#category-form-container .category-form-input .category-form-mask .loader1,
#category-form-container .category-form-input .category-form-mask .loader1:before, 
#category-form-container .category-form-input .category-form-mask .loader1:after {
border-radius: 50%;
width: 2.5em;
height: 2.5em;
animation-fill-mode: both;
animation: bblFadInOut 1.8s infinite ease-in-out;
}
#category-form-container .category-form-input .category-form-mask .loader1 {
color: #FFF;
font-size: 7px;
position: relative;
text-indent: -9999em;
transform: translateZ(0);
animation-delay: -0.16s;
}
#category-form-container .category-form-input .category-form-mask .loader1:before,
#category-form-container .category-form-input .category-form-mask .loader1:after {
content: '';
position: absolute;
top: 0;
}
#category-form-container .category-form-input .category-form-mask .loader1:before {
left: -3.5em;
animation-delay: -0.32s;
}
#category-form-container .category-form-input .category-form-mask .loader1:after {
left: 3.5em;
}
@keyframes bblFadInOut {
0%, 80%, 100% { box-shadow: 0 2.5em 0 -1.3em }
40% { box-shadow: 0 2.5em 0 0 }
}
#category-form{
display: flex;
flex-direction: column;
gap: 8px;
}
#category-form-container .or{
position:relative;
padding:10px 0;
text-align:center;
}
#category-form-container .or::before{
content: '';
display: block;
width: calc(50% - 30px);
height: 1px;
background-color: #e0e0e0;
position: absolute;
top: 50%;
left: 0;
}
#category-form-container .or::after{
content: '';
display: block;
width: calc(50% - 30px);
height: 1px;
background-color: #e0e0e0;
position: absolute;
top: 50%;
right: 0;
}
#category-form button,
#category-form2 button
{
width:100%;	
}
.checkbox-wrapper-13{
display: flex;
align-items: center;
}	
form{
width:100%;
}
.source-item h3{
color: #131313;
font-weight: 400;
font-size: 16px;
}
.source-item .subtype{
margin:0;
display:flex;
gap:8px;
font-size: 16px;
}
.source-item .subtype li{
padding:0!important;
font-size: 16px;
border:none!important;
}
.source-item span{
color: #2c3e50;
font-weight: 400;
font-size: 16px;
}
.checkbox-wrapper-13 input[type=checkbox] {
--active: #0170B9;
--active-inner: #fff;
--focus: 2px rgba(39, 94, 254, .3);
--border: #BBC1E1;
--border-hover: #0170B9;
--background: #fff;
--disabled: #F6F8FF;
--disabled-inner: #E1E6F9;
-webkit-appearance: none;
-moz-appearance: none;
height: 21px;
outline: none;
display: inline-block;
vertical-align: top;
position: relative;
margin: 0;
cursor: pointer;
border: 1px solid var(--bc, var(--border));
background: var(--b, var(--background));
transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
}
.checkbox-wrapper-13 input[type=checkbox]:after {
content: "";
display: block;
left: 0;
top: 0;
position: absolute;
transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
}
.checkbox-wrapper-13 input[type=checkbox]:checked {
--b: var(--active);
--bc: var(--active);
--d-o: .3s;
--d-t: .6s;
--d-t-e: cubic-bezier(.2, .85, .32, 1.2);
}
.checkbox-wrapper-13 input[type=checkbox]:hover:not(:checked):not(:disabled) {
--bc: var(--border-hover);
}
.checkbox-wrapper-13 input[type=checkbox]:focus {
box-shadow: 0 0 0 var(--focus);
}
.checkbox-wrapper-13 input[type=checkbox]:not(.switch) {
width: 21px;
border-radius: 7px;
}
.checkbox-wrapper-13 input[type=checkbox]:not(.switch):after {
opacity: var(--o, 0);
width: 5px;
height: 9px;
border: 2px solid var(--active-inner);
border-top: 0;
border-left: 0;
left: 7px;
top: 4px;
transform: rotate(var(--r, 20deg));
}
.checkbox-wrapper-13 input[type=checkbox]:not(.switch):checked {
--o: 1;
--r: 43deg;
}
.checkbox-wrapper-13 input[type=checkbox] + label {
display: inline-block;
vertical-align: middle;
cursor: pointer;
margin-left: 4px;
}
main.site-main > div.download-container .pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
padding-top: 36px;
}
main.site-main > div.download-container .pagination a {
color: #4e4b48;
}
main.site-main > div.download-container .pagination .next.page-numbers,
main.site-main > div.download-container .pagination .prev.page-numbers {
height: 24px;
} .pagination {
display: flex;
justify-content: center;
gap: 8px;
padding: 1em 0;
font-family: system-ui, sans-serif;
}
.pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
font-size: 14px;
border-radius: 6px;
text-decoration: none;
background-color: #f0f0f0;
color: #333;
transition: all 0.2s ease;
padding: 10px;
}
.pagination .page-numbers:not(.current):hover {
background-color: #ddd;
}
.pagination .current {
background-color: #007bff;
color: white;
font-weight: bold;
cursor: default;
}
.pagination .dots{
background: transparent!important;	
}
.pagination .next,
.pagination .prev{
background: transparent!important;	
}
.pagination .next svg {
width: 20px;
height: 20px;
}
@media (max-width: 768px) {
main.site-main>div.the-banner{
height: 200px;
}
main.site-main > div.download-container .sources-container{
flex-direction: column;
}
main.site-main > div.download-container .sources-container .sources-category{
width: 100%;
}
main.site-main > div.download-container{
padding: 16px 24px 60px 16px;
}
#category-form-container > div:first-child, #category-form2 > div:first-child{
justify-content: space-between;
display: flex;
}
#category-form-container span,#category-form2 span{
display:block;
}
#category-form-container > div:last-child, #category-form2 > div:last-child{
display: none;
}
}