@import url('all.css');
/*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;
  padding: 0 var(--col-gap);
  margin-left: auto;
  margin-right: auto;
}
.container-fulid{
  box-sizing: border-box;
  width: 100%; 
}

.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: '微軟正黑體', 'Microsoft JhengHei', sans-serif;
	font-size:18px;
  line-height: 2rem; 
}

a{
  text-decoration: none;
  color: #3f3d3d;
}
/*表頭選項*/
header{
	position: fixed;
	background:rgb(4,66,124,1);
  z-index: 100;
  right: 0;
  left: 0; 
  top: 0;
}
.main-menu{  
	position: relative;	
	display: flex;
	justify-content: center;  
	box-sizing: border-box;
	height: 60px;   
  align-items:center;
}

.main-menu h1{
  color: #fff;
  font-size: 33px;
  z-index: 1;
	margin: 0;
	padding: 0;  	
}
.main-menu h1 span{
  font-size: 20px;
}
.main-nav{
  position: absolute;  
  background-size: 100%;
  top:100%;
  left: -100%;
  width: 100%;
  height: calc(100vh - 130px);
  padding-top: 70px;
  opacity: 0;
  transition: opacity 1s, left 0s 1s;  
}
.main-nav.active{
  left: 0;
  opacity: 1;
  transition: opacity 1s;
  background: url(../image/menu-bg.jpg) no-repeat bottom left #054178;
  background-size: contain;
}
.nav-box{
    display: flex;
    flex-wrap: wrap;
    justify-content:center;     
    padding: 0 30px;  
    margin: 0 auto; 
}
.main-nav a::before{
  content: "";
  display: inline-block;
  width: 10px;
  height: 100%; 
  vertical-align: middle;
  margin-right: 5px;
  background-image: url(../image/menu-icon-1-1.png) ;
}
.main-nav a.navlogo{
  display: none;
}
.main-nav a{
  /*border:1px dashed rgba(231,255,132,.5);*/
  color: #fff;
  width: 120px;
 /* height: 40px;*/
  padding: 0 5px;
  margin:5px 5px; 
  text-decoration: none;
}

.main-nav a.active,
.main-nav a:hover{
  color: #51e2fc;
  font-weight: bold;
}
.main-nav a.active::before{
  content: ""; 
  display: inline-block;
  width: 10px;
  background-image: url(../image/menu-icon-1-1.png) ;
   vertical-align: middle; 
}
.main-nav>.nav-address{
  color:#fff;
  font-size: 15px;
  width: 280px;
  margin:20px auto 0px auto;
}
.main-nav>.nav-address span{
  display: block;
}
.main-nav>.nav-address span.tel{
  font-size: 24px;
  font-weight: bold;
}
.main-nav>.fo-social {
  width: 170px;
  padding: 0;
  margin: 0 auto;
}
.main-nav>.fo-social a{
  width: 30px;
  display: inline-block;
  border-bottom: none;
}
.main-nav>.fo-social a::before{
  content: ""; 
  display: inline-block;
  width: 0px;
  height: 0px;  
  right:0; 
  background-image: none ;
}
@media screen and (min-width: 1024px){
  .main-menu{  
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    width: 990px;
    justify-content: space-between;
  } 
  .main-menu h1{
    margin-left: 15px;
  }

  .main-nav{
    position: relative;
    left:0;
    top: 0px;
    margin: 5px 0;
    width: auto;
    height: auto;
    padding-top: 0;
    background:none; 
    opacity: 1;   
  }
  
  .nav-box{         
    padding: 0;  
    margin: 0 auto; 
  }
  .main-nav a{
    display: inline-block;
    width: 90px;
  }
  .main-nav a.navlogo::before{
    content: ""; 
    display: inline-block;
    width: 0px;
    height: 0px;  
    right:0; 
    background-image: none ;
  }
  .main-nav a.navlogo{
    position: relative;
    top: 0;
    width: 120px;
    display: block;
    z-index: 1; 
    border-bottom:0;
  }
  .main-nav a.navlogo img{
    position: relative;
    top: -30px;
    left: -15px;
  }
  
  .main-nav>.nav-address,
  .main-nav>.fo-social{
    display: none;
  }
   .hb{
    display: none;
  } 
  
}

.hb{
  width: 31px;
  height: 31px;
  margin-right: 10px;
  background: #53b7e2;
  position: relative; 
  border-radius: 15px;  
  /*top:15px;*/
  margin-left: 50px; 
}

.hb:before,
.hb:after{
  content: '';
  width: 80%;
  height: 3px;
  background: #000;
  position: absolute;
  left: 0;
  right: 0;     
  margin: auto;
}
.hb:before{
  top:8px;
  transform: ;
  transition: top .3s .3s,
        transform .3s;
}
.hb:after{
  bottom:8px;      
  box-shadow: 0px -6px 0 #000; 
  transition: box-shadow .3s .6s, 
        bottom .3s .3s, 
        transform .3s;
}
/*.hb:hover:before{
  top: 15px;
  transform: rotate(45deg);
  transition: top .3s .3s,transform .3s .6s;
}
.hb:hover:after{
  bottom: 15px;
  transform: rotate(-45deg);
  box-shadow: 0px -8px 0px #f000;
  transition: box-shadow .3s, bottom .3s .3s, transform .3s .6s; 
}*/

.hb.active:before{
  top: 14px;
  transform: rotate(45deg);
  transition: top .3s .3s,transform .3s .6s;
}
.hb.active:after{
  bottom: 15px;
  transform: rotate(-45deg);
  box-shadow: 0px -8px 0px #f000;
  transition: box-shadow .3s, bottom .3s .3s, transform .3s .6s; 
}

.border-1{
  border: 1px solid #000;
}
.clear{
  clear: both;
}
.mb50{
  margin-bottom: 50px;
}

/*表頭*/
.unit-headline{
  width: 100%;
  background:#d1edff;
  height: 100px;
  text-align: center;
  padding-top: 15px;
  margin-bottom: 50px; 
}
.unit-headline h2{
  vertical-align: middle; 
  padding: 0;  
  font-size: 30px;
  color:#369ada; 
  margin: 20px auto 0 auto;  
}
ul.breadcrumb{
  list-style: none;
  margin-top: 0;
  padding: 0;
  text-align: center;
}
ul.breadcrumb li{
  font-size: 13px;
  display: inline-block;
  margin:0px;
}
ul.breadcrumb li+li:before{  
  content: '/';
  padding-right: 5px;
  color:#003e65;  
}
ul.breadcrumb li a{
  color: #003e65;
}
ul.breadcrumb li a:hover{
  color: #cc0157;
}


footer{  
  box-sizing: border-box;
  padding: 15px;
  background:#a2ccf3;
  color: #002163;
}
.footer-flex{
  box-sizing: border-box;
  max-width: 1200px;
  padding: 0 var(--col-gap);
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 15px;   
  }

.fo-logo{  
  box-sizing: border-box;
  border-bottom: 1px solid #509adf;
  padding-bottom: 5px;
}
.fo-logo h3{
  font-size: 24px;
  margin: 0 0 20px;
}
.fo-logo h3 a{
  color:#002163;
  display: block;
  font-size: 18px;
}
.fo-logo ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.fo-logo li{
  white-space:nowrap;
}

.fo-info{
 
}
.fo-info h4{
  background: #509adf;
  text-align: center;
  color:#fff;
  margin: 15px 0;
  padding: 5px;
}
.fo-address ,
.fo-social{
  max-width: 350px;
  margin-right: auto;
  margin-left: auto;
}

.fo-address span.tel{
  display: block;
  font-size: 24px;
  font-weight: bold;
}
.fo-social a{
  display: inline-block;
  font-size: 35px;   
  margin: 8px;
}
.fo-social a.icon-line{
  color:rgba(6,199,85,1);
}
.fo-social a.icon-fb{
  color:rgba(4,109,228,1);
}
.fo-social a.icon-ig{  
  color:rgba(189,45,114,1);
}
.fo-social a.icon-line:hover,
.fo-social a.icon-fb:hover,
.fo-social a.icon-ig:hover{
  color:rgba(231,255,132,1);
}
@media screen and (min-width: 768px){
  .footer-flex{
    margin: 0 auto;
    display: flex;     
  }
  .footer-flex span{
    display: block;
  }
  .fo-logo{
    margin-right: 20px;
    border-right: 1px solid #509adf;
    border-bottom: 0px;
    padding-right: 20px;
  }
  .fo-info h4{
    width: 100px;
    border-radius: 5px;
    margin-right: 15px;
    margin-bottom: 5px;
    padding: 3px;
  }

  .fo-address ,
  .fo-social{
    margin: 0;
  }
  .fo-address {
    height: 100px;
   align-self: flex-end;
  }
  .fo-social{
    height: 50px;
    align-self: flex-end;
  }
}
/*通用*/
h1.logo a{
  color: #fff;
}
section{
  margin-top: 60px;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto; 
}
.type-24{
  font-size: 24px;
  color:#04427c;
}
.type-size-50{
  font-size: 50px;
  padding-top: 15px;
  padding-bottom: 5px;
}
.img-inblock{
  display: inline-block !important;
  margin-right: 5px;
  vertical-align: center;
  margin-bottom: 0 !important;
}
.unit-content{  
  position: relative;
  box-sizing: border-box;
  padding:30px 15px;   
}
/*字顏色*/
.color-red{
  color:#ae0000;
}
.color-blue{
  color:#0009c9;
}
.bg-gray{
  background:#e9e9e9;
}
.bg-excellent{
  background: #ffe3e3;
}

@media screen and (min-width: 768px){
  section.section-room{
    display: flex;
    flex-wrap: wrap;
  }
   
  
}
@media screen and (min-width: 1280px){
  .unit-content{    
    padding:30px 100px;
  } 
}
/*首頁*/
.ind-img{
  width: 100%;
  margin-bottom: 50px;
}
.ind-img .owl-theme .owl-nav.disabled+.owl-dots{
  margin-top: -35px;
  position: absolute;
  right: 0;
  left: 0;
  margin-left: auto;
  margin-right: auto; 
}
/*首頁服務介紹*/
.ind-service{
  background:url(../image/ind/ind-service-bg.jpg) no-repeat bottom right #dbc2a7;
  background-size: 85%;
}
.ind-service h3{
  text-align: center;
  font-size: 28px;
  color: #644729;
}
.iscon{
  width: 58%;
  margin-top: 70px;
  margin-bottom: 30px;
}
.iscon ul{
  list-style: none;
  margin: 0;
  padding: 0;
}
.iscon ul li{
  background:#c1996e;
  color: #fff;
  text-align: center;
  padding: 8px 5px;
  margin: 5px;
}
.iscon a{
  color: #fff;
}
@media screen and (min-width: 1024px){
  .iscon{
    width: 67%;
  }
  .iscon ul li{
    box-sizing: border-box;
    display: inline-block;
    width: 47%;
    margin: 5px 1%;
    white-space:nowrap;
  } 
  .iscon ul li.end{
    width: 97%;
  }
}

/*首頁NEWS*/

.ind-news-list h2{
  box-sizing: border-box;
  width: 100%;
  padding-top: 40px;
  color:#fff;
  font-size:42px;    
}
.ind-news-list h2 span{
  margin-bottom: 5px;
  border-bottom:3px solid #fff;
  }
.ind-news{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  box-sizing: border-box; 
  /*align-content: space-between;*/
  /* border:1px solid #f00; */   
} 
.ind-news-item{
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 50px;
}
.ind-news-item h3{
  width: 100%;
  margin-top: 0;
  padding-top: 0px;
}

.ini-img{
  box-sizing: border-box;
  width: 100%;
}
.ini-text{
  box-sizing: border-box;  
  width: 100%;
}
.ini-text p{
  margin-top: 0;
}
.ini-img .pic{
  width: 100%;
  padding-bottom: 67%;
  position: relative;
}
.ini-img .pic img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
}
a.a-more{
  display: inline-block;
  padding: 0 10px;
  border: 1px solid #a4a4a4;  
  margin-bottom: 8px;
  float: right;
  font-size: 12px;
}
a.a-more:hover{
  background: #93c2ed;
  color:#000;
}

.ind-news-item:last-child{
  margin-bottom: 100px;
}

@media screen and (min-width: 1024px){
  .ind-news-item{
      width: 100%;
      margin-left: 0;
      margin-right: 0;
    }  
  .ini-img{
    box-sizing: border-box;
    width: 34%;
  }
  .ini-text{
    box-sizing: border-box;
    padding-left:20px;
    width: 66%;
  }
  .ind-news-item:last-child{
    margin-bottom: 50px;
  } 
}

/*首頁品牌*/

@media screen and (min-width: 1024px){
  .indbrand-con{
    margin-right: -15px;
    margin-left: -15px;
  }
}
.ind-brand{
  width: 100%;
  box-sizing: border-box;
  padding: 15px 0;
}
.ind-brand>.owl-theme .owl-dots, .owl-theme .owl-nav {  
  display: none !important;
}
.ind-brand h4{
  text-align: center;
}
h3.indbrandh3{
  width: 100%;
  font-size: 28px;
  text-align: center;
  padding-bottom: 8px;
  border-bottom: 1px solid #c6bcb3;
}



/*最新消息*/
.new-con{
  box-sizing: border-box;
  margin-right: -15px;
  margin-left: -15px;
  display: flex;
  flex-wrap:wrap;
  justify-content:center;
  margin-bottom:50px; 
}

/*最新消息每一區塊*/
.new-item{
  width: calc(100% - 60px);
  box-sizing: border-box;
  border:1px solid #dfdfdf;
  padding-right: 15px;
  padding-left: 15px;
  margin:0 15px 25px 15px;
}
.newpic-box{
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 67%;
  box-sizing: border-box;
  margin-bottom: 20px;
}
.newpic{
  position: absolute;
  width: 100%;
  height: 100%;
}
.newpic img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.newtxt{
  width: 100%;  
  margin-bottom: 20px; 
}
/*最新消息內的內容*/
.new-show{
  box-sizing: border-box;
  margin-bottom:50px; 
  border:1px solid #dfdfdf;
  padding: 0 15px 15px 15px;
}
.new-show h3.new-title{
  color: #04427c;
  font-size: 30px;
  line-height: 1.5em;
}
.new-date{
  font-size: 15px;
  color:#919091;
  text-align: right;
  margin-bottom: 5px;
}
ul.share-but{
  list-style: none;
  margin: 0;
  padding: 0;
}
ul.share-but li{
  display: inline-block;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0; 

}
ul.share-but li img{
  vertical-align: middle;
  width: 100%;
}

@media screen and (min-width: 600px){
  .new-item{
    width: calc(50% - 60px);
  }
}
@media screen and (min-width: 1024px){
  .new-item{
    width: calc(33.33333% - 60px);

  }
}

/*優惠訊息*/
.ons-all-con{
  box-sizing: border-box;
  max-width: 1200px;
  padding: 0 var(--col-gap);
  margin:0 auto 50px;
  position: relative;
}
/*優惠選單*/
.select-box{
  width: 100%;
  height: 45px;
  position: relative;
  margin-bottom: 10px;
}

@media screen (min-width: 769px) and (max-width: 1023px){ 
  .ons-con{    
  }
}

.con-con{  
  display: flex;
  flex-wrap: wrap;
  margin-top: -50px;
  margin-bottom: 50px;
}

.con-map{
  box-sizing: border-box;
  width: 100%;
  height: 450px;
}
.con-map iframe{
  width: 100%;
  height: 100%;
  border: 0;
}
.con-info{
  box-sizing: border-box;
  background: url(../image/con-info-bg.jpg) no-repeat bottom right #9fd8fc;
  background-size: cover;
  width: 100%;
  padding: 20px;
  position: relative;
  order: -1;
}
.con-info h3 {
  font-size: 25px;
} 
.con-info-box{
  text-align: left;  
  margin-top: 20px;
  padding: 0px;
}
.con-info-box ul{
  list-style: none;
  margin: 0;
  padding: 20px;
  border-radius: 20px;
  background: rgba(54,154,218,.3);
}
.con-info-box ul li{
  color: #369ada;
  font-weight: bolder;
  font-size: 22px;
  line-height: 2em;
}
.con-info-box ul li a{
  color:#fff;
}
@media screen and (min-width: 990px){ 
  .con-map{
    width: 50%;
  }
  .con-info{
    width: 50%;
    order: 0;
    background-size: auto;
  }
  .con-info-box{
    left:25px;
    margin-left: 50px;
    margin-top: 20px;  
  }
  .con-info-box ul{
    width: 50%;
  }
}

/*解決問題*/
.solve-con{
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  max-width: 1200px;
  padding: 0 var(--col-gap);
  margin-left: auto;
  margin-right: auto;
}
.solve-title{
  width: 100%; 
}
.solve-title h2{  
  border-bottom: 1px solid #0050e3;
  color: #0050e3;
  font-size: 24px;
  padding-bottom: 5px; 
}
.sol-con-item{
  box-sizing: border-box;
  width: calc(50% - 30px);
  padding: 15px;
  margin: 15px;
  border: 1px solid #dadada;
}
.sol-con-item h3 {    
  text-align: center;
}
.ssol-con-item-pic{
  width: 100%;
}
.sol-con-item-pic img{
  max-width: 100%;
}

@media screen and (min-width: 990px){ 
  .sol-con-item{
    width: calc(25% - 30px);
  }
}

/*關於我們*/
.abo-con,
.abo-con1{  
  box-sizing: border-box;
  max-width: 1200px;
  padding: 0 var(--col-gap);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50px;
}
.abo-con{ 
  margin-top: -50px; 
  background: url(../image/abo-bg.jpg) no-repeat right #ddc4b4;
  background-size: cover; 
}
.abo-con h3{
  font-size: 22px;
} 
.abo-con-text{
  box-sizing: border-box;
  background: rgba(255,255,255,.5);
  width: calc(100% - 40px);
  padding:50px 20px;
  margin: 0 20px;
}
@media screen and (min-width: 768px){ 
  .abo-con{
    margin-top: 50px;
  }
  .abo-con-text{  
    width: 30%;    
    background: rgba(255,255,255,.3);
  }
}
.abo-con1-item{
  position: relative;
  margin-bottom: 50px;
}
.abo-con1-item .pic{
  width: 100%;
  margin-bottom: 20px;
}
.abo-con1-item .pic img{
  width: 100%;
}
.abo-con1-item h3{
  color: #fff;
  background: #575656;
  padding: 8px;
  margin: 0 15px 20px;
}
.abo-con1-item .txt{
  color: #909090;
  margin: 0 15px;
}

@media screen and (min-width: 768px){ 
  .abo-con1-item .pic{
    position: absolute;
    right: 0;
    top:0;
    width: 30%;
    z-index: 0;
  }
  .sol-con-item-box{
    position: relative;    
    width: calc(100% - 30px);    
    z-index: 2;
    border:1px solid #575656;
    margin: 15px;
    top:15px;
  }
  .abo-con1-item h3{
    display: inline-block;
    margin-top: 25px;
  }
  .abo-con1-item .txt{    
    width: 65%;
    padding: 35px 15px;
  }
}

/*服務項目*/ 
.product-con-blue,
.product-con-green{
  box-sizing: border-box;
  max-width: 1200px;
  padding: 0;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50px;   
}
.product-con-green{
  background: #f4f4f4;
}
.product-con-blue h2{
  background: #369ada;
  color:#fff;
  text-align: center;
  font-size: 30px;
  padding:15px;
  margin: 0;
}
.product-con-blue  h4{
  font-size: 18px;
  text-align: center;
  color: #0074e0;
  border-bottom: 1px solid #0074e0;
  padding-bottom: 8px;
}
.product-con-green h2{
  background: #00c695;
  color:#fff;
  font-size: 30px;
  text-align: center;
  padding:15px;
  margin: 0;
}
.product-con-green h4{
  font-size: 18px;
  text-align: center;
  color: #00c695;
  border-bottom: 1px solid #00c695;
  padding-bottom: 8px;
}
.pci-show-con>ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.pci-show-con>ul li{ 
  box-sizing: border-box;
  border-radius: 10px;
  padding: 8px;
  margin: 0px 10px 20px;
  width: calc(50% - 20px);
}

.product-con-blue ul li{ 
  background-color: #04427c;
  color:#fff;
  text-align: center;
} 

.product-con-blue ul li span{
  display: block;
  font-weight: bolder;
  margin-bottom: 15px;
  color:#f7e843;
}

.product-con-blue ol li,
.product-con-green ol li{
  border-bottom: 1px solid #dcdcdc;
  margin-bottom: 3px; 
}

.product-con-green ul li{ 
  background-color: #01ab81;
  color:#fff;
  text-align: center;
}

.product-con-blue ul.li-3 li{
    width: calc(33.33333% - 20px);  
  }

.pci-show-pic img{
  max-width: 100%;
}
.pci-show-con{
  box-sizing: border-box;
  padding: 15px;
}



@media screen and (min-width: 990px){
  .product-con-blue h2{
    background: none;
    color:#369ada;
  }
  .product-con-green h2{
    background: none;
    color:#00c695;
  }
  .pro-con-item{
    display: flex;
    flex-wrap: wrap; 
  } 
  .pro-con-item-tit{
    box-sizing: border-box;
    width: 18%;
  }
  .pro-con-item-show{
    box-sizing: border-box;
    width: 82%;
  }
  .pci-show-con>ul li{ 
    width: calc(33.33333% - 20px);
  }
  .product-con-blue ul.li-4 li{
    width: calc(25% - 20px);  
  }
  .product-con-blue ol.li-3 {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
  }
  ol.li-3 li{
    width: calc(33.33333% - 20px);  
    margin: 10px;
  }


}


/*房間*/
.unit-room{
  height: 250px;    
  display: flex;  
  flex-direction: column-reverse;
  background: url(../image/unit-room-small.jpg) no-repeat top center;
  background-size: cover; 
}
.room-list{         
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 50px;
}
.allroom-list-img{
  position: relative;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  z-index: 2;
}
.allroom-list-img img{
  width: 100%;
  height: 100%;
}
.allroom-list-content{
  position: relative;
  box-sizing: border-box;
  background: #fff;
  box-shadow: rgba(0,0,0,.4) 0.1em 0.1em 0.5em; 
  top: -50px;        
  z-index: 1;
  padding: 50px 20px 20px 20px;
}
.allroom-list-content h3{
  color: #0075d8;
}
.allroom-list-content ul{
  list-style: none;
  margin: 0;
  padding: 0;
}
.allroom-list-content a.more{
  display: inline-block;
  margin-top: 10px;
}
.allroom-list-content a.more img{
  display: inline-block;
  vertical-align: middle;
}

.allroom-list-content a.more span{
  display: inline-block;
  padding: 0 10px;
  border:1px dashed #f84a24;
  border-radius: 10px;
  color:#f84a24;
}

.allroom-list-content a.more:hover span{
  background:#f84a24;
  color:#fff;
 
}
/*所有房間滑動特效*/
.h3-show-allroom{
  border-bottom: 1px solid #000;
  margin-bottom: 10px;
}


.owl-carousel-allroom  .item{
  position: relative;
}

.owl-carousel-allroom .item.active{
  width: 0 !important;  
}

.owl-carousel-allroom h4{
  position: absolute;
  margin: 0;
  left: 0;
  right: 0;
  bottom: 0;  
  margin-right: auto;
  margin-left: auto;
  text-align: center;
  font-weight: normal;
  background: rgba(0,0,0,.4);
}
.owl-carousel-allroom .owl-nav button.owl-next, 
.owl-carousel-allroom .owl-nav button.owl-prev{
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  background: #000;  
  margin:0;   
  top:-50px;  
}
.owl-carousel-allroom .owl-nav button.owl-next{ 
  right: 0;  
  background: #000;
}

.owl-carousel-allroom .owl-nav button.owl-prev{
  right: 35px;
}

.owl-carousel-allroom  .owl-nav button.owl-prev span,
.owl-carousel-allroom  .owl-nav button.owl-next span {
    font-size: 30px;
    line-height: 25px;
    color: #fff;
  }

@media screen and (min-width: 768px){  
  .unit-room{
    position: sticky;
    flex-direction: column;
    background: url(../image/unit-room.jpg) no-repeat top center; 
    background-size: cover;   
    height: calc(100vh - 60px); 
    top:60px;
  }
}
@media screen and (min-width: 1024px){ 
  .room-list{ 
    position: relative;
  }
  .allroom-list-img{
    position: absolute;
    width: 40%;
    top: 0;  
    margin-top:50px; 
  }  
  .allroom-list-content{
    padding-top: 30px;
    width: 80%;
    top: 0;
    left: -6px;
    height: 400px;
    margin-left: auto;
    padding-left:22%;
    padding-right: 30px;
  }
  .room-list:nth-child(even) .allroom-list-img{    
    right: 0;
  }
  .room-list:nth-child(even) .allroom-list-content{    
    left:-6px;
    margin-left: 0;
    padding-right:22%;
    padding-left:30px;
  }
}

/*單一房間*/
.single-room{
  display: flex;
  flex-wrap: wrap;
  background: #fff;
  padding: 20px;
  box-shadow: rgba(0,0,0,.4) 0.1em 0.1em 0.5em; 
  margin-bottom: 50px;  
}
.sr-info{
  width: 100%;
}
.sr-info h3{
  color:#006ac3;
  font-size: 28px;
  margin: 0;  
}
.sr-info h3 span{
  display: block;
  font-size: 18px;
}
.sr-info ul{
  list-style: none;
  padding: 0;
  margin: 0;
  margin-top: 20px;
}
.sr-info ul li{  
  margin-bottom: 20px;
}
.sr-info ul li span{
  display: block;
  font-size: 15px;
  color:#c03232;
  line-height: 15px;
}
.sr-photo{
  width: 100%;
  order: -1;
  margin-bottom: 20px;
}

.sr-photo .owl-theme .owl-nav.disabled+.owl-dots{
  margin-top: -35px;
  position: absolute;
  right: 0;
  left: 0;
  margin-left: auto;
  margin-right: auto;
  /*border:1px solid #000;*/
}
.single-room-note{
  color:#7d7371;
}
.single-room-note h4{
  border-bottom: 1px solid #7d7371;
}
.single-room-note h4 span{
  display: inline-block;
  padding: 5px;
  background: #7d7371;
  color:#fff;
  margin-bottom: 3px;
}
.single-room-note h5{
  position: relative;
  font-size: 18px;
  margin: 15px 0 5px 0;
  padding: 0;
  left: -30px;

}
@media screen and (min-width: 1024px){
  .sr-info{
    width: 24%;
  }
  .sr-photo{
    width: 76%;
    order: 1;
    margin-bottom: 0px;
  }
}

/*套裝行程*/
.unit-package{
  height: 250px;    
  display: flex;  
  flex-direction: column-reverse;
  background: url(../image/unit-package-small.jpg) no-repeat top center;
  background-size: cover; 
}
.package-list{
  display: flex;
  flex-wrap: wrap;
  background: #fff;
  padding: 20px;
  box-shadow: rgba(0,0,0,.4) 0.1em 0.1em 0.5em; 
  margin-bottom: 50px;  
}
.package-info{
  box-sizing: border-box;
  width: 100%; 
}
.package-info h3 span{
  display: block;
  font-size: 15px;
}

.package-info h3.pack-a{
  color:#006ac3;
  border-bottom: 1px solid #006ac3;
} 
.package-info h3.pack-a span{
  color: #7da8e6;
}
.package-info h3.pack-b{
  color:#d60037;
  border-bottom: 1px solid #d60037;
} 
.package-info h3.pack-b span{
  color: #ff83a3;
}
.package-photo{
  box-sizing: border-box;
  width: 100%;
}
.package-photo img{
  max-width: 100%;
}
/*套裝加購*/
.package-add{
  display: flex;
  flex-wrap: wrap;
}
.package-add h3{
  width: 100%;
  border-bottom: 1px solid #0173b6;
}
.package-add h3 span{
  position: relative;
  color:#0173b6;
  font-size: 26px;
  border-bottom: 2px solid #0173b6;
  top:-5px;
  right: 50%;
  left: 50%;
}
.pac-add-info{
  box-sizing: border-box;
  width: 50%;
  padding:15px;  
}
.pac-add-info img{
  width: 100%;
}
.pac-add-info h4{
  margin: 5px;
  padding: 0;
}
.pac-add-info p{
  margin: 0;
}
@media screen and (min-width: 768px){  
  .unit-package{
    position: sticky;
    flex-direction: column;
    background: url(../image/unit-package.jpg) no-repeat top center; 
    background-size: cover;   
    height: calc(100vh - 60px); 
    top:60px;
  }
  .package-info{
    width: 60%; 
  }
  .package-photo{
    width: 40%; 
  }
  .package-photo img{
    max-width: 100%;
  }  
  .pac-add-info{
    width: 50%;
  }
}
@media screen and (min-width: 1280px){
  .pac-add-info{
    width: 33.33333%;
  }
}

/*訂房須知*/
.unit-notice{
  height: 250px;    
  display: flex;  
  flex-direction: column-reverse;
  background: url(../image/unit-notice-small.jpg) no-repeat top center;
  background-size: cover; 
}
.notice-show{
  display: flex;
  flex-wrap: wrap;  
  margin-bottom: 50px;  
}
.notice-account{
  box-sizing: border-box;
  background: #fff;
  padding: 20px;
  box-shadow: rgba(0,0,0,.4) 0.1em 0.1em 0.5em; 
  margin-bottom: 50px; 
  width: 100%; 
}
.notice-account h3{
  text-align: center;
  border-bottom: 2px solid #000;
  margin-top: 0;
}
.notice-account ul{
  list-style: none;
  margin: 0;
  padding: 0;
}
.notice-account ul li{
  border-bottom: 1px dotted #606060;
  margin-bottom: 5px;
}
.notice-account ul li span i{
  display: inline-block;
  text-align: center;
  width: 16px;
}
.notice-account ul li span{
  display: inline-block;
  width: 96px;
  font-size: 15px;
  color:#606060;
}
.bottom-addline{
  display: block;
  margin-bottom: 15px;
  text-align: center;
  color:#fff;
  background-color: #169a00;
  font-weight: bold; 
}
.bottom-addtel{
  display: block;
  margin-bottom: 15px;
  text-align: center;
  color:#fff;
  background-color: #2ad542;
  font-weight: bold; 
  
}
.noticeh4{
  text-align: center;
  font-size: 22px;
}
#mustknow h4,
#cancel h4{
  padding-left: 10px;
  color:#0941a8;
  background:#c4d2ec;
}
#cancel h5{
  text-align: left;
  font-size: 20px;
  padding: 0;
  margin: 0;
  margin-left:-30px;
}
.noticeh4 span{
  display: block;
  color: #f00;
  font-size: 16px;
  font-weight: normal;
} 

@media screen and (min-width: 768px){  
  .unit-notice{
    position: sticky;
    flex-direction: column;
    background: url(../image/unit-notice.jpg) no-repeat top center; 
    background-size: cover;   
    height: calc(100vh - 60px); 
    top:60px;
  }  
}
@media screen and (min-width: 1024px){  
  .notice-account{
    width: 300px;
    margin-left: 20px;
    order: 1;
  }
  .notice-tab{
    width: calc(100% - 320px);
  }
}





.page{
  text-align: center;
}
.pagination-con{
  text-align: center;
}

.pagination { 
  margin: 20px 0;
  border-radius: 4px;
}
.pagination>li {
    display: inline-block;
    margin: 1px;
}

.pagination>li>a,
.pagination>li>span {
    position: relative;
    font-size: 12px;
    font-family: Arilal,serif;
    float: left;
    padding: 6px 10px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: #337ab7;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
}

.pagination>li>a:focus,
.pagination>li>a:hover,
.pagination>li>span:focus,
.pagination>li>span:hover {
    z-index: 2;
    color: #23527c;
    background-color: #eee;
    border-color: #ddd;
}

.pagination>li:first-child>a,
.pagination>li:first-child>span {
    margin-left: 0;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.pagination>li:last-child>a,
.pagination>li:last-child>span {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.pagination>.active>a,
.pagination>.active>a:focus,
.pagination>.active>a:hover,
.pagination>.active>span,
.pagination>.active>span:focus,
.pagination>.active>span:hover {
    z-index: 3;
    color: #fff;
    cursor: default;
    background-color: #337ab7;
    border-color: #337ab7;
}

.pagination>.disabled>a,
.pagination>.disabled>a:focus,
.pagination>.disabled>a:hover,
.pagination>.disabled>span,
.pagination>.disabled>span:focus,
.pagination>.disabled>span:hover {
    color: #777;
    cursor: not-allowed;
    background-color: #fff;
    border-color: #ddd;
}


@media screen and (min-width: 768px){
  .news-item{
    width: calc(48% - 20px);
  }
  .unit-news{
    position: sticky;
    flex-direction: column;
    background: url(../image/unit-news.jpg) no-repeat top center; 
    background-size: cover;   
    height: calc(100vh - 60px); 
    top:60px;
  } 
  .new-detail{
    background-size: 199px auto;
  }
  .new-detail h3{
    font-size: 28px;
  }
} 
@media screen and (min-width: 1288px){
  .news-item{
    width: calc(33.33333% - 20px);
  }
}