@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;200;300;400;500&display=swap');
{font-family: 'Noto Sans TC', sans-serif;}

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

{font-family: 'Bebas Neue', sans-serif;}

@import url('https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap');

{font-family: 'Fjalla One', sans-serif;}

#bodyinpage{
  background:url()no-repeat;
  background-position:top center;
  background-size:cover;
  background-attachment:fixed;
}

/*icon*/
.tel-icon{position:fixed;right:1%;top:43%;z-index:1000;transform:scale(0.7);}
.line-icon{position:fixed;right:1%;top:53%;z-index:1000;transform:scale(0.7);}
.mail01{position:fixed;right:1%;top:63%;z-index:1000;transform:scale(0.7);}
.mail02{position:fixed;right:1%;top:73%;z-index:1000;transform:scale(0.7);}

@media only screen and (max-width: 480px) {
  .tel-icon{position:fixed;right:1%;top:43%;z-index:1000;transform:scale(0.6)}
  .line-icon{position:fixed;right:1%;top:53%;z-index:1000;transform:scale(0.6)} 
  .mail01{position:fixed;right:1%;top:63%;z-index:1000;transform:scale(0.6)}
  .mail02{position:fixed;right:1%;top:73%;z-index:1000;transform:scale(0.6)}
}


/*logo*/

 #logo img {
   padding: 0 16px 16px 16px;
 }

/*top*/
.topnavbar .container {
  text-align: justify;
  font-size: 0;
  /*text-align: center;*/ 
  padding-top:0px;
}

.topnavbar .container::after {
  content: "";
  display: inline-block;
  width: 100%;
}

.topnavbar {
  background-color: #fff;
  top:0px;
  position: relative;
  z-index:100;
  width:100%;
  padding: .6rem 0;
  height: 100px;
}

/*nav*/
#nav ul li a {
    white-space: nowrap;
    color:#29166f;
    line-height: 1.3;
    font-weight: normal;
    padding: 10px 18px;
    font-size: 100%;
    border-right: 1px #888 dotted;
    transition:all 0.5s;
}

#nav ul li a:hover{
  color:#178cc2;
 }


#nav ul li a::before {
  content:"";
  border-top:3px solid #76c5f0;
  width:0;
  position:absolute;
  left:0;
  right:0;
  top:5px;
  margin:0 auto;
  transition:.3s all ease
}

#nav ul li a:hover::before {
 width:50%;
}

#nav ul li.current a::before  {
  content:"";
  border-top:1px solid #76c5f0;
  width:50%;
  position:absolute;
  top:5px;
  margin:0 auto;
}

#nav ul li.current a{
  color:#29166f;
 }


#nav ul li.current a:hover{
  color:#29166f;
 }


/*Banner*/
.swiper-container {
  height: auto !important;
}

.swiper-wrapper, .swiper-slide {
  height: 0 !important;
  padding-bottom: calc(750 / 1920 * 100%); /* 注意圖片高度與寬度要去掉單位 */
}

.swiper-slide {
  width: 100% !important;
}

/*h1*/

.h1title h1{
	text-align:center;
    font-size: 35px;
    background: url(https://static.iyp.tw/409161/files/09b6c5e2-ac4a-4591-a53b-72a86626e022.png) no-repeat center bottom;
    text-transform: uppercase;
    color: #5c5c5c;
    padding: 30px;
}

/*ABOUT_01*/

#bodyinpage.rwd-collapse.viewmode.default.about-us .fcol.fcol-1 .container{
  padding:0px 0px;
}

#bodyinpage.rwd-collapse.viewmode.default.about-us .fcol.fcol-1 {
  background:url()no-repeat;
  background-position:top center;
  background-size:cover;
}

.about01{
	margin:10px;
	padding:15px 20px;
	border-radius:20px;
	font-family:'Noto Sans TC';
	font-weight:300;
	font-size:16px;
}

.img-01{
	padding:10px;
	margin-left:50px;
	margin-top:-300px;
	background:#fff;
	filter: drop-shadow(0 0 0.3rem #6699CC);
}

.img-02{
	margin-top:25px;
	margin-right:-50px;
	padding:10px;
	width: 300px;
    height: 350px;
	filter: blur(5px);
}


/*ABOUT_02*/

#bodyinpage.rwd-collapse.viewmode.default.about-us .fcol.fcol-2 {
  background-color:#EAEBEF;
  background-position:top center;
  background-size:cover;
}

.more-btn{
    width: 150px;
    height: 40px;
	padding:5px 10px;
	background-color:#0d3e8c;
	display: flex; justify-content: center; align-items: center;
	font-family:'Noto Sans TC';
	font-weight:400;
	color:#fff;
	cursor: pointer;
	border-radius:5px;
	transition-duration: .5s;
}
.more-btn:hover{
	background-color:#cfeeff;
	color:#0d3e8c;

}

/*ABOUT_03*/

#bodyinpage.rwd-collapse.viewmode.default.about-us .fcol.fcol-3 {
  background-color:#0d3e8c;
  background-position:top center;
  background-size:cover;
}

.ser-box{
	background:#fff;
	padding:5px;
	border-radius:10px;

}

.ser-box:hover{
	transition-duration: 1s;
	background:#cfeeff;
}

.ser-icon{
	filter:grayscale(80%);
	margin:10px;
	transition-duration: .5s;
}

.ser-icon:hover{
	filter:none;
	margin:10px;
}

.ser-text{
	margin:10px;
	font-family:'Noto Sans TC';
	font-weight:400;
	font-size:16px;
  	transition-duration: .5s;
}

.ser-text:hover{
	color:#29166f;
}


/*廠內設備*/

.product .h1title {display: none;}

.B_title h1{
	text-align:center;
    font-size: 35px;
    background: url(https://static.iyp.tw/409161/files/09b6c5e2-ac4a-4591-a53b-72a86626e022.png) no-repeat center bottom;
    text-transform: uppercase;
    color: #5c5c5c;
    padding: 30px;
	margin:20px 0;
}

.equ-box {
  background:#fff;
  position: relative;
  width: 100%; /* 佔總寬度的50%，也可以換成任何你想要的寬度 */
  padding-top: 120%;  /* 也是佔總寬度的50%，因此長寬一樣長 */
}

.equ-box img {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0; /* 將圖片固定在父層的大小 */
  width: 100%;
  height: 100%; /* 高和寬都填滿容器 */
  object-fit: cover; /* 和background-image設定background-size: cover一樣，圖片剛好填滿 */
  object-position: center;
}

.equ-box-hor {
  background:#fff;
  position: relative;
  width: 100%; /* 佔總寬度的50%，也可以換成任何你想要的寬度 */
  padding-top: 80%;  /* 也是佔總寬度的50%，因此長寬一樣長 */
}

.equ-box-hor img {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0; /* 將圖片固定在父層的大小 */
  width: 100%;
  height: 100%; /* 高和寬都填滿容器 */
  object-fit: cover; /* 和background-image設定background-size: cover一樣，圖片剛好填滿 */
  object-position: center;
}


.equ-text{
	color:#fff;
	background-color:#333;
	border-radius:5px 5px 0 0;
	padding:10px;
	margin-left:auto;
	margin-right:auto;
	font-family:'Noto Sans TC';
	font-weight:400;
	font-size:16px;
}


/*產品實例*/

.pd-box {
  background:#fff;
  position: relative;
  width: 100%; /* 佔總寬度的50%，也可以換成任何你想要的寬度 */
  padding-top: 100%;  /* 也是佔總寬度的50%，因此長寬一樣長 */
}

.pd-box img {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0; /* 將圖片固定在父層的大小 */
  width: 100%;
  height: 100%; /* 高和寬都填滿容器 */
  object-fit: cover; /* 和background-image設定background-size: cover一樣，圖片剛好填滿 */
  object-position: center;
}

.pd-box-hor {
  background:#fff;
  position: relative;
  width: 100%; /* 佔總寬度的50%，也可以換成任何你想要的寬度 */
  padding-top: 80%;  /* 也是佔總寬度的50%，因此長寬一樣長 */
}

.pd-box-hor img {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0; /* 將圖片固定在父層的大小 */
  width: 100%;
  height: 100%; /* 高和寬都填滿容器 */
  object-fit: cover; /* 和background-image設定background-size: cover一樣，圖片剛好填滿 */
  object-position: center;
}


.pd-text{
	color:#fff;
	background-color:#0d3e8c;
	border-radius:5px 5px 0 0;
	padding:10px;
	margin-left:auto;
	margin-right:auto;
	font-family:'Noto Sans TC';
	font-weight:400;
	font-size:16px;
}


/* About_4~6*/
#bodyinpage.rwd-collapse.viewmode.default.about-us .fcol.fcol-4,
#bodyinpage.rwd-collapse.viewmode.default.about-us .fcol.fcol-5,
#bodyinpage.rwd-collapse.viewmode.default.about-us .fcol.fcol-6{
  display: none;
}


/*footer*/
#footer {
    color: #fff;
    background-color: #07064a;
}


#contact-info,#function{
   display:none;
}

.contact-row {
  padding: 0em;
  line-height: 1.6;
}