
/* 단과대학 뉴스 */
.notice {background: #f9f9f9;}

.wrap-notice{position:relative;word-break:break-all; margin:0 auto; }
.wrap-notice h2{display:none;}
.wrap-notice .title a{display:block;cursor:pointer;font-size: 23px;color:#666;font-weight: 600;background: #e0ecf8;padding: 18px 25px 20px;line-height: 1;}
 
.wrap-notice > ul{position:relative;height:100%;text-align:center;display: flex;justify-content: center; min-height: 510px;}
.wrap-notice > ul > li{margin: 0;min-width: 180px;}
.wrap-notice > ul > li + li{margin: 0;}
.wrap-notice > ul > li .title {}
.wrap-notice > ul > li:first-child .title a{border-top-left-radius: 50px;border-bottom-left-radius: 50px;}
.wrap-notice > ul > li:last-child .title a{border-top-right-radius: 50px;border-bottom-right-radius: 50px;}

.wrap-notice .list {position:absolute;left:0;text-align:left;width:100%;top: 150px; padding: 0 30px;}
.wrap-notice .list ul {display: flex; width: 100%; justify-content: center}
.wrap-notice .list ul li {background: #fff;/* padding: 23px 30px 28px; */border-radius: 25px;box-shadow: 0px 7px 20px #33323242;margin: 0 20px;transition: 0.3s;width: 100%;max-width: 400px;min-width: 1px;position: relative;}
.wrap-notice .list ul li a:after {content:'';position:absolute;border: 3px solid #004da7;width: 100%;left: 0;top: 0;height: 100%;border-radius: 23px;transition: 0.3s;opacity: 0;}
.wrap-notice .list ul li.nodata {font-size:18px;text-align:center;padding:30px 0;width:100%}
.wrap-notice .list ul li:hover a:after {opacity: 1; transition: 0.3s;}

.wrap-notice .list .subject{position:relative;padding: 23px 30px 28px;display: block;}
.wrap-notice .list .subject .subjectText{font-size: 22px;word-break: break-all;display: -webkit-box;overflow: hidden;line-height: 1.35;text-overflow: ellipsis;-webkit-box-orient: vertical;-webkit-line-clamp: 2;font-weight: bold;margin-bottom: 25px;margin-top: 15px;height: 56px;}
.wrap-notice .list .subject .date {padding-left: 20px; position: relative}
.wrap-notice .list .subject .date:before {position:absolute;content:'';background: url(../images/watch.png) center no-repeat;width: 14px;aspect-ratio: 1/1;left: 0;top: 7px;background-size: contain;opacity: 0.5;}
.wrap-notice .list .subject .date span {font-size:16px; color:#888; }
.wrap-notice .list .subject .content{font-size: 17px;color:#666;width:100%;word-break: break-all;display: -webkit-box;overflow: hidden;line-height: 1.35;text-overflow: ellipsis;-webkit-box-orient: vertical;-webkit-line-clamp: 3;height: 68px;}


.wrap-notice .more{display:inline-block;position:absolute;bottom: 0;left:50%;transform:translateX(-50%);text-indent: -9999px;border-radius: 50px;width: 55px;aspect-ratio: 1/1;background: url(../images/plus-w.png)center no-repeat;background-color: #ccc;background-size: 100%;transition: 0.3s;margin-bottom: 10px;}
.wrap-notice .more:hover {transition: 0.3s; background-size: 120%; box-shadow: 0 0 10px #4b4b4bab;}

.wrap-notice .list, .wrap-notice .more{display:none}

/* slick on*/
.wrap-notice .slick-list {overflow: visible;}
.wrap-notice .list ul.slick-slider {display:block}
.wrap-notice .list ul.slick-slider li {opacity: 0.5; min-width: inherit; }
.wrap-notice .list ul.slick-slider li.slick-active {opacity: 1; transition: 0.3s;}
.wrap-notice .list ul.slick-slider .slick-arrow {top: 50%;transform: translateY(-50%);width: 70px;background-color: #004da7 !important;border-radius: 50px;box-shadow: 0px 0px 15px #33303070;}
.wrap-notice .list ul.slick-slider .slick-next {background: url(../images/chevron-right-w.png) center no-repeat; right: 255px;}
.wrap-notice .list ul.slick-slider .slick-prev {background: url(../images/chevron-left-w.png) center no-repeat; left: 255px;}

/* 활성화 */
.wrap-notice > ul > li.active .list, .wrap-notice > ul > li.active .more{display:block}
.wrap-notice > ul > li.active .title a{color: #fafbff;position: relative;z-index: 0;}
.wrap-notice > ul > li.active .title a:before, .wrap-notice > ul > li.active .title a:after {position: absolute;content: '';}
.wrap-notice > ul > li.active .title a:before {width: 100%;border-radius: 50px;height: 100%;left: 0;top: 0;z-index: -1;background: #004da7;box-shadow: 2px 2px 10px #27232369;}
.wrap-notice > ul > li.active .title a:after {bottom: -23px;left: 50%;transform: translateX(-50%);width: 45px;height: 25px;background: url(/sites/temp_16/images/main/arrow_bg.png) center no-repeat;background-size: contain;}

@media all and (max-width:1300px){
    .wrap-notice > ul > li {   min-width: 160px;}
	.wrap-notice .list {top: 110px; padding: 0 10px;}
    .wrap-notice .list ul li {margin: 0 10px;}
    .wrap-notice .list ul li:nth-of-type(5) {display: none}
	.wrap-notice .title a {font-size: 20px;padding: 13px 10px 16px;}

}

@media all and (max-width:1024px){
    .wrap-notice{}
    .wrap-notice h2{}
    .wrap-notice .title a{}
    .wrap-notice > ul{min-height: auto;height: 450px;}
    .wrap-notice > ul > li{}
    .wrap-notice > ul > li + li{}
    .wrap-notice > ul > li .title {}
    .wrap-notice > ul > li:first-child .title a{}
    .wrap-notice > ul > li:last-child .title a{}

    .wrap-notice .list {padding: 0 20px;top: 90px;}
    .wrap-notice .list ul {flex-direction: column;overflow: hidden;padding: 13px 23px;background: #fff;border-radius: 20px;box-shadow: 0px 7px 20px #33323242;border: 4px solid #749ac6;}
    .wrap-notice .list ul li {max-width: 100%;margin: 0;box-shadow: none;border-radius: 0;padding: 0;/* border-bottom: 1px dashed #ccc; */padding-left: 18px;position: relative;}
    .wrap-notice .list ul li a:after {display:none}
	
	.wrap-notice .list ul li:before {position:absolute;content:'';width: 6px;aspect-ratio: 1/1;background: #749ac6;border-radius: 50px;left: 0;top: 50%;transform: translateY(-50%);}
    .wrap-notice .list ul li:nth-of-type(5) {display: block}
	.wrap-notice .list ul li.nodata {}
    .wrap-notice .list ul li.nodata:before {display: none}

	.wrap-notice .list ul li .con {border-bottom: 1px dashed #ccc;}	
	.wrap-notice .list ul li:last-child .con {border-bottom:0}	
	
    .wrap-notice .list .subject{padding: 13px 2px;display: block;width: calc( 100% - 130px);position: inherit;height: 44px;}
    .wrap-notice .list .subject .subjectText{margin: 0;font-size: 18px;font-weight: normal;line-height: 1;height: 16px;-webkit-line-clamp: 1;}
    .wrap-notice .list .subject .date {position: absolute; right: 5px; line-height: 1;}
    .wrap-notice .list .subject .date:before {top: 2px;}
    .wrap-notice .list .subject .date span {}
    .wrap-notice .list .subject .content{display: none;}
    .wrap-notice .list .subject .date:before {display: none}


}

@media all and (max-width:768px){
    .wrap-notice > ul > li {}
	.wrap-notice > ul > li.active .title a:after {bottom: -23px;}
	.wrap-notice .list ul li {padding-left: 13px;}
	.wrap-notice .list ul li:before {width: 4px;}
	.wrap-notice .list .subject {width: calc(100% - 100px);}
	

}


@media all and (max-width:550px){
    .wrap-notice > ul {height: 380px;}
	.wrap-notice > ul > li {min-width: 120px;}
    .wrap-notice > ul > li.active .title a:after {    bottom: -20px;    width: 30px;}
    .wrap-notice .title a {font-size: 17px;}
    .wrap-notice .list {top: 75px;}
    .wrap-notice .list ul {padding: 10px 18px;}
	.wrap-notice .list .subject {width: calc(100% - 90px);padding: 11px 2px;height: 38px;}
    .wrap-notice .list .subject .subjectText {font-size: 16px;}
    .wrap-notice .list .subject .date span {font-size: 14px;}
    
    .wrap-notice .more {width: 40px;}

}


@media all and (max-width:400px){ 
	.wrap-notice > ul > li {min-width: 100px;} 

}

