@charset "utf-8";
/* CSS Document */
body{font-family:"Arial","微軟正黑體",Microsoft JhengHei,Helvetica Neue,Verdana,Arial,LiHei Pro Medium,Helvetica,sans-serif;}
.width-1400{ max-width: 1400px; margin: auto}
.title-fonts{font-family: 'Oswald';}
.fonts-colour-orange{ color:#E75116 }
.fonts-colour-white{ color: white}
.fonts-colour-deep-blue{ color: #001739 }
.cover-title{font-family: 'Oswald'; font-size: 24px; text-align: center; margin-bottom: 20px}
@media (min-width:996px){
	.cover-title{ font-size: 34px;  }
}
a.btn-more{ display: flex; font-family:Arial,"微軟正黑體", Helvetica Neue,Verdana,LiHei Pro Medium,Helvetica,sans-serif; text-decoration: none; color: #FFF;}
a.btn-more.more-deep-blue{color: #001739 }
a.btn-back{ display: flex; font-family:Arial,"微軟正黑體", Helvetica Neue,Verdana,LiHei Pro Medium,Helvetica,sans-serif; text-decoration: none; color: #FFF; margin: 20px 0px; }
a.btn-back span{ margin-left: 5px}
a.btn-back.more-deep-blue{color: #001739;align-items: center }
.ellipsis-line1{display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}
.ellipsis-line2{display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}
.ellipsis-line3{display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}
.top-bar-region{ font-family:"微軟正黑體",Microsoft JhengHei,Helvetica Neue,Verdana,Arial,LiHei Pro Medium,Helvetica,sans-serif; color: #FFF; background: linear-gradient(90deg, rgba(231,81,22,1) 38%, rgba(0,23,57,1) 47%); font-size: 14px}
.top-bar-region a{ color: #FFF; text-decoration: none}
.top-bar-region .top-bar-container{ display: flex; flex-wrap: wrap-reverse}
.top-bar-region .top-bar-container .top-bar-section.site-orange{ flex: 1 1 100%; text-align: center; line-height: 30px}
.top-bar-region .top-bar-container .top-bar-section.site-deep-blue{flex: 1 1 100%; display: flex; justify-content:  center; line-height: 30px;  font-size: 13px}
.top-bar-region .top-bar-container .top-bar-section.site-deep-blue .top-bar-contactinfo{ display: none}
.top-bar-region .top-bar-container .top-bar-section.site-deep-blue .top-bar-lang{  font-size: 12px}
.top-bar-region .top-bar-container .top-bar-contactinfo img{ height: 12px; width: auto}
.top-bar-region .top-bar-container .top-bar-contactinfo span{ margin: 0px 20px}
.top-bar-region .top-bar-container .top-bar-lang a{ padding: 0px 5px; opacity: .6;}
.top-bar-region .top-bar-container .top-bar-lang a:hover{opacity:1}
.site-orange{ background-color:#E75116 }
.site-deep-blue{ background-color: #001739}
.top-menu-region .top-menu-container{ display: flex; position: relative}
.top-menu-region .top-menu-container .top-menu{flex: 1 1 100%; position: absolute; right: 0px; width: 100%; top: 10px}
.top-menu-region .top-menu-container .top-menu .sm-simple{  box-shadow: none ;border: none}
.top-menu-region .top-menu-container .top-menu .sm-simple a{ color: #001739}
.top-menu-region .top-menu-container .top-menu .sm-simple a.active{ background:rgba(231,229,229,1.00)}
.top-menu-region .top-menu-container .top-logo{ width: 100%; text-align: center}
.top-menu-region .top-menu-container .top-logo img{ width: 45px; height: auto; margin: 7px auto; }


.main-image-region img{ display: block; width: 100%; height: auto}
.main-image-region .title-post{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.main-image-region .big-title{  border: 6px solid #FFF; padding:10px}
.main-image-region .big-title h4{font-family: 'Oswald'; color: #FFF; font-size:16px; white-space: nowrap; margin: 0px}
.main-image-region .big-title h4 span{ display: block; text-align: center}
.main-image-region .big-title h4 span:first-child{ font-size: 20px}
.main-image-region .main-image-container{ position: relative; overflow: hidden; height: 200px; }
.main-image-region .main-image-container img{width: 100%; height: 100%; object-fit: cover; animation: zoom-out 60s both;}


    @keyframes zoom-out {
      0% { transform: scale(1.5); }
      100% { transform: scale(1); }
    }


.main-cover-section1 .main-cover-container{ display: flex; flex-direction: column}
.main-cover-section1 .main-cover-container .main-cover-section1-content{ font-size: 14px; line-height: 20px}
.main-cover-section1 .main-cover-container .width-50 .boxs-orange { background:#E75116; color: #FFF;font-family: 'Oswald'; font-size: 28px; text-align: center; padding: 5px; margin-top: 10px}
.main-cover-section1 .main-cover-container .width-50 img{ display: block; width: 100%; height: auto; }
.main-cover-section1 .main-cover-container .width-50{ padding: 20px 20px 0px 20px}
.main-cover-section1 .main-cover-container .width-50 h4{ margin: 0px; font-size: 20px}
.main-cover-section2, .main-cover-section3, .main-cover-section4, .footer-section{ padding: 25px 0px 35px}
.main-cover-section2 .main-carousel{ padding: 0px 20px}
.main-cover-section2 .carousel-cell{   overflow: hidden;  width: 45%; aspect-ratio: 1 / 1; margin:0px 12px; border-radius: 5px; border:1px solid #CCC}
.main-cover-section2 .carousel-cell a:hover{ opacity: .6; transition: all 1s}
.main-cover-section2 .carousel-cell img{ object-fit: cover; width: 100%; height: 100%;  }
.main-cover-section2 .flickity-prev-next-button{ width: 25px; height: 25px}
.main-cover-section3 .main-cover-container{ display: flex; flex-direction:  column; padding: 0px 20px}
.main-cover-section3 .btn-more{ justify-content: center; width: 100%; display: flex }
.main-cover-section3 .btn-more span{ margin-right: 5px}

.main-cover-section3 .main-cover-container .project-boxs{ background: #F2F6FB; padding: 10px; position: relative; margin:0px 10px 20px 10px}
.main-cover-section3 .main-cover-container .project-boxs a{ position: absolute; width: 100%; height: 100%}
.main-cover-section3 .main-cover-container .project-boxs .pic{ width: 100%; height: 150px; overflow: hidden; border: 1px solid #ccc}
.main-cover-section3 .main-cover-container .project-boxs .boxs-title{ font-size: 14px; margin-top: 10px; text-align: center}
.main-cover-section3 .main-cover-container img{ object-fit: cover; width: 100%; height: 100%;}
.main-cover-section3 .main-cover-container img:hover{transform: scale(1.2);transition: transform 1s;}
.main-cover-section4{ background:#F1F0EF }
.main-cover-section4 .news-pic{ display: none}
.main-cover-section4 .news-listing{ font-size: 14px;  font-weight: bold}
.main-cover-section4 .news-listing .news-items{ margin-bottom: 15px}
.main-cover-section4 .news-listing .news-items span{ line-height: 18px; margin-bottom: 10px; letter-spacing: -0.3px}
.main-cover-section4 .news-listing .news-items span:last-child{ padding-right: 30px}
.main-cover-section4 .news-listing .news-items a{ text-decoration: none; color: #001739; display: block;  background-image: url("../images/small-arrow.svg"); background-repeat: no-repeat; background-position: right 22px; border-bottom: 1px solid #ccc}
.main-cover-section4 .btn-more{ justify-content: center; width: 100%; display: flex }
.main-cover-section4 .btn-more svg{ color: #333}
.main-cover-section4 .btn-more span{ margin-right: 5px}
.main-cover-section4 .news-container{ padding: 0px 20px}
.footer-section{ background-color: #ececec}
.footer-section .footer-url a{ color: #686767; text-decoration: none; font-size: 12px; margin: 0px 5px; position: relative}
.footer-section .footer-url a:after{ position: absolute; content: ""; border-right: 1px solid #666; right: -8px; height: 10px; top: 3px}
.footer-section .footer-url a:last-child:after{ content: none}
.footer-section .footer-url{ text-align: center}
.footer-section .footer-copyright{ text-align: center; font-size: 12px; padding: 10px 20px; color: #686767; }


.site-content-region{ background-color: #F6F6F6; background-image: url("../images/bg2.png"); background-repeat: no-repeat; background-size: 860px auto;; background-position: right top}
.site-title-widget{  border-bottom: 1px solid #E75116}
.site-title-widget span{ display: block; background: #001739; color: #FFF; font-family: 'Oswald'; width: 300px; line-height: 45px; position: relative}
.site-title-widget span:after{ content: "";  display: inline-block; position: absolute; right: -20px; top: 0px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 45px 20px 0 0;
    border-color: #001739 transparent transparent transparent;}
.site-title-widget span h3{ margin: 0px; font-size: 24px; text-align: left; padding:0px 20px}
.site-title-bg{ position: absolute; width: 100%;   border-bottom: 1px solid #E75116; height: 45px}
.site-title-bg .bg-blue{ height: 45px; background:#001739; width: 20%}
.site-body-region .site-body-container{ max-width: 996px; margin:35px auto 0px ; padding:0px 20px 80px}
.site-body-region .site-body-container1280{max-width: 1280px; margin:35px auto 0px ; padding:0px 20px 80px}
.site-body-region .site-body-container h3{ font-size: 30px; line-height: 38px; }
.site-body-region .site-body-container h3 span{ display: block}
.site-body-region .site-body-container ul li{ font-size: 20px; margin-bottom: 20px}
.site-body-region .site-body-container p{ line-height: 24px;}
.site-body-region .site-body-container .article-wrapper{ margin: 50px 0px;}

.site-new-listing .new-items{ background-color: #FFF; box-shadow: 3px 3px 1px -2px rgba(0,0,0,0.3); margin-bottom: 25px;}
.site-new-listing .new-items a{ display: block; text-decoration: none;  padding: 10px 20px; position: relative; border: 1px solid #FFF}
.site-new-listing .new-items a:hover{ border: 1px solid #001739; transition: all 1s}
.site-new-listing .new-items a:after{ content: ""; position: absolute; background-image: url("../images/small-arrow.svg"); background-repeat: no-repeat; height:100%; width: 20px; top: 0px; background-position: right center; right: 20px}
.site-new-listing .new-items a.download:after{ content: ""; position: absolute; background-image: url("../images/icon-file.svg"); background-repeat: no-repeat; height:100%; width: 20px; top: 0px; background-position: right center; right: 20px; background-size: contain}
.site-new-listing .new-items a span{ color: #001739; display: block; margin-bottom: 5px; font-size: 14px; font-weight: bold}
.site-new-listing .new-items a p{ color:#707070; margin: 0px; line-height: 20px; margin-right: 25px; font-size: 14px}

.site-news-content{ background: #FFF; box-shadow: 0px 3px 5px -2px rgba(0,0,0,0.75); padding: 40px 20px }
.site-news-content.no-padding{ padding: 0px 0px 30px 0px}
.site-news-content .site-news-container .news-date{ text-align: center; margin-bottom: 20px; color: #666}
.site-news-content .site-news-container .news-title{text-align: center;font-family: 'Oswald',"微軟正黑體"; font-size: 24px;color: #001739  }
.site-news-content .site-news-container .news-pic ul{ list-style: none; margin:30px 0px; padding: 0px; }
.site-news-content .site-news-container .news-pic ul li{  display: block; text-align: center}
.site-news-content .site-news-container .news-pic ul li img{ max-width: 100%; margin: auto; height: auto; min-width: 100% }
.site-news-content .site-news-container .news-article{ max-width: 100%; margin: auto}
.site-news-content .site-news-container .news-article.margin{ margin:0px auto; padding: 0px 20px }
.site-news-content .site-news-container .news-article .sam-title{ text-align: center; font-size: 24px; border-bottom: 1px solid #ccc; padding-bottom: 15px}
.site-news-content .site-news-container .news-article ul li{ margin-bottom: 10px; font-size: 16px}
.site-news-content .google-map{ margin-bottom: 20px}
.site-investor-region{ display: block}
.site-investor-region .site-investor-menu{ width: 250px; padding: 0px 10px}
.site-investor-region .site-investor-menu ul{ list-style: none; background: #E75116;  display: block; width: 200px; margin: auto; padding:20px 10px; position: relative}
.site-investor-region .site-investor-menu ul:after{ content: ""; display: block; position: absolute; bottom: -40px; width: 0; left: 0px;
height: 0;
border-style: solid;
border-width: 40px 220px 0 0;
border-color: #E75116 transparent transparent transparent;}
.site-investor-region .site-investor-menu{ display: none}
.site-investor-region .site-investor-menu ul li a{ color: #FFF; text-decoration: none; padding: 10px 10px; display: block; font-size: 14px; border:1px solid rgba(255,255,255,.0)}
.site-investor-region .site-investor-menu ul li a.active{  border:1px solid rgba(255,255,255,.5)}
.site-investor-region .site-investor-menu ul li a:hover{   transition: all 1s; background: rgba(255,255,255,.2)}
.site-investor-region .site-investor-content{ flex:1; padding: 0px}
.site-investor-region .site-investor-content h3{  font-size: 28px ;margin: 0px 0px 30px 5px}
.site-investor-region .site-investor-content .squarebox-list{ display: flex; flex-direction: column; margin: 0px} 
.site-investor-region .site-investor-content .squarebox-list .square-box-orange{margin: 0px ;  border: 8px solid #E75116; background: #FFF; margin-bottom: 20px}
.site-investor-region .site-investor-content .squarebox-list .square-box-orange h5{ font-size: 22px; text-align: center; margin-bottom: 20px}
.site-investor-region .site-investor-content .squarebox-list .square-box-orange p{ text-align: center; color: #3D3C3B}
.site-investor-region .site-investor-content .corp-list{ margin-top: 30px}
.site-investor-region .site-investor-content .corp-list .corp-list-title{ background: #FFF; color:#8D8D8D; font-size: 20px ; padding: 13px 20px}
.site-investor-region .site-investor-content .corp-list .corp-list-content{padding: 15px 20px; color: #333 }
.site-investor-region .site-investor-content .corp-list .corp-list-content p{ margin: 8px 0px}
.site-investor-region .site-investor-content .corp-list .corp-list-items{ margin-bottom: 15px}
.site-jobs-region{ display: flex; flex-wrap: wrap}
.site-jobs-region .job-items a{ display: block; position: relative; margin: 20px}
.site-jobs-region .job-items .job-title{ position: absolute;  width: 50%; height:100%; background-image: url("../images/Subtraction-bg.svg"); background-size: contain; background-repeat: no-repeat; color: #FFF; display: flex;  align-items: center; justify-content: center; z-index: 1}
.site-jobs-region .job-items .job-title p{ text-align: center; width: 80%}
.site-jobs-region .job-items{ width: 100%}
.site-jobs-region .job-items .job-item-img{  overflow: hidden; width: 100%;  aspect-ratio: 2 / 1}
.site-jobs-region .job-items img{ object-fit: cover; width: 100%; height: 100%;}
.site-jobs-region .job-items a:hover img{transform: scale(1.2);transition: transform 1s;}
@media (min-width:768px){
	.main-cover-section1 .main-cover-container{flex-direction: row;}
	.main-cover-section1 .main-cover-container .width-50{ width: 50%}
	.main-cover-section2 .carousel-cell{    width: 10%; aspect-ratio: 1 / 1;  }
	.main-cover-section3 .main-cover-container{ flex-direction: row}
	.main-cover-section3 .main-cover-container .project-boxs{ flex: 1 1; margin:0px 30px 30px}
	.site-body-region .site-body-container{ margin:50px auto 0px ;}
	.site-body-region .site-body-container h3{ font-size: 45px; line-height: 60px;}
	.site-title-widget span h3{ margin: 0px; font-size: 28px; text-align: right; padding-right: 20px}
	.site-title-widget span{line-height: 60px;}
	.site-news-content{padding: 40px }
	.site-news-content .site-news-container .news-pic ul li img{max-width: 80%; min-width: 80% }
	.site-news-content .site-news-container .news-article{ max-width: 80%; margin: auto}
	.site-title-widget span:after{ border-width: 60px 20px 0 0;}
	.site-title-bg .bg-blue{ height: 60px; }
	.site-title-bg{  height: 60px}
	.site-investor-region .site-investor-menu{ display: block}
	.site-investor-region .site-investor-content{padding: 0px 20px 0px 60px}
	.site-investor-region{ display: flex}
	.site-jobs-region .job-items{ width: calc(100% / 2)}
	.site-news-content .site-news-container .news-title{ font-size: 30px}
	.top-menu-region .top-menu-container .top-menu .sm-simple ul{ border: none; box-shadow: 0px 9px 24px -5px rgba(0,0,0,0.36);}

}
@media (min-width:996px){
    .top-bar-region .top-bar-container{ flex-wrap: nowrap}
    .top-bar-region .top-bar-container .top-bar-section.site-orange{ flex:0 1 300px}
    .top-menu-region .top-menu-container .top-menu{ position: relative; display: flex; align-items: center; top: auto}
    .top-menu-region .top-menu-container .top-logo{ flex:0 1 300px; text-align: center}
    .top-menu-region .top-menu-container .top-logo img{ width: 70px; height: auto; margin: 10px auto}
    .main-image-region .main-image-container{height: 500px; }
	.main-cover-section1 .main-cover-container{  padding: 30px 12% 35px}
	.main-cover-section1 .main-cover-container .width-50{ flex: 1 1 50%}
	.main-cover-section1 .main-cover-container .width-50 .boxs-orange{  width: 50%}
	.main-image-region .big-title h4 span:first-child{ font-size: 35px}
	.main-image-region .big-title h4{ font-size: 28px}
	.main-image-region .big-title{ padding: 15px}
	.main-cover-section2 .carousel-cell{    width: 10%; aspect-ratio: 1 / 1;  }
	
	.main-cover-section3 .main-cover-container{  padding: 0px 100px}
	
	.main-cover-section2, .main-cover-section3, .footer-section{ padding: 40px 0px 50px}
	.main-cover-section4{ padding: 0px; position: relative; min-height:  350px; }
	.main-cover-section4 .cover-title{ padding-top: 30px}
	.top-bar-region .top-bar-container .top-bar-section.site-deep-blue .top-bar-contactinfo{ display:block}
	.top-bar-region .top-bar-container .top-bar-section.site-deep-blue{ justify-content: space-between}
	.main-cover-section4 .news-pic{ display: block; height: 330px; position: absolute; top: 0px}
	.main-cover-section4 .news-pic img{  height: 100%; width: auto;}
	.main-cover-section4 .news-container{  padding: 0px}
	.main-cover-section4 .news-listing{ margin-left: 400px; margin-right: 0px}
	.main-cover-section4 .news-listing .news-items a{ display: flex; width: 80%; margin: auto; background-position: right 5px}
	.main-cover-section4 .news-listing .news-items a span:first-child{ width: 150px; white-space: nowrap}
	.main-cover-section4 .news-listing .news-items a span:last-child{ flex: 1; width: 80%}
	.main-cover-section4 .news-listing .cover-title{ margin: 20px}
	.site-investor-region .site-investor-content .squarebox-list{ justify-content: space-between; flex-direction: row } 
	.site-investor-region .site-investor-content .squarebox-list .square-box-orange{ width: calc(100% / 3); margin: 0px 15px; aspect-ratio: 1 / 1; border: 8px solid #E75116; background: #FFF}
	.site-jobs-region .job-items{ width: calc(100% / 3)}
}
@media (min-width:1200px){
		.main-cover-section4 .news-listing{ margin-left: 400px; margin-right: 100px}
		
}

/* Mobile menu toggle button */

.main-menu-btn {
  float: right;
  margin:5px 10px;
  position: relative;
  display: inline-block;
  width: 29px;
  height: 29px;
  text-indent: 29px;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* hamburger icon */

.main-menu-btn-icon,
.main-menu-btn-icon:before,
.main-menu-btn-icon:after {
  position: absolute;
  top: 50%;
  left: 2px;
  height: 2px;
  width: 24px;
  background: #555;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
}

.main-menu-btn-icon:before {
  content: '';
  top: -7px;
  left: 0;
}

.main-menu-btn-icon:after {
  content: '';
  top: 7px;
  left: 0;
}
/* x icon */

#main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon {
  height: 0;
  background: transparent;
}

#main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon:before {
  top: 0;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon:after {
  top: 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}


/* hide menu state checkbox (keep it visible to screen readers) */

#main-menu-state {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}


/* hide the menu in mobile view */

#main-menu-state:not(:checked) ~ #main-menu {
  display: none;  
}

#main-menu-state:checked ~ #main-menu {
  display: block; width: 100%; top: 55px;box-shadow: 0px 14px 15px -10px rgba(0,0,0,0.41);
}
/*
@media (min-width: 996px) {
	#main-menu-state:checked ~ #main-menu{ top:auto}
	
}

*/
@media (min-width: 768px) {
	#main-menu-state:checked ~ #main-menu {
   display: flex; top: 15px; justify-content: center
}
}
@media (min-width: 996px) {
  /* hide the button in desktop view */
  .main-menu-btn {
    position: absolute;
    top: -99999px;
  }
  /* always show the menu in desktop view */
  #main-menu-state:not(:checked) ~ #main-menu {
    display: block;
  }
}



.pagination {
  display: inline-block; text-align: center; width: 100%; display: flex; justify-content: center; margin: 50px 0px
}

.pagination a {
  color: #999;
  padding:0px;
	width: 40px;
	line-height: 40px;
  text-decoration: none;
background-color: #FFF;
  transition: background-color .3s;
	margin: 0px 5px;

}

.pagination a.active {
  background-color: #BEB6B6;
  color: #001739;

}

.pagination a:hover:not(.active) {background-color: #ddd;}



keyframes fadeInUp {
    from {
        transform: translate3d(0,40px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

@-webkit-keyframes fadeInUp {
    from {
        transform: translate3d(0,40px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

.animated {
    animation-duration: 3s;
    animation-fill-mode: both;
    -webkit-animation-duration: 3s;
    -webkit-animation-fill-mode: both
}

.animatedFadeInUp {
    opacity: 0
}

.fadeInUp {
    opacity: 0;
    animation-name: fadeInUp;
    -webkit-animation-name: fadeInUp;
}