#wrap{position : relative;overflow : hidden;}

.sub-bg{display : flex;align-items : center;justify-content : center;position : fixed;z-index : -1;left : 0;top : 130px;overflow: hidden;}
.sub-bg{top : 130px;width : 100%;height : calc(100% - 130px)}
.sub-bg > img,
.sub-bg > video{width : 100%;height : 100%;object-fit : cover;object-position : center bottom;}

.video-title{position : absolute;color : #fff; z-index : 1;font-family : jost; font-size : 33px;font-weight : 400;}

.con-tit{font-family : jost;font-size : 33px; font-weight : 500;line-height : 1.2em;text-align : center;}
.con-desc{font-family :jost; font-weight : 400;font-size : 16px; line-height : 1.5em;text-align : center;max-width : 800px;margin : 0 auto;}

.bubble{display : flex;justify-content : center; position : relative;padding : 44px 0 64px;text-align : center;font-family : Noto Serif KR}
.bubble::before{position : absolute;content : '“'; font-family : Noto Serif KR; font-size : 44px; font-weight : 500;top : 0;}
.bubble::after{position : absolute;content : '”'; font-family : Noto Serif KR; font-size : 44px; font-weight : 500;bottom : 0;}
.bubble{font-size : 14px; line-height : 1.5em; }

.sub-section{display : flex;flex-direction : column;align-items : center;background: #fff;}
.sub-img-section > img{width : 100%;}

.sub-slide{display : flex; align-items : center; overflow : hidden;width : 100%;position : relative; max-width : 1408px;}
.sub-slide .swiper-slide{overflow : hidden;position : relative;padding-bottom: 50.5208%}
.sub-slide .swiper-slide > img{width : 100%;}
.parallax-bg{width : 100%;height : 100%;position : absolute;left : 0;top : 0;width : 100%;height : 100%;background-position : right bottom;}

.sub-pagination{display : flex;align-items : center; gap : 14px; position : absolute;bottom : 43px;z-index : 1;left : 50%;transform : translateX(-50%)}
.sub-index{font-size : 16px; font-family : jost; font-weight : 500; color : #fff;}
.sub-rect{width : 1px; height : 10px;background: #fff;;}
.sub-total{font-size : 16px; font-family : jost; font-weight : 500; color : #fff;opacity : 0.5;}

.sub-slide-con{padding: 200px 0;}
.sub-slide-con > .con-tit{margin-bottom: 40px;}

.sub-slide-desc{position : absolute;bottom : 73px;z-index : 1;left : 50%;transform : translateX(-50%);font-family : jost; color : #fff;text-align : center;text-shadow : 0 0 3px rgba(0,0,0,0.5); /* background: #000; */}

.sub-navigation{display : flex; justify-content : space-between; width : 100%;height : 1px;z-index : 1;position : absolute;padding : 0 100px;}
.sub-prev{width : 45px;height : 45px;border-top : 2px solid #fff; border-left: 2px solid #fff;transform : rotate(-45deg); transform-origin : left top; cursor : pointer}
.sub-next{width : 45px;height : 45px;border-top : 2px solid #fff; border-right: 2px solid #fff;transform : rotate(45deg); transform-origin : right top; cursor : pointer}
.sub-navigation > .swiper-button-disabled{opacity : 0.5;cursor : auto}

@media(max-width : 768px){
	.sub-bg{top : 70px;}
	.sub-bg{top : 70px;height : calc(100% - 70px)}

	.video-title{font-size : 24px;}

	.con-tit{font-size : 24px;}
	.con-desc{font-size : 14px;padding : 0 20px;}

	.bubble{padding : 30px 0 50px;}
	.bubble::before{font-size : 30px;}
	.bubble::after{font-size : 30px;}

	.sub-slide{height: 400px;}
	.sub-slide .swiper-slide{padding-bottom : 56.25%;position : relative;}
	.parallax-bg{position : absolute;left : 0;top : 0;}

	.sub-slide-con{padding : 50px 0;}
	.sub-slide-con > .con-tit{margin-bottom: 30px;}

	.sub-slide-desc{bottom : 50%;transform : translateX(-50%) translateY(50%);font-size : 12px; white-space : nowrap;}

	.sub-pagination{gap : 10px;bottom : 20px;}
	.sub-index{font-size : 13px;}
	.sub-rect{height : 7px;}
	.sub-total{font-size : 13px;}

	.sub-navigation{padding : 0 20px;}
	.sub-prev{width : 20px;height : 20px;border-top : 2px solid #fff; border-left: 2px solid #fff;}
	.sub-next{width : 20px;height : 20px;border-top : 2px solid #fff; border-right: 2px solid #fff;}
}

.makaha-bg .sub-slide {
    width: 1200px;
	overflow: hidden;
}
.makaha-slide-wrap {
	border : 5px solid #6a4c4b; padding: 5px;
}
.makaha-bg {
    background : url(/assets/images/sub/sub-makaha-bg.png) center no-repeat;
    background-size : cover;
	padding-bottom: 50px;
}
.makaha-top {
	margin: 40px auto;
}

@media(max-width : 768px){
	.makaha-bg .sub-slide {
		width: 340px;
		overflow: hidden;
	}
	.makaha-top {
		width: 80%;
		text-align: center;
	}
	.makaha-top img {
		text-align: center;
	}
}