@charset "utf-8"


.main { } 
.main button {background: none; padding: 0; color: inherit; cursor: pointer;}

.main .visual {position: relative; height: 480px; overflow: hidden; position: relative; margin-top: 100px;} 
.main .visual .bg {width: 100%; height: 100%; background: rgba(0, 0, 0, 30%); position: absolute; left: 0; top: 0; z-index: 5;}
.main .visual .mainText {position: absolute; top:90px; left: 250px; z-index: 10; color: #fff; text-shadow: 0px 0px 30px #000;}
.main .visual .mainText p {font-size: var(--fs45); line-height: 1.2; font-weight: 700; margin: 10px 0;}
.main .visual .mainText span {display: inline-block; opacity: .5; margin-bottom:50px;}
.main .visual .text {display: flex; flex-direction: column; align-items: center; justify-content: space-between;}
.main .visual .text p {writing-mode: vertical-rl; text-orientation: upright; color:#BDBDBD; margin-top:40px; letter-spacing: 4px; font-size: var(--fs15); line-height: 1;}
.main .visual .scroll {position: absolute; right: 25px; bottom: 0; display: flex; align-items: center; gap:10px; font-size: var(--fs13); color: var(--base3); font-weight: 700; z-index: 99;} 

.main .visual .swiper-pagination-progressbar {width:300px; height:7px; z-index:99999; background:rgba(255,255,255,20%);}
.main .visual .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background:#fff; opacity:1;}


/*스크롤 다운*/
.main .scrollDown {position:absolute; width:85px; height:75px; background: rgba(255, 255, 255, 0.13); backdrop-filter: blur(15px); z-index:5; top:530px; right:80px; display:flex; justify-content: center; align-items: center; flex-direction: column;}
.main .scrollDown span {font-size:12px; color:#fff;}




/*서브 퀵메뉴*/
.main .subQuick {display: flex; justify-content: flex-end; transform: translateY(-50px);    position: relative; z-index: 5;}
.main .subQuick ul {background: var(--base1); width: 50%; display: flex; justify-content: center; align-items: center;}
.main .subQuick ul li {position: relative; color: #fff;}
.main .subQuick ul li a {display: flex; padding:40px; align-items: center; gap:10px;}
.main .subQuick ul li+li:before {content: ""; width: 2px; height: 15px; background: #fff; position: absolute; left: 0; top: 46px; opacity: .3;}


/*공지사항*/
.main article {display: grid; grid-template-columns: repeat(2,1fr); margin-bottom: 100px !important;}
.main .noticeWrap {width: 85%;}
.main .notice h3 {font-size: var(--fs28); color: #000;}
.main .notice button {opacity: .5;}
.main .notice button+button {margin-left:5px;}
.main .notice .tab-btn.on {color: var(--base1); border-bottom: 1px solid var(--base1); opacity: 1;}
.main .notice .title {display: flex; justify-content: space-between; align-items: center;}
.main .notice .title .subTitle {display: flex; gap:20px;}

.main .notice ul {margin-top: 35px;}
.main .notice ul li {display: flex; justify-content: space-between;}
.main .notice ul li+li {margin-top: 10px;}
.main .notice ul li a { font-weight: 300; width: calc(100% - 170px); height: 17px; overflow: hidden; white-space: normal; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-break: break-all; line-height: 1; } 
.main .notice ul li a:hover {color: var(--base1);}
.main .notice ul li span {font-size: var(--fs14); color: rgba(102,102,102,50%);}

.main .quick {position: relative; display: flex; gap:30px; justify-content: center;}
.main .quick::before {content: ""; bottom: 0; left: 0; position: absolute; width: 100%; height: 50%; background: #F8F8F8;}
.main .quick li a {position: relative; width: 200px; height: 180px; display: flex; flex-direction: column; border: 1px solid #EAEAEA; align-items: center; padding-top: 35px; gap: 10px; background: #fff;}
.main .quick li a::before {content: ""; width: 75%; left: 50%; transform: translate(-50%, -50%); bottom:20px; height:3px; background: #EAEAEA; position: absolute; transition: .3s;}
.main .quick li a:hover {border: 1px solid var(--base2); box-shadow: 10px 10px 30px 0 rgba(0, 0, 0, 0.08);}
.main .quick li a:hover::before {content: ""; width: 75%; left: 50%; transform: translate(-50%, -50%); bottom:20px; height:3px; background: var(--base2); position: absolute;}
.main .quick li a i {width: 65px; height: 65px; display: flex; align-items: center; justify-content: center;}

/*학회활동*/
.main .active {background: url(/images/main/activeBg.webp) no-repeat center bottom;}
.main .activeWrap {padding-bottom: 120px;}
.main .active h3 {font-size: var(--fs28); color: #000; margin-bottom: 30px;}
.main .active h3 span {font-size: var(--fs14); color: rgba(102,102,102,50%); padding-left: 20px;}

.main .active ul {display: grid; grid-template-columns: repeat(4,1fr); gap: 30px;}
.main .active ul li {transition: .3s;}
.main .active ul li:hover {box-shadow: 20px 20px 20px 0 rgba(0, 0, 0, 0.10);}
.main .active ul li .img {width: auto; height: 240px; overflow: hidden;}
.main .active ul li .img img {width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; transition: all 0.5s;}
.main .active ul li:hover .img img {transform:scale(1.1);}

.main .active ul li .txtBox {color: #fff; text-align: center; padding: 30px 0; background: rgba(255, 255, 255, 0.13); backdrop-filter: blur(15px);}





/*관련 기관 배너*/
.main .sponsorWrap { border:1px solid var(--line); border-left:0; border-right:0; } 
.main .sponsorWrap .swiper-wrapper { height:90px; } 
.main .sponsorWrap .swiper-wrapper .swiper-slide { display: flex; align-items: center; justify-content: center; } 

.main .sponsorWrap .swiper-button-next, .main .sponsorWrap .swiper-button-prev { color: transparent !important; width:42px; height:42px; border:1px solid var(--line); border-radius: 100px; top: 24px; } 
.main .sponsorWrap .swiper-button-next { background: #fff url(/images/main/gallery_next.svg) no-repeat center; right:0; } 
.main .sponsorWrap .swiper-button-prev { background: #fff url(/images/main/gallery_prev.svg) no-repeat center; left:0; } 

.main .sponsorWrap .sponsor .screen > div { width:50px; height:40px; background:#fff; position:absolute; z-index:2; } 
.main .sponsorWrap .sponsor .screen > .left { left:0; top:26px; } 
.main .sponsorWrap .sponsor .screen > .right { right:0; top:26px; } 




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

	.main .visual {margin-top:70px;}
	
	.main .visual .mainText {left:50px;}
	
	.main .subQuick ul {margin-right:20px;}
	
	.main article {padding:0 20px;}
	.main .activeWrap {padding:0 20px 120px 20px}

	} 




/* ************************ 모바일 (~1199) ************************ */
@media screen and (max-width:1199px) {

	.main article {margin-bottom: 80px !important;}
	
	.main .quick {padding:0 20px;}
	.main .quick li a {width:170px;}
	
	.main .scrollDown {display:none;}
	
	.main .subQuick ul {width:100%; margin:0 20px;}
	.main .subQuick ul li a {padding:20px 40px;}
	.main .subQuick ul li+li:before {top:26px;}
	
	.main .activeWrap {padding: 0 20px 100px 20px;}
	
	.main .notice ul li a {width: calc(100% - 100px);}
	
	.main .active ul {gap:10px;}
	.main .active ul li .img {height:170px;}
	.main .active ul li .txtBox {padding:20px;}
	.main .active ul li .txtBox p {overflow: hidden; white-space: normal; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-break: break-all; } 


	} 



/* ************************ 모바일 (~991) ************************ */
@media screen and (max-width:991px) {

	.main article {grid-template-columns: repeat(1, 1fr); gap:30px;}
	
	.main .noticeWrap {width:100%;}
	
	.main .quick::before {bottom:-40px; height: 70%;}
	
	.main .activeWrap {padding:60px 20px;}
	.main .active h3 span {color:#fff;}
	.main .active {background: url(/images/main/activeBg_mo.webp) no-repeat center;}
	.main .active ul {grid-template-columns: repeat(2, 1fr);}
	.main .active h3 {color:#fff;}
	

}


/* ************************ 모바일 (~767) ************************ */
@media screen and (max-width:767px) { 

	.main .visual .mainText {left:30px;}
	.main .visual .mainText p {font-size: var(--fs30); padding-right:20px;}
	.main .visual .mainText span {line-height:1.3; margin-bottom: 20px; padding-right:20px;}
	
	.main .visual .swiper-pagination-progressbar {height:5px;}
	
	.main .notice ul li span {position:absolute; right:20px;}
	
	.main .quick {gap:5px; justify-content: space-between; padding:0;}
	.main .quick::before {content:none;}
	.main .quick li {width:100%;}
	.main .quick li a {width:100%; padding-top: 7vw;}
	.main .quick li a i img {width:80%;}
	
	.main .subQuick ul {gap:15px; margin:0;}
	.main .subQuick ul li {padding:20px 0;}
	.main .subQuick ul li a {padding:0; flex-direction: column; gap:5px;}
	.main .subQuick ul li+li:before {content:none;}
	
	.main article {margin-bottom: 50px !important;}
}