@charset "UTF-8";
@import url(default.css);
@import url(fwall.min.css);
@import url(xeicon.min.css);

* {margin:0;box-sizing:border-box;word-break: keep-all;}

body {width:100%; background:#fff; overflow-y:auto; overflow-x:hidden;}
.body-container {width:100%; height:100%; background:#fff; overflow:hidden;}


/* section 전체 적용 */
section {position: relative;padding:8% 0;width: 100%;}
section.sub_page {padding:0;width: 100%; height: 500px;}
section.sub_menu {padding:0 0 48px;}

i {font-family:fontAwesome;font-weight:900 !important;}

/* h2&p 전체 적용 */
h2 {font-family:'ONEMT';font-size: 3.8rem;font-weight:500; text-align: center; padding-bottom: 2%;line-height:1.2;word-break:keep-all;}
h2+p {font-size: 1.5rem; font-weight: 300; text-align: center; line-height: 1.5;word-break:keep-all;}
h2+p>span {font-weight: 600;color: #004077;}


/* h3&p 전체 적용 */
h3 {position: relative; font-size: 2.5rem; font-weight: 400;word-break:keep-all;}
h3+p {font-size: 1.6rem; font-weight: 300; text-align: center; line-height: 1.5;word-break:keep-all;padding-bottom:7%;}

/* section-container 전체 적용 */
.section-container {width:100%;max-width: 1620px; margin: 0 auto;padding-top:4%;}
.content {position: relative;float: left; margin-top: 65px;height:auto;}
.scroll .content {position: relative; transition: 1.2s;}


/* figure&img 전체 적용 */
figure {position: relative;width: 100%; height: 100%; overflow: hidden;}
figure.opac:after {content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.3); transition: 0.3s;}
figure.opac:hover:after {background: rgba(0,0,0,0.7);}
figure.opac:hover img {transform:scale(1.1);}
img {display: block;width: 100%; transition: 0.5s;}

/* table 전체 적용 */
table {width:1620px;border-collapse:collapse;margin:0 auto;}
tbody {border-top:2px solid #888;border-bottom:2px solid #888;}
th {width:25%;font-weight:700;background:#fafafa;padding:3% 0;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9;}
td {width:75%;padding:3% 3%;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9;line-height:28px;}

/* button 전체 적용 */
.btn {width: 100px; height: 40px; margin: 0 auto; font-weight: 400; text-align: center; line-height: 38px;font-size:1.5rem; background: #fff; border: 1px solid #fff; border-radius: 20px; color: #000; transition: 0.3s;}
.btn:hover {background: none; color: #fff;}
.btn a {display:inline- block;width:100%; line-height: 38px;}


/* header 시작 */
header {position: absolute; width: 100%; z-index: 99999;}
.header-container {padding: 0 150px; height: 110px;}

header h1 {float: left; width: 200px; height: 42px; margin-top: 30px;}
header h1 a {display:block;width:100%;height:100%;background:url('../img/logo-white.svg') no-repeat top left/cover;}

header .mopen {display:none;position:absolute;width:30px;height:30px;cursor:pointer;}
header .mopen>span {position:absolute;right:0;height:2px;background:#fff;}
header .mopen>span:nth-child(1) {width:100%;top:0;}
header .mopen>span:nth-child(2) {width:80%;top:10px;}
header .mopen>span:nth-child(3) {width:80%;top:10px;}
header .mopen>span:nth-child(4) {width:100%;top:20px;}
header .mopen.on>span:nth-child(1) {display:none;}
header .mopen.on>span:nth-child(2) {width:100%;top:10px;transform:rotate(45deg);}
header .mopen.on>span:nth-child(3) {width:100%;top:10px;transform:rotate(-45deg);}
header .mopen.on>span:nth-child(4) {display:none;}

header nav {position: absolute; right: 125px; float: right;}
header nav>ul>li {position: relative; float: left;color: #fff;font-size: 2rem;font-weight:500;}
header nav>ul>li a {display:inline-block; padding: 45px 25px;}
header nav>ul ul {position: absolute; top: 95px; left: 50%; transform: translateX(-50%); width: 100%; height: 0; text-align: center; background: rgba(0,0,0,0.75); overflow: hidden; transition: 0.5s;}
header nav>ul>li:nth-child(1):hover ul {height: 190px;}
header nav>ul>li:nth-child(2):hover ul {height: 190px;}
header nav>ul>li:nth-child(3):hover ul {height: 70px;}
header nav>ul>li:nth-child(4):hover ul {height: 160px;}
header nav>ul>li:nth-child(5):hover ul {height: 100px;}
header nav>ul>li:nth-child(6):hover ul {height: 70px;}

header nav>ul>li>ul>li {font-size: 1.4rem; font-weight: 400;color: rgba(255, 255, 255,.8);}
header nav>ul>li>ul>li:first-child {padding-top: 20px;}
header nav>ul>li>ul>li:last {padding-bottom: 20px;}
header nav>ul>li>ul>li>a {position:relative;padding:0;line-height: 30px; transition:all .2s;}
header nav>ul>li>ul>li>a:before {content:'';position:absolute;bottom:0;left:50%;transform: translateX(-50%); width:0%;height:1px;background:rgba(255, 255, 255,.5);transition:all .2s;}
header nav>ul ul>li>a:hover {color: #fff;}
header nav>ul ul>li>a:hover:before {width:100%;}
/* header 끝 */


/* visual 시작 */
#visual {background:none; height: 100vh;  padding: 0;color: #fff;}
#visual:before {content: "scroll";display: block;position: absolute;bottom: 150px;left: 50%;transform: translate(-40px, 30px) rotate(-90deg);font-size: 1.5rem;font-weight: 100;animation: scroll 2s infinite linear;}
#visual:after {content: "";display: block;position: absolute;bottom: -50px;left: 50%;transform: translateX(-50%);width: 2px;height: 200px;background: #e0e0e0;z-index:9;}
#visual .title {display:block;position: absolute; top: 45%; left: 150px; transform: translateY(-50%); width: 55%; height: auto;word-break: keep-all; z-index: 2;}
#visual h2 {font-size:7rem; font-weight: 500; padding-bottom:5%; line-height: 1.1; text-align: left;}
#visual h2 span { color: rgb(221, 233, 255);white-space: nowrap;animation: casesBgText 5s ease both infinite;}
#visual p {font-size: 2.2rem; font-weight: 300; text-align: left;}
#visual p>span {font-weight: 500 !important;color: inherit !important;}
#visual figure {position: absolute; top: 50%; left: 64%; transform: translate(-50%,-50%); width: 60%; height: 60%; opacity: 0.5;}

#visual .background {position:relative; top:0px; left:0; z-index:-1; width:100%; height:100vh; background:url(../img/mainBg2.jpg)no-repeat center bottom; overflow:hidden; } 
#visual .background video { position:absolute; z-index:-1; top:0px; left:50%; transform: translateX(-50%); width:100%;height:100%; object-fit:cover; } 
#visual .background .bgcolor { position:absolute; z-index:2; top:0px; left:50%; transform: translateX(-50%); width:100%; background: rgba(30, 252, 245, .2); } 
@keyframes scroll {
	0% {transform: translate(-40px, 30px) rotate(-90deg);opacity: 1;color: #fff;}  
    100% {transform: translate(-40px, 80px) rotate(-90deg);opacity: 0;color: #e0e0e0;}
}
@keyframes casesBgText {
    10% {color: rgb(255, 255, 255);}
    30% {color: rgba(204, 223, 255, .6);}
}
/* visual 끝 */


/* intro 시작 */
#intro {padding-top:210px;}
#intro p {padding-top: 2%;}
#intro .content {position: relative;top: 0; left: 0; opacity: 1; width: 33.3333333%;margin-top:4%; opacity: 0;}
#intro .con01, #intro .con03 {transition-delay: 0.5s;}
#intro .con02 {transform: translateY(-15%);}
#intro figure {transition: 0.3s;}
#intro b {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);width:100%; font-size:22px; font-weight: 500; text-align: center; line-height: 1.5; color: #fff;z-index:1;}

#intro.scroll.on .content {top: 0; left: 0; opacity: 1;}
/* intro 끝 */


/* business 시작 */
#business .content {position: relative;margin-top:4%; width: 50%;color: #fff; opacity:1;}
#business .con01 {top: 0; left: 0px;transform: translateY(-15%);}
#business .con02 {top: 0; left: 0px;}
#business .content>a {width:100%;height:100%;}
#business .title {position: absolute; top: 50%; transform: translateY(-50%); width: 100%; height: 74px; padding: 0 8%; overflow: hidden; transition: 0.5s; z-index: 2;}
#business .con01 .title {left: 0;}
#business .con02 .title {right: 0;}
#business strong {font-size:1.25rem; font-weight: 300;}
#business h3 {padding:2% 0 4%;}
#business h3:after {content: ""; display: block; position: absolute; bottom: 0; width: 50px; height: 2px; background: #fff;}
#business .con01 h3:after {left: 0;}
#business .con02 h3:after {right: 0;}
#business .content p {font-size: 1.6rem; font-weight: 300; text-align: left; line-height: 1.5; padding-top: 5%;padding-bottom:0; word-break: keep-all;}
#business .con02 {text-align: right;}
#business .con01 p {padding-right: 40%;}
#business .con02 p {text-align: right; padding-left: 40%;}
#business .btn {margin-top:20px;}

#business .content:hover:after {content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5);}
#business .content:hover .title {position: absolute; top: 50%; transform: translateY(-50%); width: 100%; height: 245px; padding: 0 8%;}
#business .content:hover img {transform: scale(1.1);}

#business.scroll.on .content {top: 0; left: 0; opacity: 1;}
/* business 끝 */		


/* solution 시작 */
#solution figure {position: relative;top:0px;width:100%;max-width: 1620px; height: 300px; margin: 4% auto 0; background: url('../img/solution02.jpg') no-repeat center center/cover; color: #fff;opacity:1; transition: 1s; z-index: 1;}
#solution .title {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 450px; height: 150px;z-index: 1;}
#solution .section-container {padding-top:2%;}
#solution .content {position: relative; width: 25%; height: 200px; margin: 0; padding:3% 4% 0;}
#solution strong {font-size: 7rem; font-family:'ONEMT';font-weight: 500; color: #e5e5e5;}
#solution h4 {position: relative; top:-25px; left:0; font-size: 3rem; font-weight: 500;}
#solution h4+p {font-size: 1.6rem; font-weight: 300; line-height: 1.5; padding:0 0 20px 0; word-break: keep-all;}
#solution h4+p>span {font-weight: 500;}

#solution.scroll.on figure {top: 0; left: 0; opacity: 1;}
#solution .section-container {opacity: 0; transition: 1s 0.5s;}
#solution.scroll.on .section-container {opacity: 1;}
/* solution 끝 */


/* contact 시작 */
#contact {width: 100%;padding:0;}
#contact .content {position: relative; width: 50%; height: 100%; margin: 0;}
#contact .title {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 48%; height: auto; color: #fff;z-index:1;}
#contact h3 {font-weight: 500; text-align: center; padding-bottom: 6%;}
#contact p {font-weight: 100;padding-bottom: 6%; transition: 0.3s;}
#contact p>span {font-weight: 400; text-align: center;}
/* contact 끝 */


/* footer 시작 */
footer {background: #333; color: #bcbcbb; padding: 30px 0 45px;}
footer .footer-container {padding: 0 150px;}
footer h2 {float: left; width: 175px; height: 40px; margin-right: 95px;}
footer .address {float: left;}
footer .right {float: right;}
footer span {position: relative; line-height: 44px; padding-right: 30px; font-size:1.4rem; font-weight: 300;}
footer span:after {content: ""; display: block; position: absolute; top: 50%; right: 15px; transform: translateY(-50%); width: 1px; height: 10px; background: #bcbcbb;}
footer span:last-child:after {display: none;}
footer span a {font-weight: 400;color: #bcbcbb;font-size:1.4rem;}
/* footer 끝 */


/* sub페이지 서브페이지 시작 */
.sub_page h2 {position:absolute;top:60%;left:50%;transform:translate(-50%,-50%);font-family:'ONEMT';font-size:7.5rem; color: #fff;letter-spacing:.3rem;}
/* sub페이지 서브페이지 끝 */

/* sub페이지 서브메뉴 시작 */
.sub_menu {position: relative; width: 100%; text-align: center;padding-bottom: 48px;}
.sub_menu ul {position: absolute; top:0; left: 50%; transform: translate(-50%,-50%); width:100%; max-width: 1620px; text-align: center; background: #101b3f;}
.sub_menu li {display: inline-block;}
.sub_menu li a {display: block; position: relative;font-family:'ONEMT'; font-size:1.6rem; padding: 40px 60px; color: #fff;}
.sub_menu li.active a {color: #d1e4f3;font-weight:500px}
.sub_menu li.active a:after {content: ""; display: block; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 2px; height: 25px; background: #d1e4f3;}
/* sub페이지 서브메뉴 끝 */

/* sub-container 시작 */
.sub-container {padding: 150px 0;width:100%; max-width: 1660px; margin: 0 auto;}
.sub-container section {padding:0;margin-top:9%;}
.sub-container section:first-child {margin-top:0;}
.sub-container strong {display: block; font-family:'ONEMT';font-size: 2.2rem; font-weight: 500; text-align: center; color: #004077; padding-bottom: 1%;}
.sub-container h2 {width:80%;margin:0 auto;padding-bottom: 4%;}
.sub-container .content-container {display:flex;justify-content:center;align-items:top;flex-wrap:wrap; width:100%;}
/* 4개일때 - content */
.sub-container .content {width: 25%; height: auto; padding: 0 20px; margin: 0;}	
/* 3개일때 - content.lay3 */
.sub-container .content.lay3 {width: 33.333333%;}	
.sub-container .content.lay4 {width: 25%;}	
.sub-container .content.lay5 {width: 20%;margin-bottom:5rem;}	
.sub-container .content.lay6 {width: 16.666666%;}	
/* content.layCon */
.sub-container .content.layCon {padding: 0;padding-right: 3rem;}	
.sub-container .content.layCon:last-child {padding-right: 0;}
.sub-container .content.layCon h3 {font-size: 2rem;padding-top: 3.5rem;}
.sub-container .content.layCon ul {padding: 0.5rem 0 4rem;}
.sub-container .content.layCon li {list-style: disc;font-size: 1.5rem;margin: 1rem 15%;margin-left: calc(15% + 2rem);text-align: left;}

/* 흰색 동그라미 박스 - Ccontent */
.content-container.Ccon {margin:0 auto;text-align:center;}
.content-container.Ccon .content.Ccontent {padding:0 40px;}
.content.Ccontent .Ccon-box {width:100%;height:270px;background:#fff;border-radius:50%;box-shadow:5px 5px 10px rgb(119 119 119 / 20%);}
.content.Ccontent.div3 .Ccon-box {width:300px;height:300px;background:#f3f3f3;border-radius:50%;box-shadow:5px 5px 10px rgb(119 119 119 / 20%);}
.content.Ccontent .Ccon-box figure {padding-top:15%;}
.content.Ccontent .Ccon-box.w50 h3 {line-height:1 !important;padding:5% 0 6%;}
.content.Ccontent .Ccon-box.w50 figure {width:50px;padding-top:10%;}
.content.Ccontent .Ccon-box.w50 span {display:inline-block;padding:0 15%;font-size:1.4rem;line-height:1.3;color:#909090;letter-spacing:-.05rem;word-break: keep-all;}
.content.Ccontent .Ccon-box h3:after {display:none;}


.sub-container .con-box {position:relative;height: 100%; background: #f1f1f1; text-align: center;box-shadow:5px 5px 10px rgba(119,119,119,0.2);}
.sub-container .con-box span {position:relative;left:50%;top:50%;transform: translate(-50%,-50%); display:inline-block;width:100%;height:auto;}
.sub-container .con-box:before {content:"";display:block;position:absolute;top:15px;right:15px;width:10px;height:10px;background:#fff;border-radius:50%;}
.sub-container .con-box:after {content:"";display:block;position:absolute;bottom:15px;left:15px;width:10px;height:10px;background:#fff;border-radius:50%;}
.sub-container .content figure {width: 107px; height: auto; margin: 0 auto 15px; padding-top: 4rem;}
.sub-container .content b {display:inline-block; font-size:1.6rem; font-weight: 500; color: #5477a4; padding-top:35px;}
.sub-container .content h3 {position: relative;font-size:2.6rem; font-weight: 500; line-height:1.2;padding:3% 0 5%;}
.sub-container .content h3:after {content: ""; display: block; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 70%; height: 1px; background: #d2d2d2;}
.sub-container .content p {font-size: 1.6rem; font-weight: 300; line-height:1.5; width: 65%; margin: 0 auto; padding: 5% 0 20%; word-break: keep-all;}
/* sub-container 끝 */


/* 서브페이지 스크롤이벤트 시작 */
.scroll-point .scroll {transform:translateY(0px);transition:1s;opacity:1;}
.scroll-point.on .scroll {transform:translateY(0);opacity:1;}
.scroll-point.on .con02, .scroll-point.on .con04 {transition-delay: 0.5s;}
.scroll-point.on .con02.lay3 {transition-delay: 0s;}
/* 서브페이지 스크롤이벤트 끝 */


/* overview 시작 */
#overview .con-box {background:none;box-shadow:none;}
#overview .con-box:before {display:none}
#overview .con-box:after {display:none}
#overview .content figure {padding-top:0;}
#overview .content b {position:relative;}
#overview .content b:after {content:"";display:block;position:absolute;top:10px;left:50%;transform:translateX(-50%);width:1px;height:20px;background:#5477a4;}
#overview .content h3 {height:140px;font-size:2.2rem;margin-bottom:5%;}
#overview .content h3:after {display:none;} 
#overview .con02 h3, #overview .con03 h3 {padding-top:8%;}
#overview .content h3>span {top:10%;font-size:1.6rem}
#overview table {width:calc(100% - 40px);margin:0 20px;}
#overview table span {display:inline-block;/*width:80px;*/padding:0 10px 0 0;font-weight:500;color:#5477a4;}
#chart .chart-content {width:100%;height:auto;margin:0 auto;}
#chart .chart-content img {width:60%;height:auto;margin:0 auto;}
/* overview 끝 */


/* value 시작 */
.vision {position:relative;}
.vision>img {position:absolute;top:50px;left:50%;transform:translateX(-50%);width:90%;opacity:0.15;margin:0;}
.vision h2.ffT {position:relative;left:50%;width:auto;transform: translateX(-50%); display:inline-block;padding:70px 10%;font-family:'ONEM';background: #0a3671 url(/img/vision_bg3.jpg)no-repeat center/cover;font-size:3rem;box-shadow: 5px 5px 10px rgba(119, 119, 119, 0.15);color:#fff;}
.vision h2.ffT:before {content: "";display: block;position: absolute;top: 15px;right: 15px;width: 10px;height: 10px;
background: #fff;border-radius: 50%;}
.vision h2.ffT:after {content: "";   display: block;position: absolute;bottom: 15px;left: 15px;width: 10px;height: 10px;background: #fff;border-radius: 50%;}
.vision h2.ffT b {position:absolute;left:50%;top:50%;transform: translate(-50%,-50%);font-size:10rem;color:rgba(255, 255, 255, .05);}
.vision h2.ffT span {color: rgb(221, 233, 255);white-space: nowrap;animation: casesBgText 5s ease both infinite;}
.vision p {font-size: 2rem;font-weight: 400;line-height:2;color: #666;}
#vision {position:relative;padding:0 20px;margin-top:0;}
#vision .Ccon {width:100%;}
#vision .Ccontent:after {content:"\f067";display:block;position:absolute;top:50%;right:-1vw;transform:translateY(-50%);font-size:5rem;font-weight:bold;font-family:FontAwesome;color:#ddd;}
#vision .Ccontent:last-child:after {display:none;}
#vision .arrow {width:auto;margin:0 auto;}
#vision .mission {position:absolute;top:570px;left:0;width:100%;height:auto;}
#vision .Scontent b {position:relative;color:#fff;padding:50px 0 30px;}
#vision .Scontent b:after {content:"";display:block;position:absolute;bottom:-1px;left:50%;transform:translateX(-50%);width:30px;height:2px;background:#fff;}
#vision .Scontent span {top:30%;display:block;font-size:2.2rem;font-weight:500;line-height:35px;color:#fff;padding:20px 0 40px;}
#vision .con01 .con-box {background:#0a3671;}
#vision .con02 .con-box {background:#1f88c0;}
#vision .con03 .con-box {background:#13aac3;}
#vision .con04 .con-box {background:#109fa6;}

.sub-container.vision .content b {padding-top: 10px;}
#vision .content.Ccontent .Ccon-box {width: 270px;height: 270px;margin:0 auto;}

/* value 끝 */


/* history 시작 */
#history h2 {padding-bottom: 65px;}
#history ul {text-align: center;}
#history li {display: inline-block; margin: 0 20px; padding: 15px 0; font-size: 20px; font-weight: 700; cursor: pointer; color: #999;}
#history li.on {color: #004077; border-bottom: 5px solid #004077;}
#history .tab-con {display: none;padding:0 20px;}
#history .tab-con.on {display: block;}
#history .his-box01 {padding: 90px 0; border-bottom: 2px solid #e5e5e5;}
#history .his-box01:first-child {padding-top: 140px;}
#history .his-box01:last-child {border: none; padding-bottom: 0;}
#history .his-box01 .year {float: left; width: 15%; padding-right: 110px; font-family:'ONEMT';font-size:4.8rem; font-weight: 700; line-height: 1; color: #004077;}
#history .his-box01 .summary {float: left; width: 84%; padding-right: 110px;}
#history .his-box01 .summary>span {display: block; font-size:2rem; padding:10px 0;word-break:keep-all;}
#history .his-box01 .summary>span:first-child {padding-top: 10px;}
#history .his-box01 .summary>span:last-child {padding-bottom: 0;}
#history .his-box01 .bold {font-weight: 700;}
#history .his-box01 .reg {font-weight: 400;}
#history .his-box02 {padding: 70px 0; border-bottom: 2px solid #e5e5e5;float:left;width:50%;}
#history .his-box02 .title {font-size:30px;font-weight:700;color: #004077;padding-bottom:35px;}
#history .his-box02 img {width:auto;display:inline-block;padding-left:20px;}
/*  #history .his-box02:first-child, #history .his-box02:nth-child(2) {padding-top: 140px;} */
#history .his-box02 .summary>span {display:block;font-size:2rem;line-height:1.2;font-weight:400;padding:8px 0;padding-right:40px;word-break:keep-all;}
/* #history .his-box02:last-child, #history .his-box02:nth-last-child(2) {border: none;padding-bottom: 0;} */
#history .his-box02 .reg.opac {opacity:0;}
#history .flex {display:flex; align-items:top;flex-wrap:wrap;margin:50px 0;}
/* history 끝 */


/* customer 시작 */
#customer .customer-content {padding:0 15px;}
#customer img {float:left;width:16.6%;padding:5px;}

.new-li5 {display:flex;justify-content:left;align-items:top;flex-wrap: wrap;}
.new-li5 li {width:18%;padding:0 1% 1% 1%;margin:0 1% 2% 1%;text-align: center;}
.new-li5 li>.img {display:inline-block;width:100%;padding:10px;border: 1px solid #ddd;border-radius:10px;}
.new-li5 li>.img img {display:inline-block;float:unset !important;width:100% !important;}
.new-li5 li>span {display:inline-block;width:100%;padding:10px 10px;margin-top:20px;color:#333;font-size:1.6rem;line-height:1.2;font-weight:500;background:#f1f1f1;word-break: keep-all;border-radius:10px;}
.new-li5 li>span b {display:inline-block;width:100%;padding-bottom:15px;font-size:1.4rem;color:#666;}

.new-li4 {display:flex;justify-content:left;align-items:top;flex-wrap: wrap;}
.new-li4 li {width:21%;padding:0 1% 1% 1%;margin:0 2% 2% 2%;text-align: center;}
.new-li4 li>.img {display:inline-block;width:100%;padding:10px;border: 1px solid #ddd;border-radius:10px;}
.new-li4 li>.img img {display:inline-block;float:unset !important;width:100% !important;}
.new-li4 li>span {display:inline-block;width:100%;padding:10px 10px;margin-top:20px;color:#333;font-size:1.6rem;line-height:1.2;font-weight:500;word-break: keep-all;background:#f1f1f1;border-radius:10px;}
.new-li4 li>span b {display:inline-block;width:100%;padding-bottom:15px;font-size:1.4rem;color:#666;}
/* customer 끝 */

/* forgis 시작 */
#forgis {position:relative;}
#forgis .Ccon>img {position:absolute;top:100px;left:50%;transform:translateX(-50%);width:70%;opacity:0.15;margin:0;}

#product p {font-size:2rem;font-weight:300;padding-bottom:4%;color:#888;}
#product .content b {padding-top: 0px !important;}

#product .Ccon {width:1240px;}
#product .Ccon .Ccontent {padding:0 20px;}
#product .Ccon .Ccon-box h3 {padding-top:0;}
#product .Scontent {transition-delay:.8s;}
#product .Scontent .con-box {display:inline-block;width:100%;padding:20% 10%;color:#fff;font-size:2rem;line-height:1.4;word-break:keep-all;}
#product .con01 .con-box {background:#004077;}
#product .con02 .con-box {background:#387fc6;}
#product .con03 .con-box {background:#004077;}
#product .con04 .con-box {background:#387fc6;}

#feature b {width:80%;margin :0 auto;word-break:keep-all;}
#feature h3 {width:90%;margin :0 auto;word-break:keep-all;}
#feature ul {width:70%;margin:10% auto;word-break:keep-all;}
#feature li {position:relative;text-align:left;line-height:1.3;padding:0 0 5% 10px;}
#feature .con-box>ul>li:before {content:"\f05d";font-family:FontAwesome;margin-left:-17px;font-size:1.4rem;}

#architecture ul {position:relative;width:100%;text-align:center;}
#architecture .content-container ul:nth-child(2) {padding:10% 0;}
#architecture ul:after {content:"";display:block;position:absolute;bottom:-120px;left:50%;transform:translateX(-50%);width:70px;height:73px;background:url('/img/forgis_arrow.png')no-repeat center center/cover;}
#architecture .content-container ul:nth-child(2):after {bottom:50px;}
#architecture ul:nth-child(3):after {display:none;}
#architecture ul li {position:relative;display:inline-block;font-size:2rem;font-weight:500;line-height:1.3;vertical-align:top;margin:0 1%;color:#fff;box-shadow:3px 3px 10px rgba(0,0,0,0.4);}
#architecture ul li:before {content:"";display:block;position:absolute;top:10px;right:10px;width:5px;height:5px;background:#fff;border-radius:50%;}
#architecture ul li:after {content:"";display:block;position:absolute;bottom:10px;left:10px;width:5px;height:5px;background:#fff;border-radius:50%;}
#architecture ul:nth-child(1) li {width:200px;height:80px;padding:25px 0;background:#004077;}
#architecture ul:nth-child(1) li:last-child {padding:12px 0;}
#architecture ul:nth-child(2) li {width:200px;height:80px;background:#8db6df;padding:20px 0;}
#architecture ul:nth-child(3) li {width:200px;background:#387fc6;color:#fff;padding:40px 0;font-size:1.6rem;line-height:1.3;}
#architecture ul:nth-child(3) li img {width:40%;margin:0 auto;margin-bottom:5%;}
#architecture ul li span {display:block;font-size:1.5rem;}
/* forgis 끝 */

/* aichatbot 시작 */
#aichatbot p {font-size:2rem;font-weight:300;padding-bottom:4%;color:#888;}
#aichatbot .content b {padding-top: 0px !important;}
#aichatbot .imaBox {width: 80%;padding: 4rem;margin: 0 auto;background: #f9f9f9;border: 1px solid #eee;border-radius: 10px;}
#aichatbot .imaBox>img {width: 100%;}
#aiFeatures b {width:80%;margin :0 auto;word-break:keep-all;}
#aiFeatures h3 {width:90%;margin :0 auto;word-break:keep-all;}
#aiFeatures ul {width:70%;margin:10% auto;word-break:keep-all;}
#aiFeatures li {position:relative;text-align:left;line-height:1.3;padding:0 0 5% 10px;}
#aiFeatures .con-box>ul>li:before {content:"\f05d";font-family:FontAwesome;margin-left:-17px;font-size:1.4rem;}
/* aichatbot 끝 */

/* slmplatform 시작 */
#slmplatform .content-container {width: calc(100% - 4rem);margin: 2rem 2rem 6rem;}
#slmplatform .content-container:last-child {margin-bottom: 0;}
#slmplatform p {font-size:2rem;font-weight:300;padding-bottom:4%;color:#888;}
#slmplatform .tab-img > div.tabCon img {height: 100%;}
/* slmplatform 끝 */


/* position 시작 */
#position .con-box {height:100%;padding-bottom:10px;}
#position .con-box>ul {width:80%;margin:0 auto;padding-top:20px;}
#position .con-box>ul>li {position:relative;text-align:center;padding:5% 0 0 3%;word-break:keep-all;}
#position .con-box>ul>li>span {position:relative;font-size:1.8rem;line-height:2.5;font-weight:500;}
#position .con-box>ul>li>span:before {content:"\f05d";font-family:FontAwesome;font-size:1.4rem;margin-right:5px;}
#position .con-box>ul>li>ul {display:inline-block;margin:-25px 0 25px 0;}
#position .con-box>ul>li>ul>li {font-size:1.4rem;padding:3px 0;}

.sub-container #position .lay5 {padding:0 !important;}
.sub-container #position .lay5 .con-box {width:22rem;height:22rem;background: #f9f9f9;text-align: center;border-radius: 500px;margin:0 auto;}
.sub-container #position .lay5 .con-box:before,.sub-container #position .lay5 .con-box:after {display:none}
#position .content-container .content .img {width:100%;height:auto;padding:20% 32% 8%;}
#position .content-container .content .img img {width:100%;height:auto;}
#position .content-container .content.lay5 h3 {font-size:2rem; }
#position .content-container .content.lay5 h3:after {display:none;}
/* position 끝 */


/* apply,inquire 시작 */
.process ul {width:96.5%;margin: 0 auto;text-align:center;}
.process ul>li {display:inline-block;position:relative;width:200px;height:200px;margin:0 3%;border-radius:50%;background:#f1f1f1;font-size:1.8rem;font-weight:500;text-align:center;line-height:1.3;box-shadow:5px 5px 10px rgba(119,119,119,0.2);}
.process ul>li:after {content:"\f101";display:block;position:absolute;top:50%;left:-4vw;transform:translateY(-50%);font-size:3rem;font-weight:normal;font-family:FontAwesome;color:#999;}
.process ul>li:first-child:after {display:none;}
.process ul>li>span {display:block;width:100%;font-size:3.125rem;font-weight:700;color:#5477a4;padding:22% 0 8%;}
.inquire .process ul {width:100%;margin:0 auto;}
.inquire .process ul>li>span {padding:25% 0 8%;}

.apply-container {width:100%;height:auto;padding:3.5% 0;background:#f1f1f1;}
.apply-container h3 {margin:0 auto;text-align:center;font-size:1.6rem;line-height:1.5;}
.apply-container ul {text-align:center;}
.apply-container ul>li {min-width:170px;display:inline-block;background:#5477a4;border-radius:24px;margin:3% 0.3% 0;box-shadow:5px 5px 10px rgba(119,119,119,0.2);}
.apply-container ul>li a {display:block;padding:15px 30px;color:#fff;}

#apply .apply-container h3 {width:50%;}
#inquire .apply-container h3 {width:70%;}	
/* apply 끝 */


/* popup */
.popup {position: absolute;top: 110px;left: 150px;z-index: 9999;}
.popup1 {width: 500px;}
.popup .popcontents {height: 640px;background: url('../img/popup_img.jpg');padding: 85px 30px;box-sizing: border-box;}
.popup .popcontents .popCon {width: 90%;padding: 30px 30px 40px;margin: 0 auto;box-sizing: border-box;background: rgba(255,255,255,0.4);border-radius: 5px;font-size: 17px;font-weight: 500;text-align: center;line-height: 1.5;word-break: keep-all; color: #000;} 
.popup .popcontents .popCon span {display: block;font-size: 14px;font-weight: 400;color: #1944c0;margin-top: 30px;}
.popup .popcontents button {display: block;width: 290px;height: 85px;margin: 35px auto 0;background: #1944c0;border-radius: 5px;box-shadow: 5px 5px 10px rgba(0,0,0,0.4);}
.popup .popcontents button img {width: 60%;margin : 0 auto;display: block;}
.popup .popBottom {width: 100%;height: 35px;background: #1944c0;padding: 0 22px;}
.popup .popBottom label, .popup .popBottom button {font-size: 14px;color: #fff;line-height: 35px;cursor: pointer;}


/* 2025-02 추가 */
ul.colorBox-li4 {display:flex;justify-content:space-between;align-items:top;flex-wrap: wrap; width:100%;}
ul.colorBox-li4.center {justify-content:center;}
ul.colorBox-li4 li {position:relative;width:calc(25% - 40px);margin:0 20px;padding:100px 0;background:#004077;transition: all .5s;}
ul.colorBox-li4 li:nth-child(2n) {background: #387fc6;}
ul.colorBox-li4 li > span {position:absolute;top:50%;left:50%;transform: translate(-50%,-50%);display:block;width:100%;padding:5px 40px; color: #fff;text-align: center;font-size:1.8rem;line-height:1.4;word-break: keep-all;}
ul.colorBox-li4 li:before {content:"";display:block;position:absolute;top:15px;right:15px;width:10px;height:10px;background:#fff;border-radius:50%;}
ul.colorBox-li4 li:after {content:"";display:block;position:absolute;bottom:15px;left:15px;width:10px;height:10px;background:#fff;border-radius:50%;}
.bg-grey {background:#f9f9f9 !important;}

.divBox-2 {display:flex;justify-content:center;align-items:center;flex-wrap:wrap; width:calc(100% - 4rem);margin:0 2rem;padding:4rem; background:#f9f9f9;border-radius:10px;border: 1px solid #eee;}
.divBox-2:nth-of-type(even) {flex-direction: row-reverse;border:none;background:#fff;}
.divBox-2 > div {display:inline-block;width:50%;}

.tab-img {position:relative;display:inline-block;width:100%;height:auto;padding:2rem;background:#ffff;border-radius:15px;}
.divBox-2:nth-of-type(even) .tab-img {background:#f9f9f9;}

.tab-img > div.tabMenu ul {display:flex;justify-content:center;width:100%;margin-top:2rem;}
.tab-img > div.tabMenu ul li {width:90px;height:60px;margin-right:10px;border: 1px solid #f1f1f1;}
.tab-img > div.tabMenu ul li img {width:100%;height:100%;}
.tab-img > div.tabMenu ul li.on {border: 1px solid #aaa;}
.tab-img > div.tabMenu ul li:hover {border: 1px solid #aaa;}

.tab-img > div.tabCon {width:100%;height:30rem;overflow:hidden;text-align: center;}
.tab-img > div.tabCon>div {position:relative;width:100%;height:100%;}
.tab-img > div.tabCon img {position:absolute;left:50%;top:0;transform: translateX(-50%); width:auto;}
.tab-img > div.tabCon span {z-index:9;position:absolute;left:50%;bottom:15px;transform: translateX(-50%);display:inline-block; width:auto;padding:5px 15px;border-radius:100px;font-size:1.4rem;font-weight:500;color:#fff;background:rgba(0,0,0,0.6);}

.div-content {padding:0 5rem;}
.div-content>.title {width:100%;margin-bottom:5rem;font-family:'ONEMT';font-size:2.6rem;line-height:1.2;}
.div-content>.title2 {width:100%;margin-bottom:2rem;font-family:'ONEMT';font-size:2.6rem;line-height:1.2;}
.div-content>.title>img {display:block; width:10rem;height:auto;margin-bottom:20px;}
.div-content ul {width:100%;}
.div-content ul li {padding:0 0px 1.5rem 1.8rem; font-size:1.8rem;color:#555;line-height:1.4;}
.div-content ul li:before {content: "\f05d";font-family: FontAwesome;font-size: 1.4rem;margin-right: 5px;margin-left:-1.8rem;}

.div-content ul.ul2 {width:100%;margin-bottom:3rem;}
.div-content ul.ul2 li {padding:0 0px 1rem 1.8rem; font-size:1.8rem;color:#555;line-height:1.4;}

.div-content ul.ul3 li {display:inline-block;width:12rem;height:12rem; padding:0 1.5rem 0 0;text-align: center;}
.div-content ul.ul3 li:before {display:none;}
.div-content ul.ul3 li img {display:inline-block;width:7rem;height:auto;}
.div-content ul.ul3 li span {display:inline-block;margin-top:1rem;padding:5px 20px;font-weight:500;text-align: center;background:#5477A4;color:#fff;font-size:1.5rem;border-radius:100px;}


#maintenance .divBox-2 > div:nth-of-type(2) {width:calc(30% - 40px);}
#maintenance .divBox-2 > div:nth-of-type(1) {width:calc(70% - 40px);}
#maintenance .divBox-2 > div.tabCon > div.tab1 .con {background:url(../img/monitor-gh1-1.png)no-repeat left 50px center/35%;}
#maintenance .divBox-2 > div.tabCon > div.tab2 .con {background:url(../img/monitor-gn1-1.png)no-repeat left 50px center/35%;}
#maintenance .divBox-2 > div.tabCon > div.tab3 .con {background:url(../img/monitor-gh2-1.png)no-repeat left 50px center/35%;}


#service p {font-size:20px;font-weight:300;padding-bottom:4%;color:#888;}
#service .content b {padding-top: 10px !important;}
.sub-container #service .content h3 {font-size: 2.4rem;}
.sub-container .con-box.type2 {background: #f9f9f9;border-radius:10px;border: 1px solid #eee; box-shadow:none;}


.sub-container .flex .content {width: 20%;}
.sub-container .flex .content p {width:80%;padding: 0px 0 5px 0;font-weight:400;}
#geostack.sub-container .flex .content p {width:75%;font-weight:300;}
.sub-container .flex .content p:before {content:'•';margin-right:5px;}
#geostack.sub-container .flex .content p:before {content:'';}
.sub-container .flex .content p:nth-of-type(1) {padding-top:20px;}
.sub-container .flex .con-box {padding-bottom:50px;}
.sub-container .content-container.flex {display:flex;justify-content: center; align-items:top;flex-wrap:wrap;}

#geostack section .Ccon>img {width:60%;margin:0 auto;}







@media (max-width:1600px) { 
    header nav {right: 40px;}
    .header-container {padding: 0 40px;}
    footer .footer-container {padding: 0 40px;}
}

@media (max-width:1400px) {
    #vision .Ccontent:after {display:none}
    #vision .content-container.Ccon .content.Ccontent {padding:0;}

}

@media (max-width:1360px) { 
/* footer 시작 */
footer {background: #333; color: #bcbcbb; padding: 20px 0 65px;}
footer .footer-container {position:relative;text-align:left;padding:0 15px;}
footer h2 {float: none;position:absolute;bottom:-50px;left:50%;transform:translateX(-50%); width: 120px; height:auto;padding-bottom:15px; margin:0;margin:0 auto;}
footer .address {float: left;width:100%;text-align:center;}
footer .address span:nth-child(1),footer .address span:nth-child(3),footer .right span:nth-child(2) {padding-right:0;}
footer .right {float: right;width:100%;text-align:center;}
footer span {position: relative; line-height: 22px; padding-right: 30px; font-size: 12px; font-weight: 100;}
footer .address span:first-child {display:block;}
footer .address span:first-child:after {display:none;}
footer .right span:last-child {display:block;width:100%;padding:8px 0 0 0;}
footer span:after {content: ""; display: block; position: absolute; top: 50%; right: 15px; transform: translateY(-50%); width: 1px; height: 10px; background: #bcbcbb;}
footer span:last-child:after, footer .right span:nth-child(2):after {display: none;}
footer span a {font-weight: 400;}
/* footer 끝 */
}

@media (max-width:1280px) {
    .sub_menu li a {padding: 40px 40px;}
    .content.Ccontent.div3 .Ccon-box {width:270px;height: 270px;}
    #vision .content.Ccontent .Ccon-box {width: 100%;height: auto;padding-bottom: 50px;background: none;box-shadow:none;}
}
/*
------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------width: 1024px-------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------
 */

@media (max-width:1024px) { 
html {font-size:9px;}
/* section 전체 적용 */
section {padding:10% 2%;}

/* section-container 전체 적용 */
.section-container {width: 100%;height:auto;margin: 0 auto;padding:4% 0 0;}

/* button 전체 적용 */
.btn:hover {background: #fff; color: #000;}

/* table 전체 적용 */
table {width:100%;}

/* header 시작 */
header {position: fixed; width: 100%; z-index: 100;transition:0.3s;}
.header-container {padding: 0 30px; height: 90px;}
header h1 {float: left; width: 190px; height: 40px; margin-top: 20px;}
header h1 a {display:block;width:100%;height:100%;background:url('../img/logo-white.svg') no-repeat top left/cover;transition:0.3s;}
header .mopen {display:block;position:absolute;top:35px;right:30px;z-index:1000;}
header nav {position: absolute; right: -100%; float: right;width:35%;height:100vh;background:#fff;transition:0.3s;margin-top:91px;border-left:1px solid #e5e5e5;}
header nav>ul>li {position: relative; float: left;width:100%;border-bottom:1px solid #e5e5e5;color: #000;font-size:2.5rem; font-weight: 500;}
header nav>ul>li a {display: block; padding: 20px 50px; color: #000; }
header nav>ul>li>a:after {content:"\f107";display:block;font-size:18px;float:right;font-family:FontAwesome;}
header nav>ul>li>a.on:after {content:"\f106";display:block;font-size:18px;float:right;font-family:FontAwesome;}
header nav>ul ul {position: static; top: 0; left: 0; transform: translateX(0); width: 100%; text-align: left; background:#f1f3f6; overflow: hidden; transition: 0.5s;}
header nav>ul>li:nth-child(1) ul {height: 190px;}
header nav>ul>li:nth-child(2) ul, header nav>ul>li:nth-child(4) ul {height: 70px;}
header nav>ul>li:nth-child(3) ul {height: 130px;}
header nav>ul>li:nth-child(1):hover ul {height: 190px;}
header nav>ul>li:nth-child(2):hover ul, header nav>ul>li:nth-child(4):hover ul {height: 70px;}
header nav>ul>li:nth-child(3):hover ul {height: 130px;}
header nav>ul>li>ul>li {color: #000; font-size:2rem; font-weight: 300;}
header nav>ul>li>ul>li:first-child {padding-top: 20px;}
header nav>ul>li>ul>li:last {padding-bottom: 20px;}
header nav>ul>li>ul>li>a {padding: 0;  line-height: 45px;padding-left:50px; transition: .2s;}
header nav>ul>li>ul>li>a:hover {color: #000;}

header.on {background:#fff;border-bottom:1px solid #e5e5e5;}
header.on h1 a {display:block;width:100%;height:100%;background:url('../img/logo.svg') no-repeat top left/cover;}
header.oo {background:#fff;border-bottom:1px solid #e5e5e5;}
header.oo h1 a {display:block;width:100%;height:100%;background:url('../img/logo.svg') no-repeat top left/cover;}
header .mopen.on>span {background:#000;} 
header.on .mopen>span {background:#000;}
header.oo .mopen>span {background:#000;}
header nav.on {right:0;}

header nav>ul>li:nth-child(1) ul {height: 0;}
header nav>ul>li:nth-child(2) ul, header nav>ul>li:nth-child(4) ul {height: 0;}
header nav>ul>li:nth-child(3) ul {height: 0;}
header nav.on>ul>li:nth-child(n+1) ul {height: 0;}
header nav.on>ul>li:nth-child(1) a.on+ul {height: 270px;}
header nav.on>ul>li:nth-child(2) a.on+ul {height: 270px;}
header nav.on>ul>li:nth-child(3) a.on+ul {height: 85px;}
header nav.on>ul>li:nth-child(4) a.on+ul {height: 220px;}
header nav.on>ul>li:nth-child(5) a.on+ul {height: 130px;}
header nav.on>ul>li:nth-child(6) a.on+ul {height: 85px;}

/* header 끝 */

/* visual 시작 */
#visual {padding: 0;overflow:hidden;}
#visual:before {display: none;}
#visual:after {display: none;}
#visual .title {left:50%;transform:translate(-50%,-50%);width:90%;}
#visual .title h2 {text-align:center;}
#visual .title p {width:80%;text-align:center;margin:0 auto;}
#visual figure {top:40%;left: 50%; transform: translate(-50%,-50%); width: 90%; height: 40%;}

#visual .background {position:relative; top:-0px; left:0; z-index:-1; width:100%; height:100vh; background:url(../img/mainBg2.jpg)no-repeat center bottom; overflow:hidden; } 
#visual .background video { position:absolute; z-index:1; top:0px; left:50%; transform: translateX(-50%); width:100%;height:100vh; object-fit:cover; } 

/* visual 끝 */

/* intro 시작 */
#intro {padding-top:10%;}
#intro .content {top:0;opacity: 1;}
/* intro 끝 */

/* .content.lay 시작 */
.sub-container .content.lay6 {width: 33.333333%;margin-top: 2rem;}	
.sub-container .content.lay6:nth-child(-n+3) {margin-top: 0;}
.sub-container .content.lay6:nth-child(3n) {padding-right: 0;}
/* .content.lay 끝 */

#vision .Ccon {width: 100%;padding:0;}
.content-container.Ccon .content.Ccontent {padding: 0 20px;}

/* business 시작 */
#business .con01 {top: 0; left: 0;opacity:1;}
#business .con02 {top: 0; left: 0;opacity:1;}
#business .title {height:auto;}
#business h3:after {display:none;}
#business .content p {display:none;}
#business .content:hover .title {height:auto;}
/* business 끝 */		

.new-li5 li {width:29.3%;margin:0 2% 4% 2%;}
.new-li5 li>.img img {width:80% !important;}
.new-li5 li>span {margin-top:10px;}


/* solution 시작 */
#solution figure {top:0;width:100%;opacity:1;}
#solution .section-container {opacity: 1;}
#solution h4 {font-size:2.2rem;}
/* solution 끝 */

/* contact 시작 */
#contact .title {width: 80%;}
/* contact 끝 */


/* sub페이지 서브페이지 시작 */
section.sub_page {height:400px;}
/* sub페이지 서브페이지 끝 */

/* sub페이지 서브메뉴 시작 */
/* .sub_menu {display:none;} */
.sub_menu li {display: none;}
.sub_menu li.active {display: inline-block;;}
.sub_menu li a {padding: 3rem 0px;}
.sub_menu li.active a:after {display: none;}

.div-content ul li>br {display: none;}


/* sub페이지 서브메뉴 끝 */

/* sub-container 시작 */
.sub-container {padding: 100px 15px; width: 100%;}
.sub-container p br {display: none;}
/* sub-container 끝 */

/* 서브페이지 스크롤이벤트 시작 */
.scroll-point .scroll {transform:translateY(0);opacity:1;}
.scroll-point.on .con02, .scroll-point.on .con04 {transition-delay: 0s;}
/* 서브페이지 스크롤이벤트 끝 */

/* overview 시작 */
#overview .content h3 {height:80px;}
#overview .content b:after {top:0;height:10px;}
#chart .chart-content {width:100%;padding-bottom:20px;}
#chart .chart-content img {width:80%;}
#overview table {width:100%;margin:0;}

/* overview 끝 */

/* value 시작 */
#vision .Ccon {width:100%;margin-bottom:50px;}
#vision .Ccon-box {height:200px;border-radius:10px;}
#vision figure {height: 140px;padding-top:13%;}
#vision b {padding-top:4%;}
#vision h3 {padding-top:3%;}

.content.Ccontent .Ccon-box.w50 {width:85%;height:200px;}
.content.Ccontent .Ccon-box.w50 b {line-height:2;}
.content.Ccontent .Ccon-box.w50 figure {width:30px;padding-top:5%;height:auto !important;}
.content.Ccontent .Ccon-box.w50 span {display:inline-block;letter-spacing:-.05rem;}
#vision .Ccontent:after {right: 7%;}
/* value 끝 */

/* history 시작 */
#history h2 {padding-bottom: 45px;}
#history ul {text-align: center;}
#history li {display: inline-block; margin: 0 20px; padding: 15px 0; font-size: 25px; font-weight: 700; cursor: pointer; color: #999;}
#history li.on {color: #004077; border-bottom: 5px solid #004077;}
#history .tab-con {display: none;padding:0;}
#history .tab-con.on {display: block;}
#history .his-box01 {padding: 80px 0; border-bottom: 2px solid #e5e5e5;}
#history .his-box01:first-child {padding-top: 110px;}
#history .his-box01:last-child {border: none; padding-bottom: 0;}
#history .his-box01 .year {float: left; width:20%;padding-left: 10px; padding-right: 110px;color: #004077;}
#history .his-box01 .summary {float: left; width: 80%; padding-right: 10px;}
#history .his-box01 .summary>span {display: block; padding: 18px 0;word-break:keep-all;}
#history .his-box01 .summary>span:first-child {padding-top: 10px;}
#history .his-box01 .summary>span:last-child {padding-bottom: 0;}
#history .his-box01 .bold {font-weight: 700;}
#history .his-box01 .reg {font-weight: 400;}
#history .his-box02 {padding: 70px 0; border-bottom: 2px solid #e5e5e5;float:left;width:100%;}
#history .his-box02 .title {float:left;width:100%;padding-top:8px;padding-bottom:35px;}
#history .his-box02 img {width:200px;}
#history .his-box02 .summary {float:left;width:100%;height:auto;}
#history .his-box02:first-child {padding-top: 140px;}
#history .his-box02:nth-last-child(2) {padding: 70px 0; border-bottom: 2px solid #e5e5e5;}
#history .his-box02 .summary>span {display:block;width:100%;padding:8px 0;padding-right:20px;}
#history .his-box02 .reg.opac {display:none;}
/* history 끝 */

/* business_sub 시작 */
#gis .content {width:50%;}
#gis .con01, #gis .con03 {padding: 0; padding-right: 1%;}
#gis .con02, #gis .con04 {padding: 0; padding-left: 1%;}
#gis .con03, #gis .con04 {padding-top:2%;}
/* business_sub 끝 */

/* customer 시작 */
#customer .customer-content {padding:0;}
/* customer 끝 */

/* forgis 시작 */
#forgis .Ccon>img {top:50%;transform:translate(-50%,-50%);}
#product p {padding-bottom:4%;color:#888;}
#product .Ccon {width:100%;margin-bottom:0;}
#product .Ccon .Ccontent {padding:0 10px;}
#product .Ccon .Ccontent .Ccon-box {background:none;box-shadow:none;} 
#product .Scontent {padding:0 10px;}
#product .con01 .con-box {padding:37px 37px 38px;}


#feature .content {width:50%;}
#feature .flex .content {width:33.3%;}
#feature .content {padding:1%;}

#architecture ul:after {width:52px;height:53px;bottom:-90%;}
#architecture .content-container ul:nth-child(2):after {bottom:8%;}
#architecture ul:nth-child(3) li:nth-child(5),#architecture ul:nth-child(3) li:nth-child(6) {margin-top:2%;}
/* forgis 끝 */

/* aichatbot 시작 */
#aichatbot .imaBox {width: 100%;padding: 3rem;}
/* aichatbot 끝 */

/* apply,inquire 시작 */
.process ul>li {width:170px;height:170px;}
.process ul>li>span {padding:18% 0 8%;}
.inquire .process ul>li>span {padding:25% 0 8%;}

#inquire .apply-container h3 {width:60%;}	
/* apply 끝 */

/* popup */
.popup {top: 50%;left: 50%;transform: translate(-50%,-50%);}
/* popup 끝 */

/* 2025-02 */
.sub-container .content.lay5 {width: 25%;margin-bottom:4rem;}

ul.colorBox-li4 li {position:relative;width:50%;margin:0;padding:100px 0;}
ul.colorBox-li4.center li {position:relative;width:33.3%;margin:0;padding:100px 0;}

ul.colorBox-li4 li:nth-child(3) {background:#387fc6 !important;}
ul.colorBox-li4 li:nth-child(4) {background:#004077 !important;}
ul.colorBox-li4.center li:nth-child(3) {background:#004077 !important;}
ul.colorBox-li4.center li:nth-child(4) {background:#387fc6 !important;}
.bg-grey {background:#fff !important;}
.dp-no {display:none}

.divBox-2 > div {width:100%;}
.div-content {padding: 0 3rem;}
.div-content>.title {margin:4rem 0 2rem 0;font-size:2.2rem;}
.div-content>.title>img {display:none;}
.div-content>.title2 {margin:4rem 0 2rem 0;}

#maintenance .tab-img > div.tabCon > div.tab1 .con {background:url(../img/monitor-gh1-1.png)no-repeat center top 30px/40%;}
#maintenance .tab-img > div.tabCon > div.tab2 .con {background:url(../img/monitor-gn1-1.png)no-repeat center top 30px/40%;}
#maintenance .tab-img > div.tabCon > div.tab3 .con {background:url(../img/monitor-gh2-1.png)no-repeat center top 30px/40%;}
#maintenance .tab-img > div:nth-of-type(1) {width:100%;height:600px;margin-bottom:20px;}
#maintenance .tab-img > div:nth-of-type(2) {width:100%;}

#service .Ccon {width:100%;}
.content.Ccontent.div3 .Ccon-box {width:100%;height: 300px;}

.sub-container #service .content.Ccontent .Ccon-box {box-shadow:none;background:none;}

}
/* 
------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------width: 768px-------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------
 */

@media (max-width:768px) { 
html {font-size: 7.5px;}

/* button 전체 적용 */
.btn {width: 70px; height: 26px;line-height:24px; margin: 0 auto; font-weight: 400; text-align: center;background: #fff; border: 1px solid #fff; border-radius: 13px; color: #000; transition: 0.3s}
.btn:hover {background: #fff; color: #000;}
.btn a {display: inline-block;width:100%;text-align: center;line-height:24px;}

/* header 시작 */
header {position: fixed; width: 100%; z-index: 100;transition:0.3s;}
.header-container {padding: 0 15px; height: 60px;}
header h1 {float: left; width: 134px; height: 28px; margin-top: 17px;}
header h1 a {display:block;width:100%;height:100%;background:url('../img/logo-white.svg') no-repeat top left/cover;transition:0.3s;}
header .mopen {display:block;position:absolute;top:20px;right:15px;z-index:1000;}
header .mopen>span {height:1px;}
header nav {position: absolute; right: -100%; float: right;width:60%;height:100vh;background:#fff;transition:0.3s;margin-top:61px;border-left:1px solid #e5e5e5;}
header nav>ul>li {position: relative; float: left;width:100%;border-bottom:1px solid #e5e5e5;}
header nav>ul>li a {display: block; padding: 15px 20px; color: #000; font-size: 18px; font-weight: 400;}
header nav>ul>li>a:after {content:"\f107";display:block;font-size:18px;float:right;font-family:FontAwesome;}
header nav>ul>li>a.on:after {content:"\f106";display:block;font-size:18px;float:right;font-family:FontAwesome;}
header nav>ul ul {position: static; top: 0; left: 0; transform: translateX(0); width: 100%; text-align: left; background:#f1f3f6; overflow: hidden; transition: 0.5s;}
header nav>ul ul>li:first-child {padding-top: 20px;}
header nav>ul ul>li:last {padding-bottom: 20px;}
header nav>ul ul>li>a {padding: 0; color: #000; font-size: 14px; font-weight: 300; line-height: 26px;padding-left:20px; transition: .2s;}
header nav>ul ul>li>a:hover {color: #000;}

header.on {background:#fff;border-bottom:1px solid #e5e5e5;}
header.on h1 a {display:block;width:100%;height:100%;background:url('../img/logo.svg') no-repeat top left/cover;}
header.oo {background:#fff;border-bottom:1px solid #e5e5e5;}
header.oo h1 a {display:block;width:100%;height:100%;background:url('../img/logo.svg') no-repeat top left/cover;}
header .mopen.on>span {background:#000;} 
header.on .mopen>span {background:#000;}
header.oo .mopen>span {background:#000;}
header nav.on {right:0;}

/* header nav>ul>li:nth-child(1) ul {height: 0;}
header nav>ul>li:nth-child(2) ul, header nav>ul>li:nth-child(4) ul {height: 0;}
header nav>ul>li:nth-child(3) ul {height: 0;}
header nav.on>ul>li:nth-child(n+1) ul {height: 0;}
header nav.on>ul>li:nth-child(1) a.on+ul {height: 170px;}
header nav.on>ul>li:nth-child(2) a.on+ul {height: 110px;}
header nav.on>ul>li:nth-child(3) a.on+ul {height: 66px;}
header nav.on>ul>li:nth-child(4) a.on+ul {height: 66px;}
header nav.on>ul>li:nth-child(5) a.on+ul {height: 95px;}
header nav.on>ul>li:nth-child(6) a.on+ul {height: 66px;} */
/* header 끝 */

.sub_menu li a {padding: 2rem 0px;}

/* visual 시작 */
#visual {padding: 0;}
#visual:before {display: none;}
#visual:after {display: none;}
#visual .title {top:40%;left:50%;transform:translate(-50%,-50%);width:90%;}
#visual .title h2 {font-size:5rem;text-align:center;}
#visual .title p {width:100%;text-align:center;}
#visual figure {position: absolute; top: 40%; left: 50%; transform: translate(-50%,-50%); width: 80%; height: 50%; opacity: 0.7;}
#visual .background {position:relative; top:0px; left:0; z-index:-1; width:100%; height:100vh; background:#000; overflow:hidden; } 
#visual .background video { position:absolute; z-index:1; top:0px; left:50%; transform: translateX(-50%); width:100%;height:100vh; object-fit:cover; } 



/* visual 끝 */

/* intro 시작 */
#intro {padding-top:10%;}
#intro .content {top:0;opacity: 1;width:100%;}
#intro .con02 {transform: translateY(0);}
/* intro 끝 */


/* business 시작 */
#business .content {width:100%;opacity:1;top: 0; left: 0;}
#business .con01 {transform: translateY(0);}
#business .title {height:auto;}
#business h3:after {display:none;}
#business .btn {display:block;}

#business .content:hover .title {height:auto;}
/* business 끝 */		


/* solution 시작 */
#solution figure {width:100%;height:200px;opacity:1;top:0;}
#solution h2+p {padding:0 30px;}
#solution .section-container {opacity: 1;}
#solution .content {width:50%;height:auto;}
#solution .title {height:auto;}
#solution .title h3 {padding-bottom:10px;}
/* solution 끝 */


/* contact 시작 */
#contact .content {width:100%;}
#contact .title {width: 80%;}
#contact .title p {font-weight:400;}

/* contact 끝 */



/* section 전체 적용 */
section.sub_page {height:250px;}
section.sub_page h2 {font-size:5rem;}


/* sub-container 시작 */
.sub-container {padding: 80px 15px; width: 100%; margin: 0 auto;}
.sub-container section {padding:0;margin-top:20%;}
.sub-container strong {padding-bottom:3%;}
.sub-container h2 {width:100%;padding-bottom:10%;font-size:3.2rem;}
.sub-container .content h3 {font-size: 2.2rem;line-height:1.2;}
.sub-container .content b {padding-top:20px;}
/* sub-container 끝 */


/* 4개일때 - content */
.sub-container .content {width: 50%;}	
.sub-container .con01, .sub-container .con03 {padding: 0; padding-right: 1.5%;}
.sub-container .con02, .sub-container .con04 {padding: 0; padding-left: 1.5%;}
.sub-container .con03, .sub-container .con04 {padding-top:3%;}
.sub-container .content figure {width: 60px;}
.sub-container .content p {width:85%;}

/* 3개일때 - content.lay3 */
.sub-container .content.lay3 {width:50%;}	
.sub-container .content.lay3:nth-child(even) {padding:0; padding-left: 2%;}
.sub-container .content.lay3:nth-child(odd) {padding:0; padding-right: 2%;}
.sub-container .con03.lay3 {margin-top:3%;}

/* 6개일때 - content.lay6 */
.sub-container .content.lay6 {width: 50%;margin-top: 3%;}
.sub-container .content.lay6:nth-child(-n+3) {margin-top: 3%;}
.sub-container .content.lay6:nth-child(-n+2) {margin-top: 0;}
.sub-container .content.lay6:nth-child(even) {padding:0; padding-left: 2%;}
.sub-container .content.lay6:nth-child(odd) {padding:0; padding-right: 2%;}


/* overview 시작 */
#overview .content figure {width:50px;}
#overview .content h3 {height:50px;margin:0 0 15%;}
#overview .content b {padding-top:10px;}
#overview .content b:after {display:none;}
#overview table tr:nth-child(4) td span {display:inline-block;}
#overview table td {line-height:1.3;word-break:keep-all;}
#overview table span {display:block;padding:4% 0 2%;}
#overview table span:first-child {padding-top:0;}

#chart .chart-content img {width:100%;}
/* overview 끝 */


/* value 시작 */
.vision>img {display:none;}
#vision {padding:0;}
#vision .Ccon {margin-bottom:30px;}
#vision .Ccon .Ccontent {width:50%;padding:10px;}
#vision .Ccon .Ccontent:after {font-size:2.5rem;}
#vision .Ccon-box {height:auto;background:none;box-shadow:none;}
#vision .Ccon figure {height: 60px;padding:0;}

#vision .arrow {width:100%;}
#vision .mission {top:340px;}
#vision .Scontent {width:25%;padding:0;margin:0;}
#vision .Scontent .con-box:before {top:8px;right:8px;width:8px;height:8px;}
#vision .Scontent .con-box:after {bottom:8px;left:8px;width:8px;height:8px;}
#vision .Scontent span {font-size:13px;line-height:22px;font-weight:400;}
/* value 끝 */


/* history 시작 */
#history h2 {padding-bottom: 45px;word-break:keep-all;font-size:3rem;}
#history ul {text-align: center;}
#history li {display: inline-block; margin: 0 20px; padding: 10px 0; font-size: 20px; font-weight: 700; cursor: pointer; color: #999;}
#history li.on {color: #004077; border-bottom: 5px solid #004077;}
#history .tab-con {display: none;}
#history .tab-con.on {display: block;}
#history .his-box01 {padding: 50px 0; border-bottom: 1px solid #e5e5e5;}	
#history .his-box01:first-child {padding-top: 60px;}
#history .his-box01:last-child {border: none; padding-bottom: 0;}
#history .his-box01 .year {float: left; width: 100%;padding-left: 0; padding-right: 0;padding-bottom:15px; font-size: 30px; font-weight: 700; line-height: 1; color: #004077;}
#history .his-box01 .summary {float: left; width: 100%; padding-right: 0;}
#history .his-box01 .summary>span {display: block; font-size: 14px;line-height:20px;padding: 10px 0;word-break:keep-all;}
#history .his-box01 .summary>span:first-child {padding-top: 10px;}
#history .his-box01 .summary>span:last-child {padding-bottom: 0;}
#history .his-box01 .bold {font-weight: 700;}
#history .his-box01 .reg {font-weight: 400;}
#history .his-box02 {padding: 30px 0; border-bottom: 1px solid #e5e5e5;float:left;width:100%;}
#history .his-box02 .title {float:none;width:100%;font-size:20px;font-weight:700;color: #004077;padding-top:8px;padding-bottom:35px;}
#history .his-box02 img {width:150px;padding-left:15px;}
#history .his-box02.jinju span:last-child {display:none;}
#history .his-box02:first-child {padding-top: 70px;}
#history .his-box02:nth-child(2) {padding-top: 30px;}
#history .his-box02 .summary>span {display:block;float:none;width:100%;padding:8px 0;}
#history .his-box02 .reg {display:none;}
/* history 끝 */


/* business_sub 시작 */
#gis .content h3 {height:80px;}
#gis .content p {font-size:1.125rem;height:130px;}
#gis .con01, #gis .con03 {padding-right: 1.5%;}
#gis .con02, #gis .con04 {padding-left: 1.5%;}
#gis .con03, #gis .con04 {padding-top:3%;}
#it .content p {height:80px;}
/* business_sub 끝 */


/* customer 시작 */
#customer .customer-content img {width:33.333333%;padding:2px;}
/* customer 끝 */


/* forgis 시작 */
#forgis .Ccon>img {width:80%;top:40%;transform:translate(-50%,-50%);}
#product h2 {padding-bottom:1%;}
#product p {width:80%;margin:0 auto;padding-bottom:8%;color:#888;}
#product .Ccon {width:100%;margin-bottom:30px;}
#product .Ccon .Ccontent {padding:10px;}
#product .Ccon .Ccontent .Ccon-box {height:auto;background:none;box-shadow:none;} 
#product .Ccon .Ccontent .Ccon-box figure {padding-top:0;}
#product .Scontent {width:50%;height:130px;padding:0;margin:0;}
#product .Scontent .con-box:before {top:8px;right:8px;width:8px;height:8px;}
#product .Scontent .con-box:after {bottom:8px;left:8px;width:8px;height:8px;}
#product .Scontent span {font-size:13px;line-height:22px;font-weight:400;}
#product .Scontent .con-box {position:relative;width:100%;height:100%;padding:0;}
#product .con01 .con-box {padding:33px 20px;}
#product .con03 .con-box {background:#387fc6;}
#product .con04 .con-box {background:#004077;}
#product .Scontent .con-box span {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80%;}

#feature .flex .content {width:50%;}
#feature .content {padding:1%;}

#feature b {width:100%;height:30px;}

#architecture .content-container ul:nth-child(2) {padding:10% 0;}
#architecture ul:after {bottom:-70%;width:25px;height:26px;}
#architecture .content-container ul:nth-child(2):after {bottom:3%;}
#architecture ul li:before {top:5px;right:5px;}
#architecture ul li:after {bottom:5px;left:5px;}
#architecture ul:nth-child(1) li {width:30%;height:60px;padding:20px 0;}
#architecture ul:nth-child(2) li {width:30%;height:70px;padding:20px 0;margin-top:10px;}
#architecture ul:nth-child(3) li {width:150px;padding:20px 0;margin-top:2%;}
/* forgis 끝 */

/* aichatbot 시작 */
#aichatbot .imaBox {padding: 2rem;}
/* aichatbot 끝 */

/* slmplatform 시작 */
#slmplatform .content-container .content.layCon h3 {width: 80%;margin: 0 auto;}
#slmplatform .content-container .content.layCon h3:after {width: 100%;}
/* slmplatform 끝 */


/* apply,inquire 시작 */
.process ul>li {width:25%;height:25%;padding-bottom:30px;border-radius:10px;}
.process ul>li:nth-child(4), .process ul>li:nth-child(5) {margin-top:20px;}
.process ul>li:after {left: -20%;}
.process ul>li>span {padding:15% 0 3%;font-size:2.5rem;}

.apply .process ul li:nth-child(4) {margin-left:22%;}

.inquire .process ul li {width:40%;height:auto;padding-bottom:12%;}
.inquire .process ul>li:nth-child(3) {margin-top:20px;}
.inquire .process ul>li>span {padding:22% 0 8%;font-size:2.75rem;}
.inquire .process ul>li:after {left: -5vw;}
.inquire .process ul>li:nth-child(3):after {display:none;}

.apply-container {padding:8% 0;}
.apply-container ul>li {margin:3% 1% 0;min-width:110px;}
.apply-container ul>li a {padding:10px 13px;}
#apply .apply-container h3,#inquire .apply-container h3 {width:70%;}		
/* apply 끝 */

/* popup */
.popup {top: 0;left: 0;transform: translate(0,0);}
.popup1 {width: 100%;}
.popup .popcontents {height: 130vw;background: url('../img/popup_img.jpg')no-repeat center/cover;padding: 15vw 3vw;box-sizing: border-box;}
.popup .popcontents .popCon {font-size: 14px;padding: 12px 10px 15px;} 
.popup .popcontents .popCon span {font-size: 11px;margin-top: 15px;}
.popup .popcontents button {width: 90%;height: 20vw;margin-top: 15px;}
.popup .popcontents button img {width: 50%;}
/* popup 끝 */

/* popup */
.popup {position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);z-index: 9999;}
.popup1 {width: 500px;}
.popup .popcontents {height: 640px;background: url('../img/popup_img.jpg');padding: 85px 30px;box-sizing: border-box;}
.popup .popcontents .popCon {width: 90%;padding: 30px 30px 40px;margin: 0 auto;box-sizing: border-box;background: rgba(255,255,255,0.4);border-radius: 5px;font-size: 17px;font-weight: 500;text-align: center;line-height: 1.5;word-break: keep-all;} 
.popup .popcontents .popCon span {display: block;font-size: 14px;font-weight: 400;color: #1944c0;margin-top: 30px;}
.popup .popcontents button {display: block;width: 290px;height: 85px;margin: 35px auto 0;background: #1944c0;border-radius: 5px;box-shadow: 5px 5px 10px rgba(0,0,0,0.4);}
.popup .popcontents button img {width: 60%;margin : 0 auto;display: block;}
.popup .popBottom {width: 100%;height: 35px;background: #1944c0;padding: 0 22px;}
.popup .popBottom label, .popup .popBottom button {font-size: 14px;color: #fff;line-height: 35px;cursor: pointer;}


/* 2025-02 */
.sub-container .content.lay5 {width:33.3%;margin-bottom:4rem;}

ul.colorBox-li4.center li {width:100%;padding:50px 0;}
/* ul.colorBox-li4 li {width:100%;} */
.divBox-2 {padding:2rem;}
.tab-img > div.tabMenu ul li {width: 19%;height:10vw;margin:0 .5rem;}
.tab-img > div.tabCon {height: 35vw;overflow: hidden;text-align: center;}
.tab-img > div.tabCon img {width: 100%;height:100%;}

.div-content ul.ul3 li {width:24%;height:auto; padding:0 1%;}
.div-content ul.ul3 li img {width:65%;}
.div-content ul.ul3 li span {padding:.5rem 1.5rem;}


#maintenance .tab-img > div.tabCon > div.tab1 .con {background:url(../img/monitor-gh1-1.png)no-repeat center top 0px/50%;}
#maintenance .tab-img > div.tabCon > div.tab2 .con {background:url(../img/monitor-gn1-1.png)no-repeat center top 0px/50%;}
#maintenance .tab-img > div.tabCon > div.tab3 .con {background:url(../img/monitor-gh2-1.png)no-repeat center top 0px/50%;}
#maintenance .tab-img > div:nth-of-type(1) {width:100%;height:450px;margin-bottom:20px;}
#maintenance .tab-img > div:nth-of-type(2) {width:100%;}

#service .Ccon>img {top: 170px;}
#service .Ccon .Ccon-box h3 {font-size:1.8rem;}
.sub-container .content.div3 {width: 32%;}
.sub-container #service .content.Ccontent .Ccon-box {height:230px;}
.sub-container .flex .con-box {padding-bottom: 50px;}
}

@media (max-width:501px) {
    .sub-container #position .lay5 .con-box {
        width: 17rem;
        height: 17rem;
    }
}
@media (max-width:280px) {
    .popup1 .popcontents {height: 145vw;}
}