@charset "utf-8";
/* 공통 */
section {position: relative;}
.con {max-width: 1625px; margin: 0 auto;}
.sec-title {font-size: 42px; font-weight: 700; text-align: center; margin-bottom: 80px; color: #fff;}
.sec-subtitle {color: #aeaeae; font-size: 18px; text-align: center; font-size: 18px;}
/* .sec-con {margin-top: 50px;} */
.top {width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; position: fixed; right: 40px; bottom: 100px; cursor: pointer; display: none; z-index: 8;}
.quick {position: fixed; top: 50%; right: 0; transform: translateY(-50%); z-index: 8;}
.quick img {width: 125px;}
.scroll {position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%); color: #fff; text-align: center;}
.scroll img {margin-top: 12px;}
.page-title {color: #fff; font-size: 65px; font-weight: 600; line-height: 125%; text-align: center;}
.intro-sec1 > p:nth-child(1) {font-size: 24px; font-weight: 300; margin-top: 30px; color: #e9e9e9;}
.underline {text-decoration: underline;}

.blue {color: #2a82c5;}
.yellow {color: #ffeb63;}
.gold {color: #f3a308;}

.btn-wrap {display: flex;}
.btn-normal {border-radius: 40px; font-size: 26px; display: inline-block;}
.btn-gray {background-color: #6b6b6b!important; color: #fff;}
.btn-navy {background-color: #1c212d!important; color: #fff;}

.input-check {display: flex; justify-content: center; align-items: center;}
.input-check label {font-size: 15px; color: #999; cursor: pointer;}
.input-check .label-cb {width: 13px; height: 13px;}
.input-check input[type=checkbox] {width: 0; height: 0; display: none;}
.input-check input[type=checkbox] + label.label-cb {display: inline-block; border: none; cursor: pointer; margin-right: 8px; vertical-align: sub; border: 1px solid #999;}
.input-check input[type="checkbox"]:checked + label.label-cb {position: relative;}
.input-check input[type="checkbox"]:checked + label.label-cb::after {content: url('../images/ico_check.png'); position: absolute; left: -2px; top: -1px; transform: scale(0.65);}

.bottom-contact {padding: 100px 0; color: #fff;}
.bottom-contact > p:nth-child(1) {font-size: 40px; font-weight: 600; margin-bottom: 40px; line-height: 125%;}
.bottom-contact > p:nth-child(2) {font-size: 18px; margin-bottom: 60px;}
.bottom-contact a {color: #2a82c5; border: 4px solid #2a82c5; border-radius: 25px; padding: 10px 25px; font-size: 24px; font-weight: 600; display: flex; align-items: center; gap: 20px; width: fit-content;}

.tab-menu ul {display: flex; gap: 50px; align-items: center; justify-content: center; margin-bottom: 100px;}
.tab-menu ul li {background-color: #1c212d; width: 150px; text-align: center; cursor: pointer; color: #fff; border-radius: 25px; padding: 10px 0; font-size: 20px; font-weight: 600;}
.tab-menu ul li.active {background-color: #2a82c5;}
.tab-con > div {display: none;}
.tab-con > div.on {display: block;}

/* 메인 */
.section1 {width: 100vw; height: 100vh; position: relative;}
.section1 .main-bg {width: 100%; height: 100vh; background-repeat: no-repeat; background-size: 100%; background-position: center; position: absolute; top: 0; left: 0; z-index: -2}
.section1 .main-layer {width: 100%; height: 100vh; background-color: rgba(0,0,0,0.45); z-index: -1; position: absolute; top: 0; left: 0;}

.sec1-con {height: 100%; max-width: 1415px; margin: 0 auto; position: relative;}
.section1 .main-text {position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
.section1 .main-text > p:nth-child(1) {font-size: 70px; font-weight: 600; line-height: 125%; color: #fff;}
.section1 .main-text > p:nth-child(2) {font-size: 24px; font-weight: 300; margin-top: 30px; color: #e9e9e9;}
.section1 .main-text > p:nth-child(3) {font-size: 24px; font-weight: 300; margin-top: 10px; color: #e9e9e9;}

.section2 {padding: 60px 0 50px; background-color: #1c212d; text-align: center;}
.section2 > p:nth-child(2) {margin: 30px auto 35px; font-size: 24px; font-weight: 500; line-height: 150%; color: #fff;}
.section2 .btn-wrap {justify-content: center; gap: 48px;}
.section2 .btn-wrap button {width: fit-content; height: 70px; text-align: center; border: none; background-color: #2a82c5; padding: 0 80px; cursor: pointer; color: #fff;}

.section3, .section4, .section5 {background-color: #191919;}
.section3 {padding: 80px 0 65px;}
.section3 .service-wrap {display: flex; justify-content: space-between; gap: 80px;}
.section3 .service-wrap .service {border-radius: 40px; width: 100%; min-height: 770px; position: relative; box-sizing: border-box; overflow: hidden;}
.section3 .service-wrap .service .service-img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: 100%; background-repeat: no-repeat; background-position: center; transition: .4s all ease; transform: scale(1.05);}
.section3 .service-wrap .service:hover .service-img {transform: scale(1.3);}
.section3 .service-wrap .service .gradient {position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-image: linear-gradient(to right, rgba(16, 28, 43, 0.9), rgba(226, 217, 217,0.1)); border-radius: 40px; z-index: 1;}
.section3 .service-wrap .service > div:not(.service-img) {z-index: 2; position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 50px 65px; box-sizing: border-box;}
.section3 .service-wrap .eng {font-size: 22px; font-weight: 300; color: #3d8fff; margin-bottom: 20px;}
.section3 .service-wrap .service-title {margin-bottom: 25px; color: #fff; font-weight: 700; font-size: 50px;}
.section3 .service-wrap .desc {margin-bottom: 55px; color: #fff; font-size: 20px; line-height: 180%;}
.section3 .service-wrap .link {font-size: 22px; font-weight: 500; color: #fff; display: flex; align-items: center;}
.section3 .service-wrap .link img {margin-left: 40px;}

.section4 {padding: 65px 0 80px;}
.section4 .sec-con {padding-top: 130px;}
.section4 .vlog-wrap {display: flex; justify-content: space-between;}
.section4 .vlog-wrap > div {min-width: 700px;}
.section4 .vlog-wrap .right {padding-top: 200px;}
.section4 .vlog-wrap .vlog:not(:last-child) {margin-bottom: 110px;}
.section4 .vlog-wrap .vlog p {font-size: 25px; color: #f4f4f4; margin-bottom: 50px; display: flex; justify-content: space-between;}
.section4 .vlog-wrap .vlog .video-wrap {background-color: #fff; min-height: 400px;}

.section5 {padding: 100px 0 200px;}
.section5 .client {border: 2px solid #6b6b6b; display: grid; grid-template-columns: repeat(6, 1fr);}
.section5 .client li:not(:last-child) {border-right: 2px solid #6b6b6b;}
.section5 .client li:nth-child(n+7):nth-child(-n+12) {border-top: 2px solid #6b6b6b;}
.section5 .client li:nth-child(6n) {border-right: none;}
.section5 .client li {display: flex; align-items: center; justify-content: center; padding: 15px 0;}
.section5 .client li img {width: 50%;}
.section5 .partner-con {margin-top: 50px;}

/* 포트폴리오 */
.portfolio-wrap {background-color: #191919;}
.portfolio-wrap .page-title {padding-top: 270px; margin-bottom: 100px;}
.pf-list {display: grid; grid-template-columns: repeat(4, 1fr);}
.pf-list .pf-item {position: relative; width: 100%; cursor: pointer; box-sizing: border-box; overflow: hidden;}
.pf-list .pf-item::after {content: ''; display: block; padding-bottom: 100%;}
.pf-list .pf-item .pf-img {width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-repeat: no-repeat; background-size: cover; background-position: center; z-index: 0; transition: .5s all ease;}
.pf-list .pf-item:hover .pf-img {transform: scale(1.3);}
.pf-list .pf-item .title {font-size: 26px; color: #fff; z-index: 1; position: absolute; left: 50px; bottom: 65px;}
.pf-list .pf-item .hover {width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0,0,0,0.39); z-index: 0;}
.pf-list .pf-item .hover > span {display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 24px; color: #fff;}
.pf-list .pf-item .hover > span > span {display: block; text-align: center;}
.pf-list .pf-item .hover > span > span:nth-child(1) {background-color: #fff; padding: 15px; border-radius: 100%; display: flex; justify-content: center; align-items: center; width: fit-content; margin: 0 auto 25px;}
.pf-list .pf-item .hover > span > span:nth-child(1) img {height: 36px;}
.pf-list .pf-item:hover .hover {background-color: rgba(42, 130, 197, 0.64); z-index: 2}
.pf-list .pf-item:hover .hover > span {display: block;}

/* 웹서비스 */
.web-sec {background-color: #191919;}
.web-sec .sec-title {text-align: left; padding-left: 100px; line-height: 150%;}
.web-sec .sec-subtitle {text-align: left; font-weight: 400; padding-left: 100px;}
.web-sec2 {background-color: #1c212d; padding: 90px 0 95px;}
.web-sec2 .sec-con > p {font-weight: 700; font-size: 55px; margin-bottom: 30px; color: #8a8a8a; padding-left: 100px;}
.web-sec2 .service-desc {display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px;}
.web-sec2 .service-desc img {margin-bottom: 40px;}
.web-sec2 .service-desc .desc-title {margin-bottom: 26px; font-size: 22px; font-weight: 600; color: #fff;}
.web-sec2 .service-desc .desc-detail {font-size: 15px; line-height: 125%; color: #d9d9d9; word-break: keep-all; width: 85%;}

.web-sec3 {padding: 100px 0 50px;}
.web-sec3 .sec-title {margin-bottom: 100px;}
.web-sec3 .webservice {display: flex; gap: 0; margin-bottom: 100px;}
.web-sec3 .webservice:last-child {margin-bottom: 0;}
.web-sec3 .webservice > div {width: 50%;}
.web-sec3 .webservice .webservice-img img {width: 100%;}
.web-sec3 .webservice .webservice-desc {color: #fff; position: relative;}
.web-sec3 .webservice .webservice-desc > div {position: absolute; top: 50%; transform: translateY(-50%);}
.web-sec3 .webservice .webservice-desc > div::after {content: ''; display: block; position: absolute; top: -40px; width: 48%; height: 3px; background-color: #fff;}
.web-sec3 .webservice:nth-child(odd) .webservice-desc > div {padding-left: 130px;}
.web-sec3 .webservice:nth-child(even) .webservice-desc > div {position: relative; top: 38%;}
.web-sec3 .webservice:nth-child(even) .webservice-desc > div::after {content: ''; display: block; position: absolute; top: -40px; right: 130px; width: 48%; height: 3px; background-color: #fff;}
.web-sec3 .webservice:nth-child(even) .webservice-desc p {position: absolute;}
.web-sec3 .webservice:nth-child(even) .webservice-desc p.title {top: 0; right: 130px;}
.web-sec3 .webservice:nth-child(even) .webservice-desc p.detail {top: 80px; right: 130px;}
.web-sec3 .webservice .webservice-desc .title {font-size: 40px; font-weight: 600; margin-bottom: 40px; width: 48%;}
.web-sec3 .webservice .webservice-desc .detail {color: #d9d9d9; line-height: 135%; font-size: 16px; width: 48%; word-break: keep-all;}

.web-sec4 {padding: 50px 0 135px;}
.web-sec4 .sec-title {margin-bottom: 15px;}
.web-sec4 .option-wrap {position: relative;}
.web-sec4 .option {margin-top: 100px; position: relative;}
.web-sec4 .option span {display: block; text-align: center;}
.web-sec4 .option .title {font-size: 18px; color: #fff; font-weight: 600; margin-bottom: 20px;}
.web-sec4 .option .desc {color: #b3b3b3; font-size: 15px; line-height: 130%; word-break: keep-all; width: 80%; margin: 0 auto;}
.web-sec4 .option .default {width: 72%; margin: 0 auto; position: relative; background-color: #1c212d; border-radius: 40px; padding: 20px 10px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.web-sec4 .option .default::after {content: ''; display: block; padding-bottom: 100%;}
.web-sec4 .option .default > div {position: absolute; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.web-sec4 .option .default img {margin-bottom: 0px; width: 53%;}
.web-sec4 .option .default span {position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); width: 100%; font-size: 18px;}
.web-sec4 .option .active {display: none;}
.web-sec4 .option .active > div {display: flex; flex-direction: column; justify-content: center; align-items: center;}
.web-sec4 .option .active img {width: 80%; margin-bottom: 40px;}
.web-sec4 .option .swiper-slide {transform: scale(0.9) translateY(8%);}
.web-sec4 .option .swiper-slide-active {transform: scale(1.0);}
.web-sec4 .option .swiper-slide-active .default {display: none;}
.web-sec4 .option .swiper-slide-active .active {display: block;}
.option-swiper-button-prev, .swiper-rtl .option-swiper-button-next, .option-swiper-button-next, .swiper-rtl .option-swiper-button-prev {top: 45%; transform: translateY(-50%);}
.option-swiper-button-next {right: 50px; z-index: 9; left: auto;}
.option-swiper-button-prev {left: 50px; z-index: 9; right: auto;}
.option-swiper-button-prev.swiper-button-disabled, .option-swiper-button-next.swiper-button-disabled {opacity: 1;}
.swiper-button-next::after, .swiper-button-prev::after {display: none;}

.web-sec5 {padding: 85px 0 50px; position: relative;}
.web-sec5 .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: center; z-index: 0;}
.web-sec5 .layer {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.62);}
.web-sec5 .sec-con {z-index: 1; position: relative;}
.web-sec5 .sec-title {text-align: center; padding-left: 0px;}
.web-sec5 .status-wrap {display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 40px;}
.web-sec5 .status {background-color: #fff; border-radius: 30px; padding: 30px 35px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; gap: 0px;}
.web-sec5 .status .title {color: #373636; font-size: 26px; font-weight: 600; margin-bottom: 25px; text-align: center;}
.web-sec5 .tbl-wrap {width: 100%;}
.web-sec5 .tbl-wrap .tbl {width: 100%; text-align: center; height: 100%; overflow-y: auto;}
.web-sec5 .tbl-wrap .tbl th {background-color: #2a82c5; color: #fff; font-size: 16px; padding: 10px 5px; font-weight: 400;}
.web-sec5 .tbl-wrap .tbl td {font-size: 14px; padding: 10px 5px; border-right: 1px solid #c5c5c5; border-bottom: 1px solid #c5c5c5;}
.web-sec5 .tbl-wrap .tbl td:last-child {border-right: none;}
.web-sec5 .accu {margin-bottom: 50px;}
.web-sec5 .accu-wrap {display: flex; justify-content: space-between; gap: 15px;}
.web-sec5 .accu-wrap > div {border-radius: 18px; padding: 30px 25px; box-sizing: border-box; width: 100%;}
.web-sec5 .accu-wrap > div:nth-child(1) {background-color: #f2f2f2;}
.web-sec5 .accu-wrap > div:nth-child(2) {background-color: #edf6f0;}
.web-sec5 .accu-wrap > div:nth-child(3) {background-color: #d3ecff;}
.web-sec5 .accu-wrap .title {font-size: 20px; color: #313131; font-weight: 600; margin-bottom: 25px; text-align: center; display: block;}
.web-sec5 .accu-wrap .count {font-size: 22px; color: #424242; font-weight: 700; text-align: right; display: block;}
.web-sec5 .accu-wrap .count strong {color: #2a82c5; font-size: 36px; margin-right: 8px; vertical-align: middle; font-weight: 800;}
/* .web-sec5 .eval-wrap {display: flex; justify-content: space-between; gap: 15px;} */
.web-sec5 .eval-wrap {display: flex; justify-content: center;}
.web-sec5 .eval-wrap .star {width: calc(100% - 23vw); font-size: 15px;;}
.web-sec5 .eval-wrap .star .title {font-weight: 600; color: #373636; font-size: 15px; margin-bottom: 0; width: fit-content;}
.web-sec5 .eval-wrap .star .star-top {color: #b7b7b7; text-align: right; display: flex; justify-content: flex-end; align-items: center; gap: 5px; margin-bottom: 10px;}
.web-sec5 .eval-wrap .star .star-top img {height: 15px;}
.web-sec5 .eval-wrap .star p {display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 20px;}
.web-sec5 .eval-wrap .star p:last-child {margin-bottom: 0;}
.web-sec5 .eval-wrap .star p .graph {background-color: #f9cc39; border-radius: 20px; display: inline-block; height: 16px; width: calc(100% - 85px);}
.web-sec5 .eval-wrap .score {color: #373636;}
/* .web-sec5 .eval-wrap .eval-txt {width: 22vw} */
.web-sec5 .eval-wrap .eval-txt {width: 40vw}
.web-sec5 .eval-wrap .eval-txt .eval-swiper {width: 100%; height: 100%;}
.web-sec5 .eval-wrap .eval-txt .swiper-slide {background-color: #f2f2f2; border-radius: 18px; padding: 28px 28px 14px 28px; font-size: 13px; line-height: 135%; text-align: center; box-sizing: border-box;}
.web-sec5 .eval-wrap .eval-txt .swiper-slide > div {width: 85%; margin: 0 auto; word-break: keep-all; overflow-wrap: break-word;}
.web-sec5 .eval-wrap .eval-txt .swiper-slide img {height: 30px; margin-top: 20px;}

.web-sec6 {background-color: #000;}

/* 온라인마케팅 */
.web-sec2.marketing {padding-top: 0;}
.review {background-color: #191919; padding: 100px 0 90px;}
.review-list .sec-title {text-align: center; margin-bottom: 18px;}
.review-list .sec-subtitle {text-align: center;}
.web-sec2 .sec1-con {margin-top: 50px;}
.web-sec2 .review-swiper-wrap {position: relative;}
.web-sec2 .review-swiper {color: #fff; font-size: 24px; font-weight: 600; text-align: center; margin-top: 80px;}
.web-sec2 .review-swiper .swiper-slide div {background-repeat: no-repeat; background-size: cover; background-position: center; width: 100%; height: 400px;}
.web-sec2 .review-swiper .swiper-slide img {margin: 0 auto;}
.web-sec2 .review-swiper .swiper-slide span {display: block; margin-top: 25px;}
.review-swiper-button-prev, .swiper-rtl .review-swiper-button-next, .review-swiper-button-next, .swiper-rtl .review-swiper-button-prev {top: 50%; transform: translateY(-50%);}
.review-swiper-button-next {right: 0px; z-index: 9; left: auto; z-index: 2;}
.review-swiper-button-prev {left: 0px; z-index: 9; right: auto; z-index: 2;}

/* 견적문의 */
.intro-wrap, .contact-wrap {background-color: #191919;}
.contact-wrap {padding-bottom: 80px;}
.contact-wrap .page-title {padding-top: 270px; margin-bottom: 80px;}
.contact-con {max-width: 1286px; margin: 0 auto; position: relative;}
.form-row {margin-bottom: 35px; width: 100%;}
.form-row2 {margin-bottom: 10px; width: 100%;}
.form-grid {display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 25px;}
.form-grid2 {display: grid; grid-template-columns: repeat(7, 1fr); column-gap: 25px;}
.form-item {width: 100%;}
.form-item .title {font-size: 16px; color: #999; font-weight: 500; margin-bottom: 15px;}
.form-item .file {display: flex; align-items: center; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid #fff; color: #fff;}
.form-item .file > span {font-size: 16px; font-weight: 500; color: #999; margin-right: 100px; width: 10%}
.form-item .input-item {width: 100%;}
.form-item .input-item input[type=text], .form-item .input-item input[type=date], .form-item .input-item select, .form-item .input-item textarea {width: 100%; border: 1px solid #999; padding: 13px 15px; box-sizing: border-box; color: #fff; font-size: 15px; background-color: transparent; color: #999;}
.form-item .input-item input[type=text] {background: url('../images/ico_check.png'); background-repeat: no-repeat; background-position: calc(100% - 15px) 50%;}
.form-item .input-item input[type=date] {background: url('../images/ico_calendar.png'); background-repeat: no-repeat; background-position: calc(100% - 15px) 50%; height: 45px;}
.form-item .input-item input[type=date]::-webkit-inner-spin-button, .form-item .input-item input[type=date]::-webkit-calendar-picker-indicator {display: none; appearance: none; -webkit-appearance: none;;}
.form-item .input-item.input-check {color: #999; margin-top: 20px; text-align: center;}
.form-item .input-item.input-file input[type=file] {width: 40%; color: #999; font-size: 15px; position: relative; height: 45px; line-height: 45px; cursor: pointer;}
.form-item .input-item.input-file input[type=file]::file-selector-button {padding: 12px 15px; border-radius: 5px; background-color: #5b5b5b; color: #fff; border: none; position: absolute; right: 0; top: 50%; transform: translateY(-50%); cursor: pointer;}
.form-item .input-item.input-file > span {margin-left: 30px;}
.form-item .input-item select {background: url('../images/ico_select.png'); background-repeat: no-repeat; background-position: 98% 50%; -webkit-appearance: none; appearance: none; -moz-appearance: none;}
.form-item .input-item textarea {resize: none;}
.form-item .input-item input::placeholder {color: #999;}

.form-item .privacy {color: #999; border: 5px solid #5b5b5b; width: 100%; height: 180px; overflow-y: auto; padding: 20px 35px; box-sizing: border-box; line-height: 135%; font-size: 14px;}
.form-item .privacy h4 {font-size: 15px;}
.contact-wrap .btn-wrap {justify-content: center; gap: 30px;}
.contact-wrap .btn-wrap .btn-normal {font-size: 20px; font-weight: 600; background-color: #2a82c5; border: none; color: #fff; width: 150px; padding: 10px 0; cursor: pointer;}

/* 회사소개 */
.intro-con {max-width: 1465px; margin: 0 auto; position: relative; color: #fff;}
.intro-sec .page-title {padding-top: 270px; margin-bottom: 110px;}
.intro-sec h4 {font-size: 28px; font-weight: 500; margin-bottom: 35px;}
.intro-sec .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center;}
.intro-sec .layer {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.65);}
.intro-sec .about .blue {color: #2a82c5; font-size: 48px; font-weight: 700; margin-bottom: 80px;}
.intro-sec .about .about-txt {position: relative; font-size: 16px; line-height: 145%; word-break: keep-all; font-weight: 300; font-size: 18px;}
.intro-sec .about .about-txt span {font-size: 22px; padding-left: 50px; z-index: 4; display: block; position: relative;}
.intro-sec .about .about-txt span::before {position: absolute; display: block; content: url('../images/ico_txt.png'); left: 5px; top: -100%; z-index: -1;}
.intro-sec .about .about-txt strong {margin: 45px 0; font-size: 30px; line-height: 125%; display: block;}
.intro-sec .about .about-txt img {margin: 20px auto 60px; width: 100%; height: auto;}

.intro-sec1 {padding-bottom: 50px;}

.intro-sec2 {padding: 130px 0; position: relative;}
.intro-sec2 p {font-size: 18px; font-weight: 300; line-height: 145%;}
.intro-sec2 .intro-con > div {margin-top: 30px;}
.highlight {width: 50%; background: #2a81c4; border-radius: 25px; padding: 15px 40px; display: block; font-size: 18px; box-sizing: border-box;}
.highlight:not(:last-child) {margin-bottom: 30px;}

.intro-sec3 {padding: 80px 0 50px}
.intro-sec3 .youtube {display: flex; justify-content: space-between; gap: 10%}
.intro-sec3 .youtube > div {background-color: #007040; position: relative; width: 100%; min-height: 380px;}
.intro-sec3 .youtube > div .default {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

.intro-sec4 {padding: 85px 0 85px;}
.intro-sec4 .uni_area {display: flex; justify-content: space-between; gap: 10%;}
.intro-sec4 .uni_area > div {width: 100%;}
.intro-sec4 .uni_area .title {font-size: 28px; font-weight: 600; margin-bottom: 25px;}
.intro-sec4 .uni_area .desc {font-size: 18px; font-weight: 300;}
.intro-sec4 .uni_area .type {margin: 35px auto 50px; display: grid; grid-template-columns: repeat(3, 1fr); border: 2px solid #fff;}
.intro-sec4 .uni_area .type span {width: 100%; padding: 25px 0; text-align: center; font-weight: 600; font-size: 16px; border: 2px solid #fff;}
.intro-sec4 .uni_area .link {font-size: 22px; font-weight: 500; color: #fff; display: flex; align-items: center;}
.intro-sec4 .uni_area .link img {margin-left: 40px;}

.intro-sec5 {padding-top: 80px;}
.intro-sec5 .map-wrap {display: flex; justify-content: space-between; gap: 18px;}
.intro-sec5 .map-txt {display: flex; justify-content: space-between; gap: 18px; font-size: 22px; font-weight: 300; margin-bottom: 45px;}
.intro-sec5 .map-txt .title {font-size: 30px; font-weight: 600; display: flex; align-items: center; margin-bottom: 35px;}
.intro-sec5 .map-txt .title span {position: relative; background-color: #2a81c4; width: 36px; height: 36px; border-radius: 100%; display: inline-block; margin-right: 15px;}
.intro-sec5 .map-txt .title span::after {position: absolute; content: ''; display: block; background-color: #fff; width: 16px; height: 16px; border-radius: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.intro-sec5 .map-img img {width: 100%;}

/* 약관 */
/* .terms {padding-top: 50px;} */
.terms-wrap {margin-top: 40px;}
.terms-wrap .tab-con {margin-top: 30px; margin-bottom: 50px;}
.terms-box {box-sizing: border-box; margin-bottom: 30px; }
.terms-box .terms-title {font-weight: 600; margin-bottom: 20px; font-size: 22px;}
.terms-box .terms-con {background-color: #191919; color: #fff; padding: 20px; font-size: 15px; line-height: 150%; box-sizing: border-box; border-radius: 4px;}

/* 팝업 */
.popup-layer {display: block; opacity: 0; visibility: hidden; position: absolute; width: 100%; height: 100%; overflow: hidden; background-color: rgba(0,0,0,0.4); top: 0; left: 0; z-index: 9998;}
.popup-box {width: 80%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; box-sizing: border-box;}
.popup-box .popup-body {min-height: 135px; position: relative;}
.popup-box .popup-body .close {border-radius: 100%; position: absolute; top: -35px; right: -35px; width: 70px; height: 70px; display: flex; justify-content: center; align-items: center; border: none; background-color: #2a82c5; cursor: pointer; opacity: 1;}
.popup-box .popup-body .popup-con {padding: 55px 105px; box-sizing: border-box; max-height: 85vh; overflow-y: auto;}
.pf-detail-wrap {display: flex; flex-direction: column; gap: 50px;}
.pf-detail-wrap .pf-detail-header {display: flex; gap: 30px; align-items: flex-end;}
.pf-detail-wrap .pf-detail-header h3 {font-size: 40px;}
.pf-detail-wrap .pf-detail-header div {font-size: 15px; font-weight: 500;}
.pf-detail-wrap .pf-detail-header div span {margin-right: 15px;}
.pf-detail-wrap .pf-detail-header div a {color: #a3a3a3;}
.pf-detail-wrap .pf-detail-header button {background-color: #2a82c5; color: #fff; display: inline-flex; gap: 12px; align-items: center; justify-content: center; padding: 0 27px; font-size: 16px; font-weight: 500; border: none; height: 40px; cursor: pointer; white-space: nowrap;}
.pf-detail-wrap .pf-detail-header button img {height: 14px;}
.pf-detail-wrap .pf-detail-content {display: flex; gap: 55px; flex-direction: column;}
.pf-detail-wrap .pf-detail-content .detail-info div {display: flex; align-items: flex-start; gap: 30px; font-size: 13px; line-height: 135%;}
.pf-detail-wrap .pf-detail-content .detail-info div:not(:last-child) {margin-bottom: 25px;}
.pf-detail-wrap .pf-detail-content .detail-info div span:nth-child(1) {color: #a3a3a3; font-weight: 600; min-width: 150px; width: 20%;}
.pf-detail-wrap .pf-detail-content .detail-info div span:nth-child(2) {width: calc(80% - 30px);}
.pf-detail-wrap .pf-detail-content .detail-img img {width: 100% !important;}


/* text block */
.pc-block {display: block;}

/* tablet */
@media all and (max-width: 1368px) {
    /* 메인 */
    .sec1-con {max-width: none; padding-left: 20px; padding-right: 20px; box-sizing: border-box;}
    .section1 .main-bg {background-size: cover; background-position: 30% 50%;}
    .section1 .main-text {position: absolute; top: 50%; left: 0; transform: translateY(-50%); padding-left: 20px; padding-right: 20px; box-sizing: border-box;}
}

/* tablet */
@media all and (max-width: 768px) {
    /* 공통 */
    section {box-sizing: border-box;}
    .con {max-width: none;}
    .sec-title {font-size: 28px; word-break: keep-all; margin-bottom: 22px; color: #fff; padding: 0 20px; box-sizing: border-box;}
    .sec-subtitle {font-size: 15px; padding: 0 20px; box-sizing: border-box; line-height: 135%; word-break: keep-all;}
    .sec-con {margin-top: 25px; padding: 0 20px; box-sizing: border-box;}
    .top {width: 25px; height: 25px; right: 35px; bottom: 60px;}
    .quick img {width: 18vw;}
    .scroll {bottom: 30px;}
    .scroll img {margin-top: 10px;}
    .page-title {font-size: 26px; padding-left: 20px; padding-right: 20px; box-sizing: border-box; line-height: 145%;}

    .btn-normal {font-size: 16px;}

    .input-check label {font-size: 13px;}
    .input-check .label-cb {width: 12px; height: 12px; margin-top: 2px;}
    .input-check input[type="checkbox"]:checked + label.label-cb::after {left: -3px; top: -1.8px; transform: scale(0.55);}

    .bottom-contact {padding: 50px 20px;}
    .bottom-contact > p:nth-child(1) {font-size: 20px; margin-bottom: 15px;}
    .bottom-contact > p:nth-child(2) {font-size: 14px; margin-bottom: 30px; line-height: 135%; word-break: keep-all;}
    .bottom-contact a {border: 2px solid #2a82c5; padding: 6px 18px; font-size: 18px; gap: 10px;}
    .bottom-contact a img {height: 15px;}

    .tab-menu ul {gap: 15px; margin-bottom: 40px;}
    .tab-menu ul li {width: fit-content; padding: 8px 15px; font-size: 16px;}

    .section2 {padding: 40px 20px 35px;}
    .section2 > p:nth-child(2) {margin: 15px auto 20px; font-size: 18px; word-break: keep-all;}
    .section2 .btn-wrap {gap: 10px;}
    .section2 .btn-wrap button {height: 40px; padding: 0 30px;}
        
    .section3 {padding: 30px 0 50px;}
    .section3 .service-wrap {display: block;}
    .section3 .service-wrap > div:nth-child(1) {margin-bottom: 20px;}
    .section3 .service-wrap .service {width: 100%; border-radius: 40px; min-height: unset; background-size: cover; position: relative}
    .section3 .service-wrap .service::after {display: block; content: ''; padding-bottom: 100%;}
    .section3 .service-wrap .service > div:not(.service-img) {position: absolute; width: 100%; height: 100%; justify-content: center; padding: 30px 20px;}
    .section3 .service-wrap .eng {font-size: 16px; margin-bottom: 14px;}
    .section3 .service-wrap .service-title {margin-bottom: 20px; font-size: 30px;}
    .section3 .service-wrap .desc {margin-bottom: 30px; font-size: 16px; line-height: 150%;}
    .section3 .service-wrap .link {font-size: 18px;}
    .section3 .service-wrap .link img {margin-left: 25px; height: 20px;}
    
    .section4 {padding: 30px 0 40px;}
    .section4 .sec-con {padding-top: 25px;}
    .section4 .vlog-wrap {display: block;}
    .section4 .vlog-wrap > div {min-width: auto; width: 100%;}
    .section4 .vlog-wrap .right {padding-top: 0; margin-top: 50px;}
    .section4 .vlog-wrap .vlog:not(:last-child) {margin-bottom: 50px;}
    .section4 .vlog-wrap .vlog p {font-size: 25px; color: #f4f4f4; margin-bottom:20px; display: flex; justify-content: space-between;}
    .section4 .vlog-wrap .vlog p img {height: 22px;}
    .section4 .vlog-wrap .vlog .video-wrap {background-color: #fff; min-height: 200px;}
    
    .section5 {padding: 40px 0 80px;}
    .section5 .client {grid-template-columns: repeat(2, 1fr);}
    .section5 .client li:not(:nth-last-child(1)):not(:nth-last-child(2)) {border-bottom: 2px solid #6b6b6b;}
    .section5 .client li:last-child {border-right: 2px solid #6b6b6b;} /* 홀수 갯수일 때 적용 */
    .section5 .client li {padding: 0; height: 80px; width: 100%;}
    .section5 .client li img {width: 50%;}

    /* 메인 */
    .section1 .main-text > p:nth-child(1) {font-size: 36px; word-break: keep-all;}
    .section1 .main-text > p:nth-child(2) {font-size: 18px; margin-top: 15px; line-height: 135%; word-break: keep-all;}
    .section1 .main-text > p:nth-child(3) {font-size: 18px; line-height: 135%; word-break: keep-all;}

    /* 포트폴리오 */
    .portfolio-wrap .page-title {padding-top: 130px; margin-bottom: 50px;}
    .pf-list {grid-template-columns: repeat(2, 1fr);}
    .pf-list .pf-item .title {font-size: 16px; height: fit-content; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; text-align: center;}
    .pf-list .pf-item .hover > span {font-size: 16px;}
    .pf-list .pf-item .hover > span > span:nth-child(1) {padding: 12px; margin: 0 auto 7px;}
    .pf-list .pf-item .hover > span > span:nth-child(1) img {height: 20px;}


    /* 웹서비스 */
    .web-sec .sec-title {padding-left: 0px; margin-bottom: 50px;}
    .web-sec .sec-subtitle {padding-left: 0px;}
    .web-sec2 {padding: 45px 0 50px;}
    .web-sec2 .sec-con > p {font-size: 35px; margin-bottom: 15px; padding-left: 0px;}
    .web-sec2 .service-desc {grid-template-columns: repeat(1, 1fr); row-gap: 60px; text-align: center;} 
    .web-sec2 .service-desc img {margin-bottom: 20px;}
    .web-sec2 .service-desc .desc-title {margin-bottom: 15px; font-size: 18px;}
    .web-sec2 .service-desc .desc-detail {font-size: 13px; width: 80%; margin: 0 auto;}

    .web-sec3 {padding: 50px 0 45px;}
    .web-sec3 .sec-title {margin-bottom: 40px;}
    .web-sec3 .webservice {display: block; gap: 0; margin-bottom: 60px;}
    .web-sec3 .webservice:nth-child(even) {display: flex; flex-direction: column-reverse;}
    .web-sec3 .webservice > div {width: 100%;}
    .web-sec3 .webservice .webservice-img {margin-bottom: 40px;}
    .web-sec3 .webservice .webservice-img img {width: 100%;}
    .web-sec3 .webservice .webservice-desc {padding: 0 20px; box-sizing: border-box;}
    .web-sec3 .webservice .webservice-desc > div {position: relative; top: 0; transform: none;}
    .web-sec3 .webservice .webservice-desc > div::after {top: -10px; width: 52%;}
    .web-sec3 .webservice:nth-child(odd) .webservice-desc > div {padding-left: 0px;}
    .web-sec3 .webservice:nth-child(even) .webservice-desc > div {position: relative; top: 0%;}
    .web-sec3 .webservice:nth-child(even) .webservice-desc > div::after {top: -10px; left: 0; right: 0; width: 52%;}
    .web-sec3 .webservice:nth-child(even) .webservice-desc p {position: relative;}
    .web-sec3 .webservice:nth-child(even) .webservice-desc p.title {top: 0; right: 0px;}
    .web-sec3 .webservice:nth-child(even) .webservice-desc p.detail {top: 0px; right: 0px;}
    .web-sec3 .webservice .webservice-desc .title {font-size: 20px; margin-bottom: 20px; width: 100%;}
    .web-sec3 .webservice .webservice-desc .detail {font-size: 14px; width: 100%;}

    .web-sec4 {padding: 40px 0 65px;}
    .web-sec4 .sec-title {margin-bottom: 20px;}
    .web-sec4 .option {margin-top: 30px; position: relative;}
    .web-sec4 .option .title {font-size: 18px; margin-bottom: 15px;}
    .web-sec4 .option .active {width: 80%; margin: 0 auto;}
    .web-sec4 .option .active img {width: 80%; margin-bottom: 25px;}
    .option-swiper-button-prev, .swiper-rtl .swiper-button-next, .option-swiper-button-next, .swiper-rtl .swiper-button-prev {top: 45%; transform: translateY(-50%);}
    .option-swiper-button-next {right: 18px;}
    .option-swiper-button-next img, .option-swiper-button-prev img {height: 40px;}
    .option-swiper-button-prev {left: 18px;}

    .web-sec5 {padding: 45px 0 30px;}
    .web-sec5 .sec-title {padding: 0;}
    .web-sec5 .status-wrap {grid-template-columns: repeat(1, 1fr); row-gap: 15px; column-gap: 0;}
    .web-sec5 .status {width: 100%; padding: 20px 15px; box-sizing: border-box; border-radius: 15px; gap: 10px;}
    .web-sec5 .status .title {font-size: 22px; margin-bottom: 15px}
    .web-sec5 .tbl-wrap {width: 100%;}
    .web-sec5 .status.accu {margin-bottom: 15px;}
    .web-sec5 .accu-wrap {display: block}
    .web-sec5 .accu-wrap > div {border-radius: 18px; padding: 20px 15px; box-sizing: border-box; width: 100%; margin-bottom: 10px;}
    .web-sec5 .accu-wrap > div:last-child {margin-bottom: 0;}
    .web-sec5 .accu-wrap .title {font-size: 20px; color: #313131; font-weight: 600; margin-bottom: 15px; text-align: center; display: block;}
    .web-sec5 .eval-wrap {display: block}
    .web-sec5 .eval-wrap .star {width: 100%; margin-bottom: 20px;}
    .web-sec5 .eval-wrap .eval-txt {width: 80vw}
    .web-sec5 .eval-wrap .eval-txt .swiper-slide {background-color: #f2f2f2; border-radius: 18px; padding: 28px 28px 14px 28px; font-size: 13px; line-height: 135%; text-align: center; box-sizing: border-box;}
    .web-sec5 .eval-wrap .eval-txt .swiper-slide > div {width: 85%; margin: 0 auto; word-break: keep-all;}
    .web-sec5 .eval-wrap .eval-txt .swiper-slide img {margin-top: 18px;}

    /* 온라인마케팅 */
    .web-sec2.marketing {padding-top: 0;}
    .web-sec2.marketing .sec-con p.sec-title {font-size: 28px; margin-bottom: 10px; padding-right: 0; color: #fff;}
    .web-sec2.marketing .sec-con p.sec-subtitle {padding-right: 0; font-size: 18px;}
    .review {background-color: #191919; padding: 50px 0 45px;}
    .review > .sec-title {padding-left: 20px;}
    .review-list .sec-title {margin-bottom: 15px; font-size: 20px;}
    .review-list .sec-subtitle {text-align: center;}
    .review-list > div {display: block;;}
    .review-list > div > div:not(:last-child) {margin-bottom: 40px;}
    .web-sec2 .sec1-con {margin-top: 50px; padding:0 20px;}
    .web-sec2 .review-swiper-wrap {width: 90%; margin: 0 auto;}
    .web-sec2 .review-swiper {font-size: 20px; margin-top: 50px; padding: 0;}
    .web-sec2 .review-swiper .swiper-slide div {height: 320px;}
    .web-sec2 .review-swiper .swiper-slide span {margin-top: 15px;}
    .review-swiper-button-next img, .review-swiper-button-prev img {height: 45px;}
    .review-swiper-button-next {right: -5%;}
    .review-swiper-button-prev {left: -5%;}

    /* 견적문의 */
    .contact-wrap {padding-bottom: 40px;}
    .contact-wrap .page-title {padding-top: 130px; margin-bottom: 50px;}
    .contact-con {max-width: none;}
    .form-wrap {padding: 0 20px; box-sizing: border-box;}
    .form-row {margin-bottom: 24px;}
    .form-grid {grid-template-columns: repeat(1, 1fr); row-gap: 24px;}
    .form-grid2 {grid-template-columns: repeat(2, 1fr); row-gap: 24px;}
    .form-item .title {font-size: 15px; margin-bottom: 10px;}
    .form-item .file {margin-bottom: 20px; padding-bottom: 10px;}
    .form-item .file > span {font-size: 14px; margin-right: 30px; width: 25%}
    .form-item .input-item input[type=text], .form-item .input-item input[type=date], .form-item .input-item select, .form-item .input-item textarea {padding: 10px 15px; font-size: 14px;}
    .form-item .input-item input[type=date] {height: 38px;}
    .form-item .input-item.input-check {margin-top: 10px;}
    .form-item .input-item.input-file {position: relative;}
    .form-item .input-item.input-file input[type=file] {width: 100%; font-size: 14px; height: 35px; line-height: 35px;}
    .form-item .input-item.input-file input[type=file]::file-selector-button {padding: 6px 12px; right: 0; font-size: 12px; border-radius: 3px;}
    .form-item .input-item.input-file > span {display: block; margin-left: 0; margin-top: 5px; font-size: 12px;}

    .form-item .privacy {border: 3px solid #5b5b5b; padding: 15px 20px; font-size: 12px;}
    .form-item .privacy h4 {font-size: 14px;}
    .contact-wrap .btn-wrap {gap: 10px;}
    .contact-wrap .btn-wrap .btn-normal {font-size: 15px; width: fit-content; padding: 6px 15px;}

    /* 회사소개 */
    .intro-con {max-width: none; padding: 0 20px; box-sizing: border-box;}
    .intro-sec .page-title {padding-top: 130px; margin-bottom: 80px;}
    .intro-sec h4 {font-size: 20px; margin-bottom: 20px;}
    .intro-sec .about .blue {font-size: 26px; margin-bottom: 40px;}
    .intro-sec .about .about-txt {font-size: 14px;}
    .intro-sec .about .about-txt span {font-size: 20px; padding-left: 25px;}
    .intro-sec .about .about-txt span::before {left: -10px; top: -130%; transform: scale(0.7);}
    .intro-sec .about .about-txt strong {margin: 20px 0 35px; font-size: 20px;}
    .intro-sec .about .about-txt img {margin: 30px auto 40px;}

    .intro-sec2 {padding: 65px 0;}
    .intro-sec2 p {font-size: 14px;}
    .intro-sec2 .intro-con > div {margin-top: 35px;}
    .highlight {width: 100%; border-radius: 25px; padding: 15px 25px; font-size: 16px;}
    .highlight:not(:last-child) {margin-bottom: 15px;}

    .intro-sec3 {padding: 50px 0 40px;}
    .intro-sec3 .youtube {display: block;}
    .intro-sec3 .youtube > div {min-height: 200px; margin-bottom: 15px;}
    .intro-sec3 .youtube > div .default {transform: translate(-50%, -50%) scale(0.7);}

    .intro-sec4 {padding: 65px 0 15px;}
    .intro-sec4 .uni_area {display: block;}
    .intro-sec4 .uni_area > div {width: 100%; margin-bottom: 50px;}
    .intro-sec4 .uni_area .title {font-size: 26px; margin-bottom: 20px;}
    .intro-sec4 .uni_area .desc {font-size: 16px; line-height: 135%; word-break: keep-all;}
    .intro-sec4 .uni_area .type {margin: 25px auto; grid-template-columns: repeat(1, 1fr);}
    .intro-sec4 .uni_area .type span {padding: 20px 0; font-size: 16px;}
    .intro-sec4 .uni_area .link {font-size: 18px;}
    .intro-sec4 .uni_area .link img {margin-left: 25px; height: 20px;}

    .intro-sec5 {padding-top: 50px; padding-bottom: 40px;}
    .intro-sec5 .map-wrap {display: block;}
    .intro-sec5 .map-wrap .map:nth-child(1) {margin-bottom: 40px;}
    .intro-sec5 .map-txt {font-size: 16px; line-height: 135%; margin-bottom: 15px;}
    .intro-sec5 .map-txt .title {font-size: 18px; display: flex; align-items: center; margin-bottom: 20px;}
    .intro-sec5 .map-txt .title span {width: 20px; height: 20px; margin-right: 10px; position: relative;}
    .intro-sec5 .map-txt .title span::after {width: 10px; height: 10px;}
    .intro-sec5 .map-img img {width: 100%;}

    /* 팝업 */
    .popup-box .popup-body .close {width: 36px; height: 36px; top: -18px; right: -18px;}
    .popup-box .popup-body .close img {height: 14px;}
    .popup-box .popup-body .popup-con {padding: 25px 20px;}
    .pf-detail-wrap {gap: 30px;}
    .pf-detail-wrap .pf-detail-header {flex-direction: column; align-items: flex-start; gap: 15px;}
    .pf-detail-wrap .pf-detail-header h3 {font-size: 26px;}
    .pf-detail-wrap .pf-detail-header button {height: 35px; font-size: 14px;}
    .pf-detail-wrap .pf-detail-header button img {height: 12px;}
    .pf-detail-wrap .pf-detail-content {gap: 35px;}
    .pf-detail-wrap .pf-detail-content .detail-info div {flex-direction: column; gap: 5px;}
    .pf-detail-wrap .pf-detail-content .detail-info div:not(:last-child) {margin-bottom: 15px;}
    .pf-detail-wrap .pf-detail-content .detail-info div span:nth-child(1), .pf-detail-wrap .pf-detail-content .detail-info div span:nth-child(2) {width: 100%;}

    /* text block */
    .mo-block {display: block;}
}

/* mobile */
@media all and (max-width:568px) {
}

/* mobile */
@media all and (max-width: 320px) {

}