@charset "utf-8";

/* reset */
* {margin: 0;padding: 0;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, tbody, tfoot, thead, tr, th, td{margin:0;padding:0;}
h1, h2, h3, h4, h5, h6 {font-weight: 700; font-size: inherit;}
a {color: inherit; text-decoration: inherit;}
img {vertical-align: middle;}
a img {border: none;}
li {list-style: none;}
address, em, i {font-style: normal;}
a:focus {outline: none}
button:focus {outline: none}

/* layout */
body {font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; font-size: 16px; color: #fff; background: #222222;}
.wrap {margin: 0 auto; position: relative; overflow: hidden;}

/* header */
header {width: 100%; position: fixed; z-index: 200; color: #1A1A1B;}
header .goTop {position: fixed; right: 40px; bottom: 50px; padding: 18px 20px; border-radius: 50%; box-shadow: 0 0 10px rgba(0,0,0,0.4); box-sizing: border-box; background: hsla(0,0%,100%,.7); backdrop-filter: blur(8px); transition: all 0.2s;}
header .goTop:hover {background: #ececec;}
header .goTop.on {opacity: 0;}
header .goTop span {color: #2757FF; font-weight: bold; font-size: 18px;}

.innerHeader {width: 97%; height: 50px; padding-top: 24px; margin: 0 auto; }
.innerHeader .mainMenu {width: 370px; display: flex; margin: 0 auto;}
.innerHeader .mainMenu .gnb {display: flex; justify-content: space-between; width: 100%; border-radius: 20px; padding: 6px 10px; box-shadow: 0 0 10px rgba(0,0,0,0.3); background: hsla(0,0%,100%,.7); backdrop-filter: blur(8px);}
.innerHeader .mainMenu .gnb li {padding: 6px 10px; font-weight: bold; position: relative; transition: all 0.3s;}
.innerHeader .mainMenu .gnb li:hover {background: rgba(0,0,0,0.1); border-radius: 20px; transition: all 0.3s;}
.innerHeader .mainMenu .gnb li:nth-child(4) {background: #222; border-radius: 20px; color: #90F188;}
.innerHeader .mainMenu .gnb li a {display: block; width: 100%; height: 100%; z-index: 3;}

/* visual */
.visual {width: 70%; margin: 0 auto; padding: 330px 0 300px; text-align: center;}
.visual h1 {font-size: 140px; line-height: 115px; letter-spacing: -6px; padding-bottom: 32px;}
.visual p {font-size: 20px; line-height: 1.5; letter-spacing: -1px; font-weight: 200;}


/* animation */
.tit.motion .char { display: inline-block;
    animation: textAni1 1s cubic-bezier(.10, 0, .10, 1) both;
    animation-delay: calc(20ms * var(--char-index));
}



.visual.motion .char { display: inline-block;
    animation: textAni1 1s cubic-bezier(.10, 0, .10, 1) both;
    animation-delay: calc(30ms * var(--char-index));
}
.visual.motion p {animation-name: textAni1; animation-duration: 2s;}


@keyframes textAni1 {
    0% {opacity: 0;}
    40% {opacity: 0; transform: translate3d(0,40px,0); transform-origin: top left;}
}


 /* gallery */
.gallery {width: 100%; margin: 0 auto;}
.gallery .uiuxDesign {width: 70%; margin-bottom: 425px; margin: 0 auto; padding-bottom: 425px;}
.gallery .uiuxDesign .tit {font-size: 64px; font-weight: 500; letter-spacing: -2px; padding-bottom: 30px;}
.gallery .uiuxDesign .imgBox {width: 100%; height: 100%;}
.gallery .uiuxDesign .imgBox .img {width: 100%; height: 325px; overflow: hidden; border-radius: 36px; margin-bottom: 30px; position: relative;}
.gallery .uiuxDesign .imgBox .img img {position: absolute; width: 100%; top: -20%; object-fit: cover; transition: all 0.4s; transform: translate(50% 50%);}
.gallery .uiuxDesign .imgBox .img img:hover {transform: scale(1.03); transition: all 0.4s;}
.gallery .uiuxDesign .imgBox .img2 img:hover {transform: scale(1.03); transition: all 0.4s;}
.gallery .uiuxDesign .imgBox .img3 img:hover {transform: scale(1.03); transition: all 0.4s;}
.gallery .uiuxDesign .imgBox .img2 {width: 100%; height: 356px; display: flex; justify-content: space-between; margin-bottom: 30px; }
.gallery .uiuxDesign .imgBox .img2 .box {overflow: hidden; border-radius: 36px; position: relative; }
.gallery .uiuxDesign .imgBox .img2 .box:nth-child(1) {width: 49%;}
.gallery .uiuxDesign .imgBox .img2 .box:nth-child(2) {width: 49%;}
.gallery .uiuxDesign .imgBox .img2 .box img {width: 120%; position: absolute; left: -50px; transition: all 0.4s;}
.gallery .uiuxDesign .imgBox .img3 {width: 100%; height: 358px; overflow: hidden; border-radius: 36px;
margin-bottom: 40px; position: relative;}
.gallery .uiuxDesign .imgBox .img3 img {width: 100%; position: absolute; top: -25px; transition: all 0.4s;}
.gallery .uiuxDesign .btn {display: block; text-align: center; background: #2757FF; font-size: 24px; padding: 16px 0; border-radius: 36px; width: 24%; margin: 0 auto; transition: all 0.4s;}
.gallery .uiuxDesign .btn:hover {background: #c5d1fd; color: #2757FF; transition: all 0.4s; font-weight: 500;}

/* cloneCoding */
.cloneCoding {width: 75%; margin-bottom: 420px; margin: 0 auto;}
.cloneCoding .tit {font-size: 64px; font-weight: 500; letter-spacing: -2px; padding-bottom: 70px;}
.cloneCoding ul {width: 100%; height: 100%;}
.cloneCoding ul li {width: 100%; display: flex; justify-content: space-between; margin-bottom: 180px; align-items: center;}
.cloneCoding ul li .img {display: block; width: 660px; height: 342px; overflow: hidden; border-radius: 36px; border: 1px solid #adadad; position: relative;}
.cloneCoding ul li .img:hover img {transform: scale(1.1); transition: 0.7s;}
.cloneCoding ul li .img img {transition: 0.4s; position: absolute;}
.cloneCoding ul li .img:nth-child(2n) {width: 607px; height: 310px;}
.cloneCoding ul li:nth-child(4) .img img {width: 115%; left: -40px;}


.cloneCoding ul li .img img {width: 106%;}

.cloneCoding ul li .txt h3 {font-size: 50px; font-weight: 500; letter-spacing: -2px; padding-bottom: 20px;}
.cloneCoding ul li .txt p {font-size: 16px; font-weight: 200; line-height: 1.5;}


/* animation */
.cloneCoding ul li .img.motion {animation-name: imgAni; animation-duration: 1.1s;} 
.cloneCoding ul li .txt.motion {animation-name: slide1; animation-duration: 1.2s;}
.cloneCoding ul li:nth-child(2n) .txt.motion {animation-name: slide2; animation-duration: 1.2s;}

@keyframes slide1 {
    0% {opacity: 0;}
    40% {opacity: 0; transform: translateX(50%);}
}

@keyframes slide2 {
    0% {opacity: 0;}
    40% {opacity: 0; transform: translateX(-50%);}
}

@keyframes imgAni {
    0% {opacity: 0;}
    40% {opacity: 0; transform: translate3d(0,100px,0); transform-origin: top left;}
}




/* .artWork */
.artWork {width: 70%; margin: 0 auto; padding-bottom: 325px;}
.artWork .tit {font-size: 64px; font-weight: 500; letter-spacing: -2px; padding-bottom: 30px;}
.artWork .imgBox2 {width: 100%; height: 100%;}
.artWork .imgBox2 .img {overflow: hidden; border-radius: 36px; width: 100%; height: 327px; position: relative; margin-bottom: 30px; filter: brightness(50%); transition: all 0.4s;}
.artWork .imgBox2 .img:hover {filter: brightness(100%);}
.artWork .imgBox2 .img:hover img {transform: scale(1.05); transition: 0.4s;}
.artWork .imgBox2 .img img {width: 100%; position: absolute; top: -330px; transition: 0.3s;}
.artWork .imgBox2 .img2 {width: 100%; height: 280px; display: flex; justify-content: space-between; margin-bottom: 30px;}
.artWork .imgBox2 .img2 .img {position: relative;}

.artWork .imgBox2 .img2 .img:nth-child(1) img {width: 100%; top: -85px; position: absolute;}
.artWork .imgBox2 .img2 .img:nth-child(2) img {width: 100%; top: -220px; position: absolute;}
.artWork .imgBox2 .img2 .img:nth-child(1) {width: 49%; height: 100%; overflow: hidden; border-radius: 36px;}
.artWork .imgBox2 .img2 .img:nth-child(2) {width: 49%; height: 100%; overflow: hidden; border-radius: 36px;}

.artWork .imgBox2 .img3 {width: 100%; height: 310px; overflow: hidden; border-radius: 36px; position: relative; margin-bottom: 30px; filter: brightness(50%); transition: all 0.4s;}
.artWork .imgBox2 .img3:hover {filter: brightness(100%);}
.artWork .imgBox2 .img3:hover img {transform: scale(1.05); transition: 0.4s;} 
.artWork .imgBox2 .img3 img {position: absolute; width: 100%; top: -110px; transition: 0.3s;}
.artWork .imgBox2 .img4 {width: 100%; height: 512px; overflow: hidden; border-radius: 36px; position: relative;  margin-bottom: 32px; filter: brightness(50%); transition: all 0.4s;}
.artWork .imgBox2 .img4:hover {filter: brightness(100%);}
.artWork .imgBox2 .img4:hover img {transform: scale(1.05); transition: 0.4s;} 
.artWork .imgBox2 .img4 img {position: absolute; width: 100%; top: -200px; transition: 0.3s;}
.artWork .btn {display: block; text-align: center; background: #2757FF; font-size: 24px; padding: 16px 0; border-radius: 36px; width: 24%; margin: 0 auto; transition: all 0.4s;}

/* .btn 호버 */
.btn:hover {background: #c5d1fd; color: #2757FF; transition: all 0.4s; font-weight: 500;}


/* footer */
footer {width: 100%; padding-bottom: 100px;}
footer .top {width: 96%; text-align: center; margin: 0 auto; margin-bottom: 180px;}
footer .top img {width: 120px; height: 95px; padding-bottom: 18px; }
footer .top h2 {font-size: 130px; letter-spacing: -8px; line-height: 125px; padding-bottom: 32px;}
footer .top .topBtn {display: block; width: 15%; margin: 0 auto;}
footer .top p {width: 100%; font-size: 20px; color: #1A1A1B; background: #cecece; margin: 0 auto;
padding: 14px 0; border-radius: 50px; box-sizing: border-box; transition: all 0.3s;}
footer .bottom {width: 96%; height: 24px; margin: 0 auto; display: flex; justify-content: space-between; font-size: 20px; color: #acacac; padding-bottom: 32px; border-bottom: 2px solid #acacac;}
footer .bottom .left {display: flex; width: 28%; letter-spacing: -1px;}
footer .bottom .left p span {color: #fff; padding-right: 20px}
footer .bottom .left .e-mail {display: flex;}
footer .bottom .left .e-mail .first {padding-right: 20px; border-right: 2px solid #acacac;}
footer .bottom .left .e-mail .second {padding-left: 20px;}
footer .bottom .right {width: 11%; display: flex; text-align: right;}
footer .bottom .right p span {color: #fff; padding-right: 20px;}


/* responsiveWeb */
/* pc 1650px~ 1301px */
@media screen and (max-width:1650px) {
.brRe {display: none;}
.visual h1 {font-size: 8vw; line-height: 0.8;}
.cloneCoding ul li .img img {width: 130%;}
.cloneCoding ul li:nth-child(1) .img img {width: 135%;}
.cloneCoding ul li:nth-child(2) .img img {left: -50px;}
.cloneCoding ul li:nth-child(3) .img img {left: -80px;}
.cloneCoding ul li:nth-child(4) .img img {width: 130%; left: -80px; } 
.cloneCoding ul li:nth-child(5) .img img {left: -80px;}
.cloneCoding ul li:nth-child(6) .img img {left: -80px;}
.cloneCoding ul li:nth-child(7) .img img {left: -100px; width: 140%;}
.cloneCoding ul li .txt {padding-left: 60px; width: 45%;}
.cloneCoding ul li:nth-child(2n) .txt {padding:0 60px 0 0;}
.cloneCoding ul li .txt h3 {font-size: 40px;}
.artWork .imgBox2 .img img {top: -220px;}
.artWork .imgBox2 .img2 .img:nth-child(1) img {top: 0;}
.artWork .imgBox2 .img2 .img:nth-child(2) img {top: -150px;}
.artWork .imgBox2 .img3 {height: 280px;}
.artWork .imgBox2 .img4 {height: 450px;}
.artWork .imgBox2 .img4 img {top: -100px;}
.gallery {width: 100%;}
.gallery .uiuxDesign .imgBox .img2 .box img {width: 160%; left: -30%;}
footer .bottom .left {width: 50%;}
footer .bottom .right {width: 16%;}
}

/* mobile 400px~301px */
@media screen and (max-width:400px) {
    .brRe {display: none;}
    header .goTop {position: fixed; right: 20px; bottom: 30px;}
    .innerHeader {width: 97%; height: 50px; padding-top: 24px; margin: 0 auto;}
    .innerHeader .mainMenu {width: 320px;}
    .innerHeader .mainMenu .gnb li {font-size: 14px; padding: 4px 8px; font-weight: bold; position: relative; transition: all 0.3s;}
    .visual {width: 80%; padding: 300px 0 280px;}
    .visual h1 {font-size: 10.5vw; letter-spacing: -3px; line-height: 1; padding-bottom: 20px;}
    .visual.motion p {font-size: 12px; letter-spacing: -0.5px;}
    .gallery .uiuxDesign .tit {font-size: 40px;}
    .gallery {width: 100%;}
    .gallery .uiuxDesign {padding-bottom: 240px; width: 85%;}
    .gallery .uiuxDesign .imgBox .img {height: 140px; border-radius: 24px; margin-bottom: 12px;}
    .gallery .uiuxDesign .imgBox .img img {top: 0;}
    .gallery .uiuxDesign .imgBox .img2 {height: 120px; margin-bottom: 12px;}
    .gallery .uiuxDesign .imgBox .img2 .box {border-radius: 24px;}
    .gallery .uiuxDesign .imgBox .img3 {height: 130px; border-radius: 24px; margin-bottom: 32px;}
    .gallery .uiuxDesign .btn {width: 140px; font-size: 16px; padding: 10px 0;}
    .cloneCoding {margin-bottom: 220px; width: 88%;}
    .cloneCoding .tit {font-size: 40px; padding-bottom: 50px;}
    .cloneCoding ul li {display: block; margin-bottom: 120px;}
    .cloneCoding ul li .img {width: 100%; height: 250px;}
    .cloneCoding ul li .txt {padding-left: 0; width: 100%;}
    .cloneCoding ul li .txt h3 {font-size: 32px; padding-top: 20px;}
    .cloneCoding ul li .txt p {font-size: 14px;}
    .cloneCoding ul li .img:nth-child(2n) {width: 100%; height: 250px;}
    .cloneCoding ul li:nth-child(2n) .txt {padding: 0 0 20px 0;}
    .cloneCoding ul li:nth-child(1) .img img {width: 150%;}
    .cloneCoding ul li:nth-child(2) .img img {width: 160%;}
    .cloneCoding ul li:nth-child(3) .img img {width: 150%;}
    .cloneCoding ul li:nth-child(4) .img img {width: 165%; left: -98px;}
    .cloneCoding ul li:nth-child(5) .img img {width: 150%;}
    .cloneCoding ul li:nth-child(6) .img img {width: 155%;}
    .cloneCoding ul li:nth-child(7) .img img {width: 155%; left: -90px;}

    .artWork {padding-bottom: 80px; width: 85%;}
    .artWork .tit {font-size: 40px; padding-bottom: 20px;}
    .artWork .imgBox2 .img {border-radius: 24px; height: 160px; margin-bottom: 12px;}
    .artWork .imgBox2 .img img {top: -45px;}
    .artWork .imgBox2 .img2 {height: 120px; margin-bottom: 12px;}
    .artWork .imgBox2 .img2 .img:nth-child(1) {border-radius: 24px;}
    .artWork .imgBox2 .img2 .img:nth-child(1) img {width: 120%; left:-10px;}
    .artWork .imgBox2 .img2 .img:nth-child(2) {border-radius: 24px;}
    .artWork .imgBox2 .img2 .img:nth-child(2) img {top: -50px;}
    .artWork .imgBox2 .img3 {height: 150px; margin-bottom: 12px; border-radius: 24px;}
    .artWork .imgBox2 .img3 img {top: 0;}
    .artWork .imgBox2 .img4 {height: 200px; border-radius: 24px;}
    .artWork .imgBox2 .img4 img {top: 0;}
    .artWork .btn {width: 140px; font-size: 16px; padding: 10px 0;}
    footer {padding: 16vh 0 10vh;}
    footer .top .topBtn {width: 140px;}
    footer .top p {font-size: 13px; padding: 12px 0;}
    footer .top img {width: 65px; height: 50px; padding-bottom: 10px;}
    footer .top h2 {font-size: 50px; letter-spacing: -5px; line-height: 50px; padding-bottom: 16px; font-weight: 600;}
    footer .bottom {padding-bottom: 80px; display: block;}
    footer .bottom .left {margin-bottom: 10px; width: 100%;}
    footer .bottom .left .e-mail {display: block;}
    footer .bottom .left .e-mail .first {border: none;}
    footer .bottom .left .e-mail .second {padding-left: 0px;}
    footer .bottom .right {width: 100%;}

}