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





/* news */
.news{ background: #000; }
.news-container{ width: 100%; margin: 0 auto; color: #b8b8b8; font-size: 0.8125rem; line-height: 20px; box-sizing: border-box; padding: 40px 5% 30px 5%;  }
.news-box{}
.news__column{ width: 100%; background: #2e2e2e; position: relative; margin-bottom: 20px;}
.news__column__img{ position: relative; width: 100%; height: auto; line-height: 0;  }
.news__column__img>img{  width: 100%; height: auto; }
.news__column__img>.news__column--hover{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); opacity: 0;  transition: all 0.4s ease-in-out; }
.news__column__img>.news__column--hover a{ display: block; width: 60px; height: 60px; border-radius: 50%; border: 1px solid #fff; font-size: 1rem; color: #fff; text-decoration: none; text-align: center; line-height: 60px; position: absolute; left: 50%; top: 55%; transform: translate(-50%,-50%); transition: all 0.4s ease-in-out; }
.news__column__txt{ box-sizing: border-box; padding: 15px 15px 30px 15px; }
.news__column__tit{ font-size: 1rem; line-height: 25px; color: #fff; }
.news__column__tit:after{ content: ''; display: block; width: 100%; height: 1px; border-bottom: 1px solid #454545; margin: 8px 0; }
.news__column>a{ display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
/* .news__column:hover .news__column--hover{ opacity: 1; }
.news__column:hover .news__column--hover a{ top: 50%; } */
.news__content .header__tit{ width: 150px; height:150px; line-height: 150px; top: 10px; font-size: 1.25em; background-size: 65%; }
.news__content-box{ /* display: flex; */ margin-top: -120px; position: relative;	 }
.news__content__tit{ display: flex; flex-direction:column; justify-content:space-between; width: 100%; /* min-width: 320px; height: 320px; */  background: #343434; box-sizing: border-box; padding: 5%; font-size: 1.25rem; line-height: 30px; color: #fff; }
.news__content__tit__en{ font-size: 1.5rem; color: #424242; margin-top: 20px;	 }
.news__content__tit__date{ font-size: 0.8125rem;	color: #838383; }
.news__content__main{  background: #2e2e2e; box-sizing: border-box; padding: 5%; font-size: 0.875rem; color: #fff; line-height: 1.5rem;	}
.news__content__main img{ max-width: 100%; }
.backbtn{ display: block; font-size: 0.8125rem;	color: #fff;	text-align: center; background:#3499c2; box-sizing: border-box; padding: 5px 15px; margin: 30px auto 0 auto; position: relative; }
.backbtn>a{ display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
.video-box{ width: 100%; height: 0; padding-bottom: 56.25%; position: relative; }
.video-box 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;}
 */
.goto-box>li.gotoback{ display: none; }











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





/* header */
header{ width: 100%; height: 300px; background: url(../image/news__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%); }





/* news */
.news-box{ margin: 0 auto;	  }
.news__column{ width: 48%; background: #2e2e2e; position: relative; margin-bottom: 20px;}
.news__column__img{ position: relative; width: 100%; height: auto; line-height: 0;  }
.news__column__img>img{  width: 100%; height: auto; }
.news__column__img>.news__column--hover{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); opacity: 0;  transition: all 0.4s ease-in-out; }
.news__column__img>.news__column--hover a{ display: block; width: 60px; height: 60px; border-radius: 50%; border: 1px solid #fff; font-size: 1rem; color: #fff; text-decoration: none; text-align: center; line-height: 60px; position: absolute; left: 50%; top: 55%; transform: translate(-50%,-50%); transition: all 0.4s ease-in-out; }
.news__column__txt{ box-sizing: border-box; padding: 15px 15px 30px 15px; }
.news__column__tit{ font-size: 1rem; line-height: 25px; color: #fff; }
.news__column__tit:after{ content: ''; display: block; width: 100%; height: 1px; border-bottom: 1px solid #454545; margin: 8px 0; }
.news__column>a{ display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
.news__column:hover .news__column--hover{ opacity: 1; }
.news__column:hover .news__column--hover a{ top: 50%; }
.grid-size{ width: 100%; }
.gutter-sizer{ width: 1%; }




}



/* 橫的版型 */
@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 */
header{ width: 100%; min-width: 1280px; height: 600px; background: url(../image/news__header__bg.jpg) top center no-repeat; background-size: cover; position: relative; overflow: hidden; /* max-width: 1600px; margin: 0 auto; */ }
.header__shadow{ 
	width: 100%; height: 288px;	position: absolute;	left: 0; top: 0; 
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+54,000000+100&1+0,0+100 */
	background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 40%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 40%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}
.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; */ top: 218px; transform: translateX(-50%); }
/* search-box */
.search-box{ margin: 1px auto 0 auto;  }





/* news */
.news{ background: #000; }
.news-container{ width: 1280px; margin: 0 auto; color: #b8b8b8; font-size: 0.875rem; line-height: 20px; box-sizing: border-box; padding: 10px 0 50px 0;  }
.news-box{}
.news__column{ width: 299px; background: #2e2e2e; position: relative; margin-bottom: 30px;}
.news__column__img{ position: relative; width: 100%; height: auto; line-height: 0;  }
.news__column__img>img{  width: 100%; height: auto; }
.news__column__img>.news__column--hover{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); opacity: 0;  transition: all 0.4s ease-in-out; }
.news__column__img>.news__column--hover a{ display: block; width: 60px; height: 60px; border-radius: 50%; border: 1px solid #fff; font-size: 1rem; color: #fff; text-decoration: none; text-align: center; line-height: 60px; position: absolute; left: 50%; top: 55%; transform: translate(-50%,-50%); transition: all 0.4s ease-in-out; }
.news__column__txt{ box-sizing: border-box; padding: 15px 15px 30px 15px; }
.news__column__tit{ font-size: 1.25rem; line-height: 25px; color: #fff; }
.news__column__tit:after{ content: ''; display: block; width: 100%; height: 1px; border-bottom: 1px solid #454545; margin: 12px 0; }
.news__column>a{ display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
.news__column:hover .news__column--hover{ opacity: 1; }
.news__column:hover .news__column--hover a{ top: 50%; }
.news__content .header__tit{ width: 208px; height: 208px; line-height: 208px; top: 105px; font-size: 1.25em; background-size: 65%; }
.news__content-box{ display: flex;/*  margin-top: -320px; */  margin-top: -270px; position: relative;	 }
.news__content__tit{ display: flex; flex-direction:column; justify-content:space-between; width: 320px; min-width: 320px; height: 320px; background: #343434; box-sizing: border-box; padding: 50px 25px 50px 25px; font-size: 1.625rem; line-height: 30px; color: #fff; }
.news__content__tit__en{ font-size: 1.375rem; color: #424242; }
.news__content__tit__date{ font-size: 0.875rem;	color: #838383; }
.news__content__main{  background: #2e2e2e; box-sizing: border-box; padding: 50px; font-size: 1rem; color: #fff; line-height: 25px;	}
.news__content__main img{ max-width: 100%; }
.backbtn{ display: block; font-size: 0.8125rem;	color: #fff;	text-align: center; background:#3499c2; box-sizing: border-box; padding: 5px 15px; margin: 40px auto 0 auto; position: relative; }
.backbtn>a{ display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
.backbtn:hover{ background: rgba(196, 157, 85, 1); color: #fff; }
.video-box{ width: 100%; height: 0; padding-bottom: 56.25%; position: relative; }
.video-box 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; }
.goto-box>li.gotoback{ display: block; width: 68px; height: 65px; background: url(../../image/btn__gotoback.png); background-position: 0 0; position: relative;	}
.goto-box>li.gotoback>a{ width: 100%; height: 100%; position: absolute; left: 0; top: 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/news__header__bg.jpg) top center no-repeat; background-size: cover; position: relative; overflow: hidden; }
.header-container{ max-width: 1280px; margin: 0 auto; position: relative;   }
}