@charset "utf-8";

/* 공지사항 */ 
[id*="_obj103"] { position: absolute !important; left: 0 !important; bottom: 0 !important; top: auto !important;}
/*#menu19532_obj103 { position: absolute !important; left: 0 !important; bottom: 0 !important; top: auto !important;}*/

.wrap-notice{position:relative;word-break:break-all;margin:0 auto;max-width: 1600px;height: 400px;margin-bottom: 50px;padding: 0 20px;}
.wrap-notice h2{color: #fff;padding-right: 110px;position: absolute;font-size: 30px;line-height: 1;top: 18px;font-family: 'Gmarket Bold';}
.wrap-notice h2:before {content:'';position:absolute;right: 0;top: 10px;width: 80px;border-top: 2px solid #fff;}
.wrap-notice h2 img {width: 30px;position: relative;top: -3px;}
.wrap-notice .title a{display:block;transition:0.3s;cursor:pointer;font-size: 25px;color: #fff;font-weight: 600;padding: 18px 30px 20px;line-height: 1;opacity: 0.8;}
.wrap-notice .title a span {padding: 0 6px;position:relative;font-family: 'Gmarket Bold';}
.wrap-notice .title a span:before {content:'';position:absolute;bottom: -2px;left: 0;border-top: 10px solid #2f81759c;width: 100%;z-index: -1;border-radius: 5px;opacity: 0;transition: 0.3s;}
.wrap-notice .title a span:after {content:'';position:absolute;right: -3px;top: -3px;width: 6px;height: 6px;border-radius: 50px;background: #e7e7e7;opacity: 0;transition: 0.3s;}
.wrap-notice .title:hover a {opacity:1; transition:0.3s}
.wrap-notice > ul{position:relative;height:100%;display: flex;}
.wrap-notice > ul > li:first-child {margin-left: 280px;}
.wrap-notice > ul > li{margin: 0;}
.wrap-notice > ul > li + li{margin: 0;}
.wrap-notice > ul > li .title {}
.wrap-notice > ul > li:first-child .title a{}
.wrap-notice > ul > li:last-child .title a{border-top-right-radius: 50px;border-bottom-right-radius: 50px;}

.wrap-notice .active .title a span:before, 
.wrap-notice .active .title a span:after {opacity:1;transition: 0.3s;}


.wrap-notice .list {position:absolute;left:0;text-align:left;width:100%;top: 90px;}
.wrap-notice .list ul {display: flex;width: 100%;}
.wrap-notice .list ul li {background: #0a0a0a8f;border-radius: 25px;box-shadow: 0px 7px 20px #33323242;transition: 0.3s;width: 100%;min-width: 1px;position: relative;width: 23%;border: 8px solid #ffffffba;margin-right: 3%;max-width: 364px;}
.wrap-notice .list ul li:last-child {margin-right:0}
.wrap-notice .list ul li.nodata {font-size:18px;text-align:center;padding:30px 0;width:100%;height: 238px;color: #fff;vertical-align: middle;display: flex;flex-direction: column;justify-content: center;max-width: 100%;}

.wrap-notice .list .con { color: #fff; padding: 10px; }
.wrap-notice .list .subject{position:relative;padding: 5px 10px;display: block;height: 100%;display: flex;flex-direction: column;justify-content: space-between;}
.wrap-notice .list .subject:before {content:'';position:absolute;width: 32px;height: 32px;background: url(../images/notice-icon.png) center no-repeat;background-size: contain;}
.wrap-notice .list .subject .subjectText{font-size: 20px;word-break: keep-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: 15px;margin-top: 50px;height: 55px;color: #fff;}
.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: 16px;aspect-ratio: 1/1;left: 0;top: 11px;background-size: contain;opacity: 0.5;}
.wrap-notice .list .subject .date span {font-size: 16x;color: #c7c5c5;} 
.wrap-notice .list .subject .content{font-size: 17px;color: #ebe7e7;width:100%;word-break: keep-all;display: -webkit-box;overflow: hidden;line-height: 1.4;text-overflow: ellipsis;-webkit-box-orient: vertical;-webkit-line-clamp: 3;height: 45px;margin-bottom: 10px;}

.wrap-notice .more{display:inline-block;position:absolute;top: 0;right: 0;text-indent: -9999px;border-radius: 50px;width: 55px;aspect-ratio: 1/1;background: url(../images/plus-w.png)center no-repeat;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; */transform: rotate(90deg);}

.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; max-width: 100%; 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{opacity: 1;}


 
@media all and (min-width:1024px){
	
	.wrap-notice {height:400px !important;}
	
}
@media all and (max-width:1024px){

	[id*="_obj103"] {position:relative !important;}
    .wrap-notice{padding: 80px 20px;height: 870px !important;margin-bottom: 0;}
    .wrap-notice h2{color: #000;position: initial;text-align: center;padding-right: 0;margin-bottom: 40px;font-size: 38px;}
	.wrap-notice h2 img {display:none}
    .wrap-notice .title a{color: #000;padding: 0 10px;font-weight: normal;}
	.wrap-notice .title a span:after {display:none}
    .wrap-notice > ul{justify-content: center;height: auto;} 
	.wrap-notice > ul > li:first-child {margin-left:0} 

    .wrap-notice .list {top: 50px;}
    .wrap-notice .list ul {flex-wrap: wrap; justify-content: space-between;}
    .wrap-notice .list ul li {width: 49%;max-width: 100%;margin: 10px 0;box-shadow: 0px 7px 10px #33323224;}
    .wrap-notice .list ul li a:after {display:none} 
    .wrap-notice .list ul li.nodata:before {display: none} 
	.wrap-notice .list ul li:last-child .con {border-bottom:0}	 
	.wrap-notice .more {top: -10px; width: 37px; height: 37px; box-shadow: 0px 0px 5px gray; background-color: #707070;}


}

@media all and (max-width:768px){

    .wrap-notice{padding: 50px 15px;height: 385px !important;}
	.wrap-notice h2 {font-size:28px;margin-bottom: 35px;}
	.wrap-notice .title a {font-size:23px;padding: 0 5px;}
	.wrap-notice .title a span {font-family: 'Gmarket Medium';}
	.wrap-notice .list ul {flex-direction:column;border: 4px solid #006277;border-radius: 20px;padding: 15px 20px 10px;min-height: 160px;justify-content: flex-start;}
	.wrap-notice .list ul li {width:100%;box-shadow: none;border: none;background: transparent;color: #000;margin: 5px 0 0px;}
	.wrap-notice .list .subject {padding: 0;flex-direction: row;justify-content: space-between; align-items: center;}
	.wrap-notice .list .subject:before {display:none}
	.wrap-notice .list .subject .subjectText {color:#000;font-size: 16px;margin: 0;height: 25px;-webkit-line-clamp: 1;line-height: 1.5;}	
	.wrap-notice .list .subject .content {display:none}
	.wrap-notice .list .subject .date {min-width: 100px;text-align: right;padding-left: 0;}
	.wrap-notice .list .subject .date span {color: #555;}
    .wrap-notice .list .subject .date:before {display:none}
	.wrap-notice .list ul li.nodata { color: #000; height: auto; }
	.wrap-notice .list .con { color: #000; padding: 0; }


@media all and (max-width:550px){

	.wrap-notice .list ul {padding: 13px 15px 8px;}
	.wrap-notice .list .subject .subjectText {font-size: 15px;line-height: 2;}
	.wrap-notice .list .subject .date {}
	.wrap-notice .list .subject .date span {font-size: 12px;}

}
@media all and (max-width:400px){ 
	.wrap-notice > ul > li {min-width: 100px;} 

}