.subCont { width: 100%; margin-top:130px; }

.subVisual { height:360px; background:url(/images/home/kor/user/sub_new/subVisual.png) no-repeat center; position:relative; background-size:cover; position:relative; display:flex; align-items: center; justify-content: center; }
.subVisual h2 { font-size:52px; font-family: 'FlightSans'; font-weight: 700; color:#fff; text-align:center; }
.subVisual > nav { position:absolute; bottom:0; left:0; width:100%; height:70px; border-top:1px solid rgba(255,255,255,.2); z-index:5; }
.subVisual > nav .inner { margin:auto; height: 100%; display:flex; box-sizing:border-box; border-left:1px solid rgba(255,255,255,.2); border-right:1px solid rgba(255,255,255,.2); }
.subVisual .home { width:70px; border-right:1px solid rgba(255,255,255,.2); }
.subVisual .home a { display:flex; width: 100%; height: 100%; align-items: center; justify-content: center; }
.subVisual .depth { width:auto; height:100%; display:flex; }
.subVisual .depth .toggle { width: 320px; height:100%; border-right:1px solid rgba(255,255,255,.2); position:relative; }
.subVisual .depth .toggle > button { width:100%; height:100%; font-size:16px; display:flex; align-items: center; color:#fff; position:relative; }
.subVisual .depth .toggle > button:after { content:""; display:block; width:12px; height:7px; background:url(/images/home/kor/user/header/bullet_depth.png) no-repeat; position:absolute; top:50%; right:20px; transform:translateY(-50%); }
.subVisual .depth .toggle.on > button:after { transform:translateY(-50%) rotate(180deg);  }
.subVisual .depth .toggle > button .txt { text-align:left; width:calc(100% - 50px); box-sizing:border-box; padding-left:20px; }
.subVisual .depth .toggle ul { display:none; position:absolute; top:100%; left:0; width: 100%; background:#fff; border:1px solid #e9e9e9; box-sizing:border-box; border-radius:4px; z-index:1; }
.subVisual .depth .toggle li { border-top:1px solid #e9e9e9; }
.subVisual .depth .toggle li a { display:flex; align-items:center; width: 100%; height:100%; color:#646464; font-size:16px; box-sizing:border-box; padding:5px 20px; box-sizing:border-box; min-height:55px; }
.subVisual .btn { display:flex; align-items:center; gap:30px; margin:0 20px 0 auto; position:relative; }

.subVisual .snsBox { position:absolute; left:-130px; bottom:15px; display:none; }
.subVisual .snsBox div { width:auto; padding:5px; display:flex; align-items: center; justify-content: center; gap: 10px; }
.subVisual .snsBox a { display:flex; align-items: center; justify-content: center; width:30px; height:30px; background:blue; border-radius:50%; }
.subVisual .snsBox a.facebook { background:#3b5998; }
.subVisual .snsBox a.twitter { background:#000; }
.subVisual .snsBox a.blog { background:#00c73c; }
.subVisual .snsBox a img { height:16px; }
.subVisual .snsBox a.twitter img { height:13px; }


/*기존레이아웃*/
.sub_top_cont_area { padding:0 15px 150px; overflow:hidden; max-width:1440px; margin:auto; box-sizing:border-box;  }
.sub_top_cont_area h3 { text-align:center; margin-top:120px; font-size:46px; font-weight: 700; font-family: "FlightSans", sans-serif; }

@media (max-width:1200px) {
    .subCont { margin-top:0; }
    .subVisual { height:360px; } 
    .subVisual .depth { width:calc(100% - 70px); }
    .subVisual .depth .toggle { width: 100%; height:100%; border-right:1px solid rgba(255,255,255,.2); position:relative; }
    
    .subVisual .depth .toggle > button:after { right:10px; }
    .subVisual .depth .toggle > button .txt { width:calc(100% - 30px); padding-left:10px; }

    .subVisual .depth.m2 .toggle { width: calc(100% / 2); }
    .subVisual .depth.m3 .toggle { width: calc(100% / 3); }
    .subVisual .depth .toggle li a { padding:5px 10px; }
    
    .subVisual .btn { position:absolute; bottom:-50px; right:0; gap:25px; }
    .subVisual .btn button:last-child { display:none; }
    .subVisual .btn button img { filter: invert(100%); }

    .subVisual .snsBox { bottom:-8px; }
}

@media (max-width:1080px) {
    .table_basics_com_cont_area { overflow-x:auto; }
}

@media (max-width: 767px) {
    .subVisual { height:250px; }
    .subVisual h2 { font-size:30px; }
    .subVisual > nav { height:50px; }
    .subVisual .home { width:50px; }
    .subVisual .home a img { width:18px; }
    .subVisual .depth { width:calc(100% - 40px) !important; }
    .subVisual .depth .toggle,
    .subVisual .depth.m2 .toggle,
    .subVisual .depth.m3 .toggle { width: 100%; }
    .subVisual .depth .toggle > button .txt { font-size:14px; }
    .subVisual .depth .toggle li a { min-height:45px; font-size:14px; }

    .subVisual .btn { bottom:-50px; right:-10px; gap:15px; }
    .subVisual .btn button img { filter: invert(100%); height:20px; }

    .subVisual .snsBox { bottom:-7px; left:-110px; }
    .subVisual .snsBox a { width:25px; height:25px; }
    .subVisual .snsBox a img { height:14px; }
    .subVisual .snsBox a.twitter img { height:12px; }

    /*기존레이아웃*/
    .sub_top_cont_area h3 { font-size:25px; margin-top: 80px; word-break:break-all; }
}


/*******************************************************************************************************************/