html,body{height:100%;}
body.action{overflow:hidden;height: 100%;}
*{line-height: 1.3;}
#wrap{overflow:hidden;position:relative;min-height:100%;background: #fff;}


.con-area{width:100%;max-width:1500px;margin:0 auto;}
.con-area:after{content:"";display:block;clear:both;}
/*-------------------------------------------------------------------
    @ media
-------------------------------------------------------------------*/
@media screen and (max-width: 1580px) {
	.con-area {padding: 0 50px; max-width:100%;}
	.sub-tabmenu-box {padding: 0 50px; max-width:100%;}
}
@media screen and (max-width: 1024px) {
	.con-area {padding: 0 30px;}
	.sub-tabmenu-box {padding:0 30px;}
}

@media screen and (max-width: 500px) {
	.con-area {padding: 0 25px;}
	.sub-tabmenu-box {padding:0 25px;}
}


/* heading titles */
.h2 {display:block; position: relative; margin-bottom: 30px; border-bottom: 1px solid #dddddd; font-weight: 700; font-size: 2.25rem; color: #000;}
.h2:not(:last-child) {margin-bottom: 0;}
.h3 {display:block; position: relative; margin-bottom: 20px; padding-left: 15px; font-weight: 700; font-size: 1.75rem; color: #000;}
.h3::before {content:""; position: absolute; top: 15%; left: 0; width: 6px; height: 70%; background-color: #6667ab;}
.h4 {display:block; position: relative; margin-bottom: 15px; padding-left: 10px; font-weight: 600; font-size: 1.5rem; color: #000;}
.h4::before {content:""; position: absolute; top: 15%; left: 0; width: 7px; height: 7px; background-color: #6667ab;}
.h5 {margin-bottom: 15px; font-weight: 600; font-size: 1.25rem; color: #000;}
.h6 {margin-bottom: 10px; font-weight: 500; font-size: 1.125rem; color: #000;}
/* //heading titles */


/*-------------------------------------------------------------------
	분류그룹 : header
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
#header {display: block;}
#header .header-area {position: relative; z-index: 300; width: 100%; background:#fff; border-bottom:1px solid #eee;}
#header .header-area::before {content:""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color:transparent}
#header .header-area::after {content:""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color:transparent;}
#header .header-area .header-wrap {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; width: 100%; max-width: 1500px; height: 100px; margin: 0 auto; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -moz-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between;}
#header .header-area .header-wrap #logo {display: block; position: relative; z-index: 2;}
#header .header-area .header-wrap #logo > a {display: block; width: 131px; height: 51px; font-size: 0; background: url(../images/common/logo_on.svg) no-repeat; background-size:contain}
#header .bg {position: fixed; top: 0; left: 0; z-index: 290; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index:19;}

#header.main .header-area {position: absolute; top: 0; left: 0; z-index: 300; width: 100%; background:none; background:rgba(0,0,0,0.05); border-bottom:none;}
#header.main .header-area::before {content:""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color:transparent}
#header.main .header-area::after {content:""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color:transparent;}
#header.main .header-area .header-wrap {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; width: 100%; max-width: 1500px; height: 100px; margin: 0 auto; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -moz-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between;}
#header.main .header-area .header-wrap #logo {display: block; position: relative; z-index: 2;}
#header.main .header-area .header-wrap #logo > a {display: block; width: 131px; height: 51px; font-size: 0; background: url(../images/common/logo.svg) no-repeat; background-size:contain}
#header.main .bg {position: fixed; top: 0; left: 0; z-index: 290; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index:19;}

#header .header-area.active {border-bottom:none;}
#header .header-area.active::before {background-color:#fff}
#header .header-area.active::after {background-color: #e9e9e9;}
#header .header-area.active .header-wrap #logo > a {background:url(../images/common/logo_on.svg) no-repeat;}
#header .header-area.active #gnb .menu > li > .m-tit {color:#000;}
/*-------------------------------------------------------------------
    @interaction
-------------------------------------------------------------------*/
#header .header-area.fixed {position: fixed; animation: header_fixed 0.3s forwards; box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);}
#header .header-area .header-wrap {transition: height 0.3s;}
#header .header-area.fixed .header-wrap {transition: height 0.3s 0.1s; height: 60px;}
#header .header-area .header-wrap #logo > a > img {transition: height 0.3s;}
#header .header-area.fixed .header-wrap #logo > a > img {transition: height 0s; height: 35px;}

#header .bg {transition: opacity 0.3s, visibility 0s 0.3s; visibility: hidden; opacity: 0;}
#header .bg.on {transition: opacity 0.3s, visibility 0s 0s; visibility: visible; opacity: 1;}

@keyframes header_fixed {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(0);
    }
}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1580px) {
    #header .header-area,
    #header.main .header-area  {padding: 0 40px;}
}
@media screen and (max-width: 1024px) {
    #header .header-area,
    #header.main .header-area {padding: 0 30px;}
    #header .header-area .header-wrap,
    #header.main .header-area .header-wrap {height: 80px;}
    #header .header-area .header-wrap #logo > a,
    #header.main .header-area .header-wrap #logo > a {height:45px;}
}
@media screen and (max-width: 600px) {
    #header .header-area .header-wrap,
    #header.main .header-area .header-wrap {height: 65px;}
    #header .header-area .header-wrap #logo > a,
    #header.main .header-area .header-wrap #logo > a {height:40px;}
}
@media screen and (max-width: 500px) {
    #header .header-area,
    #header.main .header-area  {padding: 0 25px;}
}

/*-------------------------------------------------------------------
	분류그룹 : header > gnb
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
#header #gnb {display: block; height: 100%;}
#header #gnb .menu {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; height: 100%;}
#header #gnb .menu > li {display: block; position:relative;}
#header #gnb .menu > li > .m-tit {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; position: relative; z-index: 2; height: 100%; padding: 0 45px; background-color: transparent; font-weight: 600; font-size: 1.125rem; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; align-items: center; text-align:center; }
#header #gnb .menu > li > .m-tit::before {content:""; position: absolute; bottom: 0; left: 50%; width: 0; height: 4px; background-color: #E84242; transform: translateX(-50%);}
#header #gnb .menu > li > .m-tit > span {display: block;}
#header #gnb .menu > li > .m-tit.link > span {padding-right: 20px; background: url(/images/front/new/common/i_link.svg) no-repeat center right / 14px;}
/* #header #gnb .menu > li .sub-wrap {display: block; position: absolute; bottom: 0; left: 0; width: 100%; z-index: -1;} */
#header #gnb .menu > li .sub-wrap {display:block; width:max-content; z-index:-1; visibility: hidden; position:absolute; left:50%; transform:translateX(-50%);}
#header #gnb .menu > li .sub-wrap .menu-02 {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; max-width: 1500px; margin: 0 auto; padding: 15px 0; -webkit-box-pack: center; -moz-box-justify-content: center; -ms-flex-pack: center; justify-content: center;}
#header #gnb .menu > li .sub-wrap .menu-02 > li {display: block;}
#header #gnb .menu > li .sub-wrap .menu-02 > li > .m-tit {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; position: relative; min-height: 50px; padding: 0 20px; font-weight: 600; font-size: 1rem; color: #555c63; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; align-items: center;}
#header #gnb .menu > li .sub-wrap .menu-02 > li > .m-tit::before {content:""; position: absolute; bottom: 0; left: 50%; bottom: 0; width: 4px; height: 4px; border-radius: 50%; background-color: #E84242;}
#header #gnb .menu > li .sub-wrap .menu-02 > li > .m-tit > span {display: block;}
#header #gnb .menu > li .sub-wrap .menu-02 > li > .m-tit.link > span {padding-right: 20px; background: url(/images/front/new/common/i_link_gray.svg) no-repeat center right / 14px;}
/* #header #gnb .menu > li:nth-child(4) .sub-wrap .menu-02 {margin-left:30%;} */

#header.main #gnb {display: block; height: 100%;}
#header.main #gnb .menu {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; height: 100%;}
#header.main #gnb .menu > li {display: block; position:relative;}
#header.main #gnb .menu > li > .m-tit {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; position: relative; z-index: 2; height: 100%; padding: 0 45px; background-color: transparent; font-weight: 600; font-size: 1.125rem; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; align-items: center; color:#fff;text-align: center;}
#header.main #gnb .menu > li > .m-tit::before {content:""; position: absolute; bottom: 0; left: 50%; width: 0; height: 4px; background-color: #E84242; transform: translateX(-50%);}
#header.main #gnb .menu > li > .m-tit > span {display: block;}
#header.main #gnb .menu > li > .m-tit.link > span {padding-right: 20px; background: url(/images/front/new/common/i_link.svg) no-repeat center right / 14px;}
/* #header.main #gnb .menu > li .sub-wrap {display: block; position: absolute; bottom: 0; left: 0; width: 100%; z-index: -1;} */
#header.main #gnb .menu > li .sub-wrap {display:block; width:max-content; z-index:-1; visibility: hidden; position:absolute; left:50%; transform:translateX(-50%);}
#header.main #gnb .menu > li .sub-wrap .menu-02 {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; max-width: 1500px; margin: 0 auto; padding: 15px 0; -webkit-box-pack: center; -moz-box-justify-content: center; -ms-flex-pack: center; justify-content: center;}
/* #header.main #gnb .menu > li:nth-child(4) .sub-wrap .menu-02 {margin-left:30%;} */
#header.main #gnb .menu > li .sub-wrap .menu-02 > li {display: block;}
#header.main #gnb .menu > li .sub-wrap .menu-02 > li > .m-tit {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; position: relative; min-height: 50px; padding: 0 20px; font-weight: 600; font-size: 1rem; color: #555c63; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; align-items: center;}
#header.main #gnb .menu > li .sub-wrap .menu-02 > li > .m-tit::before {content:""; position: absolute; bottom: 0; left: 50%; bottom: 0; width: 4px; height: 4px; border-radius: 50%; background-color: #E84242;}
#header.main #gnb .menu > li .sub-wrap .menu-02 > li > .m-tit > span {display: block;}
#header.main #gnb .menu > li .sub-wrap .menu-02 > li > .m-tit.link > span {padding-right: 20px; background: url(/images/front/new/common/i_link_gray.svg) no-repeat center right / 14px;}

.sub-menu-bg.on {display:block; width:100%; height:80px; background:#fff; position:absolute; top:100px; left:0; right:0; z-index:20;}
/*-------------------------------------------------------------------
    @interaction
-------------------------------------------------------------------*/
/* #header #gnb .menu > li .sub-wrap {transition: transform 0.3s, visibility 0s; visibility: hidden; transform: translateY(0);}
#header #gnb .menu > li.focus .sub-wrap,
#header #gnb .menu > li .sub-wrap.on {transition: transform 0.3s, visibility 0s 0s; visibility: visible; transform: translateY(100%); background:#fff;} */
#header #gnb .menu > li.focus .sub-wrap,
#header #gnb .menu > li .sub-wrap.on {visibility:visible;}

#header #gnb .menu > li > .m-tit {transition: color 0.3s;}
#header #gnb .menu > li > .m-tit:focus,
#header #gnb .menu > li > .m-tit:hover,
#header #gnb .menu > li.focus > .m-tit {color: #E84242;}
#header .header-area.active #gnb .menu > li.focus > .m-tit {color: #E84242;}
#header #gnb .menu > li > .m-tit::after {content:""; display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%;  border: 2px dashed #E84242; box-sizing: border-box;}
#header #gnb .menu > li > .m-tit:focus {outline: none;}
#header #gnb .menu > li > .m-tit:focus::after {display: block;}
#header #gnb .menu > li > .m-tit:focus:not(:focus-visible)::after {display: none;}
#header #gnb .menu > li > .m-tit::before {transition: width 0.3s;}
#header #gnb .menu > li > .m-tit:focus::before,
#header #gnb .menu > li > .m-tit:hover::before,
#header #gnb .menu > li.focus > .m-tit::before {width: calc(100% - 40px);}

#header #gnb .menu > li .sub-wrap .menu-02 > li > .m-tit {transition: color 0.3s;}
#header #gnb .menu > li .sub-wrap .menu-02 > li > .m-tit:focus,
#header #gnb .menu > li .sub-wrap .menu-02 > li > .m-tit:hover {color: #E84242;}
#header #gnb .menu > li .sub-wrap .menu-02 > li > .m-tit::before {transition: bottom 0.3s, opacity 0.3s; opacity: 0;}
#header #gnb .menu > li .sub-wrap .menu-02 > li > .m-tit:focus::before,
#header #gnb .menu > li .sub-wrap .menu-02 > li > .m-tit:hover::before {bottom: -4px; opacity: 1;}


/* fixed */
#header .header-area.fixed #gnb .menu > li .sub-wrap .menu-02 {padding: 10px 0;}
#header .header-area.fixed #gnb .menu > li .sub-wrap .menu-02 > li > .m-tit {min-height: 40px;}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1540px) {
    #header #gnb .menu > li > .m-tit,
    #header.main #gnb .menu > li > .m-tit {padding: 0 20px;}
}
@media screen and (max-width: 1200px) {
    #header #gnb .menu > li > .m-tit,
    #header.main #gnb .menu > li > .m-tit {padding: 0 15px; font-size: 1.0625rem;}
}
@media screen and (max-width: 1024px) {
    #header #gnb,
    #header.main #gnb {display: none;}

}


/*-------------------------------------------------------------------
	분류그룹 : header > utils
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
#header #utils {display: block;}
#header #utils .list-wrap {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex;}
#header #utils .list-wrap > li {display: block; margin-right: 10px;}
#header #utils .list-wrap > li:last-child {margin-right: 0;}
#header #utils .list-wrap > li .btn-menu {position: relative; width: 35px; height: 35px; background-color: transparent;}
#header #utils .list-wrap > li .btn-menu::before {content:""; position: absolute; top: 8.5px; left: 8.5px; width: 18px; height: 18px; border-width: 2px 0; border-style: solid; border-color: #000; box-sizing: border-box;}
#header #utils .list-wrap > li .btn-menu::after  {content:""; position: absolute; top: 50%; right: 8.5px; width: 18px; height: 2px; background-color: #000; transform: translateY(-50%);}
#header #utils .list-wrap > li .btn-menu.type-sitemap {display: block;}
#header #utils .list-wrap > li .btn-menu.type-mobile {display: none;}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
#header #utils .list-wrap > li .btn-menu::after {transition: width 0.3s, background 0.3s;}
#header #utils .list-wrap > li .btn-menu:focus::after,
#header #utils .list-wrap > li .btn-menu:hover::after {width: 12px; background-color: #EF413D;}
#header .header-area.active #utils .list-wrap > li .btn-menu::before {border-color:#000;}
#header .header-area.active #utils .list-wrap > li .btn-menu::after {background-color:#000;} 
#header.main .header-area #utils .list-wrap > li .btn-menu::before {border-color:#fff;}
#header.main .header-area #utils .list-wrap > li .btn-menu::after {background-color:#fff;}
#header.main .header-area.active #utils .list-wrap > li .btn-menu::before {border-color:#000;}
#header.main .header-area.active #utils .list-wrap > li .btn-menu::after {background-color:#000;}
#header.main #utils .list-wrap > li .btn-menu:focus::after,
#header.main #utils .list-wrap > li .btn-menu:hover::after {background:#fff;}
/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/

@media screen and (max-width: 800px) {
    #header #utils .list-wrap > li .btn-menu.type-sitemap {display: none;}
    #header #utils .list-wrap > li .btn-menu.type-mobile {display: block;}
}
@media screen and (max-width: 600px) {
    #header #utils .list-wrap > li .btn-search {width: 25px; height: 25px;}
    #header #utils .list-wrap > li .btn-menu {width: 25px; height: 25px;}
    #header #utils .list-wrap > li .btn-menu::before {top: 3.5px; left: 3.5px;}
    #header #utils .list-wrap > li .btn-menu::after  {right: 3.5px;}
}


/*-------------------------------------------------------------------
	분류그룹 : sitemap & mobile
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
#menu-modal {visibility: hidden; position: fixed; top: 0; left: 0; z-index: 400; width: 100%; height: 100%; transition: visibility 0s 0.3s;}
#menu-modal.active {visibility: visible; transition: visibility 0s 0s;}
#menu-modal::before {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0); transition: background 0.3s;}
#menu-modal.active::before {background-color: rgba(0,0,0,0.7);}


/*-------------------------------------------------------------------
	분류그룹 : sitemap
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
#sitemap {display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5);}
#sitemap .txt-bg {position: absolute; bottom: 0; right: 20px; width: 100%; line-height: 1; font-weight: 900; font-size: 100px; color: rgba(231, 237, 249, 0.7); text-align: right; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none}

#sitemap .content-wrap {display: block; position: relative; height: 100%; padding:30px 50px;}
#sitemap .content-wrap .con-head {display: block; height: 320px;}
#sitemap .content-wrap .con-head .logo {display:block; width:180px; height:70px; background:url(../images/common/logo.svg) no-repeat; font-size:0;}

#sitemap .content-wrap .con-body {display: block; overflow-x: hidden; overflow-y: auto;}
#sitemap .content-wrap .con-body .menu {display: flex; justify-content: space-between;}
#sitemap .content-wrap .con-body .menu > li {}
#sitemap .content-wrap .con-body .menu > li > .m-tit {display: block; position: relative; padding: 20px 10px; font-weight: 700; font-size: 30px; color:#C3C3C3; text-align: center;}
#sitemap .content-wrap .con-body .menu > li > .m-tit::before {content: ""; position: absolute; left:50%; bottom: 0; transform: translateX(-50%); width: 0%; height: 2px; background-color: #EF413D;}
#sitemap .content-wrap .con-body .menu > li > .m-tit > span {display: inline-block;}
#sitemap .content-wrap .con-body .menu > li > .m-tit.link > span{padding-right: 20px; background: url(/images/front/new/common/i_link.svg) no-repeat center right / 14px;}
#sitemap .content-wrap .con-body .menu > li .sub-wrap {padding-top:20px;}
#sitemap .content-wrap .con-body .menu > li .sub-wrap .menu-02 {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-lines: multiple; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;}
#sitemap .content-wrap .con-body .menu > li .sub-wrap .menu-02 > li {display: block; width:100%; padding: 10px 0; text-align: center;;}
#sitemap .content-wrap .con-body .menu > li .sub-wrap .menu-02 > li > .m-tit {display: block; position: relative; min-width: 100px; padding: 10px 10px 10px 15px; line-height: 1; font-weight: 600; font-size: 1.125rem; color: #C3C3C3;}
#sitemap .content-wrap .con-body .menu > li .sub-wrap .menu-02 > li > .m-tit::before {content:""; position: absolute; top:-7px; left: 50%; width: 4px; height: 4px; border-radius: 50%; background:none;}
#sitemap .content-wrap .con-body .menu > li .sub-wrap .menu-02 > li > .m-tit > span {display: inline-block; border-bottom:1px solid transparent}
#sitemap .content-wrap .con-body .menu > li .sub-wrap .menu-02 > li > .m-tit.link > span {padding-right: 20px; background: url(/images/front/new/common/i_link.svg) no-repeat center right / 14px;}
#sitemap .content-wrap .con-body .menu > li .sub-wrap .menu-02 > li .menu-03 {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; padding-left: 10px;}
#sitemap .content-wrap .con-body .menu > li .sub-wrap .menu-02 > li .menu-03 > li {display: block; margin-right: 10px;}
#sitemap .content-wrap .con-body .menu > li .sub-wrap .menu-02 > li .menu-03 > li > .m-tit {display: block; padding: 10px 5px; color: #555c63;}
#sitemap .content-wrap .con-body .menu > li .sub-wrap .menu-02 > li .menu-03 > li > .m-tit > span {display: block;}
#sitemap .content-wrap .con-body .menu > li .sub-wrap .menu-02 > li .menu-03 > li > .m-tit.link > span{padding-right: 20px; background: url(/images/front/new/common/i_link_gray.svg) no-repeat center right / 14px;}

#sitemap .btn-sitemap-close {display: block; position: absolute; top: 32px; right: 0; width: 45px; height: 45px; border-radius: 50%; background:none;}
#sitemap .btn-sitemap-close::before,
#sitemap .btn-sitemap-close::after {content: ""; position: absolute; top: 50%; left: 20%; width: 70%; height: 3px; border-radius: 3px; background-color: #fff;}
#sitemap .btn-sitemap-close::before {transform: translateY(-50%) rotate(45deg);}
#sitemap .btn-sitemap-close::after {transform: translateY(-50%) rotate(-45deg);}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
#sitemap {opacity: 0; transition: opacity 0.4s;}
#sitemap.on {opacity: 1;}

#sitemap .btn-sitemap-close::before,
#sitemap .btn-sitemap-close::after {transition: background 0.3s, transform 0.3s;}
#sitemap .btn-sitemap-close:hover::before {background-color: #EF413D; transform: translateY(-50%) rotate(30deg);}
#sitemap .btn-sitemap-close:hover::after {background-color: #EF413D; transform: translateY(-50%) rotate(-30deg);}

#sitemap .content-wrap .con-body .menu > li > .m-tit:focus {outline: none;}
#sitemap .content-wrap .con-body .menu > li > .m-tit:focus,
#sitemap .content-wrap .con-body .menu > li > .m-tit:hover {color:#fff;}
#sitemap .content-wrap .con-body .menu > li > .m-tit:focus-within + .sub-wrap .m-tit {color:#fff;}
#sitemap .content-wrap .con-body .menu > li > .m-tit:hover + .sub-wrap .m-tit {color:#fff;}
#sitemap .content-wrap .con-body .menu > li > .m-tit::before {opacity: 0;}
#sitemap .content-wrap .con-body .menu > li > .m-tit::after {content:""; display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 2px dashed #4659E3; border-radius: 5px; box-sizing: border-box;}
#sitemap .content-wrap .con-body .menu > li > .m-tit:focus::before,
#sitemap .content-wrap .con-body .menu > li > .m-tit:hover::before {width:85%; opacity: 1; transition: 0.3s;}
#sitemap .content-wrap .con-body .menu > li > .m-tit:focus::after {display: block;}
#sitemap .content-wrap .con-body .menu > li > .m-tit:focus:not(:focus-visible)::after {display: none;}

#sitemap .content-wrap .con-body .menu > li .sub-wrap .menu-02 > li > .m-tit {transition: color 0.3s;}
#sitemap .content-wrap .con-body .menu > li .sub-wrap .menu-02 > li > .m-tit:focus,
#sitemap .content-wrap .con-body .menu > li .sub-wrap .menu-02 > li > .m-tit:hover {color: #EF413D;}
#sitemap .content-wrap .con-body .menu > li .sub-wrap .menu-02 > li > .m-tit:focus span,
#sitemap .content-wrap .con-body .menu > li .sub-wrap .menu-02 > li > .m-tit:hover span {border-bottom:1px solid #EF413D;}
#sitemap .content-wrap .con-body .menu > li .sub-wrap .menu-02 > li > .m-tit::before {transition: background 0.3s;}
#sitemap .content-wrap .con-body .menu > li .sub-wrap .menu-02 > li > .m-tit:focus::before,
#sitemap .content-wrap .con-body .menu > li .sub-wrap .menu-02 > li > .m-tit:hover::before {background-color: #EF413D;}
#sitemap .content-wrap .con-body .menu > li .sub-wrap .menu-02 > li .menu-03 > li > .m-tit {transition: color 0.3s;}
#sitemap .content-wrap .con-body .menu > li .sub-wrap .menu-02 > li .menu-03 > li > .m-tit:focus,
#sitemap .content-wrap .con-body .menu > li .sub-wrap .menu-02 > li .menu-03 > li > .m-tit:hover {color: #000000;}

/* 외부링크 */
#sitemap .content-wrap .con-body .menu > li .sub-wrap .menu-02 > li > .m-tit.link {transition: background 0.3s;}
#sitemap .content-wrap .con-body .menu > li .sub-wrap .menu-02 > li > .m-tit.link:focus > span,
#sitemap .content-wrap .con-body .menu > li .sub-wrap .menu-02 > li > .m-tit.link:hover > span {background-image: url(/images/front/new/common/i_link_on.svg);}
#sitemap .content-wrap .con-body .menu > li .sub-wrap .menu-02 > li .menu-03 > li > .m-tit.link > span {transition: background 0.3s;}
#sitemap .content-wrap .con-body .menu > li .sub-wrap .menu-02 > li .menu-03 > li > .m-tit.link:focus > span,
#sitemap .content-wrap .con-body .menu > li .sub-wrap .menu-02 > li .menu-03 > li > .m-tit.link:hover > span {background-image: url(/images/front/new/common/i_link.svg);}


/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1580px) {
    #sitemap .btn-sitemap-close {right: 50px;}
}
@media screen and (max-width: 1240px) {
    #sitemap .content-wrap .con-body .menu > li > .m-tit {font-size:24px;}
    #sitemap .content-wrap .con-body .menu > li .sub-wrap {padding-top:10px;}
    #sitemap .content-wrap .con-body .menu > li .sub-wrap .menu-02 > li > .m-tit {font-size:16px;}
}
@media screen and (max-width: 1080px) {
    #sitemap .content-wrap .con-head {height:200px;}
    #sitemap .content-wrap .con-body .menu {flex-wrap: wrap; max-width:90%; margin:0 auto; justify-content: center; gap:5%;}
    #sitemap .content-wrap .con-body .menu > li {min-width:24%; margin-bottom:100px;}
    #sitemap .content-wrap .con-body .menu > li > .m-tit {border-bottom:1px solid rgba(255,255,255,0.35);}
}
@media screen and (max-width: 800px) {
    #sitemap {display: none;}
}


/*-------------------------------------------------------------------
	분류그룹 : mobile
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
#mobile {display: none; position: absolute; top:0; right: -80%; z-index:100; width:80%; height:100%; background-color: #ffffff;}
#mobile .txt-bg {position: absolute; right: 15px; bottom: 0; right: 15px; width: 100%; line-height: 1; font-weight: 900; font-size: 45px; color: rgba(231, 237, 249, 0.7); text-align: right; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none}

#mobile .con-head {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; height: 91px; padding: 0 55px 0 25px; border-bottom: 1px solid #D9E6F2; background: #ffffff; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -moz-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between;}
#mobile .con-head .logo {display: block;}
#mobile .con-head .logo > img {display: block; max-width: none; height: 50px;}
#mobile .con-head .utils {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex;}
#mobile .con-head .utils > li {display: block; margin-right: 10px;}
#mobile .con-head .utils > li:last-child {margin-right: 0;}

#mobile .con-body {display: block; overflow-x: hidden; overflow-y: auto; position: relative; height: calc(100% - 61px);}
/* #mobile .con-body::before {content:''; position: absolute; top: 0; left: 0; width: 180px; height: 100%; background-color: #4659E3;} */
#mobile .con-body .menu {display:block; position: relative;}
#mobile .con-body .menu > li {display: block; border-bottom:1px solid #EAEBED;}
#mobile .con-body .menu > li > .m-tit {display:block; position:relative; z-index:9; width:100%; padding: 20px 45px; font-weight: 600; font-size: 1.125rem; color:#000; word-break: break-all;}
#mobile .con-body .menu > li > .m-tit.btn-depth {padding-right:50px; position: relative;} 
#mobile .con-body .menu > li > .m-tit.btn-depth::after {content: ""; position: absolute; top: 20px; right: 20px; width:20px; height:20px; background:url(../images/common/i_down_bk.png) no-repeat center; transition: all 0.4s;}
#mobile .con-body .menu > li:nth-child(2) > .m-tit {padding-right:50px; position: relative;} 
#mobile .con-body .menu > li:nth-child(2) > .m-tit::after {content: ""; position: absolute; top: 20px; right: 20px; width:20px; height:20px; background:url(../images/common/i_down_bk.png) no-repeat center; transition: all 0.4s;}
#mobile .con-body .menu > li:nth-child(4) > .m-tit {padding-right:50px; position: relative;} 
#mobile .con-body .menu > li:nth-child(4) > .m-tit::after {content: ""; position: absolute; top: 20px; right: 20px; width:20px; height:20px; background:url(../images/common/i_down_bk.png) no-repeat center; transition: all 0.4s;}
#mobile .con-body .menu > li .sub-wrap {width:100%; background-color: #F6F7F8;}
#mobile .con-body .menu > li .sub-wrap .menu-02 {display:block; border-top:1px solid #EAEBED;}
#mobile .con-body .menu > li .sub-wrap .menu-02 > li {padding:10px 40px;}
#mobile .con-body .menu > li .sub-wrap .menu-02 > li > .m-tit {display:block; position:relative; padding: 15px 45px 15px 20px; color:#555555; font-weight:500; font-size: 1.125rem;}
#mobile .con-body .menu > li .sub-wrap .menu-02 > li > .menu-03 {display:none; padding:10px; border-top: 1px solid #D9E6F2; background-color:#f6f9fb;}
#mobile .con-body .menu > li .sub-wrap .menu-02 > li > .menu-03 > li {display: block; border-bottom: 1px solid #e9e9e9;}
#mobile .con-body .menu > li .sub-wrap .menu-02 > li > .menu-03 > li:last-child {border-bottom: 0;}
#mobile .con-body .menu > li .sub-wrap .menu-02 > li > .menu-03 > li > .m-tit {display:block; position:relative; padding: 8px 20px; font-weight: 500; font-size:14px; color: #000000;}
#mobile .con-body .menu > li .sub-wrap .menu-02 > li > .menu-03 > li > .m-tit.active {color: #4659E3;}
#mobile .con-body .menu > li .sub-wrap .menu-02 > li > .menu-03 > li > .m-tit::before {content:""; position:absolute; left:10px; top:50%; width:3px; height:3px; border-radius: 3px; background-color:#000000; transform: translateY(-50%);}

#mobile .btn-mobile-close {display: block; position: absolute; top: 30px; right: 15px; width: 25px; height: 25px; border: 0; background-color: transparent; cursor: pointer;}
#mobile .btn-mobile-close::before,
#mobile .btn-mobile-close::after {content:""; position: absolute; top: 50%; left: 0; width: 100%; height: 2px; border-radius: 3px; background-color: #000000;}
#mobile .btn-mobile-close::before {transform: translateY(-50%) rotate(45deg);}
#mobile .btn-mobile-close::after {transform: translateY(-50%) rotate(-45deg);}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
#mobile {opacity: 0; transition: right 0.4s, opacity 0.4s;}
#mobile.on {right: 0; opacity: 1;}

#mobile .con-head .utils > li .btn-search {transition: background 0.3s;}
#mobile .con-head .utils > li .btn-search:focus,
#mobile .con-head .utils > li .btn-search:hover {background-image: url(/images/front/new/common/i_search_on.svg);}

/* 1차메뉴 */
#mobile .con-body .menu > li > .m-tit {transition: background 0.3s, color 0.3s;}
#mobile .con-body .menu > li > .m-tit:focus {outline-color: transparent; background-color: #fff; color:#EF413D;}
#mobile .con-body .menu > li > .m-tit:hover,
#mobile .con-body .menu > li.active > .m-tit {color:#EF413D;}
#mobile .con-body .menu > li > .m-tit::before {content:""; display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 2px dashed #ffffff; box-sizing: border-box;}
#mobile .con-body .menu > li > .m-tit:focus::before {display: block;}
#mobile .con-body .menu > li > .m-tit:focus:not(:focus-visible)::before {display: none;}
#mobile .con-body .menu > li.active > .m-tit.btn-depth::after {background:url(../images/common/i_down_color.png) no-repeat center; transform: rotate(-180deg); transition: all 0.4s;}
#mobile .con-body .menu > li:nth-child(2).active > .m-tit::after {background:url(../images/common/i_down_color.png) no-repeat center; transform: rotate(-180deg); transition: all 0.4s;}
#mobile .con-body .menu > li:nth-child(4).active > .m-tit::after {background:url(../images/common/i_down_color.png) no-repeat center; transform: rotate(-180deg); transition: all 0.4s;}
/* 2차메뉴 */
#mobile .con-body .menu > li .sub-wrap {visibility: hidden; opacity: 0; height:0;}
#mobile.on .con-body .menu > li.active .sub-wrap {visibility: visible; opacity: 1; height:100%;}

#mobile .con-body .menu > li .sub-wrap .menu-02 > li {transform: translateX(50%); opacity: 0; transition: all 0.5s;}
#mobile.on .con-body .menu > li.action .sub-wrap .menu-02 > li {transition-delay: 0s !important;}
#mobile.on .con-body .menu > li.active .sub-wrap .menu-02 > li {transform: translateX(0); opacity: 1;}


/* 외부 링크 */
#mobile .con-body .menu > li .sub-wrap .menu-02 > li > .m-tit.link::before {content:''; position: absolute; top: calc(50% - 7px); right: 15px; width: 15px; height: 15px; background: url(/images/front/new/common/i_link.svg) no-repeat center;}
#mobile .con-body .menu > li .sub-wrap .menu-02 > li > .menu-03 > li > .m-tit.link::after {content:''; position: absolute; top: calc(50% - 6px); right: 4px; width: 12px; height: 12px; background: url(/images/front/new/common/i_link.svg) no-repeat center; background-size: contain;}

/* 닫기 버튼 */
#mobile .btn-mobile-close::before,
#mobile .btn-mobile-close::after {transition: background 0.3s, transform 0.3s;}
#mobile .btn-mobile-close:focus::before,
#mobile .btn-mobile-close:hover::before {background-color: #EF413D; transform: translateY(-50%) rotate(30deg);}
#mobile .btn-mobile-close:focus::after,
#mobile .btn-mobile-close:hover::after {background-color: #EF413D; transform: translateY(-50%) rotate(-30deg);}
 
/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 800px) {
    #mobile {display: block;}
}
@media screen and (max-width: 600px) {
    #mobile {right: -100%; width: 100%;}
    #mobile .txt-bg {font-size: 35px;}
    /* #mobile .con-head .logo > img {height: 30px;} */

    /* #mobile .con-body .menu > li > .m-tit {padding: 15px 10px;} */
    #mobile .con-body .menu > li .sub-wrap .menu-02 > li > .m-tit {padding: 15px 40px 15px 15px;}
    #mobile .con-body .menu > li .sub-wrap .menu-02 > li.find > .m-tit::before {right: 15px;}
    #mobile .con-body .menu > li .sub-wrap .menu-02 > li > .m-tit.link::before {right: 12.5px;}
}
@media screen and (max-width: 475px) {
    #mobile .txt-bg {font-size: 25px;}

    #mobile .con-body .menu > li .sub-wrap .menu-02 > li > .m-tit {padding: 15px 30px 15px 10px;}
    #mobile .con-body .menu > li .sub-wrap .menu-02 > li.find > .m-tit::before {right: 10px;}
    #mobile .con-body .menu > li .sub-wrap .menu-02 > li > .m-tit.link::before {right: 7.5px;}
}


/*-------------------------------------------------------------------
	분류그룹 : footer
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
#footer {padding:60px 0; background:#000;}
.footer-wrap {max-width:1500px; margin:0 auto; display:flex;  justify-content: space-between;}
.footer-wrap > div {display:flex;}
.ft-logo {display:block; background:url(../images/common/logo.svg) no-repeat; width:131px; height:51px; font-size:0;}
.ft-info {display:block; margin-left:150px; color:#fff;}
.ft-info h3 {color:#fff; font-size: 18px; font-weight:700; margin-bottom:15px;}
.ft-info p {color:rgba(255,255,255,0.7); font-weight:500; line-height:1.6; display:inline-block; margin-right:15px;}

.ft-right-wrap .btn-wrap {display:flex; flex-direction: column; align-items: flex-end; gap:10px;}
.ft-right-wrap .ft-link {display:flex;; align-items:center; background:#2B2B2B; border-radius:5px; padding:15px 20px; position:relative; color:#fff;  transition:0.3s;}
.ft-right-wrap .ft-link::before {content:""; display:inline-block; width:25px; height:25px; margin-right:10px;}
.ft-right-wrap .ft-link.btn01::before {background:url(../images/common/ft_link_btn01.png) no-repeat;}
.ft-right-wrap .ft-link.btn02::before {background:url(../images/common/ft_link_btn02.png) no-repeat;}
.ft-right-wrap .ft-link::after {content:""; display:inline-block; width:25px; height:25px; margin-left:10px; background:url(../images/common/i_arrow_right.png) no-repeat; background-position:center;}
.ft-right-wrap .ft-link:hover {background:#484848;}
.ft-copy {display:block; color:rgba(255,255,255,0.7); font-weight:500; }
.ft-company {color:rgba(255,255,255,0.7); display:block; margin-top:5px;}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1580px) {
    #footer {padding:60px 40px;}
    .ft-info {margin-left:50px;}
}
@media screen and (max-width: 1380px) {
    .footer-wrap {flex-direction: column; align-items: flex-start; position: relative; gap:20px;}
    .ft-right-wrap .btn-wrap {flex-direction: row; margin-left:180px;}
}
@media screen and (max-width: 1000px) {
    #footer {padding:25px 30px 45px;}
    .ft-left-wrap {flex-direction: column;}
    .ft-info {margin-left:0; margin-top:20px;}
    .ft-info h3 {font-size:17px; font-weight:600;}
    .ft-info p, .ft-copy  {font-size: 14px;}
    .ft-copy {margin-left:0;}
    .ft-right-wrap .btn-wrap {margin-left:0;}
}
@media screen and (max-width: 640px) {
	.ft-right-wrap .btn-wrap {flex-direction: column;}
}
@media screen and (max-width: 500px) {
    .ft-info h3 {font-size:16px; margin-bottom:10px;}
    .ft-info p, .ft-copy {font-size:13px; font-weight:400;}
}
@media screen and (max-width: 435px) {
    #footer {padding:25px 25px 35px;}
    .ft-right-wrap {padding-bottom:35px;}
}

/*-------------------------------------------------------------------
	분류그룹 : popup
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
.popupwrap {position:absolute; top:10px; left:50px; z-index:999; border:1px solid #eee;}
.popupwrap .main-popup {display:block; width:auto; height:auto; background:#fff; border:1px solid #ddd;}
.popupfoot {display: inline-block; width: 100%; margin-bottom: -3px; padding: 10px 0; border-top: 2px solid #ddd;;}
.popuphead {display:none;}
.popupfoot .popfleft {float: left; margin-left: 20px; display:flex; gap:5px; align-items:center; height:20px; line-height:20px;}
.popupfoot .popfleft input {width:14px; height:14px;}
.popupfoot .popfleft label {font-size:14px;}
.popupfoot .popfright {float: right; margin-right: 20px;}
.popupfoot .popfright button {background:none; font-size:14px; color:#666;}

@media screen and (max-width: 1000px) {
	.popupwrap {top:100px !important; left:30px !important;}
}
@media screen and (max-width: 500px) {
	.popupwrap {max-width:90%;}
	.popupcontent {width:100% !important; height:auto !important;}
}


/*-------------------------------------------------------------------
	분류그룹 : VR Full Modal
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
.modal {
    display: none; /* 기본적으로 숨김 */
    position: fixed;
    z-index: 500;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    /*overflow: auto;*/
    background-color: rgba(0, 0, 0, 0.4);
}
.modal-content {
    background-color: #fefefe;
    margin: 10% auto;
    padding:20px 20px 20px;
    border: 1px solid #888;
    width: 80%; max-width:1000px;
    border-radius: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0 auto;
}
.modal-content .modal-head {
	display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid #E9E9E9;
}
.modal-content .title {
	font-size:24px;
	display:inline-block;
}
.modal-content video,
.modal-content iframe{border-radius:20px;}
.close {
    color: #000;
    float: right;
    font-size: 35px;
    font-weight: 300;
    width:30px; height:30px; line-height:28px; text-align:center;
}
.close:hover,
.close:focus {
    color: #aaa;
    text-decoration: none;
    cursor: pointer;
}
#myModal .modal-content {max-width:1700px;} 
#VRfullModal {
    display: none; /* 기본적으로 숨김 */
    position: fixed;
    z-index: 500;
    left: 0;
    top: 0;
    width: 100%;
    height: 100dvh;
    /*overflow: auto;*/
    background-color: rgba(0, 0, 0, 0.4);
}
#VRfullModal .modal-content {
    background-color: #fefefe;
    width: 100%;
    position: static;
    /* top: 50%;
    left: 50%; */
    transform: none;
    padding:0;
    border:none;
    max-width:none;
    border-radius:0;
}
#VRfullModal .modal-content .modal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    top: 0;
    right: 0;
    margin-bottom:0;
    padding-bottom:0;
    border-bottom:none
}
#VRfullModal .modal-content .title {
	font-size:0;
	display:none;
}
#VRfullModal .modal-content video,
#VRfullModal .modal-content iframe{border-radius:0; height:100dvh;}
#VRfullModal .modal-head .close {
    float: none;
    color: #ffffff;
    font-size: 78px;
    font-weight: 100;
    width: 50px;
    height: 50px;
    line-height: 44px;
    text-align: center;
    background: rgba(0, 0, 0, 0.3);
}
#VRfullModal .modal-head .close:hover,
#VRfullModal .modal-head .close:focus {
    color: #eee;
    text-decoration: none;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.4);
}