/* -----------------------------------  Root  -----------------------------------  */
:root{
    --main-color: #42a8b9;
    --bg-gray: #ededed;
    --text-gray: #808080;
}

*:not(#divLargerImage){
    transition: background-color 0.3s, color 0s, transform 0.2s, box-shadow 0.2s, opacity 0.2s;
}
button{
    white-space: nowrap;
}
button:not(button[disabled]){
    cursor: pointer;
}
button[disabled]{
    pointer-events: none;
}
a:link {
    text-decoration: none!important;
}
select{
    background-size: 15px 7px;
    background-position: center right 20px;
}
input, 
select{
    padding: 6px 20px !important;
    font-size: 14px;
    font-weight: 400;
    color: var(--text-gray);
}

input::placeholder{
    font-size: 14px;
    font-weight: 400;
    opacity: 0.5;
}


/* -----------------------------------  Global  -----------------------------------  */

body{
	overflow-x: hidden;
}
/* Title */
.gb-title-l{
    font-weight: 400 !important;
    color:var(--main-color); 
    line-height: normal; 
    font-size: 40px;
    padding-top:50px;
}
.gb-sub-title-l{
    font-size: 20px;
    font-weight: 400 !important;
    line-height: normal;
    color: gray;
}
@media(max-width: 550px){
    .gb-title-l{
        font-size: 26px !important;
        padding-top: 20px;
    }
    .gb-sub-title-l{
        font-size: 16px;
    }
}

/* Section Layout */
.gb-section-container{
    width: 100%; 
    max-width: 1380px;
    padding: 0 50px;
    margin: auto;
}
@media(max-width: 767px){ 
    .gb-section-container{
        padding: 0 20px;
    }
}

/* Page End Circle Decoration */
.gb-page-end-ball{
    position: relative;
}
.gb-page-end-ball::after{
    content: "";
    position: absolute;
    right: 10%;
    bottom: -5vw;
    z-index: 0;
    font-size: 200px;
    display: block;
    height: 50vw;
    width: 50vw;
    max-width: 800px;
    max-height: 800px;
    min-width: 400px;
    min-height: 400px;
    border-radius: 50%;
    opacity: 0.07;
    background-color: var(--main-color);
    pointer-events: none;
    mix-blend-mode: multiply;
}

/* Stretch Image */
.gb-stretch-img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
}



/* -----------------------------------  Header -----------------------------------  */
/* Main Header */
#cs-main-header{
    z-index: 120 !important
}
#cs-second-header{
    z-index: 110 !important
}
.bg-left nav{
    z-index: 100 !important
}

#cs-main-header{
    z-index: 4;
    width: 100%;
    background-color: #fff !important;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    border-radius: 0 0 15px 15px;
}
#cs-main-header #myNavbar{
    max-width: 1430px;
    box-shadow: unset;
    margin: auto;
}
#cs-main-header .w3-left{
    margin-left: 40px;
}
#cs-main-header .w3-left img{
    height: 40px;
}

#cs-main-header .w3-right{
    margin-right: 40px;
    padding-top: 20px;
}
#cs-main-header .w3-right .w3-dropdown-content{
    z-index: 2; 
    border-radius: 0 0 30px 30px; 
    overflow:hidden; 
    margin-right:50px;
    top: 77px;
}

#cs-main-header .w3-dropdown-content{
    box-shadow: 0 9px 10px 1px rgba(0, 0, 0, 0.15);
}
#cs-main-header .w3-right > div.w3-dropdown-hover{
	display: ruby;
}
#cs-main-header .w3-button:hover{
	color:var(--main-color) !important;
	background-color: unset !important;
}

/* Second Header */
#cs-second-header{
    z-index: 3;
    height: 120px;
    padding-top: 60px;
    width: 100%;
    background: rgba(0, 0, 0, 0.5) !important;
    border-radius: 0 0 15px 15px;
}
#cs-second-header #myNavbar{
    height: 60px;
    max-width: 1430px;
    background: unset;
    box-shadow: unset;
    margin: auto;
}
#cs-second-header #myNavbar > .w3-right{
    color: white; 
    padding: 26px 56px;
}


/* Mobile Menu */
#mySidebar{
    display:none; 
    z-index: 2; 
    margin-top:50px; 
    height: 100%;
    padding-top:100px;
}
#cs-menu-btn{
    padding:28px;
}

#myNavbar a,
#myNavbar button{
    font-size: 14px !important;
    font-weight: 400;
    text-decoration: unset;
}
#cs-second-header #myNavbar a:hover{
	opacity: 0.7;
}
#myNavbar button:hover,
.w3-dropdown-hover:hover > .w3-button:first-child{
    background-color: unset !important;
    color: var(--main-color) !important;
}
#myNavbar .w3-dropdown-content{
    border-radius: 0 0 10px 10px !important;
}
#myNavbar .w3-dropdown-content a:hover{
    background-color:  var(--main-color) !important;
    color: white !important;
}

@media(max-width:720px){
    #cs-main-header .w3-right{
        margin-right: 0;
    }
    #cs-main-header .w3-right a{
        padding: 16px 8px;
    }
    #cs-main-header .w3-left{
        margin-left: 20px;
    }
    #cs-main-header .w3-left a{
        padding: 22px 0 12px;
    }
    #cs-main-header .w3-left a img{
        height: 35px;
    }
    #cs-second-header .w3-right{
        padding: 26px 25px !important;
    }
}
@media (max-width: 600px){
    #cs-menu-btn #menuIcon{
        transform: scaley(0.75) translateY(6px);
    }
    nav#mySidebar{
        
    }
    nav#mySidebar a{
        font-size: 16px;
        font-weight: 400;
        padding-left: 10%;
    }
    a.cs-mobile-sublevel{
        padding-left: 78px !important;
    }
}




/* ----------------------------------- Footer -----------------------------------  */
.footer{
    max-width: 100% !important;
    margin: auto;
    position: relative;
    display: flex;
    justify-content: flex-end;  
    color:white;
    z-index: 99;
}
.footer .cs-footer-l{
     width: 60%; 
     display:flex; 
     color:white;
     max-width: 888px;
}
.footer .cs-footer-l > div{
    width: 25%; 
    line-height:10px; 
    margin:20px; 
    font-weight:bolder;
}


.footer .cs-footer-l{
    margin-left: 50px;
}
.footer div[class*="cs-footer-l-inner"]{
    margin: 40px 20px 0 0;
}
.footer .cs-footer-l a{
    font-size: 16px;
    text-decoration: none;
    padding: 14px 0;
}
.footer .cs-footer-l a:hover{
    color: unset !important;
    background-color: unset !important;
    opacity: 0.8;
}
.footer .cs-footer-l-sublevel a{
    line-height:0px; 
    font-weight: 300;
    font-size:14px;
    padding: 8px 0;
}
.footer .cs-footer-l .cs-footer-l-sublevel a{
    line-height: 1em;
}


.footer .cs-footer-r{
    width: 36%;  
    background-color: #007884; 
    border-radius: 20px 0px 0px 20px;
}
.footer .cs-footer-r > div{
    padding: 90px 0 110px;
    text-align:center; 
    font-size: 18px; 
    line-height:50px;
    font-weight: 400;
}

.cs-footer-sns-ico{
    width: 100%; 
    font-size: 50px; 
    font-weight: 100;
}

@media(max-width: 850px){
    .footer{
        flex-direction: column;
        align-items: center;
    }
    .footer .cs-footer-l{
        margin: 0px 0 20px;
        width: 100%;
        max-width: 650px;
        padding: 0 50px
    }
    .footer .cs-footer-l a{
        font-size: 12px;
        padding: 8px 0;
    }
    .footer .cs-footer-r{
        width: 100%;
        border-radius: 20px 20px 0 0;
        background-color: unset;
        border-bottom: 10px solid #007884;
    }
    .footer .cs-footer-r > div{
        padding: 30px 0;
        font-size: 14px;
        line-height: 26px;
    }
    .cs-footer-sns-ico{
        font-size: 40px
    }
}
@media(max-width: 600px){
    .footer .cs-footer-l{
        flex-wrap: wrap;
    }
    .footer .cs-footer-l > div{
        width: 40%
    }
}


/* ----------------------------------- Cookies Banner ----------------------------------- */
.cookies-banner{
    font-size: 12px;
    color: #333;
    z-index: 998;
}

/* ----------------------------------- Paginator ----------------------------------- */
.pagination{
	flex-wrap: wrap;
}
.pagination.menu a{
    font-size: 16px;
    font-weight: 400;
    text-decoration: unset;
    padding: 0 9.5px;
    border-radius: 7px;
}
.pagination.menu a:not(.icon, .active):hover{
    background-color: var(--main-color)15;
}
.pagination.menu a.icon:hover > div{
    color: var(--main-color) !important;
}
.pagination.menu a.disabled,
.pagination.menu a.active{
    pointer-events: none;
}
.pagination.menu a.disabled{
    opacity: .5;
}
/* Pagination */
div:has( > div > .pagination.menu){
    padding: unset !important;
    margin: 50px 0 80px;
}
div:has( > div > .pagination.menu) .pagination.menu{
    width: 100%;
    float: unset;
    justify-content: center;
}
div:has( > div > .pagination.menu) .pagination.menu a{
    white-space: nowrap !important;
    height: fit-content;
}
@media(max-width: 650px){
    .pagination.menu a[aria-label*="Previous"],
    .pagination.menu a[aria-label*="Next"]{
        display: none !important;
    }
}



/* ----------------------------------- Home ----------------------------------- */
/* Home S1 Video */
#cs-home-jbt.video-container{
    height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
#cs-home-jbt.video-container > *:not(video){
    max-width: 1430px;
    width: 100%;
}

#cs-home-jbt .caption_small{
    font-size: 18px;
    font-weight: 400;
    max-width: 50% !important;
    padding-bottom: 50px;
    z-index: 1;
}
@media(max-width:1200px){
    #cs-home-jbt.video-container{
        height: 50vh
    }
    #cs-home-jbt .caption_small{
        max-width: 80% !important;
    }
}
@media(max-width:767px){
    #cs-home-jbt.video-container{
        height: 300px
    }
    #cs-home-jbt .caption_h2{
        font-size: 24px;
        padding: 0 20px;
    }
    #cs-home-jbt .caption_small{
        font-size: 14px;
        max-width: 100% !important;
        padding: 0 20px 30px;
    }
}

/* Home Core Content */
#cs-home-core-centent-outer{
    display:flex; 
    flex-flow: column nowrap; 
    min-height: 100%;
}
#cs-home-core-centent-inner{
    padding-top: 60px;
    background-color: white; 
}
@media(max-width: 550px){
	#cs-home-core-centent-inner{
		padding-top: 30px;
	}
}



/* Home S2 News */
.home_cell_width{
    /* margin: 0px;
    width: 100%;
    max-width: 1430px; */
    display: flex;
}

.home_cell_left {
    width: 40%;
    text-align: left;
}

/* Right */
.home_cell_right{
    width: 60%;
    text-align: left;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    column-gap: 10px;
    padding: 20px 0 20px 20px;
    max-height: 550px;
    min-width: 700px;
}
.home_cell_right_content{
    width: 50%;
    margin: unset;
    position: relative;
    background-color: #ededed;
    height:100%; 
    /* max-height:500px;  */
    border-radius: 20px;
    overflow:hidden; 
}
.home_cell_right_content > div{
    border-radius: 20px;
}

.home_cell_right_content-top{
    max-height: unset !important;
    width: 100%; 
    padding: 30px;
    background-color:var(--main-color); 
    float: right; 
    border-radius:30px; 
    text-align:left; 
    color: white;
}
.home_cell_right_content-top img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
}
.home_cell_right_content:nth-child(2) > div{
    padding: 20px !important;
}
.home_cell_right_content-top-title{
    font-size: 24px;
    font-weight: 400;
    color: white;
    line-height: normal; 
}
.home_cell_right_content-top-subtitle{
    font-size: 14px;
    font-weight: 400;
    color: white; 
    line-height: normal;
}
.cs-news-location{
    font-size: 14px;
    font-weight: 500;
    margin: 20px 0 0 0;
}
.cs-news-date{
    font-size: 12px;
    font-weight: 300;
    margin: unset;
}
.home_cell_right_content-bottom{
    font-size: 14px;
    font-weight: 400;
    overflow: hidden;
    padding: 15px 15px 0 15px;
    margin-bottom: 60px !important;
    background-color: unset;
}
.home_cell_right_content-bottom p{
    line-height: 1.8em;
    display: -webkit-box;
    -webkit-line-clamp: 10;
            line-clamp: 10; 
    -webkit-box-orient: vertical;
}
.cs-home-news-mask{
    background: linear-gradient(0deg, rgba(237, 237, 237, 1) 35%, rgba(237, 237, 237, 0) 100%);
    width:100%; 
    height: 30%;
    position: absolute;
    bottom: 0;
}
.home_cell_right_content-bottom p{
    margin: unset !important;
    line-height: 1.5em;
}
.home_cell_right_content-btn{
    font-size: 16px;
    font-weight: 400;
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: white; 
    padding: 2px 20px; 
    border-radius: 30px; 
    border: 0px; 
    margin: 20px;

}
.home_cell_right_content-btn a{
	text-decoration: unset;
    transition: color 0s;
    color: black;
}
.home_cell_right_content-btn:hover{
    background-color: var(--main-color);
}
.home_cell_right_content-btn:hover a{
	color: white;
}

@media(max-width: 1200px){    
    .home_cell_right{
        min-width: unset;
    }
}

@media(max-width: 767px){
    #cs-home-news .home_cell_width{
        flex-direction: column;
    }
    .home_cell_left{
        width: 100%;
        margin-bottom: 30px
    }
    .home_cell_right{
        width: 100%;
        padding: unset;
    }
    .home_cell_right_content{
        height: 500px;
    }
}
@media(max-width: 550px){
    .home_cell_right{
        flex-direction: column;
        gap: 20px;
        max-height: unset;
    }
    .home_cell_right_content{
        width: 100%;
        min-height: 400px
    }
    .home_cell_right_content-top-title{
        font-size: 20px;
        font-weight: 400;
        color: white;
        line-height: normal; 
    }
}



/* Home S3 Awards */
#cs-home-awards > div{
    margin-top: 100px;
    margin-bottom: 120px;
}
#cs-home-awards .cs-home-awards-title{
    font-weight: 400;
    width: 60%;
    min-width: 600px;
    margin:auto; 
    max-width: 1430px; 
    color: var(--main-color); 
    line-height: normal; 
    font-size: 40px; 
    text-align:center; 
    border-bottom: 2px solid var(--main-color); 
    padding:20px;
}
#cs-home-awards .cs-home-awards-desc{
    width: 70vw;
    max-width: 1000px;
    font-size: 18px;
    font-weight: 400;
    margin:auto; 
    color:var(--text-gray);
    line-height: normal; 
    text-align:center; 
    padding:20px;
}
#cs-home-awards .cs-home-awards-point-outer {
    padding: unset;
    margin:auto; 
    margin-top: 30px;
    max-width: 1430px; 
    color:gary; 
    line-height: normal; 
    font-size: 25px; 
    font-weight: bold; 
    text-align:center; 
    width: 100%; 
}
#cs-home-awards .cs-home-awards-point-inner{
    font-size: clamp(30px, 5vw, 130px);
    padding: 0 80px;
    color:var(--main-color); 
    line-height: normal;  
    font-weight: bold; 
    text-align:center; 
    width:100%; 
    border: 3px solid var(--main-color); 
    border-radius:200px;
    white-space: nowrap;
}
#cs-home-awards .cs-home-awards-point-desc{
    font-size: 18px;
    font-weight: 400;
    width: 90%;
    max-width: 1200px;
    margin:auto; 
    color:var(--main-color); 
    line-height: normal; 
    text-align:center;
    padding:20px;
}
@media(max-width: 767px){
    #cs-home-awards > div{
        margin-top: 50px;
        margin-bottom: 50px
    }
    #cs-home-awards .cs-home-awards-title{
        min-width: unset;
        width: 80%;
        padding: 10px 0
    }
    #cs-home-awards .cs-home-awards-desc{
        width: 100%;
        font-size: 16px;
    }
    #cs-home-awards .cs-home-awards-point-outer{
        margin-top: 10px;
    }
    #cs-home-awards .cs-home-awards-point-inner{
        font-size: 6vw;
        padding: 10px 0;
        border-width: 2px;
    }
    #cs-home-awards .cs-home-awards-point-desc{
        font-size: 16px;
        padding: 20px 0;
        margin: 0 10px;
        width: calc(100% - 20px);
    }

}




/* ----------------------------------- News ----------------------------------- */
.cs-front-title-fixed{
    width: calc(100vw - 200px);
    max-width: 1320px;
    border-bottom: 1px solid #ddd;
    position: fixed;
    left: 50%;
    transform: translatex(-50%);
    top: 78px;
    padding-top: 100px;
    z-index: 1;
}
.cs-front-title-fixed .subtitle{
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
    color: var(--text-gray);
    margin-bottom: 10px;
    width:100%; 
    padding:10px;
}

/* Filter */
.cs-front-news-filter{
    display:flex; 
    background-color:var(--main-color); 
    border-radius: 40px; 
    border: 1px var(--main-color) solid; 
    height: 40px; 
    width: 400px; 
    margin: 150px 0 0;
}
.cs-front-news-filter-left{
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 10px;
    text-align: center;
    color:white;
    height:100%; 
    background-color:var(--main-color); 
    border-radius: 40px 0 0 40px ;
    width:100px;
    align-content: center;
    padding-left: 10px;
}
.cs-front-news-filter-right{
    width:100%;
}
.cs-front-news-filter-right select{
    height: 100%;
    margin: 0px;
    border: 1px solid var(--main-color);
}
.cs-lsmall-mall-selector{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
.cs-mall-guide-btn{
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    color: white;
    background-color: var(--main-color);
    border-radius: 40px;
    width: 100%;
    height: 38px;
    align-content: center;
    padding: 0 25px;
    white-space: nowrap;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.cs-mall-guide-btn:hover{
    background-color: #007884
}
.cs-mall-guide-btn img{
    max-width: 18px;
    margin-right: 5px
}
.cs-lsmall-mall-result-display{
    max-width: 1280px;
    margin: auto;
    margin-bottom: 40px;
    padding: 0 80px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 15px;
}
.cs-lsmall-mall-result-display .cs-front-news-filter{
    max-width: 250px;
    background-color: #808080;
    border: unset;
    padding-right: 2px;
}
.cs-lsmall-mall-result-display .cs-front-news-filter-left{
    letter-spacing: 5px;
    background-color: #808080
}
.cs-lsmall-mall-result-display .cs-front-news-filter .input-container{
    width: 100%;
    height: 36px;
    margin: 2px 0;
    border: unset;
    position: relative;
}
.cs-lsmall-mall-result-display .cs-front-news-filter .input-container input{
    margin: unset;
}
.cs-lsmall-mall-result-display .cs-front-news-filter .input-container button{
    position: absolute;
    right: 5px;
    top: 7px;
    border-left: 1px solid #808080
}
.cs-lsmall-mall-result-display .cs-front-news-filter .input-container button img{
    width: 12px;
}
/* News Article */
#cs-front-news .cs-front-news-items{
    display: flex;
    flex: 1 1 10%;
    gap: 4%;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 50px;
}
#cs-front-news .cs-front-news-items a{
    width: 48%;
    margin-bottom: 40px;
    border-radius: 20px;
}
/* #cs-front-news .cs-front-news-items a:hover{
    box-shadow: 0 0 5px 1px rgba(0,0,0,0.1);
    transform: translatey(-5px)
} */
#cs-front-news .cs-front-news-items a .event_cell{
    
}
#cs-front-news .event_cell .event_cell_left{
    width: 40%;
}
#cs-front-news .event_cell .event_cell_left .prod-grid-img{
    height: 200px;
    min-height: unset;
    /* max-height: 200px; */
    border-radius: 20px;
}
@media(min-width: 767px){
	#cs-front-news .cs-front-news-items a:hover img{
	    transform: scale(1.1);
	}
}
#cs-front-news .event_cell .event_cell_right{
    width: 60%; 
    margin:0px 0 0 30px;
    padding: 10px 20px 10px 0;
}
#cs-front-news .event_cell_right .event_cell_title{
    font-size: 20px;
    font-weight: 400;
    line-height: 1.4em;
    color: var(--main-color); 
    width:100%; 
    border-bottom: 1px solid var(--main-color);
    margin-bottom: 14px;
    padding-bottom: 5px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
#cs-front-news .event_cell_right .event_cell_content{
    font-size:15px;
    font-weight: 400;
    line-height: 1.6em;
    color: var(--text-gray); 
    width:100%; 
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

@media(max-width: 950px){
    #cs-front-news .cs-front-news-items{
        flex-direction: column;
    }
    #cs-front-news .cs-front-news-items a{
        width: 100%;
        margin-bottom: 30px;
    }
}

@media(max-width: 1024px){
    .cs-lsmall-mall-result-display{
        flex-wrap: wrap;
        padding: 0 20px;
    }
    .cs-lsmall-mall-result-display .cs-front-news-filter{
        width: 48%;
        max-width: 300px;
    }
}
@media(max-width: 767px){
    .gb-section-container:has(.cs-front-news-filter):not(.cs-lsmall-filter-top){
    	margin-top: 210px;
    }
    .cs-front-title-fixed{
        width: calc(100vw - 50px);
        top: 30px
    }
    .cs-front-news-filter{
        margin-top: 280px;
    }
    #cs-front-news{
    	margin: 0 10px !important;
        padding: unset !important;
    }
    #cs-front-news .event_cell_right .event_cell_title{
        font-size: 18px;
        margin-bottom: 5px;
    }
    #cs-front-news .event_cell_right .event_cell_content{
        font-size: 14px;
        -webkit-line-clamp: 3;
    }
    #cs-front-news .cs-front-news-items a .event_cell{
        display: flex;
        flex-direction: row;
    }
    #cs-front-news .event_cell .event_cell_left .prod-grid-img{
        width: 100%;
        height: 20vw;
        min-height: 100%;
    }
    #cs-front-news .event_cell .event_cell_right{
    	margin: 0 0 0 15px;
        padding: unset;
    }
}

@media(max-width: 600px){
    .cs-lsmall-mall-result-display{
        gap: 8px
    }
    .cs-lsmall-mall-result-display .cs-front-news-filter{
        width: 100% !important;
        max-width: unset;
        margin: unset !important;
    }
    .cs-lsmall-filter-top .cs-front-news-filter{
        width: 100% !important;
        margin: unset !important;
    }
    .cs-lsmall-filter-top .cs-front-news-filter .cs-front-news-filter-left,
    .cs-lsmall-mall-result-display .cs-front-news-filter-left{
        font-size: 16px;
        letter-spacing: 3px;
        width: 80px !important;
    }
    .cs-lsmall-filter-top .cs-front-news-filter .cs-front-news-filter-right,
    .cs-lsmall-mall-result-display .cs-front-news-filter-right{
        width: 100%
    }
}


/* ----------------------------------- News Detail ----------------------------------- */
.cs-front-news-detail{
    margin-bottom: 100px
}
.cs-news-detail-title{
    font-size: 30px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--main-color);
    text-align:center;
    width: 100%;
    margin-bottom:30px;
    padding: 0 10%
}

.cs-front-news-detail .displayflex{
    font-size: 14px; 
    font-weight: 400; 
    color: var(--main-color); 
    display: flex;
    justify-content: center;
    gap: 50px;
    margin-bottom: 30px;
}

.cs-front-news-detail .displayflex div[class*="cs-news-detail-"]{
    font-size: 18px;
    font-weight: 400;
    color: var(--text-gray);
}
.cs-front-news-detail .displayflex i{
    font-size: 20px;
    margin-right: 10px !important;
}

/* Slider */
.cs-news-detail-slide-container{
    
}
.cs-news-detail-slide-top{
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    overflow: hidden;
}
.cs-news-detail-slide-top .slideshow-container{
    max-height: 600px;
    overflow: hidden;
    position: relative;
    padding: 10px
}
.cs-news-detail-slide-top .slideshow-container .mySlides{
    width: 100%;
    text-align: center;
}
.cs-news-detail-slide-top .slideshow-container img{
    height: 500px;
    object-fit: contain;
}
.cs-news-detail-slide-top .slideshow-container img:hover{
    filter: brightness(0.95);
    cursor: pointer
}
.cs-news-detail-slide-top .slideshow-container a{
    height: 98%;
    align-content: center;
    color: var(--main-color);
    border-radius: 0;
    cursor: pointer;
    position: absolute;
    top: 26px;
    left: 5px;
    padding: 16px;
    margin-top: -22px;
    font-size: 18px;
    user-select: none;
    border-radius: 15px 0 0 15px
}
.cs-news-detail-slide-top .slideshow-container a.next{
    left: unset;
    right: 5px;
    border-radius: 0 15px 15px 0;
}
.cs-news-detail-slide-top .slideshow-container a:hover{
    background: rgba(0,0,0,0.05)
}

/* Slider Thumb */
.cs-news-detail-slide-thumb {
    display: flex;
    padding: 10px;
    gap: 10px;
}
.cs-news-detail-slide-thumb #myLink{
    margin: unset;
    border-radius: 10px;
}
.cs-news-detail-slide-thumb #myLink.active{
    border: 3px solid var(--main-color);
}
.cs-news-detail-slide-thumb #myLink img{
    height: 100%;
    width: 100%;
}

.cs-news-detail-slide-content{
    font-size: 16px;
    font-weight: 400;
    color: var(--text-gray);
    margin-top: 20px;
    padding: 20px;
}

.cs-front-news-detail ~ #divOverlay,
.cs-front-news-detail ~ #divLargerImage{
    position: fixed;
}


@media(max-width: 767px){
    div:has(> #cs-front-event-detail){
        margin: 0 10px !important;
        padding: 128px 20px 0 !important;
    }
    #cs-front-event-detail{
        padding: unset !important;
    }
    .cs-news-detail-title{
        font-size: 22px;
    }
    .cs-front-news-detail .displayflex{
        flex-direction: column;
        gap: 15px;
    }
    .cs-front-news-detail .displayflex div[class*="cs-news-detail-"]{
        font-size: 14px;
    }
    .cs-news-detail-slide-top .slideshow-container img{
        height: 300px
    }
    .dot{
        width: 60px !important;
        height: 60px !important;
    }
}









/* ----------------------------------- Event ----------------------------------- */
#cs-front-event{
    
}
.cs-front-event-item .section-grid{
    padding: unset;
}
/* Items Container */
#cs-front-event .links{
    max-width: 1380px;
}
.cs-front-event-item .grid-prod{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 50px -10px;
    width: 100%;
}
/* Single Item */
.cs-front-event-item .section-grid a{
    max-width: calc(25% - 20px);
    margin: 0 10px 40px;
    flex: 1 1 20%;
}
.cs-front-event-item .section-grid .prod-grid{
    padding: unset;
}
.cs-front-event-item .section-grid .prod-content{
    padding: unset;
}
.cs-front-event-item .prod-grid-img{
    height: 28vw;
    max-height: 420px;
    margin-bottom: 10px;
    border-radius: 20px;
    overflow: hidden;
}
.cs-front-event-item .prod-grid-img img{
    max-height: unset;
    height: 100%;
    width: 100%;
    object-fit: cover;
}
@media(min-width: 767px){
	.cs-front-event-item .section-grid a:hover .prod-grid-img img{
	    transform: scale(1.05)
	}
}
.cs-front-event-item .section-grid .prod-content .cs-event-content{
    font-size: 20px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--text-gray);
    padding: 0 5px;
}
.cs-front-event-item .section-grid a:hover .cs-event-content{
    color: var(--main-color)
}

@media(max-width: 1200px){
    .cs-front-event-item .section-grid a{
        width: 33%;
        max-width: calc(33% - 20px);
        flex: 1 1 33%;
    }
    .cs-front-event-item .prod-grid-img{
        height: 35vw;
    }
}
@media(max-width: 1000px){
    .cs-front-event-item .section-grid .prod-content .cs-event-content{
        font-size: 16px
    }
}
@media(max-width: 767px){
    #cs-front-event{
    	margin: 0 10px !important;
        padding: unset !important;
    }
    .cs-front-event-item .prod-grid-img{
        height: 42vw;
    }
}
@media(max-width: 650px){
    #cs-front-event{
        padding: unset !important;
    }
    .cs-front-event-item .section-grid a{
        max-width: calc(50% - 20px);
    }
    .cs-front-event-item .prod-grid-img{
        height: 60vw;
    }
    .cs-front-event-item .section-grid .prod-content .cs-event-content{
        font-size: 14px
    }
    .prod-content:not(#cs-lsclub-result-container .prod-content) {
        width: unset !important;
        border: unset !important;
        background-color: unset !important;
        border-radius: unset !important;
    }
    .prod-grid-img:not(#cs-redeem .prod-grid-img) {
        width: unset !important;
        min-height: unset !important;
        height: unset !important;
        background-color: unset !important;
    }
}





/* ----------------------------------- Event Detail ----------------------------------- */
#cs-front-event-detail{
    width: 100%;
    max-width: 1430px;
    padding: 0 50px;
}
/* Header */
#cs-front-event-detail .cs-event-detail-title{
    border-bottom: 1px solid #ddd;
    height: 50px;
    margin-bottom: 50px;
}

/* Content */
#cs-front-event-detail .cs-event-detail-content{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    margin-top: 50px;
    margin-bottom: 80px;
}

/* Content Left */
#cs-front-event-detail .coupon_detail_left{
    margin-right: unset;
}
#cs-front-event-detail .coupon_detail_left .prod-grid-img{
    border-radius: 20px;
    overflow: hidden;
}
#cs-front-event-detail .coupon_detail_left img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* Content Right */
#cs-front-event-detail .coupon_detail_right{
    padding-left: 50px;
}


/* Content Right top */
#cs-front-event-detail i{
    width: 20px;
    text-align: center;
    color: var(--main-color);
    margin: 10px 20px 0 0 ;
    line-height: 0;
}
#cs-front-event-detail .coupon_detail_right .subtitle{
    font-size: 30px;
    color: var(--main-color);
    font-weight: 400;
    line-height: 1.2;
    margin: 0 0 20px;
    padding: 0 0 10px 20px;
    max-width: unset;
    border-bottom: 1px solid var(--main-color);
}
#cs-front-event-detail div[class*="cs-event-detail-"]{
    margin-bottom: 20px;
}
#cs-front-event-detail div.cs-event-detail-content{
	margin-bottom: 100px;
}
#cs-front-event-detail .coupon_detail_right div[class*="cs-event-detail-"]{
    font-size: 18px; 
    font-weight: 400;
    line-height: 1.2;
    color: var(--text-gray);
    width: 100%;
    padding-left: 20px;
    display: flex;
    align-items: flex-start;
}
/* Content Right Bottom */
#cs-front-event-detail .cs-event-detail-sec-title{
    color: var(--main-color) !important;
    background-color: var(--main-color)24;
    margin-top: 40px;
    border-radius: 5px;
    padding: 5px;
}
#cs-front-event-detail .cs-event-detail-sec-desc{
    font-size: 16px !important;
    line-height: 1.8em;
    padding: 0 20px;
}

/* Pop Image */
#divLargerImage{
	border-radius: 10px;
    z-index: 999;
}
#divLargerImage img{
	max-width: 90vw;
}
#divOverlay[style*="block"]{
	position: fixed;
    z-index: 100;
}

@media (max-width: 1024px) {
    #cs-front-event-detail .coupon_detail_left{
        width: 40% !important;
    }
    #cs-front-event-detail .coupon_detail_right .subtitle{
        font-size: 24px;
    }
}
@media(max-width: 767px){
    #cs-front-event-detail .cs-event-detail-content{
        flex-direction: column
    }
    #cs-front-event-detail .coupon_detail_left{
        width: 100% !important;
        margin-bottom: 30px
    }
    #cs-front-event-detail .coupon_detail_right{
        width: 100%;   
        padding: unset;
    }
    #cs-front-event-detail .coupon_detail_right .subtitle{
        font-size: 20px;
        padding: 10px 5px;
    }
    #cs-front-event-detail .coupon_detail_right div[class*="cs-event-detail-"]{
        font-size: 16px;
        padding-left: 5px;
    }
    #cs-front-event-detail .cs-event-detail-sec-title{
        padding-left: 10px;
    }
}







/* ----------------------------------- LS Club ----------------------------------- */
#cs-lsclub{
    background-color: white; 
    position: relative;
}
#cs-lsclub .cs-lsclub-jbt-title{
    font-size:50px; 
    color:white;
    padding:60px; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    text-align:left;
}
#cs-lsclub #mainpage{
    position: relative;
/*     text-align:center; */
    background-image: url(/public/storage/client/mall1.png);
    background-repeat:no-repeat;
    width:100%;
    height:500px; 
    background-size: cover;
    background-position: center;
}

#cs-lsclub section{
    margin: 50px auto;
    position: relative;
    z-index: 1
/*     margin-top: 50px; */
}
#cs-lsclub .gb-section-container{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.cs-lsclub-imgbox{
    display: flex;
    flex-direction: row;
    align-items: center;
}
.cs-lsclub-imgbox-img{
    width: 40%;
}
.cs-lsclub-title{
    color: var(--main-color);
    line-height: 1.2em;
    font-size: 35px; 
    font-weight:400; 
    text-align:center; 
    border-bottom: 2px solid var(--main-color);
    width: fit-content;
    margin-top: 100px;
    padding: 0 50px 20px;
}

.cs-lsclub-content-subtext{
    color: var(--text-gray); 
    line-height: normal; 
    font-size: 16px; 
    font-weight: bold; 
    text-align:center; 
    width: 60%;
}
/* Text Container */
.cs-lsclub-text-container{
    font-size: 20px;
    font-weight: 400;
    text-align: center;
    color: var(--text-gray);
    width:100%; 
    max-width: 70%;
    display:flex;
    flex-direction: column;
    align-items: center;
    padding-top: 20px;
}
.cs-lsclub-title-container{
    padding: 60px; 
    width: 100%; 
    background-color:transparent;
}

/* Button */
#cs-lsclub button{
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
    background-color:var(--main-color); 
    color:white;  
    border-radius: 50px; 
    border: unset; 
    margin-top:30px;
    padding:20px 70px;
}
#cs-lsclub button:hover{
    background-color: #007884;
    transform: scale(1.05)
}



/* Image Box */
#cs-lsclub .cs-lsclub-imgbox{
    margin-top: 30px;
}
#cs-lsclub .cs-lsclub-imgbox.gb-section-container{
    flex-direction: row;
    margin-top: 30px;
    justify-content: space-between;
}
#cs-lsclub .cs-lsclub-imgbox-img{
    height: 100%;
    max-height: 400px;
    border-radius: 20px;
    overflow: hidden;
}
#cs-lsclub .cs-lsclub-imgbox-img img{
    height: 500px;
}
#cs-lsclub .cs-lsclub-imgbox-text{
    color: var(--text-gray); 
    font-size: 18px; 
    font-weight: 400; 
    line-height: 1.8em; 
    text-align: center; 
    width: 50%; 
    padding-top:1%; 
    margin: 0 50px;
}


/* Point */
#cs-lsclub-point .cs-lsclub-text-container:has(.cs-lsclub-point){
    max-width: unset;
}
#cs-lsclub-point .cs-lsclub-point{
    font-size: clamp(30px, 4vw, 130px);
    font-weight: 600;
    padding: 0 80px;
    color: var(--main-color);
    text-align: center;
    width: 100%;
    border: 3px solid var(--main-color);
    border-radius: 200px;
    white-space: nowrap;
}
#cs-lsclub-point .cs-lsclub-point-desc{
    color: var(--main-color); 
    line-height: 1.5em;
    font-size: 16px; 
    font-weight: 400; 
    text-align:center; 
    width: 100%;
    max-width: 90%;
}


/* Background Decor Ball */
#cs-lsclub-bg-decor-1::after {
    content: "";
    position: absolute;
    right: -10%;
    top: 20%;
    z-index: -1;
    font-size: 200px;
    display: block;
    height: 80vw;
    width: 80vw;
    max-width: 1000px;
    max-height: 1000px;
    min-width: 400px;
    min-height: 400px;
    border-radius: 50%;
    opacity: 0.07;
    background-color: var(--main-color);
    pointer-events: none;
    mix-blend-mode: multiply;
}
#cs-lsclub-bg-decor-2::after {
    content: "";
    position: absolute;
    left: -10%;
    top: 60%;
    z-index: -1;
    display: block;
    height: 30vw;
    width: 30vw;
    max-width: 500px;
    max-height: 500px;
    min-width: 200px;
    min-height: 200px;
    border-radius: 50%;
    opacity: 0.07;
    background-color: var(--text-gray);
    pointer-events: none;
    mix-blend-mode: multiply;
}
#cs-lsclub-bg-decor-3::after {
    content: "";
    background: url(./bg-decor-coin.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    right: -3%;
    bottom: -55%;
    z-index: -1;
    display: block;
    height: 20vw;
    width: 20vw;
    max-width: 350px;
    max-height: 350px;
    min-width: 200px;
    min-height: 200px;
    pointer-events: none;
}
#cs-lsclub-bg-decor-4::after {
    content: "";
    position: absolute;
    left: 0%;
    bottom: -300px;
    z-index: -1;
    font-size: 200px;
    display: block;
    height: 50vw;
    width: 50vw;
    max-width: 800px;
    max-height: 800px;
    min-width: 400px;
    min-height: 400px;
    border-radius: 50%;
    opacity: 0.07;
    background-color: var(--main-color);
    pointer-events: none;
    mix-blend-mode: multiply;
}

@media(max-width: 767px){
    #cs-lsclub #mainpage{
        height: 300px;
    }
    #cs-lsclub .cs-lsclub-jbt-title{
        padding: 30px;
    }
    #cs-lsclub .cs-lsclub-jbt-title{
        font-size: 40px;
    }
    .cs-lsclub-title{
        font-size: 26px;
        margin-top: 50px;
        padding: 0 30px 10px;
    }
    #cs-lsclub .cs-lsclub-imgbox-img img{
        height: 100%;
    }
    #cs-lsclub .cs-lsclub-imgbox-text{
        font-size: 16px;
        line-height: 1.5em;
        margin: 0 30px;
    }
    #cs-lsclub button{
        padding: 15px 30px;
    }
    .cs-lsclub-text-container{
        font-size: 16px;
        line-height: 1.5em
    }
    #cs-lsclub-point .cs-lsclub-point{
        padding: 20px
    }
}


@media(max-width: 600px){
    #cs-lsclub #mainpage{
        height: 250px;
    }
    #cs-lsclub .cs-lsclub-jbt-title{
        padding: 10px 20px;
    }
    .cs-lsclub-title{
        margin-top: 20px;
    }
    .cs-lsclub-imgbox{
        flex-direction: column-reverse
    }
    #cs-lsclub .cs-lsclub-imgbox-img{
        width: 100%;
        margin-bottom: 30px
    }
    #cs-lsclub .cs-lsclub-imgbox-text{
        width: 100%;
        margin-bottom: 50px;
    }
    #cs-lsclub button{
        font-size: 16px;
    }
    .cs-lsclub-text-container{
        max-width: unset;
    }
    #cs-lsclub section:not(#cs-lsclub-become-member){
        margin: 50px 0 80px;
    }
    #cs-lsclub-point .cs-lsclub-point{
        font-size: clamp(20px, 4vw, 130px)
    }

}





/* ----------------------------------- LS Mall ----------------------------------- */
#cs-lsmall {
    margin: 0 0px 0px 20px;
    padding: 0px 0px 0 0px;
    border-radius: 0px 0px 0px 30px;
    background-color: white;
    flex: 1 1 auto;
}
#cs-lsmall #mainpage {
    width: 100%;
    height: 500px;
    margin-bottom: 50px;
    position: relative;
    text-align: center;
    background-image: url(/public/storage/client/mall2.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
/* JBT Content */
.cs-lsmall-jbt-container {
    padding: 60px 40px;
    position: absolute;
    bottom: 0;
    left: 0;
    text-align: left;
}
.cs-lsmall-jbt-container .cs-lsmall-jbt-title {
    font-size: 50px;
    font-weight: 400;
    color: white;
    padding-left: 15px;
}
.cs-lsmall-jbt-container .input-container {
    height: 45px;
    background-color: white;
}
.cs-lsmall-jbt-container .input-container img {
    height: 20px;
    opacity: 0.8;
    padding: 0 20px 0 10px;
}
.cs-lsmall-jbt-container .input-container img:hover{
    opacity: 1;
}
.cs-lsmall-jbt-container .cs-lsmall-jbt-search-divider {
    margin-top: 7px;
    height: 70%;
    width: 1px;
    background-color: #ddd;
}


/* Filter Top */
.cs-lsmall-filter-top{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    margin-bottom: 40px !important;
    justify-content: center;
    flex-direction: column;
}
.cs-lsmall-filter-top #wrong_pass_alert_1,
.cs-lsmall-filter-top #wrong_pass_alert_2{
	margin-right: 10px;
}
/* Mall Selector */
#cs-lsmall .cs-front-news-filter{
    margin-top: unset;
}
/* Filter Type */
.cs-lsmall-filter-type {
    font-size: 16px;
    font-weight: 400;
    color: var(--main-color);
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 40px;
}
.cs-lsmall-filter-type .filter-item {
    height: auto;
}
.cs-lsmall-filter-type .filter-icon {
    padding-right: 10px;
    height: 20px;
}


/* Filter Category */
.cs-lsmall-filter-cate{
    justify-items: center;
}
.cs-lsmall-filter-cate-inner{
    width: 80%;
    display: flex;
    justify-content: center;
    gap: 10px;
    border-bottom: 1px solid var(--main-color);
}
.cs-lsmall-filter-cate button{
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 2px;
    color: var(--text-gray);
    border-radius: 3px 3px 0 0;
}
.cs-lsmall-filter-cate button.btn_selected{
    color: #fff;
    background: var(--main-color);
}
.cs-lsmall-filter-cate button.btn_unselected:hover{
    color: var(--main-color);
    background: unset !important;
}
.cs-lsmall-filter-cate button a{
    padding: 10px;
    margin: 10px;
    width: 80px;
}


/* Filter Bottom */
#cs-lsmall div[id*="selection_"]{
    justify-content: center;
}
#cs-lsmall .cs-lamall-filter-sec-level{
    margin: 20px 0 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 20px;
    max-width: 1000px
}

#cs-lsmall .cs-lamall-filter-sec-level button {
    font-size: 16px;
    font-weight: 400;
    color: var(--text-gray);
}

#cs-lsmall .cs-lamall-filter-sec-level button.btn_selected{
    color: var(--main-color);
    background: unset !important;
}

#cs-lsmall .cs-lamall-filter-sec-level button.btn_unselected:hover{
    color: var(--main-color);
    background: unset !important;
}

@media(max-width: 767px){
	#cs-lsmall .cs-lamall-filter-sec-level{
		gap: 5px 10px
	}
}


/* --------------------- Result Grid */
/* Product Result Container */
#cs-lsclub-result-container.cs-lsmall-result .section-grid{
    padding: unset;
}
#cs-lsclub-result-container.cs-lsmall-result .grid-prod{
    justify-content: flex-start;
}

/* Single Item */
#cs-lsclub-result-container.cs-lsmall-result .grid-prod a{
    width: calc( 25% - 10px);
    margin: 0 5px 20px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}
#cs-lsclub-result-container.cs-lsmall-result .grid-prod a:hover img{
    transform: scale(1.1)
}
#cs-lsclub-result-container.cs-lsmall-result .prod-grid{
    height: 100%
}

/* Single Item Content */
#cs-lsclub-result-container.cs-lsmall-result .prod-content {
    color: #fff;
    height: 100%;
    width: 100%;
    padding: 10px;
    border-radius: 20px;
    background-color: var(--main-color);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
#cs-lsclub-result-container.cs-lsmall-result .grid-prod a:hover .prod-content {
    background-color: #007884;
}
#cs-lsclub-result-container.cs-lsmall-result .prod-grid-img {
    width: 100%;
    height: 15vw !important;
    max-height: 200px;
    min-height: unset;
    overflow: hidden;
    border-radius: 10px;
    margin-bottom: 15px;
    background: #fff
}
#cs-lsclub-result-container.cs-lsmall-result .prod-grid-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#cs-lsclub-result-container .cs-lsmall-item-name {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.2em;
    padding: 0 4px;
    margin-bottom: 10px;
}
#cs-lsclub-result-container .cs-lsmall-item-detail {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0 4px 5px;
}
#cs-lsclub-result-container .cs-lsmall-item-cate {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
}
#cs-lsclub-result-container .cs-lsmall-item-meta {
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}


@media(max-width: 1200px){
    #cs-lsclub-result-container .cs-lsmall-item-detail{
        flex-direction: column
    }
}

@media(max-width: 1024px){
    .cs-lsmall-filter-top{
        flex-direction: column;
        gap: 20px;
    }
    #cs-lsclub-result-container.cs-lsmall-result .grid-prod a{
        width: calc( 33% - 10px)
    }
}

@media(max-width: 767px){
    #cs-lsmall{
        margin: 0 0 0 10px;
    }
    #cs-lsmall #mainpage{
        height: 300px;
    }
    .cs-lsmall-jbt-container{
        padding: 20px
    }
    #cs-lsmall .cs-lsmall-jbt-title{
        font-size: 40px;
        line-height: 1.5em;
        padding: 0 10px;
    }
    #cs-lsclub-result-container .cs-lsmall-item-name{
    	font-size: 18px;
    }
    #cs-lsclub-result-container .cs-lsmall-item-cate{
    	font-size: 12px;
    }
    #cs-lsclub-result-container.cs-lsmall-result .grid-prod a{
        width: calc( 50% - 10px);
    }
    #cs-lsclub-result-container.cs-lsmall-result .prod-grid-img{
        height: 30vw !important;
    }
}

@media(max-width: 600px){
    #cs-lsmall #mainpage{
        height: 250px;
    }
    #cs-lsmall .cs-lsmall-jbt-title{
        font-size: 30px;
        line-height: 1em;
        padding: 0 10px;
    }
    .cs-lsmall-jbt-container .input-container{
        width: 100%;
    }
    .cs-front-news-filter-left{
        letter-spacing: 5px !important;
    }
    .cs-front-news-filter{
        width: unset !important;
        margin: auto !important;
    }
    .cs-lsmall-filter-top{
    	align-items: flex-start;
    }
    .cs-lsmall-filter-top .cs-lsmall-mall-selector{
        width: 100%;
    }
    .cs-lsmall-filter-type{
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
    .cs-lsmall-filter-cate-inner{
        width: 100%;
    }
    .cs-lsmall-filter-cate button a{
        padding: 10px 0;
    }
}















/* ----------------------------------- LS Mall Detail ----------------------------------- */
#cs-front-event-detail .cs-mall-detail-title {
    border-bottom: 1px solid #ddd;
    height: 50px;
    margin-bottom: 50px;
}

.cs-event-detail-content{
    margin-bottom: 250px;
}

/* Mall Left Image */
#cs-front-event-detail.cs-front-mall-detail .cs-event-detail-content{
    align-items: stretch;
}
#cs-front-event-detail.cs-front-mall-detail .coupon_detail_left{
    height: unset;
}
#cs-front-event-detail.cs-front-mall-detail .coupon_detail_left .prod-grid{
    height: 100%;
}
#cs-front-event-detail.cs-front-mall-detail .coupon_detail_left .prod-grid-img{
    height: 100%;
}
#cs-front-event-detail.cs-front-mall-detail  .coupon_detail_left img{
    max-height: 600px;
    object-fit: cover !important;
}

/* Mall Brief Right */
.coupon_detail_right i::before{
    font-size: 18px;
}


/* Mall Description */
.cs-mall-detail-desc{
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8em;
    color: var(--text-gray);
    margin: 50px 0 50px;
    padding: 20px 30px;
    min-height: 150px;
    border-radius: 20px;
    background: #efefef;
}

/* Floor Plan Title */
.cs-front-mall-detail .cs-floorplan-title-container {
    width: 100%;
    display: flex;
    align-items: flex-end;
    margin-bottom: 20px;
}

/* Floor Plan Title Icon */
.cs-front-mall-detail .location-icon {
    font-size: 26px;
}
#cs-front-event-detail.cs-front-mall-detail .location-icon i {
    width: 50px;
    /* text-align: ; */
    color: var(--main-color);
    margin-right: 10px;
}
#cs-front-event-detail.cs-front-mall-detail .cs-floorplan{
    font-size: 30px;
    font-weight: 400;
    color: var(--main-color);
    width: 100%;
    border-bottom: 3px solid var(--main-color);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: nowrap;
}

/* Floor Plan Image */
.cs-floorplan-img{
    width: 100%;
    height: auto;
    margin-bottom: 100px;
}



@media(max-width: 767px){
    #cs-front-event-detail.cs-front-mall-detail div.cs-event-detail-content{
        margin-bottom: 0px !important;
    }
    .cs-mall-detail-desc{
        margin: 20px 0 50px;
    }
    .cs-front-mall-detail .location-icon{
        font-size: 20px;
    }
    #cs-front-event-detail.cs-front-mall-detail .location-icon i{
        width: 30px
    }
    #cs-front-event-detail.cs-front-mall-detail .cs-floorplan{
        font-size: 20px
    }
}









/* ----------------------------------- Floor Plan ----------------------------------- */
.cs-floor-plan{

}
/* Title */
.cs-floor-plan-title{
    color: var(--main-color);
    font-size: 40px;
    margin: 40px 0 20px;
    display: flex;
}
.cs-floor-plan-title img{
    width: 40px;
    margin-right: 10px;
}
/* Search Bar */
.cs-floor-plan .cs-lsmall-filter-top{
    margin-bottom: 0 !important;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
}
.cs-floor-plan .cs-front-news-filter{
    margin: unset;
}
.cs-floor-plan .input-container{
    height: 40px;
    margin: unset;
}
.cs-floor-plan .input-container button{
    height: 30px;
    border-left: 1px solid var(--main-color);
    align-self: center;
}
.cs-floor-plan .input-container button img{
    height: 20px;
    opacity: 0.8;
    padding: 0 20px 0 10px;
}

/* Floor Button */
.cs-floor-plan-floor{
    margin: 50px 0 0px;
    padding: 0 10px 20px 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    border-bottom: 3px solid var(--main-color)
}
.cs-floor-plan-floor p{
    color: var(--main-color);
    font-size: 24px;
    font-weight: 400;
    line-height: 1;
    margin: 0 40px 0 0;
    padding: 4px 0;
    white-space: nowrap
}
.cs-floor-plan-floor .cs-floor-btns{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px 20px;
}
.cs-floor-plan-floor .cs-floor-btn{
    color: #808080;
    font-size: 20px;
    line-height: 1;
    padding: 6px 20px;
    border-radius: 50px;
}
.cs-floor-plan-floor .cs-floor-btn:hover,
.cs-floor-plan-floor .cs-floor-btn.cs-active{
    color: #fff;
    background: var(--main-color);
    cursor: pointer;
}

/* Floor Image */
.cs-floor-img-container{
    margin: 10px 0 80px;
    position: relative;
}
.cs-floor-img-container .cs-floor-img-zoom{
    width: 100%;
    display: flex;
    justify-content: flex-end;
    flex-direction: row;
    flex-wrap: nowrap;
    position: absolute;
    top: 0;
}
.cs-floor-img-zoom button{
    width: 40px;
    height: 40px;
}

.cs-floor-img-container > img{
    width: 100%;
}


@media(max-width: 767px){
    div:has(> .cs-floor-plan) {
        margin: 0 10px !important;
        padding: 128px 20px 0 !important;
    }
    .cs-floor-plan{
        margin: unset !important;
        padding: unset;
    }
    .cs-floor-plan-title{
        font-size: 24px;
        margin: 30px 0 10px;
    }
    .cs-floor-plan-title img{
        width: 25px;
    }
    .cs-floor-plan .cs-lsmall-filter-top{
        flex-direction: column !important;
        gap: 10px;
    }
    .cs-floor-plan .cs-front-news-filter,
    .cs-floor-plan .input-container{
        width: 100%;
    }
    .cs-floor-plan-floor{
        margin-top: 30px;
        padding: 0 0 10px;
        flex-direction: column;
    }
    .cs-floor-plan-floor p{
        font-size: 18px;
        margin: 0 20px 10px 4px;
    }
    .cs-floor-plan-floor .cs-floor-btns{
        gap: 10px;
    }
    .cs-floor-plan-floor .cs-floor-btn{
        font-size: 14px;
        padding: 6px 15px;
    }
}










/* ----------------------------------- Contact Us ----------------------------------- */
#cs-lsclub.cs-front-contact #mainpage{
    background-image: url(/public/storage/client/mall2.png)
}

/* Get More Info */
.cs-contact-get-info{
    width: 100%;
    background: var(--main-color);
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    margin: 100px 0;
    padding: 30px 8%;
    border-radius: 20px;
    z-index: 1;
}

.cs-stretch-line{
    border-top: 2px solid #fff;
    flex-grow: 1;
}

/* Get Info Top */
.cs-contact-get-info-top{
    color:#fff;
    display: flex;
    align-items: center;
    gap:20px;
    width: 100%;
    border-bottom: 4px solid #5bb9c9;
    margin-bottom: 15px;
    padding-bottom: 20px;
}
.cs-contact-get-info-top span{
    white-space: nowrap;
    font-size: clamp(24px, 4vw, 58px);
    line-height: 1.4em;
}
.cs-contact-get-info-top a i{
    font-size: 4vw;
}

/* Get Info Bottom */
.cs-contact-get-info-bottom{
    color:#fff;
    display: flex;
    align-items: center;
    gap:20px;
    width: 100%;
}
.cs-contact-get-info-bottom span{
    white-space: nowrap;
    font-size: clamp(18px, 3vw, 36px);;
}
.cs-arrow-right {
  border: solid #fff;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 15px;
  transform: rotate(-45deg) translate(-15px, -15px);
}

/* Mall Info */
div[class*="cs-contact-mall-container-"] {
    width: 90%;
    max-width: 1380px;
    display: flex;
    flex-direction: row !important;
    flex-wrap: nowrap;
    margin-bottom: 50px;
}
/* Mall Image */
div[class*="cs-contact-mall-container-"] .cs-contact-mall-img {
    width: 30%;
}
div[class*="cs-contact-mall-container-"] .cs-contact-mall-img img{
    width: 100%;
    border-radius: 20px;
    float: right;
    height: 20vw;
    max-height: 300px;
    object-fit: cover;
}
/* Mall Detail */
div[class*="cs-contact-mall-container-"] .cs-contact-mall-detail{
    width: 70%;
    font-weight: 400;
    line-height: 1;
}
.cs-contact-mall-container-left .cs-contact-mall-detail{
    margin-left: 50px
}
div[class*="cs-contact-mall-container-"] .cs-contact-mall-title{
    font-size: 26px;
    font-weight: 400;
    color: var(--main-color);
    border-bottom: 2px solid var(--main-color);
    padding-bottom: 20px;
    width: 80%
}
div[class*="cs-contact-mall-container-"] .cs-contact-mall-desc{
    font-size: 20px;
    color: var(--text-gray)
}

.cs-contact-mall-container-right .cs-contact-mall-detail{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-right: 50px
}
.cs-contact-mall-container-right .cs-contact-mall-title,
.cs-contact-mall-container-right .cs-contact-mall-desc{
    text-align: right;
}

#cs-lsclub div[class*="cs-contact-mall-container-"]:last-of-type{
    margin-bottom: 150px
}

.cs-front-contact #cs-lsclub-bg-decor-1::after{
    top: 30% !important;
    z-index: 0 !important;
}
.cs-front-contact #cs-lsclub-bg-decor-4::after{
    z-index: 0 !important;
}


@media(max-width: 767px){
    .cs-contact-get-info{
        margin: 50px 0;
    }
    .cs-contact-get-info-top .cs-arrow-right{
        padding: 10px
    }
    .cs-contact-get-info-top span{
        font-size: 18px;
    }
    .cs-contact-get-info-bottom .cs-contact-gib-left,
    .cs-contact-get-info-bottom .cs-stretch-line{
        display: none
    }
    .cs-contact-get-info-top a i{
        font-size: 30px;
    }
    .cs-contact-get-info-bottom span{
        font-size: 14px;
    }
    
    div[class*="cs-contact-mall-container-"]{
        margin-bottom: 80px
    }
    div[class*="cs-contact-mall-container-"] .cs-contact-mall-detail{
        width: 60%
    }
    div[class*="cs-contact-mall-container-"] .cs-contact-mall-title{
        font-size: 24px;
        font-weight: 400;
        width: 100%;
    }
    div[class*="cs-contact-mall-container-"] .cs-contact-mall-desc{
        font-size: 16px;
    }
    div[class*="cs-contact-mall-container-"] .cs-contact-mall-img{
        width: 40%
    }
    div[class*="cs-contact-mall-container-"] .cs-contact-mall-img img{
        border-radius: 10px;
    }
    .cs-contact-mall-container-left .cs-contact-mall-detail{
        margin-left: 20px;
    }
    .cs-contact-mall-container-right .cs-contact-mall-detail{
        margin-right: 20px;
    }
}
@media(max-width: 550px){
    div[class*="cs-contact-mall-container-"]{
        width: 100%;
        margin-bottom: 20px;
        flex-direction: column !important
    }
    .gb-section-container.cs-contact-mall-container-right{
        flex-direction: column-reverse !important;
    }
    div[class*="cs-contact-mall-container-"] .cs-contact-mall-img,
    div[class*="cs-contact-mall-container-"] .cs-contact-mall-detail{
        width: 100%;
        margin: 10px 0;
    }
    div[class*="cs-contact-mall-container-"] .cs-contact-mall-img img{
        min-height: 200px;
    }
    .cs-contact-mall-container-right .cs-contact-mall-detail{
        align-items: flex-start;
    }
    .cs-contact-mall-container-right .cs-contact-mall-title, 
    .cs-contact-mall-container-right .cs-contact-mall-desc{
        text-align: left;
    }
}
@media(max-width: 500px){
    .cs-contact-get-info-top .cs-stretch-line,
    .cs-contact-get-info-top .cs-arrow-right{
        display: none;
    }

}



/* ----------------------------------- FAQ ----------------------------------- */
#cs-front-faq{
    margin: auto;
    margin-top: 50px;
    margin-bottom: 80px;
    max-width: 800px;
}
#cs-front-faq .cs-faq-title{
    font-size: 30px;
    color: var(--main-color);
    text-align: center;
    border-bottom: 1px solid var(--main-color);
}
#cs-front-faq .cs-faq-item{
    margin: 30px 0;
}
#cs-front-faq .cs-faq-question{
    font-size: 20px;
    font-weight: 500;
    color: var(--main-color);
}
#cs-front-faq .cs-faq-answer{
    font-size: 18px;
    font-weight: 400;
    color: var(--text-gray);
    padding-left: 2px;
}


@media(max-width: 767px){
	#cs-front-faq{
		margin-top: 20px;
	}
    div:has( > #cs-front-faq){
        margin: 0 10px !important;
        padding: 128px 20px 0 !important;
    }
    #cs-front-faq .cs-faq-question{
    	font-size: 18px;
    }
    #cs-front-faq .cs-faq-answer{
    	font-size: 14px;
    }
}





/* ----------------------------------- Disclaimer ----------------------------------- */
#cs-front-disclaimer{
    margin: auto;
    margin-top: 50px;
    padding-bottom: 30px
}
.cs-front-disclaimer-title{
    font-size: 30px;
    color: var(--main-color);
    margin-bottom: 20px;
}
.cs-front-disclaimer-content{
    font-size: 18px;
    font-weight: 400;
    line-height: 1.8em;
    color: var(--text-gray);
    letter-spacing: 0;
}

@media(max-width: 767px){
	#cs-front-disclaimer{
		margin-top: 20px;
	}
    div:has( > #cs-front-disclaimer){
        margin: 0 10px !important;
        padding: 128px 20px 0 !important;
    }
    .cs-front-disclaimer-content{
    	font-size: 14px;
    }
}







/* ---------------------------------------------------------------------- Member System ---------------------------------------------------------------------- */

/* ----------------------------------- Register ----------------------------------- */
#register-form-core{
margin: 0 10px; 
padding: 180px 40px 50px 40px;
border-radius: 0px 0px 0px 30px;
background-color: white; 
flex: 1 1 auto;
}

/* Register form Core Layout*/
#register-form-core .page-title{
    font-size: 24px;
    font-weight: 400;
    color: var(--text-gray);
    border-bottom: 1px solid #ddd;
}
#register-form-core .subtitle{
    color: var(--text-gray) !important
}
#register-form-core .subtitle-step-cell{
    padding: 16px 0 60px !important;
}
#register-form-core input[type=text], 
#register-form-core input[type=password], 
#register-form-core select{
    /* padding-left: 20px; */
}

#register-form-core .w3-margin-bottom{
/*     min-height: unset; */
}
#register-form-core .cs-label-gap{
    margin-bottom: 8px;
}
#register-form-core .cs-label-width,
.option-table-cell-col:has(.lang-button){
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    height: unset;
}
#register-form-core .cs-label-width label,
#register-form-core .cs-label-width button,
#register-form-core .option-table-cell-col button.lang-button{
    width: 30%;
}
#register-form-core #cs-reg-habits{
    margin-bottom: 40px !important;
}
#register-form-core #cs-reg-pwrequire{
    margin-top: -30px
}
.button-ls-blue:hover{
    background: #007884 !important;
}
.form-navigation{
    margin-top: 50px
}

/* Register form Text */
#register-form-core button,
#register-form-core label:not(.agree-checkbox > div > label){
    white-space: nowrap;
}
#register-form-core button:hover{
    /* cursor: pointer; */
}
#register-form-core .w3-container,
#register-form-core span.circle-text-checked,
#register-form-core span.circle-text-unchecked{
    color: var(--text-gray);
    font-size: 12px;
    font-weight: 400;
    padding: unset;
}
#register-form-core span.circle-text-unchecked{
    color: #b8b8b8
}
#register-form-core .radio-toolbar label,
#register-form-core .option-table-cell-col button:not(.active){
    font-size: 12px;
    font-weight: 400;
    color: var(--main-color);
    border: 1px solid var(--main-color);
}
#register-form-core .radio-toolbar input[type="radio"]:checked+label,
#register-form-core .radio-toolbar label:hover{
    color: white !important;
    cursor: pointer;
}
#register-form-core .option-button{
    font-size: 12px;
}
#register-form-core .option-table-cell-col button{
    margin-bottom: 8px
}
#register-form-core .option-table-cell-col button:hover{
    color: white;
    background: var(--main-color);
}
#register-form-core .option-table-cell-col span{
    transform: translatey(-4px);
}
#register-form-core input::placeholder {
    opacity: 0.5;
}
#register-form-core input, 
#register-form-core select, 
#register-form-core option{
    color: unset;
}
#register-form-core select{
    /* background-size: 15px 7px; */
}
#next_button{
    background-color: var(--main-color)
}
#next_button[disabled]{
    background-color: var(--text-gray);
}

/* Error Text */
#register-form-core .parsley-custom-error-message,
#register-form-core .parsley-required,
#register-form-core .parsley-type,
#register-form-core #form_validate{
    color: red !important;
    font-size: 8pt;
    letter-spacing:unset;
    transform: translatey(-10px)
}
#register-form-core .parsley-required::before,
#register-form-core .parsley-type::before{
    content: "*"
}
#register-form-core .agree-checkbox .parsley-required{
    transform: translatey(-4px)
}
#wrong_pass_alert_text_1 #wrong_pass_alert_1, 
#wrong_pass_alert_text_2 #wrong_pass_alert_2{
	margin: unset !important;
}


@media(max-width: 800px){
    .w3-margin-bottom:has(#last_name_ch),
    .w3-margin-bottom:has(#radioTitleMr){
        width: 100%;
    }
}
@media(max-width: 767px){
    div:has( > #register-form-core){
        margin: 0 10px !important;
        padding: 0 !important;
    }
    #register-form-core{
        padding: 160px 0 50px;
    }
}
@media(max-width: 600px){
    div:has(> #last_name_en),
    div:has(> #first_name_en){
        padding: unset !important;
    }
}




/* -------------------------------------------- Section 2 Phone Mail */
#register-form-core .cs-reg-sms-title-phone{
    font-size: 16px !important;
    margin-bottom: 10px;
}
#register-form-core .register-phone-dash {
    text-align: center;
}
#register-form-core #phone_number{
    padding-left: 20px;
}
#register-form-core .cs-reg-sms-title-mail{
    font-size: 16px !important;
    margin: 20px 0 10px;
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    
}
#register-form-core .cs-reg-sms-title-mail span{
    font-size: 12px;
    margin-left: 5px
}
#register-form-core .agree-checkbox{
    margin-top: 10px
}


/* -------------------------------------------- Section 3 SMS Code */
#digit_veridate{
    font-size: 16px !important;
}
.cs-reg-sms-code-line{
    border-bottom: 1px solid #ddd; 
    margin: 10px 0;

}
#cs-reg-digi-timer-container{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    padding: 0 8px;
}
#cs-reg-sms-code-4dig .container{
    padding: 0 10px;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-between;
}
#cs-reg-sms-code-4dig .container input{
    margin: unset !important;
    width: 80%;
    height: 60%;
    border-right: 1px solid #73D0D9;
}
#cs-reg-sms-code-4dig .container input:last-child{
    border: unset;
}
#cs-reg-sms-code-timer{
    padding: 15px 15px 20px 25px;
}
#cs-reg-sms-code-timer .text{
    top: 54% !important;
    font-size: 24px
}
#cs-reg-sms-code-timer #counter{
    color: #808080;
}
#cs-reg-sms-resend{
    color: #808080;
    font-size: 14px;
    font-weight: 400;
}
#cs-reg-sms-resend-note{
    max-width: 450px
}
#cs-reg-sms-resend-note > div:first-child{
    white-space: nowrap;
}
#resend_code{
    font-size: 12px;
    margin-right: unset;
    min-width: 150px;
}
#clear_button,
#submit_button{
    margin-left: unset !important;
}

@media(max-width: 992px){
    #cs-reg-sms-code-timer .text{
        font-size: 30px;
    }
}
@media(max-width: 600px){
    #clear_button, 
    #submit_button, 
    #next_button, 
    button.previous{
        margin: 0 0 10px !important;
    }
}



/* ----------------------------------- Member Panel Layout ----------------------------------- */
@media(max-width: 767px){
	.bg_img{
		min-height: 70vh;
		margin: 0 10px;
	}
}




/* ----------------------------------- Register Success ----------------------------------- */
#cs-reg-success{
    border-radius: 0px 0px 0px 30px; 
    background-color: white; 
    flex: 1 1 auto; 
    display: flex;
}
#cs-reg-success .right_bgimg > div{
    margin: 50px 0px;
}
#cs-reg-success .right_bgimg .cell_info{
    width: 50vw;
    max-width: 500px;
    min-height: 150px;
    border-radius: 20px;
    padding: 25px 20px 20px;
    box-shadow: 0 0 0 5px var(--main-color), inset 0 0px 0 2px var(--main-color);
}

#cs-reg-success .right_bgimg .cell_info h3{
    font-size: 20px;
    font-weight: 400;
    line-height: 0;
    color: var(--text-gray)
}
#cs-reg-success .right_bgimg .cell_info:not(:has(form)) div{
    color: var(--main-color);
    font-size: 42px;
    font-weight: 500;
    line-height: 1.4em
}
#cs-reg-success .home_link_display_for_text{
    color: var(--text-gray);
    font-size: 14px;
    font-weight: 400;
    text-decoration: unset;
    margin-top: 20px;
}
#cs-reg-success .home_link_display_for_text:hover{
    color: var(--main-color)
}
#cs-reg-success .home_link_display_for_text{
    width: fit-content;
    justify-self: center;
}


@media(max-width:1024px){
    .bg_img .left_bgimg{
        display: none;
    }
    .bg_img .right_bgimg{
        width: 100%;
        background: unset;
    }
}
@media(max-width:850px){
    #cs-reg-success .ls-center{
        min-height: 50vh
    }
}
@media(max-width:767px){
    #cs-reg-success{
        margin: 0 10px;
    }
    #cs-reg-success .right_bgimg .cell_info{
        width: 80vw
    }
    #cs-reg-success .home_link_display_for_text{
        display: unset;
    }
    #cs-reg-success:not(:has(.cell_member_card, #cs-member-reward-menu)) .ls-center > div a:has(img){
        display: none;
    }
    #cs-reg-success .right_bgimg .cell_info{
        min-height: 100px;
        max-width: 400px;
    }
    #cs-reg-success .right_bgimg .cell_info h3{
        font-size: 14px;
    }
    #cs-reg-success .right_bgimg .cell_info:not(:has(form)) div{
        font-size: 28px
    }
    #cs-reg-success .right_bgimg > div{
    	margin: 0 0 50px;
    }
}




/* ----------------------------------- Login ----------------------------------- */
#cs-login label,
#cs-login span{
    color: var(--text-gray);
    font-size: 14px;
    font-weight: 400;
}
input::placeholder{
    /* font-size: 12px; */
    /* font-weight: 400; */
    /* opacity: 0.5 */
}
#cs-login input,
#cs-login select{
    margin-top: 5px;
    color: var(--text-gray);
    font-size: 14px;
}
#cs-login select{
    /* background-size: 10px 5px; */
    /* padding-left: 20px; */
}
#cs-login .left_cell img{
    width: 60%
}
#cs-login .right_cell_form .links:first-of-type{
    margin-bottom: 10px;
}
#cs-login-phone{
    display: flex;
    justify-content: space-between;
}
#cs-login #password{
    padding-left: 20px
}
#cs-login .form-check a{
    text-decoration: unset;
    font-weight: 400;
    float: right;
}
#cs-login .form-check a:hover{
    color: #007884 !important
}
#cs-login .whole_cell_footer{
    margin-top: 10px;
}
#cs-login .whole_cell_footer a{
    display: contents;
}
#cs-login .whole_cell_footer button{
    padding: 5px;
    font-size: 14px;
    font-weight: 400;
    border-radius: 50px;
    width: 140px;
}


@media(max-width: 600px){
    body:has(#cs-login) .whole_cell_header{
        flex-direction: column
    }
    body:has(#cs-login) .right_login{
        width: 100%;
        min-width: unset;
    }
    body:has(#cs-login) .whole_cell_header .left_cell{
        width: 100%;
        max-height: 60px;
        border-radius: 15px 15px 0 0;
        padding: 5px
    }
    body:has(#cs-login) .whole_cell_header .left_cell img{
        max-height: 50px;
        width: 100%;
        object-fit: contain;
    }
    body:has(#cs-login) .whole_cell_header .right_cell_form{
        width: 100%;
        border-radius: 0 0 15px 15px;
    }
    body:has(#cs-login) .whole_cell_footer.w3-right{
        width: 100%;
        margin: unset;
        display: flex;
        justify-content: space-between;
    }
    #cs-login .whole_cell_footer button{
        width: 100%;
    }
    body:has(#cs-login) #cs-login-phone select{
    	background-position: center right 10px;
    }
}




/* ----------------------------------- Forgot Password ----------------------------------- */
#cs-forgot-password{
    margin: 50px 20px;
}
#cs-forgot-password.cell_info{
    box-shadow: 0 0 15px 3px rgba(0,0,0,0.15);
    width: 50vw;
    max-width: 600px;
    padding: 20px 50px;
}
#cs-forgot-password > div{
    width: 100%;
}
#cs-forgot-password .info-title{
    font-size: 20px;
    font-weight: 400;
    color: var(--text-gray);
    border-bottom: 1px solid #ddd;
}
#cs-forgot-password .cs-forgot-password-subtitle{
    font-size: 14px;
    font-weight: 400;
    color: var(--text-gray) !important;
    margin-bottom: 20px;
    padding-top: 5px !important;
    justify-self: center;
}
#cs-forgot-password .cs-forgot-password-label{
    font-size: 12px;
    font-weight: 400;
    color: var(--main-color)
}
#cs-forgot-password #email,
#cs-forgot-password #password,
#cs-forgot-password #confirm_password,
#cs-forgot-password select{
    margin: unset;
    margin-top: 5px;
    padding: 10px 20px;
}
#cs-forgot-password #submit_button{
    padding: 8px;
    font-size: 16px;
    font-weight: 400;
    border-radius: 50px;
    margin: 10px 0 30px;
}
#cs-forgot-password .parsley-required{
    color: red !important;
    font-size: 8pt;
    letter-spacing:unset;
}

@media(max-width: 1024px){
    #cs-forgot-password.cell_info{
        width: 80vw;
        max-width: 550px;
    }
}
@media(max-width: 767px){
    #cs-forgot-password.cell_info{
        padding: 20px;
    }
    #cs-forgot-password #submit_button{
        margin: 10px 0 !important;
    }
    #cs-forgot-password form .cell_input{
    	padding: unset;
    	box-shadow: unset !important;
    }
}




/* ----------------------------------- Reset Password ----------------------------------- */
#cs-forgot-password form h3{
    border-bottom: 1px solid #ddd
}
#cs-forgot-password form .cs-forgot-password-label{
    margin-top: 20px
}
.cs-forgot-password-requirement-title{
    padding-top: 10px;
}
.cs-forgot-password-requirement{
    font-size: 12px;
    font-weight: 400;
    color: var(--text-gray)
}



/* ----------------------------------- Edit Password ----------------------------------- */
.cs-edit-password .cell_input{
    min-width: unset;
    max-width: unset;
    min-height: unset;
    opacity: 1;
}

.cs-edit-password .cell_input_item:has(#submit_button),
.cs-edit-password #submit_button{
    width: 100%;
}




/* ----------------------------------- Member Card ----------------------------------- */
#cs-member-card > div{
    margin: 50px 20px;
}
.cell_member_card{
    width: 90vw;
    max-width: 450px;
    height: 50vw;
    max-height: 280px;
    min-height: unset;
    font-size: 16px;
    font-weight: 400;
    background-position: bottom left -10px, top 20% right 25px;
    background-size: 55%, 35%;
}
.ls-bottom-right{
    width: 100%;
    height: 100%;
    padding: 10px 15px;
    font-weight: 300;
}
.cs-member-card-name{
    font-size: 18px;
    font-weight: 400;
}
.cs-member-card-btn a:hover{
    filter: sepia(.9) hue-rotate(150deg) contrast(1.1);
}


@media(max-width: 767px){
	.cs-member-card-name{
		font-size: 14px;
	}
    body:has(.cs-member-card-name) .bg_img:has(> .left_bgimg){
        margin: 0 10px;
    }
}

@media(max-width: 600px){
    .cell_member_card{
        background-size: 45%, 35%
    }
}



/* ----------------------------------- Member News ----------------------------------- */
#cs-memeber-news{
    display: flex;
    flex-direction: column;
    align-items: center;
    background: unset !important;
}
#cs-memeber-news > div{
    text-align: center;
}
#cs-memeber-news .cs-member-news-title{
    color: var(--main-color); 
    line-height: normal; 
    font-size: 40px; 
    font-weight:400; 
    text-align:center; 
    width: fit-content; 
    border-bottom: 2px solid var(--main-color);
    margin-bottom: 20px;
    padding: 0 20px;
}
#cs-memeber-news .cs-member-news-desc{
    max-width: 650px;
    font-size: 16px;
    font-weight: 400;
    color: var(--text-gray);
    line-height: normal;
    text-align: center;
    margin-bottom: 20px;
}
#cs-memeber-news .ls_point_font_size{  
    font-size: clamp(20px, 5vw, 60px);
    padding: 0 30px;
    color: var(--main-color);
    line-height: normal;
    font-weight: bold;
    text-align: center;
    width: 100%;
    max-width: 900px;
    border: 3px solid var(--main-color);
    border-radius: 200px;
    margin-bottom: 20px;
    white-space: nowrap;
}
#cs-memeber-news .cs-member-news-point-desc{
    color:var(--main-color);
    line-height: normal; 
    font-size: 14px; 
    font-weight: 400; 
    text-align:center; 
    width: 90%;
    max-width: 800px;
}
#cs-memeber-news .cs-member-news-return:not(#cs-memeber-news a){
    text-decoration: unset;
    color: var(--text-gray);
    margin-top: 50px;
    font-size: 14px;
}
#cs-memeber-news .cs-member-news-return:hover{
    /* color: var(--main-color) */
}
.cs-member-news-return{
    text-decoration: unset;
    color: white;
    margin-top: 50px;
    font-size: 14px;
    background: var(--main-color);
    padding: 5px 30px;
    border-radius: 50px;
}
.cs-member-news-return:hover{
    background-color: #007884;
    color: white;
}

@media(max-width: 767px){
    #cs-memeber-news{
        padding: 20px !important;
    }
    #cs-memeber-news .cs-member-news-title{
        font-size: 30px;
    }
}




/* ----------------------------------- Member Rewards Menu (Reward & Gift) ----------------------------------- */
#cs-member-reward-menu{
    width: 50vw;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    margin: 50px 20px;
}
#cs-member-reward-menu .subtitle{
    font-size: 20px;
    font-weight: 400;
    color: var(--text-gray);
    width: 100%;
    border-bottom: 1px solid #ddd;
}
#cs-member-reward-menu .menu_cell_background{
    border: unset;
    margin-top: 40px;
}
#cs-member-reward-menu .menu_cell_background > div{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    column-gap: 20px;
}
div[id*="cs-member-reward-menu-"]{
    width: 50%; 
    display:inline-block; 
    border-radius: 15px 15px 15px 15px; 
    box-shadow: 0 10px 5px 0 rgb(0 0 0 / 16%), 0 20px 10px 0 rgb(0 0 0 / 12%); 
    overflow:hidden;
}
div[id*="cs-member-reward-menu-"]:hover{
    transform: translatey(-5px);
}
div[id*="cs-member-reward-menu-"]:hover .menu_cell_text{
    color: var(--main-color)
}
div[id*="cs-member-reward-menu-"] .menu_cell_text{
    font-size: 20px;
    font-weight: 400;
}
#cs-member-reward-menu .top_cell{
    background-color: var(--main-color); 
    border-radius: 15px 15px 0px 0px; 
    height: 30vw;
    max-height: 330px;
    position: relative;
}
#cs-member-reward-menu .reward_img{
    height: 78%;
}
#cs-member-reward-menu-redeem .reward_img{
    height: 83%;
}


@media(max-width: 767px){
    .menu_cell_background{
        min-height: unset;
    }
    #cs-member-reward-menu{
        width: 70vw;
        box-shadow: unset;
        margin: 20px 0 50px;
        padding: unset;
    }
    #cs-member-reward-menu .top_cell{
        height: 40vw
    }
    #cs-member-reward-menu .reward_img{
        height: 85%;
    }
    div[id*="cs-member-reward-menu-"] .menu_cell_text{
	    font-size: 16px;
	}
}

@media(max-width: 500px){
    #cs-member-reward-menu{
        width: 85vw;
    }
    #cs-member-reward-menu .top_cell{
        height: 50vw
    }
}





/* ----------------------------------- Upload Receipt ----------------------------------- */
div:has( > #cs-member-receipt-upload){
	padding: 128px 20px 0 !important;
}
#cs-member-receipt-upload{
    margin: auto;
    padding: 50px 0;
    max-width: 800px;
}
.cs-member-return-header-fixed{
    width: 90% !important;
    border-bottom: 1px solid #ddd;
    position: fixed;
    left: 50%;
    transform: translatex(-50%);
    top: 78px;
    padding-top: 100px;
    background: #fff;
    z-index: 1;
}
#cs-member-receipt-upload .cs-member-return-header-fixed{
	/* max-width: 800px; */
}
.cs-member-return-header{
    display: flex;
    width: 100%;
    align-items: center;
    flex-wrap: nowrap;
    position: relative;
}
.cs-member-return-header .cs-member-return-btn{
    color: var(--text-gray);
    font-size: 12px;
    white-space: nowrap;
    position: absolute;
    left: 0;
    user-select: none;
}
.cs-member-return-btn::before {
    content: "❮";
    display: inline-block;
}
.cs-member-return-header .cs-member-return-btn:hover{
    color: var(--main-color);
    cursor: pointer
}
.cs-member-return-header .cs-member-return-title{
    font-size: 20px;
    font-weight: 400;
    color: var(--text-gray);
    width: 100%;
    margin-bottom: 10px;
}
@media(max-width:767px){
	div:has( > #cs-member-receipt-upload){
		margin: 0 10px !important;
		padding: 128px 20px 0 !important;
	}
	.cs-member-return-header-fixed{
	    width: calc(100vw - 40px) !important;
	    padding-top: 100px;
	    padding: 0 10px;
	}
	#cs-member-receipt-upload .subtitle-step-cell-upload{
		margin-top: 0 !important;
	}
}
@media(max-width:360px){
	#cs-member-receipt-upload .radio-icon label{
		width: 19vw !important;
		height: 19vw !important;
	}
	#cs-member-receipt-upload .radio-icon label img{
		width: 100%;
	}
}

/* Member Upload Receipt */
#cs-member-receipt-upload .subtitle-step-cell-upload {
    letter-spacing: 1px;
    text-align: left;
    margin-top: 80px;
}

#cs-member-receipt-upload .mypadding .client-upload{
    width: 100%;
    margin-top: 30px;
}
#cs-member-receipt-upload .mypadding .client-upload p{
    font-size: 14px;
    font-weight: 400;
    color: var(--text-gray);
    margin: 0 0 10px;
}
#cs-member-receipt-upload .radio-icon{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    column-gap: 20px
}
#cs-member-receipt-upload .radio-icon label{
    border: 2px solid #fff;
    border-radius: 10px;
    padding: 8px;
    margin-bottom: 20px;
    width: 80px;
    height: 80px;
    text-align: center;
}
#cs-member-receipt-upload .radio-icon label:has(div){
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
}
#cs-member-receipt-upload .radio-icon label:has(div) img{
    width: 50px;
    margin-bottom: 3px
}
#cs-member-receipt-upload .radio-icon input{
    display: none;
}
#cs-member-receipt-upload input[id*="radioTitle"]:checked + label{
    background-color: #e1f5ff;
    border: 2px solid var(--main-color);
}

#cs-member-receipt-upload .drop-zone{
    margin-bottom: 30px;
    border: 2px solid #ddd;
}
#cs-member-receipt-upload .drop-zone:hover{
    background: #f8f8f8
}

#cs-member-receipt-upload .drop-zone:has(.drop-zone__thumb) .cs-receipt-format{
    display: none;
}
#cs-member-receipt-upload .drop-zone__thumb{
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #eee
}

/* Member Receipt Info */
#cs-member-receipt-upload .mypadding .form-section > div{
    margin: unset;
    padding: unset;
}
#cs-member-receipt-upload .mypadding .form-section .w3-row-padding > .w3-col{
    padding: unset;
}
#cs-member-receipt-upload .mypadding .form-section .w3-container{
    font-size: 14px;
    font-weight: 400;
    color: var(--text-gray);
    padding: unset;
}
#cs-member-receipt-upload select,
#cs-member-receipt-upload input{
    color: unset;
    padding-left: 20px;
}
#cs-member-receipt-upload input::placeholder{
    font-size: 14px;
    font-weight: 400;
}

#cs-member-receipt-upload .form-navigation > div,
#cs-member-receipt-upload .form-navigation > div > div{
    padding: unset !important;
    margin: unset;
}
#cs-member-receipt-upload #form_validate{
    font-size: 14px;
}
#cs-member-receipt-upload .form-navigation{
    margin: unset;
}
#cs-member-receipt-upload button{
    font-size: 14px;
    border-radius: 50px;
}

@media(max-width: 600px){
	form .template-form-section-content-cell{
		padding: unset;
	}
	form .template-form-section-content-cell > div{
		margin-bottom: unset !important;
	}
	.template-form-section-content-cell > div:not(:has( > *)){
	    display: none;
	}
	.template-form-section-content-cell .w3-container:has(#hour) > div{
	    width: 50%;
	}
}









/* ----------------------------------- Success Upload Receipt ----------------------------------- */
.cs-upload-success h3{
    font-size: 16px !important;
}


/* ----------------------------------- 積分記錄 Reward Point History ----------------------------------- */
#cs-member-reward-history{
    margin: 50px 0 20px;
    height: 100%;
/*     min-width: unset; */
    max-width: 600px;
    min-height: unset;
    opacity: 1;
    position: relative;
    border-radius: 20px;
    box-shadow: 0 0 15px 3px rgba(0,0,0,0.15);
    min-width: 600px;
    max-height: 50vh;
    overflow: hidden;
}

#cs-member-reward-history .title-cell-upload{
    border-bottom: 1px solid #ddd;
    position: absolute;
    top: 0;
    left: 0;
    padding: 20px 20px 0;
    border-radius: 20px 20px 0  0;
    z-index: 1
}

#cs-member-reward-history .cell_coupon_info{
    height: 100%;
    max-height: 50vh;
    border-radius: 20px;
    overflow-y: scroll;
}
/* History Item */
#cs-member-reward-history .cell_coupon_info button:first-of-type{
    margin-top: 70px;
}

#cs-member-reward-history .cell_coupon_info button{
    width: 100%;
    margin: 30px 0 0;
    padding: 10px 20px;
}
#cs-member-reward-history .cell_coupon_info button:not(.active):hover{
    background-color: var(--main-color)1a
}
/* History Item Top */
#cs-member-reward-history .cell_coupon_info button .cs-coupon-history-header{
    margin-left: 40px;
    padding-bottom: 5px;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#cs-member-reward-history .cell_coupon_info button .cs-coupon-history-header > div{
    float: unset;
}
#cs-member-reward-history .cell_coupon_info button .div-left{
    font-size: 20px;
    position: relative;
    width: 100%;
}
#cs-member-reward-history .cell_coupon_info button .div-left::before{
    content: "";
    background-image: url(https://member.laisunclub.com/public/storage/client/arrow_right.png);
    background-size: contain;
    display: inline-block;
    height: 20px;
    width: 20px;
    position: absolute;
    top: 26%;
    left: -35px;
}
#cs-member-reward-history .cell_coupon_info button.active .div-left::before{
    transform: rotate(90deg)
}
/* Status "處理中" color: #333 */ 
#cs-member-reward-history .cell_coupon_info button .div-right{
    font-size: 14px;
    font-weight: 500;
    height: min-content;
    width: 100px;
    text-align: center;
    padding: 3px 20px;
    color: #fff;
    border-radius: 50px;
}
.cs-coupon-history-header .div-left #coll_title_bloc2,
.cell_coupon_info .cs-coupon-point{
    color: var(--main-color) !important;
    line-height: 1.2;
}
.cs-coupon-history-header .div-right.cs-process{
    background: #808080
}
.cs-coupon-history-header .div-right.cs-success{
    background: var(--main-color)
}
.cs-coupon-history-header .div-right.cs-fail{
    background: #d52c2c
}
.cell_coupon_info .div-left-value{
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2
}
/* History Item Bottom */
#cs-member-reward-history .cell_coupon_info button .cs-coupon-history-brief{
    padding: 10px 0 0 50px;
}
#cs-member-reward-history .cell_coupon_info button .cs-coupon-history-brief > div{
    padding: unset;
}
#cs-member-reward-history .subtitle{
	letter-spacing: 1px;
}
/* History Item Expand Content */
#cs-member-reward-history .cell_coupon_info .content{
    padding: 10px 70px 0;
    background: #f4f4f4;
}
#cs-member-reward-history .cell_coupon_info .content > div{
    padding: unset;
    white-space: nowrap;
}
#cs-member-reward-history .cell_coupon_info .content .div-left-title{
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    margin: 10px 0 5px;
}
#cs-member-reward-history .cell_coupon_info .content .div-left-value{
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
}
#cs-member-reward-history .cell_coupon_info .content .cs-coupon-point{
    color: var(--main-color);
}
.cs-fail-reason{
    color: #d52c2c !important
}

/* Paginator */
#cs-member-reward-history + div:has(.pagination){
    padding-bottom: 100px;
}

div:has( > .pagination.menu){
	display: flex;
	justify-content: center;
}

@media(max-width: 767px){
    #cs-member-reward-history{
        width: 85vw;
        min-width: unset;
        margin: 0 0 20px;
        padding: unset;
    }
    #cs-member-reward-history .cs-coupon-history-header #coll_title_bloc2{
        font-size: 16px;
        white-space: normal;
    }
    #cs-member-reward-history .cell_coupon_info button{
    	margin: 10px 0 0;
    	padding: 5px 10px 10px;
    }
    #cs-member-reward-history .cell_coupon_info button .div-left{
    	font-size: 18px;
    }
    #cs-member-reward-history .cell_coupon_info button .div-right{
    	font-size: 12px;
    	width: 70px;
    	padding: 1px 0;
    }
    #cs-member-reward-history .cell_coupon_info .content{
    	padding: 10px 60px 0;
    }
    #cs-member-reward-history .cell_coupon_info .content .div-left-value{
    	font-size: 14px;
    }
}








/* --------------------------------------------- Redeem (/member_coupon) ------------------------------------------------- */
.cs-redeem-fixed{
    width: calc(100vw - 240px);
    max-width: 1430px
}
.coupon-section-content-cell > div{
    padding: unset !important;
}
/* Filter Bar */
#cs-redeem .coupon-section-content-cell{
    padding-top: 120px
}
#cs-redeem .input-container{
    height: 39px;
    transform: translatey(-1px);
    border-color: #ccc;
}

/* Item Grid */
#cs-redeem .links{
    max-width: 1550px;
    margin-bottom: 50px;
}
#cs-redeem .section-grid{
    padding: unset;
}
#cs-redeem .grid-prod{
    justify-content: flex-start;
}
/* Single Item */
#cs-redeem .grid-prod .prod-grid{
    width: 20%;
    margin: 0 0 20px;
    padding: 0 10px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    flex: unset;
}
#cs-redeem  .grid-prod .prod-grid .prod-grid-img{
    width: 100%;
    height: 12vw;
    max-height: 200px;
    min-height: unset;
    border-radius: 20px;
}
#cs-redeem  .grid-prod .prod-grid .prod-grid-img img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    background-color: unset;
}
#cs-redeem .grid-prod .prod-grid:has(.btn:hover) .prod-grid-img img{
    transform: scale(1.1)
}
#cs-redeem  .grid-prod .prod-grid h3{
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5em;
    color: var(--text-gray);
    height: 45px;
}
#cs-redeem .btn{
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    height: 32px;
    margin: 10px 0 30px
}
#cs-redeem .btn:hover{
    background-color: #007884
}

@media(max-width: 1300px){
    #cs-redeem .links{
        padding: 0 20px;
    }
    #cs-redeem .coupon-section-content-cell{
        padding: 120px 30px 0;
    }
    #cs-redeem .grid-prod .prod-grid{
        width: 25%;
    }
    #cs-redeem  .grid-prod .prod-grid .prod-grid-img{
        height: 14vw
    }
}
@media(max-width: 1024px){
    #cs-redeem {
        padding: 128px 20px 0 !important;
    }
    #cs-redeem .grid-prod .prod-grid{
        width: 33.333%;
    }
    #cs-redeem  .grid-prod .prod-grid .prod-grid-img{
        height: 16vw
    }
}
@media(max-width: 767px){
    #cs-redeem{
        margin: 0 10px !important;
        padding: 128px 0px 0 !important;
    }
    .cs-member-return-header-fixed{
        padding-top: 70px !important;
        top: 70px !important
    }
    #cs-redeem .coupon-section-content-cell{
        padding-top: 80px;
        margin-bottom: 30px;
    }
    #cs-redeem .coupon-section-content-cell,
    #cs-redeem .coupon-section-content-cell .w3-container{
        width: 100% !important;
        display: flex;
        flex-direction: column;
    }
    #cs-redeem .coupon-section-content-cell >div,
    #cs-redeem .coupon-section-content-cell .w3-container > div{
        width: 100%;
        margin: unset !important;
        padding: unset !important;
    }
    #cs-redeem .input-container{
        margin: unset;
    }
    #cs-redeem .grid-prod .prod-grid{
        width: 50%;
    }
    #cs-redeem  .grid-prod .prod-grid .prod-grid-img{
        height: 28vw
    }
    #cs-redeem  .ls-input-with-error-space{
        height: unset;
    }
    #cs-redeem  select#score-group{
        margin-top: 14px
    }
    #cs-redeem .grid-prod .prod-grid h3{
    	font-size: 14px;
    }
}
@media(max-width: 600px){
    #cs-redeem .coupon-section-content-cell{
        padding: 80px 20px 0;
    }
    #cs-redeem .links{
        padding: 0 10px;
    }
    
}





/* --------------------------------------------- Redeem Details (/member_coupon_detail) ------------------------------------------------- */
#cs-redeem-detail{
    width: 100%;
    max-width: 1530px;
    padding: 0 50px;
}
#cs-redeem-detail .cs-member-return-header{
    border-bottom: 1px solid #ddd;
    height: 50px;
    margin-bottom: 50px;
}
#cs-redeem-detail .cs-redeem-detail-content{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    margin-bottom: 80px;
}

#cs-redeem-detail button:hover{
    background-color: #007884
}
#cs-redeem-detail button:disabled, 
#cs-redeem-detail button[disabled] {
    background-color: #808080;
}
/* Left */
#cs-redeem-detail .coupon_detail_left .prod-grid-img{
    height: 300px;
    border-radius: 20px;
    overflow: hidden;
}
#cs-redeem-detail .coupon_detail_left .prod-grid-img img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    background-color: unset;
}
/* Right */
#cs-redeem-detail .coupon_detail_right{
    padding-left: 50px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8em;
    color: var(--text-gray);
}
#cs-redeem-detail .coupon_detail_right .page-title{
    font-size: 24px;
    color: var(--main-color);
    font-weight: 400;
    margin: 0 0 20px;
    padding-bottom: 20px;
    max-width: unset;
    border-bottom: 1px solid var(--main-color);
}
#cs-redeem-detail .coupon_detail_right > div[class*="cs-redeem-detail-"]{
    margin-bottom: 25px;
}
#cs-redeem-detail .coupon_detail_right .coupon_detail_left{
    width: 20%;
    white-space: nowrap;
}
#cs-redeem-detail .coupon_detail_right .coupon_detail_right{
    width: 80%;
}
#cs-redeem-detail .cs-redeem-detail-amount{
    display: flex;
    padding-bottom: 30px;
    align-items: center;
}
#cs-redeem-detail .cs-redeem-detail-amount .coupon_detail_right{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
}
#cs-redeem-detail .cs-redeem-detail-amount .btn{
    font-size: 25px;
    font-weight: 300;
    line-height: 0.95;
}
#cs-redeem-detail .cs-redeem-detail-amount #btn_reduce{
    padding-bottom: 20px;
}
#cs-redeem-detail .cs-redeem-detail-amount #textSizeInput{
    font-size: 18px;
    width: 100px;
    justify-items: center;
    border-radius: 50px;
    border: 1px solid #ddd;
    padding: 6px 20px 6px 34px !important;
}
.cs-redeem-detail-btn{
    display: inline-block;
    width: 100%;
    margin-bottom: 0 !important;
}
.cs-redeem-detail-btn #btn_redeem{
    font-size: 18px;
    width: unset;
    height: unset;
    padding: 8px 80px;
}

#warning_message{
    font-size: 14px;
    color: red;
}


@media(max-width: 1024px){
    #cs-redeem-detail .cs-redeem-detail-content{
        flex-direction: column;
    }
    .coupon_detail_left{
        width: 100% !important;
        margin-bottom: 50px !important;
    }
    #cs-redeem-detail .coupon_detail_right{
        padding: unset;
        width: 100%;
    }
}

@media(max-width: 767px){
    div:has(> #cs-redeem-detail){
        padding: 128px 20px 0!important;
        margin: 0 10px !important;
    }
    #cs-redeem-detail{
        padding: unset;
    }
    #cs-redeem-detail .coupon_detail_left .prod-grid-img{
        height: 250px;
    }
    .coupon_detail_left{
    	width: 100% !important;
        margin-bottom: 30px
    }
    #cs-redeem-detail .coupon_detail_right .page-title{
        font-size: 20px;
        padding-bottom: 10px;
    }
    #cs-redeem-detail .coupon_detail_right .coupon_detail_left,
    #cs-redeem-detail .coupon_detail_right .coupon_detail_right,
    .cs-redeem-detail-btn #btn_redeem{
        width: 100% !important;
        margin-bottom: 0px !important;
    }
    .cs-redeem-detail-intro .coupon_detail_right p{
        font-size: 14px !important;
        line-height: 1.5em
    }
    #cs-redeem-detail .cs-redeem-detail-amount .btn{
        line-height: 0.8
    }
}








/* ----------------------------------- Redeem Success ----------------------------------- */
.cs-redeem-success .cell_info{
    /* padding: 20px 0 30px !important; */
}
.cs-redeem-success h3{
    line-height: 1.5em !important;
}
.cs-redeem-success .cs-success-submenu{
    font-size: 14px;
    font-weight: 400;
    text-align:center; 
    margin-top:20px; 
    color: var(--text-gray); 
    display: block
}
.cs-redeem-success .cs-success-submenu a:hover{
    color: var(--main-color);
}

#cs-reg-success:not(:has(.cell_member_card)) .ls-center > div{
	justify-items: center;
}
.cs-redeem-success .ls-center .cs-success-submenu a{
	white-space: nowrap;
}

/* ----------------------------------- Redeem History Coupon (/member_history_own_e_coupons) ----------------------------------- */
.cs-member-redeem-history-menu{
    padding: 130px 50px 30px;
    width: 100%;
}
.cs-member-redeem-history-menu{
    display:flex;
    justify-content: center;
    flex-direction: row;
    gap:20px;
}
.cs-member-redeem-history-menu .subtitle{
    width:300px;
}
.cs-member-redeem-history-menu .subtitle button{
    font-size: 16px;
    font-weight: 400;
}
.cs-member-redeem-history-menu .subtitle button.active-btn{
    pointer-events: none;
}
.cs-member-redeem-history-menu .subtitle button.inactive-btn{
    color: var(--main-color);
}
.cs-member-redeem-history-menu .subtitle button.inactive-btn:hover{
    background: var(--main-color);
    color: #fff;
}
.cs-member-redeem-history-menu .red-warning{
    display: contents;
}

@media(max-width: 767px){
	.cs-member-redeem-history-menu{
		padding: 100px 50px 30px;
	}
}


/* ----------------------------------- Redeem History Coupon Detail (/member_history_own_e_coupons-8) ----------------------------------- */
.cs-redeem-detail-tnc iframe{
    border-radius: 20px !important;
    padding: 10px 5px;
    height: 300px;
}

#cs-redeem-detail #show_barcode{
    font-size: 18px;
    font-weight: 400;
    padding: 8px;
    height: unset;
}

#cs-redeem-detail img#barcode[src*="api.qrserver.com"]{
    object-fit: contain;
    padding: 20px;
    background-color: #fff;
}

/* Folding Product Intro */
.cs-redeem-detail-intro .coupon_detail_right p {
    font-size: 16px;
    margin: unset;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    height: auto;
}

.toggle-checkbox {
    display: none;
}

.toggle-button {
    margin-top: 10px;
    cursor: pointer;
    color: var(--main-color);
    font-size: 14px;
}

.coupon_detail_right:has(.toggle-checkbox:checked)  p {
    -webkit-line-clamp: unset;
    overflow: visible;
    display: block;
}

.toggle-button::after {
    content: "查看更多";
}

.coupon_detail_right:has(.toggle-checkbox:checked) p {
    -webkit-line-clamp: unset;
    overflow: visible;
    display: block;
}

.coupon_detail_right:has(.toggle-checkbox:checked) .toggle-button::after {
    content: "收起";
}



/* ----------------------------------- Redeem History ----------------------------------- */
#cs-member-redeem-history-gift{

}
/* Container */
@media(max-width:767px){
    #cs-member-redeem-history-gift .cs-table-overflow-box{
        width: calc(100vw - 30px);
        overflow-x: scroll;
        min-height: 440px;
    }
    #cs-member-redeem-history-gift .cs-table-overflow-inner{
        min-width: 600px;
    }
}
/* Table Head */
.cs-gift-order-head{
    max-width: 85%;
    margin: auto;
    display: flex; 
    color:#565340; 
    font-size: 14px;
}
.cs-gift-order-head > div > div{
    padding-bottom: 10px;
}
.cs-gift-order-head .cs-gift-order-number,
.cs-gift-order-head #coll_title_bloc1,
.cs-gift-order-head #coll_title_bloc2,
.cs-gift-order-head #coll_title_bloc3{
    border-bottom: 0.5px solid gray;
}
.cs-gift-order-number{ 
    color: #808080 !important;
    margin-left: 20px;
    padding-left: 16px;
    width: 30%;
    align-content: center;
}
.cs-gift-order-number > div{
	padding-right: 5px;
}
#cs-member-redeem-history-gift #coll_title_bloc1 {
    color: #808080 !important;
    width: 20% !important;
    text-align:left;
    align-content: center;
}
#cs-member-redeem-history-gift #coll_title_bloc3{
    color: #808080 !important;
    width: 30%; 
    text-align: left;
    align-content: center;
}
#cs-member-redeem-history-gift #coll_title_bloc2{
    color: #808080 !important;
    width: 20%; 
    text-align: left;
    align-content: center;
}

#cs-member-redeem-history-gift #coll_title_bloc2 > div{
    justify-self: center;
}
.cs-gift-order-body #coll_title_bloc3{
    font-weight: 400;
}


/* Table Body */
.cs-gift-order-body-arrow{
    align-content: center;
}
.cs-gift-order-body{
    max-width: 85%; 
    margin: auto;
}
.cs-gift-order-body .cs-gift-order-number{
    margin-left: 20px;
    padding-left: 16px;
}

/* Pop Container */
.cs-gift-order-body .content,
.cs-gift-order-body .div-left-title,
.cs-gift-order-body .div-left-value{
    border: unset !important;
}
.cs-gift-order-body .content{
    border: 1px solid var(--main-color) !important;
    border-radius: 0 30px 30px 30px;
    margin-top: 0px;
    position: relative;
    overflow: unset;
}
.cs-gift-order-body .content:before{
    content: "";
    display: block;
    width: 30px;
    height: 30px;
    background: #fff;
    border-left: 1px solid var(--main-color);
    position: absolute;
    top: -30px;
    left: -1px;
}
.cs-gift-order-body .content:after{
    content: "";
    display: block;
    width: 42px;
    height: 41px;
    border-left: 1px solid var(--main-color);
    transform: rotate(-45deg);
    position: absolute;
    top: -50px;
    left: 8px;
}

/* Order Detail - Top*/
.cs-gift-order-body .content .div-left-title{
    font-size: 22px; 
    font-weight: 400;
    color: var(--main-color);
    padding-top: 20px; 
    padding-bottom: 10px; 
    
}
.cs-gift-order-body .div-right{
    font-size: 14px;
    font-weight: 400;
    color: #fff !important;
    padding: 5px;
}
.cs-gift-order-body .grid-prod > .content{
    width: calc(100% - 56px);
    margin-left: 56px;
    margin-top: 50px;
}
.cs-gift-order-body-detail-top{
    color: white;
}
.cs-gift-order-body-detail-top .detail_img_cell{
    border-radius: 10px; 
    background-color: var(--main-color);

}
.cs-gift-order-tc{
    font-size: 10px;
    font-weight: 300;
    padding: 30px;
    flex-direction: column !important;
    line-height: 1.5;
}
.cs-gift-order-tc p{
    font-size: 10px;
    font-weight: 400;
    height: unset;
    margin: 0 0 5px;
}
.cs-gift-order-body-detail-bottom{
    color: #808080;
}
.cs-gift-order-body-detail-bottom .detail_img_cell{
    border-radius: 30px; 
    background-color: white;
}
.cs-gift-order-body-detail-bottom-head{
    display: flex; 
    width:100%
}
#cs-member-redeem-history-gift .detail_img_1{
    width: 200px;
    min-width: 200px;
    height: auto;
    padding: 10px;
}
#cs-member-redeem-history-gift .detail_img_1 img{
    width: 100%;
    height: 100%;
    max-height: 130px;
    object-fit: cover;
    border-radius: 5px;
}
#cs-member-redeem-history-gift .detail_img_2{
    width: 100%;
}
.cs-gift-order-body-detail-top .detail_img_2 > div{
    align-items: center;
}
.cs-gift-order-body-detail-top .detail_img_2 > div:has(img){
    font-weight: 400;
}

/* Order Detail - Bottom*/
.cs-gift-order-body-detail-bottom-head div[class*="cs-gift-order-bottom-h-"]{
    border-bottom: 0.5px solid gray; 
    margin-bottom: 10px;
}
.cs-gift-order-bottom-h-1{
    width: 60%
}
.cs-gift-order-bottom-h-2{
    width: 20%;
}
.cs-gift-order-bottom-h-3{
    width: 20%;
}
.cs-gift-order-total{
    padding: 0 30px;
}
.cs-gift-order-total > div{
    border-top: 1px solid var(--main-color);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-between;
}

.cs-gift-order-total p{
    font-size: 20px; 
    font-weight: 400;
    color: var(--main-color);
}
.cs-gift-order-total p.cs-gift-order-total-num{
    font-weight: 600;
    color: var(--main-color);
}
@media(min-width: 1740px){
	.cs-gift-order-head,
	.cs-gift-order-body{
		max-width: 1400px;
	}
}

@media(max-width: 767px){
    #cs-member-redeem-history-gift{
        margin: 0 10px !important;
        padding: 128px 0 0 !important;
        min-height: 70vh;
    }
    .cs-gift-order-head,
    .cs-gift-order-body{
        width: 100%;
        max-width: unset;
        margin: unset;
        padding: 0 20px;
    }
    .cs-gift-order-number,
    #coll_title_bloc1,
    #coll_title_bloc2,
    #coll_title_bloc3,
    #coll_title_bloc2 .div-right,
    .cs-gift-order-bottom-h-1,
    .cs-gift-order-bottom-h-2,
    .cs-gift-order-bottom-h-3{
        font-size: 12px;
    }
    .cs-gift-order-number,
    .cs-gift-order-number{
        margin: unset !important;
    }
    .cs-gift-order-body .grid-prod > .content{
    max-width: 80vw
    }
    .cs-gift-order-body .content{
        margin-left: 20px !important;
        width: calc(100% - 26px) !important;
    }
    .cs-gift-order-body .content > div:not(div:first-of-type){
        padding-left: 15px;
        padding-right: 15px;
    }
    .cs-gift-order-body .content .div-left-title{
        font-size: 18px;
    }
    #coll_title_bloc2,
    .cs-gift-order-bottom-h-3{
        white-space: nowrap
    }
    #cs-member-redeem-history-gift .detail_img_cell{
        flex-direction: column;
    }
    #cs-member-redeem-history-gift .detail_img_1{
        width: 100%;
    }
    #cs-member-redeem-history-gift .detail_img_2{
        width: 100%;
        padding: 0 10px 10px !important;
    }
}









/* ----------------------------------- Member Profile ----------------------------------- */
#cs-member-profile{
    margin: 50px 20px;
}
#cs-member-profile > div{
    justify-items: center;
    text-align: center;
}
#cs-member-profile .cell_input{
    width: 50vw;
    max-width: 600px;
    margin-bottom: 20px;
    padding: 30px 30px 40px;
    box-shadow: 0 0 15px 3px rgba(0,0,0,0.15);
    background-color: #fff;
    border-radius: 20px;
}
#cs-member-profile .info-title{
    font-size: 20px;
    font-weight: 400;
    color: var(--text-gray);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-color: #ccc;
}
#cs-member-profile .cell_input_item_cell{
    padding: 5px 0;
}
#cs-member-profile .cell_input_item {
    font-size: 16px;
    font-weight: 400;
    width: 60%;
    color: var(--text-gray);
    white-space: nowrap;
}
#cs-member-profile .cell_input_item_cell .cell_input_item{
    width: 40%;
    padding-left: 5px;
}
#cs-member-profile .cs-member-profile-btn{
    display: flex;
    margin-top: 30px;
}
#cs-member-profile .cs-member-profile-btn button{
    padding: 5px;
    border-radius: 50px;
}

@media(max-width: 1024px){
    #cs-member-profile .cell_input{
        width: 80vw;
        max-width: unset;
    }
}
@media(max-width: 767px){
    #cs-member-profile{
        margin: 50px 0 50px;
    }
    #cs-member-profile .cell_input_item_cell{
        flex-direction: column
    }
    #cs-member-profile .cell_input_item_cell .cell_input_item{
        width: 100%;
        text-align: left !important;
        font-size: 14px;
    }
}