@charset "utf-8";/* CSS Document */
.boxSub,
.box0 { padding: 0 var(--pagePD); box-sizing: border-box}
.box1 { box-sizing: border-box; width: 1400px; margin: 0 auto}

.gnb li.m_hide { display: none}
body:not(.pop) { display: flex; flex-direction: column; min-height: 100vh; min-height: calc(var(--vh, 1vh) * 100)}

#header { position: fixed; left: 0; top: 0; width: 100%; z-index: 1000; background: #fff; transform: translateY(-100%)}
#header .top_wrap { position: relative}
#header .top_wrap .wrapH,
#header .top_wrap .gnb_wrap .dp1 { height: var(--headerH); transition: height .3s}
.headerT { padding-top: var(--headerH)}
#header .top_wrap .wrapF { display: flex; align-items: center; gap: 0 3vw}
#header .top_wrap .wrapF > * { position: relative; z-index: 2}
#header .top_wrap .logo { height: 1.5em}
#header .top_wrap .logo > a { display: block; height: 100%; overflow: hidden}
#header .top_wrap .logo > a .in { display: block; height: 100%; transition: .5s}
#header .top_wrap .logo > a img { height: 100%; display: block}
#header .top_wrap .etc_wrap { display: flex; align-items: center; gap: 2vmin}
#header .top_wrap .etc_wrap .btnInc { width: 3em; height: 3em; display: flex; align-items: center; justify-content: center; border-radius: 1em}
#header .top_wrap .etc_wrap .btnInc .ico { font-size: 1.75em}
#header .top_wrap .etc_wrap .allBtn { position: relative}
#header .top_wrap .etc_wrap .allBtn .line { width: 100%; height: 1px; position: absolute; left: 50%; top: 50%; background: #000}
#header .top_wrap .etc_wrap .allBtn .line.e1 { transform: translate(-50%, -.375em)}
#header .top_wrap .etc_wrap .allBtn .line.e2 { transform: translate(-50%, .37em)}

html:not(.allOn) #header .top_wrap .gnb_wrap { display: flex; align-items: center; flex: 1; min-width: 0; justify-content: center; height: 100%; z-index: 1; max-width: 110vmin; margin: 0 auto}
html:not(.allOn) #header .top_wrap .gnb_wrap .gnb { position: absolute; left: 50%; transform: translateX(-50%); top: 0; width: 100%; justify-content: space-around; box-sizing: border-box; transition: padding .3s}
html:not(.allOn) #header .top_wrap .gnb_wrap .gnb a { display: flex}
html:not(.allOn) #header .top_wrap .gnb_wrap .gnb > li { position: relative; } 
html:not(.allOn) #header .top_wrap .gnb_wrap .gnb > li .dp1 { display: flex; align-items: center; justify-content: center}
html:not(.allOn) #header .top_wrap .gnb_wrap .gnb > li .dp1 .tt { font-weight: 500; font-size: 1.188em}
html:not(.allOn) #header .top_wrap .gnb_wrap .gnb > li .dp1 .va { position: relative}
html:not(.allOn) #header .top_wrap .gnb_wrap .gnb > li .dp1 .va:after { content: ""; position: absolute; bottom: 0; left: 50%; width: 0; height: 1px; background: #ddd; transform: translate(-50%, .25em)}
html:not(.allOn) #header .top_wrap .gnb_wrap .gnb > li .dp2 { position: absolute; left: 50%; top: 100%; background: #fff; transform: translate(-50%, -1em); box-shadow: 0 1em 1em rgba(0, 0, 0, .1); visibility: hidden; opacity: 0; flex-direction: column; width: 10em; box-sizing: border-box; padding: 1em}
html:not(.allOn) #header .top_wrap .gnb_wrap .gnb > li .dp2 > li > a { padding: .5em; text-align: center; justify-content: center; color: #777; border-radius: .25em}
html:not(.allOn) #header .top_wrap .gnb_wrap .gnb > li .dp2 > li:hover > a { color: #111; background: #f5f5f5}
html:not(.allOn) #header .top_wrap .gnb_wrap .gnb > li:hover .dp2 { visibility: visible; opacity: 1; transition: .3s}
html:not(.allOn) #header .top_wrap .gnb_wrap .gnb > li:hover .dp1,
html:not(.allOn) #header .top_wrap .gnb_wrap .gnb > li.on .dp1 { color: #888}
html:not(.allOn) #header .top_wrap .gnb_wrap .gnb > li:hover .dp1 .va:after,
html:not(.allOn) #header .top_wrap .gnb_wrap .gnb > li.on .dp1 .va:after { width: 100%; transition: .3s}

.scroll.up #header { box-shadow: 0 0 1em rgba(0, 0, 0, .2)}
.scroll:not(.up) #header { box-shadow: none}
html:not(.scroll) #header,
.scroll.up #header { transform: translateY(0); transition: transform .5s}

#header .top_wrap .etc_wrap { display: flex; align-items: center}
#header .top_wrap .etc_wrap .btnInc { width: 4em; height: var(--headerH); color: #999; display: flex; align-items: center; justify-content: center}
#header .top_wrap .etc_wrap .btnInc .ico { font-size: 1.75em}
#header .top_wrap .etc_wrap .btnInc.allBtn .ico { font-size: 2em; color: #111}

.scroll #header { background: #fff}

.allOn { overflow: hidden}
.allOn #header { height: 100vh; position: fixed; box-sizing: border-box; padding-right: 30vw; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--scrollBar); background: #fff}
.allOn #header:before { content: ""; position: fixed; right: 0; top: 0; width: 30vw; height: 100%; background: url(../images/main/about2.jpg) no-repeat center; background-size: cover; box-shadow: 1vmin 0 1vmin rgba(0, 0, 0, .3) inset}
.allOn #header .top_wrap .logo { display: flex; align-items: center}
.allOn #header .top_wrap .wrapF { flex-wrap: wrap; gap: 8vmin 4vmin; height: auto; padding: 6vmin}
.allOn #header .gnb_wrap { flex: 0 0 auto; width: 100%; margin-left: 0; order: 10}
.allOn #header .gnb_wrap .gnb { flex-wrap: wrap; gap: 6vmin 6%}
.allOn #header .gnb_wrap .gnb a { text-align: left; display: flex; box-sizing: border-box; line-height: 1.2}
.allOn #header .gnb_wrap .gnb > li { box-sizing: border-box; width: 29.3333%}
.allOn #header .gnb_wrap .gnb > li .dp1 { padding: 0 0 2vmin 0; height: auto; justify-content: flex-start}
.allOn #header .gnb_wrap .gnb > li .dp1 .va { position: relative}
.allOn #header .gnb_wrap .gnb > li .dp1 .va:before { content: ""; position: absolute; left: 100%; bottom: 100%; transform: translate(-25%, 70%); width: 1.5em; height: 1.5em; background: var(--siteC); border-radius: 50%; font-size: 0; transition: .3s; opacity: .3;}
.allOn #header .gnb_wrap .gnb > li:hover .dp1 .va:before { font-size: 1em}
.allOn #header .gnb_wrap .gnb > li .dp1 .tt { font-size: 2.8vmin; font-weight: 500; position: relative}
.allOn #header .gnb_wrap .gnb > li .dp2 { flex-direction: column; gap: 1vmin}
.allOn #header .gnb_wrap .gnb > li .dp2 > li > a { height: 6vmin; align-items: center; padding: 1vmin 2vmin; border: 1px solid #ddd; border-radius: 1vmin; color: #666; position: relative; overflow: hidden}
.allOn #header .gnb_wrap .gnb > li .dp2 > li > a:after { content: "\e93f"; font-family: xeicon; position: absolute; right: 1vmin; top: 50%; transform: translateY(-50%); margin-right: -2vmin; opacity: 0; transition: .3s}
.allOn #header .gnb_wrap .gnb > li .dp2 > li > a .tt { font-size: 1.8vmin; font-weight: 500}
.allOn #header .gnb_wrap .gnb > li .dp2 > li:hover > a { box-shadow: 0 0 1em rgba(0, 0, 0, .1); color: #111; border-color: var(--siteC)}
.allOn #header .gnb_wrap .gnb > li .dp2 > li:hover > a:after { margin-right: 0; opacity: 1}
.allOn #header .all_wrap .allBtn { position: fixed; right: 4vmin; top: 0}
.allOn #header .all_wrap .allBtn .ico:before { content: "\e921"; color: #111}
.allOn #header .top_wrap .etc_wrap .location { display: none}

.allOn #header:after { content: ""; position: absolute; right: 0; top: 0; width: 100%; height: 100%; background: #eee; z-index: 2; animation: headerAllAni 1s forwards}
.allOn #header:before { animation: headerAllAni2 1s forwards .5s; transform: translateX(100%)}
@keyframes headerAllAni { 100% { width: 0} 
 }
@keyframes headerAllAni2 { 100% { transform: translateX(0)} 
 }


#footer { z-index: 1; padding: 4em 0 4em 0; background: #000; margin-top: 16vmin; color: #fff}
#footer .goTop { position: fixed; right: 0; bottom: 0; width: 3.5em; line-height: 3.5em; text-align: center; background: var(--siteC); color: #fff; box-shadow: 0 0 1em rgba(0, 0, 0, .1); opacity: 0; transform: translateY(100%); transition: .5s}
#footer .goTop .xi { font-size: 1.5em; transition: .3s}
#footer .goTop:hover .xi { transform: translateY(-.25em)}
.scroll #footer .goTop { opacity: 1; transform: translateY(0)}
#footer .wrapF { display: flex; align-items: center; gap: 15vmin}
#footer .logo_wrap { display: flex; flex-direction: column; align-items: center; gap: 2em}
#footer .logo img { height: 8em; filter: brightness(0) invert(1)}
#footer .menu_wrap { display: flex; display: flex; flex-direction: column; gap: 2em}
#footer .menu { display: flex; flex-direction: column; gap: 1em 0}
#footer .menu > li { width: 100%; } 
#footer .menu > li > a { display: block; padding-right: 2em; position: relative; color: #fff; font-size: .938em; opacity: .7}
#footer .menu > li > a:after { content: "\e915"; font-family: xeicon; position: absolute; right: 0; top: 0; transform: rotate(45deg)}
#footer .menu > li.point > a { opacity: 1; font-weight: 700}
#footer .info_wrap { display: flex; flex-direction: column; gap: 2.5em; flex: 1; min-width: 0}
#footer .info { overflow: hidden}
#footer .info > li { float: left; margin-right: 2em; margin-bottom: .5em; opacity: .7; position: relative; font-size: .938em}
#footer .info > li:before { content: ""; position: absolute; left: -1em; height: 70%; top: 50%; transform: translateY(-50%); width: 1px; background: #fff; opacity: .2}
#footer .info > li.point { font-weight: 700}
#footer .info > li.br { clear: left}
#footer .info > li.copyright { font-size: .813em; opacity: .6; margin-top: .5em; text-transform: uppercase}
#footer .cs_wrap { display: flex; gap: 0 4em; text-align: right}
#footer .cs_wrap .wrap_in { position: relative}
#footer .cs_wrap .wrap_in:not(:first-child):after { content: ""; position: absolute; left: -2em; top: 0; width: 1px; height: 100%; background: #fff; opacity: .2}
#footer .cs_wrap .t1 { opacity: .7; font-weight: 500; margin-bottom: .5em}
#footer .cs_wrap .t2 { font-weight: 700; font-size: 1.125em}
.sns_st { display: flex; gap: .5em}
.sns_st > li:nth-of-type(3) { display: none; } 
.sns_st > li > a { display: flex; align-items: center; justify-content: center; width: 2em; height: 2em; border-radius: 50%; transition: .3s; border: 1px solid rgba(255, 255, 255, .2)}
.sns_st > li > a .xi { font-size: 1em}
.sns_st > li > a img { height: 1em}
.sns_st > li > a:hover { background: #333; color: #fff}
.sns_st > li > a:hover img { filter: brightness(0) invert(1)}
.sns_st > li > a.kc img { height: 1.438em}

#contents { flex: 1 1 0%; min-height: 0}
#contents .sub_top_wrap { position: relative; padding-top: var(--headerH)}
#contents .sub_top_wrap .wrapBg { height: 40vh; overflow: hidden; position: relative}
#contents .sub_top_wrap .wrapBg .bg { height: 100%; position: relative; background-size: cover}
#contents .sub_top_wrap .wrapBg .bg:after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; opacity: .3}
#contents .sub_top_wrap .wrapBg .bg { background-position: center 0%; transition: 3s}
#contents .sub_top_wrap.on .wrapBg .bg { background-position: center 50%}
#contents .sub_top_wrap .wrapBg .tt { position: absolute; left: 0; top: 0; width: 100%; height: 100%; box-sizing: border-box; padding: 5vmin; text-align: right; display: flex; align-items: flex-end; justify-content: flex-end}
#contents .sub_top_wrap .wrapBg .tt .t1 { font-size: 5vmin; mix-blend-mode: difference; color: #fff}
#contents .sub_top_wrap .wrapCon { position: relative; box-sizing: border-box}
#contents .sub_top_wrap .wrapCon .wrapF { display: flex; flex-direction: column}
#contents .subTit { display: flex; height: 18vh; box-sizing: border-box; padding-bottom: 2vh; align-items: flex-end; padding-left: 1.5em; } 
#contents .subTit .t1 { font-size: 7vmin}
#contents .subTit .subNav { margin-left: auto; padding-right: 45px; } 
#contents .subNav { display: flex; align-items: center; color: #888}
#contents .subNav { display: inline-flex; align-items: center; gap: 0 1vmin}
#contents .subNav > li:not(.home):before { content: "\e940"; font-family: xeicon; margin-right: .5em}
#contents .subNav > li.home > a { width: 2em; height: 2em; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center}
#contents .subNav > li.home > a .xi { font-size: 1em}
#contents .subTab { border-bottom: 1px solid #111}
#contents .subTab .gnb > li.on { width: 100%}
#contents .subTab .gnb .dp2 { width: 100%; display: flex; justify-content: center}
#contents .subTab .gnb .dp2 > li > a { display: flex; align-items: center; justify-content: center; text-align: center; height: 8em; box-sizing: border-box; padding: 0 5vmin; opacity: .5}
#contents .subTab .gnb .dp2 > li > a .va { position: relative}
#contents .subTab .gnb .dp2 > li > a .tt { font-weight: 700; font-size: 1.375em}
#contents .subTab .gnb .dp2 > li.on > a,
#contents .subTab .gnb .dp2 > li:hover > a { opacity: 1}
#contents .subTab .gnb .dp2 > li.on > a .va:after { content: ""; position: absolute; left: 100%; bottom: 100%; transform: translate(100%, 0); width: .375em; height: .375em; border-radius: 50%; background: #111}

#contents .subPageTit { padding: 4em 0; line-height: 1.1; text-align: center}
#contents .subPageTit .t1 { font-weight: 500; font-size: 3em}

#contents .doc { padding: 8vmin 0 0 0}
#contents .doc.pt3 { padding: 3vmin 0 0 0}

.dp1on .gnb .dp2 { display: none !important}
.dp2on .gnb > li,
.dp2on .gnb > li .dp1,
.dp2on .gnb > li .dp3 { 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}

/**/
.br1 { border-radius: 1em}
.br2 { border-radius: 2em}
.outRound { position: relative; padding: 1.5em; background: #fff; box-sizing: border-box}
.outRound:before,
.outRound:after { content: ""; position: absolute; width: 2em; height: 2em; z-index: 1; background: url(../images/inc/round.svg) no-repeat; background-size: 100% 100%}
.outRound.rb { border-top-left-radius: 2em}
.outRound.rb:before { right: 0; bottom: 100%}
.outRound.rb:after { right: 100%; bottom: 0}
.outRound.lb { border-top-right-radius: 1em}
.outRound.lb:before { left: 0; bottom: 100%; transform: rotateY(180deg)}
.outRound.lb:after { left: 100%; bottom: 0; transform: rotateY(180deg)}

.mainBox { padding: 15vmin 0; position: relative}
.mainBox.bg1 { background: #f5f5f5}
.mainBox .wrapBg { position: absolute; left: 0; top: 0; width: 100%; height: 100%}
.mainBox .wrapBg:after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; opacity: .2}
.mainBox .wrapF { display: flex; flex-direction: column; gap: 4vmin 8vmin; position: relative}
.mainBox .wrapF.dRow { flex-direction: row; align-items: center}
.mainBox .wrapF.dRow .wrapCon { flex: 1; min-width: 0}

.mainTit { display: flex; flex-direction: column; align-items: flex-start; gap: .5em; margin-bottom: 2em}
.mainTit.ac { align-items: center; text-align: center}
.mainTit .tit0 { font-size: 2.25em; font-weight: 500; opacity: .5; font-style: italic}
.mainTit .tit0 > i { font-style: inherit}
.mainTit .tit0.s1 { font-size: 2em}
.mainTit .tit1 { font-size: 2.75em; font-weight: 500; letter-spacing: -.05em; word-spacing: .1em; line-height: 1.3}
.mainTit .tit1 .inS { font-size: 1.75em; font-weight: 700}
.mainTit .tt1 { filter: opacity(.4); font-weight: 500; font-size: 1.188em; line-height: 1.5; margin-top: 1.5em; word-break: keep-all}
.mainTit .tt1.s1 { filter: opacity(.7); font-size: 1.375em}
.mainTit .mgL { margin-left: auto}
.mainTit.white { filter: brightness(0) invert(1)}
.mainTit.white .tt1 { opacity: .8}
.mainTit .mainMore { margin: 5em 0 0 0}
.mainTitW { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 2em}
.mainTitW .mainTit { margin-bottom: 0}

.mainMore { display: flex; align-items: center; gap: 1em}
.mainMore .t1 { font-size: 1.063em; font-weight: 500}
.mainMore .arrow { display: flex; align-items: center}
.mainMore .arrow:before { content: ""; display: block; width: 3em; height: 1px; background: #111; transition: .3s}
.mainMore .arrow .cc { width: 2em; height: 2em; background: #111; border-radius: 50%; position: relative}
.mainMore .arrow .cc:before { content: ""; position: absolute; left: 0; top: calc(50% - 1px); width: 60%; height: 1px; background: #fff}
.mainMore:hover .arrow:before { width: 4em}

.tabSt { display: flex; gap: 4em; align-items: center}
.tabSt > li > a { position: relative; opacity: .5}
.tabSt > li > a .t1 { font-weight: 700; font-size: 1.25em}
.tabSt > li.on > a,
.tabSt > li:hover > a { opacity: 1}
.tabSt > li.on > a:before { content: ""; position: absolute; right: calc(100% + .25em); top: 0; width: .375em; height: .375em; border-radius: 50%; background: #111}

.vod_wrap { position: relative}
.vod_wrap .vod { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover}
.vod_wrap .layer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; opacity: .1}
.vod_wrap .layer.gra { background: linear-gradient(0deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, .3) 100%); } 
.visualSlide .el { position: relative; overflow: hidden; height: 100vh; background: #fff}
.visualSlide .el .bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: scale(1.2)}
.visualSlide .el .vod_wrap { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } 
.visualSlide .el .vod_wrap:after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000}
.visualSlide .el.swiper-slide-active .vod_wrap:after,
.visualSlide .el.swiper-slide-duplicate-active .vod_wrap:after { transition: 2s; opacity: .2}
.visualSlide .el.swiper-slide-active .bg,
.visualSlide .el.swiper-slide-duplicate-active .bg { transition: 7s; transform: scale(1) rotate(.001deg)}
.visualSlide .el:nth-child(3n -1) .bg { width: 110%; transform: scale(1)}
.visualSlide .el.swiper-slide-active:nth-child(3n -1) .bg,
.visualSlide .el.swiper-slide-duplicate-active:nth-child(3n -1) .bg { transform: translateX(-9.0909%) rotate(.001deg)}
.visualSlide .el:nth-child(3n -2) .bg { width: 110%; transform: scale(1); left: auto; right: 0}
.visualSlide .el.swiper-slide-active:nth-child(3n -2) .bg,
.visualSlide .el.swiper-slide-duplicate-active:nth-child(3n -2) .bg { transform: translateX(9.0909%) rotate(.001deg)}

.visualSlide_wrap { position: relative}
.visualSlide_wrap .slogan { position: absolute; width: 100%; height: 100%; left: 0; top: 0; color: #fff; z-index: 10}
.visualSlide_wrap .slogan .in { display: flex; flex-direction: column; justify-content: center; height: 100%}
.visualSlide_wrap .slogan .t1 { font-weight: 700; font-size: 2.5vw; word-spacing: .2vw; margin-bottom: 1vw}
.visualSlide_wrap .slogan .t2 { font-weight: 700; font-size: 10vw; letter-spacing: -.2vw; word-spacing: .2vw}
.visualSlide_wrap .slogan .t3 { font-size: 2vw; filter: opacity(.7); line-height: 1.5}
.visualSlide_wrap .slogan .t3 i { transition-delay: 1s}

.visualSlide_wrap .controlW { position: absolute; bottom: 2em; z-index: 10; width: 100%}
.visualSlide_wrap .controlW .in { display: flex; align-items: center; } 
.visualSlide_wrap .swiperControl { margin-left: auto; display: flex; align-items: center; } 
.visualSlide_wrap .swiperControl .paging { display: flex; margin: 0}
.visualSlide_wrap .swiperControl .paging span { font-size: .75em}
.visualSlide_wrap .swiperControl .paging span.swiper-pagination-bullet-active { height: 0; width: 8em; transform: none; transition: width .5s}
.visualSlide_wrap .swiperControl .btnW { display: flex; margin: 0 1em}
.visualSlide_wrap .swiperControl .btnW .swiperBtn:hover { background: none}

.mainScroll { color: #fff}
.mainScroll .tt { display: flex; align-items: center; font-size: .813em; font-weight: 500}
.mainScroll .tt .xi { font-size: 1.5em; margin-right: .25em; position: relative}

.mainAbout { --mainSecGap: 1.5em; } 
.mainAbout .mainTit { width: 40%}
.mainAbout .list { display: flex; gap: var(--mainSecGap)}
.mainAbout .list > li { flex: 1}
.mainAbout .list > li .in { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 1em}
.mainAbout .list > li .imgW { position: relative}
.mainAbout .list > li .imgW .resize { padding-bottom: 133%}
.mainAbout .list > li .imgW:after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; opacity: .1}
.mainAbout .list > li .conW { display: flex; gap: 1em; flex-direction: column; box-sizing: border-box; padding: .25em; padding-right: 1em}
.mainAbout .list > li .conW .ico { font-size: 2.5em; margin-bottom: .25em}
.mainAbout .list > li .conW .t1 { font-size: 1.25em; font-weight: 700; } 
.mainAbout .list > li .conW .t2 { color: #777; word-break: keep-all}
.mainAbout .list > li:nth-child(2) { padding-top: 4em}

.mainSite .inpW { display: flex; gap: 4px}
.mainSite .inpW .w1 { width: 20%}
.mainSite .inpW .w2 { width: 20%}
.mainSite .inpW .w3 { flex: 1; min-width: 0}
.mainSite .inpW .w4 { width: 15%}

.reviewSlideW { margin: -1em; flex: 1; min-width: 0}
.reviewSlideW .el { width: 16.66%}
.reviewSlideW .el .eIn { margin: 1em}
.reviewSlide_control { margin: 2vmin 0 0 2vmin}

.mainPr { overflow: hidden; } 
.mainPr .textAniW { margin-bottom: 1vmin}
.mainPr .textAni { font-size: 10vmin; line-height: 1; mix-blend-mode: difference; word-spacing: 1vmin; font-style: italic; color: #777}
.mainPr .textAni:before { display: inline-block; padding: 0 8vmin; transform: translateY(-1.5vmin); opacity: .2}
.mainPr .textAni .ko { font-size: 6vmin; font-family: SUIT, sans-serif; font-style: normal}
.mainPr .imgW { height: 40vh; width: 40vh; margin: 0 auto; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff}
.mainPr .imgW .t1 { font-size: 1.875em; word-spacing: .25em}
.mainPr.on .imgW { width: 100%; transition: 2s}

.newsSlide,
.newsSlide .el { height: 8em}
.newsSlideW { display: flex; align-items: center; gap: 2em; padding: 0 2em; } 
.newsSlideW .titW { display: flex; align-items: center; gap: 1em}
.newsSlideW .titW .t1 { font-weight: 700; font-size: 1.375em}
.newsSlideW .newsSlide { flex: 1; min-width: 0}
.mainNewsSt { height: 100%; display: flex; align-items: center}
.mainNewsSt .conW { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4em}
.mainNewsSt .tTit { flex: 1; min-width: 0; font-size: 1.125em; font-weight: 500}
.mainNewsSt .tDate { opacity: .5}
.mainNewsSt:hover .tTit { text-decoration: underline}

.mainLink .wrapLine { height: 1px; background: #111; transform: scale(0)}
.mainLink.on .wrapLine { transform: scale(1); transition: 1s; transform-origin: 0 50%}
.mainLink.on .wrapLine.eR { transform-origin: 100% 50%}
.mainLink .list { display: flex; overflow: hidden}
.mainLink .list > li { flex: 1; min-width: 0}
.mainLink .list > li > a { display: flex; align-items: center; justify-content: center; gap: 1em; position: relative; height: 8em}
.mainLink .list > li > a:before { content: ""; position: absolute; left: -1px; top: 50%; height: 100%; width: 1px; background: #111; transform: translateY(-50%)}
.mainLink .list > li > a .ico { height: 2.5em}
.mainLink .list > li > a .t1 { font-weight: 700; font-size: 1.313em}
.mainLink .list > li > a .arrow { transition: .3s}
.mainLink .list > li > a .arrow:before { content: "\ea3f"}
.mainLink .list > li > a:hover .arrow { margin-left: 1em}


.page_tt { font-size: 1em; word-break: keep-all; line-height: 1.4; } 
.page_tt > .tt + .tt { margin-top: 1.25em; } 
.page_tt.o1 { opacity: .7; } 
.page_tt.o2 { opacity: .1; } 
.page_tt.s1 { font-size: 0.938em}
.page_tt.s2 { font-size: 1.063em}
.page_tt.s3 { font-size: 1.125em}
.page_tt.s4 { font-size: 1.250em}
.page_tt.s5 { font-size: 1.313em}
.page_tt.s6 { font-size: 1.500em}
.page_tt.s7 { font-size: 1.875em}
.page_tt.s8 { font-size: 2.250em}
.page_tt.s9 { font-size: 2.500em}
.page_tt.s10 { font-size: 3.000em}
.page_tt.s11 { font-size: 3.500em}
.page_tt.s12 { font-size: 4.000em; } 
.page_tt.s13 { font-size: 4.500em; } 
.page_tt.s14 { font-size: 5.000em; } 

.page_col { gap: 2em 6em; } 
.page_col.gp1 { } 
.page_col > li { } 
.page_col > li.w1 { width: 45%; } 
.page_col > li.w2 { width: 26%; } 
.page_col + .page_col { margin-top: 8em; } 
.page_col > li .p1 { padding: 4em 0 5em 0; } 
.page_col > li .p2 { padding: 1.5em 0 2em 0; } 
.page_col > li .round { border-radius: 1.5em; overflow: hidden; } 
.page_col > li .wrap_img:not(.resize) { position: relative; height: 100%; } 

.pageTit { margin-bottom: .75em; } 
.pageTit > .tt { font-size: 1.715em; font-weight: 700; line-height: 1.4; } 

/*tab*/
.wrap_idx .con_idx .idx { display: none; } 

/* on 클래스가 붙은 탭만 보이기 */
.wrap_idx .con_idx .idx.on { display: block; } 
.wrap_idx .sub-tab { display: flex; border: 1px solid #ddd; border-radius: 3em; overflow: hidden; } 
.wrap_idx .sub-tab.st2 { display: flex; border: 0px solid #ddd; width: 100%; gap: 1em; border-radius: 0; } 
.wrap_idx .sub-tab.st3 { display: flex; border: 1px solid #ddd; border-radius: 3em; overflow: hidden; width: 45%; } 
.wrap_idx .sub-tab.pd_w { padding-bottom: 3em; } 
.wrap_idx .sub-tab > li { position: relative; margin-left: -1px; cursor: pointer; height: 100%; display: flex; height: 3em; align-items: center; justify-content: center; flex: 1; font-size: 1.15em; font-weight: 700; } 
.wrap_idx .sub-tab.st2 > li { position: relative; margin-left: -1px; cursor: pointer; height: 100%; display: flex; height: 2em; align-items: center; justify-content: center; flex: 1; font-size: 1.15em; font-weight: 700; border-radius: .8em; overflow: hidden;} 
.wrap_idx .sub-tab.st3 > li { position: relative; margin-left: -1px; cursor: pointer; height: 100%; display: flex; height: 1.75em; align-items: center; justify-content: center; flex: 1; font-size: 1.15em; font-weight: 700; } 
.wrap_idx .sub-tab > li { flex: 1 25%; border-right: 1px solid #ddd; } 
.wrap_idx .sub-tab.st2 > li { flex: 1 20%; border-right: 0px solid #ddd; background-color: #f1f1f1; border-radius: .8em; } 
.wrap_idx .sub-tab > li:last-child { border-right: unset; } 
.wrap_idx .sub-tab > li > .tab_btn { padding: 0 1vw; box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #444; transition: .3s; } 
.wrap_idx .sub-tab.st3 > li > .tab_btn { padding: 0 1vw; box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #444; transition: .3s; font-size: 14px; } 
.wrap_idx .sub-tab > li.on > .tab_btn,
.wrap_idx .sub-tab > li:hover > .tab_btn { background-color: var(--siteC); color: #fff; border-radius: .8em; } 

.wrap_idx .sub-tab.st2 > li > .tab_btn .RA,
.wrap_idx .sub-tab.st2 > li > .tab_btn .RA {transition: all .3; } 
.wrap_idx .sub-tab.st2 > li.on > .tab_btn .RA,
.wrap_idx .sub-tab.st2 > li:hover > .tab_btn .RA { transform: translateX(15px); opacity: 1; } 


.wrap_idx.st2 .sub-tab { display: flex; border: unset; border-radius: unset; gap: 1em; } 
.wrap_idx.st2 .sub-tab > li { position: relative; margin-left: -1px; cursor: pointer; height: 100%; display: flex; height: 3em; align-items: center; justify-content: center; flex: 1; font-size: 1.15em; font-weight: 700; } 
.wrap_idx.st2 .sub-tab > li { flex: 0 16%; border: 1px solid #ddd; max-width: 16%; } 
.wrap_idx.st2 .sub-tab > li:last-child { border-right: 1px solid #ddd; } 
.wrap_idx.st2 .sub-tab > li > .tab_btn { padding: 0 1vw; box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #444; transition: .3s; } 
.wrap_idx.st2 .sub-tab > li.on > .tab_btn,
.wrap_idx.st2 .sub-tab > li:hover > .tab_btn { background-color: var(--siteC); color: #fff; } 

.agree_box_wrap .agree_box { padding: 0; border: none; } 
.agree_box { border-radius: .5em; border: 1px solid #ddd; padding: 1.5em}
.agree_box.tt1 { color: #666; font-size: .938em; line-height: 1.4}
.agree_box.h1 { height: 12em; overflow-y: auto; } 
.titW .tit1 { font-size: 2.25em; font-weight: 700; position: relative; } 
.titW .tit2 { font-size: 2.35em; font-weight: 700; position: relative; } 
/* 
.titW .tit1::before { content: ""; width: 10px; height: 25px; border-radius: 8em; position: absolute; transform: rotate(-45deg); left: 9px; top: 6px; background-color: rgba(0, 0, 0, 0.3); } 

.titW .tit1::after { content: ""; width: 10px; height: 25px; border-radius: 8em; position: absolute; transform: rotate(-135deg); left: 9px; bottom: 5px; background-color: rgba(0, 0, 0, 0.5); } */

.point_tt { font-size: .9em; width: 100%; } 




/* 오시는길 */

.root_daum_roughmap .wrap_controllers { display: none; } 
.map-Con .list { } 
.map-Con .list { gap: 1em 1em; margin: 2.5em 0; } 
.map-Con .list > li { flex: 1; text-align: center; } 
.map-Con .list > li .in { flex: 1; } 
.map-Con .list > li + li .in { padding-left: 1em; border-left: 1px solid #ddd; } 

.page_txt .mark { margin-bottom: 3em; } 
.page_txt .mark img { width: 5em; } 

.page_txt > .ico + * { margin-top: 1em; } 
.page_txt > .ico img { width: 2.25em; } 

.map-Con .map { border-radius: 1.5em; overflow: hidden; box-shadow: 3px 0 9px rgba(0, 0, 0, .15); } 

.map_info3 .info_list { } 
.map_info3 .info_list > li { padding: 2em 2em; border-bottom: 1px solid #ddd; } 
.map_info3 .info_list > li .wrap_tit { width: 15em; } 
.map_info3 .info_list > li .wrap_con { flex: 1; padding-left: 1.5em; } 
.map_info3 .info_list > li .wrap_tit .tit { padding: .5em 0; color: #222; } 
.map_info3 .info_list > li .wrap_tit .tit .tt { font-weight: 500; } 
.map_info3 .info_list > li .wrap_tit .tit .t1 { font-size: 1.375em; } 
.map_info3 .info_list > li .wrap_tit .tit .t2 { } 
.map_info3 .info_list > li .wrap_tit .tit .xi { font-size: 1.500em; padding-right: .25em; } 
.map_info3 .info_list > li .wrap_con .txt { padding: .5em 0; } 
.map_info3 .info_list > li .wrap_con .txt .tt { color: #333; line-height: 1.6}
.map_info3 .info_list > li .wrap_con .txt .t2 { font-size: 1.125em; } 
.map_info3 .info_list > li .wrap_con .txt .round { margin-right: .75em; padding: .5em 1.5em; background: #8bc53f; font-size: .875em; color: #fff; font-weight: 700; border-radius: 6em; } 
.map_info3 .info_list > li .wrap_con .txt .round.back_red { background: #fb2217; } 
.map_info3 .info_list > li .wrap_con .txt .round.back_seo { background: #00b140; } 
.map_info3 .info_list > li .wrap_con .txt .c_seo { color: #00b140; } 
.map_info3 .info_list > li .wrap_con .txt .round.back_four { background: #2c9ede; } 
.map_info3 .info_list > li .wrap_con .txt .c_four { color: #2c9ede; } 

.root_daum_roughmap .cont { display: none; } 

.staff-inner .staff-list { gap: 2em 1em; } 
.staff-inner .staff-list > li { flex: 1 1 calc(25% - 1em); border: 1px solid #ddd; border-top: 3px solid #19398a; border-radius: 10px; overflow: hidden; box-shadow: 2px 0 6px rgba(0, 0, 0, .1); max-width: calc(25% - .35em); } 
.staff-list > li .img-box { position: relative; cursor: pointer; padding: 1em 0; } 
.staff-list.manage > li .img-box { pointer-events: none; } 
.staff-list > li .img-box .effect { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .25); transition: .2s; opacity: 0; transform: scale(.85); border-radius: 10px; } 
.staff-list > li .img-box .effect .xi { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 2.5em; color: #fff; } 
.staff-list > li .img-box:hover .effect { opacity: 1; transform: scale(1); } 
.staff-list > li .img-box .img-con { width: 80%; margin: auto; } 
.staff-list > li .img-box .img-con img { width: 100%; height: 230px; object-fit: cover; } 
.staff-list > li .name-box { padding: 1.5em; margin: 0 2em; border-top: 1px dashed #bbb; } 
.staff-list > li .name-con { text-align: center; } 
.staff-list > li .name-con > h4 { font-size: 1.25em; font-weight: 700; color: #333; display: inline-block; position: relative; } 
.staff-list > li .name-con > h4:before { /*content: ''; position: absolute; width: 8px; height: 8px; left: -8px; top: -2px; background: #19398a; */}
.staff-list > li .name-con > h4 > span { font-size: 1.125rem; margin-bottom: 1em; color: #555; } 
.staff-list > li .name-con > span { font-size: 1.125em; font-weight: 500; color: #026725; opacity: .7; display: block; } 

/**/
.pro_list { margin-right: -1.5em; } 
.pro_list > li { width: 50%; } 
.pro_list > li.w100 { margin: 0 auto; } 
.pro_list > li .in_wrap { border: 1px solid #bbb; margin-right: 1.5em; margin-bottom: 1.5em; box-sizing: border-box; padding: 1em 1.2em; position: relative; transition: .3s; cursor: pointer; } 
.pro_list > li .in_wrap .img_z { width: 195px; } 
.pro_list > li .in_wrap .img_z .p_img { } 
.pro_list > li .in_wrap .img_z .p_img .id_photo { width: 195px; height: 230px; border: 1px solid #e5e5e5; } 
.pro_list > li .in_wrap .img_z .p_img .id_photo > img { object-fit: cover; width: 100%; height: 100%; } 
.pro_list > li .in_wrap .txt_z { width: calc(100% - 195px); box-sizing: border-box; padding: 1em 0 1em 2.5em; } 
.pro_list > li .in_wrap .txt_z .t1 { font-size: .938em; color: #555; /* margin-bottom: .5em; */
 vertical-align: bottom; } 
.pro_list > li .in_wrap .txt_z .center-name { margin-bottom: .5em; } 
.pro_list > li .in_wrap .txt_z .center-name .t1 { color: #19398a; font-size: 18px; opacity: .8; font-weight: 600; } 
.pro_list > li .in_wrap .txt_z .name { font-size: 1.6em; font-weight: 600; border-bottom: 3px solid #06419a; padding-bottom: 3px; display: inline-block; } 
.pro_list > li .in_wrap .txt_z .name-fx { gap: 1em; } 
.pro_list > li .in_wrap .txt_z .t2 { position: relative; display: flex; align-items: baseline; font-weight: 500; margin-top: 15px; gap: .2em; font-size: 1.068em; } 
.pro_list > li .in_wrap .txt_z .t2 > span { font-weight: 600; } 
.pro_list > li .in_wrap .txt_z .t2 > .hu_info_t { display: contents; text-overflow: ellipsis; overflow: hidden; } 
.pro_list > li .in_wrap .txt_z .t2 > .hu_info { flex: 1 1 auto; font-weight: 500; } 
.pro_list > li .in_wrap .txt_z .s_list { /*margin-top:8px; min-height:28em; */}
.pro_list > li .in_wrap .txt_z .s_list > li { font-size: .938em; margin-bottom: 3px; position: relative; padding-left: .7em; color: #333; width: 85%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } 
.pro_list > li .in_wrap .txt_z .s_list > li:before { content: ''; width: 3px; height: 3px; background: #19398a; border-radius: 50%; position: absolute; top: 10px; left: 0; } 
.pro_list > li .in_wrap .txt_z .s_list > li:last-child { margin-bottom: 0; } 
.pro_list > li .in_wrap .pro_btn { width: 2em; height: 2em; line-height: 2em; font-size: 1.25em; background: #aaa; position: absolute; bottom: 0; right: 0; text-align: center; color: #fff; transition: .3s; display: none; } 
.pro_list > li .in_wrap:hover { border-color: #19398a}
.pro_list > li .in_wrap:hover .pro_btn { background: #19398a}

.inquiry_wrap { } 
.inquiry_wrap .inquiry_boX { width: 500px; max-width: 100%; margin: 0 auto; } 
.inquiry_wrap .inquiry_boX.check { width: 600px; max-width: 100%; margin: 0 auto; } 
.inquiry_wrap .inquiry_tit { padding: 0 0 2em 0; text-align: center; } 
.inquiry_wrap .inquiry_tit .tit { font-size: 2.25em; color: #333; font-weight: 600; letter-spacing: -1px; } 
.inquiry_wrap .inquiry_form { padding: 2.5em 2em; border: 1px solid #ddd; border-top: 2px solid #111; box-shadow: 1px 5px 10px rgba(0, 0, 0, 0.2)}
.inquiry_wrap .form > li:first-child { margin-top: 0; } 
.inquiry_wrap .form .inp_wrap { position: relative; margin-top: .4em; } 
/* .inquiry_wrap .form .inp_wrap .xi { position:absolute; top:0; left:0; width:2em; line-height:55px; text-align:center; font-size:1.750em; color:#3c3c3d; } */
.inquiry_wrap .form .inp_wrap .tt { position: absolute; top: 0; left: 0; width: 6em; line-height: 55px; text-align: center; border-right: 1px solid #ddd; color: #3c3c3d; } 
.inquiry_wrap .form .inp_wrap .inp { box-sizing: border-box; width: 100%; height: 55px; padding: 0 1em 0 4em; background: #fff; border: 1px solid #ddd; border-radius: 5px; /* font-family:'gs'; */}
.inquiry_wrap .form .btn_wrap { margin-top: .6em; } 
.inquiry_wrap .form .btn_wrap .btn { width: 100%; border: 1px solid transparent; padding: 1em; border-radius: .5em; font-weight: 700; font-size: 1.175em; position: relative; overflow: hidden; background: #fff; color: #555; transition: .3s; /* font-family:'gs'; */}
.inquiry_wrap .form .btn_wrap .btn.c1 { background: #333; color: #fff; } 
.inquiry_wrap .form .btn_wrap .btn.o1 { background: #3FADDF; color: #fff; } 

/* */
.page_certificate { } 
.page_certificate .list { gap: 4.5em 2em; } 
.page_certificate .list > li { position: relative; flex: 0 0 calc(25% - 2em); cursor: pointer; } 
.page_certificate .list > li .img-area { position: relative; padding: 2.5em; background: var(--crGray2); border: 3px solid transparent; transition: 0.3s; box-sizing: border-box; } 
.page_certificate .list > li .xi { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 2.5em; height: 2.5em; border: 3px solid var(--siteC); border-radius: 50%; color: #fff; background: var(--siteC); opacity: 0; visibility: hidden; transition: 0.3s; display: flex; align-items: center; justify-content: center; } 
.page_certificate .list > li:hover .xi { opacity: 1; visibility: visible; } 
.page_certificate .list > li:hover .img-area { border-color: var(--siteC); } 
.page_certificate .list > li .img-area .imgfix { box-shadow: 0 0 30px rgba(0, 0, 0, .075); width: 230px; height: 310px; } 
.page_certificate .list > li .img-area .imgfix .layerImg { object-fit: cover; height: 100%; } 
.page_certificate .list > li .txt { margin-top: 1.5em; text-align: center; } 
.page_certificate .list > li .txt > p { font-size: 1.125rem; } 
.page_certificate .list > li .txt > span { display: inline-block; font-size: 1rem; color: var(--crGray3); margin-top: 10px; } 

.page_certificate.st2 .list { gap: 2em 2em; } 
.page_certificate.st2 .list > li .img-area { position: relative; padding: 1.5em; background: var(--crGray2); border: 3px solid transparent; transition: 0.3s; box-sizing: border-box; } 
.page_certificate.st2 .list > li .img-area .imgfix { box-shadow: 0 0 30px rgba(0, 0, 0, .075); width: 272px; height: 100px; background: #fff; text-align: center; } 
.page_certificate.st2 .list > li .img-area .imgfix img { width: 14em; max-height: 45px; height: 45px; object-fit: contain; padding-top: 1.5em; } 

html.pop .popWrap.img { width: 25vw; opacity: 0; transform: scale(0.5); transition: 0.5s; } 
html.pop .popWrap.img.st2 { width: 40vw; opacity: 0; transform: scale(0.5); transition: 0.5s; } 
html.pop .popWrap.img.ani { opacity: 1; transform: scale(1); } 
html.pop .popWrap.img .popTit { background: transparent; padding: 0; justify-content: flex-end; } 
html.pop .popWrap.img .popTit .popClose .xi { color: #fff; text-align: right; } 
html.pop .popWrap.img .popTit .popClose.st2 .xi { color: #000; text-align: right; } 
html.pop .popWrap.img .tit .t1 { display: inline-block; font-size: 1.125rem; color: #fff; font-weight: 500; margin-top: 1rem; } 

.page_prime { } 
.page_prime .list { gap: 4.5em 2em; } 
.page_prime .list > li { position: relative; flex: 0 0 calc(25% - 2em); } 
.page_prime .list > li .tt { line-height: 1.6; } 
.page_prime .list > li .tt span { vertical-align: baseline; } 

.btn_list { width: 100%; height: 3.5em; gap: 1em; border-bottom: 2px solid #ddd; padding-bottom: .5em; } 
.btn_list > li { position: relative; margin-left: -1px; cursor: pointer; height: 100%; display: flex; height: 3.5em; align-items: center; justify-content: center; font-size: 1em; font-weight: 700; flex: 1 14%; border-radius: .8em; overflow: hidden; color: #555}
.btn_list > li::before { content: ""; position: absolute; top: 50%; right: 0; width: 1px; height: 1em; transform: translateY(-50%); background-color: #444; } 
.btn_list > li:last-of-type::before { content: ""; position: absolute; top: 50%; right: 0; width: 1px; height: 0; transform: translateY(-50%); background-color: #444; } 
.btn_list > li:hover { color: #000; position: relative; z-index: 1; } 
.memo_box { height: 23em; } 
.memo_box.st2 { height: 23em; } 
.memo_box .txtC { width: 48%; padding: 2em; box-sizing: border-box; } 
.memo_box .txtC .txt { margin-left: 10px; } 
.memo_box .imgC { width: 48%; height: 100%; } 
.memo_box .imgC .img { height: 100%; width: 100%; object-fit: cover; } 

.popWrap.st2 { position: fixed; top: 50%; left: 2%; transform: translate(-50%, -50%) scale(0.9); opacity: 0; transition: all 0.4s ease; z-index: 1000; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25); width: 80%; max-width: 600px; } 

.popWrap.st2.ani { transform: translate(-50%, -50%) scale(1); opacity: 1; } 

.popWrap.st2 .popTit { display: flex; justify-content: flex-end; padding: 8px; background: #f9f9f9; border-bottom: 1px solid #eee; } 

.popWrap.st2 .popClose { color: #333; font-size: 22px; text-decoration: none; } 
.popWrap.st2 .swiper { width: 100%; height: 100%; } 

.popWrap.st2 .imgarea img { width: 100%; display: block; border-radius: 10px; } 

.popWrap.st2 .swiper-button-next,
.popWrap.st2 .swiper-button-prev { color: #222; } 

.popWrap.st2 .swiper-pagination-bullet-active { background: #222; } 

.popWrap.st2 .tit { display: block; text-align: center; font-size: 18px; font-weight: 600; padding: 10px; } 

.staff_wrap { width: 100%; } 
.staff_wrap > .staff_list { width: 100%; gap: 1.25em; justify-content:center;} 
.staff_wrap > .staff_list > li:first-child {margin:0 2em;}
.staff_wrap > .staff_list > li { width: calc((100% - 4em) / 2); } 
.staff_wrap > .staff_list > li .imgC  { width: 100%; height:auto; overflow: hidden;} 
.staff_wrap > .staff_list > li .imgC .img { object-fit: cover; transition: all .3s; filter: grayscale(1); cursor: pointer; 
    width: 100%;} 
.staff_wrap > .staff_list > li:hover .imgC .img { filter: grayscale(0); } 
.staff_wrap > .staff_list > li .titC .tit_list { gap: 1em}
.staff_wrap > .staff_list > li .titC .tit_list > li { position: relative; } 
.staff_wrap > .staff_list > li .titC .tit_list > li > .desc { font-size: 1.15em; } 
.staff_wrap > .staff_list > li .titC .tit_list > li > .name { font-size: 1.25em; font-weight: 800; } 
/* .staff_wrap > .staff_list > li .titC .tit_list > li::before { content: ""; position: absolute; width: 2px; height: 12px; background-color: #444; left: -18%; top: 50%; transform: translateY(-50%); }  */
.staff_wrap > .staff_list > li .titC .tit_list > li::after {content:""; position:absolute; width:2px; height:14px; background-color:#444; top:50%; right:-0.5rem;transform: translateY(-50%);}
.staff_wrap > .staff_list > li .titC .tit_list > li:last-child::after {width:0px;}
/* .staff_wrap > .staff_list > li .titC .tit_list > li:first-of-type::before { content: ""; position: absolute; width: 0px; height: 10px; background-color: #666; }  */

.process_con { border-bottom: 1px solid #bbb; padding: 1em 0; box-sizing: border-box; } 
.process_con .ttC { margin: 2.5em 0}
.process_con .ttC .t1 { position: relative; display: inline; } 
.process_con .ttC .t1::before { content: ""; position: absolute; width: 50%; height: .1em; background-color: #000; top: 0%; left: 0; } 
.process_con .ttC .t1::after { content: ""; position: absolute; width: 50%; height: .1em; background-color: #ddd; top: 0%; right: 0; } 
.process_con .ttW { } 
.process_con .ttW .tt1 { color: #444; } 
.process_con .imgC { width: 50%; } 
.process_con .imgC.st2 { width: 90%; } 
.point_r { position: relative; margin-right: 10px; color: #fff; font-weight: 800; text-shadow: 3px 3px 5px #333; } 
.point_r::before { content: ""; position: absolute; width: 1.2em; height: 1.2em; background-color: #222; border-radius: 50%; top: 0; left: -12px; z-index: -1; } 
.sub_ttC { padding: 0; } 

.table_form.st2 { background: #fafafa; padding: 1em; border-radius: .8em; } 

.table_form.st2 > li:first-child { border-top: unset; } 

.barlistW { } 

.barlistW .barlist { width: 100%; gap: 2em; } 

.barlistW .barlist li .bar { width: 10em; height: .5em; background-color: #f5f5f5; } 

.barlistW .barlist li .bar.on { width: 10em; height: .5em; background-color: #575757; } 

.Ntdot { position: relative; padding: auto; z-index: 2; color: #fff; text-shadow: 3px 3px 5px #111; padding-left: 10px; } 

.Ntdot::before { content: ""; position: absolute; width: 1em; height: 1em; border-radius: 50%; background: rgba(0, 0, 0, .85); top: 0; left: -5px; z-index: -1; } 
.txtBwrap{padding: 2em; background-image: url(../images/sub/inquiry/list2_bg.jpg);   border-radius: .5em; box-shadow:3px 3px 5px #ddd;}
.txtBwrap2{padding: 2em; background-color: #f9f9f9; border-radius: .5em;}
.txtBwrap2 .subTb{padding: 1em; background-color: #fff;}
.rdot {position: relative;}
.rdot::before {content: "";position: absolute;top: 2px;left: -10px;width: 1em;height: 1em;border-radius: 50%;background-color: rgba(0, 0, 0, 0.25);}
.dot1 {position: relative;padding-left: 5px;}

.dot1::before {content: "\e92b";display: inline-block;transform: translateY(2px);margin-right: .3em;font-family: xeicon;color: var(--siteC);}


.con_idx { position:relative } 
.con_idx > .idx { position:absolute; left:0; top:0; width:100%; visibility:hidden; filter:alpha(opacity=0); opacity:0; display: none; } 
.con_idx > .idx.on { position:relative; visibility: visible; filter:alpha(opacity=100); opacity:1; display: block; } 
.se_quotation.default,.se_subComponent_quotation.default {
    font-family: "나눔명조",nanummyeongjo,se_NanumMyeongjo,serif,simsun
}

.se_m .se_quotation.default,.se_m .se_subComponent_quotation.default {
    font-family: "Helvetica Neue",helvetica,AppleSDGothicNeo,sans-serif
}

.se_inapp .se_quotation.default,.se_inapp .se_subComponent_quotation.default {
    font-family: se_NanumMyeongjo_inapp,AppleSDGothicNeo,serif
}

.se_quotation.default .se_viewArea,.se_subComponent_quotation.default .se_viewArea {
    font-style: italic;
    text-align: center
}

.se_quotation.default .se_editView,.se_subComponent_quotation.default .se_editView {
    padding: 31px 0
}

.se_quotation.default .se_editView:before, .se_subComponent_quotation.default .se_editView:before {
    content: '"';
    position: absolute;
    top: 0;
    display: inline-block;
    background-image: url(../images/inc/L_Comm.png);
    width: 21px;
    height: 16px;

}
.se_quotation.default .se_editView:after, .se_subComponent_quotation.default .se_editView:after {
        content: '"';
    position: absolute;
    bottom: 0;
    display: inline-block;
    width: 21px;
    height: 16px;
}

.tit_wrap {
    position: relative;
}

/* 기본: 숨김 */
.tit_wrap:hover::after {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(40% + 10px);
    transform: translateY(-50%);
    width: 150px;       /* 프리뷰 이미지 크기 */
    height: 150px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
    z-index: 50;

    /* data-img 값을 background로 사용 */
    background-image: var(--preview);
}

/* data-img 없으면 안 뜨도록 */
.tit_wrap:not([data-img])::after {
    display: none;
}