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

/* 1depth */
.gnb_container .gnb_wrap{display: flex;}
.gnb_container .gnb_wrap > li{position: relative; flex: 1 0 auto;  height: 49px; opacity: 0.5; overflow: hidden;}
.gnb_container .gnb_wrap > li > a{display:  block; height: 100%; box-sizing: border-box; background-position: top 13px center; background-repeat: no-repeat;}
.gnb_container .gnb_wrap > li:first-child > a{ background-position: top 15px center; }
.gnb_container .gnb_wrap > li:nth-child(2) > a{ background-position: top 12px center; }
.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: 20px 20px;}
.gnb_container .gnb_wrap > li > a.gnb_board{background-image: url("../img/gnb_board.png"); background-size: 20px 20px;}
.gnb_container .gnb_wrap > li > a.gnb_contents{background-image: url("../img/gnb_contents.png"); background-size: 20px 20px;}
.gnb_container .gnb_wrap > li > a.gnb_design{background-image: url("../img/gnb_design.png"); background-size: 14px 14px;}
.gnb_container .gnb_wrap > li > a.gnb_site{background-image: url("../img/gnb_site.png"); background-size: 20px 22px;}
.gnb_container .gnb_wrap > li > a.gnb_statistics{background-image: url("../img/gnb_statistics.png"); background-size: 20px 20px;}
.gnb_container .gnb_wrap > li > a.gnb_popup{background-image: url("../img/gnb_popup.png"); background-size: 20px 20px;}

[data-wv-os="Mac"] .gnb_container .gnb_wrap > li > a.gnb_dashboard, [data-wv-pc="mobile"] .gnb_container .gnb_wrap > li > a.gnb_dashboard {background-image: url("../img/gnb_dashboard_mac.png"); }
[data-wv-os="Mac"] .gnb_container .gnb_wrap > li > a.gnb_member, [data-wv-pc="mobile"] .gnb_container .gnb_wrap > li > a.gnb_member {background-image: url("../img/gnb_member_mac.png"); background-size: 20px 20px;}
[data-wv-os="Mac"] .gnb_container .gnb_wrap > li > a.gnb_board, [data-wv-pc="mobile"] .gnb_container .gnb_wrap > li > a.gnb_board {background-image: url("../img/gnb_board_mac.png"); background-size: 20px 20px;}
[data-wv-os="Mac"] .gnb_container .gnb_wrap > li > a.gnb_contents, [data-wv-pc="mobile"] .gnb_container .gnb_wrap > li > a.gnb_contents {background-image: url("../img/gnb_contents_mac.png"); background-size: 20px 20px;}
[data-wv-os="Mac"] .gnb_container .gnb_wrap > li > a.gnb_design, [data-wv-pc="mobile"] .gnb_container .gnb_wrap > li > a.gnb_design {background-image: url("../img/gnb_design_mac.png"); }
[data-wv-os="Mac"] .gnb_container .gnb_wrap > li > a.gnb_site, [data-wv-pc="mobile"] .gnb_container .gnb_wrap > li > a.gnb_site {background-image: url("../img/gnb_site_mac.png"); }
[data-wv-os="Mac"] .gnb_container .gnb_wrap > li > a.gnb_statistics, [data-wv-pc="mobile"] .gnb_container .gnb_wrap > li > a.gnb_statistics {background-image: url("../img/gnb_statistics_mac.png"); background-size: 20px 20px;}
[data-wv-os="Mac"] .gnb_container .gnb_wrap > li > a.gnb_popup, [data-wv-pc="mobile"] .gnb_container .gnb_wrap > li > a.gnb_popup {background-image: url("../img/gnb_popup_mac.png"); background-size: 20px 20px;}


.gnb_container .gnb_wrap > li > a > span{display: none; width: 100%; height: 100%; font-family: "Carmen Sans"; font-size:13px; font-size:1.3rem; line-height:19px; line-height:1.9rem; letter-spacing: 0.04em; font-weight: 200; color:#fff; text-align: center; padding-top: 40px; box-sizing: border-box;}
[data-wv-os="Mac"] .gnb_container .gnb_wrap > li > a > span { font-weight: 400; }
.gnb_container .gnb_wrap > li.active{background-color: #6738ff; opacity: 1;}
.gnb_container .gnb_wrap > li:hover{opacity: 1;}
.gnb_container .gnb_wrap > li:hover > ul{overflow: visible;}

/* 2depth */
.gnb_container .gnb_wrap > li > ul{display: block; position: absolute; width: 0; height: 0; top:0; right: 0; padding: 21px 20px 23px 22px; box-sizing: border-box; transform: translateX(100%); background-color: #6738ff;
    max-height: 400px; overflow-y: auto;}
.gnb_container .gnb_wrap > li > ul::-webkit-scrollbar{width: 6px;}
.gnb_container .gnb_wrap > li > ul::-webkit-scrollbar-thumb{background-color: #fff; bakground-clip:padding-box; border: 2px solid #6738ff;}
.gnb_container .gnb_wrap > li > ul::-webkit-scrollbar-track{background-color: transparent;}
.gnb_container .gnb_wrap > li > ul > li{position: relative; overflow: hidden; padding-top: 1px; padding-bottom: 3px;}
.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:15px; font-size:1.5rem; line-height:21px; line-height:2.1rem; letter-spacing: -0.02em; font-weight: 500; color:#bf97ff; transition: all 0.3s;}
.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{ color:rgba(255,255,255,1);}
.gnb_container .gnb_wrap > li > ul > li > a > span{position: relative; z-index: 1; display: block; /*padding-right: 12px; */background-color: #6738ff; font-family: "Carmen Sans"; white-space: nowrap; }


.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: #6738ff;}
.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; width: 424px;}
.click_header_wrap.active{right:0;}
.click_header_wrap > div{overflow-y:scroll; width: 100%; height: 100%; margin-right: 0px; background-color: #6738ff;}
.click_header_wrap > div::-webkit-scrollbar {display: none;}
.click_header_wrap .header_fixed_menu_box{background-color: #7750f6; margin-bottom: 36px; padding-left:36px; padding-right:36px; padding-top: 18px; padding-bottom: 16px;}
.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 .web_logo a { font-family: "Helvetica Neue", "Carmen Sans"; font-size:46px; font-size:4.6rem; line-height:52px; line-height:5.2rem; letter-spacing: -0.01em; font-weight: 700; color: #ffffff; }
/*.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: inline-block; cursor: pointer; float: right; margin-top: 7px;}
.click_header_wrap .logo_box .close_menu > img{width: 19px; height: 19px;}
.click_header_wrap .logo_box .m_logo{display: inline-block; text-align: left;}
.click_header_wrap .logo_box .m_logo { font-family: "Helvetica Neue", "Carmen Sans"; font-size:26px; font-size:2.6rem; line-height:32px; line-height:3.2rem; font-weight: 700; color: #fff; margin-top: 5px;}
.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: 10px;
    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:19px; font-size:1.9rem; line-height:25px; line-height:2.5rem; letter-spacing: -0.0em; 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: 2px solid #fff; transition: width 0.5s; transform: translateY(50%);}
.click_header_wrap .gnb_wrap > li.list_on > a {color:#fff; 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; padding-right: 20px; position: relative; z-index: 1; background-color: #6738ff; font-family: "Carmen Sans";}
.click_header_wrap .gnb_wrap > li > ul{height:0; overflow: hidden;}
.click_header_wrap .gnb_wrap > li > ul > li{font-size:16px; font-size:1.6rem; line-height:22px; line-height:2.2rem; letter-spacing: -0.045em; color: #fff; font-weight: 300;}
.click_header_wrap .gnb_wrap > li.active.list_on > ul{margin-bottom: 55px;}
.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:6px; 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: 71px;}
    .gnb_container .gnb_wrap > li > a{background-position: top 15px center;}
    .gnb_container .gnb_wrap > li:first-child > a{ background-position: top 15px center; }
    .gnb_container .gnb_wrap > li:nth-child(2) > 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: auto; min-width: 170px;}
    .gnb_container .gnb_wrap > li > ul > li:hover{overflow: visible;}
    .gnb_container .gnb_wrap > li > ul > li:hover > ul{width: 170px;}
    .gnb_container .gnb_wrap > li > ul > li > ul{min-width: 170px;}

    /* 클릭 gnb */
    .click_header_wrap{width: 100%; background-color: #6738ff; }
    .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{ display: none; position: absolute; width: auto; top:3px; left:253px; background-color: transparent; margin-bottom: 0; padding:0;}
    .click_header_wrap .gnb_wrap{width:calc(100% + 20px); margin-left: -20px; margin-bottom: -20px;}
    .click_header_wrap .gnb_wrap > li{display: inline-block; width:14.28%; padding-left: 20px; box-sizing: border-box; vertical-align: top; margin-bottom: 50px;}
    .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{transform: translateX(0);}
    .click_header_wrap .gnb_wrap > li.active > a::before{transform: translateX(0);}
    /*.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; overflow: hidden; font-size:19px; font-size:1.9rem; line-height:25px; line-height:2.5rem; }
    .click_header_wrap .gnb_wrap > li > a::before{content:""; position: absolute; bottom:0; left:0; width:100%; border-bottom:2px solid #fff; transition:transform .3s; transform: translateX(calc(-100% - 1px));}
    .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; padding-right: 0; }
    .click_header_wrap .gnb_wrap > li > ul > li{margin-bottom: 6px; font-size:18px; font-size:1.8rem; line-height:24px; line-height:2.4rem; font-weight: 400; }
    .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 > ul > li > a > span { font-size:15px; font-size:1.5rem; line-height:21px; line-height:2.1rem; letter-spacing: -0.0em; font-weight: 200; color: rgba(255,255,255,0.8); transition: color 0.2s ease; }
    .click_header_wrap .gnb_wrap > li > ul > li > a:hover > span {color: #fff; font-weight: 400;}
    .click_header_wrap .gnb_wrap > li > ul > li.active > a > span{color: #fff; font-weight: 400;}
    .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;}
}

@media all and (min-width: 1200px) {
    .click_header_wrap .gnb_wrap{width:calc(100% + 30px); margin-left: -30px; margin-bottom: -30px;}
    .click_header_wrap .gnb_wrap > li{ padding-left: 30px; }
    .click_header_wrap .gnb_wrap > li > a { font-size:20px; font-size:2.0rem; line-height:26px; line-height:2.6rem;  }
    .click_header_wrap .gnb_wrap > li > ul > li > a > span { font-size:16px; font-size:1.6rem; line-height:22px; line-height:2.2rem; }
}