@charset "utf-8";
/* CSS Document */

.main {width: 100vw; height: 100vh; text-align: center; background: url('/img/main_bg.jpg') no-repeat center center/cover;}
.main .tit em {font-size: 26px; font-weight: 300; color: #999;}
.main .tit h2 {margin-top: 5px; line-height: 1; font-size: 80px; font-weight: 900; color: #fff;}
.main .tit h2 span {color: #377ad1;}
.main .cont {width: 100%; max-width: 925px; margin: 50px auto 0; box-sizing: border-box;}
.main .cont ul {width: 105%; margin-left: -5%;}
.main .cont ul li {float: left; display: table; padding: 65px 30px; width: 28.33333%; margin-left: 5%; border: 1px solid #2e2e2e; background: rgba(40,40,40,.7); box-shadow: 0px 0px 20px 6px rgb(14 14 14 / 38%); box-sizing: border-box; border-radius: 10px; min-height: 365px;}
.main .cont ul li.first{background: url('/img/main_img_01.jpg') no-repeat center center/cover;}
.main .cont ul li.second{background: url('/img/main_img_02.jpg') no-repeat center center/cover;}
.main .cont ul li.third{background: url('/img/main_img_03.jpg') no-repeat center center/cover;}
.main .cont ul li > .txt{display: table-cell; vertical-align: middle; padding-bottom: 50px}
.main .cont ul li p {height: 150px; line-height: 150px;}
.main .cont ul li em {display: block; margin-top: 25px; font-size: 28px; font-weight: 700; color: #fff; padding-bottom: 25px; border-bottom: 1px solid rgba(255,255,255,.2);}
.main .cont ul li em > span{display: block; padding: 0; opacity: .5; font-size: 14px; line-height: 1.2; letter-spacing: 2px; margin: 0;}
.main .cont ul li span {display: block; font-size: 16px; font-weight: 300; color: #ddd; padding-top: 20px;}


.sub {background: #090909;}


.sub .titPage h2 {line-height: 1.4; font-size: 100px; font-weight: 900; color: #fff; font-family: 'NanumSquare', sans-serif !important;}
.sub .titPage {color: #fff; text-align: center; font-family: 'NanumSquare', sans-serif !important;}
.sub .titPage em {display: inline-block; font-size: 50px; font-weight: 300; line-height: 1.2; word-break: keep-all;}
.sub .titPage em b {display: block; font-weight: 700;}


.sub .tit {text-align: center;}
.sub .tit h3 {font-size: 65px; font-weight: 300; color: #fff; letter-spacing: -.5px;}
.sub .tit h3.last{font-size: 55px;}
.sub .tit h3.clr {color: #333;}
.sub .tit h3 b {font-weight: 900;}
.sub .tit strong {display: block; font-size: 40px; font-weight: 300; color: #2f69b4; letter-spacing: -.5px;}
.sub .tit strong b {font-weight: 900;}
.sub .tit span {display: block; line-height: 1.4; font-size: 16px; font-weight: 300; color: #666; word-break: keep-all;}

.sub .top {}
.sub .top h3 {font-size: 90px; font-weight: 900; color: #333; line-height: 1.4; letter-spacing: -6.5px;}
.sub .top h3 i {color: #2f69b4; font-style: normal;}
.sub .top strong {display: block; margin-top: 5px; font-size: 30px; font-weight: 300; color: #666; line-height: 1.3; letter-spacing: -2px; word-break: keep-all;}
.sub .top strong b {font-weight: 900;}
.sub .top span {display: block; margin-top: 40px; font-size: 16px; font-weight: 300; color: #666; line-height: 1.4; word-break: keep-all;} 
 
.sub ul.dot_list {margin-top: 5px;}
.sub ul.dot_list li {position: relative; padding-left: 10px; line-height: 1.7; font-size: 16px; font-weight: 300; color: #aaa; letter-spacing: -.5px; text-align: left; box-sizing: border-box; word-break: keep-all;}
.sub ul.dot_list li:before {content: ''; position: absolute; top: 13px; left: 0; display: block; width: 3px; height: 3px; border-radius: 3px; background: #377ad1;}
.sub ul.dot_list li.line-h {line-height: 1.5;}


.sub .layout1 {padding-top: 52px; width: 100%; max-width: 850px; margin: 0 auto;}
.sub .layout1 .box {position: relative; float: left; width: 50%; min-height: 400px; box-sizing: border-box;}
.sub .layout1 .box img {display: inline-block; max-width: 100%;}
.sub .layout1 .txt {box-sizing: border-box;}
.sub .layout1 em {display: block; font-size: 18px; font-weight: 500; color: #fff;}

.sub .layout2 .img {position: relative; float: left; width: 50%; text-align: right; z-index: 1;}
.sub .layout2 .info {position: relative; float: left; width: 50%;}
.sub .layout2 .info .bg {display: inline-block; padding: 52px 75px; border-radius: 20px; background: rgba(255,255,255,.5); box-shadow: 0px 0px 39.6px 0.4px rgba(41, 44, 48, 0.1); box-sizing: border-box;}
.sub .layout2 .info em {display: block; line-height: 1.2; font-size: 26px; font-weight: 900; color: #2f69b4;}
.sub .layout2 .info ul.dot_list {margin-top: 15px;}
.sub .layout2 .info ul.dot_list li {color: #666;}

.sub .layout3 {padding-top: 70px; width: 100%; max-width: 850px; margin: 0 auto;}
.sub .layout3 ul li {float: left; width: 25%; text-align: center;}
.sub .layout3 ul li > em {display: block; margin-top: 15px; line-height: 1.4; font-size: 18px; font-weight: 500; color: #333;}
.sub .layout3 ul li > span {display: block; margin-top: 6px; line-height: 1.4; font-size: 16px; font-weight: 300; color: #666; letter-spacing: -.5px; word-break: keep-all;}

.sub .about .sec1 {background: url('/img/about_bg_01.jpg') no-repeat center center/cover;}
.sub .about .sec1 em b {display: inline-block;}

.sub .about .sec2 {text-align: center; background: url('/img/about_bg_02.jpg') no-repeat center center/cover;}
.sub .about .sec2 .top h3 {margin-top: 75px;}




.sub .about .sec3 {text-align: center; background: url('/img/about_bg_03.jpg') no-repeat center center/cover;}
.sub .about .sec3 .cont {padding-top: 80px; width: 100%; max-width: 1000px; margin: 0 auto;}
.sub .about .sec3 .cont > ul > li {position: relative; float: left; width: 25%; z-index: 1;}
.sub .about .sec3 .cont > ul > li:before {content: ''; position: absolute; top: 80px; left: 0; display: block; width: 100%; height: 1px; background: #ddd; z-index: -1;}
.sub .about .sec3 .cont > ul > li:last-child:before {display: none;}
.sub .about .sec3 .cont .year span {display: block; width: 155px; height: 155px; line-height: 155px; font-size: 30px; font-weight: 900; color: #fff; border-radius: 155px; text-align: center; background: #1662cc url('/img/about_img.png'); background-repeat: no-repeat; background-position: 50% 50%; background-size: cover;}
.sub .about .sec3 .cont .month {position: relative; height: 155px;}
.sub .about .sec3 .cont .month span {position: absolute; top: 50%; left: 0; display: block; margin-top: -50px; width: 100px; height: 100px; line-height: 100px; font-size: 20px; color: #2f69b4; border-radius: 100px; text-align: center; background: #fff; box-shadow: 0px 0px 39.6px 0.4px rgba(11, 65, 139, 0.16);}
.sub .about .sec3 .cont .month span b {font-size: 30px; font-weight: 900;}
.sub .about .sec3 ul.dot_list {margin-top: -15px; margin-left: 45px;}
.sub .about .sec3 ul.dot_list li {color: #666;}

/*.sub .about .sec4 {background: url('/img/about_bg_04.jpg') no-repeat center center/cover;}*/
.sub .about .sec4 {background: url('/img/about_bg_04_2024.jpg') no-repeat center center/cover;}




.sub .about .sec4 .cont {float: right; width: 100%; max-width: 525px;}
.sub .about .sec4 .cont h3 {font-size: 60px; font-weight: 900; color: #fff; letter-spacing: -1.5px;}
.sub .about .sec4 .cont .mo_map {display: none;}
.sub .about .sec4 .cont em {display: block; margin-bottom: 20px; font-size: 24px; font-weight: 900; color: #377ad1;}
.sub .about .sec4 .cont ul li {margin-top: 12px; color: #fff; font-size: 16px; letter-spacing: -.5px;}
.sub .about .sec4 .cont ul li:first-child {margin-top: 0;}
.sub .about .sec4 .cont ul li b {float: left; width: 50px; font-weight: 900;}
.sub .about .sec4 .cont ul li span {float: left; width: calc(100% - 50px); padding-left: 5%; font-weight: 300; box-sizing: border-box; word-break: keep-all;}
.sub .about .sec4 .cont .info {margin-top: 60px;}
.sub .about .sec4 .cont .info a {display: block;}
.sub .about .sec4 .cont .map {margin-top: 40px;}
.sub .about .sec4 .cont .map a {display: inline-block; margin-left: 5px; width: 125px; height: 40px; line-height: 38px; font-size: 16px; font-weight: 300; color: #fff; text-align: center; border: 1px solid #8a9bb4; box-sizing: border-box; }
.sub .about .sec4 .cont .map a:first-child {margin-left: 0;}




.sub .business .sec1 {background: url('/img/business_bg_01.jpg') no-repeat center center/cover;}

.sub .business .sec2 {background: url('/img/business_bg_02.jpg') no-repeat center center/cover;}
.sub .business .sec2 .tit h3 {color: #2f69b4; line-height: 1;}
.sub .business .sec2 .tit strong {margin-top: 12px; color: #333; line-height: 1;}
.sub .business .sec2 .tit span {margin-top: 30px; color: #333;} 

.sub .business .sec3 {background: url('/img/business_bg_03.jpg') no-repeat center center/cover;}
.sub .business .sec3 .tit h3 {color: #2f69b4; line-height: 1;}
.sub .business .sec3 .tit strong {margin-top: 12px; color: #333; line-height: 1;}
.sub .business .sec3 .tit span {margin-top: 30px; color: #333;} 
.sub .business .sec3 .layout3 {max-width: 530px;}
.sub .business .sec3 .layout3 ul li {width: 50%;}
.sub .business .sec3 .layout3 ul li > em em.dpb {display: inline-block;}
.sub .business .sec3 .layout3 p.img.pic {padding-top: 6%;}

.sub .business .sec4 {text-align: center; background: url('/img/business_bg_04.jpg') no-repeat center center/cover;}
.sub .business .sec4 .tit h3 {color: #fff; line-height: 1;}
.sub .business .sec4 .tit strong {margin-top: 25px; color: #ddd; line-height: 1;}
.sub .business .sec4 .cont {margin-top: 80px;}
.sub .business .sec4 .cont span {display: block; margin-top: 30px; line-height: 1.4; font-size: 16px; font-weight: 400; color: #aaa; word-break: keep-all;}
.sub .business .sec4 .cont span b {font-weight: 900;}


/* 솔루션 */
.sub .solution .sec1 {background: url('/img/solution_bg_01.jpg') no-repeat center center/cover;}

.sub .solution .sec2 {background: url('/img/solution_bg_02.jpg') no-repeat center center/cover;}
.sub .solution .sec2 .layout1 .txt {margin-top: -10%; padding: 0 10px;}
.sub .solution .sec2 .layout1 .box.right .txt {margin-top: -14.5%;}


.sub .solution .sec3 {background: #fff;} 
.sub .solution .sec3 .tit strong {margin-top: 30px;}
.sub .solution .sec3 .tit span {margin-top: 5px;}
.sub .solution .sec3 p {margin-top: 40px; text-align: center;}
.sub .solution .sec3 p img {display: inline-block; max-width: 100%;}
.sub .solution .sec3 p .mo {display: none;}

.sub .solution .sec4 {background: url('/img/solution_bg_03.jpg') no-repeat center center/cover;}
.sub .solution .sec4 .layout1 {max-width: 830px;}
.sub .solution .sec4 .layout1 .box.left {padding-left: 25px;}
.sub .solution .sec4 .layout1 .box.right {padding-left: 25px;}
.sub .solution .sec4 .layout1 .txt {padding: 0 13px;}

.sub .solution .sec5 {background: url('/img/solution_bg_04.jpg') no-repeat center center/cover;}
.sub .solution .sec5 .tit span {margin-top: 10px;}
.sub .solution .sec5 .layout2 {margin-top: 55px;}
.sub .solution .sec5 .layout2 .img {left: 10px;}
.sub .solution .sec5 .layout2 .info {top: 35px; left: -40px;}

.sub .solution .sec6 {background: url('/img/solution_bg_05.jpg') no-repeat center center/cover;}
.sub .solution .sec6 .layout2 {margin-top: 35px;}
.sub .solution .sec6 .layout2 .img {width: 20%;}
.sub .solution .sec6 .layout2 .info {top: 75px; float: right; width: 80%; max-width: 800px;}
.sub .solution .sec6 .layout2 .info em {margin-top: 13px;}
.sub .solution .sec6 .layout2 .info ul.dot_list {margin-top: 10px;}
.sub .solution .sec6 .layout2 .info .bg {display: block; padding: 35px 30px 35px 60px;}
.sub .solution .sec6 .layout2 .info.vid .txt {float: left; width: 100%; max-width: 260px; box-sizing: border-box;}
.sub .solution .sec6 .layout2 .info.vid .video_box {float: left; width: calc(100% - 260px); max-width: 435px; font-size: 0; border-radius: 10px; overflow: hidden;}

.sub .solution .sec7 {background: url('/img/solution_bg_06.jpg') no-repeat center center/cover;}
.sub .solution .sec7 .tit h3 {line-height: 1.2;}
.sub .solution .sec7 .tit h3 b {display: block;}
.sub .solution .sec7 .tit span {margin-top: 25px;}
.sub .solution .sec7 .layout2 {margin-top: 35px;}
.sub .solution .sec7 .layout2 .img {left: -80px;}
.sub .solution .sec7 .layout2 .info {top: 85px; left: -30px;}
.sub .solution .sec7 .layout2 .img img{width: 300px; display: inline-block;}



.sub .contact {color: #fff; background: #191919;}
.sub .contact .txt {float: left; padding-left: 6.5%; width: 50%; text-align: left; box-sizing: border-box;}
.sub .contact .txt h3 {font-size: 65px; font-weight: 900;}
.sub .contact .txt p {font-size: 18px; font-weight: 200; word-break: keep-all;}
.sub .contact .txt p b {font-weight: 700;}
.sub .contact .txt .tel {margin-top: 35px;}
.sub .contact .txt .tel em {font-size: 16px; font-weight: 900;}
.sub .contact .txt .tel a {display: block; margin-top: 5px; line-height: 1; font-size: 65px; font-weight: 200; color: #3c82dd;}
.sub .contact .txt .tel a.pic {margin-top: 3px;}
.sub .contact .txt .tel a b {display: inline-block; font-weight: 900; line-height: 1;}
.sub .contact .form {float: left; width: 50%; padding-left: 5%; box-sizing: border-box;}
.sub .contact .form table tr th {padding-bottom: 14px; line-height: 1; font-size: 16px; color: #fff; font-weight: 200; text-align: left; box-sizing: border-box;}
.sub .contact .form table tr.cont_txt th {vertical-align: top;}
.sub .contact .form table tr td {padding-bottom: 14px; box-sizing: border-box;}
.sub .contact .form table tr td input[type=text] {width: 100%; height: 30px; font-size: 15px; font-weight: 200; color: #fff; border: 0; border-bottom: 1px solid #474747; background: transparent; box-sizing: border-box;}
.sub .contact .form table tr td.file input[type=text] {width: calc(100% - 95px); font-size: 15px; font-weight: 300;}
.sub .contact .form table tr td textarea {display: block; resize: none; padding: 10px; width: 100%; height: 110px; font-size: 15px; font-weight: 200; color: #fff; font-size: 14px; font-weight: 200; border: 1px solid #474747; background: transparent; box-sizing: border-box;}
.sub .contact .btm {margin-top: 15px;}
.sub .contact .btm p {float: right; display: inline-block;}
.sub .contact .btm a {display: block; width: 150px; height: 50px; line-height: 46px; font-size: 16px; color: #fff; font-weight: 400; border: 2px solid #fff; text-align: center; box-sizing: border-box;}




.sub .contact {width: 100vw; height: 100vh; background: #191919;}