@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;}
/* 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 {container: ''; container: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:#bbecf3 url(../images/colatour_bg.jpg) center top no-repeat}

#head {width:960px; height:544px; margin:0 auto; padding:0;background:url(../images/colatour_h1.jpg) no-repeat}
#head h1, #head h2, #head h3 {width:960px; margin:0; padding:0; text-indent:-9999px; left:0;}

#container {width:960px; margin:0 auto; padding:0; background-color:#ffffff;}


/* -----------------------------.nav 置頂選單---------------------------- */
.main-menu {max-width:960px; margin:0 auto; }
.main-menubg{width:100%; height:73px; background:#00175a;}

.menu,.menu0 {max-width:960px; margin:0 auto;}
.menu1 {width:100%;  margin:0 auto; /*margin-left:40px;*/}
.main-menu {max-width:960px; margin:0 auto;}	
.main-menu li {float:left;  text-indent: -9999px; }
.main-menu li a {width:100%; height:100%; display:block; cursor:pointer;}

.nav {width:100%; height:100px; z-index:1500; clear:both; margin:-30px 0 0 0;}

.menu li,.menu0 li {float:left; height:73px}
.menu li a,.menu0 li a {
 width:100%; height:100%; display:block; cursor:pointer; color:#626262;
 text-decoration:none; text-indent:-9999px;}

.nav0 {width: 203px; height:73px; background: url(../images/colatour_nav.png) 0px 0px no-repeat;}
.nav0:hover{width: 203px; height:73px; background: url(../images/colatour_nav-over.png) 0px 0px no-repeat;}

.nav1 {width: 109px; height:73px; background: url(../images/colatour_nav.png) -203px 0px no-repeat;}
.nav1:hover{width: 109px; height:73px; background: url(../images/colatour_nav-over.png) -203px 0px no-repeat;}	
	
.nav2 {width: 108px; height:73px; background: url(../images/colatour_nav.png) -312px 0px no-repeat;}
.nav2:hover{width: 108px; height:73px; background: url(../images/colatour_nav-over.png) -312px 0px no-repeat;}
	
.nav3 {width: 108px; height:73px; background: url(../images/colatour_nav.png) -420px 0px no-repeat;}
.nav3:hover{width: 108px; height:73px; background: url(../images/colatour_nav-over.png) -420px 0px no-repeat;}
	
.nav4 {width: 108px; height:73px; background: url(../images/colatour_nav.png) -528px 0px no-repeat;}
.nav4:hover{width: 108px; height:73px; background: url(../images/colatour_nav-over.png) -528px 0px no-repeat;}
	
.nav5 {width: 108px; height:73px; background: url(../images/colatour_nav.png) -636px 0px no-repeat;}
.nav5:hover{width: 108px; height:73px; background: url(../images/colatour_nav-over.png) -636px 0px no-repeat;}
	
.nav6 {width: 108px; height:73px; background: url(../images/colatour_nav.png) -744px 0px no-repeat;}
.nav6:hover{width: 108px; height:73px; background: url(../images/colatour_nav-over.png) -744px 0px no-repeat;}
	
.nav7 {width: 108px; height:73px; background: url(../images/colatour_nav.png) -852px 0px no-repeat;}
.nav7:hover{width: 108px; height:73px; background: url(../images/colatour_nav-over.png) -852px 0px no-repeat;}


/* --------------------------------.anchor 錨點 ------------------------------- */
.anchor {visibility:hidden; height:50px; display:block; float:left; margin:-73px 0 0 0;}


/* -----------------------------.style1 可樂旅遊金---------------------------- */
.style1 {width:960px; height:235px; background-color:#016fd0;}	
.style1 ul{display:block; list-style:none; margin:0px 50px 20px 150px; padding:10px 10px 10px 10px; }
.style1 li{float:left;}
.style1 li a{
	display:block; width:250px; margin:12px 0px 0px 55px; text-align:center; text-decoration:none; 
	border-radius:5px; padding:1px 1px;  background-color:#154998; border:1px solid #154998; 
	font-size:20px; height:40px;  font-weight:bold; }
.style1 li a:hover{background-color:#308ad6; border:1px solid #308ad6; color:#ffffff;}

.style1 li .m1 {display:block; padding:5px 0 0 0 ; }
	
.style1 strong{
	margin:0px 30px 0px 30px; padding: 60px 50px 0 0px ;line-height:50px; font-size:25px; font-weight:bold; 
	display:block;}

.style1 li a, .style1 strong{font-family:Arial,"微軟正黑體"; color:#ffffff;}

/* -------------------------------.box 中間選單 ------------------------------ */
.box, .title1 {width:960px; height:54px; clear:both; }
.box ul{list-style:none; margin:0; padding:0;}
.box li{float:left;text-indent:-9999px; background-color:#a4a9af;}
.box li a{display:block;height:134px;}

.box li.t1 a{width:322px;background-image:url(../images/colatour_c2.jpg)}
.box li.t1 a:hover{background-image:url(../images/colatour_c2a.jpg)}
	
.box li.t2 a{width:318px;background-image:url(../images/colatour_c3.jpg)}
.box li.t2 a:hover{background-image:url(../images/colatour_c3a.jpg)}
	
.box li.t3 a{width:320px;background-image:url(../images/colatour_c4.jpg)}
.box li.t3 a:hover{background-image:url(../images/colatour_c4a.jpg)}


/* --------------------------.style2 美國運通卡會員獨享 ------------------------- */
.style2{width:960px; height:599px; background:url(../images/colatour_c5.jpg); clear:both;}
.style2 ol{margin:0 20px 20px 25px; padding:20px 50px 20px 50px;}
.style2 li{font-size:13px;}
.style2 li p {display:block; text-indent:-13px; line-height:18px; padding-left:10px; margin:0;}

.style2 li box1 {float:left; margin:5px 0 50px -50px;}
.style2 li box2 {float:right; margin:5px 0 50px -50px;}
.style2 li box3 {float:left; margin:110px 0 50px -50px;}
.style2 li box4 {float:right; margin:110px 0 50px -50px;}
.style2 li box1, .style2 li box2, .style2 li box3, .style2 li box4{width:400px; display:block;}

.style2 li .m3 a{ width:35%;  display:block; border-radius:5px; margin:100px 0px 18px 20px; padding:3px 3px; font-size:18px; line-height:35px; 
 color:#ffffff;  background-color:#154998; border:1px solid #154998; text-decoration:none;text-align:center; font-family:Arial,"微軟正黑體";}
.style2 li .m3 a:hover{background-color:#308ad6; border:1px solid #308ad6; color:#fff;}


/* -----------------------------.note 注意事項---------------------------- */
.note {
	margin:0px 20px 0 0 20px; padding:10px 30px 10px 30px;
	background-color:#EBEBEB; font-size:0.8em; line-height:1.6em; color:#666666;}
.note li, .note ol , .note strong{ font-family:Arial,"新細明體";}
.note ol {margin:5px 0 10px 30px; padding:0; list-style:decimal;}
.note li {margin:3px 0; padding:0;}
.note strong {font-weight:bold;}
.note li strong {color:#0830C7;}
.note p {display:block; text-indent:-25px; padding:0px 0px 0px 25px; margin:0px;}
.note p1 {display:block; text-indent:-25px; padding:0px 0px 0px 25px; margin:0px; font-weight:bold; font-family:Arial,"新細明體";}
.note a:link,  .note a:visited { color:#bc630a; text-decoration: underline}
.note a:hover, .note a:active { text-decoration:none}


/* ----------------------------- 960px ---------------------------- */
@media only screen and (min-width:960px) {
#container .box p{text-indent:-9999px;}
#container .box ol{list-style:none;}
#container .box strong{display:none;}
.location{display:none;}
.style2 li .m1, .style2 li .m2{display:none;} 
}



/* --============================== 手機版型 ============================-- */
@media screen and (max-width:959px) {
*{box-sizing:border-box;}
	
body {background:#016fd0;}
	
html,body{-webkit-text-size-adjust:none; }

#container {
	min-width:320px;
	margin: 0 auto;
	background:#016fd0;
}
#head{
	height:auto;
	margin:0 auto;
	border:none;
	width:100%;
	padding-bottom:62.5%;
	background-size:cover;
	background-position:center center;
	text-indent:-9999px;
	background-image:url(../images/colatour_640.jpg);
}

h1, h2, h3, .nav, .box {display:none;}

#container {width:100%; height:100%; margin:0 auto;}

	
/* --============================== style1 可樂旅遊金 ============================-- */
.style1 {width:100%; background-color:#016fd0; }	
.style1 ul{background-color:#016fd0; margin:50px 30px 20px 30px; padding:10px 10px 10px 10px;}
.style1 li{float:none;}
.style1 li a{
	width:100%; margin:0px 50px 15px 0px; text-align:center; text-decoration:none; 
	border-radius:5px; padding:1px 1px;  background-color:#154998; border:1px solid #154998; 
	font-size:20px; height:40px;  font-weight:bold;}
	
.style1 li a:hover{background-color:#308ad6; border:1px solid #308ad6; color:#ffffff;}
	
.style1 strong{
 margin:0px 0px 0 0px; padding:5px 5px 10px 5px; 
 line-height:25px; font-size:20px; color:#ffffff; }

.style1 li a{display:block; font-family:Arial,"微軟正黑體"; color:#ffffff;}

	
/* --============================== style2 美國運通卡會員獨享 ============================-- */	
.style2{width:100%;  height:100%; background:#016fd0;}

.style2 ol{background-color:#ffffff; margin:-10px 30px 20px 30px; padding:0px 10px 10px 10px;}	
	
.style2 li box1, .style2 li box2, .style2 li box3, .style2 li box4
{width:100%; float:none; margin:0px 0px; padding:10px 10px 10px 10px; font-family:Arial,"微軟正黑體"; }

.style2 li .m1 {color:#1d4c91; font-size:20px;font-weight:bold;}	
.style2 li .m2 {color:#1d4c91; font-size:15px;}	
.style2 li .m3 a{ width:100%;  display:block; border-radius:5px; margin:10px 0px 35px 0px; padding:3px 3px; font-size:18px; line-height:35px; 
 color:#ffffff;  background-color:#154998; border:1px solid #154998; text-decoration:none;text-align:center;}
.style2 li .m3 a:hover{background-color:#308ad6; border:1px solid #308ad6; color:#fff;}	

	
/* --================================ 注意事項 ===============================-- */	
.note {width:100%; margin:0 auto; padding:15px 20px; float:none;}

/* --============================== 內文圖片伸縮 ============================-- */	
.location1{background-image:url(../images/colatour_c6.jpg);}
.location2{background-image:url(../images/colatour_c7.jpg);}
.location3{background-image:url(../images/colatour_c8.jpg);}
.location4{background-image:url(../images/colatour_c9.jpg);}
.location1, .location2, .location3, .location4{
 margin:0 auto; border:none; width:100%; height:auto; padding-bottom:60%; background-size:cover; background-position:center center;}	
}


/* --============================== 區間修改 ============================-- */
@media screen and (min-width: 770px) and (max-width:959px) {
#head{
	height:auto;
	margin:0 auto;
	border:none;
	width:100%;
	padding-bottom:55%;		
	background-size:cover;
	background-position:center center;
	text-indent:-9999px;
	background-image:url(../images/colatour_960.jpg);
}

}