@charset "utf-8";
/*
  danny 201707
  1. $Reset
  2. $body,html
  3. $共用
  4. $Mobile
  5. $Pc
*/





/* $Mobile
--------------------------------------------------------------------------------------*/





/* header */
header{ width: 100%; height: 75vh; background: url(../image/acc__header__bg--mobile.jpg) top right no-repeat; background-size: cover; position: relative; overflow: hidden;  }
.header__colorbg{  display: none; position: absolute; left: 0; bottom: 0; border-bottom: 180px solid #252525; border-left: 500px solid transparent; }
.header-container{  }
/* header__series */
.header__series{ width: 35%; position: absolute; left: 50%; top: 40px; transform: translateX(-50%); }
.header__series >img{ width: 100%; height: auto; }
/* header__series__info */
.header__series__info{ display: none; }
.header__series__info--mobile{ position: absolute; width: 90%; left: 50%; top: 90px; transform: translateX(-50%); font-size: 0.8125rem; color: #fff; line-height: 1.5rem;  }
/* header__series__nav */
.header__series__nav{ display: flex; position: absolute; left: 50%; top: 190px; transform: translateX(-50%);	 }
.header__series__nav>li{ width: 60px; min-width: 70px; height: 35px; line-height: 35px; background: #353535; border: 1px solid #665c57; text-align: center; font-size: 0.875rem; color: #fff; margin-right: 1%; }
.header__series__nav>li:last-child{ margin-right: 0; }
.header__series__nav>li:hover{ background: #3499c2; cursor: pointer; }





/* product */
.product-container{ display: flex; flex-wrap: wrap; align-items: center; box-sizing: border-box; padding: 40px 3% 40px 3%; position: relative;  }
.product-L,.product-R{ width: 100%; }
.product__item{ margin: 0 0 30px 0;  }
.product__item>img{ display: block; width: 200px; height: auto; margin: 0 auto;  }
.product__info{ width: 100%; font-size: 0.875rem; line-height: 20px; color: #fff; }
.product__info__tit{ display: flex; font-size: 1.5rem; line-height:30px; color: #fad000; font-family: Helvetica,"微軟正黑體","新細明體","蘋果儷黑體", Arial, sans-serif; font-weight: bold; }
.product__info__tit>li{ margin-right: 10px; }
.product__info__tit>li:last-child{ margin-right: 0; }
.product__info__subtit-box{ font-family: Helvetica,"微軟正黑體","新細明體","蘋果儷黑體", Arial, sans-serif; position: relative; }
.product__info__subtit-box:before{ content: ''; display: block; border-bottom: 1px solid #505050; margin: 10px 0 10px 0; }
.product__info__subtit-box:after{ content: ''; display: block; border-bottom: 1px solid #505050; margin: 10px 0 10px 0; }
.product__info__subtit__logo{ width: 30px; position: absolute;  bottom: 10px; right: 0;  }
.product__info__subtit__logo>img{ width: 100%; height: auto; }
.product__info__subtit__logo-two{ display: flex; justify-content: space-between; width: 70px; position: absolute;  bottom: 15px; right: 0;  }
.product__info__subtit__logo-two img{ max-width: 30px; }
.product__info__subtit{ font-size: 1.125rem; line-height: 30px; }
.product__info__logo-box{ display: flex; align-items: center; margin: 10px 0 20px 0;  }
.product__info__logo-box>li{ margin-right: 20px; }
.product__info__logo-box>li>img{ width: 100%; height: auto; }
.product__info__logo__01{ width: 53px; }
.product__info__logo__02{ width: 36px; }
.product__info__logo__03{ width: 46px; }
.product__info__logo__04{ width: 59px; }
.product__info__logo__05{ width: 44px; }
.product__info__notelist{ margin: 25px 0 0 0; }
.product__info__notelist>li:first-child{ color: #ffea00; }
.product__info__notelist>li:nth-child(n+2){ color: #fff; }
.product__info__notelist>li:nth-child(n+2):before{ content: '\f00c'; display: inline-block; color: #f7e302; margin-right: 5px; }
.product__info__link-box{ display: flex; flex-wrap: wrap; margin: 10px 0 0 0;  }
.product__info__link{ width: 75%; margin: 10px 0 0 0; }
.product__info__link:last-child{ margin: 10px 0 0 0;  }
.product__info__link>li{ width: 100%; height: 50px; line-height: 48px; font-size: 0.9375rem; color: #31719a; border: 1px solid #494949; position: relative; box-sizing: border-box; padding: 0 10px;  margin: 0 0 10px 0; transition: all 0.2s ease-out;   }
.product__info__link>li:before{ content: '\f0ed'; font-size: 1.125rem; color: #fff; margin-right: 5px;  }
.product__info__link>li>a{ display: block; width: 100%;  height: 100%; position: absolute; left: 0; top: 0; }
.product__info__link>li:hover{ background: rgba(255,255,255,0.1); }
.product__info__link>li.productname{ font-size: 1.25rem; height: 40px;  color: #38b5e6; border: none; }
.product__info__link>li.productname:before{ display: none; }
.product__info__link>li.productname:hover{ background: none; }
.product__02 .product-L{ order: 2; }
.product__02 .product-R{ order: 1; }
.product__01 .product__features-container,.product__02 .product__features-container,.product__03 .product__features-container,.product__04 .product__features-container{ order: 3;  }
.product__features-container{ width: 100%; margin-top: 20px; }
.product__features-box{}
.product__features__tit-box{ display: flex; height: 33px; }
.product__features__tit-box:after{ content: ''; display: inline-block; background: #fff; width: 20px; height: 100%; transform: skewX(30deg); margin-left: -10px; }
.product__features__tit{ font-size: 0.875rem; color: #000; background: #fff; height: 33px; line-height: 33px; box-sizing: border-box; padding: 0 15px 0 15px; }
.product__features__list-box{ display: flex; flex-wrap: wrap; border: 1px solid #5d5d5d; box-sizing: border-box; padding: 20px 0; font-size: 0.8125rem; color: #b5b5b5; line-height: 20px; }
.product__features__list{ width: 100%; box-sizing: border-box; padding: 0 15px; border-right: none; }
.product__features__list:last-child{ border: none; }
.product__features__list>li{ list-style: disc; margin-left: 15px;}
.product__features__list__ps{ font-size: 0.875rem; margin-top: 10px; }




/* product__01 */
.product__01{ width: 100%; background: #252525; position: relative; box-sizing: }
.product__01__colorbg{ width: 100%; height: 100%; background: #2c2c2c; position: absolute; left: -20%; transform: skewX(-40deg); }
/* .product__01 .product__features__tit-box{ height: 50px; } */
.product__01 .product__features__tit-box:after{ width: 30px; margin-left: -15px; }
.product__01 .product__features__tit{ /* width: 90%; */ height: auto; /* line-height:20px; */ box-sizing: border-box; /* padding: 5px 20px 5px 15px; */ }






/* product__02 */
.product__02{ width: 100%; background: #1b1b1b; position: relative; overflow: hidden; }
.product__02__colorbg{ width: 100%; height: 100%; background: #1f1f1f; position: absolute; left: -40%; transform: skewX(-40deg);  }





/* product__03 */
.product__03{ width: 100%; background: #252525; position: relative; overflow: hidden; }
.product__03__colorbg{ width: 100%; height: 100%; background: #2c2c2c; position: absolute; left: -20%; transform: skewX(-40deg); }





/* product__04 */
.product__04{ width: 100%; background: #1b1b1b; position: relative; overflow: hidden; }
.product__04__colorbg{  width: 100%; height: 100%; background: #1f1f1f; position: absolute; left: -40%; transform: skewX(-40deg); }








/* $Pad
--------------------------------------------------------------------------------------*/
@media screen and (min-width:600px) and (max-width:1024px){





/* header */
header{ width: 100%; height: 50vh; background: url(../image/atf__header__bg.jpg) bottom right no-repeat; background-size: cover; position: relative; overflow: hidden;  }
.header__series{ width: 20%; position: absolute; left: 50%; top: 40px; transform: translateX(-50%); }
.header__colorbg{  display: none; width: 100%; position: absolute; left: 0%; bottom: 0; border-bottom: 180px solid #252525; border-left: 800px solid transparent; }
.header__series__info--mobile{ position: absolute; width: 50%; left: 50%; top: 100px; transform: translateX(-50%); font-size: 0.8125rem; color: #fff; line-height: 1.5rem;  }
/* .product__info__link{ width: 40%; margin: 10px 0 0 0; } */




.product__01 .product__features__tit-box{ height: 33px; }
.product__01 .product__features__tit-box:after{ width: 20px; margin-left: -10px; }
.product__01 .product__features__tit{ width: auto; height: auto; line-height:33px; box-sizing: border-box; padding: 0px 15px 0px 15px; }

}



/* 橫的版型 */
@media screen and (orientation:landscape){ 




/* header */
header{ min-height: 600px;   }
.header-container button{ top: 95px; }
}





/* $Pc
--------------------------------------------------------------------------------------*/
/* @media screen and (min-width: 768px){ */
@media screen and (min-width: 1025px){





html,body{ min-width: 100%; font-size: 16px; }






/* header */
header{ width: 100%; min-width: 1280px; height: 600px; background: url(../image/acc__header__bg.jpg) top center no-repeat; background-size: cover; position: relative; overflow: hidden; /* max-width: 1600px; margin: 0 auto; */ }
.header__colorbg{  display: none; position: absolute; left: 0; bottom: 0; border-bottom: 320px solid #252525; border-left: 2000px solid transparent;  }
.header-container{ max-width: 1280px; margin: 0 auto; position: relative;   }
/* header__series */
.header__series{ width: 206px; position: absolute; left: 18px; top: 245px; transform: none; }
.header__series >img{ width: 100%; height: auto; }
/* header__series__info */
.header__series__info{ display: block; position: absolute; left: 17px; top: 318px; font-size: 1.25rem; color: #fff; line-height: 30px; }
.header__series__info--mobile{ display: none; }
/* header__series__nav */
.header__series__nav{ display: flex; position: absolute; left: 17px; top: 425px; transform: translateX(0);}
.header__series__nav>li{ width: 90px; min-width: 90px; height: 27px; line-height: 27px; background: #353535; border: 1px solid #665c57; text-align: center; font-size: 1.125rem; color: #fff; margin-right: 8px; }
.header__series__nav>li:hover{ background: #3499c2; cursor: pointer; }
/* search-box */
.search-box{ margin: 1px auto 0 auto;  }





/* product */
.product-container{ display: flex; align-items: center; width: 1280px;  margin: 0 auto; box-sizing: border-box; position: relative;  }
.product-L,.product-R{ width: 50%; }
.product__features-container{ width: 100%; }
.product__item>img{ display: block; margin: 0 auto;  }
.product__info{ width: 575px; font-size: 1rem; line-height: 25px; color: #fff; }
.product__info__tit{ display: flex; font-size: 3.125rem; line-height: 50px; color: #fad000;font-family: Helvetica,"微軟正黑體","新細明體","蘋果儷黑體", Arial, sans-serif; font-weight: bold; }
.product__info__tit>li{ margin-right: 25px; }
.product__info__tit>li:last-child{ margin-right: 0; }
.product__info__subtit-box{ font-family: Helvetica,"微軟正黑體","新細明體","蘋果儷黑體", Arial, sans-serif; position: relative; }
.product__info__subtit-box:before{ content: ''; display: block; border-bottom: 1px solid #505050; margin: 10px 0 10px 0; }
.product__info__subtit-box:after{ content: ''; display: block; border-bottom: 1px solid #505050; margin: 10px 0 10px 0; }
.product__info__subtit__logo{ width: 30px; position: absolute;  bottom: 10px; right: 0;  }
.product__info__subtit__logo>img{ width: 100%; height: auto; }
.product__info__subtit__logo-two{ display: flex; justify-content: space-between; width: 70px; position: absolute;  bottom: 15px; right: 0;  }
.product__info__subtit__logo-two img{ max-width: 30px; }
.product__info__subtit{ font-size: 1.75rem; line-height: 40px; }
.product__info__logo-box{ display: flex; align-items: center; margin: 10px 0 20px 0;  }
.product__info__logo-box>li{ margin-right: 20px; }
.product__info__logo-box>li>img{ width: 100%; height: auto; }
.product__info__logo__01{ width: 53px; }
.product__info__logo__02{ width: 36px; }
.product__info__logo__03{ width: 46px; }
.product__info__logo__04{ width: 59px; }
.product__info__logo__05{ width: 44px; }
.product__info__notelist{ margin: 25px 0 0 0; }
.product__info__notelist>li:first-child{ color: #ffea00; }
.product__info__notelist>li:nth-child(n+2){ color: #fff; }
.product__info__notelist>li:nth-child(n+2):before{ content: '\f00c'; display: inline-block; color: #f7e302; margin-right: 5px; }
.product__info__link-box{ display: flex; flex-wrap: nowrap; }
.product__info__link{ width: auto; margin: 20px 15px 0 0; }
.product__info__link:last-child{ margin: 20px 0 0 0;  }
.product__info__link>li{ width: 220px; height: 30px; line-height: 28px; font-size: 0.9375rem; color: #31719a; border: 1px solid #494949; position: relative; box-sizing: border-box; padding: 0 5px;  margin: 0 0 5px 0; transition: all 0.2s ease-out;   }
.product__info__link>li:before{ content: '\f0ed'; font-size: 1.125rem; color: #fff; margin-right: 5px;  }
.product__info__link>li>a{ display: block; width: 100%;  height: 100%; position: absolute; left: 0; top: 0; }
.product__info__link>li:hover{ background: rgba(255,255,255,0.1); }
.product__info__link>li.productname{ font-size: 1.25rem; color: #38b5e6; border: none; }
.product__info__link>li.productname:before{ display: none; }
.product__info__link>li.productname:hover{ background: none; }
.product__01 .product-L,.product__03 .product-L{ order: 2; }
.product__01 .product-R,.product__03 .product-R{ order: 1; }
.product__01 .product__features-container,.product__02 .product__features-container,.product__03 .product__features-container,.product__04 .product__features-container{ order: 3;  }
.product__features-container{ margin-top: 40px; }
.product__features-box{}
.product__features__tit-box{ display: flex; height: 33px; }
.product__features__tit-box:after{ content: ''; display: inline-block; background: #fff; width: 20px; height: 100%; transform: skewX(30deg); margin-left: -10px; }
.product__features__tit{ font-size: 1rem; color: #000; background: #fff; height: 33px; line-height: 33px; box-sizing: border-box; padding: 0 15px 0 15px; }
.product__features__list-box{ display: flex; border: 1px solid #5d5d5d; box-sizing: border-box; padding: 20px 0; font-size: 0.8125rem; color: #b5b5b5; line-height: 20px; }
.product__features__list{ width: 33%; box-sizing: border-box; padding: 0 15px; border-right: 1px solid #5d5d5d; }
.product__features__list:last-child{ border: none; }
.product__features__list>li{ list-style: disc; margin-left: 15px;}
.product__features__list__ps{ font-size: 0.875rem; margin-top: 10px; }



/* product__01 */
.product__01{ display: flex; align-items: center; width: 100%; min-width: 1280px; height: 860px; background: #252525; position: relative; overflow: hidden;	 }
/* .product__01__colorbg{ width: 500px; height: 120%; background: #2c2c2c; position: absolute; left: 31%; top: -40px;  transform: skew(45deg, -9deg); } */
.product__01__colorbg{ width: 576px; height: 100%; background: #2c2c2c; position: absolute; left: 26%; top: 0px; /* left:33%; top: -29px; */ transform: skew(45deg, 0deg); }
.product__01 .product__features__tit-box{ height: 33px; }
.product__01 .product__features__tit-box:after{ width: 20px; margin-left: -10px; }
.product__01 .product__features__tit{ width: auto; height: auto; line-height:33px; box-sizing: border-box; padding: 0px 15px 0px 15px; }





/* product__02 */
.product__02{ display: flex; align-items: center; width: 100%; min-width: 1280px; height: 860px; background: #1b1b1b; position: relative; overflow: hidden; }
.product__02__colorbg{ width: 576px; height: 100%; background: #1f1f1f; position: absolute; left: 26%; top: 0px; transform: skew(-45deg, 0deg); }
.product__02 .product__features__tit-box{ justify-content: flex-end; }
.product__02 .product__features__tit-box:after{ display: none; }
.product__02 .product__features__tit-box:before{ content: ''; display: inline-block; background: #fff; width: 20px; height: 100%; transform: skewX(-30deg); margin-right: -10px; }





/* product__03 */
.product__03{ display: flex; align-items: center; width: 100%; min-width: 1280px; height: 860px; background: #252525; position: relative; overflow: hidden; }
.product__03__colorbg{ width: 576px; height: 100%; background: #2c2c2c; position: absolute; left: 26%; top: 0px; transform: skew(45deg, 0deg); }





/* product__04 */
.product__04{ display: flex; align-items: center; width: 100%; min-width: 1280px; height: 860px; background: #1b1b1b; position: relative; overflow: hidden; }
.product__04__colorbg{ width: 576px; height: 100%; background: #1f1f1f; position: absolute; left: 26%; top: 0px; transform: skew(-45deg, 0deg); }
.product__04 .product__features__tit-box{ justify-content: flex-end; }
.product__04 .product__features__tit-box:after{ display: none; }
.product__04 .product__features__tit-box:before{ content: ''; display: inline-block; background: #fff; width: 20px; height: 100%; transform: skewX(-30deg); margin-right: -10px; }





/* gototop */
.goto-box>li.gotosearch{ display: block; width: 68px; height: 109px; background: url(../image/elite__gotosearch.png); background-position: 0 0;  }
.goto-box>li.gototop{ width: 68px; height: 69px; background: url(../image/elite__gototop.png); background-position: 0 0; }


}











/* $1025~1279
--------------------------------------------------------------------------------------*/
@media screen and (min-width:1025px) and (max-width:1279px){





/* header */
header{ width: 100%; min-width: 1280px; height: 710px; background: url(../image/acc__header__bg.jpg) top center no-repeat; background-size: cover; position: relative; overflow: hidden; /* max-width: 1600px; margin: 0 auto; */ }
.header__colorbg{ position: absolute; left: 0; bottom: 0; border-bottom: 320px solid #252525; border-left: 2000px solid transparent;  }
.header-container{ max-width: 1280px; margin: 0 auto; position: relative;   }
/* header__series */
.header__series{ width: 206px; position: absolute; left: 18px; top: 245px; transform: none; }
.header__series >img{ width: 100%; height: auto; }
/* button */
.header-container button{ display: block;  height: 30px; line-height: 28px; font-size: 0.9375rem; color: #fff; background: rgba(0,0,0,0.5); border: 1px solid #fff; position: absolute; left: 155px; top: 284px; padding: 0 10px; transition: all 0.4s  cubic-bezier(.25,.1,.25,1); }
.header-container button:hover{ background: rgba(52,153,194,1); }
.header-container button>a{ display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
/* header__patent */
.header__patent{ width: 220px; position: absolute; left: 105px; top: 377px; transform: none; /* background: url("../image/animationA/cleanguard.png") no-repeat center top; */ }
.header__patent>img{ width: 100%; height: auto; }
/* header__car */
.header__car{ width: 978px; position: absolute; left: 286px; top: 222px;  }
.header__car>img{ width: 100%; height: auto; }
/* header__engine */
.header__engine{ width: 365px; height: 329px; position: absolute; left: 500px; top: 360px; animation: header__engine__animation 0.8s ease-out infinite alternate;  }
.header__engine__item{ display: block; position: absolute; top: 50%; left: 50%;  transform: translate(-50%, -50%); }
.header__engine__shadow{ display: block; position: absolute; top: 50%; left: 50%;  transform: translate(-50%, -50%);  animation: header__engine__shadow__animation 0.8s ease-out infinite alternate; }
@keyframes header__engine__shadow__animation{ from{ opacity: 0; } to{ opacity: 1; } }
@keyframes header__engine__animation{ from{ transform: scale(0.95,0.95); } to{ transform: scale(1,1); } }
}