@charset "utf-8";

/* 메인페이지 스타일만 정의 */

.main {}


/* ************************ PC (992~) ************************ */
@media screen and (min-width: 992px) {
	
	/* ******* visual ******* */
	.main .visual {position:relative; width:100%; height:calc(100vh - 100px);}
	.main .visual .cover {position:absolute; top:0; left:0; z-index:2; width:100%; height:100%; background: rgba(0,0,0,.5);}
	
	.main .visual .tit {position:absolute; top:50%; left:50%; width:100%; transform:translate(-50%, -50%); z-index:3; text-align:center; color:#fff;}
	.main .visual .tit h2 {font-size:4vw; margin-bottom:70px;}
	.main .visual .tit span:before {content:""; display:block; width:70px; margin:0 auto; height:5px; background:#fff;}
	.main .visual .tit p {font-size:19px; line-height:1.7; margin-top:55px;}

	.main .visual .scroll {position:absolute; bottom:270px; right:200px; z-index:5; color:#fff; -webkit-animation: slide-bottom 1s ease-in-out infinite alternate both; animation: slide-bottom 1s ease-in-out infinite alternate both;}
	.main .visual .scroll span {width:200px; position:absolute; transform: rotate(90deg); transform-origin: left top; -webkit-transform: rotate(90deg); -webkit-transform-origin: left top; background: url(../images/main/i-scroll.png) no-repeat 80% 20%;}
	
	@-webkit-keyframes slide-bottom {
	  0% {
		-webkit-transform: translateY(0);
				transform: translateY(0);
	  }
	  100% {
		-webkit-transform: translateY(30px);
				transform: translateY(30px);
	  }
	}
	@keyframes slide-bottom {
	  0% {
		-webkit-transform: translateY(0);
				transform: translateY(0);
	  }
	  100% {
		-webkit-transform: translateY(30px);
				transform: translateY(30px);
	  }
	}
	
	.main .visual .swiper-container-button {position:relative; width:210px; margin:0 auto; bottom:110px;}
	
	.main .visual .swiper-container-button .swiper-button-next, .swiper-container-rtl .swiper-button-prev {width:30px; background: url(../images/main/slider-arrow-right.png) no-repeat; background-size:100%;}
	.main .visual .swiper-container-button .swiper-button-prev, .swiper-container-rtl .swiper-button-next {width:30px; background: url(../images/main/slider-arrow-left.png) no-repeat; background-size:100%;}
	
	.main .visual .swiper-container {overflow:hidden; width:100%; height:100%;}
	.main .visual .swiper-container .swiper-wrapper {width:100%;}
	.main .visual .swiper-container .swiper-wrapper .swiper-slide {}
	.main .visual .swiper-container .swiper-wrapper .swiper-slide img {overflow:hidden;}
	.main .visual .swiper-container .swiper-progress-bar {width:100%; display:block; position:absolute; z-index:999 !important; bottom:0;  height:4px;}
	.main .visual .swiper-container .swiper-progress-bar .slide_progress-bar {height:4px;}
	.swiper-progress-bar .slide_progress-bar:after {position: absolute; top: 0; left: 0; background: #8e1d25; height: 100%; width: 0; content: ""; transition: 0.1s width linear;}
	.swiper-progress-bar .slide_progress-bar {position:absolute; z-index:999 !important; background: rgba(255,255,255,.5); width: auto; clear: both; opacity: 0; left: 0; right: 0;}
	.swiper-progress-bar.active .slide_progress-bar {opacity:1;}
	
	/*autoplay speed와 관련*/
	.swiper-progress-bar.animate .slide_progress-bar:after {transition:width ease; transition-delay:unset; width:100%; transition-duration:5s;}

	.swiper-pagination {bottom:110px; color:#fff; font-size:18px;}
	
	
	
	
	/* ******* content ******* */
	.w_1280 {width:1280px; margin:0 auto; padding-top:100px;}
	.tit {text-align:center; font-size:48px; color:#8f1d25;}
	
	
	/* ******* q&a 백신팩트체크 ******* */
	.qna .tit {margin-bottom:60px;}
	.qna .tit h3 {height:110px; background: url(../images/main/qna.png) no-repeat 50% 0%; font-weight:800; line-height:160px;}
	
	.qna .btn {position:relative; margin-bottom:70px;}
	.qna .btn a {display:inline-block; float:right; width:340px; height:50px; font-size:19px; 
	color:#fff; font-weight:600; letter-spacing:-1; text-align:center; line-height:50px; background:#d1d1d1; border-radius:6px;}
	.qna .btn a:hover {background:#afcf22;}
	.qna .btn span {position:absolute; text-indent:-9999px; top:25px; right:-20px; width:66px; height:77px; background: url(../images/main/qna-arrow.png) no-repeat;}
	
	.qna .list {clear:both; padding-top:75px;} 
	.qna .list ul li a {display:block; padding:50px 50px 30px; border:1px solid #ebebeb; border-top:none; width:100%; background: url(../images/main/qna-q.png) no-repeat 4% 40%;}
	.qna .list ul li:first-child a {border-top:2px solid #8f1d25;}
	.qna .list ul li a p {padding-left:60px; font-size:19px; width:1020px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#666; font-weight:500;}
	.qna .list ul li a:hover p {color:#8f1d25;}
	.qna .list ul li a:hover {border-bottom:1px solid #8f1d25; background: url(../images/main/qna-q-hover.png) no-repeat 4% 40%;}
	.qna .list ul li a span{padding-left:60px; font-size:15px; color:#999; padding-top:20px;}
	.qna .list ul li {position:relative;}
	.qna .list ul li a div {position:absolute; top:33%; right:4%; float:right; width:44px; height:44px; text-indent:-9999px; border-radius:50%; border:1px solid #999; background:#fff url(../images/main/qna-arrow-2.png) no-repeat center;}
	.qna .list ul li a:hover div {border:1px solid #8f1d25; background:#8f1d25 url(../images/main/qna-arrow-2-hover.png) no-repeat center;}
	
	
	
	/* ******* 보도자료 ******* */
	.news {width:100%; height:840px; margin-top:90px; background: url(../images/main/news_bg.jpg) no-repeat; background-size:2100px;}
	.news .tit h3 {padding:115px 0 18px; color:#fff;}
	.news .tit span {display:block; font-size:24px; color:#fff; padding-bottom:55px;}
	
	.swiper-news.swiper-container {padding:0 0 40px;}
	
	.news .swiper-container-horizontal>.swiper-scrollbar {left:0; bottom:0; width:100%;}
	.news .swiper-scrollbar-drag {background:#fff; border-radius:0px;}
	.news .swiper-scrollbar {background: rgba(255,255,255,.3); border-radius:0px;}
	
	.news .swiper-container-button {position:absolute; width:100%; top:160px;}
	.news .swiper-container-button .swiper-button-prev {width:80px; height:80px; background: url(../images/main/news-arrow-left.png) no-repeat;}
	.news .swiper-container-button .swiper-button-next {width:80px; height:80px; background: url(../images/main/news-arrow-right.png) no-repeat;}

	.news .swiper-news .news-item a {position:relative; display:block; width:100%; height:400px; background:#fff; padding:50px 40px; line-height:1.8;}
	.news .swiper-news .news-item a:before {position:absolute; top:0; left:0; width:100%; height:100%; display:block; content:""; opacity: 0; transition: opacity .2s linear; -webkit-transition: opacity .2s linear;}
	.news .swiper-news .news-item a:hover:before {border:4px solid #8f1d25; opacity: 1;}
	.news .swiper-news .news-item a span {display:block; font-size:15px; color:#999; width:300px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
	.news .swiper-news .news-item a span:nth-child(1) {letter-spacing:1px; color:#666; padding-bottom:22px;}
	.news .swiper-news .news-item a p {font-size:19px; font-weight:700; color:#666;}
	.news .swiper-news .news-item a p:nth-child(2) {margin-bottom:30px; width:300px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
	.news .swiper-news .news-item a p:nth-child(4) {font-size:13px; float:left; padding-top:80px; color:#999;}
	.news .swiper-news .news-item a div {text-indent:-9999px; width:60px; height:60px; float:right; background: url(../images/main/news-arrow.png) no-repeat; margin-top:40px;}
	.news .swiper-news .news-item a:hover p {color:#8f1d25;}
	


	/* ******* 연구성과,유튜브 ******* */
	.grid-container { 
	width:100%;
	display: grid; 
	gap: 1px; 
	grid-template-columns: 1fr 1fr;
	grid-template-areas:
	'research   youtube';
	} 
	.grid-container h3 {font-size:36px; color:#8f1d25; padding-top:100px;}
	

	/* 연구성과 */
	.research div {display:flex; justify-content:flex-end; align-items:flex-end; margin-bottom:40px;}
	.research div a {display:block; width:34px; height:34px; border:1px solid #999; border-radius:100px;  background: url(../images/main/i-plus.png) no-repeat center; text-indent:-9999px;  margin-left:465px;}
	.research div a:hover {background:rgba(153,153,153,.1) url(../images/main/i-plus.png) no-repeat center;}

	.research ul {display:flex; justify-content:flex-end; margin-bottom:100px;}
	.research ul li {width:310px; height:380px; margin-right:20px; background:#ebebeb;}
	.research ul li:last-child {margin-right:0;}
	.research ul li a {position:relative; display:block; width:100%; height:100%;}
	.research ul li a p.img {width:100%; height:100%;}
	.research ul li a p.img img {width:310px; height:380px; object-fit:contain; background:#fff; border: 1px solid #efefef;}
	.research ul li a p.txt {position:absolute; width:100%; height:110px; bottom:0; background:#f9f9f9; color:#666; padding:30px; border: 1px solid #efefef;}
	.research ul li a p.txt span {width:100%; overflow: hidden; font-size:15px; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
	.research ul li a:hover p.txt {background:rgba(255,255,255,.9); color:#000; transition: .45s ease;}
	
	/* 유튜브 */
	.youtube {grid-area: youtube; margin-left:100px; background:#f9f9f9; padding-left:120px;}

	.youtube .swiperWrap {width:100%}
	.youtube .swiper-youtube {width:360px; height:380px; margin-top:40px; overflow:hidden; position:relative;}	
	.youtube .swiper-youtube .swiper-slide a {display:block; height:380px;}
	.youtube .swiper-youtube .swiper-slide span {position:relative; display:block;}
	.youtube .swiper-youtube .swiper-slide span:nth-child(1) {width:100%; height:200px;}
	.youtube .swiper-youtube .swiper-slide span:nth-child(1) img {width:100%; height:200px; object-fit:cover;}
	.youtube .swiper-youtube .swiper-slide span:nth-child(1):before {position:absolute; top:0; left:0; z-index:999; display:block; content:""; width:100%; height:100%; background:rgba(0,0,0,.3) url(../images/main/youtube-arrow.png) no-repeat center;}
	.youtube .swiper-youtube .swiper-slide span:nth-child(2) {font-size:15px; color:#999; padding-bottom:40px;}
	.youtube .swiper-youtube .swiper-slide p {margin:25px 0; color:#000; width:360px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
	.youtube .swiper-youtube .swiper-slide a:hover span:nth-child(1):before {background:rgba(0,0,0,.7) url(../images/main/youtube-arrow.png) no-repeat center; transition: .45s ease;}

	.youtube .swiper-container-button {position:relative; right:0; bottom:0; width:360px;}
	.youtube .swiper-container-button .swiper-button-next {position:absolute; right:0; width:30px; background: url(../images/main/youtube-arrow-right.png) no-repeat;}
	.youtube .swiper-container-button .swiper-button-prev {position:absolute; left:290px; width:30px; background: url(../images/main/youtube-arrow-left.png) no-repeat;}
	
	.youtube .swiper-youtube .swiper-pagination {text-align:left;}
	.youtube .swiper-youtube .swiper-pagination-bullet {margin:0 5px; width:6px; height:6px; background:#d6b8b9; opacity:1;}
	.youtube .swiper-youtube .swiper-pagination-bullet-active {width:20px; height:6px; border-radius:100px; background:#8f1d25; transition: all .3s linear !important;
    -webkit-transition: all .3s linear !important;}
	
	.swiper-container-horizontal > .swiper-pagination-bullets {bottom:0; left:0; width:62px;}
	
	
}


/* ************************ 태블릿 (991~1280) ************************ */
@media screen and (min-width: 991px) and (max-width: 1280px) {
	
	/* 공통 */
	.qna, .news {padding-left:20px; padding-right:20px;}

    /* ******* q&a 백신팩트체크 ******* */
	.qna {width:100%;}
	.qna .list ul li a p {width:800px;}


	/* ******* 보도자료 ******* */
	.news .swiper-news {width:100%;}


	/* ******* 연구성과,유튜브 ******* */
	.grid-container {
		width: 100%;
		display: grid;
		gap: 1px;
		grid-template-columns: 1fr 50%;
		grid-template-areas: 'research youtube';
	}
	
	.research {margin-left:20px;}
	.youtube {grid-area: youtube; width:100%; margin-left:40px; background:#f9f9f9; padding-left:40px;}
	.youtube .swiper-youtube {width:70%;}
	.research ul {justify-content:center;}
	
}



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

	
	/* ******* visual ******* */
	.main .visual {position:relative; width:100%; height:500px;}
	.main .visual .cover {position:absolute; top:0; left:0; z-index:2; width:100%; height:100%; background: rgba(0,0,0,.5);}
	
	.main .visual .tit {position:absolute; top:50%; left:50%; width:100%; transform:translate(-50%, -50%); z-index:3; text-align:center; color:#fff;}
	.main .visual .tit h2 {font-size:7vw; margin-bottom:70px;}
	.main .visual .tit span:before {content:""; display:block; width:70px; margin:0 auto; height:5px; background:#fff;}
	.main .visual .tit p {font-size:19px; line-height:1.7; margin-top:55px;}

	.main .visual .scroll {position:absolute; bottom:270px; right:10px; z-index:5; color:#fff; -webkit-animation: slide-bottom 1s ease-in-out infinite alternate both; animation: slide-bottom 1s ease-in-out infinite alternate both;}
	.main .visual .scroll span {width:200px; position:absolute; transform: rotate(90deg); transform-origin: left top; -webkit-transform: rotate(90deg); -webkit-transform-origin: left top; background: url(../images/main/i-scroll.png) no-repeat 80% 20%;}
	
	@-webkit-keyframes slide-bottom {
	  0% {
		-webkit-transform: translateY(0);
				transform: translateY(0);
	  }
	  100% {
		-webkit-transform: translateY(30px);
				transform: translateY(30px);
	  }
	}
	@keyframes slide-bottom {
	  0% {
		-webkit-transform: translateY(0);
				transform: translateY(0);
	  }
	  100% {
		-webkit-transform: translateY(30px);
				transform: translateY(30px);
	  }
	}
 
	
	.main .visual .swiper-container-button {position:relative; width:210px; margin:0 auto; bottom:60px;}
	.main .visual .swiper-container-button .swiper-button-next, .swiper-container-rtl .swiper-button-prev {width:30px; background: url(../images/main/slider-arrow-right.png) no-repeat; background-size:100%;}
	.main .visual .swiper-container-button .swiper-button-prev, .swiper-container-rtl .swiper-button-next {width:30px; background: url(../images/main/slider-arrow-left.png) no-repeat; background-size:100%;}
	
	.main .visual .swiper-container {overflow:hidden; width:100%; height:100%;}
	
	.main .visual .swiper-container .swiper-wrapper {width:100%;}
	.main .visual .swiper-container .swiper-wrapper .swiper-slide {width:100%;}
	.main .visual .swiper-container .swiper-wrapper .swiper-slide img {position: absolute; transform: translate(-40%, -15%);}
	
	.main .visual .swiper-container .swiper-progress-bar {width:100%; display:block; position:absolute; z-index:999 !important; bottom:0;  height:4px;}
	.main .visual .swiper-container .swiper-progress-bar .slide_progress-bar {height:4px;}
	
	.swiper-progress-bar .slide_progress-bar:after {position: absolute; top: 0; left: 0; background: #8e1d25; height: 100%; width: 0; content: ""; transition: 0.1s width linear;}
	.swiper-progress-bar .slide_progress-bar {position:absolute; z-index:999 !important; background: rgba(255,255,255,.5); width: auto; clear: both; opacity: 0; left: 0; right: 0;}
	.swiper-progress-bar.active .slide_progress-bar {opacity:1;}
	
	/*autoplay speed와 관련*/
	.swiper-progress-bar.animate .slide_progress-bar:after {transition:width ease; transition-delay:unset; width:100%; transition-duration:5s;}

	.swiper-pagination {bottom:60px; color:#fff; font-size:18px;}
	
	
	/* ******* q&a 백신팩트체크 ******* */
	.qna {margin:80px 0;}
	.qna .tit {margin-bottom:40px;}
	.qna .tit h3 {font-size:30px; color:#8e1d24; text-align:center; height:110px; background: url(../images/main/qna.png) no-repeat 50% 0%; background-size:130px; font-weight:800; line-height:115px;}
	
	.qna .btn {position:relative; width:640px; display: block; margin: auto;}
	.qna .btn a {display:inline-block; float:right; width:330px; height:40px; font-size:19px; 
	color:#fff; font-weight:600; letter-spacing:-1; text-align:center; line-height:40px; background:#d1d1d1; border-radius:6px;}
	.qna .btn a:hover {background:#afcf22;}
	.qna .btn span {position:absolute; text-indent:-9999px; top:25px; right:-20px; width:66px; height:77px; background: url(../images/main/qna-arrow.png) no-repeat; background-size:55px;}
	
	.qna .list {clear:both; width:640px; margin:0 auto; padding-top:75px;} 
	.qna .list ul li a {display:block; padding:50px 50px 30px; border:1px solid #ebebeb; border-top:none; width:100%; background: url(../images/main/qna-q.png) no-repeat 4% 40%; background-size:40px;}
	.qna .list ul li:first-child a {border-top:2px solid #8f1d25;}
	.qna .list ul li a p {padding-left:40px; font-size:16px; width:95%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#666; font-weight:500;}
	.qna .list ul li a:hover p {color:#8f1d25;}
	.qna .list ul li a:hover {border-bottom:1px solid #8f1d25; background: url(../images/main/qna-q-hover.png) no-repeat 4% 40%; background-size:40px;}
	.qna .list ul li a span{padding-left:40px; font-size:15px; color:#999; padding-top:20px;}
	.qna .list ul li {position:relative;}
	.qna .list ul li a div {position:absolute; top:33%; right:4%; float:right; width:38px; height:38px; text-indent:-9999px; border-radius:50%; border:1px solid #999; background:#fff url(../images/main/qna-arrow-2.png) no-repeat center;}
	.qna .list ul li a:hover div {border:1px solid #8f1d25; background:#8f1d25 url(../images/main/qna-arrow-2-hover.png) no-repeat center;}
	
	
	
	/* ******* 보도자료 ******* */
	
	.news {padding:80px 0; background: url(../images/main/news_bg.jpg) no-repeat; background-size:2100px;}
	.news .tit h3 {color:#fff; text-align:center; font-size:30px;}
	.news .tit span {display:block; font-size:24px; color:#fff; padding-bottom:55px; text-align:center;}
	
	.swiper-news.swiper-container {width:640px;}
	
	.news .swiper-container-horizontal>.swiper-scrollbar {left:0; bottom:0; width:100%;}
	.news .swiper-scrollbar-drag {background:#fff; border-radius:0px;}
	.news .swiper-scrollbar {background: rgba(255,255,255,.3); border-radius:0px;}
	
	.news .swiper-container-button {position:absolute; width:100%; top:22px;}
	.news .swiper-container-button .swiper-button-prev {width:60px; height:60px; background: url(../images/main/news-arrow-left.png) no-repeat; background-size:60px;}
	.news .swiper-container-button .swiper-button-next {width:60px; height:60px; background: url(../images/main/news-arrow-right.png) no-repeat; background-size:60px;} 

	.news .swiper-news .news-item a {position:relative; display:block; width:100%; height:380px; background:#fff; padding:30px; line-height:1.8;}
	.news .swiper-news .news-item a:before {position:absolute; top:0; left:0; width:100%; height:100%; display:block; content:""; opacity: 0; transition: opacity .2s linear; -webkit-transition: opacity .2s linear;}
	.news .swiper-news .news-item a:hover:before {border:4px solid #8f1d25; opacity: 1;}
	.news .swiper-news .news-item a span {display:block; font-size:15px; color:#999; width:240px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
	.news .swiper-news .news-item a span:nth-child(1) {letter-spacing:1px; color:#666; padding-bottom:22px;}
	.news .swiper-news .news-item a p {font-size:19px; font-weight:700; color:#666;}
	.news .swiper-news .news-item a p:nth-child(2) {margin-bottom:30px; width:230px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
	.news .swiper-news .news-item a p:nth-child(4) {font-size:13px; float:left; padding-top:80px; color:#999;}
	.news .swiper-news .news-item a div {text-indent:-9999px; width:60px; height:60px; float:right; background: url(../images/main/news-arrow.png) no-repeat; margin-top:40px;}
	.news .swiper-news .news-item a:hover p {color:#8f1d25;}
	
	/* ******* 연구성과,유튜브 ******* */
	.grid-container { 
	width:100%;
	display: grid; 
	gap: 1px; 
	grid-template-columns: 1fr;
	grid-template-areas:
	'research   youtube';
	} 
	.grid-container h3 {font-size:30px; color:#8f1d25; text-align:center;}
	

	/* 연구성과 */
	.research {grid-row:1 / 1; grid-column: 1 / 1; margin:80px 0;}
	.research div {display:flex; justify-content:center; align-items:flex-end; margin-bottom:40px;}
	.research div a {display:block; width:32px; height:32px; border:1px solid #999; border-radius:100px;  background: url(../images/main/i-plus.png) no-repeat center; text-indent:-9999px;  margin-left:40px;}
	.research div a:hover {background:rgba(153,153,153,.1) url(../images/main/i-plus.png) no-repeat center;}

	.research ul {display:flex; justify-content:center;}
	
	.research ul li {width:310px; height:380px; margin-right:20px; background:purple;}
	.research ul li:last-child {margin-right:0;}
	.research ul li a {position:relative; display:block; width:100%; height:100%;}
	.research ul li a p:nth-child(1) {width:100%; height:100%;}
	.research ul li a p:nth-child(1) img {width:310px; height:380px; object-fit:contain; background:#fff; border:1px solid #efefef;}
	
	.research ul li a p.txt {position:absolute; width:100%; height:110px; bottom:0; background:#f9f9f9; border:1px solid #efefef; color:#666; padding:30px;}
	.research ul li a p.txt span {width:100%; overflow: hidden; font-size:15px; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
	.research ul li a:hover p.txt { background:rgba(255,255,255,.9); color:#000; transition: .45s ease;}
	
	
	/* 유튜브 */
	.youtube {grid-area: youtube; width:100%; background:#f9f9f9; grid-row:2 / 2; grid-column: 1 / 1; margin:0px; padding:80px 0;}
	.youtube .swiperWrap {position:relative; width:640px; margin:0 auto;}
	.youtube .swiper-youtube {min-height:550px; margin-top:40px; overflow:hidden;}	

	.youtube .swiper-youtube .swiper-slide a {display:block; height:380px;}
	.youtube .swiper-youtube .swiper-slide span {position:relative; display:block;}
	.youtube .swiper-youtube .swiper-slide span:nth-child(1) {width:640px; height:360px;}
	.youtube .swiper-youtube .swiper-slide span:nth-child(1):before {position:absolute; top:0; left:0; z-index:999; display:block; content:""; width:100%; height:100%; background:rgba(0,0,0,.3) url(../images/main/youtube-arrow.png) no-repeat center;}
	.youtube .swiper-youtube .swiper-slide span:nth-child(1) img {width:100%; height:360px; object-fit:cover;}
	.youtube .swiper-youtube .swiper-slide span:nth-child(2) {font-size:15px; color:#999; padding-bottom:40px;}
	.youtube .swiper-youtube .swiper-slide p {margin:25px 0; color:#000; width:640px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
	.youtube .swiper-youtube .swiper-slide a:hover span:nth-child(1):before {background:rgba(0,0,0,.7) url(../images/main/youtube-arrow.png) no-repeat center; transition: .45s ease;}

	.youtube .swiper-container-button {position:absolute; right:0; bottom:0; width:360px;}
	.youtube .swiper-container-button .swiper-button-next {position:absolute; right:0; width:30px; background: url(../images/main/youtube-arrow-right.png) no-repeat;}
	.youtube .swiper-container-button .swiper-button-prev {position:absolute; left:290px; width:30px; background: url(../images/main/youtube-arrow-left.png) no-repeat;}
	
	.youtube .swiper-youtube .swiper-pagination-bullet {margin:0 5px; width:6px; height:6px; background:#d6b8b9; opacity:1;}
	.youtube .swiper-youtube .swiper-pagination-bullet-active {width:20px; height:6px; border-radius:100px; background:#8f1d25; transition: all .3s linear !important;
    -webkit-transition: all .3s linear !important;}
	
	.swiper-container-horizontal > .swiper-pagination-bullets {text-align:left; bottom:0; left:0; width:62px;}

}


/* ************************ 모바일 (0~767) ************************ */
@media screen and (max-width: 767px) {
	
	/* 공통 */
	.main {max-width:767px;}
	
	/* ******* visual ******* */
	.main .visual {position:relative; width:100%; height:400px;}

	.main .visual .tit {position:absolute; top:50%; left:50%; width:100%; transform:translate(-50%, -50%); z-index:3; text-align:center; color:#fff;}
	.main .visual .tit h2 {font-size:6.5vw; margin-bottom:40px;}
	.main .visual .tit span:before {content:""; display:block; width:40px; margin:0 auto; height:2px; background:#fff;}
	.main .visual .tit p {font-size:3.5vw; line-height:1.7; margin-top:35px;}

	.main .visual .scroll {bottom:180px; right:8px;}
	.main .visual .scroll span {width:160px; font-size:12px; background:url(../images/main/i-scroll.png) no-repeat 75% 35%;;}
	
	.main .visual .swiper-container .swiper-wrapper .swiper-slide img {position: absolute; transform: translate(-50%, -20%);}
	
	.main .visual .swiper-container-button {position:relative; width:200px; margin:0 auto; bottom:50px;}
	.main .visual .swiper-container-button .swiper-button-next, .swiper-container-rtl .swiper-button-prev {width:22px; background: url(../images/main/slider-arrow-right.png) no-repeat; background-size:100%;}
	.main .visual .swiper-container-button .swiper-button-prev, .swiper-container-rtl .swiper-button-next {width:22px; background: url(../images/main/slider-arrow-left.png) no-repeat; background-size:100%;}

	.swiper-pagination {bottom:50px; color:#fff; font-size:14px;}
	
	/* qna */
	.qna {margin:60px 0;}
	
	/* 보도자료 */
	.news {padding:60px 0;}
	.news .swiper-container-button {top:22px;}
	
	/*연구성과*/
	.research {margin:60px 0;}
	
	/* 유튜브 */
	.youtube {margin:0; padding:60px 0;}

}


/* ************************ 모바일 (0~650) ************************ */
@media screen and (max-width: 650px) {
	
	.research ul li:last-child  {display:none;}
	
	/* qna */
	.qna .list,.qna .btn {width:360px;}
	
	/* 보도자료 */
	.swiper-news.swiper-container {width:360px;}
	.news .swiper-news .news-item a {padding:40px;}
	.news .swiper-news .news-item a p:nth-child(2),.news .swiper-news .news-item a span {width:280px;}
	
	/* 연구성과 */
	.research ul li {width:360px; height:440px; margin-right:0px;}
	.research ul li a p:nth-child(1) img {width:360px; height:440px; object-fit:contain;}

	/* 유튜브 */
	.youtube .swiperWrap {position:relative; width:360px; margin:0 auto;}	
	.youtube .swiper-youtube {min-height:280px;}	
	.youtube .swiper-youtube .swiper-slide p {width:360px;}
	.youtube .swiper-youtube .swiper-slide span:nth-child(1) {width:360px; height:200px;}
	.youtube .swiper-youtube .swiper-slide span:nth-child(1):before {position:absolute; top:0; left:0; z-index:999; display:block; content:""; width:100%; height:100%; background:rgba(0,0,0,.3) url(../images/main/youtube-arrow.png) no-repeat center;}
	.youtube .swiper-youtube .swiper-slide span:nth-child(1) img {width:100%; height:200px; object-fit:cover;}

}