@charset "utf-8";
.cls-1 { fill: #c2a281; }

.cls-2 { fill: #fff; }

.cls-3 { fill: #fcee21; }

.cls-4 { fill: #fbb03b; }

.cls-5 { fill: #ff1e1e; }

.cls-6 { fill: #eee; }

.cls-7 { fill: #598973; }

.cls-18, .cls-8, .cls-9 { fill: none; stroke-linecap: round; stroke-miterlimit: 10; }

.cls-8, .cls-9 { stroke: #9ba994; }

.cls-9 { stroke-width: 0.5px; }

.cls-10 { fill: #91a984; }

.cls-11 { fill: #ef0a0a; }

.cls-12 { fill: #c76569; }

.cls-13 { fill: #c8ffff; }

.cls-14 { fill: #9ba994; }

.cls-15 { fill: #5d7f6c; }

.cls-16 { fill: #297729; }

.cls-17 { fill: #1b5e1b; }

.cls-18 { stroke: #1b5e1b; }

.cls-19 { fill: #cc6150; }

.cls-20 { fill: #f7c9b7; }

.cls-21 { fill: #f5c997; }

.cls-22 { fill: #9d7d77; }

.cls-23 { fill: #f99512; }

.cls-24 { fill: #e0c710; }

.cls-25 { fill: #d8be03; }

.cls-26 { fill: #bca100; }

.cls-27 { fill: #ffed43; }

.cls-28 { fill: #ead515; }

.cls-29 { fill: #d0551e; }

.cls-30 { fill: #898e5a; }

.cls-31 { fill: #e5d1a8; }

.cls-32 { fill: #a62c15; }

.cls-33 { fill: #f2c294; }

* { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; font-family: "Segoe UI", Arial, Helvetica, "Microsoft JhengHei Correct", 'Microsoft JhengHei', PMingLiU, sans-serif; }

body { font-size: 16px; color: #333333; line-height: 1.5; }

.fixed body { margin-top: 105px; }

#fixed_bar .logoicon { width: 188px !important; height: 59px !important; margin-top: 0 !important; margin-bottom: 5px !important; }

.anchor_hide { display: block; height: 105px; margin-top: -105px; z-index: -1; visibility: hidden; }

h1 { display: inline-block; }

h2 { font-size: 24px; font-weight: normal; margin-bottom: 10px; }

h3 { font-size: 1.2em; vertical-align: middle; }

h3 .grid_address { background-image: url(../images/mapicon.svg); background-repeat: no-repeat; background-size: 22px 22px; text-indent: 20px; font-weight: normal; font-size: 15px; color: #333333; display: block; }

h3, h3 a { color: #235E6F; }

h4 { color: #CC231E; font-size: 1.1em; }

a { text-decoration: none; }

input { -webkit-appearance: none; border-radius: 0; }

em { font-style: normal; }

img { max-width: 100%; }

.intro { text-align: center; padding: 40px 0; line-height: 35px; }

.art-text { margin-bottom: 10px; display: block; }

.container { max-width: 1100px; width: 100%; margin: 0 auto; }

.mobile_button { display: none; }

article { padding: 3em 0em; min-height: 50vh; }

.swiper-arrow { position: relative; z-index: 0; }

.swiper-arrow .swiper-button-next { right: -50px; }

.swiper-arrow .swiper-button-prev { left: -50px; }

.swiper-container { padding: 0px !important; background: transparent !important; }

.swiper-pagination { position: static !important; }

.swiper-button-prev, .swiper-button-next { width: 50px; height: 50px; opacity: 0.7; }

.swiper-button-next { right: 0; background-image: url(../images/arrow-next.svg) !important; }

.swiper-button-prev { left: 0; background-image: url(../images/arrow-prev.svg) !important; }

.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled { opacity: 0; }

.banner { background-color: #0E2431; height: 500px; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 9; }

.banner .swiper-wrapper { position: absolute; overflow: hidden; top: 0; left: 0; }

.banner > .container { z-index: 2; position: relative; text-align: center; }

.banner .swiper-slide { position: relative; }

.banner .swiper-slide > * { opacity: 0; -webkit-transition: 0.4s all; transition: 0.4s all; }

.banner .back-banner [class^='snow'] { background-color: white; width: 10px; height: 10px; border-radius: 50%; -webkit-animation: falling 2s infinite; animation: falling 2s infinite; }

.banner .back-banner .snow1 { -webkit-animation-delay: -0.1s; animation-delay: -0.1s; position: absolute; left: 36.85346%; top: 14.57591%; }

.banner .back-banner .snow2 { -webkit-animation-delay: -0.2s; animation-delay: -0.2s; position: absolute; left: 19.4963%; top: -14.70936%; }

.banner .back-banner .snow3 { -webkit-animation-delay: -0.3s; animation-delay: -0.3s; position: absolute; left: 35.82166%; top: -27.26814%; }

.banner .back-banner .snow4 { -webkit-animation-delay: -0.4s; animation-delay: -0.4s; position: absolute; left: 62.69329%; top: -15.51525%; }

.banner .back-banner .snow5 { -webkit-animation-delay: -0.5s; animation-delay: -0.5s; position: absolute; left: 96.13926%; top: -16.29858%; }

.banner .back-banner .snow6 { -webkit-animation-delay: -0.6s; animation-delay: -0.6s; position: absolute; left: 44.7818%; top: -4.09046%; }

.banner .back-banner .snow7 { -webkit-animation-delay: -0.7s; animation-delay: -0.7s; position: absolute; left: 4.11636%; top: 33.37556%; }

.banner .back-banner .snow8 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; position: absolute; left: 71.52833%; top: 36.80835%; }

.banner .back-banner .snow9 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; position: absolute; left: 52.19016%; top: -7.31601%; }

.banner .back-banner .snow10 { -webkit-animation-delay: -1s; animation-delay: -1s; position: absolute; left: 25.17259%; top: 1.92901%; }

.banner .back-banner .snow11 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; position: absolute; left: 29.56699%; top: -10.02047%; }

.banner .back-banner .snow12 { -webkit-animation-delay: -1.2s; animation-delay: -1.2s; position: absolute; left: 15.85926%; top: 20.32575%; }

.banner .back-banner .snow13 { -webkit-animation-delay: -1.3s; animation-delay: -1.3s; position: absolute; left: 50.78387%; top: -3.68794%; }

.banner .back-banner .snow14 { -webkit-animation-delay: -1.4s; animation-delay: -1.4s; position: absolute; left: 90.21098%; top: 46.9938%; }

.banner .back-banner .snow15 { -webkit-animation-delay: -1.5s; animation-delay: -1.5s; position: absolute; left: 53.03237%; top: 34.19611%; }

.banner .back-banner .snow16 { -webkit-animation-delay: -1.6s; animation-delay: -1.6s; position: absolute; left: 21.43516%; top: -19.98215%; }

.banner .back-banner .snow17 { -webkit-animation-delay: -1.7s; animation-delay: -1.7s; position: absolute; left: 46.93931%; top: 32.78898%; }

.banner .back-banner .snow18 { -webkit-animation-delay: -1.8s; animation-delay: -1.8s; position: absolute; left: 40.93287%; top: 25.37872%; }

.banner .back-banner .snow19 { -webkit-animation-delay: -1.9s; animation-delay: -1.9s; position: absolute; left: 19.55346%; top: 30.46567%; }

.banner .back-banner .snow20 { -webkit-animation-delay: -2s; animation-delay: -2s; position: absolute; left: 30.00422%; top: 17.10806%; }

.banner .back-banner .snow21 { -webkit-animation-delay: -2.1s; animation-delay: -2.1s; position: absolute; left: 22.06993%; top: 36.42338%; }

.banner .back-banner .snow22 { -webkit-animation-delay: -2.2s; animation-delay: -2.2s; position: absolute; left: 10.56223%; top: 48.32892%; }

.banner .back-banner .snow23 { -webkit-animation-delay: -2.3s; animation-delay: -2.3s; position: absolute; left: 33.48519%; top: 21.99101%; }

.banner .back-banner .snow24 { -webkit-animation-delay: -2.4s; animation-delay: -2.4s; position: absolute; left: 57.95667%; top: -21.93766%; }

.banner .back-banner .snow25 { -webkit-animation-delay: -2.5s; animation-delay: -2.5s; position: absolute; left: 71.78403%; top: 46.53941%; }

.banner .back-banner [class^='firework'] { position: absolute; width: 100px; height: 100px; }

.banner .back-banner .firework1 { left: 99.78868%; top: 5.18328%; }

.banner .back-banner .firework1 [class^='firepoint'] { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; background-color: #FF6764; }

.banner .back-banner .firework2 { left: 6.04716%; top: 75.41746%; }

.banner .back-banner .firework2 [class^='firepoint'] { -webkit-animation-delay: 1s; animation-delay: 1s; background-color: #8BC34A; }

.banner .back-banner .firework3 { left: 59.0904%; top: 17.21397%; }

.banner .back-banner .firework3 [class^='firepoint'] { -webkit-animation-delay: 1.5s; animation-delay: 1.5s; background-color: #A1D9FF; }

.banner .back-banner .firework4 { left: 96.20189%; top: 61.95748%; }

.banner .back-banner .firework4 [class^='firepoint'] { -webkit-animation-delay: 2s; animation-delay: 2s; background-color: #FFEF00; }

.banner .back-banner .firework5 { left: 52.64011%; top: 5.93299%; }

.banner .back-banner .firework5 [class^='firepoint'] { -webkit-animation-delay: 2.5s; animation-delay: 2.5s; background-color: #934693; }

.banner .back-banner [class^='firepoint'] { width: 8px; height: 8px; border-radius: 50%; position: absolute; background-color: white; -webkit-animation-duration: 5s; animation-duration: 5s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; }

.banner .back-banner .firepoint1 { -webkit-animation-name: explode1; animation-name: explode1; }

.banner .back-banner .firepoint2 { -webkit-animation-name: explode2; animation-name: explode2; }

.banner .back-banner .firepoint3 { -webkit-animation-name: explode3; animation-name: explode3; }

.banner .back-banner .firepoint4 { -webkit-animation-name: explode4; animation-name: explode4; }

.banner .back-banner .firepoint5 { -webkit-animation-name: explode5; animation-name: explode5; }

.banner .back-banner .firepoint6 { -webkit-animation-name: explode6; animation-name: explode6; }

.banner .back-banner .firepoint7 { -webkit-animation-name: explode7; animation-name: explode7; }

.banner .back-banner .firepoint8 { -webkit-animation-name: explode8; animation-name: explode8; }

.banner .back-banner .firepoint9 { -webkit-animation-name: explode9; animation-name: explode9; }

.banner .back-banner .firepoint10 { -webkit-animation-name: explode10; animation-name: explode10; }

.banner .back-banner .firepoint11 { -webkit-animation-name: explode11; animation-name: explode11; }

.banner .back-banner .firepoint12 { -webkit-animation-name: explode12; animation-name: explode12; }

.banner .back-banner .firepoint13 { -webkit-animation-name: explode13; animation-name: explode13; }

.banner .back-banner .firepoint14 { -webkit-animation-name: explode14; animation-name: explode14; }

.banner .back-banner .firepoint15 { -webkit-animation-name: explode15; animation-name: explode15; }

.banner .back-banner .firepoint16 { -webkit-animation-name: explode16; animation-name: explode16; }

.banner .back-banner .firepoint17 { -webkit-animation-name: explode17; animation-name: explode17; }

.banner .back-banner .firepoint18 { -webkit-animation-name: explode18; animation-name: explode18; }

.banner .back-banner .firepoint19 { -webkit-animation-name: explode19; animation-name: explode19; }

.banner .back-banner .firepoint20 { -webkit-animation-name: explode20; animation-name: explode20; }

.banner .back-banner .firepoint21 { -webkit-animation-name: explode21; animation-name: explode21; }

.banner .back-banner .firepoint22 { -webkit-animation-name: explode22; animation-name: explode22; }

.banner .back-banner .firepoint23 { -webkit-animation-name: explode23; animation-name: explode23; }

.banner .back-banner .firepoint24 { -webkit-animation-name: explode24; animation-name: explode24; }

.banner svg { position: relative; z-index: 1; }

.banner svg .show1, .banner svg .show2 { opacity: 0; -webkit-transition: 1s all; transition: 1s all; }

.banner svg .show1 { -webkit-transition-delay: 0.5s; transition-delay: 0.5s; }

.banner .swiper-slide-active .show1, .banner .swiper-slide-active .show2 { opacity: 1; }

.banner .swiper-slide-active > * { opacity: 1; }

.banner .title { max-width: 620px; width: 100%; margin-bottom: 20px; }

.banner .title [class^='flashing'] { fill: white; -webkit-animation: flashing 1s infinite alternate linear; animation: flashing 1s infinite alternate linear; }

.banner .title .flashing1 { -webkit-animation-delay: .4s; animation-delay: .4s; }

.banner .title .flashing2 { -webkit-animation-delay: .8s; animation-delay: .8s; }

nav a { font-size: 1.2em; color: #333333; display: block; text-align: center; padding: 15px 0 10px; border-bottom: 5px solid white; }

.grid_list { position: relative; }
.activit-box .grid_list.swiper-slide{width:180px;}

.grid_list .grid_link { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 3; }

.grid_list .grid_pic { position: relative; }

.grid_list .grid_pic a { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 3; }

.grid_list .img_bg { padding-bottom: 75%; background-repeat: no-repeat; background-position: center; background-size: cover; }

.grid_list .img_bg img { display: none; }

.grid_list .grid_txt { padding-top: 5px; }

.grid_list .grid_name, .grid_list .grid_address { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; display: block; }

.grid_list .grid_Prj { height: 50px; overflow: hidden; margin-top: 5px; }

.grid_list .grid_Prj a { color: #333333; }

.grid_list .grid_rate { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; }

.grid_list .grid_booking { padding: 3px 25px; color: white; background-color: #34A65F; }

.grid_list .grid_prices { color: #CC231E; margin-right: 10px; }

.grid_beroom { font-size: 16px; position: absolute; top: 5px; left: 0; padding: 5px 10px; color: white; background-color: #CC231E; }

.grid_address { background-image: url(../images/mapicon.svg); background-repeat: no-repeat; background-size: 22px 22px; text-indent: 20px; font-weight: normal; font-size: 15px; color: #333333; margin-top: 5px; }

.area-info { width: 30%; text-align: center; }

.area-info h2 { background-color: #F5624D; color: white; display: inline-block; padding: 0 10px; position: relative; margin-bottom: 30px; }

.area-info h2::before, .area-info h2::after { content: ''; display: block; width: 66px; height:30px; position: absolute; bottom: -15px; background-size: contain; z-index: -1; }

.area-info h2::before { background-image: url(../images/ribbon-left.svg); left: -35px; }

.area-info h2::after { background-image: url(../images/ribbon-right.svg); right: -35px; }

.area-info img { max-width: 300px; }

.search_bar { padding: .5em; margin: 0 auto; }

.search_bar .btns { background-color: #ff9900; color: white !important; }

.attractions .container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }

.attractions .swiper-arrow { width: 70%; margin-right: 50px; }

.attractions figure a { position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; z-index: 1; }

.attractions figure span { position: absolute; left: 5px; background-color: white; border: 1px solid #333333; bottom: 5px; padding: 0 5px; border-radius: 15px; background-image: url(../images/mapicon.svg); background-repeat: no-repeat; background-size: 22px 22px; text-indent: 15px; }

.attractions .hidden { padding-bottom: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; border: 3px solid #0F8A5F; border-radius: 15px; }

.attractions .hidden img { display: none; }

.attractions figcaption { text-align: center; font-size: 1.2em; padding-top: 10px; }

.hotels .container { display: -webkit-box; display: -ms-flexbox; display: flex; }

.hotels .swiper-arrow { width: 70%; margin-left: 50px; }

.recommend .recommend-tab { overflow-x: auto; display: -webkit-box; display: -ms-flexbox; display: flex; }

.recommend .recommend-tab li { background-color: #34A65F; color: white; min-width: 130px; width: 100%; text-align: center; padding: 15px 0; -webkit-transition: 0.4s all; transition: 0.4s all; cursor: pointer; }

.recommend .recommend-tab .active { background-color: #0F8A5F; }

.recommend .recommend-area { -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }

.recommend .recommend-box { padding: 20px 10px; }

.recommend .area-info { width: 100%; }

.recommend .grid_rate { margin-top: 10px; }

.activity .tab-wrap { max-width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; position: relative; list-style: none; background-color: white; overflow: hidden; -ms-flex-pack: distribute; justify-content: space-around; }

.activity .tab-wrap .tab { display: none; }

.activity .tab-wrap .tab:checked:nth-of-type(1) ~ .tab__content:nth-of-type(1) { opacity: 1; -webkit-transition: 0.5s opacity ease-in, 0.8s -webkit-transform ease; transition: 0.5s opacity ease-in, 0.8s -webkit-transform ease; transition: 0.5s opacity ease-in, 0.8s transform ease; transition: 0.5s opacity ease-in, 0.8s transform ease, 0.8s -webkit-transform ease; position: relative; top: 0; z-index: 1; -webkit-transform: translateY(0px); transform: translateY(0px); }

.activity .tab-wrap .tab:checked:nth-of-type(2) ~ .tab__content:nth-of-type(2) { opacity: 1; -webkit-transition: 0.5s opacity ease-in, 0.8s -webkit-transform ease; transition: 0.5s opacity ease-in, 0.8s -webkit-transform ease; transition: 0.5s opacity ease-in, 0.8s transform ease; transition: 0.5s opacity ease-in, 0.8s transform ease, 0.8s -webkit-transform ease; position: relative; top: 0; z-index: 1; -webkit-transform: translateY(0px); transform: translateY(0px); }

.activity .tab-wrap .tab:checked:nth-of-type(3) ~ .tab__content:nth-of-type(3) { opacity: 1; -webkit-transition: 0.5s opacity ease-in, 0.8s -webkit-transform ease; transition: 0.5s opacity ease-in, 0.8s -webkit-transform ease; transition: 0.5s opacity ease-in, 0.8s transform ease; transition: 0.5s opacity ease-in, 0.8s transform ease, 0.8s -webkit-transform ease; position: relative; top: 0; z-index: 1; -webkit-transform: translateY(0px); transform: translateY(0px); }

.activity .tab-wrap .tab:checked:nth-of-type(4) ~ .tab__content:nth-of-type(4) { opacity: 1; -webkit-transition: 0.5s opacity ease-in, 0.8s -webkit-transform ease; transition: 0.5s opacity ease-in, 0.8s -webkit-transform ease; transition: 0.5s opacity ease-in, 0.8s transform ease; transition: 0.5s opacity ease-in, 0.8s transform ease, 0.8s -webkit-transform ease; position: relative; top: 0; z-index: 1; -webkit-transform: translateY(0px); transform: translateY(0px); }

.activity .tab-wrap .tab:checked + label { cursor: default; color: white; background-color: #0e2431; }

.activity .tab-wrap .tab + label { cursor: pointer; text-align: center; -webkit-transition: 0.3s background-color ease; transition: 0.3s background-color ease; padding: 15px; color: #333333; border-radius: 50%; width: 140px; height: 140px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 16px; border: 3px solid #34A65F; background-color: white; }

.activity .tab-wrap .tab + label:before { content: ''; width: 100px; height: 80px; display: block; margin: 0 auto; background-size: 100% 100%; }

.activity .tab-wrap .tab__content { padding: 20px 0; position: absolute; width: 100%; z-index: -1; opacity: 0; left: 0; -webkit-transform: translateY(-3px); transform: translateY(-3px); }

.activity .xmas:before { background-image: url(../images/activity-xmas.svg); }

.activity .ny:before { background-image: url(../images/activity-ny.svg); }

.activity .activity-list { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 20px; border: 1px solid #c2a281; padding: 10px; }

.activity .activit-pic { width: 60%; height: 400px; background-size: cover; background-position: center; position: relative; }

.activity .activit-box { width: 40%; margin-left: 10px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }

.activity .activit-info { margin-bottom: 10px; }

.activity .activity-container { width: 100%; }

.activity .swiper-wrapper, .activity .grid_rate { margin-top: 10px; }

@media (max-width: 1100px) { .container, .fixed_content { padding: 0 .5em; }
  article:not(:nth-of-type(1)) .swiper-button-next, article:not(:nth-of-type(1)) .swiper-button-prev { display: none; }
  .swiper-arrow { overflow: hidden; } }

@media (min-width: 741px) { .search_button { display: none; }
  .top_bar { position: absolute; top: 60px; right: 0; z-index: 3; }
  .search_container { background: rgba(255, 255, 255, 0.7); }
  nav { background: white; }
  nav .active a { border-bottom: 5px solid #ff6600; }
  nav .container { border-bottom: 3px solid #eee; display: -webkit-box; display: -ms-flexbox; display: flex; }
  nav li { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; }
  nav li:first-child { display: none; }
  #fixed_nav .container { border-bottom: 0; }
  .mobile_nav { display: none; } }

@media (min-width: 1024px) { nav a { -webkit-transition: 0.4s all; transition: 0.4s all; }
  nav a:hover { border-bottom: 5px solid #ff9900; }
  #rooms_search_bar .btns { -webkit-transition: 0.4s all; transition: 0.4s all; }
  #rooms_search_bar .btns:hover { background-color: #ff6600; }
  .more a { -webkit-transition: 0.4s all; transition: 0.4s all; }
  .more a:hover { background-color: #ff6600; }
  .news_pic a { -webkit-transition: 0.4s all; transition: 0.4s all; }
  .news_pic a:hover { background-color: rgba(255, 255, 255, 0.3); }
  .featured_pic a { -webkit-transition: 0.4s all; transition: 0.4s all; }
  .featured_pic a:hover { background-color: rgba(255, 255, 255, 0.3); }
  .news_lists a { -webkit-transition: 0.4s all; transition: 0.4s all; }
  .news_lists a:hover { color: #ff9900; }
  .featured a:hover span { color: #ff9900; }
  .featured span { -webkit-transition: 0.4s all; transition: 0.4s all; }
  .featured-02 a:hover span { color: #ff9900; }
  .featured-02 span { -webkit-transition: 0.4s all; transition: 0.4s all; }
  figure a { -webkit-transition: 0.4s all; transition: 0.4s all; }
  figure a:hover { background-color: rgba(255, 255, 255, 0.3); }
  .swiper-button-prev, .swiper-button-next { -webkit-transition: 0.4s all; transition: 0.4s all; }
  .swiper-button-prev:hover, .swiper-button-next:hover { opacity: 1; background-color: #c2a281; }
  .grid_link { -webkit-transition: 0.4s all; transition: 0.4s all; }
  .grid_link:hover { background-color: rgba(255, 255, 255, 0.3); }
  .grid_list > a:hover { background-color: rgba(255, 255, 255, 0.3); }
  .grid_booking { -webkit-transition: 0.4s all; transition: 0.4s all; }
  .grid_booking:hover { background-color: #0F8A5F; } }

@media (max-width: 970px) { body { margin: 60px 0 46px; }
  article { min-height: auto; }
  .anchor_hide { height: 60px; margin-top: -60px; }
  #header { position: fixed; top: 0; left: 0; width: 100%; z-index: 10; }
  #mobile_nav li a { border: 0; padding: 10px 0; }
  .intro { text-align: left; line-height: 25px; padding: 20px 0; }
  .mobile_button {border-radius: 5px; width: 152px; margin: 10px auto 0; display: block; color: #FFF; padding: 5px 10px;border-bottom: 3px solid #C00;background-color:#E00;font-weight: bold; text-align: center;}
  .attractions .container, .hotels .container { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
  .attractions .area-info, .hotels .area-info { width: 100%; margin-bottom: 20px; }
  .attractions .swiper-arrow, .hotels .swiper-arrow { width: 100%; margin-left: 0; } }

@media (max-width: 740px) { article { padding: 2em 0em; }
  .banner { height: 255px; }
  .banner > .container { text-align: center; padding: 0em .5em; }
  .banner .swiper-slide svg { display: none; }
  .banner .back-banner [class^='snow'], .banner .back-banner [class^='firepoint'] { width: 5px; height: 5px; }
  .search_bar { width: 100%; }
  .search_bar li { width: 100%; padding: 5px 0; }
  .search_button { position: fixed; bottom: 0; left: 0; right: 0; z-index: 10; color: white; }
  .swiper-button-next, .swiper-button-prev { display: none; }
  .activity .activity-list { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
  .activity .activit-pic { height: 250px; margin-bottom: 10px; }
  .activity .activit-info { margin-bottom: 10px; }
  .activity .activit-pic, .activity .activit-box { width: 100%; margin-left: 0; } }

@media (max-width: 480px) { body { font-size: 18px; } }
@-webkit-keyframes falling { 0px, 100% { opacity: 0; }
  70% { opacity: 100; }
  0% { -webkit-transform: translate(100px, 0); transform: translate(100px, 0); }
  100% { -webkit-transform: translate(0, 200px); transform: translate(0, 200px); } }

@keyframes falling { 0px, 100% { opacity: 0; }
  70% { opacity: 100; }
  0% { -webkit-transform: translate(100px, 0); transform: translate(100px, 0); }
  100% { -webkit-transform: translate(0, 200px); transform: translate(0, 200px); } }

@-webkit-keyframes flashing { 0% { fill: white; }
  100% { fill: #FFBC2C; } }

@keyframes flashing { 0% { fill: white; }
  100% { fill: #FFBC2C; } }

@-webkit-keyframes explode1 { 0% { opacity: 0; }
  25% { opacity: 1;
    -webkit-transform: translate(0px, -100px);
            transform: translate(0px, -100px); }
  50% { opacity: 0.2; }
  100% { opacity: 0;
    -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px); } }

@keyframes explode1 { 0% { opacity: 0; }
  25% { opacity: 1;
    -webkit-transform: translate(0px, -100px);
            transform: translate(0px, -100px); }
  50% { opacity: 0.2; }
  100% { opacity: 0;
    -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px); } }

@-webkit-keyframes explode2 { 0% { opacity: 0; }
  25% { opacity: 1;
    -webkit-transform: translate(100px, 0px);
            transform: translate(100px, 0px); }
  50% { opacity: 0.2; }
  100% { opacity: 0;
    -webkit-transform: translate(100px, 100px);
            transform: translate(100px, 100px); } }

@keyframes explode2 { 0% { opacity: 0; }
  25% { opacity: 1;
    -webkit-transform: translate(100px, 0px);
            transform: translate(100px, 0px); }
  50% { opacity: 0.2; }
  100% { opacity: 0;
    -webkit-transform: translate(100px, 100px);
            transform: translate(100px, 100px); } }

@-webkit-keyframes explode3 { 0% { opacity: 0; }
  25% { opacity: 1;
    -webkit-transform: translate(0px, 100px);
            transform: translate(0px, 100px); }
  50% { opacity: 0.2; }
  100% { opacity: 0;
    -webkit-transform: translate(0px, 200px);
            transform: translate(0px, 200px); } }

@keyframes explode3 { 0% { opacity: 0; }
  25% { opacity: 1;
    -webkit-transform: translate(0px, 100px);
            transform: translate(0px, 100px); }
  50% { opacity: 0.2; }
  100% { opacity: 0;
    -webkit-transform: translate(0px, 200px);
            transform: translate(0px, 200px); } }

@-webkit-keyframes explode4 { 0% { opacity: 0; }
  25% { opacity: 1;
    -webkit-transform: translate(-100px, 0px);
            transform: translate(-100px, 0px); }
  50% { opacity: 0.2; }
  100% { opacity: 0;
    -webkit-transform: translate(-100px, 100px);
            transform: translate(-100px, 100px); } }

@keyframes explode4 { 0% { opacity: 0; }
  25% { opacity: 1;
    -webkit-transform: translate(-100px, 0px);
            transform: translate(-100px, 0px); }
  50% { opacity: 0.2; }
  100% { opacity: 0;
    -webkit-transform: translate(-100px, 100px);
            transform: translate(-100px, 100px); } }

@-webkit-keyframes explode5 { 0% { opacity: 0; }
  25% { opacity: 1;
    -webkit-transform: translate(-70px, -70px);
            transform: translate(-70px, -70px); }
  50% { opacity: 0.2; }
  100% { opacity: 0;
    -webkit-transform: translate(-70px, 30px);
            transform: translate(-70px, 30px); } }

@keyframes explode5 { 0% { opacity: 0; }
  25% { opacity: 1;
    -webkit-transform: translate(-70px, -70px);
            transform: translate(-70px, -70px); }
  50% { opacity: 0.2; }
  100% { opacity: 0;
    -webkit-transform: translate(-70px, 30px);
            transform: translate(-70px, 30px); } }

@-webkit-keyframes explode6 { 0% { opacity: 0; }
  25% { opacity: 1;
    -webkit-transform: translate(70px, -70px);
            transform: translate(70px, -70px); }
  50% { opacity: 0.2; }
  100% { opacity: 0;
    -webkit-transform: translate(70px, 30px);
            transform: translate(70px, 30px); } }

@keyframes explode6 { 0% { opacity: 0; }
  25% { opacity: 1;
    -webkit-transform: translate(70px, -70px);
            transform: translate(70px, -70px); }
  50% { opacity: 0.2; }
  100% { opacity: 0;
    -webkit-transform: translate(70px, 30px);
            transform: translate(70px, 30px); } }

@-webkit-keyframes explode7 { 0% { opacity: 0; }
  25% { opacity: 1;
    -webkit-transform: translate(70px, 70px);
            transform: translate(70px, 70px); }
  50% { opacity: 0.2; }
  100% { opacity: 0;
    -webkit-transform: translate(70px, 170px);
            transform: translate(70px, 170px); } }

@keyframes explode7 { 0% { opacity: 0; }
  25% { opacity: 1;
    -webkit-transform: translate(70px, 70px);
            transform: translate(70px, 70px); }
  50% { opacity: 0.2; }
  100% { opacity: 0;
    -webkit-transform: translate(70px, 170px);
            transform: translate(70px, 170px); } }

@-webkit-keyframes explode8 { 0% { opacity: 0; }
  25% { opacity: 1;
    -webkit-transform: translate(-70px, 70px);
            transform: translate(-70px, 70px); }
  50% { opacity: 0.2; }
  100% { opacity: 0;
    -webkit-transform: translate(-70px, 170px);
            transform: translate(-70px, 170px); } }

@keyframes explode8 { 0% { opacity: 0; }
  25% { opacity: 1;
    -webkit-transform: translate(-70px, 70px);
            transform: translate(-70px, 70px); }
  50% { opacity: 0.2; }
  100% { opacity: 0;
    -webkit-transform: translate(-70px, 170px);
            transform: translate(-70px, 170px); } }

@-webkit-keyframes explode9 { 0% { opacity: 0; }
  25% { opacity: 1;
    -webkit-transform: translate(-200px, 0px);
            transform: translate(-200px, 0px); }
  50% { opacity: 0.2; }
  100% { opacity: 0;
    -webkit-transform: translate(-200px, 100px);
            transform: translate(-200px, 100px); } }

@keyframes explode9 { 0% { opacity: 0; }
  25% { opacity: 1;
    -webkit-transform: translate(-200px, 0px);
            transform: translate(-200px, 0px); }
  50% { opacity: 0.2; }
  100% { opacity: 0;
    -webkit-transform: translate(-200px, 100px);
            transform: translate(-200px, 100px); } }

@-webkit-keyframes explode10 { 0% { opacity: 0; }
  25% { opacity: 1;
    -webkit-transform: translate(0px, -200px);
            transform: translate(0px, -200px); }
  50% { opacity: 0.2; }
  100% { opacity: 0;
    -webkit-transform: translate(0px, -100px);
            transform: translate(0px, -100px); } }

@keyframes explode10 { 0% { opacity: 0; }
  25% { opacity: 1;
    -webkit-transform: translate(0px, -200px);
            transform: translate(0px, -200px); }
  50% { opacity: 0.2; }
  100% { opacity: 0;
    -webkit-transform: translate(0px, -100px);
            transform: translate(0px, -100px); } }

@-webkit-keyframes explode11 { 0% { opacity: 0; }
  25% { opacity: 1;
    -webkit-transform: translate(200px, 0px);
            transform: translate(200px, 0px); }
  50% { opacity: 0.2; }
  100% { opacity: 0;
    -webkit-transform: translate(200px, 100px);
            transform: translate(200px, 100px); } }

@keyframes explode11 { 0% { opacity: 0; }
  25% { opacity: 1;
    -webkit-transform: translate(200px, 0px);
            transform: translate(200px, 0px); }
  50% { opacity: 0.2; }
  100% { opacity: 0;
    -webkit-transform: translate(200px, 100px);
            transform: translate(200px, 100px); } }

@-webkit-keyframes explode12 { 0% { opacity: 0; }
  25% { opacity: 1;
    -webkit-transform: translate(0px, 200px);
            transform: translate(0px, 200px); }
  50% { opacity: 0.2; }
  100% { opacity: 0;
    -webkit-transform: translate(0px, 300px);
            transform: translate(0px, 300px); } }

@keyframes explode12 { 0% { opacity: 0; }
  25% { opacity: 1;
    -webkit-transform: translate(0px, 200px);
            transform: translate(0px, 200px); }
  50% { opacity: 0.2; }
  100% { opacity: 0;
    -webkit-transform: translate(0px, 300px);
            transform: translate(0px, 300px); } }

@-webkit-keyframes explode13 { 0% { opacity: 0; }
  25% { opacity: 1;
    -webkit-transform: translate(-180px, -70px);
            transform: translate(-180px, -70px); }
  50% { opacity: 0.2; }
  100% { opacity: 0;
    -webkit-transform: translate(-180px, 30px);
            transform: translate(-180px, 30px); } }

@keyframes explode13 { 0% { opacity: 0; }
  25% { opacity: 1;
    -webkit-transform: translate(-180px, -70px);
            transform: translate(-180px, -70px); }
  50% { opacity: 0.2; }
  100% { opacity: 0;
    -webkit-transform: translate(-180px, 30px);
            transform: translate(-180px, 30px); } }

@-webkit-keyframes explode14 { 0% { opacity: 0; }
  25% { opacity: 1;
    -webkit-transform: translate(-70px, -180px);
            transform: translate(-70px, -180px); }
  50% { opacity: 0.2; }
  100% { opacity: 0;
    -webkit-transform: translate(-70px, -80px);
            transform: translate(-70px, -80px); } }

@keyframes explode14 { 0% { opacity: 0; }
  25% { opacity: 1;
    -webkit-transform: translate(-70px, -180px);
            transform: translate(-70px, -180px); }
  50% { opacity: 0.2; }
  100% { opacity: 0;
    -webkit-transform: translate(-70px, -80px);
            transform: translate(-70px, -80px); } }

@-webkit-keyframes explode15 { 0% { opacity: 0; }
  25% { opacity: 1;
    -webkit-transform: translate(70px, -180px);
            transform: translate(70px, -180px); }
  50% { opacity: 0.2; }
  100% { opacity: 0;
    -webkit-transform: translate(70px, -80px);
            transform: translate(70px, -80px); } }

@keyframes explode15 { 0% { opacity: 0; }
  25% { opacity: 1;
    -webkit-transform: translate(70px, -180px);
            transform: translate(70px, -180px); }
  50% { opacity: 0.2; }
  100% { opacity: 0;
    -webkit-transform: translate(70px, -80px);
            transform: translate(70px, -80px); } }

@-webkit-keyframes explode16 { 0% { opacity: 0; }
  25% { opacity: 1;
    -webkit-transform: translate(180px, -70px);
            transform: translate(180px, -70px); }
  50% { opacity: 0.2; }
  100% { opacity: 0;
    -webkit-transform: translate(180px, 30px);
            transform: translate(180px, 30px); } }

@keyframes explode16 { 0% { opacity: 0; }
  25% { opacity: 1;
    -webkit-transform: translate(180px, -70px);
            transform: translate(180px, -70px); }
  50% { opacity: 0.2; }
  100% { opacity: 0;
    -webkit-transform: translate(180px, 30px);
            transform: translate(180px, 30px); } }

@-webkit-keyframes explode17 { 0% { opacity: 0; }
  25% { opacity: 1;
    -webkit-transform: translate(180px, 70px);
            transform: translate(180px, 70px); }
  50% { opacity: 0.2; }
  100% { opacity: 0;
    -webkit-transform: translate(180px, 170px);
            transform: translate(180px, 170px); } }

@keyframes explode17 { 0% { opacity: 0; }
  25% { opacity: 1;
    -webkit-transform: translate(180px, 70px);
            transform: translate(180px, 70px); }
  50% { opacity: 0.2; }
  100% { opacity: 0;
    -webkit-transform: translate(180px, 170px);
            transform: translate(180px, 170px); } }

@-webkit-keyframes explode18 { 0% { opacity: 0; }
  25% { opacity: 1;
    -webkit-transform: translate(70px, 180px);
            transform: translate(70px, 180px); }
  50% { opacity: 0.2; }
  100% { opacity: 0;
    -webkit-transform: translate(70px, 280px);
            transform: translate(70px, 280px); } }

@keyframes explode18 { 0% { opacity: 0; }
  25% { opacity: 1;
    -webkit-transform: translate(70px, 180px);
            transform: translate(70px, 180px); }
  50% { opacity: 0.2; }
  100% { opacity: 0;
    -webkit-transform: translate(70px, 280px);
            transform: translate(70px, 280px); } }

@-webkit-keyframes explode19 { 0% { opacity: 0; }
  25% { opacity: 1;
    -webkit-transform: translate(-70px, 180px);
            transform: translate(-70px, 180px); }
  50% { opacity: 0.2; }
  100% { opacity: 0;
    -webkit-transform: translate(-70px, 280px);
            transform: translate(-70px, 280px); } }

@keyframes explode19 { 0% { opacity: 0; }
  25% { opacity: 1;
    -webkit-transform: translate(-70px, 180px);
            transform: translate(-70px, 180px); }
  50% { opacity: 0.2; }
  100% { opacity: 0;
    -webkit-transform: translate(-70px, 280px);
            transform: translate(-70px, 280px); } }

@-webkit-keyframes explode20 { 0% { opacity: 0; }
  25% { opacity: 1;
    -webkit-transform: translate(-180px, 70px);
            transform: translate(-180px, 70px); }
  50% { opacity: 0.2; }
  100% { opacity: 0;
    -webkit-transform: translate(-180px, 170px);
            transform: translate(-180px, 170px); } }

@keyframes explode20 { 0% { opacity: 0; }
  25% { opacity: 1;
    -webkit-transform: translate(-180px, 70px);
            transform: translate(-180px, 70px); }
  50% { opacity: 0.2; }
  100% { opacity: 0;
    -webkit-transform: translate(-180px, 170px);
            transform: translate(-180px, 170px); } }

@-webkit-keyframes explode21 { 0% { opacity: 0; }
  25% { opacity: 1;
    -webkit-transform: translate(-140px, -140px);
            transform: translate(-140px, -140px); }
  50% { opacity: 0.2; }
  100% { opacity: 0;
    -webkit-transform: translate(-140px, -40px);
            transform: translate(-140px, -40px); } }

@keyframes explode21 { 0% { opacity: 0; }
  25% { opacity: 1;
    -webkit-transform: translate(-140px, -140px);
            transform: translate(-140px, -140px); }
  50% { opacity: 0.2; }
  100% { opacity: 0;
    -webkit-transform: translate(-140px, -40px);
            transform: translate(-140px, -40px); } }

@-webkit-keyframes explode22 { 0% { opacity: 0; }
  25% { opacity: 1;
    -webkit-transform: translate(140px, -140px);
            transform: translate(140px, -140px); }
  50% { opacity: 0.2; }
  100% { opacity: 0;
    -webkit-transform: translate(140px, -40px);
            transform: translate(140px, -40px); } }

@keyframes explode22 { 0% { opacity: 0; }
  25% { opacity: 1;
    -webkit-transform: translate(140px, -140px);
            transform: translate(140px, -140px); }
  50% { opacity: 0.2; }
  100% { opacity: 0;
    -webkit-transform: translate(140px, -40px);
            transform: translate(140px, -40px); } }

@-webkit-keyframes explode23 { 0% { opacity: 0; }
  25% { opacity: 1;
    -webkit-transform: translate(140px, 140px);
            transform: translate(140px, 140px); }
  50% { opacity: 0.2; }
  100% { opacity: 0;
    -webkit-transform: translate(140px, 240px);
            transform: translate(140px, 240px); } }

@keyframes explode23 { 0% { opacity: 0; }
  25% { opacity: 1;
    -webkit-transform: translate(140px, 140px);
            transform: translate(140px, 140px); }
  50% { opacity: 0.2; }
  100% { opacity: 0;
    -webkit-transform: translate(140px, 240px);
            transform: translate(140px, 240px); } }

@-webkit-keyframes explode24 { 0% { opacity: 0; }
  25% { opacity: 1;
    -webkit-transform: translate(-140px, 140px);
            transform: translate(-140px, 140px); }
  50% { opacity: 0.2; }
  100% { opacity: 0;
    -webkit-transform: translate(-140px, 240px);
            transform: translate(-140px, 240px); } }

@keyframes explode24 { 0% { opacity: 0; }
  25% { opacity: 1;
    -webkit-transform: translate(-140px, 140px);
            transform: translate(-140px, 140px); }
  50% { opacity: 0.2; }
  100% { opacity: 0;
    -webkit-transform: translate(-140px, 240px);
            transform: translate(-140px, 240px); } }