/* 로그인 */
.loginForm{width: 420px; margin: 200px auto 0;}
.loginForm .loginLogo{text-align: center; margin-bottom: 40px;}
.loginForm .loginLogo img{width: 80%;}
.loginForm .loginInput{position: relative; margin-bottom:15px;}
.loginForm .loginInput label{position: absolute; left: 12px; top: 0; line-height: 50px; color: #989ca9; transition: all 0.5s;}
.loginForm .loginInput input{width: 100%; height: 50px; background: #fff; border: 1px solid #ddd;}
.loginForm .loginInput input + label,
.loginForm .loginInput input + label{left:12px ; top: -15px; background: #fff; padding: 0 10px; line-height: 30px;}
.loginForm button[type="submit"]{width: 100%; margin-top: 20px;}
.loginForm .loginIdpw{text-align: center;}
.loginForm .loginIdpw a{display: inline-block; margin-top: 30px; padding-left: 28px; color: #777; position: relative; font-size: 13px;}
.loginForm .loginIdpw a + a::before{ content: ''; position: absolute; top: 3px; left: 12px; width: 1px; height: 12px; border-radius: 0.5px; background-color: #dadada;}
.loginForm .loginIdpw a:hover{color:var(--fontDefultColor)}
.loginFooter{padding: 50px 0; text-align: center; color: #777; margin-top: 100px; position: fixed; bottom: 0; width: 100%; font-size: 12px; letter-spacing: 2px;}

/* 탭메뉴 */
.tabMenu{display: flex; margin-bottom: 5px;}
.tabMenu li a{display: block; height: 44px; line-height: 44px; padding: 0 40px; background: #2b313f; color: #868ea0; font-size: 14px; border: 1px solid #010101; border-left: 0; position: relative;}
.tabMenu li.on a{background: #6c757d; color: #dee3ed; font-weight: 700;}
.tabMenu li:first-of-type a{border-radius: 4px 0 0 4px; border-left: 1px solid #010101;}
.tabMenu li:last-of-type a{border-radius: 0 4px 4px 0;}
.tabMenu.tabStat li a{text-align: left; padding: 0 80px 0 20px;}
.tabMenu.tabStat li a span{position: absolute; right: 20px; top:12px; font-size: 11px; display: inline-block; width: 20px; height: 20px; text-align: center; line-height: 20px; background: #a3a3a3; border-radius: 50%; color: #fff; font-weight: 300; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.tabMenu.tabStat li.on a span{background: var(--mainColor);}
.tabMenuFull {position:relative; z-index:5;  border-top:1px solid #d6d6d6; background:#f7f7f7; font-size:0; margin-top: 15px;}
.tabMenuFull > li {display:inline-block; position:relative; margin:-1px 0 -1px -1px; padding:0 25px;  line-height:48px; text-align:center; cursor:pointer; font-size:14px; min-width: 70px;}
.tabMenuFull > li:hover {color:var(--mainColor);}
.tabMenuFull > li.active { margin-top:-8px; border-bottom:1px solid #fff; background:#fff; line-height:51px;  font-weight: bold; border-top:2px solid var(--mainColor); border-left:1px solid #d6d6d6; border-right:1px solid #d6d6d6;  }

/* 라벨 */
.label{display: inline-block; height: 26px; line-height: 26px;  width: 60px; font-size: 12px; border-radius: 4px; font-style: normal; text-align: center;}
.label.bgBlue{background: #2a58d4; color: #fff;}
.label.bgGray{background: #6c757d; color: #fff;}
.label.bgDarkGray{background: #474a4e; color: #fff;}
.label.bgRed{background: #f45858; color: #fff;}
.label.bgGreen{background: #5db770; color: #fff;}



/* 버튼 */
.btn{border-radius: 4px; text-align: center; display: inline-block; position: relative;}
.btn.sizeSS{padding: 0 12px; height: 26px; line-height: 26px;}
.btn.sizeS{padding: 0 12px; height: 36px; line-height: 36px;}
.btn.sizeM{padding: 0 20px; height: 40px; line-height: 40px;}
.btn.sizeL{padding: 0 28px; height: 48px; line-height: 48px;}
.btn i{vertical-align: baseline;}
.btn.sizeSS i{margin-right:6px; font-size: 14px; }
.btn.sizeS i{margin-right:6px; font-size: 12px; }
.btn.sizeM i{margin-right:8px; font-size: 14px; }
.btn.sizeL i{margin-right:8px; font-size: 16px; }
.btn.sizePop1{width: 100%;}
.btn.sizePop2{width: 50%;}
.btn.sizePop3{width: 33.33%;}

.btn.bgMain{background: var(--mainColor); color: #fff; font-weight: 600;}
.btn.bgMain:hover{background: var(--subColor); box-shadow: 0 0 10px rgba(39, 91, 235, 0.2);}
.btn.bgMain:disabled{background: #edf0f9; color: #bbbec8;}
.btn.bgMain:disabled:hover{box-shadow: none;}

.btn.bdMain{background: #fff; color: var(--subColor); border:1px solid var(--mainColor);}
.btn.bdMain:hover{background: #fff; box-shadow: 0 0 10px rgba(39, 91, 235, 0.2);}
.btn.bdMain:disabled{background: #dfe2ed; color: #c3c6cf;}
.btn.bdMain:disabled:hover{box-shadow: none;}

.btn.bdGray{background: #fff; color: #777; border:1px solid #dfe2ed;}
.btn.bdGray.on,
.btn.bdGray:hover{background: #fff; box-shadow: 0 0 10px rgba(39, 91, 235, 0.2);}
.btn.bdGray:disabled{background: #dfe2ed; color: #c3c6cf;}
.btn.bdGray:disabled:hover{box-shadow: none;}

.btn.bgGreen{background: #328343; color: #fff;}
.btn.bgGreen:hover{background: #38a24e; box-shadow: 0 0 10px rgba(39, 235, 114, 0.2);}
.btn.bgGreen:disabled{background: #edf0f9; color: #bbbec8;}
.btn.bgGreen:disabled:hover{box-shadow: none;}

.btn.bgGray{background: #949494; color: #fff;}
.btn.bgGray.on,
.btn.bgGray:hover{background: #bbbec9; box-shadow: 0 0 10px rgba(51, 51, 51, 0.2);}
.btn.bgGray:disabled{background: #dfe2ed; color: #fff;}
.btn.bgGray:disabled:hover{box-shadow: none;}

.tabRadio .btn{height: 36px; line-height: 36px; margin-left: 10px;}

.btnImg{height: 30px; margin: 0; font-size: 0;}

/* 설명텍스트 */
.descWrap{margin-top:10px;}
.descWrap p{font-size: 12px; color: #777;}




/* 레이어팝업 */
.layerPopupWrap{display: none; position: fixed; z-index: 50; top: 0; left: 0; right: 0; bottom: 0;  background: rgba(37, 39, 43, 0.4); }
.layerPopup{position: relative; overflow: hidden; border-radius: 8px;  background: #fff; width: 500px; height: 500px; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.layerPopup .title{text-align: center; margin-top: 30px; font-size: 20px;}
.layerPopup .content{padding: 20px;}
.layerPopup .popupClose{position: absolute; width: 40px; height: 40px; top: 30px; right: 20px; color: #696d76;}



/* 포인트 */

.pointCate{display: inline-block; position: relative; font-weight: 700;}
.pointCate.use{color: #F3BD5D;}
.pointCate.add{color: #7273FF;}

.schSelectBox{margin: 10px 0; }
.schSelectBox .title{font-weight: 600;}
.schSelectBox ul{border: 1px solid #d6d6d6; border-top: 1px solid #2A3652; padding: 10px; box-sizing: border-box; margin-top: 10px; overflow-y: auto;}
.schSelectBox ul li{display: flex; justify-content: flex-start; }
.schSelectBox ul li + li{border-top: 1px solid #efefef; margin-top:8px; padding-top: 8px;}
.schSelectBox .selectUserList li {line-height: 32px; }
.schSelectBox .selectUserList li .i{margin-right: 10px;}
.schSelectBox .selectUserList li .n{}
.schSelectBox .selectUserList li .b{margin-left: auto;}
.schSelectBox .selectProductrList li .i{margin-right: 10px;}
.schSelectBox .selectProductrList li .p{}
.schSelectBox .selectProductrList li .b{margin-left: auto; }


.photoBox{ width: 80px; height: 80px; margin: 0 auto;}
.photoBox img{ width: 100%; object-fit: cover; }

/* 투표스타등록 */
.starSelectBox{margin: 10px 0; overflow: hidden;}
.selectStarList{display: flex; gap: 20px; flex-wrap: wrap;}
.selectStarList li{position: relative; width: 150px; height: 150px; overflow: hidden;}
.selectStarList li .photo{width: 150px; height: 150px; position: relative; overflow: hidden;}
.selectStarList li .photo img{width: 100%;  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.selectStarList li .txt{display: flex; align-items: center; flex-direction: column; justify-content: center; position: absolute; background: rgba( 0,0,0,0.5); bottom: 0; width: 100%; padding: 3px 0; font-size: 0;}
.selectStarList li .txt span {display: block; color: #e4e4e4;}
.selectStarList li .txt span.groupName{font-size: 11px;}
.selectStarList li .txt span.starName{color: #fff; font-weight: 600; font-size: 13px;}
.selectStarList li .starDelete{position: absolute; top: 0; right: 0; background: rgba( 0, 0, 0, 0.8); color: #fff; width: 24px; height: 24px;}
.selectStarList li .starDelete span{font-size: 14px; line-height: 24px;}


/* 투표결과 */

.voteResultTxt{ font-size: 16px; margin-bottom: 10px;}
.voteResultList{ display: flex; justify-content: flex-start; flex-wrap: wrap; width: 800px; gap: 10px;}
.voteResultList li{position: relative;  overflow: hidden; display: flex; justify-content: flex-start; gap: 20px; width: calc( 50% - 10px);}
.voteResultList li + li {}
.voteResultList li .photo{width: 150px; height: 150px; position: relative; overflow: hidden;}
.voteResultList li .photo img{width: 100%;  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.voteResultList li .txt{display: flex; flex-direction: column; align-items: flex-start; justify-content: center; width: calc( 100% - 170px);}
.voteResultList li .txt  span{display: block;}
.voteResultList li .txt span.groupName{font-size: 14px;}
.voteResultList li .txt span.starName{font-weight: 600; font-size: 16px; margin: 3px 0 15px;}
.voteResultList li .txt .turnout{width: 100%; display: flex; gap: 5px; align-items: center;}
.voteResultList li .txt .turnout .graph{ width: calc(100% - 105px); height: 15px;  border: 1px solid #efefef; position: relative;}
.voteResultList li .txt .turnout .graph span{display: block; position: absolute; left: 0; right: 0; height: 100%; background: var(--mainColor);}
.voteResultList li .txt .turnout .num{  width: 100px;}
.voteResultList li .rank{position: absolute; width: 30px; height: 30px; line-height: 30px; font-size: 12px; left: 0; background: #F3BD5D; z-index: 1; color: #fff; font-weight: 600; text-align: center;}


/* 댓글영역 */
.cmtWrap{  border-top: 2px solid var(--subColor); padding-top:15px}
.cmtList{}
.cmtList ul{}
.cmtList ul li{margin-bottom: 2rem; }
.cmtList ul li + li{border-top: 1px solid #ddd; padding-top: 2rem;}
.cmtList ul li .user{margin-bottom: 1rem;}
.cmtList ul li .user span{display: inline-block; vertical-align: middle;}
.cmtList ul li .user .photo{ background:#F2F3F8 url(../images/noimgProfile.png) no-repeat center; width: 30px; height: 30px; border-radius: 30px; margin-right: 5px; overflow: hidden;}
.cmtList ul li .user .photo img{width: 100%; object-fit: cover;}
.cmtList ul li .user .nickName{font-size: 1.6rem; font-weight: 600;}
.cmtList ul li .cont{display: flex; justify-content: space-between;}
.cmtList ul li .cont .txt{ width: 100%;}
.cmtList ul li .cont .txt .title{font-size: 1.4rem; color: #111; font-weight: 600; margin-bottom: 12px; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: break-all;}
.cmtList ul li .cont .txt .info{font-size: 1.2rem; color: #999; display: flex; justify-content: space-between;}
.cmtList ul li.reply{padding: 2rem 2rem 2rem; border-top: 1px dotted #ddd; background: #f7f7f7; margin-bottom: 0;}


.scollTable{overflow-y: auto;}
/**
.form_photo .box_photo {display: flex;align-items: center;}
.form_photo .box_photo label{margin-right: 10px;font-size: 16px;}
.form_photo .box_photo .photo_label{display: flex;flex-wrap: wrap;flex-direction: column;}
.form_photo .box_photo .photo_label i{font-style: normal;font-size: 13px;color: #999}

.form_photo .box_photo button{width: 30px;height: 30px;background-color: #ddd;border: none;cursor: pointer;display: flex;justify-content: center;align-items: center;font-size: 20px;margin-left:10px;}
.form_photo .file_row {display: flex;align-items: center;margin-top: 10px;}
.form_photo .file_row span {margin-right: 10px;width:350px;display: inline-block;  white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.form_photo .thumbnail {width: 50px;height: 50px;margin-right: 10px;object-fit: cover;}
.form_photo .remove_btn {width: 30px;height: 30px;background-color: #2A3652;border: none;cursor: pointer;color: white;font-size: 15px;}
*/
.form_file .box_file {display: flex;align-items: center;}
.form_file .box_file .file_label{margin-right: 10px; display: flex;flex-wrap: wrap;flex-direction: column;}
.form_file .box_file .file_label i{font-style: normal;font-size: 13px;color: #999; font-style: normal;}
.form_file .box_file button{width: 30px;height: 30px;background-color: #ddd;border: none;cursor: pointer;display: flex;justify-content: center;align-items: center;font-size: 20px;margin-left:10px;}
.form_file .file_row {display: flex;align-items: center;margin-top: 10px;}
.form_file .file_row span {margin-right: 10px;width:350px;display: inline-block;  white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.form_file .thumbnail {width: 50px;height: 50px;margin-right: 10px;object-fit: cover;}
.form_file .remove_btn {width: 30px;height: 30px;background-color: #2A3652;border: none;cursor: pointer;color: white;font-size: 15px;}