/* sub-visual */
.sub-visual {position: relative; margin: 0 auto; height: 541px; overflow: hidden;}
.sub-visual .bg {position: absolute; left: 0; top: 0; width: 100%; height: calc(100% + 2px); background-position: center; background-repeat: no-repeat; background-size: cover; transition: .5s; background-image: url('../img/sub_bg1.jpg');}
.sub-visual.sub1 .bg {background-image: url('../img/sub_bg1.jpg');}
.sub-visual.sub2 .bg {background-image: url('../img/sub_bg2.jpg');}
/* .sub-visual.sub3 .bg {background-image: url('../img/sub_bg3.jpg');}
.sub-visual.sub4 .bg {background-image: url('../img/sub_bg4.jpg');} */
.sub-visual.sub5 .bg {background-image: url('../img/sub_bg5.jpg');}

.sub-visual:hover .bg {transform: scale(1.1);}
.sub-visual .page-title {position: absolute; left: 50%; top: 45%; transform: translateX(-50%); z-index:2; text-align: center;}
.sub-visual h3 {position: relative; font-size: 70px; font-weight: 700; color: #fff; font-family: 'GmarketSans';}

/* media query */
@media screen and (max-width: 1300px) {

}

@media screen and (max-width: 1024px) {
    .sub-visual {height: 300px;}
    .sub-visual .page-title {top: 49%;}
    .sub-visual h3 {font-size: 40px;}
    .sub-visual .bg{height: calc(100% + 2px);}
}


@media screen and (max-width: 640px) {
    .sub-visual {height: 250px;}
    .sub-visual h3 {font-size: 40px;}

}