@charset "utf-8";
/* CSS Document */
/* 說明 css 名稱
 .font-dynamic:動態光暈字大小,
 .cd-words-wrapper b 動態光暈字滾動換字時可能的跑版現象
.topbar

*/



/****驗證碼*/
    .user-text {
  line-height: 18px;
   padding: 10px 16px;
   min-height: 40px;
   font-size: .9rem;
   border: 1px solid #888;
   border-radius: 5px;
}
   p.wrong {
       display: none;
   }
   
   p.wrong.shake {
       display: block;
   }
   
   p.wrong.shake {
       animation: shake .4s cubic-bezier(.36, .07, .19, .97) both;
       transform: translate3d(0, 0, 0);
       backface-visibility: hidden;
       perspective: 1000px;
   }
   
   @keyframes shake {
       10%,
       90% {
           transform: translate3d(-1px, 0, 0);
       }
       20%,
       80% {
           transform: translate3d(1px, 0, 0);
       }
       30%,
       50%,
       70% {
           transform: translate3d(-2px, 0, 0);
       }
       40%,
       60% {
           transform: translate3d(2px, 0, 0);
       }
   }
   
  .btn-check { width: 40px!important; height: 40px!important;  color: #333!important; border-radius: 5px!important; background-color: white!important; border-color: #9896a6!important;}
  
/*********驗證碼***********/





/*加line客服後，backtoTop的位置調整*/
#scrollTop {bottom: 85px!important;}


/* 手機版 套裝組合 滑出下拉出來的產品區塊 上方過窄 修正   開始*/
@media (max-width: 500px) {
.mega-menu-content .col-lg-6 {
    margin: 25px 0px 0px 00px!important;
    border-bottom: #dddddd dotted 1px!important;
    padding-bottom: 20px!important;
}
}
#mainMenu [class*=col-lg-] {
  line-height: 24px !important;
}
.hover-red:hover { color: #ff0000!important;}
/*露天拍賣，台灣淘寶、蝦皮購物按鈕底色    開始*/

.shopee:hover {
  content: url("../images/btn-shopee-hover.jpg")!important;
  cursor: pointer!important;
}
.taobao-taiwan:hover {
  content: url("../images/btn-taobao-taiwan-hover.jpg")!important;
  cursor: pointer!important;
}

/*露天拍賣，台灣淘寶、蝦皮購物按鈕底色    結束*/
/*******************************************/
/*******************************************/
/*nav 套裝組合 與 週邊零件 滑出的的商品內容區塊*/
#mainMenu nav > ul > li.mega-menu-item .mega-menu-content {
  padding: 5px 0px 5px 0px !important;
}
select.form-control:not([size]):not([multiple]) {
  margin-right: 5px;
}
.footer-shop-link {
  float: left;
  margin-right: 5px;
  text-decoration: underline !important;
  font-size: xx-small;
  margin-top: -10px;
  line-height: normal;
  color: chocolate !important;
  display: inline;
}
.footer-shop-link:hover {
  color: #ff0000 !important;
  text-decoration: underline !important;
}
.link-1 {
  color: white !important;
  padding: 7px 17px;
  border: solid 1px white;
  border-radius: 5px;
  font-weight: bold;
}
.link-1:hover {
  color: #555 !important;
  background-color: white;
}
#footer .text-fix {
  font-size: 1.7vw;
  margin-left: -2px;
  margin-top: -10px;
}
#footer .ul-fix {
  margin-left: -10px !important;
}
.mar-b-2vh {
  margin-bottom: 2vh;
}
#app-apple:hover {
  content: url("../images/btn_appstore_hover.png");
  cursor: pointer;
}
#app-google:hover {
  content: url("../images/btn_googleplay_hover.png");
  cursor: pointer;
}
.alert.alert-light {
  color: #9896a6;
  background-color: #f8f9fa;
  border-color: #e6e8eb;
  line-height: normal;
}
.alert {
  color: #fff;
  padding: .85rem 1.5rem;
  z-index: 9999;
  height: 5.5vh;
}
.flot-R {
  float: right;
}
.btn-dwn {
  /* font-size: 10px; */
  height: auto;
  /* line-height: 22px; */
  padding: 2px 20px;
}
/***********************/
/***********************/
#steps .text-box {
  padding: 20px;
}
/*----------------------------------*/
.font-bold {
  font-weight: bold !important;
}
.font-rwd-large {
  font-size: 3vw;
}
tr, td {
  line-height: normal;
}
@media (max-width:500px) {
  #footer .col-lg-3 {
    display: none !important;
  }
  .font-rwd-large {
    font-size: 6vw;
  }
  tr, td {
    font-size: small;
  }
  #topbar.dark.topbar-transparent {
    border: none;
  }
  .bg-overlay2 {
    background-image: url(../images/bg-warranty-500px.jpg) !important;
  }
}
.link-hover-red {
  color: brown;
}
.linehight-normal {
  line-height: normal;
}
.bg-black {
  background-color: #121212 !important;
}
.img-border {
  border: solid 1px #333;
}
.pad-b-5vh {
  padding-bottom: 5vh !important
}
.mar-b-5vh {
  margin-bottom: 5vh !important
}
.form-group label {
  margin-bottom: 5px !important
}
.font-size-1 {
  font-size: 3.5rem;
}
/*使用CSS，預載圖片*/
#img-preload::before {
  content: 'Loading...';
}
.img-pading-clear {
  width: 100vw !important;
  padding: 0px !important;
}
/* back to top 和 它的 hover效果*/
.fa-chevron-up {
  font-size: 3rem;
  padding-top: 6px;
}
/* sub title 文字："給您想要的" */
.heading-text.heading-section h2::before {
  display: none !important;
}
.lead {
  line-height: normal !important;
  color: #666 !important;
  font-size: 2.75rem;
}
/*--------------------------------------------*/
/*--------------------------------------------*/
.link-hover-red:hover {
  color: #ff0000 !important;
}
/*--------------------------------------------*/
/*--------------------------------------------*/
/* 中文字型 */
.zh-tw {
  font-family: "微軟正黑體", "新細明體" !important;
}
/*--------------------------------------------*/
/*--------------------------------------------*/
.container-fullscreen h4 {
  margin-left: 5px;
}
#topbar.topbar-transparent.dark {
  background-color: transparent !important;
}
#topbar.topbar-transparent.dark .top-menu > li > a, #topbar.topbar-transparent.dark .social-icons li a {
  color: #fff !important;
}
/* 嵌入 AFA tec logo 字型 針對不同瀏覽器需要 3 種字型格式: .woff、.ttf、.eot
   custom-font 裡字型名稱改小寫比較不會有 bug */
@font-face {
  font-family: 'handel';
  src: url(../custom-font/handel.eot);
}
@font-face {
  font-family: 'handel';
  src: url(../custom-font/handel.ttf);
}
.browser-font {
  font-family: handel;
}
/* 以上結束 嵌入 AFA tec logo 字型*/
/* 登入畫面修正 開始 */
/* 修正按出登入畫面後 整頁會位移 padding-right:16px; */
.breakpoint-xl, .b--desktop {
  padding-right: 0px !important;
}
.col-form-label {
  font-size: medium !important;
  font-weight: bold !important;
}
.modal-body {
  position: relative;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 2.5rem;
}
.form-group label:not(.error) {
  margin-bottom: 0px !important;
}
.form-control {
  border: 1px solid #888;
}
/* 登入畫面修正 結束 */
/*-------------------*/
.mar-b-fix {
  margin-bottom: 0px !important;
}
.font-bolder {
  font-weight: bolder;
}
.font-10rem {
  font-size: 10rem;
}
/*文字光暈*/
.text-fire {
  color: #ff65bd !important;
  text-shadow: 0px 0px 15px #ff2483;
}
/* ------------------------------------------- */
.link-white {
  color: white !important;
}
.p-dropdown ul.p-dropdown-content > li a:hover {
  color: brown;
}
/*-----------------------------------*/
/*-----------------------------------*/
@media (max-width: 320px) {
  .cd-words-wrapper b {
    font-size: 6rem !important;
  }
  .container-fullscreen h4 {
    margin-left: 6px;
  }
  .text-lg, .text-lg span {
    font-size: 37px !important;
    margin-bottom: 5px !important;
  }
  .cd-headline {
    font-size: 3rem;
    line-height: 1.2 !important;
  }
  .bg-overlay {
    background-image: url(../images/bg-fullscreen-320.jpg) !important;
  }
  .language-select {
    font-size: 1.2rem;
  }
  /* features 圖文縮放設定 開始*/
  .heading-text {
    padding: 23px !important;
  }
  .heading-text h1 {
    font-size: 13vw;
  }
  .image-block .col-lg-6 {
    padding: 0px !important;
  }
  .lead {
    font-size: 4.5vw;
  }
  /* features 圖文縮放設定 結束*/
}
/*-----------------------------------*/
/*-----------------------------------*/
@media only screen and (min-width: 321px) and (max-width: 360px) {
  .container-fullscreen h4 {
    margin-left: 3px;
  }
  .cd-words-wrapper b {
    font-size: 6.5rem !important;
  }
  .text-lg, .text-lg span {
    margin-bottom: 6px !important;
    margin-left: -2px;
  }
  .cd-words-wrapper b {
    font-size: 6.55rem !important;
    margin-left: -4px;
  }
  .btn-outline {
    margin-left: 2px;
  }
  .bg-overlay {
    background-image: url(../images/bg-fullscreen-360.jpg) !important;
  }
  /* features 圖文縮放設定 開始*/
  .heading-text {
    padding: 23px !important;
  }
  .heading-text h1 {
    font-size: 13vw;
  }
  .image-block .col-lg-6 {
    padding: 0px !important;
  }
  .lead {
    font-size: 4.5vw;
  }
  /* features 圖文縮放設定 結束*/
}
/*-----------------------------------*/
/*-----------------------------------*/
@media only screen and (min-width: 361px) and (max-width: 375px) {
  .container-fullscreen h4 {
    margin-left: 6px;
  }
  .mar-b-fix {
    margin-bottom: 5px !important;
  }
  .text-fire {
    margin-left: -3px !important;
  }
  .cd-words-wrapper b {
    font-size: 6.55rem;
    margin-left: -4px;
  }
  .cd-headline {
    margin-left: 0px !important;
    font-size: 3rem;
    /* margin-bottom: 13px; */
    padding-bottom: 0px;
  }
  .bg-overlay {
    background-image: url("../images/bg-fullscreen-375.jpg") !important;
  }
  .heading-text {
    padding: 0px;
    font-size: 2rem;
  }
}
/* features 圖文縮放設定 開始*/
.heading-text {
  padding: 23px !important;
}
.heading-text h1 {
  font-size: 13vw;
}
.image-block .col-lg-6 {
  padding: 0px !important;
}
.lead {
  font-size: 4.5vw;
}
/* features 圖文縮放設定 結束*/
/*-----------------------------------*/
/*-----------------------------------*/
@media only screen and (min-width: 376px) and (max-width: 393px) {
  .bg-overlay {
    background-image: url(../images/bg-fullscreen-393.jpg) !important;
  }
  .cd-headline.clip b.is-visible {
    font-size: 6rem !important;
    margin-left: -4px;
  }
  .cd-headline {
    font-size: 3rem;
  }
  .text-lg, .text-lg span {
    margin-bottom: 6px !important;
    margin-left: -1px;
  }
  .container-fullscreen h4 {
    margin-left: -4px;
  }
}
/*-----------------------------------*/
/*-----------------------------------*/
@media only screen and (min-width: 394px) and (max-width: 412px) {
  .cd-words-wrapper b {
    font-size: 6.5rem !important;
    margin-left: -3px;
  }
  .bg-overlay {
    background-image: url(../images/bg-fullscreen-412.jpg);
  }
  .font-dynamic {
    font-size: 6.5rem !important;
    margin-left: -3px;
  }
  .cd-headline {
    font-size: 3rem;
  }
  .container-fullscreen h4 {
    margin-left: 5px;
  }
  .btn-outline {
    margin-left: 2px;
  }
}
/*-----------------------------------*/
/*-----------------------------------*/
@media only screen and (min-width: 413px) and (max-width: 414px) {
  .bg-overlay {
    background-image: url(../images/bg-fullscreen-412.jpg) !important;
  }
  .cd-words-wrapper b {
    font-size: 6.5rem !important;
    margin-left: -3px;
  }
  .cd-headline {
    font-size: 3rem;
  }
  .container-fullscreen h4 {
    margin-left: 5px;
  }
  .btn-outline {
    margin-left: 2px;
  }
}
/*-----------------------------------*/
/*-----------------------------------*/
@media only screen and (min-width: 415px) and (max-width: 768px) {
  .bg-overlay {
    background-image: url(../images/bg-fullscreen-768x1024.jpg) !important;
  }
  .cd-words-wrapper b {
    font-size: 6.5rem !important;
    margin-left: -3px;
  }
  .cd-headline {
    font-size: 3rem;
  }
  .container-fullscreen h4 {
    margin-left: 5px;
  }
  .btn-outline {
    margin-left: 2px;
  }
  /* features 圖文縮放設定 開始*/
  .heading-text {
    padding: 45px !important;
  }
  .heading-text h1 {
    font-size: 13vw;
  }
  .image-block .col-lg-6 {
    padding: 0px !important;
  }
  .lead {
    font-size: 4.5vw;
  }
  /* features 圖文縮放設定 結束*/
}
/*-----------------------------------*/
/*-----------------------------------*/
@media only screen and (min-width: 769px) and (max-width: 1024px) {
  .bg-overlay {
    background-image: url(../images/bg-fullscreen-768x1024.jpg);
  }
  .cd-words-wrapper b {
    font-size: 13rem !important;
    margin-left: -3px;
  }
  .cd-headline {
    font-size: 3rem;
  }
  .container-fullscreen h4 {
    margin-left: 8px;
    padding-bottom: 9px;
  }
  .btn-outline {
    margin-left: 2px;
  }
  .text-lg, .text-lg span {
    margin-bottom: 10px !important;
    margin-left: -1px;
  }
  h2:not(:last-child), .h2:not(:last-child) {
    margin-bottom: 16px;
    margin-left: 6px;
  }
  .btn-outline {
    margin-left: 5px;
  }
  /* features 圖文縮放設定 開始*/
  .heading-text h1 {
    font-size: 5vw !important;
  }
  .image-block .col-lg-6 {
    padding: 0px !important;
  }
  .lead {
    font-size: 2vw;
  }
  /* features 圖文縮放設定 結束*/
}
/*-----------------------------------*/
/*---------- 在 寬 1024px 下文章圖片能 fit 螢幕寬度縮放--------------*/
@media (max-width: 1024px) {}
/*
.col-lg-6 img {
  background-size: contain !important;
}
*/
/*-----------------------------------*/
/*-----------------------------------*/
@media (max-width: 991.98px) {}
/*-----------------------------------*/
/*-----------------------------------*/
@media (max-width: 1199.98px) {}
/*-----------------------------------*/
/*-----------------------------------*/
@media (min-width: 1025px) {
  /* 每一區塊的文字標題，如"高畫質" */
  .heading-text h1 {
    font-size: 100px;
    left: -3px;
    font-weight: 600;
  }
  /*-----------------------------------*/
  /*-----------------------------------*/
  .font-dynamic {
    font-size: 15rem !important;
  }
  .bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    content: ' ';
    z-index: 0;
    background-image: url(../images/bg-fullscreen.jpg) !important;
  }
  .btn-outline {
    margin-left: 12px;
  }
  .cd-words-wrapper b {
    left: -3px;
  }
  /* features 圖文縮放設定 開始*/
  .heading-text h1 {
    font-size: 5vw !important;
  }
  .heading-text {
    padding: 50px !important;
  }
  .image-block .col-lg-6 {
    padding: 0px !important;
  }
  .lead {
    font-size: 2vw;
  }
  /* features 圖文縮放設定 結束*/
}
/*-----------------------------------*/
/*-----------------------------------*/