@media only screen and (min-width: 768px){.topnavbar {background-color: rgba(251, 251, 251, 0.77); border-top: 12px solid #003567;}}

#wrap {
    background: #fbfbfb url(https://static.iyp.tw/40454/files/ae00e46a-6159-422a-a03e-2c907bbc10da.jpg)no-repeat center; background-size: cover; background-attachment: fixed;}

#nav {border-bottom: 1px solid rgba(0, 53, 103, 0.5);}

#nav ul li.current a {color: #ffffff;background-color: #003567;border-radius: 15px;}
#nav ul li a{color:  #353535; padding: 16px 13px;}
#nav ul li a:hover {color: #003567;}

#nav .subnav{background-color: #fbfbfb; max-width: 377px;}
#nav ul li .subnav a {color:#ffffff; background-color: #003567; border-radius: 0px;}
#nav ul li .subnav a:hover {background: rgba(7, 63, 121, 0.86); color:#ffffff;}

.h1title {color: #5a5359; border-bottom:1px solid #dddddd; background-color: rgba(206, 206, 206, 0.58);border-radius: 10px 10px 0px 0px;}

ul.product-list li a{color: #000000; background-color: rgba(93, 196, 241, 0.22);}
ul.product-list li a.focus, ul.product-list li a:hover {color:#0b89bf;}

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

#bodyinhome .fcol-2 {
    background: url(https://static.iyp.tw/40454/files/8479b8f0-f14d-4f24-b1d7-9196cb8e8f0b.jpg)no-repeat top center;
}
#bodyinhome .fcol-6 {
    background: url(https://static.iyp.tw/40454/files/14c82111-9fe2-45e9-a4ec-1dc601bf6bef.jpg)no-repeat center bottom;
    background-attachment: fixed;
    color: #fbfbfb;
}

body.r-d-oem .fcol-3 {
    background: url(https://static.iyp.tw/40454/files/eb8b0b3d-e59f-407a-81ee-96df872605fe.jpg)no-repeat center bottom;
    background-attachment: fixed;
    color: #fbfbfb;
}
body.r-d-oem .fcol-4, body.r-d-oem .fcol-5, body.r-d-oem .fcol-6 {display: none;}
body.r-d-oem #footer {margin-top: -40px;}

#bodyinhome #footer {margin-top: -40px;}
#footer {background:#0e2842 url(https://static.iyp.tw/40454/files/c3de1bf9-3a03-4640-936c-8092a8b47a6b.jpg)no-repeat bottom right;}



/*內文字型大小顏色*/
#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: 180px;} #main-wrap {margin-top: 180px;} #ndc-banner-editor {top: 180px;}}


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

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

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

/*--表格滑鼠移動變化--*/
#tb td a {
    display: block;
    height: 35px;
    line-height: 35px;
    background: #005797;
    color: #fbfbfb;
}
#tb td a:hover {
    background: #b6e3e8;
    color: #444;
}

/*左右上下置中*/
.row-center{
height: 100%;
-webkit-align-items: center;
align-items: center;
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
}

/*浮動式按鈕*/
#call {
    width: 55px;
    right: 10px;
    border-radius: 50%;
    z-index: 999;
    bottom: 120px;
    position: fixed;
}
#line {
    width: 55px;
    right: 10px;
    border-radius: 50%;
    z-index: 999;
    bottom: 45px;
    position: fixed;
}

/**/
.box{
    position: relative;
}
.box img{
    width: 100%;
    height: auto;
    transition: all 0.3s ease 0s;
}
.box:hover img{
    filter: brightness(0.4);
}
.box .boxContent{
    width: 80%;
    height: 80%;
    position: absolute;
    top: 10%;
    left: 10%;
    border-top: 0px solid #fff;
    border-bottom: 0px solid #fff;
    text-align: center;
    transform: scale(0, 1);
    transition: all 0.35s ease 0s;
}
.box:hover .boxContent{
    transform: scale(1);
}
.box .title{
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    margin: 23% 0 20px;
    transform: translate3d(0, -100%, 0);
    transition: all 0.35s ease 0s;
}
.box .post{
    display: block;
    font-size: 16px;
    color: #fff;
    text-transform: capitalize;
    transform: translate3d(0, 100%, 0);
    transition: all 0.35s ease 0s;
}
.box:hover .title,
.box:hover .post{
    transform: translate3d(0, 0, 0);
}
@media only screen and (max-width: 990px){
    .box{ margin-bottom: 25px; }
}