/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,

footer, header, hgroup, menu, nav, section {

  display: block; }

ul{list-style: none;    padding-left: 0;}

a {

  text-decoration: none; color: #525252;}

a:hover{color: #144897; }  

blockquote, q {

  quotes: none; }



blockquote:before, blockquote:after,

q:before, q:after {

  content: '';

  content: none; }

h2,h3,h4,h5,p{line-height: 1.5 !important;letter-spacing: 0!important;}

table {

  border-collapse: collapse;

  border-spacing: 0; }

.table{background-color: #fff;}

.table td{border-top:none}  

input:focus {

   outline: none;

}

/*===RWD img===*/

img {

  max-width: 100%;

  height: auto; 

}

/*======== CSS ========*/

*{ margin: 0;

  padding: 0;

  border: 0;

  font-weight: normal;

  vertical-align: baseline;

	/*CSS3語法:讓div的寬度不被padding,border影響*/

	box-sizing: border-box;

}



body{

	font-family: 'Poppins','微軟正黑體' , Arial, sans-serif;



	/*文字預設大小，其他用rem調整大小*/

  font-size:16px;line-height: 1.8;color: #333;

  position: relative;

}

button:focus,a:focus {

  outline:none;

}

.btn.focus, .btn:focus {

    box-shadow:none;

}

.w1400{max-width: 1370px; margin: auto;}

.gotop {

    position: fixed;

    right: 5px;

    bottom: 10%;

    text-align: center;

    width:50px;

    height: 50px;

    background: #E94F31;

    color: #fff;

    display: flex;

    justify-content: center;

    align-items: center;

    cursor: pointer;

    z-index: 10;

    font-size: 1.4rem;

}

.gotop:hover {

  transform: translateY( 0);

  background: #fff;

  color: #E94F31;

  border:1px solid #E94F31;

  transition: all .5s;

 

  

}

/* 手機漢堡選單 */



.hamburger {

    margin: 0 auto;



    width: 24px;

    height: 24px;

    position: relative;

}



.hamburger .bar {

    padding: 0;

    width: 24px;

    height: 2px;

    background-color: rgb(255, 255, 255);

    display: block;

    border-radius: 4px;

    transition: all 0.4s ease-in-out;

    position: absolute; 

}



.bar1 {

    top: 2px;

}



.bar2,

.bar3 {

    top: 10px;

}



.bar3 {

    right: 0;

}



.bar4 {

    bottom: 2px;

}

.checkbox1:checked + .brand label > .hamburger1 > .bar1{

    transform: rotate(45deg);

    transform-origin: 0%;

    width: 28px

}



.checkbox1:checked + .brand label > .hamburger1 > .bar2 {

    transform: translateX(-40px);

    background-color: transparent;

}



.checkbox1:checked + .brand label > .hamburger1 > .bar3 {

    transform: translateX(40px);

    background-color: transparent;

}



.checkbox1:checked + .brand label > .hamburger1 > .bar4 {

    transform-origin: 10%;

    transform: rotate(-45deg);

    width: 28px;

}

 .brand {

    display: flex;

    position: absolute;

    top: 20px;

    right: 10px;

}

#checkbox1 {

    display: none;

}





/* 手機漢堡選單end */

.wrap-sticky{

    position:relative;

}

.navbar{

  padding:  0;position: absolute;width: 100%;top:0;   z-index: 100;opacity: 0;

  /* background: linear-gradient(to bottom, rgba(188,188,188,0.3) 0%,rgba(188,188,188,0.2) 50%,rgba(255,255,255,0) 78%); */

}

.navbar.sticked{

  position: fixed;

  background: #001F3B;

  opacity: 1;

	transition: all 0.3s ease-in-out;

}

.navbar-header{

    display: flex;

    flex-wrap: wrap;

    margin-right: -15px;

    margin-left: -15px;

   

    

  }

.navbar-header:after{content: ""; clear: both;display: block;}



@media (min-width: 992px){

  .navbar{opacity: 1;}

  .navbar-header{width: 100%;}

    .brand{display: none;}

    #navbar-menu{

      display: flex;justify-content: space-between;

      flex: 1;

     }

    .navbar-nav{ flex-direction: row;}

 

}

.header{  

    width: 100%;

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: space-between;

}

.logo{margin-bottom: 0;}

.logo a{

    background: url(/frontEndPackage/images/LOGO.png) no-repeat;

    background-size: contain;

    background-position: center;

    text-indent: -9999px;

    display: block;

    width: 100%;

    padding: .5rem  3.6rem;

    margin: 0 0 0 5px;

    

}

.bootsnav ul.nav >li{ text-align: center;}

.bootsnav ul.nav >li.active a{ color: #E94F31;}

.bootsnav ul.nav >li a{ color: #fff;font-weight: 600;text-shadow: 0 0 5px rgba(0, 0, 0, .3);

  text-decoration: none; line-height: 1.8;font-size: 18px;display: block;padding:1rem 1.5rem;letter-spacing: 1px; 

}

.menu-info,.menu-info ul{display: flex;flex-wrap: wrap;align-items: center;   }

.menu-info{order: 0;margin-left: 0rem; }

.menu-info ul{margin-bottom: 0;margin-right:0; }

.menu-info ul li a,.phone a{color: #fff;text-shadow: 0 0 5px rgba(0, 0, 0, .5);text-decoration: none; font-size: 14px;padding: 0 6px;}

.phone a{text-align: center;    padding: 1rem 1.5rem;display: block;}

.menu-info ul > li{position: relative;}

.menu-info ul > li:after{content:''; width: 2px;height: 60%;position: absolute;right: 0;top: 20%;display: block;background-color: rgba(255, 255, 255, 0.7);}

.menu-info ul > li:last-child::after{display: none;}

.m-menu{position: absolute;right: 50px;}

.bootsnav li.dropdown ul.dropdown-menu {border-radius: 0;border:none;border-top: 1px solid #ccc;

    background: #fff;margin-left: .5rem;}

.navbar-collapse{margin-bottom: 1rem;}



@media (min-width: 992px){

  .navbar-collapse{margin-bottom: 0;}

  .bootsnav ul.nav >li a{padding:2rem 1.5rem;}

  .menu-info {  order: 1;}

  .menu-info ul li a,.phone a{font-size: 16px;}

  .menu-info ul li a{padding: 0 .6rem;}

  .logo{margin-bottom: 0;flex: 0 0 15%; width: 15%;}

  .logo a{padding: .5rem 2.5rem 1rem;}

  .bootsnav ul.nav >li a span{display: block;margin-left: 0;}

  .bootsnav ul.nav{flex-wrap: nowrap;}  

  .bootsnav ul.nav >li{ flex:1 1 auto;text-align: center; }

  .bootsnav ul.nav > li a {display: flex;padding:.5rem .8rem; background: transparent;}
  .bootsnav ul.en > li a {padding:.5rem ; }
  .bootsnav ul.nav >li.active a:before { width: 100%;}

  .bootsnav ul.nav >li a:before {bottom: -12px;}

  .bootsnav li.dropdown ul.dropdown-menu {position: absolute; text-align: center;border-top:none;

     box-shadow: 0 3px 5px rgba(0, 0, 0, .2);min-width: 100%;width: 9rem;padding: 0;}

  

} 





/* 輪播 */

 

.column, .columns {width: 100%; position: relative;}





/* owl-carousel貓頭鷹輪播 */

.slider{margin-top: -72px;}

.owl-theme .item{height:380px; background-size:cover;background-repeat: no-repeat;background-position:25% center;}



.slider .txt{position: absolute;left: 50%;width: 80%;top: 35%;display: flex;flex-wrap: wrap;margin-left: -40%;}
.slider.en .txt,.slider.jp .txt{top:25%; }
.slider .txt h2{color: #fff;background-color: #e95031d0;display: inline-block;padding: .5rem 1rem;font-size: 1.4rem; }
.slider.en .txt h2,.slider.jp .txt h2{font-size: 1.1rem;margin-bottom: 0;}
.slider .txt .btn{display: flex;flex-wrap: wrap;padding: 0;margin-top: 1rem;align-items: center;}

.slider .txt .btn a{background: #fff; color:#e95031 ; border-radius: 25px;padding: .5rem 1rem;margin: 0 .5rem ;}

.slider .txt .btn a~a{background: #e95031;color:#fff ;}

.owl-theme .owl-item.active .bannerTxt h3,.owl-theme .owl-item.active .bannerTxt h5,.owl-theme .owl-item.active .bannerTxt p{opacity: 1;transition: all 1s ease;transform: translateY(0);}

.owl-theme .owl-item.active .bannerTxt h3,.owl-theme .owl-item.active .bannerTxt h5{transition-delay: .5s;}

.owl-theme .owl-item.active .bannerTxt p{transition-delay: 1s;}

.scrollDown{position: absolute;

    left: 50%;

    width: 200px;

    margin-left: -100px;

    bottom: 5%;letter-spacing: 1px;

    text-align: center; color: #fff;z-index: 1;text-shadow: 0 0 5px rgba(0, 0, 0, .5);

    font-size: 85%;display: block;

  }

.scrollDown i{display: block;} 

.scrollDown:hover{color: #fff;text-decoration: none;}

.bounce {

    -moz-animation: bounce 2s ease-out infinite;

    -webkit-animation: bounce 2s ease-out infinite;

    animation: bounce 2s ease-out infinite;

}

.scrollDown i{display: block;text-align: center;}

@media(min-width: 768px){

  .slider .txt{width: 400px;}

}

@media(min-width: 992px){

  .slider .container{position: relative;height: 750px;}

  .slider .img-txt{

    background: url(/frontEndPackage/images/banner-txt.png) no-repeat;

    width: 40%;

    position: absolute;

    right: 5%;

    bottom: 12%;

    padding-top: 40%;

    background-size: cover;}
  .slider .img-txt-en{
    background: url(/frontEndPackage/images/banner-txt-en.png) no-repeat ; 
    background-size: cover; }  
  .slider .img-txt-jp{
    background: url(/frontEndPackage/images/banner-txt-jp.png) no-repeat ; 
    background-size: cover; }  
  .slider .txt{left:5%;width: 45%;top: 45%;margin-left: 0;}  
  .slider.en .txt,.slider.jp .txt{top:45%; }
  .slider .txt h2{font-size: 2rem;width: 100%;}
  .slider.en .txt h2, .slider.jp .txt h2{font-size: 1.8rem;}  
  .owl-theme .item{height: 750px;}

}



/* owl-carousel貓頭鷹輪播end */



/* 共用文字設定 */

.txt h3{ font-size: 1.3rem;}

.txt p{ font-size: 18px; color: #333333;}

.txt{margin: 1rem 0;}

.txt li{ color:#333333;}

.txt a{ color:#fff;text-decoration: none;}

a.moreBtn{background-color:#144897 ; color:#fff;padding:.4rem 1.25rem;display: block;transition: all .3s;margin: auto;width: 140px;border: 1px solid #144897;}

a.moreBtn:hover{text-decoration: none;color: #144897;

    background-color: #fff;

    border: 1px solid #144897; }

a.moreBtn i{font-size: 80%;transform: translateX(20px);transition: all .3s;}

a.moreBtn:hover i{transform: translateX(10px);}

@media(min-width: 768px){

  a.moreBtn{display: inline-block;}

}

/* 共用文字設定 end */

footer{padding: 1rem 0;overflow: hidden;background-color: #CFCFCF;}

footer .content,.photonic-footer{display: flex;flex-wrap: wrap;margin-bottom: 0;}

footer .content ul{display: flex;margin-bottom: 0;flex-wrap: wrap;}

footer .content ul li{padding: 0 15px;}

footer .content ul li a{color:#525252;}

footer p{margin-bottom: 0;}

.photonic-footer a{color: #999999;padding:0 .5rem; font-size: .9rem;}

.photonic-footer li:first-child a{padding: 0 .5rem 0 0;}

@media(min-width: 992px){

  footer{padding: 2rem 0;}

  footer .content img{display: inline-block;margin: 0;}

  footer .content .txt{margin: 0 1rem; }

  footer .content .txt p span{display: inline-block;}

  .photonic-footer a{ font-size: 1rem;}

}



/* 首頁內容 */

.service-box,.customer-box{position: relative;width: 100%;min-height: 520px;}

.service-box{position: relative;width: 100%;background: url(/frontEndPackage/images/bg.png) no-repeat center; background-size: cover;}

.service-box .content{padding:3rem 1rem;width: 100%;}



.main-title{width: 100%;text-align: center;position: relative;z-index: 1;margin-bottom: 1.5rem;}

.main-title p{font-size: 2.4rem;font-weight: 600;text-transform: uppercase;color: #E6E6E6;display: block;margin-bottom: 0;}

.main-title h2{ color: #525252;font-weight: 600;padding: .5rem 1rem;text-align: center; display: block;font-size: 1.4rem;margin-bottom: 0;margin-top: -1rem;}

.main-title h2:before{content: "";background: #E94F31;position: absolute;width: 40px;height: 3px;bottom: 0;transform: translateX(-50%);left: 50%;}

.item-service{display: flex;flex-wrap: wrap;margin-bottom: 0;}

.item-service li{padding: 0 1.5rem;flex:1 0 100%;margin-bottom: 1.5rem;}

.item-service li h3{ font-size: 1.2rem;display: flex;font-weight: 600;align-items: flex-start;}

.item-service li h3 span{ background: #E94F31;font-size: .6rem; color: #fff;width: 20px;height: 20px; display: flex;justify-content: center;align-items: center;margin-top: 1px;margin-right: .5rem;float: left;}
.item-service li h3 span~span{ width: calc(100% - 22px); float: left;background: transparent;font-size:1.2rem;color: #333;display: inline-block; height: auto;}
.item-service li p{text-align: justify; clear: both;}
.item-service-en li p{text-align:left;}

.service-box .content .txt{width: 100%;padding: 0 2rem;}

.service-box .content .txt p{ color: #E94F31; text-align: center; font-weight: 600;}

.service-box .content .txt p a{color: #E94F31; text-decoration: underline;}

.service-box .content .txt .btn{
    color: #fff;
    background: #E94F31;
    display: inline-block;
    margin: auto;
    margin-left: 50%;
    transform: translate(-50%);
    border-radius: 30px;
    padding: 1rem 2rem;
}

@media(min-width: 992px){

.main-title p{font-size: 2.8rem;}

.main-title h2{font-size: 1.6rem;}

.item-service li{flex:0 0 33.33%;padding: 0 3.4rem;}

}

/* 內頁 */

.main-banner{

  background: url(/frontEndPackage/images/page-banner.png)no-repeat left bottom; background-size: cover;padding-top: 5%;padding-bottom: 5%; margin-top: -70px;

}

.main-banner .main-title p{ color: #E94F31;}

.main-banner .main-title h2{color: #fff;}



/* QA */

.QA .content .item  .item-head{position: relative; display: block; text-align: left;width: 100%;color: #001F3B;font-size: 1.2rem;font-weight: 600;border-bottom: 2px solid #001F3B; padding:.5rem 1rem;}

.QA .content .item  .item-head:before{font-family: "Font Awesome 5 Free";content: "\f107";position: absolute;right: 0;}

.QA .content .item  .item-head.collapsed:before{transform: rotate(-90deg);}

/* .accordion .item:first-child .item-body{display: block;} */

.QA .content .item-body{

    border: 1px solid #ccc;

    padding: 1rem;

    border-radius: 5px;

    background-color: #fff;

    position: relative;

    margin: 2rem 1rem;}

.QA .content .item-body:before{

  border-color: transparent transparent #ccc transparent;

    border-style: solid;

    border-width: 15px 10px;

    top: -30px;

    content: "";

    height: 0px;

    width: 0px;

    position: absolute;

    left: 25px;

} 

.QA .content .item-body:after{

  border-color: transparent transparent #fff;

    border-style: solid;

    border-width: 15px 10px;

    top: -28px;

    content: "";

    height: 0px;

    left: 25px;

    position: absolute;

    width: 0px;

}

  .QA .content .item-body ul li,  .QA .content .item-body ol li{
    text-indent: -1.1rem;
    margin-left: 1.1rem;
  }

.contact.form{

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  margin: 2rem 0 3rem;

  text-align: left;

  position: relative;

  z-index: 3;

}

.contact .cerify-code-panel {

    display: flex;

    align-items: center;

}

.contact .verify-code-area{width: 50% !important;}

.submitBox{display: block; width: 200px; margin: auto;}

.submitBtn{

    border: 2px solid #001F3B;

    padding: .5rem 2rem;

    display: inline-block;border-radius: 0;

    background-color:#fff ;

    color: #001F3B;

    transition: all .5s;

 }





.submitBtn:hover{text-decoration: none;color: #fff;background-color:#E94F31 ;border: 2px solid #E94F31;}

.contact-list{position:relative;z-index: 3;}

.contact-list ul li{margin-bottom: 1rem;}

.contact-list ul li a{ color: #525252;text-decoration: none;}

.contact-list ul li span{margin-right: .5rem;width: 40px;height: 40px;  border-radius: 50%;border:3px solid #999 ;display: inline-block;text-align: center;font-size: 1.2rem; color: #999;}

 .sidebar-nav{ 

  margin-bottom: 15px;

  position: relative;

  z-index: 3;

}



.firstOrder a{background-color: transparent;color: #fff;display: block;text-decoration: none;padding: .5rem 1rem;}

.metismenu ul li  a{border-bottom: 1px dashed #ccc;background: #fff;color: #525252;}

.metismenu ul > li >a:hover{background-color: #f3f3f3;}

.metismenu ul li:last-child a,.metismenu ul ul li  a{border-bottom: none;}



#proMenu ul ul{

  padding-left: 15px !important;

}



.pro-items {display: flex; flex-wrap: wrap;width: 100%;}

.pro-items li{flex:0 0 98%; width: 98%;margin: 0 1%;}

.pro-items li .img{padding-top: 80%;background-repeat: no-repeat;background-position: center;position: relative; background-size: cover;border: 1px solid #eaeaea;}

.pro-items li .img i{    

    transform: translate(-50% , 0%);

    margin: auto;

    text-align: center;

    position: absolute;

    left: 50%;

    top: 50%;

    opacity: 0;

    font-size: 1.2rem;

    color: #525252; }

  

.pro-items li a:hover .img i{

    transition: all .8s;

    opacity: 1;

    transform: translate(-50% , -50%);

}

.pro-items li a .img:before {

    content: '';

    width: 100%;

    height: 100%;

    background-color: #e6e6e6a1;

    position: absolute;

    left: 0;

    top: 0;

    opacity: 0;border: 1px solid #e6e6e6a1;

} 

.pro-items li a:hover .img:before {

    transition: all .8s;

    opacity: 1;

}



.pro-items li .txt a.more{ border:1px solid #ccc; color: #333;padding: 5px 15px;border-radius: 5px;}

.pro-items li .txt .name{color:#144897;font-weight: 600;font-size: 1.2rem;}

.pro-items li .txt .num{margin-bottom: 1rem;}

.pagination {

    display: flex;

    justify-content: center;

    margin: 0.5rem 0;

    width: 100%;

}

.pagination a {

    color: #5a5a5a;

    padding: 0.5rem .6rem;text-decoration: none;

}

.pagination li.active a{ color:#1c69ac;font-weight: bold;text-decoration: underline;}

@media(min-width: 992px){

  .pro-items li{flex:0 0 31.33%; width: 31.33%;margin: 0 1% 1%;}
   /* .QA .content .item-body ul li,  .QA .content .item-body ol li{
    text-indent: 0;
    margin-left: 0;
  } */
}



.bgImg-responsive-12halfBy12 {

    padding-bottom: 80%;

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center;

}

.bgImg-responsive-pro-4 {

    padding-bottom: 25%!important;

    background-repeat: no-repeat;

    background-size: cover;

    cursor: pointer;

    background-position: center;

}

.swiper-container {

    margin-bottom: 8px;

}

.pro-content{position: relative;z-index: 3;}

.askBtn{margin-top: 1rem; border:2px solid #707070;padding: .5rem 2rem;display: inline-block;position: relative;}



.askBtn:before{content:'';position: absolute;

    top: 0;width: 0;transition:  all .5s ;

    height: 100%;

    z-index: -1;}  

.askBtn:hover:before{left: 0;

    width: 100%;

    background: linear-gradient(135deg , rgba(20,72,151,1) 0%,rgba(187,9,79,1) 100%);

}

.askBtn:hover{text-decoration: none;color: #fff;border:2px solid #ccc;}

.proTxt{padding: 1rem;}

.proTxt .proTitle{color: rgb(20, 72, 151); border-bottom: 1px solid #ccc;margin-bottom: 1rem;padding: .5rem 0 .5rem ;font-size: 1.4rem;position: relative;letter-spacing: 1px;font-weight: 600;}

.proTxt .proTitle:before{content:''; background-color: rgb(20, 72, 151);display: block;

    position: absolute;    

    bottom: -2px;

    left: 0;

    width: 45px;

    height: 5px; ;}

.proContent{margin-top: 2rem;}

.pro-info{border-top: 1px solid #ccc;padding-top: .5rem;}

.pro-info p{margin-bottom: 0;letter-spacing: 1px;}

.pro-info span.text-red{ color: #E81515;font-weight: 600;}

.pro-info span{display: inline-block;}