@charset "utf-8";
/*
  danny 201707
  1. $Reset
  2. $body,html
  3. $共用
  4. $Mobile
  5. $Pc
*/





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





/* header */
header{ width: 100%; height: 250px; background: url(../image/info__header__bg.jpg) top center no-repeat; background-size: cover; position: relative; overflow: hidden;  }
/* header__tit */
.header__tit{ width: 45vw; height: 45vw; line-height: 45vw; font-size: 1.25rem; color: #fff; text-align: center;  background: url(../image/header__tit__bg.png) no-repeat center center rgba(52,153,194,0.8); background-size: 60%; border-radius: 50%; position: absolute; left: 50%; top: 25px; transform: translateX(-50%); }
/* search-box */
/* .search-box{ margin: 1px auto 0 auto;  } */





/* info__understand */
.info__understand{ }
.info__understand-container{ width: 100%; margin: 0 auto; color: #252525; font-size: 0.875rem; line-height: 1.5rem; box-sizing: border-box; padding: 40px 5% 50px 5%; }
.info__understand-container h5{ font-size: 1.25rem; color: #5c5c5c; text-align: center; font-weight: normal; margin-bottom: 20px; }
.info__understand__pic{ display: flex; flex-wrap: wrap; margin-top: 20px; justify-content: center;  }
.info__understand__pic li{ width: 80vw; height: 80vw; margin: 0 0 20px 0; }
.info__understand__pic li>img{ width: 100%; height: auto; }





/* info__history */
.info__history__header{ width: 100%; min-width: 100%; height: 250px; background: url(../image/info__history__header__bg.jpg); background-size: cover; position: relative; }
.info__history__header .header__tit{ top: 50%; transform: translate(-50%,-50%); }
.info__history{ width: 100%; min-width: 100%; background: url(../image/info__history__bg.jpg); background-size: cover; }
.info__history-container{ width: 100%; margin: 0 auto; box-sizing: border-box; padding: 40px 5% 50px 5%; }
.info__history__list{ width: 100%; margin: 0 auto; display: flex; flex-direction:column; font-size: 0.8125rem; line-height: 1.5rem; color: #545454; }
.info__history__list>li{ width: 100%; height: 70px; position: relative;  box-sizing: border-box; padding: 0 0 0 0; margin-bottom: 20px; display: flex; flex-direction: column; justify-content: flex-end; align-self: flex-start; box-sizing: border-box; padding: 0 0 12px 70px; }
.info__history__list__line{ width: calc(100% - 35px); height: 1px; box-sizing: border-box; border-bottom: 1px solid #87cbe4; position: absolute; bottom:0; right: 0; }
.info__history__list__year{ width: 60px; height: 60px; background: #a3e4fe; font-family: 'Open Sans', sans-serif; font-size: 1.25rem; color: #fff; text-align: center; line-height: 60px; border-radius: 50%; position: absolute; bottom: 0; left: 0; }
.info__history__list>li:nth-child(2) .info__history__list__year{ background: #98daf3; }
.info__history__list>li:nth-child(3) .info__history__list__year{ background: #87cbe4; }
.info__history__list>li:nth-child(4) .info__history__list__year{ background: #76bbd4; }
.info__history__list>li:nth-child(5) .info__history__list__year{ background: #62a7c2; }
.info__history__list>li:nth-child(6) .info__history__list__year{ background: #549ab5; }
.info__history__list>li:nth-child(7) .info__history__list__year{ background: #4189a5; }
.info__history__list>li:nth-child(8) .info__history__list__year{ background: #2e7893; }
.info__history__list>li:nth-child(9) .info__history__list__year{ background: #216c87; }
.info__history__list>li:nth-child(10) .info__history__list__year{ background: #17627e; }
.info__history__list>li:nth-child(11) .info__history__list__year{ background: #17627e; }
.info__history__list>li:nth-child(12) .info__history__list__year{ background: #075877; }
.info__history-container .video-box{ width: 100%; margin: 20px 0 0 0;  }
.video-box>img{ width: 100%; height: auto; }





/* info__concept */
.info__concept__header{ width: 100%; min-width: 100%; height: 250px; background: url(../image/info__concept__header__bg.jpg); background-size: cover; position: relative; }
.info__concept__header .header__tit{ top: 50%; transform: translate(-50%,-50%); }
.info__concept{ width: 100%; min-width: 100%; box-sizing: border-box; padding: 30px 5% 50px 5%; }
.info__concept-container{  box-sizing: border-box; font-size: 0.875rem; color: #252525; line-height: 1.5rem; }
.info__concept__txt{ width: 100%; }
.info__concept-container .video-box{ margin-top: 20px;}





/* info__field */
.info__field__header{ width: 100%; min-width: 100%; height: 250px; background: url(../image/info__field__header__bg.jpg); background-size: cover; position: relative; }
.info__field__header .header__tit{ top: 50%; transform: translate(-50%,-50%); }
.info__field{ width: 100%; min-width: 100%; }
.info__field-container{ width: 100%; margin: 0 auto; box-sizing: border-box; padding: 30px 5% 50px 5%; font-size: 0.875rem; color: #252525; line-height: 1.5rem; }
.info__field__txt{ display: flex;flex-wrap: wrap;  width: 100%; margin: 0 auto; font-size: 0.875rem; color: #2e2e2e; line-height: 1.5rem;  }
.info__field__txt>li{ width: 100%; height: 415px; }
.txt__tit{ font-size: 1.25rem; color: #3499c2; text-align: center; }
.txt__tit:after{ content: ''; display: block; height: 1px; border-bottom: 1px solid #d5d5d5; margin: 10px 0; }
.info__field__txt>li>ul{ list-style: disc; margin-left: 20px; }
.info__field__txt>li>ul>li{ margin-bottom: 10px; }
.info__field__txt>li{ border-bottom: 1px solid #d5d5d5; margin-bottom: 40px; }
.info__field__txt>li:nth-child(1){ background: url(../image/info__field__txt__img01.jpg) bottom left no-repeat; background-size: 100%; }
.info__field__txt>li:nth-child(2){ background: url(../image/info__field__txt__img02.jpg) bottom left no-repeat; background-size: 100%; }
.info__field__txt>li:nth-child(3){ background: url(../image/info__field__txt__img03.jpg) bottom left no-repeat; background-size: 100%; height: 280px; margin-bottom: 0;}
.info__field-container .video-box{  margin: 30px 0 0 0; }





/* info__global */
.info__global__header{ width: 100%; min-width: 100%; height: 250px; background: url(../image/info__global__header__bg.jpg); background-size: cover; position: relative; }
.info__global__header .header__tit{ top: 50%; transform: translate(-50%,-50%); }
.info__global{ width: 100%; min-width: 100%; }
.info__global-container{ width: 100%; margin: 0 auto; box-sizing: border-box; padding: 30px 5% 40px 5%; font-size: 0.875rem; color: #252525; line-height: 30px; }
.info__global__txt{ width: 100%; margin: 0 auto; }
.global__map{ display: block;  margin: 20px auto 0 auto; width: 100%; height: auto; }
.info__global-container .video-box{  margin: 30px 0 0 0; }





/* video */
.video{ width: 100%; height: 100%; background: rgba(0,0,0,0.9); position: fixed; left: 0; top: 0; z-index: 9999; /* display: none; */ }
.video__closebtn{ display:block; position: fixed; right: 15px; top: 15px;  }
.video__closebtn:after{ content: '\e870'; display: inline-block; color: #fff; font-size: 1.5rem; }
.video-container{ width: 90%; height:0; /*padding-bottom:56.25%;*/ padding-bottom:50.625%; position:relative; top:50%; left: 50%; transform: translate(-50%,-50%); }
.video-container iframe{ width: 100%; height: 100%; position: absolute; left:0; top:0; }





/* gototop */
/* .goto-box>li.gotosearch{ display: none; } */
/* .goto-box>li.gototop{ width: 50px; height: 50px; line-height: 50px; color: #fff; font-size: 1rem; text-align: center;  background: none; background: #dfdfdf; border-radius: 50%; text-indent: 0;}
 */












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





/* header */
header{ width: 100%; height: 300px; background: url(../image/info__header__bg.jpg) top center no-repeat; background-size: cover; position: relative; overflow: hidden;  }
/* header__tit */
.header__tit{ width: 20vw; height: 20vw; line-height: 20vw; font-size: 1.25rem; color: #fff; text-align: center;  background: url(../image/header__tit__bg.png) no-repeat center center rgba(52,153,194,0.8); background-size: 60%; border-radius: 50%; position: absolute; left: 50%; top: 70px; transform: translateX(-50%); }





/* info__understand */
.info__understand__pic{ justify-content: space-between; }
.info__understand__pic li{ width: 29vw; height: 29vw; }




/* info__field */
.info__field__header{ width: 100%; min-width: 100%; height: 250px; background: url(../image/info__field__header__bg.jpg); background-size: cover; position: relative; }
.info__field__header .header__tit{ top: 50%; transform: translate(-50%,-50%); }
.info__field{ width: 100%; min-width: 100%; }
.info__field-container{ width: 100%; margin: 0 auto; box-sizing: border-box; padding: 30px 5% 50px 5%; font-size: 0.875rem; color: #252525; line-height: 1.5rem; }
.info__field__txt{ display: flex;flex-wrap: wrap;  width: 100%; margin: 0 auto; font-size: 0.875rem; color: #2e2e2e; line-height: 1.5rem;  }
.info__field__txt>li{ width: 100%; height: 400px; }
.txt__tit{ font-size: 1.25rem; color: #3499c2; text-align: center; }
.txt__tit:after{ content: ''; display: block; height: 1px; border-bottom: 1px solid #d5d5d5; margin: 10px 0; }
.info__field__txt>li>ul{ list-style: disc; margin-left: 20px; }
.info__field__txt>li>ul>li{ margin-bottom: 10px; }
.info__field__txt>li{ border-bottom: 1px solid #d5d5d5; margin-bottom: 40px; }
.info__field__txt>li:nth-child(1){ background: url(../image/info__field__txt__img01.jpg) bottom left no-repeat; background-size: 320px; }
.info__field__txt>li:nth-child(2){ background: url(../image/info__field__txt__img02.jpg) bottom left no-repeat; background-size: 320px; height: 330px;}
.info__field__txt>li:nth-child(3){ background: url(../image/info__field__txt__img03.jpg) bottom left no-repeat; background-size: 320px; height: 220px; margin-bottom: 0;}
.info__field-container .video-box{  margin: 30px 0 0 0; }




}



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




/* header */
header{ min-height: 300px;   }
.header-container button{ top: 95px; }
}





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





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






/* header__submenu */
/*.header__submenu>li{ min-width: 33%; }
.header__submenu>li:last-child{ min-width: calc(34% - 2px ); }*/





/* header */
header{ width: 100%; min-width: 1280px; height: 600px; background: url(../image/info__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__tit */
.header__tit{ width: 296px; height: 296px; line-height: 296px; font-size: 1.875rem; color: #fff; text-align: center;  background: url(../image/header__tit__bg.png) no-repeat center center rgba(52,153,194,0.8); border-radius: 50%; position: absolute; left: 50%; top: 240px; transform: translateX(-50%); }
/* search-box */
.search-box{ margin: 1px auto 0 auto;  }





/* info__understand */
.info__understand{ }
.info__understand-container{ width: 1160px; margin: 0 auto; color: #252525; font-size: 1.125rem; line-height: 30px; box-sizing: border-box; padding: 60px 0 135px 0; }
.info__understand-container h5{ font-size: 1.25rem; color: #5c5c5c; text-align: center; font-weight: normal; margin-bottom: 40px; }
.info__understand__pic{ display: flex; align-items: center; justify-content: space-between; margin-top: 60px; }
.info__understand__pic li{ width: 361px; height: 361px; }
.info__understand__pic li>img{ width: 100%; height: auto; }





/* info__history */
.info__history__header{ width: 100%; min-width: 1280px; height: 500px; background: url(../image/info__history__header__bg.jpg); background-size: cover; position: relative; }
.info__history__header .header__tit{ top: 50%; transform: translate(-50%,-50%); }
.info__history{ width: 100%; min-width: 1280px; background: url(../image/info__history__bg.jpg); background-size: cover; }
.info__history-container{ width: 1280px; margin: 0 auto; box-sizing: border-box; padding: 100px 0 160px 0; }
.info__history__list{ width: 1060px; margin: 0 auto; display: flex; flex-direction:column; font-size: 1.125rem; line-height: 30px; color: #545454; }
.info__history__list>li{ width: 565px; height: 70px; position: relative;  box-sizing: border-box; padding: 0 0 0 0; margin-bottom: 20px; display: flex; flex-direction: column; justify-content: flex-end; box-sizing: border-box; padding: 0 0 10px 0; }
.info__history__list__line{ width: 530px; height: 1px; box-sizing: border-box; border-bottom: 1px solid #87cbe4; position: absolute; bottom:0; }
.info__history__list__year{ width: 70px; height: 70px; background: #a3e4fe; font-family: 'Open Sans', sans-serif; font-size: 1.25rem; color: #fff; text-align: center; line-height: 70px; border-radius: 50%; position: absolute; top: 0; }
.info__history__list>li:nth-child(odd){ padding-left: 0px; align-self: flex-start; }
.info__history__list>li:nth-child(even){ padding-left: 100px; align-self: flex-end; }
.info__history__list>li:nth-child(odd) .info__history__list__year{ right: 0; left: auto; }
.info__history__list>li:nth-child(even) .info__history__list__year{ left: 0; }
.info__history__list>li:nth-child(odd) .info__history__list__line{ left: 0; }
.info__history__list>li:nth-child(even) .info__history__list__line{ right: 0; }
.info__history__list>li:nth-child(2) .info__history__list__year{ background: #98daf3; }
.info__history__list>li:nth-child(3) .info__history__list__year{ background: #87cbe4; }
.info__history__list>li:nth-child(4) .info__history__list__year{ background: #76bbd4; }
.info__history__list>li:nth-child(5) .info__history__list__year{ background: #62a7c2; }
.info__history__list>li:nth-child(6) .info__history__list__year{ background: #549ab5; }
.info__history__list>li:nth-child(7) .info__history__list__year{ background: #4189a5; }
.info__history__list>li:nth-child(8) .info__history__list__year{ background: #2e7893; }
.info__history__list>li:nth-child(9) .info__history__list__year{ background: #216c87; }
.info__history__list>li:nth-child(10) .info__history__list__year{ background: #17627e; }
.info__history__list>li:nth-child(11) .info__history__list__year{ background: #17627e; }
.info__history__list>li:nth-child(12) .info__history__list__year{ background: #075877; }
.info__history-container .video-box{ display: flex; justify-content: center; margin: 70px 0 0 0; }
.video-box>img{ width: auto; height: auto; }





/* info__concept */
.info__concept__header{ width: 100%; min-width: 1280px; height: 500px; background: url(../image/info__concept__header__bg.jpg); background-size: cover; position: relative; }
.info__concept__header .header__tit{ top: 50%; transform: translate(-50%,-50%); }
.info__concept{ width: 100%; min-width: 1280px; }
.info__concept-container{ display: flex; justify-content: space-between; width: 1280px; margin: 0 auto; box-sizing: border-box; padding: 60px 0 160px 0; font-size: 1.125rem; color: #252525; line-height: 30px; }
.info__concept__txt{ /* width: 420px; */ width: auto; }
.info__concept-container .video-box{ display: flex; justify-content: center; margin-top: 0; }





/* info__field */
.info__field__header{ width: 100%; min-width: 1280px; height: 500px; background: url(../image/info__field__header__bg.jpg); background-size: cover; position: relative; }
.info__field__header .header__tit{ top: 50%; transform: translate(-50%,-50%); }
.info__field{ width: 100%; min-width: 1280px; }
.info__field-container{ width: 1280px; margin: 0 auto; box-sizing: border-box; padding: 60px 0 160px 0; font-size: 1.125rem; color: #252525; line-height: 30px; }
.info__field__txt{ display: flex; justify-content: space-between; width: 1200px; margin: 0 auto; font-size: 1.125rem; color: #2e2e2e; line-height: 26px;  }
.info__field__txt>li{ width: 330px; height: 450px; }
.txt__tit{ font-size: 1.25rem; color: #3499c2; text-align: center; }
.txt__tit:after{ content: ''; display: block; height: 1px; border-bottom: 1px solid #d5d5d5; margin: 15px 0; }
.info__field__txt>li>ul{ list-style: disc; margin-left: 20px; }
.info__field__txt>li>ul>li{ margin-bottom: 10px; }
.info__field__txt>li{ border-bottom: 1px solid #d5d5d5; }
.info__field__txt>li:nth-child(1){ background: url(../image/info__field__txt__img01.jpg) bottom left no-repeat; }
.info__field__txt>li:nth-child(2){ background: url(../image/info__field__txt__img02.jpg) bottom left no-repeat; }
.info__field__txt>li:nth-child(3){ background: url(../image/info__field__txt__img03.jpg) bottom left no-repeat; height: 450px; }
.info__field-container .video-box{ display: flex; justify-content: center; margin: 80px 0 0 0; }





/* info__global */
.info__global__header{ width: 100%; min-width: 1280px; height: 500px; background: url(../image/info__global__header__bg.jpg); background-size: cover; position: relative; }
.info__global__header .header__tit{ top: 50%; transform: translate(-50%,-50%); }
.info__global{ width: 100%; min-width: 1280px; }
.info__global-container{ width: 1280px; margin: 0 auto; box-sizing: border-box; padding: 60px 0 160px 0; font-size: 1.125rem; color: #252525; line-height: 30px; }
.info__global__txt{ width: 1130px; margin: 0 auto; }
.global__map{ display: block;  margin: 60px auto 0 auto; width: auto; }
.info__global-container .video-box{ display: flex; justify-content: center; margin: 80px 0 0 0; }





/* video */
.video{ width: 100%; height: 100%; background: rgba(0,0,0,0.95); position: fixed; left: 0; top: 0; z-index: 9999; /* display: none; */ }
.video__closebtn{ display:block; position: fixed; right: 15px; top: 15px; cursor: pointer; color: #fff; font-size: 2rem; }
.video__closebtn:after{ content: '\e870'; display: inline-block; }
.video__closebtn:hover { color: #409bc0; }
.video-container{ width: 80%; height:0;  padding-bottom:45%; position:relative; top:50%; left: 50%; transform: translate(-50%,-50%); }
.video-container iframe{ width: 100%; height: 100%; position: absolute; left:0; top:0; }





/* gototop */
.goto-box>li.gotosearch{ 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: 600px; background: url(../image/info__header__bg.jpg) top center no-repeat; background-size: cover; position: relative; overflow: hidden; }
.header-container{ max-width: 1280px; margin: 0 auto; position: relative;   }
}