@charset "utf-8";

@font-face {font-family: 'Noto Sans KR';font-display:block;font-style: normal;font-weight: 100;
	        src: url(font/NotoSansKR-Thin.woff2) format('woff2'),
			     url(font/NotoSansKR-Thin.woff) format('woff'),
				 url(font/NotoSansKR-Thin.otf) format('opentype');
		         }
@font-face {font-family: 'Noto Sans KR';font-display:block;font-style: normal;font-weight: 300;
	src: url(font/NotoSansKR-Light.woff2) format('woff2'),
	url(font/NotoSansKR-Light.woff) format('woff'),
	url(font/NotoSansKR-Light.otf) format('opentype');
	}
@font-face {font-family: 'Noto Sans KR';font-display:block;font-style: normal;font-weight: 350;
	src: url(font/NotoSansKR-DemiLight.woff2) format('woff2'),
	url(font/NotoSansKR-DemiLight.woff) format('woff'),
	url(font/NotoSansKR-DemiLights.otf) format('opentype');
	}	
@font-face {font-family: 'Noto Sans KR';font-display:block;font-style: normal;font-weight: 400;
	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: 'Noto Sans KR';font-display:block;font-style: normal;font-weight: 500;
	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: 'Noto Sans KR';font-display:block;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: 'Noto Sans KR';font-display:block;font-style: normal;font-weight: 900;
	src: url(font/NotoSansKR-Black.woff2) format('woff2'),
	url(font/NotoSansKR-Black.woff) format('woff'),
	url(font/NotoSansKR-Black.otf) format('opentype');
	}

* {
    font-family: 'Noto Sans KR', sans-serif;
}


/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
	background: #fff;
	color: #444;
	font-family: "Noto Sans KR", sans-serif;
	overflow-y: scroll;
	margin:0 auto;
  }
  
  
  a {
	color: #0b6e89;
	text-decoration: none;
	transition: 0.5s;
  }
  
  a:hover, a:active, a:focus {
	color: #1bb1dc;
	outline: none;
	text-decoration: none;
  }


  p {
	font-size:1.25rem;
	font-family: "Noto Sans KR", sans-serif;
	font-weight: 400;
	padding: 0;
	margin: 0 0 0px 0;
	line-height: 2rem;
	word-break: keep-all;

  }

  h1, h2, h3, h4, h5, h6{
	font-family: "Noto Sans KR", sans-serif;
	font-weight: 400;
	margin: 0 0 0px 0;
	padding: 0;
	word-break: keep-all;
  }

  h1 {
	font-size: 3rem;
	font-family: "Noto Sans KR", sans-serif;
	font-weight: 400;
	margin: 0 0 0px 0;
	padding: 0;
	word-break: keep-all;
  }

  h3 {
	font-size: 1.875rem;
	font-family: "Noto Sans KR", sans-serif;
	font-weight: 400;
	margin: 0 0 0px 0;
	padding: 0;
	word-break: keep-all;
  }

  h4 {
	font-size: 1.25rem;
	font-family: "Noto Sans KR", sans-serif;
	font-weight: 400;
	margin: 0 0 0px 0;
	padding: 0;
	word-break: keep-all;
  }
  
  h6 {
	font-size: 1.0rem;
	line-height: 1.8rem;
  }

  .lead{
	font-size: 1.875rem;
	text-align: center;
	font-family: "Noto Sans KR", sans-serif;
	font-weight: 400;
	margin: 0 0 0px 0;
	padding: 0;
	word-break: keep-all;
	padding-bottom: 3.125rem;
  }

  .lead_intro{
	padding-bottom: 1.875rem !important;
  } 


  th{
	font-size:1.4rem;
	font-family: "Noto Sans KR", sans-serif;
	font-weight: bold;
	padding: 0;
	margin: 0 0 0px 0;
	vertical-align:middle;
  }

  li{
	font-size:1.2rem;
	font-family: "Noto Sans KR", sans-serif;
	font-weight: 400;
	padding: 0;
	margin: 0 0 0px 0;
	vertical-align:middle;
	word-break: keep-all;
  }

  dt, dd {
	font-size:1.2rem;
	font-family: "Noto Sans KR", sans-serif;
	font-weight: 400;
	padding: 0;
	margin: 0 0 0px 0;
	vertical-align:middle;	
  }

  .container-px{
	padding-right: 0rem;
	padding-left: 0rem;
  }
  .main-service-px{
	padding-right: 4rem;
	padding-left: 4rem;
  }


  .container-py{
	padding-top: 3.0rem;
	margin-top: 0.5rem;
  }
  
  hr{
	opacity: .25;
	background-color: currentColor;
  }

   #main_container .space_h{
	   height: 2vh;
   }

   .sub_action:active{
	   background-color: #eee;
   }
   
  @media (max-width: 991px) {

	p {
	font-size: 1.1rem;
	font-family: "Noto Sans KR", sans-serif;
	font-weight: 400;
	padding: 0;
	margin: 0 0 0px 0;
	line-height: 1.8rem;
	word-break: keep-all;

	}

	h1 {
	font-size: 2.8rem;
	font-family: "Noto Sans KR", sans-serif;
	font-weight: 400;
	margin: 0 0 0px 0;
	padding: 0;
	word-break: keep-all;
	}

	h3 {
	font-size: 1.7rem;
	font-family: "Noto Sans KR", sans-serif;
	font-weight: 400;
	margin: 0 0 0px 0;
	padding: 0;
	word-break: keep-all;
	}

	h4 {
	font-size: 1.1rem;
	font-family: "Noto Sans KR", sans-serif;
	font-weight: 400;
	margin: 0 0 0px 0;
	padding: 0;
	word-break: keep-all;
	}
	
	h5 {
		font-size: 1.1rem;
		font-family: "Noto Sans KR", sans-serif;
		font-weight: 400;
		margin: 0 0 0px 0;
		padding: 0;
		word-break: keep-all;
	  }

	  h6 {
		font-size: 0.8rem;
		line-height: 1.5rem;
		}

	.lead{
	font-size: 1.6rem;
	font-family: "Noto Sans KR", sans-serif;
	font-weight: 400;
	text-align: center;
	margin: 0 0 0px 0;
	padding: 0; 
	word-break: keep-all;
	padding-bottom: 1rem;

	}

	.lead_intro{
		padding-bottom: 1rem !important;
	  } 

	th{
	font-size:1.2rem;
	font-family: "Noto Sans KR", sans-serif;
	font-weight: bold;
	padding: 0;
	margin: 0 0 0px 0;
	vertical-align:middle;
	}

	li{
	font-size:1.1rem;
	font-family: "Noto Sans KR", sans-serif;
	font-weight: 400;
	padding: 0;
	margin: 0 0 0px 0;
	vertical-align:middle;
	}

	dt, dd {
	font-size:1.1rem;
	font-family: "Noto Sans KR", sans-serif;
	font-weight: 400;
	padding: 0;
	margin: 0 0 0px 0;
	vertical-align:middle;	
	}
	
	.container-px{
		padding-right: 1.2rem!important;
		padding-left: 1.2rem!important;
	  }
	  .main-service-px{
		padding-right: 1.2rem!important;
		padding-left: 1.2rem!important;
    }
	


  }  

  /*--------------------------------------------------------------
  # Back to top button
  --------------------------------------------------------------*/
  .back-to-top {
	position: fixed;
	visibility: hidden;
	opacity: 0;
	right: 15px;
	bottom: 15px;
	z-index: 996;
	background: #1bb1dc;
	width: 40px;
	height: 40px;
	border-radius: 50px;
	transition: all 0.4s;
  }
  .back-to-top i {
	font-size: 28px;
	color: #fff;
	line-height: 0;
  }
  .back-to-top:hover {
	background: #39c0e7;
	color: #fff;
  }
  .back-to-top.active {
	visibility: visible;
	opacity: 1;
  }
  

/* withSign 서비스 특장점 */

.flex-column-xs {
    flex-direction:initial !important;

}

.margin-xs{
	margin-left:auto; 
	margin-right:auto;
	width: 20vw;
}

@media all and (max-width:767px) {
	.margin-xs{
		width: 65vw;
	}
	.flex-column-xs {
		flex-direction: row ;
	}	
}	
  /*--------------------------------------------------------------
  # Disable aos animation delay on mobile devices
  --------------------------------------------------------------*/
/*
  @media screen and (max-width: 768px) {
	[data-aos-delay] {
	  transition-delay: 0 !important;
	}
  }
*/
/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {
	background: #fff;
	transition: all 0.5s;
	z-index: 997;
	height: 90px;
  }
  #header.header-transparent {
	background: transparent;
  }
  #header.header-scrolled {
	background: #fff;
	height: 70px;
	box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.3);
  }


  #header .logo a {
	color: #413e66;
  }
  #header .logo img {
	max-height: 40px;
  }

  @media all and (min-width:768px) {
	#header .logo {
		font-size: 24px;
		margin: 0;
		padding: 0;
		font-weight: 400;
		letter-spacing: 3px;
		margin-right: auto !important;
	  }
  }

  @media (max-width: 992px) {
	#header .social-links {
	  margin: 0 0 0 0;
	}
  }
  @media (max-width: 992px) {
	#header .logo {
	  font-size: 28px;
	  width:88vw;
	  margin-right:0rem;
	}
  }

  .fixed-top_mobile {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1000;
  }  

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/**
* Desktop Navigation 
*/

.navbar {
	padding: 0;
  }
  .navbar ul {
	margin: 0;
	padding: 0;
	display: flex;
	list-style: none;
	align-items: center;
  }
  .navbar li {
	position: relative;
  }
  .navbar a, .navbar a:focus {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0px 0 0px 24px;
	font-family: "Noto Sans KR", sans-serif;
	/*text-transform: uppercase;*/
	font-size: 14px;
	font-weight: 600;
	color: #111111;
	white-space: nowrap;
	transition: 0.3s;
  }
  .navbar a i, .navbar a:focus i {
	font-size: 12px;
	line-height: 0;
	margin-left: 0;
  }
  .navbar a:hover, .navbar .active, .navbar .active:focus, .navbar li:hover > a {
	color: #019ff1;
  }
  


/**
* Mobile Navigation 
*/
.mobile-nav-toggle {
	color: #413e66;
	font-size: 28px;
	cursor: pointer;
	display: none;
	line-height: 0;
	transition: 0.5s;
  }
  .mobile-nav-toggle.bi-x {
	color: #fff;
  }
  
  @media (max-width: 991px) {
	.mobile-nav-toggle {
	  display: block;
	}
  
	.navbar ul {
	  display: none;
	}

  }



  .navbar-mobile {
	position: fixed;
	overflow: hidden;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	background: rgba(45, 43, 70, 0.9);
	transition: 0.3s;
	z-index: 999;
  }
  .navbar-mobile .mobile-nav-toggle {
	position: absolute;
	top: 15px;
	right: 15px;
  }
  .navbar-mobile ul {
	display: block;
	position: absolute;
	top: 55px;
	right: 15px;
	/* bottom: 15px; */
	/* left: 15px; */
	padding: 1rem 1rem 1rem 1rem;
	background-color: #fff;
	overflow-y: auto;
	transition: 0.3s;
  }
  .navbar-mobile a, .navbar-mobile a:focus {
	padding: 10px 20px;
	font-size: 15px;
	color: #413e66;
  }
  .navbar-mobile a:hover, .navbar-mobile .active, .navbar-mobile li:hover > a {
	color: #1bb1dc;
  }

/* =======================================
Introduction solution
=========================================*/

  section.masthead {
	position: relative;
	margin-top: 1rem;
	margin-bottom: 1rem;
	padding-top: calc(4rem + 57px);
	padding-bottom: 4rem;
	background: no-repeat center center;
	background-color: #6c757d;
	background-size: cover;
	background-attachment: scroll;
  }

  section.masthead .container {
	position: absolute;
	top : 55%;
	left: 50%;
	transform: translate(-50%,-50%);
  }
  
  section.masthead:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #212529;
	opacity: 0.5;
  }
  section.masthead .page-heading,
  section.masthead .post-heading,
  section.masthead .site-heading {
	color: #fff;
  }
  section.masthead .page-heading,
  section.masthead .site-heading {
	text-align: center;
  }
  section.masthead .page-heading h1, section.masthead .page-heading .h1,
  section.masthead .site-heading h1,
  section.masthead .site-heading .h1 {
	font-size: 2.5rem;
  }
  section.masthead .page-heading .subheading,
  section.masthead .site-heading .subheading {
	font-size: 1.5rem;
	font-weight: 300;
	line-height: 1.1;
	display: block;
	margin-top: 1.5rem;
	font-family: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  }
  section.masthead .post-heading h1, section.masthead .post-heading .h1 {
	font-size: 2.25rem;
  }
  section.masthead .post-heading .meta,
  section.masthead .post-heading .subheading {
	line-height: 1.1;
	display: block;
  }
  section.masthead .post-heading .subheading {
	font-size: 1.5rem;
	font-weight: 600;
	margin: 0.75rem 0 2rem;
	font-family: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  }
  section.masthead .post-heading .meta {
	font-size: 1.25rem;
	font-weight: 300;
	font-style: italic;
	font-family: "Lora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  }
  section.masthead .post-heading .meta a {
	color: #fff;
  }
  @media (min-width: 992px) {
	section.masthead {
	  height: 50vh;	 
	  padding-top: 8.5rem;
	  padding-bottom: 8.5rem;
	}
	section.masthead .page-heading h1, section.masthead .page-heading .h1,
  section.masthead .site-heading h1,
  section.masthead .site-heading .h1 {
	font-size: 4rem;
	}
	section.masthead .post-heading h1, section.masthead .post-heading .h1 {
	  font-size: 3.5rem;
	}
	section.masthead .post-heading .subheading {
	  font-size: 1.875rem;
	}


  }

  @media all and (max-width:767px) {
    section.masthead .page-heading h1, section.masthead .page-heading .h1,
	section.masthead .site-heading h1,
	section.masthead .site-heading .h1 {
		font-size: 1.8rem;
	  }
	  section.masthead .post-heading h1, section.masthead .post-heading .h1 {
		font-size: 3.5rem;
	  }
	  section.masthead .post-heading .subheading {
		font-size: 1.3rem;
	  }
	  section.masthead .page-heading .subheading,
	  section.masthead .site-heading .subheading {
		font-size: 0.75rem;
		font-weight: 300;
		line-height: 1.1;
		display: block;
		margin-top: 1rem;
		font-family: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	  }	
	  
	  .container-px{
		padding-right: 1.2rem!important;
		padding-left: 1.2rem!important;
	  }

	  .main-service-px{
		padding-right: 1.2rem!important;
		padding-left: 1.2rem!important;
    }



	  p {
		font-size:0.9rem;
		font-family: "Noto Sans KR", sans-serif;
		font-weight: 400;
		padding: 0;
		margin: 0 0 0px 0;
		line-height: 1.5rem;
		word-break: keep-all;
	  }
	
	  h1, h2, h3, h4, h5{
		font-family: "Noto Sans KR", sans-serif;
		font-weight: 400;
		margin: 0 0 0px 0;
		padding: 0;
		word-break: keep-all;
	  }
	
	  h1 {
		font-size: 1.8rem;
		font-family: "Noto Sans KR", sans-serif;
		font-weight: 400;
		margin: 0 0 0px 0;
		padding: 0;
		word-break: keep-all;
	  }
	
	  h3 {
		font-size: 1.2rem;
		font-family: "Noto Sans KR", sans-serif;
		font-weight: 400;
		margin: 0 0 0px 0;
		padding: 0;
		word-break: keep-all;
	  }
	
	  h4 {
		font-size: 1.0rem;
		font-family: "Noto Sans KR", sans-serif;
		font-weight: 400;
		margin: 0 0 0px 0;
		padding: 0;
		word-break: keep-all;
	  }
	  
	  h5 {
		font-size: 0.8rem;
		font-family: "Noto Sans KR", sans-serif;
		font-weight: 400;
		margin: 0 0 0px 0;
		padding: 0;
		word-break: keep-all;
	  }
	  	
	  .lead{
		font-size: 1.2rem;
		font-family: "Noto Sans KR", sans-serif;
		font-weight: 400;
		text-align: center;
		margin: 0 0 0px 0;
		padding: 0; 
		word-break: keep-all;
		white-space: nowrap;
		padding-bottom: 1rem;
	
	  }
	
	  th{
		font-size:1.0rem;
		font-family: "Noto Sans KR", sans-serif;
		font-weight: bold;
		padding: 0;
		margin: 0 0 0px 0;
		vertical-align:middle;
	  }
	
	  li{
		font-size:1.0rem;
		font-family: "Noto Sans KR", sans-serif;
		font-weight: 400;
		padding: 0;
		margin: 0 0 0px 0;
		vertical-align:middle;
		word-break: keep-all;
	  }
	
	  dt, dd {
		font-size:1.0rem;
		font-family: "Noto Sans KR", sans-serif;
		font-weight: 400;
		padding: 0;
		margin: 0 0 0px 0;
		vertical-align:middle;	
	  }
	  .table ul{
		margin:0rem; 
		padding-left:1rem;
	  }


	
}


/* =======================================
Introduction solution
=========================================*/


.img-wrap{
	position: relative;
}

.title{
	position: absolute;
	top : 50%;
	left: 50%;
	transform: translate(-50%,-50%);	
	font-size: 2.25rem;
	color :white;
	text-shadow: 2px 2px 2px rgb(61, 60, 60);
	text-align :center;
	width: 100%;
}


@media (max-width:767px) {

	.title{
		position:absolute;
		top : 50%;
		left: 50%;
		transform: translate(-50%,-50%);	
		font-size: 1.2rem;
		color :white;
		text-shadow: 2px 2px 2px rgb(61, 60, 60);
		text-align :center;
		z-index: 100;
		width: 100%;
	}	


}

#subject {
	position: relative;
	margin-top: 0rem;
	margin-bottom: 0rem;
}

.logo_margin{
	margin-top: 4.875rem;
	margin-bottom: 2.5rem;
	height: 52px;
}


#introduction {
	position: relative;
	color: black;
	margin-top: 6rem;
	margin-bottom: 6rem;
}

#introduction p {
	color: #555555;
}

#introduction span{
	font-size : 1.25rem;
	font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
	color: #333333;
	font-weight: 400;
	padding-top: 1.5625rem;
	margin-top: 1.5625rem;
	line-height: 2rem;
}

@media (max-width:767px) {
	#introduction {
		margin-top: 4rem;
		margin-bottom: 4rem;
	}

	#introduction span{
		font-size : 1.1rem;
		font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
		color: #333333;
		font-weight: 400;
		padding-top: 1.5625rem;
		margin-top: 1.5625rem;
		line-height: 1.8rem;
	}	
	
	.logo_margin{
		margin-top: 3.5rem;
		margin-bottom: 1.0rem;
		height: 40px;
	}


}

#effect {
	position: relative;	
	margin-top: 6rem;
	margin-bottom: 6rem;	
}

#effect ul {
	color: #333333;
	padding-left : 1rem;
	line-height: 2.0rem;
	font-size:  1.25rem;
	text-align: left;		
	word-break: keep-all;
}

#effect li {
	color: #333333;
	margin-bottom: 0rem;
	padding-left : 0rem;
	line-height: 2.0rem;
	font-size:  1.25rem;
	text-align: left;		
	word-break: keep-all;
}

#effect .card-body p{
	color: #333333;	
}


.card-color-1{
	background-color: #23aff8;
	border-color:#23aff8;
  }
.card-color-2{
  background-color: #018ef1;
  border-color:#018ef1;
}
.card-color-3{
  background-color: #0172f1;
  border-color: #0172f1;
}
.border-color-1{
  border-style:solid;
  border-color: #23aff8;
  border-width: 1px;
}
.border-color-2{
  border-style:solid;
  border-color: #018ef1;
  border-width: 1px;
}
.border-color-3{
  border-style:solid;
  border-color: #0172f1;
  border-width: 1px;
}  

#effect .xs-bottom-margin{
	margin-top: 0rem!important;
	margin-bottom: 0rem!important;
	
}


@media (max-width:767px) {

	#effect {
		margin-top: 4rem;
		margin-bottom: 4rem;	
	}

		#effect ul{
		color: #333333;
		margin-bottom: 0rem;
		padding-left : 0.5rem;
		line-height: 1.5rem;
		font-size:  0.9rem;
        text-align: left;		
		word-break: keep-all;
	}

	#effect li {
		color: #333333;
		margin-bottom: 0rem;
		padding-left : 0rem;
		line-height: 1.5rem;
		font-size:  0.9rem;
        text-align: left;		
		word-break: keep-all;
	}

	#effect .xs-bottom-margin{
		margin-top: 0rem!important;
		margin-bottom: 1.0rem!important;
	}	

	#effect .card-header {

		padding-top: 0.5rem;
		padding-right: 1.0rem;
		padding-bottom: 0.5rem;
		padding-left: 1.2rem;
	
	}		
	
	#effect .card-body {

		padding-top: 0.7rem;
		padding-right: 1.0rem;
		padding-bottom: 0.7rem;
		padding-left: 1.2rem;
	
	}	
}

#flow {
	position: relative;	
	margin-top: 6rem;
	margin-bottom: 6rem;	
}

#flow .xs-bottom-margin{
	margin-top: 0rem!important;
	margin-bottom: 0rem!important;
	
}

#flow .flow-img{
	margin-top: 4rem!important;
}


#flow ul {
	color: #333333;
	margin-bottom: 0rem;
	padding-left : 0rem;
	line-height: 2.0rem;
	font-size:  1.25rem;
	font-weight: 400;
	text-align: left;		
	word-break: keep-all;
}


#flow li {
	color: #333333;
	margin-bottom: 0rem;
	margin-left: -0.5rem;
	margin-right: -0.5rem;
	padding-left : 0rem;
	line-height: 2.0rem;
	font-size:  1.25rem;
	font-weight: 400;
	text-align: left;		
	word-break: keep-all;
}

.flow-sign-xs{
	padding: 0 0.2rem 1.0rem 0.2rem !important;
}

#flow .flow-px{
	padding-left: 3rem;	
	padding-right: 3rem;

}


@media (max-width:767px) {

	#flow {
		margin-top: 4rem;
		margin-bottom: 4rem;	
	}

	#flow .xs-bottom-margin{
		margin-top: 0rem!important;
		margin-bottom: 1.0rem!important;
	}

	#flow .flow-img{
		margin-top: 2rem!important;
	}

	#flow li {

		font-size:0.9rem;
		font-family: "Noto Sans KR", sans-serif;
		font-weight: 400;
		line-height: 1.5;
		padding: 0;
		margin: 0 0 0px 0;
		vertical-align:middle;
		word-break: keep-all;

	}

	.flow-ocr-xs{
		padding: 0 0.4rem 0 0.4rem !important;
	}
	
	.flow-sign-xs{
		padding: 0 0.2rem 0.0rem 0.2rem !important;
	}
	
    #flow .flow-px{
	  padding-left: 1rem;
	  padding-right: 1rem;
	  align-content: center;
	}
		

}

#service {
	position: relative;
    margin-top: 6rem;
	margin-bottom: 6rem;
}

.service-img-icon {
	margin-top: 0rem;
	text-align: center;
	background: #fff;
}

.service-inner {
	margin-top: 1rem;
	margin-bottom: 1rem;
	text-align: center;
}


.service-px{
	margin-left: 0rem;
	margin-right: 0rem;
}

#service .xs-bottom-margin{
	margin-top: 1.5rem!important;
	margin-bottom: 0rem!important;
	
}



@media (max-width:767px) {
	#service {
		margin-top: 4rem;
		margin-bottom: 4rem;
	}

	.service-inner {
		margin-top: 0rem;
		margin-bottom: 1rem;
		text-align: center;
	}	

	.service-px{
		margin-left: 1rem;
		margin-right: 1rem;
	}

	#service .xs-bottom-margin{
		margin-top: 0.5rem!important;
		margin-bottom: 1.5rem!important;
	}

	
	#service .xs-bottom-margin > card{
		margin-top: 0.0rem!important;
		margin-bottom: 1.0rem!important;
	}

	#service .lead + .service-px{
		margin-left: 0rem !important;
		margin-right: 0rem !important;
	}


	#service .card-body{
		padding: 0.2rem;
	}


}

#example {
	position: relative;
    margin-top: 6rem;
	margin-bottom: 6rem;
}

.example-list {
	margin-top: 30px;
  }
  
.example-list li {
	width: 45%;
	float: left;
	margin-bottom: 15px;
	margin-right: 15px;
	padding-top: 15px;
	color: black;
}


@media (max-width:767px) {
	#example {
		margin-top: 4rem;
		margin-bottom: 4rem;
	}	
}

#etc {
	position: relative;
	margin-top: 6rem;
	margin-bottom: 6rem;
}

.etc_border{
	border:1px solid #ddd;
	border-radius: 4px;	
	transition: border 0.3s ease-out;
}

@media (max-width:767px) {
	#etc {
		margin-top: 4rem;
		margin-bottom: 4rem;
	}	
}

#footer {
	height: 4vh;
}

#footer dt_address{
	margin: 0 0 0px 0;
	font-size:12px;
	text-align: center;
	word-break: keep-all;

}
#footer dt_address span{
	font-size:10px;
	word-break: keep-all;
}

@media (max-width:767px) {
	#footer {
		height: 10vh;
	}
}

/* 조직도 */
.card-color-9{
	background-color: #718fa1;
	border-color: #718fa1;
}

.border-color-9{
	border-style:solid;
	border-color: #718fa1;
	border-width: 1px;
  }

.right-line {
	border-right: 1px #ccc solid;
	height:2em
  }
  
  .top-line {
	border-top: 1px #ccc solid;
  }
  
  .halved {
	width: 50%;
	float:left;
  }


  .history_line_r{
	border-right: 1px #ccc solid;
	/*padding-bottom: 1rem;*/
	padding-right: 2.5rem;
	text-align: right;	
  }

  .history_line_l{
	/*border-left: 1px #ccc solid;*/
	/*padding-bottom: 1rem;*/
	padding-left: 2.5rem;
  }

  .history_img_l{

	position:absolute;  
	left: 0.66rem; 
	top : 1.15rem;
	transform: translate(-50%,-50%);
	display:block;
  }

  .history_img_r{

	position:absolute;  
	right: -0.66rem; 
	top : 0.5rem;
	transform: translate(-50%,-50%);
	transform: rotate(180deg);
	display:block;
	z-index: 100;
  }

  .p_line_h {
    padding-bottom: 0.7rem;
	line-height: 1.5rem;
  }

  .explain_h {
    margin-top: 4rem;
	padding : 1.5rem 1.5rem 1.5rem 1.5rem;
	line-height: 2rem;
	font-size : 1.1rem;
	color : gray;
  }

  @media (max-width:767px) {

	.history_line_r{
		border-left: 1px #ccc solid;
		border-right: 0px #ccc solid;
	/*padding-bottom: 1rem;*/
		padding-left: 2.4rem;	
		margin-left:1rem;
		text-align: left;
	  }

	.history_line_l{
		border-left: 1px #ccc solid;
	/*padding-bottom: 1rem;*/
		padding-left: 2.4rem;
		margin-left:1rem;
	  }

	.history_img_r{
		position:absolute;  
		left: 0.7rem; 
		top : 0.9rem;
		transform: translate(-50%,-50%);
		display:block;
		}

	.history_img_l{
		position:absolute;  
		left: 0.7rem; 
		top : 0.91rem;
		transform: translate(-50%,-50%);
		display:block;
		}

	.p_line_h {
		padding-bottom: 0.7rem;
		line-height: 1.2rem;
		}
		
	.explain_h {
		margin-top: 2rem;
		padding : 1rem 1rem 1rem 1rem;
		line-height: 1.2rem;
		font-size : 0.9rem;
		color : gray;
		}
}


.card-bard-2{
    padding-left:0.5rem;
    padding-right:0.5rem;
}


  .card-header_ocr{
      flex: 1 0 80px;
      display: flex;
      justify-content:center;
      align-items: center;
  }

  .fw-bolder {
    font-weight: bolder!important;
}


  /*--------------------------------------------------------------
  # 조직도 숨기기
  --------------------------------------------------------------*/

@media all and (max-width:767px) {
	.xs_show
	{
		display: block !important;
	}
	.xs_hidden
	{
		display: none !important;
		visibility: hidden !important;
	}	
}


@media all and (min-width:768px) {
	.xs_show
	{
		display: none !important;
		visibility: hidden !important;
	}
	.xs_hidden
	{
		display: block !important;
	}		
}

.page_link:hover {

	border:3px solid #1796b9;
	border-radius: 20px;	
	transition: border 0.3s ease-out;
}

/*--------------------------------------------------------------
  # withsign 숨기기
  --------------------------------------------------------------*/

  @media all and (max-width:767px) {
	.block_show
	{
		display: block !important;
	}
	.block_hidden
	{
		display: none !important;
		visibility: hidden !important;
	}	
}


.as-is{

	position: relative;
	width: 48%;
	top: 0%;
	left: 0%;
    transform: translate(0%,0%);	
	object-fit: cover;
}

.to-be{
	position: relative;
	width: 48%;
	top: 0%;
	left: 0%;
    transform: translate(0%,0%);	
	object-fit: cover;
}
.withsign_arrrow01{
	position: relative;
	width: 4%;
	top: 0%;
	left: 0%;
    transform: translate(0%,0%);	
	object-fit: cover;
}

@media all and (min-width:768px) {
	.block_show
	{
		display: none !important;
		visibility: hidden !important;
	}
	.block_hidden
	{
		display: block !important;
	}	
}


/* 메인 */

@media all and (max-width:767px) {
	#main_container
	{
		position: relative;
		width:100vw;
		height: 86vh;
		padding-right:0rem !important;
		padding-left: 0rem !important;
		margin-right: 0rem !important;
		margin-left: 0rem !important;
		max-width: 100% !important;
		overflow:hidden;
	}
	.fixed-top>.container{
		padding-right: 0.75rem;
		padding-left: 0.75rem;
	}	
	.main_m_h4{
		font-size: 0.8rem;
		color: #555555;
	}
	.xs-submain-py{
		padding-left: 3.5rem; 
		padding-right: 3.5rem;
	}
	.xs-submain-img{
		height: 42px;
	}
		
}

@media all and (min-width:768px) {
	#main_container
	{
		position: relative;
		width:100vw;
		height: 94vh;
		padding-right: 0rem !important;
		padding-left: 0rem !important;
		margin-right: 0rem !important;
		margin-left: 0rem !important;
		max-width: 100% !important;
	}

}


#main_service {
	position: relative;
	top: 5%;
	margin: 0 auto;
    margin-top: 0rem;
	margin-bottom: 0rem;

}


.small_font{
	font-size: 0.9rem !important;
}

.main_m_h4{
	font-size: 1.125rem;
	color: #555555;
}


 /* 기능 추가 */
 #function {
	position: relative;
	margin-top: 5rem;
	margin-bottom: 5rem;
	}
	
	.function-number-contents {
		position: relative;
		margin: 0rem auto 1.25rem;
		padding: 0 0 0 0;
	}
	
	.function-number-contents .inner {
		max-width : 1380px;
		margin : 0rem auto;
		padding : 2.5rem 3.125rem 0 3.125rem;
		border : 1px solid #ddd;
		box-sizing: border-box;
		counter-reset: num;
	}
	
	.function-number-content:first-child {
		padding-top: 0;
		border-top: 0;
	}

	
	.function-number-content {
		max-width: 1380px;
		margin: 0 auto 2.0rem;
		padding-top: 2.0rem;
		padding-left: 3rem;
		border-top: 1px solid #ddd;
	}
	
	.function-number-content>p:before {
		content: counter(num,decimal);
		counter-increment: num;
		position: absolute;
		top: 0rem;
		left: 0;
		width: 1.875rem;
		height: 1.875rem;
		margin-right: 15px;
		border-radius: 4px;
		background-color: #018ef1;
		text-align: center;
		line-height: 2rem;
		color: #fff;
		vertical-align: middle;
	}
	
	.function-number-content>p {
		position: relative;
		margin-bottom: 0rem;
		min-height : 2.5rem;
		padding : 0 0 0 3rem;
		font-size : 1.25rem
	}
	
	.function-number-content>.content>:last-child {
		margin-bottom: 2rem;
	}
	
	.function-number-content>.content>* {
		padding-left: 3rem;
		padding-right: 0;
	}

	@media (max-width:767px) {

		#function {
			margin-top: 4rem;
			margin-bottom: 4rem;
			}
		
		.function-number-contents .inner {
			max-width : 1380px;
			margin : 0rem auto;
			padding : 1rem 1.25rem 0rem 1.25rem;
			border : 1px solid #ddd;
			box-sizing: border-box;
			counter-reset: num;
		}
		
		.function-number-content:first-child {
			padding-top: 0;
			border-top: 0;
		}
		
		.function-number-content {
			max-width: 1380px;
			margin: 0 auto 1rem;
			padding-top: 1rem;
			padding-left: 0rem;
			border-top: 1px solid #ddd;
		}
		
		.function-number-content>p:before {
			content: counter(num,decimal);
			counter-increment: num;
			position: absolute;
			top: 0.2rem;
			left: 0;
			width: 1.1rem;
			height: 1.1rem;
			margin-right: 20px;
			border-radius: 4px;
			background-color: #018ef1;
			text-align: center;
			line-height: 1.2rem;
			color: #fff;
			vertical-align: middle;
		}
		
		.function-number-content>p {
			position: relative;
			margin-bottom: 0rem;
			min-height : 1.8rem;
			padding : 0 0 0 1.5rem;
			font-size : 1.0rem
		}
		
		.function-number-content>.content>:last-child {
			margin-bottom: 1rem;
		}
		
		.function-number-content>.content>* {
			padding-left: 1.5rem;
			padding-right: 0;
		}
	}