.intro-wrap{background-color:#f8f8f8;width:100%;}
#introVis{display: flex;flex-direction: column; position:relative; width:100%;height: 100dvh;}
#introVis #header.header{ position:relative;box-shadow: none;background-color: transparent;}
#introVis #header.header .inner{display: flex; align-items: center;justify-content: space-between;height: 80px}
#introVis #header.header .logoWrap{display: inline-flex;align-items: center;margin-left:20px;}
#introVis #header.header .logoWrap h1.logo{display:inline-block;width:200px;height: 66px;background:url('../images/logo.png') left center no-repeat;background-size:100%}
#introVis #header.header .logoWrap span{display:inline-block;margin:4px 0 0 14px;color:#231f20;font-size:32px;font-weight: 600;height: 44px;line-height: 44px;vertical-align: top;}

#introVis #header.header .rightBox{margin-right:60px}
.intro-wrap #nav{display: none;} 
#introVis .introVis-con{flex:1;}
#introVis .introVis-item{float:right; position:relative; width:100%;height:calc(100dvh - 80px); z-index: 5000;}
/* #introVis .introVis-item .back-box{background-color:#254288;margin-top:130px;height:calc(100% - 130px);width:100%;} */
#introVis-1 {position: absolute;top:0;left:0;overflow: hidden;height: 100%;width:calc(100% - 60px); background-color:#fff;border-radius: 0 120px 0 0; z-index: 8000;}

.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.1, 1.1);-moz-transform:scale(1.1, 1.1);-ms-transform:scale(1.1, 1.1);-o-transform:scale(1.1, 1.1);transform:scale(1.1, 1.1)}
.zs-enabled .zs-slideshow .zs-slides .zs-slide:nth-child(1){background-position: center center}
.zs-enabled .zs-slideshow .zs-slides .zs-slide:nth-child(2){background-position: center center}
.zs-enabled .zs-slideshow .zs-slides .zs-slide.active{visibility:visible;opacity:1;}
.zs-enabled .zs-slideshow .introVis-inner-con{position:fixed;left:0;top:50%;transform: translateY(-50%); width:64px;height:84px;z-index: 9999;text-align: right}
.zs-enabled .zs-slideshow .introVis-inner-con .zs-bullet{position:relative;display:block;width:32px;height:2px;padding:9px 0px 9px 32px;cursor:pointer;z-index: 9999;}
.zs-enabled .zs-slideshow .introVis-inner-con .zs-bullet:after{position: absolute;display:block;top:50%;left:0;margin-top:-1px;content:"";width:32px;height:2px;background-color:rgba(255,255,255,0.8);}
.zs-enabled .zs-slideshow .introVis-inner-con .zs-bullet.active{}
.zs-enabled .zs-slideshow .introVis-inner-con .zs-bullet.active:after{width:64px; height:3px;background-color:rgba(255,255,255,1);}
.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{position:absolute;bottom:5%;left:0px;display: flex;flex-direction: column; width:100%;color:#fff;width:calc(100% - 60px);z-index: 9000;}
.contWrap .btnWrap{display:flex; justify-content: flex-end;}
.contWrap .btnWrap .inner {display: inline-flex;flex-direction: row;padding-right:60px;background: linear-gradient(90deg, rgba(9,9,1,0.9) 65%, rgba(34,33,10,0.9) 90%);border-radius: 40px 0 0 40px;}
.contWrap .btnWrap a{position:relative;display: inline-flex;align-items: center;; margin-right:0px;padding:60px 0 60px 150px;width:170px;font-size: 30px;color:#f5f5f5;font-weight: 600;transition: 1s ease;} 
.contWrap .btnWrap a p.txt{line-height: 1.2em;}
.contWrap .btnWrap a p.txt span{font-weight: 400;}
.contWrap .btnWrap a.btn-susi{background-image:url('../images/icon-susi.png'); background-position: center left 50px; background-repeat: no-repeat;margin-left:30px;}
.contWrap .btnWrap a.btn-jungsi{background-image:url('../images/icon-jungsi.png'); background-position: center left 50px; background-repeat: no-repeat;}
.contWrap .btnWrap a:after{display: inline-block;position:absolute;top:50%;right:0px;margin-top:-25px;width:1px; height:50px;background-color: rgba(255,255,255,0.3); content:"";}
.contWrap .btnWrap a:last-child:after{display: none;}
.contWrap .btnWrap a:hover p.txt{margin-left:5px;}
.contWrap .btnWrap a strong{font-weight: 600;}
.contWrap .btnWrap a span.arr{position:absolute;top:50%;right:40px;margin-top:-6px;width:7px;height:12px;background:url('../images/vis_btn_arr.png') center center no-repeat;opacity: 0;}
.contWrap .btnWrap a:hover span.arr{display: inline-block;right:30px; transition: .5s ease;opacity: 1;}
.contWrap .txtWrap{padding-left:60px;font-size: 60px;font-weight: 500;color:#22210a;letter-spacing: -3px}
.contWrap .txtWrap strong{margin-right:16px;font-size: 140px;font-weight:800;}
.contWrap .txtWrap span{font-size: 50px;}

.backBox{position: absolute;bottom:0;right:0;background-color: #e5e5de; background-position: left 30% center;background-repeat: no-repeat;width:200px;height: calc(100% - 220px);z-index: 1000;}

@media all and (max-width:1500px){
	.contWrap .btnWrap li a{padding: 50px 0 70px 130px;height: 50px}
}

@media all and (max-width:1366px){
	#introVis #header.header .logoWrap h1.logo{width:240px;}

}

@media all and (max-width:1280px){

	.contWrap .txtWrap{padding-left: 40px;}
	.contWrap .txtWrap strong{font-size: 90px;}
	.contWrap .txtWrap span {font-size: 36px;}
}	

@media all and (max-width:1200px) {
	#introVis #header.header .inner{height: 70px;}
	#introVis #header.header .logoWrap{margin-left:8px;}
	#introVis #header.header .logoWrap h1.logo{width:150px;}
	#introVis #header.header .logoWrap span{margin: 0px 0 0 14px;font-size:24px;}
	#introVis #header.header .rightBox{margin-right: 8px;}
	#introVis #header.header .r_tnb{right:10px;}
	#introVis #header.header ul.visitor{top:12px;}
	#introVis{margin:0}
	.intro-logo{top:46px;background-size: 80%}
	.introVis-inner-con{}
	.introVis-inner-con .introVis-btn{margin:50px 0 0 8px;width:100%;}
	#introVis .introVis-item{height: calc(100dvh - 70px);}
	#introVis-1{width: calc(100% - 40px);}
	.leftWrap{width:130px;}
	.contWrap{width: calc(100% - 40px);gap:16px;bottom: 3%;}
	.contWrap .btnWrap .inner{padding-right: 20px;}
	.contWrap .btnWrap a{padding: 50px 0 50px 150px;}
}

@media all and (max-width:1024px) {
	#introVis #header.header{position:relative;}
	#introVis #header.header .logoWrap{top: 5px;}
	#introVis #header.header .logoWrap h1.logo{top:0px;left:73px;width:150px;height: 83px;background-size:100%;}
	#introVis #header.header .logoWrap span{margin: 0px 0 0 10px;}
	#introVis #header.header .r_tnb {float:right;}
	#introVis #header.header .r_tnb > li > a {padding:10px 5px; line-height:15px; font-size:15px; }
	#introVis #header.header .r_tnb > li > a > span{margin-left: 3px;}
	#introVis #header.header .r_tnb > li > a > span > img{margin-top:-2px;}
	ul.visitor li{font-size:12px;}
	#introVis .introVis-con{height: calc(100vh - 90px);}
	.contWrap{}
	.contWrap .btnWrap .inner{padding-right: 0px;}
	.contWrap .btnWrap a {padding: 40px 0 40px 110px;font-size: 24px;;}
	.contWrap .btnWrap a.btn-susi{margin-left:0;background-size: 32px auto;;}
	.contWrap .btnWrap a.btn-jungsi{background-size: 40px auto;;}
	.contWrap .txtWrap strong{font-size: 70px;}
	.contWrap .txtWrap span {font-size: 24px;}
}

@media all and (max-width:900px) {
	#introVis #header.header .inner{height: 90px}
	.contWrap{}
	.contWrap .btnWrap{padding:8px 0;}

}

@media (min-width: 768px) and (max-height: 715px) {
	#introVis-1{height: 715px; min-height: 715px;}
}

@media (max-width: 768px) and (max-height: 580px) {
	#introVis-1{height: 580px; min-height: 580px;}
}

@media all and (max-width:768px) {
	#introVis #header.header {height:60px}
	#introVis #header.header .logoWrap{top:0px;left:40px;}
	#introVis #header.header .logoWrap h1.logo{top:0px;left:40px;width:150px;height:60px;background-size:100%;}
	#introVis #header.header .logoWrap span{ margin: -2px 0 0 8px; font-size: 22px; height:60px; line-height: 60px;}
	#introVis #header.header .r_tnb {display:none;float:right;margin:14px 10px 0 0;}
	#introVis #header.header .r_tnb > li > a {padding:10px 5px; line-height:16px; font-size:16px; }
	#introVis .introVis-con{margin-left:0px; width:calc(100% - 0px);height: calc(100vh - 60px);}
	#introVis .introVis-item {}
	#introVis-1 { width: calc(100% - 25px); margin-left:0;}

	.contWrap {width: calc(100% - 25px);}
	.contWrap .btnWrap li a{margin-right:0px;font-size: 20px;}
	.contWrap .btnWrap li.btn-susi a{margin-left:0px;background-position: 50px top 40px;background-size: 28px auto;}
	.contWrap .btnWrap li.btn-jungsi a{background-position: 50px left 25px;background-size: 28px auto;}
	.contWrap .btnWrap li a:after{margin-top:-10px;height:20px;}
	.contWrap .txtWrap strong{font-size: 50px;}
	.contWrap .txtWrap span{font-size: 22px;}
	
	.leftWrap{width:70px;background-position: center left 10px;background-size: 10px}
}

@media all and (max-width:684px) {
	.zs-enabled .zs-slideshow .zs-slides .zs-slide.zs-slide-2{
		background-position:  center left -250px ;
	}
	.zs-enabled .zs-slideshow .zs-slides .zs-slide.zs-slide-4{
		background-position:  center left -320px ;
	}

	.contWrap .btnWrap .inner{flex-direction: column;}
	.contWrap .btnWrap a{padding: 25px 0 25px 110px;}
	.contWrap .btnWrap a p.txt{font-size: 20px;}
	.contWrap .btnWrap a.btn-susi {background-size: 28px auto;}
	.contWrap .btnWrap a.btn-jungsi {background-size: 34px auto;}
	.contWrap .btnWrap a:after {display: none;}
}

@media (max-width: 640px) and (max-height: 540px) {
	#introVis-1{height: 540px; min-height: 540px;}
}

@media all and (max-width:640px)  {
	#introVis #header.header {height:60px}
	#introVis #header.header h1.logo{top:0px;left:40px;width:130px;background-size:85%;}
	#introVis #header.header .r_tnb {display: none;}
	#introVis .introVis-con{height: calc(100vh - 60px);}
	.zs-enabled .zs-slideshow .zs-slides .zs-slide:nth-child(1){background-position: top center}
	.zs-enabled .zs-slideshow .introVis-inner-con{width:50px;}
	.zs-enabled .zs-slideshow .introVis-inner-con .zs-bullet{width:25px;height:2px;padding:9px 0px 9px 25px;;}
	.zs-enabled .zs-slideshow .introVis-inner-con .zs-bullet:after{width:25px;height:2px;}
	.zs-enabled .zs-slideshow .introVis-inner-con .zs-bullet.active{}
	.zs-enabled .zs-slideshow .introVis-inner-con .zs-bullet.active:after{width:40px; height:3px;}
	
	.contWrap .txtWrap strong{font-size: 40px;}
	.contWrap .txtWrap span{font-size: 20px;}
}

@media all and (max-width:414px) {
	.contWrap{bottom:5%;right:3%;}
	.contWrap .btnWrap{border-radius: 10px;}
	.contWrap .btnWrap li{width:95%;justify-content: center;;}
	.contWrap .btnWrap li a{position:relative;display: inline-flex;margin-right:0px;padding: 15px 0 15px 45px;width:auto;font-size: 17px;text-align: center}
	.contWrap .btnWrap li.btn-susi{margin-left:0;}
	.contWrap .btnWrap li.btn-susi a{background-position: left 0px top 22px;background-size: 26px auto;}
	.contWrap .btnWrap li.btn-jungsi a{background-position: left 0px top 20px;background-size: 24px auto;}
	.contWrap .txtWrap{display: flex;flex-direction: column;padding-left: 2%;}
}

 @media all and (max-width:400px)  {
	#introVis #header.header .logoWrap{left:10px;}
	#introVis #header.header .logoWrap span{display: none}
 }


