/* layout */
#container { margin-top: 115px !important; }
#section, #best-drtune { margin-top: 60px !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: 16px !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;}

/* 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; }


/* 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;
}

/* (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 */
#mainBanner{
  gap: 20px;
  display: flex;
  height: 450px;
}
.banner-swiper {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
#leftBanner{
  width: 782px;
}
#rightBanner{
  width: 278px;
}
.banner-swiper .swiper-slide img, #bottomSlider .swiper-slide img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 8px;
  object-position: center top;
}


/* 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: 12px;
  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: 40px !important;
  height: 40px !important;
  padding: 8px;
  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: 0px !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: #FF5A00;
  filter: brightness(100%);
}
.drtune-slider-buttons button:disabled path,
.article-slider-buttons button:disabled path  {
background-color: transparent;
  color: #FF6F00; 
  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: 8px;
}
#newDrtuneSlider h4, .article-title h4 {
  font-size: 30px;
  font-weight: 600;
  color: var(--color_text_default);
  line-height: 1.4;
}


/* 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;
  border-radius: 12px;
  overflow: hidden;
  height: 100%;
  width: 100%;
}
.new-drtune-thumbnail {
  width: 100%;
  height: 100%;
  display: block;   
  object-fit: cover;
}
.new-drtune-overlay {
  position: absolute;
  top: 0;
  left: 0;
  padding: 20px;
  color: #FFF;
  flex-direction: column;
  justify-content: space-between;
  display: flex;
  height: -webkit-fill-available;
}
#newDrtuneSlider .info, #articleSlider .info {
  display: inline-block;
}
.new-drtune-overlay .category {
  display: inline-flex;
  height: 33px;
  padding: 4px 24px;
  align-items: center;
  color: var(--Black, #222);
  font-size: 14px;
  font-weight: 500;
  border-radius: 50px;
  background: #FFF;
  margin-bottom: 10px;
  width: fit-content;
}

#newDrtuneSlider h5, #articleSlider h5 {
  width: 85%;
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  margin-bottom: 8px;
}
#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: 1120px) {
    #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; }
  #header-container, #header-container > div { height: 60px !important; min-height: 60px !important; padding: 0 12px; }
  #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; }
  #align-center { align-self: center !important; width: 100% !important; }
  #text-center { align-self: center !important; text-align: center !important; width: auto !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: 600; line-height: 1.4; }


  /* main slider */
  #mainBanner { display: flex; height: 100%; flex-direction: column; }
  #leftBanner{ width: 100%; height: 100%;}
  #rightBanner { width: 100%; height: 100%; }
  #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: 50px !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; }
}