@charset "UTF-8";

/* Notice */
/* .wrap-notice {margin: 0 auto;padding: 0 20px;width: 100%;max-width: 1340px;} */
.wrap-notice {display: flex;}
.wrap-notice .left {min-width: 380px;}
.wrap-notice .right {position: relative;width: 100%;}
.wrap-notice .title h2 {line-height: 1.2 !important;}
.wrap-notice .title h2 .text-blue {color: #004A87 !important;}
.wrap-notice .title h2 .text-blue.text-deco-dot::after {background: #004A87 !important;}
.wrap-notice .title .more {display: block;margin-top: 25px;width: 50px;height: 50px;background: #fff url('../images/btn-notice-more.png') no-repeat center center;text-indent: -999999px;border-radius: 50%;border: 1px solid #ada9a9;transition: .4s;}
.wrap-notice .title .more:hover {transform: rotateZ(90deg);}
.wrap-notice .button {margin-top: 250px;}
.wrap-notice .button button {display: none; width: 56px; height: 56px; border: 1px solid #9fa0a0; border-radius: 100%; text-indent: -999999px;}
.wrap-notice .button .prev {background: url('../images/btn-notice-prev.png') no-repeat center center; transition: .5s;}
.wrap-notice .button .prev:hover {background: #004A87 url('../images/btn-notice-prev-hover.png') no-repeat center center;}
.wrap-notice .button .next {margin-left: 10px; background: url('../images/btn-notice-next.png') no-repeat center center; transition: .5s;}
.wrap-notice .button .next:hover {background: #004A87 url('../images/btn-notice-next-hover.png') no-repeat center center;}
.wrap-notice .box {display: inline-block; margin-right: 70px; vertical-align: middle;}
.wrap-notice .box .more {display: none;}
.wrap-notice .tab {position: relative; display: inline-block;font-size: 28px;font-weight: 600;color: #999;transition: color 0.3s;}
.wrap-notice .tab::before {content: ''; position: absolute;left: 0;bottom: 0;width: 0%;height: 12px;background: #d3e5ff;transition: 0.2s;}
.wrap-notice .tab::after {content: ''; position: absolute; left: 50%; top: -19px; width: 40px; height: 10px;}

.wrap-notice .tab:hover::before,
.wrap-notice .tab:hover::after,
.wrap-notice .tab.on::before,
.wrap-notice .tab.on::after {display: block;}

.wrap-notice .tab:hover,
.wrap-notice .tab.on {color: #004A87;}
.wrap-notice .tab.on::before, .wrap-notice .tab:hover::before {width: 100%;}
.wrap-notice .tab span {position: relative; z-index: 1;}

.wrap-notice .list {display: none;grid-template-columns: repeat(2, 1fr);gap: 60px 40px;position: absolute; left: 0; top: 70px; width: 100%;}
.wrap-notice .list li {position: relative;padding-top: 4px;}
.wrap-notice .list li::before {content: '';position: absolute;top: 0;left: 0;width: 40px;height: 3px;background: #004A87;}
.wrap-notice .on .list {display: grid;}

.wrap-notice .list .subject {display: block;overflow: hidden;margin: 10px 20px 15px 0;height: 85px;font-size: 20px;line-height: 1.4;color: #111;letter-spacing: -1px;}
.wrap-notice .list .subject:hover {color: #004A87;}
.wrap-notice .list .date {display: block;font-size: 17px; color: #666;}

@media all and (max-width: 1590px) {
  .wrap-notice {min-height: 535px;}
  .wrap-notice .left {min-width: 320px;}
  .wrap-notice .button {position: absolute; right: 80px; top: 90px; margin-top: 0;}
  .wrap-notice .title p {display: inline-block;margin-left: 20px;}
  .wrap-notice .title strong {font-size: 50px;}
  .wrap-notice .box {margin-right: 40px;}
  .wrap-notice .list {top: 75px;}
}

@media all and (max-width: 1024px) {
  .wrap-notice {flex-direction: column; min-height: 535px;}
  .wrap-notice .right {margin-top: 40px;}
  .wrap-notice .list {gap: 60px 20px;}
  .wrap-notice .title .more {position: absolute; right: 30px; top: 62px; margin-top: 0;}
}

@media all and (max-width: 767px) {
  .wrap-notice {min-height: 645px}
  .wrap-notice .button {display: none;}
  .wrap-notice .title strong {font-size: 40px;}
  .wrap-notice .title p {font-size: 17px;}
  .wrap-notice .title .more {right: 0px; top: 35px;}
  .wrap-notice .tab {font-size: 20px;}
  .wrap-notice .list {grid-template-columns: repeat(1, 1fr);top: 40px;gap: 0;}
  .wrap-notice .list li {padding: 24px 0;border-bottom: 1px solid #ddd;}
  .wrap-notice .list li::before {display: none;}
  .wrap-notice .list .subject {margin: 0 0 16px 0;height: 52px;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;}
  .wrap-notice .list .date {font-size: 14px;text-align: right;}
}