.indextop {}
.KV {position: relative; z-index: 0; background: url(../images/00_index/KV.jpg) no-repeat center center; padding: 0; height: 370px; background-size: cover;} 
#introBoxWrap {position: relative; padding: 40px 20px; font-size: 0; color: #581e6e;}
/* #introBoxWrap:before, #introBoxWrap:after {content: ''; display: block; position: absolute; z-index: 1; left: 0; width: 100%; height: 20px; background: url(../images/00_index/intro_wave.png) repeat-x center bottom;} */
/* #introBoxWrap:before {top: -15px; transform: rotate(180deg);} */
/* #introBoxWrap:after {bottom: -15px;} */
#introBoxWrap .containerL {max-width: 1050px;}
#introBoxWrap h3 {margin-bottom: 15px; font-size: 1.9rem;}
#introBoxWrap p {line-height: 1.8; color: #581e6e; max-width: 600px; font-weight: 600;}
#introBoxWrap p.period {border-radius: 30px; letter-spacing: 1px; font-weight: 600; line-height: 3; font-size: 18px; margin-top: 20px; color: #581e6e; border: 2px solid; display: inline-block; padding: 0 2rem;}
#introBoxWrap .intromenu {display: inline-block; vertical-align: top; width: 48%; margin: 0 1%; position: relative; text-align: center; padding: 43px 0;}
#introBoxWrap .intromenu.anc1 {background: url(../images/00_index/intro_offer_1.png) no-repeat center center;background-size: contain;}
#introBoxWrap .intromenu.anc2 {background: url(../images/00_index/intro_offer_2.png) no-repeat center center; background-size: contain;}
/* #introBoxWrap .intromenu:before {content: ''; display: block; position: absolute; left: 0; width: 100%; height: 80px; bottom: 100%;}
#introBoxWrap .intromenu.anc1:before {background: url(../images/00_index/frame-top.png) no-repeat center bottom; background-size: 100.5% 100%;}
#introBoxWrap .intromenu.anc2:before {background: url(../images/00_index/frame2-top.png) no-repeat center bottom; background-size: 100.5% 100%;} */
#introBoxWrap .intromenu span.tt {font-size: 1.5rem; color: #fff; font-weight: 600; text-shadow: 3px 3px 5px rgba(0, 0, 0, .35); letter-spacing: 1px; line-height: 1.3;}
#introBoxWrap .intromenu span.tt .big {font-size: 1.6em; margin-left: 5px;}
#introBoxWrap .intromenu span.btn {color: #fff; border-radius: 30px; border: 1px solid; padding: 0; line-height: 1.8; margin: 5px auto 0; max-width: 100px; display: block; letter-spacing: 2px; font-size: 1rem;  -moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}


@media only screen and (min-width: 769px) {
  #bodyWrap {min-width: 1280px;}
  #introBoxWrap .intromenu:hover span.btn {background-color: #990e0e;}
  .section .poiBlock:hover {transform: scale(1.02);}
}

@media only screen and (min-width: 1500px) {
  .KV {background: url(../images/00_index/KV.jpg) no-repeat center center; background-size: cover; height: auto; padding-bottom: 27%;}
}

@media (max-width: 768px) {
  .KV {background: url(../images/00_index/KV-m.jpg) no-repeat center center; background-size: cover; height: auto; padding-bottom: 68%;}
  #introBoxWrap:before, #introBoxWrap:after {background-size: 400%; height: 6px;}
  #introBoxWrap:before {top: -5px;}
  #introBoxWrap:after {bottom: -5px;}
  #introBoxWrap .intromenu {margin: 0 1.5%; width: 47%; padding-top: 11%; padding-bottom: 10%;}
  #introBoxWrap .intromenu:before {height: auto; padding-bottom: 40%; background-size: contain!important; bottom: 99%;}
  #introBoxWrap .intromenu span.tt {font-size: 1.3rem;}
  #introBoxWrap .intromenu span.btn {font-size: .8rem; line-height: 1.9; margin-top: 5px; max-width: 70px; border-radius: 15px;}
}

@media (max-width: 640px) {
  html, body {font-size: 13px;}
  #headerNew {position: fixed; top: -1px; left: 0; width: 100%; z-index: 100;}
  #bodyContent {padding-top: 55px;}
  #introBoxWrap {padding: 30px 10px; text-align: center;}
  #introBoxWrap h3 {margin-top: 20px;font-size: 1.7rem; margin-left: 0;}
  #introBoxWrap p {font-size: 15px;}
  #introBoxWrap p.period {font-size: 18px; letter-spacing: 0;}
}

@media (max-width: 330px) {
  #introBoxWrap .intromenu span.tt {font-size: 1.15rem;}
}

.row .row {margin: 0}

.item {display: block; background-color: #fff; border-radius: 10px; height: 100%; overflow: hidden; width: 96%; margin: auto; position: relative;}
.item .img {position: relative; height: 140px;}
.item .img .badge {position: absolute; top: 10px; left: 15px;}
.item .img .badge .offerTxt {font-size: 1.2rem; color: #fff; font-weight: 600; line-height: 1.8; border-radius: 3px; padding: 0 10px; background-color: #008043; min-width: 50px; text-align: center;}
.item .txt {padding: 0.5em 1em 1em;}
.item .txt p {color: #32004A;}
.item .txt .tt {font-weight: 600; line-height: 1.4;}
.item .txt .poiName {font-weight: 600; font-size: 1.2rem;margin-top: 0.2rem;letter-spacing: 0;}
.item .txt .desc {font-size: 14px; margin-top: 5px; line-height: 1.3;letter-spacing: 1px;}
.item .txt small {color: #777;}
.item .linkWrap {display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0;}

#special-section {padding: 50px 20px 30px; position: relative; background: rgb(44,0,71); background: linear-gradient(0deg, #3A0355 0%, #592e80 40%, #f1caca 100%);}
#special-section:after {content: ''; display: block; width: 100%; background: url(../images/00_index/wave-1.png) center bottom; height: 50px; position: absolute; left: 0; top: 99%; z-index: 1;}
#special-section .inner {position: relative; padding: 0 20px 20px;max-width: 80rem; }
#special-section .ttImg {margin-bottom: 40px; max-width: 540px;}
#special-section .item {padding: 0; border-radius: 0;}
#special-section .item .img {height: 180px;}
#special-section .item .tt {color: #58186E;}
#special-section .item .txt {padding: 1em;}
#special-section .btn {display: block; margin: 40px auto 0; background-color: #CE92C1; max-width: 280px; text-align: center; padding: 0 10px; border-radius: 50px; line-height: 3.2; letter-spacing: 2px; color: #fff; font-weight: 600;font-size: 20px; box-shadow: 1.6px 2.5px 3px 0 rgba(155, 25, 26, 0.26); border: solid 2px #EDBA84;}
#special-section .btn:before {content: ''; display: inline-block; vertical-align: middle; width: 55px; height: 40px; background: url(../images/00_index/bn_icon.png) no-repeat center center; background-size: contain; }

@media (min-width: 769px) {
  /* #special-section .inner .deco {position: absolute; z-index: 3; width: 280px; height: 130px; top: -10px; left: 0; right: 0; margin: auto;}
  #special-section span.deco1 {background: url(../images/00_index/deco-2.png) no-repeat center center; background-size: contain; transform: translateX(-350px); }
  #special-section span.deco2 {background: url(../images/00_index/deco-1.png) no-repeat center center; background-size: contain; transform: translateX(350px); } */
  #special-section .item .tt {text-align: center;}
}
@media (max-width: 768px) {
  #special .swiper-wrapper {display: block;}
}
@media (max-width: 640px) {
  .item {font-size: 0;height: 100%; min-height: 115px; border-radius: 5px; margin-bottom: 10px; width: 100%;}
  .item .img, .item .txt {display: inline-block; vertical-align: top; height: 100%!important;}
  .item .img {width: 37.5%; }
  .item .txt {width: 62%; font-size: 1rem; padding: 10px 5px 0.5rem 15px; position: relative;}
  .item .txt small {margin-bottom: 5px; display: block; font-size: 13px;}
  .item .txt .poiName {font-size: 1.4rem;height: auto;overflow:auto;}
  /*.item .txt .poiName.line-clamp-1 {-webkit-line-clamp: 2;height: calc(1em * 1.2 * 2);}*/
  .item .txt .badge .offerTxt { color: #fff; display: inline-block;font-weight: 600;line-height: 1.8;border-radius: 3px;padding: 0 10px;background-color: #008043;min-width: 30px;text-align: center; margin-top: 10px;}
  .item .txt .badge .offerTxt small {display: inline-block; color: #fff; font-size: .8em;}
  #voucher .item .txt .oDetailTitle {line-height: 1.3;}
  #special-section {padding: 30px 10px 20px; }
  #special-section:after {background-size: 1000px auto; height: 40px; background-position: left bottom;}
  #special-section .ttImg {margin-bottom: 20px; max-width: 360px; width: 100%;}
  #special-section .item {height: 100px; padding: 0;}
  #special-section .item .txt p {font-size:1.3em;position: absolute; left: 0; right: 0; width: 100%; top: 0; bottom: 0; margin: auto; -webkit-line-clamp: 2; height: calc(1em * 1.4 * 2); display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; padding: 0 15px;}
  #special-section .btn {margin-top: 20px; font-size: 17px;}
  
}

#hottest { padding: 70px 20px 40px; position: relative; background: rgb(44,0,71); background: linear-gradient(180deg, #d5c2db 0%, #eedae4 30%, #b2a2ca 75%, #89669F 100%);}
#hottest .ttImg {margin-bottom: 30px; max-width: 540px;}
#hottest .inner {position: relative; padding: 0 20px 20px; max-width: 80rem; margin: auto;}
#hottest .inner .deco {position: absolute; z-index: 3; width: 180px; height: 265px; }

@media (min-width: 769px) {
  /* #hottest .deco {position: absolute; z-index: 3; width: 270px; height: 280px; left: 0; right: 0; margin: auto;}
  #hottest span.deco1 {background: url(../images/00_index/index_deco1.png) no-repeat center center; background-size: contain; transform: translateX(-460px); top: -105px;}
  #hottest span.deco2 {background: url(../images/00_index/index_deco2.png) no-repeat center center; background-size: contain; transform: translateX(460px); top: -98px;} */
}

@media (max-width: 640px) {
  #hottest {padding: 40px 0 10px;}
  #hottest:before {background-size: 1100px!important; height: 25px; background-position: left bottom;}
  #hottest .ttImg {max-width: 360px; margin-bottom: 10px; width: 100%;}
 
}

.section {padding: 10px 0px 0;}
.section .secTTbox {position: relative; background: url(../images/00_index/frame-middle.png) center; background-size: contain; margin-top: 13%; width: 85%; color: #fff; padding: 0 10px; text-align: center; }
.section .secTTbox:before, .section .secTTbox:after {content: ''; display: block; position: absolute; left: 0; width: 100%;}
.section .secTTbox:before {padding-bottom: 27%; bottom: 99%; background: url(../images/00_index/frame-top.png) no-repeat center bottom; background-size: contain;}
.section .secTTbox:after {padding-bottom: 27%; top: 99%; background: url(../images/00_index/frame-bottom.png) no-repeat center top; background-size: contain;}
.section .secTTbox > .columns {padding: 0;}
.section .secTTbox .secTT {letter-spacing: 1px; margin-bottom: 10px; text-shadow: 3px 3px 5px rgba(0, 0, 0, .35); font-size: 1.3rem;}
.section .secTTbox .secOffer {font-size: 1.7rem; letter-spacing: 1px; line-height: 1;margin: 0.3em auto;}
.section .secTTbox .secOffer .big {font-size: 2.4rem;}
.section .secTTbox .secOffer small {font-size: 1.4rem;}
.section .secTTbox .secOffer2 {font-size: 1.6rem; letter-spacing: 1px; line-height: 1; text-shadow: 3px 3px 5px rgba(0, 0, 0, .35);}
.section .secTTbox .btn {color: #fff; border-radius: 30px; border: 1px solid; padding: 0; line-height: 2; margin: 25px auto 0; max-width: 120px; display: block; letter-spacing: 2px; -moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
.section .ttImg {max-width: 400px;}
.section .list {}
#voucher .item .txt .poiName {color: #777; font-size: 14px; font-weight: 400; line-height: 1.5; margin-bottom: 5px;overflow: auto;height: auto;}
#voucher .item .txt .oDetailTitle {font-weight: 600;font-size: 1.1rem;letter-spacing: 1px;margin-top: 0.5rem;}
.section .btn {border: none; line-height: 2.5; margin-top: 30px;}

@media print, screen and (min-width: 48.125em) {
  .section .inner > .row > .medium-3 {-ms-flex: 0 0 20%;-webkit-flex: 0 0 20%;flex: 0 0 20%;max-width: 20%;}
  .section .inner > .row > .medium-9 {-ms-flex: 0 0 80%;-webkit-flex: 0 0 80%;flex: 0 0 80%;max-width: 80%;}
  .section .secTTbox {height: calc(100% - 25%);}
  .section .secTTbox .btn:hover {background-color: #990e0e;}
}


@media (max-width: 640px) {
  .section {padding: 30px 0px 40px; }
  .section:last-child {margin-bottom: 0;}
  .section .ttImg {max-width: 260px;}
  .section .btn {line-height: 3; max-width: 240px;}
  .section .secTTbox { width: 100%; margin: 20px auto 60px; padding: 5px 10px 0px; background: url(../images/00_index/frame-m-middle.png) center; background-size: contain;}
  .section .secTTbox:before {background: url(../images/00_index/frame-m-top.png) no-repeat center bottom; background-size: contain; padding-bottom: 15%; bottom: 98%;}
  .section .secTTbox:after {background: url(../images/00_index/frame-m-bottom.png) no-repeat center top; background-size: contain; padding-bottom: 9%; top: 98%;}
  .section .secTTbox .secTT {margin-bottom: 3px; font-size: 1.7rem;}
  .section .secTTbox .secOffer {font-size: 2.7rem;}
  .section .btn {display: block;margin: 15px auto 0; border: solid 2px #EAB782;background: #F2D0E0; max-width: 230px;text-align: center;border-radius: 30px;line-height: 3;letter-spacing: 2px;color: #6C2558;font-weight: 600;font-size: 18px; box-shadow: 1.6px 2.5px 3px 0 rgba(155, 25, 26, 0.26);}
  .section .btn:before {content: ''; display: inline-block; vertical-align: bottom; width: 35px; height: 52px; background: url(../images/00_index/bn_icon.png) no-repeat center center; background-size: contain; }
  .section .poiBlock {padding-bottom: 0.5rem;}
}

.float-effect {
  display: inline-block;
  transition-duration: 0.3s;
  transition-property: transform;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.float-effect:hover {
  transform: translateY(-5px);
}

#orpay .item .img .bookBtnAm {background-color: #ffc600; color: #3f363b; padding: 0 6px; border-radius: 3px; font-weight: 600; display: inline-table; vertical-align: middle; text-align: center; font-size: 1rem; line-height: 2; padding: 0 8px; letter-spacing: -1px; margin-right: 3px;}
#orpay .item .img .bookBtnAm .asiaMile-icon {width: 11px;height: 14px; background: url(../images/asiamile-icon-black.png) no-repeat center center;background-size: 100% auto; margin: -4px 0 0 3px;display: inline-block;vertical-align: middle;}


#editors-section {padding: 80px 20px 50px; position: relative; background: #c69660; background: linear-gradient(0deg, #c69660 0%, #f8e4be 40%, #fcf8f7 100%);}
#editors-section:before {content: ''; display: block; width: 100%; height: 60px; background: url(../images/00_index/wave-2.png) no-repeat center top; position: absolute; left: 0; top: -1px;}
#editors-section .ttImg {margin-bottom: 30px; max-width: 540px;}
#editors-section .inner {position: relative; padding: 0 20px 20px; max-width: 70rem; margin: auto;}
#editors-section .img {border-radius: 15px; overflow: hidden; height: 100%;}
#editors-section .txt {background-color: #fff; padding: 15px 20px; border-radius: 15px;}
#editors-section .txt p {height: calc(1em * 1.5 * 4); line-height: 1.5; font-size: 1.1em;}
#editors-section .txt .btn {line-height: 2.4; font-size: 17px; float: right; padding: 0 20px; margin-top: 10px;background: #B2449A; box-shadow: 1.6px 2.5px 3px 0 rgba(155, 25, 26, 0.26); border: solid 2px #e19c4e; color: #fff;}
#editors-section .btn {display: block; margin: 30px auto 0; background-color: #fff; max-width: 250px; text-align: center; border-radius: 30px; line-height: 2.8; letter-spacing: 2px; color: #c00924; font-weight: 600;font-size: 20px; border: 3px solid #e19c4e;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}

@media (min-width: 769px) {
  #editors-section .deco {position: absolute; z-index: 3; width: 270px; height: 280px; top: -100px; left: 0; right: 0; margin: auto;}
  #editors-section span.deco1 {background: url(../images/00_index/index_deco3.png) no-repeat center center; background-size: contain; transform: translateX(-470px); }
  #editors-section span.deco2 {background: url(../images/00_index/index_deco4.png) no-repeat center center; background-size: contain; transform: translateX(470px); }
  #editors-section .btn:hover {background-color: #ffc4cd;}
}

@media (max-width: 640px) {
  #editors-section {padding: 40px 10px 40px;}
  #editors-section:before {background-size: 1000px auto; height: 30px; background-position: left bottom;}
  #editors-section .ttImg {max-width: 360px; margin-bottom: 20px; width: 100%;}
  #editors-section .swiper-wrapper {display: block;}
  #editors-section .swiper-wrapper .swiper-slide {margin-bottom: 10px;}
  #editors-section .img, #editors-section .txt {border-radius: 0;}
  #editors-section .txt .btn {font-size: 14px;}
  #editors-section > .btn {margin-top: 0px; font-size: 17px;}
} 