@charset "utf-8";
/* CSS Document */
.box0{ padding:0 4vw}
body:not(.pop){ min-height:100vh; min-height:calc(var(--vh, 1vh) * 100)}

.pcHide{ display:none !important;}
/* .moHide{ display:block !important;} */
.moHide{}

.gnb li.m_hide{ display:none}
.gnb .layer{ display:none !important;}
.gnb .blank .arrow:before{ content:"\e980";}

.sns_st{ gap:.5em;}
.sns_st > li .in{ width:2.5em; height:2.5em; background:#fff; border-radius:50%; color:#000; transition:.3s;}
.sns_st > li .in .tt{ display:none;}
.sns_st > li .in:hover{ background:#49b7be; color:#fff;}
.cw > .sns_st > li .in{ background:transparent; color:#fff;}
.cw > .sns_st > li .in:hover{ background:#fff; color:#000;}

#header .sns_st{ gap:.5em;}
#header .sns_st > li .in{ width:2.5em; height:2.5em; background: transparent; border-radius:50%; color:#fff; transition:.3s;}
#header .sns_st > li .in .tt{ display:none;}
#header .sns_st > li .in:hover{ background:#fff; color:#333;}
#header .cw > .sns_st > li .in{ background:transparent; color:#fff;}
#header .cw > .sns_st > li .in:hover{ background:#fff; color:#000;}

#header.active .sns_st{ gap:.5em;}
#header.active .sns_st > li .in{ width:2.5em; height:2.5em; background: #eee; border-radius:50%; color:#000; transition:.3s;}
#header.active .sns_st > li .in .tt{ display:none;}
#header.active .sns_st > li .in:hover{ background:#04182e; color:#fff;}
#header.active .cw > .sns_st > li .in{ background:transparent; color:#fff;}
#header.active .cw > .sns_st > li .in:hover{ background:#fff; color:#000;}

.sub #header .sns_st{ gap:.5em;}
.sub #header .sns_st > li .in{ width:2.5em; height:2.5em; background: #eee; border-radius:50%; color:#000; transition:.3s;}
.sub #header .sns_st > li .in .tt{ display:none;}
.sub #header .sns_st > li .in:hover{ background:#04182e; color:#fff;}
.sub #header .cw > .sns_st > li .in{ background:transparent; color:#fff;}
.sub #header .cw > .sns_st > li .in:hover{ background:#fff; color:#000;}

.fullH{ height:calc(100vh); box-sizing:border-box;}
.fullMH{ min-height:calc(100vh) !important; box-sizing:border-box;}

.filW{ filter:brightness(0) invert(1);}/*화이트*/
.filB{ filter:brightness(0) invert(0);}/*블랙*/
.filRE{ filter:invert(1);}/*색상반전*/


/*header*/
.headT{ padding-top:7em;}
.headH,
#header .gnb_wrap .gnb > li,
#header .gnb_wrap .gnb > li .dp1{ height:5em; transition: height .2s, background .2s, padding .35s ease; box-sizing:border-box;}

#header{ z-index:999; position:fixed; top:0; left:0; width:100%;}
#header:before {content: ''; position: absolute; top: calc(5em - 2px); left: 0; width: 100%; height: 1px; background: #ddd; opacity: 0; transition: .2s;}
#header.gnbOpen:before {opacity: 1;}
.scroll #header:before {top: calc(5em - 2px);}
.main #header .inner{ color:#fff;}
.main #header .logo,
.main #header .all_wrap .all_btn{ filter:brightness(0) invert(1);}
#header .logo,
#header .side_wrap { width:18em;}
#header .logo > .in img{ width:16em; transition:.2s; transform-origin:left center;}
.sub #header .logo > .in img {filter: brightness(0) invert(1);}
.sub #header.active .logo > .in img {filter: brightness(1) invert(0);}

#header .gnb_wrap .gnb {position: relative;}
#header .gnb_wrap .gnb > li{ overflow:hidden; transition: .3s;}
#header .gnb_wrap .gnb > li .dp1{ position:relative; padding:0 2em;}
#header .gnb_wrap .gnb > li .dp1 .tt{ font-size:1.250em; font-weight:500; text-transform:uppercase;}
#header .gnb_wrap .gnb > li .dp1:after{ content:""; display:block; position:absolute; left:0; bottom:0; width:100%; height:3px; background:#042d5c; opacity:0; transform:scaleX(0); transition:transform .3s;}
#header .gnb_wrap .gnb > li.act .dp1:after,
#header .gnb_wrap .gnb > li.on .dp1:after{ opacity:1; transform:scaleX(.7);}

.sub #header .gnb_wrap .gnb > li .dp1{color: #fff;}
.sub #header .gnb_wrap .gnb > li .dp1:after {background: #fff;}

.sub #header.active .gnb_wrap .gnb > li .dp1{color: #333;}
.sub #header.active .gnb_wrap .gnb > li .dp1:after {background: #0072BC;}

#header .gnb_wrap .gnb > li .dp2{display: flex; flex-wrap: wrap;  justify-content: center; margin:0 auto; transition:.2s; position: absolute; top: 5em; left: 0; width: 100%; opacity: 0; visibility: hidden; gap: 1em;}
#header .gnb_wrap .gnb > li .dp2 > li {border: 1px solid #ddd; border-radius: 100px; transition: .3s;}
#header .gnb_wrap .gnb > li .dp2 > li > a{padding: .5em 1.25em; font-weight:400; color: #555;}
#header .gnb_wrap .gnb > li .dp2 > li > a .tt{ font-size:1.125em;}
#header .gnb_wrap .gnb > li .dp2 > li:hover {border-color: #0072BC; box-shadow: 5px 5px 10px rgba(0,0,0,.08); transform: translate(-5px, -5px);}
#header .gnb_wrap .gnb > li .dp2 > li:hover > a {color: #0072BC; }
#header .gnb_wrap .gnb > li .dp3{ display:none;}
/* #header .gnb_wrap .gnb > li.act{ background:#f7f8ff;} */
#header .gnb_wrap .gnb > li.act .dp1:after,
#header .gnb_wrap .gnb > li.on .dp1:after{ opacity:1;}
#header .gnb_wrap .gnb > li .dp2 > li.act > a,
#header .gnb_wrap .gnb > li .dp2 > li.on > a{}

#header.gnbOpen .gnb_wrap .gnb > li.m_product{ position: unset;}
#header .gnb_wrap .gnb > li.m_product .dp2{ justify-content: unset; z-index:9999999999;}


#header .side_wrap{ gap:0 1.5em;}
#header .side_wrap .mem{}
#header .side_wrap .mem > li{}
#header .side_wrap .mem > li .in{ gap:0 .5em; padding:.5em 1em;}
#header .side_wrap .mem > li .in:hover .tt{ text-decoration:underline;}

#header .all_wrap{ color:#000;}
#header .all_wrap .all{ width:2.5em;}

.sub #header .all_wrap .all_btn .ham,
.sub #header .all_wrap .all_btn .ham:before,
.sub #header .all_wrap .all_btn .ham:after {background: #fff;}


.allGnbOn #header .all_wrap .all_btn .ham:before,
.allGnbOn #header .all_wrap .all_btn .ham:after {filter: brightness(1) invert(0) !important;}
.scroll #header.active .all_wrap .all_btn .ham,
.scroll #header.active .all_wrap .all_btn .ham:before,
.scroll #header.active .all_wrap .all_btn .ham:after {background: #000;}

#header.active .all_wrap .all_btn .ham,
#header.active .all_wrap .all_btn .ham:before,
#header.active .all_wrap .all_btn .ham:after {filter: brightness(1) invert(0) !important;}

/* #header .all_wrap .all_btn {position: relative;} */

#header .all_wrap .all_btn{ position:relative; display:block; width:2.5em; height:1.125em; margin-left:auto;}
#header .all_wrap .all_btn .ham,
#header .all_wrap .all_btn .ham:before,
#header .all_wrap .all_btn .ham:after { display:block; width:100%; height:1px; background:#000; transition:.2s, background 0s;}
#header .all_wrap .all_btn .ham:before,
#header .all_wrap .all_btn .ham:after { content:""; position:absolute; left:0;}
#header .all_wrap .all_btn .ham:before{ top:calc(.5em); width:75%;}
#header .all_wrap .all_btn .ham:after { top:calc(1em); width:88%;}
#header .all_wrap .all_btn:hover .ham:before{ width:100%;}
#header .all_wrap .all_btn:hover .ham:after { width:100%;}

#header .all_wrap .all_layer { position:fixed; top:0; left:0; width:100%; height:100vh; opacity:0; visibility:hidden; pointer-events:none; overflow: hidden;}
#header .all_wrap .all_layer .all_shape{ position:fixed; bottom:-7em; right:-2vw; width:25vw; opacity:.15;}
#header .all_wrap .all_layer .all_shape img{ width:100%;}
#header .all_wrap .all_layer .all_inner{ width:100%; min-height:100%; overflow:hidden; color:#222; position: relative;}
#header .all_wrap .all_layer .all_inner:before {content: ''; position: absolute; width: 0; height: 100%; transform: translate(-50%, -50%); left: 50%; top: 50%; background: #fff; transition: .5s; z-index: -1;}
#header .all_wrap .all_layer .all_inner > .wrap_bg{ width:40%; padding:14vh 4vw 3em 4vw; opacity: 0; transition: .5s .5s;}
#header .all_wrap .all_layer .all_inner > .wrap_bg .img { position: relative; border-radius: 1em; overflow: hidden; height: 55em;}
#header .all_wrap .all_layer .all_inner > .wrap_bg .img:before{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0, .25); content: '';}
#header .all_wrap .all_layer .all_inner > .wrap_bg .img .all_posiT{ position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%); width: 100%; text-align: center; padding: 2.5em; box-sizing:border-box;}
#header .all_wrap .all_layer .all_inner > .wrap_bg .img .all_posiT .all_T{ color: #fff; font-size: 2.25em; font-weight: 600; padding-top: 1.5em;}
#header .all_wrap .all_layer .all_inner > .wrap_bg .img .all_posiT .all_logo{ width: 14.5em; margin: 0 auto;}
#header .all_wrap .all_layer .all_inner > .wrap_bg .img > img{ width: 100%; height: 100%; object-fit: cover;}
#header .all_wrap .all_layer .all_inner > .wrap_in{ flex:1; padding:15vh 8em 3em; overflow:hidden;}

#header .all_wrap .all_layer .all_inner > .wrap_bg .cs{ padding-top:2em; font-size:1.188em;}
#header .all_wrap .all_layer .wrap_middle{ padding-bottom:3em; opacity:0; transform:translateY(2em);}
#header .all_wrap .all_layer .wrap_middle .gnb{ display:block;}
#header .all_wrap .all_layer .wrap_middle .gnb li a{ position:relative;}
#header .all_wrap .all_layer .wrap_middle .gnb > li + li{ margin-top:4em;}
#header .all_wrap .all_layer .wrap_middle .gnb > li .dp1{ display:inline-block; text-align:left !important;}
#header .all_wrap .all_layer .wrap_middle .gnb > li .dp1 .tt{font-size:2.000em; font-weight: 700;}
#header .all_wrap .all_layer .wrap_middle .gnb > li .dp2{ margin-top:1.5em; align-items:center; flex-wrap: wrap; gap: 1.5em 0;}
#header .all_wrap .all_layer .wrap_middle .gnb > li .dp2 > li:not(:last-child) > a:after{ content:""; margin:0 1.5em; width:1px; height:1em; background:rgba(0,0,0,.1);}
#header .all_wrap .all_layer .wrap_middle .gnb > li .dp2 > li > a .in{}
#header .all_wrap .all_layer .wrap_middle .gnb > li .dp2 > li > a .tt{ font-size:1.125em;}
#header .all_wrap .all_layer .wrap_middle .gnb > li .dp2 > li.act > a .tt{ text-decoration:underline; color: #042d5c;}
.allGnbOn{ overflow-y:hidden} 
.allGnbOn body{ overflow-y:scroll}
.allGnbOn #header .all_wrap .all_layer .all_inner:before {transform: translate(-50%, -50%); width: 100%;}
.allGnbOn #header .logo{ z-index:100; top:0; left:4vw; filter:brightness(0) invert(1) !important;}
.allGnbOn #header .all_wrap .all_btn{ z-index:999; position:fixed; top:2em; right:4vw; width:3.5em; height:3.5em; filter:brightness(0) invert(0) !important;}
.allGnbOn #header .all_wrap .all_btn .ham{ background:transparent !important; transition:0s;}
.allGnbOn #header .all_wrap .all_btn .ham:before,
.allGnbOn #header .all_wrap .all_btn .ham:after { width:100% !important; top:50% !important;}
.allGnbOn #header .all_wrap .all_btn .ham:before{ transform:rotate(45deg);}
.allGnbOn #header .all_wrap .all_btn .ham:after { transform:rotate(-45deg);}
.allGnbOn #header .all_wrap .all_layer{ z-index:111; opacity:1; visibility:visible; pointer-events:all}
.allGnbOn #header .all_wrap .all_layer .wrap_bg .slogan{ opacity:1; transform:scale(1); transition:1s; transition-delay:.4s;}
.allGnbOn #header .all_wrap .all_layer .wrap_middle{ opacity:1; transform:translate(0); transition:1s; transition-delay:.2s;}
.allGnbOn #header .all_wrap .all_layer .wrap_bg{ opacity:1;}


.scroll .headH,
.scroll #header .gnb_wrap .gnb > li,
.scroll #header .gnb_wrap .gnb > li .dp1{ height:5em;}
.scroll #header .logo > .in img{ transform:scale(.85,.85);}

/* .wrapHide{ height:5em;} */
.stickyT{ position:sticky !important; top:5em;}

#header.active{ background:#fff;}
#header.active .inner{ color:#000;}
#header.active .logo,
#header.active .all_wrap .all_btn{ filter:none;}
#header.active .gnb_wrap .gnb > li.act .dp1,
#header.active .gnb_wrap .gnb > li.on .dp1{ color:#0072BC;}

.main #header { background:#fff;}
.main #header .inner{ color:#000;}
.main #header .logo,
.main #header .all_wrap .all_btn{ filter:none;}
.main #header .gnb_wrap .gnb > li.act .dp1,
.main #header .gnb_wrap .gnb > li.on .dp1{ color:#0072BC;}

#header.gnbOpen{ box-shadow:0 4px 1em rgba(0,0,0,.15);}
#header.gnbOpen:before{ background:#8198c9; opacity:.6;}
#header.gnbOpen .gnb_wrap .gnb > li { position:relative; height: 18em;}
#header.gnbOpen .gnb_wrap .gnb .dp2{ padding:2em 0;}
#header.gnbOpen .gnb_wrap .gnb > li.act .dp2 {opacity: 1; visibility: visible;}

/*contents*/
#contents{}
#contents .sub_page_top{ position:relative; height:37em; /* border-radius:0 0 0 6em; */ overflow:hidden; border-radius: 0 0 3em 3em;}
#contents .sub_page_top > .bg{ position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; transform:scale(1.1); transition:opacity .4s, transform 2s; /* border-radius: 0 0 0 6em; */ overflow: hidden;}
#contents .sub_page_top > .bg:before{ content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:linear-gradient(180deg,rgba(0,0,0,.5) 40%,rgba(0,0,0,.15) 100%);}
.load #contents .sub_page_top > .bg{ opacity:1; transform:scale(1);}

#contents .sub_page_tit{ position:relative; flex:1; color:#fff;}
#contents .sub_page_tit .sub_tit {/* border-bottom: 1px solid #fff6; */ padding-bottom: 1em;}
#contents .sub_page_tit .sub_tit .tt{ font-size:4.500em; font-weight:600;}
#contents .sub_page_tit .sub_txt{ margin-top:2em;}
#contents .sub_page_tit .sub_txt .tt{ font-size:1.250em;}
#contents .sub_page_menu{ position:relative; z-index: 111;}
#contents .sub_page_menu .gnb{ display:block;}
#contents .sub_page_menu .gnb .dp3{ display:none;}

#contents .sub_con_menu > .inner{ /*padding-top:2.5em; border-bottom:1px solid #ddd;*/}
#contents .sub_con_menu .gnb,
#contents .sub_con_menu .gnb .dp2{ display:block;}
#contents .sub_con_menu .gnb .dp3{ gap:.75em; justify-content:center;}
#contents .sub_con_menu .gnb .dp3 > li{}
#contents .sub_con_menu .gnb .dp3 > li > a{ position:relative; padding:1.5em 2em; min-width:12em; color:#888; transition:.2s;}
#contents .sub_con_menu .gnb .dp3 > li > a:after{ content:""; position:absolute; left:0; bottom:-2px; width:100%; height:4px; background:#104397; border-radius:1em; opacity:0; transform:scaleX(0); transition:.2s;}
#contents .sub_con_menu .gnb .dp3 > li > a .tt{ font-size:1.313em;}
#contents .sub_con_menu .gnb .dp3 > li.act > a,
#contents .sub_con_menu .gnb .dp3 > li.on > a{ color:#104397; font-weight:500;}
#contents .sub_con_menu .gnb .dp3 > li.act > a:after,
#contents .sub_con_menu .gnb .dp3 > li.on > a:after{ opacity:1; transform:scaleX(1);}

/* contents - New style */
/* #contents { position:absolute; left:0; right:0; bottom:0;} */
#contents .menu{ background:#fff;/*  border-bottom: 1px solid #ddd; */ }
#contents .menu .tit{ height:4em;}
#contents .menu .home .tit{ width:4em; background:#fff; color:#333; position: relative; transition: .3s;}
#contents .menu .def{ position:relative; cursor:pointer; background: #fff;}
#contents .menu .def > .tit{ position:relative; min-width:12em; padding:0 2.5em 0 2em; /* border-right:1px solid #d4d5d8; */ transition: .3s;}
#contents .menu .home .tit:after,
#contents .menu .def > .tit:after {content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 1em; background: #d4d5d8; transition: .3s;}
#contents .menu .def > .tit:last-child:after {display: none;}
#contents .menu .def > .tit .tt{ font-size:1.125em;}
#contents .menu .def > .tit .arrow{ transition:.2s; font-size: .85em; margin-left: 1em;}
#contents .menu .def > .tit .arrow:before{ content:"\e942";}
#contents .menu .home:hover .tit,
#contents .menu .def:hover > .tit,
#contents .menu .def.on > .tit{ color:#222; font-weight: 700;}
/* #contents .menu .home:hover .tit:after,
#contents .menu .def:hover > .tit:after,
#contents .menu .def.on > .tit:after {opacity: 0;} */
#contents .menu .def.on > .tit .arrow{ transform:rotate(-180deg);}


/* #contents .sub_page_menu { margin: 6.5em 0 0 0;} */

#contents .menu .def .gnb{ position:absolute; top:100%; left:-1px; right:-1px; /* padding:.5em; */ background:#fff; border:solid #eee; border-width:0 1px 1px 1px; display:none; box-shadow: 0 0 10px rgba(0,0,0,.1);}
#contents .menu .def .gnb .flex{ display:block;}
#contents .menu .def .gnb li > a{ position:relative; padding:.75em 1.5em; border-top:1px solid #ecf0f4; text-align:left !important; color:#444;}
#contents .menu .def .gnb li:first-child > a{ border-top:none;}
#contents .menu .def .gnb li > a .tt{ font-size:1em; font-weight: 500;}
#contents .menu .def .gnb li.plus > a{ padding-right:2.5em;}
#contents .menu .def .gnb li.plus > a:after{ content:"\e913"; font-family:xeicon; color:#333; position:absolute; top:.5em; right:.5em; width:1.5em; height:1.5em; line-height:1.5em; background:#fff; border-radius:100%; text-align:center;}
#contents .menu .def .gnb li:hover > a{ background:#ebf0f4;}
#contents .menu .def .gnb li.on > a{ background:#04182e; color:#fff;}

#contents .menu .def .gnb > li,
#contents .menu .def .gnb > li.m_guide,
#contents .menu .def .gnb > li .dp1,
#contents .menu .def .gnb > li .dp2,
#contents .menu .def .gnb > li .dp2 > li,
#contents .menu .def .gnb > li .dp2 > li > a,
#contents .menu .def .gnb > li .dp3{ display:none;}
#contents .menu .def .gnb li.on{ display:block !important;}
#contents .menu .depth_1 .gnb > li,
#contents .menu .depth_1 .gnb > li .dp1,
#contents .menu .depth_2 .gnb > li .dp2,
#contents .menu .depth_2 .gnb > li .dp2 > li,
#contents .menu .depth_2 .gnb > li .dp2 > li > a,
#contents .menu .depth_3 .gnb > li .dp2,
#contents .menu .depth_3 .gnb > li .dp3{ display:block;}
#contents .menu .def.on .gnb{ display:block;}

#contents .doc{ padding:4.5em 0 12em 0;}
#contents .doc.pt0{ padding: 0em 0 6em 0;}

.dp1on .gnb .dp2{ display:none!important}
/* .dp2on .gnb > li {display: none !important;} */
/* .dp2on .gnb > li .dp1{ display:none!important} */
.dp2on .gnb > li.on{ display:block!important}
.dp3on .gnb > li,
.dp3on .gnb > li .dp1,
.dp3on .gnb > li .dp2 > li,
.dp3on .gnb > li .dp2 > li > a{ display:none!important}
.dp3on .gnb > li.on,
.dp3on .gnb > li .dp2 > li.on{ display:block!important}