body{background: linear-gradient(315deg, #e4eee9 0%, #93a5ce 74%) }
section{margin: 70px 0;}
.container{width:1280px; margin: 0 auto; position:relative; box-sizing: border-box; }
h2{font-size: 32px; font-weight: 700; margin: 40px 0 15px 0;}
h4{font-size: 22px; font-weight: 700; margin: 0 0 15px 0;}
h5{font-size: 18px; font-weight: 700;}

.intro-wrap .intro-con{display: flex; gap: 30px; margin: 30px 0;}
.intro-wrap .intro-con .intro-img{display: flex; flex-direction: column; gap: 10px;}
.intro-wrap .intro-con .intro-img>img{box-shadow:0 0 6px #717171;border-radius: 20px;}

.intro-wrap .grid-con{display: grid; grid-template-columns: repeat(2,1fr); gap: 20px;}
.intro-wrap .grid-con .con-list ul{padding-left: 14px;}
.intro-wrap .grid-con .con-list ul li{margin-bottom: 7px; position: relative;}
.intro-wrap .grid-con .con-list ul.list-none{padding-left: 0;}
.intro-wrap .grid-con .con-list ul.list-none li::before{content: none;}
.intro-wrap .grid-con .con-list ul.list-none li .copy-btn{border: 1px solid #797979; padding: 2px 7px; display: inline-block; margin-left: 5px; cursor: pointer; transition: all .3s; border-radius: 5px;}
.intro-wrap .grid-con .con-list ul.list-none li .copy-btn:hover{background-color: #000; color: #fff;}
.intro-wrap .grid-con .con-list ul li::before{content: '';position: absolute;top: 7px;left: -14px;width: 6px;height: 1px;border-bottom: 1px solid #000;}
.intro-wrap .grid-con .con-list ul li ul{margin-top: 5px;padding-left: 14px; list-style: none !important;}
.intro-wrap .grid-con .con-list ul li ul li{position: relative;}
.intro-wrap .grid-con .con-list ul li ul li::before{width: 4px; height: 4px; background: #000000; border: none;}
.disc-wrap .skills{display: flex; margin: 30px 0; justify-content: center; gap: 20px;flex-wrap: wrap;}

.project-wrap .project-con{display: grid; grid-template-columns: repeat(3,1fr); gap: 30px; margin: 20px 0;}
.project-wrap .project-con .project-list{background-color: #FFF; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5); text-align: center; border-radius: 10px; display: flex ; flex-direction: column; padding: 20px; gap: 15px;}
.project-wrap .project-con .project-list:hover img{transform: scale(1.02);}
.project-wrap .project-con .project-list img{box-shadow: 0 0 2px #717171; border-radius: 10px; transition: .3s;}
.project-wrap .project-con .project-list a{padding: 7px 10px; border: 1px solid #000; border-radius: 10px; box-sizing: border-box; text-align: center; transition: .3s;}
.project-wrap .project-con .project-list a:hover{background-color: #000; color: #fff;}
.project-wrap .project-con .project-list .project-desc{display: flex; flex-direction: column; height: 100%; justify-content: center;}

footer{padding: 20px 0; border-top: 1px solid #000;}
@media(max-width:1280px){
    .container{padding: 0 20px; width: 100%;}
}
@media(max-width:767px){
    .intro-wrap .intro-con{flex-direction: column;}
    .intro-wrap .intro-con .intro-img{align-items: center;}
    .intro-wrap .intro-con .intro-img>img{max-width: 150px;}
    
    .intro-wrap .grid-con{grid-template-columns: repeat(1,1fr);}
    .project-wrap .project-con{grid-template-columns: repeat(2,1fr);}
}
@media (max-width:460px){
    .project-wrap .project-con{grid-template-columns: repeat(1,1fr);}
}