@charset "utf-8";
main{min-height:calc(100vh - 100px - 80px); overflow:hidden; position:relative}
main:after{content:""; display:block; width:65%; height:92%; background:#f6f7fb; position:absolute; right:0; top:0; z-index:-1;}
*{font-family: 'Pretendard'; font-weight:500;}

.row01{padding:40px 0; display:flex; gap:40px; margin-bottom:11px;}

/*학사일정*/
.sc01{width:260px; position:relative; padding-top:10px;}
.sc01 .tit-box{margin-bottom:15px;}
.sc01 .tit-box h3{font-size:30px; margin-bottom:16px; font-weight:bold;}
.sc01 .tit-box a{transition:all .3s}
.sc01 .tit-box a:hover{transform:rotate(180deg);}
.sc01 .month-box{position:absolute; width:170px; height:55px; right:0; top:76px; border-radius:50px 50px 0 50px; background:linear-gradient(#0785ca 0%, #005bac 25%, #005bac 50%,  #0078fe 100%);; align-items: center;
    justify-content: center; display:flex; z-index:1;}
.sc01 .month-box p{color:#fff; font-size:20px;}
.sc01 .month-box strong{font-family:'Gmarket'; font-size:40px;}
.sch-list{position:relative; border:2px solid #0078fe; padding-top:20px;padding-left:4px; padding-right:4px; height:370px; border-radius:24px;         background: #fff; position:relative; overflow-y:scroll; overflow-x: hidden;}
.sch-list::-webkit-scrollbar {width: 2px; }
.sch-list::-webkit-scrollbar-thumb {background: rgba(7, 120, 237); border-radius: 0px; }
.sch-list::-webkit-scrollbar-track {background: rgba(7, 120, 237, .1);  display:none;}
.sch-itm{padding:30px 10px; border-bottom:1px solid #eee;}
.sch-itm > span{font-family:'Gmarket'; font-size:18px; display:block; margin-bottom:4px; color:#212121;}
.sch-itm > p{font-size:18px; font-weight:400; color:#212121;}
.sc01 .month-box:after{content:""; display:block; width:34px; height:28px; background:url(/resources/custom/images/gs/main/rec-border.png); right:0px; top:55px; position:absolute; border-right:2px solid #0078fe;}


.sc02{width:440px; }
.pop-sl-area{height:470px; border-radius:24px; overflow:hidden; margin-bottom:20px;}
.pop-sl-list{width:100%; height:100%;}
.pop-sl-itm{width:100%; height:100%;}
.pop-sl-itm a{display:block; width:100%; height:100%;}
.pop-sl-itm a img{width:100%; height:100%; object-fit:cover;}
.pop-sl-pager{display:flex; gap:16px; justify-content: center; align-items:center;}
.pop-sl-info {display:flex; align-items:center;}
.pop-sl-info .pop-sl-count{font-family:'Gmarket'; font-size:14px; position:relative; color:#272727;}
.pop-sl-info .pop-sl-count:after{content:""; display:inline-block; margin:0 10px; width:5px; height:5px; background:#7f7f7f;}
.pop-sl-info .pop-sl-max{font-family:'Gmarket'; font-size:14px; color:#7f7f7f;}

.sc03{width:632px; }
.noti-area{padding:0 20px; border:2px solid #0078fe; border-radius:24px; height:470px; padding-top:10px; position:relative;         background: #fff;}
.noti-list-box.on{height:auto;}
.noti-list-box{height:0; overflow:hidden;}
.noti-tab-list{display:flex; border-bottom:1px solid #e5e7ee;}
.noti-tab-itm{width:calc(100% / 8); text-align:center; padding:24px 0; color:#969696; font-size:17px; cursor:pointer;}
.noti-tab-itm.on{color:#0078fe; font-weight:bold; position:relative;}
.noti-tab-itm.on:after{content:""; display:block; width:100%; height:3px; position:absolute; bottom:0; left:0; background:#0078fe;}
.noti-list li a{display:block; position:relative;}
.noti-list .recent{margin-top:20px; margin-bottom:40px;}
.noti-list .recent a{display:flex; align-items:center}
.noti-list .recent .noti-date{width:85px; height:85px; border-radius:12px; border:4px solid #ededed; display:flex; justify-content: center; align-items:center; flex-direction:column; font-family:'Gmarket'; color:#333333; font-size:30px; font-weight:300;}
.noti-list .recent .noti-date span{font-family:'Gmarket'; color:#333333; font-size:14px; display:block; font-weight:300; margin-top:8px;}
.noti-list .recent .noti-txt{width:calc(100% - 85px); padding-left:20px; }
.noti-list .recent .noti-txt h5{ font-family:'Gmarket'; color:#333333; font-size:22px;   white-space: nowrap;overflow: hidden;text-overflow: ellipsis; margin-bottom:8px;}
.noti-list .recent .noti-txt p{color:#525252; font-weight:400; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height:1.3; min-height:2.6;}
.noti-list li:not(.recent){margin-bottom:8px;}
.noti-list li:not(.recent) a{padding-left:80px; padding-top:12px; padding-bottom:12px; background:#f6f7fb; border-radius:12px; position:relative;}
.noti-list li:not(.recent) .noti-tit{font-size:18px; white-space: nowrap;overflow: hidden;text-overflow: ellipsis; padding-right:12px;}
.noti-list li .noti-label{position:absolute; width:55px; line-height:32px; background:#fff; text-align:center; border-radius:4px; top:6px; left:6px; font-size:14px; font-weight:600;}
.noti-list li .noti-label.type01{color:#0c883d;}
.noti-list li .noti-label.type02{color:#2f5bc1;}
.noti-list li .noti-label.type03{color:#099ba4;}
.noti-list li .noti-label.type04{color:#e6ba0a;}
.noti-list li .noti-label.type05{color:#19d179;}
.noti-list li .noti-label.type06{color:#5d58be;}
.noti-list li .noti-label.type07{color:#3c3c3c;}
.moti-more-btn{position:absolute; right:20px; bottom:-20px;}

.sc04{width:226px; padding-top:8px;}
.sc04 h3{font-size:24px; color:#060606; margin-bottom:10px; font-weight:bold;}
.cal-itm{padding:10px 14px; border-radius:24px 24px 70px 24px; border:1px solid #109cda; height:110px; margin-bottom:18px; background: #fff;}
.cal-itm:last-child{margin-bottom:0;}
.cal-itm.current{background:#ffe500; border:1px solid #ffe500;}
.cal-itm .cal-label{margin-bottom:10px; display:inline-block; width:120px; line-height:34px; background:#0078fe; color:#fff; font-family:'Gmarket'; text-align:center; border-radius:30px;}
.cal-itm.current .cal-label{background:#fff; color:#3c3600; }
.cal-itm .cal-date, .cal-itm .cal-clock{font-family:'Gmarket'; color:#282828; }
.cal-itm .cal-date{margin-bottom:4px;}

.qk-list{display:flex; background:#113d7c; border-radius:20px 20px 0 0; padding:20px 0; position:relative;}
.qk-list:after{content:""; display:block; width:1px;height:38px; background:rgba(255,255,255,.3); position:absolute; right:0; top:50%; transform:translateY(-50%);}
.qk-itm{width:calc(100% / 5); padding:0 30px;}
.qk-itm a{display:flex; align-items:center; gap:20px;}
.qk-itm p{color:#fff; font-family:'Gmarket'; font-size:18px;     word-break: auto-phrase;}

/*반응형 시작*/
@media all and (max-width:1700px){
	.row01{gap:20px;}	
}
@media all and (max-width:1500px){
		main{height:auto;}
		.row01{flex-wrap:wrap;}
		.sc01{width:20%}
		.sc02{width:25%}
		.sc03{width:50%;}
		.sc04{width:100%}
		.cal-list{display:flex; gap:10px}
		.cal-itm{width:calc((100% - 30px) / 4); margin-bottom:0;}
		.qk-itm a{flex-direction:column; gap:10px; text-align:center;}
}
@media all and (max-width:1200px){
		.sc01, .sc02{width:calc((100% - 20px) / 2);}
		.sc01 .tit-box{display:flex; justify-content: space-between;}
		.sch-list{margin-top:54px;}
		.sc03{width:100%;}
}
@media all and (max-width:1000px){
		.qk-list{flex-wrap:wrap; gap:16px 0;}
		.qk-itm{width:calc(100% / 3);}
}
@media all and (max-width:800px){
		.cal-list{flex-wrap:wrap;}
		.cal-itm{width:calc((100% - 20px) / 2);}
		.noti-tab-itm{font-size:16px;}
}
@media all and (max-width:767px){
		.row01{flex-direction:column; }
		.sc01, .sc02{width:100%;}
		.sch-list{min-height:auto;}
		.noti-tab-list{flex-wrap:wrap; gap:10px; border-bottom:none; }
		.noti-tab-itm{width:calc((100% - 30px) / 4); border:1px solid #eee; padding:12px; border-radius: 12px;}
		.noti-tab-itm.on{background:#0078fe; color:#fff;}
		.noti-tab-itm.on:after{display:none;}
		.noti-area{height:auto; padding-bottom:20px; padding-top:20px;}
		.noti-list .recent{margin-bottom:20px;}
		.noti-list .recent .noti-date{width:70px; height:70px; font-size:20px;}
		.noti-list .recent .noti-txt{width:calc((100% - 70px)); padding-left:10px;}
		.noti-list .recent .noti-txt h5{font-size:18px;}
		.noti-list li:not(.recent) .noti-tit{font-size:16px;}
}
@media all and (max-width:500px){
		.pop-sl-area{height:400px;}
		.noti-tab-itm{width:calc((100% - 30px) / 3);}
		.cal-list{flex-direction:column;}
		.cal-itm{width:100%;}
		.qk-itm{width:50%;}
		.qk-itm p{font-size:16px;}
}

/*애니메이션*/
.animation{transform:skew(10deg, 10deg);; opacity:0; transition:all .5s;}
.animation.active{transform:skew(0); opacity:1;}
.sc02.animation{transition-delay:.2s;}
.sc03.animation{transition-delay:.4s;}
.sc04.animation{transition-delay:.6s;}
.row02.animation{transform:translateY(100px);}
.row02.animation.active{transform:translateY(0);}
.row02.animation{transition-delay:.8s;}