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





/* knowledge */
.knowledge{ background: #000; }
.knowledge-container{ width: 100%; margin: 0 auto; color: #b8b8b8; font-size: 0.8125rem; line-height: 20px; box-sizing: border-box; padding: 40px 5% 30px 5%;  }
.knowledge-box{ }
.knowledge-box>li{ background: #333; width: 100%; height: auto; position: relative; box-sizing: border-box; padding: 40px 25px 40px 25px;}
.knowledge-box>li:nth-child(even){ background: #2c2c2c; }
.knowledge-box>li>a{ display: block; width: 100%; height: 100%; position: absolute;	left: 0; top: 0; transition: all 0.4s ease-in-out; }
.knowledge-box>li:hover a{ width: calc( 100% - 2px); height: calc( 100% - 2px);  border: 1px solid #3499c2; }
.knowledge-box .bgcolor--light{ background: #333; }
.knowledge-box .bgcolor--dark{ background: #2c2c2c; }
.knowledge__column__tit{ font-size: 1.625rem; line-height: 2rem; color: #fff; }
.knowledge__column__en{	font-size: 1.375rem; color: #555; line-height: 25px;	}
.knowledge__column__line{ display: block; margin: 15px 0 5px 0; width: 100%;	 }
.knowledge__content .header__tit{  width: 150px; height:150px; line-height: 150px; top: 10px; font-size: 1.25em; background-size: 65%;  }
.knowledge__content-box{ margin-top: -120px; position: relative; }
.knowledge__content__tit{ display: flex; flex-direction:column; width: 100%; background: #343434; box-sizing: border-box; padding: 5% 5% 20% 5%; font-size: 1.25rem; line-height: 1.5rem; color: #fff; position: relative; }
.knowledge__content__tit>p:first-child:after{ content: ''; display: block; width: 100%; height: 1px; border-bottom: 1px solid #5a5a5a; margin: 10px 0; }
.knowledge__content__tit__en{ font-size: 1.375rem; line-height: 25px; color: #424242; }
.knowledge__contet__arrow{ display: flex; justify-content: space-between; width: calc( 100% - 50px); position: absolute; bottom: 15px; }
.knowledge__contet__arrow>li{ width: 32px; height: 16px; background: url(../image/knowledge__arrow.png) no-repeat; cursor: pointer;}
.knowledge__contet__arrow>li:first-child{ background-position: 0 0; }
.knowledge__contet__arrow>li:last-child{ background-position: -33px 0; }
.knowledge__contet__arrow>li:first-child:hover{ background-position: 0 -16px; }
.knowledge__contet__arrow>li:last-child:hover{ background-position: -33px -16px; }
.knowledge__content__main{  background: #2e2e2e; box-sizing: border-box; padding: 5%; font-size: 0.875rem; color: #fff; line-height: 1.5rem; }
.knowledge__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; }
.goto-box>li.gotoback{ display: none; }




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





/* knowledge */
.knowledge{ background: #000; }
.knowledge-container{ padding: 0px 5% 30px 5%; }
.knowledge-box{ margin: 0 auto; }
.knowledge-box{ display: flex; flex-wrap: wrap; }
.knowledge-box>li{ background: #333; width: 33%; height: 33vw; position: relative; box-sizing: border-box; padding: 80px 25px 0 25px;}
.knowledge-box>li:nth-child(even){ background: #2c2c2c; }
.knowledge-box>li>a{ display: block; width: 100%; height: 100%; position: absolute;	left: 0; top: 0; transition: all 0.4s ease-in-out; }
.knowledge-box>li:hover a{ width: calc( 100% - 2px); height: calc( 100% - 2px);  border: 1px solid #3499c2; }
.knowledge__column{ }
.knowledge__column__tit{ font-size: 1.125rem; color: #fff; }
.knowledge__column__en{	font-size: 1.25rem; color: #555; line-height: 1.5rem;	}
.knowledge__column__line{ display: block; margin: 10px 0 3px 0; }
.knowledge__content__tit{ padding: 5% 5% 10% 5%; }

.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/knowledge__header__bg.jpg) top center no-repeat; background-size: cover; position: relative; overflow: hidden; }
.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;  }





/* nav__submenu */
.nav__submenu>li{ min-width: 20%; height: 50px; line-height: 50px; background: rgba(255,255,255,0.9); text-align: center; font-size: 1.125rem; position: relative; margin: 0 1px 0 0; transition: all 0.3s cubic-bezier(.25,.1,.25,1); }
.nav__submenu>li:last-child{ min-width: calc(20% - 4px ); }





/* knowledge */
.knowledge{ background: #000; }
.knowledge-container{ width: 1280px; margin: 0 auto; color: #b8b8b8; font-size: 0.875rem; line-height: 20px; box-sizing: border-box; padding: 10px 0 50px 0;  }
.knowledge-box{ display: flex; flex-wrap: wrap; }
.knowledge-box>li{ background: #333; width: 320px; height: 320px; position: relative; box-sizing: border-box; padding: 130px 25px 0 25px;}
.knowledge-box>li:nth-child(even){ background: #333; }
.knowledge-box>li:nth-child(2),.knowledge-box>li:nth-child(4),.knowledge-box>li:nth-child(5),.knowledge-box>li:nth-child(7),.knowledge-box>li:nth-child(10){ background: #2c2c2c; }
.knowledge-box>li>a{ display: block; width: 100%; height: 100%; position: absolute;	left: 0; top: 0; transition: all 0.4s ease-in-out; }
.knowledge-box>li:hover a{ width: calc( 100% - 2px); height: calc( 100% - 2px);  border: 1px solid #3499c2; }
.knowledge__column{ }
.knowledge__column__tit{ font-size: 1.625rem; color: #fff; }
.knowledge__column__en{	font-size: 1.375rem; color: #555; line-height: 28px;	}
.knowledge__column__line{ display: block; margin: 15px 0 5px 0; }
.knowledge__content .header__tit{ width: 208px; height: 208px; line-height: 208px; top: 105px; font-size: 1.25em; background-size: 65%; }
.knowledge__content-box{ display: flex; /* margin-top: -320px; */ margin-top: -270px; position: relative;	flex-wrap: wrap; }
.knowledge__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; position: relative; }
.knowledge__content__tit>p:first-child:after{ content: ''; display: block; width: 100%; height: 1px; border-bottom: 1px solid #5a5a5a; margin: 10px 0; }
.knowledge__content__tit__en{ font-size: 1.375rem; line-height: 25px; color: #424242; }
.knowledge__contet__arrow{ display: flex; justify-content: space-between; width: calc( 100% - 50px); position: absolute; bottom: 15px; }
.knowledge__contet__arrow>li{ width: 32px; height: 16px; background: url(../image/knowledge__arrow.png) no-repeat; cursor: pointer;}
.knowledge__contet__arrow>li:first-child{ background-position: 0 0; }
.knowledge__contet__arrow>li:last-child{ background-position: -33px 0; }
.knowledge__contet__arrow>li:first-child:hover{ background-position: 0 -16px; }
.knowledge__contet__arrow>li:last-child:hover{ background-position: -33px -16px; }
.knowledge__content__main{  width: 960px; background: #2e2e2e; box-sizing: border-box; padding: 50px; font-size: 1rem; color: #fff; line-height: 25px;	}
.knowledge__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; }




/* 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/knowledge__header__bg.jpg) top center no-repeat; background-size: cover; position: relative; overflow: hidden; }
.header-container{ max-width: 1280px; margin: 0 auto; position: relative;   }
}