/*======================================================================== 
	Copyright: 匯豐汽車網路事業
	Author: Shanny
  ========================================================================*/

@media screen, projection{
/*======================================================================== 
	Global
  ========================================================================*/
html{	width:100%;	height:100%;}
body { width: 100%; margin: 0px;
	color: #666; text-decoration: none; font-size: 13px; line-height: 180%;
	font-family: Verdana, 'Times New Roman', Times, Georgia, '微軟正黑體', '新細明體', PMingLiU, '新宋体', NSimSun, serif;
}
h2{ font-size: 36px; line-height: 38px;}
h4{ font-size: 30px; line-height: 32px;}

a:link		{	text-decoration: none;color: #0a318f;}
a:visited	{	text-decoration: none;color: #0a318f;}
a:hover		{	text-decoration: none;color: #54c3f1;}
a:active	{	text-decoration: none;color: #54c3f1;}

.content1240{	width: 1240px; margin: 0 auto; position: relative;}
.content1000{	width: 1000px; margin: 0 auto; position: relative;}
.content1024{ width: 1024px; margin: 0 auto; position: relative;}
.content1280{ width: 1280px; margin: 0 auto; position: relative;}
.content975{ width: 975px; margin: 0 auto; position: relative;}
@media screen and (max-width: 1024px) {
	.content1240,.content1000, .content1024, .content1280,.content975{ width: 100%; padding: 0 15px; box-sizing: border-box;}
}

a.btn_blue{ padding: 15px; background: #3879bb; display: inline-block;
	text-align: center; color: #fff; font-size: 18px;
-webkit-transition:all 200ms ease-out; -mozilla-transition:all 200ms ease-out;
-ms-transition:all 200ms ease-out; -o-transition:all 200ms ease-out; transition:all 200ms ease-out;}
a.btn_blue:hover{ background: #00a1e9;}
a.btn_w{ padding: 15px; background: rgba(255, 255, 255, 1); display: inline-block;
	text-align: center; color: #3879bb; font-size: 18px;
-webkit-transition:all 200ms ease-out; -mozilla-transition:all 200ms ease-out;
-ms-transition:all 200ms ease-out; -o-transition:all 200ms ease-out; transition:all 200ms ease-out;}
a.btn_w:hover{ background: rgba(255, 255, 255, 0.8);}

a.hasTag{ padding: 10px 50px 10px 20px; position: relative; display: inline-block;
  background: #00a1e9; font-weight: normal; color: #fff; font-size: 18px;
-webkit-transition:all 200ms ease-out; -mozilla-transition:all 200ms ease-out;
-ms-transition:all 200ms ease-out; -o-transition:all 200ms ease-out; transition:all 200ms ease-out;}
a.hasTag:after{ content: ""; position: absolute; top: 0; right: 0;
  border-bottom: 50px solid transparent; border-right: 30px solid #397cc3;}
a.hasTag:hover{ background: #fff; color: #00a1e9;}
.hasTag_noMove{ height: 50px; padding: 0 20px; box-sizing: border-box; display: inline-block;
	position: absolute; right: 35px; bottom: -25px;
  background: #00a1e9; font-weight: normal; color: #fff; font-size: 18px; line-height: 50px;}
.hasTag_noMove:after{ content: ""; position: absolute; top: 0; right: -30px;
  border-bottom: 50px solid #00a1e9; border-right: 30px solid transparent;}

a.linkBlue{ padding: 5px 0; margin: 10px 0; display: inline-block;
	color: #3879bb; font-size: 18px; border-bottom: solid 1px #3879bb;}
a.linkW{ padding: 5px 0; margin: 10px 0; display: inline-block;
	color: #fff; font-size: 18px; border-bottom: solid 1px #fff;}

.textWhite{ color: #fff;}


/*======================================================================== 
	Header
  ========================================================================*/
header{ /*max-width: 1240px; margin: 0 auto; */width: 100%;
    margin: 0 auto;
    position: fixed;
    z-index: 999;
    background-color: #fff;}
header div.uk-form {
    margin: 0 auto;
    max-width: 1280px;
}
header .logo{ width: 160px; height: 90px; margin-left: 15px; line-height: 90px; display: inline-block;}
header .mainMenu{ width: calc(100% - 175px); float: right; text-align: right;}
header .mainMenu a{ font-size: 18px;
-webkit-transition:all 200ms ease-out; -mozilla-transition:all 200ms ease-out;
-ms-transition:all 200ms ease-out; -o-transition:all 200ms ease-out; transition:all 200ms ease-out;
}
header .mainMenu .stress{ float: right;}
header .mainMenu .stress a{ width: 60px; height: 90px; padding: 0 10px; margin-left: 5px;
	float: left; box-sizing: border-box; display: flex; font-size: 16px; color: #fff;
	background: #00a1e9; }
header .mainMenu .stress a:hover{ background: #3979bb;}
header .mainMenu .stress a div{ margin: auto; font-weight: normal;
	display: flex; align-items: center; justify-content:center;}
header .mainMenu .stress a img{ width: 20px;}
header .mainMenu .stress a span{ text-align: center;}
header #serachDiv .uk-modal-dialog{ margin-top: 150px;}
header #serachDiv .uk-form-icon{ padding: 30px 0; display: block;}
header #serachDiv .uk-form-icon > [class*='uk-icon-']{ font-size: 24px; margin-top: -12px;}
header #serachDiv input{ border: none; font-size: 24px; padding-left: 40px !important;}

@media screen and (max-width: 1024px) {
	header{ width: 100%; margin: 0 auto; top: 0; }
	header .uk-visible-xlarge,header .forPc{ display: none !important;}
	header .logo{ width: 125px; height: 70px; line-height: 70px;}
	header .mainMenu{ width: calc(100% - 140px);}
	header .mainMenu .stress a{ width: 45px; height: 70px; padding: 0; margin-left: 1px; 
		font-size: 14px;}
  header .mainMenu .stress a.volunteer{ display: none; }
}
@media (min-width: 1024px) and (max-width: 1048px) {
  header{  display: inline-block;}
}
header .mainMenu .forPc{ width: auto; margin-right: 15px; display: inline-block;}
header .mainMenu .forPc > div{ display: inline-block; position: relative;}
header .mainMenu .forPc > div > a{ height: 90px; padding: 0 10px; line-height: 90px;
	display: inline-block; color: #666;}
header .mainMenu .forPc > div > a.active {
  color: #00a1e9;
}
header .mainMenu .forPc > div > a:hover{ color: #00a1e9; background: #f7f7f7;}
header .mainMenu .forPc .uk-dropdown{ padding: 0; margin-top: 0; background: #ebebeb;}
header .mainMenu .forPc .uk-dropdown a{ padding: 10px; margin-top: 1px; display: block;
	background: #00a1e9; color: #fff; font-size: 16px; text-align: left;
}
header .mainMenu .forPc .uk-dropdown a:first-child{ margin-top: 0;}
header .mainMenu .forPc .uk-dropdown a:hover{ background: #3979bb;}

header .forM{ display: none; float: right;}
@media screen and (max-width: 1024px) {
	header .forM{ display: inline-block;}
}

/* 漢堡選單按鈕 */
.burgerBtn{ float: right;}
.burgerBtn > a{ width: 45px; height: 70px; padding: 32px 10px; margin-left: 1px;
  display: block; box-sizing: border-box; background: #00a1e9;
}
.burgerBtn > a span, .burgerBtn > a span:before, .burgerBtn > a span:after{
  width: 25px; height: 4px; background-color: #fff; display: block;
  -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease;
  -ms-transition: all 0.6s ease; -o-transition: all 0.6s ease; transition: all 0.6s ease;
}
.burgerBtn > a span:before, .burgerBtn > a span:after{ content: ''; position: absolute;}
.burgerBtn > a span:before{ margin-top: 10px;}
.burgerBtn > a span:after{ margin-top: -10px;}
.burgerBtn > .change span{ background-color: rgba(0, 0, 0, 0);}
.burgerBtn > .change span:before{
  margin-top: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}
.burgerBtn > .change span:after{
  margin-top: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg);}
/* 漢堡選單展開內容 */
.burgerMenu{ width: 100%; padding: 0; margin: 0; display: none;
  position: absolute; left: 0; background: rgba(9,162,230,0.95); height: calc(100vh - 70px);
}
.burgerMenu .searchBar{ padding: 15px 20px 15px 10px; background: #e5e5e5;}
.burgerMenu .searchBar .uk-form-blank{ width: calc(100% - 25px); margin: 0; font-size: 18px;}
.burgerMenu .searchBar .uk-form-blank:focus{ border: none !important;}
.burgerMenu .searchBar a{ width: 20px; height: 20px; display: inline-block;}
.burgerMenu .searchBar a img{ width: 100%; height: 100%;}
.burgerMenu a{ color: #fff; display: block;
	outline: none; behavior: expression(this.onFocus=this.blur());}
.burgerMenu dl{ padding: 0 20px 110px 20px; overflow-y: auto; overflow-x: hidden; height: calc(100vh - 240px); margin: 0px;}
.burgerMenu dt,.burgerMenu dd{ color: #fff; text-align: left;}
.burgerMenu dt{ margin: 25px 0 15px 0; font-size: 20px;}
.burgerMenu dd{ margin: 0 0 10px 20px;}


/*======================================================================== 
	subMenu
  ========================================================================*/
#subMenu{
	width: 240px;
	margin-left: 10px;
	float: left;
	background-image: url(../images/title_subMenu.gif);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	border: 5px solid #e6e5e5;
}


/*======================================================================== 
	Main Content
  ========================================================================*/



/*======================================================================== 
	Footer
  ========================================================================*/
footer{	width: 100%; padding: 40px 0 30px 0; position: relative; z-index: 5;
	color: #fff; font-size: 15px; background-color: #3879bb;
}
footer .theInfo{ position: relative; }
footer .community{ position: absolute; right: 0; bottom: 0;}
footer .community a{ width: 36px; margin-right: 10px; display: inline-block;
	filter: Alpha(opacity=75); opacity: 0.75;
-webkit-transition:all 200ms ease-out; -mozilla-transition:all 200ms ease-out;
-ms-transition:all 200ms ease-out; -o-transition:all 200ms ease-out; transition:all 200ms ease-out;
}
footer .community a:hover{ filter: Alpha(opacity=100); opacity: 1;}

@media screen and (max-width: 768px) {
	footer .community{ position: relative;}
}
}
.rrs {
  position: absolute;
  bottom: 50px;
  right: 0px;
  width: 325px;
  background-color: #fff;
  overflow: hidden;
  z-index: 11;
  -webkit-box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, 0.5);
  box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, 0.5);
  display: none;
}
.rrsActive {
  display: block;
}
.rrs h2{
  font-size: 22px;
  color: #3879bb;
  padding: 25px;
  border-bottom: 1px solid #d0d0d0;
  position: relative;
}
.rrs a.close{
  position: absolute;
  top: 25px;
  right: 25px;
}
.rrs ul li {
  line-height: 35px;
  position: relative;
}
.rrs ul li label input {
  opacity: 0;
}
.rrs ul li label input+span:after {
  content: '';
  display: block;
  width: 15px;
  height: 15px;
  border: 1px solid #d0d0d0;
  position: absolute;
  top: 10px;
  left: -6px;
}
.rrs ul li label input+span:before {
  content: '';
  display: block;
  width: 11px;
  height: 11px;
  border: 1px solid #fff;
  position: absolute;
  top: 12px;
  left: -4px;
}
.rrs ul li label input[type="checkbox"]:checked+span:before {
  content: '';
  display: block;
  width: 11px;
  height: 11px;
  background-color: #00a1e9; 
  border: 1px solid #fff;
  top: 12px;
  left: -4px;
}
.rrs ul li label span{
  font-size: 16px;
  color: #666666;
  padding-left: 15px;
}
.rrs button {
  width: calc(100% - 50px);
  margin: 0 auto;
  display: block;
  height: 65px;
  background-color: #3879bb;
  color: #fff;
  border: none;
  margin-bottom: 25px;
}
/*======================================================================== 
  mainPic 內頁主圖
  ========================================================================*/
.innerMainPic {  width: 100%;  height: 245px; padding-top: 100px; }

.innerMainPic ul {  margin-top: 30px;  display: inline-block;}

.innerMainPic ul li {  float: left;  border-right: 1px solid #fff;}

.innerMainPic ul li:last-child {  border-right: none;}

.innerMainPic ul li a {  display: block;  font-size: 14px;  color: #fff;  line-height: 16px;  margin: 0px 6px;}

.innerMainPic ul li a.active {  text-decoration: underline;}

.innerMainTitle {  position: absolute;  width: 350px;  top: 47px;  left: 50%;  transform: translateX(-50%);}

.innerMainTitle h2 {  width: 300px;  height: 86px;  margin: 0 auto;  text-indent: -9999px;  background-size: 100%;}

.innerMainTitle p {  font-size: 14px;  line-height: 150%;  color: #fff;  text-align: center; margin: 0px;}
.imgStyle {
  background: url(../images/topImage.png) no-repeat center top;
  background-size: auto 100%;
}
.imgStyle01 {
  background: url(../images/topImage-01.png) no-repeat center top;
  background-size: auto 100%;
}
.imgStyle02 {
  background: url(../images/topImage-02.png) no-repeat center top;
  background-size: auto 100%;
}
.imgStyle03 {
  background: url(../images/topImage-03.png) no-repeat center top;
  background-size: auto 100%;
}
.imgStyle04 {
  background: url(../images/topImage-04.png) no-repeat center top;
  background-size: auto 100%;
}
.imgStyle05 {
  background: url(../images/topImage-05.png) no-repeat center top;
  background-size: auto 100%;
}
@media screen and (max-width: 1024px) {
  .innerMainPic { height: 165px; }

  .innerMainTitle { position: absolute; width: 300px; top: 70px; left: 50%; transform: translateX(-50%);  }

  .innerMainPic ul { margin-top: 17px; padding-left: 0px; }

  .innerMainTitle { width: 240px; }

  .innerMainTitle h2 { padding-left: 0px; width: 240px; height: 58px; }

  .innerMainTitle p { display: none; }
}


 /*重要不可刪除!*/