@import url("reset.css");
@charset "utf-8";
body {
    font-size:62.5%; 
	background: url(../images/bg.jpg);
}
.pc{ display:block;}
.m{ display:none !important;}


/*主視覺*/
.visual {
    margin: 0 auto; 
    padding: 0; 
    position: relative; 
    overflow:hidden;
}
.visual img{width:100%;}

/*內容區塊*/
.content { margin: 0 auto; padding: 0; width:100%; max-width:1400px;}
/*.menu-1st.stuck{position:fixed; z-index:995; top:0px; background-color:#680527;}*/

.tag.stuck {
    position: fixed;
    z-index: 997;
    background-color: #fffdd0;
    display: block;
    top: 40px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3)
}
a[name^="a"] {position: relative; top: -150px; clear:both;}
a[name^="p"] {position: relative; top: -150px; clear:both;}

/*3塊廣告*/
.adBox{ width:98%; margin:auto; padding-top:3%;}
.adBox div a { width:95%; margin:auto; display:block;}
.adBox div a img{width:100%; display:block;}


/*回頂部*/
.scroll2top:link, .scroll2top:visited {background: url(../images/top.png) no-repeat 0 0; height:60px; width:60px; background-size:contain; position:fixed; bottom:50px; right:0;}
.scroll2top:hover { background: url(../images/top1.png); background-size:contain;}

/* c23模組專用 */
q:before, q:after {content: "";}
*+html .carrier li {min-height: 1%;}
.carrier li:after {
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0;
}
.intro-anchors {display: none;}
.carrier { width:97%; margin:40px auto; background-color: #fff;padding-bottom: 30px;}
.carrier:nth-child(odd) h4{
	width:100%;
	height:48px;
    clear: both;
    letter-spacing: 2px;
    margin-top: 6px; 
	display:block;overflow:hidden; 
	background:#6929be url(../images/bg-head.png) no-repeat right top;
} 
.carrier:nth-child(even) h4 {
    width:100%;
    height:48px;
    clear: both;
    letter-spacing: 2px;
    margin-top: 6px;  
    display:block; overflow:hidden; 
	background:#6929be url(../images/bg-head.png) no-repeat right top;
}
.carrier:nth-child(odd) h4 em{
	color:#ffe82b;
	font: bold 26px  Verdana, Geneva, sans-serif,"微軟正黑體";
	padding:0 20px;
	width:100%;
	text-align:left;
	display:block;
    overflow:hidden;
    margin-top:8px;
}
.carrier:nth-child(even) h4 em{
    color:#ffe82b;
    font: bold 26px Verdana, Geneva, sans-serif,"微軟正黑體";
    padding:0 20px;
    width:100%;
    text-align:left;
    display:block;
    overflow:hidden;
    margin-top:8px;
}
.carrier:nth-child(odd) h4 em:before{
content:url(../images/ling1.png);
padding-right:15px;
}     
.carrier:nth-child(even) h4 em:before{
content:url(../images/ling1.png);
padding-right:15px;
}  
.carrier ul { padding: 0; margin: 0 auto; width:95%;}
.carrier li {
    list-style-type: none; 
    border-bottom: 1px dashed #333; 
    padding: 2px 10px; 
    margin:4px; 
    line-height: 1em;  
    -webkit-box-shadow: 0px 5px 0 0 #fff9d5; 
    box-shadow: 0px 5px 0 0 #fff9d5;
}
.carrier li:hover {
    background-color:rgba(255, 253, 231, 0.59); 
    box-shadow:none; margin:6px 0 0 10px; 
    transform: all 1s;
}

.carrier li:last-child{border:none; box-shadow:none}
.carrier li a strong {
    display: block;
    font: bold 22px Verdana, Geneva, sans-serif,"微軟正黑體";
    color: #666;
    margin: 4px 0;
}
.carrier li a:link, .carrier li a:visited {
    text-decoration: none;font:16px Verdana, Geneva, sans-serif,"微軟正黑體";
    color:#d4285a;
}
.carrier li em.price {
    font:21px Verdana, Geneva, sans-serif,"微軟正黑體"; 
    color: #f91d56; float: right; 
    *margin-top: -1.2em; 
    font-weight: bold;}
.carrier li em.price span, .carrier li em.price var {
    font-size: 21px;
    font-weight: bold;
}
/*.carrier ul li.box-head{ display:none;}*/
.carrier .box-head{
    /*border-top:2px solid #8C43C3;*/
    margin-top:-5px;
}
.carrier .box-head:hover{background:#fff;}
.carrier .box-head a:link, .carrier .box-head a:visited{
cursor:default; 
margin:-20px 0 -20px -1px; 
outline: none; /* for Firefox */
}
.carrier .box-head a strong, .carrier .box-head a img, .carrier .box-head p span{
    display:none;
}
.carrier .box-head q{
    display:block; 
    font: bold 18px  Verdana, Geneva, sans-serif,"微軟正黑體"; 
    padding:10px 0 10px 9px; 
    color:#c500e2; 
    background-color:#fff4b7; 
    margin-left:-8px; 
    height:auto; 
    margin-top:-10px;
    margin-bottom:-10px;
}

.carrier:nth-child(2) .box-head q:hover{
    cursor: pointer;
    background-color:#fff200; 
}


/*介紹區塊*/
.introHKbox{
margin:0 auto;  
}
.introHK1440{
max-width: 1280px;
width: 100%;
margin:0 auto;
padding: 25px 0px;
overflow: hidden;
}
.introHK, .introHK1 {
    max-width: 600px;
    width: 100%;
    float: left;
}
.introHK1 {
    margin-left: 30px;
}
.introHK h4 ,.introHK1 h4{
    display: block;
    width: 100%;
    font-size: 25px;
    margin:0 auto;
	padding:15% 0 1% 0;
	text-align:center;
	color:#fff;
	box-sizing:border-box;
}

.introHK h4{
    background-image: url(../images/title.png);
	background-size:100% auto;
}
.introHK1 h4{
    background-image: url(../images/title.png);
	background-size:100% auto;
}
/*attractions transport */
.Attractions .Transport{
    margin:0 auto;
    padding:0;
}
.introTopicBox{
    position:relative;
    display:block;
    margin:0 auto;
    width:100%;
}
.introTopic{
    z-index:2;
    display:block;
    width:100%;
    box-sizing: border-box;
    padding:10px;
    background:rgba(0,0,0,0.8);    
    color:#fff;
    font-size: 12px;
}
.introTopic > h3{   
    font:normal 130%/1.4 Arial,"微軟正黑體", "Microsoft JhengHei",sans-serif;
    margin:0 auto 5px;
    text-align: left;
}
.introTopic p{
    font:normal 100%/1.5 Arial,"微軟正黑體", "Microsoft JhengHei",sans-serif;
    text-align: left;
}
.introTopicBox img{
    width: 100%;
}

/*information旅遊錦囊*/
.inforHK{
   margin:0 auto; 
   background-color: #c292d9; 
}
.information{
max-width: 1400px;
width: 100%;
margin:0 auto;
padding:40px 5px;
overflow: hidden; 
}
.information h4{
    max-width: 312px;
    width: 100%;
    height: 52px;
    font-size: 0px;
    margin:40px auto;
    background-image: url(../images/MCinfo.png);
}

.lineline{
    border-bottom:double;
    border-color:#fff;
    clear: both;
}
.inforbox{ width: 100%;
    display:block;
    margin:0 auto;
    margin-bottom:40px;   
}
.inforbox ul{display:block;
    list-style: none;
margin-left:360px; 
    }
.inforbox ul li{
    width:200px;
    height:70px;
    border: 1px solid #fff;
    float: left;
    margin-left: 10px; 
    margin-bottom:30px;
}
.inforbox ul li a{
    display:block;
    text-align: center;
    width:200px;
    height: 70px;
    color: #fff;
    font-size:14px;
    line-height:70px;
}
.inforbox ul li:hover a{
    width:100%;
    height: 100%; 
    background-color:rgba(160, 100, 190, 0.6) ; 
    text-decoration: none;        
    transition: all 300ms 100ms;
}

a.linkto{display:inline-block; width:100%; font-size:24px; font-weight: bold; color:#fff; line-height:60px; vertical-align:middle; text-align:center; background:#fd4787; margin:30px auto; padding:1px 50px; border-radius: 5px; box-shadow: 0 4px 0px 0 #cf2863; text-decoration:none;}
.linkto:hover{color:#fff; text-decoration:none; background:#ed366e;}
/*rwd*/
@media screen and (max-width:1270px) {
.introHK1440{
max-width: 1000px;
width: 100%;
margin:0 auto;
padding: 25px 0px;
overflow: hidden;
}
.introHK, .introHK1 {
    max-width: 480px;
    width: 100%;
    float: left;
}
.introHK1 {
    margin-left: 30px;
}
.inforbox ul{
    margin-left:300px; 
    }
.content { margin: 0 auto; padding: 0; width:100%;}
}
@media screen and (max-width:1100px) {
.inforbox ul{
    margin-left:180px; 
    }
}
@media screen and (max-width:1022px){
.introHK, .introHK1 {
    max-width: 480px;
    width: 100%;
    float: none;margin:0 auto;
}
.introHK1{
    margin-left: 0px;
    margin:20px auto;
}
}

@media screen and (max-width:800px) {
.pc{ display:none !important;}
.m{ display:block !important;}
.inforbox ul{
    margin-left: 60px;
}
.inforbox ul li{
    width: 185px;
}
.inforbox ul li a{
    width:185px;
}
.inforbox ul li:hover a{
    width:185px;
}
.content { margin: 0 auto; padding: 0; width:90%;}
.introHK h4,.introHK1 h4{
	padding:15% 0 1% 0;
	font-size:18px;
}

}
@media screen and (max-width:640px) {
.inforbox ul{
    margin-left: 10px;
}
.content { margin: 0 auto; padding: 0; width:90%;}
.introHK h4,.introHK1 h4{
	padding:15% 0 1% 0;
	font-size:16px;
}


}
@media screen and (max-width:480px) {
.inforbox ul{
    margin-left: 30px;
}
.inforbox ul{
    margin-left:80px;
    }
.inforbox ul li{
    width:280px;
    height:50px;
    float:none;
    margin-bottom: 20px;
    margin-left: 0px;
}
.inforbox ul li a{
    width: 280px;
    height:50px;
    font-size:18px;
    line-height:50px;
}
.inforbox ul li:hover a{
    width:100%;
    height:100%; 
}
}
@media screen and (max-width:320px) {
.introTopic p{
display: none;
}
.introHK h4 ,.introHK1 h4{
    display: block;
    max-width: 300px;
    width: 100%;
    height:auto;
    font-size:24px;
    margin:0 auto;
    margin-bottom: 25px;
    text-align: center;
    color: #00a2ff;
}
.introHK h4{
    background-image:none;
}
.introHK1 h4{
    background-image:none;
}
.information h4{
    display: block;
    width: 100%;
    height:auto;
    font-size:24px;
    color: #fff;
    margin:20px auto;
    text-align: center;
    background-image:none;
}
.inforbox ul{
    margin-left:5px;
    }
}