@charset "utf-8";
@import url(./content.css);

/* font */
@font-face{
	font-family:'NotoSans';
	font-style:normal;
	font-weight:300;
	src:url(../font/NotoSansKR-Regular.woff2) format('woff2'),
	url(../font/NotoSansKR-Regular.woff) format('woff'),
	url(../font/NotoSansKR-Regular.otf) format('opentype');
}

@font-face{
	font-family:'NotoSans';
	font-style:normal;
	font-weight:400;
	src:url(../font/NotoSansKR-Medium.woff2) format('woff2'),
	url(../font/NotoSansKR-Medium.woff) format('woff'),
	url(../font/NotoSansKR-Medium.otf) format('opentype');
}

@font-face{
	font-family:'NotoSans';
	font-style:normal;
	font-weight:700;
	src:url(../font/NotoSansKR-Bold.woff2) format('woff2'),
	url(../font/NotoSansKR-Bold.woff) format('woff'),
	url(../font/NotoSansKR-Bold.otf) format('opentype');
}

@font-face{
	font-family:'Roboto';
	font-style:normal;
	font-weight:300;
	src:url(../font/Roboto-Regular.woff2) format('woff2'),
	url(../font/Roboto-Regular.woff) format('woff');
	/* unicode-range:U+0041-005A, U+0061-007A; */
}

@font-face{
	font-family:'Roboto';
	font-style:normal;
	font-weight:400;
	src:url(../font/Roboto-Medium.woff2) format('woff2'),
	url(../font/Roboto-Medium.woff) format('woff');
	/* unicode-range:U+0041-005A, U+0061-007A; */
}

@font-face{
	font-family:'Roboto';
	font-style:normal;
	font-weight:700;
	src:url(../font/Roboto-Bold.woff2) format('woff2'),
	url(../font/Roboto-Bold.woff) format('woff');
	/* unicode-range:U+0041-005A, U+0061-007A; */
}

/* reset */
html, body {position:relative; -webkit-font-smoothing:antialiased;height:100%;}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, a, button, address, em, img, small, strong, sub, sup, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td, hr {margin:0; padding:0;box-sizing:border-box;}
body {padding:0; background:#fff; font-family:'NotoSans', sans-serif;font-weight:300;font-size:18px;color:#000;box-sizing:border-box;line-height:1.2}
h1, h2, h3, h4, h5, h6 {font-weight:normal}
ol, ul, li {list-style:none}
table {width:100%; border-collapse:separate; border-spacing:0}
form, fieldset, iframe {display:block; border:0}
img, button {border:0 none; vertical-align:middle}
hr {height:0; display:none}
i, em, address {font-style:normal}
label, button {cursor:pointer}
strong{font-weight:700;}
caption, legend {width:0; height:0; margin:0; padding:0; text-indent:-9999em; overflow:hidden; font-size:0;}
.blind {position:absolute !important; left:-9999em; width:0; height:0; margin:0; padding:0; text-indent:-9999em; overflow:hidden; font-size:0; line-height:0;}
header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption {display:block}
input, textarea, select {margin:0; padding:0; font-family:'NotoSansKR', sans-serif; font-size:18px;  color:#000; vertical-align:middle;box-sizing:border-box;border:none;box-shadow:none;}
textarea {border: 1px solid #000; resize:none; overflow-y:auto}
button {overflow:visible; margin:0; padding:0; border:0 none; background:none; font-size:0; font-family:'NotoSansKR', sans-serif; vertical-align:top; cursor:pointer;}
button::-moz-focus-inner {border:0; padding:0;}
.ellipsis {display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
a {color:#000; text-decoration:none; word-break:break-all;}
input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px white inset;}
*{box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;}
select{-webkit-appearance: none;-moz-appearance: none;-o-appearance:none;appearance: none;background:none;border-radius:0;}
select::-ms-expand{display: none;}
select::-ms-expand {display:none}

@media screen and (max-width:1023px) {
	body{font-size:14px;}
	input, textarea, select{font-size:13px;}
}

.skipNav {height:0;}
.skipNav li a {display: block;font-size:16px;width:100%;position:absolute;top:-10000px;left:0;text-align:center;z-index:9999;}
.skipNav li a:focus, #skip_nav li a.on {position:absolute;top:0;left:0;color:#fff;background:#272727;padding:20px 0;color:#ffffff;height:14px;}

/* Interval */
.mt0{margin-top:0 !important}
.mt5{margin-top:5px !important}
.mt6{margin-top:6px !important}
.mt10{margin-top:10px !important}
.mt15{margin-top:15px !important}
.mt20{margin-top:20px !important}
.mt25{margin-top:25px !important}
.mt30{margin-top:30px !important}
.mt35{margin-top:35px !important}
.mt40{margin-top:40px !important}
.mt50{margin-top:50px !important}
.mt60{margin-top:60px !important}
.mt70{margin-top:70px !important}
.mt80{margin-top:80px !important}
.mt90{margin-top:90px !important}
.mt100{margin-top:100px !important}
.mt160{margin-top:160px !important}

.mb0{margin-bottom:0 !important}
.mb6{margin-bottom:6px !important}
.mb10{margin-bottom:10px !important}
.mb15{margin-bottom:15px !important}
.mb20{margin-bottom:20px !important}
.mb30{margin-bottom:30px !important}
.mb40{margin-bottom:40px !important}
.mb50{margin-bottom:50px !important}
.mb60{margin-bottom:60px !important}
.mb70{margin-bottom:70px !important}
.mb80{margin-bottom:80px !important}
.mb90{margin-bottom:90px !important}
.mb100{margin-bottom:100px !important}

.ml0{margin-left:0 !important}
.ml10{margin-left:10px !important}
.ml15{margin-left:15px !important}
.ml20{margin-left:20px !important}
.ml30{margin-left:30px !important}
.ml40{margin-left:40px !important}
.ml50{margin-left:50px !important}
.ml60{margin-left:60px !important}
.ml70{margin-left:70px !important}
.ml80{margin-left:80px !important}
.ml90{margin-left:90px !important}
.ml100{margin-left:100px !important}

.mr0{margin-right:0 !important}
.mr10{margin-right:10px !important}
.mr20{margin-right:20px !important}
.mr30{margin-right:30px !important}
.mr40{margin-right:40px !important}
.mr50{margin-right:50px !important}
.mr60{margin-right:60px !important}
.mr70{margin-right:70px !important}
.mr80{margin-right:80px !important}
.mr90{margin-right:90px !important}
.mr100{margin-right:100px !important}

.pt0{padding-top:0 !important}
.pt10{padding-top:10px !important}
.pt20{padding-top:20px !important}
.pt30{padding-top:30px !important}
.pt35{padding-top:35px !important}
.pt40{padding-top:40px !important}
.pt50{padding-top:50px !important}
.pt60{padding-top:60px !important}
.pt70{padding-top:70px !important}
.pt80{padding-top:80px !important}
.pt90{padding-top:90px !important}
.pt100{padding-top:100px !important}

.pb0{padding-bottom:0 !important}

/* width */
.w19p{width:19% !important}
.w430{width:430px !important}

/* floating */
.fl {float:left;}
.fr {float:right !important;}
.fn {float:none !important;}
.cl {clear:both;}

/* Align */
.tal{text-align:left !important}
.tac{text-align:center !important}
.tar{text-align:right !important}
.aTop{vertical-align:top !important}
.aMid{vertical-align:middle !important}
.aBtm{vertical-align:bottom !important}

/* Layout */
.wrap{position:relative;width:100%;min-width:1280px;}
.wrap.main{overflow:hidden;height:100vh;}
#contents{position: relative;}
.container{height:100%}

/*header*/
#header{position: fixed;top:0;left:0;right:0;width:100%;min-width:1280px;height:104px;z-index:100;transition:0.5s ease-in-out;}
#header h1.logo{display: inline-block;margin:32px 0 0 100px;font-size:0;text-indent:-999em;background:url('../images/logo.png') no-repeat center / 100%;transition:background 0.3s ease-in-out;}
#header h1.logo a{display: block;width:184px;height:40px;}
#header .gnb{position:absolute;top: 32px;right:0;display: inline-block;margin-right: -10px;text-align:right;padding-right: 100px;}
#header .gnb ul{display:flex;}
#header .gnb ul li{position:relative;margin-right: 48px;}
#header .gnb ul li:last-child{margin-right:0;}
#header .gnb ul li a{display: inline-block;padding: 10px 10px;line-height:1;}
#header .gnb ul li a span{display:block;position:relative;font-size:16px;font-weight:400;color:#000;padding-bottom: 4px;transition:border 0.3s ease-in-out;}
#header .gnb ul li.on a span{border-bottom:2px solid #000}

#header.white{background:transparent}
#header.white h1.logo{background-image:url('../images/logo_w.png');}
#header.white .gnb ul li a span{color:#fff;}

@media (max-width: 1180px){
	#header{min-width: 830px;}
	#header .gnb{padding-right:20px}
	#header h1.logo{margin-left: 10px;}
	#header .gnb ul li{margin-right: 20px;}
}


/* 메인 */
/* mainAnchor */
.mainAnchor{position:fixed;top:50%;transform:translateY(-50%);right:5.4%;z-index: 100;}
.mainAnchor .anchor{display:block;margin:32px auto;width:8px;height:8px;background:#bfbfbf;border-radius:50%;}
.mainAnchor .anchor.active{width:24px;height:24px;background:url('../images/ico_logo.png') no-repeat center / 100%;}
.mainAnchor .anchor span{text-indent:-999em;}

/* sectionWrap */
.sectionWrap{position:relative;}
.section{position:relative;display:table;width:100%;height:100vh;will-change:transform;-webkit-transform: translate3d(0, 0, 0);-webkit-overflow-scrolling: touch;background-repeat: no-repeat ;background-size: cover;}
.secCont{display:table-cell;min-width:1280px;vertical-align:middle;text-align:left;}
.secCont .secMid{position:relative;width:1278px;margin:0 auto;z-index:10}

/* main - btnMore */
.section .btnMore{display:block;margin-top:36px;width:160px;height: 56px;line-height:54px;font-family:'Roboto';text-align:center;border:1px solid #000;}
.section .btnMore span{display:inline-block;font-size:16px;font-weight:400;}
.section .btnMore span:after{content:"";margin-left: 13px;display:inline-block;width:12px;height:12px;background:url('../images/ico_add.png') no-repeat center right / 100%;transition: all 0.2s;}
.section .btnMore:hover span:after{transform:rotate(90deg)}
.section .titArea .tit{font-family:'Roboto';font-size:58px;font-weight:700;}
.section .titArea .txt{margin-top: 11px;font-size:18px;line-height: 1.9;}
.section .secCont.tac .btnMore{margin: 36px auto 0;}

/* main - aboutUs */
.section.aboutUs{background-image:url('../images/bg_aboutUs.png');}
.section.aboutUs .secCont .secMid{margin-left:316px;}
.section.aboutUs .titArea{color:#fff;}
.section.aboutUs .btnMore{color:#fff;border-color:#fff}
.section.aboutUs .btnMore span:after{background-image:url('../images/ico_add_w.png');}

/* main - business */
.section.business{background-image:url('../images/bg_business.png');}
.section.business .secCont .secMid{margin-left:316px;}
.section.business .titArea{color:#fff;}
.section.business .btnMore{color:#fff;border-color:#fff}
.section.business .btnMore span:after{background-image:url('../images/ico_add_w.png');}

/* main - solution */
.section.solution{background-image:url('../images/bg_solution.png');}
.section.solution .secCont .secMid{margin-left:316px;}
.section.solution .titArea{color:#fff;}
.section.solution .btnMore{color:#fff;border-color:#fff}
.section.solution .btnMore span:after{background-image:url('../images/ico_add_w.png');}

/* main - reference */
.section.reference{background-image:url('../images/bg_reference.png');}
.section.reference .secCont .secMid{margin-left:316px;}
.section.reference .titArea{color:#fff;}
.section.reference .btnMore{color:#fff;border-color:#fff}
.section.reference .btnMore span:after{background-image:url('../images/ico_add_w.png');}

/* main - contact */
.section.contact{background-color:#fff;}
.section.contact .titArea{margin-top:70px}
.section.contact .titArea .txt{color:#666}
.contact .colGroup{display: flex;margin-top: 40px;}
.contact .map{position:relative;margin-right:56px;}
.contact .map a{display:block;width:800px;height:auto;}
.contact .map a img{width:100%;}
.contact .map .pin{position:absolute;display:block;top: 298px;left: 382px;width:36px;height:48px;text-indent:-999em;background:url('../images/ico_pin.png') no-repeat center / 100%;}
.contact .contactList{text-align:left;}
.contact .contactList dl + dl{margin-top: 35px;border-top:1px solid #e8e8e8;}
.contact .contactList dt{margin: 33px 0 25px;font-size:22px;font-weight:700;line-height: 1.5;}
.contact .contactList dl:first-child dt{margin-top: 15px;}
.contact .contactList dd .info{display:block;padding: 3px 0 3px 32px;margin-top: 12px;font-size:16px;color:#666;background: no-repeat left center / 24px 24px;}
.contact .contactList dd .info.people{background-image:url('../images/ico_people.png');}
.contact .contactList dd .info.tel{background-image:url('../images/ico_tel.png');}
.contact .contactList dd .info.mail{background-image:url('../images/ico_mail.png');}
.contact .contactList dd .info.fax{background-image:url('../images/ico_fax.png');}
.contact .contactList dd .info.location{background-image:url('../images/ico_location.png');}
.contact .contactList dd .info.bus{background-image:url('../images/ico_bus.png');}
.contact .contactList dd .info.subway{background-image:url('../images/ico_subway.png');}

/* footer */
.section#footer{margin-top: 38px;}
#footer{text-align: center;border-top:1px solid #e8e8e8;}
#footer .copyright{padding:32px 0;font-family:'Roboto';font-size:14px;color:#666;}


/* 메인 애니메이션 */
.section .secCont h2.tit{opacity:0;transform: translateY(-80px);transition: all 1s;}
.section .secCont p.txt{opacity:0;transform: translateY(80px);transition: all 1s;}
.section .secCont .btnMore{opacity:0;transform: translateY(80px);transition: all 1s;}
.section.activeCall .secCont h2.tit{opacity:1;transform: translateY(0);transition: all 1s;}
.section.activeCall .secCont p.txt{opacity:1;transform: translateY(0);transition: all 1s;}
.section.activeCall .secCont .btnMore{opacity:1;transform: translateY(0);transition: all 1s;}

.section .boxItem .item{opacity:0;transform: translateX(140px);}
.section.activeCall .boxItem .item, .section.activeCall .boxItem .item:hover{opacity:1;transform: translateY(0);}
.section.activeCall .boxItem .item.item01{transition:all 0.4s, opacity 0.6s 0.7s ease-in-out, transform 0.6s 0.7s ease-in-out;}
.section.activeCall .boxItem .item.item02{transition:all 0.4s, opacity 0.6s 0.9s ease-in-out, transform 0.6s 0.9s ease-in-out;}
.section.activeCall .boxItem .item.item03{transition:all 0.4s, opacity 0.6s 1.1s ease-in-out, transform 0.6s 1.1s ease-in-out;}
.section.activeCall.business .boxItem .item.item01:hover{background-image:url('../images/img_business01_h.png');}
.section.activeCall.business .boxItem .item.item02:hover{background-image:url('../images/img_business02_h.png');}
.section.activeCall.business .boxItem .item.item03:hover{background-image:url('../images/img_business03_h.png');}

.section .itemList li{transform:translateY(190px);opacity:0}
.section.activeCall .itemList li{transform:translateY(0px);opacity:1}
.section.activeCall .itemList li.db{transition:0.6s 0.3s ease-in-out}
.section.activeCall .itemList li.cp{transition:0.6s 0.5s ease-in-out}
.section.activeCall .itemList li.sb{transition:0.6s 0.7s ease-in-out}
.section.activeCall .itemList li.p2p{transition:0.6s 0.9s ease-in-out}

.section .colGroup .col.left{transform:translateX(-200px);opacity:0}
.section .colGroup .col.right{transform:translateX(200px);opacity:0}
.section.activeCall .colGroup .col.left{transform:translateX(0px);opacity:1;transition:0.5s 0.7s ease-in-out;}
.section.activeCall .colGroup .col.right{transform:translateX(0px);opacity:1;transition:0.5s 0.7s ease-in-out;}