@charset "utf-8";

@media (max-width: 1400px) {
/* main */	
	.main .main-visual .tbx h3{font-size: 55px; line-height: 1.5;}
	.main .main-visual .tbx p{font-size: 20px; line-height: 1.5;}
}

@media (max-width: 1024px) {

	.header-wrap,
	#header{height: 80px;}
	#gnb {display:none;}
	#header .hd-langs{margin-left: auto;}

/* main */
	.main .main-visual .tbx h3{font-size: clamp(28px, 5.2vw, 55px); line-height: 1.5;}
	.main .main-visual .tbx p{font-size: 16px; line-height: 1.5;}
	.main .main-visual .scroll {width: 80px;	height: 80px; bottom: 20px; margin-left: -40px;}
	.main .main-visual .scroll:before{background-size: 100%;}

	.mcnt1{padding-top: 80px;}
	.main-tit h4{font-size: clamp(28px, 5.8vw, 62px); line-height: 1.5; margin-bottom: 10px;}
	.main-tit p{font-size: 18px;}
	.mcnt1 .flex{margin-top: 50px;}
	.mcnt1 .flex > *{height: auto;}
	.mcnt1 .flex > * > a{padding: 50px 20px; }
	.mcnt1 .flex > * > a .tbx p{font-size: 22px;}
	.mcnt1 .flex > * > a .over p{font-size: 22px;}
	.mcnt2{padding-top: 80px; flex-direction: column; gap:50px}
	.mcnt2 .lbx{width: 100%;}
	.mcnt2 .lbx .btn-box{margin-top: 30px;}
	.mcnt2 .rbx{width: 100%;}
	.mcnt3{padding-top: 80px; flex-direction: column; gap:50px}
	.mcnt3 .lbx{width: 100%; padding-left: 0;}
	.mcnt3 .lbx .link-box{margin-top: 30px;}
	.mcnt3 .rbx{width: 100%;}
	.mcnt4{padding-top: 80px;}
	.mcnt4 ul{flex-wrap:wrap; gap:10px}
	.mcnt4 ul > li{flex:1 1 40%; height: 280px;}
	.mcnt5{margin-top: 80px;}

/* footer */
	.scroll-top{width: 55px; height: 55px; right: 30px; bottom: 50px;}

/* sub */
	.sub-visual{height: 400px;}
	.sub-visual > p{font-size: clamp(28px, 5.8vw, 62px); line-height: 1.5; padding-top: 40px;}
	.lnb{margin-top: -60px; margin-bottom: 80px;}
	.lnb > ul > li > a{height: 60px; font-size: 16px; text-align: center; line-height: 1.5;}
	.sub-tit h3{font-size: clamp(28px, 5.8vw, 62px);}
	.sub-tit p{font-size: 16px; line-height: 1.5;}
	.dep3-wrap {margin-top: 40px; margin-bottom: 40px;}
	.dep3-wrap > ul > li > a{height: 50px; font-size: 16px;}

/* s1 */
	.s1-block1 > .box{flex:100%; padding: 30px 20px; height: auto; padding-bottom: 100px; padding-right: 20px;} 			
	.s1-block1 > .box .tbx b{font-size: 22px; line-height: 1.5;}
	.s1-block1 > .box .tbx p{font-size: 16px; line-height: 1.5; word-break: keep-all;}
	.s1-block1 > .box .tbx p br{display: none;}
	.s1-block1 > .box i{right: 20px; bottom: 20px;}
	.s11 .arti2 {padding: 80px 0 80px; margin-top: 80px;		}
	.s11 .arti2 .wrap2{flex-direction: column; gap:40px}
	.s11 .arti2 .wrap2 > .lbx figure{height: auto; padding: 30px 20px;}
	.s11 .arti2 .wrap2 > .rbx small{font-size: 16px; line-height: 1.5;}
	.s11 .arti2 .wrap2 > .rbx h4{font-size: 30px;;}
	.s11 .arti2 .wrap2 > .rbx ul > li span{width: 105px; font-size: 16px; text-align: center;}
	.s11 .arti2 .wrap2 > .rbx ul > li p{font-size: 16px; line-height: 1.5;}
	.s11 .arti3 {padding: 80px 0 80px; background-size: 100%;}
	.s1-block2 iframe{height: 300px;}
	.s12 .arti1{margin-top: 50px;}
	.s1-block1 > .last{height: auto; padding: 30px;} 
	.product-arti1 {margin-top: 50px; gap:40px}
	.product-arti1 .flex{flex-direction: column; gap:40px}
	.product-arti1 .flex > .lbx{width: 100%; padding-left: 0;}
	.product-arti1 .flex > *{flex:100%; width: 100%;}
	.product-arti1 .flex > .lbx .tbx small{font-size: 16px; padding-bottom: 20px; margin-bottom: 30px;}
	.product-arti1 .flex > .lbx .tbx b{font-size: 30px; line-height: 1.5;}
	.product-arti1 .flex > .rbx figure{height: auto; padding: 30px 20px;}
	.product-arti1 .flex:nth-child(even) > .lbx{padding-left: 0;}
	.product-arti2 {padding: 80px 0 80px; margin-top: 80px;}
	.product-arti2 ul{gap:20px 2%; }
	.product-arti2 ul > li{flex:none; width: 49%;}
	.product-arti2 ul > li > a figure{text-align: center;}
	.product-arti2 ul > li > a .tbx{padding: 0 15px;}
	.product-arti1 .flex > .lbx .tbx p{font-size: 16px; line-height: 1.5; word-break: keep-all;}
	.product-arti1 .flex > .lbx .tbx p br{display: none;}
	.s2,
	.s31{margin-bottom: 80px;}
	.s31 .arti1{margin-top: 40px;}
	.s31 .arti2{flex-direction: column-reverse; gap:20px}
	.s31 .arti2 ul > li{font-size: 16px; line-height: 1.5;}
	.bo-wrap{margin-top: 40px; margin-bottom: 80px;}
	.s41 .arti1{margin-top: 40px;}
	.s41 .arti1 b{font-size: 22px; line-height: 1.5;}
	.s41 .arti1 .p-box{gap:1em}
	.s41 .arti1 .p-box p{font-size: 16px; line-height: 1.5;}
	.s41 .arti1 .sign{margin-top: 30px;}
	.s41 .arti2{margin-top: 50px; height: 300px;}
	.s42 .arti1{margin-top: 40px;}
	.s42 .arti1 .lbx{position: static; width: 100%; text-align: left; padding-right: 0; padding-bottom: 50px;}
	.s42 .arti1 .lbx .tbx small{font-size: 18px; line-height: 1.5;}
	.s42 .arti1 .lbx .tbx big{font-size: 40px; line-height: 1.5; margin-bottom: 15px;}
	.s42 .arti1 .rbx{width: 100%; margin-left: 0; margin-top: 0; padding-left: 30px;}
	.s42 .arti1 .rbx .box{padding-bottom: 50px;}
	.s42 .arti1 .rbx .box b{font-size: 28px; margin-bottom: 20px;}
	.s42 .arti1 .rbx .box b:after{left: -38px; top: 6px;}
	.s42 .arti1 .rbx .box ul > li{font-size: 16px; line-height: 1.5;}
	.s42 .arti1 .rbx:before {top: 11px; height: calc(100% - 11px);top: 11px;}
	.s42 .arti1 .rbx .box:last-child{padding-bottom: 80px;}
	

}

@media (max-width: 640px) {
/* main */
	.mcnt1 .flex{flex-direction: column; flex-direction: column;}
	.mcnt1 .flex > *{width: 100%;}
	.mcnt1 .flex > *:first-child{border-right: none; border-bottom: 1px solid #eaeaea;}
	.mcnt1 .flex > * > a .over span{width: 140px; font-size: 16px; gap:15px; height: 50px;} 
	.mcnt2 .lbx .btn-box > *{width: 45px; height: 45px;}
	.mcnt3 .lbx .link-box > a{width: 140px; font-size: 16px; gap:15px; height: 50px;}
	.mcnt4 ul > li{height: 220px;}
	.mcnt4 .front{padding-top: 15px;}
	.mcnt4 .front i{width: 55px; height: 55px; padding: 5px; box-sizing: border-box;}
	.mcnt4 .front p{font-size: 20px; line-height: 1.5; margin-top: 10px;}
	.mcnt4 .back p{font-size: 20px; line-height: 1.5;}
	.mcnt4 .back span{font-size: 16px; line-height: 1.5;}
	.mcnt5{height: 300px;}
	.mcnt5 .wrap2{flex-direction: column; align-items: flex-start;    justify-content: center; gap:30px}
	.mcnt5 .wrap2 .rbx .link-box > a{width: 140px; font-size: 16px; gap:15px; height: 50px;}
	
	.s1-block1 > .box .tbx{padding-right: 0;}
	.s31 .arti2 ul > li span{width: 90px;}
/* footer */
	.footer-wrap{height: auto; padding-bottom: 30px;}
	#footer .ft-top{height: auto; padding: 30px 0; flex-direction: column; gap:20px; align-items: flex-start;}
	#footer .ft-bottom ul > li span{display: block;}
	#footer .ft-bottom ul > li span:not(:last-child):after{display: none;}
}

@media (max-width: 480px) {
	#header .sitelogo{width: 140px;}
	

/* footer */
	#footer .ft-bottom{padding-top: 20px;}



}