@charset "utf-8";
/* doc.css는 디자인페이지 스타일을 정의합니다. */
/* company-01 CEO인사말 */
.greeting-bg {height:520px; background-image:url('../images/sub/greeting_bg.jpg'); background-position:center; background-size:cover; background-repeat:no-repeat; position:relative;}
.greeting h3 {font-size:60px; color:#fff; opacity:0.4; font-weight:700; letter-spacing:.500em; line-height:1.2em; position:absolute; top:45%; left:0; width:100%; text-align:center;}
.greeting h3 span {letter-spacing:0;}
.greeting .txt-box {margin-top:-225px; padding:100px 30px; border-radius:10px; background:#fff; box-shadow:2px 10px 15px 0px rgba(0,0,0,0.1); text-align:center; position:relative; overflow:hidden;}
.greeting .txt-box p {font-size:20px; color:#505050; line-height:1.9em; margin-bottom:40px; font-weight:400;}
.greeting .txt-box span {position:absolute; opacity:0.2; background-repeat:no-repeat; background-size:cover; background-position:center;}
.greeting .txt-box .icon01 {background-image:url('../images/sub/greeting_icon01.png'); width:167px; height:146px; bottom:49px; left:-12px;}
.greeting .txt-box .icon02 {background-image:url('../images/sub/greeting_icon02.png'); width:177px; height:154px; top:22px; right:52px;}
.greeting .txt-box .icon03 {background-image:url('../images/sub/greeting_icon03.png'); width:49px; height:42px; bottom:49px; right:58px;}
/* company-02 연혁 */
.history-bg {height:340px; background-image:url('../images/sub/history_bg.jpg'); background-position:center; background-size:cover; background-repeat:no-repeat; position:relative;}
.history h3 {font-size:100px; color:#fff; opacity:0.1; font-weight:700; letter-spacing:1.680em; line-height:1em; position:absolute; top:50%; left:0; transform:translateY(-50%); width:100%; text-align:center;}
.history h3 span {letter-spacing:0;}
.history .tit {background-image:url('../images/sub/history_tit.png'); width:227px; height:212px; position:relative; color:#fff; text-align:center; margin:-90px auto -10px; background-repeat:no-repeat; background-size:cover;}
.history .tit h4 {font-size:50px; font-weight:700; letter-spacing:.120em; line-height:1.1em; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}
.history .tit h4 span {font-size:20px; font-weight:400; line-height:1.3em; letter-spacing:.440em; display:block;}
.history .row {position:relative; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; padding-top:50px;}
.history .row .col {position:relative; width:50%;}
/* .history .row:nth-child(even) .col {padding-left:30px;}
.history .row:nth-child(odd) .col {padding-right:30px;}
.history .row:nth-child(even) {text-align:left; flex-direction:row-reverse;}
.history .row:nth-child(odd) {text-align:right;}
.history .row .col:first-child:before {content:""; position:absolute; z-index:1; top:16px; transform:translateY(-50%); right:-13px; width:26px; height:30px; background-image:url('../images/sub/year_tit.png'); background-repeat:no-repeat; background-size:cover;} */
.history .row.right .col:first-child:before {left:-12px; right:auto;}
.history .row.right .col {padding-left:30px;}
.history .row.left .col {padding-right:30px;}
.history .row.right {text-align:left; flex-direction:row-reverse;}
.history .row.left {text-align:right;}
.history .row .col:first-child:before {content:""; position:absolute; z-index:1; top:16px; transform:translateY(-50%); right:-13px; width:26px; height:30px; background-image:url('../images/sub/year_tit.png'); background-repeat:no-repeat; background-size:cover;}
.history .row:nth-child(even) .col:first-child:before {left:-12px; right:auto;}
.history .row:after {content:""; position:absolute; top:10px; left:50%; width:1px; height:100%; background:#ddd; z-index:0;}
.history .row .col .year {position:relative; font-size:26px; font-weight:700; line-height:1.2em; margin-bottom:20px; color:#2c2c2c;}
.history .row .col ul {display:inline-block}
.history .row .col ul li {font-size:18px; font-weight:400; color:#797979; line-height:2.1em; padding-left:14px;}
.history .row .col ul li:before {content:""; width:4px; height:4px; display:inline-block; vertical-align:top; margin-right:7px; position:relative; top:16px; background:#c9161d;}
.history .row:last-child:after {height:30%;}
/* company-03 조직도 */
/* .organization .pic {position:relative; height:0; padding-bottom:67.584%; overflow:hidden;}
.organization .pic.only-mobile {padding-bottom:180%;}
.organization .pic img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100% !important; height:100% !important; max-width:100%; min-height:100%; object-fit:cover; transition:0.3s;} */
/* company-04 수상 인증 */
.awarded .wrap ul {display:flex;}
.awarded .wrap ul li {position:relative; box-shadow:2px 10px 15px 0px rgba(0,0,0,0.1);}
.awarded01 {margin-bottom:30px;}
.awarded01 ul {margin-left:-43px;}
.awarded01 ul li {width:25%; margin-left:43px;}
.awarded02 {margin-bottom:50px; padding-bottom:50px; border-bottom:1px solid #dfdfdf;}
.awarded02 ul {margin-left:-32px;}
.awarded02 ul li {width:33.33333%; margin-left:32px;}
.awarded03 ul {margin-left:-32px; margin-bottom:-40px; flex-wrap:wrap;}
.awarded03 ul li {width:33.33333%; padding-left:32px; margin-bottom:40px; position:relative;}
.awarded03 ul li p {font-size:18px; font-weight:400; color:#fff; line-height:1.4em; position:absolute; bottom:20px; left:0; z-index:1; width:calc(100% + 32px); text-align:center;}
/* company-05 오시는길 */
.directions-bg {height:520px; background-image:url('../images/sub/directions_bg.jpg'); background-position:center; background-size:cover; background-repeat:no-repeat; position:relative;}
.directions h3 {font-size:60px; color:#fff; opacity:0.5; font-weight:700; letter-spacing:.500em; line-height:1em; position:absolute; top:38%; left:0; width:100%; text-align:center;}
.directions h3 span {letter-spacing:0;}
.directions .map-box {padding:100px; border-radius:10px; box-shadow:2px 10px 15px 0px rgba(0,0,0,0.1); margin-top:-265px; position:relative; background:#fff;}
.directions .map-box .map {margin-bottom:40px;}
.root_daum_roughmap {width:100% !important; height:420px !important;}
.root_daum_roughmap .wrap_map {height:420px !important;}
.roughmap_lebel_text {line-height:0 !important; font-size:0 !important;}
.roughmap_lebel_text:after {content:"제이큐브데이터"; font-size:12px; line-height:15px;}
.directions .map-box ul {display:flex; margin-left:-43px;}
.directions .map-box ul li {width:33.333333%; margin-left:43px; padding:30px 40px; border:1px solid #dfdfdf;  box-shadow:2px 5px 5px 0px rgba(0,0,0,0.15);}
.directions .map-box ul li h4 {font-size:20px; margin-bottom:26px; font-weight:700; line-height:1.2em; color:#2c2c2c; padding-left:40px; position:relative; font-family:'NanumSquare';}
.directions .map-box ul li h4:before {content:""; width:26px; height:30px; background:url('../images/sub/contact_tit.png') no-repeat; position:absolute; top:-4px; left:0; background-size:cover;}
.directions .map-box ul li p {font-size:18px; font-weight:400; line-height:1.556em; color:#505050;}
/* business common */
.business {position:relative;}
.business .tit-bg {height:324px; background-position:center; background-size:cover; background-repeat:no-repeat;}
.business .tit {display:flex; padding:50px; margin:-50px 100px 50px; background:#fff;  position:relative;}
.business .tit h3 {font-size:50px; padding-top:25px; padding-left:22px; margin-right:50px; font-weight:800; letter-spacing:.180em; line-height:1.1em; color:#2c2c2c; font-family:'NanumSquare'; position:relative;}
.business .tit h3:before {content:""; width:12px; height:14px; background-image:url('../images/sub/business_tit_icon.png'); background-size:cover; background-repeat:no-repeat; position:absolute; top:0; left:0;}
.business .tit h3 strong {font-size:24px; display:block; font-weight:700; letter-spacing:-.04em; line-height:1.2em;}
.business .tit h3 span {letter-spacing:0;}
.business .tit p {font-size:18px; font-weight:300; line-height:1.556em; color:#797979;}
.business .cnt h4 {font-size:40px; font-weight:800; line-height:1.2em; color:#2c2c2c; font-family:'NanumSquare'; text-align:center;}
.business .cnt ul {display:flex; margin-left:-20px;}
.business .cnt ul li {font-size:18px; padding:50px 0; line-height:1.556em; font-weight:300; margin-left:20px; background:#fff; border:1px solid #dfdfdf; color:#2c2c2c; text-align:center; position:relative;}
.business .cnt ul li:before {content:""; width:40px; height:39px; background-image:url('../images/sub/business_cnt_icon.png'); background-repeat:no-repeat; background-size:cover; position:absolute; top:-20px; left:50%; transform:translateX(-50%);}
.business .cnt ul li span {color:#ffa415;}
/* business-01 NI사업 */
.network .tit {margin-bottom:100px;}
.network .tit-bg {background-image:url('../images/sub/network01.jpg');}
.network .tit:after {content:""; background-image:url('../images/sub/network_line.png'); background-repeat:no-repeat; width:4px; height:54px; position:absolute; bottom:-55px; left:50%; transform:translateX(-50%);}
.network .img-box {padding-bottom:100px; margin-bottom:60px; border-bottom:1px dashed #dfdfdf;}
.network .img-box .pic {position:relative; height:0; padding-bottom:51.5%; overflow:hidden;}
.network .img-box .pic:after {content:""; position: absolute; width:100%; height:100%; top:0; left:0; border:1px solid #dfdfdf;}
.network .img-box .pic img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100% !important; height:100% !important; max-width:100%; min-height:100%; object-fit:cover; transition:0.3s;}
.network .cnt h4 {margin-bottom:60px;}
.network .cnt ul li {width:25%;}
/* business-02 SI사업 */
.system .tit-bg {background-image:url('../images/sub/system01.jpg');}
.system .tit {align-items:center; }
.system .cnt01 {padding-top:70px; margin-bottom:80px; border-top:1px dashed #dfdfdf;}
.system .cnt h4 {margin-bottom:70px;}
.system .cnt h4 span {font-weight:400;}
.system .cnt01 ul li {width:25%;}
.system .cnt02 ul li {width:33.33333%;}
.system .wrap {background:#fafafa; padding:70px 0 80px; margin-bottom:-100px;}
/* business-03 협력사 */
.cooperation ul {display:flex; flex-wrap:wrap; margin-bottom:-70px;}
.cooperation ul li {width:calc(50% - 80px); position:relative; margin-bottom:170px;}
.cooperation ul li:nth-child(odd) {margin-right:80px;}
.cooperation ul li:nth-child(even) {margin-left:80px;}
.cooperation ul li .pic {position:relative; height:0; padding-bottom:76.924%; overflow:hidden;}
.cooperation ul li .pic img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100% !important; height:100% !important; max-width:100%; min-height:100%; object-fit:cover; transition:0.3s;}
.cooperation ul li .visit {display:none;}
.cooperation ul li:after{content:""; position:absolute; bottom:0; left: 0; width:73%; height:17.5%; background:#fff;}
.cooperation ul li .visit span {font-size:18px; font-weight:300; line-height:48px; color:#fff; padding:0 40px; position:absolute; border:1px solid #fff; top:140px; left:50%; transform:translateX(-50%);}
.cooperation ul li:hover .visit {display:block; position:absolute; top:0; height:0; width:100%; height:100%; background:rgba(201,22,29,0.7);}
.cooperation ul li .tit {position:absolute; bottom:-70px; left:50px; z-index:1;} 
.cooperation ul li .tit h3 {font-size:26px; font-weight:700; line-height:1.2em; color:#2c2c2c; font-family:'NanumSquare'; margin-bottom:16px;}
.cooperation ul li .tit p {font-size:16px; font-weight:300; line-height:1.625em; color:#797979;}
/* product common */
.product h3 {font-size:24px; font-weight:700; line-height:1.1em; margin-bottom:20px; font-family:'NanumSquare';}
.product p {font-size:18px; font-weight:300; line-height:1.5em; color:#797979;}
.product .tit-bg {height:300px; background-position:center; background-size:cover; background-repeat:no-repeat;}
.product .tit {font-size:34px; font-weight:700; color:#2c2c2c; background:#fff; line-height:100px; text-align:center; margin:-100px 100px 22px; font-family:'NanumSquare';}
.product .cnt {margin-bottom:75px;}
.product .box {margin:0 150px;}
.product-more {text-align:center;}
.product-more a {font-size:18px; font-weight:300; line-height:50px; color:#fff; background:#c9161d; padding:0 90px 0 28px; display:inline-block; position:relative;}
.product-more a:after {content:""; width:40px; height:6px; background-image:url('../images/sub/product_more.png'); position:absolute; right:30px; top:50%; transform:translateY(-50%); background-repeat:no-repeat; background-size:cover;}

/* product-01 Exterem  */
.extreme .tit-bg {background-image:url('../images/sub/extreme01.jpg');}
.extreme .cnt ul {display:flex;}
.extreme .cnt ul li {width:33.33333%; text-align:center; position:relative; padding:0 10px;}
.extreme .cnt ul li:after {content:""; width:1px; height:120px; background:#dfdfdf; position:absolute; top:50%; margin-top:-60px; right:0;}
.extreme .cnt ul li:last-child:after {display: none;}
.extreme .cnt ul li .pic {margin-bottom:20px;}
.extreme .cnt ul li h3 {color:#7a2d7b; margin-bottom:12px;}
.extreme .wrap {background:#fafafa; padding:70px 0 90px; margin-bottom:100px;}
.extreme .wrap .cnt h2 {font-size:34px; margin-bottom:50px; font-weight:700; line-height:1.2em; color:#2c2c2c; text-align:center; font-family:'NanumSquare';}
.extreme .wrap .cnt {margin-bottom:0;}
.extreme .wrap .cnt ul {margin:0 100px;}
/* product-02 Giagamon  */
.giagamon .tit-bg {background-image:url('../images/sub/giagamon01.jpg');}
.giagamon .cnt .box {margin-bottom:40px; padding-bottom:40px; border-bottom:1px solid #dfdfdf;}
.giagamon .cnt .box:last-child {margin-bottom:0;}
.giagamon .cnt .box h3 {color:#2c2c2c;}
.giagamon .cnt .box ul li{font-size:18px; font-weight:300; line-height:1.5em; color:#505050; padding-left:15px; position:relative;}
.giagamon .cnt .box ul li:before{content:""; width:6px; height:6px; background:#2c2c2c; position:absolute; top:12px; left:0;}
.giagamon .cnt .box ul li ul {margin:8px 0;}
.giagamon .cnt .box ul li ul li {font-size:16px; font-weight:300; line-height:1.6em; color:#797979; padding-left:8px; position:relative;}
.giagamon .cnt .box ul li ul li:before {content:""; width:4px; height:1px; background:#797979; position:absolute; top:13px; left:0;}
/* product-03 AXGATE  */
.axgate .tit-bg {background-image:url('../images/sub/axgate01.jpg');}
.axgate .box ul li {padding-bottom:40px; margin-bottom:40px; border-bottom:1px solid #dfdfdf;}
.axgate .box ul li:last-child {padding-bottom:0; border-bottom:0;}
.axgate .box ul li h3 {color:#eb5e1f;}
.axgate ul.gate {display:flex;}
.axgate ul.gate li {text-align:center; position:relative; padding:0 10px;}
.axgate ul.gate li:after {content:""; width:1px; background:#dfdfdf; position:absolute; top:50%; right:0;}
.axgate ul.gate li:last-child:after {display:none;}
.axgate ul.gate li .img-box {margin-bottom:24px;}
.axgate ul.gate li p {font-size:18px; font-weight:300; line-height:1.4em; color:#797979;}
.axgate .wrap {padding:60px 0 40px; margin-bottom:60px; background:#fafafa;}
.axgate .wrap ul li {width:33.333333%;}
.axgate .wrap ul li:after {height:120px; margin-top:-60px;}
.axgate .cnt ul {display:flex;}
.axgate .cnt ul li {width:25%;}
.axgate .cnt ul li:after {height:70px; margin-top:-35px;}
/* product-04 PRIBIT  */
.pribit .tit-bg {background-image:url('../images/sub/pribit01.jpg');}
.pribit .cnt .box ul li {padding-bottom:40px; margin-bottom:40px; border-bottom:1px solid #dfdfdf;}
.pribit .cnt .box ul li:last-child {margin-bottom:0;}
.pribit .cnt .box ul li h3 { color:#b09d60;}
/* product-05 NETAND  */
.netand .tit-bg {background-image:url('../images/sub/netand01.jpg');}
.netand .box {margin-bottom:100px;}
.netand .box02 {margin-bottom:0;}
.netand .box ul {display:flex;}
.netand .box ul li {text-align:center; position:relative; padding:0 5px;}
.netand .box ul li:after {content:""; width:1px; height:120px; background:#dfdfdf; position:absolute; right:0; top:50%; margin-top:-60px;}
.netand .box ul li:last-child:after {display: none;}
.netand .box ul li .img-box {margin-bottom:20px;}
.netand .box ul li h3 {color:#3b355f;}
.netand .box01 ul li {width:25%;}
.netand .box02 ul li {width:33.33333%;}
/* product-06 CHAEWOOL  */
.chaewool .tit-bg {background-image:url('../images/sub/chaewool01.jpg');}
.chaewool .cnt .box h3 {color:#1b7ec2;}
.chaewool .cnt .box ul {margin-bottom:40px; padding-bottom:40px; border-bottom:1px solid #dfdfdf;}
.chaewool .cnt .box ul:last-child {margin-bottom:0;}

/* sub04_03 서비스 .service */
.service .tit {margin-bottom:50px; position:relative;}
.service .txt {position:absolute; width:100%; height:100%; top:0; left:0;}
.service .txt {padding:50px 150px;}
.service .box {background:rgba(255,255,255,0.5); padding:50px;}
.service .txt h3 {font-size:20px; line-height:1.3em; color:#2c2c2c; font-family:'NanumSquare'; margin-bottom:26px;}
.service .txt h3 span {color:#c9161d;}
.service .txt p {font-size:18px; color:#2c2c2c; line-height:1.4em;}
.service .wrap {display:flex; align-items:center;}
.service .img-box {width:36.6666%;}
.service .tt {width:63.3334%; padding-left:40px; font-size:20px; line-height:1.3em; color:#2c2c2c;}
.service .tt h4 {margin-bottom:50px; font-family:'NanumSquare';}
.service .tt p {font-weight:800; position:relative; padding-left:22px; margin-bottom:20px; font-family:'NanumSquare';}
.service .tt p:before {content:'';width:12px; height:15px; position:absolute; top:50%; margin-top:-8px; left:0; background-image:url('../images/sub/service_icon.png'); background-repeat:no-repeat; background-size:cover;}
.service .tt ul {display:flex; margin-left:-30px; margin-bottom:30px;}
.service .tt ul:last-child {margin-bottom:0;}
.service .tt ul li {margin-left:30px; position:relative; padding-left:35px;}
.service .tt ul li:before {content:''; width:26px; height:26px; position:absolute; top:50%; margin-top:-13px; left:0; background-repeat:no-repeat; background-size:cover;}
.service .tt ul li.tel:before {background-image:url('../images/sub/tel_icon.png');}
.service .tt ul li.mail:before {background-image:url('../images/sub/mail_icon.png');}
.service .tt ul li.fax:before {background-image:url('../images/sub/fax_icon.png');}

.privacy-title {padding:100px 0 30px;}
.privacy-title h2 {font-family: 'NanumSquare', sans-serif; font-size: 30px; font-weight: 600; letter-spacing: -.04em; color: #2c2c2c; line-height: 1.4em;}
.sub-privacy .sec {padding-bottom: 20px; margin-bottom: 20px; border-bottom:1px solid #dfdfdf; font-size: 18px; font-weight: 300; letter-spacing: -.04em; line-height: 2em; color: #797979;}
.sub-privacy .sec:last-child {border-bottom:0; padding-bottom: 0; margin-bottom: 0;}
.sub-privacy .sec h3 {margin-bottom: 8px; font-weight: 500; color: #2c2c2c;}