@charset "utf-8";
/*********** Layout.css ***********/
/* UI */
* {
  -webkit-box-sizing:border-box;
     -moz-box-sizing:border-box;
          box-sizing:border-box;
}

:root {
    --main-color: #880056; /* 주요 색상 변수 정의 */
    --menu-info-height: 180px;
    --menu-logout-heigth: 46px;
    --halaven-color: #a81068;
}

/* wrapper */
#wrap {position:relative; overflow:hidden; width:100%; min-width: 320px; }
.default-wrap {overflow:hidden; width:100%; max-width:1080px; margin:auto;}
.narrow .default-wrap {overflow:hidden; width:100%; max-width:862px; margin:auto;}
/* header */
#headerWrap { width: 100%;  height: 167px; }
#headerWrap::before { position: absolute; content: ''; right:50%; top: 0px; width: 100%; height: 167px;   background-image: url(../../images/common/bg_header.gif); background-repeat: repeat-x; background-position: top 50px left; }
.header { position: relative; padding-top:50px; padding-bottom:25px; }
.gnb-wrap-info { position: absolute; height: 50px; top: 0px; right: 0px; }
.gnb-wrap-info .user-name { float: left; font-size: 14px; color: #666666; line-height: 50px; }
.gnb-wrap-info > ul { float: left; }
.gnb-wrap-info > ul li { float: left; }
.gnb-wrap-info > ul li a { position: relative; font-size: 14px; color: #666; padding: 0px 10px; line-height: 50px; }
.gnb-wrap-info > ul li:not(:last-child) a::after { position: absolute; content: ''; right: 0px; top: 5px; width: 1px; height: 12px; background-color: #989898; }
.gnb-wrap-info > ul li:last-child a { padding-right: 0px; }
.header .logo { overflow: hidden; position: relative; width: 254px; height: 94px; background-repeat: no-repeat; z-index: 2; border-radius: 0px 47px 47px 0px; background-color: #880056; padding: 22px 21px; }
.header .logo  a img.max { max-width:200px; }    
.gnb-wrap .btn-gnb-close, .btn-gnb-open { display: none; }
.header .gnb { position: absolute; top: 50px; left: -2px; width: 100%; height: 94px; background-color: #fff;  }  
.header .gnb::before { position: absolute; content: ''; top: 13px; left: 0px;  width: 100%; height: 68px; border-radius: 34px; background-color: rgb(255, 255, 255); box-shadow: 0px 0px 5px 0px rgba(58, 58, 58, 0.2); z-index: 1; }
.header .gnb > ul { overflow: visible; position: relative; width: 100%; height: 94px; z-index: 2; padding-top: 13px; }
.header .gnb > ul > li { position: absolute; height: 69px; top: 13px; }
.header .gnb > ul > li.last { right: 24px; }
.header .gnb > ul > li:nth-child(4) { right: 168px; }
.header .gnb > ul > li:nth-child(3) { right: 325px; }
.header .gnb > ul > li:nth-child(2) { right: 492px; }
.header .gnb > ul > li:nth-child(1) { right: 663px; }

.header .gnb > ul > li > a {position:relative; display:block; font-size: 21px; color: #880056; padding: 24px 0px; line-height: 1; letter-spacing: -1.5px; }
.gnb-wrap .gnb > ul > li > a > .gnb-expand-arrow { display: none; }
.header .gnb > ul > li.halaven > a { color: #a81068; }
.header .gnb > ul > li > a:hover {}

/*여기수정*/
.header .gnb > ul > li.active > a {
    font-weight: bold;
    color: var(--main-color);
}

.header .gnb > ul > li.active > a:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 4px;
    bottom: 0;
    background: #880056;
}

.header .gnb > ul > li > ul { overflow: visible; position: absolute; left: 0px; bottom: -34px; width: 1078px; display: none; height: 37px; }
.header .gnb > ul > li.active > ul { display: block; }
.header .gnb > ul > li > ul > li { float: left; padding-right: 60px; padding-top: 19px;}
.header .gnb > ul > li > ul.gnb-menu-first, .header .gnb > ul > li > ul.gnb-menu-second  { left:-150px;}
.header .gnb > ul > li > ul.gnb-menu-third { left: -275px; }
.header .gnb > ul > li.last > ul { left: auto; right: 0px; width: 480px;}
.header .gnb > ul > li.last > ul li { padding-right: 0px; padding-left: 70px; }
.header .gnb > ul > li > ul > li > a { font-size: 18px; color: #999999;  }
.header .gnb > ul > li > ul > li > a:hover
, .header .gnb > ul > li > ul > li.active > a {
    font-weight: bold;
    color: #880056;
}
/*여기수정*/

.header .btn-menu {display:none;}
.hidden-gnb #headerWrap { display: none; }

/*dimmed*/
.dimmed { display: none; position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); z-index: 9; }
/* contentWrap */
#contentWrap { padding-bottom: 40px; margin:0 auto; }
#contentWrap h2 { overflow:visible; border-bottom: 1px solid #880056;  width:100%; max-width:1080px; margin: 45px auto 40px; }
#contentWrap.narrow h2 { overflow:visible; border-bottom: 1px solid #880056;  width:100%; max-width:862px; margin: 45px auto 40px; }
#contentWrap h2 > span { display: none; } 
#contentWrap h2 > span:last-child { position: relative; display: block; width: 200px; font-size: 32px; font-weight:  bold; color: #595757;  padding-bottom: 18px; text-align: center; }
#contentWrap h2 > span:last-child::after { position: absolute; content: ''; left: 0px; bottom: -3px; width: 100%; height: 5px; background-color: #880056; }
/* footer */
#footerWrap {overflow:hidden; border-top:1px solid #f1f1f1; padding: 30px 0px; background-color: #fff; }
.footer { width:100%; max-width: 830px; margin: 0px auto; }
.footer .left { text-align: center; margin-bottom: 10px; }
.footer .left .logo { display: inline-block; padding: 0px 5px; }
.footer .left .copyright {clear:both; font-size:12px; font-size:0.75rem; color:#808285; margin-top:35px;}
.footer .right { overflow:hidden; text-align: center; }
.footer .right .address p { font-size: 12px; color: #595757;  }
.footer .right .address p + p { margin-top: 8px; }


@media screen and (max-width:1240px) {
}
@media screen and (max-width:1200px) {
}
@media screen and (max-width:1078px) {
    .header .gnb > ul > li:nth-child(4) {right: 132px;}
    .header .gnb > ul > li:nth-child(3) {right: 270px;}
    .header .gnb > ul > li:nth-child(2) {right: 423px;}
    .header .gnb > ul > li:nth-child(1) {right: 576px;}
}
@media screen and (max-width:992px) {
    .default-wrap,.narrow .default-wrap { width:79.33%; }
    #headerWrap { position:relative; height: auto; }
    #headerWrap::before { position: absolute; content: ''; right:0px; top: 0px; width: 100%; height: 60px;   background-image: url(../../images/common/bg_header.gif); background-repeat: repeat-x; background-position: top left; }
    .header { position: relative; padding-top:0px; padding-bottom:0px; }
    .header .logo { position: relative;  z-index: 2; width: 129px; height: 60px; padding: 14px 0px; }
    .header .logo  a img { vertical-align: top; }    
    .btn-gnb-open { display: block; position: absolute; right: 0px; top: 19px; width: 22px; z-index: 2; }
    
    .gnb-wrap {
        position: fixed;
        top: 0px;
        right: -100%;
        width: 65.6%;
        height: 100%;
        background-color: white;
        transition: .3s all;
        box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.35);
        z-index: 10;
    }

    .gnb-wrap::before {
        position: absolute;
        content: '';
        left: 0px;
        top: 0px;
        width: 100%;
        height: 46px;
        background-color: #880056;
    }

    .gnb-wrap .btn-gnb-close {
        display: block;
        position: absolute;
        left: auto;
        top: 10px;
        width: 25px;
        z-index: 2;
        margin: 0.2rem 1rem;
    }

    .gnb-wrap-info {
        position: initial;
        background-color: var(--main-color);
        top: 0px;
        right: 0px;
        height: var(--menu-info-height);
    }

    .gnb-wrap-info .user-name {
        float: none;
        font-size: 1.125rem;
        color: white;
        padding: 3.725rem 1rem 0;
        line-height: 1;
    }

    .gnb-wrap-info > ul {
        float: none;
        padding: 1.725rem 1rem;
    }

    .logout {
        position: absolute;
        width: 100%;
        height: var(--menu-logout-heigth);
        padding: 6px 5.69%;
        bottom: 0px;
        left: 0px;
        background-color: #f5f7fb;
        margin-left: 0px;
    }

    .gnb-wrap-info > ul li:not(.logout) {
        width: 49%;
        float: left;
        border: none;
        border-radius: 0.725rem;
        background-color: white;
        box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.29);
        padding: 0.5rem 0;
    }

    .gnb-wrap-info > ul li:not(.logout):first-child {
        margin-right: 0.375rem;
    }

    .gnb-wrap-info > ul li:not(.logout) a {
        display: block;
        font-size: 14px;
        text-align: center;
        line-height: 38px;
        color: var(--main-color);
        font-weight: 700;
        padding: 0px;
    }

    .gnb-wrap-info > ul li:not(:last-child) a::after {
        display: none;
    }
    /*.gnb-wrap-info > ul li.logout a {
    
    }
*/
    .logout a {
        font-size: 14px;
        line-height: 33px !important;
        padding: 0px;
        padding-left: 1.5rem !important;
        background-image: url(../../images/common/icon_logout.png);
        background-repeat: no-repeat;
        background-size: 14px auto;
        background-position: left center;
    }

    .gnb-wrap > .gnb {
        position: relative;
        top: 0;
        left: 0;
        padding: 0;
        margin: 0;
        background-color: white;
        overflow-y: auto;
    }

    .gnb-wrap > .gnb::before {
        border: none;
        border-radius: 0;
        box-shadow: none;
    }

    .header .gnb {
        height: 71vh;
    }

    .header .gnb > ul {
        overflow-y: auto;
        padding: 0 1.2rem;
        margin: 0;
        height: 100%;
    }

    .header .gnb > ul > li {
        position: initial;
        display: block;
        margin:0;
    }

    .header .gnb > ul > li:last-child {
        border-bottom: none;
    }

    .header .gnb > ul > li.active > a:before {
        height: 0;
    }

    .gnb-wrap > .gnb > ul > li > a, .gnb-wrap > .gnb > ul > li.halaven > a {
        color: #595757;
        font-weight: 500;
        font-size: 1rem;
        padding: 1.5rem 0.5rem;
    }

    .gnb-wrap .gnb > ul > li > a > .gnb-expand-arrow {
        display: inline;
        float: right;
        vertical-align: middle;
        color: #999999;
    }

    .menu-collapsed {
        height: 69px !important;
        transition: height 0.3s ease-out;
    }

    .menu-expanded {
        height: 195px !important;
        transition: height 0.3s ease-out;
    }

    .menu-sub-collapsed {
        display: none !important;
    }

    .menu-sub-expanded {
        display: block !important;
    }

    .expanded-color {
        color: #595757;
    }

    .gnb-wrap .gnb > ul > li > a > span.active {
        vertical-align: middle;
    }

    .gnb-wrap > .gnb > ul > li:not(:last-child) > a {
        border-bottom: 1px solid #D3D3D3;
    }

    .header .gnb > ul > li.active {
        height: 195px;
    }

    .header .gnb > ul > li.active > a {
        color: var(--main-color);
        font-weight: 500;
    }

    .gnb-wrap > .gnb > ul > li.halaven > a {
        text-transform: uppercase;
    }

    .header .gnb > ul > li > ul {
        display: block;
        position: relative;
        top: 0;
        background-color: #F4F4F4;
        width: 100%;
        height: auto;
    }

    .gnb-menu-first, .gnb-menu-second, .gnb-menu-third {
        left: 0 !important;
    }

    .header .gnb > ul > li.last > ul{
        width:initial;
    }
    .header .gnb > ul > li > ul > li, .header .gnb > ul > li.last > ul > li {
        float: none;
        width: 100%;
        padding: 0.3rem 1.5rem;
    }

    .header .gnb > ul > li > ul > li:last-child {
        padding-bottom: 0.7rem;
    }

    .header .gnb > ul > li > ul > li > a {
        font-size: 0.825rem;
    }

    .header .gnb > ul > li > ul > li > a:hover
    , .header .gnb > ul > li > ul > li.active > a {
        color: var(--main-color);
        font-weight: 500;
    }

    .gnb-open .gnb-wrap {
        right: 0%;
    } 
    .gnb-open .dimmed  { display: block; }

    #contentWrap { padding-bottom: 40px; }
    #contentWrap h2,#contentWrap.narrow h2 { height: 50px; line-height: 50px; border-bottom: 1px solid #880056; overflow:hidden; width:100%; max-width:1080px; margin: 0px auto 50px; padding: 0px 10.335%; border-bottom: 1px solid #a5a5a5; background-color: #f4f4f4; } 
    #contentWrap h2 > span { position: relative; display: block; float: left; font-weight: normal; font-size: 13px; padding-bottom: 0px; }
    #contentWrap h2 > span:first-child { position: relative; display: block; width: auto; font-size: 17px; color: #595757;  padding-bottom: 0px; text-align: left; }
    #contentWrap h2 > span::after { display: none; } 
    #contentWrap h2 > span:nth-child(2) { width: auto; text-align: left; font-size: 17px; color: #880056; font-weight: normal; padding-left: 16px; padding-bottom: 0px; margin-left: 12px; background-image: url(../../images/common/bg_breadcrumb.png); background-repeat: no-repeat; background-position: left center; background-size: 6px auto; }  
    #footerWrap { background-color: #efefef; }
    .footer .left { display: block; text-align: center; margin-bottom: 10px; }
    .footer .left .logo { display: inline-block; height: 26px; }
    .footer .left .logo img { height: 100%; }
    .footer .right { float: none; }
    .footer .right .address p { font-size: 12px; text-align: center; }
    .hidden-gnb #headerWrap { display: block; }    
}

@media screen and (max-width:640px) {
    	
}
@media screen and (max-width:576px) {
    .gnb-wrap-info > ul li:not(.logout) {
        width: 48%;
    }
}
@media screen and (max-width:400px) {
}
@media screen and (max-width:320px) {
    .alert-layer { width:100%; min-width:inherit; min-height:inherit; height:201px; }
}
/*hover 처리*/
@media screen and (min-width:769px) {
   
}