html, body{
    background-color: #F6F3EF;
}
* {
    box-sizing: border-box;
}

header {
    position:fixed; left:0; top:0;
    width:100%; height:80px; z-index:700;
    border-bottom:#300D6A solid 2px;
    background-color: #F6F3EF;
    display: flex;
    align-items: center;
    justify-content: center;
}
header  nav {
    
    display: flex;
    justify-content: center;
    text-align: center;
    gap:20px;
}
header nav a {
    color:#300D6A;
    font-size: 1.2rem;
    border:#300D6A 1px solid;
    border-radius: 30px;
    padding:10px 14px;
    transition: all 0.3s ease;
}
header nav a:hover {
    color:#300D6A;
    background-color: #fff;
    border:#C3FFF2 2px solid;
    box-shadow: 0 4px 4px rgba(0,0,0, 0.2);
}
#wrap {
    height:100vh;
}
#wrap .swiper-wrapper {
    /* height:calc(100vh - 80px); */
    
}
/* 인트로 1행 */
#wrap .swiper-wrapper .intro {
    display: flex; 
    flex-flow: column nowrap; /* 수직배치 */
    justify-content: center;
     align-items:center; /* 교차 가운데 */
     text-align: center;
     position:relative;
     
}
#wrap .swiper-wrapper .intro .info_wrap {
    
}
#wrap .swiper-wrapper .intro .info_wrap .title {
    /* margin-top:325px; */
    
}
#wrap .swiper-wrapper .intro .info_wrap .title .subtitle {
    display:flex;
    align-items: center;
}
#wrap .swiper-wrapper .intro .info_wrap .title .subtitle > span {
    font-size: 1.2rem;
    border-bottom: 1px solid #280266;
    padding:4px 10px;
}
#wrap .swiper-wrapper .intro .info_wrap .title .subtitle span img {}
#wrap .swiper-wrapper .intro .info_wrap .title h1  {
    font-size:11.25rem;
    font-family: 'Port Lligat Slab' , sans-serif;
    color:#280266;
    letter-spacing: 0.05em;
    text-shadow:10px 4px 4px rgba(0,0,0,0.3) ;
    text-align: center;
}


#wrap .swiper-wrapper .intro .info_wrap .title .years  {
    text-align: right;
    font-size: 1.25rem;
    
    background-color: #fff;
    border:4px solid #C3FFF2;
    width:max-content;
    float: right;
    border-radius: 30px;
    box-shadow: 3px 4px rgba(0,0,0,0.13);
    
}
#wrap .swiper-wrapper .intro .info_wrap .title .years span {
    display: inline-block;
    font-weight:600;
    padding:5px 10px;
}
#wrap .swiper-wrapper .intro .info_wrap .bottom_wrap {
    clear: both;
    margin-top: 354px;
    display: block;
    text-align: left;
    position:absolute;
    /* border:3px solid red; */
    bottom:100px; left:63px;
}
#wrap .swiper-wrapper .intro .info_wrap .bottom_wrap > * {
    
}
#wrap .swiper-wrapper .intro .info_wrap .bottom_wrap span {
    color:#280266;
    font-size: 2rem;
    margin-right:30px;
    font-family: 'Source Serif 4',serif;
}
#wrap .swiper-wrapper .intro .info_wrap .line_wrap {
    display: flex;
    flex-direction: column;
    gap:10px;
    justify-content: center;
    /* margin-top:30px; */
    position:absolute;
    bottom:7px;
    left:0;
    
    


}
#wrap .swiper-wrapper .intro .info_wrap .line_wrap .line{
    display: block;
    /* width:100vw; */
    width:0;
    transition:width 0.9s ease-in-out;
    height:10px;
    background-color: #280266;
    justify-content: center;
    margin:0 auto;
    transform-origin: left;
    
}
.line_wrap .line.draw {
    width:100vw;
}
#wrap .swiper-wrapper .intro .info_wrap .line_wrap .line1 {
    height:3px;
    
}
#wrap .swiper-wrapper .intro .info_wrap .line_wrap .line2 {
    height:2px;
    transform: rotate(-0.7deg);
    
    
}
#wrap .swiper-wrapper .intro .info_wrap .line_wrap .line3 {
    height:50px;
    
}

.line_wrap .line.draw1 {
    width:100vw !important;
    
}
.line_wrap .line.draw2 {
    width:100vw !important;
    
}
.line_wrap .line.draw3 {
    width:100vw !important;
    
}
/* 2행============== */
#wrap .profile {
    display: flex; 
    flex-flow: column wrap; /* 수직배치 */
    justify-content: center;
    align-items:center; /* 교차 가운데 */

    
}
#wrap .profile .profile_section {
    display: flex;
    margin: 200px auto 0;
    width:1400px;
    /* border:1px solid red; */
    height:90vh;
    justify-content: center;
    
    
}
#wrap .profile .profile_section .section_wrap {
    display: flex;
    
}
#wrap .profile .profile_section .section_wrap h4 {
    /* border:1px solid red; */
    margin-bottom:44px;
}
#wrap .profile .profile_section p {}
#wrap .profile .profile_section .profile_left {
    font-size: 0.938rem;
    margin-right: 120px;
    /* border:3px solid red; */
}
#wrap .profile .profile_section .profile_left .name {
    margin-right:141px ;
    margin-bottom:20px;
    font-size: 0.938rem;
    font-weight:600;
    /* border:3px solid blue; */
}
#wrap .profile .profile_section .profile_left .name span{
    margin-left:10px;
    color:#808080;
    font-weight: 700;
}
#wrap .profile .profile_section .profile_left > h3 {
    font-size: 1.688rem;
    border:2px solid #280266;
    font-weight: 700;
    display:inline-block;
    background: #fff;
    padding:10px 14px;
    width:388px;
    border-radius: 30px;
    margin-bottom: 49px;

}
#wrap .profile .profile_section .profile_left img {
    display: block;
    margin-bottom: 46px;
    width: 250px;
    height:auto;
    
    
}
#wrap .profile .profile_section .profile_left .birth {
    margin-bottom:20px;
}
#wrap .profile .profile_section .profile_left .contact {
    display: grid;
    gap:20px;
}
#wrap .profile .profile_section .profile_left .contact {}
#wrap .profile .profile_section .profile_right {
   height:90vh;
    /* border: 1px solid blue; */
    justify-content:space-between;
    /* margin-right: 120px; */
}
#wrap .profile .profile_section h4 {
    color:#280266;
    font-size: 1.375rem;
    font-weight:700;
    border-bottom: #280266 solid 1px;
    padding:5px;
}
#wrap .profile .profile_section .date {
    font-weight:500;
    font-size: 0.938rem;
    
}
#wrap .profile .profile_section ul {
    margin-bottom: 91px;
}
/* #wrap .profile .profile_section .section-skills ul li {
    border:1px solid red;
    display: grid;
    gap:23px;
} */
#wrap .profile .profile_section .desc {
    color: #808080;
    line-height:1.6;
    font-size: 0.9rem;
}
#wrap .profile .profile_section .date ul {display: flex;}
#wrap .profile .profile_section .profile_right ul {
    display: grid;
    gap:23px;
}
#wrap .profile .profile_section h4 {
    /* display: inline-block; */
    width:100%;
}
#wrap .profile .profile_section .profile_right ul li {
    display: flex;
    gap:10px;
    /* border:1px solid green; */
    
}
#wrap .profile .profile_section .section-skills ul li {
    margin-bottom:23px;
    /* border:1px solid green; */
}
#wrap .profile .profile_section ul li .date{
    width:155px;
    /* border:1px solid green; */
}
/* educatio */
#wrap .profile .profile_section .profile_right .section_education {
    margin-bottom:;
    
    
}
/* skill */
#wrap .profile .profile_section .section-skills {
    display: flex;
    flex-direction: column;
    gap:30px; 
   /*  border-left: #280266 solid 1px; */
    padding-left: 110px;
    width:fit-content;
    
}
#wrap .profile .profile_section .section-skills ul {}
#wrap .profile .profile_section .section-skills li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position:relative;
    gap:20px;
}
#wrap .profile .profile_section .section-skills .skill-name {
    min-width:100px;

}
.bar-wrap{
    display:flex;
    align-items: center;
    gap:10px;

}
#wrap .profile .profile_section .section-skills .percent{
    text-align: right;
    color: #808080;
}
#wrap .profile .profile_section .section-skills .bar{
    width:130px;
    height: 10px;
    background: #D9D9D9;
    margin-left: 10px;
    position:relative;
    border-radius: 30px;
    margin-right:;
    
}
#wrap .profile .profile_section .section-skills .bar::before{
    content: '';
    position:absolute;
    height:100%;
    background:#280266;
    width:80%;
    border-radius: 30px;
    left:0px;
    
}
#wrap .profile .profile_section .section-skills .ph::before{
    width:60% !important;
}
#wrap .profile .profile_section .section-skills .html::before{
    width:70% !important;
}
#wrap .profile .profile_section .section-skills .il::before{
    width:60% !important;
}

#wrap .profile .profile_section .section-skills .git::before{
    width:50% !important;
}
#wrap .profile .profile_section .section-skills .javascript::before{
    width:30% !important;
}
#wrap .profile .profile_section .section-skills .plugin::before{
    width:30% !important;
}
#wrap .profile .profile_section .section-skills .react::before{
    width:30% !important;
}
/* 3행=================================================== */
#wrap .project {
    display: flex;
    align-items: center;
    /* justify-content: space-between; */
    height:100vh;
    /* padding:0 100px; */
    width:100vw;
    position:relative;
    margin: 0 auto;
}
#wrap .project .project-left,#wrap .project .project-right {
    
    
}
/* #wrap .project > h3 {
    position:absolute;
    font-size: 1.688rem;
    border:2px solid #280266;
    font-weight: 700;
    display:inline-block;
    background: #fff;
    padding:10px 14px;
    width:388px;
    border-radius: 30px;
    margin-bottom:600px;
    left:100px;

} */
#wrap .project .project-left {
    position:relative;
    z-index:10;
    padding-top:60px;
    /* border:3px blue solid; */
    justify-content: center;
    /* overflow: hidden; */
    height:100%;
    align-items: center;padding-top: 300px;
    width:55%;
    

}
#wrap .project .project-left .left-bg {
    width:50%;
    background-color: #DBDBDB;
    position:absolute;
    height:100%;
    /* border-top-right-radius: 40px; */
    z-index:0;
    top:0;
    right:0;
    
}
#wrap .project .project-left .barnd-title {
    position:absolute;
    top:250px;
    left:100px;
    z-index: 50;
    font-size: 7rem;
    font-weight:700;
    color:rgba(62, 42, 91, 0.5);
    /* border:1px solid red; */

}
#wrap .project .project-left .mockup_img {
    max-width:95%;
    z-index: 30;
    position:relative ;
    margin-bottom: 30px;
    margin-top:60px;
    /* margin:0 auto; */
    
}
#wrap .project .project-right {
    /* border: 3px solid red; */
    height:100%;
    padding:165px 90px;
    width:45%;
    background-image: url(../images/ameli-background.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
}
#wrap .project .project-right .project_info {}
#wrap .project .project-right .project_info .info_title {
    width:380px;
    border-radius: 30px;
    border:1px solid #C3FFF2;
    background-color: #280266;
    margin-bottom:69px ;

}
#wrap .project .project-right .project_info .info_title span {
     font-weight:700;
    font-size:1.438rem;
    color:#C3FFF2;
    
    padding:10px 14px;
    text-align: left;
    display: block;
    
}
#wrap .project .project-right .project_info .tag {
    border:1px solid #fff;
    width:fit-content;
    border-radius: 30px;
}
#wrap .project .project-right .project_info .tag span {
    color:#fff;
    display: inline-block;
    padding:5px 10px;
}
#wrap .project .project-right .project_info h3 {
    font-size:3.125rem ;
    color:#C3FFF2;
    font-weight:700;
    padding: 10px 10px;
    border-bottom: 1px solid #C3FFF2;
}
#wrap .project .project-right .project_info .tag span {}
#wrap .project .project-right .project_info {}
#wrap .project .project-right .project_info_2 {
    padding:63px 0;
}
#wrap .project .project-right .project_info_2 .info_grid {
    display: grid;
    gap:13px;
    font-size:1.125rem;
    
}
#wrap .project .project-right .project_info_2 .info_grid .label em {
    color:#fff;
    width:90px;
    display: inline-block;
}
#wrap .project .project-right .project_info_2 .info_grid span {
    color:#fff;
    margin-left:30px;
}
#wrap .project .project-right .project_desc {
    margin-top:54px;
    
}
#wrap .project .project-right .project_desc p {
    margin-bottom: 20px;
    color:#fff;
    line-height:1.6;
    font-size:0.9rem;
}
#wrap .project .project-right .project_buttons {
    display: flex;
    gap:25px;
}
#wrap .project .project-right .project_buttons .project_btn {
    padding:13px 30px;
    border:#C3FFF2 solid 1px;
    background-color: #C3FFF2;
    border-radius:10px;
    color:#280266;
    font-weight:500;
    
}
#wrap .project .project-right .project_buttons .btn2{
    background-color: #fff;
}

/* 폴로================================== */
#wrap .project.reverse {
    flex-direction: row-reverse;
    
}
#wrap .project.reverse .project-left {
    width:55%;
    
}
#wrap .project.reverse .project-left .barnd-title {
    color:#041E3A;
}
#wrap .project.reverse .project-right {
    
    width:45% !important; 
    
    /* border: 3px solid red; */
    height:100%;
    padding:165px 90px;
    width:45%;
    background-image: url(../images/polo_background.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
}
#wrap .project.reverse .project-right .project-right-wrap .project_info .info_title {
    background:#233548;
    border: 1px solid #F8F4E3;
}
#wrap .project.reverse .project-right .project-right-wrap .project_info .info_title span {
    color:#F8F4E3;
}
#wrap .project.reverse .project-right .project-right-wrap .project_info h3{
    color:#F8F4E3;
}
#wrap .project.reverse .project-right .project-right-wrap  .btn1 {
    background-color: #F8F4E3;
}
#wrap .project.reverse .project-right .project-right-wrap .project_buttons a {
    color:#041E3A;
}
/* 널담================================== */
#wrap .project .Nuldam {
    flex-direction: row-reverse;
    
}

#wrap .project.Nuldam .project-left .barnd-title {
    color:#0A46D7;
}
#wrap .project.Nuldam .project-right {
    
    
    
    /* border: 3px solid red; */
  
    background-image: url(../images/nuldam_bg.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
}
#wrap .project.Nuldam .project-right .project-right-wrap .project_info .info_title {
    background:#2925f3;
    border: 1px solid #F8F4E3;
    
}
#wrap .project.Nuldam .project-right .project-right-wrap .project_info .info_title span {
    color:#F8F4E3;
}
#wrap .project.Nuldam .project-right .project-right-wrap .project_info h3{
    color:#ffffff;
}
#wrap .project .Nuldam .project-right .project-right-wrap  .btn1 {
    background-color: #F8F4E3;
}
#wrap .project .Nuldam .project-right .project-right-wrap .project_buttons a {
    color:#041E3A;
}
/* 그래픽 디자인======================= */
#Graphic_design {}
#Graphic_design .swiper-container {
    width:1620px;
    margin:120px auto 0;
    height:700px;
    /* display: flex; */
    /* background-color: aqua; */
    /* display: flex; */
    overflow: hidden;
    
}
#Graphic_design .swiper-container .design_container {
    display: flex;
    margin-top:100px;
}
#Graphic_design .swiper-container .design_container .Graphic_design_title {}
#Graphic_design .swiper-container .Graphic_design_title h4 {
    font-size: 3rem;
    font-weight: 700;
    color:#300D6A;


}
#Graphic_design .swiper-container .design_container .design_left_wrap {}
#Graphic_design .swiper-container .design_container .design_left_wrap .sns_swiper {
    width:1000px;
    
}
#Graphic_design .swiper-container .design_container .design_left_wrap .sns_swiper .swiper-wrapper {}
#Graphic_design .swiper-container .design_container .design_left_wrap .sns_swiper .swiper-wrapper .swiper-slide {
     width:200px; height:300px;
     /* border:2px solid red; */
}
#Graphic_design .swiper-container .design_container .design_left_wrap .sns_swiper .swiper-wrapper .swiper-slide img {
    width:100%;
    display: block;
    height:100%;
}
#Graphic_design .swiper-container .design_container .design_left_wrap .poster_swiper {
    width:1000px;
    margin-top:100px;
}
#Graphic_design .swiper-container .design_container .design_left_wrap .poster_swiper .swiper-wrapper {}
#Graphic_design .swiper-container .design_container .design_left_wrap .poster_swiper .swiper-wrapper .swiper-slide {
    width:500px; height:200px;
}
#Graphic_design .swiper-container .design_container .design_left_wrap .poster_swiper .swiper-wrapper .swiper-slide-active{

    width:300px;
}
#Graphic_design .swiper-container .design_container .design_left_wrap .poster_swiper .swiper-wrapper .swiper-slide img {
    width:100%;
    display: block;
}
#Graphic_design .swiper-container .poster_swiper {}
#Graphic_design .swiper-container .poster_swiper .swiper-wrapper {}
#Graphic_design .swiper-container .poster_swiper .swiper-wrapper .swiper-slide {}
#Graphic_design .swiper-container .poster_swiper .swiper-wrapper .swiper-slide img {}
/* 상세페이지 */
#Graphic_design .swiper-container .design_container .detail_design_swiper {
    margin-left:100px;
}
#Graphic_design .swiper-container .design_container .detail_design_swiper .swiper-wrapper .swiper-slide {
    width:500px !important;
    height:600px !important;
    /* border:3px solid red; */
}
#Graphic_design .swiper-container .design_container .detail_design_swiper .swiper-wrapper .swiper-slide img {
    width:100%;
    display: block;
    
    /* border:3px solid blue; */
}

/* 디자인 팝업 */
.popup_bg {
    background: rgba(0,0,0, 0.5);
    position: fixed; left:0; top:170px;
    z-index:80; width:100%; height:100vh;
    display: none; /* 부모한테주기 클릭하기전에 안보이게 */
}
.popup_bg .popup {
    width:700px; margin:0 auto;
    height:80vh; overflow: auto;
}
.popup_bg .popup img {
    width:100%;
    
}
#sns_swiper .swiper-slide:hover {
    transform: rotate(-3deg) scale(1.1);
}

/* 애니메이션 */
.info_title span {
    display: inline-block;
    opacity:0;
    transform: translateX(-30px);
    transition: transform 0.9s ease, opacity 0.9s ease;
}
.info_title span.active {
    opacity: 1;
    transform: translateX(0);
}