@charset "utf-8";

/* reset */
* {margin: 0;padding: 0;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, tbody, tfoot, thead, tr, th, td{margin:0;padding:0;}
h1, h2, h3, h4, h5, h6 {font-weight: 700; font-size: inherit;}
a {color: inherit; text-decoration: inherit;}
img {vertical-align: middle;}
a img {border: none;}
li {list-style: none;}
address, em, i {font-style: normal;}

/*layout*/
body {font-family: 'NanumSquare', sans-serif !important; font-size: 14px; color:#4e4e4e; line-height: 1.4;}
.wrap {width: 100%;  overflow: hidden;}



/*header*/
header {width: 100%;margin: 0 auto;height: 72px;align-items: center; position: fixed;z-index: 1000; background-color: transparent;transition: background-color 0.3s ease;}
header a img {width: 240px;}
header.scrolled { background-color: rgba(255, 255, 255, 0.8);backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);}

/* 스크롤 시 로고만 검정으로 변경 */
header .innerHeader {width: 85%;margin: 0 auto;display: flex;justify-content: space-between;align-items: center;height: 72px;position: relative;}


/* header .innerHeader .logo {float: left;} */
header .innerHeader .menu { display: flex;gap: 40px;list-style: none;height: 100%;align-items: center}
header .innerHeader .menu li a {font-size: 16px;font-weight: 500;transition: 0.3s;}
.menu li a:hover {color: #a3e635;}

/* 햄버거 버튼 스타일 */
.menu-toggle {display: none;flex-direction: column;cursor: pointer;width: 30px;height: 22px;justify-content: space-between;}
.menu-toggle span {height: 3px;background: black;border-radius: 3px;transition: 0.3s;}





/* INFO_BAR */
.infoBar{position: fixed;bottom: 0;left: 0;width: 100%;background: rgba(255, 255, 255, 0.6);backdrop-filter:blur(6px);z-index: 100;padding: 10px 0;}

.infoBar .inner {max-width: 1100px;margin: 0 auto;padding: 0 20px;}
.infoBar .inner ul {display: flex;justify-content:space-between;align-items: center;list-style: none;padding: 0;margin: 0;flex-wrap: wrap;}
.infoBar li {display: flex;flex-direction: row;align-items: center;gap: 10px;padding: 5px 10px;}
.infoBar .icon {margin-bottom: 6px;}
.infoBar .txt { display: flex;flex-direction: column;line-height: 1.4;}
.infoBar p {margin: 2px 0;font-size: 14px;color: #333;}


/* INFO_BAR Ani */
.infoBar {position: fixed;left: 50%;transform: translateX(-50%);z-index: 90;background: #fff;box-shadow: 0 4px 10px rgba(0,0,0,0.1);border-radius: 8px;padding: 16px 24px;transition: all 0.6s ease;opacity: 1;pointer-events: auto;}

.infoBar.hide {transform: translateX(-50%) translateY(100px);opacity: 0;pointer-events: none;}










/*visual*/
section.visual {margin-top: 80px; padding-bottom: 50px; position: relative;}

/* 나중 */
section.visual:before {content: ''; width: 53%; height: 400px; position: absolute; bottom: 0; right: 0;background: #f0f0f0;}


section.visual .img {width: 94%;  position: relative; text-align: center; }/*페이지숫자이미지가 보이기위해 overflow: hidden 지워줌*/
section.visual .img .imgBox {display: block; width: 100%; height: 100%; overflow: hidden; display: flex;justify-content: center;align-items: center;}

/* 페이지숫자 이미지*/
section.visual .img .page {position: absolute; right: -65px; top:50%; transform: translateY(-50%);}
section.visual .img img {width: 100%;}
section.visual .title {position: absolute; top:40%; left: 8%; color: #fff;}
section.visual .title h2{font-size: 50px;margin-bottom: 30px;font-weight: normal;}
section.visual .title h2 span {font-weight: 700;}
section.visual .title p {font-size: 20px; font-weight: 300;line-height: 1.5;}
section.visual .title p span {font-size: 24px;font-weight: 500;}


section.visual .menu {position: absolute; bottom: 15%; left: 8%;}
section.visual .menu li{float: left; margin-right: 60px; }
section.visual .menu li a{display: block; color: #fff;}
section.visual .menu li a p {float: left; font-weight: bold; font-size: 20px; line-height: 1.6;}
section.visual .menu li a p span {display: block;font-weight: 100; font-size: 15px; color: #aaa;}
section.visual .menu li a .arrow {display: block; float: right; margin-top: 10px; margin-left: 20px; position: relative; z-index: 1; }


section.visual .menu li a .arrow:before {content: ''; width: 40px; height: 40px; background: rgba(252, 252, 252, 0.4);position: absolute; top:-10px; right: -10px; z-index: -1; transition: all 0.2s;}

section.visual .menu li a:hover .arrow:before,section.visual .menu li a:focus .arrow:before {right: 0; top: 0;}

section.visual .img .mask {display: block; position: absolute; top:0; width: 1px;height: 100%;background: rgba(255, 255, 255, 0.16); }
section.visual .img .mask.a {left: 0%;} 
section.visual .img .mask.b{left: 25%;} 
section.visual .img .mask.c {left: 50%;} 
section.visual .img .mask.d {left: 75%;} 

@keyframes mask {
    0%{width: 25%; background: #000;}
    50%{width: 25%; background: #000;}
    99% {background: #000;}
}
section.visual .slick-active .img .mask.a {animation-name: mask; animation-duration: 0.4s; }
section.visual .slick-active .img .mask.b {animation-name: mask; animation-duration: 0.6s; }
section.visual .slick-active .img .mask.c {animation-name: mask; animation-duration: 0.8s; }
section.visual .slick-active .img .mask.d {animation-name: mask; animation-duration: 1s; }

@keyframes slid-up {
    0%{opacity: 0;}
    40%{opacity: 0; transform: translateY(40px);}
}

section.visual .slick-active .title h2{animation-name:slid-up; animation-duration: 1.5s; }
section.visual .slick-active .title p {animation-name:slid-up; animation-duration: 2.2s;}
section.visual .menu {animation-name:slid-up; animation-duration: 2.8s;}
section.visual .slick-active .imgBox img {transform: scale(1); animation-name: scaleani; animation-duration: 5.2s;}

@keyframes scaleani {
    0%{transform: scale(1.3);}
    30%{transform: scale(1.3);}
}
/*visual - slick-dots*/
.slick-dots {position: absolute;  right: 4.5%; bottom: 30px;}
.slick-dots li button {text-indent: -9999px; width: 12px; height: 12px;background: #ccc; border:none; cursor:pointer; margin-bottom: 15px;}
.slick-active .slick-dots li button {background: #000; }

.floating-call-btn {
  display: none; /* 기본은 숨김 */
}



/* about */
.about {height: auto;}
.about .inner {width: 70%;margin: 210px auto;}

.about .top {text-align: center;padding-bottom: 2.5em;}
.about .top img {width: 60px;padding-bottom:10px;}
.about .top h1 {font-size: 48px;padding-bottom: 14px;}
.about .top p{font-size: 16px;line-height: 140%;color: #4E5968;}

.about .bottom ul{display: flex;display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 20px;max-width: 1200px;margin: 0 auto;}
.about .bottom ul li {background:#FAFAFA;padding: 24px;text-align: left;}
.about .bottom ul li h3 {font-size: 18px;font-weight: 600;color: #111;display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;}

.about .bottom ul li p {font-size: 14px;color: #555;line-height: 1.5;}





/* Lift */
.liftImg {height: auto;padding: 100px 0;}
.liftImg .contentBox {max-width: 1200px;margin: 0 auto;padding: 0 24px;}

.liftImg h3 {font-size: 32px;font-weight: 500;margin-bottom: 60px;line-height: 1.5;}

.liftImg h3 span {display: block;font-size: 16px;color: #777;font-weight: 400;}
.liftImg .category {margin-bottom: 80px;}
.liftImg .category h4 {font-size: 14px;color: #888; margin-bottom: 24px;text-transform: uppercase;}

.liftImg .productGrid {display: flex;flex-wrap: wrap;gap: 20px;}

.liftImg .productItem {width: calc((100% - 40px) / 3); text-align: center;padding: 20px 10px;}

.liftImg .productItem img {width: 100%;height: auto;margin-bottom: 16px;transition: transform 0.3s ease;overflow: hidden;}

.liftImg .productItem p {font-size: 16px;color: #111;font-weight: 400;}

/* Hover effect */
.liftImg .productItem:hover img {transform: scale(1.05);}

/* Responsive */
@media (max-width: 900px) {
.liftImg .productItem {
    width: calc((100% - 20px) / 2);}
}

@media (max-width: 600px) {
    .liftImg .productItem {width: 100%;}
}



/* LAST */
.last {height: auto;max-width: 1200px;margin: auto;background: #fff;padding: 20px 0px 80px;text-align: center;}

.last .top h2 {font-size: 24px;font-weight: 500;color: #616161;line-height: 1.6;max-width: 800px;margin: 0 auto 60px;}
.last .top h2 span {color: #0A0A0A;}
.cardList {display: flex;flex-wrap: wrap;justify-content: space-between;margin-bottom: 80px;padding: 0;list-style: none;width: 100%;margin: 0 auto;}

.cardList li {width: 380px;overflow: hidden;transition: transform 0.2s ease;background: #FAFAFA;}
.cardList li:hover {transform: translateY(-4px);}
.cardList .img img {width: 100%;height: auto;display: block;}
.cardList .txt {padding: 20px;text-align: left;}

.cardList .txt h3 {font-size: 18px;font-weight: 600;color: #111;margin-bottom: 16px;}
.cardList .txt p{font-size: 14px;color: #616161;line-height: 1.6;margin-bottom: 16px;}

/* 브랜드 로고 영역 */
.partner {padding: 180px 20px 40px;height: auto;}
.partner h1 {font-size: 20px;color: #444;margin-bottom: 30px;font-weight: 600;}

.partner ul {display: flex;flex-wrap: wrap;justify-content: center;gap: 60px;padding: 0;margin-bottom: 20px;}
.partner ul li img {height: 45px;}
.partner p {font-size: 14px;color: #777;line-height: 1.6;}




/* FOOTER */
footer {background-color: #111;}
footer .inner {display: flex;flex-wrap: wrap;justify-content: space-between;padding: 60px 0;gap: 40px;max-width: 1200px;;margin: 0 auto;}
.footer-left {height: 360px;background-color: #c0ff4e;padding: 50px 40px;flex: 1 1 300px;display: flex;flex-direction: column;justify-content: space-between;}

.footer-brand h3 {font-size: 22px;color: #111;margin-bottom: 6px;}
.footer-brand p {color: #111;font-size: 14px;margin-bottom: 40px;}
.footer-links {display: flex;flex-direction: column;gap: 30px;}

.footer-link {color: #111;font-size: 20px;text-decoration: none;border-bottom: 1px solid rgba(0, 0, 0, 0.2);display: flex;justify-content: space-between;align-items: center;padding-bottom: 10px;transition: all 0.3s;}

.footer-link:hover {color: #2e2e2e;transform: translateX(5px);}
.arrow {font-size: 20px;}

/* footer right */
.footer-right {flex: 2 1 600px;display: flex;flex-direction: column;justify-content: center;gap: 24px;}
.footer-right .top{display: flex;justify-content: space-between;}
.footer-nav {display: flex;gap: 40px;margin-bottom: 20px;}

.footer-nav a {color: #fff;text-decoration: none;font-size: 16px;position: relative;}

.footer-nav a:hover::after {content: '';display: block;width: 100%;height: 2px;background-color: #c0ff4e;position: absolute;bottom: 8px;left: 0;}


footer .bottom {display: flex;justify-content: space-between;align-items:center;}
footer .footer-message {text-align: right;}
footer .footer-message p {font-size: 18px;line-height: 1.5;color: #fff;}

.footer-contact {margin: 24px 0;color: #fff;text-align: right;}
.footer-contact p:first-child {margin-bottom: 8px;}
.footer-contact .tel span {color: #adb1ba;font-size: 16px;}
.footer-contact .tel {color: #c0ff4e;font-size: 24px;font-weight: bold;font-weight: 500;line-height: 1.5;}

.footer-info {font-size: 14px;line-height: 1.6;color: #ccc;}

.footer-copy {font-size: 13px;color: #888;margin-top: 10px;}


/*반응형 시작*/
@media screen and (max-width:1100px){
    /*visual*/
    section.visual {margin-top: 60px;}
    section.visual .img img {height: 100%; width: auto;}
    section.visual .title {left: 5%;}
    section.visual .menu {width: 100%; left: 5%;}
    section.visual .menu li {margin-right: 30px;}
    section.visual .menu li a p {font-size: 17px;}
    .slick-dots {right: 2.5%;}
    

}

/*950px 이하 - 751px 테블릿 참고*/
@media screen and (max-width:950px){
   /*visual */
    section.visual .menu {display: none; width: 0; height: 0;}
    section.visual .img {width: 92%;}


}
/* 750px 이하 - 모바일 디바이스 체크 */  
@media screen and (max-width:768px){
/*visual*/
    section.visual {height: 80vh; overflow: hidden;}
    section.visual .img {width: 100%;}
    section.visual .img img {height: 80vh; width:auto;}
    section.visual .img .page img {display: none;}
    br.mo {display: block;}

    section.visual .title h2{font-size: 29px;}
    section.visual .title p{font-size: 14px;}
    .slick-dots{right: 20px;}

    .infoBar {display: none;}
    .about {height: auto;padding: 0 24px;}
    .about .top img {width: 40px;}
    .about .top h1 {font-size: 2em;}
    .about .inner {width: 100%}
    .about .bottom ul li {height: 120px;}
    .liftImg {padding: 0;}
    .cardList {width: 100%;}
    .cardList li {background: none;width: auto;}
    .last {padding: 40px 24px;}
    .last .top h2 {font-size: 1em;}
    .partner {padding: 80px 0px 40px;}
    .partner ul {gap: 40px;justify-content: space-evenly;}
    .partner ul li img {height: 35px;}

    .floating-call-btn {font-weight: 700;display: flex;justify-content: center;align-items: center;width: 100%;height: 62px;position: fixed;left: 50%;bottom: 0px;transform: translateX(-50%);z-index: 9999;font-size: 1.125rem;line-height: 1.75rem;letter-spacing: -0.01em;color: #222;background-color: rgb(166 240 0 / var(--tw-bg-opacity, 1));text-decoration: none;opacity: 0;pointer-events: none;transition: all 0.3s ease;}

    .floating-call-btn.active {opacity: 1;pointer-events: auto;transform: translate(-50%, 0);}

    .floating-call-btn:hover {background: #aee842;box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);transform: translate(-50%, -2px);}

    .floating-call-btn:active {background: #aee842;transform: translate(-50%, 2px) scale(0.97);}


    .liftImg .category {margin-bottom: 32px;}
    .liftImg .category h4 {margin-bottom: 0px;}
    .liftImg .productGrid {gap: px;}
}