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

.topnavbar .container {
  text-align: center;
}

#nav ul li.current a {color:  #cf2020;}
#nav ul li a{color:  #353535;}
#nav ul li a:hover {color: #3a4e6f;}

#nav .subnav{background-color: #dae9ff; max-width: 366px;}
#nav ul li .subnav a {color:#353535; text-align: left;}
#nav ul li .subnav a:hover {background: rgba(212, 200, 200, 0.1);}

.h1title {color: #5a5359;}


a {color: #58514c;}
.news .fcol .news-list li a:hover, .news .news.main-content li a:hover {color: #5d8ece;}

@media only screen and (min-width: 768px){
.navbar-nav {
    background-color: #17359c;
}}

.dropdown-menu, .navbar-nav>.open>.dropdown-menu {
    color: #fff;
    background-color: #284093;
}

#footer {
    background-color: #3a4e6f;
}

#wrap {
    background: url(https://static.iyp.tw/38653/files/9eb7f246-f9ec-40fe-b549-4e44b9adf3f3.jpg)no-repeat bottom center;}

/*下拉式選單被遮住的CSS (-n+6 一排頁籤數量)*/
@media only screen and (min-width: 768px) {#nav > ul > li:nth-child(-n+5) {z-index: 999;}}

/*內文字型大小顏色*/
.fcol .container {    color: #222;    font-size: 16px;}
p {    line-height:2;}
.fcol h2 {
    color: #174481;
    font-size: 1.55em;
    line-height: 2;
}
a:hover {  color:#ffa200;}
#product-header, .fcol.fcol-1, .fcol.fcol-2, .fcol.fcol-3 {font-size: 14px;color: #444;}
#contact-info {color: #dadada;}

/*產品格*/
ul.product-list li a{
  color: #174481;
  text-align: center;
  background-color: #c5d9ed;
  border: 11px solid #c5d9ed;
}

ul.product-list li a:hover {
    background-color: #c5d9ed;
    border: 11px solid #c5d9ed;
}
ul.product-list li a.focus, ul.product-list li a:hover {color: #cf2020;}

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

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

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

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

/*CSS按鈕動畫*/

.hovereffect {
  width: 100%;
  height: 100%;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
}

.hovereffect .overlay {
  position: absolute;
  overflow: hidden;
  width: 80%;
  height: 80%;
  left: 10%;
  top: 10%;
  border-bottom: 1px solid #FFF;
  border-top: 1px solid #FFF;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: scale(0,1);
  -ms-transform: scale(0,1);
  transform: scale(0,1);
}

.hovereffect:hover .overlay {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.hovereffect img {
  display: block;
  position: relative;
  -webkit-transition: all 0.35s;
  transition: all 0.35s;
}

.hovereffect:hover img {
  filter: brightness(0.6);
  -webkit-filter: brightness(0.6);
}

.hovereffect h2 {
  text-transform: uppercase;
  text-align: center;
  position: relative;
  font-size: 12px;
  background-color: transparent;
  color: #FFF;
  padding: 1em 0;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(0,-100%,0);
  transform: translate3d(0,-100%,0);
}

.hovereffect a, .hovereffect p {
  color: #FFF;
  padding: 0em 0;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(0,100%,0);
  transform: translate3d(0,100%,0);
}

.hovereffect:hover a, .hovereffect:hover p, .hovereffect:hover h2 {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}
.col-lg-3 {width: 100%;}

/*-google翻譯器-*/
#google_translate_element {
  z-index: 100;
  position: absolute;
  top: 105px;
  right: 65px;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
/* 螢幕尺?寸於 768px ?至 1024px, iPad Tablets css 寫這 */
  #google_translate_element {
display: none;
}
}
@media only screen and (max-width: 767px) {
/* 螢幕尺?寸?小於 767px, iPhone6 plus、Samsung Note 等?大螢幕的?手機 css 寫這*/
    #google_translate_element {
display: none;
}
}
@media only screen and (max-width: 320px) {
/* 螢幕尺?寸?小於 320px, iPhone 等?小螢幕 css 寫這 */
    #google_translate_element {
display: none;
}
}

/*圖片按鈕變化*/
.box{
    position: relative;
    overflow: hidden;
}
.box img{
    width: 100%;
    height: auto;
    transform: translateY(0);
    transition: transform 0.30s ease 0s;
}
.box:hover img{
    transform: translateY(-10%);
}
.box-content{
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 25px;
    background: #333;
    transform: translateY(100%);
    transition: all 0.30s ease 0s;
    text-align: center;
}
.box:hover .box-content{
    transform: translateY(0);
}
.box-content .title{
    color: #fff;
    margin: 0;
    padding: 0;
    display:inline-block;
    text-transform: capitalize;
}
.box-content .read{
    float: right;
    display: inline-block;
    width: 100px;
    height: 30px;
    line-height: 30px;
    color: #fff;
    text-align: center;
    background: #1dcfd1;
}
.box-content .read:hover{
    text-decoration: none;
}
@media only screen and (max-width: 990px){
    .box{ margin-bottom: 20px; }
}
@media only screen and (max-width: 359px){
    .box-content .title{ font-size: 19px; }
    .box-content .read{ width: 85px; }
}


.rwd-navbar-toggle .label{
    color: #ffffff;
    background-color: #ec8710;
    border-radius: 3px;
    padding: 4px;
}


/*圖片放大透明*/
.picc { 
    opacity: 1; /* 透明度100% FireFox 的寫法 */ 
    filter: Alpha(Opacity=100); /* 透明度100% IE 的寫法 */ 
    margin:0 auto;
    overflow: hidden;
} 
.picc img { 
    opacity: 1; 
    filter: Alpha(Opacity=100); 
  margin:0 auto;
  -webkit-transform: scale(1);
  -webkit-transition: 1s;
} 
.picc img:hover { 
  opacity: .5; /* 透明度50% FireFox 的寫法 */ 
  filter: Alpha(Opacity=50); /* 透明度50% IE 的寫法 */ 
  -webkit-transform: scale(1.05);
} 

/*圖片輪播*/
.slideshow {
    position: relative;
    margin: auto;
    overflow: hidden;
    height: 275px;
    width: 100%;
}
.slideshow img {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: none;
}

#call {
    width: 55px;
    right: 10px;
    z-index: 999;
    bottom: 165px;
    position: fixed;
}