fix banner height

css/list-style.css

@@ -62,6 +62,13 @@ body {
   }
 }
 
+@media screen and (max-width: 576px) {
+  .sec-00__slider {
+    max-width: 100%;
+    height: auto;
+  }
+}
+
 .sec-00__slider .slide-item {
   width: 100%;
   height: 100%;
@@ -73,6 +80,29 @@ body {
   cursor: pointer;
 }
 
+@media screen and (max-width: 576px) {
+  .sec-00__slider .slide-item {
+    max-width: 100%;
+    height: auto;
+  }
+}
+
+@media screen and (max-width: 576px) {
+  .sec-00 .slick-next {
+    right: 25px;
+  }
+}
+
+.sec-00 .slick-prev {
+  z-index: 100;
+}
+
+@media screen and (max-width: 576px) {
+  .sec-00 .slick-prev {
+    left: 25px;
+  }
+}
+
 .sec-00 .slick-prev:before, .sec-00 .slick-next:before {
   display: none;
 }
@@ -91,6 +121,13 @@ body {
   background-color: rgba(0, 0, 0, 0.1);
 }
 
+@media screen and (max-width: 576px) {
+  .sec-00__bulletList {
+    width: 100%;
+    left: 0px;
+  }
+}
+
 .sec-00__bullet {
   position: relative;
   width: 100%;

css/list-style.scss

@@ -55,6 +55,10 @@ body {
         @media (max-width: 1550px) {
             max-width: 1310px;
         }
+        @media screen and(max-width:576px) {
+            max-width: 100%;
+            height: auto;
+        }
         .slide-item {
             width: 100%;
             height: 100%;
@@ -64,8 +68,25 @@ body {
             object-fit: contain;
             height: 300px;
             cursor: pointer;
-            
+            @media screen and(max-width:576px) {
+                max-width: 100%;
+                height: auto;
+            }
+        }
+    }
+    .slick-next{
+        @media screen and(max-width:576px) {
+            right:25px;
+           
         }
+     
+    }
+    .slick-prev{
+        z-index: 100;
+        @media screen and(max-width:576px) {
+            left:25px;
+        }
+       
     }
     .slick-prev:before, .slick-next:before {
         display: none;
@@ -79,6 +100,10 @@ body {
         display: flex;
         z-index: 10;
         background-color: rgba(0,0,0,.1);
+        @media screen and(max-width:576px) {
+            width:100%;
+            left: 0px;
+        }
     }
     &__bullet {
         position: relative;

js/index-designer.js

@@ -177,15 +177,28 @@ function renderBullet(data) {
 }
 
 
+// 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>`
+//         } 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>`
+//         }
+            
+//     }
+//     $(`.${sec}`).html(str);
+// }
+
 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 img-fluid" src="${data[i]['Dwebp']}" onclick="window.open('${data[i]['link']}');" data-bg="${data[i]['Dwebp']}">`
         } 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 img-fluid" src="${data[i]['DimgUrl']}" onclick="window.open('${data[i]['link']}');" data-bg="${data[i]['DimgUrl']}">`
         }
-            
+        
     }
     $(`.${sec}`).html(str);
 }