/*header*/
.m-header{display:none;}
header .infoHeader{width:100%; height:35px; line-height: 35px; background:#f5f5f5;}
header .infoHeader .infoInner{width:1400px; display:flex; justify-content: flex-end; align-content: center; margin:0 auto;}
header .infoHeader .infoInner li a{ font-size:13px; color:#888; padding:0 10px;}

.logo-wrap{width:1400px; margin:0 auto; height:100px; background:#fff; display:flex; justify-content: space-between; align-items: center;}
.logo-wrap .group-btn{display:flex; align-items: center; justify-content: flex-start; width:calc(100% - 85px);}
.logo-wrap .group-btn li a{width:120px; height:45px; display:flex; align-items: center; justify-content: center;  background:#fff; border:1px solid #276cad; text-align: center; color:#276cad; position:relative;}
.logo-wrap .group-btn li a:after{content:''; display:inline-block; position:absolute; top:50%; right:0; transform: translateY(-50%); width:1px; height:13px; background:#d7d7d7; }
.logo-wrap .group-btn li:first-child a{border-radius: 25px 0 0 25px; border-right: 0;}
.logo-wrap .group-btn li:nth-child(2) a{border-left:0; border-right:0px; position:relative;}
.logo-wrap .group-btn li:last-child a{border-radius:0 25px 25px 0; border-left: 0;}
.logo-wrap .group-btn li:last-child a:after{display: none;}

.logo-wrap .group-btn li a:hover{background:#276cad; color:#fff;}
.logo-wrap .group-btn li a:hover:after{display:none;}

.logo-wrap .logo a{display:inline-block; width:170px; }
.logo-wrap .logo a img{width:100%; /*image-rendering: -webkit-optimize-contrast !important;*/}

.logo-wrap .profile{display:flex; justify-content: flex-end; align-items: center; width:calc(100% - 85px);}
.logo-wrap .profile a{display:inline-block; width:45px; height:45px;}
.logo-wrap .profile a img{width:100%; border-radius: 50%; border:1px solid #d7d7d7;}
.logo-wrap .profile .text{margin-left:10px;}
.logo-wrap .profile .text .name{color:#333; font-weight:500;}
.logo-wrap .profile .text .name > span{color:#888; font-weight:400; font-size:14px;}
.logo-wrap .profile .text .groupName{font-size:14px; color:#888; margin-top:5px;}
.logo-wrap .profile .text .logout-text{font-size:14px; color:#888;}

/*주메뉴 영역 - 일반회원*/
.menu-wrap{width:100%; position:relative;}
.menu-wrap .menuBg{width:100%; width:100%; background:#f0f5f9; border-top:1px solid #d7d7d7; border-bottom:1px solid #d7d7d7; height:40px; position:absolute; bottom:0; left:0; z-index: -1;}


.menu-wrap .nav-wrap{width:1400px; height:60px; margin:0 auto; background:#fff; display:flex; align-items: center; justify-content: space-between; }

.menu-wrap .nav-wrap > li {width:16.667%; height:60px; border:1px solid #d7d7d7; border-width:1px 0 1px 0; line-height: 60px; text-align: center;}
.menu-wrap .nav-wrap > li:first-child {border-radius: 10px 0 0 0; overflow: hidden; border-left: 1px solid #d7d7d7;}
.menu-wrap .nav-wrap > li:last-child {border-radius:0 10px 0 0; border-right:1px solid #d7d7d7;  overflow: hidden;}
.menu-wrap .nav-wrap > li > a{display:inline-block; width:100%; height:100%; font-weight: 500; color:#333; }
.menu-wrap .nav-wrap > li:hover, .menu-wrap .nav-wrap > li.on {border-color:#276cad;}
.menu-wrap .nav-wrap > li:hover > a, .menu-wrap .nav-wrap > li.on > a{background:#276cad; color:#fff;}

/*.dep2-gnb{display:none;}*/

.dep2Wrap{position:absolute; top:59px; left:0; z-index: 9999999; width:100%; height:0; opacity: 0; transition: height:.5s, opacity .3s; background:#fff; overflow: hidden; box-shadow: 0 5px 10px 0 rgba(50,50,50,0.05); border:1px solid #276cad; border-width: 0; }
.dep2Wrap .dep2-gnb{width:1400px; margin:auto; padding-top:40px; display:flex; justify-content: flex-start;}
.dep2Wrap .dep2-gnb h2{width:20%; font-size:30px; font-weight:600; color:#276cad; text-align: left;}
.dep2Wrap .dep2-gnb > ul{width:20%; position:relative;}
.manager-nav .dep2Wrap .dep2-gnb > ul{width:16.66%; position:relative;}
.dep2Wrap .dep2-gnb > ul:before{content:''; display:inline-block; width:1px; height:200px; background:#d7d7d7; position:absolute; top:10px; left:0;}
.dep2Wrap .dep2-gnb > ul > li{line-height: 2; margin-bottom:10px;}
.dep2Wrap .dep2-gnb > ul > li > a{display:inline-block; font-weight:500; color:#333; width:100%; text-align: left; padding-left: 20px;}
.dep2Wrap .dep2-gnb > ul > li > a:hover{color:#276cad;}


/*주메뉴 영역 _ 관리자회원*/

.manager-menu-wrap .nav-wrap > li{width:14.286%;}
.manager-menu-wrap .nav-wrap > li.manager-nav {border-color:#276cad;}
.manager-menu-wrap .nav-wrap > li.manager-nav > a{background:#276cad; color:#fff; display:flex; justify-content: center; align-items: center;}
.manager-menu-wrap .nav-wrap > li.manager-nav > a > i{padding-left:6px; font-size:13px; vertical-align: middle; margin-bottom:-3px;}
.manager-menu-wrap .nav-wrap > li.manager-nav.on > a > i{transform:translate(6px, 0px) rotate(180deg);}

.manager-menu-wrap .nav-wrap > li.manager-nav ul > li > ul > li > a{display:inline-block; width:100%; text-align: left; padding-left:20px; font-size:15px;}
.manager-menu-wrap .nav-wrap > li.manager-nav ul > li > ul > li > a:hover{color:#276cad;}


/*main영역*/
.auto{width:1400px; margin:100px auto;}
.m-main{display:none;}

.main-scheule-wrap{display:flex; align-items: flex-start; justify-content: space-between; }

.main-calendar{width:30%; border:1px solid #d7d7d7; border-radius: 10px; padding:50px 30px 30px; box-shadow: 3px 3px 10px 0 rgba(50,50,50,0.05);}
.main-calendar .main-cal-top{display:flex; align-items: center; justify-content: center;}
.main-calendar .main-cal-top .year-month{font-size:25px; font-weight:600; color:#333; padding:0 10px; margin-top:-3px;}
.main-calendar .main-cal-top button{padding:10px;}
.main-calendar .main-cal-top button i{font-size:20px; color:#c0c0c0;}
.main-calendar .daysWrap .days{display:flex; margin:30px 0 20px;} 
.main-calendar .daysWrap .days .day{width:calc(100% / 7); font-weight:500;} 

.sun{color:#dd3413 !important;}
.sat{color:#276cad !important;}

.main-calendar .daysWrap .dates{display:flex; flex-flow: row wrap; width:100%; font-weight:800; height:300px;}
.main-calendar .daysWrap .dates .date{width:calc(100% / 7); font-size:15px; font-family: 'roboto'; color:#666; font-weight:500;}
.main-calendar .daysWrap .dates .date span{display:inline-block; padding-top:10px; width:100%; height:100%; cursor:pointer; }
.main-calendar .daysWrap .dates .date:nth-child(7n+1) span{color:#dd3413;}
.main-calendar .daysWrap .dates .date:nth-child(7n) span{color:#276cad;}

.main-calendar .daysWrap .dates .date:hover span{color:#fff; position:relative;}
.main-calendar .daysWrap .dates .date:hover span:before{content:''; display:block; position:absolute; top:0; left:50%; transform: translateX(-50%); z-index: -2; width:35px; height:35px; border-radius: 50%; background:#f5b415;}
.main-calendar .daysWrap .dates .date .other {opacity: .4;}
.main-calendar .daysWrap .dates .date .today {color:#fff; position:relative;}
.main-calendar .daysWrap .dates .date .today:before {content:''; display:block; position:absolute; top:0; left:50%; transform: translateX(-50%); z-index: -1; width:35px; height:35px; border-radius: 50%; background:#276cad;}
.main-calendar .daysWrap .dates .date .this {position:relative;}
.main-calendar .daysWrap .dates .date:nth-child(7n) .this:after {content:''; display:inline-block; width:6px; height:6px; background:#42adc3; border-radius: 50%; position:absolute; top:46px; left:50%; transform: translateX(-50%);}
.main-calendar .daysWrap .dates .date:nth-child(7n+1) .this:after {content:''; display:inline-block; width:6px; height:6px; background:#f2b14a; border-radius: 50%; position:absolute; top:46px; left:50%; transform: translateX(-50%);}

.main-sch-info {border:1px solid #d7d7d7; border-radius: 10px; width:calc(70% - 30px); overflow: hidden; height:492px;}
.main-sch-info h4{height:70px; line-height: 70px; width:100%; padding:0 30px; background:#fefaee; color:#333; font-size:25px; font-weight:600; font-family: 'roboto';}
.main-schDetail-wrap {height:422px; overflow-y: auto; padding:0 30px;}
.main-schDetail-wrap .detail-list-wrap{padding-bottom: 50px;}
.main-schDetail-wrap .detail-list-wrap > li{position:relative;}
.main-schDetail-wrap .detail-list-wrap > li:after{content:''; display:block; width:100%; border-bottom:1px dashed #d7d7d7; position:absolute; bottom:0; left:0;}
.main-schDetail-wrap .detail-list-wrap > li:last-child:after{display:none;}
.main-schDetail-wrap .detail-list-wrap > li .list-inner{padding:25px 0; cursor:pointer;}
.main-schDetail-wrap .detail-list-wrap > li:last-child .list-inner{padding-bottom:0;}
.main-schDetail-wrap .detail-list-wrap > li .list-title{height:50px; width:calc(100% - 410px);}
.main-schDetail-wrap .detail-list-wrap > li .list-title .title{display:inline-block; font-size:20px; color:#333; font-weight:600; margin-top:5px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position:relative;  padding-right:20px;}
.main-schDetail-wrap .detail-list-wrap > li .list-title .title i{position:absolute; top:2px; right:0; font-size:15px; color:#c0c0c0;}
.main-schDetail-wrap .detail-list-wrap > li  .actived .list-title .title i{transform: rotate(180deg); top:2px;}


.main-schDetail-wrap .detail-list-wrap > li .list-title span{display:block; font-family: 'roboto'; font-size:14px; color:#888; font-weight:500; margin-top:6px;}


.main-schDetail-wrap ul.text-wrap {margin-top:10px; background:#f5f5f5; padding:0 30px;  display:none;}
.main-schDetail-wrap ul.text-wrap li {padding:30px 0; position:relative; display:flex; align-items: center; justify-content: flex-start;}
.main-schDetail-wrap ul.text-wrap li:after{content:''; display:block; width:100%; height:1px; background:#d7d7d7; position:absolute; bottom:0; left:0;}
.main-schDetail-wrap ul.text-wrap li:last-child:after{display:none;}
.main-schDetail-wrap ul.text-wrap li span.num{width:30px; font-size:14px; color:#888; font-family: 'roboto'; font-weight:500;}
.main-schDetail-wrap ul.text-wrap li .choir-text {width:calc(100% - 30px);}
.main-schDetail-wrap ul.text-wrap li .choir-text .choir{font-weight:500; margin-bottom:3px; line-height: 1.4;}
.main-schDetail-wrap ul.text-wrap li .choir-text .text{font-size:14px; color:#888; line-height: 1.3;}


.main-schDetail-wrap .detail-list-wrap > li .sch-btn{display:flex; justify-content: flex-end; align-items: center;position:absolute; top:25px; right:0; z-index: 99;}
.sch-btn button{border:none; background:none; width:120px; height:50px; border-radius: 5px; font-weight:400;}
.sch-btn button i{font-size:12px; vertical-align: middle; margin-bottom:2px; margin-left: 3px;}

.sch-btn button.yet-btn {border: 1px solid #276cad;color: #276cad;}
.sch-btn button.absence-btn {border: 1px solid #dd3413;color: #dd3413; margin: 0 10px;}
.sch-btn button.absence-btn.actived {background:#dd3413; color:#fff;}
.sch-btn button.practice-btn {background:#f5b415; color:#fff;}


.com-main-btn{margin-top:60px; text-align: center;}


a.com-btn {
    display: inline-block;
    width: 260px;
    height: 60px;
    line-height: 59px;
    color: #276cad;
    border: 1px solid #276cad;
    border-radius: 30px;
    font-weight: 500;
}

a.com-btn:hover {
    background: #276cad;
    color: #fff;
}

a.com-btn i {
    vertical-align: middle;
    font-size: 13px;
    margin-left: 5px;
    margin-bottom: 2px;
}



/*퀵메뉴*/
.sec-quickmenu {
    width: 100%;
    background: #f5f5f5;
    margin: 0 auto 120px;
}

.sec-quickmenu ul {
    width: 1400px;
    margin: 0 auto;
    padding: 80px 0;
    display: flex;
    justify-content: space-between;
}

.sec-quickmenu ul li {
    width: 100%;
    text-align: center;
}

.sec-quickmenu ul li a {
    display: inline-block;
    width: 100%;
    padding-top: 140px;
    position: relative;
    font-size: 20px;
    color: #333;
    font-weight: 500;
}

.sec-quickmenu ul li a:before {
    content: '';
    display: inline-block;
    width: 120px;
    height: 120px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    background-size: 100%;
    background-repeat: no-repeat;
}

.sec-quickmenu ul li:nth-child(1) a:before {
    background-image: url(../images/quickmenu01.png);
}

.sec-quickmenu ul li:nth-child(2) a:before {
    background-image: url(../images/quickmenu02.png);
}

.sec-quickmenu ul li:nth-child(3) a:before {
    background-image: url(../images/quickmenu03.png);
}

.sec-quickmenu ul li:nth-child(4) a:before {
    background-image: url(../images/quickmenu04.png);
}

.sec-quickmenu ul li:nth-child(5) a:before {
    background-image: url(../images/quickmenu05.png);
}

.sec-quickmenu ul li:nth-child(6) a:before {
    background-image: url(../images/quickmenu06.png);
}


/*공지사항*/

h3{font-size: 50px;font-weight: 300;color: #333;}
h3 .blue{font-weight: 600;}
.main-notice p.txt{padding-top:20px;}
.main-notice .notice-list {display: flex; justify-content: space-between; margin-top:60px; }
.main-notice .notice-list li{width:100%; margin:0 15px;}
.main-notice .notice-list li:first-child{margin-left:0;}
.main-notice .notice-list li:last-child{margin-right:0;}
.main-notice .notice-list li .notice-list-box{border:1px solid #d7d7d7; border-radius: 10px; padding:30px; box-shadow: 3px 3px 10px 0 rgba(50,50,50,0.05); text-align: left;}
.main-notice .notice-list li .notice-list-box span.notice-stitle{color: #276cad; font-weight: 500; font-size: 15px;}
.main-notice .notice-list li .notice-list-box p.n-title{font-size: 20px; margin: 15px 0; color: #333; font-weight: 500; line-height: 1.4em; height:2.8em; width: 100%; white-space: normal; overflow: hidden; text-overflow: ellipsis; display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical; word-wrap: break-word; }
.main-notice .notice-list li .notice-list-box p.n-txt{margin-bottom: 50px; line-height: 1.2em; height:3.6em; width: 100%;  white-space: normal; overflow: hidden; text-overflow: ellipsis; display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical; word-wrap: break-word;}
.main-notice .notice-list li .notice-list-box p.n-date{font-size: 14px; color: #c0c0c0; font-family: 'roboto'; font-weight: 500; display: inline-block; width: 100%;}
.main-notice .notice-list li .notice-list-box p.n-date span{float: right;}
.main-notice .notice-list li .notice-list-box p.n-date span i{color:#c0c0c0; font-size:14px;}
.main-notice .notice-list li .notice-list-box:hover{border:2px solid #276cad; margin-top:-10px; padding:29px;}
.main-notice .notice-list li .notice-list-box:hover p.n-date span {
    color: #276cad;
}

/*footer*/
footer{width: 100%; height: 230px; background:#333;}
footer .footerMenu{width: 100%; margin: 0 auto; border-bottom: 1px solid #444;}
footer .footerMenu ul{display:flex; justify-content: center;}
footer .footerMenu ul > li >a{display:inline-block; padding: 17px 20px ;color:#888; font-size: 15px; }
footer .footerMenu ul > li >a:hover{color:#c0c0c0;}
footer .footerInner{padding-top: 30px;}
footer .footerInner p{font-size: 14px; color:#888; line-height: 1.4;}
footer .footerInner p .bar{content:''; display:inline-block; width:1px; height:10px; background: #666; margin: 0 14px 0 15px;}
footer .footerInner .copyright{font-size: 12px; padding-top: 5px;}
.footer-menu{display:none;}






/*반응형 css*/
@media screen and (max-width: 1480px) {
    /* ruleset for 1261px - 1480px */
    
    /*header*/
    .auto{width: 1200px;}
    header .infoHeader .infoInner{width:1200px;}
    .logo-wrap {width: 1200px;}
    .menu-wrap .menuBg{height:30px;}
    .menu-wrap .nav-wrap{width: 1200px; height:50px;}
    .menu-wrap .nav-wrap > li{height:50px; line-height: 50px;}
    .dep2Wrap{top:49px; }
    .dep2Wrap .dep2-gnb{width:1200px;}
    .dep2Wrap .dep2-gnb h2{font-size: 25px;}
    
    /*main*/
    .main-calendar{width:35%; }
    .main-calendar .main-cal-top .year-month{font-size: 23px;}
    .main-calendar .main-cal-top button i{font-size: 18px;}
    .main-calendar .daysWrap .days .day{font-size: 15px;}
    .main-calendar .daysWrap .dates .date{font-size: 14px;}
    .main-calendar .daysWrap .dates .date:hover span:before{width: 32px;height: 32px;}
    .main-calendar .daysWrap .dates .date .today:before{width: 32px; height: 32px;}
    
    .main-sch-info{width:calc(65% - 30px);}
    .main-sch-info h4{font-size:23px;}
    .main-schDetail-wrap .detail-list-wrap > li .list-title{width: calc(100% - 350px);}
    .main-schDetail-wrap .detail-list-wrap > li .list-title .title{font-size: 18px;}
    .sch-btn button{width: 100px;}
    .sec-quickmenu ul{width: 1200px;}
    .sec-quickmenu ul li a{font-size: 18px;}
    
    h3{font-size: 45px;}
    .main-notice .notice-list li .notice-list-box p.n-title{font-size: 18px;}
    
}



@media screen and (max-width: 1260px) {
    /* ruleset for 1025px - 1260px */
    
    /*header*/
    .auto{width: 94%; margin:80px auto;}
    header .infoHeader .infoInner{width: 94%;}
    .logo-wrap{width: 94%;}
    .logo-wrap .group-btn li a{font-size: 15px; width: 105px;}
    .logo-wrap .logo a{width: 160px;}
    .logo-wrap .profile .text .name{font-size: 15px;}
    .logo-wrap .profile .text .groupName,.logo-wrap .profile .text .name > span{font-size: 13px;}
    .menu-wrap .nav-wrap{width: 94%;}
    .menu-wrap .nav-wrap > li > a{font-size: 15px; letter-spacing: -0.2px;}
    .dep2Wrap .dep2-gnb{width: 94%;}
    .dep2Wrap .dep2-gnb h2{font-size: 23px;}
    .dep2Wrap .dep2-gnb > ul > li > a{font-size: 15px;}
    .manager-menu-wrap .nav-wrap > li.manager-nav ul > li > ul > li > a{font-size: 14px;}
    .dep2Wrap .dep2-gnb > ul > li{line-height: 1.8;}
    
    /*main*/
    .main-calendar{padding:30px 20px 30px;}
    .main-calendar .main-cal-top .year-month{font-size: 20px;}
    .main-calendar .main-cal-top button i{font-size: 16px;}
    .main-calendar .daysWrap .days{margin: 20px 0 10px;}
    .main-calendar .daysWrap .days .day{font-size: 14px;}
    .main-calendar .daysWrap .dates .date{font-size: 13px;}
    .main-calendar .daysWrap .dates .date span{padding-top: 8px;}
    .main-calendar .daysWrap .dates .date:hover span:before{width: 30px; height: 30px;}
    .main-calendar .daysWrap .dates .date .today:before{width: 30px;height: 30px;}
    
    .main-calendar .daysWrap .dates .date:nth-child(7n) .this:after{top:36px;}
    .main-calendar .daysWrap .dates .date:nth-child(7n+1) .this:after{top:36px;}
    
    .main-sch-info{width:calc(65% - 20px); height: 450px;}
    .main-sch-info h4{font-size: 20px; height:60px; line-height: 60px;}
    .main-schDetail-wrap{padding: 0 30px; height: 390px;}
    .sch-btn button{font-size: 15px; width: 90px;}
    .sch-btn button i{font-size: 10px;}
    .main-schDetail-wrap .detail-list-wrap > li .list-title{width:calc(100% - 320px);}

    .main-schDetail-wrap ul.text-wrap li .choir-text .choir{font-size: 15px;}
    .main-schDetail-wrap ul.text-wrap li span.num{font-size: 13px;}
    a.com-btn{font-size: 15px; width: 240px; height:55px; line-height: 54px;}
    
    .sec-quickmenu{margin:0 auto 80px;}
    .sec-quickmenu ul{width: 94%; padding:60px 0;}
    .sec-quickmenu ul li a{font-size: 16px; padding-top: 130px;}
    .sec-quickmenu ul li a:before{width: 110px;height: 110px; image-rendering: -webkit-optimize-contrast; }
    
    h3{font-size: 40px;}
    .main-notice p.txt{font-size: 15px;}
    .main-notice .notice-list li{margin:0 10px;}
    
    .main-notice .notice-list li .notice-list-box{padding: 25px;}
    .main-notice .notice-list li .notice-list-box:hover{padding:24px;}
    .main-notice .notice-list li .notice-list-box span.notice-stitle{font-size: 14px;}
    .main-notice .notice-list li .notice-list-box p.n-title{font-size: 16px;}
    .main-notice .notice-list li .notice-list-box p.n-txt{font-size: 15px; margin-bottom: 30px;}
    .main-notice .notice-list li .notice-list-box p.n-date span i{font-size: 11px;}
    
    
    
    /*footer*/
    footer{height: 200px;}
    footer .footerMenu ul > li >a{font-size: 14px;}
    footer .footerInner{width: 94%; margin:auto;}
    footer .footerInner p{font-size: 13px;}
    
}




@media screen and (max-width: 1024px) {
    /* ruleset for 961px - 1024px */
    .pc-main{display:none;}
    .m-main{display:block;}
    .main-scheule-wrap{flex-wrap: wrap;}
    .main-calendar-m{width: 100%; border:none; margin-bottom:20px; box-shadow: none; margin:0 30px; padding:0;}
    .main-calendar-m .main-cal-top .year-week{font-size: 30px; color:#333; display:inline-block; font-weight: 600; font-family: 'roboto','Noto Sans Kr'; margin: 0 30px;}
    .main-calendar-m .main-cal-top button{vertical-align: middle; margin-top:-5px;}
    .main-calendar-m .main-cal-top button i{font-size: 22px;}
    
    .main-calendar .daysWrap .days {margin:40px 0 20px;}
    .main-calendar .daysWrap .days .day{font-size:16px;}
    .main-calendar .daysWrap .dates{height: 80px;}
    .main-calendar .daysWrap .dates .date{font-size: 16px; text-align: center;}
    .main-calendar .daysWrap .dates .date span{padding-top: 12px;}
    .main-calendar .daysWrap .dates .date:hover span:before{width: 40px; height: 40px;}
    .main-calendar .daysWrap .dates .date .today:before{width: 40px;height: 40px;}
    .main-calendar .daysWrap .dates .date:nth-child(7n+1) .this:after{top:46px;}
    .main-calendar .daysWrap .dates .date:nth-child(7n) .this:after{top:46px;}
    
    .main-sch-info{width: 100%; height: 420px;}
    .main-schDetail-wrap .detail-list-wrap > li .list-title{width: calc(100% - 350px);}

    .sch-btn button{width: 100px;}
    .main-schDetail-wrap ul.text-wrap{padding:0 20px;}
    .main-schDetail-wrap ul.text-wrap li{padding:20px 0;}
    .main-schDetail-wrap ul.text-wrap li .choir-text .choir{font-size: 16px;}
    
    
    /*공지사항*/
    .main-notice{width:100%; margin-bottom:80px;}
    .main-notice-wrap{width: 97%; margin-left:3%; margin-top: 50px; height: 100%; position: relative; padding-bottom:52px;}
    .main-notice-wrap  .main-notice-slide{text-align: left; font-size: 18px; background: #fff; margin-right:30px; width: 65%; border:1px solid #d7d7d7; border-radius: 20px; padding:50px; box-shadow: 3px 3px 10px 0px rgba(50, 50, 50, 0.05);

      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
    .swiper-slide-active{border:2px solid #276cad;}
    .main-notice-wrap .notice-list-box .notice-stitle{font-size: 16px; color:#276cad;font-weight: 600;}
    .main-notice-wrap .notice-list-box .n-title{font-size: 20px;font-weight: 600;color: #333; margin: 30px 0 20px;
    width: 100%;
    line-height: 1.3em;
    height: 2.6em;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    }
    .main-notice-wrap .notice-list-box .n-txt{font-size: 16px; font-weight: 400;margin-bottom: 50px;
        width: 100%;
        line-height: 1.4em;
        height: 4.2em;
        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        word-wrap: break-word;

    }
    .main-notice-wrap .notice-list-box .n-date{font-size: 16px;color:#c0c0c0; font-family: 'roboto';}
    .main-notice-wrap .notice-list-box .n-date i{float:right; color:#c0c0c0;}
    .swiper-pagination{bottom:0px !important;}
    .swiper-pagination-bullet{background: #d7d7d7; opacity: 1; width: 12px;height: 12px; margin: 0 8px!important;}
    .swiper-pagination-bullet-active {background: #276cad;}
}


@media screen and (max-width: 960px) {
    /* ruleset for 769px - 960px*/
    
    /*header*/
    .pc-header{display:none;}
    .m-header{display:block;}
    
    header .headerWrap{position:relative;}
    header .infoHeader{width:100%; height:40px; line-height: 40px; background:#276cad;}
    header .infoHeader .infoInner li a{color:#fff; font-size: 14px;}
    header .infoHeader .infoInner li:after{content:''; display:inline-block; width:1px; height:10px; background:rgba(255,255,255,0.5);}
    header .infoHeader .infoInner li:last-child:after{display:none;}

    .logoArea-wrap{width:100%; border-bottom:1px solid #d7d7d7;  }
    .logoArea-wrap .logoArea-Inner{width: 94%; margin:auto; display:flex; justify-content: space-between; align-items: center;  height:100px;}
    .logoArea-wrap .logoArea-Inner h1{width:26%;}
    .logoArea-wrap .logoArea-Inner h1 a{display:inline-block; width:100%; height:100%;}
    .logoArea-wrap .logoArea-Inner h1 img{width:100%;}
    .logoArea-wrap .menuArea {display:flex; justify-content: flex-end; align-items: center;}
    .logoArea-wrap .menuArea .profileimg img{width:55px; height:55px; bordeR:1px solid #d7d7d7; border-radius: 50%; overflow: hidden;}
    .logoArea-wrap .menuArea .gnbBtn{margin-left:15px; height:55px;}
    .logoArea-wrap .menuArea .gnbBtn a{display:inline-block; width:45px; height:36px; position:relative; top:10px; right:3%; z-index: 99999;}
    .logoArea-wrap .menuArea .gnbBtn a span{display:inline-block;width:100%; height:4px; background:#333; border-radius: 4px; position:absolute; left:0;}
    .logoArea-wrap .menuArea .gnbBtn a span:nth-child(1){top:0;}
    .logoArea-wrap .menuArea .gnbBtn a span:nth-child(2){top:16px;}
    .logoArea-wrap .menuArea .gnbBtn a span:nth-child(3){bottom:0;}
    
    
    /*주메뉴*/
    header .menuWrap{width:100%; background:#fff; position:fixed; top:0; bottom:0; right:-100%; z-index: 9999999999999; transition:right .3s; }
    header .menuWrap.actived{right:0;}
    header .menuWrap .menuWrap-inner{position:absolute; top:0; right:0; width: 100%; background: #fff; overflow-y: auto; height:100%;}
    header .menuWrap .menu-myInfo-wrap{display:flex; align-items: center; justify-content: flex-end; width:94%; height:100px;}
    header .menuWrap .menu-myInfo-wrap .logoutArea{display:flex; align-items: center; justify-content: flex-end; margin-right:20px;}
    header .menuWrap .menu-myInfo-wrap .logoutArea li a{font-size: 14px; color:#888; padding:0 10px;}
    header .menuWrap .menu-myInfo-wrap .logoutArea li:after{content:''; display:inline-block; width:1px; height:10px; background:#d7d7d7;}
    header .menuWrap .menu-myInfo-wrap .logoutArea li:last-child:after{display:none;}
    header .menuWrap .menu-myInfo-wrap .close i{font-size:45px; color:#333;}
    
    .menu-myInfo .pfWrap{border-bottom: 30px solid #f0f5f9;}
    .menu-myInfo .pfName{width: 94%;margin:auto; display:flex; justify-content: flex-start; align-items: center;}
    .menu-myInfo .pfName > a{display:inline-block; width:160px; height:160px;}
    .menu-myInfo .pfName > a img{width:100%; height:100%; border-radius: 50%; border:1px solid #d7d7d7; object-fit: cover;}
    .menu-myInfo .pfName .pfText{width:calc(100% - 160px); padding-left:30px;}
    .menu-myInfo .pfName .pfText .name{width:100%; overflow: hidden; display:flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; height:35px;}
    .menu-myInfo .pfName .pfText .name p{font-size: 30px; color:#333; font-weight: 600;display:inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width:100%; padding-bottom: 5px;}
    .menu-myInfo .pfName .pfText .name.hasMg p{ max-width: calc(100% - 110px); margin-right:5px;}
    .menu-myInfo .pfName .pfText .name span {display:inline-block;font-size: 15px; font-weight: 400; padding: 5px 10px 6px; background: #276cad;color: #fff; border-radius: 5px; margin-left: 5px;vertical-align: bottom; margin-bottom: 6px;}
    .menu-myInfo .pfName .pfText .choir {font-size: 18px;color:#888; font-weight: 400; margin-top: 5px;}
   
    
    .m-groupBtn{width: 94%; display:flex; align-items: center; justify-content: space-between; margin:60px auto;}
    .m-groupBtn li{width:33.33%; text-align: center; position:relative;}
    .m-groupBtn li:after{content: '';display:inline-block; width: 1px;height: 100%;background: #d7d7d7;position: absolute; right: 0;top:0;}
    .m-groupBtn li:last-child:after {display:none;}
    .m-groupBtn li a {display:inline-block; padding-top:90px; padding-bottom: 10px; width:100%; font-size: 18px;}
    .m-groupBtn li a:before {content: ''; display:inline-block;width: 60px;height: 70px;position:absolute; top:10px; left: 50%; transform: translateX(-42%);background-size:contain; background-repeat: no-repeat;}
    .m-groupBtn li:nth-child(1) a:before {
        background-image: url('../images/info_group.png');
    }

    .m-groupBtn li:nth-child(2) a:before {
        background-image: url('../images/join_group.png');
    }

    .m-groupBtn li:nth-child(3) a:before {
        background-image: url('../images/create_group.png');
    }
    
    
    .nav-wrap{width: 100%; margin-top: 60px; padding-bottom: 100px; position:relative;}
    .nav-wrap .nav-wrap-inner{width: 94%; margin:auto;}
    
    .nav-wrap .dep1List > li > a {display: inline-block; width: 100%; padding: 30px 0; font-size: 23px; font-weight: 500; color:#333;}
    .nav-wrap .dep1List > li.actived > a{color:#276cad;}
    .nav-wrap .dep1List > li:first-child > a {padding-top: 0;}
    .nav-wrap .dep1List > li > a > i {color:#c0c0c0; float: right;font-size: 18px;}
    .nav-wrap .m-dep1List > li.actived > a {color:#276cad;}
    .m-dep2Wrap {position:absolute; top:0; right:0; transition:right .5s; width: 65%;height: 100%; background: #fff; height:auto; min-height: 900px;}
    .m-dep2Wrap:before {content:''; display:inline-block; width: 1px;height:100%; background: #d7d7d7; position:absolute; bottom:0; left:0;}
    .m-dep2Wrap .m-dep2-gnb ul > li > a {display:inline-block; font-size: 20px; color:#333; font-weight: 500; padding:30px 0; width: 100%; padding-left: 30px;}
    .m-dep2Wrap .m-dep2-gnb ul:first-child > li:first-child > a {padding-top: 0;}
    .m-dep2Wrap .m-dep2-gnb ul > li > a > i {color:#c0c0c0; float: right; margin-right: 4.5%;font-weight: 900;font-size: 16px;}
    .m-dep2Wrap .m-dep2-gnb ul > li.actived > a {color:#276cad;}
    .m-dep2Wrap .m-dep2-gnb ul > li.actived > a > i {color:#276cad; transform: rotate(180deg);}
    .m-dep2Wrap .m-dep2-gnb ul li ul {background: #f0f5f9;display:none;}
    .m-dep2Wrap .m-dep2-gnb ul > li.actived ul {display: block;}


    .m-dep2Wrap .m-dep2-gnb ul li ul > li > a {font-size: 18px;font-weight: 400; color: #666; padding:25px 0; padding-left: 30px;}

    li.m-gnb-nav01 .m-dep2Wrap {display: none;}

    li.m-gnb-nav06 .m-dep2Wrap {display: none;}

    li.m-gnb-nav07 .m-dep2Wrap {display: none;}

    
    /*메인*/
    .sec-quickmenu ul{flex-wrap:wrap;}
    .sec-quickmenu ul li{width: 33.33%; margin-bottom:40px;}
    .sec-quickmenu ul li:nth-last-child(-n+3){margin-bottom: 0;}
    .main-notice-wrap .notice-list-box .n-title{font-size: 18px;}
    .main-notice-wrap .notice-list-box .notice-stitle{font-size: 14px;}
    .main-notice-wrap .notice-list-box .n-txt{font-size: 15px;}
    .main-notice-wrap .notice-list-box .n-date{font-size: 14px;}
    .main-notice-wrap .notice-list-box .n-date i{font-size: 14px;}
    
    /*하단메뉴*/
    footer{margin-bottom: 90px;}
    .footer-menu{position:fixed; bottom:0; left:0; z-index: 99999999; background: #fff; border-top:1px solid #d7d7d7; box-shadow: 3px 3px 10px 5px rgba(50,50,50,0.05); width:100%; height:90px; display:flex; justify-content: space-between; align-items: center;}
    .footer-menu li{width:20%; height:100%;}
    .footer-menu li:nth-child(5) a{font-family: 'roboto';}
    .footer-menu li a{display:block; width: 100%; text-align: center; padding-top: 55px; color:#888; position:relative; height: 100%; font-size: 14px;}
    .footer-menu li a:before{content: ''; display:block; position:absolute; left:50%; transform: translateX(-50%);background-size: 100%; background-repeat: no-repeat;}
    
    .footer-menu li:nth-child(1) a:before{background-image: url('../images/fm_icon01.png'); height: 36px; width: 24px;top:22px;}
    .footer-menu li:nth-child(2) a:before{background-image: url('../images/fm_icon02.png'); height: 35px;width: 26px; top:19px;}
    .footer-menu li:nth-child(3) a:before{background-image: url('../images/fm_icon03.png'); height: 33px; width: 24px; top:23px;}
    .footer-menu li:nth-child(4) a:before{background-image: url('../images/fm_icon04.png'); height: 37px;  width: 28px; left: calc(50% + 2px); top:22px;}
    .footer-menu li:nth-child(5) a:before{background-image: url('../images/fm_icon05.png'); height: 32px; width: 28px; left: calc(50% + 2px); top:24px;}

}


@media screen and (max-width: 768px) {
    /* ruleset for 577px - 768px*/
    
    /*header*/
    .logoArea-wrap .logoArea-Inner{height:80px;}
    .logoArea-wrap .logoArea-Inner h1{width:28%;}
    .logoArea-wrap .menuArea .profileimg img{width: 50px; height: 50px;}
    .logoArea-wrap .menuArea .gnbBtn{height: 50px;}
    .logoArea-wrap .menuArea .gnbBtn a{width: 40px; height: 30px;}
    .logoArea-wrap .menuArea .gnbBtn a span:nth-child(2){top:13px;}
    
    /*주메뉴*/
    header .menuWrap .menu-myInfo-wrap{height:80px;}
    .menu-myInfo .pfName > a{width: 120px;height: 120px;}
    .menu-myInfo .pfName .pfText{width:calc(100% - 120px); padding-left: 20px;}
    .menu-myInfo .pfName .pfText .name{height: 28px;}
    .menu-myInfo .pfName .pfText .name p{font-size: 23px;}
    .menu-myInfo .pfName .pfText .name.hasMg p {max-width:calc(100% - 95px);}
    .menu-myInfo .pfName .pfText .name span{font-size: 14px; margin-bottom: 3px;}
    .menu-myInfo .pfName .pfText .choir{font-size: 16px;}
    .m-groupBtn{margin: 40px auto;}
    .m-groupBtn li a{font-size: 16px; padding-top: 75px;}
    .m-groupBtn li a:before{width: 50px; height: 60px;}
    
    .nav-wrap .dep1List > li > a{font-size: 20px; padding:26px 0;}
    .nav-wrap .dep1List > li > a > i{font-size: 16px;}
    .m-dep2Wrap .m-dep2-gnb ul > li > a{font-size: 18px;  padding:26px 0; padding-left:30px;}
    .m-dep2Wrap .m-dep2-gnb ul li ul > li > a{font-size: 16px; padding: 20px 0; padding-left:30px;}
    
    
    /*메인*/
    .main-calendar-m{margin: 0 20px;}
    .main-calendar-m .main-cal-top .year-week{font-size: 23px;}
    .main-calendar-m .main-cal-top button{margin-top: -7px;}
    .main-calendar-m .main-cal-top button i{font-size: 18px;}
    .main-calendar .daysWrap .days .day{font-size: 14px;}
    .main-calendar .daysWrap .dates .date{font-size: 14px;}
    .main-calendar .daysWrap .dates .date span{padding-top: 14px;}
    
    .main-sch-info h4{font-size: 18px;}
    .sch-btn button{font-size: 14px; width: 80px;}
    .main-schDetail-wrap .detail-list-wrap > li .list-title{width: calc(100% - 290px);}
    .main-schDetail-wrap .detail-list-wrap > li .list-title .title{ font-size: 18px;}
    .main-schDetail-wrap .detail-list-wrap > li .list-title .title i{font-size: 13px;}
    
    .main-schDetail-wrap ul.text-wrap li .choir-text .choir{font-size: 15px;}
    .com-main-btn{margin-top: 40px;}
    a.com-btn{font-size: 14px; width: 220px; height: 50px; line-height: 49px;}
    a.com-btn i{font-size: 10px; margin-bottom: 4px;}
    
    .sec-quickmenu ul li a{padding-top: 120px; font-size: 15px;}
    .sec-quickmenu ul li a:before{width: 100px;height: 100px;}
    
    h3{font-size: 35px;}
    .main-notice p.txt{padding-top: 15px; font-size: 14px;}
    .main-notice-wrap .main-notice-slide{padding: 30px; width: 65.5%; margin-right: 20px;}
    .main-notice-wrap .notice-list-box .notice-stitle{font-size: 13px;}
    .main-notice-wrap .notice-list-box .n-title{font-size: 16px;}
    .main-notice-wrap .notice-list-box .n-txt{font-size: 14px;}
    .swiper-pagination-bullet{width: 10px;height: 10px;}
    
}


@media screen and (max-width: 576px) {
    /* ruleset for 375px - 576px */
    
    /*header*/
    header .infoHeader{height: 35px;line-height: 35px;}
    header .infoHeader .infoInner li a{font-size: 13px;}
    .logoArea-wrap .logoArea-Inner{height: 70px;}
    .logoArea-wrap .logoArea-Inner h1{width: 140px;}
    .logoArea-wrap .menuArea .profileimg img{width: 45px;height: 45px;}
    .logoArea-wrap .menuArea .gnbBtn{height: 45px;}
    .logoArea-wrap .menuArea .gnbBtn a{width: 35px; height: 25px;}
    .logoArea-wrap .menuArea .gnbBtn a span{height: 3px;}
    .logoArea-wrap .menuArea .gnbBtn a span:nth-child(2){top:11.5px;}
    
    header .menuWrap .menu-myInfo-wrap{height:40px; margin-top:20px;}
    header .menuWrap .menu-myInfo-wrap .close i{font-size: 40px;}
    header .menuWrap .menu-myInfo-wrap .logoutArea{margin-right: 10px;}
    header .menuWrap .menu-myInfo-wrap .logoutArea li:after{vertical-align: middle; margin-top:-6px;}
    header .menuWrap .menu-myInfo-wrap .logoutArea li a{font-size: 13px;}
    
    .menu-myInfo .pfName > a{width: 80px;height: 80px;}
    .menu-myInfo .pfWrap{border-bottom: 10px solid #f0f5f9;}
    .menu-myInfo .pfName .pfText{width:calc(100% - 80px);}
    .menu-myInfo .pfName .pfText .name{height: 26px;}
    .menu-myInfo .pfName .pfText .name p{font-size: 18px;}
    .menu-myInfo .pfName .pfText .name span{font-size: 12px;}
    .menu-myInfo .pfName .pfText .choir{font-size: 14px; margin-top: 0;}
    .menu-myInfo .pfName .pfText .name.hasMg p{max-width:calc(100% - 90px);}
    .m-groupBtn{margin:30px auto;}
    .m-groupBtn li a{font-size: 14px; padding-top: 60px;}
    .m-groupBtn li a:before{width: 35px; height: 50px;}
    
    .nav-wrap{margin-top: 40px; padding-bottom: 80px;}
    
    .nav-wrap .dep1List > li > a{font-size: 18px; padding:20px 0;}
    .nav-wrap .dep1List > li > a > i{font-size: 14px;}
    .m-dep2Wrap{width:60%;}
    .m-dep2Wrap .m-dep2-gnb ul > li > a{font-size: 16px; padding:20px 0; padding-left: 20px;}
    .m-dep2Wrap .m-dep2-gnb ul > li > a > i{font-size: 14px;}
    .m-dep2Wrap .m-dep2-gnb ul li ul > li > a{font-size: 14px; padding:15px 0; padding-left:20px;}
    
    
    /*메인*/
    .main-calendar-m{margin: 0;}
    .main-calendar-m .main-cal-top .year-week{margin: 0 10px; font-size: 20px;}
    .main-calendar .daysWrap .days{margin:20px 0 15px;}
    .main-calendar .daysWrap .days .day{font-size: 13px;}
    .main-calendar .daysWrap .dates .date{font-size: 13px;}
    .main-calendar .daysWrap .dates .date span{padding-top: 12px;}
    .main-calendar .daysWrap .dates .date:hover span:before{width: 35px;height: 35px;}
    .main-calendar .daysWrap .dates .date .today:before{width: 35px;height: 35px;}
    
    .main-sch-info{height: 320px;}
    .main-sch-info h4{font-size: 16px; height:50px; line-height: 50px; padding:0 20px;}
    .main-schDetail-wrap{padding:0 20px; height: 270px;}
    .main-schDetail-wrap .detail-list-wrap > li .list-inner{padding:20px 0;}
    .main-schDetail-wrap .detail-list-wrap > li .list-title{padding-bottom:95px; width: 100%}
    .main-schDetail-wrap .detail-list-wrap > li .list-title .title{width: 100%; font-size: 16px;}
    .main-schDetail-wrap .detail-list-wrap > li .list-title span{font-size: 13px;}
    .m-main .main-schDetail-wrap .detail-list-wrap > li .sch-btn{top:70px; width: 100%;}
    .sch-btn button{width:33.33%; height:40px;}
    
    
    .main-schDetail-wrap ul.text-wrap li{padding: 15px 0;}
    .main-schDetail-wrap ul.text-wrap li span.num{font-size: 12px;}
    .main-schDetail-wrap ul.text-wrap li .choir-text .choir{font-size: 14px;}
    .main-schDetail-wrap ul.text-wrap li .choir-text .text{font-size: 13px;}
    
    a.com-btn{height:45px; line-height: 44px; width: 200px;}
    .sec-quickmenu ul{padding: 40px 0;}
    .sec-quickmenu ul li{margin-bottom: 30px;}
    .sec-quickmenu ul li:nth-last-child(-n+3){margin-bottom: 0;}
    .sec-quickmenu ul li a{padding-top: 100px; font-size: 14px;}
    .sec-quickmenu ul li a:before{width: 80px;height: 80px;}
    
    h3{font-size: 28px;}
    .main-notice p.txt{padding-top: 10px; letter-spacing: -0.2px;}
    .main-notice-wrap{margin-top: 30px;}
    .main-notice-wrap .main-notice-slide{padding: 20px;}
    .main-notice-wrap .notice-list-box .n-title{margin:15px 0;}
    .main-notice-wrap .notice-list-box .n-txt{margin-bottom: 30px;}
    
    /*footer*/
    footer .footerMenu ul > li >a{font-size: 13px; padding: 15px 5px; letter-spacing: -0.2px; }
    footer .footerInner{padding-top: 20px;}
    footer .footerInner p{font-size: 12px; letter-spacing: -0.2px;}
    footer .footerInner .copyright{font-size: 11px;letter-spacing: -0.2px; }
    
    /*모바일 하단메뉴*/
    footer{margin-bottom: 65px;}
    .footer-menu{height: 65px;}
    .footer-menu li a{font-size: 11px; padding-top: 43px;}
    .footer-menu li:nth-child(1) a:before{width: 17px; top:16px;}
    .footer-menu li:nth-child(2) a:before{width: 18px; top:16px;}
    .footer-menu li:nth-child(3) a:before{width: 18px; top:16px;}
    .footer-menu li:nth-child(4) a:before{width: 22px; top:14px;}
    .footer-menu li:nth-child(5) a:before{width: 20px; top:16px; left: calc(50% + 1px);}
}