@charset "utf-8";
h2 {
    color: #00fff6;
    font-size: 42px;
    bottom: 65px;
    z-index: 10;
    margin: 0;
    line-height: 52px;
}

/* ====================================================================
 * star.bn
* ==================================================================== */

#banner {
    position: relative;
    width: 100%;
    height: 580px;
    z-index: 0;
    margin-top: -161px;
    background: url(../images/idx-bn-bg.jpg) 50% top repeat-y;
    border-bottom: 3px solid #00fff6;
}
#slider {
    position: absolute;
    width: 100%;
    height: 550px;
    box-shadow: 0 0px 16px #303440;
}
#slider {
    position: absolute;
    width: 100%;
}
#slider .item {
    height: 550px;
    top: 0;
    margin: 0;
    padding: 3% 0;
}
#slider .item .bg {
    position: absolute;
    top: 0;
    z-index: -99;
    min-width: 1920px;
}
#slider h2, #slider p, #slider .img {
    position: absolute;
}
#slider h2, #slider p {
    left: 17%;
    opacity: 1;
}
#slider .img {
    bottom: 0;
    right: 15%;
    max-height: 410px;
}
#slider p {
    width: 45%;
    bottom: 110px;
    color: #ffffff;
    font-size: 18px;
    line-height: 26px;
    overflow: hidden;
}
#slider.owl-theme .owl-controls {
    margin-top: 4px;
}
#slider .owl-page span {
    width: 16px;
    height: 16px;
    margin: 2px 10px;
    opacity: 1;
    border: 2px solid #00fff6;
    background: none;
}
#slider.owl-theme .owl-controls .owl-page.active span, #slider.owl-theme .owl-controls.clickable .owl-page:hover span {
    filter: Alpha(Opacity=100);
    opacity: 1;
    background: #00fff6;
}
#slider .owl-buttons {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
}
#slider .owl-buttons div {
    position: absolute;
    font-size: 24px;
    background: none;
}
#slider .owl-prev {
    left: 3%;
}
#slider .owl-next {
    right: 3%;
}

/* ====================================================================
   *end.bn
   * ==================================================================== */

#content {
    margin: 20px auto;
}
#content .right {
    width: 68%;
    margin-left: 2%;
    padding-left: 2%;
    border-left: 1px solid #000;
}
div#idx-news {
    width: 30%;
    /* margin-right: 2%; */
    /* padding-right: 2%; */
    /* border-right: 1px solid #000; */
}
#idx-news>.title, #idx-link>.title, #idx-aboutus>.title, #idx-product>.title {
    position: relative;
    padding: 0 0 15px 35px;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 1.5em;
    color: #343c57;
    border-bottom: 1px solid #999;
}
#content div>.title::before, #idx-product>.title::before {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 20px;
    height: 75%;
    background: #1e489d;
}

/* ====================================================================
 * news
 * ==================================================================== */

#idx-news li {
    margin-bottom: 20px;
    border-bottom: 1px dashed #999;
}
#idx-news p {
    padding: 0 0 5px 15px;
    margin: 0;
    font-size: 14px;
    color: #666;
    width: 100%;
}
#idx-news p.title {
    font-size: 18px;
    color: #26a4df;
    font-weight: bold;
    padding: 0 0 9px;
}
#idx-news li:hover p {
    text-shadow: 1px 1px 3px #9197ad;
}

/* ====================================================================
  *#idx-aboutus
  * ==================================================================== */

#idx-aboutus {
    margin-bottom: 50px;
    position: relative;
}
#idx-aboutus:after {
    content: "";
    display: block;
    position: absolute;
    background: url(../images/ab.png) bottom right no-repeat;
    bottom: 0;
    top: 0;
    right: 0;
    width: 100%;
}
div#idx-aboutus p {
    width: 100%;
    padding: 0 300px 0 0;
    margin: 0;
    display: inline-block;
    vertical-align: top;
    font-size: 15px;
    line-height: 1.5rem;
}
div#idx-aboutus img {
    display: inline-block;
    width: 43%;
}

/* ====================================================================
   *link
   * ==================================================================== */

.link {
    display: -webkit-flex;
    /* Safari */
    -webkit-justify-content: space-between;
    /* Safari 6.1+ */
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}
.link div {
    width: calc(100%/3 - 3%);
    display: inline-block;
    padding: 10px 0;
    text-align: center;
    border: 1px solid #007ae1;
    border-radius: 8px;
    position: relative;
}
.link div a {
    position: absolute;
    ;
    z-index: 99;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.link div:hover {
    border: 3px solid #007ae1;
}
.link img {
    display: block;
    margin: 5% auto;
    width: 60%;
}
.link span {
    font-size: 21px;
    font-weight: bold;
    color: #007ae1;
}

/* ====================================================================
   *product
   * ==================================================================== */

#idx-product {
    padding: 25px 0 15px;
    background: url(../images/bg-01.jpg) top repeat-x, url(../images/bg-02.jpg) bottom repeat-x, #e0dedf;
}
#owl-demo .item {
    margin: 0 10px;
    color: #5a5d62;
    position: relative;
}
div#idx-product a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    cursor: pointer;
}
#idx-product>.title, div#owl-demo {
    max-width: 1200px;
    margin: 0 auto 10px;
    width: 100%;
}
#idx-product img {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: box-shadow;
    transition-property: box-shadow;
}
#idx-product .item:hover img, #idx-product .item:focus img, #idx-product .itemactive img {
    box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
}
#idx-product img {
      width: 100%;
    background: #fff;
}
#owl-demo .title {
    position: relative;
    padding: 8px 0;
    font-size: 18px;
    font-weight: bold;
    color: #3f4144;
}
#idx-product .item:hover .title {
    color: #007ae1;
}
#owl-demo .title::after {
    content: " ";
    position: absolute;
    display: block;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: rgb(0, 160, 233);
    /* Old browsers */
    background: -moz-linear-gradient(left, rgba(0, 160, 233, 1) 0%, rgba(0, 160, 233, 1) 35%, rgba(0, 0, 0, 1) 35%, rgba(0, 0, 0, 1) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(0, 160, 233, 1) 0%, rgba(0, 160, 233, 1) 35%, rgba(0, 0, 0, 1) 35%, rgba(0, 0, 0, 1) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(0, 160, 233, 1) 0%, rgba(0, 160, 233, 1) 35%, rgba(0, 0, 0, 1) 35%, rgba(0, 0, 0, 1) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
#owl-demo.owl-theme .owl-controls .owl-buttons div {
    position: relative;
    display: inline-block;
    zoom: 1;
    margin: 8px;
    padding: 0;
    width: 25px;
    height: 30px;
    color: #FFF;
    font-size: 18px;
    line-height: 29px;
    text-align: center;
    border-radius: 0;
    opacity: 1;
    background-color: #1e489d;
}
#owl-demo.owl-theme .owl-controls .owl-buttons div:hover {
    background-color: #54abe0;
}
.owl-buttons {
    position: absolute;
    top: -58px;
    right: -5px;
}
.owl-theme .owl-controls .owl-buttons div {
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
#owl-demo .owl-theme .owl-controls .owl-buttons div {
    color: #FFF;
    display: inline-block;
    zoom: 1;
    margin: 8px;
    width: 25px;
    height: 30px;
    font-size: 18px;
    line-height: 29px;
    text-align: center;
    background-color: #1e489d;
}
.owl-prev::after {
    content: "\f060";
    position: absolute;
    display: block;
    width: 25px;
    left: 0;
}
.owl-next::after {
    content: "\f061";
    position: absolute;
    display: block;
    width: 25px;
    right: 0;
}
#idx-product p {
    font-size:
}
#idx-product p.more {
    padding-right: 10px;
    color: #ed5e08;
    font-size: 13px;
    text-align: right;
}

/* ====================================================================
   *經銷商
   * ==================================================================== */

#idx-dealership {
    width: 65%;
    display: inline-block;
    vertical-align: middle;
    position: relative;
}
#idx-dealership div {
    position: absolute;
    font-size: 18px;
    color: white;
    text-shadow: 2px 2px 7px #3a3636;
}
#idx-dealership a {
    font-size: 21px;
    color: black;
    font-weight: bold;
}
#idx-dealership img {
    width: 100%;
}
#idx-dealership a:hover {
    color: #007ae1;
}
#idx-dealership .america {
    top: 38%;
    left: 16%;
}
#idx-dealership .europe {
    top: 26%;
    left: 50%;
}
#idx-dealership .asia {
    bottom: 30%;
    right: 25%;
}
#idx-dealership .korea {
    top: 37%;
    right: 15.5%;
}
#idx-dealership .taiwan {
    right: 14%;
    bottom: 45%;
}
#idx-dealership .china {
    top: 41%;
    right: 22%;
}
#idx-info {
    width: 34%;
    display: inline-block;
    vertical-align: middle;
    font-weight: bold;
    color: #555661;
    /* font-size: 16px; */
    letter-spacing: 0;
    line-height: 1.8rem;
    padding-left: 1%;
}
div#idx-info ul {
    margin-bottom: 20px;
}
div#idx-info i {
    margin-right: 10px;
}
div#idx-info .name {
    color: #373f94;
}
div#idx-info a {
    font-size: 16px;
    letter-spacing: 0;
}
div#idx-info a.tel, div#idx-info a.tel:hover {
    pointer-events: none;
    cursor: text;
}
@media print, screen and (max-width:1680px) {
    #slider h2, #slider p {
        left: 8%;
    }
    #slider .img {
        right: 5%;
    }
}
@media print, screen and (max-width:1280px) {
    #idx-product {
        padding: 3%;
    }
    #content {
        margin: 0 auto;
    }
    #slider h2, #slider p {
        left: 3%;
    }
    #slider .img {
        right: 3%;
        text-align: right;
    }
}
@media print, screen and (max-width:999px) {
    #banner {
        margin: 0;
    }
    #slider h2, #slider p {
        position: static;
        padding: 0 20px;
        margin: 0;
        width: 100%;
    }
    #slider h2, #slider p, #slider .img {
        left: 0;
        right: 0;
        max-height: 450px;
    }
    #content .left, #content .right {
        width: 100%;
        border: 0;
        margin: 0;
        padding: 0;
    }
    div#idx-link, div#idx-aboutus {
        margin: 0 0 40px;
        padding: 0;
    }
    div#idx-news ul li:nth-child(3), div#idx-news ul li:nth-child(4), div#idx-news ul li:nth-child(5) {
        display: none;
    }
    #idx-dealership, #idx-info {
        width: 100%;
    }
    div#idx-info ul {
        display: inline-block;
        vertical-align: top;
        width: 49%;
    }
    #idx-info li {
        text-align: left;
    }
    div#idx-info a.tel, a.tel:hover {
        pointer-events: initial;
    }
}
@media print, screen and (max-width:768px) {
    div#idx-info ul {
        display: inline-block;
        vertical-align: top;
        width: 100%;
        text-align: center;
    }
}
@media print, screen and (max-width:640px) {
    #banner {
        height: 415px;
    }
    #slider, #slider .item {
        height: 385px;
    }
    h2 {
        font-size: 24px;
        line-height: 26px;
    }
    div#idx-aboutus p {
        padding: 0 0 125px 0;
    }
    #idx-aboutus:after {
        opacity: 0.5;
    }
    #slider .img img {
        max-height: 335px;
    }
    #idx-dealership {
        display: none;
    }
    div#idx-info ul {
        width: 100%;
    }
}
@media print, screen and (max-width:560px) {}
@media print, screen and (max-width:480px) {
    #slider .img img {
        max-height: 290px;
    }
    .link span {
        font-size: 16px;
    }
}