/*인트로*/
.wrap-intro{
	width:100%;
	height:100vh;
	background:url('/_res/seojeong/main/img/bg-intro.png') no-repeat 50% 50% /cover;
}
.wrap-intro h1{
	padding-top:3rem;
	margin-left:9.6rem;
	width:26.8rem;
	height:10.8rem;
	
}
.wrap-intro h1 img{
	width:100%;
	height:100%;
	object-fit:contain;
}
.intro-flex{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:10rem;
	width:100%;
	max-width:1760px;
}
.intro-flex > img{
	max-height:50vh;
}
.intro-flex .intro-navi{max-width: 92rem;
	/*max-width: 92rem; max-width: 120rem;max-width: 140rem;*/ 
}
.wrap-introbanner{
	display:flex;
	flex-direction:column;
	align-items:center;
	max-height: 63vh;
	max-width: 45%;
	padding:7.5rem 3.5rem 10rem;
	background:rgb(0,0,0,0.6);
}
.wrap-introbanner h3 {
	display:flex;
	align-items:center;
	justify-content:center;
	position:relative;
	height:6.4rem;
	margin-bottom:2.5rem;
	font-size:4.2rem;
	color:#fff;
	font-weight:700;
	
}
.wrap-introbanner h3::before{
	content:"";
	display:block;
	position:absolute;
	top:0;
	left:-6rem;
	width:4.6rem;
	height:100%;
	background: url('/_res/seojeong/intro/img/img-leaf-left.png') no-repeat 50% 50% /  contain;
}
.wrap-introbanner h3::after{
	content:"";
	display:block;
	position:absolute;
	top:0;
	right:-6rem;
	width:4.6rem;
	height:100%;
	background: url('/_res/seojeong/intro/img/img-leaf-right.png') no-repeat 50% 50% /  contain;
}
.list-inbanner{
	display:flex;
	flex-wrap:wrap;
	gap:1.6rem;
}
.list-inbanner li{
	width:calc((100% - 1.6rem)/2);
}
.list-inbanner li img{
	width:100%;
}
.intro-content{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	height: calc(100% - 10.8rem);
	padding:0 5rem 2rem;
}
.intro-content h2{
	margin-bottom:18rem;
	font-size:7rem;
	color:#fff;
	font-weight:700;
	text-align:center;
	word-break:keep-all;
	text-shadow: -0.5rem 0.5rem 0.5rem rgb(0,0,0,0.2);
}
.intro-navi{
	max-width:88.2rem;
	width:100%;
	
}
.intro-navi .wrap-navi01{
	display:flex;
	gap:1.2rem;
	margin-bottom:4.5rem;
}
.intro-navi .wrap-navi01 > a{
	display:block;
	position:relative;
	flex:1;
	/*padding:4.3rem 4rem;*/
	padding:4.3rem 2rem;
	text-align:center;
	font-size:3.2rem;
	font-weight:700;
}

.intro-navi .wrap-navi01 > a:nth-child(3)::Before{
	content:"";
	display:block;
	position:absolute;
	bottom: 3.5rem;
    /*left: 50%;*/
	left: 70%;
	width:4.2rem;
	height:1.2rem;
	transition:all .3s ease 0s;
	transform: translateX(6rem);
}

.intro-navi .wrap-navi01 > a::Before{
	content:"";
	display:block;
	position:absolute;
	bottom: 3.5rem;
    /*left: 50%;*/
	left: 50%;
	width:4.2rem;
	height:1.2rem;
	transition:all .3s ease 0s;
	transform: translateX(6rem);
}
.intro-navi .wrap-navi01 > a:hover::Before{
	transform: translateX(9rem);
}
.btn-mainpage{
	color:#fff;
	background:#02399c
}
.btn-mainpage::before{
	background:url('/_res/seojeong/_share/img/ico-arr-right01.png')	no-repeat 0 0 /contain;
}
.btn-ibhakpage{
	color:#022667;
	background:#ffd502
}
.btn-ibhakpage::before{
	background:url('/_res/seojeong/_share/img/ico-arr-right02.png')	no-repeat 0 0 /contain;
}
.btn-passpage{
	color:#fff;
	background:rgba(1, 111, 242, 1);
}
.btn-passpage::before{
	background:url('/_res/seojeong/_share/img/ico-arr-right01.png')	no-repeat 0 0 /contain;
}

.intro-navi .wrap-navi02{
	display:flex;
	gap:1.2rem;
}
.intro-navi .wrap-navi02 button{
	display:flex;
	align-items:center;
	justify-content:space-between;
	flex:1;
	padding:1.5rem 1rem;
	font-size:1.6rem;
	font-weight:700;
	background:rgb(255,255,255,0.9);
	transition:all .3s ease 0s;
	word-break:keep-all;
	text-align: left;
}
.intro-navi .wrap-navi02 button:hover{
	background:#016ff2;
	color:#fff;
}
.intro-navi .wrap-navi02 span{
	width:2.7rem;
	height:2.7rem;
	border-radius:50%;
	box-shadow: -0.5rem 0.5rem 0.5rem rgb(0,0,0,0.2);
	background:#fff url('/_res/seojeong/_share/img/ico-link-arr.png') no-repeat 50% 50% / 0.8rem 1.2rem;
}
.popup-wrap.intro .con{
	position:relative;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	max-width:128rem;
	width: calc(100% - 4rem);
	border-radius: 2.5rem;
	overflow:hidden;
}
.pop-intro .pop-tab{
	display:flex;
	padding-right:14.2rem;
	background:#2e6feb;
}
.pop-intro .pop-tab a{
	flex:1;
	display:flex;
	align-items:center;
	justify-content:center;
	position:relative;
	height:12rem;
	padding:2rem;
	color:#fff;
	font-size:2.4rem;
	font-weight:600;
	text-align:center;
	word-break:keep-all;
}
.pop-intro .pop-tab a.on{
	background:#02399c;
}
.pop-intro .pop-tab a + a::before{
	content:"";
	display:block;
	position:absolute;
	top:50%;
	left:-0.05rem;
	transform:translateY(-50%);
	width:0.1rem;
	height:3rem;
	background:#588cef;
}
.pop-intro .pop-tab a.on::before{
	display:none;
}
.pop-intro .pop-tab a.on + a::before{
	display:none;
}
.pop-intro .pop-cont{
	padding:6.4rem 4.5rem;
	background:#fff;
}
.pop-intro .pop-cont > div{
	display:none;
	height: 25.2rem;
    overflow-y: auto;
}
.pop-intro .pop-cont > div::-webkit-scrollbar{
	width: 0.4rem;
}
.pop-intro .pop-cont > div::-webkit-scrollbar-thumb{
	border-radius: 1rem;
	background:rgb(0,0,0,0.2);
}
.pop-intro .pop-cont > div.on{
	display:block;
}
.pop-intro .list-tit{
	position:relative;
    margin-bottom: 2rem;
    padding-left: 1.5rem;
	font-size: 2.4rem;
    color: #222;
    font-weight: 700;
}
.pop-intro .list-tit::before{
	content:"";
	display:block;
	position:absolute;
	top:50%;
	left:0;
	width:0.5rem;
	height:0.5rem;
	transform:translatey(-50%);
	background:#222;
	border-radius:50%
}
.pop-intro ul + .list-tit{
	margin-top:4rem;
}
.pop-intro .pop-cont ul{
	display:flex;
	flex-wrap:wrap;
	gap:1rem;
}
.pop-intro .pop-cont div > ul > li{
	width: calc((100% - 4rem)/5)
}
.pop-intro .pop-cont div > ul > li > a{
	display:block;
	padding:1.2rem;
	border:0.1rem solid rgb(0,0,0,0.1);
	border-radius:1rem;
	color:#222;
	text-align:center;
	font-size:2rem;
	font-weight:600;
	line-height: 180%;
}
.pop-intro .pop-cont div > ul > li > a > img {
	margin-right: 1rem;
	width: 3rem;
	height: 3.5rem;
	filter: invert(80%) sepia(77%) saturate(3513%) hue-rotate(216deg) brightness(50%) contrast(101%);
}
.pop-intro .pop-cont div > ul > li:hover > a{
	border-color:#02399c;
}
.pop-intro .p-btn-close img{
	width:6.5rem;
	height:6.5rem;
}
.popup-wrap.intro .p-btn-close{
	top: 3rem;
    right: 4rem;
	border-radius:50%;
}

.sj-boast{
	display:flex;
	gap: 4rem;
	width:100%;
	max-width:143rem
}
.box-boast{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap: 2.4rem;
	flex:1;
	padding: 6rem 1rem 7rem;
	background:rgb(0,0,0,0.5);
	color:#fff;
}
.box-boast img{
	height:4rem;
}
.box-boast p{
	font-weight:300;
	text-align:center;
	line-height: 130%;
	font-size:2rem;
}
.box-boast p > span{
	font-weight:300;
	text-align:center;
	line-height: 130%;
	font-size:1.4rem;
}
.box-boast span{
	font-weight:600;
}

@media (max-width:1920px){
	.intro-flex{
		gap:8rem;
	}
	.intro-content h2{
		margin-bottom: 8rem;
	}
}

@media (max-width:1200px){
	.intro-navi .wrap-navi02{
		flex-wrap:wrap;
	}
	.intro-navi .wrap-navi02 button{
		flex:none;
		width:calc((100% - 1.2rem)/2)
	}
	.sj-boast{
		gap:1rem
	}
	
	.intro-navi .wrap-navi01 > a::Before{
	left: 45%;
}
.intro-navi .wrap-navi01 > a:nth-child(3)::Before{
	left: 60%;
	}
	
	
}
@media (max-width:1100px){
	.wrap-intro{
		min-height:100vh;
		height:100%;
		padding-bottom:9rem;
	}
	.wrap-intro h1{
		top:0;
		left:0;
		height: auto;
		margin-left: 5rem;
		margin-bottom:6rem;
		padding-top:3rem;
	}
	.intro-content h2{
		margin-bottom: 6rem;
	}
	.wrap-introbanner{
		max-width:unset;
			
	}
	
	.intro-navi .wrap-navi02 button{
		flex:1;
	}
	.intro-flex .intro-navi{
		max-width:unset;
	}
	.pop-intro .pop-cont div > ul li{
		width: calc((100% - 3rem)/4);
	}
	.pop-intro .pop-cont div > ul li > a{
		font-size:1.6rem;    
		line-height: 230%;
	}
	.pop-intro .pop-tab{
		padding-right:5.5rem;
	}
	.popup-wrap.intro .p-btn-close{
		top:4.2rem;
    	right: 0.8rem;
		width: 3.5rem;
    	height: 3.5rem;
	}
	.pop-intro .p-btn-close img{
		width: 3.5rem;
    	height: 3.5rem;
	}
	.sj-boast{
		flex-wrap:wrap;
		gap:1rem;
	}
	.box-boast{
		flex:none;
		width:calc(50% - 0.5rem);
	}
}
/*max-heigt*/
@media (max-height:1000px){
	.intro-content{
		justify-content: flex-end;
	}
}
@media (max-height:700px){
	.intro-content{
		padding-bottom:1rem;
	}
	.intro-content h2 {
    	margin-bottom: 2rem;
	}
	.intro-navi .wrap-navi01{
		margin-bottom: 2rem;
	}
	.intro-flex {
		gap:2rem;
	}
	.box-boast{
		padding: 3rem 0rem 4rem;
	}
}
/*//max-heigt*/
@media (max-width:768px){
	.wrap-intro{
		    padding-bottom: 2rem;
	}
	.wrap-intro h1{
		width: 12.5rem;
		margin-left:2rem;
		margin-bottom:3rem;
	}
	.intro-content{
		padding:0 2rem;
	}
	.intro-content h2{
		margin-bottom:3rem;
		font-size: 3rem;
	}.intro-navi .wrap-navi01{
		flex-direction: column;
		margin-bottom: 1.2rem;
	}
	.intro-navi .wrap-navi01 > a{
		padding: 2.3rem 2rem;
		font-size: 2rem;
	}
	.intro-navi .wrap-navi01 > a::Before{
		bottom: 1.5rem;
	}
	.intro-navi .wrap-navi01 > a:nth-child(3)::Before{
	bottom: 1.5rem;
	}
	.intro-navi .wrap-navi02 button{
		flex:none;
		font-size: 1.4rem;
	}
	.wrap-introbanner{
		padding: 3.5rem 2.5rem 5rem;
	}
	.wrap-introbanner h3{
		height: 4.4rem;
		font-size: 2rem;
	}
	.list-inbanner{
		gap:1rem;
	}
	.pop-intro .pop-tab{
		flex-wrap:wrap;
		padding-right:0;
		padding-top:5rem;
	}
	.pop-intro .pop-tab a{
		flex:none;
		width:50%;
		height: 6.7rem;
		padding: 1.2rem 1rem;
		font-size: 1.8rem;
		border-top:0.1rem solid #588cef;
	}
	.pop-intro .pop-tab a:nth-of-type(2n){
		border-left:0.1rem solid #588cef
	}
	.pop-intro .pop-tab a + a::before{
		display:none;
	}
	.pop-intro .pop-cont{
		padding: 3rem 2rem;
	}
	.pop-intro .pop-cont > div{
		height: 30vh;
	}
	.pop-intro .list-tit{
		margin-bottom: 2rem;
		font-size: 1.8rem;
	}
	.pop-intro ul + .list-tit{
		margin-top: 3rem;
	}
	.pop-intro .pop-cont  div > ul li{
		width:calc(50% - 0.5rem);
	}
	.pop-intro .pop-cont div > ul li > a{
		padding:1rem;
	}
	.popup-wrap.intro .p-btn-close{
		top: 0.8rem;
	}
	.box-boast{
		gap: 1.4rem;
	}
	.box-boast p{
		font-size:1.6rem;
	}
}
@media (max-width:768px){
	.pop-intro .pop-cont div > ul > li > a > img {
    	display: block;
		margin: 0 auto;
	}
}