@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);
  }
}
.mobile {
  display: inherit !important;
}
.mobile.flex {
  display: flex !important;
}
.mobile.grid {
  display: grid !important;
}
.static-m {
  position: static !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 !important;
}
.flex.input-m {
  gap: var(--input-spacing);
}
.flex.vTop-m {
  align-items: flex-start;
  align-items: baseline;
}
.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*='--border-m'] {
  border: var(--border-m) !important;
}
[style*='--border-top-m'] {
  border-top: var(--border-top-m) !important;
}
[style*='--border-bottom-m'] {
  border-bottom: var(--border-bottom-m) !important;
}
[style*='--border-left-m'] {
  border-left: var(--border-left-m) !important;
}
[style*='--border-right-m'] {
  border-right: var(--border-right-m) !important;
}
[style*='--padding-m'] {
  padding: var(--padding-m) !important;
}
[style*='--padding-top-m'] {
  padding-top: var(--padding-top-m) !important;
}
[style*='--padding-bottom-m'] {
  padding-bottom: var(--padding-bottom-m) !important;
}
[style*='--padding-left-m'] {
  padding-left: var(--padding-left-m) !important;
}
[style*='--padding-right-m'] {
  padding-right: var(--padding-right-m) !important;
}
[style*='--margin-m'] {
  margin: var(--margin-m) !important;
}
[style*='--margin-top-m'] {
  margin-top: var(--margin-top-m) !important;
}
[style*='--margin-bottom-m'] {
  margin-bottom: var(--margin-bottom-m) !important;
}
[style*='--margin-left-m'] {
  margin-left: var(--margin-left-m) !important;
}
[style*='--margin-right-m'] {
  margin-right: var(--margin-right-m) !important;
}
[style*='--width-m'] {
  width: var(--width-m)
}
[style*='--max-width-m'] {
  max-width: var(--width-m)
}

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


.commonHead .lnb,
.container,
.commonFoot .contain {
  padding: 0 var(--article-padding);
}
.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);
}

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


.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-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;
  }
  .row-1-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;
}

}


.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 > .selctPop.left-m {
  left: calc(0px - var(--border-width));
  right: auto;
}
.select > .selctPop.right-m {
  left: auto;
  right: calc(0px - var(--border-width));
}
.tabList {
  flex:1;
}
.tabList.spaceBetween {
  width: 100%;
}

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