﻿html {
    font-size: 16px;
}
body {
    font-family: 'Helvetica', 'Arial','LiHei Pro','Microsoft JhengHei','sans-serif';
    -webkit-font-smoothing: antialiased;
    font-size: 16px;
    color: #f0f0f0;
}
body, html {
    height: 100%;
    background-color: #1f1f1f;
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
    background-image: url('../image/background.jpg');
    background-repeat: repeat !important;
}
.box{
    max-width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
}

/*圖片滑過放大*/
.img_zoom {transition: all 0.4s;}
.img_zoom:hover {transform: scale(1.1);}   /*圖片滑過放大*/

.text_move {width: 100%;transition: all 0.3s;}
.text_move:hover {transform: translate(8px) scaleX(1.04);}

.focus {color: #FFA838 !important;}

a:link {color: #fff;} /* 設定尚未點閱過的連結樣式顏色 */
a:visited {color:#fff;} /* 設定過去曾經閱過的連結顏色 */
a:hover {color:#fff;text-decoration:none;} /* 設定滑鼠游標指在連結位置上的樣式顏色 */
a:active {color:#fff;} /* 設定上點擊過的連結樣式顏色 */

.tran-button:hover {
    background-color: rgba(255,255,255,0.1) !important;
}
.class-button {
    background-image: url(../image/button01.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.class-button:hover {
    background-image: url(../image/button02.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.vline{
    color:rgba(255,255,255,0.6);
    border-left:1px solid rgba(255,255,255,0.6);
    width:1px;
}
.hline{
    background-color:rgba(255,255,255,0.6);
    color:rgba(255,255,255,0.6);
    height:1px;
}
div.dropdown-menu{
    background-color:rgba(0,0,0,0);
    border-width:0px;
    margin-top:1px;
}
a.dropdown-item{
    background-color:black;
    font-size:18px;
    border:1px solid rgba(255,255,255,0.6);
    margin-top:-1px;
    padding:10px;
}
.footer-icon {
    width:100%;
    text-align:right;
    margin-bottom:30px;
}

.bg-fixed {
    background-repeat:no-repeat !important;
    background-position: center !important;
    background-size: cover !important;
}

.detailContent {
    width: 100%;
/*    margin-top: 10px;*/
    margin-bottom: 10px;
    overflow: hidden;
    overflow-x: auto;
    word-wrap: break-word;
}
    /*    .detailContent ul, .detailParameter ul {
        padding-left: 30px
    }
        .detailContent ul li, .detailParameter ul li {
            list-style-type: initial
        }*/
    .detailContent img {
        max-width: 100%;
        height: auto;
        margin: 0px;
        padding: 0px;
        vertical-align: top;
    }

.foot_div {
/*    position:fixed;*/ /*固定浮動於底部*/
    display: flex;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
}

.foot_nav {
    font-size:16px;
    width: 25%;
    background-color: #000000;
    text-align: center;
}
    .foot_nav:hover, .foot_nav:focus {
        background-color: #101010;
    }
    .foot_nav a {
        color: #db8e38;
        display: block;
        border: 2px solid #db8e38;
    }
        .foot_nav a:hover, .foot_nav a:focus {
            text-decoration: none;
        }
    .foot_nav span {
        display: block;
    }

lang-button button {
    background-color: aqua;
}
.lvSecial-width {
    max-width: 970px;
}

/*如果螢幕寬度為 576px 以下(手機版面)，就套用 css 設定*/
@media (max-width: 575.99px) {
    .line-fill{ width:100%;position:absolute;left:0px;}
   .gmap{height:350px;}
    .watch-price {margin-right:0px !important;}
    .WatchClass {
        width: 33.3% !important;
        flex-shrink: 0 !important;
    }
    .focus_back {
        font-size: 14px !important;
    }
    .lang-button button {
        font-size: 13px !important;
        width: 58px !important;
        height: 29px !important;
    }
    .contact-icon {width: 32px;}
    .contact-title {font-size: 18px;}
    .SubPage-button {
        width: 90%;
        margin-top: 5px !important;
        margin-bottom: 5px !important;       
    }
    .phone-hide3 {display: none;}
    .qa_order-icon {width: 55px; vertical-align:top;}
    .custom-remark {display:block;}
    .brand-filter {margin-top:-1px;}

}
/*如果螢幕寬度為 576px 以上(手機版面)，就套用 css 設定*/
@media (min-width: 576px) {
    .watch-price {margin-right:10px !important;}
    .WatchClass {
        width: 130px !important;
        flex-shrink: inherit !important;
    }
    .footer-right {
        text-align: right;
    }
    .contact-icon {width: 36px;}
    .contact-title {font-size: 20px;}
    .phone-show3 {display: none;}
    .qa_order-icon {margin-right: 10px;width: 70px;}
    .brand-filter {margin-left: -1px;}
    .watch-left {margin-right: 0px;}
    .watch-right {margin-left: 0px;}
}

/*如果螢幕寬度為 1226px 以下，就套用 css 設定*/
@media (max-width: 1225.99px) {
    .lvSecial-width {
        max-width: 870px;
    }
}
@media (max-width: 1125.99px) {
    .lvSecial-width {
        max-width: 770px;
    }
}
@media (max-width: 1025.99px) {
    .lvSecial-width {
        max-width: 670px;
    }
}
@media (max-width: 1435.99px) {
    .right-hide {display: none;}
}
/*如果螢幕寬度為 992px 以下(手機版面)，就套用 css 設定*/
@media (max-width: 991.99px) {
    #rightBox{float:left;}
    .contentText {font-size:20px;}
    .footer-icon {width:100%;text-align:center;margin-bottom:30px;}
    ul.navbar-nav {
        max-width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color:none;
    }
    li.nav-item {
        border-bottom: 1px solid rgba(255,255,255,0.5);
        width: 65% !important;
        min-width: 250px;
        padding-top: 6px;
        padding-bottom: 6px;
    }
    a.dropdown-item{
        white-space:normal;
    }
    .toggle::after {
      display: inline-block;
      margin-left: 0.255em;
      vertical-align: 0.255em;
      content: "";
      border-top: 0.3em solid;
      border-right: 0.3em solid transparent;
      border-bottom: 0;
      border-left: 0.3em solid transparent;
      position:absolute;
      right:2px;
      margin-top:10px;
    }
    .phone-hide{display:none;}
    .phone-center{text-align:center;}
    .aboutText {font-size:16px !important;}
    .newsText {font-size: 18px !important;}
    .watchText {font-size: 20px !important;}
    .watchText2 {font-size: 22px !important;}
    .watchText3 {font-size: 18px !important;}

    .qa_q-icon {width:60px;}
    .qa_a-icon {margin-right:20px;width:60px;}


    .repair-bg1 {
        background-repeat:no-repeat !important;
        background-size: cover !important;
        background-position-y:center !important;
        background-color: rgba(0, 0, 0, .8) !important;
        background-blend-mode: multiply;
        padding:20px !important;
    }
    .repair-bg2 {
        background-position: right center;
        background-repeat:no-repeat !important;
        background-size: cover !important;
        background-color: rgba(0, 0, 0, .8) !important;
        background-blend-mode: multiply;
        padding:20px !important;
    }
    .focus_back {
        background-color: #FFA838 !important;
        color: #1F1F1F;
    }
    .lang-button{
        width:70px;
        margin-right:12px;
    }
    .SearchBox {
        padding: 15px;
        padding-top:2px;
        width: 100%;
    }
    .menu-brand {
        width: 100%;
    }
    .footer-content {
        margin-right: 15px;
        margin-left: 15px;
        text-align: center;
    }
    .lvSecial-width {
        max-width:none;
    }
}

/*如果螢幕寬度為 768px 以下(手機版面)，就套用 css 設定*/
@media (max-width: 767.99px) {
    .news-date {text-align: left !important;}

    /*custom.asp 使用*/
    .custom-row {}
    .phone-hide2 {display: none;}
    .maintainText {font-size: 16px;}
    .titleText {font-size: 25px;}
    .maintainBox {
        background: none !important;
        padding: 0px;
        color: #f0f0f0 !important;
        text-align: left !important;
    }
}

/*如果螢幕寬度為 768px 以上(手機版面)，就套用 css 設定*/
@media (min-width: 768px) {
    .watch-div{padding-top:3px;padding-bottom:3px;}
    .news-date {text-align: right !important;}
    .foot_div {
        display: none;
    }

    /*custom.asp 使用*/
    .custom-row {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-right: -15px;
        margin-left: -15px;
    }
    .contact-icon {width: 44px;}
    .contact-title {font-size: 23px;}
    .maintainText {font-size: 18px;}
    .titleText {font-size: 33px;}
    .phone-show2 {display: none;}
    .maintainBox {
        min-height: 350px;
        padding: 10px;
        color: #1f1f1f !important;
    }
}

/*如果螢幕寬度為 992px 以上，就套用 css 設定*/
@media (min-width: 992px) {
    #rightBox{float:right;padding-left:30px;}
    .contentText {font-size:23px;} 
    a.nav-link{font-size:16px;}
    a.dropdown-item{font-size:16px;}
    .menu-item{width:auto;}
    ul.navbar-nav {
        width: 100%;
        background-color: #282626;
    }
    .aboutText {font-size:16px !important;}
    .newsText { font-size: 16px !important;}
    .watchText {font-size: 18px !important;}
    .watchText2 { font-size: 22px !important;}
    .watchText3 {font-size: 18px !important;}
    .dropdown:hover>.dropdown-menu {display: block;}
    .qa_q-icon {margin-right:20px;width:60px;}
    .qa_a-icon {margin-right:40px;width:60px;}
    li.nav-item {
        width: 12.5%;
    }
    .repair-bg1 {
        background-repeat:no-repeat !important;
        background-position-y:center !important;
        padding-left:345px;
        border-bottom:1px solid rgba(255,255,255,0.6); 
    }
    .repair-bg2 {
        background-position: right !important;
        background-repeat:no-repeat !important;
        padding-right:345px;
    }
    a.p-3{white-space:normal;}
    .watch-label{width:100px;}

    .phone-show {display:none;}

    .nav-item-border {
        border-left: 1px solid #F0F0F0;
    }

    .business-hours {
        float: right;
        text-align: right;
    }
    .focus_back {
        background-color: #FFA838 !important;
        color: #1F1F1F;
        border-top-left-radius: 12px;
        border-bottom-left-radius: 12px;
    }
    .SearchBox {
        padding-top: 15px;
        padding-bottom: 15px;
        width: 229px;
    }
    .menu-brand {
        width: 240px;
    }
    .footer-content {
        margin-right: 0px;
        margin-left: 0px;
    }
}

/*如果螢幕寬度為 1200px 以上，就套用 css 設定*/
@media (min-width: 1200px) {
    a.nav-link{font-size:18px;}
    a.dropdown-item{font-size:18px;}    
    .watch-price {margin-right: 40px !important;}
}

/*如果螢幕寬度為 1360px 以上，就套用 css 設定*/
@media (min-width: 1360px) {
    .menu-item {padding-right: 10px;padding-left: 10px;}
    .aboutText {font-size:18px !important;} 
    .newsText {font-size:18px !important;}
    .watchText {font-size: 20px !important;}
    .watchText2 {font-size: 24px !important;}
    .watchText3 {font-size: 20px !important;}
}

/*如果螢幕寬度為 1600px 以上，就套用 css 設定*/
@media (min-width: 1600px) {
    
}



