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





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





/* wrapper */
.wrapper{ width: 100%; height: 100%; }




/* footer */
footer{ display: none;	 }



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





/* mainnav */
.mainnav{ position: fixed; }




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





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





/* map-container */
.map-container{ width: 100%;  height: calc(100% - 142px); overflow: hidden; position: fixed; top: 142px;  }
.tmpmap{ display: block;  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.map__pin-container{ position: absolute; }
.map__pin{  width: 27px; height: 33px; line-height: 25px; text-align: center; color: #3499c2; font-size: 1rem; background: url(../image/map__pin.png); position: absolute; left: 50%; transform: translateX(-50%); cursor: pointer; }
.map__pin__info{ display: none;	font-size: 0.875rem; line-height: 20px; background: #fff; border-radius: 5px;  box-sizing: border-box; padding: 18px 15px; position: absolute; left: 50%; transform: translateX(-50%); top: 45px; white-space:nowrap;filter: drop-shadow(0px 1px 3px rgba(0,0,0,.4)); }
.map__pin__info:after{ display: block; content: ''; width: 0; height: 0; border-style: solid; border-width: 0 7.5px 11px 7.5px; border-color: transparent transparent #ffffff transparent; position: absolute; left: 50%; transform: translateX(-50%); top: -11px; }
.map__pin__info a{ display: block;	text-decoration: none; color: #3499c2; margin-top: 15px; }
.map__pin__info a:hover{ text-decoration: underline; }






/* map__search-container  */
.map__search-container{ /* display: none;  */ z-index: 999; width: 100%;  background: #fff; position: fixed; left: 0; top: 50px; transition: all 0.5s ease-in-out;  }





/* map__search__header for mobile */
.map__search__header{ display: flex; justify-content: space-between; width: 100%; height: 40px; line-height: 40px; background: #2783b2; box-sizing: border-box; padding: 0 15px }
.map__search__header .map__search__header__view:after{ content:'\f0ca'; color: #fff; font-size: 1.5rem;  }
.map__search__header .map__search__header__search:after{ content:'\f002'; color: #fff; font-size: 1.5rem; }
.map__search__header .map__search__header__view.active:after{ content:'\f279'; color: #fff; font-size: 1.5rem;  }





/* map__search-box */
.map__search-box{ font-size: 0.875rem; color: #000; box-sizing: border-box; padding: 10px 20px 10px 20px; display: none; }
.map__search-box>ul{ display: flex; border-bottom: 1px solid #e8e8e8; box-sizing: border-box; padding: 0 0 10px 0; margin: 0 0 10px 0;	 }
.map__search-box>ul>li:first-child{ margin-right: 4%; }
.map__search__select-box{ width: 48%; height: 40px; line-height: 40px; border-radius: 3px; background: #e8e8e8; position: relative; }
.map__search__select-box select{ width: 100%; height: 100%; position: absolute;	border: none; -webkit-appearance: none; background: transparent; font-size: 0.875rem; color: #000; box-sizing: border-box; padding: 0 8px;	}
.map__search__select-box:before{ content: '\f107'; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); }
.map__search__input-box{ display: flex; align-items: center; }
.map__search__input-box input{ width: 85%; height: 40px; line-height: 40px; font-size: 0.875rem; color: #000; border-radius: 3px; background: #e8e8e8; box-sizing: border-box; padding: 0 10px; margin-left: 5px; }
.map__search__input-box .lnr-magnifier{ display: inline-block; margin-left: 5px; font-size: 2rem; /* line-height: 60px; */ cursor: pointer; }





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





/* contents-box */
.contents-box{ width: 100%; height: 100%; margin: 0 auto; background: #3499c2; box-sizing: border-box; padding: 0px 4px 4px 4px; }
.contents{ background: #fff; box-sizing: border-box; /* padding: 10px 10px 30px 10px; *//*  height: calc(100vh - 137px); */ overflow: hidden;	 }





/* map__search__list-box */
.map__search__list-box{ height: 90%; overflow-y:scroll; box-sizing: border-box; padding: 10px 10px 30px 10px; display: none; }
.map__search__list-box>li{ display: flex; box-sizing: border-box; padding: 6px 6px; font-size: 0.875rem; color: #818181; line-height: 25px; cursor: pointer; }
.map__search__list-box>li:nth-child(odd){ background: #fff; }
.map__search__list-box>li:nth-child(even){ background: #f7f7f7; }
.map__search__list-box>li.active{ background: #eaf5f9; }
.map__search__list__pin{  width: 27px; height: 33px; line-height: 25px; text-align: center; color: #3499c2; font-size: 1rem; background: url(../image/map__pin.png); margin-right: 10px; }
.map__search__list__info__tit{ color: #000; }




/* goto-box--mobile */
.goto-box--mobile{ display: none; }




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





.header__top-box{ height: 50px;  }




}



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





}





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






/* mainnav */
.mainnav{ position: fixed; }






.header__top-box{ height: 60px;  }





/* logo */
.logo{ min-width: 50px; width: 50px; height: 40px;  }





.mainmenu .mainmenu__oilsearch>a{ height: 79px; background-size: 21px; padding: 50px 0 0 0; background-position: center 26px; }
.mainmenu .mainmenu__oilsearch:hover>a{ background-position: center 23px;  padding: 47px 0 0 0; }
/* .mainmenu .mainmenu__oilsearch>a:hover{ background-position: center 23px;   }
 */






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





/* search-box */






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





/* map-container */
.map-container{ width: calc(100% - 320px) ; min-width: 960px; height: 100%; overflow: hidden; /* position: relative;	top: 0; */ position: fixed;	top: 60px; left: 320px;	 }
.tmpmap{ display: block;  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.map__pin-container{ position: absolute; }
.map__pin{  width: 27px; height: 33px; line-height: 25px; text-align: center; color: #3499c2; font-size: 1rem; background: url(../image/map__pin.png); position: absolute; left: 50%; transform: translateX(-50%); cursor: pointer; }
.map__pin__info{ display: none;	font-size: 0.875rem; line-height: 20px; background: #fff; border-radius: 5px;  box-sizing: border-box; padding: 18px 15px; position: absolute; left: 50%; transform: translateX(-50%); top: 45px; white-space:nowrap;filter: drop-shadow(0px 1px 3px rgba(0,0,0,.4)); }
.map__pin__info:after{ display: block; content: ''; width: 0; height: 0; border-style: solid; border-width: 0 7.5px 11px 7.5px; border-color: transparent transparent #ffffff transparent; position: absolute; left: 50%; transform: translateX(-50%); top: -11px; }
.map__pin__info a{ display: block;	text-decoration: none; color: #3499c2; margin-top: 15px; }
.map__pin__info a:hover{ text-decoration: underline; }






/* map__search-container  */
.map__search-container{ width: 320px; height: calc(100% - 108px); background: #fff; position: fixed; left: 0; top: 60px; transition: all 0.5s ease-in-out;  }





/* map__search__header for mobile */
.map__search__header{ display: none; }




/* map__search-box */
.map__search-box{ display: block; font-size: 1rem; color: #000; box-sizing: border-box; padding: 10px 20px 15px 20px; }
.map__search-box>ul{ display: flex; border-bottom: 1px solid #e8e8e8; box-sizing: border-box; padding: 0 0 10px 0; margin: 0 0 10px 0;	 }
.map__search-box>ul>li:first-child{ margin-right: 20px;	 }
.map__search__select-box{ width: 128px;	height: 30px; line-height: 30px; border-radius: 3px; background: #e8e8e8; position: relative; }
.map__search__select-box select{ width: 100%; height: 100%; position: absolute;	 border: none; -webkit-appearance: none;  -moz-appearance: none; background: transparent; font-size: 1rem; color: #000; box-sizing: border-box; padding: 0 8px;	}
.map__search__select-box:before{ content: '\f107'; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); }
.map__search__input-box input{ width: 215px; height: 30px; line-height: 30px; font-size: 1rem; color: #000; border-radius: 3px; background: #e8e8e8; box-sizing: border-box; padding: 0 10px; }
.map__search__input-box .lnr-magnifier{ display: inline-block; margin-left: 5px; font-size: 1.5rem; line-height: 30px; cursor: pointer; }





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





/* contents-box */
.contents-box{ display: block;	width: 100%; height: 100%; margin: 0 auto; background: #3499c2; box-sizing: border-box; padding: 0px 4px 4px 4px; transition:all 0.5s ease-in-out;}
.contents{ height: 100%;  background: #fff; box-sizing: border-box; padding: 0px 0 30px 0; }





/* map__search__list-box */
.map__search__list-box{ height: 100%; overflow-y:scroll; display: block; padding: 0 0 105px 0; }
.map__search__list-box::-webkit-scrollbar {    display: none;}
.map__search__list-box>li{ display: flex; box-sizing: border-box; padding: 10px 7px; font-size: 0.8125rem; color: #818181; line-height: 1.3rem; cursor: pointer; }
.map__search__list-box>li:nth-child(odd){ background: #fff; }
.map__search__list-box>li:nth-child(even){ background: #f7f7f7; }
.map__search__list-box>li:hover,.map__search__list-box>li.active{ background: #eaf5f9; }
.map__search__list__pin{  width: 27px; height: 33px; line-height: 25px; text-align: center; color: #3499c2; font-size: 1rem; background: url(../image/map__pin.png); margin-right: 10px; }
.map__search__list__info__tit{ color: #000; font-size: 1rem;	}





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



}





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





.header__top-box{ height: 60px;  }





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





/* header */
header{ width: 100%; min-width: 1280px; height: 710px; background: url(../image/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: 0.9375rem; color: #fff; background: rgba(0,0,0,0.5); border: 1px solid #fff; position: absolute; left: 155px; top: 284px; padding: 0 10px; transition: all 0.4s  cubic-bezier(.25,.1,.25,1); }
.header-container button:hover{ background: rgba(52,153,194,1); }
.header-container button>a{ display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
/* header__patent */
.header__patent{ width: 220px; position: absolute; left: 105px; top: 377px; transform: none; /* background: url("../image/animationA/cleanguard.png") no-repeat center top; */ }
.header__patent>img{ width: 100%; height: auto; }
/* header__car */
.header__car{ width: 978px; position: absolute; left: 286px; top: 222px;  }
.header__car>img{ width: 100%; height: auto; }
/* header__engine */
.header__engine{ width: 365px; height: 329px; position: absolute; left: 500px; top: 360px; animation: header__engine__animation 0.8s ease-out infinite alternate;  }
.header__engine__item{ display: block; position: absolute; top: 50%; left: 50%;  transform: translate(-50%, -50%); }
.header__engine__shadow{ display: block; position: absolute; top: 50%; left: 50%;  transform: translate(-50%, -50%);  animation: header__engine__shadow__animation 0.8s ease-out infinite alternate; }
@keyframes header__engine__shadow__animation{ from{ opacity: 0; } to{ opacity: 1; } }
@keyframes header__engine__animation{ from{ transform: scale(0.95,0.95); } to{ transform: scale(1,1); } }





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





.map-container{ position: fixed; top: 60px; left: 320px;	 }




}