@charset "utf-8";
/* *******************************************************
 * filename : main_responsive.css
 * description : 메인 레이아웃 및 컨텐츠 반응형 CSS
 * date : 2022-08-08
******************************************************** */

/* ******************  메인 비주얼 ********************** */
@media all and ( max-width: 800px ){
	#mainVisual{margin-top: calc(var(--header-height) + 1rem);}
	.main-visual-con{margin:0;}
	.main-visual-item{margin:0;}

	.active-item.main-visual-item{border-radius:0;}
	/* 메인 비주얼 :: 이미지 */
	.main-visual-item .main-visual-pc-img{display:none;}
	.main-visual-item .main-visual-m-img{display:block;}
	/* 메인 비주얼 :: 텍스트 */
	.main-visual-txt-inner{margin-bottom:3rem;}
	.main-visual-txt-box .main-visual-txt1{margin-bottom:1.5rem;}
	.main-visual-txt-box .main-visual-txt2{font-size:3.2rem; margin-bottom:2rem;}
	/* 메인 비주얼 :: Dots */
	.main-visual-con .slick-dots-wrapper{text-align:center; bottom:10px;}
	/* 메인 비주얼 :: 화살표 */
	.main-visual-con .slick-arrow{display:none !important;}
	.main-visual-conuter .slick-arrow.slick-prev{left:-2rem;}
	.main-visual-conuter .slick-arrow.slick-next{right:-2rem;}
	/* 메인 비주얼 :: 스크롤아이콘 */
	.main-scroll-icon{display:none}
}

/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
/* 공통 :: 타이틀 */
@media all and (max-width:800px){
	.cm-main-tit .tit{font-size:3.2rem; padding-left:1.8rem;	}
	.cm-main-tit .circle-reverse,
	.cm-main-tit .circle{width:3rem; height:3rem; left:1.3rem}
	.cm-main-tit .circle-reverse svg circle,
	.cm-main-tit .circle svg circle{cx: 1.5rem; cy: 1.5rem; r: 1.5rem;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠1 -------- */
@media all and (max-width:800px){
	#mainContent1{margin-top:10rem;}
	.main-board-list{flex-wrap:wrap;}
	.main-board-list .list-item{width:100%; padding:2rem 1rem;}
	.main-board-list .list-item:before{width:100%; height:1px; top:auto; bottom:0; right:auto; left:0;}
	.main-board-list .list-item:last-child:before{display: none;}
	.main-board-list .list-item .board-tit{font-size:2rem;}
	.main-board-list .list-item .board-txt{font-size:1.6rem; margin-top:1.2rem;}
	.main-board-list .list-item .date{margin-top:2rem;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠2 -------- */
@media all and (max-width:800px){
	#mainContent2{margin-top:12rem;}
	.main-gallery-list{flex-wrap:wrap;}

	.main-gallery-list .list-item .img-box .category{top:1rem; left:1rem;}
	.main-gallery-list .list-item .txt-box .tit{overflow: hidden; display: block; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}

	.main-gallery-list .left-box,
	.main-gallery-list .right-box{width:100%; max-width:none;}
	.main-gallery-list .left-box{margin-bottom:2rem;}
	.main-gallery-list .left-box .list-item .txt-box{width:100%; margin-top:1.5rem;}
	.main-gallery-list .left-box .list-item .txt-box:before{display: none;}
	.main-gallery-list .left-box .list-item .txt-box .tit{font-size:2rem;}
	.main-gallery-list .left-box .list-item .txt-box .txt{margin-top:0.5rem;}
	.main-gallery-list .left-box .list-item .txt-box .date{margin-top:0.5rem;}

	.main-gallery-list .right-box{display: flex; flex-wrap:wrap; margin:0 -0.5rem;}
	.main-gallery-list .right-box .list-item{margin:0 0.5rem 2rem !important;}
	.main-gallery-list .right-box .list-item .txt-box .tit{font-size:1.6rem;}
	.main-gallery-list .right-box .list-item .txt-box .date{display: none;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠3 -------- */
@media all and (max-width:800px){
	#mainContent3{margin-top:8rem; padding:7.5rem 0;}
	#mainContent3:before{width:100vw; border-radius:0;}
	#mainContent3 .cm-main-tit-box{position: relative; z-index:1;}
	#mainContent3 .cm-main-tit-box .cm-main-link span em{display: none;}

	.main-member-con{display: block; margin-top:-4.5rem;}
	.main-member-left{width:100%; max-width:none;}

	.member-count-list{margin-top:3rem;}
	.member-count-list .top-list{padding:1.5rem 0;}
	.member-count-list .top-list .list-item .num{font-size:2.8rem;}
	.member-count-list .bottom-list{padding:1.5rem 0;}
	.member-count-list .bottom-list .list-item .num{font-size:4.2rem;}
	
	.main-member-right{margin-right:-5rem; margin-top:4rem; width:calc(100% + 5rem); padding-bottom:2rem;}
	.main-member-list{max-width:none;}
	.main-member-list .list-item{/* margin-right:1.5rem; */ box-shadow: 1rem 1rem 4rem #00000008; transition:var(--transition-custom); overflow:hidden;}
	.main-member-conuter{margin-top:3rem; text-align:center;}
	.main-member-conuter .slick-arrow.slick-prev{left:-2.5rem;}
	
	.main-member-list .slick-list .slick-slide{margin-right:1.5rem;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠4 -------- */
@media all and (min-width:801px){
	.main-program-con .main-program-list .list-item a:hover{background:var(--main-color); border-radius:0 6rem 0 0;}
}

@media all and (max-width:800px){
	#mainContent4{padding:13rem 0 2rem;}
	.main-program-con{display: block;}
	.main-program-con .main-program-tit-box{margin-bottom:3rem;}
	.main-program-con .main-program-tit-box .tit{margin-left:0rem; height:10rem;}
	.main-program-con .main-program-tit-box .tit svg{height: 100%; width: auto;}
	.main-program-con .main-program-tit-box .tit em{font-size:3.2rem; margin-left:0.5rem;}
	.main-program-con .main-program-tit-box .txt{margin-top:2.5rem; padding:0 1.8rem; box-sizing:border-box;}
	.main-program-con .main-program-list{width:100%;}
	.main-program-con .main-program-list .list-item a .tit{font-size:1.6rem; margin-top:1.5rem;}
	.main-program-con .main-program-list .list-item a .txt{display: none !important;}
	
	.main-program-con .main-program-list .list-item a .icon{display: block;}
	.main-program-con .main-program-list .list-item a .icon svg{width:100%; height:auto;}
	.main-program-con .main-program-list .list-item:nth-child(1) a .icon{width:5.8rem;}
	.main-program-con .main-program-list .list-item:nth-child(2) a .icon{width:6.666rem;}
	.main-program-con .main-program-list .list-item:nth-child(3) a .icon{width:5.08rem;}
	.main-program-con .main-program-list .list-item:nth-child(4) a .icon{width:7.08rem;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠5 -------- */
@media all and (max-width:800px){
	#mainContent5{margin-top:10rem; overflow:hidden;}
	#mainContent5 .cm-main-tit .tit{padding-left:0;}

	.main-public-con{display: block; padding:8rem 0;}
	.main-public-con .left-box:before{right:auto; left:calc(-1 * var(--area-padding)); height:300vh; top:-8rem; border-radius:0;}
	.main-public-con .left-box{width:100%; padding-right:0;}
	.main-public-con .right-box{width:100%; padding-left:0; margin-top:5rem;}

	.main-public-con .main-report-list{margin:3rem -1rem 0;}
	.main-public-con .main-report-list .list-item{width:calc(50% - 2rem); margin:0 1rem;}

	.main-public-con .main-youtube-list .list-item a{padding:1.5rem;}
	.main-public-con .main-youtube-list .list-item a .txt{font-size:1.6rem;}
}