.intro-wrap{display:flex;flex-direction:column;background:url('/_res/yonam/intro/img/intro-bg.png') center/cover no-repeat;min-height:100vh;padding:50px;font-family:var(--font-spoint)}
.intro-wrap .cinner{flex:1;flex-direction:column;gap:50px;display:flex;height:100%;max-width:1400px;margin:0 auto;width:100%;justify-content:center}
.intro-wrap .top-wrap{position:relative;display:flex;justify-content:flex-end}
/*.intro-wrap .top-logo{position:absolute;left:0;top:-20px;max-width:200px}*/
.intro-wrap .top-logo{position:absolute;left:0;top: -40px;max-width: 300px;}

.intro-wrap .top-wrap .subject-wrap{text-align:right;font-size:1.5rem;color:var(--color-mm)}
.intro-wrap .top-wrap .tit{font-size:3.2rem;font-weight:bold}
.intro-wrap .top-wrap .stit{display:flex;gap:20px;margin-top:20px;align-items:center}
.intro-wrap .top-wrap .stit p{font-size:1rem}

.banner-wrap{display:flex;gap:20px}
.banner-wrap .popup-wrap{display:flex;gap:20px;flex-direction:column}
.banner-wrap .popup-wrap .img-wrap{border-radius:20px;overflow:hidden}
.banner-wrap .youtube-wrap{aspect-ratio:16/9;width:50%;border-radius:20px;overflow:hidden;box-shadow:10px 10px var(--color-s);flex-shrink:0}
.banner-wrap .btn-wrap{display:flex;gap:20px}
.banner-wrap .btn-wrap > *{flex:1;border:1px solid #e3e3e3;height:60px;border-radius:10px;background-color:#fff;font-size:1.25rem;font-weight:600;display:flex;align-items:center;justify-content:center}
.banner-wrap .btn-wrap > *:hover{transform:translateY(-5px);box-shadow:5px 5px var(--color-s)}
.banner-wrap .btn-wrap > * span{padding-left:40px;background:url('/_res/yonam/intro/img/intro-img01.png') left center/contain no-repeat}
.banner-wrap .btn-wrap > *:first-child span{padding-left:40px;background:url('/_res/yonam/intro/img/intro-img02.png') left center/contain no-repeat}
.card-wrap{display:flex;gap:20px}
.card-wrap .item{position:relative;flex:1;backdrop-filter:blur(10px);background-color:rgba(255,255,255,.3);padding:20px;border-radius:20px;display:flex;flex-direction:column;color:var(--color-mm)}
.card-wrap .item .num{position:absolute;font-size:2rem;font-weight:800;bottom:-15px;right:-10px;color:var(--color-m)}
.card-wrap .subject .tit{font-size:1.25rem;font-weight:600}
.card-wrap .subject .stit{font-size:.875rem}

@media (max-width:1024px){
	.banner-wrap .popup-wrap{gap:10px}
	.banner-wrap .btn-wrap{gap:10px}
	.banner-wrap .btn-wrap > *{font-size:1rem}
	.banner-wrap .btn-wrap > * span{padding-left:25px}
	.banner-wrap .btn-wrap > *:first-child span{padding-left:25px}
	.banner-wrap .youtube-wrap{box-shadow:5px 5px var(--color-s)}

	.intro-wrap .top-logo{max-width:140px}
	.intro-wrap .top-wrap .tit{font-size:2rem}
	.intro-wrap .top-wrap .subject-wrap{font-size:1.25rem}
	.intro-wrap .top-wrap .stit{margin-top:10px}
	
	.card-wrap{flex-wrap:wrap}
	.card-wrap .item{flex:auto;width:calc(50% - 10px)}
	.card-wrap .item .num{font-size:1.5rem}
}

@media (max-width:1024px){
	.intro-wrap{padding:30px 20px}
	.intro-wrap .cinner{gap:20px}
	.intro-wrap .top-logo{top:auto;left:auto;position:relative}
	.intro-wrap .top-wrap{flex-direction:column;gap:20px;align-items:center}
	.intro-wrap .top-wrap .tit{text-align:center;font-size:1.5rem}
	.intro-wrap .top-wrap .stit{flex-direction:column;gap:10px;margin-top:5px;gap:5px}
	
	.banner-wrap{flex-direction:column}
	.banner-wrap .youtube-wrap{width:100%}
	.banner-wrap .popup-wrap .img-wrap img{width:100%}
	.banner-wrap .btn-wrap > *{font-size:.875rem}
	.banner-wrap .btn-wrap > * span{padding-left:20px}
	.banner-wrap .btn-wrap > *:first-child span{padding-left:20px}
	
	.card-wrap .subject .tit{font-size:1.125rem}
	.card-wrap .item .num{bottom:-10px}
}