@charset "utf-8";
/* CSS Document */




@font-face {
    font-family: 'Julius_Sans_One';
    src: url('../lib/font/Julius_Sans_One/JuliusSansOne-Regular.ttf');
}

@font-face {
    font-family: 'gilroy';
    src: url('../lib/font/gilroy/Gilroy-Medium.ttf');
}



html, body {
    margin : 0;
    padding : 0;
    font-family : gilroy; 
    font-Size : 10pt;
    color : #000;

    line-height: 1.5em;
    letter-spacing: normal;
    background-image: url(../data/background/a.jpg);
    background-size: 0px 0px;
    
   
}


*, ::before, ::after { 
   padding: 0; 
   margin: 0; 
   background-repeat: no-repeat; 
   background-position: center center;
   background-size: auto auto;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
    user-select: none;
   -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
   border: none;
   cursor: default;
   outline: none;
   list-style: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-overflow-scrolling: touch;
   text-decoration: none;

}

::before, ::after {
      position: absolute;
      top : 0px;
      left : 0px;
      right: 0px;
      bottom: 0px;
}


div#bg {
    position: fixed;
   width: 100vw;
   height: 100vh;
  background-image: url(../data/background/a.jpg);
   background-size: cover;
   filter: blur(5px);
   background-color: rgba(0, 0, 0, 0.03);
   opacity: 0.3;
   z-index:-1;
}

a, a:hover, a:focus {
   text-decoration: none;
   cursor: pointer;
   color: inherit;
}


input, 
textarea {
    background-color: transparent;
    width: 100%;
   -webkit-user-select: text;
   -moz-user-select: text;
   -ms-user-select: text;
    user-select: text;
    display: block;
    text-transform: none;
    text-align: left;
    font-size: inherit;
    font-family: inherit;
}

input {
   z-index: 9; 
   
}

input:-webkit-autofill,
input:-webkit-autofill:focus,
input:-webkit-autofill:not(:focus) {
  box-shadow: 0 0 0 1000px #fff inset;
  transition : none;
  font-size: inherit;
    font-family: inherit;
}

input::-webkit-credentials-auto-fill-button {
    background-color: #666;
    transition: 400ms;
    margin-left: 10px;
    font-size: inherit;
    font-family: inherit;
}

input::-webkit-credentials-auto-fill-button:hover {
  
   font-size: inherit;
    font-family: inherit;
}


input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
   -webkit-appearance: none;

}

input[type=number]{
   -moz-appearance:  textfield;
}




.e_section {
   position : relative;
   min-height : 50;
   height: auto;
   background-color : transparent;
   float : left;
   width : 100%;
   text-align: center;
}

.e_label {
   /*
   position : relative;
   font-size : 40;
   font-weight : bold;
   padding : 20;
   text-align : left;
   float : none;
   background-color : inherit;
   width : "calc( 100% - calc( 40px ) )";
   height : auto;
   text-align: center;
   line-height: 35px;
   margin-top: 40px;
   margin-bottom:0px;
   */
   padding: 40px;
   font-size : 40;
   font-weight : bold;
   text-align: center;
   line-height: 37px;
   margin-bottom: 0px;
}

.e_logo {
   width: 200px;
   height: 200px;
   margin: 10 auto 0 auto;
   background-size: contain;
}


.e_wrapper {
   position : relative;
   max-width : 600;
   margin : 0 auto 0 auto;
   padding : 0;
   padding-left : 5;
   padding-right : 5;
   height : auto;
}

.e_wrapper.col-1 > .e_column {
   width : 100% 
}

.e_wrapper.col-2 > .e_column {
   width : 50% 
}

.e_wrapper.col-3 > .e_column {
   width : 33.333% 
}

.e_column {
   position : relative;
   float : left;
   width : 100%;
   height : auto;
}

.e_content {
   position : relative;
   margin : 0;
   padding : 0;
   width: calc( 100% - 0px );
   text-align: left;
}



.e_searchbox {
  
   max-width: 300px;
   margin: 20px auto 20px auto;
   height: 40px;
   position: relative;

   
}

.e_searchbox .input-container {
   position: relative;
   background-color: rgba(255, 255, 255, 0.5);
   border-radius: 0px;
   height: 40px;
   border: 1px solid #ddd;
   border-radius: 25px;
}

.e_searchbox .input-container::before {
   content: "";
   position: absolute;
   top: 0px;
   left: 0px;
   bottom: 0px;
   width: 40px;
   border-radius: inherit;
   
   background-image: url("../lib/icn/search-d.png");
   background-size: 100% auto;
}

.e_searchbox .input-container input {
   line-height: 40px;
   padding-left: 40px;
   padding-right: 20px;
   font-weight: bold;
   font-size: 16px;
}


.e_searchbox .search-result {
   width: 100%;
   height: auto;
   background-color: rgba(0,0,0,0.8);
   position: absolute;
   z-index: 200;
   overflow-y: auto;
   /* height: 210px; */
   display: none;
   border-radius: 10px;
   box-shadow: 0px 10px 10px rgba(0,0,0,0.8);
 
}

.e_searchbox .search-result > li {
   float: left;
   width: 100%;
   
   height: auto;
   padding-top: 0px;
   padding-bottom: 5px;
  
   position: relative;
}

.e_searchbox .search-result > li:hover div {
   color: orange;
}

.e_searchbox .search-result > li:last-child {
  margin-bottom: 10px;
}

.e_searchbox .search-result > li > div {
   position: relative;
   float: left;
   color: #fff;
}

.e_searchbox .search-result > li > div:first-child {
   width: 30px;
   height: 30px;
   border-radius: 50%;
   margin: 10px;
   margin-bottom: -7px;
   background-color: #555;
   background-size: cover;
}

.e_searchbox .search-result > li > div:last-child {
   height: auto;
   width: calc( 100% - 60px );
   margin-top: 15px;
   
  
   transition: 300ms;
}

.e_searchbox .search-result > li:hover > div {
  
}




#e_header {
   position: fixed;
   height: auto;
   background-color: rgba(255, 255, 255, 1) ;
   z-index: 1000;
   padding: 0px;
   box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1);
}
     
 #e_header .e_content {
   padding: 0px;
   margin: 0px;
   position: relative;
   float: left;
   height: 50px;
   display: flex;
   align-items: center;
   justify-content: flex-end;
   flex-wrap: nowrap;
 }  

 #e_header .e_wrapper {
   padding: 0px;
   height: 50px;
   background-size: auto 50px;
   background-position: right 10px center;
 }

#e_menu {
   margin-top: 50px;
}

#homepage {
   flex-grow: 4;
}

#homepage > a {
   display: inline-block;
   padding-left: 35px;
   font-weight: bold;
   z-index: 2;
}

#homepage::before {
   content: "";
   display: block;
   position: absolute;
   top: 0px;
   left: 0px;
   width: 30px;
   bottom: 0px;
   background-image: url("../lib/icn/home-l.png");
   background-size: 22px 22px;
   background-repeat: no-repeat;
   z-index: -1;
}

#homepage.back::before {
   background-image: url("../lib/icn/back-l.png");
}


#cart {
   position: relative;
   height: 50px;
   width: 50px;
   flex-grow: 0;
   flex-shrink: 0;
   background-image: url("../lib/icn/cart.png");
   background-size: 22px 22px;
}

#cart a {
   position: absolute;
   top: 0px;
   left: 0px;
   right: 0px;
   bottom: 0px;
   cursor: pointer;
}

#cart div {
   top: 5px;
   right: 2px;
   position: relative;
   float: right;
   padding-left: 5px;
   padding-right: 5px;
   border-radius: 10px;
   background-color: orange;
   color: #fff;
   font-size: 10px;
}

#lang {}

#lang ul {
   display: flex;
   gap: 0px;
}

#lang ul > li {
   position: relative;
   padding-left: 10px;
   padding-right: 10px;
   font-weight: bold;
   cursor: pointer;
}

#lang ul > li > a {
   position: absolute;
   top: 0px;
   left: 0px;
   right: 0px;
   bottom: 0px;
   cursor: pointer;
}

#lang ul > li:first-child {
   border-right: 1px solid #ccc;
   padding-right: 11px;
}

#lang ul > li:hover,
#lang ul > li.active {
   color: orange;
}


   /* 
#homepage {
   position: relative;
   height: 30px;
   line-height: 30px;
   top: 10px;
   width: auto;
}

#homepage a {
   font-size: 14px;
   display: inline-block;
   padding-left: 35px;
   padding-right: 15px;
   background-image: url("../lib/icn/home-l.png");
   background-size: 26px 26px;
   background-repeat: no-repeat;
   background-position: left 10px center;
   border-radius: 0px;
   border: 0px solid #eee;
   text-indent: 10px;
}

#homepage.home a {
    background-image: url("../lib/icn/home-l.png");
}

#homepage.back a {
    background-image: url("../lib/icn/back-l.png");
}

#cart {
   position: absolute;
   top: 0px;
   right: 0px;
   bottom: -20px;
   width: 50px;
   background-image: url("../lib/icn/cart.png");
   background-size: 22px 22px;
}

#cart a {
   position: absolute;
   display: block;
   top: 0px;
   left: 0px;
   right: 0px;
   bottom: 0px;
   opacity: 0;
}

#cart div {
   font-weight: bold;
   font-size: 9px;
   background-color: orange;
   color: #fff;
   line-height: normal;
   float: left;
   padding: 5px;
   border-radius: 50%;
   margin-top: 5px;
   margin-left: 30px;
}
*/

.cart_container {
   position: relative;
   width: 100%;
   min-height: 500px;
   margin-top: 10px;
}

.cart_container > div {
   position: relative;
   float: none;
   
   height: auto;
   padding: 0px;
}

.cart_logo > div {
   width: 120px;
   height: 120px;
   position: relative;
   margin-left: 10px;
   background-image: url("../lib/icn/cart.png");
   background-repeat: no-repeat;
   background-size: contain;
   background-position : bottom center;
}

.cart_content {
   margin-top: 0px;
}

.cart_item_list {
   float: none;
   width: 100%;
}  

.cart_item_list > li {
   position: relative;
   padding: 10px;
   background-color: rgba(255, 255, 255, 0.5);
   border-radius: 5px;
   text-align: left;
   display: flex;
   flex-wrap: wrap;
   gap : 10px;
   justify-content: flex-start;
   margin-bottom:  5px;
}

.cart_item_list > li:first-child, .cart_item_list > li:last-child {
   background-color: transparent;
}

.cart_item_list > li:first-child {
   display: flex;
   flex-wrap: wrap;
   justify-content: left;
}

.cart_item_list > li:first-child > div {
   flex-grow: 4;
}

.cart_item_list > li:first-child > #clear {
   color: darkorange;
   transition: 300ms;
   flex-basis: 50px;
   flex-grow: 0;
}

.cart_item_list > li:first-child > #clear:hover {
   color: #000;
}


.cart_item_list > li:last-child:not(.bill_total) {
   display: flex;
   justify-content: center;
   align-items: center;
   position: fixed;
   bottom: 0px;
   left: 0px;
   right: 0px;
   background-color: rgba(0, 0, 0, 0.9);
   z-index: 9999;
   margin-bottom: 0px;
   border-radius: 0px;
}

.cart_item_img {
   width: 60px;
   height: 60px;
   background-color: #eee;
   border-radius: 5px;
   flex-shrink: 0;
   background-size: cover;
   background-repeat: no-repeat;
}

.cart_item_desc {
   flex-basis: 50%;
  
   flex-grow: 2;
   line-height: normal;
   display: flex;
   gap : 10px;
   flex-wrap: wrap;
}

.cart_item_detail {
   flex-grow: 4;
   max-width: calc( 100% - 120px );
}

.cart_review_label {
   flex-basis: 100%;
   margin-top: 10px;
   font-size: 10px;
   font-weight: bold;
}

.item_name {
   font-size: 16px;
   font-weight: bold;
}

.item_desc {

}

.item_price {
   font-size: 14px;
   font-weight: bold;
   color: orange;
   margin-top: 10px;
}

.item_price::before {
   content: "IDR";
   display: block;
   position: relative;
   float: left;
   font-size: 8px;
   color: #000;
   margin-right: 5px;
}

.item_price.xl {
   margin-top: 5px;
   margin-bottom: 5px;
   font-size: 14px;
}

.item_price.xl::before {
   font-size: 14px !important;
   color: #fff;  
}

.total_price {
   font-size: 14px;
   color: #888;
}

.item_review {
   font-size: 10px;
   padding: 5px;
   margin-top: -5px;
   border-radius: 5px;
   font-style: italic;
   border: 1px dotted #eee;
   flex-basis: 100%;
   display: flex;
}

.review_label {
   font-style: normal;
   font-size: 10px;
   background-color: rgba(0,0,0,0.6);
   color: #fff;
   width: auto;
   height: 30px;
   margin: -5px;
   border-radius: 5px;
   margin-right: 10px;
   white-space: nowrap;
   line-height: 30px;
   padding-left: 10px;
   padding-right: 10px;
   margin: 5px;
   transition: 300ms;
}

.review_content {
   padding: 5px;
   line-height: normal;
}

.review_content > textarea {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   width: 100%;
   color: orange;
   font-style: italic;
   resize: none;
   border: 1px solid red;
   height: 100px;
}

.cart_item_btn {
   background-color:#fbfbfb ;
   width: 100px;
   height: 30px;
   border-radius: 5px;
   flex-shrink: 0;
   display: flex;
   

}

.cart_item_btn > button {
   flex-basis: 30px;
   background-color: rgba(0, 0, 0, 0.6);
   flex-shrink: 0;
   font-size: 16px;
   color: #fff;
   border-radius: 5px;
   transition: 300ms;
}

.cart_item_btn > button:hover, .review_label:hover {
   background-color: rgba(0, 0, 0, 1);
}

.cart_item_btn > input {
   text-align: center;
 
   font-weight: bold;
}

.checkout {
   width: auto;
   height: 30px;
   font-size: 14px;
   background-color: orange;
   color: #fff;
   padding-left: 20px;
   padding-right: 20px;
   text-align: center;
   display: flex;
   align-items: center;
   border-radius: 5px;
   transition: 300ms;
}

.checkout:hover {
   background-color: darkorange;
}

.item_delete {
   position: relative;
   width: 20px;
   height: 20px;
   background-color: rgba(0, 0, 0, 0.2);
   border-radius: 50%;
   text-align: center;
   color: #fff;
   font-weight: bold;
   margin: 0 auto 0 auto;
   transition: 300ms;
   font-size: 10px;
}

.item_delete:hover {
   background-color: darkred;
}



.cart_container.bill {
   font-family: monospace;
}


.cart_bill {
   
   border-bottom: 1px dashed #ccc;
   padding-bottom: 10px;
}

.bill_item .cart_item_detail {
   flex-grow: 4;
   max-width: calc( 100% );
}


.bill_label {
   font-size: 16px;
   font-weight: bold;
}

.bill_info {
   font-size: 12px;
   font-weight: normal;
   width: 100%;
}

.bill_item {
   font-size: 12px !important;
   margin-bottom: 5px !important;
   background-color: transparent !important;
   border-bottom: 1px dashed #ccc;
   padding: 0px !important;
   padding-bottom: 5px !important;
   padding-left: 10px !important;
   padding-right: 10px !important ;
   
  
   line-height: normal !important;
}

.bill_item > div {
   margin: 0;
   line-height: normal;
}

.bill_sub {
   text-align: right !important;
   float: right;
}

.cart_item_list > li.bill_total {
  
   flex-direction: column;
   text-align: right;
   gap : 5px;
  
   
}

.cart_item_list > li.bill_total > div {
  
   display: flex;
   justify-content: flex-end;
   column-gap: 20px;
   text-align: right;
   flex-direction: row;
   flex-wrap: wrap;
}

.cart_item_list > li.bill_total > div > div:last-child {
   min-width: 120px;
   max-width: 30%;
}

.cart_item_list > li.bill_total .total_count {
   font-size: 16px;
   font-weight: bold;
}


.bill_msg {
   text-align: center;
   margin-top: 20px;
   background-color: rgba(255, 255, 255, 0.3);
   padding: 5px;
}







 


#e_footer {
   margin-top: 100px;
   font-size: 9px;
   margin-bottom:100px;
}









#hot-menu {
   width: 100%;
   list-style: none;
   margin: 0;
   padding: 0;
  
   display: flex;
   flex-wrap: wrap;
   gap:  0px;
   justify-content: center;
   margin-top: 0px;
}

#hot-menu > li {  
   flex-basis: calc( 33.3% - 0px );
   min-height: 200px;
   text-align: center;
   position: relative;
}

#hot-menu > li > a {
   position: absolute;
  
   padding: 0px;
  top: 0px;
   left: 0px;
   right: 0px;
   bottom: 0px;
 
   display: block;
   text-decoration: none;
   color: inherit;
   transition: 300ms;
  
   text-align: center;
}

#hot-menu > li > a > div {
  position: absolute;
  top: 0px;
   left: 0px;
   right: 0px;
}

#hot-menu > li > a > div:first-child {
   bottom: 20px;
   top: 0px;
   left: 0px;
   right: 0px;
   transition: 300ms;
}

#hot-menu > li > a:hover > div:first-child {
  transform: scale(1.0);
}

#hot-menu > li > a > div:last-child {
 
   top:  auto;
   bottom: 0px;
   color: rgba(0, 0, 0, 1.0);
  
}












.gridbox {
   float: left;
   width: calc( 100% );
   margin-left: 0px;
   height: auto;
   padding-bottom: 0px;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap : 0px;
  
   opacity: 0;
}

.gridbox li {
   position: relative;
   float: left;

}

.gridbox li, .gridbox li * {
   cursor: pointer;
}

.gridbox li > div {
   position: absolute;
   overflow: hidden;
   transition: 300ms;
   background-color: rgba(255, 255, 255, 0.3);
   border-radius: 5px;
   margin: 2.50px !important;
}

.gridbox li:hover > div {
   background-color: rgba(255, 255, 255, 0.8);
}


.gridbox li > div > a > div {
   position: absolute;
   top: 0px;
   left: 0px;
   right: 0px;
   bottom: 50px;
   transition: 300ms;
   background-position: center center;
}

.gridbox li > div > a > div.rounded {
   background-color: #fff;
   width: 70%;
   height: 70%;
   margin: 15 auto 0 auto;
   background-size: cover;
   border-radius: 50%;
}

.gridbox li > div > a > div > div {
   position: absolute;
   top: 100%;
   width: calc( 100% - 20px );
   height: 50px;
   line-height: 50px;
   text-align: center;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   font-size: 14px;
   padding-left: 10px;
   padding-right: 10px;
}













.catalog, .list, .image, .article { 
   position: relative;
   margin: 0; 
   padding: 0;
   margin-top: 5px;
   margin-bottom: 5px;
}

.image {
   margin-top: -5px;
}

.catalog > li, .list > li, .image > li, .article > li {
   position: relative;
   width: calc( 100% - 0px );
   margin-left: 0px;
   border-radius: 5px;
   transition: 300ms;
}



.image li {   
   padding: 0;
   margin-top: 0px;
   margin-bottom: 0px;
}

.image li > img {
   position: relative;
   float: left;
   width: calc( 100% + 10px );
   height: auto;
   margin-left: -5px;
}




.article > li {
   margin-bottom: 5px;
   height: auto;
   overflow: hidden;
}

.article > li > div {
   padding: 20px;
   margin: 0px;
   background-color: rgba(255, 255, 255, 0.5);
   overflow: hidden;
}

.article > li > div > .article-pic {
   position: relative;
   float: left;
   width: 100%;
   min-height: 20vh;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   border-radius: 5px !important;
   background-color: #eee;
   overflow: visible;
}

.article > li > div > .article-desc{
   width: 100%;
   position: relative;
   float: left;
   margin-top: -60px;
   margin-bottom: -40px !important;
   white-space: pre-wrap;
   text-align: justify;
   padding-bottom: 0px !important;
}

.article .article-title {
   font-size: 24px;
   font-weight: bold;
   line-height: 24px;
   margin-bottom: 10px;
   margin-top: 10px;
   max-width: 60%;
   float: left;
}

.article .article-date {
   font-size: 11px;
   float: left;
   text-align: right;
   position: absolute;
   right: 0px;
   bottom: calc( 100% + 7px );
   font-style: italic;
}




.article > li > div > .article-embed {
   position: relative;
   float: left;
   margin-top: 20px;
   line-height: normal;
   width: 100%;
   min-height: 0px;
}

.article-embed > ul {
   display: flex;
   gap : 10px;
   width: 100%;
   flex-wrap:nowrap;
   flex-direction: row;
   
}

.article-embed > ul > li {
   
}

.article-embed > ul > li > ul {
   display: flex;
   flex-wrap: nowrap;
   flex-direction: column;
   gap : 10px;
}

.article-embed > ul > li > ul > li {
   display: flex;
   gap: 5px;
   position: relative;
   cursor: pointer;
}

.article-embed > ul > li > ul > li > .embed-icn {
   width: 30px;
   height: 30px;
   border-radius: 50%;
   background-size: 18px 18px;
   flex-basis: 30px;
   flex-grow: 0;
   flex-shrink: 0;
   /* align-self: center; */
  
   transition: 300ms ease-in-out;
   transform: rotate(0deg);
}

.article-embed > ul > li > ul > li a, .article-embed > ul > li > ul > li a > * {
   cursor: pointer !important;
   line-height: normal;
   text-decoration: underline;
}


.article-embed > ul > li > ul > li a *:last-child:after {
   display: inline;
   position: relative; /* Prevent underline of arrow */
    /* Add a little space between text and arrow */
    content: ""; /* Unicode hex for » */
   background-image: url("../lib/icn/arrow-r.png");
   background-size: 8px auto;
   padding: 10px;
  
   top: -1px;
   left: 0px;
}


.article-embed > ul > li > ul > li:hover > .embed-icn {
    
}


.embed-icn.gl, .embed-icn.glt {
   background-size: 24px auto !important;
}

.embed-label {
   font-size: 11px;
   font-weight: bold;
   line-height: normal;
}

.embed-desc {
  
   display: flex;
   flex-direction: column;
   justify-content: center;
 
}

.embed-desc > * {
   transition: 300ms;
}

.embed-content {
     
}

.article-embed div.frame-container {
   width: 100%;
   height: 15vh;
   border-radius: 5px;
   overflow: hidden;
  
}

.article-embed iframe.ytv {
   width: 100%;
   height: 100%;
   border-radius: 5px;
   background-color: #fff;
}

.article-embed iframe.glt {
   width: 100%;
   height: 200%;
   border-radius: 5px;
   background-color: #fff;
   margin-top: -60px;
}


.article-embed > ul > li > ul > li:hover .embed-content {
   color:  blue;
}

/*



.article-embed > ul > li > ul {

   display: flex;
   flex-wrap: wrap;
   flex-direction: row;
   gap : 10px;
   flex-wrap: wrap;
}

.article-embed > ul > li > ul > li {
 
   flex-grow: 4;
   flex-shrink: 0;
   display: flex;
   gap : 5px;
   align-items: center;
   flex-wrap: wrap;
}

.article-embed > ul > li iframe {
   width: 100%;
   height: auto;
   min-height: 20vh;
   border-radius: 5px;

}

.embed-icn {
   width: 30px;
   height: 30px;
   border-radius: 50%;
   background-size: 18px 18px;
}

.embed-icn.gl, .embed-icn.glt {
   background-size: 24px auto;
}

.embed-desc {
   flex-shrink: 4;
   flex-grow: 4;
   flex-basis: calc(50% - 20px);
}

.embed-label {
   font-size: 11px;
   font-weight: bold;
   line-height: normal;
}

*/


.catalog {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   gap : 5px;
   justify-content: center;
}

.catalog > li {
   display: block;
   height: auto;
   background-color: rgba(255, 255, 255, 0.5);
   padding: 0px;
   margin: 0px;
   border-radius: 5px;
   overflow: hidden;

}

.catalog > li:hover {
   background-color: rgba(255, 255, 255, 0.9);
}

.catalog > li.grid:not(.list_regular) {
   flex-basis: calc(50% - 10px);
   padding-bottom: 40px;
   flex-grow: 0;
   flex-shrink: 0;
}

.catalog > li.list_regular {
   flex-grow: 0;
   flex-shrink: 4;
   flex-basis: calc( 100% - 10px );
}

.catalog > li.grid .catalog-thumbnail {
   width: calc( 100% + 0px );
   height: 200px;
   position: relative;
   
   background-color: #eee;
   border-radius: 5px;
   border-bottom-left-radius: 50%;
   border-bottom-right-radius: 50%;
   background-size: cover;
   z-index: 2;
   box-shadow: 0px 15px 10px rgba( 0,0,0, 0.2 );
}

.catalog-description {
   margin: 20px;
}


.category-label {
   background-color: transparent !important;
   border-bottom: 1px dashed #ccc;
   border: none !important;
   padding: 20px !important;
   padding-bottom: 0px !important;
}

.category-label-name {
   font-size: 14px;
   font-weight: bold;
}

.category-label-desc {
   font-size: 10px;

}

.catalog-label {
   font-size: 25px;
   font-weight: bold;
   line-height: 26px;
}

.catalog-detail {
   margin-top: 5px;
   margin-bottom: 5px !important;
}

.catalog-price {
   font-size: 20px;
   font-weight: bold;
   color: orange;
}

.catalog-price::before {
   content: "IDR ";
   position: relative;
   color: #222;
   font-size: 10px;
}

.catalog-button {
   position: absolute;
   font-size: 0px;
   background-color: ;
   top: 0px;
   left: 0px;
   bottom: 0px;
   right: 0px;
   z-index: 2;
   opacity: 1;
}

.catalog-btn {
   position: absolute;
   top: auto;
   bottom: 10px;
   width: 60px;
   height: 30px;
   background-color: orange;
   border-radius: 5px;
   margin-top: 10px;
   margin-bottom: 10px;
   text-align: center;
   font-size: 22px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   z-index: 15;
   transition: 300ms;
}

.catalog-btn:hover {
   background-color: black;
}

.list_regular .catalog-btn {
   position: relative;
   bottom: 0px;
}

.catalog > li.list_regular .catalog-thumbnail {
   width: 80px;
   height: 80px;
   background-color: #eee;
   border-radius: 50%;
   margin: 10px;
   background-size: cover;
   float: left;
   margin-right: 0px;
}

.catalog > li.list_regular .catalog-label, .catalog > li.list_regular .catalog-price {
   font-size: 18px;
}

.catalog > li.list_regular .catalog-detail {
   margin-top: 0px;
   margin-bottom: 20px;
}




.catalog li.list_regular .catalog-description {
   margin: 0px;
   left: 0px;
   width: calc( 100% - 120px );
   float: left;
   margin: 10px;
}

.catalog li.list_regular .catalog-btn {
   margin-bottom: 0px;
}





/* used for article  */
.catalog > li.list_full .catalog-thumbnail {
   width: 100%;
   height: 280px;
   background-color: #eee;
   margin-top: 0px;
   background-size: cover;
   
}





.list > li {
   background-color: rgba(255, 255, 255, 0.5);
   margin-bottom: 5px;
}

.list > li > div {
   display: flex;
   align-items: center;
   justify-content: left;
}



.list li > div .list-thumbnail {
   width: 80px;
   height: 40px;
   background-color: #fff;
   float: left;
   background-size: auto 100%;
   margin: 10;
   border-radius: 5px;
}

.list li > div .list-description {
   margin: 10px;
   float: left;
}


.list > li .list-description {
   display: flex;
   flex-direction: column;
}

.list > li .list-label {
   font-size: 16px;
   font-weight: bold;

}

.list > li .list-value {
   
   position: absolute;
   right: 0px;
   top: 0px;
   bottom: 0px;
   left: auto;
   font-size: 20px;
   
   font-weight: bold;
   display: flex;
   align-items: center;
   right: 20px;
   
}






.form {
   position: relative;
   margin: 0px;
   padding: 0px;
   background-color: rgba(255, 255, 255, 0.5);
   border-radius: 0px;
   padding-top: 10px;
   padding-bottom: 10px;
  
}

.form > div {
   margin: 20px;
   position: relative;
   margin-top: 40px;
}

.form .form-title {
   font-size: 20px;
   font-weight: bold;
   padding-left: 10px;
   padding-right: 10px;
   color: #000;
   text-align: center;
}

.form .input-label {
   position: relative;
   font-size: 12px;
   padding-left: 20px;
   padding-right: 20px;
  
   margin-bottom: 10px;
}

.form .input-label b {
    color : #222;
}

.form .input-container {
   min-height: 40px;
   background-color: #fafafa;
   border: 1px dashed #ccc;
   border-radius: 0px;
   max-width: 50%;
   position: relative;
   border-radius: 5px;
}

.form input {
   height: 40px;
   line-height: 40px;
   padding-left: 20px;
   padding-right: 20px;
}

.form .input-longtext .input-container {
   height: 120px;
   max-width: 100%;
}


.form textarea {
   position: absolute;
   top: 10px;
   left: 0px;
   right: -20px;
   bottom: 10px;
   padding-left: 20px;
   padding-right: 20px;
   border-radius: inherit;
   overflow: hidden;
   resize: none;
}

.form .input-option .input-container {
   max-width: 100%;
   height: auto;
   overflow: hidden;

}


.form .input-option input {
   
}


.form .input-option ul {
  
  margin: 0;
  padding: 10;
  width: 100%;
 
  float: left;
}









.form .input-option ul li {
   
   margin: 5px;
   position: relative;
   float: none;
   display: block;
   height: 20px;
   padding: 5px;
 
   width: auto;
   float: left;
   /* min-width: calc( 50% - 80px ); */
   margin-top: 10;
   margin-right: 40px;
   
}

.form .input-option.row-1 ul li {
   min-width: calc( 100% - 40px );
}

.form .input-option.row-2 ul li {
   min-width: calc( 50% - 55px );
}

.form .input-option.row-3 ul li {
   min-width: calc( 33.333333% - 55px );
}

.form .input-option.row-4 ul li {
   min-width: calc( 25% - 55px );
}








.form .input-option ul li > input {
   
   position: absolute;
   left: 0px;
   height: 30px;
   width: 100%;
   top: 0px;
   opacity: 0;

}


.form .input-option ul li > label {
  
   position: relative;
   left: 30px;
   right: 0px;
   font-size: 11px;
   font-weight: bold;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   

}


.form .input-option ul li > input:checked ~ label {
   
}

.form .input-option ul.checkbox li > label::before, .form .input-option ul li > label::after,
.form .input-option ul.radio li > label::before, .form .input-option ul li > label::after {
   content: "";
   position: absolute;
   top: -5px;
   left: -30px;
   width: 20px;
   height: 20px;
   background-color: #ddd;
   border-radius: 20px;
   transition: 200ms ease-in-out;
}

.form .input-option ul.checkbox li > label::before {
   border-radius: 0px;
}

.form .input-option ul.checkbox li > label::after {
     background-image: url("../lib/icn/check.png");
   transform: scale(0);
   background-size: 20px 20px;
   border-radius: 0px;
   background-color: green;
} 

.form .input-option ul.radio li > label::after {
 
   transform: scale(0.7);
   background-color: #ddd;
  
}

.form .input-option ul.checkbox li > input:checked ~ label::after {
   transform: scale(0.8);

}

.form .input-option ul.radio li > input:checked ~ label::after {
   transform: scale(0.7);
}


.form .input-option ul.radio li > input ~ label::before {
   background-color: #ccc;
}

.form .input-option ul.radio li > input:checked ~ label::after {
   background-color: green;
}



.form .input-submit {
   max-width: 100px;
   min-width: 50px;

   padding-left: 20px;
   padding-right: 20px;
   height: 40px;
   border-radius: 0px;
   border: 0px solid #aaa;
   outline: none;
   background-color: #333;
   color: #fff;
   display: block;
   margin: 20 auto 80 auto;
   line-height: 40px;
   text-align: center;
   white-space: nowrap;
   float: none;
   position: relative;
   overflow: hidden;
   text-overflow: ellipsis;
   border-radius: 5px;
}

.form .input-submit > input {
   position: absolute;
   top: 0px;
   left: 0px;
   right: 0px;
   bottom: 0px;
   background-color: green;
   color: #fff;
   text-align: center;
   opacity: 0;
}

.form .input-group-name {
   font-size: 14px;
   font-weight: bold;
   color: #333;
}

.form .input-group-caption {
   font-size: 14px;
   margin-bottom: -10px;
   border-bottom: 1px dashed #ccc;
   padding-bottom: 10px;
}

.form .input-group-caption b {
    color : #333;
}

.form .input-group-name, 
.form .input-group-caption {
 
   padding-left: 20px;
   padding-right: 20px;
}


.form .form-header, .form .form-footer {
   text-align: center;
   font-size: 20px;
   font-weight: bold;
   background-color: transparent !important;
}

.form .form-header {
   margin: 0px;
   border-bottom: 1px dashed #ccc;
   padding-bottom: 20px;
   padding-top: 20px;
  
   margin-top: -10px;
}

.form .form-header-logo {
   max-width: 100%;
   height: 180px;
   float: none;
   margin: 0 auto 0 auto;
   background-size: auto 75%;
   background-position: center center;
}

.form .form-footer {
   margin-top: 40px;
   padding-top: 30px;
   padding-bottom: 30px;
   border-top: 1px dashed #ccc;
   background-color: inherit;
   margin: 0px;
   margin-bottom: -10px;
   float: none;
   position: relative;
   width: 100%;
}


.form-notice {
  margin: 20px;
  background-color: #fff;
}

.form-notice > div {
  
   margin: 0px;
   padding: 20px;

}

.form-notice > .message {
   font-size: 16px;
   font-weight: bold;
   color: #000;
   text-align: center;
}


.groupinf { 
   padding-top: 40px;
}

























#anchors {
   position: fixed;
   bottom: 0px;
   height: auto;
   background-color: ;
   color: #fff;
   left: 0px;
   right: 0px;
   margin: 0 auto 0 auto;
   z-index: 999;
   transform: translateY(0px);
   border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

#anchors > div.toggler {
   width: 60px;
   height: 60px;
   
   border-radius: 0%;
   position: absolute;
   top: -50px;
   
   left: calc( 50% - 30px );
   
  
  
   background-size: 12px 12px;
   background-position: top 16 center;
   z-index: -1;
   transition: 300ms ease-in;
   overflow: hidden;
}

#anchors > div.toggler::before {
   position: absolute;
   display: block;
   content: "";
   top: 0px;
   left: 0px;
   right: 0px;
   bottom: 0px;
   background-color: red;
   border-radius: 50%;
   transform : translateY(50%);
    background-image: url("../lib/icn/nav-d.png");
    background-size: 12px 12px;
    background-position: top 11 center;
    background-color: rgba(0, 0, 0, 0.8);
}

#anchors > div.toggler.close::before {
   background-image: url("../lib/icn/close-d.png");
}

#anchors > div.toggler.close {
  
}

#anchors > ul {
   margin: 10 auto 0 auto;
   height: auto;
   max-width: 610px;
   background-color: inherit;
   background-color: rgba(0, 0, 0, 0.8);
   padding-top: 10;
   padding-bottom: 10;
   border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

#anchors > ul > li {
   text-align: center;
   height: 40px;
   line-height: 40px;
   border-top: 1px solid #444;
   transition: 300ms;
}

#anchors > ul > li:first-child {
   border: none;
}

#anchors > ul > li:hover {
  color: orange;
}




/*
body::before, body::after {
   content: "";
   position: fixed;
   width: 1px;
   z-index: 1000;
   top: 0px;
   bottom: 0px;
   left: 0px;
   background-color: green;
   display: block;
}


body::before {
   left: 280px;
}


body::after {
   left: auto;
   right: 280px;
}
*/


.lightbox {
   position: fixed;
   top: 0px;
   left: 0px;
   right: 0px;
   bottom: 0px;
   height: 100vh;
   z-index: 99999999;
   display: none;
}

.lightbox::before {
   content: "";
   position: fixed;
   width: 100%;
   height: 100%;
   background-color: rgba(0,0,0,0.2);
}

.lightbox-container {
  
  
   max-width: 610px;
   height: 70%;
  
   bottom: 0px;
   position: relative;
   margin: 0 auto 0 auto;
   padding: 10px;
    box-shadow: 0px 10px 10px rgba(0,0,0,0.3);
   background-color: #fff;
   border-radius: 5px;

}

.lightbox-container > div {
   position: relative;
}

.lightbox-media {
  margin: 0px;
   height: 60%;
   overflow: hidden;
   background-size: cover;
   border-radius: 5px;
}

/*
.lightbox-media::before {
   display: block;
   content: "";
   position: absolute;
   top: 0px;
   left: 0px;
   right: 0px;
   bottom: 0px;
   background-color: #222;
   background-image: inherit;
   background-size: cover;
   filter: blur(5px);
   z-index: -1;
   overflow: hidden;
}
*/

.lightbox-body {
   margin: 0px;
   height: calc( 40% );
   background-color: #fff;
   overflow: hidden;

}

.lightbox-text-id {
   position: absolute;
   bottom: 0px;
   left: 0px;
   right: 0px;
   padding: 10px;
   font-size: 26px;
   line-height: 26px;
   font-weight: bold;
   letter-spacing: -0.2px;
   text-align: left;
   color: #fff;
  
   text-align: center;
   line-height: normal;
   z-index: 2;
   border-radius:5px;
}

.lightbox-text-id::before {
   content: "";
   position: absolute;
   top: 0px;
   left: 0px;
   right: 0px;
   bottom: 0px;
   background-color: rgba(0,0,0,0.2);
   z-index: -1;
   border-radius: 5px;
}

.lightbox-body > ul {
   width: 100%;
   height: calc( 100% - 70px );
}

.lightbox-body > ul > li {
   width: 100px;
   padding-top: 10px;
   padding-bottom: 10px;
   color: #333;
   padding-left: 20px;
   padding-right: 20px;
   text-align: right;
   float: none;
   border-bottom: 1px solid #eee;
}

.lightbox-body > ul > li:last-child {
   border: none;
}

.lightbox-body > ul > li > input {
   position: absolute;
   display: inline-block;
   z-index: 2;
   left: 0px;
   width: 140px;
   height: 50px;
   opacity: 0;
}

.lightbox-body > ul > li > input ~ label {
   position: absolute;
   top: 0px;
   right: 0px;
   left: 140px;
   bottom: 0px;
   line-height: 1.5em;
   opacity: 0;
   transition: 400ms ease-out;
   z-index: 1;
   transform: translateX(50%);
  
   padding: 10px;
   padding-right: 20px;
   text-align: left;
   padding-left: 20px;
    overflow-y: auto;
   height: calc( 100% - 0px );
   background-color: #fff;
  
}

.lightbox-body > ul > li > input:checked ~ label {
   opacity: 1;
   z-index: 2;
   transform: translateX(0%);
}

.lightbox-body > ul > li > input ~ label > div {
   margin: 0px;
   margin-bottom: 40px;
}

.lightbox-body > ul > li > input + div {
   transition: 300ms;
   font-weight: bold;
}

.lightbox-body > ul > li > input:checked + div {

   color: orange;
   /*
   transform: scale(1.2);
   transform-origin: 100%;
   */
}

.lightbox-body > .close {
   position: absolute;
   width: 40px;
   height: 40px;
   background-color: rgba(0, 0, 0, 0.5);
   border-radius: 50%;
   font-size: 0px;
   background-image: url("../lib/icn/close-d.png");
   background-size: 12px 12px;
   left: calc( 50% - 20px );
   bottom: 0px;
   z-index: 10;
   transition : 300ms;
}

.lightbox-body > .close:hover {
   background-color: #222;
}







.blink {
  -webkit-animation: blinkingBackground 300ms infinite;  /* Safari 4+ */
  -moz-animation: blinkingBackground 300ms infinite;  /* Fx 5+ */
  -o-animation: blinkingBackground 300ms infinite;  /* Opera 12+ */
  animation: blinkingBackground 500ms infinite;  /* IE 10+, Fx 29+ */
}

@keyframes blinkingBackground{
      0%       { background-color: orange; }
    
      50%      { background-color: #fff; }
     
      100%     { background-color: orange;}
   }

.article-pic {
   min-height: 0px !important;
   margin-bottom: 10px;
   overflow: hidden;
   z-index: 2;
}

.ss-slider {
  border-radius: 5px;
  height: calc( 50vh - 15% );
  overflow: hidden;
}

.ss-slider > .ss-slides {
  height: 100%;
  overflow: hidden;
  user-select: none;
  width: 100%;
}

.ss-slider > .ss-slides > .ss-slide {
  float: left;
  height: 100%;
  overflow: hidden;
  position: relative;
  background-size: cover;
  cursor: grab;
}


.slide-btn {
   position: absolute;
   width: 25px;
   height: 50px;
  
   overflow: hidden;
   top: calc( 50% - 25px );
   bottom: auto;
   
   background-size: 20px 20px;
   background-position: 24px center;
}

.slide-btn::before {
   display: block;
   position: absolute;
   content: "";
   width: 200%;
   height: 100%;
   border-radius: 50%;
   background-color: rgba(0, 0, 0, 0.2);
   right: 0px;
   left: auto;
   background-image: url("../lib/icn/back-d.png");
    background-size: 20px 20px;
   background-position: 24px center;
}

.slide-btn.next {
   right: 0px;
   left: auto;
   transform: rotate(180deg);
}


















.qridview {
    
   
   margin-top: 5px;
   background-color: rgba(255, 255, 255, 0.5);
  
   border-radius: 5px;
   padding-top: 20px;
   padding-bottom: 20px;
   
   
}

.qridview > div {
   margin: 10px;
   position: relative;
   padding: 0px;
  
}

.qridview > div.pic {
   width: 200px;
   height: 200px;
   border-radius: 50%;
   background-color: #fff;
   margin: 10 auto 10 auto;
  
   background-size: cover;
   border: 1px solid #eee;
}

.qridview > div.desc {
   padding: 0px;
}

.qridview > div.space {
   border-bottom: 1px dashed #ccc;
   margin: 10px;
}

.qridview > div.desc > div {
   text-align: center;
}


.desc > div {
   margin-bottom: 15px;
}

.desc > div > div:first-child {
   font-size: 10px;
   line-height: normal;
}

.desc > div:not(.name) > div:last-child {
   font-weight: bold;
   line-height: normal;
   font-size: 20px;
}

.desc > div.name > div:first-child {
   font-size: 20px;
   font-weight: bold;
    text-transform: capitalize;
}

.desc > div.name > div:last-child {
   font-size: normal !important;
   font-weight: normal !important;
}

.quote {
   text-align: center;
   background-color: rgba(255, 255, 255, 0.5);
   border-radius: inherit;
   padding: 20px !important;
   display: none;
  
}

.quote > span:before, .quote > span:after {
   position: relative;
   display: inline;
   content: ' " ';
   font-weight: bold;
}

.quote > span:after {
  
}

.info {
   display: flex;
   flex-wrap: nowrap;
   gap : 20px;
}

.info > div {
   flex-basis: 50%;
   flex-grow: 4;
   flex-shrink:4;
   
}

.info > div:first-child {
   text-align: right;
}


.embed {
  
}

.embed ul {
   width: 100%;
   height: auto;
  
   display: flex;
   justify-content: center;
   gap: 5px;
}

.embed ul > li {
   width: 30px;
   height: 30px;
   background-color: rgba(255, 255, 255, 0.5);
   border-radius: 50%;
   background-size: 60% auto;
}

.embed ul > li > a {
   display: block;
   position: absolute;
   width: 100%;
   height: 100%;
   cursor: pointer;
}











@media (min-width: 1281px) {}

@media (min-width: 1025px) and (max-width: 1280px) {}

@media (min-width: 768px) and (max-width: 1024px) {}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {}





@media (min-width: 481px) and (max-width: 900px) {
   


}



@media (min-width: 481px) and (max-width: 600px) {
    #hot-menu li {
     flex-basis: 50%;
      height: 240px;
   } 
  
  .cart_item_detail {
      flex-grow: 4;
      max-width: calc( 100%  );
   }
   

}






@media (min-width: 320px) and (max-width: 480px) {
   
   .cart_item_detail {
      flex-grow: 4;
      max-width: calc( 100%  );
   }
   

   .e_wrapper.col-1 > .e_column, .e_wrapper.col-2 > .e_column, .e_wrapper.col-3 > .e_column {
      width : 100%;
   }

   

  
   .e_label {
      position: relative;
      font-size : 35px;
      line-height: 34px;
      letter-spacing:-2px;
   }

   #hot-menu {
      
   }
   #hot-menu li {
      flex-basis: 50%;
      min-height: 160px;
   }

    

   .catalog li.list_regular > div .catalog-thumbnail {
      width: 60px;
      height: 60px;
      float: left;
      margin: 10px;
   }

   .catalog li.list_regular > div .catalog-label {
      font-size: 16px;
   }

   .catalog li.list_regular > div .catalog-price {
      font-size: 14px;
   }


   .catalog li.grid .catalog-detail {
      display: none;
   }



   .catalog li.list_regular .catalog-description {
      margin: 0px;
      left: 80px;
      width: calc( 100% - 100px );
      float: right;
      margin: 10px;
   }

   .catalog-label {
      font-size: 18px;
      line-height: 19px;
      margin-bottom: 10px;
   }

   .catalog-price {
      font-size: 14px;
   }

   .catalog li.grid > div .catalog-thumbnail {
     
      height: 140px;
     
      z-index: 2;
   }



   .form .input-container {
     
      max-width: 100%;
     
   }

   .lightbox-container {
      height: calc( 70vh - 0px );
   }


  .lightbox-text-id {
        font-size: 20px;
        line-height: 21px;
    }


   .article-embed > ul {
      gap : 10px;
      flex-wrap:wrap;
      flex-direction: row;
   }

   .article-embed > ul > li {
      flex-basis: 100%;
   }
    
        
    .article-embed div.frame-container {
       width: 100%;
       height: 30vh;
    }
    
    .qridview {
       
        flex-basis:100%;
        overflow:hidden;
    }
    
}
   

@media (min-width: 200px) and (max-width: 300px) {
   .e_label {
      position: relative;
      font-size : 25px;
      line-height: 25px;
   }



   .article-embed > ul {
      gap : 10px;
      flex-wrap:wrap;
      flex-direction: row;
   }

   .article-embed > ul > li {
      flex-basis: 100%;
   }


}