@charset "utf-8";
/*
  danny 201709
  1. $Reset
  2. $font
  3. $body,html
  4. $共用
  5. $Mobile
  6. $Pad
  7. $橫的版型
  8. $Pc
  9. $1025~1279
*/

/* $Reset
--------------------------------------------------------------------------------------*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote{margin:0; padding:0; } fieldset, img {border:0; } address, caption, cite, code, dfn, em, var {font-style:normal; font-weight:normal; } ol, ul {list-style:none; } q:before, q:after {content:''; } abbr, acronym {border:0; }





/* $font
--------------------------------------------------------------------------------------*/
/* cwTeXYen (Chinese Traditional) http://www.google.com/fonts/earlyaccess */
@font-face {
  font-family: 'cwTeXHei';
  font-style: normal;
  font-weight: 500;
  src: url(//fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.eot);
  src: url(//fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.eot?#iefix) format('embedded-opentype'),
       url(//fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.woff) format('woff'),
       url(//fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.ttf) format('truetype');
}

/* @import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css); */
/*
* Noto Sans TC (Chinese_traditional) http://www.google.com/fonts/earlyaccess
 */
@font-face {
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 100;
  src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Thin.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Thin.woff) format('woff'),
       url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Thin.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 300;
  src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Light.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Light.woff) format('woff'),
       url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Light.otf) format('opentype');
}
@font-face {
   font-family: 'Noto Sans TC';
   font-style: normal;
   font-weight: 400;
   src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Regular.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Regular.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Regular.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Sans TC';
   font-style: normal;
   font-weight: 500;
   src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Medium.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Medium.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Medium.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Sans TC';
   font-style: normal;
   font-weight: 700;
   src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Bold.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Bold.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Bold.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Sans TC';
   font-style: normal;
   font-weight: 900;
   src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Black.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Black.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Black.otf) format('opentype');
 }
 
:before ,:after{ font-family:'Font Awesome 5 pro','FontAwesome','Linearicons-Free',"微軟正黑體";}





/* $body,html
--------------------------------------------------------------------------------------*/
html,body{ width: 100%; height: 100%; font-family:Arial, Helvetica,"微軟正黑體","新細明體","蘋果儷黑體",  sans-serif;}





/* $共用
--------------------------------------------------------------------------------------*/
/*----清除浮動技巧----*/
.clearfix:before,.clearfix:after {content: " ";display: table;}
.clearfix:after {clear: both;}
.clearfix {*zoom: 1;}
/*----清除浮動技巧----*/

/* IMAGE REPLACE */
.imageReplace{ text-indent: 100%; white-space: nowrap; overflow: hidden;}

/* float */
.floatL{ float: left;}
.floatR{ float: right;}

/* button reset */
button{ font-family:"微軟正黑體","新細明體","蘋果儷黑體", Arial, Helvetica, sans-serif; border: none; }




/* wrapper */
.wrapper{ width:100%;  /* height: 100%; */ overflow-x:hidden;}





/* input */
input{ font-family:"微軟正黑體","新細明體","蘋果儷黑體", Arial, Helvetica, sans-serif; border: none; }





/* select */
select{ font-family:"微軟正黑體","新細明體","蘋果儷黑體", Arial, Helvetica, sans-serif; }





/* color */
.color--blue{ color: #38b5e6; }




/* .rdown{ position: relative;  top: -10px; font-size: 0.75rem; margin: 0 0px 0 0; } */



/* $Mobile
--------------------------------------------------------------------------------------*/
html,body{ width: 100%; font-size: 16px; -webkit-text-size-adjust:none; }

.rdown{ top: -15px;  }
.rup{ top: -8px; font-size: 0.75rem; position: relative;  }



/* mainnav */
.mainnav{ width: 100%;  position: relative;  z-index: 9999; }
.header__top-box{ width: 100%; /* height: 85px; */ height: 50px; background: rgba(0,0,0,0.9); }
.header__top{ /* height: 85px; */ height: 50px; display: flex; align-items: center; position: relative; }
/* logo */
.logo{ min-width: 40px; width: 40px; height: 32px; background: url(../image/logo.png) no-repeat; background-size: cover; position: relative; flex-grow: 0; margin: 0 0 0 2.5%; order: 1; }
.logo.small{ background-image:url(../image/logo-s.png);  }
.logo>a{ display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0;  }
/* hamburg */
.hamburg{ display: block; width: 40px; height: 40px; line-height: 40px; padding-top: 4px; box-sizing: border-box; z-index: 9999; position: absolute; right: 2.5%;/*  top:23px; */ top:6px; }
.hamburg span,.hamburg:before,.hamburg:after{visibility:visible;  display: block; content: ""; width: 28px; height: 3px; border-radius: 10px; margin: 5px auto; color:blue; background: #666; text-decoration: none; transition:all 0.3s; }
.hamburg.active span{ visibility: hidden;}
.hamburg.active:before{ transform: translateY(9px) rotate(-45deg);}
.hamburg.active:after{ transform: translateY(-7px) rotate(45deg);}
/* mobile__oilsearch */
.mobile__oilsearch{ display: flex; align-items: center; width: 65px; height: 40px; position: absolute; right: 14%; top: 6px;  }
.mobile__oilsearch>a{ display: inline-block; width: 30px; height: 40px; line-height: 1rem; text-decoration: none; box-sizing: border-box; padding: 3px 0 0 0; font-size: 0.75rem; color: #3499c2; }
.mobile__oilsearch:before{ display: inline-block; content: ''; width: 30px; height: 30px; background: url(../image/icon__search.png) no-repeat;background-size: cover; margin-right: 5px; }

/* mainmenu */
.mainmenu-box{ order: 3;  box-sizing: border-box; padding: 15% 0 0 0; overflow: auto;  }
.mainmenu{ display: none;  flex-wrap: wrap; box-sizing: border-box;  }
.mainmenu>li{ width: 100%; text-align: center; margin-bottom: 40px;   }
.mainmenu>li>a{ display: block;  width: 100%; font-size: 1.25rem; color: #fff; text-decoration: none; box-sizing: border-box; padding: 0 5%; height: 40px; line-height: 40px;  }
.mainmenu>li>a:after{ display: none;  }
.mainmenu>li .mainmenu__L2{ }
.mainmenu>li .mainmenu__L2>li{ height: 60px; line-height: 60px; font-size: 0.9375rem; background: #333; box-sizing: border-box; padding: 0 8%; border-bottom: 1px solid #666; text-align: center; }
.mainmenu>li .mainmenu__L2>li>a{ display: block; width: 100%; height: 100%; text-decoration: none; color: #fff;   }
 /* header__submenu */
.header__submenu { width: 100%; height: 50px; overflow: hidden; display: flex; flex-direction:column;/*flex-wrap: wrap; align-items: flex-start;*/ z-index: 99999; position: relative; transition: all 0.3s cubic-bezier(.25,.1,.25,1); background: #aeaeae;  }
.header__submenu .droparrow:after{ content: '\e874'; font-size: 1.5rem; color: #fff; position: absolute; right: 1%; top: 0px;  width: 50px; height: 50px; line-height: 50px;  z-index: 999; text-align: center; cursor: pointer; }
.header__submenu.active .droparrow:after{ content: '\e873'; }
.header__submenu>li{ color: #000; /*min-width: 100%;*/ flex:1 1 auto; height: 50px; line-height: 50px; background: rgba(255,255,255,0.9); text-align: center; font-size: 1.25rem; position: relative; margin:0 0 1px 0;  }
.header__submenu>li.active{ background: rgba(52,153,194,0.9); color: #fff; order:-1;}
.header__submenu>li.hlight{ color: #0090ff; }
.header__submenu>li.hlight.active{  color: #fff; }
.header__submenu>li.hlight.active:after{ /* display: inline-block; */ display: none;  line-height: 20px; content: '\e870'; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); cursor: pointer; }
.header__submenu>li>a{ display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: transparent; }
/* search-box */
.search-box{ width: 100%; margin: 0 auto 0 auto; border-top: 1px solid #000; display: none; }
.search-box ul{ display: flex; flex-wrap: wrap; width: 100%; background: #000;  }
.search-box ul>li{ width: 100%;/*  height: 96px; */  height: 80px; background: #5e5d5b; position: relative; margin: 0 0 1px 0; }
.search-box ul>li:first-child{ height: 50px; background: #e8e8e8; font-size: 1.5rem; color: #000; display: flex; justify-content: center; align-items: center; margin-right: 0;  }
.search-box ul>li:last-child{  }
.search__num{ font-size: 4.125rem; line-height: 50px; color: #fff; position: absolute; left: 15px; /* top: 25px; */  top: 18px; font-family: Arial; font-style: italic; text-shadow: 1px 2px 3px rgba(0,0,0,0.5); }
.search__tit{ font-size: 1.25rem; color: #fff; position: absolute; left: 65px;/*  top: 25px; */ top: 20px; }
.select__bg{ display: none; width: 310px; height: 35px; border-radius: 3px; background: #fff; opacity: 0.1; position: absolute; left: 60px; bottom: 13px; }
.search-box ul>li.active{ background: #3499c2; }
.search-box ul>li.selected{ background: #3499c2; }
.search-box ul>li.selected:hover{ background: #085068; }
.search__select>select{ width: 100%; height: 100%; position: absolute; background: transparent; border: none; font-family:"微軟正黑體","新細明體","蘋果儷黑體", Arial, Helvetica, sans-serif; font-size: 1rem; line-height: 35px; color: #fff;  -webkit-appearance: none; box-sizing: border-box; /* padding: 35px 55px 0 66px; */ padding: 27px 55px 0 66px; cursor: pointer; }
.search__select>select>option{ background: #5e5d5b; height: 35px; line-height: 35px; }
.search__select>select>option:hover{ background: #3499c2; }
.search__select:before{ content: "\f107"; font-size: 1.625rem; color: #fff; position: absolute; right: 20px; bottom: 15px;  }





/* nav__submenu */
.nav__submenu { width: 100%; height: 50px; overflow: hidden; display: flex; flex-wrap: wrap; align-items: flex-start; z-index: 99999; position: relative; transition: all 0.3s cubic-bezier(.25,.1,.25,1); background: #aeaeae; margin-bottom: 10px;    }
.nav__submenu .droparrow:after{ content: '\e874'; font-size: 1.5rem; color: #fff; position: absolute; right: 1%; top: 0px;  width: 50px; height: 50px; line-height: 50px;  z-index: 999; text-align: center; cursor: pointer; }
.nav__submenu.active .droparrow:after{ content: '\e873'; }
.nav__submenu>li{ color: #000; min-width: 100%; height: 50px; line-height: 50px; background: rgba(255,255,255,0.9); text-align: center; font-size: 1.25rem; position: relative; margin:0 0 1px 0;  }
.nav__submenu>li.active{ background: rgba(52,153,194,0.9); color: #fff; order:-1;}
.nav__submenu>li.hlight{ color: #0090ff; }
.nav__submenu>li.hlight.active{  color: #fff; }
.nav__submenu>li.hlight.active:after{ /* display: inline-block; */ display: none;  line-height: 20px; content: '\e870'; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); cursor: pointer; }
.nav__submenu>li>a{ display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: transparent; }




/* footer */
footer{ height: 150px; font-size: 0.8125rem; background: #000; color: #656565; text-align: center;  }
/* .footer-container{  box-sizing: border-box; padding: 20px 3% 60px 3%; position: relative; } */
.footer-container{  box-sizing: border-box; padding: 20px 3% 0 3%; position: relative; }
.footer-container  nav>ul{ display: flex; justify-content: center; margin-top: 5px; }
.footer-container  nav>ul>li>a{ text-decoration: none; color: #656565; }
.footer-container  nav>ul>li:first-child:after{ display: inline-block; content: ''; height: 13px;  border-right: 1px solid #656565; vertical-align: middle; margin: 0 10px; }
.footer-container  nav>ul>li>a:hover{ text-decoration: underline; }
/* socialmedia */
.socialmedia{ display: flex; justify-content: center; margin: 0 0 10px 0; }
.socialmedia>li{ display: flex; justify-content: center; align-items: center; width: 30px; height: 30px; line-height: 30px; border-radius: 50%; font-size: 1.25rem; color: #fff; text-align: center; background: #33353b; margin-right: 7px; transition:all 0.3s cubic-bezier(.25,.1,.25,1); position: relative; }
.socialmedia>li>a{ display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
.socialmedia>li:nth-child(1) img{ width: 8px; }
.socialmedia>li:nth-child(n+2) img{ width: 15px; }
/* .socialmedia>li:first-child{ background: #3c5b9b; } */
.socialmedia>li:hover{ background: #3499c2; }





/* gototop */
.goto-box{ display: none;  position: fixed; right: 10px; bottom: 5%; }
.goto-box>li.gotosearch{ display: none; }
.goto-box>li.gototop{ width: 40px; height: 40px; line-height: 46px; color: #fff; font-size: 0.875rem; text-align: center;  background: none; background: #989898; border-radius: 50%; text-indent: 0; position: relative;}
.goto-box>li.gototop:before{ content: '\e873'; display: inline-block; font-size: 0.75rem; line-height: 1rem;  position: absolute; left: 50%; top: 3px; transform: translateX(-50%);}
/* .goto-box--mobile{ position: fixed; bottom: 0; display: flex; width: 100%;  } */
.goto-box--mobile{ display: none;  }
.goto-box--mobile>li{ cursor: pointer;  height: 50px; line-height: 50px; font-size: 1.125rem; color: #fff; text-align: center;  z-index: 9999;}
.goto-box--mobile>li.gotosearch{ width: 60%;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#86c8e3+1,3c93b2+79,167aa1+100 */
background: #86c8e3; /* Old browsers */
background: -moz-linear-gradient(top, #86c8e3 1%, #3c93b2 79%, #167aa1 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #86c8e3 1%,#3c93b2 79%,#167aa1 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #86c8e3 1%,#3c93b2 79%,#167aa1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#86c8e3', endColorstr='#167aa1',GradientType=0 ); /* IE6-9 */ 
}
.goto-box--mobile>li.gotosearch:hover{ }
.goto-box--mobile>li.gototop{ width: 40%;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#949495+1,8f9190+56,5c5e61+100 */
background: #949495; /* Old browsers */
background: -moz-linear-gradient(top, #949495 1%, #8f9190 56%, #5c5e61 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #949495 1%,#8f9190 56%,#5c5e61 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #949495 1%,#8f9190 56%,#5c5e61 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#949495', endColorstr='#5c5e61',GradientType=0 ); /* IE6-9 */
}




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

.header__top{ height: 50px; display: flex; align-items: center; position: relative; }



}



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





}





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





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





/* mainnav */
.mainnav{ width: 100%;  position: fixed;  z-index: 9999; }
.header__top-box{ width: 100%; height: 103px; background: rgba(0,0,0,0.9); transition: all 0.5s ease-in-out; position:relative; z-index:1000000  }
.header__top{ width: 1280px; min-width: 1024px;  height: 100%; margin: 0 auto;  display: flex; align-items: center; position: relative; }
/* logo */
.logo{ min-width: 100px; width: 100px; height: 80px; background: url(../image/logo.png) no-repeat; background-size: cover; position: relative; flex-grow: 0; margin: 0 0 0 0; order: 1; transition: all 0.5s ease-in-out; }
.logo>a{ display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0;  }
/* hamburg */
.hamburg{ display: none;}
/* mobile__oilsearch */
.mobile__oilsearch{ display: none; }
/* mainmenu */
.mainmenu-box{ flex-grow: 1; margin: 0 10px 0 0; order: 2; background: none; position: relative; width: auto; height: auto; padding: 0; overflow: visible; }
.mainmenu{ display: flex; justify-content: flex-end; height: 24px; }
.mainmenu>li{ width: auto; text-align: center; margin: 0 0 0 40px; position: relative; transition: all 0.5s ease-in-out; }
.mainmenu>li>a{ font-size: 1.125rem; color: #fff; text-decoration: none;  box-sizing: border-box; padding: 0 0; height: auto; line-height: normal; }
.mainmenu>li.active>a{ font-size: 1.125rem; color: #3499c2; text-decoration: none; }
.mainmenu>li>a:after{ content: ''; display: block; width: 0%; height: 1px; background: #fff; margin: 0 auto; transition:all 0.3s cubic-bezier(.25,.1,.25,1); }
.mainmenu>li.active>a:after{ background: #0090ff; width: 100%; display: none; }
.mainmenu>li:hover>a:after{ width: 100%; }
.mainmenu>li .mainmenu__L2{ width:175px; position: absolute; left: -50%; display: none; }
.mainmenu>li .mainmenu__L2>li{ height: 40px; line-height: 40px; font-size: 0.9375rem; background: #333;  border-bottom: 1px solid #666; text-align: center; }
.mainmenu>li .mainmenu__L2>li>a{ display: block; width: 100%; height: 100%; text-decoration: none; color: #fff; transition:all 0.3s cubic-bezier(.25,.1,.25,1);  }
.mainmenu>li .mainmenu__L2>li>a:hover{ color: #3499c2; }
/* .mainmenu>li:hover .mainmenu__L2{ display: block ; opacity: 1;  transition: all 0.5s ease-in-out; } */
.mainmenu .mainmenu__oilsearch{ width: 100px; }
.mainmenu .mainmenu__oilsearch>a{ display: block; width: 100px; height: 100px; background: url(../image/icon__search.png) no-repeat center 23px #242424;  background-size: 43px;  box-sizing: border-box; padding: 70px 0 0 0; font-size: 0.9375rem; color: #3499c2; position: absolute; left: 0; top: -37px; transition: all 0.5s ease-in-out; }
.mainmenu .mainmenu__oilsearch:hover>a{ background-position: center 18px;  padding: 65px 0 0 0; }
.mainmenu .mainmenu__oilsearch>a:after{ display: none; }


 /* header__submenu */
.header__submenu{ width: 1280px; display: flex; flex-direction:row; position: relative; background: none; margin: 10px auto 0 auto; }
.header__submenu .droparrow{ display: none; }
.header__submenu>li{ /*min-width: 20%;*/ height: 50px; line-height: 50px; background: rgba(255,255,255,0.9); 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.moto>li{ min-width: 25%; height: 50px; line-height: 50px; background: rgba(255,255,255,0.9); 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(20% - 4px ); margin-right: 0; }
.header__submenu.moto>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: rgba(52,153,194,0.9); color: #fff; }
.header__submenu>li.active{ order:0;}
.header__submenu>li.hlight{ color: #0090ff; }
.header__submenu>li.hlight.active{ color: #fff;  }
.header__submenu>li.hlight.active:after{ display: inline-block; line-height: 20px; content: '\e870'; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); cursor: pointer; }
.header__submenu>li>a{ display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
/* search-box */  
.search-box{ width: 1280px; height: 96px; margin: 0px auto 0 auto; border: none; display: none; }
/* .search-box{ width: 1280px; height: 96px; border: none; display: none; position: fixed; top: 110px; left: 50%; transform: translateX(-50%); z-index: 99999; } */
.search-box ul{ display: flex;  flex-wrap: nowrap; width: 100%; height: 100%;  }
.search-box ul>li{ width: calc((100% - 81px - 2px)/3); height: 96px; margin-right: 1px; background: #5e5d5b; position: relative;  }
.search-box ul>li:first-child{ width: 81px; height: 100%;  background: #e8e8e8; font-size: 1rem; color: #000; display: flex; justify-content: center; align-items: center; margin-right: 0;  }
.search-box ul>li:last-child{ margin-right: 0; }
.search__num{ font-size: 4.125rem; line-height: 50px; color: #fff; position: absolute; left: 15px; top: 25px; font-family: Arial; font-style: italic; text-shadow: 1px 2px 3px rgba(0,0,0,0.5); }
.search__tit{ font-size: 1.25rem; color: #fff; position: absolute; left: 65px; top: 25px; }
.select__bg{ display: none; width: 310px; height: 35px; border-radius: 3px; background: #fff; opacity: 0.1; position: absolute; left: 60px; bottom: 13px; }
.search-box ul>li.active{ background: #3499c2; }
.search-box ul>li.selected{ background: #3499c2; }
.search-box ul>li.selected:hover{ background: #085068; }
.search__select>select{ width: 100%; height: 100%; overflow: hidden; position: absolute; background: transparent; border: none; font-family:"微軟正黑體","新細明體","蘋果儷黑體", Arial, Helvetica, sans-serif; font-size: 1rem; line-height: 35px; color: #fff;  -webkit-appearance: none; box-sizing: border-box; padding: 35px 50px 0 66px; cursor: pointer; }
.search__select>select>option{ background: #5e5d5b; height: 35px; line-height: 35px;  }
.search__select>select>option:hover{ background: #3499c2; width: 200px; }
.search__select:before{ content: "\f107"; font-size: 1.625rem; color: #fff; position: absolute; right: 20px; bottom: 15px;  }





/* nav__submenu */
.nav__submenu{ width: 1280px; display: flex; position: relative; background: none; margin: 10px auto; z-index: 0; }
.nav__submenu .droparrow{ display: none; }
.nav__submenu>li{ /* min-width: 25%; */ height: 50px; line-height: 50px; background: rgba(255,255,255,0.9); text-align: center; font-size: 1.125rem; color: #000;  position: relative; margin: 0 1px 0 0; transition: all 0.3s cubic-bezier(.25,.1,.25,1); }
.nav__submenu>li:last-child{ /* min-width: calc(25% - 3px ); */ margin-right: 0; }
.nav__submenu>li:hover,.nav__submenu>li.hlight:hover,.nav__submenu>li.active{ background: rgba(52,153,194,0.9); color: #fff; }
.nav__submenu>li.active{ order:0;}
.nav__submenu>li.hlight{ color: #0090ff; }
.nav__submenu>li.hlight.active{ color: #fff;  }
.nav__submenu>li.hlight.active:after{ display: inline-block; line-height: 20px; content: '\e870'; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); cursor: pointer; }
.nav__submenu>li>a{ display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; }





/* footer */
footer{ height: 170px; font-size: 0.8125rem; background: #000; color: #656565; text-align: center; position: relative; }
.footer-container{ width: 1280px;  margin: 0 auto; box-sizing: border-box; padding: 35px 0 0 0; position: relative; }
.footer-container nav>ul{ display: flex; justify-content: center; margin-top: 0px; }
.footer-container nav>ul>li>a{ text-decoration: none; color: #656565; }
.footer-container nav>ul>li:first-child:after{ display: inline-block; content: ''; height: 13px;  border-right: 1px solid #656565; vertical-align: middle; margin: 0 10px; }
.footer-container nav>ul>li>a:hover{ text-decoration: underline; }
/* socialmedia */
.socialmedia{ display: flex; justify-content: center; margin: 0 0 15px 0;    }
.socialmedia>li{ display: flex; justify-content: center; align-items: center; width: 38px; height: 38px; border-radius: 50%; font-size: 1.25rem; color: #fff; text-align: center; background: #33353b; margin-right: 7px; transition:all 0.3s cubic-bezier(.25,.1,.25,1); position: relative; }
.socialmedia>li:nth-child(1) img{ width: 10px; }
.socialmedia>li:nth-child(n+2) img{ width: 20px; }
/* .socialmedia>li:first-child{ background: #3c5b9b; } */
.socialmedia>li>a{ display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
.socialmedia>li:hover{ background: #3499c2; }





/* gototop */
.goto-box{ display: none;  position: fixed; right: 10px; bottom: 20%; z-index: 999; }
.goto-box>li{ cursor: pointer; }
.goto-box>li.gotosearch{ display: none; }
/* .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,.goto-box>li.gotoback{ width: 68px; height: 65px; background: url(../image/btn__gotoback.png); background-position: 0 0; border-radius: 0; text-indent: 100%; }
.goto-box>li.gototop:before,.goto-box>li.gotoback:before{ display: none; }
.goto-box>li.gototop:hover,.goto-box>li.gotoback:hover{ background-position: -68px 0; }
.goto-box--mobile{ display: none; }



.rdown{ top: -25px;  }
.rup{ top: -10px;  }

}





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





.wrapper,footer{ width: 100%; min-width: 1280px; }



/* mainnav */
.header__top{ width: 100%; min-width: 1024px;  }
.mainmenu>li{ width: auto; text-align: center; margin: 0 0 0 28px; position: relative; }
/* .mainmenu .mainmenu__oilsearch{ width: 100px; }
.mainmenu .mainmenu__oilsearch>a{ display: block; width: 100px; height: 100px; background: url(../image/icon__search.png) no-repeat center 23px #242424;  background-size: 43px;  box-sizing: border-box; padding: 70px 0 0 0; font-size: 0.9375rem; color: #3499c2; position: absolute; left: 0; top: -37px; transition: all 0.2s ease-in-out; }
.mainmenu .mainmenu__oilsearch:hover>a{ background-position: center 18px;  padding: 65px 0 0 0; }
.mainmenu .mainmenu__oilsearch>a:after{ display: none; } */
 /* 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: 20%; height: 50px; line-height: 50px; background: rgba(255,255,255,0.9); 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(20% - 4px ); 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; }
/* search-box */
.search-box{ width: 100%; min-width: 1024px;  }





}