/* 공통 */
section {
    width: 100%;
}

.container {
    width: 1500px;
    margin: 0 auto;
}

.copy_wrap>.label {
    font-family: "Archivo";
    color: #d6ef4c;
}

.copy_wrap>.copy {
    font-size: 46px;
    font-weight: 700;
    line-height: 65px;
}

.copy_wrap>.desc {
    font-size: 28px;
    font-weight: 200;
    margin-top: 10px;
    line-height: 40px;
}

.page_main {
    padding: 150px 0;
}

.page_main .copy_wrap .copy {
    font-family: "Archivo";
    font-size: 72px;
}

.page_main .copy_wrap .desc {
    margin-top: 20px;
}

/* 헤더 */
header {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
}

.nav_wrap {
    width: 1500px;
    height: 80px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition-duration: 0.8s;
}

.nav_wrap .logo {
    width: 85px;
}

.nav_wrap ul {
    display: flex;
    font-size: 20px;
    font-weight: 500;
}

.nav_wrap ul li:nth-child(1) {
    margin-right: 25px;
}

.nav_wrap.on {
    width: 1000px;
    height: 65px;
    border: 1px solid #ffffff57;
    background-color: #ffffff2b;
    backdrop-filter: blur(8px);
    padding: 0px 50px;
    margin-top: 10px;
    border-radius: 100px;
}

.nav_wrap.on .logo {
    width: 60px;
}

.nav_wrap.on ul {
    font-size: 16px;
}

.mo_menu {
    display: none;
}

/* 메인페이지 ===================================================> */

/* sec1 */
.section1 {
    height: 100vh;
    position: relative;
    z-index: 1;
    background: radial-gradient(circle, #062651, #191a22);
}

.section1::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../../Content/image/bg/01.png") no-repeat center/cover;
    opacity: 0.3;
    z-index: -1;
}

.section1 .container {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.section1 .container p {
    text-align: center;
    font-size: 20px;
    line-height: 30px;
    font-weight: 400;
    letter-spacing: 0.3px;
}

.section1 .container .main_copy {
    font-size: 48px;
    font-weight: 700;
    line-height: 68px;
    margin-bottom: 20px;
}

.section1 .contact_btn {
    font-size: 18px;
    color: #fff;
    margin-top: 50px;
    font-weight: 600;
    letter-spacing: 1px;
    position: relative;
}

.section1 .contact_btn::before {
    display: block;
    content: "";
    width: 7px;
    height: 7px;
    background-color: #d6ef4c;
    border-radius: 10px;
    position: absolute;
    top: 0px;
    left: -12px;
}

.scroll_down {
    position: absolute;
    bottom: 50px;
    right: 50px;
    display: inline-block;
}

.scroll_down i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 30px;
}

.scroll_down img {
    animation: rotatebtn 20s linear infinite;
}

@keyframes rotatebtn {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* sec2 */
.section2 {
    padding: 100px 0;
    margin-top: 50px;
}

.section2 .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.section2 .rolling_wrap {
    width: 1100px;
    overflow: hidden;
    height: min-content;
    -webkit-mask-image: linear-gradient(to right,
            transparent 0%,
            black 10%,
            black 90%,
            transparent 100%);
    mask-image: linear-gradient(to right,
            transparent 0%,
            black 10%,
            black 90%,
            transparent 100%);
}

.section2 .rolling_track {
    display: flex;
    align-items: center;
    gap: 80px;
    width: max-content;
    animation: rolling 100s linear infinite;
}

.section2 .rolling_track:hover {
    animation-play-state: paused;
}

.section2 .rolling_item {
    width: 170px;
    height: auto;
    object-fit: cover;
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section2 .rolling_item03,
.section2 .rolling_item14 {
    width: 110px;
}

.section2 .rolling_item06,
.section2 .rolling_item07 {
    width: 190px;
}

.section2 .rolling_item10 {
    width: 150px;
}

.section2 .rolling_item11,
.section2 .rolling_item12,
.section2 .rolling_item13 {
    width: 130px;
}

/* 무한 왼쪽 이동 */
@keyframes rolling {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* sec3 */

.section3 .con_wrap {
    display: flex;
    justify-content: space-between;
    margin: 30px 0 0 0;
}

.section3 .con_wrap li {
    position: relative;
    display: grid;
    width: 480px;
    height: 250px;
    border: 1px solid #ffffff57;
    background-color: #ffffff30;
    border-radius: 15px;
    padding: 30px;
    align-content: space-between;
    overflow: hidden;
    transition: border 0.5s ease, transform 0.5s ease;
}

.section3 .con_wrap li::before {
    content: "";
    position: absolute;
    inset: 0;
    /* top/right/bottom/left 0 */
    background: linear-gradient(127deg, #d6ef4c 0%, rgba(125, 180, 255, 1) 100%);
    opacity: 0;
    /* 처음엔 보이지 않음 */
    transition: opacity 0.5s ease;
    /* 부드럽게 나타나도록 */
    border-radius: 15px;
    z-index: 0;
}

.section3 .con_wrap li * {
    position: relative;
    z-index: 1;
}

.section3 .con_wrap .text_wrap p {
    font-size: 28px;
    font-weight: 700;
}

.section3 .con_wrap li:hover {
    border: 1px solid transparent;
    transform: translateY(-20px);
}

.section3 .con_wrap li:hover::before {
    opacity: 1;
    /* 마우스 올리면 그라데이션 나타남 */
}

.section3 .con_wrap .text_wrap span {
    display: block;
    font-size: 20px;
    margin-top: 5px;
    line-height: 28px;
    letter-spacing: 0.2px;
}

.section3 .con_wrap li div:last-child {
    display: flex;
    align-items: end;
    justify-content: flex-end;
}

.section3 .con_wrap li div:last-child p {
    font-size: 26px;
    margin: 0 0 5px 8px;
}

.section3 .con_wrap li .count {
    font-size: 46px !important;
    font-weight: 700;
    margin-bottom: 0 !important;
}

.section3 .con_wrap li .count_deco {
    font-size: 46px !important;
    font-weight: 700;
    margin: 0 0 5px 0 !important;
}

/*sec4 */
.section4 {
    padding: 150px 0 0 0;
}

.section4 .con_wrap {
    width: 100%;
    margin-top: 100px;
}

.sec4_con .label {
    font-family: "Archivo";
    color: #fff;
    font-weight: 700;
    font-size: 28px;
}

.sec4_con {
    opacity: 0.4;
    position: relative;
    transition-duration: 0.5s;
}

.sec4_con>div {
    width: 1500px;
    margin: 0 auto;
    position: relative;
    border-bottom: 1px solid #ffffff57;
    padding-bottom: 110px;
    margin-bottom: 110px;
    min-height: 450px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sec4_con:last-child {
    margin-bottom: 0;
}

.sec4_con .con_img {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: grayscale(1);
    z-index: -999;
    opacity: 0.5;
}

.sec4_con .con_text {
    width: 1000px;
}

.sec4_con .con_text p {
    font-size: 20px;
    margin-top: 10px;
}

.sec4_con .title {
    font-weight: 700;
    font-size: 40px;
    margin: 10px 0 15px;
}

.sec4_con .title.mt {
    margin-top: 60px;
}

.sec4_con .desc {
    font-size: 30px;
    line-height: 45px;
}

.sec4_con.active {
    opacity: 1;
}

.sec4_con.active .con_img {
    filter: grayscale(0);
}

.sec4_con.active .label {
    color: #d6ef4c;
}

.sec4_con.hover {
    opacity: 1;
}

.sec4_con.hover .con_img {
    filter: grayscale(0);
}

.sec4_con.hover .label {
    color: #d6ef4c;
}

/* 이미지*/

.img_1 {
    width: 450px;
    bottom: 9%;
    right: 100px;
}

.img_2 {
    width: 260px;
    bottom: 12%;
    left: 100px;
}

.img_3 {
    width: 360px;
    bottom: 60px;
    right: 100px;
}

.img_4 {
    width: 300px;
    bottom: 15%;
    left: 100px;
}

.img_5 {
    width: 270px;
    bottom: 16%;
    right: 100px;
}

.img_6 {
    width: 320px;
    bottom: 25%;
    left: 100px;
}

/* sec5 */
.section5 {
    position: relative;
    height: 400vh;
}

.section5 .container {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}


.section5 .con_wrap {
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
}

.section5 .con_wrap li {
    width: 24%;
    border: 1px solid #ffffff57;
    background-color: #ffffff30;
    border-radius: 15px;
    padding: 30px;
    opacity: 0.4;
    transition-duration: 0.5s;
}

.section5 .con_wrap li>.title span {
    display: block;
}

.section5 .con_wrap li>.title .label {
    color: #d6ef4c;
    font-family: "Archivo";
    font-size: 18px;
}

.section5 .con_wrap li>.title .title {
    font-size: 26px;
    font-weight: 700;
    margin: 5px 0 15px 0;
}

.section5 .con_wrap li>div:last-child {
    font-size: 20px;
    line-height: 30px;
    font-weight: 300;
}

.section5 .con_wrap li.on,
.section5 .con_wrap li.active {
    opacity: 1;
}

.section5 .con_wrap li.active {
    position: relative;
    background: #ffffff30;
    /* 반투명 배경 */
    border-radius: 12px;
    /* 원하는 곡률 */
    z-index: 0;
}

.section5 .con_wrap li.active::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: 12px;
    background: linear-gradient(45deg, #d6ef4c, #7db4ff, #d6ef4c);
    background-size: 200% 200%;
    animation: flowGradient 2s linear infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
}

@keyframes flowGradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/*sec6*/

.section6 {
    height: 300vh;
}

.section6 .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    height: 100vh;
    top: 0;
}


.section6 .con_slide {
    height: 400px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom,
            transparent 0%,
            black 10%,
            black 90%,
            transparent 100%);
    mask-image: linear-gradient(to bottom,
            transparent 0%,
            black 10%,
            black 90%,
            transparent 100%);
}

.section6 .con_wrap {
    margin-top: 80px;
    transition: transform 0.5s ease;
}


.section6 .con_wrap .card {
    width: 480px;
    height: 240px;
    border: 1px solid #ffffff57;
    background-color: #ffffff30;
    border-radius: 15px;
    padding: 40px;
    display: flex;
    flex-direction: column;
}

.section6 .con_wrap .card:nth-child(2) {
    margin: 20px 0;
}

.section6 .con_wrap>div p {
    width: 100%;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 10px;
}

.section6 .con_wrap>div ul {
    width: 100%;
    margin-top: 5px;
}

.section6 .con_wrap>div ul li {
    font-size: 22px;
    font-weight: 300;
    line-height: 1.4;
    display: flex;
}

.section6 .con_wrap>div ul li:first-child {
    margin: 0 0 10px 0;
}

.section6 .con_wrap .card li::before {
    display: block;
    content: "";
    min-width: 5px;
    max-height: 5px;
    border-radius: 10px;
    background-color: #fff;
    margin-right: 10px;
    position: relative;
    bottom: -12px;
}

/*sec7 */
.section7 {
    overflow: hidden;
}

.section7 .rolling_wrap {
    margin-top: 80px;
}

.section7 .rolling_track_top,
.section7 .rolling_track_bottom {
    display: flex;
    align-items: center;
    gap: 80px;
    width: max-content;
}

.section7 .rolling_track_top {
    margin-bottom: 30px;
    animation: rolling_r 150s linear infinite;
}

.section7 .rolling_track_bottom {
    animation: rolling_l 150s linear infinite;
}

/* 무한 왼쪽 이동 */
@keyframes rolling_l {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* 무한 오른쪽 이동 */
@keyframes rolling_r {
    from {
        transform: translateX(-50%);
    }

    to {
        transform: translateX(0);
    }
}

/* sec8 */
.section8 {
    padding: 150px 0;
    position: relative;
    overflow: hidden;
}

.section8 .container {
    display: flex;
    justify-content: space-between;
}

.section8 .copy_wrap {
    width: 60%;
}

.section8 .inquiry_wrap {
    width: 40%;
}

.section8 .inquiry_field {
    width: 100%;
    background-color: #ffffff30;
    padding: 15px 20px;
    border-radius: 10px;
    display: flex;
    margin-bottom: 15px;
}

.section8 .inquiry_field span {
    display: inline-block;
    width: 20%;
}

.section8 .inquiry_field span::after {
    content: "*";
    color: #d6ef4c;
    margin-left: 5px;
    position: relative;
    top: 2px;
}

.section8 input[type="text"],
.section8 textarea {
    background-color: unset;
    border: none;
    color: #fff;
    width: 80%;
    resize: none;
}

.section8 select {
    width: 80%;
    background-color: unset;
    border: none;
}

.section8 select:focus,
.section8 input[type="text"]:focus,
.section8 textarea:focus {
    outline: none;
}

.section8 input[type="text"]::placeholder,
.section8 textarea::placeholder {
    color: #ffffff6e;
}

.section8 select:invalid {
    color: #ffffff6e;
}

.section8 select:valid {
    color: #ffffff;
}

.section8 option {
    color: #333;
}

.section8 .terms label {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.section8 .terms label a {
    margin: 2px 0 0 5px;
    font-size: 12px;
    color: #95a3ac;
}

.chk_input {
    margin: 0 5px 0 0;
}

.section8 .contact_btn {
    width: 170px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0F111C;
    background-color: #d6ef4c;
    font-weight: 700;
    border-radius: 5px;
    font-size: 18px;
    margin: 80px auto 0;
    cursor: pointer;
    transition: 0.3s ease;
    position: relative;
}

.section8 .contact_btn:hover {
    background-color: #cae245;
}

@keyframes sweep {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

/* CONTACT ===================================================> */
.contact_main {
    overflow: hidden;
}

.contact_main .container {
    display: flex;
    justify-content: space-between;
}

.contact_main .copy_wrap {
    width: 40%;
}

.contact_main .company_info {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #ffffff57;
}

.contact_main .company_info li {
    display: flex;
    font-size: 20px;
    line-height: 35px;
    font-weight: 300;
}

.contact_main .company_info li span {
    width: 100px;
    color: #d6ef4c;
}

.contact_main .inquiry_wrap {
    width: 45%;
}

.contact_main .inquiry_field {
    width: 100%;
    background-color: #ffffff30;
    padding: 15px 20px;
    border-radius: 10px;
    display: flex;
    margin-bottom: 15px;
}

.contact_main .inquiry_field span {
    display: inline-block;
    width: 20%;
}

.contact_main .inquiry_field span::after {
    content: "*";
    color: #d6ef4c;
    margin-left: 5px;
    position: relative;
    top: 2px;
}

.contact_main input[type="text"],
.contact_main textarea {
    background-color: unset;
    border: none;
    color: #fff;
    width: 80%;
    resize: none;
}

.contact_main select {
    width: 80%;
    background-color: unset;
    border: none;
}

.contact_main select:focus,
.contact_main input[type="text"]:focus,
.contact_main textarea:focus {
    outline: none;
}

.contact_main input[type="text"]::placeholder,
.contact_main textarea::placeholder {
    color: #ffffff6e;
}

.contact_main select:invalid {
    color: #ffffff6e;
}

.contact_main select:valid {
    color: #ffffff;
}

.contact_main option {
    color: #333;
}

.contact_main .terms label {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.contact_main .terms label a {
    margin: 2px 0 0 5px;
    font-size: 12px;
    color: #95a3ac;
}

    .contact_main .contact_btn {
        width: 170px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #0F111C;
        background-color: #d6ef4c;
        font-weight: 700;
        border-radius: 5px;
        font-size: 18px;
        margin: 80px auto 0;
        cursor: pointer;
        transition: 0.3s ease;
        position: relative;
    }

.contact_main .contact_btn:hover {
    background-color: #cae245;
}

.send_success {
    background-color: #d4e285;
    border-radius: 10px;
    font-weight: 500;
    line-height: 21px;
    margin-bottom: 10px;
    color: #363f00;
    padding: 10px;
    box-sizing: border-box;
    font-size: 14px;
    word-break: keep-all;s
}

/*포트폴리오*/
.portfolio_main {
    overflow: hidden;
}

.portfolio_wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 50px;
}

.portfolio .thumbnail {
    width: 100%;
    height: 350px;
    border-radius: 10px;
    background-color: #ddd;
    overflow: hidden;
}

.portfolio .thumbnail img {
    height: 100%;
    object-fit: cover;
}

.portfolio .text_wrap span {
    display: block;
    font-weight: 600;
    font-size: 24px;
    margin: 15px 0 5px 0;
}

.portfolio .text_wrap p {
    font-size: 18px;
    font-weight: 300;
    word-break: keep-all;
}

.portfolio .tag_wrap {
    margin-top: 10px;
}

.portfolio .tag_wrap .gray {
    color: #888b9c;
    font-size: 16px;
    display: flex;
}

.portfolio .tag_wrap .gray p {
    display: flex;
}

.portfolio .tag_wrap .gray p::after {
    display: block;
    content: "|";
    margin: 0 4px;
}

.portfolio .tag_wrap .gray p:last-child:after {
    display: none;
}

.portfolio .tag_wrap .sq {
    display: flex;
    margin-top: 8px;
}

.portfolio .tag_wrap .sq p {
    padding: 5px 8px;
    border-radius: 5px;
    font-size: 14px;
}

.portfolio .tag_wrap .period {
    margin-right: 5px;
}

.period_1 {
    background-color: #f1ffa3;
    color: #7f9600;
}

.period_2 {
    background-color: #ffd7a3;
    color: rgb(228, 98, 47);
}

.period_3 {
    background-color: #add0ff;
    color: #0045c5;
}

.period_6 {
    background-color: #f3cdff;
    color: #c12cee;
}

.portfolio .tag_wrap .pay {
    background-color: #add0ff;
    color: #0045c5;
    display: none;
}

/* footer */
footer {
    background-color: #0f111c;
    padding: 30px 0;
    border-top: 1px solid #ffffff1c;
}

.footer_wrap {
    width: 1500px;
    margin: 0 auto;
    font-size: 14px;
    font-weight: 300;
}

.footer_wrap>p {
    font-weight: 700;
}

.footer_wrap>.company_info {
    margin: 20px 0;
    line-height: 1.5;
}

.footer_wrap .info_1,
.info_2 {
    display: flex;
}

.footer_wrap li::after {
    content: "|";
    margin: 0 5px;
}

.footer_wrap li:last-child::after {
    display: none;
}

.Copyright {
    font-weight: 300 !important;
}

footer .terms {
    display: flex;
    margin-top: 20px;
}

footer .terms a {
    margin-right: 20px;
    font-weight: 700;
}


/* deco */

.deco_1 {
    width: 1500px;
    height: 1500px;
    background: radial-gradient(circle,
            rgba(76, 157, 239, 1) 0%,
            rgba(76, 157, 239, 0) 100%);
    border-radius: 1500px;
    filter: blur(300px);
    position: absolute;
    z-index: -152;
    top: 99%;
    left: -28%;
    opacity: 0.4;
}

.deco_2 {
    background-image: url(../../Content/image/icon/deco_2.png);
    width: 1200px;
    height: 1200px;
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    z-index: -152;
    top: 400%;
    right: 0;
}

.deco_3 {
    background-image: url(../../Content/image/icon/deco_3.png);
    width: 1070px;
    height: 430px;
    background-size: 700px;
    background-repeat: no-repeat;
    position: absolute;
    z-index: -152;
    top: 35%;
    left: 85px;
}

.deco_4 {
    width: 1000px;
    height: 1000px;
    background: radial-gradient(circle,
            rgba(76, 157, 239, 1) 0%,
            rgba(76, 157, 239, 0) 100%);
    border-radius: 1500px;
    filter: blur(200px);
    position: absolute;
    z-index: -152;
    opacity: 0.4;
    bottom: -45%;
    left: 50%;
    margin-left: -500px;
}

.deco_5 {
    width: 900px;
    height: 900px;
    background: radial-gradient(circle,
            rgba(76, 157, 239, 1) 0%,
            rgba(76, 157, 239, 0) 100%);
    border-radius: 1500px;
    filter: blur(100px);
    position: absolute;
    z-index: -152;
    top: -29%;
    left: -10%;
    opacity: 0.4;
}


.deco_6 {
    width: 1000px;
    height: 1000px;
    background: radial-gradient(circle,
            rgba(76, 157, 239, 1) 0%,
            rgba(76, 157, 239, 0) 100%);
    border-radius: 1500px;
    filter: blur(100px);
    position: absolute;
    z-index: -152;
    bottom: -12%;
    right: 0%;
    opacity: 0.4;
}

/* 반응형 */
@media(max-width:1600px) {

    /* 공통 */
    .container {
        width: 90%;
    }

    /* 헤더 */
    .nav_wrap {
        width: 90%;
        height: 80px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        transition-duration: 0.8s;
    }

    .nav_wrap .logo {
        width: 75px;
    }

    /* sec2 */
    .section2 .rolling_wrap {
        width: 75%;
    }

    /* sec3 */
    .section3 .con_wrap li {
        width: 33%;
    }

    .section3 .con_wrap .text_wrap span {
        word-break: keep-all;
    }

    .section3 .con_wrap li .count {
        font-size: 40px !important;
    }

    .section3 .con_wrap li div:last-child p {
        margin: 0 0 5px 5px;
    }

    /* sec4 */
    .sec4_con>div {
        width: 90%;
    }

    /* sec5 */

    .section5 .con_wrap li>div:last-child {
        word-break: keep-all;
    }

    .section5 .con_wrap li>div:last-child br {
        display: none;
    }

    /* sec6 */

    .section6 .con_wrap .card {
        width: 100%;
    }

    /* 푸터 */

    .footer_wrap {
        width: 90%;
    }

    /* 개발문의 페이지 */
    .contact_main .company_info li {
        font-size: 18px;
    }

    .contact_main .company_info li span {
        min-width: 85px;
        width: 85px;
    }

    /* 포트폴리오 */

    .portfolio .thumbnail {
        height: auto;
    }
}

@media(max-width:1250px) {
    .cursor {
        display: none;
    }

    /* 헤더 */
    .nav_wrap.on {
        width: 80%;
    }

    /* 공통 */

    .container {
        width: 90%;
    }

    .copy_wrap>.copy {
        font-size: 40px;
        line-height: 56px;
    }

    .copy_wrap>.desc {
        font-size: 24px;
        margin-top: 5px;
        line-height: 35px;
        word-break: keep-all;
    }

    /* sec2 */
    .section2 {
        width: 90%;
        margin: 0 auto;
    }

    .section2 .container {
        display: block;
        width: 100%;
    }

    .section2 .rolling_wrap {
        width: 100%;
        margin-top: 30px;
    }

    .section2 .rolling_track {
        gap: 65px
    }

    /* sec3 */

    .section3 .con_wrap li {
        width: 32.5%;
        padding: 20px;
        height: 225px;
    }

    .section3 .con_wrap .text_wrap p {
        font-size: 24px;
    }

    .section3 .con_wrap .text_wrap span br {
        display: none;
    }

    .section3 .con_wrap li .count {
        font-size: 30px !important;
        margin: 0px !important
    }

    .section3 .con_wrap li .count_deco {
        font-size: 30px !important;
        margin: 0 0 3px !important;
    }

    .section3 .con_wrap li div:last-child p {
        font-size: 22px;
    }

    /* sec4 */

    .sec4_con>div {
        width: 90%;
        min-height: 350px;
    }

    .sec4_con .con_text {
        width: 100%;
    }

    .sec4_con .label {
        font-size: 24px;
    }

    .sec4_con .title {
        font-size: 34px;
        margin: 10px 0 5px;
    }

    .sec4_con .desc {
        word-break: keep-all;
        font-size: 26px;
        line-height: 38px;
    }

    .sec4_con .desc br {
        display: none;
    }

    .img_1 {
        width: 350px;
        bottom: 15%;
        right: 10%;
    }

    .img_2 {
        width: 229px;
        bottom: 19%;
        left: 62%;
    }

    .img_3 {
        width: 315px;
        bottom: 15%;
        right: 10%;
    }

    .img_4 {
        width: 265px;
        bottom: 20%;
        left: 60%;
    }

    .img_5 {
        width: 245px;
        bottom: 14%;
        right: 10%;
    }

    .img_6 {
        width: 250px;
        bottom: 20%;
        left: 60%;
    }


    /* sec5 */
    .section5 .container {
        height: 100vh;
    }

    .section5 .con_wrap {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .section5 .con_wrap li {
        padding: 25px;
        width: 100%;
    }

    .section5 .con_wrap li>.title .label {
        font-size: 16px;
    }

    .section5 .con_wrap li>.title .title {
        margin: 5px 0px 7px 0;
        font-size: 24px;
    }

    .section5 .con_wrap li>div:last-child {
        font-size: 18px;
        line-height: 28px;
    }

    /* sec6 */
    .section6 {
        height: auto;
    }

    .section6 .container {
        display: block;
        height: auto;
        margin-bottom: 150px;
    }

    .section6 .con_wrap {
        transform: translateY(0px) !important;
        margin-top: 0;
    }

    .section6 .con_wrap .card {
        width: 100%;
        margin: 0 auto;
        height: auto;
    }

    .section6 .con_slide {
        height: auto;
        -webkit-mask-image: none;
        mask-image: none;
        margin-top: 30px;
    }

    .section6 .con_wrap>div ul li br {
        display: none;
    }

    .section6 .con_wrap .card:nth-child(2) {
        margin: 20px auto;
    }

    /* sec7 */

    .section7 .rolling_wrap {
        margin-top: 50px;
    }

    .section7 .rolling_track_top,
    .section7 .rolling_track_bottom {
        gap: 50px;
    }

    .section7 .rolling_item {
        width: 80px;
    }

    /* sec8 */

    .section8 .desc br {
        display: none;
    }

    .section8 .copy_wrap {
        width: 50%;
    }

    .section8 .inquiry_wrap {
        width: 48%;
    }

    /* 포트폴리오 */
    .portfolio_wrap {
        grid-template-columns: repeat(2, 1fr);
    }

    /* deco */

    .deco_1 {
        width: 900px;
        height: 900px;
    }

    .deco_2 {
        width: 700px;
        height: 700px;
    }

    .deco_3 {
        width: 600px;
        top: -6%;
        left: 0;
        background-size: contain;
    }


}


@media(max-width:1020px) {

    /* sec8 */
    .section8 .container {
        display: block;
    }

    .section8 .copy_wrap {
        width: 100%;
    }

    .section8 .copy_wrap .desc {
        width: 90%;
    }

    .section8 .copy_wrap .desc br {
        display: none;
    }

    .section8 .inquiry_wrap {
        width: 100%;
        margin-top: 30px;
    }

    /* 문의하기 */
    .contact_main .copy_wrap {
        width: 45%;
    }

    .contact_main .inquiry_wrap {
        width: 48%;
    }

    .page_main .copy_wrap .desc br {
        display: none;
    }


}

@media(max-width:950px) {

    /* 공통 */
    .copy_wrap>.copy {
        font-size: 36px;
        line-height: 50px;
    }

    .copy_wrap>.desc br {
        display: none;
    }

    /* sec1 */
    .section1 .container .main_copy {
        font-size: 40px;
    }

    /* sec2 */
    .section2 {
        padding: 80px 0;
        margin-top: 30px;
    }

    .section2 .rolling_track {
        gap: 50px;
    }

    /* sec3 */
    .section3 .con_wrap {
        display: block;
    }

    .section3 .con_wrap li {
        width: 100%;
    }

    .section3 .con_wrap li:nth-child(2) {
        margin: 20px 0;
    }

    .section3 .con_wrap li:hover {
        transform: translateY(0);
    }

    .section3 .con_wrap .text_wrap p {
        font-size: 28px;
    }

    .section3 .con_wrap li .count {
        font-size: 40px !important;
    }

    .section3 .con_wrap li .count_deco {
        font-size: 40px !important;
    }

    .section3 .con_wrap li div:last-child p {
        font-size: 26px;
    }

    /* sec4 */
    .section4 {
        padding: 110px 0;
    }

    .section4 .con_wrap {
        margin-top: 50px;
    }

    .sec4_con .title {
        font-size: 30px;
        margin: 10px 0;
    }

    .sec4_con .desc {
        font-size: 22px;
        line-height: 32px;
    }

    .sec4_con .con_text p {
        font-size: 16px;
    }

    /* sec6 */

    .section6 .con_wrap>div ul li {
        word-break: keep-all;
    }

    .section6 .con_wrap>div ul li:first-child {
        margin: 0 0 5px 0;
    }

    /* sec8 */
    .section8 .copy_wrap .desc {
        width: 100%;
    }

    /* 문의하기 페이지 */

    .contact_main .container {
        display: block;
    }

    .contact_main .copy_wrap,
    .contact_main .inquiry_wrap {
        width: 100%;
    }

    .contact_main .inquiry_wrap {
        margin-top: 20px;
    }


    /* 포트폴리오 페이지 */
    .portfolio .text_wrap span {
        font-size: 20px;
    }

    .portfolio .text_wrap p {
        font-size: 16px;
    }

    /* deco */
    .deco_5 {
        width: 600px;
        height: 600px;
        top: 10%;
    }
}

@media(max-width:768px) {

    /* 공통 */
    .copy_wrap>.copy {
        font-size: 32px;
        line-height: 46px;
        word-break: keep-all;
    }

    .copy_wrap>.desc {
        font-size: 22px;

    }


    /* sec1 */
    .section1 .container {
        width: 95%;
    }

    .section1 .container .main_copy {
        font-size: 38px;
        line-height: 54px;
    }

    .section1 .container p {
        word-break: keep-all;
    }

    .section1 .container p br {
        display: none;
    }

    .scroll_down {
        width: 100px;
        right: 20px;
        bottom: 20px;
    }

    .scroll_down i {
        font-size: 20px;
        top: 45%;
        left: 52%;
    }


    /* sec2 */

    .section2 .rolling_item {
        width: 150px;
    }

    .section2 .rolling_item03,
    .section2 .rolling_item14 {
        width: 90px;
    }

    .section2 .rolling_item06,
    .section2 .rolling_item07 {
        width: 170px;
    }

    .section2 .rolling_item10,
    .section2 .rolling_item11,
    .section2 .rolling_item12,
    .section2 .rolling_item13 {
        width: 100px;
    }

    /* sec4 */

    .section4 {
        padding: 110px 0 0 0;
    }

    .sec4_con>div {
        min-height: 300px;
    }

    .img_1 {
        width: 300px;
        right: 1%;
    }

    .img_2 {
        width: 190px;
        left: 50%;
    }

    .img_3 {
        width: 280px;
        right: 1%;
    }

    .img_4 {
        width: 230px;
        left: 40%;
    }

    .img_5 {
        width: 210px;
        right: 1%;
    }

    .img_6 {
        width: 220px;
        left: 47%;
    }

    /* sec5 */

    .section5 {
        height: auto;
    }

    .section5 .container {
        height: auto;
    }

    .section5 .con_wrap {
        display: block;
    }

    .section5 .con_wrap li {
        margin-bottom: 20px;
    }

    /* sec6 */
    .section6 .container {
        margin: 110px auto;
    }

    /* footer */
    .footer_wrap .info_1,
    .info_2 {
        display: block;
        line-height: 24px;
    }

    .footer_wrap li::after {
        display: none;
    }

    .page_main {
        padding: 130px 0;
    }

    .page_main .copy_wrap .copy {
        font-size: 60px;
    }

    .page_main .copy_wrap .desc {
        margin-top: 15px;
    }

    .contact_main .company_info li {
        font-size: 16px;
        line-height: 28px;
    }

    /* 포트폴리오 */
    .portfolio_wrap {
        grid-template-columns: repeat(1, 1fr);
    }

    /* deco */

    .deco_1 {
        width: 600px;
        height: 600px;
        filter: blur(150px);
    }

    .deco_2 {
        width: 500px;
        height: 500px;
    }

    .deco_3 {
        width: 450px;
    }

    /* deco */
    .deco_5 {
        width: 450px;
        height: 450px;
        top: 10%;
        filter: blur(50px);

    }
}

@media(max-width:480px) {

    /* 공통 */
    .copy_wrap>.desc {
        font-size: 20px;
        line-height: 30px;
    }

    /* header */
    .nav_wrap .logo {
        width: 65px;
    }

    .nav_wrap ul {
        font-size: 16px;
    }

    .nav_wrap.on {
        padding: 0 30px;
    }

    .nav_wrap.on .logo {
        width: 50px;
    }

    /* sec1 */
    .section1 .container .main_copy {
        font-size: 30px;
        line-height: 45px;
    }

    .section1 .container p {
        font-size: 16px;
    }

    .section1 .contact_btn {
        font-size: 16px;
    }

    /* sec3 */

    .section3 .con_wrap .text_wrap p {
        font-size: 24px;
    }

    .section3 .con_wrap li div:last-child p {
        font-size: 26px !important;
        margin: 0 0 0 5px;
    }

    .section3 .con_wrap li .count {
        font-size: 30px;
    }

    /* sec4 */
    .sec4_con>div {
        padding-bottom: 80px;
        margin-bottom: 80px;
    }

    .sec4_con .label {
        font-size: 20px;
    }

    .sec4_con .title {
        font-size: 28px;
        word-break: keep-all;
    }

    .img_1 {
        width: 260px;
    }

    .img_2 {
        width: 150px;
    }

    .img_3 {
        width: 200px;
    }

    .img_4 {
        width: 190px;
    }

    .img_5 {
        width: 170px;
    }

    .img_6 {
        width: 180px;
    }

    /* sec6 */
    .copy_wrap>.copy {
        font-size: 28px;
        line-height: 44px;
    }

    .section6 .con_wrap>div p {
        font-size: 24px;
    }

    .section6 .con_wrap>div ul li {
        font-size: 20px;
    }

    /* section8 */

    .section8 .inquiry_field span {
        width: 27%;
    }

    .section8 .inquiry_field {
        justify-content: space-between;
    }

    .section8 input[type="text"],
    .section8 textarea {
        width: 72%;
    }

    .page_main {
        padding: 100px 0;
    }

    .page_main .copy_wrap .copy {
        font-size: 48px;
    }

    /*문의하기*/
    .contact_main .inquiry_field span{
        width: 29%;
    }

    .contact_main .inquiry_field span::after{
        margin-left:  3px;
    }

    .deco_1 {
        width: 300px;
        height: 300px;
        filter: blur(80px);
        top: 109%;
        left: -16%;
    }

    .deco_2 {
        width: 400px;
    }

    .deco_3 {
        width: 300px;
    }

    .deco_5 {
        width: 350px;
        height: 350px;
    }

}

/* icon */
@font-face {
    font-family: "iebleArrow_icon";
    src: url("../../fonts/iebleArrow_icon.eot?d09c4w");
    src: url("../../fonts/iebleArrow_icon.eot?d09c4w#iefix") format("embedded-opentype"),
        url("../../fonts/iebleArrow_icon.ttf?d09c4w") format("truetype"),
        url("../../fonts/iebleArrow_icon.woff?d09c4w") format("woff"),
        url("../../fonts/iebleArrow_icon.svg?d09c4w#iebleArrow_icon") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

[class^="iebleArrow-"],
[class*=" iebleArrow-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: "iebleArrow_icon" !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.iebleArrow-arrow:before {
    content: "\e900";
    color: #fff;
}

@font-face {
    font-family: 'si_icon';
    src: url('../../fonts/si_icon.eot?9rcqtw');
    src: url('../../fonts/si_icon.eot?9rcqtw#iefix') format('embedded-opentype'),
        url('../../fonts/si_icon.ttf?9rcqtw') format('truetype'),
        url('../../fonts/si_icon.woff?9rcqtw') format('woff'),
        url('../../fonts/si_icon.svg?9rcqtw#si_icon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

[class^="si_icon"],
[class*=" si_icon"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'si_icon' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.si_iconchat:before {
    content: "\e900";
}