/*@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@300;500;700&display=swap');*/



/*normalize.css V8.0.1*/

html {

  line-height: 1.15; /* 1 */

  -webkit-text-size-adjust: 100%; /* 2 */

}

body {

  margin: 0;

}

main {

  display: block;

}

h1 {

  font-size: 2em;

  margin: 0.67em 0;

}

hr {

  box-sizing: content-box; /* 1 */

  height: 0; /* 1 */

  overflow: visible; /* 2 */

}

pre {

  font-family: monospace, monospace; /* 1 */

  font-size: 1em; /* 2 */

}

a {

  background-color: transparent;

}

abbr[title] {

  border-bottom: none; /* 1 */

  text-decoration: underline; /* 2 */

  text-decoration: underline dotted; /* 2 */

}

b,

strong {

  font-weight: bolder;

}

code,

kbd,

samp {

  font-family: monospace, monospace; /* 1 */

  font-size: 1em; /* 2 */

}

small {

  font-size: 80%;

}

sub,

sup {

  font-size: 75%;

  line-height: 0;

  position: relative;

  vertical-align: baseline;

}

sub {

  bottom: -0.25em;

}

sup {

  top: -0.5em;

}



img {

  border-style: none;

}



button,

input,

optgroup,

select,

textarea {

  font-family: inherit; /* 1 */

  font-size: 100%; /* 1 */

  line-height: 1.15; /* 1 */

  margin: 0; /* 2 */

}



button,

input { /* 1 */

  overflow: visible;

}



button,

select { /* 1 */

  text-transform: none;

}



button,

[type="button"],

[type="reset"],

[type="submit"] {

  -webkit-appearance: button;

}



button::-moz-focus-inner,

[type="button"]::-moz-focus-inner,

[type="reset"]::-moz-focus-inner,

[type="submit"]::-moz-focus-inner {

  border-style: none;

  padding: 0;

}



button:-moz-focusring,

[type="button"]:-moz-focusring,

[type="reset"]:-moz-focusring,

[type="submit"]:-moz-focusring {

  outline: 1px dotted ButtonText;

}



fieldset {

  padding: 0.35em 0.75em 0.625em;

}



legend {

  box-sizing: border-box; /* 1 */

  color: inherit; /* 2 */

  display: table; /* 1 */

  max-width: 100%; /* 1 */

  padding: 0; /* 3 */

  white-space: normal; /* 1 */

}



progress {

  vertical-align: baseline;

}



textarea {

  overflow: auto;

}



[type="checkbox"],

[type="radio"] {

  box-sizing: border-box; /* 1 */

  padding: 0; /* 2 */

}



[type="number"]::-webkit-inner-spin-button,

[type="number"]::-webkit-outer-spin-button {

  height: auto;

}



[type="search"] {

  -webkit-appearance: textfield; /* 1 */

  outline-offset: -2px; /* 2 */

}



[type="search"]::-webkit-search-decoration {

  -webkit-appearance: none;

}



::-webkit-file-upload-button {

  -webkit-appearance: button; /* 1 */

  font: inherit; /* 2 */

}



details {

  display: block;

}



summary {

  display: list-item;

}



template {

  display: none;

}



[hidden] {

  display: none;

}



/*-----------------------------------------*/

:root{

  --col-gap:15px;

  --topmt:50px; 

}

img {

  display: block;

}

.img-responsive{

  max-width: 100%;

}

.row{

  box-sizing: border-box;

  /*border: 1px solid #f00;*/

  display: flex;

  flex-wrap: wrap;

  margin-left: calc(var(--col-gap) * -1);

  margin-right: calc(var(--col-gap) * -1);

}



[class*='col-']{

  box-sizing:border-box;

  padding: 0 var(--col-gap);

  margin-bottom: 20px;

}



.container{

  box-sizing: border-box;

  max-width: 1200px;

  margin-left: auto;

  margin-right: auto;

}



.col-1{width:8.333333%;}

.col-2{width:16.66666%;}

.col-3{width:25%;}

.col-4{width:33.333333%;}

.col-5{width:41.666666%;}

.col-6{width:50%;}

.col-7{width:58.333333%;}

.col-8{width:66.666666%;}

.col-9{width:75%;}

.col-10{width:83.33333%;}

.col-11{width:91.66666%;}

.col-12{width:100%;}



@media screen and (min-width: 768px){  

  .col-sm-1{width:8.333333%;}

  .col-sm-2{width:16.66666%;}

  .col-sm-3{width:25%;}

  .col-sm-4{width:33.333333%;}

  .col-sm-5{width:41.666666%;}

  .col-sm-6{width:50%;}

  .col-sm-7{width:58.333333%;}

  .col-sm-8{width:66.666666%;}

  .col-sm-9{width:75%;}

  .col-sm-10{width:83.33333%;}

  .col-sm-11{width:91.66666%;}

  .col-sm-12{width:100%;} 

}

@media screen and (min-width: 1024px){  

  .col-md-1{width:8.333333%;}

  .col-md-2{width:16.66666%;}

  .col-md-3{width:25%;}

  .col-md-4{width:33.333333%;}

  .col-md-5{width:41.666666%;}

  .col-md-6{width:50%;}

  .col-md-7{width:58.333333%;}

  .col-md-8{width:66.666666%;}

  .col-md-9{width:75%;}

  .col-md-10{width:83.33333%;}

  .col-md-11{width:91.66666%;}

  .col-md-12{width:100%;} 

}

@media screen and (min-width: 1280px){

  .col-lg-1{width:8.333333%;}

  .col-lg-2{width:16.66666%;}

  .col-lg-3{width:25%;}

  .col-lg-4{width:33.333333%;}

  .col-lg-5{width:41.666666%;}

  .col-lg-6{width:50%;}

  .col-lg-7{width:58.333333%;}

  .col-lg-8{width:66.666666%;}

  .col-lg-9{width:75%;}

  .col-lg-10{width:83.33333%;}

  .col-lg-11{width:91.66666%;}

  .col-lg-12{width:100%;} 

}



.sr-only {

  position: absolute;

  width: 1px;

  height: 1px;

  padding: 0;

  overflow: hidden;

  clip-path: rect(0,0,0,0);

  white-space: nowrap;

  border: 0;

}



body{

	font-family: 'Public Sans', 'Noto Sans TC', sans-serif;

	font-size:18px;

  line-height: 2rem;

	font-weight:300;

}

a{

  text-decoration: none;

  color: #14aaac;

}

header{

	position: fixed;

	background:#72d3d4;		

	border-bottom:5px #ffd477 solid;

  z-index: 100;

  right: 0;

  left: 0; 

  top: 0;

}

.main-header{  

	position: relative;	

	display: flex;

	justify-content: space-between;

  align-items: center;    

	box-sizing: border-box;

	height: 60px;  		

}

.main-header h1{

	margin: 0;

	padding: 0;	

}



.logo a{

	display: block;

	text-decoration: none;

	font-size: 16px;

	margin-left: 10px;

	color:#ffd477;

	font-weight: 400;	

}

.logo img{

	display: inline-block;

	vertical-align: bottom;

	padding:0 5px 2px 5px;

}

.hb{

	position: relative;

	width: 37px;

	background: #ffd477;

	height: 37px;

	margin-right: 10px;

	border-radius: 50%;

}

@media screen and (min-width: 989px){

  .hb{

    display: none;

  }  

}

.hb:before,

.hb:after{

	position: absolute;

	content: '';

	width: 70%;

	height: 3px;

	background: #9e751d;

	right: 0;

	left: 0;

	margin:auto;

}

.hb::before{

	top:10px;

	transform: ;

  	transition: top .3s .3s,

        		transform .3s;

}

.hb::after{

	bottom:10px;

	box-shadow: 0px -7px 0 #9e751d;

	transition: box-shadow .3s .6s, 

        		bottom .3s .3s, 

        		transform .3s;

}



.hb.active:before{

  top: 17px;

  transform: rotate(45deg);

  transition: top .3s .3s,transform .3s .6s;

}

.hb.active:after{

  bottom: 17px;

  transform: rotate(-45deg);

  box-shadow: 0px -7px 0px #f000;

  transition: box-shadow .3s, bottom .3s .3s, transform .3s .6s; 

}



.main-nav{

  position: absolute;

  background: #ffd477;

  top:100%;

  right:-250px;

  width: 250px;

  height: calc(100vh - 65px);

  opacity: 0;

  transition: opacity 1s, right 0s 1s;

}

.main-nav.active{

  right: 0;

  opacity: 1;

  transition: opacity 1s;

}

.main-nav a{

  position: relative;

  display: block;

  box-sizing: border-box;

  height: 70px;

  line-height: 100px;  

  background: url(../image/icon-bg.png) no-repeat top right 90px;

  text-align:right;

  padding-right: 30px;

  color: #9e751d; 

  text-decoration: none;

}

.main-nav a:hover,

.main-nav a.active{   

  background: url(../image/icon-bg-1.png) no-repeat top right 20px #047362; 

  color: #fff; 

  padding-right: 110px;

}

.main-nav a::after{

  content: '';

  position: absolute;

  width: 80%;

  height: 1px;  

  right: 0;

  left: 0;

  bottom: 0;

  background: #fff;

  margin-right: 0;

}

.main-nav a:hover:after

.main-nav a.active:after{

  content: '';

  position: absolute;

  width: 80%;

  height: 1px;  

  right: 0;

  left: 0;

  bottom: 3px;

  background: #fff;

  margin-left: 20%;

}





@media screen and (min-width: 989px){

  .main-nav{

    display: block;

    position: relative;

    top: 0;

    left:0;

    right: 0;

    width: auto;

    height: auto;

    background:none; 

    opacity: 1;

    margin-right: 10px;

  }  

  .main-nav a{

    box-sizing:border-box; 

    display: inline-block; 

    color: #ffd477; 

    font-weight: 400;

    line-height: 50px; 

    height: 60px;

    background: url(../image/icon-bg.png) no-repeat top -15px left 0;

    background-size: 50%;

    padding:10px 15px;

    text-align:center;

    text-decoration: none;

  }



  .main-nav a::after{

    background:none;

  }

  .main-nav a:hover,

  .main-nav a.active{   

    background: url(../image/icon-bg-1.png) no-repeat top -10px center #2fb5b6; 

    color: #fff;      

    padding-right: 15px;

  }

    

  .main-nav a:hover:after,

  .main-nav a.active:after{    

    content: '';   

    bottom: 8px;

    background: #fff;

    margin-left: 10%;

  }



}



.main-section{

  margin-top: 65px;

}





/*footer設定*/

footer{

  background: url(../image/footer-bg-1.png) no-repeat top 120px left -90px #72d3d4;

  color:#005e5f;

  padding: 25px 15px;

}

footer a{

  color:#005e5f;

  text-decoration: none; 

}

.container-footer{

  display: flex;

  flex-wrap: wrap;

  max-width: 990px;

  margin-left: auto;

  margin-right: auto;

}

.fo-logo,
.fo-tel{
  width: 50%;
  text-align: center;
  box-sizing: border-box;
}

.fo-info,

.fo-link{

  width: 100%;

}

.fo-link{

  margin-top: 20px;

  text-align: center;

}

.fo-info{

  margin-top: 20px;

  background: rgba(255,255,255,.3);

  text-align: center;

}

.fo-tel,

.fo-info {

  padding: 0 5px;

}

.fo-logo img,

.fo-link img{

  margin:auto;

  max-width: 100%;

}



.fo-logo a,

.fo-tel span{

  display: block;

  text-align: center;

  color:#ffd477;

}



.f-tel-tit{

  background:#ffd477;

  font-weight: bolder; 

  border-radius:10px;

}

a.tel{

  font-size: 20px;

  font-weight: bolder;

}

a.tel:hover{

  color:#00a51f;

}

.fo-link a{
  display: block;
}

.fo-info a.icon-line,
.fo-info a.icon-fb,
.fo-info a.icon-ig{
  display: inline-block;
  margin: 10px;
  padding: 0;
  background:#fff;
  border-radius: 5px;  
  line-height: 20px;
}
.fo-info .fa, 
.fo-info .fas, 
.fo-info .far, 
.fo-info .fal, 
.fo-info .fad, 
.fo-info .fab {
  line-height: 22px;
}
.fo-info a.icon-line{
  color:rgba(6,199,85,1);
}
.fo-info a.icon-fb{
  color:rgba(4,109,228,1);
}
.fo-info a.icon-ig{  
  color:rgba(189,45,114,1);
}
.all-icon{
  width: 100%;
  display: block;
}

@media screen and (min-width: 989px){

  footer{

    background-position: top 0px left 0px;

  }

  .fo-logo,

  .fo-tel{

    width: 20%;

    box-sizing: border-box;

  }

  .fo-info{

    width: 35%;

    box-sizing: border-box;

  }

  .fo-link{

    width: 25%; 

    box-sizing: border-box;

  }

  .fo-info,

  .fo-link{

    margin-top: 0px;

    background: none;

    text-align: left;

  }



}



.border-1{

  border:1px solid #000;

}

.section-ind{

  margin-top: -50px;

  display: flex;

  flex-wrap: wrap; 

  box-sizing: border-box;

}

.ind-abo{

  box-sizing: border-box;

  position: relative;

}

.ind-abo h3{

  color: #fff;

  position: absolute;

  right: 0;

  top: 30px; 

  font-size: 23px;

  writing-mode: vertical-rl;

  letter-spacing:0.3em;

}

.ind-abo img{

  max-width: 100%;

  height: 100%;

  object-fit: cover;

}

.ind-content{  

  padding:var(--col-gap); 

}

.ind-con-room,

.ind-con-diving {

  margin-bottom: 30px;

}

.ind-con-room .pic,

.ind-con-diving .pic{

  width: 100%;

}

.ind-con-room .pic img,

.ind-con-diving .pic img{

  width: 100%;

  object-fit: cover;

}

.ind-con-room .txt,

.ind-con-diving .txt{  

  box-sizing: border-box; 

  padding-left: var(--col-gap);

  margin-top:var(--col-gap); 

}



.ind-con-room .txt{

  border-left:1px solid #873c14; 

  color:#873c14;

}



.ind-con-diving a{  

  color:#074c98;

  display: block;

   display: flex;

  flex-wrap: wrap;

}

.ind-con-diving a:hover,

.ind-con-diving a:hover ul.ul-diving li{

  color:#0f9bf4;

}

.ind-con-diving .txt{

  order: 1;

  border-left:1px solid #074c98;

  display: flex;

  flex-wrap: wrap;

}

.ind-con-diving .txt h3,

.ind-con-room .txt h3 {

  width: 100%;

  font-size: 30px;

  margin: 5px;

}

.ind-con-diving .txt h3 span,

.ind-con-room .txt h3 span{

  display: block;

  font-size: 22px;

}

ul.ul-diving,

ul.ul-room {

  width: 100%;

  list-style-type: none;

  padding: 0;

  margin: 0;

  display: flex;

  flex-wrap: wrap;

}

ul.ul-diving li::before { 

  content: "\f061";

  font-family: "Font Awesome 5 Free";

  font-weight: 900;

  padding: 0 10px 0 0;

}



.ind-con-diving .txt h3{

  order: -2;

}

ul.ul-diving{

  order: -1;

}

ul.ul-room {

  margin-top: 20px;

}

ul.ul-room li{

  width: 50%;

  color:#005e5f;

}

/*ul.ul-room li::before { 

    content: "\f598";

    font-family: "Font Awesome 5 Free";

    padding: 0 10px 0 0;

}*/

ul.ul-room a{

  display: block;

  box-sizing: border-box;

  color: #fff;

  background: #873c14;  

  margin-right: 5px;

  margin-bottom: 10px;

  text-align: center;

}

ul.ul-room a:hover{

  background: #c1937b;

}

ul.ul-diving li{

  width: calc(50% - 5px);

  box-sizing: border-box;

  color: #074c98;

  border-bottom:1px dashed #074c98;

  margin-right: 5px;

  margin-bottom: 5px;

}

@media screen and (min-width: 768px) and (max-width: 1200px){

  ul.ul-room li,

  ul.ul-diving li{

    width: 100%;

  }

}

@media screen and (min-width: 768px){

  .ind-content{  

      display: flex;

  }

  .ind-abo,

  .ind-content{

    box-sizing: border-box;

    width: 50%;

  }

  .ind-content{

    align-items: center;

  }

  .ind-abo h3{

    font-size: 50px;

  }

  .ind-con-room,

  .ind-con-diving {

    box-sizing: border-box;

    padding-left: 15px;

    padding-right: 15px;

    width: 50%;

    margin-bottom: 0px

  }

  .ind-con-diving .txt{

    margin-top: 0;

    margin-bottom: var(--col-gap);

    order: -1;

  }

  .ind-con-diving .txt h3{

    order: 1;

  }

}



.clear{

  clear: both;

}

ul.must-know{

  margin: 0;

  padding: 8px;

}

ul.must-know li{



}



/*表格*/ 

.table-full,

.table-full th,

.table-full td{

  width: 100%;

  border-bottom: 1px solid #565656;

  border-collapse:collapse;

  margin-bottom: 50px;

  box-sizing: border-box;

} 

.table-full th,

.table-full td{

  width: 25%;

  text-align: left;

  padding: 5px;

}

.table-full th{

  font-weight: 400;

}

.table-full tr:hover{

  background:#adf1e0;

}



/*間距*/



.pt30{

  padding-top: 30px;

}

.mt30{

  margin-top: 30px;

}

.mt50{

  margin-top: 50px;

}

.mb50{

  margin-bottom: 50px;

}

/*字型顏色*/

.type-normal{  

  color:#047362;

}

.type-red{

  color:#be0000;

}

/*背景色*/

.bg-w{

  background: rgba(255,255,255,.7);

}

.room-price{

  width: 100%;

  background: #fff;

  box-shadow: 0px 0px 8px #888888;

  padding: 15px;

}

/*對齊*/ 

.text-center{

  text-align: center;

}

h2{

  box-sizing: border-box;

  padding-top:70px;

  padding-bottom: 30px; 

  width: 100%;

  color:#0137b0;

  font-size: 48px;

  text-align: center;  

}

h2 span.etype{

  display: block;

  text-align: center;

  margin-top: 20px;

  font-size: 30px;

}

@media screen and (min-width: 768px){

  h2 span.etype{

    display: inline-block;

  }

}

h3.headline{

  margin-right: auto;

  margin-left: auto;

  width: 100%;

  color:#047362;

  text-align: center;

  margin-bottom: 30px;

}

h3.headline span{

  position: relative;

}

h3.headline span::before{ 

  display: inline-block; 

  content:'';

  margin-bottom: -5px;

  width: 30%;

  height: 1px;

  background:#047362;

  margin-right: 10px;

}

h3.headline span::after{ 

  display: inline-block; 

  content:'';

  margin-bottom: -5px;

  width: 30%;

  height: 1px;

  background:#047362;

  margin-left: 10px;

}



/*通用背景*/

.section-all{

  background:url("../image/all-con-bg.jpg");  

  margin-top: 65px;  

  margin-bottom: -20px;

  padding-bottom: 50px;

}



/*白紙 */

.all-paper-box{

  position: relative;

  width: calc(100% - 40px);

  margin:0 20px;

  margin-bottom: 50px;

  box-sizing: border-box;

  background:#fff;

  box-shadow: 0 0 5px 3px rgba(63,135,127,.5);

  padding:30px 15px;

}

@media screen and (min-width: 1380px){

  .price-box{

    width: 48%;   

    margin:13px 1%;   

  }

}



/*左右角頁籤*/

.page-tab{
  position: absolute;
  background: url(../image/pri-bg-tab-1.png),url(../image/pri-bg-tab-2.png);
  background-position: top right,bottom left;
  background-repeat: no-repeat;
  top:-13px;
  right: -13px;
  left: -13px;
  bottom:-13px;
}

.pagetab-t{
  position: absolute;
  background: url(../image/pri-bg-tab-1.png);
  background-position: top right;
  background-repeat: no-repeat;
  width: 51px;
  height: 46px;
  top:-13px;
  right: -13px;
}
.pagetab-b{
  position: absolute;
  background: url(../image/pri-bg-tab-2.png);
  background-position: bottom left;
  background-repeat: no-repeat;
  width: 51px;
  height: 46px;
  left: -13px;
  bottom:-13px;
}
/*Error頁面*/
.error-h2{
  background:url(../image/error-h2-bg.png) no-repeat top 30% left 42%;
  background-size: auto 80%;
  width: 100%;
  text-align: center;
  margin-bottom: 30px;
  padding-top: 90px;
  padding-bottom: 30px; 
}
ul.error{
  list-style: none;
}
ul.error li{
  font-size: 22px;
  font-weight: bold;
}
ul.error li span{
  display: block;
  color:#787878;
  font-size:18px;
  font-weight:normal;
  margin-bottom: 30px;
}