@import url("common.css");

/* 메인 공통 */
.main-container {width:100%; overflow:hidden;}


/* 메인 비주얼 */
.main-visual {position:relative; width:100%; height:100vh; background:var(--blackBg); overflow:hidden; isolation:isolate;}
.main-visual__slider {position:relative; height:100%; z-index:1;}
.main-visual__slider .slick-list,.main-visual__slider .slick-track {height:100%;}
.main-visual__slide {position:relative; width:100%; height:var(--vh);}
.main-visual__slide::before {content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(34,34,34,.5),rgba(34,34,34,.05) 45%,rgba(34,34,34,.45)); z-index:1;}
.main-visual__bg {position:absolute; left:0; top:0; width:100%; height:100%; background-repeat:no-repeat; background-size:cover; background-position:center; -ms-transform: scale(1.1,1.1); -o-transform: scale(1.1,1.1); -moz-transform: scale(1.1,1.1); -webkit-transform: scale(1.1,1.1); transform: scale(1.1,1.1); -webkit-transition:transform 3000ms  ease-in-out; -moz-transition:transform 3000ms ease-in-out; -o-transition:transform 3000ms ease-in-out; -ms-transition:transform 3000ms ease-in-out; transition:transform 3000ms ease-in-out;}
.main-visual__text {position:absolute; left:50%; top:50%; width:calc(100% - 40px); max-width:1590px; color:var(--white); text-align:center; transform:translate(-50%,-50%); z-index:2;}
.main-visual__text h2 {transform:translateY(-50px); font-family:var(--eng); letter-spacing:0; opacity:0; transition:all .9s ease-out;}
.main-visual__text p {transform:translateY(-50px); margin-top:20px; font-weight:300; opacity:0; transition:all .9s .15s ease-out;}
.main-visual__text p b {font-weight:700; line-height:inherit;}

.main-visual__slide.is-animated h2 {transform:translateY(0); opacity:1; transition:all .9s ease-out; animation-fill-mode:both;}
.main-visual__slide.is-animated p {transform:translateY(0); opacity:1; transition:all .9s .15s ease-out; animation-fill-mode:both;}
.main-visual__slide.is-animated .main-visual__bg {transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transition:all 3000ms ease-in-out; animation-fill-mode:both;}

.main-visual__indicator {position:absolute; left:50%; bottom:48px; display:flex; align-items:center; gap:14px; color:var(--white); font-family:var(--eng); font-size:.89rem; line-height:1.63; transform:translateX(-50%); z-index:2;}
.main-visual__indicator i {opacity:.35;}
.main-visual__indicator .visual-total {opacity:.5;}
.main-visual__indicator button {position:relative; width:28px; height:28px; border:none; background:transparent; cursor:pointer;}
.main-visual__indicator button::before {position:absolute; left:50%; top:50%; color:var(--white); font-family:var(--icon); font-size:28px; line-height:1; transform:translate(-50%,-50%);}
.main-visual__indicator .visual-prev::before {content:"chevron_left";}
.main-visual__indicator .visual-next::before {content:"chevron_right";}
.main-visual__scroll {display:block; position:absolute; right:max(calc((100% - 1590px)/2),20px); bottom:55px; width:50px; height:35px; z-index:2; cursor:pointer;}
.main-visual__scroll::before {content:"keyboard_double_arrow_down"; position:absolute; left:0; top:6px; color:var(--white); font-family:var(--icon); font-size:22px; line-height:1;}
.main-visual__scroll::after {content:""; position:absolute; right:0; top:0; width:23px; height:33px; background:url('/img/scr_mouse_icon.svg') center/contain no-repeat;}

/* 제품 */
.products {position:relative; background:var(--grayBg); box-sizing:border-box;}
.products__title {text-align:center;}
.products__title h2 {color:var(--black); font-family:var(--eng); font-weight:700; letter-spacing:0;}
.products__title p {margin-top:20px; color:var(--basic);}
.cate_tab {margin:50px auto; overflow:hidden; text-align:center;}
.cate_tab .swiper-wrapper {justify-content:center;}
.cate_tab .swiper-slide {width:auto;}
.cate_tab .swiper-slide a {display:flex; align-items:center; justify-content:center; width:150px; height:56px; border:1px solid var(--border); border-radius:var(--borderAll); background:var(--white); color:var(--black); cursor:pointer; transition:all .3s ease-out; box-sizing:border-box;}
.cate_tab .swiper-slide a:hover {border-color:var(--main); color:var(--main);}
.cate_tab .swiper-slide.hover a {border-color:var(--main); background:var(--main); color:var(--white); font-weight:600;}
.products_swiper_cont {display:none;}
.products_swiper_cont.is_active {display:block;}
.product_swiper {overflow:visible; height:100%; min-height:500px;}
.product_swiper .swiper-slide {height:auto;}
.product-card {position:relative; border-radius:var(--borderR30); overflow:hidden; box-sizing:border-box;}
.product-card::before {content:""; position:absolute; left:0; top:0; width:100%; height:100%; border-radius:var(--borderR30); background:var(--white); z-index:-2; display:block; box-sizing:border-box;}
.product-card a {display:block; height:100%; box-sizing:border-box; padding-bottom:50px;}
.product-card__image {display:flex; align-items:center; justify-content:center; aspect-ratio:1/1; overflow:hidden; padding:3px; box-sizing:border-box;}
.product-card__image img {display:block; width:100%; height:100%; object-fit:cover; border-radius:var(--borderR30);}
.product-card__txt {text-align:center; padding:0 5%; box-sizing:border-box;}
.product-card h3 {color:var(--black); font-family:var(--eng); font-weight:700; letter-spacing:0; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow:hidden; white-space:nowrap; word-wrap:normal; display:block;}
.product-card p {margin-top:10px; color:var(--basic); height:100%; max-height:3rem; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; text-overflow:ellipsis;}
.product-card__more {position:absolute; left:50%; top:50%; width:50px; height:50px; border-radius:var(--borderAll); background:var(--main); opacity:0; transform:translate(-50%,-50%); transition:all 0.3s ease-out;}
.product-card__more::before {content:"feature_search"; position:absolute; left:50%; top:50%; color:var(--white); font-family:var(--icon); font-size:24px; line-height:1; transform:translate(-50%,-50%);}
.product-card::after {position:absolute; left:0; top:0; width:100%; height:100%; content:""; z-index:-1; display:block; border-radius:var(--borderR30); border:3px solid var(--main); transition:all 0.3s ease-out; opacity:0; box-sizing:border-box;}
.product-card:hover::after {opacity:1;}
.product-card:hover .product-card__more {opacity:1;}
.product_util {display:flex; align-items:center; justify-content:space-between; margin:50px auto 0;}
.product_progress {position:relative; flex:1; height:4px; margin-right:30px; border-radius:3px; background:var(--border); overflow:hidden;}
.product_progress_bar {display:block; width:0; height:100%; border-radius:var(--borderR10); background:var(--main); transition:width .4s;}
.product_nav {display:flex; gap:4px;}
.product_nav button,.product_nav a {position:relative; width:54px; height:54px; border:1px solid var(--border); border-radius:var(--borderAll); background:transparent; cursor:pointer; box-sizing:border-box; transition:all .3s ease-out;}
.product_nav a {border-color:var(--main); background:var(--main);}
.product_nav button::before,.product_nav a::before {position:absolute; left:50%; top:50%; color:var(--black); font-family:var(--icon); font-size:28px; line-height:1; transform:translate(-50%,-50%); transition:color .3s ease-out;}
.product_nav .product_prev::before {content:"chevron_left";}
.product_nav .product_next::before {content:"chevron_right";}
.product_nav a::before {content:"segment"; color:var(--white);}
.product_nav button:hover {border-color:var(--main);}
.product_nav button:hover::before {color:var(--main);}
.product_nav a:hover {background:var(--white);}
.product_nav a:hover::before {color:var(--main);}

/* 회사 소개 */
.about {position:relative; display:flex; background:var(--white); gap:0 30px;}
.about__image {order:2; width:calc(50% - 15px); min-height:850px; background:url("/img/about_img.jpg") no-repeat center/cover;}
.about__text {display:flex; flex-direction:column; justify-content:center; width:calc(50% - 15px); padding:60px max(calc((100vw - 1590px)/2), 3%); padding-right:0; box-sizing:border-box;}
.about__text h2 {display:flex; align-items:flex-end; gap:20px; color:var(--black);}
.about__text h2 strong {font-family:var(--eng);}
.about__text h2 span {font-family:var(--eng); font-weight:300;}
.about__text p {margin-top:30px; color:var(--basic);}
.more-btn {position:relative; width:190px; display:flex; align-items:center; justify-content:space-between; box-sizing:border-box; padding:19px 25px 19px 30px; margin-top:30px; border-radius:var(--borderAll); background:var(--main); color:var(--white); font-family:var(--eng); font-weight:600; letter-spacing:0; text-align:center; transition:all .3s ease-out; border:1px solid var(--main);}
.more-btn:hover {background:var(--white); color:var(--main);}
.more-btn::after {content:"chevron_right"; display:inline-block; margin-left:15px; font-family:var(--icon); font-size:24px; line-height:1; font-weight:normal; transition:all .3s ease-out;}
.more-btn:hover::after {color:var(--main);}

/* 견적 문의 */
.inquiry {position:relative; box-sizing:border-box;}
.inquiry .bg {position:absolute; left:0; top:0; width:100%; height:100%; display:block; content:""; z-index:-1; background:var(--blackBg) url("/img/contact_bg.jpg") no-repeat center/cover;}
.inquiry__inner {display:grid; grid-template-columns:508px 1fr; gap:30px;}
.inquiry__intro {color:var(--white);}
.inquiry__intro h2 {font-family:var(--eng); font-weight:700;}
.inquiry__intro p {margin-top:30px;}
.inquiry__intro ul {margin-top:50px;}
.inquiry__intro li {position:relative; padding-left:30px; color:var(--white); letter-spacing:0;}
.inquiry__intro li::before {position:absolute; left:0; top:5px; font-family:var(--icon); font-size:20px; line-height:1;}
.inquiry__tel::before {content:"call";}
.inquiry__mail::before {content:"mail";}
.inquiry__form {position:relative;}



/* 파트너 */
.partners {position:relative; background:var(--black); box-sizing:border-box; overflow:hidden;}
.partners__inner {padding:80px 0 60px; border-bottom:1px solid rgba(255,255,255,.15);}
.partners__swiper {overflow:hidden;}
.partners__track {display:flex; width:max-content; gap:10px; animation:partnersMarquee 40s linear infinite;}
.partners__swiper:hover .partners__track {animation-play-state:paused;}
.partners__track figure {position:relative; flex-shrink:0; width:190px; aspect-ratio:190/60;}
.partners__track figure img {display:block; width:100%; height:100%; object-fit:cover;}
@keyframes partnersMarquee {from {transform:translateX(0);} to {transform:translateX(-50%);}}


@media all and (max-width:1600px){

.product_swiper {min-height: clamp(285px, 30vw, 500px);}

}


/*******************************************************************************
    @media ~1500px
*******************************************************************************/
@media all and (max-width:1500px){

.inquiry__inner {grid-template-columns:420px 1fr;}

}


/*******************************************************************************
    @media ~1300px
*******************************************************************************/
@media all and (max-width:1350px){

/* 제품 */
.cate_tab .swiper-wrapper {justify-content:normal;}

}


/*******************************************************************************
    @media ~1300px
*******************************************************************************/
@media all and (max-width:1300px){

.about__image {min-height: 750px;}
.about__text p br {display:none;}

.product_swiper {min-height: clamp(290px, 41vw, 513px);}

.inquiry__inner {grid-template-columns:330px 1fr;}
.inquiry-field {grid-template-columns:140px 1fr;}

}

/*******************************************************************************
    @media ~980px
*******************************************************************************/
@media all and (max-width:980px){


/* 제품 */
.cate_tab {margin:40px auto;}
.product_swiper {min-height: clamp(421px, 58vw, 562px);}
.product_util {margin:40px auto 0;}
.product_nav button::before,.product_nav a::before {font-size:24px;}
.product-card a {padding-bottom:40px;}

/* 회사 소개 */
.about {flex-direction:column;}
.about__image {order:1; width:100%; min-height:auto; aspect-ratio:4/3;}
.about__text {order:2; justify-content:flex-start; width:100%; padding:60px 30px;}
.about__text h2 {display:block;}
.about__text h2 span {display:block;}
.about__text p {margin-top: 20px;}

.more-btn {width: 170px; padding: 15px 20px 15px 25px; margin-top:25px;}
.more-btn::after {margin-left: 12px; font-size: 22px;}

/* 견적 문의 */
.inquiry__inner {grid-template-columns:1fr;}
.inquiry__intro {text-align:center;}
.inquiry__intro p {margin-top:20px;}
.inquiry__intro ul {margin-top:30px;}
.inquiry__intro li {display:inline-block; margin-right:20px; padding-left:25px;}
.inquiry__intro li::before {top:3px; font-size:18px;}
.inquiry__submit button {width: 170px; padding: 15px 20px 15px 25px;}
.inquiry__submit button::after {margin-left: 12px; font-size: 22px;}

/* 파트너 */
.partners__inner {padding:60px 0 40px;}

}

/*******************************************************************************
    @media ~680px
*******************************************************************************/
@media all and (max-width:680px){

.main-visual__text p {margin-top:15px;}
.main-visual__text p br {display:block;}

.main-visual__indicator {left:20px; bottom:30px; transform:none;}
.main-visual__scroll {right:30px; bottom:30px;}

.products__title p {margin-top:15px;}
.cate_tab {margin:30px auto;}
.cate_tab .swiper-slide a {width:128px; height:48px;}
.product_swiper {min-height: clamp(303px, 60vw, 397px);}
.product-card p {margin-top:5px;}
.product-card a {padding-bottom:30px;}
.product_util {margin:25px auto 0;}
.product_progress {margin-right:20px;}
.product_nav button,.product_nav a {width:44px; height:44px;}
.product_nav button::before,.product_nav a::before {font-size:22px;}

.about__text {width:100%; padding:50px 20px;}
.about__text h2 strong {line-height:1.28;}
.about__text h2 span {margin-top:5px;}
.about__text p {margin-top:15px; line-height:1.71;}
.about__text p br {display:none;}
.more-btn {width:155px; padding: 12px 15px 12px 20px; margin-top:20px;}
.more-btn::after {font-size:20px;}


/* 견적 문의 */
.inquiry-field {padding:15px; grid-template-columns:1fr;}
.inquiry-field dt {padding-bottom:10px;}
.inquiry__intro p {margin-top:15px;}
.inquiry__intro ul {margin-top:20px;}
.inquiry__intro li {padding-left:22px;}
.inquiry__intro li::before {top:3px; font-size:16px;}
.inquiry__submit {flex-direction:column; margin-top:30px;}
.inquiry__submit button {width:150px; height:54px; margin:20px auto 0;}
.partners__inner {padding:40px 0 30px;}

}

/*******************************************************************************
    @media ~480px
*******************************************************************************/
@media all and (max-width:480px){

.about__text {padding:50px 20px;}

}