@charset "utf-8";
/* CSS Document */

body {
  font-family: 微軟正黑體;
  background-color: #faf3e9;
}

body,
html {
  width: 100%;
  height: 100%;
  background-color: #faf3e9;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
}

.kv_wrapper {
    position: relative;
    margin-top: 53px;
    overflow: hidden;
}

.japan_icon {
    position: absolute;
    width: 165px;
    top: 4%;
    left: 5%;
    z-index: 3;
    z-index: 8;
}

.h1 {
    position: absolute;
    width: 350px;
    top: 12%;
    left: 15%;
    z-index: 3;
    z-index: 8;
}

.japan_icon img , .h1 img , .kv, .kv img, .kv_img, .kv_img img, .kv_steam img, .kv_autumn img, .topnav_h1 img,
.scroller_img img, .scroller_h1 img, .scroller_autumn_p img, .product_img img, .food_steam01 img, .food_steam02 img, .product_box_shadow img {
    width: 100%;
}

.kv {
    position: absolute;
    z-index: 2;
    z-index: 7;
}

.kv_pc, .paper_pc {
    display: block;
}

.kv_m, .paper_m {
    display: none;
}

.kv_autumn {
    position: absolute;
    width: 900px;
    margin-top: 40%;
    right: 8%;
    z-index: 3;
    z-index: 7;
}

.kv_img {
    position: relative;
    z-index: 1;
    z-index: 6;
}

.kv_pc_img{
    display: block;
}

.kv_m_img{
    display: none;
}

.swiper-wrapper {
    height: auto;
}

.kv_img_p {
    position: absolute;
    height: 40px;
    right: 20%;
    bottom: 25%;
}

.kv_img_p img, .nav_en img, .arrow img, .location_en img, .location img {
    height: 100%;
}

.kv_steam {
    position: absolute;
    width: 45%;
    max-width: 781px;
    top: 0%;
    right: 25%;
    opacity: 0;
    z-index: 1;
    z-index: 6;
    animation: kv_steam 15s linear infinite;
}

@keyframes kv_steam{
  0%{
    top: 0%;
    right: 25%;
    opacity: 0;
  }
  20%{
    top: -5%;
    right: 20%;
    opacity: 1;
  }
  85%{
    top: -20%;
    right: 15%;
    opacity: 1;
  }
  100%{
    top: -22%;
    right: 16%;
    opacity: 0;
  }
}

.topnav_wrapper {
    position: fixed;
    width: 100%;
    top: 53px;
    background-color: #fff;
    padding: 16px 0 5px 0%;
    z-index: 5;
    text-align: center;
    transition: 0.5s ease;
    opacity: 1; 
}

.topnav_box {
    width: 100%;
    height: 100px;
    display: inline-block;
    flex-direction: row;
    justify-content: start;
    text-decoration: none;
    list-style: none;
    overflow-x: scroll;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior: auto;
    cursor: grab;
    white-space: nowrap;
}

.banner.hidden {
    opacity: 0;
}

.topnav_h1 {
    width: 305px;
    display: inline-block;
    margin-right: 2%;
}

.topnav_wrapper ul {
    display: inline-block;
    vertical-align: top;
    list-style: none;
}

.topnav_wrapper .topnav_btn {
    position: relative;
    width: 200px;
    font-family: "Noto Serif TC", serif;
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 3px;
    color: #000;
    text-align: center;
    border-width: 1px;
    border-style: solid;
    border-color: #898989;
    border-radius: 100px;
    margin: auto 18px;
    display: inline-block;
}

.topnav_btn span {
    font-size: 35px;
}

.topnav_p {
    color: #000;
    padding: 5px 0 10px 0;
}

.active .topnav_p {
    color: #ff0000;
}

.topnav_btn.active ul {
    display: block;
}

.topnav_wrapper ul li ul {
    position: absolute;
    width: auto;
    white-space: nowrap;
    left: 50%;
    transform: translateX(-50%);
    margin-top: -5px;
    display: none;
}

.topnav_wrapper ul li ul li {
    font-family: 微軟正黑體;
    font-size: 15px;
    letter-spacing: initial;
    margin: auto 0.3em;
    display: inline-block;
}

.topnav_wrapper ul li ul li a {
    color: #000;
}

.topnav_wrapper ul li ul li img {
    position: relative;
    width: 10px;
    top: 1px;
    margin-right: 2px;
}

.topnav_more {
    position: relative;
    font-family: "Noto Serif TC", serif;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0px;
    display: inline-block;
    vertical-align: top;
    top: 13px;
    margin-left: 40px;
}

.topnav_more:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: #313131;
    top: 1.55em;
}

.topnav_more:after {
    content: "more";
    position: absolute;
    font-family: 微軟正黑體;
    font-size: 14px;
    font-weight: 100;
    letter-spacing: 1px;
    color: #000;
    margin-top: 2.2em;
    left: 0;
    z-index: 1;
}

.topnav_more a {
    position: relative;
    color: #000;
    padding-bottom: 25px;
    z-index: 2;
}

.topnav_wrapper .product_shadow {
    width: 1000px;
    height: 45px;
    margin-top: 25px;
    text-align: start;
}

.nav {
    width: 100%;
    border-top: 1px solid #313131;
    border-bottom: 1px solid #313131;
}

.nav li {
    position: relative;
    width: 33%;
    padding: 5% 0%;
    display: inline-block;
}

.nav li:before {
    content: "";
    position: absolute;
    width: 1px;
    height: 100%;
    background-color: #313131;
    top: 0%;
}

.nav li:hover .nav_btn_move{
  position: absolute;
  width: 50px;
  height: 50px;
  background: #fbf3ea;
  margin: 100px auto;
  text-align: center;
  top: 25%;
  left: 46%;
  animation: move 1.6s linear infinite;
}

@keyframes move{
  0%{
    transform: rotate(0deg) translateX(145px) rotate(-0deg);
  }
  100%{
    transform: rotate(360deg) translateX(145px) rotate(-360deg);
  }
}

.nav_btn {
    width: 260px;
    font-family: "Noto Serif TC", serif;
    font-size: 32px;
    font-weight: bold;
    letter-spacing: 2px;
    color: #282828;
    text-align: center;
    border-width: 1px;
    border-style: solid;
    border-color: #313131;
    border-radius: 300px;
    padding: 45px 0;
    margin: 0 auto;
}

.nav_btn span {
    font-size: 45px;
}

.active .nav_btn {
    color: #ff0000;
}

.letter-spacing6 {
    letter-spacing: 6px;
}

span.letter-spacing-2 {
    letter-spacing: -2px;
}

span.letter-spacing-5 {
    font-size: 28px;
    letter-spacing: -5px;
}

.nav_h1 {
    position: relative;
}

.nav_h2 {
    font-family: 微軟正黑體;
    font-size: 17px;
    font-weight: bold;
    color: #000;
    margin-top: 0.7em;
}

.nav_en {
    position: relative;
    height: 15px;
}

.arrow {
    height: 25px;
    margin: 1.5em 0 1.5em 0;
}

.arrow01 {
    display: block;
}

.nav li:hover .arrow01 {
    display: none;
}

.arrow02 {
    display: none;
}

.nav li:hover .arrow02 {
    display: block;
    transform: translateX(0%);
    animation: arrow02 0.8s linear infinite;
}

@keyframes arrow02{
  0%{
    transform: translateX(0%);
  }
  70%{
    transform: translateX(10%);
  }
  100%{
    transform: translateX(0%);
  }
}

.scroller_autumn_wrapper {
    position: relative;
    width: 100%;
    height: 310px;
    overflow: hidden;
}

.scroller_autumn {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.scroller_img {
    position: relative;
    width: 100%;
    top: -100%;
    animation: scroller_img 50s linear infinite;
}

@keyframes scroller_img{
  0%{
    top: -98%;
  }
  5%{
    top: -98%;
  }
  45%{
    top: 0%;
  }
  55%{
    top: 0%;
  }
  95%{
    top: -98%;
  }
  100%{
    top: -98%;
  }
}

.scroller_h1 {
    position: absolute;
    width: 50%;
    max-width: 285px;
    top: 45%;
    right: 14%;
}

.scroller_autumn_p {
    position: absolute;
    max-width: 900px;
    width: 50%;
    top: 25%;
    left: 100%;
    animation: scroller_autumn_p 45s linear infinite;
}

@keyframes scroller_autumn_p{
  0%{
    left: 100%;
  }
  100%{
    left: -50%;
  }
}

.product_wrapper {
    position: relative;
    width: 100%;
    padding-top: 4%;
    overflow: hidden;
}

.red {
    background-color: #cf3821;
}
.brown {
    background-color: #420800;
}

#taipei, #taichung, #kaohsiung {
    position: absolute;
    height: 0px;
    margin-top: -320px;
}

.product {
    position: relative;
    width: 69%;
    margin: 0 auto;
    margin-bottom: 4%;
    padding: 3% 0 3% 0;
    background-image: url(../images/paper_pc.jpg);
    background-size: cover;
    border-radius: 150px 0 0 0;
}

.product:before {
    content: "";
    position: absolute;
    width: 410px;
    height: 440px;
    background-image: url(../images/mapleleaf02.png);
    background-size: 100%;
    background-repeat: no-repeat;
    right: -15%;
    bottom: 19%;
}

.product.right:before {
    display: none;
}

.product:after {
    content: "";
    position: absolute;
    width: 382px;
    height: 411px;
    background-image: url(../images/mapleleaf01.png);
    background-size: 100%;
    background-repeat: no-repeat;
    right: -18%;
    bottom: -6%;
}

.product.right:after {
    right: auto;
    left: -19%;
}

.location_wrapper {
    position: relative;
    display: inline-block;
    margin-left: -5%;
    z-index: 3;
}

.right .location_wrapper {
    position: absolute;
    right: -5%;
}

.location_box {
    position: relative;
    left: 28%;
}

.right .location_box {
    left: -20%;
    text-align: right;
}

.location_en {
    height: 30px;
}

.location {
    height: 65px;
}

.product_img_box {
    position: relative;
    display: inline-block;
    margin-top: 25px;
}

.product_img {
    max-width: 682px;
    width: 100%;
}

.food_img_p {
    position: absolute;
    width: 405px;
    height: 65px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    line-height: 65px;
    background-image: url(../images/food_img_pbg.png);
    background-repeat: no-repeat;
    margin-top: -20%;
    left: 29%;
}

.right .food_img_p {
    left: 12%;
}

.food_steam_wrapper {
    position: absolute;
    top: -18%;
    left: -26%;
}

.right .food_steam_wrapper {
    top: -5%;
    left: 46%;
}

.food_steam01 {
    position: relative;
    width: 564px;
    margin-top: 0%;
    left: 10%;
    opacity: 0;
    animation: food_steam01 10s linear infinite;
}

@keyframes food_steam01{
  0%{
    margin-top: 0%;
    left: 10%;
    opacity: 0;
  }
  20%{
    margin-top: -5%;
    left: 5%;
    opacity: 1;
  }
  85%{
    margin-top: -10%;
    left: -25%;
    opacity: 1;
  }
  100%{
    margin-top: -15%;
    left: -30%;
    opacity: 0;
  }
}

.right .food_steam01 {
    position: relative;
    width: 564px;
    margin-top: 0%;
    left: -25%;
    opacity: 0;
    animation: food_steam01_r 10s linear infinite;
}

@keyframes food_steam01_r{
  0%{
    margin-top: 0%;
    left: -25%;
    opacity: 0;
  }
  20%{
    margin-top: -5%;
    left: -20%;
    opacity: 1;
  }
  85%{
    margin-top: -10%;
    left: 10%;
    opacity: 1;
  }
  100%{
    margin-top: -15%;
    left: 15%;
    opacity: 0;
  }
}

.food_steam02 {
    position: absolute;
    width: 273px;
    top: 50%;
    left: 50%;
    opacity: 0;
    animation: food_steam02 15s linear infinite;
}

@keyframes food_steam02{
  0%{
    top: 50%;
    left: 50%;
    opacity: 0;
  }
  20%{
    top: 45%;
    left: 45%;
    opacity: 1;
  }
  85%{
    top: 5%;
    left: 5%;
    opacity: 1;
  }
  100%{
    top: 0%;
    left: 0%;
    opacity: 0;
  }
}

.right .food_steam02 {
    position: absolute;
    width: 273px;
    top: 50%;
    left: 0%;
    opacity: 0;
    animation: food_steam02_r 15s linear infinite;
}

@keyframes food_steam02_r{
  0%{
    top: 50%;
    left: 0%;
    opacity: 0;
  }
  20%{
    top: 45%;
    left: 5%;
    opacity: 1;
  }
  85%{
    top: 5%;
    left: 45%;
    opacity: 1;
  }
  100%{
    top: 0%;
    left: 50%;
    opacity: 0;
  }
}

.product_content {
    position: relative;
    width: 48%;
    color: #000;
    vertical-align: top;
    display: inline-block;
    z-index: 1;
}

.right .product_content {
    left: 5%;
}

.product_airport img {
    position: relative;
    width: 14px;
    top: 2px;
    margin-right: 6px;
}

.product_airport, .product_h2 {
    font-family: "Noto Serif TC", serif;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 1px;
    margin-left: 6%;
}

.right .product_airport, .right .product_h1, .right .product_h2 {
    margin-left: 10%;
}

.product_h1 {
    font-family: "Noto Serif TC", serif;
    font-size: 45px;
    font-weight: bold;
    letter-spacing: 2px;
    line-height: 1.2em;
    color: #ff0000;
    margin: 5px 0 12px 6%;
}

.product_h2 {
    min-height: 2.9em;
    margin: 0.3em 0 1.2em 6%;
}

.product_box {
    position: relative;
    background-color: #fff;
    background-size: cover;
    border-radius: 0 80px 0 0;
    padding: 5% 10% 2.5% 6%;
    border-width: 1px;
    border-style: solid;
    border-color: #313131;
    z-index: 2;
}

.right .product_box {
    border-radius: 0 0px 0 0;
    padding: 5% 6% 2.5% 10%;
}

.product_box:before {
    content: "";
    position: absolute;
    width: 30%;
    height: 100%;
    background-color: #fff;
    top: -1px;
    left: -30%;
    border-width: 1px 0px 1px 1px;
    border-style: solid;
    border-color: #313131;
}

.right .product_box:before {
    left: auto;
    right: -30%;
    border-width: 1px 1px 1px 0px;
}

.product_h3 {
    font-family: "Huninn", sans-serif;
    font-size: 20px;
    font-weight: bolder;
    letter-spacing: 1px;
    color: #cf3821;
    line-height: 1.4em;
    padding: 0 0 5% 0;
}

.product_line {
    width: 100%;
    height: 1px;
    background-color: #313131;
}

.product_note {
    font-family: DFKai-sb, BiauKai, 'cwTeXKai', serif;
    font-size: 18px;
    font-weight: 400;
    text-align: justify;
    color: #808080;
    line-height: 1.5em;
    margin: 1.5em 0;
}

@import url(https://fonts.googleapis.com/earlyaccess/cwtexkai.css);
.product_note{
  font-family: DFKai-sb, BiauKai, 'cwTeXKai', serif;
}

@font-face {
  font-family: 'cwTeXKai';
  font-style: normal;
  font-weight: bolder;
  src: url(//fonts.gstatic.com/ea/cwtexkai/v3/cwTeXKai-zhonly.eot);
  src: url(//fonts.gstatic.com/ea/cwtexkai/v3/cwTeXKai-zhonly.eot?#iefix) format('embedded-opentype'),
       url(//fonts.gstatic.com/ea/cwtexkai/v3/cwTeXKai-zhonly.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/cwtexkai/v3/cwTeXKai-zhonly.woff) format('woff'),
       url(//fonts.gstatic.com/ea/cwtexkai/v3/cwTeXKai-zhonly.ttf) format('truetype');
}

.product_keypoints_h1 {
    position: relative;
    font-size: 18px;
    font-weight: bold;
    display: inline-block;
    padding: 0 1em;
    margin-bottom: 0.5em;
}

.product_keypoints_h1:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 20px;
    background-color: #eee1c9;
    top: 5px;
    left: 0;
}

.product_keypoints_h1 span {
    position: relative;
}

.product_keypoints {
    font-size: 17px;
    font-weight: bold;
    line-height: 1.8em;
}

.product_keypoints li {
    position: relative;
    list-style-type: none;
    left: 1em;
}

.product_keypoints li:before {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: #ff0000;
    border-radius: 100%;
    top: 0.7em;
    left: -1em;
}

.product_date_box {
    position: relative;
    font-family: "Noto Serif TC", serif;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 1px;
    margin: 5% 0 4.5% 0;
}

.product_date_box .product_line {
    margin: 3% 0;
}

.product_date {
    margin-left: 1.6em;
}

.product_date:before {
    content: "";
    position: absolute;
    width: 1px;
    height: 100%;
    background-color: #313131;
    top: 0;
    margin-left: -10px;
}

.fav_btn {
    position: absolute;
    margin-top: 1px;
    right: 1.3em;
}

.fav_btn.compare_0:before {
    content: "";
    position: absolute;
    width: 28px;
    height: 23px;
    background-image: url(../images/compare0_icon.svg);
    background-repeat: no-repeat;
    top: 0.15em;
}

.fav_btn.compare_1:before {
    content: "";
    position: absolute;
    width: 28px;
    height: 23px;
    background-image: url(../images/compare1_icon.svg);
    background-repeat: no-repeat;
    top: 0.15em;
}

.fav_btn.compare_0:after, .fav_btn.compare_1:after {
    content: "加入最愛";
    position: relative;
    font-size: 17px;
    letter-spacing: 0px;
    color: #434343;
    left: 1.5em;
}

.product_discount {
    font-size: 19px;
    font-weight: bold;
    letter-spacing: 1px;
    color: #d50000;
    min-height: 1.34em;
}

.product_price {
    min-height: 1.34em;
    font-size: 44px;
    font-weight: bold;
    color: #ff0000;
    line-height: 1.2em;
}

.product_price:before {
    content: "$";
    font-family: 微軟正黑體;
    font-weight: bolder;
    font-size: 25px;
}

.product_price:after {
    content: "元";
    font-family: 微軟正黑體;
    font-weight: bolder;
    font-size: 20px;
    margin-left: 2px;
}

.product_button {
    position: absolute;
    width: 150px;
    font-family: "Noto Serif TC", serif;
    font-size: 19px;
    font-weight: bold;
    letter-spacing: 1px;
    color: #fff;
    background-color: #ff0000;
    border-width: 1px;
    border-style: solid;
    border-color: #000;
    border-radius: 120px;
    padding: 8px 25px;
    margin-top: -6px;
    right: 3em;
    -moz-transition: all 0.2s ease-out;
    -webkit-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
    z-index: 1;
}

.right .product_button {
    right: 1.5em;
}

.product_button:hover {
    margin-top: 0px;
    
}

.product_box_shadow {
    position: absolute;
    width: 714px;
    height: 107px;
    transform: rotate(90deg);
    right: -58%;
    bottom: 30%;
    z-index: 1;
}

.product_shadow {
    position: absolute;
    width: 714px;
    height: 57px;
    margin-top: 57px;
    left: 25%;
    overflow: hidden;
}

.product_shadow img {
    position: absolute;
    width: 100%;
    bottom: 0;
}



/***這，有點特別 & 長天數日本 start***/
.yellow {
    background-color: #f69a03;
}

.attractions.product_wrapper {
    padding-top: 7%;
}

.attractions .product {
    width: 92%;
    margin: initial;
    margin-bottom: 4%;
    left: 8%;
    background-size: 100% auto;
    background-repeat: repeat;
}

.attractions .product.right {
    margin-top: 10%;
}

.attractions .product:before {
    width: 280px;
    background-size: 100%;
    right: 20%;
    bottom: 17%;
    z-index: 2;
}

.attractions .location_wrapper {
    left: -4%;
}

.attractions .right .location_wrapper {
    position: relative;
    left: auto;
    margin-left: auto;
    right: 0;
    float: right;
}

.attractions .location_box {
    position: absolute;
    top: -10.5%;
    left: 100%;
}

.attractions .right .location_box {
    left: -9%;
}

.attractions .location_box:before {
    content: "";
    position: absolute;
    width: 410px;
    height: 410px;
    background-image: url(../images/mapleleaf01.png);
    background-size: 100%;
    background-repeat: no-repeat;
    top: -110%;
    left: -65%;
}

.attractions .right .location_box:before {
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
    left: -75%;
}

.attractions .location {
    position: relative;
    height: 110px;
    z-index: 1;
}

.attractions .right .location {
    left: -50%;
}

.attractions .right .product_img_box {
    right: calc(0% + 52px);
}

.attractions .product_img {
    max-width: 1310px;
    border-radius: 70px;
    overflow: hidden;
}

.attractions .food_img_p {
    width: 360px;
    height: 40px;
    line-height: 40px;
    color: #313131;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 70px;
    top: -20px;
    margin-top: initial;
    left: 8%;
}

.attractions .right .food_img_p {
    left: auto;
    right: 12%;
}

.attractions .food_img_p:after {
    content: "";
    position: absolute;
    width: 500px;
    height: 50px;
    background-image: url(images/shadow.png);
    background-size: 90%;
    top: 35%;
    left: -30%;
    opacity: 0.7;
}

.product_video {
    position: absolute;
    border-radius: 25px;
    overflow: hidden;
    top: 50%;
    transform: translateY(-50%);
    right: -30%;
    visibility: hidden;
}

.product_video iframe {
    width: 560px;
    height: 315px;
}

.right .product_video {
    right: auto;
    left: -29%;
}

.attractions .product_content {
    width: 57.5%;
    margin-top: -4%;
    margin-bottom: 60px;
    left: 15.5%;
}

.attractions .product_airport, .attractions .product_h1 {
    margin-left: initial;
}

.attractions .product_box {
    padding: 10.5% 18% 2.5% 9%;
}

.attractions .product_box:before, .attractions .product:after {
    display: none;
}

.attractions .product_h2 {
    min-height: initial;
    margin: 0.3em 0 1.6em 0;
}

.attractions .product_h3 {
    padding: 0 0 3.5% 0;
}

.attractions .product_line {
    width: 80%;
}

.attractions .product_date_box .product_line {
    margin: 2.1% 0;
}

.attractions .product_date_box {
    margin: 4% 0 3.5% 0;
}

.attractions .fav_btn {
    right: 8.7em;
}

.attractions .right5em .fav_btn {
    right: 5em;
}

.right .product_date_box.right-1em .fav_btn {
    right: -1em;
}

.attractions .product_box_shadow {
    transform: rotate(0deg);
    right: 25%;
    bottom: -4.5%;
}

.attractions .product_button {
    right: 32%;
}

.product_marquee_box {
    position: relative;
    width: 110%;
    left: -10%;
}

.box { 
    position: relative;
    width: 100%;
    height: 288px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
.list {
    left: 0px;
    display:flex;
    position: absolute;
}
.photo {
    width: 490px;
    height: 288px;
    margin-left: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 25px;
    overflow: hidden;
}
/***這，有點特別 & 長天數日本 end***/



/************************rwd**************************/
@media all and (max-width: 1800px) {
.location_wrapper {
    width: 50%;
}

.food_img_p {
    left: 21%;
}

.attractions .right5em .fav_btn {
    right: 2em;
}

.right .product_date_box.right-1em .fav_btn {
    right: -4em;
}

.product_box_shadow {
    height: 180px;
}

.product_shadow {
    margin-top: 49px;
}
}

@media all and (max-width: 1670px) {
.kv_autumn {
    width: 45%;
}

.kv_img_p {
    height: 35px;
    right: 15%;
}

.scroller_img img {
    position: relative;
    width: auto;
    height: 200%;
    left: 50%;
    transform: translateX(-50%);
}

.scroller_autumn_p {
    width: 45%;
    top: 28%;
}

.attractions .location_wrapper {
    width: 75%;
}

.attractions .product_content {
    width: 65%;
}

.attractions .product:before {
    right: 12%;
}
}

@media all and (max-width: 1550px) {
.product {
    width: 78%;
    padding: 3% 0 4% 0;
    margin-bottom: 5%;
}

.product_shadow {
    margin-top: 60px;
}

.attractions .right .location_box {
    top: -13%;
    left: -12%;
}
}

@media all and (max-width: 1500px) {
.japan_icon {
    width: 11%;
}

.h1 {
    width: 22%;
}

.kv_img_p {
    height: 30px;
}

.scroller_autumn_p {
    top: 35%;
}

.attractions .product_content {
    width: 73%;
    left: 13%;
}

.attractions .product:before {
    right: 6%;
}
}

@media all and (max-width: 1400px) {
.product {
    width: 85%;
}

.product_shadow {
    margin-top: 55px;
}

.product_video {
    right: -35%;
}

.product_video iframe {
    width: 460px;
    height: 258px;
}

.attractions .product_content {
    width: 78%;
    left: 10%;
}

.attractions .product:before {
    right: 3%;
}
}

@media all and (max-width: 1300px) {
.topnav_h1 {
    margin-left: 50px;
}

.topnav_wrapper .topnav_btn {
    margin: auto 5px;
}

.topnav_more {
    margin-right: 100px;
}

.location_wrapper {
    width: 45%;
}

.food_img_p {
    width: 380px;
    background-size: 95%;
}

.product_content {
    width: 55%;
}

.food_img_p {
    width: 72%;
    line-height: 55px;
    background-size: 100%;
}

.food_steam01, .food_steam02 {
    width: 50%;
}

.fav_btn {
    margin-top: 5.6em;
}

.right .product_date_box.right-1em .fav_btn {
    right: 1.3em;
}

.attractions .right5em .fav_btn {
    right: 8.7em;
}
}

@media all and (max-width: 1200px) {
.scroller_autumn_p {
    top: 40%;
}

.product {
    margin-bottom: 7%;
}

.fav_btn {
    margin-top: 5.4em;
}

.product_shadow {
    margin-top: 46px;
}

.attractions .product_box {
    padding: 10.5% 8% 2.5% 9%;
}

.attractions .product_button {
    right: 25%;
}

.attractions .product:before {
    right: 2%;
}
}

@media all and (max-width: 1135px) {
.product_date_box.lineheight2, .attractions .product_date_box.lineheight2 {
    line-height: 3em;
}

.lineheight2 .product_date {
    position: absolute;
    line-height: 1.5em;
}

.lineheight2 .product_date:before {
    height: 4.1em;
    top: -0.5em;
}

.lineheight2 .fav_btn {
    margin-top: 5.9em;
}

.lineheight2 .fav_btn.compare_0:before, .lineheight2 .fav_btn.compare_1:before {
    top: 0.95em;
}

.attractions .product_content {
    width: 83%;
    left: 7%;
}

.attractions .product:before {
    right: -2%;
}
}

@media all and (max-width: 1100px) {
.kv_img_p {
    height: 25px;
}

.nav_wrapper {
    width: 100%;
    display: inline-block;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    text-decoration: none;
    list-style: none;
    overflow-x: scroll;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior: auto;
    cursor: grab;
}

.nav {
    display: flex;
    width: 1060px;
}

.nav li {
    width: 350px;
}

.scroller_autumn_wrapper {
    height: 200px;
}

.scroller_autumn {
    height: 150px;
}

.scroller_h1 {
    top: 40%;
}

.scroller_autumn_p {
    top: 35%;
}

.food_img_p {
    font-size: 15px;
    line-height: 45px;
}

.location {
    height: 55px;
}

.product {
    padding: 3% 0 6% 0;
}

.product_shadow {
    margin-top: 65px;
}

.fav_btn {
    margin-top: 5.3em;
}

.attractions .food_img_p {
    width: 330px;
}

.attractions .product {
    left: 5%;
}

.attractions .location_wrapper {
    margin-left: -2%;
}

.attractions .product_content {
    left: 8%;
}
}

@media all and (max-width: 1000px) {
.attractions .fav_btn {
    right: 7.7em;
}

.attractions .right5em .fav_btn {
    right: 7.7em;
}
}

@media all and (max-width: 900px) {
.scroller_autumn_p {
    top: 45%;
}

.location_wrapper {
    width: 95%;
    margin-left: auto;
    text-align: center;
}

.right .location_wrapper {
    position: relative;
}

.food_img_p {
    width: 405px;
    font-size: initial;
    line-height: 65px;
    left: 29%;
}

.product {
    width: 100%;
    padding: 6% 0 6% 0;
}

.product_img_box {
    margin-top: 10px;
}

.location_box {
    text-align: left;
    left: 15%;
}

.right .location_box {
    left: 12%;
    text-align: left;
}

.location_en {
    position: relative;
    display: inline-block;
    top: -10px;
}

.location {
    height: 65px;
    display: inline-block;
}

.food_steam01 {
    width: 564px;
}

.food_steam02 {
    width: 273px;
}

.product_content {
    width: 85%;
    left: 5%;
}

.product_box, .right .product_box {
    border-radius: 0 80px 0 0;
    padding: 5% 6% 2.5% 6%;
}

.product_box:before {
    display: none;
}

.product_box_shadow {
    right: -46%;
}

.product_shadow {
    margin-top: 53px;
}

.product_date_box.lineheight2 {
    line-height: initial;
}

.lineheight2 .product_date {
    position: initial;
    line-height: initial;
}

.lineheight2 .product_date:before {
    height: 100%;
    top: 0;
}

.fav_btn {
    margin-top: 5.9em;
}

.lineheight2 .fav_btn.compare_0:before, .lineheight2 .fav_btn.compare_1:before {
    top: 0.15em;
}

.product_button {
    right: 2em;
}

.attractions.product_wrapper {
    padding-top: 15%;
}

.attractions .product {
    width: 100%;
    left: 0%;
}

.attractions .location_wrapper {
    width: 90%;
    margin-left: -15%;
}

.attractions .location_box {
    top: -25.5%;
    left: 85%;
}

.product_video {
    right: -25%;
}

.product_video iframe {
    width: 400px;
    height: 225px;
}

.attractions .food_img_p {
    left: 25%;
}

.attractions .product {
    padding: 13% 0 6% 0;
    background-size: 150%;
}
.attractions .product:before {
    display: none;
}

.attractions .product_content {
    width: 80%;
}

.attractions .product_box {
    background-color: transparent;
    border-width: 0px;
}

.product_boxs {
    background-color: #fff;
    background-size: cover;
    border-radius: 0 80px 0 0;
    padding: 7% 6% 2.5% 6%;
    border-width: 1px;
    border-style: solid;
    border-color: #313131;
}

.attractions .product_line {
    width: 100%;
}

.attractions .fav_btn {
    margin-top: 4.9em;
    right: 1.3em;
}

.attractions .right5em .fav_btn {
    margin-top: 5.5em;
    right: 1.3em;
}

.attractions .lineheight2 .fav_btn.compare_0:before, .attractions .lineheight2 .fav_btn.compare_1:before {
    top: 1em;
}

.attractions .right .location_wrapper {
    margin-left: -15%;
    left: -4%;
    float: none;
}

.attractions .right .product_img_box {
    right: initial;
}

.attractions .right .food_img_p {
    left: 25%;
    right: initial;
}

.right .product_video {
    right: -25%;
    left: initial;
}

.attractions .product_box, .attractions .right .product_box {
    padding: 10.5% 8% 2.5% 9%;
}

.attractions .right .location_box {
    top: -25%;
    left: 95%;
}

.attractions .right .location_box:before {
    -moz-transform: none;
    -webkit-transform: none;
    -o-transform: none;
    transform: none;
    left: -65%;
}

.attractions .product_box_shadow {
    right: 0%;
    bottom: -10%;
}

.attractions .product_button {
    right: 4.5em;
}

.attractions .lineheight2 .product_date {
    position: absolute;
    line-height: 1.5em;
}
}

@media all and (max-width: 768px) {
.topnav_more {
    margin-right: 50px;
}
.nav {
    width: 910px;
}

.nav li {
    width: 300px;
    padding: 4% 0%;
}

.nav_btn {
    width: 240px;
    font-size: 26px;
}

.nav_btn span {
    font-size: 39px;
}

span.letter-spacing-5 {
    font-size: 22px;
}

.scroller_autumn_wrapper {
    height: 180px;
}

.scroller_autumn {
    height: 120px;
}

.scroller_autumn_p {
    top: 38%;
}

.location_wrapper {
    width: 90%;
    margin-left: 5%;
}

.location_box {
    left: 10%;
}

.food_img_p {
    width: 65%;
}

.product {
    padding: 6% 0 8% 0;
    margin-bottom: 9%;
}

.product_shadow {
    margin-top: 60px;
}

.product_content {
    width: 90%;
}

.attractions .location_box {
    left: 100%;
}

.attractions .right .location_box {
    left: 110%;
}

.attractions .location {
    height: 90px;
}

.attractions .location_box:before {
    width: 350px;
}

.product_video {
    right: -30%;
}

.product_video iframe {
    width: 300px;
    height: 165px;
}

.attractions .product_content {
    width: 90%;
    left: 5.5%;
}

.attractions .product_box, .attractions .right .product_box {
    padding: 10.5% 2% 2.5% 2%;
}
}

@media all and (max-width: 680px) {
.food_img_p {
    line-height: 58px;
    font-size: 15px;
}

.scroller_autumn_p {
    top: 42%;
}

.product {
    padding: 6% 0 8% 0;
}

.product_shadow {
    margin-top: 52px;
}

.fav_btn, .lineheight2 .fav_btn {
    margin-top: 5.5em;
}

.product_button {
    right: 1.7em;
}
}

@media all and (max-width: 600px) {
.product_date_box.lineheight2 {
    line-height: 3em;
}

.lineheight2 .product_date {
    position: absolute;
    line-height: 1.5em;
}

.lineheight2 .product_date:before {
    height: 4.1em;
    top: -0.5em;
}

.attractions .lineheight2 .product_date:before {
    height: 3.8em;
    top: -0.4em;
}

.lineheight2 .fav_btn {
    margin-top: 6em;
}

.lineheight2 .fav_btn.compare_0:before, .lineheight2 .fav_btn.compare_1:before {
    top: 0.9em;
}

.attractions .location {
    height: 80px;
}

.attractions .location_box:before {
    width: 280px;
}

.attractions .right .location_box {
    top: -30%;
}
}


/***手機板***/
@media all and (max-width: 550px) {
.japan_icon {
    width: 29%;
    top: 2%;
    left: 4%;
}

.h1 {
    width: 52%;
    top: 9%;
    left: auto;
    right: 9%;
}

.kv_autumn {
    width: 91%;
    margin-top: 132%;
    right: 1.5%;
}

.kv_pc, .kv_pc_img {
    display: none;
}

.kv_m, .kv_m_img {
    display: block;
}

.kv_img_p {
    height: 30px;
    bottom: auto;
    margin-top: 132%;
}

.kv_steam {
    width: 100%;
    margin-top: 30%;
    margin-right: -20%;
}

.swiper-slide {
    height: 95%;
    overflow: hidden;
}

.product {
    background-image: url(../images/paper_m.jpg);
    padding: 8% 0 12% 0;
    margin-bottom: 18%;
    border-radius: 120px 0 0 0;
}

.product:before {
    left: -30%;
    right: auto;
    bottom: -11%;
}

.product:after {
    display: none;
}

.product_shadow {
    width: 614px;
    margin-top: 65px;
    left: 12%;
}

.scroller_autumn_wrapper {
    height: 200px;
}

.scroller_autumn {
    height: 135px;
}

.scroller_h1 {
    width: 55%;
    right: 50%;
    transform: translateX(50%);
}

.scroller_autumn_p {
    width: 80%;
    top: 34%;
    animation: scroller_autumn_p 30s linear infinite;
}

@keyframes scroller_autumn_p{
  0%{
    left: 100%;
  }
  100%{
    left: -90%;
  }
}

.food_img_p {
    line-height: 45px;
}

.right .location_box {
    left: 5%;
}

.location_en {
    height: 25px;
}

.location {
    height: 60px;
}

.food_steam01, .food_steam02 {
    width: 50%;
}

.fav_btn {
    margin-top: 5.2em;
}

.lineheight2 .fav_btn {
    margin-top: 5.8em;
}

.product_button {
    right: 1.2em;
}
}

@media all and (max-width: 440px) {
.kv_img_p {
    height: 28px;
    right: 10%;
}

.topnav_h1 {
    display: none;
}

.topnav {
    margin-left: 30px;
}

.topnav_wrapper {
    padding: 10px 0 5px 0%;
}

.topnav_wrapper .topnav_btn {
    width: 165px;
    font-size: 20px;
}

.topnav_box {
    height: 75px;
}

.topnav_p {
    padding: 0 0 5px 0;
}

.topnav_more {
    top: 16px;
    font-size: 14px;
}

.topnav_more:after {
    font-size: 12px;
}

.topnav_btn span {
    font-size: 30px;
}

span.letter-spacing-5 {
    font-size: 18px;
    letter-spacing: -2px;
}

.topnav_wrapper ul li ul li {
    font-size: 13px;
}

.topnav_wrapper ul li ul li img {
    width: 8px;
}

.topnav_wrapper .product_shadow {
    margin-top: 30px;
    left: -50%;
}

.food_img_p {
    width: 85%;
    font-size: 14px;
    left: 15%;
}

.scroller_autumn_wrapper {
    height: 190px;
}

.scroller_autumn_p {
    top: 42%;
}

.location_box {
    left: 8%;
}

.location {
    height: 50px;
}

.product {
    padding: 8% 0 15% 0;
    margin-bottom: 20%;
    border-radius: 110px 0 0 0;
}

.product:before {
    left: -50%;
}

.product_img_box {
    margin-top: 5px;
}

.attractions .product_img_box {
    margin-top: 25px;
    left: 10%;
}

.product_h1 {
    font-size: 42px;
}

.product_h2 {
    font-size: 21px;
}

.product_h2 br {
    display: none;
}

.product_h3 {
    font-size: 21px;
}

.product_keypoints_h1 {
    font-size: 17px;
}

.product_keypoints {
    font-size: 15px;
}

.product_keypoints_h1:before {
    height: 15px;
    top: 10px;
}

.product_box, .right .product_box {
    padding: 5% 6% 3.5% 6%;
}

.product_date_box {
    font-size: 18px;
}

.product_discount {
    font-size: 17px;
    letter-spacing: 0;
}

.lineheight2 .fav_btn {
    margin-top: 5.9em;
}

.attractions.product_wrapper {
    padding-top: 35%;
}

.attractions .location_box {
    top: -45.5%;
    left: 85%;
}

.attractions .location_wrapper, .attractions .right .location_wrapper {
    width: 125%;
    left: -30%;
}

.attractions .right .location_box {
    top: -45.5%;
    left: 95%;
}

.attractions .product.right {
    margin-top: 35%;
}

.attractions .food_img_p {
    width: 290px;
    height: 35px;
    line-height: 35px;
    left: 30%;
}

.attractions .right .food_img_p {
    left: 30%;
}

.attractions .product_box_shadow {
    width: 514px;
    right: -15%;
    bottom: -15%;
}

.attractions .product_button {
    right: 1.5em;
}

.attractions .product_shadow {
    margin-top: 26px;
    left: -5%;
}

.product_video {
    visibility: hidden;
}

.product_video iframe {
    width: 220px;
    height: 120px;
}

.product_video, .right .product_video {
    right: -15%;
}
}

@media all and (max-width: 420px) {
.product_h1 {
    letter-spacing: 1px;
}

.product_h2 {
    font-size: 20px;
}

.product_h3 {
    font-size: 20px;
}

.product_keypoints_h1 {
    font-size: 16px;
}

.product_keypoints {
    letter-spacing: -1px;
}

.product_shadow {
    margin-top: 63px;
}
}

@media all and (max-width: 400px) {
.kv_img_p {
    height: 26px;
    right: 9%;
}

.food_img_p {
    width: 80%;
    line-height: 40px;
    margin-top: -25%;
    left: 22%;
}

.location_en {
    height: 22px;
}

.location {
    height: 45px;
}

.product {
    padding: 8% 0 17% 0;
}

.product_airport, .product_h2 {
    font-size: 19px;
}

.product_h1 {
    font-size: 39px;
}

.product_h3 {
    font-size: 20px;
}

.product_note {
    font-size: 17px;
}

.product_keypoints_h1 {
    font-size: 16px;
}

.product_keypoints {
    font-size: 14px;
    letter-spacing: -1px;
}

.product_date_box {
    font-size: 16px;
}

.product_discount {
    font-size: 16px;
}

.product_price {
    font-size: 40px;
}

.fav_btn {
    margin-top: 5.4em;
}

.fav_btn.compare_0:before, .fav_btn.compare_1:before {
    top: 0.1em;
}

.fav_btn.compare_0:after, .fav_btn.compare_1:after {
    font-size: 16px;
}

.lineheight2 .fav_btn {
    margin-top: 6.2em;
}

.lineheight2 .fav_btn.compare_0:before, .lineheight2 .fav_btn.compare_1:before {
    top: 0.8em;
}

.product_shadow {
    margin-top: 66px;
}
}

@media all and (max-width: 380px) {
.food_img_p {
    width: 85%;
    left: 18%;
}

.product {
    border-radius: 100px 0 0 0;
}

.product:before {
    left: -55%;
}

.scroller_autumn_p {
        top: 46%;
    }

.location_en {
    height: 20px;
}

.location {
    height: 42px;
}

.product_h1 {
    font-size: 37px;
}

.product_airport, .product_h2 {
    font-size: 18px;
}

.product_h3 {
    font-size: 18px;
}

.product_note {
    font-size: 16px;
}

.product_keypoints li {
    left: 0.8em;
}

.product_keypoints li:before {
    width: 6px;
    height: 6px;
    left: -0.8em;
}

.product_date_box {
    font-size: 15px;
}

.product_price {
    font-size: 38px;
}

.product_price:after {
    font-size: 18px;
}

.product_button {
    width: 120px;
    font-size: 17px;
}

.product_discount {
    font-size: 15px;
}

.fav_btn.compare_0:before, .fav_btn.compare_1:before {
    background-size: 70%;
}

.fav_btn.compare_0:after, .fav_btn.compare_1:after {
    font-size: 15px;
}

.product_shadow {
    margin-top: 64px;
}
}

@media all and (max-width: 360px) {
.product_shadow {
    margin-top: 60px;
}
}

@media all and (max-width: 350px) {
.kv_img_p {
    height: 24px;
}

.product {
    border-radius: 95px 0 0 0;
}

.scroller_autumn_p {
    top: 50%;
}

.product_shadow {
    margin-top: 60px;
}
}