@charset "UTF-8";

/* 공지사항 */
.wrap-notice {padding: 60px 0; text-align: center;}
.wrap-notice .container {position: relative; display: inline-block; width: 100%; text-align: left;}
.wrap-notice .container::after {content: ''; position: absolute; left: -176px; bottom: -234px; z-index: -1; width: 627px; height: 627px; background: url(../images/bg-notice.jpg) no-repeat center;}
.wrap-notice .title {position: relative; left: -100px; float: left; width: 560px; opacity: 0;}
.wrap-notice .title .subject {margin-bottom: 40px; font-family: 'Play Regular'; font-size: 60px; line-height: 1; color: #727272;}
.wrap-notice .title .subject strong {display: block; margin-top: -4px; font-family: 'Play Bold'; font-size: 60px; color: #0056d6;}
.wrap-notice .list {display: none; float: left; width: calc(100% - 560px); min-height: 578px; padding-top: 12px;}
.wrap-notice .list.on {display: block;}
.wrap-notice .list ul {overflow: hidden; display: flex; flex-wrap: wrap; gap: 40px 0;}
.wrap-notice .list li {position: relative; top: 100px; width: 33.333%; padding: 0 40px; opacity: 0;}
.wrap-notice .list li::after {content: ''; position: absolute; left: 0; top: 0; width: 1px; height: 140%; background: #cfcfcf;}
.wrap-notice .list li::before {content: ''; position: absolute; left: -1px; top: 0; z-index: 1; width: 3px; height: 0%; background: #094e94; opacity: 0; transition: height .75s;}
.wrap-notice .list li:hover::before {height: 100%; opacity: 1;}
.wrap-notice .list .cate {display: flex; align-items: center; justify-content: center; position: absolute; right: 45px; top: 5px; width: 80px; height: 80px; background: #daeaff; padding: 0 10px; border-radius: 100%; word-break: break-all; font-family: 'Dream Medium'; font-size: 14px; line-height: 1.1; text-align: center; color: #002f6a;}
.wrap-notice .list .date {padding-bottom: 13px; font-family: 'Play Bold'; font-size: 18px; color: #8a8a8a;}
.wrap-notice .list .date strong {display: block; margin-top: -10px; margin-bottom: -4px; font-size: 80px; line-height: 1; /*color: #ccc;*/ color:#8e8e8e}
.wrap-notice .list .con strong {overflow: hidden; display: block; display: -webkit-box; height: 70px; margin-bottom: 13px; font-family: 'Dream Medium'; font-size: 21px; letter-spacing: -1px; line-height: 1.6; color: #333; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.wrap-notice .list .con strong span {position: relative; background: linear-gradient(to bottom, transparent 94%, #8c8c8c 0) left center no-repeat; background-size: 0; transition: .4s;}
.wrap-notice .list a:hover .con strong span{background-size: 100% auto;}
.wrap-notice .list .con p {overflow: hidden; display: -webkit-box; height: 73px; font-family: 'Dream Light'; font-size: 16px; line-height: 1.6; color: #666; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
.wrap-notice .choose {position: relative; max-width: 310px;}
.wrap-notice .choose ul {overflow: hidden; max-height: 0; position: absolute; left: 0; top: calc(100% + 2px); width: 100%; transition: max-height .75s;}
.wrap-notice .choose.on ul {max-height: 427px;}
.wrap-notice .choose ul button {position: relative; display: block; width: 100%; background: #0078fe; padding: 16px 27px; border-bottom: 1px solid rgba(255, 255, 255, .4); font-family: 'Dream Medium'; font-size: 20px; text-align: left; color: #fff;}
.wrap-notice .choose ul button:hover {background: #ffa900; color: #000;}
.wrap-notice .choose .now {position: relative; display: block; width: 100%; background: #0078fe; padding: 16px 27px; font-family: 'Dream Medium'; font-size: 20px; text-align: left; color: #fff;}
.wrap-notice .choose .now::after {content: ''; position: absolute; right: 26px; top: 26px; width: 13px; height: 12px; background: url('../images/arrow-notice.png') no-repeat center center;}
.wrap-notice .recentBbsMore {display: none;}
.wrap-notice .more-notice {position: absolute; right: -80px; top: 0; width: 60px; height: 60px; background: #fff url('../images/btn-notice-more.png') no-repeat center; border: 1px solid #e1e1e1; text-indent: -999999px;}
.wrap-notice .more-notice:hover {border-color: #0078fe;}

@media all and (max-width: 1700px) {
  .wrap-notice .title {width: 440px;}
  .wrap-notice .list {width: calc(100% - 440px);} 
}

@media all and (max-width: 1500px) {
  .wrap-notice .title {width: 330px;}
  .wrap-notice .list {width: calc(100% - 330px);} 
  .wrap-notice .more-notice {left: 0; right: auto; top: auto; bottom: -80px; width: 50px; height: 50px;}
}

@media all and (max-width: 1370px) {
  .wrap-notice .title {width: 100%;}
  .wrap-notice .title .subject {margin-bottom: 0;}
  .wrap-notice .list {width: 100%; padding-top: 55px; min-height: 662px;}
  .wrap-notice .choose {position: absolute; right: 0; top: 0; z-index: 1; width: 310px;}
  .wrap-notice .choose .now {padding: 11px 27px;}
  .wrap-notice .more-notice {left: -80px; right: auto; top: 0; bottom: auto;}
}

@media all and (max-width: 1200px) {
  .wrap-notice {padding: 57px 0 70px 0; }
  .wrap-notice .container::after {background-size: 50%;}
  .wrap-notice .title .subject {font-size: 60px;}
  .wrap-notice .title .subject strong {font-size: 70px;}
  .wrap-notice .choose {top: 10px;}
  .wrap-notice .choose .now {font-size: 17px;}
  .wrap-notice .choose .now::after {top: 19px;}
  .wrap-notice .choose ul button {font-size: 16px;}
  .wrap-notice .list {padding-top: 45px;  min-height: 515px;}
  .wrap-notice .list ul {gap: 40px 0; padding-top: 15px;}
  .wrap-notice .list li {padding: 0 30px;}
  .wrap-notice .list .date {font-size: 16px;}
  .wrap-notice .list .date strong {font-size: 60px;}
  .wrap-notice .list .con strong {height: 50px; font-size: 18px; line-height: 1.4;}
  .wrap-notice .list .con p {height: 69px; font-size: 15px;}
  .wrap-notice .list .cate {top: -12px;}
  .wrap-notice .more-notice {width: 46px; height: 46px;}
}

@media all and (max-width: 950px) {
  .wrap-notice .list li {flex: 1 50%; width: 50%; padding: 0 20px;}
  .wrap-notice .list li:nth-child(n + 5) {display: none;}
}

@media all and (max-width: 768px) {
  .wrap-notice {padding: 52px 0 48px 0;}
  .wrap-notice .title .subject {font-size: 40px;}
  .wrap-notice .title .subject strong {font-size: 50px;}
  .wrap-notice .list {padding-top: 35px; min-height: 462px}
  .wrap-notice .list ul {gap: 20px 0;}
  .wrap-notice .list li {flex: 1 100%; width: 100%; margin-bottom: 10px;}
  .wrap-notice .list .date {font-size: 14px;}
  .wrap-notice .list .date strong {font-size: 45px;}
  .wrap-notice .list .con strong {height: 22px; font-size: 16px; -webkit-line-clamp: 1;}
  .wrap-notice .list .con p {height: 19px; font-size: 14px;  -webkit-line-clamp: 1;}
  .wrap-notice .list .cate {right: 0; top: -16px; width: 70px; height: 70px; font-size: 12px;}
  .wrap-notice .list li:nth-child(n + 4) {display: none;}
  .wrap-notice .choose {top: 0; width: 180px;}
  .wrap-notice .choose .now {font-size: 15px;}
  .wrap-notice .choose .now::after {top: 16px;}
  .wrap-notice .choose ul button {font-size: 14px;}
  .wrap-notice .more-notice {left: -70px; width: 43px; height: 43px;}
}