@charset "utf-8";

/*초기화*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,button,img {margin:0;padding:0}
fieldset,img {border:0;}
dl,ul,ol,menu,li {list-style:none}
blockquote, q {quotes:none}
blockquote:before, blockquote:after,q:before, q:after {content:'';content:none}
input,select,textarea,button {font-size:100%;vertical-align:middle}
button {border:0 none;background-color:transparent}
table {border-collapse:collapse;border-spacing:0}
body {-webkit-text-size-adjust:none} /* 뷰표트 변환시 폰트크기 자동확대 방지 */
input[type='text'],input[type='password'],input[type='number'],input[type='submit'],input[type='search'] {-webkit-appearance:none; border-radius:0}
input:checked[type='checkbox'] {background-color:#666; -webkit-appearance:checkbox}
button,input[type='button'],input[type='submit'],input[type='reset'],input[type='file'] {-webkit-appearance:button; border-radius:0}
input[type='search']::-webkit-search-cancel-button {-webkit-appearance:none}
input{border-radius:0px 0px} /*아이폰 라운드 없애기*/
a {text-decoration:none; color:#333; background-color: transparent;}
address,caption,cite,code,dfn,em,var {font-style:normal;font-weight:normal}
img{border:0;vertical-align:top}
.ellip {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

/*공통*/
body { font-size: 14px; font-family:NanumSquare;}
@font-face{ font-family: NanumSquare; src:url("../font/NanumSquareR.eot"); src:url("../font/NanumSquareR.eot?#iefix") format(‘embedded-opentype’), url("../font/NanumSquareR.woff") format(‘woff’), url("../font/NanumSquareR.ttf") format('truetype'), url('../font/NanumSquareR.svg') format('svg'); }

.wrap_whole {width:100%; min-width:1380px;}

/*header*/
header {width:100%; position:fixed; top:0; left:0; background:#fff; z-index:101; box-shadow:0px 2px 10px #868686;}
header .wrap_header {width:100%;  height:83px; box-sizing:border-box;  padding-top:12px; position:relative; }
header .wrap_header .header { width:1300px; height:70px;  margin:0 auto; position:relative;}
header .wrap_header .header h1 {float:left; margin-top:19px;}
header .wrap_header .header h1 a {display:block;}
header .wrap_header .header h1 a img {display:block; }

header .wrap_header .header .gnb {width: 800px; height:70px; line-height:70px; z-index:102; float:left;}
header .wrap_header .header .gnb .menu > li {float: left; width:20%;}
header .wrap_header .header .gnb .menu > li a {display: block; text-align: center; font-size: 19px; font-weight: 700; }
header .wrap_header .header .gnb .menu > li a:hover {color:#0db4e4;}
header .wrap_header .header .gnb li {height: 72px; line-height: 72px;}
header .wrap_header .header .gnb li .sub {background:#1cb8e5; display:none;}
header .wrap_header .header .gnb li .sub li {height:60px; line-height:60px;}
header .wrap_header .header .gnb li .sub li a {color:#fff; font-weight: normal; font-size: 17px; letter-spacing: 0.1em; cursor: pointer; text-align:center;}
header .wrap_header .header .gnb li .sub li a:hover {background:#082b43; color:#1cb8e5; font-size:18px; font-weight:bold;}
header .wrap_header .header .gnb li .g01 {width:120%; margin-left:-20%;}
header .wrap_header .header .gnb li .g02 {width:150%; margin-left:-30%;}
header .wrap_header .header .gnb li .g03 {width:160%; margin-left:-33%;}
header .wrap_header .header .gnb .sub > li {position: relative;}
header .wrap_header .header .gnb .sub .sub {position: absolute; top: 0; left:100%; width:100%;}

header .wrap_header .header .gnb .menu li a.others {cursor:default; background:url(../images/arrow.png) no-repeat 205px center; background-size:15px auto;}
header .wrap_header .header .gnb .menu li a.others:hover {background:#082b43 url(../images/arrow2.png) no-repeat 205px center; background-size:15px auto; font-weight:600; font-size:18px;}

header .wrap_header .header .remote {position:absolute; top:-3px; right:75px;}
header .wrap_header .header .remote a {position:relative; display:block; width:215px; height:75px; background: url(../images/customer-service12.png) no-repeat; background-size:215px auto;}
header .wrap_header .header .remote a span {font-size:20px; color:#109cfd; font-weight:bold; position:absolute; top:30px; left:66px;}

/*전체메뉴보기*/
header .wrap_header .header p {width:43px; height:43px; position:absolute; top:13px; right:0px; background: url(../images/menu_btn4.png) no-repeat; background-size:43px 43px;}
header .wrap_header .all_menu {width:100%; background:#3b6a7f; position:fixed; height:485px; top:83px; left:0; display:none; z-index:101;}
header .wrap_header .all_menu .under_wrap {width:1300px; margin:0 auto; position:relative;}
header .wrap_header .all_menu .under_all {width:1100px; height:485px; margin:0 auto; overflow:hidden; border-left:1px solid #4d7a8e;}
header .wrap_header .all_menu .under_all>li {float:left; height:100%; border-right:1px solid #4d7a8e; box-sizing:border-box;}
header .wrap_header .all_menu .under_all>li:nth-child(1) {width:18%;}
header .wrap_header .all_menu .under_all>li:nth-child(2) {width:23%;}
header .wrap_header .all_menu .under_all>li:nth-child(3) {width:23%;}
header .wrap_header .all_menu .under_all>li:nth-child(4) {width:18%;}
header .wrap_header .all_menu .under_all>li:nth-child(5) {width:18%;}
header .wrap_header .all_menu .under_all span {text-align:center; color:#fff; font-size:19px; display:block; padding:30px 0 20px 0; }
header .wrap_header .all_menu .under_all li a {display:block; color:#a6c1c9; height:42px; line-height:42px; font-size:17px; padding-left:20px; letter-spacing:0.07em;}
header .wrap_header .all_menu .under_all li a:hover {color:#fff; font-size:18px;}
header .wrap_header .all_menu .under_all .sub_under {padding-left:30px;}
header .wrap_header .all_menu .under_all .sub_under li a {display:block; color:#a6c1c9; height:37px; line-height:37px; font-size:16px;}
header .wrap_header .all_menu .under_all .sub_under li a:hover {color:#fff; font-size:17px;}
header .wrap_header .all_menu .under_wrap .menu_close a {display:block; width:40px; height:40px; color:#fff; font-size:17px; text-align:center; padding-top:30px; position:absolute; top:380px; right:-5px; background: url(../images/menu_btn4_close2.png) no-repeat center top; background-size:30px 30px;}
header .wrap_header .header p.active {display:block; width:43px; height:43px; position:absolute; top:13px; right:0px; background: url(../images/menu_btn4_close.png) no-repeat; background-size:43px 43px;}

/*우측 메인네비게이션*/
.mainNavi {position:fixed; right:50px; top:47%; z-index:100;}
.mainNavi ul {}
.mainNavi ul li {position:relative; width:30px; height:4px; background:#fff;}
.mainNavi ul li.first {margin-bottom:30px;}
.mainNavi ul li.second {margin-bottom:30px;}

/*헤더 밑 경로*/
.header_under {width:100%; height:50px; margin-top:83px; background: url(../images/head_under.jpg) no-repeat; background-size:cover;}
.header_under .stuff {width:1050px; margin:0 auto;}
.header_under .stuff span {color:#fff; font-size:17px; letter-spacing:0.1em; line-height:50px;}

/*메인페이지 슬라이드*/
.section1 {width:100%; height:100%;  box-sizing:border-box; padding-top:83px;}
.section1 .slideWrap {width:100%; position:relative; overflow:hidden; }
.section1 .slideWrap ul {width:400%; height:calc(100vh - 83px);}
.section1 .slideWrap ul li {width:25%; height:calc(100vh - 83px); float:left;}
.section1 .slideWrap ul .num1 {background:#bef2f3; border:1px solid #000; position:relative;}
.section1 .slideWrap ul .num1 .cm_wrap {overflow:hidden; width:1150px; height:600px; padding-right:50px; box-sizing:border-box; position:absolute; top:0; right:0; left:0; bottom:0; margin:auto;}
.section1 .slideWrap ul .num1 .cm_wrap .phone_cover {float:left; display:block; width:550px; height:auto;}
.section1 .slideWrap ul .num1 .cm_wrap .mentWrap {float:right; margin-top:10px;}
.section1 .slideWrap ul .num1 .cm_wrap .mentWrap img {display:block;}
.section1 .slideWrap ul .num1 .cm_wrap .mentWrap .account_title {margin-bottom:50px; }
.section1 .slideWrap ul .num1 .cm_wrap .mentWrap .five_ment2 {margin-left:20px; }
.section1 .slideWrap ul .num1 .cm_wrap .mentWrap .link_btn {overflow:hidden; margin:50px 0 0 10px;}
.section1 .slideWrap ul .num1 .cm_wrap .mentWrap .link_btn a {float:left; display:block;} 
.section1 .slideWrap ul .num1 .cm_wrap .mentWrap .link_btn a:first-child {margin-right:50px;}
/*총무수첩 APP페이지의 링크버튼*/
.link_btn2 {overflow:hidden; margin:35px auto 100px; width:460px;}
.link_btn2 a {float:left; display:block;} 
.link_btn2 a:first-child {margin-right:50px;}

/*메인페이지 섬유업종별 특화 솔루션*/
.section1 .slideWrap ul .num3 {background:url(../images/bg_test6.jpg) no-repeat center; background-size:cover; position:relative; }
.section1 .slideWrap ul .num3 .textile {width:685px; position:absolute; left:calc(50% - 320px); top:24%;}
.section1 .slideWrap ul .num3 .textile dl {text-align:center; margin-bottom:70px; }
.section1 .slideWrap ul .num3 .textile dl dt {font-size:33px; font-weight:500; margin-bottom:35px; color:rgba(0, 0, 0, 0.9);}
.section1 .slideWrap ul .num3 .textile dl dt span {color:#f0387d; font-size:42px; font-weight:900;}
.section1 .slideWrap ul .num3 .textile dl dd {font-size:20px; font-weight:500; margin-bottom:18px; color:rgba(0, 0, 0, 0.9); padding:3px 12px; color:#000;}
.section1 .slideWrap ul .num3 .textile a {color:#f0387d; background:#fff; display:block; width:90px; height:45px; border:1px solid #f0387d; line-height:45px; text-align:center; margin:-16px auto 0; font-size:18px; font-weight:900; letter-spacing:0.1em;}


/*고정된 동그라미*/
.section1 .slideWrap .pin_wrap {position:absolute; left:calc(49% - 3px); bottom:60px; }
.section1 .slideWrap .pin_wrap #list_num {text-align:center; float:left; margin-right:15px;}
.section1 .slideWrap .pin_wrap #list_num a {margin-right:10px;}
.section1 .slideWrap .pin_wrap #b_control{float:left; position:relative; top:-1px;}
.section1 .slideWrap .pin_wrap #b_control p {float:left; width:24px; height:24px; background:url(../images/stop.png) no-repeat; background-size:26px 26px; border:none; position:relative; top:-2px; left:-3px;}
.section1 .slideWrap .pin_wrap #b_control p.play {background:url(../images/play.png) no-repeat;  background-size:26px 26px;}

/*섹션2-middle*/
.section2 {width:100%; height:100%; box-sizing:border-box; padding-top:83px; background:url(../images/bg_grey4.jpg) no-repeat; background-size:cover;  }
.section2 .sec2_wrap {position:relative; width:100%; height:calc(100vh - 83px); box-sizing:border-box;}
.section2 .sec2_wrap .sol_wrap {position:absolute; top:0; right:0; left:0; bottom:0; margin:auto; width:1215px; height:610px; padding-bottom:35px;}
.section2 .sec2_wrap .sol_wrap .solution_title {display:block; margin:0 auto 40px;}
.section2 .sec2_wrap .sol_wrap .content {width:900px; height:500px; margin:0 auto;}
.section2 .sec2_wrap .sol_wrap .content .up a {background:#fff; width:425px; height:225px; float:left; margin-bottom:50px; overflow:hidden; display:block; box-sizing:border-box; box-shadow:6px 5px 13px #727272;}
.section2 .sec2_wrap .sol_wrap .content .up a:first-child {margin-right:50px;}
.section2 .sec2_wrap .sol_wrap .content .up a img {position:relative;}
.section2 .sec2_wrap .sol_wrap .content .down a {background:#fff; width:425px; height:225px; float:left; overflow:hidden; display:block; box-sizing:border-box; box-shadow:6px 5px 13px #727272;}
.section2 .sec2_wrap .sol_wrap .content .down a:first-child {margin-right:50px;}
.section2 .sec2_wrap .sol_wrap .content .down a img {position:relative;}

/*섹션3-총무수첩 롤링*/
.section3 {width:100%; height:100%; box-sizing:border-box; padding-top:83px; background:#bef2f3; }
.section3 .content_wrap {position:relative; width:100%; height:calc(100vh - 83px); box-sizing:border-box;}
.section3 .content_wrap .content {position:absolute; top:0; right:0; left:0; bottom:0; margin:auto; width:1215px; height:640px;}
.section3 .content_wrap .content .account_title2 {display:block; margin:0 auto;}
.section3 .content_wrap .content .content_under {position:relative;}
.section3 .content_wrap .content .content_under .rolling {width:1215px; height:560px; margin:30px auto 0; position:relative; overflow:hidden;}
.section3 .content_wrap .content .content_under .rolling ul {width:2717px; margin-top:52px;}
.section3 .content_wrap .content .content_under .rolling ul li {width:227px; height:420px; float:left; box-sizing:border-box;  margin-right:20px; position:relative; }
.section3 .content_wrap .content .content_under .rolling ul li.off div {position:relative; width:85%; height:85%; margin:30px auto 0; opacity:0.8;}
.section3 .content_wrap .content .content_under .rolling ul li.off div:after {display: block; content: ''; position: absolute; width: 100%; top: 0; bottom: 0;}
.section3 .content_wrap .content .content_under .rolling ul li.off em {display:none;}
.section3 .content_wrap .content .content_under .rolling ul li div {width:100%; height:100%; margin:0 auto;}
.section3 .content_wrap .content .content_under .rolling ul li div:after {background-color: transparent;}

.section3 .content .content_under .rolling ul li img {display:block; width:100%;}
.section3 .content .content_under .rolling ul li em {text-align:center; display:block; font-size:20px; font-weight:bold; letter-spacing:0.1em; margin-top:50px; width:227px; height:52px; line-height:52px; }
.section3 .content .content_under .rolling .phone {position:absolute; top:-1px; left:432px; z-index:2; }
.section3 .content .content_under .rolling p {width:33px; height:33px; position:absolute; top:481px; left:592px; background:url(../images/phone_stop.png) no-repeat; z-index:3;}
.section3 .content .content_under .rolling p.play {width:33px; height:33px; position:absolute; top:481px; left:592px; background:url(../images/phone_play.png) no-repeat; z-index:3;}
.section3 .content .content_under .arrow_left {position:absolute; top:40%; left:-50px; display:block; z-index:2;}
.section3 .content .content_under .arrow_right {position:absolute; top:40%; right:-50px; display:block; z-index:2;}

/*서브페이지-정부지원사업 스마트 공장 지원 사업*/
.smart_factory {width:900px; margin:100px auto; display:block;}

/*서브페이지-제품/서비스 제조mes/pop시스템*/
.mes-pop {width:auto; margin:0 auto 120px; display:block;}

/*ceo인사말*/
.ceo .title {font-size:33px; font-weight:900; text-align:center; text-transform:uppercase; margin-top:60px;}
.ceo .hello_wrap {width:1000px; margin:40px auto 110px; font-size:19px; line-height:170%; overflow:hidden;}
.ceo .hello_wrap div:nth-child(1) {margin-bottom:30px;}
.ceo .hello_wrap div:nth-child(2) {margin-bottom:30px;}
.ceo .hello_wrap div:nth-child(3) {margin-bottom:30px;}
.ceo .hello_wrap div span {font-weight:900; color:#007aff;}
.ceo .hello_wrap .hello_bottom {float:right; margin-top:20px; overflow:hidden;}
.ceo .hello_wrap .hello_bottom p {font-size:21px; float:left; margin:15px 20px 0 0; font-weight:900;}
.ceo .hello_wrap .hello_bottom img {float:left; display:block;}

/*사업분야*/
.busi_part {width:1100px; margin:0 auto 120px; display:block;}

/*회사연혁*/
.history {width:1100px; margin:0 auto 120px; display:block;}

/*조직도*/
.organ {width:1100px; margin:0 auto 120px; display:block;}

/*오시는 길*/
.map {width:1100px; margin:0 auto;}
.map .m_title {font-size:33px; font-weight:900; text-align:center; margin-top:60px;}
.map ul {margin:50px 0 20px 10px;}
.map ul li {margin-bottom:10px;}
.map ul li span:first-child {font-weight:600; font-size:17px; display:inline-block; width:85px; letter-spacing:0.1em; padding-left:13px; background:url(../images/map_dot.png) no-repeat 1px 5px; background-size:7px 7px;}
.map ul li span:last-child {font-size:16px; display:inline-block;}
.map a img {width:1097px; margin:0 auto 100px; display:block; border:2px solid #ededed;}

/*생산현장디지털화사업*/
.digital_busi {width:1100px; margin:0 auto 120px; display:block;}

/*원산지증명시스템구축 지원사업*/
.proof {width:1100px; margin:0 auto 120px; display:block;}

/*섬유특화솔루션*/
.fabric {width:1100px; margin:0 auto 50px; display:block;}
.sys_diagram {width:1273px; margin:0 auto 70px; display:block;}
.product_process {width:1273px; margin:0 auto 120px; display:block;}

/*무선직기모니터링시스템*/
.wireless {width:1150px; margin:0 auto 100px; display:block;}
.monitoring {width:1273px; margin:0 auto 70px; display:block;}
.controller {width:1150px; margin:0 auto 40px; display:block;}
.pc_program {}
.pc_program p {font-size:28px; text-align:center; font-weight:700; }
.pc_program .pro_wrap {position:relative; width:1100px; height:702px; margin:30px auto 130px; overflow:hidden;}
.pc_program .pro_wrap .pc_screen {width:909px; height:702px; display:block; position:absolute; left:94px; top:0; z-index:1}
.pc_program .pro_wrap .pc_left {position:absolute; left:0px; top:240px;}
.pc_program .pro_wrap .pc_right {position:absolute; right:0px; top:240px;}
.pc_program .pro_wrap .img_listWrap {width:839px; height:574px; top:31px; left:130px; position:absolute; overflow:hidden; z-index:2}
.pc_program .pro_wrap .img_list {width:6712px; height:574px; }
.pc_program .pro_wrap .img_list li {float:left; width:839px; height:574px;}
.pc_program .pro_wrap .img_list li img {width:839px; height:477px; display:block;}
.pc_program .pro_wrap .img_list li em {text-align:center; display:block; font-size:22px; font-weight:700; margin-top:47px;}

/*산업혁신운동*/
.busi_inno {width:1100px; margin:0 auto 120px; display:block;}

/*총무수첩 APP*/
#web .section1 {width:100%; height:780px; background: #ededed;}
#web .section1 .img-big {width:640px; margin:0 auto; padding-top:50px; display:block;}    

#web .cm_section2 {width:100%; height:800px; padding-top:50px; box-sizing:border-box; /* background:#bef2f3; */ background:#fff;} 
#web .cm_section2 .center {margin:0 auto; width:1300px; }                   
#web .cm_section2 img:first-child {width:650px; height:auto; display:inline-block; }  
#web .cm_section2 img:last-child {width:543px; display:inline-block; margin:80px 0 0 70px; }          

#web .cm_section3 {padding-top:0px; background:#fff; /* background:#bef2f3; */} 
#web .cm_section3 img {width:1200px; height:auto; display:block; margin:50px auto 50px; }  

/*원단spec 관리시스템, 원단sample 관리시스템, 웹팩스, 기업용 업무일지*/
.etc {width:1100px; margin:0 auto 120px; display:block;}

.diary_wrap {position:relative; width:1150px; margin:0 auto;}
.diary_wrap .etc_dairy {width:1150px; margin:0 auto 120px; display:block;}
.diary_wrap .dairy_go {position:absolute; top:647px; left:calc(50% - 90px); z-index:2;}

/*구축실적*/
.result {width:1100px; margin:50px auto 0; height:1000px; position:relative; }
.result .result_left {position:absolute; left:0; top:50px; display:block;}
.result .result_right {position:absolute; right:0; top:50px; display:block;}
.result .under_wrap {width:950px; margin:0 auto; box-sizing:border-box; height:900px; overflow:hidden;}
.result .under_wrap .result_under {width:13300px; box-sizing:border-box; margin-left:-950px;}
.result .under_wrap .result_under div {width:950px; float:left;}
.result .under_wrap .result_under div img {width:950px;}

/*공지사항*/
.noTitle {text-align:center; font-size:33px; font-weight:900; letter-spacing:0.1em; margin:50px 0 30px 0;}
.table_wrap {width:1000px; margin:35px auto 0; position:relative;}
.table_wrap .notice_table {border-collapse: collapse; width:1000px; font-size:16px;}
.table_wrap .notice_table thead th {border-top:1px solid #b9b9b9; border-bottom:1px solid #b9b9b9; padding:13px 0; font-size:17px; background:#ededed;}
.table_wrap .notice_table tbody td {text-align:center; padding:12px 0; border-bottom:1px solid #b9b9b9;}
.table_wrap .notice_table tbody tr td:nth-child(1) {width:5%;}
.table_wrap .notice_table tbody tr td:nth-child(2) {width:57%;}
.table_wrap .notice_table tbody tr td:nth-child(2) a {display:block; width:520px; margin:0 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.table_wrap .notice_table tbody tr td:nth-child(3) {width:10%;}
.table_wrap .notice_table tbody tr td:nth-child(4) {width:6%;}
.table_wrap .notice_table tbody tr td:nth-child(5) {width:15%;}
.table_wrap .notice_table tbody tr td:nth-child(6) {width:7%;}
.table_wrap .notice_table tbody td img {display:block; width:18px; height:18px; margin:0 auto;}

.table_wrap .num {margin:30px auto 0; width:341px; height:24px;}
.table_wrap .num a {font-size:18px; text-align:center; display:block; float:left; padding:0 9px; width:13px; height:24px; line-height:24px;}
.table_wrap .num a.active {font-weight:bold; color: #037cff; cursor:default}
.table_wrap .write {display:block; width:100px; height:35px; line-height:35px; border:1px solid #000; border-radius:5px; position:absolute; right:0px; bottom:-5px; text-align:center; font-weight:900; font-size:17px; letter-spacing:0.05em;}

.search-area {height: auto; background-color: #fff; text-align: right; padding: 0; width:335px; box-sizing:border-box; overflow:hidden; margin:50px auto 0; }
.reverse {float:right;}
.invisible { overflow: hidden; position: absolute; left: -1000%; top: auto; width: 1px; height: 1px;}
.search-area .search-text {width:245px; border-right:0; font-size:16px; box-sizing:border-box;}
input[type='text'] {height: 48px; padding: 0 20px; border: 1px solid #999;}
.flow {float:left;}
.search-area .btn-search { width: 90px; height: 48px; text-align: center; border: 0; border-radius: 0; border-top-right-radius: 0px; border-bottom-right-radius: 2px; background-color: #484848;}
button {overflow: visible; background: none; border: 0; cursor: pointer;}
.search-area .btn-search span {display: inline-block; padding-left: 20px; color: #fff; letter-spacing: -0.25px; background: url(../images/bg-search-glasses.png) no-repeat 0 50%; position:relative; font-size:16px;}

/*공지사항 보기*/
.show_wrap {width:900px; margin:35px auto 0; position:relative; background:#fff;}
.show_wrap .buy_info {text-align:center; font-size:25px; font-weight:900; margin-bottom:20px;}
.show_wrap .modi {display:block; width:100px; height:35px; line-height:35px; border:1px solid #000; border-radius:5px; position:absolute; right:0px; top:-60px; text-align:center; font-weight:900; font-size:17px; letter-spacing:0.05em;}
.show_wrap .table_show {border-collapse: collapse; width:100%; font-size:16px;}
.show_wrap .table_show th {border:1px solid #b9b9b9; width:15%; padding:19px 0; font-size:17px; background:#ededed;}
.show_wrap .table_show td {border:1px solid #b9b9b9; padding:12px 15px;}
.show_wrap .table_show td.content {line-height:160%; padding:15px 15px; letter-spacing:0.05em;}
.show_wrap .table_show td.sort span {display:inline-block; margin-right:20px;}

.pag_customer {position:relative; margin-bottom:50px;}
.pag_customer .btn_left {position: absolute; top: 24px; left: 5px;}
.pag_customer .btn_left span {display: inline-block; font-size: 17px; padding-left: 17px; padding-top: 2px; background: url(../images/num_pag_left.png) no-repeat 0 0;}
.pag_customer .btn_right {position: absolute; top: 24px; right: 5px;}
.pag_customer .btn_right span {display: inline-block; font-size: 17px; padding-right: 17px; padding-top: 2px; background: url(../images/num_pag_right.png) no-repeat right 0;}
.pag_customer .view_list {padding: 23px 0 0; text-align: center;}
.pag_customer .view_list span {display: inline-block; font-size: 17px; padding-left: 21px; background: url(../images/ico_note6.png) no-repeat 0 center; background-size: 16px 16px; color: #15a2f9; font-weight:900;}

/*공지사항 쓰기*/
.show_wrap .table_write {border-collapse: collapse; width:100%; font-size:16px;}
.show_wrap .table_write th {border:1px solid #b9b9b9; width:15%; padding:12px 0; font-size:17px; background:#ededed;}
.show_wrap .buying th {width:24%;}
.show_wrap .table_write td {border:1px solid #b9b9b9; padding:12px 15px;}
.show_wrap .table_write input {width:100%; height:34px; padding-left:10px; line-height:34px; color:#333; box-sizing:border-box; font-size:16px; border: 1px solid #eaeaea;}
.show_wrap .table_write input::-webkit-input-placeholder{font-size:16px; font-weight:300; color:#999}  
.show_wrap .table_write input::-moz-placeholder{font-size:16px; font-weight:300; color:#999}  

.table_show input{width:100%; height:34px; padding-left:10px; line-height:34px; color:#333; box-sizing:border-box; font-size:16px; border: 1px solid #eaeaea;}
.table_show input::-webkit-input-placeholder{font-size:16px; font-weight:300; color:#999}  
.table_show input::-moz-placeholder{font-size:16px; font-weight:300; color:#999}  
.file_input label {position:relative; display:inline-block; vertical-align:middle; overflow:hidden; width:81px; height:34px; background:#ededed; text-align:center; line-height:34px; box-sizing:border-box}
.file_input label span{font-size:16px;}
.file_input label input[type=file] {position:absolute; width:0; height:0; overflow:hidden; right:-1000px; top:-1000px}
.file_input input[type=text]{vertical-align:middle; display:inline-block; width:calc(100% - 81px); height:34px; line-height:34px; padding-left:10px; font-size:16px; border:0; border:1px solid #eaeaea; box-sizing:border-box}
.table_write .autor {height:59px; padding:0 15px !important; box-sizing:border-box;}
.table_write textarea {width:100%; padding:10px; border: 1px solid #eaeaea; box-sizing:border-box; height:210px; font-size: 16px; line-height: 22px; resize: none;}
/* .show_wrap .buttons {width:215px; margin:30px auto 0;}
.show_wrap .buttons a {display:block; float:left; width:100px; height:35px; line-height:35px; border:1px solid #000; border-radius:5px; box-sizing:border-box; text-align:center; font-weight:900; font-size:17px; letter-spacing:0.05em;}
.show_wrap .buttons a:first-child {margin-right:15px;}
 */
/*결제페이지*/
.show_wrap2 {width:900px; margin:35px auto 0; position:relative; background:#fff;}
.show_wrap2 .table_write {border-collapse: collapse; width:100%; font-size:16px;}
.show_wrap2 .table_write th {border:1px solid #b9b9b9; width:15%; padding:15px 0; font-size:17px; background:#ededed;}
.show_wrap2 .buying th {width:24%;}
.show_wrap2 .table_write td {border:1px solid #b9b9b9; padding:15px 15px;}
.show_wrap2 .buy_info {text-align:center; font-size:25px; font-weight:900; margin-bottom:20px;}
.show_wrap2 button {width:160px; height:50px; line-height:50px; margin:40px auto 0; display:block; border-radius:5px; box-sizing:border-box; text-align:center; font-weight:900; font-size:19px; letter-spacing:0.05em; border:1px solid #199cf4; background:#199cf4; color:#fff;}


/*상담문의*/
.quest_title {position:relative; width:900px; margin:0 auto;}
.quest_title .quest_list {display:block; width:150px; height:35px; line-height:35px; border:1px solid #000; border-radius:5px; position:absolute; right:0px; top:7px; text-align:center; font-weight:900; font-size:17px; letter-spacing:0.05em;}
.quest {width:900px; margin:35px auto 50px; position:relative; overflow:hidden;}
.quest .warn {font-size:16px; padding-left:17px; background: url(../images/check.png) no-repeat 0 1px; position:absolute; right:0; top:-40px;}
.quest .table_qa {border-collapse: collapse; width:100%; font-size:16px;}
.quest .table_qa th {border:1px solid #ddd; width:15%; padding:12px 0; background:#f7f7f7; border-left:none;}
.quest .table_qa th span{font-size:17px; padding-left:15px; background: url(../images/check.png) no-repeat 0 2px; background-size:12px auto;}
.quest .table_qa td {border:1px solid #ddd; padding:12px 15px; border-right:none;}
.quest .table_qa tr:first-child th {border-top:1px solid #333;}
.quest .table_qa tr:first-child td {border-top:1px solid #333;}
.quest .table_qa tr:last-child th {border-bottom:1px solid #333;}
.quest .table_qa tr:last-child td {border-bottom:1px solid #333;}
.quest .table_qa .put {height:34px; padding-left:10px; line-height:34px; color:#333; box-sizing:border-box; font-size:16px; border: 1px solid #eaeaea;}
.quest .table_qa .firm {width:30%;}
.quest .table_qa .man {width:30%;}
.quest .table_qa .mail {width:25%;}
.quest .table_qa .at {padding:0 5px;}
.quest .table_qa .title {width:100%;}
.quest .table_qa select {display:inline-block; width:25%; margin-left:8px; -webkit-appearance: none; background: #fff url(../images//ico_arrow1.png) no-repeat right 5px center; background-size: 12px 7px;}
.quest .table_qa input::-webkit-input-placeholder{font-size:16px; font-weight:300; color:#999}  
.quest .table_qa input::-moz-placeholder{font-size:16px; font-weight:300; color:#999}  
.quest .table_qa td.phone input {width:15%; height:34px; padding-left:10px; line-height:34px; color:#333; box-sizing:border-box; font-size:16px; border: 1px solid #eaeaea;}
.quest .table_qa td.phone span {padding:0 5px;}
.quest .table_qa .autor {height:59px; padding:0 15px !important; box-sizing:border-box;}
.quest .table_qa textarea {width:100%; padding:10px; border: 1px solid #eaeaea; box-sizing:border-box; height:210px; font-size: 16px; line-height: 22px; resize: none;}
.quest .table_qa .consult div {float:left; box-sizing:border-box; margin-right:30px;}
.quest .table_qa .consult div span:first-child {height:34px; line-height:34px; display:block; position:relative; box-sizing:border-box; float:left; margin-right:8px;}
.btn_delete {position:relative; width:18px; height:34px; display:block; box-sizing:border-box; float:left;}
.btn_delete label {width:20px; height:20px; position:absolute; top:0; bottom:0; right:0; left:0; margin:auto; display:inline-block; 
                       cursor:pointer; 
                       background:url(../images/check4-small.png) no-repeat center;
                       background-size:20px 20px;}
.btn_delete input[type="checkbox"]:checked + label {
                       background:url(../images/check3-small-on.png) no-repeat center; background-size:20px 20px;
                       }
.btn_delete input[type="checkbox"] {display:none;}
.quest .personal_title {font-weight:900; font-size:20px; margin:30px 0 10px 5px;}
.quest .personal {width:100%; padding:10px; box-sizing:border-box; border:1px solid #ddd; font-size:15px; line-height:150%;}
.quest .personal p:nth-child(1) {margin-bottom:10px;}
.quest .personal p:nth-child(2) {margin-bottom:10px;} 
.quest .personal_check {float:right; margin:10px 0;}
.quest .personal_check span:last-child {margin-left:8px; display:block; float:left; height:34px; line-height:34px;}
.quest .buttons {width:275px; margin:70px auto 0; padding-bottom:50px;}
.quest .buttons a {display:block; float:left; width:130px; padding:10px 0; border:1px solid #999; border-radius:5px; box-sizing:border-box; text-align:center; font-weight:700; font-size:17px; letter-spacing:0.05em; color:#858585;}
.quest .buttons a:first-child {margin-right:15px;}
.quest .buttons a:last-child {border:1px solid #199cf4; background:#199cf4; color:#fff;}

/*상담내역 리스트*/
.table_wrap .qulist_table {border-collapse: collapse; width:1000px; font-size:16px;}
.table_wrap .qulist_table thead th {border-top:1px solid #b9b9b9; border-bottom:1px solid #b9b9b9; padding:13px 0; font-size:17px; background:#ededed;}
.table_wrap .qulist_table tbody td {text-align:center; padding:12px 0; border-bottom:1px solid #b9b9b9;}
.table_wrap .qulist_table tbody tr td:nth-child(1) {width:5%;}
.table_wrap .qulist_table tbody tr td:nth-child(2) {width:54%;}
.table_wrap .qulist_table tbody tr td:nth-child(2) a {display:block; width:520px; margin:0 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.table_wrap .qulist_table tbody tr td:nth-child(3) {width:12%;}
.table_wrap .qulist_table tbody tr td:nth-child(4) {width:12%;}
.table_wrap .qulist_table tbody tr td:nth-child(5) {width:6%;}
.table_wrap .qulist_table tbody tr td:nth-child(6) {width:11%;}
.table_wrap .qulist_table tbody td img {display:block; width:18px; height:18px; margin:0 auto;}
.table_wrap .qulist_table tbody td span {display:block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width:105px; margin:0 auto;}

/*자료실 상세보기 사진들*/
.show_wrap .table_show td.datum {padding:25px 15px;}
.show_wrap .table_show td.datum img {display:block; max-width:100%; width:100%; margin:0 auto;}
.show_wrap .table_show td.datum span {display:block; text-align:center; font-size:16px; padding:15px 0;}

/*온라인 구매*/
.table_wrap {width:1000px; margin:35px auto 0; position:relative;}
.table_wrap .online_table {border-collapse: collapse; width:1000px; font-size:17px;}
.table_wrap .online_table thead th { padding:17px 0; font-size:20px; background:#e0eaff; border-top:2px solid #c2c2c2; border-bottom:2px solid #c2c2c2;}
.table_wrap .online_table tbody td {text-align:center; padding:18px 0; border-bottom:1px dashed #cacaca;}
.table_wrap .online_table tbody tr:last-child td {border-bottom:2px solid #cbcbcb;}
.table_wrap .online_table tbody tr td:nth-child(1) {width:20%;}
.table_wrap .online_table tbody tr td:nth-child(2) {width:20%;}
.table_wrap .online_table tbody tr td:nth-child(3) {width:20%;}
.table_wrap .online_table tbody tr td:nth-child(4) {width:20%;}
.table_wrap .online_table tbody tr td:nth-child(5) {width:20%;}
.table_wrap .online_table tbody tr td:nth-child(5) a {color:#e12f29; font-weight:900; border:2px solid #e12f29; border-radius:5px; padding:6px 9px;}
.table_wrap .online_table tbody td img {display:block; width:18px; height:18px; margin:0 auto;}
.table_wrap .tax {float:right; color:#e12f29; font-size:17px; font-weight:700; margin-top:15px;}

.bg-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0 ,0.8); display: none; z-index:39;}

/*상담원 원격연결*/
.remote_wrap {width:1150px; height:600px; margin:0 auto; background:url(../images/remote_bg4.png) no-repeat center;}
.remote_wrap .adviser {width:fit-content; margin:0 auto; overflow:hidden; padding-top:20px;}
.remote_wrap .adviser a {display:block; float:left; width:100%; font-size:20px; font-weight:bold; text-align:center;}
/* .remote_wrap .adviser a:nth-child(1) {margin-right:45px; background:url(../images/person3.png) no-repeat center;} */
.remote_wrap .adviser a:nth-child(2) {margin-right:45px; background:url(../images/person2.png) no-repeat center;}
.remote_wrap .adviser a:nth-child(3) {margin-right:45px; background:url(../images/person3.png) no-repeat center;}
.remote_wrap .adviser a:nth-child(4) {background:url(../images/person4.png) no-repeat center;}
.remote_wrap .connet_wrap {width:1050px; margin:95px auto 80px; padding-top:60px;}
.remote_wrap .connet_wrap p {text-align:center; font-size:26px; font-weight:900; margin-bottom:35px;}
.remote_wrap .connet_wrap .connect {overflow:hidden; width:30%; margin:0 auto;}
.remote_wrap .connet_wrap .connect a {display:block; float:left; margin-right:30px;}
.remote_wrap .connet_wrap .connect a:last-child {margin-right:0px; }

/*결제 성공*/
.pay {margin-top:103px;}
.pay .pay_result {padding-top:80px;}
.pay .pay_result p {text-align:center; }
.pay .pay_result p span {font-size:30px; font-weight:900; height:70px; line-height:70px; display:inline-block;}
.pay .pay_result p .ok {background:url(../images/icon_money_complete.png) no-repeat left center; background-size:50px auto; padding-left:60px;}
.pay .pay_result p .fail {background:url(../images/pay_fail.png) no-repeat left center; background-size:45px auto; padding-left:55px;}
.quest2 {width:700px; margin:35px auto 50px; position:relative; overflow:hidden;}
.quest2 .table_qa2 {border-collapse: collapse; width:100%; font-size:16px; margin-top:110px;}
.quest2 .table_qa2 caption {text-align:left; font-size:20px; font-weight:700; padding:0 0 15px 20px;}
.quest2 .table_qa2 th {border:1px solid #ddd; width:27%; padding:16px 0; background:#f7f7f7; border-left:none; font-size:18px;}
.quest2 .table_qa2 td {border:1px solid #ddd; padding:16px 25px; border-right:none;}
.quest2 .table_qa2 tr:first-child th {border-top:1px solid #333;}
.quest2 .table_qa2 tr:first-child td {border-top:1px solid #333;}
.quest2 .table_qa2 tr:last-child th {border-bottom:1px solid #333;}
.quest2 .table_qa2 tr:last-child td {border-bottom:1px solid #333;}
.quest2 a {width:140px; height:45px; line-height:45px; margin:50px auto 0; display:block; border-radius:5px; box-sizing:border-box; text-align:center; font-weight:700; font-size:17px; letter-spacing:0.05em; border:1px solid #199cf4; background:#199cf4; color:#fff;}

/*결제처리중*/
.paying img {width:100px; height:auto; display:block; margin:70px auto 0;}
.paying p {text-align:center; margin-top:40px; font-size:24px; font-weight:700; }

/*메인 페이지 푸터*/
.main_footer {width:100%; height:110px; font-size:13px;}
.main_footer .footer_wrap {width:1000px; height:110px; box-sizing:border-box; margin:0 auto; position:relative;}
.main_footer img {display:block; margin-top:5px; float:left;}
.main_footer .footer_wrap .footer_left {width:975px; box-sizing:border-box; height:110px; padding-top:30px; position:absolute; top:0px; left:0; z-index:3;}
.main_footer .footer_wrap .footer_left .group1 {float:left;}
.main_footer .footer_wrap .footer_left .group2 {float:right;}
.main_footer .footer_wrap .footer_left .group2 div {margin-bottom:5px;}
.main_footer .footer_wrap .footer_left .group2 .line1 span:nth-child(1) {padding-right:10px; border-right:1px solid #949494;}
.main_footer .footer_wrap .footer_left .group2 .line1 span:nth-child(2) {padding-left:8px; padding-right:10px; border-right:1px solid #949494;}
.main_footer .footer_wrap .footer_left .group2 .line1 span:nth-child(3) {padding-left:8px;}
.main_footer .footer_wrap .login_btn {display:block; width:60px; height:27px; line-height:27px; text-align:center; border:1px solid #5c5c5c; border-radius:3px; font-size:15px; z-index:4; position:absolute; top:25px; right:10px; background:#fff;}
.main_footer .footer_wrap .logout_btn {display:block; width:70px; height:27px; line-height:27px; text-align:center; border:1px solid #5c5c5c; border-radius:3px; font-size:15px; z-index:4; position:absolute; top:25px; right:10px; background:#fff;}
.main_footer .footer_wrap .ground {position:absolute; top:0px; right:-200px; background:#fff; width:325px; height:110px; z-index:2;}
.main_footer .footer_wrap .login_box {width:325px; height:110px; background:#dddddd; position:absolute; top:0px; right:-200px; border:1px solid #cbcbcb; z-index:1; box-sizing:border-box;}  
.main_footer .footer_wrap .login_box .idWrap { border-collapse:collapse; width:94%; margin:10px auto 0;}
.main_footer .footer_wrap .login_box .idWrap td { background:#fff;}
.main_footer .footer_wrap .login_box .idWrap td input {width:100%; height:43px; font-size:15px; border:none; padding-left:15px; box-sizing:border-box;}
.main_footer .footer_wrap .login_box .idWrap td input[type="text"] {border-bottom:1px solid #d5d9e0;}
.main_footer .footer_wrap .login_box .idWrap td.left_td {width:70%; box-sizing:border-box;}
.main_footer .footer_wrap .login_box .idWrap td.btn {background:#767d86; border:1px solid #767d86; width:30%; box-sizing:border-box;}
.main_footer .footer_wrap .login_box .idWrap td.btn button {background:#767d86; width:100%; height:100%; font-size:17px; letter-spacing:0.15em; font-weight:bold; color:#fff; border:none;}

/*서브페이지들 푸터*/
.com_footer {width:100%; height:110px; font-size:13px; background:#eeeeee;}
.com_footer .footer_wrap {width:970px; height:110px; box-sizing:border-box; margin:0 auto; padding-top:30px;}
.com_footer .footer_wrap .group1 {float:left;}
.com_footer .footer_wrap .group2 {float:right;}
.com_footer .footer_wrap .group2 div {margin-bottom:5px;}
.com_footer .footer_wrap .group2 .line1 span:nth-child(1) {padding-right:10px; border-right:1px solid #949494;}
.com_footer .footer_wrap .group2 .line1 span:nth-child(2) {padding-left:8px; padding-right:10px; border-right:1px solid #949494;}
.com_footer .footer_wrap .group2 .line1 span:nth-child(3) {padding-left:8px;}

/*메인페이지 스마트공장*/
.section1 .slideWrap ul .num2 {
	 font-family: 'Noto Sans KR', sans-serif;
     background: transparent;
     overflow: hidden;
}

.banner-container {
    width: 1920px;
    height: 800px;
    position: relative;
    background: linear-gradient(135deg, 
        #0a0a1a 0%, 
        #1a1a3e 25%, 
        #2d4a7d 50%, 
        #4a7bb7 75%, 
        #6bb6ff 100%);
    overflow: hidden;
}

/* 배경 애니메이션 요소들 */
.bg-elements {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.circuit-pattern {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 20% 20%, rgba(0, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(0, 255, 128, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 40% 70%, rgba(255, 0, 255, 0.1) 0%, transparent 50%);
    animation: pulse 4s ease-in-out infinite;
}

.hexagon-pattern {
    position: absolute;
    width: 120%;
    height: 120%;
    left: -10%;
    top: -10%;
    background-image: 
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2300FFFF' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    animation: float 8s ease-in-out infinite;
}

.data-stream {
    position: absolute;
    width: 2px;
    height: 100px;
    background: linear-gradient(to bottom, transparent, #00ffff, transparent);
    animation: stream 3s linear infinite;
}

.data-stream:nth-child(1) { left: 10%; animation-delay: 0s; }
.data-stream:nth-child(2) { left: 30%; animation-delay: 1s; }
.data-stream:nth-child(3) { left: 50%; animation-delay: 2s; }
.data-stream:nth-child(4) { left: 70%; animation-delay: 0.5s; }
.data-stream:nth-child(5) { left: 90%; animation-delay: 1.5s; }

/* 메인 콘텐츠 */
.content-wrapper {
    position: relative;
    z-index: 10;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 80px;
}

.left-content {
    flex: 1;
    max-width: 800px;
}

.company-badge {
    display: inline-block;
    background: linear-gradient(45deg, #00ffff, #0080ff);
    color: #000;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 15px rgba(0, 255, 255, 0.3);
}

.main-title {
    font-size: 48px;
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 20px;
    color: #ffffff;
}

.main-title .glow {
    background: linear-gradient(45deg, #ffffff, #00ffff, #ffffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 30px rgba(0, 255, 255, 0.5);
    display: inline-block;
}

.sub-title {
    font-size: 24px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 30px;
    opacity: 0.9;
}

.feature-list {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 40px;
}

.feature-tag {
    background: rgba(0, 255, 255, 0.1);
    border: 1px solid rgba(0, 255, 255, 0.3);
    color: #00ffff;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    backdrop-filter: blur(10px);
}

.right-content {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 100%;
}

/* 새로운 스마트팩토리 비주얼 */
.smart-factory-visual {
    width: 600px;
    height: 500px;
    position: relative;
    perspective: 1000px;
}

/* 공장 건물 실루엣 */
.factory-building {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: 400px;
    height: 200px;
}

.building {
    position: absolute;
    background: linear-gradient(45deg, rgba(0, 255, 255, 0.1), rgba(0, 128, 255, 0.2));
    border: 2px solid rgba(0, 255, 255, 0.4);
    border-radius: 4px;
}

.building-1 {
    width: 80px;
    height: 120px;
    left: 0;
    bottom: 0;
}

.building-2 {
    width: 120px;
    height: 160px;
    left: 70px;
    bottom: 0;
}

.building-3 {
    width: 100px;
    height: 140px;
    left: 180px;
    bottom: 0;
}

.building-4 {
    width: 90px;
    height: 100px;
    left: 270px;
    bottom: 0;
}

/* 공장 창문 */
.window {
    position: absolute;
    width: 12px;
    height: 12px;
    background: rgba(0, 255, 255, 0.6);
    border-radius: 2px;
    animation: window-blink 3s ease-in-out infinite;
}

.building-1 .window:nth-child(1) { top: 20px; left: 15px; }
.building-1 .window:nth-child(2) { top: 20px; right: 15px; }
.building-1 .window:nth-child(3) { top: 50px; left: 15px; }
.building-1 .window:nth-child(4) { top: 50px; right: 15px; }

.building-2 .window:nth-child(1) { top: 30px; left: 20px; }
.building-2 .window:nth-child(2) { top: 30px; left: 50px; }
.building-2 .window:nth-child(3) { top: 30px; right: 20px; }
.building-2 .window:nth-child(4) { top: 70px; left: 20px; }
.building-2 .window:nth-child(5) { top: 70px; left: 50px; }
.building-2 .window:nth-child(6) { top: 70px; right: 20px; }

/* 데이터 네트워크 레이어 */
.data-network {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 중앙 허브 */
.central-hub {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background: linear-gradient(45deg, #00ffff, #0080ff);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 
        0 0 40px rgba(0, 255, 255, 0.6),
        inset 0 0 20px rgba(255, 255, 255, 0.2);
    animation: hub-pulse 2s ease-in-out infinite;
    z-index: 10;
}

.central-hub::before {
    content: 'SMART';
    font-family: 'Orbitron', monospace;
    font-size: 14px;
    font-weight: 900;
    color: #000;
}

/* 기술 노드들 - 체계적 배치 */
.tech-node {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #000;
    backdrop-filter: blur(10px);
    animation: node-float 4s ease-in-out infinite;
}

.node-mes {
    top: 10%;
    right: 20%;
    background: linear-gradient(45deg, #ff6b6b, #feca57);
    box-shadow: 0 0 30px rgba(255, 107, 107, 0.5);
    animation-delay: 0s;
    z-index: 20;
}

.node-erp {
    top: 30%;
    left: 15%;
    background: linear-gradient(45deg, #48cae4, #0096c7);
    box-shadow: 0 0 30px rgba(72, 202, 228, 0.5);
    animation-delay: 1s;
}

.node-iot {
    bottom: 30%;
    right: 15%;
    background: linear-gradient(45deg, #06ffa5, #00d4aa);
    box-shadow: 0 0 30px rgba(6, 255, 165, 0.5);
    animation-delay: 2s;
}

.node-pop {
    bottom: 15%;
    left: 25%;
    background: linear-gradient(45deg, #a855f7, #7c3aed);
    box-shadow: 0 0 30px rgba(168, 85, 247, 0.5);
    animation-delay: 3s;
}

/* 연결선 */
.connection {
    position: absolute;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.6), transparent);
    height: 2px;
    transform-origin: left;
    animation: data-flow 3s ease-in-out infinite;
}

.connection-1 {
    top: 23%;
    left: 48%;
    width: 150px;
    transform: rotate(25deg);
}

.connection-2 {
    top: 32%;
    left: 25%;
    width: 140px;
    transform: rotate(-15deg);
    animation-delay: 0.8s;
}

.connection-3 {
    bottom: 32%;
    left: 48%;
    width: 120px;
    transform: rotate(-25deg);
    animation-delay: 1.6s;
}

.connection-4 {
    bottom: 22%;
    left: 35%;
    width: 100px;
    transform: rotate(15deg);
    animation-delay: 2.4s;
}

/* 홀로그램 인터페이스 */
.holo-interface {
    position: absolute;
    top: 15%;
    right: 10%;
    width: 120px;
    height: 80px;
    border: 2px solid rgba(0, 255, 255, 0.4);
    border-radius: 8px;
    background: rgba(0, 255, 255, 0.05);
    backdrop-filter: blur(10px);
}

.holo-line {
    position: absolute;
    height: 1px;
    background: rgba(0, 255, 255, 0.6);
    left: 10px;
    right: 10px;
    animation: holo-scan 2s linear infinite;
}

.holo-line:nth-child(1) { top: 15px; animation-delay: 0s; }
.holo-line:nth-child(2) { top: 25px; animation-delay: 0.2s; }
.holo-line:nth-child(3) { top: 35px; animation-delay: 0.4s; }
.holo-line:nth-child(4) { top: 45px; animation-delay: 0.6s; }
.holo-line:nth-child(5) { top: 55px; animation-delay: 0.8s; }

/* 데이터 입자 효과 */
.data-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(0, 255, 255, 0.8);
    border-radius: 50%;
    animation: particle-flow 4s linear infinite;
}

.particle-1 { top: 20%; left: 80%; animation-delay: 0s; }
.particle-2 { top: 40%; left: 85%; animation-delay: 1s; }
.particle-3 { top: 60%; left: 75%; animation-delay: 2s; }
.particle-4 { top: 80%; left: 80%; animation-delay: 3s; }

/* 애니메이션 */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

@keyframes stream {
    0% { transform: translateY(-100px); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(800px); opacity: 0; }
}

@keyframes hub-pulse {
    0%, 100% { 
        transform: translate(-50%, -50%) scale(1);
        box-shadow: 0 0 40px rgba(0, 255, 255, 0.6);
    }
    50% { 
        transform: translate(-50%, -50%) scale(1.1);
        box-shadow: 0 0 60px rgba(0, 255, 255, 0.8);
    }
}

@keyframes node-float {
    0%, 100% { transform: translateY(0px) scale(1); }
    50% { transform: translateY(-15px) scale(1.1); }
}

@keyframes data-flow {
    0% { opacity: 0; transform: scaleX(0); }
    20% { opacity: 1; }
    80% { opacity: 1; transform: scaleX(1); }
    100% { opacity: 0; transform: scaleX(1); }
}

@keyframes window-blink {
    0%, 90% { opacity: 0.6; }
    95%, 100% { opacity: 1; }
}

@keyframes holo-scan {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes particle-flow {
    0% { 
        transform: translateY(0px) translateX(0px);
        opacity: 0;
    }
    10% { opacity: 1; }
    50% { 
        transform: translateY(-200px) translateX(-100px);
        opacity: 1;
    }
    90% { opacity: 1; }
    100% { 
        transform: translateY(-400px) translateX(-200px);
        opacity: 0;
    }
}

/* 글로우 효과 */
.glow {
    filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.7));
}