body{
    direction: rtl;
    background-color: rgb(255, 255, 255);
    /* background-color: rgb(207, 229, 248); */
    font-family: 'Vazir';
    font-weight:normal;
}

@font-face {
    font-family: Vazir;
    src: url('../fonts/Vazir-Bold-FD-WOL.ttf') format('truetype');
}






.header {
    background: #fff;
    height: 100px;
    margin-bottom: -100px;
    position: relative;
    z-index: 210;
  }

.header_inner::after {
clear: both;
content: "";
display: block;
}

.header_inner {
    margin: 0 auto;
    max-width: 1680px;
    position: relative;
    height: 100%;
}

.logo_main {
    height: 100px;
    float: right;
}

.btn_logo img{
    background-position: -1180px -505px;
    height: 74px;
    width: 77px;
    margin: 13px 25px 0 0;
  }

.sta {
    display: flex;
    position: absolute;
    left: 25px;
    top: 34px;
    z-index: 10;
  }

.sta .login {
    background: #fff;
    border: 1px solid #b4b4b4;
    border-radius: 17px;
    color: #838383;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    height: 33px;
    line-height: 33px;
    margin-left: 7px;
    text-align: center;
    vertical-align: top;
    width: 102px;
  }

.sta .btn_search {
margin-left: 18px;
}

.btn_search {
    background: #fff;
    border: 1px solid #b4b4b4;
    border-radius: 17px;
    color: #838383;
    background-position: 0 -1164px;
    cursor: pointer;
    height: 33px;
    width: 33px;
}

.on {
    color: rgb(144, 61, 216);
}

.navigation {
    float: right;
    height: 60px;
    padding: 40px 0 0 10px;
    vertical-align: top;
}

.navigation li {
    float: left;
    padding: 0 10px;
    position: relative;
}

.navigation li a:hover{
color: rgb(144, 61, 216);
}

.navigation li a {
    cursor: pointer;
    display: block;
    font-size: 20px;
    font-weight: 500;
    line-height: 22px;
  }

  a, a:active, a:focus, a:hover {
    text-decoration: none;
  }

  a {
    color: #000;
  }


.container_main{
    min-height: 100%;
    position: relative;
}

.content_main {
    padding: 100px 0;
    position: relative;
  }

.main_banner {
background: #ccc;
height: 492px;
}

.main_banner_inner {
    height: 492px;
    margin: 0 auto;
    position: relative;
    width: 1110px;
}

.main_banner_lst {
    height: 492px;
    position: relative;
    width: 846px;
}




#mainBannerPagination {
    z-index: 2;
}



._largeBanner {
    position: absolute;
    width: 100%;
    opacity: 0; /* Start with banners hidden */
    transition: opacity 3s ease; /* Transition for fading effect */
}

._largeBanner.active {
    opacity: 1; /* Show the active banner */
    z-index: 1;
}

.pic {
    position: absolute;
    right: 0;
    top: 0;
  }

 
.num {
  bottom: 64px;
  column-gap: 6px;
  display: flex;
  right: 26px;
  position: absolute;
  z-index: 20;
}

.main_banner_lst .ico_pg2 {
    background-color: #757575;
    background-repeat: no-repeat;
    cursor: pointer;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    border: 0;
  }

  .main_banner_lst .banner_link {
    height: 416px;
    left: 0;
    position: absolute;
    top: 38px;
    width: 806px;
    background: #000;
    filter: alpha(opacity=0.01);
    font-size: 0;
    opacity: .01;
    z-index: 10;
  }

.num {
    text-align: center;
    margin-top: 10px;
}

.num button {
    margin: 0 1px;
}

.btn_more{
    background: none;
    color: #838383;
    font-size: 16px;
    font-weight: 500;
    line-height: 62px;
    text-align: center;
    width: 120px;
    bottom: 5px;
    position: relative;
}

  .btn_more:hover{
    color: rgb(144, 61, 216);
  }

  .blind {
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    position: absolute;
    width: 1px;
  }


.main_daily_wrap {
    background: #f4f4f4;
}


.daily_tab_wrap {
    background: #fff;
    border-bottom: 1px solid #eaeaea;
    border-top: 1px solid #eaeaea;
    height: 60px;
}

.daily_tab_inner {
    -webkit-box-pack: end;
    -webkit-box-align: center;
    align-items: center;
    justify-content: flex-end;
    margin: 0 auto;
    width: 1110px;
    }


.daily_tab_wrap .bar {
    background: #eaeaea;
    height: 14px;
    margin-right: 42px;
    background: #d6d6d6;
    display: inline-block;
    height: 16px;
    line-height: 999px;
    overflow: hidden;
    vertical-align: top;
    width: 1px;
    }
.daily_tab, .daily_tab_inner {
    display: flex;
    }

.daily_tab .button[aria-selected="true"]{
    background: rgb(144, 61, 216);
    color: #fff;
    position: relative;
    top: -1px;
    }

.daily_tab .button{
    background: none;
    color: #000;
    border: 0;
    cursor: pointer;
    display: inline-block;
    font-size: 19px;
    font-weight: 500;
    height: 60px;
    line-height: 62px;
    text-align: center;
    vertical-align: top;
    width: 120px;
}

.daily_tab .button:hover{
    color: rgb(144, 61, 216);
}


.card_lst::after{
    clear: both;
    content: "";
    display: block;
  }

.main_daily_wrap .card_lst{
padding-bottom: 25px;
padding-top: 18px;
}

.card_lst{
    margin: 0 auto;
    padding-left: 15px;
    width: 1200px;
}

.card_lst li{
    float: right;
    height: 210px;
    margin: 0 15px 15px 0;
    position: relative;
    width: 210px;
}

.card_item {
    cursor: pointer;
    display: block;
    height: 100%;
    width: 100%;
    position: relative; /* Ensure the card item is positioned relative to its children */
}

.card_flipper {
    position: relative;
    width: 100%;
    height: 100%;
}

.card_front, .card_back {
    position: absolute;
    width: 100%;
    height: 100%;
    transition: opacity 0.3s; /* Smooth transition for opacity */
}

.card_front {
    z-index: 10; /* Show front card */
    opacity: 1; /* Fully visible */
}

.card_back {
    z-index: 5; /* Lower z-index to ensure it is behind the front card */
    opacity: 0; /* Initially hidden */
}

.card_item:hover .card_front {
    opacity: 0; /* Fade out front card on hover */
}

.card_item:hover .card_back {
    opacity: 1; /* Fade in back card on hover */
}

/* Other existing styles remain unchanged */
.card_item .info_daily {
    height: 178px;
    right: 18px;
    position: absolute;
    top: 14px;
    width: 157px;
}

.card_item .info_daily .subj {
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    display: -webkit-box;
    font-size: 18px;
    font-weight: 500;
    line-height: 18px;
    overflow: hidden;
    padding-top: 5px;
    text-overflow: ellipsis;
    width: 157px;
}

.card_item .info_daily .grade_area {
    height: 17px;
    margin: 3px -1px 0 0;
}

.grade_area .ico_like3 {
    color: rgb(144, 61, 216);
    margin: 4px 1px 0 2px;
}

.grade_num {
    color: rgb(144, 61, 216);
    display: inline-block;
    font-size: 15px;
    height: 16px;
    line-height: 17px;
    margin-right: 3px;
}

.card_item .genre{
    bottom: 15px;
    right: 18px;
    line-height: 16px;
    position: absolute;
}


.card_genre{
    pointer-events: none;
}

.card_item .info_daily .icon_area {
    -webkit-column-gap: 2px;
    -moz-column-gap: 2px;
    column-gap: 2px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 9px 0 0 -2px;
}

.card_item .card_back.g_drama {
    background:  #00A693; /* Persian Green */
}

.card_item .card_back.g_fantasy {
    background: #6F2C91; /* Persian Purple */
}

.card_item .card_back.g_comedy {
    background: #F2A900; /* Persian Yellow */
}

.card_item .card_back.g_action {
    background: #007BFF; /* Persian Blue */
}

.card_item .card_back.g_daily {
    background: #A7A8D9; /* Persian Light Gray */
}

.card_item .card_back.g_romance {
    background: #D81B60; /* Persian Pink */
}

.card_item .card_back.g_superhero {
    background: #FF5733; /* Persian Coral */
}

.card_item .card_back.g_scifi {
    background: #2D4464; /* Persian Slate Blue */
}

.card_item .card_back.g_horror {
    background: #C0392B; /* Persian Red */
}

.card_item .card_back.g_supernatural {
    background: #8E44AD; /* Persian Lilac */
}

.card_item .card_back.g_mystery {
    background: #34495E; /* Persian Dark Gray */
}

.card_item .card_back.g_sport {
    background: #27AE60; /* Persian Green */
}

.card_item .card_back.g_historical {
    background: #D4AC0D; /* Persian Gold */
}






.card_item .card_back .info_daily {
    color: #fff;
}

.card_item .card_back .info_daily .line {
    background: #fff;
    display: block;
    filter: alpha(opacity=50);
    height: 1px;
    margin: 12px 0 15px;
    opacity: .5;
    width: 16px;
}

.card_item .card_back .info_daily .summary_daily {
    color: #fff;
    font-size: 13px;
    line-height: 15px;
}








.main_hotnew_wrap {
    background: #f4f4f4;
    border-top: 1px solid #e5e5e5;
  }

.main_hotnew {
    height: 362px;
    margin: 0 auto;
    position: relative;
    width: 1300px;
    z-index: 0;
}

.main_hotnew h2 {
    color: #000;
    font-size: 22px;
    font-weight: 500;
    height: 75px;
    line-height: 24px;
    padding-top: 36px;
    text-align: center;
}

.main_hotnew_rolling {
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    width: 1200px;
}

.main_hotnew .ico_prev {
    color: #949393;
    cursor: pointer;
    right: 20px;
    position: absolute;
    top: 192px;
  }

  .ico_prev {
    background-position: -1300px -28px;
    background: none;
    border: none;
    height: 24px;
    width: 15px;
  }

.ico_prev:hover {
    color: rgb(144, 61, 216);
}

  .main_hotnew .paging .num {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    bottom: 40px;
    -webkit-column-gap: 8px;
    -moz-column-gap: 8px;
    column-gap: 8px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 1px;
    justify-content: center;
    right: 0;
    line-height: 1px;
    position: absolute;
    text-align: center;
    width: 100%;
  }

  .ico_pg[aria-current="true"] {
    background-position: -1300px -773px;
    background-color: #464646;
  }

  .ico_pg {
    background-position: -1300px -787px;
    cursor: pointer;
    height: 10px;
    width: 10px;

    background-color: #c2c2c2;
    border-radius: 50%;
    border: 0;
  }

.main_hotnew .ico_next {
    color: #949393;
    cursor: pointer;
    position: absolute;
    left: 20px;
    top: 192px;
}

.ico_next {
    background-position: -1280px -1164px;
    background: none;
    border: none;
    height: 24px;
    width: 15px;
}

.ico_next:hover {
    color: rgb(144, 61, 216);
}


  .card_lst li.card_multi {
    width: 435px;
  }

  .card_lst li.card_multi .info_daily{
    right: 21px;
    width: 393px;
  }

.card_lst li.card_multi .ellipsis_wrap{
    overflow: hidden;
    width: 268px;
}

.card_lst li.card_multi .subj {
    color: #fff;
    font-size: 19px;
    font-weight: 400;
    line-height: 19px;
    width: auto;
  }

.card_lst li.card_multi .card_front .genre{
    bottom: 0px;
    right: 0px;
}

  .card_lst li.card_multi .card_front .summary_daily{
    -webkit-box-orient: vertical;
    color: #fff;
    display: -webkit-box;
    font-size: 13px;
    line-height: 16px;
    margin-top: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .card_lst li.card_multi .card_front .grade_area{
    margin-top: 9px;
  }

  .card_lst li.card_multi:hover .card_front {
    opacity: 0;
}

.card_lst li.card_multi:hover .card_back {
    opacity: 1;
}

.eg-flick-camera {
    position: relative;
    width: 100%;
    height: 100%;
}

._hotAndNewSection {
    position: absolute;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease;
}

._hotAndNewSection.hidden {
    display: none;
}






.main_genre_wrap {
    background: #f4f4f4;
    border-top: 1px solid #e5e5e5;
}

.main_genre {
    height: 566px;
    margin: 0 auto;
    position: relative;
    width: 1200px;
}

.main_genre h2 {
    color: #000;
    font-size: 22px;
    font-weight: 500;
    height: 75px;
    line-height: 24px;
    padding-top: 36px;
    text-align: center;
}

.main_genre .ico_arr1 {
    color: #141414;
    margin: -4px 11px 0 0 ;
    vertical-align: middle;
}

.main_genre .card_item .card_back {
    opacity: 1;
  }

.main_genre .card_item .card_back .info_daily.genre {
    height: 169px;
    left: 21px;
    top: 21px;
    width: 168px;
  }

  .main_genre .card_item .card_back .info_daily.genre strong {
    font-size: 22px;
    font-weight: 500;
    line-height: 25px;
  }

  .main_genre .card_item .card_back .info_daily.genre .ico_arr8 {
    position: absolute;
    left: 0;
    top: 5px;
  }

  .ico_arr8 {
    background-position: -1300px -818px;
    height: 13px;
    width: 7px;
  }

  .main_genre .card_item .card_back .info_daily.genre .dsc {
    bottom: 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    position: absolute;
  }













.ranking_lst.main {
    padding: 53px 0 70px;
}

.ranking_lst {
    margin: 0 auto;
    overflow: hidden;
    width: 1110px;
  }

  .ranking_lst .left_area {
    padding-left: 30px !important; /* Use !important to enforce this rule */
}


.ranking_lst .left_area, .ranking_lst .right_area {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    float: right; /* Keep float for RTL */
    width: 50%;
    padding: 0; /* Remove any padding */
}

.ranking_lst .title_area {
    height: 35px;
    position: relative;
    margin: 0; /* Remove any margin */
    padding: 0; /* Remove any padding */
}

.ranking_lst .title_area h2 a, .ranking_lst .title_area h2 span {
    display: inline-block;
    font-size: 20px;
    font-weight: 500;
    line-height: 22px;
    vertical-align: top;
    margin: 0; /* Remove any margin */
    padding: 0; /* Remove any padding */
}


.ico_arr1 {
    height: 13px;
}

.genre-icon {
    display: none; /* Hide the icon by default */
    width: 16px; /* Set the width of the icon */
    height: 16px; /* Set the height of the icon */
    margin-left: 5px; /* Add some space between the icon and the text */
    /* Add any other styles for the icon */
}

/* Show the icon when the genre is selected */
.selected .genre-icon {
    display: inline-block; /* Show the icon */
}



.ranking_lst .title_area .ico_arr1 {
    margin: 3px 6px 0 0 ;
    bottom: 29px;
    position: absolute;
  }

  .lst_type1 {
    border-bottom: 1px solid #eaeaea;
    margin: 0; /* Remove any margin */
    padding: 0; /* Remove any padding */
}

.lst_type1 li {
    border-top: 1px solid #eaeaea;
    height: 88px;
    position: relative;
    margin: 0; /* Remove any margin */
    padding: 0; /* Remove any padding */
}

.lst_type1 a {
    cursor: pointer;
    display: block;
    height: 100%;
}

.lst_type1 .pic_area::before {
    border: 1px solid rgba(0,0,0,.1);
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 20;
}

.lst_type1 .pic_area {
    bottom: 4px;
    height: 80px;
    position: absolute;
    top: 4px;
    width: 80px;
}

.lst_type1 .num_area {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 88px;
    justify-content: center;
    right: 80px;
    top: 0;
    width: 36px;
}

.lst_type1 .icon_area, .lst_type1 .num_area {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    z-index: 10;
  }

.ico_n1 {
    background-position: -1248px -508px;
    height: 13px;
    width: 7px;
}

.lst_type1 .info_area {
    height: 100%;
    padding: 0 116px 0 23px;
}

.lst_type1 .info_area .genre {
    color: #bbb;
    font-size: 13px;
    line-height: 21px;
    padding-top: 12px;
}

.lst_type1 .info_area .subj {
    font-size: 18px;
    font-weight: 500;
    line-height: 29px;
    margin-top: -15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lst_type1 .info_area .author {
    font-size: 13px;
    line-height: 21px;
    margin-top: -3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.ranking_lst .right_area {
    padding-right: 30px;
  }

  .ranking_lst .title_area .sort_area {
    padding-left: 12px;
    position: absolute;
    left: 0;
    top: 2px;
  }

  .ranking_lst .title_area .sort_area .checked {
    background: none;
    color: #838383;
    cursor: pointer;
    display: inline-block;
    font-size: 16px;
    line-height: 19px;
    padding-right: 24px;
    position: relative;
    vertical-align: top;
    border: none;
  }

  .ranking_lst .title_area .sort_area .checked .ico_chk {
    position: absolute;
    right: 0;
    top: 1px;
  }

  .ico_chk, .ico_chk2 {
    background-repeat: no-repeat;
    height: 11px;
    width: 12px;
  }

  .ranking_lst .title_area .sort_box a {
    color: #838383;
    cursor: pointer;
    display: block;
    font-size: 16px;
    height: 23px;
    line-height: 19px;
    padding-top: 10px;
  }

  .ranking_lst .title_area .sort_box li {
    height: 33px;
    padding-right: 35px;
    position: relative;
    text-align: right;
  }

.ranking_lst .title_area .sort_box {
    background: #fff;
    border: 1px solid #ddd;
    display: none;
    padding: 9px 0 11px;
    position: absolute;
    left: 0;
    top: -20px;
    width: 188px;
    z-index: 10;
}

.ranking_lst .title_area .sort_box.on {
    display: block;
}












#footer {
    background: #f5f5f5;
    border-top: 1px solid #e5e5e5;
    /* margin-top: -406px; */
    min-height: 250px;
    position: relative;
}

.notice_area {
    background: #f5f5f5;
    border-bottom: 1px solid #e5e5e5;
    height: 51px;
    line-height: 51px;
    padding-top: 2px;
    position: relative;
}

.notice_area .notice_detail {
    color: #000;
    font-size: 17px;
    margin: 0 auto;
    overflow: hidden;
    width: 1200px;
}

.notice_area {
    line-height: 51px;
}

.notice_area .notice_detail .notice_tit {
    font-weight: 500;
}

.notice_area .notice_detail a {
    display: inline-block;
    vertical-align: top;
}

.notice_area .notice_detail .notice_tit .ico_arr3 {
    margin: -3px 19px 0 20px;
    vertical-align: middle;
}

.notice_area .notice_detail .notice_cont {
    max-width: 965px;
    padding-right: 102px;
    position: relative;
}

.notice_area .notice_detail a {
    display: inline-block;
    vertical-align: top;
}

.notice_area .notice_detail .notice_cont .subj {
    word-break: break-all;
}

.notice_area .subj {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
}

.notice_area .notice_detail .date {
    color: #b1b1b1;
    font-family: verdana;
    font-size: 13px;
    position: absolute;
    right: 0;
    top: -1px;
}


.foot_menu {
    padding-top: 29px;
    position: relative;
    text-align: center;
}
.foot_menu li {
    display: inline-block;
    height: 15px;
    vertical-align: top;
}
.foot_menu .bar {
    margin: 0 16px;
}
.bar {
    background: #d6d6d6;
    display: inline-block;
    height: 16px;
    line-height: 999px;
    overflow: hidden;
    vertical-align: top;
    width: 1px;
}

.copyright {
    color: #c5c5c5;
    font-size: 14px;
    line-height: 16px;
    padding-top: 16px;
    position: relative;
    text-align: center;
}
.foot_logo {
    margin-top: 20px;
    text-align: center;
}
.ico_foot_logo {
    background-position: -319px -1013px;
    background-repeat: no-repeat;
    height: 36px;
    width: 100px;
}





.shadow-custom {
    background-color: rgb(144, 61, 216);
    color: #fff;
    margin: 0 auto;
    border-radius: 10px;
    padding: 11px 15px; /* Adjusted padding */
    display: flex; /* Enable flexbox */
    align-items: center; /* Center items vertically */
    width: 500px;
    height: 50px;
    position: relative; /* Make the parent relative for absolute positioning */
}


@media (max-width: 600px) {
    .shadow-custom {
        width: 100%; /* Remove fixed width for mobile */
        margin: 0 10px; /* Optional: add some margin for better spacing */
    }
}

.shadow-custom svg {
    height: 16px; /* Specify the height of the SVG */
    width: 16px; /* Specify the width of the SVG */
    position: absolute; /* Position the SVG absolutely */
    left: 15px; /* Position it to the left with some space */
}

.jobs-cont a {
    display: inline-block;
    color: #fff;
    width: 500px;
    height: 50px;
    margin: 5px 100px;
    position: relative; /* Ensure the link is positioned relative */
}

@media (max-width: 600px) {
    .jobs-cont a {
        display: block; /* Change display to block for mobile */
        width: 100%; /* Optional: make it full width on mobile */
        margin: 5px 0; /* Optional: adjust margin for better spacing */
    }
}


.job-cont{
    margin: 0 auto;
    background-color: #fff;
    position: relative;
    width: 800px;
    top: 50px;
    box-shadow: 0px 0px 25px rgba(0,0,0,0.2);
    border-radius: 15px;
}


/* Media query for mobile devices */
@media (max-width: 600px) {
    .job-cont {
        width: 100%; /* Remove fixed width for mobile */
        top: 20px; /* Optional: adjust top position for mobile */
    }
}

.job-detail{
    padding: 50px;
}

.job-detail ul{
    margin-bottom: 70px;
}

.job-detail ul li{
    margin-bottom: 10px;
    list-style-type: disc;
}

.job-description {
    line-height: 1.6;
    margin-bottom: 20px;
}

.job-conditions {
    margin-left: 20px;
    padding-left: 0;
}

.job-conditions li {
    margin-bottom: 10px;
    list-style-type: disc;
}

.job-tasks li{
    margin-bottom: 10px;
    list-style-type: disc;
}

.file-upload {
    display: none;
}

.custom-file-upload {
    display: inline-block;
    padding: 10px 20px;
    cursor: pointer;
    background-color: #fff;
    color: rgb(136, 136, 136);
    border-radius: 5px;
    border: dashed;
    font-size: 16px;
    width: 500px;
}

@media (max-width: 600px) {
    .custom-file-upload {
        width: 100%; /* Remove fixed width for mobile */
        margin: 0 10px; /* Optional: add some margin for better spacing */
    }
}

.custom-file-upload:hover {
    background-color: rgb(241, 241, 241); /* Darker background on hover */
}

#file-name{
    display: inline;
}

#delete-file-button{
    position: absolute;
    background: none;
    color: rgb(136, 136, 136);
    left: 0;
    bottom: 5px;
}

.file-cont{
    position: relative;
    border: dashed;
    width: 500px;
    border-radius: 5px;
    padding: 10px 20px;
    color: rgb(136, 136, 136);
}

@media (max-width: 600px) {
    .file-cont {
        width: 100%; /* Remove fixed width for mobile */
        margin: 0 10px; /* Optional: add some margin for better spacing */
    }
}


.submit-button {
    display: block;
    position: relative;
    padding: 10px 20px; /* Padding for the button */
    background-color: rgb(144, 61, 216); /* Green background color */
    color: white; /* White text color */
    border: none; /* Remove border */
    border-radius: 50px; /* Rounded corners */
    font-size: 16px; /* Font size */
    cursor: pointer; /* Pointer cursor on hover */
    transition: background-color 0.3s; /* Smooth transition for hover effect */
    top: 20px;
}

.submit-button:hover {
    background-color: rgb(112, 47, 168); /* Darker green on hover */
}

.submit-button:disabled {
    background-color: #6c757d; /* Gray background when disabled */
    cursor: not-allowed; /* Not allowed cursor */
}

#error-message {
    color: red; /* Red color for error message */
    display: none; /* Initially hidden */
}

.job-detail h1{
    margin: 30px 5px;
    padding-bottom: 10px;
    font-size: 30px;
    border-bottom: solid 1px;
}

.job-detail h2{
    margin: 20px 5px;
    font-size: 20px;
}

.job-detail p{
    line-height: 2;
    margin-bottom: 30px;
}

.file-download{
    position: relative;
    margin: 20px 5px;
    color: rgb(144, 61, 216);
    font-size: 19px;
    border-bottom: solid 2px;
    border-radius: 5px;
}

.upload-text{
    position: relative;
    margin: 30px 5px !important;
    top: 15px;
}















.snb_wrap {
    background: #fff;
    border-bottom: 1px solid #e0e0e0;
    border-top: 1px solid #eaeaea;
    /* clear: both; */
    height: 67px;
    position: relative;
    text-align: center;
    z-index: 200;
  }

.snb_inner {
    margin: 0 auto;
    position: relative;
    width: 1120px;
  }

  .snb_wrap.my .snb {
    justify-content: center;
  }

  .snb {
    display: flex;
    justify-content: space-between;
    line-height: 67px;
  }

  .snb_wrap.my .snb li {
    margin: 0 21px;
  }

  .snb li.on a::before {
    background-color: #000;
    bottom: -1px;
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    right: 0;
  }

  .snb li.on a {
    color: #000;
    position: relative;
  }

  .snb a {
    color: #bbb;
    display: block;
    font-size: 15px;
    font-weight: 500;
    height: 67px;
    line-height: 70px;
    padding: 0 5px;
  }

  .card_wrap.my {
    padding: 0 0 60px;
  }

  .card_wrap {
    margin: 0 auto;
    padding: 50px 0 81px;
    width: 1140px;
  }

  .card_wrap.my .sub_title_wrap {
    height: 76px;
    position: relative;
  }

  .card_wrap.my .sub_title {
    font-size: 20px;
    font-weight: 500;
    line-height: 24px;
    padding: 40px 0 0 15px;
  }

  .card_wrap.my .right {
    position: absolute;
    left: 15px;
    top: 0px;
  }

  .card_lst::after {
    clear: both;
    content: "";
    display: block;
  }

  .card_lst li {
    float: right;
    height: 210px;
    margin: 0 15px 15px 0;
    position: relative;
    width: 210px;
  }

.card_wrap.my .card_item {
    overflow: hidden;
}

.card_item {
    cursor: pointer;
    display: block;
    height: 100%;
    width: 100%;
  }

  img {
    vertical-align: top;
  }

.card_item .info {
    height: 178px;
    right: 18px;
    position: absolute;
    top: 14px;
    width: 157px;
}

.card_item .update {
    bottom: 14px;
    color: #848484;
    font-size: 14px;
    right: 19px;
    line-height: 18px;
    position: absolute;
  }

  .card_item .info .subj {
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    display: -webkit-box;
    font-size: 18px;
    font-weight: 500;
    line-height: 18px;
    overflow: hidden;
    padding-top: 5px;
    text-overflow: ellipsis;
    width: 157px;
  }












.daily_lst {
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    width: 1208px;
}

.daily_head {
    border-bottom: 1px solid #eaeaea;
    font-size: 17px;
    height: 66px;
    line-height: 78px;
    margin: 0 auto;
    width: 1200px;
    font-weight: 500;
}

.daily_section {
    float: right;
    padding: 0 4px 4px;
    /* width: 154px; */
  }

  .daily_section.on{
    background: rgb(144, 61, 216);
    /* width: 228px; */
  }

  .daily_section.on .daily_card_item .genre {
    bottom: auto;
    top: 14px;
  }

  .daily_section.on .daily_card_item .info {
    height: 90px;
    top: 28px;
    width: 206px;
  }

  .daily_section.on .daily_card_item .subj {
    font-size: 17px;
    line-height: 17px;
    margin-top: 5px;
  }

  .daily_section.on .daily_card li {
    width: 226px;
  }

  .daily_section.on ._weekdaySelect {
    color: #fff; /* Change text color to white when the section is active */
}

  .daily_section h3 a {
    display: block;
    font-size: 17px;
    font-weight: 500;
    height: 66px;
    line-height: 68px;
    text-align: center;
}

.daily_section h3 a:hover {
color: rgb(144, 61, 216);
}


.daily_card {
    border: 1px solid #dbdbdb;
    border-top: none;
    margin: 0;
    padding: 0;
}

.daily_card li {
    border-top: 1px solid #dbdbdb;
    height: 152px;
    width: 152px;
  }

  .daily_card_item {
    background: #fff;
    cursor: pointer;
    display: block;
    height: 100%;
    position: relative;
    text-align: left;
    width: 100%;
  }

  .daily_card_item img {
    margin-top: 13px;
  }
  
  button, fieldset, img {
    border: 0;
  }

  .daily_card_item .genre {
    bottom: 7px;
    font-size: 13px;
    font-weight: 500;
    right: 12px;
    line-height: 14px;
    position: absolute;
  }

  .daily_card_item .info {
    height: 110px;
    left: 12px;
    position: absolute;
    text-align: right;
    top: 14px;
    width: 130px;
  }


  .daily_card_item .subj {
    font-size: 16px;
    font-weight: 500;
    line-height: 16px;
  }


.daily_card_item .grade_area {
  display: none;

}
  .daily_section.on .daily_card_item .grade_area {
    bottom: 13px;
    display: block;
    right: 11px;
    line-height: 17px;
    position: absolute;
  }
  
  









  














.container {
    direction: rtl;
}


.row {
    text-align: right;
}

.card {
    width: 210px !important;
    height: 210px !important;
    background-color: white;
    overflow: hidden;
    position: relative;
    user-select: none; 
    margin: 0 auto;
    /* margin-bottom: -15px; */
    margin-top: -20px;
}

.card-img-bottom {
    width: auto;
    position: absolute;
    bottom: 0;
    left: 0;
}

.card-img-overlay {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card-img-overlay h5 {
    position: absolute;
    top: 5px !important;
    right: 7px;
    text-align: right;
}

.genre-text {
    border-radius: 5px;
    position: absolute;
    bottom: 10px;
    left: 10px;
}

.col-2 {
    flex: 0 0 20%;
    max-width: 20%;
}

#container {
    min-height: 100%;
    position: relative;
  }

#container.bg {
    background: #f5f5f5;
  }

  #content {
    padding: 100px 0;
    position: relative;
  }

.background{
  height: 321px;
  left: 0;
  position: absolute;
  top: 100px;
  width: 100%;
}

.detail_header{
    height: 240px;
    position: relative;
    text-align: center;
    z-index: 20;
}









.genre.g_romance {
    color: #fd337f;
  }
  .genre.g_drama {
    color:  #00A693; /* Persian Green */
}

.genre.g_fantasy {
    /* color: #870074; */
    color: #6F2C91; /* Persian Purple */
}

.genre.g_comedy {
    color: #F2A900; /* Persian Yellow */
}

.genre.g_action {
    color: #007BFF; /* Persian Blue */
}

.genre.g_daily {
    color: #A7A8D9; /* Persian Light Gray */
}

.genre.g_romance {
    color: #D81B60; /* Persian Pink */
}

.genre.g_superhero {
    color: #FF5733; /* Persian Coral */
}

.genre.g_scifi {
    color: #2D4464; /* Persian Slate Blue */
}

.genre.g_horror {
    color: #C0392B; /* Persian Red */
}

.genre.g_supernatural {
    color: #8E44AD; /* Persian Lilac */
}

.genre.g_mystery {
    color: #34495E; /* Persian Dark Gray */
}

.genre.g_sport {
    color: #27AE60; /* Persian Green */
}

.genre.g_historical {
    color: #D4AC0D; /* Persian Gold */
}






.detail_header .info {
    display: inline-block;
    margin-top: -10px;
    max-width: 1196px;
    position: relative;
    vertical-align: middle;
  }

.detail_header .info .genre {
    font-size: 20px;
    font-weight: 400;
    line-height: 26px;
  }

.detail_header .info .subj {
    clear: both;
    font-size: 50px;
    font-weight: 400;
    line-height: 50px;
    margin: 4px auto 0;
    width: 750px;
  }

  .detail_header .valign {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }



.comic_detail {
    margin: 0 auto;
    position: relative;
    width: 1200px;
    z-index: 10;
}

.poster {
    right: 0;
    position: absolute;
    top: 0;
}

.detail_body {
    display: flex;
    width: 1200px;
    height: 950px;
}

.aside_detail {
    border-right: 2px solid #f5f5f5;
    height: 100%;
    margin-left: -2px;
    padding: 43px 10px 316px 40px;
    position: relative;
    width: 357px;
}

.aside {
  float: right;
  width: 190px;
}



li{
    list-style: none;
}

.aside_detail .grade {
    display: flex; /* Use flexbox to arrange items in a row */
    justify-content: flex-start; /* Align items to the start (right side) */
    padding: 0; /* Remove default padding */
    margin: 0; /* Remove default margin */
    width: auto; /* Ensure it takes full width or adjust as needed */
    margin-right: 20px;
}

.aside_detail .grade li {
    text-align: center; /* Center text within each item */
    margin-left: 10px; /* Add space between items (use margin-left for right-to-left) */
}



.day_info {
    display: flex; /* Use flexbox for layout */
    align-items: center; /* Center items vertically */
    color: #000;
    font-size:19px;
    font-weight:500;
    line-height:25px;
    margin-top:30px !important;
    margin-right:20px !important;
}

.txt_ico_up {
    color: #fff;
    border-radius: 50%;
    display: flex; /* Use flexbox for centering */
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
    font-size: 14px;
    margin-left: 10px; /* Add space to the right */
}

.status-start {
    background-color: rgb(144, 61, 216); /* Color for پخش */
    height: 40px;
    width: 40px;
}

.status-end {
    background-color: #ccc; /* Color for پایان, change as needed */
    color: rgb(144, 61, 216);
    height: 30px;
    width: 30px;
}

.summary{
    color: #313131;
    margin-right: 15px; /* Add space to the right */
}

.btn_favotite{
    background: #2f2f2f;
    color: #fff;
    /* position: absolute; */
    text-align: center !important;
    top: 290px !important;
    left: 115px !important;
    border-radius: 17px;
    cursor: pointer;
    display: inline-block;
    font-size: 15px;
    font-weight: 500;
    height: 35px;
    line-height: 36px;
    padding: 0 14px;
    vertical-align: top;
}

.btn_favotited{
    background: #2f2f2f;
    color: #fff;
    /* position: absolute; */
    text-align: center !important;
    top: 290px !important;
    left: 115px !important;
    border-radius: 17px;
    cursor: pointer;
    display: inline-block;
    font-size: 15px;
    font-weight: 500;
    height: 35px;
    line-height: 36px;
    padding: 0 5px;
    vertical-align: top;
}



.btn_rate2{
    background: rgb(144, 61, 216);
    color: #fff;
    position: absolute;
    text-align: center !important;
    border-radius: 17px;
    cursor: pointer;
    display: inline-block;
    font-size: 15px;
    font-weight: 500;
    height: 25px;
    line-height: 25px;
    padding: 0 14px;
    margin-right: 10px;
    vertical-align: top;
}

.rating2 {
    width: 200px;
    left: 0px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
    border-radius: 15px;
}

.rating1 {
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    border-radius: 15px;
    text-align: center;
    max-width: 400px; /* Set a max width for the modal */
    margin: auto; /* Center horizontally */
    display: none; /* Initially hidden */
    position: fixed; /* Fixed position */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust position */
    background: white; /* Background color */
    border: 1px solid #ccc; /* Border */
    padding: 20px; /* Padding */
    z-index: 1000; /* Ensure it is above other elements */
}

.overlay{
    display: none; /* Initially hidden */
    position: fixed; /* Fixed position */
    top: 0; /* Cover the entire viewport */
    left: 0; /* Cover the entire viewport */
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background: rgba(0, 0, 0, 0.7); /* Dark background with transparency */
    z-index: 999; /* Ensure it is below the modal */
}

#rating-content h6 {
    font-size: 15px;
}

.button-container {
    border-top: 2px solid #ccc; /* Border at the top of the buttons */
    margin-top: 10px; /* Space between content and buttons */
    display: flex; /* Use flexbox to arrange buttons in a row */
}

.button-container button {
    background-color: #ffffff; /* Button background color */
    border: none;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    flex: 1; /* Allow buttons to grow equally */
}

.button-container button:first-child {
    border-left: 1px solid #ccc; /* Border between buttons */
}

.button-container button:hover {
    background-color: #f5f5f5; /* Darker shade for hover effect */
}

#overlay {
    display: none;
}



.detail_list {
    flex-grow: 1; /* Allow detail_list to take up remaining space */
    padding: 31px 20px 66px;
    overflow: hidden;
    position: relative; /* Position relative for absolute positioning of pagination */
}

.episodes_list {
    padding: 0px;
}

.episode_item{
    padding: 0px;
    border-bottom: 1px solid #f5f5f5;
}

.episode_item:hover {
    background-color: #f8f8f8b7; /* Change the background color on hover */
    /* transform: scale(1.02); */
}

.episode_link {
    display: block !important; /* Use flexbox for alignment */
    text-decoration: none !important; /* Remove underline from links */
    width: 100% !important; /* Make the link take the full width of the item */
    height: 100% !important; /* Set a fixed height for the link */
    box-sizing: border-box; /* Include padding in height calculation */
}


.episode_cover{
    margin-left: 20px;
    position: relative;
}

.episode_title{
    font-size: 17px;
    margin-left: 12px;
    padding-top: 24px;
    width: 345px;
}

.episode_title span{
    color: #3d3d3d;
    max-width: 370px;
    overflow: hidden;
    padding: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: auto;
}

.episode_date{
    color: #b1b1b1;
    font-size: 14px;
    padding-top: 26px;
    letter-spacing: 1px;
    width: 102px;
  }

.episode_like{
    color: #b1b1b1;
    font-size: 14px;
    letter-spacing: 1px;
    width: 76px;
    padding-top: 26px;
}

.episode_number{
    color: #3d3d3d;
    font-size: 17px;
    letter-spacing: 1px;
    padding-top: 25px;
    text-align: right;
    width: 59px;
    margin-right: 53px;
}

.detail_body .detail_list ul span{
    display: inline-block;
    vertical-align: top;
}


/* bottom: 127px; */
.pagination {
    display: flex;
    position: absolute; /* Position absolute to keep it at the bottom */
    bottom: 110px;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
    line-height: 30px;
    text-align: center;
    width: 100%;
    right: 0;
    overflow: hidden;
}

.page_num {
    margin: 0 5px;
    color: #070707!important;
    font-size: 15px;
    letter-spacing: 1px;
    text-decoration: none;
    width: 28px;
    display: inline-block;
    height: 28px;
    margin-left: 3px;
    vertical-align: top;
    width: 28px;
}

.current-page {
    margin: 0 5px;
    color: #fff;
    background-color: rgb(144, 61, 216);

    background-position: -1104px -477px;
    background-repeat: no-repeat;
    display: block;
    height: 28px;
    text-indent: 0;
    width: 28px;
    font-size: 15px;
    letter-spacing: 1px;
    line-height: 30px;
    overflow: hidden;
    white-space: nowrap;
    border-radius: 13px;
}

.pg_prev{
    color: #070707!important;
}

.pg_next {
    color: #070707!important;
}

.detail_other {
    clear: both;
    margin: 74px 0 112px;
    overflow: hidden;
    width: 1200px;
  }

.detail_other h2 {
display: inline-block;
font-size: 20px;
font-weight: 500;
line-height: 22px;
margin-bottom: 14px;
}

.other {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping if needed */
    padding: 0;
    margin: 0;
}

.other li {
    background: #fff;
    border-top: none;
    height: 98px;
    width: 400px;
    position: relative;
    padding: 0;
    margin: 0;
    display: flex;
}


.other a {
    cursor: pointer;
    display: block;
    height: 100%;
    text-decoration: none;
    color: #000;
    display: flex;
}

.other_pic::before{
    border: 1px solid rgba(0,0,0,.1);
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 20;
}

.other_pic{
    position: relative;
    bottom: 0;
    height: 98px;
    top: 0;
    width: 92px;
}

.other_pic img{
    border: 0;
    vertical-align: top;
}

.other_info {
    height: 83px;
    padding: 15px 22px 0 114px;
    display: flex;
    flex-direction: column;
  }

.other_title{
    font-size: 19px;
    line-height: 26px;
    font-weight: 500;
    margin-top: -2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

.other_grade{
    position: absolute;
    color: rgb(144, 61, 216);
    margin-top: 40px;
}
.detail_header .subscribe{
    bottom: 10px;
    position: absolute;
    left: 0;
  }




.container-episode{
    min-height: 100%;
    position: relative;
    /* font-size: 12px; */
}

.toolbar {
    background: #2f2f2f;
    color: #fff;
    font-size: 17px;
    font-weight: 400;
    height: 50px;
    min-width: 1200px;
    position: fixed;
    width: 100%;
    z-index: 100;
    top: 0; /* Keep it at the top */
    opacity: 1; /* Defaults to visible */
    visibility: visible; /* Defaults to visible */
    transition: opacity 1s ease, visibility 1s ease; /* Smooth transition */
}

.hidden {
    opacity: 0; /* Hide the toolbar */
    visibility: hidden; /* Make it invisible */
}

.episode_info{
    right: 0;
    position: absolute;
    top: 0;
    width: 44%;
    z-index: 100;
    color: #fff;
    font-size: 17px;
    font-weight: 400;
  }

.title_info{
    margin-top: 11px;
}


.logo{
    height: 50px;
    float: right;
}

.logo a svg{
    color: #fff;
    background-position: -1123px -1110px;
    background-repeat: no-repeat;
    display: block;
    height: 34px;
    margin: 8px 20px;
    position: relative;
    width: 36px;
    z-index: 100;
    text-indent: 100%;
    white-space: nowrap;
}

.title_info a{
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
    font-size: 18px;
    margin-left: 11px;
    max-width: 50%;
    position: relative;
    z-index: 100;
    text-decoration: none;
}


.ico_arr{
    margin:  0 0 8px 6px;
    vertical-align: top;
    width: 7px;
    height: 11px;
    /* background-size: 1315px 1278px;
    display: inline-block;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap; */
}

.title_episode{
    font-size: 17px;
  font-weight: 400;
  letter-spacing: 1px;
  margin-top: 1px;
  max-width: 28%;
  vertical-align: top;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: normal;
}

.paginate {
    height: 50px;
    position: relative;
    z-index: 50;
    overflow: hidden;
  text-align: center;
}

.paginate a{
    height: 33px;
    margin-top: 8px;
    vertical-align: top;
    width: 32px;
    color: #fff;
  display: inline-block;
  font-size: 15px;
  letter-spacing: 1px;
  line-height: 30px;
  margin-left: 3px;
}

.episode_tx{
    cursor: pointer;
    display: inline-block;
    letter-spacing: 1px;
    margin: 12px 11px 0 12px;
    background-position: -148px -1164px;
    height: 33px;
    width: 32px;
}

.arrow{
    color: #747474;
    height: 33px;
    margin-top: 8px;
    vertical-align: top;
    width: 32px;
    display: inline-block;
    font-size: 15px;
    letter-spacing: 1px;
    line-height: 30px;
    margin-left: 3px;
}



.content{
    padding-top: 0;
    position: relative;
}

.cont_box::after {
    clear: both;
    content: "";
    display: block;
}

.cont_box {
    margin: 0 auto;
    position: relative;
    width: 1200px;
    z-index: 10;
    background-color: #fff;
}

.cont_list {
    overflow: hidden;
    padding-top: 50px;
    position: relative;
    text-align: center;
  }

.image_list{
    margin-bottom: 215px;
}

.images img{
    max-width: 800px;
    min-width: 600px;
}

.day_info_episode {
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
    color: #000;
    font-size: 17px;
    margin: 0;
    padding: 0;
}

.txt_ico_up_episode {
    margin-left: 5px; /* Add some space between icon and text */
    color: #fff;
    border-radius: 50%;
    display: inline-flex; /* Use inline-flex for proper alignment */
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
    font-size: 14px;
    background-color: rgb(144, 61, 216); /* Color for پخش */
    height: 40px;
    width: 40px;
}



.btns{
    display: inline-block;
    margin: 18px auto 53px;
    width: auto;
    position: relative;
    vertical-align: top;
    z-index: 50;
}

.episode_btns{
    position: relative;
    float: right;
    margin-left: 4px;
}


.ico_like_episode {
    margin-left: 4px;
    vertical-align: middle;
    height: 14px !important;
    width: 16px !important;
}

.like_tx_episode{
    color: #585858;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    line-height: 40px;
}

.btn_episode{
    background: #ececec;
    border-radius: 19px;
    color: #585858;
    cursor: pointer;
    display: block;
    font-size: 15px;
    font-weight: 500;
    height: 38px;
    line-height: 40px;
    min-width: 100px;
    padding: 0 12px;
    position: relative;
    text-decoration: none;
}

.ico_subscribe_episode{
    margin-left: 4px;
    vertical-align: middle;
}

.subscribed{
    color: #949494;
}

.episode_btn_list {
    background: #f5f5f5;
    height: 226px;
    margin: 0 auto;
    padding: 45px 0;
    text-align: center;
}

.episode_lst {
    display: inline-block;
    height: 175px;
    position: relative;
    text-align: center;
    vertical-align: top;
    width: 1148px;
}

.episode_cont {
    height: 100%;
    left: 50%;
    margin-left: -537px;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 1074px;
}

.episode_lst ul {
    height: 132px;
    left: 0;
    margin: 0 -15px;
    overflow: hidden;
    padding: 0 3px;
    position: absolute;
    top: 0;
    width: auto;
    display: flex; /* Use flexbox for better alignment */
    transition: transform 2s ease; /* Smooth transition */
}

.episode_lst li {
    float: left;
    padding: 12px 15px 0;
    min-width: 93px; /* Ensure each item has a minimum width */
}

.episode_lst li a {
    display: block;
    width: 92px;
    text-decoration: none;
}

.episode_lst .cover_episode {
    display: block;
    margin-bottom: 7px;
    position: relative;
}

.episode_lst ul .mask {
    background: #959595;
    bottom: 0;
    left: 0;
    opacity: .4;
    position: absolute;
    right: 0;
    top: 0;
    width: 93px;
}

.episode_lst .title_ep {
    color: #b1b1b1;
    display: block;
    font-size: 16px;
    letter-spacing: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.episode_paginate {
    display: block;
    position: relative;
    text-align: center;
}

.episode_paginate a{
    height: 23px;
    margin-top: -11px;
    position: absolute;
    top: 55px;
    width: 14px;
    color: #949393;
}

.episode_lst a.slide_prev {
    left: -3px;
  }

  .episode_lst a.slide_next {
    right: -3px;
  }

.slide_prev, .slide_next {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.current-episode .cover_episode img {
    border: 3px solid rgb(144, 61, 216); /* Purple border for current episode image */
}

.current-episode .title_ep {
    color: rgb(144, 61, 216); /* Purple text for current episode title */
}


.episode_lst ul {
    display: flex; /* Use flexbox for better alignment */
    transition: transform 2s ease; /* Smooth transition */
    /* Ensure the direction is set to RTL */
    flex-direction: row-reverse; /* This will reverse the order of items */
}



.comment_box::after {
    clear: both;
    content: "";
    display: block;
  }
.comment_box{
    margin: 0 auto;
    position: relative;
    width: 1200px;
    z-index: 10;
}

.comment_area{
    float: right;
    height: 100%;
    padding: 88px 0 22px ;
    width: 800px;
}

.comment_header{
    -webkit-box-align: center;
    align-items: center;
    column-gap: 5px;
    display: flex;
    margin: 30px 0 8px;
    font-size: 12px;
}

.title_comments{
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -.3px;
    line-height: 35px;
    margin: 0;
    padding: 0;
}

.comment_count{
    color: #949494;
    font-size: 16px;
    line-height: 24px;
}


.comment_form_folder {
    max-width: 800px;
    /* width: 800px; */
    box-sizing: border-box;
    height: auto; /* Allow height to adjust based on content */
}

.form_group {
    display: flex; /* Use flexbox for alignment */
    flex-direction: column; /* Stack elements vertically */
    align-items: flex-start; /* Align items at the start */
    margin: 0 0 30px 0;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
    padding: 5px;
    background-color: #fff;
}

.comment_form {
    border: 0;
    background-color: #ffffff;
    border-radius: 4px;
    padding: 10px; /* Adjust padding as needed */
    box-sizing: border-box;
    font-weight: 500;
    color: #000000;
    font-size: 15px;
    width: 100%;
    height: 100px; /* Set a fixed height for the textarea */
    resize: none; /* Prevent resizing */
    overflow-y: auto; /* Enable vertical scrolling */
    outline: none; /* Remove outline on focus */
}


.comment_form:focus {
    border: none; /* Remove border on focus */
}

.comment_form::placeholder {
    color: #a6a6a6; /* Change the color of the placeholder if needed */
    opacity: 1; /* Ensure the placeholder is fully opaque */
}

.button_form {
    display: flex; /* Use flexbox to center the icon */
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
    border-radius: 50%; /* Rounded corners */
    color: white; /* Text color */
    padding: 0; /* Remove padding to ensure the button size is controlled by width and height */
    height: 34px; /* Set button height */
    width: 34px; /* Set button width */
    border: 1px solid rgba(0,0,0,.04); /* Optional: border for the button */
    background-color: #e0e0e0;
    transition: 0.3s;
    margin: 10px 0 1px 1px; /* Add margin to separate from textarea */
    align-self: flex-end; /* Align the button to the right */
}

.button_form svg {
    width: 18px; /* Set the width of the SVG */
    height: 18px; /* Set the height of the SVG */
    transform: scaleX(-1); /* Flip horizontally */
}


.disabled{
    cursor: not-allowed !important;
    background-color: #e0e0e0;
    pointer-events: none !important; /* Prevent any click events */
}

.comment_tabs{
    padding: 0;
    border-bottom: 0.5px solid var(--wcc-line-04);
    box-sizing: border-box;
}

.top{
    display: inline-block;
    position: relative;
    min-width: 60px;
    margin-left: 20px;
    padding: 0 5px 10px;
    text-align: center;
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    background-color: transparent;
    border: 0;
    cursor: pointer;
}

.top_active{
    color: #000000;
}

.top_active::after{
    color: #000000;
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.5px;
    height: 2px;
    background-color: #3c3c3c;
}



.newest{
    display: inline-block;
    position: relative;
    min-width: 60px;
    margin-left: 20px;
    padding: 0 5px 10px;
    text-align: center;
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    background-color: transparent;
    border: 0;
    cursor: pointer;
}

.newest_active{
    color: #000000;
}

.newest_active::after{
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.5px;
    height: 2px;
    background-color: #3c3c3c;
}



.comment_list{
    list-style: none;
    padding: 0;
    border-top: 0.5px solid #e0e0e0;
}

.comment_item{
    padding: 18px 0 0;
    position: relative;
    border-bottom: 0.5px solid #e0e0e0;
}

@media (max-width: 600px) {
    .comment_item {
position: relative;
  padding: 14px 18px 0;
  border-bottom: 0.5px solid #e0e0e0;
    }
}

.comment_item_cont{
    position: relative;
}

.comment_item_header{
    margin-bottom: 6px;
}

.comment_item_header_username {
    margin-bottom: 0;
    display: flex;
    align-items: center;
    font-size: 0.9375rem; /* Reset font size for username */
}

.comment_item_header_name{
    font-size: 0.9375rem;
    line-height: 1.5rem;
    color: #3c3c3c;
    margin-left: 4px;
    border: none !important;;
}

.comment_item_header_created{
    font-size: 0.8125rem;
    line-height: 1.3125rem;
    color: #a6a6a6;
}


.comment_item_cont {
    position: relative; /* Ensure the dropdown is positioned relative to this container */
}

.comment_item_cont .comment_menu {
    position: absolute;
    top: 0;
    left: -8px; /* This positions the button to the left */
    width: 20px;
    height: 20px;
    background-color: transparent;
    border: 0;
    cursor: pointer;
}

.comment_item_cont .comment_menu svg {
    width: 2px;
    color: #b2b2b2;
}

.dropdown_menu {
    position: absolute;
    left: calc(-0px + 0px); /* Position it to the right of the button */
    top: 37px;
    background-color: white;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000; /* Ensure it appears above other elements */
    border: 1px solid #c9c9c99d;
    padding: 7px 1px;
    cursor: pointer;
    width: 95px;
    height: auto; /* Change height to auto for better content fitting */
    
    /* Initial state for animation */
    opacity: 0;
    transform: translateY(-10px); /* Start slightly above */
    transition: opacity 300ms ease, transform 300ms ease; /* Smooth transition */
    display: none; /* Initially hidden */
}

.dropdown_menu.show {
    display: block; /* Show when class is added */
    opacity: 1; /* Fully visible */
    transform: translateY(0); /* Move to original position */
}


.delete_option {
    padding: 8px 12px;
    background: none;
    border: none;
    cursor: pointer;
    border-bottom: 1px solid #c9c9c959;
    width: 100%;
}

.cancel_option {
    padding: 8px 12px;
    background: none;
    border: none;
    cursor: pointer;
    width: 100%; /* Make it take the full width */
}

.edit_option{
    padding: 8px 12px;
    background: none;
    border: none;
    cursor: pointer;
    border-bottom: 1px solid #c9c9c959;
    width: 100%;
}

.report_option{
    padding: 8px 12px;
    background: none;
    border: none;
    cursor: pointer;
    border-bottom: 1px solid #c9c9c959;
    width: 100%;
}


.dropdown_menu {
    position: absolute;
    left: calc(-0px + 0px); /* Position it to the right of the button */
    top: 37px;
    background-color: white;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000; /* Ensure it appears above other elements */
    border: 1px solid #c9c9c99d;
    padding: 7px 1px;
    cursor: pointer;
    width: 95px;
    height: auto; /* Change height to auto for better content fitting */
    
    /* Initial state for animation */
    opacity: 0;
    transform: translateY(-10px); /* Start slightly above */
    transition: opacity 300ms ease, transform 300ms ease; /* Smooth transition */
    display: none; /* Initially hidden */
}

.dropdown_menu.show {
    display: block; /* Show when class is added */
    opacity: 1; /* Fully visible */
    transform: translateY(0); /* Move to original position */
}

.report_form {
    display: none;
    position: absolute;
    background-color: white;
    border: 1px solid #c9c9c99d;
    border-radius: 4px;
    padding: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000; /* Ensure it appears above other elements */
    width: 200px;
}

.report_form textarea, .report_form select {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 8px;
    margin-bottom: 10px;
}

.report_form button {
    display: block;
    width: 100%;
    background-color: #e0e0e0;
    border: none;
    padding: 10px;
    border-radius: 4px;
    cursor: pointer;
}

.report_form button:hover {
    background-color: #d0d0d0;
}


.modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0, 0, 0); /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
    border-radius: 10px; /* Optional: Rounded corners */
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

select, .report {
    display: block;
    margin: 20px 0;
    padding: 10px;
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 4px;
}




.comment_body{
    margin-bottom: 18px;
}

.comment_tx_cont{
    margin-bottom: 12px;
}

.tx_cont{
    max-height: 6.5625rem;
    font-size: 0.9375rem;
    line-height: 1.3125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow-wrap: anywhere;
    word-break: break-word;
    color: #111111;
}

.comment_text{
    white-space: pre-wrap;
}

.comment_ico{
    margin-top: 0.125rem;
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
}

.comment_top_ico{
    width: 34px;
    height: 17px;
    border-width: 1.5px;
    margin-top: 0.125rem;
    display: inline-flex;
    border-radius: 28px;
    border: 1px solid #00dc64;
    justify-content: center;
    align-items: center;
}

.top_ico{
    width: 20px;
    margin-left: 1px;
    margin-top: 0.0625rem;
     color: #00dc64;
}

.comment_item_action{
    padding-bottom: 18px;
    display: flex;
    justify-content: flex-end;
}

.reply_folder{
    padding: 4px 10px;
    font-size: 0.875rem;
    cursor: pointer;
    margin-left: auto;
    border: 0.5px solid #c9c9c9;
    border-radius: 2px;
    color: #3c3c3c;
    background-color: transparent;
}

.comment_reaction{
    display: flex;
    align-items: center;
    align-self: stretch;
}

.comment_like,
.comment_dislike {
    padding: 4px 10px; /* Keep padding consistent */
    font-size: 0.875rem;
    min-width: 44px;
    height: 36px; /* Set a fixed height */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: #ffffff;
    border: 0.5px solid #c9c9c9;
    border-radius: 2px;
    color: #3c3c3c;
    transition: border-color 0.2s, background-color 0.2s; /* Smooth transition */
    margin-left: 5px;
}

.comment_like svg,
.comment_dislike svg {
    display: inline-block; /* Ensure the SVG is displayed */
    width: 11px; /* Fixed width */
    height: 11px; /* Fixed height */
    margin-right: 3px;
    color: #bbbbbb;
    transform: scaleX(-1);
    transition: color 0.2s; /* Smooth transition for color */
    margin-left: 3px;
}


.comment_like.liked svg,
.comment_dislike.disliked svg {
    color: rgb(144,61,216); /* Change to your desired color */
}
.comment_like.liked,
.comment_dislike.disliked {
    color: rgb(144,61,216); /* Change to your desired color */
}



.button_group {
    display: flex; /* Use flexbox for horizontal alignment */
    align-items: center; /* Center buttons vertically */
    justify-content: flex-start; /* Align buttons to the left */
    margin-top: 10px; /* Optional: add some space above the button group */
    align-self: flex-end; /* Align the button to the right */
}

.button_cancle_form{
    display: flex; /* Use flexbox to center the icon */
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
    border-radius: 50%; /* Rounded corners */
    color: rgb(107, 107, 107); /* Text color */
    padding: 0; /* Remove padding to ensure the button size is controlled by width and height */
    border: none; /* Optional: border for the button */
    background-color: #f8f8f8;
    transition: 0.3s;
    margin: 10px 0 1px 7px; /* Add margin to separate from textarea */
    align-self: flex-end; /* Align the button to the right */
}

.button_cancle_form svg{
    height: 34px; /* Set button height */
    width: 34px; /* Set button width */
}

.button_cancle_form :hover{
    color: rgb(0, 0, 0); /* Text color */
    border-radius: 50%; /* Rounded corners */
    /* border: 1px solid rgb(107, 107, 107); */
    background-color: #f8f8f8;
    transition: 0.3s;
}

.comment_more{
    height: 74px;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    justify-content: center;
    line-height: 1rem;
    color: #999999;
}

.more{
    display: inline-flex;
  padding: 2px 6px;
  background: transparent;
  border: none;
  align-items: center;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  cursor: pointer;
}

.comment_more_ico{
    min-width: 10px;
    height: 10px;
    margin-top: 1px;
    padding-left: 5px;
    color: #999999;
}


.comment{
    font-size: 1rem;
    box-sizing: border-box;
}



.reply{
    /* border-top: 1px solid #e0e0e0; */
    background-color: #f8f8f8;
}

@media (max-width: 600px) {
    .reply {
    margin-left: -17px;
    margin-right: -17px;
    }
}

.comment_item_replied:first-child{
    padding-top: 18px;
}

.comment_item_replied{
    padding: 18px 32px 0 18px;
}

.comment_item_replied .wcc_CommentItem__corner {
    display: block;
  }

.comment_item .wcc_CommentItem__corner {
    position: absolute;
    min-width: 7px;
    height: 7px;
    top: 0;
    right: -17px;
    transform: scaleX(-1);
  }

.wcc_BottomLeftCornerIcon__root path {
    stroke: #a6a6a6;
    }

.comment_more_reply{
    height: 48px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #a6a6a6;
    border-bottom: 1px solid #e0e0e0;
}



.reply_unfold{
    display: flex;
    height: 48px;
    justify-content: center;
}

.unfold{
    font-weight: 600;
    display: inline-flex;
    padding: 2px 6px;
    background: transparent;
    border: none;
    font-size: 0.875rem;
    color: #3c3c3c;
    align-items: center;
    cursor: pointer;
}

.comment_less_ico{
    font-weight: 600;
    min-width: 10px;
    height: 5px;
    padding-left: 6px;
}

.comment_less_ico path {
    stroke: #3c3c3c;
  }
  
  .comment_form_folder_reply{
    min-height: 205px;
    margin-bottom: 0;
    padding: 15px 24px;
    border-radius: 0;
    display: flex;
    width: 100%;
    border: 0;
    background-color: #f8f8f8;
    border-bottom: 0.5px solid #e0e0e0;
    margin-top: -1px;
    padding-top: 0;
}
.comment_form_folder_reply form{
    width: 100% !important;
}

.wcc_Editor__bottomLeftCornerIcon {
    width: 7px;
    height: 7px;
    margin-top: 2px;
    margin-left: 10px;
    transform: scaleX(-1);
  }

.comment_more_progress{
    width: 50px;
    height: 50px;
  }

.edit_form_reply{
    width: 100%;
}

.jobs-cont

.reply_like,
.reply_dislike {
    padding: 4px 10px; /* Keep padding consistent */
    font-size: 0.875rem;
    min-width: 44px;
    height: 36px; /* Set a fixed height */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: #ffffff;
    border: 0.5px solid #c9c9c9;
    border-radius: 2px;
    color: #3c3c3c;
    transition: border-color 0.2s, background-color 0.2s; /* Smooth transition */
    margin-left: 5px;
}
.reply_like {
    padding: 4px 10px; /* Keep padding consistent */
    font-size: 0.875rem;
    min-width: 44px;
    height: 36px; /* Set a fixed height */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: #ffffff;
    border: 0.5px solid #c9c9c9;
    border-radius: 2px;
    color: #3c3c3c;
    transition: border-color 0.2s, background-color 0.2s; /* Smooth transition */
    margin-left: 5px;
}

.reply_like svg,
.reply_dislike svg {
    display: inline-block; /* Ensure the SVG is displayed */
    width: 11px; /* Fixed width */
    height: 11px; /* Fixed height */
    margin-right: 3px;
    color: #bbbbbb;
    transform: scaleX(-1);
    transition: color 0.2s; /* Smooth transition for color */
    margin-left: 3px;
}

.reply_like.liked svg,
.reply_dislike.disliked svg {
    color: rgb(144,61,216); /* Change to your desired color */
}
.reply_like.liked,
.reply_dislike.disliked {
    color: rgb(144,61,216); /* Change to your desired color */
}

















/* mobile css */

header {
    background: #fff;
    position: relative;
    z-index: 3010;
    height: 75px;
}

/* .logo{
    background-position: -1180px -505px;
    height: 74px;
    width: 77px;
    margin: 13px 25px 0 0;
} */

.gnb {
    height: 40px;
    position: relative;
}

.gnb h1 {
    right: -17px;
    position: absolute;
    top: -17px;
}
.gnb h1 img{
    height: 64px;
    width: 67px;
}


header nav {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);

    
}

.lnb {
    border-bottom: 1px solid #e0e0e0;
    display: table;
    table-layout: fixed;
    width: 100%;
    margin: 0;
}

.lnb li {
    position: relative;
    right: 25px;
    display: table-cell;
    height: 45px;
    padding:15px;
}

.lnb a::after {
    content: "";
    left: 50%;
    margin-left: 1px;
    position: absolute;
    top: 5px;
}

.lnb a svg {
height: 25px;
width: 25px;
}








#ct::after {
    clear: both;
    content: "";
    display: block;
}

#ct {
    position: relative;
    clear: both;
    width: 100%;
    top: 20px;
}

@media (min-width: 768px) {
    .ct_type2 {
      padding-top: 66px;
    }
}

.work_head, .work_head .main_banner .link {
    position: relative;
  }

.work_head {
    overflow: hidden;
}

.work_head .main_banner .link::after {
    background: linear-gradient(180deg,rgba(var(--color),0) 0,rgba(var(--color),.81) 69.79%,rgba(var(--color),.9) 100%);
    bottom: 0;
    content: "";
    height: 100px;
    left: 0;
    position: absolute;
    right: 0;
    z-index: 2000;
}

  @media (min-width: 481px) {
    .work_head .main_banner .link::before {
      background: hsla(0,0%,9%,.7);
      bottom: 0;
      content: "";
      left: 0;
      opacity: 1;
      position: absolute;
      right: 0;
      top: 0;
      -webkit-transition: opacity .2s ease;
      transition: opacity .2s ease;
      z-index: 3000;
    }
  }

.main_banner a, .title a {
    display: block;
    overflow: hidden;
}

.work_head .banner_text_area {
    bottom: 5px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    left: 0;
    padding: 0 10px;
    position: absolute;
    text-align: center;
    width: 100%;
    z-index: 2030;
}

.eg-flick-viewport {
    overflow: hidden;
    width: 100%; /* Set the width of the viewport */
}

.eg-flick-camera {
    transition: transform 0.5s ease; /* Smooth transition for slide change */
}

  
   @media (min-width: 481px) {
  .work_head .main_banners {
    width: 56%;
  }
}

.work_head .banner_text_area {
    text-align: center;
}

.work_head .banner_text_area .tag.highlight {
    /* color: rgb(255, 107, 223); */
    color: rgb(200, 83, 255);
}

.work_head .banner_text_area .tag {
    background:#000000;
    border: .5px solid hsla(0,0%,100%,.2);
    -webkit-border-radius: 2px;
    border-radius: 2px;
    color: #fff;
    display: inline-block;
    font-size: 13px;
    line-height: 10px;
    padding:3px 5px;
    text-transform: uppercase;
}

.work_head .banner_text_area .description {
    -webkit-box-orient:vertical;
    word-wrap: break-word;
    color: #fff;
    display: -webkit-box;
    font-size: 13px;
    font-weight: 700;
    line-height: 17px;
    margin-top: 6px;
    overflow:
  hidden;
    text-overflow: ellipsis;
    text-shadow: 0 0 4px rgba(0,0,0,.3);
  }


  .work_head .page_area {
    bottom: 5px;
    position: absolute;
    text-align: right;
    width: 100%;
    z-index: 2030;
  }




  .work_head .page_area .page_number {
    color: hsla(0,0%,100%,.4);
    display: inline-block;
    font-size: 13px;
    line-height: 13px;
    margin-right: 5px;
  }

  .work_head .page_area {
    text-align: right;
  }

  .work_head .page_area .current {
  color: #fff;
  margin-right: 2px;
}

.title{
    color: #000;
    font-size: 19px;
    font-weight: 500;
    height: 50px;
    line-height: 24px;
    padding-top: 26px;
    margin-right: 10px;
}

.ico_arrow{
    float: left;
    margin-left: 15px;
}





.lst_type6.main {
    margin: 0;
    padding: 0;
}

.lst_type6.main li {
    border-top:none;
}

.lst_type6.main a {
    height: 107px;
    position: relative;
}

.lst_type6 a {
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    height: 101px;
    overflow: hidden;
    position: relative;
}

.lst_type6.main .pic {
    background-position:100% 0;
    -webkit-background-size:cover;
    background-size: cover;
    height: 100%;
    right: 0;
    top: 0;
    width: 100%;
}

.lst_type6 .pic {
    -webkit-background-size:
  153px 153px;
    background-size: 153px 153px;
    height: 153px;
    position: absolute;
    right: 0;
    top: -25px;
    width: 153px;
  }

.lst_type6.main .info {
    margin:0 16px 0 160px;
}

.lst_type6 .info {
    margin:-4px 114px 0 21px;
    position: relative;
    z-index: 10;
  }

.lst_type6 .info .subj {
    color: #242424;
    font-size: 13px;
    line-height: 14px;
    margin-top: 2px;
}

.lst_type6 .genre {
    font-size: 11px;
    margin:0;
    padding:0;
  }

.lst_type6 .summary {
    color: #242424;
    font-size: 11px;
    line-height: 12px;
    margin-top: 6px;
    margin:0;
    padding:0;
}


.daily_list.main {
    margin-bottom: 0;
}

.lst_type1 {
    border-bottom: 1px solid #e0e0e0;
    margin-right: -2px;
    overflow: hidden;
}

.daily_list .lst_type1 li {
    float: right;
    width: 33.3%;
    height: 224px;
    border: none;
}

.lst_item {
    background:#fff;
    display: block;
    position: relative;
}

.icon_area {
    left: 5px;
    position: absolute;
    top: 4px;
    z-index: 10;
}

.icon_area .ico_up, .icon_area .ico_up_fr {
    background-position:
  -702px -1087px;
    height: 24px;
    width: 22px;
}

.icon_area .ico {
    float: right;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
}

.pic {
    position: relative;
}

.lst_item .info {
    border-left: 1px solid #e0e0e0;
    display: flow-root;
    height: 76px;
    padding: 0 10px;
    vertical-align: middle;
}

.lst_item .genre {
    font-size: 11px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.a .lst_item .subj {
    line-height: 15px;
    margin-top: 0;
}

.lst_item .subj {
    color: #242424;
    font-size: 13px;
    font-weight: 700;
    line-height: 14px;
    margin-top: -3px;
}

.a .lst_item .subj .ellipsis {
    height: 30px;
}

.lst_item .subj .ellipsis {
    line-clamp: 2;
    height: 29px;
}

.ellipsis {
    line-clamp: 1;
    -webkit-box-orient:vertical;
    display: -webkit-box;
    overflow:hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}

.lst_item .grade_area {
    margin-top: -15px;
}

.a .grade_num {
    margin-top: 0;
}

.grade_num {
    font-size: 13px;
    line-height: 9px;
    margin:-1px 0 0 -1px;
    margin-top: -1px;
}

.grade svg{
    color: rgb(144, 61, 216);
}


.main_login a {
    border-bottom: 1px solid #e0e0e0;
    color: rgb(144, 61, 216);
    display: block;
    font-size: 13px;
    padding: 10px 17px;
    text-align: center;
}

.main_login span, .main_login strong {
    display: inline-block;
    vertical-align: middle;
}

.main_login span {
    margin: 4px 0;
}

.main_login a {
    color: rgb(144, 61, 216);
    font-size: 13px;
    text-align: center;
}

.main_login strong {
    border: 1px solid rgb(144, 61, 216);
    -webkit-border-radius: 11px;
    border-radius: 11px;
    font-size: 13px;
    line-height: 19px;
    margin: 4px 0 4px 5px;
    padding: 0 9px;
    white-space: nowrap;
}

._favoriteGenre{
    border: none;
}

.main_genre_wrap .title a::after {
    background-position: -1134px -210px;
    top: 10px;
}

.main_genre_wrap .title .genre_dsc {
    color: hsla(0,0%,100%,.7);
    font-size: 11px;
    font-weight: 400;
    margin-left: 2px;
}

.main_genre_wrap .title a {
    color: #fff;
    line-height: 38px;
}

.main_genre_wrap .title {
height: 30px;
padding-top: 5px;
font-size: 19px;
}

.main_genre_wrap.g_fantasy {
    /* background:#6F2C91; */
    background: #870074;
}

.main_genre_wrap.g_romance {
    background: #00A693;
}

.main_genre_wrap .main_genre_cont {
    padding: 11px 0 15px;
}

.main_genre_wrap .scroll_list_main {
    overflow: hidden;
}

.main_genre_wrap .scroll_list_main ul {
    -webkit-box-sizing:
  border-box;
    box-sizing: border-box;
    display: table;
    overflow:
hidden;
    padding: 0 9px 0 12px;
    width: 100%;
  }

.main_genre_wrap .scroll_list_main li {
    display: table-cell;
    padding-right: 3px;
}

.main_genre_wrap .scroll_list_main a {
    -webkit-border-radius: 31px;
    border-radius: 31px;
    display: block;
    height: 62px;
    overflow: hidden;
    position: relative;
    width: 62px;
}

.scroll_list_main ul {
    display: flex; /* Use flexbox for horizontal layout */
    padding: 0; /* Remove default padding */
    margin: 0; /* Remove default margin */
    transform: translateX(0); /* Reset any visual shifting */
    overflow-x: auto; /* Allow scrolling */
    -ms-overflow-style: none; /* Hide scrollbar for IE and Edge */
    scrollbar-width: none; /* Hide scrollbar for Firefox */
}

.toprated_list {
    margin-bottom: -1px;
}

.lst_type2 {
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 60px;
}

.lst_type2 a {
    display: block;
}

.row {
    display: table;
    width: 100%;
}

.lst_type2 .number {
    font-size: 14px;
    height: 58px;
    text-align: center;
    width: 42px;
    left: 7px;
    position: relative;
}

.lst_type2 .col {
    vertical-align: middle;
}

.col {
    display: table-cell;
    vertical-align: top;
  }



.lst_type2 .pic {
    width: 40px;
    height: 40px;
    padding: 0;
    margin: 0;
    display: flex;
}

.lst_type2 .pic span::before {
    border: .5px solid rgba(0,0,0,.1);
    -webkit-border-radius: 4px;
    border-radius: 4px;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.lst_type2 .pic span img {
    height: 40px;
    width: 40px;
}

.lst_type2 .info {
    padding:
  0 16px 0 10px;
}

.lst_type2 .genre {
    color: #8c8c8c;
    font-size: 11px;
    margin-bottom: -3px;
}

.lst_type2 .subj {
    font-size: 13px;
    height: 17px;
    padding-top: 1px;
}

.lst_type2 .subj .ellipsis {
    line-height: 16px;
}

.lst_type2 .subj {
    font-size: 13px;
}
.icon-container {
    position: absolute; /* Set the icon to be positioned relative to its parent */
    top: 50%; /* Center it vertically */
    left: 50%; /* Center it horizontally */
    margin-left: -1px;
    bottom: -16px;
    transform: translate(-50%, -50%); /* Align icon's center with the number's center */
    z-index: 0; /* Place the icon behind the number */
}

.lst_type2 .number .rank1 {
    position: relative; /* Ensure proper layering */
    z-index: 1; /* Bring number above background */
    color: #fff; /* Set text color */
    font-size: 16px; /* Adjust font size */
    background: transparent; /* Remove background from the number itself */
    border-radius: 50px; /* Keep rounded edges */
}

.lst_type2 .number .rank1::before {
    content: ''; /* Empty content for the pseudo-element */
    position: absolute; /* Position relative to .rank1 */
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -60%);
    width: 20px;
    height: 20px;
    background-color: rgb(144, 61, 216);
    border-radius: 50px;
    z-index: -1;
}







.main_header_daily{
    background: #fff;
    position: relative;
    z-index: 3010;
    height: 118px;
}

.daily_wrap{
    background: #fff;
    border-bottom: 1px solid #eaeaea;
    border-top: 1px solid #eaeaea;
}

.daily_tab_btn {
    height: 40px;
    margin: 0;
    overflow: hidden;
    padding: 0;
}

.daily_tab_btn li {
    float: right;
    margin: 0;
    padding: 0;
    width: 14.28%;
}

.daily_tab_btn a {
    color: #000;
    display: block;
    font-size: 12px;
    font-weight: 700;
    line-height: 40px;
    padding: 0 11px;
    position: relative;
    white-space: nowrap;
}


.daily_list {
    position: relative;
    z-index: 1;
}

.daily_list, .popular_list {
    margin-bottom: -1px;
    overflow:
  hidden;
}

.flick-ct {
    background:
  #fff;
    float: left;
    overflow:
  hidden;
  margin-bottom: 350px;
  }

.flick-ct {
    top: 0;
    left: 0;
    width: 100%;
    display: none; /* Hide all by default */
}

.flick-ct.active {
    display: block; /* Show only active panel */
}

.daily_tab_btn li.on a {
    background: #fd5958;
    color: #fff;
}

@media (min-width: 481px) {
    .lst_type1.v2 li {
      width: 25%;
    }
  }




.sub_my::after {
    clear: both;
    content: "";
    display: table;
}

.sub_my {
    background: #fff;
    border-bottom: 1px solid #e0e0e0;
}

.sub_my li {
    float: right;
}

.sub_my a {
    color: #000;
    display: block;
    line-height: 40px;
    min-width: 125px;
    text-align: center;
}

.sub_my .on a {
    background: #2393df;
    color: #fff;
    margin: -1px 0;
    padding: 1px 0;
}

.my_tool {
    background:
  #fafafa;
    border-bottom:
  1px solid #e0e0e0;
    height: 30px;
    line-height: 30px;
    overflow:
  hidden;
  }

  .my_tool .total {
    background: none;
    border: 0;
    color: #000;
    cursor: pointer;
    float: left;
    font-size: 13px;
    height: 30px;
    margin-left: 6px;
    padding: 0 10px;
    position: relative;
}

.my_tool {
    line-height: 30px;
}

.lst_type3 {
    /* margin-bottom: -1px; */
    position: relative;
    /* margin:
0; */
padding: 0;
padding-bottom: 200px;
}

.lst_type3.v2 li {
    background: #fff;
    border-bottom: 1px solid #e0e0e0;
    margin:
0;
  padding:
0;
}

.lst_type3 a {
    display: block;
    position: relative;
  }

.lst_type3 .icon_area {
    left: 3px;
    top: 2px;
}

.lst_type3 .pic {
    width: 71px;
}

.lst_type3 .col {
    height: 67px;
    vertical-align: middle;
}

.lst_type3 .info {
    padding-right: 13px;
}

.lst_type3.v2 .subj {
    color: #000;
    font-size: 14px;
    height: 18px;
}

.lst_type3.v2 .date {
    color: #848484;
    font-size: 11px;
    margin-top: -1px;
}



.wrap {
    -webkit-box-orient:
  vertical;
    -webkit-box-direction:
  normal;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction:
  column;
    flex-direction: column;
    height: 100%;
    position: relative;
    z-index: 10;
}

.sub_header2::before {
    color: transparent;
    content: ".";
    position: absolute;
}


.sub_header2 {
    background-color: transparent; /* Set background to transparent */
    background-color: rgba(43, 43, 43, 0.5);
    /* backdrop-filter: blur(5px); */
    background-size: 100% auto;
    height: 48px;
    left: 0;
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}



.sub_header2 .btn_home::after {
    background-position:
 -837px -233px;
    content: "";
    display: inline-block;
    height: 23px;
    margin:
  9px 0 0 11px;
    vertical-align: top;
    width: 23px;
}

.sub_header2 .btn_home svg{
    content: "";
    display: inline-block;
    height: 27px;
    margin: 15px 30px 0 11px;
    vertical-align: top;
    width: 27px;
}


.u_vc {
    height: 1px;
    left: 0;
    top: 0;
    width: 1px;
}

.u_hc, .u_skip, .u_vc {
    font-size: 0;
    line-height: 0;
    overflow:
  hidden;
    position: absolute;
    visibility: hidden;
}


.sub_header2 .btn_info::after {
    background-position: -1178px -221px;
    content: "";
    display: inline-block;
    height: 21px;
    margin: 7px 0 0 7px;
    vertical-align: top;
    width: 21px;
}

.sub_header2 .btn_fav {
    height: 25px; /* Decrease the height */
    position: absolute;
    left: 30px !important;
    top: 15px !important;
    background-color: #fff;
    color: #000;
    font-size: 11px; /* Decrease the font size */
    padding: 0 5px; /* Decrease the padding */
    line-height: 25px; /* Center the text vertically */
    border-radius: 50px; /* Optional: Add some rounding to the corners */
}

.sub_header2 .btn_faved {
    height: 25px; /* Height of the button */
    width: 25px; /* Set width equal to height for a circular shape */
    position: absolute;
    left: 30px !important;
    top: 15px !important;
    background-color: #fff;
    color: #000;
    font-size: 11px;
    padding: 0; /* Remove padding to maintain circular shape */
    line-height: 25px; /* Center the text vertically */
    border-radius: 50%; /* Set border-radius to 50% for a circular shape */
    display: flex; /* Use flexbox to center content */
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
}


.sub_header2 .btn_fav.on .fav_inner.v2::before, .sub_header2 .btn_fav.on .fav_inner::after {
    display: none;
}

.sub_header2 .btn_fav.on .fav_inner {
    background-position: -1178px -198px;
    font-size: 0;
    height: 21px;
    margin: 7px 0 0 7px;
    padding: 0;
    width: 21px;
}

.sub_header2 .btn_fav .fav_inner::after {
    background-position:
  -858px -660px;
    content: "";
    height: 7px;
    left: 6px;
    position: absolute;
    top: 7px;
    width: 7px;
}



#ct::after {
    clear: both;
    content: "";
    display: block;
}

.ct_type4{
    margin: 0;
    padding: 0;
    top: 0 !important;
}


.detail_info {
    padding: 51px 21px 30px 140px;
    position: relative;
}

.detail_info .genre {
    color: #fff;
    display: inline-block;
    font-size: 13px;
    line-height: 16px;
    white-space: nowrap;
    margin: 0;
    padding: 0;
}

.detail_info .subj {
    word-wrap: break-word;
    color: #fff;
    font-size: 23px;
    font-weight: 500;
    line-height: 27px;
    margin-top: 4px;
    word-break: break-word;
}

.detail_info .summary {
    color: #fff;
    font-size: 13px;
    line-height: 17px;
    margin-top: 10px;
    margin: 0;
    padding: 0;
}
.detail_info .grade_area {
    margin-top: 6px;
    white-space: nowrap;
    margin-bottom: 0;
    padding: 0;
}

.detail_info .grade_area .views::before {
    content: "";
    height: 9px;
    margin: 4px 3px 0 0;
    vertical-align: top;
    width: 13px;
}

.detail_info .grade_area .subscribers::before {
    content: "";
    display: inline-block;
    height: 10px;
    margin: 3px 3px 0 0;
    vertical-align: top;
    width: 16px;
}

.detail_info .grade_area span + a, .detail_info .grade_area span + span {
    margin-left: 5px;
}

.detail_info .grade_area .subscribers, .detail_info .grade_area a {
    display: inline-block;
    vertical-align: middle; /* Change to middle */
}

.detail_info .grade {
    height: 11px;
    margin: 0; /* Adjust margin */
    width: 11px;
    vertical-align: middle; /* Add vertical alignment */
}

.detail_info .grade_num {
    color: #fff;
    font-size: 11px;
    line-height: 16px; /* Ensure consistent line height */
    margin: 0; /* Adjust margin */
    vertical-align: middle; /* Add vertical alignment */
}

.detail_info .btn_rate {
    background: #fff;
    border-radius: 9px;
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    line-height: 16px;
    padding: 0 6px 0 7px;
    position: relative;
    text-align: center;
    vertical-align: middle; /* Add vertical alignment */
    white-space: nowrap;
}

.detail_info .grade_area .subscribers {
    color: #fff;
    font-size: 11px;
    line-height: 16px;
}

.detail_info .grade_area .views {
    color: #fff;
    display: inline-block;
    font-size: 11px;
    line-height: 16px;
    vertical-align: middle; /* Add vertical alignment */
}





.lst_type3 {
    margin-bottom: -1px;
    position: relative;
    margin: 0;
    padding: 0;
}

.detail_white li {
    background: hsla(0,0%,100%,.96);
    border-bottom: 1px solid #d5d1cd;
  }
.lst_type3 a {
    display: block;
    position: relative;
}

.lst_type3 .pic {
    width: 71px;
}

.lst_type3 .img_canvas {
    height: 67px;
    width: 71px;
}

.lst_type3 .info {
    padding-left: 13px;
}

.detail_white .sub_title, .detail_white li {
    color: #3d3d3d;
  }

.lst_type3 .sub_title .bgm_w::after, .lst_type3 .sub_title .icon_wrap::after {
    clear: both;
    content: "";
    display: table;
}

.lst_type3 .sub_info::after {
    clear: both;
    content: "";
    display: table;
}

.detail_black .likeList::before {
    background-position: -1034px -562px;
    /* content: ""; */
    display: inline-block;
    height: 15px;
    margin-right: 3px;
    vertical-align: top;
    width: 15px;
}

.lst_type3 .sub_info .date {
    margin-right: 10px;
}

.detail_white .date {
    color: #848484;
  }

.lst_type3 .date, .lst_type3 .likeList {
    float: right;
    font-size: 12px;
    color: #3d3d3d;
}

.detail_black .likeList, .detail_black .num {
    color: #3d3d3d;
}

.lst_type3 .num {
    color: #3d3d3d;
    height: 58px;
    padding-right: 20px;
    text-align: center;
    text-align: right;
    width: 57px;
    position: static;
}



















.sub_header3 {
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 3100;
    height: 45px;
}

.sub_header3 h1 {
    background:
  #2f2f2f;
    font-weight: 400;
    text-align: center;
    margin: 0;
    color: #fff;
}

.sub_header3 h1.h1_viewer {
    padding:
  0 60px 0 57px;
    text-align: right;
    margin: 0;
}


.sub_header3 h1.h1_viewer a {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sub_header3 h1 a {
    color: #fff;
    display: inline-block;
    font-size: 15px;
    height: 37px;
    line-height: 40px;
    white-space: nowrap;
}


.sub_header3 .btn_list::after {
    display: inline-block;
    height: 16px;
    margin: 12px 0 0 10px;
    vertical-align: top;
    width: 19px;
}

.sub_header3 .btn_list.v2 {
    right: 11px;
    left: auto;
}

.sub_header3 .btn_list {
    height: 100%;
    position: absolute;
    left: 11px;
    top: 0;
    width: 39px;
}





.viewer_img {
    overflow: hidden;
}


.flick-cnt {
    background: #fff;
    float: left;
    overflow: hidden;
}




.viewer_cont_wrap {
    border-top:
  1px solid #efefef;
    margin:
  22px 20px 96px;
    padding-bottom: env(safe-area-inset-bottom);
}


.viewer_updated {
    border-bottom: 1px solid #efefef;
    color: rgb(144, 61, 216);
    font-size: 13px;
    line-height: 44px;
}

.viewer_top::before {
    display: block;
    height: 4px;
    margin: 0 auto;
    width: 7px;
}


.viewer_top {
    background: #e9e9e9;
    display: flex; /* Change to flex */
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center items horizontally */
    font-size: 11px;
    height: 50px;
    padding-top: 5px; /* Adjust padding as needed */
    text-align: center;
    margin: 30px -20px 0;
}




.viewer_footer::after {
    clear: both;
    content: "";
    display: block;
}

@media (min-width: 768px) {
    .viewer_footer {
      height: 59px;
    }
}

.viewer_footer {
    background:
  #2f2f2f;
    bottom: 0;
    height: 43px;
    left: 0;
    padding-bottom: env(safe-area-inset-bottom);
    position: fixed;
    width: 100%;
    z-index: 3000;
}

@media (min-width: 768px) {
    .viewer_sequence {
      margin-top: -82px;
      padding:
  2px 0 2px 2px;
    }
}

.viewer_sequence {
    background-color: #000;
    margin-top: -53px;
    padding: 1px 0 1px 1px;
    position: relative;
    z-index: 0;
}

.viewer_sequence .scroll_list {
    overflow: hidden;
}

.viewer_sequence .sequence_list {
    display: table;
    width: 100%;
    margin: 0;
    padding: 0;
}

.viewer_sequence .sequence_list li {
    display: table-cell;
}

.viewer_sequence .sequence_list li a {
    display: block;
    height: 51px;
    margin-right: 1px;
    position: relative;
    width: 55px;
  }

.viewer_sequence .sequence_list li a::before {
    background: rgba(0,0,0,.6);
    bottom: 0;
    content: "";
    display: block;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.viewer_footer a {
    color: #ebebeb;
    font-size: 14px;
    position: relative;
}

@media (min-width: 768px) {
    .viewer_sequence .sequence_list li a {
      height: 78px;
      margin-right: 2px;
      width: 84px;
    }
}

.viewer_sequence .sequence_list li .num {
    box-align: center;
    -webkit-box-align:
  center;
    -webkit-box-pack:
  center;
    bottom: 0;
    color: #fff;
    display: box;
    display: -webkit-box;
    font-size: 12px;
    left: 0;
    line-height: 14px;
    position: absolute;
    right: 0;
    top: 0;
}

.viewer_footer a.btn_likeit::before {
    background-position:
  -1178px -797px;
    content: "";
    display: inline-block;
    height: 18px;
    margin:
  -2px 5px 0 0;
    vertical-align: middle;
    width: 20px;
}

.viewer_footer a.btn_likeit {
    color: #ebebeb;
    float: left;
    line-height: 43px;
    margin-left: 13px;
    padding: 0 8px;
}


.viewer_footer a.btn_likeit[aria-disabled="false"] {
    color: #ebebeb;
}

.viewer_footer a.btn_comment::before {
    background-position:
  -1178px -755px;
    content: "";
    display: inline-block;
    height: 20px;
    margin:
  -1px 5px 0 0;
    vertical-align: middle;
    width: 18px;
}

.viewer_footer a.btn_comment[aria-disabled="false"] {
    color: #ebebeb;
}

.viewer_footer a.btn_comment {
    color: #666;
    float: left;
    line-height: 43px;
    padding: 0 8px;
}

.viewer_footer .paginate {
    float: right;
    line-height: 43px;
    margin-right: 8px;
}

.viewer_footer .paginate .lk_prev::after {
    height: 19px;
    width: 14px;
}

.viewer_footer .paginate .lk_next::after, .viewer_footer .paginate .lk_prev::after {
    content: "";
    display: inline-block;
    margin: 12px 0 0 10px;
}

.viewer_footer .paginate .num1 {
    color: #ebebeb;
    margin: 0 3px;
}

.viewer_footer .paginate .lk_next::after {
    background-position:
  -1126px -352px;
    height: 19px;
    width: 14px;
}

.viewer_footer .paginate .lk_next::after, .viewer_footer .paginate .lk_prev::after {
    content: "";
    display: inline-block;
    margin:
  12px 0 0 10px;
}

.viewer_footer .paginate .lk_next, .viewer_footer .paginate .lk_prev {
    display: inline-block;
    height: 43px;
    vertical-align: top;
    width: 34px;
}






.viewer_sns_area {
    border-bottom:
  1px solid #efefef;
    padding:
  19px 0;
    text-align: center;
}

.viewer_sns_area .fav_area {
    background: #e9e9e9;
    color: #353535;
    font-size: 13px;
    height: 32px;
    line-height: 31px;
    margin-top: 11px;

    border-radius: 17px;
    cursor: pointer;
    display: inline-block;
    height: 35px;
    line-height: 36px;
    padding: 0 14px;
    vertical-align: top;
}

.viewer_sns_area .btn_favorites::before {
    content: "";
    display: inline-block;
    height: 8px;
    margin: -2px 6px 0 0;
    vertical-align: middle;
    width: 8px;
}





.viewer_also_like {
    border-bottom: 1px solid #efefef;
}

.viewer_also_like h3 {
    font-size: 14px;
    font-weight: 400;
    padding: 22px 0 6px;
    margin: 0;
}

.lst_type7 {
    border-top: 1px solid #efefef;
    margin-right: -2px;
    overflow:
  hidden;
    vertical-align: top;
    margin:0;
    padding:0;
}

.lst_type7 li {
    float: left;
    width: 33.3%;
}

.lst_item {
    background: #fff;
    display: block;
    position: relative;
}

.lst_type7 li:first-child .lst_item .info {
    border-left:
  none;
}


.lst_type7 .lst_item .info {
    border-left:
  1px solid #efefef;
    height: 83px;
    padding:
  0 9px 0 7px;
    text-align: right;
    vertical-align: top;
}

.lst_type7 .lst_item .subj {
    color: #353535;
    font-size: 12px;
    font-weight: 400;
    margin-top: 8px;
    margin-bottom: 0;
}


.lst_type7 .lst_item .subj .ellipsis {
    height: 15px;
}

.lst_type7 .lst_item .summary {
    color: #7d7d7d;
    font-size: 10px;
    font-weight: 300;
    line-height: 11px;
    margin: 0;
}


.lst_item .grade_area1 {
    position: relative;
    margin-top: 8px;
    bottom: 7px;
}


.a .grade_num {
    margin-top: 0;
}


.lst_type7 .lst_item .summary .ellipsis {
    -webkit-line-clamp: 3;
}

.lst_type7 .lst_item .subj .ellipsis {
    -webkit-line-clamp: 1;
    height: 15px;
}

.lst_type7  .pic{
    margin: 0;
}





.scroll_list {
    overflow-x: auto;
    white-space: nowrap;
    scroll-behavior: smooth;
    direction: ltr;
}

.eg-flick-panel {
    display: inline-block;
    /* width: 100%; */
    transition: transform 1s ease;
}


.eg-flick-panel.on {
    transition: transform 0.3s ease, border 0.3s ease; /* Smooth transition */
}


.viewer_sequence .sequence_list li.on a::before {
    background: none;
}

.sub_header3 .btn_list1 {
    height: 100%;
    position: absolute;
    right: 11px;
    top: 0;
    width: 39px;
}


.sub_header3 .btn_prev::after {
    background-position:
  -188px -1039px;
    content: "";
    display: block;
    height: 41px;
    height: 40px;
    width: 40px;
}


.sub_header3 .btn_prev {
    left: 5px;
    position: absolute;
    top: 0;
}



.sub_header3 .btn_prev {
    top: 5px;
}

.sub_header3 .btn_list1 {
    top: 7px;
}



.comment_form_folder_mobile{
    position: relative;
    margin: 27px 15px 0;
    box-sizing: border-box;
    height: auto;
}


.go_top {
  bottom: 40px;
  overflow: hidden;
  position: fixed;
  right: 20px;
  z-index: 100;
  background-color: #fff; 
   border-radius: 50%; /* Make it circular */
   
  border: 1px solid #e0e0e0; /* Add border */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Optional: add shadow for depth */
  transition: background-color 0.3s; /* Optional: smooth background transition */
}

.btn_top {
  display: flex; /* Use flexbox for centering */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  height: 56px;
  width: 56px;
}

.btn_top:hover {
  background-color: #f0f0f0; /* Optional: change background on hover */
}



#header,
.viewer_footer {
    transition: opacity 0.3s ease;
    opacity: 1;
}








.wcc_CommentEmpty__root {
  display: block;
  height: auto;
  margin: 120px 0;
  text-align: center;
}

.wcc_CommentEmpty__message {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 400;
  color: #999999;
}
.tx_up {
  color: rgb(144, 61, 216);
  font-size: 13px;
  margin-right: 5px;
}

.tx_up_mobile{
    color: rgb(144, 61, 216);
    font-size: 13px;
    margin-right: 5px;
}


.episode_item.read .episode_title span,
.episode_item.read .episode_date,
.episode_item.read .episode_like,
.episode_item.read .episode_number{
    color: #999;
    opacity: 0.6;
}
.episode_item.read .episode_like em{
    color: #7e7e7e;
}


.comment_form p{
    color: #999999;
}


._episodeItem.read .info .sub_title .ellipsis,
._episodeItem.read .info .sub_info .date,
._episodeItem.read  .num{
    color: #999;
    opacity: 0.6;
}



._episodeItem.read .info .sub_info .likeList {
    color: #7e7e7e;
}

._episodeItem.read .episode_like em{
    color: #7e7e7e;
}



.about_header{
    left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  padding: 0 20px 20px 20px;
    padding-bottom: 20px;
  position: absolute;
  align-items: center;
  flex-direction: column;
  justify-content: flex-end;
  /* padding-bottom: 85px; */
}




.about_header_title{
    margin-top: 76px;
  text-align: center;
  font-weight: 700;
    line-height: 48px;
    margin: 0;
}


.about_header_description{
    font-size: 20px;
    max-width: unset;
    margin-top: 32px;
    line-height: 31px;
    text-align: center;
    font-weight: 400;
}


.btn-about{
    margin: 10px;
}

.about_header_container{
    position: relative;
}





/* Mobile styles */
@media (max-width: 768px) {
    .about_header {
        padding: 0 16px; /* Reduce padding for smaller screens */
        align-items: center; /* Center items for mobile */
    }

    .about_header_title {
        margin-top: 50px; /* Adjust margin for smaller viewports */
        font-size: 28px; /* Reduce font size */
        line-height: 36px; /* Adjust line height */
    }

    .about_header_description {
        font-size: 18px; /* Smaller font size */
        margin-top: 20px; /* Adjust spacing */
        line-height: 28px; /* Adjust line height */
    }

    .btn-about {
        margin: 8px; /* Adjust button margin for smaller screens */
        padding: 10px 15px; /* Adjust button padding */
    }
}

@media (max-width: 480px) {
    .about_header {
        padding: 0 12px; /* Further reduce padding for mobile devices */
    }

    .about_header_title {
        margin-top: 30px; /* Adjust margin */
        font-size: 24px; /* Further reduce font size */
        line-height: 32px; /* Adjust line height */
    }

    .about_header_description {
        font-size: 16px; /* Further decrease font size */
        margin-top: 15px; /* Adjust spacing */
        line-height: 24px; /* Adjust line height */
    }

    .btn-about {
        margin: 5px; /* Further reduce button margin */
        padding: 8px 12px; /* Adjust button padding */
    }


}



.about_header_img {
    background-image: url('{% static 'poster_about.jpg' %}');
    background-size: cover; /* Cover the container */
    background-position: center; /* Center the image */
    width: 100%; /* Full width of the container */
    height: 650px; /* Default height for larger screens */
}


@media (max-width: 768px) {
    .about_header_img {
        height: 300px; /* Adjust height for tablets */
    background-image: url('{% static 'poster_about.jpg' %}');
    background-size: cover; /* Cover the container */
    background-position: center; /* Center the image */
    width: 100%; /* Full width of the container */
    }
}

@media (max-width: 480px) {
    .about_header_img {
        height: 400px; /* Increase height for mobile to make it larger */
    background-image: url('{% static 'poster_about.jpg' %}');
    background-size: cover; /* Cover the container */
    background-position: center; /* Center the image */
    width: 100%; /* Full width of the container */
    }
}








.intro_about{
  margin: 0 auto;
  padding: 16px 20px;
    padding-top: 16px;
    padding-bottom: 250px;
  max-width: 1014px;
  text-align: center;
  padding-top: 60px;
    margin-top: 50px;
}

.intro_about_title{
    font-size: 30px;
    line-height: 41px;
    margin-bottom: 70px;
    text-align: center;
  font-weight: 700;
}




.propety_title{
    font-size: 25px;
    line-height: 31px;
    margin-bottom: 16px;
    font-weight: 700;
}

.property_icon {
    width: 120px;
    height: 120px;
    margin-bottom: 40px;
}

.properties {
    display: flex;
    flex-wrap: nowrap;
    max-width: 1192px;
    margin: 0 auto;
    padding: 0;
    justify-content: space-between;
}

.property {
    width: calc(25% - 16px);
    margin-bottom: 64px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.property_title {
    min-height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.property:last-child {
    margin-right: 0;
}

.property_description {
    padding: 10px 30px;
    font-size: 18px;
    line-height: 31px;
    font-weight: 400;
}



@media (max-width: 768px) {
    .properties {
        flex-wrap: wrap; /* Allow items to wrap */
        justify-content: center;  /* Center items when wrapped */
    }

    .property {
        width: calc(50% - 16px); /* Two items per row */
        margin-bottom: 32px; /* Reduced margin for better spacing */
    }

    .property_title {
        min-height: 40px; /* Adjust title height if needed */
    }
}

@media (max-width: 480px) {
    .property {
        width: 100%; /* Full width on very small devices */
        margin-bottom: 20px; /* Less space between items */
    }


    .property_title {
        min-height: 30px; /* Adjust for small devices */
    }
}


.logo img{
    width: 50px;
    margin: auto 30px;
}