@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500&family=Roboto:wght@300;400;500;700&display=swap');

body { 
  /* font-family: 'Noto Sans TC','Microsoft JhengHei',Arial,sans-serif;  */
  font-family: 'Roboto', sans-serif;
  font-family: 'Noto Sans TC', sans-serif;
  font-weight: 300;overflow-x: hidden; 
 	margin: 0; padding: 0; 	border: 0; color: #515155;background:url("../img/body-bg.jpg") repeat-y;background-size: 100%;  box-sizing: border-box;letter-spacing: .1rem;position: relative;}
html {font-size:17px;}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  font-family: 'Noto Sans TC','Microsoft JhengHei',Arial,sans-serif;color:#333;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol,ul{list-style: none;}

a{ text-decoration: none; text-decoration: none;  } a:hover{ text-decoration: none;}
.clear{clear: both;}

p{line-height: 1.8rem;}
.clear-float{clear: both;}
.responsive-img{max-width: 100%;}
section{padding: 20px 0 100px;}
.bg-over{overflow: hidden;display: block;}

body.open-nav{overflow: hidden;}

/* ----- 標題 start ----- */
.title{position: relative;margin: 0 0 40px;}
.title h2{font-weight: 500;position: relative;display: block;letter-spacing: 2px;margin: 0 0 20px;}
.title.white h2{color:#fff;}
.title.black h2,.title.black h3{color: #1a2a41;}
.title.center{text-align: center;}
.title.center{text-align: center;}
.title h5{font-weight: 300;letter-spacing: 2px;margin: 0 0 0 2px;color: var(--main_color);font-size: 1rem;}
.title.center + p {text-align: center;}

.title::after{content: ""; position: absolute; background-color: var(--main_color);border-radius: 10px;left: 0;bottom: -15px;width: 50px;height: 3px;}
.title.center::after{left: 50%; transform: translate(-50%, -50%);position: absolute; }
.title.no-line::after{content: "";width: 0px;} 

/* ----- 標題 end ----- */


:root{
  --main_color:#0560AA;
  --link_color:#27E0C0;
  --link_color_hover:#1CB799;

  /* #BFD7EA */
}

.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
  background:#00AAFF;transition: all .3s ease-in;
}



/* ----- header start ----- */
header {position: relative;}
header #nav-bar{width: 100%;padding:0;background: var(--main_color);transition: all .3s linear;display: flex;align-items: center;}
header #nav-bar.active{background:#fff;position: fixed;top:0;z-index: 9999;box-shadow: 0 0 10px 4px rgb(31 66 135 / 10%);}
header #nav-bar.active.is-open{background:rgba(0, 0, 0, 0);}


header #nav-bar.active .container ul li a{color: #333;}
header #nav-bar.active .container ul li a:hover{color: #555;}
header #nav-bar .container{display: flex;justify-content: space-between;align-items: center;}
header #nav-bar .container #logo{width:220px; padding: 15px 0;display: flex;align-items: center;}
header #nav-bar .container #logo svg .logo-color{fill:#fff;}
header #nav-bar.active .container #logo svg .logo-color{fill:var(--main_color);}

header #nav-bar .container nav{width: 55%;}
header #nav-bar .container nav #logo-m{display: none;}
header #nav-bar .container nav #logo-m svg .logo-color{fill:var(--main_color);}
header #nav-bar .container ul{padding: 0;margin: 0;display: flex;justify-content: space-between;}
header #nav-bar .container ul li{width: 22%; text-align: center;transition: background-color .3s ease-in;font-weight: 500;font-size: 1.1rem;}
header #nav-bar .container ul li > a{display: block;color: #e1ebf3;transition: color .3s ease-in;line-height:30px;}
header #nav-bar .container ul li > a:hover{display: block;color: #fff;}
header #nav-bar .container ul li.contact-btn{ background-color: var(--link_color);height: 30px;border-radius: 8px;transition: background-color .3s ease-in;}
header #nav-bar .container ul li.contact-btn:hover{ background-color: var(--link_color_hover);}
header #nav-bar .container ul li:last-child > a{color: #fff;}
header #nav-bar .container ul li:last-child > a:hover{color: #fff;}
header #nav-bar .container ul li > .btn_line{height: 2px;width:0;background-color: var(--link_color);border-radius: 10px;transition: width .3s linear;margin: 0 auto;}
header #nav-bar .container ul li:hover > .btn_line{width: 50%;}

header .header-content{display: flex;justify-content: space-between;align-items: center;margin: 40px 0;}
header .header-content > .title{width: 54%;text-align: left;}
header .header-content > .title h1{font-size: 3.6rem; line-height: 4.6rem;color: #fff;letter-spacing: 5px;}
header .header-content > .title h5{font-size: 1.4rem; line-height: 2.4rem; font-weight: 300; margin: 30px 0; color: #e1ebf3;}
header .header-content .photo{width:45%;}
header .header-bg{ position:absolute; background: var(--main_color);width: 100%;  min-height:88vw;transform: skew(0,-30deg) translateY(-50%);z-index: -99;top:0;left:0; }

 /* 漢堡選單 */
 .hamburger{display: block;position: relative;z-index: 999;}
 .nav-black{background-color: rgba(0, 0, 0, 0.5);position: fixed;width: 100%;height: 100%;top:0;left:0;z-index: 888;display: none;}
 .nav-black.active{display: block;}

/* about start */
section#about{padding: 20px 0 100px;}
section#about .about-content{width: 100%;background-color: #fff;box-shadow: 0 0 10px 4px rgb(31 66 135 / 10%); border-radius: 15px;padding: 40px;}
section#about .about-content .photo{width: 80%;}
section#about .solution-content{margin: 300px 0 0;}
section#about .solution-content .text-flex{display: flex;margin: 20px 0;text-align: justify;}
section#about .solution-content .text-flex .icon img{width: 40px;margin: 5px 20px 0 0;}





/* service start */
section#service .box {background-color: #fff; box-shadow: 0 0 10px 4px rgb(31 66 135 / 10%);  border-radius: 15px;min-height:520px;overflow: hidden;margin: 20px 0;transition: all .3s linear;}
section#service .box:hover{transform: translateY(-5px);}
section#service .box .photo {width: 100%;min-height: 250px;background-color: rgb(145, 33, 33);}
section#service .box .photo.photo-1{background: url("../img/service-photo-1.jpg") no-repeat center;background-size: cover;}
section#service .box .photo.photo-2{background: url("../img/service-photo-2.jpg") no-repeat center;background-size: cover;}
section#service .box .photo.photo-3{background: url("../img/service-photo-3.jpg") no-repeat center;background-size: cover;}
section#service .box .text{padding:20px 15px;}
section#service .box .text ul {padding: 0 0 0 30px;margin: 15px 0 0;}
section#service .box .text ul li{position: relative;margin: 5px 0;}
section#service .box .text ul li:before{ content: "\f058"; /* FontAwesome Unicode */ font-family: "Font Awesome 5 Free"; margin-left:-1.6em; position: absolute; color: #00AAFF; }

.slideInUp {
  -webkit-backface-visibility: visible!important;
  backface-visibility: visible!important;
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
  animation-duration: 1.5s;
}

/* projects start */
section#projects .tab-content{display: flex;justify-content: space-between;}
section#projects .tab-content .tab {text-align: center;width: 33.33%;border-top:6px solid #cde6f0;cursor: pointer;transition: all .3s linear;}

section#projects .tab-content .tab-text {text-align: center;width: 33.33%;margin:0 0 20px;}
section#projects .tab-content .tab h5{margin-bottom: 0.2rem;}
section#projects .tab-content .tab .icon{width:60px;margin: 20px auto 10px;}
section#projects .tab-content .tab .icon .projects-icon{fill:#333;transition: all .3s linear;}
section#projects .tab-content .tab:hover{border-top:6px solid #00AAFF;}
section#projects .tab-content .tab:hover .icon .projects-icon{fill:#00AAFF;}
section#projects .projects-content.active{display: block;animation-name: fadeIn;animation-duration:2s;}

section#projects .projects-content p{display: none;}
section#projects .projects-content{display: none;}
section#projects .projects-content.active{display: block;}
section#projects .tab-content .tab.active{border-top:6px solid #00AAFF;}
section#projects .tab-content .tab.active .projects-icon{fill:#00AAFF}

section#projects .projects-content .item {height: 700px;display: block;}

/* contact start */
section#contact{padding: 50px 0;position: relative;z-index: 999;}
section#contact .contact-content{width: 100%;background-color: #fff;box-shadow: 0 0 10px 4px rgb(31 66 135 / 10%); border-radius: 15px;padding: 40px;}
section#contact .map{position: relative;position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;min-height: 100%;}
section#contact .map iframe{position: absolute; top: 0;left: 0; width: 100%; height: 100%;height: 100%;}

/* 表格 */
form#contact-form {margin: 20px 0 0;}
form#contact-form .input-group {position: relative;display: flex; flex-wrap: wrap; align-items: stretch; width: 100%;}
form#contact-form .input-group input,form#contact-form .input-group textarea{ width: 100%; margin: 12px 0; padding: 10px; font-size: .9rem; font-weight: 300; color: #333; border-radius: 5px; border: 1px solid rgb(205 205 205); overflow: auto; background: rgba(255, 255, 255, 0.85); }
form#contact-form .input-group textarea{ height:180px; overflow: auto; resize: none; }
form#contact-form .input-group input:focus,form#contact-form .input-group textarea:focus{ outline:1px solid #00AAFF; border: 1px solid transparent; }


/* owl修正 */
.slide {width: 90%;margin: 0 auto;}
.slide .owl-nav .owl-prev,.slide .owl-nav .owl-next{ position: absolute; opacity:1; -webkit-transition: all 0.4s ease-out; transition: all 0.4s ease-out; background: #BABABA !important; border-radius: 100% !important; width: 40px; height: 40px; display: block; z-index: 1000; cursor: pointer; transition: all .3s ease-in; }
.slide .owl-nav .owl-prev:hover,.slide .owl-nav .owl-next:hover{ background: rgb(85, 85, 85) !important; }
.slide .owl-nav .owl-prev:active,.slide .owl-nav .owl-next:active{ background: rgb(85, 85, 85) !important; }
.slide .owl-nav .owl-prev span, .slide .owl-nav .owl-next span { font-size: 3rem; color: #fff; position: absolute; transform: translate(-50%,-50%); top: 35%; }
.slide .owl-nav .owl-prev { left: -80px; top: 50%; }
.slide .owl-nav .owl-next { right: -80px; top: 50%; }


/* footer start */
footer {position: relative;color: #fff;padding: 0 0 50px;}
footer .footer-bg{ position:absolute; background: var(--main_color);width: 100%;  min-height:60vw;transform: skew(0, -30deg) translateY(-35%);z-index: -99;top:0;left:0; }
footer ul{padding: 0;}
footer ul li{margin:10px 0;padding: 0;}
footer ul li i{margin-right: 10px;width: 15px;}
footer ul li p,footer ul li a{color: #fff;padding: 0;margin: 0;display: inline-block;transition: all .3s linear;}
footer ul li a:hover{color: rgba(255, 255, 255, 0.8);}
footer #footer-logo{width:220px; padding: 15px 0;}
footer #footer-logo svg .logo-color{fill:#fff;}
footer .copyright{font-size: .9rem;color:rgb(179, 199, 215);}





@media (max-width: 1920px){
  /* service start */
  section#service .box { min-height: 520px; }

  /* footer start */
  footer{background: var(--main_color);}
  footer .footer-bg{ transform: skew(0, -30deg) translateY(-50%); }
}

@media (max-width: 1199px) {
  section#service .box { min-height: 580px; }
  /* footer start */
  footer{background: var(--main_color);}
  footer .footer-bg { transform: skew(0, -30deg) translateY(-55%);min-height:80vw; }
}


@media (max-width:991px) {
  .container{max-width: 960px;}

  /* ----- header start ----- */
  header .header-bg{ min-height:160vw;}
  header .header-content > .title h1{font-size: 3.4rem; line-height: 4.4rem;}
  header .header-content > .title h5{font-size: 1.1rem; line-height: 2.1rem;}
  
  /* projects start */
  section#projects .projects-content .item {height: 550px;}

}

@media (max-width: 767px) {
  section{padding:0 0 100px;}
  h5{font-size: 1.2rem;line-height: 2rem;}
  .container{max-width:720px;}
  .title.center + p { text-align: left; }

  /* ----- header start ----- */
  header .header-content {  flex-direction: column; }
  header .header-content > .title { width:100%;margin: 20px 0; }
  header .header-content > .title h1 { font-size: 3.6rem; line-height: 4.6rem;letter-spacing: 1px; }
  header .header-content > .title h5 { font-size: 1.4rem; line-height: 2.4rem;margin:15px 0;letter-spacing: 1px;  }
  header .header-content .photo { width: 100%; }
  header #nav-bar{flex-direction: row-reverse;}
  header #nav-bar .container #logo {width: 200px;padding: 15px;}
  header #nav-bar .container nav #logo-m{display: block;width: 200px;margin: 20px auto;}
  header #nav-bar.active .container ul li a:hover{color: var(--main_color);}

  header #nav-bar .container nav {
  background-color: #fff;width: 70%;height:100%;position: fixed;left: 0;top:0;
  z-index: 999;left:-100%;transition: all .3s linear;}
  header #nav-bar .container nav.active {left:0%;}
  header #nav-bar .container { margin: 0; padding: 0; }
  header #nav-bar { padding: 0; }

  header #nav-bar .container ul { flex-direction: column; }
  header #nav-bar .container ul li { width: 100%;padding: 10px 0; border-bottom: 1px solid #cde6f0; }
  header #nav-bar .container ul li:last-child { border-bottom:0px solid #cde6f0;}
  header #nav-bar .container ul li.contact-btn { background-color: transparent; }

  header #nav-bar .container ul li > a { color: #333; }
  header #nav-bar .container ul li > a:hover { color: #00AAFF; }
  header #nav-bar .container ul li:last-child:hover { background-color: transparent;}
  header #nav-bar .container ul li:last-child > a { color: #333; }
  header #nav-bar .container ul li:last-child > a:hover {  color: #00AAFF; }

  header .header-bg{ position:absolute; background: var(--main_color);width: 100%;  min-height:300vw;transform: skew(0, -30deg) translateY(-50%);z-index: -99;top:0;left:0; }
  header #nav-bar .container ul li > .btn_line { display: none; }

  /* about start */
  section#about{padding:0 0 100px;}
  section#about .solution-content { margin:100px 0 0px;   }
  section#about .about-content{padding:20px;}
  section#about .about-content .photo,section#about .solution-content .photo { width: 60%; margin:20px auto;}
  section#about .solution-content .text-flex { margin: 0; }

  /* service start */
  section#service .box { min-height: auto; }
  section#service .box .photo { width: 100%; min-height: 400px; }
 
  /* projects start */
  section#projects .tab-content .tab { text-align: center;}
  section#projects .tab-content .tab-text {width: 100%;display: none;margin:30px 0 0px}
  section#projects .tab-content .tab-text.active {width: 100%;display: block;text-align: center;}
  section#projects .tab-content .tab .icon { width: 50px; }
  section#projects .projects-content {margin:0px 0;}
  section#projects .projects-content p{display: block;text-align: center;}
  section#contact .map { margin: 40px 0 0; min-height: 300px; }
  section#contact .contact-content { padding: 20px; }

  /* footer start */
  footer #footer-logo { margin: 0 auto;padding: 5px 0;}
  footer .copyright{text-align: center;margin-bottom: 30px;}

}



@media (max-width: 576px) {
  h2{font-size: 1.6rem;line-height: 2.2rem;}
  h3{font-size: 1.4rem;line-height: 2rem;}
  h5{font-size: 1rem;line-height: 1.6rem;}

  /* ----- header start ----- */
  header .header-content > .title h1 { font-size: 3rem; line-height: 3.8rem;}
  header .header-content > .title h5 { font-size: 1rem; line-height: 1.6rem;margin:15px 0;letter-spacing: 1px;  }  
  header .header-bg{min-height:380vw;}

  /* about start */
  section#about .about-content .photo,section#about .solution-content .photo { width: 80%; }
  
  /* service start */
  section#service .box .photo { width: 100%; min-height: 250px; }

  /* projects start */
  section#projects .projects-content .item {height: 250px;}

  /* 表格 */
  form#contact-form .input-group textarea{ height:100px; }
  
  
  /* owl修正 */
  .slide {width: 100%;}
}


.lang-menu{
  position: absolute;
  z-index: 100;
  top: 80px;
  right: 40px;
}

#nav-bar.active + .container>.lang-menu>.selected-lang {
  color: red !important;
}



.selected-lang{
  cursor: pointer;
  display: flex;
  color:#fff !important;
  justify-content: space-between;
  line-height: 2;
  width: 90px;
}

#selectFlag{
  width: 26px;
  height: 26px;
}
.selected-lang-text{
  font-size: 0.6rem;
}
.lang-menu:hover  ul{
  display: flex !important;
}

.lang-menu ul{
  position: absolute;
  left: -30px;
  top: 25px;
  display: none !important;
  flex-direction: column;
  margin: 0;
  padding: 0;
  background-color: #fff;
  border: 1px solid #f8f8f8;
  box-shadow: 0 1px 10px rgba(0,0,0,0.2);
  border-radius: 5px;
}
.lang-menu ul li{
  width: 100% !important;
  display: flex;
  flex-direction: row;
  list-style: none;
}

.lang-menu ul li a{
  width: 140px;
  color: #555 !important;
  display: block;
  font-size: 10px;
  padding: 5px 10px;
}
.lang-menu ul li a:hover{
  background-color: #f2f2f2;
}
.lang-menu ul li a:before{
  content: '';
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
  width: 26px;
  height: 26px;
  /* background-image: url(https://cdn.countryflags.com/thumbs/united-states-of-america/flag-square-250.png); */
  background-size: cover;
  background-repeat:   no-repeat;
  background-position: center center; 
}
.lang-tw:before{
  background-image: url(https://cdn.countryflags.com/thumbs/taiwan/flag-square-250.png);
}
.lang-us:before{
  background-image: url(https://cdn.countryflags.com/thumbs/united-states-of-america/flag-square-250.png);
}