.navbarSpace{height: 50px;}
.navbarSpace.nsSub{height: 90px;}

#navbar{position: fixed; top: 0px; left: 0px; z-index: 60; width: 100%; background: var(--bg_white);}
#navbar.navShadow{box-shadow: 0px 0px 15px #e6e6e6;}
#navbar .nMain{height: 50px;}
#navbar .nMain > div{padding: 0px 25px;}
#navbar .nmLayout{grid-template-columns: 120px 1fr min-content; position: relative; top: 7px;}
#navbar .nSub{height: 40px;}
#navbar .nsMenu{width: min-content; white-space: nowrap; position: relative; top: 6px;}
#navbar .nsMenu > a{display: inline-block;}
#navbar .nsMenu > a:not(:last-child){margin-right: 7px;}
#navbar .nsMenu .nmItem{grid-template-columns: 15px min-content; border-radius: 25px; padding: 3px 10px; font-family: 'semibold'; color: var(--text_black);}
#navbar .nsMenu .nmItem:hover{background: var(--bg_silvercalm);}
#navbar .nsMenu .nmItem.active{box-shadow: inset 0px 0px 0px 1px var(--bg_blue); background: var(--bg_bluecalm);}
#navbar .nsMenu .nmItem > div:first-child > div{width: 15px; height: 15px;}
#navbar .navLogo > div:first-child{padding-bottom: 23%;}
#navbar .navLogo > div:nth-child(2){padding-bottom: 100%; display: none;}
#navbar .navMenu{}
#navbar .navMenu > a{display: inline-block;}
#navbar .navMenu > a > div{padding: 5px 10px; font-family: 'semibold'; color: var(--text_black);}
#navbar .navMenu > a > div.active{color: var(--text_blue);}
#navbar .navMenu .nmItem{position: relative;}
#navbar .navMenu .nmItem > div{position: absolute; top: 10px; width: 10px; height: 10px; right: -5px;}
#navbar .navFocus{display: grid; grid-template-columns: 265px min-content min-content;}
#navbar .navSearch{border-radius: 10px; border: 1px solid var(--bg_line); position: relative;}
#navbar .navSearch > div{width: 15px; height: 15px; position: absolute; top: 9px; left: 10px;}
#navbar .navSearch > input{padding: 9px 14px 9px 33px; outline: none; border: 0px; width: 100%; background: transparent;}
#navbar .navOpt{grid-template-columns: 1fr 1fr 1fr 1fr; margin-left: 10px;}
#navbar .navOpt .noSearch{display: none;}
#navbar .navOpt .noItem{width: 23px; height: 23px; position: relative;}
#navbar .navOpt .noItem > div{position: absolute; top: -6px; right: -4px; width: 13px; padding: 1px; border-radius: 5px; text-align: center; font-size: 9px; color: var(--text_white); background: var(--bg_red);}
#navbar .navOpt .noUser{width: 25px; height: 25px; border-radius: 50%; background-color: var(--bg_silvercalm); border: 1.5px solid var(--bg_silver);}

#navbarBrowse{width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; z-index: 80; overflow: auto; backdrop-filter: blur(3px); background: rgba(0, 0, 0, 0.55); display: none;}
#navbarBrowse > div{width: 800px; min-height: 200px; background: var(--bg_white); margin-top: 65px; margin-bottom: 65px; border-radius: 10px; padding: 20px; display: grid; grid-template-columns: 170px 1fr; grid-gap: 15px; box-sizing: border-box; position: relative; opacity: 0; transition: var(--transition);}
#navbarBrowse > div:before{content: ''; position: absolute; top: 0px; left: 180px; width: 1px; height: 100%; background: var(--bg_line);}
#navbarBrowse > div > div{width: 100%;}
#navbarBrowse .nbSide > div:not(:last-child){margin-bottom: 45px;}
#navbarBrowse .nbSide .nsTitle{font-weight: bold; font-size: 15px; margin-bottom: 5px;}
#navbarBrowse .nbSide .nsList > a > div{padding: 7px 0px; display: grid; grid-template-columns: 20px 1fr; grid-gap: 10px; align-items: center;}
#navbarBrowse .nbSide .nsList > a > div > div{width: 100%;}
#navbarBrowse .nbSide .nsList > a > div > div:first-child > div{width: 20px; height: 20px;}
#navbarBrowse .nbSide .nsList > a > div > div:nth-child(2){color: var(--text_black);}
#navbarBrowse .ncTitle{margin-bottom: 5px;}
#navbarBrowse .ncTitle > span{font-weight: bold; font-size: 15px;}
#navbarBrowse .ncTitle > a{float: right;}
#navbarBrowse .ncContent{display: grid; width: 100%;}

.navbarMore{position: fixed; top: 50px; right: 0px; width: 300px; background: rgba(255, 255, 255, 0.9); border: 2px solid var(--bg_silvercalm); border-top: 0px; border-right: 0px; display: none; z-index: 65;}
.navbarMore.nmMenu{max-height: 83vh; overflow: auto;}
.navbarMore .nmUser{padding: 15px; grid-template-columns: 45px 1fr;}
.navbarMore .nmUser > div:first-child > div{width: 45px; height: 45px; border-radius: 50%; background-color: var(--bg_silvercalm);}
.navbarMore .nmUser > div:nth-child(2) > div:first-child{font-weight: bold;}
.navbarMore .nmUser > div:nth-child(2) > div:nth-child(2){font-size: 11px; color: var(--text_silver);}
.navbarMore .nmWallet{padding: 0px 15px;}
.navbarMore .nmWallet > div{box-shadow: 0px 0px 5px var(--shadow); background: var(--bg_white); padding: 7px 0px 7px 10px; border-radius: 10px; display: grid; grid-template-columns: 1fr 55px 55px 44px; align-items: center; box-sizing: border-box;}
.navbarMore .nmWallet > div > div{width: 100%; position: relative; cursor: pointer; transition: var(--transition);}
.navbarMore .nmWallet > div > div:hover{opacity: 0.7;}
.navbarMore .nmWallet .nmwKunci > div:first-child{font-size: 11px;}
.navbarMore .nmWallet .nmwKunci > div:nth-child(2){display: grid; grid-template-columns: 15px 1fr; grid-gap: 10px; align-items: center;}
.navbarMore .nmWallet .nmwKunci > div:nth-child(2) > div{width: 100%;}
.navbarMore .nmWallet .nmwKunci > div:nth-child(2) > div:first-child > div{width: 15px; height: 15px;}
.navbarMore .nmWallet .nmwKunci > div:nth-child(2) > div:nth-child(2){font-size: 17px; font-weight: bold;}
.navbarMore .nmWallet .nmwKunci > div:nth-child(3) > div{display: inline-block; padding: 3px 10px; font-size: 10px; color: var(--text_white); margin-top: 3px; border-radius: 50px; background: var(--bg_blue);}
.navbarMore .nmWallet .nmwOpt > div:first-child{width: 20px; height: 20px;}
.navbarMore .nmWallet .nmwOpt > div:nth-child(2){font-weight: bold; margin-top: 5px; font-size: 11px; text-align: center;}
.navbarMore .nmWallet .nmwQr:before{content: ''; width: 1px; height: 43px; position: absolute; left: 0px; top: -9px; background: var(--bg_line);}
.navbarMore .nmWallet .nmwQr > div{width: 25px; height: 25px;}
.navbarMore .nmList{margin: 15px 15px 0px 15px; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px;}
.navbarMore .nmList > a{grid-template-columns: 15px 1fr; background: var(--bg_white); padding: 0px 10px; border-radius: 10px; width: 100%; font-size: 13px; height: 50px; cursor: pointer; color: var(--text_black); border: 1px solid var(--bg_line);}
.navbarMore .nmList > a > div{width: 100%;}
.navbarMore .nmList > a > div:first-child > div{width: 15px; height: 15px;}
.navbarMore .nmInfo{text-align: center; padding: 15px 7px 15px 7px; font-size: 10px;}
.navbarMore .nmInfo > div:first-child{margin-bottom: 5px;}
.navbarMore.nmLayoutNotif .ndTab{grid-template-columns: 1fr 1fr;}
.navbarMore.nmLayoutNotif .ndTab > div{text-align: center; padding: 10px 0px;}
.navbarMore.nmLayoutNotif .ndTab > div:nth-child(2){background: var(--bg_silvercalm);}
.navbarMore.nmLayoutNotif .ndContent{}
.navbarMore.nmLayoutNotif .ndContent .ncInfo{padding-top: 100px; text-align: center; color: var(--text_silver);}
.navbarMore.nmLayoutNotif .ndBtn{padding: 10px 0px; text-align: center;}

#navbarBack{position: fixed; top: 0px; left: 0px; width: 100%; background: var(--bg_blue); z-index: 50;}
#navbarBack > div{height: 55px; width: 950px; padding: 0px 35px; box-sizing: border-box; display: grid; grid-template-columns: 25px 1fr; grid-gap: 25px;}
#navbarBack > div > div{width: 100%;}
#navbarBack .nbIcon{width: 20px; height: 20px; margin-top: 17px;}
#navbarBack .nbLogo{width: 110px; height: 25px; margin-top: 13px; float: left;}
#navbarBack .nbTitle{margin-top: 13px; float: right; font-size: 17px; letter-spacing: 5px; font-family: 'bold'; color: var(--text_white);}

.menuMobileSpace{height: 75px; display: none;}
#menuMobile{position: fixed; bottom: 0px; left: 0px; width: 100%; z-index: 65; height: 0px; display: none;}
#menuMobile .mnBody{width: 90%; max-width: 650px; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; position: relative; bottom: 70px; border-radius: 10px; background: rgba(255, 255, 255, 0.9); box-shadow: 0px 0px 15px #e6e6e6;}
#menuMobile .mnBody.mbNotUser{grid-template-columns: 1fr 1fr 1fr;}
#menuMobile .mnBody .mbItem{text-align: center; padding: 9px 0px; color: var(--text_black);}
#menuMobile .mnBody .mbItem.active{color: var(--text_blue);}
#menuMobile .mnBody .mbItem > div:first-child > div{width: 16px; height: 16px;}
#menuMobile .mnBody .mbItem > div:nth-child(2){font-family: 'semibold'; margin-top: 3px; font-size: 12px;}

#pageMenu{height: 40px; padding-top: 7px;}
#pageMenu .pmBar{width: min-content; white-space: nowrap; border-radius: 50px; left: 0px; right: 0px; z-index: 50; position: fixed; padding: 0px 15px; max-width: 100%; overflow: auto; box-sizing: border-box; -ms-overflow-style: none; scrollbar-width: none;}
#pageMenu .pmBar::-webkit-scrollbar{display: none;}
#pageMenu:not(.active) .pmBar{background: var(--bg_bluecalm);}
#pageMenu .pmBar > a{display: inline-block;}
#pageMenu .pmBar .pbItem{padding: 7px 10px; font-family: 'semibold'; color: var(--text_black);}
#pageMenu .pmBar .pbItem.active{color: var(--text_blue);}

.contentSpace{display: inline-block; width: 100%; margin-top: 20px;}

.mainLayout{max-width: 1200px;}
.mainLayout.ml900{max-width: 900px;}
.mainLayout.ml600{max-width: 600px;}
.mainLayout .distance{padding: 0px 25px;}

.layout{display: grid; grid-template-columns: 250px 1fr;}
.layout > div{width: 100%;}

.miniLayout{max-width: 900px; padding: 0px 25px; display: grid; grid-gap: 25px; margin-bottom: 25px;}
.miniLayout.mlLeft{grid-template-columns: 300px 1fr;}
.miniLayout.mlRight{grid-template-columns: 1fr 300px;}
.miniLayout.mlpm{margin-top: 15px;}
.miniLayout > div{width: 100%;}
.miniLayout.lmSticky .profile_side_sticky{position: sticky; top: 65px;}

.sideMenu{border-radius: 10px; border: 1px solid var(--bg_line);}
.sideMenu > a:not(:last-child) > div{border-bottom: 1px solid var(--bg_line);}
.sideMenu .smItem{padding: 10px 15px; color: var(--text_black); position: relative; grid-template-columns: 15px 1fr;}
.sideMenu .smItem.active:before{content: ''; position: absolute; width: 3px; height: 70%; background: var(--bg_blue); left: 0px; top: 7px;}
.sideMenu .smItem > div:first-child > div{width: 15px; height: 15px; background: red;}

.footerSpace{height: 20px;}

#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; min-width: 320px; background: var(--bg_white); width: 80%; margin-top: 50px; margin-bottom: 50px; box-shadow: 0 0 6px 0 rgb(161 161 161 / 21%); border-radius: 10px; overflow: hidden;}

.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; font-size: 15px;}
.popup_head_close > div:nth-child(2) > div{width: 15px; height: 15px;}

.popup_content_tab > div:first-child{white-space: nowrap; padding: 0px 15px 5px 15px;}
.popup_content_tab > div:first-child > div{display: inline-block; padding: 3px 13px; border-radius: 50px; cursor: pointer; transition: var(--transition);}
.popup_content_tab > div:first-child > div.active{background: var(--bg_blue); color: var(--text_white);}
.popup_content_tab > div:first-child > div:not(.active){box-shadow: inset 0px 0px 0px 1.5px var(--bg_silver);}
.popup_content_tab > div:first-child > div:not(:last-child){margin-right: 5px;}
.popup_content_tab > div:first-child > div:not(.active):hover{background: var(--bg_silvercalm);}
.popup_content_tab > div:nth-child(2){margin-top: 10px;}
.popup_content_tab > div:nth-child(2) > div:not(.active){display: none;}

.popup_list{list-style-type: none;}
.popup_list > li{padding: 15px 20px; cursor: pointer; transition: all 0.5s ease;}
.popup_list.plMini > li{padding: 10px 15px;}
.popup_list > li:not(:last-child){border-bottom: 1px solid var(--bg_line);}
.popup_list > li:hover{background: var(--bg_silvercalm);}
.popup_list > a > li{padding: 15px 20px; cursor: pointer; transition: all 0.5s ease; color: var(--text_black);}
.popup_list > a:not(:last-child) > li{border-bottom: 1px solid var(--bg_line);}
.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_list.plMini.plIcon li{grid-template-columns: 15px 1fr;}
.popup_list.plMini.plIcon li > div:first-child > div{width: 15px; height: 15px;}

.popup_login{display: grid; min-height: 200px; width: 650px; height: 351px; grid-template-columns: 40% 60%; align-items: center; background: var(--bg_white);}
.popup_login > div{width: 100%; height: 100%;}
.popup_login > div:first-child{background-size: 100%; position: relative; background-image: url('../../../images/background/popup_login.png');}
.popup_login > div:first-child > div{position: absolute; bottom: 25px; left: 35px;}
.popup_login > div:first-child > div > span{font-size: 40px; font-family: 'bold'; color: var(--text_white);}
.popup_login > div:first-child > div > span > span{padding: 2px 12px 2px 7px; background: rgba(0, 0, 0, 0.70);}
.popup_login .plBox{padding: 30px 40px 0px 40px;}
.popup_login .plBox > div:first-child{display: grid; overflow: hidden; grid-template-columns: 1fr 1fr; border: 1px solid var(--bg_line); border-radius: 10px;}
.popup_login .plBox > div:first-child > div{padding: 10px 0px; width: 100%; cursor: pointer; transition: var(--transition); text-align: center; font-weight: bold; position: relative;}
.popup_login .plBox > div:first-child > div:hover{background: var(--bg_silvercalm);}
.popup_login .plBox > div:first-child > div:before{content: ''; opacity: 0; position: absolute; bottom: 0px; left: 0px; width: 100%; height: 2px; background: var(--bg_blue);}
.popup_login .plBox > div:first-child > div.active:before{opacity: 1;}
.popup_login .plBox > div:nth-child(2) > div{display: none;}
.popup_login .plBox > div:nth-child(2) > div.active{display: block;}
.popup_login .plBox .pbTelco{margin-top: 15px;}
.popup_login .plBox .pbTelco > div{display: grid; grid-template-columns: 1fr 160px; align-items: center;}
.popup_login .plBox .pbTelco > div:not(:last-child){margin-bottom: 10px;}
.popup_login .plBox .pbTelco > div > div{width: 100%;}
.popup_login .plBox .pbTelco > div img{height: 15px; vertical-align: middle;}
.popup_login .plBox .btnOpt{margin-top: 15px; display: grid; grid-template-columns: 1fr 1fr; align-items: center;}
.popup_login .plBox .btnOpt > div{width: 100%;}
.popup_login .plBox .btnOpt > div:nth-child(2){text-align: right;}
.popup_login .plBox .btnOpt > div > a > div{display: inline-block;}
.popup_login .plBox .btnOpt .boRegist{padding: 5px 10px; border-radius: 5px; border: 1.5px solid var(--bg_blue);}

.popup_login_telco .popup_head_close{padding: 15px;}
.popup_login_telco .pltInfo{padding: 10px 15px; background: var(--bg_alert_red_calm);}
.popup_login_telco .pltInfo span{color: var(--text_blue); font-weight: bold; text-decoration: underline;}
.popup_login_telco .pltBody{padding: 15px 15px 20px 15px;}
.popup_login_telco .pltBody > div{display: none;}
.popup_login_telco .pltBody > div.active{display: block;}

.popupAuthor .paHead{padding: 15px;}
.popupAuthor .paHead > div:first-child{font-size: 20px; font-weight: bold;}
.popupAuthor .paList > a > div{padding: 10px 15px; display: grid; grid-template-columns: 35px 1fr 15px; grid-gap: 15px; align-items: center; border-bottom: 1px solid var(--bg_line);}
.popupAuthor .paList > a > div > div{width: 100%;}
.popupAuthor .paList > a > div > div:first-child > div{width: 35px; height: 35px;}
.popupAuthor .paList > a > div > div:nth-child(2) > div:first-child{font-size: 15px; font-weight: bold; color: var(--text_black);}
.popupAuthor .paList > a > div > div:nth-child(2) > div:nth-child(2){color: var(--text_silver); margin-top: 2px;}
.popupAuthor .paList > a > div > div:nth-child(3) > div{width: 15px; height: 15px;}
.popupAuthor .paBtn{padding: 15px;}
.popupAuthor .paBtn button{width: 100%;}

.popup_nsfw{width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); position: fixed; top: 0px; left: 0px; z-index: 50;}
.popup_nsfw > div{display: table; width: 100%; height: 100%; table-layout: fixed;}
.popup_nsfw > div > div{display: table-cell; vertical-align: middle;}
.popup_nsfw > div > div > div{width: 450px; padding: 25px 0px; background: var(--bg_white); border-radius: 10px; text-align: center;}
.popup_nsfw > div > div > div > div:first-child{width: 135px; height: 100px; background-image: url('../../../images/back_nsfw.png'); background-size: 100%;}
.popup_nsfw > div > div > div > div:nth-child(2){margin-top: 15px; font-size: 17px; font-family: 'bold';}
.popup_nsfw > div > div > div > div:nth-child(3){margin-top: 5px; padding: 0px 25px;}
.popup_nsfw > div > div > div > div:nth-child(4){margin-top: 15px;}

.popupPreviewPhoto{width: 100%; height: 100%; z-index: 62; position: fixed; top: 0px; left: 0px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); background-color: rgba(16, 16, 16, 0.7);}
.popupPreviewPhoto .pppClose{position: fixed; top: 15px; left: 15px; background: var(--bg_white); border-radius: 50%; width: 35px; height: 35px; z-index: 1; box-shadow: 0px 0px 5px var(--bg_shadow); border: 1.5px solid var(--bg_blue);}
.popupPreviewPhoto .pppClose > div{width: 15px; height: 15px; position: relative; top: 10px;}
.popupPreviewPhoto .pppBody{max-width: 800px; width: 100%; padding: 15px; height: 100%; position: absolute; left: 0px; right: 0px; box-sizing: border-box; display: flex; justify-content: center; align-items: center;}
.popupPreviewPhoto .pppBody > img{max-width: 100%; max-height: 100%;}

.popup_appreciation{margin-top: 15px;}
.popup_appreciation > div:first-child{margin-bottom: 10px;}
.popup_appreciation > div:first-child > div:first-child{font-weight: bold;}
.popup_appreciation .paItem{display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 15px;}
.popup_appreciation .paItem > div{width: 100%; background: var(--bg_white); text-align: center; cursor: pointer; font-weight: bold; border-radius: 10px; transition: var(--transition); border: 1px solid var(--bg_line); padding: 15px 0px;}
.popup_appreciation .paItem > div:hover{border: 1px solid var(--bg_blue);}
.popup_appreciation .paItem > div.active{border: 1px solid var(--bg_blue); box-shadow: 0px 0px 10px var(--shadow);}
.popup_appreciation .paItem > div > div:first-child > div{width: 25px; height: 25px; margin-bottom: 10px;}

.popupPremium{padding: 15px;}
.popupPremium > div:first-child{font-weight: bold;}
.popupPremium > div:nth-child(2){color: var(--text_silver);}
.popupPremium .ppFeature{display: grid; grid-template-columns: 1fr 1fr 1fr; margin-top: 20px;}
.popupPremium .ppFeature > div{width: 100%; text-align: center;}
.popupPremium .ppFeature > div > div:first-child{width: 35px; height: 35px;}
.popupPremium .ppFeature > div > div:nth-child(2){max-width: 90px; font-size: 12px; font-weight: bold; margin-top: 5px;}
.popupPremium > div:nth-child(4){margin-top: 25px;}

.popupImageCompare{display: grid; grid-template-columns: 1fr 1fr; grid-gap: 15px;}
.popupImageCompare > div{width: 100%;}
.popupImageCompare .picImg{padding-bottom: 100%; border-radius: 10px; background-color: var(--bg_silvercalm);}
.popupImageCompare > div > div:nth-child(2){text-align: center; font-weight: bold; margin-top: 5px; font-size: 11px; color: var(--text_silver);}

.popupMaxHeight{max-height: calc(100vh - 200px); overflow: auto;}

.dropdownIsMe{position: relative;}

.dropdownMenu {
  position: absolute;
  top: 100%;
  right: 0;
  list-style: none;
  margin: 0;
  display: none;
  z-index: 50;
  width: 150px;
}

.dropdownMenu li {
  padding: 7px 15px;
  cursor: pointer;
  transition: var(--transition);
}

.dropdownMenu li:hover {
  background-color: var(--bg_silvercalm);
}

#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;}

.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;}

.loadingWorkLike{position: fixed; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; z-index: 150;}
.loadingWorkLike > div{width: 250px; height: 250px; background-size: 100%; background-image: url('../../../images/loading_like.gif');}

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

.mainFeature{margin-top: 20px; border: 1px solid var(--bg_line); border-radius: 10px; display: flex; flex-wrap: nowrap; padding: 13px 10px 12px 10px; box-sizing: border-box; overflow: auto;}
.mainFeature > a{display: inline-block; color: var(--text_black); flex-grow: 1;}
.mainFeature > a:not(:last-child){margin-right: 10px;}
.mainFeature .mfBox{display: grid; background: var(--bg_white); grid-template-columns: 25px 1fr; grid-gap: 10px; border-radius: 10px; border: 1.5px solid var(--bg_blue); transition: var(--transition); align-items: center; padding: 7px 15px; box-sizing: border-box;}
.mainFeature .mfBox > div{width: 100%;}
.mainFeature .mfBox > div:first-child > div{height: 25px;}
.mainFeature .mfBox:hover{background: var(--bg_silvercalm);}
.mainFeature .mfBox:hover > div:nth-child(2){color: var(--text_blue);}

.title{display: inline-block; width: 100%; padding: 15px 0px;}
.title > div:first-child > div{font-size: 20px; font-family: 'semibold'; float: left;}
.title > div:nth-child(2){float: left; margin-left: 50px; position: relative;}
.title > div:nth-child(2):before{content: ''; position: absolute; left: -23px; top: 4px; width: 1px; height: 23px; background: var(--bg_blue);}
.headMore{font-weight: bold; padding-top: 4px; color: var(--text_blue);}
.headMoreIcon{display: none; position: relative; top: 3px;}
.headMoreIcon > div{width: 20px; height: 20px;}

.sideTitle{font-size: 15px; font-family: 'semibold'; margin-bottom: 10px;}

.statusPremium{padding: 10px 15px; border-radius: 20px; background: var(--bg_silvercalm); color: var(--text_blue); display: grid; grid-template-columns: 1fr 20px; align-items: center; box-sizing: border-box;}
.statusPremium.premium{background: var(--bg_bluesoft); grid-template-columns: 1fr 100px;}
.statusPremium:not(.premium){grid-gap: 10px;}
.statusPremium > div{width: 100%;}
.statusPremium > div:first-child{font-weight: bold; font-size: 13px;}
.statusPremium.premium > div:nth-child(2){text-align: right;}
.statusPremium:not(.premium) > div:nth-child(2) > div{width: 20px; height: 20px;}

.qrcode > div:first-child img{width: 100%;}
.qrcode > div:nth-child(2){text-align: center; padding: 10px 0px 12px 0px;}

.section_title{font-size: 17px; font-weight: bold;}

.page_head{margin-bottom: 15px;}
.page_head > div{display: inline-block; width: 100%;}
.page_head > div > div:first-child{font-size: 20px; font-weight: bold; float: left;}
.page_head > div > div:nth-child(2){float: right; margin-top: 7px;}
.page_head > div > div:nth-child(2) a{cursor: pointer;}

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

.page_title{padding: 25px 0px; font-size: 25px; font-family: 'semibold'; color: var(--text_blue);}
.page_title_mini{padding: 15px 0px 25px 0px; font-size: 25px; font-family: 'semibold'; text-align: center; color: var(--text_black);}

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

.page_info{padding: 15px; grid-template-columns: 25px 1fr; border-radius: 10px;}
.page_info > div{width: 100%;}
.page_info > div:first-child > div{width: 25px; height: 25px;}

.pageMore{padding: 15px 0px;}

.pageLogin{padding: 10px 15px; border-radius: 10px; background: var(--bg_silvercalm);}

.menu_horizontal{overflow: auto; position: relative; width: 100%; padding-top: 15px;}
.menu_horizontal .cnt_card{padding: 0px 0px; overflow: auto; margin-left: 0px; white-space: nowrap; font-size: 0px; -ms-overflow-style: none; scrollbar-width: none; display: flex;}
.menu_horizontal .cnt_card::-webkit-scrollbar{display: none;}
.menu_horizontal .cnt_card > a:not(:last-child){margin-right: 10px;}
.menu_horizontal .cnt_card > a.active{margin-right: 10px;}
.menu_horizontal .mhItem{padding: 7px 15px; font-weight: bold; color: var(--text_silver); border-radius: 50px; border: 1px solid var(--bg_line); font-size: 14px;}
.menu_horizontal .mhItem:hover{color: var(--text_black);}
.menu_horizontal .cnt_card > a.active{order: -1;}
.menu_horizontal .cnt_card > a.active .mhItem{color: var(--text_blue); border: 1px solid var(--bg_blue); background: var(--bg_blue); color: var(--text_white);}
.menu_horizontal:hover .scroll_card{opacity: 1;}
.menu_horizontal .scroll_card > div > div{width: 25px; height: 25px; top: 8%;}
.menu_horizontal .scroll_card > div > div > div{width: 17px; height: 17px; margin-top: 4.5px;}

.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 .tBody > span{display: none;}
.tab .tBody > span.active{display: block;}

.rightclick{display: none; z-index: 1000; position: absolute; overflow: hidden; border: 1px solid var(--bg_silver); white-space: nowrap; background: var(--bg_white); border-radius: 5px; padding: 0;}
.rightclick li{padding: 8px 12px; cursor: pointer; list-style-type: none; transition: all 0.2s ease; user-select: none;}
.rightclick li:hover{background-color: var(--bg_silvercalm);}

.dropdown{position: relative;}
.dropdown .dd_canvas{width: 225px; min-height: 10px; background: var(--bg_white); position: absolute; z-index: 5; right: 0px; box-shadow: 0px 0px 5px var(--bg_silver); list-style-type: none; border-radius: 5px; overflow: hidden; display: none;}
.dropdown .dd_canvas.top{bottom: 130%;}
.dropdown .dd_canvas.bottom{top: 130%;}
.dropdown .dd_canvas li{border-bottom: 0.5px solid var(--bg_line);}
.dropdown .dd_canvas li:last-child{border-bottom: 0px;}
.dropdown .dd_canvas .ddc_content{padding: 10px 15px;}
.dropdown .dd_canvas .ddc_content > div{width: 15px; height: 15px; float: left; margin-right: 10px; margin-top: 3px;}

.curationProcess{padding: 9px 15px 9px 15px; background: var(--bg_yellowcalm); border-radius: 5px;}
.curationProcess > div{display: table; table-layout: fixed; width: 100%;}
.curationProcess > div > div{display: table-cell; vertical-align: middle;}
.curationProcess > div > div:first-child{width: 17px;}
.curationProcess > div > div:first-child > div{height: 17px;}
.curationProcess > div > div:nth-child(2){padding-left: 15px; font-size: 13px}

.sidebox > div:first-child{padding: 15px 0px; font-size: 20px; font-family: 'bold'; border-bottom: 1px solid var(--bg_line);}
.sidebox.first > div:first-child{padding: 0px 0px 15px 0px;}

.emoticon{position: relative; cursor: pointer;}
.emoticon > .emt{position: absolute; width: 230px; z-index: 10; overflow: hidden; background: var(--bg_white); box-shadow: 0px 0px 10px var(--bg_silver); border-radius: 10px; top: 100%; right: 0px;}
.emoticon > .emt.emt_top {bottom: 100%; top: unset;}
.emoticon.emt_left > .emt{left: 0px; right: unset;}
.emoticon > .emt .eOpt{width: 100%; white-space: nowrap; font-size: 0px; background: var(--bg_silvercalm); overflow: auto;}
.emoticon > .emt .eOpt > div{display: inline-block; height: 41px; width: 40px; cursor: pointer; position: relative;}
.emoticon > .emt .eOpt > div > div:before{content: ''; transition: all 0.2s ease; bottom: 0px; left: 0px; position: absolute; height: 2px; background: var(--bg_blue); opacity: 0; width: 100%;}
.emoticon > .emt .eOpt > div:hover:not(.active) > div:before{opacity: 1; background: var(--bg_silver);}
.emoticon > .emt .eOpt > div.active > div:before{opacity: 1;}
.emoticon > .emt .eOpt > div > div{width: 25px; height: 26px; background-size: cover; margin-top: 7px;}
.emoticon > .emt .eBody{height: 240px; overflow: auto; display: grid; grid-template-columns: auto auto auto auto auto;}
.emoticon > .emt .eBody > div.loadingEmoticon{padding-top: 90px; color: var(--text_silver);}
.emoticon > .emt .eBody > div:not(.loadingEmoticon){width: 100%; height: 44px; transition: all 0.2s ease; cursor: pointer;}
.emoticon > .emt .eBody > div:not(.loadingEmoticon):hover{box-shadow: inset 0px 0px 0px 1px var(--bg_blue);}
.emoticon > .emt .eBody > div:not(.loadingEmoticon) > div{width: 30px; height: 31px; background-size: cover; margin-top: 6.5px;}

.stickerBox .sbHead{padding: 15px; display: grid; grid-template-columns: 1fr 25px; align-items: center; box-sizing: border-box;}
.stickerBox .sbHead > div{width: 100%;}
.stickerBox .sbHead > div:first-child{font-size: 17px; font-weight: bold;}
.stickerBox .sbHead > div:nth-child(2) > div{width: 15px; height: 15px;}
.stickerBox .sbMenu{white-space: nowrap; overflow: auto; padding-bottom: 10px;}
.stickerBox .sbMenu > div{display: inline-block; cursor: pointer; padding: 2px 5px 10px 5px; position: relative; transition: var(--transition); border-radius: 20px;}
.stickerBox .sbMenu > div:not(:last-child){margin-right: 10px;}
.stickerBox .sbMenu > div:first-child{margin-left: 15px;}
.stickerBox .sbMenu > div:last-child{margin-right: 15px;}
.stickerBox .sbMenu > div:before{content: ''; transition: var(--transition); position: absolute; bottom: 0px; left: 0px; width: 100%; height: 2px; background: var(--bg_blue); opacity: 0;}
.stickerBox .sbMenu > div:hover:not(.active):before{opacity: 1; background: var(--bg_silver);}
.stickerBox .sbMenu > div.active:before{opacity: 1;}
.stickerBox .sbMenu > div > div{width: 25px; height: 25px;}
.stickerBox .sbContent > div{display: none;}
.stickerBox .sbContent > div.active{display: block;}
.stickerBox .sbContent > div > div{display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; grid-gap: 15px; padding: 15px;}
.stickerBox .sbContent > div > div > div{width: 100%;}
.stickerBox .sbContent .scItem{padding-bottom: 100%; cursor: pointer; transition: var(--transition);}
.stickerBox .sbContent .scItem:hover{box-shadow: 0px 0px 0px 1.5px var(--bg_line); border-radius: 5px;}

.list_menu{border-radius: 10px; border: 1px solid var(--bg_line); overflow: hidden;}
.list_menu .lmItem{padding: 15px; display: grid; grid-template-columns: 20px 1fr; grid-gap: 15px; box-sizing: border-box; align-items: center; transition: var(--transition); position: relative; cursor : pointer;}
.list_menu .lmItem:before{content: ''; position: absolute; right: 10px; top: 10px; width: 3px; height: 64%; border-radius: 10px; background: var(--bg_blue); opacity: 0; transition: var(--transition);}
.list_menu > *:not(:last-child) > div{border-bottom: 1px solid var(--bg_line);}
.list_menu .lmItem:hover{background: var(--bg_silvercalm);}
.list_menu .lmItem.active:before{opacity: 1;}
.list_menu .lmItem > div{width: 100%;}
.list_menu .lmItem > div:first-child > div{width: 20px; height: 20px;}
.list_menu .lmItem > div:nth-child(2){color: var(--text_black);}
.list_menu .lmItem > div:nth-child(2) .liTag{padding: 1px 4px 1px 4px; border-radius: 3px; background: var(--bg_red); color: var(--text_white); font-size: 10px;}
.list_menu .lmItem.disabled > div:nth-child(2) > span{background: var(--bg_silvercalm); color: var(--text_silver);}

.list_hashtag{height: 54px; overflow: hidden; position: relative;}
.list_hashtag .lhOpt{width: 100%; height: 0px; position: relative;}
.list_hashtag .lhOpt > div{position: absolute; top: 0px; width: 75px; height: 55px;}
.list_hashtag .lhOpt > div > div{width: 40px; height: 40px; border: 3px solid var(--bg_blue); border-radius: 50%; margin-top: 4px; background: var(--bg_white); opacity: 0; transition: all 0.2s ease; cursor: pointer;}
.list_hashtag:hover > div:first-child > div > div{opacity: 1;}
.list_hashtag .lhOpt > div > div > div{width: 20px; height: 20px; margin-top: 9.5px;}
.list_hashtag .lhOpt > div:first-child{left: 0px; display: none;}
.list_hashtag .lhOpt > div:first-child > div{float: right;}
.list_hashtag .lhOpt > div:last-child{right: 0px;}
.list_hashtag .lhOpt > div:last-child > div{float: left;}
.list_hashtag .lhBody{white-space: nowrap; font-size: 0px; overflow: auto; height: 70px;}
.list_hashtag .lhBody .lbItem{display: inline-block; padding: 5px 15px 6px 15px; border-radius: 20px; background: var(--bg_blue); color: var(--text_white); font-size: 15px; margin: 10px 0px; margin-right: 10px; transition: var(--transition);}
.list_hashtag .lhBody > a:last-child > div{margin-right: 0px;}
.list_hashtag .lhBody .lbItem:hover{background: var(--bg_silvercalm); box-shadow: inset 0px 0px 0px 1.5px var(--bg_blue); color: var(--text_blue);}

.list_linked{margin-bottom: 25px;}
.list_linked > div:first-child{font-size: 20px; font-weight: bold;}
.list_linked > div:nth-child(2){margin-top: 15px;}
.list_linked > div:nth-child(2) > a > div{padding: 15px 0px 17px 0px; color: var(--text_black);}
.list_linked > div:nth-child(2) > a:not(:last-child) > div{border-bottom: 1px solid var(--bg_line);}
.list_linked > div:nth-child(2) > a > div > div{display: table; table-layout: fixed; width: 100%;}
.list_linked > div:nth-child(2) > a > div > div > div{display: table-cell; vertical-align: middle;}
.list_linked > div:nth-child(2) > a > div > div > div:first-child{width: 70px;}
.list_linked > div:nth-child(2) > a > div > div > div:first-child > div{background-color: var(--bg_silvercalm); border-radius: 5px;}
.list_linked > div:nth-child(2) > a > div.novel > div > div:first-child > div{padding-bottom: 150%;}
.list_linked > div:nth-child(2) > a > div.comic > div > div:first-child > div{padding-bottom: 100%;}
.list_linked > div:nth-child(2) > a > div > div > div:nth-child(2){padding-left: 15px;}
.list_linked > div:nth-child(2) > a > div > div > div:nth-child(2) > div:first-child > span{padding: 2px 7px; background: var(--bg_silvercalm); border-radius: 3px; font-size: 11px;}
.list_linked > div:nth-child(2) > a > div > div > div:nth-child(2) > div:nth-child(2){margin-top: 10px; font-weight: bold;}
.list_linked > div:nth-child(2) > a:hover > div > div > div:nth-child(2) > div:nth-child(2){color: var(--text_blue);}

.liveFloating{position: fixed; padding: 10px 15px; bottom: 25px; left: 25px; cursor: pointer; background: var(--bg_red); color: var(--text_white); z-index: 50; border-radius: 50px; display: grid; grid-template-columns: 100px min-content; grid-gap: 15px; align-items: center;}
.liveFloating > div{width: 100%;}
.liveFloating .lfTag{display: inline-block;}
.liveFloating .lfTag > div{display: grid; color: var(--text_red); font-weight: bold; font-size: 11px; background: var(--bg_white); grid-template-columns: 7px 1fr; grid-gap: 5px; align-items: center; padding: 3px 10px; border-radius: 50px;}
.liveFloating .lfTag > div > div{width: 100%;}
.liveFloating .lfTag > div > div:first-child > div{width: 7px; height: 7px; border-radius: 50px; background: var(--bg_red);}
.liveFloating > div:nth-child(2){white-space: nowrap; max-width: 250px;}

.verify_icon > span{display: inline-flex;}
.verify_icon > span > i{background-image: url('../../../images/icon/all/verify.png'); background-size: 100%; transition:all 0.2s ease; cursor: pointer;}
.verify_icon.mini > span > i{width: 10px; height: 10px; margin-left: 2px;}
.verify_icon.medium > span > i{width: 17px; height: 17px;}
.verify_icon.medium:hover > span > i{transform: rotate(360deg);}

.introPage{width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; z-index: 100; background: var(--bg_blue); display: none;}
.introPage > div{width: 100%; height: 90%; display: table; table-layout: fixed;}
.introPage > div > div{display: table-cell; vertical-align: middle;}
.introPage .ipArea{width: 550px;}
.introPage .ipArea .iaBox{height: 250px; background: var(--bg_white); border-radius: 15px; overflow: hidden; position: relative;}
.introPage .ipArea .iaBox .ibItem{display: none;}
.introPage .ipArea .iaBox .ibItem.active{display: block;}
.introPage .ipArea .iaBox .ibItem .iiBg{width: 214px; height: 250px; position: absolute; left: 0px; top: 0px;}
.introPage .ipArea .iaBox .ibItem .iiFocus{font-size: 70px; font-family: 'bold'; text-align: center; position: relative; top: 65px; left: 55px;}
.introPage .ipArea .iaBox .ibItem .iiEnd{font-size: 25px; font-family: 'bold'; text-align: center; position: relative; top: 100px;}
.introPage .ipArea .iaBox .ibItem .iiContent{position: relative; top: 52px; padding: 0px 25px 0px 195px;}
.introPage .ipArea .iaBox .ibItem .iiContent .icTitle{font-family: 'bold'; font-size: 20px; margin-bottom: 10px;}
.introPage .ipArea .ipBtn{margin-top: 15px; text-align: right;}

/**ADMIN CONTROL**/
.admin_button{position: fixed; bottom: 25px; right: 25px; z-index: 60; padding: 10px 15px; display: grid; grid-template-columns: 15px 1fr; background: rgba(0, 0, 0, 0.55); color: var(--text_white); grid-gap: 10px; align-items: center; font-weight: bold; border-radius: 10px; box-shadow: 0px 0px 10px var(--shadow); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); cursor: pointer;}
.admin_button > div{width: 100%;}
.admin_button > div:first-child > div{width: 15px; height: 15px;}

.admin_popup{}
.admin_popup .apHead{padding: 10px 15px; background: var(--bg_silvercalm);}
.admin_popup .apHead > div:not(:last-child){margin-bottom: 3px;}
.admin_popup .apContent{display: grid; grid-template-columns: 1fr 1fr; grid-gap: 15px; padding: 15px; box-sizing: border-box;}
.admin_popup .apContent > div{width: 100%; padding: 15px 0px; text-align: center; cursor: pointer; transition: var(--transition); border: 1px solid var(--bg_line); border-radius: 10px;}
.admin_popup .apContent > div:hover{border: 1px solid var(--bg_blue);}
.admin_popup .apContent > div > div:first-child{width: 25px; height: 25px;}
.admin_popup .apContent > div > div:nth-child(2){margin-top: 5px; font-weight: bold; font-size: 11px;}

/**DISCOVER**/
.disc_info_popup{min-height: 100px;}
.disc_info_popup > img{width: 100%;}

.dis_shuffle{position: fixed; bottom: 20px; right: 20px; padding: 10px 15px; display: grid; grid-template-columns: 20px 1fr; grid-gap: 10px; align-items: center; background: var(--bg_blue); border-radius: 10px; z-index: 45; color: var(--text_white); cursor: pointer;}
.dis_shuffle > div{width: 100%;}
.dis_shuffle > div:first-child > div{width: 20px; height: 20px;}
.dis_shuffle > div:nth-child(2) > div:first-child{font-weight: bold;}
.dis_shuffle > div:nth-child(2) > div:nth-child(2){font-size: 11px; color: var(--text_silver);}

.dis_shuffle_popup{text-align: center; padding: 10px 15px;}
.dis_shuffle_popup > div:first-child > div{width: 90px; height: 90px;}
.dis_shuffle_popup > div:nth-child(2){margin: 10px 0px;}

.disc_slider {
  position: relative;
  width: 100%;
  border-radius: 15px;
  overflow: hidden;
}

.disc_slider .dsItem {
  display: flex;
  transition: transform 0.5s ease;
}

.disc_slider .dsItem > div {
  flex: 0 0 100%;
}

.disc_slider .dsItem .diBox1 {
  width: 100%;
  background: var(--bg_silver);
  padding-bottom: 34%;
  background-size: cover;
  background-position: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.disc_slider .dsItem .diBox2 {
  width: 100%;
  background: var(--bg_silver);
  padding-bottom: 50%;
  background-size: cover;
  background-position: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  display: none;
}

.disc_slider .dsDot {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}

.disc_slider .dsDot div {
  width: 12px;
  height: 12px;
  background: var(--bg_silvercalm);
  box-shadow: 0px 0px 0px 1px var(--bg_silvercalm);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s;
}

.disc_slider .dsDot div.active {
  background: var(--bg_blue);
}

.disc_info{padding: 20px 25px 23px 25px; margin-top: 25px; background: var(--bg_white); border: 1.5px solid var(--bg_line); border-radius: 10px;}
.disc_info > div{display: grid; grid-template-columns: 150px 1fr; grid-gap: 25px;}
.disc_info > div > div{width: 100%;}
.disc_info .di_banner{height: 150px; background-color: var(--bg_silvercalm); border-radius: 10px;}
.disc_info .di_info > div:first-child{font-size: 17px; font-family: 'bold';}
.disc_info .di_info > div:nth-child(2){margin-top: 10px;}
.disc_info .di_info > div:nth-child(3){margin-top: 15px;}

.disc_genre{padding-bottom: 30px; margin-top: 20px; background: var(--bg_silvercalm);}

.disc_reading{padding-top: 20px; margin-bottom: 25px;}
.disc_reading > div{width: 100%; display: grid; grid-template-columns: 170px 1fr; grid-gap: 25px;}
.disc_reading > div > div{width: 100%;}
.disc_reading > div > div:first-child > div{padding-bottom: 100%; border-radius: 10px; background-color: var(--bg_silvercalm);}
.disc_reading .dbContent{padding-top: 15px;}
.disc_reading .dbContent > div:first-child{font-size: 20px; font-family: 'semibold';}
.disc_reading .dbContent > div:nth-child(2){margin-top: 5px;}
.disc_reading .dbContent > div:nth-child(3){margin-top: 15px; color: var(--text_silver);}

.disc_head{margin-bottom: 15px; padding-bottom: 45px; position: relative; background-size: cover;}
.disc_head:before{content: ''; background-image: linear-gradient(to bottom, transparent, var(--bg_white)); position: absolute; bottom: 0px; left: 0px; width: 100%; height: 100%;}
.disc_head > div{position: relative; z-index: 1;}

.disc_official{padding-bottom: 45px; background: var(--bg_orange);}
.disc_official .title > div:first-child > div{color: var(--text_white);}

/**TRENDING**/
.trend_head{padding: 30px 0px 40px 0px; text-align: center;}
.trend_head > div:first-child{font-size: 25px; font-weight: bold;}
.trend_head > div:last-child{margin-top: 5px; font-size: 15px;}

/**BENEFIT**/
.benefit_head{background: var(--bg_blue); position: relative;}
.benefit_head:before{content: ''; width: 100%; height: 50px; background: var(--bg_bluesoft); position: absolute; bottom: 0px; left: 0px;}
.benefit_head section{position: relative; height: 150px;}
.benefit_head .bhDesign > div:first-child{position: absolute; bottom: 0px; right: 25px; width: 115px; height: 125px; background-image: url('../../../images/background/premium.png'); background-size: 100%;}
.benefit_head .bhContent{color: var(--text_white); padding-top: 25px;}
.benefit_head .bhContent > div:first-child{font-size: 15px;}
.benefit_head .bhContent > div:nth-child(2){font-size: 25px; font-weight: bold;}

/**N**/
.n_layout{display: grid; grid-template-columns: 1fr 1fr; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; min-width: 940px;}
.n_layout > div{width: 100%; padding-top: 55px; position: relative;}
.n_layout > div:first-child{background: var(--bg_blue); overflow: hidden;}
.n_layout .nlBg > div{position: absolute; background-size: 100%; width: 350px; height: 367px;}
.n_layout .nlBg > div:first-child{top: 0px; left: 0px; background-image: url('../../../images/background/auth_bg_1.png');}
.n_layout .nlBg > div:nth-child(2){bottom: 0px; right: 0px; background-image: url('../../../images/background/auth_bg_2.png');}
.n_layout .nlWork{position: relative; z-index: 1;}
.n_layout .nlWork > div:first-child{width: 180px;}
.n_layout .nlWork > div:first-child > div{padding-bottom: 150%; background-color: var(--bg_silvercalm); border-radius: 5px;}
.n_layout .nlWork > div:nth-child(2){margin-top: 25px; text-align: center; color: var(--text_white);}
.n_layout .nlWork > div:nth-child(2) > div:first-child{font-size: 17px; font-weight: bold;}
.n_layout .nlWork > div:nth-child(2) > div:nth-child(2){margin-top: 5px;}
.n_layout .nlContent{width: 100%; height: 100%; top: 0px; left: 0px; display: grid; align-items: center;}
.n_layout .nlContent > div{width: 100%;}
.n_layout .nlBox{padding: 25px; max-width: 450px;}
.n_layout .nlBox.register{overflow: auto;}
.n_layout .nbTitle{font-size: 25px; font-weight: bold; margin-bottom: 15px;}
.n_layout .nbOpt{margin-bottom: 15px;}
.n_layout .nbOpt > div{display: inline-block; padding: 0px 20px 8px 20px; position: relative; font-weight: bold; cursor: pointer;}
.n_layout .nbOpt > div.active{color: var(--text_blue);}
.n_layout .nbOpt > div.active:before{content: ''; position: absolute; bottom: 0px; left: 0px; width: 100%; height: 2px; background: var(--bg_blue);}
.n_layout .nbOpt > div:hover{color: var(--text_blue);}
.n_layout .nbOpt > div > span{padding: 2px 10px 3px 10px; border: 1.5px solid var(--bg_blue); border-radius: 50px;}

.n_input{position: relative;}
.n_input > div{position: absolute; left: 0px; top: 50px; z-index: 10; border-radius: 5px; padding: 10px 15px 11px 15px; font-size: 11px; width: 200px; background: black; color: var(--text_white); display: none;}
.n_input > div:before{content: ''; position: absolute; left: 3px; top: -10px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid black;}
.n_input > input:focus ~ div{display: block;}

.nl_title{text-align: center; font-size: 15px; font-weight: bold;}

/**DASHBOARD**/
.dash_boost_parent{overflow: auto; width: 100%; -ms-overflow-style: none; scrollbar-width: none;}
.dash_boost_parent::-webkit-scrollbar{display: none;}
.dash_boost{width: 100%; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; padding: 20px 0px; min-width: 780px;}
.dash_boost .dbItem{padding-bottom: 100%; border-radius: 100%; transition: var(--transition); background-color: var(--bg_silvercalm); position: relative;}
.dash_boost .dbItem:not(.dbBtn):hover{box-shadow: inset 0px 0px 0px 2px var(--bg_blue);}
.dash_boost .dbItem.dbBtn{background: var(--bg_blue); cursor: pointer;}
.dash_boost .dbItem .diIcon{width: 35px; height: 35px; position: absolute; left: 0px; right: 0px; top: 23%;}
.dash_boost .dbItem.dbBtn:hover .diIcon{transform: scale(0.8);}

.dash_warning{padding: 15px 20px 16px 20px; margin-bottom: 20px; background: var(--bg_yellowcalm);}
.dash_warning > div{display: grid; grid-template-columns: 25px 1fr; grid-gap: 25px; align-items: center;}
.dash_warning > div > div{width: 100%;}
.dash_warning > div > div:first-child{width: 25px;}
.dash_warning > div > div:first-child > div{height: 25px;}

.dash_menu{grid-template-columns: 1fr 1fr; margin-bottom: 15px; border: 1px solid var(--bg_line); background: var(--bg_silvercalm); overflow: hidden; border-radius: 10px;}
.dash_menu > a{text-align: center;}
.dash_menu > a > div{display: inline-block; padding: 13px 0px; position: relative;}
.dash_menu > a > div.active:before{content: ''; position: absolute; height: 2px; width: 50px; background: var(--bg_blue); bottom: 0px; left: calc(50% - 22px);}
.dash_menu .dmBox{grid-template-columns: 15px 1fr;}
.dash_menu .dmBox > div{color: var(--text_black); font-weight: bold; transition: var(--transition);}
.dash_menu .dmBox > div:first-child > div{width: 15px; height: 15px;}
.dash_menu > a:hover .dmBox > div{color: var(--text_silver);}

/**SEARCH**/
.s_mainbox{background: var(--bg_silvercalm); margin-bottom: 15px; padding: 15px 20px; border-radius: 10px; overflow: hidden;}
.s_mainbox .smInput{background: var(--bg_white); box-shadow: 0px 0px 0px 1px var(--shadow); overflow: hidden; border-radius: 10px; position: relative;}
.s_mainbox .smInput input{width: 100%; border: none; padding: 9px 25px 10px 45px;}
.s_mainbox .smInput .siIcon{position: absolute; left: 5px; top: 0px; z-index: 5; height: 100%; width: 37px; transition: all 0.2s ease;}
.s_mainbox .smInput .siIcon > div{width: 17px; height: 17px; margin-top: 7px;}

.s_menu{grid-template-columns: 1fr 1fr 1fr 1fr; border-radius: 10px; border: 1px solid var(--bg_line);}
.s_menu > div{padding: 7px 0px; text-align: center; cursor: pointer; position: relative; font-family: 'semibold';}
.s_menu > div:not(:last-child):before{content: ''; position: absolute; right: 0px; top: 0px; height: 100%; width: 0.5px; background: var(--bg_line);}
.s_menu > div.active{background: var(--bg_silvercalm);}

.s_head{padding: 15px 0px; border-bottom: 1px solid var(--bg_line); margin-bottom: 15px;}
.s_search_list > div{}
.s_search_list > div:not(:last-child){margin-bottom: 15px; border-bottom: 1px solid var(--bg_silver); padding-bottom: 15px;}
.s_search_list > div > div:first-child{font-size: 15px; font-family: 'bold';}
.s_search_list > div > div:nth-child(2){margin-top: 5px; margin-bottom: 10px;}
.s_search_list .ssl_tags{white-space: no-wrap;}
.s_search_list .ssl_tags > a{display: inline-block;}
.s_search_list .ssl_tags > a > div{padding: 4px 8px 5px 8px; border-radius: 5px; background: var(--bg_blue); margin: 5px 3px; color: var(--text_white); transition: var(--transition); max-width: 350px;}
.s_search_list .ssl_tags > a > div:hover{color: var(--text_blue); background: var(--bg_silvercalm); box-shadow: inset 0px 0px 0px 1.5px var(--bg_blue);}
.s_search_list .ssl_users{}
.s_search_list .ssl_users > a > div{padding: 10px 0px;}
.s_search_list .ssl_users > a:not(:last-child) > div{border-bottom: 1px solid var(--bg_silvercalm);}
.s_search_list .ssl_users > a > div > div{display: table; table-layout: fixed; width: 100%;}
.s_search_list .ssl_users > a > div > div > div{display: table-cell; vertical-align: middle;}
.s_search_list .ssl_users > a > div > div > div:first-child{width: 35px;}
.s_search_list .ssl_users > a > div > div > div:first-child > div{height: 35px; background-color: var(--bg_silvercalm); border-radius: 50%;}
.s_search_list .ssl_users > a > div > div > div:nth-child(2){padding-left: 10px;}
.s_search_list .ssl_users > a > div > div > div:nth-child(2) > div:first-child{font-weight: bold;}
.s_search_list .ssl_users > a > div > div > div:nth-child(2) > div:nth-child(2){margin-top: 3px; color: var(--text_silver); font-size: 11px;}
.s_search_list .ssl_work{}
.s_search_list .ssl_work > a:not(:last-child) > div{border-bottom: 1px solid var(--bg_silvercalm);}
.s_search_list .ssl_work .swItem{padding: 10px 0px; grid-template-columns: 35px 1fr; color: var(--text_black);}
.s_search_list .ssl_work .swItem .siCover > div{padding-bottom: 150%; background-color: var(--bg_silvercalm); border-radius: 5px;}
.s_search_list .ssl_work .swItem .siBody > div:first-child{font-weight: bold;}
.s_search_list .ssl_work .swItem .siBody > div:nth-child(2){margin-top: 3px; color: var(--text_silver); font-size: 11px;}
.s_search_list .ssl_articles{}
.s_search_list .ssl_articles > a > div{padding: 10px 0px;}
.s_search_list .ssl_articles > a:not(:last-child) > div{border-bottom: 1px solid var(--bg_silvercalm);}
.s_search_list .ssl_articles > a > div > div{display: table; table-layout: fixed; width: 100%;}
.s_search_list .ssl_articles > a > div > div > div{display: table-cell; vertical-align: middle;}
.s_search_list .ssl_articles > a > div > div > div:first-child{width: 65px;}
.s_search_list .ssl_articles > a > div > div > div:first-child > div{padding-bottom: 75%; background-color: var(--bg_silvercalm); border-radius: 5px;}
.s_search_list .ssl_articles > a > div > div > div:nth-child(2){padding-left: 10px; font-weight: bold;}

/**POST**/
.post_header{display: table; width: 100%; table-layout: fixed;}
.post_header > div{display: table-cell; vertical-align: middle;}
.post_header > div:first-child{width: 50px;}
.post_header > div:nth-child(2){padding-left: 10px;}
.post_header > div:last-child{width: 175px;}
.post_header > div:last-child button{float: right;}
.post_header .ph_photo{width: 40px; height: 40px; background-color: var(--bg_silvercalm); border-radius: 50%;}
.post_content{padding: 20px 0px; min-height: 150px;}
.post_video > div:first-child{min-height: 300px;}
.post_video > div:nth-child(2){padding: 15px 30px 0px 30px; font-size: 17px; font-family: 'bold';}
.post_video > div:last-child{padding: 10px 30px 15px 30px}
.post_photo{min-height: 100px; display: block; margin: 0 auto;}
.post_photo img{max-width: 100%;}
.post_article > div:first-child{padding: 25px 15px; text-align: center;}
.post_article > div:first-child > h1{font-size: 25px;}
.post_article > div:nth-child(2){min-height: 200px;}
.post_article > div:nth-child(2) > img{width: 100%;}
.post_article > div:nth-child(3){padding: 20px;}
.post_article > div:nth-child(4){padding: 0px 20px 20px 20px;}
.post_listicle .pl_main > div:first-child{padding: 25px 15px; text-align: center;}
.post_listicle .pl_main > div:first-child > h1{font-size: 25px;}
.post_listicle .pl_main > div:nth-child(2){min-height: 200px;}
.post_listicle .pl_main > div:nth-child(2) > img{width: 100%;}
.post_listicle .pl_main > div:nth-child(3){padding: 15px 20px 0px 20px;}
.post_listicle .pl_main > div:nth-child(4){padding: 20px 40px; margin: 15px 0px 0px 0px; list-style-type: none;}
.post_listicle .pl_main > div:nth-child(4) > div{margin-bottom: 3px;}
.post_listicle .pl_main > div:nth-child(4) > li{padding: 4px 0px;}
.post_listicle .pl_main > div:nth-child(5){padding: 15px 20px 0px 20px;}
.post_listicle .pl_main > div:nth-child(6){padding: 0px 20px 20px 20px;}
.post_listicle .pl_content > div:first-child{padding: 15px 20px 20px 20px;}
.post_listicle .pl_content > div:nth-child(2) img{width: 100%;}
.post_listicle .pl_content > div:nth-child(2) div{padding: 5px 20px 0px 20px;}
.post_listicle .pl_content > div:last-child{padding: 15px 20px 20px 20px;}
.post_sharework{padding: 10px; border: 1px solid var(--bg_line); border-radius: 5px;}
.post_sharework .psBody{display: grid; grid-template-columns: 65px 1fr; grid-gap: 15px;}
.post_sharework .psBody > div{width: 100%;}
.post_sharework .psBody > div:first-child > div{padding-bottom: 150%; border-radius: 5px; background-color: var(--bg_silvercalm);}
.post_sharework .psBody > div:nth-child(2){padding-top: 5px;}
.post_sharework .psBody > div:nth-child(2) > div:first-child > span{font-size: 9px; color: var(--text_white); padding: 2px 5px; border-radius: 3px;}
.post_sharework .psBody > div:nth-child(2) > div:nth-child(2){margin-top: 3px; font-size: 15px; font-weight: bold;}
.post_sharework .psBody > div:nth-child(2) > div:nth-child(3){font-size: 11px; color: var(--text_silver);}
.post_poetry{padding: 20px 20px 25px 20px;}
.post_poetry > div:first-child{font-size: 20px; font-family: 'bold';}
.post_poetry > div:nth-child(2){margin-top: 10px; font-size: 17px;}
.post_slider{height: 450px; background: var(--bg_black); position: relative;}
.post_slider > div:first-child{display: table; table-layout: fixed; width: 100%;}
.post_slider > div:first-child > div{height: 450px; text-align: center; display: table-cell; vertical-align: middle; width: 545px;}
.post_slider > div:first-child > div > img{max-width: 100%; max-height: 100%; display: none;}
.post_slider > div:first-child > div > img.show{display: block;}
.post_slider > div:nth-child(2){width: 100%; height: 100%; position: absolute; top: 0px; z-index: 5;}
.post_slider > div:nth-child(2) > div{width: 100%; height: 40px; position: absolute; top: 200px;}
.post_slider > div:nth-child(2) > div > div{width: 40px; height: 40px; background: var(--bg_white); border-radius: 50%; opacity: 0; cursor: pointer;}
.post_slider:hover > div:nth-child(2) > div > div{opacity: 1;}
.post_slider:hover > div:nth-child(2) > div > div.disabled{opacity: 0.2;}
.post_slider > div:nth-child(2) > div > div:hover{box-shadow: 0px 0px 0px 3px var(--bg_blue);}
.post_slider > div:nth-child(2) > div > div:first-child{float: left; margin-left: 25px;}
.post_slider > div:nth-child(2) > div > div:last-child{float: right; margin-right: 25px;}
.post_slider > div:nth-child(2) > div > div > div{width: 20px; height: 20px; position: relative; top: 9px;}
.post_slider > div:nth-child(3){position: absolute; top: 15px; right: 15px; background: var(--bg_blue); color: var(--text_white); padding: 5px 10px; font-size: 11px; border-radius: 4px;}

/**COMMENT**/
.commentLayout{min-height: 400px; padding: 15px;}
.commentLayout .clInput{}
.commentLayout .clTitle{font-size: 17px; font-weight: bold; margin: 20px 0px 10px 0px;}
.commentLayout .clContent{}

.commentbox{background: var(--bg_silvercalm); border: 1px solid var(--bg_line); border-radius: 15px; padding: 10px 15px; display: grid; grid-template-columns: 20px 1fr min-content; align-items: end; grid-gap: 15px;}
.commentbox > div{width: 100%;}
.commentbox .cbEmot > div{width: 20px; height: 20px; margin-bottom: 6px;}
.commentbox .cbInput > div{font-size: 17px; outline: none; margin-bottom: 3px;}
.commentbox .cbOpt{display: grid; grid-template-columns: 1fr 1fr; grid-gap: 15px; align-items: center;}
.commentbox .cbOpt > div{width: 100%;}
.commentbox .cbOpt .cbBtnMini{width: 20px; height: 20px;}

/**CART**/
.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;}

/**TRANSACTION**/
.trans_layout{display: grid; grid-template-columns: 250px 1fr; grid-gap: 25px; margin-top: 25px;}
.trans_layout > div{width: 100%;}
.trans_layout .tlLeft{position: sticky; top: 75px;}
.trans_layout .tltitle{font-size: 20px; font-weight: bold;}

/**WALLET**/
.wallet_box{padding: 25px; background-color: var(--bg_blue); background-size: cover; background-image: url('../../../images/background/wallet_background.png'); border-radius: 10px; color: var(--text_white);}
.wallet_box .wbHead{display: grid; grid-template-columns: 1fr max-content; grid-gap: 10px; align-items: center;}
.wallet_box .wbHead > div{width: 100%;}
.wallet_box .wbHead > div:first-child > span:first-child{font-size: 40px; margin-right: 10px; font-family: 'bold';}
.wallet_box .wbHead > div:first-child > span:nth-child(2){font-size: 20px; font-weight: bold;}

.wallet_info .wiHistory > div:first-child{font-size: 17px; font-weight: 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);}

.wallet_premium_status{overflow: hidden; border-radius: 10px; background: var(--bg_blue); border: 1px solid var(--bg_blue);}
.wallet_premium_status .wpsHead{background: var(--bg_white); border-radius: 0px 0px 10px 10px; padding: 10px 15px;}
.wallet_premium_status .wpsHead.active{background: var(--bg_bluesoft);}
.wallet_premium_status .wpsHead > div:first-child{font-weight: bold; font-size: 15px;}
.wallet_premium_status .wpsHead > div:nth-child(2) b{color: var(--text_blue);}
.wallet_premium_status .wpsBtn .wbItem{padding: 10px 15px; box-sizing: border-box; display: grid; grid-template-columns: 1fr 15px; align-items: center; color: var(--text_white);}
.wallet_premium_status .wpsBtn .wbItem > div{width: 100%;}
.wallet_premium_status .wpsBtn .wbItem > div:nth-child(2) > div{width: 15px; height: 15px;}

.wallet_premium_subs{margin-top: 25px; display: grid; grid-template-columns: 1fr 150px; grid-gap: 15px; align-items: center;}
.wallet_premium_subs > div{width: 100%;}

.wallet_premium_telco{margin-top: 10px;}
.wallet_premium_telco > div{padding: 10px 15px; border: 1px solid var(--bg_line); border-radius: 10px;}
.wallet_premium_telco > div:not(:last-child){margin-bottom: 10px;}
.wallet_premium_telco .wptItem > div:first-child{display: grid; grid-template-columns: 1fr min-content; margin-bottom: 5px; align-items: center;}
.wallet_premium_telco .wptItem > div:first-child > div{width: 100%;}
.wallet_premium_telco .wptItem > div:first-child > div:first-child{font-weight: bold;}
.wallet_premium_telco .wptItem > div:first-child > div:nth-child(2){white-space: nowrap;}
.wallet_premium_telco .wptItem > div:nth-child(2) > a{display: inline-block;}
.wallet_premium_telco .wptItem > div:nth-child(2) > a:not(:last-child){margin-right: 10px;}

.wallet_premium_report > div{display: grid; padding: 5px 0px; grid-template-columns: 1fr min-content; grid-gap: 15px; align-items: center;}
.wallet_premium_report > div:not(:last-child){border-bottom: 1px solid var(--bg_line);}
.wallet_premium_report > div > div{width: 100%; padding: 10px 0px;}
.wallet_premium_report > div > div:nth-child(2){font-weight: bold; color: var(--text_blue); white-space: nowrap;}

/**COMPETITION**/
.compBanner{display: grid; grid-template-columns: 1fr 350px; grid-gap: 20px; margin-bottom: 50px; align-items: center;}
.compBanner > div{width: 100%; box-sizing: border-box;}
.compBanner > div:first-child{margin-top: 15px; padding: 0px 25px 20px 25px;}
.compBanner > div:first-child > div:first-child{font-size: 17px;}
.compBanner > div:first-child > div:nth-child(2){margin-top: 10px;}
.compBanner > div:nth-child(2){padding-bottom: 40%; background-image: url('../../../images/background/competition.png');}

.compHead{display: grid; grid-template-columns: 350px 1fr; grid-gap: 20px;}
.compHead > div{width: 100%;}
.compHead > div:first-child > div{padding-bottom: 60%; background-color: var(--bg_silvercalm); border-radius: 10px; position: relative;}
.compHead > div:first-child > div > div{position: absolute; top: 10px; left: 10px; padding: 3px 8px; border-radius: 50px; background: red; font-size: 9px; color: var(--text_white);}
.compHead > div:first-child > div > div.coming{background: var(--bg_blue);}
.compHead > div:first-child > div > div.ongoing{background: var(--bg_green);}
.compHead > div:first-child > div > div.finish{background: var(--bg_silver);}
.compHead > div:nth-child(2){padding: 10px;}
.compHead .chTitle{font-size: 17px; font-family: 'bold';}
.compHead .chDate{display: grid; grid-template-columns: 15px 1fr; grid-gap: 7px; align-items: center; margin: 3px 0px 5px 0px;}
.compHead .chDate > div{width: 100%; font-size: 12px; color: var(--text_silver);}
.compHead .chDate > div:first-child > div{width: 15px; height: 15px;}
.compHead .chInfo{color: var(--text_silver); margin-top: 15px;}
.compHead .chBtn{margin-top: 15px;}

.compWinners > div{margin-top: 25px;}
.compWinners > div > div:first-child{margin-bottom: 15px;}
.compWinners > div > div:first-child > div:first-child{font-weight: bold; font-size: 17px;}
.compWinners > div > div:first-child > div:nth-child(2){margin-top: 5px; color: var(--text_orange); position: relative; padding: 7px 10px 8px 15px; background: var(--bg_silvercalm);}
.compWinners > div > div:first-child > div:nth-child(2):before{content: ''; position: absolute; left: 0px; top: 0px; width: 2px; height: 100%; background: var(--bg_orange);}

.compComing{padding: 10px 15px; margin-top: 25px; font-weight: bold; border-radius: 5px; background: var(--bg_silvercalm);}

/**ERROR**/
.e_404{height: 250px; padding-top: 50px;}
.e_404 > div:first-child{width: 300px; height: 125px; background-image: url('../../../images/error_404.png');}
.e_404 > div:last-child{font-size: 25px; text-align: center; margin-top: 40px;}

.e_page{grid-template-columns: 300px 1fr; max-width: 700px; min-height: 300px; margin-top: 25px;}
.e_page > div:first-child{height: 100%; background: var(--bg_blue); border-radius: 10px;}

.e_notavail{padding-top: 50px; padding-bottom: 50px;}
.e_notavail > div:first-child{width: 125px; height: 125px; background-image: url('../../../images/e_notavail.png');}
.e_notavail > div:nth-child(2){font-size: 20px; font-weight: bold; text-align: center; margin-top: 40px;}
.e_notavail > div:last-child{width: 600px; font-size: 17px; color: var(--text_silver); text-align: center; margin-top: 20px;}

.e_login{display: grid; grid-template-columns: 1fr 250px; grid-gap: 25px; width: 600px; margin: 50px auto 60px auto;}
.e_login > div{width: 100%;}
.e_login .elInfo{display: flex; justify-content: center; align-items: center; font-size: 15px; flex-flow: column;}
.e_login .elInfo > div:first-child{width: 75px; height: 97px; margin-bottom: 20px; background-size: cover; background-image: url('../../../images/login.png');}
.e_login .elInfo > div:nth-child(2){padding: 12px 0px 14px 15px; border-left: 3px solid var(--bg_silver); color: var(--text_silver);}
.e_login .elContent{border: 2px solid var(--bg_blue); border-radius: 10px;}
.e_login .elContent > div{padding: 50px 25px; text-align: center;}
.e_login .elContent > div button{width: 100%;}

.e_info{width: 500px; padding-top: 100px; padding-bottom: 50px;}
.e_info > div:first-child{font-size: 25px; font-family: 'bold';}
.e_info > div:nth-child(2){margin-top: 15px;}
.e_info > div:nth-child(3){margin-top: 25px;}
.e_suggest{margin-bottom: 50px; padding: 20px 25px;}
.e_suggest > div:first-child{font-size: 25px; font-weight: bold;}
.e_suggest > div:last-child{display: table; width: 100%; margin-top: 15px; table-layout: fixed;}
.e_suggest > div:last-child > div{display: table-cell; vertical-align: top;}
.e_suggest > div:last-child > div:first-child{padding-right: 15px;}
.e_suggest > div:last-child > div:last-child{width: 300px;}

.e_premium{padding: 25px; box-sizing: border-box; margin-top: 35px; border-radius: 10px; border: 1px solid var(--bg_line); max-width: 500px;}
.e_premium > div:first-child{font-weight: bold; font-size: 17px;}
.e_premium > div:nth-child(2){color: var(--text_silver);}
.e_premium .epFeature{display: grid; grid-template-columns: 1fr 1fr 1fr; margin-top: 20px;}
.e_premium .epFeature > div{width: 100%; text-align: center;}
.e_premium .epFeature > div > div:first-child{width: 35px; height: 35px;}
.e_premium .epFeature > div > div:nth-child(2){max-width: 90px; font-size: 12px; font-weight: bold; margin-top: 5px;}
.e_premium > div:nth-child(4){margin-top: 25px;}

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

.empty_body{margin: 60px 20px; text-align: center;}
.empty_body .ebIcon > div{width: 120px; height: 120px;}
.empty_body .ebIcon .eiEd1{background-image: url('../../../images/background/empty_data_1.png');}
.empty_body .ebIcon .eiEd2{background-image: url('../../../images/background/empty_data_2.png');}
.empty_body .ebIcon .eiEd3{background-image: url('../../../images/background/empty_data_3.png');}
.empty_body .ebIcon .eiEd4{background-image: url('../../../images/background/empty_data_4.png');}
.empty_body .ebIcon .eiEd5{background-image: url('../../../images/background/empty_data_5.png');}
.empty_body .ebIcon .eiEd6{background-image: url('../../../images/background/empty_data_6.png');}
.empty_body .ebIcon .eiEd7{background-image: url('../../../images/background/empty_data_7.png');}
.empty_body .ebTitle{font-family: 'semibold'; margin-top: 20px;}
.empty_body .ebContent{margin-top: 5px; color: var(--text_silver);}
.empty_body .ebBtn{margin-top: 15px;}