.me{display: flex;align-items: center;gap: 40px;border-radius: 20px;margin-top: 50px;}
.me .info{font-weight: bold;flex: 1 1 auto;}
.me .info .hi{font-size:40px;line-height: 45px;}
.me .info h1{line-height: 1.5;margin: 0;font-size: 36px;}
.me .info .text{display: flex;align-items: end;gap: 10px;font-size: 26px;line-height: 40px;}
.me .img{width: 180px;height: 180px;border-radius: 10px;overflow: hidden;}
.me .img img{width: 100%;height: auto;}
.me .icon-box{display: flex;height: 100%;flex-direction: column;align-self: end;}
.me .icon-box .icon{width: 35px;height: 35px;padding: 5px;border-radius: 5px;display: block;position: relative;cursor: pointer;}
.me .icon-box .icon svg{width: 100%;height: auto;}
.me .icon-box .icon svg path{fill: var(--h_333);}
.me .icon-box .icon:hover svg path{fill: var(--blue);}
.me .icon-box .icon .code{position: absolute;right: 40px;bottom: 0;transform: translateY(50%);width: 120px;background-color: var(--bg_white);padding: 10px;border-radius: 5px;display: flex;opacity: 0;pointer-events: none;}
.me .icon-box .icon .code img{width: 100%;height: auto;}
.me .icon-box .icon:hover .code{opacity: 1;}

#portfolio{margin-top: 50px;padding-top: 50px;border-top: 1px dashed var(--h_ccc);width: 100%;}
#portfolio h2{width: 100%;text-align: center;margin-bottom: 50px;}
#portfolio .content{display: flex;justify-content: center;gap: 40px;}
#portfolio .content .work{display: block;width: 400px;;padding: 20px;border-radius: 10px;box-shadow: 0 0 5px var(--shadow);border: 1px solid var(--h_f1);cursor: pointer;}
#portfolio .content .work:hover{box-shadow: 0 5px 10px var(--shadow);transform: translateY(-5px);}
#portfolio .content .work .name{display: flex;align-items: center;margin-bottom: 10px;}
#portfolio .content .work .name .logo{width: 30px;height: 30px;border-radius: 5px;margin-right: 10px;}
#portfolio .content .work .name .logo img{width: 100%;}
#portfolio .content .work .name .text{font-weight: bold;font-size: 18px;}
#portfolio .content .work .brief{font-size: 16px;line-height: 1.5;text-indent: 2em;}