#hd{position:fixed;border-bottom:1px solid var(--color-border);padding:20px;width:100%;z-index:1000;background-color:#fff}
#hd .hd-inner{display:flex;gap:20px;align-items:center;justify-content:space-between}
#hd .btn-home{background:url('/_res/yonam/info/img/ico-home.png') center no-repeat;width:var(--btn-height);aspect-ratio:1/1;overflow:hidden;text-indent:-999%}
#hd .logo img{max-height:40px}

.main-wrap{padding:100px 20px 50px 20px;background:url('/_res/yonam/info/img/intro-bg.png') center/cover no-repeat}
.main-v{position:relative}
.main-v img{width:100%}
.main-v .swiper-slide{border-radius:20px;overflow:hidden}
.main-v .swiper-btn{position:absolute;top:50%;transform:translateY(-50%);width:var(--btn-height);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;border-radius:50%;background-color:#fff;border:1px solid var(--color-border);z-index:100}
.main-v .swiper-next{right:-10px}
.main-v .swiper-prev{left:-10px}

.main-class{margin:50px 0}
.main-class .item-wrap{display:flex;gap:20px;margin-top:60px}
.main-class .item-wrap .item{background-color:#fff;flex:1;border:1px solid #ddd;border-radius:50px 8px;height:160px;position:relative;display:flex;flex-direction:column;gap:20px;align-items:center;text-align:center;padding:5px}
.main-class .item-wrap .item:not(:last-child)::after{content:"";position:absolute;right:-25px;top:50%;transform:translateY(-50%);background:url('/_res/yonam/www/img/comm/ico-line.png') center/contain no-repeat;width:29px;aspect-ratio:29/8;z-index:1}
.main-class .item-wrap .subject{color:var(--color-m);border:1px solid var(--color-m);width:154px;height:30px;border-radius:20px;display:flex;align-items:center;justify-content:center;background-color:#FFF5F8;transform:translateY(-15px)}
.main-class .item-wrap .num-wrap{display:flex;align-items:baseline;color:var(--color-m);font-family:var(--font-point);gap:10px}
.main-class .item-wrap .num{font-size:40px}
.main-class .item-wrap .con{color:#999;font-size:.9em}

.item-box{display:grid;gap:20px;grid-template-columns:repeat(5, 1fr);margin:50px 0}
.item-box .item{min-width:0;display:flex;align-items:center;padding:20px;border-radius:10px;background-color:rgba(255,255,255,.5);height:100%;text-align:center;flex-direction:column;gap:10px;justify-content:center}
.item-box .item .subject{font-family:var(--font-spoint);font-weight:600;font-size:1.125rem;margin-bottom:10px}
.item-box a.item:hover{transform:translateY(-10px);box-shadow:5px 5px var(--color-border)}

#ft{background-color:#333;color:rgba(255,255,255,.4);padding:20px;text-align:center;font-size:.875rem;word-break:keep-all;width:100%}
#ft img{margin-bottom:20px;max-width:160px}

@media (max-width:1200px){
	.main-wrap{padding-bottom:20px}
	.main-class{margin:20px 0}
	.main-class .item-wrap{margin-top:40px;flex-wrap:wrap}
	.main-class .item-wrap .num{font-size:1.65rem}
	.main-class .item-wrap .subject{width:120px}
	.main-class .item-wrap .item{width:calc(50% - 10px);flex:auto;border-radius:30px 4px;height:140px;gap:10px}
	.main-class .item-wrap .item:nth-child(2)::after,
	.main-class .item-wrap .item:nth-child(4)::after{display:none}
	
	.item-box{grid-template-columns:repeat(2, 1fr);margin:20px 0}
	.item-box .item{padding:20px 10px;word-break:keep-all}
	.item-box .item .subject{font-size:1rem}
}