@CHARSET "UTF-8";
@import url('motion.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');
@import url('https://hangeul.pstatic.net/hangeul_static/css/nanum-square.css');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, a, p, blockquote, th, td, input, select, textarea, button, span, label {
	margin:0;
	padding:0;
	box-sizing:border-box;
	color:#ffffff;
    font-family:"Noto Sans KR", sans-serif;
    font-optical-sizing:auto;
    font-style:normal;
	font-size:14px;
	font-weight:400;
	letter-spacing:0px;
	transition:all .2s ease 0s;
}
html, body {
    height: 100%;
    overflow: hidden;
    font-family: 'Roboto',sans-serif;
    -webkit-font-smoothing: antialiased;
    background-color: #ffffff;
}
body {
	background-color:#f8f8f8;
}
fieldset, img {margin:0;padding:0;border:0;vertical-align:middle;}
dl, ul, ol, li, dt, dd {list-style:none}
blockquote, q {quotes:none}
blockquote:before, blockquote:after,q:before,q:after {content:'';content:none;}
a {text-decoration:none}
a:link {text-decoration:none}
a:active {text-decoration:none}
address, caption, cite, code, dfn, em, var {font-style:normal;font-weight:normal;}
hr {display:none;}
/* 페이지 표시 */
#pageMenu {
	position:fixed;
	z-index:1000;
	top:50%;
	right:10px;
	transform:translateY(-50%);
}
#pageMenu li {
	padding:6px 0;
}
#pageMenu li a {
	display:block;
	box-sizing:border-box;
	width:8px;
	height:8px;
	text-indent:-9999px;
	border-radius:8px;
	border:1px solid #cccccc;
	background-color:rgb(255 255 255 / 40%);
}
#pageMenu li.active a {
	height:16px;
	background-color:#001646;
}
#pageMenu li:nth-child(1).active a {
	border-color:#ffffff;
	background-color:#ffffff;
}
#pageMenu li:nth-child(2).active a {
	border-color:#4d86ff;
	background-color:#4d86ff;
}
#pageMenu li:nth-child(3).active a {
	border-color:#00bcff;
	background-color:#00bcff;
}
#pageMenu li:nth-child(4).active a {
	border-color:#ff901d;
	background-color:#ff901d;
}
#pageMenu li:nth-child(5).active a {
	border-color:#00ffcd;
	background-color:#00ffcd;
}
#pageMenu li:nth-child(6).active a {
	border-color:#002574;
	background-color:#002574;
}
/* **************** Page Start **************** */
.CONTENT_WRAP, .scroll_wrap, .SEC_BOX {
    position: relative;
    height: 100%;
    text-align: center;
    color: #fff;
}
.SEC_BOX {
    background-repeat:no-repeat;
    background-position:bottom center;
    background-size:cover;
}
/* 컨텐츠 공통 */
.CONT_BOX h1, .CONT_BOX h2, .CONT_BOX h3, .CONT_BOX p {
    display:block;
    text-align:center;
    overflow:hidden;
}
.CONT_BOX h1 {
    margin-bottom:80px;
    height:330px;
    text-indent:-9999px;
    background-repeat:no-repeat;
    background-position:top center;
}
.CONT_BOX .tit_kr {
    margin-bottom:30px;
    line-height:52px;
    font-size:52px;
    font-weight:700;
    text-shadow:0 1px 10px rgb(0 0 0 / 50%);
}
.CONT_BOX .tit_en {
    line-height:33px;
    font-size:33px;
    font-weight:100;
    text-transform:uppercase;
}
.CONT_BOX p {
    line-height:22px;
    text-shadow:1px 1px 0 rgb(0 0 0 / 70%);
}
.CONT_BOX .alert {
    margin-top:30px;
    font-size:16px;
    font-weight:500;
}
.service_url {
    position:relative;
    display:flex;
    align-items:center;
    box-sizing:border-box;
    margin:0 auto;
    margin-top:40px;
    padding:0 20px;
    width:300px;
    height:50px;
    background-color:#000000;
}
.service_url::before {
    content:"";
    display:block;
    margin-right:10px;
    width:30px;
    height:50px;
    background-repeat:no-repeat;
    background-position:center center;
}
.service_url::after {
    content:"";
    position:absolute;
    top:50%;
    right:20px;
    transform:translateY(-50%);
    width:12px;
    height:20px;
    background:url("../images/arr_url.png") no-repeat right center;
}
.service_url .tit {
    display:block;
    width:150px;
    height:16px;
    text-indent:-9999px;
    background-repeat:no-repeat;
    background-position:left center;;
}
/* 시작 페이지 */
.PLATFORM {
    background-color:#001646;
    background-image:url("../images/bg_platform.png");
}
.PLATFORM .CONT_BOX {
    position:absolute;
    z-index:100;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
}
.PLATFORM h1 {
    margin-bottom:40px;
    height:230px;
    background-size:auto 230px;
    background-image:url("../images/logo_platform.svg");
}
.PLATFORM .tit_kr {
    margin-bottom:20px;
}
.PLATFORM .tit_en {
    margin-bottom:40px;
}
.PLATFORM p {
    margin-bottom:40px;
}
.ico_box_wrap {
    display:flex;
    justify-content:center;
    align-items:center;
    margin-top:40px;
}
.ico_box_wrap .ico_box {
    margin:0 10px;
}
.ico_box_wrap .ico_box::before {
    content:"";
    display:block;
    box-sizing:border-box;
    margin-bottom:10px;
    width:100px;
    height:100px;
    background-color:rgb(255 255 255 / 10%);
    background-repeat:no-repeat;
    background-position:center center;
    background-size:auto 50px;
}
.ico_box_wrap .SV_ONE::before {
    background-size:60px auto;
    background-image:url("../images/ico_one.svg");
}
.ico_box_wrap .SV_MAN::before {
    background-size:70px auto;
    background-image:url("../images/ico_man.svg");
}
.ico_box_wrap .SV_TEAM::before {
    background-image:url("../images/ico_team.svg");
}
.ico_box_wrap .SV_HUB::before {
    background-image:url("../images/ico_hub.svg");
}
.ico_box_wrap .service {
    display:block;
    height:10px;
    text-indent:-9999px;
    background-repeat:no-repeat;
    background-position:center center;
    background-size:auto 10px;
}
.ico_box_wrap .SV_ONE .service {
    background-image:url("../images/service_one.svg");
}
.ico_box_wrap .SV_MAN .service {
    background-image:url("../images/service_man.svg");
}
.ico_box_wrap .SV_TEAM .service {
    background-image:url("../images/service_team.svg");
}
.ico_box_wrap .SV_HUB .service {
    background-image:url("../images/service_hub.svg");
}
/* ONE */
.ONE {
    background-color:#0033a0;
    background-image:url("../images/bg_one.png");
}
.ONE h1 {
	margin-bottom:50px;
    background-image:url("../images/logo_one.svg");
}
.ONE .tit_kr {
	margin-bottom:20px;
}
.ONE .service_url {
	margin-top:30px;
    background-color:#0033a0;
}
.ONE .service_url::before {
    background-image:url("../images/ico_one_wh.svg");
}
.ONE .service_url .tit {
    background-image:url("../images/service_one.svg");
}
.one_user {
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
	margin-top:15px;
}
.one_user .anCircle {
	position:relative;
	margin:10px;
	box-sizing:border-box;
	width:180px;
	height:180px;
	border-radius:50%;
	background:rgb(0 0 0 / 50%);
}
.one_user .anCircle .an_in {
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
}
.one_user .anCircle .an_in .nums {
	display:flex;
	justify-content:center;
	align-items:center;
	margin-bottom:10px;
	height:60px;
	font-family:"Roboto", sans-serif;
	font-weight:700;
	font-size:60px;
	letter-spacing:-3px;
}
.one_user .anCircle .an_in .nums b {
	display:block;
	margin-left:3px;
	height:50px;
	line-height:40px;
	font-family:"Noto Sans KR", sans-serif;
	font-weight:200;
	font-size:50px;
}
.one_user .anCircle .an_in .title {
	display:block;
	line-height:17px;
	text-align:center;
	font-size:17px;
	font-weight:400;
	letter-spacing:-1px;
}
/* MAN */
.MAN {
    background-color:#04a6e1;
    background-image:url("../images/bg_man.png");
}
.MAN h1 {
    background-image:url("../images/logo_man.svg");
}
.MAN .service_url {
    background-color:#04a6e1;
}
.MAN .service_url::before {
    width:40px;
    background-image:url("../images/ico_man_wh.svg");
}
.MAN .service_url .tit {
    background-image:url("../images/service_man.svg");
}
/* TEAM */
.TEAM {
    background-color:#fc671a;
    background-image:url("../images/bg_team.png");
}
.TEAM h1 {
    background-image:url("../images/logo_team.svg");
}
.TEAM .service_url {
    background-color:#fc671a;
}
.TEAM .service_url::before {
    background-image:url("../images/ico_team_wh.svg");
}
.TEAM .service_url .tit {
    background-image:url("../images/service_team.svg");
}
/* HUB */
.HUB {
    background-color:#00a786;
    background-image:url("../images/bg_hub.png");
}
.HUB h1 {
    background-image:url("../images/logo_hub.svg");
}
.HUB .service_url {
    background-color:#00a786;
}
.HUB .service_url::before {
    background-image:url("../images/ico_hub_wh.svg");
}
.HUB .service_url .tit {
    background-image:url("../images/service_hub.svg");
}
/* COMPANY */
.COMPANY .CONT_BOX {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    width:100%;
}
.COMPANY h1, .COMPANY h2, .COMPANY h3, .COMPANY p {
    color:#000000;
    text-shadow:none !important;
}
.COMPANY h1 {
    margin-bottom:80px;
    height:70px;
    background-image:url("../images/logo_w.svg");
}
.COMPANY .tit_kr {
    margin-bottom:20px;
    line-height:60px;
    font-family:'NanumSquareExtraBold';
    font-size:60px;
}
.COMPANY .tit_en {
    margin-bottom:60px;
    line-height:56px;
    font-family:'NanumSquareLight';
    font-size:56px;
}
.COMPANY p {
    line-height:32px;
    font-family:'NanumSquareAcr';
    font-size:22px;
}
.COMPANY .tel_mail {
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    margin:40px auto;
    margin-bottom:0;
    width:730px;
}
.COMPANY .tel_mail .tm_box {
    box-sizing:border-box;
    padding:50px 0;
    width:calc(100% / 2 - 5px);
    border:1px solid #dddddd;
    background-color:#ffffff;
}
.COMPANY .tel_mail .tm {
    display:flex;
    justify-content:center;
    align-items:center;
    line-height:30px;
    font-size:30px;
    font-family:'NanumSquareExtraBold';
    color:#000000;
}
.COMPANY .tel_mail .tit {
    margin-bottom:30px;
    line-height:16px;
    font-family:'NanumSquare';
    font-size:16px;
    color:#999999;
    text-transform:uppercase;
}
.COMPANY .tel_mail .tit::before {
    content:"";
    margin-right:16px;
    width:20px;
    height:20px;
    background-repeat:no-repeat;
    background-position:center center;
}
.COMPANY .tel_mail .Address {
    padding:0;
    width:100%;
    border-width:0;
    background:none;
}
.COMPANY .tel_mail .Tel .tit::before {
    background-image:url("../images/ico_tel.svg");
}
.COMPANY .tel_mail .Mail .tit::before {
    background-image:url("../images/ico_mail.svg");
}
.COMPANY .tel_mail .Address {
    margin-top:40px;
}
.COMPANY .tel_mail .Address .tit {
    margin-bottom:20px;
}
.COMPANY .tel_mail .Address .tit::before {
    display:none;
}
.COMPANY .tel_mail .Address .txt {
    line-height:16px;
    font-family:'NanumSquareAcr';
    font-size:16px;
    color:#000000;
}
.COMPANY .tel_mail .Address .ads_en {
    margin-top:10px;
    line-height:14px;
    font-family:'NanumSquare';
    font-size:14px;
    color:#888888;
    text-transform:uppercase;
}
/* ********************** Intro Page Motion ********************** */
.active .logo_opacity {
	animation-name:opc;
	animation-duration:3s;
	animation-delay:0s;
	animation-iteration-count:1;
	animation-direction:alternate;
}
.active .logo_box_move {
	animation-name:logo_box_move;
	animation-duration:1s;
	animation-delay:0s;
	animation-iteration-count:1;
	animation-direction:alternate;
}
.active .move_h1 {
	animation-name:move_h1;
	animation-duration:2s;
	animation-delay:0s;
	animation-iteration-count:1;
	animation-direction:alternate;
}
.active .opacity_h1_3s {
	animation-name:opc;
	animation-duration:3s;
	animation-delay:0s;
	animation-iteration-count:1;
	animation-direction:alternate;
}
.active .opacity_h1_4s {
	animation-name:opc;
	animation-duration:4s;
	animation-delay:0s;
	animation-iteration-count:1;
	animation-direction:alternate;
}
.active .opacity_h1_5s {
	animation-name:opc;
	animation-duration:5s;
	animation-delay:0s;
	animation-iteration-count:1;
	animation-direction:alternate;
}
.active .opacity_h1_6s {
	animation-name:opc;
	animation-duration:6s;
	animation-delay:0s;
	animation-iteration-count:1;
	animation-direction:alternate;
}
.active .opacity_txt {
	animation-name:opc;
	animation-duration:3s;
	animation-delay:0s;
	animation-iteration-count:1;
	animation-direction:alternate;
}
.active .ico_opacity {
	animation-name:opc;
	animation-delay:0s;
	animation-iteration-count:1;
	animation-direction:alternate;
}
.active .ico_opacity.s1 {
	animation-duration:3s;
}
.active .ico_opacity.s2 {
	animation-duration:3.5s;
}
.active .ico_opacity.s3 {
	animation-duration:4s;
}
.active .ico_opacity.s4 {
	animation-duration:4.5s;
}
.active .circle_opc {
	animation-name:opc;
	animation-delay:0s;
	animation-iteration-count:1;
	animation-direction:alternate;
}
.active .circle_opc.s1 {
	animation-duration:5s;
}
.active .circle_opc.s2 {
	animation-duration:6s;
}
.active .circle_opc.s3 {
	animation-duration:7s;
}
.active .circle_opc.s4 {
	animation-duration:8s;
}
.active .move_btn {
	animation-name:move_back;
	animation-duration:1s;
	animation-delay:0s;
	animation-iteration-count:1;
	animation-direction:alternate;
}
.active .box_opc {
	animation-name:opc;
	animation-delay:0s;
	animation-iteration-count:1;
	animation-direction:alternate;
}
.active .box_opc.s1 {
	animation-duration:2s;
}
.active .box_opc.s2 {
	animation-duration:4s;
}
.active .box_scale {
	animation-name:box_size;
	animation-delay:0s;
	animation-iteration-count:1;
	animation-direction:alternate;
}
.active .box_scale.s1 {
	animation-duration:0.5s;
}
.active .box_scale.s2 {
	animation-duration:0.7s;
}
/* ********* Mobile ********* */
.CONT_BOX .mo_Txt {
	display:none !important;
}
@media all and (min-width:320px) and (max-width:768px) {
	html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, a, p, blockquote, th, td, input, select, textarea, button, span, label {
		font-size:12px;
	}
	.SEC_BOX {
		overflow:hidden;
	}
	.CONT_BOX {
		position:absolute;
		top:50%;
		left:50%;
		transform:translate(-50%, -50%);
		width:100%;
	}
	.CONT_BOX h1 {
		margin:0 auto;
		margin-bottom:30px;
		width:220px;
		height:180px;
	}
	.CONT_BOX .tit_kr {
		margin-bottom:20px;
		padding:0 33px;
		font-size:2.1rem;
		line-height:2.6rem;
		letter-spacing:-1px;
	}
	.CONT_BOX p {
		margin-bottom:30px;
		padding:0 40px;
		line-height:1.4rem;
		font-size:1rem;
		font-weight:300;
		letter-spacing:-1px;
	}
	.CONT_BOX .txt {
		display:none;
	}
	.CONT_BOX .mo_Txt {
		display:block !important;
		margin-bottom:20px;
		font-weight:400;
	}
	.service_url {
		margin-top:10px;
		padding:0 10px;
		width:160px;
		height:40px;
	}
	.service_url::before {
		width:20px;
		height:40px;
	}
	.service_url::after {
		right:10px;
		width:14px;
		height:14px;
		background-size:contain;
	}
	.service_url .tit {
		width:calc(100% - 56px);
		height:20px;
	}
	/* PLATFORM */
	.PLATFORM h1 {
		margin-bottom:30px;
		height:150px;
		background-size:contain;
	}
	.PLATFORM .tit_kr {
		font-size:2.5rem;
		line-height:2.5rem;
		margin-bottom:15px;
	}
	.PLATFORM .tit_en {
		margin-bottom:20px;
		font-size:1.6rem;
		line-height:1.8rem;
	}
	.ico_box_wrap {
		flex-wrap:wrap;
		margin:0 20px;
	}
	.ico_box_wrap .ico_box {
		margin:10px 5px;
		margin-top:5px;
	}
	.ico_box_wrap .ico_box::before {
		width:66px;
		height:66px;
		border:1px solid rgb(255 255 255 / 15%);
		background-size:34px auto;
	}
	.ico_box_wrap .service {
		background-size:contain;
	}
	.ico_box_wrap .SV_ONE::before {
		background-size:40px auto;
	}
	.ico_box_wrap .SV_MAN::before {
	    background-size:50px auto;
	}
	/* ONE */
	.ONE .CONT_BOX {
		position:relative;
		top:0;
		left:0;
		transform:translate(0%, 0%)
	}
	.ONE h1 {
		margin-bottom:30px;
		height:170px;
	}
	.one_user {
		margin:0 auto;
		margin-top:15px;
		width:260px;
	}
	.one_user .anCircle {
		margin:5px 5px;
		width:110px;
		height:110px;
	}
	.one_user .anCircle .an_in {
		width:100%;
	}
	.one_user .anCircle .an_in .nums {
		margin-bottom:5px;
		height:2.6rem;
		font-size:2.6rem;
	}
	.one_user .anCircle .an_in .title {
		line-height:1.1rem;
		font-size:1.1rem;
	}
	.one_user .anCircle .an_in .nums b {
		height:1.4rem;
		line-height:1.4rem;
		font-size:1.6rem;
	}
	/* MAN */
	.CONT_BOX .alert {
		margin-bottom:20px;
		line-height:18px;
		font-size:14px;
	}
	.MAN .CONT_BOX .mo_Txt {
		margin-bottom:10px;
	}
	.CONT_BOX .alert {
		margin-top:10px;
		font-weight:600;
	}
	.MAN .service_url::before {
		width:26px;
	}
	/* COMPANY */
	.COMPANY .CONT_BOX h1 {
		width:auto;
		height:50px;
	}
	.COMPANY .tit_kr {
		margin-bottom:10px;
		line-height:2.8rem;
	}
	.COMPANY .tit_en {
		margin-bottom:30px;
		font-size:1.8rem;
		line-height:2.3rem;
	}
	.COMPANY .tel_mail {
		display:block;
		margin:0;
		padding:0 30px;
		width:auto;
	}
	.COMPANY .tel_mail .tm_box {
		margin-bottom:10px;
		padding:20px 0;
		width:auto;
	}
	.COMPANY .tel_mail .tit {
		margin-bottom:10px;
		font-size:1.2rem;
	}
	.COMPANY .tel_mail .tit::before {
		margin-right:10px;
		width:16px;
		height:16px;
	}
	.COMPANY .tel_mail .txt {
		font-size:1.7rem;
		line-height:1.7rem;
	}
	.COMPANY .tel_mail .Address {
		margin-top:30px;
		margin-bottom:0;
		padding:0;
	}
	.COMPANY .tel_mail .Address .tit {
		margin-bottom:6px;
	}
	.COMPANY .tel_mail .Address .txt {
		margin-bottom:10px;
		padding:0 6px;
		font-size:1.16rem;
		line-height:1.8rem;
		letter-spacing:0;
	}
	.COMPANY .tel_mail .Address .ads_en {
		margin-bottom:0;
		padding:0;
		font-size:1rem;
		letter-spacing:0;
	}
	/* Background Position */
	.PLATFORM {
		background-image:url("../images/bg_platform_m.png");
	}
	.ONE {
		background-image:url("../images/bg_one_m.png");
	}
	.MAN {
		background-image:url("../images/bg_man_m.png");
	}
	.TEAM {
		background-image:url("../images/bg_team_m.png");
	}
	.HUB {
		background-image:url("../images/bg_hub_m.png");
	}
}
/* Nanum Square
font-family: 'NanumSquareLight';
font-family: 'NanumSquare';
font-family: 'NanumSquareBold';
font-family: 'NanumSquareExtraBold';
font-family: 'NanumSquareAcb';
font-family: 'NanumSquareAceb';
font-family: 'NanumSquareAcl';
font-family: 'NanumSquareAcr';
 */