/* 공통 */

.inner {

    padding: 144px 100px 160px 100px;

    margin: 0 auto;
}

.btn_common {
    margin-top: 30px;
    width: 250px;
    background: #000;
    line-height: 48px;
    border-radius: 24px;
    text-align: center;
    font-size: 16px;
    color: #fff;
    font-weight: 400;
}

.chat {
    position: fixed;
    z-index: 1;
    mix-blend-mode: difference;
    background: #fff;
    padding: 16px;
    box-sizing: border-box;
    width: 109px;
    height: 109px;
    bottom: 30px;
    right: 30px;
    border-radius: 10px;

}

.chat a i {

    display: block;
    background: url('../img/chat.svg') no-repeat center;
    background-size: cover;
    box-sizing: border-box;
    height: 100%;
}



.circle {
    position: fixed;
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 80%;
    backface-visibility: hidden;
    z-index: 10;
    pointer-events: none;
    mix-blend-mode: difference;

}

.circle.on {
    position: fixed;
    width: 300px;
    height: 300px;
    border-radius: 80%;
    backface-visibility: hidden;
    z-index: 10;
    pointer-events: none;
    mix-blend-mode: normal;

}

.circle.on img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 80%;

}

/* 메인이미지 */
.sc_visual {
    position: relative;
    background-color: #ffffff;
    background-image: radial-gradient(#00000029 0.8px, #ffffff 0.8px);
    background-size: 26px 26px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 150px;

}




.sc_visual .text_wrap {
    display: inline-block;
    text-align: left;
    font-weight: 300;

}

.sc_visual .text_wrap p {
    font-size: 26px;
    margin-bottom: 26px;
}


.sc_visual .text_wrap .line_1 p {
    font-size: 96px;
    font-weight: 600;
}

.sc_visual .text_wrap .create {
    display: inline-block;
    cursor: url(../img/clown.webp), auto;
}

.sc_visual .text_wrap .line_1 span {
    margin-left: 20px;
}

.sc_visual .text_wrap .line_2 p {
    font-size: 96px;
    font-weight: 600;
}



.sc_visual .btn_intro a {
    display: block;
    height: 100%;
}

.sc_visual .scroll {
    position: absolute;
    left: 40px;
    bottom: 50px;
    padding: 30px;
    writing-mode: vertical-rl;
}


/* 경력 */
.sc_career {
    overflow: hidden;
    background: #090909;
    color: white;
    width: 100%;
    height: 100%;
    padding-top: 144px;
    box-sizing: border-box;
    
}


.sc_career .title h2 {
    font-size: 120px;
    font-weight: 700;
    text-align: center;
}

.sc_career .title h2 i {
    margin-left: 10px;
    display: inline-block;
    width: 120px;
    height: 120px;
    background: url('../img/imoji.png') no-repeat center;
    background-size: cover;
    vertical-align: text-bottom
}

.marquee {
    margin-top: 150px;
    height: 100vh;
    width: 100%;   
    overflow: hidden;
    position: relative;
   
  }
  .marquee>div {
    display: block;
    width: 200%;
    margin-bottom: 55px;
    overflow: hidden;  
    animation: marquee 20s linear infinite;
  }
  .marquee>div:nth-child(1){top: 0; position: absolute; height: 100%; }
  .marquee>div:nth-child(2){top: 25%;position: absolute; overflow: hidden;}
  .marquee>div:nth-child(3){top: 50%; position: absolute; margin-bottom: 0;}
  .marquee span {
    display: block;
    float: left;
    height: 100%;
    width: 10%;
    text-align: center;

  }

  @keyframes marquee {
    0% { left: 0; }
    100% { left: -100%; }
  }


.react {
    font-size: 60px;
    
    white-space: pre;
    color: #fff;
}



.js {
    font-size: 60px;
   
    color: transparent;
    font-weight: 500;
    text-shadow: none;
    white-space: pre;
    -webkit-text-stroke: 1px rgb(255 255 255);
}




.html {
    font-size: 100px;

    color: transparent;
    font-weight: 500;
    text-shadow: none;
    white-space: pre;
    -webkit-text-stroke: 1px rgb(255 255 255);
}


.css {
    font-size: 100px;
   

}

.scss {
    font-size: 80px;
   
    white-space: pre;
    color: #fff;
}



.user_ex {
    font-size: 40px;
 
    color: transparent;
    font-weight: 500;
    text-shadow: none;
    white-space: pre;
    -webkit-text-stroke: 1px rgb(255 255 255);
}


.jquery {
    font-size: 80px;
   
    white-space: pre;
    color: #fff;
}

/* 소개 */
.sc_intro {
    display: flex;
    background: #fff;
    justify-content: space-between;
   

}

.sc_intro .text_area {
    width: 45%;
    margin-right: 60px;
    box-sizing: border-box;
}

.sc_intro .text_area h2 {
    font-size: 90px;
    font-weight: 700;
}

.sc_intro .text_area p {
    line-height: 1;
    font-size: 30px;
    margin: 32px 0;
    font-weight: 500;
}

.sc_intro .text_area span {
    display: block;
    line-height: 1;
    font-size: 20px;
    margin: 32px 0;
    font-weight: 400;
}
.sc_intro .img_area{width: 45%;}
.sc_intro .img_area h2 {
    font-size: 90px;
    margin-bottom: 50px;
    font-weight: 700;
}

.sc_intro .img_area .top {
    flex-wrap: wrap;
    display: flex;
    margin-bottom: 20px;

}
.sc_intro .img_area .top img {width: 100%;}
.sc_intro .bottom .cont_wrap img {

    width: 100%;
}

.sc_intro .img_area .top .cont_wrap {
    box-shadow: 20px 20px 60px 0px #d9d9d9a6, -20px -20px 20px #ffffff;
    border-radius: 13px;
    width: 100%;


}

.sc_intro .img_area .bottom {
    width: 100%;
    display: flex;
    justify-content:space-between;
}

.sc_intro .bottom>div {
    width: 47%;

}

.sc_intro .bottom .cont_wrap.right {
    margin-right: 0;
}


.sc_intro .bottom .cont_wrap video {
    display: block;
    width: 100%;
    height: 100%;
    box-shadow: 20px 20px 60px 0px #d9d9d9a6, -20px -20px 20px #ffffff;
    border-radius: 13px;
}

.sc_intro .bottom .cont_wrap img {
    display: block;
    width: 100%;
    height: 100%;
    box-shadow: 20px 20px 60px 0px #d9d9d9a6, -20px -20px 20px #ffffff;
    border-radius: 13px;
}


/* 작업 포트폴리오 */
.sc_portfolio {
    width: 100%;
    overflow: hidden;
    background: #090909;
    padding: 144px 50px 160px 50px;
    box-sizing: border-box;

}
.sc_portfolio.eduwill {
padding-bottom: 0;

}

.sc_portfolio h2 {
    font-size: 120px;
    text-align: center;
    font-weight: 700;
    color: white;
    margin-bottom: 50px;
}
.sc_portfolio .contents {
    margin: 150px 0 300px;
    display: flex;
    justify-content:space-around;
}
.sc_portfolio .img_area{width:45%;}
.sc_portfolio .img_area.right{width:45%; }
.sc_portfolio .img_wrap{width: 100%; height: 600px; overflow: hidden; border-radius: 13px;}
.sc_portfolio img {
   width: 100%;
    height: 100%;
   display: block;
    object-fit: cover;
   
    transform:scale(1);
}





.sc_portfolio .text_area{width:45%; position: relative;   color: #fff;}
.sc_portfolio .text_area.right{width:45%;}



.sc_portfolio .text_area h3 {
    font-size: 50px;
    font-weight: 600;
    text-align: center;

}
.sc_portfolio .text_area p {
    width: 80%;
    margin: 0 auto;
    line-height: 1.6;
    font-size: 19.2px;
    margin-top: 32px;
    text-align: center;
}

.sc_portfolio .text_area .exp{
    font-size: 20px;}


    

.sc_portfolio .btn{position: absolute; display: flex; left: 50%; bottom: 20px; transform: translateX(-50%);}
.sc_portfolio button{
    width: 150px;
    height: 50px;
    border-radius: 13px;
    border:none;
    background: #fff;
    font-weight: 400;
    font-size: 20px;
    margin-right: 20px;
    font-family: 'Gilroy','SFPro',sans-serif;
}
.sc_portfolio button:last-child{margin-right: 0;}


/* 연락처 */
.sc_contact {
    background-color: #fff;
    display: flex;
    box-sizing: border-box;
}

.sc_contact .left {
    width: 30%;
}

.sc_contact .left .contact {
    margin-bottom: 100px;
}

.sc_contact .left .contact p {
    color: #000;
    font-size: 16px;
    letter-spacing: 5px;
    margin-bottom: 16px;
}

.sc_contact .left .contact a {
    display: inline-block;
    padding: 0 0 5px 0;
    color: #d8d8d8;
    font-size: 24px;
    line-height: 30px;
    border-bottom: 1px solid #d8d8d8;
}


.sc_contact .sns p {
    color: #000;
    font-size: 16px;
    letter-spacing: 5px;
    margin-bottom: 16px;
}

.sc_contact .sns_icon {
    display: flex;
}

.sc_contact .sns_icon a {
    display: block;
    width: 30.25px;
    height: 30.25px;
    margin-right: 20px;
}

.sc_contact .sns_icon a i {
    display: inline-block;
    padding: 3.2px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;

    opacity: .2;
}

.sc_contact .sns_icon a:first-child i {
    background: url('../img/email.png') no-repeat center;
    background-size: cover;
}

.sc_contact .sns_icon a:nth-child(2) i {
    background: url('../img/tistory.svg') no-repeat center;
}

.sc_contact .sns_icon a:nth-child(3) i {
    background: url('../img/github.png') no-repeat center;
    background-size: cover;
}

.sc_contact .right {
    width: 70%;
}




.sc_contact .right h2 {
    font-size: 64px;
    font-weight: bold;
}

.sc_contact .right .text_wrap {
    margin-top: 50px;
    padding: 20px;
    box-shadow: 20px 20px 60px 0px #d9d9d9a6, -20px -20px 20px #ffffff;
    border-radius: 13px;
    width: 100%;
}

.sc_contact .right .text_wrap p {
    font-size: 20px;
    letter-spacing: -1px;
    line-height: 1.5;
}