/*Content CSS*/
.sub_visual{position: relative; width:100%; height: 550px;  background: 50% / cover no-repeat; display: flex; align-items: center; justify-content: center; z-index: 10; text-align: center; }
.sub_visual .bg{position:absolute;top:0;left:0;width:100%;height:100%; background-position:center center;background-repeat:no-repeat;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;z-index:0;-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease; z-index: -1;}
/* .sub_visual:hover .bg{-webkit-transform:scale(1.05);-moz-transform:scale(1.05);-o-transform:scale(1.05);-ms-transform:scale(1.05);transform:scale(1.05)} */

.sub_visual .bg{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 .title_warp{width: 100%; max-width: 1400px; padding: 50px 50px 0; text-align: center; position: relative; z-index: 3; }
.sub_visual h2 {font-size:90px; font-weight:700; color:#fff; line-height: 1; display: block;  }
.sub_visual h2::after{display: block; font-size: 16px; font-weight:400; color: rgba(255,255,255,1); line-height: 1; margin-top:40px; letter-spacing: -.32px;
content: '사람들이 좋아하는 기업 두꺼비표 페인트 (주)온새미로';}

/* .sub_visual.sub1 h2::before{content: 'Company Introduction'; }
.sub_visual.sub2 h2::before{content: 'Business Area'; }
.sub_visual.sub3 h2::before{content: 'Product Introduction'; }
.sub_visual.sub4 h2::before{content: 'Recruitment Information'; } */


.sub_visual .menu_wrap {width: 100%; max-width: 650px; position: absolute; bottom: -34px; left: 50%; transform: translateX(-50%); height: 70px; z-index: 10;
text-align: center;   }
.sub_visual .menu {display: flex; justify-content: center; width: 100%; height: 100%; position: relative; z-index: 1; }
/* .sub_visual .menu::before {content: ''; z-index: 2; position: absolute; width: 100%; height: 100%; border-radius: 35px; background: #292929; left: 0; top:0; } */
.sub_visual .menu > li {position: relative; width: 50%; height: 100%;}
.sub_visual .menu > li button {display: inline-flex; align-items: center; justify-content: center; height: 100%; font-size: 20px; font-weight: 700; position: relative;
color:#fff; width: 100%; position: relative; z-index: 1;}
.sub_visual .menu > li button::before {content: ''; position: absolute; right: 0; top:0; width: 200%; border-radius: 35px; background: #292929; display: none;
height: 100%; z-index: -1; pointer-events: none;}
.sub_visual .menu > li button::after {content: ''; display: none;width: 9px; height: 13px; position: absolute; left:0;top: 50%;  transform: translateY(-50%);
background:url("../img/menu_arrow.png") 50% no-repeat; z-index: 2; }

.sub_visual .menu > li button .arrow {display: block; width: 25px; height: 25px;   background:url("../img/menu_btn_arrow.png") 50% no-repeat #fff; position: absolute;
transition: all .3s; border-radius: 50%; position: absolute; right: 22px; top: 23px; }
.sub_visual .menu > li button.active .arrow { transform: rotate(-180deg); }
.sub_visual .menu > li:first-child button {pointer-events: none; z-index: 2; cursor:default;}
.sub_visual .menu > li:first-child button .arrow {display: none;}
.sub_visual .menu > li:nth-child(2) button::before,
.sub_visual .menu > li:nth-child(2) button::after {display: block; }

.sub_visual .menu .next-depth {position:absolute; left:0; width:100%; top:34px;  display: none;}
.sub_visual .menu ul {  padding:60px 20px 30px; border:1px solid rgba(255,255,255,0);    background: rgba(255,255,255,.85); border-radius:0 0 20px 20px;  }

.sub_visual .menu ul li a { display: block; font-size: 17px; font-weight: 400; color: #292929;  line-height: 1.5; margin-bottom: 20px; }
.sub_visual .menu ul li a:hover {font-weight: 700;}
.sub_visual .menu ul li:last-child a {margin-bottom: 0; }

@media screen and (min-width:641px) {
    .sub_visual .menu_wrap.fixed {position: fixed; z-index: 30; bottom: 5%; }
    .sub_visual .menu_wrap.fixed .menu .next-depth {top:auto; bottom:calc(100% + 6px);}
    .sub_visual .menu_wrap.fixed .menu > li button {border-color:rgba(255,255,255,.15);}
    .sub_visual .menu_wrap.fixed .menu ul {border-color:rgba(255,255,255,.15);}

    .sub_visual .menu_wrap.end {position: absolute; }

}


@media screen and (max-width: 1024px) {
    .sub_visual { height:400px;}
    .sub_visual .title_warp{padding: 30px 30px 0; text-align: center;  }
    .sub_visual h2 {font-size:60px; }
    .sub_visual h2::after{font-size:15px; margin-top: 30px;}
    .sub_visual .menu_wrap {height: 50px; bottom:-25px; width: calc(100% - 60px);}
    .sub_visual .menu > li button {font-size: 16px; }
    .sub_visual .menu ul {  padding: 40px 20px 20px;}
    .sub_visual .menu ul li a {font-size: 15px; margin-bottom: 15px;}
    .sub_visual .menu > li button .arrow { right: 13px; top: 13px;}



}

@media screen and (max-width: 640px) {
    .sub_visual {height: 300px;}

    .sub_visual .title_warp{padding: 0 20px; top:20px; }
    .sub_visual h2 {font-size:35px; }
    .sub_visual h2::after {font-size:14px; margin-top:20px; }

    .sub_visual .menu_wrap {display: none;}

}