@import url( http://fonts.googleapis.com/css?family=Monoton );
@import url( https://fonts.googleapis.com/css?family=Roboto:400,700,900,100 );
@import url( http://fonts.googleapis.com/earlyaccess/nanumgothic.css );

html {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
body {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
div {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
span {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
object {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
iframe {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
h1 {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
h2 {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
h3 {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
h4 {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
h5 {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
h6 {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
p {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
blockquote {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
pre {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
a {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
abbr {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
acronym {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
address {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
big {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
cite {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
code {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
del {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
dfn {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
em {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
img {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
ins {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
kbd {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
q {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
s {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
samp {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
small {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
strike {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
strong {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
sub {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
sup {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
tt {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
var {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
b {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
i {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
dl {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
dt {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
dd {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
ol {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
ul {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
li {	margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
fieldset {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
form {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
input {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
button {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
label {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
legend {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
table {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
caption {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
tbody {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
tfoot {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
thead {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
tr {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
th {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
td {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
article {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
aside {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
canvas {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
details {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
figure {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
figcaption {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
footer {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
header {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
hgroup {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
menu {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
nav {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
output {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
section {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
summary {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
time {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
mark {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
audio {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
video {margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;}
article {display: block;}
aside {display: block;}
details {display: block;}
figcaption {display: block;}
figure {display: block;}
footer {display: block;}
header {display: block;}
hgroup {display: block;}
menu {display: block;}
nav {display: block;}
section {display: block;}
* {margin: 0px; padding: 0px;}
ol {list-style: none;}
ul {list-style: none;}
a {color: rgb(85, 85, 85); text-decoration: none;}
img {border: 0px currentColor; border-image: none;}
body {width: 100%; font-family: "Nanum Gothic","³ª´®°íµñ", "Dotum"; font-size: 12px;}
button {cursor: pointer;}
ul {list-style: none;}
ol {list-style: none;}
li {list-style: none;}
dl {list-style: none;}
dt {list-style: none;}
dd {list-style: none;}
select {font-family: "Roboto", sans-serif;}
body {-ms-overflow-x: hidden;}
* {-webkit-text-size-adjust: none;}




.ht_direct {width: 100%; position: relative; z-index: 1000;}
.ht_direct .link_direct {padding: 5px 10px; left: 0px; top: -30px; text-align: center; color: rgb(238, 238, 238); line-height: 14px; position: fixed; background-color: rgb(61, 67, 81);}
.ht_direct .link_direct:active {top: 0px; overflow: hidden; text-decoration: none;}
.ht_direct .link_direct:focus {top: 0px; overflow: hidden; text-decoration: none;}



#header_wrap {width: 100%; border-bottom-color: rgb(209, 214, 224); border-bottom-width: 1px; border-bottom-style: solid;}
.on#header_wrap {background: rgb(255, 255, 255); left: 0px; top: 0px; position: fixed; z-index: 20;}





.dim {background: rgb(255, 255, 255); width: 100%; height: 100%; display: none; position: fixed; z-index: 11; opacity: 0.5;}



.on.btn_top {right: 20px; bottom: 10px;}
.btn_top {transition:1s; right: 20px; bottom: -100px; position: fixed; z-index: 10;}
.btn_top a {background: url("../img/ico_arrow.png") no-repeat 20px -82px / 12px auto rgb(0, 0, 0); border-radius: 25px; width: 50px; height: 50px; text-align: center; color: rgb(255, 255, 255); line-height: 52px; font-family: "Roboto", sans-serif; font-size: 15px; display: block;}
.ico {background: rgb(152, 152, 152); border-radius: 4px; width: 4px; height: 4px; margin-right: 5px; vertical-align: middle; display: inline-block !important;}
.ty.ico {background: rgb(255, 255, 255);}
.ico_box {background: url("../img/ico.png") no-repeat 0px -76px; width: 5px; height: 14px; margin-right: 5px; display: inline-block !important;}
.right_arrow {background: url("../img/ico.png") no-repeat 0px 0px; margin-right: 5px; vertical-align: middle; display: inline-block;}
.down {background: url("../img/ico.png") no-repeat 0px 0px; margin-right: 5px; vertical-align: middle; display: inline-block;}
.mail {background: url("../img/ico.png") no-repeat 0px 0px; margin-right: 5px; vertical-align: middle; display: inline-block;}
.right_arrow {background-position: 0px 0px; width: 11px; height: 18px;}
.down {background-position: 0px -30px; width: 17px; height: 26px;}
.mail {background-position: 0px -60px; width: 16px; height: 14px;}

#footer_m .mail {display: none;}
.btn {background: rgb(0, 172, 241); margin: 0px; padding: 10px 20px; border-radius: 5px; height: 22px; color: rgb(255, 255, 255); line-height: 20px; font-size: 18px; vertical-align: top; display: inline-block;}
.en.btn {font-family: "Roboto", sans-serif;}
.btn:hover {background: rgb(7, 148, 204);}
.btn_footer {background: rgb(27, 39, 51); padding: 5px 20px; border-radius: 5px; border: 1px solid rgb(156, 156, 156); border-image: none; height: 15px; color: rgb(192, 192, 192); line-height: 15px; font-size: 11px; margin-top: 5px; vertical-align: top; display: inline-block;}
.btn_footer:hover {background: rgb(13, 22, 31); border: 1px solid rgb(192, 192, 192); border-image: none; color: rgb(255, 255, 255);}
.btn_footer {display: block;}

.btn_box {width: 100%; text-align: center; overflow: hidden;}
.ty.btn_box {padding-top: 10px;}
.ty2.btn_box {	padding-bottom: 30px;}
.btn_box > a {	text-indent: -99999px; display: inline-block;}
.btn_box > a.text {text-indent: 0px; min-width: 150px;}
.btn_case_study {background: url("../img/btn.png") no-repeat; width: 184px; height: 42px;}
.br {display: block;}

#topbar {width: 100%; height: 36px; border-top-color: rgb(209, 214, 224); border-bottom-color: rgb(209, 214, 224); border-top-width: 1px; border-bottom-width: 1px; border-top-style: solid; border-bottom-style: solid;}
.topbar_wrap {margin: 0px auto; width: 1240px; position: relative;}
.topbar_wrap .lang_box {top: 5px; right: 5px; position: absolute;}
.topbar_wrap .lang_box li {float:right;}
.topbar_wrap select.lang_box {padding: 3px 0px 3px 3px; width: 140px;}

.on#header_wrap {background: rgb(255, 255, 255); left: 0px; top: 0px; position: fixed; z-index: 20;}
#header {margin: 0px auto; width: 1240px; font-family: "Roboto", sans-serif; position: relative;}
#header .bg_header {z-index: 99; opacity: 0.9;}
#header h1 {float: left;}
#header h1 a {padding: 15px 30px 10px; display: block;}
#header h1 a img {width: 236px; height: 66px;}
#header_m {display: none;}


#gnb::after {clear: both; display: block; content: "";}
#gnb > li {font-size: 18px; font-weight: 800;}
#gnb > li h2 {font-size: 18px; font-weight: 800;}
#gnb > li > ul > li {font-size: 16px; font-weight: 100;}
#gnb > li h3 {font-size: 16px; font-weight: 100;}
#gnb > li {letter-spacing: -0.1px; float: left; position: relative;}
#gnb > li > a {	padding: 0px 30px; height: 97px; text-align: center; color: rgb(51, 51, 51); line-height: 97px; font-weight: 900; display: block;}
#gnb > li > a:hover {background: ; color: #ee771f;}
#gnb > li > a.on {background: ; color: #ee771f;}
#gnb > li > ul {left: 0px; top: 110px; width: 100%; display: none; position: absolute; z-index: 10; min-height: 97px;}
#gnb > li > ul.on {display: block;}
#gnb > li > ul > li > a.on {}
#gnb > li > ul > li > a {background: rgb(230, 236, 240); padding: 5px 0px; width: 100%; text-align: center; color: rgb(0, 0, 0); letter-spacing: -0.01px; display: block;}
#gnb > li > ul > li > a:hover {background: rgb(0, 153, 221); color: rgb(255, 255, 255);}
#gnb > li > ul > li > a.on {background: rgb(0, 153, 221); color: rgb(255, 255, 255);}

#header > p.tg_link a {background:#ee771f; padding: 4px 17px 5px 20px; border-radius: 20px; top: 35px; right: 0px; color: rgb(255, 255, 255); line-height: 22px; font-size: 17px; position: absolute;}
#header > p.tg_link a:hover {	background: #ee771f;}


#header_m {background: rgb(255, 255, 255); border: 1px solid rgb(196, 209, 218); border-image: none; left: 0px; top: 0px; width: 100%; height: auto; position: fixed; z-index: 99;}
#header_m::after {clear: both; display: block; content: "";}
#gnb_m {width: 100%; text-align: center; font-weight: 400; position: relative;}
#gnb_m::after {clear: both; display: block; content: "";}
#gnb_m h1 {text-indent: -99999px; padding-left: 25px;}
#gnb_m p.tg_link {background: rgb(41, 190, 255); margin: 12px auto; border-radius: 5px; width: 50%; text-align: center;}
#gnb_m p.tg_link > a {padding: 0px 5px; height: 30px; color: rgb(255, 255, 255); line-height: 30px; font-size: 11px;}
#gnb_m h1 > a {background: url("../img/logo_mobile.png") no-repeat center 5px / 150px auto; margin: 0px auto; width: 200px; height: 68px;}
#gnb_m a {	display: block;}
#gnb_m .topbar_m {overflow: hidden;}
#gnb_m .btn_nav {padding: 22px 15px 0px 10px; left: 0px; top: 0px; width: 30px; height: 30px; text-indent: -99999px; font-size: 0px; display: block; position: absolute;}
#gnb_m .btn_nav span {background: rgb(187, 202, 206); width: 100%; height: 5px; margin-bottom: 4px; display: block;}
#gnb_m > ul {border-top-color: rgb(196, 209, 218); border-top-width: 1px; border-top-style: solid; display: none;}
#gnb_m > ul > li {letter-spacing: -0.3px; font-size: 15px; font-weight: bold; border-bottom-color: rgb(196, 209, 218); border-bottom-width: 1px; border-bottom-style: solid;}
#gnb_m > ul > li > h2 {font-size: 13px;}
#gnb_m > ul > li > a {padding: 8px 0px;}
#gnb_m > ul > li > ul {background: rgb(230, 236, 240); padding: 5px 0px; border-top-color: rgb(196, 209, 218); border-top-width: 1px; border-top-style: solid; display: none;}
#gnb_m > ul > li > ul.on {display: block;}
#gnb_m > ul > li > ul > li {font-size: 13px;}
#gnb_m > ul > li > ul > li > h3 {font-size: 13px;}
#gnb_m > ul > li > ul > li > a {padding: 10px 0px;}
#gnb_m > ul > li .btn_box {margin: 15px 5%; border: 1px solid rgb(196, 209, 218); border-image: none; width: 90%;}
#gnb_m > ul > li .btn_box::after {clear: both; display: block; content: "";}
#gnb_m > ul > li .btn_box p {width: 50%; font-size: 13px; float: left;}
#gnb_m > ul > li .btn_box p select {background: url("../img/ico_arrow.png") no-repeat right -15px / 12px auto rgb(255, 255, 255); -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none;}
#gnb_m > ul > li .btn_box p select.lang_box {margin: 12px 0px 10px; border: 0px currentColor; border-image: none; width: 70%;}
#gnb_m > ul > li .btn_box p select.lang_box:focus {border: 0px currentColor; border-image: none;}
#gnb_m > ul > li .btn_box p a {padding: 12px 0px; width: 100%; text-align: center; display: block;}
#gnb_m > ul > li .btn_box p .ico_right {background: url("../img/ico_arrow.png") no-repeat 0px 0px / 12px auto; width: 7px; height: 13px; margin-left: 5px; vertical-align: middle; display: inline-block;}
#gnb_m > ul > li .btn_box p:last-child {background: url("../img/line.png") repeat-y left top;}
#gnb_m > ul > li:last-child {border: 0px currentColor; border-image: none;}



#footer_m {display: none;}
.wrap_ht_info_m {background: rgb(44, 57, 71); padding: 20px 0px; text-align: center; color: rgb(143, 144, 148); font-size: 11px;}
.wrap_ht_info_m span {display: block;}
.wrap_ht_info_m .logo {background: url("../img/logo_footer.png") no-repeat 0px -25px / 152px auto; margin: 0px auto; width: 119px; height: 28px; text-indent: -99999px; display: block;}

#footer {background: rgb(44, 57, 71); width: 100%; font-family: "Roboto", sans-serif;}
#footer .wrap_footer {margin: 0px auto; width: 1240px; padding-top: 25px;}
#footer .wrap_footer a {color: rgb(239, 239, 239); display: inline-block;}

#footer .wrap_ht_info {background: rgb(35, 46, 57); width: 100%; overflow: hidden; margin-top: 30px;}
#footer .ht_info {margin: 0px auto; padding: 40px 20px 40px 20px; width: 1100px; text-align: center; color: rgb(171, 172, 175); line-height: 17px; font-family: "Nanum Gothic","³ª´®°íµñ", "Dotum"; font-size: 13px; position: relative;}
#footer .ht_info a {color: rgb(171, 172, 175);float:center;}
#footer .ht_info .ht_copy {color: rgb(143, 144, 148); font-size: 11px; margin-top: 5px; display: block;}
#footer .logo {background: url("") no-repeat 0% 0% / 142px auto; margin: -20px 20px 0px; left: 30px; top: 45%; width: 142px; height: 80px; text-indent: -99999px; display: block; position: absolute;}
#footer .btn_box {background: rgb(21, 35, 51); border-radius: 3px; border: 1px solid rgb(59, 72, 86); border-image: none; overflow: hidden; font-weight: 800;}
#footer .btn_box a {	width: 50%; height: 50px; text-align: center; line-height: 50px; font-size: 17px; float: left;}
#footer .btn_box a:hover {background: rgb(3, 11, 20);}
#footer .btn_box a.bg2 {background: rgb(0, 189, 57);}
#footer .btn_box a.bg2:hover {background: rgb(0, 135, 40);}
#footer .btn_box a.bg1 {background: #232e39;}
#footer .btn_box a.bg1:hover {background: rgb(3, 11, 20);}


.mt1 {margin-top: 150px;}












@media screen and (max-width:1200px) and (min-width:1025px)
{
.btn_footer {display: inline-block;}
.topbar_wrap {width: 100%;}
#header {width: 100%; display: block;}
#header_m {display: none;}
#gnb > li > a {	padding: 0px 29px;}
#header > p.tg_link a {border-radius: 0px; top: 111px; right: 0px; z-index: 1;}
}


@media screen and (max-width:1024px) and (min-width:769px)
{
.btn_footer {display: inline-block;}
#topbar {display: none;}
#header {display: none;}
#header_m {display: block;}
.topbar_wrap {width: 100%;}
#header {width: 100%;}
#container {margin-top: 0px;}
.on#container {margin-top: 0px;}
#footer_m {display: none;}
#footer .wrap_footer {width: 95%;}
#footer .ht_info {width: 95%;}
#footer .wrap_ht_info {margin-top: 0px;}
.wrap_footer {display: none;}
}


@media screen and (max-width:768px) and (min-width:640px)
{
.btn_footer {display: inline-block;}
#topbar {display: none;}
#header {display: none;}
#header_m {display: block;}
.topbar_wrap {width: 100%;}
#header {width: 100%;}
#container {margin-top: 0px;}
.on#container {margin-top: 0px;}
#footer_m {display: none;}
#footer .wrap_footer {width: 95%;}
#footer .ht_info {padding: 80px 0px 40px 5%; width: 95%;}
#footer .wrap_ht_info {margin-top: 0px;}
#footer .logo {left: 50%; height: 40px; margin-top: -100px; margin-left: -41px;}
.wrap_footer {display: none;}
}


@media screen and (max-width:639px)
{
.btn_footer {display: inline-block;}
#header_wrap {border: 0px currentColor; border-image: none;}
.br {display: inline-block;}
.ty.btn_box {padding-top: 10px;}
#topbar {display: none;}
#header {display: none;}
#header_m {display: block;}
.topbar_wrap {width: 100%;}
#header {width: 100%;}
#container {margin-top: 0px;}
.on#container {margin-top: 0px;}
#footer {display: none;}
#footer_m {display: block;}
.mt1 {margin-top: 30px;}
}