/* content css */
.sub_visual {position: relative; display: flex; align-items: center; width: calc(100% - 52px); min-height: 500px; padding: 50px 0; margin: 95px auto 0;}
.sub_visual .sub_inner {width: 100%; max-width: 1540px; padding: 0 50px; margin: 0 auto;}
.sub_visual .bg {position: absolute; top: 0; left: 50%; width: 100%; height: 100%; overflow: hidden; transform: translateX(-50%); border-radius: 20px; z-index: -1;}
.sub_visual .bg::before {content: ''; position: absolute; inset: 0; background: center / cover no-repeat; transform: scale(1); transition: transform .5s ease;}

/* bg */
.sub_visual:hover .bg::before {transform: scale(1.1);}
.sub_visual.sub2 .bg::before {background-image: url('../img/sub_visual_bg1.jpg');}
.sub_visual.sub3 .bg::before {background-image: url('../img/sub_visual_bg2.jpg');}
.sub_visual.sub4 .bg::before {background-image: url('../img/sub_visual_bg3.jpg');}

/* h3 */
.sub_visual h3 {position: relative; top: -11px; margin-bottom: 120px; font-size: 80px; font-weight: 700; color: #fff; text-align: center;}
.sub_visual h3::after {content: ''; position: absolute; left: 50%; bottom: -93px; width: 1px; height: 70px; background: rgba(225, 225, 225, .5);}

/* menu */
.sub_visual .menu {display: flex; justify-content: center; align-items: center; position: relative; z-index: 1;}
.sub_visual .menu > li {position: relative; }
.sub_visual .menu > li button {display: flex; justify-content: center; align-items: center; width: 330px; height: 55px; padding: 0 30px; border-radius: 10px; }
.sub_visual .menu > li:nth-child(1) button {background: rgba(255, 255, 255, .25); }
.sub_visual .menu > li:nth-child(2) button {background: #04056b; }
.sub_visual .menu > li button span {font-size: 18px; font-weight: 400; color: #fff; }
.sub_visual .menu > li button .arrow {width: 9px; height: 6px; margin-left: 18px; flex-shrink: 0; background: url("../img/menu_arrow.png") center no-repeat;}

/* next-depth */
.sub_visual .next-depth {display: none; position: absolute; top: 100%; left: 0; width: 100%;}
.sub_visual .next-depth ul {margin-top: 10px; padding: 0 25px; border-radius: 10px; background: rgba(0, 0, 0, .5);}
.sub_visual .next-depth li {padding: 12.5px 0; font-size: 16px; font-weight: 400; text-align: center; color: #fff; border-bottom: 1px solid rgba(225, 225, 225, .2);}

.sub_visual .next-depth li:last-child {border-bottom: 0;}
.sub_visual .next-depth a {display: block; color: #fff; transition: .3s;}
.sub_visual .next-depth li:hover a {font-weight: 700;}