@charset "utf-8";
/* CSS Document 
@import url("reset.css");
@import url("un-reset.css");*/

/*html5
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block;}*/

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
          margin:0;
          padding:0;
}


html,
body {
    height: 100% !important;
}

body{ 
  margin:0; 
  -webkit-text-size-adjust:none; 
  overflow-x:hidden; 
  background:#fff;
  font-family:Arial,'Microsoft jhenghei';
}

.wrapper{ 
  width: 100%;
  max-width: 1600px; 
  margin:0 auto;
}

.clear:after {
    content: "";
    visibility: hidden;
    display: block;
    font-size: 0;
    clear: both;
    height: 0;
}

* html .clear             { zoom: 1; } /* IE6 */
*:first-child+html .clear { zoom: 1; } /* IE7 */

img{ 
  vertical-align:middle; max-width: 100%
}

a{ 
text-decoration:none; 
font-family:Arial,'Microsoft jhenghei';
 }

div,a,p,span,tr,th,td,li,pre, { 
font-family:Arial,'Microsoft jhenghei';
 }

/*table { width: 100% }*/


/*======Placeholder======*/
input:focus::-webkit-input-placeholder { color:transparent; } 
input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */ 
input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */ 
input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */

textarea:focus::-webkit-input-placeholder { color:transparent; } 
textarea:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */ 
textarea:focus::-moz-placeholder { color:transparent; } /* FF 19+ */ 
textarea:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */

/* WebKit browsers */
.usbox input::-webkit-input-placeholder,
.usbox textarea::-webkit-input-placeholder { 
    color: #737276;
}

/* Firefox browsers */
.usbox input input::-moz-placeholder,
.usbox textarea::-moz-input-placeholder { 
    color: #737276
}

/* IE */
.usbox input input::-ms-input-placeholder,
.usbox textarea::-ms-input-placeholder { 
    color: #737276
}

/* Opera */
.usbox input input::-o-input-placeholder,
.usbox textarea::-o-input-placeholder { 
    color: #737276
}



/* Overline From Center */
.nav_link>li>a{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);

    box-shadow: 0 0 1px rgba(0, 0, 0, 0);

    backface-visibility:hidden; /*隱藏*/
   -webkit-backface-visibility:hidden;  /* Chrome 和 Safari */
   -moz-backface-visibility:hidden;   /* Firefox */
   -ms-backface-visibility:hidden;  /* Internet Explorer */

    -moz-osx-font-smoothing: grayscale;  
}

.nav_link>li>a:before{
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    right: 50%;
    top: 0px;
    /* background-color: #eee1c9; */
    background-color: #c0bebe; 
    height: 4px;
  
    transition: left, right, 0.3s ease-out;
    -webkit-transition: left, right, 0.3s ease-out;
    -moz-transition: left, right, 0.3s ease-out;
    -ms-transition: left, right, 0.3s ease-out;
    -o-transition: left, right, 0.3s ease-out;
}

.nav_link>li>a.active:before,
.nav_link>li>a:hover:before{
    left: 0;
    right: 0;
}

/*Scroll樣式*/
.select_style { 
width: 99%; 
height:34px; 
overflow:hidden; 
background:url(../images/arrow.png) no-repeat 98% center; 
margin-top: 6px; 
border:1px solid #ccc;
margin-left: 0.5% }
 
.select_style select { 
display: block; 
padding:5px; 
background:transparent; 
width: 99%; 
font-size: 16px; 
border:none; 
height:34px; 
-webkit-appearance: none; 
/*for Webkit browsers*/ } 

/*卷軸*/
.test {
  overflow: hidden;
  overflow-y: hidden;
  width: 100%;
}

.test5::-webkit-scrollbar {
 width: 12px;
 height:12px;
}
 .test5::-webkit-scrollbar-track {
 background-color:#fcfbf9;
}
 .test5::-webkit-scrollbar-thumb {
 background-color: #dad9d9;
}

.test5::-ms-scrollbar {
 width: 12px;
 height:12px;
}
 .test5::-ms-scrollbar-track {
 background-color:#fcfbf9;
}
 .test5::-ms-scrollbar-thumb {
 background-color: #dad9d9;
}

.test5::-moz-scrollbar {
 width: 12px;
 height:12px;
}
 .test5::-moz-scrollbar-track {
 background-color:#fcfbf9;
}
 .test5::-moz-scrollbar-thumb {
 background-color: #dad9d9;
}

/*Scroll樣式 : 手機*/
.test {
  overflow: scroll;
  overflow-y: hidden;
  width: 100%;
  margin-left:0px;
}

/*IWARE FOOTER*/
.iware{
  display: inline-block;
  line-height: 20px;
  padding: 0 8px;
  padding-top: 2px;
  color: #d9d9d9;
  font-size: 12px;
  text-align: center;
  font-weight: normal;
}

.iware a,
.iware b{
  font-size: 12px;
  font-weight: normal;
  color: inherit;
}

/*斷行*/
.proMenu figure b{
    width: 100%;
    height: 18px; /*高度*/
    line-height: 18px; /*行數*/
    overflow: hidden; /*隱藏*/
    text-overflow: ellipsis; /*點點點*/
    display: -webkit-box;
    -webkit-line-clamp: 1; /*行數*/
    -webkit-box-orient: vertical;
    margin-bottom: 10px;
}

/*背景滿版*/
.bg-full{
  position: relative;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.carousel-control.left,
.carousel-control.right{
  background-image: none;
}

/*===========HEADER=========*/

.header .navbar-brand{
  padding-top: 5px
}

.header > nav{
  margin-bottom: 0;
}

.header ul>li>a{
  display: block;
  font-size: 16px;
  font-weight: bold;
}



/**/
.menu-top-img{
  display: block;
  position: relative;
  width: 100%;
  height: 50px;
  background-image: url(../images/menu-top-img.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  z-index: 1;
}

.menu-top-img.index-menu-top-img::before,
.menu-top-img.index-menu-top-img::after{
  content: '';
  display: inline-block;
  position: absolute;
  bottom: 0;
  width: 0;
  height: 0;
  border-top: transparent 15px solid;
  border-bottom: transparent 15px solid;
  z-index: 1;
}

.menu-top-img.index-menu-top-img::before{
  left: 5px;
  border-left: #d0d5d7 15px solid;
  border-right: transparent 15px solid;

  transform:translateY(15px) rotate(-45deg);
  -webkit-transform:translateY(15px) rotate(-45deg);
  -moz-transform:translateY(15px) rotate(-45deg);
  -ms-transform:translateY(15px) rotate(-45deg);
  -o-transform:translateY(15px) rotate(-45deg);
}

.menu-top-img.index-menu-top-img::after{
  right: 5px;
  border-right: #d0d5d7 15px solid;
  border-left: transparent 15px solid;
  
  transform:translateY(15px) rotate(45deg);
  -webkit-transform:translateY(15px) rotate(45deg);
  -moz-transform:translateY(15px) rotate(45deg);
  -ms-transform:translateY(15px) rotate(45deg);
  -o-transform:translateY(15px) rotate(45deg);
}

/*幻燈片*/
.index-menu-top-img + .banner{
  padding-left: 20px;
  padding-right: 20px;
}

.index-banner{
  height: 444px
}

.main-banner{
  height: 327px
}

.index-icon{
  padding-top: 15px;
  padding-right: 20px;
}

/*首頁最新產品及介紹*/
.index-new-box{
  position: relative;
  width: 100%;
  height: auto;
  padding: 10px 0;
  background-image: linear-gradient(0deg, #fff 0%, #fff 70%, #c7c6c6 160%);
  background-image: -webkit-linear-gradient(bottom, #fff 0%, #fff 70%, #c7c6c6 160%);
  background-image: -moz-linear-gradient(45deg, #fff 0%, #fff 70%, #c7c6c6 160%);
  background-image: -ms-linear-gradient(45deg, #fff 0%, #fff 70%, #c7c6c6 160%);
  background-image: -o-linear-gradient(45deg, #fff 0%, #fff 70%, #c7c6c6 160%);
}

.index-new-box::before{
  content: '';
  display: inline-block;
  width: 100%;
  height: 40px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  background-image: radial-gradient(50% 10px at top center, rgba(0,0,0,.2), transparent);
  background-image: -webkit-radial-gradient(50% 10px at top center, rgba(0,0,0,.2), transparent);
  background-image: -moz-radial-gradient(50% 10px at top center, rgba(0,0,0,.2), transparent);
  background-image: -ms-radial-gradient(50% 10px at top center, rgba(0,0,0,.2), transparent);
  background-image: -o-radial-gradient(50% 10px at top center, rgba(0,0,0,.2), transparent);
}

.index-new-box::after{
  content:'';
  background-repeat: repeat-x;
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 5px;
  background-image: url(../images/index_footer_img.jpg);
  background-repeat: repeat-x;
}

.index-new-box .title{
  font-size: 20px;
  color:#002a4e;
  padding-bottom: 5px;
  margin-bottom: 0;
}

.index-new-box .title img{
  display:inline-block;
  vertical-align: middle;
  margin-right: 8px;
  margin-top: -5px;
}

.index-new-box > div > div > div{
  padding: 2em;
  position: relative;
}

.index-new-box > div > div > div:nth-child(2) .title{
  font-size: 18px;
  color:#002a4e;
}

.index-new-box .slider{
  padding: 10px 0;
  text-align: center;
  line-height: 1.5
}

.index-new-box .slider img{
  display: inline-block;
  height: 120px
}

.index-new-box .slider a,
.index-new-box .slider a:hover{
  color: #000;
  text-decoration: none;
}

.index-new-box .slider p{
  padding-top: 6px;
  margin-bottom: 0;
  font-size: 16px;
  color: #398ed7
}

.index_about_bk{
 position: relative;
 padding: 20px;
 min-height: 195px;
 border-radius: 6px;
 margin-top: 10px;
}

.index_about_bk span{
  position: relative;
  z-index: 1000;
}

.index_about_bk::before{
  content: url(../images/index_about_img02.png);
  display: inline-block;
  position: absolute;
  top: -5px;
  right: -3px;
}

.index_about_bk::after{
  content:url(../images/index_about_img01.png);
  display: inline-block;
  position: absolute;
  bottom: -5px;
  right: -4px;
  z-index: 0;
}

/*==FOOTER==*/
footer{
  float: left;
  width: 100%;
  background-color: #01419a;
  padding: 16px 0 8px 0;
  color:#fff;
  line-height: 2
}

footer address{
  margin-bottom: 0;
}

.main-footer{
  background-color: #275da7
}



/*================RESPONSIVE WEBSITE================*/
@media screen and (min-width: 768px) {

.header .navbar-brand{
  padding-top: 25px
}

.header > nav{
  background-image: url(../images/top_bk_shadow.png);
  background-repeat: repeat-x;
  background-position: left 90%;
  border-color: transparent;
  margin-bottom: 10px;
}

.header ul>li{
  position: relative;
  padding-left: 5px;
}

.header ul>li>a{
  padding-top: 68px !important;
  padding-bottom: 30px !important;
}

.header ul>li + li::before{
  content: ' / ';
  position: absolute;
  top: 65px;
  left: 0;
  color:#a7a7a7;
  font-size: 18px;
}

/*第二層*/
.header ul>li>ul{
  visibility: hidden;
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  min-width: 150px;
  width: 100%;
  background-color: #fff;
  z-index: 1000 !important;
}

.header ul>li>ul::before{
  content: '';
  display: inline-block;
  position:absolute;
  top: -16px;
  left: 50%;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  border-bottom: #f00 8px solid;
  border-top: transparent 8px solid;
  border-left: transparent 8px solid;
  border-right: transparent 8px solid;
}

.header ul>li>ul>li{
  list-style: none;
  padding: 5px 0
}

.header ul>li>ul>li>a{
  display: block;
  text-decoration: none;
  line-height: 2;
  font-size: 15px;
  color:#000;
  padding:4px 0 !important;
  padding-left: 1.5em !important;
  padding-right: 1.5em !important;
}

.header ul>li>ul>li::before{
  display: none
}

.header ul li:hover>ul{
  visibility: visible;
}

.header ul li:hover>ul>li:hover,
.header ul li:hover>ul>li:hover>a{
  background-color: #013d55;
  color:#fff;
}

.index-new-box > div > div > div:nth-child(2)::before{
  content: '';
  display: inline-block;
  position: absolute;
  top: 130px;
  left: -120px;
  width: 250px;
  height: 5px;
  
  background-image: radial-gradient(50% 5px at top center, rgba(0,0,0,.5), transparent);
  background-image: -webkit-radial-gradient(50% 5px at top center, rgba(0,0,0,.5), transparent);
  background-image: -moz-radial-gradient(50% 5px at top center, rgba(0,0,0,.5), transparent);
  background-image: -ms-radial-gradient(50% 5px at top center, rgba(0,0,0,.5), transparent);
  background-image: -o-radial-gradient(50% 5px at top center, rgba(0,0,0,.5), transparent);
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
}

/*==FOOTER==*/
footer .iware{
  margin-top: 10px;
}

.main-footer{
  padding: 2em 0;
}

}

@media screen and (max-width: 1024px) {
  
}

@media screen and (max-width: 1000px) {
  
}

@media screen and (max-width: 767px) {

.header .navbar-brand{
  width: 320px;
  padding: 0;
  padding-top: 18px;
  margin-left: -10px;
}

.header > nav{
  margin-bottom: 0;
}

.header ul{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  margin-top: 5px;
  margin-bottom: 5px;
}

.header ul>li{
  flex:1;
  text-align: center;
}

.header ul>li>a{
  padding-left: 0;
  padding-right: 0;
}

/*.header ul>li::after{
  content: '';
  display: inline-block;
  position: absolute;
  top: 11px;
  right: -5px;
  width: 1px;
  height: 15px;
  background-color: #ddd
}

.header ul>li:last-child::after{
  display: none;
}*/

/*第二層*/
.header ul>li>ul{
  display: none;
}

/*.index-banner{
  height: 200px
}*/

.main-banner{
  height: 150px;
  background-position: 10%
}

.index-banner{
  height: 130px;
  background-position: 45%
}

.index-menu-top-img + .banner{
  padding-left: 5px;
  padding-right: 5px;
}

.menu-top-img.index-menu-top-img::before {
    left: -10px;
}

.menu-top-img.index-menu-top-img::after {
    right: -10px;
}

/*首頁最新產品及介紹*/
.index-new-box > div > div > div{
  padding: 1em
}

.main-footer .list-inline{
  padding-top: 20px
}


}

@media screen and (max-width: 400px) {

.header > nav > div{
  padding-left: 0;
  padding-right: 0;
}

.header .navbar-brand{
  width: 280px;
  
}
 
}