#header {height:36.8rem;}
.banner-close #header {height:21.8rem;}
#header .inwrap {position:relative; top:0; z-index:111000; transition:all 0.5s;}
#top_banner {position:relative; height:15rem; padding-left:9.5rem; padding-right:5rem; background:#171717; transition:height 0.4s;}
#top_banner .cont {display:flex; align-items:center; height:100%;}
#top_banner .cont a {display:block; overflow:hidden; font-family:'NanumSquare',sans-serif; font-weight:400; font-size:3.2rem; color:#bababa; white-space:nowrap; text-overflow:ellipsis;}
#top_banner .cont a strong {font-weight:700;}
#top_banner .bottom {position:absolute; right:4rem; bottom:1.2rem;}



.top_chk {position: relative; display:inline-flex; align-items: center; vertical-align: middle; cursor: pointer; line-height:3.2rem;}
.top_chk input{position: absolute; top:-1rem; left:0; opacity: 0;}
.top_chk span {cursor: pointer; padding-left:3.1rem; font-family:'NanumSquare',sans-serif; font-weight:700; font-size:2rem; color:#bababa;}
.top_chk span i {position:absolute; top:50%; left:0; width:1.8rem; height:1.8rem; margin-top:-0.9rem; background:#fff;}
.top_chk span i::before {background-color: transparent; position:absolute; top: 50%; left: 0.1rem; width: 1.5rem; height: .7rem; margin-top: 0rem; border-style: solid; border-color: #000; border-width: 0 0 .3rem .3rem; transform: rotate(-45deg) scale(0); transition: none; content:'';}
.top_chk input:checked + span i::before {transform: rotate(-45deg) scale(1) translate(29%, -43%); transition: transform 200ms ease-out;}


.container {width:92%; max-width:120rem; margin:auto;}
.container.wide {max-width:146rem;}

.navi-fixed #top_banner {height:12rem;}
.navi-fixed #header .inwrap {position:fixed; top:0; left:0; width:100%; background:#fff;}


@media (min-width: 801px) {
	#gnb {display:flex; align-items:center; justify-content:space-between; height:21.8rem; padding-left:6.25%; padding-right:5.46875%; letter-spacing:0; transition:height 0.5s;}
	#gnb .logo a {display:block; width:10rem; height:8.5rem; background:url('../images/logo.png') no-repeat center/contain;}
	#gnb .gnb-list {display:flex; align-items:center; justify-content:space-between;}
	#gnb .gnb-list li+li {margin-left:8rem;}
	#gnb .gnb-list a {display:block; font-family:'Aldo-SemiBold',sans-serif; font-weight:800; font-size:25px; transition:color 0.4s;}
	#gnb .gnb-list li.on a {color:#6dc0ca}
	#gnb .gnb-list li.current-menu-item a {color:#6dc0ca}			  
	#gnb .btn-menu {display:none;}

	.navi-fixed #gnb {height:15rem;}
	
	@media (max-width: 1700px) {
		#gnb {padding-left:5%; padding-right:5%;}

		#top_banner {padding-left:5%;}
	}
	@media all and (max-width:1300px){
		#gnb {padding-left:6%; padding-right:5.25%;}
		#gnb .gnb-list {flex:1; min-width:0; margin-left:20%;}
		#gnb .gnb-list li+li {margin-left:0;}
		#top_banner {padding-left:6%;}
	}
	@media (max-width: 1200px) {
		#gnb {padding-left:4%;}
		#top_banner {padding-left:4%;}
	}
}
@media (max-width: 800px) {
	#header {height:150px;}
	#gnb {display:flex; align-items:center; justify-content:space-between; position:relative; z-index:11100; height:75px; padding:0 7rem; letter-spacing:0; background:#25c9d4;}
	#gnb .logo a {display:block; width:48px; height:38px; background:url('../images/logo_m.png') no-repeat center/contain;}
	#gnb .btn-menu {width:20px; height:20px; background:url('../images/icon_menu.png') no-repeat center/contain;}
	#gnb .gnb-list {position:fixed; top:135px; left:100%; bottom:0; width:100%; padding-top:15px; text-align:center; background:#25c9d4; transition:left 0.4s;}
	#gnb .gnb-list a {display:inline-block; font-family:'Aldo-SemiBold',sans-serif; font-weight:800; font-size:30px; color:#fff; line-height:2.3;}
	
	.banner-close #header {height:75px;}
	.banner-close #gnb .gnb-list {top:74px;}
	#header.nav-open #gnb .gnb-list {left:0;}
	#header.nav-open #gnb .btn-menu {background-image:url('../images/icon_close.png')}
	.navi-fixed #top_banner {height:75px;}
	
	#top_banner {height:75px; padding-left:7rem;}
	#top_banner .cont {padding-bottom:20px;}
	#top_banner .cont a {font-size:18px;}
	#top_banner .bottom {bottom:6px;}
	.top_chk {line-height:25px;}
	.top_chk span {padding-left:24px; font-size:13px;}
	.top_chk span i {width:14px; height:14px; margin-top:-7px;}
	.top_chk span i::before {width:15px; height:7px; border-width: 0 0 3px 3px}

	

	.container {width:auto; margin:0 7rem;}
}


#intro {}
#intro .container {position:relative; margin-top:-34rem; padding-top:111.8rem; padding-bottom:18rem;}
#intro .container .bg {position:absolute; top:0; left:0; width:100%; height:100%; background:url('../images/intro_bg.jpg') no-repeat center top; background-size:100% auto; opacity:0; transform:translateY(-50rem); transition:all 1.5s;}
#intro.play .container .bg {opacity:1; transform:translateY(0);}
#intro.play #movie-swiper {opacity:1; transform:translateY(0);}
#movie-swiper {opacity:0; transform:translateY(10rem); transition:all 1.5s;}
#movie-swiper .swiper-container {overflow:hidden; border-radius:3rem; background:#000;}
#movie-swiper .movie {position:relative; padding-bottom:56.25%; background:#000;}
#movie-swiper .movie video {position:absolute; top:0; left:0; width:100%; height:100%; object-fit: fill;}
#movie-swiper img {width:100%;}

#movie-swiper .swiper-pagination {position:relative; bottom:auto; padding-left:1rem; padding-top:1.3rem; font-size:0; margin:0; /*text-align:left;*/}
#movie-swiper .swiper-pagination-bullet {width:2.1rem; height:2.1rem; margin:0; margin-right:0.9rem; background:#e1e1e1; opacity:1;}
#movie-swiper .swiper-pagination-bullet-active {background:#3b3b3b;}
#intro .tbox {position:relative; padding-top:15rem; color:#2a2a2a;}
#intro .tbox .img_txt {position:absolute; top:0; left:50%; width:160.9rem; height:66rem; margin-left:-80.4rem; background:url('../images/intro_bg_txt.png') no-repeat center top/contain; content:'';}
#intro .tbox .t01 {font-family: 'Roboto', sans-serif; font-size:12.5rem; line-height:1.03; letter-spacing:0.32em; font-weight:300;}
#intro .tbox .t01 strong {font-weight:700; color:#25c9d3;}
#intro .tbox .t02 {margin-top:7rem; font-size:3.5rem; font-weight:300;}
#intro .tbox .t03 {margin-top:1.5rem; font-size:5.3rem; font-weight:800;}
#intro .btn-download {display:inline-block; position:relative; z-index:2; margin-top:8rem; padding:0 11rem; border-radius:5.5rem; font-size:4rem; color:#fff; font-weight:700; line-height:11rem; background:#2a2a2a;}
@media (max-width: 1700px) {
	#intro .container .bg {background-position:right top; background-size:90% auto;}
}
@media (max-width: 1500px) {
	#intro .container .bg {background-size:85% auto;}
}
@media (max-width: 800px) {
	#intro .container {margin-top:-15rem; padding-top:60rem; padding-bottom:0rem;}
	#intro .container .bg {background-size:100% auto;}
	#intro .tbox {margin-top:5rem; padding:4rem 0 10rem; text-align:center; background:#fff;}
	#intro .tbox::before {top:1rem; left:-6rem; right:-6rem; width:auto; height:100rem; margin:0;}
	#intro .tbox .t01 {margin:0 -2rem; font-size:9.5rem; letter-spacing:0.2em;}
	#intro .tbox .t02 {margin-top:5rem; font-size:2.8rem;}
	#intro .tbox .t03 {margin-top:1rem; font-size:4.3rem;}
	#intro .btn-download {margin-top:6rem; padding:0 8.7rem; border-radius:4.2rem; font-size:3rem; line-height:8.4rem;}
}



#make {background:#25c9d3;}
#make .container {display:flex; align-items:center; position:relative; height:82rem;}
#make .ltxt {position:absolute; left:-11rem; bottom:0; width:23.9rem; height:83.2rem; background:url('../images/make.png') no-repeat center/contain;}
#make .tbox {margin-left:auto; color:#fff; text-align:right;}
#make .t01 {font-family: 'Roboto', sans-serif; font-size:8rem; line-height:1.1875; color:#fff; font-weight:400; letter-spacing:0.03em;}
#make .t02 {margin-top:5.2rem; font-size:3.7rem; line-height:1.62162;}
#make .t02 strong {font-weight:700;}
@media (max-width: 800px) {
	#make .container {height:62.2rem; margin:0;}
	#make .ltxt {left:0; width:17.8rem; height:100%;}
	#make .tbox {width:100%; text-align:center;}
	#make .t01 {font-size:6.3rem;}
	#make .t02 {margin-top:4rem; font-size:3rem;}
}





.mtit {margin-bottom:9rem; font-family:'Aldo-SemiBold',sans-serif; font-weight:800; font-size:7rem; color:#2b2b2b; text-align:center; line-height:1;}
.mtit span {display:block; margin-top:1.5rem; font-family: 'SUIT', sans-serif; font-size:2.7rem; font-weight:500;}
.section {padding:20rem 0 23rem;}
@media (max-width: 800px) {
	.mtit {margin-bottom:6rem; font-size:6.5rem;}
	.mtit span {}
	.section {padding:13.5rem 0;}
}


#business .dlist {display:flex; margin:-2rem;}
#business .dlist > li {flex:1; padding:2rem;}
#business .dlist > li i {display:block; position:relative; z-index:1; padding-bottom:100%;}
#business .dlist > li i::before {position:absolute; top:0; left:0; right:0; bottom:0; z-index:1; background:no-repeat center/contain; content:'';}
#business .dlist > li i::after {position:absolute; top:-2rem; left:-2rem; right:-2rem; bottom:-2rem; z-index:0; border-radius:100%; background:#fff; content:'';}
#business .dlist > li:nth-child(1) {padding-top:15rem;}
#business .dlist > li:nth-child(3) {padding-top:10rem;}
#business .dlist > li:nth-child(1) i::before {background-image:url('../images/icon_business01.png');}
#business .dlist > li:nth-child(2) i::before {background-image:url('../images/icon_business02.png');}
#business .dlist > li:nth-child(3) i::before {background-image:url('../images/icon_business03.png');}
#business .dlist > li:nth-child(4) i::before {background-image:url('../images/icon_business04.png');}
#business .dlist .tcont {margin-top:-9rem; padding:16.5rem 0 9rem; border-radius:0 0 13.5rem 13.5rem; text-align:center; color:#363636; background:#efefef;}
#business .dlist > li:nth-child(even) .tcont {color:#fff; background:#464646;}
#business .dlist > li:nth-child(even) .slist li::before {background:#fff;}
#business .dlist .tcont > div {display:inline-block; text-align:left;}
#business .dlist .tcont strong {font-size:3rem; line-height:1.2424}
#business .dlist .tcont strong span {display:block; font-size:2.6rem;}
#business .dlist .tcont strong span.small {font-size:2.1rem;}
#business .slist {margin-top:2rem;}
#business .slist li {position:relative; padding-left:1.3rem; font-size:2.2rem; line-height:1.2727;}
#business .slist li::before {position:absolute; top:50%; left:0; width:0.5rem; height:0.5rem; margin-top:-0.3rem; border-radius:100%; background:#363636; content:'';}
@media (max-width: 800px) {
	#business .container {padding:0 7.4rem;}
	#business .dlist {flex-wrap:wrap; justify-content:center; margin:-2.5rem -2rem; padding-bottom:14rem;}
	#business .dlist > li {padding:2.5rem 2rem;}
	#business .dlist > li:nth-child(1) {padding-top:2rem; position:relative; top:14rem;}
	#business .dlist > li:nth-child(3) {padding-top:2rem; position:relative; top:14rem;}
	#business .dlist > li i {width:21.6rem; margin:auto;}
	#business .dlist > li i::after {top:-1.6rem; left:-1.6rem; right:-1.6rem; bottom:-1.6rem;}
	#business .dlist .tcont {max-width:21.6rem; margin:-7.5rem auto 0; padding:10.6rem 0 7rem;}
	#business .dlist .tcont strong {font-size:2.3rem;}
	#business .dlist .tcont strong span {font-size:2.1rem;}
	#business .dlist .tcont strong span.small {font-size:1.7rem;}
	
	
}

#benefit {background:#00c2cd;}
#benefit .mtit {color:#fff;}
#benefit .list {display:flex; flex-wrap:wrap; justify-content:center; margin:-3rem 0; color:#fff; text-align:center; letter-spacing:-0.05em;}
#benefit .list li {width:20%; padding:3rem 0; text-align:center;}
#benefit .list li::before {display:block; width:20.5rem; height:20.5rem; margin:auto; background:url('../images/icon_benefit.png') no-repeat center; background-size:100% auto; content:'';}
#benefit .list li:nth-child(1)::before {background-position:0 0%;}
#benefit .list li:nth-child(2)::before {background-position:0 10%;}
#benefit .list li:nth-child(3)::before {background-position:0 20%;}
#benefit .list li:nth-child(4)::before {background-position:0 30%;}
#benefit .list li:nth-child(5)::before {background-position:0 40%;}
#benefit .list li:nth-child(6)::before {background-position:0 50%;}
#benefit .list li:nth-child(7)::before {background-position:0 60%;}
#benefit .list li:nth-child(8)::before {background-position:0 70%;}
#benefit .list li:nth-child(9)::before  {background-position:0 80%;}
#benefit .list strong {display:block; margin-top:2rem; font-size:2.7rem; font-weight:800;}
#benefit .list p {margin-top:0.8rem; font-size:2.2rem; font-weight:500; line-height:1.2727;}
@media (max-width: 800px) {
	#benefit .list {margin:-3.5rem -2.2rem;}
	#benefit .list li {width:33.333%; padding:3.5rem 2.2rem;}
	#benefit .list li::before {width:auto; height:auto; padding-bottom:100%;}
	#benefit .list li > div {margin:0 -2rem;}
	#benefit .list strong {font-size:2.5rem;}
	#benefit .list p {font-size:2.1;rem;}
}

#works .list {display:flex; flex-wrap:wrap; margin:-1.8rem -1.3rem; padding-bottom:7rem;}
#works .list li {width:50%; padding:1.8rem 1.3rem;}
#works .list li:nth-child(2),
#works .list li:nth-child(4),
#works .list li:nth-child(6),
#works .list li:nth-child(8),
#works .list li:nth-child(10),
#works .list li:nth-child(12),
#works .list li:nth-child(14),
#works .list li:nth-child(16),
#works .list li:nth-child(18),
#works .list li:nth-child(20) {position:relative; top:7rem;}
#works .list .inbox {overflow:hidden; position:relative; border-radius:3rem; background:#25c9d3;}
#works .list .inbox .tit {display:flex; align-items:center; position:relative; z-index:2; height:20rem; padding:0 3rem 6rem; word-break:keep-all; font-size:3.5rem; color:#fff; font-weight:500; line-height:1.3428; letter-spacing:-0.05em; text-align:center;}
#works .list .inbox .tit::before {position:absolute; bottom:0; left:0; right:0; height:6rem; background:linear-gradient(to bottom, rgba(37,201,211, 1) 0%, rgba(37,201,211, 0) 100%); content:'';}
#works .list .inbox .tit p {width:100%;}
#works .list .inbox .img {position:relative; margin-top:-6rem; padding-bottom:51.10%;}
#works .list .inbox .img img {position:absolute; top:0; left:0; width:100%; min-height:100%; object-fit: cover;}
#works .btn-more {display:block; width:40rem; margin:7rem auto 0; border-radius:4.5rem; border:0.3rem solid #25c9d3; font-size:3.2rem; color:#25c9d3; font-weight:500; text-align:center; line-height:8.4rem; transition:all 0.4s;}
#works .btn-more:hover {color:#fff; background:#25c9d3;}
@media (max-width: 800px) {
	#works .list {margin:0; padding:0;}
	#works .list li {width:100%; padding:0; position:relative; top:0 !important;}
	#works .list li+li {margin-top:5rem;}
	#works .list li:nth-child(3),
	#works .list li:nth-child(4) {/*display:none;*/}
	#works .list .inbox .tit {height:27rem; font-size:4rem;}	
}


#clients {position:relative; z-index:1110; background:#f7f7f7;}
#clients .list {display:flex; flex-wrap:wrap; margin:-2.8rem;}
#clients .list li {width:33.333%; padding:2.8rem; text-align:center;}
#clients .list .img img {max-width:100%;}


#map {overflow:hidden; position:relative; z-index:0; height:64rem;}
#map .inbox {position:absolute; top:0px; bottom:0px; left:-300px; right:-300px; z-index:0; /*filter: grayscale(100%);*/}
#map iframe {position:absolute; top:0; left:0;  width:100% !important; height:100% !important;}


#footer {position:relative; z-index:1111; padding:20rem 0; color:#fff; background:#252525;}
#footer .container {display:flex;}
#footer .container .logo {width:15.7rem; height:13.3rem; margin-right:19.5rem; background:url('../images/blogo.png') no-repeat center/contain;}
.footer_info {font-size:2.7rem; line-height:1.48;}
.company_nm {margin-bottom:2rem; font-weight:700;}
.company_nm strong {display:inline-block; min-width:46rem; font-size:3.2rem; font-weight:700;}
.contact {font-family: 'Roboto', sans-serif; font-weight:300;}
.contact span {display:inline-block;}
.contact span.email {min-width:46rem;}
.btn-inquery {display:block; width:28rem; margin-top:5rem; border:0.3rem solid #fff; border-radius:3.6rem; line-height:6.7rem; font-size:2.8rem; font-weight:700; text-align:center; transition:all 0.4s;}
.btn-inquery:hover {color:#252525; background:#fff;}

@media (max-width: 800px) {
	#footer {padding:15rem 0;}
	#footer .container {flex-wrap:wrap; position:relative;}
	.footer_info {width:100%; margin-top:5rem; }
	.company_nm {display:flex; align-items:center; justify-content:space-between;}
	.company_nm strong  {min-width:auto;}
	.contact {display:flex; align-items:center; justify-content:space-between;}
	.contact span.email {min-width:auto;}

	.btn-inquery {position:absolute; top:6rem; right:0; margin:0;}
}