@charset "utf-8";
#container_wrap {padding:80px 0 40px 0;}

@media screen and (max-width:980px) {
#container_wrap {padding:60px 0 40px 0;}
}


#header_wrap {display:block;position:fixed;left:0;right:0;top:0;background:var(--color);z-index:99;}
#header_wrap:after {display:block;visibility:hidden;clear:both;content:""}

#header_wrap #logo {display:block;float:left;width:240px;}
#header_wrap #logo a {display:block;width:100%;height:80px;background:url(../img/logo_en.png) no-repeat 50% 50% #fff;background-size:180px auto;}
#header_wrap #logo a:hover {background:url(../img/logo_kr.png) no-repeat 50% 50% #fff;background-size:180px auto;}

#header_wrap #nav {display:block;float:left;width:calc(100% - 320px);}
#header_wrap #nav:after {display:block;visibility:hidden;clear:both;content:""}
#header_wrap #nav nav {display:block;float:left;width:50%;background:var(--color);}
#header_wrap #nav nav ul {padding:0 20px;}
#header_wrap #nav nav ul:after {display:block;visibility:hidden;clear:both;content:""}
#header_wrap #nav nav ul li {display:block;float:left;position:relative}
#header_wrap #nav nav ul li a {display:block;padding:0 20px;color:#fff;line-height:80px;}
#header_wrap #nav nav ul li ul {display:none;position:absolute;left:50%;padding:0;width:160px;margin:0 0 0 -80px;background:#fff;border:solid 1px #eee;z-index:1;}
#header_wrap #nav nav ul li ul li {float:none;width:100%;border-bottom:dashed 1px #ddd;}
#header_wrap #nav nav ul li ul li:last-child {border-bottom:none;}
#header_wrap #nav nav ul li ul li a {color:#666;line-height:50px;text-align:center;}
#header_wrap #nav nav ul li ul li a:hover {background:#f6f6f6;}
#header_wrap #nav nav:last-child {background:#222;}
#header_wrap #nav nav:last-child li a:hover {background:#444;}

#header_wrap #nav nav ul li:hover a {background:#2f9f02;}
#header_wrap #nav nav ul li:hover ul {display:block;max-height:1000px;}
#header_wrap #nav nav ul li:hover ul a {background:#fff;}
#header_wrap #nav nav ul li:hover ul a:hover {background:#f6f6f6;}


#header_wrap a#btn_nav,
#header_wrap a#btn_user {display:block;position:relative;width:80px;height:80px;text-align:center;line-height:80px;background:#fff;border:none;}
#header_wrap a#btn_nav,
#header_wrap a#btn_user i {font-size:24px;}
#header_wrap a#btn_nav {display:none;float:left;}
#header_wrap a#btn_user {float:right;}


#header_wrap a.btn_nav,
#header_wrap a.btn_nav span {display:inline-block;transition: all .4s;box-sizing:border-box;}
#header_wrap a.btn_nav {}

#header_wrap a.btn_nav span {display:block;position:absolute;left:12px;width:26px;height:2px;background:#fff;}
#header_wrap a.btn_nav span:nth-of-type(1) {top:20px;}
#header_wrap a.btn_nav span:nth-of-type(2) {top:30px;}
#header_wrap a.btn_nav span:nth-of-type(3) {top:40px;}


#header_wrap a.btn_nav span:nth-of-type(1) {-webkit-animation : menu-bar-01 .75s forwards;animation : menu-bar-01 .75s forwards;}
@-webkit-keyframes menu-bar-01 {
	0% {-webkit-transform : translateY(10px) rotate(45deg);}
	50% {-webkit-transform : translateY(10px) rotate(0);}
	100% {-webkit-transform : translateY(0) rotate(0);}
}
@keyframes menu-bar-01 {
	0% {transform : translateY(10px) rotate(45deg);}
	50% {transform : translateY(10px) rotate(0);}
	100% {transform : translateY(0) rotate(0);}
}

#header_wrap a.btn_nav span:nth-of-type(2) {transition : all .25s .25s;opacity : 1;}

#header_wrap a.btn_nav span:nth-of-type(3) {-webkit-animation : menu-bar-02 .75s forwards;animation : menu-bar-02 .75s forwards;}
@-webkit-keyframes menu-bar-02 {
	0% {-webkit-transform : translateY(-10px) rotate(-45deg);}
	50% {-webkit-transform : translateY(-10px) rotate(0);}
	100% {-webkit-transform : translateY(0) rotate(0);}
}

@keyframes menu-bar-02 {
	0% {transform : translateY(-10px) rotate(-45deg);}
	50% {transform : translateY(-10px) rotate(0);}
	100% {transform : translateY(0) rotate(0);}
}

#header_wrap a.btn_nav.active span:nth-of-type(1) {-webkit-animation : active-menu-bar-01 .75s forwards;animation : active-menu-bar-01 .75s forwards;}
@-webkit-keyframes active-menu-bar-01 {
	0% {-webkit-transform : translateY(0) rotate(0);}
	50% {-webkit-transform : translateY(10px) rotate(0);}
	100% {-webkit-transform : translateY(10px) rotate(45deg);}
}

@keyframes active-menu-bar-01 {
	0% {transform : translateY(0) rotate(0);}
	50% {transform : translateY(10px) rotate(0);}
	100% {transform : translateY(10px) rotate(45deg);}
}

#header_wrap a.btn_nav.active span:nth-of-type(2) {opacity : 0;}

#header_wrap a.btn_nav.active span:nth-of-type(3) {-webkit-animation : active-menu-bar-02 .75s forwards;animation : active-menu-bar-02 .75s forwards;}
@-webkit-keyframes active-menu-bar-02 {
	0% {-webkit-transform : translateY(0) rotate(0);}
	50% {-webkit-transform : translateY(-10px) rotate(0);}
	100% {-webkit-transform : translateY(-10px) rotate(-45deg);}
}
@keyframes active-menu-bar-02 {
	0% {transform : translateY(0) rotate(0);}
	50% {transform : translateY(-10px) rotate(0);}
	100% {transform : translateY(-10px) rotate(-45deg);}
}


@media screen and (max-width:980px) {
#header_wrap #logo {width:160px;}
#header_wrap #logo a {height:60px;background-size:160px auto;}
#header_wrap #logo a:hover {background-size:160px auto;}

#header_wrap #nav {display:none;float:none;position:absolute;left:0;right:0;top:60px;width:100%;}
#header_wrap #nav nav {float:none;width:100%;}
#header_wrap #nav nav ul {padding:20px 0;}
#header_wrap #nav nav ul li {float:none;margin:0;}
#header_wrap #nav nav ul li a {padding:0 20px;line-height:50px;}
#header_wrap #nav nav ul li ul {position:relative;left:0;padding:0;width:100%;max-height:1000px;margin:0;background:none;border:none;}
#header_wrap #nav nav ul li ul li {border-bottom:none;}
#header_wrap #nav nav ul li ul li a {padding:0 30px;color:#fff;line-height:40px;text-align:left;}
#header_wrap #nav nav ul li ul li a:hover {background:#2f9f02;}

#header_wrap #nav nav ul li:hover a {background:#2f9f02;}
#header_wrap #nav nav ul li:hover ul a {background:none;}
#header_wrap #nav nav ul li:hover ul a:hover {background:#2f9f02;}

#header_wrap a#btn_nav,
#header_wrap a#btn_user {width:50px;height:60px;color:#fff;line-height:60px;background:#222;}
#header_wrap a#btn_nav {display:block;}
}


.mockup {margin:40px 0 0 0;}
.mockup img {width:160px;height:auto;}

@media screen and (max-width:980px) {
.mockup img {width:120px;height:auto;}
}


.sec {display:block;position:relative;overflow:hidden;}
.sec .cont {display:block;position:relative;width:100%;max-width:var(--content-w);margin:0 auto;}
.sec .cont:after {display:block;visibility:hidden;clear:both;content:""}

.sec00 {padding:120px 20px;background-color:var(--color);}
.sec00 h3 {display:block;margin:0 0 40px 0;font-family:var(--font2);color:#fff;font-size:30px;font-weight:400;}
.sec00 p {margin:0 0 40px 0;color:#fff;font-size:18px;line-height:140%;}
.sec00 a {display:block;font-family:var(--font2);color:#fff;font-size:18px;font-weight:200;line-height:180%;}
.sec00 a i {font-size:28px;}
.sec00 strong {}
.sec00 .tel strong {color:#111;font-size:48px;font-weight:800;}
.sec00 .mail strong {font-size:30px;font-weight:400;}
.sec00 .messenger strong {font-size:36px;font-weight:400;}
.sec00 .bar {display:inline-block;width:30px;height:1px;background:#fff;
-webkit-transition: all .3s ease-out;
transition: all .3s ease-out;
}
.sec00 a:hover {color:#fff568}
.sec00 a:hover strong {color:#fff568}
.sec00 a:hover .bar {width:80px;background:#fff568}

.sec00 a.btn_inquiry {width:280px;margin:40px 0 0 0;font-family:var(--font);line-height:50px;text-align:center;border:solid 1px #fff;}
.sec00 a.btn_inquiry:hover {background:rgba(0,0,0,0.6);border:solid 1px #111;}


@media screen and (max-width:980px) {
.sec00 {padding:80px 20px;}
.sec00 h3 {margin:0 0 30px 0;font-size:24px;}
.sec00 p {font-size:16px;}
.sec00 a {font-size:16px;line-height:200%;}
.sec00 a i {font-size:24px;}
.sec00 .tel strong {font-size:36px;}
.sec00 .mail strong {font-size:24px;}
.sec00 .messenger strong {font-size:30px;}
.sec00 .bar {width:20px;}
.sec00 a:hover .bar {width:40px;}

.sec00 a.btn_inquiry {width:180px;margin:40px 0 0 0;font-size:16px;}
}


@media screen and (max-width:480px) {
.sec00 h3 {margin:0 0 30px 0;font-size:20px;}
.sec00 p {font-size:14px;}
.sec00 a {font-size:14px;}
.sec00 a i {font-size:20px;}
.sec00 .tel strong {font-size:30px;}
.sec00 .mail strong {font-size:18px;}
.sec00 .messenger strong {font-size:24px;}

.sec00 a.btn_inquiry {width:160px;font-size:14px;line-height:40px;}
}


.sec01 {padding:180px 20px;}
.sec01 h3 {display:block;margin:0 0 40px 0;color:#fff;font-size:36px;font-weight:700;text-align:center;}
.sec01 a.more {display:block;width:200px;margin:60px auto 0 auto;color:#fff;font-size:16px;text-align:center;line-height:60px;background:var(--color);}
.sec01 a.more:hover {background:#222;}


@media screen and (max-width:980px) {
.sec01 {padding:120px 20px;}
.sec01 h3 {margin:0 0 40px 0;font-size:30px;}
.sec01 a.more {width:180px;line-height:50px;}
}


@media screen and (max-width:480px) {
.sec01 h3 {margin:0 0 40px 0;font-size:24px;}
.sec01 a.more {width:120px;line-height:50px;}
}


.sec02 {padding:120px 20px;background:#fff;/*background:url(../img/viz.png) no-repeat right bottom;background-size:60% auto*/}
.sec02 h3 {display:block;margin:0 0 40px 0;font-size:48px;font-weight:700;letter-spacing:-0.5px;}
.sec02 h3 strong {color:var(--color);font-weight:700;}
.sec02 p {margin:0 0 40px 0;font-size:16px;line-height:160%;font-weight:300;word-break:keep-all;}
.sec02 p:last-child {margin:0;}


@media screen and (max-width:980px) {
.sec02 {padding:80px 20px;}
.sec02 .cont {padding:40px 20px;background:rgba(255,255,255,0.8);}
.sec02 h3 {margin:0 0 40px 0;font-size:36px;}
.sec02 p {font-size:14px;}
}


@media screen and (max-width:480px) {
.sec02 {padding:80px 20px 160px 20px;background-size:80% auto}
.sec02 h3 {margin:0 0 40px 0;font-size:30px;}
.sec02 p {font-size:14px;}
}

#footer_wrap {display:block;position:fixed;left:0;right:0;bottom:0;padding:0 20px;font-family:var(--font2);color:#999;font-weight:400;text-align:center;line-height:40px;background:#111;z-index:9;}
#footer_wrap strong {color:var(--color);font-weight:700;}


@media screen and (max-width:480px) {
#footer_wrap {font-size:12px;}
}


#body_wrap {padding:80px 0;}

@media screen and (max-width:980px) {
#body_wrap {padding:40px 0;}
}


h2#container_title {display:block;margin:0 0 60px 0;font-size:30px;text-align:center;font-weight:700;letter-spacing:-0.5px;}
h2#container_title span {display:block;margin:0 0 6px 0;color:var(--color2);font-size:14px;font-weight:300;}

@media screen and (max-width:980px) {
h2#container_title {font-size:24px;}
h2#container_title span {font-size:13px;}
}