@charset "utf-8"; /* layout.css는 전체적인 레이아웃 스타일을 정의합니다. */

#skipToContent a { z-index:100000; position:absolute; top:0; left:0; width:1px; height:1px; font-size:0; line-height:0; overflow:hidden } 
#skipToContent a:focus, 
#skipToContent a:active { width:200px; height:50px; background:#21272e; color:#fff; font-size:14px; font-weight:bold; text-align:center; text-decoration:none; line-height:50px } 

.only-desktop-tablet { display:block; } 
.only-desktop { display:block; } 
.only-tablet { display:none; } 
.only-mobile { display:none; } 


#wrapper { overflow:hidden; } 

/* header */
#header { position: fixed; top: 0; left: 0; width: 100%; background: transparent; z-index: 100; } 
#header .contain { max-width: 100% !important; height: var(--header-height); display: flex; z-index: 2; justify-content: space-between; align-items: center; justify-content: space-between; } 

.sitelogo a { display: block; width: 261px; height: 55px; background: url("/images/common/logo.png") no-repeat center/contain; overflow: hidden; font-size: 0; line-height: 0; text-indent: -9999em; } 

#gnb { text-align: center; flex: 1 1 auto; min-width: 0; width: 1%; padding-right:var(--header-height); } 
#gnb > ul { display: flex; align-items: center; justify-content: end; } 
#gnb > ul > li { position: relative; } 
#gnb>ul>li>a { position: relative; display: flex; align-items: center; flex-direction: column; justify-content: center; height: var(--header-height); padding: 0 var(--space-50); color: #fff; font-size: var(--font-size-20); font-weight: 600; line-height: 1.5em; } 
#gnb .submenu { position: absolute; z-index: 50; left: 0; width: 100%; height: 0; overflow: hidden; } 
#gnb .submenu ul { padding: 20px 0; } 
#gnb .submenu ul li { padding: 7px; } 
#gnb .submenu ul li a { display: block; font-size: var(--font-size-16); line-height: 1.3em; color: #454545; } 
#gnb .submenu ul li a:hover { font-weight:500; color: var(--color-primary); text-decoration: underline; } 

.submenu-bg { display: none; position: absolute; left: 0; width: 100%; background:#fff; border-top: 1px solid #ddd; } 

#header.header-white { background: #fff; } 
#header.header-white .sitelogo a { background-image: url("/images/common/logo-on.png") !important; } 
#header.header-white #gnb>ul>li>a { color: #242424 !important; } 
#header.header-white #gnb>ul>li.active>a { color: var(--color-primary) !important; text-decoration: underline !important; } 
#header.header-white .btn-menu { background-image: url(/images/common/ham-on.png) !important; } 
#header.header-white .btn-m-menu { background-image: url(/images/common/ham-on.png) !important; } 

.header-fixed #header { background: #fff; } 
.header-fixed #header .sitelogo a { background-image: url("/images/common/logo-on.png") !important; } 
.header-fixed #header #gnb>ul>li>a { color: #242424 !important; } 
.header-fixed #header #gnb>ul>li.active>a { color: var(--color-primary) !important; text-decoration: underline !important; } 
.header-fixed #header .btn-menu { background-image: url(/images/common/ham-on.png) !important; } 
.header-fixed #header .btn-m-menu { background-image: url(/images/common/ham-on.png) !important; } 

/* for mobile */
.only-mobile { display:none; } 
.btn-menu { position:absolute; top:50%; right:var(--container-space); transform: translateY(-50%); width: 24px; height: 26px; text-indent: -9999em; z-index: 99; transition: all 0.5s ease-in-out; background: url(/images/common/ham.png) no-repeat center/contain; } 
.btn-m-menu { display:none; position:absolute; top:50%; right:var(--container-space); transform: translateY(-50%); width: 28px; height: 26px; text-indent: -9999em; z-index: 99; transition: all 0.5s ease-in-out; background: url(/images/common/ham.png) no-repeat center/contain; } 
.mobile-navigation { position:fixed; top:0; right:0; padding:20px 0; width:400px; height:100%; overflow:auto; transition:.3s ease-in-out; -ms-transform:translateX(100%); transform:translateX(100%); background:#fff; z-index:202; } 
.mobile-navigation .home { display:block; margin-bottom:20px; padding-left:15px; } 
.mobile-navigation .home a { display:block; } 
.mobile-navigation .home img { height:30px; } 
.mobile-navigation .nav-menu>ul { margin-top:30px; } 
.mobile-navigation .nav-menu>ul>li { border-bottom:1px solid #dfdfdf; } 
.mobile-navigation .nav-menu>ul>li>a { position:relative; padding:12px 15px; display:block; color:#454545; font-size:18px; font-weight:500; line-height:1.3em; } 
.mobile-navigation .nav-menu>ul>li a:after { content:""; position:absolute; top:50%; right:15px; transform:translateY(-75%) rotate(45deg); width:10px; height:10px; border-right:2px solid #2c2c2c; border-bottom:2px solid #2c2c2c; } 
.mobile-navigation .nav-menu>ul>li.active>a { color:var(--color-primary) } 
.mobile-navigation .nav-menu>ul>li.active>a:after { transform:translateY(-35%) rotate(-135deg); border-color:var(--color-primary); } 
.mobile-navigation .nav-menu .submenu { display:none; margin:-1px 0 0 0; padding:0 15px 15px; } 
.mobile-navigation .nav-menu .submenu>ul:after { content:""; display:block; clear:both; } 
.mobile-navigation .nav-menu .submenu>ul>li>a { display:block; position:relative; padding:5px 15px; color:#454545; font-size:16px; font-weight:400; line-height:1.3em; } 
.mobile-navigation .nav-menu .submenu>ul>li>a:after { display:block; content:""; position:absolute; top:14px; left:5px; width:4px; height:4px; background:#dfdfdf; border-radius:50%; transition:.3s ease-in-out; } 
.mobile-navigation .nav-menu .submenu>ul>li>a:hover { color:var(--color-primary) } 
.mobile-navigation .nav-menu .submenu>ul>li>a:hover:after { background:var(--color-primary) } 
.mobile-navigation .close { position:absolute; top:20px; right:15px; width:24px; height:24px; text-indent:-9999em; overflow:hidden; } 
.mobile-navigation .close:before,
.mobile-navigation .close:after { content:" "; position:absolute; top:12px; left:0; width:100%; height:2px; background:#2c2c2c; } 
.mobile-navigation .close:before { transform:rotate(45deg); } 
.mobile-navigation .close:after { transform:rotate(-45deg); } 

.mobile-overlay { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.6; z-index:201; } 

html.menu-opened { overflow:hidden; } 
html.menu-opened .mobile-navigation { -ms-transform:translateX(0); transform:translateX(0); } 
html.menu-opened .mobile-overlay { display:block; } 

/* main */
[data-aos=fade-up] { transform: translate3d(0,100px,0); } 
.main-visual { position:relative; height:100vh; overflow:hidden; } 
.main-visual .slick-slide { position:relative; height:100vh; overflow:hidden; } 
.main-visual .item { position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden; } 
.main-visual .item img { position:absolute; top:50%; left:0; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); width:100%; height:auto !important; max-width:100%; min-height:100%; object-fit:cover; } 
.main-visual .slick-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: clamp(40px, calc( 70 / var(--inner) * 100vw ), 70px ); height: clamp(40px, calc( 70 / var(--inner) * 100vw ), 70px ); background: url("/images/main/slide_btn.svg") 50% 50% no-repeat; border: 1px solid rgba(255,255,255,.3); border-radius: 100%; overflow: hidden; text-indent: -9999em; line-height: 0; font-size: 0; z-index: 50; transition: .3s; } 
.main-visual .slick-arrow { display:none; } 
.main-visual .slick-arrow:hover { background-color: var(--color-primary); border-color: var(--color-primary); } 
.main-visual .slick-prev { left: var(--container-space); } 
.main-visual .slick-next { right: var(--container-space); transform:translateY(-50%) rotate(180deg); } 
.main-visual .scroll { position:absolute; bottom:var(--space-40); left:50%; margin-left:-30px; width:51px; height:48px; background:url("/images/main/scroll.png") no-repeat center/contain; animation:1.5s scrollUpDown linear infinite; z-index:50; } 
@keyframes scrollUpDown { 0%,100% { transform:translateY(0); } 
50% { transform:translateY(10px); } 
 }

.main-visual.only-tablet-mobile  { display:none; }  

.section { padding: var(--space-150) 0; } 
.section .head { padding-bottom: var(--space-60); text-align: center; } 
.sec-tit { font-size: var(--font-size-50); font-weight: 700; color: #242424; line-height: 1.2em; } 
.section .head > p { color: #686868; font-size: var(--font-size-17); padding-top: 10px; line-height: 1.3em; } 
.section .head > p.t2 { font-size: var(--font-size-20); line-height:1.5em; padding-top:0; color: #454545; } 

.section .head.type2 { text-align:right; } 
.section .head.type2 .sec-tit { position:relative; padding-bottom:clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px ); margin-bottom:clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px ); } 
.section .head.type2 .sec-tit::after { content: ""; position: absolute; bottom:0; right:0; width:clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px ); height:3px; background-color: var(--color-primary); } 

.btn-link { display:flex; justify-content: center; align-items: center; width:180px; height:55px; margin-top:var(--space-60); background-color: var(--color-primary); color: #fff; font-weight:500; font-size: var(--font-size-17); border-radius: 50vh; animation: horizontal-shaking 1s infinite;} 

.banner  .btn-link { animation: none;}

@keyframes horizontal-shaking {
  0% { transform: translateX(0) }
  25% { transform: translateX(5px) }
  50% { transform: translateX(-5px) }
  75% { transform: translateX(5px) }
  100% { transform: translateX(0) }
}

.btn-link.center { margin: var(--space-60) auto 0; } 

/* sec1 */
.cnt-wrap { display:flex; justify-content: space-between; align-items: center; } 

.img-list { display:flex; gap: var(--space-30); } 
.sec1 .img-list li {text-align: center;}

/* sec2 */
.sec2 { background: url(/images/main/bg-equipment.jpg) no-repeat center / cover; } 
.img-wrap { display:flex; gap: var(--space-30); justify-content: center; align-items: center; } 
.img-wrap .img {position: relative; width:44%; cursor:pointer; } 
.img-wrap .img img:first-child {position: absolute;opacity: 0;transition:.3s;}
.img-wrap .img:hover img {opacity:1;}
.img-wrap .img-list { width:57%; display:grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-30); } 
.img-wrap .img-list .img {width:100%; }

.sec3 .tab-wrap { display:flex; } 
.sec3 .tab-menu ul li a { display:flex; justify-content: center; align-items: center; flex-direction: column; width:200px; height:200px; border-top-left-radius: var(--border-radius-30-16); border-bottom-left-radius: var(--border-radius-30-16); border: 1px solid #ddd; } 
.sec3 .tab-menu ul li a span { margin-bottom:var(--space-20); font-weight:700; font-size: var(--font-size-18); color: var(--color-primary); opacity:.6; line-height:1em; } 
.sec3 .tab-menu ul li a strong { font-size: var(--font-size-50); color: #242424; line-height:1em; opacity:.2; } 
.sec3 .tab-menu ul li.active a { background-color: var(--color-primary); border: 1px solid var(--color-primary); } 
.sec3 .tab-menu ul li.active a span { color: #fff; opacity:1; } 
.sec3 .tab-menu ul li.active a strong { color: #fff; opacity:1; } 
.sec3 .tab-contents { position:relative; width: 100%; padding:var(--space-80); box-shadow: var(--box-shadow); border-top-right-radius: var(--border-radius-30-16); border-bottom-right-radius: var(--border-radius-30-16); } 
.sec3 .tab-contents h3 { color: #242424; font-size: var(--font-size-40); line-height:1.3em; margin-bottom:var(--space-30); } 
.sec3 .tab-contents p { font-size: var(--font-size-20); line-height:1.5em; } 
.sec3 .tab-content .bg { position: absolute; background-repeat: no-repeat; background-size: contain; background-position: bottom right; z-index:-1; } 
.sec3 .tab-content .bg.bg1 { right:var(--space-80); bottom:0; width:597px; height:380px; background-image: url(/images/main/ace-01.png); } 
.sec3 .tab-content .bg.bg2 { right:var(--space-70); bottom:var(--space-60); width:515px; height:391px; background-image: url(/images/main/ace-02.png); } 
.sec3 .tab-content .bg.bg3 { right:var(--space-70); bottom:var(--space-60); width:494px; height:394px; background-image: url(/images/main/ace-03.png); } 

.sec4 .icon-list { display: flex; justify-content: center; align-items: center; gap: var(--space-30); } 
.sec4 .icon-list li::marker { display:none !important; } 
.sec4 .icon-list .box { display:flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; width:clamp(80px, calc( 208 / var(--inner) * 100vw ), 208px ); height:clamp(80px, calc( 208 / var(--inner) * 100vw ), 208px ); border-radius: var(--border-radius-20-10); background-color: #eaf7fc; } 
.sec4 .icon-list li:nth-child(2) .box { background-color: #f1f7ff; } 
.sec4 .icon-list li:nth-child(3) .box { background-color: #eaf7fc; } 
.sec4 .icon-list li:nth-child(4) .box { background-color: #fff1fd; } 
.sec4 .icon-list li:nth-child(5) .box { background-color: #f0f8ec; } 
.sec4 .icon-list li:nth-child(6) .box { background-color: #fff9e4; } 
.sec4 .icon-list .box .icon { margin: 0 auto clamp(10px, calc( 30 / var(--inner) * 100vw ), 30px ); } 
.sec4 .icon-list .box .tx { font-weight:600; font-size: var(--font-size-18); color: #242424; } 

.sec4 .img-list li { cursor:pointer; transition: .5s; } 
.sec4 .img-list li:hover img { transform: scale(1.1); } 

.banner { position:relative; background-color: #f1f7ff; border-radius: var(--border-radius-20-10); padding:clamp(20px, calc( 100 / var(--inner) * 100vw ), 100px ); } 
.banner::after { content: ""; position: absolute; right:var(--space-20); bottom:var(--space-20); width:504px; height:356px; background: url(/images/main/company.png) no-repeat bottom right/contain; } 

.sec5 .history-list { display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-30); text-align:center; } 
.sec5 .history-list li { display:flex; flex-direction: column; align-items: center; justify-content: center; border-radius: var(--border-radius-20-10); background-color: #f9fafc; padding:clamp(30px, calc( 100 / var(--inner) * 100vw ), 100px ); } 
.sec5 .history-list p { margin-top:var(--space-20); font-size: var(--font-size-26); color: #242424; } 
.sec5 .history-list .num { font-weight:700; font-size: var(--font-size-60); line-height:1em; } 
.sec5 .history-list .num strong { color: var(--color-primary); } 

.sec6 { background-color: #f1f7ff; } 
.sec6 .ex-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-30); padding-top:var(--space-60); } 
.sec6 .ex-list .box { display:flex; flex-direction: column; position:relative; min-height: 495px; padding-left:var(--space-40); padding-top:var(--space-120); background: #fff; border-radius: var(--border-radius-20-10); } 
.sec6 .ex-list .box::before { content: ""; position: absolute; top:-75px; left:50%; transform: translateX(-50%); width:153px; height:153px; background: url(/images/main/ex-01.png) no-repeat center/contain; } 
.sec6 .ex-list .box:nth-child(2)::before { background-image: url(/images/main/ex-02.png); } 
.sec6 .ex-list .box:nth-child(3)::before { background-image: url(/images/main/ex-03.png); } 
.sec6 .ex-list .box h3 { margin-bottom:var(--space-20); font-weight:700; font-size: var(--font-size-24); line-height:1.333em; color: #242424; } 
.sec6 .ex-list .box p { font-size: var(--font-size-16); line-height:1.5em; } 

.partner-slide { white-space: nowrap; overflow: hidden; } 
.partner-slide ul { display: flex; gap: var(--space-30); padding: calc(var(--space-30)/2) 0; } 
.partner-slide ul li { flex-shrink: 0; } 
.partner-slide ul li img { border-radius: 10px; box-shadow: var(--box-shadow-sm); } 

.sec8 { background-color: #f1f7ff; } 

.sec9 .video-wrap { display:flex; gap: var(--space-30); max-width:1400px !important; } 
.video-container { position:relative; padding-bottom:49% !important; border-radius: var(--border-radius-30-16); width:50%; } 

/* sub page */
.contain { max-width:1600px; margin:0 auto; padding-left:var(--container-space); padding-right:var(--container-space); } 
#contArea { max-width:1600px; padding-left:var(--container-space); padding-right:var(--container-space); margin:0 auto; } 
#contArea.wide { max-width:100% !important; padding-left:0; padding-right:0; } 

#sub #contArea,
#sub .contain { max-width: 1400px; } 

.sub-title { padding: var(--space-80) 0; text-align:center; } 
.sub-title h1 { font-size:var(--font-size-36); line-height:1em; color:var(--color-dark); letter-spacing: 0; } 

.real-cont { padding:var(--header-height) 0; } 

.sub-visual { position: relative; height: 750px; z-index: 10; overflow: hidden; } 
.sub-visual .background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; transform: scale(1.09); -ms-transform: scale(1.09); /* IE 9 */
 -moz-transform: scale(1.09); /* Firefox */
 -webkit-transform: scale(1.09); /* Safari and Chrome */
 -o-transform: scale(1.09); /* Opera */`
 transition: all 2s ease-out 0s; transition-delay: 0.1s; z-index: 0; } 
.sub-visual.load .background { transform: scale(1); -ms-transform: scale(1); /* IE 9 */
 -moz-transform: scale(1); /* Firefox */
 -webkit-transform: scale(1); /* Safari and Chrome */
 -o-transform: scale(1); /* Opera */ } 
.sub-visual .tt-wrap { width: 100%; position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; color: #fff; margin-top: var(--space-30); } 
.sub-visual .tt-wrap .tit { padding-top: var(--space-20); font-size: var(--font-size-60); line-height: 1.2em; font-weight: 700; } 

.path-wrap { position: relative; z-index: 50; } 
.path-wrap .wrap { max-width: 1200px; } 
.path-wrap .inner { display: flex; } 
.path-wrap a { position: relative; color: #fff; font-size: var(--font-size-15); line-height: 1.866em; display: flex; align-items: center; padding-right: 36px; } 
.path-wrap .home a img { display: block; margin-right: 10px; } 
.path-wrap .part { position: relative; z-index: 50; } 
.path-wrap .part > a { display: flex; align-items: center; } 
.path-wrap a::after { content: ""; position: absolute; top: 7px; right: 13px; width: 6px; height: 10px; background: url(/images/common/arrow-path.png) no-repeat center/contain; } 
.path-wrap .part:last-child a::after { display: none; } 
.path-wrap .part ul { display: none !important; } 

/* quick */
.quick { position: fixed; top:50%; right: clamp(16px, calc( 40 / var(--inner) * 100vw ), 40px ); transform: translateY(-50%); z-index: 80; } 
.quick.active { opacity: 1; pointer-events: auto; } 
.quick ul { display: flex; flex-direction: column; align-items: end; gap: var(--space-15); } 
.quick a { display: flex; align-items: center; gap: 10px; width:180px; height:75px; justify-content: center; border-radius: 50vh; box-shadow: var(--box-shadow); background-color: #fff; transition: .3s; } 
.quick ul li a i { position:relative; width: 32px; height: 32px; } 
.quick ul li a i .ico { width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: contain; transition: .3s; position: absolute; left: 0; top: 0; } 
.quick ul li a i.quick01 .ico { background-image: url(../images/common/quick-01.png); animation: call 0.5s linear infinite; } 
.quick ul li a i.quick02 .ico { background-image: url(../images/common/quick-02.png); } 
.quick ul li a i.quick03 .ico { background-image: url(../images/common/quick-03.png); } 
.quick ul li a i.quick04 .ico { background-image: url(../images/common/quick-04.png); } 
.quick ul li a i.quick05 .ico { background-image: url(../images/common/quick-05.png); } 
.quick ul li a p { color: #242424; font-size: var(--font-size-16); line-height:1.5em; transition: .3s; } 
.quick ul li a:hover { background-color: var(--color-primary); } 
.quick ul li a:hover p { color: #fff; } 
.quick ul li a:hover i.quick01 .ico { background-image: url(../images/common/quick-01-on.png); } 
.quick ul li a:hover i.quick02 .ico { background-image: url(../images/common/quick-02-on.png); } 
.quick ul li a:hover i.quick03 .ico { background-image: url(../images/common/quick-03-on.png); } 
.quick ul li a:hover i.quick04 .ico { background-image: url(../images/common/quick-04-on.png); } 
.quick ul li a:hover i.quick05 .ico { background-image: url(../images/common/quick-05-on.png); } 

@keyframes call { 
 0% { left:-2px; bottom:1px; } 
12.5% { left:2px; } 
25% { left:0; bottom:0; } 
37.5% { left:-2px; } 
50% { left:2px; bottom:-1px; } 
51% { left:0; bottom:0; } 
100% { left:0; bottom:0; } 
 }

/* footer */
#footer { background-color: #0e0e0e; padding: var(--space-50) 0 var(--space-40); font-weight:300; font-size: var(--font-size-14); letter-spacing: 0; } 
#footer .contain { display: flex; justify-content: space-between; align-items: end; } 
#footer .foot-info .foot-logo { margin-bottom:clamp(20px, calc( 27 / var(--inner) * 100vw ), 27px ); } 
#footer .foot-menu { display: flex; gap:10px; margin:var(--space-25) 0; } 
#footer .foot-menu li a { display:inline-block; padding:0 5px; line-height:30px; border-radius: 4px; border: 1px solid rgba(255,255,255,.4); color: rgba(255,255,255,.4); font-size: var(--font-size-15); } 
#footer .foot-info address { font-style: normal; display: flex; flex-wrap: wrap; gap: var(--space-30); } 
#footer .foot-info address p { line-height: 1.714em; color: #9f9f9f; } 
 #footer .foot-info address p strong { display:inline-block; padding-right:10px; color: #fff; font-weight:500; } 
#footer .foot-info .copy { color: #ffffff; margin-top: 10px; } 
#footer .foot-info .copy a { color: #6f6f6f; } 
#footer .copy a:hover { text-decoration: underline; } 

.scroll-top { position: fixed; opacity: 0; bottom: var(--container-space); right: 20px; pointer-events: none; } 
.scroll-top.active { opacity: 1; pointer-events: auto; }