@charset "utf-8"; /* CSS Document */

/**/
.hideT { position: absolute; z-index: -1; display: inline-block; overflow: hidden; height: 1px; width: 1px; border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); word-break: initial; word-wrap: initial; } 
.hideT.close { display:none } 
.hide { display: block; height: 0; width: 0; font-size: 0; line-height: 0; margin: 0; padding: 0; overflow: hidden; } 
.cp { cursor:pointer; } 
.cutstr { text-overflow : ellipsis; overflow : hidden; white-space : nowrap; display:block; width:100% } 

.clearfix:after { clear: both; display: block; content: ""; } 

.row { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; } 
.row.r1 { -webkit-line-clamp: 1 } 
.row.r2 { -webkit-line-clamp: 2 } 
.row.r3 { -webkit-line-clamp: 3 } 
.row.r4 { -webkit-line-clamp: 4 } 
.row.r2.fix { line-height:1.25em; height:2.5em } 
.row.r3.fix { line-height:1.25em; height:3.75em } 
.row.r4.fix { line-height:1.25em; height:5em } 

.swiperBtn { width:2.5em; height:2.5em; position: static; display:flex; align-items:center; justify-content:center; z-index:100; cursor:pointer; font-size:1.125em; opacity:1; transition:.3s } 
.swiperBtn:before { font-family:xeicon } 
.swiperBtn.prev:before { content:"\e93d" } 
.swiperBtn.next:before { content:"\e940" } 
.swiperBtn.pause:before { content:"\ea3b" } 
.swiperBtn.play:before { content:"\ea3e" } 
.swiperBtn.ab { position:absolute; top:50%; } 
.swiperBtn.ab.prev { left:0; transform:translate(-50%, -50%) } 
.swiperBtn.ab.next { right:0; transform:translate(50%, -50%) } 
.swiperBtn.ab.in.prev { transform:translate(.5em, -50%) } 
.swiperBtn.ab.in.next { transform:translate(-.5em, -50%) } 
.swiperBtn.line { border:1px solid #ddd } 
.swiperBtn.round { border-radius:50%; } 
.swiperBtn.s1 { font-size:2em } 
.swiperBtn.s2 { font-size: 1em; } 
.swiperBtn.ico1.prev:before { content:"\e908" } 
.swiperBtn.ico1.next:before { content:"\e90b" } 
.swiperBtn:hover { background:#111; color:#fff } 
.swiperBtn.white { color:#fff; border-color:rgba(255,255,255,.5) } 
.swiperBtn.c1 { background:#ddd; color:#666; } 
.swiperBtn.line.white:hover,
.swiperBtn.line.white.play { background:#1f5aa7; border-color:rgba(255,255,255,.2) } 

.swiperControl { display:flex; align-items:center; gap:.5em; z-index:10 } 
.swiperControl.hc { justify-content:center; } 
.swiperControl .paging { position:relative; width:auto; bottom:0; display:flex; align-items:center; gap:.5em } 
.swiperControl .paging.grow { flex:1 1 0%; min-width:0 } 
.swiperControl .paging:first-child { margin-right:1em } 
.swiperControl .paging.swiper-pagination-progressbar { height:2px; } 
.swiperControl .paging.swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background:#111 } 
.swiperControl .paging.swiper-pagination-fraction { line-height:1; color:#111; } 
.swiperControl .paging.swiper-pagination-fraction > span { width:2em; } 
.swiperControl .paging.swiper-pagination-fraction > span.swiper-pagination-total { color:inherit; opacity:.7; position:relative; text-align:left } 
.swiperControl .paging.swiper-pagination-fraction > span.swiper-pagination-current { color:var(--siteC); opacity:1; font-size:1.125em; font-weight:700; text-align:right } 
.swiperControl .paging.swiper-pagination-fraction.white,
.swiperControl .paging.swiper-pagination-fraction.white > span.swiper-pagination-current { color:#fff } 
.swiperControl .paging .swiper-pagination-bullet { position:relative; border:1px solid #111; background:none; opacity:1; border-radius:0; width:.5em; height:.5em; margin:0; transition:.5s } 
.swiperControl .paging .swiper-pagination-bullet.swiper-pagination-bullet-active { background:#111; transform:rotate(45deg) } 
.swiperControl .paging.white .swiper-pagination-bullet { border-color:#fff } 
.swiperControl .paging.white .swiper-pagination-bullet.swiper-pagination-bullet-active { background:#fff } 

.swiperPauseWrap .play { display: none } 
.swiperPauseWrap.pause .play { display: flex; background:#111; color:#fff } 
.swiperPauseWrap.pause .pause { display: none } 
.swiperPaging span.swiper-pagination-progressbar-fill { background:#111 } 
.slider_wrap { position:relative } 

.fadeAni { animation-name: fadeAni; animation-duration: 2s; animation-iteration-count: infinite } 
@keyframes fadeAni { 30% { opacity:0 } 
50% { opacity:1 } 
 }
.fadeAni:hover { animation-name: none } 

.rotateAni { animation-name: rotateAni; animation-duration: 20s; transform-origin:center; animation-timing-function:linear; animation-iteration-count: infinite } 
@keyframes rotateAni { 100% { transform:rotate(360deg) } 
 }

.moveDownAni { animation-name: moveDownAni; animation-duration: 3s; transform-origin:center; animation-iteration-count: infinite } 
@keyframes moveDownAni { 50% { transform:translateY(1em) } 
 }
.moveDownAni:hover { animation-name: none } 

.downAni { animation-name: downAni; animation-duration: 3s; animation-iteration-count: infinite } 
@keyframes downAni { 70% { transform:translateY(0) } 
85% { transform:translateY(.5em) } 
100% { transform:translateY(0) } 
 }

.textAniW { display:flex; line-height:1 } 
.textAni { animation: textAni 10s linear infinite; white-space:nowrap } 
.textAni:before { content:"·"; padding:0 .25em } 
@keyframes textAni { 
 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 
100% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } 
 }

.scaleAni { animation-name: scaleAni; animation-duration: 4s; animation-iteration-count: infinite; animation-direction:alternate } 
@keyframes scaleAni { 100% { transform:scale(1.2) } 
 }

.yAni { animation-name: yAni; animation-duration: 5s; animation-iteration-count: infinite; animation-timing-function:linear; animation-direction:alternate } 
@keyframes yAni { 
 0% { transform:translateY(0) } 
25% { transform:translateY(-2em) } 
75% { transform:translateY(2em) } 
100% { transform:translateY(0) } 
 }
.yAni.d1 { animation-delay:.5s } 
.yAni.d2 { animation-delay:1s } 
.yAni.d3 { animation-delay:1.5s } 
.yAni.d4 { animation-delay:2s } 
.yAni.d5 { animation-delay:2.5s } 

.circleAni { animation-name: circleAni; animation-duration: 2s; animation-iteration-count: infinite; opacity:0 } 
@keyframes circleAni { 50% { opacity:1 } 
100% { padding:.75em; opacity:0 } 
 }
.circleAni.d1 { animation-delay:.5s } 
.circleAni.d2 { animation-delay:1s } 
.circleAni.d3 { animation-delay:1.5s } 

.scrollAni { opacity:0 } 
.scrollAni.on { opacity:1; transition:1s; transition-timing-function:ease-out; } 
.scrollAni.on.ts2 { transition:2s } 
.scrollAni.fade { opacity:0 } 
.scrollAni.fade.on { opacity:1 } 
.scrollAni.moveL { transform:translateX(-10rem); } 
.scrollAni.moveL.on { transform:translateX(0); } 
.scrollAni.moveR { transform:translateX(10rem) } 
.scrollAni.moveR.on { transform:translateX(0) } 
.scrollAni.moveT { transform:translateY(10rem) } 
.scrollAni.moveT.on { transform:translateY(0) } 
.scrollAni.moveB { transform:translateY(-10rem) } 
.scrollAni.moveB.on { transform:translateY(0) } 
.scrollAni.width { width:0 } 
.scrollAni.width.on { width:100% } 
.scrollAni.scale.on { transform:scale(1) } 
.scrollAni.scale { transform:scale(0) } 
.scrollAni.scale.on { transform:scale(1) } 
.scrollAni.scaleX { transform:scaleX(0); transform-origin:left top } 
.scrollAni.scaleX.on { transform:scaleX(1) } 
.scrollAni.scaleX.right { transform-origin:right top } 
.scrollAni.scaleY { transform:scaleY(0); transform-origin:left top } 
.scrollAni.scaleY.on { transform:scaleY(1) } 
.scrollAni.zoomOut { transform:scale(1.3) } 
.scrollAni.zoomOut.on { transform:scale(1) } 
.scrollAni.zoomIn { transform:scale(.7); border-radius:1em } 
.scrollAni.zoomIn.on { transform:scale(1); border-radius:0 } 
.scrollAni.radius { border-radius:3em; transition:3s; } 
.scrollAni.radius.on { border-radius:0 } 
.scrollAni.delay.on:nth-child(2) { transition-delay:.3s } 
.scrollAni.delay.on:nth-child(3) { transition-delay:.6s } 
.scrollAni.delay.on:nth-child(4) { transition-delay:.9s } 
.scrollAni.delay.on:nth-child(5) { transition-delay:1.2s } 
.scrollAni.delay.on:nth-child(6) { transition-delay:1.5s } 
.scrollAni.delay.on:nth-child(7) { transition-delay:1.8s } 
.scrollAni.delay.on:nth-child(8) { transition-delay:2.1s } 
.scrollAni.delay.on:nth-child(9) { transition-delay:2.4s } 
.scrollAni.delay.on:nth-child(10) { transition-delay:2.7s } 

.gsSplit { opacity:0 } 
.gsSplit.on { opacity:1 } 
.gsSplit > i { min-width:.25em; transform:translateY(0); opacity:0 } 
.gsSplit.on > i { animation-name: splitAni; animation-duration: .5s; animation-fill-mode: forwards; } 
@keyframes splitAni { 30% { transform:translateY(-.5em); opacity:0 } 
100% { transform:translateY(0); opacity:1 } 
 }
.gsSplit.on.d1 > i { animation-duration: 1s } 

.gsSvg > path { transform:translateY(0); opacity:0 } 
.gsSvg.on > path { animation-name: splitSvgAni; animation-duration: 1.5s; animation-fill-mode: forwards; } 
@keyframes splitSvgAni { 30% { transform:translateY(-200%); opacity:0 } 
100% { transform:translateY(0); opacity:1 } 
 }
.gsSvg.on > path:nth-child(2) { animation-delay:.1s } 
.gsSvg.on > path:nth-child(3) { animation-delay:.2s } 
.gsSvg.on > path:nth-child(4) { animation-delay:.3s } 
.gsSvg.on > path:nth-child(5) { animation-delay:.4s } 
.gsSvg.on > path:nth-child(6) { animation-delay:.5s } 
.gsSvg.on > path:nth-child(7) { animation-delay:.6s } 
.gsSvg.on > path:nth-child(8) { animation-delay:.7s } 

.gsClass.opacity { opacity:0; transition:1.5s } 
.gsClass.opacity.on { opacity:1 } 

.gsClass.move { opacity:0; transition: 1.5s } 
.gsClass.move.mT { transform:translateY(5vmin) } 
.gsClass.move.mB { transform:translateY(-5vmin) } 
.gsClass.move.mL { transform:translateX(10vmin) } 
.gsClass.move.mR { transform:translateX(-10vmin) } 
.gsClass.move.on { opacity:1; transform:translate(0) } 

.gsClass.tShow .el { overflow:hidden } 
.gsClass.tShow .el > i { transform:translateY(10vh); transition:1s } 
.gsClass.tShow.on .el > i { transform:translateY(0) } 
.gsClass.tShow.on .el:nth-child(2) > i { transition-delay:.3s } 
.gsClass.tShow.on .el:nth-child(3) > i { transition-delay:.6s } 

.gsClass.tEffect { background-image: linear-gradient(90deg, #000, #000 50%, rgba(0,0,0,0.2) 0); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: 200% 100%; background-position: 100% } 
.gsClass.tEffect.on { background-position: 0; transition:2s; transition-timing-function: cubic-bezier(0.5, 0, 1, 1) } 
.gsClass.tEffect.c1 { background-image: linear-gradient(90deg, var(--siteC), var(--siteC) 50%, rgba(0,0,0,0.2) 0) } 

.gsClass.imgShow { overflow:hidden } 
.gsClass.imgShow .el { transition:1s; } 
.gsClass.imgShow.left .el { transform:translateX(-100%) } 
.gsClass.imgShow.right .el { transform:translateX(100%) } 
.gsClass.imgShow.top .el { transform:translateY(-100%) } 
.gsClass.imgShow.bottom .el { transform:translateY(100%) } 
.gsClass.imgShow.on .el { transform:translate(0) } 

.gsClass.listShow .el { transform:translateY(20vmin); opacity:0; transition:1s } 
.gsClass.listShow.on .el { transform:translateY(0); opacity:1 } 
.gsClass.listShow.on .el:nth-child(1) { transition-delay:.2s } 
.gsClass.listShow.on .el:nth-child(2) { transition-delay:.4s } 
.gsClass.listShow.on .el:nth-child(3) { transition-delay:.6s } 
.gsClass.listShow.on .el:nth-child(4) { transition-delay:.8s } 
.gsClass.listShow.on .el:nth-child(5) { transition-delay:1s } 
.gsClass.listShow.on .el:nth-child(6) { transition-delay:1.2s } 
.gsClass.listShow.on .el:nth-child(7) { transition-delay:1.4s } 
.gsClass.listShow.on .el:nth-child(8) { transition-delay:1.6s } 
.gsClass.listShow.on .el:nth-child(9) { transition-delay:1.8s } 
.gsClass.listShow.on .el:nth-child(10) { transition-delay:2s } 

.gsClass.accordion .el { transition:1.5s } 
.gsClass.accordion .el:nth-child(1) { transform:translate(0,0) } 
.gsClass.accordion .el:nth-child(2) { transform:translate(-100%,0) } 
.gsClass.accordion .el:nth-child(3) { transform:translate(-200%,0) } 
.gsClass.accordion .el:nth-child(4) { transform:translate(-300%,0) } 
.gsClass.accordion.on .el { transform:translate(0,0) } 

.gsClass.on { /* transition-timing-function:ease-in */ } 
.gsClass.on.d1 { transition-delay:.3s } 
.gsClass.on.d2 { transition-delay:.6s } 
.gsClass.on.d3 { transition-delay:.9s } 
.gsClass.on.d4 { transition-delay:1.2s } 
.gsClass.on.d5 { transition-delay:1.5s } 
.gsClass.on.d6 { transition-delay:1.8s } 
.gsClass.on.d7 { transition-delay:2.1s } 
.gsClass.on.d8 { transition-delay:2.4s } 
.gsClass.on.d9 { transition-delay:2.7s } 

.soon { background:#f5f5f5; border:1px solid #f5f5f5; color:#333; height:50vh; padding:1em; border-radius:2em } 
.soon .img { width:10em; padding-bottom:120%; margin-right:2em } 
.soon .xi { font-size:16em; opacity:.1 } 
.soon .tt .t1 { display:block; font-weight:700; font-size:3em } 
.soon .tt .t2 { display:block; font-size:1.25em; opacity:.5 } 

.animationStop * { animation: none !important; transition: none !important; } 

/**/
#headerN { position: fixed; left:0; top:0; width:var(--headerL); z-index:1000; overflow:hidden; box-sizing:border-box; border-right:1px solid #ddd; height:100vh; background:#fff; transition: background .3s } 
#headerN .logo { display:flex; align-items:center; justify-content:center; height:6em } 
#headerN .logo > a { display:block; height:50% } 
#headerN .logo > a img { display:block; height:100% } 
#headerN .wrapF { display:flex; flex-direction:column; height:100%; padding: 2vmin; gap:2vmin; box-sizing:border-box } 
#headerN .gnb_wrap { flex:1; min-height:0 } 
#headerN .gnb_wrap .gnb { flex-direction:column; height:100%; gap:1px } 
#headerN .gnb_wrap .gnb > li.m_hide { display:none } 
#headerN .gnb_wrap .gnb > li.first { margin-top:auto } 
#headerN .gnb_wrap .gnb > li a { display:flex; align-items:center; box-sizing:border-box; position:relative } 
#headerN .gnb_wrap .gnb > li a:after { content:"\e93f"; font-family:xeicon } 
#headerN .gnb_wrap .gnb > li a .va { position:relative; flex:1; min-width:0 } 
#headerN .gnb_wrap .gnb > li .dp1 { height:4vmin; padding:1vmin 1.5vmin; padding-right:0; transition:.3s } 
#headerN .gnb_wrap .gnb > li .dp1 .va { font-weight:500; font-size:1em } 
#headerN .gnb_wrap .gnb > li:hover .dp1 { color:var(--siteC2) } 
#headerN .gnb_wrap .gnb > li.on .dp1 { color: var(--siteC2); } 
#headerN .gnb_wrap .gnb > li.st1 .dp1 { height:6vmin; color:#999 } 
#headerN .gnb_wrap .gnb > li.st1 .dp1 .va { font-weight:700; font-size:1.125em } 
#headerN .gnb_wrap .gnb > li.st1 .dp1:before { content:""; position:absolute; left:0; top:0; width:calc(100% + 2vmin); transform:scaleX(0); transform-origin:0 0; height:100%; background:var(--siteGra); transition:.5s } 
#headerN .gnb_wrap .gnb > li.st1 .dp1:after { opacity:0; transform:translateX(100%); transition:.3s } 
#headerN .gnb_wrap .gnb > li.st1:hover .dp1,
#headerN .gnb_wrap .gnb > li.st1.on .dp1 { color:#fff } 
#headerN .gnb_wrap .gnb > li.st1:hover .dp1:before,
#headerN .gnb_wrap .gnb > li.st1.on .dp1:before { transform:scaleX(1) } 
#headerN .gnb_wrap .gnb > li.st1:hover .dp1:after,
#headerN .gnb_wrap .gnb > li.st1.on .dp1:after { opacity:1; transform:translateX(0) } 
#headerN .gnb_wrap .gnb > li .dp2 { display:none } 
#headerN .search_wrap .search { position:relative } 
#headerN .search_wrap .search .inp { background:none; height:3em; border-radius:3em; border:1px solid #ddd; box-sizing:border-box; padding:.5em 1em; padding-right:4em; width:100%; color:var(--siteC); font-weight:700; font-size:.938em } 
#headerN .search_wrap .search .inp::placeholder { font-weight:500; color:#999 } 
#headerN .search_wrap .search .btn { position:absolute; right:0; top:0; width:3em; height:100%; background:none; border:none; color:var(--siteC) } 
#headerN .mem_wrap { display:flex; justify-content:center; padding:1vmin 0 } 
#headerN .mem_wrap > li > a { position:relative; padding:0 1em; opacity:.5 } 
#headerN .mem_wrap > li:not(:last-child) > a:before { content:""; position:absolute; right:0; top:50%; width:1px; height:50%; transform:translateY(-50%); background:#999 } 
#headerN .mem_wrap > li > a .tt { font-size:.875em; font-weight:500 } 
#headerN .mem_wrap > li > a:hover .tt { text-decoration:underline } 
#headerN .sns_wrap { display:flex; justify-content:flex-end; opacity:.7 } 

html.main:not(.scroll) #headerN:not(:hover) { background:none; color:#fff; border-right-color:rgba(255,255,255,.2); backdrop-filter:blur(.5em) } 
html.main:not(.scroll) #headerN:not(:hover) .logo,
html.main:not(.scroll) #headerN:not(:hover) .search_wrap { filter:brightness(0) invert(1) } 
html.main:not(.scroll) #headerN:not(:hover) .gnb_wrap .gnb > li.st1 .dp1 { color:#fff } 

#headerN .shop_wrapper { display: flex; justify-content: center; gap: 1em; flex-wrap: wrap;} 
#headerN .shop_wrapper > li { } 
#headerN .shop_wrapper > li > .con { display: flex; align-items: center; transition: .3s; } 
#headerN .shop_wrapper > li > .con > .tt { font-size: .85em; margin-left: .5em; font-weight: 600; opacity: .5; position:relative; } 
#headerN .shop_wrapper > li > .con > .img { } 
#headerN .shop_wrapper > li > .con > .img > img { width: 1em; filter: opacity(.8); } 
#headerN:not(:hover) .shop_wrapper > li > .con > .img > img { filter: brightness(0) invert(1); } 
.scroll #headerN .shop_wrapper > li > .con > .img > img { filter: brightness(0) invert(0) opacity(.8); } 
.sub #headerN .shop_wrapper > li > .con > .img > img { filter: opacity(.8) brightness(0); } 

#headerN .shop_wrapper > li > .con:hover > .tt { color: var(--siteC2); } 

#footer { background:#151a25; color:#fff; position:relative } 
#footer .cs_wrap .menu_list > li:nth-child(1) .wrap_in { background:rgba(255,255,255,.1) } 
#footer .cs_wrap .menu_list > li:nth-child(2) .wrap_in { background:rgba(255,255,255,.2) } 
#footer .cs_wrap .menu_list > li .wrap_in .txt { color:#aaa } 
#footer .cs_wrap .cs_list .wrap_in .wrap_con .t1 { color:#fff } 
#footer .cs_wrap .no_con {} 
#footer .cs_wrap .no_con:before { display:none } 
#footer .copy_wrap .wrapBox { padding-top:4em; border-top-color:rgba(255,255,255,.2) } 
#footer .copy_wrap .link_wrap .menu > li > a.c_point { color:var(--siteC2) !important } 
#footer .copy_wrap .link_wrap .link > li > a { border-color:rgba(255,255,255,.2) } 
html:not(.main) #footer { margin-top:20vmin } 
html.dp1_pagora #footer { margin-top: 0vmin; } 

.headerL { margin-left:var(--headerL) } 
.headerLW { width:calc(100% - var(--headerL)); box-sizing:border-box } 

#headerM{ position:fixed; left:0; top:0; width:100%; z-index:1000;}




#contentsN .sub_top_wrap { } 
#contentsN .sub_top_wrap .sub_gnb { } 
#contentsN .sub_top_wrap .sub_gnb .gnb { } 
#contentsN .sub_top_wrap .sub_gnb .gnb > li { display: none; } 
#contentsN .sub_top_wrap .sub_gnb .gnb > li.on { display: block; } 

/*contents*/
#contentsN .doc { padding: 4.5em 0 0 0; } 
#contentsN .sub_page_top { position:relative; height:33em; padding-top: var(--headH)} 
#contentsN .sub_page_top .pageTop { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); color: #fff; } 
#contentsN .sub_page_top .pageTop .inner { } 
#contentsN .sub_page_top .pageTop .inner .topCon { text-align: center; margin-bottom: 3.5em; } 
#contentsN .sub_page_top .pageTop .inner .topCon .tit { font-size: 2.815em; font-weight: 400; margin-bottom: .3em; line-height: 1; } 
#contentsN .sub_page_top .pageTop .inner .topCon .tit > i { color: var(--siteC2); } 
#contentsN .sub_page_top .pageTop .inner .topCon .desc { font-size: 1.315em; color: rgba(255,255,255, .75); } 
#contentsN .sub_page_top .pageTop .inner .search_wrap { display: flex; align-items: center; flex-direction: column; gap: .5em; } 
#contentsN .sub_page_bg { position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden; } 
#contentsN .sub_page_bg > .bg { position:absolute; top:0; right:0; width:calc(100% + 3vw); height:100%; transition:3s; } 
#contentsN .sub_page_bg > .bg:before { content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:linear-gradient(180deg,rgba(0,0,0,.3),rgba(0,0,0,.4)); } 
.load #contentsN .sub_page_bg > .bg { right:-1.5vw; } 
#contentsN .sub_page_tit { position:absolute; top: 50%; transform: translateY(-50%); color:#fff; } 
#contentsN .sub_page_tit .slogan { font-size: 1.215em; color: rgba(255,255,255, .8); } 
#contentsN .sub_page_tit .sub_tit { font-size:4.500em; letter-spacing: -0.03em; font-weight:800; text-transform: capitalize; text-transform: uppercase; } 

#contentsN .sub_page_menu { position:relative; } 
#contentsN .sub_page_menu .gnb { display:block; } 
#contentsN .sub_page_menu .gnb .dp1,
#contentsN .sub_page_menu .gnb .dp1 > li { display: none; } 
#contentsN .sub_page_menu .gnb .dp1 > li.on { display: block; } 
#contentsN .sub_page_menu .gnb .dp2 > li .dp3 { display: none; } 
#contentsN .sub_page_menu .gnb .dp3 { /* display: none; */ } 
#contentsN .sub_page_menu .gnb .dp2 { justify-content:center; } 
#contentsN .sub_page_menu .gnb .dp2 > li { width: 15%; position:relative; } 
#contentsN .sub_page_menu .gnb .dp2 > li > a { background: var(--siteC3); border-right: 1px solid #8b857e; gap:.875em; height:6em; padding:0 1em; color:#fff; transition: .3s; } 
#contentsN .sub_page_menu .gnb .dp2 > li > a .va { font-size:1.15em; word-break: keep-all; } 
#contentsN .sub_page_menu .gnb .dp2 > li.act > a .tt,
#contentsN .sub_page_menu .gnb .dp2 > li.on > a .tt { opacity:1; } 
#contentsN .sub_page_menu .gnb .dp2 > li.on > a .tt { font-weight:600; } 
#contentsN .sub_page_menu .gnb .dp2 > li.on > a,
#contentsN .sub_page_menu .gnb .dp2 > li > a:hover { background: #fff; color: #171717; } 

.sub-Tab { position: relative; display: table; width: 100%; table-layout: fixed; border: 1px solid #ddd; margin-bottom: 3.5em; } 
.sub-Tab > li { display: table-cell; vertical-align: middle; position: relative; border-left: 1px solid #ddd; } 
.sub-Tab > li > .con { display: table; cursor: pointer; height: 50px; width: 100%; transition: .3s; } 
.sub-Tab > li > .con > .va { display: table-cell; vertical-align: middle; color: #555; font-size: 16px; letter-spacing: -0.30px; text-align: center; transition: .3s; } 
.sub-Tab > li.on { z-index: 1; } 
.sub-Tab > li.on > .con { background-color: #000; } 
.sub-Tab > li.on > .con .va { color: #fff; } 
.sub-Tab > li:first-of-type { border-left: 0; } 

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

/*서브 제품 검색*/
#sForm .search { position:relative; width: 45em; padding: 1.75em; background: var(--siteC4); box-sizing: border-box; } 
#sForm .search .search_Icon { position: absolute; top: 50%; transform: translateY(-50%); right: 2.5em; background: transparent; border: none; } 
#sForm .search .search_Icon > .xi { font-size: 1.815em; color: #fff; } 
#sForm .inp { border: none; width: 90%; box-sizing: border-box; background: var(--siteC4); color: #fff; } 
#sForm input::placeholder { color: lightgray !important; font-size: 1.1em; font-weight: 500; } 
#sForm input { font-size: 1.1em; } 

/*태그*/
.search_wrap .tag_wrap .tag_list { display: flex; align-items: center; gap: 1em; padding-top: .3em; } 
.search_wrap .tag_wrap .tag_list > li { } 
.search_wrap .tag_wrap .tag_list > li > .tt { font-size: 1.15em; color: rgba(255,255,255, .7); } 





.sns_st { display:flex; gap:.5em } 
.sns_st > li > a { display:flex; align-items:center; justify-content:center; width:2.5em; height:2.5em; border-radius:50%; transition:.3s } 
.sns_st > li > a .xi { font-size:1.5em } 
.sns_st > li > a img { height:1.125em } 
.sns_st > li > a:hover { background:#111; color:#fff } 
.sns_st > li > a:hover img { filter:brightness(0) invert(1) } 
.sns_st > li > a.kc img { height:1.438em } 

/**/
.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_wrap { position: fixed; right:0; top:0; width:100%; height:100vh } 
.visualSlide_wrap .slogan_wrap { position: absolute; right:0; top:0; height:100vh; } 
.visualSlide_wrap .slogan_wrap .wrapF { height:100%; display:flex; align-items:center; justify-content:center; text-align:center; color:#fff; flex-direction:column; gap:4vmin } 
.visualSlide_wrap .slogan_wrap .t1 { font-size:6.5vmin; font-weight:700 } 
.visualSlide_wrap .slogan_wrap .t2 { font-size:2.4vmin; font-weight:500; line-height:1.6 } 
.visualSlide_wrap .slogan_wrap .btnW { margin-top:2vmin } 

.visualSlide_wrap .gsClassSlide.tShow .el { overflow:hidden } 
.visualSlide_wrap .gsClassSlide.tShow .el > i { transform:translateY(10vh); transition:1s } 
.visualSlide_wrap .gsClassSlide.tShow.on .el > i { transform:translateY(0) } 
.visualSlide_wrap .gsClassSlide.tShow.on .el:nth-child(2) > i { transition-delay:.3s } 
.visualSlide_wrap .gsClassSlide.tShow.on .el:nth-child(3) > i { transition-delay:.6s } 
.visualSlide_wrap .gsClassSlide.move { opacity:0; transition:1s } 
.visualSlide_wrap .gsClassSlide.move.mT { transform:translateY(10vmin) } 
.visualSlide_wrap .gsClassSlide.move.on { opacity:1; transform:translate(0); transition-delay:.6s } 

.visualSlide .el.swiper-slide { position: relative; overflow:hidden; height:100vh; background:#fff } 
.visualSlide .el.swiper-slide .bg { position:absolute; left:0; top:0; width:100%; height:100%; transform:scale(1.2) } 
.visualSlide .el.swiper-slide .bg:after { content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:#000; opacity:.2 } 
.visualSlide .el.swiper-slide .link { position:absolute; left:0; top:0; width:100%; height:100% } 
.visualSlide .el.swiper-slide .vod_wrap { position:relative; height:100% } 
.visualSlide .el.swiper-slide .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_control { position:absolute; right:0; bottom:1em; z-index:10 } 
.visualSlide_control .wrapF { display:flex; } 
.visualSlide_control .swiperControl { margin:0 2em 0 auto } 

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

.mainWrap { margin-top:100vh; background:#fff; z-index:1; position:relative; padding-bottom:10vmin } 

.mainTit { margin-bottom:2vmin; display:flex; flex-direction:column; align-items:flex-start; gap:2vmin } 
.mainTit.hc { align-items:center; text-align:center } 
.mainTit.hr { align-items:flex-end } 
.mainTit.vc { justify-content:center } 
.mainTit .tit0 { font-size:2.2vmin; font-weight:900; color:var(--siteC2); text-transform:uppercase } 
.mainTit .tit1 { font-size:4.5vmin; font-weight:800; letter-spacing:-.1vmin; word-spacing:.2vmin; line-height:1 } 
.mainTit .tit1.fR { font-weight:400 } 
.mainTit .tit1.s1 { font-size:6vmin; } 
.mainTit .tt1 { font-size:2.2vmin; line-height:1.6; opacity:.7 } 
.mainTit.white { filter:brightness(0) invert(1) } 
.mainTit .m1 { margin-top:5vmin } 
.mainTit.p1 { padding-left:8vmin } 

.page_con { padding: 6em 0; } 
.page_con.pb0 { padding-bottom: 0em; } 
.page_con.bg1 { background: #f7f7f7; } 

/**/
.page_txt { } 
.page_txt .t1 { font-size: 2.515em; font-weight: 600; } 
.page_txt .t4 { font-size: 1.15em; line-height: 1.4; } 
.page_txt .en { font-family: serif; } 
.page_txt .smT { font-size: .95em; color: var(--siteC2); font-weight: 600; } 

.page_sec_list > li{ margin-bottom: 5em;}
.page_sec_list > li:last-of-type{ margin-bottom: 0em;}

/*flex box*/
.flex_box { } 
.flex_box.s1 { margin: 0 0 -1em -1em; } 
.flex_box.s2 { margin: 0 0 -2em -2em; } 
.flex_box.s3 { } 
.flex_box.s4 { } 
.flex_box.s5 { } 

.flex_box .fst2 > li { flex: 1 1 50%; max-width: 50%; } 
.flex_box .fst2 > li > .in { margin: 0 0 1em 1em; } 
.flex_box .fst3 > li { flex: 1 1 33.33%; max-width: 33.33%; } 
.flex_box .fst3 > li > .in { margin: 0 0 1em 1em; } 
.flex_box .fst4 > li { flex: 1 1 25%; max-width: 25%; } 
.flex_box .fst4 > li > .in { margin: 0 0 1em 1em; } 
.flex_box .fst5 > li { flex: 1 1 20%; max-width: 20%; } 
.flex_box .fst5 > li > .in { margin: 0 0 1em 1em; } 
.flex_box .fst8 > li { flex: 1 1 12.5%; max-width: 12.5%; } 
.flex_box .fst8 > li > .in { margin: 0 0 1em 1em; } 

.flex_box li > a { display: block; } 

.mainBox { padding:8vmin 0; overflow:hidden } 
.mainBox.bg1 { background:#f4fbfa } 
.mainBox.bg2 { background:#f5f5f5 } 
.mainBox .wrapF { display:flex; flex-direction:column; gap:4vmin } 

.mainMore { display:flex; align-items:center; justify-content:center; padding:0 2.5vmin; height:5.5vmin; font-size:1.8vmin; border-radius:8vmin; border:1px solid transparent; background:#111; color:#fff; box-sizing:border-box; gap:2vmin; transition:.3s } 
.mainMore .arrow:before { content:"\e93f" } 
.mainMore.white { border-color:#fff; background:none } 
.mainMore:hover { border-color:transparent; background:var(--siteC) } 
.mainMore.s1 { padding:0 4vmin; height:7vmin; font-size:2.1vmin; } 

.mainCate .list { display:flex; overflow:hidden; border-radius:2vmin } 
.mainCate .list > li { flex:1 1 auto; width:8%; transition:1s } 
.mainCate .list > li .wrap_in { height:60vh; position:relative; color:#fff; overflow:hidden } 
.mainCate .list > li .wrap_in .bg { position:absolute; left:0; top:0; width:100%; height:100%; box-sizing:border-box } 
.mainCate .list > li .wrap_in .bg:after { content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:#000; opacity:.7 } 
.mainCate .list > li .wrap_in .tit_wrap { position:absolute; left:0; top:0; width:100%; height:100%; display:flex; flex-direction:column; align-items:center; gap:4vmin; box-sizing:border-box; padding:8vmin 0 } 
.mainCate .list > li .wrap_in .tit_wrap .t1 { writing-mode: vertical-lr; letter-spacing:-.25em; word-spacing:.5em; font-weight:700; font-size:2.7vmin } 
.mainCate .list > li .wrap_in .tit_wrap:after { content:"\e9c5"; font-family:xeicon; font-size:3vmin; transition:1s } 
.mainCate .list > li .wrap_in .con_wrap { position:relative; box-sizing:border-box; display:flex; flex-direction:column; gap:1.5em; opacity:0; transform:translateY(20%); padding:8vmin; box-sizing:border-box; height:100% } 
.mainCate .list > li .wrap_in .con_wrap .t1 { font-weight:700; font-size:4.5vmin } 
.mainCate .list > li .wrap_in .con_wrap .t2 { opacity:.8; font-size:1.125em; line-height:1.5 } 
.mainCate .list > li .wrap_in .con_wrap .mainMore { margin:auto 0 0 auto; } 
.mainCate .list:not(:hover) > li:first-child,
.mainCate .list > li:hover { width:60% } 
.mainCate .list:not(:hover) > li:first-child .bg:after,
.mainCate .list > li:hover .bg:after { opacity:.2 } 
.mainCate .list:not(:hover) > li:first-child .tit_wrap,
.mainCate .list > li:hover .tit_wrap { opacity:0; visibility:hidden } 
.mainCate .list:not(:hover) > li:first-child .tit_wrap:after,
.mainCate .list > li:hover .tit_wrap:after { transform:rotate(300deg) } 
.mainCate .list:not(:hover) > li:first-child .con_wrap,
.mainCate .list > li:hover .con_wrap { opacity:1; transform:translateY(0); transition:.3s; transition-delay:.3s } 

.wordList { display:flex; flex-wrap:wrap; justify-content:center; gap:2vmin } 
.wordSt { height:7vmin; display:flex; align-items:center; justify-content:center; border-radius:7vmin; background:#eee; box-sizing:border-box; padding:0 4vmin; font-size:2vmin; gap:.5vmin; color:#777; transition:.3s } 
.wordSt:before { content:"#" } 
.wordSt .t1 { font-weight:700 } 
.wordSt:hover { box-shadow:0 0 1em rgba(0,0,0,.1); background:#fff; color:#111 } 

.mainSearch .search { padding:10vmin 16vmin; position:relative; margin-top:4vmin; overflow:hidden; border-radius:2vmin } 
.mainSearch .search .bg { position:absolute; left:0; top:0; width:100%; height:100%; background-attachment:fixed } 
.mainSearch .search .bg:after { content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:#000; opacity:.8 } 
.mainSearch .search .conW { position:relative; display:flex; flex-direction:column; gap:4vmin; color:#fff } 
.mainSearch .search .conW .inpW { position:relative } 
.mainSearch .search .conW .inp { box-sizing:border-box; border:none; border-bottom:2px solid #fff; background:none; height:8vmin; width:100%; font-size:2.5vmin; padding:0 10vmin 0 1vmin; color:#fff; font-weight:700 } 
.mainSearch .search .conW .inp::placeholder { opacity:.5; font-weight:500 } 
.mainSearch .search .conW .btn { position:absolute; right:0; top:0; width:10vmin; height:100%; background:none; color:#fff; border:none; font-size:3vmin } 

.mainCollection { position:relative } 
.mainCollection .bgTit { position:absolute; left:0; bottom:100%; width:100%; transform:translateY(10%); font-family:serif } 
.mainCollection .bgTit .tt { font-size:8vmin; opacity:.05; text-transform:uppercase; font-weight:900; line-height:1 } 
.mainCollection .collection { display:flex; flex-direction:column; position:relative } 
.mainCollection .collection .titW { position:relative; color:#fff; border-radius:2vmin 2vmin 0 0; overflow:hidden } 
.mainCollection .collection .titW .tit .wrapIn { position:relative; display:flex; flex-direction:column; gap:3vmin; padding:6vmin 40vmin 8vmin 6vmin } 
.mainCollection .collection .titW .tit .tt1 { font-weight:700; font-size:4vmin; line-height:1 } 
.mainCollection .collection .titW .tit .tt2 { font-size:1.9vmin; opacity:.7; line-height:3vmin; height:6vmin } 
.mainCollection .collection .titW .swiper-container .el .bgC { position: absolute; left:0; top:0; width:100%; height:100%; background:var(--siteC); } 
.mainCollection .collection .titW .swiperControl { position:absolute; right:0; bottom:0; z-index:10; padding:2vmin 5vmin } 
.mainCollection .collection .titW .tit .tt1 { overflow:hidden } 
.mainCollection .collection .titW .tit .tt1 > i { transform:translateY(150%) } 
.mainCollection .collection .titW .tit .tt2 { opacity:0; transform:translateY(50%) } 
.mainCollection .collection .titW .tit .swiper-slide-thumb-active .tt1 > i { transform:translateY(0); transition:1s } 
.mainCollection .collection .titW .tit .swiper-slide-thumb-active .tt2 { transform:translateY(0); opacity:1; transition:1s; transition-delay:.3s } 

.mainCollection .collection .imgW { height:70vh; overflow:hidden; border-radius:0 0 2vmin 2vmin } 
.collectionSlide,
.collectionSlide .el,
.collectionSlide .el .wrapIn { height:100% } 
.collectionSlide .el .wrapIn { display:flex; flex-wrap:wrap; overflow:hidden; background:#f5f5f5 } 
.collectionSlide .el .wrapIn .img { position:relative; overflow:hidden } 
.collectionSlide .el .wrapIn .img .bg { height:100%; transition:1s; transform:scale(1.2) } 
.collectionSlide .el .wrapIn .img:after { content:""; position:absolute; bottom:0; left:0; width:100%; height:100%; border:1px solid rgba(255,255,255,.5) } 
.collectionSlide .el .wrapIn .img:nth-child(1) { width:50%; height:55% } 
.collectionSlide .el .wrapIn .img:nth-child(2) { width:50%; height:55% } 
.collectionSlide .el .wrapIn .img:nth-child(3) { width:33.33%; height:45% } 
.collectionSlide .el .wrapIn .img:nth-child(4) { width:33.33%; height:45% } 
.collectionSlide .el .wrapIn .img:nth-child(5) { width:33.33%; height:45% } 
.collectionSlide .el .wrapIn .img:hover { animation-name: imgAni; animation-duration: 2s; animation-fill-mode: forwards; } 
@keyframes imgAni { 10% { filter:grayscale(.5) contrast(1.5) } 
40% { filter:grayscale(0) contrast(1) } 
100% { filter:grayscale(0) contrast(1) } 
 }

.collectionSlide .el.swiper-slide-active .wrapIn .img .bg { transform:scale(1) } 

.mainNews { position:relative; z-index:1 } 
.mainNews .wrapF { position:relative; display:flex; flex-direction:column; gap:4vmin } 
.mainNews .listW { position:relative } 
.mainNews .listW .line { position:absolute; left:0; top:50%; width:100%; border-top:1px solid rgba(0,0,0,.1); border-bottom:1px solid rgba(255,255,255,.2) } 
.mainNews .listW .line:before,
.mainNews .listW .line:after { content:""; position:absolute; left:0; top:50%; transform:translate(0, -50%); width:.75em; height:.75em; border-radius:50%; background:#111 } 
.mainNews .listW .line:after { background:#fff; left:auto; right:0 } 
.mainNews .list { margin:-2vmin } 
.mainNews .list .el { width:33.33% } 
.mainNews .list .el .in { display:flex; flex-direction:column; overflow:hidden; border-radius:1em; background:#FFF; margin:2vmin; box-shadow:0 0 1em rgba(0,0,0,.1) } 
.mainNews .list .el .in .img_wrap { overflow:hidden; max-height:40vmin } 
.mainNews .list .el .in .img_wrap .resize { padding-bottom:56.25% } 
.mainNews .list .el .in .con_wrap { display:flex; flex-direction:column; gap:2vmin; padding:3vmin } 
.mainNews .list .el .in .con_wrap .t1 { font-weight:700; font-size:1.25em } 
.mainNews .list .el .in .con_wrap .t2 { opacity:.7 } 
.mainNews .list .el .in .con_wrap .date { font-size:.938em; opacity:.5; margin-left:auto } 

.mainAbout .about { display:flex; align-items:flex-start; gap:1px } 
.mainAbout .about > li { flex:1; position:relative; overflow:hidden } 
.mainAbout .about > li .bg { height:50vh } 
.mainAbout .about > li .bg:after { content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:#000; opacity:.3 } 
.mainAbout .about > li:nth-child(odd) { margin-top:8vh } 
.mainAbout .about > li:first-child { border-top-left-radius:4vh } 
.mainAbout .about > li:last-child { border-bottom-right-radius:4vh } 
.mainAbout .about > li .con { position:absolute; left:0; top:0; width:100%; height:100%; box-sizing:border-box; padding:8vmin 4vmin; display:flex; flex-direction:column; align-items:flex-start; gap:2vmin; justify-content:flex-end; color:#fff } 
.mainAbout .about > li .con .t1 { font-size:4vmin; font-family: "Times New Roman", Times, serif } 
.mainAbout .about > li .con .t2 { font-size:2vmin; line-height:1.5 } 
.mainAbout .about.on > li { transition:2s } 
.mainAbout .about.on > li:nth-child(odd) { margin-top:0 } 
.mainAbout .about.on > li:nth-child(even) { margin-top:8vh } 

/*건설사례*/
.mainprojSlide_wrap { display: flex; gap: 1em; padding-bottom: 1em; margin-bottom: 1em; border-bottom: 1px solid #ddd; } 
.mainprojSlide_wrap .projectInfo { width: 20%; display: flex; flex-direction: column; justify-content: space-between; } 
.mainprojSlide_wrap .projectInfo .Slidewrap { display: flex; justify-content: space-between; margin-bottom: .25em; } 
.mainprojSlide_wrap .projectInfo .Slidewrap .en { font-size: 2.15em; font-weight: 600; color: #444; line-height: 1; } 
.mainprojSlide_wrap .projectInfo .Slidewrap .mainprojSlide_control { display: flex; gap: .5em; } 
.mainprojSlide_wrap .projectInfo .kn { font-size: 1.515em; font-weight: 400; color: #444; } 
.mainprojSlide_wrap .projectInfo .count { font-size: 1.515em; font-weight: 400; color: #444; } 
.mainprojSlide_wrap .projectInfo .proBtm { display: flex; justify-content: end; } 
.mainprojSlide_wrap .projectInfo .proBtm button { border-radius: .25em; padding: .25em .5em; display: inline-block; border: none; background: #f7f7f7; transition: .3s; } 
.mainprojSlide_wrap .projectInfo .proBtm button:hover { background: var(--siteC); color: #fff; } 
.mainprojSlide_wrap .projectInfo .proBtm button .tt { font-size: .9em; } 
.mainprojSlide_wrap .mainprojSlide { width: 80%; } 
.mainprojSlide_wrap .mainprojSlide .el { } 
.mainprojSlide_wrap .mainprojSlide .el > .img_con { width: 100%; height: 15em; } 
.mainprojSlide_wrap .mainprojSlide .el > .img_con > img { width: 100%; height: 100%; object-fit: cover; } 
.mainprojSlide_wrap .mainprojSlide .el > .title { margin-top: 5px; display: flex; justify-content: end; font-size: 1.063em; color: #222; } 

/*건설사례 new*/
.pro-con { padding-top: 4.5em; } 
.project_detail { display: flex; align-items: center; padding-bottom: 25px; border-bottom: 1px solid #ddd; margin-bottom: 30px; } 
.project_detail .project-year { float: left; display: flex; flex-direction: column; justify-content: center; min-width: 65px; width: 65px; height: 65px; margin-right: 18px; background-color: var(--siteC2); font-size: 13px; letter-spacing: 0.5px; color: #fff; line-height: 1.2; text-align: center; font-weight: 700; } 
.project_detail .project-year .table-layout { display: flex; flex-direction: column; } 
.project_detail .project-name { display: block; position:relative; font-size: 1.75em; font-weight: 600; } 
.project_detail { position: relative; } 
.project_detail .project-date { position: absolute; top: 50%; transform: translateY(-50%); right: 0; line-height:65px; font-weight:700; color:#333; font-size:18px; letter-spacing:-0.3px; opacity:0.4 } 

/* 상세스펙 :: 상세스펙 */
.project-detail-spec-box dl { overflow:hidden; font-size:17px; line-height:1.2; letter-spacing:-0.5px; margin-top:15px; color:#2f2821; } 
.project-detail-spec-box dl:first-child { margin-top:0; } 
.project-detail-spec-box dl dt { float:left; width:160px; font-weight:500; } 
.project-detail-spec-box dl dd { float:left; width:calc(100% - 160px); font-weight:300; } 


/**/
.page_select_wrapper { position: relative; display: flex; } 
.page_select_wrapper .select_info { width: 70%; padding: 0 4.5vw; padding-top: 4.5vw; box-sizing: border-box; } 
.page_select_wrapper .select_table { position: sticky; top: 0; right: 0; height: 100%; background: #f5f5f5; width: 30%; } 

.page_select_wrapper .set-top { margin-bottom: 3.5em; } 
.page_select_wrapper .set-top .step_en { font-size: 15px; font-weight: 900; color: #1d2c4a; } 
.page_select_wrapper .set-top .tit { font-size: 25px; font-weight: 800; display: block; margin-top: 15px; } 
.page_select_wrapper .set-top { display: flex; justify-content: space-between; align-items: end; } 
.page_select_wrapper .set-top .tt { font-size: 1.215em; color: #222; } 

.pagoraStepItem { } 
.pagoraStepItem .est-con { } 
.pagoraStepItem .est-con .item_kind { } 
.pagoraStepItem .est-con .item_kind > li { margin-bottom: 2em; } 
.pagoraStepItem .est-con .item_kind > li:last-of-type { margin-bottom: 0em; } 
.pagoraStepItem .est-con .item_kind > li > input { display: none; } 
.pagoraStepItem .est-con .item_kind > li > label { display: flex; align-items: center; width: 100%; transition: .3s linear; box-shadow: 0 0 15px 6px rgba(0, 0, 0, 0.05); cursor: pointer; outline: 2px solid transparent; } 
.pagoraStepItem .est-con .item_kind > li > input:checked + label { outline: 2px solid var(--siteC); } 
.pagoraStepItem .est-con .item_kind > li > label > .somImg { width: 150px; height: 90px; } 
.pagoraStepItem .est-con .item_kind > li > label > .somImg > img { width: 100%; height: 100%; object-fit: cover; } 
.pagoraStepItem .est-con .item_kind > li > label > .tt { font-size: 1.15em; color: #171717; font-weight: 600; padding-left: 1.5em; line-height: 1; } 
.pagoraStepItem .est-con .item_kind > li > input:checked + label > .tt { color: #fff; } 

.checkItem .imgB { width: 100%; height: 22.5em; } 
.checkItem .imgB > img { width: 100%; height: 100%; object-fit: cover; } 
.checkItem .est_Info { padding: 45px 42px; box-sizing: border-box; height: 100vh; } 
.checkItem .est_Info .est-tit { font-size: 30px; font-weight: 900; } 
.checkItem .est_Info .est-apply-info { margin-top: 25px; border-top: 1px solid #000; } 
.checkItem .est_Info .est-apply-info dl { border-bottom: 1px solid #c8c8c8; padding: 19px 7px; display: flex; } 
.checkItem .est_Info .est-apply-info dl > dt { font-weight: 600; width: 100px; font-size: 16px; flex-shrink: 0; } 
.checkItem .est_Info .est-apply-info dl > dl { font-size: 16px; flex-grow: 1; } 

.select_info .select-wrap { position:relative; margin-bottom:110px; } 
.select_info .select-wrap > .xi { position: absolute; right: 1.5em; top: 50%; transform: translateY(-50%); color: #fff; } 
.est-item { margin-bottom:125px; padding-top:30px; } 
.nice-select { -webkit-tap-highlight-color: transparent; background-color: #fff; border: solid 1px #e8e8e8; box-sizing: border-box; /* clear: both; */cursor: pointer; display: block; /* float: left; */font-family: inherit; font-size: 14px; font-weight: normal; height: 42px; line-height: 40px; outline: none; padding-left: 18px; padding-right: 30px; position: relative; text-align: left !important; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; white-space: nowrap; width: auto; } 
.nice-select .list { background-color: #fff; border: 1px solid #e2e2e2; box-sizing: border-box; opacity: 0; overflow: hidden; padding: 0; pointer-events: none; position: absolute; top: 100%; left: 0; transition: 0.3s; z-index: 3; width: 100%; } 
.nice-select .option { cursor: pointer; font-weight: 400; line-height: 40px; list-style: none; min-height: 40px; outline: none; padding-left: 18px; padding-right: 29px; text-align: left; -webkit-transition: all 0.2s; transition: all 0.2s; } 

.select-1 { height: 100px; width: 100%; font-size: 25px; color: #fff; background: var(--siteC); padding: 0 50px; border: none; } 
.select-1 option { background-color: #fff; color: #171717; padding: 8px; } 
.select-1.open:after { transform: translate(0, -50%) rotate(-180deg); } 
.select-1 > span { line-height: 100px; } 
.select-1 .option { color:#1d2c4a; padding:30px 68px; } 
.nice-select.open .list { display: block; opacity: 1; } 

/*파고라 하단*/
.est-con label { transition: .3s linear; box-shadow: 0 0 15px 6px rgba(0, 0, 0, 0.05); cursor: pointer; outline: 2px solid transparent; } 
.est-con input:checked + label { outline: 2px solid #1d2c4a; background: #1d2c4a; color: #fff; } 
.est-con input:checked + label p { font-weight: 600; } 
.est-con input[type="text"],
.est-con textarea { border-radius: 10px; border: 2px solid #e2e2e2; transition: .4s; outline: none; font-size: 18px; } 
.est-con input[type="text"]:focus,
.est-con textarea:focus { border: 2px solid #1d2c4a; transition:.4s; } 
.est-con input[type="text"], .est-con textarea { } 
.size_btn { display: flex; flex-wrap: wrap; } 
.size_btn > li {   width: 15%; margin-right: 2%; height: 150px;  margin-bottom: 20px; } 
.size_btn > li:nth-child(6n) { margin-right: 0px; } 
.size_btn > li > label { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 10px; box-sizing: border-box; } 
.size_btn > li > label > p { text-align: center; word-break: break-all; font-size: 18px; } 

.self-input { position: relative; margin-top: 25px; } 
.self-input:first-child { margin-top: 0; } 
.self-input > p { position: absolute; right: 60px; top: 50%; transform: translate(0, -50%); } 
.self-input input[type="text"] { height: 80px; border: 2px solid #e2e2e2; border-radius: 10px; width: 100%; padding: 0 40px; text-align:right; font-size:18px; transition:.4s; outline:none; } 
.size_btn + .self-input input[type="text"] { padding-right: 100px; } 

/*파고라 색상*/
.no-bg input:checked + label { background: transparent; color: var(--crBlack) } 
.color_btn { display: flex; flex-wrap: wrap; margin-right: -20px; } 
.color_btn > li { width: calc(33.3333% - 20px); margin-right: 20px; margin-bottom: 35px; box-sizing: border-box; } 
.color_btn > li:nth-child(3n) { margin-right: 0; } 
.color_btn > li label { width: 100%; border-left: none; padding: 0 20px 0 0; display: flex; align-items: center; box-sizing: border-box; } 
.color_btn > li label > .BGcolor { width: 120px; height: 90px; border-right: 1px solid #e2e2e2; flex-shrink: 0; } 
.color_btn > li label > p { margin-left: 18px; } 
.color_btn > li label > p > i { text-transform: uppercase; } 

/*파고라 옵션*/
.option_btn { display: flex; flex-wrap: wrap;/*  margin-right: -30px; */ } 
.option_btn > li { width: calc(50% - 15px); height: 80px; margin-right: 30px; margin-bottom: 30px; box-sizing: border-box; } 
.option_btn > li:nth-child(2n) { margin-right: 0; } 
.option_btn > li label { width: 100%; height: 100%; padding: 10px 35px; display: flex; box-sizing: border-box; align-items: center; justify-content: center; } 

/*파고라 바닥*/
.floor-input-wrap { } 
.floor-input-wrap .floor-inner { display: flex; gap: 1.5em; } 
.floor-input-wrap .floor-input { position: relative; width: 50%; } 
.floor-input-wrap .floor-input input { position:relative; padding-right: 100px; } 
.floor-input-wrap .floor-input > p { position: absolute; right: 2em; top: 50%; transform: translateY(-50%); } 

/*파고라 이미지 첨부, 메모*/
.photo-wrap { display: flex; height: 256px; } 
.photo-box { width: calc(45% - 50px); height: 100%; margin-right: 50px; flex-shrink: 0; } 
.photo-box label { width: 100%; height: 100%; display: block; position: relative; z-index: 1; background-repeat: no-repeat; background-position: center center; background-size: contain; } 
.photo-box label span { display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 1.7em; } 
.photo-wrap .photo-txt { width: 55%; } 
.photo-wrap .photo-txt > textarea { padding: 25px 30px; resize: none; height: 100%; width: 100%; font-family: inherit; line-height: 1.7; box-sizing: border-box; } 

/*파고라 버튼*/
.submit_wrap { padding-bottom: 8em; } 


/*회사소개*/
.greeting-wrapper { } 
.greeting-wrapper .greetingTop { text-align: center; } 
.greeting-wrapper .greetingTop .sub-tit { display: block; font-weight: 700; font-size: 24px; letter-spacing: -0.1px; color: #333; margin-bottom: 40px; opacity: 0; transition: 1s; } 
.greeting-wrapper .greetingTop .sub-tit.on { opacity: 1; } 
.greeting-wrapper .greetingTop .tit { font-weight: 300; font-size: 50px; letter-spacing: -2px; color: #8c857f; line-height: 1.4; transform: translateY(1em); transition: 1s; opacity: 0; } 
.greeting-wrapper .greetingTop .tit.on { opacity: 1; transform: translateY(0); } 
.greeting-wrapper .greetingTop .tit > i { color: #444; } 
.greeting-wrapper .greetingTop .tit > .cp { color: var(--siteC2); } 

.GwideBg { margin-top: 4em; } 
.GwideBg .greetingBg { position: relative; width: 100%; height: 70vh; overflow: hidden; width: 100%; } 
.GwideBg .greetingBg:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg,rgba(0, 0, 0, 0.46) 30%, rgba(0, 0, 0, 0) 100%); content: ''; } 
.GwideBg .greetingBg .title { position: absolute; width: 90%; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 2; } 
.GwideBg .greetingBg .title > .mark { margin-bottom: 2em; } 
.GwideBg .greetingBg .title > .mark > img { width: 8em; filter: brightness(0) invert(1); } 
.GwideBg .greetingBg .title > .tit { font-size: 1.515em; font-weight: 300; letter-spacing: 1.5em; opacity: 0; transition: 1.5s; color: #fff; } 
.GwideBg .greetingBg .title > .tit.on { letter-spacing: 1em; opacity: 1; } 
.GwideBg .greetingBg .title > .desc { color: rgba(255,255,255, 1); font-size: 1.315em; font-weight: 600; line-height: 1.4; margin-top: 1.5em; opacity: 0; transform: translateY(1em); transition: 1.5s; } 
.GwideBg .greetingBg .title > .desc.on { opacity: 1; transform: translateY(0); } 
.GwideBg .greetingBg > img { width: 100%; height: 100%; object-fit: cover; } 

.greetingBtm-wrapper { padding: 6em 0; } 
.greetingBtm-wrapper .pageLay { display: flex; gap: 8em; padding-bottom: 8em; } 
.greetingBtm-wrapper .pageLay:last-of-type { padding-bottom: 0em; } 
.greetingBtm-wrapper .pageLay .infoLay,
.greetingBtm-wrapper .pageLay .imgLay { width: 50%; } 
.greetingBtm-wrapper .pageLay .infoLay { padding: 40px 0 40px 40px; box-sizing: border-box; } 
.greetingBtm-wrapper .pageLay .infoLay h1 { font-size: 4.5em; margin-bottom: 1.5em; font-weight: 600; line-height: 1.3; color: #222; font-family: serif; } 
.greetingBtm-wrapper .pageLay .infoLay .subT { font-size: 2.5em; font-weight: 500; color: #222; margin-bottom: 1em; font-family: serif; } 
.greetingBtm-wrapper .pageLay .infoLay .desc { font-size: 1.415em; line-height: 1.4; color: #666; } 
.greetingBtm-wrapper .pageLay .imgLay .img { width: 100%; height: 100%; } 
.greetingBtm-wrapper .pageLay .imgLay.h2 .img { height: 75vh; } 
.greetingBtm-wrapper .pageLay .imgLay .img > img { width: 100%; height: 100%; object-fit: cover; } 
.greetingBtm-wrapper .pageLay .imgLay.st2 { display: flex; gap: 10px; } 

.overview-wrapper .flex_box { margin: 0 0 0 -4em !important } 
.overviewList { } 
.overviewList > li { } 
.overviewList > li > .in { margin: 0 0 6em 4em !important } 
.overviewList > li:nth-child(4) > .in,
.overviewList > li:nth-child(5) > .in,
.overviewList > li:nth-child(6) > .in { /* margin-bottom: 0em !important; */ } 
.overviewList > li > .in > .effect-items { position: relative; } 
.overviewList > li > .in > .effect-items > .img_con > img { width: 100%; height: 100%; object-fit: cover; } 
.overviewList > li > .in > .effect-items .icon { position: absolute; top: 0; right: 0; } 
.overviewList > li > .in > .effect-items .icon > img { width: 3.5em; } 
.overviewList > li > .in > .effect-items .item-title { display: flex; padding: 2px 0; align-items: center; font-size: 32px; font-weight: 700; color: var(--crBlack); margin-bottom: 15px; } 
.overviewList > li > .in > .effect-items > .item-desc { margin-top: 30px; padding-top: 24px; border-top: 4px solid #000; font-size: 18px; line-height: 1.5; font-weight: 500; color: #3F3F46; } 
.overMid { position:relative; width: 100%; padding: 6em 0; } 
.overMid:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0, .25); content: ''; } 
.overMid .titArea { position: relative; color: #fff; z-index: 2; } 
.overMid .titArea .subT { font-size: 1.415em; font-weight: 600; margin-bottom: .3em; } 
.overMid .titArea .tit { font-size: 3em; font-weight: 800; } 


/* 사업영역 :: 공통 */
.business-con { margin-bottom:120px } 
.business-con:last-child { margin-bottom:0 } 
.Info-txt { word-break:keep-all } 
.Info-txt .tit { font-weight:500; font-size:30px; letter-spacing:-1px; color:#645c54 } 
.Info-txt .tit span { display:inline-block; margin-right:10px } 
.Info-txt .tit span b { font-weight:500; color:var(--siteC2); } 
.Info-txt .tit strong { display:inline-block; margin-bottom:7px; font-weight:300; font-size:20px; letter-spacing:-0.25px; color:#666; } 
.Info-txt .txt { font-weight:400; font-size:18px; letter-spacing:-0.5px; color:#666; line-height:1.77; margin-top:24px } 
.business-img img { max-width:100% } 
.middle-area.inner > div { display:inline-block; margin:0 -1px; vertical-align:middle } 
.business-info.has-line .Info-txt { border-top:1px solid #e0dedd; margin-top:60px; padding-top:50px } 
.business-info .business-logo { display:inline-block; } 

/* 사업영역 :: yegun 조경시설물 */
.land-con.business-con { margin-bottom:140px } 
.land-con .bueinss-lf { float:left; width:49.5%; padding-right:0.5% } 
.land-con .bueinss-rt { float:right; width:49.5%; padding-left:0.5% } 
.land-con .business-info { float:left; width:49.5%; padding-right:0.5%; margin-top:8.5% } 
.land-con .business-info .business-logo { float:left; width:191px; } 
.land-con .business-info .Info-txt { float:left; width:calc(84.5% - 191px); padding:0 3% 0 12.5% } 
.land-con .business-info .Info-txt .tit span { /* margin-right:15px */ } 

.business_List { } 
.business_List > li { } 
.business_List > li > .in { margin: 0 0 6em 2em !important } 
.business_List > li > .in > .infoT { padding: 3.5em 0; border-top: 1px solid #111; } 
.business_List > li > .in > .infoT > .tit { font-size: 1.615em; font-weight: 600; margin-bottom: .75em; color: #222; } 
.business_List > li > .in > .infoT > .desc { font-size: 1.15em; line-height: 1.4; color: #666; } 
.business_List > li > .in > .img_con { width: 100%; height: 50vh; } 
.business_List > li > .in > .img_con > img { width: 100%; height: 100%; object-fit: cover; } 

/*연혁*/
.history-bg { position:relative; height: 400px; border-radius: 1em; overflow: hidden; } 
.history-bg:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.15); content: ''; } 
.history-bg .txt-wrap { position: relative; z-index: 2; } 
.history-bg .txt-wrap > p { color: #fff; } 
.history-con { padding: 5rem 0; } 
.history-list { } 
.history-list > li { padding-bottom: 8rem; position: relative; } 
.history-list > li::before { content: ''; position: absolute; top: 36px; left: 0; right: 0; margin: auto; width: 1px; height: calc(100% - 2.5rem); background: #ddd; } 
.history-list > li:last-child:before { display: none; } 
.history-list > li > dl { flex-direction: column; padding-left: calc(50% + 60px); } 
.history-list > li:nth-child(odd) > dl { padding-left: 0; padding-right: calc(50% + 60px); text-align: right; } 
.history-list > li > dl > dt::before { content: ''; position: absolute; top: 0; right: -5px; bottom: 0; margin: auto; width: 10px; height: 10px; background: #ddd; border-radius: 50%; transition: 0.3s; } 
.history-list > li.active > dl > dt::before { box-shadow: 0 0 0 5px rgba(224 254 221); background: var(--siteC2); } 
.history-list > li:nth-child(odd) > dl > dt::before { right: auto; left: -5px; } 
.history-list > li > dl > dt { position: absolute; top: -12px; right: 50%; padding-right: 60px; padding-left: 0; font-weight: 700; } 
.history-list > li:nth-child(odd) > dl > dt { left: 50%; right: auto; padding-left: 60px; padding-right: 0; } 
.history-list > li > dl > dd { position: relative; margin-bottom: 0.5em; padding-left: 1em; font-size: 1.125rem; color: #666; } 
.history-list > li:nth-child(odd) > dl > dd { margin-left: auto; } 

/*카탈로그*/
.catalog_wrapper { } 
.catalog_wrapper .cata_Top { position: relative; padding: 2.5em; box-sizing: border-box; border: 1px solid #e9e9e9; background: #f9f9f9; } 
.catalog_wrapper .cata_Top:after,
.catalog_wrapper .cata_Top:before { content: ""; position: absolute; width: 3em; height: 3em; border: 3px solid #000; } 
.catalog_wrapper .cata_Top:before { left: -1px; top: -1px; border-right: none; border-bottom: none; } 
.catalog_wrapper .cata_Top:after { right: -1px; bottom: -1px; border-left: none; border-top: none; } 
.catalogList { } 
.catalogList > li { } 
.catalogList > li > .in { } 
.catalogList > li > .in > .line { padding: .5em 1.5em; box-sizing: border-box; background: var(--siteC); } 
.catalogList > li > .in > .line > .lineL { display: flex; justify-content: end; } 
.catalogList > li > .in > .line > .lineL > img { width: 10em; filter: var(--crWhitefil); object-fit: contain; } 
.catalogList > li > .in > .Inner_info { position:relative; display: flex; flex-direction: column; justify-content: center; min-height: 40vh; padding: 2em; box-sizing: border-box; border: 1px solid #ddd; text-align: center; } 
.catalogList > li > .in > .Inner_info > .downLoad { margin-top: 2.5em; } 
.catalogList > li > .in > .Inner_info > .downLoad > .cateB { display: flex; align-items: center; justify-content: center; height: 4.5em; color: #fff; background: var(--siteC4); transition: .3s; } 
.catalogList > li > .in > .Inner_info > .downLoad > .cateB > .xi,
.catalogList > li > .in > .Inner_info > .downLoad > .cateB > .tt { font-size: 1.15em; font-weight: 600; } 
.catalogList > li > .in > .Inner_info > .downLoad > .cateB > .xi { margin-left: .5em; } 
.catalogList > li > .in > .Inner_info > .downLoad > .cateB:hover { background: var(--siteC5); } 
.catalogList > li > .in > .Inner_info > .tit { font-size: 2.15em; color: #525258; } 
.catalogList > li > .in > .Inner_info > .type { font-size: 1.215em; color: rgba(0,0,0, .25); } 
.catalogList > li > .in > .Inner_info > .desc { margin-top: 1em; height: 3.5em; font-size: 1.163em; line-height: 1.4; color: #666; } 

/*오시는 길*/
.location_container { position: relative; } 
.location_container .location_tit { text-align: right; line-height: 65px; font-size: 20px; color: #333; opacity: 0.3; letter-spacing: 15px; font-style: italic; font-weight: 400; margin-right: -15px; } 
.location_container .location_map_box { margin-left: 400px; } 
.location_container .location_map_box .wrap_map { height: 35em; } 
.location_container .location_info_box { position: absolute; bottom: 0px; left: 0; top: 0px; width: 400px; background-color: #000; box-sizing: Border-box; padding: 60px 50px; font-size: 16px; color: #fff; letter-spacing: -0.5px; } 
.location_container .location_info_box:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0, .3); content: ''; } 
.location_container .location_info_box .location_info_tit { position: relative; font-size: 1.875em; font-weight: 600; letter-spacing: -0.75px; margin-bottom: 1em; z-index: 2; } 
.location_container .location_info_box dl { position:relative; overflow:hidden; line-height:1.8; margin-top:1em; font-weight:300; z-index: 2; } 
.location_container .location_info_box dl dt { float:left; width:60px; font-weight: 600; } 
.location_container .location_info_box dl dd { float:left; width:calc(100% - 60px); opacity:0.8 } 

.location_container.head_office .location_info_box { background: url(../images/sub/location_img01.jpg) no-repeat 100% 50%; background-size: cover; } 
.location_container.factory_office .location_info_box { background: url(../images/sub/location_img02.jpg) no-repeat 100% 50%; background-size: cover; } 
.location_container.factory_office { margin-top: 75px; } 

.root_daum_roughmap .cont .section.lst,
.root_daum_roughmap .wrap_controllers { display: none; } 




/****************************/

.prod_list2 li .in .prod_img { border: 1px solid #ddd; position: relative; overflow: hidden; } 
.prod_list2 li:hover .in .prod_img img,
.prod_list2 li:focus .in .prod_img img { transform: scale(1.2); transition: .3s; } 
.prod_list2 li .in .prod_img .tag { position: absolute; background: var(--siteC); color: #fff; padding: 1em; z-index: 10; text-align: center; font-size: 0.9em; } 
.prod_list2 li .in .prod_img .tag .num { font-weight: 800; font-size: 1.4em; margin-top: .1em; } 
.prod_list2 li .in .prod_info { margin-top: 1em; } 
.prod_list2 li .in .prod_info .cate { font-size: 0.9em; margin-bottom: .5em; color: #727272; } 
.prod_list2 li .in .prod_info .tit { font-size: 1.125em; font-weight: 600; margin-bottom: 1em; } 
.prod_list2 li .in .prod_info .price_box { gap: 1em; } 
.prod_list2 li .in .prod_info .price_box .price { font-weight: 800; } 
.prod_list2 li .in .prod_info .price_box .per { font-weight: 700; color: #f81816; } 
.prod_list2 li .in .prod_info .price_box .per > i { font-size: 1em; } 

.best_cate { gap: 2em; } 
.best_cate li { width: 9%; } 
.best_cate li .in { display: block; text-align: center; } 
.best_cate li .in .img { border: 1px solid #ddd; border-radius: 1em; overflow: hidden; margin-bottom: 1em; } 
.best_cate li:hover .in .img img,
.best_cate li:focus .in .img img { transform: scale(1.2); transition: .3s; } 
.best_cate li .in .tt { font-size: 0.96em; } 
.best_cate li:hover .in .tt,
.best_cate li:focus .in .tt { font-weight: 700; } 

.mall_list_top { padding:0 0 2.5em 0 } 
.mall_list_top .tit_wrap { padding:1em 0; border-bottom:1px solid #222 } 
.mall_list_top .tit_wrap .tit { font-size:2.25em; font-weight:700 } 
.mall_list_top .tit_wrap .sub_nav_st { margin-left:auto } 
.mall_list_top .gnb_wrap { position:relative } 
.mall_list_top .gnb_wrap:before { content:""; position:absolute; right:0; bottom:0; width:100%; height:1px; background:#eee } 
.mall_list_top .gnb_wrap:after { content:""; position:absolute; right:0; top:0; width:1px; height:100%; background:#fff } 
.mall_list_top .gnb_wrap .gnb > li.on { display:flex; flex-wrap:wrap; width:100%; } 
.mall_list_top .gnb_wrap .all { width:14.28%; position:absolute; left:0; top:0 } 
.mall_list_top .gnb_wrap .gnb > li .dp2 { flex-wrap:wrap } 
.mall_list_top .gnb_wrap .gnb > li .dp2 > li { width:14.28% } 
.mall_list_top .gnb_wrap .gnb > li .dp2 > li:first-child { margin-left:14.28% } 
.mall_list_top .gnb_wrap a { padding:.5em 1.5em; height:4em; border-bottom:1px solid #eee; box-sizing:border-box; display:flex; align-items:center; font-weight:300; color:#666; position:relative } 
.mall_list_top .gnb_wrap a:after { content:""; position:absolute; right:-1px; top:0; width:1px; height:100%; background:#eee } 
.mall_list_top .gnb_wrap a.dp1 { font-weight:500; color:#111 } 
.mall_list_top .gnb_wrap .all.on,
.mall_list_top .gnb_wrap .dp2 > li.on a { font-weight:500; color:#111 } 
.mall_list_top .gnb_wrap a .va:after { content:"\e942"; font-family:xeicon; margin:0 .5em; vertical-align:middle } 
.mall_list_top .gnb_wrap a .va { font-size:1.063em } 

.mall_list_total { padding:0 0 1em 0; border-bottom: 2px solid #111; margin-bottom: 2em;} 
.mall_list_total .total .t1 { } 
.mall_list_total .total .t2 { font-size:1.5em; font-weight:900; margin-left:.25em } 
.mall_list_total .etc { margin-left:auto } 

.mall_prod_wrap { } 
.prod_list { margin:-2em 0 0 -2em } 
.prod_list > .no_con{ margin: 0em;}
.prod_list > li { width:25% } 
.prod_list > li .wrap_in { margin:2em 0 0 2em; cursor:pointer } 
.prod_list > li .wrap_in .wrap_img { overflow:hidden; position:relative; } 
.prod_list > li .wrap_in .wrap_img .resize{ }
.prod_list > li:hover .wrap_in .wrap_img .resize { } 
.prd_icon_wrap { position:relative; display: flex; margin-top: 1em; gap: .25em; } 
.prd_icon_wrap .prd_icon { display: flex; align-items: center; justify-content: center; height: 2em; border-radius: .25em; padding: 0 .75em; line-height: 2em; font-size: .625em; font-weight: 700; text-transform: uppercase; color: #fff; } 
.userHome .prd_icon_wrap .prd_icon { font-weight:800 } 
.prd_icon_wrap .prd_icon.icon_sold { background:#111; } 
.prd_icon_wrap .prd_icon.icon_sale { background: #e44e3d; } 
.prd_icon_wrap .prd_icon.c1 { background: #f0164a; } 
.prd_icon_wrap .prd_icon.c2 { background: #e44e3d; } 
.prd_icon_wrap .prd_icon.c4 { background: #111; } 
.prod_list > li .wrap_in .wrap_con {} 
.prod_list > li .wrap_in .wrap_con > .tt_prod{ margin-top: .5em; margin-bottom: 1em;}
.prod_list.d1 > li { width:20% } 
.prod_list.d1 > li .wrap_in .wrap_con { font-size:.813em } 

.mall_view_top { padding-bottom:5em; overflow: hidden;} 
.mall_view_top .prod_img,
.mall_view_top .prod_info { width:calc(50% - 2.5em) } 
.mall_view_top .prod_img .imgBig img { display:block; width:100% } 
.mall_view_top .prod_info { padding:0 0 } 
.mall_view_top .prod_info .tit_wrap .tit { font-weight:800; font-size:2.25em } 
.mall_view_top .prod_info .tit_wrap .t1 { opacity:.3; font-size:1.125em; margin-bottom:.375em; word-spacing:.125em } 
.mall_view_top .prod_info .tit_wrap .t2 { font-size:1.25em; font-weight:700; margin-top:1em; color:#777 } 
.mall_view_top .prod_info .tit_wrap .t3 { font-size:1.05em; font-weight:500; margin-top:1em; color:#777 } 
.mall_view_top .prod_info .prod_price { margin-top:2.5em; font-size:1.125em } 
.mall_view_top .prod_info .info_wrap { margin:1em 0 2em 0 } 
.mall_view_top .prod_info .info_wrap .list { border-top:1px solid #eee; padding:.5em 0 } 
.mall_view_top .prod_info .info_wrap .list > li { padding:.75em 0 } 
.mall_view_top .prod_info .info_wrap .list .tit { width:7em; margin-right:1em } 
.mall_view_top .prod_info .info_wrap .list .tit .t1 { font-weight:700; font-size:1.063em } 
.mall_view_top .prod_info .info_wrap .list .con .t1 { font-weight:400; color:#666 } 
.mall_view_top .prod_info .op_wrap > li .wrap_in { padding:1.5em 2.5em; background:#f5f5f5; margin-bottom:1em } 
.mall_view_top .prod_info .op_wrap > li .wrap_in .wrap1 { margin-bottom:.75em } 
.mall_view_top .prod_info .op_wrap > li .wrap_in .tit { font-size:1.125em } 
.mall_view_top .prod_info .op_wrap > li .wrap_in .tt_price { font-size:.938em; width:120px; } 
.mall_view_top .prod_info .total_price { margin:2.5em 0 } 
.mall_view_top .prod_info .total_price .tt_price { font-size:1.375em } 
.mall_view_top .prod_info .buy_btn_wrap .btn { height:3.5em; min-width:3.5em; display:flex; align-items:center; justify-content:center; text-align:center; width:100%; border:1px solid transparent; background:#fff; font-size:1.188em; font-weight:700 } 
.mall_view_top .prod_info .buy_btn_wrap .btn:before { font-family:xeicon; font-weight:normal; font-size:1.25em; margin-right:.25em } 
.mall_view_top .prod_info .buy_btn_wrap > li.btnWish { margin-left:1em } 
.mall_view_top .prod_info .buy_btn_wrap > li.btnbefore .btn{ border-color: #111; color: #111; background: #fff;}
.mall_view_top .prod_info .buy_btn_wrap > li.btnCart .btn { background: #111; border-color: #111; color: #fff;}  
.mall_view_top .prod_info .buy_btn_wrap > li.btnBuy .btn { color:#fff; background:var(--siteC); border-color:var(--siteC); } 
.mall_view_top .prod_info .buy_btn_wrap > li.btnBuy .btn:hover { background:var(--siteC); } 
.mall_view_top .prod_info .buy_btn_wrap > li.btnCart .btn:before { content:"\e9fb" } 
.mall_view_top .prod_info .buy_btn_wrap > li.btnBuy .btn:before { content:"\ea77" } 
.mall_view_top .prod_info .buy_btn_wrap > li.btnWish .btn { background: var(--siteC2); color: #fff;} 
.mall_view_top .prod_info .buy_btn_wrap > li.btnWish .btn:hover {  } 
.mall_view_top .prod_info .buy_btn_wrap.on { /* position:fixed; left:50%; bottom:0; z-index:1; width:50em; max-width:100%; transform:translateX(-50%) */ } 
.mall_view_top .prod_info .buy_btn_wrap.on > li.btnWish { margin-left:0 } 
.mall_view_con .view_tab { max-width:none } 
.mall_view_con .view_tab.on { position:fixed; top:0; z-index:1 } 
.mall_view_con .view_con { padding:4em 0 } 

.mall_view_top .mall_view_img .big > .resize{ padding-bottom: 80%;}
.mall_view_top .mall_view_img > .resize{ padding-bottom: 66.66%;}

.vol_st { padding-left:1px; display: flex;} 
.vol_st .btn,
.vol_st .inp { width:2.5em; line-height:2.5em; height:2.5em; text-align:center; border:1px solid #ddd; background:#fff; margin-left:-1px } 
.vol_st .inp { width:3.5em; box-sizing:border-box; font-family:gs,sans-serif } 
.vol_st .btn:hover { background: #333; color: #fff; } 
.vol_st .btn .xi { font-size:1em } 
.vol_st .btn.down .xi:before { content:"\e91a" } 
.vol_st .btn.up .xi:before { content:"\e913" } 
.vol_st.st1 { font-size:.875em } 
.vol_st.st1 .inp { width:3em } 

.buy_btn_wrap > .wide{ flex: 1 1 100%; margin-top: 15px;}

.page_search_wrap{}
.page_search_wrap .wrap_in{ background:#fff}
.page_search_wrap .wrap_in .tit{ font-weight:500; font-size:1.063em; display: flex; align-items: center;}

.page_sec_list > li .more{ display: flex; align-items: center;}
.page_sec_list > li .more > .tt{ font-weight: 600;}

/**/
.tab_st1{ padding-bottom:1em}
.tab_st1 > li{ flex:1 1 1%}
.tab_st1 > li > a{ display:flex; justify-content:center; align-items:center; height:3.5em; border:2px solid transparent; background:#f5f5f5; position:relative; font-size:1.125em; font-weight:700; color:#888; box-sizing:border-box}
.tab_st1 > li:not(:first-child):not(.on) > a{ border-left:none; padding-left:2px}
.tab_st1 > li:not(:last-child):not(.on) > a{ border-right:none; padding-right:2px}
.tab_st1 > li:first-child > a{ border-radius:.25em 0 0 .25em}
.tab_st1 > li:last-child > a{ border-radius:0 .25em .25em 0}
.tab_st1 > li.on > a{ border-color:#111; color:#111; background:#fff; z-index:1; box-shadow:0 0 1em rgba(0,0,0,.2); z-index:1}
.tab_st1 > li > a:before{ content:""; position:absolute; left:-3px; top:50%; height:50%; width:1px; background:#ddd; transform:translateY(-50%)}
.tab_st1 > li:first-child > a:before,
.tab_st1 > li.on > a:before{ display:none}
.tab_st1.c1 > li > a{ background:#fff; border-color:#111; color:#111}
.tab_st1.c1 > li:hover > a,
.tab_st1.c1 > li.on > a{ background:#111; color:#fff}
.tab_st1.c2 > li > a{ background:#fff; color:#999; border-top:1px solid #111; border-bottom:1px solid #ddd; border-radius:0; border-left:none; border-right:none; box-shadow:none}
.tab_st1.c2 > li:hover > a,
.tab_st1.c2 > li.on > a{ color:#111; }
.tab_st1.arrow > li.on > a:after{ content:"\e935"; font-family:xeicon; position:absolute; left:50%; top:100%; transform:translate(-50%,-.313em); color:#333}
.tab_st1.arrow.c1 > li.on > a:after{ color:#111}

.tab_inquiry{ padding-bottom: 2em; margin-top: 3.5em;}
.tab_inquiry .gnb{ width: 100%;}
.tab_inquiry .gnb .dp3{ gap: .5em;}
.tab_inquiry .gnb .dp3 > li{ flex: 1 1 1%;}
.tab_inquiry .gnb .dp3 > li > a{ display:flex; width: 8em; justify-content:center; align-items:center; height:3em; border:2px solid transparent; background:#f5f5f5; position:relative; font-size:1.063em; font-weight:600; color:#888; box-sizing:border-box}
.tab_inquiry .gnb .dp3 > li.on > a{ background: var(--siteC); color: #fff; border-color: var(--siteC);}

.tooltipWrap{ position:relative}
.tooltipWrap .tooltip{ position:absolute; background:#fff; border:2px solid #333; bottom:calc(100% + 1em); padding:2em 1.5em; min-width:18em; box-sizing:border-box; display:none; box-shadow:0 0 1em rgba(0,0,0,.1); z-index:3;}
.tooltipWrap.on .tooltip{ display:block}
.tooltipWrap .tooltip:after{ content:""; width:1em; height:1em; border:2px solid #333; position:absolute; left:2.5em; bottom:0; transform:rotate(45deg); transform-origin:left bottom; background:#fff; border-top:none; border-left:none; margin-bottom:-2px}
.tooltipWrap .tooltip .twrap{ margin-bottom:.75em}
.tooltipWrap .tooltip .twrap .t1{ font-weight:700; font-size:1.063em}
.tooltipWrap .tooltip .twrap .t2{ color:#999; font-size:.938em; margin-top:.25em}
.tooltipWrap .tooltip .closeBtn{ position:absolute; right:0; top:0; width:2.5em; line-height:2.5em; text-align:center}
.tooltipWrap .tooltip .closeBtn:before{ font-family:xeicon; content:"\e921"}

.mall_total_wrap{ padding:1em 2em; text-align:right; background:#f5f5f5; border-bottom:1px solid #ddd}

.mall_order_wrap{ position:relative; display: flex; /* gap: 6em; */}
.mall_order_wrap .mall_order_con{ position:relative; z-index:1; width: 70%;}
.mall_order_wrap .mall_order_fix{ /* position:absolute; right:0; top:0; width:100%; display:flex */ display: flex; width: 30%; height: 100%;}
.mall_order_wrap .mall_order_fix .fix_wrap{ width: 100%; background:#fff; margin-left:auto; border:1px solid #ddd; box-sizing:border-box}
.mall_order_wrap .mall_order_fix.on{ position: sticky; top: var(--headH); height: 100%; right: 0;}
body.footerCheck .mall_order_wrap .mall_order_fix.on{ position:absolute; bottom:0; top:auto}
.mall_order_wrap .mall_order_fix .fix_wrap .add_wrap{ background:#f5f5f5; padding:1em 1.5em}
.mall_order_wrap .mall_order_fix .fix_wrap .con_wrap{ padding:1.5em}
.mall_order_wrap .mall_order_fix .fix_wrap .wrap_t1{ font-weight:500}
.mall_order_wrap .mall_order_fix .fix_wrap .wrap_t2{ font-size:.938em; color:#666}
.mall_order_wrap .mall_order_fix .fix_wrap .price_wrap > dl:not(:first-child){ margin-top:.5em}
.mall_order_wrap .mall_order_fix .fix_wrap .price_wrap > dl.line{ border-top:1px solid #ddd; margin-top:1em; padding-top:1em}
.mall_order_wrap .mall_order_fix .fix_wrap .payment_wrap{ border:2px solid #333; padding:.75em 1.5em; margin:1.5em 0}

#joinForm{ overflow: hidden;}

/*board*/
.tt_state{ display:inline-block; font-size:1.125em; padding:.125em .25em; font-weight:700; text-align:center}
.tt_state.c1{ background:#eee; color:#333}
.tt_state.c2{ background:var(--siteC); color:#fff; border-color:transparent}
.tt_state.c3{ background:#333; color:#fff; border-color:transparent}
.tt_state.c4{ background:#fff7f6; color:#e34e38; border-color:transparent}

.tt_star .icon{ position:relative; font-size:1.125em}
.tt_star .icon:before{ content:"★"; color:#ccc}
.tt_star .icon.on:before{ color:#111}
.tt_star .icon.half:after{ content:"★"; color:#111; position:absolute; left:0; top:0; width:55%; overflow:hidden}

.tt_prod{ font-size:1.313em; font-weight:700}
.tt_prod.s1{ font-size:1em; color:#888; font-weight:400; margin-top:.25em}

.tt_price{ line-height:1}
.tt_price .tn{ font-size:1.125em; font-weight:800; margin-top:.125em; vertical-align:baseline; letter-spacing:-.05em}
.tt_price .tn .s1{ font-size:.75em}
.tt_price .tw{ font-size:.938em; margin:0 .25em; vertical-align:baseline; font-weight:700}
.tt_price .tw:first-child{ margin-left:0}
.tt_price .mr{ margin-right:1.5em}
.tt_price .ml{ margin-left:1.5em}
.tt_price.per{ color:red; font-weight:800}
.tt_price.per .xi{ font-size:1em; margin:0 .25em; margin-top:-.188em}
.tt_price.per .xi:before{content:"\e905"}
.tt_price.before{ position:relative; color:#999}
.tt_price.before:after{ content:""; position:absolute; left:0; top:50%; width:100%; height:1px; background:#777; transform:translateY(-.063em)}
.tt_price.before .tn{ font-weight:400}
.tt_price.s1{ font-size:.875em}
.tt_price.s2{ font-size:1.25em}
.tt_price.st1 .tn{ font-size:1.625em}
.tt_price.st2 .tn{ font-size:1.063em; font-weight:400}
.tt_price .tn.s1{ font-size:.938em}
.prod_price > li{ display:inline-block}
.prod_price > li:not(:first-child){ margin-left:1.25em}


.tt_st1 { color:#666 } 
.tt_st2 { font-size:1.063em; font-weight:500 } 

.board_tit{ padding-bottom:.5em;}
.board_tit.mb{ margin-bottom:-1px}
.board_tit .t1{ font-weight:700; font-size:1.5875em}
.board_tit .t2{ font-weight:700; font-size:1.125em}
.board_tit .t3{ font-weight:700; font-size:1.25em}

.fin_wrap{ border:1px solid #ddd; padding:2em 4em 4em 4em; text-align:center; box-sizing:border-box}
.fin_wrap.w1{ width:70em; margin:0 auto; max-width:94%; padding:2em 2em 4em 2em;}
.fin_wrap .fin_icon{ opacity:.1; font-size:4em}
.fin_wrap .fin_tit{ font-weight:300; font-size:2em;}
.fin_wrap .fin_tit:after{ content:""; display:block; margin:.75em auto; width:1em; height:1px; background:#aaa}
.fin_wrap .fin_tt{ color:#888; line-height:1.6}
.fin_wrap .fin_tt.t1{ color:#666; font-size:1.188em}

.fin_wrap.st1{ border:none; padding:0}