@charset "utf-8";

.nonbr{ display: block;}

#sub3sec1{ position: relative;  padding: 0px 60px 0px;}
#sub3sec1 .introTop{ padding: 30px 0; display: inline-block;}

#sub3sec1 .sub3mainWrap{ display: flex; justify-content: space-between; padding-bottom: 80px;}
.sub3mainWrap .mainHalf{ width: 100%; padding: 0;}
.mainHalf .mainBnCon{ width: 100%; aspect-ratio: 16/3; background: url(../img/main/image4.jpg) no-repeat center/cover; display: flex; align-items: flex-end;}
.mainBnCon .mainBnConIn{ width: 100%; height: auto; padding: 0px 0 60px 40px;}
.mainBnConIn h2{ font-family: "Cormorant Garamond", serif; font-size: 42px; font-weight: 500; color: #f2f4e6; line-height: 1.25em; margin-bottom: 50px; text-shadow: 2px 3px 2px rgba(10, 10, 10, 0.7);}
/* .mainBnConIn .moreScroll{ margin-top: ;} */
.mainBnConIn .moreScroll span{ display: inline-block; color: #f2f4e6; padding-bottom: 10px; font-family: "Nunito", sans-serif; font-size: 16px; font-weight: 400; }
.mainBnConIn .moreScroll::after{ content: ""; display: block; width: 240px; height: 2px; background: #f2f4e6; transition: all ease-in-out; animation: moreScroll 2s ease-in-out Infinite Alternate;}

@keyframes moreScroll{
    from{ width: 0px; }
    to{ width: 20%; }

}

.introLogo a img{ width: 150px;}

/* travelLstWrap */
#travelLstWrap{ position: relative; padding: 0 60px 80px; display: flex; justify-content: space-between; flex-direction: column; }
#travelLstWrap::before{ content: ""; display: block; width: 50px; height: 3px; background-color: #886d5a; 
margin: 0 auto;} 
#travelLstWrap .travelLstCon{ display: flex; justify-content: space-between; background-color: #e3e1d5; margin: 30px 0; padding: 50px;}
#travelLstWrap .travelLstCon:nth-child(2n){ flex-direction: row-reverse;}

.travelLstCon .travelimgCon{ width: 50%; margin-right:20px;}
.travelLstCon:nth-child(2n) .travelimgCon{ margin-left: 20px;}
.travelimgCon .travelImg{ width: 100%; aspect-ratio: 16/9; border-radius: 20px;}
.travelimgCon .travelImg.travel1{ background: url(../img/sub5/image1.jpg) no-repeat center/cover;}
.travelimgCon .travelImg.travel2{ background: url(../img/sub5/image2.jpg) no-repeat center/cover;}
.travelimgCon .travelImg.travel3{ background: url(../img/sub5/image3.jpg) no-repeat center/cover;}
.travelimgCon .travelImg.travel4{ background: url(../img/sub5/image4.jpg) no-repeat center/cover;}
.travelimgCon .travelImg.travel5{ background: url(../img/sub5/image5.jpg) no-repeat center/cover;}
.travelimgCon .travelImg.travel6{ background: url(../img/sub5/image6.jpg) no-repeat center/cover;}
.travelimgCon .travelImg.travel7{ background: url(../img/sub5/image7.jpg) no-repeat center/cover;}
.travelimgCon .travelImg.travel8{ background: url(../img/sub5/image8.jpg) no-repeat center/cover;}
.travelimgCon .travelImg.travel9{ background: url(../img/sub5/image9.jpg) no-repeat center/cover;}
.travelimgCon .travelImg.travel10{ background: url(../img/sub5/image10.jpg) no-repeat center/cover;}
.travelimgCon .travelImg.travel11{ background: url(../img/sub5/image11.jpg) no-repeat center/cover;}
.travelimgCon .travelImg.travel12{ background: url(../img/sub5/image12.jpg) no-repeat center/cover;}
.travelimgCon .travelImg.travel13{ background: url(../img/sub5/image13.jpg) no-repeat center/cover;}
.travelimgCon .travelImg.travel14{ background: url(../img/sub5/image14.jpg) no-repeat center/cover;}
.travelimgCon .travelImg.travel15{ background: url(../img/sub5/image15.jpg) no-repeat center/cover;}

.travelLstCon .travelTxtWrap{ width: 50%; display: flex; justify-content: space-around; flex-direction: column;}
.travelTxtWrap .travelTit h2{ font-family: 'SUIT Variable', sans-serif; font-size: 24px; font-weight: 500; color: #886d5a;}
.travelTxtWrap .travelTit h3{ font-family: 'SUIT Variable', sans-serif; font-size: 14px; font-weight: 300; }
.travelTxtWrap .travelTxt p{ font-family: 'SUIT Variable', sans-serif; font-size: 14px; font-weight: 400; }
.travelTxtWrap .travelDecoNum h2{ font-family: 'singlong'; font-size: 30px; color:#886d5a; opacity: .3; text-align: right;}

.travelLstCon:nth-child(2n) .travelTxtWrap .travelDecoNum h2{ font-family: 'singlong'; font-size: 30px; color:#886d5a; opacity: .3; text-align: left;}


/* 반응형 */
@media all and (max-width: 1440px){

    /* #sub3sec1{ padding: 0 60px 60px;} */
    .sub3mainWrap .mainHalf{ width: 49%;}
    .mainConWrap .mainConTit{ padding-right: 0;}
    .mainHalf .mainBnCon{width: 100%;}
    .mainBnCon .mainBnConIn{ padding: 0 0 30px 20px;}
    .mainBnConIn h2{ margin-bottom: 40px; font-size: 30px;}
    .mainConTit .mainTitTxt{ padding-right: 0px; margin: 15px 0;}
    .mainConWrap .mainCenterSwip{ aspect-ratio: 16/9; margin-bottom: 15px;}
    .mainTxtwrap{ padding-right: 0px;}
    .mainConTit .mainTitTxt p{ font-size: 13px;}
    .mainTxtwrap p{ font-size: 13px;}
 }
@media all and (max-width: 1024px){

    #sub3sec1{ padding: 0 30px;}
    #sub3sec1 .sub3mainWrap{ flex-direction: column;}
    .sub3mainWrap .mainHalf{ width: 100%;}
    .sub3mainWrap .mainHalf:first-child{ margin-bottom: 30px;}
    .mainHalf .mainBnCon{ aspect-ratio: 16/5; }
    .mainBnConIn h2{ margin-bottom: 20px;}
    .sub3mainWrap .mainHalf{ margin-bottom: 50px;}
    .mainConTit .mainTitTxt{ padding-right: 30px;}
    .mainTxtwrap{ padding-right: 30px;}

    #travelLstWrap{ padding: 0 30px 80px;}
    #sub3sec1 .sub3mainWrap{ padding: 0;}
    #travelLstWrap .travelLstCon{ padding: 30px; margin: 10px 0;}
    
}

@media all and (max-width: 768px){

    .introLogo a img{ width: 110px;}
    .mainConWrap .mainConTit h2{ font-size: 30px;}

    #travelLstWrap .travelLstCon{ flex-direction: column;}
    #travelLstWrap .travelLstCon:nth-child(2n){ flex-direction: column;}
    .travelLstCon .travelimgCon{ width: 100%;}
    .travelLstCon .travelTxtWrap{ width: 100%;}
    .travelLstCon .travelimgCon{ margin-right: 0; margin-bottom: 20px;}
    .travelLstCon:nth-child(2n) .travelimgCon{ margin-left: 0;}
}
@media all and (max-width: 520px){
    
    #sub3sec1{ padding:  0 20px;}

    .nonbr{ display: none;}
    .mainHalf .mainBnCon{ aspect-ratio: 16/7;}
    .mainBnConIn h2{ margin-bottom: 0; font-size: 24px;}
    .mainBnCon .mainBnConIn{ padding: 0 0 30px 10px;}
    .mainConWrap .mainConTit h2{ font-size: 24px;}

    #travelLstWrap{ padding:  0 20px 60px;}
    #travelLstWrap::before{ display: none; margin-bottom: 20px;}
    
}