* { box-sizing: border-box;}
#mktContent { position: relative;}
a{text-decoration: none;}
/*湯泉物語*/
/*版頭*/
header.header{position: relative; height: 711px; background: url(../images/hot-spring-header.jpg) top center no-repeat;}
header.header h1{display: none;}
header.header::after{position: absolute; content:""; height: 711px; background: url(../images/header-fog.png) bottom center no-repeat; bottom: -30px; left:0; width: 100%;}
/*menubar*/
.menu-bar{z-index: 10; position: sticky; width: 100%; max-width: 1200px; top:0px; text-align: center; margin: 0 auto; }
.menu-bar ul{position: absolute; width: 100%; top:0px; border-radius: 0 0 30px 30px;}
.menu-bar ul li{display: inline-block; width: 22%; padding: 15px 0 15px 33px; transition: 0.4s;}
.menu-bar ul li a{position: relative; width: 100%; font: 400 28px/1 '思源黑體','微軟正黑體'; color: #ffffff; }
.menu-bar ul li a::before{position: absolute; left: -50px; top:calc(50% - 18px); transform: scale(0.9);}
.menu-bar ul li:nth-child(1) a::before{content: url(../images/menu1.png); }
.menu-bar ul li:nth-child(2) a::before{content: url(../images/menu2.png);top:calc(50% - 20px);}
.menu-bar ul li:nth-child(3) a::before{content: url(../images/menu3.png);}
.menu-bar ul li:nth-child(4) a::before{content: url(../images/menu4.png);}
.menu-bar ul{background: #ff945e; transition: 0.4s;}
.menu-bar ul li:hover{background: #f17639; transition: 0.4s;}
.menu-bar ul li a br{display: none;}
/*page1&page2*/
h2{ font: 600 42px/1 '思源黑體','微軟正黑體'; padding: 20px 0 50px 0;}
.page1{width: 100%; text-align: center; padding: 100px 0 250px 0;background: url(../images/hot-spring-c23.png) bottom center no-repeat ,linear-gradient(#ffffff,#ffd6b8);}
.page2{position: relative; width: 100%; text-align: center; padding: 0 0 340px 0;background: url(../images/hot-spring-footer.png) bottom center no-repeat ,linear-gradient(#ffffff,#bae9ee);}
.page2::before{position: absolute; content: "";width: 100%; height: 201px; top: -201px; left: 0px; background: url(../images/hot-spring-wave.png) bottom center no-repeat;}

.page1 .banner{position: relative; max-width: 1200px; width: 100%; margin: 30px auto 40px auto; border-radius: 20px; overflow: hidden;}
.page1 .banner::after{position: absolute; content: url(../images/finger.png); bottom:5px; left: 22%; animation: finger 0.6s infinite; }
.page1 .banner img{width: 100%;}
.page1 .group{max-width: 1200px; width: 100%; padding: 20px 0;  margin: 40px auto 0px auto;}
.page2 .group{max-width: 1200px; width: 100%; padding: 20px 0;  margin: 0px auto;}

.page1 .group h2{color: #ff6d25; background: url(../images/hot-spring-h2-1.png) bottom center no-repeat;}
.page2 .group h2{color: #5280ce; background: url(../images/hot-spring-h2-2.png) bottom center no-repeat;}
/*c23頁籤*/
.group-c23{width: 100%; text-align: center; margin: 40px 0 0 0;}
.group-c23 .group-c23-tag{width: 100%; text-align: center;}
.group-c23 .group-c23-tag ul{width: 100%; text-align: center;}

.group-c23 .group-c23-tag ul li{display: inline-block; font: 400 30px/1 '思源黑體','微軟正黑體'; color:#ffffff ; width: 20%; padding: 10px 0; margin: 0 4px; border-radius: 15px 15px 0 0; cursor: pointer;}
.page1 .group-c23 .group-c23-tag ul li{background: linear-gradient(#ff945f,#ff874c);}
.page2 .group-c23 .group-c23-tag ul li{background: linear-gradient(#6f98dd,#5b8cdf);}
.page1 .group-c23 .group-c23-tag ul li.on{color: #ff6d25; background: #ffffff;}
.page2 .group-c23 .group-c23-tag ul li.on{color: #5280ce; background: #ffffff;}
/*c23商品版面*/
.group-c23 .group-c23-pannel{width: 100%; padding: 14px 0; background: #ffffff; border-radius: 20px;}
.group-c23 .group-c23-pannel .group-c23-pannel-content{display: none; }
.group-c23 .group-c23-pannel .group-c23-pannel-content.on{display: block;}

.page1 .carrier li.touch,
.page2 .carrier li.touch{transform: scale(1.01); transition: 0.3s;}
.page1 .carrier li strong,
.page2 .carrier li.touch strong{color: #fa5e10; }
.page1 .carrier li a em.price,
.page2 .carrier li.touch a em.price{ color: #fa5e10; border: #fa5e10 2px solid;}
.page1 .carrier li{ border-bottom: #6f98dd dashed 1px;}

.page1 .carrier li.touch strong,
.page2 .carrier li strong{color: #5280ce; }
.page1 .carrier li.touch a em.price,
.page2 .carrier li a em.price{ color: #5280ce; border: #5280ce 2px solid;}
.page2 .carrier li{ border-bottom: #fa5e10 dashed 1px;}
/*模組共用修改*/
.group-c23 .group-c23-pannel .intro-anchors,
.carrier h4,
.carrier li.box-head{display: none;}

.carrier{font-family: 微軟正黑體, "Microsoft JhengHei", "Apple LiGothic Medium", Arial, Helvetica, sans-serif;}
.carrier li{position: relative; text-align: left; padding: 23px 18% 23px 0px; margin: 0 35px; transition: 0.4s;}
.carrier li:last-child{border: none;}
.carrier li strong{display: block;  font-size:20px; line-height: 1.5; font-weight: bold; padding: 0 0 10px 0; }
.carrier li a{font-size:16px; line-height: 1.3;color: #6d6d6d;}
.carrier li a em.price{display: inline-block; position: absolute; font-size:23px; line-height: 1;text-align:center; right: 0 ; bottom:calc(50% - 22px); width: 16%; border-radius:99em; padding: 5px 0;}
.carrier li a em.price span{font-size: 28px;}

.set-footer-alert{display: none;}

/*手機板*/
@media screen and (max-width:1024px){
    header.header{height: auto; background: none;}
    header.header h1{display: block;}
    header.header h1 img{width: 100%;}
    header.header::after{position: absolute; content:""; height: 176px; background: url(../images/header-fog-m.png) bottom center no-repeat; bottom: -16px; left:0; width: 100%;}
    .page1{padding: 30px 15px 250px 15px; background: url(../images/hot-spring-c23-m.png) bottom center no-repeat ,linear-gradient(#ffffff,#ffd6b8);}
    .page2{background-size: 110% auto;}
    .menu-bar ul li a{font-size: 24px;}
    .menu-bar ul li a::before{transform: scale(0.85);}
    h2{font-size: 38px; background-size: 80%;}
    .page1 .group h2{background-size: 400px auto;}
    .page2 .group h2{background-size: 400px auto;}
    .group-c23 .group-c23-tag ul li{font-size: 26px;}
    .carrier li{padding: 18px 20% 18px 0; margin: 0 28px;}
    .carrier li a em.price{width: 160px;}
}
@media screen and (max-width:780px){
    .page1 .carrier li{padding: 40px 0 26px 0; border-color: #ff6d25; }
    .page2 .carrier li{padding: 40px 0 26px 0; border-color: #5280ce; }
    .page1 .carrier li a em.price, .page2 .carrier li.touch a em.price{position: absolute; display: block; width: 145px; color: #ffffff; background: #ff6d25; right: 0; bottom: -21px;}
    .page2 .carrier li a em.price, .page1 .carrier li.touch a em.price{position: absolute; display: block; width: 145px; color: #ffffff; background: #5280ce; right: 0; bottom: -21px;}
    .carrier li a em.price span{font-size: 25px;}
    .menu-bar ul{border-radius: 0 0 20px 20px;}
    .menu-bar ul li a{font-size: 20px;}
    .menu-bar ul li{padding: 12px 0 12px 30px;}
    .menu-bar ul li a::before{transform: scale(0.75);}
    .page1{background-size: 100% auto, auto auto; padding: 30px 15px 200px 15px;}
    .page1 .banner::after{transform: scale(0.7);animation: finger-1 0.6s infinite;}
    .group-c23 .group-c23-tag ul li{margin: 0; width: 24%; font-size:24px; padding: 8px;}
    .page2::before{background: url(../images/hot-spring-wave-m.png) bottom center no-repeat;background-size: 100% auto;}
    .page2 .group{margin: 3px auto;}
    .group-c23 .group-c23-pannel{padding: 0 0 45px 0;}
    .page1 .carrier li:last-child{border-bottom: #ff6d25 dashed 1px;}
    .page2 .carrier li:last-child{border-bottom: #5280ce dashed 1px;}
    .page2{padding: 0 0 180px 0;}
}
@media screen and (max-width:680px){
    .menu-bar ul{overflow: hidden;}
    .menu-bar ul li{width: 24.2%;}
   
}
@media screen and (max-width:585px){
    .page1{padding: 30px 15px 140px 15px;}
    .page2{background-size: 124% auto;}
    .page1 .banner::after{transform: scale(0.5); left: 18%;}
    h2{font-size: 34px; padding: 20px 0 42px 0;}
    .page1 .group h2{background-size: 350px auto;}
    .page2 .group h2{background-size: 350px auto;}
    .group-c23 .group-c23-tag ul li{font-size: 22px;}
    .carrier li strong{font-size: 18px;}
    .carrier li a em.price{font-size: 21px; padding: 3px 0;}
    .carrier li a em.price span{font-size: 23px;}
    .page1 .carrier li a em.price, .page2 .carrier li.touch a em.price{bottom: -17px;}
    .menu-bar ul li a br{display: block;}
    .menu-bar ul li a::before{transform: scale(0.8);}
}
@media screen and (max-width:540px){
    .menu-bar ul{border-radius: 0 0 10px 10px;}
}
@media screen and (max-width:425px){
    header.header{margin-top: 44px;}
    header.header::after{bottom: -2px; background-size: 100% auto;}
    .page1{padding: 0px 10px 100px 10px;}
    .page2 {padding: 0 0 100px 0;}
    h2{font-size: 30px;}
    .page1 .group{padding: 10px 0; margin: 0 auto;}
    .page1 .group h2{background-size: 320px auto;}
    .page2 .group h2{background-size: 320px auto;}
    .page1 .banner{border-radius: 10px; margin: 30px auto 20px auto;}
    .group-c23 .group-c23-tag ul li{font-size: 20px;}
    .page1 .group-c23 .group-c23-tag ul li{width: 30%;}
    .carrier li a{font-size: 14px;}
    .menu-bar ul li{padding: 8px 0;}
    .menu-bar ul li a{font-size:18px; line-height: 1.2;}
    .menu-bar ul li a::before{display: none;}
    
}
@media screen and (max-width:320px){
    .page2{background-size: 133% auto;}
    header.header{margin-top: 51px;}
    .page1 .banner::after{transform: scale(0.3); left: 11%; animation: finger-2 0.6s infinite;}
    .menu-bar ul li{width: 24%;}
    .group-c23 .group-c23-tag ul li{font-size: 18px; width: 21%;}
    
}


/*動畫*/
@keyframes finger{
    0%{bottom: 10px;}
    50%{bottom: 2px;}
    100%{bottom: 10px;}
}
@keyframes finger-1{
    0%{bottom: -8px;}
    50%{bottom: -12px;}
    100%{bottom: -8px;}
}
@keyframes finger-2{
    0%{bottom: -20px;}
    50%{bottom: -25px;}
    100%{bottom: -20px;}
}