@charset "utf-8";

/* section common */
.section {position: relative; height: 100vh; width: 100%; display: flex; align-items: center;}
.section .inner:after {content: ''; clear: both; display: block;}
.section_title {position: relative;}
.section_title > strong {font-size: 17px; font-weight: 600; color: var(--main-color); line-height: 1;}
.section_title > h3 {font-size: 52px; font-weight: 700; color: #000; line-height: 1.2; margin-top: 40px; word-break: keep-all;}
.section_title > p {font-size: 24px; font-weight: 400; color: #666; margin-top: 60px;}

/* more button */
.more_btn {position: relative; display: inline-block; width: 200px; height: 60px; border-radius: 30px; padding: 0 0 0 30px; box-sizing: border-box; background-color: transparent; border: 1px solid #000; transition: all .3s; text-align: left;}
.more_btn span {display: inline-block; font-size: 18px; font-weight: 400; line-height: 58px; color: #000; vertical-align: middle;}
.more_btn:after {content: ''; position: absolute; top: 50%; right: 20px; margin-top: -8px; width: 11px; height: 16px; background: url('../images/common/icon_next.png') no-repeat 50% 50%; background-size: contain; transition: all .25s;}

.more_btn:hover {background-color: #000;}
.more_btn:hover span {color: #fff;}
.more_btn:hover:after {background-image: url('../images/common/icon_next_wh.png'); transform: translateX(5px);}


/* slide common */
/* .slide_ctrl {position: relative; display: inline-block; vertical-align: middle;} */
.slide_ctrl button {position: relative; display: inline-block; width: 60px; height: 60px; border: 1px solid #000; border-radius: 50%; background: #fff no-repeat 50% 50%; background-size: auto 14px; margin: 0 5px; transition: all .2s;}
.slide_ctrl button.prev {background-image: url('../images/common/icon_prev.png'); opacity: .3;}
.slide_ctrl button.next {background-image: url('../images/common/icon_next.png');}
.slide_ctrl button:hover {background-color: #000;}
.slide_ctrl button.prev:hover {background-image: url('../images/common/icon_prev_wh.png');}
.slide_ctrl button.next:hover {background-image: url('../images/common/icon_next_wh.png');}
.slide_ctrl button:before,
.slide_ctrl button:after {content: none;}


/* main visual section */
.main .mainVisual {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;}
.main .mainVisual .swiper-slide {overflow: hidden;}
.main .mainVisual .swiper-slide .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: no-repeat 50% 50%; background-size: cover; transition: transform 8s ease; transform: scale(1.2);}
.main .mainVisual .swiper-slide.slide1 .bg {background-image: url('../images/main/mainVisual.jpg');}
.main .mainVisual .swiper-slide.slide2 .bg {background-image: url('../images/main/mainVisual2.jpg');}
.main .mainVisual .swiper-slide-active .bg {transform: scale(1);}

.main .mainVisual_title {position: absolute; width: 100%; bottom: 180px; z-index: 1;}
.main .mainVisual_title p {font-size: 24px; font-weight: 400; color: #fff; margin-bottom: 30px;}
.main .mainVisual_title h1 {font-size: 70px; font-weight: 800; color: #fff; line-height: 1.4;}

.main .mainVisual .swiper-pagination {position: absolute; text-align: left;}
.main .mainVisual .swiper-pagination .swiper-pagination-bullet {position: relative; width: 50px; height: 5px; border-radius: 0; margin-right: 10px; background-color: #fff; opacity: .3;}
.main .mainVisual .swiper-pagination .swiper-pagination-bullet-active {background-color: #fff; opacity: 1;}

.main .mainVisual .slide_ctrl button {position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;}
.main .mainVisual .slide_ctrl button.prev {left: 10px;}
.main .mainVisual .slide_ctrl button.next {right: 10px;}

.scroll_down {position: absolute; bottom: 60px; right: 180px; text-align: center; z-index: 10;}
.scroll_down .mouse {position: relative; display: block; width: 12px; height: 19px; border: 2px solid #fff; border-radius: 6px; margin: 0 auto 10px; box-sizing: border-box;}
.scroll_down .mouse:before {content: ''; position: absolute; top: 2px; left: 50%; margin-left: -1px; width: 2px; height: 3px; background-color: #ddd; animation: scroll 1.5s infinite;}
.scroll_down span {font-size: 15px; font-weight: 500; color: #fff; writing-mode: vertical-rl; letter-spacing: 0;}

@keyframes scroll {
    0% {opacity: 0;}
    10% {transform: translateY(0); opacity: 1;}
    100% {transform: translateY(5px); opacity: 0;}
}

/* company */
.company {background: url('../images/main/sec1_bg.jpg') no-repeat 50% 50%; background-size: cover;}
.company .inner {display: flex; align-items: center; justify-content: space-between;}
.company .inner > * {opacity: 0; transform: translateY(-60px);}

.company .txt_cont {width: calc(100% - 540px);}
.company .img_cont {position: relative;}
.company .img_cont .img {position: relative; width: 540px; height: 0; padding-bottom: 115%; border-radius: 20px; overflow: hidden;}
.company .img_cont .img > img {position: absolute; top: 0; left: 0; width: 100%; min-height: 100%; max-height: none; min-width: 100%; object-fit: cover;}

.company .roll_btn {position: absolute; bottom: -70px; left: -155px; display: flex; align-items: center; justify-content: center; width: 200px; height: 200px; background-color: #000; border: 1px solid #000; border-radius: 50%; padding-left: 0; z-index: 1; transition: all .25s;}
.company .roll_btn span {font-size: 20px; font-weight: 400; color: #fff; line-height: normal;}
.company .roll_btn:after {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100% + 33%); height: calc(100% + 33%); background: url('../images/main/more_circle.png') no-repeat 50% 50%; background-size: contain; box-sizing: content-box; animation: rolltxt 7s infinite linear;}
.company .roll_btn:hover {background-color: #fff;}
.company .roll_btn:hover span {color: #000;}
.company .roll_btn:hover:after {animation-play-state: paused;}

@keyframes rolltxt {
  from {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
            transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
            transform: translate(-50%, -50%) rotate(360deg);
  }
}


/* oem odm */
.oem_odm .section_title .more_btn {position: absolute; bottom: 0; right: 0;}
.oem_odm .oem_cont {display: flex; justify-content: space-between; align-items: flex-start; gap: 20px 33px; margin-top: 60px;}
.oem_odm .oem_cont .item {position: relative; display: flex; flex: 1; flex-flow: column; justify-content: flex-end; transition: all .4s;}
.oem_odm .oem_cont .item .img_cont {position: relative; width: 100%; height: 400px; background: no-repeat 50% 50%; background-size: cover; overflow: hidden; border-radius: 20px;}
.oem_odm .oem_cont .item.item1 .img_cont {background-image: url('../images/main/oem_img1.jpg');}
.oem_odm .oem_cont .item.item2 .img_cont {background-image: url('../images/main/oem_img2.jpg');}
.oem_odm .oem_cont .item.item3 .img_cont {background-image: url('../images/main/oem_img3.jpg');}

.oem_odm .oem_cont .item.on {flex: 2.2;}
.oem_odm .oem_cont .item.item1.on .img_cont {background-image: url('../images/main/oem_img1_on.jpg');}
.oem_odm .oem_cont .item.item2.on .img_cont {background-image: url('../images/main/oem_img2_on.jpg');}
.oem_odm .oem_cont .item.item3.on .img_cont {background-image: url('../images/main/oem_img3_on.jpg');}

.oem_odm .oem_cont .item .txt_cont {margin-top: 20px;}
.oem_odm .oem_cont .item .txt_cont > strong {font-size: 20px; font-weight: 700; color: #888; line-height: 1.3;}

.oem_odm .oem_cont .item.on .txt_cont > strong {color: #000;}


/* portfolio */
.portfolio {background: url('../images/main/sec3_bg.png') no-repeat 50% 50%; background-size: cover; height: 100vh; overflow: hidden;}
.portfolio .inner {display: flex; justify-content: space-between; align-items: flex-end;}
/* photo main(큰 이미지) */
/* .portfolio .left_cont {position: absolute; left: 0; bottom: 0; z-index: 10; width: 620px;} */
.portfolio .left_cont {width: 620px;}
.portfolio .photo_main .slide_item a {display: block; width: 100%; height: 100%; background-color: #fff; border: 1px solid #000; border-radius: 10px; overflow: hidden;}
.portfolio .photo_main .slide_item a .img_cont {position: relative; width: 100%; height: 0; padding-bottom: 74%; overflow: hidden;}
.portfolio .photo_main .slide_item a .img_cont > img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; min-height: 100%; max-height: none; min-width: 100%; object-fit: contain;}
.portfolio .photo_main .slide_item a .txt_cont {padding: 40px 50px;}
.portfolio .photo_main .slide_item a .txt_cont strong {font-size: 30px; font-weight: 600; word-break: keep-all;}
.portfolio .photo_main .slide_item a .txt_cont p {font-size: 1rem; font-weight: 400; color: #666; margin-top: 30px;}

/* photo thumb(작은 이미지) */
.portfolio .right_cont {position: relative; width: calc(100% - (620px + 110px)); margin-left: 110px;}
.portfolio .right_cont .slide_ctrl {position: absolute; right: 0; bottom: 0;}

.portfolio .photo_thumb {width: calc(100% + ((100vw - 100%) / 2)); margin-top: 80px; overflow: hidden;}
.portfolio .photo_thumb .slick-list {overflow: visible;}
.portfolio .photo_thumb .slide_item {width: 400px; margin-right: 30px;}
.portfolio .photo_thumb .slide_item a {display: block; width: 100%; height: 100%; background-color: rgba(255, 255, 255, .8); border: 1px solid #ddd; border-radius: 10px; overflow: hidden;}
.portfolio .photo_thumb .slide_item a .img_cont {position: relative; width: 100%; height: 0; padding-bottom: 65%; overflow: hidden;}
.portfolio .photo_thumb .slide_item a .img_cont > img {position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 100%; min-height: 100%; max-height: none; min-width: 100%; object-fit: cover;}
.portfolio .photo_thumb .slide_item a .txt_cont {padding: 30px 40px;}
.portfolio .photo_thumb .slide_item a .txt_cont strong {font-size: 24px; font-weight: 600; height: 2.8em;}
.portfolio .photo_thumb .slide_item a .txt_cont p {display: none;}


/* faq */
.faq {background: linear-gradient(180deg, rgba(255, 255, 255, 1) 50%, rgba(209, 187, 217, .4));}
.faq .section_title > h3 {max-width: calc(100% - 200px);}
.faq .section_title .more_btn {position: absolute; right: 0; bottom: 0;}
.faq .faqList {border-top: 2px solid #000; border-bottom: 1px solid #000; margin-top: 60px;}
.faq .faqList li {display: block; overflow: hidden; transition: all .3s ease;}
.faq .faqList li + li {border-top: 1px solid #000;}
.faq .faqList .faq_tit {position: relative; padding: 40px 100px 40px 40px; cursor: pointer;}
.faq .faqList .faq_tit:before {content: 'Q'; position: absolute; top: 50%; left: 20px; transform: translateY(-50%); width: 60px; height: 60px; background-color: #000; font-size: 18px; font-weight: 500; color: #fff; text-align: center; line-height: 60px; border-radius: 50%;}
.faq .faqList .faq_tit p {font-size: 24px; font-weight: 600; color: #000; padding-left: 80px; word-break: keep-all;}
.faq .faqList .faq_tit .arw_btn {display: block; position: absolute; top: 50%; right: 40px; width: 18px; height: 12px; margin-top: -6px; background: no-repeat 50% 50%; background-image: url('../images/common/icon_down.png'); background-size: auto 12px;}
.faq .faqList .faq_cont {display: none; position: relative; padding: 0 40px 40px; font-size: 17px; font-weight: 400; color: #000; word-break: keep-all;}

.faq .faqList li.active .faq_tit:before {background-color: var(--main-color);}
.faq .faqList li.active .faq_tit .arw_btn {transform: rotate(180deg);}

.faq .contact_btn {background-color: var(--main-color); border-color: var(--main-color); text-align: center; padding-left: 0;}
.faq .contact_btn span {color: #fff;}
.faq .contact_btn:after {content: none;}

.faq .contact_btn:hover {background-color: #000; border-color: #000;}

/* drag cursor */
.cursor {position: fixed; top: 0; left: 0; z-index: 10; pointer-events: none; mix-blend-mode: hard-light;}
.cursor .cont {display: flex; justify-content: center; align-items: center; flex-direction: column; background-color: #000; width: 100px; height: 100px; transform: translate(-50%, -50%); border-radius: 50%; opacity: 0; transition: all .2s;}
.cursor .cont:after {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100% + 33%); height: calc(100% + 33%); background: url('../images/main/view_circle.png') no-repeat 50% 50%; background-size: contain; box-sizing: content-box; animation: rolltxt 7s infinite linear;}
.cursor .cont .dot {display: block; width: 8px; height: 8px; background-color: #fff; border-radius: 50%;}
.cursor.on .cont {width: 100px; height: 100px; opacity: 1;}



/* **************************************** *
 * responsive
 * **************************************** */
@media (max-width: 1560px) {
     /* portfolio */
     .portfolio .left_cont {position: relative;}

}

@media (max-width: 1440px) {
     /* section common */
     .section_title > h3 {font-size: 44px; margin-top: 30px;}
     .section_title > p {font-size: 20px;}

     /* main visual section */
     .main .mainVisual_title {bottom: 80px;}
     .main .mainVisual_title p {font-size: 20px;}
     .main .mainVisual_title h1 {font-size: 60px;}

     .scroll_down {right: 4%;}

     /* company */
     .company .roll_btn {bottom: 0; left: -10%;}

     /* portfolio */
     .portfolio .left_cont {width: 540px;}
     .portfolio .right_cont {width: calc(100% - (540px + 110px));}

     .portfolio .photo_main .slide_item a .txt_cont strong {font-size: 26px;}
     .portfolio .photo_thumb .slide_item {height: auto;}
     .portfolio .photo_thumb .slide_item a .txt_cont strong {font-size: 20px;}
}

@media (max-width: 1280px) {
     /* section common */
     .section_title > h3 {font-size: 36px;}

     /* slide common */
     .slide_ctrl button {width: 50px; height: 50px;}

     /* main visual section */
     .main .mainVisual .swiper-pagination {margin-bottom: 80px;}
     .main .mainVisual_title h1 {font-size: 56px;}
     
     /* company */
     .company .roll_btn {width: 160px; height: 160px;}
     .company .roll_btn span {font-size: 1rem;}

     /* oem odm */
     .oem_odm .section_title .more_btn {position: relative; margin-top: 20px;}
     .oem_odm .oem_cont {margin-top: 30px;}

     /* portfolio */
     .portfolio .photo_main .slide_item a .txt_cont {padding: 30px 30px;}
     .portfolio .right_cont .slide_ctrl {position: relative; margin-top: 20px;}
     .portfolio .photo_thumb {margin-top: 30px;}
     .portfolio .photo_thumb .slide_item {height: auto;}
     .portfolio .photo_thumb .slide_item a .txt_cont {padding: 20px 20px;}
     .portfolio .photo_thumb .slide_item a .txt_cont strong {font-size: 17px;}

     /* faq */
     /* .faq .section_title .more_btn {position: relative; margin-top: 20px;} */
     .faq .faqList {margin-top: 30px;}
     .faq .faqList .faq_tit {padding: 30px 80px 30px 30px;}
     .faq .faqList .faq_tit:before {width: 50px; height: 50px; line-height: 50px;}
     .faq .faqList .faq_tit p {font-size: 20px; padding-left: 60px;}

     .faq .faqList .faq_cont {padding: 0 30px 30px;}
    
}


@media (max-width: 1024px) {
     /* fullpage */
     .fp-section.fp-table:not(.main),
     .fp-slide.fp-table {display: block; width: 100%; height: auto !important; table-layout: inherit;}
     .fp-section.fp-table .fp-tableCell {display: block; height: auto !important;}

     /* section */
     .section {height: auto; padding: 100px 0;}
     .section_title > h3 {font-size: 32px;}
     .section_title > p {font-size: 17px; margin-top: 40px;}

     /* more button */
     .more_btn {width: 160px; height: 50px;}
     .more_btn span {line-height: 48px; font-size: 1rem;}

     /* main visual section */
     .fp-section.fp-table.main {height: 768px !important; padding: 0 !important;}
     .main .mainVisual_title h1 {font-size: 48px;}

    /* company */
    .company .img_cont .img {width: 460px;}

    /* oem odm */
    .oem_odm .oem_cont .item .txt_cont > strong {font-size: 17px;}

    /* portfolio */
    .portfolio .inner {margin: 0;}
    .portfolio .left_cont {display: none;}
    .portfolio .right_cont {width: 100%; margin-left: 0;}
    .portfolio .photo_thumb {margin: 30px -5px 0;}
    .portfolio .photo_thumb .slide_item {margin: 0 10px;}
}


@media (max-width: 768px) {
     .section_title > strong {font-size: 1rem;}
     .section_title > h3 {font-size: 24px;}
     .section_title > p {margin-top: 20px;}

     .main .mainVisual_title {bottom: auto; top: 50%; transform: translateY(-50%);}
     .main .mainVisual_title h1 {font-size: 40px;}

     .main .mainVisual .slide_ctrl button {bottom: 40px; top: auto; transform: none;}
     .main .mainVisual .slide_ctrl button.next {right: auto; left: 70px;}

     /* company */
     .company .inner {display: block;}
     .company .txt_cont {width: 100%;}
     .company .section_title {margin-bottom: 40px;}
     .company .img_cont {float: right;}

     /* oem odm */
     .oem_odm .oem_cont {flex-wrap: wrap; flex-direction: column;}
     .oem_odm .oem_cont .item {width: 100%;}
     .oem_odm .oem_cont .item.on {flex:1;}
     .oem_odm .oem_cont .item .img_cont {height: 280px;}
     .oem_odm .oem_cont .item .txt_cont {margin-top: 10px;}

     /* faq */
     .faq .faqList .faq_tit p {font-size: 17px;}
     .faq .faqList .faq_cont {font-size: 1rem;}
}

@media (max-width: 640px) {
    
}

@media (max-width: 576px) {
    /* section common */
    .section {padding: 80px 0;}

    /* main visual section */
    .main .mainVisual .swiper-pagination {margin-bottom: 40px;}
    .main .mainVisual_title p {font-size: 1rem;}

    /* company */
    .company .img_cont {float: none;}
    .company .img_cont .img {width: 100%;}
    .company .roll_btn {right: 10%; left: auto;}

    /* faq */
    .faq .section_title > h3 {max-width: 100%;}
    .faq .section_title .more_btn {position: relative; margin-top: 20px;}
}

@media (max-width: 420px) {
     /* section common */
     .section_title > h3 {font-size: 20px; line-height: 1.4;}
     .section_title > h3 > br {display: none;}
     .section_title > p {font-size: 1rem;}
     .section_title > p > br {display: none;}

     /* main visual section */
     .main {height: 569px;}
     .main .mainVisual_title h1 {font-size: 32px; word-break: keep-all;}

     /* portfolio */
     .portfolio .photo_thumb .slide_item a .txt_cont {text-align: center;}

     /* faq */
     .faq .faqList .faq_tit:before {width: 40px; height: 40px; line-height: 40px; left: 10px;}
     .faq .faqList .faq_tit p {padding-left: 40px;}
     .faq .faqList .faq_tit .arw_btn {right: 10px;}
}

@media (max-width: 360px) {

     /* main visual section */
     .main .mainVisual_title h1 {font-size: 28px;}

     /* company */
     .company .roll_btn {width: 140px; height: 140px;}

     /* faq */
     .faq .faqList .faq_tit {padding: 20px 40px 20px 20px;}
     .faq .faqList .faq_cont {padding: 0 20px 20px;}
}