.navbarSpace{height: 55px;}

#navbar{position: fixed; top: 0px; left: 0px; width: 100%; background: rgba(255, 255, 255, 0.85); z-index: 50; backdrop-filter: blur(10px);}
#navbar.nbShadow{box-shadow: 0px 0px 15px #e6e6e6;}
#navbar > div:first-child{padding: 0px 25px;}
#navbar .navMain{height: 55px; display: grid; grid-template-columns: 120px min-content 1fr min-content; grid-gap: 15px;}
#navbar.apps .navMain{grid-template-columns: 1fr min-content;}
#navbar.apps .navMain > div:first-child, #navbar.apps .navMain .nmOption > div:first-child, #navbar.apps .navMain > div:nth-child(2), #navbar.apps .navMain .nmSearch{display: none;}

#navbar .navMain > div{width: 100%;}
#navbar .navMain .nmLogo{width: 105px; height: 55px;}
#navbar .navMain .nmLogo div{padding-bottom: 40%; margin-top: 7px; background-size: 100%; background-repeat: no-repeat; background-image: url('../../../images/logo_word.png');}
#navbar .navMain .nmMenu{display: flex;}
#navbar .navMain .nmMenu > a{color: var(--text_black);}
#navbar .navMain .nmMenu div.nmOpt{padding: 16px 10px; font-size: 15px; font-weight: bold; position: relative;}
#navbar .navMain .nmMenu div.nmOpt.active{color: var(--text_blue);}
#navbar .navMain .nmMenu div.nmOpt .noBg{position: absolute; top: -31px; left: 0px; width: 100%; opacity: 0; transition: var(--transition);}
#navbar .navMain .nmMenu div.nmOpt .noBg > div{width: 30px; height: 30px; background: var(--bg_blue); border-radius:50%;}
#navbar .navMain .nmMenu div.nmOpt:hover .noBg{opacity: 1; top: -19px;}
#navbar .navMain .nmMenu div.nmOpt > div:nth-child(2){white-space: nowrap; position: relative;}
#navbar .navMain .nmMenu div.nmOpt > div:nth-child(2) > div{width: 10px; height: 10px; position: absolute; right: 0px; bottom: 7px; transition: var(--transition);}
#navbar .navMain .nmMenu div.nmOpt .noDd{padding-right: 18px;}
#navbar .navMain .nmMenu .nmmDdbtn{display: table;}
#navbar .navMain .nmMenu .nmmDdbtn > div{display: table-cell; vertical-align: middle;}
#navbar .navMain .nmMenu .nmmDdbtn > div:nth-child(2){padding-left: 5px;}
#navbar .navMain .nmMenu .nmmDdbtn > div:nth-child(2) > div{width: 10px; height: 10px; transition: all 0.5s ease;}
#navbar .navMain .nmSearch{height: 33px; background: var(--bg_silvercalm); box-shadow: 0px 0px 0px 1px var(--bg_silver); border-radius: 50px; position: relative; margin-top: 10px;}
#navbar .navMain .nmSearch > form > input{width: 100%; border: none; padding: 9px 25px 10px 45px;}
#navbar .navMain .nmSearch > form > div{position: absolute; left: 5px; top: 0px; height: 100%; width: 37px; transition: all 0.2s ease;}
#navbar .navMain .nmSearch > form > div > div{width: 17px; height: 17px; margin-top: 7px;}
#navbar .navMain .nmSearchMini{display: none; cursor: pointer; float: right; margin-top: 10px; margin-right: 3px; width: 35px; height: 35px; border-radius: 50%; background: var(--bg_silvercalm); box-shadow: 0px 0px 0px 1px var(--bg_silver); transition: var(--transition);}
#navbar .navMain .nmSearchMini:hover{box-shadow: 0px 0px 0px 2px var(--bg_silver);}
#navbar .navMain .nmSearchMini > div{width: 17px; height: 17px; position: relative; top: 8px;}

#navbar .navMain .nmOption{display: flex;}
#navbar .navMain .nmOption > div button{padding: 8px 15px 9px 15px; border-radius: 50px;}
#navbar .navMain .nmOption .nmoToKwikku{margin-top: 10px; margin-right: 5px; width: 118px;}
#navbar .navMain .nmOption .nmoBox{width: 50px; height: 40px; position: relative;}
#navbar .navMain .nmOption .nmoBox .navicon > div:first-child{width: 23px; height: 23px; margin-top: 15px; position: relative;}
#navbar .navMain .nmOption .nmoBox .navicon > div:first-child > div{padding: 2px 4px; min-width: 5px; text-align: center; background: #ff3636; color: var(--text_white); border-radius: 3px; top: -7px; right: -9px; position: absolute; font-size: 9px;}
#navbar .navMain .nmOption .nmoBox .navicon > div:nth-child(2){position: absolute; top: 115%; width: 340px; background: var(--bg_white); border: 2px solid #efeff1; border-top: 0px; right: -85px; display: none; z-index: 5;}
#navbar .navMain .nmOption .nmoBox .navicon > div:nth-child(2) > div:first-child{display: grid; grid-template-columns: 1fr 1fr 1fr;}
#navbar .navMain .nmOption .nmoBox .navicon > div:nth-child(2) > div:first-child > div{width: 100%;}
#navbar .navMain .nmOption .nmoBox .navicon > div:nth-child(2) > div:first-child > div:not(:first-child){background: #efeff1;}

#navbar .nn_options{padding: 13px 0px 15px 0px; text-align: center;}
#navbar .nn_options > span{color: red; font-family: 'bold';}
#navbar .nn_text{text-align: center; padding: 11px 0px 12px 0px;}
#navbar .navMain .nmOption > div.nmoBox div.navicon > div:nth-child(2) > div:nth-child(2){width: 100%; min-height: 170px; max-height: calc(100vh - 165px); overflow: auto;}
#navbar .navMain .nmOption > div.nmoBox div.navicon > div:nth-child(2) > div:nth-child(2) > div:first-child{padding: 10px 15px; text-align: right;}
#navbar .navMain .nmOption > div.nmoBox div.navicon > div:nth-child(2) > div:nth-child(2) > div:first-child > span{color: var(--text_blue); cursor: pointer;}
#navbar .navMain .nmOption > div.nmoBox div.navicon > div:nth-child(2) > div:last-child{height: 40px; border-top: 1px solid #f6f6f6;}
#navbar .navMain .nmOption > div.nmoBox div.navphoto{width: 25px; height: 25px; margin-top: 14px; position: relative; background-color: var(--bg_silver); border-radius: 50%;}
#navbar .navMain .nmOption > div.nmoBox div.navphoto > div{width: 10px; height: 10px; display: none; border-radius: 50%; top: -3px; right: -3px; background: var(--bg_red); position: absolute;}
#navbar .navMain .nmOption > div.nmoLogin{margin-top: 10px; margin-left: 10px; width: 120px;}

#navbarCategory{display: none;}
#navbarCategory > div{display: none; position: fixed; top: 0px; left: 0px; width: 100%; z-index: 49;}
#navbarCategory > div:first-child{background: rgba(0, 0, 0, 0.3); height: 100%; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);}
#navbarCategory > div:nth-child(2){height: 0px;}
#navbarCategory .ncBox{width: 700px; max-height: calc(100vh - 120px); margin-top: 70px; background: var(--bg_white); border-radius: 10px; overflow: auto;}
#navbarCategory .ncBox .nbMain{display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 15px; padding: 20px; box-sizing: border-box;}
#navbarCategory .ncBox .nbMain > a{width: 100%; border: 1px solid var(--bg_line); border-radius: 10px; overflow: hidden;}
#navbarCategory .ncBox .nbMain > a > div{transition: var(--transition);}
#navbarCategory .ncBox .nbMain > a > div > div:first-child{padding-bottom: 100%; background: var(--bg_silvercalm); position: relative;}
#navbarCategory .ncBox .nbMain > a > div > div:first-child > div{position: absolute; width: 90px; height: 90px; bottom: 15px; left: 15px;}
#navbarCategory .ncBox .nbMain > a > div > div:nth-child(2){padding: 10px 0px; text-align: center; font-weight: bold; color: var(--text_black);}
#navbarCategory .ncBox .nbMain > a:hover{border: 1px solid var(--bg_blue);}
#navbarCategory .ncBox .nbMain > a:hover > div{background: var(--bg_blue);}
#navbarCategory .ncBox .nbMain > a:hover > div > div:nth-child(2){color: var(--text_white);}
#navbarCategory .ncBox .nbGenre{padding: 0px 20px 20px 20px;}
#navbarCategory .ncBox .nbGenre > div:first-child{font-size: 17px; font-family: 'serif'; font-weight: bold;}
#navbarCategory .ncBox .nbGenre > div:nth-child(2){margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-gap: 15px;}
#navbarCategory .ncBox .nbGenre > div:nth-child(2) > a{width: 100%; border: 1px solid var(--bg_line); border-radius: 5px;}
#navbarCategory .ncBox .nbGenre .ngBox{display: grid; grid-template-columns: 15px 1fr; transition: var(--transition); grid-gap: 10px; align-items: center; padding: 5px 10px; box-sizing: border-box;}
#navbarCategory .ncBox .nbGenre .ngBox:hover{background: var(--bg_silvercalm);}
#navbarCategory .ncBox .nbGenre .ngBox > div{width: 100%;}
#navbarCategory .ncBox .nbGenre .ngBox > div:first-child > div{width: 15px; height: 15px;}
#navbarCategory .ncBox .nbGenre .ngBox > div:nth-child(2){display: grid; color: var(--text_black);}

#navbarMobile{position: fixed; bottom: 0px; left: 0px; z-index: 50; width: 100%; background: var(--bg_white); box-shadow: 0px 0px 15px #e6e6e6; display: none;}
#navbarMobile.apps{display: block;}
#navbarMobile > div{display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; align-items: center;}
#navbarMobile > div > a{width: 100%;}
#navbarMobile .nmBox{padding: 13px 0px 10px 0px; color: var(--text_black); position: relative;}
#navbarMobile .nmBox:before{content: ''; opacity: 0; position: absolute; top: 0px; left: 25px; width: calc(100% - 50px); background: var(--bg_blue); height: 3px; border-radius: 50px;}
#navbarMobile .nmBox.active:before{opacity: 1;}
#navbarMobile .nmBox > div:first-child > div{width: 20px; height: 20px;}
#navbarMobile .nmBox > div:nth-child(2){margin-top: 3px; text-align: center;}

.contentSpace{height: 20px;}
.footerSpace{height: 25px;}

#footer{margin-top: 35px; background: var(--bg_black);}
#footer > div{padding: 35px 20px 75px 20px; max-width: 900px; box-sizing: border-box; color: var(--text_white);}
#footer .fMenu{display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 15px;}
#footer .fMenu > div{width: 100%;}
#footer .fMenu > div > div:first-child{font-weight: bold;}
#footer .fMenu > div > div:nth-child(2){margin-top: 10px;}
#footer .fMenu > div > div:nth-child(2) > div:not(:last-child){margin-bottom: 5px;}
#footer .fMenu a{color: var(--text_silver);}
#footer .fInfo{margin-top: 35px; position: relative;}
#footer .fInfo .fiContent{font-size: 11px; height: 60px;}
#footer .fInfo .fiSocmed{position: absolute; right: 0px; top: 0px;}
#footer .fInfo .fiSocmed > a:not(:last-child){margin-right: 10px;}
#footer .fInfo .fiSocmed > a > div{display: inline-block; width: 35px; height: 35px; box-shadow: 0px 0px 0px 1px #5e5e5e; border-radius: 50%;}

section{max-width: 1100px;}
.content{min-height: calc(100vh - 190px);}
.layoutMedium{max-width: 600px;}

.empty{padding: 20px 15px; text-align: center; margin-top: 100px; margin-bottom: 300px; font-size: 17px; color: var(--text_silver);}

.headTitle{padding: 15px 20px 25px 20px; font-size: 25px; font-weight: bold; font-family: 'serif';}
.headTitle.htCenter{text-align: center;}
.headTitle.apps{text-align: center; padding: 0px; left: 15px; top: 18px; position: fixed; z-index: 65; font-size: 17px;}
.contentTitle{padding: 10px 15px; font-size: 17px; font-weight: bold; color: var(--text_bluedark);}
.contentTitle.apps{text-align: center; padding: 0px; left: 15px; top: 18px; position: fixed; z-index: 65; font-weight: bold; font-family: 'serif';}

.headNav{padding: 15px 20px 25px 20px; white-space: nowrap;}
.headNav > div{display: inline-block;}
.headNav .hnTitle{font-size: 25px; font-weight: bold; font-family: 'serif';}
.headNav .hnMenu{white-space: nowrap; margin-left: 25px; border-radius: 5px; font-size: 0px; border: 1px solid var(--bg_line); position: relative; top: -3px;}
.headNav .hnMenu > a{display: inline-block;}
.headNav .hnMenu > a > div{padding: 5px 20px; color: var(--text_black); font-size: 13px;}
.headNav .hnMenu > a:not(:last-child) > div{border-right: 1px solid var(--bg_line);}
.headNav .hnMenu > a:first-child > div{border-radius: 5px 0px 0px 5px;}
.headNav .hnMenu > a:last-child > div{border-radius: 0px 5px 5px 0px;}
.headNav .hnMenu > a > div.active{background: var(--bg_blue); color: var(--text_white);}
.headNav.apps .hnTitle{text-align: center; padding: 0px; left: 15px; top: 18px; position: fixed; z-index: 65; font-size: 17px;}
.headNav.apps .hnMenu{margin-left: 0px;}

.originalMark{max-width: 1100px; padding: 15px 20px; box-sizing: border-box; color: var(--text_silver);}
.originalMark > div{display: grid; grid-template-columns: 15px 1fr; grid-gap: 15px; align-items: center;}
.originalMark > div > div{width: 100%;}
.originalMark > div > div:first-child > div{width: 20px; height: 20px;}

.breadcrumb{padding: 10px 25px; list-style: none;}
.breadcrumb li{display: inline;}
.breadcrumb li+li:before{padding: 8px; color: var(--text_black); content: "/\00a0";}
.breadcrumb li a{color: var(--text_silver); font-weight: bold;}
.breadcrumb li a:hover {text-decoration: underline;}

.section .sTitle{padding: 10px 0px 10px 15px; font-weight: bold; font-size: 17px; color: var(--text_bluedark);}
.section .sTitle span{font-size: 13px; font-family: 'regular'; margin-left: 15px;}
.section .sItems{width: 100%; overflow: auto; white-space: nowrap; -ms-overflow-style: none; scrollbar-width: none;}
.section .sItems::-webkit-scrollbar{display: none;}

.scroll_card{opacity: 0; transition: all 0.2s ease;}
.scroll_card > div{height: 100%; width: 0px; top: 0px; position: absolute; z-index: 1;}
.scroll_card > div:first-child{left: 25px; display: none;}
.scroll_card > div:last-child{right: 30px;}
.scroll_card > div > div{width: 40px; height: 40px; cursor: pointer; border-radius: 50%; position: absolute; top: 32%; background: var(--bg_white); border: 3px solid var(--bg_blue);}
.scroll_card > div:last-child > div{right: 0px;}
.scroll_card > div > div > div{width: 20px; height: 20px; margin-top: 9.5px;}
.scroll_card > div:hover:first-child > div > div{margin-left: 5px;}
.scroll_card > div:hover:last-child > div > div{margin-right: 5px;}

#popup{width: 100%; top: 0px; left: 0px; height: 100%; position: fixed; z-index: 90; background: rgba(239, 239, 239, 0.55); overflow: auto;}
#popup table{width: 100%; height: 100%;}
#popup .p_canvas{max-width: 400px; width: 80%; margin-top: 50px; margin-bottom: 50px; box-shadow: 0 0 6px 0 rgba(161, 161, 161, 0.5); border-radius: 5px; overflow: hidden;}

#alert{width: 100%; height: 0px; position: fixed; top: 0px; left: 0px; z-index: 100;}
#alert > div{width: 90%; max-width: 450px; transition: 0.2s; box-shadow: 0 0 6px 0 rgba(161, 161, 161, 0.5); position: relative; top: -100px; border-radius: 20px;}
#alert > div > div{padding: 9px 15px 11px 15px; text-align: center; color: var(--text_white);}
#alert > div.success{background: var(--bg_alert_green);}
#alert > div.warning{background: var(--bg_alert_orange);}
#alert > div.failed{background: var(--bg_alert_red);}

.alert_email{padding: 10px 25px 13px 25px; display: grid; grid-template-columns: 25px 1fr; grid-gap: 15px; align-items: center; box-sizing: border-box; margin: 15px 20px 20px 20px; border-radius: 10px; background: var(--bg_alert_red_calm);}
.alert_email > div{width: 100%;}
.alert_email > div:first-child > div{width: 25px; height: 25px;}

.tab .tOpt{white-space: nowrap; width: 100%; border-bottom: 1.5px solid var(--bg_line);}
.tab .tOpt > div{display: inline-block; padding: 10px 0px; font-weight: bold; color: var(--text_silver); position: relative; cursor: pointer;}
.tab .tOpt > div:not(:first-child){margin-left: 25px;}
.tab .tOpt > div.active{color: var(--text_black);}
.tab .tOpt > div:before{content: ''; transition: var(--transition); opacity: 0; position: absolute; bottom: -1.5px; left: 0px; width: 100%; height: 2px; background: var(--bg_black);}
.tab .tOpt > div:hover:before, .tab .tOpt > div.active:before{opacity: 1;}
.tab .tOpt .toNotif{padding: 1px 4px 1px 4px; border-radius: 3px; background: var(--bg_silvercalm); color: var(--text_silver); font-size: 10px;}
.tab .tBody > span{display: none;}
.tab .tBody > span.active{display: block;}

.popup_head_close{display: grid; grid-template-columns: 1fr 15px; grid-gap: 10px; align-items: center;}
.popup_head_close > div{width: 100%;}
.popup_head_close > div:first-child{font-weight: bold;}
.popup_head_close > div:nth-child(2) > div{width: 15px; height: 15px;}

.popup_list{list-style-type: none;}
.popup_list > li{padding: 15px 20px; cursor: pointer; transition: all 0.5s ease;}
.popup_list > li:not(:last-child){border-bottom: 1px solid #f6f6f6;}
.popup_list > li:hover{background: #e7e7e7;}
.popup_list > a > li{padding: 15px 20px; cursor: pointer; transition: all 0.5s ease;}
.popup_list > a:not(:last-child) > li{border-bottom: 1px solid #f6f6f6;}
.popup_list > a:hover > li{background: var(--bg_silvercalm);}
.popup_list.plIcon li{display: grid; grid-template-columns: 20px 1fr; grid-gap: 10px; align-items: center;}
.popup_list.plIcon li > div{width: 100%;}
.popup_list.plIcon li > div:first-child > div{width: 20px; height: 20px;}

.popup_login{height: 155px; background-size: cover; position: relative; background: var(--bg_gradientsoft);}
.popup_login:before{content: ''; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.7);}
.popup_login .plContent{font-size: 17px; font-weight: bold; position: absolute; top: 20px; left: 0px; padding: 0px 15px; text-shadow: 0px 0px 5px var(--bg_white);}
.popup_login .plBtn{position: absolute; bottom: 20px; right: 20px;}
.popup_login .plBtn button{float: right;}

.popupUser{}
.popupUser .puHead{display: grid; grid-gap: 10px; grid-template-columns: 50px 1fr; padding: 15px; box-sizing: border-box; background-image: var(--bg_gradientsoft);}
.popupUser .puHead > div{width: 100%;}
.popupUser .puHead > div:first-child > div{padding-bottom: 100%; border-radius: 50%; background-color: var(--bg_silvercalm); box-shadow: inset 0px 0px 0px 2px var(--bg_blue);}
.popupUser .puHead > div:nth-child(2) > div:first-child{font-weight: bold;}
.popupUser .puHead > div:nth-child(2) > div:nth-child(2){font-size: 11px; color: var(--text_silver);}
.popupUser .puHead > div:nth-child(2) > div:nth-child(3){font-size: 11px;}
.popupUser .puWallet{padding: 0px 15px; margin-top: 15px;}
.popupUser .puWallet > div{box-shadow: 0px 0px 5px var(--shadow); border: 1px solid var(--bg_line); padding: 7px 0px 7px 10px; border-radius: 10px; display: grid; grid-template-columns: 1fr 75px 75px; align-items: center; box-sizing: border-box;}
.popupUser .puWallet > div > div{width: 100%; position: relative; cursor: pointer; transition: var(--transition);}
.popupUser .puWallet > div > div:hover{opacity: 0.7;}
.popupUser .puWallet > div > div:first-child:before{content: ''; position: absolute; right: 10px; top: 0px; width: 0.5px; height: 100%; background: var(--bg_line);}
.popupUser .puWallet .pwKunci > div:first-child{font-size: 11px;}
.popupUser .puWallet .pwKunci > div:nth-child(2){display: grid; margin-top: 5px; grid-template-columns: 25px 1fr; grid-gap: 10px; align-items: center;}
.popupUser .puWallet .pwKunci > div:nth-child(2) > div{width: 100%;}
.popupUser .puWallet .pwKunci > div:nth-child(2) > div:first-child > div{width: 25px; height: 25px;}
.popupUser .puWallet .pwKunci > div:nth-child(2) > div:nth-child(2){font-size: 17px; font-weight: bold;}
.popupUser .puWallet .pwOpt > div:first-child{width: 25px; height: 25px;}
.popupUser .puWallet .pwOpt > div:nth-child(2){font-weight: bold; margin-top: 5px; font-size: 11px; text-align: center;}
.popupUser .puAddress{margin-top: 15px; padding: 0px 15px;}
.popupUser .puAddress > div:first-child{font-weight: bold;}
.popupUser .puAddress > div:nth-child(3){font-size: 11px;}
.popupUser .puOpt{margin-top: 15px;}
.popupUser .puOpt > a > div{padding: 7px 15px; color: var(--text_black); display: grid; grid-template-columns: 15px 1fr; grid-gap: 10px; align-items: center; box-sizing: border-box;}
.popupUser .puOpt > a > div > div{width: 100%;}
.popupUser .puOpt > a > div > div:first-child > div{width: 15px; height: 15px;}
.popupUser .puOpt .poCount{padding: 2px 4px; border-radius: 5px; font-size: 11px; display: none; margin-left: 5px; background: var(--bg_red); color: var(--text_white);}
.popupUser .puLogout{padding: 15px;}

.page_loading{padding: 35px 0px 20px 0px; text-align: center; font-size: 20px; color: var(--text_silver);}
.page_empty{padding: 45px 0px 65px 0px; text-align: center; color: var(--text_silver); font-size: 15px;}

.option_logo{margin-top: 25px;}
.option_logo > a:not(:last-child) > div{margin-bottom: 25px;}
.option_logo > a > div{display: grid; grid-template-columns: 25px 1fr; grid-gap: 15px; align-items: center;}
.option_logo > a > div > div{width: 100%;}
.option_logo > a > div > div:first-child > div{width: 25px; height: 25px;}
.option_logo > a > div > div:nth-child(2){font-weight: bold;}

.floating_wa{position: fixed; bottom: 35px; right: 35px; z-index: 55;}
.floating_wa > div{width: 45px; height: 45px; cursor: pointer;}

/**FRONT**/
.front_info{padding: 10px 15px; border-radius: 10px; display: grid; grid-template-columns: 25px 1fr; grid-gap: 15px; box-sizing: boder-box; background: var(--bg_soft_blue); margin: 15px; align-items: center;}
.front_info > div{width: 100%;}
.front_info > div:first-child > div{width: 25px; height: 25px;}
.front_info a{font-weight: bold;}

.front_popupbeta > div:first-child{background: var(--bg_gradientsoft);}
.front_popupbeta > div:first-child > div{padding: 30px 15px 15px 15px; font-size: 15px; font-weight: bold;}
.front_popupbeta > div:nth-child(2){padding: 10px 15px;}
.front_popupbeta > div:nth-child(3){padding: 0px 10px 15px 10px;;}

.front_top{background: var(--bg_silvercalm); background-image: var(--bg_gradientsoft);}
.front_top > div:first-child{text-align: center; padding: 25px 0px 10px 0px; font-size: 25px; font-weight: bold;}
.front_top > div:nth-child(2){padding: 10px 0px 45px 0px; max-width: 900px;}

.front_slider{position: relative;}
.front_slider > div:first-child > a > div{display: none;}
.front_slider > div:first-child > a.active > div{display: block;}
.front_slider > div:first-child > a > div > div:first-child{padding-bottom: 39%; background-size: cover;}
.front_slider > div:first-child > a > div > div:nth-child(2){padding-bottom: 50%; background-size: cover; display: none;}
.front_slider > div:nth-child(2){padding: 15px 0px;}
.front_slider > div:nth-child(2) > div{display: table;}
.front_slider > div:nth-child(2) > div > div{display: table-cell;}
.front_slider > div:nth-child(2) > div > div > div{width: 15px; height: 15px; background: var(--bg_silver); margin: 0px 7px; border-radius: 50%;}
.front_slider > div:nth-child(2) > div > div.active > div{background: var(--bg_blue);}

.front_browse{display: grid; grid-gap: 15px; margin: 20px auto 35px auto; padding: 0px 15px; max-width: 900px; grid-template-columns: 1fr 1fr 1fr 1fr; display: none;}
.front_browse > a{width: 100%;}
.front_browse .fbItem{height: 80px; border-radius: 10px; position: relative; transition: var(--transition); color: var(--text_white); overflow: hidden;}
.front_browse .fbItem:hover{box-shadow: 0px 0px 0px 2px var(--bg_blue);}
.front_browse .fbItem.po{background: var(--bg_green);}
.front_browse .fbItem.po > div:nth-child(2):before{background-image: linear-gradient(to right, var(--bg_green), transparent);}
.front_browse .fbItem.bestseller{background: var(--bg_red);}
.front_browse .fbItem.bestseller > div:nth-child(2):before{background-image: linear-gradient(to right, var(--bg_red), transparent);}
.front_browse .fbItem.preloved{background: var(--bg_orange);}
.front_browse .fbItem.preloved > div:nth-child(2):before{background-image: linear-gradient(to right, var(--bg_orange), transparent);}
.front_browse .fbItem.indie{background: var(--bg_black);}
.front_browse .fbItem.indie > div:nth-child(2):before{background-image: linear-gradient(to right, var(--bg_black), transparent);}
.front_browse .fbItem > div:first-child{position: absolute; bottom: 15px; left: 15px; font-size: 15px; font-weight: bold; z-index: 1;}
.front_browse .fbItem > div:nth-child(2){position: absolute; bottom: 0px; right: 0px; width: 60%; height: 100%;}
.front_browse .fbItem > div:nth-child(2):before{content: ''; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;}

.front_editorchoice{position: relative;}
.front_editorchoice > div{padding-top: 25px; max-width: 1400px;}
.front_editorchoice > div > div:first-child{font-size: 17px; font-weight: bold;}

.front_menu{display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 25px;}
.front_menu > a{width: 100%; border: 2px solid var(--bg_blue); border-radius: 10px; box-sizing: border-box;}
.front_menu .fmBox{display: grid; grid-template-columns: 35px 1fr; grid-gap: 15px; padding: 13px 15px; align-items: center;}
.front_menu .fmBox > div{width: 100%;}
.front_menu .fmBox > div:first-child > div{width: 25px; height: 25px;}
.front_menu .fmBox > div:nth-child(2){font-family: 'serif'; font-size: 15px; font-weight: bold; padding-top: 3px;}

.front_focus{margin: 45px auto; display: grid; grid-template-columns: 200px 1fr; align-items: center;}
.front_focus > div{width: 100%; position: relative;}
.front_focus > div:first-child{height: 250px; background: var(--bg_bluecalm); border-radius: 10px;}
.front_focus > div:first-child > div:first-child{width: 150px; height: 150px; position: absolute; bottom: 65px; left: 20px;}
.front_focus > div:first-child > div:nth-child(2){font-family: 'serif'; font-weight: bold; font-size: 20px; position: absolute; bottom: 20px; left: 20px;}

.front_page{padding: 25px 0px 45px 0px; position: relative; display: none;}
.front_page.preloved{background: var(--bg_orange);}
.front_page.indie{background: var(--bg_black);}
.front_page .fpTitle{position: relative; z-index: 1; font-size: 17px; font-weight: bold; color: var(--text_white); padding-left: 20px; margin-bottom: 15px;}
.front_page .fpContent{position: relative; z-index: 1;}
.front_page .fpImg{position: absolute; width: 80%; max-width: 500px; height: 100%; right: 0px; top: 0px;}
.front_page .fpImg:before{content: ''; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;}
.front_page.preloved .fpImg:before{background-image: linear-gradient(to right, var(--bg_orange), transparent);}
.front_page.indie .fpImg:before{background-image: linear-gradient(to right, var(--bg_black), transparent);}
.front_page .card_hrz_items .chiCnt .ccBox{background: var(--bg_white); border-radius: 10px; height: 255px; overflow: hidden;}
.front_page .card_hrz_items .chiCnt .ccBox > div:nth-child(2){padding: 0px 10px;}
.front_page .card_hrz_items .chiCnt .ccBox > div:first-child > div{border-radius: 10px 10px 0px 0px;}

.front_article{margin-top: 55px;}
.front_article > div:first-child{font-family: 'serif'; font-size: 20px; font-weight: bold;}
.front_article > div:nth-child(2){margin-top: 15px;}

/**ITEM**/
.item_layout{max-width: 900px;}
.item_head{display: grid; grid-template-columns: 250px 1fr; grid-gap: 20px;}
.item_head > div{width: 100%;}
.item_head .ihCover > div{background-color: var(--bg_silvercalm); border-radius: 10px; font-size: 0px; overflow: hidden;}
.item_head .ihCover img{width: 100%;}
.item_head .ihMoreCover{margin-top: 15px; white-space: nowrap; overflow: auto;}
.item_head .ihMoreCover > div{display: inline-block; width: 50px; height: 50px; transition: var(--transition); background-color: var(--bg_silvercalm); border-radius: 5px; cursor: pointer;}
.item_head .ihMoreCover > div:not(:last-child){margin-right: 10px;}
.item_head .ihMoreCover > div.active{box-shadow: inset 0px 0px 0px 2px var(--bg_blue);}
.item_head .ihMoreCover > div:not(.active):hover{box-shadow: inset 0px 0px 0px 2px var(--bg_silver);}
.item_head .ihRating{padding: 10px 15px 15px 15px; border: 1.5px solid var(--bg_orange); border-radius: 5px; background: var(--bg_soft_orange); margin-top: 10px;}
.item_head .ihRating > div:nth-child(2){margin-top: 5px; display: grid; grid-template-columns: 25px 1fr; grid-gap: 10px; align-items: center;}
.item_head .ihRating > div:nth-child(2) > div{width: 100%;}
.item_head .ihRating > div:nth-child(2) > div:first-child > div{width: 25px; height: 25px;}
.item_head .ihRating > div:nth-child(2) > div:nth-child(2){font-size: 15px; font-family: 'bold';}
.item_head .ihTitle{margin-top: 15px;}
.item_head .ihTitle h1{font-size: 20px; font-weight: bold;}
.item_head .ihWriter{color: var(--text_silver);}
.item_head .ihPrice{margin-top: 20px; display: inline-flex; align-items: center;}
.item_head .ihPrice > span{width: 100%;}
.item_head .ihPrice > span:not(:last-child){margin-right: 10px;}
.item_head .ihPrice .ipFinal{font-size: 20px; font-weight: bold;}
.item_head .ihPrice .ipBefore{text-decoration: line-through; color: var(--text_silver);}
.item_head .ihPrice .ipDiscount{font-size: 9px; font-weight: bold; padding: 3px 7px 2px 7px; border-radius: 3px; background: var(--bg_red); color: var(--text_white);}
.item_head .ihItemType{margin-top: 10px; color: var(--text_silver);}
.item_head .ihItemType > span{padding: 2px 7px; margin-right: 5px; border-radius: 5px; font-size: 11px; color: var(--text_white); background: var(--bg_orange);}
.item_head .ihDetail{margin-top: 15px;}
.item_head .ihDetail > div{display: grid; grid-template-columns: 100px 1fr; grid-gap: 5px; padding: 5px 0px;}
.item_head .ihDetail > div:not(:last-child){border-bottom: 1px solid var(--bg_line);}
.item_head .ihDetail > div > div{width: 100%;}
.item_head .ihDetail > div > div:first-child{font-weight: bold;}
.item_head .ihInfo{margin-top: 25px; display: grid; grid-template-columns: 1fr 1fr 1fr;}
.item_head .ihInfo > div{width: 100%; text-align: center;}
.item_head .ihInfo > div > div:first-child > div{width: 30px; height: 30px;}
.item_head .ihInfo > div > div:nth-child(2){margin-top: 5px; margin-bottom: 5px;}
.item_head .ihInfo > div > div:nth-child(2) > div:first-child{color: var(--text_silver);}
.item_head .ihInfo > div > div:nth-child(2) > div:nth-child(2){margin-top: 3px; font-weight: bold;}
.item_head .ihBonus{margin-top: 10px; padding: 10px 15px; border: 1.5px solid var(--bg_line); border-radius: 5px;}
.item_head .ihBonus > div:nth-child(2){margin-top: 5px; white-space: nowrap;}
.item_head .ihBonus > div:nth-child(2) > div{display: inline-block; width: 50px; vertical-align: top;}
.item_head .ihBonus > div:nth-child(2) > div:not(:last-child){margin-right: 5px;}
.item_head .ihBonus > div:nth-child(2) > div > div:first-child{width: 50px; height: 50px; border-radius: 5px; background-color: var(--bg_silvercalm);}
.item_head .ihBonus > div:nth-child(2) > div > div:nth-child(2){margin-top: 3px; font-size: 11px; font-weight: bold; white-space: normal;}
.item_head .ihBtn{margin-top: 25px; white-space: nowrap;}
.item_head .ihBtn > div{display: inline-block;}
.item_head .ihBtn > div:not(:last-child){margin-right: 15px;}
.item_head .ihBtn button{padding: 10px 23px; font-size: 15px;}
.item_head .ihBtn .ibBuy{min-width: 150px;}

.item_head .ihBtn .ibOpt{width: 20px; height: 20px; position: relative; top: 4px; cursor: pointer;}
.item_review{margin-top: 15px; padding: 15px 20px; border: 2px solid var(--bg_silvercalm); border-radius: 10px;}
.item_review > div:first-child{color: var(--text_silver);}
.item_review > div:nth-child(2){margin-top: 3px; font-size: 11px; font-style: italic;}
.item_body{margin-top: 25px;}
.item_body .ibDesc > div:first-child{font-weight: bold; font-size: 17px;}

/**CART**/
.cart_layout{display: grid; grid-gap: 25px; margin-bottom: 25px; grid-template-columns: 1fr 300px; max-width: 900px;}
.cart_layout > div{width: 100%;}

.cart_head{padding: 10px 15px; border-radius: 5px; background: var(--bg_bluecalm); display: grid; grid-template-columns: 20px 1fr; grid-gap: 15px; box-sizing: border-box; align-items: center; position: relative;}
.cart_head:before{content: ''; position: absolute; right: 0px; top: 0px; width: 35px; height: 45px; background-size: 100%; background-image: url('../../../images/background/cart_trolley.png');}
.cart_head > div{width: 100%; position: relative; z-index: 1;}
.cart_head input{transform: scale(1.5); cursor: pointer;}
.cart_head > div:nth-child(2) > div:first-child{font-family: 'bold';}

.cart_summary{margin-top: 20px; padding: 15px; border: 1px solid var(--bg_line); border-radius: 5px;}
.cart_summary.sticky{position: sticky; top: 75px;}
.cart_summary > div:first-child{font-size: 15px; padding-bottom: 10px; border-bottom: 1px solid var(--bg_line);}
.cart_summary .csContent .ccList{margin-top: 15px; border-bottom: 1px solid var(--bg_line); padding-bottom: 15px;}
.cart_summary .csContent .ccList > div{display: grid; grid-template-columns: 1fr 100px; grid-gap: 15px;}
.cart_summary .csContent .ccList > div:not(:last-child){margin-bottom: 10px;}
.cart_summary .csContent .ccList > div > div{width: 100%;}
.cart_summary .csContent .ccList > div > div:nth-child(2){text-align: right; font-family: 'bold';}
.cart_summary .csContent .ccTotal{margin-top: 15px; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 15px;}
.cart_summary .csContent .ccTotal > div{width: 100%;}
.cart_summary .csContent .ccTotal > div:first-child > div:first-child{font-family: 'bold';}
.cart_summary .csContent .ccTotal > div:first-child > div:nth-child(2){margin-top: 3px; color: var(--text_silver);}
.cart_summary .csContent .ccTotal > div:nth-child(2){font-family: 'bold'; text-align: right; font-size: 17px;}
.cart_summary .csButton{margin-top: 15px;}
.cart_summary .csButton button{width: 100%; font-size: 17px; padding: 13px 0px;}

/**SEARCH**/
.search_box{padding: 15px 20px; background: var(--bg_silvercalm); border-radius: 10px;}
.search_box button{width: 80px;}

/**COLLECTION**/
.col_section > div:not(:last-child){margin-bottom: 35px;}
.col_section .csTitle{white-space: nowrap; height: 32px; margin-bottom: 10px;}
.col_section .csTitle > div{display: inline-block;}
.col_section .csTitle > div:first-child{font-size: 15px; font-weight: bold; margin-top: 4px;}
.col_section .csTitle > div:nth-child(2){float: right; padding: 5px 15px; background: var(--bg_blue); color: var(--text_white); border-radius: 5px;}

/**COLAB**/
.colab_head{padding: 25px 0px; text-align: center;}
.colab_head > div:first-child{font-size: 30px; font-weight: bold; margin-bottom: 5px;}

/**CHAT**/
.chat{margin-bottom: 15px; max-width: 800px;}
.chat > div:first-child{padding: 20px;}
.chat .cBody{border: 1px solid var(--bg_line); overflow: hidden; display: grid; border-radius: 10px; overflow: hidden; grid-template-columns: 250px 1fr; vertical-align: top; min-height: 500px;}
.chat .cBody > div{width: 100%;}
.chat .cBody > div:first-child{border-right: 1px solid #f6f6f6;}
.chat .cBack{display: none; font-weight: bold; margin-bottom: 15px;}
.chat .cBody .cbNew{padding: 15px 20px; text-align: center; background: var(--bg_silvercalm);}
.chat .cBody .cbList > div{padding: 13px 15px; cursor: pointer; display: grid; grid-template-columns: 30px 1fr; grid-gap: 10px; align-items: center; box-sizing: border-box;}
.chat .cBody .cbList > div:hover{background: #f9f9f9;}
.chat .cBody .cbList > div.new{background: #e5f1ff;}
.chat .cBody .cbList > div.active{background: var(--bg_bluecalm);}
.chat .cBody .cbList > div:not(:last-child){border-bottom: 1px solid #f6f6f6;}
.chat .cBody .cbList > div > div{width: 100%;}
.chat .cBody .cbList > div > div:first-child > div{padding-bottom: 100%; background-color: var(--bg_silvercalm); border-radius: 50%;}
.chat .cBody .cbList > div > div:nth-child(2){display: grid; width: 100%;}
.chat .c_index{padding-top: 150px; text-align: center;}
.chat .c_index > div:first-child{font-size: 20px;}
.chat .c_index > div:last-child{color: silver; margin-top: 10px;}
.chat .c_conv > div:first-child{padding: 20px; margin-bottom: 10px; border-bottom: 1px solid #f6f6f6;}
.chat .c_bubble > div{display: inline-block; width: 100%; margin: 5px 0px;}
.chat .c_bubble > div > div{width: 100%;}
.chat .c_bubble > div > div > div:first-child{padding: 10px 15px 11px 15px; max-width: 70%; margin: 5px 15px;}
.chat .c_bubble > div > div > div:last-child{clear: both; font-size: 11px; color: silver; padding: 0px 15px; position: relative; top: 2px;}
.chat .c_bubble > div.me > div{float: right; text-align: right;}
.chat .c_bubble > div.me > div > div:first-child{background: #efefef; float: right; border-radius: 15px 15px 0px 15px;}
.chat .c_bubble > div.you > div{float: left;}
.chat .c_bubble > div.you > div > div:first-child{background: #dedfff; float: left; border-radius: 15px 15px 15px 0px;}

/**WALLET**/
.wallet_info{display: grid; grid-template-columns: 1fr 1fr; grid-gap: 35px;  margin-top: 25px; margin-bottom: 25px;}
.wallet_info > div{width: 100%;}
.wallet_info .wiData{padding: 25px; background-color: var(--bg_blue); border-radius: 10px; color: var(--text_white);}
.wallet_info .wiData > div:first-child{margin-bottom: 10px; font-family: 'bold';}
.wallet_info .wiData > div:first-child > span:first-child{font-size: 50px; margin-right: 15px;}
.wallet_info .wiData > div:first-child > span:last-child{font-size: 20px;}
.wallet_info .wiData > div:last-child{border-top: 1px solid var(--bg_bluedark); padding-top: 20px;}
.wallet_info .wiTopUp > div:first-child{font-size: 20px; font-family: 'bold';}
.wallet_info .wiTopUp  > div:nth-child(2){margin-top: 5px;}
.wallet_info .wiTopUp  > div:nth-child(3){margin-top: 25px;}
.wallet_info .wiHistory > div:first-child{font-size: 20px; font-family: 'bold'; margin-bottom: 10px;}
.wallet_info .wiHistory .whItems > div{padding: 10px 15px; border-radius: 5px; border: 1px solid var(--bg_line);}
.wallet_info .wiHistory .whItems > div:not(:last-child){margin-bottom: 10px;}
.wallet_info .wiHistory .whItems > div > div:first-child{font-size: 11px; font-weight: bold;}
.wallet_info .wiHistory .whItems .wiStatus{padding: 3px 10px; border-radius: 50px; margin-right: 10px;}
.wallet_info .wiHistory .whItems .wiStatus.IN{background: var(--bg_green); color: var(--text_white);}
.wallet_info .wiHistory .whItems .wiStatus.OUT{background: var(--bg_silver); color: var(--text_white);}
.wallet_info .wiHistory .whItems > div > div:nth-child(2){margin-top: 5px;}
.wallet_info .wiHistory .whItems .wiInfo > div{display: inline-block; font-size: 11px;}
.wallet_info .wiHistory .whItems .wiInfo > div:not(:last-child){margin-right: 5px;}
.wallet_info .wiHistory .whItems .wiInfo > div:first-child{font-weight: bold; color: var(--text_blue);}
.wallet_info .wiHistory .whItems .wiInfo > div:nth-child(2){color: var(--text_silver);}

/**SETTING**/
.set_date{display: inline-block;}
.set_date > div{display: table; width: 100%; float: left; table-layout: fixed;}
.set_date > div > div{display: table-cell;}
.set_date > div > div:not(:last-child){padding-right: 15px;}
.set_date > div > div:first-child{width: 35%;}
.set_date > div > div:nth-child(2){width: 45%;}
.set_address{display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 15px;}
.set_address > div{width: 100%;}
.set_photo{display: grid; grid-template-columns: 150px 1fr; grid-gap: 25px;}
.set_photo > div{width: 100%;}
.set_photo > div:first-child > div{padding-bottom: 100%; border-radius: 50%; background-color: var(--bg_silvercalm);}

/**ERROR**/
.error_page{max-width: 500px; background: var(--bg_silvercalm); border-radius: 10px; margin-top: 70px; margin-bottom: 100px;}
.error_page > div{padding: 30px 35px 35px 30px; font-size: 17px;}
.error_page > div > div:first-child{font-size: 25px; font-weight: bold;}

.error_login{max-width: 570px; padding: 10px 15px; background: var(--bg_orangecalm); border-radius: 10px; margin-top: 80px; margin-bottom: 200px;}
.error_login > div:first-child{font-family: 'bold'; font-size: 15px;}
.error_login > div:nth-child(2){margin-top: 5px;}

.empty_section{padding: 20px 0px; text-align: center; color: var(--text_silver);}

.empty_body{text-align: center; text-align: center; margin: 70px auto 140px auto;}
.empty_body .ebIcon{margin-bottom: 25px;}
.empty_body .ebIcon > div{width: 90px; height: 90px;}
.empty_body .ebTitle{font-size: 17px; font-weight: bold;}