@charset "utf-8";

/* 공통 */
.inner {padding: 0 20px;max-width: 1520px;width: 100%;margin: 0 auto;}

/* 첫번째 섹션 */
.main-first {padding: 200px 0;background-color: #fddc00;background-image: url("/assets/img/first_img1.png");background-repeat: no-repeat;background-position: center right;background-size: contain;}
.main-first .inner {display: flex;align-items: center;height: 100%;}
.main-first .txt p {font-size: 25px;}
.main-first .txt h4 {font-size: 88px;font-weight: 300;margin-top: 50px;line-height: 1.1;}
.main-first .txt h4 strong {font-weight: 700;}
.main-first .btn {display: block;padding: 30px;min-width: 300px;width: fit-content;text-align: center;background-color: #000;font-size: 38px;color: #fff;border-radius: 80px;line-height: 1;margin-top: 100px;}



/* 두번째 섹션 */
.main-second {padding-top: 200px;}
.main-second .title {text-align: center;font-size: 60px;font-weight: 300;line-height: 1.3;}
.main-second .title b {font-weight: 500;}
.main-second .img {display: block;width: 100%;height: auto;object-fit: contain;margin-top: 140px;}


/* 세번째 섹션 */
.main-third {padding: 200px 0;}
.main-third .title {text-align: center;}
.main-third .title h4 {font-weight: 700;font-size: 55px;color: #fdd000;}
.main-third .title p {font-size: 43px;line-height: 1.2;margin-top: 35px;}
.main-third .title p b {font-weight: 700;}
.main-third .article {margin-top: 120px;display: flex;justify-content: space-between;column-gap: 100px;}
.main-third .article .left {width: calc(30% - 50px);text-align: center;}
.main-third .article .right {width: calc(70% - 50px);}
.main-third .article .left-img {margin: 0 auto;}
.main-third .article .left-title {font-weight: 700;font-size: 34px;line-height: 1.1;margin-top: 27px;}
.main-third .article .left-title b {color: #0062d7;}
.main-third .article .left-txt {margin-top: 40px;font-size: 28px;line-height: 1.3;}

.mission .title {font-size: 34px;font-weight: 700;color: #fff;padding: 16px 30px;border-radius: 30px;background-color: #000;width: fit-content;margin: 0 auto;}
.mission-list {position: relative;padding: 50px 30px;display: flex;flex-direction: column;row-gap: 20px;}
.mission-list::before {content: "";position: absolute;top: -30px;left: 0;z-index: -1;display: block;width: 100%;height: calc(100% + 80px);background: linear-gradient(0deg,rgba(239, 239, 239, 1) 0%, rgba(198, 198, 198, 1) 100%);border-radius: 30px;border: 3px solid #c6c6c6;}
.mission-list li {display: flex;align-items: center;column-gap: 20px;padding: 24px;border-radius: 180px;background-color: #fff;}
.mission-list li img {}
.mission-list li p.tit {font-size: 30px;font-weight: 700;}
.mission-list li p:not(.tit) {font-family: var(--suit);font-size: 24px;line-height: 1.2;}
.mission-list li p:not(.tit) b {font-weight: 700;}

.mg-0-auto {margin: 0 auto;}


/* 네번째 섹션 */
.main-fourth {padding: 200px 0;background: url("/assets/img/main_fourth_bg.png") no-repeat center center;background-size: cover;}
.main-fourth .title {text-align: center;}
.main-fourth .title h4 {font-size: 55px;font-weight: 300;line-height: 1.3;color: #fff;letter-spacing: -.05em;}
.main-fourth .title h4 b {font-weight: 500;}
.main-fourth .content {margin-top: 70px;display: flex;flex-wrap: wrap;align-items: center;justify-content: center;gap: 50px;}


/* 다섯번째 섹션 */
.main-fifth {padding: 200px 0;background-color: #000;}
.main-fifth .title {text-align: center;}
.main-fifth .title h4 {font-size: 55px;font-weight: 500;color: #fff;letter-spacing: -.05em;line-height: 1.3;}
.main-fifth .title h4 b {color: #fde800;font-weight: 700;}
.main-fifth .title .icon {display: inline;vertical-align: middle;}
.main-fifth .title p {margin-top: 40px;font-size: 25px;font-weight: 300;color: #fff;}
.process-list {margin-top: 120px;display: flex;flex-wrap: wrap;justify-content: center;gap: 100px 50px;text-align: center;}
.process-list li {display: flex;align-items: center;column-gap: 50px;}
.process-list li:not(:first-child)::before {content: ">";display: block;color: #fff;font-size: 60px;font-weight: 300;}
.process-list li strong {font-size: 37px;font-weight: 700;color: #fff;}
.process-list li p {margin-top: 32px;font-size: 30px;color: #abadc5;line-height: 1.2;}
.process-btn {display: block;width: fit-content;margin: 100px auto 0;font-size: 30px;font-weight: 500;color: #fde800;position: relative;}
.process-btn::after {content: "";width: 100%;height: 1px;position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);background-color: #fde800;transition: width .3s;}
.process-btn:hover::after {width: 0;transition: width .3s;}


/* 여섯번째 섹션 */
.main-sixth {padding: 140px 0;background-color: #f7f7f7;}
.main-sixth .title h4 {font-size: 52px;font-weight: 500;letter-spacing: -.05em;color: #333;text-align: center;line-height: 1.2;}
.review-slider {margin-top: 100px;position: relative;}
.review-slider .btn-wrap {max-width: 1240px;width: 100%;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);display: flex;justify-content: space-between;padding: 0 20px;z-index: 10;}
.review-slider .review-btn {width: 72px;height: 72px;border-radius: 50%;background-color: #e3e3e3;color: #fff;font-size: 40px;z-index: 10;display: flex;justify-content: center;align-items: center;}
.review-slider .swiper-slide {width: 1000px;padding: 40px 0;}
.review-slider .swiper-slide .box {background-color: #fff;text-align: center;position: relative;padding-top: 183px;padding-bottom: 60px;box-shadow: 0 16px 21px rgba(0, 0, 0, .05);}
.review-slider .swiper-slide .box::before {content: "";display: block;width: 85px;height: 65px;background: url("/assets/img/deco_left.png") no-repeat center center;background-size: contain;position: absolute;top: -20px;left: 70px;}
.review-slider .swiper-slide .box::after {content: "";display: block;width: 85px;height: 65px;background: url("/assets/img/deco_left.png") no-repeat center center;background-size: contain;position: absolute;bottom: -20px;right: 70px;transform: rotate(180deg);}
.review-slider .swiper-slide .box .thumb {position: absolute;transform: translate(-50%, -40px);top: 0;left: 50%;}
.review-slider .swiper-slide .box .text {display: flex;flex-direction: column;row-gap: 60px;padding: 0 160px;}
.review-slider .swiper-slide .box .text .name {font-size: 30px;line-height: 1.3;font-weight: 700;}
.review-slider .swiper-slide .box .text .desc {font-size: 25px;font-weight: 300;line-height: 1.5;}
.review-slider .swiper-slide .box .text .desc b {font-weight: 500;}
.review-slider .swiper-slide .box .text .star {font-size: 30px;color: #fdd000;}


/* 일곱번째 섹션 */
.main-seventh {padding: 160px 0;}
.main-seventh .title h4 {text-align: center;font-size: 55px;font-weight: 300;line-height: 1.3;}
.main-seventh .title h4 b {font-weight: 500;}
.main-seventh .title h4 b.yellow {color: #fdd000;}
.portfolio-slider {margin-top: 100px;width: 100%;overflow: hidden;} 
.portfolio-slider .swiper-wrapper {transition-timing-function: linear;} 
.portfolio-slider .swiper-slide img {border-radius: 40px;} 


/* 팝업 */
.popup-section {position: fixed;width: 100%;height: 100%;z-index: 100;top: 0;left: 0;overflow: hidden;background: rgba(0, 0, 0, .8);font-family: var(--suit);display: none;}
.popup-section.active {display: block;}
.popup-section .inner {display: flex;justify-content: center;align-items: center;height: 100%;}
.popup-section .popup-box {max-width: 640px;background-color: #fff;border-radius: 14px;padding: 60px 40px;position: relative;}
.popup-section .popup-box .popup-title {font-size: 28px;font-weight: 900;text-align: center;padding-bottom: 40px;}
.popup-section .popup-box .close_popup_btn {position: absolute;top: 30px;right: 30px;font-size: 16px;}
.popup-table {font-family: var(--suit);border-top: 2px solid #000;border-bottom: 2px solid #000;}
.popup-table col:first-of-type {width: 130px;}
.popup-table tr {border-bottom: 1px solid #ccc;}
.popup-table th {padding: 20px 0;text-align: left;font-weight: 900;display: flex;align-items: center;gap: 4px;}
.popup-table th::before {content: "";display: inline-block;width: 5px;height: 5px;border-radius: 50%;background: #ffe100;}
.popup-table td {padding: 10px 0;}

.input-basic {width: 100%;font-family: var(--suit);border-radius: 5px;padding: 6px;font-size: 14px;border: 1px solid #ccc;}
textarea.input-basic {resize: none;}

.check-box {display: flex;gap: 10px 20px;align-items: center;flex-wrap: wrap;color: #505050;}
.check-box input[type=checkbox] {display: none;}
.check-box label {cursor: pointer;}
.check-box span {display: flex;align-items: center;gap: 8px;color: #000;word-break: keep-all;font-size: 16px;}
.check-box span::before {content: '\e92b';font-family: 'xeicon';display: inline-flex;justify-content: center;align-items: center;color: #ccc;font-size: 18px;}
.check-box input[type=checkbox]:checked + span::before {color: #000;}
.check-box input[type=checkbox]:checked + span {color: #000;}


.popup-link {font-family: var(--suit);text-decoration: underline;color: #888;}
.popup_submit_btn {font-family: var(--suit);font-size: 16px;font-weight: 900;color: #000;background: #ffe100;padding: 10px;border-radius: 30px;max-width: 190px;width: 100%;display: block;margin: 30px auto 0;transition: .3s;}
.popup_submit_btn:hover {background: #000;color: #fff;transition: .3s;}

.check-wrap {max-width: 320px;width: 100%;margin: 30px auto 0;}
body.scroll-none {overflow: hidden;}
.privacy-txt {max-height: 100px;overflow-y: scroll;padding: 16px;border-radius: 5px;line-height: 1.5;background-color: #f5f5f5;font-size: 15px;display: none;}
.privacy-txt.active {display: block;}


@media screen and (max-width: 1520px) {
    .main-first {background-position: bottom right;background-size: 50%;}
}
@media screen and (max-width: 1024px) {
    .main-first {background-position: bottom right;background-size: 50%;}
    .main-first .txt p {font-size: 20px;}
    .main-first .txt h4 {font-size: 80px;margin-top: 40px;}
    .main-first .btn {padding: 24px;min-width: 240px;font-size: 24px;margin-top: 80px;}

    .main-second .title {font-size: 50px;}
    .main-second .img {margin-top: 100px;}

    .main-third .title h4 {font-size: 50px;}
    .main-third .title p {font-size: 30px;margin-top: 30px;}
    .main-third .article {margin-top: 100px;row-gap: 50px;flex-direction: column;}
    .main-third .article .left {width: 100%;}
    .main-third .article .right {width: 100%;}
    .main-third .article .left-title {font-size: 24px;margin-top: 24px;}
    .main-third .article .left-txt {margin-top: 24px;font-size: 24px;}

    .mission .title {font-size: 32px;padding: 16px 24px;border-radius: 60px;}
    .mission-list {padding: 50px 30px;row-gap: 20px;}
    .mission-list::before {height: calc(100% + 30px);}
    .mission-list li p.tit {font-size: 24px;}
    .mission-list li p:not(.tit) {font-size: 16px;}

    .main-fourth .title h4 {font-size: 50px;}
    .main-fourth .content {margin-top: 50px;}

    .main-fifth .title h4 {font-size: 50px;}
    .main-fifth .title p {font-size: 24px;line-height: 1.3;margin-top: 24px;}
    .process-list {margin-top: 100px;column-gap: 20px;}
    .process-list li {column-gap: 20px;}
    .process-list li:not(:first-child)::before {font-size: 40px;}
    .process-list li strong {font-size: 32px;}
    .process-list li p {margin-top: 16px;font-size: 24px;}
    .process-btn {margin: 100px auto 0;font-size: 24px;}

    .main-sixth .title h4 {font-size: 50px;}
    .review-slider {margin-top: 100px;position: relative;}
    .review-slider .review-btn {width: 48px;height: 48px;font-size: 24px;}
    .review-slider .swiper-slide {max-width: 1000px;width: 100%;}
    .review-slider .swiper-slide .box .text {row-gap: 32px;padding: 0 100px;}
    .review-slider .swiper-slide .box .text .name {font-size: 24px;}
    .review-slider .swiper-slide .box .text .desc {font-size: 20px;}
    .review-slider .swiper-slide .box .text .star {font-size: 20px;}

    .main-seventh .title h4 {font-size: 50px;}
    .portfolio-slider .swiper-slide img {border-radius: 24px;} 
}
@media screen and (max-width: 768px) {
    .main-first .txt p {font-size: 16px;}
    .main-first .txt h4 {font-size: 60px;margin-top: 24px;}
    .main-first .btn {padding: 20px;min-width: 200px;font-size: 20px;margin-top: 24px;}

    .main-second .title {font-size: 40px;}

    .main-third .title h4 {font-size: 40px;}
    .main-third .title p {font-size: 24px;margin-top: 24px;}
    .mission .title {font-size: 24px;}
    .mission-list {padding: 40px 20px;}
    .mission-list::before {top: -20px;}

    .main-fourth .title h4 {font-size: 40px;}
    .main-fifth .title h4 {font-size: 40px;}
    .main-sixth .title h4 {font-size: 40px;}
    .main-seventh .title h4 {font-size: 40px;}
}
@media screen and (max-width: 480px) {
    .main-first {background-size: 90%;padding: 100px 0 400px;}
    .main-first .txt h4 {font-size: 50px;}

    .main-second {padding-top: 100px;}
    .main-second .title {font-size: 32px;}

    .main-third {padding: 100px 0;}
    .main-third .title h4 {font-size: 32px;}
    .main-third .title p {font-size: 20px;margin-top: 16px;}
    .main-third .article .left-img {width: 160px;height: auto;}
    .main-third .article .left-title {font-size: 20px;}
    .main-third .article .left-txt {font-size: 20px;margin-top: 16px;}
    .mission .title {font-size: 20px;}
    .mission-list {padding: 32px 20px;}
    .mission-list::before {top: -20px;}
    .mission-list li {border-radius: 40px;flex-direction: column;row-gap: 24px;}
    .mission-list li p.tit {font-size: 20px;}
    .mission-list li .txt {width: 100%;}

    .main-fourth {padding: 100px 0;}
    .main-fourth .title h4 {font-size: 32px;}
    .main-fourth .content {margin-top: 40px;gap: 24px;}
    
    .main-fifth {padding: 100px 0;}
    .main-fifth .title h4 {font-size: 32px;}
    .main-fifth .title .icon {width: 32px;}
    .main-fifth .title p {font-size: 20px;}
    .process-list {margin-top: 80px;row-gap: 24px;}
    .process-list li {flex-direction: column;row-gap: 24px;}
    .process-list li:not(:first-child)::before {transform: rotate(90deg);font-size: 24px;}
    .process-list li strong {font-size: 24px;}
    .process-list li p {font-size: 20px;}
    .process-btn{margin: 40px auto 0;font-size: 20px;}

    .main-sixth {padding: 100px 0;}
    .main-sixth .title h4 {font-size: 32px;}
    .review-slider {margin-top: 40px;}
    .review-slider .swiper-slide {width: calc(100% - 40px);}
    .review-slider .swiper-slide .box {padding: 100px 0 40px;}
    .review-slider .swiper-slide .box::before {width: 40px;top: -30px;left: 20px;}
    .review-slider .swiper-slide .box::after {width: 40px;bottom: -30px;right: 20px;}
    .review-slider .swiper-slide .box .thumb {width: 100px;}
    .review-slider .swiper-slide .box .text {row-gap: 24px;}
    .review-slider .swiper-slide .box .text .desc {font-size: 16px;}

    .main-seventh {padding: 100px 0;}
    .main-seventh .title h4 {font-size: 32px;}
    .portfolio-slider {margin-top: 40px;}

    .popup-table col:first-of-type {width: 80px;}
}