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

@media screen, projection{
/*======================================================================== 
	Global
  ========================================================================*/
html{	width: 100%; height:100%;}
body {
	color: #666;
	text-decoration: none;
	font-family: "微軟正黑體", Verdana, Times, Georgia, PMingLiU, '新宋体', NSimSun, serif;
	font-size: 63%;
	line-height: 170%;
	margin: 0;
	width: 100%;
}

a:link		{	text-decoration: none; color: #22548d;}
a:visited	{	text-decoration: none; color: #22548d;}
a:hover		{	text-decoration: none; color: #000;}
a:active	{	text-decoration: none; color: #22548d;}

hr{ border-top: dotted 1px #aaa;}
hr.lineSolid{ border-top: solid 1px #e5e5e5;}

#wrapper{	width: 100%; min-width: 1035px;	height: auto; box-sizing: border-box;
  padding-right: 35px; clear: both;}

#quickLink{ width: 35px; height: 100%; background: #17345e; position: fixed;
  z-index: 50; right: 0; top: 0; font-size: 12px; line-height: 150%;}
@media screen and (max-width: 1035px) {
	#quickLink{ display: none;}
  .header-right-uship-animation {right: 0px !important;}
}
#quickLink a,#quickLink a:hover{ color: #fff;}
#quickLink a span { display: inline-block; text-align: center; margin: 0;
  min-height: 35px; width: 35px;
  background-image: url(../images/icon/quickLink.png); background-repeat: no-repeat;}
#quickLink a span:hover { background-color: #00a6e9;}
#quickLink .w6 + .tooltip > .tooltip-inner{ width: 102px;}
#quickLink .w9 + .tooltip > .tooltip-inner{ width: 138px;}
#quickLink a span.ushipTooltipConf {background-image: url(/images/upload/uship_tooltip_icon.png);}

.mainContent{	width: 1000px; margin: 0 auto; font-size: 13px; overflow: hidden;}
.rightContent{ width: 785px; margin-left: 215px; line-height: 150%; overflow: hidden;}
.leftContent{ width: 200px; margin-right: 15px; float: left;}
.pagePicDiv{ box-sizing: border-box; width: 100%; min-width: 1035px; height: 150px; padding-right: 35px;
	background-repeat: no-repeat; 
	background-position: center center;}
.pagePicDiv h2{ margin: 0 auto; width: 1000px; text-align: right;
  color: #fff; font-size: 36px; font-weight: normal; line-height: 150px; letter-spacing: 0.5em;}

.route{ box-sizing: border-box; border-bottom: solid 1px #d9d9d9;
  padding: 7px 5px 5px 20px; padding: 10px 5px 10px 20px\0; margin-bottom: 20px;
	background-image: url(../images/icon/home.gif); background-repeat: no-repeat; background-position: left center;}

.goto{
	margin: 10px 0;
	padding: 5px;
  text-align: center;
	border-top: 3px solid #cbd8e4;
  line-height: 150%;
  clear: both;
}
.goto a{ border: solid 1px #7a9dbe; display: inline-block; padding: 0 6px; padding-bottom: 2px\0; margin: 10px 2px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
.goto a:hover,.goto a.sel{ background-color: #7a9dbe; color: #fff;}
.goto .goLeft,.goto .goRight,.goto .goTop{
	background-repeat: no-repeat;
	font-weight: bolder;
  border: none;
}
.goto .goLeft:hover,.goto .goRight:hover,.goto .goTop:hover{ background-color: rgba(0,0,0,0); color: #7a9dbe;}
.goto .goLeft{
  background-image: url(../images/icon/goLeft.gif);
  background-position: 0 center;
  margin-right: 30px;
  padding-left: 25px;
}
.goto .goRight{
	background-image: url(../images/icon/goRight.gif);
	background-position: right center;
	margin-left: 30px;
	padding-right: 25px;
}
.goto .goTop{
  background-image: url(../images/icon/goTop.gif);
  background-position: 0 center;
  margin-right: 0;
  padding-left: 25px;
}

.putCenter{	text-align: center;}
.putRight{	text-align: right;}
.putLeft {width:100%; height:auto; display:inline-block;}

/* 按鈕樣式 */
.ghostBtn{ display: inline-block; padding: 7px 10px; font-size: 16px; line-height: 150%;
	border: solid 1px #8ba4c1; border-bottom-width: 3px;}
.ghostBtn:hover{ background: #fff; color: #22548d;}

.btn_org:link{ background: #999; padding: 2px 5px; padding: 0 5px 3px 5px\0; color: #fff;
	-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; display: inline-block;}
.btn_org:visited	{	background: #999; color: #fff;}
.btn_org:hover{ background: #e37216; color: #fff;}
.btn_org:active{ background: #999; color: #fff;}


/* Bootstrap 表單修改 */
.form-group{ font-size: 14px;}
.btn-lg{ -webkit-box-shadow: 0 3px 0 0 rgba(0,0,0,0.25); box-shadow: 0 3px 0 0 rgba(0,0,0,0.25);}


/*======================================================================== 
	Header
  ========================================================================*/
.site-header-container {min-width: 1035px;}
body.index .site-header-container {background-color: #17345e;}
.header-container { width: 1010px; height: 100px; margin: 0 auto;}
.header-left-section {float: left; width: 510px; height: 100px;}
.header-right-section {float: right;width: 500px; height: 100px;}
.header-left-upper-section {width: 100%; height: 50px;}
.header-ucf-logo-section {float: left; width: 224px; height: 41px; margin-top: 9px; background-repeat: no-repeat; background-image: url(/images/logo.gif);}
body.index .header-ucf-logo-section {background-image: url(/images/upload/ucf_logo_161109.png);}
.header-ucf-logo-section a {display: block;width: 100%; height: 100%;}
.header-site-search-section {float: right; width: 217px; height: 30px; margin-top: 20px; margin-right: 35px;}
.header-left-lower-section {width: 100%; height: 50px;}
.header-right-upper-section {width: 100%; height: 50px; position: relative;}
.header-right-lower-section {width: 100%; height: 50px;}
.header-uship-text {width: 93px; height: 30px; float: right; margin-top: 5px; padding-left: 4px;}
.header-uship-text span {font-size: 13px; color: #333; letter-spacing: -1px;}
body.index .header-uship-text span {color: white;}
.header-right-uship-animation {position: absolute; width: 162px; height: 38px; top: 15px; right: -67px;}
.header-right-uship-animation a {display: block; width: 100%; height: 100%; background-image: url(/images/upload/uship_go_animation_white.gif); background-repeat: no-repeat;}
body.index .header-right-uship-animation a {background-image: url(/images/upload/uship_go_animation_blue.gif);}

/*======================================================================== 
	subMenu
  ========================================================================*/
#subMenu{ padding-top: 10px;}
#subMenu h2{ font-size: 13px; font-weight: normal; color: #2f6594; line-height: 150%; margin: 0;
  border-bottom: solid 4px #b9bfc4; position: relative;}
#subMenu h2 strong{ font-family: "微軟正黑體"; font-size: 18px; color: #333; font-weight: normal;
  display: inline-block; padding-bottom: 5px;}
#subMenu h2 img{ position: absolute; bottom: 1px; right: 5px;}
#subMenu h3{ margin: 0; padding: 0; font-size: 15px; line-height: 180%; background-color: #fff;
  border-bottom: solid 1px #e7e7e7; border-right: solid 1px #e7e7e7; border-left: solid 1px #e7e7e7;}
#subMenu h3 a{ padding: 8px 10px;color: #666; display: block; width: 100%;}
#subMenu h3:hover a,#subMenu h3.sel a{ color: #fff; text-decoration: none;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#285d89+0,508fc2+75 */
background: #285d89; /* Old browsers */
background: -moz-linear-gradient(top,  #285d89 0%, #508fc2 75%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#285d89), color-stop(75%,#508fc2)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #285d89 0%,#508fc2 75%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #285d89 0%,#508fc2 75%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #285d89 0%,#508fc2 75%); /* IE10+ */
background: linear-gradient(to bottom,  #285d89 0%,#508fc2 75%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#285d89', endColorstr='#508fc2',GradientType=0 ); /* IE6-9 */
}

#subMenu .secondMenu {
  border: solid 1px #e7e7e7;
  border-top: none;
  padding: 0 5px;
  /*display: none;*/
  position: relative;
  font-size: 14px;
  background: #f1f5f9;
}
#subMenu .secondMenu li{ border-top: dotted 1px #ccc; padding: 0; margin: 0; margin-top: -1px;}
#subMenu .secondMenu li a:link{
  display: block;
  color: #333;
  background-image: url(../images/icon/arrowBlue01.gif);
  background-repeat: no-repeat;
  background-position: 175px center;
  padding: 9px 5px 9px 10px;
}
#subMenu .secondMenu li a:visited{ color: #333;}
#subMenu .secondMenu li a:hover{ color: #22548d;}
#subMenu .secondMenu li a:active{ color: #333;}

.btnW200{ margin-top: 10px;}
.btnW200 img{ width: 100%; height: auto; border: solid 1px #e5e5e5;}
.btnW200 a{ margin-bottom: 10px; display: block;}


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


/*======================================================================== 
	Footer
  ========================================================================*/
footer{	width: calc(100% - 35px); min-width: 1035px;
	background-image: url(../images/bgFooter1.gif);
	background-position: center center;
}
footer .content{ width: 1000px; margin: 0 auto; padding: 25px 0; overflow: hidden;
	background-image: url(../images/bgFooter2.jpg); background-position: top center;}
footer .webSite,footer .other{ float: left;}
footer .webSite{ width: 200px; padding-right: 10px;}
footer .col2{ width: 300px;}
footer .webSite h4{ margin: 5px 0 10px 0; font-size: 13px; color: #fdfdbe; overflow: hidden;}
footer .webSite h4 span{ position: relative;}
footer .webSite h4 span::after{
  content: url(../images/lineWhite.png);
  padding-left: 8px;
  position: absolute;
  top: 8px;
  top: -5px\0;
}

footer .webSite a:link {display: inline-block; margin: 2px 0; margin: 6px 0\0; font-size: 12px; color: #fff;}
footer .webSite a:link {width: 180px;}
footer .webSite.col2 a:link {width: 260px;}

footer .webSite a:visited { color:#fff;}
footer .webSite a:hover 	{ color:#fdfdbe;}
footer .webSite a:active 	{ color:#fff;}

footer .other{ float: right; width: 490px; font-size: 12px; color: #89a7c4; overflow: hidden;}
footer .other .input-group{ margin: 0 8px 0 10px; width: 290px; float: left;}
footer .other .col-md-3{ padding: 0 0 0 10px; margin: 10px 0;}

footer a.footer-line-square, 
footer a.footer-fb-square, 
footer a.footer-pixnet-square, 
footer a.footer-youtube-square,
footer a.footer-ig-square {display: inline-block; width: 34px; height: 34px; transition: all 0.3s ease-in-out; background-size:cover;}

footer a.footer-line-square         {background-image: url('/images/icon/line_square.png?v=1.0.1');}
footer a.footer-line-square:hover   {background-image: url('/images/icon/line_square_active.png?v=1.0.1');}
footer a.footer-fb-square           {background-image: url('/images/icon/fb_square.png?v=1.0.1');}
footer a.footer-fb-square:hover     {background-image: url('/images/icon/fb_square_active.png?v=1.0.1');}
footer a.footer-pixnet-square       {background-image: url('/images/icon/pixnet_square.png?v=1.0.1');}
footer a.footer-pixnet-square:hover {background-image: url('/images/icon/pixnet_square_active.png?v=1.0.1');}
footer a.footer-youtube-square      {background-image: url('/images/icon/youtube_square.png?v=1.0.1');}
footer a.footer-youtube-square:hover{background-image: url('/images/icon/youtube_square_active.png?v=1.0.1');}
footer a.footer-ig-square           {background-image: url('/images/icon/ig_square.png?v=1.0.1');}
footer a.footer-ig-square:hover     {background-image: url('/images/icon/ig_square_active.png?v=1.0.1');}

.theBanner{ position: relative; overflow: hidden;}
.theBanner > img{ width: 100%; height: auto; border: solid 1px #ccc;}
.theBanner:hover .stuff{ opacity: 1.0;}
.theBanner .stuff{
  width: 93%; height: 100%; padding: 0;
    opacity: 0;
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -ms-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
    background: rgba(255, 255, 255, 0.75);
    position: absolute;
    top: 0;
}
.theBanner .stuff .verticalAlign{ width: 100%; height: 24px; margin-bottom: -15px;
 position: absolute; bottom: 50%; text-align: center;}
.theBanner .stuff .verticalAlign a{ display: inline-block; margin: 0 1px;}


} /*重要不可刪除!*/