@media screen and (max-width: 9999px) {
  .topLanding {
    height: 450px;
  }
  #mainImg {
    max-width: 1000px;
  }
  .topLandingRight {
    background-size: 419px 621px;
    background-position: 110px -56px;
  }
}

@media screen and (max-width: 1366px) {
  .topLandingRight {
    background-size: 419px 621px;
    background-position: 35px -56px;
  }
}

@media screen and (max-width: 1132px) {
  .topMenu ul li {
    margin-right: 10px;
  }
  #mainImg {
    width: 85%;
  }
  .topLanding {
    /* height: 650px; */
  }
  .topLandingLeft {
    background-size: 419px 621px;
    background-position: -203px -56px;
  }
  .topLandingRight {
    background-size: 419px 621px;
    background-position: -10px -56px;
  }
  .circleContainer {
    width: 95%;
  }
  .circleLine {
    width: 950px !important;
  }
}

@media screen and (max-width: 1024px) {
  .mobileMark {
    display: block;
  }
}

@media screen and (max-width: 768px) {
  .topMenu ul li {
    margin-right: 5px;
  }
  .topMenu ul {
    margin-right: 15px;
  }
  #langLi {
    margin-right: -10px;
  }
  #firstLi {
    width: 28px;
    height: 28px;
    background-size: 28px 28px;
  }
  .topMenu ul li:nth-of-type(2),
  .topMenu ul li:nth-of-type(3),
  .topMenu ul li:nth-of-type(4) {
    width: 100px;
    height: 22px;
    background-size: 100px 22px;
  }
  #logo {
    height: 80px;
  }
  #logoDiv {
    /* flex: 0 0 100%; */
    justify-content: start;
  }
  #menuDiv {
    /* flex: 0 0 100%; */
    justify-content: flex-end;
  }
  .topLanding {
    height: 220px !important;
  }
  .topLandingLeft {
    display: none;
  }
  .topLandingRight {
    display: none;
  }
  .topLandingCenter {
    width: 100%;
  }
  #clickEnter {
    width: 250px !important;
    background-size: 250px 51px;
  }
  #mainImg {
    top: 150px;
  }
  .text1 {
    font-size: 28px;
  }
  .four {
    height: 500px;
  }
  .mobileMarkLeft {
    width: 100%;
  }
  .mobileMarkRight {
    width: 100%;
  }
  #popupEntry {
    padding-top: 10px;
  }
  #popupEntry .modalTitle {
    padding-top: 10px;
  }
  .mobileMarkLeft div {
    padding-bottom: 0px;
  }
  .circleContainerLeft,
  .circleContainerRight {
    display: block;
    width: 8%;
  }
  .circleContainerLeft {
    text-align: left;
    display: flex;
    align-items: center;
    height: 120px;
    justify-content: flex-start;
  }
  .circleContainerRight {
    text-align: right;
    display: flex;
    align-items: center;
    height: 120px;
    justify-content: flex-end;
  }
  .circleLineContainer {
    width: 84% !important;
  }
  .generalContainter {
    width: 90%;
  }
  .imageModalContent {
    width: 100%;
  }
  #img3024,
  #img3062,
  #img3057,
  #img3039,
  #img3004,
  #img3060,
  #img3061,
  #img3043,
  #img3056,
  #img3055,
  #img3054,
  #img3051,
  #img3050,
  #img3063,
  #img3068,
  #img3069,
  #img3049,
  #img3048,
  #img3047,
  #img3044 {
    width: 100% !important;
  }
  #caption3024,
  #caption3062,
  #caption3057,
  #caption3039,
  #caption3004,
  #caption3060,
  #caption3061,
  #caption3043,
  #caption3056,
  #caption3055,
  #caption3054,
  #caption3051,
  #caption3050,
  #caption3063,
  #caption3068,
  #caption3069,
  #caption3049,
  #caption3048,
  #caption3047,
  #caption3044 {
    width: 100% !important;
  }
  .threeBtn {
    padding-top: 30px;
    height: auto !important;
  }
  #imgQuestion {
    width: 98% !important;
  }
  .mobileMark {
    display: block;
  }
  .mobileMark {
    display: block;
  }
  #popupEntry .modal-content {
    height: 90% !important;
  }
  #popupEntry .modal-content .modalContent {
    height: 90% !important;
  }
  #popupEntry .modal-content .modalContent .scrollDiv {
    height: 80% !important;
  }
  /* .figure {
    width: 90% !important;
  } */
  .timeTunnelHeader {
    font-size: 48px;
  }
  #fixheader1 {
    font-size: 45px;
  }
  #fixheader2 {
    font-size: 40px;
  }
}

@media screen and (max-width: 767px) {
  .four1,
  .four2,
  .four3,
  .four4 {
    background-size: 130px 130px;
    width: 130px;
    height: 130px;
  }
  .four1Div,
  .four2Div,
  .four3Div,
  .four4Div {
    font-size: 14px;
    margin-bottom: 35px;
    justify-content: center;
  }
  .intro .introInside .title {
    font-size: 40px;
  }
  .fourTitle {
    font-size: 30px;
  }
  .desktop {
    display: none;
  }
  .mobile {
    display: flex;
  }
  .mobileBoxLink {
    margin-top: 0px !important;
    padding: 5px !important;
    font-size: 16px !important;
  }
  .boxLink {
    width: auto;
  }
  .twoButton {
    display: block !important;
  }
  #basicLawLink {
    display: block !important;
    width: 100% !important;
  }
  #gameLink {
    display: block !important;
    width: 100% !important;
  }
  #basicLawLink .para {
    width: 100% !important;
  }
  #gameLink .para {
    width: 100% !important;
  }
  #timeLineDesktop {
    display: none;
  }
  #timeLineIpad1,
  #timeLineIpad2 {
    display: block !important;
  }
}

@media screen and (max-width: 411px) {
  .topLanding {
    height: 180px !important;
  }
  #timeLineDesktop {
    display: none;
  }
  #timeLineIpad1,
  #timeLineIpad2 {
    display: none !important;
  }
  #timeLineM1,
  #timeLineM2,
  #timeLineM3 {
    display: block !important;
  }
}

/* @media screen and (min-width: 320px) and (max-width: 469px) {
    .circleLineContainer {
        width: 70% !important;
        padding-left: 10px;
    }
} */

@media screen and (max-width: 375px) {
  .topLanding {
    height: 180px !important;
  }
}

@media screen and (max-width: 374px) {
  .topLanding {
    height: 180px !important;
  }
  .footer {
    display: none;
  }
  .footerM {
    display: block;
  }
}

@media screen and (max-width: 320px) {
  .topMenu ul li {
    margin-right: 5px;
  }
  .topMenu ul li:nth-of-type(2),
  .topMenu ul li:nth-of-type(3),
  .topMenu ul li:nth-of-type(4) {
    width: 91px;
    height: 20px;
    background-size: 91px 20px;
  }
  .topLanding {
    height: 150px !important;
  }
  #mainImg {
    top: 150px;
  }
  .threeBtn {
    padding-top: 30px;
    height: auto !important;
  }
}