@media only screen and (min-width: 768px){.topnavbar {background: linear-gradient(270deg, transparent 60px, #316db9 0) no-repeat; background-size: 40%; padding: 0rem 0;}}

@media only screen and (max-width: 414px) {.topnavbar {background:#316db9; padding: 0rem 0;}}

.topnavbar .container {
  text-align: justify;
  font-size: 0;
}

.topnavbar .container::after {
  content: "";
  display: inline-block;
  width: 100%;
}

#nav ul li.current a {color: #ffdd2a;}
#nav ul li a{color: #ffffff; text-shadow: 0 0 9px #000000;}
#nav ul li a:hover {color: #ffdd2a;}

#nav .subnav{background-color: #316db9; max-width: 248px;}
#nav ul li .subnav a {color:#ffdd2a; text-shadow: 0 0 0px #000000;}
#nav ul li .subnav a:hover {background: rgba(212, 200, 200, 0.1);}

.h1title {color: #5a5359; border-bottom:1px solid #dddddd;}

ul.product-list li a{color: #202020; background-color: rgb(88 88 88 / 8%);}
ul.product-list li a.focus, ul.product-list li a:hover {color: #316db9; border: 1px solid #316db9;}

a {color: #46413e;}
.news .fcol .news-list li a:hover, .news .news.main-content li a:hover {color: #e5322d;}



#foot-nav {
    display: none;
}

#footer {
    color: #3e3e3e;
    background-color: #e5e6e7;
}

#footer a {
    color: #818181;
}

#bodyinhome #footer {
    margin-top: -40px;
}

.footer-edit {
    line-height: 30px;
}

@media only screen and (min-width: 768px){ #bodyinhome .fcol-2 .container, #bodyinhome .fcol-4 .container {
    width: 80%;
}}

#bodyinhome .fcol-3 {
    background: url(https://static.iyp.tw/409782/files/5e938b1a-e47a-4a03-b242-d1a82ffef583.jpg) no-repeat center;
    background-size: cover;
    background-attachment: fixed;
}

#bodyinhome .fcol-5 {
    background: linear-gradient(90deg, #000000 0px, #1d63b9 0), url(https://static.iyp.tw/409782/files/2e82b45f-44f5-460f-bbb1-25f05c2e69ab.jpg);
    background-size: 37%, cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

#bodyinhome .fcol-6 {
    background: #1d63b9;
}

body.about-us #wrap {
    background: url(https://static.iyp.tw/409782/files/cfd9b909-a15b-4924-a354-5ac7ede6a541.jpg) no-repeat center;
}

body.about-us .fcol-5, body.about-us .fcol-6,  body.services .fcol-6, body.services .fcol-5, body.services .fcol-4{
    display: none;
}

/**/

@media (min-width: 992px){
.col-md-5 {
    width: 19%;
}}
  
@media (min-width: 992px){
.col-md-7 {
    width: 80%;
}}
}


@media only screen and (max-width: 414px) {
.col-md-5 {
    width: 100%;
}}
  

@media only screen and (max-width: 414px) {
.col-md-7 {
    width: 100%;
}}



/**/
@media only screen and (min-width: 768px){
#bodyinhome .topnavbar{z-index: 1000;}
#bodyinhome #main-wrap {
    margin-top: -135px;
    z-index: 999;
    /*background: url(https://static.iyp.tw/40525/files/4c1a9894-9e3c-4601-8faf-ca78ff88a3f7.jpg)no-repeat center bottom;*/
    background-size: 100%;
}
#bodyinhome #banner {z-index: -1;}
}


/*內文字型大小顏色*/
#product-header, .fcol.fcol-1, .fcol.fcol-2, .fcol.fcol-3,  .fcol.fcol-4, .fcol.fcol-5, .fcol.fcol-6 {font-size: 16px;color:#444;}

/*回最新消息*/
.back>a, .btn-search, .btn-style, input[type="submit"] {border: 1px solid #505050; background-color: #8a8a8a;}

/**/
/* 首頁與內頁共用 */
.swiper-container {
  height: auto !important;
}

.swiper-wrapper, .swiper-slide {
  height: 0 !important;
}

.swiper-slide {
  width: 100% !important;
}

/* 首頁 */
#bodyinhome .swiper-wrapper, #bodyinhome .swiper-slide {
  padding-bottom: calc(750 / 1920 * 100%); /* 首頁 banner 大小 */
}

/* 內頁 */
#bodyinpage .swiper-wrapper, #bodyinpage .swiper-slide {
  padding-bottom: calc(500 / 1920 * 100%); /* 內頁 banner 大小 */
}

@media only screen and (max-width: 576px) {
    .rwd-wrapper .col-2 {
        -webkit-flex:0 0 100%;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%
    }
}


/*產品介紹頁編輯框高度auto*/
body[data-type="fullpage"] #product-header.main {
      min-height: auto;
  }

/**/
button1 {
 border: none;
 color: #fff;
 background-image: linear-gradient(30deg, #0400ff, #4ce3f7);
 border-radius: 20px;
 background-size: 100% auto;
 font-family: inherit;
 font-size: 17px;
 padding: 0.6em 3.5em;
}

button1:hover {
 background-position: right center;
 background-size: 200% auto;
 -webkit-animation: pulse 2s infinite;
 animation: pulse512 1.5s infinite;
}

@keyframes pulse512 {
 0% {
  box-shadow: 0 0 0 0 #05bada66;
 }

 70% {
  box-shadow: 0 0 0 10px rgb(218 103 68 / 0%);
 }

 100% {
  box-shadow: 0 0 0 0 rgb(218 103 68 / 0%);
 }
}

/*owl 輪播圖語法*/
.owl-carousel.owl-theme {
  padding: 0 20px 35px;/*內距:上 左右 下;*/
}
.owl-carousel.owl-theme .owl-nav {
  top: 50%;
  margin: 0;
  transform: translateY(-50%);
}
.owl-carousel.owl-theme .owl-dots {
  bottom: 0;
}
.owl-carousel.owl-theme button:focus {
  outline: none;
}
.owl-carousel.owl-theme .owl-nav,
.owl-carousel.owl-theme .owl-dots {
  position: absolute;
  left: 0;
  right: 0;
}
.owl-carousel.owl-theme .owl-nav .owl-prev {
  float: left;
  transform: translateX(-100%);
}
.owl-carousel.owl-theme .owl-nav .owl-next {
  float: right;
  transform: translateX(100%);
}
.owl-carousel.owl-theme .owl-nav .owl-prev:hover,
.owl-carousel.owl-theme .owl-nav .owl-next:hover{
  background: none;
  color: inherit;
}
.owl-carousel.owl-theme .owl-nav .fa{
  font-size: 3em; /*箭頭大小*/
}

.editmode .owl-carousel.owl-loaded {
  display: flex;
  flex-wrap: wrap;
}
.editmode .owl-carousel > div {
  flex: 0 0 25%;
  max-width: 25%;
}

.owl-carousel .owl-item img {
  object-fit: cover;  /*cover圖片剪裁不拉伸壓縮 ; contain不拉伸壓縮.等比縮放)*/
  display: block;
  width: 100%;
  height: 300px; /*高度*/
  border: 2px solid #fff;
  box-shadow: 0 6px 5px rgba(44,44,44,0.25);
}
.owl-carousel .row-no-gutters {
    margin-right: 5px;
    margin-left: 2px;
}

/**/
.grow:hover
{
 -webkit-animation: swing 1s ease;
 animation: swing 1s ease;
 -webkit-transform: translateY(-3px);
 transform: translateY(-3px);
}


/*產品輪播*/
.rwd-table {
  	overflow-y: visible !important;
}
#myDiv img {
        max-width: none;
}



/*圖片透明效果*/
.img3{
    opacity: 1.0; //設為完全不透明
    filter: alpha(opacity=50); // IE8 與更早的版本
}
.img3:hover{
    opacity: 0.5; //透明度設為 0.5
    filter: alpha(opacity=100); // IE8 與更早的版本
}
