.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:cover;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)}
.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: space-between;
	align-items: center;
	position:absolute;
	top:0;
	left:0px;
	width:50%;
	max-width:50%;
	height: 100dvh;
	background-color:rgba(255,255,255,0.57);
	box-shadow: -15px 0 30px  rgba(0,0,0,0.20);
	z-index: 6000
}
.contWrap .inner{display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex:1;
	max-width: 480px;
	width:100%;
}
.contWrap .txtBox{
	display: flex;
	align-items: center;
	justify-content: flex-start;

}
.contWrap .txtBox h1.logo{
	margin-bottom:30px;
	text-align: center;
}
.contWrap .txtBox{display: flex;
	flex-direction: column;
	margin-bottom:70px;
	font-size: 60px;
	font-weight: 300;
	color:#fff;
	letter-spacing: -2px;
}
.contWrap .txtBox h1.logo{
	width:103px;
	height: 103px;
	background-image: url('../images/logo-mark.png');
	background-size: 103px auto;
	background-position: center center;
	background-repeat: no-repeat;
}
.contWrap .txtBox .img-box{
	width:393px;
	height: 176px;
	background-image: url('../images/vis-txt.png');
	background-size: 393px auto;
	background-position: center center;
	background-repeat: no-repeat;
}

.contWrap .btnWrap{
	display: flex;
	flex-direction: column;
}
.contWrap .btnWrap .mainbtnWrap{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	gap:16px;
	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-susi a{
	background-color: #2b3891;
}
.contWrap .btnWrap .mainbtnWrap li.btn-jungsi a{
	background-color: #faa635;
}
.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-susi a span.icon{
	background-image: url('../images/icon-susi.png');
	background-size: auto 37px;
}
.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:hover{}

.contWrap .btnWrap .mainbtnWrap li a span.txt{
	position:relative;
	font-size: 32px;
	color:#fefefe;
}
.contWrap .btnWrap .mainbtnWrap li.btn-susi a span.txt{
	color:#fff;
}
.contWrap .btnWrap .mainbtnWrap li.btn-jungsi a span.txt{
	color:#1a1e3e;
}
.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.png');
	background-size: 6px auto;
	background-position: center right;
	background-repeat: no-repeat;
	transition: 1s ease;
	content:"";
	opacity: 0;
}
.contWrap .btnWrap .mainbtnWrap li.btn-susi a span.txt:before{
	background-image:url('../images/btn-arr-w.png');
}
.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-susi .hvr-to-right:before{
  background: linear-gradient(156deg, #3849af 60%, #004e97 95%);
}
.btn-jungsi .hvr-to-right:before{
  background: linear-gradient(156deg, #fdaa3e 60%, #e77f1e 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: flex;
	flex-direction: column;
	width:100%;
	gap:8px;
}
.contWrap .btnWrap .subbtnWrap a{
	position:relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding:12px 0;
	width:100%;
	background-color: rgba(255,255,255,0.5);
	border:1px solid #fff;
}
.contWrap .btnWrap .subbtnWrap a:hover{
	background-color: rgba(255,255,255,0.9);
}
.contWrap .btnWrap .subbtnWrap a span.txt{
	position:relative;
	display: inline-flex;
	color: #2a2a2a;
	font-size: 18px;
	font-weight: 500; 
}
.contWrap .btnWrap .subbtnWrap a span.txt:before{
	position:absolute;
	top:50%;
	right:-20px;
	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 .txt:before{
	display: inline-block;
	right:-30px;
	opacity: 1;
}

@media all and (max-width:1500px){
	.contWrap .txtBox{margin-bottom:60px}
	.contWrap .btnWrap .mainbtnWrap li a{font-size: 36px;}
	.contWrap .btnWrap .subbtnWrap a{font-size: 26px;}
}

@media all and (max-width:1366px){
	.contWrap{max-width: 650px;}	
	.contWrap .txtBox{margin-bottom:60px}
	.contWrap .txtBox p.slogan-en{margin-bottom:10px;font-size: 20px;}
	.contWrap .txtBox p.slogan-ko{margin-bottom:18px;font-size: 30px;}
	.contWrap .txtBox p.tit{font-size: 64px;}
	.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 .subbtnWrap a{font-size: 24px;}
}

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

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

@media all and (max-width:1024px) {
	.contWrap{width: 80%;max-width: 600px;}
	.contWrap .txtBox{margin-bottom:40px;}
	.contWrap .txtBox h1.logo{
		margin-bottom:10px;
		width:90px;
		height: 90px;
		background-size: 80px auto;
	}
	.contWrap .txtBox .img-box{
		width:393px;
		height: 156px;
		background-size: 310px auto;
	}

	.contWrap .btnWrap .mainbtnWrap li a{
		max-width:150px;
		min-width: 150px;
		height: 150px;
	}
	.contWrap .btnWrap .mainbtnWrap li a span.txt{
		font-size: 27px;
	}
	.contWrap .btnWrap .subbtnWrap a{
		padding: 10px 0;
		font-size: 17px;
	}
	.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: 550px;}
	.contWrap .txtBox {margin-bottom: 30px;}
	.contWrap .btnWrap .mainbtnWrap{margin-bottom:30px;}
	.contWrap .btnWrap .mainbtnWrap li a{width: 120px;font-size: 26px;}
}
@media all and (max-width:768px) {
	.contWrap {
		width:calc(100% - 30px);
	}
	.contWrap .txtBox{
		margin-bottom: 20px;
		width:100%;
	}
	.contWrap .txtBox h1.logo{
		margin-bottom:0px;
		width:90px;
		height: 90px;
		background-size: 70px auto;
	}
	.contWrap .txtBox .img-box{
		width:90%;
		height: 120px;
		background-size: 240px auto;
	}
	.contWrap .btnWrap .mainbtnWrap li{
		flex:1;
	}

	.contWrap .btnWrap .mainbtnWrap li a {
        max-width: 125px;
        min-width: 125px;
        height: 124px;
    }
	.contWrap .btnWrap .mainbtnWrap li a span.txt {
        font-size: 22px;
    }
	.contWrap .btnWrap .mainbtnWrap li.btn-susi a span.icon{
		background-size: 25px auto;;
	}
	.contWrap .btnWrap .mainbtnWrap li.btn-jungsi a span.icon{
		background-size:  auto 25px;
	}
	.contWrap .btnWrap .subbtnWrap a span.txt{
		font-size: 14px;;
	}
	.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 .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 .txtBox h1.logo {
        background-size: 60px auto;
    }
	.contWrap .txtBox .img-box{
		width:90%;
		height: 100px;
		background-size: 200px auto;
	}  
	.contWrap .btnWrap .mainbtnWrap li a {
        max-width: 110px;
        min-width: 110px;
        height: 109px;
		gap:8px;
    }
	.contWrap .btnWrap .mainbtnWrap li.btn-susi a span.icon{
		background-size: 22px auto;
	}
	.contWrap .btnWrap .mainbtnWrap li.btn-jungsi a span.icon{
		background-size: auto 22px;
	}
	.contWrap .btnWrap .mainbtnWrap li a span.txt{
		font-size: 17px;;
	}
	.contWrap .btnWrap .subbtnWrap a {
        padding: 8px 0;
	}
}