@charset "utf-8";
/* CSS Document */

/*--------------------------------------reset 此區塊請勿更動*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, /*p, */blockquote, pre,
/*a, */abbr, acronym, address, big, cite, code,
del, dfn, em, /*img,*/ ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	font-family:Arial,'微軟正黑體';
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/*---------------------------------------------------------------------*/

a {color: #fff; text-decoration: none; blr:expression(this.onFocus=this.blur()); outline: none; /* for Firefox */hlbr:expression(this.onFocus=this.blur()); /* for IE */}
a:hover {text-decoration:none;}
a:focus{ -moz-outline-style: none;}
 *:focus{outline:none;}

body { background:#fdf9da url(images/hsbc_ci_unlimitedcard_bg.jpg) center top no-repeat;}
img { margin:0; padding:0; border:none;}
#head {width:960px; height:350px; margin:0 auto; padding:0;}
#head h1 { height:70px; background:url(images/hsbc_h1.jpg) no-repeat}
#head h2 { height:280px; background:url(images/hsbc_ci_unlimitedcard_h2.jpg) no-repeat}

#head h1, #head h2, #head h3 {width:960px; margin:0; padding:0; text-indent:-9999px; left:0;}
#content {width:960px; margin:0 auto; padding:0; background:url(images/cbg.gif) repeat-y; text-align:left;}
#content .boxci a {display:block; width:100%; height:100%;}
#content .ct0 { height:460px; background:url(images/hsbc_ci_unlimitedcard_c1.jpg) no-repeat;}
#content .ct1, #content .ct2, #content .ct3, #content .ct4 { height:60px;}
#content .ct1 {background:url(images/hsbc_ci_unlimitedcard_c2.jpg) no-repeat;}
#content .ct2 {background:url(images/hsbc_ci_unlimitedcard_c3.jpg) no-repeat;}
#content .ct3 {background:url(images/hsbc_ci_unlimitedcard_c4.jpg) no-repeat;}
#content .ct4 {background:url(images/hsbc_ci_unlimitedcard_c5.jpg) no-repeat;}
#content .side {float:left; width:250px; _width:245px; text-align:center;}
#content .side img { margin-top:10px}
#content .note {background-color:#EBEBEB; font-size:0.8em; line-height:1.6em; color:#666666; margin:10px 20px; padding:10px 5px;font-family:arial,新細明體 !important;}
#content .note ol {margin:5px 0 10px 30px; padding:0; list-style:decimal;}
#content .note li {margin:3px 0; padding:0;}
#content .note li strong { color:#0830C7;}
#content .note p {display:block; text-indent:-25px; padding:0px 0px 0px 25px; margin:0px;}
#content .note a:link, #content .note a:visited { color:#bc630a; text-decoration: underline}
#content .note a:hover, #content .note a:active { text-decoration:none}
#content .warning {width:710px; height:70px; margin:0; padding:0; overflow:hidden; text-indent:-2000px;background:url(images/warn.gif) no-repeat;}
#content .warning a {display:block ;width:100% ;height:100% ;}

/*機票選單*/
.right-menu {width:650px; margin:0 auto; padding:2px 0px;}
.nav{border-radius:12px; text-align:center; margin-bottom:5px; overflow:hidden; _clear:both; background:#eeeeee; 
	      border-radius:5px; float:left; display:block; width:100%; padding:8px 0px;}
.nav li {display: inline;}
.nav li a {font-size:15px;	font-size:15px\9; font-family: Arial, "微軟正黑體";	color:#535353;	font-weight:bold; text-decoration:none; 
	       margin: 0; padding: 2px 8px 2px 12px;}
.nav li a:hover {color:#047db4;}
.anchor {visibility: hidden; height:20px; margin:0; padding:0; display:block; float:left;}

/*產品區*/	
h1, h2, h3, h4, h5, h6, ul, li{margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align: baseline; background: transparent;}
a {color:#1f1f1f; text-decoration: none; blr:expression(this.onFocus=this.blur()); outline: none; 
   /* for Firefox */hlbr:expression(this.onFocus=this.blur()); /* for IE */}
a:hover {text-decoration:none;}
a:focus{ -moz-outline-style: none;}
.right{margin:0 auto;}
.rightbox{ *border:none; border-bottom:none; background:#fff;}
.location span.info_add{font-size:15px; letter-spacing:1px; color:#9f3b07; line-height:20px; 
	                    margin:10px 10px 0 35px; display:block; font-weight:bold;font-family:Arial,"微軟正黑體" !important;}
ul.product {width:660px; margin:0 auto; overflow: hidden; clear:both;}
ul.product li {width:200px; float:left; padding:7px; border-radius:3px;}
ul.product li a:hover {background:#ffeb7d;} 
ul.product li a {display:block; background:#e8e8e8; line-height:40px; height:35px; overflow:hidden; padding:0 10px;}
ul.product li strong {color:#ff0008; font-size:18px; padding:0 1px;font-family:Arial,"微軟正黑體" !important;}
ul.product li span.name {font-size:15px; line-height:35px; color:#000000; padding:0 0 0 20px;font-family:arial,"微軟正黑體" !important;}
ul.product li span.price {font-size:12px;font-family:arial,"新細明體" !important;}

.product2_box {
    max-width: 660px;
    width: 100%;
    margin: 5px 0px 0 32px;
    clear: both;
    display: table;
    border-bottom: 1px solid #e6e6e6;
    padding-bottom: 15px;
}

.product2_box:last-child {border-bottom: 0px solid #e6e6e6;}

.product2_box a {
    display: inline-block;
    float: left;
    padding: 0 13px;
    background: #e8e8e8;
    color: #333333;
    height: 40px;
    line-height: 40px;
    margin-right: 15px;
    margin-bottom: 10px;
    font-size: 15px;
	font-family:arial,"微軟正黑體"
}

.product2_box a:hover {background:#ffeb7d;}		


/*--更多其它城市--*/	
.more {display:block; float:right; margin:0 20px 0 0; padding:0; text-align:right; font-size:13px; font-weight:bold; line-height:32px;}
.more a:link,  .more a:visited {padding:5px 4px 3px; background:#884a01; color:#FFFFFF; text-decoration:none}
.more a:hover, .more a:active {color:#fbfedf}

/*--展開說明--*/	
#qaContent {margin:10px 10px; padding:5px 5px; background-color:#EBEBEB; font-size:13px; line-height:18px;font-family:arial,"新細明體" !important;}
#qaContent .qa_title {font-size:15px; color:#1d1d1d; cursor:pointer; padding:0 0 0 22px;}
#qaContent .qa_title_on {text-decoration:underline;}
#qaContent .qa_content ul {margin-left:43px; list-style-type:circle;}
#qaContent .qa_content li {margin:10px 10px; padding:0;}


/* -----------------------------大於960px---------------------------- */

@media only screen and (min-width:960px) {
#content .main {
	width:710px;
    margin:0 0 0 250px;
	_margin:0 0 0 246px;
	padding:0;
	background:#FFFFFF;
}
#content .boxci {width:710px; margin:0 auto; padding:0; text-indent:-9999px; 
	             white-space:nowrap; overflow:hidden; position:relative;}	
#content .boxci ol{list-style:none;}
#content .boxci strong, .rightbox .location h5{display:none;}
}

/* -----------------------------手機版型---------------------------- */

@media screen and (max-width:959px) {
*{box-sizing:border-box; }		
html,body{-webkit-text-size-adjust:none;}	
#content {min-width:320px; margin:0 auto; background-color:#fd8060;}
#head{
	background-image:url(images/hsbc_ci_unlimitedcard640.jpg);
	height:auto; 
	margin:0 auto;
	border:none;
	width:100%; 
	padding-bottom:62.5%;		
	background-size:cover; 
	background-position:center center;
	text-indent:-9999px;
}
h1, h2, h3 {display:none;}
	
#content .side, #content .ct1, #content .ct2, #content .ct3, 
#content .ct4, #content .ct5, .right-menu, .anchor{display:none;}
	
body,#content, #content .ct0{background:#f2e194}
#content .boxci strong{background-color:#664c04}
#content .ct0 { height:100%;}	
#content {width:100%; height:100%; margin:0 auto;}
#content .boxci{width:100%; margin:0 auto;}
		
#content .boxci strong{font-size:15px; line-height:20px;  font-weight:bold; display:block; color:#F8F7F7;
	                   margin:20px 10px 0 10px; padding:10px 20px 10px 30px;line-height:20px;font-family:Arial,"微軟正黑體" !important;}
#content .boxci ol{margin:0 10px 20px 10px; padding:10px 20px 10px 30px; display:block; background-color:#FCF9F9;}
#content .boxci li{font-size:13px; line-height:23px; list-style:none;font-family:Arial,"微軟正黑體" !important;}
#content .boxci li a{font-size:15px; color:#C603D1; text-decoration:underline; font-weight:bold;}
#content .boxci li a:hover{color:#0714FD;}
#content .boxci li p {display:block;text-indent:-13px; padding-left:10px; margin:0px; font-family:Arial,"新細明體" !important; }
#content .boxci li .m1 {font-size:15px; color:#F8070B; font-weight: bold;}
#content .boxci li .m2 {color:#0B4AB8; font-family:Arial,"新細明體" !important;}

/*產品區*/	
.rightbox { width:100%; border: 8px solid #f2e194; float:none;}
.info_add{font-size:13px; margin:10px 10px 0 38px; font-family:Arial,"新細明體" !important;}
.location h5 {height:36px; font-size:15px; color:#F8F7F7; background-color:#5f3900; width:100%; padding:10px 0 0 38px;font-family:Arial,"微軟正黑體" !important;}
.location{margin: 0; width:100%;}
ul.product {width:100%; margin:0 auto;}
ul.product li {width:45%; margin: 0 0 0 15px;}
ul.product li strong {color:#ff0008; font-size:15px; padding: 0 2px;font-family:Arial,"微軟正黑體" !important;}
ul.product li span.name {font-size:13px;line-height:35px; padding: 0 0 0 2px;font-family:Arial,"新細明體" !important;}

.product2_box {
    width: 90%;
    margin: 5px 10px 0 20px;
    clear: both;
    display: table;
    border-bottom: 1px solid #e6e6e6;
    padding-bottom: 15px;
}

.product2_box:last-child {
    border-bottom: 0px solid #e6e6e6;
}

.product2_box a {
    display: inline-block;
    float: left;
    padding: 0 13px;
    background: #e8e8e8;
    color: #333333;
    height: 40px;
    line-height: 40px;
    margin-right: 6px;
    margin-bottom: 10px;
    font-size: 13px;
	font-family:arial,"新細明體"
}

.product2_box a:hover {
    background:#ffeb7d;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}				
	
/*注意事項*/
#content .note {width:100%; margin:0 auto; padding:10px 0;}
#content .warning {display:none;}

/*按紐列*/
.menu-btn {margin-top:0px;}	
}

/* -----------------------------手機版型360px---------------------------- */
@media screen and (max-width:360px) {
ul.product li {width:90%;}
ul.product li span.name {padding:0 0 0 60px;}
}

/*201908 串接新版左側MENU而做的修改*/
#content {
	background: none;
	background-color: #bf7a67;
}
#NAV, .pushy {
	font-family: verdana, "微軟正黑體" !important;
}
#NAV ul {
	margin: 0px 0 0 !important;
	font-size: 14px !important;
	font-weight: Verdana, "微軟正黑體" !important;
}
#NAV li {
	margin: 0 !important;
	padding: 0 10px !important;
}
#NAV li a {
	width: auto !important;
	height: auto !important;
	text-indent: 0 !important;
	text-align: left;
}
.main-con {
    padding:20px;
    -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
    box-sizing: border-box;
}
.menu-box {
    clear: both;
    -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
    box-sizing: border-box;
    padding:0 9px;
    width: 100%;
}
.menu-box:hover {
	background: #b14d32;
}
.menu-box a {
    width: 100%;
    display: table;
	padding: 15px 10px !important;
	border-bottom: 1px solid rgba(255, 229, 222, 0.2) !important;
}
.menu-pic {
    width: 25px;
    display: table-cell;
    vertical-align: middle;
}
.menu-box img {
	width: 100%;
	margin-top: 0px !important;
}
.menu-title {
    text-align: left;
    color:#ffffff;
    text-shadow: #ffffff 0em 0em 0em;
    font-size: 14px;
    line-height: 22px;
    display: table-cell;
    -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 8px;
    vertical-align: top;
}
.menu-title span {
    color:#fff100;
    text-shadow: #fff100 0em 0em 0em;
}

	/*手機menu設定*/
	.pushy-index {
		font-size: 13px;
		color: #ffffff;
		text-align: right;
	}
	
	.pushy .pushy-index a {
		padding: 5px 10px 10px 10px;
		font-size: 13px;
		border: 0;
		font-family: Verdana,'微軟正黑體';
	}
	
	.icon-blankicon:after {
		content: "\e932";
		width: 13px;
		height: 13px;
		font-size: 11px;
		margin-left: 5px;
	}


	.pushy, .block-menu {
		background:#bf7a67 !important;
	}
	.main-bigtitle, .main-bigtitle span {
		color: #b14d32 !important;
	}
	.menu-btn {
		background:#b14d32 !important;
	}
	.pushy a:hover {
		background:#b14d32 !important;
	}
	.main-but a, .main-smalltitle a {
		background:#b14d32 !important;
		box-shadow: 0px 2px 0px #b14d32 !important;
	}
	.main-but a:hover, .main-smalltitle a:hover {
		background:#bf7a67 !important;
		box-shadow: 0px 2px 0px #b14d32 !important;
	}
	
@media screen and (max-width: 768px) {
	.menu-box {padding: 0;}
	.menu-pic {display: none;}
	.menu-title {padding: 0;}
}