@charset "UTF-8";

/* 공지사항 */
.wrap-notice {padding: 100px 0; padding-bottom: 40px;} 
.wrap-notice .container {position: relative;}
.wrap-notice .title {position: absolute; left: -50px; opacity: 0; top: 0; line-height: 1;}
.wrap-notice .title strong {display: inline-block; padding-right: 50px; background: #fff; font-family: "FontAwesome", "微软雅黑", "Microsoft Yahei", "黑体", Arial; font-style: italic; font-size: 50px; color: #2a2a2a;}
.wrap-notice .title strong em {font-family: "FontAwesome", "微软雅黑", "Microsoft Yahei", "黑体", Arial; font-style: italic; color: #e84855;}
.wrap-notice .list { min-height: 447px}
.wrap-notice .list .box {position: relative; text-align: right; font-size: 0;}
.wrap-notice .list .box::after {content: ''; position: absolute; left: 0; top: 53%; z-index: -1; width: 0%; height: 1px; background: #000; transition: width 2s; transition-delay: .8s;}
.active .wrap-notice .list .box::after {width: 100%;}
.wrap-notice .list .box > li {display: inline-block; padding-left: 37px; background: #fff;}
.wrap-notice .list .box > li:first-child {padding-left: 50px;}
.wrap-notice .list .tab {position: relative; right: -50px; opacity: 0; font-family: "FontAwesome", "微软雅黑", "Microsoft Yahei", "黑体", Arial; font-size: 30px; color: #bababa;}
.wrap-notice .list .on .tab,
.wrap-notice .list .tab:hover {color: #2a2a2a;}
.wrap-notice .list .on .tab::after {content: ''; position: absolute; left: -16px; top: -10px; width: 26px; height: 25px; background: url('../images/ic-notice-shap.png') no-repeat;}
/* .wrap-notice .detail {position: absolute; left: 0; top: 85px; display: none; flex-wrap: wrap; justify-content: start; width: 100%; gap: 0 95px; text-align: left;} */
.wrap-notice .detail {position: absolute; left: 0; top: 85px; display: none; flex-wrap: wrap; justify-content: start; width: 100%; text-align: left; margin:0 -47.5px;}
.wrap-notice .on .detail {display: flex;  width:auto;}
.wrap-notice .dtl {position: absolute; left: 0; top: 85px; display: none; flex-wrap: wrap; justify-content: start; width: 100%; text-align: left; margin:0 -47.5px;}
.wrap-notice .on .dtl {display: flex;  width:auto;}
/* .wrap-notice .detail li {position: relative; top: 50px; opacity: 0; width: calc(25% - 72px); padding: 30px 0; border-bottom: 1px solid #d8d8d8;} */
.wrap-notice .detail li {position: relative; top: 50px; opacity: 0; width: 25%; padding: 0px 47.5px;}
.wrap-notice .detail li a {padding:20px 0; display:block; position: relative; border-bottom: 1px solid #d8d8d8;}
.wrap-notice .detail li a::after {content: ''; position: absolute; left: 0; bottom: -1px; width: 0; height: 2px; background: #e84855; transition: width .35s;}
.wrap-notice .detail li:hover a::after {width: 100%;}
.wrap-notice .detail strong {overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-family: "FontAwesome", "微软雅黑", "Microsoft Yahei", "黑体", Arial; font-size: 22px; color: #333;}
.wrap-notice .dtl li {position: relative; top: 50px; opacity: 0; width: 25%; padding: 0px 47.5px;}
.wrap-notice .dtl li a {padding:30px 0; display:block; position: relative; border-bottom: 1px solid #d8d8d8;}
.wrap-notice .dtl li a::after {content: ''; position: absolute; left: 0; bottom: -1px; width: 0; height: 2px; background: #e84855; transition: width .35s;}
.wrap-notice .dtl li:hover a::after {width: 100%;}
.wrap-notice .dtl strong {overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; font-family: "FontAwesome", "微软雅黑", "Microsoft Yahei", "黑体", Arial; font-size: 22px; color: #333;}
/* .wrap-notice .detail li:hover strong {color: #e84855;} */
/* .wrap-notice .detail strong i {position: relative; background: linear-gradient(to bottom, transparent 95%, #e84855 0) left center no-repeat; background-size: 0; transition: .5s;} */
/* .wrap-notice .detail a:hover strong i{background-size: 100% auto;} */
.wrap-notice .detail p {overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-family: "FontAwesome", "微软雅黑", "Microsoft Yahei", "黑体", Arial; font-size: 17px; color: #666; min-height:51px;}
.wrap-notice .detail span {display: block; margin-top: 15px; font-family: 'Mont Regular'; font-size: 14px; letter-spacing: 0; color: #999;}
.wrap-notice .dtl p {overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-family: "FontAwesome", "微软雅黑", "Microsoft Yahei", "黑体", Arial; font-size: 17px; color: #666; min-height:51px;}
.wrap-notice .dtl span {display: block; margin-top: 15px; font-family: 'Mont Regular'; font-size: 14px; letter-spacing: 0; color: #999;}
.wrap-notice .more {position: relative; top: 50px; opacity: 0; margin-top: 60px; text-align: center;}
.wrap-notice .more a {display: inline-block; padding: 16px 37px 16px 48px; border: 1px solid #e84855; font-family: "FontAwesome", "微软雅黑", "Microsoft Yahei", "黑体", Arial; font-style: italic; font-size: 18px; color: #e84855; vertical-align: middle;}
.wrap-notice .more a::after {content: ''; display: inline-block; margin-left: 25px; vertical-align: middle; width: 11px; height: 11px; background: url('../images/btn-notice-more.png') no-repeat right center; transition: .45s;}
.wrap-notice .more a:hover {background: #e84855; color: #fff;}
.wrap-notice .more a:hover::after {background-position: left center;}
.wrap-notice .list .box > li.admission-li .detail strong {-webkit-line-clamp:2; height:66px;}
.wrap-notice .list .box > li.admission-li .detail p {display:none;}
@media (max-width: 1750px) {
  .wrap-notice .title {left: 30px !important;}
}

@media (max-width: 1480px) {
  .wrap-notice .list {min-height: 429px;}
  .wrap-notice .list .tab {font-size: 25px;}
  .wrap-notice .list .box > li {padding-left: 20px;}
  /* .wrap-notice .detail {gap:0 55px;} */
  /* .wrap-notice .detail li {width: calc(25% - 42px);} */
  .wrap-notice .detail {margin:0 -27px}
  .wrap-notice .detail li {width: 25%; padding:0 27px;}
  .wrap-notice .detail strong {font-size: 20px;}
  .wrap-notice .detail p {font-size: 15px; min-height:45px;}
  .wrap-notice .dtl {margin:0 -27px}
  .wrap-notice .dtl li {width: 25%; padding:0 27px;}
  .wrap-notice .dtl strong {font-size: 20px;}
  .wrap-notice .dtl p {font-size: 15px; min-height:45px;}
}

@media (max-width: 1000px) {
  .wrap-notice {padding: 50px 0;}
  .wrap-notice .title {left: 60px !important; opacity: 1 !important;}
  .wrap-notice .title strong {padding-right: 32px; font-size: 30px;}
  .wrap-notice .list {min-height: 368px;}
  .wrap-notice .list .tab {right: 0 !important; opacity: 1 !important; font-size: 20px;}
  .wrap-notice .list .on .tab::after {width: 20px; height: 20px; background-size: cover;}
  .wrap-notice .list .box > li:first-child {padding-left: 30px;}
  /* .wrap-notice .detail {top: 31px; gap: 0 20px;} */
  .wrap-notice .detail {top: 31px; margin:0 -10px}
  .wrap-notice .dtl {top: 31px; margin:0 -10px}
  /* .wrap-notice .detail li {top: 0 !important; opacity: 1 !important; width: calc(33.333% - 14px);} */
  .wrap-notice .detail li {top: 0 !important; opacity: 1 !important; width: 33.3333%; padding:0 10px;}
  .wrap-notice .detail li a {padding: 37px 0 15px 0;}
  .wrap-notice .detail li:nth-child(n+7) {display: none;}
  .wrap-notice .detail strong {font-size: 18px;}
  .wrap-notice .detail p {font-size: 14px;}
  .wrap-notice .detail span {margin-top: 25px;}
  .wrap-notice .dtl li {top: 0 !important; opacity: 1 !important; width: 33.3333%; padding:0 10px;}
  .wrap-notice .dtl li a {padding: 37px 0 15px 0;}
  .wrap-notice .dtl li:nth-child(n+7) {display: none;}
  .wrap-notice .dtl strong {font-size: 18px;}
  .wrap-notice .dtl p {font-size: 14px;}
  .wrap-notice .dtl span {margin-top: 25px;}
  .wrap-notice .more {top: 0 !important; opacity: 1 !important; margin-top: 100px;}
  .wrap-notice .more a {padding: 12px 30px 12px 38px; font-size: 16px;}
  .wrap-notice .list .box > li.admission-li .detail strong {height:55px;}
}

@media (max-width: 840px) {
  .wrap-notice .title {left: 20px !important;}
}

@media (max-width: 768px) {
  .wrap-notice {padding: 40px 0;}
  .wrap-notice .title strong {font-size: 24px;}
  .wrap-notice .detail li {width: 50%;}
  .wrap-notice .detail li:nth-child(n+5) {display: none;}
  .wrap-notice .dtl li {width: 50%;}
  .wrap-notice .dtl li:nth-child(n+5) {display: none;}
  .wrap-notice .list .tab {font-size: 17px;}
}

@media (max-width: 635px) {
  .wrap-notice .title {position: static;}
  .wrap-notice .list {min-height: 281px; padding-top: 20px;}
  .wrap-notice .list .tab {font-size: 19px;}
  .wrap-notice .list .box {display: flex; justify-content: space-between; padding-bottom: 15px; border-bottom: 1px solid #000;}
  .wrap-notice .list .box::after {display: none;}
  .wrap-notice .list .box > li {padding: 0;}
  .wrap-notice .list .box > li:first-child {padding: 0;}
  .wrap-notice .list .on .tab::after {left: -9px; top: -7px; width: 14px; height: 14px;}
  .wrap-notice .detail {gap: 0; top: 60px; padding: 0 0 14px 0; border-bottom: 1px solid #c9c9c9; margin:0;}
  .wrap-notice .on .detail {width:100%;}
  .wrap-notice .detail li {width: 100%; border-bottom: 0; padding:0;}
  .wrap-notice .detail li::after {display: none;}
  .wrap-notice .detail li a {display: flex; justify-content: space-between; align-items: center; padding: 0 0 7px 0; border-bottom: 0;}
  .wrap-notice .detail li:nth-child(n+5) {display: block;}
  .wrap-notice .detail li:nth-child(n+7) {display: none;}
  .wrap-notice .detail p {display: none;}
  .wrap-notice .detail strong {font-size: 16px;}
  .wrap-notice .detail strong:hover {color: #e84855;}
  .wrap-notice .detail span {margin-top: 0;}
  .wrap-notice .dtl {gap: 0; top: 60px; padding: 0 0 14px 0; border-bottom: 1px solid #c9c9c9; margin:0;}
  .wrap-notice .on .dtl {width:100%;}
  .wrap-notice .dtl li {width: 100%; border-bottom: 0; padding:0;}
  .wrap-notice .dtl li::after {display: none;}
  .wrap-notice .dtl li a {display: flex; justify-content: space-between; align-items: center; padding: 0 0 7px 0; border-bottom: 0;}
  .wrap-notice .dtl li:nth-child(n+5) {display: block;}
  .wrap-notice .dtl li:nth-child(n+7) {display: none;}
  .wrap-notice .dtl p {display: none;}
  .wrap-notice .dtl strong {font-size: 16px;}
  .wrap-notice .dtl strong:hover {color: #e84855;}
  .wrap-notice .dtl span {margin-top: 0;}
  .wrap-notice .more {margin-top: 170px;}
  .wrap-notice .more a {padding: 8px 16px 8px 20px; font-size: 11px;}
  .wrap-notice .more a::after {margin-top: -2px;}
  .wrap-notice .list .box > li.admission-li .detail strong {height:auto;}
}