@charset "utf-8";

.wrap-notice .title {display: flex; justify-content: space-between; align-items: center;}
.wrap-notice .title strong {display: block; margin-right: 30px ; font-family: pp; font-size: 32px; line-height: 1.1; color: #323131;}

.wrap-notice .box-tab {display: flex; align-items: center;}
.wrap-notice .tab {display: flex; justify-content: space-between; align-items: center; padding-top: 2px;}
.wrap-notice .btn-tab {margin-top: 1px;}
.wrap-notice .btn-tab button {display: flex; justify-content: center; height: 35px; padding: 0 15px; line-height: 33px; font-family: ppr; font-size: 19px; color: #323131;}
.wrap-notice .btn-tab.on button {background: #1163FF; border-radius: 100px; color: #fff;}
.wrap-notice .btn-tab .more {position: absolute; right: 0; top: 5px; display: none; font-family: pps; font-size: 15px; letter-spacing: 0; color: #1163FF;}
.wrap-notice .btn-tab.on .more {display: flex; align-items: center;}
.wrap-notice .btn-tab .more::after {content: ''; display: block; width: 8px; height: 8px; margin-left: 7px; background: url('../images/btn-news-more.png') no-repeat center; transition: transform .35s;}
.wrap-notice .btn-tab .more:hover::after {transform: rotate(270deg);}
.wrap-notice .btn-tab .more::before {content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #1163FF;}

.wrap-notice .list {display: none; margin-top: 30px; border-bottom: 1px solid #848484;}
.wrap-notice .list.on {display: block;}
.wrap-notice .list .line {padding: 20px 0; border-top: 1px solid #eeeeee;}
.wrap-notice .list .line a {display: block;}
.wrap-notice .list .subject {font-family: ppm; font-size: 20px; color: #000000;}
.wrap-notice .list .subject strong {overflow: hidden; display: block; text-overflow: ellipsis; white-space: nowrap;}
.wrap-notice .list .subject span {position: relative;}
.wrap-notice .list .subject span::after {content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: rgba(0,0,0,.3); transition: width .35s;}
.wrap-notice .list .line:hover .subject span::after {width: 100%;}
.wrap-notice .info {display: flex; align-items: center; padding-top: 8px;}
.wrap-notice .info .date {font-family: pr; font-size: 16px; color: #999999;}
.wrap-notice .info ul {display: flex; align-items: center;}
.wrap-notice .info li {position: relative; margin-right: 15px; padding-right: 15px; font-family: ppr; font-size: 16px; color: #666666;}
.wrap-notice .info li::after {content: ''; position: absolute; right: 0; top: 5px; width: 1px; height: 11px; background: #bbbbbb;}
.wrap-notice .info li:last-child {padding-right: 0; margin-right: 0;}
.wrap-notice .info li:last-child::after {display: none;}
.wrap-notice .info .new {position: relative; margin-left: 25px; font-family: pb; font-size: 14px; color: #009ffa;}
.wrap-notice .info .new::after {content: ''; position: absolute; right: -9px; top: 0; width: 4px; height: 4px; background: #19a8fa; border-radius: 100%;}
.wrap-notice .list .nodata {padding: 30px 0; text-align: center;}

@media screen and (max-width: 1450px) {
  .wrap-notice .title strong {font-size: 25px;}
  .wrap-notice .btn-tab .more {font-size: 13px;}

  .wrap-notice .list .line {padding: 20px 0;}
  .wrap-notice .list .subject {font-size: 18px;}
  .wrap-notice .info li {font-size: 13px;}
}

@media screen and (max-width: 1150px) {
  .wrap-notice .btn-tab button {height: 25px; padding: 0 12px; line-height: 24px; font-size: 15px;}
}

@media screen and (max-width: 1100px) {
  .wrap-notice .title strong {margin-right: 20px; font-size: 20px;}
  .wrap-notice .btn-tab .more {font-size: 12px;}

  .wrap-notice .list {margin-top: 20px;}
  .wrap-notice .list .subject {font-size: 16px;}
  .wrap-notice .list .line {padding: 13px 0;}
  .wrap-notice .info {padding-top: 3px;}
  .wrap-notice .info .date {font-size: 14px;}
  .wrap-notice .info li {margin-right: 10px; padding-right: 10px; font-size: 14px;}
  .wrap-notice .info li::after {height: 8px;}
  .wrap-notice .info .new {font-size: 12px;}
  .wrap-notice .info .new::after {width: 3px; height: 3px;}
}

@media screen and (max-width: 870px) {
  .wrap-notice .info .date {display: none;}
}

@media screen and (max-width: 650px) {
  .wrap-notice .tab {padding-top: 19px;}
  .wrap-notice .info .date {display: block;}
  .wrap-notice .box-tab {flex-direction: column; align-items: flex-start;}
  .wrap-notice .btn-tab button {height: 35px; line-height: 34px; font-size: 18px;}
  .wrap-notice .title strong {font-size: 30px;}
  .wrap-notice .list .subject {font-size: 18px;}
  .wrap-notice .info li {font-size: 16px;}
  .wrap-notice .info li::after {height: 11px;}
  .wrap-notice .info .new {margin-left: 15px;}
  .wrap-notice .info .date {font-size: 16px;}
  .wrap-notice .btn-tab .more {font-size: 17px;}
}