@charset "utf-8"; 
@import url(font.css); 
*{margin: 0; padding: 0; font:inherit; color: inherit; box-sizing: border-box; list-style: none; user-select: none; }
a{text-decoration: none; }
img{max-width: 100%; }
html{font-size: 10px; }
body{font-size: 2rem; font-family: 'Noto Sans KR'; font-family: 'GmarketSansMedium'; width: 100%; font-weight: 400; line-height: 1.5; word-break:keep-all; overflow-x: hidden; color: #000;}
label, input, button, select{vertical-align:middle; font-size:1em}
input, button{}
input[type="submit"]{cursor:pointer}
button{cursor:pointer; border: none; background: none;}
input[type=text],
input[type=password], 
textarea{outline:none; border: 1px solid transparent;}
input[type=text]:focus,
input[type=password]:focus, 
textarea:focus,
select:focus{box-shadow:0 0 5px #ffffff00; border:1px solid #3761db !important;}
section{overflow: hidden; position: relative; padding: 14rem 0;}
.inner{max-width: 1640px; padding: 0 20px; margin: 0 auto; position: relative; width: 100%;}
.pc{}
.mo{display: none; }
.mb{display: none;}
.cmm-title{font-size: 5rem; }
.cmm-sTitle{padding-top: 2rem;}
.title-wrap{text-align: center; padding-bottom: 5rem;}
.bg-mask{position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 12; background-color: rgba(0,0,0,.5); display: flex; justify-content: flex-end; opacity: 0; visibility: hidden; }
.bg-mask.on{opacity: 1; visibility: visible; }
@media all and (max-width:1200px){
    html{font-size: 9px; }
}
@media all and (max-width:1024px){
    html{font-size: 8px; }
    section{padding: 80px 0;}
    .cmm-title{font-size: 30px;}
}
@media all and (max-width:768px){
    .pc{display: none; }
    .mo{display: block; }
    .visual::after{display: none;}
    .cmm-title{font-size: 24px;}
}
@media all and (max-width:500px){
    .mb{display: block;}
}

/* header */
.header{position: fixed; z-index: 1; width: 100%; color: #fff; transition: 0.5s;}
.header.on{background: #1e203d;}
.header .inner{display: flex; align-items: center; justify-content: space-between; height: 8rem;}
.header .logo{width: 30rem;}
.header .logo a{display: block; font-size: 0;}
.header .logo img{width: 100%;}
.header .gnb{display: flex; }
.header .gnb li{}
.header .gnb li a{padding: 0 2rem;}
.header .btn-menu{display: none;}
/* 모바일 메뉴버튼 */
.header .btn-menu{align-self: center; cursor: pointer; position: relative; }
.header .btn-menu .bar{width: 30px; height: 2px; background-color: #fff; position: relative; z-index: 1; }
.header .btn-menu .bar:nth-child(2){margin: 8px 0; }
@media all and (max-width:1200px){
    
}
@media all and (max-width:1024px){
    .header .gnb{display: none;}
    .header .btn-menu{display: block;}
    
}
@media all and (max-width:768px){
    .header .logo{width: 200px;}
}
.side-menu{position: fixed; top: 0; right: 0; width: 100%; max-width: 400px; height: 100%; z-index: 13; background-color: #fff; right: -100%; transition: 0.3s; font-size: 1.8rem;}
.side-menu.on{right: 0;}
.side-menu .top{height: 8rem; display: flex; align-items: center; justify-content: flex-end; padding: 0 2rem; }
.side-menu .btn-menu-close{padding: 5px; cursor: pointer; }
.side-menu .btn-menu-close .bar{width: 28px; height: 2px; background-color: #000; position: relative; }
.side-menu .btn-menu-close .bar:nth-child(1){transform: rotate(45deg); top: 2px; }
.side-menu .btn-menu-close .bar:nth-child(2){transform: rotate(-45deg); }
.side-menu ul{border-top: 1px solid #eee; }
.side-menu ul li{border-bottom: 1px solid #eee; }
.side-menu ul li a{padding: 0 2rem; line-height: 3; display: block; transition: 0.3s;}


/* ms01 */
.ms01{height: 100vh; background: url(../img/ms01-bg02.png) no-repeat center / cover; color: #fff; text-align: center; padding: 0;}
.ms01 .inner{display: flex; flex-direction: column; height: 100%; align-items: center; justify-content: center;}

.scroll-btn {position: absolute; bottom: 2rem; left: 0; right: 0; font-size: 13px;}
.scroll-btn .mouse{position: relative; display: flex; justify-content: center; width: 3rem; height: 5rem; margin: 0 auto; margin-bottom: 10px; border: 3px solid white; border-radius: 20px;} 
.scroll-btn .mouse i {position: absolute; display: block; top: 29%; width: 8px; height: 8px; background: white; border-radius: 50%; animation: ani-mouse 2.5s linear infinite; }
@keyframes ani-mouse {
    0% {opacity: 1; top: 29%;  } 
    15% {opacity: 1; top: 60%;  } 
    50% {opacity: 0; top: 60%;  } 
    100% {opacity: 0; top: 29%;  } 
}
@media all and (max-width:1200px){
    
}
@media all and (max-width:1024px){
    
}
@media all and (max-width:768px){
    
}

/* ms02 사업분야 */
.ms02{}
.ms02 .inner{}
.ms02 .item-wrap{display: flex; gap: 2.5rem;}
.ms02 .item-wrap .item{height: 50rem; flex: 1; color: #fff; position: relative; cursor: pointer; border-radius: 2rem; overflow: hidden; transition: 0.3s}
.ms02 .item-wrap .item:hover{flex: 2.5;}
.ms02 .item-wrap .item01{background: url(../img/sec02-bg01.png) no-repeat center / cover;}
.ms02 .item-wrap .item02{background: url(../img/sec02-bg02.png) no-repeat center / cover;}
.ms02 .item-wrap .item03{background: url(../img/sec02-bg03.png) no-repeat center / cover;}
.ms02 .item-wrap .item04{background: url(../img/sec02-bg04.png) no-repeat center / cover;}
.ms02 .item-wrap .item .txtbox{width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); padding: 2.7vw;}
.ms02 .item-wrap .item .txtbox h3{font-size: 3.6rem; padding-bottom: 1rem;}
.ms02 .item-wrap .item .txtbox h4,
.ms02 .item-wrap .item .txtbox p{opacity: 0; visibility: hidden; transition: 0.3s}
.ms02 .item-wrap .item .txtbox p{position: absolute; bottom: 5rem; left: 5rem; line-height: 2;}
.ms02 .item-wrap .item .txtbox p span{margin-right: 10px;}
.ms02 .item-wrap .item:hover .txtbox h4,
.ms02 .item-wrap .item:hover .txtbox p{opacity: 1; visibility: visible;}
@media all and (max-width:1200px){
    
}
@media all and (max-width:1024px){
    .ms02 .item-wrap{flex-wrap: wrap;}
    .ms02 .item-wrap .item{flex: auto; width: calc((100% - 2.5rem) / 2); height: auto;}
    .ms02 .item-wrap .item:hover{flex: auto;}
    .ms02 .item-wrap .item .txtbox{padding: 40px 30px;}
    .ms02 .item-wrap .item .txtbox h4,
    .ms02 .item-wrap .item .txtbox p{opacity: 1; visibility: visible;}
    .ms02 .item-wrap .item .txtbox h4{padding-bottom: 50px;}
    .ms02 .item-wrap .item .txtbox p{position: relative; bottom: auto; left: auto;}
}
@media all and (max-width:768px){
    .ms02 .item-wrap .item{width: 100%;}
    .ms02 .item-wrap .item .txtbox{padding: 30px 20px;}
    .ms02 .item-wrap .item .txtbox p span{margin-right: 5px;}
    .ms02 .item-wrap .item .txtbox p{font-size: 14px;}
}

/* ms03 스마트공장 구축효과 */
.ms03{background: #071c34; color: white;}
.donut-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; } 
.donut-card { position: relative; display: flex; align-items: center; justify-content: center; transition: 0.3s; } 
.donut-card:hover { transform: translateY(-6px); } 
.donut { width: 100%; height: 100%; transform: rotate(-90deg); max-width: 300px;} 
.donut circle { fill: none; stroke-width: 10; } 
.donut .bg { stroke: rgba(255, 255, 255, 0.15); } 
.donut .progress { stroke: white; stroke-linecap: round; } 
.donut-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; display: flex; flex-direction: column; align-items: center; } 
.donut-text .percent { font-size: 3rem; font-weight: 700; } 
.donut-text p { font-size: 16px; margin-top: 6px; opacity: 0.9; } 
/* --- 효과 카드 (8개) --- */
.effect-cards { margin-top: 8rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } 
.effect-card { background: linear-gradient(135deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 100%); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; padding: 2.6rem; position: relative; overflow: hidden; color: #d7e6ff; transition: 0.35s; } 
.effect-card:hover { background: linear-gradient(135deg, rgba(255,255,255,0.11) 0%, rgba(255,255,255,0.04) 100%); border-color: rgba(255, 255, 255, 0.16); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0,234,255,0.1); } 
/* 카드 상단 컬러 바 */
.effect-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, #00eaff, #00ff9c); } 
.effect-card h4 { margin-bottom: 10px; color: #8ef0ff; } 
.effect-icon { font-size: 22px; margin-bottom: 10px; } 
.badge { font-size: 12px; background: #0e2c45; padding: 4px 10px; border-radius: 20px; margin-left: 8px; color: #00eaff; } 
.effect-card ul { margin-top: 10px; padding-left: 1rem; } 
.effect-card li { font-size: 16px; margin-bottom: 6px; opacity: 0.9; font-family: 'GmarketSansLight'; } 
/* 카드 컬러 테마 */
.effect-card.cyan::before { background: linear-gradient(90deg, #00eaff, #00ffa6); } 
.effect-card.green::before { background: linear-gradient(90deg, #00ffa6, #00ffcc); } 
.effect-card.orange::before { background: linear-gradient(90deg, #ff8a00, #ff3d00); } 
.effect-card.purple::before { background: linear-gradient(90deg, #7b5cff, #c056ff); } 
.effect-card.pink::before { background: linear-gradient(90deg, #ff4d7e, #ff6aa2); } 
@media all and (max-width:1200px){
    
}
@media all and (max-width:1024px){
    .donut-grid{grid-template-columns: repeat(2, 1fr); }
    .effect-cards{grid-template-columns: repeat(2, 1fr); }
}
@media all and (max-width:768px){
    .donut-grid { grid-template-columns: repeat(2, 1fr); gap: 0px; }
    .donut-text { white-space: nowrap; }
    .effect-cards{grid-template-columns: 1fr; }
    .donut-text .percent{font-size: 20px;}
}


.ms04 {} 
.ms04 .item-wrap { display: flex; justify-content: space-between; gap: 2vw; flex-wrap: wrap;} 
.ms04 .item-wrap .item { background: white; padding: 4rem 2rem; border-radius: 10px; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1); transition: 0.3s; text-align: center; flex: 1;} 
.ms04 .item-wrap .item:hover { transform: translateY(-6px); } 
.ms04 .item-wrap .item i { font-size: 3.2rem; color: #3f66ff; } 
.ms04 .item-wrap .item h3 { padding: 1.5rem 0;} 
.ms04 .item-wrap .item ul { font-size: 1.8rem; color: #555; width: fit-content; margin: 0 auto; display: flex; flex-direction: column; gap: 5px; text-align: left;}
.ms04 .item-wrap .item li {} 
.ms04 .item-wrap .item li b{margin-right: 5px;} 
@media all and (max-width:1200px){
    
}
@media all and (max-width:1024px){
    .ms04 .item-wrap .item{flex: auto; width: calc((100% - 2vw) / 2);}
}
@media all and (max-width:768px){
    .ms04 .item-wrap{gap: 20px;}
    .ms04 .item-wrap .item{width: 100%;}
}

.ms05 { background: #061b33; color: white;} 
.ms05 .process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } 
.ms05 .process-card { background: rgba(255,255,255,0.07); border: 1px solid rgba(255, 255, 255, 0.08); padding: 3rem; border-radius: 14px; transition: 0.3s; position: relative; overflow: hidden; color: #d7e6ff; } 
.ms05 .process-card:hover { background: rgba(255,255,255,0.11); border-color: rgba(255, 255, 255, 0.16); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0,234,255,0.1); } 
/* 카드 상단 컬러 바 */
.ms05 .process-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; border-radius: 12px 12px 0 0; } 
.ms05 .process-card span { font-size: 14px; color: #00eaff; } 
.ms05 .process-card h3 { padding: 1rem 0; } 
.ms05 .process-card ul { font-size: 16px; line-height: 1.7; padding-left: 16px; } 
.ms05 .process-card small { display: block; margin-top: 15px; opacity: 0.7; } 
/* STEP별 상단 컬러 */
.ms05 .step1::before { background: linear-gradient(90deg, #00eaff, #3f66ff); } 
.ms05 .step2::before { background: linear-gradient(90deg, #7b5cff, #c056ff); } 
.ms05 .step3::before { background: linear-gradient(90deg, #ff8a00, #ff3d00); } 
.ms05 .step4::before { background: linear-gradient(90deg, #00ffa6, #00eaff); } 
.ms05 .step5::before { background: linear-gradient(90deg, #ff4d7e, #ff6aa2); } 
.ms05 .step6::before { background: linear-gradient(90deg, #ffd000, #ff8a00); } 
.ms05 .step7::before { background: linear-gradient(90deg, #00eaff, #00ffa6); } 
@media all and (max-width:1200px){
    
}
@media all and (max-width:1024px){
    .ms05 .process-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media all and (max-width:768px){
    .ms05 .process-grid{ grid-template-columns: 1fr; }
}


.ms06 {padding-bottom: 0;} 
.ms06 .inner{max-width: none; padding: 0;}
.partner-slider { overflow: hidden; position: relative; width: 100%;} 
.partner-track { display: flex; width:max-content; align-items: center; animation: partnerMove 30s linear infinite; } 
.partner-track img { height: 4rem; transition: 0.3s; flex-shrink:0; } 
.logos{ display:flex; gap:8rem; margin-right:8rem;}
@keyframes partnerMove { 
    0% { transform: translateX(0); } 
    100% { transform: translateX(-50%); } 
}
@media all and (max-width:1200px){
    
}
@media all and (max-width:1024px){
    
}
@media all and (max-width:768px){
}


.ms07 {} 
.ms07 .inner{display: flex; gap: 2rem;}
.ms07 .item{display: flex; justify-content: space-between; align-items: center; border: 1px solid #B2B2B2; border-radius: 4rem; flex: 1; padding: 4vw 3vw; gap: 2rem;}
.ms07 .item .txtbox{}
.ms07 .item .txtbox p{color: #2f6cff; }
.ms07 .item .txtbox h3{font-size: 4.2rem;}
.ms07 .item a{ border-radius: 100px; background: linear-gradient(90deg, #1e2b55, #3c8dbc); color: white; width: 13rem; height: 4.5rem; display: inline-flex; align-items: center; justify-content: center; padding-top: 5px;}
  
@media all and (max-width:1200px){
    
}
@media all and (max-width:1024px){
    .ms07 .inner{flex-direction: column;}
    .ms07 .item{border-radius: 25px; padding: 20px;}
    .ms07 .item .txtbox h3{font-size: 30px;}
}
@media all and (max-width:768px){
    .ms07 .item{flex-direction: column; align-items: flex-start;}
    .ms07 .item a{align-self: flex-end;}
    .ms07 .item .txtbox h3{font-size: 24px;}
}




/* footer */
.footer{padding-bottom: 14rem;}
.footer .inner{}
.footer ul{padding: 6rem 0; display: flex; justify-content: space-between; gap: 2rem; color: #717171;}
.footer ul li{}
.footer ul li h4{font-weight: 700;}
.footer ul li p{padding: 1rem 0;}
.footer .map {height: 45rem; margin-bottom: 2rem;}
.footer .map img {width:100%;}
.footer .root_daum_roughmap_landing {width:100% !important;}
.footer .root_daum_roughmap, 
.footer .root_daum_roughmap .wrap_map {width:100%; height: 100% !important;}
.footer .root_daum_roughmap .wrap_btn_zoom{z-index: 1;}
.footer .root_daum_roughmap_landing .border2 {display:block;}
.footer .ft-btm{display: flex; align-items: center; gap: 2rem; font-size: 13px; color: #9c9c9c; font-weight: 300; flex-wrap: wrap;} 
.footer .ft-btm .logo{}
.footer .ft-btm .logo img{}
@media all and (max-width:1300px){
    .footer ul{flex-wrap: wrap; justify-content: flex-start; }
    .footer ul li{width: calc((100% - 6rem) / 3);}
    
}
@media all and (max-width:1200px){
    
}
@media all and (max-width:1024px){
    .footer{padding-bottom: 80px;}
    .footer h2{font-size: 28px;}
    .footer ul{padding: 20px 0;}
}
@media all and (max-width:768px){
    .footer h2{font-size: 24px;}
    .footer ul{gap: 2rem; font-size: 14px;}
    .footer ul li{width: calc((100% - 2rem) / 2);}
    .footer .map{height: 250px;}
    .footer .ft-btm{gap: 15px; font-size: 12px;}
    .footer .ft-btm p{width: 100%;}
}
/* //footer */
.quick-wrap{position: fixed; right: 20px; bottom: 20px; z-index: 1; display: flex; flex-direction: column; gap: 1rem;}
.quick-wrap a{width: 6rem; height: 6rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); transition: 0.3s; border-radius: 100px; overflow: hidden;}
.quick-wrap a:hover{transform: scale(1.1);}
.quick-wrap .btn-kakao{background: #fee500; }
.quick-wrap .btn-kakao img{width: 70%;}
.quick-wrap .btn-top{background: #1e203d;}
.quick-wrap .btn-top img{width: 2rem;}

/* //contact modal */
.contact-modal{ position:fixed; inset:0; background:rgba(0,0,0,0.5);
  display:none; align-items:center; justify-content:center; z-index:9999; }
.contact-modal.active{ display:flex; }
.modal-content{background:white; width: calc(100% - 40px);margin:0 auto; max-width: 420px; padding:40px; border-radius:10px; position:relative; }
.modal-content h2{ margin-bottom:20px; }
.modal-content input{ width:100%; padding:10px; margin-bottom:12px; border:1px solid #ddd; border-radius:6px; }
.modal-content textarea{ width:100%; padding:10px; border:1px solid #ddd; border-radius:6px; }
.modal-content textarea{ height:120px; resize:none; }
.modal-content form button{ width:100%; padding:12px; background:#1e203d; color:white; border:none; border-radius:6px; cursor:pointer; }
.close-btn{ position:absolute; right:15px; top:15px; border:none; background:none; font-size:18px; cursor:pointer; }
.modal-content input:focus,
.modal-content textarea{ border:1px solid #ddd; outline:none; }
.modal-content input:focus,
.modal-content textarea:focus{ border:1px solid #1e203d !important; }
.text-count{ text-align:right; font-size:12px; color:#888; margin-top: -10px; margin-bottom: 10px; }

.modal{position: fixed; background: #fff; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 20px; z-index: 12; border-radius:10px; width: calc(100% - 40px); opacity: 0; visibility: hidden; transition: 0.3s; max-height: 98vh;}
.modal .md-top{display: flex; justify-content: space-between; align-items: center; padding-bottom: 3rem; flex-wrap: wrap; gap: 2rem;}
.modal .md-top .close-modal{font-size: 3rem; }
.md-project { max-width: 1300px; padding: 4rem 8rem; }
.md-project.on{opacity: 1; visibility: visible;}
.md-project h2{font-size: 3rem;}
.md-project .tab{display: flex; gap: 1rem; width: 100%;}
.md-project .tab li{cursor: pointer; padding: 0.5rem 2rem; border-radius: 100px; border: 1px solid #686868; padding-top: 0.9rem; color: #686868;}
.md-project .tab li.active{background: #0011ff; color: #fff; border-color: #0011ff;}
.md-project .tab-content{display: none; position: relative;}
.md-project .tab-content.active {display: block;}
.md-project .tab-content .swiper{border-radius: 1rem; box-shadow: 1px 1px 15px 5px #cccccc70;}
.md-project .tab-content .swiper ul{}
.md-project .tab-content .swiper ul li{}
.md-project .tab-content .swiper ul li .imgbox{padding: 20px; }
.md-project .tab-content .swiper ul li .imgbox img{width: 100%; }
.md-project .tab-content .swiper-pagination-bullet-active{background: #0011ff;}
.md-project .tab-content .sw-btn{position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; cursor: pointer; font-size: 0; }
.md-project .tab-content .sw-btn img{width: 2rem;}
.md-project .tab-content .sw-prev{left: -5rem;}
.md-project .tab-content .sw-next{right: -5rem;}
@media all and (max-width:1200px){
    
}
@media all and (max-width:1024px){
    
}
@media all and (max-width:768px){
    .md-project{padding: 20px;}
    .modal .md-top{gap: 10px;}
    .md-project h2{font-size: 20px;}
    .md-project .tab-content .sw-btn{display: none;}
}