@charset "UTF-8";

.notice-title{font-size: 32px; letter-spacing: 3px; padding-top: 40.5px; position: relative; margin-left: 200px;font-weight: 800;color: #000000;text-shadow: 2px 0 0 #ffffff, -2px 0 0 #c9c9c9, 0 2px 0 #c5bebe, 0 -2px 0 #ffffff, 2px 2px 0 #c5bebe, -2px -2px 0 #c5bebe, 2px -2px 0 #c5bebe, -2px 2px 0 #c5bebe;}
.notice-title strong{letter-spacing: 15px; display: block; overflow: hidden; font-family:'Noto Medium';}
.fonts{float: left;}
.notice-title::before{content: "";position: absolute; width: 50px; height: 50px; display: block; background-image: url(../images/shape_1.png); bottom: -10px; left: 150px;}
.notice-title strong::after{content: ""; width: 200px; height: 2px; background-color: black; float: left; display: inline-block; margin-top: 23px; margin-left: 0;}
.notice-more-btn{float: right; width: 40px; height: 40px; border: 1px solid black; position: relative; top: -50px;}
.notice-more-logo{width: 24px; height: 24px; background: url(../images/more_btn.png) no-repeat center; margin: 8px 0 0 8px;}
.notice-more-logo a{display: block; width: 100%; height: 100%;}

.wrap-notice{position: relative; z-index: 2;}
.wrap-notice .list{clear: both; background-color: rgba(255,255,255,0.95); border-radius: 20px;  box-shadow: 0px 15px 22px rgba(0,0,0,0.21); overflow: hidden; margin-top: 20px;}
.con {overflow: hidden; font-size: 20px; border-bottom: 1px solid #e4e4e5; font-family:'Noto DemiLight';}
.wrap-notice .list li:last-child{border-bottom: 0;}
.wrap-notice .list li:last-child .con{border-bottom: 0;}
/*.wrap-notice .list a{color: #333333; display: block; padding: 25px 30px; overflow: hidden;}*/
.wrap-notice .list a{color: #333333; display: block; padding: 15px 30px; overflow: hidden;}
.wrap-notice .list li p{text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width: 65%; float: left;}
.wrap-notice .list li:hover{background-color: #0767de;}
.wrap-notice .list li:hover a{color: white;}
.wrap-notice .list li:hover .date{color: rgba(255,255,255,0.45);}
.notice-more-arrow{width: 10px; height: 17px; background-image: url(../images/arrow_btn.png); background-size: cover; float: left; margin-top: 6.5px; position: relative; left: 50px;}
.date{float: right; font-weight: 100; color: rgba(51,51,51,0.45);}
.more{display: none;}


@media all and (max-width:1544px){
  .notice-title{margin-left: 100px;}
  .notice-title strong::after{width: 130px;}
}

@media all and (max-width:1250px){
  .notice-title{margin-left: 0;}
  .wrap-notice{margin-bottom: 30px;}
}

@media all and (max-width:767px){
  .notice-title{font-size: 22px;}
  .notice-title strong::after{width: 50px;}
  .wrap-notice .list a{padding: 20px 10px;}
  .wrap-notice .list li p,.date{font-size: 14px;}
  .notice-more-arrow{left: 10px; margin-top: 3px;}
}