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

h1,h2,h3,h4,h5,h6,a,p,li,span{ font-family:'Microsoft JhengHei',sans-serif; color:#202020;}
h1,h2,h3,h4,h5,h6,a{ font-weight: 400; color:#202020;}

a:hover{text-decoration: none;}
.hv-center{ display: flex; justify-content: center; align-items: center;}
.h-center{ display: flex; align-items: center;}
.w100{width:100%;}

#service_anchor{position: absolute; top: -84px;}



/*-- loading --*/
.loading_div{position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 100;}
.loading_div div{ position: absolute; top: 0; width: 16.667%; height: 100%; background-color: #13325c;}
.loading_div div:nth-child(1){left: 0%;}
.loading_div div:nth-child(2){left: 16.667%;}
.loading_div div:nth-child(3){left: 33.334%;}
.loading_div div:nth-child(4){left: 50.001%;}
.loading_div div:nth-child(5){left: 66.668%;}
.loading_div div:nth-child(6){left: 83.335%;}


/*--menu--*/

.menu{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background-color: #fff!important;
  border-bottom: 1px solid #dcdcdc;
 }

 /*-- TITLE --*/
 h1.title_txt{ font-family: 'Noto Serif TC', serif; font-weight: 600; font-size: 31px; letter-spacing: 2px;}
 h6.title_txt{  font-size: 17px; letter-spacing: 2px;}
 hr.title_txt{}


  /*-- lang --*/
  .container{max-width: 1440px;}
  .navbar-nav{ position: relative;}
  .navbar-expand-lg .navbar-collapse{justify-content: flex-end;}

  .navbar-light .navbar-brand{    padding: 15px 0 10px 0;}
  .navbar-light .navbar-brand img{width: 160px;}
 
  .navbar-light .navbar-nav .nav-link{font-size: 16px; color:#202020; padding: 10px 20px; position: relative;display: block; letter-spacing: 2px; }
  .navbar-light .navbar-nav .nav-link:hover {color: #0c3d7f;}
  .navbar-light .navbar-nav .nav-link:hover::before {width: 100%;}
  .navbar-light .navbar-nav .nav-link::before {
   content: '';
   position: absolute;
   width: 0;
   height: 2px;
   left: 0;
   right: 0;
   bottom: 0;
   margin: auto;
   background-color: #0c3d7f;
   transition: all .5s;
  }

  .navbar-light .navbar-nav .nav-link::after{
    top: 0;
    border: 1px solid #eee;
    box-shadow: 0px 1px 30.4px 1.6px rgba(149, 149, 149, 0.05);
  }

.navbar-nav li{display: flex;  align-items: center;}
.navbar-nav li .line_btn i{font-size: 26px; color: #3ace01;}
.navbar-light .navbar-nav .line_btn::before{content: none;}

.line_box{ position: absolute; top: 40px; right: 0; width: 0px; height: 0px; padding-top: 15px; transition: all 0.5s; overflow: hidden; }
.line_box.show_line{width: 250px; height: 350px; } 
.line_box:before{content: ""; position: absolute; right: 21px; top: 2px; 
                 width: 0;height: 0;border-style: solid;border-width: 0 12px 20px 12px;border-color: transparent transparent #13315c transparent;}

.line_box h3{ background-color: #13325c; color: #fff; padding: 10px; margin: 0; font-size: 20px; letter-spacing: 1px;}
.line_box div{background-color: #e9e9e9;  padding: 22px;  text-align: left;}
.line_box div img{ width:100% ; margin-top: 15px;}
 


 .swiper-button-next{background-image: url("../img/next.png");}
 .swiper-button-prev{background-image: url("../img/prev.png");}

/*--banner--*/
.banner{position: relative;}
.banner img{width:100%;}
.txt{position: absolute; top:10vw; right: 13vw;text-align: center;}
.txt h3{font-size:28px;font-weight:500; color:#0c3d7f; font-family: 'Noto Serif TC', serif; margin: 0;}
.txt h1{font-size:84px;font-weight: bolder; color:#0c3d7f; font-family: 'Noto Serif TC', serif; padding: 10px 0; letter-spacing: 2px;}
.txt p{font-size: 25px;color: #0c3d7f;letter-spacing: 5px;border-top: 1px solid; border-bottom: 1px solid; padding: 10px 0; font-weight: 600;}


.swiper-container-horizontal>.swiper-pagination-bullets{bottom: 20px;}
.swiper-pagination-bullet{width: 12px; height: 12px;}
.swiper-pagination-bullet-active{background: #0c3d7f;}
/*--about--*/
.about{
  background-image: url("../img/about_bg.png");
  position: relative;
}
.about h1,.about h6,.about p{color: #fff; letter-spacing: 2px;}

.about span{display:block;}
.about p{padding: 10px 0; font-size: 16px; font-weight: 600;}
.about .line{border-top: 1px solid rgb(255 255 255); width:2vw; margin-bottom:8px; margin-top: 8px;}
.about .button{background-color: #0d8cdc;border-radius: 25px;color: #fff!important;font-size: 18px;padding: 8px 55px; font-size: 15px;} 

/*--service--*/
.service{
  background-image: url("../img/service.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position:center;
  position: relative;
}
.service .inner{max-width: 1196px; margin: auto;}
.service h1,.service h6,.service p{letter-spacing: 2px;}
.service span{display:block; font-weight: 600; color: #333333;}
.service p{padding: 10px 0; font-size: 14px; letter-spacing: 0; margin-top: 8px;}
.service .title{margin:0;}
.service .line{border-top: 1px solid #0c3d7f; width:2vw; margin-bottom:8px; margin-top: 8px;}
.service .row>div{height: 210px;}
.service .info, .service .info_back{width: 210px; top:0; left: 0; right: 0; margin: auto; position: absolute; padding: 10px; }
.service .info{z-index: 0; background-color: rgb(255 255 255 / 0.7);border-radius: 25px 0 25px 0;}
.service .info .all{background-color: #fff;border-radius: 25px 0 25px 0;padding: 35px 17px;}
.service .info .all p{font-size: 16px;}
.service .info_back{ z-index: 1; opacity: 0;}
.service .info_back .all{ padding: 13px; display: flex; justify-content: center; align-items: center;}
.service .info_back .all p{ padding: 0; margin: 0; text-align: left; letter-spacing: 0.5px; line-height: 1.4;}
.service .info .info_btn, 
.service .info_back .info_btn{    position: absolute; left: 0px; right: 0px; bottom: 21px; text-align: center; padding: 2px 0; 
                                  margin: auto; width: 100px; background-color:#0c3d7f; color: #fff; border-radius: 30px; font-size: 15px;}

.sp_div .info_back .all{align-items: initial;}
.sp_div .info .all p{ line-height: 1.2; letter-spacing: 3px;  font-size: 14px;}

.service .all{ height: 190px;}

/*--project--*/
.project{background-color: #e9e9e9;}
.project .inner{max-width: 1028px; margin: auto;}
.project .list{border: 1px solid #ccc;}
.project .list .pic{overflow: hidden; position: relative;}
.project .list .pic a{position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-shadow: inset 1px 1px 40px 0 rgba(0, 0, 0, 0.45); z-index: 10;}
.project .list .pic img{transform: scale(1,1);transition: all 1.5s ease;}
.project .list .pic:hover img {transform: scale(1.2,1.2);opacity: 0.5;}
.project .info{background-color: #fff; border-bottom: 5px solid #0c3d7f; min-height: 365px; }
.project h1,.project h2,.project p{letter-spacing: 2px;}
.project h2{font-size: 24px; font-weight: 600;}
.project span{display:block; color: #717171; text-align: left; width: 100%; position: absolute; bottom: 12px;  left: 0;   padding: 0 25px;}
.project p{font-size: 14px; margin: 0; color: #717171; line-height: 25px; text-align: left;}
.project .line{border-top: 1px solid #0c3d7f; width:2vw; margin-bottom:8px; margin-top: 8px;}
.project .list .line{border-top: 1px solid #717171; margin-bottom:8px; margin-top: 8px; width: 100%;}
.project .fas{margin: 0 8px;}
.button{background-color: #0c3d7f;border-radius: 25px;color: #fff!important;font-size: 18px;
        padding: 8px 55px; font-size: 15px; display:inline-block; margin-top: 10px;} 


/*--join--*/
.join{
  background-image: url("../img/join.jpg");
  position: relative;
  background-repeat: no-repeat;
}

.join .inner{max-width: 1028px; margin: auto;}
.join h1,.join h6,.join p,.join li{letter-spacing: 2px;}
.join span{display:block;}
.join p{padding: 10px 0; font-size: 16px; margin-top: 8px;}
.join .line{border-top: 1px solid #0c3d7f; width:2vw; margin-bottom:8px; margin-top: 8px;}
.join .row{width: 680px; margin: auto;}
.join .info{background-color: rgb(255 255 255 / 0.7);padding: 35px;}
.join .all{background-color: rgb(255 255 255 / 0.6);padding: 60px 15px;}
.join ul{list-style: none; padding:0;}
.join .fas{color: #0c3d7f;}
.join ul li{font-size: 20px; line-height: 40px; font-weight: 600;}


/*footer*/
.footer{background-color: #313131;}
.footer p{margin: 0; color: #fff; letter-spacing: 2px; padding: 20px 0; font-size: 12px;}
.footer p span{color:#fff;}

/*about_inner*/
/* .about_story{padding-top: 85px;} */
.about_story .all{
  position: absolute;
  padding-top: 85px;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
}

.about_story h1{color:#fff;}
.about_story h6{color:#fff;}
.about_story .line{border-top: 1px solid #fff; width:2vw; margin-bottom:8px; margin-top: 8px;}
.about_story .banner{ background-position: center;  background-repeat: no-repeat; height: 27vw;}

.about_info{background-color: #f2f3f4;}
.about_info .inner{max-width: 1280px; margin: auto;}
.about_info h1{color:#0c3d7f; font-family: 'Times New Roman','Noto Serif TC', serif; font-size: 36px; font-weight: 400;}
.about_info h2{font-size: 17px; font-weight: 600; color:#333333; letter-spacing: 2px; padding-left: 30px; position: relative;}
.about_info h2::before{content: '';
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 1;
  width: 20px;
  height: 1px;
  margin-top: -.5px;
  background-color: #043248;}
.about_info span{display: block; letter-spacing: 2px; font-size: 14px;}
.about_info .pic_left{border: 1px solid #d2d2d4;}
.about_info .pic_left img{transform: translate(-8px, 8px);}
.about_info .pic_right{border: 1px solid #d2d2d4;}
.about_info .pic_right img{transform: translate(8px, 8px);}

/*project_inner*/
/* .project_list{padding-top: 9vh;} */
.project_list .banner{ background-position: center;  background-repeat: no-repeat; height: 21vw;}
.project_list .all{
  position: absolute;
  padding-top: 85px;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
}

.project_list h1{color:#fff;}
.project_list h6{color:#fff;}
.project_list .line{border-top: 1px solid #fff; width:2vw; margin-bottom:8px; margin-top: 8px;}

.project_info{background-color: #f2f3f4;}
.project_info .inner{max-width: 1280px; margin:auto;}
.project_info .list{border: 1px solid #ccc;}
.project_info .pic{overflow: hidden; position: relative;}
.project_info .pic a{position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-shadow: inset 1px 1px 40px 0 rgba(0, 0, 0, 0.45); z-index: 10;}
.project_info .pic img{transform: scale(1,1);transition: all 1.5s ease;}
.project_info .pic:hover img {transform: scale(1.2,1.2);opacity: 0.5;}
.project_info .info{background-color: #fff; border-bottom: 5px solid #0c3d7f;}
.project_info h1,.project_info h2,.project_info p{letter-spacing: 2px;}
.project_info h2{font-size: 24px; font-weight: 600; color:#333333;}
.project_info span{display:block; color: #717171; text-align: left;}
.project_info p{padding: 10px 0; font-size: 14px; margin: 0; color: #717171; line-height: 25px; text-align: left;}
.project_info .list .line{border-top: 1px solid #717171; margin-bottom:8px; margin-top: 8px; width: 100%;}
.project_info .fas{margin: 0 8px;}

/*link*/

.link_list{ background-color: #f2f3f4;}
.link_list .banner{background-position: center; background-repeat: no-repeat; height: 21vw;}
.link_list .all{
  position: absolute;
  padding-top: 85px;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
}

.link_list h1{color:#fff;}
.link_list h6{color:#fff;}
.link_list .line{border-top: 1px solid #fff; width:2vw; margin-bottom:8px; margin-top: 8px;}

.link_info{background-image: url("../img/fire.png"); background-repeat: no-repeat; background-position-y: bottom;background-size: 65%;background-position-x: right;}
.link_info .inner{max-width: 1280px; margin: auto;}
.link_info .check{background-color: #fff; border-radius: 25px 0 25px 0; box-shadow: 4px 1px 7px hsl(0deg 7% 83% / 70%); height: 215px;}
.link_info .check p{color: #333333; border-top: 1px solid #333333; padding-top: 16px; }
.link_info .title{background-color: #0c3d7f;display: inline-block;color: #fff;padding: 10px 30px; margin:0; font-size: 16px;}
.link_info .photo{height: 8vw;}

.link_div .row>div{transition: all 0.5s; transform: translateY(0px);}
.link_div .row>div:hover{transform: translateY(-10px);}




/*--contact--*/
.contact_list{ background-color: #f2f3f4;}
.contact_list .banner{background-image: url("../img/contact.jpg"); background-position: center; background-repeat: no-repeat; height: 21vw;}
.contact_list .all{
  position: absolute;
  padding-top: 85px;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
}

.contact_list h1{color:#fff; }
.contact_list h6{color:#fff; }
.contact_list .line{border-top: 1px solid #fff; width:2vw; margin-bottom:8px; margin-top: 8px;}
.contact_list .inner{max-width: 1280px; margin: auto;}
.contact h2{margin-top: 10px; font-weight: bold; color:#333333; letter-spacing: 2px; font-size: 21px; border-bottom: 1px solid #a5a5a8;}
.contact .fa{width: 35px; height: 35px; font-size: 20px; border: 1px solid  #0c3d7f; color: #0c3d7f;
   border-radius: 50px; line-height: 35px; margin-right: 10px; margin-top:10px; margin-bottom:10px; display: inline-block; text-align: center;}
.contact label{font-family:'Microsoft JhengHei',sans-serif; color:#202020; letter-spacing: 1px;}
.contact input{letter-spacing: 1px;}
.contact textarea{letter-spacing: 1px;}
.contact span{display: block; letter-spacing: 1px;}
.contact .button{letter-spacing: 1px;}

 


 /*-- 平板 --*/
 @media(max-width:1024px){
    /*about*/
    .about_story .banner {background-position-x: center; background-size: cover;}
    .about_story {padding-top: 7vh;}

   /*link*/
   .link_list .banner {background-position-x: center; background-size: cover;}
   .link_list {padding-top: 7vh;}
   .link_info .check { height: 160px;}

   /*contact*/
   .contact_list .banner {background-position-x: center; background-size: cover;}
   .contact_list {padding-top: 7vh;}
 }
 @media(max-width:780px){

  .navbar-nav li{ justify-content: center; border-bottom: 1px solid #e4e4e4;}
  .navbar-nav li:last-child{border-bottom: none;}

   /*about*/
   .about_story .banner {background-position-x: center; background-size: cover;}
   .about_story {padding-top: 9vh;}

  /*link*/
  .link_list .banner {background-position-x: center; background-size: cover;}
  .link_list {padding-top: 10vh;}
  .link_info .photo {height: 18vw;}
  .link_info .check { height: 215px;}

  /*contact*/
  .contact_list .banner {background-position-x: center; background-size: cover;}
  .contact_list {padding-top: 9vh;}

 
 }

 @media(max-width: 420px){

  /*footer*/
  .footer p span{ color:#fff; display: block;}

  /*menu*/
  .menu{    padding: 4px 10px;}
  .navbar-light .navbar-brand img{width: 150px;}
  .navbar-light .navbar-toggler{border-color: rgb(0 0 0 / 0%);}
  
  /*--banner--*/
  .banner {margin-top: 65px;}
  .banner .all{padding:0 ;}
  .txt{padding: 0 10px; top: 47vw; right: 4vw;  font-family: 'Noto Serif TC'; color: #0c3d7f;}
  .txt h3{font-size: 15px;}
  .txt h1{ font-size: 32px;  padding: 5px 0 15px 0;}
  .txt p{ font-size: 15px; letter-spacing: 1px; padding: 7px 0;}
  .banner .all h6{ margin: 0;}
  .banner .all h1{ font-size: 1.5rem;}
  .banner .all hr{width: 10vw;}
  .swiper-container-horizontal>.swiper-pagination-bullets{bottom: 2px;}

  .bh_img{background-size: cover;height: 90vh!important; background-position: center;}

  /*about*/
  .about_story {padding-top: 3vh;}
  .about_story .banner {
    margin-top: 43px;
    height: 45vw;
    background-size: cover;
    background-position-x: center;
  } 
  .about_info .inner .row{margin: 0;}
  
  /*--service--*/
  .service{background-attachment:initial; background-size: cover;}
  .service span{ letter-spacing: 0.5px;}
  .service p{font-size: 12px;}
  .service .info{margin:10px;}
  .service .info .all p{ font-size: 15px;}
  .service .all{padding: 35px 12px; height: 166px;}
  .service .info, .service .info_back{width: 90%; margin: 10px;}
  .service .info_back .all p{line-height: 1.4;}
  .service .info .info_btn, .service .info_back .info_btn{   font-size: 12px;}

  .service .sp_div .info .all{ padding: 15px 17px;}
  .service .sp_div .all p{margin: 0px; font-size: 13px;}
  .service .sp_div .all p span{letter-spacing: 0; line-height: 1.4;}
  .service .sp_div .info_back .all p{ line-height: 1.2;}
  
  /*--join--*/
  .join .row {width: 100%;}
  .join .info{padding:20px;}
  .join ul{margin: 0;}
  .join ul li {font-size: 17px;line-height: 32px;}

    /*--about_info--*/
   .about_info span{display: inline; font-size: 15px;}

   /*project*/

 .project_list {padding-top: 3vh;}
 .project_list .banner {
  margin-top: 43px;
  height: 45vw;
  background-size: cover;
  background-position-x: center;
} 

 /*link*/
 .link_list {padding-top: 3vh;}
 .link_list .banner {
  margin-top: 43px;
  height: 45vw;
  background-size: cover;
  background-position-x: center;
} 
 .link_info .photo {height: 44vw;}

 /*contact*/
 .contact_list {padding-top: 3vh;}
 .contact span{font-size: 14px;}
 .contact .que{display: inline;}
 .contact_list .banner {
  margin-top: 43px;
  height: 45vw;
  background-size: cover;
  background-position-x: center;
} 

 .contact_list .line{width:10vw;}

 }