#wrap { width:100%; }

nav { position: fixed; right: 0; left: 0; z-index: 11; height: 70px; background-color: rgb(30, 30, 70, .95); box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.55); }
nav .gnb { position: relative; width: 1300px; margin: 0 auto; }
nav .gnb h1 { position: absolute; top: 10px; left: 0; height: 34px; width: 228px; }
nav .gnb ul { float: right; }
nav .gnb li { float:left; line-height: 70px; padding:0 25px; font-family: 'GmarketSans', Dotum, sans-serif; font-weight: 700; font-size: 20px;}
nav .gnb li a { color:#fff; }

header { text-align: center; color: #fff; background-attachment: scroll; }
header .container { position: relative; width: 1300px; height: 800px; margin: 0 auto; }
header .container h2 { padding-top: 300px; padding-left: 600px; color: #0abac8; font-size: 42px; text-align: left; }
header .container p { padding:10px 0 0 600px; text-align: left; font-size: 22px; font-weight: 400; line-height: 140%; }
header .container .img_map {position: absolute; top: 250px; left: 0; border-radius: 50%; width: 440px; height: 440px; }
header .container li { float: left; width: 190px; height: 58px; margin-top: 70px; }
header .container li:nth-child(1) { margin-left:600px; }
header .container li:nth-child(2) { margin-left:20px; }

section .container { position: relative; width: 1300px; margin: 0 auto; font-family: 'GmarketSans', Dotum, sans-serif; }
section .container > h2 {text-align: center; font-size:28px; color: #1e1e46; font-size: 42px; font-weight: 800; padding-top: 80px }
section .container > h2.title_aqua { text-align: center; font-size: 32px; font-family: 'GmarketSans', Dotum, sans-serif; color: #0abac8; }
section .container > h2.title_navy { text-align: center; font-size: 32px; font-family: 'GmarketSans', Dotum, sans-serif; color: #1e1e46; }
section .container > h2.title_aqua span.title_small { line-height: 160%; font-size: 28px; font-weight: 700; }
section.group1_wrap { height: 800px; }
section.group1_wrap .container { height: auto; }
.group1_text_01 {text-align: center; padding-top: 10px; font-size: 26px; font-weight: 700; line-height: 140%; }
.group1 { width: 100%; margin-top: 70px; font-family: 'Nanum Gothic', Dotum, sans-serif; }
.group1 li {float: left; width: 420px; margin-left: 20px; background-color: #fff; border-radius: 10px; height: 400px; }
.group1 li:first-child { margin-left: 0; }
.group1 li > h3 { margin-top: 50px; text-align: center; font-size: 24px; font-weight: 800; }
.group1 li .img_icon { padding: 40px 0 0; text-align: center;}
.group1 li > p { text-align: center; font-size: 18px; font-weight: 400; padding: 50px 0; line-height: 120%; }

.group2 { width: 100%; position: relative; }
.group2 li { float: left; font-family: 'Nanum Gothic', Dotum, sans-serif; }
.group2 li.tech-left { margin-top: 200px; width: 500px; font-family: 'GmarketSans', Dotum, sans-serif; }
.group2 li.tech-left > h2 { text-align: left; padding-top: 28px; font-size: 32px; }
.group2 li.tech-left > p { font-size: 30px; }
.group2 li.tech-right { margin: 125px 20px 100px; }
.group2 li.tech-right > .text_wrap ul { margin-top:90px; }
.group2 li.tech-right > .text_wrap ul:nth-child(1) { margin-top:0px; }
.group2 li.tech-right > .text_wrap li:nth-child(2) { margin-left:60px; }
.group2 li.tech-right .text_wrap h2 { font-family: 'GmarketSans', Dotum, sans-serif; font-size: 24px; text-align: left; letter-spacing: -.75px; font-weight: 800; }
.group2 li.tech-right .text_wrap p { font-size: 16px; text-align: left; }

.group3 { width: 100%; margin: 70px 0 100px; font-family: 'Nanum Gothic', Dotum, sans-serif; display: inline-block; }
.group3 li {float: left; width: 420px; margin-left: 20px; background-color: #0abac8; border-radius: 10px; height: 425px; }
.group3 li:first-child { margin-left: 0; }
.group3 li > h3 { margin-top: 40px; text-align: center; font-size: 24px; font-weight: 800; }
.group3 li .img_icon { padding: 50px 0 0; text-align: center;}
.group3 li > p { text-align: center; font-size: 18px; font-weight: 400; padding: 20px 0; line-height: 120%; }

.group4 { width: 100%; position: relative; }
.group4 li { float: left; font-family: 'Nanum Gothic', Dotum, sans-serif; }
.group4 li.tech-left { margin-top: 85px; width: 500px; font-family: 'GmarketSans', Dotum, sans-serif; }
.group4 li.tech-left > h2 { text-align: left; padding-top: 28px; font-size: 32px; font-weight: 800; }
.group4 li.tech-left > p { font-size: 30px; font-weight: 700; padding-bottom: 90px; }
.group4 li.tech-left > img { margin-bottom: 120px; }
.group4 li.tech-right { margin: 110px 20px; }
.group4 li.tech-right .paragraph_wrep { margin-bottom: 90px; }
.group4 li.tech-right .paragraph_wrep h3 { font-family: 'GmarketSans', Dotum, sans-serif; font-size: 24px; text-align: left; letter-spacing: -.75px; font-weight: 800; }
.group4 li.tech-right .paragraph_wrep p { font-size: 16px; text-align: left; padding-top: 10px; line-height: 140%; }

.group5 { width: 100%; margin: 70px 0 0; font-family: 'Nanum Gothic', Dotum, sans-serif; display: inline-block; }
 .group5 ul {
	width: 820px;
    margin: 0 auto;
}
.group5 li {
	float: left; 
	width: 400px; height: 230px; margin-left: 20px; 
	background-color: #fff; 
	border-radius: 10px;
	font-size:30px; font-weight:400;
	position: relative;
}
.group5 li:first-child { margin-left: 0; }
.group5 li i.icon_01,
.group5 li i.icon_02 { position: relative; }
.group5 li i.icon_01:before {
	content:"";
	position: absolute; top:35px; left:40px;
	background:url('../images/group5_icon_01.png') no-repeat;
	width:98px; height:98px;
	background-size: cover;
}
.group5 li i.icon_02:before {
	content:"";
	position: absolute; top:35px; left:40px;
	background:url('../images/group5_icon_02.png') no-repeat;
	width:98px; height:98px;
	background-size: cover;
}
.group5 li span {
	display: block;
	font-size:40px; font-weight:800;
}
.group5 li .cont-text {
	position: absolute; top:55px; left:180px;
}
.group5 li > a {
	position: absolute; bottom: 0; left: 0;
	background: #1e1e46;
	font-size: 20px; color:#fff; line-height: 50px;
	width: 95%; border-radius: 0 0 10px 10px; padding-left:5%;
	cursor: pointer;
}
.group5 li > a:after{
	content:"";
	position: absolute; bottom:0px; right:0px;
	background:url('../images/icon_btn_arrow.png') no-repeat;
	width:50px; height:50px;
	background-size: cover;
}

/* .group5 li > h3 { text-align: center; font-family: 'GmarketSans', Dotum, sans-serif; font-size: 24px; font-weight: 800; background-color: #ffdd00; line-height: 65px; border-radius: 12px 12px 0 0; }
.group5 li > p { text-align: center; font-size: 16px; font-weight: 400; line-height: 120%; }
.group5 li:nth-child(1) > p { padding-top: 75px;}
.group5 li:nth-child(2) > p { padding-top: 55px;}
.group5 li:nth-child(3) > p { padding-top: 25px;} */
.group5 p.explanation { text-align: center; font-size: 18px; font-weight: 700; line-height: 120%; color:#1e1e46; padding:25px 0 100px; }

.partner_wrap { width: 100%; margin: 55px 0 50px; display: inline-block; }
.partner_wrap > h4 { font-size:26px; font-weight: 800; color: #1e1e46; text-align: left; }
.partner_wrap .box_area { background-color: #fff; border-radius: 12px; margin-top: 15px; width: 100%; }
.partner_wrap .box_area li { float: left; padding: 15px 0 15px 25px; }

.foot_wrap { background-color: #f0f0f0; padding: 50px 0; }
.foot_wrap ul { width: 1300px; margin: 0 auto;}
.foot_wrap li { font-family: 'Nanum Gothic', Dotum, sans-serif; font-size: 14px; font-weight: 400; color: #999; line-height: 140%; }
.foot_wrap li.pc { display: block; }
.foot_wrap li.mobile { display: none; }
.foot_wrap li.title { font-size: 18px }
.foot_wrap li span { padding:0 15px; }

.quick_wrap { position: fixed; bottom: 50px; right: 25px; }
.quick_wrap li { padding-top: 15px; }

.bg-light-aqua { background-color: #0abec8; }
.bg-light-yellow { background-color: #fff200; }
.bg-light-white { background-color: #fff; }
.bg-light-navy { background-color: #1e1e46; }
.bg-light-gray { background-color: #f0f0f0; }


@media only screen and (max-width:1399px) and (min-width:1280px){
	nav .gnb { width: 1100px; }
	header .container { width: 1100px; }
	header .container h2 { padding-left: 550px; }
	header .container p { padding: 10px 0 0 550px; }
	header .container li:nth-child(1) { margin-left: 550px; }
	section .container { width: 1100px; }

	.group1 li { width: 350px; margin-left: 25px; }
	
	.group2 li.tech-left { margin-top: 200px; width: 400px; font-family: 'GmarketSans', Dotum, sans-serif; }
	.group2 li.tech-right { margin: 125px 20px; width:660px; }
	.group2 li.tech-right .text_wrap > li:nth-child(2) { width: 510px; }

	.group3 li { width: 360px; margin-left: 10px; }
	.group3 li > p { font-size: 16px; }

	.group4 li.tech-right { margin: 110px 0px; }

	.group5 li { width: 360px; margin-left: 10px; }

	.foot_wrap ul { width: 1100px; }

	.mgl60 { margin-left: 30px !important; }
}

@media only screen and (max-width:580px) and (min-width:320px){
	nav { height: 85px; }
	nav .gnb { width: 100%; }
	nav .gnb h1 { text-align:center; width:100%; }
	nav .gnb h1 img { height: 28px; }
	nav .gnb ul { float: left; width:90%; display: block; position: absolute; top: 40px; margin: 0 5%; }
	nav .gnb li { line-height: 45px; width:18.4%; padding: 0; font-size: .75em; margin-left:2%; text-align: center; }
	nav .gnb li:nth-child(1) { margin-left: 0; }

	section .container { width: 90%; }
	section .container > h2 {  font-size: 1.55em; padding-top: 100px; }
	section .container > h2.title_aqua { font-size: 1.55em; }
	section .container > h2.title_aqua span.title_small { font-size: 1.05em; letter-spacing: -.075em;}
	section .container > h2.title_navy { font-size: 1.55em; }
	section .container > h2.title_navy span.title_small { font-size: 1.05em; letter-spacing: -.075em;}
	.group1_text_01 { font-size: 1em; }

	header .container { width: 90%; height: 800px; }
	header .container .img_map { top: 400px; left: 0; width: 80%; height: auto; margin: 0 10%; }
	header .container .img_map img { width:100%; }
	header .container h2 { padding-top: 150px; padding-left: 0px; font-size: 1.55em; }
	header .container p { padding: 10px 0 0 0px; font-size: .875em; }
	header .container li { width: 48%; height: 58px; margin-top: 20px; }
	header .container li:nth-child(1) { margin-left: 0px; }
	header .container li a img { width:100%; }
	header .container li:nth-child(2) { margin-left: 4%; }

	section.group1_wrap { height: 1130px; }
	.group1 { width: 100%; margin: 0px; }
	.group1 li { float: left;  width: 100%; margin:10px 0px 0; height: 290px; }
	.group1 li:nth-child(1) { margin-top:30px; }
	.group1 li > h3 { margin-top: 30px; font-size: 1.25em; t:center; }
	.group1 li .img_icon { padding: 20px 0 0; }
	.group1 li > p { font-size: .875em; padding: 20px 0; }

	.group2 li.tech-left { margin-top: 100px; width:100%; height: 300px; position: relative; }
	.group2 li.tech-left div:nth-child(1) {position: absolute; top: 100px; text-align: center; width: 100%; }
	.group2 li.tech-left img { height: 175px; }
	.group2 li.tech-left > h2 { padding-top: 0px; font-size: 1.55em; position: absolute; top: 0px; text-align:center; width: 100%; }
	.group2 li.tech-left > p { font-size: 1em; position: absolute; top: 40px; text-align: center; width: 100%; }
	.group2 li.tech-right { margin: 50px 0px 0; }
	.group2 li.tech-right > .text_wrap ul { margin-top: 20px; box-shadow: 0 0 5px 0 rgba(0,0,0,0.25); border-radius: 10px; padding: 8%; }
	.group2 li.tech-right > .text_wrap ul:last-child { margin-bottom:70px; }
	.group2 li.tech-right > .text_wrap li { clear: left; text-align:center; width:100%; }
	.group2 li.tech-right > .text_wrap li:nth-child(2) { margin-left: 0px; margin-top: 20px; }
	.group2 li.tech-right .text_wrap h2 { font-size: 1.25em; text-align: center; }
	.group2 li.tech-right .text_wrap p { font-size: .875em; text-align: center; }

	.group3 { width: 100%; margin: 30px 0 70px;}
	.group3 li { clear: left; width: 100%; margin: 10px 0px 0; height: auto; }
	.group3 li:nth-child(1) { margin:0px; }
	.group3 li .img_icon { padding: 30px 0 0; }
	.group3 li > h3 { margin-top: 20px; font-size: 1.25em; }
	.group3 li > p { font-size: .875em; padding: 10px 0 40px; }

	.group4 li.tech-left { margin-top: 100px; width: 100%; }
	.group4 li.tech-left img { width:100%; margin-bottom: 20px; }
	.group4 li.tech-left > h2 { text-align: center; padding-top: 0px; font-size: 1.55em; }
	.group4 li.tech-left > p { font-size: 1.25em; padding-bottom: 30px; text-align: center; line-height:160% }
	.group4 li.tech-right { margin: 50px 0; }
	.group4 li.tech-right .paragraph_wrep { margin-bottom: 10px; box-shadow: 0 0 5px 0 rgba(0,0,0,0.25); border-radius: 10px; padding: 8%; }
	.group4 li.tech-right .paragraph_wrep h3 { font-size: 1.25em; letter-spacing: -.075em; }
	.group4 li.tech-right .paragraph_wrep p { font-size: .875em; }

	.group5 { width: 100%; margin: 20px 0 0; }
	.group5 ul { width: 90%; margin: 0 5%; }
	.group5 li { clear: left; width: 100%; margin: 10px 0px; height: 230px; font-size:1.4em; letter-spacing: -.75px; }
	.group5 li i.icon_01:before { left: 20px; width: 78px; height: 78px; }
	.group5 li i.icon_02:before { left: 20px; width: 78px; height: 78px; }
	.group5 li .cont-text { left: 120px; }
	.group5 li .cont-text span { font-size: 1.55em; }
	.group5 li > a { font-size: .75em; }
	/* .group5 li:nth-child(3) { margin-bottom:0; }
	.group5 li > h3 { font-size: 1.25em; }
	.group5 li > p { font-size: .875em; }
	.group5 li:nth-child(1) > p, .group5 li:nth-child(2) > p, .group5 li:nth-child(3) > p { padding: 30px 5%; } */
	.group5 p.explanation { text-align: left; font-size: .875em; padding-top: 15px; }

	.partner_wrap { margin: 35px 0 50px; }
	.partner_wrap > h4 { font-size: 1.55em; }
	.partner_wrap .box_area { padding:5% 10%; width: 80%; }
	.partner_wrap .box_area li { float: left; padding: 0; width: 47%; height:26px; line-height:26px; margin: 10px 0 0 6%; text-align: center; }
	.partner_wrap .box_area li:nth-child(2n+1) { margin-left:0; }
	.partner_wrap .box_area li:nth-child(1), .partner_wrap .box_area li:nth-child(2) { margin-top:0; }
	.partner_wrap .box_area li img { width:100%; }

	.foot_wrap ul { width: 90%; }
	.foot_wrap li.pc { display: none; }
	.foot_wrap li.mobile { display:block; }
	.foot_wrap li.mobile span { /*padding-left:37px;*/ padding-left:0; }

	.quick_wrap { bottom: 25px; right: 3%; }
	.quick_wrap li a img { height: 50px; }

}


@media only screen and (max-width:1279px) and (min-width:600px){
	nav { height: 55px; }
	nav .gnb { width: 100%; }
	nav .gnb h1 { text-align:center; width: 20%; }
	nav .gnb h1 img { height: 25px; }
	nav .gnb ul { float: left; width:80%; display: block; position: absolute; top: 0px; right:0; margin: 0; }
	nav .gnb li { line-height: 55px; width:18.4%; padding: 0; font-size: .75em; margin-left:2%; text-align: center; }
	nav .gnb li:nth-child(1) { margin-left: 0; }

	section .container { width: 90%; }

	header .container { width: 90%; }
	header .container .img_map { top: 190px; }
	header .container h2 { padding-top: 250px; padding-left: 54%; font-size: 2em; }
	
	.group5 ul { width: 100%; margin: 0 auto; }
	.group5 li { float: left; width: 48%; margin: 10px 0px 0 2%; height: 230px; font-size:1.4em; letter-spacing: -.75px; }
	.group5 li i.icon_01:before,
	.group5 li i.icon_02:before { left:20px; width: 78px; height: 78px; }
	.group5 li .cont-text { left: 130px; }
	.group5 li .cont-text span { font-size: 1.55em; }
	.group5 li > a { font-size: .75em; }
}