@charset "utf-8";
main {margin-top: 10rem;}


.main01 {background: #F8F8F8; height: 72rem; overflow: hidden;}
.main01 .inner {justify-content: space-between; position: relative; height: 100%;}
.main01 .left {width: 45%; margin-top: 8rem; position: relative;}
.main01 .left .txt {position: relative; z-index: 2;}
.main01 .left h2 {font-size: 4.8rem;}
.main01 .left p {font-size: 2.4rem; font-weight: 500; color: #646464; margin: 2rem 0 4rem;}
.main01 .left .img {width: min(500px,80%); position: absolute; bottom:0; right:10%; z-index: 1;}

.main01 .right {width: min(810px,52%); height: 100%;overflow: hidden;}
.main01 .right .main01-slide {position: relative; overflow: hidden; width: 50%; height: 72rem;}
.main01 .right .main01-slide .swiper-wrapper {transition-timing-function: linear !important; position: relative;}
.main01 .right .main01-slide .swiper-slide {width: auto; padding:0 0 2rem 2rem; height: auto;}
.main01 .right .main01-slide2 {transform: rotate(180deg);}
.main01 .right .main01-slide2 .swiper-slide {transform: rotate(180deg);}
.main01 .right .main01-slide .swiper-slide img {border-radius: 1.5rem;}

@media (max-width:1080px) {
    .main01 .inner {padding-right: 0;}
    .main01 .left {width: 52%;}
    .main01 .right {margin-right: -5%;}
}
@media (max-width:768px) {
    .main01 {height: 60rem;}
    .main01 .inner {align-items: center;}
    .main01 .left {width: min(260px,56%); margin-top: 0; padding-top: 30px; height: 100%;}
    .main01 .left .img {width: 65%; right: 25%;}
    .main01 .right {margin-right: -15%; width: 59%;}
    .main01 .right .main01-slide .swiper-slide {padding:0 0 1rem 1rem;}
}

.main02 {padding: 8rem 0;}
.main02 .main02-slide::before {content:""; position: absolute; top:50%; right:0; transform: translate(-12%,-50%) rotate(-20deg); width: 45%; height: 100%; background: #eddeca; clip-path: ellipse(50% 33% at 50% 50%); z-index: -1;}
.main02 .main02-slide .swiper-slide {align-items: center; justify-content: center;}
.main02 .main02-slide .swiper-slide > div {width: min(650px,45%);}
.main02 .main02-slide .swiper-slide a {margin-top: 5rem;}
.main02 .main02-slide .swiper-slide p {font-size: max(13px, 2rem); color: #646464; margin-top: 3rem;}
.main02 .main02-slide .swiper-slide .img {justify-content: center; align-items: center; position: relative;}
.main02 .main02-slide .swiper-slide .img img {width: 75%;}
.main02 .main02-slide .main02-slide-btn {width: 5rem; height: 5rem; background: #fff; border-radius: 50%; box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2); transition: all 0.3s;}  
.main02 .main02-slide .main02-slide-btn img {filter: brightness(0); margin-left: 3px;}
.main02 .main02-slide .main02-slide-prev img {transform: scale(-1, 1); margin: 0 3px 0 0;}

.main02 .main02-slide .main02-slide-btn:hover {background: #212121;}
.main02 .main02-slide .main02-slide-btn:hover img {filter: none;}

@media (max-width:1200px) {
    
}
@media (max-width:1080px) {
    .main02 .main02-slide::before {top:32%; right:50%; transform: translate(50%,-50%) rotate(-20deg); width: min(450px,80%); height: 60%;}
    .main02 .main02-slide .swiper-slide > div {width: 100%; }
    .main02 .main02-slide .swiper-slide .img {order: 1; width: min(360px,90%);}
    .main02 .main02-slide .swiper-slide .cont-title {order:2; text-align: center; margin-top: 8rem;}
    .main02 .main02-slide .swiper-slide a {margin: 5rem auto 0;}
    
}
@media (max-width:768px) {
    
}

.main03 {align-items: center; justify-content: center; background: url(../images/main/main_img08.jpg) no-repeat center / cover; background-attachment: fixed;height: 60rem; position: relative;} 
.main03::before {content:""; position: absolute; }
.main03 .cont-title {text-align: center; color: #fff;}
.main03 .cont-title p {font-size: 2.4rem; margin-top: 3rem; line-height: 1.6;}
.main03 .cont-title h2 {font-size: 5.2rem;}

.main04 {padding-top: 12rem;}
.main04 .inner {align-items: center;}
.main04 .txt {width: 25%; padding-right: 5%;}
.main04 .txt .btn-type1 {margin-top: 5rem;}
.main04 .img {width: 75%; justify-content: space-between;}
.main04 .img img {width: 32%; border-radius: 1.5rem;}

@media (max-width:768px) {
    .main04 {padding-top: 10rem;}
    .main04 .txt {width: 100%; position: relative; padding-right: 20rem; margin-bottom: 4rem;}
    .main04 .txt .btn-type1 {position: absolute; right:0; bottom:0;}
    .main04 .img {width: 100%;}
    
}