@charset "UTF-8";
/* 메인비주얼 */
#mainVisual {position: relative; height: 100vh;}
#mainVisual .main-slider .slick-slide {position: relative; height: 100vh;}
#mainVisual .main-slider .slick-slide::after {position: absolute; content: ''; width: 100%; height: 100%; background: rgba(0,0,0,0.4);}
#mainVisual .main-slider .slick-slide img, #mainVisual .main-slider .slick-slide video {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; object-fit: cover;}
#mainVisual .main-text {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 100%; text-align: center; color: #fff;}
#mainVisual .main-text .title {font-size: 4em; font-weight: bold;}
#mainVisual .main-text .dec {margin-top: 1.5rem; font-size: 1.75em;}
#mainVisual .slick-dots {position: absolute; bottom: 20%; display: flex; gap: 12px; left: 50%; transform: translateX(-50%);}
#mainVisual .slick-dots li {font-size: 0; }
#mainVisual .slick-dots li button {font-size: 0;width: 30px; height: 6px; background-color: rgba(255,255,255,0.5); border: none; outline: none; border-radius: 30px; cursor: pointer;}
#mainVisual .slick-dots li.slick-active button {width: 60px; background-color: #fff; }

/* 메인콘텐츠 */
#mainContents {}
#mainContents .main-cont {display: flex; flex-direction: column; width: 100%; gap: 2em; padding: 8em 0;  max-width: var(--innerWidth); margin: 0 auto;}
#mainContents .main-cont .item {background-size: cover;background-repeat: no-repeat; width: 100%; height: 100%; padding: 6em 2em; border-radius: 30px; overflow: hidden; box-sizing: border-box; background-position: center;}
#mainContents .main-cont .item.item01 {background-image: url(../img/main/item01.png); background-position: center bottom; text-align: center;  background-attachment: fixed;}
#mainContents .main-cont .item .title {font-size: 2.75em; font-weight: bold; color: #fff;}
#mainContents .main-cont .item .dec {font-size: 1.25em; color: #fff;}
#mainContents .main-cont .item .title + .dec {margin-top: .5rem;}
#mainContents .main-cont .item .dec + .title {margin-top: 5px;}
#mainContents .main-cont .item .btn-text {margin-top: 3rem;}
#mainContents .main-cont .item.item02 {background-image:  url(../img/main/item02.png); background-position: center; position: relative; transition: 0.15s all;}
#mainContents .main-cont .item.item02::after {position: absolute; content: 'COMPANY SALES RECORD'; left: 50%; top: 50%; transform: translate(-50%,-50%); color: #fff; font-size: 2em; font-weight: bold; width: 100%; text-align: center; transition: 0.15s all; opacity: 0;}
#mainContents .main-cont .item.item02::before{position: absolute; left: 0; top: 0; width: 100%;height: 100%;background: rgba(0,0,0,0.7); content: ''; transition: 0.15s all; opacity: 0;} 
#mainContents .main-cont .item.item02:hover::after {opacity: 1; transition: 0.15s all;}
#mainContents .main-cont .item.item02:hover::before {opacity: 1; transition: 0.15s all;}
#mainContents .main-cont .item.item03 {background-image:  url(../img/main/item03.png);}
#mainContents .main-cont .item.item04 {background-image:  url(../img/main/item04.png);}
#mainContents .main-cont .item-box {display: flex; gap: 2em; justify-content: space-between;}
#mainContents .main-cont .item-box .left {width: 40%; height: 640px;}
#mainContents .main-cont .item-box .left .point-wrap {height: 100%;}
#mainContents .main-cont .item-box .left .point-wrap .item02 {height: 640px;}
#mainContents .main-cont .item-box .right {width: calc(60% - 2em); height: 640px; display: flex; flex-direction: column; gap: 2em;}
#mainContents .main-cont .item-box .right .point-wrap .item {height: calc(640px / 2 - 1em);}
#mainContents .main-cont .item.item03 ,#mainContents .main-cont .item.item04 {padding: 3em 4em 8em 4em;}
#mainContents .main-cont .point-wrap:hover .btn-point {right: 0; bottom: 0; transition: 0.15s all; width: 90px; height: 90px ;}
#mainContents .main-cont .point-wrap:hover .btn-point span:nth-child(1){width: 90px; height: 90px ; transition: 0.15s all;}
#mainContents .main-cont .point-wrap:hover .btn-point span:nth-child(2){width: 60px; height: 60px ; transition: 0.15s all;}
#mainContents .contact {color: #fff;padding: 6em 0; text-align: center; background: url(../img/main/contact.png) no-repeat; background-size: cover; background-position: center;}
#mainContents .contact .title {font-size: 4em; font-weight: bold;}
#mainContents .contact .dec {font-size: 1.25em; margin-top: 1em;}
#mainContents .contact .btn-text {margin-top: 3rem;}

@media (max-width:1680px) {
    #mainVisual .main-text {width: 96%;}
    #mainContents .main-cont .item-box .left, #mainContents .main-cont .item-box .right, #mainContents .main-cont .item-box .left .point-wrap .item02 {height: 500px;}
    #mainContents .main-cont .item-box .right .point-wrap .item {height: calc(500px / 2 - 1em);}
    
}

@media (max-width:1024px) {
    #mainVisual {height: 600px;}
    #mainVisual .main-slider .slick-slide {height: 600px;}
    #mainVisual .main-text .title {font-size: 3em;}
    #mainVisual .main-text .dec {font-size: 1.375em;}

    #mainContents .main-cont {padding: 6em 0; gap: 1em;}
    #mainContents .main-cont .item-box {gap: 1em;}
    #mainContents .main-cont .item-box .left, #mainContents .main-cont .item-box .right, #mainContents .main-cont .item-box .left .point-wrap .item02 {height: 300px;}
    #mainContents .main-cont .item-box .right .point-wrap .item {height: calc(300px / 2 - .5em); padding: 2em}
    #mainContents .main-cont .item .title {font-size: 2em;}
    #mainContents .main-cont .item .dec {font-size: 1.15em;}
    #mainContents .main-cont .item {padding: 4em 2em;}
    #mainContents .main-cont .item-box .right {width: calc(60% - 1em); gap: 1em;}

    #mainContents .contact .title {font-size: 3em;}

}

@media (max-width:580px) {
    #mainContents .main-cont .item .dec br {display: none;}
    #mainContents .main-cont .item .dec {font-size: 1em;}
    #mainContents .main-cont .item-box .left {width: calc(50% - .5em);}
    #mainContents .main-cont .item-box .right {width: calc(50% - .5em);}
}

@media (max-width:480px) {
    
    #mainVisual .main-text .title {font-size: 2em;}
    #mainVisual .main-text .dec {font-size: 1.125em;}
    #mainVisual .main-text .dec br {display: none;}

    #mainContents .main-cont {padding: 5em 0 ;}
    #mainContents .main-cont .item-box {flex-direction: column;}
    #mainContents .main-cont .item-box .left {width: 100%;}
    #mainContents .main-cont .item-box .right {width: 100%;}
    #mainContents .main-cont .item .title {font-size: 1.5em;}
    

    #mainContents .contact .title {font-size: 2em;}
}