/* side */
.side {
    position: fixed;
    z-index: 100;
    box-sizing: border-box;
    width: 300px;
    height: 100vh;
    padding: 30px 40px;
    border-right: 1px solid #4dabf7;
    background: #4dabf7;
    
}
.side .intro {
   
}
.side .intro .profile_box {
    position: relative;
    border-bottom: 2px dashed #fff;
}
.side .intro .profile_box img {
    display: block;
    width: 100%;
    margin: 0 auto;
    border-radius: 30px;
}
.side .intro .profile_box .profile_info {
    margin: 20px 0;
    text-align: center;
}
.side .intro .profile_box .profile_info p {
    line-height: 1.4;
}
.side .intro .profile_box .profile_info .name {
    font-size: 30px;
    font-weight: 700;
}
.side .intro .profile_box .profile_info .job {
    font-size: 25px;
}
 .side_info {
    width: 100%;
}
.side .intro .side_info:last-child {
    margin-bottom: 0;
}
.side .intro .side_info .contact_box {

}
 .side_info .contact_box .contact_list {
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.side_info .contact_box .contact_list li {
    margin: 5px 0;
    text-align: center;
}
.side_info .contact_box .contact_list li i {
    display: block;
    padding: 15px;
    font-size: 40px;
}
.side_info .contact_box .contact_list li a:hover {
    color:#4dabf7;
}
/* //side */

/* main */
body:before {
    position: fixed;
    z-index: 1;
    top: 0;
    display: block;
    content: "";
    width: 100%;
    height: 15px;
    background: #4dabf7;
}

.wrap .inner .main {
    position: relative;
    width: 100%;
    /* padding-left: 300px; */
    box-sizing: border-box;
}

/* header */
.header {
    display: flex;
    align-items: center;
    padding: 30px 90px 15px;
    border-bottom: 1px solid #4dabf7;
}
.header .intro {
    margin-right: 30px;
}
.header .intro .title {
    height: 100%;
    font-size: 50px;
    font-weight: 700;
}
.header .intro .sub_title {
    font-size: 20px;
    text-align: center;
}
.header .nav {
   
}
.header .nav ul {

}
.header .nav ul li {
    margin: 0 10px;
}
.header .nav ul li a {
    color: #4D4D4D;
}
.header .nav ul li a:hover {
    color: #4dabf7;
    font-weight: 700;
}
/* //header */

/* container */
.container {
    padding: 60px 250px 15px;
}
.container .contents {

}
.container .contents .section  {
    margin-bottom: 30px;
}

.container .contents .section.contact_section  {
    /* display: none; */
}
.container .contents .section .section_info .section_link {
   
}
.container .contents .section .section_info .section_link ul {

}
.container .contents .section .section_info .section_link ul li {
    width: 120px;
    margin-right: 20px;
    position: relative;
}
.container .contents .section .section_info .section_link ul li .modal_btn {
    width: 100%;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 15px;
    box-sizing: border-box;
    border-radius: 50%;
}
.container .contents .section .section_info .section_link ul li .modal_btn:hover {
    opacity: 0.7;
    cursor: pointer;
   
}
.container .contents .section .section_info .section_link ul li .modal_btn#my_resume {
    background-color: rgba(232, 53, 86, 1);
    border: 0px solid rgba(232, 53, 86, 1);
}
.container .contents .section .section_info .section_link ul li button#my_project {
    background-color: rgba(97, 208, 212, 1);
    border: 0px solid rgba(97, 208, 212, 1) ;
}
.container .contents .section .section_info .section_link ul li .modal_btn span {
    color: #fff;
    font-size: 15px;
}
.container .contents .section .section_info.section_work_info .section_text .txt_tit {
    margin-bottom: 3px;
    font-size: 23px;
    color: #4dabf7;
}
.container .contents .section .section_info .section_text .txt_sub {
    padding: 5px 0;
    font-size: 30px;
    font-weight: 700;
}

.container .contents .section .section_info .section_text .txt_sub p {
    padding: 3px 0;
}

.container .contents .section .section_info .section_text .txt_sub.work_name {
    font-size: 30px;
}
.container .contents .section .section_info .section_text .txt_desc.self_intro {
    font-size: 25px;
}
.container .contents .section .section_info .section_text .txt_desc.work_desc {
    position: relative;
    padding: 10px 0 10px 20px;
}

.container .contents .section .section_info .section_text .txt_desc a:hover {
    color: #4dabf7;
}

.container .contents .section .section_info .section_text .txt_desc.work_desc .date {
    font-size: 17px;
    color: #4dabf7;
}
.container .contents .section .section_info .section_text .txt_desc.work_desc .work_info {
    padding: 3px 0;
    font-size: 19px;
}
.container .contents .section .section_info .section_text .txt_desc.work_desc .stack {
    padding: 4px 0;
}

.container .contents .section .section_info .section_text .txt_desc.self_intro strong {
    font-weight: 700;
    font-size: 25px;
}
.container .contents .section .section_info .section_text strong.sub_desc:before {
    position: absolute;
    left: 0;
    display: block;
    content: "•";
    color: #4dabf7;
}

.container .contents .section .section_info .section_text .details_box {
    padding: 3px 0 3px 4px;
}

.container .contents .section .section_info .section_text .details_box summary {
    padding: 5px 0;
    font-size: 20px;
    font-weight: 700;
}

.container .contents .section .section_info .section_text .details_box summary:hover {
    color: #4dabf7;
    cursor: pointer;
}

.container .contents .section .section_info .section_text .details_box ul {
    margin-left: 31px;
}

.container .contents .section .section_info .section_text .details_box.skills_box ul {
    margin-left: 0;
}
.container .contents .section .section_info .section_text .details_box ul li {
    position: relative;
    padding: 4px 0;
    font-size: 19px;
    line-height: 1.4;
}

.details_box ul li strong {
    padding-left: 5px;
    font-size: 21px;
    font-weight: 600;
}

.details_box ul li strong::before{
    position: absolute;
    left: -15px;
    display: block;
    content: "•";
    color: #4dabf7;
}

.skills_box ul li::before {
    position: absolute;
    left: -15px;
    display: block;
    content: "•";
    color: #4dabf7;
}

.details_box ul li p {
    padding: 5px 0;
}
.container .contents .section .section_info.section_work_info {
    /* display: block; */
}

.container .contents .section .section_info .section_float:last-child {
    border-right: none;
    margin-right: 0;
}
.container .contents .section .section_info .section_work .works_ul {
    margin-left: 5px;
}
.container .contents .section .section_info .section_work li {
    padding: 12px 0;
}

.container .contents .section .section_info .section_work .works_ul li strong {
    font-size: 23px;
    font-weight: 700;
}
/* .container .contents .section .section_info .section_work .work_list ~ li {
    padding: 20px 0;
} */
.container .contents .section .section_info .section_work li .work_contents {
    display: flex;
}
.container .contents .section .section_info .section_work li i {
    font-size: 30px;
}
.container .contents .section .section_info .section_work li .work_contents.work_skill {
    margin-left: 50px;
}
.container .contents .section .section_info .section_work li .work_contents.work_skill .ul_flex {
    margin-left: 30px;
    align-items: center;
}
.container .contents .section .section_info .section_work li .work_contents.work_skill .ul_flex li {
    margin: 10px;
}
.container .contents .section .section_info .section_work li .work_contents .ul_flex li img {
    height: 100px;
}

.container .contents .section .section_info .section_work .work_list.skill_list {
    justify-content: flex-start;
}

/* //container */

/* footer */
.footer {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px;
    background: #dee2e6;
}
.footer span {
    font-size: 18px;
    line-height: 1.4;
}
/* // footer */

/* // main */