@charset "utf-8";

:root {
  --article-padding: var(--padding-15);
  /* --article-spacing: var(--padding-15); */
  --header-spacing: calc(var(--header-lnb-margin) + var(--header-lnb-button-size));
  --header-lnb-margin: var(--padding-15);
}

@media screen and (min-width: 661px) {
  :root {
    --standard-size: calc(var(--standard-scale) + 2vw);
  }
}

@media screen and (max-width: 660px) and (min-width: 541px) {
  :root {
    --standard-size: calc(var(--standard-scale) + 2.5vw);
  }
}

@media screen and (max-width: 540px) and (min-width:481px) {
  :root {
    --standard-size: calc(var(--standard-scale) + 3vw);
  }

  .flex>.figure {
    width: var(--padding-80);
  }
}

@media screen and (max-width: 480px) {
  :root {
    --standard-size: calc(var(--standard-scale) + 3.5vw);
  }
}

::-webkit-scrollbar,
::-webkit-scrollbar-track {
  width: var(--padding-3);
  height: var(--padding-3);
}

::-webkit-scrollbar-thumb {
  border-radius: var(--padding-3);
}

.mobile {
  display: inherit !important;
}

.flex-m,
.mobile.flex {
  display: flex !important;
}

.grid-m,
.mobile.grid {
  display: grid !important;
}

.inline-m,
.mobile.inline {
  display: inline !important;
}

.block-m {
  display: block !important;
}

.static-m {
  position: static !important;
}

.absolute-m {
  position: absolute !important;
}

.fixed-m {
  position: fixed !important;
}

.relative-m {
  position: relative !important;
}


article.fixed,
article.absolute {
  position: static;
}

.textAlignCenter-m {
  text-align: center;
}

.textAlignLeft-m {
  text-align: left;
}

.textAlignRight-m {
  text-align: right;
}

.flex.column-m {
  flex-direction: column;
}

.flex.input-m {
  gap: var(--input-spacing);
}

.flex.vTop-m {
  align-items: flex-start;
}

.flex.vCenter-m {
  align-items: center;
}

.flex.vBottom-m {
  align-items: flex-end;
}

.flex.spaceBetween-m {
  justify-content: space-between;
}

.flex.left-m {
  justify-content: flex-start;
}

.flex.right-m {
  justify-content: flex-end;
}

.flex.center-m {
  justify-content: center;
}

.buttonDesign.full-m {
  width: 100%;
}

[style*='--font-size-m:'] {
  font-size: calc(1em * (var(--font-size-m)/16)) !important;
}

[style*='--opacity-m:'] {
  opacity: var(--opacity-m) !important;
}

[style*='--border-width-m:'] {
  border-width: calc(1rem * var(--border-width-m) / 16) !important;
}

[style*='--border-top-width-m:'] {
  border-top-width: calc(1rem * var(--border-top-width-m) / 16) !important;
}

[style*='--border-bottom-width-m:'] {
  border-bottom-width: calc(1rem * var(--border-bottom-width-m) / 16) !important;
}

[style*='--border-left-width-m:'] {
  border-left-width: calc(1rem * var(--border-left-width-m) / 16) !important;
}

[style*='--border-right-width-m:'] {
  border-right-width: calc(1rem * var(--border-right-width-m) / 16) !important;
}

[style*='--padding-m:'] {
  padding: calc(1rem * var(--padding-m) / 16) !important;
}

[style*='--padding-top-m:'] {
  padding-top: calc(1rem * var(--padding-top-m) / 16) !important;
}

[style*='--padding-bottom-m:'] {
  padding-bottom: calc(1rem * var(--padding-bottom-m) / 16) !important;
}

[style*='--padding-left-m:'] {
  padding-left: calc(1rem * var(--padding-left-m) / 16) !important;
}

[style*='--padding-right-m:'] {
  padding-right: calc(1rem * var(--padding-right-m) / 16) !important;
}

[style*='--margin-m:'] {
  margin: calc(1rem * var(--margin-m) / 16) !important;
}

[style*='--margin-top-m:'] {
  margin-top: calc(1rem * var(--margin-top-m) / 16) !important;
}

[style*='--margin-bottom-m:'] {
  margin-bottom: calc(1rem * var(--margin-bottom-m) / 16) !important;
}

[style*='--margin-left-m:'] {
  margin-left: calc(1rem * var(--margin-left-m) / 16) !important;
}

[style*='--margin-right-m:'] {
  margin-right: calc(1rem * var(--margin-right-m) / 16) !important;
}

[style*='--width-m:'] {
  width: calc(1rem * var(--width-m) / 16) !important;
}

[style*='--height-m:'] {
  height: calc(1rem * var(--height-m) / 16) !important;
}

[style*='--width-m-org:'] {
  width: var(--width-m-org) !important;
}

[style*='--min-width-m:'] {
  min-width: calc(1rem * var(--min-width-m) / 16) !important;
}

[style*='--height-m-org:'] {
  height: var(--height-m-org) !important;
}

[style*='--min-height-m-org:'] {
  min-height: var(--min-height-m-org) !important;
}

[style*='--max-height-m-org:'] {
  max-height: var(--max-height-m-org) !important;
}

[style*='--max-width-m:'] {
  max-width: calc(1rem * var(--max-width-m) / 16) !important;
}

[style*='--gap-m:'] {
  gap: calc(1rem * (var(--gap-m)/16)) !important;
}

[style*='--column-gap-m:'] {
  column-gap: calc(1rem * (var(--column-gap-m)/16)) !important;
}

[style*='--row-gap-m:'] {
  row-gap: calc(1rem * (var(--row-gap-m)/16)) !important;
}

[style*='--order-m:'] {
  order: var(--order-m) !important;
}

.masonry {
  column-count: var(--column-count-m);
}

.commonFoot .contain .leftRight {
  flex-direction: column-reverse;
}

.rowReverse-m {
  flex-direction: row-reverse;
}

.row-m {
  flex-direction: row;
}

.columnReverse-m {
  flex-direction: column-reverse;
}

.column-m {
  flex-direction: column;
}

.grid {
  grid-column-gap: 0;
}

.grid[class*='template-columns'] {
  grid-column-gap: var(--article-padding);
  grid-row-gap: var(--article-padding);
}



.grid.template-columns-30-m {
  grid-template-columns: repeat(30, 1fr);
}

.grid.template-columns-29-m {
  grid-template-columns: repeat(29, 1fr);
}

.grid.template-columns-28-m {
  grid-template-columns: repeat(28, 1fr);
}

.grid.template-columns-27-m {
  grid-template-columns: repeat(27, 1fr);
}

.grid.template-columns-26-m {
  grid-template-columns: repeat(26, 1fr);
}

.grid.template-columns-25-m {
  grid-template-columns: repeat(25, 1fr);
}

.grid.template-columns-24-m {
  grid-template-columns: repeat(24, 1fr);
}

.grid.template-columns-23-m {
  grid-template-columns: repeat(23, 1fr);
}

.grid.template-columns-22-m {
  grid-template-columns: repeat(22, 1fr);
}

.grid.template-columns-21-m {
  grid-template-columns: repeat(21, 1fr);
}

.grid.template-columns-20-m {
  grid-template-columns: repeat(20, 1fr);
}

.grid.template-columns-19-m {
  grid-template-columns: repeat(19, 1fr);
}

.grid.template-columns-18-m {
  grid-template-columns: repeat(18, 1fr);
}

.grid.template-columns-17-m {
  grid-template-columns: repeat(17, 1fr);
}

.grid.template-columns-16-m {
  grid-template-columns: repeat(16, 1fr);
}

.grid.template-columns-15-m {
  grid-template-columns: repeat(15, 1fr);
}

.grid.template-columns-14-m {
  grid-template-columns: repeat(14, 1fr);
}

.grid.template-columns-13-m {
  grid-template-columns: repeat(13, 1fr);
}

.grid.template-columns-12-m {
  grid-template-columns: repeat(12, 1fr);
}

.grid.template-columns-11-m {
  grid-template-columns: repeat(11, 1fr);
}

.grid.template-columns-10-m {
  grid-template-columns: repeat(10, 1fr);
}

.grid.template-columns-9-m {
  grid-template-columns: repeat(9, 1fr);
}

.grid.template-columns-8-m {
  grid-template-columns: repeat(8, 1fr);
}

.grid.template-columns-7-m {
  grid-template-columns: repeat(7, 1fr);
}

.grid.template-columns-6-m {
  grid-template-columns: repeat(6, 1fr);
}

.grid.template-columns-5-m {
  grid-template-columns: repeat(5, 1fr);
}

.grid.template-columns-4-m {
  grid-template-columns: repeat(4, 1fr);
}

.grid.template-columns-3-m {
  grid-template-columns: repeat(3, 1fr);
}

.grid.template-columns-2-m {
  grid-template-columns: repeat(2, 1fr);
}

.grid.template-columns-1-m {
  grid-template-columns: repeat(1, 1fr);
}

/* @media screen and (max-width: 540px) { */
.column-30-m {
  grid-column: auto / span 30;
}

.column-29-m {
  grid-column: auto / span 29;
}

.column-28-m {
  grid-column: auto / span 28;
}

.column-27-m {
  grid-column: auto / span 27;
}

.column-26-m {
  grid-column: auto / span 26;
}

.column-25-m {
  grid-column: auto / span 25;
}

.column-24-m {
  grid-column: auto / span 24;
}

.column-23-m {
  grid-column: auto / span 23;
}

.column-22-m {
  grid-column: auto / span 22;
}

.column-21-m {
  grid-column: auto / span 21;
}

.column-20-m {
  grid-column: auto / span 20;
}

.column-19-m {
  grid-column: auto / span 19;
}

.column-18-m {
  grid-column: auto / span 18;
}

.column-17-m {
  grid-column: auto / span 17;
}

.column-16-m {
  grid-column: auto / span 16;
}

.column-15-m {
  grid-column: auto / span 15;
}

.column-14-m {
  grid-column: auto / span 14;
}

.column-13-m {
  grid-column: auto / span 13;
}

.column-12-m {
  grid-column: auto / span 12;
}

.column-11-m {
  grid-column: auto / span 11;
}

.column-10-m {
  grid-column: auto / span 10;
}

.column-9-m {
  grid-column: auto / span 9;
}

.column-8-m {
  grid-column: auto / span 8;
}

.column-7-m {
  grid-column: auto / span 7;
}

.column-6-m {
  grid-column: auto / span 6;
}

.column-5-m {
  grid-column: auto / span 5;
}

.column-4-m {
  grid-column: auto / span 4;
}

.column-3-m {
  grid-column: auto / span 3;
}

.column-2-m {
  grid-column: auto / span 2;
}

.column-1-m {
  grid-column: auto / span 1;
}

.row-30-m {
  grid-row: auto/span 30;
}

.row-29-m {
  grid-row: auto/span 29;
}

.row-28-m {
  grid-row: auto/span 28;
}

.row-27-m {
  grid-row: auto/span 27;
}

.row-26-m {
  grid-row: auto/span 26;
}

.row-25-m {
  grid-row: auto/span 25;
}

.row-24-m {
  grid-row: auto/span 24;
}

.row-23-m {
  grid-row: auto/span 23;
}

.row-22-m {
  grid-row: auto/span 22;
}

.row-21-m {
  grid-row: auto/span 21;
}

.row-20-m {
  grid-row: auto/span 20;
}

.row-19-m {
  grid-row: auto/span 19;
}

.row-18-m {
  grid-row: auto/span 18;
}

.row-17-m {
  grid-row: auto/span 17;
}

.row-16-m {
  grid-row: auto/span 16;
}

.row-15-m {
  grid-row: auto/span 15;
}

.row-14-m {
  grid-row: auto/span 14;
}

.row-13-m {
  grid-row: auto/span 13;
}

.row-12-m {
  grid-row: auto/span 12;
}

.row-11-m {
  grid-row: auto/span 11;
}

.row-10-m {
  grid-row: auto/span 10;
}

.row-9-m {
  grid-row: auto/span 9;
}

.row-8-m {
  grid-row: auto/span 8;
}

.row-7-m {
  grid-row: auto/span 7;
}

.row-6-m {
  grid-row: auto/span 6;
}

.row-5-m {
  grid-row: auto/span 5;
}

.row-4-m {
  grid-row: auto/span 4;
}

.row-3-m {
  grid-row: auto/span 3;
}

.row-2-m {
  grid-row: auto/span 2;
}


/* } */

@media screen and (max-width: 480px) {
  .column-30-480 {
    grid-column: auto / span 30;
  }

  .column-29-480 {
    grid-column: auto / span 29;
  }

  .column-28-480 {
    grid-column: auto / span 28;
  }

  .column-27-480 {
    grid-column: auto / span 27;
  }

  .column-26-480 {
    grid-column: auto / span 26;
  }

  .column-25-480 {
    grid-column: auto / span 25;
  }

  .column-24-480 {
    grid-column: auto / span 24;
  }

  .column-23-480 {
    grid-column: auto / span 23;
  }

  .column-22-480 {
    grid-column: auto / span 22;
  }

  .column-21-480 {
    grid-column: auto / span 21;
  }

  .column-20-480 {
    grid-column: auto / span 20;
  }

  .column-19-480 {
    grid-column: auto / span 19;
  }

  .column-18-480 {
    grid-column: auto / span 18;
  }

  .column-17-480 {
    grid-column: auto / span 17;
  }

  .column-16-480 {
    grid-column: auto / span 16;
  }

  .column-15-480 {
    grid-column: auto / span 15;
  }

  .column-14-480 {
    grid-column: auto / span 14;
  }

  .column-13-480 {
    grid-column: auto / span 13;
  }

  .column-12-480 {
    grid-column: auto / span 12;
  }

  .column-11-480 {
    grid-column: auto / span 11;
  }

  .column-10-480 {
    grid-column: auto / span 10;
  }

  .column-9-480 {
    grid-column: auto / span 9;
  }

  .column-8-480 {
    grid-column: auto / span 8;
  }

  .column-7-480 {
    grid-column: auto / span 7;
  }

  .column-6-480 {
    grid-column: auto / span 6;
  }

  .column-5-480 {
    grid-column: auto / span 5;
  }

  .column-4-480 {
    grid-column: auto / span 4;
  }

  .column-3-480 {
    grid-column: auto / span 3;
  }

  .column-2-480 {
    grid-column: auto / span 2;
  }

  .flex.left-480 {
    justify-content: flex-start;
  }

  .flex.right-480 {
    justify-content: flex-end;
  }

  .flex.center-480 {
    justify-content: center;
  }
}


.figure .fig {
  border-radius: var(--content-radius);
  background-color: var(--background-color);
  border: var(--border);
}

.list>.figCaption {
  padding-top: 0;
}

.rangkingList .list .contain {
  /* grid-column-gap: var(--content-spacing); */
}

.rangkingList .list .contain .txt {
  font-size: var(--normal-font);
}

.articleTitleGroup.spaceBetween {
  flex-direction: column;
  height: auto;
  align-items: flex-start;
}

.articleTitleGroup.spaceBetween .tabList+.tabList {
  margin-top: var(--content-spacing);
}

.select>.selectPop.left-m {
  left: calc(0px - var(--border-width));
  right: auto;
}

.select>.selectPop.right-m {
  left: auto;
  right: calc(0px - var(--border-width));
}

.tabList {
  flex: 1;
}

.tabList.spaceBetween {
  width: 100%;
}

.article.ad .img {
  padding-bottom: 34.722%;
}