@charset "utf-8";
/*
  danny 201909
  1. $Reset
  2. $body,html
  3. $共用
  4. $Mobile
  5. $Pc
*/





/* $Mobile
--------------------------------------------------------------------------------------*/

html,body{ height: auto; min-height: 600px; background: #000; }





/* header */
header{ width: 100%; height: 70px; position: relative; overflow: hidden; }





/* compare */
.compare{ width: 100%; }
.compare-container{ max-width: 94vw; margin: 0 auto; position: relative; }
.compare__table-box{ display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; max-width: 1140px; margin: 0 auto; }
.compare__header{ width: 100%; position: relative; margin: 0 0 15px 0; }
.compare__header>h4{ font-size: 1.5rem; font-weight: normal; font-style: italic; color: #fff; }
.btn__comparetable{ font-size: 0.875rem; color: #fff; text-decoration: none; background: #0a3f55; border: 1px solid #03b0f6; box-sizing: border-box; padding: 8px 10px; position: absolute; right: 0; bottom: 0px; transition: all 0.4s cubic-bezier(.25,.1,.25,1); }
.btn__comparetable:hover{ background: #2981a5; transition: all 0.4s cubic-bezier(.25,.1,.25,1); }
.btn__comparetable:before{content:'\f0ed'; margin: 0 5px 0 0; }
/*表格*/
table{ width:100%; max-width:1140px; table-layout:fixed; color: #fff; border-collapse:collapse; border-spacing:0; }
table tr:nth-child(5),table tr:nth-child(6),table tr:nth-child(7){ background: #1c1c1c; }
table th{ border:solid 1px #4889a6; text-align:center; box-sizing: border-box; padding:8px 8px; height: auto; white-space:nowrap;}
table td{ border:solid 1px #4889a6; text-align:center; box-sizing: border-box; padding:8px 8px; height: 100px;}
table th span:before ,table td span:before{ content:'-'; display:block; color:transparent;}
table th ,table td ,table td h3{ font-size:0.75rem; font-weight: normal; line-height:1.5em; }
/*左側標題*/
table thead{ display:inline-table; float:left; position:relative; z-index:1;}
/* table thead tr:nth-child(1) > :nth-child(1)>img{ width: 30px;  } */
table thead tr td>img{ height: 60px;}
/*右側內容*/
table tbody{ display:block; position:relative; overflow-x:auto; }
table tbody tr > :nth-child(1){ border-left:none; }
table tbody tr>td:nth-child(-n+5)>img{ width: 50px;}
/* logo */
.compare__logo__01{ width: 40px; }
.compare__logo__02{ width: 40px; }
.compare__logo__03{ width: 40px; }
.compare__logo__04{ width: 40px; }
.compare__logo__05{ width: 55px; }
.compare__logo__06{ width: 30px; }
.compare__logo__07{ width: 80px; }
.compare__logo__08{ width: 70px; }





/* color daab40 */
.color01{ color: #b4914d; }
.color02{ color: #db0032; }
.color03{ color: #aa32c1; }
.color03n{ color: #3395a2; }
.color04{ color: #1990d9; }
.color05{ color: #0099a8; }
.color06{ color: #7e57c5; }
.color07{ color: #e1251b; }
.color08{ color: #ffcd00; }






/* $Pad
--------------------------------------------------------------------------------------*/
@media screen and (min-width:600px) and (max-width:1024px){


}



/* 橫的版型 */
@media screen and (orientation:landscape){ 


}





/* $Pc
--------------------------------------------------------------------------------------*/
@media screen and (min-width: 1025px){

html,body{ min-width: 100%; height: auto; font-size: 16px; background: #000; }
/* header */
header{ width: 100%; min-width: 1280px; height: 210px; background: #000; position: relative; overflow: hidden; }






.compare{ width: 100%; min-width: 1280px; }
.compare-container{ max-width: 1280px; margin: 0 auto; position: relative; }
.compare__table-box{ display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; max-width: 1140px; margin: 0 auto; }
.compare__header{ width: 100%; position: relative; margin: 0 0 15px 0; }
.compare__header>h4{ font-size: 3.125rem; font-weight: normal; font-style: italic; color: #fff;  text-align: center; }
.btn__comparetable{ font-size: 0.875rem; color: #fff; text-decoration: none; background: #0a3f55; border: 1px solid #03b0f6; box-sizing: border-box; padding: 8px 30px; position: absolute; right: 0; bottom: 10px; transition: all 0.4s cubic-bezier(.25,.1,.25,1); }
.btn__comparetable:hover{ background: #2981a5; transition: all 0.4s cubic-bezier(.25,.1,.25,1); }
.btn__comparetable:before{content:'\f0ed'; margin: 0 5px 0 0; }
/*表格*/
table{ width:100%; max-width:1140px; table-layout:fixed; color: #fff; border-collapse:collapse; border-spacing:0; }
table tr:nth-child(5),table tr:nth-child(6),table tr:nth-child(7){ background: #1c1c1c; }
table th{ border:solid 1px #4889a6; text-align:center; box-sizing: border-box; padding:10px 13px; height: auto; white-space:nowrap;}
table td{ border:solid 1px #4889a6; text-align:center; box-sizing: border-box; padding:10px 13px; height: 140px;}
table th span:before ,table td span:before{ content:'-'; display:block; color:transparent;}
table th ,table td ,table td h3{ font-size:0.8125rem; font-weight: normal; line-height:1.5em; }
/*左側標題*/
table thead{ display:inline-table; float:left; position:relative; z-index:1;}
table thead tr td>img{ height: auto;}
/*右側內容*/
table tbody{ display:block; position:relative; overflow-x:auto; }
table tbody tr > :nth-child(1){ border-left:none; }
table tbody tr>td:nth-child(-n+5)>img{ width: auto;}
/* logo */
.compare__logo__01{ width: 70px; }
.compare__logo__02{ width: 70px; }
.compare__logo__03{ width: 70px; }
.compare__logo__04{ width: 60px; }
.compare__logo__05{ width: 75px; }
.compare__logo__06{ width: 50px; }
.compare__logo__07{ width: 90px; }
.compare__logo__08{ width: 80px; }





/* search-box */
.search-box{ margin: 1px auto 0 auto;  }





/* gototop */
.goto-box>li.gotosearch{ display: block; width: 68px; height: 109px; background: url(../../car/image/elite__gotosearch.png); background-position: 0 0;  }
.goto-box>li.gototop{ width: 68px; height: 69px; background: url(../../car/image/elite__gototop.png); background-position: 0 0; }

}





/* $1025~1279
--------------------------------------------------------------------------------------*/
@media screen and (min-width:1025px) and (max-width:1279px){

/* header */
header{ width: 100%; min-width: 1280px; /* height: 710px; */ height: 760px; background: url(../image/elite__header__bg.jpg) top center no-repeat; background-size: cover; position: relative; overflow: hidden; /* max-width: 1600px; margin: 0 auto; */ }
.header-container{ max-width: 1280px; margin: 0 auto; position: relative;   }
/* header__series */
.header__series{ width: 260px; position: absolute; left: 95px; top: 200px; transform: none; }
.header__series >img{ width: 100%; height: auto; }
/* button */
.header-container button{ display: block;  height: 30px; line-height: 28px; font-size: 0.9375rem; color: #fff; background: rgba(0,0,0,0.5); border: 1px solid #fff; position: absolute; left: 155px; top: 274px; padding: 0 10px; transition: all 0.4s  cubic-bezier(.25,.1,.25,1); }

s}