:root {
	--point-main:   rgba(2, 189, 213, 1);
    --point-main-10:rgba(2, 189, 213, .1);
    --point-main-20:rgba(2, 189, 213, .2);
    --point-main-30:rgba(2, 189, 213, .3);
    --point-main-40:rgba(2, 189, 213, .4);
    --point-main-50:rgba(2, 189, 213, .5);
    --point-main-60:rgba(2, 189, 213, .6);
    --point-main-70:rgba(2, 189, 213, .7);
    --point-main-80:rgba(2, 189, 213, .8);
    --point-main-90:rgba(2, 189, 213, .9);
    
	--color-red: #dc3545;
	--color-blue: #007bff;
}

body * :not(i):not(code):not(.fa):not(.fas):not(.far) {
	/*font-family: 'GmarketSansLight'; letter-spacing: -0.04em; font-weight: 500;*/
    font-family: 'aritadm'; letter-spacing: -0.04em; font-weight: 400;
}

/*
?v=2
*/

/* ------------------------------ header ------------------------------ */
header {
    margin: 0; height: 35px;
    background-color: #eee;
}

.search-icon-group {
    width: 40px; height: 40px; cursor: pointer;
    position: absolute; top: 0; right: 0;
    border-left:    1px solid rgba(255, 255, 255, .2);
    border-right:   1px solid rgba(255, 255, 255, .2);
}
.mainSearchArea {
    width: 200px; height: 40px; overflow: hidden; display: none;
    position: absolute; top: 0; left: -201px;
}
#mainSearch {
    /*margin: 0; padding: 0;
    font-size: 13px;
    margin: 8px 0 0 200px; padding: 0 10px;
    width: 200px; height: 24px;*/
}

.search-icon-group > .search-icon {
    width: 16px; height: 16px; padding: 15px;
    background-color: transparent;
    background-image: url('/resource/images/icons/search.png?v=2');
    background-position: center;
    border: 0; outline: none; z-index: 100;
}

header > .header-container {
    position: relative; z-index: 50;
}
header > .header-container:after {
    content:''; display: block; clear: both;
}
header > .header-container > section {
    text-align: center;
}
header > .header-container > section:after {
    content:''; display: block; clear: both;
}
header > .header-container > section .nav-btn {
    width: 19px; height: 16px;
    display: none; cursor: pointer; overflow: hidden;
    padding: 15px 20px; float: left;
    background-image: url('/resource/images/icons/nav-btn.png?v=2');
    background-repeat: no-repeat;
    background-position: center;
}
header > .header-container > section .nav-btn.gnb-open {
    width: 15px; height: 15px;
    background-image: url('/resource/images/icons/close.png?v=2');
}

header > .header-container > section > h1 {
    /*width: 306px; height: 106px; margin: 40px auto;
    text-indent: -10000px;
    background-image: url('https://luxw.dlecture.com/resource/mall/images/logo.png?v=2');

    width: 77px; height: 27px; margin: 11px auto 0;
    background-image: url('https://luxw.dlecture.com/resource/mall/images/logo_small.png?v=2');*/
    width: 52px; margin: 14px auto 0; cursor: pointer;
    font-size: 20px;
}
.header-container > section > div.dim { display: none; }
header > .header-container > section .gnb-container {
    margin: 0 auto;
}

/*
header > .header-container > section .lnb {
    display: inline-table; margin: 0;
}
header > .header-container > section .lnb > li {
    display: block; float: left;
}
header > .header-container > section .lnb > li:hover > a {
    color: #b39965;
}
header > .header-container > section .lnb > li > a {
    font-size: 13px;
    font-weight: 700;
    padding: 0 10px;
    border-right: 2px solid #ccc;
}
header > .header-container > section .lnb > li:last-of-type > a { border-right: 0; }
*/

header > .header-container > section .gnb {
    display: inline-table; position: relative; margin-left: 0;
    border-bottom: 1px solid #ccc;
}
header > .header-container > section .gnb > li > a {
    
}
header > .header-container > section .gnb > li > a > span {
    display: block;
    font-family: 'Lato' !important; font-size: 11px; font-weight: 800;
    text-transform: uppercase;
}
header > .header-container > section .gnb > li > a > span > i {
    display: inline-block; margin-left: 10px;
    color: #000;
}

header > .header-container > section .gnb > li {
    height: 30px; display: inline-block; float: left; position: relative; margin-right: 5px;
}
header > .header-container > section .gnb > li:last-of-type { margin-right: 0; }

header > .header-container > section .gnb > li > a {
    width: 100%; height: 100%; line-height: 30px; font-size: 13px; color: #333; display: inline-block;
}
header > .header-container > section .gnb > li:hover a {}
header > .header-container > section .gnb > li a.active { font-weight: bold; color: #333; }
header > .header-container > section .gnb > li > a > span {
    margin: 0 10px; color: #000;
}
header > .header-container > section .gnb > li > ul {
    display: none; width: 140px; margin-left: -70px;
    position: absolute; left: 50%; 
    background-color: #eee;
    border: 1px solid #b39965; border-top: none;
}
header > .header-container > section .gnb > li > ul > li a {
    font-size: 13px; line-height: 30px; color: #333; display: block;
}
header > .header-container > section .gnb > li > ul > li a > span { font-size: 13px; }
header > .header-container > section .gnb > li:hover > ul { display: block; }

header > .header-container > section .gnb > li > ul > li:hover { background-color: #b39965; }
header > .header-container > section .gnb > li > ul > li:hover > a,
header > .header-container > section .gnb > li > ul > li:hover > a > span { color: #fff; }


header > .header-container > section .search-btn { padding: 10px 20px; width: 17px; height: 17px; float: right; display: none; }
header > .header-container > section .search-btn a {
    width: 100%; height: 100%; display: block;
    position: relative; top: 5px;
    background: url('/resource/images/icons/nav-icons.png?v=2') no-repeat;
    background-position: -40px 0;
}


header > .header-container > section .search-container {
    clear: both; display: none;
    width: 100%; height: 0;
    position: absolute; top: 50px; left: 0;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition:    all 0.2s ease-in-out;
    -o-transition:      all 0.2s ease-in-out;
    transition:         all 0.2s ease-in-out;
    background-color: #fff; overflow: hidden;
}
header > .header-container > section .search-container.searchOpen { height: 45px; }
header > .header-container > section .search-container .search-input {
    width: 100%; height: 45px;  font-size: 13px; box-shadow: none; margin: 0;
    background-color: #fff; color: #a9a9a9;
    box-sizing: border-box; border: none; padding-left: 10px; border-bottom: 1px solid #d9d9d9;
}
header > .header-container > section .search-container .searchGo {
    width: 50px; height: 44px; padding: 0; margin: 0;
    position: absolute; top: 0; right: 0;
    border: 0; outline: none; border-left: 1px solid #d9d9d9; box-sizing: border-box; background-color: #fff; color: #a9a9a9; cursor: pointer;
}



/*header > .header-container > section .gnb > li > a {
    cursor: default;
}
header > .header-container > section .gnb > li:nth-of-type(1) a,
header > .header-container > section .gnb > li:nth-of-type(4) a,
header > .header-container > section .gnb > li:nth-of-type(5) a,
header > .header-container > section .gnb > li:nth-of-type(6) a {
    cursor: pointer;
}*/



/*@media screen and (max-width: 800px) {*/
    header { background-color: #fff; padding-top: 20px; }
    header > .header-container {
        position: fixed; top: 0; left: 0; right: 0; height: 50px; background-color: #fff; z-index: 50;
        -webkit-transition: all 0.2s ease-in-out;
        -moz-transition:    all 0.2s ease-in-out;
        -o-transition:      all 0.2s ease-in-out;
        transition:         all 0.2s ease-in-out;
    }
    header > .header-container > section {
        width: 100%; height: 50px; text-align: left; position: absolute;
        border-bottom: 1px solid #d9d9d9;
    }
    header > .header-container > section .search-btn { display: block; }
    header > .header-container > section .search-container { display: block; }
    header > .header-container > section .nav-btn { display: block; }
    
    .header-container > section > div.dim {
        display: none;
        position: fixed; top: 50px; left: 0; right: 0; bottom: 0;
        background-color: rgba(0, 0, 0, 0.7);
    }
    header > .header-container > section .gnb-container {
        width: 320px; height: 5000px; z-index: 7;
        position: absolute; top: 100%; left: -320px; bottom: 0;
        border-top: 1px solid #d9d9d9;

        -webkit-transition: all 0.2s ease-in-out;
        -moz-transition:    all 0.2s ease-in-out;
        -o-transition:      all 0.2s ease-in-out;
        transition:         all 0.2s ease-in-out;
    }
    header > .header-container > section .lnb {
        float: left; display: block; margin-left: 0;
        width: 110px; height: 5000px;
        font-size: 13px; line-height: 38px;
        padding-top: 10px; background-color: #fff; border-right: 1px solid #d9d9d9;
    }
    header > .header-container > section .lnb > li {
        width: 100%;
    }
    header > .header-container > section .lnb > li > a {
        display: block; padding: 0 20px;
        padding-right: 0; border-right: 0;
        font-size: 13px;
    }
    header > .header-container > section .lnb > li:hover > a { color: #333; }

    header > .header-container > section .gnb {
        float: left; padding-top: 10px; width: 205px; height: 5000px; position: relative; z-index: 5;  border-right: 1px solid #d9d9d9; background-color: #fff;
    }
    header > .header-container > section .gnb > li {
        height: auto; display: block; float: none; position: relative; border-bottom: none;
    }

    header > .header-container > section .gnb > li > a {width: 100%; height: auto; line-height: 38px; font-size: 13px; color: #333; display: block}
    header > .header-container > section .gnb > li:hover a {}
    header > .header-container > section .gnb > li a.active {font-weight: bold; color: #333}
    header > .header-container > section .gnb > li > a.hasSub {
        background-image: url('/resource/images/icons/nav-icon-arrow-down.png?v=2');
        background-repeat: no-repeat;
        background-position: center right 30px;
    }
    header > .header-container > section .gnb > li > a.hasSub.on {
        background-image: url('/resource/images/icons/nav-icon-arrow-up.png?v=2');
    }

    header > .header-container > section .gnb > li > a > b { top: 9px; left: 154px; }
    header > .header-container > section .gnb > li > a > span { margin: 0 30px; }
    header > .header-container > section .gnb > li > a > span > i { display: none; }
    header > .header-container > section .gnb > li > ul {
        padding-bottom: 15px; width: auto; background-color: #fff; position: relative; left: auto; margin-left: 0; border: none; display: none;
    }

    header > .header-container > section .gnb > li > ul > li {
        margin: 0 30px;
    }

    header > .header-container > section .gnb > li > ul > li:hover { background-color: #fff; }
    header > .header-container > section .gnb > li > ul > li:hover > a,
    header > .header-container > section .gnb > li > ul > li:hover > a > span { color: #767676; }

    header > .header-container > section .gnb > li > ul > li a { font-size: 13px; line-height: 30px; color: #767676; }
    header > .header-container > section .gnb > li > ul > li a > span { font-size: 13px; }
    header > .header-container > section .gnb > li:hover > ul { display: none; }
    header > .header-container > section .gnb > li.sub-open > ul { display: block; }

/* ------------------------------ article ------------------------------ */

article {}
article .article-container:after { content: ''; display: block; clear: both;  }
article .article-container {
    position: relative; margin: 10px 10px 0;
}
article .article-container > h2 {
    position: relative; margin: 0 0 15px; padding: 0 0 15px; font-size: 17px;
    border-bottom: 1px solid #e9e9e9;
}


/* ------------------------------ footer ------------------------------ */
/*footer {
    padding: 15px 10px; background-color: #f9f9f9;
}
footer .footer-container:after { content: ''; display: block; clear: both; }
footer .footer-container {
    position: relative;
}
footer .footer-container .copyright {
    font-size: 13px;
}*/
footer { height: 20px; }
footer .footer-container { display: none; }


#search-modal .modal-content {
    background-color: rgba(255, 255, 255, 0);
}
#search-modal .modal-content .modal-header > h4 {
    color: #fff;
}
#search-modal .modal-content .modal-body {
    border: none;
}
#search-modal .modal-content .modal-body input.form-control {
    width: calc(100% - 2rem);
    background-color: transparent; color: #fff;
}
#search-modal .modal-content .modal-close i { color: #fff; }