body, html{ font-family: Arial, Verdana, 微軟正黑體,  DFHei-Bd-HK-BF; margin:0 auto;}
.htitle{ font-size: 22px; color: #6490cd;letter-spacing: 2px; margin-bottom:10px; padding:0px;}
.ctitle{width:275px; font-size: 24px;color: #FFFFFF; letter-spacing: 2px; padding:5px 10px;background: #86A9CD;}
.otitle{width:275px; font-size: 24px;color: #FFFFFF; letter-spacing: 2px; padding:5px 10px;background: #F1C06E;}
.dline{padding-top:5px; border-bottom: 2px dotted #F5A623;}
.bt{width: 120px; color:#fff;font-size:33px; line-height: 40px; margin-left: 35px; margin-top:-137px;}
.period{width: 100px; font-size:22px;line-height: 28px;}
.promo{font-size: 20px;color: #4A90E2;letter-spacing: 1.5px;line-height: 33px; margin-top:20px;}
.days{font-size: 26px;padding:3px 11px; border-radius:20px; background:#a1dbf9; color:#fff;}
.video{position: relative; margin-top:8%; padding-bottom: 57%;}
.video1{position: relative; margin-top:1%; padding-bottom: 57%;}
.youtube{position: absolute; top:0; left:0; width:100% !important; height: 100% !important;}
.sub1{margin-top:25px;}
.sub2{margin-left:20px; margin-top:25px;}
.sub3{margin-left:50px; margin-top:25px;}
.sub1 img, .sub2 img, .sub3 img{vertical-align: top;}
.promo img{vertical-align:bottom;}
.promotext{font-size:24px; font-weight:500; line-height:30px; margin-top:0px; margin-left:-25px; z-index:9;  display:inline-block;}
.pcontent{font-size:18px; font-weight:400; padding-left:10px; color:#4A4A4A; display:block;}
.card{padding:5px;  width:100%; height:100%;  border-radius: 20px;overflow: hidden; box-shadow: 0 0 10px rgba(0,0,0,0.5);}
.area{width:88%; margin:20px 6%; display: inline-block;}
.thumb {
    overflow: hidden;
    display: block;
}
.thumb img {
    border-radius: 15px;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 600ms;
    transition-duration: 600ms;
}
.oval img {
    border-radius:10vw;
}
.shade{
    position: absolute;
    bottom: 5px;
    left: 0;
    right: 6px;
    color: #fff;
    text-align:center;
}
.shade1{
    position: absolute;
    top: -32px;
    left: 6px;
    right: 0;
    color: #fff;
    text-align: right;
}
.shade2{
    position: absolute;
    top: -72px;
    left: 0;
    right: 6px;
    color: #fff;
    text-align: right;
}
.iconW{top: 120px;
    color: #000;
    position: relative ;z-index:10;
}
.iconW1{top: 170px;
    color: #000;
    position: relative ;z-index:10;
}
.iconWT{
font-size: 34px; font-weight:500; line-height:40px;
color: #4A4A4A;
letter-spacing: 1.5px;
text-align:center;}
.iconWTl{
font-size: 32px; line-height:40px;
color: #4A4A4A;
letter-spacing: 1.5px;
text-align:left; padding-left:12%;}
.iconW-img{ z-index: 2;}
.iconW-img1{text-align: left; z-index: 2;}
.container-fluid {width:100%; max-width:1200px;}
#bigImg{padding-left: 0px; padding-right: 0px;}
#bigImg .carousel {
    position: relative;
    z-index: 99;
}
#bigImg .carousel .nav-pills > li {
    width:24.8%;
    float: left;
    background: #004a9c;
    font-family: Arial, Verdana, 微軟正黑體,  DFHei-Bd-HK-BF;
    font-size: 22px;
    font-weight:600;
    color: #FFFFF0;
    letter-spacing: 0;}

#bigImg .carousel .nav-pills > li > a {
    border-radius: 4px;
    color: #FFFFF0;}
#bigImg .carousel .nav-pills > li + li {
    margin-left: 2px; }

#bigImg .carousel .nav-pills > li.active > a{
    background: #006aa7;
    letter-spacing: 0;
    text-align: center; }

#bigImg .carousel .nav-pills > li.active > a:hover{
    background: #006aa7;
    letter-spacing: 0;
    text-align: center; }

#bigImg .carousel .nav-pills > li.active > a:focus{
    background: #006aa7;
    letter-spacing: 0;
    text-align: center; }

#bigImg .carousel .nav-pills > li > a:hover, .nav-pills > li> a:focus  {
    background: #006aa7;
    letter-spacing: 0;
    text-align: center; }

.SPDate { width: 100%; }
.hidden {display: none; }

.bnpic{margin-top: 3%;}

.wbox{margin:20px 0px;}
.attraction{font-size: 24px;letter-spacing: 2px; line-height: 40px; margin-top: 60px; padding:0px;}
.mustsee{font-size: 24px;letter-spacing: 2px; line-height: 40px; padding-left:10px; color:#8fb5e1;}
.btide{font-size:17px;letter-spacing: 1px; line-height: 25px; padding:10px 15px; margin:10px 15px 30px 10px; border:2px dashed #8fb5e1;}
.list{font-size: 22px;letter-spacing: 1px; line-height: 40px; margin-left:41.66666667%; margin-top:-20px; padding:0px;}
.list ul{list-style:none;}
.list ul li::before {
  content: "●"; 
  color: #8FB5E1; 
  font-weight: 600;
  display: inline-block;
  width: 1em; 
  margin-left: -1em;}
.map-tl{width: 41.7%; vertical-align:top;  display: inline-block;}
.map-tr{width: 68%; margin-left:-11%; display: inline-block;}
.map-bl{width: 64.8%; vertical-align:bottom; margin-top:-10%; display: inline-block;}
.map-br{width: 52.8%; margin-left:-18%; display: inline-block;}
.tbox{width: 33.9%; margin-top:-55%; margin-right:5%; padding: 5px 10px; background: rgba(255,255,255,0.5); float:right; display: inline-block; transition-timing-function: ease; transition-duration: 4s; z-index: 9;position: relative;}
.dline1{height:5spx; border-bottom:3px dotted #f38a47; margin-bottom:5px;}
.mcontent{font-size:16px; line-height:28px; color:#6c4821;}
#bnote{max-width:920px;}
.more{font-size:18px; font-family:Arial; float:right; letter-spacing:0; margin-top:15px; color: #006aa7;}
#mainC{width:101%; margin-top:10px; margin-left: 10px;}
#prod-tabs{ padding-bottom:25px; padding-top: 15px;}
.banner-prod{width:101%; margin-left:-2.5%;}
.box{margin-bottom:20px;}
.bnbox{margin-top:30px;}
.note{font-size: 18px; line-height: 30px; color: #017bc4;}
.note1{font-size: 18px; line-height:25px; color: #6490cd;}
.gap{height:30px;display:block;}
#scroll {z-index: 999;}
.ytitle{font-size: 36px; color: #4AA6E2; letter-spacing: 3px; margin-bottom:20px; text-align: center;}
.ltitle{width:30%;font-size: 30px; color: #4A90E2; letter-spacing: 2.5px; margin-left:35%; margin-top:-28px;  margin-bottom:20px; background:#fff; text-align: center;}
.line{width:100%; border-bottom: 1px solid #979797;}
.lazypack a{ margin-right:17px;}
.lazypack a:last-child{float:right; margin-right:0px;}
.lazy{width:180px; height:180px; padding: 0px; margin-bottom: 10px;
border-radius: 18px;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.50);background-color: black;
border: 4px solid #FFFFFF; overflow: hidden; display: inline-block;}
.lazy:hover{width:182ㄆpx; height:182px; border: 8px solid #FFFFCC;}
.lazy .localimg{width:100%;}
.ltxt{width: 80px; margin-top: -120px; margin-left:40px; font-size: 36px;color: #FFFFFF;letter-spacing: 3px;line-height: 40px;text-shadow: 0 2px 4px rgba(0,0,0,0.50);}
.fancybox-wrap {max-width:930px;}
.innerbox {width:100%; max-width:900px;}
.map{background:#fffaea;}
.obox{color:#fff; font-size:20px; padding:5px 10px; background-image: linear-gradient(180deg, #8FB5E1 0%, #0155C4 100%);
border: 3px solid #fff;
box-shadow: 0 2px 4px 1px rgba(0,0,0,0.50);
border-radius: 8px; margin-bottom:15px;}
.obox:hover{color:#fff; background-image: linear-gradient(180deg, #8FB5E1 0%, #0155C4 100%);}
.tnote{font-size: 20px; line-height:28px; letter-spacing:2px; color: #F43B03; padding-left:10px; margin-bottom:15px;animation-name: tnote;
    animation-duration:0.7s;
    animation-iteration-count:infinite;
    animation-timing-function:ease-in;display:inline-block;}
@keyframes  tnote{
    50%{
        color:#F43B03;
    }
    100%{
        color:#4075aa;
    }
  }
a.link:hover{ color:#f5a623;}


@media screen and (min-width: 1401px){
.wcontainer {width: 1350px; margin-left:-5%;}
.AEholiday{width:260px; display:inline-block;}
.info{width:1120px; display:inline-block;}
}
@media (min-width:1200px) and (max-width:1400px){
.wcontainer {width: 100%; max-width: 1350px; margin-left: 15px;}
.AEholiday{width:250px; display:inline-block;}
.info{width:79.5%; display:inline-block;}
.trip {width: 25%; height: 2502px; overflow: hidden; }
.trip img{max-width:unset; margin-left: -110%;}
#bigImg .carousel .nav{width:100%; margin-left:0px;}
#bigImg .carousel .nav-pills > li {font-size: 20px;}
#bigImg .carousel .nav-pills > li.active > a{font-size: 20px;}
#bigImg .carousel .nav-pills > li.active > a:hover{font-size: 20px;}
#bigImg .carousel .nav-pills > li.active > a:focus{font-size: 20px;}
#bigImg .carousel .nav-pills > li > a:hover, .nav-pills > li> a:focus  {font-size: 20px;}
.wbox img{width:150px;}
.iconWT, .iconWTl {font-size:32px;}
.iconW1 {top: 160px;}
.lazypack a{ margin-right:15px;}
.lazypack a:last-child{margin-right:-3px;}
.lazy{width:160px; height:160px;}
.lazy:hover{width:162px; height:162px;}
.ltxt {width: 80px; margin-top: -115px; margin-left: 33px;}
}
@media (min-width:1100px) and (max-width:1199px){
.wcontainer {width: 100%; margin: 0px 15px;}
.AEholiday{width:20%; display:inline-block;}
.info{width:80%; display:inline-block;}
.trip{width: 22%; height: 1870px; overflow: hidden; }
.trip img{max-width:unset; margin-left:-360px;}
.noteicon {margin: 0px 2%;}
.infozone {margin-left:2%;margin-right:2%;}
#bigImg .carousel .nav{width:100%; margin-left:0px;}
#bigImg .carousel .nav-pills > li > a {font-size: 18px;padding: 10px 5px;}
#bigImg .carousel .nav-pills > li {width: 24.75%; font-size: 18px;}
#bigImg .carousel .nav-pills > li.active > a{font-size: 18px;}
#bigImg .carousel .nav-pills > li.active > a:hover{font-size: 18px;}
#bigImg .carousel .nav-pills > li.active > a:focus{font-size: 18px;}
#bigImg .carousel .nav-pills > li > a:hover, .nav-pills > li> a:focus  {font-size: 18px;}
.attraction{font-size:1.2em;line-height:1.5em;}
.list{font-size:1.1em;}
.tpromo {font-size: 1.25em; margin-top:10px;}
.tpromo img{width:140px;}
.bt{width: 4em; font-size:1.4em; line-height:1.2em; margin-left:33px; margin-top:-4.3em;}
.list {font-size: 18px; line-height: 35px;}
.period{font-size:0.7em;}
.shade2 {top: -62px;}
.iconW1 {top: 163px;}
.iconWT {font-size: 28px;}
.iconWTl {font-size: 28px;}
.area{width:90%; margin:35px 5%;}
.wbox {padding: 0px 5px;}
.wbox img{width:120px;}
.lazypack a{ margin-right:9px;}
.lazy{width:14vw; height:14vw;}
.lazy:hover{width:14.2vw; height:14.2vw;}
}

@media (min-width:992px) and (max-width:1099px){
.wcontainer {width: 97%; margin: 0px 15px;}
.AEholiday{width:20%; display:inline-block;}
.info{width:80%; display:inline-block;}
.trip{width: 22%; height:2300px; overflow: hidden; }
.trip img{max-width:unset; margin-left:-360px;}
.noteicon {margin: 0px 2%;}
.infozone {margin-left:2%;margin-right:2%;}
#bigImg .carousel .nav{width:100%; margin-left:0px;}
#bigImg .carousel .nav-pills > li > a {font-size: 18px;padding: 10px 4px;}
#bigImg .carousel .nav-pills > li {width: 24.75%; font-size: 18px;}
#bigImg .carousel .nav-pills > li.active > a{font-size: 18px;}
#bigImg .carousel .nav-pills > li.active > a:hover{font-size: 18px;}
#bigImg .carousel .nav-pills > li.active > a:focus{font-size: 18px;}
#bigImg .carousel .nav-pills > li > a:hover, .nav-pills > li> a:focus  {font-size: 18px;}
.attraction{font-size:1.2em;line-height:1.4em;margin-top: 72px;}
.list{font-size:1.1em;}
.tpromo {font-size: 1.25em; margin-top:10px;}
.tpromo img{width:130px;}
.bt{width: 3.5em; font-size:1.4em; line-height:1.2em; margin-left: 30px; margin-top:-4.1em;}
.list {font-size: 17px; line-height: 35px;}
.period{font-size:0.6em;}
.shade2 {top: -62px;}
.iconW {top:7em;}
.iconW1 {top: 155px;}
.iconWT {font-size: 1.6em;line-height: 2em;}
.iconWTl {font-size: 26px;}
.area{width:90%; margin:35px 5%;}
.wbox {padding: 0px 5px;}
.wbox img{width:120px;}
.btxt {font-size: 22px;}
.lazypack a{ margin-right:8px;}
.lazy{width:13.5vw; height:13.5vw;}
.lazy:hover{width:13.7px; height:13.7px;}
.ltxt {width: 72px; margin-top: -105px; margin-left: 27px; font-size: 33px;}
.tbox{width: 36%; margin-top: -55%; margin-right:1%;}
.mtitle {font-size:1.35em;}
.map-br {width: 52.8%; margin-left: -19%;}
}

@media (min-width:900px) and (max-width: 991px){
.wcontainer {width: 100%; margin: 0px 15px;}
.infozone li {margin-left: -10px;}
.trip{width: 22%; height: 2230px; overflow: hidden; }
.trip img{max-width:unset; margin-left:-360px;}
.sub1 img, .sub2 img, .sub3 img{width:auto;}
#bigImg{width:104%; margin-left:-2%;}
#bigImg .carousel .nav{width:102.5%; margin-left:0px;}
#bigImg .carousel .nav-pills > li {width: 24.2%; font-size: 18px;}
#bigImg .carousel .nav-pills > li > a {font-size: 18px;padding: 10px 5px;}
#bigImg .carousel .nav-pills > li.active > a{font-size: 18px;}
#bigImg .carousel .nav-pills > li.active > a:hover{font-size: 18px;}
#bigImg .carousel .nav-pills > li.active > a:focus{font-size: 18x;}
#bigImg .carousel .nav-pills > li > a:hover, .nav-pills > li> a:focus  {font-size: 18px;}
.ctitle{width:240px; font-size: 22px;}
.attraction{font-size:1.1em;line-height:1.3em;}
.tpromo {font-size: 1.25em; margin-top:10px;}
.tpromo img{width:120px;}
.bt{width: 3.5em; font-size:1.3em; line-height:1.1em; margin-left:25px; margin-top:-3.9em;}
.list {font-size: 16px; line-height: 30px; margin-top:5px;}
.period{font-size:0.6em;}
.iconW {top:5.5em;}
.iconW1 {top: 140px;}
.iconWT {font-size: 26px;line-height: 35px;}
.iconWTl {font-size: 26px;}
.area{width:90%; margin:35px 5%;}
.wbox {padding: 0px 10px;}
.wbox img{width:110px;}
.hint {font-size: 20px; margin-top: -40px;}
.hint1 {font-size: 20px; margin-top: -40px;}
.lazypack a{ margin-right:5px;}
.lazy{width:130px; height:130px;}
.lazy:hover{width:132px; height:132px;}
.ltitle {width: 40%; margin-left: 30%;}
.ltxt {width: 72px; margin-top: -100px; margin-left: 27px; font-size: 33px;}
.tbox{width: 38%; margin-top: -55.5%; margin-right:-1%;}
.dline1 {height: 5px; margin-bottom: 7px;}
.mtitle {font-size:1.25em;}
.mcontent {font-size: 15px; line-height:26px;}
.map-br {width: 52.8%; margin-left: -19%;}
}

@media (min-width:768px) and (max-width: 899px){
.wcontainer {width:96%; margin:0px 15px;}
.feature{width: 40%; padding-left: 0px; margin-top:-17%;}
.promotext {font-size: 1.2em;}
.pcontent {font-size: 1em;padding-left: 0px;}
.sub1, .sub2, .sub3{margin-top: 15px; padding:0px;}
.sub1 img, .sub2 img, .sub3 img{width:auto;}
.noteicon {font-size: 20px; padding-right: 10px; text-align: right; margin-top: -40px;}
.infozone {margin-bottom: 10px;}
.infozone li {margin-left: -15px; padding: 2px 0px;}
.trip{width:30%; height:2560px; overflow: hidden; }
.trip img{max-width:unset; margin-left:-360px;}
#bigImg{margin-left:0px;}
#bigImg .carousel .nav{width:100%; margin-left:0px;}
#bigImg .carousel .nav-pills > li {width: 24.75%; font-size: 18px;}
#bigImg .carousel .nav-pills > li > a {font-size: 18px;padding: 10px 5px;}
#bigImg .carousel .nav-pills > li.active > a{font-size: 18px;}
#bigImg .carousel .nav-pills > li.active > a:hover{font-size: 18px;}
#bigImg .carousel .nav-pills > li.active > a:focus{font-size: 18px;}
#bigImg .carousel .nav-pills > li > a:hover, .nav-pills > li> a:focus  {font-size:18px;}
.theme{padding-right:0px;}
.htitle {font-size: 17px; letter-spacing: 0px;}
.days {font-size: 23px; padding: 2px 9px;}
.promo {font-size: 18px;letter-spacing: 1px; line-height: 28px;}
.ctitle{width:212px; font-size: 20px;padding: 3px 7px;}
.attraction{font-size:1em;line-height:1.2em;margin-top:50px;}
.tpromo {font-size: 1.05em; line-height: 30px; margin-top:10px; padding-left:0.5em; padding-right:0px;}
.tpromo img{width:105px;}
.bt{width:4em; font-size:1.3em; line-height:1.2em; margin-left:1.2em; margin-top:-4.2em;}
.list {width: 65%; font-size: 0.9em; line-height:1.5em;}
.blue{padding-left:0px;}
.period{font-size:0.7em;}
.iconW {top:75px;}
.iconW1 {top: 115px;}
.iconWT {font-size: 24px;line-height: 30px;}
.iconWTl {font-size: 24px;line-height: 30px;}
.area{width:95%; margin:30px 2.5%;}
.wbox {padding: 0px 5px;}
.wbox img{width:100px;}
.hint {font-size: 20px; margin-top: -40px;}
.hint1 {font-size: 20px; margin-top: -40px;}
.btxt {font-size: 20px;}
.gtxt {font-size: 16px;}
.lazypack a{ margin-right:0.9vw;}
.lazy{width:14vw; height:14vw;}
.lazy:hover{width:14.2vw; height:14.2vw;}
.ltitle {width: 40%; margin-left: 30%;}
.ltxt {width: 65%; font-size: 26px; line-height: 33px; margin-top: -80px; margin-left: 21%;}
.tbox {width: 39%; margin-top: -59%; margin-right:-1.5%;}
.dline1 {height: 5px; margin-bottom: 7px;}
.mustsee {font-size: 20px; letter-spacing: 0px; line-height: 30px; margin-right:-15px;}
.btide {font-size: 16px;}
.mtitle {font-size:1.1em;}
.mcontent {font-size: 14px; line-height:22px;}
.map-bl {margin-top: -6%;}
.map-br {width: 52.8%; margin-left: -19%; z-index: 10; position: relative;}
.tnote {font-size: 19px; letter-spacing: 1px;}
}

@media (min-width:577px) and (max-width:767px){
.bk{display:none;}
.wcontainer {width:96%; margin:0px 2%;}
.oval img {border-radius: 13vw;}
.sub1 img, .sub2 img, .sub3 img{width:auto;}
.video {margin-top: 5%;}
.noteicon {font-size: 20px; padding-right: 10px; text-align: right; margin-top: -40px;}
.infozone {margin-bottom: 10px;}
.infozone li {font-size: 15px; margin-left: -15px; padding: 2px 0px;}
.trip{width:30%; height:1720px; overflow: hidden; }
.trip img{max-width:unset; margin-left:-360px;}
#bigImg{width:99.9%; margin-left:2.2%;}
#bigImg .carousel .nav{width:100%; margin-left:-2.2%;}
#bigImg .carousel .nav-pills > li {font-size: 16px; width: 24.72%;}
#bigImg .carousel .nav-pills > li.active > a{font-size: 16px;}
#bigImg .carousel .nav-pills > li.active > a:hover{font-size: 16px;}
#bigImg .carousel .nav-pills > li.active > a:focus{font-size: 16px;}
#bigImg .carousel .nav-pills > li > a:hover, .nav-pills > li> a:focus  {font-size:16px;}
#bigImg .carousel .nav > li > a { padding: 8px 2px; }
.ctitle{width:230px; font-size: 22px;padding: 3px 7px;}
.promo{margin-top:15px; padding-bottom: 15px;}
.video {margin-top:5%;}
.attraction {width: 300px; font-size: 20px; margin-left: 150px; margin-top: -40px;} 
.tpromo {font-size: 1.05em; line-height: 30px; margin-top:10px; padding-left:0.5em; padding-right:0px;}
.tpromo img{width:120px;}
.bt{width:4em; font-size:1.5em; line-height:1.2em; margin-left:1.2em; margin-top:-4.2em;}
.period {width: 100px; font-size: 18px;}
.list{width: 300px; font-size:18px; margin-left: 150px;line-height: 35px;} 
.frame{ padding-top:10px; padding-bottom:0px;}
.BNzone{width:98%; margin-top:20px; margin-left:1%; text-align:center;}
.BN{width:37%; margin-bottom:10px; margin-left:-1.3%; margin-right:-3%;text-align:center;}
.box{margin-left:10px;}
.DPic{ margin-top:10px; width:35%; margin-left:1%; text-align:center; display:inline-block;}
.spots{width:100%;}
.banner-prod{width:105%; margin-left:-2.5%;}
.minibox {width: 96%; margin-left:2%;}
.iconW {top:10vw;}
.iconWT {font-size:1.35em;line-height:1.5em;}
.area{width:95%; margin:20px 2.5%;}
.wbox {padding: 0px 5px;}
.wbox img{width:90px;}
.hint {font-size: 20px; margin-top: -40px; margin-bottom: 10px;}
.hint1 {font-size: 20px; margin-top: -40px;}
.btxt {font-size: 20px; letter-spacing: 0px;}
.gtxt {font-size: 16px;}
.ytitle {font-size: 34px;}
.lazypack{width:100%; margin-left: 1%;}
.lazypack a{ margin-right:1.9vw;}
.lazypack a:last-child{ margin-right:1.9vw; float:inline-end;}
.lazy{width:28vw; height:28vw;}
.lazy:hover{width:14.2vw; height:14.2vw;}
.ltitle {width:60%; margin-left:20%;}
.ltxt {width: 50%; margin-top: -125px; margin-left: 25%;}   
.video1 {margin-top: 0%;}
.mustsee {width: 100%; margin-top:10px;display: inline-block;}
.btide{ margin-right:0px;}
.map-tl{width: 41.7%; vertical-align:top;  display: inline-block;}
.map-tr{width: 65%; margin-left:-8%; display: inline-block;}
.map-bl{width: 64.8%; vertical-align:bottom; margin-top:-10%; display: inline-block;}
.map-br{width: 52.8%; margin-left:-19%; display: inline-block;}
.tbox{width: 93%; margin-top:4%; margin-bottom:25px; padding:10px 15px;}
.video1{margin-right:-15px;}
.mtitle{max-width:400px;}
}

@media (min-width:480px) and (max-width:576px){
.top {padding-top: 10px; padding-left: 0px;}
.bk{display:none;}
.wcontainer {width:100%;}
.wcontainer .row{margin:0px;}
.sub2 {width: 97%;}
.sub1 img, .sub2 img, .sub3 img{width:auto;}
.oval img {border-radius: 13vw;}
.promotext {font-size: 24px; line-height: 30px;}
.promo{font-size:19px; margin-top:15px; margin-bottom: 15px;}
.video {margin-top:5%;}
#bigImg{width:100%; margin-left:0%;}
#mainC{width:100%; margin-left:0%;}
#bigImg .carousel .nav{display:none;}
.carousel-indicators{padding-right: 8%; bottom: -5px; display:inline-block !important;}
.carousel-indicators li {margin: 0px 5px; border:none;  box-shadow: 0px 0px 1px 1px rgb(0 0 0 /50%); background-color: #ffffff;}
.carousel-indicators li.active {width:10px; height:10px; margin: 0px 5px;}
.ctitle{width:212px; font-size: 20px;padding: 3px 7px;}
.attraction {width: 300px; font-size: 20px; margin-left: 150px; margin-top: -40px;} 
.tpromo {font-size: 1.05em; line-height: 30px; margin-top:10px; padding-left:0.5em; padding-right:0px;}
.tpromo img{width:120px;}
.bt{width:4em; font-size:1.5em; line-height:1.2em; margin-left:1.2em; margin-top:-4.2em;}
.period {width: 100px; font-size: 18px;}
.list{width: 300px; font-size:18px; margin-left: 150px;line-height: 35px;} 
.shade {left: 6px; right: 6px;}
.video1 {margin-top: 8%;}
.iconW {top: 35vw;}
.iconWT {font-size:2.5em;line-height:2.7em;}
.area{width:100%; margin:20px 0%;}
.wbox {width: 50%; padding: 0px 2px; margin-top:10px;}
.wbox img{width:90px;}
.hint {font-size: 16px; margin-top: -30px; margin-bottom: 5px; padding-left: 12px;}
.hint1 {font-size: 16px; margin-top: -30px; padding-right: 12px;}
.btxt {font-size: 20px; line-height: 25px; letter-spacing: 0px;}
.gtxt {font-size: 16px; letter-spacing: 0px;}
.line {margin-top: 10px;}
.lazypack{width:96%; margin-left:3%;}
.lazypack a{ margin-right:1.5vw;}
.lazypack a:last-child{ margin-right:1.5vw; float:inline-end;}
.lazy{width:29.8vw; height:29.8vw;}
.lazy:hover{width:30vw; height:30vw;}
.ltitle {width:60%; margin-left:20%;}
.ltxt {width:56%; font-size: 6.5vw; line-height:8vw; margin-top: -80%; margin-left: 23%;}
.btide{ margin-right:10px;}
.map-tl{width: 80%; margin-left:10%;}
.map-tr{width: 100%; margin-left:0%;}
.map-bl{width: 100%; margin-top:-6%; z-index:5;}
.map-br{width: 100%; margin-left:0%; margin-top: -22%; z-index:-1; position:relative;}
.tbox{width:98%; margin-top:4%; margin-left:2%; margin-right:0%; margin-bottom:25px; padding:10px 15px;}
.video1{margin-right:-15px;}
#nav-footer{margin:0px -15px;}
}

@media (min-width:431px) and (max-width:479px){
.top {padding-top: 10px; padding-left: 0px;}
.bk{display:none;}
.wcontainer {width:100%; margin:0%;}
.wcontainer .row{margin:0px;}
.sub1 img, .sub2 img, .sub3 img{width:auto;}
.oval{margin-top:15px;}
.oval img {border-radius: 13vw;}
.promotext {font-size: 22px; line-height: 30px;}
.promo{font-size:19px;margin-top:15px; margin-bottom: 15px;}
.video {margin-top:5%;}
#bigImg{width:100%; margin-left:0%;}
#mainC{width:100%; margin-left:-10px;}
#bigImg .carousel .nav{display:none;}
.carousel-indicators{padding-right: 8%; bottom: -5px; display:inline-block !important;}
.carousel-indicators li {margin: 0px 5px; border:none;  box-shadow: 0px 0px 1px 1px rgb(0 0 0 /50%); background-color: #ffffff;}
.carousel-indicators li.active {width:10px; height:10px; margin: 0px 5px;}
.ctitle{width:212px; font-size: 20px;padding: 3px 7px;}
.card {width:100%;}
.attraction {width: 300px; font-size: 20px; margin-left: 150px; margin-top: -45px;} 
.tpromo {font-size: 1.05em; line-height: 30px; margin-top:10px; padding-left:0.5em; padding-right:0px;}
.tpromo img{width:120px;}
.bt{width:4em; font-size:1.5em; line-height:1.2em; margin-left:1.2em; margin-top:-4.2em;}
.period {width: 100px; font-size: 18px;}
.list{width: 300px; font-size:18px; margin-left: 150px;line-height: 30px;} 
.video1 {margin-top:10%; margin-right:-15px;}
.iconW {top:28vw;}
.area{width:100%; margin:20px 0%;}
.wbox {width: 50%; padding: 0px 2px; margin-top:10px;}
.wbox img{width:80px;}
.hint {font-size: 18px; margin-top: -35px; margin-bottom: 7px; padding-left: 15px;}
.hint1 {font-size: 18px; margin-top: -35px; padding-right: 15px;}
.btxt {font-size: 18px; line-height: 22px; letter-spacing: 0px;}
.gtxt {font-size: 15px; letter-spacing: 0px;}
.lazypack{width:100%; margin-left:1%;}
.lazypack a{ margin-right:0.5vw;}
.lazypack a:last-child{ margin-right:1vw; float:inline-end;}
.lazy{width:32vw; height:32vw;}
.lazy:hover{width:32.2vw; height:32.2vw;}
.ltitle {width:66%; margin-left:17%;}
.ltxt {width:55%; font-size: 33px; line-height:40px; margin-top: -78%; margin-left: 25%;}
.mustsee {font-size: 22px; letter-spacing: 1px; line-height: 30px; margin-top:10px;}
.btide{font-size: 16px; margin-right:10px;}
.map-tl{width: 100%;}
.map-tr{width: 100%; margin-left:0%;}
.map-bl{width: 100%; margin-top:-6%; z-index:5;}
.map-br{width: 100%; margin-left:0%; margin-top: -22%;}
.tbox{width:98%; margin-top:4%; margin-left:2%; margin-right:0%; margin-bottom:25px; padding:10px 15px;}
}

@media screen and (max-width:430px){
.top {padding-top: 10px; padding-left: 0px;}
.bk{display:none;}
.wcontainer {width:100%; margin:0%;}
.wcontainer .row{margin:0px;}
.sub3 {width: 90%;}
.sub1 img, .sub2 img, .sub3 img{width:auto;}
.oval{margin-top:15px; padding-left:5px; padding-right:5px;}
.oval img {border-radius: 15vw;}
.promotext {font-size: 20px; line-height:27px;}
.pcontent {font-size: 17px;}
.htitle {font-size: 18px; letter-spacing: 0px;}
.days {font-size: 23px; padding: 2px 9px;}
.promo {font-size: 17px;letter-spacing: 1px; line-height: 28px; margin-top:10px; margin-bottom: 10px;}
.video {margin-top:2%;}
#bigImg{width:100%; margin-left:0%;}
#mainC{width:100%; margin-left:0.5%;}
#bigImg .carousel .nav{display:none;}
.carousel-indicators{padding-right: 8%; bottom: -5px; display:inline-block !important;}
.carousel-indicators li {margin: 0px 5px; border:none;  box-shadow: 0px 0px 1px 1px rgb(0 0 0 /50%); background-color: #ffffff;}
.carousel-indicators li.active {width:10px; height:10px; margin: 0px 5px;}
.ctitle{width:212px; font-size: 20px;padding: 3px 7px;}
.card {width:100%;}
.attraction {width: 240px; font-size: 20px; margin-left: 125px; margin-top: -45px;} 
.tpromo {font-size: 1.05em; line-height: 30px; margin-top:10px; padding-left:0px; padding-right:0px;}
.tpromo img{width:120px;}
.bt{width:4em; font-size:1.5em; line-height:1.2em; margin-left:1.2em; margin-top:-4.2em;}
.period {width: 100px; font-size: 18px;}
.list{width:240px; font-size:18px; margin-left: 125px;line-height: 30px;} 
.video1 {width: 111%; margin-top:10%; margin-left:-10px; margin-right:-10px;}
.iconWT {font-size:2em;line-height:2.3em;}
.area{width:100%; margin:20px 0%;}
.wbox {width: 50%; padding: 0px 2px; margin-top:10px;}
.wbox img{width:80px;}
.hint {font-size: 18px; margin-top: -35px; padding-left: 15px;}
.hint1 {font-size: 18px; margin-top: -35px; padding-right: 15px;}
.btxt {font-size: 18px; line-height: 22px; letter-spacing: 0px;}
.gtxt {font-size: 15px; letter-spacing: 0px;}
.ytitle {font-size: 32px;}
.lazypack{width:98%;margin-left:1%;}
.lazypack a{ margin-right:0.5vw;}
.lazypack a:last-child{ margin-right:1vw; float:inline-end;}
.lazy{width:31vw; height:31vw;}
.lazy:hover{width:31.2vw; height:31.2vw;}
.ltitle {width:70%; font-size: 28px; margin-left:15%;}
.ltxt {width: 65%; font-size: 7.5vw; line-height:35px; margin-top: -82%; margin-left: 22%;}
.mustsee {font-size: 22px; letter-spacing: 1px; line-height: 30px; margin-top:10px;}
.btide{font-size: 16px; margin-right:10px;}
.map{padding:0px;}
.map-tl{width: 100%;}
.map-tr{width: 100%; margin-left:0%;}
.map-bl{width: 100%; margin-top:-6%; z-index:5;}
.map-br{width: 100%; margin-left:3%; margin-top: -22%;}
.mtitle {font-size:1.3em;}
.tbox{width:98%; margin-top:4%; margin-left:2%; margin-right:0%;margin-bottom:25px; padding:10px 15px;}
}

@media screen and (max-width:320px){
.attraction {width: 200px;font-size:18px; margin-left: 100px; } 
.list{width:200px; font-size:17px; letter-spacing: 0px; margin-left: 100px;line-height:28px;} 
.tpromo img{width:110px;}
.bt{ margin-left:1em; margin-top:-4em;}
.period {width: 100px; font-size: 18px;}
.video1 {width: 114%; margin-top:14%;}
.mustsee {font-size: 20px; letter-spacing:1px; line-height:25px; padding:0px; margin-top:10px; margin-right:-15px;}
.btide{font-size: 16px; margin:10px 0px;}
.mtitle {font-size: 1.2em; margin-left: -12px; margin-right: -12px;}
}