*{
    margin: 0%;
}

#top {
    background-color: rgb(12, 58, 12);
    height: 75px;
    display: flex;
}

#a {
    display: flex;
    margin-left: 10px;
}

#ss {
    margin-bottom: 0px;
    margin-top: 9.5px;
    font-weight: 580;
    color: rgb(255, 255, 255);
    font-size: 25px;
}

#sss {
    font-weight: 580;
    color: rgb(255, 255, 255);
    font-size: 25px;
}

#t {
    font-size: 70px;
    margin-top: -3px;
    color: rgb(255, 255, 255);
}

#k {

    margin-left: 1110px;
    margin-top: 34px;
    color: rgb(255, 255, 255);
}

#world {
    margin-left: 20px;
    margin-top: 25px;
}

#w {
    background-color: rgb(255, 255, 255);
    height: 40px;
    margin-left: 20px;
    margin-top: 20px;
    border-radius: 60px;
    border: solid 1px rgb(255, 255, 255);
    width: 85px; 
    display: flex;

}

#ww {
    margin-left: 1px;
    margin-top: 0px;
}

#B {
    margin-left: -6px;
}
#zoom {
    border: solid 1px rgb(193, 193, 193);
    width: 600px;
    height: 40px;
    margin-top: 20px;
    margin-left: 480px;
    background-color: rgb(193, 193, 193);
    border-radius: 20px;
    box-shadow: 3px 4px rgb(126, 126, 126);
    display: flex;
}
#M {
    margin-top: 5px;
    margin-left: 10px;
}
#find {
    margin-left: 15px;
    margin-top: 2px;
    border: solid 1px rgb(193, 193, 193);
    width: 100%;
    border-radius: 20px;
    font-size: 15px;
}
input {
    background-color: rgb(193, 193, 193);

}
#slideshow {
    display: flex;
    animation: slide 16s infinite;
}
.slideshow {
    margin-top: 20px;
    margin-left: 260px;
    width: 1000px;
    position: absolute;
    border: solid 1px white;
    border-radius: 30px;
    overflow: hidden;
    box-shadow:  0 2.2px 2.2px rgba(0, 0, 0, 0.034),
    0 6.7px 5.3px rgba(0, 0, 0, 0.048),
    0 12.5px 10px rgba(0, 0, 0, 0.06),
    0 22.3px 17.9px rgba(0, 0, 0, 0.072),
    0 41.8px 33.4px rgba(0, 0, 0, 0.086),
    0 100px 80px rgba(0, 0, 0, 0.12)
  ;
}

@keyframes slide {
    0% {
        transform: translateX(0);
    }
    10% {
        transform: translateX(0);
    }
    20% {
        transform: translateX(-110%);
    }
    30% {
        transform: translateX(-110%);
    }
    40% {
        transform: translateX(-215%);
    }
    50% {
        transform: translateX(-215%);
    }
    60% {
        transform: translateX(-330%);
    }
    70% {
        transform: translateX(-330%);
    }
    80% {
        transform: translateX(-440%);
    }
    90% {
        transform: translateX(-440%);
    }
    100% {
        transform: translateX(-440%);
    }
}
#thailand {
    margin-top: 650px;
    margin-left: 480px;
    font-size: 45px;
}

#hit {
    margin-top: 80px;
    margin-left: 120px;
    font-size: 30px;
    margin-bottom: 30px;
}
#hitlist {
    margin-left: 20px;
    margin-top: 20px;
    display: flex;
}
#hitname1 {
    font-size: 25px;
    margin-left: 45px;
    margin-top: 10px;
}
#hitname2 {
    font-size: 25px;
    margin-left: 30px;
    margin-top: 10px;
}
#hitname3 {
    font-size: 25px;
    margin-left: 55px;
    margin-top: 10px;
}
#hitname4 {
    font-size: 25px;
    margin-left: 5px;
    margin-top: 10px;
}
#hitname5 {
    font-size: 25px;
    margin-left: 38px;
    margin-top: 5px;
}
#hit1 {
    margin-left: 150px;
}
#hit2 {
    margin-left: 50px;
}

#hit3 {
    margin-left: 50px;
}

#hit4 {
    margin-left: 50px;
}

#hit5 {
    margin-left: 50px;
}
#hitpic5 {
    margin-top: -5px;
}
.card {
    display: grid;
    grid-template-columns: auto  auto  auto  auto;
    grid-gap: 1px;
  }
  .card h2 {
    color: #000;
    position: absolute;
    bottom: 15px;
    left: 50px;
    font-size: 1.2rem;
    letter-spacing: 2px;
  }
  .card .box1,
  .box2,
  .box3,
  .box4 {
    width: 300px;
    height: 350px;
    background-position: center;
    background-size: cover;
    position: relative;
    border-radius: 20px;
    cursor: pointer;
  }
  .box1 {
    background-image: url("https://thitiyapuylee26.files.wordpress.com/2014/02/white_temple_in_thailand.jpeg");
  }
  .box2 {
    background-image: url("https://cms.dmpcdn.com/travel/2018/04/02/ec8c6342-582a-46c5-8d84-c8a5401c09e5.jpg");
  }
  .box3 {
    background-image: url("https://www.scb.co.th/content/dam/scb/personal-banking/stories-tips/traveling-thailand/traveling-thailand5.jpg");
  }
  .box4 {
    background-image: url("http://thailand.novabizz.com/%E0%B8%9E%E0%B8%B1%E0%B8%97%E0%B8%A5%E0%B8%B8%E0%B8%87/img/patthalung.jpg");
  }
  .card div {
    transition: 0.5s;
  }
  .card div:hover {
    transition: 0.3s;
    transform: translateY(-10px);
    box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
  }
  #inkpha {
    margin-top: 50px;
    margin-left: 130px;
  }
  .box2 {
    margin-left: 30px;
  }
  .box3 {
    margin-left: 30px;
  }
  .box4 {
    margin-left: 30px;
  }
  #name_part {
    display: flex;
    font-size: 30px;
    margin-top: 30px;
  }
  #North{
    margin-left: 210px;
  }
  #Mid{
    margin-left: 230px;
  }
  #South{
    margin-left: 225px;
  }
  #East{
    margin-left: 210px;
  }
  #cookie{
    display: flex;
    margin-top: 100px;
    margin-left: 30px;
}
#cookiee{
    color: rgb(50, 45, 45);
}
#cookieee{
    margin-left: 30px;
    color: rgb(50, 45, 45);
}

#last{
    margin-left: 27px;
    margin-right: 20px;
    background-color: rgb(70, 65, 65);
    margin-top: 7px;
    height: 2px;
}

#co{
    margin-bottom: 20px;
    margin-left: 30px;
    margin-top: 8px;
    display: flex;
}

#cooo{
    margin-top: -2px;
    margin-left: 5px;
    color: rgb(50, 45, 45);
}
#likename5 {
    margin-top: 5px;
    font-size: 25px;
    margin-left: 40px;
}
#likepic5 {
    margin-top: 5px;
}
#likename1 {
    margin-top: 10px;
    font-size: 25px;
    margin-left: 35px;
}
#likename2 {
    margin-top: 10px;
    font-size: 25px;
    margin-left: 35px;
}
#likename3 {
    margin-top: 10px;
    font-size: 25px;
    margin-left: 35px;
}
#likename4 {
    margin-top: 10px;
    font-size: 25px;
    margin-left: 35px;
}