1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

<style>
     :root {     
     --main-color : #2a416d;
     }
    .claerbox {clear:both; width:100%}
    #n_slide_menu {position:absolute;  left:200px; top:50%; transform:translateY(-50%); width:250px;  background-color:rgba(0,0,0,0.5);  border-radius:20px; box-sizing:border-box; z-index:999}
    .sub_middle {font-size:15px;line-height:1; text-align:center; background-color:#fff;font-weight:700; padding:5px 0; color:#333}
    #n_slide_menu .slide_menu > ul > li  {position:relative;}
    #n_slide_menu .slide_menu > ul > li > a {display:block; font-weight:700; color:#fff; font-size:21px;line-height:1; padding:20px 0 20px 45px; transition:0.3s;} 
    #n_slide_menu .slide_menu > ul > li > a.mainslide_st {color:#fff776; background-color:rgba(0,0,0,.8);}
    #n_slide_menu .slide_menu > ul > li:hover::after > a {font-weight:300;}
 
    #n_slide_menu .slide_menu > ul > li:hover::after {content: ""; display: block; position: absolute; top: 49%; right: 27px; width: 8px; height: 8px; border-top: 2px solid; border-right: 2px solid; border-color: #9196a5; transform: translateY(calc(-50% + 1px)) rotate(45deg); transition: right ease .2s;}

    #n_slide_menu .slide_menu > ul > li::before {content: ""; display: block; position: absolute; top: 49%; right: 20px; width: 8px; height: 8px; border-top: 2px solid; border-right: 2px solid; border-color: #9196a5; transform: translateY(calc(-50% + 1px)) rotate(45deg); z-index: 9; transition: right ease .2s;}

    #n_slide_menu .slide_menu > ul > li {border-bottom:1px solid rgba(255,255,255,0.5)}

    .submenu {display:none; position:absolute; top:0; left:250px; width:390px; height:530px; padding:20px 20px ;border-radius:20px;background-color:#fff; box-sizing:border-box;top:-59%; z-index:9999}
    .submenu::before {content:''; position:absolute; display:block; top:52px; left:-7px; background-color:#fff; width:15px; height:15px; transform:rotate(45deg);} 

    .submenu1 {top:calc(-59% + 10px)}
    .submenu2 {top:calc(-59% - 77px)}
    .submenu3 {top:calc(-59% - 139px)}
    .submenu5 {top:calc(-59% - 226px)} 

    .submenu6 {top:calc(-59% - 288px)} 
    .submenu7 {top:calc(-59% - 350px)} 
    .submenu8 {top:calc(-59% - 412px)} 

    .submenu2::before {top:137px;} 
    .submenu3::before {top:199px;}  
    .submenu5::before {top:285px;} 

    .submenu6::before {top:348px;} 
    .submenu7::before {top:410px;}   
    .submenu8::before {top:472px;}

    .submenu .sub_tit { width:100%; clear:both; text-align:center;}
    .submenu .sub_tit p {display:inline-block; font-weight:700; border-bottom:1px solid rgba(0,0,0,0.8); font-size:22px !important; line-height:1;  padding:5px 0 15px 0;}
    

    .submenu > li,
    .sp_op > li {position:relative; float:left; width:47%; padding-left:10px; }
    .submenu > li::before,
    .sp_op > li::before {content:''; position:absolute; display:block; left:0; top:50%; transform:translateY(-50%); background-color:#333; width:3px; height:3px; border-radius:50px;} 
    .submenu > li > a, .submenu8 > ul > li > a, .sp_op > li > a  {display:block; color:#333; font-size:16px; font-weight:500; padding:11px 0;}
    .submenu8 > ul > li > a {white-space:nowrap}

    .submenu8 > ul {float:left; width:45%}
    .submenu8 > ul:last-child { float:right}
      .submenu8 > ul > li {position:relative; float:none; padding-left:10px; }
    .submenu8 > ul > li::before {content:''; position:absolute; display:block; left:0; top:50%; transform:translateY(-50%); background-color:#333; width:3px; height:3px; border-radius:50px;} 

    .bb0 {border-bottom:0 !important}

    
</style>  

<div id="n_slide_menu">
    <!--¸ÞÀΠ: ¿ÞÂʸ޴º-->
    <div class="n_slide_box">
        <?php include ("./n_slide_menu_inc.php"); ?>
    </div> 
</div>

<script>
    $(".slide_menu > ul > li").mouseenter(function(){
      $(this).children(".submenu").stop().css("display", "block");
    });
    $(".slide_menu > ul > li").mouseleave(function(){
      $(this).children(".submenu").stop().css("display", "none");
    });
</script>