/* IMPORT RESET */
@import url("reset.css");

/* IMPORT 12 COLUMN RESPONSIVE GS */
@import url("responsive.gs.12col.css");
body { background: url(../images/bg.jpg) bottom no-repeat; font-family: "Microsoft JhengHei", "Helvetica", 黑體-繁, sans-serif; }
.container p { font-size: 62.5%; line-height: 1.4em }
.container ol { font-size: 62.5%; line-height: 1.4em }
/*================================
HEADER
================================*/
#siteID { padding: 24px 0 10px 15px; }
#siteID h1 { font-size: 4em; font-weight: 400; font-family: 'Marcellus', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif; }
#siteID .description { font-size: 1.4em; }
/*================================
將圖像尺寸設為100%
================================*/
img { max-width: 100%; height: auto; width /***/: auto; 　/*僅IE8適用*/
}
/*===============================
contents
===============================*/
.box { background: #fff; border-bottom: 10px solid #9FA0A0; padding: 30px 15px 25px; margin-bottom: 0; font-size: 1.5em; position: relative; word-wrap: break-word; font-family: "Microsoft JhengHei", "Helvetica", 黑體-繁, sans-serif; }
.box:after { display: block; clear: both; height: 0; content: ""; }
.box h1 { font-size: 1.5em; font-weight: lighter; border-top: 1px dashed #9FA0A0; margin-top: -5px; padding-bottom: 15px; border-bottom: 1px dashed #00A1DF; margin-bottom: 20px; padding-left: 10px; color: #9FA0A0; line-height: 1.3; text-align: center; }
.box h2 { font-size: 1.2em; color: #00A1DF; background: #EFEFEF; border-left: 2px solid #00A1DF; border-right: 2px solid #00A1DF; padding: 5px 10px; margin-left: 0; margin-bottom: 20px; line-height: 1.3; text-align: center }
.box dl.sponsor { margin-left: 20px; font-size: .62em; line-height: 1.3em }
dl dt { color: #428AA7; float: left; margin-right: -10px; padding: 5px; width: 80px; }
dl dd { margin: -18px 0 -28px 0; padding: 5px 20px 5px 70px; }
.box h3 { font-size: 1.0em; margin-bottom: 20px; padding-left: 10px; line-height: 1.3; color: #00A1DF; }
.box h3 span { font-size: 0.6em; color: #00A1DF; margin-bottom: 20px; padding-left: 10px; line-height: 1.3; }
.box ol.square { list-style-type: square; font-size: .85em }
.box ol.lower { list-style-type: lower-alpha; font-size: 1em; margin-left: -25px }
.box ol img { margin-bottom: 15px; margin-left: 0 auto; line-height: 1.5; }
.box ol span { color: #428AA7; }
.box ol span.green { color: #00B050 }
.box ol span.red { color: #FF0004; }
.box ol span.title { margin: 15px 0; line-height: 1.8em; font-size: 1.2em; color: #428AA7; border: thin #9FA0A0 solid; padding: 2px; }
.box ol span.tips { margin: 15px 0; line-height: 1.8em; font-size: 1em; color: #FF0004; }
.box p { margin-bottom: 15px; margin-left: 25px; }
.box p img { margin-bottom: 15px; margin-left: 0 auto; line-height: 1.5; }
.box p span { color: #428AA7; }
.box p span.green { color: #00B050 }
.box p span.red { color: #FF0004; }
.box p span.title { margin: 15px 0; line-height: 1.8em; font-size: 1.2em; color: #428AA7; border: thin #9FA0A0 solid; padding: 2px; }
.box p span.tips { margin: 15px 0; line-height: 1.8em; font-size: 1em; color: #FF0004; }
.box ul li p { list-style: none; }
.box li p { width: 250px; float: left; margin: 0 30px; overflow: hidden }
.box ul.list li a { color: #000000; font-size: 0.7em; line-height: 1.8em; text-decoration: none; width: 170px; float: left; margin: 15px 20px; overflow: hidden }
.box ul.list li a:hover { color: #f1bb4b; }
.box li.path a { color: #000000; font-size: 0.9em; line-height: 1.8em; text-decoration: none; width: 110px; float: left; margin: 0 22px; overflow: hidden }
.box li.path a:hover { color: #f1bb4b; }
/*===============================
表格的裝飾
===============================*/	
	
.box .air table { width: 90%; border: #CCC 1px solid; margin-left: 45px; font-size: 0.7em; }
.box .air td.start { background-color: #fff; }
.box .air td { text-align: center; vertical-align: middle; border: #CCC 1px solid }
.box .air td p { color: #434248; font-size: 0.9em; margin: 2px; padding: 5px; text-align: center }
.box .air td ol { color: #434248; text-align: left; }
.box .air td table p { color: #434248; font-size: 1.1em; text-align: center; line-height: 1.2em }
.box .mix table { width: 90%; border: #CCC 1px solid; margin: 0px auto 20px auto; }
.box .mix td.start { background-color: #fff; }
.box .mix td { text-align: center; vertical-align: middle; border: #CCC 1px solid }
.box .mix td p { color: #434248; font-size: 1em; margin: 2px; padding: 5px; text-align: center }
.box .mix td ol { color: #434248; text-align: left; line-height: 1.2em }
.box ol table p { color: #434248; font-size: 0.8em; line-height: 1.2em }
.box ol li { margin-left: 25px; margin-right: 0; padding: 5px 20px 5px 0; }
.box ol.font li { font-size: 1.4em; line-height: 1.4em }
.box ol.big li { margin-left: 47px; margin-right: 0; padding: 0 20px 0 0; }
/*===============================
連結的裝飾
===============================*/
/*內容類的一般連結*/
.box a { color: #00A1DF; text-decoration: none; }
.box a:hover { color: #090; text-decoration: underline; }
/*===============================
照片的裝飾
===============================*/
/* 使用陰影的照片裝飾 */
.box img {  padding: 5px; box-shadow: 0 1px 3px #aaa; -webkit-box-shadow: 0 1px 3px #aaa; -moz-box-shadow: 0 1px 3px #aaa; behavior: url(PIE.htc); }
.box img.noshadow { max-width: 20%; background: #fff; padding: 10px; box-shadow: 0 1px 3px #fff; }
.aligncenter { display: block; margin-right: auto; margin-bottom: 2em; }
.alignleft { display: block; float: left; margin-right: 15px; margin-bottom: 1em; }
.aligncenter { display: block; margin: 0 auto; }
.alignright { display: block; float: right; margin-left: 15px; margin-bottom: 1em; }
.alignright0 { display: block; float: right; margin-left: 0; margin-bottom: 1em; }
/*================================
詳細按鈕用
================================*/
p.more { margin: 40px 150px 10px; }
p.more a { position: relative; display: block; padding: 5px 15px 5px; color: #fff; text-align: center; text-decoration: none; background: #f1bb4b; border: 1px solid #e8e8e8; /*圓角*/ border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; /*方塊陰影*/ box-shadow: 2px 2px 4px #aaa; -webkit-box-shadow: 2px 2px 4px #aaa; -moz-box-shadow: 2px 2px 4px #aaa; /*漸層*/ background: #f1bb4b; background: -webkit-gradient(#f1bb4b, #FF0); background: -moz-linear-gradient(#f1bb4b, #FF0); background: linear-gradient(#f1bb4b, #FF0); -pie-background: linear-gradient(#f1bb4b, #FF0); behavior: url(PIE.htc); }
p.more a:hover { background: #f1bb4b; color: #222; background: -webkit-gradient(#f1bb4b, #FF0); background: -moz-linear-gradient(#FF0, #f1bb4b); background: linear-gradient(#FF0, #f1bb4b); -pie-background: linear-gradient(#FF0, #f1bb4b); behavior: url(PIE.htc); text-decoration: none; }
/*================================
SIDEBAR的裝飾
================================*/
#sidebar { font-size: 1.3em; }
.sideinfo { background: #fff; border: 1px solid #999; padding-top: 20px; margin-bottom: 30px; }
.sideinfo h4, .ad h4 { font-size: 1.2em; border-bottom: 2px solid #66A9DD; padding-bottom: 4px; margin-bottom: 15px; }
.ad p { font-size: 0.9em; color: #e8e8e8; padding-bottom: 4px; margin-bottom: 5px; }
.sideinfo h5 { font-weight: bold; line-height: 1.2em; font-size: 0.9em; }
.newentry img { max-width: 55%; float: left; margin: 0 7px 5px 0; border: 1px solid #999; padding: 3px; }
.newentry dd { margin-top: 10px; }
.newentry h5 a { color: #00A0E9; text-decoration: none; }
.newentry h5 a:hover { color: #069; }
.newentry p { margin-bottom: 15px; }
.icon-file-text-alt { font-size: 1.1em; margin: 0 5px 0; }
/*================================
FOOTER
================================*/
#footerContainer { margin-top: 20px; background: #000; }
#footerContainer p { text-align: center; color: #fff; padding: 10px 0; }

@media ( max-width : 768px ) {
/*內容區域側邊留白之設定*/
.span_8, .span_4 { padding-left: 10px; padding-right: 10px; }
/*網站LOGO大小*/
#siteID h1 { font-size: 3em; }
/*詳細按鈕的大小設定*/
p.more { margin: 20px 20px 0; }
p.more a { padding: 10px 0; font-size: 1.3em; }
}
@media only screen and (min-width: 961px) {
.box h1 { font-size: 1.5em; font-weight: lighter; border-top: 1px dashed #9FA0A0; margin-top: -5px; padding-bottom: 10px; padding-top: 10px; border-bottom: 1px dashed #00A1DF; margin-bottom: 20px; padding-left: 10px; color: #9FA0A0; line-height: 1.3; text-align: center; }
}

@media only screen and (min-device-width: 320px) and (max-device-width:480px), only screen and (min-width: 320px) and (max-width:480px) {
.box { background: #fff; font-size: 1.5em; position: relative; word-wrap: break-word; }
.box:after { display: block; clear: both; height: 0; content: ""; }
.box p span.title { text-align: center; font-size: 1.2em; color: #428AA7; }
.box li p { width: 250px; float: left; margin: 0; overflow: hidden }
.box ul.list li a { color: #000000; font-size: 0.8em; line-height: 1.8em; text-decoration: none; width: 110px; float: left; margin: 15px 12px; overflow: hidden }
.box ul.list li a img { width: 110%; }
.box li.path a { color: #000000; font-size: 0.8em; line-height: 1.8em; text-decoration: none; width: 100px; float: left; margin: 0 20px; overflow: hidden }
.box .air table { width: 90%; border: #CCC 1px solid; margin: 0px auto 20px auto; font-size: 0.5em; text-align: center }
.box .mix table { width: 90%; border: #CCC 1px solid; margin: 0px auto 20px auto; font-size: 0.5em; text-align: center }
.box img.noshadow { max-width: 90%; background: #fff; padding: 10px; box-shadow: 0 1px 3px #fff; }
.box ol li { }
}
/*form*/
form > div { clear: both; overflow: hidden; padding: 1px; margin: 0 0 10px 25px; }
form > div > fieldset > div > div { margin: 0 0 5px 0; }
form > div > label, legend { width: 25%; float: left; padding-right: 10px; padding-top: 5px; font-size: 0.8em; }
form > div div >, form > div > fieldset > div { width: 75%; float: right; }
form > div > div > fieldset label { font-size: 1.5em; }
label span.red { color: #FF0004; ; }
fieldset { border: 0; padding: 0; }
form > div > div > input[type=text], form > div > div > input[type=email], form > div > div > input[type=phone], form > div > div > input[type=password], form > div > div > textarea { width: 50.5%; border-top: 1px solid #ccc; border-left: 1px solid #ccc; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; -webkit-appearance: none; }
form > div > div > input[type=text], form > div > div > input[type=email], form > div > div > input[type=phone], form > div > div > input[type=password] { width: 50%; margin: 5px; padding: 10px 5px; -webkit-appearance: none }
form > div > div > input[type=text]:focus, form > div > input[type=email]:focus, form > div > div > input[type=phone]:focus, form > div > div > input[type=password]:focus, form > div > div > textarea:focus { outline: 0; border-color: #4697e4; -webkit-appearance: none; }

@media (max-width: 600px) {
form > div > label,  legend { width: 100%; float: none; margin: 0 0 5px 0; }
form > div > div >,  form > div > fieldset > div { width: 100%; float: none; }
form > div > div > input[type=text], form > div > div > input[type=email],  form > div > div > input[type=phone],  form > div > div > input[type=password], form > div > div > textarea,  textarea,  select { width: 90%; -webkit-appearance: none; }
form > input[type="button"], input[type="submit"], input[type="reset"] {
-webkit-appearance: none;

}
}

@media (min-width: 1200px) {
form > div > div > label,  legend { text-align: right; }
}
/*tourArticle*/
.tourArticle { padding: 20px 0px; background: #fff; }
.tourline1 { display: block; background: url(../images/tourline_01.png) top left no-repeat; background-size: 80px auto; margin: 15px 0px 0px 0px; padding: 10px 0px 30px 70px; color: #54bfc6; font-size: 170%; }
.tourline1 span { font-size: 90%; color: #333; }

@media screen and (max-width: 1000px) {
.tourline1 { background-size: 70px auto; margin: 15px 0px 0px 0px; padding: 10px 0px 10px 60px; font-size: 170%; }
}
.tourline2 { display: block; background: url(../images/tourline_03.png) center left no-repeat; background-size: 80px auto; padding: 30px 0px 30px 70px; line-height: 1.2em; color: #54bfc6; font-size: 170%; }
.tourline2 span { font-size: 90%; color: #333; }
.tourline p { font-size: 90%; color: #333; }

@media screen and (max-width: 1000px) {
.tourline2 { background-size: 70px auto; padding: 10px 0px 10px 60px; font-size: 170%; }
.tourline p { font-size: 90%; color: #333; }
}
.tourline3 { display: block; background: url(../images/tourline_03.png) center left no-repeat; background-size: 80px auto; padding: 30px 0px 30px 70px; color: #54bfc6; font-size: 170%; }

@media screen and (max-width: 1000px) {
.tourline3 { background-size: 70px auto; padding: 10px 0px 10px 60px; font-size: 170%; }
}
.tourline4 { display: block; background: url(../images/tourline_03.png) center left no-repeat; background-size: 80px auto; padding: 30px 0px 30px 70px; color: #ffffff; font-size: 170%; }

@media screen and (max-width: 1000px) {
.tourline4 { background-size: 70px auto; padding: 10px 0px 10px 60px; font-size: 170%; }
}
.tourline5 { display: block; background: url(../images/tourline_03.png) center left no-repeat; background-size: 80px auto; padding: 30px 0px 30px 70px; color: #ffffff; font-size: 170%; }

@media screen and (max-width: 1000px) {
.tourline5 { background-size: 70px auto; padding: 10px 0px 10px 60px; font-size: 170%; }
}
.tourline6 { display: block; background: url(../images/tourline_03.png) center left no-repeat; background-size: 80px auto; padding: 30px 0px 30px 70px; color: #ffffff; font-size: 170%; }

@media screen and (max-width: 1000px) {
.tourline6 { background-size: 70px auto; padding: 10px 0px 10px 60px; font-size: 170%; }
}
.tourline7 { display: block; background: url(../images/tourline_03.png) center left no-repeat; background-size: 80px auto; padding: 30px 0px 30px 70px; color: #ffffff; font-size: 170%; }

@media screen and (max-width: 1000px) {
.tourline7 { background-size: 70px auto; padding: 10px 0px 10px 60px; font-size: 170%; }
}
.tourline { display: block; background: url(../images/tourline_02.png) top left repeat-y; background-size: 80px auto; padding: 0px 0px 0px 100px; }

@media screen and (max-width: 1000px) {
.tourline { background-size: 70px auto; padding: 0px 10px 0px 75px; ; }
}
.tourlineend { display: block; background: url(../images/tourline_05.png) top left no-repeat; background-size: 80px auto; padding: 10px 0px 10px 70px; height: 70px; }

@media screen and (max-width: 1000px) {
.tourlineend { background-size: 70px auto; padding: 10px 0px 10px 60px; }
}
.tour2017 { font-size: 110%; }
.tourlineBox { position: relative; padding: 0px 0px 10px 0px; }
.tourlineBox h3 { padding: 0px 0px 6px 0px; color: #2faaaf; }
.tourlineBox2017 { position: relative; padding: 18px 0px 18px 0px; color: #333; }
.tourlineBox2017 h2 { font-size: 130%; color: #690; padding: 0px 0px 5px 0px; }
.tourlineBox2017 h3 { padding: 2px 0px 6px 0px; color: #2faaaf; }
.tourlineBox2017:before { content: ""; position: absolute; border-style: solid; border-width: 18px 18px 18px 0px; border-color: transparent #54bfc6 transparent transparent; left: -22px; top: 50%; margin-top: -20px; z-index: 10; }
.tourlineBox2017 a { padding: 0px 0px 0px 0px; }
.tourlineSpots { display: block; margin: 0 20px 0 0; overflow: hidden; padding: 17px; background-color: #FFF; border: #54bfc6 solid 5px }
.tourlineBox a { border: 0px #FFFF00 solid; }
.tourlineBox a:hover { border: 0px #FFFF00 solid; }
.tourlineBox2017 a:hover { border: 0px #FFFF00 solid; }
.tourlineBox a:hover * { background-color: #54bfc6; color: #FFF; }
.tourlineBox2017 a:hover * { background-color: #49b9a3; color: #FFF; }
.tourlineBox a:before { content: ""; position: absolute; border-style: solid; border-width: 18px 18px 18px 0px; border-color: transparent #54bfc6 transparent transparent; left: -18px; top: 50%; margin-top: -20px; z-index: 10; }
.tourlineBox2017 a:before { content: ""; position: absolute; border-style: solid; border-width: 18px 18px 18px 0px; border-color: transparent #ffffff transparent transparent; left: -14px; top: 50%; margin-top: -20px; z-index: 10; }
.tourlineBox a:hover:before { border-color: transparent #54bfc6 transparent transparent; }
.tourlineBox2017 a:hover:before { border-color: transparent #49b9a3 transparent transparent; }
.tourlineSpotsLeft { display: block; float: left; width: 32%; }

@media screen and (max-width: 1000px) {
.tourlineSpotsLeft { display: block; float: left; width: 100%; }
}
.tourlineSpotsLeft img { width: 100%; height: auto; display: block; }
.tourlineSpotsRight { display: block; line-height: 1.2em; float: right; width: 65%; color: #333; }

@media screen and (max-width: 1000px) {
.tourlineSpotsRight { display: block; float: right; width: 100%; color: #333; }
}
.tourlineSpotsRight h2 { color: #54bfc6; padding: 0px 0px 10px 0px; }
.tourlineSpotsRight span { position: absolute; top: 10px; right: 20px; padding: 0px 10px 0px 0px; }

@media screen and (max-width: 1000px) {
.tourlineSpotsRight h2 { padding: 15px 0px 15px 0px; }

}

/*tourArticle_end*/

/*round-button*/
.round-button_logo li:hover { background: #f5f5f5; }
/* PC向けおよび大型タブレット向けのレイアウトの指定：737px～960px */
@media only screen and (min-width: 736px) {
	.tag_logo { margin: 0 0 0 3%}
ul .round-button_logo li { float: left;  }
.round-button_logo li  { width: 31%; float: left; height: 0; margin-top: 7%; margin-bottom: 1%; margin-right: 2%; padding-bottom: 30%; border-radius: 50%; border: 2px solid #f5f5f5; overflow: hidden; background: #FFF; box-shadow: 0 0 3px gray; }
	
}
/* PC向けレイアウトの指定：961px以上では固定レイアウト */
@media only screen and (min-width: 961px) {
	.tag_logo { margin: 0 0 0 15%}
ul .round-button_logo li { float: left;  }
.round-button_logo li  { width: 21%; float: left; height: 0; margin-top: 7%; margin-bottom: 1%; margin-right: 10%; padding-bottom: 20%; border-radius: 50%; border: 2px solid #f5f5f5; overflow: hidden; background: #FFF; box-shadow: 0 0 3px gray; }
	
}
@media only screen and ( max-width: 40em ) /* 640 */ {
.tag_logo { margin: 0 0 0 3%}
ul .round-button_logo li { float: left;  }
.round-button_logo li  { width: 31%; float: left; height: 0; margin-top: 7%; margin-bottom: 1%; margin-right: 2%; padding-bottom: 30%; border-radius: 50%; border: 2px solid #f5f5f5; overflow: hidden; background: #FFF; box-shadow: 0 0 3px gray; }
.round-button_logo li:hover { background: #f5f5f5; }
	.round-button_logo li img { display: block; width: 100%; padding: 3%; height: auto; }}