@charset "utf-8";
/*@latest 2020.06.18 ssj - KYOBO ONLY : short sub Visual */

/* sub visual */
#sub_visual {width:100%;height: 200px;float:left;overflow:hidden;position:relative;background:#000;}
#sub_visual img {width:100%; min-height:100%; opacity:0.9; display:block;}
#sub_visual .bluebg {position:absolute;top:0;left:0;width:100%;height:100%;color:white;line-height: 200px;}
#sub_visual .sub_titbox {width:100%; /* max-width:1300px; */ margin:0 auto; box-sizing:border-box; display:inline-block; position:absolute; bottom:25px;}
#sub_visual .sub_titbox p.bTitle {font-size:25px; line-height:30px; letter-spacing:-1px; color:white; width:100%; max-width:1300px; margin:0 auto; padding:0 15px; box-sizing:border-box;}
#sub_visual .sub_titbox strong.bContent {
                                         font-size: 16px;
                                         clear:both;
                                         display:block;
                                         color:white;
                                         width:100%;
                                         max-width:1300px;
                                         margin:0 auto;
                                         font-weight:400;
                                         line-height:22px;
                                         margin-top:10px;
                                         box-sizing:border-box;
                                         padding:0 15px;
                                         }

    @media (max-width:599px){
        #sub_visual {height: 120px;margin-bottom:0;}
        #sub_visual img {opacity:0.8;}
        #sub_visual .bluebg {line-height:230px;}
        #sub_visual .sub_titbox {padding:0; bottom:15px;}
        #sub_visual .sub_titbox p.bTitle {font-size:17px; margin-top:0; line-height:25px;}
        #sub_visual .sub_titbox strong.bContent {font-size:13px;}
    }



/* layout */
.sub_div_wrap {width:100%; float:left; /*max-width:1300px;*/ margin:0 auto; box-sizing:border-box; position:relative;}


    @media (min-width:991px){
        .subMenu,.subCon {width:100%;}
    }

    @media (max-width:990px){
        .subMenu {display:none;}
    }





/* sub Menu */
.subMenu {max-width:1300px;height:60px;line-height:60px;margin:0 auto;box-sizing:border-box;/* z-index:1; */position:relative;/* display: none; */}
.subMenu h3.menuNm {display:none;}


/* sub Contents */
.subCon {float:left; width:100%; position:relative; box-sizing:border-box; margin-bottom:30px; border-top:1px solid #efefef;}


/* sub location */
.subCon .location {box-sizing:border-box; max-width:1300px; margin:0 auto;}
.subCon .location > li {float:left; list-style:none;position:relative; }
.subCon .location > li > a {color:#333; margin:10px 0; border-width:0; box-sizing:border-box;
                            display:inline-block; vertical-align:middle; line-height:normal; word-break:keep-all;}
.subCon .location > li:nth-child(4) > a {font-weight:600;}

.subCon .location > li ul {width:100%; opacity:0; padding:0; background:rgba(249,249,249,0.98);box-sizing:border-box;position:relative; z-index:1;}
.subCon .location > li ul>li {list-style:none;position:relative;min-width: 100%;line-height: 40px;border: 1px solid #efefef;border-width: 0 1px 0;box-sizing: border-box;}
.subCon .location > li ul>li:last-child {border-width:0 1px 1px;}
.subCon .location > li ul li a {width:100%; color:#333; font-size:15px; padding:0 35px 0 20px; margin:10px 0; border-width:0; box-sizing:border-box;
                                display:inline-block; vertical-align:middle; line-height:normal; word-break:keep-all;}
.subCon .location > li ul li a span.bull {display:none;}
.subCon .location > li ul li:not(.deepest) > a:hover {text-decoration:underline;}
.subCon .location > li ul>li>a>span:after {content:"+"; position:absolute; right:15px; font-weight:600; opacity:0.6; top:50%; transform:translate(0,-50%);}
.subCon .location > li ul>li.deepest>a>span:after {content:"-";}

.subCon .location > li:last-child ul {background:rgba(241,241,241,0.98);}

/*unactive 2depts's 3depts menu ul*/
.subCon .location > li ul li ul {position:absolute; top:0; left:100%;}
.subCon .location > li ul li>ul li a {padding:0 20px; font-size:14px;}
/* 3 depts open (not active page) */
.subCon .location > li ul li:not(.deepest):hover ul {display:block !important;}
    
    




.subCon h4.tit {font-size:18px; box-sizing:border-box; padding-bottom:15px; display:block; width:100%; max-width:1300px; margin:0 auto;}
.subCon > div {width:100%; display:block; clear:both;/* margin-top:32px;*/ box-sizing:border-box; max-width:1300px; margin:0 auto;}


    @media (min-width:991px){  
        .subCon .location {margin-top:-60px; height:60px;}
        .subCon .location > li {height:60px; line-height:60px; min-width:250px; max-width:30%; border-right: 1px solid #efefef;}
        .subCon .location > li > a {width:100%; font-size:15px; padding:0 35px 0 20px; line-height:40px;}
        .subCon .location > li:not(.home) > a:after {content:"+"; position:absolute; font-weight:600; opacity:0.6; right:17px; top:50%; transform:translate(0,-50%);}
        .subCon .location > li:nth-child(2) > a:after,
        .subCon .location > li:not(.home):hover > a:after {content:"-";}
        .subCon .location > li.home {min-width:auto; border-right:none;}
        .subCon .location > li.home:before {content:"\f015";font-family:FontAwesome;background:#f0f0f0;border:1px solid #efefef;border-width:0 1px;float:left;padding:0 20px;}
        .subCon .location > li.home a {width:55px; height:60px; font-size:0; margin:0 0 0 -55px; }

        /* hover fx*/
        .subCon .location > li > ul {
                                    visibility:hidden;
                                    opacity:0;
                                    transition:0.5s ease-in-out;
                                    transform:rotateX(-90deg) rotateY(0);
                                    transform-origin: 0 0;
                                    position: absolute;
                                    }
        .subCon .location > li:hover > ul {display:block;    
                                            visibility:visible;
                                            opacity:1;
                                            transform:rotateX(0) rotateY(0);}
        .subCon .location > li > ul:hover >li {display:block;}                                    

        .subCon .location > li ul>li>ul {visibility:hidden;
                                        opacity:0;
                                        transition:0.5s ease-in-out;
                                        transform:rotateX(0) rotateY(-90deg);
                                        transform-origin: 0 0;}
        .subCon .location > li ul>li:hover > ul {visibility:visible;
                                                opacity:1;
                                                transform:rotateX(0) rotateY(0);}                                

        
        /*.wztab, .selectBbsSubospec {z-index:-1;}*/
        .subCon h4.tit {font-size:22px; padding:55px 0 30px; margin-bottom:20px; text-align:center; border-bottom:1px solid #ddd;}
    }
    @media (max-width:990px){
        .subCon .location {top:-50px; left:0; height:40px; line-height:40px; width:100%; overflow:hidden; 
                                       background:#f9f9f9; border-bottom:1px solid #f0f0f0; padding:0 15px;}
        .subCon .location li {float:left; font-size:12px; background-size:10px; padding:0; vertical-align:middle;}
        .subCon .location li:after {content:"\276D"; float:right; padding:0 8px; font-size:1em; opacity:0.6; line-height:41px;}
        .subCon .location li.home {background:url("/sample/template/wide/wide002/img/home.png")no-repeat 0px 0px; font-size:0; 
                                    padding:0 15px; background-position:left 14px; position:relative;}
        .subCon .location li.home:after {position:absolute; padding:0; right:5px; font-size:12px;}
        .subCon .location li.ftbd {font-weight:800;}
        .subCon .location li:last-child:after {display:none;}
        .subCon .location > li ul {display:none;}

        .subCon h4.tit {padding:30px 10px 10px;}
        .subCon > div {padding:0 10px;}
    }


    @media (max-width:599px){
        .subCon .location li {padding:0 5px 0 3px;}
        .subCon .location li:after {font-size:11px; padding:0; margin-left:7px;}
    }