.contentBody {padding-bottom: 0;} #KV {position: relative;} #KV img {width: 100%;} #introMenu {font-size: 0; text-align: center; padding: 20px 0 30px;} #introMenu a {display: inline-block; vertical-align: middle; /*width: 19%;*/ margin:.5% .5%;position: relative; top: 0; transition: top ease 0.3s; position: relative;} #introMenu .imgIcon {width: 60%; padding-bottom: 43%; display: block; margin: auto;} /* #introMenu .imgIcon.sp {background: url(../img/moonfest/btn-mooncake@2x.png) no-repeat center / contain;} */ #introMenu .imgIcon.icon1 {background: url(https://static7.orstatic.com/info/food-mall/assets/img/btn-keto@2x.png) no-repeat center / contain;} #introMenu .imgIcon.icon2 {background: url(https://static7.orstatic.com/info/food-mall/assets/img/btn-homeCook@2x.png) no-repeat center / contain;} #introMenu .imgIcon.icon3 {background: url(https://static7.orstatic.com/info/food-mall/assets/img/btn-health@2x.png) no-repeat center / contain;} #introMenu .imgIcon.icon4 {background: url(https://static5.orstatic.com/info/food-mall/assets/img/btn-snack@2x.png) no-repeat center / contain;} #introMenu .imgIcon.icon5 {background: url(https://static7.orstatic.com/info/food-mall/assets/img/btn-drink@2x.png) no-repeat center / contain;} #introMenu a span {display: block; font-size: 20px; letter-spacing: 1px; color: #555; margin:0.5em 0 1.5em; line-height: 1;font-weight: bold;letter-spacing: 2px;} .banner {position: absolute;bottom: -90px;right: 10px;} /* Quota*/ p.noted{font-size: 18px; line-height: 1.5; padding: 10px; color: #ee0202; border: 3px solid #ee0202; width: 80%; margin:0 auto 2em; font-weight: 800;text-align: center;max-width: 800px;} .en p.noted{font-size: 16px; width: 90%;} @media (max-width:640px) { p.noted{font-size: 15px;padding: 10px 5%; width: 80%;} p.noted >span{display: block;} .en p.noted{font-size: 16px;} } @media (min-width: 769px) { #introMenu > .globalContainer {display: flex;display: -ms-flexbox;display: -webkit-box;display: -webkit-flex;-ms-flex-flow: row nowrap;-webkit-flex-flow: row nowrap;flex-flow: row nowrap;} #introMenu a {-ms-flex: 1 1 0;-webkit-flex: 1 1 0;flex: 1 1 0} #introMenu a:after {content: ''; display: block; position: absolute; height: 80%; border-right: 2px dashed #d0d0d0; top: 15%; right: 0;} #introMenu a:last-child:after{display:none;} #introMenu a.sp:after {content: ''; display: block; position: absolute; height: 80%; border-right: 2px dashed #d0d0d0; top: 15%; right: 0;} } @media (max-width: 768px) { #introMenu {padding: 20px;} #introMenu a {display: inline-block; vertical-align: middle; width: 49%; margin: .5% .5%; border: 2px solid #d7d7d7; border-radius: 3px; text-align: left; position: relative; padding-left: 55px; text-align: center;} #introMenu a:last-child { width: 99%;} #introMenu a .imgIcon {max-width: 50px; position: absolute; left: 7px; top: 0; bottom: 0; margin: auto;} #introMenu a span {line-height: 55px; font-weight: 600; color: #666666; letter-spacing: 2px; margin: 0; font-size: 16px;} #introMenu a.sp {background-color: #ffffff; display: block; width: 99%; text-align: center; padding: 0;} #introMenu a.sp img {position: relative; display: inline-block; vertical-align: middle;max-width: 12%; margin: 0 5% 0 -8%;} #introMenu a.sp span {color: red; /*display: inline-block!important; vertical-align: middle;*/} } @media (max-width: 375px){ /* #introMenu a.sp img {max-width: 15%;} */ } /* pagination */ .swiper-container-horizontal > .swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {bottom: 0px } .swiper-pagination {position: absolute; z-index: 21; transform: translateX(-50%); left: 50% !important; width: 100% !important; display: flex; justify-content: center; align-items: center; } .swiper-pagination-bullet {width: 11px; height: 11px; display: block; border-radius: 10px; background: #062744; opacity: 0.2; transition: all 0.3s; margin: 8px 0;} .swiper-pagination-bullet-active{opacity: 1; background: #089247;height: 11px; width: 30px; box-shadow: 0px 0px 20px rgba(252, 56, 56, 0.3); margin: 0 5px;} /*.swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after, .swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after {display: none; }*/ .section {position: relative; padding: 65px 0;} .section h1 {color: #1a1a1a; font-size: 29px; letter-spacing: 1px; font-weight: 900; margin-bottom: 20px;} .section .globalContainer {position: relative;} .section .ttimg {margin-bottom: 35px;} #section1 {background: url(https://static5.orstatic.com/info/food-mall/assets/img/bg_paper.jpg);} #section1 h1 {margin-bottom: 5px;} #section1 .swiper-container {padding-bottom: 35px;} #section1 .swiper-slide {display: block;background-color:#dddddd;width: auto; padding-bottom: 16.5%;} #section1 .swiper-button-prev, #section1 .swiper-button-next {margin-top: -40px;} /*#section1 .swiper-pagination {bottom: 0!important;} #section1 .swiper-pagination-bullet {border-radius: 0; width: 50px; height: 7px; margin: 0 5px;} #section1 .swiper-pagination-bullet-active {background-color: #089247;}*/ .section .list {position: relative; font-size: 0;} .section .list > a {} #section1 .swiper-slide:before {background-color: black; display: block; position: absolute; content: ""; width: 100%; height: 100%; opacity: 0.4; } #section1 .swiper-slide.swiper-slide-active:before {opacity: 0; } #section1 .swiper-slide .offerBox {opacity: 0;} #section1 .swiper-slide-active .offerBox{opacity: 1;} #section1 .offerBox {background-color: rgb(255 255 255 / 0.8);border-radius: 5px;width: 90%;margin: auto;position: absolute;left: 0;right: 0;bottom: 5%;padding:0.8em 1em;} .offerTitle {font-size: 1.5em; font-weight: bold; color: black; line-height: 1.5; } .POIName {font-size: 1em; color: black; } .priceOffer {text-align: right; font-size: 2em; font-weight: bold; color: green; } .priceOriginal {text-align: right; font-size: 1em; color: red; text-decoration: line-through; } @media (max-width: 768px) { .section {padding: 40px 0;} .section .ttimg {max-width: 180px;} #section1 .swiper-container {padding: 0 20px 25px;} #section1 .swiper-slide {padding-bottom: 70%;} /*#section1 .swiper-pagination-bullet {width: 15px;height: 5px;margin: 0 2px;}*/ #section1 .swiper-button-prev, #section1 .swiper-button-next {display: none;} } #section2 {padding: 80px 0;} #section2 .globalContainer {font-size: 0;} #section2 .ttimg, #section2 .list {display: inline-block; vertical-align: top;} #section2 .ttimg {border: 1px solid #089247; margin: 0; width: 330px; height: 150px; background: url(https://static8.orstatic.com/info/food-mall/assets/img/sectionTitle-hotPick.png) no-repeat center center;background-color: white;} #section2 .list {width: calc(100% - 333px); margin-left: 3px;} #section2 .list {padding: 0 30px; position: relative;} #section2 .swiper-button-prev, #section2 .swiper-button-next {background-color: #089247; width: 27px; height: 100%; top: 0; margin: 0; border-radius: 0;} #section2 .swiper-button-prev:after, #section2 .swiper-button-next:after {color: #fff; font-weight: 600;} #section2 .swiper-button-prev {left: 0px;} #section2 .swiper-button-next {right: 0px;} #section2 .swiper-pagination {display: none;} #section2 .list a {display: inline-block; vertical-align: top; height: 150px; border: 1px solid #e1e1e1; width: 200px; position: relative;background-color: white;} #section2 .list a img {max-width: 85%; margin: auto; display: block; max-height: 85%; position: absolute; left: 0; right: 0; top: 0; bottom: 0;} @media (max-width: 768px) { #section2 {padding: 0;} #section2 .globalContainer {background-color: #e2f7ed; padding: 30px 0 20px;} #section2 .ttimg, #section2 .list {display: block; } #section2 .ttimg {background: url(https://static5.orstatic.com/info/food-mall/assets/img/sectionTitle-hotPick.png) no-repeat center center; width: 180px; height: 65px; border: none; background-size: contain; margin: auto;} #section2 .list {width: 100%; margin: 10px 0 0; padding: 0;} #section2 .list a {border: none; background-color: #fff;} #section2 .swiper-button-prev, #section2 .swiper-button-next {display: none;} #section2 .swiper-container {padding-bottom: 25px;} /*#section2 .swiper-pagination {display: block;bottom: 0!important;} #section2 .swiper-pagination-bullet {border-radius: 0; width: 10px; height: 5px; margin: 0 2px;} #section2 .swiper-pagination-bullet-active {background-color: #089247;}*/ } #section3 {background: url(https://static6.orstatic.com/info/food-mall/assets/img/bg_paper2.jpg);} #section3 .ttimg {margin-bottom: 40px;} #section3 .list a {display: inline-block; vertical-align: top; margin: 0 .5%; width: 24%; background-color: #fff;} #section3 .list a .img {height: 280px;} #section3 .list a .text {padding: 15px 10px 30px;} #section3 .list a .text .brandtt {background-color: #009507; color: #fff; font-size: 14px; line-height: 1.5; padding: 0 10px; border-radius: 2px; margin-bottom: 7px; display: inline-block;} #section3 .list a .text .tt {color: #555; font-size: 18px; line-height: 1.4;} #sectionSP {background-color:white;} #sectionSP.sp_banner{position: relative;padding: 30px 20px 60px;margin-top: -4%;} @media (min-width: 1400px) { /*#section1 .swiper-slide {padding-bottom: 14%;}*/ } @media (min-width: 769px) { body {margin-top: 54px;} #section1 .swiper-button-prev {left: 60px;} #section1 .swiper-button-next {right:60px;} #section2 .list a:hover img, #section1 .swiper-slide:hover img, #section3 .list a:hover .img { transform: scale(0.98);} #introMenu a:hover .imgIcon, #introMenu a:hover.sp img {-webkit-animation: updown 1s infinite alternate; animation: updown 1s infinite alternate; } #section1 .swiper-slide {border-radius: 5px;overflow: hidden;} @-webkit-keyframes updown { 0% { transform: translateY(0); } 100% { transform: translateY(-10px); } } @keyframes updown { 0% { transform: translateY(0); } 100% { transform: translateY(-10px); } } } @media (max-width: 768px) { #section3 .list {padding: 0 20px;} #section3 .list a {display: block; width: 100%; margin: 0 auto 15px; height: 160px!important; font-size: 0;} #section3 .list a .img, #section3 .list a .text {display: inline-block; vertical-align: top; height: 100%;} #section3 .list a .img {width: 40%;} #section3 .list a .text {width: 60%; padding: 15px;} #section3 .list a .text .tt {font-weight: 600; display: block; display: -webkit-box; -webkit-box-orient: vertical; position: relative; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp : 4; max-height : calc(1em * 1.4 * 4); } #sectionSP.sp_banner{padding: 30px;} } @media (max-width: 480px) {#section1 .swiper-slide {min-height: 187px;}} @media (max-width: 375px) {#section1 .swiper-slide {min-height: 167px;}} @media (max-width: 320px) { #introMenu {padding: 10px;} #introMenu a span {font-size: 15px;} #section1 .swiper-slide {min-height: 140px;} }