@charset "utf-8";

.main-visual {position: relative; margin-top: -163px;}
.main-visual .swiper .swiper-slide {position: relative; height: 47vw; background-position: center; background-size: cover; background-repeat: no-repeat;}
.main-visual .swiper .swiper-slide::before {position: absolute; width: 100%; height: 100%; background-color: #000; opacity: 0.3; top: 0; left: 0; display: block; content: ''; z-index: 3}
.main-visual .swiper .swiper-slide::after {position: absolute; width: 200px; height: 100%; background-color: #000; top: 0; right: 0; display: block; content: ''; z-index: 5;}
.main-visual .swiper .swiper-slide img {width: 100%; height: 100%; object-fit: cover;}
.main-visual .main-info {position: absolute; bottom: 11vw;  z-index: 10;}
.main-visual .main-info h2 {font-size: 36px; color: #fff; font-weight: 600}
.main-visual .main-info h2 br.none {display: none;}
.main-visual .main-info p {font-size: 24px; color: #fff; font-weight: 700; padding-top: 16px;}
.main-visual .main-info h2 b {font-weight: 700; font-size: 2.5rem;}
.main-visual .bn-control-wrap {position: absolute; width: calc(100% - 20vw); margin: 0 10vw; bottom: 7.5vw; z-index: 10;}
.main-visual .bn-txt {margin-bottom: 38px;}
.main-visual .bn-txt span{font-size: 18px; line-height: 28px; color: #fff;}
.main-visual .bn-txt p {font-size: 36px; line-height: 45px; color: #fff; font-weight: 700; margin-top: 5px;}
.main-visual .bn-controls{display: flex; align-items: center; width: 100%; max-width: 353px; column-gap: 20px;}
.main-visual .bn-progress{pointer-events: none; flex: 1 1 auto; width: max-content; height: 2px; background: #fff; overflow: hidden;}
.main-visual .bn-progress__bar{width: 0; height: 100%; background-color: var(--text1);}
.main-visual .bn-fraction {width: fit-content !important; color: #fff !important; font-size:1rem;}
.main-visual .bn-fraction .swiper-pagination-current {font-weight: 700;}
.main-visual .bn-controls .bn-prev,
.main-visual .bn-controls .bn-next {width: 30px; height: 30px; border-radius: 50%; border: 1px solid #fff; background-color: rgba(0, 0, 0, 0.4); display: flex; align-items: center; justify-content: center;}
.main-visual .bn-controls .bn-prev svg,
.main-visual .bn-controls .bn-next svg {width: auto; height: 11px;}
.main-visual .bn-controls .bn-toggle{display: flex; align-items: center; justify-content: center; cursor: pointer;}
.main-visual .mouse-wheel {position: absolute; right: 90px; bottom: 177px; z-index: 9;}
.main-visual .mouse-wheel > span {position: relative; width: 22px;height: 33px;border: 2px solid #fff;box-sizing: border-box; border-radius: 12px;}
.main-visual .mouse-wheel > span::before {position:absolute; top: 5px;left: 50%; margin-left: -1px; content: '';width: 2px;height: 6px;background-color: #fff; border-radius: 100%;-webkit-animation: sdb 2s infinite;animation: sdb 2s infinite; box-sizing: border-box;}
.main-visual .mouse-wheel .scroll {position:absolute; bottom: -80px; left: 50%; display: flex; align-items: center; column-gap: 6px;transform: translate(-50%, 0) rotate(90deg); }
.main-visual .mouse-wheel .scroll p {color: #fff; font-size: 14px; text-align: center; word-break: keep-all;}

@-webkit-keyframes sdb {
  0% {
    -webkit-transform: translate(0, 0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    -webkit-transform: translate(0, 20px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes sdb {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    transform: translate(0, 20px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

section:not(.main-visual) h4 {font-weight: 600; font-size: 16px; padding-bottom: 16px;}
section:not(.main-visual) h2 {font-weight: 600; font-size: 32px; line-height: 45px;}

.main-swiper {position: relative; padding: 200px 0; display: flex; column-gap: 24px;}
.main-swiper::before {position: absolute; z-index: -1; right: 0; top: 0; width: 61vw; height: 470px; background-color: var(--bg2); display: block; content: '';}
.main-swiper .left {padding-left: 10vw; max-width: 660px; flex-shrink: 0;}
.main-swiper .left > p {font-size: 20px; color: var(--text3); font-weight: 500; line-height: 37px; padding-top: 20px; padding-bottom: 50px; word-break: keep-all;}
.main-swiper .left > p b {color: var(--text1); font-weight: 600;}

.main-swiper .right-swiper {overflow: hidden;}
.main-swiper .right-swiper .swiper-pagination-progressbar {position: revert; width: calc(100% - 10vw); height: 6px; background: var(--bg2);}
.main-swiper .right-swiper .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background: var(--gray2);}
.main-swiper .right-swiper .smt_10 .sct_li {position: relative; width: 364px !important;}
.main-swiper .right-swiper .smt_10 .sct_li .sct_ct_wrap {position: absolute; bottom: 0; width: 100%; height: 160px; padding: 0 38px; display: flex; flex-direction: column; justify-content: center; background-color: rgba(0, 0, 0, 0.3);}
.main-swiper .right-swiper .smt_10 .sct_li .sct_ct_wrap .sct_txt {color: #fff !important; margin: 0 !important;}
.main-swiper .right-swiper .smt_10 .sct_li .sct_ct_wrap .sct_dict,
.main-swiper .right-swiper .smt_10 .sct_li .sct_ct_wrap .delivery_cost {color: #fff !important;}


.main-service {position: relative; padding-bottom: 150px;}
.main-service::before {position: absolute; z-index: -1; left: 0; bottom: 0; width: 61vw; height: 420px; background-color: var(--bg2); display: block; content: '';}
.main-service h2 {padding-bottom: 110px;}
.main-service .service-link {display: flex;}
.main-service .service-link > a {width: calc(100% / 3); height: 400px; background-color: #fff; border: 1px solid var(--line); flex-direction: column; display: flex; justify-content: center; padding: 0 100px; transition: all 0.3s;}
.main-service .service-link > a:hover {border-top: 4px solid var(--text1); margin-top: -60px;}
.main-service .service-link > a:hover svg path {fill: var(--primary);}
.main-service .service-link > a .gray {color: var(--text3); padding-top: 70px; padding-bottom: 10px;}
.main-service .service-link > a .more-btn-l span {word-break: keep-all;}


/* 반응형 */
@media screen and (max-width: 1520px) {

    .main-visual .main-info,
    .main-visual .bn-control-wrap {width: calc(100% - 40px); margin: 0 20px;}
    .main-visual .swiper .swiper-slide {height: 66vw;}

    .main-swiper .left {padding-left: 20px; max-width: 486px;}
}
@media screen and (max-width: 1280px) {

    .main-visual {margin-top: -80px;}
    .main-visual .bn-control-wrap {bottom: 6.5vw;}

    .main-visual .mouse-wheel,
    .main-visual .swiper .swiper-slide::after {display: none;}

    .main-service .service-link > a {padding: 0 46px;}

}
@media screen and (max-width: 1024px) {

    .main-visual .main-info h2 {font-size: 30px;}
    .main-visual .main-info p {font-size: 20px; padding-top: 10px;}

    section:not(.main-visual) h2 {font-size: 24px; line-height: normal;}

    .main-swiper .left {max-width: 43vw;}
    .main-swiper .left > p {font-size: 18px; line-height: 1.6;}
    .main-swiper .right-swiper .smt_10 .sct_li {width: 240px !important;}
    .main-swiper .right-swiper .smt_10 .sct_li .sct_ct_wrap {padding: 0 20px;}

    .main-service h2 {padding-bottom: 30px;}
    .main-service .service-link > a {height: 300px;}
    .main-service .service-link > a > svg {width: 56px; height: 56px; flex-shrink: 0;}
    .main-service .service-link > a .gray {font-size: 15px; padding-top: 40px;}
}

/* 반응형 */
@media screen and (max-width: 768px) {

    .main-visual .swiper .swiper-slide {height: 460px;}
    .main-visual .main-info {bottom: 87px;}
    .main-visual .main-info p {font-size: 2.7vw; line-height: 3.7vw;}
    .main-visual .main-info h2 {font-size: 4.3vw;}
    .main-visual .main-info h2 br {display: block;}
    .main-visual .bn-control-wrap {bottom: 30px;}
    .main-visual .bn-fraction,
    .main-visual .bn-progress {display: none !important;}
    .main-visual .bn-controls {max-width: min-content; justify-content: center; column-gap: 20px;}
    .main-visual .bn-controls .bn-toggle {margin: 0;}

    .main-swiper::before,
    .main-service::before {display: none;}

    .main-swiper {padding: 60px 0 100px 0; flex-direction: column; row-gap: 20px;}
    .main-swiper .left {padding-left: 0; padding: 0 20px; max-width: none; width: 100%;}
    .main-swiper .left > p {padding-bottom: 100px; padding-top: 30px;}
    .main-swiper .right-swiper {padding-left: 20px;}
    .main-swiper .right-swiper .swiper-pagination-progressbar {width: calc(100% - 20px);}

    .main-service {padding-bottom: 100px;}
    .main-service .service-link {flex-wrap: wrap; row-gap: 30px;}
    .main-service .service-link > a {width: 100%; height: 260px; transition: none;}
    .main-service .service-link > a:hover {margin-top: 0;}

}
@media screen and (max-width: 500px) {

    .main-visual {margin-top: -60px;}
    .main-visual .main-info,
    .main-visual .bn-control-wrap {width: calc(100% - 32px); margin: 0 16px;}

    section:not(.main-visual) h4 {font-size: 15px; padding-bottom: 10px;}
    section:not(.main-visual) h2 {font-size: 18px;}

    .main-swiper .left {padding: 0 16px;}
    .main-swiper .left > p {font-size: 16px;}
    .main-swiper .right-swiper {padding-left: 16px;}
    .main-swiper .right-swiper .swiper-pagination-progressbar {width: calc(100% - 16px);}
    .main-swiper .right-swiper .smt_10 .sct_li {width: 168px !important;}
    .main-swiper .right-swiper .smt_10 .sct_li .sct_ct_wrap {height: 144px; padding: 0 8px;}
}

@media screen and (max-width: 310px) {


}

/***************/
/***************/
/***************//***************/
/***************/
/***************/
/***************//****
/***************/
/***************/
/***************//***
/***************/
/***************/
/***************//***************/
/***************/
/***************/
/***************//****
/***************/
/***************/
/***************//***************/
/***************/
/***************/
/***************//***************/
/***************/
/***************/
/***************************//***************/
/***************/
/***************/
/***************/
/***************//***************/
/***************/
/***************//***************/
/***************/
/***************************//***************/
/***************/
/***************/
/***************/
/***************//***************/
/***************/
/***************/
/***************/
/***************/
/***************/
/***************/
/***************/
/***************/
/***************/
/***************/
/***************/
/***************/
/***************//***************/
/***************/
/***************/
/***************/
/***************//***************/
/***************/
/***************/
/***************/
/***************/
/***************/
/***************/
/***************/
/***************/
/***************/
/***************/
/***************/
/***************/
/***************/
/***************//*****
/***************/
/***************/
/***************//***************/
/***************/
/***************/
/***************/
/***************/
/***************/
/***************/
/***************//***************/
/***************/
/***************/
/***************/
/***************/
/***************/
/***************/
/***************/
/***************/
/***************/
/***************/
/***************/
/***************//***************/
/***************/
/***************/
/***************/
/***************/
/***************/
/***************//***************/
/***************/
/***************/
/***************/
/***************/
/***************/
/***************/
/***************/
/***************/