@media only screen and (min-width: 768px){.topnavbar {background-color: #fff; padding: 0rem 0;}}

#nav ul li.current a {color: #262626; border-bottom: 2px solid #f5d123; font-weight: 800;}
#nav ul li a{color:  #353535;}
#nav ul li a:hover {color: #262626; border-bottom: 2px solid #f5d123; font-weight: 800;}

#nav .subnav{background-color: #fff;}
#nav ul li .subnav a {color:#353535;}
#nav ul li .subnav a:hover {background: rgba(212, 200, 200, 0.1);}

.h1title {
  color: #5a5359; 
  text-align: center; 
  border-bottom:1px solid #dddddd;
}

ul.product-list li a{color: #3e3e3e; background-color: #ffffff;}
ul.product-list li a.focus, ul.product-list li a:hover {color: #346cb8;}

a {color: #46413e;}
.news .fcol .news-list li a:hover, .news .news.main-content li a:hover {color: #e5322d;}


#bodyinhome .fcol-3 .container, #bodyinhome .fcol-6 .container{
    width: 100%; padding: 0;
}

#bodyinhome .fcol-6 .container>* {
    padding-left: 0;
    padding-right: 0;
}

#bodyinhome #footer {
    margin-top: -45px;
}

.fcol-header {
    display: none;
}

#footer {
    color: #dfdfdf;
    background-color: #1c3c6a;

}

#foot-nav {
    border-bottom: 1px solid #999999;
}

#bodyinhome .fcol-1, body.about-us .fcol-4 {
    background: url(https://static.iyp.tw/409768/files/24246e21-6a7c-4ba7-94e3-51e3bd3a3f56.jpg) no-repeat center;
    background-attachment: fixed;
    /*background-size: contain;*/
}

/* 首頁與內頁共用 */
.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(800 / 1920 * 100%); /* 首頁 banner 大小 */
}

/* 內頁 */
#bodyinpage .swiper-wrapper, #bodyinpage .swiper-slide {
  padding-bottom: calc(500 / 1920 * 100%); /* 內頁 banner 大小 */
}

/*內文字型大小顏色*/
#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;}

/*banner高度調整*/
@media only screen and (min-width: 768px){#banner {top: 110px;} #main-wrap {margin-top: 110px;} #ndc-banner-editor {top: 110px;}}

/*響應式欄位 2欄在pro max的顯示調整*/
@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;
  }

/**/
.btn1 {
 --color: #1065a1;
 --color2: rgb(10, 25, 30);
 padding: 0.8em 2.75em;
 background-color: transparent;
 border-radius: 6px;
 border: .3px solid var(--color);
 transition: .5s;
 position: relative;
 overflow: hidden;
 /*cursor: pointer;*/
 z-index: 1;
 font-size: 17px;
 font-family: 'Roboto', 'Segoe UI', sans-serif;
 text-transform: uppercase;
 color: var(--color);
}

.btn1::after, .btn1::before {
 content: '';
 display: block;
 height: 100%;
 width: 100%;
 transform: skew(90deg) translate(-50%, -50%);
 position: absolute;
 inset: 50%;
 left: 25%;
 z-index: -1;
 transition: .5s ease-out;
 background-color: var(--color);
}

.btn1::before {
 top: -50%;
 left: -25%;
 transform: skew(90deg) rotate(180deg) translate(-50%, -50%);
}

.btn1:hover::before {
 transform: skew(45deg) rotate(180deg) translate(-50%, -50%);
}

.btn1:hover::after {
 transform: skew(45deg) translate(-50%, -50%);
}

.btn1:hover {
 color: #fbfbfb;
}

.btn1:active {
 filter: brightness(.7);
 transform: scale(.98);
}

/**/
.box{
    font-family: 'Poppins', sans-serif;
    text-align: center;
    border-radius: 15px;
    position: relative;
    overflow: hidden;
    transition: all 0.5s ease 0s;
}
.box:hover{ box-shadow: 0 0 10px rgba(0,0,0,0.1); }
.box:before{
    content: "";
    background-image: linear-gradient(to top,rgb(80 152 215), rgb(12 87 117));
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 100%;
    left: 0;
    transition: all 0.5s ease 0s;
}
.box:hover:before{ bottom: 0; }
.box img{
    width: 100%;
    height: auto;
    transition: all 0.5s ease 0s;
}
.box:hover img{ opacity: 0.3; }
.box .box-content{
    color: #fff;
    background-image: linear-gradient(to right,rgb(80 152 215), rgb(12 87 117));
    width: 100%;
    padding: 13px 20px 12px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    transition: all 0.5s ease 0s;
}  
.box:hover .box-content{
    color: rgb(80 152 215);
    background: #fff;
}
.box .title{
    font-size: 25px;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0;
}
.box .post{
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 4px;
    text-transform: lowercase;
}
.box .icon{
    padding: 0;
    margin: 0;
    list-style: none;
    opacity: 0;
    transform: translateX(-50%) translateY(-35%);
    position: absolute;
    top: 35%;
    left: 50%;
    z-index: 1;
    transition: all 0.3s ease 0s;
}
.box:hover .icon{ opacity: 1; }
.box .icon li{
    margin: 0 3px;
    display: inline-block;
}
.box .icon li a{
    color: rgb(80 152 215);
    background: #fff;
    font-size: 18px;
    line-height: 35px;
    height: 35px;
    width: 35px;
    display: block;
    transition: all .5s ease 0s;
}
.box .icon li a:hover{
    color: #fff;
    background: rgb(255 174 25);
    border-radius: 10px 0;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
@media only screen and (max-width:990px){
    .box{ margin: 0 0 30px; }
}