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


section.main {width:100%; background:#eaebf0;}
.sg-main {width:100%; height:494px; padding:0 10px; background:url(../images/main/sg-main.jpg) center no-repeat;}
.sg-main-text {width:100%; max-width:1200px; margin:0 auto; }
.main-text {display:inline-block;padding-top:50px; font-size:45px; font-weight: 600; color:#25344c;}
.main-text span{display:inline-block; font-size:45px; color:#568ae1; vertical-align: top;}
.sg-main-text>span {display:block; padding-top:15px; font-size:30px; font-weight:300;}
.sg-main-text .text-ul {padding-top:40px; font-size:15px; line-height:23px;}
.sg-main-text .icon-ul {padding-top:40px;}
.sg-main-text .icon-ul li {position:relative; display:inline-block; margin-left:10px; padding-right:20px; height:35px; vertical-align: top;}
.sg-main-text .icon-ul li:after {position:absolute; top:0; right:0; display:block; width: 1px; height:36px; content:""; background:url(../images/main/mic-bar.jpg) no-repeat;}
.sg-main-text .icon-ul li:last-child:after {background:none;}
.sg-main-text .icon-ul li span {font-size:15px;}

.sg-main-text .icon-ul li.mic01 {background: url(../images/main/sg-mic01.png) left center no-repeat;}
.sg-main-text .icon-ul li.mic01 span {display:block; padding-left:44px;}
.sg-main-text .icon-ul li.mic02 {background: url(../images/main/sg-mic02.png) left center no-repeat;}
.sg-main-text .icon-ul li.mic02 span {display:block; padding-left:40px;}
.sg-main-text .icon-ul li.mic03 {background: url(../images/main/sg-mic03.png) left center no-repeat;}
.sg-main-text .icon-ul li.mic03 span {display:block; padding-left:35px;}
.sg-main-text .icon-ul li.mic04 {background: url(../images/main/gd-software.png) left center no-repeat;}
.sg-main-text .icon-ul li.mic04 span {display:block; padding-left:68px;}
.sg-main-text a.demo-banner{display:inline-block;padding:10px 14px;margin:30px 5px 0 0;border-radius:5px;font-size:16px;color:#fff;font-weight: 400;}
.sg-main-text a.demo-banner.angular{background: #dd022f;}
.sg-main-text a.demo-banner.react{background: #00ccff;}
.sg-main-text a.demo-banner.vue{background: #42b883;}
.sg-main-text a.demo-banner:hover,.sg-main-text a.demo-banner:focus{color:#fff;text-decoration: none;}
.sg-main-text a.demo-banner.angular:hover{background: #cb002a;}
.sg-main-text a.demo-banner.react:hover{background: #02c2f2;}
.sg-main-text a.demo-banner.vue:hover{background: #45aa7d;}
.sg-main-text a.demo-banner>img{display:inline-block;padding:0;margin-right:3px;vertical-align: sub;opacity: 1;}

.sg-main-text img {padding-left:15px; opacity: 0.8;}
.sb-btn-guide {display: inline-block;background: #2662c3;padding: 10px;margin-left:8px;color: #fff;text-shadow: 1px 0; border-radius: 5px;vertical-align: super;}
.sb-btn-guide:hover {color:#fff; background:#194ea2; text-decoration: none;cursor: pointer;}
.sg-fwrap {display:table; width:100%; height:500px;}
.sg-fwrap>li {float:left;vertical-align:top; height:250px; }
.sg-fwrap li>div {display:block; width:100%;}
.sg-fwrap li>div>img {display:inline-block; float:left; padding:70px 50px; vertical-align: top;}
.sg-fwrap li>div>div {display:inline-block; width:auto; vertical-align: top;}
.sg-fwrap li>div>div h3 {position:relative; padding-bottom:40px; font-size: 23px; font-weight:300;}
.sg-fwrap li>div>div h3:after {position:absolute; bottom:20px; display:block; width:21px; height:1px; background:#fff; content:"";}
.sg-fwrap li>div>div>ul>li {position:relative; padding-left:20px;  font-size:15px; line-height:25px; font-weight:300;}
.sg-fwrap li>div>div>ul>li:before {position: absolute; left:6px; top:10px; display:block; width:2px; height:2px; background:#fff; content:"";}
.sg-fwrap .white>div>div>ul>li:before {position: absolute; left:6px; top:10px; display:block; width:2px; height:2px; background:#a3a3a3; content:"";}
.sg-fwrap .white {position: relative; display: inline-block;width:50%; background:#fff;}
.sg-fwrap .white>div {position:absolute; right:0; width:100%; max-width:600px; height:100%; }
.sg-fwrap .white>div>div {padding-top:40px; }
.sg-fwrap .white>div>div h3:after {background:#a7a7a7;}
.sg-fwrap .blue {position: relative;display:inline-block;width:50%;background:#386ec7;}
.sg-fwrap .blue>div {position:absolute; left:0; width:100%; max-width:600px;  height:100%; color:#fff; }
.sg-fwrap .blue>div>div {padding-top:40px; }
.sg-fwrap .gray01 {position: relative;display:inline-block;width:50%;  background:#464a4d;}
.sg-fwrap .gray01>div {position:absolute; right:0; width:100%; max-width:600px; height:100%; background: #35393c; color:#fff;}
.sg-fwrap .gray01>div>div {padding-top:40px; }
.sg-fwrap .gray02 {position: relative;display:inline-block;width:50%; background:#464a4d;}
.sg-fwrap .gray02>div {position:absolute; left:0; width:100%; max-width:600px; height:100%; color:#fff; }
.sg-fwrap .gray02>div>div {padding-top:40px; }

section.con2 { width:100%; background: #fff;}
.sg-fwrap02 {width:100%; max-width:1200px; padding: 0 10px; margin:0 auto;}
.sg-fwrap02 h3 {position:relative; padding-top:70px; padding-bottom:40px; text-align:center; font-size:38px; font-weight:600; color:#000;letter-spacing: -2px; }
.sg-fwrap02 h3:after {position:absolute; bottom:20px; right:0; left:0; display:block; width:32px; height:1px; background:#999; margin:0 auto; content:"";}
.sg-fwrap02 span {display:block; font-size:17px; color:#000; text-align:center;}
.sg-fwrap02>ul {display:table;width:100%; padding:70px 0; }
.sg-fwrap02>ul>li{float:left;display:inline-table; width:50%; padding-bottom:40px;cursor: pointer;}
.sg-fwrap02>ul>li:hover img{transform: scale(1.1);transition: 0.8s;}
.sg-fwrap02>ul>li>a>img{transition: 0.8s;}
.sg-fwrap02>ul>li>img {display:table-cell; vertical-align:top;}
.sg-fwrap02>ul>li:hover>div>h4>a{color:#386ec7;}
.sg-fwrap02>ul>li>div{display:table-cell; width:80%; vertical-align:middle;}
.sg-fwrap02>ul>li>div>h4 :hover{text-decoration: none;color:#333;}
.sg-fwrap02>ul>li>div>h4 {padding-bottom:10px; font-size:17px; color:#333; font-weight:400; text-shadow:0.5px 0;}
.sg-fwrap02>ul>li>div>ul>li { font-size:15px; color:#333; font-weight:300;line-height:21px;}

section.con3 {padding: 0 10px; padding-bottom:50px; background: url(../images/main/main-bg02.png) no-repeat; background-size: cover;}
section.con3 h3 {position: relative; padding-top: 70px; padding-bottom: 40px; text-align: center; font-size:33px; color:#fff; font-weight:500;}
section.con3 h3:after {position:absolute; bottom:20px; right:0; left:0; display:block; width:32px; height:1px; background:#fff; margin:0 auto; content:"";}
section.con3 img {display:block; margin:0 auto; text-align:center; }
section.con3 img:last-child {padding-top:50px; }
section.con3>span {display:block; padding-bottom:50px; font-size:17px; color:#fff; text-align:center; line-height:23px; opacity: 0.5;}
section.con3 .sbcode-box {display:block; border-radius: 30px; padding-bottom:30px; text-align:center;}
section.con3 .sbcode-box > div {display:inline-block;background:#fff; border-radius: 20px;}
section.con3 .sbcode-box p {padding:1em 0; padding:1.5em 0 1em 0; text-shadow: 1px 0; font-size: 20px; color:#394380;}
section.con3 .sbcode-box ul {display:inline-block; padding:0em 3em 1em 3em;  font-size:18px; text-shadow: 0.7px 0;}
section.con3 .sbcode-box ul li {padding:0.5em 2em; margin-bottom:0.5em; background:#f5f5f5; line-height:30px; letter-spacing: 2px; border-radius: 10px;}
section.con3 .sbcode-box ul span.blue {color:#000080;}
section.con3 .sbcode-box ul span.red {color:#e1265b;}
section.con3 .sbcode-box ul span.green {color:#5f7d6d;}
section.con3 .sbcode-box:after {display:block; width:30px; height:25px; margin:0 auto; background: url(../images/main/con-ul-after.png) no-repeat; content:"";}

section.con4 { width:100%; max-width:1200px; padding:0 10px; margin:0 auto; background: #fff;}
section.con4 h3 {position:relative; padding-top:70px; padding-bottom:40px; text-align:center; font-size:38px; font-weight:600; color:#000; letter-spacing: -2px;}
section.con4 h3:after {position:absolute; bottom:20px; right:0; left:0; display:block; width:32px; height:1px; background:#999; margin:0 auto; content:"";}
section.con4 span {display:block; font-size:17px; color:#000; text-align:center;}
section.con4 {padding-bottom:70px;}
section.con4>div {width:100%; max-width:1200px; margin:0 auto;}
section.con4>div>h4 { margin:0 auto; text-align:center;}
section.con4>div>h4>span{display:inline-block; margin-top:70px; padding:0.5em 0.7em;color:#fff; font-size:15px; background:#ffaa7b; border-radius: 20px; font-weight:400;  text-align:center;}

/* .logo-p-wrap {position:relative;}
.logo-p-wrap ul {display:table; width:100%; padding-top:20px; }
.logo-p-wrap ul li {display:inline-block;float:left; width:20%; margin-top:15px; }
.logo-p-wrap ul li img{/*border:1px solid #e5e5e5; box-sizing: border-box; } */
.logo-wrap {text-align:center;}
.logo-wrap ul {padding-top:3em;overflow:hidden;}
.logo-wrap li {display:inline-block;  margin-left:20px; margin-bottom:15px;}
.logo-wrap .more {position:absolute; right:0; top:80px;  display:block; width:15px; height:15px;background: url(../images/main/logo-more.png) no-repeat; font-size:0; }
section.con4>div>h4>span {background:#444b53;}
/* .logo-c-wrap {position:relative;}
.logo-c-wrap ul {display:table; width:100%; padding-top:20px; }
.logo-c-wrap ul li {display:inline-block; float:left;width:20%; margin-top:15px; }
.logo-c-wrap ul li img{border:1px solid #e5e5e5; box-sizing: border-box; }
.logo-c-wrap .more {position:absolute; right:0; top:80px;  display:block; width:15px; height:15px; background: url(../images/main/logo-more.png) no-repeat; font-size:0; } */
section.con4>div>.c-tit span {background:#444b53;}
/* .logo-b-wrap {position:relative;}
.logo-b-wrap ul {display:table; width:100%; padding-top:20px; }
.logo-b-wrap ul li {display:inline-block; float:left;width:20%; margin-top:15px; }
.logo-b-wrap ul li img{border:1px solid #e5e5e5; box-sizing: border-box; }
.logo-b-wrap .more {position:absolute; right:0; top:80px;  display:block; width:15px; height:15px; background: url(../images/main/logo-more.png) no-repeat; font-size:0; } */
section.con4>div>.b-tit span {background:#444b53;}




@media (max-width: 400px) {
	.sg-main {padding:0;}
	.sg-main-text img {display:none;}
}

@media (max-width: 768px) {
	.sg-main-text img {display:none;}
	.sg-fwrap .white>div>div {padding-left:0px;}
	.sg-fwrap .blue>div>div {padding-left:0px;}
	.sg-fwrap .gray01>div>div {padding-left:0px;}
	.sg-fwrap .gray02>div>div {padding-left:0px;}
	.sg-main { height:auto; padding:0 0 30px 0;background:#fff;}
	.sg-main>img {width:100%;}
	.sg-main-text {text-align:center; padding:40px 0;}
	.sg-main-text .text-ul { padding-top:30px; font-size:15px; line-height: 20px}
	.main-text {padding-top:50px; margin-top:-170px; font-size:30px; }
	.main-text span {font-size:30px;}
	.sg-main-text>span {font-size:20px;margin-top:10px; background: #2159b2a8;color: #fff;padding: 0 10px;}
	.sg-main-text .icon-ul li.mic01 {background-position:center; padding-right:0;}
	.sg-main-text .icon-ul li.mic02 {background-position:center;padding-right:0;}
	.sg-main-text .icon-ul li.mic03 {background-position:center;padding-right:0;}
	.sg-main-text .icon-ul li.mic04 {background-position:center;padding-right:0;}
	.sg-main-text .icon-ul li.mic01 span {padding-top:50px; padding-left:0;}
	.sg-main-text .icon-ul li.mic02 span {padding-top:50px; padding-left:0;}
	.sg-main-text .icon-ul li.mic03 span {padding-top:50px; padding-left:0;}
	.sg-main-text .icon-ul li.mic04 span {padding-top:50px; padding-left:0;}
	.sg-main-text .icon-ul li {margin:0 10px;}
	.sg-main-text .icon-ul {display: table;margin: 0 auto; padding-bottom:40px;}
	.sg-main-text .icon-ul li:after {right:-10px;}
	.sg-fwrap li>div>div h3:after {display:none;}
	.sg-fwrap li>div>div h3 {position:static; padding-bottom:0; font-size: 16px; font-weight:300; line-height:50px;}
	.sg-fwrap>li {height:50px; margin:0; text-align:center; }
	section .sg-fwrap>li.white{display:block; width:100%; background:#f4f6f9;}
	section .sg-fwrap>li.white>div {position:static; max-width:100%;}
	.sg-fwrap li.white>div>div {padding:0 !important;line-height:50px;}
	section .sg-fwrap>li.blue{position:static;display:block; width:100%;}
	section .sg-fwrap>li.blue>div {position:static; max-width:100%;}
	.sg-fwrap li.blue>div>div {padding:0 !important;line-height:50px;}
	section .sg-fwrap>li.gray01{display:block; width:100%;}
	section .sg-fwrap>li.gray01>div {position:static; max-width:100%;}
	.sg-fwrap li.gray01>div>div {padding:0 !important;line-height:50px;}
	section .sg-fwrap>li.gray02{display:block; width:100%;}
	section .sg-fwrap>li.gray02>div {position:static; max-width:100%;}
	.sg-fwrap li.gray02>div>div {padding:0 !important;line-height:50px;}
	.sg-fwrap {height:auto;}
	.sg-fwrap02>h3 {display:none;}
	.sg-fwrap02>span {display:none;}
	.sg-fwrap02>ul>li {display:table; margin-bottom:10px; width:100%;}
	.sg-fwrap02>ul>li img {width:70%;}
	section.con3 img {width:100%;}
	.sg-fwrap02>ul>li>img {width:50px; margin-left:20px;}
	.sg-fwrap02>ul>li {padding-bottom:0;}
	.sg-fwrap02>ul {padding:20px 0;}
	section.con3 {display:none;}
	section.con4 {border-top:1px solid #e5e5e5;}
	section.con4 h3 {padding-top:30px;}
	section.con4 span {display:none;}
	section.con4>div>h4 {display:block; }
	section.con4>div>h4>span { width:100%; padding:0; margin-top:0; border-radius:0; }
	section.con4>div>.p-tit span {height:50px; margin-bottom:10px; background:#e8eef6; color:#051f3c; line-height:50px;}
	section.con4>div>.c-tit span {height:50px; margin-bottom:10px; background:#e8eef6; color:#051f3c; line-height:50px;}
	section.con4>div>.b-tit span {height:50px; margin-bottom:10px; background:#e8eef6; color:#051f3c; line-height:50px;}
	/* .logo-p-wrap ul {display:none;} */
	/* .logo-c-wrap ul {display:none;} */
	/* .logo-b-wrap ul {display:none;} */
	.logo-wrap ul {padding-top:1em;}
	.logo-wrap li {margin-left:0;  margin-right: 10px; margin-bottom: 10px; border: 1px solid #e5e5e5; box-sizing: content-box;}
	.logo-wrap li img {width:150px;}
	footer .sg-footer-wrap {padding:0;}
	.sg-footer-wrap>div:first-child p {float:none; padding:20px 20px 0 20px;}
	section.con4 {padding-bottom:40px;}
	.logo-p-wrap .more {top:20px; right:10px;}
	.logo-c-wrap .more {top:20px; right:10px;}
	.logo-b-wrap .more {top:20px; right:10px;}
	.sg-footer-copyright {letter-spacing:-1px;}
	.sg-footer-copyright span {display:none;}
	section.con4 h3 {font-size:25px;}
	.sg-fwrap02>ul>li>div>h4 {font-size:16px;}
	.sg-sub-wrap .sg-subcon {padding:0;}
	.sg-gnb-wrap {padding-left:10px;}
	.sg-main {padding:0;}
}

@media (max-width: 992px) {
	.sg-fwrap li>div>img {display:none;}
	.sg-footer-wrap>div:first-child img {display:inline-block;}
	.sg-footer-wrap>div:first-child p {float:right; display:inline-block; padding-top:0; vertical-align:top; }
	.sg-fwrap02>ul>li>img {width:65px;}	
	.sg-fwrap02>ul>li>div>ul {display:none;}
	.sg-fwrap .white>div>div {padding-left:40px;}
	.sg-fwrap .blue>div>div {padding-left:40px;}
	.sg-fwrap .gray01>div>div {padding-left:40px;}
	.sg-fwrap .gray02>div>div {padding-left:40px;}
	.sg-subcon>div.con-div {max-width:100%;}
	.sg-main {padding:0 10px;}
}

@media (max-width: 1080px) {
	.sbcode-box2 {overflow: scroll;}
}

@media (max-width: 1200px) {
	.sg-gnb-wrap .sg-gnb-box {vertical-align:middle;}
	.sg-gnb-wrap .sg-gnb-box .sg-top-search {padding-top:0; padding-right:20px; }
	section.con3 img:last-child {width:100%;}
	.logo-p-wrap ul li img {width:100%;}
	.logo-c-wrap ul li img {width:100%;}
	.logo-b-wrap ul li img {width:100%;}
	.sg-sub-wrap .sg-subcon {padding:0;}
}