/*modal 공통사항*/
.modal{position:fixed; top:0; bottom:0; left:0; right:0; z-index: 99999999; display:none;}
.modal-bg{position:absolute; top:0; bottom: 0; left:0; right:0; background:rgba(0,0,0,0.4); z-index: 999999;}
.modal-wrap{width: 800px; background: #fff; position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); z-index: 9999999; border-radius: 10px; overflow: hidden;}
.modal-wrap:before{content: ''; display:block; width: 100%; height:5px; position:absolute; top:0;left:0;}
.modal-wrap.blue:before{background:#276cad;}
.modal-wrap.yellow:before{background: #f5b415;}

.modal-text-box{text-align: center; padding:60px; border-bottom:1px solid #d7d7d7;}
.modal-text-box .title{font-size: 25px; color:#333; font-weight: 600; line-height: 1.3; margin-bottom:20px; letter-spacing: -0.2px;}
.modal-text-box .text{color:#888; line-height: 1.3;}


.modal-text-box2{text-align: left; padding:60px 60px 30px; border-bottom:1px solid #d7d7d7;}
.modal-text-box2 .title-wrap{display:flex; align-items: center; justify-content: space-between; width:100%;padding-bottom: 10px;}
.yellow .modal-text-box2 .title-wrap{border-bottom: 2px solid #f5b415;}
.blue .modal-text-box2 .title-wrap{border-bottom: 2px solid #276cad;}
.modal-text-box2 .title-wrap .title{font-size: 25px; color:#333; font-weight: 600; line-height: 1.3;}
.modal-text-box2 .title-wrap .close{cursor: pointer; padding-left: 10px;font-size: 0;}
.modal-text-box2 .title-wrap .close i{color:#aaa; font-size: 35px;}

.modal-table-wrap {border-top:1px solid #d7d7d7; border-bottom: 1px solid #d7d7d7; width: 100%;}
.modal-table-wrap.yellow {border-top:2px solid #f2b14a;}
.modal-table-wrap.blue {border-top:2px solid #276cad;}
.modal-table-wrap table{width: 100%;}

.modal-table-wrap .table1 tr{border-bottom:1px solid #d7d7d7;}
.modal-table-wrap .table1 tr:last-child{border-bottom:none;}
.modal-table-wrap .table1 th,.modal-table-wrap .table1 td{height: 50px; display:table-cell; vertical-align: middle; padding:10px 20px;}
.modal-table-wrap .table1 th{width:20%; background: #fdf7e7; color:#333; font-weight: 500; text-align: center;}
.modal-table-wrap .table1 td{width:80%; line-height: 1.5;}
.modal-table-wrap .sel-table th, .modal-table-wrap .sel-table td{padding: 5px 20px;}

.modal-table-wrap .table2 thead tr th{background: #fdf7e7; text-align: center; color:#333; font-weight: 500; height: 40px; display:table-cell; vertical-align: middle; padding:10px; border-bottom: 1px solid #d7d7d7;}
.modal-table-wrap .table2 tbody tr td{line-height: 1.5; text-align: center; height:40px; display:table-cell; vertical-align: middle; padding:10px; border-bottom:1px solid #d7d7d7;}
.modal-table-wrap .table2 tbody tr:last-child td{border-bottom: 0;}


.modal-table-mt30{margin-top: 30px;}
.modal-bt-none{border-top: none;}

.modal-btn{display:flex; justify-content: space-between; align-items: center; padding:30px;}
.modal2 .modal-btn{padding:30px 60px;}
.modal-btn a{display:flex;align-items: center; justify-content: center; height:50px; border-radius: 5px; font-weight: 500;}
 
.blue-line-btn{border:1px solid #276cad; color:#276cad;}
.blue-btn{background:#276cad; color:#fff;}
.black-line-btn{border:1px solid #333; color:#333;}
.black-btn{background:#333; color:#fff;}
.gray-btn{background:#f5f5f5; color:#aaa; border:1px solid #d7d7d7; border-radius: 5px;}
.yellow-btn{background:#f5b415; color:#fff;}
.kakao-btn{background:#fbef36; color:#381e1f; font-weight: 500;}
.kakao-btn:before{content:'\f075'; display:inline-block; margin-right:5px; color:#381e1f; font-size: 16px; font-weight: 900; font-family: "Font Awesome 6 Pro";}
.red-btn{background:#dd3413; color:#fff;}

.modal-btn1 a{width:100%;}
.modal-btn2 a{width:calc(50% - 5px);}
.modal-btn3 a{width: 33.33%;}
.modal-btn3 a:nth-child(2){margin-right:10px; margin-left: 10px;}




/*로그인 페이지 login*/
.loginWrap{width: 800px; margin:120px auto; padding:80px; border:1px solid #d7d7d7;}
.loginWrap .login-inner{border-bottom: 1px solid #d7d7d7; width:100%; padding-bottom: 20px; text-align: center;}
.loginWrap .login-inner h4{color:#333; font-size: 35px; font-weight: 500; margin-bottom:50px;}

.login-box{width:100%; margin-top:20px;}
.login-box input{width:100%; height:40px; border:0; border-bottom:1px solid #d7d7d7; border-radius: 0;}

.login-checkBox{display:flex; justify-content: space-between; align-items: center; margin-top: 30px;}
.login-checkBox .checkBox{display:flex; justify-content: flex-start; align-items: center;}
.login-checkBox .checkBox label{font-size: 14px; cursor: pointer; display:flex; align-items: center; margin-right:20px;}
.login-checkBox .checkBox input[type="checkbox"]{margin-right:5px;}

.login-list{display:flex; justify-content: flex-end; align-items: center;}
.login-list li a{display:inline-block; font-size: 14px; color:#888; padding:0 10px; position:relative;}
.login-list li a:after{content:''; display:inline-block;width: 1px;height:10px; background:#d7d7d7; position:absolute;top:50%; right:0; transform: translate(0,-50%);}
.login-list li:last-child a:after{display:none;}
.login-list li:last-child a{padding-right:0;}

.loginWrap .login-btn{margin-top:60px;}


.snsWrap ul{display:flex; align-items: center; justify-content: center; margin-top: 40px;}
.snsWrap ul li{padding:0 15px;}
.snsWrap ul li a{display:inline-block; font-size: 0; width: 60px;height: 60px; background-size: 100%;}
.snsWrap ul li:nth-child(1) a{background-image:url(../images/sns_kakao.png);}
.snsWrap ul li:nth-child(2) a{background-image:url(../images/sns_naver.png);}
.snsWrap ul li:nth-child(3) a{background-image:url(../images/sns_facebook.png);}
.snsWrap ul li:nth-child(4) a{background-image:url(../images/sns_google.png);}



/*회원가입 페이지 join*/
.login-box {position:relative;}
.login-box .id-chk{position:absolute; top:50%; right:10px; transform:translate(0, -50%); display:inline-block; font-size: 0; width: 24px;height: 24px; border-radius: 50%;}
.login-box .id-none{background:#dd3413;}
.login-box .id-okey{background:#276cad;}
.login-box .id-chk:before{display:block; position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); font-size:14px; color:#fff; font-weight: 900; font-family: "Font Awesome 6 Pro";}
.login-box .id-none:before{content:'\f00d';}
.login-box .id-okey:before{content:'\f00c';}

.chk-password{border:1px solid #d7d7d7; border-radius: 5px; padding:20px 30px; text-align: left; line-height: 2.2; margin-top: 5px;}
.chk-password li{font-size: 14px; display:flex; align-items: center;}
.chk-password li:before{display:flex; align-items: center; justify-content: center;width: 18px;height: 18px; border-radius: 50%; margin-right:5px; font-size: 10px; color:#fff; font-weight: 900; font-family: "Font Awesome 6 Pro";}
.chk-password li.chk-none{color:#dd3413;}
.chk-password li.chk-none:before{content:'\f00d'; background: #dd3413;}
.chk-password li.chk-okey{color:#276cad;}
.chk-password li.chk-okey:before{content:'\f00c';  background: #276cad;}

.join-btn{margin-top:60px;}
.snsWrap p.text{text-align: center; font-size:14px; color:#888; margin-top:20px; line-height: 1.5;}

/*아이디 찾기 페이지 find_id*/
.preventionTxt{width: 100%; display:flex; align-items: center; justify-content: space-between; margin-top: 20px; border:1px solid #d7d7d7; height:80px;}
.preventionTxt .pret-num{width: 75%; box-sizing: border-box; display:flex; align-items: center; justify-content: center;}
.preventionTxt .pret-btn{width: 25%;}
.preventionTxt .pret-btn li button{width: 100%; border-left:1px solid #d7d7d7; background: #f5f5f5; font-size: 14px; color:#888; height: 39px; display:flex; align-items: center; justify-content: center;}
.preventionTxt .pret-btn li:first-child button{border-bottom: 1px solid #d7d7d7;}

.preventionTxt .pret-btn li button:before{display:inline-block; margin-right:5px; font-size: 14px; color:#888; font-weight: 900; font-family: "Font Awesome 6 Pro"; vertical-align: middle; margin-bottom: -2px;}
.preventionTxt .pret-btn li:first-child button:before{content:'\f2f9';}
.preventionTxt .pret-btn li:last-child button:before{content:'\f130';}
.find-id-list{display:flex; justify-content: center; align-items: center; margin-top: 20px;}
.find-id-list li a{padding:0 10px; font-size: 14px; position:relative;}
.find-id-list li a:after{content:'';display:inline-block; width: 1px; height: 10px; background:#d7d7d7; position:absolute; top:50%; right:0; transform: translateY(-50%);}
.find-id-list li:last-child a:after{display:none;}
.find-id-list li a:after{vertical-align: middle; margin-bottom:-1px;}

/*비밀번호 페이지 find_password*/
.find-password-wrap .login-inner{border-bottom: 0;}

/*서브 헤더 sub_header*/
.m-sub-header{display:none;}
.pc-sub-header{display:flex; justify-content: space-between; align-items: flex-end; margin:80px auto 0!important; padding-bottom:15px; border-bottom:1px solid #d7d7d7;}
.pc-sub-header h2{font-size: 40px;font-weight: 600; color:#333;}
.sub-history{display:flex; justify-content: flex-end; align-items: center;}
.sub-history li:before{content:'\f105'; display:inline-block; font-family: "Font Awesome 6 Pro"; font-weight: 900; color:#d7d7d7; font-size: 12px; vertical-align: middle; margin-top:-4px;}
.sub-history li:first-child:before{display: none;}
.sub-history li a{font-size: 14px; padding:0 10px; color:#888;}
.sub-history li:last-child a{color:#333; padding-right:0}

/*회원정보수정 페이지 myInfo*/
.subAuto{width:1400px; margin: 30px auto 120px; min-height: 600px;}
.myInfo-list{display:flex; justify-content: flex-start; align-items: flex-start; margin-top:30px;}
.myInfo-list .title{font-weight: 500; color:#333; display:flex; justify-content: flex-start; align-items: center; width:15%;  height:50px;}
.myInfo-list .title:before{content:''; display:inline-block; width:3px; height:3px; border-radius: 50%; background:#276cad; margin-right:5px;}
.myInfo-list .text{width:85%; display:flex; align-items: center; justify-content: flex-start; flex-wrap: wrap;}
.myInfo-list .text img{width:240px; height: 240px; border-radius: 5px;}
.myInfo-list .pfImge-btn{margin-left:30px;}
.myInfo-list .pfImge-btn li{margin-bottom:10px;}
.myInfo-list .pfImge-btn li:last-child{margin-bottom:0px;}
.myInfo-list .pfImge-btn .myInfo-img-btn{width: 240px;}
.myInfo-list .text input.w1-input{width:70%;}
.myInfo-list .text input.w2-input{width:70%;}
.myInfo-list .explain{width:100%; margin-top:10px;}
.myInfo-list .explain label{font-size: 14px; display:flex; align-items: center; color:#888; cursor: pointer;}
.myInfo-list .explain label input{margin-right:5px;}
.myInfo-list .adress{display:flex; align-items: center; width:100%; justify-content: flex-start; margin-bottom:10px;}
.myInfo-list .adress a{margin-left:10px;}
.comm-btn{width:160px;}
.myInfo-list .birth-text{position:relative;}
.myInfo-list .birth-text input{background:transparent; font-family: "roboto"}
.myInfo-list .birth-text:after{content:'\f133'; display:flex; align-items: center; justify-content: center; width:50px; height:50px; background:#f5f5f5; position:absolute; top:0; left:calc(70% - 50px); border-radius: 0 5px 5px 0;  font-size: 22px; color:#aaa; font-weight: 500; font-family: "Font Awesome 6 Pro"; z-index: -1;}

.baptismal-text{flex-wrap:wrap; margin-bottom: -10px;}
.baptismal-text input{margin-bottom: 10px;}
.baptismal-text > a{margin-bottom: 10px;}

.myInfo-dete{top:515px;}/*회원정보수정 달력*/

.myInfo-list .gender-wrap label{display:flex; align-items: center; justify-content: flex-start; cursor: pointer;}
.myInfo-list .gender-wrap label:first-child{margin-right:30px;}
.myInfo-list .gender-wrap label input{margin-right:5px;}


.privacyText{margin-top:80px;}
.privacyText .privacy-text{width: 100%; border:1px solid #d7d7d7; background:#f5f5f5; padding:50px; height:300px; overflow-y:auto; cursor: pointer;}
.privacyText .privacy-text p{line-height: 1.6; margin-bottom: 20px; color:#666; font-size: 15px;}
.privacyText .privacy-text p:last-child{margin-bottom: 0;}
.privacyText .privacy-text span{display:inline-block; margin-bottom: 3px;}
.privacyText .privacy-chk{display:flex; align-items: center; justify-content: center; margin-top: 30px; }
.privacyText .privacy-chk input{margin-right:5px; cursor: pointer;}
.privacyText .privacy-chk p.text{font-size: 15px; margin-top: -3px; cursor: pointer;}

.myInfo-input-w360px{width: 360px;}
.myInfo-input-w360px{width: 360px;}

/*세례명 검색 모달 baptismalModal*/
.baptismal-modal{display:none;}
.baptismal-modal .modal-text-box{padding-bottom: 30px;}
.baptismal-modal .search-wrap{display:flex; justify-content: space-between; align-items: center;}
.baptismal-modal .search-text-wrap{display:flex; justify-content: flex-start; align-items: center; width: calc(100% - 170px);}
.baptismal-modal .date-wrap{display:none;}
.baptismal-modal .name-wrap input{width: calc(100% - 130px);}
.baptismal-modal .search-text-wrap a{width: 120px;}

.baptismal-modal .date-wrap .selectBox{width: calc(50% - 70px);}
.baptismal-modal .has-search{margin-top: 20px;}
.baptismal-modal .has-search .result-text{display:flex; justify-content: space-between; align-items: center;}
.baptismal-modal .has-search .result-text .used-text{font-size: 14px; color:#888;}
.baptismal-modal .has-search .result-text .used-text i{font-size: 14px; color:#f5b415;}
.baptismal-modal .has-search p.result {display:flex; justify-content: flex-start; align-items: center; font-size: 14px; color:#888;}
.baptismal-modal .has-search p.result span.num{color:#276cad; font-weight: 500; font-size: 14px;}
.baptismal-modal .has-search p.result span.num:before{content:':'; display:inline-block; display: inline-block; margin:0 5px; color:#888; font-weight: 400; margin-top: -5px; vertical-align: middle;}
.baptismal-modal .has-search .search-list{margin-top: 10px; border-top: 1px solid #d7d7d7; max-height: 325px; overflow-y:auto; border-bottom:1px solid #d7d7d7; }
.baptismal-modal .has-search .search-list > li label{display:flex; justify-content: flex-start; align-items: center; border-bottom: 1px solid #d7d7d7; cursor: pointer; padding:15px 20px;}
.baptismal-modal .has-search .search-list > li:hover label{background:#f0f5f9;}
.baptismal-modal .has-search .search-list > li:last-child label{border-bottom: 0;}
.baptismal-modal .has-search .search-list > li label input{margin-right: 10px;}
.baptismal-modal .has-search .search-list > li .search-text{width: calc(100% - 26px); text-align: left;}
.baptismal-modal .has-search .search-list > li .search-text p.title{font-size: 17px; margin-bottom: 2px; font-weight: 500;}
.baptismal-modal .has-search .search-list > li .search-text ul.info{display:flex; justify-content: flex-start; align-items: center;}
.baptismal-modal .has-search .search-list > li:hover .search-text p.title{color:#276cad;}
.baptismal-modal .has-search .search-list > li .search-text ul.info li{font-size: 14px; color:#888; line-height: 1.3; display:flex; justify-content: flex-start; align-items: center;}
.baptismal-modal .has-search .search-list > li .search-text ul.info li:after{content:''; display:inline-block; width: 1px; height: 10px; background: #d7d7d7; margin:0 10px; margin-bottom: -3px;}
.baptismal-modal .has-search .search-list > li .search-text ul.info li:last-child:after{display:none;}


.baptismal-modal .has-search .search-list > li.many-used label {position:relative;}
.baptismal-modal .has-search .search-list > li.many-used label .search-text{padding-right: 40px;}
.baptismal-modal .has-search .search-list > li.many-used label span.icon{position:absolute; top:50%; right:20px; transform: translateY(-50%);}
.baptismal-modal .has-search .search-list > li.many-used label span.icon i{font-size: 20px; color:#f5b415;}

.baptismal-modal .none-search{margin:60px 0 30px;}
.baptismal-modal .none-search p.result{font-size: 14px; color:#888;}


/*나의모임정보 groupInfo*/
.tab-wrap{width: 100%; padding: 60px; background: #f5f5f5;}
.tab-wrap .groupList-wrap{display:flex; flex-wrap:wrap; align-items: center; justify-content: space-between; margin-bottom: -10px;}
.tab-wrap .m-groupList-wrap{display:none;}
.tab-wrap .groupList-wrap li{width:33.33%; padding-right:10px; position:relative; margin-bottom: 10px;}
.tab-wrap .groupList-wrap li:nth-child(3n){padding-right:0;}
.tab-wrap .groupList-wrap li > a{display:flex; align-items: center; justify-content: space-between; border:1px solid #d7d7d7; border-radius: 5px; height:65px; width: 100%; padding-right:65px; padding-left: 20px; background: #fff; box-shadow: 3px 3px 5px 0 rgb(0 0 0 / 5%);}
.tab-wrap .groupList-wrap .groupAdd > a{padding-right: 0px;}
.tab-wrap .groupList-wrap .groupName{display:flex; align-items: center; justify-content: flex-start; width: 100%;}
.tab-wrap .groupList-wrap .groupAdd .groupName{justify-content: space-between;}
.tab-wrap .groupList-wrap .groupName p.title{font-size:18px; line-height: 1.1; font-weight: 500; color:#333; margin-right: 5px; max-width:70%; text-overflow: ellipsis; overflow: hidden;white-space: nowrap;}
.tab-wrap .groupList-wrap .groupName p.info{font-size:14px; color:#888; max-width:calc(30% - 5px); text-overflow: ellipsis; overflow: hidden;white-space: nowrap;}
.tab-wrap .groupList-wrap .bookmark{font-size:0; width: 65px;height: 100%; position:absolute; top:0; right:10px;}
.tab-wrap .groupList-wrap .bookmark:after{content:'\f005'; display: block; font-size: 28px; font-weight: 900; color:#d7d7d7; font-family: "Font Awesome 6 Pro"; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}
.tab-wrap .groupList-wrap .grounAdd-btn{font-size: 0; width: 65px;height: 100%;}
.tab-wrap .groupList-wrap .grounAdd-btn:after{content:'\2b'; display: block; font-size: 28px; font-weight: 900; color:#aaa; font-family: "Font Awesome 6 Pro"; }

.tab-wrap .groupList-wrap li > a:hover, .tab-wrap .groupList-wrap li > a.actived{border:2px solid #276cad;}
.tab-wrap .groupList-wrap li.groupAdd > a.actived{border:1px solid #d7d7d7;}
.tab-wrap .groupList-wrap .bookmark.actived:after{color:#f5b415}

.groupInfo-cont-wrap{margin-top: 30px; position:relative;}
.groupInfo-cont-wrap > div{position:absolute; top:0; left:0; display:none;}
.groupInfo-cont-wrap > div.actived{display:block;}

/*나의모임정보 모달 inviteModal*/
.invite-modal .modal-text-box{padding:60px 30px 30px;}
.invite-modal .modal-text-box .title{margin-bottom: 5px;}
.invite-modal .modal-text-box .text{font-size: 14px;}
.modal-text-box .message-text{background:#f5f5f5; width:100%; padding:60px 30px; text-align: center; margin-top: 30px;}
.modal-text-box .message-text p{line-height: 1.5; margin-bottom: 20px; }
.modal-text-box .message-text p.adress{margin-bottom: 0px; font-size: 14px;}
.modal-text-box .tel-wrap{width:100%; display: flex; align-items: center;justify-content: space-between; margin-top: 30px;}
.modal-text-box .tel-wrap p{color:#333; font-weight: 500;}
.modal-text-box .tel-wrap input{width: 85%;}

/*단원리스트 memberList*/
.page-search-wrap{display:flex; align-items: center; justify-content: center; width: 100%;}
.page-search-wrap .search-box{display:flex; align-items: center; justify-content:flex-start; width: 60%;}
.page-search-wrap .search-box .input-100pro{width: calc(100% - 160px);}


.memberList-total{display:flex; align-items: flex-end; justify-content: space-between; margin-top: 30px; padding-bottom: 10px; border-bottom: 1px solid #d7d7d7;}

.memberList-wrap .member-list{margin-top: 30px; width: 100%; display:flex; flex-wrap:wrap; align-content: center; justify-content: flex-start;}
.memberList-wrap .member-list li {width: 33.33%; padding-right: 20px; margin-bottom: 20px;}
.memberList-wrap .member-list li:nth-child(3n) {padding-right: 0;}
.memberList-wrap .member-list li:nth-last-child(-n+3) {margin-bottom: 0;}
.memberList-wrap .member-list li a {display:flex; align-items: center; justify-content: space-between; border:1px solid #d7d7d7; padding:40px 20px; border-radius: 5px;}
.memberList-wrap .member-list li a:hover{border:2px solid #276cad; padding:39px 19px;}
.memberList-wrap .member-list li a img{width: 80px;height: 80px; border-radius: 50%; border:1px solid #d7d7d7;}
.memberList-wrap .memberInfo{width:calc(100% - 100px); margin-left: 20px;}
.memberList-wrap .memberInfo .memberName{display:flex; justify-content: flex-start; align-items: center; width:100%; overflow: hidden; flex-wrap: wrap; height: 28px;}
.memberList-wrap .memberInfo .title{color:#333; font-weight: 500; font-size: 20px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.5;}
.memberList-wrap .memberInfo .hasMg .title{margin-right:5px; max-width:calc(100% - 90px);}
.memberList-wrap .memberInfo span.mg{font-size: 14px; padding:3px 8px 4px; background: #276cad; color:#fff; border-radius: 5px; margin-left: 5px; vertical-align: bottom; display:inline-block; font-weight: 400;}
.memberList-wrap .memberinfo-text{margin-top: 10px;}
.memberList-wrap .memberinfo-text > p{color:#888; font-size: 15px; line-height: 1.5;}

.memberList-wrap .memberPart{border-bottom: 1px solid #d7d7d7; margin-top: 60px; padding-bottom: 10px; }
.subTitle{font-size: 30px; color:#333; font-weight: 600; display:flex; align-items: center;}
.subTitle .titleBar{display:inline-block; width:5px; height:28px; border-radius: 2.5px; background: #276cad; margin-bottom:-2px; margin-right: 8px; position:relative; overflow: hidden;}
.subTitle .titleBar:before{content:''; display:inline-block; width: 100%; height:10px; background: #f5b415; position:absolute; top:0; left:0;}

/*단원리스트 모달 memberList_modal*/
.memberList-info-modal{display:flex; align-items: center; justify-content: flex-start; margin-top: 30px;}
.memberList-info-modal img{width: 160px;height: 160px; border-radius: 5px; bordeR:1px solid #d7d7d7;}
.memberList-info-modal .member-info{width:calc(100% - 160px); padding-left: 30px;}
.memberList-info-modal .member-info p.name{color:#333; font-size: 22px; font-weight: 600;}
.memberList-info-modal .member-info ul{margin-top: 20px;}
.memberList-info-modal .member-info ul li{margin-top: 10px;}

.memberList-modal .modal-table-wrap table td a.call{display:flex; justify-content: space-between; align-items: center; width: 100%; height: 100%;}
.memberList-modal .modal-table-wrap table td a.call span {display:flex; align-items: center; height: 100%;}
.memberList-modal .modal-table-wrap table td a.call span:before{content:'';display:inline-block; height: 65%; width: 1px; background: #d7d7d7; margin-right: 20px;}
.memberList-modal .modal-table-wrap table td a.call span i{color:#276cad; font-size: 20px; margin-top: -3px; vertical-align: middle;}



/*모임가입 groupJoin*/
.groupJoin-wrap .list{margin-top: 30px; width: 100%; display:flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start;}
.groupJoin-wrap .list > li{width: 33.33%; padding-right: 20px; margin-bottom: 20px; position:relative;}
.groupJoin-wrap .list > li:nth-child(3n){padding-right: 0; }
.groupJoin-wrap .list > li:nth-last-child(-n+3){margin-bottom: 0;}
.groupJoin-wrap .list > li > a{display:flex; align-items: center; justify-content: space-between; border:1px solid #d7d7d7; border-radius: 5px; padding:30px;}
.groupJoin-wrap .list li > a:hover,.groupJoin-wrap .list li > a.actived{background:#f0f5f9; border:2px solid #276cad; padding:29px;}
.groupJoin-wrap .choirInfo {width:calc(100% - 100px); padding-right: 30px;}
.groupJoin-wrap .choirInfo .title{display:flex; align-items: center; justify-content: flex-start; width: 100%;}
.groupJoin-wrap .choirInfo .title .choirName{color:#333; font-size: 20px; max-width: calc(100% - 60px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; line-height: 1.3;}
.groupJoin-wrap .choirInfo .title .option{font-size: 14px; padding:3px 8px 4px;background: #276cad; color:#fff; margin-left: 5px; vertical-align: bottom; display:inline-block; font-weight: 400; border-radius: 5px;}
.groupJoin-wrap .choirInfo .text{margin-top: 5px; width:100%; display:block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color:#888;}
.groupJoin-wrap .choirInfo ul.total{display:flex; align-items: center; justify-content: flex-start; width: 100%;}
.groupJoin-wrap .choirInfo ul.total > li{display:flex; align-items: center; justify-content: flex-start; padding-right: 0; font-size: 14px; color:#888; margin-top: 30px; width: auto;}
.groupJoin-wrap .choirInfo ul.total > li:after{content:''; display:inline-block; margin:0 10px; width: 1px; height:10px; background: #d7d7d7; vertical-align: middle; margin-bottom: -2px;}
.groupJoin-wrap .choirInfo ul.total > li:last-child:after{display:none;}

.groupJoin-wrap li .groupInfo-btn{height:calc(100% - 60px); width: 100px; position:absolute; top:30px; right:50px; font-weight: 500;}
.groupJoin-wrap li:nth-child(3n) .groupInfo-btn{right:30px;}

.groupJoin-none-wrap{border-top:1px solid #d7d7d7; width: 100%; padding:80px; padding-bottom: 0; margin-top:30px; text-align: center;}
.groupJoin-none-wrap .icon{width:120px; height:120px; border:7px solid #276cad; border-radius: 50%; display:flex; align-items: center; justify-content: center; margin:auto; color:#276cad; font-size: 70px; font-weight: 900; font-family: 'roboto';}
.groupJoin-none-wrap .text{ margin-top: 30px;}

.groupJoin-invite-wrap{border-top:1px solid #d7d7d7; margin-top: 80px;}
.groupJoin-invite-wrap .list{margin-top: 30px;}
.groupJoin-invite-wrap .list .text{color:#333; display:flex; align-items: center; justify-content: flex-start;}

.groupJoin-invite-wrap .list .text span.icon {display:flex; align-items: center; justify-content: center; width: 18px;height: 18px; border:2px solid #333; border-radius: 50%; margin-right: 5px; font-weight: 900; font-size: 13px; font-family: 'roboto'; color:#333; margin-bottom: -2px;}
.groupJoin-invite-wrap .list ul {display:flex; align-items: center; justify-content: flex-start; margin-top: 10px;}
.groupJoin-invite-wrap .list ul li { display:flex; align-items: center; justify-content: flex-start;}


/*모임가입 모달 groupJoin_modal*/
.groupJoin-modal .title-wrap .title {display:flex;align-items: center; justify-content: flex-start;}
.groupJoin-modal .title-wrap .title .opction{display:inline-block; background: #276cad; color:#fff; font-size: 14px; padding:3px 8px 3px; vertical-align: bottom; border-radius: 5px; margin-left: 5px; margin-bottom: -3px; font-weight: 400;}

.groupJoin-modal .modal-table-wrap{max-height:385px; overflow: auto;}
.groupJoin-modal .part-select-wrap{width: 100%; display: flex; align-items: center; justify-content: space-between; margin-top: 30px;}
.groupJoin-modal .part-select-wrap p{color:#333; font-weight: 500;}
.groupJoin-modal .part-select-wrap .selectBox{width: 85%;}




/*모임생성 groupCreate*/
.myInfo-list .explain p.text{font-size: 14px; color:#888;}
.myInfo-list .addTime{display:flex; align-items: center; justify-content: flex-start;}
.myInfo-list .addTime button{width: 35px;height: 35px; border-radius: 5px; background: #f5f5f5; border: 1px solid #d7d7d7; color:#aaa; display:flex; align-items: center; justify-content: center;}

.myInfo-list .groupCreate-mass{width: 100%; display:flex; align-items: center; justify-content: flex-start; flex-wrap:wrap;}
.myInfo-list textarea{width: 100%; border:1px solid #d7d7d7 ;border-radius: 5px; padding:30px; height: 160px;}

.myInfo-list .search-box{display:flex; align-items: center; width:100%; justify-content: flex-start; margin-bottom:10px;}
.myInfo-list .search-box a{margin-left:10px;}

/*모임생성 검색 모달 groupCreate_modal*/
.groupCreate-modal .modal-text-box{padding-bottom: 30px;}
.groupCreate-modal .search-box{position:relative;}
.groupCreate-modal .search-box a.search-btn{position:absolute; top:50%; right:0; transform:translateY(-50%); display:flex; justify-content: center; align-items: center; width: 50px;height: 50px;}
.groupCreate-modal .search-box a.search-btn i{color:#aaa; font-size: 16px;}

.groupCreate-modal .has-search{margin-top: 20px;}
.groupCreate-modal .has-search p.result{display:flex; justify-content: flex-start; align-items: center; font-size: 14px; color:#888;}
.groupCreate-modal .has-search p.result span.num{color:#333; font-weight: 500; font-size: 14px; color:#276cad;}
.groupCreate-modal .has-search p.result span.num:before{content:':'; display:inline-block; margin:0 5px; color:#888; font-weight: 400; margin-top: -5px; vertical-align: middle;}

.groupCreate-modal .has-search .search-list{margin-top: 10px; border-top:1px solid #d7d7d7; max-height:325px; overflow-y: auto; border-bottom: 1px solid #d7d7d7;}
.groupCreate-modal .has-search .search-list li label{display:flex; justify-content: flex-start; align-items: center; border-bottom:1px solid #d7d7d7; cursor: pointer; padding:15px 20px;}
.groupCreate-modal .has-search .search-list li:last-child label{border-bottom: 0;}
.groupCreate-modal .has-search .search-list li:hover label{background: #f0f5f9;}
.groupCreate-modal .has-search .search-list li input{margin-right:10px;}
.groupCreate-modal .has-search .search-list li .search-text{width: calc(100% - 26px); text-align: left;}
.groupCreate-modal .has-search .search-list li .search-text p.title{font-size: 17px; margin-bottom: 2px; font-weight: 500;}
.groupCreate-modal .has-search .search-list li:hover p.title{color: #276cad;}
.groupCreate-modal .has-search .search-list li .search-text p.location{font-size: 14px; color:#888; line-height: 1.3;}



.groupCreate-modal .none-search{margin:60px 0 30px;}
.groupCreate-modal .none-search p.result{font-size:14px; color:#888; }


/*모임생성 완료 gCreate_complete*/
.gCreate-complete-wrap{padding-bottom:80px; border-bottom: 1px solid #d7d7d7;}
.gCreate-complete-wrap .complete-title{color:#333; font-size: 30px; font-weight: 600; margin-top: 30px;}
.groupJoin-none-wrap .text{line-height: 1.3;}


/*성가연습 choirList*/
.page-sel-wrap {display:flex; align-items: center; justify-content: space-between;}
.page-sel-wrap .f-left{display:flex; align-items: center; justify-content:flex-start;}
.page-sel-wrap .f-right{display:flex; align-items: center; justify-content:flex-end;}

.add-playList{position:fixed; bottom:100px; left:50%; transform: translateX(-50%); background:#276cad; padding:12px 30px; border-radius: 20px; display:none;}
.add-playList p{color:#fff;font-size: 15px;}

.paging{display:flex; align-items: center; justify-content: center; margin-top: 80px;}
.paging .page-arrow{font-size: 0; width:35px; height: 35px; border:1px solid #d7d7d7; border-radius: 5px; background:#f5f5f5; position:relative;} 
.paging .page-arrow:before{display:block; position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); color:#aaa; font-size: 15px; font-family: "Font Awesome 6 Pro"; font-weight: 900;  font-size: 13px;} 
.paging .page-arrow1:before{content:'\f100'} 
.paging .page-arrow2:before{content:'\f104'} 
.paging .page-arrow3:before{content:'\f105'} 
.paging .page-arrow4:before{content:'\f101'} 
.paging .page-num{display:flex; align-items: center; justify-content: center; margin-left: 20px;margin-right: 20px;} 
.paging .page-num a{display:flex; align-items: center; justify-content: center; width: 35px;height: 35px; font-family: 'roboto'; margin-left: 1px; margin-right: 1px; font-size: 15px;} 
.paging .page-num a:hover, .paging .page-num a.actived{background:#276cad; color:#fff; border-radius: 3px;} 


/*성가재생목록 playList_modal*/
.m-playList{display:none;}
.playList-modal{width: 100%; padding:30px 30px 50px;}
.playList-modal .title-wrap{width: 100%; border-bottom:2px solid #276cad; padding-bottom:5px; display:flex; align-items: center; justify-content: space-between;}
.playList-modal .title-wrap p{font-size: 22px; color:#333; font-weight: 600; line-height: 1.3;}
.playList-modal .title-wrap a.close i{font-size: 32px; color:#aaa;}


.choir-playList-wrap li{display:flex; justify-content: space-between; align-items: center; border-bottom:1px dashed #d7d7d7; background: #fff;}
.choir-playList-wrap li a{display:flex; align-items: center; justify-content: flex-start; padding:0 10px; width:calc(100% - 110px);}
.choir-playList-wrap li a .choirName {width:calc(100% - 25px); padding:15px 0;}
.choir-playList-wrap li a .choirName p{width: 100%; font-size: 16px; font-weight: 600; color:#333; overflow: hidden;text-overflow: ellipsis; white-space: nowrap;}
.choir-playList-wrap li a .choirName .choirInfo{display:flex; align-items: center; justify-content: flex-start; margin-top: 5px;}
.choir-playList-wrap li a .choirName .choirInfo span{display:block; font-size: 14px; color:#888;}
.choir-playList-wrap li a .choirName .choirInfo span:first-child:after{content:''; display:inline-block; width: 1px; height: 10px; background: #d7d7d7; margin-left: 5px; margin-right: 5px;}

.choir-playList-wrap{overflow-y: auto; border-bottom:1px solid #d7d7d7; height: 430px;}
.choir-playList-wrap li .arrow-btn-wrap{display:flex; align-items: center; justify-content: flex-end; margin-right: 10px;}
.choir-playList-wrap li .arrow-btn-wrap > a{width: 30px;height: 30px; background: #276cad; border-radius: 5px; display: flex; align-items: center; justify-content: center;}
.choir-playList-wrap li .arrow-btn-wrap > a i{color:#fff; font-size: 12px; vertical-align: middle; margin-bottom: -2px;}

/*성가 연습 choirPractice*/
.m-choirPract-tab-wrap{display:none;}

.choirPract-tab-wrap{display:flex; flex-wrap:wrap; align-items: center; justify-content: flex-start;}

.choirPract-tab-wrap li{width:calc(20% - 8px); display:flex; justify-content: space-between; align-items: center; border-radius: 5px; border:1px solid #d7d7d7; margin-right:10px; margin-bottom: 10px; position:relative;}
.choirPract-tab-wrap li.actived,.choirPract-tab-wrap li:hover{border:2px solid #276cad;}
.choirPract-tab-wrap li:nth-child(5n){margin-right: 0;}
.choirPract-tab-wrap li:nth-last-child(-n+5){margin-bottom: 0;}

.choirPract-tab-wrap li a{display:flex; align-items: center; width: 100%; height:60px; padding:0 20px; font-size: 18px;  color:#333; font-weight: 500;}
.choirPract-tab-wrap li.actived a,.choirPract-tab-wrap li:hover a{padding: 0 19px; height: 58px;}
.choirPract-tab-wrap li span.bookmark2{display:block; position:absolute; right:20px; cursor: pointer; height: 100%; width: 35px;}
.choirPract-tab-wrap li.actived span.bookmark2,.choirPract-tab-wrap li:hover span.bookmark2{right:19px;}
.choirPract-tab-wrap li span:after{content:'\f005'; display:block; font-size: 28px; font-weight: 900; color:#d7d7d7; font-family:"Font Awesome 6 Pro"; position:absolute; top:50%; left:50%; transform: translate(-50%, -50%);}
.choirPract-tab-wrap li span.actived:after{color:#f5b415;}

.choirPract-video-wrap{margin-top: 60px;}
.video-top-wrap{display:flex; align-items: flex-end; justify-content: space-between;}
.video-date-wrap .practice-date{display:flex; align-items: center; justify-content: flex-start; font-size: 30px; color:#333; font-weight: 600;  cursor: pointer;}
.video-date-wrap .practice-date span{display:flex; align-items: center; justify-content: center; margin-right: 10px; width:40px;height: 40px; background:#eee; border-radius: 5px;}
.video-date-wrap .practice-date span i{color:#aaa; font-weight: 500; font-size: 20px;}
.video-top-wrap .f-right{display:flex; align-items: center; justify-content: flex-end;}

.video-wrap{width: 100%; display:flex; align-items: flex-start; justify-content:space-between; margin-top: 10px; height:566px;}
.video-wrap .video-info{width:calc(65% - 30px); border-radius:5px; border:1px solid #d7d7d7; overflow:hidden; }
.video-wrap .video{width: 100%; height: 510px;}
.video-wrap .info-box{display:flex; align-items: center; justify-content: space-between; padding:20px 30px;}
.video-wrap .info-box ul{display:flex; align-items: center; justify-content: flex-start;}
.video-wrap .info-box .practice-number li{color:#888; font-size: 14px;}
.video-wrap .info-box .practice-number li:first-child:after{content:''; display:inline-block; width: 1px; height: 10px; background: #d7d7d7; margin-right:10px; margin-left: 10px;}
.video-wrap .info-box .practice-view li{display:flex; align-items: center; justify-content: flex-start;}
.video-wrap .info-box .practice-view li:before{display:block; margin-right: 5px;}
.video-wrap .info-box .practice-view li a{color:#888; font-size: 14px;}

.video-wrap .playList-wrap{width:35%; height: 100%; border:1px solid #d7d7d7; border-radius: 5px;}
.video-wrap .playList-wrap .playList-top-wrap{width: 100%; position:relative;}
.video-wrap .playList-wrap .playList-top-wrap .selectBox{border:none; width: 100%; height: 60px; border-bottom:1px solid #d7d7d7; border-radius: 0;}
.video-wrap .playList-wrap .playList-top-wrap .selectBox:after{display:none}
.video-wrap .playList-wrap .playList-top-wrap .selectBox .label{font-size: 18px; color:#333; font-weight: 500;}
.video-wrap .playList-wrap .playList-top-wrap .selectBox .label:after{content:'\f0d7'; font-weight: 900; font-size: 16px; color:#888; font-family: "Font Awesome 6 Pro"; margin-left: 10px;}
.video-wrap .playList-wrap .playList-top-wrap .selectBox.active .optionList{top:59px;}
.video-wrap .playList-wrap .playList-top-wrap .repeat-btn{position:absolute; top:50%; right:20px; transform: translateY(-50%); color:#888;font-size: 14px;}

.video-wrap .playList-wrap .playList{height:calc(100% - 60px); overflow-y: auto; display:none;}
.video-wrap .playList-wrap .playList > li{display:block; margin:0 30px;border-bottom:1px dashed #d7d7d7;}
.video-wrap .playList-wrap .playList li .playList-box{display:flex; align-items: center; justify-content: space-between; }

.video-wrap .playList-wrap .playList li a .choir-info-wrap{display:flex; align-items: center; justify-content: space-between; padding:30px 0;}
.video-wrap .playList-wrap .playList .choir-title p.title{font-size: 18px; font-weight: 500; color:#333;}
.video-wrap .playList-wrap .playList li.actived .choir-title p.title{color:#276cad;}
.video-wrap .playList-wrap .playList .choir-title .choir-info{display:flex; align-items: center; justify-content: flex-start; margin-top: 5px;}
.video-wrap .playList-wrap .playList .choir-title .choir-info span{display:inline-block; font-size: 14px; color:#888;}
.video-wrap .playList-wrap .playList .choir-title .choir-info span:first-child:after{content:''; display:inline-block; margin:0 10px; width: 1px; height: 8px;background: #d7d7d7; vertical-align: middle; margin-top: -1px;}
.video-wrap .playList-wrap .playList li a .icon{margin-left: 20px;}
.video-wrap .playList-wrap .playList li a .icon:after{content:'\f04d'; display:block; font-size: 26px; color:#aaa; font-weight: 900; font-family: "Font Awesome 6 Pro";}
.video-wrap .playList-wrap .playList li.actived a .icon:after{content:'\f04b'; color:#276cad}
.video-wrap .playList-wrap .evaluation-box{background:#f5f5f5; padding:30px; margin-top: -10px; margin-bottom: 30px; display:none;}

.video-wrap .playList-wrap .evaluation-box p{line-height: 1.3;}
.video-wrap .playList-wrap .evaluation-box .eval-sel-wrap{display:flex; align-items: center; justify-content: space-between; margin-top: 10px;}
.video-wrap .playList-wrap .evaluation-box .eval-sel-wrap .selectBox{width: calc(100% - 90px); background: #fff;}
.video-wrap .playList-wrap .evaluation-box .eval-sel-wrap .selectBox:after{z-index: 0;}
.video-wrap .playList-wrap .evaluation-box .eval-sel-wrap button.save-btn{width: 80px;}

.page-btn-wrap2-1 .edit-btn{display:none;}

/*.playList-edit{display:none;}*/
.playList-edit .choir-info-wrap{padding:20px 0;display:flex; align-items: center; justify-content: space-between; cursor:pointer;}
.playList-edit .choir-info-wrap .check{display:none;}
.playList-edit .choir-info-wrap .choir-title{width:calc(100% - 150px); }
.playList-edit .choir-info-wrap .choir-title p.title{width: 100%; display:block; text-overflow: ellipsis;overflow: hidden; white-space: nowrap;}
.playList-edit .choir-info-wrap .arrow-btn-wrap{display:flex; align-items: center; justify-content: flex-end;}
.playList-edit .choir-info-wrap .arrow-btn-wrap > a{display:flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: #276cad; color:#fff; border-radius: 5px;}
.playList-edit .choir-info-wrap .arrow-btn-wrap > a.remove{background: #d7d7d7; color:#888;}

.playList-edit .choir-info-wrap .arrow-btn-wrap > a i{font-size: 13px;}
.playList-edit .choir-info-wrap .arrow-btn-wrap > a.remove i{font-size: 16px;}

.video-wrap .playList-wrap .playList.edit{display:block;}

/*성가연습하기 달력*/
.video-date-wrap{position:relative;}
.calendar-popup{display:none; position:absolute; top:50px; left:0; background: #fff; border:1px solid #d7d7d7; border-radius: 5px; width: 300px;}
.datepicker--cell.-selected-, .datepicker--cell.-selected-.-current-,.datepicker--cell.-selected-.-focus-{background: #276cad;}
.datepicker--cell.-current-{color: #276cad;}
.calendar-popup.actived{display:block; z-index: 999;}
.calendar-popup .datepicker--content{padding: 4px 4px 20px;}
.calendar-popup .datepicker--nav{height: 40px;}
.calendar-popup .datepicker--days-names{height: 40px; line-height: 40px; margin-bottom: 0;}
.calendar-popup .datepicker--cell{font-size: 14px; font-weight: 300; height: 40px;}


.m-choirImg-btn-wrap{display:none;}
.choirImg-wrap{display:none;}

/*악보이미지 choirImg*/
.choirImg{width: 100%; padding:30px;}
.choirImg img{width: 100%;}


/*출석및스케줄_월별 schedule.jsp*/
.m-attendance-wrap{display: none;}
.schedule-top-wrap{display:flex; justify-content: space-between; align-items: center; position:relative;}
.schedule-date-wrap{display:flex; justify-content: flex-start;align-items: center;}
.schedule-top-wrap .m-date-wrap{display: none;}
.schedule-top-wrap .pc-date-wrap{display:flex; justify-content: flex-start; align-items: center;}
.schedule-top-wrap .pc-date-wrap li a{display:flex; align-items: center; justify-content: center; width: 80px; height: 50px; background:#f5f5f5; border:1px solid #d7d7d7;}
.schedule-top-wrap .pc-date-wrap li:nth-child(1) a{border-radius: 5px 0 0 5px;}
.schedule-top-wrap .pc-date-wrap li:nth-child(2) a{border-left: 0;border-right: 0;}
.schedule-top-wrap .pc-date-wrap li:nth-child(3) a{border-radius: 0 5px 5px 0;}

.schedule-top-wrap .pc-date-wrap li.actived a, .schedule-top-wrap .pc-date-wrap li:hover a{background:#276cad; color:#fff; border:1px solid #276cad;}

.schedule-date{display:flex; justify-content: flex-start; align-items: center; position:absolute; top:50%; left:410px; transform: translateY(-50%); z-index: 999;}
.move-btn{display:flex; align-items: center; justify-content: center;  width: 35px;height: 35px; font-size: 0; position:relative;cursor: pointer;}
.schedule-top-wrap .attendanceBtn{display:flex; align-items: center; justify-content: flex-end;}
.move-btn:before{display:block; position:absolute; top:52%; left:50%; transform: translate(-50%, -50%); color:#aaa; font-family: "Font Awesome 6 Pro"; font-weight: 900; font-size: 13px;}
.move-btn.move-btn2:before{content:'\f104';}
.move-btn.move-btn3:before{content:'\f105';}

.schedule-calendar-wrap{display:flex; justify-content: space-between; align-items: flex-start; width: 100%; height: 800px; margin-top: 30px;}

.schedule-calendar-wrap .attendance-wrap{width: 380px; border:1px solid #d7d7d7; background: #f5f5f5; border-radius: 5px; height:100%; overflow-y: auto; padding:30px 20px;}
.attendance-list{margin-top: 50px;}
.attendance-list:first-child{margin-top: 0;}
.attendance-list p.date{font-size: 22px; font-weight: 600; color:#333; font-family: 'roboto'; }
.attendance-list .list li{background:#fff; border-radius: 5px; box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.05); padding:20px; padding-left: 25px; margin-top: 10px; position:relative; overflow: hidden; width: 100%;}
.attendance-list .list li:before{content:''; display:block; position: absolute; top:0; left:0; width: 5px; height: 100%; }
.attendance-list .list li.type01:before{background:#42adc3;}
.attendance-list .list li.type02:before{background:#f2b14a;}
.attendance-list .list li.type03:before{background:#82bde9;}
.attendance-list .list li.type04:before{background:#8b7cd5;}
.attendance-list .list li.type05:before{background:#f25656;}

.attendance-list .list li .sch-title{display:flex; justify-content: space-between; align-items: center; width: 100%;}
.attendance-list .list li .sch-title p.title{font-size: 18px; font-weight: 600; color:#333; width: calc(100% - 85px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.attendance-list .list li .sch-title .time{font-size: 14px; color:#888; font-family: 'roboto';}
.attendance-list .list li .text{color:#888; font-size: 14px; margin-top: 10px; line-height: 1.3;}
.attendance-list .list li .sch-btn{display:flex; justify-content: space-between; align-items: center; flex-wrap: wrap; width: 100%; margin-top: 20px;}
.attendance-list .list li .sch-btn button{width:calc(50% - 2.5px); height: 45px; font-size: 15px;}
.attendance-list .list li .sch-btn button.absence-btn{margin: 0;}
.attendance-list .list li .sch-btn button.practice-btn{width: 100%; margin-top: 5px; background: #276cad;}


.calendar-month-wrap{width: calc(100% - 410px); height:100%; border:1px solid #d7d7d7; border-radius: 5px; display:flex; flex-wrap:wrap;}
.calendar-month-wrap .dayName{display:flex; align-items: center; justify-content: space-between; width: 100%; height: 50px; border-bottom: 1px solid #d7d7d7; background: #f0f5f9; border-radius: 5px 5px 0 0;}
.calendar-month-wrap .dayName li{width: 14.28%; text-align: center; font-weight: 500; color:#333;}

.calendar-month-wrap .dates{display:flex; flex-wrap: wrap; align-items: center; width: 100%; height:calc(100% - 50px); position:relative;}
.calendar-month-wrap .dates ul{display:flex; justify-content: space-between; align-items: flex-start; width: 100%;  height:16.6%; border-bottom: 1px solid #d7d7d7;}
.calendar-month-wrap .dates > ul.last{border-bottom: 0;}
.calendar-month-wrap .dates ul li{width: 14.28%; height: 100%; padding:3px; cursor: pointer;}
.calendar-month-wrap .dates ul li .otherDate{opacity: 0.5;}
.calendar-month-wrap .dates ul li p.day{font-size: 14px; font-family: 'roboto'; font-weight: 500; padding:10px; position:relative; width: 30px;height: 30px; display:flex; justify-content: center; align-items: center; margin-bottom: 5px;}
.calendar-month-wrap .dates ul li:hover p.day{color:#fff !important;}
.calendar-month-wrap .dates ul li p.today{position:relative; color:#fff; }
.calendar-month-wrap .dates ul li p.today:before{content: ''; display:block; width: 30px;height: 30px; position:absolute;top:0;left:0; z-index: -2; border-radius: 50%; background: #276cad;}

.calendar-month-wrap .dates ul li:hover p.day:before{content: ''; display:block; width: 30px;height: 30px; position:absolute;top:0;left:0; z-index: -1; border-radius: 50%; background: #f5b415;}

/*스케줄*/
.schList-box{ border-radius: 5px;padding:5px; position:relative; margin-bottom: 3px; position:absolute; cursor: pointer;}
.schList-box > p.title{color:#fff; font-weight: 500; font-size: 14px; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.schList-box .schList-info{position:absolute; top:0; right:-225px; width: 220px; background: #fff; border-radius: 5px; padding:15px; z-index: 99; display:none;}
.schList-box.right-area .schList-info{left:-225px; right:inherit;}
.schList-box:hover .schList-info{display:block;}

.schList-box .schList-info .time{color:#888; font-size: 14px; font-family: 'roboto'; font-weight: 500;}
.schList-box .schList-info .time:before{content:''; display:inline-block; margin-right: 5px; width: 5px;height: 5px; border-radius: 50%; vertical-align: middle;}
.schList-box .schList-info .pratTxt{margin-top: 20px;}
.schList-box .schList-info .pratTxt .title{color:#333; font-weight: 500; line-height: 1.3;}
.schList-box .schList-info .pratTxt .text{color:#888; margin-top: 5px;font-size: 14px; line-height: 1.3;}

.schList-box.type01 .schList-info{border:1px solid #42adc3;}
.schList-box.type02 .schList-info{border:1px solid #f2b14a;}
.schList-box.type03 .schList-info{border:1px solid #82bde9;}
.schList-box.type04 .schList-info{border:1px solid #8b7cd5;}
.schList-box.type05 .schList-info{border:1px solid #f25656;}
.schList-box.type01, .schList-box.type01 .schList-info .time:before{background:#42adc3;}
.schList-box.type02, .schList-box.type02 .schList-info .time:before{background:#f2b14a;}
.schList-box.type03, .schList-box.type03 .schList-info .time:before{background:#82bde9;}
.schList-box.type04, .schList-box.type04 .schList-info .time:before{background:#8b7cd5;}
.schList-box.type05, .schList-box.type06 .schList-info .time:before{background:#f25656;}

/*스케줄 위치*/
.schList-box.sch1{width:calc(28.25% - 6px); top:calc(33.2% + 40px ); left:3px;}
.schList-box.sch2{width:calc(14.28% - 6px); top:calc(33.2% + 67px ); left:3px;}
.schList-box.sch3{width:calc(14.28% - 6px); top:calc(33.2% + 94px ); left:3px;}
.schList-box.sch4{width:calc(14.28% - 6px); top:calc(33.2% + 40px ); right:3px;}

/*스케줄 상세정보 모달 scheduleModal*/
.title-arrow{display:flex; align-items: center; justify-content: flex-start;}
.title-arrow > .title{margin:0 10px;}
.title-arrow > a.move-btn{width: 30px;height: 30px;margin-bottom: -2px;}


.schedule-modal .modal-text-box2{padding:60px 60px 0;}
.schedule-modal .main-schDetail-wrap{padding:0 10px; height: 420px;}
.sch-btn button.absence-btn2{border:1px solid #dd3413; color:#dd3413; margin: 0 10px;}
.schedule-modal .absence-text-wrap{display:none; width: 100%;}
.schedule-modal .absence-text{width: 100%; display:flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.schedule-modal .absence-text .selectBox{width:calc(100% - 90px);}
.schedule-modal .absence-text .save-btn{width:80px;}

.schedule-modal .main-schDetail-wrap .detail-list-wrap > li .list-inner{display:flex; justify-content: flex-start; align-items: center; flex-wrap:wrap;}
.schedule-modal .detail-list-wrap > li .list-inner .check{margin-right:10px;}
.schedule-modal .detail-list-wrap > li .list-inner .check input[type="checkbox"]{width: 18px;height: 18px;}

.schedule-modal .main-schDetail-wrap .detail-list-wrap > li .list-title .title{font-size: 18px;}
.schedule-modal .main-schDetail-wrap .detail-list-wrap > li .list-title{width:calc(100% - 318px);}
.schedule-modal .sch-btn button{width: 80px; font-size: 14px;}


/*출석및스케줄_주별 schedule_week.jsp*/

.calendar-week-wrap .dayName li{height: 100%; display:flex; justify-content: center; align-items: center; width: 13.2%;}
.calendar-week-wrap .dayName li.blank{width: 7.6%;}
.calendar-week-wrap .dayName .today{background:#d0dfee;}
.calendar-week-wrap .dayName .date{font-family: 'roboto'; color: #333; margin-bottom: -4px; vertical-align: middle;}
.calendar-week-wrap .allDay{display:flex; justify-content: space-between; align-items: center; width: 100%; border-bottom:1px solid #d7d7d7;}
.calendar-week-wrap .allDay li{display:flex; justify-content: center; align-items: center; width: 13.2%; height:30px;}
.calendar-week-wrap .allDay li:first-child{width: 7.6%; font-size: 14px; color:#888;}

.calendar-week-wrap .calendar-dates{width: 100%; height:calc(100% - 80px); overflow-y: auto; display:flex; justify-content: space-between; align-items: flex-start; position:relative;}
.calendar-week-wrap .calendar-dates::-webkit-scrollbar{display: none;}
.calendar-week-wrap .calendar-dates .times{width:7.6%}
.calendar-week-wrap .calendar-dates .times li{position:relative; height:60px;}
.calendar-week-wrap .calendar-dates .times li:last-child{height: 20px;}
.calendar-week-wrap .calendar-dates .times li .time{position: absolute; top:-6px; left:50%; transform: translateX(-50%); font-size: 14px; color: #888; font-family: 'roboto';}
.calendar-week-wrap .calendar-dates .week-dates{width: 13.2%;}
.calendar-week-wrap .calendar-dates .week-dates li{width: 100%; height: 60px; border-bottom: 1px solid #d7d7d7; border-right: 1px solid #d7d7d7;}
.calendar-week-wrap .calendar-dates .last li{border-right: 0;}

.nowTime-wrap{position:absolute; top:613px; left:0; width: 100%; display:flex; justify-content: flex-start; align-items: center; z-index: 9;}
.nowTime-wrap .now{ width: 7.6%; text-align: center;}
.nowTime-wrap .now p{display:inline-block; color: #fff; background:#333; padding:3px 5px 2px; border-radius: 5px; font-size: 14px; font-family: 'roboto'; font-weight: 500; }

.nowTime-wrap .todayLocation{position:absolute; top:50%; left:calc(7.6% - 4px); width:7px; height:7px; border-radius: 50%; background: #333; transform: translateY(-50%);}
.nowTime-wrap .line{width:92.4%; height:1px; background: #333;}

/*주별 스케줄 종일*/
.calendar-week-wrap .allDay .schList-box{position:inherit; width: 100%; padding: 5px; height: auto; margin:0 3px;}
.calendar-week-wrap .allDay .schList-box:last-child{margin-bottom: 0;}


/*주별 스케줄*/
.calendar-week-wrap .schList-box{width:calc(13.2% - 6px); padding: 3px; height:20px;}
.calendar-week-wrap .schList-box.sch2{top:600px; left:calc(7.6% + 3px); height: 30px;}
.calendar-week-wrap .schList-box.sch3{top:660px; left:calc(7.6% + 3px); height: 60px;}


/*출석및스케줄_일별 schedule_day.jsp*/
.calendar-day-wrap .allDay{height: 30px;}
.calendar-day-wrap .allDay li:last-child{width: 92.4%;}
.calendar-day-wrap.calendar-week-wrap .calendar-dates{height: calc(100% - 30px);}
.calendar-day-wrap.calendar-week-wrap .calendar-dates .week-dates {width: 92.4%;}
.calendar-day-wrap.calendar-week-wrap .calendar-dates .week-dates li{border-right: 0;}

/*일별 스케줄*/
.calendar-day-wrap .schList-box{width: calc(92.4% - 6px)}
.calendar-day-wrap .schList-box .schList-info{right:inherit; left:0; top:22px; width: 360px;}
.calendar-day-wrap .schList-box.sch2{height: 60px;}
.calendar-day-wrap .schList-box.sch2 .schList-info{top:62px;}


/*회비납부내역 due*/
.table-inbtn{padding:6px 15px; border-radius: 5px;}

/*회비납부내역 모달 dueModal*/
.m-due-wrap{display:none;}
.dueSel-wrap{display:flex; justify-content: flex-start; align-items: center; position:relative;}
.dueSel-wrap .selectBox{height: 45px;line-height: 44px;}
.dueSel-wrap .selectBox .optionList{top:45px;}
.dueSel-wrap .icon{position:absolute; top:0; right:-20px; display:flex; height: 100%; padding:0 20px; align-items: center; cursor: pointer;}
.dueSel-wrap .icon:before{content:''; display:inline-block; width: 1px; height: 60%; position:absolute; top:50%; left:0; transform: translateY(-50%); background: #d7d7d7;}
.dueSel-wrap .icon i{color:#276cad; font-size: 24px; font-weight: 500;}
.dueSel-wrap .calendar-popup {top: inherit; left:inherit; bottom:54px; right:0; width: 270px;}
.dueSel-wrap .calendar-popup .datepicker--nav{height: 35px;}
.dueSel-wrap .calendar-popup .datepicker--nav-title{font-size: 13px;}
.dueSel-wrap .calendar-popup .datepicker--nav-title i{font-size: 14px;}
.dueSel-wrap .calendar-popup .datepicker--days-names{height: 30px; line-height: 30px; margin-bottom: 0; font-size: 14px; margin-top: 0;}
.dueSel-wrap .calendar-popup .datepicker--content{padding: 4px;}
.dueSel-wrap .calendar-popup .datepicker--cell{font-size: 12px; height: 30px;}

/*나의 연습내역 practice*/
.practice-wrap .search-box{display:flex; justify-content: space-between; align-items: flex-start; padding:30px; background: #f7f7f7;}
.practice-wrap .search-box .f-left{display:flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; width: calc(100% - 170px); margin-top: -10px;}
.practice-wrap .search-box .selectBox{background: #fff;}
.practice-wrap .search-box .selectBox:after{z-index: 0;}
.practice-wrap .search-box .selectBox .optionItem:hover a{color:#fff;}
.practice-wrap .search-box .selectBox .optionItem{padding:0}
.practice-wrap .search-box .selectBox .optionItem a{display:block; width: 100%; height:100%; padding:0 20px;}
.practice-wrap .calendar-box {position:relative;}
.practice-wrap .calendar-box input{width: 240px; padding-right: 50px;}
.practice-wrap .calendar-box .icon{position:absolute; top:50%; right:20px; transform: translateY(-50%);display:flex; align-items: center; justify-content: center; cursor: pointer;}
.practice-wrap .calendar-box .icon i{font-size: 20px; color:#aaa;}

.practice-wrap .calendar-box-wrap{display:flex; justify-content: flex-start; align-items: center;}
.calendar-box .calendar-popup{top:52px;}

.select-period{display:flex; justify-content: flex-start; align-items: center;}
.select-period li{margin-right: 5px;}
.select-period li:last-child{margin-right: 0;}
.select-period li a{display:flex; justify-content: center; align-items: center; color:#fff; background: #aaa; height:30px; width:55px; border-radius: 5px; font-size: 14px;}
.select-period li.actived a , .select-period li a:hover{background:#276cad;}


.practice-info-wrap .subTitle .titleBar{margin-bottom: 0;}

td.level1{color:#276cad;}
td.level2, td.level3{color:#666;}
td.level span{display:inline-block; vertical-align: middle; margin-top: -2px; margin-left: 5px;}
td.level span:before{display:inline-block; font-size: 16px; font-weight: 900; font-family: "Font Awesome 6 Pro"; color:#333;}
td.level1 span:before{content:'\f35b'; color:#276cad}
td.level2 span:before{content:'\f28b'; transform: rotate(90deg);}
td.level3 span:before{content:'\f358'; }

.m-practice-info-wrap{display:none;}

.practice-dete.datepickers-container{top:-50px !important;}


/*나의 연습내역 모달 practiceModal*/

.practiceModal .modal-table-wrap{overflow-y: auto; max-height:420px;}

/*나의연습내역 곡명검색 practice_choir*/
.practice-wrap2 .search-box{justify-content: center;}
.practice-wrap2 .search-box .f-left{width: auto;}
.practice-wrap2 .search-box .f-right{width: calc(80% - 170px);}
.practice-wrap2 .search-box .f-right .input-search-box{display: flex; justify-content: flex-end; align-items: center;}
.practice-wrap2 .practice-info-wrap .subTitle .titleBar{margin-bottom: -2px;}

/*공지사항 notice*/
.notice-list-wrap{border-top:1px solid #d7d7d7; margin-top: 30px;}
.notice-list-wrap .notice-list a{display:flex; justify-content: space-between; align-items: center; padding: 30px 0; border-bottom: 1px solid #d7d7d7;}

.notice-list-wrap .notice-list a .column{width: 15%; text-align: center; }
.notice-list-wrap .notice-list a .column .day{font-size: 50px; font-weight: 600; font-family: 'roboto'; color:#aaa;}
.notice-list-wrap .notice-list a:hover .column .day{color:#276cad;}
.notice-list-wrap .notice-list a .column .date{ font-family: 'roboto'; color:#aaa;}
.notice-list-wrap .notice-list a .subject{width: 85%; padding-right: 30px;}
.notice-list-wrap .notice-list a .subject .title{font-size: 20px; color:#333; font-weight: 500;   width: 100%; display:block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.5;}
.notice-list-wrap .notice-list a .subject .title span{color:#333;}
.notice-list-wrap .notice-list a:hover .subject .title{color:#276cad;}
.notice-list-wrap .notice-list a:hover .subject span{color:#276cad;}
.notice-list-wrap .notice-list a .subject .sub{color:#888; width: 100%; display:block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}


/*공지사항 notice_view*/
.notice-view-wrap .page-table2 th{line-height: 1.3;}
.notice-view-wrap .page-table2 th .type{display:inline-block; vertical-align: middle; margin-top: -5px; margin-right: 5px; color:#333;}
.notice-view-wrap .page-table2 td{border-right:0;}
.notice-view-wrap .page-table2 td{display:table-cell;vertical-align: middle;}
.notice-view-wrap .page-table2 td span.bar{display:inline-block; width: 1px; height: 10px; background:#d7d7d7; margin: 0 10px; margin-top: -2px;}
.notice-view-wrap .page-table2 td a{display:inline-block; vertical-align: middle; margin-top: -4.5px;}
.notice-view-wrap .page-table2 td.text{padding:20px;}
.notice-view-wrap .page-table2 td .text-box{min-height: 200px; line-height: 1.4;}


/*FAQ faq*/
.faq-wrap {border-top: 2px solid #276cad;}
.faq-wrap li {width: 100%;}
.faq-wrap li dl strong{color:#276cad; font-weight: 600; margin-right: 10px; font-size: 20px; position:absolute; top:18px; left:30px; font-family: 'roboto';}
.faq-wrap li dl dt a{display:block; font-size: 18px; color:#333; padding:20px 90px 20px 60px; border-bottom:1px solid #d7d7d7; position:relative; font-weight: 500; line-height: 1.2;}
.faq-wrap li dl dd{display:none; font-size: 16px; padding:20px 30px 20px 30px;  border-bottom:1px solid #d7d7d7; background: #f0f5f9; line-height: 1.5;}
.faq-wrap li dl dd > a{color:#276cad;}

.faq-wrap li dl dt a:after{content:'\f107'; display:block; width: 30px;height: 30px; border:1px solid #d7d7d7; border-radius: 30px; font-size: 13px; font-weight: 900; color:#888; text-align: center; line-height: 31px; font-family: "Font Awesome 6 Pro"; position:absolute; top:50%; right:30px; transform: translateY(-50%);}


/*문의하기 question*/
.question-tab{width: 100%; display:flex; justify-content: space-between; align-items: center; margin-bottom: 30px;}
.question-tab li{width: 50%;}
.question-tab li a{display:flex; justify-content: center; align-items: center; background: #f5f5f5;border:1px solid #d7d7d7; height: 60px; color:#333; font-size: 18px; font-weight: 500;}
.question-tab li:first-child a{border-right: 0;}
.question-tab li:last-child a{border-left: 0;}

.question-tab li.actived a{background: #276cad; border:1px solid #276cad; color:#fff}


.question-table input{height:45px;}
.question-table .selectBox{height:45px; line-height: 43px;}
.question-table .selectBox .optionList{top:46px;}
.question-table .explain {font-size: 14px;}
.question-table .question-input-wrap{display: flex; align-items: center; justify-content: flex-start;}
.question-table .question-input-wrap .comm-btn{height: 45px;}
.question-table .text-box{width: 100%;}
.question-table .text-box textarea{width: 100%; border:1px solid #d7d7d7; padding: 20px; height: 200px; box-sizing: border-box;}

.question-wrap .privacyText{margin-top: 60px;}


/*나의문의내역 questionList*/
/*.questionList-wrap{margin-top: 60px;}*/
.questionList-wrap.notice-list-wrap .notice-list a .subject{width: 70%;}
.questionList-wrap.notice-list-wrap .notice-list a .answer-box{width: 15%; 
text-align: center;}
.questionList-wrap.notice-list-wrap .notice-list a .answer{ display:inline-block;  font-size: 15px; color:#fff; padding:8px 12px; border-radius: 5px;}
.questionList-wrap.notice-list-wrap .notice-list a .answer1 {background: #276cad;}
.questionList-wrap.notice-list-wrap .notice-list a .answer2 {background: #f5b415;}

/*나의문의내역 뷰페이지 questView-answer*/
.questView-answer{width: 100%; border:1px solid #d7d7d7; padding: 30px; margin-top: 20px; background: #f5f5f5;}
.questView-answer p{line-height: 1.3;}