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

/* IMPORT 12 COLUMN RESPONSIVE GS */
@import url("responsive.gs.12col.css");
@media only screen and ( max-width: 30em ) /* 320 */ {
		footer.container {
	max-width: 100%!important;
    background-image: url(../images/bg-m-320.png);
	background-position: 25% 100%;
    background-repeat: no-repeat;
	background-size: contain;
    padding-bottom: 0;
	
}
	@media only screen and ( max-width: 40em ) /* 640 */ {
		footer.container {
	/*max-width: 100%!important;*/
    background-image: url(../images/bg-m.png);background-position: 25% 100%;
    background-repeat: no-repeat;
	background-size: contain;
    padding-bottom: 0;
		}}
}
@media only screen and (min-width: 736px) {
	footer.container {
    background-image: url(../images/bg-700.png);
    background-position: bottom 0 right 0;
    background-repeat: no-repeat;
    padding-bottom: 80px;
	background-size: contain;
}
}
@media only screen and (min-width: 961px) {
	footer.container {
	/*max-width: 100%!important;*/
    background-image: url(../images/bg.png);
    background-position: bottom 0 right 0;
    background-repeat: no-repeat;
    padding-bottom: 160px;
	background-size: contain;
	width: 100%;
}
}

.container p { font-size: 72.5%; line-height: 1.8em;  }
.container p.left { margin-left: 1em; margin-right: 1em }
.container ol { font-size: 72.5%; line-height: 1.8em;   }
.container ol li ol.font { font-size: 100%; line-height: 1.8em; list-style-type:lower-roman; }
.container_bg p { font-size: 72.5%; line-height: 1.8em;  }
.container_bg p.left { margin-left: 1em; margin-right: 1em }
.container_bg ol { font-size: 72.5%; line-height: 1.8em;  }
.text-justify{text-align: justify}


/*================================
HEADER
================================*/
#siteID { padding: 24px 0 10px 15px; }
#siteID h1 { font-size: 4em; font-weight: 400;  }
#siteID .description { font-size: 1.4em; }
/*================================
將圖像尺寸設為100%
================================*/
img { max-width: 100%; height: auto; width /***/: auto; }　/*僅IE8適用*/
/* tag-menu
---------------------------------------------------------*/
nav{	height: unset!important;line-height: normal}
.nav {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;

}

.nav-link {
  display: block;
  padding: 0.5rem 1rem;
}
.nav-link:hover, .nav-link:focus {
  text-decoration: none;
}
.nav-link.disabled {
  color: #6c757d;
  pointer-events: none;
  cursor: default;
}

.nav-tabs {
  border-bottom: 1px solid #dee2e6;
}
.nav-tabs .nav-item {
  margin-bottom: -1px;
}
.nav-tabs .nav-link {
  border: 1px solid transparent;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}
.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
  border-color: #e9ecef #e9ecef #dee2e6;
}
.nav-tabs .nav-link.disabled {
  color: #6c757d;
  background-color: transparent;
  border-color: transparent;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: #495057;
  background-color: #fff;
  border-color: #dee2e6 #dee2e6 #fff;
}
.nav-tabs .dropdown-menu {
  margin-top: -1px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.nav-pills .nav-link {
  border-radius: 0.25rem;
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: #fff;
  background-color: #00A1DF;
}

.nav-fill > .nav-link,
.nav-fill .nav-item {
  flex: 1 1 auto;
  text-align: center;
}

.nav-justified > .nav-link,
.nav-justified .nav-item {
  flex-basis: 0;
  flex-grow: 1;
  text-align: center;
}

.tab-content > .tab-pane {
  display: none;
}
.tab-content > .active {
  display: block;
}
.navbar {
  position: sticky;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /*justify-content: space-between;*/
  padding: 0 1rem;
}
.navbar .container,
.navbar .container-fluid,
.navbar .container-sm,
.navbar .container-md,
.navbar .container-lg,
.navbar .container-xl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /*justify-content: space-between;*/
}
.navbar-brand {
  display: inline-block;
  padding-top: 0.3125rem;
  padding-bottom: 0.3125rem;
  margin-right: 1rem;
  font-size: 1.25rem;
  line-height: inherit;
  white-space: nowrap;
}
.navbar-brand:hover, .navbar-brand:focus {
  text-decoration: none;
}

.navbar-nav {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
.navbar-nav .nav-link {
  padding-right: 0;
  padding-left: 0;
}
.navbar-nav .dropdown-menu {
  position: static;
  float: none;
}

.navbar-text {
  display: inline-block;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.navbar-collapse {
  flex-basis: 100%;
  flex-grow: 1;
  align-items: center;
  background-color: rgba(255, 255, 255, .9);
}

.navbar-toggler {
  padding: 0.25rem 0.75rem;
  font-size: 1.25rem;
  line-height: 1;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 0.25rem;
}
.navbar-toggler:hover, .navbar-toggler:focus {
  text-decoration: none;
}

.navbar-toggler-icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  content: "";
  background: no-repeat center center;
  background-size: 100% 100%;
}
.hamburger {
  width: 38px;
  height: 6px;
  position: absolute;
  transition: 0.5s;
}

.hamburger:before {
  top: 0;
  left:0;
  transform:rotate(135deg);
}

.hamburger:after {
  top: 0;
  right:32px;
  transform:rotate(45deg);
}



/* Icon 1 */
.icon-one {
  color: rgba(0, 0, 0, 0)!important;
  border: none!important;
  position: relative;
  top: 0;
  right: 0;
  cursor: pointer;
}

.hamburger-one:before,
.hamburger-one:after {
  content: '';
  position:absolute;
  width: 20px;
  height: 2px;
  background:#00A1DF !important;
  /*box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);*/
  transition:0.5s;
}

.icon-one.active-one .hamburger-one {
  background:rgba(0,0,0,0);
  /*box-shadow: 0 2px 5px rgba(0, 0, 0, 0);*/
}

.icon-one.active-one .hamburger-one:before {
  top: 0;
  left:0;
  transform:rotate(45deg);
}

.icon-one.active-one .hamburger-one:after {
  top: 0;
  right:29px;
  transform:rotate(135deg);
  /*box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);*/
}
@media (max-width: 575.98px) {
  .navbar-expand-sm > .container,
.navbar-expand-sm > .container-fluid,
.navbar-expand-sm > .container-sm,
.navbar-expand-sm > .container-md,
.navbar-expand-sm > .container-lg,
.navbar-expand-sm > .container-xl {
    padding-right: 0;
    padding-left: 0;
  }
}
@media (min-width: 576px) {
  .navbar-expand-sm {
    flex-flow: row nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-sm .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-sm .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-sm .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
  .navbar-expand-sm > .container,
.navbar-expand-sm > .container-fluid,
.navbar-expand-sm > .container-sm,
.navbar-expand-sm > .container-md,
.navbar-expand-sm > .container-lg,
.navbar-expand-sm > .container-xl {
    flex-wrap: nowrap;
  }
  .navbar-expand-sm .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }
  .navbar-expand-sm .navbar-toggler {
    display: none;
  }
}
@media (max-width: 767.98px) {
  .navbar-expand-md > .container,
.navbar-expand-md > .container-fluid,
.navbar-expand-md > .container-sm,
.navbar-expand-md > .container-md,
.navbar-expand-md > .container-lg,
.navbar-expand-md > .container-xl {
    padding-right: 0;
    padding-left: 0;
  }
}
@media (min-width: 768px) {
  .navbar-expand-md {
    flex-flow: row nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-md .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-md .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-md .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
  .navbar-expand-md > .container,
.navbar-expand-md > .container-fluid,
.navbar-expand-md > .container-sm,
.navbar-expand-md > .container-md,
.navbar-expand-md > .container-lg,
.navbar-expand-md > .container-xl {
    flex-wrap: nowrap;
  }
  .navbar-expand-md .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }
  .navbar-expand-md .navbar-toggler {
    display: none;
  }
}
@media (max-width: 991.98px) {
  .navbar-expand-lg > .container,
.navbar-expand-lg > .container-fluid,
.navbar-expand-lg > .container-sm,
.navbar-expand-lg > .container-md,
.navbar-expand-lg > .container-lg,
.navbar-expand-lg > .container-xl {
    padding-right: 0;
    padding-left: 0;
  }
}
@media (min-width: 992px) {
  .navbar-expand-lg {
    flex-flow: row nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-lg .navbar-nav {
    flex-direction: row;
	align-items: center;
  }
  .navbar-expand-lg .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
  .navbar-expand-lg > .container,
.navbar-expand-lg > .container-fluid,
.navbar-expand-lg > .container-sm,
.navbar-expand-lg > .container-md,
.navbar-expand-lg > .container-lg,
.navbar-expand-lg > .container-xl {
    flex-wrap: nowrap;
  }
  .navbar-expand-lg .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
    background-color: unset;
  }
  .navbar-expand-lg .navbar-toggler {
    display: none;
  }
}
@media (max-width: 1199.98px) {
  .navbar-expand-xl > .container,
.navbar-expand-xl > .container-fluid,
.navbar-expand-xl > .container-sm,
.navbar-expand-xl > .container-md,
.navbar-expand-xl > .container-lg,
.navbar-expand-xl > .container-xl {
    padding-right: 0;
    padding-left: 0;
  }
}
@media (min-width: 1200px) {
  .navbar-expand-xl {
    flex-flow: row nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-xl .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-xl .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-xl .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
  .navbar-expand-xl > .container,
.navbar-expand-xl > .container-fluid,
.navbar-expand-xl > .container-sm,
.navbar-expand-xl > .container-md,
.navbar-expand-xl > .container-lg,
.navbar-expand-xl > .container-xl {
    flex-wrap: nowrap;
  }
  .navbar-expand-xl .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }
  .navbar-expand-xl .navbar-toggler {
    display: none;
  }
}
.navbar-expand {
  flex-flow: row nowrap;
  justify-content: flex-start;
}
.navbar-expand > .container,
.navbar-expand > .container-fluid,
.navbar-expand > .container-sm,
.navbar-expand > .container-md,
.navbar-expand > .container-lg,
.navbar-expand > .container-xl {
  padding-right: 0;
  padding-left: 0;
}
.navbar-expand .navbar-nav {
  flex-direction: row;
}
.navbar-expand .navbar-nav .dropdown-menu {
  position: absolute;
}
.navbar-expand .navbar-nav .nav-link {
  padding-right: 0.5rem;
  padding-left: 0.5rem;
}
.navbar-expand > .container,
.navbar-expand > .container-fluid,
.navbar-expand > .container-sm,
.navbar-expand > .container-md,
.navbar-expand > .container-lg,
.navbar-expand > .container-xl {
  flex-wrap: nowrap;
}
.navbar-expand .navbar-collapse {
  display: flex !important;
  flex-basis: auto;
}
.navbar-expand .navbar-toggler {
  display: none;
}

.navbar-light .navbar-brand {
  color: rgba(0, 0, 0, 0.9);
}
.navbar-light .navbar-brand:hover, .navbar-light .navbar-brand:focus {
  color: rgba(0, 0, 0, 0.9);
}
.navbar-light .navbar-nav .nav-link {
  color: rgba(0, 0, 0, 0.5);
}
.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus {
  color: rgba(0, 0, 0, 0.7);
}
.navbar-light .navbar-nav .nav-link.disabled {
  color: rgba(0, 0, 0, 0.3);
}
.navbar-light .navbar-nav .show > .nav-link,
.navbar-light .navbar-nav .active > .nav-link,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .nav-link.active {
  color: rgba(0, 0, 0, 0.9);
}
.navbar-light .navbar-toggler {
  color: rgba(0, 0, 0, 0.5);
  border-color: rgba(0, 0, 0, 0.1);
}
.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-light .navbar-text {
  color: rgba(0, 0, 0, 0.5);
}
.navbar-light .navbar-text a {
  color: rgba(0, 0, 0, 0.9);
}
.navbar-light .navbar-text a:hover, .navbar-light .navbar-text a:focus {
  color: rgba(0, 0, 0, 0.9);
}

.navbar-dark .navbar-brand {
  color: #fff;
}
.navbar-dark .navbar-brand:hover, .navbar-dark .navbar-brand:focus {
  color: #fff;
}
.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.5);
}
.navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus {
  color: rgba(255, 255, 255, 0.75);
}
.navbar-dark .navbar-nav .nav-link.disabled {
  color: rgba(255, 255, 255, 0.25);
}
.navbar-dark .navbar-nav .show > .nav-link,
.navbar-dark .navbar-nav .active > .nav-link,
.navbar-dark .navbar-nav .nav-link.show,
.navbar-dark .navbar-nav .nav-link.active {
  color: #fff;
}
.navbar-dark .navbar-toggler {
  color: rgba(255, 255, 255, 0.5);
  border-color: rgba(255, 255, 255, 0.1);
}
.navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-dark .navbar-text {
  color: rgba(255, 255, 255, 0.5);
}
.navbar-dark .navbar-text a {
  color: #fff;
}
.navbar-dark .navbar-text a:hover, .navbar-dark .navbar-text a:focus {
  color: #fff;
}
.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}

.fixed-bottom {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1030;
}
/*.navbar {
    display: none;
  }*/

#mainNav {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  background-color: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    -moz-backdrop-filter: blur(5px);
  transition: background-color 0.2s ease;
}
#mainNav .navbar-brand {
  font-family:  "Noto Sans", sans-serif;
  font-weight: 700;
  color: #212529;
}
#mainNav .navbar-nav .nav-item .nav-link {
  color: #6c757d;
  font-family: "Noto Sans", sans-serif;
  font-weight: 700;
  font-size: 1.0625em;
  padding: 0.75rem 0;
  line-height: 1.2;
}
#mainNav .navbar-nav .nav-item .nav-link:hover, #mainNav .navbar-nav .nav-item .nav-link:active {
  color: #00A1DF;
}

#mainNav .navbar-nav .nav-item .nav-link.active {
  color: #00A1DF !important;
}

@media (min-width: 992px) {
  #mainNav {
    box-shadow: none;
    background-color: transparent;
  }
  #mainNav .navbar-brand {
    color: rgba(21, 21, 21, 1);
  }
  #mainNav .navbar-brand:hover {
    color: #2196F3;
  }
  #mainNav .navbar-nav .nav-item .nav-link {
    padding: 0 1rem;
    font-size: 1em;
  }
  #mainNav .navbar-nav .nav-item .nav-link:hover {
    color: #2196F3;
  }
  #mainNav .navbar-nav .nav-item:last-child .nav-link {
    padding-right: 0;
  }
  #mainNav.navbar-scrolled {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  }
  #mainNav.navbar-scrolled .navbar-brand {
    color: #212529;
  }
  #mainNav.navbar-scrolled .navbar-brand:hover {
    color: #00A1DF;
  }
  #mainNav.navbar-scrolled .navbar-nav .nav-item .nav-link {
    color: #212529;
  }
  #mainNav.navbar-scrolled .navbar-nav .nav-item .nav-link:hover {
    color: #00A1DF;
  }
}
/*===============================
contents
===============================*/
.row .col {
    padding: 0 !important;
}
.box {  padding: 30px 5px 15px; margin-bottom: 0; font-size: 1.5em;  word-wrap: break-word;  }
.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: -5px; font-size: 72.5%; line-height: 1.4em; text-align: left }
dl dt { color: #00A1DF; float: left; margin-right: -5px; padding: 5px;  }
dl dd { margin: -5px 0 0 0;
    padding: 5px 0 0 90px; }
.box h3 { font-size: 1em; font-weight: bold;padding-left: 10px; line-height: 1.8; color: #00A1DF; }
.box h3 span { line-height: 1.3;background-color: transparent !important; }
.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; float: none }
.box ol span { color: #434248; }
.box ol span.blue { color: #00A1DF; background-color: transparent !important;}
.box ol span.green { color: #00B050;background-color: transparent !important; }
.box ol span.red { color: #FF0004;background-color: transparent !important; }
.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 span.blue { color: #00A1DF; background-color: transparent !important;}
    
.box p span.green { color: #00B050;background-color: transparent !important; }
.box p span.red { color: #FF0004;background-color: transparent !important; }
.box p span.titleOrange { margin: 15px 0; line-height: 1.8em; font-size: 1.2em; color: #505050; border-left: 5px #F39800  solid; padding: 2px 5px; }
.box p span.title { margin: 15px 0; line-height: 1.8em; font-size: 1.2em; color: #505050; border-left: 5px #00A1DF  solid; padding: 2px 5px; }
.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; margin: 0 30px; overflow: hidden }
.box li p.none { width: 250px; margin: auto; overflow: hidden }

.box ol.font ul.list{font-size: 0.7em; width: 100%}
.box ol.font ul.list li { float: left;color: #000000;  line-height: 1.8em; text-decoration: none; width: 40%;  margin: 10px 10px; overflow: hidden }
.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; }
/*===============================
表格的裝飾
===============================*/	
.text-justify{text-align: justify}	
.text-left{text-align: left}
.text-center{text-align: center}
.text-right{text-align: right}
.text-inherit{text-align: inherit}
.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}
.box .air table { width: 99%; border: #CCC 1px solid; margin: 0 auto; }
.box .air td.start { background-color: #fff; }
.box .air td.blue { background-color: #b3dcff!important; }
.box .air td { vertical-align: middle; border: #CCC 1px solid; padding: 10px 0; }
.box .air td p { color: #222222;padding: 5px     }
.box .air td ol { color: #434248;  }
.box .air td table p { 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; margin: 2px; padding: 5px;  }
.box .mix td ol { color: #434248; line-height: 1.2em }
.box ol table p { color: #434248; font-size: 1em; line-height: 1.2em }
.box ol li { margin-left: 2em; margin-right: 0; padding: 5px 5px 5px 0; }
.box ol.font li { line-height: 1.8em;word-break: break-word;
    word-wrap: normal;
    word-spacing: normal;}
.box ol.fontB li { line-height: 1.8em; color: #00A1DF }
.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: 90%; background: #fff; padding: 10px; box-shadow: 0 1px 3px #fff; }
.aligncenter { display: block;   margin-bottom: 2em; }
.alignleft { display: block; float: left; margin-right: 15px; margin-bottom: 1em; }
.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 { display: flex; padding-top: 0; 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: 50%; float: left; margin: 0 20px 0 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 { 
width: 100%;
margin-bottom: 15px;
display: inline-block;
align-items: end;
justify-content: center;}
.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) {
.newentry img { max-width: 20%; float: left; margin: 0 20px 0 0; border: 1px solid #999; padding: 3px; }
.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:413px), only screen and (min-width: 320px) and (max-width:413px) {
.box { background: #fff; font-size: 1.5em;  word-wrap: break-word; }
.box:after { display: block; clear: both; height: 0; content: ""; }
.box p span.title { text-align: center; font-size: 1.2em; }
.box p span.titleOrange { text-align: center; font-size: 1.2em; }
.box li p { width: 250px; margin: auto; 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: 99%; border: #CCC 1px solid; margin: 0px auto 20px auto;  text-align: center }
.box .mix table { width: 90%; border: #CCC 1px solid; margin: 0px auto 20px auto;  text-align: center }
.box img.noshadow { max-width: 90%; background: #fff; padding: 10px; box-shadow: 0 1px 3px #fff; }
}
/*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;background-color: transparent !important; }
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], form > div > div > textarea { width: 50%; margin: 5px; padding: 10px 5px; -webkit-appearance: none;font-size: 1.4rem; }
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"] {width: 90%;
-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) {
	.alignleft { display: block; float: left; margin-bottom: 1em; width: 30% }
	.aligncenter { display: block; margin:0 auto; width: 90% }
	.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) {
	.box ol.font ul.list li { float: left;color: #000000;  line-height: 1.8em; text-decoration: none; width: 13%;  margin: 10px 10px; overflow: hidden }
	.alignright0 { display: block; float: right;  width: 33.3%;margin-bottom: 2em; }
	.alignleft { display: block; float: left; margin-bottom: 1em; width: 30% }
	.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; }}

.button {
  background-color: #00A1DF;
  border: none;
  color: #FFFFFF;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
	width: 100%;
}
.button:hover {background-color: #FF8300;}

.button2 {
	border-radius: 15px;
  background-color: #4eb5f1;
  border: none;
  color: #FFFFFF;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
.button2:hover {background-color: #FF8300;}

.button3 {
  border-radius: 10px;
  background-color: #FF8300;
  border: none;
  color: #FFFFFF;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
.button3:hover {background-color: #4eb5f1;box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);}
.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

@media all and (max-width:30em){
.button, .button2, .button3 {display: block;
	margin: 4px 0;}
}


/*gallery */
.align-st li{
            display: flex;
        }
        .align-st p{
            align-self:center;
            display: inline-block;
            width: 50%;
        }
        .align-st .img-link{
            width: 50%;
			height: 200px;
			margin:0 auto 5px auto;
            display:inline-block;
            margin-right: 20px;
        }
        .align-st img{
            max-width: 100%;
        }




.box .column {
  width: 100%;
  min-height: 0;
  margin-bottom: 0px;
}
.box .photo {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
	box-sizing: border-box;}

.box img[src="images/loader.gif"]{
  width: 32px;
  margin: 30% auto;
}

.box .navigation img[src="images/loader.gif"]{
  margin: 0 auto;
	}


	
/* faq */
[type="checkbox"]+label:before, [type="checkbox"]:not(.filled-in)+label:after {
    content: none!important;
    border: none!important;

}
  .faq {
    background: #fff;
    color: #1a1a1a;
    padding-bottom: 50px;
	  text-align: center
  }

  
  .faq span,
  .faq small {
    color: #0091d9;
  }
.faq h2{
	color: #6e6e73;

}
 .faq > :nth-child(1) {
    width: 100%;
	 
  }

  .faq img {
    width: 50px;
	  
  }

  .faq h5 {
    margin-bottom: 10px;
	  margin-top: 30px;
    color: #0091d9;
  }

  .faq-box {
    width: 100%;
	  text-align: left
  }

  .faq input[id*="answer"] {
    display: none;
  }

  .faq label {
    border-bottom: 1px solid #ddd;
    font-weight: 400;
  }

  .faq input[id*="answer"]+label {
    display: block;
    padding: 20px 0;
    color: #1a1a1a;
    cursor: pointer;
    line-height: 2;
    font-size: 1.6rem;
  }

  .faq input[id*="answer"]+label+div {
    max-height: 0;
    transition: 0.8s;
    overflow: hidden;
    font-size: 1rem;
  }

  .faq input[id*="answer"]:checked+label+div {
    max-height: 550px;
  }

  .faq label small {
    float: right;
    line-height: 1.8;
    font-size: 1.4rem;
    font-weight: bold;
  }

  .faq p {
    padding: 30px 10px;
  }
	/* counsel */
  .counsel {
    background: url('../img/room.jpg') no-repeat;
    background-size: cover;
    background-position: center;
    text-align: center;
  }

  .counsel h2,
  .counsel h5 {
	 padding: 30px 0 0 0;
	 color: #6e6e73;
  }

  .counsel h5 {
    padding-bottom: 20px;
  }

  .counsel h6 {
    padding: 10px;
  }

  .counsel input,
  .counsel select {
    background: none;
    border-bottom: 1px solid #ddd;
  }

  .counsel>div {
    background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.7));
    width: 100%;
    height: 100%;
    padding: 100px 10%;
  }

  .counsel>div> :nth-child(4) {
    color: #eee;
    font-size: 1rem;
  }

  .counsel>div> :nth-child(4) option {
    color: #333;
  }

  .counsel .layer1>div,
  .counsel .layer2>div,
  .counsel .layer3>div {
    margin-top: 25px;
  }

  .counsel .layer1>div>div,
  .counsel .layer2>div>div,
  .counsel .layer3>div>div {
    width: 100%;
    height: 450px;
    margin-bottom: 50px;
    padding: 0 5%;
    background: #fff;
    border-radius: 20px;
  }

  .counsel .layer1 form,
  .counsel .layer2 form,
  .counsel .layer3 form {
    padding: 10px 0;
    text-align: left;
  }

  .counsel .layer1 input,
  .counsel .layer1 select,
  .counsel .layer2 input,
  .counsel .layer2 select,
  .counsel .layer3 input,
  .counsel .layer3 select {
    border: 2px solid #ddd;
    border-radius: 5px;
    padding: 8px 10px;
    width: 100%;
  }

  .counsel .layer1 button,
  .counsel .layer2 button,
  .counsel .layer3 button {
    margin-top: 30px;
    padding: 15px 30px;
    background: #e4002b;
    color: #fff;
    font-weight: bold;
    border-radius: 30px;
    cursor: pointer;
  }

  .counsel iframe {
    width: 100%;
  }

  .counsel .layer2,
  .counsel .layer3 {
    display: none;
  }
	@media screen and (min-width: 1200px) {
		 .faq {
      min-height: 100vh;
    }
		/* labtop-faq */
    .faq {
      padding: 60px 15%;
      padding-bottom: 60px;
    }

    .faq-box {
      width: 90%;
    }
		/* labtop-counsel */
    .counsel iframe {
      width: 50%;
      height: 420px;
    }

    .counsel>div {
      padding: 30px 10%;
    }

    .counsel .layer1>div,
    .counsel .layer2>div,
    .counsel .layer3>div {
      display: flex;
      justify-content: space-between;
      margin-top: 25px;
    }

    .counsel .layer1>div>div,
    .counsel .layer2>div>div,
    .counsel .layer3>div>div {
      width: 40%;
      height: 420px;
      margin-bottom: 0px;
    }

    .counsel .layer1 button,
    .counsel .layer2 button,
    .counsel .layer3 button {
      margin-top: 10px;
    }
	}
.controls {
 text-align: right;
 margin-bottom: 1em;
}

.controls li {
  display: inline;
}

.controls li button {
  background: #1a1a1a;
  color: #fff;
  border: 0;
  font-size: 0.85rem;
  border-radius: 0.25rem;
}

/*
Custom elements are inline by default
*/
toggle-section {
  display: block;
text-align: left
}
toggle-section h2 span{
           color: #0091d9;
        }
/*
Only applies if script runs and 
`role="region"` is added
*/
toggle-section[role="region"] {
  border-width: 1px 0;
border-bottom: solid 1px #ccc;
}

toggle-section[role="region"] + toggle-section {
  border-top: 0;
}