@charset "utf-8";
/* CSS Document */
@media screen and (max-width: 1500px) {
	#sVisual.position-visual .visual-inner.position-rel {height: 500px;}
	#sub.service .tab-btn {padding: 0 20px; box-sizing: border-box; gap: 10px;}
	#sub.service .cont-area {padding: 0;}
	.section .section-row {gap: 60px;}
	#sub.greeting .history-box {gap: 60px !important;}
	#sub.greeting .cont-area .aboutLogo {left: -6px;}
}
@media screen and (max-width: 1370px){
	
	#footer .footer-info > ul > li {line-height: 15px;}
	#footer .footer-info.vir > ul > li span {font-size: 1rem; line-height: 16px;}
	#footer .footer-column.rightF {margin-top: 37px;}
	#footer .footer-util > ul > li span {font-size: 1rem; line-height: 16px;}
	#footer .link-btn li {line-height: 40px;}
	#footer .link-btn li a {padding: 0 10px;}
	#footer .link-btn li a p {font-size: 1.2rem;}

	.mVisual1::before {content: ''; clear: both; position: absolute; background: url('/img/mVisul1_logo_mo.svg') no-repeat center center; background-size: auto; width: 498px; height: 475px; bottom: 0px; right: 0px; z-index: 3;}
	.mVisual1 .visual-body ul li {flex-direction: column;}
	.mVisual1 .visual-body ul li p, .mVisual1 .visual-body ul li:hover p {font-size: 1.8rem; line-height: 29px; }
	.mVisual1 .visual-body ul li span {font-size: 1.2rem; line-height: 20px;}
	#sub.service .cont-box ul.box-wrap li {width: 24%; padding: 0 20px;}
}
@media screen and (max-width: 1200px){
     .size {width:100%; padding:0 20px; box-sizing: border-box;}

	 #sub.greeting .cont-area .parallax-wrapper-his1 {height: 700px;}
	 #sub.greeting .history-txt ul {gap: 20px !important;}
	 #sub.greeting .history-txt ul li {font-size: 1.6rem; line-height: 28px;}

	 #sub.greeting .cont-area .aboutLogo {left: -6px; width:176px; height:195px; bottom: -40px;}
	 #sub.greeting .section-column .cont-area.img1 {padding:  0 0 0 20px;}
	 #sub.greeting .cont-area .parallax-wrapper-his1 .parallax-bg-his1 {height: 140%;}
	 #sub.greeting .history-box {gap: 30px !important; max-height: 710px;}
}
@media screen and (max-width: 1024px){
	/*헤더*/
	#header {z-index: 10;}
	#header .header-column.menu {display: flex;}
	#header .header-body .header-inner {height: 80px; padding: 0 20px;}
	#header .logo img {width: 145px; height: 40px;}

	.mobile-inner {overflow-y: auto; background-attachment: fixed;}

	/*메인*/
	.mVisual1 .visual-tit-box {left: 60px; top: calc(50% - 160px);}
	.mVisual1 .visual-tit-box h3 {font-size: 5rem; line-height: 60px;}
	.mVisual1 .visual-tit-box p  {font-size: 2.4rem; line-height: 38px;}

	/*서브*/
	#sub .sub-wrap {padding: 90px 0;}
	#sVisual.position-visual .visual-txt {padding-top: 80px;}
	#sub.service .tab-btn {top: -30px;}
	#sub.service .tab-btn li a {padding: 0 10px;}
	#sub.service .tab-btn li {font-size: 1.4rem; line-height: 58px;}
	#sub .section .tit-box h3 {font-size: 3rem; line-height: 36px;}
	#sub.service .tit-wrap p.fir-title {line-height: 34px;}
	#sub.service .tit-wrap p.fir-title.con {margin: 15px 0;}
	#sub.service .tit-wrap {margin-bottom: 15px;}
	#sub.service .tit-wrap p.fir-title em {font-size: 2rem; line-height: 28px;}
	#sub.service .tit-wrap p, #sub.service .cont-box div:last-child p.dot-wrap {font-size: 1.6rem; line-height: 24px;}
	#sub.service .cont-box {padding: 20px;}
	#sub.service.con .cont-box {margin: 0 !important;}
	#sub.service p.mid-title {font-size: 1.8rem; line-height: 28px;}
	#sub.service .cont-box.botLi, #sub.service .cont-box.midLi {padding: 0 20px 20px 20px;}
	#sub.service .cont-box.botLi p.botLiP, #sub.service .cont-box.midLi p.botLiP {padding-top: 20px;}
	#sub.service .cont-box div:last-child p.ex-wrap {font-size: 1.6rem; line-height: 24px;}
	#sub.service .cont-area .cont-wrap ul {padding: 40px 0 !important;}

}
@media screen and (max-width: 960px){
	#footer .footer-body .footer-inner {padding: 60px 20px 0 20px;}
	#footer .footer-column h4 {margin-bottom: 10px;}
	#footer .footer-column {justify-content: center; width: 100%; margin-top: 20px;}
	#footer .footer-column.inner {margin-top: 0;}
	#footer .footer-column.rightF ul {text-align: center;}
	#footer .footer-column.rightF {margin-top: 20px;}

	#sub.service .cont-box > div, #sub.service .cont-box {overflow-x: auto;}	
	#sub.service .cont-box > div img, #sub.service .cont-box img{min-width: 890px;}
	#sub.service .cont-box > div::-webkit-scrollbar, #sub.service .cont-box::-webkit-scrollbar{height: 6px;}
    #sub.service .cont-box > div::-webkit-scrollbar-track, #sub.service .cont-box::-webkit-scrollbar-track {background: #f1f1f1; border-radius: 3px;}
    #sub.service .cont-box > div::-webkit-scrollbar-thumb, #sub.service .cont-box::-webkit-scrollbar-thumb {background: #888; border-radius: 3px;}
    #sub.service .cont-box > div::-webkit-scrollbar-thumb:hover, #sub.service .cont-box::-webkit-scrollbar-thumb:hover { background: #555; }
	#sub.service .cont-box ul.box-wrap li {width: 32%;}
	#sub.service .cont-box ul.box-wrap li span {font-size: 1.4rem; line-height: 22px;}
	#sub.service .cont-box ul.box-wrap li p {font-size: 1.5rem; line-height: 23px;}

	#sub.greeting .history-txt {padding-top: 0; height: 700px; display: flex; justify-content: center; flex-direction: column;}
	#sub.greeting .history-txt p {padding-top: 60px;}
	#sub.greeting .history-txt ul li {font-size: 1.4rem; line-height: 22px;}
}
@media screen and (max-width: 768px){
	i.longtxt_768 {display: block;}

	#sVisual.position-visual .visual-inner.position-rel {height: 500px;}
	.mVisual1 {background-position: calc(50% - 90px) center;}
	.mVisual1::before {right: -170px;}
	.mVisual1 .visual-body ul {display: grid; grid-template-columns: repeat(2, 1fr);}
	.mVisual1 .visual-body ul li {height: 120px; gap: 10px;}
	.mVisual1 .visual-body ul li img {width: 38px;}
	#mVisual .visual-body ul li:hover {height: 160px; margin-top: -10px;}
	.mVisual1 .visual-body ul li p, .mVisual1 .visual-body ul li:hover p {font-size: 1.4rem; line-height: 22px;}
	.mVisual1 .visual-tit-box {left: 20px; bottom: 92.5px;}
	.mVisual1 .visual-tit-box h3 {font-size: 3.2rem; line-height: 38px;}
	.mVisual1 .visual-tit-box p {font-size: 2rem; line-height: 32px;}

	#sub .sub-wrap {padding: 60px 0;} 
	#sub .section .tit-box h3 {font-size: 2.6rem; line-height: 31px; margin-bottom: 15px;}
	#sub .section .tit-box p {font-size: 1.6rem; line-height: 22px;}
	#sVisual .visual-txt .txt-wrap .nav-box {display: none;}
	#sVisual .visual-txt .txt-wrap .txt-box h2 {font-size: 5rem; line-height: 60px;}
	#sub.service .visual-txt .txt-body {padding: 0 20px 60px 20px;}

	.nice-select {position: absolute; top: -55px; left: 50%; transform: translateX(-50%); width: 100.5%; height: 55px; line-height: 55px; border-radius: 0; border:none; z-index: 10; background: #FFFFFFCC; backdrop-filter: blur(15px); font-size: 1.4rem; font-weight: 700; color: #111; letter-spacing: -0.42px; padding: 0 20px;}
	.nice-select:active, .nice-select.open, .nice-select:focus {border: none;}
	.nice-select:after {border-bottom: 2px solid #0a090b; border-right: 2px solid #0a090b; width: 8px; height: 8px; margin-top: 0; transform: translateY(-50%) rotate(45deg); right: 33px;}
	.nice-select.open:after {transform: translateY(-50%) rotate(-135deg);}
	.nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus, .nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus {background-color: transparent;}
	.nice-select .option a {display: block; width: 100%; height: 100%;}
	.nice-select.open .list {width: 100%; margin: 0; }
	.nice-select.open .list > div {background: #FFFFFFCC; backdrop-filter: blur(15px); }
	.nice-select .option {line-height: 55px; min-height: 55px; padding: 0 20px;} 

	#sub.service .cont-area .cont-wrap ul {padding: 20px 0 !important;}
	#sub.service .blackBox {font-size: 1.6rem; padding: 10px 30px; box-sizing: border-box; line-height: 26px; margin: 20px 0 !important;}
}

@media screen and (max-width: 640px){
	#sub.service .cont-box ul.box-wrap li {width: 48%;}

	#sub.greeting .section-column .cont-area.img1 {padding: 0;}
	#sub.greeting .history-txt {justify-content: flex-start;}
	#sub.greeting .history-txt p {padding-top: 30px; font-size: 1.5rem;}
	#sub.greeting .history-txt p em {font-size: 2.8rem;}
	#sub.greeting .cont-area .aboutLogo {left: -6px; width: 126px; height: 139px; top: 410px; }
	#sub.greeting .history-box {gap: 70px !important; flex-direction: column; max-height: 100%;}
	#sub.greeting .cont-area .parallax-wrapper-his1 {min-height: 500px; max-width: 100%;}


}
@media screen and (max-width: 480px){
	#footer .link-btn li {line-height: 35px;}
	#footer .link-btn li a {padding: 0 7px;}
	#sub.service .cont-box ul.box-wrap li {width: 100%;}
	#sub.greeting .cont-area .parallax-wrapper-his1 {min-height: 430px;}
	#sub.greeting .history-box {gap: 40px !important;}
	#sub.greeting .cont-area .aboutLogo {left: -6px; width: 106px; height: 116px; top: 340px; }

}
@media screen and (max-width: 320px){

}