@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%; min-height: 600px; background: url(../image/ss__header__bg--mobile.jpg) top center no-repeat; background-size: cover; position: relative; overflow: hidden; }
.header-container{  }
/* header__series-box */
.header__series-box{ display: flex; flex-direction: column; align-items: center; width: 60vw; position: absolute; left: 50%; top: 60px; transform: translateX(-50%); }
.header__series{ width: 40vw; margin: 0 0 10px 0; }
.header__series img{ width: 100%; height: auto; }
.header__series__txt{ width: 50vw; margin: 20px 0 0 0; }
.header__series__txt>img{ width: 100%; }
/* 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; 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; }





/* jaso */
.jaso{ width: 100%; line-height: 1.5em; color: #fff; background: url(../image/rs__jaso__bg--mobile.jpg) top center no-repeat; background-size: cover; }
.jaso-container{ display: flex; flex-direction: column; align-items: center; font-size: 0.875rem; text-align: center; color: #fff; line-height: 1.5em; width: 100%; margin: 0 auto; box-sizing: border-box; padding: 10px 3% 20px 3%; position: relative; }
.jaso__img01{ width: 100%; margin: 0px 0 20px 0; }
.jaso__img02{ display: none; }
.jaso__img02--mobile{ width: 100%; margin: 10px 0 40px 0; }
.jaso__img03{ display: none; }
.jaso__img03--mobile{ width: 100%; margin: 10px 0 0 0; }
.jaso-container h3{ font-size: 1.25rem; font-weight: normal; margin: -30px 0 10px 0; }
.jaso-container h4{ font-size: 1rem; font-weight: normal; margin: 20px 0 0px 0; }





/* color */
.color01{ color: #e1251b; }
.color02{ color: #ffcd00; }





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

/* header */
header{ height: 920px; background: url(../image/ss__header__bg.jpg) top center no-repeat; background-size: cover;} 
.header__series{ width: 35%; }
/* button */
.header-container button{ top: 120px; }
.jaso-container h3{ font-size: 1.625rem; font-weight: normal; margin: -30px 0 10px 0; }

}



/* 橫的版型 */
@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: 1080px; background: url(../image/ss__header__bg.jpg) top center no-repeat; position: relative; overflow: hidden; }
.header-container{ max-width: 1280px; margin: 0 auto; position: relative; }
/* header__series-box */
.header__series-box{ display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-end; width: 400px; position: absolute; left: 0px; top: 220px; transform: none; }
.header__series{ width: 242px; margin: 0 20px -3px 0; }
.header__series img{ width: 100%; height: auto; }
.header__series__txt{ width: auto; margin: 20px 0 0 0; }
/* 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; 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; }






/* jaso */
.jaso{ width: 100%; min-width: 1280px; background: url(../image/gt__jaso__bg.jpg) top center no-repeat; background-size: cover; }
.jaso-container{ display: flex; flex-direction: column; align-items: center; font-size: 1.125rem; color: #fff; line-height: 1.5em; text-align: center; width: 902px; margin: 0 auto; box-sizing: border-box; padding: 40px 0 80px 0; position: relative; }
.jaso-container h3{ font-size: 2.25rem; font-weight: normal; margin: -30px 0 30px 0; }
.jaso-container h4{ font-size: 1.25rem; font-weight: normal; margin: 40px 0 10px 0; }
.jaso__img01{ width: auto; margin: auto; }
.jaso__img02{ display: block; margin: 10px 0 40px 0; }
.jaso__img03{ display: block; }
.jaso__img02--mobile{ display: none; }
.jaso__img03--mobile{ display: none; }





/* pao */
.pao{ width: 100%; min-width: 1280px; background: linear-gradient(180deg, rgba(6,18,44,1) 0%, rgba(6,18,44,1) 64%, rgba(0,0,0,1) 99%, rgba(0,0,0,1) 100%); }
.pao-container{ width: 1280px; margin: 0 auto; box-sizing: border-box; padding: 80px 0 80px 0; position: relative; }





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

}