@charset "UTF-8";

.wrap-notice {position:relative; overflow:hidden;letter-spacing: -0.05em;min-height: 360px;}
.wrap-notice .title {display:table;height: 60px; font-size:16px; font-family:'Noto Light';color: rgba(255,255,255,0.7);cursor: pointer;background-color: #091129;z-index: 10;position: relative;}
.wrap-notice .title::after{content:""; display: block; position: absolute; right: 0; width: 1px; height: 100%; background-color: rgba(255,255,255,0.2);}
.wrap-notice .title span{display: table-cell; vertical-align: middle; width: 100%; text-align: center; padding: 0 20px; position: relative;}

.wrap-notice > ul > li{display:inline-block;vertical-align: top;}
.wrap-notice > ul > li.on .title{background-color: white;color: #333333;font-family: 'Noto DemiLight';}
.wrap-notice > ul > li.on .title span::after{content:""; display: block; position: absolute; width: 10px; height: 7px; background: url(../images/menu-choice.png); bottom: 0; left: 50%; margin-left: -5px;}

.wrap-notice > ul > li .more{width: 100%; height: 60px; background: url(../images/link-more.png) no-repeat right 35px center #091129; text-indent: -9999px; display: block; position: absolute; top: 0; right: 0; display: none;}
.wrap-notice > ul > li.on .more{display: block;}

.wrap-notice > ul > li .list{display: none;background-color: white;padding: 23px 35px 24px 35px;position: absolute;top: 60px;left: 0;width: 100%;}
.wrap-notice > ul > li.on .list{display: block;}
.wrap-notice > ul > li.on .list li::after{content:""; display: table; clear: both;}

.wrap-notice > ul > li .list li:first-child{padding-bottom: 25px; border-bottom: 1px solid #dddddd;}
.wrap-notice > ul > li .list li:first-child a{padding: 0; border-bottom: 0;}

.wrap-notice > ul > li .date-wrap{float: left; font-family: 'Montserrat'; font-weight: 600; text-align: center; border: 4px solid #eeeeee; width: 90px; height: 90px; display: table;}
.wrap-notice > ul > li .date-box{display: table-cell; vertical-align: middle; width: 100%;}
.wrap-notice > ul > li .date-wrap .big-date{display: block; font-size: 40px; color: #111111; line-height: 1; margin-bottom: 5px;}
.wrap-notice > ul > li .date-wrap .small-date{font-size: 16px; color: #888888;}
.wrap-notice > ul > li .date-title{float: left; margin-left: 20px; height: 90px; display: table; width: calc(100% - 110px); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; table-layout: fixed;}
.wrap-notice > ul > li .date-title p{font-size: 20px; color: #333333; width: 100%;  display: table-cell; vertical-align: middle;white-space: normal;}
.wrap-notice > ul > li a{display: block; width: 100%; height: 100%;}
.wrap-notice > ul > li a::after{content:""; display: table; clear: both;}

.wrap-notice > ul > li .list ul {height: 251px;overflow: hidden;}
.wrap-notice > ul > li .list li .article-title{float: left; color: #666666; font-family: 'Noto Light'; width: calc(100% - 80px); text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.wrap-notice > ul > li .list li .date{float: right; font-family: 'Noto Light'; color: #666666;}
.wrap-notice > ul > li .list li a{padding: 10px 0; border-bottom: 1px solid #dddddd;}

@media all and (max-width: 1400px) {
  .wrap-notice > ul > li .list li:first-child{padding-bottom: 21px;}
  .wrap-notice .title span{padding: 0 10px;}
  .wrap-notice > ul > li .more{background-position: right 15px center;}
}

@media all and (max-width: 1024px) {
  .wrap-notice .title{font-size: 14px;}
  .wrap-notice > ul > li .list li a{padding:7px 0;}
  .wrap-notice > ul > li .date-title{display: block;height:80px;}
  .wrap-notice > ul > li .date-title p{font-size:18px;}
}

@media all and (max-width: 420px) {
  .wrap-notice .title::before{content:""; display: block; position: absolute; width: 100%; height: 1px; bottom: 0; background-color: rgba(255,255,255,0.2);}
  .wrap-notice > ul > li .list{padding: 20px 20px 25px 20px;}
  .wrap-notice > ul > li .date-wrap{float: none; margin: 0 auto;}
  .wrap-notice > ul > li .date-title{float: none; height: 60px; padding: 10px 0; text-align: center; width: 100%; margin-left: 0;}
  .wrap-notice > ul > li .date-title p{font-size: 16px;}
  .wrap-notice .title span{padding: 0 5px;}
}