div.ruby-menu-header {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0;
    z-index: 99999
}





button.ruby-btn {
    background: #001632;
    border: 2px solid #001632;
    color: #fff;
    border-radius: 0;
    padding: 10px 25px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer
}





button.ruby-btn:hover {
    background: #fff;
    color: #001632
}




@media(min-width: 768px) and (max-width:991px) {
    body {
        overflow-x: hidden
    }


}





@media(max-width: 767px) {
    div.ruby-menu-header {
        width: 100%;
        height: auto
    }



    button.ruby-btn {
        padding: 14px 25px;
        font-size: 16px;
        text-transform: uppercase
    }



}




div.ruby-wrapper,
div.ruby-wrapper.ruby-vertical {
    background: #f9f9f9;
    color: #222
}




ul.ruby-menu>li>a {
    color: #222
}



ul.ruby-menu>li>a:hover,
ul.ruby-menu>li:hover>a,
ul.ruby-menu>li.ruby-active-menu-item>a:hover,
ul.ruby-menu>li.ruby-active-menu-item:hover>a {
    background: #222;
    color: #fff
}




ul.ruby-menu>li.ruby-active-menu-item>a {
    background: #efefef;
    color: #222
}




ul.ruby-menu>li>ul,
ul.ruby-menu>li>ul>li>ul,
ul.ruby-menu>li>ul>li>ul>li>ul {
    border-top: 4px solid #222
}



ul.ruby-menu>li>ul>li>a,
ul.ruby-menu>li>ul>li>ul>li>a,
ul.ruby-menu>li>ul>li>ul>li>ul>li>a {
    background: #fff;
    color: #666
}



ul.ruby-menu>li>ul>li:hover>a,
ul.ruby-menu>li>ul>li>a:hover,
ul.ruby-menu>li>ul>li>ul>li:hover>a,
ul.ruby-menu>li>ul>li>ul>li>a:hover,
ul.ruby-menu>li>ul>li>ul>li>ul>li:hover>a,
ul.ruby-menu>li>ul>li>ul>li>ul>li>a:hover {
    background: #efefef
}


/* ruby-menu-mega & ruby-menu-mega-product */


ul.ruby-menu>li.ruby-menu-mega>div,
ul.ruby-menu>li.ruby-menu-mega-product>div {
    background: #fff;
    border-top: 4px solid #222
}



ul.ruby-menu>li.ruby-menu-mega-product>div>ul.ruby-menu-mega-product-nav {
    background: #efefef
}



ul.ruby-menu>li.ruby-menu-mega-product>div>ul.ruby-menu-mega-product-nav>li>a {
    background: #efefef;
    color: #666
}


ul.ruby-menu>li.ruby-menu-mega-product>div>ul.ruby-menu-mega-product-nav>li.ruby-active-menu-item>a {
    background: #e6e6e6
}


ul.ruby-menu>li.ruby-menu-mega-product>div>ul.ruby-menu-mega-product-nav>li>div {
    background: #fff
}


ul.ruby-menu>li.ruby-menu-mega-product>div>ul.ruby-menu-mega-product-nav>li:hover>a {
    background: #ddd
}



ul.ruby-menu>li.ruby-menu-mega>div ul li>a {
    color: #555
}



ul.ruby-menu>li.ruby-menu-mega>div ul li>a:hover {
    color: #222
}



/* ruby-c-title */


span.ruby-c-title,
span.ruby-c-title a {
    color: #222
}


span.ruby-c-title a:hover {
    color: #444
}




@media(min-width: 768px) {





    ul.ruby-menu>li.ruby-menu-mega-product>div>ul.ruby-menu-mega-product-nav>li.ruby-active-menu-item>a:after,
    ul.ruby-menu>li.ruby-menu-mega-product>div>ul.ruby-menu-mega-product-nav>li:hover>a:after {
        border-color: transparent #fff transparent transparent
    }
}





@media(max-width: 767px) {
    ul.ruby-menu>li>a {
        background: #efefef
    }


    ul.ruby-menu>li>a:hover,
    ul.ruby-menu>li:hover>a,
    ul.ruby-menu>li.ruby-active-menu-item>a:hover {
        background: #ccc;
        color: #111
    }


    ul.ruby-menu>li.ruby-active-menu-item>a {
        background: #ccc
    }



    ul.ruby-menu>li>ul>li>a,
    ul.ruby-menu>li>ul>li>ul>li>a,
    ul.ruby-menu>li>ul>li>ul>li>ul>li>a,
    ul.ruby-menu>li.ruby-menu-mega-product>div>ul.ruby-menu-mega-product-nav>li>a {
        background: #d1d1d1
    }



    ul.ruby-menu>li>ul>li:hover>a,
    ul.ruby-menu>li>ul>li>a:hover,
    ul.ruby-menu>li>ul>li>ul>li:hover>a,
    ul.ruby-menu>li>ul>li>ul>li>a:hover,
    ul.ruby-menu>li>ul>li>ul>li>ul>li:hover>a,
    ul.ruby-menu>li>ul>li>ul>li>ul>li>a:hover {
        background: #d9d9d9;
        color: #111
    }



    ul.ruby-menu>li>ul>li>ul>li>a {
        background: #e5e5e5
    }


    ul.ruby-menu>li>ul>li>ul>li:hover>a,
    ul.ruby-menu>li>ul>li>ul>li>a:hover {
        background: #e1e1e1
    }



    ul.ruby-menu>li>ul>li>ul>li>ul>li>a {
        background: #efefef
    }



    ul.ruby-menu>li>ul>li>ul>li>ul>li:hover>a,
    ul.ruby-menu>li>ul>li>ul>li>ul>li>a:hover {
        background: #fff
    }


    ul.ruby-menu>li.ruby-menu-mega-product>div>ul.ruby-menu-mega-product-nav>li.ruby-active-menu-item>a {
        background: #bcbcbc
    }


    ul.ruby-menu>li.ruby-menu-mega-product>div>ul.ruby-menu-mega-product-nav>li:hover>a {
        background: #d9d9d9
    }


    span.ruby-dropdown-toggle:after {
        color: #fff
    }





    ul.ruby-menu>li>a:before,
    ul.ruby-menu>li>ul>li>a:before,
    ul.ruby-menu>li>ul>li>ul>li>a:before,
    ul.ruby-menu>li>ul>li>ul>li>ul>li>a:before,
    ul.ruby-menu>li.ruby-menu-mega-product>div>ul.ruby-menu-mega-product-nav>li>a:before {
        background: #333
    }





    ul.ruby-menu>li>ul>li>a:before,
    ul.ruby-menu>li.ruby-menu-mega-product>div>ul.ruby-menu-mega-product-nav>li>a:before {
        background: #555
    }





    ul.ruby-menu>li>ul>li>ul>li>a:before {
        background: #777
    }





    ul.ruby-menu>li>ul>li>ul>li>ul>li>a:before {
        background: #999
    }






    ul.ruby-menu>li.ruby-menu-mega>div,
    ul.ruby-menu>li.ruby-menu-mega-product>div {
        border-top: none
    }





    ul.ruby-menu>li>ul,
    ul.ruby-menu>li>ul>li>ul,
    ul.ruby-menu>li>ul>li>ul>li>ul {
        border-top: none
    }





}





/* transision */





span.ruby-dropdown-toggle {
    transition: transform .3s ease
}


span.ruby-dropdown-toggle:after {
    transition: transform .3s ease
}


@media(min-width: 767px) {
    ul.ruby-menu>li>a:after {
        transition: all .3s ease
    }



    ul.ruby-menu>li>ul>li>a:after,
    ul.ruby-menu>li>ul>li>ul>li>a:after,
    ul.ruby-menu>li>ul>li>ul>li>ul>li>a:after {
        transition: all .3s ease
    }





    ul.ruby-menu>li>ul,
    ul.ruby-menu>li>div {
        transform: translateY(25px);
        transition: all .3s ease
    }





    ul.ruby-menu>li:hover>ul,
    ul.ruby-menu>li:hover>div {
        transform: translateY(0)
    }




    ul.ruby-menu>li>ul>li>ul,
    ul.ruby-menu>li>ul>li>ul>li>ul,
    ul.ruby-menu>li>ul>li>ul>li>ul>li>ul {
        transform: translateX(25px);
        transition: all .3s ease
    }





    ul.ruby-menu>li>ul>li:hover>ul,
    ul.ruby-menu>li>ul>li>ul>li:hover>ul,
    ul.ruby-menu>li>ul>li>ul>li>ul>li:hover>ul {
        transform: translateX(0)
    }





    ul.ruby-menu>li>ul>li.ruby-open-to-left>ul,
    ul.ruby-menu>li>ul>li>ul>li.ruby-open-to-left>ul,
    ul.ruby-menu>li>ul>li>ul>li>ul>li.ruby-open-to-left>ul {
        transform: translateX(-25px);
        transition: all .3s ease
    }





    ul.ruby-menu>li>ul>li.ruby-open-to-left:hover>ul,
    ul.ruby-menu>li>ul>li>ul>li.ruby-open-to-left:hover>ul,
    ul.ruby-menu>li>ul>li>ul>li>ul>li.ruby-open-to-left:hover>ul {
        transform: translateX(0)
    }





    ul.ruby-menu>li.ruby-menu-mega-product>div>ul.ruby-menu-mega-product-nav>li>div {
        transform: translateY(-50px);
        transition: all .5s ease
    }





    ul.ruby-menu>li.ruby-menu-mega-product:hover>div>ul.ruby-menu-mega-product-nav>li.ruby-active-menu-item>div,
    ul.ruby-menu>li.ruby-menu-mega-product>div>ul.ruby-menu-mega-product-nav>li:hover>div {
        transform: translateY(0)
    }





    ul.ruby-menu.ruby-vertical>li.ruby-menu-mega-product>div>ul.ruby-menu-mega-product-nav>li>div {
        transform: translateX(50px);
        transition: all .5s ease
    }





    ul.ruby-menu.ruby-vertical>li.ruby-menu-mega-product:hover>div>ul.ruby-menu-mega-product-nav>li.ruby-active-menu-item>div,
    ul.ruby-menu.ruby-vertical>li.ruby-menu-mega-product>div>ul.ruby-menu-mega-product-nav>li:hover>div {
        transform: translateX(0)
    }




}


/* ruby-wrapper  */




div.ruby-wrapper {
    position: relative;
    width: 100%;
    height: 50px;
    margin: 0 auto;
    background: #001632;
    box-shadow: 0 10px 10px 0 rgb(0 0 0 / 5%);
}





div.ruby-wrapper ul {
    margin: 0;
    padding: 0;
    list-style: none
}





div.ruby-wrapper>ul {
    position: relative
}





ul.ruby-menu>li {
    float: left;
    font-size: 14px
}



.ruby-menu-mega.title>.ruby-row>.ruby-list-heading {
    font-size: 3.0em;
    font-weight: 600;
    color: rgba(204, 204, 204, 0.48);
}


ul.ruby-menu>li.ruby-menu-right {
    float: right
}



ul.ruby-menu>li>a {
    display: block;
    line-height: 50px;
    padding: 0 25px 0 15px;
    color: #efefef;
    text-decoration: none;
    font-family: "Montserrat", "Noto Sans KR", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    position: relative;
}



ul.ruby-menu>li>a:only-child {
    padding: 0 15px
}



ul.ruby-menu>li>a:hover,
ul.ruby-menu>li:hover>a,
ul.ruby-menu>li.ruby-active-menu-item>a:hover,
ul.ruby-menu>li.ruby-active-menu-item:hover>a,
ul.ruby-menu>li.ruby-active-menu-item>a {
    background: #f1720a
}



ul.ruby-menu>li>a:only-child:after,
ul.ruby-menu>li:hover>a:only-child:after {
    content: ''
}



ul.ruby-menu>li>a .fa {
    position: relative;
    width: 24px
}





ul.ruby-menu>li>a>img {
    max-width: 16px;
    display: block
}



ul.ruby-menu>li>ul,
ul.ruby-menu>li>ul>li>ul,
ul.ruby-menu>li>ul>li>ul>li>ul {
    position: absolute;
    -webkit-box-shadow: 0 8px 24px -5px #ccc;
    -moz-box-shadow: 0 8px 24px -5px #ccc;
    box-shadow: 0 8px 24px -5px #ccc;
    border-top: 4px solid #ff7d4d
}



ul.ruby-menu>li>ul>li,
ul.ruby-menu>li>ul>li>ul>li {
    position: relative
}



ul.ruby-menu>li>ul>li>a,
ul.ruby-menu>li>ul>li>ul>li>a,
ul.ruby-menu>li>ul>li>ul>li>ul>li>a {
    display: block;
    width: 170px;
    line-height: 40px;
    padding: 0 35px 0 25px;
    background: #fff;
    color: #666;
    text-decoration: none;
    font-size: 14px
}





ul.ruby-menu>li>ul>li:hover>a,
ul.ruby-menu>li>ul>li>a:hover,
ul.ruby-menu>li>ul>li>ul>li:hover>a,
ul.ruby-menu>li>ul>li>ul>li>a:hover,
ul.ruby-menu>li>ul>li>ul>li>ul>li:hover>a,
ul.ruby-menu>li>ul>li>ul>li>ul>li>a:hover {
    background: #efefef
}




ul.ruby-menu>li>ul>li>a:only-child:after,
ul.ruby-menu>li>ul>li>ul>li>a:only-child:after,
ul.ruby-menu>li>ul>li>ul>li>ul>li>a:only-child:after {
    content: ""
}



ul.ruby-menu>li>ul>li>a .fa,
ul.ruby-menu>li>ul>li>ul>li>a .fa,
ul.ruby-menu>li>ul>li>ul>li>ul>li>a .fa {
    position: relative;
    width: 24px
}





ul.ruby-menu>li.ruby-menu-right>ul {
    right: 0
}





ul.ruby-menu>li>ul>li>ul,
ul.ruby-menu>li>ul>li>ul>li>ul {
    left: 170px;
    top: -4px;
    z-index: 100
}



ul.ruby-menu>li.ruby-menu-mega>div,
ul.ruby-menu>li.ruby-menu-mega-product>div {
    position: absolute;
    width: 100%;
    height: auto;
    min-height: 500px;
    top: 50px;
    left: 0;
    background: #fff;
    border-top: 4px solid #f1720a;
    overflow: hidden;
    -webkit-box-shadow: 0 8px 24px -5px #ccc;
    -moz-box-shadow: 0 8px 24px -5px #ccc;
    box-shadow: 0 8px 24px -5px #ccc
}


ul.ruby-menu>li.ruby-menu-mega-product .product_g {
    max-height: 644px;
    height: auto;
    overflow-x: hidden;
}


ul.ruby-menu>li.ruby-menu-mega-product>div>ul.ruby-menu-mega-product-nav {
    position: relative;
    width: 300px;
    height: 100%;
    left: 0;
    top: 0;
    background: #efefef
}




ul.ruby-menu>li.ruby-menu-mega-product>div>ul.ruby-menu-mega-product-nav>li>a {
    font-size: 14px;
    display: block;
    line-height: 40px;
    padding: 0 15px;
    background: #efefef;
    color: #666;
    text-decoration: none
}



ul.ruby-menu>li.ruby-menu-mega-product>div>ul.ruby-menu-mega-product-nav>li.ruby-active-menu-item>a {
    background: #e6e6e6
}


ul.ruby-menu>li.ruby-menu-mega-product>div>ul.ruby-menu-mega-product-nav>li>div {
    position: absolute;
    width: calc(600% - 180px);
    height: 100%;
    overflow-y: scroll;
    min-height: 100%;
    left: 100%;
    top: 0;
    background: #fff;
}


ul.ruby-menu>li.ruby-menu-mega-product>div>ul.ruby-menu-mega-product-nav>li:hover>a {
    background: #ddd
}



div.ruby-grid,
div.ruby-grid-lined {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0
}


div.ruby-grid.ruby-grid-lined {
    min-height: 450px;
}


div.ruby-grid>div.ruby-row {
    position: relative;
    width: 100%;
    height: auto
}





div.ruby-grid>div.ruby-row div.ruby-row [class^="ruby-col"] {
    margin-top: 16px
}


div.ruby-grid>div.ruby-row div.ruby-row:first-of-type [class^="ruby-col"] {
    margin-top: 10px
}


.ruby-menu-mega div.ruby-grid>div.ruby-row div.ruby-row:first-of-type [class^="ruby-col"] {
    margin-top: 0px
}




div.ruby-grid.ruby-grid-lined>div.ruby-row:after {
    content: "";
    width: 100%;
    height: 1px;
    left: 0;
    bottom: 0;
    background: -webkit-linear-gradient(left, rgba(204, 204, 204, 0) 0%, rgba(204, 204, 204, 0.48) 24%, rgba(204, 204, 204, 1) 50%, rgba(204, 204, 204, 0.42) 79%, rgba(204, 204, 204, 0) 100%)
}


div.ruby-grid>div.ruby-row div.titleBx {
    padding-left: 5%;
    padding-top: 5%;
}


div.ruby-grid>div.ruby-row div.paddingLine,
div.ruby-grid>div.ruby-row div.paddingLine2{
    padding-top: 5%;
}



div.ruby-grid.ruby-grid-lined>div.ruby-row:last-child:after {
    height: 0
}



div.ruby-grid>div.ruby-row::after {
    content: "";
    display: table;
    clear: both
}





div.ruby-grid>div.ruby-row [class^="ruby-col"] {
    position: relative;
    float: left;
    height: auto
}


div.ruby-grid>div.ruby-row>[class^="ruby-col"] {
    padding: 16px
}


div.ruby-grid>div.ruby-row>[class^="ruby-col"] [class^="ruby-col"] {
    padding-left: 0;
}


div.ruby-grid>div.ruby-row>[class^="ruby-col"] [class^="ruby-col"]:first-of-type {
    padding-left: 0
}


/* ruby-col-12 width */
div.ruby-grid>div.ruby-row div.ruby-col-1 {
    width: 8.33%
}
div.ruby-grid>div.ruby-row div.ruby-col-2 {
    width: 16.66%
}
div.ruby-grid>div.ruby-row div.ruby-col-3 {
    width: 25%
}
div.ruby-grid>div.ruby-row div.ruby-col-4 {
    width: 33.33%
}
div.ruby-grid>div.ruby-row div.ruby-col-5 {
    width: 41.66%
}
div.ruby-grid>div.ruby-row div.ruby-col-6 {
    width: 50%
}
div.ruby-grid>div.ruby-row div.ruby-col-7 {
    width: 58.33%
}
div.ruby-grid>div.ruby-row div.ruby-col-8 {
    width: 66.66%
}
div.ruby-grid>div.ruby-row div.ruby-col-9 {
    width: 75%
}
div.ruby-grid>div.ruby-row div.ruby-col-10 {
    width: 83.33%
}
div.ruby-grid>div.ruby-row div.ruby-col-11 {
    width: 91.66%
}
div.ruby-grid>div.ruby-row div.ruby-col-12 {
    width: 100%
}





div.ruby-grid.ruby-grid-lined>div.ruby-row>div[class^="ruby-col"]:after:not(:first-child) {
    content: "";
    position: absolute;
    top: 0;
    width: 1px;
    height: 100%;
    right: 0;
    background: -webkit-linear-gradient(top, rgba(204, 204, 204, 0) 0%, rgba(204, 204, 204, 0.48) 24%, rgba(204, 204, 204, 1) 50%, rgba(204, 204, 204, 0.42) 79%, rgba(204, 204, 204, 0) 100%)
}


div.ruby-grid.ruby-grid-lined>div.ruby-row>div[class^="ruby-col"]:last-child:after {
    width: 0
}


div.ruby-grid .ruby-col-1.img {
    position: relative;
    min-width: 200px !important;
    height: 140px !important;
    border: 1px solid #ddd;
    overflow: hidden;
    object-fit: cover;
}


div.ruby-grid #neb .ruby-col-1.img {
    width: 250px;
    height: 120px !important;
}


div.ruby-grid #neb .ruby-col-1.img img {
    transform: scale(1.5);
}


div.ruby-grid img {
    position: relative;
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}


div.ruby-grid #neb .ruby-col-1.img {
    max-height: 70px;
}


div.ruby-grid #neb .ruby-col-2 .ruby-row {
    height: 150px;
    overflow: hidden;
}


.ruby-list-heading {
    font-size: 1.325em;
    line-height: 24px;
    font-weight: 700;
    margin: 0
}


/* ******************************************
big_font ³×ºê Å« ÆùÆ®
********************************************** */


.big_font {
    font-size: 3.0em;
    font-weight: 700;
    color: rgba(204, 204, 204, 0.42);
    text-align: left;
    width: 100%;
    font-family: "Montserrat", "Noto Sans KR", sans-serif;
    text-decoration: none;
    line-height: 50px !important;
    ;
    display: block;
}




.ruby-menu-mega div.ruby-grid .big_font:after {
    content: "";
    width: 1px;
    height: 100%;
    min-height: 380px;
    position: absolute;
    display: block;
    left: 90%;
    top: 20%;
    background: -webkit-linear-gradient(left, rgba(204, 204, 204, 0) 0%, rgba(204, 204, 204, 0.48) 24%, rgba(204, 204, 204, 1) 50%, rgba(204, 204, 204, 0.42) 79%, rgba(204, 204, 204, 0) 100%)
}



h3.ruby-list-heading:not(.big_font) {
    position: relative;
    width: auto;
    max-width: 300px;
    height: 50px;
    overflow: hidden;
    border: 1px solid;
    transition: 0.5s;
    letter-spacing: 1px;
    border-radius: 8px;
}


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


³×ºê ¹öÆ° ¹× È¿°ú


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


h3.ruby-list-heading button {
    width: 101%;
    height: 100%;
    font-weight: 300;
    letter-spacing: 1px;
    background: #000;
    -webkit-mask: url("https://raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/nature-sprite.png");
    mask: url("https://raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/nature-sprite.png");
    -webkit-mask-size: 2300% 100%;
    mask-size: 2300% 100%;
    border: none;
    color: #fff;
    cursor: pointer;
    -webkit-animation: ani2 0.7s steps(22) forwards;
    animation: ani2 0.7s steps(22) forwards;
}


h3.ruby-list-heading button:hover {
    -webkit-animation: ani 0.7s steps(22) forwards;
    animation: ani 0.7s steps(22) forwards;
}


h3.ruby-list-heading .mas {
    position: absolute;
    color: #000;
    text-align: center;
    width: 101%;
    font-weight: 300;
    position: absolute;
    margin-top: 12px;
    overflow: hidden;


}


h3.ruby-list-heading a {
    color: #555;
}


div.ruby-grid .titleBx p {
    margin: 28% 51% 0;
}



.ruby-col-2 p {
    color: #777;
    width: 150px;
    margin: auto;
    border: 2px solid #777;
    font-size: 19px;
    text-align: center;
    position: absolute;
    left: 10%;
    top: 230px;
}



ul.ruby-menu>li.ruby-menu-mega>div ul {
    margin: 0;
    margin-top: 10px;
    padding-left: 11px;
}


ul.ruby-menu>li.ruby-menu-mega>div ul li {
    position: relative;
    font-size: 1.10em;
    line-height: 33px;
    display: block;
    width: 100%;
    font-family: "Montserrat", "Noto Sans KR", sans-serif;
    font-weight: 600;
}





ul.ruby-menu>li.ruby-menu-mega>div ul li>a {
    text-decoration: none;
    color: #525054bf;
    display: inline-block;
    font-family: "Montserrat", "Noto Sans KR", sans-serif;
    font-weight: 500;
}


ul.ruby-menu>li.ruby-menu-mega>div ul li>ul.m_3depth {
    margin: 0;
}


ul.ruby-menu>li.ruby-menu-mega>div ul li>ul.m_3depth li {
    font-size: 0.95em;
    line-height: 20px;
}


ul.ruby-menu>li.ruby-menu-mega>div ul li>ul.m_3depth li>a {
    font-size: 0.975em;
    color: #18141cfa;
}


ul.ruby-menu>li.ruby-menu-mega>div ul li>a:hover {
    color: #222;
}


ul.ruby-menu>li.ruby-menu-mega>div ul li>a>img {
    float: left;
    width: 60px;
    margin-right: 12px
}


span.ruby-c-title {
    position: relative;
    display: block
}


span.ruby-c-title,
span.ruby-c-title a {
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    margin-top: -5px;
    color: #222
}


span.ruby-c-title a:hover {
    color: #444;
    text-decoration: underline
}





/* ÇϹö½Ã ¸Þ´º ³ª¿È */


@media(min-width: 768px) {
 


    ul.ruby-menu>li>ul,
    ul.ruby-menu>li>ul>li>ul,
    ul.ruby-menu>li>ul>li>ul>li>ul {
        visibility: hidden;
        opacity: 0
    }





    ul.ruby-menu>li:hover>ul,
    ul.ruby-menu>li>ul>li:hover>ul,
    ul.ruby-menu>li>ul>li>ul>li:hover>ul {
        visibility: visible;
        opacity: 1
    }





    ul.ruby-menu>li.ruby-menu-mega>div,
    ul.ruby-menu>li.ruby-menu-mega-product>div {
        visibility: hidden;
        opacity: 0
    }





    ul.ruby-menu>li.ruby-menu-mega:hover>div,
    ul.ruby-menu>li.ruby-menu-mega-product:hover>div {
        visibility: visible;
        opacity: 1
    }





    ul.ruby-menu>li.ruby-menu-mega-product>div>ul.ruby-menu-mega-product-nav>li>div {
        visibility: hidden;
        opacity: 0
    }





    ul.ruby-menu>li.ruby-menu-mega-product:hover>div>ul.ruby-menu-mega-product-nav>li.ruby-active-menu-item>div {
        visibility: visible;
        opacity: 1
    }





    ul.ruby-menu>li.ruby-menu-mega-product>div>ul.ruby-menu-mega-product-nav>li:hover>div {
        visibility: visible;
        opacity: 1;
        z-index: 101
    }



    ul.ruby-menu>li.ruby-menu-mega-product>a:after,
    ul.ruby-menu>li.ruby-menu-mega>a:after {
        text-decoration: none;
        content: '';
        position: absolute;
        top: 21px;
        right: 5px;
        width: 0;
        height: 0;
        margin-left: 5px;
        border-bottom: 7px solid #fff;
        border-right: 7px solid transparent;
        border-left: 7px solid transparent;
    }


    ul.ruby-menu>li.ruby-menu-right a:after {
        content: '+';
    }


    ul.ruby-menu>li:hover>a:after {
        -webkit-transform: rotate(-180deg);
        -moz-transform: rotate(-180deg);
        -o-transform: rotate(-180deg);
        -ms-transform: rotate(-180deg);
        transform: rotate(-180deg)
    }





    ul.ruby-menu>li>ul>li>a:after,
    ul.ruby-menu>li>ul>li>ul>li>a:after,
    ul.ruby-menu>li>ul>li>ul>li>ul>li>a:after {
        font-family: "FontAwesome";
        text-decoration: none;
        font-size: 16px;
        padding: 0;
        content: '\f105';
        position: absolute;
        right: 15px
    }





    ul.ruby-menu>li>ul>li:hover>a:after,
    ul.ruby-menu>li>ul>li>ul>li:hover>a:after,
    ul.ruby-menu>li>ul>li>ul>li>ul>li:hover>a:after {
        -webkit-transform: rotate(-180deg);
        -moz-transform: rotate(-180deg);
        -o-transform: rotate(-180deg);
        -ms-transform: rotate(-180deg);
        transform: rotate(-180deg)
    }





    ul.ruby-menu>li>ul>li.ruby-open-to-left>a:after,
    ul.ruby-menu>li>ul>li>ul>li.ruby-open-to-left>a:after,
    ul.ruby-menu>li>ul>li>ul>li>ul>li.ruby-open-to-left>a:after {
        content: '\f104';
        right: auto;
        left: 10px
    }





    ul.ruby-menu>li>ul>li.ruby-open-to-left:hover>a:after,
    ul.ruby-menu>li>ul>li>ul>li.ruby-open-to-left:hover>a:after,
    ul.ruby-menu>li>ul>li>ul>li>ul>li.ruby-open-to-left:hover>a:after {
        -webkit-transform: rotate(-180deg);
        -moz-transform: rotate(-180deg);
        -o-transform: rotate(-180deg);
        -ms-transform: rotate(-180deg);
        transform: rotate(-180deg)
    }



    ul.ruby-menu>li.ruby-menu-mega-product>div>ul.ruby-menu-mega-product-nav>li.ruby-active-menu-item>a:after,
    ul.ruby-menu>li.ruby-menu-mega-product>div>ul.ruby-menu-mega-product-nav>li:hover>a:after {
        content: "";
        position: absolute;
        right: 0;
        margin-top: 13px;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 6px 8px 6px 0;
        border-color: transparent #fff transparent transparent
    }
}



.ruby-menu li:nth-child(3) .ruby-grid .big_font:after,
.ruby-menu li:nth-child(4) .ruby-grid .big_font:after {
    top: 42%;
}




.ruby-menu li:nth-child(5) .ruby-grid .big_font:after {
    top: 40%;
}



@media (max-width:1750px) and (min-width:1550px) {
    ul.ruby-menu>li.ruby-menu-mega-product>div>ul.ruby-menu-mega-product-nav>li>div {
        width: 450%;
        left: 128%;
        margin: 0 0 0 -22%;
        ;
    }


    div.ruby-grid>div.ruby-row div.ruby-col-11 {
        width: 100% !important;
    }


    div.ruby-grid>div.ruby-row>[class^="ruby-col"] [class^="ruby-col"] {
        padding-left: 0;
    }
}



@media screen and (max-width:1549px) {
    .ruby-menu-mega-product .titleBx {
        display: none;
    }


    ul.ruby-menu>li.ruby-menu-mega-product>div>ul.ruby-menu-mega-product-nav>li>div {
        margin: 0 !important;
    }


    .ruby-menu-mega .titleBx {
        padding-left: 3%;


    }



    .ruby-menu-mega div.ruby-grid .big_font {
        font-size: 2.35em;
    }


    .ruby-menu-mega div.ruby-grid .big_font:after {
        left: 96%;
    }
}


@media screen and (max-width:1370px) {
    .ruby-menu-right {
        display: block;
    }


    ul.ruby-menu>li .title_link {
        font-size: 12px;
    }
}


@media (max-width:1379px) and (min-width:1000px) {
    div.ruby-grid>div.ruby-row#neb {
        width: 85%
    }


    div.ruby-grid>div.ruby-row#neb div.ruby-col-2 {
        width: 14.5%
    }


    span.ruby-c-title a {
        font-size: 12px;
    }



}





@media screen and (max-width: 990px) {


    .ruby-menu-demo-header,
    #header .nt_login {
        display: none;
    }


    #header .gnb {
        height: 60px;
    }
}




/* nav Çܹö°Å ¸Þ´º ¹öÆ°*/


.ruby-menu .three {
    padding-right: 15px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    /*  background-color: #2c3e50;*/
    color: #ecf0f1;
    text-align: center;
    padding-top: 7px;
    transform: none;


}


.ruby-menu .hamburger .line {
    width: 24px;
    height: 3px;
    background-color: #ff7d4d;
    display: block;
    margin: 6px auto;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}


.ruby-menu .hamburger:hover {
    cursor: pointer;
}