@charset "utf-8";


/*font*/
@font-face {
    font-family: 'NotoSans';
    font-style: normal;
    font-weight: 300;
    src: url('./../fonts/NotoSansKR-Regular.woff') format('woff')
}
@font-face {
    font-family: 'NotoSans';
    font-style: normal;
    font-weight: 500;
    src: url('./../fonts/NotoSansKR-Medium.woff') format('woff')
}
@font-face {
    font-family: 'NotoSans';
    font-style: normal;
    font-weight: 800;
    src: url('./../fonts/NotoSansKR-Bold.woff') format('woff')
}



html { font-size: 10px;} 

body { 
    overflow-x:hidden; 
    font-size: 1rem; 
    background:var(--bg-Main);
    font-family: 'NotoSans', sans-serif;
    color:#eee;
    margin:0;
    padding:0;
} 

/*--1rem으로. --*/
* {
    box-sizing: border-box;
}
a, button { color:#666;}
p, li{word-break: keep-all;}
.clear {clear:both;}
.clear:after { content:""; display:block; clear:both;}
caption > div,
legend,
.hide {overflow: hidden; display:block; position:absolute; border: 0; width: 1px; height: 1px; clip: rect(1px, 1px, 1px, 1px);}
.skip { position: absolute; left: 0; right: 0; top:-100%; transition: all .5s; line-height: 5rem; 
    background: #fff; color:#454545; text-align: center; z-index: 100;}
.skip:focus { top: 0; }

/* Reset */
html,body,h1,h2,h3,h4,h5,h6,div,p,blockquote,pre,code,address,ul,ol,li,nav,section,article,header,
footer,main,aside,dl,dt,dd,table,thead,tbody,tfoot,label,caption,th,td,form,fieldset,legend,hr,
input,button,textarea,object,figure,figcaption {margin:0;padding:0;}
body,input,select,textarea,button,img,fieldset {border:none;outline:none;}
ul,ol,li{list-style:none;}
table{width:100%;border-spacing:0;border-collapse:collapse;}
address,cite,code,em,i{font-style:normal;font-weight:normal;}
label,img,input,select,textarea,button,a {vertical-align:middle;}
u,ins,a{text-decoration:none;}
button { cursor: pointer;}

/* Normalize */
body { font-family: 'NotoSans', serif;}
select { appearance:none;}
select::-ms-expand { display:none;}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration,
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance:none;}

input[type="number"],
input[type="text"],
input[type="password"],
input[type="url"],
input[type="email"],
input[type="tel"],
input[type="date"],

/*-- 스크롤바--*/
::-webkit-scrollbar {width:4px;}
::-webkit-scrollbar-thumb {
	border-radius:10px;
	background:#171717;
	height:30%;	
}
::-webkit-scrollbar-thumb:window-inactive {
	background:rgba(0,0,0,0.4);
}

/*color*/

:root {
    --bg-Main :#0a0a0a;
    --bg-White:#fff;

    --gray-Type01:#464647;
}

#wrap {
    width:100%;
    max-width:1280px;
    margin:0 auto;
}

/*헤더*/
#wrap #header {
    position:fixed;
    top:0;
    left:0;
    right:0;
    height:8rem;
    background-color: #1b1b1b80;
    z-index:100;
    /* backdrop-filter:blur(2px); */
    border-bottom:1px solid #312e2e;
    display:flex;
    align-items:center;
    justify-content:center;
    backdrop-filter:blur(1px);
    padding:0 20px;
}
#wrap #header h1 {
    background:url(./../images/mylogo2.svg) no-repeat;
    width:4rem;
    height:3.6rem;
    display:block;
    background-size:cover;
    /* margin:0 auto; */
}
#wrap #header .headerGroup {
    display:flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1280px;
    width: 100%;

}
#wrap #header .infoCont .group {
    position: relative;
    display:flex;
}

#wrap #header .infoCont .group .codepen {
    background: url(./../images/codepen-svgrepo-com.svg) no-repeat center left;
    width:100%;
    height:100%;
    display: block;
    background-size: contain;
    padding-right:3rem;
    position:relative;
}
#wrap #header .infoCont .group .codepen span,
#wrap #header .infoCont .group .codesandbox span
{
    padding-left:2rem;
}
#wrap #header .infoCont .group .codesandbox {
    background: url(./../images/codesandbox-svgrepo-com.svg) no-repeat center left;
    width:100%;
    height:100%;
    display: block;
    background-size: contain;
    position:relative;
}



/*리액트 포폴*/
#reactPort {
    padding:2rem 2rem 8rem;
    color:#2c2c2c;
    padding-top:10rem;
}
.reactGroup {
    display:flex;
    align-items: center;
    gap:10px;
    justify-content: space-between;
    flex-wrap:wrap;
    color:#fff;
}
.reactGroup div {
    width:100%;
    background-color:#1d1b1b;
    border-radius: 10px;
    color:#6a6363;
}
.react-box {
    display:flex;
    padding:1rem;
}
.react-group {
    padding:2rem;
}
.react-box .desc {
    font-size: 1.4rem;
    height:12rem;
}

.react-box .tool {
    border-top:1px solid #3b3939;
    border-radius: 0;
    padding-top:2rem;
    display:flex;
    gap:10px;
}
.react-box .tool ul {
   text-align: center;
}
.react-box .tool .react,
.react-box .tool .vscode,
.react-box .tool .scss,
.react-box .tool .vercel{
    width:30px;
    height:30px;
    margin:0 auto;
}
.react-box .tool img{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
}

.react-box img {
    display:block;
    max-height: 100%; 
    max-width: 100%;
    width: auto;
    height: auto;
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 4px;
}

#portWorksGroup {
    position:relative;
    width:100%;
    max-width:1280px;
    margin:0 auto;
    padding-top:10rem;
}
#portWorksGroup h2 {
    text-align: center;
    font-size: 2rem;
    font-weight: 700;
}
#portWorksGroup p {
    position:relative;
    left:2rem;
    font-size: 1.2rem;
    color:#b4a9a9;
}
/* #portWorksGroup .group {
    padding:1rem 2rem 4rem 2rem;
    display:flex;
    justify-content:flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap:10px;
} */

/*그리드로 변경*/
 #portWorksGroup .group {
    padding:1rem 2rem 4rem 2rem;

    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(238px,1fr));
    gap:10px;
}

#portWorksGroup .group .item {
    position:relative;
    /* width:23.8rem; */
    background-color:#1d1b1b;
    height:25rem;
    border-radius: 10px;
    color:#2c2c2c;
    border:1px solid #221f1f;
    padding:2rem;
}
#portWorksGroup .group .item:hover {
    border:1px solid #2c2a29;
    transition: all 0.3s;
}

#portWorksGroup .group .item .project-info {
    display:flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.2rem;
    margin-bottom: 1rem;
    color:#eee;
}
#portWorksGroup .group .item .project-info span:last-child {
    color:#e32b2b;
    font-weight: 100;
}
#portWorksGroup .group .item .project-desc {
    font-size: 1.2rem;
    height:4.3rem;
    line-height:20px;
    color:#eee;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
#portWorksGroup .group .item .project-logo {
    height:6rem;
    background-color:var(--bg-White);
    margin:2rem 0 1rem;
    display:flex;
    align-items: center;
    justify-content: center;
    padding:1rem;
    border-radius: 4px;
}
#portWorksGroup .group .item .project-logo img {
    display:block;
    max-height: 100%; 
    max-width: 100%;
    width: auto;
    height: auto;
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: center;

}

#portWorksGroup .group .item .project-tool {
    display:flex;
    gap:8px;
    position:relative;
    margin:1rem 0 1rem;
    border-top:1px solid #3b3939;
}
#portWorksGroup .tools {
    padding:2rem 0;
    display:flex;
    gap:9px;
    justify-content: center;
    align-items:flex-end;
    width:100%;
}
#portWorksGroup .figma {
    background:url(./../images/figma-icon.svg);
    width:20px;
    height:20px;
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: center;
}
#portWorksGroup .adobe {
    background:url(./../images/adobe.svg);
    width:20px;
    height:20px;
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: center;
}
#portWorksGroup .vscode {
    background:url(./../images/visual-studio-code-1.svg);
     width:20px;
    height:20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
#portWorksGroup .editplus {
    background:url(./../images/ico-editplus.png);
     width:20px;
    height:20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#portWorksGroup .html {
    background:url(./../images/ico-html3.svg);
    width:20px;
    height:20px;
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: center;
}
#portWorksGroup .css {
    background:url(./../images/ico-css3.svg);
    width:20px;
    height:20px;
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: center;
}
#portWorksGroup .jquery {
    background:url(./../images/jquery-4.svg);
    width:20px;
    height:20px;
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: center;
}
#portWorksGroup .js {
    background:url(./../images/javascript-1.svg);
    width:20px;
    height:20px;
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: center;
}



.figma .hidden,
.adobe .hidden,
.html .hidden,
.css .hidden,
.js .hidden,
.scss .hidden,
.vscode .hidden,
.jquery .hidden,
.editplus .hidden,
.react .hidden,
.vercel .hidden
 {
    position: absolute; 
    width: 1px; 
    height: 1px; 
    overflow: hidden; 
    clip: rect(0, 0, 0, 0);
}
/*이전작업*/
#etc {
    position:relative;
}
#etc h2 {
    text-align: center;
    margin-bottom:2rem;
}
#etc .etcWorksGroup {
    position:relative;
    width:100%;
    max-width:1280px;
    margin:0 auto;
}
#etc .group {
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
    gap:20px;
}

#etc .group div {
    position:relative;
    /* width:23.8rem; */
    background-color:#1d1b1b;
    height:16rem;
    border-radius: 10px;
    color:#2c2c2c;
    border:1px solid #221f1f;
    padding:2rem;
    box-sizing: border-box;
}
#etc p {
    color:#e32b2b;
    font-size: 1.2rem;
    text-align:right;
    padding:0;
    margin-bottom: 0.4rem;

}
#etc .group .imgs {
    background-color: var(--bg-White);
    display:flex;
    align-items: center;
    justify-content: center;
    max-height: 100%; 
    max-width: 100%;
    width: auto;
    height:5rem;
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 4px;
    padding:0.4rem;
    overflow:hidden;
}
#etc .group img {
    display:block;
    max-height: 100%; 
    max-width: 100%;
    width: auto;
    height: auto;
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: center;
}
#etc .group .title {
    display:block;
    width: 100%;
    font-size: 1.2rem;
    color:#eee;
    padding:1rem 0;
}


/*footer*/
#footer span {
    display:inline-block;
    padding:2rem 4rem;
    width:100%;
    max-width:1280px;
    font-size: 1.1rem;
    color:#616061;
    font-weight: 100;
    text-align: center;
}

@media (max-width:520px){

    #portWorksGroup .group,
    #etcWorksGroup .group{
        gap:12px;
    }

    #portWorksGroup .group a,
    #etcWorksGroup .group div{
        flex:0 0 100%;
        transition:all 0.3s;
    }

    #portWorksGroup .group .item{
        width:100%;
    }

}

/* 
클론코딩 */
/* .container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
} */

.codingArea {
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap:16px;
    margin:2rem 0;
    padding:1rem 2rem 4rem 2rem
}
.codingArea .item {
    background-color: #1b1b1b;;
    border-radius: 10px;
    color:#2c2c2c;
    border:1px solid #221f1f;
    padding:2rem 0;
    box-sizing: border-box;

    display:flex;
    justify-content: space-between;
    align-items: center;
}

.codingArea .item div {
    position: relative;
    width:100%;
    height:100%;
    text-align: left;
    padding:1rem 1rem;
}

/* 클론코딩 해설부분 */
.codingArea .item .descGroup {
    display:flex;
    flex-direction: column;
    height:100%;
}
.codingArea .item .descGroup .index {
    border-bottom:1px solid #3b3939;
    padding:0.4rem 0;
    margin-bottom: 1rem;
    color:#e54e4e !important;
    font-size: 1.2rem;
    font-weight: 100;
}
.codingArea .item .descGroup .desc .descTxt {
    color:#1b1b1b
}


.codingArea .item .imgs img {
    position: relative;
    background-size:100%;
    object-fit: fill;
    width:100%;
    display: inline-block;
    border-radius: 1rem;
}

/* 미디어쿼리로할떄 */
/* .container {
  display: grid;
  grid-template-columns: 1fr 1fr; 50%씩 2개 
  gap: 16px;
}

@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;  세로 1개 
  }
} */


#portWorksGroup .descGroup .clonTools {
    display:flex;
    justify-content: center;
    gap:2rem;
    /* margin:2rem 0; */
}
#portWorksGroup .descGroup .clonTools .scss {
    background:url(./../images/sass-1.svg);
    width:20px;
    height:20px;
    background-size:cover;
}
/* 리액트 */
#portWorksGroup .descGroup .clonTools .react {
    display: flex;
    gap:0.6rem;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
   
}
#portWorksGroup .descGroup .clonTools .react .logo {
    background:url(./../images/ico-react.svg);
    width:20px;
    height:20px;
    background-size:cover;
}
#portWorksGroup .descGroup .clonTools  .title {
    font-size: 1.1rem;
    color:#5a5a5a;
    font-weight: 400;
    
}

/* vercel */
#portWorksGroup .descGroup .clonTools .vercel{
    display: flex;
    gap:0.6rem;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
}

#portWorksGroup .descGroup .clonTools .vercel .logo {
    background:url(./../images/ico-verce.svg);
    width:20px;
    height:20px;
    background-size:cover;
}

/* sass */
#portWorksGroup .descGroup .clonTools .sass{
    display: flex;
    gap:0.6rem;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
}

#portWorksGroup .descGroup .clonTools .sass .logo {
    background:url(./../images/sass-1.svg);
    width:20px;
    height:20px;
    background-size:cover;
}

/* vscode */
#portWorksGroup .descGroup .clonTools .vscode2{
    display: flex;
    gap:0.6rem;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
}

#portWorksGroup .descGroup .clonTools .vscode2 .logo  {
    background:url(./../images/ico-vscode2.svg);
    width:20px;
    height:20px;
    background-size:cover;
}

/* vue */
#portWorksGroup .descGroup .clonTools .vue{
    display: flex;
    gap:0.6rem;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
}

#portWorksGroup .descGroup .clonTools .vue .logo  {
    background:url(./../images/ico-vue.svg);
    width:20px;
    height:20px;
    background-size:cover;
}