@charset "utf-8";
.mainBn{height: auto;}

/* story */
#story{ display: flex; justify-content: space-between; position: relative; margin: 30px auto 70px;}
#story .storyImgList{ width: 70%; display: flex; flex-direction: column; }
.storyImgList .storyImgCon{ width: 100%; aspect-ratio: 16/9; margin-bottom: 20px; background-color: #363636;}
.storyImgList .storyImgCon:last-child{ margin-bottom: 0;}
.storyImgList .storyImgCon.img1{ background: url(../img/sub1/image1.jpg) no-repeat center/cover;}
.storyImgList .storyImgCon.img2{ background: url(../img/sub1/image2.jpg) no-repeat center/cover;}
.storyImgList .storyImgCon.img3{ background: url(../img/sub1/image3.jpg) no-repeat center/cover;}
.storyImgList .storyImgCon.img4{ background: url(../img/sub1/image4.jpg) no-repeat center/cover;}
.storyImgList .storyImgCon.img5{ background: url(../img/sub1/image5.jpg) no-repeat center/cover;}
.storyImgList .storyImgCon.img6{ background: url(../img/sub1/image6.jpg) no-repeat center/cover;}
.storyImgList .storyImgCon.img7{ background: url(../img/sub1/image7.jpg) no-repeat center/cover;}
.storyImgList .storyImgCon.img8{ background: url(../img/sub1/image8.jpg) no-repeat center/cover;}
.storyImgList .storyImgCon.img9{ background: url(../img/sub1/image9.jpg) no-repeat center/cover;}
.storyImgList .storyImgCon.img10{ background: url(../img/sub1/image10.jpg) no-repeat center/cover;}
.storyImgList .storyImgCon.img11{ background: url(../img/sub1/image11.jpg) no-repeat center/cover;}
.storyImgList .storyImgCon.img12{ background: url(../img/sub1/image12.jpg) no-repeat center/cover;}
.storyImgList .storyImgCon.img13{ background: url(../img/sub1/image13.jpg) no-repeat center/cover;}
.storyImgList .storyImgCon.img14{ background: url(../img/sub1/image14.jpg) no-repeat center/cover;}
.storyImgList .storyImgCon.img15{ background: url(../img/sub1/image15.jpg) no-repeat center/cover;}
.storyImgList .storyImgCon.img16{ background: url(../img/sub1/image16.jpg) no-repeat center/cover;}
.storyImgList .storyImgCon.img17{ background: url(../img/sub1/image17.jpg) no-repeat center/cover;}
.storyImgList .storyImgCon.img18{ background: url(../img/sub1/image18.jpg) no-repeat center/cover;}
.storyImgList .storyImgCon.img19{ background: url(../img/sub1/image19.jpg) no-repeat center/cover;}
.storyImgList .storyImgCon.img20{ background: url(../img/sub1/image20.jpg) no-repeat center/cover;}

#story .storyTxtWrap{ width: 50%; height: 600px; position: sticky; top: 130px; right: 0; padding: 0 0px 0 40px;}
#story .storyTit{ margin-bottom: 30px;}
.storyTit h3{ font-family: 'MapoFlowerIsland'; font-size: 16px; color: #545454; }
.storyTit h2{ font-family: 'MapoFlowerIsland'; font-size: 24px;;}

#story .storyTxt{ margin-top: 20px;}
.storyTxt p{ font-size: 14px; color: #545454;}
#story .storyTxt:last-child p{ margin-bottom: 10px;}

/* 반응형 */
@media all and (max-width: 768px){
    #story{ flex-direction: column-reverse; margin: 0 auto 50px;}
    #story .storyImgList{ width: 100%;}
    .storyImgList .storyImgCon{ aspect-ratio: 16/9;}
    #story .storyTxtWrap{ width: 100%; height: auto; margin-bottom: 30px; padding: 0; position: static;}
}