@charset "UTF-8";

.wrap-notice{background-color: #f8f8f8;}
.wrap-notice .container {position:relative; height: 100%; min-height: 540px; padding-top: 80px;}
.wrap-notice .container::after{content:""; display: table; clear: both;}
.wrap-notice .wrap-notice-title{float: left;}
.wrap-notice .wrap-notice-title h1{font-size: 60px; color: #262828; font-family: 'Mont Light';}
.wrap-notice .wrap-notice-title h1 span{font-family: 'Mont Bold';}
.wrap-notice .container > ul{float: right; margin-top: 25px; padding-right: 6%;}
.wrap-notice .container > ul::after{content:""; display: table; clear: both;}
.wrap-notice .list{position: absolute; width: 100%; left: 0; bottom: 97px; display: none;}
.wrap-notice .list ul::after{content:""; display: table; clear: both;}
.wrap-notice .list li{float: left; width: 22.3%; margin-right: 3.6%; background-color: white; transition: all .3s; position: relative;}
.wrap-notice .list li::before{content:""; display: block; position: absolute; width: 100%; height: 100%; background: transparent; border: 1px solid #c1c1c1; transition: all .3s;}
/*.wrap-notice .list li::after{content:"NEW"; display: inline-block; position: absolute; left: 0; bottom: -18px; font-family: 'Mont SemiBold'; font-size: 12px; color:*/
.wrap-notice .list .is-new::after{content:"NEW"; display: inline-block; position: absolute; left: 0; bottom: -18px; font-family: 'Mont SemiBold'; font-size: 12px; color:

 white; text-transform: uppercase; text-align: center; transition: all .3s; background-color: #c7a582; padding: 9.5px 32.3px;}
.wrap-notice .list li:hover::after{background-color: #007890;}
.wrap-notice .list li.nodata::after{display: none !important;}
.wrap-notice .list li a{width: 100%; height: 100%; display: block; padding: 21px 30px 23px 28px; position: relative; z-index: 2;}
.wrap-notice .list .article-title{position: relative; padding-bottom: 20px; margin-right: 30px;}
.wrap-notice .list .article-title span{font-size: 22px; line-height: 30px; color: #000000; font-family: 'Noto Regular'; height: 60px; overflow: hidden; display: block;}
.wrap-notice .list .article-title::after{content:""; display: block; position: absolute; left: 0; bottom: 0; width: 54px; height: 1px; background-color: #000000; transition: all .3s;}
.wrap-notice .list .article-content{font-size: 18px; line-height: 25px; color: #666666; height: 50px; margin-right: 30px; margin-top: 15px; overflow: hidden; margin-bottom: 30px;}
.wrap-notice .list li:hover{box-shadow: 7px 7px 9px 0px rgba(0, 0, 0, 0.05);}
.wrap-notice .list li:hover::before{border: 2px solid #007890;}
.wrap-notice .list li:hover .article-title span{color: #007890;}
.wrap-notice .list li:hover .article-title::after{width: 100%; background-color: #007890;}
.wrap-notice .list li:last-child{margin-right: 0;}
.wrap-notice .list li .date{text-align: right; font-family: 'Mont Regular'; font-size: 14px; color: #b9b9b9; display: block;}
.wrap-notice .notice-box{float: left; cursor: pointer;}
.wrap-notice .notice-box .title{font-family: 'Noto Regular'; font-size: 32px; color: #979797; padding: 0 35px; position: relative;}
.wrap-notice .notice-box.on .title{color: #007890;}
.wrap-notice .notice-box.on .title::before{content:""; display: block; position: absolute; width: 12px; height: 15px; background: url(../images/title_selected.png); left: 17%; top: -8%;}
.wrap-notice .notice-box .title::after{content:""; display: block; position: absolute; right: 0; top: 50%; margin-top: -12px; width: 1px; height: 24px; background-color: #c5c5c5;}
.wrap-notice .notice-box:last-child .title::after{display: none;}
.wrap-notice .notice-box .more{position: absolute; top: 110px; right: 0; width: 40px; height: 40px; background: url(../images/notice_more.png); display: block; text-indent: -9999px; display: none;}
.wrap-notice .notice-box.on .more{display: block;}
.wrap-notice .notice-box.on .list{display: block;}

@media all and (max-width: 1540px) {
	.wrap-notice .list{margin: 0 20px; width: calc(100% - 40px);}
	.wrap-notice .notice-box .more{right: 20px;}
}

@media all and (max-width: 1250px) {
	.wrap-notice .container > ul{padding-right: 4%;}
	.wrap-notice .notice-box.on .title::before{left: 8%;}
	.wrap-notice .notice-box .title{padding: 0 20px;}
}

@media all and (max-width: 1023px) {
	.wrap-notice .container{min-height: 334px; padding-top: 35px;}
	.wrap-notice .wrap-notice-title h1{font-size: 40px;}
	.wrap-notice .container > ul{margin-top: 15px;}
	.wrap-notice .list li a{padding: 12px 20px 15px 20px;}
	.wrap-notice .notice-box .title{font-size: 22px; padding: 0 26px;}
	.wrap-notice .notice-box .title::after{height: 16px; margin-top: -8px;}
	.wrap-notice .list .article-title{padding-bottom: 12px; margin-right: 0;}
	.wrap-notice .list .article-title span{font-size: 16px; line-height: 20px; height: 40px;}
	.wrap-notice .list .article-content{font-size: 14px; line-height: 18px; height: 36px; margin-bottom: 12px; margin-top: 7px;}
	.wrap-notice .list{bottom: 60px;}
	.wrap-notice .list li::after{padding: 4px 15.3px; bottom: -12px; font-size: 8px;}
	.wrap-notice .notice-box .more{top: 46px;}
}

@media all and (max-width: 860px) {
	.wrap-notice .notice-box .title{padding: 0 15px;}
	.wrap-notice .notice-box.on .title::before{left: 3%;}
}

@media all and (max-width: 768px) {
	.wrap-notice .container{padding-top: 20px; min-height: 213px;}
	.wrap-notice .container > ul{margin-top: 7px;}
	.wrap-notice .wrap-notice-title h1{font-size: 24px;}
	.wrap-notice .notice-box .title{font-size: 16px; padding: 0 8px;}
	.wrap-notice .notice-box .title{padding-left: 0;}
	.wrap-notice .notice-box.on .title::before{display: none;}
	.wrap-notice .notice-box .title::after{height: 12px; margin-top: -6px;}
	.wrap-notice .notice-box.on .list li .con{display: inline-block; max-width: calc(100% - 60px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
	.wrap-notice .list{bottom: auto; top: 70px;}
	.wrap-notice .list li::after{position: static; display: inline-block; vertical-align: top; font-size: 10px; padding: 2.5px 10px; margin-top: 1px;}
	.wrap-notice .list li{width: 100%; float: none; margin-right: 0; background-color: transparent; margin-bottom: 10px; padding-left: 12px;}
	.wrap-notice .list li{margin-bottom: 5px;}
	.wrap-notice .list li:last-child{margin-bottom: 0;}
	.wrap-notice .list li:hover{box-shadow: none;}
	.wrap-notice .list li::before{width: 3px; height: 3px; background-color: #007890; left: 0; top: 50%; margin-top: -1.5px; border: 0;}
	.wrap-notice .list li:hover::before{border: 0;}
	.wrap-notice .list li a{padding: 0;}
	.wrap-notice .list .article-title{padding-bottom: 0;}
	.wrap-notice .list .article-title span{height: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
	.wrap-notice .list .article-title::after{display: none;}
	.wrap-notice .list .article-content{display: none;}
	.wrap-notice .list li .date{display: none;}
	.wrap-notice .notice-box .more{width: 20px; height: 20px; background-size: cover; top: 30px;}

	.wrap-notice .list .is-new::after{left:inherit;bottom:0;padding:5px;right: 0;}
}

@media all and (max-width: 460px) {
	.wrap-notice .notice-box .title{font-size: 14px; padding: 0 5px;}
	.wrap-notice .notice-box .more{width: 15px; height: 15px; background-size: cover;}
}

@media all and (max-width: 400px) {
	.wrap-notice .wrap-notice-title h1{font-size: 18px;}
	.wrap-notice .container > ul{margin-top: 2px;}
	.wrap-notice .notice-box .more{top: 25px;}
}