@charset "utf-8";

/* mainBn */
#mainBn{ height: calc(100vh - 100px); display: flex; border-bottom: 1px solid #6a2f2b;}
#mainBn .subMainBnSwip{ width: 100%; margin: 0; display: flex; margin: 30px 60px;}
.subMainBnSwip .swiper-slide{ background: #6a2f2b; width: 50%;}
.swiper-button-next:after, .swiper-button-prev:after{ font-size: 36px !important;}
/* .subMainBnSwip .swiper-slide:nth-child(3n){ background: #6a2f2b; width: 70%;} */
.subMainBnSwip .swiper-slide.mb1{ background: url(../img/sub1/image1.jpg) no-repeat center/cover;}
.subMainBnSwip .swiper-slide.mb2{ background: url(../img/sub1/image2.jpg) no-repeat center/cover;}
.subMainBnSwip .swiper-slide.mb3{ background: url(../img/sub1/image3.jpg) no-repeat center/cover;}
.subMainBnSwip .swiper-slide.mb4{ background: url(../img/sub1/image4.jpg) no-repeat center/cover;}
.subMainBnSwip .swiper-slide.mb5{ background: url(../img/sub1/image5.jpg) no-repeat center/cover;}
.subMainBnSwip .swiper-slide.mb6{ background: url(../img/sub1/image6.jpg) no-repeat center/cover;}
.subMainBnSwip .swiper-slide.mb7{ background: url(../img/sub1/image7.jpg) no-repeat center/cover;}
.subMainBnSwip .swiper-slide.mb8{ background: url(../img/sub1/image8.jpg) no-repeat center/cover;}
.subMainBnSwip .swiper-slide.mb9{ background: url(../img/sub1/image9.jpg) no-repeat center/cover;}
.subMainBnSwip .swiper-slide.mb10{ background: url(../img/sub1/image10.jpg) no-repeat center/cover;}
.subMainBnSwip .swiper-slide.mb11{ background: url(../img/sub1/image11.jpg) no-repeat center/cover;}
.subMainBnSwip .swiper-slide.mb12{ background: url(../img/sub1/image12.jpg) no-repeat center/cover;}
.subMainBnSwip .swiper-slide.mb13{ background: url(../img/sub1/image13.jpg) no-repeat center/cover;}
.subMainBnSwip .mainBnPage{ color: #fff;;}
.swiper-pagination-current, .swiper-pagination-total{color: #fff;}
.swiper-button-prev:after, .swiper-button-next:after{ color: #fff;}

/* con1 */
#secCon1{ padding: 50px 60px; display: flex; justify-content: space-between; flex-direction: column;}
#secCon1 .con1Wrap{ display: flex; justify-content: space-between; }
#secCon1 .con1Wrap .topCon{ width: 33.333%; position: relative;}
.topCon:last-child{ padding: 30px;}
.topCon p{ text-align: right; margin-bottom: 10px;}
.topCon p span{ display: block; font-size: 14px;}
.topCon h2{ font-family: "Bodoni Moda", serif; font-size: 150px; color: #212529; }
.topCon .centImg{ width: 100%; aspect-ratio: 1; background: url(../img/sub1/image2.jpg) no-repeat center/cover; }
.con1Wrap:last-child{ padding-top: 50px; }
.con1Wrap .bottomImg.imgL{ width: 30%; aspect-ratio: 1; background: url(../img/sub1/image10.jpg) no-repeat center/cover; margin-right: 15px;}
.con1Wrap .bottomImg.imgR{ width: 70%; aspect-ratio: 16/6; background: url(../img/sub1/image3.jpg) no-repeat center/cover; margin-left: 15px;}

.topCon .stroyResBtn{ position: absolute; bottom: 30px; right: 30px; padding: 0 10px; display: inline-block; }
.topCon .stroyResBtn::before{ content:''; display: block; width: 0%; height: 1px; background-color: #6a2f2b; position: absolute; top: 50%; left: 0; transition: all 0.3s ease-in-out;}
.topCon .stroyResBtn:hover::before{ content:''; display: block; width: 100%; height: 1px; background-color: #6a2f2b; position: absolute; top: 50%; left: 0; }
.topCon .stroyResBtn a{ display: block; font-size: 16px;  color: #6a2f2b;}

/* well point */
#wellPoint{ border-top: 1px solid #6a2f2b; border-bottom: 1px solid #6a2f2b; display: flex; justify-content: flex-start;}
#wellPoint .wellTit{  position: relative;}
.wellTit h2{ text-align: center; height: 100%; writing-mode: sideways-lr; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: "Bodoni Moda", serif; padding: 0 10px; }
.wellTit h2::before{ content: ''; display: block; width: 1px; height: 30%; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); background-color: #6a2f2b;}
.wellTit h2::after{ content: ''; display: block; width: 1px; height: 30%; position: absolute; top: 0; left: 50%; transform: translateX(-50%); background-color: #6a2f2b;}
#wellPoint .wellConWrap{ margin-right: 30px; width: calc( 100% - 60px); padding: 150px 60px; background: url(../img/sub1/image13.jpg) no-repeat center/cover; position: relative; }
.wellConWrap .blackBg{ pointer-events: none; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7);}

.wellConWrap .conTit{ padding: 0 30px; position: relative; z-index: 11; margin-bottom: 80px;}
.conTit h2{ font-family: "Bodoni Moda", serif; font-size: 48px; color: #fff; }
.wellConWrap .conTxtWrap{ padding: 0 30px; display: flex; justify-content: space-between; position: relative; z-index: 11;}
.wellConWrap .conTxtWrap .textCon{ width: 33.333%;}
.conTxtWrap .textCon h3{ font-family: "Bodoni Moda", serif; font-size: 24px; color: #fff; margin-bottom: 30px;  }
.conTxtWrap .textCon p span{ display: block; font-size: 14px; color:#fff;}

/* 반응형 */
@media all and (max-width: 1024px){
    #mainBn .subMainBnSwip{ margin: 30px;}
    #secCon1{ padding: 50px 30px;}
    #secCon1 .con1Wrap .topCon:first-child{width: 24%;}
    .topCon h2{ font-size: 72px;}
    .topCon:last-child{ padding: 10px;}
    .topCon .stroyResBtn{ bottom:10px; right: 10px;}

    #wellPoint .wellConWrap{ padding: 80px 30px;}
    .conTit h2{ font-size: 36px;}
    .conTxtWrap .textCon h3{ font-size: 18px;}
}

@media all and (max-width: 768px){
    #secCon1 .con1Wrap{ flex-direction: column;}
    #secCon1 .con1Wrap:last-child{ flex-direction: row;}
    #secCon1 .con1Wrap .topCon{ width: 100%;}
    #secCon1 .con1Wrap .topCon:first-child{ width: 100%;}
    .topCon h2{ display: inline-block;}
    .topCon h2:last-child{ margin-left: 10px;}
    .topCon .centImg{ aspect-ratio: 4/3;}
    .topCon:last-child{ padding: 30px 0;}
    .topCon p{ text-align: left;}
    .topCon .stroyResBtn{ bottom: 0; right: 0;}
    .con1Wrap .bottomImg.imgL{ margin-right: 10px;}
    .con1Wrap .bottomImg.imgR{ margin-left: 10px;}

    #wellPoint .wellTit{ display: none;}
    #wellPoint .wellConWrap{ margin: 0; width: 100%; padding: 80px 20px; }
    .wellConWrap .conTxtWrap{ flex-direction: column;}
    .conTxtWrap .textCon{ margin-bottom: 30px;}
    .conTxtWrap .textCon h3{margin-bottom: 10px;}

    
}
@media all and (max-width: 520px){
    #mainBn{ height: 60vh;}
    #mainBn .subMainBnSwip{ margin: 0;}
    #secCon1{ padding: 30px 20px;}
    .con1Wrap:last-child{ padding-top: 30px;}
    .con1Wrap .bottomImg.imgR{ aspect-ratio: 16/9;}
    /* #secCon1{ } */

    .wellConWrap .conTit{ padding: 0;}
    .wellConWrap .conTxtWrap{ padding: 0;}
    .wellConWrap .conTit{ margin-bottom: 40px;}
}