change top banner

css/list-style.css

@@ -3,31 +3,13 @@ body {
 }
 
 .sec-00 {
-  height: 295px;
+  background-color: #cacaca;
   -webkit-transition-property: height;
   transition-property: height;
   -webkit-transition-duration: 300ms;
           transition-duration: 300ms;
 }
 
-@media (max-width: 1850px) {
-  .sec-00 {
-    height: 260px;
-  }
-}
-
-@media (max-width: 1550px) {
-  .sec-00 {
-    height: 230px;
-  }
-}
-
-@media (max-width: 1100px) {
-  .sec-00 {
-    height: 200px;
-  }
-}
-
 .sec-00__close {
   position: absolute;
   top: 0;
@@ -56,73 +38,40 @@ body {
 
 .sec-00 .container-fluid {
   background-color: #cacaca;
-  height: 295px;
-}
-
-@media (max-width: 1850px) {
-  .sec-00 .container-fluid {
-    height: 260px;
-  }
-}
-
-@media (max-width: 1550px) {
-  .sec-00 .container-fluid {
-    height: 230px;
-  }
-}
-
-@media (max-width: 1100px) {
-  .sec-00 .container-fluid {
-    height: 200px;
-  }
 }
 
 .sec-00__slider {
   margin: 0 auto;
-  width: 70%;
+  width: 100%;
   height: 100%;
-  max-width: 1344px;
+  max-width: 1310px;
+  padding-top: 20px;
+  padding-bottom: 24px;
 }
 
 @media (max-width: 1850px) {
   .sec-00__slider {
-    max-width: 1176px;
+    max-width: 1310px;
   }
 }
 
 @media (max-width: 1550px) {
   .sec-00__slider {
-    max-width: 1010px;
+    max-width: 1310px;
   }
 }
 
 .sec-00__slider .slide-item {
   width: 100%;
-  height: 295px;
-  background-position: center center;
-  background-size: cover;
-  background-repeat: no-repeat;
+  height: 100%;
+  max-width: 1310px;
+  max-height: 300px;
+  -o-object-fit: contain;
+  object-fit: contain;
+  height: 300px;
   cursor: pointer;
 }
 
-@media (max-width: 1850px) {
-  .sec-00__slider .slide-item {
-    height: 260px;
-  }
-}
-
-@media (max-width: 1550px) {
-  .sec-00__slider .slide-item {
-    height: 230px;
-  }
-}
-
-@media (max-width: 1100px) {
-  .sec-00__slider .slide-item {
-    height: 200px;
-  }
-}
-
 .sec-00 .slick-prev:before, .sec-00 .slick-next:before {
   display: none;
 }

css/list-style.scss

@@ -3,84 +3,72 @@ body {
 }
 
 .sec-00 {
-  height: 295px;
-  transition-property: height;
-  transition-duration: 300ms;
-  @media (max-width: 1850px) {
-      height: 260px;
-  }
-  @media (max-width: 1550px) {
-      height: 230px;
-  }
-  @media (max-width: 1100px) {
-      height: 200px;
-  }
-  &__close {
-      position: absolute;
-      top: 0;
-      right: 20px;
-      width: 50px;
-      height: 30px;
-      background-color: hsla(0,0%,100%,.66);
-      border-radius: 0 0 50px 50px;
-      color: #888;
-      border: none;
-      outline: none;
-      font-size: 11px;
-      box-shadow: 0 0 10px rgba(32, 32, 32, 0.25);
-      line-height: 12px;
-  }
-  &.bannerClose {
-      height: 0;
-      overflow: hidden;
-      transition-property: height;
-      transition-duration: 300ms;
-  }
-  .container-fluid {
-      background-color: rgb(202, 202, 202);
-      height: 295px;
-      @media (max-width: 1850px) {
-          height: 260px;
-      }
-      @media (max-width: 1550px) {
-          height: 230px;
-      }
-      @media (max-width: 1100px) {
-          height: 200px;
-      }
-  }
-  &__slider {
-      margin: 0 auto;
-      width: 70%;
-      height: 100%;
-      max-width: 1344px;
-      @media (max-width: 1850px) {
-          max-width: 1176px;
-      }
-      @media (max-width: 1550px) {
-          max-width: 1010px;
-      }
-      .slide-item {
-          width: 100%;
-          height: 295px;
-          background-position: center center;
-          background-size: cover;
-          background-repeat: no-repeat;
-          cursor: pointer;
-          @media (max-width: 1850px) {
-              height: 260px;
-          }
-          @media (max-width: 1550px) {
-              height: 230px;
-          }
-          @media (max-width: 1100px) {
-              height: 200px;
-          }
-      }
-  }
-  .slick-prev:before, .slick-next:before {
-      display: none;
-  }
+    background-color: rgb(202, 202, 202);
+    transition-property: height;
+    transition-duration: 300ms;
+    
+    &__close {
+        position: absolute;
+        top: 0;
+        right: 20px;
+        width: 50px;
+        height: 30px;
+        background-color: hsla(0,0%,100%,.66);
+        border-radius: 0 0 50px 50px;
+        color: #888;
+        border: none;
+        outline: none;
+        font-size: 11px;
+        box-shadow: 0 0 10px rgba(32, 32, 32, 0.25);
+        line-height: 12px;
+    }
+    &.bannerClose {
+        height: 0;
+        overflow: hidden;
+        transition-property: height;
+        transition-duration: 300ms;
+    }
+    .container-fluid {
+        background-color: rgb(202, 202, 202);
+        // height: 295px;
+        // @media (max-width: 1850px) {
+        //     height: 260px;
+        // }
+        // @media (max-width: 1550px) {
+        //     height: 230px;
+        // }
+        // @media (max-width: 1100px) {
+        //     height: 200px;
+        // }
+    }
+    &__slider {
+        margin: 0 auto;
+        width: 100%;
+        height: 100%;
+        max-width: 1310px;
+        padding-top: 20px;
+        padding-bottom: 24px;
+        @media (max-width: 1850px) {
+            max-width: 1310px;
+        }
+        @media (max-width: 1550px) {
+            max-width: 1310px;
+        }
+        .slide-item {
+            width: 100%;
+            height: 100%;
+            max-width: 1310px;
+            max-height: 300px;
+            -o-object-fit: contain;
+            object-fit: contain;
+            height: 300px;
+            cursor: pointer;
+            
+        }
+    }
+    .slick-prev:before, .slick-next:before {
+        display: none;
+    }
 }
 
 @-webkit-keyframes slidein {

css/style.css

@@ -3,31 +3,13 @@ body {
 }
 
 .sec-00 {
-  height: 295px;
+  background-color: #cacaca;
   -webkit-transition-property: height;
   transition-property: height;
   -webkit-transition-duration: 300ms;
           transition-duration: 300ms;
 }
 
-@media (max-width: 1850px) {
-  .sec-00 {
-    height: 260px;
-  }
-}
-
-@media (max-width: 1550px) {
-  .sec-00 {
-    height: 230px;
-  }
-}
-
-@media (max-width: 1100px) {
-  .sec-00 {
-    height: 200px;
-  }
-}
-
 .sec-00__close {
   position: absolute;
   top: 0;
@@ -56,73 +38,40 @@ body {
 
 .sec-00 .container-fluid {
   background-color: #cacaca;
-  height: 295px;
-}
-
-@media (max-width: 1850px) {
-  .sec-00 .container-fluid {
-    height: 260px;
-  }
-}
-
-@media (max-width: 1550px) {
-  .sec-00 .container-fluid {
-    height: 230px;
-  }
-}
-
-@media (max-width: 1100px) {
-  .sec-00 .container-fluid {
-    height: 200px;
-  }
 }
 
 .sec-00__slider {
   margin: 0 auto;
-  width: 70%;
+  width: 100%;
   height: 100%;
-  max-width: 1344px;
+  max-width: 1310px;
+  padding-top: 20px;
+  padding-bottom: 24px;
 }
 
 @media (max-width: 1850px) {
   .sec-00__slider {
-    max-width: 1176px;
+    max-width: 1310px;
   }
 }
 
 @media (max-width: 1550px) {
   .sec-00__slider {
-    max-width: 1010px;
+    max-width: 1310px;
   }
 }
 
 .sec-00__slider .slide-item {
   width: 100%;
-  height: 295px;
-  background-position: center center;
-  background-size: cover;
-  background-repeat: no-repeat;
+  height: 100%;
+  max-width: 1310px;
+  max-height: 300px;
+  -o-object-fit: contain;
+  object-fit: contain;
+  height: 300px;
   cursor: pointer;
 }
 
-@media (max-width: 1850px) {
-  .sec-00__slider .slide-item {
-    height: 260px;
-  }
-}
-
-@media (max-width: 1550px) {
-  .sec-00__slider .slide-item {
-    height: 230px;
-  }
-}
-
-@media (max-width: 1100px) {
-  .sec-00__slider .slide-item {
-    height: 200px;
-  }
-}
-
 .sec-00 .slick-prev:before, .sec-00 .slick-next:before {
   display: none;
 }

css/style.scss

@@ -3,18 +3,10 @@ body {
 }
 
 .sec-00 {
-    height: 295px;
+    background-color: rgb(202, 202, 202);
     transition-property: height;
     transition-duration: 300ms;
-    @media (max-width: 1850px) {
-        height: 260px;
-    }
-    @media (max-width: 1550px) {
-        height: 230px;
-    }
-    @media (max-width: 1100px) {
-        height: 200px;
-    }
+    
     &__close {
         position: absolute;
         top: 0;
@@ -38,44 +30,40 @@ body {
     }
     .container-fluid {
         background-color: rgb(202, 202, 202);
-        height: 295px;
-        @media (max-width: 1850px) {
-            height: 260px;
-        }
-        @media (max-width: 1550px) {
-            height: 230px;
-        }
-        @media (max-width: 1100px) {
-            height: 200px;
-        }
+        // height: 295px;
+        // @media (max-width: 1850px) {
+        //     height: 260px;
+        // }
+        // @media (max-width: 1550px) {
+        //     height: 230px;
+        // }
+        // @media (max-width: 1100px) {
+        //     height: 200px;
+        // }
     }
     &__slider {
         margin: 0 auto;
-        width: 70%;
+        width: 100%;
         height: 100%;
-        max-width: 1344px;
+        max-width: 1310px;
+        padding-top: 20px;
+        padding-bottom: 24px;
         @media (max-width: 1850px) {
-            max-width: 1176px;
+            max-width: 1310px;
         }
         @media (max-width: 1550px) {
-            max-width: 1010px;
+            max-width: 1310px;
         }
         .slide-item {
             width: 100%;
-            height: 295px;
-            background-position: center center;
-            background-size: cover;
-            background-repeat: no-repeat;
+            height: 100%;
+            max-width: 1310px;
+            max-height: 300px;
+            -o-object-fit: contain;
+            object-fit: contain;
+            height: 300px;
             cursor: pointer;
-            @media (max-width: 1850px) {
-                height: 260px;
-            }
-            @media (max-width: 1550px) {
-                height: 230px;
-            }
-            @media (max-width: 1100px) {
-                height: 200px;
-            }
+            
         }
     }
     .slick-prev:before, .slick-next:before {

js/index-designer.js

@@ -388,7 +388,7 @@ window.addEventListener('scroll', fixedOnScroll);
 const navbar = document.querySelector('.navbar-main');
     
 function fixedOnScroll() {
-    if(window.pageYOffset >= sticky){
+    if(window.pageYOffset >= 344){
         navbar.classList.add('sticky');
     } else {
         navbar.classList.remove('sticky');

js/index.js

@@ -82,11 +82,11 @@ function renderBannerStr(sec, data) {
     let str = '';
     for(let i = 0; i < data.length; i++){
         if(data[i]['Dwebp'] && !isSafari) {
-            str+= `<div class="${sec}-${i+1} slide-item" onclick="window.open('${data[i]['link']}');" style="background-image: url('${data[i]['Dwebp']}');" data-bg="${data[i]['Dwebp']}"></div>`
+            str+= `<img class="${sec}-${i+1} slide-item" onclick="window.open('${data[i]['link']}');" style="background-image: url('${data[i]['Dwebp']}');" data-bg="${data[i]['Dwebp']}"></img>`
         } else {
-            str+= `<div class="${sec}-${i+1} slide-item" onclick="window.open('${data[i]['link']}');" style="background-image: url('${data[i]['DimgUrl']}');" data-bg="${data[i]['DimgUrl']}"></div>`
+            str+= `<img class="${sec}-${i+1} slide-item" onclick="window.open('${data[i]['link']}');" style="background-image: url('${data[i]['DimgUrl']}');" data-bg="${data[i]['DimgUrl']}"></img>`
         }
-            
+        
     }
     $(`.${sec}`).html(str);
 }
@@ -98,7 +98,7 @@ window.addEventListener('scroll', fixedOnScroll);
 const navbar = document.querySelector('.navbar-main');
     
 function fixedOnScroll() {
-    if(window.pageYOffset >= sticky){
+    if(window.pageYOffset >= 344){
         navbar.classList.add('sticky');
     } else {
         navbar.classList.remove('sticky');