.mobile{ display: none;}
@media (max-width: 575px) {
    .desktop{ display: none;}
    .mobile{ display: block;}
}

/*********
BANNER
*********/
/*
.responsive_banner{
    margin: 15px auto;
    width: 1170px;
}
@media (max-width: 1199px) {
    .responsive_banner{
        width: 970px;
    }
}
@media (max-width: 992px) {
    .responsive_banner{
        width: 750px;
    }
}
@media (max-width: 768px) {
    .responsive_banner{
        width: 100%;
        max-width: 750px;
    }
}
*/

.Home section{
    display: block;
    width: 100%;
    height: auto;
    overflow: hidden;
}

.Home .badge-chanel-nav-scroller .nav-scroller-nav{
    overflow-x: hidden;
}
.Home .badge-chanel{
    position: relative;
    margin-bottom: 15px !important;
    margin-left: -15px;
    margin-right: -15px;
    padding-top: 15px;
    padding-bottom: 0;
    overflow: hidden;
}
.Home .badge-chanel > li{
    position: relative;
    width: 14.285%;
    height: 100%;
    padding: 0 15px 40px 15px;
}
.Home .badge-chanel > li a{
    font-size: 1.1em;
    font-weight: 600;
    line-height: 1.2;
    color: #000000;
    transition: all 0.2s ease-in-out;
}
.Home .badge-chanel img{
    width: 100%;
    border-radius: 0;
    transition: all 0.2s ease-in-out;
}
.Home .badge-chanel > li a div{
    height: 34px;
    text-align: center;
    width: 100%;
    margin-top: 4px;
    transition: all 0.2s ease-in-out;
}
.Home .badge-chanel > li:hover a{
    color: #E5A56B;
}
.Home .badge-chanel > li:hover img{
    border-radius: 0;
}

/*
.Home .badge-chanel > li:hover img{
    border: solid 1px;
}
*/
/*
.badge-chanel > li a figure{ position: relative;}
.badge-chanel > li a figure{
    &::before,
    &::after {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      transition: opacity .38s ease-in-out, transform .35s ease-in-out;
      content: '';
      opacity: 0;
      pointer-events: none;
    }
  
    &::before {
      transform: scale3d(0, 1, 1);
      transform-origin: left top;
      border-top: 1px solid #E5A56B;
      border-bottom: 1px solid #E5A56B;
      border-radius: 0.8em;
    }
  
    &::after {
      transform: scale3d(1, 0, 1);
      transform-origin: right top;
      border-right: 1px solid #E5A56B;
      border-left: 1px solid #E5A56B;
      border-radius: 0.8em;
    }
  
    &:hover,
    &:focus {
      &::before,
      &::after {
        transform: scale3d(1, 1, 1);
        opacity: 1;
      }
    }
  }
  */



@media (max-width: 767px) {
    .Home .badge-chanel > li{ width: 110px; }
    .Home .badge-chanel-nav-scroller .nav-scroller-nav{
        overflow-x: auto;
    }
}

/*
provided-book
*/
.Home .provided-book{
    position: relative;
    margin-bottom: 15px !important;
    margin-left: -15px;
    margin-right: -15px;
    padding-top: 15px;
    padding-bottom: 15px;
    overflow: hidden;
}
.Home .provided-book > li{
    position: relative;
    width: 195px;
    height: 150%;
    padding: 0 15px;
}
.Home .provided-book > li a{
    font-size: 1.1em;
    font-weight: 600;
    line-height: 1.2;
    color: #000000;

    display: block;
    position: relative;
    padding-top: 100%;
    border-radius: 15px;
    overflow: hidden;
}
.Home .provided-book img{
    width: auto;
    min-width: 100%;
    height: 100%;
    min-height: 100%;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0,-50%);
    /*width: 100%;*/
}
.Home .provided-book > li a div{
    margin-top: 5px;
    height: 34px;
}
@media (max-width: 991px) {
    .Home .provided-book > li{
        position: relative;
        width: 170px;
        height: 150%;
        padding: 0 15px;
    }
}


/*
not-missed
*/
.Home .not-missed{
    display: block;
    padding: 90px 0 15px 0;
    position: relative;
    overflow: visible;
    margin-bottom: 90px;
    background: rgb(240, 240, 240);
}

.Home .not-missed .h3b a:hover{ color: #ffffff;}
.Home .not-missed::before{
  content: '';
  position: absolute;
  top: 0;
  
  --size: 40px;
  --m: 1.5;
  --p: calc(var(--m)*var(--size));
  --R: calc(var(--size)*sqrt(var(--m)*var(--m) + 1));
  mask:
    radial-gradient(var(--R) at 50% calc(100% - (var(--size) + var(--p))), #000 99%, #0000 101%)
      calc(50% - 2 * var(--size)) 0/calc(4 * var(--size)) 100%,
    radial-gradient(var(--R) at 50% calc(100% + var(--p)), #0000 99%, #000 101%) 
      50% calc(100% - var(--size)) / calc(4 * var(--size)) 100% repeat-x;
   background:linear-gradient(90deg,white,white);
  border: none;
  width: 100%;
  height: 100px;
}

.Home .not-missed::after{
    content: '';
    position: absolute;
    --d : bottom;
    --size: 50px;
    --m: 1.5;
    --p: calc(var(--m)*var(--size));
    --R: calc(var(--size)*sqrt(var(--m)*var(--m) + 1));
  
    width: 100%;
    height: 100px;
    margin: 0;
    bottom: -100px;
  
    mask:
        radial-gradient(var(--R) at left 50% var(--d,top) calc(var(--size) + var(--p)),#000 99%,#0000 101%) 
        calc(50% - 2*var(--size)) 0/calc(4*var(--size)) 100%,
        radial-gradient(var(--R) at left 50% var(--d,top) calc(-1*var(--p)),#0000 99%,#000 101%) 
        left 50% var(--d,top) var(--size)/calc(4*var(--size)) 100% repeat-x;
    /*background:linear-gradient(90deg,rgb(229, 107, 107),rgb(229, 107, 107));*/
    background:linear-gradient(90deg,rgb(240, 240, 240),rgb(240, 240, 240));
}

.Home .not-missed .mod-slider-syncing-type-b .slider-for .slick-slide{
  padding: 10px 10px;
  overflow: visible;
}
.Home .not-missed .mod-slider-syncing-type-b .slider-for .item-box{
    border: none;
    -webkit-box-shadow: 0px 5px 7px 0px rgba(66, 68, 90, 0.14);
    -moz-box-shadow: 0px 5px 7px 0px rgba(66, 68, 90, 0.14);
    box-shadow: 0px 5px 7px 0px rgba(66, 68, 90, 0.14);
}

.Home .not-missed .mod-slider-syncing-type-b .slider-nav .slick-current .img{
  border: solid 4px rgba(255, 255, 255, 1);
  backdrop-filter: blur(5px);
}


.Home .not-missed .mod-slider-syncing-type-b .slider-for .slick-slide{ position: relative;}
.Home .not-missed .mod-slider-syncing-type-b .slider-for .slick-slide::before{
  position: absolute;
  top: 6%;
  left: 2%;
  content: '';
  width: 96%;
  height: 86%;
  background: rgba(0, 0, 0, 0.14);
  border-radius: 15px;
  z-index: 1;
  opacity: 0;
  transition: transform 0.3s ease;
}
.Home .not-missed .mod-slider-syncing-type-b .slider-for .slick-slide:hover::before{
  transform: rotate(3deg);
  opacity: 1;
}
/*
.Home .not-missed .mod-slider-syncing-type-b .slider-for .item-box:hover{ background: #000000;}
.Home .not-missed .mod-slider-syncing-type-b .slider-for .item-box:hover .desc .intro{ color: #ffffff;}
*/
@media (max-width: 575px) {
    .Home .not-missed .mod-slider-syncing-type-b .slider-for .slick-slide::before{ display: none;}
    .Home .not-missed .mod-slider-syncing-type-b .slider-for .item-box:hover{ background: none;}
    .Home .not-missed .mod-slider-syncing-type-b .slider-for .item-box:hover .desc .intro{ color: #5c5c5c;}
}
/*
new-release
*/
/*
.Home .new-release .nav-tabs.tab-style-slide > li:nth-child(1){ min-width: 100px;}
.Home .new-release .nav-tabs.tab-style-slide > li:nth-child(2){ min-width: 100px;}
.Home .new-release .nav-tabs.tab-style-slide > li:nth-child(3){ min-width: 170px;}
.Home .new-release .nav-tabs.tab-style-slide > li:nth-child(4){ min-width: 140px;}
.Home .new-release .nav-tabs.tab-style-slide > li:nth-child(5){ min-width: 170px;}
.Home .new-release .nav-tabs.tab-style-slide > li:nth-child(6){ min-width: 140px;}
.Home .new-release .nav-tabs.tab-style-slide > li:nth-child(7){ min-width: 160px;}
*/
/*
.Home .section-new-release{
    background: #00BCD4;
    -webkit-transform: skew(0deg,-3deg);
    transform: skew(0deg,-3deg);
    padding: 50px 0;
}
.Home .section-new-release .container{
    text-align: center;
  -webkit-transform: skew(0deg,3deg);
  transform: skew(0deg,3deg);
}
*/
.Home .section-new-release{
    background: rgb(240, 240, 240);
    padding-top: 20px;
    padding-bottom: 20px;
}
.Home .section-new-release .mobile{ display: none;}
.Home .new-release-slider-for .intro{
    font-family: Arial, Helvetica, sans-serif;
}

/*
.Home .section-new-release .nav-tabs.tab-style-slide li > a:hover {
	border: none;
	color: #ffffff;
}
.Home .section-new-release .nav-tabs.tab-style-slide .active > a,
.Home .section-new-release .nav-tabs.tab-style-slide .active > a:hover,
.Home .section-new-release .nav-tabs.tab-style-slide .active > a:focus
{
    border: none;
    color: #ffffff;
    background: none;
    border-radius: 50px;
    border: solid 1px #ffffff;
}
*/
.Home .section-new-release .book-item-rectangle-type-1 .inside{
    background: #ffffff;
    border: none;
}

@media (max-width: 575px) {
    .Home .section-new-release .desktop{ display: none;}
    .Home .section-new-release .mobile{ display: block;}

    .Home .mod-slider-syncing-type-a .slider-for .item-box .desc .name-info .cat span{
        /*
        color: #ffffff;
        border: solid 1px #ffffff;
        */
        color: #E5A56B;
        border: solid 1px #E5A56B;
    }
    .Home .mod-slider-syncing-type-a .slider-for .item-box .desc .name-info .projectby{ color: #E5A56B; }
}


/*
latest-updates
*/
.Home .latest-updates .nav-tabs.tab-style-slide > li:nth-child(1){ min-width: 100px;}
.Home .latest-updates .nav-tabs.tab-style-slide > li:nth-child(2){ min-width: 170px;}
.Home .latest-updates .nav-tabs.tab-style-slide > li:nth-child(3){ min-width: 170px;}
.Home .latest-updates .nav-tabs.tab-style-slide > li:nth-child(4){ min-width: 140px;}
.Home .latest-updates .nav-tabs.tab-style-slide > li:nth-child(5){ min-width: 170px;}
.Home .latest-updates .nav-tabs.tab-style-slide > li:nth-child(6){ min-width: 140px;}
.Home .latest-updates .nav-tabs.tab-style-slide > li:nth-child(7){ min-width: 160px;}

.Home #newrelease_story .row{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.Home #newrelease_story .row .col-sm-6{
    float: none !important;
    width: 50%;
    height: 100%;
}


/**/
/*.Home .coupon-list{ display: none;}*/
/*
.container:has(.coupon-list) {
    display: none !important;
}
*/

/* รายตอนที่อ่านอยู่ */
.Home .currently-reading .slide-book-mod{ margin-top: -20px;}
.Home .currently-reading .book-item .btn{
    background: none;
    color: #A8A8A8;
}
.Home .currently-reading .book-item:hover .btn{
    background: #ebebeb;
    border-radius: 1.75rem;
}