/* PC 기본 */
.mainImg{ width: 100%; min-width: 100px; height: 600px; min-height: 600px; background-image: url(../img/travel.png); background-repeat: no-repeat; background-size: cover; background-position: center center; padding: 190px 0; box-sizing: border-box; text-align: center;  }
.pcsubText{ font-size: 16px; color: #fff; line-height: 30px; padding: 20px 0;}


.travelsCon{ width: 100%; overflow: hidden; padding: 120px 0 100px; box-sizing: border-box; position: relative; }
.travelsCon ul{ width: 85%; margin-left: auto; margin-right: auto; overflow: hidden; }
.travelsCon figure{ position: relative; width: 100%; height: 260px; overflow: hidden; }
.travelsCon li{ width: 31%; height: 350px; float: left; margin: 0 10px 10px; }
.travelsCon li img{ width: 100%; height: 260px; object-fit: cover; transition: 0.3s;}


.travelsCon .overbg{ width: 100%; height: 260px; background-color: rgba(0,0,0,0.7); position: absolute; top: 0; left: 0; opacity: 0; transition: 0.3s; background-image: url(../img/travel/9.png); background-repeat: no-repeat; background-position: center; }

.travelsCon a:hover img, .product a:focus img{ transform: scale(1.1,1.1); }
.travelsCon a:hover .overbg{ opacity: 1;}

.travelsCon .travelstext{ background-color: #fff; width: 100%; height: 90px; padding: 10px 0; line-height: 20px; box-sizing: border-box; margin-bottom: 10px; }
.travelstext p{ color: #d9a76a; font-size: 15px; font-family: NotoSansCJKkr; padding-top: 15px;}
.travelstext h3{ color: #333; font-size: 18px; font-family: Montserrat; font-weight: 600; padding-top: 10px; }
.motravelsTitle{ display: none; }
.mosubText{ display: none;}

@media screen and (max-width: 1023px){
    .travelsCon ul{ width: 95%; }
    .travelsCon li{ width: 30%;}
}


@media screen and (max-width: 749px) {
    .mainImg{ width: 100%; height: 355px; min-height: 355px;  padding: 80px 0;  }
    
    .motravelsTitle{ width: 220px; display: block; position: relative; left: 0; right: 0; margin: 0 auto;}
    .pctravelsTitle{ display: none;}
    .pcsubText{ display: none; }
    .mosubText{  display: block; font-size: 14px; color: #fff; line-height: 22px; padding: 20px 5px; }
    
    
    .travelsCon{ padding: 30px 0 45px; }
    .travelsCon ul{ width: 95%; }
    .travelsCon figure{ height: 170px; }
    .travelsCon li{ width: 100%; height: 240px; margin: 0; }
    
    .travelsCon .overbg{ height: 170px;  }
    
    .travelsCon li img{ width: 100%; height: 170px; object-fit: cover; transition: 0.3s;}
    
    .travelstext p{ color: #d9a76a; font-size: 13px; font-family: NotoSansCJKkr; padding-top: 10px;}
    .travelstext h3{ color: #333; font-size: 19px; font-family: Montserrat; font-weight: 600; padding-top: 8px; }

}
/* 560px 미만 (필요 없으면 사용안해도 무관) */
@media screen and (max-width: 559px) {
    .mosubText{  display: block; font-size: 13px; color: #fff; line-height: 22px; padding: 20px 5px; }
    .travelstext h3{ color: #333; font-size: 15px; font-family: Montserrat; font-weight: 600; padding-top: 3px; }
}