@media screen and (max-width:1720px){
	/* common */
	.w1720{ padding: 0 20px;}
}

@media screen and (max-width:1600px){
	/* common */
	.font120{ font-size:80px; }
	.font94{ font-size:70px; }
	.font78{ font-size:60px; }
	.font76{ font-size:58px; }
	.font54{ font-size:42px; }
	.font48{ font-size:39px; }
	
	/* header */
	header{ padding: 0 20px;}

	/* main */
	#intro-box .logo{ mask-size: 65%;}

	main .visual .slide-nav{ right: 20px;}

	main .about{ padding: 150px 20px 80px;}
	main .about .ctn-box .title-box .txt{ margin-top: 50px;}

	main .menu{ padding-top: 100px;}
	main .menu .bg-box .item-box .title{ font-size: 30px; padding: 0 10px; }

	/* sub */
	.subVisual .scroll{ right: 20px;}

	#company .strategy .ctn-box .item-box{ padding: 40px 30px;}
}

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

@media screen and (max-width: 1350px){
	/* sub */
	.subVisual .txt-box .txt br{ display:none; }
}

@media screen and (max-width:1200px){
	/* common */
	.font120{ font-size:60px; }
	.font94{ font-size:53px; }
	.font78{ font-size:45px; }
	.font76{ font-size:43px; }
	.font54{ font-size:36px; }
	.font48{ font-size:33px; }
	.font42{ font-size:30px; }
	.font36,.font32{ font-size:26px; }
	.font28{ font-size:25px; }

	/* main */
	main .about .ctn-box .title-box{ margin-bottom: 150px; }
	main .about .ctn-box .num-box{ flex-wrap:wrap; gap:50px; }
	main .about .ctn-box .num-box .item-box{ width: calc((100% - 50px) / 2);}
	main .about .ctn-box .num-box .item-box:not(:last-child){ margin-right: 0; }

	main .menu .bg-box .item-box .title{ font-size:25px; }

	/* sub */
	.subVisual .txt-box{ margin-bottom: 80px;}

	#subContents{ padding: 120px 0 150px;}
	#subContents section:not(:last-child){ margin-bottom: 120px;}

	h4.title{ margin-bottom: 60px;}

	#tab-box{ margin-bottom: 60px;}

	#company .strategy .ctn-box{ gap:20px; }
	#company .strategy .ctn-box .item-box{ width: calc((100% - 40px) / 3); min-height:250px; }
	#company .strategy .ctn-box .item-box .title{ min-height:60px; margin: 10px 0 20px;}
	#company .strategy .ctn-box .item-box .line{ margin-bottom: 30px;}
	#company .history .title-box{ top: 100px; }
	#company .history .slide-box{ padding-top: 250px;}

	#team section:not(:last-child){ margin-bottom: 100px; }
	#team .ctn-box{ gap:40px 20px; }
	#team .ctn-box .item-box{ width: calc((100% - 40px) / 3);}

	#portfolio .ctn-box{ gap:30px; }
	#portfolio .ctn-box .item-box{ position: relative; width: calc((100% - 60px) / 3); }

	#code .w1720 > div:not(:last-child){ margin-bottom: 60px; }
	#code .ctn-box dl dd{ padding: 40px;}
	#code .ctn-box dl dt button{ flex-shrink: 0; margin-left: 20px; }

	#esg .ctn-box{ padding-top: 100px; margin-bottom: 120px;}
	#esg .table-box div ul{ padding: 30px; }
	#esg .table-box div ul li{ text-indent:-10px; padding-left: 10px; }

	#contact .txt-box .inner{ padding: 40px; }
	#contact .txt-box h4.title{ margin-bottom: 60px;}
}

@media screen and (max-width:1024px){
	/* main */
	main section{ height: auto;}
	main .visual{ height: 100vh; }

	main .about{ padding: 100px 20px; }
	main .about .ctn-box .title-box{ flex-wrap:wrap; }
	main .about .ctn-box .title-box .title{ margin-right: 0; width: 100%; }
	main .about .ctn-box .title-box .txt{ margin-top: 30px;}
	main .about .ctn-box .title-box .txt br{ display:none; }

	main .menu .bg-box{ flex-wrap:wrap; }
	main .menu .bg-box .item-box{ width: 100%; height: 150px; clip-path: inset(0 100% 0 0);}
	main .menu .bg-box .item-box:not(:last-child){ margin-right: 0; margin-bottom: 5px;}
	main .menu .bg-box .item-box .title{ margin-top: 55px; transition:all 0.7s; }
	main .menu .bg-box .item-box:hover .bg{ clip-path: inset(0 100% 0 0); }
	main .menu .bg-box .item-box:hover .title{ margin-top: 0; }

	/* sub */
	.subVisual .bg{ height: 600px;}
	.subVisual .txt-box{ margin-bottom: 60px;}

	#subContents{ padding: 80px 0 100px;}

	h4.title{ margin-bottom: 40px;}

	#tab-box li:not(:last-child):after{ margin: 0 20px;}

	#company .strategy .ctn-box{ flex-wrap:wrap; }
	#company .strategy .ctn-box .item-box{ width: 100%; transform:none; padding: 30px 20px;}
	#company .strategy .ctn-box .item-box:nth-child(2){ margin-top: 0; }
	#company .strategy .ctn-box .item-box .title{ min-height:auto; }
	#company .history{ min-height:auto; padding: 100px 0;}
	#company .history h4.title{ margin-bottom: 60px;}
	#company .history .title-box,
	#company .history .slide-nav{ position: relative; top: auto; bottom: auto; transform:none; left: auto;}
	#company .history .slide-box{ padding: 0; padding-left: 30px;}
	#company .history .slide-box .swiper-slide{ max-width:auto; width: 50%;}
	#company .history .slide-box .swiper-slide:first-child:before,
	#company .history .slide-box .swiper-slide:after{ top: 100px;}
	#company .history .slide-box .swiper-slide ul{ padding: 0 60px 0 0; word-break:break-all}
	#company .history .slide-box .swiper-slide ul li br{ display:none; }
	#company .history .slide-nav{ margin-top: 40px;}

	#team .ctn-box{ gap:40px 20px; }
	#team .ctn-box .item-box{ width: calc((100% - 20px) / 2);}

	#portfolio .ctn-box .item-box{ width: calc((100% - 30px) / 2); }

	#contact > div{ flex-wrap:wrap; }
	#contact .map-box{ width: 100%; height: 400px; }
	#contact .txt-box{ width: 100%; }
	#contact .txt-box .inner{ clip-path: inset(0 0 100% 0); }
}

@media screen and (max-width:768px){
	/* common */
	.font120{ font-size:50px; }
	.font94{ font-size:45px; }
	.font78,.font76{ font-size:38px; }
	.font54{ font-size:30px; }
	.font48{ font-size:29px; }
	.font42{ font-size:28px; }
	.font36,.font32{ font-size:26px; }
	.font28{ font-size:24px; }
	.font23{ font-size:21px; }
	.font22{ font-size:20px; }
	.font21{ font-size:19px; }
	.font20{ font-size:18px; }

	/* header */
	header{ height: 60px; }
	header .header-box .logo{ width: 200px; }
	#allmenu .allgnb{ width: 100%; padding: 80px 20px;}
	#allmenu .allgnb .close{ right: 20px;}
	#allmenu .allgnb #gnb > li:not(:last-child){ margin-bottom: 40px;}
	#allmenu .allgnb #gnb .depth2{ margin-top: 20px; }
	#allmenu .allgnb #gnb .depth2 li:not(:last-child){ margin-bottom: 20px;}

	#popup{ width: 90%; }

	/* main */
	#intro-box .logo img{ transform: translateY(50%); transition: all 1.5s 0.2s;}
	main.intro #intro-box .logo img{ transform: scale(8) translateY(0%);}

	#intro-box.off .bg{ width: 200%;}

	main .about{ padding: 80px 20px 60px;}
	main .about .ctn-box .title-box{ margin-bottom: 100px;}
	main .about .ctn-box .num-box .item-box:nth-child(2n){ transform: translateY(-30px);}

	main .menu{ padding-top: 80px; }
	main .menu .bg-box{ background: url(/img/main/menuBg-m.png) no-repeat 50% 50%; background-size:cover; }
	main .menu .bg-box .item-box:not(:last-child){ margin-bottom: 0; border-bottom: 5px solid #000; margin-top: -2px;}
	main .menu .bg-box .item-box .bg{ position: relative; position:absolute;	background: transparent; height: 110%; }
	main .menu .bg-box .item-box .title{ margin-top: 0; }
	main .menu .bg-box .item-box .view{ opacity: 1; margin-top: 10px; }
	main .menu .bg-box .item-box .view svg{ margin-left: 20px; margin-top: 3px;}
	main .menu .bg-box .item-box .bg:after{ content:''; display:block; width: 100%; height: 100%;  position: absolute; top: 0; left: 100%; background: #000; transition:all 0.7s; pointer-events:none; }
	main .menu .bg-box .item-box:hover .bg{ opacity: 0.5; background: #000;}

	/* sub */
	.subVisual .bg{ height: 450px;}
	.subVisual .scroll{ bottom: 20px;}
	.subVisual .txt-box{ margin-bottom: 30px;}
	.subVisual .txt-box .txt{ margin-top: 20px;}

	#company .history{ padding: 80px 0;}
	#company .history .slide-box .swiper-slide{ width: 100%;}
	#company .history .slide-box .swiper-slide:first-child:before,
	#company .history .slide-box .swiper-slide:after{ top: 70px;}
	#company .history .slide-box .swiper-slide .year:after{ margin: 20px 0;}
	#company .history .slide-box .swiper-slide ul li:not(:last-child){ margin-bottom: 10px;}

	#team section:not(:last-child){ margin-bottom: 80px; }
	#team .ctn-box .item-box{ width: 100%; height: 530px; }
	#team .ctn-box .pop-box{ width: 90%; padding: 40px 20px;}
	#team .ctn-box .pop-box .close{ top: 20px; right: 20px;}

	#portfolio .ctn-box .item-box{ width: 100%; }
	#portfolio .ctn-box .item-box .txt-box a{ position: relative; pointer-events:none; }
	#portfolio .ctn-box .item-box .txt-box a:after{ content:''; display:block; width: 20px; height: 20px; background: url(/img/sub/arrowLink.png) no-repeat 50% 50%; 
	position: absolute; top: 30px; right: 30px;}
	#portfolio .ctn-box .item-box .txt-box.on a{ pointer-events:auto; }

	#code .ctn-box dl{ padding: 25px 0;}
	#code .ctn-box dl dt{ align-items:center; }
	#code .ctn-box dl dt p{ flex-wrap: wrap; }
	#code .ctn-box dl dt p span{ width: 35px; height: 35px; margin: 0 0 10px; }
	#code .ctn-box dl dt button{ width: 20px; height: 20px;}
	#code .ctn-box dl dd{ padding: 25px; margin-top: 20px;}
	#code .txt-box .title{ margin-bottom: 30px; }

	#esg .ctn-box{ padding-top: 80px; margin-bottom: 100px;}
	#esg .ctn-box dt{ margin-bottom: 60px;}
	#esg .ctn-box dd{ flex-wrap:wrap; }          
	#esg .ctn-box dd figure{ position: relative; width: 100%; height: 300px; overflow: hidden;}
	#esg .ctn-box dd figure:not(:last-child){ margin-right: 0; margin-bottom: 30px;}
	#esg .ctn-box dd figure img{ position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; min-width:100%; min-height:100%; object-fit:cover; }
	#esg .table-box div{ width: 100%; }
	#esg .table-box div p,
	#esg .table-box div ul{ padding: 20px; }

	#contact .map-box{ height: 300px; }
	#contact .txt-box .inner{ padding: 30px 20px; }
	#contact .txt-box h4.title{ margin-bottom: 40px; }
	 
	/* footer */
	.footer-inner{ padding: 60px 20px;}
	.footer-inner .name{ font-size:25px; margin-bottom: 20px; font-family: var(--lora); color:#fff; }
	.footer-inner ul { flex-wrap:wrap; }
	.footer-inner ul li{ width: 100%; flex-direction: column;}
	.footer-inner ul li:not(:last-child){ margin-right: 0; margin-bottom: 20px;}
	.footer-inner ul li img{ margin-bottom: 10px;}
}
@media screen and (max-width:480px){

}