@charset "UTF-8";

@media (max-width:1280px) {
	.visual .img {max-width:107.5rem}
}

@media (max-width:1193px) {
	#issue .control.open {opacity:0; visibility:hidden;;}
	#issue .control.open em::before {color:#000 !important; font-size:3rem !important;}
	html:has(#header.active) #issue .control.open {opacity:1; visibility:visible; position:fixed; right:12rem; top:0.4rem; z-index:22;}

	#main {padding-top:4.8rem}
	#main .contents {padding-bottom:10rem}

	.popup {width:43rem}

	.board {width:calc(100% - 46rem)}
	.board .label {width:21rem}
	.board .label .title {height:18.5rem}
	.board .label .more {height:6rem; padding:2rem 3rem}
	.board .list {width:calc(100% - 21rem)}

	.section .label {text-align:left; margin-bottom:2.5rem}
}

@media (max-width:1024px) {
	.visual .img {max-width:100%}
	.visual .img img {}
	.visual .desc {max-width:100%; bottom:0}
	.visual .desc span {max-width:70%}

	.popup {width:100%; height:30rem; overflow:hidden; margin-bottom:3rem}
	.popup .list {height:100%}
	.popup .list .slick-list {position:unset}
	.board {width:100%; margin-right:0}
}

@media (max-width:820px) {
	#main .contents {padding-bottom:0}

	.notice {flex-direction:row; margin-bottom:6rem}
	.popup {width:100%; max-width:100%; margin-bottom:3rem}

	.board {width:100%; margin-right:0}
	.board .label {width:100%}
	.board .label .title {height:auto}
	.board .list {width:100%; border-left:1px solid #d5dadc}
	.board .desc .item a {height:auto}
	.board .desc .date {position:relative; left:auto; bottom:auto; margin-top:4rem}
	.board .desc .date::before {top:-1rem}

	.section {margin-bottom:6rem}

	.video .list {width:calc(100% + 2rem)}
	.video .list .item {width:calc(50% - 2rem); margin-right:2rem}
	.video .list .item:nth-child(n+3) {margin-top:4rem}

	.reports .list {margin-top:-2.5rem}
	.reports .list .item {width:calc(100% - 3rem)}

	.twitter .list ul {width:calc(100% + 2rem)}
	.twitter .list .item {width:calc(50% - 2rem); margin-right:2rem}
	.twitter .list .item:nth-child(n+3) {margin-top:4rem}
}

@media (max-width:768px) {

	html:has(#header.active) #issue .control.open {opacity:1; visibility:visible; position:fixed; right:11rem;}

	.section .label {font-size:2.4rem}

	.visual {padding-top:3rem; margin-bottom:2rem}
	.visual .img {height:40rem}
	.visual .desc {height:11rem; bottom:5.5rem; padding:1.5rem 3rem}
	.visual .desc .title {font-size:2.4rem; margin-bottom:0.5rem}
	.visual .desc .txt {-webkit-line-clamp:2; height:4.5rem; max-width:100%}
	.visual .control_box {padding:1.5rem 3rem; width:100%; height:5.5rem}
	.visual .control_box .controller {float:right}

	.popup {height:24rem; margin-bottom:2rem}
	.popup .item .title {font-size:2.4rem}

	.board .label .title .tt {font-size:2.4rem}
	.board .desc .title {font-size:2rem; height:7.5rem}

	.video .list .item:nth-child(n+3) {margin-top:3rem}
	.video .list .item .title {font-size:2rem; height:8rem}

	.reports .list .item .desc .title {font-size:2rem; height:10.5rem}

	.twitter .list .item .icon {font-size:1.8rem; width:3.5rem; height:3.5rem; line-height:3.5rem; margin-bottom:1rem; right:1rem; bottom:1rem}
	.twitter .list .item .title {line-height:1.3}

	.banner-wrap .banner {padding:2rem 0 2rem 12rem}
	.banner-wrap .banner .item {margin-right:2rem}
	.banner-wrap .banner .control_box {top:3.5rem}
	.banner-wrap .control_box .next.slick-arrow {margin:0 1.2rem}
}