@charset "utf-8";
main .main-slide div .s1 { background: url(../img/sub1/image1.jpg) no-repeat center/cover; }
main .main-slide div .s2 { background: url(../img/sub1/image2.jpg) no-repeat center/cover; }
main .main-slide div .s3 { background: url(../img/sub1/image3.jpg) no-repeat center/cover; }
main .main-slide div .s4 { background: url(../img/sub1/image4.jpg) no-repeat center/cover; }
main .main-slide div .s5 { background: url(../img/sub1/image5.jpg) no-repeat center/cover; }
main .main-slide div .s6 { background: url(../img/sub1/image6.jpg) no-repeat center/cover; }
main .main-slide div .s7 { background: url(../img/sub1/image7.jpg) no-repeat center/cover; }
main .main-slide div .s8 { background: url(../img/sub1/image8.jpg) no-repeat center/cover; }
main .main-slide div .s9 { background: url(../img/sub1/image9.jpg) no-repeat center/cover; }

main .contents p { margin: 0; }
main .contents h1 { margin-bottom: 80px; color: #FDFDFD; text-align: center; }

.pintro{ background: #E8ECF2;}
.pintro ul> :last-child{ bottom: -80px;}

#storyImgWrap{ position: relative; padding: 0; margin: 60px 0 0; }
#storyImgWrap .imgConWrap{ margin-bottom: 240px; }
.imgConWrap .imgCon{ position: relative; top: 0; left: 160px; width: 51.25rem; aspect-ratio: 1.618/1; background-color: aqua; z-index: 5;}
.imgConWrap .dayImgCon{ width: 100%; height: 100%; background: url(../img/sub1/image5.jpg) no-repeat center/cover; }
.imgConWrap .backConWrap{ display: flex; justify-content: space-between; align-items: flex-end; width: 61.25rem; position: relative; z-index: 3;}
.backConWrap::before{ content: ''; display: block; width: 30rem; aspect-ratio: 1; background-color: #E8ECF2; position: absolute; bottom: -50%; transform: translateY(50%); left: 0; border-top-right-radius: 50%; border-bottom-right-radius: 50%;}
.backConWrap .decoCon{ width: auto; display: flex; justify-content: space-between; align-items: center; position: absolute; right: 0; bottom: -30px;}
.decoCon p{ color: rgba(85, 85, 85, 0.4);}
.decoCon .decoLine{ width: 180px; height: 1px; background: rgba(85, 85, 85, 0.4); margin: 0 20px; }

.imgConWrap2 { margin-top: 280px; display: flex; justify-content: flex-end; align-items: flex-end; flex-direction: column;  margin: 0 160px 0 auto; position: relative;}
.imgConWrap2 .imgCon{ position: relative; top:0px; right: 0px; width: 51.25rem; aspect-ratio: 1.618/1; background-color: aqua; z-index: 5; display: flex; justify-content: flex-end;}
.imgConWrap2 .nightImgCon{ width: 100%; height: 100%; background: url(../img/sub1/image9.jpg) no-repeat center/cover; }
.imgConWrap2 .backConWrap2{ display: flex; justify-content: space-between; align-items: flex-end; z-index: 3;}
.backConWrap2::after{ content: ''; display: block; width: 30rem; aspect-ratio: 1; background-color: #E8ECF2; position: absolute; top: -25%; right: -160px; border-top-left-radius: 50%; border-bottom-left-radius: 50%;}
.backConWrap2 .decoCon{ width: 47%; display: flex; justify-content: flex-start; align-items: center; position: absolute; right: 0; bottom: -30px;}

.imgConWrap3{ width: calc(100% - 320px); margin: 130px auto 0;}
.imgConWrap3 .imgConLong{ width: 100%; aspect-ratio: 1600/484; background: url(../img/sub1/image1.jpg) no-repeat center/cover;}

#location{ width: calc(100% - 320px); margin: 0 auto; display: flex; justify-content: space-between;  align-items: flex-end; }
#location .mapCon{ width: 50%; }
#location .mapTxtWrap{ width: 50%; display: flex; flex-direction: column; align-items: flex-end; gap: 30px 0;}
.mapTxtWrap h3{font-family: 'SchoolPeaceOfMindNature'; font-size: 45px; color: #0C073B; text-align: right; line-height: 1.5em; }
.mapTxtWrap p{ text-align: right;}


/* 지도 */
.root_daum_roughmap .cont{ display: none;}
#daumRoughmapContainer1774249568552{ width: 100%;}


/* 반응형 */
@media all and (max-width: 1440px){
    .imgConWrap3{ width: 94%;}
    #location{ width: 94%;}
}
@media all and (max-width: 1024px){
    .backConWrap::before{ width: 20rem;}
    .backConWrap2::after{ width: 20rem;}

    .imgConWrap .imgCon{ left: 60px;}
    .backConWrap .decoCon{ right: 180px;}
    .imgConWrap .imgCon{ width: 46.25rem;}
    .imgConWrap2 .imgCon{ width: 46.25rem;}
    .backConWrap2 .decoCon{ width: auto;}
    .imgConWrap2{ margin: 0 120px 0 auto;}
    .backConWrap2::after{ right: -120px;}

    .imgConWrap3{ width: 100%;}
}

@media all and (max-width: 768px){
    .imgConWrap .imgCon{ width: 40.25rem;}
    .imgConWrap2 .imgCon{ width: 40.25rem;}

    .backConWrap .decoCon{ right: 63px;}
    .imgConWrap2{ margin: 0 67px 0 auto;}
    .backConWrap2::after{ right: -67px;}

    #location{ width: calc(100% - 40px);}
    .imgConWrap .backConWrap{ width: 100%;}

    #location{ gap: 0 20px;}
    #location .mapTxtWrap{ width: 35%;}
    #location .mapCon{ width: 65%;}

    .pintro::before{ height: 280px;}
    .mapTxtWrap h3{ font-size: 36px;}
}
@media all and (max-width: 520px){
    .pintro .img1{ width: 94%;}
    .pintro ul{ width: 85%;}
    .pintro ul :nth-child(2) p{ text-align: left;}
    .pintro::before{ top: 25%;}
    .pintro ul .tit{ margin-bottom: 60px;}

    .imgConWrap .imgCon{ width: 77%;}
    .imgConWrap2 .imgCon{ width: 85%;}

    #storyImgWrap{ margin: 0;}
    .backConWrap .decoCon{ right: 40px;}
    .backConWrap2::after{ width: 10rem;}
    .backConWrap::before{ width: 10rem; transform: translateY(40%);}
    #storyImgWrap .imgConWrap{ margin-bottom: 120px;}

    .backConWrap2::after{right: -35px;}
    .imgConWrap2{ margin: 0 36px 0 auto;}
    

    #location{ flex-direction: column; gap: 20px 0;}
    #location .mapCon{ width: 100%;}
    #daumRoughmapContainer1774249568552{ height: 360px;}
    #location .mapTxtWrap{ width: 100%; align-items: flex-start;}
    .mapTxtWrap p{ text-align: left;}
    .backConWrap2 .decoCon{ left: 15%;}

    main .contents h1{ margin-bottom: 40px;}
    #location .mapTxtWrap{ gap: 10px 0}
    .mapTxtWrap p{ margin-bottom: 20px;}
}

@media all and (max-width: 375px){
    .pintro::before{ top: 22%;}
    .imgConWrap .imgCon{ left: 10px; width: 95%;}
    .backConWrap2::after{ right: -10px;}
    .imgConWrap2{ margin: 0 10px 0 auto;}
    .imgConWrap2 .imgCon{ width: 95%}
    .backConWrap .decoCon{ right: 10px;}
    .backConWrap2 .decoCon{ left: 20px;}
}

@media all and (max-width: 320px){
    .imgConWrap2 .imgCon{ width: 97%;}

    .pintro::before { top: 18%; width: 80%;}
}