@charset "utf-8";
#container section {
	display:flex;
	align-items:flex-start;
	justify-content:center;
	font-size:1em;
}
#section2 {
    flex-direction: column;
}
#section3 {
	background-color:lightgreen;
}
#container #section1 {
	flex-direction:column;
	align-items:center;
	justify-content:flex-start;
	margin-bottom:15rem;
}
.myself_wrap {
    width:160rem;
	display:flex;
    justify-content: space-between;
    margin:21rem auto 0;
}
.myself {
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	width:21.6rem;
	height:21.6rem;
	background:#f8f8f8;
	border-radius:50%
}
.myself img {
	width:13rem;
}
.myself .visitor {
	position:absolute;
	top:-2.0rem;
	right:-1rem;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	width:7.6rem;
	height:7.6rem;
	font-size:1.5rem;
	background:var(--color-point);
	color:var(--color-white);
	border-radius:50%;
	text-transform:uppercase;
}
.myself .visitor::before {
	position:absolute;
	bottom:0;
	left:-.4rem;
	content:"";
	display:block;
	width:2.2rem;
	height:1.6rem;
	background:url(../images/visitor_before.png) no-repeat 0 0;
}
.myself .visitor span:first-child {
	font-size:1rem;
}
.myself_wrap .text {
	margin-right:14rem;
}
.myself_wrap .text .tit {
	line-height:1.45;
	font-size:4.6rem;
	color:var(--color-black);
}
.myself_wrap .text .tit span {
	color:var(--color-point);
}
.myself_wrap .text .desc {
	margin-top:2.6rem;
	font-size:2.2rem;
	color:var(--color-black);
	font-weight: 100;
}

.marquee {
    position: relative;
	width:100%;
    height:46rem;
	overflow:hidden;
	white-space:nowrap;
    padding: 22rem 0 0;
}
.marquee::before{
    content: "";
    display:block;
    position: absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:var(--color-base);
}
.marquee-text {
	display:inline-block;
	font-size:8.6rem;
	font-weight:600;
	padding-left:100%;
	animation:marquee 50s linear infinite;
}
.marquee-text span {
	padding:0 5rem;
	color:#222222;
}

.about_wrap{
    display:flex;
    width:160rem;
    margin:-38rem auto 0;
    z-index:1;
}
.about_wrap .about_title{ 
    width:37rem;
    color:var(--color-white);
    text-transform:uppercase;
}
.about_wrap .about_content{
    width: calc(100% - 37rem);
}
.about_wrap .about_content .myself_txt{
    padding-bottom:7rem;
    font-size:4.6rem;
    font-weight:600;
    color:var(--color-white);
}
.about_wrap .about_content > ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.about_wrap .about_content > ul > li{
/*    margin-right:3rem;*/
    margin-bottom:3rem;
    flex-basis: 49%;
    min-height:31rem;
    padding:5rem;
    background: #f8f8f8;
    box-sizing: border-box;
    border-radius: var(--border-radius-base);
}
.about_wrap .about_content > ul > li:nth-child(2n){
    margin-right:0;
}
.about_wrap .about_content > ul > li.edu_wrap{
    flex-basis:100%;
}
.about_wrap .about_content > ul > li .content{
    position: relative;
    height:100%;
}
.about_wrap .about_content > ul > li .content .cert{
    position: absolute;
    width:100%;
    bottom:5rem;
}
.about_wrap .about_content .myself_info{
    color:var(--color-white);
    background: var(--color-point);
}
.about_wrap .about_content > ul .tit{
    padding-bottom:2.5rem;
    font-size:2rem;
    font-weight:300;
}
.about_wrap .about_content > ul .tit .total{
    padding-top:1rem;
    font-size:2.8rem;
    font-weight:500;
}
.about_wrap .about_content > ul .tit .symbol{
    position: absolute;
    top:0;
    right:0;
}
.about_wrap .about_content .myself_info .tit{
    position: relative;
}
.about_wrap .about_content .myself_info .tit img{
    width:5rem;
}
.about_wrap .about_content .myself_info .content ul{
    position: absolute;
    bottom:10rem;
    width:100%;
}
.about_wrap .about_content .myself_info .content li{
    padding-bottom:1.3rem;
}
.about_wrap .about_content .myself_info .content .label{
    display: inline-block;
    text-align: center;
    width:8rem;
    height:2.2rem;
    line-height:2.2rem;
    font-size:1.3rem;
    color:#b6b6b6;
    border:1px solid #b6b6b6;
    border-radius:25rem;
}
.about_wrap .about_content .myself_info .content .txt{
    padding-left:1.6rem;
    font-size:1.8rem;
}
.about_wrap .about_content .skill{
    display:inline-flex;
    gap:.6rem;
}
.about_wrap .about_content .skill_desc{
    position: absolute;
    bottom:3rem;
    font-size:1.8rem;
    font-weight:100;
}
.about_wrap .about_content .skill_desc p{
    padding-left:1.5rem;
    position: relative;
    padding-bottom:1.2rem;
}
.about_wrap .about_content .skill_desc p::before{
    display:block;
    content: "·";
    position:absolute;
    left:0;
    top:0;
}
.about_wrap .about_content .cert > li{
    position: relative;
    padding-left:1.5rem;
    padding-bottom:1.2rem;
    font-size:1.8rem;
    font-weight:100;
}
.about_wrap .about_content .cert > li::before{
    display:block;
    content: "·";
    position:absolute;
    left:0;
    top:.2rem;
}
.about_wrap .about_content .cert > li .txt{
    display:inline-block;
    position: absolute;
    right:0;
    font-size:1.6rem;
    color:#a5a5a5;
}
.about_wrap .about_content > ul > li .content .cert.edu{
    bottom:2rem;
}
.about_wrap .about_content .cert.edu > li .txt{
    top:0;
}
.about_wrap .about_content .cert > li .label_sub{
    display:block;
    padding-top:.3rem;
    font-size:1.5rem;
    color:#bdbdbd;
}
.project_wrap .view_more_button{
    display: flex;
    width:45rem;
    flex-basis: 8rem;
    margin:9rem auto 0;
    padding: 2rem 2rem;
    background-color: var(--color-black);
    color: var(--color-white);
    font-size: 1.8rem;
    border-radius: .6rem;
    text-align: center;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color 0.3s, transform 0.3s;
    cursor: pointer;
}
.project_wrap .view_more_button:hover {
    background-color: var(--color-point);
    transform: translateY(-.2rem); /* 위로 살짝 떠오르는 효과 */
}

.project_wrap .view_more_button:active {
    transform: translateY(0); /* 클릭 시 원래 위치로 돌아오기 */
}
@keyframes marquee {
	0% {
		transform:translateX(0);
		/* 시작 위치 */
	}
	100% {
		transform: translateX(-100%);
		/* 끝 위치 */
	}
}

	/* header 반응형 */
@media screen and (max-width:1600px){
    #container #section1{
        width:100%;
        padding:0 4rem;
        box-sizing: border-box;
    }
    .myself_wrap{
        min-width:100%;
    }
    .project_wrap{
        min-width:100%;
        padding:0 4rem;
        box-sizing: border-box;
    }
}