@font-face {
    font-family: lemonmilk;
    src: url(ui/fonts/lemon_milk/LEMONMILK-Regular.otf);
  }

body, html { width: 100%; height: 100%; min-width: 800px; min-height: 600px; padding: 0; margin: 0; background: white; font-family: "Helvetica" ,Helvetica , sans-serif; overflow: hidden;
    overflow: hidden;
    color: #818181;
 }

.mContainer { width: 100%; height: 100%; overflow-y: auto; background-color: #cfd9df; background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%); }
.pageContent { width: 100%; min-height: 100%; margin: 0 auto; }
.contentContainer { width: 100%; height: 100%; }
/*header*/
.mHeader, .mHeaderStatic {width: 100vw; height: 10vh; display: flex; align-items: center; border-bottom: 1px solid #cfd9df; overflow: hidden; }
.mHeaderStatic { position: absolute; z-index: 20; background-color: #cfd9df; }
.mHeaderLogo { width: 12vw; height: auto; float: left; cursor: pointer; margin-left: 10px; }
.mHeaderLogo img { width: auto; height: 7vh; object-fit: cover; }
.mHeaderMenu { width: 100%; height: 9vh; }
/*mheader search*/
.mHeaderMenuSearch { width: 25vw; height: 9vh; float: left; display: flex; align-items: center; }

/*mheader menu items*/
.mHeaderMenuItems { width: 62vw; height: 9vh; float: left; font-size: 1.6vh; }
.mHeaderMenuItemC { width: auto; height: 9vh; float: right; display: flex; align-items: center; }
.mHeaderMenuItem { width: auto; float: left; display: flex; align-items: center; background: #fff; border-radius: 30px; padding: 0.7rem 1rem; cursor: pointer; opacity: .7; margin-left: 4px; }
.mHeaderMenuItem:hover { opacity: 1; }
.mHeaderMenuItem span { float: left; font-size: 2vh; }

/*dynmenu*/
.dynMenuContainer { width: auto; height: auto; padding: 10px 30px 10px 30px; margin-top: 8vh; right: 0; background-color: rgba(255, 255, 255, 0.9); position: absolute; z-index: 21; border-radius: 0 0 0 30px; box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px; }
.dynMenuSelH { width: auto; height: auto;  float: left; text-align: center; margin-top: 10px;}
.dynMenuSelHT { color: white; text-align: center; background-color: black; padding: 10px; border-radius: 30px; color: white; text-align: center;  }
.dynMenuMItem { width: auto; height: auto; float: left; margin-left: 20px; font-size: 1.3vh; margin-top: 10px; }
.dynMenuMItemH { width: auto; height: auto; background-color: black; padding: 10px; border-radius: 30px; color: white; }
.dynMenuItemC { width: auto; height: auto; }
.dynMenuItemCMenuItem { width: auto; height: auto; padding: 8px; border-radius: 30px; background-color: #e2dddd; border: 1px solid #cfd9df; cursor: pointer; margin: 10px 0 0 10px; opacity: .8; float: left; }
.dynMenuItemCMenuItem:hover { opacity: 1; }
/*header end*/

.pageItem, .pageItemSlide { width: 100%; height: auto; }
.pageItem { min-height: 100vh; margin-bottom: 20px; }
.pageItemProdDetail { width: 100%; height: auto; }
.pageItemMid { width: 92vw; height: auto; margin: 20px 0 0 10px; background-color: rgba(255, 255, 255, 0.6); border-radius: 30px; padding: 20px 2vw 20px 20px; }
.pageItemMidH { width: 100%; }
.pageItemMidHIcon { width: 8vh; height: 8vh; border-radius: 4vh; float: left; background-color: #3e3e3e; box-shadow: rgba(0, 0, 0, 0.5) 0px 6px 20px; }
.pageItemMidHIcon span { color: white; font-size: 5vh; margin: 0 auto; }
.pageItemMidHText, .pageItemMidHSubText { width: auto; float: left; margin-left: 20px; font-size: 2.4vh; }
.pageItemMidHSubText { width: 96vw; height: 5vh; font-size: 2.0vh; background-color: rgba(255, 255, 255, 1); margin: 20px 0 0 0; padding: 0 0 0 0; border-radius: 20px 20px 0 0; border-bottom: 1px solid #dfdfdf; }
.pageItemMidHSubTextL { width: 5vh; height: inherit; float: left; background-color: #f3cf6c; }
.pageItemMidHSubTextL span { color: white; font-size: 2.2vh; margin: 0 auto; }
.pageItemMidC { width: 96vw; margin-top: 10px; height: 28vh; background-color: rgba(255, 255, 255, 0.8); border-radius: 0 0 20px 20px; } /* background-image: linear-gradient(to top, #e6d280 0%, #eadba3 100%);*/
.pageItemMidCR { width: 96vw; margin-top: 16px; height: 28vh; background-color: rgba(255, 255, 255, 0.8); border-radius: 20px 20px 20px 20px; }
.pageItemMidCL { width: 10vw; height: 28vh; float: left; box-shadow: rgba(149, 157, 165, 0.8) 0px 8px 24px; position: relative; z-index: 5; } /* border-right: 1px solid #dfdfdf; */
.pageItemMidCLVMID { width: inherit; height: auto; }
.pageItemMidCLIcon { width: 7vh; height: 7vh; border-radius: 3.5vh; margin: 0 auto; background-color: #f3cf6c; }
.pageItemMidCLIcon span { color: white; font-size: 4vh; margin: 0 auto; }
.pageItemMidCLText { width: 96%; height: auto; margin: 10px auto 0 auto; text-align: center; }
.pageItemMidCSlideContainer, .pageItemMidCSlideContainerProdDetail { width: 86vw; height: 28vh; float: right; overflow-y: hidden; position: relative; z-index: 1; }
.pageItemMidCSlideContainerProdDetail { width: 95vw; }
.pageItemMidCSlideContent { width: max-content; display: inline-block; height: inherit; }
.pageItemMidCSlideContentItem, .pageItemMidCSlideContentItemProdDetail { width: 20vw; height: 26vh; border-radius: 10px; overflow: hidden; float: left; margin-left: 16px; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 5px; }
.pageItemMidCSlideContentItemProdDetail { opacity: .9; cursor: pointer; margin: 0 8px 0 8px; }
.pageItemMidCSlideContentItemProdDetail:hover { opacity: 1; }
.pageItemMidCSlideContentItemImg { width: inherit; height: inherit; position: relative; }
.pageItemMidCSlideContentItemImg img { width: 100%; height: 100%; object-fit: cover; }
.pageItemMidCSlideContentItemTI { width: auto; display: inline-block; height: 6vh; position: absolute; z-index: 2; font-family: lemonmilk; background-color: rgba(255, 255, 255, 0.9); bottom: 0; margin-bottom: 10px; overflow: hidden; border-radius: 0 30px 30px 0; cursor: pointer;  }
.pageItemMidCSlideContentItemTC { height: auto; overflow: hidden; float: left; }
.pageItemMidCSlideContentItemT { color: black; font-size: 2vh; padding: 0 6px 0 6px; }
.pageItemMidCSlideContentItemTSub { font-size: 0.8vh; color: #e0a914; padding: 0 6px 0 6px; }
.pageItemMidCSlideContentItemI { width: 3vw; height: 6vh; float: right; display: flex; align-items: center; background-color: black; }
.pageItemMidCSlideContentItemI span { margin: 0 auto; color: white; }
.pageItemMidSlideButtons, .pageItemMidSlideButtonsS { width: 100%; height: auto; position: absolute; z-index: 6; bottom: 0; background-color: black; color: white; }
.pageItemMidSlideButtons span { opacity: .8; cursor: pointer; float: left; margin-left: 8px; font-size: 3.4vh; }
.pageItemMidSlideButtons span:hover { opacity: 1; }
.pageItemMidSlideButtonsS { width: auto; float: left; position: relative; border-radius: 6px; }
.pageItemMidSlideButtonsS span { opacity: .8; cursor: pointer; float: left; font-size: 3.4vh; }
.pageItemMidSlideButtonsS span:hover { opacity: 1; }

/*footer*/
.mFooter { width: 100%; height: 30vh; padding: 10px 0 10px 0; background-color: black;  color: #dfdfdf;}
.mFooterMid { width: 96vw; height: 28vh; margin: 1vh auto; }
.mFooterMidL { width: 25vw; height: inherit; float: left; }
.mFooterMidLIcon { width: auto; height: 8vh; text-align: center; }
.mFooterMidLIcon img { width: inherit; height: inherit; object-fit: cover; }
.mFooterItem { width: 22vw; height: auto; margin-top: 10px; }
.mFooterMidM { width: 24vw; height: inherit; float: left; margin-left: 1vw; }
.mFooterMidPDF { width: 20vw; height: auto; text-align: center; }
.mFooterMidPDF span { font-size: 10vw; color: #BB271A; margin: 0 auto; cursor: pointer;  }
.mFooterMidR { width: 46vw; height: inherit; float: right; }
.mFooterMidR iframe { width: 100%; height: 100%; }

/*subpage*/
.subPageItemMidC, .subPageItemMidCProdDetail { width: 94vw; margin-top: 30px; height: auto; background-color: rgba(255, 255, 255, 0.8); border-radius: 0 0 20px 20px; padding: 1vw; }
.subPageContactItem { width: 90vw; height: auto; margin: 10px auto; padding-bottom: 10px; border-bottom: 1px solid #eeeeee; }
.subPageContactItemL { width: 3vw; height: 3vw; float: left; background-color: #818181; display: flex; align-items: center; color: white; border-radius: 0.75vw; }
.subPageContactItemL span { margin: 0 auto; }
.subPageContactItemR { width: 86vw; height: 3vw; float: right; display: flex; align-items: center; }
.subPageContactItemRText { width: auto; height: auto; overflow: hidden; }

/*proddetail*/
.pdMImg { width: inherit; height: 36vw;}
.pdMImg img { width: 100%; height: 100%; object-fit: contain; }
.subPageItemMidCProdDetail { width: 96vw; padding: 0; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; }

/*showcase*/
.scContainer { width: 100%; height: 70vh; }
.scLeft { width: 35%; height: 100%; float: left; display: flex; align-items: center; }
.scLeftContent { width: 96%; height: 98%; margin: 0 auto; border-radius: 30px 0 30px 30px; overflow: hidden; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; }
.scLeftContentImg { width: 100%; height: 100%; position: relative; }
.scLeftContentImg img { width: 100%; height: 100%; object-fit: cover; position: absolute; z-index: 1; }
.scLeftContentH, .scRightContentH { width: 80%; height: auto; margin: 34px 0 0 30px; color: black; font-weight: 400; font-size: 3vh; position: absolute; z-index: 2; font-family: lemonmilk; }
.scLeftContentCMid { width: 30%; height: 40%; position: absolute; z-index: 2; float: left; top: 50%; transform: translateY(-50%); border-radius: 0 30px 30px 0; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px; }
.scLeftContentCMid img { width: 100%; height: 100%; object-fit: cover; }

.scLeftContentC { width: auto; height: 6vh; position: absolute; z-index: 2; bottom: 0; margin-bottom: 60px; background-color: rgba(255, 255, 255, 0.6); font-size: 2.2vh; color: black; display: flex; align-items: center;
   border-radius: 0 30px 30px 0; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; }
.scLeftContentCText { width: auto; height: 100%; float: left; padding: 4px; display: flex; align-items: center; }
.scLeftContentCLink { width: 6vh; height: 6vh; background-color: black; float: right; margin-left: 4px; border-radius: 30px 0 0 30px; color: white; display: flex; align-items: center; cursor: pointer; opacity: .8; }
.scLeftContentCLink:hover { opacity: 1; }
.scLeftContentCLink span { margin: 0 auto; }

.scRight { width: 63%; height: 100%; float: left; display: flex; align-items: center; }
.scRightContent { width: 100%; height: 98%; font-family: lemonmilk; border-radius: 0 30px 30px 30px; overflow: hidden; }
.scRightContentT { width: 100%; height: 56%; }
.scRightContentTImg { width: 100%; height: 100%; position: relative; }
.scRightContentTImg img { width: 100%; height: 100%; object-fit: cover; }
.scRightContentH { font-size: 2.8vh; }
.scRightContentLink { width: 8vh; height: 8vh; display: flex; align-items: center; background-color: black; bottom: 0; right: 0; margin: 0 10px 10px 0; border-radius: 4vh; position: absolute; z-index: 2; cursor: pointer; opacity: .8; }
.scRightContentLink:hover { opacity: 1; }
.scRightContentLink span { margin: 0 auto; font-size: 3.4vh; color: white; }
.scRightContentB { width: 100%; height: 44%;background-color: #cfd9df; }
.scRightContentBH { width: 100%; height: 18%; }
.scRightContentBT { width: 70%; height: 100%; float: left; display: flex; align-items: center; color: black; }
.scRightContentBSlideButtons { width: auto; height: 100%; float: right; display: flex; align-items: center; }
.scRightContentBSlideButtonsC { width: auto; height: auto; background-color: black; color: white; margin-right: 10px; border-radius: 30px; padding: 0 6px 0 6px; }
.scRightContentBSlideButtonsC span { opacity: .8; cursor: pointer; float: left;}
.scRightContentBSlideButtonsC span:hover { opacity: 1; }
.scRightContentC { width: 100%; height: 82%; overflow-y: hidden; overflow-x: auto;}
.scRightContentCSlide { width: max-content; display: inline-block; height: 100%; }
.scRightContentCSlideItem { width: 30vh; height: 100%; float: left; overflow: hidden; border-radius: 30px; }
.scRightContentCSlideItemImg { width: 100%; height: 100%; position: relative;  }
.scRightContentCSlideItemImg img { width: 100%; height: 100%; object-fit: cover;}
.scRightContentCSlideItemTI { width: 90%; height: 6vh; position: absolute; z-index: 2; background-color: rgba(255, 255, 255, 0.6); bottom: 0; margin-bottom: 10px; overflow: hidden; border-radius: 0 30px 30px 0; cursor: pointer; }
.scRightContentCSlideItemT { width: auto; height: 6vh; float: left; display: flex; align-items: center; color: black; padding-left: 4px; font-size: 1.4vh; }
.scRightContentCSlideItemI { width: 6vh; height: 6vh; float: right; display: flex; align-items: center; background-color: black; }
.scRightContentCSlideItemI span { margin: 0 auto; color: white; }


.ovh { overflow: hidden; }
.haovh { height: auto; overflow: hidden; }
.vmid { display: flex; align-items: center; }
.midCR { border-radius: 20px 20px 20px 20px; }