@charset "utf-8";



/* 공지사항 */ 
.wrap-notice{position:relative;word-break:break-all;margin:0 auto;padding: 100px 10px 100px;height: 100% !important;max-width: 1600px;overflow: hidden;}
.wrap-notice:before {content:'';position:absolute;border-bottom: 1px solid #bdbdbf;width: 97%;bottom: 30px;left: 0;}
.wrap-notice h2{position: absolute;font-size: 38px;line-height: 1;top: 100px;left: 10px;font-family: 'Pretendard Black' !important;}
.wrap-notice h2:before {content:'';position:absolute;top: -3px;right: -8px;width: 20px;height: 20px;background: #86bae1;border-radius: 50px;z-index: -1;}
.wrap-notice .tab {position:relative;display: flex;justify-content: flex-end;margin-bottom: 30px;}
.wrap-notice .tab > li{margin-left: 13px;}
.wrap-notice .tab > li .title {position: relative;} 
.wrap-notice .tab > li:first-child .title:before {display:none}
.wrap-notice .tab .title a{display:block;transition:0.3s;cursor:pointer;font-size: 19px;font-weight: 600;padding: 10px 13px;line-height: 1;opacity: 0.8;color: #333;border: 1px solid #bdc0c1;border-radius: 5px;}
.wrap-notice .tab .title:hover a {opacity:1; transition:0.3s}
.wrap-notice .tab > li.active .title a {opacity:1;background: #313131;color: #fff;} 
 

.wrap-notice .list {padding: 15px 5px;margin: 0 -10px;}
.wrap-notice .list ul {display: flex;width: 100%;justify-content: space-between;}
.wrap-notice .list ul li {width: 48%;margin: 0 10px;}
.wrap-notice .list ul li.nodata {font-size:18px;height: 307px;display: flex;flex-direction: column;justify-content: center;max-width: 100% !important;margin: 0 !important;min-width: 300px !important;text-align: center;border-radius: 30px;box-shadow: 0px 0px 8px #33323236;}
.wrap-notice .list .con {height:100%;border-radius: 25px;box-shadow: 0px 0px 8px #33323236;transition: 0.3s;min-width: 1px;position: relative;overflow: hidden;}
.wrap-notice .list .subject{position:relative;padding: 30px 33px 33px;height: 100%;display: flex;flex-direction: column;justify-content: space-between;}
.wrap-notice .list .subject .cate span {display: inline-block;line-height: 1;padding: 9px 20px 8px;border-radius: 50px;margin-bottom: 28px;color: #fff;font-weight: 500;font-size: 19px;}
.wrap-notice .list .subject .subjectText{font-size: 21px;display: -webkit-box;overflow: hidden;line-height: 1.3;text-overflow: ellipsis;-webkit-box-orient: vertical;-webkit-line-clamp: 2;font-weight: bold;margin-bottom: 20px;height: 53px;color: #313131;}
.wrap-notice .list .subject .subjectText p {background-repeat: no-repeat;background-size: 0% 100%;transition: background-size 0.5s;display:inline;} 
.wrap-notice .list .subject .date {padding-left: 20px;position: relative;font-weight: bold;line-height: 1;}
.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: 2px;background-size: contain;opacity: 0.5;}
.wrap-notice .list .subject .date span {font-size: 14px;color: #7f7f7f;font-weight: normal;} 
.wrap-notice .list .subject .content{font-size: 18px;color: #3a3a3a;width:100%;word-break: keep-all;display: -webkit-box;overflow: hidden;line-height: 1.2;text-overflow: ellipsis;-webkit-box-orient: vertical;-webkit-line-clamp: 3;height: 65px;margin-bottom: 25px;}
.wrap-notice .list .subject:hover .subjectText p {background-image: linear-gradient(transparent 70%, #d7e2f2 40%);; background-repeat: no-repeat; background-size: 100% 100%;}
.wrap-notice .list .subject:hover .content {text-decoration:underline}


.wrap-notice #tab1 .cate span {background: #ff9000;}
.wrap-notice #tab2 .cate span {background: #f13278;}
.wrap-notice #tab3 .cate span {background: #10a07f;} 


.wrap-notice .more{position:absolute;bottom: 5px;right: 8px;text-indent: -9999px;border-radius: 50px;width: 55px;height: 55px;background: url(../images/plus-w.png)center no-repeat;background-size: contain;transition: 0.3s;/*border: 3px dashed #4d4d4d;*/background-color: #272d43;z-index: 1;}
.wrap-notice .more:hover {transition: 0.3s;transform: rotate(90deg);}
 

/* slick on*/
.wrap-notice .slick-list {overflow: visible;}
.wrap-notice .list ul.slick-slider {display:block} 
.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 .list ul li:hover .con {box-shadow: 0px 0px 20px #b3b3b3;}

.wrap-notice .control {position: absolute;bottom: 5px;right: 55px;box-shadow: 0px 0px 10px #afafaf8c;border-radius: 50px;overflow: hidden;z-index: 1;display:none}
.wrap-notice .control:before {content:'';position: absolute;top:50%;left:50%;transform: translate(-50%, -50%);border-right: 1px solid #b5b5b5;height: 30%;z-index: 1;}
.wrap-notice .control .prevnext {position: relative; z-index: 0;}
.wrap-notice .control .prevnext button {background-color: #fff;width: 55px;}
.wrap-notice .control .prevnext button:hover {transition: 0.3s;background-color: #f7f7f7;} 
.wrap-notice .slider:not(.empty) + .control {display: block}


@media all and (max-width:1300px){
 
	.wrap-notice {padding: 50px 0 80px;}
	.wrap-notice h2 {top: 50px;}
	.wrap-notice .tab {margin-bottom: 30px;}
    .wrap-notice .tab > li {min-width: auto;margin: 0 3px;}
	.wrap-notice .list {top: 80px;}

} 
@media all and (max-width:1024px){
	
    .wrap-notice .title a {font-size: 18px;} 	

}
@media all and (max-width:768px){
 
	.wrap-notice h2 {position: initial;width: 100%;text-align: center;margin-bottom: 20px;}
	.wrap-notice h2:before {display:none}
	.wrap-notice .tab {justify-content:center;margin-bottom: 19px;}
	.wrap-notice .tab > li:last-child{}
	.wrap-notice .tab .title a {font-size: 17px;}
	.wrap-notice .list {padding: 0;margin: 0 0;}
	.wrap-notice .list ul {flex-direction:column; }
	.wrap-notice .list ul li {width:100%;}
	.wrap-notice .list ul li:last-child {margin-bottom:0} 
	.wrap-notice .list .subject{padding: 27px;}
	.wrap-notice .list .subject:before {width: 60px;height: 60px;}
	.wrap-notice .list .subject .cate span {font-size: 17px;padding: 10px 18px 7px;font-weight: normal;margin-bottom: 23px;}
	.wrap-notice .list .subject .subjectText{font-size: 19px; height: 50px;margin-bottom: 15px;}
	.wrap-notice .list .subject .content{font-size: 16px;height: 60px;margin-bottom: 20px;}
	
}
@media all and (max-width:550px){
	 
	.wrap-notice {padding: 50px 0 68px;}
	.wrap-notice h2 {margin-bottom: 15px;} 
	.wrap-notice .title a span:before {bottom: -4px; border-width: 5px;}
	.wrap-notice .list {top: 65px;} 
	.wrap-notice .list .subject{padding: 22px;}
	.wrap-notice .list .subject:before {width: 50px;height: 50px;}
	.wrap-notice .list .subject .cate span {font-size: 16px;padding: 8px 15px 5px;font-weight: normal;margin-bottom: 15px;}
	.wrap-notice .list .subject .subjectText{font-size: 17px;height: 43px;margin-bottom: 15px;}
	.wrap-notice .list .subject .content{font-size: 15px;height: 56px;margin-bottom: 12px;} 
	.wrap-notice .control {right: 47px;}
	.wrap-notice .control .prevnext button {width: 45px;}
	.wrap-notice .more {width: 45px; height: 45px;}
	
}