/* HTML Set up */
footer { background:#f3f3f3; margin: 0; padding:0; }
footer .centered { width: 100%; margin: 0 auto; padding-top: 30px; display: flex; flex-direction: row; flex-wrap: wrap;   justify-content: space-between;}
footer .footer-contact { width: 100%; height: auto; min-height:100px;  margin: 0 auto; display: block;  }
footer .centered .footer-navigation {     max-width: 1400px; padding: 75px 20px; margin: 0 auto;  overflow: hidden;  position: relative;  display: flex; } 
footer .bottom-bar {  width: 100%;   max-width: 1400px;  display:block; margin:2% auto; padding:2em 0; border-top:solid 1px rgba(255,255,255,.5); font-size: .8em; font-weight: 300; text-align:center;  }


.footer-links-holder { margin: 0 1%; position: relative; width: 31%; border-right: solid 4px #fff;  padding: 0 15px; display: inline-block; vertical-align: top; text-align: center}
.footer-links-holder:nth-child(3) { border: none!important; }

.footer-links { margin: 0; padding: 0; width: 100%; display: block; list-style: none; -webkit-transition: max-height .5s; transition: max-height .5s; }
.footer-links { vertical-align: top; }
.footer-links.half li { width: 45%; display: inline-block; vertical-align: top; }
.footer-links-holder p { font-size: .5em; }
.footer-links-holder .share img{ margin: 20px; width: 60%;}
/*.footer-links-holder .TikTok { text-align: right}
.footer-links-holder .Wechat { text-align: left}
.footer-links-holder .Wechat img{ margin: 20px 20px 20px 0px}*/

.row-left{ width: 60%;  display:inline-block; text-align: left; }
.row-left div{width: 100%;display: block; margin: 10px 0;}
.row-left div a{padding:6px; font-size: 1rem; display: inline-block;}
/* .row-left div a:after {  content: ''; width: 2px; height: 10px; margin: 0 18px 0 26px; background-color: #e5e5e5; display: inline-block;} */
.row-right{ width: 38%; text-align: right;  text-transform: uppercase; display:inline-block; align-items: center; }
.row-right a{ padding:0px 3px; } 
.row-right a img{ width: 140px;   margin-left: 10px; float: right;  } 
.row-right a div { width: 100%; display: block; }
.row-right a div h2 { font-size: 1rem; font-weight: 700; color: #005bac; margin-bottom: 4px;}
.row-right a div p {  font-size: 0.875rem; font-weight: 500; color: #464a4e; text-align: right;  }  

/* Typography */ 
footer h3 { font-size: 1.25rem; text-align: left;  min-height: 65px; }
footer h3 a { color: #1168b2;   font-weight: 700; }
footer p, footer li { margin: 5px 0; font-weight:400; font-size: .9rem;   color: #666; text-align:left; }
footer a { color: #555;  font-weight:300;   text-decoration: none; -webkit-transition: color .5s, background .5s; transition: color .5s, background .5s; }
footer a:hover { color: #7a1623; }
.footer-contact ul { width: 100%; max-width: 1100px; margin: 0 auto; display: block; }
ul.footer-links li { width: 100%; display: inline-block; margin:1% auto;font-size: 0.875rem; vertical-align: top;   line-height:150%;    letter-spacing: 0.05em; color: #000; }
.footer-links-holder:nth-child(3) ul.footer-links li { width: 100%; display: block;}
.footer-links li.tel { background: url(../images/icon/icon-tel-01.svg) no-repeat left top;background-size:20px; padding-left: 30px; }
.footer-links li.fax { background: url(../images/icon/icon-fax.svg) no-repeat left top;background-size:20px; padding-left: 30px; }
.footer-links li.add { background: url(../images/icon/location.svg) no-repeat left top; background-size:20px;padding-left: 30px; }
.footer-links li.mail { background: url(../images/icon/icon-mail.svg) no-repeat 2px top; background-size:20px;padding-left: 30px; }
.clearfix:before, .clearfix:after { content: '\0020'; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; clear: both; }
/*.social-icons li.facebook a, .social-icons li.line a, .social-icons li.youtube a, .social-icons li.instagram a, .cd-top { background-image: url(../images/icon/iconset.svg); background-color: transparent; background-repeat: no-repeat; }
*/
.social-icons { margin: 0px; display: block; color:#666; }
.social-icons li { display: inline-block; margin: 10px 5px 0px 5px; padding: 0; width: auto; }
.social-icons li a { display: inline-block; width:24px; height: 18px; margin: 0; padding: 0; text-indent: -9999px; transition: all 0.3s ease 0s;  }
.social-icons li a:hover { background-position: center -25px; }
.social-icons li a { background-color: transparent; }
.social-icons li a:hover { background-color: transparent;  }
.social-icons li.facebook a { background: url(../images/icon/fb.svg)  no-repeat  center top;   }
.social-icons li.facebook a:hover { opacity:.5; }
.social-icons li.yt a {  background: url(../images/icon/icon-yt.svg)  no-repeat left;  }
.social-icons li.yt a:hover { opacity:.5; }
.social-icons li.youtube a { background-position: -822px -10px;  }
.social-icons li.youtube a:hover { background-color: #C00; }
.social-icons li.instagram a { background: url(../images/icon/instagram.svg)  no-repeat left top; }
.social-icons li.instagram a:hover {  opacity:.5;  }
.cd-top { display: inline-block; position: fixed; z-index: 9999; bottom: 40px; right: 10px; height: 40px; width: 40px; overflow: hidden; text-indent: 100%; white-space: nowrap; background: url(../images/icon/iconset.svg) no-repeat -530px -56px #000; visibility: hidden; opacity: 0; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); -moz-border-radius: 5%; -webkit-border-radius: 5%; border-radius: 5%; -webkit-transition: opacity .3s 0s, visibility 0s .3s; -moz-transition: opacity .3s 0s, visibility 0s .3s; transition: opacity .3s 0s, visibility 0s .3s; }
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover { -webkit-transition: opacity .3s 0s, visibility 0s 0s; -moz-transition: opacity .3s 0s, visibility 0s 0s; transition: opacity .3s 0s, visibility 0s 0s; }
.cd-top.cd-is-visible { visibility: visible; opacity: 1; }
.cd-top.cd-fade-out { opacity: .8; }
.no-touch .cd-top:hover { background-color: #2b70b8; opacity: 1; }

/*history-area start */
.history-area { position: fixed; right:0px; top: 20%; width: 100px; z-index: 9999;}
.history-area  > ul { padding: 0; margin: 0; list-style: none;}
.history-area  li { position: relative; text-align: center;}
li.history ul li:hover .img { border: 1px solid #BBBDB8; box-shadow: 4px 4px 10px rgba(170, 170, 185, 0.5);}
.history-area  a { color: #000; display: block; padding: 8px 0px; text-decoration: none; font-size: 15px;}
li.history { position: relative; margin: 5px; border-radius: 8px 8px 0 0; border: 1px solid #DFDFDF; padding: 10px 0 0; font-weight: 700; color: #00a596; background: #fff;}
li.history .Button{ position: absolute; left: calc(50% - 5px); top: 6px; width: 0; height: 0px; border-style: solid; border-width: 0px 5px 10px 5px; border-color: transparent transparent #ffffff transparent;}
li.history .Button.active { width: 0; height: 0; border-style: solid; border-width: 10px 5px 0 5px; border-color: #ffffff transparent transparent transparent;}
.history_c.active { display: none; }
a#btn_close { position: relative; padding: 0; margin-top: 10px; display: block; height: 20px; background: #00a596;}
li.history ul li { width: 70%; margin:auto; padding:5px 0px;}
li.history > ul { margin: 10px 0; }
li.history ul li a { position: absolute; width: 100%; height: 100%; left: 0; right: 0; z-index: 100; cursor: pointer;}
li.history .title { width: 100%;   white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-size: 12px;}
li.history ul li .img { position: relative; border: 1px solid #bfbfbf; padding: 1px; width: 60px; overflow: hidden;}
li.history ul li .img img { max-width: 100%;  height: auto;}
li .social-link {  float: right; display: block; cursor: pointer; width: 42px;  height: 42px;   border-radius: 50%;}
li .social-link .nav-label { display: block; height:30px; position: absolute;  padding: 0 10px; top:5px; right:35px; line-height: 1.75rem;font-size: .9rem; font-weight: 700; color: white; white-space: nowrap;   -moz-transition: -moz-transform 0.4s ease; -o-transition: -o-transform 0.4s ease;  -webkit-transition: -webkit-transform 0.4s ease;  transition: transform 0.4s ease;  -moz-transform-origin: right 50%;   -ms-transform-origin: right 50%;  -webkit-transform-origin: right 50%;  transform-origin: right 50%;  -moz-transform: rotateY(90deg);  -webkit-transform: rotateY(90deg);  transform: rotateY(90deg);  -webkit-border-top-left-radius: 40px; -webkit-border-bottom-left-radius: 40px; -moz-border-radius-topleft: 40px;-moz-border-radius-bottomleft: 40px; border-top-left-radius: 40px; border-bottom-left-radius: 40px;
}
li .social-link .nav-label span {  -moz-transform-origin: right 50%;  -ms-transform-origin: right 50%;  -webkit-transform-origin: right 50%;  transform-origin: left 50%;  -moz-transform: rotateY(90deg); -webkit-transform: rotateY(90deg);  transform: rotateY(90deg);}
li .social-link:hover .nav-label, li .social-link:hover .nav-label span {  -moz-transform: rotateY(0);    -webkit-transform: rotateY(0);  transform: rotateY(0);}
/* li .social-link,li .social-link:hover { background: #0084ff  url(../images/icon/messenger.svg) 50% 50% no-repeat; background-size: 40px auto;} */
li .social-link .nav-label {  -moz-transition: background 0.4s ease, -moz-transform 0.4s ease 0.1s;  -o-transition: background 0.4s ease, -o-transform 0.4s ease 0.1s;  -webkit-transition: background 0.4s ease, -webkit-transform 0.4s ease; -webkit-transition-delay: 0s, 0.1s;  transition: background 0.4s ease, transform 0.4s ease 0.1s;  background: #1e2e4f; }
li .social-link:hover .nav-label {  -moz-transition: -moz-transform 0.4s ease, background 0.4s ease 0.1s;  -o-transition: -o-transform 0.4s ease, background 0.4s ease 0.1s;  -webkit-transition: -webkit-transform 0.4s ease, background 0.4s ease;-webkit-transition-delay: 0s, 0.1s;  transition: transform 0.4s ease, background 0.4s ease 0.1s;  background: #0084ff;}
/*history-area end */

/* Responsive Tablet Sizes */
@media only screen and (max-width:1024px) {
footer .centered { flex-wrap: wrap; }
footer .centered .footer-navigation { width: 100%; }
footer .centered .footer-navigation .footer-links-holder { padding: 0px; }
}
/* Responsive Mobile Sizes */
@media only screen and (max-width: 999px) {
footer .centered .footer-navigation { padding: 10px; display: block;}	    
.footer-logo { margin-top: 20px; background-size: 80% auto; }
.footer-links-holder { width: 100%!important; display: block!important;   padding: 0; border-right: none!important; border-bottom: solid 1px rgba(102,102,102,.2); }
.footer-links-holder h3 { font-size:.9rem;min-height:50px;  margin: 0; padding:10px 5px; box-shadow: 0px 1px rgba(255,255,255,.1); cursor: pointer;/* Down Arrows */ }
.footer-links-holder h3::after { float: right; margin-right: 10px; content: ""; display: inline-block; vertical-align: middle; margin-top: 0px; width: 10px; height: 10px; border-top: 2px solid #333; border-right: 2px solid #333; -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -webkit-transform: rotate(135deg); transform: rotate(135deg); -webkit-transition: transform .5s; transition: transform .5s; }
.footer-links { max-height: 0; overflow: hidden; padding:0px 10px;  }
.footer-links-holder .share{ max-height: 0; overflow: hidden; padding:0px 10px;; line-height: 0px;font-size: 0px}    
.footer-links-holder.active h3::after { -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
.footer-links-holder.active .footer-links { max-height: 10000px; }
.footer-links-holder.active .share { max-height: 10000px; }
.footer-links-holder .TikTok { text-align: center}
.footer-links-holder .Wechat { text-align: center}
.footer-links-holder .Wechat img{ margin: 20px}    
    
.row-right,.row-left,.row-left p{ width: 100%;  display:block; margin: auto; text-align: center; }
/* .row-left div,.row-right a div{display: none;}	 */
.row-right a img{ width: 140px;float: none;  display: block; margin: auto; text-align: center;} 
    

}
@media only screen and (min-width: 1240px) {
.number{width: 100%;display: flex;}
}


.hotNews {position: fixed; left: 0; top: 50%; z-index: 999; height: auto; width: 100%; max-width: 502px; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; -moz-transform:translateY(-50%); -webkit-transform:translateY(-50%); -o-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%); transition: all 0.5s ease 0s;}
.hotNewsH {left: -472px; transition: all 0.5s ease 0s;}
.hotNewsC {width: calc(100% - 35px); border-right: 15px solid #005bac; background-color: #fff; padding: 20px; box-shadow: 3px 3px 10px rgb(0 0 0 / 50%); font-family:'Microsoft JhengHei', sans-serif;}
.hotNewsC a:link, .hotNewsC a:visited {text-decoration:underline; color:#005bac; transition: all 0.5s ease 0s;}
.hotNewsC a:active, .hotNewsC a:hover {text-decoration:underline; color:#000; cursor:pointer; transition: all 0.5s ease 0s;}
.hotNewsCC {max-height: 60vh; min-height: 30vh;}
.hotNewsS {position: absolute; bottom: 15px; left: 20px; width: calc(100% - 95px); z-index: 10; display: flex; flex-wrap: wrap; align-items: center;}
.hotNewsS iframe {margin-right: 10px;}
.hotNewsB {width: 35px; height: 90px; font-size: 14px; letter-spacing: 1px; writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; *display: inline; *writing-mode: tb-rl; color: #fff; background-color: #005bac; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; text-align: center; -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg); -ms-transform:rotate(0deg); transform:rotate(0deg); cursor: pointer; border-bottom-right-radius: 8px; border-top-right-radius: 8px;}
.hotNewsB::before {content: ''; height: 0; width: 0; border-color: transparent transparent #fff transparent; border-style: solid solid solid solid; border-width: 6px 4px; margin: 3px -7px 0 0;-moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); -o-transform:rotate(90deg); -ms-transform:rotate(90deg); transform:rotate(90deg);}
@media only screen and (max-width: 576px) {
    .hotNews {max-width: 90%;}
    .hotNewsH {left: calc(-90% + 30px); transition: all 0.5s ease 0s;}
    .hotNewsC {padding: 15px 15px 100px 15px;}
    .hotNewsS {left: 15px; bottom: 10px; width: calc(100% - 90px);}
}
@media only screen and (max-width: 430px) {
    .hotNewsC {padding: 10px 10px 60px 10px;}
    .hotNewsS {left: 10px; width: calc(100% - 60px);}
    .social-icons li a img {height: 20px;}
}
@media only screen and (max-width: 350px) {
    .hotNewsC {padding: 10px 10px 100px 10px;}
    .social-icons li a img {height: 25px;}
}