@charset "utf-8";

/* font */
@font-face{
	font-family: 'Paperlogy';
	src: url('../font/Paperlogy-4Regular.woff2') format('woff2');
	src: url('../font/Paperlogy-4Regular.woff') format('woff');
}
@font-face{
	font-family: 'PaperlogyMedium';
	src: url('../font/Paperlogy-5Medium.woff2') format('woff2');
	src: url('../font/Paperlogy-5Medium.woff') format('woff');
}
@font-face{
	font-family: 'PaperlogySemiBold';
	src: url('../font/Paperlogy-6SemiBold.woff2') format('woff2');
	src: url('../font/Paperlogy-6SemiBold.woff') format('woff');
}
@font-face{
	font-family: 'PaperlogyBold';
	src: url('../font/Paperlogy-7Bold.woff2') format('woff2');
	src: url('../font/Paperlogy-7Bold.woff') format('woff');
}
@font-face{
	font-family: 'PaperlogyExtraBold';
	src: url('../font/Paperlogy-8ExtraBold.woff2') format('woff2');
	src: url('../font/Paperlogy-8ExtraBold.woff') format('woff');
}

/* root */
:root{
	--main-color: #336AEF; /*메인 파란색*/
	--sub-color-1: #FFFFFF; /*흰색*/
	--sub-color-2: #1D47AD; /*찐 파랑 */
	--point1: #8CC1FF;
	--point2: #90ADF2;
	--point3: #336AEF;
	--point4: #1D47AD;
	--point5: #3D4561;
	--bg-color-1: #F0F3FB; /*연파랑*/
	--bg-color-2: #F8FAFF; /*연회색*/
	--gray-color-1: #D9DFE8; /*연회색*/
	--gray-color-2: #BFC3D2; /*중간 회색*/
	--gray-color-3: #767B83; /*진회색*/
	--gray-color-4: #A2A8B0;/*input 회색*/
	--blue-border: #90ADF2;
	--font-color: #3D4561;
	--footer-bg: #272B39;
	--footer-font: #959AAA;
	--gradient:linear-gradient(180deg, #94B0F2 0%, #336AEF 100%);
	--shadow: 3px 4px 4px 0px rgba(51, 106, 239, 0.15);
	--red-color: #FF6161;
}
/* reset */
html, body{
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
  	overflow: initial;
	font: 18px 'Paperlogy';
 	text-wrap: pretty

}
*, :after, :before{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	flex-shrink: 0;
}
div, span{
	display: inline-block;
}
a{
	text-decoration: none;
	color: inherit;
}
a, a:focus, img{
	border: 0;
}
textarea{
	backface-visibility: hidden;
	border: 0;
	word-break: keep-all;
	word-wrap: break-word;
}
ul, li, ol, dd, dl{
	display: inline-block;
	margin: 0;
	padding: 0;
	list-style: none;
}
button, button:focus, input, input:focus{
	margin: 0;
	padding: 0;
	border: 0;
	outline: none;
	box-shadow: none;
}
table, thead, tbody, tr, th, td{
	table-layout: fixed;
	margin: 0;
	padding: 0;
	border-collapse: collapse;
	border-spacing: 0;
	word-break: break-all;
}
form, input, select, textarea, h1, h2, h3, h4, h5, h6, p{
	margin: 0;
	padding: 0;
}

/*margin*/
.mb10{
	margin-bottom: 10px !important;
}
.mb15{
	margin-bottom: 15px !important;
}
.mb20{
	margin-bottom: 20px !important;
}
.mb25{
	margin-bottom: 25px !important;
}
.mb30{
	margin-bottom: 30px !important;
}
.mb40{
	margin-bottom: 40px !important;
}
.mb50{
	margin-bottom: 50px !important;
}
.mb80{
	margin-bottom: 80px !important;
}
.mb100{
	margin-bottom: 100px !important;
}
.mt10{
	margin-top: 10px !important;
}
.mt20{
	margin-top: 20px !important;
}
.mt30{
	margin-top: 30px !important;
}
.mt40{
	margin-top: 40px !important;
}
.mt50{
	margin-top: 50px !important;
}
.mt80{
	margin-top: 80px !important;
}
.mt100{
	margin-top: 100px !important;
}
.ml20{
	margin-left: 20px !important;
}
/*padding*/
.pt100{
	padding-top: 100px;
}
.pb100{
	padding-bottom: 100px;
}

h2{
	float: left;
	box-sizing: border-box;
	width: 100%;
	font: 1rem 'PaperlogySemiBold';
	color: #0063F2;
	text-align: center;
}
.main_con2 h2, .main_con3 h2, .main_con4 h2{
	text-align: left;
}
h3{
	float: left;
	box-sizing: border-box;
	position: relative;
	width: 100%;
	padding-left: 30px;
	font: 2.556rem 'PaperlogyExtraBold';

}
h3::before{
	content: '';
	position: absolute;
	left: 5px;
	top: 5px;
	float: left;
	width: 17px;
	height: 35px;
	transform: rotate(30deg);
	flex-shrink: 0;
	border-radius: 50px;
	background: linear-gradient(180deg, #94B0F2 0%, #336AEF 100%);
}
h4{
	float: left;
	box-sizing: border-box;
	width: 100%;
	font: 1rem 'PaperlogyBold';
	color: var(--main-color);
	text-align: center;
}
h5{
	float: left;
	box-sizing: border-box;
	width: 100%;
	font: 2.5rem 'PaperlogySemiBold';
	color: #1D1D1D;
	text-align: center;
}
/* common */
body{
	position: relative;
	min-width: 1400px;
	height: 100vh;
	background-color: #FBFCFF;
	color: var(--font-color);
	letter-spacing: -0.02rem;
	overflow-x: hidden;
}
.wrap{
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    width: 100%;
    min-height: 100vh;
    top: 100px;
    left: 0;
}
/*nav*/
	header{
		display: flex;
	    justify-content: center;
	    align-items: center;
	    position: sticky;
	    top: 0;
	    left: 0;
		width: 100%;
		height: 100px;
		background: #0D1639;
    	border-bottom: 1px solid var(--font-color);
    	z-index: 99;
	}
	.ci_logo a{
		float: left;
	    width: 171px;
	    height: 42px;
		background: url('../images/ci_logo.svg') center no-repeat;
	}
	nav{
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    z-index: 99;
		width: 100%;
		max-width: 1400px;
		margin: 0 auto;
		height: 100px;
	}
		nav > ul{
			display: flex;
			z-index: 99;
			height: 100%;
			line-height: 100px;
		}
		.nav_bg{
			display: none;
			float: left;
			width: 100%;
			height: fit-content;
			position: absolute;
			top: 100px;
			height: 200px;
			left: 0;
			background: #0D1639;
			z-index: -1;
		}
			nav > ul > li{
				position: relative;
				width: 220px;
				text-align: center;
				cursor: pointer;
			}
			nav > ul > li.on a{
				color: var(--main-color);
				font-family: 'PaperlogyExtraBold';
			}
				nav > ul > li a{
					color: var(--sub-color-1);
					font: 1.167rem 'PaperlogySemiBold';
				}
				nav > ul > li a:hover{
					color: var(--main-color);
					transition: 0.35s linear;
				}
			nav .sub{
			    position: absolute;
			    left: 0;
			    top: 112px;
			    line-height: 25px;
			    display: none;
			    width: inherit;
			    gap: 30px;
				z-index: 99;
			}
			nav .sub li{
				width: 100%;
				padding: 15px 0;
				cursor: pointer;
			}
			nav .sub li a{
				display: block;
				font: 0.944rem 'PaperlogyMedium';
				z-index: 99;
			}
			nav .sub li a:hover{
				color: var(--main-color);
				font: 0.944rem 'PaperlogyMedium';
			}
			nav .sub li.nav_sf a{
				font-size: 0.889rem;
			}
			nav .sub li.nav_sf a:hover{
				font-size: 0.889rem;
			}
.btn:hover{
	opacity: 0.9;
	transition: 0.35s linear;
}			
/*퀵 버튼*/
.btn_quick{
	float: left;
    box-sizing: border-box;
    width: 50px;
    height: 50px;
    box-shadow: 1px 1px 5px rgba(51, 106, 239, .4);
    border-radius: 100%;
	display: flex;
    flex-direction: column;
    position: fixed;
    z-index: 10;
    bottom: 50px;
    right: 50px;
    background: url('../images/btn_quick.svg') center no-repeat;
    opacity: 0.85;
    cursor: pointer;
}
/*푸터*/
footer{
	display: flex;
    justify-content: center;
	float: left;
	box-sizing: border-box;
	width: 100%;
	height: 253px;
	padding: 50px 0;
	background: var(--footer-bg);
	color: var(--footer-font);
	font: 0.889rem 'Paperlogy';
}
	footer .inner > *{
		float: left;
		box-sizing: border-box;
		width: 100%;
	}
	.footer_logo{
		height: 42px;
		background: url('../images/footer_logo.svg') no-repeat;
	}

/*모바일 메뉴*/	
.btn_toggle {
	display: none;
	cursor: pointer;
	position: relative;
	float: right;
	width: 55px;
	height: 70px;
}
	.btn_toggle span{
		position:absolute;
		left: 5px;
		display: inline-block;
		width: 35px;
		height: 5px;
		background-color: var(--main-color);
		border-radius: 5px;
		transform-origin: center;
		transition: opacity 0.1s linear, all 0.35s linear;
	}
	.btn_toggle span:nth-of-type(1){
		top: 20px;
	}
	.btn_toggle span:nth-of-type(2){
		top: 35px;
	}
	.btn_toggle span:nth-of-type(3){
		top: 50px;
	}
	.menu_on .btn_toggle span:nth-of-type(1){
		transform: rotate(45deg);
		top: 35px;
	}
	.menu_on .btn_toggle span:nth-of-type(2){
		opacity:0;
	}
	.menu_on .btn_toggle span:nth-of-type(3){
		transform: rotate(-45deg);
		top: 35px;
	}
/**top(main meun):mobile**/
.btn_toggle {
	display: none;
	cursor: pointer;
	position: relative;
	float: right;
	width: 55px;
	height: 70px;
}
	.btn_toggle span{
		position:absolute;
		left: 5px;
		display: inline-block;
		width: 35px;
		height: 5px;
		background-color: var(--main-color);
		border-radius: 5px;
		transform-origin: center;
		transition: opacity 0.1s linear, all 0.35s linear;
	}
	.btn_toggle span:nth-of-type(1){
		top: 20px;
	}
	.btn_toggle span:nth-of-type(2){
		top: 35px;
	}
	.btn_toggle span:nth-of-type(3){
		top: 50px;
	}
	.menu_on .btn_toggle span:nth-of-type(1){
		transform: rotate(45deg);
		top: 35px;
	}
	.menu_on .btn_toggle span:nth-of-type(2){
		opacity:0;
	}
	.menu_on .btn_toggle span:nth-of-type(3){
		transform: rotate(-45deg);
		top: 35px;
	}
.m_nav {
	/*display: none;*/
	box-sizing: border-box;
	position: fixed;
	top: 70px;
	right: -100%;
	float: right;
	width: 100%;
	height: 100%;
	padding: 50px 15px;
	background: #0D1639 url('../images/mnav_background.png') no-repeat;
    background-position: 90% 86%;
	overflow-y: auto;
	transition: right 1.2s ease;
	z-index: 999;
}
	.menu_on .m_nav {
		/*display: block;*/
		right: 0;
		transition: right 1.2s ease;
	}
.m_mm_wrap {
	box-sizing: border-box;
	width: 100%;
	overflow: hidden;
}
.m_mm_wrap > li {
	cursor: pointer;
	box-sizing: border-box;
	float: left;
	position: relative;
	padding: 0 20px;
	width: 100%;
	border-bottom: 1px solid var(--line-color);
	text-align: left;
}
.m_mm_wrap > .m_mm {
	margin: 50px 0 20px 0;
	color: #FFF;
	font: 1rem 'PaperlogySemiBold';
}
.m_mm_wrap > .m_mm:first-child{
	margin-top: 0;
}
.m_sm {
	float: left;
	width: 100%;
	margin-bottom: 10px;
	font: 0.889rem 'Paperlogy';
	color: #DDD;
}
	.m_sm:last-child{
		margin-bottom: 0;
	}
.m_mm_wrap > .m_mm.on{
    color: var(--main-color);
    font-family: 'PaperlogyBold';
}
	.m_mm_wrap > li.on{
	    color: var(--blue-border);
	    font-family: 'PaperlogySemiBold';
	}