/* ----------------------------------------------------------------
   共用區
-----------------------------------------------------------------*/

@import url(https://fonts.googleapis.com/earlyaccess/cwtexming.css);
* {
	padding: 0;
	margin: 0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	vertical-align: baseline;
}

#travel_footer_img img.img-responsive {
	width: 100%!important;
}

body {
	font-family: "微軟正黑體", Arial, Helvetica, sans-serif;
}

/* 文字選取變色 IE9+、Safari、Chrome*/

body *::selection {
	background-color: #77a800;
	color: #fff!important;
}

/*文字選取變色 Firefox */

body *::-moz-selection {
	background-color: #77a800;
	color: #fff!important;
}

.position_r {
	position: relative;
}

.float-left {
	float: left;
}

.float-right {
	float: right;
}

.float-center {
	margin: 0 auto!important;
	position: relative;
}

.clear {
	clear: both;
	display: block;
	font-size: 0;
	height: 0;
	line-height: 0;
	width: 100%;
	overflow: hidden;
}

a {
	font-size: 1em;
	margin: 0;
	text-decoration: none;
	color: #f23534;
}

a:hover, a:focus, a:active {
	text-decoration: none;
}

a:visited {
	text-decoration: none!important;
}

p {
	font-size: 1.125em;
	color: #000000;
	letter-spacing: 1px;
	text-align: justify;
}

p a {
	/*font-size: 1.125em;
	color: #f23534;
	text-decoration: underline;*/
}

.bg_gray_light {
	background-color: #ebebeb;
}

.bg_white {
	background-color: #FFF;
}

.bg_black {
	background-color: #000;
}

.bg_point {
	background-image: url(../images/bg_point.png);
	background-repeat: repeat-y;
}

.text_center {
	text-align: center;
}

.text_white {
	color: #fff;
}

.text_black {
	color: #000;
}

.text_green {
	font-weight: 400;
	color: #7bac03;
}

.text_blue {
	color: #3a93ef;
}

.text_blue_highlight {
	background-color: #3a93ef;
	color: #fff;
	padding: 0.01em 0.25em;
}

.text_big {
	font-size: 120%!important;
}

.text_small {
	font-size: 70%!important;
}

.text_small_2 {
	font-size: 90%!important;
}

.mg_1 {
	margin: 1em;
}

.mgr_05 {
	margin-right: 0.5em;
}

.mgr_1 {
	margin-right: 1em;
}

.mgr_2 {
	margin-right: 2em;
}

.mgr_3 {
	margin-right: 3em;
}

.mgr_4 {
	margin-right: 4em;
}

.mgb_0 {
	margin-bottom: 0!important;
}

.mgb_05 {
	margin-bottom: 0.5em;
}

.mgb_075 {
	margin-bottom: 0.75em;
}

.mgb_1 {
	margin-bottom: 1em;
}

.mgb_2 {
	margin-bottom: 2em!important;
}

.mgb_3 {
	margin-bottom: 3em;
}

.mgb_4 {
	margin-bottom: 3em;
}

.mgb_6 {
	margin-bottom: 6em;
}

.mgb_8 {
	margin-bottom: 8em;
}

.mgt_0 {
	margin-top: 0!important;
}

.mgt_05 {
	margin-top: 0.5em;
}

.mgt_1 {
	margin-top: 1em;
}

.mgt_2 {
	margin-top: 2em!important;
}

.mgt_25 {
	margin-top: 2.5em!important;
}

.mgt_3 {
	margin-top: 3em;
}

.mgt_4 {
	margin-top: 4em;
}

.mgt_5 {
	margin-top: 5em;
}

.mgt_6 {
	margin-top: 6em;
}

.mgr_0 {
	margin-right: 0;
}

.mgr-1 {
	margin-right: -1em;
}

.mgl_05 {
	margin-left: 0.5em;
}

.mgl_1 {
	margin-left: 1em;
}

.mgl_2 {
	margin-left: 2em;
}

.mgl_3 {
	margin-left: 3em;
}

.mg_0 {
	margin: 0em;
}

.pd_0 {
	padding: 0;
}

.pdlr_0 {
	padding-left: 0;
	padding-right: 0;
}

.pdlr_02 {
	padding: 0 0.2em;
}

.pdl_05 {
	padding-left: 0.5em;
}

.pdr_05 {
	padding-right: 0.5em;
}

.pdb_05 {
	padding-bottom: 0.5em;
}

.pd_1 {
	padding: 1em!important;
}

.pd_3 {
	padding: 3em;
}

.pd_4 {
	padding: 4em;
}

.pd_15 {
	padding: 1.5em;
}

.pd_05 {
	padding: 0.5em;
}

.pdl_0 {
	padding-left: 0;
}

.pdr_0 {
	padding-right: 0;
}

.pdt_0 {
	padding-top: 0;
}

.pdb_0 {
	padding-bottom: 0;
}

.pdb_3 {
	padding-bottom: 3em!important;
}

.pdr_025 {
	padding-right: 0.25em;
}

.pd_2 {
	padding: 2em;
}

.pd_3 {
	padding: 3em;
}

.pdl_1 {
	padding-left: 1em;
}

.pdl_2 {
	padding-left: 2em;
}

.pdl_075 {
	padding-left: 0.75em;
}

.pdr_075 {
	padding-right: 0.75em;
}

.pdr_1 {
	padding-right: 1em;
}

.pdr_2 {
	padding-right: 2em;
}

.pdlr_1 {
	padding: 0 1em;
}

.pdlr_2 {
	padding: 0 2em;
}

.pdlr_3 {
	padding: 0 3em;
}

.pdt_5 {
	padding-top: 5em;
}

.pdtb_1 {
	padding: 1em 0;
}

.pdt_3 {
	padding-top: 3em;
}

.pdt_1 {
	padding-top: 1em;
}

.pdb_05 {
	padding-top: 0.5em;
}

.pdtb_05 {
	padding: 0.5em 0;
}

.lh_1 {
	line-height: 1;
}

.lh_12 {
	line-height: 1.2;
}

.lh_16 {
	line-height: 1.6;
}

.lh_18 {
	line-height: 1.8;
}

.lh_2 {
	line-height: 2;
}

.lh_3 {
	line-height: 3;
}

.lh_0 {
	line-height: 0;
}

#top_btn {
	display: none;
	position: fixed;
	bottom: 120px;
	right: 20px;
	z-index: 9999;
	font-size: 1.8em;
	cursor: pointer;
	width: 90px;
	height: 90px;
	background: none;
	border: none;
}

#top_btn img.event {
	width: 100%;
	margin-bottom: 1em;
}

#top_btn img.top {
	width: 100%;
	margin-bottom: 1em;
}

@media (max-width: 767px) {
	#top_btn {
		font-size: 1em;
		width: 60px;
		height: 60px;
		bottom: 85px;
		right: 10px;
	}
}

/* ----------------------------------------------------------------
   圖片動態
-----------------------------------------------------------------*/

.pic {
	display: inline-block;
	position: relative;
	overflow: hidden;
	border: 4px solid #fff;
}

.pic img {
	display: block;
	position: relative;
	transform: scale(1, 1);
	transition: all 0.5s ease-out;
	/*時間 特效*/
}

.pic:hover img {
	transform: scale(1.2, 1.2);
}

#travel .pic {
	padding-right: 0px;
	padding-left: 0px;
}

#intro .pic, #facebook .pic, header .pic, .bg_gray_light .pic {
	padding-right: 0px!important;
	padding-left: 0px!important;
	border: none;
}

/*bootstrap 5.1.1 使用的樣式*/
.invisible {
  visibility: hidden !important;
}
.flex-row-reverse {
  flex-direction: row-reverse !important;
}
.w-100 {
  width: 100% !important;
}
.img-fluid {
  max-width: 100%;
  height: auto;
}

.d-block {
  display: block !important;
}
.d-none {
  display: none !important;
}
@media (min-width: 992px) {
  .d-lg-none {
    display: none !important;
  }
  .d-lg-block {
    display: block !important;
  }
}

/* ----------------------------------------------------------------
   首頁---主選單 navbar
-----------------------------------------------------------------*/

header {
	margin-top: 100px;
	/* border:1px solid red; */
}

.navbar-header {
	float: none;
	width: 100%;
	/*background-color: #fff;*/
	/*padding: 0.5em 2%;*/
}

.navbar {
	position: fixed;
	/* min-height: 50px; */
	margin-bottom: 0px;
	border: none;
	width: 100%;
	z-index: 9999;
	right: 0;
	background-color: rgba(256, 256, 256, 0.7);
	border-radius: 0;
	top: 0;	
	/* border:1px solid red; */
}
@media (max-width: 991px) {
	.navbar {
		min-height: 70px;
	}
}
@media (min-width: 992px) {		
	.navbar {
		min-height: 100px;
	}
}

.navbar-toggle {
	display: block;
}

.navbar-header .navbar-toggle.navbar-open>.navbar-header .navbar-collapse.collapse.in {
	background-color: rgba(256, 256, 256, 0.7);
}

.navbar-collapse.collapse.in {
	display: block!important;
	background-color: rgba(256, 256, 256, 0);
	padding: 0;
	width: 100%;
	padding-bottom: 2%;
}

.navbar-saga ul {
	margin-bottom: 1em;
	border-bottom: 1px solid #000000;
	padding-bottom: 1em;
	width: 34%;
	background-position: 0 1em!important;
	background-repeat: no-repeat!important;
	padding: 1em 0 2em 150px;
	float: left;
	margin-right: 2%;
	background-size: 120px 120px !important;
}

.navbar-center {
	display: inline-block;
	float: none!important;
	vertical-align: top;
}

.navbar-collapse-center {
	text-align: center;
}

.navbar-saga ul.bg_ul_1 {
	background: url(../images/bg_ul_1.png);
}

.navbar-saga ul.bg_ul_2 {
	background: url(../images/bg_ul_2.png);
}

.navbar-saga ul.bg_ul_3 {
	background: url(../images/bg_ul_3.png);
}

.navbar-saga ul.bg_ul_4 {
	background: url(../images/bg_ul_4.png);
}

.navbar-saga li.title {
	font-size: 1.5em;
	margin-bottom: 0.5em;
	clear: both;
	width: 100%;
	text-align: left;
}

.navbar-nav>li {
	float: left;
	width: 50%;
	text-align: left;
}

.navbar-saga li a {
	display: block;
	color: #000;
	font-weight: 500;
	font-size: 1.125em;
	margin: 0 0 0 0;
	line-height: 1.5;
	transition: all 0.1s linear;
	padding: 0 0 0 0;
	margin-bottom: 6%;
}

.navbar-saga li a:hover {
	color: #77a800;
	background: none;
}

@media (max-width: 1368px) {
	.navbar-saga li a {
		font-size: 1.125em;
	}
	.navbar-saga ul {
		background-position: 0 2.75em!important;
		background-size: 90px 90px !important;
		padding: 1em 0 2em 100px;
	}
}

.navbar-toggle {
	position: relative;
	float: right;
	margin: 0.25em 0.85em 0 0;
	background-image: none;
	border: 1px solid transparent;
	border-radius: 50%;
	/*border: 1px solid #333;*/
}

.navbar-toggle .icon-bar {
	background-color: #333;
}

.navbar-collapse.collapse {
	display: none!important;
}

.collapsing {
	overflow: hidden!important;
}

.logo {
	height: 80px;
	margin: 0.25em 1em;
}

@media (max-width: 1200px) {
	.navbar-saga ul {
		background-position: 0 2.75em!important;
		background-size: 80px 80px !important;
		padding: 1em 0 2em 90px;
	}
	.navbar-saga li a {
		font-size: 1em;
	}
}

@media (max-width: 1024px) {
	.navbar {
		width: 100%;
	}
	.navbar-saga ul {
		width: 100%;
		background: none!important;
		padding: 1em 0 2em 5%;
	}
	.navbar-collapse.collapse.in {
		width: 100%;
		/*height: 100vh!important;*/
		padding: 0 2%;
		background-color: rgba(256, 256, 256, 0.7);
	}
	.navbar-header {
		background-color: rgba(256, 256, 256, 0.7);
	}
}

@media (max-width: 991px) {
	.logo {
		height: 55px;
		margin: 0.25em 0.5em;
	}
	header {
		margin-top: 70px;
	}
	.navbar-toggle {
		position: relative;
		float: right;
		margin: 0.1em 0.25em 0 0;
		background-image: none;
		border: 1px solid transparent;
		padding: 9px 1px;
		border-radius: 50%;
	}
}
@media (max-width: 414px) {
	.navbar {
		/* position: absolute!important; */
	}
	.navbar-saga li a {
		font-size: 1em;
	}
	.navbar-saga ul {
		padding: 1em 0 1em 5%;
		margin-bottom: 0;
	}
}

@media (max-width: 320px) {
	.logo {
		height: 48px;
		margin: 0.25em 0.5em;
	}
}


@media (max-width: 991px) {	
	.navbar-ex1-collapse-ul {
		height: 0;		
	}
	.navbar-ex1-collapse-ul.in {
		height: calc(100vh - 55px);		
	}
}


/* ----------------------------------------------------------------
   首頁---主選單 輪播BANNER
-----------------------------------------------------------------*/

.carousel-fade .carousel-inner .item {
	transition-property: opacity;
}

.carousel-fade .carousel-inner .item, .carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.right {
	opacity: 0;
}

.carousel-fade .carousel-inner .active, .carousel-fade .carousel-inner .next.left, .carousel-fade .carousel-inner .prev.right {
	opacity: 1;
}

.carousel-fade .carousel-inner .next, .carousel-fade .carousel-inner .prev, .carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.right {
	left: 0;
	transform: translate3d(0, 0, 0);
}

.carousel-fade .carousel-control {
	z-index: 2;
}

.carousel-inner h1 {
	display: block;
	height: 324px;
	width: 100%;
	background: url(../images/h1_header.png) no-repeat center 0;
	text-indent: -9999px;
	position: absolute;
	left: 0;
	top: 20%;
	z-index: 2;
}

.carousel-inner span {
	display: block;
	height: 42px;
	width: 100%;
	background: url(../images/h2_header.png) no-repeat center 0;
	text-indent: -9999px;
	position: absolute;
	left: 0;
	bottom: -70px;
	z-index: 2;
}

.item, .item .active {
	background-color: #000;
}

.item img, .item .active img {
	opacity: 0.85;
}

@media (max-width: 1024px) {
	.carousel-inner {
		/*padding-top: 70px;*/
		margin-top: 70px;
	}
}

@media (max-width: 991px) {
	.carousel-inner h1 {
		top: 12%;
		display: block;
		height: 0;
		width: 20%;
		background: url(../images/h1_header.png) no-repeat center 0;
		text-indent: -9999px;
		position: absolute;
		background-size: 94%;
		padding-bottom: 50%;
		left: 40%;
		z-index: 2;
	}
	.carousel-inner h2 {
		display: block;
		height: 42px;
		width: 100%;
		background: url(../images/h2_header.png) no-repeat center 0;
		text-indent: -9999px;
		position: absolute;
		left: 0;
		top: 69%;
		z-index: 2;
	}
}

@media (max-width: 414px) {
	.carousel-inner h1 {
		display: block;
		height: 0;
		width: 20%;
		background: url(../images/h1_header.png) no-repeat center 0;
		text-indent: -9999px;
		position: absolute;
		background-size: cover;
		padding-bottom: 54%;
		left: 40%;
		top: 5%;
		z-index: 2;
	}
}

/* ----------------------------------------------------------------
   首頁
-----------------------------------------------------------------*/

#intro {
	width: 100%;
	height: auto;
	padding: 0 0 0 0;
	/*overflow: hidden;*/
	position: relative;
}

#intro .pd {
	padding: 4em 4em;
}

#intro h3 {
	font-family: "Noto Serif TC", ‘cwTeXMing’, serif;
	font-size: 2.5em;
	line-height: 1.6;
	font-weight: bold;
}

#intro h4 {
	font-family: "Noto Serif TC", ‘cwTeXMing’, serif;
	font-size: 1.45em;
	font-weight: bold;
}

#intro p {
	line-height: 2;
	font-size: 1.125em;
}

#intro ul {
	margin-top: 1.5em;
}

#intro li {
	list-style: none;
}

#intro li a {
	display: inline-block;
	padding: 0.25em 1em;
	color: #000;
	text-align: center;
	font-size: 1em;
	border: 1px solid #000;
	transition: all 0.3s linear;
	margin: 0 1em 1em 0;
}

#intro li a:hover {
	background-color: #77a800;
	border: 1px solid #77a800;
	color: #fff;
}

.img_hokkaidomap {
	/*position: absolute;*/
	/*left: 205px;*/
	/*top: 265px;*/
	z-index: 3;
}

.intro_content {
	padding: 5% 7%;
	overflow: hidden;
}

.intro_content ul {
	margin-top: 1.5em;
	width: 75%;
}

.intro_content li {
	list-style: none;
	float: left;
}

.intro_content li a {
	display: inline-block;
	padding: 0.25em 1em;
	color: #000;
	text-align: center;
	font-size: 1em;
	border: 1px solid #000;
	transition: all 0.3s linear;
	background-color: none;
	margin: 0 1em 1em 0;
}

.intro_content li a:hover {
	background-color: #77a800;
	border: 1px solid #77a800;
	color: #fff;
}

@media (max-width: 1368px) {
	#intro .pd {
		padding: 1em 2em;
	}
}

@media (max-width: 1024px) {}

@media (max-width: 991px) {
	#intro h3 {
		font-size: 1.5em;
	}
	#intro h4 {
		font-size: 1.125em;
	}
	#intro p {
		font-size: 1em;
	}
}

/* ----------------------------------------------------------------
   首頁--- facebook
-----------------------------------------------------------------*/

#facebook {
	padding: 5% 0;
	overflow: hidden;
}

#facebook .img_facebook {
	width: 20%;
	float: left;
	position: relative;
	background: url(../images/img_facebook_3.jpg) no-repeat center center;
	background-size: cover;
	height: 0;
	padding-bottom: 20%;
}

#facebook .img_facebook p {
	font-size: 1.125em;
	letter-spacing: 1px;
	text-align: center;
	z-index: 4;
	margin-top: 36%;
}

#facebook .facebook_btn {
	width: 100%;
	display: block;
	text-align: center;
	background: none;
	letter-spacing: 1px;
	font-size: 1.5em;
}

#facebook .facebook_btn span {
	border: 1px solid #000;
	transition: all 0.5s linear;
	width: 100%;
	display: inline;
	color: #fff;
	background-color: none;
	border: 1px solid #fff;
	text-align: center;
	padding: 1% 8%;
}

#facebook .facebook_btn:hover span {
	background-color: #3b5a9a;
	border: none;
}

@media (max-width: 766px) {
	#facebook .img_facebook {
		width: 100%;
		float: left;
		position: relative;
		background: url(../images/img_facebook_mobile.gif) no-repeat center center;
		background-size: cover;
		height: 0;
		padding-bottom: 100%;
	}
	#facebook .facebook_btn span {
		background-color: #3b5a9a;
		border: none;
	}
}

/* ----------------------------------------------------------------
   首頁--- footer
-----------------------------------------------------------------*/

footer {
	background-color: #fff;
	padding: 0 0 2% 0;
}

footer .footer_logo, footer .share {
	width: 100%;
	display: block;
	text-align: center;
	background: none;
}

footer .footer_logo span, footer .share span {
	text-align: center;
	display: inline;
}

footer a {
	color: #000;
	text-decoration: underline;
}

footer a:hover {
	color: #77a800;
	text-decoration: none;
}

footer .share a {
	display: inline-block;
}

footer img {
	margin-bottom: 1.5em;
}

@media (max-width: 414px) {
	footer {
		padding: 2% 5%;
	}
}

/* ----------------------------------------------------------------
   鐵道頁--- railway.html
-----------------------------------------------------------------*/

#railway {
	width: 100%;
	padding: 2% 7%;
	overflow: hidden;
}

#traffic {
	width: 100%;
	padding: 5% 7%;
	overflow: hidden;
}

#railway h1 {
	font-family: "Noto Serif TC", ‘cwTeXMing’, serif;
	font-size: 2.5em;
	line-height: 1.6;
	font-weight: bold;
	text-align: center;
	letter-spacing: 1px;
}

#railway h2 {
	font-family: "Noto Serif TC", ‘cwTeXMing’, serif;
	font-size: 2.125em;
	line-height: 2;
	font-weight: bold;
	margin: 2em 0 1em 0;
	text-align: center;
}

#traffic h2 {
	font-family: "Noto Serif TC", ‘cwTeXMing’, serif;
	font-size: 2.125em;
	line-height: 2;
	font-weight: bold;
	margin: 0em 0 1em 0;
	text-align: center;
}

#railway h2 span, #traffic h2 span {
	border-bottom: 1px solid #000;
	text-align: center;
	display: inline;
	padding: 0.25em 0;
}

#railway h3 {
	font-size: 1.5em;
	font-weight: bold;
	margin-top: 0;
}

#railway p {
	font-size: 1.125em;
	line-height: 1.8;
	padding: 0 2%!important;
}

#traffic p {
	font-size: 1.125em;
	line-height: 1.8;
	padding: 0 2%;
	text-align: center;
}

#traffic span a, #traffic span a:visited {
	color: #7bac03;
	text-decoration: underline;
}

#traffic span a:hover {
	text-decoration: none;
}

.btn_white {
	width: 100%;
	display: block;
	/*text-align: center;*/
	text-align: left;
	background: none;
	margin: 1em 0;
}

.btn_white span {
	display: inline;
	padding: 0.25em 1.25em;
	color: #000;
	text-align: center;
	font-size: 1em;
	border: 1px solid #000;
	transition: all 0.3s linear;
	background-color: none;
}

.btn_white:hover span {
	background-color: #77a800;
	border: 1px solid #77a800;
	color: #fff;
}

.master {
	width: 100%;
	margin: 2.5em 0 0em 0;
	background: url(../images/bg_hokkaido_master.png) no-repeat center top;
	border-bottom: 3px solid #000;
	overflow: hidden;
	padding: 0 15%;
}

.master h3 {
	margin-top: 2em!important;
	font-size: 1.5em;
    font-weight: bold;
}

.master ul {}

.master li {
	list-style: none;
	font-size: 1.375em;
	line-height: 2;
	padding-left: 30px;
	background: url(../images/icon_li.png) no-repeat 0 3px;
}

.master li a {
	color: #fff;
	background-color: #77a800;
	text-align: center;
	font-size: 80%;
	padding: 0.1em 0.75em 0.25em 0.75em;
	transition: all 0.5s ease-out;
}

#mystery {
	width: 100%;
	padding: 5% 0 0 0;
	overflow: hidden;
	margin-bottom: 5%;
}

#mystery h4 {
	font-size: 2em;
	/*font-weight: bold;*/
	margin-top: 0;
	text-align: center;
	font-family: "Noto Serif TC", ‘cwTeXMing’, serif;
}

.btn_white_2 {
	width: 100%;
	display: block;
	text-align: center;
	background: none;
	margin: 1em 0 2em 0;
	font-size: 1.5em;
	line-height: 3;
	color: #000;
	text-align: center;
	border: 1px solid #000;
	background-color: #fff;
	transition: all 0.3s linear;
}

.btn_white_2:hover {
	background-color: #77a800;
	border: 1px solid #77a800;
	color: #fff;
}

@media (max-width: 991px) {
	#railway {
		width: 100%;
		padding: 2% 2%;
		overflow: hidden;
	}
	#traffic {
		width: 100%;
		padding: 5% 2%;
		overflow: hidden;
	}
	.btn_white_2 {
		font-size: 1em;
	}
	#railway h1 {
		font-size: 1.5em;
	}
	#railway p, #traffic p {
		font-size: 1em;
		text-align: justify;
	}
	#railway h2 {
		font-size: 1.25em;
	}
	#railway h3 {
		font-size: 1.25em;
	}
	.master li {
		font-size: 1em;
	}
	#traffic h2 {
		font-size: 1.25em;
	}
	#mystery h4 {
		font-size: 1.25em;
		margin-bottom: 1em;
	}
}

/* ----------------------------------------------------------------
   釧路--- kushiro.html
-----------------------------------------------------------------*/

#travel {
	width: 100%;
	padding: 1% 7% 3% 7%;
	overflow: hidden;
}

#travel h1 {
	font-family: "Noto Serif TC", ‘cwTeXMing’, serif;
	font-size: 2.5em;
	line-height: 0;
	text-align: center;
	letter-spacing: 1px;
	font-weight: bold;
	margin-bottom: 2%;
	display: block;
}

.jpfont {
	font-family: 'Noto Serif JP', serif;
}

#travel h1 img {
	display: inline;
	vertical-align: bottom;
}

#travel p {
	line-height: 1.6;
	letter-spacing: 0;
}

#travel .professional {
	width: 600px;
	height: 310px;
	margin: 0 auto;
	padding: 10% 17% 0 2%;

}


#travel .professional_kushiro {
	background: url(../images/bg_professional_kushiro.png) no-repeat right 0;
}

#travel .professional_abashiri {
	background: url(../images/bg_professional_abashiri.png) no-repeat right 0;
}

#travel .professional_obihiro {
	background: url(../images/bg_professional_obihiro.png) no-repeat right 0;
}

/*夏季*/

#travel .professional_summer_kushiro {
	background: url(../images/summer/bg_professional_kushiro.png) no-repeat right 0;
}

#travel .professional_summer_abashiri {
	background: url(../images/summer/bg_professional_abashiri.png) no-repeat right 0;
}

#travel .professional_summer_obihiro {
	background: url(../images/summer/bg_professional_obihiro.png) no-repeat right 0;
}

/*秋季*/

#travel .professional_autumn_kushiro {
	background: url(../images/autumn/bg_professional_kushiro.png) no-repeat right 0;
}

#travel .professional_autumn_abashiri {
	background: url(../images/autumn/bg_professional_abashiri.png) no-repeat right 0;
}

#travel .professional_autumn_obihiro {
	background: url(../images/autumn/bg_professional_obihiro.png) no-repeat right 0;
}

/*冬季*/

#travel .professional_winter_kushiro {
	background: url(../images/winter/bg_professional_kushiro.png) no-repeat right 0;
}

#travel .professional_winter_abashiri {
	background: url(../images/winter/bg_professional_abashiri.png) no-repeat right 0;
}

#travel .professional_winter_obihiro {
	background: url(../images/winter/bg_professional_obihiro.png) no-repeat right 0;
}

#travel .professional p {
	line-height: 2;
}

.bg_point h3 {
	font-family: "Noto Serif TC", ‘cwTeXMing’, serif;
}

#travel .box_kushiro {
	width: 90%;
	margin: 0 auto;
	overflow: hidden;
	background-position: center 6em;
	padding-bottom: 2em;
}

#travel .start {
	width: 100%;
	height: 73px;
	background: url(../images/title_start.jpg) no-repeat center center;
}

#travel .box_abashiri {
	width: 90%;
	margin: 0 auto;
	overflow: hidden;
	background-position: center 6em;
	padding-bottom: 2em;
}

#travel .box_obihiro {
	width: 90%;
	margin: 0 auto;
	overflow: hidden;
	background-position: center 6em;
	padding-bottom: 2em;
}

#travel .box_kushiro .title {
	width: 100%;
	height: 54px;
	background: url(../images/title_box_kushiro.jpg) no-repeat center center;
	text-indent: -9999px;
}

#travel .box_abashiri .title {
	width: 100%;
	height: 54px;
	background: url(../images/title_box_abashiri.jpg) no-repeat center center;
	text-indent: -9999px;
}

#travel .box_obihiro .title {
	width: 100%;
	height: 54px;
	background: url(../images/title_box_obihiro.jpg) no-repeat center center;
	text-indent: -9999px;
}

/*夏季*/

#travel .box_kushiro .title_summer {
	width: 100%;
	height: 54px;
	background: url(../images/summer/title_box_kushiro.jpg) no-repeat center center;
	text-indent: -9999px;
}

#travel .box_abashiri .title_summer {
	width: 100%;
	height: 54px;
	background: url(../images/summer/title_box_abashiri.jpg) no-repeat center center;
	text-indent: -9999px;
}

#travel .box_obihiro .title_summer {
	width: 100%;
	height: 54px;
	background: url(../images/summer/title_box_obihiro.jpg) no-repeat center center;
	text-indent: -9999px;
}

/*秋季*/

#travel .box_kushiro .title_autumn {
	width: 100%;
	height: 54px;
	background: url(../images/autumn/title_box_kushiro.jpg) no-repeat center center;
	text-indent: -9999px;
}

#travel .box_abashiri .title_autumn {
	width: 100%;
	height: 54px;
	background: url(../images/autumn/title_box_abashiri.jpg) no-repeat center center;
	text-indent: -9999px;
}

#travel .box_obihiro .title_autumn {
	width: 100%;
	height: 54px;
	background: url(../images/autumn/title_box_obihiro.jpg) no-repeat center center;
	text-indent: -9999px;
}

/*冬季*/

#travel .box_kushiro .title_winter {
	width: 100%;
	height: 54px;
	background: url(../images/winter/title_box_kushiro.jpg) no-repeat center center;
	text-indent: -9999px;
}

#travel .box_abashiri .title_winter {
	width: 100%;
	height: 54px;
	background: url(../images/winter/title_box_abashiri.jpg) no-repeat center center;
	text-indent: -9999px;
}

#travel .box_obihiro .title_winter {
	width: 100%;
	height: 54px;
	background: url(../images/winter/title_box_obihiro.jpg) no-repeat center center;
	text-indent: -9999px;
}

#travel .travel_information {
	margin: 0.5em 0;
	position: relative;
}

#travel .travel_information h3 {
	border-bottom: 1px solid #000;
	font-family: "Noto Serif TC", ‘cwTeXMing’, serif;
	font-size: 2.125em;
	line-height: 2;
	font-weight: bold;
	display: inline;
	margin: 2em 0px 1em;
	position: relative;
}

h3 img {
	vertical-align: top;
}

#travel .travel_information h4 {
	font-size: 1.125em;
	font-family: "Noto Serif TC", ‘cwTeXMing’, serif;
	color: #000;
	background: url(../images/bg_h4.png) no-repeat left top;
	height: 37px;
	text-align: center;
	padding-top: 1%;
	width: 128px;
	margin: 0;
}

#travel .travel_information h5 {
	font-size: 1.125em;
	font-family: "Noto Serif TC", ‘cwTeXMing’, serif;
	color: #000;
	background: url(../images/bg_h5.png) no-repeat left top;
	height: 37px;
	text-align: center;
	width: 145px;
	padding-top: 1%;
	margin: 0;
}

#travel .travel_information h6 {
	font-size: 1.125em;
	font-family: "Noto Serif TC", ‘cwTeXMing’, serif;
	color: #000;
	background: url(../images/bg_h6.png) no-repeat left top;
	height: 37px;
	text-align: center;
	width: 165px;
	padding-top: 1%;
	margin: 0;
}

#travel .travel_information p {
	padding-bottom: 1em;
	background: url(../images/bg_point_2.png) repeat-x;
	background-position: left bottom;
	line-height: 1.8;
}

#travel .abashiri_img {
	position: absolute;
	right: 25px;
	top: 347px;
}

#travel .abashiri_img_2 {
	position: absolute;
	left: 270px;
	top: 190px;
}

.recommend {
	background-position: center top!important;
	padding: 2em 3em 4.5em 4em;
}

.recommend3 {
	padding: 2em 3em 13.5em 4em!important;
}

.recommend4 {
	background-position: center top!important;
	padding: 3em 3em 8.5em 4em;
}

.recommend5 {
	background-position: center top!important;
	padding: 3em 3em 9.5em 4em;
}

.recommend6 {
	background-position: center top!important;
	padding: 3em 3em 8em 4em;
}

.recommend7 {
	padding: 2em 3em 15.5em 4em!important;
}

.recommend8 {
	background-position: center top!important;
	padding: 2em 3em 8.5em 4em;
}

.recommend9 {
	padding: 2em 3em 13.5em 4em!important;
}

.recommend_box {
	background-color: #ebebeb;
	border: 4px solid #000;
	padding: 0.5em 1.5em;
}

.recommend_2 {
	background-color: #f6d7d7;
	padding: 0.5em 0.5em;
	border-radius: 18px;
	overflow: hidden;
	margin: 2em 0;
}

.recommend_box_2 {
	background-color: #f6d7d7;
	border: 3px solid #fff;
	padding: 0.75em 1.75em 0 1.75em;
	border-radius: 18px;
}

.recommend_box_2 .title {
	font-family: "Noto Serif TC", ‘cwTeXMing’, serif;
	font-size: 1.375em!important;
	line-height: 2.2;
	font-weight: bold;
	text-align: center;
	margin: 0;
	letter-spacing: 1px;
}

.recommend_box_2 p {
	background: none!important;
	font-size: 1.1em;
	line-height: 1.4!important;
}

.recommend_box h5, .recommend_box h5 a {
	font-size: 1.375em;
	font-family: "Noto Serif TC", ‘cwTeXMing’, serif;
	color: #000;
	font-weight: 600;
}

.recommend_box p {
	font-size: 1em;
}

.recommend_3 {
	background-position: center top!important;
	padding: 3.5em 3em 3.5em 4em;
}

#travel_footer_img {
	width: 100%;
	margin-bottom: 5%;
}

@media (max-width: 991px) {
	#travel p {
		text-align: justify;
		font-size: 1em;
	}
	#travel .professional {
		width: 100%;
		height: auto;
		overflow: hidden;
		padding: 16% 32% 12% 25%;
		background-size: 78%;
	}
	#travel .professional p {
		line-height: 1.6;
		text-align: justify;
	}
	#travel .box {
		width: 100%;
	}
	#travel .bg_point {
		width: 90%;
		margin: 0 auto;
		overflow: hidden;
		background-position: center 6em !important;
		padding-bottom: 2em;
		background-size: 10px 20px;
	}
	#travel .box .title {
		background-color: #000;
		color: #fff;
		font-family: "Noto Serif TC", ‘cwTeXMing’, serif;
		font-size: 1.375em;
		text-align: center;
		padding: 0.5em 0;
		letter-spacing: 1px;
		margin-bottom: 1em;
	}
	#travel .travel_information p {
		text-align: justify;
	}
	.recommend {
		padding: 1em 1em 0em 1em;
	}
	.recommend_box {
		padding: 1em 0.5em;
	}
	#travel .abashiri_img, #travel .abashiri_img_2 {
		position: relative;
		right: 0px;
		top: 0px;
		bottom: 0;
		left: 0;
		float: right;
		margin-bottom: 1em;
	}
	.box .col-sm-6, .box .col-xs-12, .recommend .col-sm-3, .bg_point .col-sm-3 {
		padding: 0;
	}
	.box .col-sm-6 p, .box .col-xs-12 p {
		padding: 0.5em 2em;
	}
	.bg_point .col-sm-3 p, .recommend .col-sm-3 p {
		padding: 0.5em 2em 0 15%;
	}
	.recommend_box_2 {
		padding: 0.75em 0.75em 0 0.75em;
	}
	#travel h1 {
		font-size: 1.5em;
		line-height: 1.6;
		margin-bottom: 0;
	}
	#travel .travel_information h4, #travel .travel_information h5, #travel .travel_information h6 {
		font-size: 1.1em;
	}
	.recommend3 {
		padding: 0em 0em 3.5em 0em!important;
	}
	.recommend7 {
		padding: 0em 0em 3.5em 0em!important;
	}
	.recommend8 {
		padding: 1em 0em 1em 2.5em!important;
	}
	.recommend9 {
		padding: 0em 0em 1.5em 0em!important;
	}
}

@media (max-width: 760px) {
	#travel .bg_point {
		width: 90%;
		margin: 0 auto;
		overflow: hidden;
		background-position: 20% 6em !important;
		padding-bottom: 2em;
		background-size: 10px 20px;
	}
}

@media (max-width: 600px) {
	#travel .professional {
		padding: 110% 6% 10% 6%;
		width: 100%;
		background-size: 100%!important;
		background-repeat: no-repeat;
		background-position: center top;
	}
	#travel .bg_point {
		width: 90%;
		margin: 0 auto;
		overflow: hidden;
		background-position: 10% 6em !important;
		padding-bottom: 2em;
		background-size: 10px 20px;
	}
	.recommend h5 img {
		border: 0;
		height: 2.75em;
		margin-left: 0.5em;
		margin-right: 0.5em;
	}
	#travel .professional_kushiro {
		background-image: url(../images/bg_professional_kushiro_phone.png)!important;
	}
	#travel .professional_abashiri {
		background-image: url(../images/bg_professional_abashiri_phone.png)!important;
	}
	#travel .professional_obihiro {
		background-image: url(../images/bg_professional_obihiro_phone.png) !important;
	}
	/*夏季*/
	#travel .professional_summer_kushiro {
		background-image: url(../images/summer/bg_professional_kushiro_phone.png)!important;
	}
	#travel .professional_summer_abashiri {
		background-image: url(../images/summer/bg_professional_abashiri_phone.png)!important;
	}
	#travel .professional_summer_obihiro {
		background-image: url(../images/summer/bg_professional_obihiro_phone.png) !important;
	}
	/*秋季*/
	#travel .professional_autumn_kushiro {
		background-image: url(../images/autumn/bg_professional_kushiro_phone.png)!important;
	}
	#travel .professional_autumn_abashiri {
		background-image: url(../images/autumn/bg_professional_abashiri_phone.png)!important;
	}
	#travel .professional_autumn_obihiro {
		background-image: url(../images/autumn/bg_professional_obihiro_phone.png) !important;
	}
	/*冬季*/
	#travel .professional_winter_kushiro {
		background-image: url(../images/winter/bg_professional_kushiro_phone.png)!important;
	}
	#travel .professional_winter_abashiri {
		background-image: url(../images/winter/bg_professional_abashiri_phone.png)!important;
	}
	#travel .professional_winter_obihiro {
		background-image: url(../images/winter/bg_professional_obihiro_phone.png) !important;
	}
}

@media (max-width: 414px) {
	#travel .professional {
		padding: 100% 6% 0 6%;
		padding-bottom: 0%;
	}
	#travel .travel_information h3 {
		font-size: 1.75em;
		line-height: 1.6;
	}
	#travel h1 img {
		display: block!important;
	}
}

@media (max-width: 375px) {
	#travel .professional {
		padding: 110% 6% 0 6%;
	}
	.recommend_box_2 .title {
		font-size: 1.125em!important;
	}
}

@media (max-width: 320px) {
	#travel .professional {
		padding: 116% 6% 0 6%;
	}
	#travel .travel_information h4, #travel .travel_information h5, #travel .travel_information h6 {
		padding-top: 2.5%;
	}
	.recommend_box h5 {
		font-size: 1.1em!important;
	}
}

/* ----------------------------------------------------------------
   釧路--- kushiro.html
-----------------------------------------------------------------*/

#railway_photo {
	width: 100%;
	padding: 6% 15% 2% 15%;
	/*overflow: hidden;*/
	position: relative;
}

#railway_photo .carousel {
	margin-bottom: 6em;
}

#railway_photo .carousel-inner {
	margin-top: 0;
}

#railway_photo #myCarousel .carousel-control.left, #railway_photo #myCarousel-3 .carousel-control.left {
	left: -4%;
	top: 40%;
}

#railway_photo #myCarousel .carousel-control.right, #railway_photo #myCarousel-3 .carousel-control.right {
	left: 73.5%;
	top: 40%;
}

#railway_photo #myCarousel-2 .carousel-control.right {
	left: 90.5%;
	top: 40%;
}

#railway_photo #myCarousel-2 .carousel-control.left {
	left: 11.5%!important;
	top: 40%;
}

#railway_photo .carousel-control.left, #railway_photo .carousel-control.right {
	background-image: none;
}

#railway_photo .item, #railway_photo .item .active {
	background-color: #fff;
}

#railway_photo .item img, #railway_photo .item .active img {
	opacity: 1;
}

#railway_photo .carousel-control {
	filter: alpha(opacity=100);
	opacity: 1;
}

#railway_photo .carousel-control:focus, #railway_photo .carousel-control:hover {
	filter: alpha(opacity=100);
	opacity: 1;
}

#railway_photo .carousel-inner>.item, #railway_photo .carousel-inner>.item .active {
	/*position: relative; */
	/*overflow: hidden;*/
	height: 0;
	width: 100%;
	padding-bottom: 58.18%;
}

#railway_photo .carousel-inner .box {
	position: absolute;
	right: 0%;
	bottom: -1px;
	background-color: #fff;
	padding: 1.5% 2% 0.85% 2%;
	z-index: 998;
}

#railway_photo .box h2 {
	font-family: "Noto Serif TC", ‘cwTeXMing’, serif;
	font-size: 1.875em;
	line-height: 1.6;
	font-weight: 400;
	text-decoration: underline;
	letter-spacing: 1px;
	margin-top: 0px;
}

#railway_photo p {
	font-size: 1.125em;
	line-height: 1.6;
}

@media (max-width: 1280px) {
	#railway_photo {
		padding: 6% 6%;
	}
	#railway_photo .carousel-inner .box {
		padding: 1% 4%;
		position: relative!important;
		right: 0%;
		bottom: 0;
		width: 100%;
	}
	#railway_photo #myCarousel .carousel-control.right, #railway_photo #myCarousel-3 .carousel-control.right {
		left: 73%;
		top: 34%;
	}
	#railway_photo #myCarousel .carousel-control.left, #railway_photo #myCarousel-3 .carousel-control.left {
		top: 34%;
	}
	#railway_photo #myCarousel-2 .carousel-control.left {
		top: 34%;
	}
	#railway_photo #myCarousel-2 .carousel-control.right {
		left: 89.5%;
		top: 34%;
	}
}

@media (max-width: 1200px) {
	#railway_photo #myCarousel .carousel-control.right, #railway_photo #myCarousel-3 .carousel-control.right {
		left: 89.5%;
	}
	#railway_photo #myCarousel-2 .carousel-control.left {
		left: -4.5%!important;
	}
}

@media (max-width: 991px) {
	#railway_photo .box h2 {
		position: relative;
		text-indent: 0;
	}
	#railway_photo #myCarousel .carousel-control.right, #railway_photo #myCarousel .carousel-control.left, #railway_photo #myCarousel-2 .carousel-control.right, #railway_photo #myCarousel-2 .carousel-control.left, #railway_photo #myCarousel-3 .carousel-control.right, #railway_photo #myCarousel-3 .carousel-control.left {
		top: 33%;
	}
	#railway_photo .box h2 {
		font-size: 1.5em;
	}
	#railway_photo p {
		font-size: 1em;
	}
	#railway_photo .carousel-inner>.item, #railway_photo .carousel-inner>.item .active {
		padding-bottom: 61.18%;
	}
}

@media (max-width: 650px) {
	#railway_photo #myCarousel .carousel-control.right, #railway_photo #myCarousel .carousel-control.left, #railway_photo #myCarousel-2 .carousel-control.right, #railway_photo #myCarousel-2 .carousel-control.left, #railway_photo #myCarousel-3 .carousel-control.right, #railway_photo #myCarousel-3 .carousel-control.left {
		top: 28%;
	}
	#railway_photo .carousel-control.right img, #railway_photo .carousel-control.left img {
		height: 1em;
	}
	#railway_photo .carousel-inner>.item, #railway_photo .carousel-inner>.item .active {
		padding-bottom: 64.18%;
	}
	#railway_photo .carousel {
		margin-bottom: 2em;
	}
}

@media (max-width: 450px) {
	#railway_photo #myCarousel .carousel-control.right, #railway_photo #myCarousel .carousel-control.left, #railway_photo #myCarousel-2 .carousel-control.right, #railway_photo #myCarousel-2 .carousel-control.left, #railway_photo #myCarousel-3 .carousel-control.right, #railway_photo #myCarousel-3 .carousel-control.left {
		top: 22%;
	}
}

@media (max-width: 375px) {
	#railway_photo #myCarousel .carousel-control.right, #railway_photo #myCarousel .carousel-control.left, #railway_photo #myCarousel-2 .carousel-control.right, #railway_photo #myCarousel-2 .carousel-control.left, #railway_photo #myCarousel-3 .carousel-control.right, #railway_photo #myCarousel-3 .carousel-control.left {
		top: 18%;
	}
}

/* ----------------------------------------------------------------
  railway-autumn
-----------------------------------------------------------------*/

.railway_photo_autumn {
	width: 100%;
	padding: 0% 15% 2% 15%;
	position: relative;
}

.railway_photo_autumn .station {
	background-color: #fff;
	margin-bottom: 2em;
	height: 0;
	width: 100%;
	padding-bottom: 58.18%;
	position: relative;
	margin-top: 8%;
}

.railway_photo_autumn .info {
	position: absolute;
	left: 0%;
	bottom: -1px;
	background-color: #fff;
	padding: 1.5% 0 1.5% 1.5%;
	z-index: 997;
	border: 1px solid #000;
}

.railway_photo_autumn .info2 {
	position: absolute;
	right: 0%;
	bottom: -1px;
	background-color: #fff;
	padding: 1.5% 0 1.5% 1.5%;
	z-index: 9998;
	border: 1px solid #000;
}


.railway_photo_autumn .info3 {
	position: absolute;
	right: 0%;
	bottom: -2%;
	background-color: #fff;
	padding: 1.5% 0 1.5% 1.5%;
	z-index: 9998;
	border: 1px solid #000;
}

.railway_photo_autumn .info p ,.railway_photo_autumn .info2 p ,.railway_photo_autumn .info3 p {
	font-size: 1em;
	line-height: 1.8;
}

.railway_photo_autumn .box {
	position: absolute;
	right: 0%;
	bottom: 16%;
	background-color: #fff;
	padding: 2.5% 2% 0.85% 3%;
	z-index: 997;
}

.railway_photo_autumn .box2 {
	position: relative;
	right: 0%;
	bottom: -1px;
	background-color: #fff;
	padding: 2.5% 2% 0.85% 3%;
	z-index: 997;
}

.railway_photo_autumn .box h2 {
	font-family: "Noto Serif TC", ‘cwTeXMing’, serif;
	font-size: 2.125em;
	line-height: 1.6;
	font-weight: 400;
	text-decoration: underline;
	letter-spacing: 1px;
	margin-top: 0px;
}

.railway_photo_autumn .box h4 {
	font-size: 1.125em;
	font-family: "Noto Serif TC", ‘cwTeXMing’, serif;
	color: rgb(0, 0, 0);
	height: 37px;
	text-align: center;
	padding-top: 1%;
	width: 128px;
	background: url(../images/autumn/bg_h4_railway_photo.png) left top no-repeat;
	margin: 0px;
}

.railway_photo_autumn p {
	font-size: 1.125em;
	line-height: 1.6;
}

.railway_photo_autumn .item img, .railway_photo_autumn .item .active img {
	opacity: 1;
}

.railway_photo_autumn .carousel-control.left, .railway_photo_autumn .carousel-control.right {
	background-image: none;
}

.railway_photo_autumn .carousel-control {
	filter: alpha(opacity=100);
	opacity: 1;
}

.railway_photo_autumn .carousel-inner {
	margin-top: 0px;
}

.railway_photo_autumn .carousel-control.left, .railway_photo_autumn .carousel-control.right {
	top: 45%;
}

@media (max-width: 1280px) {
.railway_photo_autumn .box {
	bottom: 21%;
}
}

@media (max-width: 1280px) {
	.railway_photo_autumn {
		padding: 6% 6%;
	}
	.railway_photo_autumn .box {
		padding: 1% 1%;
		position: relative!important;
		right: 0%;
		bottom: 0;
		width: 100%;
	}
	.railway_photo_autumn .info, .railway_photo_autumn .info2 , .railway_photo_autumn .info3{
		padding: 1% 1%;
		position: relative!important;
		left: 0%;
		bottom: 0;
		margin: 0.5% 1% 2em 0;
	}
	.railway_photo_autumn .box h4 {
		padding-top: 0.5%;
	}
}

@media (max-width: 991px) {
	.railway_photo_autumn .box h2 {
		font-size: 1.5em;
	}
	.railway_photo_autumn .box h4 {
		font-size: 1.1em;
	}
	.railway_photo_autumn .info, .railway_photo_autumn .info2 , .railway_photo_autumn .info3{
		padding: 2% 3% 0 3%;
	}
	.railway_photo_autumn .box h4 {
		padding-top: 1%;
	}
	.railway_photo_autumn p {
		font-size: 1em;
		line-height: 2;
	}
}

@media (max-width: 320px) {
	.railway_photo_autumn .box h4 {
		padding-top: 2.5%;
	}
}

/*去背小圖*/

.photo_smallpic {
	display: none;
}

@media (max-width: 991px) {
	.photo_smallpic {
		display: block;
		margin: 2em 0 2em 0;
		width: 100%;
		text-align: center;
		overflow: hidden;
	}
	/*.photo_smallpic span{
display: block; 

}*/
	.photo_smallpic img {
		height: 20%;
		display: inline;
	}
}

/* 景點圖 手機版輪播 */

.travel_information .item img, .travel_information .item .active img {
	opacity: 1;
	width: 100%;
}

.travel_information .carousel-control {
	top: 45%;
}

.travel_information .carousel-control.left, .travel_information .carousel-control.right {
	background-image: none;
}

.travel_information .carousel-control img {
	height: 0.75em;
	;
}

.travel_information .carousel-inner {
	margin-top: 0px;
}

.travel_information .carousel {
	padding: 0 4%;
}

/*網站地圖*/

#sitemap {
	width: 100%;
	padding: 2% 7% 6% 7%;
	overflow: hidden;
}

#sitemap h1 {
	font-family: "Noto Serif TC", ‘cwTeXMing’, serif;
	font-size: 2.5em;
	line-height: 1.6;
	font-weight: bold;
	text-align: center;
	letter-spacing: 1px;
}

.navbar-sitemap {
	margin-bottom: 2em;
	margin-top: 2em;
	border-bottom: 1px solid #000000;
	padding-bottom: 1em;
	width: 48%;
	background-position: 0 1em!important;
	background-repeat: no-repeat!important;
	padding: 1em 0 2em 150px;
	float: left;
	margin-right: 2%;
	background-size: 120px 120px !important;
	float: left;
	min-height:195px;
}

.navbar-center {
	display: inline-block;
	float: none!important;
	vertical-align: top;
}

.bg_ul_1 {
	background: url(../images/bg_ul_1.png);
}

.bg_ul_2 {
	background: url(../images/bg_ul_2.png);
}

.bg_ul_3 {
	background: url(../images/bg_ul_3.png);
}

.bg_ul_4 {
	background: url(../images/bg_ul_4.png);
}

.navbar-sitemap li {
	list-style: none;
	float: left;
	width: 50%;
	text-align: left;
}

.navbar-sitemap li.title {
	font-size: 1.5em;
	margin-bottom: 0.5em;
	clear: both;
	width: 100%;
	text-align: left;
}

.navbar-sitemap li a {
	display: block;
	color: #000;
	font-weight: 500;
	font-size: 1.125em;
	margin: 0 0 0 0;
	line-height: 1.5;
	transition: all 0.1s linear;
	padding: 0 0 0 0;
	margin-bottom: 6%;
}

.navbar-sitemap li a:hover {
	color: #77a800;
	background: none;
}

@media (max-width: 1200px) {
	.navbar-sitemap li a {
		font-size: 1em;
	}
}

@media (max-width: 991px) {
	#sitemap {
		width: 100%;
		padding: 2% 6%;
		overflow: hidden;
	}
	.navbar-sitemap li {
		width: 100%;
	}
	.navbar-sitemap {
		background-position: 0 2.75em!important;
		background-size: 90px 90px !important;
		padding: 1em 0 2em 100px;
	}
}

@media (max-width: 991px) {
	.navbar-sitemap {
		width: 100%;
		background-position: 0 1em!important;
		background-size: 90px 90px !important;
		padding: 1em 0 2em 100px;
	}
	.navbar-sitemap li {
		width: 50%;
	}
}

@media (max-width: 414px) {
	.navbar-sitemap {
		background-size: 80px 80px !important;
		padding: 1em 0 2em 100px;
	}
	.navbar-sitemap li {
		width: 100%;
	}
}


/*0113 新增*/

.btn_green , .btn_green:visited {
	width: 100%;
	display: inline;
	text-align: center;
	padding:0.1em 0.2em; 
	/*margin: 1em 0 0 0;*/
	color: #fff;
	background-color: #77a800;
}

.btn_green:hover {
	background-color: #fff;
	border: 1px solid #77a800;
	color: #77a800;
}

/*0413 新增*/

.btn_line , .btn_line:visited {
	width: 100%;
	display: inline;
	text-align: left;
	color: #000;
	border-bottom: 1px solid #444;
}

.btn_line:hover {
	border-bottom: 1px solid #77a800;
	color: #77a800;
}