@charset "UTF-8";
#container * {box-sizing:border-box;}

#container {  position:relative; font-family:'Paperlogy','나눔고딕',sans-serif; overflow-x:hidden;}
.container:after { clear:both; float:none; content:""; display:block; height:0;}


.mtopsection {position:relative; height:1227px; }
.mtopsection .inner {position:relative;}
.mtopsection .inner > * {position:relative; z-index:1;}
.mtopsection .inner:before {content:''; display:block; width:2500px; height:1227px; background:url(/reserve/images/main/mbg-top.png) no-repeat 0 0; z-index:0; position:absolute; top:0; left:-310px;}

.mtopsection .mcopy {text-align:center; padding-top:80px;}
.reser-service {display:flex; flex-wrap:wrap; justify-content:space-between; margin-top:70px;}
.reser-service dl {width:calc(20% - 20px); background:#fff; border-radius:30px; padding:30px; position:relative; transition:all .2s;}
.reser-service dl dt {position:absolute; top:-20px; left:10%; border-radius:10px 30px 30px 30px;  width:80%;padding:10px 20px; color:#fff; font-size:20px;}
.reser-service dl dt:after {content: "\eb80"; display:block; width:18px; height:18px; position:absolute; top:calc(50% - 17px); right:20px; font-family: remixicon !important; font-style: normal; -webkit-font-smoothing: antialiased;}
.reser-service dl dd {font-size:17px; margin-top:30px;}
.reser-service dl dd li {position: relative;  padding-left: 16px;}
.reser-service dl dd li a {transition:all .2s; }
.reser-service dl dd li:before {content:''; display:block; width:8px; height:8px; background:#262626; border-radius:50%; transform:translateY(-3px); margin-right:8px; transition:all .2s; position: absolute; left: 0; top: 13px;}

.reser-service dl.service01 dt {background: linear-gradient(45deg,  #a462b4 0%, #c4527e 100%);}
.reser-service dl.service02 dt {background: linear-gradient(45deg,  #028f49 0%, #15367f 100%);}
.reser-service dl.service03 dt {background: linear-gradient(45deg,  #7a3c91 0%, #464599 100%);}
.reser-service dl.service04 dt {background: linear-gradient(45deg,  #fb8859 0%, #e71d76 100%);}
.reser-service dl.service05 dt {background: linear-gradient(45deg,  #232c6b 0%, #9f0d2a 100%);}

.reser-service dl:hover {background:#000; transform:scale(1.1);}
.reser-service dl.service01:hover dt {background:#fff; color:#a462b4;}
.reser-service dl.service02:hover dt {background:#fff; color:#15367f;}
.reser-service dl.service03:hover dt {background:#fff; color:#464599;}
.reser-service dl.service04:hover dt {background:#fff; color:#e71d76;}
.reser-service dl.service05:hover dt {background:#fff; color:#9f0d2a;}

.reser-service dl:hover dd li a {color:#fff;}
.reser-service dl:hover dd li a:before {background:#fff;}

.reser-service dl.service01:hover {background: linear-gradient(-225deg,  #a462b4 0%, #c4527e 50%);}
.reser-service dl.service02:hover {background: linear-gradient(-225deg,  #028f49 0%, #15367f 50%);}
.reser-service dl.service03:hover {background: linear-gradient(-225deg,  #7a3c91 0%, #464599 50%);}
.reser-service dl.service04:hover {background: linear-gradient(-225deg,  #fb8859 0%, #e71d76 50%);}
.reser-service dl.service05:hover {background: linear-gradient(-225deg,  #232c6b 0%, #9f0d2a 50%);}



/*강좌 및 교육 예약*/
.reserve { position: relative; display:flex; flex-wrap:wrap; justify-content:space-between; margin-top:130px;} 
.reserve .category { display: block; } 
.reserve .category li { width: 135px; margin-top:3px;}
.reserve .category li a { display: block; color:#272c42; font-size:16px; border-bottom:2px solid #d3cbd7; position:relative; line-height: 46px; font-weight:500;}
.reserve .category li:last-child a {border-bottom:0;}
.reserve .category li.active a {font-weight:800; text-decoration:none; color:#272c42;}
.reserve .category li:first-child a:after {content:''; height:2px; width:20px; background:#272c42; position:absolute; bottom:-2px; left:0;}
.reserve .category li.active a span:after {content:''; display:inline-block; width:8px; height:8px; border-radius:50%; background:#272c42; transform:translateY(-10px); margin-left:5px;}

.lec-wrap {position:relative;}
.lec-wrap .lec-tit{display:flex; justify-content:space-between; flex-wrap:wrap; align-items:center; position:relative;}
.lec-wrap .lec-tit:before {content:''; display:block; width:450px; height:1px; background:#dedede; position:absolute; top:50%; left:480px;}
.lec-wrap .lec-tit h3 {font-size:34px; font-weight:800;}
.lec-wrap .lec-tit h3 em {color:#3251c2; font-weight:800;}
.lec-wrap .lec-tit .ctr_btn {display:flex;}
.lec-wrap .lec-tit .ctr_btn a {width:20px; height:20px; background:#ff0000; margin:0 2px; overflow:hidden; text-indent:-9999px; opacity:0.2; transition:all .2s;}
.lec-wrap .lec-tit .ctr_btn a.btn_play,
.lec-wrap .lec-tit .ctr_btn a.btn_stop {opacity:0.8;}
.lec-wrap .lec-tit .ctr_btn a:hover {opacity:0.8;}
.lec-wrap .lec-tit .ctr_btn a.prev {background:url(/reserve/images/main/lec_prev.png) no-repeat 50% 50%;}
.lec-wrap .lec-tit .ctr_btn a.next {background:url(/reserve/images/main/lec_next.png) no-repeat 50% 50%;}
.lec-wrap .lec-tit .ctr_btn a.btn_stop {background:url(/reserve/images/main/lec_stop.png) no-repeat 50% 50%;}
.lec-wrap .lec-tit .ctr_btn a.btn_play {background:url(/reserve/images/main/lec_play.png) no-repeat 50% 50%;}

.reserve #mc_lectures {margin-top:20px;}
.reserve .rsv_list>li .lec-info span {background:#f7f7f7; padding:5px 15px; border-radius:20px; margin:0 2px; color:#2845a1; font-size:14px;}
.reserve .rsv_list>li .lec-info span.lec-capacity {background: linear-gradient(90deg,  #116cb1 0%, #603db7 33.33%, #d42534 100%); color:#fff;}

.reserve .rsv_list>li a { padding:30px 30px 70px 30px; border-radius:20px; border:1px solid #ebebeb; text-align:center; position:relative; overflow:hidden; display:block;}
.reserve .rsv_list>li .title { display: block; font-size: 18px; font-weight:700; color:#333; margin:20px 0;  text-overflow: ellipsis; height:2.8em; line-height:1.4em; display: -webkit-box; overflow:hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.reserve .rsv_list>li a:hover { text-decoration: none; }
.reserve .rsv_list>li a:hover .title {text-decoration:underline;}

.reserve .rsv_list>li .state {width:100%; position:absolute; bottom:0; left:0; display: inline-block;  text-align: center; line-height:45px; font-size:18px;}
.reserve .rsv_list>li .application { /*background: #D84374;*/ background:#2b51cc; color: #fff; }
.reserve .rsv_list>li .approval { background: #0BA3BA;color: #fff; }
.reserve .rsv_list>li .finish { background: #4f5166; color: #fff; }


.msosicsection {position:relative; background:url(/reserve/images/main/msosicbg.jpg) no-repeat 50% 0; padding:35px 0 120px;}
.msosicsection > .inner {display:flex; flex-wrap:wrap; justify-content:space-between;}
.msosicsection .mnotice {width:740px; margin-top:50px;}
.msosicsection .mnotice h3 {font-size:34px; font-weight:800; }
.msosicsection .mnotice h3 em {color:#ed1266; font-weight:800;}
.msosicsection .mnotice .bx-wrapper {width:760px!important; max-width:760px!important;}
.msosicsection .mnotice .bx-viewport {padding:30px 10px; height:calc(100% + 60px)!important; margin-left:-10px; width:750px;}
.msosicsection .notice_list li a {background:#ededed; border-radius:20px; display:block; padding:40px; text-decoration:none; transition:all .4s; overflow:hidden;}
.msosicsection .notice_list li a > * {position:relative; z-index:1;}
.msosicsection .notice_list li a:before {content:''; position:absolute; display:block; top:1px; left:1px; z-index:0; background:#fff; width:calc(100% - 2px); height:calc(100% - 2px);border-radius:20px;}
.msosicsection .notice_list li a .ntop {display:flex; justify-content:space-between; align-items:flex-start;}
.msosicsection .notice_list li a .ntop .ndate span {display:block; font-size:17px; font-weight:600; color:#888; line-height:1em;}
.msosicsection .notice_list li a .ntop .ndate strong {display:block; font-size:40px; font-weight:800; color:#333; line-height:1em; margin-top:10px;}
.msosicsection .notice_list li a .ntop p.ntype {display:inline-block; background:#333; color:#fff; padding:2px 20px; border-radius:30px; font-size:17px; margin-top:5px;}
.msosicsection .notice_list li a .ntop p.ntype.ty01{background:#1e5eb6;}
.msosicsection .notice_list li a .ntit {display: block; font-size: 18px; font-weight:700; color:#333; margin:20px 0;  text-overflow: ellipsis; height:2.8em; line-height:1.4em; display: -webkit-box; overflow:hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.msosicsection .notice_list li a:hover {transform:translateY(-20px); box-shadow:5px 5px 5px rgba(0,0,0,0.2); background: linear-gradient(90deg,  #116cb1 0%, #603db7 33.33%, #d42534 100%);}
.msosicsection .notice_list li a:hover:before { top:3px; left:3px; width:calc(100% - 6px); height:calc(100% - 6px); border-radius:18px;}
.msosicsection .notice_list li a:hover .ntit {text-decoration:underline;}
.msosicsection .mnotice .controll {display:flex; justify-content:flex-end; align-items:center; position:relative;}
.msosicsection .mnotice .controll a {width:20px; height:20px; background:#ff0000; margin:0 2px; overflow:hidden; text-indent:-9999px; opacity:0.2; transition:all .2s;}
.msosicsection .mnotice .controll a.btn_play,
.msosicsection .mnotice .controll a.btn_stop {opacity:0.8;}
.msosicsection .mnotice .controll a:hover {opacity:0.8;}
.msosicsection .mnotice .controll a.prev {background:url(/reserve/images/main/lec_prev.png) no-repeat 50% 50%;}
.msosicsection .mnotice .controll a.next {background:url(/reserve/images/main/lec_next.png) no-repeat 50% 50%;}
.msosicsection .mnotice .controll p {font-size:12px; color:#d3d3d3; display:flex; align-items:center;}
.msosicsection .mnotice .controll p span {font-size:18px; color:#888; margin:0 10px;}
.msosicsection .mnotice .controll p span.current {font-weight:700; color:#333;}
.msosicsection .mnotice .controll a.more {width:55px; height:55px; background: linear-gradient(45deg,  #fb8859 0%, #e71d76 100%); opacity:1; border-radius:50%; margin-left:30px; position:relative; display:flex; align-items:center; justify-content:center; text-decoration:none;}
.msosicsection .mnotice .controll a.more:after {content:'+'; display:block; text-indent:0; font-size:30px; color:#fff; font-weight:400;}
.msosicsection .mnotice .controll:before {content:''; display:block; width:500px; height:1px; background:#ddd; position:absolute; top:50%; left:0;}

.msosicsection .popupzone { width:485px!important; position:relative; margin-top:40px;}
.msosicsection .popupzone > * {position:relative; z-index:1;}
.msosicsection .popupzone:before {content:''; z-index:0; width:100%; height:calc(100% + 60px); border-radius:40px; border:10px solid #f8f8f8; position:absolute; top:-30px; left:-30px; box-sizing:border-box;}
.msosicsection .popupzone .bx-wrapper {overflow:hidden; border-radius:40px 40px 40px 0;}
.msosicsection .popup_list li {display:flex; justify-content:flex-end;  }
.msosicsection .popup_list li img {width:485px!important; height:418px;}
.msosicsection .popupzone .controll  {display:flex; align-items:center; position:relative; background:#fff; width:360px; border-radius:0 30px 30px 0; padding:10px 0; margin-top:-25px; font-size:18px;}
.msosicsection .popupzone .controll h6 { text-transform: uppercase; padding-left:35px; background:url(/reserve/images/main/popbg.png)no-repeat 10px 8px; font-size:18px;}
.msosicsection .popupzone .controll p {margin:0 20px; color:#d3d3d3;} 
.msosicsection .popupzone .controll p span {margin:0 5px; font-weight:400;}
.msosicsection .popupzone .controll p .current{font-weight:700; color:#333;} 

.msosicsection .popupzone .controll a {width:20px; height:20px; display:flex; align-items:center; justify-content:center; text-indent:-9999px; margin:0 1px; text-decoration:none; margin-top:-2px; opacity:0.5;}
.msosicsection .popupzone .controll a i {text-indent:0; font-size:24px; margin-top:2px; }
.msosicsection .popupzone .controll a.play i {font-size:18px;}
.msosicsection .popupzone .controll a:hover {opacity:1;}