@charset "UTF-8";
/* reset */
html {font-size: 16px; font-weight: 200; }
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, textarea, p, blockquote, th, td, input, select, textarea, button { margin: 0; padding: 0; }
fieldset, img { border: 0 none; }
dl, ul, ol, menu, li { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
input, select, textarea, button { vertical-align: middle; }
input::-ms-clear {
display:none;
}
input::-webkit-contacts-auto-fill-button {
visibility:hidden;
display:none !important;
pointer-events:none;
position:absolute;
right:0;
}
button { border: 0 none; border-radius: 0; background-color: transparent; cursor: pointer; }
body { background: #383838; word-wrap: break-word; word-break: keep-all; }
body, th, td, input, select, textarea, button { font-size: 16px; font-weight: 200; line-height: 1.7; font-family: 'Times New Roman', 'NotoSansCJKkr', 'Malgun Gothic', '맑은 고딕', 'Apple SD Gothic Neo', '돋움', dotum, sans-serif; color: #dedede; }
a { color: #000; text-decoration: none; }
a:active, a:hover, a.line { text-decoration: underline; }
a:active { background-color: transparent; }
address, caption, cite, code, dfn, em, var { font-style: normal; font-weight: 200; }
table { border-collapse: collapse !important; }
html[data-useragent*=mac] body * {
 font-family:'Apple SD Gothic NEO',helvetica,sans-serif!important
}
::-moz-selection{background:#000;color:#fff;text-shadow:none}
::selection{background:#000;color:#fff;text-shadow:none}

/* global */
.skip { overflow: hidden; position: absolute; left: -500em; }

/* common */
.article { position:relative; width:100%; margin:0 auto; }
.about-wrap h2, .works-wrap h2, .contactus-wrap h2 { font-size: 30px; line-height: 30px; font-weight: 100; color: #fff; padding-left: 20px; }
.about-wrap h2 br, .works-wrap h2 br, .contactus-wrap h2 br { display: none; }
.about-wrap .seaction-info, .works-wrap .seaction-info { font-size: 14px; width: 100%; position: inherit; right: 0; top: 0; padding: 20px; transform: translate(0, 0)}

@media (min-width: 768px) {
.article { position:relative; width:1180px; margin:0 auto; }
.about-wrap h2, .works-wrap h2, .contactus-wrap h2 { font-size: 60px; line-height: 60px; font-weight: 100; color: #fff; padding-left: 0; }
.about-wrap h2 br, .works-wrap h2 br, .contactus-wrap h2 br { display: block; }
.about-wrap .seaction-info, .works-wrap .seaction-info { font-size: 14px; width: 680px; position: absolute; right: 0; top: 0; padding: 0; }
}
/* header */
.header { position: fixed; width: 100%; z-index: 100; }
.header .trans { content:""; position: absolute; width: 100%; height: 60px; background-color: #E60012; opacity: 0.8; z-index: 1; }
h1 { z-index: 10; color: #fff; position: absolute; left: 20px; top: 15px; font-size: 1.6rem; }
h1 a, h1 a:hover { color: #fff; text-decoration: none;}
.navi { z-index: 10; position: absolute; right: 0; top: 25px; }
.navi ul li { float: left; margin-left: 50px; }
.navi ul li a { color: #fcfcfc; }

@media (min-width: 768px) {
.header { position: fixed; width: 100%; z-index: 100; }
.header .trans { content:""; position: absolute; width: 100%; height: 80px; background-color: #E60012; opacity: 0.8; z-index: 1; }
h1 { z-index: 10; color: #fff; position: absolute; left: 0; top: 15px; font-size: 2.5rem; }
h1 a, h1 a:hover { color: #fff; text-decoration: none;}
.navi { z-index: 10; position: absolute; right: 0; top: 25px; }
.navi ul li { float: left; margin-left: 50px; }
.navi ul li a { color: #fcfcfc; }
}
/* visual-wrap */
.visual-text-01 { font-family: 'Helvetica', 'NotoSansCJKkr', '돋움', dotum, sans-serif; font-size: 21px; position: absolute; display: block; left: 0; top: 325px; line-height: 45px; color: #fff; text-shadow:  0 0 15px #000; text-align: center; width: 100%; z-index: 150; }
.visual-text-02 { font-family: 'Helvetica', 'NotoSansCJKkr', '돋움', dotum, sans-serif; font-size: 21px; position: absolute; display: block; left: 0; top: 350px; line-height: 45px; color: #fff; text-shadow:  0 0 15px #000; text-align: center; width: 100%; }
.visual-text-03 { font-size: 14px; position: absolute; left: 0; top: 400px; color: #fff; text-shadow:  0 0 15px #000; text-align: center; width: 100%; }
.mov-wrap { position: absolute; left: 0; top: 0; z-index: 1; }
.mov-wrap video { height: 450px; }

@media (min-width: 768px) {
.visual-text-01 { font-family: 'Helvetica', 'NotoSansCJKkr', '돋움', dotum, sans-serif; font-size: 50px; position: absolute; left: 0; top: 650px; line-height: 45px; color: #fff; text-shadow:  0 0 15px #000; text-align: left; width: 100%;}
.visual-text-02 { font-family: 'Helvetica', 'NotoSansCJKkr', '돋움', dotum, sans-serif; font-size: 50px; position: absolute; left: 0; top: 695px; line-height: 45px; color: #fff; text-shadow:  0 0 15px #000; text-align: left; width: 100%;}
.visual-text-03 { font-size: 20px; position: absolute; left: 0; top: 760px; color: #fff; text-shadow:  0 0 15px #000; text-align: left; width: 100%; }
.mov-wrap { width: 100%; height: 745px; }
.mov-wrap video { width: 100%; height: 745px; }
}

@media (min-width: 1200px) {
.mov-wrap { width: 100%; height: 945px; }
.mov-wrap video { width: 100%; height: 100%; }
}

/* about-wrap */
.about-wrap { box-sizing: border-box; height: auto; padding: 30px 0; width: 100%; }
.about-wrap .about-list { margin-top: 30px; }
.about-list { padding: 10px 20px; }
.about-list p { padding: 10px 0;}
.about-wrap h3 { text-align: center; font-size: 24px; font-weight: 100; margin: 20px 0 20px; }
.about-wrap h3 span { display: block; font-size: 18px; }
.about-wrap p { font-size: 14px; line-height: 20px; }
.thum img { max-width: 100%; }

@media (min-width: 768px) {
.about-wrap { box-sizing: border-box; height: 990px; padding: 150px 0; }
.about-wrap .about-list { margin-top: 100px; }
.about-wrap h3 { text-align: center; font-size: 30px; font-weight: 100; margin: 50px 0 40px; }
.about-wrap h3 span { display: block; font-size: 20px; }
.about-wrap p { font-size: 14px; line-height: 20px; }
.thum img { max-width: 100%; }
}
/* works-wrap */
.works-wrap { background: #666; box-sizing: border-box; padding: 30px 0; }
.works-wrap br { display: none; }
.works-wrap span, .works-box-wrap span { font-size: 14px; font-weight: 100; line-height: 18px!important; }
.works-section-01, .works-section-02, .works-section-03 { margin: 20px 0; padding: 0 20px; }
.works-section-01 h3, .works-section-02 h3, .works-section-03 h3 { font-size: 18px; }
.works-section-01 p, .works-section-02 p, .works-section-03 p { font-size: 14px; }
.works-section-01 span, .works-section-02 span, .works-section-03 span { font-size: 13px; }
.works-box-wrap { position: relative; width: 100%; height: auto; vertical-align: top; margin: 10px 0; }
.works-box-wrap img { max-width: 100%; }
.works-box-wrap video { max-width: 100%; }
.works-box-wrap .thum-01 { position: inherit; left: 0px; top: 0px; width: 45%; height: inherit; z-index: 10; float: left; margin-right: 9% }
.works-box-wrap .thum-02 { position: inherit; left: 0px; top: 0px; width: 45%; height: inherit; z-index: 10; float: left; }
.works-box-wrap .thum-03 { position: inherit; right: 0px; top: 0px; width: 100%; height: inherit; z-index: 10; }
.works-box-wrap .thum-04 { position: inherit; left: 0px; top: 0px; width: 100%; height: inherit; z-index: 10; }
.works-box-wrap .thum-05 { position: inherit; right: 0px; top: 0px; width: 100%; z-index: 10; }
.works-box-wrap .thum-06 { position: inherit; right: 0; top: 0px; width: 100%; z-index: 10; }
.works-box-wrap .thum-07 { position: inherit; right: 0; top: 0px; width: 100%; z-index: 10; }

@media (min-width: 768px) {
.works-wrap { background: #666; box-sizing: border-box; padding: 150px 0 0; }
.works-wrap br { display: block; }
.works-wrap span, .works-box-wrap span { font-size: 14px; font-weight: 100; line-height: 18px!important; }
.works-section-01, .works-section-02, .works-section-03 { margin: 50px 0; padding: 0; }
.works-section-01 h3, .works-section-02 h3, .works-section-03 h3 { font-size: 30px; }
.works-section-01 p, .works-section-02 p, .works-section-03 p { font-size: 16px; }
.works-section-01 span, .works-section-02 span, .works-section-03 span { font-size: 14px; }
.works-box-wrap { position: relative; width: 100%; height: 800px; vertical-align: inherit; }
.works-box-wrap img { max-width: 100%; }
.works-box-wrap video { max-width: 100%; }
.works-box-wrap .thum-01 { position: absolute; left: 0px; top: 100px; width: 280px; height: 600px; z-index: 10; float: inherit; }
.works-box-wrap .thum-02 { position: absolute; left: 300px; top: 100px; width: 280px; height: 600px; z-index: 10; float: inherit; }
.works-box-wrap .thum-03 { position: absolute; right: 100px; top: 100px; width: 380px; height: 600px; z-index: 10; }
.works-box-wrap .thum-04 { position: absolute; left: 0px; top: 100px; width: 380px; height: 600px; z-index: 10; }
.works-box-wrap .thum-05 { position: absolute; right: 370px; top: 50px; width: 350px; z-index: 10; }
.works-box-wrap .thum-06 { position: absolute; right: 0; top: 150px; width: 350px; z-index: 10; }
.works-box-wrap .thum-07 { position: absolute; right: 0; top: 100px; width: 100%; height: 500px; z-index: 10; }
}
/* contactus-wrap */
.contactus-wrap { box-sizing: border-box; padding: 30px 0; }
.contactus-wrap .gsk-map { float: inherit; width: 90%; height: auto; background-color: #111; margin: 30px auto 0; }
.contactus-wrap .gsk-map img { max-width: 100%; }
.contactus-wrap .contact { float: inherit; width: 90%; margin: 30px auto; font-family: 'NotoSansCJKkr', '돋움', dotum, sans-serif; }
.contactus-wrap h3 { font-size: 24px; font-weight: 100; }
.contactus-wrap form div { border-bottom: solid 1px #999; margin: 10px 0; }
.contactus-wrap form input[type="text"], .contactus-wrap form textarea { width: 100%; padding: 3px; border:0; background-color: transparent; font-family: 'NotoSansCJKkr', '돋움', dotum, sans-serif; font-size: 14px; }
.contactus-wrap .contact .location-tit { margin: 50px 0 30px; }
.contactus-wrap .contact ul li { font-size: 14px; color: #999; margin: 10px 0; }
.contactus-wrap .contact ul li span { display: inline-block; }
.contactus-wrap .contact ul li span.title { width: 100px; }

@media (min-width: 768px) {
.contactus-wrap { box-sizing: border-box; padding: 30px 0; }
.contactus-wrap .gsk-map { float: left!important; width: 580px; height: auto; background-color: #111; margin-top: 60px; }
.contactus-wrap .contact { float: right!important; width: 480px; margin-top: 60px; font-family: 'NotoSansCJKkr', '돋움', dotum, sans-serif; }
.contactus-wrap h3 { font-size: 24px; font-weight: 100; }
.contactus-wrap form div { border-bottom: solid 1px #999; margin: 10px 0; }
.contactus-wrap form input[type="text"], .contactus-wrap form textarea { width: 100%; padding: 3px; border:0; background-color: transparent; font-family: 'NotoSansCJKkr', '돋움', dotum, sans-serif; font-size: 14px; }
.contactus-wrap .contact .location-tit { margin: 50px 0 30px; }
.contactus-wrap .contact ul li { font-size: 14px; color: #999; margin: 10px 0; }
.contactus-wrap .contact ul li span { display: inline-block; }
.contactus-wrap .contact ul li span.title { width: 100px; }
}
/* footer */
.footer { width: 100%; clear: both; text-align: center; padding: 30px 0 50px; font-size: 14px; font-family: 'NotoSansCJKkr', '돋움', dotum, sans-serif; color: #999; }
@media (min-width: 768px) {
.footer { width: 100%; clear: both; text-align: center; padding: 100px 0 50px; font-size: 14px; font-family: 'NotoSansCJKkr', '돋움', dotum, sans-serif; color: #999; }
}
/* btn */
.send { margin-top: 10px; background-color: #e60012; color: #fff; font-size: 16px; padding: 7px 21px 4px; border-radius: 25px; font-weight: 300; }
.send:hover { color: #fff; text-decoration: none; background-color: #b5000e; }

/* ico */
.ico { background:url(../img/ico_location.png) no-repeat; width: 24px; height: 24px; vertical-align: middle; margin-right: 15px; }
.address { background-position: 0 0; }
.tel { background-position: -24px 0; }
.email { background-position: -48px 0; }


.main-topbnr-wrap { position: relative; min-height: auto; height: 500px; }
.system-01 { background: url(../img/main_visual_01.jpg) center no-repeat; background-size: cover; height: 500px; }
.system-02 { background: url(../img/main_visual_02.jpg) center no-repeat; background-size: cover; height: 500px; }
.main-topbnr-wrap .owl-nav {position:absolute;top:50%;left:0;width:100%;display:block; margin-top: -25px;}
.main-topbnr-wrap .owl-nav .owl-prev, .main-topbnr-wrap .owl-nav .owl-next { position:absolute; top:0; width:30px; height:50px; display:block; overflow:hidden; white-space:nowrap; text-indent:-300%; background:url("../img/ico_nav.png") no-repeat; }
.main-topbnr-wrap .owl-nav .owl-prev { left:20px; background-position:0 0; }
.main-topbnr-wrap .owl-nav .owl-next { right:20px; background-position:-30px 0; }
.main-topbnr-wrap .owl-dots {position:absolute;bottom:15px;left:0;width:100%;display:block;text-align:center;}
.main-topbnr-wrap .owl-dots .owl-dot {zoom:1;display:inline-block;*display: inline;margin:0 5px;}
.main-topbnr-wrap .owl-dots .owl-dot span {display:block;width:10px;height:10px;background:url("../img/ico_nav.png") no-repeat -120px 0px;}
.main-topbnr-wrap .owl-dots .owl-dot.active span {background-position:-120px -10px; width: 20px; height: 10px;}

@media (min-width: 768px) {
.main-topbnr-wrap { position: relative; min-height: 890px; height: 890px; }
.system-01 { background-size: cover; height: 890px; }
.system-02 { background-size: cover; height: 890px; }
.main-topbnr-wrap .owl-nav {position:absolute;top:50%;left:0;width:100%;display:block; margin-top: -25px;}
.main-topbnr-wrap .owl-nav .owl-prev, .main-topbnr-wrap .owl-nav .owl-next { position:absolute; top:0; width:30px; height:50px; display:block; overflow:hidden; white-space:nowrap; text-indent:-300%; background:url("../img/ico_nav.png") no-repeat; }
.main-topbnr-wrap .owl-nav .owl-prev { left:20px; background-position:0 0; }
.main-topbnr-wrap .owl-nav .owl-next { right:20px; background-position:-30px 0; }
.main-topbnr-wrap .owl-dots {position:absolute;bottom:15px;left:0;width:100%;display:block;text-align:center;}
.main-topbnr-wrap .owl-dots .owl-dot {zoom:1;display:inline-block;*display: inline;margin:0 5px;}
.main-topbnr-wrap .owl-dots .owl-dot span {display:block;width:10px;height:10px;background:url("../img/ico_nav.png") no-repeat -120px 0px;}
.main-topbnr-wrap .owl-dots .owl-dot.active span {background-position:-120px -10px; width: 20px; height: 10px;}
}
/* -------------------------------- 

Animations

-------------------------------- */

.fromTopIn
{
	transition: transform 1.0s ease, opacity 1.0s ease;
	
	transform: translate(0,0);
	opacity: 1.0;
}

.fromTopOut
{
	transition: transform 1.0s ease, opacity 1.0s ease;
	
	transform: translate(0,0);
	opacity: 1.0;
}

.fromBottomIn
{
	transition: transform 1.0s ease, opacity 1.0s ease;
	
	transform: translate(0,0);
	opacity: 1.0;
}

.fromBottomOut
{
	transition: transform 1.0s ease, opacity 1.0s ease;
	
	transform: translate(0,0);
	opacity: 1.0;
}

.fromLeftIn
{
	transition: transform 1.0s ease, opacity 1.0s ease;
	
	transform: translate(0,0);
	opacity: 1.0;
}

.fromLeftOut
{
	transition: transform 1.0s ease, opacity 1.0s ease;
	
	transform: translate(0,0);
	opacity: 1.0;
}

.fromRightIn
{
	transition: transform 1.0s ease, opacity 1.0s ease;
	
	transform: translate(0,0);
	opacity: 1.0;
}

.fromRightOut
{
	transition: transform 1.0s ease, opacity 1.0s ease;
	
	transform: translate(0, 0);
	opacity: 1.0;
}

.scaleUpIn
{
	transition: transform 1.0s ease, opacity 1.0s ease;
	
	transform: scale(0,0);
	opacity: 1.0;
}

.scaleUpOut
{
	transition: transform 1.0s ease, opacity 1.0s ease;
	
	transform: scale(0,0);
	opacity: 1.0;
}

.scaleDownIn
{
	transition: transform 1.0s ease, opacity 1.0s ease;
	
	transform: scale(0,0);
	opacity: 1.0;
}

.scaleDownOut
{
	transition: transform 1.0s ease, opacity 1.0s ease;
	
	transform: scale(0,0);
	opacity: 1.0;
}

@media (min-width: 768px) {
.fromTopIn
{
	transition: transform 1.0s ease, opacity 1.0s ease;
	
	transform: translate(0,0);
	opacity: 1.0;
}

.fromTopOut
{
	transition: transform 1.0s ease, opacity 1.0s ease;
	
	transform: translate(0,-20px);
	opacity: 0.0;
}

.fromBottomIn
{
	transition: transform 1.0s ease, opacity 1.0s ease;
	
	transform: translate(0,0);
	opacity: 1.0;
}

.fromBottomOut
{
	transition: transform 1.0s ease, opacity 1.0s ease;
	
	transform: translate(0,20px);
	opacity: 0.0;
}

.fromLeftIn
{
	transition: transform 1.0s ease, opacity 1.0s ease;
	
	transform: translate(0,0);
	opacity: 1.0;
}

.fromLeftOut
{
	transition: transform 1.0s ease, opacity 1.0s ease;
	
	transform: translate(-20px,0);
	opacity: 0.0;
}

.fromRightIn
{
	transition: transform 1.0s ease, opacity 1.0s ease;
	
	transform: translate(0,0);
	opacity: 1.0;
}

.fromRightOut
{
	transition: transform 1.0s ease, opacity 1.0s ease;
	
	transform: translate(20px, 0);
	opacity: 0.0;
}

.scaleUpIn
{
	transition: transform 1.0s ease, opacity 1.0s ease;
	
	transform: scale(1.0,1.0);
	opacity: 1.0;
}

.scaleUpOut
{
	transition: transform 1.0s ease, opacity 1.0s ease;
	
	transform: scale(1.3,1.3);
	opacity: 0.0;
}

.scaleDownIn
{
	transition: transform 1.0s ease, opacity 1.0s ease;
	
	transform: scale(1.0,1.0);
	opacity: 1.0;
}

.scaleDownOut
{
	transition: transform 1.0s ease, opacity 1.0s ease;
	
	transform: scale(0.7,0.7);
	opacity: 0.0;
}
}

/* 모바일 메뉴 190108 */
#nav { display: none; }
.button-container { display: block; position: absolute; top: 15px; right: 20px; height: 27px; width: 35px; margin-top: 0; cursor: pointer; z-index: 15; transition: opacity .25s ease; }	
.overlay { position: fixed; background: rgba(230,0,18,.8); top: 0; left: 0; width: 100%; height: 0%; opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s, height .35s; overflow: hidden; z-index: 9; }
.overlay.open { opacity: 1; visibility: visible; height: 100%; }
.button-container.active .top { -webkit-transform: translateY(11px) translateX(0) rotate(45deg); transform: translateY(11px) translateX(0) rotate(45deg); background: #fff; }
.button-container.active .middle { opacity: 0; background: #fff; }
.button-container.active .bottom { -webkit-transform: translateY(-11px) translateX(0) rotate(-45deg); transform: translateY(-11px) translateX(0) rotate(-45deg); background: #fff; }
.button-container span { background: #fff; border: none; height: 5px; width: 100%; position: absolute; top: 0; left: 0; transition: all .35s ease; cursor: pointer; }
.button-container span:nth-of-type(2) { top: 11px; }
.button-container span:nth-of-type(3) { top: 22px; }
.m-navi { position: absolute; left: 50%; top: 100px; text-align: center; margin-left: -80px; }
.m-navi a { color: #fff;  line-height: 50px; font-size: 18px; }

@media (min-width: 768px) { 
	.button-container { display: none; }
	#nav { display: block; }
}