@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: 500px; background: url(../image/gt__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: 45vw; margin: 10px 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; }





/* ani_05 */
.ani_05_h3--mobile{ font-size:1.25rem; font-weight: normal; text-align:center; }
.ani_05{ margin: -80px 0 0 0; position: relative; }
.ani_05-container{ max-width: 90vw; font-size: 0.75rem; line-height: 1.5em; color: #fff; box-sizing: border-box; padding: 0 0 60px 0; margin: 0 auto; }
/*動畫5*/
.ani_05-box{ display: none; }
.ani_05-box--mobile{ display: flex; flex-direction: column; align-items: center; }
.ani_05-box--mobile>img{ width: 80vw; }





/* 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: #009ade; }
.color02{ color: #0099a8; }
.color03{ color: #7e57c5; }





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

/* header */
header{ width: 100%; min-height: 800px; background: url(../image/gt__header__bg--mobile.jpg) top center no-repeat; background-size: cover; position: relative; overflow: hidden; }
/* ani_05 */
.ani_05_h3--mobile{ font-size:1.625rem; font-weight: normal; text-align:center; }
.ani_05{ margin: 0 0 0 0; position: relative; }
.ani_05-box--mobile{ display: flex; flex-direction: row; align-items: center; }
.ani_05-box--mobile>img{ width: 30vw; }
.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: 900px; background: url(../image/gt__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: 40px 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; }





/* ani */
.ani{  }
.ani{color:#fff;}
.ani h3,.ani h4{ font-weight:400; }
.ani_05_h3--mobile{ display: none; }





/* ani_05 */
.ani_05{ margin: -100px 0 0 0; position: relative; }
.ani_05-container{ max-width: 1280px; font-size: 0.875rem; line-height: 1.5em; color: #fff; box-sizing: border-box; padding: 0 0 60px 0; margin: 0 auto; }
/*動畫5*/
.ani_05-box--mobile{ display: none; }
.ani_05-box{ display: block; }
.ani_05-box h3{ font-size:1.625rem; text-align:center;}
.ani_05-box ul{ display:flex; margin:20px auto 20px; justify-content:center;}
.ani_05-box ul li{ position:relative; }
.ani_05-box ul li + li{ margin-left:-25px; }
.ani_05-box ul li{ width:418px; height:418px; display:flex; justify-content:center; align-items:center; }
.ani_05-box ul li:before{ position:absolute; display:block; top:0; left:0; content:''; width:100%; height:100%; background-size:cover;}
.ani_05-box ul li:nth-of-type(1):before{ background-image:url(../image/rs_ani_05-bg_01.png); }
.ani_05-box ul li:nth-of-type(2):before{ background-image:url(../image/rs_ani_05-bg_02.png); }
.ani_05-box ul li:nth-of-type(3):before{ background-image:url(../image/rs_ani_05-bg_03.png); }
.ani_05-box ul li .text-block{ text-align:center; }
.ani_05-box ul li .text-block h3{ line-height:1; border-bottom:solid 1px; padding:12px 0; margin-bottom:12px;}
.ani_05-box ul li .text-block p{ font-size:1.125rem; }
.ani_05-box ul li:nth-of-type(1) .text-block h3{ color:#f00; }
.ani_05-box ul li:nth-of-type(2) .text-block h3{ color:#ffd200; }
.ani_05-box ul li:nth-of-type(3) .text-block h3{ color:#20c200; }
.ani_05-box ul li{ opacity:1; /* transform:scale(0) translateY(100%); */ }
/* .act.ani_05-box ul li{ opacity:1; transform:scale(1) translateY(0); transition:all 1s cubic-bezier(.38,1.36,.88,1); }
.act.ani_05-box ul li:nth-of-type(2){ transition-delay:.2s; }
.act.ani_05-box ul li:nth-of-type(3){ transition-delay:.3s; }
 */.act.ani_05-box ul li:before{ animation:opacity2Act  .8s  ease-in-out infinite alternate;}
.act.ani_05-box ul li:nth-of-type(2):before{ animation-delay:-.4s; }
.act.ani_05-box ul li:nth-of-type(3):before{ animation-delay:-.3s; }
@keyframes opacity2Act{ from{ opacity:.6; } to{ opacity:1; } }
.ani_05-box ul li .text-block{ opacity:0;  }
.act.ani_05-box ul li .text-block{ opacity:1; transition:all 1.8s cubic-bezier(0,0,.58,1); }
/* .act.ani_05-box ul li:nth-of-type(1) .text-block{ transition-delay:1s; }
.act.ani_05-box ul li:nth-of-type(2) .text-block{ transition-delay:1.2s; }
.act.ani_05-box ul li:nth-of-type(3) .text-block{ transition-delay:1.5s; } */





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





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

}