.page-top{display:flex;justify-content:flex-end;position:fixed;top:0;background:#fff;border-bottom:1px solid rgba(0,0,0,.15);width:100%;z-index:1}@media screen and (min-width:768px){.page-top{width:67%}}.page-top .nav{display:flex;width:100%;padding:0 20px;margin:-1px;list-style:none;align-items:center}.page-top .nav li{margin-right:15px;padding:15px 0;cursor:pointer}.page-top .nav li.active{border-bottom:1px solid #b5b5b5}.page-top .nav li p{transition:color .3s ease;font-size:12px}.page-top .nav li p:hover{color:#b5b5b5}.page-top .nav li .rfixed-icon{position:absolute;transform:translateY(-8px);right:20px;color:#5f5f5f;transition:color .3s ease}.page-top .nav li .rfixed-icon:hover{color:#b5b5b5}.fixed-box{position:static}@media screen and (min-width:768px){.fixed-box{border-right:1px solid rgba(0,0,0,.15);position:fixed}}.list-content{margin-top:0;padding:20px}@media screen and (min-width:768px){.list-content{margin-top:54px}}.list-content .img-wrap{width:300px;height:300px}.list-content .img-wrap img{width:100%}.list-content .hero-wrap{height:71vh}.list-content .contact-wrap{margin-bottom:20px}.list-content .contact-wrap .title{margin-bottom:15px}.list-content .contact-wrap .content P{line-height:25px}.list-content .profile-wrap{margin-bottom:30px}.list-content .profile-wrap .title{margin-bottom:15px}.list-content .profile-wrap .content P{line-height:25px}.list-content .profile-wrap.experience-section{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.list-content .profile-wrap.experience-section .experience-wrap .experience-value-txt{margin-bottom:10px}.list-content .profile-wrap .project-section{display:flex;flex-wrap:wrap;flex-direction:row;align-items:flex-start;justify-content:space-between;margin-bottom:40px}.list-content .profile-wrap .project-section .project-wrap{flex:1 1}.list-content .profile-wrap .project-section .project-wrap .img-wrap{width:100%;max-width:100%;height:auto;position:relative}.list-content .profile-wrap .project-section .project-wrap .img-wrap img{margin-bottom:10px}.list-content .profile-wrap .project-section .project-wrap .img-wrap .icon-wrap{position:absolute;bottom:20px;right:10px}.list-content .profile-wrap .project-section .project-wrap .img-wrap .icon-wrap svg{font-size:21px}.list-content .profile-wrap .project-section .project-wrap p{line-height:25px}.list-content .profile-wrap .project-wrap-left{flex-direction:row-reverse}.list-content .profile-wrap .project-wrap-left .project-wrap{margin-right:0}.list-content .profile-wrap .project-wrap-left .project-wrap:last-child{margin-right:20px}.list-content .profile-wrap .project-wrap-right{flex-direction:row}.list-content .profile-wrap .project-wrap-right .project-wrap{margin-left:0}.list-content .profile-wrap .project-wrap-right .project-wrap:last-child{margin-left:20px}@media(max-width:767px){.list-content .profile-wrap .project-section{flex-direction:column}.list-content .profile-wrap .project-section .project-wrap{margin:0!important}}.list-content .timeline{list-style:none;padding:0;margin:0}.list-content .timeline-item{display:flex;align-items:flex-start;justify-content:center;position:relative;padding:20px;box-sizing:border-box}.list-content .timeline-item-left{flex-direction:row-reverse}.list-content .timeline-item-left .timeline-item-content p{text-align:right}.list-content .timeline-item-right{flex-direction:row}.list-content .timeline-item-right .timeline-item-label p{text-align:right}.list-content .timeline-bullet{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:10px;height:10px;background-color:#5f5f5f;border-radius:50%;margin:7px 10px}.list-content .timeline-item-content,.list-content .timeline-item-label{width:50%}.list-content .timeline-item-label{text-align:center}.list-content .timeline-item-content{text-align:left}.list-content .blog-wrap{margin-bottom:30px;padding-bottom:20px;border-bottom:1px solid rgba(0,0,0,.15)}.list-content .blog-wrap .title{margin-bottom:15px}.list-content .blog-wrap .title .title-wrap p{text-transform:uppercase;cursor:pointer}.list-content .blog-wrap .title .title-wrap p:hover{color:#b5b5b5}.list-content .blog-wrap .title .secondary-title{display:flex;align-items:center}.list-content .blog-wrap .title .secondary-title .calendarContainer{display:flex;align-items:flex-start;margin:10px 10px 10px 0}.list-content .blog-wrap .title .secondary-title .calendarContainer.link-ho{cursor:pointer}.list-content .blog-wrap .title .secondary-title .calendarContainer.link-ho p:hover{color:#b5b5b5}.list-content .blog-wrap .title .secondary-title .calendarContainer .icon-calendar{margin-right:5px}.list-content .blog-wrap .content P{line-height:25px}.list-content .blogdetail-wrap{margin-bottom:30px}.list-content .blogdetail-wrap .title{margin-bottom:15px}.list-content .blogdetail-wrap .title .title-wrap p{text-transform:uppercase}.list-content .blogdetail-wrap .title .secondary-title{display:flex;align-items:center}.list-content .blogdetail-wrap .title .secondary-title .calendarContainer{display:flex;align-items:flex-start;margin:10px 10px 10px 0}.list-content .blogdetail-wrap .title .secondary-title .calendarContainer.link-ho{cursor:pointer}.list-content .blogdetail-wrap .title .secondary-title .calendarContainer.link-ho p:hover{color:#b5b5b5}.list-content .blogdetail-wrap .title .secondary-title .calendarContainer .icon-calendar{margin-right:5px}.list-content .blogdetail-wrap .content{margin-bottom:30px}.list-content .blogdetail-wrap .content P{line-height:25px}.list-content .blogdetail-wrap .installWrap{margin-bottom:20px}.profileContainer{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:50vh;margin-top:50px}@media screen and (min-width:768px){.profileContainer{margin-top:0;min-height:100vh}}.profileContainer .imgContainer{width:150px;height:150px;margin-bottom:20px}.profileContainer .imgContainer img{width:100%;height:100%;border-radius:50%}.profileContainer .desWrap,.profileContainer .titleWrap{margin-bottom:20px}.profileContainer .iconContent{display:flex;flex-direction:row;justify-content:center}.profileContainer .iconContent a{margin-right:10px}.profileContainer .iconContent a:last-child{margin-right:0}.profileContainer .iconContent a .icon-wrap{color:#5f5f5f;transition:color .3s ease}.profileContainer .iconContent a .icon-wrap:hover{color:#b5b5b5}.profileFooter{bottom:0;z-index:1;margin-bottom:10px;margin-top:10px}@media screen and (min-width:768px){.profileFooter{position:fixed;margin-top:0}}.profileFooter p{text-align:center}body,html{padding:0;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}body.dark,html.dark{background-color:#292a2d}body.dark * p,html.dark * p{color:#b5b5b5}body.dark .profileContainer .iconContent a .icon-wrap,html.dark .profileContainer .iconContent a .icon-wrap{color:#b5b5b5;transition:color .3s ease}body.dark .list-content .blog-wrap .title .title-wrap p:hover,body.dark .profileContainer .iconContent a .icon-wrap:hover,html.dark .list-content .blog-wrap .title .title-wrap p:hover,html.dark .profileContainer .iconContent a .icon-wrap:hover{color:#5f5f5f}body.dark .list-content .blog-wrap .title .secondary-title .calendarContainer.link-ho,html.dark .list-content .blog-wrap .title .secondary-title .calendarContainer.link-ho{cursor:pointer}body.dark .list-content .blog-wrap .title .secondary-title .calendarContainer.link-ho p:hover,html.dark .list-content .blog-wrap .title .secondary-title .calendarContainer.link-ho p:hover{color:#5f5f5f}body.dark .list-content .blogdetail-wrap .title .secondary-title .calendarContainer.link-ho,html.dark .list-content .blogdetail-wrap .title .secondary-title .calendarContainer.link-ho{cursor:pointer}body.dark .list-content .blogdetail-wrap .title .secondary-title .calendarContainer.link-ho p:hover,html.dark .list-content .blogdetail-wrap .title .secondary-title .calendarContainer.link-ho p:hover{color:#5f5f5f}body.dark .list-content .timeline-bullet,html.dark .list-content .timeline-bullet{background-color:#b5b5b5}body.dark header,html.dark header{background-color:#292a2d}body.dark header.page-top .nav li.active,html.dark header.page-top .nav li.active{border-bottom:1px solid #b5b5b5}body.dark header.page-top .nav li p,html.dark header.page-top .nav li p{transition:color .3s ease;color:#b5b5b5;font-size:12px}body.dark header.page-top .nav li p:hover,html.dark header.page-top .nav li p:hover{color:#5f5f5f}body.dark ul li,html.dark ul li{color:#b5b5b5}body.dark table,body.dark td,body.dark th,html.dark table,html.dark td,html.dark th{border:1px solid #b5b5b5;border-collapse:collapse}body.dark td,body.dark th,html.dark td,html.dark th{padding:5px}body.dark th,html.dark th{text-align:left}body.dark .icon-calendar,html.dark .icon-calendar{color:#b5b5b5}body.dark .code-snippet,html.dark .code-snippet{background-color:#383838}body.light,html.light{background-color:#fff}body.light * p,html.light * p{color:#5f5f5f}body.light header,html.light header{background-color:#fff}body.light header.page-top .nav li.active,html.light header.page-top .nav li.active{border-bottom:1px solid #5f5f5f}body.light header.page-top .nav li p,html.light header.page-top .nav li p{transition:color .3s ease;font-size:12px;color:#5f5f5f}body.light header.page-top .nav li p:hover,html.light header.page-top .nav li p:hover{color:#b5b5b5}body.light ul li,html.light ul li{color:#5f5f5f}body.light .list-content .blog-wrap .title .secondary-title .calendarContainer.link-ho,html.light .list-content .blog-wrap .title .secondary-title .calendarContainer.link-ho{cursor:pointer}body.light .list-content .blog-wrap .title .secondary-title .calendarContainer.link-ho p:hover,html.light .list-content .blog-wrap .title .secondary-title .calendarContainer.link-ho p:hover{color:#b5b5b5}body.light .list-content .blogdetail-wrap .title .secondary-title .calendarContainer.link-ho,html.light .list-content .blogdetail-wrap .title .secondary-title .calendarContainer.link-ho{cursor:pointer}body.light .list-content .blogdetail-wrap .title .secondary-title .calendarContainer.link-ho p:hover,html.light .list-content .blogdetail-wrap .title .secondary-title .calendarContainer.link-ho p:hover{color:#b5b5b5}body.light table,body.light td,body.light th,html.light table,html.light td,html.light th{border:1px solid #5f5f5f;border-collapse:collapse}body.light td,body.light th,html.light td,html.light th{padding:5px}body.light th,html.light th{text-align:left}body.light .code-snippet,html.light .code-snippet{background-color:#ececec}body .icon-calendar,html .icon-calendar{color:#5f5f5f}a{color:inherit;text-decoration:none}*{box-sizing:border-box}.code-snippet{background-color:#f9f6f6;padding:15px;border-radius:10px}