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





/* $Mobile
--------------------------------------------------------------------------------------*/
/* @import url(//fonts.googleapis.com/earlyaccess/notosanstc.css); */




/* header */
header{ width: 100%; /* height: 95vh; */ height: 740px; background: url(../image/elite__header__bg.jpg) top right no-repeat; background-size: cover; position: relative; overflow: hidden;  }
/* .header__colorbg{  position: absolute; left: 0; bottom: 0; border-bottom: 180px solid #e7f9ff; border-left: 500px solid transparent; } */
.header-container{  }
/* header__series */
.header__series{ width: 50%; position: absolute; left: 50%; top: 40px; transform: translateX(-50%); }
.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: 95px; */ left: 50%; transform: translateX(-50%);  top: 95px; 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{ display: none; width: 35%; position: absolute; left: 50%; top: 210px; transform: translateX(-50%); }
.header__patent>img{ width: 100%; height: auto; }
.header__patent--mobile{ width: 70%; position: absolute; left: 50%; top: 360px; transform: translateX(-50%); }
.header__patent--mobile>img{ width: 100%; height: auto; }
/* header__engine */
.header__engine{ width: 70%; height: auto; position: absolute; left: 50%; top:235px; transform: translateX(-50%); /* animation: header__engine__animation 0.8s ease-out infinite alternate; */  }
.header__engine>img{ width: 100%; height: auto; }
.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); } }
/* video__icon-box */
.video__icon-box{ width: 120px; height: 120px; border-radius: 50%; background: rgba(255,255,255,0.3); position: absolute; left: 50%; top: 570px; transform: translateX(-50%);  overflow: hidden;	}
.video__icon{ position: absolute; width: 55px; height: auto; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.video__icon__bg{ width: 100px;	height: 100px; border-radius: 50%; background: rgba(255,255,255,0.11); position: absolute;	left: 50%; top: 50%; transform: translate(-50%,-50%); }
.video__icon__video{ /* display: none; */ width: 110px; height: 110px; border-radius: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); object-fit: cover; }
.video__icon__playicon{ /* display: none; */ }
.video__icon__playicon:after{ content: '\f04b'; font-size: 2rem; color: rgba(255,255,255,0.6);  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.video__icon-box a{ width: 100%; height: 100%; position: absolute; }
/* video */
.video{ width: 100%; height: 100%; background: rgba(0,0,0,0.95); position: fixed; left: 0; top: 0; z-index: 9999; display: none; }
.video__closebtn{ display:block; position: fixed; right: 15px; top: 15px; cursor: pointer; color: #fff; font-size: 2rem; }
.video__closebtn:after{ content: '\e870'; display: inline-block; }
.video-container{ width: 80%; height:0; /*padding-bottom:56.25%;*/  padding-bottom:45%; position:relative; top:50%; left: 50%; transform: translate(-50%,-50%); }
.video-container iframe{ width: 100%; height: 100%; position: absolute; left:0; top:0; }


/* overview */
.overview{ width: 100%; height: 220px; background: url(../image/elite__overview.jpg) top center; background-size: cover;  }
.overview.protectionbg{ background: url(../image/elite__overview__protectionbg.jpg) no-repeat; background-size: cover; background-position: top center; }
.overview-container{ height: 100%;  position: relative;  }
/* video__movie-box */
.video__movie-box{ width: 120px; height: 120px; border-radius: 50%; background: rgba(255,255,255,0.15); position: absolute; left: 50%; top: 45%; transform: translate(-50%,-50%);  overflow: hidden;	}
.video__movie-box p{ font-size: 0.875rem; line-height: 1.2em; color: #fff; width: 100%; text-align: center;	 position: absolute; left: 50%; top: 30%; transform: translate(-50%,-50%); }
.video__icon--mobile{ width: 40px; height: auto; position: absolute;	left: 50%; top: 50%; transform: translate(-50%,-20%); }
.video__movie__bg{ width: 100px; height: 100px; border-radius: 50%; background: rgba(0,0,0,0.8); position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.video__movie__video{ /* display: none;  width: 100%; height: 100%;*/ width: 110px; height: 110px; border-radius: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); object-fit: cover; }
.video__movie__playicon{ /* display: none;  */}
.video__movie__playicon:after{ content: '\f04b'; font-size: 2rem; color: rgba(255,255,255,0.6);  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.video__movie-box a{ width: 100%; height: 100%; position: absolute; }
.overview__txt-box{ display: flex; width: 100%; height: 100%; position: absolute; left: 0; top: 0; font-size: 0.75rem; line-height: 1.2rem; color: #fff; text-shadow: 3px 2px 3px rgba(0,0,0,0.5); text-align: center; box-sizing: border-box; padding: 0 0 30px 0; }
.overview__txt__L{ width: 50%; display: flex;  align-items: flex-end; flex-wrap: wrap; box-sizing: border-box; padding: 0 0 0 10px; }
.overview__txt__R{ width: 50%; display: flex; justify-content: center; align-items: flex-end; flex-wrap: wrap; }
.overview__txt-box .hlight{ color: #6ecff5;	 }





/* .description-box */    
.description-box{ font-size: 0.875rem; line-height: 20px; text-align: center;  }
.description-box>h4{ font-size: 1.625rem; line-height: 38px; color: #6ecff5; font-weight: normal; margin: 0 0 5px 0; text-align: center;   }


/* video-box */
.video-box{ margin: 10px 0 0 0;  }
.video-box>img{ width: 100%; height: auto; }


/* circle tit */
h2{ width: 187px; height: 187px; border-radius: 50%; background: #6ecff5; font-size: 3.4375rem; line-height: 66px; color: #fff; font-weight: normal; box-sizing: border-box; padding: 25px 38px; margin: 0 auto 10px auto; }

/* motion-box */
.motion-box{ display: none; }
.motion-box--mobile{}
.motion-box--mobile>img{ width: 100%; height: auto; margin: 10px 0 0 0; }
.icon__replay{ display: block; width: 41px; height: 53px; background: url(../image/elite__icon__replay.png); position: absolute; right: -60px; bottom: 40px; }


/* clear */
.clear{ width: 100%; 
background: linear-gradient(37deg, #004b68 0%, #00161f 100%); /* w3c */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00161f', endColorstr='#004b68',GradientType=0 ); /* ie6-9 */ }
.clear-container{ box-sizing: border-box; padding: 40px 3% 50px 3%; }
.clear-container .motion-box{ width: 100%; margin: 15px auto 0 auto; }
.clear .motion-box--mobile{ margin: 30px 0 0; }





/* cf01 */
.cf01{ width: 100%; background: #fff; box-sizing: border-box; padding: 20px 3% 0 3%; }
.cf-box{  }
.cf-box>img{ width: 100%; height: auto; }



/* carbg */
.carbg{ width: 100%; height: 51vw; background: url(../image/elite__carbg--mobile.jpg) top center no-repeat; background-size: cover; position: relative; overflow: hidden; }
.carbg__colorbg{ position: absolute; left: 0; bottom: 0; border-bottom: 60px solid #fff; border-right: 500px solid transparent; }





/* protection */
.protection{ width: 100%; background: linear-gradient(45deg, #000000 0%, #0f0f0f 38%, #333333 100%); /* w3c */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#000000',GradientType=1 ); /* ie6-9 */ }
.protection-container{ box-sizing: border-box; padding: 30px 3% 50px 3%; position: relative; }
.protection-container .motion-box{ width: 100%; margin: 15px auto 0 auto; }
.protection-container .circlenum-box>p{ width: 80%; margin: 0 auto; }
.protection__img__01{ margin: 20px 0 0 0; }
.protection__img__01>img{ display: block; width: 60%; height: auto; margin: 0 auto; }
.protection .icon__replay{ display: none; }
.protection__img__txt{ font-size: 0.875rem; color: #fff; text-align: center; margin-bottom: 80px; } 
/* 
.protection-container{ display: flex; align-items: flex-start; width: 1280px; margin: 0 auto; box-sizing: border-box; padding: 0 0 0 60px; }
.protection-container .motion-box__num{ display: inline-block; box-sizing: border-box; padding: 95px 0 0 0;	margin: 0 120px 0 0; }
.protection-container .circlenum-box{  margin: 0 auto; }
.protection-container .motion-box{ display: flex; ; width: 660px; margin: 80px 0 0 0; }
.protection-container .motion-box>img{ flex-grow: 0; flex-shrink: 0; flex-basis: auto; }
.protection .icon__replay{ display: block; width: 41px; height: 53px; background: url(../image/elite__icon__replay.png); position: static; margin: 316px 0 0 10px; }
.protection-container .circlenum-box>p{ width: 85%; margin: 0 auto;   }
.protection__img__01{ margin: 50px 0 0 0; }
.protection__img__01>img{ display: block; width: auto; margin: 0 auto; }
.protection__img__txt{ font-size: 0.875rem; color: #fff; text-align: center; } */





/* motion-box__num 共用 */
.motion-box__num{ margin-top: 0px; }
.circlenum-box{ width: 260px; height: 260px; border-radius: 50%; background: #173845; border: 2px solid #73d1f5; font-size: 1.25rem; line-height: 40px; color: #fff; box-sizing: border-box; padding: 15px 0 0 0;  text-align: center; position: relative; margin: 0 auto;  }
.circlenum-box:after{ display: block; content: ''; width: 40px; height: 35px; background: url(../image/elite__circlenum__percent.png); background-size: cover; position: absolute; right: 40px; bottom: 55px; }
.circlenum-box>p{ width: 50%; margin: 0 auto; }
.circlenum-box>p:first-child:after{ display: block; content: ''; border-bottom: 1px solid #6ecff5; }
.circlenum-box p.circlenum__num{ width: 55%; font-family: Arial Narrow,Arial,sans-serif; font-weight: 500; font-size: 8rem; line-height: 120px; letter-spacing: -3px; color: #6ecff5; text-align: right; margin-right: 88px; }
.circlenum__img{ display: none; }
.circlenum__img--mobile>img{ width: 100%; height: auto; margin: 40px 0 0 0; }





/* cf02 */
.cf02{ width: 100%; background: #fff; box-sizing: border-box; padding: 100px 3% 30px 3%;  }





/* gf5 */
.gf5{ width: 100%; background: #000 url(../image/elite__gf5__bg--mobile.jpg) top center no-repeat; background-size: contain; position: relative; overflow: hidden; }
.gf5__colorbg{ position: absolute; left: 0; top: 0; border-top: 60px solid #fff; border-right: 500px solid transparent; }
.gf5-container{ box-sizing: border-box; padding: 20px 3% 0 3%;  }
.gf5 .description-box{ width: 100%; font-size: 0.875rem; line-height: 20px; color: #fff; text-align: left;  margin: 50px 0 40px 0; }
.gf5__logo{ width: 168px; height: 102px; margin: 0 0 10px 0; }
.gf5__logo>img{ width: 100%; height: auto; }
.gf5 .description-box{ display: flex; flex-direction:column; align-items: center;}
.gf5 .description-box>h4{ display: inline-block; font-size: 1.625rem; line-height: 38px; color: #fff; font-weight: normal; margin: 0 0 5px 0; }
/* .gf5 .description-box>h4:after{ content: ''; display: block; border-bottom: 1px solid #fff; margin: 4px 0; } */
.gf5 .description-box>p>span{ font-size: 1.125rem; }
.gf5__product{ width: 50%; margin: 0 auto; }
.gf5__product>img{ width: 100%; height: auto; }
.gf5 .circlenum-box{ width: 90vw; height: 90vw; border-radius: 50%; border: none; background: rgba(46,71,134,0.9); font-size: 1.125rem; line-height: 40px; color: #fff; line-height: 30px; margin: 40px auto 0 auto;  box-sizing: border-box; padding: 40px 0 0 0;  }
.gf5 .circlenum-box>p{ width: 70%; }
.gf5 .circlenum-box>p:first-child:after{ display: none; }
.gf5 p.circlenum__note{ font-size: 0.75rem; line-height: 20px; color: #c3d5ff; width: 78%;}
.gf5 .circlenum-box:after{ display: none; }
.gf5 p.circlenum__hlight{ width: 82%; font-size: 1.25rem; color: #ffd02d; box-sizing: border-box; padding: 5px 0 0 0;}
.gf5 p.circlenum__num{ display: inline-block; width: auto; font-size: 6rem; color: #ffd02d; margin: 0; }
.gf5 .circlenum__dollor{ font-size: 1.5rem; color: #ffd02d; margin: 0 0 0 10px; }
.circlenum__num-box{ width: 80%; margin: -10px auto 0 auto; }
.circlenum__num-box:after{ display: block; content:''; border-bottom: 1px solid #fff; margin: -18px 0 10px 0; }





/* turbine */
.turbine{ width: 100%;  background:url(../image/elite__turbine__bg--mobile.jpg) top center repeat-x ; background-size:contain; box-sizing: border-box; padding: 0 0 100px 0; position: relative; overflow: hidden; }
.turbine__colorbg{ position: absolute; left: 0; bottom: 0;  border-bottom: 60px solid #1b1b1b; border-left: 500px solid transparent;  }
.turbine-container{ box-sizing: border-box; padding: 60px 3% 0 3%; position: relative; }
.turbine .description-box{ width: 100%; font-size: 0.875rem; line-height: 20px; color: #fff; text-align: center; position: relative; }
.turbine .description-box p{ text-align: left;  }
.turbine .description-box>h4{ display: inline-block; font-size: 1.625rem; line-height: 38px; color: #fff; font-weight: normal; margin: 0 0 25px 0;   }
/* .turbine .description-box>h4:after{ content: ''; display: block; border-bottom: 1px solid #fff; margin: 8px 0; } */
.turbine .motion-box--mobile{ margin: 30px 0 0 0;  }
.turbine .motion-box--mobile>img{ width: 100%; height: auto; }
.turbine .motion-box__num{ display: none; }
.turbine .motion-box__num--mobile>img{ width: 100%; height: auto; margin: 0 0 60px 0; }
.turbine  .video__icon-box{ position: static; left: 0px; top: 0px; transform: translateX(0); margin: 0px auto 20px; }






/* processor */
.processor{ width: 100%; background: #1b1b1b; }
.processor-container{ box-sizing: border-box; padding: 60px 3% 30px 3%; position: relative; }
.processor__img__01{ display: none; }
.processor .motion-box{ display: none; }
.processor .motion-box--mobile.box01{ margin: -150px 0 20px 0; }
.processor .motion-box--mobile.box02{ margin: 40px 0 0 0; }
.processor .description-box{ width: 100%; font-size: 0.875rem; line-height: 20px; color: #fff; text-align: center; }
.processor .description-box{ display: block;  }
.processor .description-box p{ text-align: left; }
.processor .description-box>h4{ display: inline-block; font-size: 1.625rem; line-height: 38px; color: #fff; font-weight: normal; margin: 0 0 25px 0; }
/* .processor .description-box>h4:after{ content: ''; display: block; border-bottom: 1px solid #fff; margin: 8px 0; } */
.processor .description-box.box02{ width: 100%;  line-height: 28px; }
.processor .description__list:before{ content: ''; display: inline-block; width: 22px; height: 18px; background: url(../image/elite__list__icon.png) no-repeat; margin-right: 10px;  }
.processor .description-box p{ text-align: justify; }
.processor .motion-box.box02{  }
.processor .video__icon-box{ position: static; left: 0px; top: 0px; transform: translateX(0); margin: 20px auto 0; }





/* cf-04 */
.cf04{ background: #1b1b1b; box-sizing: border-box; padding: 50px 3% 50px 3%;   }






/* product header */
.product__header{ width: 100%; height: 170px; background: url(../image/elite__product__header__bg.jpg) top center no-repeat; background-size: initial; box-sizing: border-box; padding: 10px 0 0 0; position: relative; overflow: hidden; }
.product__header-container{ width: 100%; height: 145px; line-height: 145px; text-align: center; font-size: 1.875rem; font-style: italic; letter-spacing: 5px; color: #fff; background: url(../image/product__header__tit__bg.png) center top no-repeat; margin: 0 auto;   }





/* 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: #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: #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: 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: #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__02 .product__item>img{ width: 280px;   }





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





/* product__02 */
.product__02{ width: 100%; background: #1b1b1b; position: relative; overflow: hidden; }
.product__02__colorbg{ width: 100%; height: 100%; background: #1f1f1f; position: absolute; left: -20%; 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); }







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





/* header */
header{ height: 920px; } 
.header__series{ width: 35%; }
/* button */
.header-container button{ top: 120px; }
/* header__engine */
.header__engine{ width: 90%; top: 310px; }
.header__engine>img{ width: 60%; height: auto;  }
/* header__patent */
.header__patent--mobile{ width: 50%; top: 480px; }
/* video__icon-box */
.header-container .video__icon-box{ top: 760px;	 }
/* motion-box */
.motion-box--mobile>img{ display: block; width: 80%; height: auto; margin: 10px auto 0 auto; }
/* clear */
.clear{ box-sizing: border-box; padding: 0 0 80px 0; }
/* motion-box__num 共用 */
.circlenum__img--mobile>img{ display: block; width: 80%; height: auto; margin: 40px auto 0 auto; }
/* carbg */
.carbg__colorbg{ border-right: 1024px solid transparent; }
/* gf5 */
.gf5__product>img{ display: block; width: 50%; height: auto; margin: 0 auto; }
.gf5__colorbg{ border-top: 90px solid #fff; border-right: 900px solid transparent; }
.gf5 .circlenum-box{ width: 50vw; height: 50vw; }
/* turbine */
.turbine .motion-box--mobile>img{ display: block; width: 80%; height: auto; margin: 0 auto;} 
.turbine .motion-box__num--mobile>img{ display: block; width: 80%; height: auto; margin: 0 auto 60px auto; }
.product__item>img{ display: block; width: 120px; height: auto; margin: 0 auto;  }


}



/* 橫的版型 */
@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; */ height: 1088px; background: url(../image/elite__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: 1.125rem; color: #fff; background: rgba(0,0,0,0.5); border: 1px solid #fff; position: absolute; left: 165px; 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{ display: block; width: 444px; position: absolute; left: 776px; top: 436px; transform: none; z-index: 999; /* background: url("../image/animationA/cleanguard.png") no-repeat center top; */ }
.header__patent>img{ width: 100%; height: auto; }
.header__patent--mobile{ display: none; }
/* header__engine */
.header__engine{ width: 696px; height: 418px; position: absolute; left: 0px; top: 550px; transform: translateX(0); /* 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); } }
/* video__icon */
.video__icon-box{ width: 220px; height: 220px; border-radius: 50%; background: rgba(255,255,255,0.1); position: absolute; left: 1010px; top: 780px;  overflow: hidden;	}
.video__icon{ position: absolute; width: 79px; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.video__icon__bg{ width: 190px;	height: 190px; border-radius: 50%; background: rgba(255,255,255,0.11); position: absolute;	left: 50%; top: 50%; transform: translate(-50%,-50%); }
.video__icon__video{ /* display: none; */ width: 190px; height: 190px; border-radius: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); object-fit: cover; }
.video__icon__playicon{ /* display: none; */ }
.video__icon__playicon:after{ content: '\f04b'; font-size: 4rem; color: rgba(255,255,255,0.6);  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.video__icon-box a{ width: 100%; height: 100%; position: absolute; }
/* video */
.video{ width: 100%; height: 100%; background: rgba(0,0,0,0.95); position: fixed; left: 0; top: 0; z-index: 9999; display: none; }
.video__closebtn{ display:block; position: fixed; right: 15px; top: 15px; cursor: pointer; color: #fff; font-size: 2rem; transition: all 0.2s ease-in-out; }
.video__closebtn:after{ content: '\e870'; display: inline-block; }
.video__closebtn:hover { transform: rotate(180deg); cursor: pointer; }
.video-container{ width: 80%; height:0; /*padding-bottom:56.25%;*/  padding-bottom:45%; position:relative; top:50%; left: 50%; transform: translate(-50%,-50%); }
.video-container iframe{ width: 100%; height: 100%; position: absolute; left:0; top:0; }




/* search-box */
.search-box{ margin: 1px auto 0 auto;  }





/* overview */
.overview{ width: 100%; min-width: 1280px; height: 500px; background: url(../image/elite__overview.jpg) no-repeat; background-size: cover; background-position: top center;  color: #000130; }
.overview.protectionbg{ background: url(../image/elite__overview__protectionbg.jpg) no-repeat; background-size: cover; background-position: top center; }
.overview-container{ width: 1280px; height: 100%; margin: 0 auto; position: relative;	 }
/* video__movie-box */
.video__movie-box{ width: 220px; height: 220px; border-radius: 50%; background: rgba(255,255,255,0.15); position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);  overflow: hidden;	}
.video__movie-box p{ font-size: 3.4375rem; line-height: 1.2em; color: #fff; width: 50%; position: absolute;	left: 50%; top: 50%; transform: translate(-50%,-50%); }
.video__movie__bg{ width: 190px; height: 190px; border-radius: 50%; background: #6ecff5; position: absolute;	left: 50%; top: 50%; transform: translate(-50%,-50%); }
.video__icon--mobile{ display: none; }
.video__movie__video{ display: none; width: 190px; height: 190px; border-radius: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); object-fit: cover; }
.video__movie__playicon{ display: none; }
.video__movie__playicon:after{ content: '\f04b'; font-size: 4rem; color: rgba(255,255,255,0.6);  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.video__movie-box a{ width: 100%; height: 100%; position: absolute; }
.overview__txt-box{ display: flex; width: 100%; min-width: 1280px; height: 500px; position: absolute; left: 0; top: 0; font-size: 1.625rem; line-height: 40px; color: #fff; text-shadow: 3px 2px 3px rgba(0,0,0,0.5); text-align: center; box-sizing: border-box; padding: 0 0 30px 0; }
.overview__txt__L{ width: 50%; display: flex;  align-items: flex-end; flex-wrap: wrap; box-sizing: border-box; padding: 0 0 0 15px; }
.overview__txt__R{ width: 50%; display: flex; justify-content: center; align-items: flex-end; flex-wrap: wrap; }
.overview__txt-box .hlight{ color: #6ecff5;	 }



/* .description-box */
.description-box{ font-size: 1.125rem; line-height: 25px; text-align: center; }
.description-box>h4{ font-size: 1.875rem; line-height: 38px; color: #6ecff5; font-weight: normal; margin: 0 0 10px 0; /* font-family: 'Noto Sans TC'; */ }

/* video-box */
.video-box{ width: 961px; margin: 15px auto 0 auto; }

/* circle tit */
h2{ width: 187px; height: 187px; border-radius: 50%; background: #6ecff5; font-size: 3.4375rem; line-height: 66px; color: #fff; font-weight: normal; box-sizing: border-box; padding: 25px 38px; margin: 0 auto 25px auto; }

/* motion-box */
.motion-box{ display: block; position: relative; }
.motion-box--mobile{ display: none;  }
.icon__replay{ display: block; width: 41px; height: 53px; background: url(../image/elite__icon__replay.png); position: absolute; right: -60px; bottom: 40px; }


/* clear */
/* .clear{ width: 100%; min-width: 1280px; height: 560px; 	
background: linear-gradient(37deg, #004b68 0%, #00161f 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00161f', endColorstr='#004b68',GradientType=0 ); } */
.clear{ width: 100%; min-width: 1280px; height: 560px; background: url(../image/elite__clear__bg.gif); }
.clear-container{ width: 1280px; margin: 0 auto; box-sizing: border-box; padding: 100px 0 0 0; }
.clear-container .motion-box{ width: 730px; margin: 0 auto 0 auto; /* background: url('../image/animationB/bg2.png')  no-repeat left top ; */}
.clear-container .motion-box .icon__replay{ position: absolute; right: 5px; bottom: 77px;  }
.clear-container .circlenum-box{ margin: 0 60px 0 60px; }
.clear-container .circlenum-box>p{ width: 55%; margin: 0 auto;   }





/* protection */
/* .protection{ width: 100%; min-width: 1280px; height: 710px; 
background: linear-gradient(45deg, #000000 0%, #0f0f0f 38%, #333333 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#000000',GradientType=1 );  } */
.protection{ width: 100%; min-width: 1280px; height: 710px; background: url(../image/elite__protection__bg.gif);   }
.protection-container{ display: flex; align-items: flex-start; width: 1280px; margin: 0 auto; box-sizing: border-box; padding: 0 0 0 60px; }
.protection-container .motion-box__num{ display: inline-block; box-sizing: border-box; padding: 95px 0 0 0;	margin: 0 120px 0 0; }
.protection-container .circlenum-box{  margin: 0 auto; }
.protection-container .motion-box{ display: flex; ; width: 660px; margin: 80px 0 0 0; position: relative; }
.protection-container .motion-box>img{ flex-grow: 0; flex-shrink: 0; flex-basis: auto; }
.protection .icon__replay{ display: block; width: 41px; height: 53px; background: url(../image/elite__icon__replay.png); position: absolute; right: 0px; top: 320px; /* position: static; margin: 316px 0 0 10px; */ }
.protection-container .circlenum-box>p{ width: 86%; margin: 0 auto;   }
.protection__img__01{ margin: 50px 0 0 0; }
.protection__img__01>img{ display: block; width: auto; margin: 0 auto; }
.protection__img__txt{ font-size: 0.875rem; color: #fff; text-align: center; margin-bottom: 0; }



/* motion-box__num 共用 */
.motion-box__num{ display: flex; justify-content: center; align-items: center; margin-top: 0px; }
.circlenum-box{ width: 352px; height: 352px; border-radius: 50%; border: 2px solid #73d1f5; background: #173946; font-size: 1.875rem; line-height: 45px; color: #fff; box-sizing: border-box; padding: 45px 0 0 0; margin:0 60px 0 0;  text-align: center; position: relative; }
.circlenum-box:after{ display: block; content: ''; width: 62px; height: 54px; background: url(../image/elite__circlenum__percent.png); position: absolute; right: 50px; bottom: 55px; }
.circlenum-box>p:first-child:after{ display: block; content: ''; border-bottom: 1px solid #6ecff5; }
.circlenum-box p.circlenum__num{ width: 65%;  font-family: Arial Narrow,Arial,sans-serif; font-weight: 500; font-size: 12.5rem; line-height: 175px; letter-spacing: -6px; color: #6ecff5; text-align: right;  margin: 0; }
.circlenum__img{ display: block; }
.circlenum__img--mobile{ display: none; }



/* cf02 */
.cf02{ width: 100%; min-width: 1280px; min-height: 345px; background: #fff; margin: 60px 0 0 0; box-sizing: border-box; padding: 0;   }





/* gf5 */
.gf5{ width: 100%; min-width: 1280px; height: 900px; background: url(../image/elite__gf5__bg.jpg) top center no-repeat; background-size: cover; position: relative; overflow: hidden; }
.gf5__colorbg{ position: absolute; left: 0; top: 0; border-top: 250px solid #fff; border-right: 1900px solid transparent; }
.gf5-container{ width: 1280px; margin: 0 auto; box-sizing: border-box; padding: 0 0 0 0; position: relative; }
.gf5 .description-box{ width: 620px; font-size: 1.625rem; line-height: 35px; color: #fff; text-align: left; position: absolute; left: 630px; top: 45px; }
.gf5__logo{ width: 168px; height: 102px; margin: 0 0 45px 0; }
.gf5__logo>img{ width: 100%; height: auto; }
.gf5 .description-box{ display: block; }
.gf5 .description-box>h4{ display: inline-block; font-size: 3.4375rem; line-height: 38px; color: #fff; font-weight: normal; margin: 0 0 25px 0; }
/* .gf5 .description-box>h4:after{ content: ''; display: block; border-bottom: 1px solid #fff; margin: 15px 0; } */
.gf5 .description-box>p>span{ font-size: 2.5rem; }
.gf5__product{ position: absolute; left: 208px; top: 180px; }
.gf5__product{ width: 311px;  }
.gf5__product>img{ width: 100%; height: auto; }
.gf5 .circlenum-box{ width: 446px; height: 446px; border-radius: 50%; border: none; background: rgba(46,71,134,0.9); font-size: 1.625rem; color: #fff; line-height: 30px; position: absolute; left: 584px; top: 400px; margin: 0;   }
.gf5 .circlenum-box>p{ width: 70%; }
.gf5 .circlenum-box>p:first-child:after{ display: none; }
.gf5 p.circlenum__note{ font-size: 0.875rem; line-height: 20px; color: #c3d5ff; width: 78%;}
.gf5 .circlenum-box:after{ display: none; }
.gf5 p.circlenum__hlight{ width: 82%; font-size: 1.625rem; color: #ffd02d; box-sizing: border-box; padding: 25px 0 0 0;}
.gf5 p.circlenum__num{ display: inline-block; width: auto; font-size: 8.75rem; color: #ffd02d; }
.gf5 .circlenum__dollor{ font-size: 1.5rem; color: #ffd02d; margin: 0 0 0 10px; }
.circlenum__num-box{ width: 67%; margin: 0 auto; }
.circlenum__num-box:after{ display: block; content:''; border-bottom: 1px solid #fff; margin: -18px 0 25px 0; }



/* turbine */
.turbine{ width: 100%;  min-width: 1280px;  height: 1750px; background: url(../image/elite__turbine__bg.jpg) top center repeat-x; position: relative; overflow: hidden; }
.turbine__colorbg{ position: absolute; left: 0; bottom: 0;  border-bottom: 180px solid #1b1b1b; border-left: 1900px solid transparent;  }
.turbine-container{ width: 1280px; margin: 0 auto; box-sizing: border-box; padding: 115px 0 0 25px; position: relative; }
.turbine .description-box{ width: 330px; min-height: 590px; font-size: 1.125rem; line-height: 25px; color: #fff; text-align: left; position: relative;  /* position: absolute; left: 620px; top: 250px; */ }
/* .turbine .description-box{ display: block; position: relative; } */
.turbine .description-box>h4{ display: inline-block; font-size: 3.4375rem; line-height: 38px; color: #fff; font-weight: normal; margin: 0 0 35px 0; }
/* .turbine .description-box>h4:after{ content: ''; display: block; border-bottom: 1px solid #fff; margin: 15px 0; } */
.turbine .motion-box{  width: 918px; position: absolute; left: 280px; top: -40px; }
.turbine .motion-box__num{ display: block; width: 807px; margin: 0 auto 130px auto; }
.turbine .motion-box__num--mobile{ display: none; }
.turbine .video__icon-box { position: absolute;	left: 10px;	top: 310px; transform: translateX(0); }





/* processor */
.processor{ width: 100%; min-width: 1280px; min-height: 750px; background: #1b1b1b; }
.processor-container{ width: 1280px;  margin: 0 auto; box-sizing: border-box; padding: 80px 0 0 0; position: relative; }
.processor__img__01{ display: block; position: absolute; left: 690px; top: -211px; /* transition: all 0.4s ease-in-out; */ height: 580px; }
.processor__img__01>img{ position: absolute; top: 0%;  }
.processor .motion-box{ display: flex; position: absolute; left: 70px; top: -280px; }
.processor .icon__replay{ left: 20px; top: 460px; }
.processor .description-box{ width: 500px;  font-size: 1.125rem; line-height: 25px; color: #fff; text-align: left; position: absolute; left: 760px; top: 56px; }
.processor .description-box{ display: block; }
.processor .description-box>h4{ display: inline-block; font-size: 3.4375rem; line-height: 38px; color: #fff; font-weight: normal; margin: 0 0 35px 0; }
/* .processor .description-box>h4:after{ content: ''; display: block; border-bottom: 1px solid #fff; margin: 15px 0; } */
.processor .description-box.box02{ width: 365px; left: 240px; top: 310px; line-height: 30px; }
.processor .description__list:before{ content: ''; display: inline-block; width: 22px; height: 18px; background: url(../image/elite__list__icon.png) no-repeat; margin-right: 10px;  }
.processor .motion-box.box02{ left: 460px; top: 310px; }
.processor .video__icon-box{ position: absolute; left: 45px; top: 140px; transform: translateX(0); }
.processor #canvas6{ display: none; }





/* cf-04 */
.cf04{ background: #1b1b1b; box-sizing: border-box; padding: 90px 0 120px 0;  }





/* product header */
.product__header{ width: 100%; min-width: 1280px; height: 240px; background: url(../image/elite__product__header__bg.jpg) top center no-repeat; background-size: cover; box-sizing: border-box; padding: 60px 0 0 0; position: relative; overflow: hidden; }
.product__header-container{ width: 1280px; height: 145px; line-height: 145px; text-align: center; font-size: 1.875rem; font-style: italic; letter-spacing: 5px; color: #fff; background: url(../image/product__header__tit__bg.png) center top no-repeat; margin: 0 auto; box-sizing: border-box; position: relative;  }





/* product */
.product-container{ display: flex; align-items: center; width: 1280px;  margin: 0 auto; box-sizing: border-box; /* padding: 70px 0;  */position: relative;  }
.product-L,.product-R{ width: 50%; }
.product__item>img{ display: block; margin: 0 auto;  }
.product__info{ width: 575px; font-size: 1.125rem; line-height: 25px; color: #fff; }
.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; }
.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.625rem; 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__02 .product-L{ order: 1; }
.product__02 .product-R{ order: 2; }
.product__02 .product__item>img{ width: 400px;   }





/* product__01 */
.product__01{ display: flex; align-items: center; width: 100%; min-width: 1280px; height: 640px; background: #252525; position: relative; overflow: hidden; }
.product__01__colorbg{ width: 660px; height: 100%; background: #2c2c2c; position: absolute; left: 30%; transform: skewX(-50deg); }





/* product__02 */
.product__02{ display: flex; align-items: center; width: 100%; min-width: 1280px; height: 640px; background: #1b1b1b; position: relative; overflow: hidden; }
.product__02__colorbg{ width: 660px; height: 100%; background: #1f1f1f; position: absolute; left: 30%; transform: skewX(50deg); }





/* product__03 */
.product__03{ display: flex; align-items: center; width: 100%; min-width: 1280px; height: 640px; background: #252525; position: relative; overflow: hidden; }
.product__03__colorbg{ width: 660px; height: 100%; background: #2c2c2c; position: absolute; left: 30%; transform: skewX(-50deg); }





/* 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; */ height: 760px; background: url(../image/elite__header__bg.jpg) top center no-repeat; background-size: cover; position: relative; overflow: hidden; /* max-width: 1600px; margin: 0 auto; */ }
.header-container{ max-width: 1280px; margin: 0 auto; position: relative;   }
/* header__patent */
.header__patent{ display: block; width: 380px; position: absolute; left: 776px; top: 180px; transform: none; z-index: 999;  }
/* header__series */
.header__series{ width: 260px; position: absolute; left: 95px; top: 200px; 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: 274px; padding: 0 10px; transition: all 0.4s  cubic-bezier(.25,.1,.25,1); }
/* header__engine */
.header__engine{ width: 800px;  position: absolute; left: 0px; top: 145px; transform: translateX(0); /* animation: header__engine__animation 0.8s ease-out infinite alternate; */  }
/* video__icon */
.header-container .video__icon-box{  left: 1040px; top: 500px; 	}



}