@charset "utf-8";
/* CSS Document */

/* 1depth */
.gnb_container .gnb_wrap{display: flex;}
.gnb_container .gnb_wrap > li{position: relative; flex: 1 0 auto;  height: 47px; opacity: 0.5; overflow: hidden;}
.gnb_container .gnb_wrap > li > a{display:  block; height: 100%; box-sizing: border-box; background-position: center; background-repeat: no-repeat;}
.gnb_container .gnb_wrap > li > a.gnb_dashboard{background-image: url("../img/gnb_dashboard.png"); background-size: 18px 18px;}
.gnb_container .gnb_wrap > li > a.gnb_member{background-image: url("../img/gnb_member.png"); background-size: 18px 18px;}
.gnb_container .gnb_wrap > li > a.gnb_board{background-image: url("../img/gnb_board.png"); background-size: 18px 17px;}
.gnb_container .gnb_wrap > li > a.gnb_contents{background-image: url("../img/gnb_contents.png"); background-size: 18px 17px;}
.gnb_container .gnb_wrap > li > a.gnb_design{background-image: url("../img/gnb_design.png"); background-size: 17px 17px;}
.gnb_container .gnb_wrap > li > a.gnb_site{background-image: url("../img/gnb_site.png"); background-size: 20px 20px;}
.gnb_container .gnb_wrap > li > a.gnb_statistics{background-image: url("../img/gnb_statistics.png"); background-size: 20px 18px;}
.gnb_container .gnb_wrap > li > a > span{display: none; width: 100%; height: 100%; font-size: 14px; font-size: 1.4rem; line-height: 20px; line-height: 2.0rem; letter-spacing: -0.045em; font-weight: 300; color:#fff; text-align: center; padding-top: 42px; box-sizing: border-box;}
.gnb_container .gnb_wrap > li.active{background-color: #6d13ff; opacity: 1;}
.gnb_container .gnb_wrap > li:hover{opacity: 1;}

/* 2depth */
.gnb_container .gnb_wrap > li > ul{display: block; position: absolute; width: 0; height: 0; top:0; right: 0; padding-left:30px; padding-top: 31px; padding-bottom: 33px; box-sizing: border-box; transform: translateX(100%); background-color: #6d13ff;}
.gnb_container .gnb_wrap > li > ul > li{position: relative; overflow: hidden; padding-top: 5px; padding-bottom: 7px;}
.gnb_container .gnb_wrap > li > ul > li:first-child{padding-top: 0;}
.gnb_container .gnb_wrap > li > ul > li:last-child{padding-bottom: 0;}
.gnb_container .gnb_wrap > li > ul > li.active{overflow: hidden;}
.gnb_container .gnb_wrap > li > ul > li > a{position: relative; display: block; font-size: 14px; font-size: 1.4rem; line-height: 20px; line-height: 2.0rem; letter-spacing: -0.02em; font-weight: 400; color:#b587ff; transition: all 0.3s;}
.gnb_container .gnb_wrap > li > ul > li > a:after{display: none; content:''; position: absolute; width: 100%; top:50%; right:0; transform: translateY(-50%); border-bottom: 2px solid #fff;}
.gnb_container .gnb_wrap > li > ul > li:hover > a{color:rgba(255,255,255,1);}
.gnb_container .gnb_wrap > li > ul > li:hover > ul{display: block!important;}
.gnb_container .gnb_wrap > li > ul > li > ul.hidden-important{display: none !important;}
.gnb_container .gnb_wrap > li > ul > li.active > a{font-weight: 500; color:rgba(255,255,255,1);}
.gnb_container .gnb_wrap > li > ul > li.active > a:after{display: block;}
.gnb_container .gnb_wrap > li > ul > li > a > span{position: relative; z-index: 1; padding-right: 20px; background-color: #6d13ff;}


.gnb_container .gnb_wrap > li > ul > li > ul{overflow: hidden; position: absolute; width: 0; height: 0; top:calc(-50% - 18px); right: 0; padding-left:30px; padding-top: 26px; padding-bottom: 33px; box-sizing: border-box;
    transform: translateX(100%); background-color: #6d13ff;}
.gnb_container .gnb_wrap > li > ul > li > ul > li{position: relative; padding-top: 5px; padding-bottom: 7px;}
.gnb_container .gnb_wrap > li > ul > li > ul > li > a{position: relative; display: block; font-size: 14px; font-size: 1.4rem; line-height: 20px; line-height: 2.0rem; letter-spacing: -0.02em; font-weight: 400; color:#b587ff; transition: all 0.3s;}
.gnb_container .gnb_wrap > li > ul > li > ul > li:hover > a{color:#fff;}
.gnb_container .gnb_wrap > li > ul > li > ul > li.active > a{color:#fff;}

/* 클릭 gnb */
.click_header_dim{width: 100%; position: fixed; height: 100%; left: 0; top: 0; background-color: #000; opacity: 0.6; z-index: 100; display: none;}
.click_header_wrap{position: fixed; right:-100%; z-index: 101; height: 100%; transition: all 0.5s; background-color: rgba(0, 0, 0, 0); width: 424px;}
.click_header_wrap.active{right:0;}
.click_header_wrap > div{overflow-y:scroll; width: 100%; height: 100%; margin-right: 0px; background-color: #000;}
.click_header_wrap > div::-webkit-scrollbar {display: none;}
.click_header_wrap .header_fixed_menu_box{background-color: #1b1b1b; margin-bottom: 36px; padding-left:36px; padding-right:36px; padding-top: 18px; padding-bottom: 20px;}
.click_header_wrap .logo_box{display: table; width: 100%; box-sizing: border-box; padding-top: 32px; padding-right: 36px; padding-bottom: 32px; padding-left: 36px;}
.click_header_wrap .logo_box .title{}
/*.click_header_wrap .logo_box > div, .click_header_wrap .logo_box > a{display: table-cell; vertical-align: bottom;}*/
.click_header_wrap .logo_box > div img, .click_header_wrap .logo_box > a img{/*width:241px;*/}
.click_header_wrap .logo_box .close_menu {display:table-cell; cursor: pointer;}
.click_header_wrap .logo_box .close_menu > img{width: 29px; height: 29px;}
.click_header_wrap .logo_box .m_logo{display: table-cell; text-align: left;}
.click_header_wrap .gnb_wrap{text-align: left !important;}
.click_header_wrap .gnb_wrap > li{text-align: left !important;}
/*.click_header_wrap .gnb_wrap > div{font-size:0; text-align: left;}*/
.click_header_wrap .gnb_wrap > li{position:relative; display:block; box-sizing:border-box; /*margin-bottom: 25px;*/ padding-right: 0;}
.click_header_wrap .gnb_wrap > li > a{display: block; padding-bottom: 20px; margin-bottom: 20px;
    background-image:url("../img/common_icon/m_arrow.png"); background-repeat: no-repeat; background-position: right top 10px; background-size:16px 9px;
    transition:all 0s; transition-delay: .3s; border-bottom: 2px solid transparent;
    font-size:20px; font-size:2.0rem; line-height:26px; line-height:2.6rem; letter-spacing: -0.045em; font-weight: 500; color:#fff;  position: relative;}
.click_header_wrap .gnb_wrap > li > a:after{content: ''; position:absolute; width:0px; top:11px; right:0; border-bottom: 3px solid #7b7efe; transition: width 0.5s; transform: translateY(50%);}
.click_header_wrap .gnb_wrap > li.list_on > a {color:#7b7efe; transition:all 0s; transition-delay:0s; background-size: 21px 0px;}
.click_header_wrap .gnb_wrap > li.list_on > a:after{content: ''; width:100%; transition: width 0.5s;}
.click_header_wrap .gnb_wrap > li > a > span{display: inline-block; background-color: #000; padding-right: 27px; position: relative; z-index: 1;}
.click_header_wrap .gnb_wrap > li > ul{height:0; overflow: hidden;}
.click_header_wrap .gnb_wrap > li > ul > li{font-size:18px; font-size:1.8rem; line-height:24px; line-height:2.4rem; letter-spacing: -0.045em; color: #fff; font-weight: 400;}
.click_header_wrap .gnb_wrap > li.active.list_on > ul{margin-bottom: 55px;}
.click_header_wrap .gnb_wrap > li > ul > li.active{color:#7b7efe;}
.click_header_wrap .gnb_wrap > li > ul > li:first-child > a{padding-top:0;}
.click_header_wrap .gnb_wrap > li > ul > li:last-child > a{padding-bottom:0px;}
.click_header_wrap .gnb_wrap > li > ul > li > a{display: block; padding-top:12px; padding-bottom:5px;}
.click_header_wrap .gnb_wrap > li > ul > li > ul{display:none; padding-top: 15px; padding-bottom: 15px;} /*게시판목록이 너무길어서 임의로 none처리 ...hsj*/  /*3depth*/
.click_header_wrap .gnb_wrap > li > ul > li > ul > li{display: block; margin-bottom: 11px;}
.click_header_wrap .gnb_wrap > li.menu_1_0 > ul > li.menu_2_0.active > a{color:#fff;}/* 3depth메뉴갖고있는2depth */
.click_header_wrap .gnb_wrap > li > ul > li > ul > li:last-child{margin-bottom: 0px;}
.click_header_wrap .gnb_wrap > li > ul > li > ul > li > a{position: relative; display:inline-block; padding-left: 20px; color:#fff;}
.click_header_wrap .gnb_wrap > li > ul > li > ul > li > a::after{content:''; position: absolute; top:10px; left:0; width:9px; border-bottom:2px solid #fff;}
.click_header_wrap .gnb_wrap > li > ul > li > ul > li.active > a{color:#7b7efe;}
.click_header_wrap .gnb_wrap > li > ul > li > ul > li.active > a::after{border-color:#7b7efe;}


.click_header_wrap .member_menu_wrap{}
.click_header_wrap .header_util_list_wrap{}
.click_header_wrap .header_util_list_wrap .header_util_list_con{font-size: 0;}
.click_header_wrap .header_util_list_wrap .header_util_list{display: inline-block; vertical-align: middle; position: relative;}
.click_header_wrap .header_util_list_wrap .header_util_list > a{display: inline-block; vertical-align: middle;
    font-size:16px; font-size:1.6rem; line-height:22px; line-height:2.2rem; letter-spacing: -0.045em; font-weight: 300; color:#fff;}
.click_header_wrap .header_util_list_wrap .header_util_list:first-child{/*padding-right: 24px; margin-right: 19px;*/padding-right: 18px; margin-right: 13px;}
.click_header_wrap .header_util_list_wrap .header_util_list:first-child::after{content: ''; position: absolute; top:4px; right:0; height: 18px; border-left:2px solid rgba(255,255,255,0.15);}
.click_header_close_con{display: none; position: absolute; top:60px; right: 60px; cursor: pointer; opacity: 0.4; transition: all 0.2s ease;}
.click_header_close_con img{width:38px;}
.click_header_close_con img.default_img{display:inline;}
.click_header_close_con img.hover_img{display:none;}

.click_header_wrap .member_info_con .member_id{color:#fff;}
.click_header_wrap .member_info_wrap .member_info_con{background-image: url('../img/member_info_con_arrow_gnb.png');background-size: 7px 13px;}

@media all and (max-height: 1000px){
    .gnb_container .gnb_wrap > li:nth-child(12) > ul{top: auto; bottom:0;}
}

@media all and (min-width: 992px){
    .gnb_container .gnb_wrap{display: block; width: 100%;}
    .gnb_container .gnb_wrap > li{width: 100%; height: 73px;}
    .gnb_container .gnb_wrap > li > a{background-position: top 15px center;}
    .gnb_container .gnb_wrap > li > a.gnb_dashboard{background-size: 20px 20px;}
    .gnb_container .gnb_wrap > li > a.gnb_member{background-size: 20px 20px;}
    .gnb_container .gnb_wrap > li > a.gnb_board{background-size: 20px 18px;}
    .gnb_container .gnb_wrap > li > a.gnb_contents{background-size: 20px 18px;}
    .gnb_container .gnb_wrap > li > a.gnb_design{background-size: 19px 19px;}
    .gnb_container .gnb_wrap > li > a.gnb_site{background-size: 24px 24px;}
    .gnb_container .gnb_wrap > li > a.gnb_statistics{background-size: 24px 20px;}
    .gnb_container .gnb_wrap > li > a > span{display: inline-block;}
    .gnb_container .gnb_wrap > li:hover{overflow: visible;}
    .gnb_container .gnb_wrap > li:hover > ul{width: 170px;}
    .gnb_container .gnb_wrap > li > ul > li:hover{overflow: visible;}
    .gnb_container .gnb_wrap > li > ul > li:hover > ul{width: 170px;}

    /* 클릭 gnb */
    .click_header_wrap{width: 100%; background-color: rgba(0,0,0,0.9); }
    .click_header_wrap > div{max-width: none; width: 100%; background-color: transparent;}
    .click_header_wrap .click_header_con{top:50%; transform: translateY(-50%);}
    .click_header_wrap .logo_wrap{margin-bottom: 82px;}
    .click_header_wrap .logo_box{width: auto; padding: 0;}
    .click_header_wrap .logo_box .close_menu{display: none;}
    .click_header_wrap .logo_box .m_logo{display: none;}
    .click_header_wrap .logo_box .close_menu > img{width: 24px; height: 24px;}
    .click_header_wrap .header_fixed_menu_box{position: absolute; width: auto; top:3px; left:253px; background-color: transparent; margin-bottom: 0; padding:0;}
    .click_header_wrap .gnb_wrap{width:calc(100% + 30px); margin-left: -30px; margin-bottom: -30px;}
    .click_header_wrap .gnb_wrap > li{display: inline-block; width:16.66%; padding-left: 30px; box-sizing: border-box; vertical-align: top; margin-bottom: 30px;}
    .click_header_wrap .gnb_wrap > li > ul{height:auto; overflow: hidden;}
    .click_header_wrap .gnb_wrap > li.list_on > ul{margin-bottom: 0px;}
    .click_header_wrap .gnb_wrap > li:hover > a:before{width:100%;}
    .click_header_wrap .gnb_wrap > li.active > a:before{width:100%; border-color:#7b7efe;}
    .click_header_wrap .gnb_wrap > li.active > a{color:#7b7efe;}

    .click_header_wrap .gnb_wrap > li > a{padding-bottom:15px; margin-bottom: 24px; background-image: none;}
    .click_header_wrap .gnb_wrap > li > a:before{content:""; position: absolute; bottom:0; left:0; width:0; border-bottom:2px solid #fff; transition:all .3s;}
    .click_header_wrap .gnb_wrap > li > a:after{display: none;}
    .click_header_wrap .gnb_wrap > li.list_on > a{width: 200px;}
    .click_header_wrap .gnb_wrap > li > a > span{display: inline; background-color: transparent; padding-right: 0;}
    .click_header_wrap .gnb_wrap > li > ul > li{font-size:15px; font-size:1.5rem; line-height:21px; line-height:2.1rem; letter-spacing: -0.01em; font-weight: 300; margin-bottom: 6px;}
    .click_header_wrap .gnb_wrap > li > ul > li:hover > a{color:#7b7efe;}
    .click_header_wrap .gnb_wrap > li > ul > li.active > a{color:#7b7efe;}
    .click_header_wrap .gnb_wrap > li > ul > li > a{display:inline-block; padding-top: 0; padding-right:10px; transition:all .3s;}
    .click_header_wrap .gnb_wrap > li:last-child > ul{transform:translateY(2px);}
    .click_header_wrap .gnb_wrap > li > ul > li > ul{padding-top: 6px; padding-bottom: 13px;} /*3depth*/
    .click_header_wrap .gnb_wrap > li > ul > li > ul > li{margin-bottom: 7px;}
    .click_header_wrap .gnb_wrap > li > ul > li > ul > li > a{padding-left: 13px; transition: all 0.2s ease;}
    .click_header_wrap .gnb_wrap > li > ul > li > ul > li > a::after{top:10px; width:5px; border-bottom:1px solid #fff;}
    .click_header_wrap .gnb_wrap > li > ul > li > ul > li:hover > a{color:#7b7efe;}
    .click_header_wrap .gnb_wrap > li > ul > li > ul > li:hover > a::after{border-color:#7b7efe;}

    .click_header_close_con{display: inline-block;}
    .click_header_wrap .header_util_list_wrap .header_util_list{margin-right: 29px;}
    .click_header_wrap .header_util_list_wrap .header_util_list:first-child{padding-right: 0;}
    .click_header_wrap .header_util_list_wrap .header_util_list:first-child::after{border-left:none;}
    .click_header_wrap .header_util_list_wrap .header_util_list:last-child{margin-right: 0;}
    .click_header_wrap .header_util_list_wrap .header_util_list > a{padding-right: 19px;
        font-size:15px; font-size:1.5rem; line-height:21px; line-height:2.1rem; letter-spacing: -0.01em;
        background-image: url("../img/common_icon/click_gnb_util_arrow.png"); background-repeat: no-repeat; background-position: right center;}
    .click_header_wrap .header_video_con{display: none;}
    .click_header_close_con:hover{opacity: 1;}
}