@charset "utf-8";

.viewBtn{ margin: 50px auto 0; text-align: right;}
.viewBtn a{ display: inline-block;  position: relative; margin: 0 0 0 auto;}
.viewBtn a span{ display: block; font-family: 'MapoFlowerIsland'; font-size: 16px; text-align: center; padding: 5px 0;}
.viewBtn a::after{ content: ''; display: block; height: 1px; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0%;}
.viewBtn a:hover::after{ content:''; width: 100%; animation: line 0.5s; transition: ease-in-out 0.3s; background-color: #000;}

.mainBn{ height: auto;}
/* .mainBn{ height: auto;} */
.mainBnCenter{ width: 85%; aspect-ratio:4/3; background: url(../img/main/image2.jpg) no-repeat center/cover; margin: 20px auto;}
.mainBnTxt h2{ font-size: 21px;}

/* travelWrap */
#travelWrap{ display: flex; flex-direction: column; margin: 30px auto;}
#travelWrap .travelCon{ display: flex; padding: 30px 10px; border-top: 1px solid #e5e5e5;}
#travelWrap .travelCon:nth-of-type(even){ flex-direction: row-reverse;}
#travelWrap .travelCon:nth-of-type(1){ border-top: 0;}
.travelCon .travelImg{ width: 50%; aspect-ratio: 4/3; margin-right: 15px; background-color: #545454;}
.travelCon .travelImg.t1{ background: url(../img/sub6/image1.jpg) no-repeat center/cover;}
.travelCon .travelImg.t2{ background: url(../img/sub6/image2.jpg) no-repeat center/cover;}
.travelCon .travelImg.t3{ background: url(../img/sub6/image3.jpg) no-repeat center/cover;}
.travelCon .travelImg.t4{ background: url(../img/sub6/image4.jpg) no-repeat center/cover;}
.travelCon .travelImg.t5{ background: url(../img/sub6/image5.jpg) no-repeat center/cover;}
.travelCon .travelImg.t6{ background: url(../img/sub6/image6.jpg) no-repeat center/cover;}
.travelCon .travelImg.t7{ background: url(../img/sub6/image7.jpg) no-repeat center/cover;}
.travelCon .travelImg.t8{ background: url(../img/sub6/image8.jpg) no-repeat center/cover;}
.travelCon .travelImg.t9{ background: url(../img/sub6/image9.jpg) no-repeat center/cover;}
.travelCon .travelImg.t10{ background: url(../img/sub6/image10.jpg) no-repeat center/cover;}
.travelCon .travelConTxt{ width: 50%; margin-left: 15px;}
#travelWrap .travelCon:nth-of-type(even) .travelConTxt{ margin-right: 15px; margin-left: 0;}
#travelWrap .travelCon:nth-of-type(even) .travelImg{ margin-left: 15px; margin-right: 0;}
.travelConTxt h3{ font-family: 'MapoFlowerIsland'; font-size: 24px; font-weight: bold; color: #000; margin-bottom: 10px;}
.travelConTxt h4{ font-family: 'Pretendard'; font-size: 14px; font-weight: 500; color: #545454; margin-bottom: 30px; }
.travelConTxt p{ font-family: 'Pretendard'; font-weight: 400; font-size: 14px; color: #7e7e7e;}

@media all and (max-width: 768px){
    #travelWrap .travelCon{ flex-direction: column;}
    #travelWrap .travelCon:nth-of-type(even){ flex-direction: column;}
    .travelCon .travelConTxt{ width: 100%; margin-left: 0; margin-top: 20px;}
    .travelCon .travelImg{ width: 100%; aspect-ratio: 16/9; margin-right: 0; }
    #travelWrap .travelCon:nth-of-type(even) .travelConTxt{ margin-right: 0;}
    #travelWrap .travelCon:nth-of-type(even) .travelImg{ margin-left: 0;}
}

@media all and (max-width: 520px){
    .mainBn{ height: auto;}
    .mainBnCenter{ display: none; aspect-ratio: 16/9; margin: 30px auto;}
    .mainBnBottom{ display: none;}
    .mainBnTxt h2{ margin-top: 30px;}
}