@charset "utf-8";

@media (max-width: 1400px) {
/* header */
	#header #gnb > ul > li > a{width: 160px;}

/*	 main */
	.main-tit h3{font-size: 55px; line-height: 1.2;}
	.mcnt2 .mcnt-cnt{padding-left: calc(345px + 20px);}
	.mcnt2 .mcnt-cnt ul{gap:100px 20px}
	.mcnt2 .mcnt-cnt ul > li{width: 28vw;}
	.mcnt2 .mcnt-cnt ul > li .tbx p{font-size: 16px; line-height: 1.5; word-break: keep-all;}
	.mcnt2 .mcnt-cnt ul > li .tbx p br{display: none;}
	
}

@media (max-width: 1024px) {
/* header */
	#header{height: 80px;}
	#gnb {display:none;}

/* main */
	main .main-visual,
	main .main-visual .mv_owl .item .mv_img{height: 90vw;}
	main .main-visual .mv_owl .m_txt h3{font-size: clamp(32px, 6.4vw, 70px); line-height: 1.2;}
	main .main-visual .mv_owl .m_txt p{font-size: 16px; line-height: 1.5;}
	.main-tit h3{font-size: clamp(26px, 4.3vw, 55px); line-height: 1.2; word-break: keep-all; margin-bottom: 15px;}	
	.main-tit h3 br{display: none;}
	.main-tit p{word-break: keep-all; font-size: 16px; line-height: 1.5;}
	.main-tit p br{display: none;}
	.mcnt2{padding-top: 12vw;}
	.mcnt2 .main-tit{position: relative; left: 0; top: 0; }
	.mcnt2 .mcnt-cnt{padding-left: 0; margin-top: 30px;}
	.mcnt2 .mcnt-cnt ul{gap:100px 2%}
	.mcnt2 .mcnt-cnt ul > li{width: 49%;}
	.mcnt2 .mcnt-cnt ul > li .tbx h5{font-size: 22px;}
	.mcnt3{height: auto; flex-direction: column; padding: 12vw 20px;} 
	.mcnt3 .main-tit{width: 100%; padding-bottom: 30px;}
	.mcnt3 .link-box{margin-top: 30px;}
	.mcnt3 .main-news-cnt{width: 100%; padding-left: 0; margin-left: 0; padding-right: 0;}
	.mcnt3 .owl-carousel .owl-stage-outer{padding: 0;}
	.mcnt5{height: auto; padding: 12vw 20px; margin-bottom: 0px;}
	.mcnt5 .tbx h3{font-size: clamp(26px, 4.3vw, 55px); line-height: 1.2;}
	.mcnt5 .tbx p{font-size: 16px;}
	.mcnt5 .tbx .link-box > a{gap:15px}

/* footer */
	.footer-wrap{height: auto; padding: 30px 0;}
	#footer{flex-direction: column;}
	#footer .ft-logo{width: 100%;}
	#footer .ft-cnt{flex: none; width: 100%;}
	.ft-scroll-top{right: 20px; bottom: auto; top: 30px; width: 40px; height: 40px;}
	
}

@media (max-width: 640px) {
/* main */
	.mcnt2-wrap{padding-bottom: 0;}
	.mcnt2 .mcnt-cnt ul{gap:50px 2%}
	.mcnt2 .mcnt-cnt ul > li:nth-child(2n+2){top: 80px;}
	.link-box > a{width: 120px; height: 50px; font-size: 16px; gap:0 10px}
	.mcnt3 .item > a{padding: 20px;}
	.mcnt3 .item > a .tit h4{font-size: 18px; line-height: 1.5;}
	.mcnt3 .item > a .txt > p{font-size: 16px; line-height: 1.5;}
	.mcnt3 .item > a .txt .info{height: 30px;}
	.mcnt3 .item > a .txt .info span{font-size: 14px;}
	.mcnt4{margin-bottom: 30px;}
	.mcnt4 .simply-scroll{height: 150px !Important;}
	.mcnt4 .simply-scroll-clip{height: 150px !Important;}
	.mcnt4 .simply-scroll-clip ul > li{width: 200px !important; height: 150px !important;}

}

@media (max-width: 480px) {
	#header .sitelogo > a img{width: 200px;}
	/* main */
		main .main-visual,
		main .main-visual .mv_owl .item .mv_img{height: 120vw;}
		.mv-scroll{padding-bottom: 40px;}
		.mv-scroll span{font-size: 12px; }
		.mv-scroll .sc-bar{height: 30px;}
		.mcnt2-wrap{background-position: cover;}
		.mcnt2 .mcnt-cnt ul{gap:50px 2%}
		.mcnt2 .mcnt-cnt ul > li{width: 100%;}
		.mcnt2 .mcnt-cnt ul > li:nth-child(2n+2){top: 0px;}

/* footer */	
	#footer .ft-logo img{width: 200px;}
	#footer .ft-cnt .ft-top ul > li{font-size: 14px; line-height: 1.5;}
	#footer .ft-cnt .ft-bottom > p{font-size: 14px; line-height: 1.5;}
}

/* sub */
@media (max-width: 1450px) {
/* s13 */
	.s13 .arti1{height: auto; padding: 20px 0; } 
	.s13 .arti1 .box dl{gap:0 30px; align-items:center;}
	.s13 .arti1 .box dt{font-size: 18px;}
	.s13 .arti1 .box dd{gap:0 30px}
	.s13 .arti1 .box dd ul > li{font-size: 16px; line-height: 1.5;}
	.s13 .arti1 .box:last-child{padding-left: 30px;}
/* s21 */
	.product-top-wrap{gap:30px; padding: 30px 0;} 
	.product-top-wrap .box .flex-box{gap:60px}
	.product-top-wrap .box .flex-box .cnt:first-child figure:after{width: 60px; right: -70px;}
	.product-top-wrap .box:last-child .flex-box{gap:60px;}
	.product-top-wrap .box:last-child .flex-box .cnt:first-child figure:after{width: 60px; right: -90px;}

/* s25 */
	.s25 .arti2 ul > li:not(:last-child) figure:after{right: -7vw; width: 7vw;}
	.s25 .arti3 .col3 > li{padding: 190px 20px 20px; }
	.s25 .arti3 .col3 > li > .tbx p{font-size: 16px; line-height: 1.5;}
	.s25 .arti5 .box{gap:20px}


}

@media (max-width: 1100px) {
/* s12 */
	.s12 ul > li{width: calc(33% - 11px);}

}

@media (max-width: 1024px) {
/* common */
	.sub-visual{height: 70vw;}	
	.sub-visual > .tbx{padding-bottom: 75px;}
	.sub-visual > .tbx big{font-size: clamp(30px, 9.8vw, 110px); line-height: 1}
	.sub-visual > .tbx .spread > ul > li{font-size: 16px;}
	.lnb-wrap{top: -30px; margin-bottom: 40px;}
	.lnb-wrap .lnb > ul{padding: 5px;}
	.lnb-wrap .lnb > ul > li > a{font-size: 16px; height: 50px;}
	.sub-tit{font-size: clamp(26px, 4.6vw, 52px); line-height: 1; margin-bottom: 30px;}

/* s11 */
	.s11 .arti1 b{font-size: 22px; line-height: 1.5;}
	.s11 .arti1 p{font-size: 16px; line-height: 1.5; margin-bottom: 1em; word-break: keep-all;}
	.s11 .arti1 p br{display: none;}
	.s11 .arti2{margin-top: 30px;} 

/* s12 */
	.s12 h5{font-size: 22px; line-height: 1.5; margin-bottom: 20px;} 
	.s12 article:not(:last-child){margin-bottom: 50px;}
	.s12 ul{gap:10px}
	.s12 ul > li{width: calc(50% - 10px);}
	.s12 ul > li figcaption{font-size: 16px; line-height: 1.5; word-break: keep-all;}

/* s13 */
	.s13 .arti1{flex-direction: column;}
	.s13 .arti1 .box{width: 100% !important; padding: 10px 0;}
	.s13 .arti1 .box:last-child{padding-left: 0;}
	.s13 .arti1 .box:last-child:before{display: none;}
	.s13 .arti2{margin-top: 50px;}
	.s13 .arti2 figure{height: 200px;}
	.s13 .arti2 figure figcaption{font-size: 34px; line-height: 1.5;}
	.s13 .history{padding: 50px 0;}
	.s13 .history dl dt{font-size: 28px; width: 90px; line-height: 1.5;}
	.s13 .history dl dd{padding: 0; padding-left: 20px; position: relative; top: 10px;}
	.s13 .history dl dd ul > li{font-size: 16px; line-height: 1.5;	}
	.s13 .history:before{left: 90px;}

/* s14 */
	.s14 .root_daum_roughmap .wrap_map{height: 60vw !important;}
	.s14 .arti2 ul > li{font-size: 16px; line-height: 1.5; margin-bottom: 5px;}
	.s14 .arti2 ul > li span{width: 60px;}
	.s14 .arti2 ul > li p{width: calc(100% - 60px);}
	.s14 .arti2 ol > li > a{width: 120px; font-size: 16px; height: 50px;}

/* s21 */
	.product-top-wrap .box h4{font-size: 22px;}

/* s23 */
	.product-top-wrap3 ul{flex-direction: column; gap:60px 0}
	.product-top-wrap3 ul > li:not(:last-child):after{width: 100%; height: 60px; top: auto; right: auto; bottom: -60px; left: 0;}

/* s25 */
	.s25 .arti1{height: auto; padding: 12vw 0;}
	.s25 .arti1 .tbx h4{font-size: 22px; line-height: 1.5;}
	.s25 .arti1 .tbx p{font-size: 16px; line-height: 1.5; word-break: keep-all;}
	.s25 .arti1 .tbx p br{display: none;}
	.s25 .arti2 ul{flex-wrap:wrap; gap:30px; flex-direction: row;     justify-content: center;}
	.s25 .arti2 ul > li:not(:last-child) figure:after{width: 30px; right: -30px;}
	.s25 .wrap2 > article{margin-top: 50px;}	
	.s25 h5{font-size: 22px; line-height: 1.5;}
	.s25 .arti3 .dot-ul{margin: 10px 0 30px;}
	.s25 .arti3 .col3{flex-direction: column;}
	.s25 .arti3 .col3 > li{height: auto; padding: 50px 20px 40px;}
	.s25 .arti3 .col3 > li > .tbx p i{top: 2px;}
	.s25 .arti4 .table-wrap{margin-top: 20px;}
	.s25 .table-wrap table tr > *{font-size: 16px; height: 55px; line-height: 1.5;}
	.s25 .arti5 .box{flex-direction: column; height: auto; padding: 40px 20px; margin-top: 20px;}
	.s25 .arti5 .box figure img{max-width:100%; }
	.s25 .arti5 .box .tbx{width: 100%; height: auto; padding: 20px;}
	.s25 .arti5 .box .tbx ul > li{font-size: 16px; line-height: 1.5; display: block;}
	.s25 .arti5 .box .tbx ul > li p{flex:1; display: inline;}
	.s25 .arti6 .box{margin-top: 20px;}
	.s25 .arti6 .box ul{gap:20px 0;}
	.s25 .arti6 .box ul > li{flex: 1 1 33.33%}
	.s25 .arti6 .box ul > li figure{height: 80px;}
	.s25 .arti6 .box ul > li .tbx p{font-size: 16px; line-height: 1.5;}
	.s25 .arti6 .box ul > li:after{height: 100px;}
	.s25 .arti7 ul{margin-top: 20px; gap:20px} 	
	.s25 .arti7 ul > li{flex: none; width: calc(50% - 10px);} 
	.s25 .arti8 ul{margin-top: 20px;}
	.s25 .arti8 ul > li{width: calc(50% - 10px);}

}



@media (max-width: 640px) {
/* common */
	.sub-visual{height: 90vw;}
	.sub-visual > .tbx{flex-direction: column; justify-content: end; gap:20px}
	.lnb-wrap .lnb > ul > li > a{font-size: 14px;;}

/* s11 */
	.s11 .arti2{height: 50vw;}
	.s11 .arti2 img{width: 100%; height: 100%; object-fit:cover;}

/* s13 */
	.s13 .arti1{padding: 0;}
	.s13 .arti1 .box:first-child{border-bottom: 1px solid #ddd;}
	.s13 .arti1 .box dd{flex-direction: column;}
	.s13 .arti1 .box dd ul > li{font-size: 14px; line-height: 1.5;}

/* s21 */
	.product-top-wrap .box{padding: 20px; height: auto;}
	.product-top-wrap .box .flex-box .cnt figure{width: 25vw; height: 25vw;}
	.product-top-wrap .box .flex-box .cnt:first-child figure:after{height: 25vw;}
	.product-top-wrap .box .flex-box .cnt .tbx p{font-size: 16px; line-height: 1.5;}
	.product-top-wrap .box:last-child .cnt{width: auto;}
	.product-top-wrap .box:last-child .flex-box .cnt:first-child figure:after{right: -21vw;}
	.product-top-wrap .box .flex-box .cnt{width: 50%;}
	.product-top-wrap .box .flex-box .cnt .tbx p{word-break: keep-all;}
	.product-top-wrap .box .flex-box{gap:25px}
	.product-top-wrap .box .flex-box .cnt .tbx p br{display: none;}
	.product-top-wrap .box .flex-box .cnt:first-child figure:after{right: -19vw;}
	
	#aniimated-thumbnials{margin-top: 50px;}
	#aniimated-thumbnials > a {width: calc((100% / 2) - 10px);}
	.lg-actions .lg-next, .lg-actions .lg-prev{width: 40px; height: 40px;}
	.more-gall{width: 120px; height: 50px; font-size: 16px; gap:10px}
	
	.product-top-wrap3 ul > li figure{width: 25vw; height: 25vw;}
	.product-top-wrap3 ul > li figure img{border-radius: 50%;}
	.product-top-wrap3 ul > li .tbx p{font-size: 16px; line-height: 1.5; word-break: keep-all;}

}  

@media (max-width: 480px) {
	.lnb-wrap.wrap2{padding: 0;}
/* s21 */
	.lnb-wrap .lnb > ul > li{flex: 1 1 33.33%}
	.lnb-wrap .lnb > ul > li:nth-child(3) > a:after{display: none !important;}

/*	 s25 */
	.s25 .arti2 ul > li{width: calc(50% - 30px);}
	.s25 .arti2 ul > li figure{width: 25vw; height: 25vw; margin: 0 auto;}
	.s25 .arti2 ul > li:not(:last-child) figure:after{height: 25vw;}
	.s25 .arti2 ul > li .tbx p{font-size: 16px; line-height: 1.5;}
	.s25 .arti6 .box{height: auto; background-size: cover; padding: 20px 0px;}
	.s25 .arti6 .box ul > li{flex:100%; padding: 20px 0;}
	.s25 .arti6 .box ul > li:after{width: 150px; height: 1px; right: auto; top: auto; left: 50%; bottom: 0; margin-left: -75px;}
	.s25 .arti6 .box ul > li:last-child:after{display: none;}
	


	
}