@charset "utf-8";

@keyframes scroll{
	0%{bottom: 62px;}
	50%{bottom: 82px;}
	100%{bottom: 62px;}
}
@keyframes scroll2{
	0%{bottom: 3%;}
	50%{bottom: 5.5%;}
	100%{bottom: 3%;}
}

/* sec1 */
.sec1{background: url(/images/main/mv1.webp) no-repeat center center / cover;}
.sec1 .inner{height: 100%; display: flex; flex-direction: column; justify-content:center;}
.sec1 .inner .txt{ color: #fff;}
.sec1 .inner .txt h4{font-family: 'LeferiPointWhite'; font-size: var(--fz40); font-weight: 100;}
.sec1 .inner .txt h3{font-family: 'EsaManru'; font-weight: 500; font-size: var(--fz56); margin-bottom: 25px; text-shadow: 0px 2px 8px rgba(0,0,0,0.2);}
.sec1 .inner .txt h3 span{font-size: var(--fz70);}
.sec1 .inner .txt p{font-size: var(--fz18); line-height: 1.6em; text-shadow: 0px 2px 8px rgba(0,0,0,0.2);}
.sec1 .scroll{position: absolute; right: 82px; bottom: 62px; animation: scroll 1.25s infinite;}

@media all and (max-width:976px){
	.sec1{background: url(/images/main/sec1.jpg) no-repeat center right / cover;}
	.sec1 .inner{justify-content: center;}
	.sec1 .inner .txt{text-align: center; margin-bottom: 0;}
	.sec1 .inner .txt h3{margin-bottom: 20px;}
	.sec1 .inner .txt p{word-break: keep-all;}
	.sec1 .scroll{right: 0; left: 50%; transform: translateX(-50%); animation:  scroll2 1.25s infinite; text-align: center;}
	.sec1 .scroll img{max-width: 10px;}
}
@media all and (max-width:768px){
	.sec1 .inner .txt h3{margin-bottom: 15px;}
	.sec1 .inner .txt p br{display: none;}
}

/* sec2 */
.sec2{background: url(/images/main/sec2.jpg) no-repeat center center / cover; transition: .5s ease-in-out;}
.sec2.active{background: url(/images/main/sec2_on.jpg) no-repeat center center / cover; transition: 1s ease-in-out; transition: 1.5s ease-in-out;}
.sec2 .inner{height: 100%; display: flex; flex-direction: column; justify-content: center;}
.sec2 .txt{text-align: center; color: #fff;}
.sec2 .txt h3{font-size: var(--fz80); line-height: 1.1em;}
.sec2 .txt p{font-size: var(--fz18); line-height: 1.6em; margin-top: 30px; word-break: keep-all;}
.sec2 .cont{}
.sec2 .cont .img{margin-right: 50px;}
.sec2 .cont .img a{position: relative;}
.sec2 .cont .img a img{max-width: 360px;}
.sec2 .cont .img a p{color:#fff; font-size: var(--fz18); position: absolute; right: 20px; bottom: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

@media all and (max-width:976px){
	.sec2 .cont .img{margin-right: 40px;}
	.sec2 .cont .img a img{max-width: 320px;}
}
@media all and (max-width:768px){
	.sec2 .cont .img{margin-right: 0; margin: 0 15px;}
	.sec2 .cont .img a img{max-width: 280px;}
	.sec2 .txt p{margin-top: 25px;}
}
@media all and (max-width:500px){
	.sec2 .cont .img{margin:0 12px;}
	.sec2 .cont .img a img{max-width: 240px;}
}

/* sec3 */
.sec3{background: url(/images/main/sec3.jpg) no-repeat center center / cover; transition: 1s ease-in-out;}
.sec3.active{background: url(/images/main/sec3_on.jpg) no-repeat center center / cover; transition: 1.5s ease-in-out;}
.sec3 .inner{height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-end;}
.sec3 .inner .txt{color: #fff;}
.sec3 .inner .txt h4{font-family: 'LeferiPointWhite'; font-size: var(--fz40); font-weight: 100;}
.sec3 .inner .txt h3{font-family: 'EsaManru'; font-weight: 500; font-size: var(--fz70); margin: 25px 0 70px}
.sec3 .inner .txt p{font-size: var(--fz18); line-height: 1.6em; word-break: keep-all;}

@media all and (max-width:976px){
	.sec3.active{background: url(/images/main/sec3.jpg) no-repeat center center / cover;}
	.sec3 .inner .txt{text-align: center;}
	.sec3 .inner .txt h3{margin: 20px 0 55px;}
}
@media all and (max-width:768px){
	.sec3 .inner .txt h3{margin: 15px 0 45px;}
	.sec3 .inner .txt p br{display: none;}
}

/* sec4 */
.sec4{background: url(/images/main/sec4.jpg) no-repeat center center / cover;}
.sec4 .inner{ display: flex; justify-content: space-between; }
.sec4 .inner .l_cont{color: #fff;}
.sec4 .inner .l_cont h4{font-family: 'LeferiPointWhite'; font-size: var(--fz40); font-weight: 100;}
.sec4 .inner .l_cont h3{font-family: 'EsaManru'; font-weight: 500; font-size: var(--fz70); margin: 20px 0 0;}
.sec4 .inner .r_cont{width: 100%; max-width: 1024px; color: #fff;}
.sec4 .inner .r_cont .list{border-top: 1px solid rgba(255,255,255,0.3)}
.sec4 .inner .r_cont .list li{padding: 60px 0; display: flex; align-items: center;border-bottom: 1px solid rgba(255,255,255,0.3);}
.sec4 .inner .r_cont .list li .lc{font-family: 'LeferiPointBlack'; font-size: var(--fz28); font-weight: 900; padding-left: 10px; width: 260px; letter-spacing: -0.05em;}
.sec4 .inner .r_cont .list li .rc{display: flex; justify-content: space-between; width: calc(100% - 260px); align-items: center;}
.sec4 .inner .r_cont .list li .rc p{font-size: var(--fz16); line-height: 1.6em;}
.sec4 .inner .r_cont .list li .rc a{}
.sec4 .inner .r_cont .list li .rc a img{padding-right: 10px;}

@media all and (max-width:1600px){
	.sec4 .inner .l_cont h4{font-size: var(--fz32);}
	.sec4 .inner .l_cont h3{font-size: var(--fz56);}
	.sec4 .inner .r_cont{max-width: 60vw;}
	.sec4 .inner .r_cont .list li{padding: 50px 0;}
}
@media all and (max-width:1280px){
	.sec4 .inner .r_cont .list li .lc{font-size: var(--fz24); width: 220px;}
	.sec4 .inner .r_cont .list li .rc{width: calc(100% - 220px);}
	.sec4 .inner .r_cont .list li .rc p{word-break: keep-all;}
	.sec4 .inner .r_cont .list li .rc p br{display: none;}
}
@media all and (max-width:976px){
	.sec4 .inner{flex-direction: column;}
	.sec4 .inner .l_cont h3{margin-top: 15px;}
	.sec4 .inner .r_cont{max-width: 100%; margin-top: 40px;}
	.sec4 .inner .r_cont .list li{padding: 30px 0;}
	.sec4 .inner .r_cont .list li .lc{width: 200px;}
	.sec4 .inner .r_cont .list li .rc{width: calc(100% - 200px);}
}
@media all and (max-width:640px){
	.sec4 .inner .r_cont .list li{flex-direction: column; align-items: flex-start; padding: 20px 0;}
	.sec4 .inner .r_cont .list li .lc{width: 100%; margin-bottom: 10px;}
	.sec4 .inner .r_cont .list li .rc{width: 100%; padding-left: 10px;}
	.sec4 .inner .r_cont .list li .rc a img{width: 60px;}
}

/* sec5 */
.sec5{background: url(/images/main/sec5.jpg) no-repeat center center / cover;}
.sec5 .inner{height: 100%; display: flex; justify-content: flex-end; align-items: center;}
.sec5 .inner .txt{text-align: center; color: #fff;}
.sec5 .inner .txt h3{font-family: 'EsaManru'; font-weight: 500; font-size: var(--fz50);}
.sec5 .inner .txt p{font-size: var(--fz16); line-height: 1.6em; margin-top: 25px;}
.sec5 .inner .txt a.more{color: #fff; border: 1px solid rgba(255,255,255,0.5); margin-top: 50px; padding: 15px 20px; font-size: var(--fz13); font-weight: 700; display:inline-flex; align-items: center;}
.sec5 .inner .txt a.more img{margin-left: 20px;}

@media all and (max-width:976px){
	.sec5 .inner{justify-content: center;}
	.sec5 .inner .txt p{margin-top: 20px;}
	.sec5 .inner .txt a.more{margin-top: 40px;}
}