/* * {font-family: 'Noto Sans KR', sans-serif;} */
/* font-family: 'Noto Serif KR', serif; */
body {
    margin: 0; 
    font-family: 'Noto Serif KR', serif;
    font-weight: 500;
}
ul { list-style: none; padding: 0; margin: 0; }
a { text-decoration: none; color: inherit;}
.container {
    width: 1100px;
    margin: 0 auto;
    position: relative;
}
/* 어사이드 */
.aside {
    width: 300px;
    height: 100vh;
    background-color: rgb(244, 244, 244);
    text-align: center;
    position: fixed;
    /* border: 1px solid; */
}
.aside_content {
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.profile {
    height: 180px;
    position: relative;
}
.profile_img {
    width: 125px;
    height: 160px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
}
.title {
    margin: 10px 0 50px 0;
}
.name {
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 10px;
}
.title {
    font-size: 16px;
}
.aside_menuli {
    font: 16px;
    margin-bottom: 10px;
    cursor: pointer;
}
.aside_contactBox {
    margin-top: 60px;
    text-align: left;
    padding: 0 30px;
}
.aside_contact {
    display: flex;
    gap: 0px 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.emailtxt {
    width: 100%;
    white-space: pre;
}
.email_img {
    width: 35px;
    height: 35px;
}
.talk_img {
    width: 33px;
    height: 28px;
}
.phone_img {
    height: 35px;
}


/* 콘텐츠 영역 */
.contents_area {
    width: 800px;
    float: right;
}
.section {
    height: 100vh;
    padding: 0 60px;
    border: 1px solid;
    box-sizing: border-box;
    position: relative;
}
.content_wrap {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
.subtitle {
    font-size: 16px;
    color: gray;
    text-shadow: 2px 2px #ddd;
    position: absolute;
    top: 20px;
    left: 20px;
}

/* 홈  */
.slide_container {
    width: 100%;
    height: 130px;
    box-sizing: border-box;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
.pan {
    height: 100%;
    font-size: 45px;
    position: absolute;
    white-space: pre;
}
.pan2 {
    display: none;
}

/* 어바웃 */
.contentBox {
    margin-bottom: 30px;
}
.content_title {
    font-weight: 700;
    font-size: 20px;
    text-shadow: 1px 1px gray;
}
.content_subtitle {
    font-weight: 400;
    font-size: 13px;
    color: gray;
    white-space: pre;
}
.content {
    height: 100%;
    position: relative;
    margin-top: 10px;
}
.content_line {
    width: 3px;
    height: 98%;
    background-color: black;
    position: absolute;
    left: 5px;
}
.content_txt {
    margin-left: 15px;
    line-height: 25px;
}

/* 스킬 */
#skillsTable {
    border-top: 1px solid gainsboro;
    box-sizing: border-box;
    margin-top: 30px;
    border-collapse: collapse;
    text-align: center;
    width: 100%;
}
#skillsTable tr {
    height: 80px;
    border-bottom: 1px solid gainsboro;
    box-sizing: border-box;
}
.languageImg {
    height: 45px;
}
.languageGauge_td {
    padding-left: 30px;
    box-sizing: border-box;
}
.languageGauge_wrap {
    width: 100%;
    height: 10px;
    border-radius: 5px;
    background-color: #ddd;
    position: relative;
    overflow: hidden;
}
.languageGauge {
    width: 100%;
    height: 10px;
    border-radius: 5px;
    background-color: gray;
    position: absolute;
}
.javaGauge {
    left: -15%;
}
.springGauge {
    left: -25%;
}
.sqlGauge {
    left: -15%;
}
.htmlGauge {
    left: -20%;
}
.cssGauge {
    left: -20%;
}
.javascriptGauge {
    left: -20%;
}
.gitGauge {
    left: -30%;
}

/* 스킬2 */
#skillsTable tr :first-child {
    font-size: 17px;
    font-weight: bold;
}
.skills_second_td {
    font-size: 15px;
    text-align: left;
}

/* 포트폴리오1,2 */
/* #portfolio1,
#portfolio2 {
    padding: 60px 25px;
    box-sizing: border-box;
} */
.portfolio_box {
    height: 770px;
    border-radius: 10px;
    border: 1px solid #ddd;
    box-shadow: 8px 8px gainsboro;
    box-sizing: border-box;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
.portfolio_top {
    height: 45%;
    position: relative;
}
.link_alert {
    font-size: 12px;
    white-space: pre;
}
.img_wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.img_wrap > a {
    display: inline-block;
    width: 100%;
    height: 100%;
}
.pcweb {
    width: 350px;
}
.mobileweb {
    width: 70px;
    position: absolute;
    top: 45%;
    left: 75%;
}
.portfolio_line {
    width: 90%;
    height: 1px;
    border-bottom: 1px solid gainsboro;
    box-sizing: border-box;
    position: absolute;
    bottom: 0%;
    left: 50%;
    transform: translateX(-50%);
}
.portfolio_bot {
    height: 55%;
    padding: 20px 30px;
    box-sizing: border-box;
}
.portfolio_info {
    position: relative;
    margin-bottom: 15px;
}
.portfolio_title {
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 10px;
}
.portfolio_txt {
    margin-left: 15px;
    font-size: 14px;
}
.portfolio_skills {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    margin-bottom: 15px;
}
.skill {
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box;
    height: 35px;
    line-height: 25px;
    text-align: center;
    background-color: rgb(243, 243, 243);
}

/* 콘택트 */
.contact_wrap {
    width: 100%;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
}
.contact_box {
    width: 50%;
    text-align: center;
}
.contact_imgbox {
    width: 100%;
    height: 150px;
    position: relative;
}
.contact_box a {
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.contact_box img {
    width: 130px;
}