@charset "UTF-8";/*防止亂碼*/
html{font-size:100%;}/*讓設定的文字大小反應*/
body{}
a{text-decoration:none;}/*指定a的底線*/
img{max-width:100%;}/*避免圖片過大*/
.page-header{display:flex;
  justify-content:space-between;}
.wrapper{max-width:1100px;margin: 0 auto;padding: 0 4%}
#companylogo{;margin-top:45px;}
h6{margin:10px;font-size: 15px;}

.index-nav{display:flex;font-size:25px;
text-transform:uppercase/*大字*/;margin-top:34px;
list-style:none;
font-family:"Noto Sans JP", sans-serif;font-weight:1000;
}
.index-nav li{margin-left:36px;padding-top:30px;}
.index-nav a{color:#333333;}
.index-nav a:hover{color:#ffffff;transition-duration:0.6s;}

#home{background-image:url(../img/testbackground.jpg);
min-height:100vh/*高度填滿*/;}
#home .slogan{text-transform:none;/*不變換文字全行半行*/}
.index-content{text-align:center;margin-top:10%;}
.index-content p{font-size:1.125rem;margin:10px/*上*/ 0/*左右*/ 42px/*下*/}
.slogan{font-size:50px;font-family:'Noto Sans JP',}
.button{font-size:1.375rem;background:#0bd;color:#fff;border-radius:5px;
  padding:18px 32px;text-align:center;}
.button:hover{background:#0090aa;transition-duration:0.6s;}
/*背景*/
.big-bcpic{background-size:cover/*保持圖片長寬比填滿*/;
  background-position:center top;
background-repeat:no-repeat;}
/*公司介紹介面抬頭*/
#companyindex{background-image:url(../img/banner.jpg);
height:270px;margin-bottom:40px;}
#companyindex .slogan{text-align:center;margin-top:30px;}

/*聯絡資訊*/
#contactindex{background-image:url(../img/banner.jpg);
  height:270px;margin-bottom:40px;}
#contactindex .slogan{margin-top:30px;text-align:center;
  }
/*產品分頁抬頭*/
#productbg {background-image:url(../img/banner.jpg);
height:140px;margin-bottom:40px;}
/*產品頁面抬頭*/
#productindex{background-image:url(../img/testbackground.jpg);
height:240px;margin-bottom:40px;}
#productindex .slogan{text-align:center;margin-top:30px;font-size:50px;}
/*Fotter*/
#indexcopy{color:#ffffff;
  font-size:10px;
  font-family: 'Noto Serif Tc',serif;text-align:center;
  padding:1px;background-color: #009FCC;margin-top:0;
  }
#cofooter{background:#44464a;text-align:center;padding:26px 0;
    color:#fff;font-size:20px;font-family:'Noto serif Tc',serif;
  }
#qufooter{background:#44464a;text-align:center;padding:26px 0;margin-top:500px;
color:#fff;font-size:20px;font-family:'Noto serif Tc',serif;}
#profooter{background:#44464a;text-align:center;padding:26px 0;color:#fff;
  margin-top:50px;
  font-size:20px;font-family:'Noto serif Tc',serif;}
  /*公司介紹主文邊欄*/
section{width:78%;border:3px #ffffff solid;}
aside{width:22%;}
.companyintro {display:flex;justify-content:space-between;
margin-bottom:50px;}
.info-title{font-family:'Noto Sans JP',sans-serif;
font-size:35px;font-weight:normal;}
section img{margin-bottom:20px;opacity:0.8;}
section p{font-family:'Noto Sans HK',sans-serif;margin-bottom:20px;}
.sub-title{font-size:25px;padding:0 0 8px;
border-bottom:2px #0bd solid/*底線*/;font-weight:normal;
}
.infop {margin-bottom:10px;margin-left:10px;margin-right:10px;}
.infop p:first-letter {font-size:1.5rem;}
.sub-menu{margin-bottom:60px;list-style:none/*去掉圓點*/;}
.sub-menu li{border-bottom:1px #ddd solid;}
.sub-menu a{color:#432;padding:10px;display:block;/*選取範圍變大*/}
.sub-menu a:hover{color:#0bd;}
/*詢價單*/
.quoframe{margin-top:170px;margin-bottom:100px;}
/*聯絡方式*/
.location-info a {color:#4699ca;display:block;}
.location-info a:hover {color:#97cdf3;}
.location-map{width:100%;}
/*iframe*/
iframe{100%;}
/*產品介紹首頁*/
.flex p{font-family:'Noto Sans HK',sans-serif;
font-size:25px;border-bottom:2px #009bc6 solid;}
.flex {display:grid;grid-template-columns:1fr 1fr;gap:20px;
max-width:1200px;margin: 0 auto;padding: 0 4%}
.item img:hover{

}
.item{;text-align:center;font-family:'Noto Sans HK',sans-serif;}
.item img{;transition-duration:0.9s;/*變化時間*/}
.itempic{display:block;overflow:hidden;height:100px;border:3px solid #ffffff;}
.itempic img:hover{opacity:0.5;transition-duration:0.6s;}
.itemcover {overflow:hidden;border:2PX solid #ffffff;height:270px;display:block;
}
.itemcover img:hover{transform:scale(1.1)/*擴大X軸Y軸各1.2*/;
cursor:pointer/*指定滑鼠*/;}
.itemcoverty {overflow:hidden;border:2PX solid #ffffff;height:270px;display:block;
margin-top:100px;margin-bottom: 25px;}
.itemcoverty img:hover{cursor:pointer/*指定滑鼠*/;}
/*產品介紹分頁*/
.pageheight{min-height:450px;}
.productbg-title{margin-bottom:40px;}
.productbg-title h2{font-size:30px;padding:0 0 5px;
border-bottom:2px #009bc6 solid;font-family:'Noto Sans JP',sans-serif;
font-weight:bold;}
.productbg-title p{font-size:20px;font-family:'Noto Sans HK',sans-serif;
margin-top:10px;}
.productbg-title a{display:block;color:#432;}
.grid{display:grid;gap:26px;
grid-template-columns:repeat(2,1fr);
margin-top:6%;margin-bottom:50px;}
/*品牌分頁*/
.itempage{display:flex;justify-content:space-between;margin-bottom:50px;
  border:3px #ffffff solid;max-width:1100px;margin: 0 auto;padding: 0 4% ;
min-height:500px;}

.itemtitle{margin-top:20px}
.itemtitle h2{font-size:20px;padding:0 0 8px;border-bottom:2px #0bd solid;font-weight:normal;}
.itemtitle p{padding:12px 10px;font-size:13px;font-family:'Noto Serif Tc',serif;
line-height:1.5;}
.itemtitlea {margin-top:15px;}
.itemtitlea a{margin:0;line-height:2;color:#432;border-bottom:2px #ff9514 solid;display:block;
padding-left: 5px;}
.itemtitlea a:hover{border:2px #ff9514 solid;border-radius: 5px;}

.itemlist h4{font-family:'Noto Sans JP',sans-serif;font-size:35px;
font-weight:bold;}
.itemlist h1{font-family:'Noto Sans JP',sans-serif;font-size:35px;
font-weight:bold;margin-bottom: 5px;margin-top: 0;}
.itemlist li{text-align:center;margin-top:20px;font-size:20px;list-style:none;font-family:'Noto Sans HK',sans-serif;
border:3px solid #ffffff;}
.itemlist ul{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;
}
.itemlist .it_mu {margin-bottom: 40px;}
.itemlist .it_mu_sub{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
margin-top:10px;}
.itemlist .it_mu_sub li{min-height: 300px;margin:0;
/*border:solid 1px #000; border-radius: 10px;*/
}
.itemlist .it_mu_sub li img{margin-top: 10px;margin-bottom: 10px;}
.itemlist .it_mu_sub li h2{font-size: 17px;margin:0 1.3%;}
.itemlist p{font-size:15px;font-family:'Noto Serif Tc',serif;padding-top:10px;}
.itemlist img{width:50%;height:auto;}
.itemlist {margin-left:1%; }
.it_mu .button {text-align: left;padding:2px 10px;
cursor:pointer;border:solid #476c82 2px;color:#476c82;
background: #ffffff;
display: flex;display:flex;justify-content: space-between;

}
.it_mu .button.none{
  cursor:inherit;border:0;background: #383f40;
  color:#ffffff;
}
.it_mu .button.none:hover{background: #383f40;
color:#ffffff;}
.it_mu .button:hover{
  color:#ffffff;background: #476c82;
  transition: all 400ms;
  -webkit-transition: all 400ms;
}
.it_mu .button.click{  color:#ffffff;background: #476c82;}
.it_mu .button span{margin-top: 5px;}
.fa-2x:hover{color:#ffffff;}
.fa-2x.fa-rotate-45{
  transition: all 400ms;
  -webkit-transition: all 300ms;
  transform: rotate(45deg);
  -webkit-transform:rotate(45deg);
}

.it_mu .hidden{display:none;}
.it_mu_sub .buttonca{
  background-color:#fff;margin:0 ;padding:0;
border: 1px solid #405f99;border-radius: 10px;color:#405f99;
}
.it_mu_sub .buttonca:hover{color:#fff;background-color:#405f99;}

.buttonca {;font-size:18px;background-color:#7c7889;color:#ffffff;border-radius:10px;
padding:10px 15px;margin:0 5px;line-height:50px;}
.buttonca:hover{background-color:#ffffff;color:#7c7889;
  transition-duration:0.5s;}
.corner{text-align:right;}
.itemlist li{margin-bottom:30px;}
.faindex ul{list-style: none;}
.faindex .button{background-color: #ffffff;
  margin-top:20px;height:50px;width:150px;
display:block;text-align:center;padding:0;line-height:45px;
font-size:25px;
border-top-right-radius: 10px;
border-bottom-right-radius:10px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
cursor:pointer;
border: solid #405f99 1.5px;
color: #405f99;
}
.faindex .button:hover{background: #405f99;transition-duration:0.3s;color:#fff;}
.faindex .button.click{background: #405f99;transition-duration:0.3s;color:#fff;}
.faindex .hidden{display:none;}
.faindex .hidden li{display:flex;margin-left:50px;margin-top: 20px;}
.faindex .hidden h1{font-size: 21px;font-weight: normal;
  border:solid #ed7864 1.5px;
padding:10px 10px 10px 10px;border-bottom-left-radius:10px;border-top-right-radius:10px;
cursor:pointer;  }
.faindex .hidden p{margin-top: 0;margin-left: 10px;font-size:17px;
  height:50px;line-height:50px;}
.faindex .hidden h1:hover{background-color:#ed7864;color: #152033;
transition-duration:0.3s;}
.faindex .hidden .grid{display:block;}
.faindex .hidden .item{display:flex;
margin-top:20px;margin-left: 0;}
.faindex .hidden .itemcoverty{
  height:60px;margin-top:0;display:flex;


}
.faindex .hidden .itemcoverty:hover{
  border:2px solid #696969;transition-duration:0.3s;
border-radius:4px;}
.faindex .hidden .itemcoverty img{height: 55px;
  margin:1px 1px 1px 1px;
  text-align:center;
}
.brandlist {list-style-type: none;display:grid;grid-template-columns: repeat(4,1fr);
  ;align-items:center;grid-template-rows:repeat(3,45px);
text-align:center;margin-top: 20px;grid-row-gap:10px;grid-column-gap:5px;
margin-bottom:50px;font-size: 20px;}
.brandlist li{background-color:#405f99;height:45px;line-height: 45px;border-radius: 10px;
color:#fff;}

/*hiddenbox*/
.hidden_box{margin:1px 0;padding:0;}
.hidden_box label{padding:5px;font-weight:bold;
background:#ffffff;cursor:pointer;font-size:15px;}
.hidden_box label::before{display:inline-block;
content:"\f105";font-family:"Font Awesome 5 Free";padding-right:5px;
transition-duration:0.2s;font-weight:900;}
.hidden_box label:hover{border-bottom:1px #47763C solid;}
.hidden_box input:checked+ label {border-bottom:1px #47763C solid;}
.hidden_box input:checked + label::before{
  content:"\f105";transform:rotate(90deg);font-weight:900;font-family:"Font Awesome 5 Free";}
.hidden_box input{display:none;}
.hidden_box .hidden_show{
  height:0;padding:0;overflow:hidden;opacity:0;
  transition-duration:0.2s}
  .hidden_box input:checked + label + .hidden_show{
  padding:10px 0;height:auto;opacity:1;}
.prointro li{text-align:center bottom;max-width:;font-size:15px}
.prointro ul ::before{content:"\f058";font-family:"Font Awesome 5 Free";font-weight:900;
padding-right:5px;color:#31A6FF;}
.it_mu_sub .prointro{min-height: 100px;margin: 10px 1.3% 10px 1.3%;}
.it_mu_sub .prointro ul{display:flex;flex-direction: column;
min-height: 60px; }
.it_mu_sub .prointro li{border:none;min-height:none;
  text-align: left;margin-left: 4%;min-height: 20px;font-size: 14px;}
/*至頂按鈕*/
#pagetop{width:50px;
height:50px;
position:fixed;
right:5px;
bottom:10px;
background:#00bfff;
opacity:0.8;
border-radius:50%;
}
#pagetop a{position:relative;
display:block;
width:50px;
height:50px;
text-decoration:none;
}
#pagetop a::before{
  font-family:'Font Awesome 5 Free';
  font-weight:900;
  content:"\f102";
  font-size:25px;
  color:#fff;
  position:absolute;
  width:25px;
  height:25px;
  top:-5px;
  bottom:0;
  right:0;
  left:0;
  margin:auto;
  text-align:center;
}
/*news*/
.news .slogan{
text-transform:uppercase;
font-size:3rem;
font-weight:3000;
color:#fffafa}
article{width:74%;margin-bottom: 50px;}
.post-info{
  position:relative;
  padding-top:4px;
  margin-bottom:40px;
}
.post-title{
  margin-left:100px;margin-top:10px;
}
.post-date
{
background:#f4b3c2;
border-radius:40%;
color: #fff;
width:65px;
height:65px;
font-size:17px;
text-align:center;
position: absolute;
top:0;
padding-top:10px;
}
.post-date span
{
  font-size:15px;
  border-top:1px #fff solid;
  padding-top:1px;
  display:block;
  width:60%;
  margin:0 auto;

}
.post-category
{
  margin-left: 100px;
  margin-top: 5px;
}
article img
{
  margin-bottome:20px;
}
.post-content img{padding-right:15px;max-width:75%}
/*小框*/
.frame iframe {background-color: #ebf6f7;
margin-top:30px;}
.update p
{
  margin-left:5px;margin-top:2px;
}
.update a {color:#432;
  margin-left: 10px;
  margin-top:2px;
  display:block;}
.update a:hover}{color:#ff2f00;}
/*公司介紹表格*/
.companyintro_table{
  width:100%;
  border:1px solid #1f2f49;

}
.infop table{
  display:table;
  border-collapse:collapse;
  -webkit-border-horizontal-spacing: 0px;
  -webkit-border-vertical-spacing: 0px;

}
.companyintro_table tr{
  border:0;padding:6px 10px;
}
th,td{
  font-size: 14px;
}
.companyintro_table th{
  background:#00bbdd17;
  padding:6px 10px;
  border:1px solid #1f2f49;
  word-break:break-all;
  text-align:left;
  font-weight: normal;

}
.companyintro_table td{padding:6px 10px;
  border:1px solid #1f2f49;}
.companyintro_table dt{
  float:left;
}
.companyintro_table dd{
  margin-inline-start:60px;
  margin-bottom: 5px;
}
.companyintro_table ul{
  list-style: none;
}
.companyintro_table ul li::before{
  font-family:"Font Awesome 5 Free";
  font-weight:900;
  content:"\f0da";
  color:#ff9b45;
  width:2em;
  height:25px;
  top:0;
  left:0;margin:auto;
  text-align:center;
  padding-right: 5px;
}


/**/
@media(max-width:883px)
{
  body{-webkit-text-size-adjust:100%;}
  .slogan{font-size:26px;}
  /*header*/
  .index-nav{display:block;font-size:20px;margin-top:10px;}
  .index-nav li{margin:0 20px;padding-top:5px;}
  .page-header{
    flex-direction:column;
    align-items:center;
  }
#rcl{display:flex;flex-direction:row;}
  .spannavi
  {
    position:relative;
    margin-top:50px;
    width: 30px;
    height:30px;
    margin-left:10px;
    z-index: 3;
    box-sizing: border-box;
    cursor: pointer;
    -webkit-transition: all 400ms;
    transition: all 400ms;
  }
  .spannavi span
  {
    position:absolute;
    width:30px;
    height:4px;
    background:#4d4d4d;
    border-radius:10px;
    -webkit-transition:all 400ms;
    transition:all 400ms;
  }
  .spannavi span:nth-child(1)
  {
  top:10px;
  }
  .spannavi span:nth-child(2)
  {
  top:20px;
  }
  .spannavi span:nth-child(3)
  {
    top:30px;
  }
  .spannavi.open span:nth-child(1)
  {
    width:35px;
    -webkit-transform: translate(-5px,10px) rotate(45deg);
    transform: translateY(-5px,10px) rotate(45deg);
  }
  .spannavi.open span:nth-child(2)
  {
    width:0px;
  }
  .spannavi.open span:nth-child(3)
  {
    width:35px;
    -webkit-transform: translate(-5px,-10px) rotate(-45deg);
    transform: translate(-5px,-10px) rotate(-45deg)
  }


  nav{width:284px;text-align:center;}
  .index-nav{display:grid;grid-template-columns:repeat(2,1fr)}
  .navhidden
  {
  height:0;padding:0;overflow:hidden;opacity: 0;
  transition:all 0.6s;

  }
  .navhidden.show
  {
    overflow-y: hidden;padding:0;opacity:1;height:auto;


  }

  /*navi*/
  .index-content{margin-top:5%;}
  /*index*/
  .productbg-title{text-align:center;font-size:2rem;}
  .grid{display:grid;gap:26px;grid-template-columns:repeat(1,1fr);}
  .itemlist ul{display:grid;grid-template-columns:repeat(1,1fr);gap:10px;}
  .itemlist h4{font-size:20px;}
  .itemlist h1{font-size:20px;}
  .itemlist p{font-size:10px;}

  .itempage{flex-direction: column;}
  article{width:100%;order:1;}
  aside{width:100%;order:2}
#companyindex .index-nav li a{color:#ffffff;}
aside{margin-top:60px;margin-bottom:50px;}
.post-info{margin-bottom:30px;}
.slogan{color:#ffffff}
.companyintro{flex-direction:column;}
section{width:100%;}
#contactindex .index-nav li a{color:#ffffff;}
#contactindex .slogan{font-size:40px;text-align:center;}
.info-title{font-size:30px;}
.info{margin-bottom:20px;}
.post-content img {max-width:100%;}
/*fa*/
.faindex {display:block;}
.faindex .hidden li{margin-left: 0;display: flex;flex-direction: column;
justify-content: center;}
.faindex .button{width:auto;}

.faindex .button.click{width:auto;}
.faindex .hidden p{margin-left: 0;margin-top: 0.5rem;font-size: 1rem;}
.faindex .hidden .item{margin-left:0;}
.faindex .hidden .grid{justify-content: center;display: flex;
  flex-direction: column;align-items: center;}
.faindex .hidden .itemcoverty{width:auto;height:auto;}
.brandlist{grid-template-columns:repeat(2,1fr);font-size: 0.9rem;}
.itemlist{margin-left: 0;}
.itemlist .it_mu_sub
{
  grid-template-columns:repeat(1,1fr);
}
.it_mu .button {text-align:center;}
.faindex .hidden p{height: auto;line-height: normal;}
.it_mu .button .fa-2x{font-size: 1.5rem;}
.it_mu .button span{margin-top: 1px;}
.itemtitlea a{border: 2px #ff9514 solid;border-radius:5px;text-align: center;padding-left: 0;}
.itemtitle {text-align: center;}
/*table*/
.infop table
{
  display: block;
  width:auto;
  border:none;
}
.companyintro_table tbody{
  display: block;
  width: auto;
}
.companyintro_table tr{
  padding: 0;
}
th,tr,td{
  display: block;
  width:auto;
}

}