/* 사파리일때 */
.--vh {
    /* min-height: calc(var(--vh,1vh) * 100);
    min-height: calc(var(--vh,1vh) * 100); */
    /* min-height: -moz-available;
    min-height: -webkit-fill-available;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0); */
}

.section {
    height: calc(var(--vh,1vh) * 100) !important;
    
}

body.header-active header{background: #fff;border-bottom: 1px solid #E9E9ED; }
body.header-active header .inner-header .header_menu_mobile:before, body.header-active header .inner-header .header_menu_mobile:after, body.header-active header .inner-header .header_menu_mobile span:last-of-type{background: black !important;}


header:after{background: transparent;}
header.over:after{ border-top: 1px solid #fff;}
body.header-black header:after{background: #fff; border-top: none;}
body.header-black header { color: #111; border-bottom: 1px solid #E9E9ED; background-color: #fff; }
body.header-black header .util .hover{ display: none; }
body.header-black header .util .default { display: block; }

body.header-white header { color: #fff; }
body.header-white header .util .hover{ display: block; }
body.header-white header .util .default { display: none; }


header { position: fixed; top: 0; left: 0; width: 100%; border-bottom: 0; color: #fff; }
header .util .hover{ display: block; }
header .util .default{ display: none; }


img { display: block; }
.mt-100 { margin-top: 100px; }
.inner-container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}

/* 더 보기 버튼 */
.section button { width: 150px; height: 46px; border: 1px solid var(--main); margin-top: 40px; }
.section button a { display: block; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.section button p { color: var(--main); font-size: 18px; }
.section button img { margin-left: 20px; }

.sec-2 > div > div,
.sec-3 > div > div,
.sec-4 > div > div,
.sec-5 > div > div,
.sec-6 > div > div { height:100vh; padding-top: 100px; }


.sec-1 { color: #fff; position: relative; }
.sec-1 .swiper { width: 100%; height: 100vh; }
/* .sec-1 .swiper .swiper-wrapper {  } */
.sec-1 .swiper .swiper-slide { display: flex; justify-content: center; align-items: center; }
.sec-1 .swiper .swiper-slide p { font-size: 48px; line-height: 62px; font-weight: 700; margin-top: 30px; }
.sec-1 .swiper .swiper-slide .visual-box { display: flex; align-items: center; justify-content: center; }
.sec-1 .swiper .swiper-slide .visual-box h2 { font-size: 64px; font-weight: 400; line-height: 70px; }
.sec-1 .swiper .swiper-slide .visual-box img { margin: 0 24px; width: 50px; height: 50px; }
.sec-1 .swiper .swiper-slide:nth-of-type(1) { background: url('../../../images/main/visual-1.jpg') no-repeat center / cover; }
.sec-1 .swiper .swiper-slide:nth-of-type(2) { background: url('../../../images/main/visual-2.jpg') no-repeat center / cover; }
.sec-1 .swiper .swiper-slide:nth-of-type(3) { background: url('../../../images/main/visual-3.jpg') no-repeat center / cover; }


/* 컨트롤러 */
.controller {  position: absolute; margin-top: 602px; top: 0; left: 50%; transform: translateX(-50%); z-index: 5; display: flex;  width: 292px; height: 34px; }
.controller > div { position: relative; display: flex; justify-content: space-between; align-items: center; width: 100%; }
.controller > div .swiper-button-next,
.controller > div .swiper-button-prev { position: static; left: auto; right: auto; width: auto; height: auto; margin-top: 0; }
.controller > div .swiper-button-next:after,
.controller > div .swiper-button-prev:after { display: none; }
.controller > div .swiper-button-next.swiper-button-disabled,
.controller > div .swiper-button-prev.swiper-button-disabled { opacity: 1; }
.controller > div .swiper-pagination { width: 90px; height: 2px; background: #fff;position: static; }
.controller > div .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background-color: var(--main); }
.controller > div .progress { display: flex; align-items: center; }
.controller > div .progress div { margin: 0 20px; }
.controller > div .progress span { font-size: 18px; }



.intro { display: flex; align-items: center; }
.intro .image-box { width: 50%; }
.intro .image-box img { width: 100%; }
.intro .text-box { margin-left: 40px; width: 35.417vw; }
.intro .text-box .logo img { width: 316px; display: block; }
.intro .text-box h6 { font-size: 22px; line-height: 32px; font-weight: 700; margin: 16px 0 24px 0; }
.intro .text-box ul li b { display: block; color: var(--main); font-weight: 700; }
.intro .text-box ul li p { font-size: 16px; line-height: 24px; color: #505050; margin-top: 2px; }
.intro .text-box ul li + li { margin-top: 16px; }
.intro .text-box ul li:last-of-type { display: none; }





.product { background-color: #F8F8FA; text-align: center; }
.product h3 { margin: 60px 0 0 0; }

/* 부분공통 */
.product h3,
.mode > h3,
.sec-7 .inner-container > h3 { font-size: 30px; line-height: 42px; color: var(--main); font-weight: 700; }

.product p,
.mode > p,
.sec-7 .inner-container > p { font-size: 18px; line-height: 26px; color: #767676; margin: 5px 0 30px 0; }


.product > div { display: flex; justify-content: space-between; }
.product > div .left { width: 935px; height: 614px; }
.product > div .right { width: 490px; display: flex; flex-direction: column; justify-content: space-between; }
.product > div .right .right-cont { height: 299px; }
.product > div .cont { height: 100%; position: relative; z-index: 5; display: flex; justify-content: center; align-items: center; overflow: hidden; }
.product > div .cont:after { position: absolute; content: ''; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); z-index: -1; opacity: 1; transition: 0.5s; }
.product > div .cont:hover:after { opacity: 0; }
.product > div .cont:hover h4 { opacity: 0; }
.product > div .cont:hover img { transform: scale(1.2); }
.product > div .cont img { transform: scale(1); transition: 0.5s; }

/* transform: scale(1);  */
.product > div .cont img { position: absolute; left: 0; top: 0; z-index: -1; }
.product > div .cont h4 { font-size: 36px; line-height: 42px; color:#fff; font-weight: 700; opacity: 1; transition: 0.5s; }

.system { background: url('../../../images/main/system.jpg') no-repeat center / cover; display: flex; align-items: center; }
.system .inner-container { display: flex; justify-content: flex-end; color: #fff; text-align: center; }
.system .inner-container h2 { font-size: 64px; line-height: 70px; }
.system .inner-container p { font-size: 18px; line-height: 28px; margin: 20px 0 40px 0; }
.system .inner-container ul { display: flex; justify-content: space-between; }
.system .inner-container ul p { font-size: 22px; line-height: 32px; font-weight: 700; }


.mode { text-align: center; margin: 80px 0 0 0; }
.mode ul { display: flex; justify-content: space-between; }
.mode ul li { position: relative; }
.mode ul li div { width: 100%; height: 65px; background: rgba(0, 0, 0, 0.5); color: #fff; position: absolute; bottom: 0; }
.mode ul li div p { font-size: 20px; line-height: 65px; }


.sec-6 > div > div  { background: url('../../../images/main/sec6.jpg') no-repeat center / cover; color: #fff; text-align: center; display: flex; justify-content: center; align-items: center; }
.sec-6 > div > div  h3 { font-size: 40px; line-height: 54px; font-weight: 700; }
.sec-6 > div > div  p { font-size: 18px; line-height: 26px; margin-top: 20px; }


.sec-7 .inner-container { text-align: center; }

.sec-7 .sec-7-swiper { height: 404px; }
.sec-7 .sec-7-swiper .swiper-wrapper { justify-content: space-between; }
.sec-7 .sec-7-swiper .swiper-slide { width: 470px; height: 372px; ; }
.sec-7 .sec-7-swiper .swiper-slide img{width: 100%; height: 100%; object-fit: cover; object-position: center;}
.sec-7 .sec-7-swiper .swiper-slide img.no-thumbnail{object-fit: contain; }
.sec-7 .sec-7-swiper .swiper-slide .text { width: 100%; height: 98px; background: rgba(255, 255, 255, 0.9); position: absolute; bottom: 0; display: flex; align-items: center; transition: 0.5s; opacity: 0;}
.sec-7 .sec-7-swiper .swiper-slide:hover .text { opacity: 1; }
.sec-7 .sec-7-swiper .swiper-slide .text > div { text-align: start; padding: 0 17px; }
.sec-7 .sec-7-swiper .swiper-slide .text > div h6 { font-size: 18px; line-height: 26px; font-weight: 700; position: relative; }
.sec-7 .sec-7-swiper .swiper-slide .text > div h6:after { content: ''; position: absolute;  left: 0; bottom: 0; width: 0; height: 1px; background: #111; transition: 0.5s; }
.sec-7 .sec-7-swiper .swiper-slide:hover .text > div h6:after { width: 100%; }
.sec-7 .sec-7-swiper .swiper-slide .text > div p { font-size: 18px; line-height: 26px; color: #767676; }


.sec-7 .swiper-horizontal>.swiper-pagination-progressbar,
.sec-7 .swiper-pagination-progressbar.swiper-pagination-horizontal,
.sec-7 .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,
.sec-7 .swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
    background-color: #EAEAEA;
    bottom: 0;
    top: auto;
    height: 2px; 
}
.sec-7 .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background-color: var(--main);
}
.sec-7 button { width: 167px; height: 56px; background-color: var(--main); margin-top: 50px; }
.sec-7 button a { display: block; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.sec-7 button p { color: #fff; font-size: 18px; }
.sec-7 button img { margin-left: 0px; }

/* 푸터 바로 위 컨택트 이동영역 */
.contact-link { background: url('../../../images/product/common/contact-link.jpg') no-repeat center / cover; height: 450px; display: flex; justify-content: center; align-items: center; padding: 166px 0; }
.contact-link h3 { font-size: 36px; line-height: 48px; font-weight: 500; color: #fff; text-align: center;}
.contact-link .btn { margin-top: 24px; }

.btn.white { border: 1px solid #fff; color: #fff; }
.btn { width: 206px; height: 46px; text-align: center; margin: 60px auto 0 auto; }
.btn a { line-height: 46px; display: block;}



@media (max-width: 1440px){
    section { overflow: hidden; }
    .inner-header { width: 100%; padding: 0 20px; }

    .sec-1 .swiper .swiper-slide .visual-box h2 { font-size: 4rem; line-height: 4.375rem; }
    .sec-1 .swiper .swiper-slide p { font-size: 3rem; margin-top: 1.875rem; line-height: 3.875rem; }

    .intro .image-box { height: 100%; }
    .intro .image-box img { object-fit: cover; object-position: center; height: 100%; }
    .intro .text-box { width: 42.5rem; margin-left: 2.5rem; padding-right: 20px;}
    .intro .text-box h6 { font-size: 1.375rem; line-height: 2rem; }
    .intro .text-box ul li b { font-size: 1rem; }
    .intro .text-box ul li p { font-size: 1rem; line-height: 1.5rem; }

    .product h3, .mode > h3, .sec-7 .inner-container > h3 { font-size: 1.875rem; margin-top: 3.75rem; line-height: 2.625rem; }
    .product p, .mode > p, .sec-7 .inner-container > p { font-size: 1.125rem; line-height: 1.625rem; margin: 0.3125rem 0 1.875rem 0; }
    
    .product > div { padding: 0 20px; }
    .product > div .left { width: 58.4375rem; height: 38.375rem; }
    .product > div .right { width: 30.625rem; margin-left: 0.9375rem; }
    .product > div .right .right-cont { height: 18.6875rem; }
    .product > div .right a:nth-of-type(2) .right-cont { margin-top: 0.9375rem; }
    .product > div .cont img { object-fit: cover; object-position: center; width: 100%; height: 100%; }
    .product > div .cont h4 { font-size: 2.25rem; line-height: 2.625rem; }

    .system .inner-container { width: 85%; }
    .system .inner-container h2 { font-size: 4rem; line-height: 4.375rem; }
    .system .inner-container p { font-size: 1.125rem; line-height: 1.75rem; margin: 1.25rem 0 2.5rem 0; }
    .system .inner-container ul p { font-size: 1.375rem; line-height: 2rem; }

    .mode .inner-container { width: 95%; }
    .mode ul li { flex: 1; }
    .mode ul li:nth-of-type(2) { margin: 0 0.9375rem; }
    .mode ul li img { width: 100%; }

    .sec-6 > div > div h3 { font-size: 2.5rem; line-height: 3.375rem; }
    .sec-6 > div > div p { font-size: 1.125rem; line-height: 1.625rem; margin-top: 1.25rem; }

    .sec-7 .inner-container { width: 95%; }

    .contact-link h3 { font-size: 2.25rem; line-height: 3rem; }
    .contact-link .btn { margin-top: 1.5rem; height: 2.875rem; width: 12.875rem; }
    .btn a { line-height: 2.875rem; }
}

@media (max-width: 1024px){
    .inner-container { width: 100%; }

    
    
  
    .sec-2 > div > div, .sec-3 > div > div, .sec-4 > div > div, .sec-5 > div > div, .sec-6 > div > div {
        height:100vh; padding-top: 4rem;
    }

    .section button { width: 7.25rem; height: 2.25rem; }
    .section button p { font-size: 0.875rem; }

    header .inner-header .header_menu_mobile:before,
    header .inner-header .header_menu_mobile:after,
    header .inner-header .header_menu_mobile span:last-of-type {
        background: #fff;
    }

    body.header-black header .inner-header .header_menu_mobile:before,
    body.header-black header .inner-header .header_menu_mobile:after,
    body.header-black header .inner-header .header_menu_mobile span:last-of-type {
        background: #111;
    }

    body.header-white header .inner-header .header_menu_mobile:before,
    body.header-white header .inner-header .header_menu_mobile:after,
    body.header-white header .inner-header .header_menu_mobile span:last-of-type {
        background: #fff;
    }

    .sec-1 .swiper .swiper-slide .visual-box h2 { font-size: 1.5rem; line-height: 2.125rem; }
    .sec-1 .swiper .swiper-slide .visual-box img { width: 1.25rem; height: 1.25rem; }
    .sec-1 .swiper .swiper-slide p { font-size: 1.5rem; line-height: 2.125rem; margin-top: 0.625rem; text-align: center;}
    .controller { width: 14.3125rem; }
    .controller > div .swiper-pagination { width: 5.625rem; margin: 0 0.625rem; }
    .controller > div .progress span { font-size: 0.875rem; }
    /* .controller img { width: 2.125rem; height: 2.125rem; } */

    .sec-2 { width: 100%; overflow-x: hidden; }
    .sec-2 > div { height: 100vh; }
    .intro { height: auto; }
    .intro { position: relative; padding: 0 1rem; }
    .section .intro button { margin: 1.875rem auto 0 auto; }
    .intro .image-box { width: 100%; position: absolute; left: 0; top: 0; z-index: -1; height: 100%; }
    .intro .image-box img { height: 100%; }
    .intro .text-box { margin-left: 0; width: 100%; }
    .intro .text-box .logo { display: none; }
    .intro .text-box h6 { font-size: 1rem; line-height: 1.5rem; }
    .intro .text-box ul li b { font-size: 0.875rem; }
    .intro .text-box ul li p { margin-top: 0; font-size: 0.875rem; line-height: 1.375rem; }
    .intro .text-box ul li + li { margin-top: 0.625rem; }
    .section button { margin: 1.875rem auto 3.75rem auto; display: block; }


    

    .product h3, .mode > h3,
    .sec-7 .inner-container > h3 {
        font-size: 1.125rem;
        line-height: 1.625rem;
    }
    .product p, .mode > p, 
    .sec-7 .inner-container > p {
        font-size: 0.875rem;
        line-height: 1.375rem;
        margin: 0 0 1.25rem 0;
    }

    /* .sec-3 > div { padding-top: 4rem; } */
    /* .sec-3 > div > div { padding-top: 0; } */
    .product { margin: 0; }
    .product h3 { margin: 0; padding: 2.5rem 0 0 0; } 
    .product > div { display: block; }
    .product > div .left { 
        /* height: 16.125rem;  */
        /* height: 30vh;  */
        height: 30vh; 
        overflow: hidden; 
        width: 100%; 
    }
    /* .product > div .right > a + a { margin-top: 1.601vh; } */
    .product > div .cont { justify-content: flex-start; align-items: flex-start; height: 100%; }
    .product > div .cont img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

    /* .product > div .cont { height: auto; }
    .product > div .left { height: 100%; width: 63.472%; }
    .product > div .right { justify-content: flex-start; width: 34.028%; }
    .product > div .right .right-cont { height: auto; } */
    
    .product > div .right a { width: 50%; height: auto; display: block; }
    .product > div .right { flex-direction: row; padding: 0.625rem 0rem 0 0rem; width: 100%; margin-left: 0; }
    .product > div .right a:nth-of-type(2) .right-cont { margin-top: 0; }
    .product > div .right .right-cont { height: 14.3125rem; }
    .product > div .right > a + a { margin-left: 0.625rem; margin-top: 0; }
    .product > div .right .cont { margin: 0; }
    .product > div .cont h4 { font-size: 1.125rem; line-height: 1.625rem; padding: 0.625rem; }
    
    
    .controller { top: 70vh; margin-top: 0; }


    .system { background: url('../../../images/main/system-m.png') no-repeat center / cover; position: relative; z-index: 5; padding: 0 1rem; }
    .system:before {
        content: '';
        position: Absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: -1;
    }

    .system .inner-container { margin-top: 50%; width: 100%; }
    .system .inner-container h2 { font-size: 1.125rem; line-height: 1.625rem; font-weight: 700; }
    .system .inner-container > div > p { font-size: 0.875rem; line-height: 1.375rem; margin: 0.625rem 0 2.5rem 0; }
    .system .inner-container > div >  p br { display: none; }
    .system .inner-container ul { padding: 0 1.5rem; }
    .system .inner-container ul img { margin: 0 auto; }

    .sec-5 > div { padding: 4rem 1rem 0 1rem; }
    .sec-5 > div > div { padding-top: 2.5rem; height: 100%; }
    .mode { margin: 0; }
    .mode > h3 { margin-top: 0; }
    
    .mode ul { display: block; }
    .mode ul li img { width: 100%; height:100%; object-fit: cover; object-position: center; }
    .mode ul li { height: 22vh; overflow: hidden; width: 80%; margin: 0 auto; }
    .mode ul li:nth-of-type(2) { margin: 0 auto; }
    .mode ul li div { height: 2.25rem; }
    .mode ul li div p { font-size: 0.875rem; line-height: 2.25rem; }
    
    .sec-6 > div { background: url('../../../images/main/sec6-m.jpg') no-repeat center / cover; }
    .sec-6 > div > div h3 { font-size: 0.9375rem; line-height: 1.5rem; }
    .sec-6 > div > div p { font-size: 0.875rem; line-height: 1.375rem; margin-top: 0.3125rem; }
    
    
    .sec-7 { height: 100vh; padding: 4rem 0 0 0; }
    .sec-7 .sec-7-swiper { height: 7.5rem; padding: 0 1rem; }
    .sec-7 .sec-7-swiper .swiper-slide { height: 6.25rem; overflow: hidden; width: 7.9375rem; }
    .sec-7 .sec-7-swiper .swiper-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
    .sec-7 button { width: 7.25rem; height: 2.25rem; margin-top: 1.25rem; }
    .sec-7 button p { font-size: 0.875rem; }


    .contact-link { padding: 3.375rem 0; }
    .contact-link .btn { margin-top: 0.625rem; width: 7.25rem; height: 2.25rem; }
    .contact-link .btn a { line-height: 2.25rem; font-size: 0.875rem; }
    .contact-link h3 { font-size: 1.125rem; line-height: 1.75rem; }

    .sec-7 .sec-7-swiper .swiper-slide .text { display: none; }
    .sec-7 .sec-7-swiper .swiper-slide:hover .text { display: none; }
}


@media (max-width: 720px){
    .controller { top: 60%; margin-top: 0; }
}