.navbarSpace{height: 60px;}
#navbar{position: fixed; top: 0px; left: 0px; width: 100%; height: 0px; background: red; z-index: 65;}
#navbar:before{content: ''; position: absolute; top: 0px; left: 0px; width: 100%; height: 60px; background-image: linear-gradient(to bottom, #ffffff36, transparent);}
#navbar > div{max-width: 950px; height: 0px; position: relative;}
#navbar .nLogo{width: 100px; display: inline-block; position: absolute; top: 12px;}
#navbar .nLogo > div{padding-bottom: 37%;}
#navbar .nMenu{position: absolute; top: 10px; left: 145px; padding: 0px 13px; border-radius: 10px;}
#navbar .nMenu > a{display: inline-block;}
#navbar .nMenu > a:not(:last-child){margin-right: 15px;}
#navbar .nMenu .nmItem{padding: 10px 0px; grid-template-columns: 15px 1fr; font-family: 'bold'; color: var(--text_black); position: relative;}
#navbar .nMenu .nmItem.active:before{content: ''; position: absolute; bottom: 0px; left: 45%; right: 0px; width: 15px; height: 2px; background: var(--bg_blue);}
#navbar .nMenu .nmItem > div:first-child > div{width: 15px; height: 15px;}
#navbar .nMenuRight{position: absolute; top: 10px; right: 0px; padding: 0px 13px; border-radius: 10px;}
#navbar .nMenuRight > div{display: inline-block; cursor: pointer;}
#navbar .nMenuRight > div:not(:last-child){margin-right: 15px;}
#navbar .nMenuRight .nmrItem{padding: 10px 0px; grid-template-columns: 15px 1fr; font-family: 'bold'; color: var(--text_black); position: relative;}
#navbar .nMenuRight .nmrItem.active:before{content: ''; position: absolute; bottom: 0px; left: 45%; right: 0px; width: 15px; height: 2px; background: var(--bg_blue);}
#navbar .nMenuRight .nmrItem > div:first-child > div{width: 15px; height: 15px;}

#footer{padding: 50px; background: #000000; position: relative; z-index: 1;}
#footer > div{max-width: 700px;}
#footer .fMenu{text-align: center;}
#footer .fMenu > a{color: var(--text_white);}
#footer .fMenu > a:not(:last-child){margin-right: 15px;}
#footer .fLogo{margin-top: 45px; height: 60px;}
#footer .fLogo > div{width: 130px; height: 31px;}

.bodySection .bsMax{max-width: 950px;}
.bodySection .bs600{max-width: 600px;}
.bodySection .distance{padding: 0px 20px;}
.contentHeight{min-height: 500px;}

.contentSpace{height: 35px;}

.headTitle{padding: 45px 10px; font-size: 25px; font-family: 'extrabold'; text-align: center;}
.content{padding: 0px 25px 25px 25px;}

.page_empty{padding: 150px 0px; text-align: center; color: var(--text_silver);}
.page_info{padding: 10px 15px; border-radius: 10px; background: var(--bg_orangecalm);}
.page_info > div:first-child{font-size: 11px; font-weight: bold; margin-bottom: 3px;}

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

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

.popupLogin{display: grid; grid-template-columns: 1fr 250px; align-items: center; min-height: 300px; position: relative;}
.popupLogin > div{width: 100%;}
.popupLogin > div:first-child{height: 100%; position: relative;}
.popupLogin .plCover{position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-size: cover;}
.popupLogin .plClose{position: absolute; right: 15px; top: 15px;}
.popupLogin .plClose > div{width: 20px; height: 20px; cursor: pointer;}
.popupLogin .plContent{padding: 0px 20px; text-align: center;}
.popupLogin .plContent .pcTitle{font-size: 15px; font-weight: bold; margin-bottom: 10px;}
.popupLogin .plContent .pcBtn button{width: 100%;}
.popupLogin .plContent .pcDesc{margin-top: 15px; color: var(--text_silver); font-size: 11px;}

.popupCreateStories{grid-template-columns: 1fr 1fr; text-align: center;}
.popupCreateStories > div{border: 1px solid var(--bg_line); border-radius: 10px; overflow: hidden; cursor: pointer; transition: var(--transition);}
.popupCreateStories > div:hover{border: 1px solid var(--bg_blue);}
.popupCreateStories .pcsItem > div:first-child{padding: 10px 0px;}
.popupCreateStories .pcsItem > div:first-child > div:first-child{font-size: 20px; font-family: 'bold';}
.popupCreateStories .pcsItem > div:first-child > div:nth-child(2){color: var(--text_silver); font-size: 11px;}
.popupCreateStories .pcsItem > div:nth-child(2){margin-top: 5px; font-size: 12px; font-family: 'bold'; padding: 10px 0px; background: var(--bg_silvercalm);}

.popupCreateAI{border-radius: 10px; border: 1px solid var(--bg_line);}
.popupCreateAI > div:not(:last-child){border-bottom: 1px solid var(--bg_line);}
.popupCreateAI .pcaItem{grid-template-columns: 1fr min-content; padding: 10px;}
.popupCreateAI .pcaItem > div:first-child > div:first-child{font-size: 15px; font-family: 'bold';}
.popupCreateAI .pcaItem > div:first-child > div:nth-child(2){color: var(--text_silver); font-size: 11px;}
.popupCreateAI .pcaItem span{margin-left: 3px; white-space: nowrap; padding: 2px 7px; font-family: 'regular'; border-radius: 10px; background: var(--bg_orange);}

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

.info{padding: 7px 10px 8px 15px; background: var(--bg_silvercalm); border-left: 2px solid var(--bg_blue);}

.listCheck > div{display: grid; grid-template-columns: 15px 1fr; grid-gap: 15px;}
.listCheck > div:not(:last-child){margin-bottom: 10px;}
.listCheck > div > div{width: 100%;}
.listCheck > div > div:first-child > div{width: 15px; height: 15px;}

/**EXPLORE**/
.exploreSection{margin: 50px 0px;}
.exploreSection.es-mb0{margin-bottom: 0px;}
.exploreSection.esInfo{background: var(--bg_black); color: var(--text_white);}

.exploreBanner{position: relative;}
.exploreBanner .ebSpace{padding-bottom: 22%}
.exploreBanner .ebTitle{position: absolute; z-index: 1; bottom: 55px; left: 0px; right: 0px; width: 100%; text-align: center; font-size: 30px; font-weight: bold;}
.exploreBanner .ebTitle > div{width: min-content; background: rgba(0, 0, 0, 0.2); white-space: nowrap; border-radius: 15px; padding: 2px 15px;}
.exploreBanner .ebCover{position: absolute; top: 0px; left: 0px; width: 100%;}
.exploreBanner .ebCover > div{padding-bottom: 33%; background-color: var(--bg_silvercalm);}
.exploreBanner .ebCover > div:before{content: ''; position: absolute; bottom: 0px; left: 0px; width: 100%; height: 90%; background-image: linear-gradient(to bottom, transparent 5%, #ffffff38 50%, var(--bg_white));}

.exploreHeadText{background: url('../../../images/background/explore_head_text.png') no-repeat center center; background-size: cover; color: var(--text_white); -webkit-text-fill-color: transparent; -webkit-background-clip: text; background-clip: text; font-family: 'bold';}

.exploreStep{position: relative; z-index: 1;}
.exploreStep > div:first-child{font-size: 17px; font-weight: bold; margin-bottom: 15px;}
.exploreStep .esList{grid-template-columns: 1fr 1fr 1fr;}
.exploreStep .esList > div{padding: 10px; border-radius: 10px; box-sizing: border-box;}
.exploreStep .esList .elItem{grid-template-columns: 70px 1fr;}
.exploreStep .esList .elItem > div:first-child > div{width: 70px; height: 70px;}
.exploreStep .esList .elItem .eiBody > div:first-child{font-family: 'bold'; margin-bottom: 5px;}

.exploreInfo{grid-template-columns: 250px 1fr; padding: 40px 0px; grid-gap: 45px;}
.exploreInfo > div:first-child > div{padding-bottom: 100%; border-radius: 10px;}
.exploreInfo .eiContent > div:first-child{font-size: 17px; font-family: 'bold'; margin-bottom: 15px;}

.exploreBottom{position: relative;}
.exploreBottom .ebCover{padding-bottom: 25%;}
.exploreBottom .ebOverlay{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: var(--text_white); font-family: 'bold'; font-size: 25px; z-index: 1;}

/**REGISTER**/
.register_layout{max-width: 500px; padding: 25px 0px; min-height: calc(100vh - 200px);}
.register_layout > div:first-child{font-size: 20px; font-weight: bold; margin-bottom: 20px;}
.register_layout > div:nth-child(2){margin-bottom: 10px;}
.register_layout > div:nth-child(3){margin-bottom: 20px;}
.register_layout > div:nth-child(4){margin-bottom: 22px;}

/**LOGIN**/
.login_box{padding: 25px; border: 2px solid var(--bg_silvercalm); border-radius: 10px; max-width: 550px; margin-top: 25px; margin-bottom: 35px;}
.login_box > div > div:first-child{font-size: 17px; font-family: 'bold';}

/**STORY**/
.storyLayout{max-width: 700px;}
.storyLayout .slHead{text-align: center;}
.storyLayout .slHead .shTitle{font-size: 30px; font-family: 'bold';}
.storyLayout .slHead .shUser{margin-top: 5px;}
.storyLayout .slBtn{margin: 20px 0px;}
.storyLayout .slBtn > div{display: inline-block;}
.storyLayout .slBtn > div:not(:last-child){margin-right: 10px;}
.storyLayout .slContent{margin-top: 15px;}
.storyLayout .slContent p{text-indent: 35px;}

/**CREATE**/
.createBanner{position: fixed; top: 0px; left: 0px; width: 100%; height: 100%;}
.createBanner.cb_fast{background-image: url('../../../images/background/create_banner_fast.png');}
.createBanner.cb_advanced{background-image: url('../../../images/background/create_banner_advanced.png');}

.createLayout{max-width: 500px; border-radius: 10px; overflow: hidden; border: 1px solid var(--bg_line); background: rgba(255, 255, 255, 0.9); position: relative; z-index: 1;}

.createFirst{grid-template-columns: 1fr 1fr; padding: 70px 20px; max-width: 350px; font-family: 'bold';}
.createFirst > div{text-align: center; cursor: pointer;}
.createFirst > div > div:first-child{padding-bottom: 100%; border-radius: 10px; transition: var(--transition); margin-bottom: 10px;}
.createFirst > div:hover > div:first-child{box-shadow: 0px 0px 0px 3px var(--bg_blue);}

.createHead{padding: 10px 15px 20px 15px; background: var(--bg_silvercalm);}
.createHead .chTitle{font-size: 17px; font-family: 'bold'; margin-bottom: 5px;}
.createHead .chProgress{grid-template-columns: 1fr 1fr 1fr;}
.createHead .chProgress .cpItem{height: 5px; background: var(--bg_silver); border-radius: 10px;}
.createHead .chProgress .cpItem.active{background: var(--bg_blue);}
.createContent{padding: 15px; min-height: 200px;}
.createContent > div{display: none;}
.createContent > div.active{display: block;}
.createBtn{grid-template-columns: min-content 1fr min-content; padding: 0px 15px 15px 15px;}

/**PLAY**/
.playBg {
  margin: 0;
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: linear-gradient(135deg, #ffffff 0%, #cceeff 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: sans-serif;
  overflow: hidden;
}

@keyframes auroraShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

.auroraAnim {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(180, 220, 255, 0.2), rgba(160, 200, 255, 0.25));
  background-size: 200% 200%;
  animation: auroraShift 12s ease-in-out infinite;
  z-index: 0;
  pointer-events: none;
}

.playCircle{position: fixed; bottom: -120px; left: -120px; width: 350px; opacity: 0.1; height: 350px; background: url('../../../images/background/play_circle.png'); background-size: cover; z-index: 1;}

.playLayout{max-width: 650px; position: relative; z-index: 1;}
.playLayout > div{padding: 15px;}

.playNotice{padding: 10px 15px; border-radius: 10px; background: var(--bg_blue); color: var(--text_white); margin-bottom: 20px;}
.playAction{text-align: center; margin-top: 15px;}
.playEnded{text-align: center; margin-top: 15px; padding: 10px 15px; border-radius: 10px; background: var(--bg_alert_orange); color: var(--text_white);}

.playInput{position: fixed; bottom: 0px; right: 0px; width: 100%; height: 0px; z-index: 50;}
.playInput > div{max-width: 600px; width: 100%; position: absolute; bottom: 20px; left: 0px; right: 0px;}
.playInput .piBox{padding: 10px 15px; background: rgba(255, 255, 255, 0.7); overflow: hidden; z-index: 1; box-shadow: 0px 0px 5px var(--bg_silver); border-radius: 10px; position: relative;}
.playInput .piBox.piDisabled{filter: blur(5px);}
.playInput .piBox.piDisabled:before{content: ''; position: absolute; top: 0px; z-index: 5; left: 0px; width: 100%; height: 100%; background: #0000002e;}
.playInput .piBox .pbInput{grid-template-columns: 1fr 100px;}
.playInput .piBox .pbInput textarea{height: 50px;}
.playInput .piBox .pbInput .piArea{position: relative;}
.playInput .piBox .pbInput .piArea > div{position: absolute; bottom: 10px; right: 5px; z-index: 1; padding: 1px 5px; background: var(--bg_silvercalm); border-radius: 3px; font-size: 7px; font-weight: bold;}
.playInput .piBox .pbCount{font-size: 11px;}

.playInputSpace{height: 80px;}

/**EDITOR**/
.editorLayout{max-width: 600px;}
.editorLayout > div:not(:last-child){margin-bottom: 20px;}
.editorLayout .elContent{border: 1px solid var(--bg_line); border-radius: 10px;}

/**INFO**/
.info_faq{border-top: 1px solid var(--bg_black); margin-bottom: 25px;}
.info_faq > div{padding: 15px 0px; cursor: pointer;}
.info_faq > div:not(:first-child){border-top: 1px solid var(--bg_black);}
.info_faq > div > div:first-child{font-family: 'bold'; display: grid; grid-template-columns: 1fr 20px; grid-gap: 15px;}
.info_faq > div > div:first-child > div{width: 100%;}
.info_faq > div:hover > div:first-child > div:first-child{color: var(--text_blue);}
.info_faq > div > div:first-child > div:nth-child(2) > div{width: 20px; height: 20px;}
.info_faq > div > div:nth-child(2){margin-top: 5px; display: none;}

.info_prize{max-width: 500px;}
.info_prize > div{font-size: 18px;}
.info_prize > div b{text-decoration: underline;}

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

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