@charset "UTF-8";

.wrap-notice{line-height:1.2;min-height: 420px;}
.wrap-notice .notice_inner{position:relative;display: inline-block;width: 100%;text-align: right;padding-right: 12%;}
.wrap-notice ul li .recentBbsTab{color: #848484;font-size: 20px;font-family:'Noto Regular';cursor:pointer;margin:0;padding: 0 10px 0 10px;background:none;}
.wrap-notice > ul > li{display:inline-block;}
.wrap-notice ul li .list{display:none;position:absolute;left: 0;top: 75px;width:100%;box-sizing:border-box;text-align:left;}
.wrap-notice ul li.active .list{display:block;}
.wrap-notice ul li.active input{color:#333;font-family:'Noto Medium';}
.wrap-notice ul li.active:before{content: '';background:url('../images/tab_on.png') no-repeat center center;width:35px;height:10px;display: block;vertical-align: top;position: relative;top:0;left:50%;margin-left:-18px}

.wrap-notice ul li .list li{border-bottom:1px solid #ddd;padding-bottom: 35px;margin-bottom: 35px;width: calc(100% / 2 - 25px);display: inline-block;vertical-align: top;background: url('../images/go_btn.png') no-repeat right bottom;}
.wrap-notice ul li .list li + li{margin-left: 5%;}
.wrap-notice ul li .list li:nth-child(3){margin-left:0;}
.wrap-notice ul li .list li strong{display:block;font-size:16px;margin: 5px 0;}
.wrap-notice ul li .list li span{font-size:14px;}
.wrap-notice ul li .list li .date{display:block;}
.wrap-notice ul li .more{position: absolute;top: -64px;right: 0;}
.wrap-notice ul li .more a{display:block;padding:5px 0;background:url('./../images/notice_plus.png') center center no-repeat;text-indent: -9999px;width: 30px;height: 30px;text-align: left;}

.wrap-notice > strong{font-family: 'Noto Bold';font-size:34px;position: absolute;top: 0;left: 0;color:#000;background: url('../images/fnct_title_bg.png') no-repeat left top;padding-top:9px;}
.wrap-notice ul li .con > a{display: block;}
.wrap-notice ul li .con span.date{display: inline-block;vertical-align: top;text-align: center;color:#474747;font-size:50px;font-family: 'Noto Regular';line-height: 1.2;margin-top: -7px;}
.wrap-notice ul li .con span.date p{font-size: 14px;letter-spacing: 0;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;font-family: 'Noto Regular';}
.wrap-notice ul li .con .conts{display: inline-block;vertical-align: top;width: 78%;margin-left: 21px;}
.wrap-notice ul li .con .conts strong{font-size: 18px;overflow: hidden;display: inline-block;vertical-align: top;height: 50px;font-family: 'Noto Medium';letter-spacing: -1px;line-height: 1.3;position: relative; background: linear-gradient(to bottom, transparent 75%, rgba(0, 162, 255, 0.3) 0) left center no-repeat; background-size: 0; transition: background-size 1s;}
.wrap-notice ul li .con .conts span{color: #666;overflow: hidden;height: 42px;display: block;font-size: 16px;margin-top: 10px;line-height: 20px;}

.wrap-notice ul li .list li:hover .conts strong{background-size: 100% auto;}
.wrap-notice ul li .list li:hover{background: url('../images/go_btn_on.png') no-repeat right bottom;}

@media all and (min-width:1921px) {

}

@media all and (max-width:1420px) {
.wrap-notice{max-height: 380px;}
.wrap-notice ul li .con .conts strong{height:25px;background: linear-gradient(to bottom, transparent 55%, rgba(0, 162, 255, 0.3) 0) left center no-repeat;background-size: 0; transition: background-size 1s;}
.wrap-notice ul li .list li{width:100%;display: block;padding-bottom: 10px;margin-bottom: 20px;}
.wrap-notice ul li .list li + li{margin-left:0;}
.wrap-notice ul li .con .conts strong,
.wrap-notice ul li .con .conts span{display: block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
}

@media all and (max-width:1023px) {
.wrap-notice{max-height: 430px;margin-bottom:40px;overflow: hidden;}
}


@media all and (max-width:767px) {
.wrap-notice{min-height:450px;width:100%; margin:0 auto 40px;}
.wrap-notice > strong{font-size:28px;}
.wrap-notice ul li .recentBbsTab{font-size:17px;padding: 0 5px 0 5px;}
.wrap-notice ul li .con .conts{width:calc(100% - 90px)}
.wrap-notice ul li .list{top:120px;}
.wrap-notice ul li .list li + li + li + li{display: none;}
.wrap-notice .notice_inner{padding-left: 0;padding-top: 62px;text-align:left;}
.wrap-notice ul li .more{top:-53px;}
}