@charset "utf-8";

/* Common */
:root {--ft-mon:'Montserrat', sans-serif;}
.title {text-align:center; padding:95px 0;}
.title h3 {font-size:46px; font-weight:900; margin-bottom:47px;}
.title h3 img {vertical-align: middle; margin-top: -4px;}
.title p {font-size:15px; opacity:.7}
/* Header */
header {position:fixed; left:0; top:0; width:100%; z-index:99; padding: 15px 0;}
header.fixed {background-color:#fff; transition: all .3s ease;}
header.fixed h1 a {background-position:0 -49px;}
header.fixed .layout_fix ul li a {color:#101010 !important; transition: all .3s ease;}
header h1 {}
header h1 a {background:url(/img/logo.png) left center no-repeat; width:202px; height:50px; background-position:0 0;}
header .layout_fix {position:relative; }
header .layout_fix ul {position:absolute; right:0; top:0;}
header .layout_fix ul li {display:inline-block; }
header .layout_fix ul li a {text-transform:uppercase; color:#fff !important; font-size:21px; letter-spacing:0.5px; padding:10px 15px;}
/* 모바일메뉴 */
.m_menu {display:none; position: absolute; top: 0; right: 0; height: 100%; max-width: 0; transition: 0.5s ease; z-index: 1; background: #0098ff; z-index:9;}
.m_menu ul {margin-top:105px; width:360px}
.m_menu ul li {}
.m_menu ul li a {font-size: 1.7em; padding: 20px 0; display:block; color:#fff; display:block; text-transform:uppercase; text-align:center; font-weight:900;}
.burger-icon {display:none !important; cursor: pointer; display: inline-block; position: absolute; z-index: 2; padding: 8px 0; top: 18px; right: 17px; user-select: none; width: auto; margin: 0; z-index:10}
.burger-icon .burger-sticks { background: #fff; display: block; height: 2px; position: relative; transition: background .2s ease-out; width: 23px; }
.burger-icon .burger-sticks:before,
.burger-icon .burger-sticks:after { background: #fff; content: ''; display: block; height: 100%; position: absolute; transition: all .2s ease-out; width: 100%; }
.burger-icon .burger-sticks:before { top: 5px; }
.burger-icon .burger-sticks:after { top: -5px; }
.burger-check { display: none !important; }
.burger-check:checked~.m_menu { max-width: 360px; height:100vh;}
.burger-check:checked~.burger-icon .burger-sticks { background: transparent; }
.burger-check:checked~.burger-icon .burger-sticks:before { transform: rotate(-45deg); }
.burger-check:checked~.burger-icon .burger-sticks:after { transform: rotate(45deg); }
.burger-check:checked~.burger-icon:not(.steps) .burger-sticks:before,
.burger-check:checked~.burger-icon:not(.steps) .burger-sticks:after { top: 0; }
header.fixed .burger-icon .burger-sticks,header.fixed .burger-icon .burger-sticks:before,header.fixed .burger-icon .burger-sticks:after {background-color:#101010}
.burger-check:checked~.burger-icon .burger-sticks, {}


/* Visual */
.visual {height: 100vh; width: 100vw; position: relative; overflow: hidden;}
.visual:after {content:''; display:block; width:100%; height:100%; background-color:rgba(0,0,0,.5); position:absolute; left:0; top:0;}
video {position: absolute; top: 50%; left: 50%; width: auto; height: auto; min-width: 100%; min-height: 100%; -o-object-fit: cover; object-fit: cover; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%);}
.visual .layout_fix {}
.visual .vis_title {color: #fff; position: absolute; left: 50%; top: 37%; z-index: 9; margin-left: -700px;}
.visual .vis_title:before,.visual .vis_title:after {content:''; display:inline-block; position:absolute; background-color:#fff; left:0; width:1px; height:70px}
.visual .vis_title:before {top:-100px;}
.visual .vis_title:after {bottom:-100px;}
.visual .vis_title em {position:relative; }
.visual .vis_title em:after {content:''; display:inline-block; width:32px; height:1px; background-color:#fff; position:absolute; left:0; bottom:-15px;}
.visual .vis_title h3 {font-weight:900; margin: 30px 0; font-size:39px;}
.visual .vis_title h3 img {vertical-align:baseline; }
.visual .vis_title p {font-size: 15px; line-height: 24px; opacity: .8;}

/* About Us */
.about {}
.about .mid {overflow:hidden; }
.about .mid > div {float:left; width:50%; padding:100px 0;}
.about .mid .left {background:url(/img/about_img.png) center no-repeat; background-size:cover;}
.about .mid .left ol {}
.about .mid .left ol li {font-family:var(--ft-mon); font-weight:600; color:#fff; text-align:center; text-transform:uppercase; font-size:27px; padding:30px 0; position:relative; }
.about .mid .left ol li:after {content:''; width:1px; height:37px; display:inline-block; background-color:#fff; position:absolute; left:50%; bottom:-18px}
.about .mid .left ol li:last-child:after {display:none; }
.about .mid .right {background-color:#f7f7f7; padding-left:60px;}
.about .mid .right em {color:#02cbf6; text-transform:uppercase; font-family:var(--ft-mon); font-weight:600; font-size:27px;}
.about .mid .right h3 {font-size:37px; font-weight:900; margin: 20px 0 51px 0;}
.about .mid .right p {font-size:17px; line-height:30px; opacity:.7}

/* Business */
.business {}
.business .mid {background:url(/img/business_bg.png) center no-repeat; background-size:cover;}
.business .mid .business_wrap {overflow:hidden; padding:100px 0;}
.business .mid .business_wrap > div {color:#fff; float:left; }
.business .mid .business_wrap .left {width:40%}
.business .mid .business_wrap .left h3 {font-size:46px; line-height: 50px;}
.business .mid .business_wrap .left h3 img {vertical-align: baseline;}
.business .mid .business_wrap .right {width:60%}
.business .mid .business_wrap .right ul {overflow:hidden; }
.business .mid .business_wrap .right ul li {float:left; width:33.33%; padding: 20px 0;}
.business .mid .business_wrap .right ul li i {font-size:15px; color:#00d2ff;}
.business .mid .business_wrap .right ul li h4 {font-size:27px; margin: 10px 0 20px 0;}
.business .mid .about_wrap .right ul li p {font-size:15px; font-weight:300;}

/* Contact Us */
.contact {padding:100px 0;}
.contact .contact_wrap {overflow:hidden; }
.contact .contact_wrap > div {float:left; width:50%}
.contact .contact_wrap .left {}
.contact .contact_wrap .left em {color: #02cbf6; text-transform: uppercase; font-family: var(--ft-mon); font-weight: 600; font-size: 27px;}
.contact .contact_wrap .left h3 {font-size:46px; font-weight:900; margin: 20px 0 51px 0;}
.contact .contact_wrap .left h4 {font-weight:100; font-size:26px; line-height: 35px;}
.contact .contact_wrap .left h4 b {vertical-align:baseline;}
.contact .contact_wrap .left p {font-size:15px; opacity:.7; margin-top: 40px;}
.contact .contact_wrap .right {}
.contact .contact_wrap .right form {}
.contact .contact_wrap .right ul {}
.contact .contact_wrap .right ul li {float:left; width:50%; margin-bottom:7px;}
.contact .contact_wrap .right ul li:first-child {padding-right:7px;}
.contact .contact_wrap .right ul li:last-child {float:none;width:100%;}
.contact .contact_wrap .right ul li label {}
.contact .contact_wrap .right ul li input,
.contact .contact_wrap .right .term_box {padding:15px; border:1px solid #ddd; border-radius: 5px; width:100%;}
.contact .contact_wrap .right .term_box {padding:10px;}
.contact .contact_wrap .right .term_box > div {height:145px; overflow:hidden; overflow-y:scroll; font-size:13px; border-bottom:1px solid #ddd}
.contact .contact_wrap .right .term_box label {}
.contact .contact_wrap .right .term_box input[type="checkbox"] {}
.contact .contact_wrap .right center {margin-top:20px;}
.contact .contact_wrap .right button {color:#fff; background-color:#02cbf6; border-radius: 5px; padding:15px 30px;}

/* Mail To */
.mailto {text-align:center; background-color:#f7f7f7; padding:100px 0;}
.mailto em {color: #02cbf6; text-transform: uppercase; font-family: var(--ft-mon); font-weight: 600; font-size: 27px;}
.mailto h3 {font-size:33px; margin-top:20px; font-weight:900; line-height:37px;}
.mailto p {margin:15px 0 45px 0; opacity:.7}
.mailto a {background: #02cbf6; border-radius: 5px; padding: 15px 40px; font-size: 20px; color: #fff; }
.mailto a:last-child {background-color:#026ef6}
.mailto a i {margin-right:5px;}

/* Footer */
footer {background-color:#1D1D1D; padding:40px 0 90px 0;}
footer .layout_fix {position:relative; }
footer h2 {}
footer p {position:absolute; right:0;top:0; color:#fff; text-align:right; font-size:13px; font-weight:100;}


@media all and (max-width:1420px) {
	.layout_fix {padding: 0 10px; width: 100% !important;}
	.visual .vis_title {margin-left:-500px;}
}

@media all and (max-width:1180px) {
	.about .mid > div {float:none; width:100%;}
}


@media all and (max-width:991px) {
}

@media all and (max-width:360px) {
	.mailto a:last-child {margin-top:5px;}
}

@media all and (max-width:768px) {
	.m_menu,.burger-icon {display:block !important;}
	header .layout_fix ul {display:none;}
	header.fixed h1 a {background-position:0 -34px;}
	header h1 a {width: 142px; background-size:99%; height:35px}
	.visual .vis_title {left:20px; margin-left:0; top:27%}
	.visual .vis_title h3 img,.title h3 img, .business .mid .business_wrap .left h3 img {width:53%}
	.visual .vis_title h3 {line-height:49px;}
	.title h3,.business .mid .business_wrap .left h3 {font-size: 36px; line-height: 40px;}
	.about .mid > div,.business .mid .business_wrap > div,
	.business .mid .business_wrap .right ul li,
	.contact .contact_wrap > div {float:none; width:100% !important;}
	.about .mid .right h3 {font-size: 32px; line-height: 40px;}
	.about .mid .right {padding:50px 20px;}
	.contact .contact_wrap .right {margin-top:30px;}
	footer {padding:40px 0;}
	footer h2 {text-align:center;}
	footer h2 img {width:40%;}
	footer p {position: inherit; text-align: center; margin-top: 20px;}
	.mailto a {font-size:16px; width:202px}
}

@media all and (max-width:320px) {
	.contact .contact_wrap .right ul li {float:left; width:100% !important}
	.contact .contact_wrap .right ul li:first-child {padding-right:0;}
	.contact .contact_wrap .left h3 {font-size:36px;}
	.title h3, .business .mid .business_wrap .left h3 {font-size:31px;}
	.visual .vis_title h3 {line-height: 39px; font-size: 29px; word-break: break-all;}
	.visual .vis_title p {font-size:14px;}
	.visual .vis_title:before, .visual .vis_title:after {height:50px}
	.visual .vis_title:before {top:-70px}
	.visual .vis_title:after {bottom:-70px}
}