@charset "utf-8";
/* header - css setting start */
body.hidden{overflow: hidden;}

.selArea{
    background:
    none;
    padding:0;
    margin:0;
    background: #fff;
    max-width: 1320px;
}
.selArea div.dv-select{width: 35%; margin:0;border: none;background: none;height: 38px;color: #111111;font-size:14px; position:relative}
.selArea div.dv-select::after{content:''; width:1px; height:20px; background:#cccccc; position:absolute; top: 9px; right:0;}
div.dv-select > label{height:38px;line-height: 38px;font-size: 14px;color: #111;padding-left: 15px;}
.selArea div.dv-select .spn-sel-arrow{background-image: url(/images/btn/btn-down-bk-001.png);width: 7px;height: 4px;background-size: contain;top: calc(50% - 2px);right: 15px;}

div.dv-select > select{height: 38px; line-height: 38px; padding-left: 15px;}
div.dv-select > select option{color: #111111;font-size:14px;padding: 0.5rem;}
.selArea span.input{width: calc(60% - 20px);margin: 0;}
.selArea span.input input[type=text]{
    border: none;
    height: 38px;
    font-size: 14px;
    background: none;
}

.selArea span.search{width:21px;height: 21px;margin-right: 10px;}
.selArea .btnOrange{font-size:0;height: 21px;width: 21px;background: none;line-height: 21px;background: url(/images/btn/btn-search-bk.png);}


/*************************************** header ***************************************/
.sec-header{}
#header{position: fixed;width: 100%;top:0;left: 0;z-index: 101;}
#header .header{border-bottom:1px solid rgb(229 229 229 / 30%);position: relative; z-index: 1;}
#header .header > div{
    display: flex;
    justify-content: space-between;
    padding: 1.5rem 0;
    align-items: center;
    transition: all .2s;
}
#header .h-logo{}
#header .h-btn{
    display: flex;
    align-items: center;
}
#header .h-search-btn{position: relative;min-width: 23px;min-height: 23px;}
#header .h-search-btn .btn{
    /* position: absolute; */
    right: 11px;
    top: 7px;
}
#header .h-search-btn .btn img{margin:0 auto}
#header .h-search-btn .btn p{
  color:#fff;
  font-size:12px;
  padding-top: 5px;
  text-align:center;
}
#header .h-search-btn .btn.mo{display:none;}

#header .selArea{
    background: #f5f5f5;
    border-radius: 8px;
    width: 400px;
    display:none;
}

#header .h-search-btn.open .btn{display: none;}
#header .h-search-btn.open .h-search{display:block;}


#header .h-mypage{
    margin-left: 3rem;
}
#header .h-mypage img{margin:0 auto}

#header .h-mypage p{
  color:#fff;
  font-size:12px;
  padding-top: 5px;
}
#header .h-logout{
    margin-left: 3rem;
}
#header .h-logout img{margin:0 auto}

#header .h-logout p{
  color:#fff;
  font-size:12px;
  padding-top: 5px;
}


#header .nav-wrap{border-bottom: 1px solid rgb(229 229 229 / 30%);position: relative;z-index: 1;}
#header .nav-wrap > div{flex-wrap: wrap;display:flex; border-left:1px solid rgb(229 229 229 / 30%);align-items: center;}
#header .all-gnb-btn{
    /* width:52px; */
    text-align: center;
    /* height: 100%; */
}
#header .all-gnb-btn a{
    display: block;
    /* padding:2rem; */
    margin-left: 3rem;
}
#header .all-gnb-btn img{
  margin:0 auto;
}
#header .all-gnb-btn p{
  color:#fff;
  font-size:12px;
  padding-top: 5px;
}
#header .nav{/* padding-right: 8rem; */border-right:1px solid rgba(229, 229, 229, 0.3); /*border-left:1px solid rgba(229, 229, 229, 0.3);*/width: calc(100%);}
#header .nav > ul{display:flex;justify-content: space-between;width: 100%;}
#header .nav > ul > li{/* position:relative; */width: calc(100% / 7);text-align: center;}

#header .nav > ul > li > a{line-height: 52px;display: block;color: #fff;position: relative;}
#header .nav > ul > li > a::after{content:''; width:1px; height:20px;background: #e5e5e5;opacity: 1; position:absolute; right:0; top:calc(50% - 10px);}
#header .nav > ul > li:last-child > a::after{content:none;}

#header .depth02-wr{display:none; position:absolute;background:#fff;width: 100vw;left: 50%; top:100%; border: 1px solid #cccccc;z-index: 1;transform: translateX(-50vw);}
#header .depth02-wr h2{font-size: 2.4rem; color:#000;font-weight: 600;width: 30vw;padding: 4rem 0;background-color: #fafafa;background-image: url(/images/header/gnb_bg.png);background-repeat: no-repeat;background-position: bottom right;padding-left: calc(50vw - 660px);text-align: left;}
#header .nav-depth02{display:grid;grid-template-columns: repeat(4, minmax(0, 1fr));padding: 2.5rem 6rem;width: calc(70vw - (50vw - 660px));align-items: center;}
#header .services .nav-depth02{grid-template-columns: repeat(3, minmax(0, 1fr));}
#header .nav-depth02 li{text-align:center;}
#header .nav-depth02 li a{/* padding:1rem 0; */ color:#111;display: block;font-size: 14ppx;padding: 1rem 2rem;text-align: left;max-width: 227px;}
#header .nav-depth02 li a:hover{background:#f4f5f9; }
#header .nav-depth02 li:hover a{ }
#header .nav > ul > li:last-child .nav-depth02{left:unset;right: -2px;}

#header .nav-depth02.row{grid-template-columns: none;}
#header .nav-depth02.row > li{border-bottom: 1px solid #efefef80;padding: 1.5rem 0;}
#header .nav-depth02.row > li:last-child{border-bottom:none;}
#header .nav-depth02.row > li:first-child{padding-top:0;}
#header .nav-depth02.row .nav-depth03{display:grid;grid-template-columns: repeat(4, minmax(0, 1fr));}
#header .nav-depth02.row .nav-depth03 li{}
#header .nav-depth02.row .nav-depth03 li a{
    color: #999;
    font-weight: 400;
}

#header .nav-depth02.row .nav-depth03.bk li a{color:#111;}


#header.on{background: #fff;}
#header.on .header{border-color:rgb(85 85 85 / 30%);}
#header.on .nav-wrap{border-color:rgb(85 85 85 / 30%);}
#header.on .nav-wrap > div{border-color:rgb(85 85 85 / 30%);}
#header.on .nav{border-color:rgb(85 85 85 / 30%);}
#header.on .nav > ul{}
#header.on .nav > ul > li{}
#header.on .nav > ul > li::after{background-color: #111;}
#header.on .nav > ul > li > a{color:#111;}

#header.top .header > div{padding: 2.5rem 0;}

#header .nav > ul > li.on{}
#header .nav > ul > li.on .depth02-wr{display: flex; justify-content: flex-start;}


#header.on .h-search-btn .btn p{color:#111;}
#header.on .h-mypage p{color:#111;}
#header.on .h-logout p{color:#111;}
#header.on .all-gnb-btn p{color:#111;}
#header.on .alarm-btn p{color:#111;}

/* 전체메뉴 */
#SiteMap{position:fixed;top: -110%; right:0;width: 100vw;height: 100vh; background:#fff;padding: 160px 0px 100px;transition:all ease .5s;overflow-y: scroll;z-index: 100;}
#SiteMap.active{top:0;}
#SiteMap a{color: #666;}
#SiteMap .btn-close{
  display: none;
}
#SiteMap.active .btn-close{
    display: block;
    position: fixed;
    top: calc(160px + 60px - 23px);
    right: calc((100% - 1320px) / 2 - 23px);
    z-index: 99;
}
#SiteMap .btn-close a{
    width: 23px;
    height: 23px;
    display: block;
    position: relative;
}
#SiteMap .btn-close span{
    width:30px;
    height:2px;
    background-color:#000;
    position: absolute;
}
#SiteMap .btn-close span:nth-child(1){top: 0;left: 0;transform: rotate(45deg);transform-origin: top left;}
#SiteMap .btn-close span:nth-child(2){transform: rotate(-45deg);transform-origin: top right;top: 0;right: 0;margin: 0px 3px 0px 0px;}

#SiteMap h2{
    font-size: 3.2rem;
    border-bottom: 2px solid #000;
    color: #000;
    padding-top: 6rem;
    padding-bottom: 1rem;
}
#SiteMap ul.gnb-depth01{
}
#SiteMap ul.gnb-depth01 > li{
    display: flex;
    flex-wrap: wrap;
    padding: 3rem 0;
    border-bottom: 1px solid #cccccc;
}
#SiteMap ul.gnb-depth01 > li.mo-show{display:none;}
#SiteMap ul.gnb-depth01 > li h6{
    width: 25%;
    color: #333;
    font-size: 18px;
}
#SiteMap ul.gnb-depth02 {
    width: 75%;
    display:
    grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
}
#SiteMap ul.gnb-depth02 > li{}
#SiteMap ul.gnb-depth02 > li > a{color: #333;font-weight: 500;font-size: 16px;}
#SiteMap ul.gnb-depth03 {
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
    padding-top:2rem;
}
#SiteMap ul.gnb-depth03 > li{
}
#SiteMap ul.gnb-depth03 > li > a{
    color: #999;
    font-weight: 400;
}
#SiteMap .row{grid-column: span 3 / span 3;border-bottom: 1px solid #efefef80; padding-bottom:2rem;}
#SiteMap .row:last-child{border-bottom:none;}





/* header - css setting end */

/* header -media size setting start */
@media all and (max-width:1420px) {

    #SiteMap {}
    #SiteMap.active .btn-close{
        right: 2%;
    }

}
@media all and (max-width:1320px) {

}


@media all and (max-width:1240px) {

    #header .nav-wrap{display:none !important;}
    #header .nav{}

    #SiteMap{
        padding-top: 107px;
    }
    #SiteMap.active .btn-close{
        right: 2%;
        top: calc(107px + 60px - 23px);
    }


}


@media all and (max-width:1024px) {

    #SiteMap{}
    #SiteMap h2{}
    #SiteMap ul.gnb-depth01{}
    #SiteMap ul.gnb-depth01 > li{}
    #SiteMap ul.gnb-depth01 > li h6{
        width: 100%;
    }
    #SiteMap ul.gnb-depth02{
        width: 100%;
        padding-top: 20px;
    }



}


@media all and (max-width:840px) {

  .selArea{}
  .selArea div.dv-select{}
  .selArea div.dv-select::after{}
  div.dv-select > label{}
  .selArea div.dv-select .spn-sel-arrow{}

  div.dv-select > select{}
  div.dv-select > select option{}
  .selArea span.input{}
  .selArea span.input input[type=text]{}

  .selArea span.search{}
  .selArea .btnOrange{}

  #header .h-search-btn .btn{display:none;}
  #header .h-search-btn .btn.mo{display:block; margin-left: 3rem;}
  #header .selArea{display:none !important;}
}


@media all and (max-width:640px) {

    #header {}
    #header .h-logo{}
    #header .h-logo a{}
    #header .h-logo img{
        max-height: 5rem;
    }
    #header .h-mypage{margin-left: 1rem;}
    #header .h-logout{margin-left: 1rem;}
    #header .all-gnb-btn a{margin-left: 1rem;}

  #header .h-search-btn .btn p,
  #header .h-mypage p,
  #header .h-logout p,
  #header .all-gnb-btn p,#header .alarm-btn p{font-size:10px;}
  #header .alarm-btn p{padding-top:5px; color:#fff; text-align:center;}

    #SiteMap{
        overflow: auto;
    }
    #SiteMap h2{
        /* display: none; */
        font-size: 0;
        border-bottom: none;
    }
    #SiteMap ul.gnb-depth01{
        max-width: 300px;
        margin: 0 auto;
    }
    #SiteMap ul.gnb-depth01 > li{
        border-bottom: none;
        padding: 1rem 0 2rem;
    }
	#SiteMap ul.gnb-depth01 > li.mo-show{display:block;}
	#SiteMap ul.gnb-depth01 > li.mo-show h6{background:none;}
	#SiteMap ul.gnb-depth01 > li.mo-hide{display:none;}
    #SiteMap ul.gnb-depth01 > li h6{
        /* text-align: center; */
        background-image: url(/images/btn/btn-down-bk-002.png);
        background-repeat: no-repeat;
        background-position:right center;
    }
    #SiteMap ul.gnb-depth02{grid-template-columns: repeat(1, minmax(0, 1fr));display: none;padding-top: 10px;}
    #SiteMap ul.gnb-depth02 > li{
        /* text-align: center; */
        padding: 0.5rem 0;
    }
    #SiteMap ul.gnb-depth02 > li > a{}

    #SiteMap.active .btn-close{
        right: 10px;
        top: calc(107px + 10px);
    }
    #header .h-search-btn .btn.mo{margin-left: 1rem;}
}


@media all and (max-width:480px) {

}
/* header - media size setting end */
@media all and (min-width:641px) {
.alarm-btn{display:none;}
}