/*Content CSS*/
#sub_visual {padding: 108px 0; height: 100vh; min-height: 800px; max-height: 1080px; display: flex; align-items: flex-end; position: relative; }
#sub_visual .bg{position:absolute;top:0;left:50%; width:100%; height:100%; transform: translateX(-50%); overflow: hidden; z-index: -1;}
#sub_visual .bg::before{content: ''; display: block; position:absolute;top:0;left:50%; width:100%; height:100%; transform: translateX(-50%); animation: visualScale 3s ease-out forwards;
background-position:center center;background-repeat:no-repeat;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;
-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease; }

#sub_visual .bg::before{background-image:url('../img/sub_bg1.jpg'); }
#sub_visual.sub1 .bg::before{background-image:url('../img/sub_bg1.jpg');}
#sub_visual.sub2 .bg::before{background-image:url('../img/sub_bg2.jpg');}
#sub_visual.sub3 .bg::before{background-image:url('../img/sub_bg3.jpg');}
#sub_visual.sub4 .bg::before{background-image:url('../img/sub_bg4.jpg');}
#sub_visual.sub5 .bg::before{background-image:url('../img/sub_bg5.jpg');}
#sub_visual.sub6 .bg::before{background-image:url('../img/sub_bg6.jpg');}

#sub_visual .sub_inner{width: 100%; max-width: 1400px; padding: 0 50px; margin: 0 auto;}

/* font-style */
#sub_visual .fs_95{font-size: 95px; font-weight: 700; line-height: 1; color: #fff;}
#sub_visual .fs_20{font-size: 20px; font-weight: 700; line-height: 1.65; color: #fff;}
#sub_visual .fs_17{font-size: 17px; line-height: 1.65; color: #fff;}
#sub_visual .fs_14{font-size: 14px; line-height: 1; color: #fff;}

#sub_visual .top h2{margin-bottom: 43px;}

#sub_visual .sm_menu{display: flex; align-items: center;  flex-shrink: 0; padding-left: 17px;}
#sub_visual .sm_menu li{display: flex; align-items: center; height: 100%;}
#sub_visual .sm_menu li::after{content: ''; display: block; width: 5px; height: 9px; background: url('../img/sm_arrow.png') 50% / cover no-repeat; margin: 0 20px;}
#sub_visual .sm_menu li:last-child::after{display: none;}

#sub_visual .menu {display: flex; align-items: center; justify-content: flex-end; position: relative; z-index: 1; margin-top: 200px;}
#sub_visual .menu > li {position: relative; margin-right: 17px;}
#sub_visual .menu > li:last-child{margin-right: 0;}

#sub_visual .menu > li button {display: flex; align-items: center; justify-content: space-between; min-width: 361px; height: 71px; padding: 0 58px; border-radius: 10px;}
#sub_visual .menu > li button.active{background-color: rgba(0,0,0,.85) !important;}
#sub_visual .menu > li button span{text-align: left; font-size: 20px; font-weight: 500; color: #fff;}
#sub_visual .menu > li button .arrow {flex-shrink: 0; margin-left: 20px; display: block; width: 10px; height: 7px;  background:url("../img/menu_arrow.png") 50% no-repeat; position: relative; right: -8px;}
#sub_visual .menu > li button.active .arrow{ transform: rotate(-180deg); }

#sub_visual .menu > li:nth-child(1) button{background-color: rgba(255,255,255,.15)}
#sub_visual .menu > li:nth-child(2) button{background-color: #04056b;}

#sub_visual .menu .next-depth {position:absolute; left:0; width:100%; top:100%; display: none;}
#sub_visual .menu ul {margin-top: 13px; background-color: rgba(0,0,0,.85); border-radius: 10px; padding: 25px 56px;}
#sub_visual .menu ul li + li{margin-top: 3px}
#sub_visual .menu ul li a{transition: .3s; display: block; color: #fff;}
#sub_visual .menu ul li:hover a{color: #ea8929;}

@keyframes visualScale {
    0% {transform: scale(1.05) translateX(-50%);}
    100% {transform: scale(1) translateX(-50%);}
}


@media screen and (max-width: 1600px) {

}

@media screen and (max-width: 1400px) {
    #sub_visual {padding: 140px 0 50px; height: 550px; min-height: 0;}
    #sub_visual .sub_inner{display: flex; flex-direction: column; justify-content: space-between; height: 100%;}

    /* font-style */
    #sub_visual .fs_95{font-size: 80px;}
    #sub_visual .fs_20{font-size: 19px;}
    #sub_visual .fs_17{font-size: 16px;}

    #sub_visual .top h2{margin-bottom: 35px;}

    #sub_visual .sm_menu li::after{margin: 0 15px;}

    #sub_visual .menu { margin-top: 50px;}
    #sub_visual .menu > li {margin-right: 15px;}
    #sub_visual .menu > li button {height: 65px; padding: 0 30px;}
    #sub_visual .menu > li button span{font-size: 19px;}
    #sub_visual .menu > li button .arrow {right: 0;}
    #sub_visual .menu ul {margin-top: 10px; padding: 20px 30px;}

}
@media screen and (max-width: 1280px) {
    #sub_visual {height: 500px;}

    /* font-style */
    #sub_visual .fs_95{font-size: 70px;}
    #sub_visual .fs_20{font-size: 18px;}

    #sub_visual .top h2{margin-bottom: 30px;}

    #sub_visual .sm_menu li::after{margin: 0 10px;}

    #sub_visual .menu > li button {height: 60px; padding: 0 20px;}
    #sub_visual .menu > li button span{font-size: 18px;}
    #sub_visual .menu ul { padding: 20px;}
}

@media screen and (max-width: 1024px) {
    #sub_visual {height: auto;; padding: 100px 0 30px; text-align: center;}
    #sub_visual .sub_inner{padding: 0 30px;}

    /* font-style */
    #sub_visual .fs_95{font-size: 60px;}
    #sub_visual .fs_20{font-size: 17px;}
    #sub_visual .fs_17{font-size: 15px;}

    #sub_visual .top h2{margin-bottom: 20px;}
    #sub_visual .sm_menu {justify-content: center; padding-left: 0;}

    #sub_visual .menu > li{flex: 1;}
    #sub_visual .menu > li button {width: 100%; height: 50px; min-width: 0;}
    #sub_visual .menu > li button span{font-size: 17px;}
    #sub_visual .menu ul{text-align: left;}
}

@media screen and (max-width: 640px) {
    #sub_visual .sub_inner{padding: 0 20px;}

    /* font-style */
    #sub_visual .fs_95{font-size: 45px;}
    #sub_visual .fs_20{font-size: 16px;}
    #sub_visual .fs_17{font-size: 14px;}

    #sub_visual .top h2{margin-bottom: 0;}
    #sub_visual .sm_menu{display: none;}
    #sub_visual .menu > li:not(:last-child){display: none;}
    #sub_visual .menu > li button {padding: 10px 20px; height: auto;}
    #sub_visual .menu > li button span{font-size: 16px; letter-spacing: -1px; line-height: 1.5;}

    #sub_visual .menu > li:last-child button{background-color: rgba(255,255,255,.15); }
}