@charset "utf-8";
/* Setting */
:root {
	--max-width: 900px;
	--font-weight-s: 100;
	--font-weight-n: 400;
	--font-weight-b: 700;
	--basic-margin: 15px;
}
/* Common */
body{
	font-family: 'Noto Sans KR', "맑은 고딕", Malgun Gothic, "돋움", Dotum, sans-serif;
	font-weight: var(--font-weight-s);
	line-height: 1.5;
	color: var(--basic-color);
}
hr{
	display: none;
}
.section{
	position: relative;
}
.section .inner{
	position: relative;
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 50px;
	box-sizing: border-box;
}
.section .section__title{
	margin-bottom: var(--basic-margin);
	font-size: 25px;
	font-weight: var(--font-weight-b);
	color: var(--point-color);
}
.section .section__title:before{
	font-family: 'Material Icons';
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
	vertical-align: -2px;
	content:'add ';
}
.section .emph,
.section b{
	font-weight: var(--font-weight-b);
}
.material-icons{
	color : #fff;
}

/* Header */
.section--header .section__data{
	display: flex;
	margin-bottom: var(--basic-margin);
	justify-content: space-between;
	flex-direction: row-reverse;
}
.section--header .photo{
	position: relative;
	width:200px;
}
.section--header .photo:before{
	display: block;
	padding-bottom: 100%;
	content: '';
}
.section--header .photo:after{
	position:absolute;
	top: -1px;
	left: -1px;
	bottom: -1px;
	right: -1px;
	border: 1px solid var(--point-color);
	opacity: 0.5;
	border-radius: 9999px;
	content: '';
}
.section--header .photo__thumb{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	width: 100%;
	height: 100%;
	border-radius: 9999px;
}
.section--header .photo__emph{
	display: flex;
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 20;
	width: 40px;
	height: 40px;
	border: 3px solid #fff;
	border-radius: 9999px;
	background-color: var(--point-color);
	justify-content: center;
	align-items: center;
}
.section--header .photo__emph .material-icons{
	font-size: 35px;
}
.section--header .info{
	display: flex;
	max-width: 360px;
	justify-content: space-between;
	align-content: center;
	flex-wrap: wrap;
}
.section--header .info li{
	flex: 1 1 33.3%;
	text-align: center;
}
.section--header .info .emph{
	display: block;
	font-size: 30px;
}
.section--header .info .item--area{
	margin-top: 20px;
	border: 1px solid var(--point-color);
	font-size: 25px;
	font-weight: var(--font-weight-n);
	flex-basis: 100%;
	box-sizing: border-box;
}
.section--header hgroup{
	display: flex;
	align-items: end;
	margin-bottom: var(--basic-margin);
}
.section--header hgroup h1{
	margin-right: 15px;
	font-size: 35px;
}
.section--header .desc{
	margin-bottom: 30px;
}
.section--header .contact{
	display: flex;
	justify-content: space-between;
}
.section--header .contact dl{
	width: 200px;
}
.section--header .contact dt{
	display: flex;
	width: 40px;
	height: 40px;
	margin: 0 auto;
	border-radius: 9999px;
	background-color: var(--point-color);
	justify-content: center;
	align-items: center;
}
.section--header .contact dd{
	display: flex;
	overflow: hidden;
	height:3rem;
	font-weight: var(--font-weight-n);
	text-align: center;
	justify-content: center;
	align-items: center;
}
.section--header .contact a{
	color: inherit;
	text-decoration: none;
}
/* Main */
main{
	
}
.section--multi{
	color: #fff;
	background-color: var(--point-color);
}
.section--multi .inner:after{
	display: block;
	clear: both;
	content: '';
}
.section--multi .section__l{
	float: left;
	width: 50%;
	padding-right: 80px;
	box-sizing: border-box;
}
.section--multi .section__r{
	float: right;
	width: 50%;
	box-sizing: border-box;
}
.section--multi [class*='section--'] ~ [class*='section--']{
	margin-top: 50px;
}
.section--multi .emph{
	font-weight: var(--font-weight-n);
}
.section--multi .section__title{
	color: #fff;
}
.section--education .section__list{
	overflow: hidden;
}
.section--education li{
	padding-left: 35px;
	position: relative;
	z-index: 10;
	margin-bottom: var(--basic-margin);
}
.section--education li:last-child{
	z-index: 0;
	margin-bottom: 0;
}
.section--education li:last-child:before{
	position: absolute;
	left: 11px;
	bottom: 100%;
	height: 1000%;
	margin-bottom: -10px;
	border-left: 1px solid #fff;
	content: '';
}
.section--education .emph:before{
	position: absolute;
	width: 10px;
	height: 10px;
	margin:-1px 0 0 -38px;
	background-color: #fff;
	border:10px solid var(--point-color);
	border-radius: 9999px;
	content: '';
}
.section--skills label{
	color: #fff;
}
.section--skills progress{
	display: block;
	width: 100%;
	height: 8px;
	margin: 5px 0 var(--basic-margin);
	-webkit-appearance: none;
}
.section--skills progress::-webkit-progress-bar{
  background-color: #fefefe;
}
.section--skills progress::-webkit-progress-value{
  background-color: #bdbdbd;
}
.section--skills li:last-child progress{
	margin-bottom: 0;
}
.section--profile .section__desc:not(:last-child){
	margin-bottom: var(--basic-margin);
}
.section--portfolio .section__list{
	position: relative;
}
.section--portfolio .section__list:before{
	position: absolute;
	top:-1px;
	left:-1px;
	bottom:-1px;
	right:-1px;
	z-index:-10;
	border: 1px solid var(--point-color);
	opacity: 0.5;
	box-sizing: border-box;
	content:'';
}
.section--portfolio .section__list:after{
	display: block;
	clear: both;
	content: '';
}
.section--portfolio li{
	float: left;
	width: 33.3%;
}
.section--portfolio li:nth-child(3n){
	overflow: hidden;
	float: none;
	width: 33.4%;
	margin-bottom: -1px;
}
.section--portfolio li:nth-child(3n+1){
	clear: both;
}
.section--portfolio li:nth-child(2):before,
.section--portfolio li:nth-child(3):before{
	position: absolute;
	top: 0;
	bottom: 0;
	border-left: 1px solid var(--point-color);
	opacity: 0.5;
	content:'';
}
.section--portfolio li:nth-child(3n+4):before{
	position: absolute;
	left: 0;
	right: 0;
	border-top: 1px solid var(--point-color);
	opacity: 0.5;
	content:'';
}
.section--portfolio a{
	display: block;
	position: relative;
	z-index: 10;
	text-decoration: none;
}
.section--portfolio .empty{
	display: block;
	padding-top: 100%;
	content: '';
}
.section--portfolio .thumb{
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: -10;
	background-size: cover;
	background-position: 50% 50%;
}
.section--portfolio .thumb:after{
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: -10;
	background: var(--point-color);
	opacity: .25;
	content: '';
}
.section--portfolio .thumb__info{
	position: absolute;
	left: var(--basic-margin);
	bottom: var(--basic-margin);
	right: var(--basic-margin);
	color: #fff;
}
.section--portfolio .thumb__info strong{
	display: -webkit-box;
	overflow: hidden;
	max-height: 1.5rem;
	font-weight: var(--font-weight-n);
	text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.section--portfolio .thumb__info span{
	display: -webkit-box;
	overflow: hidden;
	max-height: 3rem;
	text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.section--portfolio .thumb__info:first-child{
	top: var(--basic-margin);
	color: var(--basic-color);
}
.section--portfolio .thumb__info:first-child strong{
	max-height: 3rem;
  -webkit-line-clamp: 2;
}
.section--portfolio .thumb__info:first-child span{
	max-height: 12rem;
  -webkit-line-clamp: 8;
}
.section--page .section__title:before{
	display: none;
}
.section--page .blog{
	font-size: 16px;
	font-weight: var(--font-weight-n);
	color: var(--point-color);
}
.section--page .section__title h1 a{
	color: var(--basic-color);
	text-decoration: none;
}
.section--page .section__title .date{
	font-size: 16px;
	font-weight: var(--font-weight-s);
	color: var(--basic-color);
	opacity: .5;
	text-align: right;
}
/* Footer */
.section--footer{
	background-color: var(--point-color);
}
.section--footer .inner{
	padding: var(--basic-margin) 0;
	color: #fff;
	text-align: center;
}
/* 홈 */
#tt-body-index .section--page,
#tt-body-index .section--nopage{
	display: none;
}
/* 글 */
#tt-body-page .section--header,
#tt-body-page .section--multi,
#tt-body-page .section--nopage,
#tt-body-page .section--footer{
	display: none;
}

/* 카테고리 */	
#tt-body-category .section--header,
#tt-body-category .section--multi,
#tt-body-category .section--portfolio,
#tt-body-category .section--page,
#tt-body-category .section--footer{
	display: none;
}
/* 보관함 */	
#tt-body-archive .section--header,
#tt-body-archive .section--multi,
#tt-body-archive .section--page,
#tt-body-archive .section--footer{
	display: none;
}
/* 태그 */	
#tt-body-tag .section--header,
#tt-body-tag .section--multi,
#tt-body-tag .section--page,
#tt-body-tag .section--footer{
	display: none;
}
/* 검색결과 */	
#tt-body-search .section--header,
#tt-body-search .section--multi,
#tt-body-search .section--page,
#tt-body-search .section--footer{
	display: none;
}
/* 방명록 */	
#tt-body-guestbook .section--header,
#tt-body-guestbook .section--multi,
#tt-body-guestbook .section--page,
#tt-body-guestbook .section--footer{
	display: none;
}
/* 지역로그 */
#tt-body-location .section--header,
#tt-body-location .section--multi,
#tt-body-location .section--page,
#tt-body-location .section--footer{
	display: none;
}
/* 없는 페이지 */
.section--nopage .inner,
#tt-body-page .section + div:not(.section){
  display: flex;
	height: 100vh;
	padding:50px 25px 150px !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
#tt-body-page .absent_post{
	font-weight: var(--font-weight-s) !important;;
}
@media (max-width:860px) {
	.section--portfolio .thumb__info:first-child span {
		max-height: 10.5rem;
		-webkit-line-clamp: 7;
	}
}
@media (max-width:820px) {
	.section--portfolio .thumb__info:first-child span {
		max-height: 9rem;
		-webkit-line-clamp: 6;
	}
}
@media (max-width:768px) {
	.section:not(.section--header) .inner {
		padding: 25px;
	}
	.section--header .section__data{
		flex-direction: column;
    align-items: center;
	}
	.section--header .info{
		margin-bottom: var(--basic-margin);
		font-size: 12px;
	}
	.section--header .info .emph{
		font-size: 25px;
	}
	.section--header .info .item--area{
		margin-top: 10px;
		font-size: 20px;
	}
	.section--header hgroup{
		flex-direction: column;
    align-items: center;
	}
	.section--multi .section__l,
	.section--multi .section__r{
		float: none;
		width: auto;
		padding: 0;
	}
	.section--multi .section__l section:not(:first-child),
	.section--multi .section__r section{
		margin-top: 50px;
	}
	.section--portfolio li,
	.section--portfolio li:nth-child(3n){
		float: left;
		width: 50%;
	}
	.section--portfolio li:nth-child(3n+1){
		clear: none;
	}
	.section--portfolio li:nth-child(3):before,
	.section--portfolio li:nth-child(3n+4):before{
		display: none;
	}
	.section--portfolio li:nth-child(2n+3):before{
		display: block;
		position: absolute;
		top: auto;
   		left: 0;
		bottom: auto;
    	right: 0;
    	border-top: 1px solid var(--point-color);
		opacity: 0.5;
    	content: '';
	}
	.section--portfolio .thumb__info:first-child span {    
		max-height: 15rem;
    	-webkit-line-clamp: 10;
	}
	.section--footer .inner{
		font-size: 12px;
	}
}
@media (max-width:700px) {
	.section--portfolio .thumb__info:first-child span {    
		max-height: 13.5rem;
    	-webkit-line-clamp: 9;
	}
	
}
@media (max-width:660px) {
	.section--portfolio .thumb__info:first-child span {    
		max-height: 14rem;
    -webkit-line-clamp: 8;
	}
	
}
@media (max-width:620px) {
	.section--portfolio .thumb__info:first-child span {
		max-height: 10.5rem;
		-webkit-line-clamp: 7;
	}
}
@media (max-width:600px) {
	.section--header .contact{
		flex-direction: column;
		align-items: center;
	}
	.section--header dl:not(:first-child){
		margin-top: 25px;
	}
	.section--header .contact dd{
		height: auto;
	}
}
@media (max-width:580px) {
	.section--portfolio .thumb__info:first-child span {
		max-height: 9rem;
		-webkit-line-clamp: 6;
	}
}
@media (max-width:540px) {
	.section--portfolio .thumb__info:first-child span {
		max-height: 7.5rem;
		-webkit-line-clamp: 5;
	}
}
@media (max-width:500px) {
	.section--header hgroup h1{
		font-size: 30px;
	}
	.section--portfolio .section__list{
		border: 0 none;
	}
	.section--portfolio li,
	.section--portfolio li:nth-child(3n){
		float: none;
		width: 100%;
	}
	.section--portfolio li:not(:first-child){
		margin-top: 10px;
	}
	.section--portfolio li:nth-child(2):before,
	.section--portfolio li:nth-child(2n+3):before{
		display: none;
	}
	.section--portfolio .thumb:before{
		display:block;
		padding-top: 100%;
		content:'';
	}
	.section--portfolio .thumb__info:first-child{
		position: static;
	}
	.section--portfolio .thumb__info:first-child span {
		max-height: 9rem;
		-webkit-line-clamp: 6;
	}
	.section--portfolio .thumb__info:first-child + .empty{
		display: none;
	}
}