@charset "utf-8";

@media (max-width: 1800px) {
		.mcnt2{gap:3vw}
		.mcnt2 .rbx{margin-right: 0;}

}

@media (max-width: 1400px){
#header #gnb {padding-right: 0;}
#header #gnb > ul {gap: 50px;}

}

@media (max-width: 1200px){
	#header #gnb > ul > li > a {font-size: 18px;}
}

@media (max-width: 1024px) {
	#gnb {display:none;}
	#header{height: 80px;}
	#main #fp-nav ul{display: none; }
	.main-con{margin-top: 0; left: auto; right: 20px; bottom: 20px; top: auto; flex-direction: row; gap:10px}
	.main .main-visual {height: auto; min-height:0px !important; }
	.main .main-visual .mv{height: 100dvh;}
	.main .main-visual .mv-txt h3{font-size: clamp(24px, 5.8vw, 65px); line-height: 1.5; word-break: keep-all;}
	.main .main-visual .mv-txt p{font-size: 16px; line-height: 1.5; word-break: keep-all;}
	#main .link-box > a{font-size: 16px; }
	.main-tit small{font-size: 16px; line-height: 1;}
	.main-tit h4{font-size: clamp(24px, 4.8vw, 55px); line-height: 1.5; margin: 10px 0;}
	.main-tit p{font-size: 16px; line-height: 1.5;}	
	.mcnt2{flex-direction: column;}
	.mcnt2 .lbx{width: 100%;}
	.mcnt2 .lbx .mcnt2-tab{display: flex; flex-wrap:wrap;}
	.mcnt2 .lbx .mcnt2-tab > li{flex:33.33%; text-align: center; padding-left: 0 !important; font-size: 16px; height: 40px;}
	.mcnt2 .lbx .mcnt2-tab > li:after {display: none;}
	.mcnt2 .rbx{margin-top: 0;}
	.mcnt2 .rbx ul > li .tbx{height: 100px;}
	.mcnt2 .rbx ul > li .tbx b{font-size: 18px; line-height: 1.5;}
	.mcnt2 .rbx ul > li .tbx p{font-size: 16px; line-height: 1.5;}
	.mcnt3_wrap .main-tit h4{font-size: clamp(24px, 4.8vw, 50px); line-height: 1.5; margin: 10px 0;}
	.mcnt3_owl{margin-top: 30px;}
	.mcnt3_owl .item .tbx{height: 200px; padding: 20px 15px;}
	.mcnt3_owl .item .tbx > b{font-size: 18px; line-height: 1.5;}
	.mcnt3_owl .item .tbx > .box{font-size: 16px; line-height: 1.5;}
	.mcnt3_owl .item .tbx > span{font-size: 14px; line-height: 1;}
	.mcnt3_owl .owl-nav > *{width: 50px; height: 50px;}
	.mcnt4_wrap{padding: 0; height: 100dvh;}
	.mcnt4_wrap .main-tit h4{font-size: clamp(24px, 4.8vw, 50px); line-height: 1.5; margin: 10px 0;}
	.mcnt4_wrap .main-tit p{margin-bottom: 20px;}
	.mcnt4_wrap .main-tit h4{width: 100%;}
	.mcnt4_wrap .link a {width: 150px; line-height: 50px; font-size: 16px;}
	.mcnt3_owl .owl-nav{top: -100px;}


	.main-pop{width: 95%; 	height: auto; }
	#viewpopup{ overflow: hidden; height: 60vw; display: block; line-height: 0; border: 1px solid rgba(255,255,255,0.1);}
	.main-pop iframe{ width: 100%; height: 60vw; border: none; border-radius: 10px; overflow: hidden; }
	.main-pop .mp-close{right: 0; top: -48px;}
	
}

@media (max-width: 640px) {
	.main .main-visual .mv-scroll{width: 40px;}
}

@media (max-width: 480px) {
	#header .sitelogo{width: 150px;}
	.main-tit p{margin-bottom: 15px;}
	.mcnt2{max-width:100%; overflow: hidden; }
	.mcnt2 .lbx .mcnt2-tab{margin-top: 20px;}
	.mcnt2 .rbx{ width: 100%; overflow-x: auto;  }
	.mcnt2 .rbx ul{gap:10px; width: max-content; flex-wrap:wrap;}
	.mcnt2 .rbx ul > li{flex:none; width: 160px;}
	.mcnt2 .lbx .mcnt2-tab > li {flex: 100%;}
	.mcnt3_wrap .main-tit h4 br {display: none;}
	.mcnt4_wrap .main-tit h4 {font-size: 22px;}
	.mcnt4_wrap .main-tit h4 br {display: none;}

/* 	.mcnt2 .rbx ul > li:last-child{display: none;} */
	#footer .ft-logo{width: 150px;}

	.mcnt2{padding-top: 50px;}

}

/* sub */
@media (max-width: 1600px){
	.s14 .arti3 {padding: 90px 50px 100px;}
}

@media (max-width: 1500px) {
	.s11 .arti2 > .rbx{padding-left: 220px;}
	.s11 .arti2 > .rbx .tbx{padding-right: 20px;}
	.s11 .arti2 > .rbx .tbx small{font-size: 16px;}
	.s11 .arti2 > .rbx .tbx h5{font-size: 40px; line-height: 1.5; margin: 10px 0 15px;}
	.s11 .arti2 > .rbx .tbx p{font-size: 18px; line-height: 1.5; margin-bottom: 1em; word-break: keep-all;}
	.s11 .arti2 > .rbx .tbx p br{display: none;}
	
	.s14 .arti3 {padding: 90px 20px 100px;}
	.s14 .arti3 .contact .info {flex-wrap: wrap; gap: 10px 40px;}
}

@media (max-width: 1200px) {
/* s12 */
	.s12 .arti3 .box.on .img-box .tbx{padding-left: 50px;}
	.s12 .arti3 .box .img-box .tbx figcaption{width: 100%; margin-left: 0; translate:0 0; text-align: center;}
	.s12 .arti3 .box.on .img-box .tbx figcaption{text-align: left;}
}

@media (max-width: 1024px) {
/* sub-common */
	.sub-visual{height: 80vw; margin-bottom: 50px;}
	.sub-visual > .sv-tbx{padding-bottom: 110px;}
	.sub-visual > .sv-tbx small{font-size: 14px;}
	.sub-visual > .sv-tbx h2{margin: 10px 0 20px;}
	.sub-visual > .sv-tbx h2.sv-logo{max-width:35vw	; }
	.sub-visual > .sv-tbx .sv-txt{font-size: 16px; line-height: 1.5; word-break: keep-all;}
	.sub-visual > .sv-tbx .sv-txt br{display: none;}
	.sub-visual > .sv-tbx h2.sv-tit{font-size: clamp(24px, 5.2vw, 65px); margin: 10px 0 20px; line-height: 1.5;}
	.sub-visual .sv-scroll{width: 50px; }

	.footer-wrap{height: auto; padding: 30px 0;}
	#footer .ft-logo{width: 100%; margin-bottom: 20px;}
/* s11 */
	.s11{margin-bottom: 12vw;}
	.s11 .arti1{height: 300px;}
	.s11 .arti1 > .tbx{padding: 15px 15px;}
	.s11 .arti1 > .tbx strong{font-size: clamp(24px, 4.8vw, 50px); line-height: 1.5; margin: 5px 0 10px;}
	.s11 .arti1 > .tbx p{font-size: 16px; line-height: 1.5;}
	.s11 .arti2{margin-top: 50px;}
	.s11 .arti2 > *{width: 100%;}
	.s11 .arti2 > * img{width: 100%;}
	.s11 .arti2 > .rbx{width: 100%; margin-top: 0; margin-left: 0; padding-left: 0; height: auto; margin-top: 50px; padding: 20px;}
	.s11 .arti2 > .rbx .tbx h5{font-size: clamp(24px, 4.8vw, 40px);  }
	.s11 .arti2 > .rbx .tbx p{font-size: 16px; line-height: 1.5;}
	.s11 .arti2 > .rbx .tbx{padding-right: 0;}

	.s11 .arti2-re > .rbx{margin-right: 0;}

/* s12 */
	.s12{padding-bottom: 12vw;}
	.s12 .arti1{margin-top: -50px; height: auto;     flex-direction: column; padding: 50px 0;}
	.s12 .arti1 > *{width: 100%;}
	.s12 .arti1 > .lbx{padding: 0;}
	.s12 .arti1 .rbx{width: 100%; flex:1;     flex-direction: column; margin-top: 50px; }
	.s12 .arti1 .rbx .roll1{    flex-direction: row;}
	.s12 .arti1 .rbx .roll1 .figbox1 ul{flex-direction: row; gap:20px; width:max-content;}
	.s12 .arti1 .rbx .roll1 .figbox1 ul > li{width: 49%;}
	.s12 .arti1 .rbx .roll1 .figbox1.original {animation: rollingleft1 100s linear infinite;}
	.s12 .arti1 .rbx .roll1 .figbox1.clone {animation: rollingleft2 100s linear infinite;}
	.s12 .arti1 .rbx .roll2{    flex-direction: row; display: none;}
	.s12 .arti1 .rbx .roll2 .figbox2 ul{flex-direction: row; gap:20px; width:max-content; display: none;}
	.s12 .arti1 .rbx .roll2 .figbox2 ul > li{width: 49%;}
	.s12 .arti1 .rbx .roll2 .figbox2.original {animation: rollingleft3 100s linear infinite;}
	.s12 .arti1 .rbx .roll2 .figbox2.clone {animation: rollingleft4 100s linear infinite;}
	@keyframes rollingleft1 {0% { transform: translateX(0); }50% { transform: translateX(calc(-100% + 60px)); }50.01% { transform: translateX(calc(100% + 60px)); }100% { transform: translateX(0); }}
	@keyframes rollingleft2 {0% { transition: translateX(0); }100% { transform: translateX(calc(-200% + 60px)); }}
	.s12 .arti2{margin-top: 0px; }
	.s12 .arti2 .img-box{height: 300px;}
	.s12 .arti2 .img-box .tbx{padding: 0 10px;}
	.s12 .arti2 .img-box .tbx b{font-size: clamp(24px, 4.8vw, 50px);}
	.s12 .arti2 .img-box .tbx p{font-size: 16px; line-height: 1.5;}
	.s12 .arti3{height: auto; flex-direction: column; margin-top: 50px;}
	.s12 .arti3 .box.on .img-box .tbx{padding: 20px 15px;}
	.s12 .arti3 .box.on .img-box .tbx figcaption{font-size: clamp(24px, 4.8vw, 50px); padding-bottom: 10px;}
	.s12 .arti3 .box .img-box .tbx figcaption{font-size: 18px;}
	.s12 .arti3 .box .img-box .tbx p{font-size: 16px; line-height: 1.5; word-break: keep-all;}
	.s12 .arti3 .box .img-box .tbx p br{display: none;}	
	.s12 .arti1 > .lbx small{font-size: 16px;}
	.s12 .arti1 > .lbx h3{font-size: clamp(24px, 4.8vw, 50px); line-height: 1.5; margin: 10px 0 10px;}
	.s12 .arti1 > .lbx p{font-size: 16px; line-height: 1.5;}

/* s13 */
	.s13{margin-bottom: 12vw;}
	.s13 h3{font-size: clamp(24px, 4.8vw, 50px); line-height: 1.5;}
	.s13 .arti1 .img-box{height: 250px; margin-top:	50px;}
	.s13 .arti1 .img-box p{font-size: clamp(24px, 4.8vw, 50px); line-height: 1.5;}
	.s13 .arti1 .history{padding-left: 0;}
	.s13 .arti1 .history dl:first-child{padding-top: 50px;}
	.s13 .arti1 .history dl dt{font-size: 28px; width: 90px;}
	.s13 .arti1 .history dl dd {padding: 15px 0 15px; padding-left: 30px; }
	.s13 .arti1 .history dl dd:before{margin-left: -30px;}
	.s13 .arti1 .history dl dd ul > li{font-size: 16px; line-height: 1.5;}
	.s13 .arti1 .history dl dd ul > li span{width: 40px;}
	.s13 .arti1 .history dl dd ul > li .tbx{flex:1;}
	.s13 .arti2{margin-top: 50px;}
	.s13 .arti2 .tab-13{gap:10px}
	.s13 .arti2 .tab-13 > li{height: 40px; font-size: 16px;/*  width: 110px; */}
	.s13 .arti2 .Certification_ul{gap:20px; margin-top: 30px;}
	.s13 .arti2 .Certification_ul > li {width: calc((100% / 3) - (20px / 1.5));}
	.s13 .arti2 .Certification_ul > li .tbx{font-size: 16px; height: 60px;;}
	.s13 .arti2 .Certification_ul > li .on-box{padding: 10px; box-sizing: border-box; }
	.s13 .arti2 .Certification_ul > li .on-box strong{font-size: 18px; }
	.s13 .arti2 .Certification_ul > li .on-box p{font-size: 16px; line-height: 1.5;}
	
	/* s14 */
	.s14 .arti3 h5 {font-size: 35px;}
	.s14 .arti3 p {font-size: 20px;}
	.s14 .arti3 .contact dl dd {font-size: 18px;}

/* s2 */
	.s2_intro .sec1 .tbx small{font-size: 16px;}
	.s2_intro .sec1 .tbx h2{font-size: clamp(28px, 5.4vw, 65px); line-height: 1.5; margin: 10px 0 10px;}
	.s2_intro .sec1 .tbx p{font-size: 16px; line-height: 1.5;}
	.s2_intro .sec-box .tbx small{font-size: 18px;}
	.s2_intro .sec-box .tbx strong{font-size: clamp(28px, 5.4vw, 60px); line-height: 1.5; margin: 10px 0 10px;}
	.s2_intro .sec-box .tbx p{font-size: 16px; line-height: 1.5;}
	.s2_intro .sec-box .tbx .link-box{margin-top: 20px;}
	.s2_intro .sec-box .tbx .link-box > a{width: 150px; height: 50px; font-size: 16px;}

/* s41 */
	.s41{margin-bottom: 12vw;}
	.s41 .arti1 .root_daum_roughmap .wrap_map{height: 50vw !Important;}
	.s41 .arti2{margin-top: 40px; flex-direction: column;}
	.s41 .arti2 ul > li{font-size: 16px; line-height: 1.5;}
	.s41 .arti2 ul > li span{width: 60px;}
	.s41 .arti2 ol{margin-top: 20px;}
	.s41 .arti2 ol > li > a{width: 120px; font-size: 16px; height: 50px;}
}

@media (max-width: 640px) {
/* s13 */
	.s13 .arti2 .Certification_ul > li{width: calc((100% / 2) - (10px));}
	
	/* s14 */
	.s14 .arti3 {padding: 60px 15px; margin-top: 60px;}
	.s14 .arti3 h5 {font-size: 26px;}
	.s14 .arti3 p {font-size: 18px;}
	.s14 .arti3 .contact {padding: 25px;}
	.s14 .arti3 .contact dl {align-items: flex-start;}
	.s14 .arti3 .contact dl dt {padding-top: 3px;}
	.s14 .arti3 .contact dl dd {font-size: 16px;}
	.s14 .arti3 .contact .info {margin-top: 20px; padding-top: 20px;}
	
/* s2 */
	.s2_intro .sec-box .lbx{width: 100%; height: 50%; clip-path:none;/* polygon(0% 0, 106% 0, 100% 74%, 0% 88%); */} 
	.s2_intro .sec-box .rbx{width: 100%; height: 50%; clip-path:none;} 
	.s2_intro .sec2 .rbx:before{}
	.s2_intro .sec2 .rbx:before{background-size: 90%;}
	.s2_intro .sec3 .lbx:before{background-size: cover;}
	.s2_intro .sec4 .rbx:before{background-size: 90%;}
	.s2_intro .sec5 .lbx:before{background-size: 90%;}
	.s2_intro .sec6 .rbx:before{background-size: 90%;}
}


@media (max-width: 480px) {
	.sub-visual{height: 100vw; margin-bottom: 50px; }
	.sub-visual > .sv-tbx{padding-bottom: 100px; padding-top: 50px;}

/* s12 */
	.s12 .arti1 > .lbx:before{width: 100%; height: 100%; background-size: 50%; left: 0; bottom: 0; background-position: right bottom;}
	
	/* s11 */
	.s11 .arti1 {height: 330px;}
	.s11 .arti1 > .tbx strong {font-size: 22px;}
	.s11 .arti1 > .tbx p br {display: none;}
	.s11 .arti2 > .rbx .tbx h5 br {display: none;}
	
	.s12 .arti1 > .lbx p br {display: none;}
	.s12 .arti3 .box .img-box {height: 240px;}
	
	.s13 .arti2 .tab-13 {margin-top: 40px;}
	
	.s2_intro .sec-box .tbx p {padding: 0 15px;}
}