/* ------------------------------------------------------------------------------------------------------------
    /menu/category.php
------------------------------------------------------------------------------------------------------------ */
.category { width:100%; height:calc(100vh - 165px); padding:3rem 0 0; }
.categoryReg .regFormArea { display: flex; justify-content: flex-start; align-items: center; width:50%; padding:1rem; margin:1rem 0 0; border:1px solid #c4c4c4; }

.categoryReg .regFormArea .formItem { margin:0 0 0 1rem; }
.categoryReg .regFormArea .formItem:first-child { margin:0 0 0 0; }
.categoryReg .regFormArea .formItem:last-child { width:20%; }
.categoryReg .regFormArea .formItem .formGroup { width: 100%; margin: 0; }
.categoryReg .regFormArea .btn { width:100%; height:40px; border:none; border-radius: 5px; }

.categoryReg .underlinesInput input { padding:20px 0 0; width:100%; height:40px; color:var(--mainTxt); }
.categoryReg .underlinesInput label { position:absolute; left:0; bottom:0; width:100%; height:40px; border-bottom:1px solid transparent; text-align:left; pointer-events:none; }
.categoryReg .underlinesInput label:after { bottom:0px; width:0; height:100%; border-bottom:3px solid var(--activeTxt); transition:all .3s ease; } /* 파란색 가로줄 */
.categoryReg .underlinesInput label span { position:absolute; left:0; bottom:5px; transition:all .3s ease; }
.categoryReg .underlinesInput input:focus + label span, .categoryReg .underlinesInput input:valid + label span { transform:translateY(-125%); font-size:14px; color:var(--activeTxt); }  /* input에 글을 입력하고 포커스가 지나간 상태에서 제어하려면 valid 선택자를 써야한다. */

.categoryList { margin:5rem 0 0; }
.categoryList .listHead { display: flex; justify-content:flex-start; align-items: center; flex-flow:row; border-top:1px solid var(--mainTxt); border-bottom:1px solid var(--mainTxt); margin:1rem 0 0; }
.categoryList .listHead .headItem { display: flex; justify-content:center; align-items: center; width:30%; height:40px; font-size:1.4rem; }
.categoryList .listHead .headItem:first-child { width:5%; }
.categoryList .listHead .headItem:nth-child(2) { width:5%; }


.categoryList .listBody { display: flex; justify-content:flex-start; align-items: center; flex-flow: column; }
.categoryList .listBody .items { display: flex; justify-content:flex-start; align-items: center; width:100%; border-bottom:1px solid var(--mainTxt); }
.categoryList .listBody .items .itemOption { display: flex; justify-content:center; align-items: center; width:30%; height:40px; font-size:1.4rem; }
.categoryList .listBody .items .itemOption:first-child { width:5%; }
.categoryList .listBody .items .itemOption:nth-child(2) { width:5%; }


/* ------------------------------------------------------------------------------------------------------------
    templateReg.php
------------------------------------------------------------------------------------------------------------ */
.template { width:100%; height:calc(100vh - 165px); padding:3rem 0 0; }
.templateReg .regFormArea { display: flex; justify-content: flex-start; align-items: center; flex-flow: column; width:50%; padding:1rem; margin:1rem 0 0; border:1px solid #c4c4c4; }
.templateReg .regFormArea .formItem { width:100%; margin:1rem 0 0 0; }
.templateReg .regFormArea .templateFrom  { display: flex; justify-content: flex-start; align-items: center; flex-flow: row wrap; width:100%; }
.templateReg .regFormArea .templateFrom .formItem:first-child { width:calc((100% - 3rem) / 4); margin:0 0 0 0; }
.templateReg .regFormArea .templateFrom .formItem:nth-child(2) { width:calc((100% - 3rem) / 4); margin:0 0 0 1rem; }
.templateReg .regFormArea .templateFrom .formItem:nth-child(3) { width:calc((100% - 3rem) / 4); margin:0 0 0 1rem; }
.templateReg .regFormArea .templateFrom .formItem:nth-child(4) { width:calc((100% - 3rem) / 4); margin:0 0 0 1rem; }
.templateReg .regFormArea .templateFrom .formItem:nth-child(5) { width:100%; margin:1rem 0 0 0; }
.templateReg .regFormArea .templateFrom .formItem:last-child { width:100%; margin:1rem 0 0 0; }









.templateReg .regFormArea .formItem .formGroup { width: 100%; margin: 0; }
.templateReg .regFormArea .btn { width:100%; height:40px; border:none; border-radius: 5px; }


.templateList { margin:5rem 0 0; }
.templateList .title { display: flex; justify-content: flex-start; align-items: center; width:100%; }
.templateList a { margin:0 0 0 auto; }
.templateList .listHead { display: flex; justify-content:flex-start; align-items: center; flex-flow:row; border-top:1px solid var(--mainTxt); border-bottom:1px solid var(--mainTxt); margin:1rem 0 0; }
.templateList .listHead .headItem { display: flex; justify-content:center; align-items: center; width:15%; height:40px; font-size:1.4rem; }
.templateList .listHead .headItem:first-child { width:5% }
.templateList .listHead .headItem:nth-child(2) { width:5% }
.templateList .listHead .headItem:nth-child(3) { width:5% }
.templateList .listHead .headItem:nth-child(4) { width:5% }
.templateList .listHead .headItem:nth-child(5) { width:5% }
.templateList .listBody { display: flex; justify-content:flex-start; align-items: center; flex-flow: column; }
.templateList .listBody .items { display: flex; justify-content:flex-start; align-items: center; width:100%; border-bottom:1px solid var(--mainTxt); }
.templateList .listBody .items.full { display: flex; justify-content:center; align-items: center; width:100%; height:40px; border-bottom:1px solid var(--mainTxt); }
.templateList .listBody .items .itemOption { display: flex; justify-content:center; align-items: center; width:15%; font-size:1.4rem; }
.templateList .listBody .items .itemOption img { max-width: 100px;}
.templateList .listBody .items .itemOption:first-child { width:5%; }
.templateList .listBody .items .itemOption:nth-child(2) { width:5%; }
.templateList .listBody .items .itemOption:nth-child(3) { width:5%; }
.templateList .listBody .items .itemOption:nth-child(4) { width:5%; }
.templateList .listBody .items .itemOption:nth-child(5) { width:5%; }


@media screen and (max-width:768px){
    .templateReg .regFormArea { width:100%; }
}




































/* ------------------------------------------------------------------------------------------------------------
    socket Board
------------------------------------------------------------------------------------------------------------ */
.socketList { margin:6rem 0 0; padding:0; border-top:2px solid #545454; border-bottom:1px solid #545454; }

.socketHeader { display: flex; justify-content: space-between; align-items: center; border-bottom:1px solid #545454; min-height:4.0rem; padding-top:calc((4.0rem - 1.5rem)/2); padding-bottom:calc((4.0rem - 1.5rem)/2); font-size:1.4rem; text-align:center; }
.socketHeader .shItem:first-child { flex:1 1 3%; }
.socketHeader .shItem:nth-child(2) { flex:1 1 13%; }
.socketHeader .shItem:nth-child(3) { flex:1 1 13%; }
.socketHeader .shItem:nth-child(4) { flex:1 1 13%; }
.socketHeader .shItem:nth-child(5) { flex:1 1 8%; }
.socketHeader .shItem:nth-child(6) { flex:1 1 5%; }
.socketHeader .shItem:nth-child(7) { flex:1 1 5%; }
.socketHeader .shItem:nth-child(8) { flex:1 1 8%; }
.socketHeader .shItem:nth-child(9) { flex:1 1 5%; }
.socketHeader .shItem:last-child { flex:1 1 5%; }

.socketContent { display: flex; justify-content: space-between; align-items: center; border-bottom:1px solid #545454; min-height:4.0rem; padding-top:calc((4.0rem - 1.5rem)/2); padding-bottom:calc((4.0rem - 1.5rem)/2); font-size:1.4rem;  text-align:center; }
.socketContent .scItem:first-child { flex:1 1 3%; }
.socketContent .scItem:nth-child(2) { flex:1 1 13%; }
.socketContent .scItem:nth-child(3) { flex:1 1 13%; }
.socketContent .scItem:nth-child(4) { flex:1 1 13%; }
.socketContent .scItem:nth-child(5) { flex:1 1 8%; }
.socketContent .scItem:nth-child(6) { flex:1 1 5%; }
.socketContent .scItem:nth-child(7) { flex:1 1 5%; }
.socketContent .scItem:nth-child(8) { flex:1 1 8%; }
.socketContent .scItem:nth-child(9) { flex:1 1 5%; }
.socketContent .scItem:last-child { flex:1 1 5%; width: 100%; height: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }