.intro-wrap{background-color:#f8f8f8;width:100%;font-family: 'Pretendard Variable', 'Noto Sans KR', Malgun Gothic,dotum,arial,sans-serif;}
#introVis{position: relative; width:100%;}
#introVis .introVis-con{ width:100%;height: 100dvh;}
#introVis .introVis-item{float:right; position:relative; width:100%; height: 100%}
#introVis-1 {position: absolute;top:0;right:0;overflow: hidden;height: 100%;width:100%; background-color:#4f7ccd;}

.zs-enabled{position:relative;}
.zs-enabled .zs-slideshow{position:relative;width:100%;}
.zs-enabled .zs-slideshow,.zs-enabled .zs-slides,.zs-enabled .zs-slide{position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;overflow:hidden;}
.zs-enabled .zs-slideshow .zs-slides .zs-slide{background:transparent none no-repeat 50% 50%;background-size:auto 110%;position:absolute;visibility:hidden;opacity:0;-webkit-transform:scale(1.05, 1.05);-moz-transform:scale(1.05, 1.05);-ms-transform:scale(1.05, 1.05);-o-transform:scale(1.05, 1.05);transform:scale(1.05, 1.05);background-position: center right}
/* .zs-enabled .zs-slideshow .zs-slides .zs-slide:nth-child(1){background-position: top left} */
.zs-enabled .zs-slideshow .zs-slides .zs-slide.active{visibility:visible;opacity:1;}
.zs-enabled .zs-slideshow .introVis-inner-con{position:absolute;right:16px;top:50%; transform: translateY(-50%); z-index: 9999 !important;text-align: right}
.zs-enabled .zs-slideshow .introVis-inner-con .zs-bullet{position:relative;display:block;width:32px;height:32px;cursor:pointer;z-index: 9999 !important;}
.zs-enabled .zs-slideshow .introVis-inner-con .zs-bullet:before{position:absolute;top:50%;left:50%; transform: translate(-50%, -50%); display: inline-block;width:10px;height:10px;background-color: rgba(255,255,255,0.5);border-radius: 40px; content:"";}
.zs-enabled .zs-slideshow .introVis-inner-con .zs-bullet:after{position: absolute;display:inline-block;top:50%;left:50%; transform: translate(-50%, -50%);content:"";background-color:transparent;}
.zs-enabled .zs-slideshow .introVis-inner-con .zs-bullet:hover:before{background-color: rgba(255,255,255,1);}
.zs-enabled .zs-slideshow .introVis-inner-con .zs-bullet.active{}
.zs-enabled .zs-slideshow .introVis-inner-con .zs-bullet.active:before{background-color: rgba(255,255,255,1);}
.zs-enabled .zs-slideshow .introVis-inner-con .zs-bullet.active:after{width:22px; height:22px;border:1px solid #fff;border-radius: 40px;;}
.zs-enabled .zs-slideshow:after{content:" ";position:absolute;top:0;left:0;width:100%;height:100%;z-index:3;background:transparent none repeat 0 0}

.contWrap{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position:absolute;
	top:0;
	left:0px;
	width:50%;
	max-width:550px;
	height: 100dvh;
	background-color:#fff;
	box-shadow: -15px 0 30px  rgba(0,0,0,0.20);
	z-index: 6000
}
.contWrap .inner{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	margin-left:40px;
	max-width: 480px;
	width:100%;
	height:60%;
}
.contWrap .txtBox{
	display: flex;
	align-items: center;
	justify-content: flex-start;

}
.contWrap h1.logo{
	display: inline-flex;
	position:absolute;
	top:20px;
	left:30px;
	margin-bottom:30px;
	width:200px;
	height: 103px;
	background-image: url('../images/logo.png');
	background-size: 100% auto;
	background-position: center center;
	background-repeat: no-repeat;
	text-align: center;
}
.contWrap .titBox{
	display: flex;
	flex-direction: column;
	margin-bottom:60px;
	gap:8px;
}
.contWrap .titBox .txt{
	position:relative;
	padding-left:4px;
	font-size: 28px;
	color: #194b94;
	font-weight: 500;
	white-space: nowrap
}
.contWrap .titBox .txt:before{
	display: inline-block;
	position:absolute;
	top:50%;
	right:0;
	width:62%;
	height: 1px;
	background-color: #194b94;
	content:"";
}
.contWrap .titBox .tit{
	display: flex;
	flex-direction: row;
	font-size: 54px;
	color:#222;
	font-weight: 300;
	letter-spacing: -2px;
	white-space: nowrap;
}
.contWrap .titBox .tit strong{
	margin-right:8px;
	font-weight: 600;
}
.contWrap .btnWrap{
	display: flex;
	flex-direction: column;
}
.contWrap .btnWrap .mainbtnWrap{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	gap:8px;
	margin-bottom:30px;
	width:100%;
	color:#fff;
}
.contWrap .btnWrap .mainbtnWrap li{
	display: inline-flex;
}
.contWrap .btnWrap .mainbtnWrap li a{
	position:relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	max-width:180px;
	min-width: 180px;
	height: 180px;
	gap:20px;
 }
.contWrap .btnWrap .mainbtnWrap li.btn-susi1 a{
	background-color: #0171bd;
}
.contWrap .btnWrap .mainbtnWrap li.btn-susi2 a{
	background-color: #7fbe25;
}
.contWrap .btnWrap .mainbtnWrap li.btn-jungsi a{
	background-color: #ffaf03;
}
.contWrap .btnWrap .mainbtnWrap li a span.icon{
	display: inline-flex;
	width:40px;
	height: 40px;
	background-position: center center;
	background-repeat: no-repeat;
}
.contWrap .btnWrap .mainbtnWrap li.btn-susi1 a span.icon{
	background-image: url('../images/icon-susi1.png');
	background-size: auto 37px;
}
.contWrap .btnWrap .mainbtnWrap li.btn-susi2 a span.icon{
	background-image: url('../images/icon-susi2.png');
	background-size: auto 34px;
}
.contWrap .btnWrap .mainbtnWrap li.btn-jungsi a span.icon{
	background-image: url('../images/icon-jungsi.png');
	background-size: 40px auto;
}
.contWrap .btnWrap .mainbtnWrap li a span.txt{
	position:relative;
	font-size: 32px;
	color:#fff;
}
.contWrap .btnWrap .mainbtnWrap li.btn-susi a span.txt{
	color:#fff;
}
.contWrap .btnWrap .mainbtnWrap li a span.txt:before{
	position:absolute;
	top:50%;
	right:-10px;
	transform: translateY(-50%);
	width:32px;
	height:10px;
	background-image:url('../images/btn-arr-w.png');
	background-size: 6px auto;
	background-position: center right;
	background-repeat: no-repeat;
	transition: 1s ease;
	content:"";
	opacity: 0;
}
.contWrap .btnWrap .mainbtnWrap li a:hover .txt:before{
	display: inline-block;
	right:-20px;
	transition: .5s ease;
	opacity: 1;
}
.hvr-to-right {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.hvr-to-right:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.btn-susi1 .hvr-to-right:before{
  background: linear-gradient(156deg, #0168ad 60%, #0168ad 95%);
}
.btn-susi2 .hvr-to-right:before{
  background: linear-gradient(156deg, #74bb12 60%, #74bb12 95%);
}
.btn-jungsi .hvr-to-right:before{
  background: linear-gradient(156deg, #faba01 60%, #faba01 95%); 
}
.hvr-to-right:hover, 
.hvr-to-right:focus, 
.hvr-to-right:active {
  color: white;
}
.hvr-to-right:hover:before, 
.hvr-to-right:focus:before, 
.hvr-to-right:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

.contWrap .btnWrap .subbtnWrap{
	display: inline-flex;
	flex-direction: column;
	/* width:100%; */
	margin-top:40px;
	gap:8px;
}
.contWrap .btnWrap .subbtnWrap a{
	position:relative;
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	padding:8px 0;
	max-width:200px;
	min-width:140px;
	width:80%;
	border-bottom:1px solid rgba(170,170,170,0.5);

}
.contWrap .btnWrap .subbtnWrap a span.txt{
	position:relative;
	display: inline-flex;
	width:100%;
	color: #2a2a2a;
	font-size: 20px;
	font-weight: 500; 
}
.contWrap .btnWrap .subbtnWrap a span.txt:before{
	position:absolute;
	top:50%;
	right:12px;
	transform: translateY(-50%);
	width:10px;
	height:16px;
	background-image:url('../images/btn-arr.png');
	background-size: 6px auto;
	background-position: center right;
	background-repeat: no-repeat;
	content:"";
	opacity: 0.5;
	transition: .5s ease;
}

.contWrap .btnWrap .subbtnWrap a:hover{
	border-bottom:1px solid #194b94;
}
.contWrap .btnWrap .subbtnWrap a:hover .txt:before{
	display: inline-block;
	right:8px;
	opacity: 1;
}
.contWrap .btnWrap .subbtnWrap a:hover span.txt{
	color: #194b94;
}

@media all and (max-height:700px){
	.contWrap{
		justify-content: flex-end;		
	}
	.contWrap .inner{
		padding-bottom:40px;
	}
	.contWrap .titBox .tit  {
        margin-bottom: 30px !important;
		font-size: 28px !important;
    }
	.contWrap .btnWrap .mainbtnWrap{
		margin-bottom:0;
	}
	.contWrap .btnWrap .subbtnWrap a span.txt{
		font-size: 17px;;
	}
}
@media all and (max-width:1500px){
	.contWrap .btnWrap .mainbtnWrap li a{font-size: 36px;}
	.contWrap .btnWrap .subbtnWrap a{font-size: 26px;}
}

@media all and (max-width:1366px){
	.contWrap{max-width: 500px;}	
	.contWrap .btnWrap .mainbtnWrap li a{max-width: 170px;min-width: 170px;height: 170px;}
	.contWrap .btnWrap .mainbtnWrap li a:after{margin-top:-20px;height:40px;}
	.contWrap .btnWrap .mainbtnWrap li a span.arr{right:30px;}
	.contWrap .btnWrap .mainbtnWrap li a:hover span.arr{right:20px;}
	.contWrap .btnWrap .mainbtnWrap li a span.txt{font-size: 28px;}
	.contWrap .btnWrap .subbtnWrap a span.txt{font-size: 18px;}
}

@media all and (max-width:1280px){
	.contWrap .btnWrap .mainbtnWrap{border-radius:60px 0 0 0 ;}
}	

@media all and (max-width:1200px) {
	.contWrap{max-width: 450px;}	
	.contWrap .btnWrap .mainbtnWrap{border-radius:50px 0 0 0 ;}
	.contWrap .btnWrap .mainbtnWrap li a{max-width: 150px;min-width: 150px;height: 150px;} 
	.contWrap .btnWrap .mainbtnWrap li a span.txt{font-size: 24px;}
}
@media all and (max-width:1100px) {
	.contWrap{width: 80%;max-width: 250px;background-color: rgba(255, 255, 255, 0.8);}
	.contWrap h1.logo{width:170px;height: 90px;}
	.contWrap .titBox{margin-bottom:50px;}
	.contWrap .titBox .tit{font-size: 40px;}
	.contWrap .titBox .txt{font-size: 24px;}
	.contWrap .titBox .txt:before{width: 55%;}
	.contWrap .btnWrap .mainbtnWrap{flex-direction: column;}
	.contWrap .btnWrap .mainbtnWrap li a {
		flex-direction: row;
		justify-content: flex-start;
		padding:8px 16px 8px 24px;
		max-width: auto;
        min-width: 240px;
        height: auto;
	}
	.contWrap .btnWrap .mainbtnWrap li.btn-susi1 a span.icon{
		background-size:26px auto;
	}
	.contWrap .btnWrap .mainbtnWrap li.btn-susi2 a span.icon{
		background-size:32px auto;
	}
	.contWrap .btnWrap .mainbtnWrap li.btn-jungsi a span.icon{
		background-size:32px auto;
	}
	.contWrap .btnWrap .mainbtnWrap li a span.txt{font-size: 22px;}
}
@media all and (max-width:1024px) {
	.contWrap{width: 80%;max-width: 250px;}
	.contWrap .btnWrap .mainbtnWrap li a{gap:10px;}
	.contWrap .btnWrap .subbtnWrap a{
		padding: 4px 0;
		min-width:100px;
		font-size: 17px;
	}	
	.contWrap .btnWrap .mainbtnWrap li.btn-susi1 a span.icon{
		background-size:20px auto;
	}
	.contWrap .btnWrap .mainbtnWrap li.btn-susi2 a span.icon{
		background-size:26px auto;
	}
	.contWrap .btnWrap .mainbtnWrap li.btn-jungsi a span.icon{
		background-size:26px auto;
	}
	.zs-enabled .zs-slideshow .introVis-inner-con{
		right:8px;
	}
	.zs-enabled .zs-slideshow .introVis-inner-con .zs-bullet{
		width:28px;
		height: 28px;
	}
	.zs-enabled .zs-slideshow .introVis-inner-con .zs-bullet.active:after{
		width:20px; 
		height:20px;
	}
}

@media all and (max-width:900px) {
	.contWrap{width: 100%;max-width: 180px;}
	.contWrap h1.logo {top: 0px;left: 10%; width:80%; height: 70px;}
	.contWrap .titBox .tit{flex-direction: column;}	
	.contWrap .titBox .txt{font-size: 20px;	}
	.contWrap .titBox .txt:before{width: 30%;}
	.contWrap .btnWrap .mainbtnWrap{margin-bottom:30px;}
	.contWrap .btnWrap .mainbtnWrap li a{padding:2px 16px 2px 24px;width: 140px;min-width: 140px;font-size: 26px;}	
	.contWrap .btnWrap .subbtnWrap{margin-top: 0;}
	.contWrap .btnWrap .subbtnWrap a{font-size: 15px;}
}
@media all and (max-width:768px) {
	.contWrap {
		width:calc(100% - 30px);
	}
	.contWrap h1.logo {left: 6%;width:70%}
	.contWrap .btnWrap .mainbtnWrap li{
		flex:1;
	}
	.contWrap .btnWrap .mainbtnWrap li a{
		padding: 4px 16px 4px 24px;
	}
	.contWrap .btnWrap .mainbtnWrap li.btn-susi1 a span.icon{
		background-size: 20px auto;
	}
	.contWrap .btnWrap .mainbtnWrap li.btn-susi2 a span.icon{
		background-size: 22px auto;
	}
	.contWrap .btnWrap .mainbtnWrap li.btn-jungsi a span.icon{
		background-size: 26px auto;
	}
	.contWrap .btnWrap .mainbtnWrap li a span.txt{
		font-size: 19px;;
	}
	.contWrap .btnWrap .subbtnWrap{
		gap:4px;
	}
	.contWrap .btnWrap .subbtnWrap a span.txt{
		font-size: 16px;;
	}
	.zs-enabled .zs-slideshow .introVis-inner-con{right:2px;}
	.zs-enabled .zs-slideshow .introVis-inner-con .zs-bullet{width: 24px;height: 24px;}
	.zs-enabled .zs-slideshow .introVis-inner-con .zs-bullet.active:after {width: 18px;height: 18px;}
}

@media all and (max-width:640px)  {
	.contWrap .titBox{margin-bottom:40px;}
	.contWrap .titBox .tit {font-size: 32px }	
	.contWrap .titBox .txt{font-size: 18px;	}
	.contWrap .titBox .txt:before{display: none;}
	.contWrap .btnWrap .mainbtnWrap{
		gap:4px
	}
	.contWrap .btnWrap .subbtnWrap a{font-size: 18px;}
}

@media all and (max-width:500px)  {	
	.bttWrap {background-size: 150px auto;}
}

@media all and (max-width:414px) {   
	.contWrap .btnWrap .subbtnWrap a {
        padding: 8px 0;
	}
}