#layout{display: grid; grid-template-columns: 250px 1fr;}
#layout > div{width: 100%; position: relative;}
#layout > div.mainmenu{z-index: 55;}
#layout.fresh{grid-template-columns: 1fr;}
#layout.fresh > div:first-child{display: none;}
#layout.editorscript > div{height: 100%; position: absolute;}

#header{height: 70px;}
#header > div{height: 69px; width: 100%; position: fixed; top: 0px; right: 0px; border-bottom: 1px solid var(--bg_line); z-index: 50; background: var(--bg_white);}
#header .hGrid{display: grid; grid-template-columns: 1fr 200px 190px; padding-right: 35px; padding-left: 295px; box-sizing: border-box; height: 69px; align-items: center;}
#header .hGrid > div{width: 100%;}
#header .hGrid .hgInput{height: 35px; margin: 0px; overflow: hidden; max-width: 600px; box-shadow: 0px 0px 0px 1px var(--bg_silverdark); border-radius: 50px; position: relative;}
#header .hGrid .hgInput > div:first-child input{width: 100%; padding: 8px 50px 8px 15px; font-size: 15px; border: none; outline: none;}
#header .hGrid .hgInput > div:nth-child(2){position: absolute; right: 10px; top: 7px; width: 20px; height: 20px;}
#header .hGrid .hgOpt{display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center;}
#header .hGrid .hgOpt .hgoIcon > div{width: 25px; height: 25px; cursor: pointer; position: relative;}
#header .hGrid .hgOpt .hgoIcon > div > div{padding: 4px 0px 3px 0px; background: var(--bg_red); color: var(--text_white); font-size: 9px; position: absolute; width: 23px; text-align: center; border-radius: 3px; right: -14px; top: -11px;}
#header .hGrid .hgOpt .hgoUser{width: 35px; height: 35px; background-color: var(--bg_silver); border-radius: 50%;}
#header .hGrid .hgLogin{display: grid; grid-template-columns: 1fr 1fr; width: 160px; text-align: center;}
#header .hGrid .hgLogin > div{width: 100%; padding: 7px 0px; transition: var(--transition); cursor: pointer;}
#header .hGrid .hgLogin > div:hover{color: var(--text_blue);}

#menu_hamburger{width: 35px; height: 35px; position: fixed; display: none; z-index: 70; top: 16px; left: 10px;}
#menu_hamburger > div{width: 25px; height: 25px; cursor: pointer; position: relative; top: 5px;}

.submenu{position: sticky; top: 69px; background: var(--bg_white); z-index: 50;}

#mainMenu{width: 250px; height: 100%; background: var(--bg_white); top: 0px; left: 0px; position: fixed; border-right: 1px solid var(--bg_line); display: grid; overflow: hidden;}
#mainMenu.mnUser{grid-template-rows: 90px 1fr 160px;}
#mainMenu.mnGuest{grid-template-rows: 90px 1fr;}
#mainMenu > div{width: 100%; height: 100%;}
#mainMenu > div:nth-child(2){overflow: auto;}
#mainMenu .mnLogo{width: 115px; height: 28px; position: relative; top: 19px; background-size: 100%; background-image: url('../../../images/logo_word.png?t=1');}
#mainMenu .mnStatus{margin-top: 28px; text-align: center;}
#mainMenu .mnStatus span{padding: 2px 10px; border-radius: 5px; font-size: 10px; background: var(--bg_silver); color: var(--text_silver);}
#mainMenu .mnMode{margin-bottom: 10px;}
#mainMenu .mnMode > div{display: grid; grid-template-columns: 1fr 1fr; max-width: 200px; width: 90%; border: 1.5px solid var(--bg_silver); border-radius: 10px; overflow: hidden;}
#mainMenu .mnMode > div > div{width: 100%;}
#mainMenu .mnMode .mmItem{display: grid; cursor: pointer; grid-template-columns: 15px 1fr; font-size: 12px; padding: 5px 10px 6px 10px; grid-gap: 10px; font-weight: bold; align-items: center; transition: var(--transition);}
#mainMenu .mnMode .mmItem:hover{background: var(--bg_silvercalm);}
#mainMenu .mnMode .mmItem.active{background: var(--bg_bluecalm);}
#mainMenu .mnMode .mmItem > div{width: 100%;}
#mainMenu .mnMode .mmItem > div:first-child > div{width: 15px; height: 15px;}
#mainMenu .mnMenu > a > div{display: grid; grid-template-columns: 20px 1fr; grid-gap: 15px; padding: 10px 25px; box-sizing: border-box; position: relative;}
#mainMenu .mnMenu > a > div > div{width: 100%;}
#mainMenu .mnMenu > a > div > div:first-child > div{width: 20px; height: 20px; position: relative;}
#mainMenu .mnMenu > a > div > div:nth-child(2){color: var(--text_black); transition: var(--transition);}
#mainMenu .mnMenu > a:hover > div > div:nth-child(2){color: var(--text_silver);}
#mainMenu .mnMenu > a.active > div:before{content: ''; position: absolute; top: 9px; left: 0px; width: 5px; border-radius: 0px 50px 50px 0px; height: 65%; background: var(--bg_blue);}
#mainMenu .mnMenu > a.active > div > div:nth-child(2){color: var(--text_blue);}
#mainMenu .mnMenu .mmCountIcon{display: none; padding: 3px 4px; background: var(--bg_red); font-size: 9px; color: var(--text_white); border-radius: 3px; position: absolute; top: -8px; right: -5px;}
#mainMenu .mnMenu .mmCount{padding: 3px 4px; background: var(--bg_red); font-size: 9px; color: var(--text_white); border-radius: 3px; margin-left: 5px; position: relative; top: -1px;}
#mainMenu .mnMenu .mmNotifIcon{display: none; width: 10px; position: absolute; border-radius: 50px; height: 10px; right: -15px; background: var(--bg_red);}
#mainMenu .mnMenu .mmNotif{width: 10px; display: inline-block; margin-left: 5px; border-radius: 50px; height: 10px; background: var(--bg_red);}
#mainMenu .mnOptions{background: var(--bg_bluesoft); box-shadow: var(--shadow); padding-bottom: 15px;}
#mainMenu .mnOptions > div:first-child{font-weight: bold; padding: 15px 25px 0px 25px;}
#mainMenu .mnOptions > div:nth-child(2) > a > div{display: grid; grid-template-columns: 20px 1fr; position: relative; grid-gap: 15px; padding: 10px 25px; box-sizing: border-box;}
#mainMenu .mnOptions > div:nth-child(2) > a > div > div{width: 100%;}
#mainMenu .mnOptions > div:nth-child(2) > a > div > div:first-child > div{width: 20px; height: 20px; position: relative;}
#mainMenu .mnOptions > div:nth-child(2) > a > div > div:nth-child(2){color: var(--text_black); transition: var(--transition);}
#mainMenu .mnOptions > div:nth-child(2) > a:hover > div > div:nth-child(2){color: var(--text_silver);}
#mainMenu .mnOptions > div:nth-child(2) > a.active > div:before{content: ''; position: absolute; top: 9px; left: 0px; width: 5px; border-radius: 0px 50px 50px 0px; height: 65%; background: var(--bg_blue);}
#mainMenu .mnOptions > div:nth-child(2) > a.active > div > div:nth-child(2){color: var(--text_blue);}

#content{}
.contentSpace{height: 25px;}
.footerSpace{height: 25px;}

#sidebar{position: fixed; height: 100%; width: 195px; top: 0px; left: 0px; background: var(--bg_white); z-index: 51; overflow: auto;}
#sidebar > div{display: grid; grid-template-rows: 50px 1fr 50px; grid-gap: 15px; height: 100%;}
#sidebar.isCreator > div{grid-template-rows: 50px 31px 1fr 50px;}
#sidebar > div > div{width: 100%; position: relative;}
#sidebar > div > div:first-child > a > div{width: 105px; height: 25px; position: relative; top: 13px; left: 3px;}
#sidebar > div > div.sideContent > div{position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;}
#sidebar .account_status{padding: 5px 0px; text-align: center; background: var(--bg_silver);}
#sidebar .account_status span{padding: 2px 7px 2px 7px; position: relative; top: -1px; margin-left: 5px; border-radius: 3px; background: var(--bg_blue); color: var(--text_white); font-family: 'bold'; font-size: 11px;}
#sidebar .add_new{padding: 5px 15px 15px 15px;}
#sidebar .add_new button{width: 100%;}
#sidebar .main_menu > a > div{padding: 15px 20px; color: var(--text_black);}
#sidebar .main_menu > a > div.active{color: var(--text_blue);}
#sidebar .main_menu > a > div > div{display: table; table-layout: fixed; width: 100%;}
#sidebar .main_menu > a > div > div > div{display: table-cell; vertical-align: middle;}
#sidebar .main_menu > a > div > div > div:first-child{width: 25px;}
#sidebar .main_menu > a > div > div > div:first-child > div{height: 25px;}
#sidebar .main_menu > a > div > div > div:nth-child(2){padding-left: 15px; font-size: 15px; font-family: 'bold'; position: relative;}
#sidebar .main_menu > a > div > div > div:nth-child(2) > div{position: absolute; right: 0px; top: 4px; background: var(--bg_red); color: var(--text_white); padding: 3px 5px; font-size: 10px; border-radius: 5px;}

#sidebarClose{width: 40px; height: 40px; display: none; position: fixed; border: 2px solid var(--bg_black); background: var(--bg_silvercalm); border-radius: 50%; right: 25px; top: 25px; z-index: 52;}
#sidebarClose > div{width: 25px; height: 25px; margin-top: 7px;}

#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_green);}
#alert > div.warning{background: var(--bg_orange);}
#alert > div.failed{background: var(--bg_red);}

#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: 10px; overflow: hidden;}

.popup_head_close{display: grid; grid-template-columns: 1fr 15px; padding: 10px 15px; box-sizing: border-box; background: var(--bg_silvercalm); grid-gap: 10px; align-items: center;}
.popup_head_close > div{width: 100%;}
.popup_head_close > div:first-child{font-weight: bold; font-size: 17px;}
.popup_head_close > div:nth-child(2) > div{width: 15px; height: 15px;}

.popup_tab{list-style-type: none; display: inline-block; border-bottom: 1px solid #f1f1f1; width: 100%;}
.popup_tab li{float: left; padding: 10px 15px; cursor: pointer;}
.popup_tab li.active{background: #f1f1f1;}

.popup_opt{display: grid; grid-template-columns: 1fr min-content; grid-gap: 10px; align-items: center;}
.popup_opt > div{width: 100%;}
.popup_opt > div:nth-child(2){white-space: nowrap;}
.popup_opt > div:nth-child(2) > div:not(:last-child){margin-right: 10px;}
.popup_opt .poItem{text-align: center; font-size: 11px; cursor: pointer; transition: var(--transition); font-weight: bold; display: inline-block; border-radius: 5px; border: 1px solid var(--bg_line); padding: 5px 10px;}
.popup_opt .poItem:hover{border: 1px solid var(--bg_blue);}
.popup_opt .poItem > div:first-child{margin-bottom: 5px;}
.popup_opt .poItem > div:first-child > div{width: 15px; height: 15px;}

.popup_list{list-style-type: none; border-top: 1px solid var(--bg_line);}
.popup_list > li{padding: 15px 20px; cursor: pointer; transition: all 0.5s ease;}
.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.plMini > li{padding: 10px 20px; cursor: pointer; transition: all 0.5s ease;}
.popup_list .plNotif{padding: 3px 4px; background: var(--bg_red); font-size: 9px; color: var(--text_white); border-radius: 3px; margin-left: 5px; position: relative; top: -1px;}

.popup_more{display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px; padding: 15px; align-items: center; box-sizing: border-box;}
.popup_more > a{width: 100%; height: 100%; font-size: 11px; padding: 10px 5px; text-align: center; border-radius: 10px; border: 1px solid var(--bg_line); box-sizing: border-box; color: var(--text_silver);}

.popup_boost_work .pbwHead{padding: 15px; box-sizing: border-box; display: grid; grid-template-columns: 100px 1fr; grid-gap: 15px; align-items: center;}
.popup_boost_work .pbwHead > div{width: 100%;}
.popup_boost_work .pbwHead > div:first-child > div{padding-bottom: 100%; background-image: url('../../../images/background/boost_anim.gif');}
.popup_boost_work .pbwHead > div:nth-child(2){font-size: 15px;}
.popup_boost_work .pbwBenefit{padding: 0px 15px;}
.popup_boost_work .pbwBenefit > div:first-child{font-weight: bold;}
.popup_boost_work .pbwBenefit > div:nth-child(2){padding: 5px 0px 0px 15px;}
.popup_boost_work .pbwBenefit > div:nth-child(2) > div:not(:last-child){margin-bottom: 3px;}
.popup_boost_work .pbwInfo{padding: 10px 15px; background: var(--bg_silvercalm); margin-top: 10px;}
.popup_boost_work .pbwAlert{padding: 15px;}
.popup_boost_work .pbwAlert > span{padding: 3px 7px; border-radius: 10px; font-size: 11px; font-weight: bold;}
.popup_boost_work .pbwAlert > span.unavail{background: var(--bg_orange); color: var(--text_white);}
.popup_boost_work .pbwAlert > span.avail{background: var(--bg_green); color: var(--text_white);}
.popup_boost_work .pbwBtn{padding: 5px 15px;}
.popup_boost_work .pbwPremium{margin: 15px; padding: 10px 15px; border-radius: 10px; background: var(--bg_orangecalm);}
.popup_boost_work .pbwPremium > div:first-child{font-weight: bold;}
.popup_boost_work .pbwPremium > div:nth-child(3){margin-top: 10px;}

.popupCreate{padding: 0px 15px 15px 15px;}
.popupCreate > div{display: grid; grid-gap: 15px; grid-template-columns: 1fr 1fr;}
.popupCreate > div > a{width: 100%;}
.popupCreate > div > a > div{padding: 17px 0px; color: var(--text_black); text-align: center; border: 2px solid var(--bg_silver); border-radius: 10px; transition: var(--transition);}
.popupCreate .pcNovel{border: 2px solid var(--bg_novel);}
.popupCreate .pcComic{border: 2px solid var(--bg_comic);}
.popupCreate .pcScript{border: 2px solid var(--bg_script);}
.popupCreate .pcFlash{border: 2px solid var(--bg_flash);}
.popupCreate .pcShort{border: 2px solid var(--bg_short);}
.popupCreate .pcPoetry{border: 2px solid var(--bg_poetry);}
.popupCreate .pcArticle{border: 2px solid var(--bg_article);}
.popupCreate .pcArtwork{border: 2px solid var(--bg_artwork);}
.popupCreate > div > a > div:hover{background: var(--bg_silvercalm); color: var(--text_black);}
.popupCreate > div > a > div > div:first-child{width: 40px; height: 40px;}
.popupCreate > div > a > div > div:nth-child(2){margin-top: 13px;}

.popupAccount .paHead{height: 100px; background-color: var(--bg_blue); position: relative;}
.popupAccount .paHead > div:first-child{width: 35px; height: 35px; position: absolute; top: 5px; left: 5px; border-radius: 50%; background: var(--bg_white);}
.popupAccount .paHead > div:first-child > div{width: 15px; height: 15px; margin-top: 10px;}
.popupAccount .paHead > div:nth-child(2){width: 65px; height: 65px; position: relative; box-shadow: 0px 0px 0px 2px var(--bg_white); top: 15px; background-color: var(--bg_silver); border-radius: 50%;}
.popupAccount .paOpt{}
.popupAccount .paOpt > div{margin: 20px 15px; background: var(--bg_silvercalm); border-radius: 10px;}
.popupAccount .paOpt > div > div{display: grid; padding: 5px 10px; box-sizing: border-box; grid-template-columns: 15px 1fr min-content; grid-gap: 10px; align-items: center;}
.popupAccount .paOpt > div > div > div{width: 100%;}
.popupAccount .paOpt > div > div > div:first-child > div{width: 15px; height: 15px;}
.popupAccount .paOpt select{width: 110px;}

.popupCharacter > div:first-child{display: grid; grid-template-columns: 90px 1fr; grid-gap: 10px;}
.popupCharacter > div:nth-child(2){margin-top: 5px; font-size: 11px; color: var(--text_silver);}
.popupCharacter > div:first-child > div{width: 100%; overflow: auto; height: 155px;}
.popupCharacter .pnMenu > div{padding: 3px 5px; border: 1px solid var(--bg_line); cursor: pointer; font-size: 11px; transition: var(--transition); border-radius: 5px;}
.popupCharacter .pnMenu > div.active{background: var(--bg_silvercalm); border: 1px solid var(--bg_blue);}
.popupCharacter .pnMenu > div:hover{border: 1px solid var(--bg_blue);}
.popupCharacter .pnMenu > div:not(:last-child){margin-bottom: 5px;}
.popupCharacter .pnContent > div{display: none;}
.popupCharacter .pnContent > div > div{grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 5px; display: grid;}
.popupCharacter .pnContent > div > div > div{width: 100%;}
.popupCharacter .pnContent .pcItem{width: 40px; height: 40px; cursor: pointer; transition: var(--transition); position: relative;}
.popupCharacter .pnContent .pcItem:hover{transform: scale(1.2);}
.popupCharacter .pnContent .pcItem > div{width: 15px; height: 15px; position: absolute; bottom: 3px; right: 3px; display: none;}
.popupCharacter .pnContent .pcItem.active > div{display: block;}

.popupFixedContentLayer{height: calc(100vh - 300px); overflow: auto;}

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

section{max-width: 1000px;}
section div.distance{padding: 0px 0px;}

.mobile_level2{display: none;}

#container{max-width: 1000px; display: grid; grid-gap: 15px;}
#container.ct1{grid-template-columns: 1fr;}
#container.ct2{grid-template-columns: 1fr 300px;}
#container.ct3{grid-template-columns: 1fr 1fr;}
#container > div{width: 100%;}

.singlePage{max-width: 700px; width: 100%;}

.sideTitle{padding-bottom: 15px; font-size: 20px; font-family: 'bold';}

.path_title{font-size: 17px; font-weight: bold; margin-bottom: 10px;}

.page_title{padding: 15px 0px 20px 0px;}
.page_title > div:first-child{font-size: 17px; font-weight: bold;}
.page_title > div:nth-child(2){margin-top: 5px;}

.page_loading{padding: 100px 0px; text-align: center; font-style: italic;}

.page_grid{display: grid; grid-gap: 15px;}
.page_grid.pg2{grid-template-columns: 1fr 1fr;}
.page_grid > div{width: 100%;}

.page_back{padding: 15px 25px; display: grid; grid-template-columns: 95px 1fr; grid-gap: 20px; align-items: center;}
.page_back > div{width: 100%;}
.page_back > div:first-child{display: grid; cursor: pointer; grid-template-columns: 20px 1fr; grid-gap: 15px; align-items: center; padding: 7px 10px; border: 1px solid var(--bg_line); border-radius: 5px; transition: var(--transition);}
.page_back > div:first-child:hover{background: var(--bg_silvercalm);}
.page_back > div:first-child > div{width: 100%;}
.page_back > div:first-child > div:first-child > div{width: 20px; height: 20px;}
.page_back > div:nth-child(2){font-size: 17px; font-weight: bold; padding-left: 15px;}

.page_alert{padding: 100px 20px 150px 20px; text-align: center; color: var(--text_silver);}
.page_alert > div:first-child{font-size: 15px; font-family: 'bold';}
.page_alert > div:nth-child(2){margin-top: 10px; font-size: 13px;}

.page_empty{padding: 120px 0px; text-align: center; color: var(--text_silver);}
.page_empty.mini{padding: 50px 0px;}

.page_info{padding: 10px 15px; background: var(--bg_bluesoft); border-left: 3px solid var(--bg_blue); font-size: 13px; color: var(--text_silver);}

.headerBack{display: grid; grid-template-columns: 20px 1fr; grid-gap: 10px; align-items: center;}
.headerBack > div{width: 100%;}
.headerBack > div:first-child > div{width: 20px; height: 20px;}
.headerBack.mobileBack{display: none;}

.tab > div:first-child{display: table; color: var(--text_silver); border-bottom: 1.5px solid var(--bg_silver); table-layout: fixed; width: 100%; height: 50px;}
.tab > div:first-child > div{cursor: pointer; vertical-align: middle; padding-bottom: 3px; font-size: 17px; text-align: center; position: relative;}
.tab.mini > div:first-child > div{font-size: 13px; font-weight: bold;}
.tab > div:first-child > div:not(.tabMobile){display: table-cell;}
.tab > div:first-child > div.tabMobile{display: none;}
.tab > div:first-child > div:before{content: ''; position: absolute; bottom: -1.5px; height: 1.5px; width: 60%; background: var(--bg_blue); left: 0; right: 0; margin-left: auto; margin-right: auto; opacity: 0;}
.tab > div:first-child > div:hover{color: var(--text_black);}
.tab > div:first-child > div.active{color: var(--text_black);}
.tab > div:first-child > div.active:before{opacity: 1;}
.tab > div:last-child > span:not(:first-child){display: none;}

.title{padding: 0px 15px;}
.title > div:first-child{font-size: 17px; font-family: 'bold';}
.title > div:nth-child(2){color: var(--text_silver);}

.pageMenu{border-bottom: 1px solid var(--bg_line); position: relative; margin-bottom: 15px;}
.pageMenu .pmSwitch{position: absolute; width: 100%; height: 0px; display: none;}
.pageMenu.active .pmSwitch{display: block;}
.pageMenu .pmSwitch > div{width: 45px; height: 58px; position: absolute; top: 0px;}
.pageMenu .pmSwitch > div:first-child{left: 0px; background-image: linear-gradient(to right, var(--bg_forshadow), transparent);}
.pageMenu .pmSwitch > div:nth-child(2){right: 0px; background-image: linear-gradient(to right, transparent, var(--bg_forshadow));}
.pageMenu .pmOption{width: 100%; overflow: auto; max-width: 1000px; white-space: nowrap; font-size: 0px;}
.pageMenu .pmOption > a{display: inline-block;}
.pageMenu .pmOption > a > div{padding: 5px 17px; margin: 10px 0px; font-size: 15px; color: var(--text_black); position: relative; transition: var(--transition); position: relative;}
.pageMenu .pmOption > a > div > span{padding: 3px 4px; background: var(--bg_red); font-size: 9px; color: var(--text_white); border-radius: 3px; margin-left: 5px; position: relative; top: -1px;}
.pageMenu .pmOption > a:first-child > div{margin-left: 15px;}
.pageMenu .pmOption > a:last-child > div{margin-right: 15px;}
.pageMenu .pmOption > a > div:hover{color: var(--text_silver);}
.pageMenu .pmOption > a.active > div{color: var(--text_white); background: var(--bg_blue); border-radius: 50px;}

.info{background: var(--bg_silvercalm); padding: 15px 20px 16px 20px; position: relative;}
.info:before{content: ''; position: absolute; left: 0px; top: 0px; width: 3px; height: 100%; background: var(--bg_blue);}
.info:not(.justInfo) > div:first-child{font-weight: bold;}

.infobox{background-image: linear-gradient(140deg, #7c93ff, #32364c); border-radius: 10px;}
.infobox .ibTitle{font-weight: bold; font-size: 15px; padding: 15px 15px 15px 15px; color: var(--text_white);}
.infobox .ibTitle.ibDd{display: grid; grid-template-columns: 1fr 15px; grid-gap: 10px; align-items: center;}
.infobox .ibTitle.ibDd > div{width: 100%;}
.infobox .ibTitle.ibDd > div:nth-child(2) > div{width: 15px; height: 15px;}
.infobox .ibBody{display: none; padding: 0px 15px 17px 15px;}
.infobox.expand .ibBody{display: block;}
.infobox .ibBody .ibContent{color: var(--text_white);}
.infobox .ibBody .ibContent.ibGrid{display: grid; grid-template-columns: 100px 1fr; grid-gap: 15px;}
.infobox .ibBody .ibContent.ibGrid > div{width: 100%;}
.infobox .ibBody .ibContent.ibGrid > div:first-child > div{padding-bottom: 100%;}
.infobox .ibBody .ibButton{text-align: right; margin-top: 15px;}
.infobox.ib1{background-image: linear-gradient(140deg, #f51ac9, #3f5fff);}
.infobox.ib2 .ibLogo{background-image: url('../../../images/event_kwikku.jpg');}
.infobox.ib2{background-image: linear-gradient(140deg, #393bb5, #3c6abd);}
.infobox.ib3{background-image: linear-gradient(140deg, #73961d, #a26818);}

.panelRevision{position: fixed; display: none; right: 0px; top: 0px; z-index: 75; width: 100%; max-width: 400px; height: 100%; background: var(--bg_silvercalm); box-shadow: var(--shadow); border-left: 1px solid var(--bg_silver);}
.panelRevision > div{display: grid; height: 100%; grid-template-rows: 75px 1fr;}
.panelRevision.withDesc > div{grid-template-rows: 105px 1fr;}
.panelRevision > div > div{width: 100%; height: 100%;}
.panelRevision > div > div:nth-child(2){overflow: auto; padding-bottom: 15px;}
.panelRevision .prHead{padding: 15px 15px 5px 15px; box-sizing: border-box; display: grid; grid-template-columns: 15px 1fr; grid-gap: 15px; align-items: center; font-weight: bold; font-size: 15px;}
.panelRevision .prHead > div{width: 100%;}
.panelRevision .prHead > div:first-child > div{width: 15px; height: 15px;}
.panelRevision .prDesc{padding: 5px 15px;}
.panelRevision .prOpt{padding: 0px 15px; margin-top: 5px; white-space: nowrap;}
.panelRevision .prOpt > div{cursor: pointer; padding: 3px 7px; display: inline-block; border-radius: 5px; font-size: 11px; background: var(--bg_blue); color: var(--text_white);}
.panelRevision .prOpt > div:not(:last-child){margin-right: 5px;}

.btn_add_writer{padding: 2px 5px 3px 5px; font-size: 12px; color: white; border-radius: 5px; background: var(--bg_blue);}
.btn_add_character{padding: 5px 7px 5px 7px; font-weight: bold; background: var(--bg_blue); border: 0px; color: var(--text_white); cursor: pointer; outline: none; border-radius: 5px;}
.btn_add_character > span:last-child{display: none;}
.btn_add_character:hover{box-shadow: 0px 4px 5px #5f4b555f;}
.btn_add_character:hover > span:first-child{display: none;}
.btn_add_character:hover > span:last-child{display: block;}

.character{position: relative;}
.character:before{content: 'Geser untuk memindahkan tokoh'; font-size: 11px; display: none; position: absolute; bottom: 5px; left: 10px;}
.character.sortable{padding: 10px 10px 25px 10px; background: var(--bg_bluesoft); border-radius: 5px; margin-bottom: 10px;}
.character.sortable:before{display: block;}
.character > div{display: inline-block;}
.character > div:not(:last-child){margin-right: 5px; margin-bottom: 5px;}
.character .charcData{padding: 3px 10px 4px 10px; cursor: pointer; border-radius: 50px; align-items: center; background: var(--bg_silvercalm); display: grid; grid-template-columns: 30px 1fr; grid-gap: 5px; white-space: nowrap;}
.character .charcData > div{width: 100%;}
.character .charcData > div:first-child > div{width: 30px; height: 30px; position: relative; background-color: var(--bg_silver); border-radius: 50%;}
.character .charcData .cdGender{position: absolute; bottom: -2px; right: -2px; border-radius: 50%; width: 15px; height: 15px; border: 1px solid var(--bg_white);}
.character .charcData .cdGender.male{background: var(--bg_bluecalm);}
.character .charcData .cdGender.female{background: var(--bg_redcalm);}
.character .charcData .cdGender.none{background: var(--bg_silver);}
.character .charcData .cdGender > div{width: 10px; height: 10px; position: relative; top: 2.5px;}

.tags{list-style-type: none; display: inline-block;}
.tags > li{padding: 5px 15px 6px 30px; background: var(--bg_silvercalm); float: left; font-family: 'bold'; cursor: pointer; border-radius: 20px; overflow: hidden; position: relative;}
.tags > li:before{content: '#'; position: absolute; top: 0px; left: 0px; background: var(--bg_silver); padding: 5px 6px 6px 12px;}
.tags > li:not(:last-child){margin-right: 5px; margin-bottom: 5px;}

/**FRONT**/
.f_section{position: relative;}
.f_section.fs1{height: 100vh; overflow: hidden;}
.f_section.fs2{min-height: 100vh; background: var(--bg_white); z-index: 1;}
.f_section.fs3{min-height: 100vh; background: var(--bg_silvercalm); z-index: 1;}
.fs1 > div{display: table; table-layout: fixed; width: 100%; position: fixed; top: 0px; left: 0px; height: 100%;}
.fs1 > div > div{display: table-cell;}
.fs1 > div > div:first-child{vertical-align: top; position: relative;}
.fs1 > div > div:first-child > div:first-child{padding: 100px 100px 0px 100px;}
.fs1 > div > div:first-child > div:first-child > div:first-child{font-size: 40px; font-family: 'bold'; color: var(--text_blue);}
.fs1 > div > div:first-child > div:first-child > div:nth-child(2){font-size: 70px; font-family: 'bold';}
.fs1 > div > div:first-child > div:first-child > div:nth-child(3){margin-top: 25px;}
.fs1 > div > div:first-child > div:first-child > div:nth-child(4){margin-top: 25px; font-size: 20px; color: var(--text_silver);}
.fs1 > div > div:first-child > div:last-child{position: absolute; bottom: 25px; left: 0px; width: 100%;}
.fs1 > div > div:first-child > div:last-child > div{padding: 0px 100px; height: 70px;}
.fs1 > div > div:first-child > div:last-child > div > div{display: table; width: 100%; table-layout: fixed;}
.fs1 > div > div:first-child > div:last-child > div > div > div{display: table-cell; vertical-align: middle;}
.fs1 > div > div:first-child > div:last-child > div > div > div:first-child{width: 70px;}
.fs1 > div > div:first-child > div:last-child > div > div > div:first-child > div{float: left; margin-right: 25px; width: 70px; height: 70px;}
.fs1 > div > div:first-child > div:last-child > div > div > div:last-child{padding-left: 25px; line-height: 20px;}
.fs1 > div > div:last-child{vertical-align: middle; background-size: cover; background-color: var(--bg_silver); background-image: url('../../../images/background/front_header.png'); position: relative; overflow: hidden;}
.fs1 > div > div:last-child:before{content: ''; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.25);}
.fs1 > div > div:last-child > div{padding: 0px 50px; position: relative; z-index: 1; line-height: 40px; text-align: center; color: var(--text_white);}
.fs1 > div > div:last-child > div > div:first-child{font-size: 25px;}
.fs1 > div > div:last-child > div > div:last-child{font-size: 17px; margin-top: 25px;}
.fs2 > div:first-child{background: var(--bg_blue); color: var(--text_white); font-size: 30px; font-family: 'bold'; text-align: center; padding: 35px 0px;}
.fs2 > div:nth-child(2){padding: 30px 100px;}
.fs2 > div:nth-child(2) > div{display: table; width: 100%; table-layout: fixed;}
.fs2 > div:nth-child(2) > div > div{display: table-cell; vertical-align: top; padding: 15px 0px;}
.fs2 > div:nth-child(2) > div > div > div:first-child{width: 150px; height: 150px; background-size: cover;}
.fs2 .fs2bg1{background-image: url('../../../images/background/work_1.png');}
.fs2 .fs2bg2{background-image: url('../../../images/background/work_2.png');}
.fs2 .fs2bg3{background-image: url('../../../images/background/work_3.png');}
.fs2 .fs2bg4{background-image: url('../../../images/background/work_4.png');}
.fs2 .fs2bg5{background-image: url('../../../images/background/work_5.png');}
.fs2 .fs2bg6{background-image: url('../../../images/background/work_6.png');}
.fs2 > div:nth-child(2) > div > div > div:nth-child(2){margin-top: 20px; text-align: center;}
.fs2 > div:nth-child(2) > div > div > div:nth-child(2) > div:first-child{font-size: 17px; font-family: 'bold';}
.fs2 > div:nth-child(2) > div > div > div:nth-child(2) > div:last-child{margin-top: 5px; width: 200px;}
.fs2 > div:nth-child(3){text-align: center; padding: 30px 0px 100px 0px;}
.fs3 > div:first-child{background: var(--bg_green); color: var(--text_white); font-size: 30px; font-family: 'bold'; text-align: center; padding: 35px 0px;}
.fs3 > div:nth-child(2){padding: 70px 100px 30px 100px;}
.fs3 > div:nth-child(2) > div{display: table; width: 100%; table-layout: fixed;}
.fs3 > div:nth-child(2) > div > div{display: table-cell; vertical-align: top; padding: 15px 0px;}
.fs3 > div:nth-child(2) > div > div > div:first-child{width: 70px; height: 70px; background-size: cover;}
.fs3 > div:nth-child(2) > div > div > div:nth-child(2){margin-top: 50px; text-align: center;}
.fs3 > div:nth-child(2) > div > div > div:nth-child(2) > div:first-child{font-size: 17px; font-family: 'bold';}
.fs3 > div:nth-child(2) > div > div > div:nth-child(2) > div:last-child{margin-top: 5px; width: 200px;}
.fs3 > div:nth-child(3){text-align: center; padding: 30px 0px 100px 0px;}
.fs3 .fs3bg1{background-image: url('../../../images/background/join_1.png');}
.fs3 .fs3bg2{background-image: url('../../../images/background/join_2.png');}
.fs3 .fs3bg3{background-image: url('../../../images/background/join_3.png');}

/**ACCESS**/
.a_head{height: 40px;}
.a_head .ah_option{width: 30px; height: 30px; margin-left: 13px; margin-top: 10px;}
.a_head .ah_option .aho_icon{width: 25px; height: 25px; margin-top: 2px;}
.a_title{height: 40px; margin-top: 10px;}
.a_title .at_icon{width: 40px; height: 40px; margin: 0px 10px 0px 15px; background-repeat: no-repeat;}
.a_title .at_info{margin-top: 7px;}

.a_layout{max-width: 600px; margin: 50px auto; border: 1px solid var(--bg_line); border-radius: 10px; display: grid; grid-template-columns: 200px 1fr;}
.a_layout > div{width: 100%; position: relative;}
.a_layout .alIcon{width: 130px; height: 130px; position: absolute; bottom: 100px; left: 15px; background-size: cover; background-image: url('../../../images/background/login.png');}
.a_layout .alTitle{position: absolute; bottom: 15px; left: 15px; font-size: 20px; font-weight: bold;}
.a_layout > div:nth-child(2) > div{padding: 15px;}

/**HOME**/
.hPopupContact{position: fixed; z-index: 71; width: 100%; height: 100%; top: 0px; left: 0px; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); overflow: auto; padding: 0px 20px; box-sizing: border-box;}
.hPopupContact > div{max-width: 450px; min-height: calc(100vh - 70px); background: var(--bg_white); margin-top: 35px; margin-bottom: 35px; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);}
.hPopupContact .hpcHead{padding: 15px 20px; margin-bottom: 10px; background: var(--bg_blue); color: var(--text_white);}
.hPopupContact .hpcHead > div:first-child{font-size: 15px; font-weight: bold;}
.hPopupContact .hpcList > div{padding: 0px 20px; display: grid; grid-template-columns: 20px 1fr; grid-gap: 15px; box-sizing: border-box;}
.hPopupContact .hpcList > div:not(:last-child){margin-bottom: 5px;}
.hPopupContact .hpcList > div > div{width: 100%;}
.hPopupContact .hpcList .hlIcon{padding-top: 10px;}
.hPopupContact .hpcList .hlIcon > div{width: 20px; height: 20px;}
.hPopupContact .hpcList .hlInfo > div:first-child{font-weight: bold; margin-bottom: 3px;}
.hPopupContact .hpcList .hlInfo .hiDesc{font-size: 11px; margin-top: 3px;}
.hPopupContact .hpcButton{padding: 20px;}

.h_info_boost{padding: 10px 15px; border-radius: 10px; background: var(--bg_orange); color: var(--text_white); margin-bottom: 15px;}

.h_info_layout > div:not(:last-child){margin-bottom: 15px;}

.h_intro{padding: 25px; border-radius: 10px; background: var(--bg_silvercalm); border: 2px solid var(--bg_silver);}

.h_contact{padding: 20px; background: var(--bg_bluesoft); border-radius: 10px; margin-bottom: 25px;}
.h_contact > div:first-child{display: grid; grid-template-columns: 20px 1fr; grid-gap: 10px; align-items: center;}
.h_contact > div:first-child > div{width: 100%;}
.h_contact > div:first-child > div:first-child > div{width: 20px; height: 20px;}
.h_contact > div:first-child > div:nth-child(2){font-size: 17px; font-weight: bold; color: var(--text_blue);}
.h_contact > div:nth-child(2){margin-top: 10px;}
.h_contact .hcTitle{display: grid; grid-template-columns: 1fr 80px; grid-gap: 10px; align-items: center;}
.h_contact .hcTitle > div{width: 100%;}
.h_contact .hcTitle > div:nth-child(2){text-align: right;}
.h_contact .hcItems{margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 5px;}
.h_contact .hcItems > div{width: 100%;}
.h_contact .hcItems > div > div:first-child{font-weight: bold; font-size: 11px;}
.h_contact .hcItems > div > div:nth-child(2){color: var(--text_silver);}
.h_contact .hcItems > div > div:nth-child(2) > div:nth-child(2){font-size: 11px;}
.h_contact .hcItems .hiHead{display: grid; grid-template-columns: 10px 1fr; grid-gap: 7px; align-items: center;}
.h_contact .hcItems .hiHead > div{width: 100%;}
.h_contact .hcItems .hiHead > div:first-child > div{height: 10px; height: 10px;}

.h_changestyle{padding: 10px 15px; background: var(--bg_black); color: var(--text_white); margin-bottom: 15px; border-radius: 10px;}
.h_changestyle .hcTitle{font-weight: bold;}
.h_changestyle .hcOpt{margin-top: 5px;}
.h_changestyle .hcOpt > div{display: inline-block; cursor: pointer; padding: 3px 10px 4px 10px; background: var(--bg_white); color: var(--text_black); border-radius: 5px; position: relative;}
.h_changestyle .hcOpt > div.active{padding: 3px 10px 4px 25px;}
.h_changestyle .hcOpt > div.active:before{content: ''; position: absolute; top: 6px; left: 5px; width: 15px; height: 15px; background-size: cover; background-image: url('../../../images/icon/all/checked_green.png');}
.h_changestyle .hcOpt > div:not(:last-child){margin-right: 5px;}
.h_changestyle .hcInfo{margin-top: 5px; font-size: 11px;}

.h_progressive{padding: 10px 15px; background: var(--bg_silvercalm); margin-top: 15px; border-radius: 10px;}
.h_progressive .hpProgress .hpBar{height: 5px; border-radius: 50px; background: var(--bg_silver); margin-top: 7px; position: relative;}
.h_progressive .hpProgress .hpBar > div{position: absolute; left: 0px; top: 0px; height: 5px; background: var(--bg_blue); width: 40%;}
.h_progressive .hpProgress .hpBar > div:before{content: ''; width: 15px; height: 15px; border-radius: 50%; background: var(--bg_blue); position: absolute; right: -8px; top: -5px;}
.h_progressive .hpProgress .hpPosition{display: grid; grid-template-columns: 1fr 1fr 1fr; margin-top: 7px;}
.h_progressive .hpProgress .hpPosition > div{width: 100%; text-align: center;}
.h_progressive .hpProgress .hpPosition > div.active{color: var(--text_green);}
.h_progressive .hpProgress .hpPosition > div > div:first-child{font-weight: bold;}
.h_progressive .hpProgress .hpPosition > div > div:nth-child(2){color: var(--text_silver); font-size: 11px;}
.h_progressive .hpProgress .hpInfo{margin-top: 5px; font-size: 11px;}
.h_progressive .hpFinish{margin-top: 10px; display: grid; grid-template-columns: 50px 1fr; grid-gap: 15px;}
.h_progressive .hpFinish > div{width: 100%;}
.h_progressive .hpFinish > div:first-child > div{width: 50px; height: 50px; background-size: 100%; background-image: url('../../../images/icon/info/home_royalty.png');}

.h_create > div:first-child{font-size: 17px; font-weight: bold; margin-bottom: 20px;}
.h_create > div:nth-child(2){display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 15px;}
.h_create > div:nth-child(2) > a{width: 100%; color: var(--text_silver); transition: var(--transition);}
.h_create > div:nth-child(2) > a:hover{color: var(--text_white);}
.h_create > div:nth-child(2) > a .hcBody{transition: var(--transition); background: var(--bg_white);}
.h_create .hcNovel .hcBody{box-shadow: inset 0px 0px 0px 2px var(--bg_novel);}
.h_create .hcNovel:hover .hcBody{background: var(--bg_novel);}
.h_create .hcComic .hcBody{box-shadow: inset 0px 0px 0px 2px var(--bg_comic);}
.h_create .hcComic:hover .hcBody{background: var(--bg_comic);}
.h_create .hcScript .hcBody{box-shadow: inset 0px 0px 0px 2px var(--bg_script);}
.h_create .hcScript:hover .hcBody{background: var(--bg_script);}
.h_create .hcFlash .hcBody{box-shadow: inset 0px 0px 0px 2px var(--bg_flash);}
.h_create .hcFlash:hover .hcBody{background: var(--bg_flash);}
.h_create .hcShort .hcBody{box-shadow: inset 0px 0px 0px 2px var(--bg_short);}
.h_create .hcShort:hover .hcBody{background: var(--bg_short);}
.h_create .hcPoetry .hcBody{box-shadow: inset 0px 0px 0px 2px var(--bg_poetry);}
.h_create .hcPoetry:hover .hcBody{background: var(--bg_poetry);}
.h_create .hcArticle .hcBody{box-shadow: inset 0px 0px 0px 2px var(--bg_article);}
.h_create .hcArticle:hover .hcBody{background: var(--bg_article);}
.h_create .hcArtwork .hcBody{box-shadow: inset 0px 0px 0px 2px var(--bg_artwork);}
.h_create .hcArtwork:hover .hcBody{background: var(--bg_artwork);}
.h_create .hcBody{padding: 25px 0px; border-radius: 10px;}
.h_create .hcBody > div:first-child{width: 30px; height: 30px;}
.h_create .hcBody > div:nth-child(2){margin-top: 10px; text-align: center; display: grid; width: 100%;}

.h_works{display: grid; grid-template-columns: 1fr 1fr; grid-gap: 15px; margin-top: 15px; width: 100%; box-sizing: border-box; vertical-align: top;}
.h_works > div{width: 100%; border: 1px solid var(--bg_line); border-radius: 10px; background: var(--bg_white);}
.h_works .hwbox{padding: 15px;}
.h_works .hwbox > div:first-child{padding-bottom: 5px; border-bottom: 1px solid var(--bg_silver);}
.h_works .hwbox > div:first-child > div:first-child{font-weight: bold;}
.h_works .hwbox > div:first-child > div:nth-child(2){color: var(--text_silver);}
.h_works .hwbox > div:nth-child(2){margin-top: 10px;}
.h_works .hw_empty{padding: 15px 0px 25px 0px; color: var(--text_silver); text-align: center;}

.h_traffic.htDesktop{}
.h_traffic.htMobile{display: none;}
.h_traffic > div{text-align: center; border: 1px solid var(--bg_line); background: var(--bg_white); border-radius: 10px; padding-bottom: 15px; overflow: hidden; padding-bottom: 15px;}
.h_traffic > div:not(:last-child){margin-bottom: 15px;}
.h_traffic > div > div:first-child{padding: 10px 0px; background: var(--bg_silvercalm);}
.h_traffic > div > div:nth-child(2){margin-top: 10px; font-size: 17px; font-weight: bold;}
.h_traffic > div > div:nth-child(3){margin-top: 10px; color: var(--text_silver); font-size: 11px;}

.h_content{padding: 15px;}
.h_content > div{display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 15px;}
.h_content > div > a{width: 100%; text-align: center;}
.h_content > div > a > div{border: 1px solid var(--bg_silver);}
.h_content > div > a > div > div:first-child{padding: 10px 0px; background: var(--bg_silver); color: var(--text_black);}
.h_content > div > a > div > div:nth-child(2){padding: 10px 0px; font-size: 20px; font-family: 'bold'; color: var(--text_silver);}
.h_content > div > a > div > div:nth-child(3){padding: 10px 0px; font-family: 'bold'; border-top: 1px solid var(--bg_silver);}

.h_count{margin-top: 25px; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; grid-gap: 10px; box-sizing: border-box; padding: 20px 0px; border-radius: 10px; border: 1px solid var(--bg_line); background: var(--bg_white);}
.h_count > a{width: 100%; text-align: center;}
.h_count > a > div:first-child{margin-bottom: 5px; color: var(--text_black); display: grid; width: 100%;}
.h_count > a > div:nth-child(2){font-size: 17px; font-weight: bold;}

/**CREATE**/
#createInit{}
#createInit .ciCoverEditor{display: none; position: relative; z-index: 88;}
#createInit .ciContent{}

.create_layout{display: grid; grid-template-columns: 150px 1fr; grid-gap: 25px; max-width: 850px; margin-bottom: 25px;}
.create_layout > div{width: 100%;}
.create_layout .clCover{margin-bottom: 25px;}
.create_layout .clContent{padding: 25px; box-shadow: 0px 0px 0px 1px var(--bg_line); border-radius: 10px; overflow: hidden;}
.create_layout .clContent .clcSection:not(:first-child){margin-top: 25px;}
.create_layout .clContent .clcSection .clcc_title{font-size: 30px;}

.create_layout_flash{max-width: 800px; margin-top: 25px;}
.create_layout_flash > div{display: grid; grid-template-columns: 300px 1fr; grid-gap: 25px;}
.create_layout_flash > div > div{width: 100%;}
.create_layout_flash > div > div:nth-child(2){box-shadow: 0px 0px 0px 1px var(--bg_line); border-radius: 10px; overflow: hidden;}
.create_layout_flash > div > div:nth-child(2) > div{padding: 25px;}
.create_layout_flash .clf_cover{padding-bottom: 150%; background-color: var(--bg_silver); border-radius: 10px;}
.create_layout_flash .clf_info{position: relative; height: 0px;}
.create_layout_flash .clf_info > div{position: absolute; width: 100%; bottom: 0px; left: 0px;}
.create_layout_flash .clf_info > div:before{position: absolute; content: ''; top: 0px; left: 0px; width: 100%; height: 100%; background-image: linear-gradient(to top, var(--bg_black), transparent); border-radius: 0px 0px 5px 5px;}
.create_layout_flash .clf_info > div > div{padding: 100px 25px 30px 25px; color: var(--text_white); position: relative; z-index: 1; cursor: pointer;}
.create_layout_flash .clf_info > div > div > div:first-child{font-size: 20px; font-weight: bold;}
.create_layout_flash .clf_info > div > div > div:nth-child(2){margin-top: 5px;}
.create_layout_flash .clf_info > div > div:hover > div{text-decoration: underline;}
.create_layout_flash .clf_limit{position: relative; height: 0px;}
.create_layout_flash .clf_limit > div{position: absolute; right: 0; bottom: 0px; font-size: 12px; padding: 4px 9px; background: var(--bg_silver); border-radius: 7px 0px 0px 0px;}

.create_layout_short{max-width: 800px; margin-bottom: 25px;}
.create_layout_short .clsHead{margin-top: 25px; display: grid; grid-gap: 25px; grid-template-columns: 170px 1fr;}
.create_layout_short .clsHead > div{width: 100%;}
.create_layout_short .clsHead .chCover{padding-bottom: 150%; background-color: var(--bg_silver); border-radius: 10px;}
.create_layout_short .clsHead .chTitle{font-size: 30px;}
.create_layout_short .clsBody{margin-top: 20px;}

.create_layout_poetry{max-width: 700px; margin-bottom: 25px; margin-top: 25px; display: grid; grid-gap: 25px; grid-template-columns: 170px 1fr;}
.create_layout_poetry > div{width: 100%;}
.create_layout_poetry .cpCover{padding-bottom: 150%; background-color: var(--bg_silver); border-radius: 10px;}
.create_layout_poetry .cpTitle{font-size: 30px;}

.create_layout_cover{max-width: 800px; margin-top: 25px; margin-bottom: 25px;}
.create_layout_cover > div{display: grid; grid-template-columns: 300px 1fr; grid-gap: 25px;}
.create_layout_cover > div > div{width: 100%;}
.create_layout_cover .clcCover{padding-bottom: 150%; background-color: var(--bg_silver); border-radius: 10px;}
.create_layout_cover .clcContent{box-shadow: 0px 0px 0px 1px var(--bg_line); border-radius: 10px; overflow: hidden;}
.create_layout_cover .clcContent > div{padding: 20px;}

.create_monetize{padding: 20px 25px 25px 25px; background-color: var(--bg_silvercalm); overflow: hidden; background-image: url('../../../images/monetize.png'); background-repeat: no-repeat; background-size: 130px; background-position: top 0px right 0px; border-radius: 5px;}

.create_change_cover{display: grid; grid-template-columns: 1fr 1fr; grid-gap: 15px;}
.create_change_cover > div{width: 100%; padding: 25px 0px; margin-top: 15px; cursor: pointer; transition: var(--transition); text-align: center; border-radius: 10px; border: 1.5px solid var(--bg_silver);}
.create_change_cover > div:hover{background: var(--bg_silvercalm); border: 1.5px solid var(--bg_blue);}
.create_change_cover > div > div:first-child > div{width: 50px; height: 50px;}
.create_change_cover > div > div:nth-child(2){margin-top: 15px; font-weight: bold;}

.c_success{text-align: center; padding: 50px 0px 200px 0px;}

.c_cover{width: 140px; height: 210px; margin-bottom: 15px; background-color: var(--bg_silver); position: relative; overflow: hidden; border-radius: 7px;}
.c_cover > div{width: 100%; height: 100%; background: rgba(0, 0, 0, 0.25); cursor: pointer; position: absolute; top: 0px; left: 0px; opacity: 0;}
.c_cover > div > div{width: 40px; height: 40px; margin-top: 75px;}
.c_cover:hover > div{opacity: 1;}
.c_selected > div:first-child{margin-bottom: 5px; font-family: 'bold'; color: var(--text_silver);}
.c_selected > div:nth-child(2){display: table; table-layout: fixed; width: 100%; background: var(--bg_silvercalm); border-radius: 10px; margin-bottom: 35px;}
.c_selected > div:nth-child(2) > div{display: table-cell; cursor: pointer; position: relative; vertical-align: middle; text-align: center; padding: 35px 0px;}
.c_selected > div:nth-child(2) > div:hover{background: var(--bg_silver);}
.c_selected > div:nth-child(2) > div.active{background: #d0e5ff;}
.c_selected > div:nth-child(2) > div > div:first-child > div{width: 35px; height: 35px;}
.c_selected > div:nth-child(2) > div > div:nth-child(2){margin-top: 15px; font-family: 'bold'; font-size: 17px; color: var(--text_silver);}
.c_selected > div:nth-child(2) > div > div:nth-child(3){position: absolute; top: 15px; right: 15px; width: 30px; height: 30px; opacity: 0;}
.c_selected > div:nth-child(2) > div.active > div:nth-child(2){color: var(--text_blue);}
.c_selected > div:nth-child(2) > div.active > div:nth-child(3){opacity: 1;}
.c_info{padding: 20px 20px 25px 20px; margin-top: 15px; border: 1px solid silver; border-radius: 5px;}
.c_menu_space{height: 65px;}
.c_menu{width: 100%; z-index: 55; padding: 0px 15px; box-sizing: border-box; box-shadow: 0px 0px 10px silver; min-width: 900px; position: fixed; top: 0px; left: 0px; background: var(--bg_white); color: var(--text_black);}
.c_menu .cmBar{display: grid; grid-template-columns: 25px 1fr min-content; grid-gap: 15px; align-items: center; height: 65px; width: 100%;}
.c_menu .cmBar > div{width: 100%;}
.c_menu .cmBar .cbBack > div{width: 25px; height: 25px;}
.c_menu .cmBar .cbTitle > div:first-child{font-size: 11px; color: var(--text_silver);}
.c_menu .cmBar .cbTitle > div:nth-child(2){font-size: 17px; font-weight: bold;}
.c_menu .cmBar .cbOpt{white-space: nowrap;}
.c_menu .cmBar .cbOpt > div{display: inline-block;}
.c_menu .cmBar .cbOpt button{width: 100px;}
.c_preview_input{}
.c_preview_input .cpiCount{position: relative; width: 100%;}
.c_preview_input .cpiCount > div{position: absolute; padding: 3px 5px; border-radius: 3px; background: var(--bg_silver); bottom: 0px; right: 0px; font-size: 11px;}
.c_preview_input .cpiCount > div.warning{background: var(--bg_red); color: var(--text_white);}
.c_opt_update{display: grid; margin-top: 5px; grid-template-columns: 40px 1fr; align-items: center; font-size: 11px;}
.c_opt_update > div{width: 100%;}
.c_opt_update .couBtn{white-space: nowrap; font-size: 0px;}
.c_opt_update .couBtn > div{display: inline-block; padding: 3px 7px; cursor: pointer; background: var(--bg_silver); font-size: 11px;}
.c_opt_update .couBtn > div:first-child{border-radius: 5px 0px 0px 5px;}
.c_opt_update .couBtn > div:last-child{border-radius: 0px 5px 5px 0px;}
.c_opt_update .couBtn > div.active{background: var(--bg_blue); color: var(--text_white);}

.c_import > div{padding: 15px 20px; border-radius: 10px;}
.c_import > div.required{background: #ffdfdf;}
.c_import > div:not(:last-child){margin-bottom: 20px;}
.c_import > div > div:first-child{font-size: 17px; font-weight: bold; margin-bottom: 15px;}
.c_import > div.inputerror input[type=number]{box-shadow: 0px 0px 5px red;}
.c_import_loading{width: 100%; height: 100%; position: fixed; z-index: 95; top: 0px; left: 0px; background: rgba(0, 0, 0, 0.50); display: none;}
.c_import_loading > div{width: 100%; height: 100%; display: table; table-layout: fixed;}
.c_import_loading > div > div{display: table-cell; vertical-align: middle; text-align: center;}
.c_import_loading > div > div > div:first-child{font-size: 30px; font-family: 'bold'; color: var(--text_white);}
.c_import_loading > div > div > div:last-child{margin-top: 15px; font-size: 20px; color: var(--text_white);}

.c_import_section{max-width: 500px;}
.c_import_section .cisFile{padding: 12px 15px 15px 15px; border-radius: 10px; background: var(--bg_silvercalm);}
.c_import_section .cisMainTitle{font-size: 15px; font-weight: bold; padding: 15px;}

.c_alert{margin-top: 10px; padding: 5px 15px; border-radius: 5px; background: var(--bg_yellow); display: none;}

/**EDITOR**/
#editor_navbar{width: 100%;}
#editor_navbar > div{grid-gap: 15px; align-items: center; padding: 0px 15px; box-sizing: border-box;}
#editor_navbar .enMobile{height: 32px; display: none; grid-template-columns: min-content 1fr; background: var(--bg_white);}
#editor_navbar .enMain{height: 45px; display: grid; grid-template-columns: min-content min-content 1fr min-content; background: var(--bg_silver);}
#editor_navbar .enScript{height: 45px; display: grid; grid-template-columns: min-content min-content 1fr min-content; background: var(--bg_silver);}
#editor_navbar > div > div{width: 100%;}
#editor_navbar .enBtn{width: 35px; height: 35px; cursor: pointer;}
#editor_navbar .enBtn > div{width: 20px; height: 20px; position: relative; top: 7px;}
#editor_navbar .enBtn.ebhamburger{display: none;}
#editor_navbar .enTitle{line-height: 16px;}
#editor_navbar .enTitle > div:first-child{font-weight: bold; max-width: 250px;}
#editor_navbar.novel .enTitle > div:first-child{max-width: 150px;}
#editor_navbar .enTitle > div:nth-child(2){font-size: 11px; white-space: nowrap;}
#editor_navbar .enAs{float: right;}
#editor_navbar .enStatus{width: 80px; text-align: right; padding-right: 10px; font-size: 11px; font-weight: bold;}
#editor_navbar.script .enStatus{text-align: center;}
#editor_navbar .enStatus div{padding: 2px 0px 3px 0px; border-radius: 50px;}
#editor_navbar .enStatus div.draft{background: var(--bg_silverdark);}
#editor_navbar .enStatus div.publish{background: var(--bg_green); color: var(--text_white);}
#editor_navbar .enScript .enStatus{font-size: 13px;}
#editor_navbar .enMenu{white-space: nowrap; height: 45px; gap: 10px; display: flex; align-items: center;}
#editor_navbar .enMenu > div{display: inline-block;}
#editor_navbar .enMenu .enc_opt{width: 50px; cursor: pointer;}
#editor_navbar .enMenu .enc_opt:hover{opacity: 0.5;}
#editor_navbar .enMenu .enc_opt > div{width: 20px; height: 20px;}
#editor_navbar .enMenu .enc_save{width: 60px; cursor: pointer; padding-right: 10px;}
#editor_navbar .enMenu .enc_save > div{width: 60px; height: 30px; background: var(--bg_blue); border-radius: 5px;}
#editor_navbar .enMenu .enc_save > div > div{width: 20px; height: 20px; position: relative; top: 4px;}

.eoAutosave > span{padding: 5px 7px 5px 25px; white-space: nowrap; font-size: 11px; background: var(--bg_silvercalm); border-radius: 25px; position: relative; color: var(--text_silver); cursor: pointer;}
.eoAutosave > span:hover{box-shadow: var(--shadow); color: var(--text_black);}
.eoAutosave > span:before{content: ''; position: absolute; left: 7px; top: 6px; width: 13px; height: 13px; border-radius: 50%; background: var(--bg_orange);}
.eoAutosave.active > span{color: var(--text_black);}
.eoAutosave.active > span:before{background: var(--bg_green);}
.eoAutosave.active > span:hover{color: var(--text_silver);}
.eoAutosave.disabled{opacity: 0.5;}
.eoAutosave.disabled  > span{color: var(--text_silver);}
.eoAutosave.disabled > span:before{background: var(--bg_silver);}
.eoAutosave.disabled > span:hover{color: var(--text_silver);}

.ecAlertChange{padding: 15px; margin-bottom: 15px;}
.ecAlertChange.waiting{background: var(--bg_yellowcalm);}
.ecAlertChange.decline{background: var(--bg_redcalm);}
.ecAlertChange .cacTitle{font-size: 15px; font-weight: bold;}
.ecAlertChange .cacContent{margin-top: 10px;}
.ecAlertChange .cacBtn{margin-top: 15px; white-space: nowrap;}
.ecAlertChange .cacBtn > span{padding: 3px 7px; font-size: 11px; cursor: pointer; background: var(--bg_blue); color: var(--text_white); border-radius: 5px;}
.ecAlertChange .cacBtn > span.netral{background: var(--bg_silvercalm); color: var(--text_black);}
.ecAlertChange .cacBtn > span.cancel{background: var(--bg_red);}
.ecAlertChange .cacBtn > span:not(:last-child){margin-right: 5px;}

#editor_layout .elNavbar{height: 65px;}
#editor_layout .elNavbar > div{position: fixed; top: 0px; left: 0px; z-index: 55;}
#editor_layout .elAlert{padding: 0px 25px;}
#editor_layout .elContent{display: grid; grid-template-columns: 365px 1fr; grid-gap: 20px; padding: 0px 25px;}
#editor_layout .elContent > div{width: 100%;}
#editor_layout .elContent .ecContent{padding: 0px 20px 15px 20px; border-radius: 10px; border: 1px solid var(--bg_line);}

#editor_layout .elInfo{padding: 10px 15px 15px 15px; background: var(--bg_white); border-radius: 10px; border: 1px solid var(--bg_line);}
#editor_layout .elInfo .eiPhoto > div{width: 150px; height: 150px; background-color: var(--bg_silver); border-radius: 10px; position: relative; overflow: hidden;}
#editor_layout .elInfo .eiPhoto > div.required{box-shadow: 0px 0px 5px red;}
#editor_layout .elInfo .eiPhoto > div > div{width: 100%; height: 100%; cursor: pointer; background: rgba(0, 0, 0, 0.25); position: absolute; top: 0px; left: 0px; opacity: 0;}
#editor_layout .elInfo .eiPhoto > div:hover > div{opacity: 1;}
#editor_layout .elInfo .eiPhoto > div > div > div{width: 50px; height: 50px; margin-top: 43px;}
#editor_layout .elInfo > div:nth-child(2){margin-top: 20px;}
#editor_layout .elInfo > div:nth-child(3){margin-top: 20px;}
#editor_layout .elOptions{height: 37px; padding: 15px 0px; position: relative; position: sticky; top: 45px; background: var(--bg_base); z-index: 45; border-bottom: 1px solid var(--bg_silver);}
#editor_layout .clContent{overflow: hidden; min-height: 500px; border-radius: 10px; background: var(--bg_white); padding: 15px 0px;}
#editor_layout .clContent .page_alert{color: var(--text_silver);}
#editor_layout .clList{position: relative;}
#editor_layout .clList > div{padding: 10px 15px; position: relative; background: var(--bg_white);}
#editor_layout .clList > div:not(:last-child){border-bottom: 1px solid var(--bg_line);}
#editor_layout .clList > div > div:first-child{display: table; table-layout: fixed; width: 100%;}
#editor_layout .clList > div > div:first-child > div{display: table-cell; vertical-align: middle;}
#editor_layout .clList > div > div:first-child > div:first-child{width: 25px; text-align: center; font-weight: bold;}
#editor_layout .clList > div > div:first-child > div:nth-child(2){width: 90px; padding-left: 10px;}
#editor_layout .clList > div > div:first-child > div:nth-child(2) > div{height: 90px; background-color: var(--bg_silver); border-radius: 5px;}
#editor_layout .clList > div > div:first-child > div:nth-child(3){padding-left: 10px;}
#editor_layout .clList > div > div:nth-child(2){opacity: 0; position: absolute; top: 0px; right: 0px; width: 100%; height: 100%; background-image: linear-gradient(to right, transparent, var(--bg_white), var(--bg_white), var(--bg_white));}
#editor_layout .clList:not(.move_active) > div:hover > div:nth-child(2){opacity: 1;}
#editor_layout .clList > div > div:nth-child(2) > div{float: right; font-size: 17px; margin-top: 40px; margin-right: 35px;}
#editor_layout .clList.move_active > div > div:nth-child(3){position: absolute; width: 55px; height: 100%; background: var(--bg_silver); top: 0px; right: 0px; cursor: grab;}
#editor_layout .clList.move_active > div > div:nth-child(3):active{cursor: grabbing;}
#editor_layout .clList.move_active > div > div:nth-child(3) > div{width: 30px; height: 30px; position: relative; margin-left: 12px; top: 38px;}

#editor_script_layout{display: grid; grid-template-rows: 45px 1fr; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;}
#editor_script_layout > div{width: 100%; position: relative;}
#editor_script_layout .esl_content{display: grid; grid-template-columns: 300px 1fr; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;}
#editor_script_layout .esl_content > div{width: 100%; position: relative; overflow: auto;}
#editor_script_layout .esl_content > div:first-child{background: var(--bg_black);}

#editor_part_preview{display: none;}
#editor_part_preview .eppNavbar{position: fixed; top: 0px; z-index: 50; left: 0px; width: 100%; padding: 15px 0px; background: var(--bg_silvercalm); text-align: center;}
#editor_part_preview .eppNavbar > div:first-child{font-size: 15px; font-weight: bold;}
#editor_part_preview .eppNavbar > div:nth-child(2){margin-top: 5px;}
#editor_part_preview .eppNavbar > div:nth-child(2) span{padding: 3px 7px; font-size: 11px; cursor: pointer; border-radius: 5px; background: var(--bg_silver);}
#editor_part_preview .eppNavbar > div:nth-child(2) span:not(:last-child){margin-right: 5px;}
#editor_part_preview .eppNavbar > div:nth-child(2) span.cancel{background: var(--bg_red); color: var(--text_white);}
#editor_part_preview .eppAlert{margin-top: 80px; padding: 10px 15px; background: var(--bg_orangecalm);}
#editor_part_preview .eppContent{max-width: 700px; margin-top: 20px; padding: 0px 20px 25px 20px;}
#editor_part_preview .eppContent > div:not(:last-child){margin-bottom: 25px;}
#editor_part_preview .eppContent .epcTitle > div:nth-child(2){font-size: 15px; font-weight: bold;}
#editor_part_preview .eppContent .epcContent > div:nth-child(2){font-size: 17px; margin-top: 5px; font-family: 'novel';}
#editor_part_preview .eppContent .epcFootnote > div:nth-child(2){color: var(--text_silver); font-size: 11px;}

.editor_autosave{position: fixed; display: none; bottom: 0px; right: 0px; background: var(--bg_silver); padding: 5px 7px; font-size: 11px; border-radius: 10px 0px 0px 0px; z-index: 11;}

.elBanner{margin-bottom: 20px; position: relative;}
.elBanner > div:first-child{padding-bottom: 40%; margin-bottom: 15px; border-radius: 10px; background-color: var(--bg_silverdark);}
.elBanner > div:nth-child(2){margin-top: 10px; position: absolute; bottom: 10px; left: 10px;}

.enlcHead{top: 67px; display: grid; width: 100%; grid-gap: 15px;}
.enlcHead.eh2{grid-template-columns: 1fr min-content;}
.enlcHead.eh3{grid-template-columns: 1fr min-content min-content;}
.enlcHead > div{width: 100%; white-space: nowrap;}
.enlcHead > div:first-child{font-size: 17px; font-weight: bold; position: relative;}
.enlcHead > div:nth-child(2) span{font-family: 'bold';}
.enlcHead .ehList{display: flex; flex-wrap: wrap; gap: 15px; align-items: center;}
.enlcHead .ehList > div{display: inline-flex;}
.enlcHead .ehList > div:last-child{flex-grow: 1;}
.enlcHead .ehBtn{width: 20px; height: 20px;}
.enlcHead .chListBtn{white-space: nowrap;}
.enlcHead .chListBtn > div{display: inline-block;}
.enlcHead .chListBtn > div:not(:last-child){margin-right: 5px;}
.enlcHead .ch_button{border-radius: 50px; cursor: pointer; padding: 5px 15px; display: grid; background: var(--bg_blue); color: var(--text_white); grid-template-columns: 15px 1fr; grid-gap: 10px; align-items: center;}
.enlcHead .ch_button:hover{box-shadow: 0px 0px 0px 1px #444444;}
.enlcHead .ch_button > div{width: 100%;}
.enlcHead .ch_button > div:first-child > div{width: 15px; height: 15px;}
.enlcHead .chWriteMode{padding: 3px 7px; cursor: pointer; font-size: 9px; background: var(--bg_orange); cursor: pointer; color: var(--text_white); border-radius: 5px;}

.enlc_title{padding: 15px; font-size: 17px; margin-bottom: 10px; background: transparent;}
.enlc_content{padding-bottom: 15px;}
.enlcHead{z-index: 10; background: var(--bg_white); padding: 15px 0px 8px 0px;}
.enlc_content:not(.ecSticky) .enlcHead{top: 45px; align-items: center;}
.enlc_content.ecSticky .enlcHead{top: 67px; position: sticky; border-bottom: 1px solid var(--bg_silverdark); align-items: center;}
.enlc_content .ecBody{}
.enlc_content .ecInfo{margin-top: 25px;}
.enlc_content .ecAdult{margin-top: 20px;}

.eslc_part{}
.eslc_part .ep_option{height: 48px; position: relative; overflow: hidden;}
.eslc_part .ep_option .epoAdd{position: fixed; padding: 8px; top: 51px; left: 12px; z-index: 10; cursor: pointer; border-radius: 50%; background: var(--bg_blue); display: grid; grid-template-columns: 20px; grid-gap: 15px; box-sizing: border-box;}
.eslc_part .ep_option .epoAdd > div{width: 100%;}
.eslc_part .ep_option .epoAdd > div:first-child > div{height: 20px;}
.eslc_part .ep_option .epoAdd > div:nth-child(2){display: none; font-weight: bold; color: var(--text_white);}
.eslc_part .ep_option .epoAdd:hover{border-radius: 50px;}
.eslc_part .ep_option .epoAdd:hover{padding: 8px 10px 8px 8px; grid-template-columns: 20px 1fr;}
.eslc_part .ep_option .epoAdd:hover > div:nth-child(2){display: block;}
.eslc_part .ep_option .epoInfo{width: 100%; height: 48px; display: table; table-layout: fixed; display: none;}
.eslc_part .ep_option .epoInfo > div{display: table-cell; vertical-align: middle; padding-left: 15px;}
.eslc_part .ep_option .epoInfo > div:first-child{width: 20px;}
.eslc_part .ep_option .epoInfo > div:first-child > div{height: 20px;}
.eslc_part .ep_option .epoInfo > div:nth-child(2){padding-left: 10px; padding-right: 65px;}
.eslc_part .ep_option .epoInfo > div:nth-child(2) > div:first-child{color: var(--text_white); font-family: 'bold';}
.eslc_part .ep_option .epoInfo > div:nth-child(2) > div:nth-child(2){font-size: 11px; color: var(--text_silver);}
.eslc_part .ep_list > div > div{padding: 15px 20px; transition: all 0.2s ease; position: relative;}
.eslc_part .ep_list > div > div:before{content: ''; position: absolute; left: 0px; top: 0px; width: 5px; height: 100%;}
.eslc_part .ep_list > div.active > div{background: #383838;}
.eslc_part .ep_list > div:hover:not(.active) > div{background: #404040;}
.eslc_part .ep_list > div:not(:last-child) > div{border-bottom: 1px solid var(--bg_blackcalm);}
.eslc_part .ep_list > div.draft > div:before{background: var(--bg_silverdark);}
.eslc_part .ep_list > div.waiting > div:before{background: var(--bg_orange);}
.eslc_part .ep_list > div.published > div:before{background: var(--bg_green);}
.eslc_part .ep_list > div > div > div{display: table; table-layout: fixed; width: 100%;}
.eslc_part .ep_list > div > div > div > div{display: table-cell; vertical-align: top;}
.eslc_part .ep_list > div > div > div > div:first-child{width: 25px;}
.eslc_part .ep_list .eplMove{width: 25px; height: 25px; cursor: grabbing; background: var(--bg_blackdark); border-radius: 5px;}
.eslc_part .ep_list .eplMove:hover{box-shadow: 0px 0px 0px 1px var(--bg_white);}
.eslc_part .ep_list .eplMove > div{width: 20px; height: 20px; position: relative; top: 2px;}
.eslc_part .ep_list > div > div > div > div:nth-child(2){padding-left: 15px; color: var(--text_white); cursor: pointer;}
.eslc_part .ep_list > div > div > div > div:nth-child(2) > div:first-child{font-family: 'bold';}
.eslc_part .ep_list > div > div > div > div:nth-child(2) > div:nth-child(2){font-size: 11px; color: var(--text_silver);}
.eslc_part .ep_list > div > div > div > div:nth-child(2) > div:nth-child(3) span{padding: 2px 5px 3px 5px; border-radius: 5px; font-size: 9px;}
.eslc_part .ep_list > div.draft > div > div > div:nth-child(2) > div:nth-child(3) span{background: var(--bg_silverdark); color: var(--text_black);}
.eslc_part .ep_list > div.waiting > div > div > div:nth-child(2) > div:nth-child(3) span{background: var(--bg_orange);}
.eslc_part .ep_list > div.decline > div > div > div:nth-child(2) > div:nth-child(3) span{background: #ffdede; color: var(--text_black);}
.eslc_part .ep_list > div.published > div > div > div:nth-child(2) > div:nth-child(3) span{background: var(--bg_green);}
.eb_title{padding: 20px 30px; font-size: 30px; margin-bottom: 30px; background: transparent;}
.eb_desc{padding: 20px 30px; font-size: 20px; line-height: 35px; background: transparent;}
.eb_rt{padding-bottom: 15px; position: relative;}
.editor_alert_info{padding: 10px 20px; color: var(--text_white);}
.editor_alert_info.decline{background: var(--bg_red);}
.editor_alert_info.curation{background: var(--bg_orange);}
.editor_alert_info.accepted{background: var(--bg_green);}
.editor_alert_info span{font-family: 'bold'; color: var(--text_blue); text-decoration: underline; cursor: pointer;}

.epoMove{position: absolute; top: 10px; display: none; right: 15px;}
.epoMove > div{display: grid; grid-template-columns: 1fr 1fr; align-items: center; background: var(--bg_orange); border-radius: 50px; overflow: hidden; width: 105px;}
.epoMove > div > div{width: 100%; font-size: 11px; text-align: center; padding: 5px 0px; color: var(--text_white); transition: var(--transition);}
.epoMove > div > div:nth-child(2){background: var(--bg_blue);}
.epoMove > div > div:hover{color: var(--text_black); background: var(--bg_silver); cursor: pointer;}

.epoAutosave{position: absolute; top: 57px; display: none; left: 195px;}
.epoAutosave > span{padding: 5px 7px 5px 25px; font-size: 11px; background: var(--bg_silvercalm); border-radius: 25px; position: relative; color: var(--text_silver); cursor: pointer;}
.epoAutosave > span:hover{box-shadow: var(--shadow); color: var(--text_black);}
.epoAutosave > span:before{content: ''; position: absolute; left: 7px; top: 6px; width: 13px; height: 13px; border-radius: 50%; background: var(--bg_orange);}
.epoAutosave.active > span{color: var(--text_black);}
.epoAutosave.active > span:before{background: var(--bg_green);}
.epoAutosave.active > span:hover{color: var(--text_silver);}

.editor_close{width: 100%; height: 100%; cursor: pointer; position: fixed; top: 0px; left: 0px; z-index: 51; background: rgba(0, 0, 0, 0.50); display: none;}
.editor_character{max-height: calc(100vh - 250px); overflow: auto;}
.editor_character_list > li{position: relative;}
.editor_character_list > li > div:first-child:hover{color: var(--text_blue);}
.editor_character_list > li > div:nth-child(2){position: absolute; right: 7px; top: 10px; width: 20px; height: 20px;}
.editor_character_list > li > div:nth-child(2):hover{opacity: 0.25;}

.editor_alert{position: fixed; bottom: 20px; right: 20px; width: 100%; display: none;}
.editor_alert > div{padding: 10px 20px; max-width: 400px; width: 70%; position: absolute; right: 0px; bottom: 0px; background: rgba(254, 9, 9, 0.25); cursor: pointer; font-size: 11px; border-radius: 10px;}

.editor_part_intro{padding-top: 15px;}
.editor_part_intro > div:first-child{padding: 0px 15px; font-family: 'bold';}
.editor_part_intro > div:nth-child(2){padding: 0px 15px; margin-top: 10px;}
.editor_part_intro > div:nth-child(3){margin-top: 15px; background-size: 100%; background-image: url('../../../images/others/editor-script-part-button.png'); padding-bottom: 17%;}
.editor_part_intro > div:nth-child(4){padding: 0px 15px; margin-top: 15px;}
.editor_part_intro > div:nth-child(4) > div > div:first-child{color: var(--text_blue); font-family: 'bold'; margin-bottom: 5px;}
.editor_part_intro > div:nth-child(4) > div:not(:last-child){margin-bottom: 10px;}

.editor_change{display: grid; grid-template-columns: 1fr 50px; padding: 5px 0px; align-items: center;}
.editor_change > div{width: 100%;}
.editor_change > div:first-child > div:first-child{font-weight: bold;}
.editor_change > div:first-child > div:nth-child(2){font-size: 11px; margin-top: 2px; color: var(--text_silver);}
.editor_change > div:nth-child(2){text-align: center;}

.editor_part_schene_heading{display: grid; grid-template-columns: 1fr 10px 120px; align-items: center; grid-gap: 15px;}
.editor_part_schene_heading > div{width: 100%;}

/**COVER EDITOR**/
.coverEditor_layout{display: grid; grid-template-rows: 50px 1fr; min-height: 100vh;}
.coverEditor_layout > div{width: 100%; height: 100%; position: relative;}
.coverEditor_layout .clNavbar{height: 50px; background: var(--bg_blue);}
.coverEditor_layout .clNavbar > div{max-width: 1200px; padding: 0px 20px;}
.coverEditor_layout .clNavbar .cnTitle{float: left; display: grid; grid-template-columns: 50px 1fr; grid-gap: 15px; height: 45px; align-items: center;}
.coverEditor_layout .clNavbar .cnTitle > div{width: 100%; color: var(--text_white);}
.coverEditor_layout .clNavbar .cnTitle > div:first-child > div{width: 25px; height: 25px;}
.coverEditor_layout .clNavbar .cnTitle > div:nth-child(2) > div:first-child{font-weight: bold; font-size: 17px;}
.coverEditor_layout .clNavbar .cnTitle > div:nth-child(2) > div:nth-child(2){font-size: 8px; color: var(--text_silver); position: relative; top: -2px;}
.coverEditor_layout .clNavbar .cnMenu{float: right; margin-top: 10px;}
.coverEditor_layout .clNavbar .cnMenu > div{display: inline-block; cursor: pointer;}
.coverEditor_layout .clNavbar .cnMenu > div:not(:last-child){margin-right: 5px;}
.coverEditor_layout .clNavbar .cnMenu > div > div{display: grid; grid-template-columns: 15px 1fr; grid-gap: 10px; align-items: center; padding: 3px 15px; background: var(--bg_white); border-radius: 50px; box-sizing: border-box;}
.coverEditor_layout .clNavbar .cnMenu > div > div > div{width: 100%;}
.coverEditor_layout .clNavbar .cnMenu > div > div > div:first-child > div{width: 15px; height: 15px;}
.coverEditor_canvas iframe{width: 100%; height: 100%; border: none; position: absolute; top: 0px; left: 0px;}

.ecInfo{margin-top: 15px; margin-bottom: 15px;}
.ecInfo > div:first-child{font-size: 15px; font-weight: bold;}
.ecInfo > div:nth-child(2){margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 15px;}
.ecInfo > div:nth-child(2) > div{width: 100%;}

.ecFootnote{margin-top: 15px; margin-bottom: 15px;}
.ecFootnote > div:first-child{font-size: 15px;}
.ecFootnote > div:nth-child(2){margin-top: 10px;}

/**CONTENT: NOVEL**/
.n_box > div > div:last-child{padding-left: 15px;}
.n_box > div > div:last-child > div:first-child > div:first-child{padding: 20px 30px 0px 30px;}
.n_box > div > div:last-child > div:first-child > div:first-child > div:nth-child(1){font-size: 30px;}
.n_box > div > div:last-child > div:first-child > div:first-child > div:nth-child(2){margin-top: 15px; display: inline-block; width: 100%;}
.n_box > div > div:last-child > div:first-child > div:first-child > div:nth-child(2) > div{float: left; padding: 0px 20px; text-align: center; position: relative;}
.n_box > div > div:last-child > div:first-child > div:first-child > div:nth-child(2) > div:not(:last-child){border-right: 1px solid #e0e0e0;}
.n_box > div > div:last-child > div:first-child > div:first-child > div:nth-child(2) > div.change > span{display: none; cursor: pointer; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: var(--bg_base);}
.n_box > div > div:last-child > div:first-child > div:first-child > div:nth-child(2) > div.change:hover > span{display: block;}
.n_box > div > div:last-child > div:first-child > div:first-child > div:nth-child(2) > div.change > span > span{position: relative; top: 17px;}
.n_box > div > div:last-child > div:first-child > div:first-child > div:nth-child(2) > div > div:first-child{margin-top: 10px; font-size: 17px;}
.n_box > div > div:last-child > div:first-child > div:first-child > div:nth-child(2) > div > div:last-child{margin-bottom: 10px; margin-top: 3px; font-size: 11px; color: silver;}
.n_box > div > div:last-child > div:last-child{margin-top: 20px; background: white;}
.n_change{position: fixed; top: 64px; left: 0px; z-index: 55; background: var(--bg_yellow); width: 100%;}
.n_change.decline{background: var(--bg_redcalm);}
.n_change > div{padding: 10px 0px; text-align: center;}
.n_content{margin-bottom: 20px;}
.n_content > div:first-child{position: relative;}
.n_content > div:first-child > div:first-child{height: 260px; overflow: hidden; position: absolute; width: 100%; top: 0px; left: 0px;}
.n_content > div:first-child > div:first-child:before{content: ''; position: absolute; bottom: 0px; left: 0px; width: 100%; height: 200%; background-image: linear-gradient(to bottom, transparent, var(--bg_white));}
.n_content > div:first-child > div:nth-child(2){max-width: 700px; height: 280px; border-radius: 0px 0px 15px 15px; background-color: var(--bg_white); position: relative; z-index: 1;}
.n_content > div:first-child > div:nth-child(3){max-width: 700px; padding: 25px 0px 20px 0px; text-align: center;}
.n_content > div:first-child > div:nth-child(3) > div:first-child{font-size: 17px; font-family: 'bold'; margin-bottom: 10px;}
.n_content > div:first-child > div:nth-child(3) > div:nth-child(2){font-size: 30px; font-family: 'novel'; font-weight: 'bold';}
.n_content > div:nth-child(2){max-width: 700px; padding: 25px 80px 80px 80px; min-height: 500px;}
.n_content > div:nth-child(2) .description p{font-size: 20px;}
.n_content > div:nth-child(2) > div:first-child{line-height: 40px; font-size: 22px; vertical-align: top;}
.n_content.novel div:nth-child(2) > div:first-child{text-indent: 60px; font-family: 'novel'; text-align: justify;}
.n_content.script > div:nth-child(2) > div:first-child{font-family: 'script';}
.n_content > div:nth-child(2) > div:nth-child(2){margin-top: 15px; font-size: 11px;}

.n_history_option{display: inline-block; width: 100%; padding: 15px 0px;}
.n_history_option > div:first-child{height: 35px; float: left; cursor: pointer;}
.n_history_option > div:first-child > div:first-child{width: 35px; height: 35px; position: relative; top: 7px; float: left;}
.n_history_option > div:first-child > div:first-child > div{width: 20px; height: 20px;}
.n_history_option > div:first-child > div:nth-child(2){float: left; margin: 7px 0px 0px 5px; font-weight: bold;}
.n_history_option > div:nth-child(2){float: right; height: 35px;}
.n_history_option > div:nth-child(2) > div{padding: 7px 10px 10px 10px; float: left; font-weight: bold; cursor: pointer;}
.n_history_content{max-width: 600px;}
.n_history_content > div{border: 1px solid var(--bg_silver);}
.n_history_content > div > div:first-child{padding: 15px 25px; background: var(--bg_silvercalm);}
.n_history_content > div > div:first-child > div:first-child{font-family: 'bold'; font-size: 17px;}
.n_history_content > div > div:first-child > div:nth-child(2){margin-top: 3px;}
.n_history_content > div > div:nth-child(2){padding: 0px 25px;}
.n_history_content > div > div:nth-child(2) > div:first-child{margin-bottom: 15px;}
.n_history_content > div > div:nth-child(2) > div:nth-child(2) > div{margin-bottom: 20px;}
.n_history_content > div > div:nth-child(2) > div:nth-child(2) > div{margin-bottom: 20px;}
.n_history_content > div > div:nth-child(2) > div:nth-child(2) > div > div:first-child{font-weight: bold; margin-bottom: 3px; font-size: 17px;}
.n_history_content > div > div:nth-child(2) > div:nth-child(2) > div > div:last-child .description p{font-size: 20px;}
.n_history_content > div > div:nth-child(2) > div:nth-child(2) > div > div:last-child > div{line-height: 40px; font-size: 22px; vertical-align: top;}
.n_history_content.novel > div > div:nth-child(2) > div:nth-child(2) > div > div:last-child > div{text-indent: 60px; font-family: 'novel'; text-align: justify;}
.n_history_content.script > div > div:nth-child(2) > div:nth-child(2) > div > div:last-child > div{font-family: 'script';}

.n_star{width: 100%; display: inline-block;}
.n_star > div{float: left; width: 300px; margin: 20px;}
.n_star > div > div:first-child{display: table; table-layout: fixed; width: 100%;}
.n_star > div > div:first-child > div{display: table-cell; vertical-align: middle;}
.n_star > div > div:first-child > div:first-child{font-size: 17px; font-weight: bold; padding-left: 20px;}
.n_star > div > div:first-child > div:nth-child(2){width: 80px;}
.n_star > div > div:first-child > div:nth-child(2) > div{padding: 5px 10px; border-radius: 5px; background: var(--bg_blue); color: var(--text_white); width: 42px; text-align: center; font-size: 20px; font-family: 'bold';}
.n_star > div > div:nth-child(2){margin-top: 10px;}
.n_star > div > div:nth-child(2) > div{display: table; table-layout: fixed; width: 100%;}
.n_star > div > div:nth-child(2) > div > div{display: table-row;}
.n_star > div > div:nth-child(2) > div > div > div{display: table-cell; padding: 0px 15px; vertical-align: middle;}
.n_star > div > div:nth-child(2) > div > div > div:first-child > div{width: 100px; height: 18px; float: left;}
.n_star > div > div:nth-child(2) > div > div > div:last-child{text-align: right; font-size: 17px; font-family: 'bold';}
.n_star > div > div:nth-child(3){margin-top: 7px; padding-left: 15px; color: var(--text_silver);}

.n_boost{width: 100%; height: 100%; position: fixed; background: rgba(0, 0, 0, 0.30); z-index: 100; top: 0px; left: 0px; display: none;}
.n_boost > div{width: 200px; height: 200px; position: absolute; bottom: -100px; transition:all 1.5s ease; left: 0px; right: 0px; background-image: url('../../../images/boost.png'); background-size: 100%; opacity: 0.5;}

/**PREVIEW**/
.prev_header{padding: 10px 15px; margin-top: 15px; border: 1px solid var(--bg_line); border-radius: 10px; display: grid; grid-template-columns: 45px 1fr; grid-gap: 20px; box-sizing: border-box;}
.prev_header > div{width: 100%;}
.prev_header .phCover{padding-bottom: 150%; background-color: var(--bg_silvercalm); border-radius: 5px;}
.prev_header .phType > span{padding: 3px 5px; border-radius: 3px; background: var(--bg_silver); font-size: 11px;}
.prev_header .phTitle{margin-top: 5px;}
.prev_header .phSubTitle{margin-top: 5px; font-size: 15px; font-weight: bold;}

.prev_option{max-width: 685px; margin-top: 20px; display: grid; grid-template-columns: 1fr 25px; align-items: center;}
.prev_option > div{width: 100%;}
.prev_option .poOpt{width: 25px; height: 25px; cursor: pointer;}

.prev_info{max-width: 650px; margin-top: 25px; padding: 15px; border-radius: 10px; background: var(--bg_silvercalm);}
.prev_info > div:nth-child(2){margin-top: 10px;}

.prev_content{max-width: 650px; padding: 15px 20px; border: 1px solid var(--bg_line); border-radius: 10px; margin: 20px auto;}
.prev_content_novel{text-indent: 60px; font-family: 'novel'; text-align: justify;}
.prev_footnote{margin-top: 15px; border-top: 1px solid var(--bg_line); padding-top: 15px; font-size: 11px; color: var(--text_silver);}

.prev_content_comic{font-size: 0px; text-align: center;}
.prev_content_comic img{width: 100%; max-width: 600px;}

/**PREMIUM**/
.premium_option{display: grid; grid-template-columns: 1fr 1fr; grid-gap: 15px;}
.premium_option > div{width: 100%; border: 1.5px solid var(--bg_line); background: var(--bg_white); cursor: pointer; transition: var(--transition); border-radius: 10px;}
.premium_option > div:hover{border: 1.5px solid var(--bg_blue);}
.premium_option .poItem{padding: 15px; display: grid; grid-template-columns: 65px 1fr; grid-gap: 15px; align-items: top; box-sizing: border-box;}
.premium_option .poItem > div{width: 100%;}
.premium_option .poItem > div:first-child > div{padding-bottom: 100%;}
.premium_option .poItem > div:nth-child(2) > div:first-child{font-weight: bold; margin-bottom: 3px;}

.premium_package{display: grid; grid-template-columns: 1fr 1fr; grid-gap: 15px;}
.premium_package > div{width: 100%; border: 1.5px solid var(--bg_line); border-radius: 10px;}
.premium_package .ppItem{padding: 15px; display: grid; grid-template-columns: 65px 1fr; grid-gap: 15px; align-items: top; box-sizing: border-box;}
.premium_package .ppItem > div{width: 100%;}
.premium_package .ppItem > div:first-child > div{padding-bottom: 100%;}
.premium_package .ppItem > div:nth-child(2) > div:first-child{font-weight: bold; font-size: 15px;}
.premium_package .ppItem .piDesc{color: var(--text_silver);}
.premium_package .ppItem .piList{margin-top: 10px;}
.premium_package .ppItem .piList > div:nth-child(2){margin-top: 5px; margin-left: 20px; font-size: 11px;}
.premium_package .ppItem .piList > div:nth-child(2) > div{position: relative;}
.premium_package .ppItem .piList > div:nth-child(2) > div:before{content: ''; position: absolute; left: -15px; top: 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--bg_silver);}
.premium_package .ppItem .piList > div:nth-child(2) > div:not(:last-child){margin-bottom: 3px;}

/**CHAT**/
.chat{margin-bottom: 15px;}
.chat > div:first-child{padding: 20px;}
.chat > div:last-child{border: 1px solid var(--bg_line); border-radius: 10px; background: var(--bg_white); overflow: hidden; display: table; width: 100%; table-layout: fixed; min-height: 500px;}
.chat > div:last-child > div{display: table-cell; vertical-align: top;}
.chat > div:last-child > div:first-child{width: 250px; min-height: 500px; border-right: 1px solid var(--bg_silver);}
.chat > div:last-child > div:first-child > div:first-child{padding: 15px 20px; text-align: center; background: var(--bg_silver);}
.chat > div:last-child > div:first-child > div:last-child > div{padding: 15px 20px; cursor: pointer;}
.chat > div:last-child > div:first-child > div:last-child > div:hover{background: var(--bg_silvercalm);}
.chat > div:last-child > div:first-child > div:last-child > div.new{background: var(--bg_bluecalm);}
.chat > div:last-child > div:first-child > div:last-child > div.active{background: var(--bg_basedark);}
.chat > div:last-child > div:first-child > div:last-child > div:not(:last-child){border-bottom: 1px solid var(--bg_line);}
.chat > div:last-child > div:first-child > div:last-child > div > div{display: table; width: 100%; table-layout: fixed;}
.chat > div:last-child > div:first-child > div:last-child > div > div > div{display: table-cell; vertical-align: middle;}
.chat > div:last-child > div:first-child > div:last-child > div > div > div:first-child{width: 30px;}
.chat > div:last-child > div:first-child > div:last-child > div > div > div:first-child > div{height: 30px; border-radius: 50%;}
.chat > div:last-child > div:first-child > div:last-child > div > div > div:last-child{padding-left: 10px;}
.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 var(--bg_line);}
.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: var(--bg_silvercalm); 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: var(--bg_bluesoft); float: left; border-radius: 15px 15px 15px 0px;}

/**CHAT CURATOR**/
.chat_curator_layout{display: grid; grid-template-columns: 300px 1fr; grid-gap: 20px;}
.chat_curator_layout > div{width: 100%;}

.chat_curator_head{padding: 15px 20px; background: var(--bg_silvercalm); border-radius: 10px;}
.chat_curator_head textarea{background: var(--bg_white);}
.chat_curator_head .cchTitle{font-weight: bold; font-size: 15px;}

/**ORDER**/
.order_offline_head{background: var(--bg_white); border-radius: 5px; box-shadow: var(--shadow); padding: 15px 20px;}
.order_head > div{display: grid; grid-template-columns: 1fr 150px; grid-gap: 15px; align-items: center; padding: 10px; border: 1.5px solid var(--bg_line); border-radius: 10px;}
.order_head > div > div{width: 100%;}
.order_head > div .phBox > div:first-child{font-size: 11px; color: var(--text_silver);}
.order_head > div .phBox > div:nth-child(2){font-family: 'bold'; margin-top: 2px; font-size: 15px;}
.order_head > div .phBox > div:nth-child(3){font-size: 11px; font-weight: bold;}
.order_head > div .phStatus{text-align: right;}
.order_head > div .phStatus span{padding: 3px 7px; border-radius: 5px; background: var(--bg_orange); font-size: 11px; color: var(--text_white);}
.order_head > div .phStatus.waiting span{background: var(--bg_silverdark);}
.order_head > div .phStatus.process span{background: var(--bg_orange);}
.order_head > div .phStatus.finished span{background: var(--bg_green);}
.order_head > div .phStatus.failed span{background: var(--bg_red);}
.order_head > div .phStatus > div:nth-child(2){margin-top: 3px; font-size: 11px;}
.order_head > div .phStatus > div:nth-child(2) > div:first-child{color: var(--text_silver);}
.order_head > div .phStatus > div:nth-child(2) > div:nth-child(2){color: var(--text_red);}

.order_opt{margin: 20px 0px; display: grid; grid-template-columns: 1fr 200px; grid-gap: 15px; align-items: center;}
.order_opt > div{width: 100%;}
.order_opt .ooAction > div:first-child{margin-bottom: 5px; font-family: 'bold'; color: var(--text_orange);}
.order_opt .ooAction > div:nth-child(2) button:not(:last-child){margin-right: 15px;}

.order_detail_offline{padding: 15px 0px;}
.order_detail_offline .odoUser{display: grid; grid-template-columns: 35px 1fr; grid-gap: 15px; align-items: center;}
.order_detail_offline .odoUser > div{width: 100%;}
.order_detail_offline .odoUser > div:first-child > div{width: 35px; height: 35px; background-color: var(--bg_silver); border-radius: 50%;}
.order_detail_offline .odoUser > div:nth-child(2) > div:first-child{font-family: 'bold';}
.order_detail_offline .odoUser > div:nth-child(2) > div:nth-child(2){font-size: 11px;}
.order_detail_offline .odoInfo{margin-top: 10px; margin-bottom: 15px; display: grid; grid-template-columns: 1fr 300px; grid-gap: 15px;}
.order_detail_offline .odoInfo > div{width: 100%;}
.order_detail_offline .odoInfo > div > div:first-child{font-family: 'bold'; margin-bottom: 5px;}
.order_detail_offline .odoInfo .odCourier > div:nth-child(2){margin-top: 5px;}
.order_detail_offline .odoInfo .odCourier > div:nth-child(2) > div:first-child{font-size: 11px; color: var(--text_silver);}
.order_detail_offline .odoPrice{display: grid; grid-template-columns: 1fr 1fr 1fr; padding-top: 15px; grid-gap: 15px; border-top: 1px solid var(--bg_line);}
.order_detail_offline .odoPrice > div{width: 100%;}
.order_detail_offline .odoPrice > div > div:first-child{color: var(--text_silver);}

.order_timeline_offline{display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; margin: 30px 0px 5px 0px;}
.order_timeline_offline > div{width: 100%; text-align: center; position: relative;}
.order_timeline_offline > div:before{content: ''; position: absolute; top: 8px; left: 0px; width: 100%; height: 3px; background: var(--bg_silverdark);}
.order_timeline_offline > div:first-child:before{width: 50%; left: auto; right: 0px;}
.order_timeline_offline > div:last-child:before{width: 50%; left: 0px; right: auto;}
.order_timeline_offline > div > div:first-child{width: 20px; height: 20px; background: var(--bg_silverdark); border-radius: 50%; position: relative; z-index: 1;}
.order_timeline_offline > div > div:nth-child(2){margin-top: 5px; font-size: 11px; color: var(--text_silver);}
.order_timeline_offline > div.active:before{background: var(--bg_green);}
.order_timeline_offline > div.active > div:first-child{background: var(--bg_green);}
.order_timeline_offline > div.active > div:nth-child(2){color: var(--text_green);}

.order_item_offline{margin-bottom: 15px; border-radius: 5px; border: 1px solid var(--bg_line);}
.order_item_offline > div{padding: 15px 20px; display: grid; grid-template-columns: 1fr 100px 150px; grid-gap: 15px;}
.order_item_offline > div:not(:last-child){border-bottom: 1px solid var(--bg_line);}
.order_item_offline > div > div{width: 100%;}
.order_item_offline > div > div > div:first-child{font-family: 'bold';}
.order_item_offline > div > div > div:nth-child(2){color: var(--text_silver);}
.order_item_offline .cioChange{font-size: 11px; color: var(--text_silver);}

.order_detail_tracking{margin-top: 15px; border-radius: 5px; border: 1px solid var(--bg_line);}
.order_detail_tracking > div{padding: 10px 15px;}
.order_detail_tracking > div:not(:last-child){border-bottom: 1px solid var(--bg_line);}
.order_detail_tracking > div > div:first-child{color: var(--text_silver); font-size: 11px;}
.order_detail_tracking .ttdStatus{margin-top: 3px;}
.order_detail_tracking .ttdStatus span{padding: 3px 7px; color: var(--text_white); border-radius: 5px; font-size: 11px; background: var(--bg_silver);}
.order_detail_tracking .ttdStatus span.process{background: var(--bg_orange);}
.order_detail_tracking .ttdStatus span.delivered{background: var(--bg_green);}
.order_detail_tracking .ttdPod{margin-top: 5px; font-size: 11px;}
.order_detail_tracking .ttdPod span{font-family: 'bold';}

.order_print{padding: 20px; border: 1.5px solid var(--bg_black); margin-top: 25px; width: 400px; display: inline-block; position: relative;}
.order_print .opWatermark{content: ''; width: 65px; height: 65px; position: absolute; top: 5px; right: 0px; background-size: cover; background-image: url('../../../');}
.order_print .opWatermark img{width: 100%;}
.order_print > div{position: relative;}
.order_print .opInv{padding-bottom: 15px; border-bottom: 1px solid var(--bg_black); margin-bottom: 10px;}
.order_print .opInv > div:first-child{font-size: 11px;}
.order_print .opInv > div:nth-child(2){font-size: 15px; font-weight: bold;}
.order_print .opDetail{display: grid; grid-template-columns: 1fr 1fr 1fr; border-bottom: 1px solid var(--bg_black); padding-bottom: 15px; margin-bottom: 15px;}
.order_print .opDetail > div{width: 100%;}
.order_print .opDetail > div > div:first-child{font-size: 11px;}
.order_print .opDetail > div > div:nth-child(2){font-weight: bold;}
.order_print .opSender > div:first-child{font-family: 'bold';}
.order_print .opItems{border-bottom: 1px solid var(--bg_black); padding-bottom: 15px; margin-bottom: 15px;}
.order_print .opItems > div{}
.order_print .opRecipient{margin-top: 25px;}
.order_print .opRecipient > div:first-child{font-family: 'bold';}

/**MARKET**/
.market_first{display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 20px; margin-top: 35px; margin-bottom: 25px;}
.market_first > a{width: 100%;}
.market_first .mfOpt{padding: 20px 0px; border-radius: 10px; transition: var(--transition);}
.market_first > a:hover .mfOpt{box-shadow: inset 0px 0px 0px 3px var(--bg_white);}
.market_first .mfOpt.book{background: var(--bg_orange);}
.market_first .mfOpt.merchan{background: var(--bg_green);}
.market_first .mfOpt > div:first-child{width: 50px; height: 50px;}
.market_first .mfOpt > div:nth-child(2){margin-top: 15px; text-align: center; color: var(--text_white); font-weight: bold;}
.market_layout_add{max-width: 800px; margin-bottom: 25px;}
.market_layout_add .mlaHead{display: grid; grid-template-columns: 250px 1fr; grid-gap: 20px;}
.market_layout_add .mlaHead div{width: 100%;}
.market_layout_add .mlaHead .mhCover > div:first-child{padding-bottom: 100%; background-color: var(--bg_silvercalm); border-radius: 5px;}
.market_layout_add .mlaHead .mhGrid{grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; display: grid;}

.market_layout_add .mlaBody{display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px; margin-top: 25px;}
.market_layout_add .mlaBody > div{width: 100%;}

.market_writer span{display: inline; cursor: pointer; transition: var(--transition); text-decoration: underline;}
.market_writer span:hover{color: var(--text_blue);}
.market_writer span+span:before{padding-right: 8px; color: #4b4b4b; content: ",";}

.market_action{white-space: nowrap;}
.market_action > div{display: inline-block; padding: 10px 15px;}
.market_action > div:not(:last-child){margin-right: 10px;}
.market_action .maStatus{background: var(--bg_orange); color: var(--text_white); border-radius: 5px; transition: var(--transition);}
.market_action .maStatus.maSale{background: var(--bg_green);}
.market_action .maStatus:hover{box-shadow: inset 0px 0px 0px 2px var(--bg_orange); color: var(--text_silver); background: var(--bg_white);}
.market_action .maStatus.maSale:hover{box-shadow: inset 0px 0px 0px 2px var(--bg_green);}

.market_url{margin-top: 15px; padding: 7px 15px; border-radius: 5px; background: var(--bg_silvercalm);}
.market_url > div:first-child{font-weight: bold;}
.market_url > div:nth-child(2){color: var(--text_blue);}
.market_url > div:nth-child(2) > span{cursor: copy;}

.market_itemType{padding: 15px 15px 0px 15px; color: var(--text_silver);}
.market_itemType > span{padding: 2px 7px; margin-right: 5px; border-radius: 5px; font-size: 11px; color: var(--text_white); background: var(--bg_orange);}

.market_content{border-radius: 5px; border: 1px solid var(--bg_line); padding: 15px 20px;}
.market_content .mcHead{display: grid; grid-template-columns: 45px 1fr 35px; grid-gap: 15px; align-items: center;}
.market_content .mcHead > div{width: 100%;}
.market_content .mcHead > div:first-child div{padding-bottom: 150%; background-color: var(--bg_silvercalm); border-radius: 5px;}
.market_content .mcHead > div:nth-child(2) > div:first-child{font-size: 15px; font-weight: bold;}
.market_content .mcHead > div:nth-child(2) > div:nth-child(2){color: var(--text_green);}
.market_content .mcHead .mhGroup{margin-top: 5px;}
.market_content .mcHead .mhGroup > span{padding: 3px 7px; font-size: 11px; font-weight: bold; border-radius: 20px; background: var(--bg_bluecalm);}
.market_content .mcHead .mhGroup > span:not(:last-child){margin-right: 10px;}
.market_content .mcHead .mhQr{cursor: pointer;}
.market_content .mcHead .mhQr > div:first-child{width: 35px; height: 35px; background-color: var(--bg_silvercalm);}
.market_content .mcHead .mhQr > div:nth-child(2){margin-top: 5px; text-align: center; font-size: 11px; color: var(--text_blue); font-weight: bold;}
.market_content .mcPhoto{margin-top: 10px; white-space: nowrap;}
.market_content .mcPhoto > div:first-child{font-weight: bold; margin-bottom: 10px;}
.market_content .mcPhoto > div:first-child span{padding: 2px 5px; font-size: 11px; margin-left: 5px; background: var(--bg_blue); color: var(--text_white); border-radius: 3px; cursor: pointer;}
.market_content .mcPhoto .mpList > div{display: inline-block; width: 90px; height: 90px; margin-bottom: 10px; background-color: var(--bg_silvercalm); border-radius: 10px;}
.market_content .mcPhoto .mpList > div:not(:last-child){margin-right: 10px;}
.market_content .mcContent{display: grid; grid-template-columns: 1fr 100px 100px; grid-gap: 15px; margin-top: 10px;}
.market_content .mcContent > div{width: 100%;}
.market_content .mcContent > div > div:first-child{font-family: 'bold';}
.market_content .mccStock{display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 10px;}
.market_content .mccStock > div{width: 100%;}
.market_content .mcGenre{margin-top: 10px;}
.market_content .mcGenre > div:first-child{font-family: 'bold';}
.market_content .mcGenre > div:nth-child(2) >span{padding: 1px 5px 2px 5px; background: var(--bg_silvercalm); border: 1px solid var(--bg_black); border-radius: 3px; font-size: 11px;}
.market_content .mcGenre > div:nth-child(2) >span:not(:last-child){margin-right: 3px;}
.market_content .mcStatus{margin-top: 10px;}
.market_content .mcStatus > span{padding: 3px 7px; border-radius: 5px; background: var(--bg_silver); font-size: 11px;}
.market_content .mcStatus > span:not(:last-child){margin-right: 5px;}
.market_content .mcGsSlug{display: grid; grid-template-columns: 100px 1fr; border-top: 1px solid var(--bg_line); padding-top: 10px;}
.market_content .mcGsSlug > div{width: 100%;}
.market_content .mcGsSlug span{padding: 3px 10px; border-radius: 5px; background: var(--bg_bluecalm);}

.market_connect_work{padding: 10px 15px; border-radius: 5px; border: 1px solid var(--bg_line); margin-top: 15px;}
.market_connect_work .mcwTitle{margin-bottom: 10px; font-weight: bold; font-size: 15px;}
.market_connect_work .mcwItem{display: grid; grid-template-columns: 50px 1fr; grid-gap: 10px; align-items: center;}
.market_connect_work .mcwItem > div{width: 100%;}
.market_connect_work .mcwItem > div:first-child > div{padding-bottom: 150%; border-radius: 5px; background-color: var(--bg_silvercalm);}
.market_connect_work .mcwItem .miInfo > div:first-child > span{padding: 2px 7px; border-radius: 20px; font-size: 11px; background: var(--bg_black); color: var(--text_white);}
.market_connect_work .mcwItem .miInfo > div:nth-child(2){font-size: 15px; margin-top: 3px;}
.market_connect_work .mcwBtn{margin-top: 10px;}
.market_connect_work .mcwBtn > div:first-child{margin-bottom: 10px; color: var(--text_silver);}

.market_order{border-radius: 5px; border: 1px solid var(--bg_line); padding: 15px 20px;}
.market_order .moList > div{padding: 15px 0px;}
.market_order .moList > div:not(:last-child){border-bottom: 1px solid var(--bg_line);}
.market_order .moList > a{display: grid; grid-template-columns: 1fr 150px; grid-gap: 15px; color: var(--text_black); padding: 15px 0px; position: relative;}
.market_order .moList > a:before{content: ''; position: absolute; top: 10px; left: -15px; width: 2px; height: 75%; background: var(--bg_blue); opacity: 0; transition: var(--transition);}
.market_order .moList > a:hover:before{opacity: 1;}
.market_order .moList > a:not(:last-child){border-bottom: 1px solid var(--bg_line);}
.market_order .moList > a > div{width: 100%;}
.market_order .moList > a .mlcBox > div:first-child{font-size: 11px; color: var(--text_silver);}
.market_order .moList > a .mlcBox > div:nth-child(2){font-weight: bold; margin-top: 2px; font-size: 15px;}
.market_order .moList > a .mlcStatus{text-align: right;}
.market_order .moList > a .mlcStatus > span{padding: 3px 7px; border-radius: 5px; background: var(--bg_orange); font-size: 11px; color: var(--text_white);}
.market_order .moList > a .mlcStatus.waiting span{background: var(--bg_silverdark);}
.market_order .moList > a .mlcStatus.process span{background: var(--bg_orange);}
.market_order .moList > a .mlcStatus.finished span{background: var(--bg_green);}
.market_order .moList > a .mlcStatus.failed span{background: var(--bg_red);}

/**SETTING**/
.setting_layout{max-width: 500px; margin-top: 25px;}
.setting_layout > div:not(:last-child){margin-bottom: 20px;}
.setting_layout .slTitle{font-size: 15px; font-weight: bold;}
.setting_layout .stItem > div:first-child{font-weight: bold;}
.setting_layout .stItem > div:nth-child(2){margin-top: 5px; color: var(--text_silver);}

/**VOUCHER**/
.voucher_create{display: grid; grid-template-columns: 1fr 1fr; grid-gap: 15px;}
.voucher_create > div{width: 100%; border-radius: 10px; border: 1px solid var(--bg_line); padding: 10px 15px; box-sizing: border-box;}

/**MONETIZATION**/
.m_pending{margin-bottom: 15px; padding: 10px 15px; border-radius: 10px; background: var(--bg_greencalm);}

.m_balance{display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 15px;}
.m_balance > div{width: 100%; text-align: center; background: var(--bg_white); padding: 20px 0px; border: 1px solid var(--bg_line); border-radius: 10px;}
.m_balance > div > div:first-child{margin-bottom: 10px;}
.m_balance > div > div:first-child > div{width: 25px; height: 25px;}
.m_balance > div > div:nth-child(2){color: var(--text_silver);}
.m_balance > div > div:nth-child(3){margin-top: 5px; font-size: 15px; font-weight: bold;}

.m_request{padding: 15px; border-radius: 10px; background: var(--bg_silver); color: var(--text_white);}
.m_request.request{background: var(--bg_orange);}
.m_request.process{background: var(--bg_green);}
.m_request.finished{background: var(--bg_blue);}
.m_request.decline{background: var(--bg_red);}
.m_request .mrBank{margin-top: 10px; border-radius: 10px; background: var(--bg_white); color: var(--text_black); padding: 15px;}
.m_request .mrBank > div:first-child{font-family: 'bold';}
.m_request .mrBank > div:nth-child(2){margin-top: 5px;}
.m_request .mrBank > div:nth-child(2) > div:nth-child(2){color: var(--text_blue);}
.m_request .mrBank > div:nth-child(2) > div:nth-child(3){font-size: 11px; color: var(--text_silver);}
.m_request .mrInfo{margin-top: 10px; border-radius: 10px; background: var(--bg_white); color: var(--text_black); padding: 15px;}
.m_request .mrInfo > div:first-child{font-family: 'bold';}
.m_request .mrInfo > div:nth-child(2){margin-top: 5px;}

.m_monetize{}
.m_monetize .chmTag{padding: 2px 6px; font-size: 9px; border-radius: 3px; color: var(--text_white);}
.m_monetize.novel .chmTag{background: var(--bg_novel);}
.m_monetize.comic .chmTag{background: var(--bg_comic);}
.m_monetize.script .chmTag{background: var(--bg_script);}
.m_monetize.flash .chmTag{background: var(--bg_flash);}
.m_monetize.short .chmTag{background: var(--bg_short);}
.m_monetize.art .chmTag{background: var(--bg_artwork);}
.m_monetize.cart .chmTag{background: var(--bg_cart);}
.m_monetize .mmTitle{margin-top: 5px; font-family: 'bold'; font-size: 17px;}
.m_monetize .mmContent{margin-top: 15px; display: table; table-layout: fixed; width: 100%; padding: 15px; border-radius: 10px; border: 1px solid var(--bg_line); box-sizing: border-box;}
.m_monetize .mmContent > div{display: table-row;}
.m_monetize .mmContent > div > div{display: table-cell; padding: 5px 0px; vertical-align: top;}
.m_monetize .mmContent > div > div:first-child{font-weight: bold; color: var(--text_silver);}
.m_monetize .mmContent > div > div:nth-child(2){text-align: right;}
.m_monetize .mmCartDetail{margin-top: 15px; padding: 15px; background: var(--bg_white); border-radius: 10px; box-shadow: var(--shadow);}
.m_monetize .mmItems{margin-top: 15px;}
.m_monetize .mmItems > div:first-child{font-family: 'bold';}
.m_monetize .mmItems > div:nth-child(2){margin-top: 5px; background: var(--bg_white); border-radius: 10px; box-shadow: var(--shadow);}
.m_monetize .mmItems .miList > div{padding: 10px 15px;}
.m_monetize .mmItems .miList > div:not(:last-child){border-bottom: 1px solid var(--bg_line);}
.m_monetize .mmItems .miList > div > div:first-child > div:first-child{font-size: 11px; color: var(--text_silver);}
.m_monetize .mmItems .miList > div > div:nth-child(2){margin-top: 3px;}

.m_box_joined{margin-top: 15px;}
.m_box_joined .mbjAlert{display: grid; margin-bottom: 5px; grid-template-columns: 15px 1fr; grid-gap: 15px; align-items: center; padding: 10px 15px; border-radius: 10px; background: var(--bg_silver); color: var(--text_silver);}
.m_box_joined .mbjAlert.active{background: var(--bg_green); color: var(--text_white);}
.m_box_joined .mbjAlert > div{width: 100%;}
.m_box_joined .mbjAlert > div:first-child > div{width: 15px; height: 15px;}

.m_box_revenue{white-space: nowrap; margin-top: 15px;}
.m_box_revenue > div{display: inline-block; border-radius: 10px; border: 1px solid var(--bg_line); text-align: center; min-width: 100px; overflow: hidden;}
.m_box_revenue > div:not(:last-child){margin-right: 15px;}
.m_box_revenue > div > div:first-child{font-weight: bold; font-size: 15px; padding: 10px;}
.m_box_revenue > div > div:nth-child(2){font-size: 11px; padding: 10px; background: var(--bg_silvercalm); color: var(--text_silver);}

.m_bank{padding: 10px; border-radius: 5px; background: var(--bg_silvercalm); border: 2px solid var(--bg_blue);}
.m_bank > div:first-child{font-family: 'bold'; color: var(--text_silver);}
.m_bank > div:nth-child(2){margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--bg_silver);}
.m_bank > div:nth-child(2) > div:first-child{}
.m_bank > div:nth-child(2) > div:nth-child(2){margin-top: 5px; font-family: 'bold'; color: var(--text_blue);}
.m_bank > div:nth-child(2) > div:nth-child(3){font-size: 11px;}

.m_history .mhTitle{font-size: 17px; font-weight: bold; margin-bottom: 10px;}
.m_history > div:nth-child(2){border: 1px solid var(--bg_line); border-radius: 10px;}

.m_recap_table{overflow: auto;}
.m_recap_table .mrt_table{width: 1500px;}
.m_recap_table .mrt_table tr > td{text-align: center;}
.m_recap_table .mrt_table tr > td:nth-child(2){text-align: left;}
.m_recap_table .mrt_table tr > td:nth-child(4){text-align: right;}
.m_recap_table .mrt_table tr > td:nth-child(5){text-align: right;}
.m_recap_table .mrt_table tr > td:nth-child(7){text-align: right;}
.m_recap_table .mrt_table tr > td:nth-child(8){text-align: right;}
.m_recap_table .mrt_table tr > td:nth-child(9){text-align: right;}
.m_recap_table .mrt_table tr > td:nth-child(10){text-align: right;}

/**ANALYTIC**/
.a_count{display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 15px;}
.a_count > div{width: 100%; border: 1px solid var(--bg_line); border-radius: 10px;}
.a_count > div > div{padding: 15px 0px 17px 0px; text-align: center;}
.a_count > div > div > div:first-child{font-weight: bold;}
.a_count > div > div > div:nth-child(2){font-size: 17px; margin-top: 10px; font-family: 'bold';}
.a_count > div > div > div:nth-child(3){font-size: 11px; margin-top: 10px; color: var(--text_silver);}

.a_chart{display: grid;}
.a_chart > div{position: relative; width: 100%; overflow: auto;}

.a_content_count{display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 15px;}
.a_content_count > div{width: 100%;}
.a_content_count > div > div{border: 1px solid var(--bg_line); border-radius: 5px; overflow: hidden; text-align: center;}
.a_content_count > div > div > div:first-child{padding: 5px 0px 6px 0px; background: var(--bg_silvercalm);}
.a_content_count > div > div > div:nth-child(2){font-size: 15px; font-weight: bold; padding: 10px 0px;}

/**ACCOUNT**/
.acc_main{border: 1.5px solid var(--bg_blue); background: var(--bg_silvercalm); display: grid; grid-template-columns: 1fr 1fr; grid-gap: 15px; border-radius: 10px;}
.acc_main > div{width: 100%;}
.acc_main .amItem{padding: 15px 20px 20px 20px;}
.acc_main .amItem .aiHead{display: grid; grid-template-columns: 20px 1fr; grid-gap: 10px; align-items: center;}
.acc_main .amItem .aiHead > div{width: 100%;}
.acc_main .amItem .aiHead > div:first-child > div{width: 20px; height: 20px; position: relative;}
.acc_main .amItem .aiBody{margin-top: 10px;}
.acc_main .amItem .aiBody > div:first-child{font-size: 20px; font-family: 'bold';}

.acc_box{border: 1px solid var(--bg_line); border-radius: 10px; margin-top: 15px; background: var(--bg_white);}
.acc_box .abHead{padding: 15px 20px 10px 20px; font-size: 17px; font-weight: bold;}

.acc_contact{padding: 0px 20px 20px 20px;}
.acc_contact .acList{display: grid; grid-template-columns: 1fr 1fr; grid-gap: 15px;}
.acc_contact .acList > div{width: 100%; cursor: pointer;}
.acc_contact .acList .alTitle{display: grid; grid-template-columns: 15px 1fr; grid-gap: 10px; align-items: center;}
.acc_contact .acList .alTitle > div{width: 100%;}
.acc_contact .acList .alTitle > div:first-child > div{width: 15px; height: 15px;}
.acc_contact .acList .alTitle > div:nth-child(2){font-weight: bold;}
.acc_contact .acList > div > div:nth-child(2){margin-top: 3px; color: var(--text_silver);}
.acc_contact .acList > div > div:nth-child(3){color: var(--text_blue); font-size: 11px; font-weight: bold;}
.acc_contact .acInfo{margin-top: 15px;}

.acc_courier{padding: 0px 20px 20px 20px;}
.acc_courier .acList{display: grid; grid-template-columns: 1fr 1fr; grid-gap: 15px;}
.acc_courier .acList > div{width: 100%; display: grid; grid-template-columns: 25px 1fr; grid-gap: 15px; box-sizing: border-box; align-items: center; padding: 10px 15px; border-radius: 5px; box-shadow: inset 0px 0px 0px 1px var(--bg_line); cursor: pointer;}
.acc_courier .acList > div.active{box-shadow: inset 0px 0px 0px 1px var(--bg_blue);}
.acc_courier .acList > div > div{width: 100%;}
.acc_courier .acList > div > div:first-child > div{width: 25px; height: 25px; background-size: 100%;}

.acc_address{padding: 0px 20px 20px 20px;}
.acc_address .aaList > div{padding: 10px 0px 10px 15px; position: relative;}
.acc_address .aaList > div:before{content: ''; position: absolute; top: 0px; left: 0px; height: 100%; width: 2px; background: var(--bg_green); opacity: 0;}
.acc_address .aaList > div.active:before{opacity: 1;}
.acc_address .aaList > div:not(:last-child){border-bottom: 1px solid var(--bg_line);}
.acc_address .aaList > div > div:first-child{font-family: 'bold';}
.acc_address .aaList > div > div:nth-child(2){margin-top: 3px; color: var(--text_silver);}
.acc_address .aaList > div > div:nth-child(3){margin-top: 5px; font-size: 11px;}
.acc_address .aaList > div > div:nth-child(3) > span{cursor: pointer;}
.acc_address .aaList > div > div:nth-child(3) > span:not(:last-child){margin-right: 10px;}

/**PAGE**/
.page_box{padding: 20px 0px;}
.page_box > div:first-child{font-size: 17px; font-family: 'bold'; margin-bottom: 5px;}
.page_box > div:last-child{margin-top: 10px;}
.page_area{display: inline-block; width: 100%;}

/**TRANSFER**/
.transfer_box{max-width: 400px; padding: 25px; background: var(--bg_white); margin-top: 25px;}
.transfer_box > div:first-child{font-size: 17px; font-family: 'bold';}
.transfer_box > div:nth-child(2){margin-top: 10px;}
.transfer_box > div:nth-child(3){margin-top: 15px;}
.transfer_box > div:nth-child(4){margin-top: 20px;}
.transfer_box > div:nth-child(4) > div{padding: 10px 15px 13px 15px; border-radius: 10px; background: var(--bg_green); color: var(--text_white);}
.transfer_box > div:nth-child(4) > div > span{font-family: 'bold';}
.transfer_box > div:nth-child(5){margin-top: 15px; text-align: center; display: none; color: var(--text_red);}

/**INFO**/
.info_banner{height: 330px; overflow: hidden; background-size: cover; background-image: url('../../../images/background/info_banner.jpg'); position: absolute; top: 66px; left: 0px; width: 100%;}
.info_banner:before{content: ''; position: absolute; bottom: 0px; left: 0px; width: 100%; height: 200%; background-image: linear-gradient(to bottom, transparent, var(--bg_base));}
.info_header{height: 350px; position: relative; z-index: 1; background-size: cover; background-image: url('../../../images/background/info_banner.jpg');}
.info_header > div{position: absolute; right: 35px; top: 85px; width: 40%; text-align: right;}
.info_header > div > div:first-child{font-size: 30px; font-family: 'bold';}
.info_header > div > div:nth-child(2){margin-top: 25px; font-size: 17px;}
.info_menu{margin-top: 50px;}
.info_menu > div{display: table; overflow: hidden; background: var(--bg_blue); color: var(--text_white); border-radius: 50px;}
.info_menu > div > div{display: inline-block; cursor: pointer; padding: 15px 25px 17px 25px; font-size: 17px;}
.info_menu > div > div:hover{text-decoration: underline;}
.info_menu > div > div:not(:last-child){border-right: 1px solid var(--bg_white);}
.info_menu > div > div.active{background: var(--bg_silver); color: var(--text_black);}
.info_path{display: table; width: 100%; table-layout: fixed;}
.info_path > div{display: table-row;}
.info_path > div > div{display: table-cell; width: 50%; height: 300px; vertical-align: middle;}
.info_path > div > div.infodesc{background: white;}
.info_path > div > div.infodesc > div{padding: 0px 50px 15px 50px;}
.info_path > div > div.infodesc > div > div:first-child{font-size: 20px; font-weight: bold; margin-bottom: 5px;}
.info_more{padding: 50px 0px 100px 0px; text-align: center;}
.info_more > div:first-child{font-size: 25px;}
.info_more > div:not(:first-child){margin-top: 20px;}

/**NONPUBLISHER**/
.np_request{padding: 25px 30px; max-width: 500px; background: white; margin: 20px auto;}

/**KOMPETISI**/
.event_submit{padding: 20px 15px; background: var(--bg_yellow); border: 2px solid var(--bg_blue); display: grid; grid-template-columns: 120px 1fr; grid-gap: 15px;}
.event_submit > div{width: 100%;}
.event_submit > div:first-child > div{width: 120px; height: 120px;}
.event_submit > div:nth-child(2) > div:first-child{font-family: 'bold'; font-size: 17px;}
.event_submit > div:nth-child(2) > div:nth-child(2){margin-top: 5px;}
.event_submit > div:nth-child(2) > div:nth-child(3){margin-top: 10px;}
.event_submit .esStatus{width: 135px; display: inline-block; background: var(--bg_white); overflow: hidden; text-align: center; border-radius: 10px; border: 1px solid var(--bg_silver);}
.event_submit .esStatus > div:first-child{padding: 5px 0px; background: var(--bg_silver);}
.event_submit .esStatus > div:nth-child(2){padding: 10px 0px; font-weight: bold;}

/**ERROR**/
.e_box{max-width: 500px; width: 95%; margin-top: 50px; border-radius: 10px; border: 1px solid var(--bg_line);}
.e_box .eb_content{padding: 20px 20px 25px 20px; text-align: center;}
.e_box .eb_content > div:first-child{font-size: 20px; font-weight: bold;}
.e_info{max-width: 500px; width: 90%; margin-top: 130px; margin-bottom: 50px;}
.e_info > div{display: table; table-layout: fixed; width: 100%;}
.e_info > div > div{display: table-cell; vertical-align: top;}
.e_info > div > div:first-child{width: 70px; vertical-align: middle;}
.e_info > div > div:first-child > div{height: 70px;}
.e_info > div > div:nth-child(2){padding-left: 25px;}
.e_info > div > div:nth-child(2) > div:first-child{font-size: 25px; font-family: 'bold';}