@import url(default.css);
@import url(font.css);
@import url(common.css);
@import url(layout.css); 


.home {
    background-image: url(../images/Rectangle\ 2.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    text-align: center;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    margin: 100px 0 0 0;
}
 
.home h2 {
    font-size: var(--display-size);
    font-weight: var(--bold-weight);
    line-height: var(--tit-line-height);
    color: var(--tit-font-color);
    padding: 428px 0 0 0;
}
.home p {
    margin: 107px 0 242px 0;
}


.profile .wrapper .inner {
    display: flex;
}

.profile .wrapper .inner .inner_left {
    text-align: center;
    width: 404px;
    position: relative;
}
.profile .wrapper .inner .inner_left h2 {
    font-size: 0;
    line-height: 0;
    position: absolute;
    background-image: url(../images/portpolio.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 157px;
    height: 100px;
    top: -80px;
    
}
.profile .wrapper .inner .inner_left .photo {
    width: 282px;
    height: 233px;
    border: 5px solid #ccc;
    border-radius: 50%;
    margin: 0 0 0 54px;
} 
.profile .wrapper .inner .inner_left .name {
    margin-top: 32px;
}
.profile .wrapper .inner .inner_left .name h3 {
    font-size: 1.76rem;
    font-weight: var(--bold-weight);
    line-height: var(--tit-line-height);
    color: var(--tit-font-color);
    margin-bottom: 9px;
}
.profile .wrapper .inner .inner_left .name strong {
    display: block;
    margin: 0 0 45px 0;
}
.profile .wrapper .inner .inner_right {
   width: calc(100% - 450px);
}
.profile .wrapper .inner .inner_right .education {
    height: 204px;
    background-color: #F6F6F6;
    box-shadow: 0 3px 3px 0 rgba(0,0,0,0.1);
    border-radius: 20px; 
    display: flex;
    padding: 30px 50px;
    margin: 0 0 24px 0;
}
.profile .wrapper .inner .inner_right .education h3 {
    font-size: 1.29rem;
    font-weight: var(--bold-weight);
} 
.profile .wrapper .inner .inner_right .education .txt {
    margin: 0 0 0 80px;
}
.profile .wrapper .inner .inner_right .education .txt strong {
    display: block;
}
.profile .wrapper .inner .inner_right .education .txt strong.sub_txt {
    margin: 25px 0 0 0;
}
.profile .wrapper .inner .inner_right .skills {
    height: 204px;
    background-color: #F6F6F6;
    box-shadow: 0 3px 3px 0 rgba(0,0,0,0.1);
    border-radius: 20px; 
    display: flex;
    padding: 30px 50px;
}
.profile .wrapper .inner .inner_right .skills h3 {
    font-size: 1.29rem;
    font-weight: var(--bold-weight);
} 
.profile .wrapper .inner .inner_right .skills .txt {
    margin: 0 0 0 137px;
}
.profile .wrapper .inner .inner_right .skills .txt strong {
    line-height: 1.8;
}

.project1 .project_txt {
    width: 60%;
}
.project1 .wrapper {
    display: flex;
}
.project1 h3 {
    font-size: var(--tit-font-size);
    font-weight: var(--bold-weight);
    color: var(--tit-font-color);
    margin: 0 0 37px 0;
}
.project1 .project_txt ul {
    margin: 29px 0 40px 0;
}
.project1 .project_txt ul li {
    margin-top: 20px;
}
.project1 .project_txt ul li strong {
    color: var(--tit-font-color);
    font-weight: var(--bold-weight);
}
.project1 .project_txt a {
    background-color: #f6f6f6;
    padding: 11px 44px 10px 24px;
    border-radius: 30px;
    position: relative;
}
.project1 .project_txt a::after {
    position: absolute;
    content: "";
    width: 24px;
    height: 24px;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='12' viewBox='0 0 16 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 12L8.6 10.55L12.15 7H0V5H12.15L8.6 1.45L10 0L16 6L10 12Z' fill='%231C1B1F'/%3E%3C/svg%3E%0A");
    right: 13px;
    top: 10px;
}
.project1 .project_photo a{
    display: block;
}
.project1 .project_photo a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 50px 0 0 0;
}


.project2 .project_txt {
    width: 60%;
}
.project2 .wrapper {
    display: flex;
}
.project2 h3 {
    font-size: var(--tit-font-size);
    font-weight: var(--bold-weight);
    color: var(--tit-font-color);
    margin: 0 0 37px 0;
}
.project2 .project_txt ul {
    margin: 29px 0 40px 0;
}
.project2 .project_txt ul li {
    margin-top: 20px;
}
.project2 .project_txt ul li strong {
    color: var(--tit-font-color);
    font-weight: var(--bold-weight);
}
.project2 .project_txt a {
    background-color: #f6f6f6;
    padding: 11px 44px 10px 24px;
    border-radius: 30px;
    position: relative;
}
/* .project2 .project_txt a:hover {
    background: var(--point-color);
    color: #fff;
} */
.project2 .project_txt a::after {
    position: absolute;
    content: "";
    width: 24px;
    height: 24px;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='12' viewBox='0 0 16 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 12L8.6 10.55L12.15 7H0V5H12.15L8.6 1.45L10 0L16 6L10 12Z' fill='%231C1B1F'/%3E%3C/svg%3E%0A");
    right: 13px;
    top: 10px;
}
.project2 .project_photo a{
    display: block;
}
.project2 .project_photo a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 50px 0 0 0;
}

.end {
    background-image: url(../images/end.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    text-align: center;
    border-radius: 30px;
}
.end h2 {
    font-size: var(--display-size);
    font-weight: var(--bold-weight);
    line-height: var(--tit-line-height);
    color: var(--tit-font-color);
    margin-bottom: 92px;
}


/******마우스커서 변경******/
.cursor { 
	position: absolute;  /* 반드시 absolute여야 하고 위치는 jquery에서 적용 시킴 */
	z-index: 100000;
	transform: translate(-50%, -50%); /* 커서 위치 조정 */
	pointer-events: none; /* 생성된 cursor에 마우스 오버 이벤트를 주지 않기 - 이걸 주지 않으면 cursor에 마우스가 오버된 것으로 인식되어 하단 요소가 클릭되지 않음 */
	display:none; /* 평소에는 보이지 않게 하기 위해서 - 만약 원래도 따라다니는 마우스 포인터를 디자인하려면 스타일을 주면 됨. */
    background-color: var(--point-color);
    width: 100px;
    height: 100px;
    border-radius: 50%;
}
.cursor.on {
	display: block;  /* jquery에서 특정 요소에 마우스를 오버하면 class명을 추가해주고 그때 나타남 */
	/* 기본적인 스타일 주기 */
	mix-blend-mode: difference; /* 만약 블랜딩 모드를 주고 싶다면.. (반드시 background색상이 존재해야 적용됨 주의) */
}
section a {
	cursor: none !important; /* 만약 마우스 오버 시 생성한 cursor만 나타나고 실제 마우스 포인터는 안보이게 하려면 오버하는 요소에서 마우스 포인트를 안보이게 해야 함 */
}