@media screen and (max-width:1700px){
	/* main */
	main #titleBox,
	main .news #titleBox{ padding-top: 100px;}
	main .pipe .ctnBox .itemBox{ height: 300px;}
	main .pipe .ctnBox .itemBox figure.icon{ margin-bottom: 20px;}
	main .news .slideBox .swiper-slide .imgBox{ height: 250px;}
}

@media screen and (max-width:1600px){
	/* common */
	.w1600{ padding: 0 40px;}

	.font100{ font-size:80px; }
	.font70{ font-size:50px; }
	.font60{ font-size:45px; }
	.font50{ font-size:35px; }

	/* header */
	header .headerBox{ margin: 0 20px;}

	#allMenu #allGnb #gnb > li > a{ font-size:45px; margin-right: 50px; min-width: 200px;}
	#allMenu #allGnb #gnb > li .depth2 li:not(:last-child){ margin-right: 20px;}

	/* main */
	main section{ clip-path: inset(0 0 0);}
	main .visual .slideBox .slick-slide .circleBox{ right: 50px; bottom: 50px;}

	main .research .ctnBox .txtBox{ padding: 70px 30px;}
	main .research.active .ctnBox .txtBox:hover .innerBox .txt2{ height: 210px;}

	main .join .titleBox p{ font-size:120px; }

	
	main .news .ctnBox{ padding: 0 40px; }
	main .news .optionBox{ padding: 0;}

	/* sub */
	#plat .content section .ctnBox dl dd:not(.arrow){ padding: 40px 20px;}
	#plat .star .ctnBox dl.item2 dd .txt{flex-direction: column; }

	#contact .content .txtBox h4.title{ min-width:auto; width: 20%; }
	#contact .content .ctnBox{ width: 80%;}
	#contact .content .ctnBox .itemBox{ padding:  40px 30px;}

	#overview .info .imgBox{ height: auto; padding: 100px 20px;}
	#overview .info .imgBox .title{ line-height: 1.4; }
	#overview .info .imgBox .txt br{ display:none; }
}

@media screen and (max-width:1400px){
	/* common */
	.w1400{ padding: 0 40px;}

	#topBtn{ width: 60px; height: 60px;}
	#topBtn:before{ width: 100%; height: 100%; }
	#topBtn svg{ width: 30%;}

	/* sub */
	#overview .triple .ctnBox .itemBox .txt br{ display:none; }
}

@media screen and (max-width:1200px){
	/* common */
	.font100{ font-size:75px; }
	.font70{ font-size:45px; }
	.font60{ font-size:40px; }
	.font50{ font-size:35px; }
	.font46{ font-size:32px; }
	.font40{ font-size:30px; }
	.font36{ font-size:28px; }
	.font32{ font-size:26px; }

	/* header */
	header .headerBox nav{ display:none !important; }

	#allMenu{ padding-top: 100px;}
	#allMenu > div{ align-items:flex-start; }
	#allMenu #allGnb{ width: 100%; }
	#allMenu #allGnb #gnb > li:not(:last-child){ margin-bottom: 20px;}
	#allMenu #allGnb #gnb > li{ flex-direction:column; align-items:flex-start; }
	#allMenu #allGnb #gnb > li > a{ margin-right: 0 ; min-width: auto;}
	#allMenu #allGnb #gnb > li .depth2{ padding: 30px;  background: rgba(255, 255, 255, 0.2); width: 100%;  border-radius: 10px;  margin-top: 10px;}
	#allMenu #allGnb #gnb > li .depth2 li{ display:block; }
	#allMenu #allGnb #gnb > li .depth2 li:not(:last-child){ margin-right: 0; margin-bottom: 10px;}

	/* main */
	main #titleBox,main .news #titleBox{ padding: 0;}
	main .pipe,main .news,main .join{ padding: 100px 0;}
	main .pipe .ctnBox{ gap: 30px; flex-wrap:wrap; }
	main .pipe .ctnBox .itemBox{ width: calc((100% - 30px) / 2);}

	main .research{ display:block; height: 100vh;}
	main .research .ctnBox:before,
	main .research .ctnBox:after{ opacity: 1; }
	main .research .ctnBox .txtBox{ padding: 70px 50px;}
	main .research .ctnBox .txtBox .innerBox .txt2{ height: 100%; }

	main .join{ width: 100%; overflow: hidden;}
	main .join .titleBox p{ font-size:90px; }
	main .join .txtP br{ display:none; }

	main .news .ctnBox{ padding: 0 20px;}

	/* sub */
	#subContents{ padding-bottom: 80px;}
	#sv .subVisual{ padding: 150px 0 60px;}

	#pipeline .ctnBox table tbody tr,
	#pipeline .ctnBox table tbody,
	#pipeline .ctnBox table{ display:block;}
	#pipeline .ctnBox table colgroup{ display:none; }
	#pipeline .ctnBox table tr{ border-bottom:2px solid #000; }
	#pipeline .ctnBox table tr:first-child{ display:none; }
	#pipeline .ctnBox table tr td{ display:inline-block; width: 100%; height: auto; text-align: left; padding: 15px 10px; }
	#pipeline .ctnBox table tr td:last-child{ padding: 10px 0; }
	#pipeline .ctnBox table tr td br{display:none; }
	#pipeline .ctnBox table tr td::before{content:attr(data-tit); font-family: 'Pretendard', sans-serif; font-weight:500; font-size:20px; color: #000;}
	#pipeline .ctnBox table tr td.progress ul{ margin: 0 0 10px;  justify-content: space-between; padding: 0 20px;background: transparent; border-radius:0px; }
	#pipeline .ctnBox table tr td.progress ul li{ width: auto; position: relative; display:flex; align-items:center; justify-content:center; height: 40px; font-size:16px; color: #000; text-align: center; font-weight:500;}
	#pipeline .ctnBox table tr td.progress ul li:not(:last-child){ background: none;}
	#pipeline .ctnBox table tr td.progress ul li:not(:last-child):after{ content:''; display:block; width: 8px; height: 14px; background: url(/img/sub/pipeArrow.png) no-repeat 50% 50%; background-size:cover; position: absolute; transform:translateY(-50%); top: 50%; right: -100px; z-index: 5; }
	#pipeline .ctnBox table tr td.progress .bar{ position:static; transform:translateY(0); background: #f5f5f5;}

	#overview .info .imgBox .title br{ display:none; }
	#overview .triple .ctnBox .itemBox{ padding: 30px;}
	#overview .triple .ctnBox .itemBox .txt br,
	#overview .txtBox .txt br{ display:none; }
	#overview .triple{ padding-top: 30px;}
	#overview .triple .bg{ width: 750px; top: -100px; }
	#overview .triple .bg svg{ width: 100%; }
	#overview .triple .txtBox{ margin-bottom: 520px;}

	#history .content .ctnBox{ margin: 0;}

	#ceo .content{ flex-direction:column; align-items: center;}

	#team .ctnBox .itemBox{ padding: 40px 20px;}
	#team .ctnBox .itemBox .dlBox dl,
	#team .ctnBox .item1 .titleBox{ padding: 0 20px;}
	#team .ctnBox .item1{ padding: 40px 0;}

	#collabo .intro{ padding: 0 20px;}
	#collabo .intro .title{ line-height: 1.5;}
	#collabo .intro .title br{ display:none; }
	#collabo .logo dl:not(:last-child){ margin-bottom: 100px;}
	#collabo .logo dl dd{ gap:20px; }
	#collabo .logo dl dd figure{ width: calc((100% - 40px) / 3);}

	#plat .star .ctnBox{ gap:40px; flex-wrap:wrap; }
	#plat .star .ctnBox dl{ width: calc((100% - 40px) / 2);}
	#plat .star .ctnBox dl.item2 .arrow{ display:none; }
	#plat .star .ctnBox figure{ text-align: center; }
	#plat .content section .ctnBox dl dd:not(.arrow){ flex-direction:column; }
	#plat .anti .ctnBox .wrapBox dl dd .arrow{ transform:rotate(90deg); }
	#plat .anti .ctnBox .wrapBox dl dd .img figure{ height: 150px; display:flex; justify-content:center; align-items:center; }
	#plat .anti .ctnBox .wrapBox dl.item1 dd > div:last-child{ display:flex; width: 100%; justify-content: space-around;}
	#plat .anti .ctnBox .wrapBox dl.item1 dd > div:last-child .img:first-child{ order:2; }

	.mbs section{ padding: 100px 0;}
	
	.notice_view #viewBtn{ margin-top: 80px;}

	#contact .content:not(:last-child){ margin-bottom: 100px;}

	/* footer */
	.footer_in .infoBox{ margin-bottom: 40px;}
	.footer_in .bBox{ flex-direction: column; align-items:flex-start; }
	.footer_in .bBox .copy{ margin-bottom: 30px;}
}

@media screen and (max-width:960px){
	/* common */
	.font100{ font-size:60px; }
	.font70{ font-size:40px; }
	.font60{ font-size:35px; }
	.font50{ font-size:30px; }
	.font46{ font-size:28px; }
	.font40{ font-size:27px; }
	.font36{ font-size:24px; }
	.font32{ font-size:23px; }
	.font25,.font24{ font-size:22px; }
	.font22{ font-size:20px; }
	.font20{ font-size:18px; }

	.w1600,
	.w1400{ padding: 0 20px;}

	#topBtn{ width: 60px; height: 60px; right: 20px; bottom: 20px }
	#topBtn:before{ width: 100%; height: 100%; }
	#topBtn svg{ width: 30%;}
	@media (hover: hover) {
		#topBtn:hover:before{ width: 70px; height: 70px;}
	}

	/* header	*/
	header .headerBox{ height: 70px;}
	header .headerBox .logo .svg{ width: 150px;}

	#allMenu #allGnb #gnb > li > a{ font-size:35px; }
	#allMenu #allGnb #gnb > li .depth2{ padding: 20px;}
	#allMenu .bgIcon{ width: 50%;}
	#allMenu #allGnb #gnb > li .depth2 li a:before{ content:'-'; display:inline-block; margin-right: 10px;}

	/* main */
	main{ overflow: hidden;}
	main .visual .slideBox .slick-slide .txtBox{ padding: 0;}
	main .visual .slideBox .slick-slide .txtBox .txt br{ display:none; }
	main .visual .slideBox .slick-slide .circleBox{ transform:scale(0.8); right: 20px; bottom: 20px;}

	main .research .ctnBox{ flex-direction:column; background: rgba(0, 0, 0, 0.2);}
	main .research .ctnBox .txtBox{ width: 100%; height: calc(100vh / 3);padding: 50px 20px;}
	main .research .ctnBox .txtBox2:after{ border-top: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.1);}
	main .research .ctnBox .txtBox .circle{ transform:translateX(-50%); left: 50%; right: auto; top: -9px; opacity: 1;}
	main .research .ctnBox .txtBox .circle2{ bottom: -9px; top: auto;}
	main .research .ctnBox .txtBox .innerBox .txt br,
	main .research .ctnBox .txtBox .innerBox .txt2{ display:none; }

	main .pipe,main .news,main .join{ padding: 80px 0;}
	main .pipe .ctnBox{ gap:30px 15px; }
	main .pipe .ctnBox .itemBox{ width: calc((100% - 15px) / 2); height: 250px; padding: 0 10px;}
	main .pipe .ctnBox .itemBox figure.icon { margin-bottom: 0;}
	main .pipe .ctnBox .itemBox figure.icon svg{ width: 50px; }

	main .news .slideBox .swiper-slide .imgBox{ height: 300px;}
	main .news .optionBox{ flex-direction:column; }
	main .news .optionBox .pagiBox{ margin-bottom: 30px; width: 100%;  justify-content: space-between;}
	main .news .optionBox .pagiBox .arrowBox{ order:2; margin: 0 0 0 20px;}
	main .news .optionBox .pagiBox .arrowBox button{ width: 50px; height: 50px;}
	main .news .optionBox .pagiBox .arrowBox button:before{ width: 40px; height: 40px; }
	main .news .optionBox .pagiBox .arrowBox button:hover:before{ width: 50px; height: 50px;}

	main .join .titleBox{ margin-top: 0; }
	main .join .titleBox p{ font-size:60px; }

	/* sub */
	#sv .subVisual > div{ flex-direction: column; align-items: flex-start; }
	#sv .subVisual{ padding: 100px 0 40px !important;}
	#sv .subVisual #lnb{ order:0; margin-bottom: 15px; margin-left: 0; font-size:17px; }
	#sv .subVisual #lnb img{ width: 80%;}
	#sv .subVisual #lnb li:not(:first-child){ color:#555; font-weight: 400; }
	#sv .subVisual #lnb li:not(:first-child):before{ margin: 0 10px;}

	#subContents{ padding-bottom: 60px;}
	#titleBox{ margin-bottom: 0; order:2; }
	#titleBox .title{ line-height: 2; }
	#titleBox .txt{ margin: 0; }
	#titleBox .txt br{ display:none; }

	#pipeline .bg{ width: 300px; top: -200px;}
	#pipeline .ctnBox table tr td.progress ul li:not(:last-child):after{ right: -30px;}
	#pipeline .ctnBox table tr td span{ margin-right: 7px;}
	#pipeline .ctnBox table.on tr td.progress .line1{ width: 10%;}
	#pipeline .ctnBox table.on tr td.progress .line2{ width: 16%;}
	#pipeline .ctnBox table tr td a{ display:inline-flex; width: auto;}

	#overview .info{ margin-bottom: 50px;}
	#overview .info .imgBox{ padding: 60px 20px;}
	#overview .triple{ padding-top: 0;}
	#overview .triple .bg{ width: 100%; height: 500px; margin: -100px auto 0; position: relative; transform: none; left: auto; top: auto; }
	#overview .triple .bg .line{ display:none; }
	#overview .triple .bg svg{ height: 100%; }
	#overview .triple .txtBox{ margin-bottom: 0;}
	#overview .triple .ctnBox{ flex-wrap:wrap; margin-top: -60px; }
	#overview .triple .ctnBox .itemBox{ width: 100%; height: auto;}
	#overview .triple .ctnBox .itemBox:not(:nth-child(2)){ margin-top: 0;}

	#history section{ overflow: hidden;}
	#history section > .title{ margin-bottom: 0px;}
	#history section .ctnBox{ flex-direction:column; }
	#history section .ctnBox > *{ width: 100%; }
	#history section .ctnBox .txtBox{ margin: 0; order:1; margin-left: 4px;}
	#history section .ctnBox .txtBox .bar{ margin-right: 30px;}
	#history section .ctnBox .txtBox .yearBox .itemBox .year:before{ left: -35px;}
	#history section .ctnBox .imgBox{ order:0; position: relative; top: 0; left: 0; height: auto; margin-bottom: 30px; width: 100%; height: 200px; border-radius:20px; overflow: hidden;
	margin-right: 0; }
	#history section .ctnBox .imgBox img{ position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; min-width:100%; min-height:100%; object-fit:cover; }
	#history section .ctnBox .txtBox .yearBox .itemBox:not(:last-child){ margin-bottom: 40px;}

	#ceo .content .txtBox .title{ margin-bottom: 40px;}
	#ceo .content .txtBox .ctnBox dl:not(:last-child){ margin-bottom: 40px;}

	#team .ctnBox .itemBox{ width: 100%; flex-wrap:wrap; padding: 40px 20px;}
	#team .ctnBox .itemBox .dlBox dl, 
	#team .ctnBox .item1 .titleBox{ width: 100%; padding: 0; }
	#team .ctnBox .itemBox .dlBox{ flex-wrap:wrap; }
	#team .ctnBox .itemBox .dlBox dl{ width: 100%; }
	#team .ctnBox .itemBox .dlBox dl:not(:last-child){ margin-bottom: 30px;}
	#team .ctnBox .itemBox .titleBox{ padding-bottom: 20px; margin-bottom: 20px; border-bottom:1px solid #eee; border-right:none; }
	#team .ctnBox .itemBox .titleBox .title br{ display:none; }

	#collabo .intro{ height: auto; padding: 70px 20px;}
	#collabo .logo dl:not(:last-child){ margin-bottom: 80px;}
	#collabo .logo dl dd figure{ width: calc((100% - 20px) / 2); height: 100px; padding: 0 20px;}

	#plat .tabBox{ gap:10px; margin: -60px 0 140px;}
	#plat .tabBox li{ width: calc((100% - 20px) / 3);}
	#plat .tabBox li button{ padding: 0 10px; border-radius:5px; font-size:18px; }
	#plat .titleBox{ padding-top: 0;}
	#plat .titleBox .txt br{ display:none; }

	#plat .bic .ctnBox{ padding: 30px 20px;}
	#plat .anti .ctnBox .txtBox{ flex-wrap:wrap; padding: 20px; }
	#plat .anti .ctnBox .txtBox .red{ margin-top: 10px;}
	#plat .star .ctnBox{ gap:60px; }
	#plat .star .ctnBox dl{ width: 100%;}
	#plat .star .ctnBox dl dd.arrow{ transform:translateX(-50%) rotate(90deg); right: auto; left: 50%; bottom: -40px; top: auto;}
	#plat .star .ctnBox dl.item2 .arrow{ display:block; }
	#plat .star .ctnBox dl.item2 dd .txt{  margin-left: 50%;}
	#plat .anti .ctnBox .wrapBox{ flex-wrap:wrap;  }
	#plat .anti .ctnBox .wrapBox dl{ width: 100%;}
	#plat .anti .ctnBox .wrapBox dl dd .arrow{ margin: 0 20px; display: flex;  flex-direction: column; justify-content: center;}
	#plat .anti .ctnBox .wrapBox dl dd .img figure{ width: 70%; margin: 0 auto; }
	#plat .anti .ctnBox .wrapBox dl dd span{ width: 100%; }
	#plat .anti .ctnBox .wrapBox dl.item1 dd > div:last-child{ gap: 20px; }
	#plat .anti .ctnBox .wrapBox dl.item1 dd .arrow{ height: 200px;}
	#plat .anti .ctnBox .wrapBox dl.item2 dd .arrow{ height: 120px;}

	.mbs section{ padding: 60px 0;}
	.mbs section .txtBox{ margin-bottom: 40px; }
	.mbs section .imgBox dt{ min-height:60px; padding: 10px 30px; text-align: center; }
	.mbs section .imgBox dd{ padding: 30px 20px; flex-wrap:wrap; }
	.mbs section.info .imgBox > dd{ gap:30px; }
	.mbs section.tme .imgBox > dd dl,
	.mbs section .flexBox .imgBox{ width: 100%; }
	.mbs section.tme .imgBox > dd dl dd,
	.mbs section .flexBox .imgBox dd{ padding: 20px;}
	.mbs section .flexBox{ flex-wrap:wrap; }
	.mbs section .imgBox .arrow{ transform:rotate(90deg); margin-right: 0;}

	.notice_view #viewBtn{ margin-top: 60px;}

	#contact .content .mapBox{ margin-bottom: 40px;}
	#contact .content .mapBox iframe{ height: 400px;}
	#contact .content .txtBox h4.title{ margin-bottom: 20px;}
	#contact .content .ctnBox{ width: 100%; gap:20px; flex-wrap:wrap; }
	#contact .content .ctnBox .itemBox:first-child{ width: 100%; }
	#contact .content .ctnBox .itemBox{ width: calc((100% - 20px) / 2);}
	#contact .content:not(:last-child){ margin-bottom: 80px;}

	/* footer */
	.footer_in{ padding: 60px 0;}
	.footer_in .infoBox li{ display:flex; flex-direction: column; }
	.footer_in .bBox .linkBox li:not(:last-child){ margin-right: 20px;}
	.footer_in .bBox .copyBox{ padding-top: 20px; text-align: left;}
}

@media screen and (max-width:640px){
	/* common */
	.font100{ font-size:60px; }
	.font70{ font-size:35px; }
	.font60{ font-size:30px; }
	.font40{ font-size:25px; }
	.font25,.font24{ font-size:22px; }
	.font22{ font-size:20px; }
	.font20{ font-size:18px; }
}