@charset "UTF-8";
/* 
font-size: 1.8em;  32px 
font-size: 1.35em;  24px 
*/
html, body {
	font-family:'Noto Sans KR','맑은 고딕','Malgun Gothic','돋움',Dotum,Helvetica,AppleGothic,Sans-serif;
	color: var(--clr-txt);
	font-size: 1em;
	font-weight: 500;
}
a { text-decoration: none; color: inherit; }
h1, h2, h3 { font-weight: 700; }
.w-40 { width: 40%; } 
.contents-wrap { width: 100%; overflow: hidden; }

/* -------- 공통 --------- */
.tit-h2 { font-size: 1.7em; }
.tit-h3 { font-size: 1.55em; }
.tit-h4 { font-size: 1.4em; }
.tit-sub { font-size: 1.2em }
/* ---- section title ---- */
.sec-tit h1 { font-size: 2.35em; z-index: 1; }
.sec-tit p { font-size: 1.35em; font-weight: 700; z-index: 1; }

/* ---- contents text ---- */
.conts-tit h3 { font-size: 1.35em; }
.conts-tit p { font-weight: 700; }

/* ---- button ---- */

/* ---- text ---- */
.text-keep { word-break: keep-all; }

/* ---- color ---- */
.txt-bizis { color: var(--clr-bizis-tint2); }
.txt-on { color: var(--clr-on-tint2); }
.txt-of { color: var(--clr-of-tint2); }

/* ---- background ---- */
.bg-biz { background: var(--clr-biz); }
.bg-bizis { background: var(--clr-bizis-tint4); }
.bg-on { background: var(--clr-on-tint5); }
.bg-of { background: var(--clr-of-tint5); }
.bg-white-op { background: #ffffffcf; }


/* ---- c-type ---- */
.c-type { padding: 0.5em 1.5em; color: #fff; border-radius: 5em; }
	.c-type-bizis { background: var(--clr-bizis-tint2); }
	.c-type-on { background: var(--clr-on-tint2); }
	.c-type-of { background: var(--clr-of-tint2); }
	.c-type-biz { background: var(--clr-biz); }
	a.c-type:hover { background: var(--clr-bizis-tint3); color: #fff; }
	.c-type-biz:hover { background: #26268a80; }

	/* c-card */
	.c-card { position: relative; }
	.c-card .c-type { position: absolute; top: -1em; left: 50%; transform: translateX(-50%); }

/* ---- roundBox ---- */
	.round-sm { border: 1px solid #dee2e6; border-radius: .5em; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); }
	.round-lg { border: 1px solid #dee2e6; border-radius: 1em; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); }

/* ---- centerBox ---- */
	.center-box { position: relative; }
	.center-contents { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

/* ---- text ---- */
	.text-keep { word-break: keep-all; }
	.li-none { list-style: none; }

/* ---- header ---- */
header { position: fixed; width: 100%; background: #fff; z-index: 9999; }
	.navbar .navbar-nav .nav-item { text-align: center; }
	.navbar .navbar-nav .nav-item .nav-link { padding: 0.5em 1.5em; color: var(--clr-txt); }
	.navbar .navbar-nav .nav-item .c-type { color: #fff; background: var(--clr-bizis-tint1); }
	.on-header { background: #5360D2; }
	.on-header .navbar .navbar-nav .nav-item .nav-link { color: #fff; }
	.on-header .navbar .navbar-nav .nav-item .c-type { color: var(--clr-on-tint1); background: #fff; }
	.of-header { background: #E1403F; }
	.of-header .navbar .navbar-nav .nav-item .nav-link { color: #fff; }
	.of-header .navbar .navbar-nav .nav-item .c-type { color: var(--clr-of-tint1); background: #fff; }


/* ---- top-visual ---- */
.top-visual { height: 920px; color: #fff; position: relative; z-index: -1; }
	.top-visual .sec-tit { z-index: 2; }
	.main-top-visual { padding: 10em 0 9em; background: url("../img/main-top-bg.png") no-repeat center bottom; }
		.main-top-visual .txt-deco { color: var(--clr-bizis-tint3); }
	.on-top-visual { padding: 12em 0 16em; background: url("../img/on-top-bg.png") no-repeat center bottom; }
	.of-top-visual { padding: 12em 0 16em; background: url("../img/of-top-bg.png") no-repeat center bottom; }
	.top-visual-tit { position: relative; padding: 1.2em 0; z-index: 2; }
	.top-visual-tit:after {
		content: "";
		position: absolute;
		width: 2500px;
		height: 100%;
		top: 0;
		right: 5em;
		background: #00000080;
		z-index: -1;
	}
	.top-visual-img { position: absolute; top: 50%; right: 0; transform: translateY(-50%) !important; text-align: right; z-index: -1;}
		.top-visual-img img { width: 80%; }
		.m-main-top-contents { display: none; }

/* ---- phone-contens ---- */
.phone-contens { margin-top: -14em; }
	.on-outline-box { background: url("../img/on-outline-bg.png") no-repeat right top; }
	.phone-txt { position: relative; }
	.phone-txt > div { position: absolute; top: 0; width: calc(100% - 9em); }
	.phone-txt .conts-tit .c-type { padding: .6em 1em; font-size: 1.1em; }
	.phone-contens .icon-simbol { border-radius: 50%; width: 2.5em; height: 2.5em; background: var(--clr-on-tint1); }
	.phone-contens .icon-simbol img{ width: 80%; }
	.of-outline .icon-simbol { border-radius: 50%; width: 2.5em; height: 2.5em; background: var(--clr-of-tint1); }
	.of-outline .icon-simbol img{ width: 80%; }
	.on-outline-box .conts-tit .c-type { background: var(--clr-on-tint3); }
	.of-outline-box .conts-tit .c-type { background: var(--clr-of-tint3); }
	.of-outline .conts-tit .c-type { background: var(--clr-of-tint3); }
	.on-outline { padding-top: 3em; }
/* ---- shortcut ---- */
.shortcut { padding: 3em 0; }
	.shortcut a { padding: .5em 0; }


/* ---- login ---- */ /* ys */
.login-page-wrap { width: 100%; height: 100vh; background: url("../img/login-bg.png") no-repeat center; }   
	.login-box {  width: 24em; padding: 1.5em; background: #fff; }
	.login-page-wrap .fixed-box { position: fixed; left: 5%; bottom: -20%;}
	.login-page-wrap .btn { font-size: 1.1em; font-weight: 700; }
	.login-page-wrap  a:hover,  .login-page-wrap .btn:hover { background: var(--clr-on-tint3); color: #fff; }
	.login-tit a:hover { background: none; }


/* ---- main ---- */
	/* main-bizis */
	.main-bizis { padding: 6em 0; }
		.main-bizis h2 { display: inline-block; }
		.main-bizis .card .c-type { padding: .5em .8em; background: var(--clr-bizis-tint2); border-radius: .6em; }
		.main-cir-con-box { position: relative; }
		.main-cir-con { position: absolute; top: 50%; transform: translateY(-50%) !important; }
		.main-bizis .circle-box { border-radius: 50%; }
		.main-bizis .circle-box-3 {  height: calc( 1320px / 4 ); }
		.main-bizis .circle-box-4 {  height: calc( 1320px / 3 ); }
		.main-bizis .circle-tit { position: absolute; top: 20%; left: 50%; transform: translate(-50%, -50%); }
		.main-bizis .circle-tit p { margin-top: 1em; font-size: .9em; }

	/* main-solution */
	.main-solution .bg-white-op { background: #ffffffdf; }

	/* main-on */
	.main-on { padding: 10em 0 5em; background: url("../img/main-on-bg.png") no-repeat right top; }
		.main-on .sec-tit { top: -3em; }
		.main-on .sec-tit .c-type { border-radius: 0 5em 5em 0; }
		.main-on .on-items .c-type { background: var(--clr-on-tint3); }

	/* main-of */
	.main-of { padding: 10em 0; background: url("../img/main-of-bg.png") no-repeat left top; }
		.main-of .sec-tit { top: -3em; }
		.main-of .sec-tit .c-type { border-radius: 5em 0 0 5em; }
		.main-of .on-items .c-type { background: var(--clr-of-tint3); }

	/* service */
	.service .c-type, .service .c-card .c-type { background: var(--clr-on-tint3); }
	.membership .c-card { height: 18em; }

/* ---- bizis on ---- */
	.pc-c-type-tit, .c-type-tit { width: 75%; }
	.m-c-type-tit { display: none; }
	/* on-flow */
	.on-flow { padding: 4em 0; }
	.on-flow .conts-tit-box { width: 60%;}
	.on-flow .conts-tit-box .rounded-pill { border: 2px solid #e7e8ff; }
	.on-flow .align-self-center { padding-top: 1.5em; }
	.on-flow4 { background: url("../img/on-flow-cont4-bg.png") no-repeat right top; }
	.m-on-flow4 { display: none; }
	.shortcut .c-button { font-size: 1.25em; }

/* ---- bizis of ---- */
	.expect { background: var( --clr-of-tint5 ); }
	.expect .cont-box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 50%; }
	.expect .cont-box > div { position: absolute; transform: translate(-50%, -50%); }
	.expect .cont-box .cont1 { top: 25%; left: 50%; }
	.expect .cont-box .cont2 { bottom: 0%; left: 50%; font-size: 1.2em;}
	.expect .cont-box .cont3 { top: 30%; left: 30%; background: var(--clr-of-tint3); }
	.expect .cont-box .cont4 { top: 60%; left: 20%; background: var(--clr-of-tint3); }
	.expect .cont-box .cont5 { top: 40%; right: 10%; background: var(--clr-of-tint3); }

/* ---- 문의하기 ---- */
.post { padding: 4em 0; background: #1A1A260D; }
.post #f_inquiries { min-height: 12em !important; border-radius: 1.3em; }
.post textarea.form-control-sm { min-height: 8em !important; border-radius: 1.3em; }
.post label { padding-left: .5em; font-weight: 500; }
.post .d-grid { grid-template-columns: 1em 1fr; }
.post .d-grid .invalid-feedback { grid-column: 2/3; }


/* ---- footer ---- */
footer { font-size: 0.778em; font-weight: 300; color: #fff; background: #252525; }
footer ul { list-style: none; }
footer ul li { display: inline-block; padding: 0 .6em; }
footer .copyrignt { font-weight: 500; color: #A4A4A4; }


@media ( max-width: 1399.98px ) {
	.phone-txt > div { width: calc(100% - 5em); }
	.main-bizis .circle-box-3 {  height: calc( 1200px / 4 ); }
	.main-bizis .circle-box-4 {  height: calc( 1200px / 3 ); }
}
@media ( max-width: 1199.98px ) {
	.wrap { font-size: .875em; }

	/* ---- top-visual ---- */
		.main-top-visual { padding: 10em 0 9em; height: auto; background: url("../img/t-main-top-bg.png") no-repeat center top; background-size: cover; }	
	
	/* ---- phone-contens ---- */
		.phone-txt > div { position: relative; width: 100%;}
		.on-outline { padding-top: 1em; }
		.phone-txt-bg { display: none; }

	/* ---- main ---- */
	.main-cir-con-box .bg-bizis { background: none; }
		.main-cir-bizis { border-bottom: 1px solid var(--clr-bizis-tint3); }
		.main-cir-bizis p { padding: 0; }
		.main-cir-con { position: relative; top: 0; transform: translate(0, 0) !important; }
		.main-bizis .circle-tit { position: static; transform: translate(0, 0);}
		.main-bizis .circle-box { margin: 1em; padding: 0 0 1em; height: auto; border-radius: .25em; }
		.main-bizis .circle-box .center-contents { position: static; transform: translate(0, 0); } 

	/* ---- bizis on ---- */
	.pc-c-type-tit { display: none; }
	.c-type-tit, .m-c-type-tit { display: block; width: 90%; text-align: center; }
	.on-flow .conts-tit-box { width: 100%;}
	.on-flow4 { background: none; }
	.m-none { display: none; }
	.m-on-flow4 { display: block; }
}
@media ( max-width: 991.98px ) {
	.logo img { width: 70%; }
	.navbar .navbar-nav .nav-item { margin-bottom: .5em; }
	.navbar .navbar-nav .nav-item .c-type { color: var(--clr-txt); background: none; }
	.on-header .navbar .navbar-nav .nav-item .c-type, .of-header .navbar .navbar-nav .nav-item .c-type { color: #fff; background: none; }
	.on-header .navbar-toggler span, .of-header .navbar-toggler span { color: #fff; }
	/* ---- main ---- */
		/* main-bizis */
		.main-bizis .sec-tit p { font-size: 1.2em; }

	/* ---- bizis of ---- */
		.expect .cont-box { bottom: 3em; left: 50%; transform: translateX(-50%); width: 100%; height: 50%; }
		.expect .cont-box .cont1 { top: 0; left: 50%; }
		.expect .cont-box .cont2 { bottom: 0; left: 50%; font-size: 1.5em;}
		.expect .cont-box .cont5 { right: 0; }

	/* ---- popup ---- */
	.popup-box { top: 56px; width: 100%; }
	.popup-box .popup-content { height: calc(100vh - 90px); }
}
@media ( max-width: 575.98px ) {
	.wrap { font-size: .813em; }

	/* ---- top-visual ---- */
		.main-top-visual { position: relative; padding: 0; background: url("../img/m-main-top-bg.png") no-repeat center top; background-size: cover; height: 100vh; }	
		.main-top-visual-contents { position: absolute; top:50%; transform: translateY(-50%); }
		.main-top-visual p.txt-deco { display: inline-block; padding: 0.3em 1.5em; color: #fff; border-radius: 5em; background: var(--clr-bizis-tint2); }
		.main-top-contents { display: none; }
		.m-main-top-contents { display: block; width: 100%;  }		
		.top-visual-logo p { font-size: 1em; }
		.top-visual-logo img { width: 50%; }
		.top-visual-tit:after { right: 0; }
		.top-visual-img img { width: 100%; }

	/* main-solution */
	.main-solution .tit-h2 { font-size: 1.6em; }
	.main-solution .bg-white-op { background: #fffffff0; }
	
	.phone-contens {  background-size: 200%; }

	.service .c-card { height: auto; }

	/* ---- bizis of ---- */
	.expect .cont-box { bottom: 3em; left: 50%; transform: translateX(-50%); width: 100%; height: 60%; }
		.expect .cont-box .c-type { padding: .3em 1em; }
		.expect .cont-box .cont1 { top: 0; left: 50%; text-align: center; }
		.expect .cont-box .cont1 img { width: 50%; }
		.expect .cont-box .cont2 { display: block; width: 60%; text-align: center; bottom: 0; left: 50%; font-size: 1.2em;}
		.expect .cont-box .cont3 { top: 0; left: 0; transform: translate(0, 0); }
		.expect .cont-box .cont4 { top: 60%; left: 5%; transform: translate(0, 0); }
		.expect .cont-box .cont5 { top: -10%; right: 0;transform: translate(0, 0); }	
}
:root {
	--clr-txt: #1a1a26;
	--clr-biz: #26268a;
	--clr-bizis-tint1: #771FC4;
	--clr-bizis-tint2: #924CD0;
	--clr-bizis-tint3: #C9A5E7;
	--clr-bizis-tint4: #E4D2F3;
	--clr-on-tint1: #454FFF;
	--clr-on-tint2: #6A72FF;
	--clr-on-tint3: #8F95FF;
	--clr-on-tint4: #DADCFF;
	--clr-on-tint5: #F4F5FF;
	--clr-of-tint1: #FF3A39;
	--clr-of-tint2: #FF6161;
	--clr-of-tint3: #FF8988;
	--clr-of-tint4: #FFD8D7;
	--clr-of-tint5: #FFEFEF;
}