@charset "utf-8";
a{cursor: none;}
.section-tit h3{font-size: 8vw; text-align: center;}

header{z-index: 8888;}
header .header-wrap{position: fixed; top: 0; left: 0; padding: 20px 25px; transition: background 0.3s; z-index: 8888;}
header .main-banner {padding-top: 48px;}

/* service */
.section1 .section-tit{width: 100%; position: relative;}
.section1 .section-tit h3{text-align: left;}
.section1 .section-tit>p {font-size: 1.125rem; color: var(--cont-text1); position: absolute; right: 0; bottom: 10%;}
.section1 .service-list{width: 100%; display: flex; column-gap: 1.5vw;}
.section1 .service-list li{overflow: hidden; width: calc(100%/3 - 1vw); position: relative; width: 100%; height: 35vw;}
.section1 .service-list li:first-child .bg{background: url(../img/web.webp) center/cover;}
.section1 .service-list li:nth-child(2) .bg{background: url(../img/marketing.webp) center/cover;}
.section1 .service-list li:last-child .bg{background: url(../img/design.webp) center/cover;}

.section1 .service-list li .bg {width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0.5;  z-index: -1;}

.section1 .service-list li a{transition: all 0.3s; padding: 0 2.5vw; padding-bottom: 3vw; display: flex; justify-content: flex-end; align-items: center; flex-direction: column; row-gap: 2vw; transition: all 0.3s; width: 100%; height: 100%;}
.section1 .service-list li a::after {z-index: -1; content: ''; position: absolute; top: 100%; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(10px); transition: all 0.4s;}
.section1 .service-list li .sv-tit{position: relative; z-index: 1; font-size: 2.5rem; font-weight: bold;}
.section1 .service-list li .sv-txt{position: relative; z-index: 1; display: none; text-align: center; color: var(--cont-text1);}
.section1 .service-list li .sc-btn{display: none;}

.section1 .service-list li a:hover {justify-content: center; padding-bottom: 0;}
.section1 .service-list li a:hover::after {top: 0;}
.section1 .service-list li a:hover .sv-txt{display: block;}
.section1 .service-list li a:hover .sc-btn {display: flex;}

/* portfolio */
.portfolio-wrap{width: 100%; height: 80vw; position: relative;}
.portfolio{position: absolute; display: flex; flex-direction: column; align-items: flex-start; row-gap: 24px;}
.portfolio:nth-child(1), .portfolio:nth-child(4) {width: 50%; height: 30vw;}
.portfolio:nth-child(2), .portfolio:nth-child(3) {width: 40%; height: 45vw;}
.portfolio:nth-child(1) {top: 0; left: 0;}
.portfolio:nth-child(2) {top: 0; right: 0;}
.portfolio:nth-child(3) {bottom: 0; left: 0;}
.portfolio:nth-child(4) {bottom: 0; right: 0;}
.portfolio .pf-img {opacity: 0.5; transition: all 0.3s; width: 100%; height: 100%; background: #000 url(../img/portfolio/portfolio01.webp) top center; background-size: 100%;}
.portfolio:nth-child(2) .pf-img {background: #000 url(../img/design/design2.webp) top center; background-size: 100%;}
.portfolio:nth-child(3) .pf-img {background: #000 url(../img/design/design3.webp) top center; background-size: 100%;}
.portfolio:nth-child(4) .pf-img {background: #000 url(../img/design/design4.webp) top center; background-size: 100%;}
.portfolio .pf-info{padding-left: 16px; display: flex; flex-direction: column; row-gap: 8px;}
.portfolio .pf-info p{font-size: 1.25rem;}
.portfolio .pf-info span{color: var(--cont-text1);}
.portfolio .pf-info span strong{font-weight: normal; color: var(--cont-color);}
.portfolio:hover .pf-img {opacity: 1; background-size: 110%;}

/* columns */
.section3 {}
.section3 .section-tit{}
.columns-wrapper{}
.columns-wrap{display: flex; flex-direction: column; row-gap: 5rem;}
.column-list{overflow: hidden; position: relative; padding: 2rem;}
.column-list::before, .column-list::after {content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: block;}
.column-list::after {width: calc(100% - 2px); height: calc(100% - 2px); top: 1px; left: 1px; background-color: var(--bg-color); z-index: -1; opacity: 0.5;}
.column-list::before {background: linear-gradient(to right, #e68f44, var(--point-color)); z-index: -1; opacity: 1; transition: opacity 0.3s; opacity: 0;}
.column-list:hover::before {opacity: 1;}
.column-list h5{font-size: 3.5rem; font-weight: bold; margin-bottom: 2.5rem;}
.column-list p{font-size: 1.5rem;}

/* contact */
.contact{margin-bottom: 0; width: 100%; padding: 5.5vw 5vw; row-gap: 40px; align-items: flex-start; background: url(../img/main-bg.webp) no-repeat; background-size: cover; overflow: hidden;}
.contact p {font-size: 6.25rem; font-weight: bold;}

@keyframes rotateImage {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes scroll {
    0% {
        opacity: 1;
        transform: translateY(-50%)
    }

    50% {
        opacity: 0
    }

    to {
        height: 0;
        opacity: 0;
        transform: translateY(0)
    }
}
@media screen and (min-width: 1921px) {
}

@media screen and (min-width: 1281px) {
    /* 커서 */
    html,body, a, input, label, button, textarea{cursor: none}
    #custom-cursor{position: fixed; top: 0; left: 0; width: 30px; height: 30px; background: rgba(255, 0, 0, 0.7); border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); transition: background 0.3s, width 0.3s, height 0.3s; z-index: 99999; mix-blend-mode: difference; cursor: none;}
    #custom-cursor.a-cursor{background: blue; width: 70px; height: 70px;}
    #custom-cursor.input-cursor{background: yellow; width: 30px; height: 30px;}
    #custom-cursor.pf-cursor{mix-blend-mode: unset; background: black; width: 100px; height: 100px;}
    #custom-cursor.pf-cursor::after{animation: rotateImage 10s linear infinite; background: url(../img/logo-circle.svg); background-size: 80%; background-repeat: no-repeat; background-position: center center;  position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ''; display: block;}
    #custom-cursor.pf-cursor::before{background: url(../img/arrow.svg); background-repeat: no-repeat; background-position: center center;  position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ''; display: block;}
}
@media screen and (max-width: 1440px) {
  .column-list h5{font-size: 3rem;}
}

@media screen and (max-width: 1280px) {
  a, .sc-btn{cursor: pointer;}
  .menu-btn, .top-btn{cursor: pointer;}
  #custom-cursor{display: none;}
  
  .section1 .section-tit>p{display: none;}
  .portfolio-wrap{height: 90vw;}
  .portfolio:nth-child(1), .portfolio:nth-child(4) {height: 35vw;}
  .portfolio:nth-child(2), .portfolio:nth-child(3) {height: 50vw;}

  .columns-wrap{row-gap: 3rem;}
  .column-list h5{font-size: 2.5rem;}
  .column-list p{font-size: 1.25rem;}
}


@media screen and (max-width: 1024px) {
  .section1 .service-list{flex-direction: column;}
  .section1 .service-list li{height: 45vw;}
  .section1 .service-list li a {justify-content: center; padding: 0 3rem; row-gap: 1.5rem;}
  .section1 .service-list li a:hover::after {display: none;}
  .section1 .service-list li a .sv-txt{display: block; width: 70%;}
  .section1 .service-list li .sc-btn {display: flex;}

  .portfolio-wrap{position: unset; display: flex; flex-direction: column; height: unset; row-gap: 3rem;}
  .portfolio{position: unset;}
  .portfolio:nth-child(1), .portfolio:nth-child(2), .portfolio:nth-child(3), .portfolio:nth-child(4) {width: 100%; height: 30rem;}
}

@media screen and (max-width: 768px) {
  .contact p{font-size: 4.5rem;}
  .section1 .service-list li .sc-btn, .section1 .service-list li a:hover .sc-btn{display: none;}
}

@media screen and (max-width: 480px) {
  .section-tit h3{font-size: 3rem;}
  .contact p{font-size: 3.5rem;}
}