@charset "utf-8"; /* CSS Document */ .box0 { width: var(--container-ultra-xxxl); margin: 0 auto; max-width: 96%; } .box1 { width: var(--container-xxxl); margin: 0 auto; max-width: 92%; } .box2 { width: var(--container-xxxl); margin: 0 auto; max-width: 92%; } .PC { display:block } .PHONE { display:none; } .headH { height: var(--headH); } .gnb li.m_hide { display:none !important; } .gnb .layer { display:none !important; } body:not(.pop) { display:flex; flex-direction:column; min-height:100vh; min-height:calc(var(--vh, 1vh) * 100) } #header { position:fixed; top:0; left:0; width:100%; transition: transform .5s, background-color .5s; z-index:999; } #header:before { position: absolute; top: var(--headH); left: 0; width: 100%; height: 1px; background: rgba(255,255,255, 0); content: ''; z-index: 2; transition: .3s ease; } #header .top_wrap { color: #fff; } #header .top_wrap .logo { display: flex; align-items: center; } #header .top_wrap .logo > a { display:block; } #header .top_wrap .logo > a > i { font-size: var(--font-size-xl); font-weight: 800; color: var(--color-black); } #header .top_wrap .logo > a img { height: 40px; object-fit: contain; filter: brightness(0) invert(1); } #header .top_wrap .gnb_wrap .gnb { justify-content:center } #header .top_wrap .gnb_wrap .gnb > li { position:relative; overflow: hidden; height: var(--headH); } #header .top_wrap .gnb_wrap .gnb > li .dp1 { display: flex; align-items: center; height: var(--headH); padding:0 2.5vw; box-sizing:border-box; position:relative; z-index:1 } #header .top_wrap .gnb_wrap .gnb > li .dp1 .va { position:relative } #header .top_wrap .gnb_wrap .gnb > li .dp1 .tt { font-weight:500; font-size: var(--font-size-base); transition: .3s; white-space:nowrap; } #header .top_wrap .gnb_wrap .gnb > li .dp1 .tt:before { position: absolute; bottom: -.25rem; left: 0; width: 0; height: 1px; background: #fff; content: ''; transition: .3s ease; } #header .top_wrap .gnb_wrap .gnb > li:hover .dp1 .tt:before, #header .top_wrap .gnb_wrap .gnb > li.act .dp1 .tt:before { width: 100%; } .scroll #header .top_wrap .gnb_wrap .gnb > li .dp1 .tt:before, #header.gnbOpen .top_wrap .gnb_wrap .gnb > li .dp1 .tt:before { background: var(--color-point); } #header .top_wrap .gnb_wrap .gnb > li .dp2 { display: block; margin: 0 auto; transition: .3s; padding: 1rem .5rem 1rem .5rem; } #header .top_wrap .gnb_wrap .gnb > li .dp2 > li { position: relative; padding: .5rem 0rem; text-align: center; } #header .top_wrap .gnb_wrap .gnb > li .dp2 > li > a { position:relative; display: inline-block; } #header .top_wrap .gnb_wrap .gnb > li .dp2 > li > a > .va > .tt { position:relative; font-weight: 600; font-size: var(--font-size-sm); color: rgba(0,0,0, .515); transition: .3s; } #header .top_wrap .gnb_wrap .gnb > li .dp2 > li > a > .va > .tt:before { position: absolute; content: attr(data-label); top: 0; left: 0; width: 0; height: 100%; color: var(--color-point); white-space: nowrap; transition: all 0.2s ease-in-out; overflow: hidden; z-index: 9; } #header .top_wrap .gnb_wrap .gnb > li .dp2 > li > a > .va > .tt:hover:before { width: 100%; } #header .top_wrap .gnb_wrap .gnb > li .dp2 > li > a > .va > .tt { } #header .top_wrap .gnb_wrap .gnb > li.more:hover .dp1 { } #header .top_wrap .gnb_wrap .gnb > li.more:hover .dp1:after { } #header .top_wrap .gnb_wrap .gnb > li .dp1.layer { display: none; } #header .top_wrap .gnb_wrap .gnb > li .dp3 { display: none; } #header .top_wrap .etc_wrap { display: flex; align-items: center; gap: 2.5rem; } #header .all { } #header .all_btn { width: 1.42rem; height: 3.615rem; justify-content: end; } #header .all_btn > .in { position:relative; width: 1.42rem; height: 1.024rem; display: block; } #header .all_btn .ham, #header .all_btn .ham:before, #header .all_btn .ham:after { display:block; width:100%; height:2px; background: #fff; transition:.2s, background 0s; border-radius: 5px; } #header .all_btn .ham:before, #header .all_btn .ham:after { content:""; position:absolute; right:0; } #header .all_btn .ham:before { top:calc(50% - 1px); width: 60%; } #header .all_btn .ham:after { top:calc(100% - 2px); width:100%; } #header .all:hover .all_btn .ham:before { width: 100%; } #header.gnbOpen { box-shadow:0 4px 1em rgba(0,0,0,.15); } .main #header.gnbOpen { background: #fff; } .sub #header.gnbOpen { background: #fff; } #header.gnbOpen:before { background: rgba(0,0,0, .135); } #header.gnbOpen .gnb_wrap .gnb > li { height:auto; } #header.gnbOpen .top_wrap { color: var(--color-point); } #header.gnbOpen .top_wrap .logo > a img { filter: none; } #header.gnbOpen .all_btn .ham, #header.gnbOpen .all_btn .ham:before, #header.gnbOpen .all_btn .ham:after { background: var(--color-point) } .main.scroll #header { background: #fff; } .sub.scroll #header { background: #fff; } .scroll #header .top_wrap { color: var(--color-point); } .scroll #header .all_btn .ham, .scroll #header .all_btn .ham:before, .scroll #header .all_btn .ham:after { background: var(--color-point) } .scroll #header .top_wrap .logo > a img { filter: none; } .view #header { background: #fff; } .view #header .top_wrap .logo > a img { filter: none; } .view #header .top_wrap { color: var(--color-point); } .view #header .all_btn .ham, .view #header .all_btn .ham:before, .view #header .all_btn .ham:after { background: var(--color-point); } .headN #header { background: #fff; } .headN #header .top_wrap .logo > a img { filter: none; } .headN #header .top_wrap { color: var(--color-point); } .headN #header .all_btn .ham, .headN #header .all_btn .ham:before, .headN #header .all_btn .ham:after { background: var(--color-point); } #header .menu_wrap { display: flex; align-items: center; gap: var(--gap-sm); } #header .menu_wrap > .menu { display: flex; gap: var(--gap-lg); align-items: center; justify-content: center; height: 3.615rem; padding: 0 1.5rem; box-sizing: border-box; background: var(--color-point); border-radius: var(--radius-pill); } #header .menu_wrap > .menu > li { position:relative; } #header .menu_wrap > .menu > li:before { position: absolute; top: 50%; transform: translateY(-50%); right: -.86rem; width: 1px; height: 16px; background: rgba(255,255,255, .8); content: ''; } #header .menu_wrap > .menu > li:last-of-type:before { display: none; } #header .menu_wrap > .menu > li > a { display: flex; align-items: center; gap: var(--gap-xs); color: #fff; } #header .menu_wrap > .menu > li > a > .xi { font-size: var(--font-size-md-1); } #header .menu_wrap > .menu > li > a > .tt { font-size: var(--font-size-sm); font-weight: 600; } #header .menu_wrap > .menu > li > a:hover > .tt { text-decoration: underline; } #header .lang_wrap .lang { position: relative; } #header .lang_wrap .lang .lang_btn { display: flex; align-items: center; justify-content: center; height: 36px; border: 1px solid #fff; border-radius: 100px; padding: 0 1rem; color: #fff; } #header .lang_wrap .lang .lang_btn .tt { font-size: var(--font-size-xs); } #header .lang_wrap .lang .lang_btn .xi { font-size: var(--font-size-sm); margin-left: var(--space-1); } #header .lang_wrap .lang .drop { position: absolute; top: calc(100% + 0.5rem); left: 0; width: 100%; height: 0; transition: 0.3s; overflow: hidden; background: rgba(255, 255, 255, .2); border-radius: 5px; } #header.active .lang_wrap.on .lang .drop, #header.gnbOpen .lang_wrap.on .lang .drop { background: var(--crWhite); border: 1px solid #eee; } #header .lang_wrap.on .lang .drop { height: fit-content; } #header .lang_wrap .lang .drop > li { border-top: 1px solid rgba(0,0,0, .0615); } #header .lang_wrap .lang .drop > li:first-of-type { border-top: none; } #header .lang_wrap .lang .drop > li > a { padding: 0.5rem; display: block; transition: .3s ease; } #header .lang_wrap .lang .drop > li > a:hover { color: var(--color-point2); } #header .lang_wrap .lang .drop > li > a .tt { font-size: var(--font-size-xs); } .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 } #header.gnbOpen .top_wrap { background: #fff; color: var(--color-black-1); } #header.gnbOpen .gnb_wrap .gnb > li .dp2 > li > a .tt { color: rgba(0,0,0, .6); } #header.gnbOpen .gnb_wrap .gnb > li .dp2 > li > a:hover .tt { color: var(--siteC); } #header.gnbOpen .inner { color: var(--color-black-1); } #header.gnbOpen .top_wrap .logo > a img { filter: none; } #header.gnbOpen .gnb_wrap .gnb > li { height:auto; } #header.gnbOpen .gnb_wrap .gnb > li { } #header.gnbOpen .top_wrap .all_btn .ham, #header.gnbOpen .top_wrap .all_btn .ham:before, #header.gnbOpen .top_wrap .all_btn .ham:after { background: var(--color-black-1); } #header.gnbOpen:after { transform: scaleX(1); } #header.gnbOpen .gnb_wrap .gnb > li.act { background: #f7f7f7; } #header .all_wrap .all_layer { position:fixed; top:0; left:0; width:100%; height:100svh; opacity:0; visibility:hidden; overflow: hidden; z-index: 99999999; } #header .all_wrap .siteBg { display: block; width: 50px; height: 50px; background: #fff; border-radius: 50%; position: absolute; left: calc(95% - 20px); top: 50px; z-index: 999999; transform: translate(-50%,-50%) scale(0); transition: all 0.7s ease-in-out } #header .all_wrap .all_layer .all_shape { position:fixed; bottom:-7em; right:-2vw; width:25vw; opacity:.15; } #header .all_wrap .all_layer .all_inner { width: 100%; min-height: 100%; overflow: hidden; position: relative; } #header .all_wrap .all_layer .all_inner .innerCon { position:relative; flex: 1; } #header .all_wrap .all_layer .all_inner .innerGuide { position: relative; display: flex; width: 21%; height: 100vh; padding: 3rem; box-sizing: border-box; opacity: 0; transition: .6s .8s ease; } #header .all_wrap .all_layer .all_inner .innerGuide:before { position: absolute; top: 0; left:0; width: 100%; height: 100%; background: rgba(0,0,0, .615); content: ''; } #header .all_wrap .all_layer .all_inner .innerGuide .logoImg { position: absolute; top: 2.5rem; left: 2.5rem; } #header .all_wrap .all_layer .all_inner .innerGuide .logoImg a > img { filter: var(--crWhitefil); height: 50px; object-fit: contain; } #header .all_wrap .all_layer .all_inner .innerGuide .guideItemWrap { position:relative; margin-top: auto; } #header .all_wrap .all_layer .all_inner .innerGuide .guideItemWrap .item { margin-bottom: 2.5rem; } #header .all_wrap .all_layer .all_inner .innerGuide .guideItemWrap .item:last-of-type { margin-bottom: 0; } #header .all_wrap .all_layer .all_inner .innerGuide .guideItemWrap .item .add { } #header .all_wrap .all_layer .all_inner .innerGuide .guideItemWrap .item .add > .tit { font-size: 1.25rem; font-weight: 600; color: #fff; margin-bottom: .75rem; } #header .all_wrap .all_layer .all_inner .innerGuide .guideItemWrap .item .add > .addtxt { font-size: 1.063rem; line-height: 1.4; font-weight: 400; color: rgba(255,255,255, .915); } #header .all_wrap .all_layer .all_inner .innerGuide .guideItemWrap .item .contact { } #header .all_wrap .all_layer .all_inner .innerGuide .guideItemWrap .item .contact > .mnum { font-size: 1.25rem; font-weight: 800; color: #fff; margin-bottom: .5rem; } #header .all_wrap .all_layer .all_inner .innerGuide .guideItemWrap .item .contact > .conList { } #header .all_wrap .all_layer .all_inner .innerGuide .guideItemWrap .item .contact > .conList > li { font-size: 1.063rem; color: #fff; font-weight: 400; margin-bottom: .35rem; } #header .all_wrap .all_layer .all_inner .innerGuide .guideItemWrap .item .contact > .conList > li:last-of-type { margin-bottom: 0rem; } #header .all_wrap .all_layer .all_inner .innerGuide .guideItemWrap .item .contact > .copyright { } #header .all_wrap .all_layer .all_inner .innerGuide .guideItemWrap .item .copyright > .tt { font-size: 0.963rem; font-weight: 400; color: rgba(255,255,255, .315); } #header .all_wrap .all_layer .all_inner .innerLink { position:relative; height: 80svh; align-items: center; flex: 1; padding: 4vw 8vw 5vw 8vw; box-sizing: border-box; } #header .all_wrap .all_layer .all_inner .innerLink .markBg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #header .all_wrap .all_layer .all_inner .innerLink .markBg > img { height: 40vh; object-fit: contain; opacity: .03; } #header .all_wrap .all_layer .all_inner .innerLink .title { font-size: 3.5vmin; font-weight: 700; text-align: center; color: var(--color-black-1); margin-bottom: 2rem; } #header .all_wrap .all_layer .all_inner .innerLink .linkContainer { width: 100%; height: 100%; overflow-y: scroll; transform: translateY(4rem); opacity: 0; transition-property: transform, opacity; transition-duration: .6s; transition-delay: 1s; transition-timing-function: ease; } #header .all_wrap .all_layer .all_inner .innerLink .linkContainer::-webkit-scrollbar { width: 4px; } #header .all_wrap .all_layer .all_inner .innerLink .linkContainer::-webkit-scrollbar-thumb { background-color: #1e292d; } #header .all_wrap .all_layer .all_inner .innerLink .linkContainer::-webkit-scrollbar-track { background: #fff; } #header .all_wrap .all_layer .all_inner .innerLink .linkContainer .gnb { flex-wrap: wrap; } #header .all_wrap .all_layer .all_inner .innerLink .gnb > li { position:relative; display: flex; align-items: start; padding: 2rem 0; box-sizing: border-box; border-bottom: 1px solid #e8e8e8; width: 100%; } #header .all_wrap .all_layer .all_inner .innerLink .gnb > li:before { position: absolute; top: -1px; left: 0; width: 8vw; height: 2px; background: var(--color-black-1); content: ''; } #header .all_wrap .all_layer .all_inner .innerLink .gnb > li:first-of-type { border-top: 1px solid #e8e8e8; } #header .all_wrap .all_layer .all_inner .innerLink .gnb > li:last-of-type:after { position: absolute; bottom: -1px; left: 0; width: 8vw; height: 2px; background: var(--color-black-1); content: ''; } #header .all_wrap .all_layer .all_inner .innerLink .gnb > li > .dp1 { min-width: 10vw; max-width: 10vw; } #header .all_wrap .all_layer .all_inner .innerLink .gnb > li > .dp1 > .va { } #header .all_wrap .all_layer .all_inner .innerLink .gnb > li > .dp1 > .va > .tt { text-align: left; font-size: 1.35rem; font-weight: 700; color: var(--color-black-1); } #header .all_wrap .all_layer .all_inner .innerLink .gnb > li .dp2 { flex-wrap: wrap; gap: 1rem 2rem; } #header .all_wrap .all_layer .all_inner .innerLink .gnb > li .dp2 > li { position:relative; } #header .all_wrap .all_layer .all_inner .innerLink .gnb > li .dp2 > li:before { position: absolute; top: 50%; transform: translateY(-50%); right: -1rem; width: 1px; height: 10px; background: #ddd; content: ''; } #header .all_wrap .all_layer .all_inner .innerLink .gnb > li .dp2 > li:last-of-type:before { display: none; } #header .all_wrap .all_layer .all_inner .innerLink .gnb > li .dp2 > li:first-of-type { } #header .all_wrap .all_layer .all_inner .innerLink .gnb > li .dp2 > li .va { } #header .all_wrap .all_layer .all_inner .innerLink .gnb > li .dp2 > li .va > .tt { font-size: 1.15rem; font-weight: 600; color: rgba(0,0,0, .315); transition: .3s ease; } #header .all_wrap .all_layer .all_inner .innerLink .gnb > li .dp2 > li .va > .tt:hover { color: var(--color-point); } #header .all_wrap .all_layer .all_inner .innerBg { position:relative; height: 20svh; background: var(--color-point); transform: translateY(-4rem); opacity: 0; transition-property: transform, opacity; transition-duration: .6s; transition-delay: 1s; transition-timing-function: ease; } #header .all_wrap .all_layer .all_inner .innerBg .Bginner { position:relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; height: 100%; padding-left: 8vw; box-sizing: border-box; } #header .all_wrap .all_layer .all_inner .innerBg .Bginner > .title { position:relative; font-size: 3.5vmin; color: #fff; font-weight: 700; opacity: 0; transform: translateX(-2rem); transition-property: transform, opacity; transition-duration: .6s; transition-delay: 1.7s; transition-timing-function: ease; opacity: 0; z-index: 9; } #header .all_wrap .all_layer .all_inner .innerBg .Bginner .bgLink { padding: 1.5rem 2.5rem; background: #fff; border-radius: .5rem; } #header .all_wrap .all_layer .all_inner .innerBg .Bginner .bgLink .title { font-size: 1.315rem; font-weight: 700; margin-bottom: 1rem; } #header .all_wrap .all_layer .all_inner .innerBg .Bginner .bgLink .txt { font-size: 1.063rem; line-height: 1.4; } #header .all_wrap .all_layer .all_inner .innerBg .Bginner .bgImg { position: absolute; right: 0; top: 0; width: 65%; height: 100%; clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%); } #header .all_wrap .all_layer .all_inner .innerBg .Bginner .bgImg:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0, .1); content: ''; } #header .all_wrap .all_layer .all_inner .innerBg .Bginner .bgImg > img { width: 100%; height: 100%; object-fit: cover; } .allGnbOn #header .top_wrap .all .all_btn .in { position:fixed; top:2em; right:3em; width:2.5em; height:2.5em; z-index:999999999; } .allGnbOn #header .top_wrap .all .all_btn .ham { background:transparent; transition:0s; } .allGnbOn #header .top_wrap .all .all_btn .ham:before, .allGnbOn #header .top_wrap .all .all_btn .ham:after { width:100% !important; top:50% !important; margin-top:auto; background: #fff; } .allGnbOn #header .top_wrap .all .all_btn .ham:before { transform:rotate(45deg); } .allGnbOn #header .top_wrap .all .all_btn .ham:after { transform:rotate(-45deg); } .allGnbOn #header .top_wrap .all .siteBg { transform: translate(-50%,-50%) scale(100) } .allGnbOn { overflow-y:hidden } .allGnbOn body { overflow-y:scroll } .allGnbOn #header .top_wrap { color: #111; } .allGnbOn #header .all_wrap .all_layer, .allGnbOn #header .all_wrap .all_layer .all_inner .innerGuide { opacity: 1; visibility: visible; } .allGnbOn #header .all_wrap .all_layer .all_inner .innerLink .linkContainer, .allGnbOn #header .all_wrap .all_layer .all_inner .innerBg { opacity: 1; transform: translateY(0); } .allGnbOn #header .all_wrap .all_layer .all_inner .innerBg .Bginner > .title { opacity: 1; transform: translateX(0); } /*quick*/ #quick_new { position:fixed; z-index:100; bottom:1.5vw; right:1.5vw; text-align:right; transform: translateY(0); transition: .3s ease; } html:not(.scroll) #quick_new { transform: translateY(2rem); opacity: 0; } #quick_new .quick_wrap { position:relative; display: inline-flex; width:3rem; height:3rem; box-sizing:border-box; transition:width .3s; /* overflow:hidden; */ } #quick_new .quick_wrap > .in { position:relative; white-space:nowrap; overflow:hidden; } #quick_new > li:not(:first-child) { margin-top:.5em; } #quick_new > li .quick_wrap:before { content:''; position:absolute; top:0; right:0; width:100%; height:100%; } #quick_new > li .quick_wrap .quick_icon { text-align:center; font-size: 1.063rem; } #quick_new.top { bottom: 320px; padding-bottom: .5em; border-bottom: 1px solid #eee; } #quick_new > li .as_btn { color: #fff; } #quick_new > li .as_btn:before { background: var(--color-point); } #quick_new > li .join_btn { color: #000; } #quick_new > li .join_btn:before { background: #eee; } #quick_new > li .kakao_btn { color:#3b1e1e; } #quick_new > li .kakao_btn:before { background:#fbe300; } #quick_new > li .insta_btn { color: #fff; } #quick_new > li .insta_btn:before { background: radial-gradient( circle at 30% 30%, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5); } #quick_new > li .call_btn { color: var(--color-point); } #quick_new > li .call_btn:before { background: #fff; } #quick_new > li .youtube_btn { color:#fff; } #quick_new > li .youtube_btn:before { background: #ff0033; } #quick_new > li .naver_btn { color:#fff; } #quick_new > li .naver_btn:before { background:#00c63b; border:1px solid #00c63b; } #quick_new > li .goTop { color:#fff; padding:0 !important; } #quick_new > li .goTop:before { background:var(--color-point); border:1px solid transparent; } /*all*/ .vod_wrap { position:relative; width: 100%; height: 100%; } .vod_wrap .vod { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover } .smRound { width: 2rem; height: 2rem; border-radius: 50%; background: var(--color-point); display: flex; align-items: center; justify-content: center; } .smRound > .xi { transform: rotate(-45deg); font-size: var(--font-size-sm); color: #fff; transition: .3s ease; } .smRound.s1 { width: 2.5rem; height: 2.5rem; } .mainTop { display: flex; align-items: end; justify-content: space-between; gap: 10rem; margin-bottom: var(--space-6); } .mainTop.cen{ align-items: center;} .topDesc .desc { font-size: var(--font-size-base); line-height: var(--line-height-normal); } /*main tit*/ .main_tit { margin-bottom: var(--space-6); } .main_tit.mb0 { margin-bottom: 0; } .main_tit .t1 { font-size: var(--font-size-xxl-2); font-family: var(--ff1); font-weight: 300; } .main_tit .t1.ren{ font-family: 'pretendard'; font-weight: 400; font-size: var(--font-size-xl);} .main_tit .t1.en { font-size: var(--font-size-xxxl); } .main_tit .t2 { font-size: var(--font-size-xxl); font-weight: 600; } .main_tit .t3 { font-family: var(--ff1); margin-bottom: var(--space-4); font-size: var(--font-size-md); font-weight: 400; } .main_tit .t4 { font-size: var(--font-size-base); line-height: var(--line-height-loose); margin-top: var(--space-5); } .main_tit .t5 { font-size: var(--font-size-md-1); line-height: var(--line-height-loose); color: var(--color-black-6); margin-top: var(--space-3) } /*main box*/ .main_topCon { margin-bottom: var(--space-6); align-items: end; } .main_box { padding: 6.5rem 0; } .main_box.pt { padding-top: 0; } .main_box.pb { padding-bottom: 0; } .main_box.pN { padding: 0; } /*page tit*/ .page_tit { margin-bottom: var(--space-4); } .page_tit.white { color: #fff; } .page_tit > .t1 { font-size: var(--font-size-xxl-2); font-weight: 600; } .page_tit > .t1.en { font-family: var(--ff1); font-weight: 300; } .page_tit > .t2 { font-size: var(--font-size-xl-1); font-weight: 700; } .page_tit > .t3 { font-size: var(--font-size-lg); font-weight: 700; } .page_tit > .t4 { font-size: var(--font-size-base); line-height: var(--line-height-loose); color: var(--color-black-3); } /*sub-tab*/ .sub-tab { display: flex; flex-wrap: wrap; } .sub-tab > li { width: 10%; } .sub-tab > li > .con { background-color: #f5f0e9; text-align: center; color: var(--color-point4); display: flex; align-items: center; justify-content: center; height: 3rem; cursor: pointer; border: 1px solid #c5c1bf; border-left: none; transition: 0.3s; } .sub-tab > li > .con > .tt { font-weight: 400; } .sub-tab > li.on > .con { background: var(--color-point3); color: #fff; } .sub-tab.tb10 > li:nth-child(10n + 1) > .con { border-left:1px solid #c5c1bf; } .sub-tab.tb10 > li:nth-child(n+11) > .con { border-top:none; } /*footer*/ #footer { z-index:1; padding:4em 0 0 0; background: var(--color-point3); } .main #footer { /* margin-top:12vmin */ padding-top: 6rem; } #footer .wrapF { display:flex; flex-direction:column; gap:.5rem } #footer .logo_wrap { display:flex; align-items:center; gap:5em } #footer .logo_wrap .menu { flex:1; min-width:0 } #footer .logo_wrap .ch { } #footer .logo img { height:3rem; filter: var(--crWhitefil); } #footer .menu { display:flex; gap:3em } #footer .menu > li > a { display:block; position:relative; opacity:.7; font-size:.938em; color: #fff; } #footer .menu > li.point > a { opacity:1; font-weight:700 } #footer .info_wrap { display:flex; align-items: center; gap:4em; flex:1; min-width:0; padding-bottom:1.5em } #footer .info { overflow:hidden } #footer .info > li { float:left; margin-right:2em; margin-bottom:.375em; opacity:.7; color: #fff; position:relative; font-size:.875em } #footer .info > li:before { content:""; position:absolute; left:-1em; height:70%; top:50%; transform:translateY(-50%); width:1px; } #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 .info > li.btn .ico { font-size:1em; transition:.3s } #footer .info.on > li.btn .ico { transform:rotate(180deg) } #footer .info:not(.on) > li.hd { display:none } #footer .cs_wrap { margin-left:auto; display:flex; gap:0 4em } #footer .cs_wrap > .in { position:relative; top: -2rem; display:flex; flex-direction:column; gap:.75em; padding:0 1em } #footer .cs_wrap > .in:not(:first-child):after { content:""; position:absolute; left:-2em; top:0; width:1px; height:100% } #footer .cs_wrap .tit .t1 { font-weight:400; font-family:var(--ff1); font-size:1.25em; color: #fff; } #footer .cs_wrap .tit .t1.tori { font-family: 'pretendard'; } #footer .cs_wrap .con { display:flex; flex-direction:column; gap:.25em; } #footer .cs_wrap .con .t1 { font-size: var(--font-size-md-1); color: #fff; } #footer .cs_wrap .con .t2 { font-size: var(--font-size-xs); color:rgba(255,255,255, .715); } #footer .copy_wrap { border-top:1px solid rgba(255,255,255,.1); padding:1.5em 0 } #footer .copy_wrap .copyright { font-size:.938em; font-family:var(--ff1); opacity:.8; color: #fff; font-weight:500 } /*contents*/ .main #contents { background: #fff; } #contents .doc { padding: 4.5rem 0 10rem 0 } .dp1_product #contents .doc{ padding: 2.5rem 0 10rem 0;} .view #contents .doc, .headN #contents .doc { padding: 7rem 0 10rem 0; } #contents .doc.pb0 { padding-bottom: 0rem; } #contents .doc.pt0 { padding-top: 0rem; } #contents .doc.pN { padding: 0rem; } #contents .sub_top_wrap { position:relative; height: 40svh; margin: 0 auto; transition: 1s ease; } #contents .sub_top_wrap:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0, .215); content: ''; z-index: 1; } #contents .sub_top_wrap .wrapBg { position:absolute; top: 0; left: 0; width:100%; height:100%; background-color:#f1f1f1; overflow:hidden } #contents .sub_top_wrap .wrapBg .bg { height:100%; transform: scale(1.1); transition: transform 3.4s ease; } #contents .sub_top_wrap .wrapCon { position:relative; width: 100%; height: 100%; z-index: 2; } #contents .sub_top_wrap .wrapCon .subTit { display: flex; align-items: center; width: 100%; height: 100%; } #contents .sub_top_wrap .wrapCon .subTit .titCon { display: flex; align-items: end; gap: .25rem; /* color: var(--color-point4); */ color: #fff; } #contents .sub_top_wrap .wrapCon .subTit .titCon .en { font-size: var(--font-size-xxxl); line-height: 1; font-family: var(--ff1); font-weight: 200; } #contents .sub_top_wrap .wrapCon .subTit .titCon .kn { font-size: var(--font-size-md-1); font-weight: 500; letter-spacing: -1px; line-height: 1; } .load #contents .sub_top_wrap .wrapBg .bg { transform: scale(1); } #contents .sub_top_wrap .wrapBg:after { /* content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:#000; opacity:.315; */ } #contents .sub_top_wrap .subTab { width: 100%; flex: 1; } #contents .sub_top_wrap .subTab .gnb { } #contents .sub_top_wrap .subTab .gnb > li { } #contents .sub_top_wrap .subTab .gnb > li.on { display: flex; } #contents .sub_top_wrap .subTab .gnb > li > .dp2 { display:inline-flex; flex-wrap:wrap; width: 100%; } #contents .sub_top_wrap .subTab .gnb > li > .dp2 > li { position:relative; flex:1; min-width:0; max-width: 10vw; } #contents .sub_top_wrap .subTab .gnb > li > .dp2 > li:before { position: absolute; top: 0; left: 0; height: 2px; width: 100%; transform: scaleX(0); background: #fff; opacity: 0; visibility: hidden; transition: .5s ease; content: ''; } #contents .sub_top_wrap .subTab .gnb > li > .dp2 > li > a { height:5.25rem; display:flex; align-items:center; justify-content:center; color:#fff; box-sizing:border-box; position:relative } #contents .sub_top_wrap .subTab .gnb > li > .dp2 > li > a:before { content:""; position:absolute; right:0; top:50%; height:30%; transform:translateY(-50%); background:#fff; width:1px; opacity:.2; display: none; } #contents .sub_top_wrap .subTab .gnb > li > .dp2 > li > a .va { display:flex; align-items:center; line-height:1.1; position:relative; transition:.3s ease; word-break:keep-all; text-align:center } #contents .sub_top_wrap .subTab .gnb > li > .dp2 > li > a .va .tt { font-weight:700; font-size: var(--font-size-base); color: rgba(255,255,255, .715); transition: .3s ease; } #contents .sub_top_wrap .subTab .gnb > li > .dp2 > li:hover:before, #contents .sub_top_wrap .subTab .gnb > li > .dp2 > li.on:before { opacity: 1; visibility: visible; transform: scaleX(1); } #contents .sub_top_wrap .subTab .gnb > li > .dp2 > li:hover a .va .tt, #contents .sub_top_wrap .subTab .gnb > li > .dp2 > li.on a .va .tt { color: #fff; } #contents .sub_page_menu { margin-top: var(--space-5) } #contents .sub_page_menu .gnb { display: flex; gap: 2rem; padding-right: 6.5rem; } #contents .sub_page_menu .gnb .dp2 { display: flex; gap: 2.5rem; } #contents .sub_page_menu .gnb .dp2 > li { } #contents .sub_page_menu .gnb .dp2 > li > a { } #contents .sub_page_menu .gnb .dp2 > li > a .tt { position:relative; font-size: var(--font-size-base); font-weight: 500; opacity: .465; transition: .3s ease; } #contents .sub_page_menu .gnb .dp2 > li > a .tt:before { position: absolute; bottom: -.25rem; left: 0; width: 100%; height: 1px; background: var(--color-point); content: ''; opacity: 0; transition: .3s ease; } #contents .sub_page_menu .gnb .dp2 > li > a .in { position:relative; padding:0 .5em; } #contents .sub_page_menu .gnb .dp2 > li:hover > a .tt:before, #contents .sub_page_menu .gnb .dp2 > li.on > a .tt:before { opacity: 1; } #contents .sub_page_menu .gnb .dp2 > li:hover > a .tt, #contents .sub_page_menu .gnb .dp2 > li.on > a .tt { opacity: 1; } #contents .nav { align-items: center; justify-content: center; margin-bottom: 1.5rem; display: flex; opacity: 0; transition: 1s ease; transform: translateX(2rem); } .load #contents .nav { opacity: 1; transform: translateX(0); } #contents .nav > li { position:relative; padding:0 1em; color:#fff; } #contents .nav > li:before { position:absolute; left:0; top:50%; transform:translateY(-50%); width: 4px; height: 4px; background: #fff; border-radius: 50%; content: ''; } #contents .nav > li:first-child:before { display:none; } #contents .nav > li { color:#fff; font-weight:600; } #contents .nav > li > * { display:block; } #contents .nav > li.home { padding-left: 0; } #contents .nav > li.home .xi { font-size:1.125rem; } #contents .nav > li .tt { font-size: var(--font-size-base); } #contents .subpageTit { padding-top: 3rem; } #contents .subpageTit .sub_tit { font-size: 2.815rem; text-align: center; font-weight: 700; color: var(--color-point); } .scroll #contents .sub_top_wrap { width: 100%; } /*product search*/ .prosearchCon { /* position: relative; padding: 3.5rem; box-sizing: border-box; background: var(--color-point3); border-radius: var(--radius-md); */ } .prosearchCon .colBg { position: absolute; top: 0; width: 15rem; height: 100%; } .prosearchCon .colBg.lf { left: 0rem; } .prosearchCon .colBg.rf { right: 0rem; } .prosearchCon .colBg > img { width: 100%; height: 100%; object-fit: contain; filter: var(--crWhitefil); opacity: .03; } .prosearchCon .searchBg { position: absolute; right: 0; top: -15svh; width: 30svw; } .prosearchCon .searchBg > img { filter: var(--crWhitefil); opacity: 0.035; } .prosearchCon .find_WrapCon { position: relative; width: 45svw; margin: 0 auto; } .find_WrapCon{ display: flex; align-items: center; justify-content: end;} .dp1_product .find_WrapCon{ margin-bottom: var(--space-5);} #findPro { position:relative; width: 15rem;} #findPro .input_st { position: relative; border-radius: 0; width: 100%; /* height: 4.35rem; border-radius: var(--radius-pill); */ height: 3.15rem; border: 1px solid transparent; /* background: var(--color-gray-2); padding: 0 6rem 0 2rem; box-sizing: border-box; */ padding: 0 1rem 0 0; border-bottom: 2px solid #111; } #findPro .input_st::placeholder { font-size: var(--font-size-sm); font-weight: 500; color: var(--color-black-9); } #findPro .sech { position: absolute; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; /* background: var(--color-point2); */ right: .4rem; top: 50%; border-radius: var(--radius-pill); transform: translateY(-50%); border: none; background: transparent;} #findPro .sech > .xi { /* color: #fff; */ font-size: var(--font-size-md); } .prosearchCon .tag_wrap { display: flex; align-items: start; gap: var(--gap-lg); padding-top: var(--space-4); } .prosearchCon .tag_wrap .best_sch { display: flex; gap: var(--gap-sm); align-items: center; } .prosearchCon .tag_wrap .best_sch > .c_plus { display: flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--color-point2); color: #fff; } .prosearchCon .tag_wrap .best_sch > .c_tit { font-size: var(--font-size-md-1); font-weight: 600; color: var(--color-point2); } .prosearchCon .tag_wrap .tag_list { display: flex; align-items: center; gap: var(--gap-md); } .prosearchCon .tag_wrap .tag_list > li { } .prosearchCon .tag_wrap .tag_list > li > .tt { font-size: var(--font-size-base); color: rgba(255,255,255, .715); } /*product cate*/ .subProCate { display: flex; flex-wrap: wrap; gap: .5rem; /* margin-top: var(--space-3); */ margin-bottom: var(--space-5); } .subProCate > li { width: calc((100% - 3rem) / 7); } .dp1_gallery .subProCate > li { width: calc((100% - 2.5rem) / 6); } .subProCate > li > .con { display: flex; align-items: center; cursor: pointer; justify-content: space-between; padding: .75rem 1.25rem; box-sizing: border-box; background: rgba(0,0,0, .8); border-radius: .25rem; transition: .3s ease; } .subProCate > li > .con > .tt { color: #fff; font-size: var(--font-size-sm); font-weight: 600; } .subProCate > li > .con > .xi { color: #fff; } .subProCate > li.on > .con { background: var(--color-point4); } .Prodetail { display: flex; flex-wrap: wrap; gap: 1.5rem; } .Prodetail > li { } .Prodetail > li > .con { cursor: pointer; transition: .3s ease; } .Prodetail > li > .con > .tt { position:relative; font-size: var(--font-size-sm); font-weight: 600; color: var(--color-black-8); line-height: 1; } .Prodetail > li > .con > .tt:before { position: absolute; left: -.3rem; top: -.3rem; width: 5px; height: 5px; background: var(--color-point4); border-radius: var(--radius-pill); content: ''; opacity: 0; } .Prodetail > li.on > .con { } .Prodetail > li.on > .con > .tt:before { opacity: 1; } .Prodetail > li.on > .con > .tt { color: var(--color-point4); } /*product list*/ .productListContainer { } .productTop { gap: 3rem; align-items: end; margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid #ddd; } .productTop .result { display: flex; align-items: end; gap: .35rem; } .productTop .result .num { position: relative; top: 4px; font-size: var(--font-size-xl); line-height: 1; font-weight: 700; color: var(--color-point4); } .productTop .result .tt { font-size: var(--font-size-base); font-family: var(--ff1); line-height: 1; font-weight: 400; color: var(--color-black-6); } .productTop .option { display: flex; gap: 2.5rem; align-items: center; } .productTop .option > li { } .productTop .option > li > .tt { font-size: var(--font-size-sm); cursor: pointer; font-weight: 500; line-height: 1; color: var(--color-black-10); } .productTop .option > li.on > .tt { color: var(--color-point); } .pro_box_wrapper { } .pro_box_wrapper .pro_wrapIn { margin-bottom: 6rem; } .pro_box_wrapper .pro_wrapIn:first-of-type { margin-top: 2.5rem; } .pro_box_wrapper .pro_wrapIn:last-of-type { margin-bottom: 0; } .pro_box_wrapper .pro_wrapIn .proDtit { font-size: var(--font-size-lg-2); font-weight: 700; color: var(--color-point); line-height: 1; margin-bottom: var(--space-4); } .pro_box_wrapper .cateImgList{ margin-top: var(--space-6);} .pro_box_wrapper .cateImgList .cateList{ display: flex; flex-wrap: wrap; gap: 1rem;} .pro_box_wrapper .cateImgList .cateList > li{ width: calc((100% - 1rem) / 2); } .pro_box_wrapper .cateImgList .cateList > li > a{ position:relative; width: 100%; height: 47.5dvh;} .pro_box_wrapper .cateImgList .cateList > li > a:before{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0, .35); content: ''; z-index: 1; opacity: 0; transition: .3s ease;} .pro_box_wrapper .cateImgList .cateList > li > a > .imgCon{ width: 100%; height: 100%;} .pro_box_wrapper .cateImgList .cateList > li > a > .imgCon > img{ width: 100%; height: 100%; object-fit: cover;} .pro_box_wrapper .cateImgList .cateList > li > a:hover:before{ opacity: 1;} .pro_box_container { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: .6rem 1rem; } .pro_box_container .probox { position:relative; width: 100%; } .pro_box_container .probox > .label_st { position:absolute; top: .5rem; left: .5rem; color: #fff; display: block; width: fit-content; z-index: 9;} .pro_box_container .probox > .label_st input:checked ~ .xi:before{ color: #fff !important;} .pro_box_container .probox > .label_st > .xi { position:relative; margin-right: 0; right: .2rem; } .pro_box_container .probox > .inner { position:relative; display: block; background: #000; height: 17rem; } .pro_box_container .probox > .inner > .imgCon { position:relative; width: 100%; height: 14rem; } .pro_box_container .probox > .inner > .imgCon > img { width: 100%; height: 100%; object-fit: contain; } .pro_box_container .probox > .inner > .pName { display: flex; gap: .15rem; align-items: center; justify-content: center; height: 3rem; padding: 0 1.5rem; background: #fff; box-sizing: border-box; } .pro_box_container .probox > .inner > .pName > .tt { position:relative; top: -.2rem; color: #fff; font-size: var(--font-size-base); font-weight: 500; color: #000; } .rentalQuick_container .pro_box_container .probox > .inner > .pName > .tt{ top: 0;} .pro_box_container .probox > .inner > .pName > .value { position:relative; top:-.2rem; color: #000; font-size: var(--font-size-base); font-weight: 400; margin-left: .25rem; } .pro_box_container .probox.tall-box { grid-row: span 2; } .pro_box_container .probox.tall-box > .inner { height: 35rem; } .pro_box_container .probox.tall-box > .inner > .imgCon { height: 32rem; } .pro_box_container .probox > .inner:hover > .pName > .tt { text-decoration: underline; } .pro_box_wrapper.rental .probox .inner .hoverTit { position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: rgba(0,0,0, .45); content: ''; z-index: 1; opacity: 0; transition: .3s ease; } .pro_box_wrapper.rental .probox .inner .hoverTit > .tt { position:relative; font-size: var(--font-size-md); font-weight:700; color: #fff; z-index: 2; } .pro_box_wrapper.rental .probox .inner:hover .hoverTit { opacity: 1; } .add_Infobox { display: inline-flex; gap: var(--gap-xs); padding: .75rem 1rem; background: var(--color-bg-1); align-items: center; margin-bottom: var(--space-3); } .add_Infobox > .xi { color: var(--color-error); } .add_Infobox span { font-size: var(--font-size-sm); font-weight: 500; line-height: 1; } .add_Infobox span > i { color: var(--color-error); font-weight: 600; vertical-align: baseline; } /*rental_pop*/ html.pop .popWrap.poprental { width: 60vw; } .popWrap.poprental .popTit { display: flex; align-items: center; justify-content: space-between; } .popWrap.poprental .popTit > .tt { font-size: var(--font-size-lg); font-weight: 700; } .popWrap.poprental .renpop_pro_container { padding: 2.5rem; box-sizing: border-box; background: #fff; max-height: 80vh; overflow-y: scroll; } .popWrap.poprental .renpop_pro_container .productTop { margin-top: 0; padding-top: 0; margin-bottom: var(--space-3); border-top: none; } .popWrap.poprental .page_btn { width: 100%; padding: 2rem 2.5rem; background: #fff; box-sizing: border-box; } .popWrap.poprental .page_btn .in { display: flex; gap: 1rem; width: 100%; } .popWrap.poprental .renpop_pro_container .inner { cursor: default; } .proview_wrapper { padding-top: 3.25rem; } .proview_container { display: flex; } .proview_container .proImgCon { display: flex; align-items: center; justify-content: center; width: 45%; background: #000; height: 90vh; } .proview_container .proImgCon > .proImg { position:relative; width: 100%; height: 100%; padding: 2.5rem; box-sizing: border-box; } .proview_container .proImgCon > .proImg > img { width: 100%; height: 100%; object-fit: contain; } .proview_container .proInfoCon { width: 32rem; margin: 0 auto; box-sizing: border-box; } .proview_container .proInfoCon .proInfoT { padding-bottom: var(--space-4); margin-bottom: var(--space-4); border-bottom: 1px solid #ddd; } .proview_container .proInfoCon .proInfoT .cate { font-size: var(--font-size-sm); color: var(--color-black-10); } .proview_container .proInfoCon .proInfoT .tit { font-size: var(--font-size-lg); font-weight: 400; font-family: var(--ff1); margin-top: var(--space-2); } .proview_container .proInfoCon .proInfoT .pnum { font-size: var(--font-size-sm-1); font-weight: 400; margin-top: var(--space-2); } .proview_container .proInfoCon .proMid { } .proview_container .proInfoCon .proMid > .desc { font-size: var(--font-size-sm-1); line-height: var(--line-height-normal); } .proview_container .proInfoCon .proMid .proBtn { display: flex; gap: .25rem; align-items: center; margin-top: var(--space-5); } .proview_container .proInfoCon .proMid .proBtn .b1 { width: 10vw; } .proview_container .proInfoCon .proMid .proBtn .b2 { flex: 1; } .proview_container .proInfoCon .proBtm { margin-top: var(--space-5); } .proview_container .board_faq { border-top: 1px solid #ddd; } .proview_container .board_faq > li { } .proview_container .board_faq > li .wrap_in { position:relative; display:flex; align-items:center; gap:0 2rem; border-bottom:1px solid #ddd; line-height: var(--line-height-normal); } .proview_container .board_faq > li:first-of-type .wrap_in { } .proview_container .board_faq > li .wrap_in > * { min-width:0; } .proview_container .board_faq > li .wrap_in .tit { width:5rem; text-align:center; } .proview_container .board_faq > li .wrap_in .tit .tt { font-size: var(--font-size-xl); font-weight: 600; color: var(--color-point2); } .proview_container .board_faq > li .wrap_in .tit .tt.c1 { } .proview_container .board_faq > li .wrap_in .tit .tt.c2 { color:#042d5c; } .proview_container .board_faq > li .wrap_in .sbj { flex:1; } .proview_container .board_faq > li .wrap_in .sbj .tt { display:block; font-size: var(--font-size-sm-1); font-family: var(--ff1); font-weight: 400; line-height:1.5; } .proview_container .board_faq > li .wrap_in .con { flex:1; } .proview_container .board_faq > li .wrap_in .con .tt { font-size: var(--font-size-sm-1); } .proview_container .board_faq > li .wrap_in .ico { position:absolute; right:0; top:50%; text-align:center; transform:translateY(-50%); } .proview_container .board_faq > li .wrap_in .ico .arrow { font-size:1.25em; transition:.3s; } .proview_container .board_faq > li .wrap_in .ico .arrow:before { content:"\e942"; } .proview_container .board_faq > li .faqTit .wrap_in { padding:1rem 2rem 1rem 0; } .proview_container .board_faq > li .faqCon { height:0; overflow:hidden; opacity:0; visibility:hidden; transition:.3s; } .proview_container .board_faq > li .faqCon .wrap_in { align-items:flex-start; } .proview_container .board_faq > li.on .faqTit .wrap_in { } .proview_container .board_faq > li.on .faqTit .wrap_in .ico .arrow { transform:rotate(-180deg); } .proview_container .board_faq > li.on .faqCon { height:auto; overflow:visible; opacity:1; visibility:visible; } .proview_container .board_faq > li.on .faqCon .wrap_in { padding: 1rem 0; transition:.3s; } /*rental_quick*/ #rental_quick { position: fixed; z-index: 999; top: 60%; right: 0; transform: translateY(-50%); transition: .35s; } #rental_quick .rentalQuick_container { position:relative; width: 200px; } #rental_quick .rentalQuick_container .pro_box_container { } #rental_quick .rentalQuick_container .pro_box_container .nocon { width: 100%; background: #fff; } #rental_quick .rentalQuick_container .pro_box_container .nocon p { font-size: var(--font-size-sm-1); } #rental_quick .rentalQuick_container .pro_box_container .nocon .xi { font-size: var(--font-size-xxl); } #rental_quick .rentalQuick_container .rentop { display: flex; align-items: center; justify-content: space-between; padding: 0 1rem; box-sizing: border-box; height: 3rem; background: var(--color-point); color: #fff; } #rental_quick .rentalQuick_container .rentop > .tt { font-size: var(--font-size-sm-1); font-weight: 600; } #rental_quick .rentalQuick_container .rentop .renListAll { display: flex; align-items: center; gap: .25rem; cursor: pointer; } #rental_quick .rentalQuick_container .rentop .renListAll > .tt { font-size: var(--font-size-xxxs); color: rgba(255,255,255, .8); font-weight: 400; } #rental_quick .rentalQuick_container .rental_list { display: flex; flex-wrap: wrap; gap: 0; background: #000; } #rental_quick .rentalQuick_container .rental_list .probox { width: 50%; } #rental_quick .rentalQuick_container .rental_list .probox > .inner { height: 7rem; cursor: pointer; border-right: 1px solid rgba(255,255,255, .2); border-top: 1px solid rgba(255,255,255, .2); } #rental_quick .rentalQuick_container .rental_list .probox:nth-child(1) > .inner, #rental_quick .rentalQuick_container .rental_list .probox:nth-child(2) > .inner { border-top: none; } #rental_quick .rentalQuick_container .rental_list .probox:nth-child(2n) > .inner { border-right: none; } #rental_quick .rentalQuick_container .rental_list .probox > .inner > .imgCon { height: 6rem; } #rental_quick .rentalQuick_container .rental_list .probox > .inner > .pName { height: 1rem; padding: 0 .5rem; } #rental_quick .rentalQuick_container .rental_list .probox > .inner > .pName > .tt { font-size: var(--font-size-sm-1); } #rental_quick .rentalQuick_container .renmore { display: flex; align-items: center; justify-content: center; background: #222; padding: .35rem 0; } #rental_quick .rentalQuick_container .renmore .ellcen { position:relative; display: flex; align-items: center; justify-content: center; } #rental_quick .rentalQuick_container .renmore .ellcen > .xi { color: rgba(255,255,255, .8); font-size: var(--font-size-xs); } #rental_quick .rentalQuick_container .renmore .ellcen > .num { color: rgba(255,255,255, .8); font-size: var(--font-size-xxs); font-weight: 500; } #rental_quick .rentalQuick_container .rentalB { display: flex; width: 100%; align-items: center; height: 3rem; justify-content: center; background: #2b1a0a; color: #fff; } #rental_quick .rentalQuick_container .rentalB > .tt { font-size: var(--font-size-sm); font-weight: 600; } /*product view*/ .popWrap .proView_container { position: relative; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; } .popWrap .proView_container .proTit { position: absolute; top: 0; left: 0; width: 100%; height: 4rem; padding: 0 2rem; display: flex; justify-content: space-between; align-items: center; box-sizing: border-box; background: rgba(0,0,0, .25); backdrop-filter: blur(10px); } .popWrap .proView_container .proTit .interaction_wrap { display: flex; gap: var(--gap-md); color: #fff; align-items: center; } .popWrap .proView_container .proTit .interaction_wrap .popClose, .popWrap .proView_container .proTit .interaction_wrap .expand_btn { cursor: pointer; } .popWrap .proView_container .proTit > .swiperControl { } .popWrap .proView_container .proTit > .swiperControl .swiper-pagination { position: relative; } .popWrap .proView_container .proTit > .swiperControl .swiper-pagination > .total-slide { font-size: var(--font-size-base); font-weight: 600; color: #fff; line-height: 1; } html.pop .popWrap.gallery { display: unset; width: unset; height: unset; margin: unset; max-width: unset; } .popWrap.gallery .productViewSlide_wrap { position:relative; display: flex; align-items: center; justify-content: center; width: 100vw; height: 85vh; margin: 0 auto; } .popWrap.gallery .productViewSlide_wrap .productViewSlider_control { position: absolute; width: 100%; height: 100%; } .popWrap.gallery .productViewSlide_wrap .swiperBtn { position: absolute; top: 50%; transform: translateY(-50%); width: 5rem; height: 5rem; } .popWrap.gallery .productViewSlide_wrap .swiperBtn.prev { left: 8vw; } .popWrap.gallery .productViewSlide_wrap .swiperBtn.next { right: 8vw; } .popWrap.gallery .productViewSlide_wrap .swiperBtn:before { font-size: 3.5rem; } .popWrap.gallery .productViewSlide_wrap .productViewSlider { position:relative; overflow: visible; height: 100%; -webkit-tap-highlight-color: transparent; display: flex; flex-direction: column; justify-content: center; align-items: center; } .popWrap.gallery .productViewSlide_wrap .productViewSlider .el { display: flex; align-items: center; } .popWrap.gallery .productViewSlide_wrap .productViewSlider:focus { outline: none !important; } .popWrap.gallery .productViewSlide_wrap .productViewSlider .view_container { display: flex; flex-direction: column; align-items: center; justify-content: center; max-height: 100%; width: 100%; } .popWrap.gallery .productViewSlide_wrap .productViewSlider .imgCon { position: relative; margin: 0 auto; display: flex; justify-content: center; flex-direction: column; width: 100%; max-width: 35vw; flex-shrink: 1; min-height: 0; } .popWrap.gallery .productViewSlide_wrap .productViewSlider .imgCon > img { width: 100%; max-height: 80dvh; object-fit: contain; } .popWrap.gallery .productViewSlide_wrap .productViewSlider .proName { position: relative; justify-content: center; display: flex; gap: .25rem; align-items: center; text-align: center; margin-top: var(--space-1); } html.backUp .popWrap.gallery .productViewSlide_wrap .productViewSlider .proName > .tt { font-size: var(--font-size-xl); } html.backUp .popWrap.gallery .productViewSlide_wrap .productViewSlider .proName > .value { font-size: var(--font-size-xl); margin-left: 1rem;} .popWrap.gallery .productViewSlide_wrap .productViewSlider .proName{ margin-top: var(--space-1);} .popWrap.gallery .productViewSlide_wrap .productViewSlider .proName > .tt{ color: #fff; font-size: var(--font-size-lg); font-weight: 500; line-height: 1;} .productViewSlide_wrap .productViewSlider .proName > .value{ color: #fff; font-size: var(--font-size-lg); margin-left: .25rem; line-height: 1; font-weight: 400; } /*sub inquiry*/ #inquiryForm { border-top: 2px solid var(--color-black-1); } #inquiryForm .formCon { display: flex; gap: var(--gap-xl); justify-content: space-between; align-items: start; padding: 3.5rem 2rem; border-bottom: 1px solid var(--gray-line); } #inquiryForm .formCon > .formTit { width: 40%; } #inquiryForm .formCon > .formTit > .tt { font-size: var(--font-size-xl-1); font-weight: 700; line-height: 1; } #inquiryForm .formCon > .formWrap { width: 60%; } #inquiryForm .pro_box_container .probox > .inner { cursor: default; } .formWrap { } .formWrap .form { display: flex; flex-wrap: wrap; gap: var(--gap-sm); } .formWrap .form > li { position: relative; width: 100%; } .formWrap .form > li .select-wrapper { width: 100%; } .formWrap .form > li .inp_wrap { position:relative; display: flex; gap: var(--gap-lg); } .formWrap .form > li .inp_wrap .input_st:not(textarea) { height:4rem; } .formWrap .form > li .inp_wrap .input_st[type=file] { padding-top: 1rem; } .formWrap .form > li .inp_wrap .input_st::placeholder { color: var(--color-black-9); font-weight: 500; font-size: var(--font-size-sm); } .formWrap .form > li .inp_wrap .tit { width: 10rem; height: 4rem; display: flex; align-items: center; } .formWrap .form > li .inp_wrap .tit .tt { font-size: var(--font-size-base); font-weight:600; } .formWrap .form > li .inp_wrap .input_st:not(textarea) { width:100%; } .formWrap .form > li .inp_wrap textarea.input_st { width: 100%; padding-top: var(--space-3); height:12rem; } .formWrap .form > li .inp_wrap .input_st { position: relative; display: flex; align-items: center; border:none; background: var(--color-gray-4); border-radius: var(--radius-sm); padding: .5rem 1.25rem; outline: 2px solid transparent; transition: all .4s ease-in-out; } .formWrap .form > li .inp_wrap .input_st:focus { outline: 2px solid var(--color-point2); } .formWrap .form > li .inp_wrap input:-webkit-autofill { box-shadow: 0 0 0 1000px rgba(255,255,255, .5) inset !important; background-color: transparent !important; } .formWrap .form > li .inp_wrap .div_field { display: flex; gap: var(--gap-sm); align-items: center; width: 100%; } .formWrap .form > li .inp_wrap .div_field .input_st { flex: 1; } .formWrap .form > li .inp_wrap .div_field .hypen { text-align:center; font-weight: 600; font-size: var(--font-size-base); } .formWrap .form > li .inp_wrap .email_field .select-wrapper { width: 12rem; } .select-wrapper { position:relative; } .select-wrapper:before { position: absolute; top: 50%; right: 1.5rem; transform: translateY(-50%); font-size: 1.5rem; transition: all .4s ease-in-out; font-family: 'xeicon'; z-index: 2; color: var(--color-point2); content: '\e936' } .select-wrapper:focus-within::before { content: '\e930'; } .formWrap .form > li .inp_wrap .div_field { display: flex; gap: var(--gap-sm); flex-wrap: wrap; align-items: center; width: 100%; } .formWrap .form > li .inp_wrap .div_field .divC { display: flex; gap: var(--gap-sm); } .formWrap .form > li .inp_wrap .div_field .input_st { flex: 1; } .formWrap .form > li .inp_wrap .div_field .find { background: var(--color-point); color: #fff; width: fit-content; } .formWrap .form > li .inp_wrap .div_field .hypen { text-align:center; font-weight: 600; font-size: var(--font-size-base); } .formWrap .form > li .inp_wrap .address_field .input_st { flex: unset; } .formWrap .form > li .inp_wrap .email_field .select-wrapper { width: 12rem; } .form_label_wrap { width: 100%; height: 100%; align-items: center; } .form_label_wrap > li { box-sizing:border-box; margin-right: 3em; } .form_label_wrap > li .smT { font-size: var(--font-size-sm-1); color: var(--color-point3); margin-top: var(--space-1); } .form_label_wrap > li:last-of-type { margin-right: 0em; } .form_label_wrap.st1 > li { flex:1 0 100%; max-width: 100%; } .form_label_wrap.st2 > li { flex:1 0 25%; max-width: 25%; } .form_label_wrap.st3 > li { flex:1 0 16.66%; max-width: 16.66%; } /*greeting*/ .greeting_wrapper { display: flex; gap: 10rem; justify-content: space-between; align-items: center; } .greeting_wrapper .left { width: 50%; overflow: hidden; } .greeting_wrapper .left > .imgCon { width: 100%; height: 80svh; } .greeting_wrapper .left > .imgCon > img { width: 100%; height: 100%; object-fit: cover; } .greeting_wrapper .right { width: 50%; } .greeting_wrapper .right > .txtTop { margin-bottom: .5em } .greeting_wrapper .right > .txtTop > .tit { font-size: var(--font-size-xl-1); font-weight: 600; } .greeting_wrapper .right > .txtTop > .sub_tit { font-size: var(--font-size-xxl); margin-bottom: var(--space-5); font-family: var(--ff1); margin-top: var(--space-3); font-weight: 300; } .greeting_wrapper .right > .txtArea { } .greeting_wrapper .right > .txtArea > .tt { font-size: var(--font-size-base); /* word-break: break-all; */ color: var(--color-black-6); line-height: var(--line-height-normal); margin-bottom: var(--space-2); } .greeting_wrapper .right > .txtArea > .tt:last-of-type { margin-bottom: 0em; } .greeting_wrapper .right > .txtArea > .ceo { font-size: var(--font-size-md-1); line-height: 1; font-weight: 500; margin-top: 2rem; align-items: end; margin-right: 20px; } .greeting_wrapper .right > .txtArea > .ceo > i { font-size: var(--font-size-md-1); font-weight: 700; vertical-align: baseline; margin-left: .25rem; } .greeting_wrapper .right > .txtArea > .ceo > span { margin-right: .25rem; } /*history*/ .history-bg { position:relative; height: 25svh; } .history-bg:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0, .315); content: ''; z-index: 1; } .history-bg .txt-wrap { display: flex; align-items: center; justify-content: center; width: 100%; } .history-bg .txt-wrap > .tt { position:relative; font-size: var(--font-size-lg-2); font-weight: 400; font-family: var(--ff1); color: #fff; z-index: 2; } .history-con { padding: 5rem 0; } .history-list { } .history-list > li { padding-bottom: 8rem; position: relative; } .history-list > li:last-of-type { padding-bottom: 0; } .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 { /* flex *//* 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(122, 110, 102, .15); background: var(--color-point4); } .history-list > li > dl > dt.year { font-size: var(--font-size-xxl); color: var(--color-point4); } .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; */ } .history-list > li > dl > dd > p { display: flex; gap: 1rem; } .history-list > li > dl > dd > p > i { font-weight: 600; color: var(--color-point4); } .history-list > li:nth-child(odd) > dl > dd > p { /* flex-direction: row-reverse; */ } /*performace*/ .perfor_subContainer .perforinner { margin-top: var(--space-5); } .perfor_container { display: flex; align-items: start; gap: 2rem; height: 32.5rem; background: var(--color-bg-1); } .perfor_container .perforImg { position: relative; width: 45%; background: var(--color-point2); height: 100%; } .perfor_container .perforImg > img { width: 100%; height: 100%; object-fit: cover; } .perfor_container .listcon { position:relative; width: 55%; height: 100%; overflow-y: scroll; padding: 2rem 0; box-sizing: border-box; } .perfor_container .listcon::-webkit-scrollbar { width: 4px; } .perfor_container .listcon::-webkit-scrollbar-thumb { background-color: #20170e; border-radius:100px; } .perfor_container .listcon::-webkit-scrollbar-track { background: #fff; } .perfor_container .perforList { position: relative; display: flex; gap: .5rem 1rem; flex-wrap: wrap; } .perfor_container .perforList > li { width: calc((100% - 1rem) / 2); } .perfor_container .perforList > li > .tt { position: relative; padding-left: 1rem; font-size: var(--font-size-sm-1); color: var(--color-point3); } .perfor_container .perforList > li > .tt:before { position: absolute; left: .3rem; content: '-'; } /*exhibit*/ .sub .exhibitSlider_wrap .exhibitSlider .swiper-slide { width: 80%; } .sub .exhibitSlider_wrap .exhibitSlider .exhibitImg { opacity: .3; transition: opacity .3s; height: 75svh; } .sub .exhibitSlider_wrap .exhibitSlider .swiper-slide-active .exhibitImg { opacity: 1; } .sub .exhibitSlider_wrap .exhibitSlider_control .swiperBtn.prev { left: 0; } .sub .exhibitSlider_wrap .exhibitSlider_control .swiperBtn.next { right: 0; } .sub .exhibitSlider_wrap .exhibitSlider_control .swiperBtn.next:before, .sub .exhibitSlider_wrap .exhibitSlider_control .swiperBtn.prev:before { color: #111; } .sub .exhibitSlider_wrap .exhibitSlider_control .swiperBtn { border-radius: 0; width: 4rem; height: 2.5rem; border: 1px solid #111; } .sub .exhibitSlider_wrap .exhibitSlider_control .swiperBtn:hover.next:before, .sub .exhibitSlider_wrap .exhibitSlider_control .swiperBtn:hover.prev:before { color: #fff; } .sub .exhibitSlider_wrap .swiper-bullet .swiper-pagination { position:relative; display: flex; justify-content: end; margin-top: var(--space-5); } .sub .exhibitSlider_wrap .swiper-bullet .swiper-pagination .swiper-pagination-bullet { width: 2.5rem; height: 4px; border-radius: 6px; background: rgba(0,0,0, 1); } /*gallery*/ .sub .gallery_table .tableItem:first-of-type { border-top: none; padding-top: none; } .sub .gallery_table .tableItem { border-bottom: none; padding-bottom: 0; } .sub .gallery_table .tableItem .tableCon:before { display: none; } .sub .gallery_table .tableItem { gap: 1rem; } .sub .gallery_table .tableItem .tableCon { width: calc((100% - 2rem) / 3); } .sub .gallery_table .tableItem .tableCon .inner > .imgCon { height: 35svh; } .galleryViewLayout { position: relative; } .galleryViewLayout .galleryInfo { position: relative } .galleryViewLayout .galleryInfo .overviewT { align-items: start; margin-bottom: var(--space-2); } .galleryViewLayout .galleryInfo .overviewT .page_tit { width: 50%; } .galleryViewLayout .galleryInfo .overviewT .page_tit .t1 { line-height: 1; } .galleryViewLayout .galleryInfo .overviewT .page_tit .t4 { margin-top: var(--space-3); } .galleryViewLayout .galleryInfo .overviewT .galleryTit { } .galleryViewLayout .galleryInfo .overviewT .galleryTit > .tt { font-size: var(--font-size-lg); font-weight: 600; line-height: 1; } .galleryViewLayout .galleryInfo .overviewT .galleryTit > .tx { font-size: var(--font-size-sm); font-weight: 400; margin-bottom: var(--space-2); color: var(--color-black-6); } .galleryViewLayout .galleryInfo .galleryBg { /* position: absolute; bottom: 0; left: 0; width: 100%; height: 52rem; background: var(--color-point); */ } .galleryViewLayout .overviewSlider_wrap { position:relative; display: flex; gap: 3rem; height: 40rem;} .galleryViewLayout .overviewSlider_wrap .overviewSlider { position:relative; flex: 1; /* background: var(--color-gray); */} .galleryViewLayout .overviewSlider_wrap .overviewSlider .galleryImg { width: 100%; height: 100%;} .galleryViewLayout .overviewSlider_wrap .overviewSlider .galleryImg > img { width: 100%; height: 100%; object-fit: contain; padding: 0 4rem; box-sizing: border-box;} .galleryViewLayout .overviewSlider_wrap .overview_control { display: flex; align-items: center; gap: 2rem; justify-content: end; margin-top: var(--space-3); padding-bottom: var(--space-8); } .galleryViewLayout .overviewSlider_wrap .overview_control .progress-container { position:relative; width: 10rem; display: flex; align-items: center; gap: 1rem; } .galleryViewLayout .overviewSlider_wrap .overview_control .progress-bar { position:relative; position: relative; width: 10rem; background: rgba(0,0,0, .4); height: 2px; } .galleryViewLayout .overviewSlider_wrap .overview_control .progress-bar .swiper-pagination-progressbar-fill { background: #fff; } .galleryViewLayout .overviewSlider_wrap .overview_control .total-slide { width: 4rem; /* color: #fff; */ font-size: var(--font-size-base); font-weight: 500; line-height: 1; } .galleryViewLayout .overviewSlider_wrap .overview_control .swiperBtn { position: absolute; top: 50%; transform: translateY(-50%); width: 3.75rem; height: 3.75rem; background: transparent; /* border: 1px solid #fff; */ color: var(--color-black-1); background: transparent;} .galleryViewLayout .overviewSlider_wrap .overview_control .swiperBtn:before{ font-size: var(--font-size-xxl);} .galleryViewLayout .overviewSlider_wrap .overview_control .swiperBtn:hover { } .galleryViewLayout .overviewSlider_wrap .overview_control .swiperBtn.prev{ left: 0;} .galleryViewLayout .overviewSlider_wrap .overview_control .swiperBtn.next{ right: 0;} .galleryViewLayout .overviewSlider_wrap .overview_control .control { display: flex; gap: .75rem; } .galleryViewLayout .overviewSlider_wrap .projectSliderThumb{ position: relative; width: 10rem; padding: 10px 12px 10px 10px; box-sizing: border-box; background: #fcf9ea;} .galleryViewLayout .overviewSlider_wrap .projectSliderThumb .swiper-slide{ height: 6.5rem;} .galleryViewLayout .overviewSlider_wrap .projectSliderThumb .in{ position:relative; width: 100%; height: 100%; background: #fff; border: 1px solid var(--gray-line);} .galleryViewLayout .overviewSlider_wrap .projectSliderThumb .in > .thumbImg{ width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; opacity: .715; transition: .3s ease;} .galleryViewLayout .overviewSlider_wrap .projectSliderThumb .in > .thumbImg > img{ width: 100%; height: 100%; object-fit: contain; filter: grayscale(.5); transition: .3s ease;} .galleryViewLayout .overviewSlider_wrap .projectSliderThumb .in:hover > .thumbImg, .galleryViewLayout .overviewSlider_wrap .projectSliderThumb .swiper-slide.swiper-slide-thumb-active .in > .thumbImg{ opacity: 1;} .galleryViewLayout .overviewSlider_wrap .projectSliderThumb .in:hover > .thumbImg > img, .galleryViewLayout .overviewSlider_wrap .projectSliderThumb .swiper-slide.swiper-slide-thumb-active .in > .thumbImg > img{ filter: grayscale(0)} .galleryViewLayout .overviewSlider_wrap .projectSliderThumb .swiper-slide.swiper-slide-thumb-active{} .galleryViewLayout .overviewSlider_wrap .projectSliderThumb .swiperControl{ /* position: absolute; pointer-events: none; width: 10rem; top: 0; right: 0; height: 100%; */} .galleryViewLayout .overviewSlider_wrap .projectSliderThumb .swiperControl .swiperBtn{ position: absolute; left: 50%; transform: translateX(-50%); z-index: 9; width: 2rem; pointer-events: auto; height: 2rem; background: rgba(0,0,0, .415); border-radius: var(--radius-pill); color: #fff;} .galleryViewLayout .overviewSlider_wrap .projectSliderThumb .swiperControl .swiperBtn:hover{ background: rgba(0,0,0, 1);} .galleryViewLayout .overviewSlider_wrap .projectSliderThumb .swiperControl .prev{ top: 1rem; transform: translateX(-50%) rotate(90deg);} .galleryViewLayout .overviewSlider_wrap .projectSliderThumb .swiperControl .next{ bottom: 1rem; transform: translateX(-50%) rotate(90deg);} /*location*/ .location_container { position: relative; } .location_container .location_tit { text-align: right; font-family: var(--ff1); line-height: 24px; 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: 500px; } .location_container .location_map_box .wrap_map { height: 30rem; } .location_container .location_info_box { position: absolute; bottom: 0px; left: 0; top: 0px; width: 450px; 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, .5); 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/main/visual1.jpg) no-repeat 100% 50%; background-size: cover; opacity: .7; } .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; }