@charset "utf-8";
/* layout.css는 전체적인 레이아웃 스타일을 정의합니다. */ 

#skipToContent a {z-index:100000;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden}
#skipToContent a:focus, 
#skipToContent a:active {width:200px;height:50px;background:#21272e;color:#fff;font-size:14px;font-weight:bold;text-align:center;text-decoration:none;line-height:50px;outline-color:#f37736;}

.only-desktop-tablet {display:block;}
.only-desktop {display:block;}
.only-tablet {display:none;}
.only-mobile {display:none;}

#wrapper {position:relative; overflow:hidden;}

/* header */
#header {position:fixed; top:0; left:0; width:100%; z-index:100; transition:.3s;}
#header .contain {max-width:1780px; position:relative; display:flex; align-items:center; justify-content:space-between; height:var(--header-height); z-index:10;}

.sitelogo a {display:block; background:url("/images/common/logo-w.png") no-repeat 0 center / contain; width:clamp(145px, calc(268 / var(--inner) * 100vw), 268px); height:clamp(20px, calc(36 / var(--inner) * 100vw), 36px); font-size:0; line-height:0;}

#gnb>ul {display:flex; text-align:center;} 
#gnb>ul>li {position:relative; padding:0 var(--space-40);}
#gnb>ul>li>a {position:relative; display:flex; align-items:center; justify-content:center; height:var(--header-height); color:#fff; font-size:var(--font-size-18); font-weight:600; letter-spacing:-.03em; line-height:1.3em;}
#gnb>ul>li>a:after {content:""; position:absolute; bottom:-1px; left:50%; transform:translateX(-50%); width:0; height:2px; background:var(--color-primary); transition:.2s;}
#gnb>ul>li.active>a:after {width:100%;}
#gnb .submenu {position:absolute; left:0; width:100%; height:0; overflow:hidden; text-align:center;}
#gnb .submenu>ul {padding:var(--space-10) 5px;}
#gnb .submenu>ul>li>a {display:block; padding:var(--space-10) 0; color:#454545; font-size:var(--font-size-16); line-height:1.33em; letter-spacing:-.03em;}
#gnb .submenu>ul>li>a:hover {color:var(--color-primary); text-decoration:underline;}
.submenu-bg {display:none; position:absolute; width:100%; left:0; background:#fff url("/images/common/subbg-logo.png") no-repeat right var(--space-100) bottom -65px; border-top:1px solid #ddd;}

#header:hover {background:#fff;}
#header:hover .sitelogo a {background-image:url('/images/common/logo.png');}
#header:hover #gnb>ul>li>a {color:#242424;}
#header:hover .btn-m-menu span, 
#header:hover .btn-m-menu span:before,
#header:hover .btn-m-menu span:after {background:#242424;}

#header.header-fixed {background:#fff; box-shadow:0px 3px 5px rgba(0,0,0,0.1);}
#header.header-fixed .sitelogo a {background-image:url('/images/common/logo.png');}
#header.header-fixed #gnb>ul>li>a {color:#242424;}
#header.header-fixed .btn-m-menu span,
#header.header-fixed .btn-m-menu span:before,
#header.header-fixed .btn-m-menu span:after {background:#242424;}

/* for mobile */
.btn-m-menu {display:block; position:relative; width: 30px; height:22px;}
.btn-m-menu span {position:absolute; left:10px; right:0; top:50%; height:2px; margin-top:-1px; background:#fff;}
.btn-m-menu span:before,
.btn-m-menu span:after {content:" "; position:absolute; left:-10px; right:0; height:2px; background:#fff;}
.btn-m-menu span:before {top:-10px;}
.btn-m-menu span:after {bottom:-10px;}

.mobile-navigation {position:fixed; top:0; right:0; width:300px; height:100%; overflow:auto; transition:.4s ease-out; -ms-transform:translateX(100%); transform:translateX(100%); background:#fff; z-index:102;}
.mobile-navigation .home {display:flex; align-items:center; height:80px; padding:0 20px; color:#242424; font-size:19px; font-weight:700; line-height:1.5em;}
.mobile-navigation .home img {height:28px;}
.mobile-navigation .nav-menu>ul {border-top:1px solid #ddd;}
.mobile-navigation .nav-menu>ul>li {border-bottom:1px solid #ddd;}
.mobile-navigation .nav-menu>ul>li>a {position:relative; padding:10px 48px 10px 20px; display:block; color:#242424; font-size:19px; font-weight:700; line-height:1.5em;}
.mobile-navigation .nav-menu>ul>li>a:after {content:""; position:absolute; top:50%; right:20px; transform:translateY(-75%) rotate(45deg); width:11px; height:11px; border-right:2px solid #505050; border-bottom:2px solid #505050;}
.mobile-navigation .nav-menu>ul>li.active>a {color:#fff; background:var(--color-primary);}
.mobile-navigation .nav-menu>ul>li.active>a:after {transform:translateY(-35%) rotate(-135deg); border-color:#fff;}
.mobile-navigation .nav-menu .submenu {display:none; background:#f8f8f8; color:#454545; font-size:16px; font-weight:400; line-height:1.5em;}
.mobile-navigation .nav-menu .submenu ul li {border-top:1px solid #e5e5e5;}
.mobile-navigation .nav-menu .submenu ul li a {display:block; padding:12px 20px;}
.mobile-navigation .nav-menu .submenu ul li a:hover {color:var(--color-primary);}
.mobile-navigation .close {position:absolute; top:25px; right:15px; width:26px; height:26px; text-indent:-9999em; overflow:hidden;}
.mobile-navigation .close:before,
.mobile-navigation .close:after {content:" "; position:absolute; top:12px; left:0; width:100%; height:3px; background:#242424; border-radius:3px;}
.mobile-navigation .close:before {transform:rotate(45deg);}
.mobile-navigation .close:after {transform:rotate(-45deg);}
.mobile-overlay {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.6; z-index:101;}

html.menu-opened {overflow:hidden;}
html.menu-opened .mobile-navigation {-ms-transform:translateX(0); transform:translateX(0);}
html.menu-opened .mobile-overlay {display:block;}

/* main */
#main #container .contain {max-width:1460px;}

.main-visual {position:relative; overflow:hidden; color:#fff;}
.main-visual .contain {max-width:1460px !important;}
.main-visual .item {height:100vh;}
.main-visual .img {transition:5s; transform:scale(1); position:absolute; top:0; right:0; width:100%; height:100%;}
.main-visual .img img {position:absolute; top:50%; left:0; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); width:100%; height:auto !important; max-width:100%; min-height:100%; object-fit:cover;}
.main-visual .slick-slide.active .img {transform:scale(1.06);}
.main-visual .caption {text-align:center; padding:0 40px; position:absolute; top:50%; transform:translateY(-50%); left:0; width:100%; z-index:2;}
.main-visual .caption .txt-1 {text-shadow:0 0 5px rgba(0,0,0,.7); font-size:var(--font-size-32); font-weight: 400; letter-spacing: -.03em; line-height: 1.4em;}
.main-visual .caption .txt-1 strong {color: var(--color-primary);}
.main-visual .caption .txt-2 {font-size:var(--font-size-60); font-weight: 700; letter-spacing: -.03em; line-height: 1.4em;}
.main-visual .slick-arrow {position: absolute; top:50%; margin-top: -20px; width:40px; height:40px; background-size:contain; transition:.4s; background-repeat:no-repeat; background-position:50% 50%; background-color:transparent; z-index:50; overflow:hidden; font-size:0; line-height:0; text-indent:-99999em; border:0;}
.main-visual .slick-prev {left:var(--space-100); background-image:url('/images/main/mv-prev.png');}
.main-visual .slick-next {right:var(--space-100); background-image:url('/images/main/mv-next.png');}
.main-visual .slick-prev:hover {background-image: url('/images/main/mv-prev-on.png');}
.main-visual .slick-next:hover {background-image: url('/images/main/mv-next-on.png');}
.main-visual .scroll {position:absolute; right:var(--space-40); bottom:var(--space-100); animation:scroll .9s linear infinite alternate;}
.main-visual .scroll img {height:clamp(130px, calc(187 / var(--inner) * 100vw), 187px);}

@keyframes scroll{
	0%{transform:translateY(0);}
	100%{transform:translateY(15px);}
}

.m-heading {margin-bottom:var(--space-60); text-align:center;}

.m-tit {margin-bottom: 0; font-size:var(--font-size-48); font-weight: 700; letter-spacing: -.03em; line-height: 1.3em; color: var(--color-primary);}

.m-txt {font-weight: 400; color: #454545;}

.btn-more {display: inline-block; padding: 0 var(--space-45); line-height: clamp(40px, calc(48 / var(--inner) * 100vw), 48px); border:1px solid #fff; color: #fff; font-weight: 400; letter-spacing:-.03em; text-align:center;}
.btn-more:hover {background: var(--color-primary); border-color: var(--color-primary);}

.main-about {padding:var(--space-150) 0; background: url('/images/main/about-bg.jpg') no-repeat center center / cover; color: #fff;}
.main-about .en {font-size:var(--font-size-18); font-weight: 600; letter-spacing:-.03em; line-height: 1.4em;}
.main-about h2 {margin:var(--space-60) 0 var(--space-10); font-size:var(--font-size-32); font-weight: 400; letter-spacing:-.03em; line-height: 1.25em;}
.main-about .txt {margin-bottom:clamp(40px, calc(190 / var(--inner) * 100vw), 190px);}

.main-our {padding:var(--space-150) 0;}
.main-our .contain {display: flex;}
.main-our .slider-nav {width:50%;}
.main-our .slider-nav .content {position: relative; padding-right: 30px;}
.main-our .slider-nav .content h3 {margin:clamp(15px, calc(120 / var(--inner) * 100vw), 120px) 0 var(--space-10); font-size:var(--font-size-40); font-weight: 700; letter-spacing: -.03em; line-height: 1.3em;}
.main-our .slider-nav .content p {margin-bottom:var(--space-50); font-size:var(--font-size-20); font-weight: 400; letter-spacing: -.03em; line-height: 1.5em; color: #454545;}
.main-our .slider-nav .content .num {font-family: var(--font-gmarket); z-index: -1; position: absolute; right:clamp(10px, calc(125 / var(--inner) * 100vw), 125px); bottom:var(--space-40); font-size:clamp(50px, calc(200 / var(--inner) * 100vw), 200px); font-weight: 700; color: #fafafa; font-family: var(--font-gmarket);}
.main-our .slider-nav .slick-arrow {width:clamp(34px, calc(46 / var(--inner) * 100vw), 46px); height:clamp(34px, calc(46 / var(--inner) * 100vw), 46px); background-size:contain; transition:.4s; background-repeat:no-repeat; background-position:50% 50%; background-color:transparent; z-index:50; overflow:hidden; font-size:0; line-height:0; text-indent:-99999em; border:0;}
.main-our .slider-nav .slick-prev {margin-right:var(--space-10); background-image:url('/images/main/our-prev.png');}
.main-our .slider-nav .slick-next {background-image:url('/images/main/our-next.png');}
.main-our .slider-nav .slick-prev:hover {background-image: url('/images/main/our-prev-on.png');}
.main-our .slider-nav .slick-next:hover {background-image: url('/images/main/our-next-on.png');}
.main-our .slider-for {width:50%;}
.main-our .slider-for .slick-dots {position:absolute; bottom:var(--space-25); left:0; width:100%; text-align:center; line-height:0; z-index:50;}
.main-our .slider-for .slick-dots li {display:inline-block; margin:0 2px;}
.main-our .slider-for .slick-dots li button {position:relative; display:block; width:14px; height:14px; background:transparent; border:1px solid transparent; border-radius:100%; overflow:hidden; text-indent:-9999em; transition:.2s;}
.main-our .slider-for .slick-dots li button:before {content:""; position:absolute; top:50%; left:50%; margin:-3px 0 0 -3px; width:6px; height:6px; background:#fff; border-radius:100%;}
.main-our .slider-for .slick-dots .slick-active button {border:1px solid #fff;}

.main-brand {padding:var(--space-150) 0 0;}
.main-brand .tab-area {padding:var(--space-15) 0; background: var(--color-primary);}
.main-brand .tab-area .tabs {display:flex; justify-content:center; align-items: center;}
.main-brand .tab-area .tabs li {position: relative; padding: 0 var(--space-55);}
.main-brand .tab-area .tabs li:after {content:''; position: absolute; right:0; top:50%; transform:translateY(-50%); width:1px; height:30px; background:#ddd;}
.main-brand .tab-area .tabs li:last-child:after {display: none;}
.main-brand .tab-area .tabs li:nth-child(2) img {height: 30px;}
.main-brand .tab-content .image {position: relative; aspect-ratio: 1920/744; overflow:hidden;}
.main-brand .tab-content .image img {animation:imgScale .6s ease-in-out forwards; width:100%; height:100%; object-fit:cover;}
.main-brand .tab-content .image .btn-more {z-index: 10; position: absolute; bottom:var(--space-100); left:50%; transform:translateX(-50%);}
.main-brand .tab-content.active .image img {transform:scale(1);}

@keyframes imgScale{
	0%{transform:scale(1.16);}
	100%{transform:scale(1);}
}

.main-product {padding:var(--space-150) 0;}
.main-product .items {text-align:center; display: grid; grid-template-columns: repeat(4, 1fr); gap:var(--space-40);}
.main-product .items .item {height:clamp(160px, calc(320 / var(--inner) * 100vw), 320px); display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius:16px; border:2px solid var(--color-primary);}
.main-product .items .ico {width: clamp(48px, calc(82 / var(--inner) * 100vw), 82px); height: clamp(46px, calc(80 / var(--inner) * 100vw), 80px); background-size: contain; background-repeat: no-repeat; background-position: center center;}
.main-product .items h3 {margin:var(--space-35) 0 var(--space-5); font-size:var(--font-size-28); font-weight: 600; letter-spacing:-.03em; line-height: 1.4em;}
.main-product .items p {color: #e5bfbd; font-size:var(--font-size-18); font-weight: 600; letter-spacing:-.03em; line-height: 1.4em;}
.main-product .items .item1 .ico {background-image:url('/images/main/product-ico1.png');}
.main-product .items .item2 .ico {background-image:url('/images/main/product-ico2.png');}
.main-product .items .item3 .ico {background-image:url('/images/main/product-ico3.png');}
.main-product .items .item4 .ico {background-image:url('/images/main/product-ico4.png');}
.main-product .items .item:hover {background:var(--color-primary); color: #fff;}
.main-product .items .item1:hover .ico {background-image:url('/images/main/product-ico1-on.png');}
.main-product .items .item2:hover .ico {background-image:url('/images/main/product-ico2-on.png');}
.main-product .items .item3:hover .ico {background-image:url('/images/main/product-ico3-on.png');}
.main-product .items .item4:hover .ico {background-image:url('/images/main/product-ico4-on.png');}

.main-oem {padding:var(--space-150) 0; background: #f6f6f6 url('/images/main/oem-text.png') no-repeat left 0 bottom 0 / contain;}
.main-oem .slider-area {display: flex; gap:0 var(--space-80);}
.main-oem .content {width: 34.4%; display: flex; justify-content: flex-end;}
.main-oem .content .inner {position: relative; padding:var(--space-60); width: 60%; color: #fff; background: var(--color-primary); border-radius:16px;}
.main-oem .content h3 {margin-bottom:var(--space-5); font-size:var(--font-size-28); font-weight: 600; letter-spacing:-.03em; line-height: 1.4em;}
.main-oem .slick-arrow {margin-top:var(--space-30); width:clamp(34px, calc(46 / var(--inner) * 100vw), 46px); height:clamp(34px, calc(46 / var(--inner) * 100vw), 46px); background-size:contain; transition:.4s; background-repeat:no-repeat; background-position:50% 50%; background-color:transparent; z-index:50; overflow:hidden; font-size:0; line-height:0; text-indent:-99999em; border:0;}
.main-oem .slick-prev {margin-right:var(--space-10); left:var(--space-100); background-image:url('/images/main/mv-prev.png');}
.main-oem .slick-next {right:var(--space-100); background-image:url('/images/main/mv-next.png');}
.main-oem .btn-more {margin-top:var(--space-30);}
.main-oem .btn-more:hover {background: #fff; color:#242424;}
.main-oem .slider {flex:1 1 auto; min-width:0; width:1%;}
.main-oem .slider .items {margin:calc(var(--space-20) * -1);}
.main-oem .slider .items .item {padding:var(--space-20);}
.main-oem .slider .items .image {position: relative; box-shadow:0 0 16px rgba(0,0,0,.15); border-radius:16px; overflow: hidden; width: 346px; aspect-ratio: 346/360;}
.main-oem .slider .items .image img {width:100%; height:100%; object-fit:cover;}
.main-oem .slider .items .txt {display: flex; flex-direction: column; align-items: center; position: absolute; bottom:var(--space-35); left:0; width:100%; padding:0 10px; z-index: 10;}
.main-oem .slider .items .txt .ko {font-size:var(--font-size-20); font-weight: 600; letter-spacing:-.03em; line-height: 1.4em;}
.main-oem .slider .items .txt .en {color: #454545; font-weight: 400; letter-spacing:-.03em; line-height: 1.4em;}
.main-oem .slider .progress {margin-top:var(--space-40); display:block; width:100%; height:2px; overflow:hidden; background-color:#fff;background-image:linear-gradient(to right, var(--color-primary), var(--color-primary)); background-repeat:no-repeat;background-size:0 100%; transition:background-size .4s ease-in-out;}

.main-family {padding:var(--space-45) 0 var(--space-150);}
.main-family .slider {position: relative; padding: 0 var(--space-60);}
.main-family .items {margin:0 calc(var(--space-5) * -1);}
.main-family .items .item {padding: 0 var(--space-5);}
.main-family .slick-arrow {position: absolute; top:50%; margin-top: -20px; width:40px; height:40px; background-size:contain; transition:.4s; background-repeat:no-repeat; background-position:50% 50%; background-color:transparent; z-index:50; overflow:hidden; font-size:0; line-height:0; text-indent:-99999em; border:0;}
.main-family .slick-prev {left:0; background-image:url('/images/main/family-prev.png');}
.main-family .slick-next {right:0; background-image:url('/images/main/family-next.png');}
.main-family .slick-prev:hover {background-image: url('/images/main/family-prev-on.png');}
.main-family .slick-next:hover {background-image: url('/images/main/family-next-on.png');}

/* sub */
.sub-visual {position:relative; height:clamp(240px, calc(520 / var(--inner) * 100vw), 520px); text-align:center; color:#fff; overflow:hidden; background:#333;}
.sub-visual .bg {position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden; transition:2s; opacity:1; transform:scale(1.1); background-repeat:no-repeat; background-position:50% 0; background-size:cover;}
.sub-visual .inner {margin-top:var(--space-20); position:absolute; top:50%; left:0; width:100%; padding:0 20px; transform:translateY(-50%);}
.sub-visual .tit {margin-bottom:var(--space-10); font-size:var(--font-size-40); font-weight: 700; letter-spacing:-.03em; line-height: 1.3em;}
.sub-visual .txt {font-size:var(--font-size-16); font-weight: 700; letter-spacing:-.03em; line-height: 1.5em;}
.sub-visual .bg1 {background-image:url("/images/common/sv1.jpg");}
.sub-visual .bg2 {background-image:url("/images/common/sv2.jpg?v=1");}
.sub-visual .bg3 {background-image:url("/images/common/sv3.jpg");}
.sub-visual .bg4 {background-image:url("/images/common/sv4.jpg");}
.loaded .sub-visual .bg {transform:scale(1); opacity:1;}

.lnb-wrap {position: relative; margin-top: -60px; text-align:center; background: rgba(255,255,255,.8);}
.lnb {max-width:1200px; margin:0 auto;}
.lnb ul {display:flex; justify-content:center;}
.lnb ul li {width:auto; flex:1;}
.lnb ul li a {position:relative; display:flex; align-items:center; justify-content:center; height:60px; padding:0 13px; font-size:var(--font-size-18); font-weight: 500; color:#242424; line-height:1.2em; letter-spacing:-.03em;}
.lnb ul li a:after {display:none; content:""; position:absolute; left:0; width:100%; height:2px; bottom:0px; background:var(--color-primary);}
.lnb ul li.active a {color:var(--color-primary); font-weight:700;}
.lnb ul li.active a:after {display:block;}

#contArea {max-width:1260px; padding-left:30px; padding-right:30px; margin:0 auto;}
#contArea.wide {max-width:100%; padding-left:0; padding-right:0;}
#contArea.wide .sub-title {padding-left:10px; padding-right:10px;}

.contain {width:100%; max-width:1260px; padding-left:30px; padding-right:30px; margin:0 auto;}

.sub-title {padding:var(--space-90) 0 var(--space-50); text-align:center;}
.sub-title h2 {font-size:var(--font-size-40); font-weight: 700; letter-spacing:-.03em; line-height: 1.3em;}

.real-cont {min-height:300px; padding-bottom:190px;}

/* footer */
#footer {padding:var(--space-60) 0; background:#1a1b1f; color:#ddd; font-size:var(--font-size-15); line-height:1.5em; letter-spacing:-.02em;}
#footer .contain {max-width:1460px; position: relative;}
#footer span {display:inline-block;}

.foot-logo img {height:clamp(20px, calc(36 / var(--inner) * 100vw), 36px);}

.foot-addr { margin:var(--space-15) 0 var(--space-25);}
.foot-addr span {margin:0 var(--space-35) 3px 0;}

.foot-copy {color: #555;}

.foot-links {position: absolute; right:30px; bottom:0;}
.foot-links ul {display: flex; font-size:var(--font-size-14); color: #555; gap:0 var(--space-35);}