@charset "utf-8";

.wrap-notice-02 {position:relative;}
.wrap-notice-02 > ul {position: relative;height: 38rem;display: flex;gap: 2rem;padding-left: 1rem;}
.wrap-notice-02 > ul > li {display: inline-block; vertical-align: middle;}

/* tab */
.wrap-notice-02 > ul > li .list {position: absolute; display: none; width: 100%; left: 0; top: 9rem;}
.wrap-notice-02 > ul > li.active .list {display: block;}
.wrap-notice-02 > ul > li .title{position:relative;}
.wrap-notice-02 > ul > li + li .title{padding-left: 2rem; margin-left: 0.5rem;}
.wrap-notice-02 > ul > li + li .title:before{content:'';width:0.1rem;height: 2rem;display:block;position:absolute;left: 0;top: 2.5rem;background: #cacaca;}

.wrap-notice-02 .title button{font-size: 3.2rem; color: #323232;}
.wrap-notice-02 .title button:before{content:''; opacity:0; border-radius:100%; width:1.1rem; height:1.1rem; display:block; background:#256ef4; margin: 0 auto;}
.wrap-notice-02 .active .title button{font-weight:700;}
.wrap-notice-02 .active .title button:before{opacity:1;}

/* list */
.wrap-notice-02 .list{position:absolute; display:none;}
.wrap-notice-02 .active .list{display:block;width: 100%;left: 0;top: 8rem;}
.wrap-notice-02 .list ul{width: 100%;border-radius: 2rem;background: #fff;border: 0.1rem solid #ddd;padding: 3rem 3.5rem;height: 100%;}
.wrap-notice-02 .list ul li{border-bottom: 0.1rem solid #ddd;margin-bottom: 1.5rem;padding-bottom: 1.5rem;}
.wrap-notice-02 .list ul li:last-child{border:none; margin:0; padding:0;}
.wrap-notice-02 .list ul li a .con{padding:0 1rem;}
.wrap-notice-02 .list ul li a .con .subjectText{font-size: 2.2rem;text-overflow: ellipsis;overflow: hidden;line-height: 1.4;white-space: nowrap;color: #222;}

/* cont */
.wrap-notice-02 .list ul li a:hover .con .subjectText{font-weight: 600;color:#256ef4;}
.wrap-notice-02 .list ul li a .con .date{/* margin-top: 1rem; */color: #666666;}
.wrap-notice-02 .list .more{position: absolute; background-size: 3rem; right: 0; top: -6.5rem; border: 1px solid #e5e5e5; border-radius: 1rem; width: 4rem; height: 4rem; text-indent: -9999px; background:#fff url(./../images/arrow-plus.png) center no-repeat;}

.wrap-notice-02 a .con .cate{color: #3a6dd3;font-size: 1.6rem;padding: 0.5rem 1rem;background: #f2f4f9;border-radius: 0.5rem;line-height: 1.1;margin-bottom: 1.6rem;display: inline-block;}

@media only screen and (max-width:1280px){
	body .wrap-notice-02 > ul{gap:1rem;}
	body .wrap-notice-02 > ul > li + li .title{padding-left: 1rem; margin-left: 0;}
	body .wrap-notice-02 .title button{font-size:2.8rem}
}

@media only screen and (max-width:767px){
	body .wrap-notice-02 .title button{font-size:2.3rem}
	body .wrap-notice-02 .title button:before{width: 0.9rem; height: 0.9rem;}
	body .wrap-notice-02 > ul > li + li .title:before{top:1.5rem;}
	body .wrap-notice-02 > ul > li .list{top:7rem;}
	body .wrap-notice-02 .list ul{padding: 2.5rem 1.5rem 0rem 1.5rem;}
	body .wrap-notice-02 .list ul li{margin-bottom: 2rem; padding-bottom: 2rem;}
	body .wrap-notice-02 .list ul li a .con .date{margin-top: 0rem;}
	body .wrap-notice-02 .list ul li a .con .subjectText{font-size: 2rem;font-weight: 600;}
	body .wrap-notice-02 > ul{height:39rem;}
	body .wrap-notice-02 .active .list{height: calc(100% - 8rem);top: 6rem;}
	.wrap-notice-02 .list .more{width:3.5rem;height:3.5rem;top: -5.5rem;}
}