@charset "utf-8";
/*@latest 2020.12.09 OSY */


/* sub visual */
#sub_visual {width:100%; height:400px; float:left; overflow:hidden; position:relative; background:#000; transform:all 1s;}
#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;}
#sub_visual .sub_titbox {width:100%;/* max-width:1300px; */margin:0 auto; box-sizing:border-box; display:inline-block; 
                        position:absolute; bottom: 40%; text-align:center; transform:translateY(10%);}
#sub_visual .sub_titbox .bTitle {font-size:35px; line-height:120%; letter-spacing:-0.5px; font-weight:600; color:white;
                                 width:100%; max-width:1300px; margin:0 auto; padding:0 15px; box-sizing:border-box;}
#sub_visual .sub_titbox .bContent {display:block; width:100%; max-width:1300px; margin:20px auto 0; box-sizing:border-box; padding:0 15px;
                                   font-size:16.5px; font-weight:400; color:white; line-height:150%; clear:both;}
    
    @media (min-width:800px) and (max-width:990px){
        #sub_visual {height:300px;/* margin-top:50px; */}
        #sub_visual .sub_titbox {bottom:auto; top:50%; transform:translateY(-50%);}
        #sub_visual .sub_titbox .bTitle {font-size:30px;}
    }
    @media (max-width:799px){
        #sub_visual {height:200px;/* margin-top:50px; */}
        #sub_visual .sub_titbox {bottom:auto;top:50%;transform: translateY(-65%);}
        #sub_visual .sub_titbox .bTitle {font-size: 25px;font-weight: 400;}
    }
    @media (max-width:599px){
        #sub_visual {height: 200px;margin-bottom:0;}
        #sub_visual img {opacity:0.8;}
        #sub_visual .sub_titbox {/* padding:0; *//* bottom:15px; */}
        #sub_visual .sub_titbox .bTitle {font-size: 22px;/* margin-top:0; *//* line-height:25px; */}
        #sub_visual .sub_titbox .bContent {font-size: 15px;margin-top: 10px;word-break: keep-all;}
    }



/* layout */
.sub_div_wrap {width:100%; float:left; 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 {height:60px; line-height:60px; margin:0 auto; box-sizing:border-box; position:relative; margin-top:-60px; border-top:1px solid rgba(255,255,255,0.3);
          /* display:none; *//* z-index:1; *//* background:rgba(0,0,0,0.5); */ /* max-width:1300px; */}
.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:#fff; opacity:0.8; border-width:0; box-sizing:border-box; display:inline-block; vertical-align:middle; 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:#f9f9f9;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 rgba(255,255,255,0.2);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%; padding:0 35px 0 15px; margin:10px 0; border-width:0; box-sizing:border-box; display:inline-block;
                                color:#333; font-size:16px; line-height:140%; word-break:keep-all; vertical-align:middle;}
.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:""; width:10px; height:10px; border:1px solid rgba(0,0,0,0.8); border-width:0 1px 1px 0; position:absolute; right:18px;
                                          opacity:0.6; top:14px; transform:rotate(-45deg);}
.subCon .location > li ul>li.deepest>a>span:after {content:"";}
.subCon .location > li ul>li.deepest>a {font-weight:600;}

/*unactive 2depts's 3depts menu ul*/
.subCon .location > li ul li ul {position:absolute; top:0; left:100%; margin-left:1px; border:1px solid rgba(0,0,0,0.05);}
.subCon .location > li ul li>ul li a {padding:0 15px; font-size:15.5px;}
/* 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:-61px; height:60px;}
        .subCon .location > li {height:60px;line-height:60px;/* min-width:250px; */width:auto;max-width:33%;border-right:1px solid rgba(255,255,255,0.3);}
        .subCon .location > li > a {width:100%;font-size:17px;padding:0 60px 0 15px;max-height:60px;overflow:hidden;}
        .subCon .location > li:not(.home) > a:after {content:"";width:10px;height:10px;border:1px solid rgba(255,255,255,0.9);border-width:0 0 1px 1px;position:absolute;font-weight:600;opacity:0.6;transform:rotate(-45deg);right:17px;top:22px;/* transform:translate(0,-50%); */}
        .subCon .location > li:nth-child(2) > a:after,
        .subCon .location > li:not(.home):hover > a:after {content:"";border-width:1px 1px 0 0;top:27px;border-color:rgba(0,0,0,0.9);display:none;}
        .subCon .location > li.home {min-width:auto;/* border-right:none; */color:#fff;border-left:1px solid rgba(255,255,255,0.3);}
        .subCon .location > li.home:before {content:"\f015";font-family:FontAwesome;/* background:rgba(0,0,0,0.5); */border:rgba(255,255,255,0.2);border-width:0 1px;float:left;padding:0 20px;font-size:20px;}
        .subCon .location > li.home a {width:60px;height:60px;font-size:0;margin:0 0 0 -60px;padding:0;}
        .subCon .location > li:hover {background:#f9f9f9;color:#333;}
        .subCon .location > li:hover > a {color:#333;}

        /* 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;
                                    border:1px solid rgba(0,0,0,0.05); border-top:none;}
        .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: 100px 0 30px;margin-bottom:20px;text-align:center;border-bottom:1px solid #ddd;}
    }
    @media (max-width:990px){
        .subCon {border-top:none;margin-top: -40px;}
        .subCon .location {top:-50px; left:0; height:40px; line-height:40px; width:100%; overflow:hidden;
                           /* background:rgba(0,0,0,0.8); */ border-top:1px solid rgba(255,255,255,0.5); padding:0 15px;}
        .subCon .location li {float:left;font-size: 15px;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; color:#fff; opacity:0.5;}
        .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; color:#fff; opacity:0.5;}
        .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;}
    }