@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
body,
header,
footer,
section,
.hero,
.work,
.logos,
.about,
.customer,
.project,
.projects,
.process,
.think_card,
.humble,
.lyl{
    display: flex;
}

body {
    font-family: "Inter", sans-serif;
    color: #141414;
    align-items: center;
    background: #fafafa;
    flex-direction: column;
    overflow: hidden;
}

header,
section,
footer{
    width: 100%;
    max-width: 1440px;
}

h1,
h2,
h3,
h4{
    font-family: Inter;
    font-weight: 500;
    text-transform: uppercase;
}
h1{
    font-size: 24px;
    width: 310px;
    position: absolute;
    top: 235px;
    right: 0;
}
h2{
    font-size: 14px;
    line-height: 14px; 
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #141414;
} 
h3{
    font-size: 124px;
    line-height: 105px; 
}
h4{
    font-size: 32px;
    font-weight: 500;
    line-height: 32px; 
    letter-spacing: 1px;
    text-transform: uppercase;
}
a{
    color: #141414;
    font-size: 14.4px;
    font-weight: 500;
    line-height: 14.4px; 
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none;
}
button{
    color: white;
    background-color: black;
    border: 0;
    border-radius: 3px;
    padding: 8px 16px;
}

header buttom{margin-left: 22px;}
p {
    font-size: 18px;
    line-height: 26px;
    font-weight: 400;
}
.pg_header{
    justify-content: space-between;
    max-width: 1263px;
    height: 50px;
    align-items: center;
}
.hero{
    margin-top: 40px;
    margin-bottom: 132px;
    justify-content: flex-end;
}
header .logo{
    background: #fff url(../image/logo.png);
}
.lyl{
    width: 907px;
    position: relative;
    justify-content: flex-start;
}
.hero h2{ 
    font-family: Inter;
    font-size: 123.429px;
    font-style: normal;
    font-weight: 500;
    line-height: 104.914px; 
    text-transform: uppercase;
}

.tap{
    position: absolute;
    right: 0;
    top: 86px;
    z-index: 10;
}
.title {
    color: yellowgreen;
}

.logo{
    display: inline-block;
    overflow: hidden;
    width: 113px;
    height: 31px;
    background: #fff url(image/logo.png) 0 0 no-repeat;
    text-indent: -113px;
}

.last_chat{
    display: block;
    position: absolute;
    top:80px;
    -left: 0;
    z-index: 10;
    opacity: 1;
    width: 100vw;
    height: 90vh;
    background: #141414;
}
.last_chat h2{
    color: #FAFAFA;
    font-size: 123px;
    font-weight: 500;
    line-height: 104px; 
    cursor: pointer;
    position: relative;
    top: 50vh;
    left: 40vw;
}
.last_chat h2:after{
    position: relative;
    content: "";
    display: inline-block;
    width: 81px;
    height: 70px;
    top: -10px;
    left: 32px;
    background-image: url(../image/vector.png);
}
.hide{
    width: 0;
    opacity: 0;
    transition: all ease-in .5s;
}

.about {
    margin-bottom: 430px;
    margin-right: 80px;
    justify-content: flex-end;
}
.about p{
    font-size: 48px;
    line-height: 60px; 
    width: 900px;
    text-indent: 200px;
}  
.about h2{
   position: absolute;
   left: 80px;
   top: 22px;
}   
.customer{
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.project{
    width: 1166px;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 206px;
}  
.project p{
    width: 270px;
}
.mask{
    content:"";
    display: block;
    height: 100%;
    background: rgba(20, 20, 20, 1);
}
.project img{
    opacity:.5;
    transition: opcity ease-in .5s ;
}
.project img:hover{
    opacity:1;
}
.projects{
    position: relative;
    justify-content: flex-end;
    height: 643px;
}
.projects h2{
    position: absolute;
    right: 940px;
    bottom: 276px;
}
.projects h3{
    font-size: 100px;
    font-weight: 500;
    line-height: 154px; 
    margin-right: 72px;
    border-bottom: 1px solid #E5E5E5;
}   
.projects .lyl h3:first-child{
    border-top: 1px solid #E5E5E5;
}
.projects .lyl{
    flex-direction: column;
}
.work{
    justify-content: flex-end;
    margin-bottom: 200px;
}
.work .lyl {
   flex-direction: column;
   align-items: center;
}
.work h2{
    margin-bottom: 33px;
}
.logos{
    width: 100%;
    justify-content: space-around;
}
span {
    color: #999;
    font-size: 8px;
    font-weight: 400;
}
.process{
    position: relative;
    align-items: center;
    flex-direction: column;
}    
.process header{
    height: 312px;
    display: flex;
    justify-content: flex-end;
}
.process h2{
    position: absolute;
    top: 190px;
    right: 230px;
}
.process h3{
    width: 850px;
    margin-right: 72px;
}
.think_card{
    flex-wrap: wrap;
    width: 1310px;
    gap:16px;
}
.think_card .card {
    width: 378px;
    height: 485px;
    border:2px solid #141414;
    padding: 22px;
}
.think_card h4 {
    font-size: 24.686px;
    line-height: 24.686px; /* 100% */
    letter-spacing: 1px;
}
.think_card span {
    color: rgba(20, 20, 20, 0.50);
    font-size: 14.4px;
    line-height: 14.4px; /* 100% */
    letter-spacing: 0.5px;
}
.think_card p{
    font-size: 18.514px;
    font-weight: 400;
    line-height: 25.92px;
}
.think_card .card div{
    width: 377px;
    height: 352px;
    border:0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #3E3E3E;
    font-size: 308px;
    line-height: 370px; 
}
.humble{
    position: relative;
    flex-direction: column;align-items: center;
    margin-top: 183px;
}
.humble h2{
    width: 164px;
    position: absolute;
    right: 26.3888%;
    top: 180px;
}
.humble h3{
    width: 328px;
}
.slide_img{
    margin: 86px 0;
    width: 100%;
    height: 306px;
    min-width: 1440px;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    gap: 28px;
}

.slide_img li:nth-child(even){
    position: relative;
    top: 42px;
}

.o{outline:1px dotted red;}

@media screen and (min-width: 1024px) {

}

/* pad */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  body{}
}

/* mobile */
@media screen and (max-width: 767px) {

}