@charset "utf-8";
:root{ 
    --color01: #32955A;
    --color02: #486CCD;
    --color03: #7674C0;
    --color04: #E15F4F;
    --color05: #FFA549;
    --transition01: 0.2s ease;
    --radius01: 10px;
    --border01: 1px solid #ddd;
    --globalGap: 30px;
}

/* 스크롤 */
::-webkit-scrollbar { width: 6px; border-radius:var(--radius01);}
::-webkit-scrollbar-track { background-color:#eee;}
::-webkit-scrollbar-thumb { background:var(--color03);border-radius:var(--radius01);}

body {background:#f6f6f6;font-family:'Noto Sans KR','돋움','dotum', Arial, sans-serif;color:#333;}
#wrap {padding:calc(var(--globalGap) * 2);display:flex;flex-wrap:wrap;flex-flow:column;gap:var(--globalGap);transition:var(--transition01);}

header {display:flex;justify-content:space-between;gap:var(--globalGap);}
header h1 {font-size:2.25rem;}
header h1 .name {font-weight:500;}
header h1 .name span {font-size:1.125rem;font-weight:400;margin-left:calc(var(--globalGap) / 3);}
header h1 .info {font-size:0.75rem;font-weight:100;color:#959595;}
header .contact {padding:10px 20px;border-radius:var(--radius01);background:#fff;}
header .contact a {display:block;}
header .contact a.tel i::before {content:'phone_iphone';font-family: 'Material Icons';vertical-align:middle;font-variation-settings:'FILL' 1;}
header .contact a.mail i::before {content:'drafts';font-family: 'Material Icons';vertical-align:middle;font-variation-settings:'FILL' 0;}

.infoBox {display:flex;justify-content: space-between;font-size:1.125rem;gap:var(--globalGap);transition:var(--transition01);}
.infoBox .skillBox {background:#1F1F1F;padding:20px;border-radius:var(--radius01);font-weight:normal;line-height:2em;word-break: break-word;}
.infoBox .skillBox ul li {display:flex;flex-wrap:wrap;}
.infoBox .skillBox ul li p:nth-of-type(1) {color:#308cd3;margin-right:5px;}
.infoBox .skillBox ul li p:nth-of-type(2) {color:#62cdfc;margin-right:5px;}
.infoBox .skillBox ul li p:nth-of-type(3) {color:#d3723d;}
.infoBox .skillBox ul li p span {color:#fff;}
.infoBox .skillBox ul li p em {color:#148ffb;}
.infoBox .iconBox {flex-basis:600px;background:#fff;padding:20px;border-radius:var(--radius01);border:var(--border01);}
.infoBox .iconBox ul {display:flex;flex-wrap:wrap;gap:calc(var(--globalGap) / 2);}
.infoBox .iconBox ul li {flex:calc(50% - 20px);display:flex;align-items:center;gap:calc(var(--globalGap) / 3);}
.infoBox .iconBox ul li:first-child {flex:100%;}
.infoBox .iconBox ul li span:first-child {border-radius:var(--radius01);width:3rem;height:3rem;display:flex;justify-content:center;align-items:center;}
.wal {background:var(--color01);color:#fff;}
.wrd {background:var(--color02);color:#fff;}
.adh {background:var(--color03);color:#fff;}
.pl {background:var(--color04);color:#fff;}
.tm {background:var(--color05);color:#545454;}
.infoProjectToggle {background:#fff;padding:5px;border: var(--border01);border-radius:var(--radius01);display:none;}
.infoProject {background:#fff;padding:20px;border-radius:var(--radius01);border:var(--border01);word-break:keep-all;}
.infoProject h2 {font-size:1.2rem;font-weight:600;padding-bottom:10px;}
.infoProject ul {display:flex;gap:10px;flex-wrap:wrap;}
.infoProject ul li {border:1px solid #aaa;border-radius:8px;padding:4px 10px 6px 10px;}
.listProject {display:flex;flex-wrap:wrap;gap:20px;}
.listProject .pList {position:relative;padding-bottom:10px;flex-basis:calc(25% - (20px * 3 / 4));display: flex;flex-direction: column;}
.listProject .pList.active .imgWrap {animation: pListActive 1s infinite linear;box-shadow:0 0 4px var(--color04);}
@keyframes pListActive {
    0%{box-shadow:0 0 4px transparent;}
    40%{box-shadow:0 0 4px 4px var(--color04);}
    60%{box-shadow:0 0 4px 0 var(--color04);}
    100%{box-shadow:0 0 4px transparent;}
}
.listProject .pList .imgWrap {border:var(--border01);border-radius:var(--radius01);overflow:hidden;flex:0 auto;}
.listProject .pList .imgWrap img {width:100%}
.listProject .pList .imgWrap.noImg {color:#aaa;display:flex;justify-content: center;align-items: center;min-height:100px;}

.listProject .pList .pListInfo {display:flex;justify-content: space-between;align-items:center;margin-top:calc(var(--globalGap) / 3);gap:calc(var(--globalGap) / 2);word-break:keep-all;}
.listProject .pList ul {display:flex;gap:4px;}
.listProject .pList ul li span {font-size:1rem;border-radius:var(--radius01);width:2rem;height:2rem;display:flex;justify-content:center;align-items:center;}

@media all and (max-width:1300px){
    .infoBox {font-size:1rem;}
    .infoBox .skillBox {flex:500px 0 0;}
    .infoBox .iconBox {flex:auto 1;}
    .infoBox .iconBox ul li span:first-child {width:2.5rem;height:2.5rem;}
    .listProject .pList {position:relative;padding-bottom:10px;flex-basis:calc(33.33% - (20px * 2 / 3));}
}

@media all and (max-width:1024px){
    :root{ 
        --radius01: 6px;
        --globalGap: 20px;
    }
    .infoBox {flex-wrap:wrap;gap:var(--globalGap);}
    .infoBox .skillBox,
    .infoBox .iconBox {flex:100%;}
    .infoBox .iconBox ul {justify-content:flex-start;}
    .infoBox .iconBox ul li {flex:auto !important;}
    .infoBox .iconBox ul li span {text-wrap: nowrap;}
    .listProject .pList {position:relative;padding-bottom:10px;flex-basis:calc(33.33% - (20px * 2 / 3));}
}

@media all and (max-width:768px){
    :root{ 
        --globalGap: 10px;
    }
    header {flex-wrap:wrap;}
    header .contact {width:100%;display:flex;gap:var(--globalGap);}
    .iconBoxTop .iconBox {position:fixed;top:0;left:0;right:0;z-index:999;box-shadow: 0 0 10px rgba(0,0,0,0.6);}
    .infoProjectToggle {display:block;}
    .infoProject {display:none;}
    .listProject .pList {position:relative;padding-bottom:10px;flex-basis:calc(50% - (20px * 1 / 2));}
}

@media all and (max-width:480px){
    .listProject .pList {position:relative;padding-bottom:10px;flex-basis:calc(100%);}
    .infoBox .iconBox ul li {flex:calc(50% - (20px * 1 / 2)) 0 0 !important;}
}

@media all and (max-width:400px){
    .infoBox .iconBox ul li {flex:100% !important;}
    .contact {flex-wrap:wrap;}
}