/* layout */
#container { margin-top: 125px !important; }
#section, #best-drtune { margin-top: 65px !important; }
#sub-section-survey { margin: 70px 0 !important; }
#drtune-banner { margin-top: 60px !important; padding: 80px 0 !important; }
#login-container { margin-top: 115px !important;  }

#space-between { justify-content: space-between !important; }
#drtune-grid-gap { gap: 16px !important; }
#grid-gap { gap: 20px !important; }
#mobile-only, #mobile-category-dropdown, #mobile-narrow-only { display: none; }

.Popup { top: 45% !important; }

#mb-10 { margin-bottom: 10px !important; }
#justify-between {justify-content: space-between !important; }
#text-center { align-self: start !important; width: 100% !important;}
#cursor-pointer:hover {cursor: pointer;}
#text-btn:hover {border-bottom: 1px solid #FF5A00;  border-radius: 0; color: #ff5a00; }
#text-line-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;     
  -webkit-box-orient: vertical;
  overflow: hidden !important;
  text-overflow: ellipsis;       
  word-break: break-all;   
}
#text-line-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;     
  -webkit-box-orient: vertical;
  overflow: hidden !important;
  text-overflow: ellipsis;       
  word-break: break-all;   
}

/* display */
#content-category { display: flex; flex-wrap: wrap; height: max-content !important; justify-content: center; row-gap: 8px !important; }
#drtunes-category, #drtunes-category-mobile {display: flex ; flex-wrap: wrap; height: max-content !important;  row-gap: 8px !important; }
#absolute-top-0 { position: absolute !important; top: 0px; }
#mobile-bottom-dialog { position: absolute !important; bottom: 0px; border-radius: 20px 20px 0 0 !important;}
#absolute-top-0-index-99 { position: absolute !important; top: 0px; z-index: 99 !important;}
#index-0 { z-index: 0 !important; }
#height-auto {height: auto !important}
#community-contents > div, #community-contents img { width: 100%; }

#txt-cut-2 {display: -webkit-box; -webkit-line-clamp: 2;   -webkit-box-orient: vertical; overflow: hidden;  text-overflow: ellipsis; }

/* element */
.radio-info input[type=radio]:checked + label::before {border-color: #FF6A00;}
.radio-info input[type=radio] + label::after  혻{ background-color: #FF6A00; }

/* bottom join us banner */
#sticky-banner {
display: flex;
  width: 100%;
  height: 56px;
  padding: 16px;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 100;
  background: #FF5A00;
  justify-content: center;
  align-items: center;
 text-decoration: none;
}

#sticky-banner span {
color: #FFF;
font-family: Pretendard;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: normal;
}

/*event*/
#text-line {
  text-decoration: line-through; 
}
#countdown-box {
  background: #F2F4F7;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  line-height: normal;
  width: 100%;
  padding: 7px 0;
}
#countdown-box #countdown-timer {
    font-size: 40px;
    font-weight: bold;
    font-family: Montserrat;
}
#align-center, #event-contents{
    align-items: center; 
}
#event-box {
  overflow: hidden !important;
}

#popup-join {
  top: 7% !important;
}

/* article */
#article-editor {
  min-width: 100% !important;
}
#article-contents span[style*="font-size:2.2em"], #article-editor .ql-snow .ql-editor h1 {
  font-size: 24px !important;
  font-weight: 700;
}
#article-contents span[style*="font-size:1.7em"], #article-editor .ql-snow .ql-editor h2 {
  font-size: 23px !important;
  font-weight: 700;
}
#article-contents span[style*="font-size:1.17em"], #article-editor .ql-snow .ql-editor h3 {
  font-size: 21px !important;
  font-weight: 700;
}
#article-contents span[style*="font-size:1em"], #article-editor .ql-snow .ql-editor h4 {
  font-size: 20px !important;
  font-weight: 700;
}
#article-contents span, #article-contents p, #article-contents div, #article-editor .ql-editor p, #article-editor .ql-editor span {
  font-size: 16px;
  line-height: 27px;
}
#article-contents font[size="1"], #article-editor .ql-editor .ql-size-small {
  font-size: 13px !important;
}

#article-contents font[size="4"], #article-editor .ql-editor .ql-size-large {
  font-size: 18px !important;
}
#article-contents font[size="6"], #article-editor .ql-editor .ql-size-huge {
  font-size: 22px !important;
}
#sub-section code {
  margin: 20px 0;
  padding: 24px 24px 0 24px;
  border-radius: 8px;
  width: auto;
  background: #F3F6F9;
  font-size: 16px;
  line-height: 27px;
  display: block;
  letter-spacing: -0.55px;
  font-weight: 500;
}
/* (common) swiper slider */
.swiper-pagination {
  bottom: 10px !important;
}
.swiper-pagination-bullet {
  background: #F2F4F7 !important;
  opacity: 1 !important;
  margin: 0 5px !important;
  transition: background 0.3s;
}

.swiper-pagination-bullet-active {
  border: 1px solid #F2F4F7;
  background: transparent !important;
}
.swiper-button-prev,
.swiper-button-next {
  color: #fff !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 53%;
  top: 54% !important;
  transform: translateY(-50%);
}
.swiper-button-next:after, 
.swiper-button-prev:after {
  font-size: 30px !important;
}
.swiper-button-prev {
  left: 10px;
}
.swiper-button-next {
  right: 10px !important;
}


/* main banner */
#topSlider { /* header top banner */
  height: 40px; 
}
#mainBanner{
  gap: 20px;
  display: flex;
  height: 300px;
}
.banner-swiper {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
#full-widthBanner {
 width: 100%;
 height: 750px;
 margin-top: 110px;
}
#full-widthBanner .slide-container {
     width: 1400px;
    margin: 0 auto;
    height: 100%;
    position: relative;
    z-index: 10;
    pointer-events: none;
    top:0;
}
#full-widthBanner .slide-wrapper a {
      display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
}
#full-widthBanner .slide-wrapper {
 width:100%;
 height: 100%;
position: relative;
}

#full-widthBanner .slide-container .slide-title {
  display: flex;
    flex-direction: column;
    z-index: 9;
    position: absolute;
    top: 65px;
}
#full-widthBanner .slide-container .slide-title h1 {
  font-family: Pretendard;
  font-size: 48px;
  font-weight: 700;
  line-height: 57px;
  margin-bottom:16px;
}
#full-widthBanner .slide-container .slide-title p {
  font-family: Pretendard;
  font-size: 24px;
  font-weight: 400;
  line-height: 32px; /* 133.333% */
}

#full-widthBanner .slide-container .progress-container {
  width: 100%;
  height: 4px;
  background: rgb(28 28 28 / 30%);
  z-index: 10;
 }

#full-widthBanner .slide-container .progress-bar {
  height: 100%;
  width: 0;
  background: #222;
  transition: width 5s linear;
}

#full-widthBanner .slide-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 100px;
  width: 310px;
  pointer-events: auto;
}

#full-widthBanner .slide-counter {
  font-size: 16px;
  white-space: nowrap;
      display: flex;
    align-items: center;
}
#full-widthBanner .slide-counter .current {
  font-weight: 600;
}
#full-widthBanner .slide-counter .current-pd {
  width: 1px;
  height: 10px;
  display: block;
  background-color: #222;
  margin: 0 10px;
}
#full-widthBanner .slide-counter .total {
  font-weight: 400;
}
#full-widthBanner .progress-container {
  flex: 1;
  height: 2px;
  background: rgba(255, 255, 255, 0.3);
}

#full-widthBanner .progress-bar {
  height: 100%;
  width: 0;
  background: #fff;
}

#full-widthBanner .play-pause-btn {
  background: none;
  border: none;
  color: #222;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
}
.slide-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  width: 100%;
}

.loading-logo {
  width: 80px;
  height: auto;
  animation: blink 1.5s ease-in-out infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

#leftBanner{
  width: 782px;
}
#rightBanner{
  width: 278px;
}

.banner-swiper .swiper-slide img, #bottomSlider .swiper-slide img, #topSlider .swiper-slide img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 8px;
  object-position: center top;
}
#full-widthBanner .swiper-slide img {
  object-fit: contain;
}

 /* top slider */
#topSlider .swiper-slide img {
    position: absolute;
    top: 0;
}
#topSlider, #topSlider .swiper-slide img {
  width: 100%;  
  height: 40px;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

  #topSlider .text-banner-content { display: flex; column-gap: 10px; align-items: center; height: 40px; }
  #topSlider .text-banner-content .dday-badge {     border-radius: 34px;
    border: 1px solid rgba(255, 90, 0, 0.90);
    font-family: Pretendard;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    color: rgba(255, 90, 0, 0.90);
    padding: 1px 10px;
    line-height: 20px; }
   #topSlider .text-banner-content .banner-title {color: var(--Black, #222);
    font-family: Pretendard;
    font-size: 16px;
    font-weight: 700;}
   #topSlider .text-banner-content .banner-btn {
    color: #FF5A00;
    font-family: Pretendard;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
   }

/* survey banner */
#bottomSlider, #bottomSlider .swiper-slide img {
  width: 100%;  
  height: 130px;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

#bottomSlider .banner-text {
  position: absolute;
  top: 20px;
  left: 32px;
  color: var(--Black, #222);
  padding: 12px 16px;
  border-radius: 6px;
  font-family: sans-serif;
  max-width: 80%;
}
#bottomSlider .dday-desc-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
#bottomSlider .banner-text h3 {
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 32px;
  margin-bottom: 7px;
}
#bottomSlider .banner-desc {
  display: flex;
  align-items: center;
  gap: 8px;
}
#bottomSlider .banner-text p {
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; 
}

#bottomSlider .banner-text span {
  display: flex;
  padding: 3px 10px 1px 10px;
  justify-content: center;
  align-items: center;
  color: #FF5A00;
  text-align: center;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px;
  border: 1px solid #ff5a00;
  border-radius: 50px;
}

#bottomSlider .swiper-button-prev,
#bottomSlider .swiper-button-next {
  top: 67% !important;
}

#slideCounter {
  position: absolute;
  top: 6px;
  right: 12px;
  font-size: 12px;
  z-index: 1;
  background: rgba(0, 0, 0, 30%);
  border-radius: 20px;
  padding: 5px 9px;
  color: #fff;
  font-weight: 500;
}

#bottomSlider .survey-btn {
  display: inline-flex;
  padding: 6px 21px 6px 22px;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 56%;
  right: 8%;
  z-index: 1;
  color: var(--Black, #222);
  text-align: center;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px;
  background: #fff;
  border-radius: 34px;
}

/* (common) slider button */
.drtune-slider-buttons, .article-slider-buttons {
  position: absolute;
  bottom: -25px;
  right: -10px;
  width: 100px; 
  height: 40px; 
}
.drtune-slider-buttons button, .article-slider-buttons button {
  width: 30px !important;
  height: 30px !important;
  padding: 3px;
  border-radius: 50%;
  border: 2px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FF5A00;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.drtune-prev, .article-prev  {
   left: 22px !important;
}
.drtune-prev svg, .article-prev svg { 
  transform: rotate(180deg);
}
.drtune-slider-buttons button:disabled,
.article-slider-buttons button:disabled  {
  background-color: transparent;
  border-color: #98A2B3;
  filter: brightness(100%);
}
.drtune-slider-buttons button:disabled path,
.article-slider-buttons button:disabled path  {
background-color: transparent;
  color: #98A2B3; 
  cursor: default;
  opacity: 1;
}
.drtune-slider-buttons button::after, .article-slider-buttons button::after {
  display: none; 
}
.new-drtune-title, .article-title {
  position: relative;
    bottom: 0;
    margin-bottom: 20px;
}
.new-drtune-title .category, .article-title .category {
  color: #FF5A00;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px; 
  margin-bottom: 6px;
}
#newDrtuneSlider h4, .article-title h4 {
  font-size: 30px;
  font-weight: 700;
  color: var(--color_text_default);
  line-height: 1.4;
  letter-spacing: -0.8px;
}


/* new udpate drtune slider */
#newDrtuneSlider, #articleSlider {
  width: 100%;
  height: 100%;
  position: relative;
}
#newDrtuneSlider .swiper-wrapper {
  height: 352px;
}
.new-drtune-card {
  display: block;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  height: 100%;
  width: 100%;
  border-radius: 0 !important;
}
.new-drtune-thumbnail {
  width: 100%;
  height: 220px;  /*height: 100%;*/
  display: block;   
  object-fit: cover;
}
.new-drtune-overlay {
  padding: 20px;
  flex-direction: column;
  justify-content: space-between;
  display: flex;
  height: 110px;
}
#newDrtuneSlider .info, #articleSlider .info {
  display: inline-block;
}
.new-drtune-overlay .category {
  display: inline-flex;
  height: 22px;
  padding: 4px 10px;
  align-items: center;
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  background: #222;
  width: fit-content;
  height: auto;
}

#newDrtuneSlider h5, #articleSlider h5 {
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  margin-bottom: 8px;
      display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
    text-overflow: ellipsis;
    word-break: break-all;
}
#newDrtuneSlider .desc, #newDrtuneSlider .speaker, #articleSlider .description  {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}
#articleSlider .link {
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
}

/* article slider */
.article-swiper .swiper-slide {
  border-radius: 10px;
  color: #000;
  padding: 40px 30px;
  min-height: 280px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}


.bg-orange { background: linear-gradient(280deg, #FFDA0A 5.02%, rgba(255, 116, 10, 0.60) 65.56%, #FF740A 104%); }
.bg-green  { background: linear-gradient(280deg, #50F6EE 5.02%, rgba(80, 246, 137, 0.60) 65.56%, #50F689 104%); }
.bg-blue   { background: linear-gradient(280deg, #4D98FB 5.02%, rgba(77, 199, 251, 0.60) 65.56%, #4DC7FB 104%); }
.bg-purple { background: linear-gradient(280deg, #FA7FAC 5.02%, rgba(219, 127, 250, 0.60) 65.56%, #DB7FFA 104%);  }

/* main- best drtune */
#best-drtune #drtune-grid-gap {
  overflow: visible !important;
}
#best-drtune #drtune-grid-gap > div {
  transition: transform 0.4s ease;
} 
#best-drtune #drtune-grid-gap > div:hover {
    transform: translateY(-10%);
}
.main-more { display: none; }

#tab-container {  margin-bottom: 50px !important; }
#mypage-like #tab-container {  margin-bottom: 15px !important; }
#mypage-menu { margin-top: 50px !important; }


/* PC */
@media screen and (max-width: 1430px) {
    #section, #best-drtune, #banner-container, #sub-section  { padding: 0 20px; }
    #drtune-banner {  padding: 80px 20px !important; }
    #sub-section-survey { margin: 50px 0 !important; padding: 0 20px; }
    #desktop-tablet-only { display: flex !important; }
}

/* tablet + mobile*/
@media screen and (max-width: 1024px) {
  #container { margin-top: 94px !important; }
  #section, #best-drtune { margin-top: 45px !important; padding: 0 20px; }
  #drtune-banner { margin-top: 45px !important; padding: 50px 20px !important; }
  #content-category { row-gap: 8px !important; }
}

/* tablet */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  #header-menu > div:nth-child(1) button  {
    margin: 0px 0px 0px !important;
    padding-top: 18px !important;
  }
  #tab-container {  margin-bottom: 35px !important; } 
}



/* mobile common */
@media screen and (max-width: 767px) {
  #mobile-only, #mobile-narrow-only  { display: flex; }
  #desktop-only, #drtunes-category, #desktop-tablet-only { display: none; }
  #flex-column, #pay-column, #inquriy-column, #community-column { flex-direction: column !important; }
  #flex-column > .Group { width: 100% !important; }
  #align-center { align-self: center !important; width: 100% !important; }
  #text-center { align-self: center !important; text-align: center !important; width: auto !important;}
  #text-line-2 { -webkit-line-clamp: 1;}

   /* event */
  #flex-column > .Group #thumbnail-box { min-height: 450px !important; max-height: 100% !important; }
  #event-contents > div, #event-contents > div img { align-self: center !important; width: 100% !important; }
  #event-preview-thumb { width: 100% !important; }
  #main-event {display: -webkit-inline-box; }
  #main-event > div { width: 100% !important; }

  /* layout */
  #container { margin-top: 94px !important; }
  #header-container, #header-container > div { padding: 0;  transition: opacity 0.3s ease, transform 0.3s ease !important; }
  #drtune-grid-gap { grid-template-columns: repeat(2, minmax(0px, 1fr)) !important; }
  #grid-gap { grid-template-columns: repeat(2, minmax(0px, 1fr)) !important; }
  #mobile-menu, #mobile-menu-content, #overlay {height: 100vh !important; max-height: 100vh !important; }
  #z-index-99, #mobile-menu-content { z-index: 99 !important;}
  #popup-container { max-width: 85% !important; min-width: 85% !important; margin: 0 auto !important; }

  #pay-column > div:nth-child(1), #pay-column > div:nth-child(2),
  #inquriy-column > div:nth-child(1), #inquriy-column > div:nth-child(2),
  #community-column > div:nth-child(1), #community-column > div:nth-child(2) { width: 100% !important;}
  #inquriy-column > div:nth-child(1) { flex-direction: column !important;
    align-content: start !important;    margin-bottom: 10px !important;
    row-gap: 6px !important;  }
   #inquriy-column > div:nth-child(1) > div:nth-child(1) {         align-self: start !important;   }
  #pay-column > div:nth-child(2),  #inquriy-column > div:nth-child(2) { justify-content: space-between !important; }

  /* text */
  #newDrtuneSlider h4, .article-title h4 { font-size: 24px; font-weight: 700; line-height: 1.4; letter-spacing: -0.8px;}
  #txt-cut-2 {  -webkit-line-clamp: 1; } 
  #sticky-banner { height: auto; }
  #sticky-banner span { font-size: 14px; width: 100%; text-align: center; }
  #sticky-banner strong { display: block; font-size: 16px;  margin-top: 3px; text-align: center;}

  /* main slider */
  #banner-container { max-height: 100% !important; } 
  #mainBannerDiv { height: 100% !important; } 
  #mainBanner { display: flex; height: 100%; flex-direction: column; }
  #leftBanner{ width: 100%; height: 100%;}
  #rightBanner { width: 100%; height: 100%; }

  #full-widthBanner { height: 490px;}
  #full-widthBanner .slide-container { width: auto; } 
  #full-widthBanner .slide-container .slide-title { top: auto;  bottom: 20px; width: 100%; left: 50%;  transform: translateX(-50%); }
  #full-widthBanner .slide-container .slide-title h1 { text-align: center; font-size: 28px; line-height: 38px; margin-bottom: 0;}
  #full-widthBanner .slide-container .slide-title p {font-size: 14px; text-align: center; }
  
  #topSlider .text-banner-content .dday-badge { display: none; }
  #topSlider .text-banner-content { flex-direction: column;  justify-content: center;  margin-top: 6px;}
  #topSlider .text-banner-content .banner-title {    font-size: 14px; }

  #bottomSlider, #bottomSlider .swiper-slide img { height: 180px; }
  #bottomSlider .banner-text { left: 10px; top:24%; }
  #bottomSlider .banner-text .dday { width: fit-content; font-size: 12px; padding: 2px 10px 0px 10px;}
  #bottomSlider .banner-text h3 { font-size: 16px;  line-height: 18px; margin-bottom: -1px; }
  #bottomSlider .banner-text p { font-size: 14px; line-height: 17px; margin-top: 7px; }
  #bottomSlider .survey-btn { left: 24px; right: 0; width: fit-content; top: 71%; }

  .drtune-slider-buttons button, .article-slider-buttons button { display: none; }
  .main-more {
    display: flex;
    align-items: center;
    color: #ff5a00 !important;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    justify-content: center;
    gap: 4px;
    bottom: 33px;
    position: absolute;
    right: 10px;
  }

  .main-more svg {
    width: 15px;
    height: 15px;
  }

  #drtune-all-button {
    max-width: 90% !important;
    font-size: 18px !important;
    min-height: 56px !important;
  }

  #bottomSlider .dday-desc-wrapper {
    flex-direction: column !important;
    align-items: start !important;
  }

  /* sub page */
  #dropdown-sort {flex-direction: column;
    align-items: center;
    justify-content: center;
    align-self: center;
    width: 100%; 
    row-gap: 33px; }

  #dropdown-sort > div:nth-child(2)  {
      display: flex;
      width: auto;
    }

   #drtune-search-container {
      flex-direction: column;
      width: 100% !important;
      max-width: 100% !important;
      row-gap: 10px !important;
   } 
   #drtune-search-container #search-input, #search-container #search-input{
    min-width: 100% !important; margin-right: 0 !important;
   } 
   #drtune-search-align-container {
    width: 100% !important;
    display: grid;
    grid-template-columns: 1fr 0.1fr;
    gap: 10px;
   } 
   #mobile-category-dropdown, #mobile-category-dropdown > div {
        min-width: -webkit-fill-available !important;
        max-width: fit-content !important;
        display: flex;
   }

   #search-container {
      width: 100% !important;
      column-gap: 10px !important;
      display: grid;
      grid-template-columns: 5fr 1fr;
      min-width: 100% !important;
   }

   #tab-container { height: 30px !important; margin-bottom: 12px !important; }
   #tab-container button { height: 30px !important; max-height: 30px !important; min-height: 30px !important; }
   #mypage-like #tab-container { margin-bottom: 0px !important; }
   #tab-title {  height: 50px; max-height: 50px; min-height:50px; font-size:  16px !important; }

   #article-contents img { width: 100%; }
   #comment-button { width: 100% !important; max-width: 100%; }

   /* community item */
  #community-category { width: 100% !important;  justify-content: space-between !important; margin-bottom: 7px !important; }

  /* mypage */
  #mypage-left { width: 100% !important; max-width: 100% !important;} 
  #mypage-menu { margin-top: 24px !important; }
  #mypage-column { flex-direction: column !important;  row-gap: 30px !important; }
  #mypage-column div:nth-child(1), #mypage-column div:nth-child(2), #mypage-column div:nth-child(3) { width: 100% !important;}
}


@media screen and (max-width: 640px) {
  #grid-gap { grid-template-columns: repeat(1, minmax(0px, 1fr)) !important; }

  #bottomSlider .banner-text .dday { width: fit-content; font-size: 12px; padding: 2px 10px 0px 10px;}
  #bottomSlider .banner-text h3 { font-size: 16px;  line-height: 18px; margin-bottom: 4px; }
  #bottomSlider .banner-text p { font-size: 12px; line-height: 17px; }
  #bottomSlider .survey-btn { left: 24px; right: 0; width: fit-content; top: 71%; }
  #mobile-w-100 { min-width: 100% !important; }
}

@media screen and (min-width: 300px) and (max-width: 510px) {
  #bottomSlider .banner-text { top: 12px; }
}