@charset "utf-8";
body { overflow-x: hidden; }
main .main-slide div .s1 { background: url(../img/main/image1.jpg) no-repeat center/cover; }
main .main-slide div .s2 { background: url(../img/main/image2.jpg) no-repeat center/cover; }
main .main-slide div .s3 { background: url(../img/main/image3.jpg) no-repeat center/cover; }
main .main-slide div .s4 { background: url(../img/main/image4.jpg) no-repeat center/cover; }
main .main-slide div .s5 { background: url(../img/main/image5.jpg) no-repeat center/cover; }
main .main-slide div .s6 { background: url(../img/main/image6.jpg) no-repeat center/cover; }
main .main-slide div .s7 { background: url(../img/main/image7.jpg) no-repeat center/cover; }
main .main-slide div .s8 { background: url(../img/main/image8.jpg) no-repeat center/cover; }
main .main-slide div .s9 { background: url(../img/main/image9.jpg) no-repeat center/cover; }
main .main-slide div .s10 { background: url(../img/main/image10.jpg) no-repeat center/cover; }
main .main-slide div .s11 { background: url(../img/main/image11.jpg) no-repeat center/cover; }
main .main-slide div .s12 { background: url(../img/main/image12.jpg) no-repeat center/cover; }
main .main-slide div .s13 { background: url(../img/main/image13.jpg) no-repeat center/cover; }
main .main-slide div .s14 { background: url(../img/main/image14.jpg) no-repeat center/cover; }
main .main-slide div .s15 { background: url(../img/main/image15.jpg) no-repeat center/cover; }
main .main-slide div .s16 { background: url(../img/main/image16.jpg) no-repeat center/cover; }
main .main-slide div .s17 { background: url(../img/main/image17.jpg) no-repeat center/cover; }
main .main-slide div .s18 { background: url(../img/main/image18.jpg) no-repeat center/cover; }
main .main-slide div .s19 { background: url(../img/main/image19.jpg) no-repeat center/cover; }
main .main-slide div .s20 { background: url(../img/main/image20.jpg) no-repeat center/cover; }
main .main-slide div .s21 { background: url(../img/main/image21.jpg) no-repeat center/cover; }
main .main-slide div .s22 { background: url(../img/main/image22.jpg) no-repeat center/cover; }
main h1{ position: absolute; left: 80px; bottom: 100px; color: #fff; filter: drop-shadow(1px 1px 3px rgba(0,0,0,0.25)); z-index: 1; }

/* 영상관련 css*/
.main-slide div .video {position: relative; overflow: hidden; width: 100%; height: 100%; }
.main-slide div .video .vid_box{ position:absolute; right:50%; top:50%; transform: translate3d(50%, -50%, 0); object-fit: cover; min-width: calc(100% + 1px); min-height: 100%; aspect-ratio: 16/9; /*background: url('../img/main_thumb.jpg') no-repeat center/cover;*/ /*max-width:3840px; max-height: 2160px; height: 1080px;*/ display: block; overflow: hidden;; }
.main-slide div .video .vid_box iframe{ width: 100%; display: block;  }
.main-slide div .video1 {background: url('../img/thumb1.jpg') no-repeat center/cover; }
.main-slide div .video2 {background: url('../img/thumb2.jpg') no-repeat center/cover; }
.main-slide div .video3 {background: url('../img/thumb3.jpg') no-repeat center/cover; }
.main-slide div .video:nth-child(1) .vid_box{background: url('../img/thumb1.jpg') no-repeat center/cover; }
.main-slide div .video:nth-child(2) .vid_box{background: url('../img/thumb2.jpg') no-repeat center/cover; }
.main-slide div .video:nth-child(3) .vid_box{background: url('../img/thumb3.jpg') no-repeat center/cover; }


.pintro> div { display: flex; }
.pintro> div> div { width: 50%; }
.pintro div .lefts { padding-right: 30px; }
.pintro div .lefts h1 { margin-bottom: 60px; }
.pintro div .lefts p { line-height: 2em; margin-bottom: 40px; }
.pintro div .lefts> :last-child { display: flex; align-items: center; }
.pintro div .lefts div a { position: relative; color: #5E6855; font-family: "Bodoni Moda", serif; font-size: 24px; font-style: italic; margin-right: 40px; }
.pintro div .lefts div a:hover { margin-right: 50px; }
.pintro div .lefts div a::after { position: absolute; top: 50%; right: -10px; transform: translate(100%,-50%); content: ""; width: 50px; height: 1px; background: #fafafa; filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.1)); transition: width .3s ease-in-out; }
.pintro div .lefts div a:hover::after { width: 60px;  }
.pintro div .lefts div span { display: block; width: 40px; height: 40px; border-radius: 50%; background: #DFE3DB; }
.pintro div .imgbox { aspect-ratio: 4/3; background-image: url(../img/main/image3.jpg); margin-top: 60px; height: fit-content; }


.rintro { background: #FDFDFC; padding: 130px 0 100px; overflow: hidden; }
.rintro .topbox { margin-left: 5%; width: 600px; height: 400px; background: #DFE3DB; }
.rintro .topbox> div { margin-left: -25px; transform: translateY(-58px); }
.rintro .controls { position: absolute; top: 160px; left: 50%; transform: translateX(-50%); display: flex; justify-content: flex-end; align-items: center; }
.rintro .controls> div { position: static; margin: 0; width: 40px; height: 40px; border-radius: 50%; background: #5E6855; }
.rintro .controls> div:hover { background: #8F9985; }
.rintro .controls .swiper-button-prev { margin-right: 25px; }
.rintro .controls> div::after { content: ""; }
.rintro .controls> div i { font-size: 24px; color: #fff;  }
.rintro .rimg-slide { width: 55%; aspect-ratio: 4/3; margin: -240px auto 60px; }
.rintro .rimg-slide div .s1 { background: url(../img/sub2/image1.jpg) no-repeat center/cover; }
.rintro .rimg-slide div .s2 { background: url(../img/sub2/image8.jpg) no-repeat center/cover; }
.rintro .rimg-slide div .s3 { background: url(../img/sub2/image15.jpg) no-repeat center/cover; }
.rintro .rimg-slide div .s4 { background: url(../img/sub2/image29.jpg) no-repeat center/cover; }
.rintro .rimg-slide div .s5 { background: url(../img/sub2/image30.jpg) no-repeat center/cover; }
.rintro .rimg-slide div .s6 { background: url(../img/sub2/image33.jpg) no-repeat center/cover; }
.rintro .rtxt-slide { width: 44%; margin: 0 auto; }
.rintro .rtxt-slide div div { position: relative; width: 100%; padding: 45px 100px 50px 100px; border-radius: 150px; border: 1px solid #5E6855; }
.rintro .rtxt-slide div div h2 { margin-bottom: 15px; }
.rintro .rtxt-slide div div a { position: absolute; bottom: 0; right: 100px; transform: translateY(50%); padding: 12px 20px; background: #FDFDFC; color: #5E6855; font-size: 20px; font-style: italic; font-family: "Bodoni Moda", serif; }
.rintro .rtxt-slide div div a::after { position: absolute; top: 50%; left: 20px; transform: translate(0, -50%); overflow: hidden; max-width: 0%; height: 20px; color: #DFE3DB; content: "view more"; transition: max-width .3s; }
.rintro .rtxt-slide div div a:hover::after { max-width: 100%; }


.eintro h1 { text-align: center; margin-bottom: 40px; }
.eintro> p { text-align: center; margin-bottom: 60px; }
.eintro ul { position: relative; }
.eintro ul::before { position: absolute; top: 15%; left: 50%; transform: translateX(-50%); content: ""; width: 52%; /*height: 85%;*/ background: url(../img/line.png) no-repeat center/contain; z-index: -1; }
.eintro ul::before { position: absolute; top: 15%; left: 50%; transform: translateX(-50%); content: ""; width: 48%; aspect-ratio: 1/3.2; background: url(../img/line.png) no-repeat center/contain; z-index: -1; }
.eintro ul li { display: flex; align-items: center; }
.eintro ul> :not(:last-child) { margin-bottom: 40px; }
.eintro ul> :nth-child(2n) { flex-direction: row-reverse; justify-content: end; text-align: right; }
.eintro ul li .imgbox { width: 40%; aspect-ratio: 1/1; }
.eintro ul :nth-child(2n+1) .imgbox { margin-right: 40px; }
.eintro ul :nth-child(2n) .imgbox { margin-left: 40px; }
.eintro ul li .img1 { border-radius: 150px; border-top-left-radius: 0; background-image: url(../img/sub3/1/image2.jpg); }
.eintro ul li .img2 { border-radius: 150px; background-image: url(../img/sub3/2/image1.jpg); }
.eintro ul li .img3 { border-radius: 50%; background-image: url(../img/sub3/3/image1.jpg); }
.eintro ul li .img4 { border-radius: 150px; background-image: url(../img/sub3/4/image2.jpg); }
.eintro ul li .img5 { border-radius: 50%; border-bottom-right-radius: 0; background-image: url(../img/sub3/5/image1.jpg); }
.eintro ul li div h2 { margin-bottom: 10px; }
.eintro ul li div p { margin-bottom: 20px; }
.eintro ul li div a { display: block; width: fit-content; padding: 12px 15px; background: #5E6855; color: #fff; font-size: 20px; font-style: italic; font-family: "Bodoni Moda", serif; }
.eintro ul li div a:hover { background: #DFE3DB; color: #5E6855; }
.eintro ul> :nth-child(2n) a { margin: 0 0 0 auto; }


@media screen and (max-width: 1440px) {
    .rintro .topbox { margin-left: 10%;}
    .rintro .rtxt-slide { width: 55%; }
}

@media screen and (max-width: 1024px) {
    main h1 { left: 40px; bottom: 60px; font-size: 40px; }

    .pintro div .lefts p { line-height: 1.8em; }
    .pintro div .lefts div a { font-size: 20px; }
    .pintro div .imgbox { margin-top: 80px; }

    .rintro .topbox { margin-left: 65px; }
    .rintro .rimg-slide { width: 70%; }
    .rintro .rtxt-slide { width: 70%; }
    .rintro .rtxt-slide div div { padding: 40px 40px 50px; border-radius: 80px; }
    .rintro .rtxt-slide div div p { line-height: 1.8em; }

    .eintro h1 { margin-bottom: 20px; }
    .eintro ul::before { width: 42%; aspect-ratio: 546/2001; top: 9%; }
}

@media screen and (max-width: 820px) {
    main h1 { left: 3%; width: 94%; font-size: 32px; }

    .pintro> div { flex-direction: column; }
    .pintro div .lefts { width: 90%; }
    .pintro div .lefts h1 { margin-bottom: 30px; }
    .pintro div .lefts div a { font-size: 16px; }
    .pintro div .imgbox { margin-top: -40px; width: 40%; aspect-ratio: 3/4; border-top-left-radius: 150px; border-top-right-radius: 150px; align-self: flex-end; }

    .rintro { padding: 60px 0; }
    .rintro .topbox { margin-left: calc(3% + 25px); width: 85%; }
    .rintro .topbox> div { transform: translateY(-45px); }
    .rintro .controls { top: 100px; }
    .rintro .controls .swiper-button-prev { margin-right: 15px; }
    .rintro .rimg-slide { width: 75%; margin: -280px auto 40px; }
    .rintro .rtxt-slide { width: 75%; }
    .rintro .rtxt-slide div div { border-radius: 60px; }
    .rintro .rtxt-slide div div a { font-size: 16px; }

    .eintro ul::before { width: 48%; }
    .eintro ul li .imgbox { flex-shrink: 0; }
    .eintro ul :nth-child(2n) .imgbox { margin-left: 30px; }
    .eintro ul :nth-child(2n+1) .imgbox { margin-right: 30px; }
    .eintro ul> :not(:last-child) { margin-bottom: 80px; }
    .eintro ul li div a { font-size: 16px; }
}

@media screen and (max-width: 601px) {
    main h1 { font-size: 24px; }

    .pintro div .lefts { width: 100%; }

    .rintro .topbox { margin: 0; aspect-ratio: 1.618/1; height: auto; }
    .rintro .topbox> div { margin-left: 2.55%; transform: none; }
    .rintro .topbox> div p { font-size: 12px; }
    .rintro .controls { top: 100px; }
    .rintro .controls> div { width: 30px; height: 30px;}
    .rintro .controls> div i { font-size: 16px; }
    .rintro .rimg-slide { width: 80%; margin: -120px auto 30px; }
    .rintro .rtxt-slide { width: 80%; }
    .rintro .rtxt-slide div div { border-radius: 10px; padding: 30px 25px 40px; }
    .rintro .rtxt-slide div div a { right: 20px; }

    .eintro ul::before { width: 65%; top: 10%; }
    .eintro ul li .imgbox { width: 50%; }
    .eintro ul :nth-child(2n) .imgbox { margin-left: 20px; }
    .eintro ul :nth-child(2n+1) .imgbox { margin-right: 20px; }
    .eintro ul li div p { display: none; }
    .eintro ul li div a { padding: 8px 12px; font-size: 14px; }
}

@media screen and (max-width: 375px) {
    .eintro ul::before { top: 8%; }
}

@media screen and (max-width: 360px) {
    .rintro .rimg-slide { margin: -60px auto 30px; }

    .eintro ul::before { width: 70%; top: 11%; }
}