/* ++ [HERO SECTION] ++ */
section#hero .inner .df { display: flex; justify-content: center; color: #fff; flex-wrap: wrap; }
section#hero .inner .df .lef { flex: 1 1 460px; display: flex; align-items: center; }
section#hero .inner .df .lef h1 { font-weight: 800; font-size: 54px; line-height: 1; text-transform: uppercase; text-shadow: -1px 1px 1px #333; color: #fff; margin-bottom: 18px; }
section#hero .inner .df .lef p:first-of-type { margin-bottom: 18px; }
section#hero .inner .df .lef .piccert { display: flex; justify-content: center; text-align: center; align-items: center; max-height: 75px; position: absolute; bottom: 0; left: 0; }
section#hero .inner .df .lef .piccert .cert { display: flex; align-items: center; flex: 165px; text-align: center; }
section#hero .inner .df .rig { flex: 1 1 460px; display: flex; align-items: center; }
section#hero .inner .df .rig img { width: 100%; height: auto; }
@media(max-width:1200px) { section#hero .inner .df .lef h1 { margin-top: 45px; } }

section#hero .featurebox { margin: 0 auto; }
section#hero .featurebox .feature { padding: 60px 0; display: grid; gap: 30px; }
section#hero .featurebox .feature-title h1 { word-break: break-word; font-weight: 600; line-height: 1; text-transform: uppercase; color: #333; }
section#hero .featurebox .feature-img img { border-radius: 3px; margin: 0 auto; }
section#hero .featurebox .feature-text p { line-height: 1.6; color: #333; font-weight: 400; }
@media(min-width:1200px) {section#hero  .feature { align-items: center; padding: 45px 0; grid-template-columns: 1fr 1.4fr; grid-template-areas: "feature-title feature-img" "feature-text feature-img"; } .feature-title { grid-area: feature-title; align-self: flex-end; } .feature-img { grid-area: feature-img; } .feature-text { grid-area: feature-text; align-self: flex-start; } }





@media(max-width:900px) {.hideunder900 {display:none !important;}}
@media(max-width:700px) {.hideunder700 {display:none !important;}}
@media(max-width:400px) {.hideunder400 {display:none !important;}}




#smallbenefit {  border-top:1px solid #dfe3eb;  position:relative}
#smallbenefit .ins {  max-width:calc(100% - 36px);  margin:0 auto 18px;  position:absolute;  top:-27px;  left:50%;  -webkit-transform:translateX(-50%);  transform:translateX(-50%)}
#smallbenefit .ins .rw {  display:flex;  flex-direction:row;  justify-content:center;  flex-wrap:wrap;  gap:18px;  width:100%}
#smallbenefit .ins .rw .bx {  display:flex;  flex-direction:row;  justify-content:space-between;  align-items:center;  flex:1 1 150px;  border:1px solid #dfe3eb;  padding:9px 18px;  font-size:14px;  background:#fff;  line-height:1.2;border-radius:9px;}

#smallbenefit .ins .rw .bx:hover {  border: 1px solid #e65300; color:#e65300}




.product-grid {
  display: flex;
  gap: 45px;
  justify-content: center;
  padding: 18px;
  flex-wrap: wrap;
}

.product-box {
  flex: 1 1 345px;
  background-color: #fff;
  border-radius: 9px;
  padding: 18px;
  box-shadow: var(--box-shadow);
  text-align: center;
  border: 2px solid #fff;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor:pointer;
}
.product-box .notice {position:absolute; top:9px; right:9px; font-size:14px;padding:4px 8px;background:#f8f8fc;border-radius:9px;z-index:9; display:none;}
.product-box:hover {  border: 2px dashed var(--orange);}
.product-box:hover .notice {  display:block;;}

.product-box .image-container {  position: relative;  width: 100%;  height: 300px;   overflow: hidden; border-radius: 6px;}

.default-img,
.hover-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: opacity 0.5s ease;
}

.default-img {  opacity: 1;}
.hover-img {  opacity: 0;}
.product-box:hover .default-img {  opacity: 0;}
.product-box:hover .hover-img {  opacity: 1;}
.product-name {  margin: 15px 0 10px;  font-size: 1.5rem;  color: #333;}
.product-price {  font-size: 1.25rem;color: #555;}