* {
   margin: 0;
   padding: 0;
}

html { 
   scroll-behavior: smooth; 
} 

.page {
   width: 100%;
}

#headerid {
   background-color: none;
   width: 100%;
   height: 100px;
   display: flex;
   position: fixed;
   transition: all .5s;
}

a {
   all: unset;
}
header {
   z-index: 100;
}
.head {
   color: #fff;
   margin: 10px;
   margin-left: 30px;
   width: 100%;
   display: flex;
   justify-content: space-between;
   /* background-color: rgb(0, 0, 0); */
   transition: all 0.5s;
}

.head-co {
   color: #ffffff;
   font-size: 14px;
   width: 600px;
   height: 80px;
   /* background-color: rgb(0, 0, 0); */
   display: flex;
   transition: all .5s;
   font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif
}

.head-co-box {
   display: flex;
   list-style: none;
   width: 100%;
}

.head-nema {
   display: flex;
   /* background-color: rgb(0, 0, 0); */
   margin: auto 0;
   font-size: 20px;
   margin-left: 30px;
   font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif
}

.head-nema p {
   margin-left: 13px;
   transition: 0.5s;
}

.head-nema p:hover {
   color: rgb(104, 104, 104);
   transition: 0.5s;
   cursor: pointer;
}

.head-nema i {
   font-size: 30px;
   margin: auto 0;
}


.head-co-box li:hover {
   color: rgb(104, 104, 104);
   transition: 0.5s;
   cursor: pointer;
}

.head-co-box li {
   transition: 0.5s;
   margin-left: 20px;
}


.head-co-m1 {
   cursor: pointer;
   /* background-color: rgb(0, 0, 0); */
   width: 50px;
   margin: auto 0;
   margin-left: 40px;
}

.head-co-m2 {
   cursor: pointer;
   /* background-color: rgb(0, 0, 0); */
   width: 60px;
   margin: auto 0;
   margin-left: 40px;
}

.head-co-m3 {
   cursor: pointer;
   /* background-color: rgb(0, 0, 0); */
   width: 80px;
   margin: auto 0;
   margin-left: 40px;
}

.head-co-m4 {
   cursor: pointer;
   /* background-color: rgb(0, 0, 0); */
   width: 44px;
   margin: auto 0;
   margin-left: 40px;
}

.head-co-m5 {
   cursor: pointer;
   /* background-color: rgb(0, 0, 0); */
   width: 65px;
   margin: auto 0;
   margin-left: 40px;
}

.s1 {
   width: 100%;
   height: 850px;
   background-repeat: no-repeat;
   background-size: cover;
   background-position: 0 30%;
}

.s1-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   z-index: -100;
   position: fixed;
   filter: brightness(50%);
}

.section-nema {
   width: 100%;
   margin-top: 100px;
   font-size: 40px;
   color: #ffffff;
   position: absolute;
   left:50%;
   top:40%;
   transform:translate(-50%,-50%);
}
 
.section-co {
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
}

.section-nema h1 {
   text-align: center;
   font-size:75px;
   font-weight:bold;
   text-align:center;
   color:#ffffff;
   letter-spacing:0px;
   transition:1s;
   -webkit-transition:1s;
   -ms-transition:1s;
   position: relative;
   padding:10px;
   font-family:'Times New Roman', Times, serif
} 
.section-nema h1:before,
.section-nema h1:after{
  content:"";
  position: absolute;
  height: 7px;
  width: 0px;
  background:rgb(160, 85, 204);
  transition:300ms;
  -webkit-transition:1s;
  -ms-transition:1s;
  opacity:0.3;
  left:50%;
}

.section-nema h1:before{
  bottom:0;
 
}

.section-nema h1:after{
  top:0;
  
}

.section-nema h1:hover{
  letter-spacing:30px;
}

.section-nema h1:hover:before,
.section-nema h1:hover:after{
   width: 100%;
    opacity:1;
  left:0;

}
.section-nema h1:hover ~ h2{
  opacity:0;
}

.section-nema h2{
  color:#fff;
  font-family: 'Pinyon Script', cursive;
  text-align:center;
  font-size:130px;
  font-weight:100;
  bottom:40px;
  position: absolute;
  transition:1s;
  -webkit-transition:1s;
  -ms-transition:1s;
  opacity:0.1;
  width: 100%;
}


.s2 {
   width: 100%;
   height: 890px;
   background-color: rgb(255, 255, 255);
   text-align: center;
   
}

.about-me {
   text-align: center;
   width: 100%;
   font-size: 2rem;
   height: 80px;
   background-color: rgb(255, 255, 255);
   padding-top: 10px;
}

.about-me p {
   margin-top: 80px;
   width: 100%;
   background-color: #ffffff;
   font-family: 'Playfair Display', serif;
}

.section-co2 {
   width: 100%;
   background-color: #ffffff;
}

.profill {
   width: 100%;
   height: 180px;
   background-color: rgb(255, 255, 255);
   text-align: center;
   padding-top: 100px;
}

.profill img {
   border-radius: 90px;
   width: 180px;
   border: solid 3px rgb(2, 2, 2);
}

.text-me {
   width: 100%;
   background-color: #ffffff;
}
 
.text-me h1 {
   text-align: center;
   margin: 1.2em 2em;
   font-family: 'Playfair Display', serif;
   font-size: 1.4em;
   line-height: 1.4em;
   font-weight: 700;
   color: #333333;
 }

 .underline {
   line-height: 0.5em; /* Positive value. */
   vertical-align: 0.5em; /* Positive value. */
   border-bottom: .4em solid transparent;
   -moz-border-image: -moz-linear-gradient(left, #A8DBED 0%, #E291E6 100%);
   -webkit-border-image: -webkit-linear-gradient(left, #A8DBED 0%, #E291E6 100%);
   border-image: linear-gradient(to right, #A8DBED 0%, #E291E6 100%);
   border-image-slice: 1;
 }
 
 .underline span {
   vertical-align: -0.4em;
 }
 
 .tit-me-box {
   width: 100%;
   background-color: rgb(255, 255, 255);
   display: flex;
   justify-content: center;
   align-items: center;
 }

 .tit-con-me {
   font-size: 2rem;
 }

 .tit-con-icon{
   width: 100%;
   background-color: #ebebeb;
   height: 100px;
   display: flex;
   padding-top: 20px;
 }

 .tit-con-icon-ul {
   list-style: none;
   width: 30%;
   height: 100px;
   margin-left: 13%;
   border-radius: 11px;
   border: solid 2px;
 }

 .tit-con-icon-ul img {
   width: 100%;
   border-radius: 10px 10px 10px 10px;
   height: 100%;
   object-fit: cover;
 }

 .pp {
   display: flex;
   padding-top: 20px;
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
   
 }

 .pp1 {
   margin-left: 20%;
 }

 .pp2 {
   margin-left: 26%;
 }

 .box-tit {
   width: 600px;
   background-color: #ebebeb;
   height: 240px;
   left: 50%;
   box-shadow: 10px 10px 10px -2px rgb(87, 85, 85);
   border-radius: 20px;
   margin: 0 10px;
   border: solid 2px rgb(165, 93, 194);
 }
 /* Highlight */
 *::selection {
   background: rgba(182, 96, 187, 0.2);
 }

.s3 {
   width: 100%;
   height: 680px;
   background-color: rgb(218, 215, 215);
}

.section-co3 {
   width: 100%;
}

.section-what-i-do {
   text-align: center;
   font-size: 2rem;
   width: 100%;
   height: 100px;
   font-family: 'Playfair Display', serif;
   padding-top: 70px;
}

.section-123 {
   list-style: none;
   width: 100%;
   background-color: rgb(218, 215, 215);
   height: 400px;
   display: flex;
   
}

.section-ido {
   background-color: #ffffff;
   width: 30%;
   height: 400px;
   margin-left: 100px;
   border-radius: 20px;
   border: solid 2px;
   font-family: 'Playfair Display', serif;
   box-shadow: 10px 10px 10px -2px rgb(87, 85, 85);
   border-radius: 20px;
   border: solid 2px rgb(0, 0, 0);
   
}

.section-ido2 {
   background-color: rgb(255, 255, 255);
   width: 30%;
   height: 400px;
   margin-left: 100px;
   border-radius: 20px;
   border: solid 2px;
   font-family: 'Playfair Display', serif;
   box-shadow: 10px 10px 10px -2px rgb(87, 85, 85);
   border-radius: 20px;
   border: solid 2px rgb(0, 0, 0);
}

.section-ido3 {
   background-color: #ffffff;
   width: 30%;
   height: 400px;
   margin-left: 100px;
   margin-right: 100px;
   border-radius: 20px;
   border: solid 2px;
   font-family: 'Playfair Display', serif;
   box-shadow: 10px 10px 10px -2px rgb(87, 85, 85);
   border-radius: 20px;
   border: solid 2px rgb(0, 0, 0);
}

.section-ido3 img,
.section-ido2 img,
.section-ido img {
   width: 100%;
    border-radius: 19px 19px 0 0;
    height: 100%;
    object-fit: cover;
}

.ido-icon {
   width: 100%;
   height: 42%;
   background-color: antiquewhite;
   border-radius: 20px 20px 0 0
}

.ido-p {
   text-align: center;
}

.ido-p p {
   padding-top: 20px;
}

.s4 {
   width: 100%;
   height: 700px;
   background-color: rgb(255, 255, 255);
}

.experience {
   width: 100%;
   text-align: center;
   padding-top: 80px;
}

.experience-tit {
   font-size: 2rem;
   font-family: 'Playfair Display', serif;
}

.experience-tit-p {
   padding-top: 30px;
   font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
   font-size: 1.1rem;
   color: rgb(122, 122, 122);
}

.my-skill {
   padding-top: 40px;
   margin-left: 20%;
   width: 60%;
   height: 400px;
   background-color: #ffffff;
}

.sk-p {
   font-size: 1.2rem;
   font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.sk-list {
   padding-top: 20px;
   width: 60%;
   height: 330px;
   background-color: rgb(255, 255, 255);
   font-size: 4.3rem;
}

.sk-list i {
  filter: grayscale(100%); /* 흑백으로 설정 */
  transition: filter 0.3s;
}

.sk-list i:hover {
   filter: grayscale(0%); 

}

.sk-list
.i-2:hover{
   filter: grayscale(0%); 
}

.i-2, .i-3, .i-4, .i-6, .i-7, .i-8, .i-10, .i-11, .i-13{
   padding-left: 40px;
}
.i-12 {
   padding-left: 40px;
}

.worked {
   height: 374px;
   background-color: #ffffff;
   margin-left: 66%;
   position: relative;
   top: -371px;
   text-align: center;
}

.worked-img {
   position: absolute;
   left: 50%;
   height: 200px;
   padding-bottom: 10px;
   transform: translate(-50%, 20%);
}

.worked-img img {
    object-fit: cover;
}

.worked-img img:hover {
   cursor: pointer;
}

.worked-p {
   font-size: 1.2rem;
   font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

}

.s5 {
   width: 100%;
   height: 260px;
}

.s6 {
   width: 100%;
   height: 900px;
   background-color: rgb(255, 255, 255);
}

.section-co6 {
   padding-top: 60px;
   text-align: center;
   width: 100%;
   height: 130px;
   background-color: #ffffff;
}

.ive-done {
   font-size: 2rem;
   font-family: 'Playfair Display', serif;
}

.ive-p {
   padding-top: 12px;
   font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
   font-size: 1.1rem;
   color: rgb(122, 122, 122);
}

.done-list {
   background-color: #ffffff;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   text-align: center;
   margin-bottom: 40px;
   gap: 50px;
   padding-left: 5%;
   
}

.list {
   width: 81%;
   background-color: #ffffff;
   height: 250px;
   box-shadow: 10px 10px 10px -2px rgb(87, 85, 85);
   border-radius: 20px;
   border: solid 2px rgb(0, 0, 0);
   cursor: pointer;
   transition: transform 0.4s;
}

/*.list-img {
   width: 461px;
   height: 250px;
   object-fit: cover;
   border-radius: 18px;
} 프로잭트 이미지*/

.list:hover {
   transition: transform 0.4s;
   transform: translateY(-10px);
   cursor: pointer;
}

.s7 {
   width: 100%;
   height: 360px;
   background-color: rgb(218, 215, 215);
}

.touch {
   text-align: center;
   padding-top: 40px;
}

.GET {
   font-size: 2rem;
}
.touch i {
   font-size: 3rem;
   padding-bottom: 30px;
}

.P {
   padding-top: 20px;
   font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
   color: #747474;
   
}

.P2 {
   padding-bottom: 20px;
   font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
   color: rgb(181, 34, 189);
}

:root {
   --color-gray: #666;
   --color-black: #000;
   --stripe-height: 7px;
 }
 
.btn--stripe {
   text-align: center;
   width: 80px;
   overflow: visible;
   margin: 0;
   padding: 0;
   border: 0;
   background: transparent;
   font: inherit;
   line-height: normal;
   cursor: pointer;
   font-family: 'Courier New', Courier, monospace;
   font-size: 1.2rem;
 }
 
 @keyframes stripe-slide {
   0% {
     background-position: 0% 0;
   }
   100% {
     background-position: 100% 0;
   }
 }
 
 .btn {
   display: block;
   text-decoration: none;
   text-transform: uppercase;
   padding: 16px 36px 22px;
   background-color: #fff;
   color: var(--color-gray);
   border: 2px solid var(--color-gray);
   border-radius: 6px;
   margin-bottom: 16px;
   transition: all 0.5s ease;
   margin: auto;
 }
 
 .btn--stripe {
   overflow: hidden;
   position: relative;
 }
 
 .btn--stripe:after {
   content: '';
   display: block;
   height: var(--stripe-height);
   width: 100%;
   background-image: repeating-linear-gradient(45deg, var(--color-gray), var(--color-gray) 1px, transparent 2px, transparent 5px);
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
   border-top: 1px solid var(--color-gray);
   position: absolute;
   left: 0;
   bottom: 0;
   background-size: var(--stripe-height) var(--stripe-height);
 }
 
 .btn--stripe:hover {
   background-color: var(--color-gray);
   color: #fff;
   border-color: var(--color-black);
 }
 
 .btn--stripe:hover:after {
   background-image: repeating-linear-gradient(45deg, #fff, #fff 1px, transparent 2px, transparent 5px);
   border-top: 1px solid var(--color-black);
   animation: stripe-slide 12s infinite linear forwards;
 }

footer {
   width: 100%;
   height: 240px;
   background-color: rgb(36, 36, 36);
}

.my-my-my {
   text-align: center;
   padding-top: 40px;
}

.my-my-my p {
   font-size: 1rem;
   color: rgb(141, 140, 140);
   padding-top: 20px;
}

.ddd {
   font-size: 2.5rem;
   padding-top: 30px;
   color: #838282;
   cursor: pointer;
   transition: color 0.4s, transform 0.4s ease;
   
}

.ddd:hover {
   transition: color 0.4s, transform 0.4s ease;
   color: #bd4d4d;
   transform: scale(1.3);
}

.my-ic1, .my-ic2, .my-ic3, .my-ic4, .my-ic5, .my-ic6 {
   font-size: 3rem;
   padding-left: 40px;
   cursor: pointer;
   color: #fff;
   transition: color 0.4s, transform 0.4s ease;
}


.my-ic1:hover {
   transition: color 0.4s, transform 0.4s ease;
   color: #999899;
   transform: scale(1.3);
}

.my-ic2:hover{
   transition: color 0.4s ease;
   color: rgb(235, 109, 186);
   transform: scale(1.3);
}

.my-ic3:hover{
   transition: color 0.4s ease;
   color: rgb(85, 85, 206);
   transform: scale(1.3);
   
}

.my-ic4:hover{
   transition: color 0.4s ease;
   color: #999899;
   transform: scale(1.3);
   
}

.my-ic5:hover{
   transition: color 0.4s ease;
   color: #999899;
   transform: scale(1.3);
   
}

.my-ic6:hover{
   transition: color 0.4s ease;
   color: rgb(94, 31, 175);
   transform: scale(1.3);
   
}


@font-face {
   font-family: "Monument";
   src: url("https://res.cloudinary.com/holatresveces/raw/upload/v1573001944/MonumentExtended-Ultrabold_clzvv7.otf");
 }

@media screen and (max-width:900px){
   .head-co{
       display: none;
   }
}

@media screen and (max-width:1320px) {
   .sk-list {
      font-size: 4rem;
   }
   .i-2, .i-3, .i-4, .i-6, .i-7, .i-8, .i-10, .i-11, .i-13{
      padding-left: 20px;
   }
   .i-12 {
      padding-left: 20px;
   }
}

@media screen and (max-width:1100px) {
   .sk-list {
      font-size: 3rem;
   }
   .i-2, .i-3, .i-4, .i-6, .i-7, .i-8, .i-10, .i-11, .i-13{
      padding-left: 10px;
   }
   .i-12 {
      padding-left: 10px;
   }
   .worked {
      padding-left: 100px;
   }
   .worked-img {
      padding-left: 100px;
   }
   .section-123 {
      display: block;
   }
   
   .s3 {
      height: 1600px;
   }
   .section-ido {
      width: 60%;
      margin-bottom: 50px;
      margin-left: 20%;
   }
   .section-ido2 {
      width: 60%;
      margin-bottom: 50px;
      margin-left: 20%;
     
   }
   .section-ido3 {
      width: 60%;
      margin-bottom: 50px;
      margin-left: 20%;
   }
   
}

@media screen and (max-width:1000px) {
   .sk-list {
      font-size: 2.7rem;
   }
   .worked {
      padding-left: 100px;
   }
   .worked-img {
      padding-left: 100px;
   }
}

@media screen and (max-width:900px) {
   .s2 {
      height: 1000px;
   }
}

@media screen and (max-width:1600px) {
   .s6 {
      height: 1500px;
   }

   .done-list {
      grid-template-columns: repeat(2, 1fr);
   }
   .list {
      width: 500px;
      margin-left: 12%;
   }
}

@media screen and (max-width:1140px) {
   .done-list {
      grid-template-columns: repeat(1, 1fr);
   }
   .s6 {
      height: 2100px;
   }
   .list {
      width: 500px;
      margin-left: 21%;
   }
   
}

@media screen and (max-width:1000px) {
   .list {
      margin-left: 10%;
   }
}

@media screen and (max-width:900px) {
   .list {
      margin-left: 5%;
   }
}

@media screen and (max-width:700px) {
   .list {
      margin-left: -2%;
   }
}