.headerSpace{height: 65px;}
#header{height: 65px; position: fixed; top: 0px; left: 0px; width: 100%; z-index: 55; background: var(--bg_white); border-bottom: 1.5px solid var(--bg_line);}
#header > div{max-width: 1200px; padding: 0px 15px; z-index: 1; position: relative;}
#header .h_logo{width: 135px; height: 65px; float: left;}
#header .h_logo > div{width: 230px; height: 21px; margin-top: 20px; cursor: pointer;}

section{max-width: 700px;}
section .distance{padding: 0px 20px;}
.contentHeight{min-height: calc(100vh - 170px);}
.contentSpace{height: 50px;}

#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_login{padding: 20px;}
.popup_login > div:first-child{font-size: 17px; font-family: 'bold';}

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

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

.popupShowCode .pscInfo{border-radius: 5px; background: var(--bg_silvercalm); padding: 10px 15px;}
.popupShowCode .pscInfo > div{font-weight: bold;}
.popupShowCode .pscInfo > div:nth-child(2){font-size: 15px; color: var(--text_blue);}
.popupShowCode .pscExp{margin-top: 10px; font-size: 11px; margi-bottom: 5px;}

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

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

.sortMenu{white-space: nowrap; font-size: 0px;}
.sortMenu > div{padding: 5px 13px; display: inline-block; font-size: 13px; cursor: pointer; background: var(--bg_silversoft);}
.sortMenu > div.active{background: var(--bg_choco); color: var(--text_white);}
.sortMenu > div:first-child{border-radius: 10px 0px 0px 10px;}
.sortMenu > div:last-child{border-radius: 0px 10px 10px 0px;}

.tooltip{position: absolute; background-color: #333; color: #fff; padding: 5px 10px; border-radius: 4px; font-size: 12px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); display: none; white-space: nowrap; z-index: 70;}

.pageBack{cursor: pointer; color: var(--text_choco); display: grid; grid-template-columns: 15px 1fr; align-items: center; grid-gap: 10px;}
.pageBack > div{width: 100%;}
.pageBack > div:first-child > div{width: 15px; height: 15px;}

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

/**HOME**/
.homeBox{max-width: 400px; border-radius: 10px; border: 1px solid var(--bg_line);}
.homeBox .hbTitle{padding: 10px 15px; font-size: 17px; font-weight: bold;}
.homeBox .hbPoster > div{padding-bottom: 125%; background-color: var(--bg_silvercalm);}
.homeBox .hbInfo{padding: 10px 15px; display: table; width: 100%;}
.homeBox .hbInfo > div{display: table-row;}
.homeBox .hbInfo > div > div{display: table-cell; padding: 3px 0px;}
.homeBox .hbInfo > div > div:first-child{width: 120px; font-weight: bold;}
.homeBox .hbDate{padding: 10px; margin: 0px 15px 10px 15px; border-radius: 10px; background: var(--bg_silvercalm); text-align: center;}
.homeBox .hbDate > div:first-child{font-weight: bold;}
.homeBox .hbDate > div:nth-child(2){font-size: 11px; margin-top: 3px; color: var(--text_silver);}
.homeBox .hbBtn{padding: 10px 15px;}
.homeBox .hbBtn button{width: 100%;}

/**ERROR**/
.error_page{max-width: 500px; min-height: calc(100vh - 300px); box-shadow: 0px 0px 0px 2px var(--bg_line); 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_silvercalm); 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;}

.emptyPage{padding: 100px 0px 200px 0px; text-align: center; color: var(--text_silver);}
.emptyPage.mini{padding: 50px 0px 70px 0px;}