@charset "UTF-8";

/* **************************************** *
 * 비주얼
 * **************************************** */
.msec-visual{position:relative; width:160rem; margin:auto}
.msec-visual .visual-swiper-container{display:flex; flex-direction:column; position:relative}
.msec-visual .visual-swiper{height:67rem; overflow:hidden}
.msec-visual .visual-swiper .visual-box{display:flex; flex-direction:column}
.msec-visual .visual-swiper .visual-box .visual-img{height:60rem}
.msec-visual .visual-swiper .visual-box .visual-img img{display:block; height:60rem}
.msec-visual .visual-swiper .visual-box .visual-tit{margin-top:3rem}
.msec-visual .visual-swiper .visual-box .visual-tit .tit{line-height:3.3rem; color:var(--krds-color-light-gray-90); font-size:2.5rem; font-weight:300; letter-spacing:-0.08rem}
.msec-visual .visual-swiper .visual-box .visual-progress{display:flex; height:0.4rem; background-color:var(--krds-color-light-gray-0); overflow:hidden}
.msec-visual .visual-swiper .visual-box .visual-progress span{width:0; height:100%; background-color:var(--krds-color-light-gray-90)}

.msec-visual .visual-swiper-controll{display:flex; align-items:center; position:absolute; bottom:-0.3rem; right:-1.6rem; z-index:1}
.msec-visual .visual-swiper-button-prev,
.msec-visual .visual-swiper-button-next,
.msec-visual .visual-swiper-button-play{display:flex; align-items:center; justify-content:center; min-width:4.4rem; min-height:4.4rem; margin:0; padding:0; border:none; background:transparent; border-radius:0; cursor:pointer; transition:all .35s ease}
.msec-visual .visual-swiper-button-prev{order:1}
.msec-visual .visual-swiper-button-next{order:3}
.msec-visual .visual-swiper-button-play{order:2}
.msec-visual .visual-swiper-button-prev:after,
.msec-visual .visual-swiper-button-next:after{font-family:'remixicon'; font-size:4.6rem; color:var(--krds-color-light-gray-90)}
.msec-visual .visual-swiper-button-prev:after{content:'\ea64'}
.msec-visual .visual-swiper-button-next:after{content:'\ea6e'}
.msec-visual .visual-swiper-button-prev.swiper-button-disabled:after,
.msec-visual .visual-swiper-button-next.swiper-button-disabled:after{color:var(--krds-color-light-gray-10)}
.msec-visual .visual-swiper-button-play{background:url("../img/main/msec-visual-controll-stop.svg") no-repeat 50% 50%; background-size:1.2rem 2.5rem}
.msec-visual .visual-swiper-button-play.active{background:url("../img/main/msec-visual-controll-stop.svg") no-repeat 50% 50%; background-size:1.2rem 2.5rem}
.msec-visual .visual-swiper-pagination{display:flex; align-items:center; gap:0.6rem; width:auto; margin-right:1.2rem}
.msec-visual .visual-swiper-pagination .swiper-pagination-current,
.msec-visual .visual-swiper-pagination .swiper-pagination-total{color:var(--krds-color-light-gray-40); font-family:Poppins; line-height:1em; font-size:1.9rem; font-weight:normal}
.msec-visual .visual-swiper-pagination .swiper-pagination-current{color:var(--krds-color-light-gray-90); font-weight:300}

.msec-visual .visual-swiper-scrollbar{position:absolute; bottom:6.6rem; left:0; right:0; background:#fff; z-index:1}
.msec-visual .visual-swiper-scrollbar.swiper-scrollbar-horizontal{height:0.4rem}
.msec-visual .visual-swiper-scrollbar .swiper-scrollbar-drag{background:#101010; border-radius:0; cursor:pointer}


/* **************************************** *
 * Webzine NRICH, Publications, News
 * **************************************** */
.msec-media{display:flex; gap:4rem; position:relative; width:160rem; margin:5rem auto 0; box-sizing:border-box}
.msec-media .media-l{display:flex; flex-direction:column; min-width:368px; max-width:368px}
.msec-media .media-r{flex:1}
.msec-media .msec-top{display:flex; align-items:center; width:100%}
.msec-media .msec-top .top-tit{display:flex; align-items:center}
.msec-media .msec-top .top-tit .tit{line-height:2.7rem; color:var(--krds-color-light-gray-90); font-size:2.7rem; font-weight:600; letter-spacing:-0.08rem}

.msec-media .media-webzine{display:flex; flex-direction:column}
.msec-media .media-webzine .webzine-item{position:relative; bottom:0; height:14rem; margin-top:4.5rem; padding:2.5rem 2rem; padding-right:9rem; background:url("../img/main/msec-webzine-visual.png") no-repeat 50% 50%; background-size:36.8rem 14rem; transition:all .20s ease; box-sizing:border-box}
.msec-media .media-webzine .webzine-item:hover{bottom:-1rem}
.msec-media .media-webzine .webzine-item p{line-height:2.4rem; color:var(--krds-color-light-gray-0); font-size:1.7rem; font-weight:300; letter-spacing:0.2rem; text-transform:uppercase}
.msec-media .media-webzine .webzine-item:after{content:''; position:absolute; right:2rem; bottom:2rem; width:5.1rem; height:4.5rem; background:url("../img/main/msec-webzine-ico.png") no-repeat 50% 50%; background-size:5.2rem 4.5rem}

.msec-media .media-publication{display:flex; flex-direction:column; margin-top:auto}
.msec-media .media-publication .publication-item{position:relative; bottom:0; height:14rem; margin-top:4.5rem; padding:2.5rem 2rem; padding-right:9rem; background:url("../img/main/msec-publication-visual.png") no-repeat 50% 50%; background-size:36.8rem 14rem; transition:all .20s ease; box-sizing:border-box}
.msec-media .media-publication .publication-item:hover{bottom:-1rem}
.msec-media .media-publication .publication-item p{line-height:2.4rem; color:var(--krds-color-light-gray-0); font-size:1.7rem; font-weight:300; letter-spacing:0.2rem; text-transform:uppercase}
.msec-media .media-publication .publication-item:after{content:''; position:absolute; right:2rem; bottom:2rem; width:4.4rem; height:5.5rem; background:url("../img/main/msec-publication-ico.png") no-repeat 50% 50%; background-size:4.4rem 5.5rem}

.msec-media .media-news{position:relative}
.msec-media .media-news .news-latest{display:flex; flex-wrap:wrap; margin-left:-4.5rem; margin-top:-4.5rem; padding-top:4.5rem}
.msec-media .media-news .news-box{width:33.333333%}
.msec-media .media-news .news-box:last-child{display:none}
.msec-media .media-news .news-item{margin-left:4.5rem; margin-top:4.5rem}
.msec-media .media-news .news-item .news-meta{display:flex; flex-direction:column}
.msec-media .media-news .news-thum{display:flex; align-items:center; justify-content:center; overflow:hidden}
.msec-media .media-news .news-thum .thum-img{display:block; position:relative; bottom:0; width:100%; height:24.6rem; cursor:pointer; transition: all .20s ease}
.msec-media .media-news .news-thum .thum-img:before{content:''; position:absolute; top:0; right:0; bottom:0; left:0; border:1px solid rgba(0,0,0,.1)}
.msec-media .media-news .news-thum .thum-img img{display:block; width:100%; height:100%; object-fit:cover}
.msec-media .media-news .news-thum .thum-img:hover{bottom:-1rem}
.msec-media .media-news .news-info{display:flex; flex-direction:column; padding:2.5rem 0; border-bottom:2px solid var(--krds-color-light-gray-95)}
.msec-media .media-news .news-info .info-tit .tit{display:-webkit-box;min-height:90px; line-height:3rem; color:var(--krds-color-light-gray-95); font-size:2.3rem; font-weight:300; letter-spacing:-0.08rem; overflow:hidden; text-overflow:ellipsis; word-wrap:break-word; word-break:keep-all; -webkit-line-clamp:3; -webkit-box-orient:vertical}
.msec-media .media-news .news-info .info-tit:hover .tit,
.msec-media .media-news .news-info .info-tit:focus .tit{text-decoration:underline; text-underline-offset:0.4rem}
.msec-media .media-news .news-more{position:absolute; right:0;top:-0.6rem}


/* **************************************** *
 * 연구활동
 * **************************************** */
.msec-react{position:relative; width:160rem; margin:12rem auto 0}
.msec-react .msec-top{display:flex; align-items:center; width:100%}
.msec-react .top-tit{display:flex; align-items:center}
.msec-react .top-tit .tit{line-height:2.7rem; color:var(--krds-color-light-gray-90); font-size:2.7rem; font-weight:600; letter-spacing:-0.08rem}

.msec-react .react-swiper-container{margin-top:4.5rem}
.msec-react .react-swiper{overflow:hidden}
.msec-react .react-swiper .react-box .react-meta{display:flex; flex-direction:column}
.msec-react .react-swiper .react-box .react-thum{display:flex; align-items:center; overflow:hidden}
.msec-react .react-swiper .react-box .react-thum .thum-img{display:block; position:relative; bottom:0; width:100%; height:24.6rem; cursor:pointer; transition: all .20s ease}
.msec-react .react-swiper .react-box .react-thum .thum-img img{display:block; width:100%; height:100%}
.msec-react .react-swiper .react-box:hover .react-thum .thum-img{bottom:-1rem}
.msec-react .react-swiper .react-box .react-info{display:flex; flex-direction:column; padding-top:2.5rem}
.msec-react .react-swiper .react-box .react-info .info-tit .tit{display:-webkit-box; line-height:3rem; color:var(--krds-color-light-gray-95); font-size:2.3rem; font-weight:300; letter-spacing:-0.08rem; overflow:hidden; text-overflow:ellipsis; word-wrap:break-word; word-break:keep-all; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.msec-react .react-swiper .react-box .react-info .info-tit:hover .tit,
.msec-react .react-swiper .react-box .react-info .info-tit:focus .tit{text-decoration:underline; text-underline-offset:0.4rem}
.msec-react .react-swiper-button-prev,
.msec-react .react-swiper-button-next
{
	display:flex; align-items:center; justify-content:center; position:absolute; top:50%; width:4.2rem; height:4.2rem; margin-top:-1.3rem; padding:0;
	background:rgba(0,0,0,.5); border:none; border-radius:50%; z-index:1; cursor:pointer; transition:all .35s ease; box-sizing:border-box
}
.msec-react .react-swiper-button-prev{left:-2.3rem}
.msec-react .react-swiper-button-next{right:-2.3rem}
.msec-react .react-swiper-button-prev:hover,
.msec-react .react-swiper-button-next:hover{background:rgba(0,0,0,.8)}
.msec-react .react-swiper-button-prev:after,
.msec-react .react-swiper-button-next:after{position:relative; font-family:'remixicon'; font-size:2.9rem; color:var(--krds-color-light-gray-0)}
.msec-react .react-swiper-button-prev:after{content:'\ea64'; left:-0.1rem}
.msec-react .react-swiper-button-next:after{content:'\ea6e'; right:-0.2rem}
.msec-react .react-swiper-button-prev.swiper-button-disabled,
.msec-react .react-swiper-button-next.swiper-button-disabled{background:rgba(0,0,0,.1)}
.msec-react .react-swiper-pagination{display:none}


/* **************************************** *
 * 소속연구소
 * **************************************** */
.msec-region{position:relative; width:160rem; margin:12rem auto 0}
.msec-region .msec-top{display:flex; align-items:center; width:100%}
.msec-region .top-tit{display:flex; align-items:center}
.msec-region .top-tit .tit{line-height:2.7rem; color:var(--krds-color-light-gray-90); font-size:2.7rem; font-weight:600; letter-spacing:-0.08rem}

.msec-region .region-swiper-container{margin-top:4.5rem}
.msec-region .region-swiper{overflow:hidden}
.msec-region .region-swiper .region-box .region-meta{display:flex; flex-direction:column}
.msec-region .region-swiper .region-box .region-thum{display:flex; align-items:center; overflow:hidden}
.msec-region .region-swiper .region-box .region-thum .thum-img{display:block; position:relative; bottom:0; width:100%; height:24.6rem; cursor:pointer; transition: all .20s ease}
.msec-region .region-swiper .region-box .region-thum .thum-img img{display:block; width:100%; height:100%}
.msec-region .region-swiper .region-box:hover .region-thum .thum-img{bottom:-1rem}
.msec-region .region-swiper .region-box .region-info{display:flex; flex-direction:column; padding-top:2.5rem}
.msec-region .region-swiper .region-box .region-info .info-tit .tit{display:-webkit-box; line-height:3rem; color:var(--krds-color-light-gray-95); font-size:2.3rem; font-weight:300; letter-spacing:-0.08rem; overflow:hidden; text-overflow:ellipsis; word-wrap:break-word; word-break:keep-all; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.msec-region .region-swiper .region-box .region-info .info-tit:hover .tit,
.msec-region .region-swiper .region-box .region-info .info-tit:focus .tit{text-decoration:underline; text-underline-offset:0.4rem}
.msec-region .region-swiper-button-prev,
.msec-region .region-swiper-button-next
{
	display:flex; align-items:center; justify-content:center; position:absolute; top:50%; width:4.2rem; height:4.2rem; margin-top:-1.3rem; padding:0;
	background:rgba(0,0,0,.5); border:none; border-radius:50%; z-index:1; cursor:pointer; transition:all .35s ease; box-sizing:border-box
}
.msec-region .region-swiper-button-prev{left:-2.3rem}
.msec-region .region-swiper-button-next{right:-2.3rem}
.msec-region .region-swiper-button-prev:hover,
.msec-region .region-swiper-button-next:hover{background:rgba(0,0,0,.8)}
.msec-region .region-swiper-button-prev:after,
.msec-region .region-swiper-button-next:after{position:relative; font-family:'remixicon'; font-size:2.9rem; color:var(--krds-color-light-gray-0)}
.msec-region .region-swiper-button-prev:after{content:'\ea64'; left:-0.1rem}
.msec-region .region-swiper-button-next:after{content:'\ea6e'; right:-0.2rem}
.msec-region .region-swiper-button-prev.swiper-button-disabled,
.msec-region .region-swiper-button-next.swiper-button-disabled{background:rgba(0,0,0,.1)}
.msec-region .region-swiper-pagination{display:none}


/* **************************************** *
 * 더보기 버튼
 * **************************************** */
#msec-more{display:flex; align-items:center; justify-content:center; width:3.8rem; height:3.8rem; background-color:var(--krds-color-light-gray-0); border:2px solid var(--krds-color-light-gray-95); box-sizing:border-box}
#msec-more:before{content:''; position:absolute; bottom:0; left:0; right:0; height:0; background-color:var(--krds-color-light-gray-95); transition: all .15s ease}
#msec-more .more-ico{position:relative; width:100%; height:100%}
#msec-more .more-ico:before,
#msec-more .more-ico:after{content:''; position:absolute; left:50%; top:50%; background-color:var(--krds-color-light-gray-95); transition: all .35s ease}
#msec-more .more-ico:before{width:1.4rem; height:0.2rem; margin-left:-0.7rem; margin-top:-0.1rem}
#msec-more .more-ico:after{width:0.2rem; height:1.4rem; margin-left:-0.1rem; margin-top:-0.7rem}
#msec-more:hover:before,
#msec-more.active:before{bottom:0; height:100%}
#msec-more:hover .more-ico:before,
#msec-more:active .more-ico:before,
#msec-more:hover .more-ico:after,
#msec-more:active .more-ico:after{background-color:var(--krds-color-light-gray-0)}