@charset "utf-8";

/* m_txt */
.m_txt{}
.m_txt h4{font-size: 20px; font-weight: 300; color: #999999; letter-spacing: 0.3em; margin-bottom: 25px;}
.m_txt h3{font-size: 44px; font-weight: 500; color: #000000; line-height: 1.4em; word-break: keep-all;}
.m_txt .link{margin-top: 70px; font-size: 16px; font-weight: 600; color: #444444; border: 1px solid #cccccc; display: inline-block; border-radius: 25px; background-color: #fff;}
.m_txt .link a{ padding: 16px 26px; display: block;}
.m_txt .link span{font-weight: 400; margin-left: 25px;}

@media all and (max-width:1280px){
	.m_txt h4{font-size: 19px; margin-bottom: 20px;}
	.m_txt h3{font-size: 40px;}
	.m_txt .link{margin-top: 60px;}
	.m_txt .link a{padding: 14px 24px;}
	.m_txt .link span{margin-left: 22px;}
}
@media all and (max-width:1024px){
	.m_txt h4{font-size: 18px;}
	.m_txt h3{font-size: 36px;}
	.m_txt .link{margin-top: 55px;}
}
@media all and (max-width:768px){
	.m_txt h4{font-size: 17px; margin-bottom: 15px;}
	.m_txt h3{font-size: 32px;}
	.m_txt .link{margin-top: 50px;}
	.m_txt .link a{font-size: 15px;}
}
@media all and (max-width:500px){
	.m_txt h4{font-size: 16px; margin-bottom: 12px;}
	.m_txt h3{font-size: 27px;}
	.m_txt .link{margin-top: 45px;}
}

/* mVisual */
#mVisual{width: 100%; height: 100vh !important; display: block; position: relative;}
#mVisual > div{display: block; height: 100% !important;}
#mVisual .visual{width: 100%; height: 100%;}
#mVisual .visual > div{height: 100%;}
#mVisual .visual > div > div{height: 100%;}
#mVisual .visual .mv{width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: right center;}
#mVisual .visual .mv.mv1{background-image: url(/images/main/mv1.webp);}
#mVisual .visual .mv.mv2{background-image: url(/images/main/mv1.webp);}
#mVisual .inner{position: absolute; height: 100%; z-index: 2; top: 0; left: 50%; transform: translateX(-50%); pointer-events: none;}
#mVisual .inner .txt{display: flex; flex-direction: column; justify-content: center; height: 100%; }
#mVisual .inner .txt h3{font-family: 'Poppins', sans-serif; font-size: 64px; font-weight: 500; color: #fff; line-height: 1.2em;}
#mVisual .inner .txt h3 span{color: #cb181d;}
#mVisual .inner .txt p{font-size: 20px; font-weight: 500; color: #fff; line-height: 1.6em; margin-top: 35px;}
#mVisual .slick-dots{transform: translateX(-50%); bottom: 50px;}
#mVisual .slick-dots li{width: 10px; height: 10px; margin: 0 5px;}
#mVisual .slick-dots li.slick-active{background-color: #cb181d;}

@media all and (max-width:1280px){
	#mVisual .visual .mv{background-position: right 30% center;}
	#mVisual .inner .txt h3{font-size: 56px; line-height: 1.1em;}
	#mVisual .inner .txt p{font-size: 19px; margin-top: 30px;}
	#mVisual .slick-dots{bottom: 40px;}
}
@media all and (max-width:1024px){
	#mVisual{height: 85vh !important;}
	#mVisual .inner .txt h3{font-size: 48px; line-height: 1.1em;}
	#mVisual .inner .txt p{font-size: 18px; margin-top: 30px;}
}
@media all and (max-width:768px){
	#mVisual .inner .txt h3{font-size: 42px; line-height: 1.1em;}
	#mVisual .inner .txt p{font-size: 17px; margin-top: 30px;}
	#mVisual .slick-dots{bottom: 30px;}
	#mVisual .slick-dots li{margin: 0 3px;}
}
@media all and (max-width:500px){
	#mVisual .inner .txt h3{font-size: 36px; line-height: 1.1em;}
	#mVisual .inner .txt p{font-size: 16px; margin-top: 25px;}
}


/* sec1 */
#fullpage #sec1{padding: 120px 0; position: relative;}
#fullpage #sec1 .inner{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
#fullpage #sec1 .inner .m_txt{width: 48%;}
#fullpage #sec1 .r_cont{width: 50%; margin-left: auto; height: 800px; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(5, 1fr); grid-gap: 1px; background-color: #ececec;}
#fullpage #sec1 .r_cont .box{display: grid; background-color: #fff; background-repeat: no-repeat; background-position:center center; background-size: cover;}
#fullpage #sec1 .r_cont .box.box1{}
#fullpage #sec1 .r_cont .box.box2{}
#fullpage #sec1 .r_cont .box.box3{background-image: url(/images/main/sec1_box3_bg1.webp);}
#fullpage #sec1 .r_cont .box.box4{grid-column: 4 / 7; grid-row: 1 / 3 ; background-image: url(/images/main/sec1_box4_bg1.webp);}
#fullpage #sec1 .r_cont .box.box5{grid-column: 1 / 3; grid-row: 2 / 5; background-image: url(/images/main/sec1_box5_bg1.webp);}
#fullpage #sec1 .r_cont .box.box6{}
#fullpage #sec1 .r_cont .box.box7{grid-column: 3 / 5; grid-row: 3 / 5; background-image: url(/images/main/sec1_box7_bg1.webp); background-size: auto;}
#fullpage #sec1 .r_cont .box.box8{ background-image: url(/images/main/sec1_box8_bg1.webp);}
#fullpage #sec1 .r_cont .box.box9{}
#fullpage #sec1 .r_cont .box.box10{grid-column: 5 / 7; grid-row: 4 / 6; background-image: url(/images/main/sec1_box10_bg1.webp);}
#fullpage #sec1 .r_cont .box.box11{ background-image: url(/images/main/sec1_box11_bg1.webp);}
#fullpage #sec1 .r_cont .box.box12{}
#fullpage #sec1 .r_cont .box.box13{grid-column: 3 / 5; grid-row: 5 / 6; background-image: url(/images/main/sec1_box13_bg1.webp);}

@media all and (max-width:1400px){
	#fullpage #sec1 .r_cont{height: 50vw;}
}
@media all and (max-width:1280px){
	#fullpage #sec1{padding: 100px 0;}
	#fullpage #sec1 .r_cont .box.box7{background-size: 110px;}
}
@media all and (max-width:1024px){
	#fullpage #sec1{padding: 90px 0;}
	#fullpage #sec1 .r_cont .box.box7{background-size: 80px;}
}
@media all and (max-width:768px){
	#fullpage #sec1{padding: 80px 0;}
	#fullpage #sec1 > div{display: flex; flex-direction: column;}
	#fullpage #sec1 .inner{position: static; top: 0; left: 0; transform: translate(0);}
	#fullpage #sec1 .inner .m_txt{width: 100%;}
	#fullpage #sec1 .r_cont{width: 100%; height: 80vw; border-top: 1px solid #ececec; border-bottom: 1px solid #ececec; margin-top: 70px;}
	
}
@media all and (max-width:500px){
	#fullpage #sec1{padding: 70px 0;}
	#fullpage #sec1 .r_cont{margin-top: 60px; height: 90vw;}
}


/* sec2 */
#fullpage #sec2{background-color: #faf9f6; padding: 100px 0;}
#fullpage #sec2 .inner{}
#fullpage #sec2 .inner .top{display: flex; justify-content: space-between; align-items: flex-end;}
#fullpage #sec2 .inner .top .m_txt{}
#fullpage #sec2 .inner .top .arrows{display: flex; gap:10px;}
#fullpage #sec2 .inner .top .arrows .arrow{cursor: pointer;}
#fullpage #sec2 .inner .top .arrows .arrow img{max-width: 100%;}
#fullpage #sec2 .inner .top .arrows .next{margin-left: -1px;}
#fullpage #sec2 .inner .bottom{margin-top: 80px;}
#fullpage #sec2 .inner .bottom li{margin-right: 10px;}
#fullpage #sec2 .inner .bottom li .img{}
#fullpage #sec2 .inner .bottom li .img img{max-width: 100%;}
#fullpage #sec2 .inner .bottom li p{font-size: 26px; color: #000; font-weight: 700; margin-top: 35px; word-break: keep-all;}

@media all and (max-width:1280px){
	#fullpage #sec2{padding: 80px 0;}
	#fullpage #sec2 .inner .bottom li{max-width: 420px;}
	#fullpage #sec2 .inner .bottom li p{font-size: 24px; margin-top: 30px;}
}
@media all and (max-width:1024px){
	#fullpage #sec2{padding: 70px 0;}
	#fullpage #sec2 .inner .bottom li{max-width: 360px;}
	#fullpage #sec2 .inner .bottom li p{font-size: 22px; margin-top: 25px;}
}
@media all and (max-width:768px){
	#fullpage #sec2{padding: 60px 0;}
	#fullpage #sec2 .inner .top{flex-direction: column; align-items: flex-start;}
	#fullpage #sec2 .inner .top .arrows{margin-top: 30px;}
	#fullpage #sec2 .inner .top .arrows .arrow img{max-width: 48px;}
	#fullpage #sec2 .inner .bottom li{max-width: 320px;}
	#fullpage #sec2 .inner .bottom li p{font-size: 20px; margin-top: 22px;}
}
@media all and (max-width:500px){
	#fullpage #sec2{padding: 55px 0;}
	#fullpage #sec2 .inner .bottom li{max-width: 280px;}
	#fullpage #sec2 .inner .bottom li p{font-size: 18px; margin-top: 18px;}
}


/* sec3 */
#fullpage #sec3{padding: 120px 0;}
#fullpage #sec3 .inner{}
#fullpage #sec3 .inner .m_txt{}
#fullpage #sec3 .inner .list{display: flex; margin-top: 75px; gap:10px;}
#fullpage #sec3 .inner .list li{width: 100%; position: relative; cursor: pointer;}
#fullpage #sec3 .inner .list li .img{}
#fullpage #sec3 .inner .list li .img img{max-width: 100%;}
#fullpage #sec3 .inner .list li .img .more{font-size: 30px; color: #000; font-weight: 400; width: 64px; height: 64px; background-color: #fff; position: absolute; right: 0; top: 0; display: flex; justify-content: center; align-items: center;}
#fullpage #sec3 .inner .list li .txt{margin-top: 30px;}
#fullpage #sec3 .inner .list li .txt h3{font-size: 26px; color: #000;}
#fullpage #sec3 .inner .list li .txt p{font-size: 18px; color: #666666; line-height: 1.6em; margin-top: 15px; word-break: keep-all;}

@media all and (max-width:1280px){
	#fullpage #sec3{padding: 100px 0;}
	#fullpage #sec3 .inner .list{margin-top: 60px;}
	#fullpage #sec3 .inner .list li .img .more{font-size: 26px; width: 58px; height: 58px;}
	#fullpage #sec3 .inner .list li .txt{margin-top: 25px;}
	#fullpage #sec3 .inner .list li .txt h3{font-size: 24px;}
	#fullpage #sec3 .inner .list li .txt p{font-size: 17px;}
	#fullpage #sec3 .inner .list li .txt p br{display: none;}
}
@media all and (max-width:1024px){
	#fullpage #sec3{padding: 90px 0;}
	#fullpage #sec3 .inner .list{margin-top: 55px;}
	#fullpage #sec3 .inner .list li .img .more{font-size: 24px; width: 52px; height: 52px;}
	#fullpage #sec3 .inner .list li .txt{margin-top: 22px;}
	#fullpage #sec3 .inner .list li .txt h3{font-size: 22px;}
}
@media all and (max-width:768px){
	#fullpage #sec3{padding: 80px 0;}
	#fullpage #sec3 .inner .list{margin-top: 50px; flex-direction: column; gap:50px;}
	#fullpage #sec3 .inner .list li .img{height: 60vw;}
	#fullpage #sec3 .inner .list li .img img{object-fit: cover; width: 100%; height: 100%;}
	#fullpage #sec3 .inner .list li .img .more{font-size: 26px; width: 58px; height: 58px;}
	#fullpage #sec3 .inner .list li .txt{margin-top: 18px;}
	#fullpage #sec3 .inner .list li .txt h3{font-size: 21px;}
	#fullpage #sec3 .inner .list li .txt p{font-size: 16px;}
}
@media all and (max-width:500px){
	#fullpage #sec3{padding: 70px 0;}
	#fullpage #sec3 .inner .list{margin-top: 45px; gap:40px;}
	#fullpage #sec3 .inner .list li .txt{margin-top: 15px;}
	#fullpage #sec3 .inner .list li .txt h3{font-size: 20px;}
	#fullpage #sec3 .inner .list li .img .more{font-size: 22px; width: 52px; height: 52px;}
}


/* sec4 */
#fullpage #sec4{background: url(/images/main/sec4_bg.webp) no-repeat center center / cover; text-align: center; }
#fullpage #sec4 > div{}
#fullpage #sec4 .inner{}
#fullpage #sec4 .inner .m_txt{position: absolute; top: 140px; left: 50%; transform: translateX(-50%); width: 100%;}
#fullpage #sec4 .inner .m_txt h4{color:#fff;}
#fullpage #sec4 .inner .m_txt h3{color:#fff;}
#fullpage #sec4 .inner .cont{height: 100vh; min-height: 840px; display: flex; border-left: 1px solid rgba(255,255,255,0.2); border-right: 1px solid rgba(255,255,255,0.2);}
#fullpage #sec4 .inner .cont li {
    width: 100%;
    position: relative;
}

#fullpage #sec4 .inner .cont li::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent, transparent, rgba(203, 24, 29,0.7));
    opacity: 0;
    transition: opacity 0.4s;
	z-index: 0;
}

#fullpage #sec4 .inner .cont li:hover::after {
    opacity: 1;
}
#fullpage #sec4 .inner .cont li + li{border-left: 1px solid rgba(255,255,255,0.2);}
#fullpage #sec4 .inner .cont li .box{display: flex; flex-direction: column; justify-content: flex-end; height: 100%;padding: 0 20px 140px; z-index: 2; position: relative;}
#fullpage #sec4 .inner .cont li .box .img{margin-bottom: 40px;}
#fullpage #sec4 .inner .cont li .box .img img{max-width: 100%;}
#fullpage #sec4 .inner .cont li .box .txt{}
#fullpage #sec4 .inner .cont li .box .txt h3{font-size: 32px; font-weight: 600; color: #fff;}
#fullpage #sec4 .inner .cont li .box .txt p{font-size: 20px; color: #fff; margin-top: 15px;}
#fullpage #sec4 .inner .cont li .box .link{margin-top: 70px;}
#fullpage #sec4 .inner .cont li .box .link a{}
#fullpage #sec4 .inner .cont li .box .link a img{max-width: 100%; opacity: 0.5; transition: .4s;}
#fullpage #sec4 .inner .cont li .box .link a:hover img{opacity: 1;}

@media all and (max-width:1280px){
	#fullpage #sec4 .inner .m_txt{top: 120px;}
	#fullpage #sec4 .inner .cont{height: 85vh;}
	#fullpage #sec4 .inner .cont li .box{padding: 0 20px 120px;}
	#fullpage #sec4 .inner .cont li .box .img{margin-bottom: 30px;}
	#fullpage #sec4 .inner .cont li .box .txt h3{font-size: 28px;}
	#fullpage #sec4 .inner .cont li .box .txt p{font-size: 19px;}
	#fullpage #sec4 .inner .cont li .box .link{margin-top: 55px;}
	#fullpage #sec4 .inner .cont li .box .link a img{max-width: 64px;}
}
@media all and (max-width:1024px){
	#fullpage #sec4 .inner{width: 100%;}
	#fullpage #sec4 .inner .m_txt{top: 100px;}
	#fullpage #sec4 .inner .cont{height: 80vh;}
	#fullpage #sec4 .inner .cont li .box{padding: 0px 15px 100px;}
	#fullpage #sec4 .inner .cont li .box .img{margin-bottom: 25px;}
	#fullpage #sec4 .inner .cont li .box .txt h3{font-size: 26px;}
	#fullpage #sec4 .inner .cont li .box .txt p{font-size: 18px;}
	#fullpage #sec4 .inner .cont li .box .link{margin-top: 30px;}
	#fullpage #sec4 .inner .cont li .box .link a img{max-width: 60px;}
}
@media all and (max-width:768px){
	#fullpage #sec4 .inner .m_txt{position: static; top: 0; left: 0; transform: translate(0); padding: 90px 0 60px;}
	#fullpage #sec4 .inner .cont{height: auto; min-height: 0; border-top: 1px solid rgba(255,255,255,0.2); flex-wrap: wrap;}
	#fullpage #sec4 .inner .cont li{width: 50%;}
	#fullpage #sec4 .inner .cont li:nth-child(3), #fullpage #sec4 .inner .cont li:nth-child(4){border-top: 1px solid rgba(255,255,255,0.2);}
	#fullpage #sec4 .inner .cont li .box{padding: 40px 15px 40px;}
	#fullpage #sec4 .inner .cont li .box .img{margin-bottom: 20px;}
	#fullpage #sec4 .inner .cont li .box .img img{max-width: 180px;}
	#fullpage #sec4 .inner .cont li .box .txt h3{font-size: 24px;}
	#fullpage #sec4 .inner .cont li .box .txt p{font-size: 17px;}
	#fullpage #sec4 .inner .cont li .box .link{margin-top: 25px;}
	#fullpage #sec4 .inner .cont li .box .link a img{max-width: 54px;}
}
@media all and (max-width:500px){
	#fullpage #sec4 .inner .m_txt{padding: 70px 0 50px;}
	#fullpage #sec4 .inner .cont li .box{padding: 35px 15px 35px;}
	#fullpage #sec4 .inner .cont li .box .img{margin-bottom: 15px;}
	#fullpage #sec4 .inner .cont li .box .img img{max-width: 160px;}
	#fullpage #sec4 .inner .cont li .box .txt h3{font-size: 22px;}
	#fullpage #sec4 .inner .cont li .box .txt p{font-size: 16px;}
	#fullpage #sec4 .inner .cont li .box .link a img{max-width: 48px;}
}


#mVisual .inq{position: absolute; top: 60%; right: 15%;}
#mVisual .inq a{ color: #fff; font-size: 1.8rem; background:#cb181d; font-weight: bold; border-radius: 10px; text-align: center; padding: 30px 50px;}
@media screen and (max-width:1600px){
    #mVisual .inq{right: 5%;}
}
@media screen and (max-width:980px){
    #mVisual .inq a{font-size: 1.6rem; padding: 20px 40px;}
}
@media screen and (max-width:780px){
    #mVisual .inq{top: 75%; right: auto; left: 50%; transform: translatex(-50%)}
}