section, section *{ box-sizing:border-box; }
*{ box-sizing:border-box; }
section{ overflow:hidden; }
.main-con{width: 100%; max-width: calc(1500px + 8rem); margin: 0 auto; padding: 0 4rem;}

.sect-tit{margin-bottom: 3rem; text-align: center;}
.sect-tit > h3{font-size: 30px; line-height: 1; font-weight: 700; color: #000;}

/*sc01*/
#sc01{ background-color:#333; height: 100vh; position: relative; overflow: hidden;}
#sc01::after{content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 2;}

.main-caption{width: 100%; padding: 0 15px; text-align: center; position: absolute; top: 50%; transform: translateY(-50%); left: 0; z-index: 8; color: #fff;}
.main-caption > h2{font-size: 80px; font-weight: 500; line-height: 1.1; margin-bottom: 3rem;}
.main-caption > h5{font-size: 16px; font-weight: 400;}

/* mouse-s */
.mouse{width: 30px; height: 330px; display: flex; justify-content: space-between; z-index: 8; color: #fff; position: absolute; right: calc(4rem + 20px); top: 50%; transform: translateY(-50%);}
.mouse > h5{font-size: 16px; font-weight: 400; writing-mode: tb; transform: rotate(180deg);}
.mouse-l{width: 1px; height: 330px; background-color: rgba(255, 255, 255, 0.2); position: relative; overflow: hidden;}
.mouse-l::after{content: ""; width: 1px; height: 100%; background-color: rgba(255, 255, 255, 0.8); position: absolute; top: -100%; left: 0; animation: wheel 6s infinite ease-in-out;}

@keyframes wheel{
	0%{top: -100%;}
	100%{top: 100%;}
}

.sc01Sli{ position:relative; z-index:1; background-color:#333; overflow:hidden; }
.sc01_bg{ position:absolute; z-index:1; top:0; bottom:0; left:0; right:0; background-color:#333; background-position:center; background-size:cover; background-repeat:no-repeat; }
.sc01_mbg{ display:none; position:absolute; z-index:1; top:0; bottom:0; left:0; right:0; background-color:#333; background-position:center; background-size:cover; background-repeat:no-repeat; }
.sc01_fr{ position:relative; z-index:1; min-height:max(600px,36.4583333vw); padding:150px 70px; display:flex; align-items:center; /*background-color:rgba(0,0,0,.35);*/ }

.sc01mw{ position:relative; z-index:1; overflow:hidden; background-color:#333; width: 100%; height: 100%;}
.sc01mw > .sc01_bdo{ position:absolute; z-index:1; top:50%; left:50%; min-width:100%; height:155%; transform:translate(-50%,-50%); }

.vimeo_player_wrapper{opacity: 1 !important;}

/* sc02 */
#sc02{height: calc(100vh + 2px); background-color: #000; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; position: relative; z-index: 1;}
#sc02::after{content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 3;}
.sc02-caption{text-align: center; color: #fff; width: 100%; padding: 0 15px 4rem; position: relative; z-index: 4;}
.sc02-caption > h3{font-size: 100px; line-height: 1.2; font-weight: 500;}

.sc02-vimeo{width: 100%; padding-top: 56.25%; position: absolute; z-index: 3;}
.sc02-vimeo iframe{position: absolute; top: -0%; width: 100%; height: 100%; object-fit: cover;}

/* sc03 */
#sc03{padding-top: 150px;}
.sc03-wrap{width: 100%; display: flex; justify-content: space-between;}
.sc03-box{width: 48%;}
.sc03-wz{display: flex; justify-content: space-between;}
.sc03-tit{width: 20%; padding-top: 5px;}
.sc03-tit .sect-tit{text-align: left;}
.sc03-cont{width: 78%;}

.mpr_table{width: 100%; table-layout: fixed;}
.mpr_table td.date{font-size: 12px; font-weight: 400; color: #000; border-bottom: 1px solid #ddd; width: 20%;}
.mpr_table td.title{font-size: 16px; font-weight: 400; color: #000; position: relative; padding: 15px 20px 15px 0; border-bottom: 1px solid #ddd; width: 80%; overflow: hidden;text-overflow: ellipsis; white-space: nowrap;}
.mpr_table td.title > span{display: inline-block; font-size: 12px; line-height: 1; position: absolute; top: 50%; transform: translateY(-50%); right: 0; transition: .4s;}
.mpr_table td.title > a{transition: .4s;}
.mpr_table td.title > a:hover{text-decoration: none;}

/* sc04 */
#sc04{padding: 150px 0;}
.sc04-swiper{position: relative;}
.sc04swiper{padding-right: calc((100% - 1500px) / 2); margin-left: calc((100% - 1498px) / 2);}
.bs-box{border: 1px solid #ddd; padding: 3rem; display: block;}
.bs-img{display: flex; margin-bottom: 10px;}
.bs-img img{width: 100%;}
.bs-caption{margin-bottom: 10px; color: #000;}
.bs-caption > h5{font-size: 16px; font-weight: 700; margin-bottom: 5px; transition: .4s;}
.bs-caption > p{font-size: 12px; font-weight: 400;}
.bs-price{display: flex; align-items: flex-end; justify-content: space-between; color: #000;}
.bs-price > h3{font-size: 16px; font-weight: 700;}
.more-line{
	width: 50px;
    height: 1px;
    background-color: #000;
    position: relative;
    margin-bottom: 2px;
    transition: .3s;
	transform: translateY(-3px);
}
.more-line::after{
	content: "";
    width: 1px;
    height: 15px;
    background-color: #000;
    position: absolute;
    right: 5px;
    bottom: -2px;
    transform: rotate(-50deg);
    transition: .3s;
}

.bs-box:hover .bs-caption > h5{color: #F7A545;}
.bs-box:hover .more-line{
	width: 65px;
	background-color: #F7A545;
}
.bs-box:hover .more-line::after{
	background-color: #F7A545;
}

.sc04btn-wrap {position: relative; max-width: 310px; height: 50px; margin:2rem auto 0;}
.sc04btn-wrap .swiper-button-next, .sc04btn-wrap .swiper-button-prev{width: 145px; height: 50px; border-radius: 30px; border: 1px solid #d2d2d2; top: 0; margin-top: 0; font-size: 14px; color: #000; font-weight: 700; transition: .4s;}
.sc04btn-wrap .swiper-button-next > span, .sc04btn-wrap .swiper-button-prev > span{font-size: 12px; color: #d2d2d2; display: inline-block; position: absolute; transition: .4s;}
.sc04btn-wrap .swiper-button-next:after, .sc04btn-wrap .swiper-button-prev:after{display: none;}
.sc04btn-wrap .swiper-button-next{right: 0;}
.sc04btn-wrap .swiper-button-prev{left: 0;}
.sc04btn-wrap .swiper-button-next > span{right: 15px;}
.sc04btn-wrap .swiper-button-prev > span{left: 15px;}

.sc04btn-wrap .swiper-button-next:hover, .sc04btn-wrap .swiper-button-prev:hover{border-color: #000;}
.sc04btn-wrap .swiper-button-next:hover > span, .sc04btn-wrap .swiper-button-prev:hover > span{color: #000;}

/* sc05 */
#sc05{padding-bottom: 150px;}
.pd-wrap{width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap;}
.pd-box{width: 32%; margin-bottom: 2rem; border: 1px solid #ddd; padding: 3rem; display: block; border-radius: 30px;}
.pd-img{display: flex; margin-bottom: 10px;}
.pd-img img{width: 100%;}
.pd-caption{margin-bottom: 10px; color: #000;}
.pd-caption > h5{font-size: 16px; font-weight: 700; margin-bottom: 5px; transition: .4s;}
.pd-caption > p{font-size: 12px; font-weight: 400;}
.pd-price{display: flex; align-items: flex-end; justify-content: space-between; color: #000;}
.pd-price > h3{font-size: 16px; font-weight: 700;}
.pd-price > h5{font-size: 16px; font-weight: 700; transition: .4s;}

.pd-box:hover .pd-caption > h5{color: #F7A545;}
.pd-box:hover .more-line{
	width: 65px;
	background-color: #F7A545;
}
.pd-box:hover .more-line::after{
	background-color: #F7A545;
}

.more-btn{text-align: center; width: 100%; padding-top: 1rem;}
.more-btn > a{display: inline-block; font-size: 18px; font-weight: 700; color: #000; padding: 12px 3rem; border-radius: 30px; border: 1px solid #d2d2d2; transition: .4s;}
.more-btn > a > span{display: inline-block; color: #d2d2d2; margin-left: 2px; transition: .4s;}
.more-btn > a:hover{border-color: #000;}
.more-btn > a:hover > span{color: #000;}

/* sc06 */
#sc06{padding-bottom: 150px;}

/* sc07 */
#sc07{padding-bottom: 150px;}

/* sc08 */
#sc08{padding-bottom: 150px;}

/* sc09 */
#sc09{padding-bottom: 150px;}

@media(min-width:1200px){
	.ms-img{display: block; width: 100%; height: 100vh; background-repeat: no-repeat; background-position: center; background-size: cover;}
	.ms-img-m{display: none;}

	.ani.up.delay{
		transition: 1.2s opacity 0.2s, 1.2s transform 0.2s;
	}
	.ani.up.delay2{
		transition: 1.2s opacity 0.5s, 1.2s transform 0.5s;
	}
	.ani.up.delay3{
		transition: 1.2s opacity 0.8s, 1.2s transform 0.8s;
	}
	.ani.up.delay4{
		transition: 1.2s opacity 1.0s, 1.2s transform 1.0s;
	}
	.ani.up.delay5{
		transition: 1.2s opacity 1.3s, 1.2s transform 1.3s;
	}




}
@media(max-width:1530px){
	.sc04swiper{margin-left: 4rem; padding-right: 4rem;}
}

@media(max-width:1199px){
	.main-con{width: 100%; padding: 0 15px;}

	.ms-img{display: none;}
	.ms-img-m{display: block; width: 100%; height: 100vh; background-repeat: no-repeat; background-position: center; background-size: cover;}

	.sect-tit{margin-bottom: 1.5rem;}
	.sect-tit > h3{font-size: 24px;}

	/* sc01 */
	.main-caption{padding: 0 15px; text-align: center;}
	.main-caption > h2{font-size: 35px; margin-bottom: 1.5rem; line-height: 1.2;}
	.main-caption > h5{font-size: 14px;}

	.mouse{right: auto; top: auto; transform: translateY(0); flex-direction: column-reverse; left: 0; bottom: 2rem; align-items: center; width: 100%; height: 100px;}
	.mouse > h5{font-size: 14px; writing-mode: horizontal-tb; transform: rotate(0deg);}
	.mouse-l{height: 76px;}

	/* sc02 */
	.sc02-caption{padding: 0 15px 6rem;}
	.sc02-caption > h3{font-size: 35px;}

	.sc02-vimeo{width: 100vw; padding-top: 0; height: calc(100vh + 3px);}
	.sc02-vimeo iframe{top: 50%; left: 50%; transform: translate(-50%,-50%); width: 177.777vh; height: calc(100vh + 3px);}
	
	/* sc03 */
	#sc03{padding-top: 70px;}
	.sc03-tit .sect-tit{margin-bottom: 1rem;}
	.sc03-wrap{flex-direction: column;}
	.sc03-box{width: 100%;}
	.sc03-box:first-child{margin-bottom: 2rem;}
	.sc03-wz{flex-direction: column;}
	.sc03-tit{width: 100%; padding-top: 0;}
	.sc03-cont{width: 100%;}

	/* sc04 */
	#sc04{padding: 70px 0;}
	.sc04swiper{margin-left: 15px; padding-right: 15px;}

	.bs-box{padding: 1.5rem 1rem;}
	.bs-caption > h5{font-size: 14px;}
	.sc04btn-wrap{max-width: 260px; height: 45px; margin-top: 1.5rem; margin-right: auto;}
	.sc04btn-wrap .swiper-button-next, .sc04btn-wrap .swiper-button-prev{width: 125px; height: 45px;}
	.pd-box{width: 100%; margin-bottom: 1.5rem; padding: 1.5rem 1rem; border-radius: 20px;}
	.pd-caption > h5{font-size: 14px;}
	.more-btn > a{font-size: 16px; padding: 10px 2rem;}
	.more-btn{padding-top: 10px;}

	#sc05, #sc06, #sc07, #sc08, #sc09{padding-bottom: 70px;}
}
@media(max-width:576px){
	.mpr_table td.title{font-size: 14px;}
	.mpr_table td.date{font-size: 10px;}
}

/* animation */

.ani.up{
	transform: translateY(100px);
	opacity: 0;
	transition: 1.2s;
}
.ani.up.act{
	transform: translateY(0);
	opacity: 1;
}
.ani.left{
	transform: translateX(100px);
	opacity: 0;
	transition: 1s;
}
.ani.left.act{
	transform: translateX(0);
	opacity: 1;
}
.ani.right{
	transform: translateX(-100px);
	opacity: 0;
	transition: 1s;
}
.ani.right.act{
	transform: translateX(0);
	opacity: 1;
}

.ani.blur{
	transition-duration: 1s; transition-property: opacity, filter, -webkit-filter, border-radius, color; transition-timing-function: cubic-bezier(.165,.84,.44,1); will-change: auto; opacity: 0; filter: blur(1rem) brightness(1.3);
}
.ani.blur.act{
	filter: blur(0) brightness(1); opacity: 1;
}