@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: 600px; background: url(../image/euro__header__bg--mobile.jpg) top left no-repeat; background-size: cover; position: relative; overflow: hidden;  }
.header__colorbg-box{ position: absolute; left: 0; top: 0px; width: 100%; }
.header__colorbg{  /* position: absolute; left: 0; bottom: 250px; */ border-bottom: 280px solid #121212; border-left: 1000px solid transparent;  }
/* .header__colorbg{  position: absolute; left: 0; bottom: 250px; border-bottom: 360px solid #121212; border-left: 2000px solid transparent;  } */
.header__colorbg__txt{ width: 100%; /* position: absolute; left: 0; bottom: 0; */ background: #121212; font-size: 0.875rem; line-height: 1.5em; color: #fff; box-sizing: border-box; padding: 60px 5%; text-align: left; }
.header__colorbg__txt h4{ font-family:'Noto Sans TC'; font-size: 1.625rem; line-height: 1.5em; font-weight: 300; margin-bottom: 20px; text-align: center; }
.header-container{ max-width: 1280px; margin: 0 auto; position: relative; }
.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: 50%; transform: translateX(-50%);  top: 105px; 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__oem */
.header__oem{ display: block; width: 150px; position: absolute; left: 50%; transform: translateX(-50%); top: 150px;	}
.header__oem>img{ width: 100%; height: auto; }
/* 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: 120%; height: 50vw; position: absolute; left: 55%; top:160px; 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: 100%; height: 100%; position: absolute; left: 0; top: 0; object-fit: cover; }
.video__icon__playicon{ display: none; }
.video__icon__playicon:after{ content: '\f16a'; font-size: 5rem; 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: auto; background: url(../image/euro__overview__bg.png) top left no-repeat #000; /* background-size: cover; */ position: relative; overflow: hidden; }
.overview-container{ width: 100%; margin: 0 auto; box-sizing: border-box; padding: 30px 5% 30px 5%; position: relative; }
.overview-container .specification-box{ height: auto; font-size: 1.625rem; color: #fff; position: relative; }
.overview-container .specification-box>p{ text-align: left;  }
.overview-container .specification-box .motion-box--mobile>img{ width: 100%; }
.overview-container .oem-box{ /* height: 630px; */ display: flex; align-items: center; flex-direction: column; margin: 50px 0 0 0; }
.overview-container .oem__list{ width: 100%;  color: #fff;  }
.overview-container .oem__list>li:first-child{ font-size: 1.625rem; line-height: 1.5em; text-align: left; margin-bottom: 10px; }
.overview-container .oem__list>li:nth-child(n+2){ font-size: 1rem; height: 35px; line-height: 35px; box-sizing: border-box; padding: 0 0 0 6px; margin-bottom: 20px; }
.overview-container .oem__list>li:nth-child(2){ background: #232323; }
.overview-container .oem__list>li:nth-child(3){ background: #505050; }
.overview-container .oem__list>li:nth-child(4){ background: #ed7d31; }
.overview-container .oem__list>li:nth-child(5){ background: #5b9bd5; }
.overview-container .oem__list>li:nth-child(6){ background: #ffb100; }
.overview-container .oem__list>li:nth-child(7){ background: #1c6335; }
.overview-container .oem__list>li:nth-child(n+4){  position: relative; cursor: pointer; transition: all 0.4s ease-out; }
.overview-container .oem__list>li:nth-child(n+4)>img{ display: none; }
.overview-container .oem__list>li:nth-child(n+4):hover{ opacity: 0.4; }
.overview-container .oem__img{ display: none; }
.overview-container .oem__img--mobile{ display:block; }
.overview-container .oem__img--mobile>img{ width: 100%;	 }





/* .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 
p{ width: :	; 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%;  }





/* guard */
.guard{ width: 100%; background: url(../image/euro__guard__bg.jpg) top center no-repeat; background-size: cover; position: relative; overflow: hidden; }
.guard-container{ box-sizing: border-box; padding: 30px 5% 30px 5%; position: relative;  }
.guard__product{ width: 50%; margin: 0 auto 30px auto; }
.guard__product>img{ width: 100%; }
.guard-container .description-box{ font-size: 0.875rem; line-height: 1.5em; color: #fff; text-align: center; margin-top: 0;	 }
.guard-container .tit{ font-size: 1.625rem; margin-bottom: 30px; }
.guard-container .hlight{ font-size: 2rem; color: #00aebc; font-family: Arial; }
.guard-container .color--gold{ color: #c49d55; margin-bottom: 20px;	display: inline-block; }
.guard-container .color--gold:before{ content: ''; display: block; border-top: 1px solid #3f3f3f; margin-top: 20px; }
.guard-container .description-box>img{ width: 100%;	height: auto; }
.notetxt{ font-size: 0.75rem; color: #979797; }





/* data */
.data{ width: 100%;  height: 230px; background: url(../image/euro__data__bg.jpg) top center no-repeat; background-size: cover; position: relative; overflow: hidden; }
.data-container{ box-sizing: border-box; padding: 10px 5% 0 5%; position: relative; }
.data .description-box{ width: 100%; font-size: 0.875rem; line-height: 1.5em; color: #fff; text-align: left;  margin: 10px 0 40px 0; }
.data .description-box h4{ font-family:'Noto Sans TC'; font-size: 1.625rem; line-height: 1.5em; font-weight: 300; color: #fff; margin-bottom: 10px; text-align: center; }
.data .description-box button{ display: block; width: 220px; height: 50px; line-height: 50px; text-align: center; color: #fff; font-size: 1.125rem; background: #3499c2; background: rgba(52, 153, 194, 1.0);  margin: 30px auto 0 auto; transition: all 0.3s ease-out;}
.data .description-box button>a{ display: block; width: 100%; height: 100%;	text-decoration: none;	color: #fff; }





/* recommand */
.recommend{ width: 100%; height: auto; background: #000; position: relative;  /* overflow: hidden; */ z-index: 999; }
.recommend-container{ width: 100%; margin: 0 auto; box-sizing: border-box; padding: 30px 5% 30px 5%; position: relative; }
.recommend .description-box{ width: 100%; font-size: 0.875rem; line-height: 1.5em; color: #fff; text-align: center; margin: 0 auto 25px auto;   }
.recommend .description-box h4{ font-family:'Noto Sans TC'; font-size: 1.625rem; line-height: 1.5em; font-weight: 300; color: #fff; margin-bottom: 20px; text-align: center; }
.recommend .stat-box{ display: flex; justify-content: center; align-items: center; flex-direction: column; margin-bottom: 50px; }
.recommend .stat-box>li{ width: 188px; height: 188px; position: relative; margin: 0 0 20px 0; }
.recommend .stat-box>li:last-child{ margin: 0 0 0 0; }
.recommend .stat-box>li>img{ display: block; width: 100%; height: auto; }
.recommend .stat-box>li>p{ position: absolute; left: 50%; transform: translateX(-50%); top: 133px; text-align: center; font-size: 1.25rem; color: #fff; white-space:nowrap; }
.recommand__table{  }
.recommand__table>img{ display: block; width: 100%; height: auto;	 }
.recommand__table>img:first-child{  }
.recommand__table>img:last-child{ margin: 20px 0 0 0; }





/* lowsaps */
.lowsaps{ width: 100%; height: auto; background: url(../image/euro__lowsaps__bg.jpg) top center repeat-x;  position: relative; overflow: hidden; }
.lowsaps-container{ width: 100%; margin: 0 auto; box-sizing: border-box; padding: 30px 5% 30px 5%; position: relative; }
.lowsaps .description-box{ width: auto; font-size: 0.875rem; line-height: 1.5em; color: #fff; text-align: left; margin: 0px auto 20px auto;   }
.lowsaps .description-box h4{ font-family:'Noto Sans TC'; font-size: 1.625rem; line-height: 1.5em; font-weight: 300; color: #fff; margin-bottom: 20px; text-align: left; }
.lowsaps .description-box .notetxt{ font-size: 0.75rem; color: #6ecff5; }
/* .lowsaps .motion-box{ display: flex; justify-content: center; } */
.lowsaps .motion__txt{ font-size: 0.75rem;	 color: #fff; text-align: center; margin-top: 10px; }





/* pao */
.pao{ width: 100%;  height: 230px; background: url(../image/euro__pao__bg.jpg) top center no-repeat; background-size: cover; position: relative; overflow: hidden; }
.pao-container{ box-sizing: border-box; padding: 10px 16% 0 16%; position: relative; }
.pao .description-box{ width: 100%; font-size: 0.875rem; line-height: 1.5em; color: #fff; text-align: left;  margin: 10px 0 40px 0; }
.pao .description-box h4{ font-family:'Noto Sans TC'; font-size: 1.625rem; line-height: 1.5em; font-weight: 300; color: #fff; margin-bottom: 20px; text-align: center; }





/* effective */
.effective{ width: 100%; height: auto; background: url(../image/euro__effective__bg.jpg) top center no-repeat; background-size: cover; position: relative; overflow: hidden; }
.effective-container{ padding: 0px 5% 30px 5%; position: relative; }
.effective .description-box{ width: auto; font-size: 0.875rem; line-height: 1.5em; color: #fff; text-align: left; margin: 0px auto 20px auto; }
.effective .description-box h4{ font-family:'Noto Sans TC'; font-size: 1.625rem; line-height: 1.5em; font-weight: 300; color: #fff; margin-bottom: 10px; text-align: center; }
.effective .stat-box{ display: flex; justify-content: center; align-items: center; flex-direction: column; flex-wrap: wrap; }
/* .effective .stat-box>li{ width: 80%; margin: 0 0 20px 0; } */
.effective .stat-box>li{ width: 65%; margin: 0 0 20px 0; }
.effective .stat-box>li>img{ width: 100%; }
.effective .stat-box>li .stat--on{ opacity: 1; }
.effective .stat-box>li .stat--off{ display: none; }





/* 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-R{ margin: 10px 0 0 0; }
.product__item{ margin: 0 0 20px 0; }
.product__item>img{ display: block; width: 160px; 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: #0c838d; 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: 10px; }
.product__info__logo-box>li>img{ width: 100%; height: auto; }
.product__info__logo__01{ width: 62px; }
.product__info__logo__02{ width: 68px; }
.product__info__logo__03{ width: 103px; }
.product__info__logo__04{ width: 120px; }
.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-box{ margin: 40px 0 0 0; }
.product__info__notelist{ width: 70%; margin: 0 0 20px 0; border: 1px solid #5d5d5d; font-size: 0.875rem; color: #fff; font-family: Arial,"微軟正黑體","新細明體","蘋果儷黑體", sans-serif; position: relative;	 }
.product__info__notelist>li{ box-sizing: border-box; padding: 0 13px; height: 40px; line-height: 40px; display: flex; justify-content: space-between; align-items: center; }
.product__info__notelist>li img{ display: block; }
.product__info__notelist>li>span:first-child:before{ content: '‧'; margin: 0 7px 0 0; }
.product__info__notelist>li.tit>span:first-child:before{ content: ''; /* margin: 0 7px 0 0; */ display: none;	 }
.product__info__notelist>li.tit>span:first-child{ margin-right: 50px; }
.product__info__notelist>li.tit{ background: #5d5d5d; }


.product__info__link-box{ display: flex; flex-wrap: wrap;  }
.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__info__icon-box{ display: flex; align-items: flex-end; justify-content: center; margin: 10px auto 20px auto;   }
.product__info__icon-box>li{ margin-right: 15px; }
.product__info__icon-box>li:last-child{ margin-right: 0; }
.product__info__icon-box>li>img{ width: 100%; height: auto; }
/* .product__info__icon__01{ min-width: 67px; }
.product__info__icon__02{ min-width: 57px; }
.product__info__icon__03{ min-width: 54px; }
.product__info__icon__04{ min-width: 77px; }
.product__info__icon__06{ min-width: 54px; }
.product__info__icon__07{ min-width: 65px; } */
.product__info__icon__01{ min-width: 40.2px; width: 40.2px; }
.product__info__icon__02{ min-width: 34.2px; width: 34.2px; }
.product__info__icon__03{ min-width: 32.4px; width: 32.4px; }
.product__info__icon__04{ min-width: 46.2px; width: 46.2px; }
.product__info__icon__05{ min-width: 32.4px; width: 32.4px; }
.product__info__icon__06{ min-width: 32.4px; width: 32.4px; }
.product__info__icon__07{ min-width: 39px; width: 39px; }






/* 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); }





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







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





/* header */
header{ height: 550px; background: url(../image/euro__header__bg--mobile.jpg) center center no-repeat; background-size: cover; } 
.header__series{ width: 36%; }
.header__colorbg-box{ width: 100%;  position: absolute; left: 0; bottom: 0px; top: auto; }
.header__colorbg{  /* position: absolute; left: 0; bottom: 250px; */ border-bottom: 338px solid #121212; border-left: 1400px solid transparent;  }
.header__colorbg__txt{ width: 100%; height: 200px; /*   position: absolute; left: 0; bottom: 0;  */background: #121212; font-size: 0.875rem; line-height: 1.5em; color: #fff; text-align: left; box-sizing: border-box; padding: 0px 5% 0 5%; }
.header__colorbg__txt h4{ font-family:'Noto Sans TC'; font-size: 1.625rem; line-height: 1.5em; font-weight: 300; margin-bottom: 20px; text-align: center; }
/* header__oem */
.header__oem{ display: block; width: 150px; position: absolute; left: 50%; transform: translateX(-50%); top: 180px;	}
/* button */
.header-container button{ top: 120px; }
/* header__engine */
.header__engine{ width: 90%; }
/* 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; }
.lowsaps .description-box h4{text-align: center;}
.data .description-box{ text-align: center; }




/* overview */
.overview-container .specification-box .motion-box--mobile>img{ width: 80%; }
.overview-container .oem__list{ width: 60%;  color: #fff;  }





/* guard */
.guard-container .description-box>img{ width: 80%;	height: auto; }





/* recommend */
.recommend .stat-box{ display: flex; justify-content: center; flex-direction: row; margin-bottom: 75px; }
.recommend .stat-box>li{ width: 188px; height: 188px; margin: 0 50px 0 0; position: relative;  }
.recommend .stat-box>li:last-child{ margin-right: 0;  }
.recommend .stat-box>li>img{ display: block; width: 100%; height: auto; }
.recommend .stat-box>li>p{ position: absolute; left: 50%; transform: translateX(-50%); top: 133px; text-align: center; font-size: 1.25rem; color: #fff; white-space:nowrap; }
.recommand__table>img{ display: block; width: 80%; margin: 0 auto;	 }
.recommand__table>img:last-child{ margin: 30px auto 0 auto; }




/* effective */
.effective{ min-height: 430px;	 }
.effective .stat-box{ display: flex; justify-content: center; flex-direction: row; } 
/* .effective .stat-box>li{ width: 30%; margin-right: 3%; position: relative; cursor: pointer;	} */
.effective .stat-box>li{ width: 16%; margin-right: 3%; position: relative; cursor: pointer; }
.effective .stat-box>li:last-child{ margin-right: 0; }
.effective .stat-box>li>img{ display: block; position: absolute; left: 0; top: 0; }







}



/* 橫的版型 */
@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: 990px; background: url(../image/euro__header__bg.jpg) top center no-repeat; background-size: cover; position: relative; overflow: hidden; }
.header__colorbg-box{ width: 100%;  position: absolute; left: 0; bottom: 0; top: auto; }
.header__colorbg{  /* position: absolute; left: 0; bottom: 250px; */ border-bottom: 360px solid #121212; border-left: 2000px solid transparent;  }
.header__colorbg__txt{ width: 100%; height: 250px;/*  position: absolute; left: 0; bottom: 0;  */background: #121212; font-size: 1.125rem; line-height: 25px; color: #fff; text-align: center; box-sizing: border-box; padding: 0 0 0 0; }
.header__colorbg__txt h4{ font-family:'Noto Sans TC'; font-size: 3.125rem; line-height: 1.5em; font-weight: 300; margin-bottom: 20px; text-align: center; }
.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: 300px; 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__oem */
.header__oem{ display: block; width: 223px; position: absolute; left: 50%; transform: translateX(-50%); top: 506px;	}
.header__oem>img{ width: 100%; height: auto; }
/* header__engine */
.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: 1101px; 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: 100%; height: 100%; position: absolute; left: 0; top: 0; object-fit: cover; }
.video__icon__playicon{ display: none; }
.video__icon__playicon:after{ content: '\f16a'; font-size: 5rem; 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: 1275px; background: url(../image/euro__overview__bg.png) top left no-repeat #000; /* background-size: cover; */ position: relative; overflow: hidden; }
.overview-container{ width: 1280px; margin: 0 auto; box-sizing: border-box; padding: 0 0 0 0; position: relative; }
.overview-container .specification-box{ height: 530px; font-size: 2.25rem; color: #fff; position: relative; }
.overview-container .specification-box>p{ position: absolute; left: 46px; top: 185px; }
.overview-container .specification-box .motion-box{ position: absolute; left: 504px; top: 22px; }
.overview-container .oem-box{ /* height: 630px; */ display: flex; align-items: center; flex-direction: row; margin: 50px 0 0 0; }
.overview-container .oem__list{ width: 320px; margin-right: 100px;  color: #fff; box-sizing: border-box; }
.overview-container .oem__list>li:first-child{ font-size: 2.25rem; line-height: 45px; margin-bottom: 45px; }
.overview-container .oem__list>li:nth-child(n+2){ font-size: 1rem; height: 35px; line-height: 35px; box-sizing: border-box; padding: 0 0 0 6px; margin-bottom: 20px; }
.overview-container .oem__list>li:nth-child(2){ background: #232323; }
.overview-container .oem__list>li:nth-child(3){ background: #505050; }
.overview-container .oem__list>li:nth-child(4){ background: #ed7d31; }
.overview-container .oem__list>li:nth-child(5){ background: #5b9bd5; }
.overview-container .oem__list>li:nth-child(6){ background: #ffb100; }
.overview-container .oem__list>li:nth-child(7){ background: #1c6335; }
.overview-container .oem__list>li:nth-child(n+4){  position: relative; cursor: pointer; transition: all 0.4s ease-out; opacity: 0;	 }
.overview-container .oem__list>li:nth-child(n+4)>img{ display: block; position: absolute; right: 3px; top: 8px; }
.overview-container .oem__list>li:nth-child(n+4).animation:hover{ opacity: 0.4;	 }
.overview-container .oem__img{ width: 839px; height: 630px;	 display: block; position: relative; }
.overview-container .oem__img>img{ position: absolute; display: block; }
.overview-container .oem__img>img:nth-child(2){ left: 293px; top: 75px; opacity: 0;	 }
.overview-container .oem__img>img:nth-child(3){ left: 225px; top: 103px; opacity: 0 ;}
.overview-container .oem__img>img:nth-child(4){ left: 293px; top: 103px; opacity: 0; }
.overview-container .oem__img>img:nth-child(5){ left: 225px; top: 49px; opacity: 0; }
.overview-container .oem__img--mobile{ display: none; }
/* oem__list animation  */
/* .overview-container .oem__list>li:nth-child(4).animation{  animation: oem__list__4 1s 0.5s forwards  linear; }
.overview-container .oem__list>li:nth-child(5).animation{  animation: oem__list__5 1s 1.5s forwards  linear; }
.overview-container .oem__list>li:nth-child(6).animation{  animation: oem__list__6 1s 2.5s forwards  linear; }
@keyframes oem__list__4{ from{ opacity: 0; transform: } to {opacity: 1; } }
@keyframes oem__list__5{ from{ opacity: 0; transform: } to {opacity: 1; } }
@keyframes oem__list__6{ from{ opacity: 0; transform: } to {opacity: 1; } } */
/* oem__img animation */
/* .overview-container .oem__img>img:nth-child(2).animation{  animation: oem__img__2 1s 0.5s forwards  linear; }
.overview-container .oem__img>img:nth-child(3).animation{  animation: oem__img__3 1s 1.5s forwards  linear; }
.overview-container .oem__img>img:nth-child(4).animation{  animation: oem__img__4 1s 2.5s forwards  linear; }
@keyframes oem__img__2{ from{ opacity: 0; transform: } to {opacity: 1; } }
@keyframes oem__img__3{ from{ opacity: 0; transform: } to {opacity: 1; } }
@keyframes oem__img__4{ from{ opacity: 0; transform: } to {opacity: 1; } } */







/* .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: 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; 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;   }





/* guard */
.guard{ display: flex; align-items: center; width: 100%; min-width: 1280px; height: 660px; background: url(../image/euro__guard__bg.jpg) top center no-repeat; background-size: cover; position: relative; overflow: hidden; }
.guard-container{ display: flex; justify-content: center; flex: 0; width: 1280px; margin: 0 auto; box-sizing: border-box; padding: 0 0 0 0; position: relative; }
.guard__product{ display: block; margin: 0 100px 0 0; width: auto; }
.guard__product>img{ width: auto; }
.guard-container .description-box{ font-size: 1.625rem; line-height: 1.5em; color: #fff; text-align: center; margin-top: 60px;	 }
.guard-container .tit{ font-size: 2.25rem; margin-bottom: 60px; }
.guard-container .hlight{ font-size: 6.25rem; color: #00aebc; font-family: Arial; }
.guard-container .color--gold{ color: #c49d55; margin-bottom: 35px; white-space:nowrap; }
.guard-container .color--gold:before{ content: ''; display: block; border-top: 1px solid #3f3f3f; margin-top: 20px; }
.guard-container .description-box>img{ width: auto; }
.guard-container .description-box .notetxt{ font-size: 0.875rem; color: #979797; }
		




/* data */
.data{ width: 100%; min-width: 1280px; height: 500px; background: url(../image/euro__data__bg.jpg) top center no-repeat; background-size: cover; position: relative; overflow: hidden; }
.data-container{ width: 1280px; margin: 0 auto; box-sizing: border-box; padding: 0 0 0 0; position: relative; }
.data .description-box{ font-size: 1.125rem; line-height: 25px; color: #fff; text-align: center; position: absolute; top: 130px; margin: 0; }
.data .description-box h4{ font-family:'Noto Sans TC'; font-size: 3.125rem; line-height: 1.5em; font-weight: 300; color: #fff; margin-bottom: 20px; text-align: center; }
.data .description-box button{ width: 220px; height: 50px; line-height: 50px; text-align: center; color: #fff; font-size: 1.25rem; background: #3499c2; background: rgba(52, 153, 194, 1.0);  margin-top: 100px; transition: all 0.3s ease-out;}
.data .description-box button:hover{ background: rgba(196, 157, 85, 0.8) }
.data .description-box button>a{ display: block; width: 100%; height: 100%;	text-decoration: none;	color: #fff; }





/* recommand */
.recommend{ width: 100%; min-width: 1280px; height: 890px; background: #000; position: relative;  /* overflow: hidden; */ z-index: 999; }
.recommend-container{ width: 1280px; margin: 0 auto; box-sizing: border-box; padding: 80px 0 0 0; position: relative; }
.recommend .description-box{ width: 782px; font-size: 1.625rem; line-height: 25px; color: #fff; text-align: center; margin: 0 auto 25px auto;   }
.recommend .description-box h4{ font-family:'Noto Sans TC'; font-size: 3.125rem; line-height: 1.5em; font-weight: 300; color: #fff; margin-bottom: 20px; text-align: center; }
.recommend .stat-box{ display: flex; justify-content: center; flex-direction: row; margin-bottom: 75px; }
.recommend .stat-box>li{ width: 188px; height: 188px; margin: 0 50px 0 0; position: relative; opacity: 0; }
.recommend .stat-box>li:last-child{ margin-right: 0;  }
.recommend .stat-box>li>img{ display: block; width: 100%; height: auto; }
.recommend .stat-box>li>p{ position: absolute; left: 50%; transform: translateX(-50%); top: 133px; text-align: center; font-size: 1.25rem; color: #fff; white-space:nowrap; }
.recommand__table{ display: flex; flex: 0; align-items: flex-start; }
.recommand__table>img{ display: block; }
.recommand__table>img:first-child{ }
.recommand__table>img:last-child{ margin: 60px 0 0 18px; }





/* lowsaps */
.lowsaps{ width: 100%; min-width: 1280px; height: 975px; background: url(../image/euro__lowsaps__bg.jpg) top center repeat-x;  position: relative; overflow: hidden; }
.lowsaps-container{ width: 1280px; margin: 0 auto; box-sizing: border-box; padding: 0 0 0 0; position: relative; }
.lowsaps .description-box{ width: 782px; font-size: 1.125rem; line-height: 25px; color: #fff; text-align: center; margin: 200px auto 40px auto;   }
.lowsaps .description-box h4{ font-family:'Noto Sans TC'; font-size: 3.125rem; line-height: 1.5em; font-weight: 300; color: #fff; margin-bottom: 20px; text-align: center; }
.lowsaps .description-box .notetxt{ font-size: 0.875rem; color: #6ecff5; }
.lowsaps .motion-box{ display: flex; justify-content: center; }
.lowsaps .motion__txt{ font-size: 0.875rem;	 color: #fff; text-align: center; margin-top: 10px; }





/* pao */
.pao{ width: 100%; min-width: 1280px; height: 500px; background: url(../image/euro__pao__bg.jpg) top center no-repeat; background-size: cover; position: relative; overflow: hidden; }
.pao-container{ width: 1280px; height: 100%; margin: 0 auto; box-sizing: border-box; padding: 0 0 0 0; position: relative; }
.pao .description-box{ width: 490px; font-size: 1.125rem; line-height: 25px; color: #fff; text-align: left; position: absolute; left: 530px; top: 50%; transform:translateY(-53%); margin: 0; }
.pao .description-box h4{ font-family:'Noto Sans TC'; font-size: 3.125rem; line-height: 1.5em; font-weight: 300; color: #fff; margin-bottom: 20px; text-align: left; }





/* effective */
.effective{ width: 100%; min-width: 1280px; height: 780px; background: url(../image/euro__effective__bg.jpg) top center no-repeat; background-size: cover; position: relative; overflow: hidden; }
.effective-container{ width: 1280px; margin: 0 auto; box-sizing: border-box; padding: 0 0 0 0; position: relative; }
.effective .description-box{ width: auto; font-size: 1.125rem; line-height: 25px; color: #fff; text-align: left; margin: 70px auto 50px auto; text-align: center; }
.effective .description-box h4{ font-family:'Noto Sans TC'; font-size: 3.125rem; line-height: 1.5em; font-weight: 300; color: #fff; margin-bottom: 20px; text-align: center; }
.effective .stat-box{ display: flex; justify-content: center; flex-direction: row; } 
/* .effective .stat-box>li{ width: 312px; margin-right: 20px; position: relative; cursor: pointer;	} */
.effective .stat-box>li{ width: 245px; margin-right: 10px; position: relative; cursor: pointer; }
.effective .stat-box>li:last-child{ margin-right: 0; }
.effective .stat-box>li>img{ display: block; position: absolute; left: 0; top: 0; }
.effective .stat-box>li .stat--on{ transition: all 0.4s ease-out; opacity: 0; }
.effective .stat-box>li .stat--off{ display: block;	transition: all 0.4s ease-out; opacity: 1; }
.effective .stat-box>li.seton .stat--on{ opacity: 1; }
.effective .stat-box>li:hover .stat--on{ opacity: 1; }





/* 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;  */ padding: 70px 0 70px 20px;position: relative;  }
.product-L,.product-R{ width: 50%; }
.product-R{ margin: 0; }
.product__item{ margin: 0 40px 50px 0;  }
.product__item>img{ /* width: auto; */ width: 200px; 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: #0c838d;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: 62px; }
.product__info__logo__02{ width: 68px; }
.product__info__logo__03{ width: 103px; }
.product__info__logo__04{ width: 120px; }
.product__info__logo__05{ width: 44px; }
.product__info-box{ display: flex; margin: 40px 0 0 0; }
.product__info__notelist{ width: 250px;	 margin: 0 15px 0 0; border: 1px solid #5d5d5d; font-size: 1rem; color: #fff; font-family: Arial,"微軟正黑體","新細明體","蘋果儷黑體", sans-serif; position: relative;	 }
.product__info__notelist>li{ box-sizing: border-box; padding: 0 13px; height: 40px; line-height: 40px; display: flex; justify-content: space-between; align-items: center; }
.product__info__notelist>li img{ display: block; }
.product__info__notelist>li>span:first-child:before{ content: '‧'; margin: 0 7px 0 0; }
.product__info__notelist>li.tit{ background: #5d5d5d; }
.product__info__notelist>li.tit>span:first-child{ margin-right: 50px;	 }
.product__info__notelist>li.tit>span:first-child:before{ content: ''; /* margin: 0 7px 0 0; */ }
.product__info__link-box{ display: flex; flex-wrap: nowrap; }
.product__info__link{ width: auto; }
.product__info__link:last-child{}
.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: 200px; }
.product__info__icon-box{ display: flex; align-items: flex-end; justify-content: center;  margin: 10px auto 20px auto;   }
.product__info__icon-box>li{ margin-right: 30px; }
.product__info__icon-box>li>img{ width: 100%; height: auto; }
.product__info__icon__01{ min-width: 67px; }
.product__info__icon__02{ min-width: 57px; }
.product__info__icon__03{ min-width: 54px; }
.product__info__icon__04{ min-width: 77px; }
.product__info__icon__05{ min-width: 54px; }
.product__info__icon__06{ min-width: 54px; }
.product__info__icon__07{ min-width: 65px; }
.product__01 .product-L,.product__03 .product-L{ order: 2; }
.product__01 .product-R,.product__03 .product-R{ order: 1; }





/* product__01 */
.product__01{ display: flex; align-items: center; width: 100%; min-width: 1280px; height: 855px; 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: 855px; background: #1b1b1b; position: relative; overflow: hidden; }
.product__02__colorbg{ width: 660px; height: 100%; background: #1f1f1f; position: absolute; left: 30%; transform: skewX(-50deg); }
.product__02 .product__info__icon-box{ margin: 10px 0 20px -50px;   }





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






/* product__04 */
.product__04{ display: flex; align-items: center; width: 100%; min-width: 1280px; height: 855px; background: #1b1b1b; position: relative; overflow: hidden; }
.product__04__colorbg{ width: 660px; height: 100%; background: #1f1f1f; 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/euro__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;   }
/* 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: 300px; padding: 0 10px; transition: all 0.4s  cubic-bezier(.25,.1,.25,1); }
/* header__oem */
.header__oem{ top: 300px;	}



}