@charset "utf-8";
/*
  danny 201709
  1. $Mobile
  2. $Pad
  3. $橫的版型
  4. $Pc
  5. $1025~1279
*/





/* $共用
--------------------------------------------------------------------------------------*/
html,body{ background: #000; }




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





/* header__submenu */
.header__submenu{ display: none; }
/* search-box */
.search-box{ display: block; }
/* mainmenu__oilsearch */
/* .mainmenu__oilsearch{ display: none; } */





/* search__topinfo */
.search__space{ margin-top: 80px; }
.search__topinfo{ display: flex; justify-content: center; flex-wrap: wrap; width: 100%; margin: 0 auto; font-size: 0.875rem; color: #3f3f3f; margin-bottom: 15px;}
.search__topinfo>li{ box-sizing: border-box; padding: 0 20px 0 20px; line-height: 18px; /* border: 1px solid #9a9a9a */; border-width: 0 1px 0 1px; margin: 0 0 10px -1px; }
.search__topinfo>li:first-child{ font-size: 1.375rem; margin-bottom: 20px; border: none; }
.search__topinfo--blue{ color: #38b4e5; }
.search__topinfo--red{ color: #ff0000; }
.search__topinfo>li>ul{ display: flex; }
.search__topinfo>li>ul>li{ box-sizing: border-box; padding: 0 20px 0 0; }
.search__topinfo>li>ul>li:last-child{ padding: 0 0 0 0; }





/* tab */
.tab-container{ box-sizing: border-box; padding: 35px 0 0 0; }
.tab{ display: flex; justify-content: space-between; align-items: center; width: 100%; margin: 0 auto; height: 48px; background: #3499c2; box-sizing: border-box; padding: 8px 4px 8px 4px; }
.tab>li{ height: 40px; line-height: 40px; font-size: 1.25rem; color: #3499c2; text-align: center; width: 50%; background: #000001; margin-right: 8px; position: relative;}
.tab>li:last-child{ margin-right: 0; }
.tab>li.active{ background: #3499c2; }
.tab>li>a{ display: block; width: 100%; height: 100%; color: #3499c2; text-decoration: none; }
.tab>li:hover>a,.tab>li.active>a{ color: #fff; }





/* contents-box */
.contents-box{ width: 100%; margin: 0 auto; background: #3499c2; box-sizing: border-box; padding: 0px 4px 4px 4px; }
.contents{ background: #e8e8e8; box-sizing: border-box; padding: 30px 10px 30px 10px; }





section:first-of-type{  }
/* product */
.product-container{ display: flex; flex-wrap: wrap; align-items: center; margin: 0 0 20px 0; box-sizing: border-box; padding: 10px 3% 10px 3%; position: relative; background: #fff;  }
.waring-txt{ display: flex; align-items: flex-start; margin: -20px auto 0px auto; box-sizing: border-box; padding: 20px 20px 20px 20px; position: relative; /* background: #fff;  */font-size: 0.8125rem; }
.waring-txt>img{ width: 30px; margin: 0 5px 0 0; }
.product-L,.product-R{ width: 100%; }
.product__item{ margin: 0 0 30px 0;  }
.product__item>img{ display: block; width: 120px; height: auto; margin: 0 auto;  }
.product__info{ width: 100%; font-size: 0.875rem; line-height: 20px; color: #282828; }
.product__info__tit{ display: flex; font-size: 1.5rem; line-height:30px; color: #36a9d6; 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{ 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: #282828; }
.product__info__notelist>li:nth-child(n+2){ color: #282828; margin: 0 0 0 20px; }
.product__info__notelist>li:nth-child(n+2):before{ content: '\f00c'; display: inline-block; color: #2828282; margin:0 5px 0 -20px; }
.product__info__btn{ width: 100px; height: 35px; line-height: 35px; background: #3499c2; font-size: 0.875rem; color: #fff; margin-top: 15px; box-sizing: border-box; padding: 0 10px; }
.product__info__btn:hover{ background: #085068; cursor: pointer; }
.product__info__btn a{ color: #fff; text-decoration: none; }
.product__info__link-box{ display: flex; flex-wrap: wrap; margin: 10px 0 0 0;  }
.product__info__link{ width: 70%; 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: #38b4e5; border: 1px solid #b9b9b9; 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: #38b4e5; 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(205,205,205,0.3); }
.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__02 .product__item>img{ width: 280px;   }





/* search__footerinfo */
.search__footerinfo{ width: 95%; margin: 0 auto; font-size: 0.875rem; color: #282828; line-height: 25px; }
.search__footerinfo__list01{ list-style: disc; margin-left: 25px;}
.search__footerinfo__list01 ul>li:before{ content: '- '; display: inline-block; margin-right: 5px;  }
.search__footerinfo__list02{ font-size: 0.75rem; margin-top: 35px; }
.search__footerinfo__list02>li{ list-style: decimal; margin-left: 25px;}




.productnote{ font-size: .75rem; line-height: 1.5em; }
.productmargin{ margin: 0 0 0 0px; }


.rup{ top: -8px;}
.searchrup{ top: -2px; position: relative; font-size:65%; }


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





}



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





}





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





/* header */
header{ width: 100%; min-width: 1280px; height: 600px; background: url(../image/knowledge__header__bg.jpg) top center no-repeat; background-size: cover; position: relative; overflow: hidden; /* margin-bottom: -10px; */ }
.header__shadow{ 
	width: 100%; height: 288px;	position: absolute;	left: 0; top: 0; 
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+54,000000+100&1+0,0+100 */
	background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 40%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 40%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}






/* header__submenu */
.header__submenu{ display: none; }





/* search-box */
.search-box{ display: block; }





/* search__topinfo */
.search__space{ margin-top: 100px; }
.search__topinfo{ display: flex; /* justify-content: center; */ justify-content: flex-start; width: 1122px; margin: 0 auto; /* font-size: 1.125rem; */ font-size: 1rem; color: #3f3f3f; margin-bottom: 30px;}
.search__topinfo>li{ box-sizing: border-box; padding: 0 20px 0 20px; line-height: 18px; border-right: 1px solid #9a9a9a; }
.search__topinfo>li:first-child{ /* font-size: 1.125rem; */ font-size: 1rem; margin-bottom: auto; border: 1px solid #9a9a9a; border-width: 0 1px 0 1px; }
.search__topinfo--blue{ color: #38b4e5; }
.search__topinfo--red{ color: #ff0000; }
.search__topinfo>li>ul{ display: flex; }
.search__topinfo>li>ul>li{ box-sizing: border-box; padding: 0 20px 0 0; }
.search__topinfo>li>ul>li:last-child{ padding: 0 0 0 0; }





/* tab */
.tab-container{ box-sizing: border-box; padding: 205px 0 0 0; }
.tab{ display: flex; justify-content: space-between; align-items: center; width: 1280px; margin: 0 auto; height: 48px; background: #3499c2; box-sizing: border-box; padding: 8px 4px 8px 4px; }
.tab>li{ height: 40px; line-height: 40px; font-size: 1.625rem; color: #3499c2; text-align: center; width: 50%; background: #000001; margin-right: 8px; position: relative;}
.tab>li:last-child{ margin-right: 0; }
.tab>li.active{ background: #3499c2; }
.tab>li>a{ display: block; width: 100%; height: 100%; color: #3499c2; text-decoration: none; }
.tab>li:hover>a,.tab>li.active>a{ color: #fff; }





/* contents-box */
.contents-box{ width: 1280px; margin: 0 auto; background: #3499c2; box-sizing: border-box; padding: 0px 4px 4px 4px; }
.contents{ background: #e8e8e8; box-sizing: border-box; padding: 30px 0 30px 0; }





/* product */
section:first-of-type{ /* padding: 206px 0 0 0;  */}
.product-container{ display: flex; align-items: center; width: 1122px;  margin: 0 auto 30px auto; box-sizing: border-box; position: relative; background: #fff; padding: 20px 3% 10px 3% }
.waring-txt{ display: flex; align-items: center; width: 1122px;  margin: -30px auto 0px auto; box-sizing: border-box; padding: 20px 20px 20px 20px; position: relative; /* background: #fff; */ font-size: 1rem; }
.waring-txt>img{ width: 30px; margin: 0 5px 0 0; }
.product-L{ width: 40%; }
.product-R{ width: 55%; }
.product__item>img{ width: 200px; display: block; margin: 0 auto;  }
.product__info{ width: 575px; font-size: 1rem; line-height: 25px; color: #282828; }
.product__info__tit{ display: flex; font-size: 3.125rem; line-height: 50px; color: #36a9d6;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; margin-bottom: 20px; }
.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{ 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: #282828; }
.product__info__notelist>li:nth-child(n+2){ color: #282828; }
.product__info__notelist>li:nth-child(n+2):before{ content: '\f00c'; display: inline-block; color: #282828; margin-right: 5px; }
.product__info__btn{ width: 100px; height: 35px; line-height: 35px; background: #3499c2; font-size: 1rem; color: #fff; margin-top: 15px; box-sizing: border-box; padding: 0 10px; position: relative; text-align: center;}
.product__info__btn a{ color: #fff; text-decoration: none; display: block; width: 100%;	height: 100%; position: absolute; left: 0; top: 0;  }
.product__info__btn:hover{ background: #085068; cursor: pointer; }
.product__info__link-box{ display: flex; flex-wrap: nowrap; }
.product__info__link{ width: auto; margin: 15px 15px 0 0; }
.product__info__link:last-child{ margin: 15px 0 0 0;  }
.product__info__link>li{ min-width: 220px; height: 30px; line-height: 28px; font-size: 0.9375rem; color: #38b4e5; border: 1px solid #b9b9b9; 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: #38b4e5; 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(205,205,205,0.3); }
.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__02 .product-L{ order: 1; }
.product__02 .product-R{ order: 2; }
.product__02 .product__item>img{ width: auto;   }





/* search__footerinfo */
.search__footerinfo{ width: 1122px; margin: 0 auto; font-size: 1rem; color: #282828; line-height: 25px; }
.search__footerinfo__list01{ list-style: disc; margin-left: 25px;}
.search__footerinfo__list01 ul>li:before{ content: '- '; display: inline-block; margin-right: 5px;  }
.search__footerinfo__list02{ font-size: 0.875rem; margin-top: 35px; }
.search__footerinfo__list02>li{ list-style: decimal; margin-left: 25px;}





/* gototop */
.goto-box{ display: none;  position: fixed; right: 10px; bottom: 5%; }
.goto-box>li{ cursor: pointer; }
.goto-box>li.gotosearch{ display: none; width: 68px; height: 109px; background: url(../image/elite__gotosearch.png); background-position: 0 0;  }
.goto-box>li.gotosearch:hover{ background-position: -68px 0; }
.goto-box>li.gototop{ display: block; width: 68px; height: 69px; background: url(../image/elite__gototop.png); background-position: 0 0; }
.goto-box>li.gototop:hover{ background-position: -68px 0; }
.goto-box--mobile{ display: none; }


.rup{ top: -10px;}
.searchrup{ top: -2px; position: relative; font-size:75%; }



}





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




/* mainnav */
.header__top{ width: 100%; min-width: 1024px;  }
 /* header__submenu */
.header__submenu{ width: 100%; min-width: 1024px; display: flex; position: relative; background: none; margin: 10px auto 0 auto; }
.header__submenu .droparrow{ display: none; }
.header__submenu>li{ min-width: 25%; height: 50px; line-height: 50px; background: #e6e6e7; text-align: center; font-size: 1.125rem; position: relative; margin: 0 1px 0 0; transition: all 0.3s cubic-bezier(.25,.1,.25,1); }
.header__submenu>li:last-child{ min-width: calc(25% - 3px ); margin-right: 0; }
.header__submenu>li:hover,.header__submenu>li.hlight:hover,.header__submenu>li.active{ background: #3499c2; color: #fff; }
.header__submenu>li.hlight{ color: #0090ff; }
.header__submenu>li>a{ display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; }





/* header */
header{ width: 100%; min-width: 1280px; height: 710px; background: url(../image/knowledge__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 #e7f9ff; border-left: 2000px solid transparent;  }
.header-container{ max-width: 1280px; margin: 0 auto; position: relative;   }
/* header__series */
.header__series{ width: 260px; position: absolute; left: 95px; top: 213px; 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); } }





/* header__submenu */
.header__submenu{ display: none; }




}