@charset "utf-8";
/********** quickbuttons **********/
.quickbuttons {right:0; bottom:0; margin-right:24px; margin-bottom:56px;}
.quickbtn {box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1),0 2px 4px rgba(0, 0, 0, 0.06);}
/********** //quickbuttons **********/


/********** mainBAnner **********/
.mainBanner .slide {top: 0; left: 0;object-fit:cover;opacity: 0;transition: opacity 1s ease-in-out;}
.mainBanner .slide.active {opacity: 1;}  
video.slide{width:100dvw !important}
.video-wrapper .video-overlay {top: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); pointer-events: none;}
.bannerBnt { box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);}
.bannerBoxline {border-left:solid 1px #d9dade;}
.banner-modal-overlay {display: none;position: fixed;inset: 0; background: rgba(0,0,0,0.5);z-index: 1000;}
.banner-modal-overlay.active {display: block;}
.banner-modal {position: relative;margin: auto;top: 10%;box-sizing: border-box;display: flex;flex-direction: column;overflow: hidden;}
.banner-modal-close {position: absolute;top: 8px;right: 8px;border: none;background: none;font-size: 1.5rem;cursor: pointer;}
.modal-content {flex: 1;overflow-y: auto;}
.modal-footer .btn-close {cursor: pointer;}
/********** //mainBAnner **********/


/********** about **********/
.about .aboutCnt {top: 50%;left: 50%; transform: translateY(-50%);}  
/********** //about **********/


/********** goofy **********/
.goofy-media {padding-bottom: 56.25%;overflow: hidden;}
.goofy-media video,
.goofy-media img {position: absolute;top: 50%; left: 50%;width: 100%; height: 100%; transform:translate(-50%, -50%)}
.goofy-tabs .tab {display: inline-block;text-decoration: none; border:solid 1px #eeeef0;}
.goofy-tabs .tab.active {background-color: #eeeef0;}
.goofy-media { position: relative; }
.goofySoundBtn {position: absolute;bottom:12px;right: 12px;width: 32px;height: 32px;padding: 0;border: none;border-radius: 50%;background: rgba(255, 255, 255, 1); font-size: 16px;line-height: 1;display: flex;align-items: center;justify-content: center;cursor: pointer;}
/********** //goofy **********/


/********** product slider **********/
.productSlider .swiper-slide{transition: padding 0.3s ease-in-out, height 0.1s ease-in-out,  opacity 0.3s ease-in-out; height:600px!important;}
.productSlider .swiper-slide img{object-fit: cover;}
#productCnt .allPage {color: #b8bac1;}
.productPrevBtn,
.productNextBtn {font-size: 24px; font-weight: 700;}
#productCnt .nowPage,
#productCnt .allPage {font-size: 24px; font-weight: 700;}
/********** //product slider **********/


/********** package **********/
.package-media {position: relative;padding-bottom: 56.25%;overflow: hidden;}
.package-media video,
.package-media img {position: absolute;top: 50%; left: 50%;width: 100%; height: 100%; transform:translate(-50%, -50%)}
.package-tabs .tab {display: inline-block;text-decoration: none; border:solid 1px #eeeef0;}
.package-tabs .tab.active {background-color: #eeeef0;}
/********** //package **********/


/********** subBanner **********/
.subBanner .subBannerCnt {top: 50%;left: 0; transform: translateY(-50%);}  
/********** //subBanner **********/


/********** flower **********/
.flower .flower-posts {display: grid;grid-template-columns: repeat(4, 1fr);gap: 24px;}
.flower .flower-post {background: #fff;box-sizing: border-box;}
.flower .flower-post img {display: block;width: 100%;height: auto;object-fit: cover;}
.flower .flower-post .no-image {width: 100%;height: 0;background: #f0f0f0;}
.flower-modal-overlay {display: none;position: fixed; inset: 0;background: rgba(0,0,0,0.6);z-index: 9999;justify-content: center;align-items: center;}
.flower-modal {overflow: hidden;}
.flower-modal-close {color: #222;position: absolute; top: 12px; right: 16px;background: none; border: none;font-size: 24px; cursor: pointer; z-index: 2;}
.flower-modal-content {flex: 1;overflow-y: auto;}
.flower-modal-header img {object-fit: cover;  }
.flower-modal-body {gap: 40px; }
.flower-modal-body img {width: 80%; object-fit: cover;}
.flower-modal-footer {position: absolute;bottom: 0; left: 0;width: 100%;padding: 16px;background: #fff;border-top: 1px solid #eee;text-align: right;z-index: 1;}
/********** //flower **********/