*{font-family: 'pretendard';} ul,ol{list-style: none;} html,body,#wrap{height: 100%;} button{cursor: pointer;} ::-webkit-scrollbar { width: 4px; /* 스크롤바의 너비 */ } ::-webkit-scrollbar-thumb { height: 30%; /* 스크롤바의 길이 */ background: #8B8B8B; /* 스크롤바의 색상 */ border-radius: 10px; } ::-webkit-scrollbar-track { background: transparent; /*스크롤바 뒷 배경 색상*/ border-left: 1px solid #EEEEEE; } .imgBox img{width: 100%; display: block; height: 100%; object-fit: cover;} .inputBox input::placeholder{font-size: 14px; line-height: 24px; color: #CCCCCC;} .inputBox input[type='text'], .inputBox input[type='password']{font-size: 14px; font-weight: 400; color: #555555; line-height: 24px; width: 100%; outline: none; border: 1px solid #EEEEEE; border-radius: 5px; padding: 15px 0; box-sizing: border-box;} .inputBox input:focus, .inputBox input:valid{border: 1px solid #CCCCCC;} .checkBox input[type='checkbox']{display: none;} .checkBox label{cursor: pointer; font-size: 12px; line-height: 18px; color: #999999; position: relative; padding-left: 20px;} .checkBox label:before{content: ''; display: block; position: absolute; left: 0; top: 50%; transform: translateY(-50%); background: url('/assets/images/checkBox.png') center / contain no-repeat; width: 12px; height: 12px;} .checkBox input[type='checkbox']:checked + label:before{background-image: url('/assets/images/checkBox_checked.png');} .radioBox input[type='radio']{display: none;} .radioBox label{position: relative; padding-left: 25px; position: relative;} .radioBox label:before{content: ''; display: block; position: absolute; left: 0; top: 50%; transform: translateY(-50%); background: url('/assets/images/radio.png') center / contain no-repeat; width: 14px; height: 14px;} .radioBox input[type='radio']:checked + label:before{background-image: url('/assets/images/radio_checked.png');} .purpleBtn{transition: background 0.2s ease-out; width: 100%; padding: 15px 0; background-color: #6214FF; border: none; border-radius: 5px; color: #fff; font-size: 15px; font-weight: 600;} .purpleBtn:hover{background-color: #F79E00;} .purpleBorderBtn{transition: background 0.2s ease-out; width: 100%; padding: 15px 0; border-radius: 5px; font-size: 15px; font-weight: 600; border: 1px solid #6214FF; background-color: transparent; color: #6214FF;} .toolBox{margin-bottom: 25px; display: flex; justify-content: space-between;} .toolBox button{position: relative; padding: 0 14px 0 37px; border-radius: 5px;} .toolBox .left{display: flex;} .toolBox .left .selectBox{width: 78px; padding-right: 30px; position: relative;} .toolBox .left .selectBox:after{content: ''; position: absolute; display: block; width: 1px; height: 15px; background-color: #DDDDDD; right: 15px; top: 50%; transform: translateY(-50%);} .toolBox .left .selectBox select{padding: 10px 0 10px 12px; border: 1px solid #EEEEEE; border-radius: 5px;} .toolBox .left button{transition: background 0.2s ease-out; background-color: transparent; border: 1px solid #EEEEEE;} .toolBox .left button:hover{background-color: #EEEEEE;} .toolBox .left .permanentDeleteBtn:hover{background-color: #D60000;} .toolBox .left .restoreBtn:hover{background-color: #F79E00;} .toolBox .left .groupAddBtn:hover, .toolBox .left .writingMailBtn:hover{background-color: #6214FF;} .toolBox .left .permanentDeleteBtn:hover span, .toolBox .left .restoreBtn:hover span, .toolBox .left .groupAddBtn:hover span, .toolBox .writingMailBtn:hover span{color: #fff;} .toolBox .right{display: flex;} .toolBox .right button{transition: background 0.2s ease-out; margin-left: 15px; border: none;} .toolBox .right button:not(.writingMailBtn, .cancleBtn, .yellowBtn){background-color: #6214FF;} .toolBox .right button:not(.writingMailBtn, .cancleBtn, .yellowBtn):hover{background-color: #3E178D;} .toolBox .right .excelUploadBtn{margin-left: 15px; display: block; position: relative; padding: 0 14px 0 37px; border-radius: 5px; cursor: pointer; background-color: #58B461;} .toolBox .right .excelUploadBtn:hover{background-color: #4C9554;} .toolBox .right .excelUploadBtn span{margin-left: 7px; line-height: 40px; display: block; color: #fff; font-size: 15px; font-weight: 400;} .toolBox .excelUploadBtn:before{content: ''; display: block; position: absolute; left: 18px; top: 50%; transform: translateY(-50%); background-repeat: no-repeat; background-position: center; background-size: contain;} .toolBox .right #excelUploadBtn{display: none;} .toolBox .right button span{margin-left: 7px; line-height: 38px; display: block; color: #fff; font-size: 15px; font-weight: 400;} .toolBox .right .writingMailBtn{border: 1px solid #EEEEEE; background-color: transparent;} .toolBox .right .writingMailBtn:hover{background-color: #6214FF;} .toolBox .right .writingMailBtn span{color: #999999;} .toolBox .right .writingMailBtn:hover span{color: #fff;} .toolBox button:before{content: ''; display: block; position: absolute; left: 18px; top: 50%; transform: translateY(-50%); background-repeat: no-repeat; background-position: center; background-size: contain;} .toolBox .left button:not(:last-child){margin-right: 10px;} .toolBox .deleteBtn:before, .toolBox .permanentDeleteBtn:before{background-image: url('/assets/images/deleteBtn.png'); width: 13px; height: 15px;} .toolBox .permanentDeleteBtn:hover:before{background-image: url('/assets/images/deleteBtn_white.png');} .toolBox .groupAddBtn:before{background-image: url('/assets/images/groupAddBtn.png'); width: 16px; height: 14px;} .toolBox .groupAddBtn:hover:before{background-image: url('/assets/images/groupAddBtn_white.png');} .toolBox .writingMailBtn:before{background-image: url('/assets/images/writingMailBtn.png'); width: 14px; height: 14px;} .toolBox .writingMailBtn:hover:before, .toolBox .writingMailBtn_white:before{background-image: url('/assets/images/writingMailBtn_white.png'); width: 14px; height: 14px;} .toolBox .memberAddBtn:before{background-image: url('/assets/images/memberAddBtn_white.png'); width: 16px; height: 14px;} .toolBox .groupPlusBtn:before{background-image: url('/assets/images/groupPlusBtn.png'); width: 20px; height: 14px;} .toolBox .restoreBtn:before{background-image: url('/assets/images/restoreBtn.png'); width: 15px; height: 14px;} .toolBox .restoreBtn:hover:before{background-image: url('/assets/images/restoreBtn_white.png');} .toolBox .excelUploadBtn:before{background-image: url('/assets/images/excelUploadBtn.png'); width: 16px; height: 16px;} .toolBox .mailAddBtn:before{background-image: url('/assets/images/mailAddBtn.png'); width: 16px; height: 16px;} .toolBox .mailTemplateAddBtn:before{background-image: url('/assets/images/mailTemplateAdd.png'); width: 14px; height: 14px;} .toolBox button span{line-height: 38px; display: block; font-size: 15px; font-weight: 400; color: #999999;} .writingMail .toolBox{padding-bottom: 15px; border-bottom: 1px solid #CCCCCC;} .writingMail .toolBox button:not(.sendBtn){padding: 0 18px;} .writingMail .toolBox .sendBtn{background-color: #6214FF;} .writingMail .toolBox .sendBtn:hover{background-color: #F79E00;} .writingMail .toolBox .sendBtn:before{background: url('/assets/images/writingMailBtn_white.png') center / contain no-repeat; width: 14px; height: 14px;} .writingMail .toolBox .sendBtn span{color: #fff;} .writingMail .toolBox .left > div{display: flex; align-items: center;} .writingMail .toolBox .left > div span{font-size: 14px; font-weight: 400; line-height: 25px; color: #999999;} .writingMail .toolBox .left > div .purple{margin-right: 10px; color: #6214FF;} .writingMail .toolBox .left > div button{padding: 0; border: none; margin-left: 10px;} .writingMail .toolBox .left > div button:hover{background-color: transparent;} .writingMail .toolBox .left > div button i{font-size: 10px; color: #CCCCCC;} .writingMail .toolBox .right .txtBtn{font-size: 14px; font-weight: 500; color: #999999; background-color: transparent; padding: 0;} .writingMail .toolBox .right .txtBtn:hover{background-color: transparent; color: #666666; text-decoration: underline;} .writingMail .radioList{margin-bottom: 20px;} .writingMail .table_inputBox{position: relative;} .writingMail .table_inputBox ul{width: 100%; display: none; position: absolute; top: 37px; left: 0; z-index: 9; background-color: #fff; margin-bottom: 15px; height: 275px; overflow-y: auto; border: 1px solid #EEEEEE; border-radius: 5px;} .writingMail .table_inputBox ul.active{display: block;} .writingMail .table_inputBox ul li{position: relative; padding: 15px 20px; box-sizing: border-box;} .writingMail .table_inputBox ul li:not(:last-child){border-bottom: 1px solid #EEEEEE;} .writingMail .table_inputBox ul li span:nth-child(1){display: block; font-size: 14px; font-weight: 400; line-height: 22px; color: #555555;} .writingMail .table_inputBox ul li span:nth-child(2){position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 12px; font-weight: 400; color: #999999;} .writingMail .table_inputBox ul li button{border: none; background-color: transparent; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);} .writingMail .table_inputBox ul li button i{font-size: 13px; color: #999999;} .searchBox > div{position: relative; width: 280px; height: 38px;} .searchBox > div > span{position: absolute; left: 18px; top: 50%; transform: translateY(-50%); background: url('/assets/images/icon_search.png') center / contain no-repeat; width: 14px; height: 14px;} .searchBox > div input[type='text']{outline: none; box-sizing: border-box; width: 100%; padding-left: 42px; height: 40px; background-color: #F9F9F9; border-radius: 5px; border: none; font-size: 15px; font-weight: 400; color: #555555;} .searchBox > div input[type='text']::placeholder{font-size: 15px; color: #999999; font-weight: 400;} .sortWrap{position: relative;} .sortWrap .sort{color: #DDDDDD; padding-right: 10px; cursor:pointer; display:inline-block;} .sortWrap .sort::before {content:"\f0de"; font-weight: 900; font-family: "Font Awesome 6 Pro" !important; position:absolute; right:0; top:50%; transform:translateY(-50%); margin-top:-0.5px;} .sortWrap .sort::after {content:"\f0dd"; font-weight: 900; font-family: "Font Awesome 6 Pro" !important; position:absolute; right:0; top:50%; transform:translateY(-50%); margin-top:0.5px;} .sortWrap .sort::before, table span.sort::after{font-size: 10px;} .sortWrap .sort.desc::before{color: #DDDDDD;} .sortWrap .sort.desc::after{color:#AAAAAA;} .sortWrap .sort.asc::before{color:#AAAAAA;} .sortWrap .sort.asc::after{color:#DDDDDD;} .pagerBox{margin: 30px 0 50px 0; display: flex; justify-content: space-between;} .pagerBox .pagerBox{margin: 0;} .pagerBox > div{display: flex;} .pagerBox > div button{transition: background 0.2s ease-out; position: relative; width: 28px; height: 28px; border-radius: 5px; border: none; background-color: transparent;} .pagerBox > div button:hover{background-color: #1B6ADD;} .pagerBox > div button i{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #CCCCCC; font-size: 8px;} .pagerBox > div button:hover i{color: #fff;} .pagerBox ol{display: flex; margin: 0 18px;} .pagerBox ol li{font-size: 14px; font-weight: 400; color: #999999; transition: background 0.2s ease-out; cursor: pointer; width: 28px; height: 28px; border-radius: 5px; background-color: transparent; line-height: 28px; text-align: center;} .pagerBox ol li:not(.dot):hover, .pagerBox ol li:not(.dot).active{background-color: #6214FF; color: #fff;} .pagerBox > button{display: none; width: 340px;} .group_memberAdd .pagerBox > button{display: block;} /* select custom */ .selectBox select::-ms-expand{display: none;} .selectBox select{ -o-appearance: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 10px 0 10px 18px; box-sizing: border-box; border-radius: 5px; font-size: 15px; font-weight: 400; color: #999999; border: 1px solid #F9F9F9; width: 100%; background: url('/assets/images/select_arrow.png') calc(100% - 15px) center / contain no-repeat; background-size: 10px; outline: none; cursor: pointer; } /* select custom */ /* 토글 버튼 */ .toggleSwitch{width: 28px; height: 16px; display: block; position: relative; border-radius: 18px; background-color: #CCCCCC; cursor: pointer;} .toggleSwitch .toggleButton{width: 10px; height: 10px; position: absolute; top: 50%; left: 4px; transform: translateY(-50%); border-radius: 50%; background: #fff; box-shadow:rgb(181 181 181) 1px 1px 3px;} /* 체크박스가 체크되면 변경 이벤트 */ .toggleIpt:checked ~ .toggleSwitch{background: #6214FF;} .toggleIpt:checked ~ .toggleSwitch .toggleButton{left: 13px; background: #fff;} .toggleSwitch, .toggleButton{transition: all 0.2s ease-in;} /* 체크박스가 체크되면 변경 이벤트 Fin */ /* 토글 버튼 Fin */ /* 공통요소 Fin */ .contentBox .tabContentBox > div, .contentBox.individual .groupPlusBtn, .contentBox.group .groupAddBtn, .contentBox.group .memberAddBtn, .contentBox > div > .titleBox, /* .contentBox.group_memberAdd .tabBtnBox, */ .contentBox.group_memberAdd .toolBox .left > button, .contentBox.group_memberAdd .toolBox .right button, .contentBox .toolBox .left .txtBox, .contentBox .flexWrap .group_memberAdd, .contentBox .flexWrap .deleted_member, .contentBox.group_memberAdd .tabContentBox, /* .contentBox.deleted_member .tabContentBox, */ .contentBox .toolBox .left .permanentDeleteBtn, .contentBox .toolBox .left .restoreBtn, .contentBox.deleted_member .toolBox .left button:not(.permanentDeleteBtn,.restoreBtn), .contentBox.deleted_member .toolBox .right, .contentBox.deleted_mail .toolBox .left .deleteBtn, .contentBox.memberList .groupAddBtn, .contentBox.memberList .toolBox .right .groupPlusBtn, .contentBox.company .pagerBox, .contentBox.employee .btnBox, .contentBox.company .toolBox, .contentBox.senders .toolBox .right .memberAddBtn, .contentBox.employee .toolBox .right .mailAddBtn, .contentBox.senders .btnBox, .contentBox.group .toolBox .right .selectBox, .contentBox.sentMail_statUs .tabContentBox, .contentBox.sentMail_statUs .deleteBtn, .contentBox.sentMail_statUs .writingMailBtn, .contentBox.sentMail_statUs .tabBtnBox{display: none;} .contentBox.individual .tabContentBox .individual, .contentBox.group .tabContentBox .group, .contentBox.group_memberAdd > div > .titleBox, .contentBox.group_memberAdd .toolBox .left .txtBox, .contentBox.group_memberAdd .flexWrap .group_memberAdd, .contentBox.deleted_member .tabContentBox .deleted_member, .contentBox.deleted_member .toolBox .left .permanentDeleteBtn, .contentBox.deleted_member .toolBox .left .restoreBtn, .contentBox.sentMail .tabContentBox .sentMail, .contentBox.deleted_mail .tabContentBox .deleted_mail, .contentBox.deleted_mail .toolBox .left .restoreBtn, .contentBox.deleted_mail .toolBox .left .permanentDeleteBtn, .contentBox.memberList .tabContentBox .memberList, .contentBox.company .tabContentBox .company, .contentBox.employee .tabContentBox .employee, .contentBox.senders .tabContentBox .senders, .contentBox.senders .toolBox .right .mailAddBtn, .contentBox.employee .toolBox .right .memberAddBtn, .contentBox.group_memberAdd .toolBox .right .selectBox, .contentBox.template .tabContentBox .template, .contentBox.sentMail_statUs .titleBox{display: block;} /* 탭메뉴 작동 Fin */ .popUp_active{display: none;} .popUp_active.active{display: block;} .addPopUp{position: fixed; width: 100%; height: 100%; z-index: 9999; left: 0; top: 0; background-color: rgba(0,0,0,0.2);} .addPopUp > div{background-color: #fff; border-radius: 20px; overflow: hidden; width: 550px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);} .addPopUp > div > div:nth-child(1) > div:nth-child(1){position: relative; background-color: #F6F6F6; padding: 55px 0 20px 50px; box-sizing: border-box;} .addPopUp > div > div:nth-child(1) > div:nth-child(1) button{position: absolute; right: 20px; top: 20px; background-color: transparent; border: none; font-size: 15px; color: #999999;} .addPopUp > div > div:nth-child(1) > div:nth-child(1) h3{font-size: 20px; line-height: 28px; font-weight: 600; color: #444444;} .addPopUp > div > div:nth-child(1) > div:nth-child(1) .editBox{cursor: pointer; display: inline-block; padding-right: 20px; position: relative;} .addPopUp > div > div:nth-child(1) > div:nth-child(1) .editBox span{font-size: 20px; line-height: 28px; color: #444444; font-weight: 600;} .addPopUp > div > div:nth-child(1) > div:nth-child(1) .editBox span:after{content: ''; display: block; position: absolute; right: 0; top: 50%; transform: translateY(-50%); background: url('/assets/images/icon_edit.png') center / contain no-repeat; width: 12px; height: 12px;} .addPopUp > div > div:nth-child(1) > div:nth-child(1) .editBox input{display: none; font-size: 20px; line-height: 28px; border: none; outline: none; background-color: transparent;} .addPopUp > div > div:nth-child(1) > div:nth-child(1) .editBox input::placeholder{font-size: 20px; line-height: 28px; color: #444444; font-weight: 600;} .addPopUp > div > div:nth-child(1) > div:nth-child(1) .editBox input:after{content: ''; display: block; position: absolute; right: 0; top: 50%; transform: translateY(-50%); background: url('/assets/images/icon_edit.png') center / contain no-repeat; width: 12px; height: 12px;} .addPopUp > div > div:nth-child(1) > div:nth-child(1) .editBox input.active:after{display: none;} .addPopUp > div > div:nth-child(1) > div:nth-child(1) .editBox.active input{display: block;} .addPopUp > div > div:nth-child(1) > div:nth-child(1) .editBox.active span{display: none;} .addPopUp > div > div:nth-child(2){display: flex; border-top: 1px solid #EEEEEE;} .addPopUp > div > div:nth-child(2) button{position: relative; line-height: 65px; width: 50%; text-align: center; border: none; padding: 0; font-size: 18px; font-weight: 600; background-color: transparent;} .addPopUp > div > div:nth-child(2) .cancleBtn{color: #666666;} .addPopUp > div > div:nth-child(2) .purpleBtn{color: #6214FF;} .addPopUp > div > div:nth-child(2) .blueBtn{color: #256DCB;} .addPopUp > div > div:nth-child(2) button:nth-child(1):after{content: ''; position: absolute; display: block; background-color: #EEEEEE; width: 1px; height: 64px; right: 0; top: 50%; transform: translateY(-50%);} .addPopUp > div:not(.groupName, .category) > div:nth-child(1) > div:nth-child(2){padding: 30px 50px 35px 50px; box-sizing: border-box;} .addPopUp .groupAdd > div:nth-child(1) > div:nth-child(2) > div > span{font-size: 14px; font-weight: 500; color: #555555; line-height: 24px; display: block; margin-bottom: 10px;} .addPopUp .groupAdd > div:nth-child(1) > div:nth-child(2) > div:nth-child(1) ul{margin-bottom: 25px; display: flex; flex-wrap: wrap;} .addPopUp .groupAdd > div:nth-child(1) > div:nth-child(2) > div:nth-child(1) ul li{margin-bottom: 8px; position: relative; padding: 5px 10px; width: 19%; box-sizing: border-box; border: 1px solid #EEEEEE; border-radius: 5px; background-color: #F9F9F9;} .addPopUp .groupAdd > div:nth-child(1) > div:nth-child(2) > div:nth-child(1) ul li:not(:nth-child(5n)){margin-right: 1.25%;} .addPopUp .groupAdd > div:nth-child(1) > div:nth-child(2) > div:nth-child(1) ul li span{font-size: 13px; font-weight: 400; color: #666666;} .addPopUp .groupAdd > div:nth-child(1) > div:nth-child(2) > div:nth-child(1) ul li button{position: absolute; right: 10px; top: 50%; transform: translateY(-50%); padding: 0; border: none; background-color: transparent; font-size: 10px; color: #999999;} .addPopUp .groupAdd > div:nth-child(1) > div:nth-child(2) > div:nth-child(2) .radioBox{display: flex; justify-content: space-between; align-items: center;} .addPopUp .groupAdd > div:nth-child(1) > div:nth-child(2) > div:nth-child(2) .radioBox:not(:last-of-type){margin-bottom: 10px;} .addPopUp .groupAdd > div:nth-child(1) > div:nth-child(2) > div:nth-child(2) select{width: 425px;} .addPopUp .groupAdd > div:nth-child(1) > div:nth-child(2) > div:nth-child(2) .selectBox select{background-color: #F9F9F9;} .addPopUp .groupAdd > div:nth-child(1) > div:nth-child(2) > div:nth-child(2) input[type='radio']:checked + label + .selectBox select{background-color: #fff; border: 1px solid #CCCCCC;} .addPopUp .groupAdd > div:nth-child(1) > div:nth-child(2) > div:nth-child(2) .radioBox label{font-size: 14px; font-weight: 400; color: #999999;} .addPopUp .groupAdd > div:nth-child(1) > div:nth-child(2) > div:nth-child(2) .radioBox input[type='text']{border: 1px solid #F9F9F9; background-color: #F9F9F9; height: 34px; width: 330px; border-radius: 5px; outline: none;} .addPopUp .groupAdd > div:nth-child(1) > div:nth-child(2) > div:nth-child(2) .radioBox input[type='radio']:checked + label + input[type='text']{background-color: #fff;} .addPopUp .member_info .inputBox:not(:last-of-type){margin-bottom: 30px;} .addPopUp .member_info .inputBox label{margin-bottom: 10px; display: block; font-size: 14px; line-height: 24px; color: #555555; font-weight: 500;} .addPopUp .member_info .inputBox label span{font-size: 14px; line-height: 24px; color: #F79E00; font-weight: 500;} .addPopUp .member_info .inputBox input{padding: 15px 20px;} .addPopUp .member_info .inputBox input::placeholder{font-size: 14px; font-weight: 400; color: #CCCCCC;} .addPopUp .groupName > div:nth-child(1) > div:nth-child(2){padding: 30px 50px 50px 50px; box-sizing: border-box;} .addPopUp .groupName > div > div:nth-child(2) > span{margin-bottom: 10px; font-size: 14px; font-weight: 500; line-height: 24px; color: #555555; display: block;} .addPopUp .groupName > div > div:nth-child(2) ul{margin-bottom: 15px; height: 200px; overflow-y: auto; border: 1px solid #EEEEEE; border-radius: 5px;} .addPopUp .groupName > div > div:nth-child(2) ul li{position: relative; padding: 15px 20px; box-sizing: border-box;} .addPopUp .groupName > div > div:nth-child(2) ul li:not(:last-child){border-bottom: 1px solid #EEEEEE;} .addPopUp .groupName > div > div:nth-child(2) ul li span{display: block; font-size: 14px; font-weight: 400; line-height: 22px; color: #555555;} .addPopUp .groupName > div > div:nth-child(2) ul li button{border: none; background-color: transparent; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);} .addPopUp .groupName > div > div:nth-child(2) ul li button i{font-size: 13px; color: #999999;} .addPopUp .groupName > div > div:nth-child(2) > div{display: flex; justify-content: right;} .addPopUp .groupName > div > div:nth-child(2) > div button{transition: background 0.2s ease-out; color: #999999; background-color: transparent; border: 1px solid #EEEEEE; position: relative; padding: 10px 18px 10px 42px; font-size: 15px; font-weight: 400; border-radius: 5px;} .addPopUp .groupName > div > div:nth-child(2) > div button:before{content: ''; display: block; position: absolute; left: 18px; top: 50%; transform: translateY(-50%); background-repeat: no-repeat; background-position: center; background-size: contain;} .addPopUp .groupName > div > div:nth-child(2) > div button:not(:first-child){margin-left: 10px;} .addPopUp .groupName > div > div:nth-child(2) > div .memberAddBtn:before{background-image: url('/assets/images/memberAddBtn.png'); width: 16px; height: 14px;} .addPopUp .groupName > div > div:nth-child(2) > div .writingMailBtn:hover{color: #fff; background-color: #6214FF;} .addPopUp .groupName > div > div:nth-child(2) > div .writingMailBtn:before{background-image: url('/assets/images/writingMailBtn.png'); width: 16px; height: 14px;} .addPopUp .groupName > div > div:nth-child(2) > div .writingMailBtn:hover:before{background-image: url('/assets/images/writingMailBtn_white.png');} .addPopUp .openMail > div > div:nth-child(1) span{font-size: 20px; line-height: 28px; font-weight: 600; color: #444444;} .addPopUp .openMail > div > div:nth-child(2) > span{margin-bottom: 10px; font-size: 14px; font-weight: 500; line-height: 24px; color: #555555; display: block;} .addPopUp .openMail > div > div:nth-child(2) > div{margin-bottom: 10px;} .addPopUp .openMail > div > div:nth-child(2) span{font-size: 14px; font-weight: 500; color: #555555; line-height: 24px;} .addPopUp .openMail > div > div:nth-child(2) ul{margin-bottom: 15px; height: 275px; overflow-y: auto; border: 1px solid #EEEEEE; border-radius: 5px;} .addPopUp .openMail > div > div:nth-child(2) ul li{position: relative; padding: 15px 20px; box-sizing: border-box;} .addPopUp .openMail > div > div:nth-child(2) ul li:not(:last-child){border-bottom: 1px solid #EEEEEE;} .addPopUp .openMail > div > div:nth-child(2) ul li span:nth-child(1){display: block; font-size: 14px; font-weight: 400; line-height: 22px; color: #555555;} .addPopUp .openMail > div > div:nth-child(2) ul li span:nth-child(2){position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 12px; font-weight: 400; color: #999999;} .addPopUp .openMail > div > div:nth-child(2) ul li button{border: none; background-color: transparent; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);} .addPopUp .openMail > div > div:nth-child(2) ul li button i{font-size: 13px; color: #999999;} .addPopUp .openMail > div > div:nth-child(2) > div{display: flex;} .addPopUp .openMail > div > div:nth-child(2) > div button{transition: background 0.2s ease-out; color: #999999; background-color: transparent; border: 1px solid #EEEEEE; position: relative; padding: 10px 18px 10px 42px; font-size: 15px; font-weight: 400; border-radius: 5px;} .addPopUp .openMail > div > div:nth-child(2) > div button:before{content: ''; display: block; position: absolute; left: 18px; top: 50%; transform: translateY(-50%); background-repeat: no-repeat; background-position: center; background-size: contain;} .addPopUp .openMail > div > div:nth-child(2) > div button:not(:first-child){margin-left: 10px;} .addPopUp .openMail > div > div:nth-child(2) > div .memberAddBtn:before{background-image: url('/assets/images/memberAddBtn.png'); width: 16px; height: 14px;} .addPopUp .openMail > div > div:nth-child(2) > div .writingMailBtn:hover{color: #fff; background-color: #6214FF;} .addPopUp .openMail > div > div:nth-child(2) > div .writingMailBtn:before{background-image: url('/assets/images/writingMailBtn.png'); width: 16px; height: 14px;} .addPopUp .openMail > div > div:nth-child(2) > div .writingMailBtn:hover:before{background-image: url('/assets/images/writingMailBtn_white.png');} .addPopUp .category > div:nth-child(1) > div:nth-child(2){padding: 30px 50px 35px 50px; box-sizing: border-box;} .addPopUp .category > div > div:nth-child(2) > div > span{font-size: 14px; font-weight: 500; color: #555555; line-height: 24px; margin-bottom: 10px; display: block;} .addPopUp .category > div > div:nth-child(2) .inputWrap{margin-bottom: 15px;} .addPopUp .category > div > div:nth-child(2) .inputWrap > div{display: flex; justify-content: space-between; position: relative; border-radius: 5px; border: 1px solid #EEEEEE; padding: 15px 20px; box-sizing: border-box;} .addPopUp .category > div > div:nth-child(2) .inputWrap > div:not(:last-of-type){margin-bottom: 8px;} .addPopUp .category > div > div:nth-child(2) .inputWrap > div input{outline: none; font-size: 14px; font-weight: 400; color: #555555; border: none;} .addPopUp .category > div > div:nth-child(2) .inputWrap > div label{transition: opacity 0.2s ease-out; opacity: 0; position: absolute; font-size: 12px; font-weight: 400; color: #6214FF; right: 20px; top: 50%; transform: translateY(-50%); z-index: 9; cursor: pointer;} .addPopUp .category > div > div:nth-child(2) .inputWrap > div:hover label, .addPopUp .category > div > div:nth-child(2) .inputWrap > div:hover button{opacity: 1;} .addPopUp .category > div > div:nth-child(2) .inputWrap > div button{transition: opacity 0.2s ease-out; opacity: 0; position: absolute; right: 70px; top: 50%; transform: translateY(-50%); z-index: 9; font-size: 12px; font-weight: 400; color: #999999; background-color: transparent; border: none;} .addPopUp .category > div > div:nth-child(2) .addBox button{position: relative; padding: 10px 18px 10px 32px; border: none; background-color: #666666; border-radius: 5px; color: #fff; font-size: 15px; font-weight: 400;} .addPopUp .category > div > div:nth-child(2) .addBox button:before{content: ''; display: block; background: url('/assets/images/plusBtn.png') center / contain no-repeat; width: 8px; height: 8px; position: absolute; left: 18px; top: 50%; transform: translateY(-50%);} .addPopUp .category > div > div:nth-child(2) .addBox input{display: none; padding: 10px 18px; box-sizing: border-box; border-radius: 5px; border: 1px solid #EEEEEE; width: 100%; outline: none;} .addPopUp .category > div > div:nth-child(2) .addBox input::placeholder{font-size: 15px; font-weight: 400; color: #CCCCCC;} .addPopUp .category > div > div:nth-child(2) .addBox button.active{display: none;} .addPopUp .category > div > div:nth-child(2) .addBox button.active + input{display: block;} .addPopUp .category > div > div:nth-child(2) .inputContainer > div:not(:last-child){margin-bottom: 30px;} .addPopUp .category > div > div:nth-child(2) .inputContainer > div input{width: 100%; outline: none; font-size: 14px; font-weight: 400; color: #555555; border: none; border-radius: 5px; border: 1px solid #EEEEEE; padding: 15px 20px; box-sizing: border-box;} .addPopUp .category > div > div:nth-child(2) .inputContainer > div input::placeholder{color: #CCCCCC; font-size: 14px; font-weight: 400;} .addPopUp .category > div > div:nth-child(2) .inputContainer > div label{margin-bottom: 10px; font-size: 14px; font-weight: 500; color: #555555; display: block;} .addPopUp .category > div > div:nth-child(2) .inputContainer > div label span{color: #F79E00; font-size: 14px; font-weight: 500;} .addPopUp .category > div > div:nth-child(2) .inputContainer > div input:focus, .addPopUp .category > div > div:nth-child(2) .inputContainer > div insdfput:valid{border-color: #CCCCCC;} .alertPopUp{position: fixed; width: 100%; height: 100%; z-index: 9999; left: 0; top: 0; background-color: rgba(0,0,0,0.2);} .alertPopUp > div{background-color: #fff; border-radius: 10px; width: 420px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);} .alertPopUp > div > div:nth-child(1){height: 125px; position: relative;} .alertPopUp > div > div:nth-child(1) p{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; text-align: center; font-size: 15px; line-height: 28px; color: #666666;} .alertPopUp > div > div:nth-child(1) p strong{font-weight: 600; color: #666666; display: block;} .alertPopUp > div > div:nth-child(2){display: flex; border-top: 1px solid #EEEEEE;} .alertPopUp > div > div:nth-child(2) button{position: relative; line-height: 50px; width: 50%; text-align: center; border: none; padding: 0; font-size: 16px; font-weight: 600; background-color: transparent;} .alertPopUp > div > div:nth-child(2) .cancleBtn{color: #999999;} .alertPopUp > div > div:nth-child(2) .blueBtn{color: #1B6ADD;} .alertPopUp > div > div:nth-child(2) .redBtn{color: #D60000;} .alertPopUp > div > div:nth-child(2) .purpleBtn{color: #6214FF;} .alertPopUp > div > div:nth-child(2) button:nth-child(1):after{content: ''; position: absolute; display: block; background-color: #EEEEEE; width: 1px; height: 49px; right: 0; top: 50%; transform: translateY(-50%);} .alertPopUp .editBox{padding-right: 20px; display: inline-block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);} .alertPopUp .editBox input[type='text']{font-size: 20px; font-weight: 600; color: #444444; line-height: 28px; outline: none; padding: 0; margin: 0; border: none; display: inline-block; height: 25px;} .alertPopUp .editBox input[type='text']::placeholder{font-size: 20px; font-weight: 600; color: #999999; border: none;} .alertPopUp .editBox input[type='text']:focus::placeholder{color: transparent;} .alertPopUp .editBox input[type='text']:focus + label, .alertPopUp .editBox input[type='text']:valid + label{display: none;} .alertPopUp .editBox label{cursor: pointer; position: absolute; right: 0; top: 50%; transform: translateY(-50%); background: url('/assets/images/icon_edit.png') center / contain no-repeat; width: 12px; height: 12px;} .alertPopUp .editBox input[type='text'].category{width: 222px;} .alertPopUp .editBox input[type='text'].group{width: 190px;} .previewPopUp{position: fixed; width: 100%; height: 100%; z-index: 9999; left: 0; top: 0; background-color: rgba(0,0,0,0.2);} .previewPopUp > div{padding: 30px 30px 40px 30px; box-sizing: border-box; background-color: #fff; border-radius: 5px; width: 900px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);} .previewPopUp > div > button{transition: background, transform 0.2s ease-out; width: 40px; height: 40px; border-radius: 100%; border: none; background-color: #F79E00; position: absolute; right: -20px; top: -20px;} .previewPopUp > div > button:hover{transform: rotate(90deg); background-color: #222222;} .previewPopUp > div > button i{color: #fff; font-size: 13px;} .previewPopUp > div > button:hover i{color: #63FAFF;} .previewPopUp > div h3{font-size: 20px; line-height: 24px; color: #222222; display: block; margin-bottom: 25px;} .previewPopUp > div .top{margin-bottom: 15px;} .previewPopUp > div .top > span:nth-child(1){padding: 5px 10px; display: inline-block; background-color: #999999; border-radius: 5px; color: #fff; font-size: 14px;} .previewPopUp > div .top > span:nth-child(2){font-size: 14px; font-weight: 400; color: #555555; line-height: 16px; margin-left: 5px;} .previewPopUp > div .top.select_member{position: relative; cursor: pointer;} .previewPopUp > div .top.select_member.active > ul{display: block;} .previewPopUp > div .top.select_member > ul{display: none; position: absolute; top: 35px; left: 0; width: 100%; background-color: #fff; margin-bottom: 15px; height: 200px; overflow-y: auto; border: 1px solid #EEEEEE; border-radius: 5px;} .previewPopUp > div .top.select_member > ul li{position: relative; padding: 15px 20px; box-sizing: border-box;} .previewPopUp > div .top.select_member > ul li:not(:last-child){border-bottom: 1px solid #EEEEEE;} .previewPopUp > div .top.select_member > ul li span{display: block; font-size: 14px; font-weight: 400; line-height: 22px; color: #555555;} .previewPopUp > div .top.select_member > ul li button{border: none; background-color: transparent; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);} .previewPopUp > div .top.select_member > ul li button i{font-size: 13px; color: #999999;} .previewPopUp > div .top.select_member:hover span:nth-child(2){text-decoration: underline;} .previewPopUp.sentMail .dateBox{position: absolute; bottom: -28px; left: 0; width: 100%; display: flex; justify-content: space-between;} .previewPopUp.sentMail .dateBox span{font-size: 13px; line-height: 22px; color: #FFFFFF; font-weight: 400;} .findPopUp{position: fixed; width: 100%; height: 100%; z-index: 9999; left: 0; top: 0; background-color: rgba(0,0,0,0.2);} .findPopUp > div{background-color: #fff; border-radius: 20px; width: 550px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);} .findPopUp > div > div:nth-child(1){height: 135px; position: relative;} .findPopUp > div > div:nth-child(1) p{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; text-align: center; font-size: 15px; line-height: 28px; color: #666666;} .findPopUp > div > div:nth-child(1) p strong{font-weight: 600; color: #666666; display: block;} .findPopUp > div > div:nth-child(2){display: flex; border-top: 1px solid #EEEEEE;} .findPopUp > div > div:nth-child(2) button{position: relative; line-height: 50px; text-align: center; border: none; padding: 0; font-size: 16px; font-weight: 600; background-color: transparent;} .findPopUp > div > div:nth-child(2).type_a button{width: 50%;} .findPopUp > div > div:nth-child(2).type_b button{width: 100%;} .findPopUp > div > div:nth-child(2).type_a button:nth-child(1):after{content: ''; position: absolute; display: block; background-color: #EEEEEE; width: 1px; height: 49px; right: 0; top: 50%; transform: translateY(-50%);} .findPopUp > div > div:nth-child(2) .findBtn{color: #666666;} .findPopUp > div > div:nth-child(2) .purpleBtn{color: #6214FF;} .progressPopUp{position: fixed; width: 100%; height: 100%; z-index: 9999; left: 0; top: 0; background-color: rgba(0,0,0,0.2);} .progressPopUp > div{background-color: #fff; border-radius: 20px; width: 550px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);} .progressPopUp > div > div:nth-child(1){padding: 40px 45px; box-sizing: border-box;} .progressPopUp > div > div:nth-child(1) h3{margin-bottom: 25px; font-size: 20px; font-weight: 600; color: #444444; line-height: 28px;} .progressPopUp > div > div:nth-child(1) .progressBox > div:nth-child(1){margin-bottom: 10px; display: flex; justify-content: space-between;} .progressPopUp > div > div:nth-child(1) .progressBox > div:nth-child(1) > div span{color: #999999; font-size: 13px; line-height: 25px; font-weight: 500;} .progressPopUp > div > div:nth-child(1) .progressBox > div:nth-child(1) > div span.purple{color: #6214FF;} .progressPopUp > div > div:nth-child(1) .progressBox > div:nth-child(1) > div:nth-child(1) span:not(:first-child){padding-left: 10px; position: relative;} .progressPopUp > div > div:nth-child(1) .progressBox > div:nth-child(1) > div:nth-child(1) span:not(:first-child):before{content: '/'; font-size: 13px; font-weight: 500; color: #999999; position: absolute; left: 1px; top: 50%; transform: translateY(-50%);} .progressPopUp > div > div:nth-child(1) .progressBox > div:nth-child(1) > div:nth-child(2) span:not(:first-child){padding-left: 18px; position: relative;} .progressPopUp > div > div:nth-child(1) .progressBox > div:nth-child(1) > div:nth-child(2) span:not(:first-child):before{content: ''; display: block; position: absolute; width: 1px; height: 10px; background-color: #DDDDDD; left: 7px; top: 3px;} .progressPopUp > div > div:nth-child(1) .progressBox > div:nth-child(2){background-color: #F6F6F6; border-radius: 5px; overflow: hidden; position: relative; height: 32px;} .progressPopUp > div > div:nth-child(1) .progressBox > div:nth-child(2) .numb{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 13px; font-weight: 500; color: #6214FF;} .progressPopUp > div > div:nth-child(1) .progressBox > div:nth-child(2) .progress{transition: all 0.2s ease-out; position: absolute; left: 0; top: 0; height: 100%; background-color: #6214FF;} .progressPopUp > div > div:nth-child(2){display: flex; border-top: 1px solid #EEEEEE;} .progressPopUp > div > div:nth-child(2) button{margin-left: 0; position: relative; line-height: 50px; width: 50%; text-align: center; border: none; padding: 0; font-size: 16px; font-weight: 600; background-color: transparent;} .progressPopUp > div > div:nth-child(2) .cancleBtn{color: #999999;} .progressPopUp > div > div:nth-child(2) .yellowBtn{color: #F79E00;} .progressPopUp > div > div:nth-child(2) button:nth-child(1):after{content: ''; position: absolute; display: block; background-color: #EEEEEE; width: 1px; height: 49px; right: 0; top: 50%; transform: translateY(-50%);} .datePopUp{position: fixed; width: 100%; height: 100%; z-index: 9999; left: 0; top: 0; background-color: rgba(0,0,0,0.2);} .datePopUp > div{background-color: #fff; border-radius: 20px; width: 550px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);} .datePopUp > div > div:nth-child(1) > div:nth-child(1){position: relative; border-radius: 20px 20px 0 0; padding: 55px 50px 20px 50px; box-sizing: border-box; background-color: #F6F6F6;} .datePopUp > div > div:nth-child(1) > div:nth-child(1) button{position: absolute; right: 28px; top: 24px; background-color: transparent; border: none; color: #999999; font-size: 15px; padding: 0;} .datePopUp > div > div:nth-child(1) h3{font-size: 20px; font-weight: 600; color: #444444; line-height: 28px;} .datePopUp > div > div:nth-child(1) > div:nth-child(2){padding: 30px 50px 35px 50px; box-sizing: border-box;} .datePopUp > div > div:nth-child(1) > div:nth-child(2) > span{font-size: 14px; font-weight: 500; display: block; line-height: 24px; margin-bottom: 10px;} .datePopUp > div > div:nth-child(1) > div:nth-child(2) > div{display: flex; justify-content: space-between;} .datePopUp > div > div:nth-child(1) > div:nth-child(2) > div input{font-size: 14px; font-weight: 400; color: #555555; outline: none; width: 230px; border: 1px solid #CCCCCC; box-sizing: border-box; height: 35px; border-radius: 5px; cursor: pointer; text-align: center;} .datePopUp > div > div:nth-child(1) > div:nth-child(2) > div select{outline: none; width: 100px; border: 1px solid #CCCCCC; box-sizing: border-box; height: 35px; padding: 0 0 0 18px; border-radius: 5px;} .datePopUp > div > div:nth-child(2){display: flex; border-top: 1px solid #EEEEEE;} .datePopUp > div > div:nth-child(2) button{position: relative; line-height: 50px; width: 50%; text-align: center; border: none; padding: 0; font-size: 16px; font-weight: 600; background-color: transparent;} .datePopUp > div > div:nth-child(2) .cancleBtn{color: #999999;} .datePopUp > div > div:nth-child(2) .purpleBtn{color: #6214FF;} .datePopUp > div > div:nth-child(2) button:nth-child(1):after{content: ''; position: absolute; display: block; background-color: #EEEEEE; width: 1px; height: 49px; right: 0; top: 50%; transform: translateY(-50%);} /* 캘린더 커스텀 */ input[type='date']{ width: 100%; position: relative; } ::-webkit-calendar-picker-indicator { position: absolute; right: 0; top: 50%; transform: translate(0, -50%); padding-left: 9999px; height: 100%; cursor: pointer; } input[type="date"]::-webkit-clear-button, input[type="date"]::-webkit-inner-spin-button { display: none; } input[type="date"]::-webkit-calendar-picker-indicator { background: transparent; z-index: 1; } /* 캘린더 커스텀 Fin */ /* List of Members PopUp */ .userInfo_popUp{z-index: 9999; box-shadow: -2px 0px 10px rgba(0, 0, 0, 0.15); position: fixed; right: 0; top: 0; width: 520px; height: 100%; padding-top: 150px; box-sizing: border-box; background-color: #E2E2E2;} .userInfo_popUp .userInfoBox{overflow-y: scroll; background-color: #fff; height: 100%;} .userInfo_popUp .userNameBox{position: absolute; left: 0; top: 0; width: 100%; height: 150px; background-color: #6214FF;} .userInfo_popUp .userNameBox > div{position: absolute; left: 40px; bottom: 25px;} .userInfo_popUp .userNameBox > div > span:nth-child(1){color: #fff; font-size: 20px; font-weight: 600; line-height: 28px; display: block; margin-bottom: 10px;} .userInfo_popUp .userNameBox > div > span:nth-child(2){color: rgba(255,255,255,0.8); font-size: 16px; font-weight: 400; line-height: 28px; display: block;} .userInfo_popUp span{display: block;} .userInfo_popUp ul{padding: 25px 30px 55px 30px; box-sizing: border-box;} .userInfo_popUp ul.add{padding-bottom: 90px;} .userInfo_popUp ul li{align-items: center; position: relative; display: flex; padding: 22px 30px; box-sizing: border-box; background-color: #FBFBFB; border-radius: 5px;} .userInfo_popUp ul li:not(:last-child){margin-bottom: 15px;} .userInfo_popUp ul li > span:nth-child(1){width: 100px; font-weight: 600; font-size: 14px; color: #222222;} .userInfo_popUp ul li > span:nth-child(2){color: #777777; font-size: 14px; font-weight: 400;} .userInfo_popUp ul li > div:not(.selectBox){transition: opacity 0.2s ease-out; opacity: 0; visibility: hidden; position: absolute; right: 25px; top: 50%; transform: translateY(-50%);} .userInfo_popUp ul li > div:not(.selectBox) button{background-color: transparent; border: none; font-size: 14px; font-weight: 400;} .userInfo_popUp ul li > div:not(.selectBox) .editBtn{color: #6214FF;} .userInfo_popUp ul li > div:not(.selectBox) .saveBtn{display: none; color: #F79E00;} .userInfo_popUp ul li:hover > div{opacity: 1; visibility: visible;} .userInfo_popUp ul li.active > div{opacity: 1; visibility: visible;} .userInfo_popUp ul li.active > div .editBtn{display: none;} .userInfo_popUp ul li.active > div .saveBtn{display: block;} .userInfo_popUp input[type='text']{outline: none; border: none; background-color: transparent; width: calc(100% - 100px);} .userInfo_popUp input[type='text']::placeholder{font-size: 14px; font-weight: 400; color: #CCCCCC;} .userInfo_popUp .selectWrap{padding: 10px 30px;} .userInfo_popUp .selectBox{width: calc(100% - 100px);} .userInfo_popUp .selectBox select{background-color: #fff; border: 1px solid #EEEEEE; padding: 12px 16px; box-sizing: border-box; width: 100%; font-size: 14px; font-weight: 400; color: #ccc;} .userInfo_popUp .btnBox{z-index: 9; position: absolute; width: 100%; left: 0; bottom: 0; background-color: #fff; height: 60px;} .userInfo_popUp .mailSendBox{position: absolute; width: 100%; right: 20px; bottom: 20px;} .userInfo_popUp .mailSendBox .mailSendBtn{position: absolute; right: 20px; bottom: 3px; background-color: transparent; border: none;} .userInfo_popUp .mailSendBox .mailSendBtn span{transition: all 0.3s ease-out; display: block; background: url('/assets/images/submitBtn.png') center / contain no-repeat; width: 18px; height: 18px;} .userInfo_popUp .mailSendBox .mailSendBtn:hover span{background-image: url('/assets/images/submitBtn_hover.png');} .userInfo_popUp .mailSendBox .mailSendBtn:hover + span{opacity: 1; transition: all 0.3s ease-out;} .userInfo_popUp .userAddBox{position: absolute; width: 100%; right: 0; bottom: 0;} .userInfo_popUp .userAddBox .userAddBtn{transition: background 0.2s ease-out; position: absolute; padding: 23px 50px; right: 0; bottom: 0; background-color: #6214FF; border: none;} .userInfo_popUp .userAddBox .userAddBtn:hover{background-color: #3E178D;} .userInfo_popUp .userAddBox .userAddBtn span{position: relative; font-size: 15px; font-weight: 500; color: #FFFFFF; padding-left: 25px;} .userInfo_popUp .userAddBox .userAddBtn span:before{content: ''; display: block; position: absolute; left: 0; top: 2px; background: url('/assets/images/memberAddBtn_white.png') center / contain no-repeat; width: 16px; height: 14px;} .userInfo_popUp .mailSendBox > span{opacity: 0; background-color: #222222; color: #fff; font-size: 12px; font-weight: 400; padding: 7px 12px; border-radius: 5px; position: absolute; right: 55px; bottom: 0px;} .userInfo_popUp .mailSendBox > span:after{content: ''; position: absolute; right: -9px; top: 50%; transform: translateY(-50%); background: url('/assets/images/triangle.png') center / contain no-repeat; width: 13px; height: 9px;} .userInfo_popUp .toggleSwitchBox{position: absolute; bottom: 25px; left: 30px;} .userInfo_popUp .toggleSwitchBox > label{font-size: 13px; font-weight: 600; color: #999999; margin-right: 5px;} .userInfo_popUp .toggleSwitchBox .toggleSwitch{float: right;} .userInfo_popUp .closeBtn{background-color: transparent; position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border-radius: 100%; border: none; z-index: 9;} .userInfo_popUp .closeBtn i{font-size: 14px; animation: rotate_Btn_return 0.5s backwards; color: #fff;} .userInfo_popUp .closeBtn:hover i{animation: rotate_Btn 0.5s backwards;} @keyframes rotate_Btn { 0% { transform: rotate(0deg); } 100% { transform: rotate(90deg); } } @keyframes rotate_Btn_return { 0% { transform: rotate(0deg); } 100% { transform: rotate(-90deg); } } /* List of Members PopUp Fin */ /* popUp Fin */ .contentBox{padding: 50px 0 0 260px; box-sizing: border-box;} .contentBox > div{padding: 33px 45px 0 45px; box-sizing: border-box;} .contentBox h2{font-size: 16px; font-weight: 600; color: #CCCCCC; line-height: 30px;} .contentBox.member h2, .contentBox.group h2, .contentBox.temporary_storage h2, .contentBox.setting h2, .contentBox.template h2, .contentBox.sentMail h2, .contentBox.sentMail_statUs h2, .contentBox.deleted_mail h2{margin-bottom: 10px;} .contentBox.writingMail h2{margin-bottom: 30px;} .contentBox .tabBtnBox{margin-bottom: 40px; display: flex;} .contentBox .tabBtnBox > button, .contentBox .tabBtnBox > div > button{padding: 0; position: relative; border: none; font-size: 26px; font-weight: 700; line-height: 30px; color: #999999; background-color: transparent;} .contentBox .tabBtnBox > button.active{color: #F79E00;} .contentBox .tabBtnBox > button:not(:first-child), .contentBox .tabBtnBox > div{margin-left: 30px;} .contentBox .tabBtnBox button.addBtn{border-radius: 5px; transition: background 0.2s ease-out; position: relative; width: 28px; height: 28px;} .contentBox .tabBtnBox button.addBtn:after{content: ''; display: block; background: url('/assets/images/dot_btn.png') center / contain no-repeat; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 12px; height: 2px;} .contentBox .tabBtnBox button.addBtn:hover{background-color: #F6F6F6;} .contentBox .tabBtnBox > div{position: relative;} .contentBox .tabBtnBox > div > div{z-index: 9; padding: 3px; box-sizing: border-box; position: absolute; width: 120px; border-radius: 5px; background-color: #fff; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);} .contentBox .tabBtnBox > div > div > button{border-radius: 4px; width: 100%; text-align: left; transition: background 0.2s ease-out; font-size: 13px; font-weight: 500; color: #999999; background-color: transparent; border: none; padding: 6px 10px; box-sizing: border-box;} .contentBox .tabBtnBox > div > div > button:not(:last-child){margin-bottom: 3px;} .contentBox .tabBtnBox > div > div > button:hover{color: #555555; background-color: #F6F6F6;} /* contentBox 공통요소 Fin */ .loginWrap{position: fixed; width: 100%; height: 100%;} .loginWrap .loginBox{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.08); border-radius: 25px; width: 1200px; height: 650px;} .loginWrap .loginBox > div:nth-of-type(1){margin-bottom: 25px; height: 650px; display: flex;} .loginWrap .loginBox > div:nth-of-type(2){display: flex; justify-content: center;} .loginWrap .loginBox > div:nth-of-type(2) > p{font-size: 14px; line-height: 22px; display: block; text-align: center; color: #CCCCCC;} .loginWrap .loginBox > div:nth-of-type(2) > div{display: flex;} .loginWrap .loginBox > div:nth-of-type(2) > div > *{position: relative; margin-left: 40px;} .loginWrap .loginBox > div:nth-of-type(2) > div > *:before{content: ''; display: block; position: absolute; left: -20px; top: 5px; width: 1px; height: 14px; background-color: #EEEEEE;} .loginWrap .loginBox > div:nth-of-type(2) > div > button, .loginWrap .loginBox > div:nth-of-type(2) > div > div > button{background-color: transparent; font-size: 14px; font-weight: 400; border: none;} .loginWrap .loginBox > div:nth-of-type(2) button:not(.yellow){color: #999999;} .loginWrap .loginBox > div:nth-of-type(2) button.yellow{color: #F79E00;} .loginWrap .loginBox > div:nth-of-type(2) > div > div{position: relative;} .loginWrap .loginBox > div:nth-of-type(2) > div > div > div{display: none; padding: 3px; box-sizing: border-box; position: absolute; bottom: 30px; background-color: #fff; border-radius: 5px; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); width: 120px;} .loginWrap .loginBox > div:nth-of-type(2) > div > div > div > button{width: 100%; text-align: left; font-size: 13px; font-weight: 500; color: #999999; background-color: transparent; border: none; border-radius: 4px; transition: background 0.2s ease-out; display: block; padding: 5px 10px; box-sizing: border-box;} .loginWrap .loginBox > div:nth-of-type(2) > div > div > div > button:hover{background-color: #F6F6F6; color: #555555;} .loginWrap .loginBox > div:nth-of-type(2) > div > div > div > button:not(:last-child){margin-bottom: 3px;} .loginWrap .loginBox > div:nth-of-type(2) > div > div > button.active + div{display: block;} .loginWrap .loginBox > div:nth-of-type(2) > div > div > button span{transition: transform 0.2s ease-out; transform: rotate(0deg); background: url('/assets/images/arrow_up.png') center / contain no-repeat; width: 8px; height: 5px; vertical-align: middle; display: inline-block; margin-left: 20px;} .loginWrap .loginBox > div:nth-of-type(2) > div > div > button.active span{transform: rotate(180deg);} .loginWrap .loginBox .left{position: relative; width: 660px; height: 100%; background: url('/assets/images/login.png') center / cover no-repeat;} .loginWrap .loginBox .left span{position: absolute; left: 35px; top: 30px; font-size: 20px; font-weight: 700; color: #fff; opacity: 0.5;} .loginWrap .loginBox .right{position: relative; width: 540px; height: 100%;} .loginWrap .loginBox .right > div{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);} .loginWrap .loginBox .right h1{text-align: center; font-size: 42px; font-weight: 700; color: #222222; line-height: 60px; margin-bottom: 5px;} .loginWrap .loginBox .right h1 + span{text-align: center; display: block; margin-bottom: 30px; font-size: 14px; font-weight: 500; line-height: 22px; color: #666666;} .loginWrap .loginBox .right > div > div{width: 340px;} .loginWrap .loginBox .right .inputBox{position: relative;} .loginWrap:not(.find) .loginBox .right > div > div .inputBox:nth-child(1){margin-bottom: 10px;} .loginWrap:not(.find) .loginBox .right > div > div .inputBox:nth-child(2){margin-bottom: 15px;} .loginWrap.login .loginBox .right .inputBox span{background-repeat: no-repeat; background-size: contain; background-position: center; position: absolute; left: 20px; top: 50%; transform: translateY(-50%);} .loginWrap.login .loginBox .right > div > div .inputBox:nth-child(1) span{background-image: url('/assets/images/icon_login.png'); width: 15px; height: 16px;} .loginWrap.login .loginBox .right > div > div .inputBox:nth-child(2) span{background-image: url('/assets/images/icon_pw.png'); width: 12px; height: 16px;} .loginWrap:not(.find) .loginBox .right .inputBox input{padding-left: 55px;} .loginWrap:not(.login) .loginBox .right .inputBox input{padding: 15px 21px;} .loginWrap .loginBox .right .inputBox label{display: block; font-size: 13px; line-height: 24px; font-weight: 400; color: #666666; margin-bottom: 5px;} .loginWrap .loginBox .right .inputBox label span{color: #F79E00; font-size: 13px; font-weight: 400; margin-left: 5px;} .loginWrap .loginBox .right .checkBox{margin-bottom: 45px;} .loginWrap .loginBox .right .purpleBtn{margin-bottom: 15px;} .loginWrap .loginBox .right .btnBox{display: flex; justify-content: center;} .loginWrap .loginBox .right .btnBox button{font-size: 12px; font-size: 400; color: #999999; background-color: transparent; border: none;} .loginWrap .loginBox .right .btnBox button:not(:first-child){margin-left: 30px; position: relative;} .loginWrap .loginBox .right .btnBox button:not(:first-child):before{content: ''; display: block; width: 1px; height: 10px; background-color: #CCCCCC; left: -15px; top: 3px; position: absolute;} .loginWrap .loginBox .right h2{font-size: 32px; font-weight: 700; line-height: 60px; color: #222222;} .loginWrap .loginBox .right h2 + span{font-size: 14px; line-height: 22px; color: #666666; font-weight: 500; margin-bottom: 35px; display: block;} .loginWrap.find .loginBox .right > div > div .inputBox:nth-child(1){margin-bottom: 20px;} .loginWrap.find .loginBox .right > div > div .inputBox:nth-child(2){margin-bottom: 30px;} .loginWrap.find .loginBox .left{background-image: url('/assets/images/find.png');} .loginWrap.signUp .loginBox .right > div > div:not(.btnBox){position: relative; height: 310px; overflow-y: auto;} .loginWrap.signUp .loginBox .right > div > div:not(.btnBox):after{content: ''; display: block; position: sticky; left: 0; bottom: 0; width: 100%; height: 50px; background: linear-gradient(rgba(255, 255, 255, 0.5) 0%, #fff 100%);} .loginWrap.signUp .loginBox .right > div > div .inputBox{margin-bottom: 20px;} .loginWrap.signUp .loginBox .right > div > div .inputBox:nth-child(2) input:not(:last-of-type){margin-bottom: 8px;} /* login Fin */ .tableWrap .tableType_a{width: 100%;} .tableWrap .tableType_a thead tr th{border-bottom: 1px solid #707070; padding-bottom: 15px; font-size: 16px; font-weight: 500; color: #999999; line-height: 25px;} .tableWrap .tableType_a tbody tr td{cursor: pointer; border-bottom: 1px solid #EEEEEE; padding: 20px 0;} .tableWrap .tableType_a tbody tr:hover td{background-color: rgba(0,0,0,0.02);} .tableWrap .tableType_a tbody tr td span{font-size: 16px; line-height: 25px; font-weight: 400; color: #555555;} .tableWrap .tableType_a thead tr th.check{width: 45px;} .tableWrap .tableType_a tbody tr td.check{vertical-align: middle; text-align: center;} /* tableType_a Fin */ .individual .tableWrap .tableType_a thead tr th:not(.check), .group .tableWrap .tableType_a thead tr th:not(.check), .group_memberAdd .tableWrap .tableType_a thead tr th:not(.check), .deleted_member .tableWrap .tableType_a thead tr th:not(.check), .sentMail .tableWrap .tableType_a thead tr th:not(.check), .deleted_mail .tableWrap .tableType_a thead tr th:not(.check){text-align: left;} .individual .tableWrap .tableType_a thead tr th:nth-child(2){width: 130px;} .individual .tableWrap .tableType_a thead tr th:nth-child(3){width: 285px;} .individual .tableWrap .tableType_a thead tr th:nth-child(4){width: 1110px;} .deleted_mail .tableWrap .tableType_a thead tr th:nth-child(2){width: 330px;} .deleted_mail .tableWrap .tableType_a thead tr th:nth-child(4){width: 220px;} .deleted_mail .tableWrap .tableType_a thead tr th:nth-child(5), .deleted_mail .tableWrap .tableType_a thead tr th:nth-child(6){width: 120px;} .sentMail .tableWrap .tableType_a thead tr th:nth-child(2){width: 330px;} /* .sentMail .tableWrap .tableType_a thead tr th:nth-child(3){width: 760px;} */ .sentMail .tableWrap .tableType_a thead tr th:nth-child(4){width: 220px;} .sentMail .tableWrap .tableType_a thead tr th:nth-child(5), .sentMail .tableWrap .tableType_a thead tr th:nth-child(6){width: 120px;} .sentMail_statUs .titleBox{margin-bottom: 45px;} .sentMail_statUs .titleBox span{font-size: 26px; font-weight: 700; line-height: 30px; color: #F79E00;} .sentMail_statUs .tableWrap .tableType_a thead tr th, .sentMail_statUs .tableWrap .tableType_a tbody tr td{vertical-align: middle;} .sentMail_statUs .tableWrap .tableType_a thead tr th:nth-child(1){text-align: left; width: 155px; padding-left: 25px; box-sizing: border-box;} .sentMail_statUs .tableWrap .tableType_a thead tr th:nth-child(2){text-align: left;} .sentMail_statUs .tableWrap .tableType_a thead tr th:nth-child(3){text-align: left; width: 180px;} .sentMail_statUs .tableWrap .tableType_a thead tr th:nth-child(4){width: 120px;} .sentMail_statUs .tableWrap .tableType_a thead tr th:nth-child(5){width: 120px;} .sentMail_statUs .tableWrap .tableType_a tbody tr td:nth-child(1){padding-left: 25px; box-sizing: border-box;} .sentMail_statUs .tableWrap .tableType_a tbody tr td:nth-child(3) span{padding-left: 15px; font-size: 16px; font-weight: 400; color: #555555; position: relative;} .sentMail_statUs .tableWrap .tableType_a tbody tr td:nth-child(3) span:before{content: ''; display: block; width: 6px; height: 6px; border-radius: 100%; position: absolute; left: 0; top: 6px;} .sentMail_statUs .tableWrap .tableType_a tbody tr td:nth-child(3) .red:before{background-color: #DF5050;} .sentMail_statUs .tableWrap .tableType_a tbody tr td:nth-child(3) .yellow:before{background-color: #F79E00;} .sentMail_statUs .tableWrap .tableType_a tbody tr td:nth-child(3) .green:before{background-color: #60C259;} .sentMail_statUs .tableWrap .tableType_a tbody tr td:nth-child(3) .gray:before{background-color: #CCCCCC;} .sentMail_statUs .toolBox .left .selectBox{padding-right: 0;} .sentMail_statUs .toolBox .left .selectBox:after{display: none;} .memberList .tableWrap .tableType_a thead tr th:nth-child(2){width: 130px;} .memberList .tableWrap .tableType_a thead tr th:nth-child(3){width: 260px;} .memberList .tableWrap .tableType_a thead tr th:nth-child(4){width: 160px;} .memberList .tableWrap .tableType_a thead tr th:nth-child(5){width: 130px;} .memberList .tableWrap .tableType_a thead tr th:nth-child(6){width: 150px;} .memberList .tableWrap .tableType_a thead tr th:nth-child(7){width: 235px;} .memberList .tableWrap .tableType_a thead tr th:nth-child(8){width: 80px;} .memberList .tableWrap .tableType_a thead tr th:nth-child(9){width: 160px;} .memberList .tableWrap .tableType_a thead tr th:nth-child(10){width: 130px;} .deleted_member .tableWrap .tableType_a thead tr th:nth-child(2){width: 130px;} .deleted_member .tableWrap .tableType_a thead tr th:nth-child(3){width: 285px;} .deleted_member .tableWrap .tableType_a thead tr th:nth-child(4){width: 170px;} .deleted_member .tableWrap .tableType_a thead tr th:nth-child(5){width: 120px;} .deleted_member .tableWrap .tableType_a thead tr th:nth-child(6){width: 150px;} .deleted_member .tableWrap .tableType_a thead tr th:nth-child(7){width: 130px;} .deleted_member .tableWrap .tableType_a thead tr th:nth-child(8){width: 160px;} .deleted_member .tableWrap .tableType_a thead tr th:nth-child(9){width: 160px;} .group_memberAdd .tableWrap .tableType_a thead tr th:nth-child(2){width: 130px;} .group_memberAdd .tableWrap .tableType_a thead tr th:nth-child(3){width: 285px;} .group_memberAdd .tableWrap .tableType_a thead tr th:nth-child(4){width: 170px;} .group_memberAdd .tableWrap .tableType_a thead tr th:nth-child(5){width: 240px;} .group_memberAdd .tableWrap .tableType_a thead tr th:nth-child(6){width: 240px;} .temporary_storage .tableWrap .tableType_a thead th:not(:nth-child(1)){text-align: left;} .temporary_storage .tableWrap .tableType_a thead th:nth-child(2){width: 200px;} .setting .tableWrap .tableType_a tbody tr td:last-child .toggleSwitch{margin: 0 auto;} .employee .tableWrap .tableType_a thead th:nth-child(2), .employee .tableWrap .tableType_a thead th:nth-child(3), .employee .tableWrap .tableType_a thead th:nth-child(4){text-align: left;} .employee .tableWrap .tableType_a thead th:nth-child(2){width: 130px;} .employee .tableWrap .tableType_a thead th:nth-child(3){width: 285px;} /* .employee .tableWrap .tableType_a thead th:nth-child(4){width: 1010px;} */ .employee .tableWrap .tableType_a thead th:nth-child(5){width: 105px;} .senders .tableWrap .tableType_a thead tr th:nth-child(2), .senders .tableWrap .tableType_a thead tr th:nth-child(3){text-align: left;} .senders .tableWrap .tableType_a thead tr th:nth-child(2){width: 220px;} /* .senders .tableWrap .tableType_a thead tr th:nth-child(3){width: 1200px;} */ .senders .tableWrap .tableType_a thead tr th:nth-child(4){width: 105px;} .template .tableWrap .tableType_a thead tr th:nth-child(2), .template .tableWrap .tableType_a thead tr th:nth-child(3), .template .tableWrap .tableType_a thead tr th:nth-child(4){text-align: left;} .template .tableWrap .tableType_a thead tr th:nth-child(2){width: 150px;} .template .tableWrap .tableType_a thead tr th:nth-child(4){width: 150px;} .template .tableWrap .tableType_a thead tr th:nth-child(5){width: 110px;} /* table th 넓이 설정 Fin */ .template .tableWrap .tableType_a tbody tr td{vertical-align: middle;} .template .tableWrap .tableType_a tbody tr td:nth-child(2) .tamplate_thumb{width: 108px; height: 120px;} .template .tableWrap .tableType_a tbody tr td:nth-child(2) .tamplate_thumb img{width: 100%; object-fit: cover;} .template .tableWrap .tableType_a tbody tr td:last-child .toggleSwitch{margin: 0 auto;} .template.add .table > div:not(:last-child){margin-bottom: 35px;} .template.add .table > div > span{display: block; font-size: 15px; font-weight: 400; line-height: 24px; color: #666666; margin-bottom: 10px;} .template.add .table > div .inputBox, .template.add .table > div .fileUploadBox{width: 770px;} .template.add .table > div .inputBox input{padding: 15px 20px;} .template.add .table > div .fileUploadBox{position: relative;} .template.add .table > div .fileUploadBox input[type='file']{display: none;} .template.add .table > div .fileUploadBox label{cursor: pointer; line-height: 24px; font-size: 14px; font-weight: 400; color: #999999; display: block; border: 1px solid #EEEEEE; border-radius: 5px; padding: 15px 20px; box-sizing: border-box;} .template.add .table > div .fileUploadBox button{z-index: -1; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); background-color: transparent; border: none;} .template.add .table > div .fileUploadBox button:after{content: '파일선택'; font-size: 14px; font-weight: 400; color: #CCCCCC;} .template.add .table > div .fileUploadBox input[type='file']:valid + label + button:after{content: '파일수정';} .template.add .table > div .fileUploadBox .fileName{position: absolute; z-index: -1; left: 20px; top: 50%; transform: translateY(-50%); display: none; font-size: 14px; font-weight: 400; color: #555555;} .template.add .table > div .fileUploadBox input[type='file']:valid + label + button + .fileName{display: block;} .template.add .table > div .fileUploadBox input[type='file']:valid + label{color: transparent;} .template.add .table .tabBtnBox{margin-bottom: 20px;} .template.add .table .tabBtnBox button{font-size: 17px; font-weight: 500; color: #999999; padding: 8px 0; width: 105px; border: 1px solid rgba(153,153,153,0.2); border-radius: 5px;} .template.add .table .tabBtnBox button.active{background-color: rgba(62,23,141,0.05); color: #3E178D; border-color: rgba(62,23,141,0.2);} .template.add .table .tabBtnBox button:not(:first-child){margin-left: 10px;} .template.add .table .tabContentBox{margin-bottom: 60px;} .template.add .table .tabContentBox > div{height: 335px; border: 1px solid #EEEEEE; border-radius: 5px;} .template.add .table .tabContentBox > div.active{display: block;} .template.add .btnBox{padding-bottom: 35px; justify-content: right; display: flex;} .template.add .btnBox button{width: 100px;} .template.add .btnBox button:not(:first-child){margin-left: 10px;} .contentBox, .contentBox > div{height: 100%;} .contentBox:not(.group_memberAdd, .sentMail, .sentMail_statUs) .flexWrap{height: calc(100% - 150px);} .contentBox.group_memberAdd .flexWrap, .contentBox.sentMail_statUs .flexWrap{height: calc(100% - 200px);} .contentBox.sentMail .flexWrap, .contentBox.deleted_mail .flexWrap{height: calc(100% - 220px);} .contentBox .flexWrap{display: flex; flex-wrap: wrap; align-content: space-between;} .contentBox .flexWrap > div{width: 100%;} .contentBox.group_memberAdd .titleBox{margin-bottom: 55px;} .contentBox.group_memberAdd .titleBox > div{display: flex; align-items: center;} .contentBox.group_memberAdd .titleBox span{font-size: 26px; font-weight: 700; line-height: 30px; color: #444444;} .contentBox.group_memberAdd .titleBox .category{color: #F79E00;} .contentBox.group_memberAdd .titleBox > div > div{margin-left: 10px;} .contentBox.group_memberAdd .titleBox > div > div input{display: none;} .contentBox.group_memberAdd .titleBox > div > div span{line-height: 30px; color: #444444; padding-right: 20px; position: relative; font-size: 20px; font-weight: 600;} .contentBox.group_memberAdd .titleBox > div > div span:after{content: ''; display: block; position: absolute; background: url('/assets/images/icon_edit.png') center / contain no-repeat; width: 12px; height: 12px; right: 0; top: 50%; transform: translateY(-50%);} .contentBox.group_memberAdd .titleBox > div > div input{outline: none; font-size: 20px; font-weight: 600; color: #444444; border: none; line-height: 30px; padding: 0;} .contentBox.group_memberAdd .titleBox > div > div.active span{display: none;} .contentBox.group_memberAdd .titleBox > div > div.active input{display: block;} .contentBox.group_memberAdd .tabBtnBox{display: none;} .contentBox.group_memberAdd .toolBox .left .txtBox > div{display: flex;} .contentBox.group_memberAdd .toolBox .left .txtBox > div > div:not(.btnBox){position: relative; display: flex; align-items: center; border-radius: 5px; overflow: hidden;} .contentBox.group_memberAdd .toolBox .left .txtBox > div > div:not(.btnBox):after{transition: left 0.2s ease-out; content: ''; display: block; width: 50%; height: 100%; border-radius: 5px; position: absolute; top: 0; background-color: #6214FF;} .contentBox.group_memberAdd .toolBox .left .txtBox > div > div.active_1:after{left: 0;} .contentBox.group_memberAdd .toolBox .left .txtBox > div > div.active_2:after{left: 50%;} .contentBox.group_memberAdd .toolBox .left .txtBox > div > div > div{width: 100px; background-color: #F6F6F6;} .contentBox.group_memberAdd .toolBox .left .txtBox label{cursor: pointer; text-align: center; display: block; position: relative; z-index: 9; line-height: 40px; font-size: 15px; font-weight: 400; color: #999999;} .contentBox.group_memberAdd .toolBox .left .txtBox input[type='radio']{display: none;} .contentBox.group_memberAdd .toolBox .left .txtBox > div > div.active_1 > div:nth-child(1) label, .contentBox.group_memberAdd .toolBox .left .txtBox > div > div.active_2 > div:nth-child(2) label{color: #fff;} .contentBox.group_memberAdd .toolBox .left .txtBox > div .btnBox{margin-left: 50px; position: relative;} .contentBox.group_memberAdd .toolBox .left .txtBox > div .btnBox:before{content: ''; display: block; width: 1px; height: 15px; background-color: #DDDDDD; position: absolute; left: -25px; top: 50%; transform: translateY(-50%);} .contentBox.group_memberAdd .toolBox .left .txtBox > div .btnBox button{padding: 0 18px 0 42px; position: relative;} .contentBox.group_memberAdd .toolBox .left .txtBox > div .btnBox button:before{content: ''; display: block; position: absolute; left: 18px; top: 50%; transform: translateY(-50%); background-repeat: no-repeat; background-size: contain; background-position: center;} .contentBox.group_memberAdd .toolBox .left .txtBox > div .btnBox button span{line-height: 38px;} .contentBox.group_memberAdd .toolBox .left .txtBox > div .btnBox .remove:before{background-image: url('/assets/images/user-delete.png'); width: 16px; height: 14px;} .contentBox.group_memberAdd .toolBox .left .txtBox > div .btnBox .add:before{background-image: url('/assets/images/memberAddBtn.png'); width: 16px; height: 14px;} .contentBox.group_memberAdd .toolBox .left .txtBox > div .btnBox button:hover{background-color: #F79E00;} .contentBox.group_memberAdd .toolBox .left .txtBox > div .btnBox button:hover span{color: #fff;} .contentBox.group_memberAdd .toolBox .left .txtBox > div .btnBox .remove:hover:before{background-image: url('/assets/images/user-delete_active.png');} .contentBox.group_memberAdd .toolBox .left .txtBox > div .btnBox .add:hover:before{background-image: url('/assets/images/memberAddBtn_white.png');} .contentBox.group_memberAdd .toolBox .left .txtBox > div > div.active_1 + .btnBox .add, .contentBox.group_memberAdd .toolBox .left .txtBox > div > div.active_2 + .btnBox .remove{display: none;} .contentBox.group_memberAdd .toolBox .right .selectBox{background-color: #F9F9F9; border-radius: 5px; width: 120px; margin-right: 10px;} .group_memberAdd .toolBox .left .txtBox span{font-size: 15px; font-weight: 400; line-height: 25px; color: #999999;} .group_memberAdd .toolBox .left .txtBox .count{color: #444444; font-weight: 500;} .group_memberAdd .tableWrap .tableType_a thead tr th:last-child{text-align: left;} .group_memberAdd .tableWrap .tableType_a tbody tr td{vertical-align: middle;} .group_memberAdd .tableWrap .tableType_a tbody tr td:last-child .toggleSwitch{margin: 0 auto;} .tableWrap .tableType_b{width: 100%;} .tableWrap .tableType_b tbody tr th{width: 120px; text-align: left; font-size: 16px; font-weight: 600; line-height: 25px; color: #444444;} .tableWrap .tableType_b .flexBox{display: flex; align-items: center;} .tableWrap .tableType_b .radioList .radioBox:not(:first-child){margin-left: 30px;} .tableWrap .tableType_b .radioBox label{cursor: pointer; padding-left: 18px; font-size: 15px; font-weight: 400; opacity: 0.5; color: #666666;} .tableWrap .tableType_b .radioBox label:before{width: 10px; height: 10px;} .tableWrap .tableType_b .radioBox input[type='radio']:checked + label{opacity: 1;} .tableWrap .tableType_b .table_inputBox input[type='text']{outline: none; padding: 10px 0; width: 100%; border: none; border-bottom: 1px solid #EEEEEE;} .tableWrap .tableType_b .table_inputBox input[type='text']::placeholder{font-size: 15px; font-weight: 500; line-height: 25px; color: #999999;} .tableWrap .tableType_b tbody tr th .flexBox .checkBox{margin-left: 15px;} .tableWrap .tableType_b tbody tr th .checkBox label{font-size: 12px; font-weight: 400; line-height: 18px;} .tableWrap .tableType_b tbody tr th .checkBox label span{color: #C82222;} .tableWrap .tableType_b tbody tr.template th{vertical-align: top;} .tableWrap .tableType_b tbody td{padding-bottom: 35px;} .tableWrap .tableType_b tbody tr.template td .flexBox > div:not(:first-child){margin-left: 20px;} .tableWrap .tableType_b tbody tr.template td .flexBox .thumbBox{border: 1px solid #EEEEEE; box-sizing: border-box; border-radius: 5px; margin-bottom: 10px; height: 190px;position: relative} .tableWrap .tableType_b tbody tr.template td .flexBox .thumbBox > .preview {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0,0,0,0.5);background-image: url(/assets/images/icons-glass.png);background-repeat: no-repeat;background-position: center center;text-indent:-9999px;overflow: hidden;display: none} .tableWrap .tableType_b tbody tr.template td .flexBox .thumbBox:hover > .preview {display: block} .tableWrap .tableType_b tbody tr.template td .flexBox .thumbBox img{height: 100%; object-fit: cover; width: 100%; display: block;} .tableWrap .tableType_b tbody tr.template td .flexBox .radioBox{text-align: center;} .tableWrap .tableType_b tbody tr.template td .flexBox .radioBox label{cursor: pointer; opacity: 1; font-size: 12px; font-weight: 400; line-height: 14px; color: #666666;} .tableWrap .tableType_b tbody tr.summerNote td div{width: 100%; height: 320px; border: 1px solid #EEEEEE; border-radius: 5px;} .tableWrap .tableType_b .member_selection{padding-right: 100px; box-sizing: border-box; margin-top: 20px; display: none; flex-wrap: wrap;} .tableWrap .tableType_b .member_selection.active{display: flex;} .tableWrap .tableType_b .member_selection li{margin-bottom: 8px; background-color: #F9F9F9; border-radius: 5px; border: 1px solid #EEEEEE; width: 19%; position: relative; padding: 3px 35px 3px 10px; box-sizing: border-box;} .tableWrap .tableType_b .member_selection li:not(:nth-child(5n)){margin-right: 1.25%;} .tableWrap .tableType_b .member_selection li span{font-size: 13px; font-weight: 400; line-height: 24px; color: #666666;} .tableWrap .tableType_b .member_selection li button{position: absolute; right: 5px; top: 50%; transform: translateY(-50%); border: none; background-color: transparent;} .tableWrap .tableType_b .member_selection li button i{font-size: 10px; color: #999999;} .tableWrap .tableType_b .selectBox select{border-color: #EEEEEE; padding: 15px 20px;} .tableWrap .tableType_b .company{padding-bottom: 25px;} .tableWrap .tableType_b .company .radioBox > div{height: 50px; display: flex; align-items: center;} .tableWrap .tableType_b .company .selectBox{width: 470px; margin-top: 0; margin-left: 20px;} .tableWrap .tableType_b .company .selectBox.active{display: block;} .tableWrap .tableType_b .selectBox.group{display: none; margin-top: 20px;} .tableWrap .tableType_b .selectBox.group.active{display: flex;} .tableWrap .tableType_b .selectBox.group select{width: 670px;} .tableWrap .tableType_b .selectBox.group .selectWrap{position: relative; width: 670px;} .tableWrap .tableType_b .selectBox.group .selectWrap > button{position: relative; text-align: left; padding: 0 20px; box-sizing: border-box; height: 50px; background-color: #fff; color: #999999; font-size: 14px; font-weight: 400; width: 100%; border: 1px solid #DDDDDD; border-radius: 5px;} .tableWrap .tableType_b .selectBox.group .selectWrap > button:after{content: ''; display: block; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); background: url('/assets/images/select_arrow.png') center / contain no-repeat; width: 10px; height: 6px;} .tableWrap .tableType_b .selectBox.group .selectWrap > div{display: none; position: absolute; top: 55px; left: 0; z-index: 1; background-color: #fff; width: 100%; border: 1px solid #CCCCCC; border-radius: 5px; box-sizing: border-box;} .tableWrap .tableType_b .selectBox.group .selectWrap > div.active{display: flex;} .tableWrap .tableType_b .selectBox.group .selectWrap > div > ul{height: 205px; overflow-y: auto;} .tableWrap .tableType_b .selectBox.group .selectWrap > div > ul:nth-child(1){width: 250px; padding: 15px; box-sizing: border-box;} .tableWrap .tableType_b .selectBox.group .selectWrap > div > ul:nth-child(1) li{cursor: pointer; position: relative; padding: 10px 15px; box-sizing: border-box; border-radius: 5px;} .tableWrap .tableType_b .selectBox.group .selectWrap > div > ul:nth-child(1) li:not(:last-child){margin-bottom: 10px;} .tableWrap .tableType_b .selectBox.group .selectWrap > div > ul:nth-child(1) li.active{background-color: #F9F9F9;} .tableWrap .tableType_b .selectBox.group .selectWrap > div > ul:nth-child(1) li > span{font-size: 14px; font-weight: 400; color: #888888;} .tableWrap .tableType_b .selectBox.group .selectWrap > div > ul:nth-child(1) li > div{position: absolute; right: 15px; top: 50%; transform: translateY(-50%);} .tableWrap .tableType_b .selectBox.group .selectWrap > div > ul:nth-child(1) li > div span{font-size: 12px; font-size: 400; color: #CCCCCC;} .tableWrap .tableType_b .selectBox.group .selectWrap > div > ul:nth-child(1) li > div button{background-color: transparent; border: none; color: #CCCCCC;} .tableWrap .tableType_b .selectBox.group .selectWrap > div > ul:nth-child(2){display: flex; flex-wrap: wrap; align-content: flex-start; padding: 17px 25px; box-sizing: border-box; border-left: 1px solid #EEEEEE; box-sizing: border-box; width: calc(100% - 250px);} .tableWrap .tableType_b .selectBox.group .selectWrap > div > ul:nth-child(2) li{margin: 9px 0; width: 50%;} .tableWrap .tableType_b .selectBox.group .selectWrap > div > ul:nth-child(2) li .checkBox label:before{background-image: url('/assets/images/checkbox_purple.png');} .tableWrap .tableType_b .selectBox.group .selectWrap > div > ul:nth-child(2) li .checkBox input[type='checkbox']:checked + label:before{background-image: url('/assets/images/checkBox_checked.png');} .tableWrap .tableType_b .selectBox.group .radioWrap{display: flex; align-items: center; margin-left: 35px;} .tableWrap .tableType_b .selectBox.group > div > .radioBox:not(:first-child){margin-left: 30px;} .tableWrap .tableType_b tbody tr.button .flexBox{align-items: center;} .tableWrap .tableType_b tbody tr.button .use_button{display: none; width: calc(100% - 210px); margin-left: 15px;} .tableWrap .tableType_b tbody tr.button .use_button.active{display: flex;} .tableWrap .tableType_b tbody tr.button .use_button .inputBox:nth-of-type(1){width: 200px;} .tableWrap .tableType_b tbody tr.button .use_button .inputBox:nth-of-type(2){padding-left: 10px; box-sizing: border-box; width: calc(100% - 200px);} .tableWrap .tableType_b tbody tr.button .use_button .inputBox input{border-color: #EEEEEE; padding: 15px 20px;} .tableWrap table tbody .attachments{display: flex; align-items: center;} .tableWrap table tbody .attachments input[type='file']{display: none;} .tableWrap table tbody .attachments label{display: block; cursor: pointer; font-size: 12px; font-weight: 400; color: #666666; padding: 8px 13px; border: 1px solid #DDDDDD; background-color: #F6F6F6; border-radius: 5px;} .tableWrap table tbody .attachments > span, .tableWrap table tbody .attachments > div > span{font-size: 12px; line-height: 16px; color: #666666; margin-left: 15px;} .tableWrap table tbody .attachments > div button{border: none; background-color: transparent;} .tableWrap table tbody .attachments > div button i{color: #F0800E; font-size: 10px;} .contentBox.writingMail{position: relative;} .contentBox.writingMail .btnBox{padding: 30px 0 35px 0; display: flex; justify-content: right;} .contentBox.writingMail .btnBox button{width: 340px; border-radius: 5px; font-size: 15px; font-weight: 600;} .contentBox.writingMail .btnBox button:not(:first-child){margin-left: 15px;} .contentBox.writingMail .sentCompleted{z-index: 9; display: none; position: fixed; left: 0; top: 0; width: 100%; background-color: #fff;} .contentBox.writingMail .sentCompleted.active{display: block;} .contentBox.writingMail .sentCompleted > div{width: 340px; position: fixed; left: 50%; top: 50%; transform: translateY(-50%);} .contentBox.writingMail .sentCompleted > div p{margin-bottom: 45px; font-size: 17px; font-weight: 500; line-height: 25px; color: #555555; text-align: center; padding-top: 130px; position: relative;} .contentBox.writingMail .sentCompleted > div p:before{content: ''; display: block; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 101px; height: 95px; background: url('/assets/images/sentCompleted.png') center / contain no-repeat;} .contentBox.writingMail .sentCompleted > div > div > button:not(:last-child){margin-bottom: 10px;} .contentBox.writingMail .sentCompleted .purpleBorderBtn:hover{background-color: #3E178D; border-color: #3E178D; color: #fff;} .contentBox.writingMail .reservedCompleted{display: none; position: fixed; left: 0; top: 0; width: 100%; background-color: #fff;} .contentBox.writingMail .reservedCompleted.active{display: block;} .contentBox.writingMail .reservedCompleted > div{width: 340px; position: fixed; left: 50%; top: 50%; transform: translateY(-50%);} .contentBox.writingMail .reservedCompleted > div p{margin-bottom: 45px; font-size: 17px; font-weight: 500; line-height: 25px; color: #555555; text-align: center; padding-top: 130px; position: relative;} .contentBox.writingMail .reservedCompleted > div p:before{content: ''; display: block; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 954px; height: 95px; background: url('/assets/images/reservedCompleted.png') center / contain no-repeat;} .contentBox.writingMail .reservedCompleted > div > span{background-color: #F9F9F9; border-radius: 10px; font-size: 15px; font-weight: 500; color: #666666; padding: 14px 0; width: 310px; text-align: center; display: block; margin: 0 auto 45px;} .contentBox.writingMail .reservedCompleted > div > div > button:not(:last-child){margin-bottom: 10px;} .contentBox.writingMail .reservedCompleted .purpleBorderBtn:hover{background-color: #3E178D; border-color: #3E178D; color: #fff;} .memberList .tableWrap .tableType_a thead tr th:not(:first-child, :last-child){text-align: left;} .memberList .tableWrap .tableType_a tbody tr td{vertical-align: middle;} .memberList .tableWrap .tableType_a tbody tr td .toggleSwitch{margin: 0 auto;} .sentMail .tableWrap .tableType_a tbody tr td{vertical-align: middle;} .sentMail .reservationBox{display: flex;} .sentMail .reservationBox .purple{margin-right: 10px; color: #6214FF; font-size: 16px; font-weight: 400;} .sentMail .reservationBox > div{margin-left: 25px; display: flex;} .sentMail .btnBox, .tableWrap .tableType_a tbody tr td .clickMail, .tableWrap .tableType_a tbody tr td .openMail{padding-right: 15px; box-sizing: border-box;} .sentMail .btnBox{float: right;} .sentMail .btnBox button{padding: 0; border: none; background-color: transparent; font-size: 14px; font-weight: 400; color: #999999;} .sentMail .btnBox button:not(:first-child){margin-left: 5px;} .sentMail .btnBox button:hover{color: #666666; text-decoration: underline;} .sentMail .openMail, .sentMail .clickMail, .sentMail_statUs .openMail, .sentMail_statUs .clickMail{position: relative;} .sentMail .openMail, .sentMail_statUs .openMail{padding-left: 20px;} .sentMail .clickMail, .sentMail_statUs .clickMail{padding-left: 23px;} .sentMail .openMail:before, .sentMail .clickMail:before, .sentMail_statUs .openMail:before, .sentMail_statUs .clickMail:before{content: ''; display: block; position: absolute; left: 0; top: 5px; background-repeat: no-repeat; background-size: contain; background-position: center;} .sentMail .openMail:before, .sentMail_statUs .openMail:before{background-image: url('/assets/images/open-email.png'); width: 16px; height: 16px;} .sentMail .clickMail:before, .sentMail_statUs .clickMail:before{background-image: url('/assets/images/sketch.png'); width: 18px; height: 16px;} .tableWrap .tableType_a tbody tr td .openMail span, .tableWrap .tableType_a tbody tr td .clickMail span{margin: 0; padding: 0; font-size: 13px; font-weight: 400; color: #444444;} .tableWrap .tableType_c{width: 100%;} .tableWrap .tableType_c tbody tr th{font-size: 16px; font-weight: 600; color: #444444; text-align: left; width: 120px;} .tableWrap .tableType_c tbody tr:not(:last-child, :nth-child(7)) td{padding-bottom: 35px;} .tableWrap .tableType_c tbody tr:nth-child(7) td{padding-bottom: 30px;} .tableWrap .tableType_c tbody tr:last-child td{padding-bottom: 50px;} .tableWrap .tableType_c tbody tr td input[type='text']{font-size: 15px; font-weight: 500; color: #555555; outline: none; width: 100%; border: none; border-bottom: 1px solid #EEEEEE; padding-bottom: 10px;} .tableWrap .tableType_c tbody tr td input[type='text']::placeholder{font-size: 15px; font-weight: 500; color: #999999;} .tableWrap .tableType_c tbody tr td .lang > div:not(:last-child){margin-bottom: 20px;} .contentBox.company .btnBox{padding-bottom: 35px; display: flex; justify-content: right;} .contentBox.company .btnBox button{width: 100px;} .contentBox.company .btnBox button:not(:first-child){margin-left: 10px;}