.main {display: grid; grid-template-columns: minmax(300px, 650px) auto;}
.main .fixed {position: sticky; top: 0; width: 100%; /*max-width: 650px;*/ height:100vh; background: #000 url(/images/main/mainBg.webp) no-repeat left -370px top -50px; color: #fff;}

.main .fixed .txtWrap {margin: 150px 50px 0 100px; margin:23% 4% 0 15%;}
.main .fixed .txtWrap h3 {font-size: var(--fs48); font-size: 2.5vw; font-weight: 800; line-height: 1.2;}
.main .fixed .txtWrap p {margin-top: 40px; line-height: 1.6;}


/*** 공지사항&뉴스, 연구원소식 ***/
.main .noticeWrap {position: relative; margin:10% 10% 4% 10%;}
.main .noticeWrap .noticeTab {display: flex; gap: 40px; margin-bottom: 30px;}
.main .noticeWrap .noticeTab button {font-weight: 700; font-size: var(--fs24); transition: .4s;}
.main .noticeWrap .noticeTab button:hover {color: var(--base1);}
.main .noticeWrap .noticeTab .on {color: var(--base1);}
.main .noticeWrap .noticeTab .noticeBtn {position: relative;}
.main .noticeWrap .noticeTab .noticeBtn::before {content: ""; position: absolute; right: -20px; top: 5px; width: 1px; height: 20px; background: #ccc;}

.main .noticeWrap .noticeCon .more {font-size: var(--fs12); color: #999;}
.main .noticeWrap .noticeCon .more a {position: absolute; top: 0; right: 0; display: flex; align-items: center; gap: 5px; font-weight:300;}
.main .noticeWrap .noticeCon .more i {display: inline-block; width: 25px; height: 25px; border: 1px solid #e5e5e5; background: url(/images/main/i-plus.svg) no-repeat center;}

.main .noticeWrap .noticeCon ul {display: grid; grid-template-columns: repeat(3,1fr); gap: 30px;}
.main .noticeWrap .noticeCon ul li a {display: inline-block; }
.main .noticeWrap .noticeCon ul li a h3 {padding-top: 20px; border-top: 2px solid #000; font-size: var(--fs18); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; transition: .4s;}
.main .noticeWrap .noticeCon ul li a p {font-weight: 300; color: #666; line-height: 1.4; margin: 10px 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.main .noticeWrap .noticeCon ul li a span {font-weight: 300; color: #666; line-height: 1.4;}
.main .noticeWrap .noticeCon ul li a:hover h3 {color: var(--base1); border-color: var(--base1);}

.noticeCon_notice,.noticeCon_research {display:none;}
.noticeCon_notice.on, .noticeCon_research.on {display:block;}

/*** 슬라이드 ***/
.main .slideWrap {background: #F7F7F7; border: 1px solid #e5e5e5; border-left: 0; border-right: 0; padding: 50px 100px; padding:5% 10%; display: flex; gap: 30px; align-items: center;}
.main .slideWrap .img {position: relative; width: 137px; height: 90px;}
.main .slideWrap .img p {position: absolute; color: #fff; font-size: var(--fs12); top:50%; left:55%; transform: translate(-50%, -50%); letter-spacing:10px;}
.main .slideWrap .mySwiper {height: 90px;}
.main .slideWrap .mySwiper p {display: inline-block; font-size: var(--fs12); color: var(--base2); padding: 10px 15px; border-radius: 100px; background-color: #fff; border: 1px solid #e0e0e0;}
.main .slideWrap .mySwiper a {display: flex; justify-content: space-between; flex-direction: column; align-items: flex-start; height: 100%;}
.main .slideWrap .mySwiper a h3 {font-size: var(--fs20); line-height: 120%; font-weight: 500; margin-top: 5px; max-width: 600px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; padding-right:20px;}
.main .slideWrap .mySwiper a dl dd {position: relative; display: inline; color: #666; font-size: var(--fs18); font-weight: 300; padding-left: 10px;}
.main .slideWrap .mySwiper a dl dd+dd {margin-left: 20px;}
.main .slideWrap .mySwiper a dl dd:before {position: absolute; left: 0; top: 10px; width: 3px; height: 3px; border-radius: 100px; background: #666; content: "";}

.swiper-pagination-vertical.swiper-pagination-bullets, .swiper-vertical>.swiper-pagination-bullets {right:0px !important;}
.swiper-pagination-bullet-active {background: #000 !important;}



/*** 퀵메뉴 ***/
.main .quickWrap {display: flex; justify-content: space-between; background: #093077 url(/images/main/quickBg.webp) no-repeat center; padding:5% 10%; background-size: cover;}
.main .quickWrap h3 {color: #fff; font-size: var(--fs32); font-size: 1.7vw; line-height: 1.4;} 
.main .quickWrap ul {display: flex;}
.main .quickWrap ul li {margin-left:2vw;}
.main .quickWrap ul li:nth-child(1) {margin-left:0;}
.main .quickWrap ul a {display: flex; flex-direction: column; gap: 10px; align-items: center; color: #fff; font-size: var(--fs16); font-weight: 700;}
.main .quickWrap ul a i {display: block; border-radius: 15px; background: var(--base2) url(/images/main/quick-1.svg) no-repeat center; width: 70px; height: 70px;}
.main .quickWrap ul li:nth-child(2) a i {background: var(--base2) url(/images/main/quick-2.svg) no-repeat center;}
.main .quickWrap ul li:nth-child(3) a i {background: var(--base2) url(/images/main/quick-3.svg) no-repeat center;}
.main .quickWrap ul li:nth-child(4) a i {background: var(--base2) url(/images/main/quick-4.svg) no-repeat center;}


/*** 갤러리 ***/
.main .gallaryWrap {position: relative; margin:5% 10% 10%;}
.main .gallaryWrap h3 {font-size: var(--fs24);}
.main .gallaryWrap .more {font-size: var(--fs12); color: #999;}
.main .gallaryWrap .more a {position: absolute; top: 0; right: 0; display: flex; align-items: center; gap: 5px; font-weight:300;}
.main .gallaryWrap .more i {display: inline-block; width: 25px; height: 25px; border: 1px solid #e5e5e5; background: url(/images/main/i-plus.svg) no-repeat center;}
.main .gallaryWrap ul {margin-top: 20px; display: grid; grid-template-columns: repeat(3,1fr); gap: 30px;}
.gallaryWrap ul li a{display:inline-block; width: 100%;}
.gallaryWrap ul li a .img{height:160px;overflow:hidden;}
.gallaryWrap ul li a .img img{width:100%;height:100%;object-fit:cover;transition:.5s;}
.gallaryWrap ul li:hover .img img{transform:scale(1.1);}
.gallaryWrap ul li:hover a p{color:var(--base1);transition:.3s;}
.gallaryWrap ul li a p{overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; margin: 10px 0 5px 0;}
.gallaryWrap ul li a span {color: #666; font-weight: 300;}



/* ************************ 태블릿 (~1249) ************************ */
@media screen and (max-width:1249px) {
	
	.main {grid-template-columns: auto;}
	
	.main .fixed {position:static; height:auto; background: #000 url(/images/main/mainBg.webp) no-repeat center / cover;}
	.main .fixed .txtWrap {margin:100px 70px;}
	.main .fixed .txtWrap h3 {font-size:var(--fs48);}
	
	.main .quickWrap {padding:50px 70px;}
	.main .quickWrap h3 {font-size:var(--fs32);}
	
	.main .gallaryWrap {margin:70px;}
	.main .slideWrap {padding:50px 70px;}
	.main .noticeWrap {margin:70px;}
	
}

/* ************************ 태블릿 (~991) ************************ */
@media screen and (max-width:991px) {
	
	.main .noticeWrap {margin:50px;}
	.main .slideWrap {padding:50px;}
	.main .quickWrap {padding:50px;}
	.main .gallaryWrap {margin:50px;}

}

/* ************************ 태블릿 (~767) ************************ */
@media screen and (max-width:767px) { 

	.main .noticeWrap {margin:40px 20px;}
	.main .slideWrap {padding:40px 20px;}
	.main .quickWrap {padding:40px 20px;}
	.main .gallaryWrap {margin:40px 20px;}
	
	.main .gallaryWrap ul {gap:10px;}
	
	.main .quickWrap h3 {font-size:25px;}
	
	.main .noticeWrap .noticeTab button {font-size:22px;}
	.main .noticeWrap .noticeCon ul {gap:20px;}

}

/* ************************ 모바일 (~500) ************************ */
@media screen and (max-width:500px) {
	
	.main .slideWrap {display:block;}
	
	.main .quickWrap {display:block;}
	.main .quickWrap h3 {line-height:1.2; margin-bottom:20px;}
	.main .quickWrap ul {justify-content: space-between;}
	
	.main .noticeWrap .noticeCon ul {grid-template-columns:auto;}
	.main .gallaryWrap ul {grid-template-columns:auto;}
	
	.main .noticeWrap .noticeTab {margin-bottom:20px;}
	.main .noticeWrap .noticeTab button {font-size:20px;}
	
	.main .noticeWrap .noticeCon ul li a h3 {font-size:18px; padding-top: 10px;}
	
	.main .slideWrap .mySwiper a h3 {font-size:18px;}
	.main .slideWrap .img {margin-bottom:15px; display:none;}
	
	.main .fixed .txtWrap {margin:50px 50px 200px 50px;}
	.main .fixed .txtWrap h3 {font-size:30px;}
	.main .fixed .txtWrap p {margin-top:17px; line-height:1.4;}
	

}