/* Media queries for supported screen sizes */
@media only screen and (min-width: 962px) and (min-height: 601px) {
  /* header */
 #logo {
   width: 22.5em;
 }
 #credit {
   font-size: .75em;
   width: 33em;
 }
 #logo img {
   width: 18em;
 }  
 #menu-nav {
   max-width: 50%;
   top: 10px;
   background-color: #f5f0df;
   border-radius: 4px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
   position: absolute;
   height: 35px;
   right: 10px;
 }
 #navigation-bar ul {
   height: 40px;
 }
 #navigation-bar li {
   width: 30px;
   height: 30px;
 }
 #navigation-bar div {
   top: 0;
   padding-top: 3px;
   height: 30px;
   width: 30px;
   color: black;
   border: 1px transparent solid;
   text-decoration: none;
   text-align: center;
   border-radius: 50%;
   display: block;
   transition: 0.5s ease;
 }
 p{
   font-size: .6em;
 }
 #navigation-bar img {
   width: 20px;
 }
  /* tutorial */
  .maclean-box {
   letter-spacing: 0.01em;
   font-size: .68em;
   width: 28em;
   height: 2.5em;
   top: 0.625em;
   left: 31.5%;
   padding: 0.625em;
 }
 .icon-box {
   letter-spacing: 0.01em;
   font-size: .9em;
   width: 22.5em;
   height: 2em;
   top: 10%;
   right: 0.625em;
   padding-top: 0.625em;
 }
 .home-box {
   letter-spacing: 0.01em;
   font-size: .9em;
   width: 15em;
   height: 2.5em;
   bottom: 3vh;
   left: 17%;
   padding-top: 0.625em;
 }
 .main-box {
   letter-spacing: 0.01em;
   font-size: .95em;
   width: 90%;
   height: 67%;
   top: 17.5%;
   left: 4%;
   padding-top: 1em;
 }
 .start {
   letter-spacing: 0.01em;
   font-size: 2em;
   left: 40%;
   bottom: 1.5%;
   width: 5em;
   height: 1.5em;
 }
 .easy-move-home{
   width: 5em;
 }
 #scroll-fo-mo {
 font-size: 1em;
   width: 50%;
   height: 1em;
   margin-left: 25%;
 
   left: 0;
 }
 #st-box {
   width: 1em;
   height: 1em;
   float: left;
 }
 #nd-box {
 font-size: 1em;
 }
 #rd-box {
   float: left;
   width: 1em;
   height: 1em;
 }
 .image1 {
   transform: rotate(90deg);
   width: 1em;
   height: 1em;
 }
 
 .image3 {
   transform: rotate(90deg);
   width: 1em;
   height: 1em;
 }
 /* map-points */
 .circle {
   font-size: .8em;
   width: 10px;
   height: 10px;
   padding: 4px;
 }
 .red-circle {
   font-size: .8em;
   width: 10px;
   height: 10px;
   padding: 4px;
 }
 #point-1 {
  cursor: pointer;
  position: absolute;
  top: 42.5vh;
  left: 17vh;
}
#point-2 {
  cursor: pointer;
  position: absolute;
  top: 47vh;
  left: 25.5vh;
}
#point-3 {
  cursor: pointer;
  position: absolute;
  top: 51vh;
  left: 44.5vh;
}
#point-4 {
  position: absolute;
  top: 49vh;
  left: 65.5vh;
}
#point-5 {
  cursor: pointer;
  position: absolute;
  top: 63vh;
  left: 69.5vh;
}
#point-6 {
  position: absolute;
  top: 45vh;
  left: 79.5vh;
}
#point-7 {
  cursor: pointer;
  position: absolute;
  top: 28vh;
  left: 92vh;
}
#point-8 {
  position: absolute;
  top: 41vh;
  left: 95.5vh;
}
#point-9 {
  cursor: pointer;
  position: absolute;
  top: 59vh;
  left: 96.5vh;
}
#point-10 {
  cursor: pointer;
  position: absolute;
  top: 78vh;
  left: 93vh;
}
#point-11 {
  cursor: pointer;
  position: absolute;
  top: 83vh;
  left: 99vh;
}
#point-12 {
  position: absolute;
  top: 50.5vh;
  left: 127vh;
}
#point-13 {
  cursor: pointer;
  position: absolute;
  top: 28.5vh;
  left: 130vh;
}
#point-14 {
  position: absolute;
  top: 51vh;
  left: 154vh;
}
#point-15 {
  position: absolute;
  top: 61vh;
  left: 155.75vh;
}
#point-16 {
  cursor: pointer;
  position: absolute;
  top: 50vh;
  left: 179.25vh;
}
#point-17 {
  cursor: pointer;
  position: absolute;
  top: 28vh;
  left: 199vh;
}
#point-18 {
  cursor: pointer;
  position: absolute;
  top: 33vh;
  left: 506vh;
}
#point-19 {
  cursor: pointer;
  position: absolute;
  top: 66vh;
  left: 775.5vh;
}
#point-20 {
  cursor: pointer;
  position: absolute;
  top: 44.5vh;
  left: 778vh;
}
#point-21 {
  cursor: pointer;
  position: absolute;
  top: 54vh;
  left: 779vh;
}
#point-22 {
  position: absolute;
  top: 80vh;
  left: 796.5vh;
}
#point-23 {
  cursor: pointer;
  padding-right: 3px;
  padding-bottom: 3px;
  position: absolute;
  top: 56vh;
  left: 804vh;
}
#point-24 {
  cursor: pointer;
  position: absolute;
  top: 31vh;
  left: 1477vh;
}
#point-25 {
  cursor: pointer;
  position: absolute;
  top: 24vh;
  left: 1474vh;
}
#point-26 {
  cursor: pointer;
  position: absolute;
  top: 33.5vh;
  left: 1482.75vh;
}
#point-27 {
  cursor: pointer;
  position: absolute;
  top: 61vh;
  left: 1908vh;
}
#point-28 {
  cursor: pointer;
  position: absolute;
  top: 81vh;
  left: 1924vh;
}
#point-29 {
  cursor: pointer;
  position: absolute;
  top: 62vh;
  left: 1945vh;
}
#point-30 {
  cursor: pointer;
  position: absolute;
  top: 47vh;
  left: 2287.5vh;
}
#point-31 {
  cursor: pointer;
  position: absolute;
  top: 67vh;
  left: 2315vh;
}
#point-32 {
  cursor: pointer;
  position: absolute;
  top: 52.5vh;
  left: 2330vh;
}
 #point-1:after,
 #point-2:after,
 #point-3:after,
 #point-5:after,
 #point-7:after,
 #point-9:after,
 #point-10:after,
 #point-11:after,
 #point-13:after,
 #point-16:after,
 #point-17:after,
 #point-18:after,
 #point-19:after,
 #point-20:after,
 #point-21:after,
 #point-23:after,
 #point-24:after,
 #point-25:after,
 #point-26:after,
 #point-27:after,
 #point-28:after,
 #point-29:after,
 #point-30:after,
 #point-31:after,
 #point-32:after
  {
     height: 10px;
     width: max-content;
     font-size: .8em;
 }
 #point-4:after,
 #point-6:after,
 #point-8:after,
 #point-12:after,
 #point-14:after,
 #point-15:after,
 #point-22:after
 {
   height: max-content;
   width: max-content;
   font-size: .8em;
 }
 #title-font{
   font-size: 1em;
 }
 .old-summer-palace,
 .imperial-palace,
 .tsiyn-temple,
 .tong-jeo,
 .way-out,
 .yan-giyoo-travel-palace,
 .return,
 .date,
 .mt-panlung,
 .be-gian-travel-palace,
 .mt-pan,
 .yi-ci-temple,
 .horse-change,
 .wenshuan-spare-house-station,
 .shanhai-pass,
 .red-wall,
 .bei-jen-temple,
 .ilagri-mountain,
 .guang-niyeng-county,
 .tomb-of-hong-taiji,
 .mukden-palace,
 .tomb-of-nurhaci,
 .the-eternal-tombs,
 .hetu-ala,
 .conclusion {
   height: max-content;
   font-size: .8em;
   padding: 1em;
 }
 .old-summer-palace {
   width: max-content;
   top: -22vh;
 }
 .imperial-palace {
   width: 25em;
   top: 13vh;
 }
 .tsiyn-temple {
   height: 18em;
   width: 28em;
   top: -34vh;
 }
 .pt3-1 {
   width: 50%;
   height: 100%;
   float: left;
 }
 .pt3-img1{
   margin-left: 50%;
   height: max-content;
   height: 50%;
   width: 50%;
   font-size: 2.5em;
 }
 .pt3-img1 img{
   width: 1em;
   height: 1em;
 }
 .pt3-txt1{
   padding-top: 15%;
   width: 100%;
   height: 100%;
   font-size: .75em;
   float: right;
 }
 .pt3-txt2{
   position: absolute;
   text-align: center;
   bottom: 0;
   width: 95%;
   height: max-content;
 }
 .tsiyn-t-holder {
   width: 50%;
   height: 50%;
   float: right;
   font-size: .6em;
 }
 .tsiyn-t-holder img{
   width: 90%;
   height: 80%;
 }
 .tong-jeo {
   width: 25em;
   left: -25vh;
 }
 .way-out {
   width: 35em;
   top: -6vh;
   left: -80vh;
 }
 .yan-giyoo-travel-palace {
   width: 25em;
   top: -10vh;
   left: -65vh;
 }
 .return {
   width: 40em;
   top: -10vh;
   left: 10vh;
 }
 .date {
   width: 25em;
 
   top: -25vh;
   left: 10vh;
 }
 .mt-panlung {
   width: 35em;
   top: 10vh;
   left: 0vh;
 }
 #panlung-content div{
   width: 50%;
   height: max-content;
 }
 #panlung-content img{
   padding-left: 7.5%;
   width: 85%;
   height: auto;
 }
 #panlung-content a{
   margin-left: 35%;
 }
 .be-gian-travel-palace {
   width: 20em;
   top: 12.5vh;
   left: 7vh;
 }
 .mt-pan {
   width: 600px;
   height: 450px;
   top: 10vh;
   left: 5vh;
 }
 .img-mp1,
 .img-mp2{
   width: 15em;
   height: 20em;
 
 }
 .yi-ci-temple {
   width: 540px;
   height: 400px;
   top: 0vh;
   left: 25vh;
 }
 .horse-change {
   width: 25em;
   top: 5vh;
   left: -40vh;
 }
 .wenshuan-spare-house-station {
   width: 20em;
   top: -30vh;
   left: -55vh;
 }
 #point-21{
     left: 785vh;
 }
 .shanhai-pass {
   width: 30em;
   top: -38vh;
   left: 30vh;
 }
 #shanhai-content div{
   width: 50%;
 }
 .img-sc1{
   width: 15em;
   height: 15em;
 }
 .red-wall {
   width: 20em;
   top: 10vh;
   left: 7vh;
 }
 #point-24{
     left: 1464vh;
 }
 .bei-jen-temple {
   width: 45em;
   height: 36.5em;
   top: -18vh;
   left: -110vh;
 }
 .bjt-txt3{
   width: 90%;
   bottom:1em;
 }
 .ilagri-mountain {
   width: 25em;
 
   top: -2vh;
   left: -65vh;
 }
 .guang-niyeng-county {
   width: 25em;
   top: -15vh;
   left: 29vh;
 }
 .tomb-of-hong-taiji {
   width: 20em;
   top: -30vh;
   left: -30vh;
 }
 .mukden-palace {
   width: 35em;
   top: -55vh;
   left: -95vh;
 }
 .img-mukenp1,
 .img-mukenp2{
   width: 15em;
   height: 14em;
 
 }
 .tomb-of-nurhaci {
   width: 20em;
   top: -28vh;
   left: 5vh;
 }
 .the-eternal-tombs {
   width: 40em;
   top: -30vh;
   left: -50vh;
 }
 .hetu-ala {
   width: 25em;
   top: -5vh;
   left: -70vh;
 }
 .conclusion {
   width: 27em;
   top: 5vh;
   left: -12vh;
 }
 #conclusion-content {
   height: 8em;
 }
 /* default */
 .title {
   letter-spacing: 0.01em;
   font-size: 1.4em;
   width: 90%;
   left: 5%;
   top: 30%;
   text-align: center;
 }
 .history, .begin{
   font-size: 2em;
 }
 /* history */
 #arrow-home {
   width: 7em;
   height: 2.5em;
   bottom: 4vh;
   left: 2.5%;
 }
 #lft-arrow1 {
   height: 1.5em;
   width: 2.5em;
 }
 #txt-home {
   padding-top: 0.1em;
   padding-left: 2em;
   height: 2.5em;
   width: 2.5em;
   font-size: 1.5em;
 }
 #history-title {
   height: 10%;
   margin-top: 5%;
 }
 #h-title {
   font-size: 3.5em;
 }
 .outer {
   height: 15%;
   margin-top: 17%;
 }
 .inner {
   padding-left: 0.5%;
   padding-right: 0.5%;
 }
 #mapmaking,
 #the-manchus,
 #the-title,
 #eastern-tours {
   font-size: 1em;
   width: 12em;
   height: 2.5em;
 }
 .h-content-title {
   font-size: 1.8em;
   margin-top: 25%;
 }
 .h-content-txt {
   font-size: 1.2em;
   margin-top: 32.5%;
 }
 .modern-map{
   bottom: 5vh;
 }
 /* mapmaking */
 #history-title {
   width: 100%;
   height: 10em;
   margin-top: 7%;
 }
 #lft-arrow {
   padding-top: 0.9em;
   height: 1.5em;
   width: 2.5em;
 }
 #m-title{
   height: 22%;
   margin-top: 8%;  
 }
 #map-mking-title {
   font-size: 3.5em;
 }
 .content-mp-mking {
   height: 60%;
   margin-top: 25%;
   left: 5%;
   font-size: 1.5em;
 }
 /* the manchu */
 #manchu-title {
   font-size: 3.5em;
 }
 .manchu-content {
   left: 0%;
   position: absolute;
   text-align: center;
   height: 60%;
   margin-top: 27.5%;
   left: 5%;
   font-size: 1.3em;
 }
 #h-manchu {
   width: 90%;
 }
 #m-images {
   max-width: 90%;
 }
 #img-3 {
   float: left;
   width: 50%;
 }
 #img-3 img,
 #img-4 img {
   width: 15em;
   height: 20em;
 }
 #img-4 {
   float: right;
   width: 50%;
 }
 .portrait-of-manchu {
   margin-left: 0%;
   text-align: center;
   width: 100%;
   font-size: 0.4em;
 }
 .nurhaci-the-first {
   margin-left: 0%;
   text-align: center;
   width: 100%;
   font-size: 0.4em;
 }
 /* title */
 #t-title {
   font-size: 3.5em;
 }
 .content-title {
   width: 90%;
   height: 80%;
   margin-top: 25%;
   padding-bottom: 2.5%;
   margin-left: 5%;
   font-size: 1.5em;
 }
 .title-map {
   width: 17em;
   height: 15em;
   bottom: 40%;
 }
 .holder1 {
   width: 18em;
   height: 19em;
 }
 /* easter-tours */
 #eastern-tours-title {
   font-size: 3.5em;
 }
 .eastern-tours-content {
   left: 0%;
   height: 60%;
   margin-top: 25%;
   width: 90%;
   margin-left: 5%;
   font-size: 1.4em;
   margin-bottom: 5%;
 }
 #h-eastern-tours {
   width: 100%;
 }
 #img-2 {
   width: 50%;
 }
 #img-1{
   width: 50%;
 }
 #image1,
 #image2 {
   margin-left: 5%;
   width: 90%;
   height: 90%;
   padding: 0;
 }
 
 .the-qianlong-emperor,
 .empress-xiaoxian {
   width: 80%;
   margin-left: 10%;
   text-align: center;
   font-size: 0.4em;
 }
 
 /* modern-map */
 #modern-rt-title {
   left: 0%;
   width: 100%;
   height: 9em;
   margin-top: 6%;
 }
 #rt-title {
   font-size: 3.5em;
 }
 #rt-content {
   margin-top: 22%;
   left: 15%;
   width: 70%;
 }
 #rt-content img {
   width: 100%;
   height: 80%;
 }
 #src-lnk {
   width: 20%;
   bottom: 3vh;
   left: 40%;
 }
 }
@media only screen and (min-width: 1024px) and (min-height: 768px){
  /* header */
 #logo {
   width: 22.5em;
 }
 #credit {
   font-size: .9em;
   width: 33em;
 }
 #logo img {
   width: 18em;
 }  
 #menu-nav {
   max-width: 50%;
   top: 10px;
   background-color: #f5f0df;
   border-radius: 4px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
   position: absolute;
   height: 35px;
   right: 10px;
 }
 #navigation-bar ul {
   height: 40px;
 }
 #navigation-bar li {
   width: 30px;
   height: 30px;
 }
 #navigation-bar div {
   top: 0;
   padding-top: 3px;
   height: 30px;
   width: 30px;
   color: black;
   border: 1px transparent solid;
   text-decoration: none;
   text-align: center;
   border-radius: 50%;
   display: block;
   transition: 0.5s ease;
 }
 p{
   font-size: .6em;
 }
 #navigation-bar img {
   width: 20px;
 }
  /* tutorial */
  .maclean-box {
   letter-spacing: 0.01em;
   font-size: .9em;
   width: 28em;
   height: 2.5m;
   top: 1.5em;
   left: 31.5%;
   padding: 0.625em;
 }
 .icon-box {
   letter-spacing: 0.01em;
   font-size: .9em;
   width: 22.5em;
   height: 2em;
   top: 11%;
   right: 0.625em;
   padding-top: 0.625em;
 }
 .home-box {
   letter-spacing: 0.01em;
   font-size: .8em;
   width: 15em;
   height: 2.5em;
   bottom: 3vh;
   left: 17%;
   padding-top: 0.625em;
 }
 .main-box {
   letter-spacing: 0.01em;
   font-size: 1.18em;
   width: 85%;
   height: 67%;
   top: 17.5%;
   left: 7%;
   padding-top: 1em;
 }
 .start {
   letter-spacing: 0.01em;
   font-size: 2em;
   left: 40%;
   bottom: 1.5%;
   width: 5em;
   height: 1.5em;
 }
 .easy-move-home{
   width: 5em;
 }
 #scroll-fo-mo {
 font-size: 1em;
   width: 50%;
   height: 1em;
   margin-left: 25%;
 
   left: 0;
 }
 #st-box {
   width: 1em;
   height: 1em;
   float: left;
 }
 #nd-box {
 font-size: 1em;
 }
 #rd-box {
   float: left;
   width: 1em;
   height: 1em;
 }
 .image1 {
   transform: rotate(90deg);
   width: 1em;
   height: 1em;
 }
 
 .image3 {
   transform: rotate(90deg);
   width: 1em;
   height: 1em;
 }
 /* map-points */
 .circle {
   font-size: .8em;
   width: 10px;
   height: 10px;
   padding: 4px;
 }
 .red-circle {
   font-size: .8em;
   width: 10px;
   height: 10px;
   padding: 4px;
 }
 #point-1:after,
 #point-2:after,
 #point-3:after,
 #point-5:after,
 #point-7:after,
 #point-9:after,
 #point-10:after,
 #point-11:after,
 #point-13:after,
 #point-16:after,
 #point-17:after,
 #point-18:after,
 #point-19:after,
 #point-20:after,
 #point-21:after,
 #point-23:after,
 #point-24:after,
 #point-25:after,
 #point-26:after,
 #point-27:after,
 #point-28:after,
 #point-29:after,
 #point-30:after,
 #point-31:after,
 #point-32:after
  {
     height: 10px;
     width: max-content;
     font-size: .8em;
 }
 #point-4:after,
 #point-6:after,
 #point-8:after,
 #point-12:after,
 #point-14:after,
 #point-15:after,
 #point-22:after
 {
   height: max-content;
   width: max-content;
   font-size: .8em;
 }
 #title-font{
   font-size: 1em;
 }
 .old-summer-palace,
 .imperial-palace,
 .tsiyn-temple,
 .tong-jeo,
 .way-out,
 .yan-giyoo-travel-palace,
 .return,
 .date,
 .mt-panlung,
 .be-gian-travel-palace,
 .mt-pan,
 .yi-ci-temple,
 .horse-change,
 .wenshuan-spare-house-station,
 .shanhai-pass,
 .red-wall,
 .bei-jen-temple,
 .ilagri-mountain,
 .guang-niyeng-county,
 .tomb-of-hong-taiji,
 .mukden-palace,
 .tomb-of-nurhaci,
 .the-eternal-tombs,
 .hetu-ala,
 .conclusion {
   height: max-content;
   font-size: .8em;
   padding: 1em;
 }
 .old-summer-palace {
   width: max-content;
   top: -22vh;
 }
 .imperial-palace {
   width: 25em;
   top: 13vh;
 }
 .tsiyn-temple {
   height: 18em;
   width: 28em;
   top: -34vh;
 }
 .pt3-1 {
   width: 50%;
   height: 100%;
   float: left;
 }
 .pt3-img1{
   margin-left: 50%;
   height: max-content;
   height: 50%;
   width: 25%;
   font-size: 2.5em;
 }
 .pt3-img1 img{
   width: 1em;
   height: 1em;
 }
 .pt3-txt1{
   padding-top: 15%;
   width: 100%;
   height: 100%;
   font-size: .75em;
   float: right;
 }
 .pt3-txt2{
   position: absolute;
   text-align: center;
   bottom: 0;
   width: 95%;
   height: max-content;
 }
 .tsiyn-t-holder {
   width: 50%;
   height: 50%;
   float: right;
   font-size: .6em;
 }
 .tsiyn-t-holder img{
   width: 90%;
   height: 80%;
 }
 .tong-jeo {
   width: 25em;
   left: -25vh;
 }
 .way-out {
   width: 35em;
   top: -6vh;
   left: -80vh;
 }
 .yan-giyoo-travel-palace {
   width: 25em;
   top: -10vh;
   left: -65vh;
 }
 .return {
   width: 40em;
   top: -10vh;
   left: 10vh;
 }
 .date {
   width: 25em;
 
   top: -25vh;
   left: 10vh;
 }
 .mt-panlung {
   width: 35em;
   top: 10vh;
   left: 0vh;
 }
 #panlung-content div{
   width: 50%;
   height: max-content;
 }
 #panlung-content img{
   padding-left: 7.5%;
   width: 85%;
   height: auto;
 }
 #panlung-content a{
   margin-left: 35%;
 }
 .be-gian-travel-palace {
   width: 20em;
   top: 12.5vh;
   left: 7vh;
 }
 #point-17{
   top: 26vh;
   left: 199vh;
 }
 .mt-pan {
   width: 600px;
   height: 450px;
   top: 10vh;
   left: 5vh;
 }
 .img-mp1,
 .img-mp2{
   width: 15em;
   height: 20em;
 
 }
 .yi-ci-temple {
   width: 540px;
   height: 400px;
   top: 0vh;
   left: 25vh;
 }
 .horse-change {
   width: 25em;
   top: 5vh;
   left: -40vh;
 }
 .wenshuan-spare-house-station {
   width: 20em;
   top: -30vh;
   left: -55vh;
 }
 #point-21{
     left: 785vh;
 }
 .shanhai-pass {
   width: 30em;
   top: -38vh;
   left: 30vh;
 }
 #shanhai-content div{
   width: 50%;
 }
 .img-sc1{
   width: 15em;
   height: 15em;
 }
 .red-wall {
   width: 20em;
   top: 10vh;
   left: 7vh;
 }
 #point-24{
     left: 1465vh;
 }
 .bei-jen-temple {
   width: 45em;
   height: 38.5em;
   top: -18vh;
   left: -110vh;
 }
 .bjt-txt3{
   width: 90%;
   bottom:1em;
 }
 .ilagri-mountain {
   width: 25em;
 
   top: -2vh;
   left: -65vh;
 }
 .guang-niyeng-county {
   width: 25em;
   top: -15vh;
   left: 29vh;
 }
 .tomb-of-hong-taiji {
   width: 20em;
   top: -30vh;
   left: -30vh;
 }
 .mukden-palace {
   width: 35em;
   top: -55vh;
   left: -95vh;
 }
 .img-mukenp1,
 .img-mukenp2{
   width: 15em;
   height: 14em;
 
 }
 .tomb-of-nurhaci {
   width: 20em;
   top: -28vh;
   left: 5vh;
 }
 .the-eternal-tombs {
   width: 45em;
   top: -30vh;
   left: -50vh;
 }
 .hetu-ala {
   width: 25em;
   top: -5vh;
   left: -70vh;
 }
 .conclusion {
   width: 27em;
   top: 5vh;
   left: -12vh;
 }
 #conclusion-content {
   height: 8em;
 }
 /* default */
 .title {
   letter-spacing: 0.01em;
   font-size: 1.4em;
   width: 90%;
   left: 5%;
   top: 30%;
   text-align: center;
 }
 .history, .begin{
   font-size: 2em;
 }
 /* history */
 #arrow-home {
   width: 7em;
   height: 2.5em;
   bottom: 4vh;
   left: 2.5%;
 }
 #lft-arrow1 {
   height: 1.5em;
   width: 2.5em;
 }
 #txt-home {
   padding-top: 0.1em;
   padding-left: 2em;
   height: 2.5em;
   width: 2.5em;
   font-size: 1.5em;
 }
 #history-title {
   height: 10%;
   margin-top: 5%;
 }
 #h-title {
   font-size: 3.5em;
 }
 .outer {
   height: 15%;
   margin-top: 17%;
 }
 .inner {
   padding-left: 0.5%;
   padding-right: 0.5%;
 }
 #mapmaking,
 #the-manchus,
 #the-title,
 #eastern-tours {
   font-size: 1em;
   width: 12em;
   height: 2.5em;
 }
 .h-content-title {
   font-size: 2em;
   margin-top: 28%;
 }
 .h-content-txt {
   font-size: 1.5em;
   margin-top: 38%;
 }
 .modern-map{
   bottom: 5vh;
 }
 /* mapmaking */
 #history-title {
   width: 100%;
   height: 10em;
   margin-top: 7%;
 }
 #lft-arrow {
   padding-top: 0.9em;
   height: 1.5em;
   width: 2.5em;
 }
 #m-title{
   height: 22%;
   margin-top: 8%;  
 }
 #map-mking-title {
   font-size: 3.5em;
 }
 .content-mp-mking {
   height: 60%;
   margin-top: 25%;
   left: 5%;
   font-size: 1.5em;
 }
 /* the manchu */
 #manchu-title {
   font-size: 3.5em;
 }
 .manchu-content {
   left: 0%;
   position: absolute;
   text-align: center;
   height: 60%;
   margin-top: 27.5%;
   left: 5%;
   font-size: 1.3em;
 }
 #h-manchu {
   width: 90%;
 }
 #m-images {
   max-width: 90%;
 }
 #img-3 {
   float: left;
   width: 50%;
 }
 #img-3 img,
 #img-4 img {
   width: 15em;
   height: 20em;
 }
 #img-4 {
   float: right;
   width: 50%;
 }
 .portrait-of-manchu {
   margin-left: 0%;
   text-align: center;
   width: 100%;
   font-size: 0.5em;
 }
 .nurhaci-the-first {
   margin-left: 0%;
   text-align: center;
   width: 100%;
   font-size: 0.5em;
 }
 /* title */
 #t-title {
   font-size: 3.5em;
 }
 .content-title {
   width: 90%;
   height: 80%;
   margin-top: 25%;
   padding-bottom: 2.5%;
   margin-left: 5%;
   font-size: 1.5em;
 }
 .title-map {
   width: 17em;
   height: 15em;
   bottom: 40%;
 }
 .holder1 {
   width: 18em;
   height: 19em;
 }
 /* easter-tours */
 #eastern-tours-title {
   font-size: 3.5em;
 }
 .eastern-tours-content {
   left: 0%;
   height: 60%;
   margin-top: 25%;
   width: 90%;
   margin-left: 5%;
   font-size: 1.4em;
   margin-bottom: 5%;
 }
 #h-eastern-tours {
   width: 100%;
 }
 #img-2 {
   width: 50%;
 }
 #img-1{
   width: 50%;
 }
 #image1,
 #image2 {
   margin-left: 5%;
   width: 90%;
   height: 90%;
   padding: 0;
 }
 
 .the-qianlong-emperor,
 .empress-xiaoxian {
   width: 80%;
   margin-left: 10%;
   text-align: center;
   font-size: 0.4em;
 }
 
 /* modern-map */
 #modern-rt-title {
   left: 0%;
   width: 100%;
   height: 9em;
   margin-top: 6%;
 }
 #rt-title {
   font-size: 3.5em;
 }
 #rt-content {
   margin-top: 22%;
   left: 15%;
   width: 70%;
 }
 #rt-content img {
   width: 100%;
   height: 80%;
 }
 #src-lnk {
   width: 20%;
   bottom: 3vh;
   left: 40%;
 }
 }
@media only screen and (min-width: 1080px) and (min-height: 810px) {
  /* header */
  #top-header {
   width: 100%;
   height: 75px;
 }
 #logo {
   width: 25em;
 }
 #credit {
   font-size: .9em;
   width: 33em;
 }
 #logo img {
   width: 20em;
 }  
 #menu-nav {
   max-width: 60%;
   top: 10px;
   background-color: #f5f0df;
   border-radius: 4px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
   position: absolute;
   height: 40px;
   right: 10px;
 }
 #navigation-bar ul {
   height: 40px;
 }
 #navigation-bar li {
   width: 35px;
   height: 35px;
 }
 #navigation-bar div {
   top: 0;
   padding-top: 3px;
   height: 35px;
   width: 35px;
   color: black;
   border: 1px transparent solid;
   text-decoration: none;
   text-align: center;
   border-radius: 50%;
   display: block;
   transition: 0.5s ease;
 }
 p{
   font-size: .7em;
 }
 #navigation-bar img {
   width: 25px;
 }
  /* tutorial */
  .maclean-box {
   letter-spacing: 0.01em;
   font-size: .9em;
   width: 28em;
   height: 2.5em;
   top: 2em;
   left: 31.5%;
   padding: 0.625em;
 }
 .icon-box {
   letter-spacing: 0.01em;
   font-size: 1em;
   width: 22.5em;
   height: 2em;
   top: 11%;
   right: 0.625em;
   padding-top: 0.625em;
 }
 .home-box {
   letter-spacing: 0.01em;
   font-size: 1em;
   width: 15em;
   height: 2.5em;
   bottom: 3vh;
   left: 18%;
   padding-top: 0.625em;
 }
 .main-box {
   letter-spacing: 0.01em;
   font-size: 1.2em;
   width: 85%;
   height: 67%;
   top: 17.5%;
   left: 7%;
   padding-top: 1em;
 }
 .start {
   letter-spacing: 0.01em;
   font-size: 2em;
   left: 32.5%;
   bottom: 1.5%;
   width: 35%;
   height: 1.5em;
 }
 .easy-move-home{
   width: 5em;
 }
 /* map-points */
 .old-summer-palace {
   top: -22vh;
 }
 .imperial-palace {
   top: 17vh;
 }
 .tsiyn-temple {
   height: 20em;
   width: 28em;
   top: -38vh;
 }
 .pt3-1 {
   width: 50%;
   height: 100%;
   float: left;
 }
 .pt3-img1{
   left: 50%;
   height: max-content;
   height: 50%;
   width: 50%;
   font-size: 2.5em;
 }
 .pt3-img1 img{
   width: 1em;
   height: 1em;
 }
 .pt3-txt1{
   padding-top: 15%;
   width: 100%;
   height: 100%;
   font-size: .75em;
   float: right;
 }
 .pt3-txt2{
   position: absolute;
   text-align: center;
   bottom: 1em;
   width: 95%;
   height: 25%;
 }
 .tsiyn-t-holder {
   width: 50%;
   height: 50%;
   float: right;
   font-size: .6em;
 }
 .tsiyn-t-holder img{
   width: 90%;
   height: 80%;
 }
 .tong-jeo {
   left: -25vh;
 }
 .way-out {
   top: -11.5vh;
   left: -80vh;
 }
 .yan-giyoo-travel-palace {
   width: 500px;
   height: 290px;
   top: 5vh;
   left: 6vh;
 }
 .return {
   width: 640px;
   height: 220px;
   top: -10vh;
   left: 10vh;
 }
 .date {
   width: 540px;
   height: 230px;
   top: -15vh;
   left: 10vh;
 }
 .mt-panlung {
   width: 540px;
   height: 23em;
   top: 10vh;
   left: 0vh;
 }
 .be-gian-travel-palace {
   font-size: 18px;
   padding-left: 10px;
   padding-right: 10px;

   width: 540px;
   height: 200px;

   top: 12.5vh;
   left: 7vh;
 }
 #point-17{
   top: 26vh;
   left: 199vh;
 }
 .mt-pan {
   width: 600px;
   height: 450px;
   top: 10vh;
   left: 5vh;
 }
 .yi-ci-temple {
   width: 540px;
   height: 400px;
   top: 5vh;
   left: 15vh;
 }
 .horse-change {
   width: 390px;
   height: 160px;
   top: 5vh;
   left: -40vh;
 }
 .wenshuan-spare-house-station {
   width: 540px;
   height: 240px;
   top: -30vh;
   left: -55vh;
 }
 #point-21{
     left: 785vh;
 }
 .shanhai-pass {
   width: 588px;
   height: 23em;
   top: -38vh;
   left: 30vh;
 }
 .red-wall {
   width: 540px;
   height: 200px;
   top: 10vh;
   left: 7vh;
 }
 #point-24{
     left: 1468vh;
 }
 .bei-jen-temple {
   width: 750px;
   height: 550px;
   top: -15vh;
   left: -110vh;
 }
 .ilagri-mountain {
   width: 540px;
   height: 230px;
   top: -2vh;
   left: -65vh;
 }
 .guang-niyeng-county {
   width: 560px;
   height: 240px;
   top: -15vh;
   left: 29vh;
 }
 .tomb-of-hong-taiji {
   width: 400px;
   height: 160px;
   top: -30vh;
   left: -30vh;
 }
 .mukden-palace {
   width: 650px;
   height: 560px;
   top: -55vh;
   left: -95vh;
 }
 .tomb-of-nurhaci {
   width: 540px;
   height: 170px;
   top: -28vh;
   left: 5vh;
 }
 .the-eternal-tombs {
   width: 770px;
   height: 240px;
   top: -30vh;
   left: -50vh;
 }
 .hetu-ala {
   width: 510px;
   height: 13em;
   top: -5vh;
   left: -70vh;
 }
 .conclusion {
   font-size: 1em;
   width: 28.5em;
   height: 19em;
   top: 5vh;
   left: -12vh;
 }
 #conclusion-content {
   height: 12em;
 }
 /* default */
 .title {
   letter-spacing: 0.01em;
   font-size: 1.6em;
   width: 90%;
   left: 5%;
   top: 30%;
   text-align: center;
 }
 /* history */
 #arrow-home {
   width: 7em;
   height: 2.5em;
   bottom: 3vh;
   left: 2.5%;
 }
 #lft-arrow1 {
   height: 1.5em;
   width: 2.5em;
 }
 #txt-home {
   padding-top: 0.1em;
   padding-left: 2em;
   height: 2.5em;
   width: 2.5em;
   font-size: 1.5em;
 }
 #history-title {
   height: 10%;
   margin-top: 6%;
 }
 #h-title {
   font-size: 3.75em;
 }
 .outer {
   height: 15%;
   margin-top: 17%;
 }
 .inner {
   padding-left: 0.5%;
   padding-right: 0.5%;
 }
 #mapmaking,
 #the-manchus,
 #the-title,
 #eastern-tours {
   font-size: 1.2em;
   width: 12em;
   height: 2.5em;
 }
 .h-content-title {
   font-size: 2.1em;
   margin-top: 25%;
 }
 .h-content-txt {
   font-size: 1.6em;
   margin-top: 35%;
 }
 /* mapmaking */
 #history-title {
   width: 100%;
   height: 10em;
   margin-top: 7%;
 }
 #lft-arrow {
   padding-top: 0.9em;
   height: 1.5em;
   width: 2.5em;
 }
 #m-title{
   height: 15%;
   margin-top: 8%;  
 }
 #map-mking-title {
   font-size: 4.5em;
 }
 .content-mp-mking {
   height: 60%;
   margin-top: 20%;
   left: 5%;
   font-size: 1.5em;
 }
 /* the manchu */
 #manchu-title {
   font-size: 3.75em;
 }
 .manchu-content {
   left: 0%;
   position: absolute;
   text-align: center;
   height: 60%;
   margin-top: 25%;
   left: 5%;
   font-size: 1.5em;
 }
 #h-manchu {
   width: 90%;
 }
 #m-images {
   max-width: 90%;
 }
 #img-3 {
   float: left;
   width: 50%;
 }
 #img-3 img,
 #img-4 img {
   width: 15em;
   height: 20em;
 }
 #img-4 {
   float: right;
   width: 50%;
 }
 .portrait-of-manchu {
   margin-left: 0%;
   text-align: center;
   width: 100%;
   font-size: 0.4em;
 }
 .nurhaci-the-first {
   margin-left: 0%;
   text-align: center;
   width: 100%;
   font-size: 0.4em;
 }
 /* title */
 #t-title {
   font-size: 5em;
 }
 .content-title {
   width: 90%;
   height: 80%;
   margin-top: 25%;
   padding-bottom: 2.5%;
   margin-left: 5%;
   font-size: 1.5em;
 }
 .title-map {
   width: 17em;
   height: 15em;
   bottom: 40%;
 }
 .holder1 {
   width: 18em;
   height: 19em;
 }
 /* easter-tours */
 #eastern-tours-title {
   font-size: 4em;
 }
 .eastern-tours-content {
   left: 0%;
   height: 60%;
   margin-top: 20%;
   left: 5%;
   font-size: 1.5em;
   margin-bottom: 5%;
 }
 #h-eastern-tours {
   margin-bottom: 5%;
 }
 #h-eastern-tours {
   width: 90%;
   position: relative;
 }
 #img-1 {
   padding-top: 2.5%;
   float: left;
   top: 20vh;
   width: 50%;
 }
 #img-2 {
   float: right;
   width: 50%;
 }
 #image1,
 #image2 {
   padding-left: 10%;
   width: 80%;
   height: 80%;
 }
 .the-qianlong-emperor,
 .empress-xiaoxian {
   text-align: center;
   font-size: 0.5em;
 }
 /* modern-map */
 #modern-rt-title {
   left: 0%;
   width: 100%;
   height: 9em;
   margin-top: 6%;
 }
 #rt-title {
   font-size: 4em;
 }
 #rt-content {
   margin-top: 22%;
   left: 15%;
   width: 70%;
 }
 #rt-content img {
   width: 100%;
   height: 80%;
 }
 #src-lnk {
   width: 20%;
   bottom: 3vh;
   left: 40%;
 }
 }
@media only screen and (min-width: 1180px) and (min-height: 820px){
  /* header */
 #logo {
   width: 22.5em;
 }
 #credit {
   font-size: 1em;
   width: 33em;
 }
 #logo img {
   width: 18em;
 }  
 #menu-nav {
   max-width: 50%;
   top: 10px;
   background-color: #f5f0df;
   border-radius: 4px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
   position: absolute;
   height: 45px;
   right: 10px;
 }
 #navigation-bar ul {
   height: 50px;
 }
 #navigation-bar li {
   width: 40px;
   height: 40px;
 }
 #navigation-bar div {
   top: 0;
   padding-top: 3px;
   height: 40px;
   width: 40px;
   color: black;
   border: 1px transparent solid;
   text-decoration: none;
   text-align: center;
   border-radius: 50%;
   display: block;
   transition: 0.5s ease;
 }
 p{
   font-size: .8em;
 }
 #navigation-bar img {
   width: 30px;
 }
  /* tutorial */
  .maclean-box {
   letter-spacing: 0.01em;
   font-size: .9em;
   width: 28em;
   height: 2.5em;
   top: 0.625em;
   left: 28%;
   padding: 0.625em;
 }
 .icon-box {
   letter-spacing: 0.01em;
   font-size: 1em;
   width: 26em;
   height: 2em;
   top: 11%;
   right: 0.625em;
   padding-top: 0.625em;
 }
 .home-box {
   letter-spacing: 0.01em;
   font-size: .9em;
   width: 15em;
   height: 2.5em;
   bottom: 3vh;
   left: 17%;
   padding-top: 0.625em;
 }
 .main-box {
  letter-spacing: 0.01em;
  font-size: 1.3em;
  width: 85%;
  height: 67%;
  top: 17.5%;
  left: 7%;
  padding-top: 1em;
}
 .start {
   letter-spacing: 0.01em;
   font-size: 2em;
   left: 40%;
   bottom: 1.5%;
   width: 5em;
   height: 1.5em;
 }
 .easy-move-home{
   width: 5em;
 }
 #scroll-fo-mo {
 font-size: 1em;
   width: 50%;
   height: 1em;
   margin-left: 25%;
 
   left: 0;
 }
 #st-box {
   width: 1em;
   height: 1em;
   float: left;
 }
 #nd-box {
 font-size: 1em;
 }
 #rd-box {
   float: left;
   width: 1em;
   height: 1em;
 }
 .image1 {
   transform: rotate(90deg);
   width: 1em;
   height: 1em;
 }
 
 .image3 {
   transform: rotate(90deg);
   width: 1em;
   height: 1em;
 }
 /* map-points */
 .circle {
   font-size: .8em;
   width: 10px;
   height: 10px;
   padding: 4px;
 }
 .red-circle {
   font-size: .8em;
   width: 10px;
   height: 10px;
   padding: 4px;
 }
 #point-1:after,
 #point-2:after,
 #point-3:after,
 #point-5:after,
 #point-7:after,
 #point-9:after,
 #point-10:after,
 #point-11:after,
 #point-13:after,
 #point-16:after,
 #point-17:after,
 #point-18:after,
 #point-19:after,
 #point-20:after,
 #point-21:after,
 #point-23:after,
 #point-24:after,
 #point-25:after,
 #point-26:after,
 #point-27:after,
 #point-28:after,
 #point-29:after,
 #point-30:after,
 #point-31:after,
 #point-32:after
  {
     height: 10px;
     width: max-content;
     font-size: .8em;
 }
 #point-4:after,
 #point-6:after,
 #point-8:after,
 #point-12:after,
 #point-14:after,
 #point-15:after,
 #point-22:after
 {
   height: max-content;
   width: max-content;
   font-size: .8em;
 }
 #title-font{
   font-size: 1em;
 }
 .old-summer-palace,
 .imperial-palace,
 .tsiyn-temple,
 .tong-jeo,
 .way-out,
 .yan-giyoo-travel-palace,
 .return,
 .date,
 .mt-panlung,
 .be-gian-travel-palace,
 .mt-pan,
 .yi-ci-temple,
 .horse-change,
 .wenshuan-spare-house-station,
 .shanhai-pass,
 .red-wall,
 .bei-jen-temple,
 .ilagri-mountain,
 .guang-niyeng-county,
 .tomb-of-hong-taiji,
 .mukden-palace,
 .tomb-of-nurhaci,
 .the-eternal-tombs,
 .hetu-ala,
 .conclusion {
   height: max-content;
   font-size: .8em;
   padding: 1em;
 }
 .old-summer-palace {
   width: max-content;
   top: -22vh;
 }
 .imperial-palace {
   width: 25em;
   top: 13vh;
 }
 .tsiyn-temple {
   height: 18em;
   width: 28em;
   top: -34vh;
 }
 .pt3-1 {
   margin-top: 5%;
   width: 50%;
   height: 100%;
   float: left;
 }
 .pt3-img1{
  left: 50%;
  height: max-content;
  height: 50%;
  width: 50%;
  font-size: 2.5em;
}
.pt3-img1 img{
  width: 1em;
  height: 1em;
}
.pt3-txt1{
  padding-top: 15%;
  width: 100%;
  height: 100%;
  font-size: .75em;
  float: right;
}
 .pt3-txt2{
   position: absolute;
   text-align: center;
   bottom: 0;
   width: 95%;
   height: max-content;
 }
 .tsiyn-t-holder {
   width: 50%;
   height: 50%;
   float: right;
   font-size: .6em;
 }
 .tsiyn-t-holder img{
   width: 90%;
   height: 80%;
 }
 .tong-jeo {
   width: 25em;
   left: -25vh;
 }
 .way-out {
   width: 35em;
   top: -6vh;
   left: -80vh;
 }
 .yan-giyoo-travel-palace {
   width: 25em;
   top: -10vh;
   left: -65vh;
 }
 .return {
   width: 40em;
   top: -10vh;
   left: 10vh;
 }
 .date {
   width: 25em;
 
   top: -25vh;
   left: 10vh;
 }
 .mt-panlung {
   width: 35em;
   top: 10vh;
   left: 0vh;
 }
 #panlung-content div{
   width: 50%;
   height: max-content;
 }
 #panlung-content img{
   padding-left: 7.5%;
   width: 85%;
   height: auto;
 }
 #panlung-content a{
   margin-left: 35%;
 }
 .be-gian-travel-palace {
   width: 20em;
   top: 12.5vh;
   left: 7vh;
 }
 #point-17{
  top: 26vh;
  left: 199vh;
 }
 .mt-pan {
   width: 600px;
   height: 450px;
   top: 10vh;
   left: 5vh;
 }
 .img-mp1,
 .img-mp2{
   width: 15em;
   height: 20em;
 
 }
 .yi-ci-temple {
   width: 540px;
   height: 400px;
   top: 0vh;
   left: 25vh;
 }
 .horse-change {
   width: 25em;
   top: 5vh;
   left: -40vh;
 }
 .wenshuan-spare-house-station {
   width: 20em;
   top: -30vh;
   left: -55vh;
 }
 #point-21{
     left: 785vh;
 }
 .shanhai-pass {
   width: 30em;
   top: -38vh;
   left: 30vh;
 }
 #shanhai-content div{
   width: 50%;
 }
 .img-sc1{
   width: 15em;
   height: 15em;
 }
 .red-wall {
   width: 20em;
   top: 10vh;
   left: 7vh;
 }
 #point-24{
     left: 1464vh;
 }
 .bei-jen-temple {
   width: 45em;
   height: 38em;
   top: -18vh;
   left: -110vh;
 }
 .bjt-txt3{
   width: 90%;
   bottom:1em;
 }
 .ilagri-mountain {
   width: 25em;
 
   top: -2vh;
   left: -65vh;
 }
 .guang-niyeng-county {
   width: 25em;
   top: -15vh;
   left: 29vh;
 }
 .tomb-of-hong-taiji {
   width: 20em;
   top: -30vh;
   left: -30vh;
 }
 .mukden-palace {
   width: 35em;
   top: -55vh;
   left: -95vh;
 }
 .img-mukenp1,
 .img-mukenp2{
   width: 15em;
   height: 14em;
 
 }
 .tomb-of-nurhaci {
   width: 20em;
   top: -28vh;
   left: 5vh;
 }
 .the-eternal-tombs {
   width: 45em;
   top: -30vh;
   left: -50vh;
 }
 .hetu-ala {
   width: 25em;
   top: -5vh;
   left: -70vh;
 }
 .conclusion {
   width: 27em;
   top: 5vh;
   left: -12vh;
 }
 #conclusion-content {
   height: 8em;
 }
 /* default */
 .title {
   letter-spacing: 0.01em;
   font-size: 1.4em;
   width: 90%;
   left: 5%;
   top: 30%;
   text-align: center;
 }
 .history, .begin{
   font-size: 2em;
 }
 /* history */
 #arrow-home {
   width: 7em;
   height: 2.5em;
   bottom: 4vh;
   left: 2.5%;
 }
 #lft-arrow1 {
   height: 1.5em;
   width: 2.5em;
 }
 #txt-home {
   padding-top: 0.1em;
   padding-left: 2em;
   height: 2.5em;
   width: 2.5em;
   font-size: 1.5em;
 }
 #history-title {
   height: 10%;
   margin-top: 5%;
 }
 #h-title {
   font-size: 3.5em;
 }
 .outer {
   height: 15%;
   margin-top: 17%;
 }
 .inner {
   padding-left: 0.5%;
   padding-right: 0.5%;
 }
 #mapmaking,
 #the-manchus,
 #the-title,
 #eastern-tours {
   font-size: 1em;
   width: 12em;
   height: 2.5em;
 }
 .h-content-title {
   font-size: 2em;
   margin-top: 28%;
 }
 .h-content-txt {
   font-size: 1.5em;
   margin-top: 38%;
 }
 .modern-map{
   bottom: 5vh;
 }
 /* mapmaking */
 #history-title {
   width: 100%;
   height: 10em;
   margin-top: 7%;
 }
 #lft-arrow {
   padding-top: 0.9em;
   height: 1.5em;
   width: 2.5em;
 }
 #m-title{
   height: 22%;
   margin-top: 8%;  
 }
 #map-mking-title {
   font-size: 3.5em;
 }
 .content-mp-mking {
   height: 60%;
   margin-top: 25%;
   left: 5%;
   font-size: 1.5em;
 }
 /* the manchu */
 #manchu-title {
   font-size: 3.5em;
 }
 .manchu-content {
   left: 0%;
   position: absolute;
   text-align: center;
   height: 60%;
   margin-top: 27.5%;
   left: 5%;
   font-size: 1.3em;
 }
 #h-manchu {
   width: 90%;
 }
 #m-images {
   max-width: 90%;
 }
 #img-3 {
   float: left;
   width: 50%;
 }
 #img-3 img,
 #img-4 img {
   width: 15em;
   height: 20em;
 }
 #img-4 {
   float: right;
   width: 50%;
 }
 .portrait-of-manchu {
   margin-left: 0%;
   text-align: center;
   width: 100%;
   font-size: 0.5em;
 }
 .nurhaci-the-first {
   margin-left: 0%;
   text-align: center;
   width: 100%;
   font-size: 0.5em;
 }
 /* title */
 #t-title {
   font-size: 3.5em;
 }
 .content-title {
   width: 90%;
   height: 80%;
   margin-top: 25%;
   padding-bottom: 2.5%;
   margin-left: 5%;
   font-size: 1.5em;
 }
 .title-map {
   width: 17em;
   height: 15em;
   bottom: 40%;
 }
 .holder1 {
   width: 18em;
   height: 19em;
 }
 /* easter-tours */
 #eastern-tours-title {
   font-size: 3.5em;
 }
 .eastern-tours-content {
   left: 0%;
   height: 60%;
   margin-top: 25%;
   width: 90%;
   margin-left: 5%;
   font-size: 1.4em;
   margin-bottom: 5%;
 }
 #h-eastern-tours {
   width: 100%;
 }
 #img-2 {
   width: 50%;
 }
 #img-1{
   width: 50%;
 }
 #image1,
 #image2 {
   margin-left: 5%;
   width: 90%;
   height: 90%;
   padding: 0;
 }
 
 .the-qianlong-emperor,
 .empress-xiaoxian {
   width: 80%;
   margin-left: 10%;
   text-align: center;
   font-size: 0.4em;
 }
 
 /* modern-map */
 #modern-rt-title {
   left: 0%;
   width: 100%;
   height: 9em;
   margin-top: 6%;
 }
 #rt-title {
   font-size: 3.5em;
 }
 #rt-content {
   margin-top: 22%;
   left: 15%;
   width: 70%;
 }
 #rt-content img {
   width: 100%;
   height: 80%;
 }
 #src-lnk {
   width: 20%;
   bottom: 3vh;
   left: 40%;
 }
 }
@media only screen and (min-width: 1280px) and (min-height: 720px){
  /* header */
#logo {
 width: 22.5em;
}
#credit {
 font-size: 1em;
 width: 33em;
}
#logo img {
 width: 18em;
}  
#menu-nav {
 max-width: 50%;
 top: 10px;
 background-color: #f5f0df;
 border-radius: 4px;
 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
 position: absolute;
 height: 45px;
 right: 25px;
}
#navigation-bar ul {
 height: 50px;
}
#navigation-bar li {
 width: 40px;
 height: 40px;
}
#navigation-bar div {
 top: 0;
 padding-top: 3px;
 height: 40px;
 width: 40px;
 color: black;
 border: 1px transparent solid;
 text-decoration: none;
 text-align: center;
 border-radius: 50%;
 display: block;
 transition: 0.5s ease;
}
p{
 font-size: .8em;
}
#navigation-bar img {
 width: 30px;
}
/* tutorial */
.maclean-box {
 letter-spacing: 0.01em;
 font-size: .9em;
 width: 28em;
 height: 2.5em;
 top: 0.625em;
 left: 31.5%;
 padding: 0.625em;
}
.icon-box {
 letter-spacing: 0.01em;
 font-size: .9em;
 width: 22.5em;
 height: 2em;
 top: 11%;
 right: 0.625em;
 padding-top: 0.625em;
}
.home-box {
 letter-spacing: 0.01em;
 font-size: .9em;
 width: 15em;
 height: 2.5em;
 bottom: 3vh;
 left: 17%;
 padding-top: 0.625em;
}
.main-box {
 letter-spacing: 0.01em;
 font-size: 1.15em;
 width: 85%;
 height: 67%;
 top: 17.5%;
 left: 7%;
 padding-top: 1em;
}
.start {
 letter-spacing: 0.01em;
 font-size: 2em;
 left: 40%;
 bottom: 1.5%;
 width: 5em;
 height: 1.5em;
}
.easy-move-home{
 width: 5em;
}
#scroll-fo-mo {
font-size: 1em;
 width: 50%;
 height: 1em;
 margin-left: 25%;

 left: 0;
}
#st-box {
 width: 1em;
 height: 1em;
 float: left;
}
#nd-box {
font-size: 1em;
}
#rd-box {
 float: left;
 width: 1em;
 height: 1em;
}
.image1 {
 transform: rotate(90deg);
 width: 1em;
 height: 1em;
}

.image3 {
 transform: rotate(90deg);
 width: 1em;
 height: 1em;
}
/* map-points */
.circle {
 font-size: .8em;
 width: 10px;
 height: 10px;
 padding: 4px;
}
.red-circle {
 font-size: .8em;
 width: 10px;
 height: 10px;
 padding: 4px;
}
#point-1:after,
#point-2:after,
#point-3:after,
#point-5:after,
#point-7:after,
#point-9:after,
#point-10:after,
#point-11:after,
#point-13:after,
#point-16:after,
#point-17:after,
#point-18:after,
#point-19:after,
#point-20:after,
#point-21:after,
#point-23:after,
#point-24:after,
#point-25:after,
#point-26:after,
#point-27:after,
#point-28:after,
#point-29:after,
#point-30:after,
#point-31:after,
#point-32:after
{
   height: 10px;
   width: max-content;
   font-size: .8em;
}
#point-4:after,
#point-6:after,
#point-8:after,
#point-12:after,
#point-14:after,
#point-15:after,
#point-22:after
{
 height: max-content;
 width: max-content;
 font-size: .8em;
}
#title-font{
 font-size: 1em;
}
.old-summer-palace,
.imperial-palace,
.tsiyn-temple,
.tong-jeo,
.way-out,
.yan-giyoo-travel-palace,
.return,
.date,
.mt-panlung,
.be-gian-travel-palace,
.mt-pan,
.yi-ci-temple,
.horse-change,
.wenshuan-spare-house-station,
.shanhai-pass,
.red-wall,
.bei-jen-temple,
.ilagri-mountain,
.guang-niyeng-county,
.tomb-of-hong-taiji,
.mukden-palace,
.tomb-of-nurhaci,
.the-eternal-tombs,
.hetu-ala,
.conclusion {
 height: max-content;
 font-size: 1em;
 padding: 1em;
}
.old-summer-palace {
 width: max-content;
 top: -22vh;
}
.imperial-palace {
 width: 25em;
 top: 13vh;
}
.tsiyn-temple {
 height: 18em;
 width: 28em;
 top: -34vh;
}
.pt3-1 {
 margin-top: 5%;
 width: 50%;
 height: 100%;
 float: left;
}
.pt3-img1{
 left: 50%;
 height: max-content;
 height: 50%;
 width: 50%;
 font-size: 2.5em;
}
.pt3-img1 img{
 width: 1em;
 height: 1em;
}
.pt3-txt1{
 padding-top: 15%;
 width: 100%;
 height: 100%;
 font-size: .75em;
 float: right;
}
.pt3-txt2{
 position: absolute;
 text-align: center;
 bottom: 0;
 width: 95%;
 height: max-content;
}
.tsiyn-t-holder {
 width: 50%;
 height: 50%;
 float: right;
 font-size: .6em;
}
.tsiyn-t-holder img{
 width: 90%;
 height: 80%;
}
.tong-jeo {
 width: 25em;
 left: -25vh;
}
.way-out {
 width: 35em;
 top: -6vh;
 left: -80vh;
}
.yan-giyoo-travel-palace {
 width: 25em;
 top: -10vh;
 left: -65vh;
}
.return {
 width: 40em;
 top: -10vh;
 left: 10vh;
}
.date {
 width: 25em;

 top: -25vh;
 left: 10vh;
}
.mt-panlung {
 width: 35em;
 top: 10vh;
 left: 0vh;
}
#panlung-content div{
 width: 50%;
 height: max-content;
}
#panlung-content img{
 padding-left: 7.5%;
 width: 85%;
 height: auto;
}
#panlung-content a{
 margin-left: 35%;
}
.be-gian-travel-palace {
 width: 20em;
 top: 12.5vh;
 left: 7vh;
}
#point-17{
 top: 26vh;
 left: 199vh;
}
.mt-pan {
 width: 600px;
 height: 450px;
 top: 10vh;
 left: 5vh;
}
.img-mp1,
.img-mp2{
 width: 15em;
 height: 20em;

}
.yi-ci-temple {
 width: 540px;
 height: 400px;
 top: 0vh;
 left: 25vh;
}
.horse-change {
 width: 25em;
 top: 5vh;
 left: -40vh;
}
.wenshuan-spare-house-station {
 width: 20em;
 top: -30vh;
 left: -55vh;
}
#point-21{
   left: 785vh;
}
.shanhai-pass {
 width: 30em;
 top: -38vh;
 left: 30vh;
}
#shanhai-content div{
 width: 50%;
}
.img-sc1{
 width: 15em;
 height: 15em;
}
.red-wall {
 width: 20em;
 top: 10vh;
 left: 7vh;
}
#point-24{
   left: 1464vh;
}
.bei-jen-temple {
 width: 45em;
 height: 38.5em;
 top: -18vh;
 left: -110vh;
}
.bjt-txt3{
 width: 90%;
 bottom:1em;
}
.ilagri-mountain {
 width: 25em;

 top: -2vh;
 left: -65vh;
}
.guang-niyeng-county {
 width: 25em;
 top: -15vh;
 left: 29vh;
}
.tomb-of-hong-taiji {
 width: 20em;
 top: -30vh;
 left: -30vh;
}
.mukden-palace {
 width: 35em;
 top: -55vh;
 left: -95vh;
}
.img-mukenp1,
.img-mukenp2{
 width: 15em;
 height: 14em;

}
.tomb-of-nurhaci {
 width: 20em;
 top: -28vh;
 left: 5vh;
}
.the-eternal-tombs {
 width: 45em;
 top: -30vh;
 left: -50vh;
}
.hetu-ala {
 width: 25em;
 top: -5vh;
 left: -70vh;
}
.conclusion {
 width: 27em;
 top: 5vh;
 left: -12vh;
}
#conclusion-content {
 height: 8em;
}
/* default */
.title {
 letter-spacing: 0.01em;
 font-size: 1.4em;
 width: 90%;
 left: 5%;
 top: 30%;
 text-align: center;
}
.history, .begin{
 font-size: 2em;
}
/* history */
#arrow-home {
 width: 7em;
 height: 2.5em;
 bottom: 4vh;
 left: 2.5%;
}
#lft-arrow1 {
 height: 1.5em;
 width: 2.5em;
}
#txt-home {
 padding-top: 0.1em;
 padding-left: 2em;
 height: 2.5em;
 width: 2.5em;
 font-size: 1.5em;
}
#history-title {
 height: 10%;
 margin-top: 5%;
}
#h-title {
 font-size: 3.5em;
}
.outer {
 height: 15%;
 margin-top: 17%;
}
.inner {
 padding-left: 0.5%;
 padding-right: 0.5%;
}
#mapmaking,
#the-manchus,
#the-title,
#eastern-tours {
 font-size: 1.5em;
 width: 12em;
 height: 2.5em;
}
.h-content-title {
 font-size: 2em;
 margin-top: 24%;
}
.h-content-txt {
 font-size: 1.5em;
 margin-top: 32.5%;
}
.modern-map{
 bottom: 5vh;
}
/* mapmaking */
#history-title {
 width: 100%;
 height: 10em;
 margin-top: 7%;
}
#lft-arrow {
 padding-top: 0.9em;
 height: 1.5em;
 width: 2.5em;
}
#m-title{
 height: 22%;
 margin-top: 8%;  
}
#map-mking-title {
 font-size: 3.5em;
}
.content-mp-mking {
 height: 60%;
 margin-top: 25%;
 left: 5%;
 font-size: 1.5em;
}
/* the manchu */
#manchu-title {
 font-size: 3.5em;
}
.manchu-content {
 left: 0%;
 position: absolute;
 text-align: center;
 height: 60%;
 margin-top: 22.5%;
 left: 5%;
 font-size: 1.3em;
}
#h-manchu {
 width: 90%;
}
#m-images {
 max-width: 90%;
}
#img-3 {
 float: left;
 width: 50%;
}
#img-3 img,
#img-4 img {
 width: 15em;
 height: 20em;
}
#img-4 {
 float: right;
 width: 50%;
}
.portrait-of-manchu {
 margin-left: 0%;
 text-align: center;
 width: 100%;
 font-size: 0.5em;
}
.nurhaci-the-first {
 margin-left: 0%;
 text-align: center;
 width: 100%;
 font-size: 0.5em;
}
/* title */
#t-title {
 font-size: 3.5em;
}
.content-title {
 width: 90%;
 height: 80%;
 margin-top: 25%;
 padding-bottom: 2.5%;
 margin-left: 5%;
 font-size: 1.5em;
}
.title-map {
 width: 17em;
 height: 15em;
 bottom: 40%;
}
.holder1 {
 width: 18em;
 height: 19em;
}
/* easter-tours */
#eastern-tours-title {
 font-size: 3.5em;
}
.eastern-tours-content {
 left: 0%;
 height: 60%;
 margin-top: 25%;
 width: 90%;
 margin-left: 5%;
 font-size: 1.4em;
 margin-bottom: 5%;
}
#h-eastern-tours {
 width: 100%;
}
#img-2 {
 width: 50%;
}
#img-1{
 width: 50%;
}
#image1,
#image2 {
 margin-left: 5%;
 width: 90%;
 height: 90%;
 padding: 0;
}

.the-qianlong-emperor,
.empress-xiaoxian {
 width: 80%;
 margin-left: 10%;
 text-align: center;
 font-size: 0.4em;
}

/* modern-map */
#modern-rt-title {
 left: 0%;
 width: 100%;
 height: 9em;
 margin-top: 6%;
}
#rt-title {
 font-size: 3.5em;
}
#rt-content {
 margin-top: 18%;
 left: 15%;
 width: 70%;
}
#rt-content img {
 width: 100%;
 height: 80%;
}
#src-lnk {
 width: 20%;
 bottom: 3vh;
 left: 40%;
}
 }
@media only screen and (min-width: 1280px) and (min-height: 800px){
 /* header */
#logo {
 width: 22.5em;
}
#credit {
 font-size: 1em;
 width: 33em;
}
#logo img {
 width: 18em;
}  
#menu-nav {
 max-width: 50%;
 top: 10px;
 background-color: #f5f0df;
 border-radius: 4px;
 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
 position: absolute;
 height: 45px;
 right: 25px;
}
#navigation-bar ul {
 height: 50px;
}
#navigation-bar li {
 width: 40px;
 height: 40px;
}
#navigation-bar div {
 top: 0;
 padding-top: 3px;
 height: 40px;
 width: 40px;
 color: black;
 border: 1px transparent solid;
 text-decoration: none;
 text-align: center;
 border-radius: 50%;
 display: block;
 transition: 0.5s ease;
}
p{
 font-size: .8em;
}
#navigation-bar img {
 width: 30px;
}
/* tutorial */
.maclean-box {
 letter-spacing: 0.01em;
 font-size: .9em;
 width: 28em;
 height: 2.5em;
 top: 0.625em;
 left: 31.5%;
 padding: 0.625em;
}
.icon-box {
 letter-spacing: 0.01em;
 font-size: .9em;
 width: 22.5em;
 height: 2em;
 top: 11%;
 right: 0.625em;
 padding-top: 0.625em;
}
.home-box {
 letter-spacing: 0.01em;
 font-size: .9em;
 width: 15em;
 height: 2.5em;
 bottom: 3vh;
 left: 17%;
 padding-top: 0.625em;
}
.main-box {
 letter-spacing: 0.01em;
 font-size: 1.25em;
 width: 85%;
 height: 67%;
 top: 17.5%;
 left: 7%;
 padding-top: 1em;
}
.start {
 letter-spacing: 0.01em;
 font-size: 2em;
 left: 40%;
 bottom: 1.5%;
 width: 5em;
 height: 1.5em;
}
.easy-move-home{
 width: 5em;
}
#scroll-fo-mo {
font-size: 1em;
 width: 50%;
 height: 1em;
 margin-left: 25%;

 left: 0;
}
#st-box {
 width: 1em;
 height: 1em;
 float: left;
}
#nd-box {
font-size: 1em;
}
#rd-box {
 float: left;
 width: 1em;
 height: 1em;
}
.image1 {
 transform: rotate(90deg);
 width: 1em;
 height: 1em;
}

.image3 {
 transform: rotate(90deg);
 width: 1em;
 height: 1em;
}
/* map-points */
.circle {
 font-size: .8em;
 width: 10px;
 height: 10px;
 padding: 4px;
}
.red-circle {
 font-size: .8em;
 width: 10px;
 height: 10px;
 padding: 4px;
}
#point-1:after,
#point-2:after,
#point-3:after,
#point-5:after,
#point-7:after,
#point-9:after,
#point-10:after,
#point-11:after,
#point-13:after,
#point-16:after,
#point-17:after,
#point-18:after,
#point-19:after,
#point-20:after,
#point-21:after,
#point-23:after,
#point-24:after,
#point-25:after,
#point-26:after,
#point-27:after,
#point-28:after,
#point-29:after,
#point-30:after,
#point-31:after,
#point-32:after
{
   height: 10px;
   width: max-content;
   font-size: .8em;
}
#point-4:after,
#point-6:after,
#point-8:after,
#point-12:after,
#point-14:after,
#point-15:after,
#point-22:after
{
 height: max-content;
 width: max-content;
 font-size: .8em;
}
#title-font{
 font-size: 1em;
}
.old-summer-palace,
.imperial-palace,
.tsiyn-temple,
.tong-jeo,
.way-out,
.yan-giyoo-travel-palace,
.return,
.date,
.mt-panlung,
.be-gian-travel-palace,
.mt-pan,
.yi-ci-temple,
.horse-change,
.wenshuan-spare-house-station,
.shanhai-pass,
.red-wall,
.bei-jen-temple,
.ilagri-mountain,
.guang-niyeng-county,
.tomb-of-hong-taiji,
.mukden-palace,
.tomb-of-nurhaci,
.the-eternal-tombs,
.hetu-ala,
.conclusion {
 height: max-content;
 font-size: 1em;
 padding: 1em;
}
.old-summer-palace {
 width: max-content;
 top: -22vh;
}
.imperial-palace {
 width: 25em;
 top: 13vh;
}
.tsiyn-temple {
 height: 18em;
 width: 28em;
 top: -34vh;
}
.pt3-1 {
 margin-top: 5%;
 width: 50%;
 height: 100%;
 float: left;
}
.pt3-img1{
 left: 50%;
 height: max-content;
 height: 50%;
 width: 50%;
 font-size: 2.5em;
}
.pt3-img1 img{
 width: 1em;
 height: 1em;
}
.pt3-txt1{
 padding-top: 15%;
 width: 100%;
 height: 100%;
 font-size: .75em;
 float: right;
}
.pt3-txt2{
 position: absolute;
 text-align: center;
 bottom: 0;
 width: 95%;
 height: max-content;
}
.tsiyn-t-holder {
 width: 50%;
 height: 50%;
 float: right;
 font-size: .6em;
}
.tsiyn-t-holder img{
 width: 90%;
 height: 80%;
}
.tong-jeo {
 width: 25em;
 left: -25vh;
}
.way-out {
 width: 35em;
 top: -6vh;
 left: -80vh;
}
.yan-giyoo-travel-palace {
 width: 25em;
 top: -10vh;
 left: -65vh;
}
.return {
 width: 40em;
 top: -10vh;
 left: 10vh;
}
.date {
 width: 25em;

 top: -25vh;
 left: 10vh;
}
.mt-panlung {
 width: 35em;
 top: 10vh;
 left: 0vh;
}
#panlung-content div{
 width: 50%;
 height: max-content;
}
#panlung-content img{
 padding-left: 7.5%;
 width: 85%;
 height: auto;
}
#panlung-content a{
 margin-left: 35%;
}
.be-gian-travel-palace {
 width: 20em;
 top: 12.5vh;
 left: 7vh;
}
#point-17{
 top: 26vh;
 left: 199vh;
}
.mt-pan {
 width: 600px;
 height: 450px;
 top: 10vh;
 left: 5vh;
}
.img-mp1,
.img-mp2{
 width: 15em;
 height: 20em;

}
.yi-ci-temple {
 width: 540px;
 height: 400px;
 top: 0vh;
 left: 25vh;
}
.horse-change {
 width: 25em;
 top: 5vh;
 left: -40vh;
}
.wenshuan-spare-house-station {
 width: 20em;
 top: -30vh;
 left: -55vh;
}
#point-21{
   left: 785vh;
}
.shanhai-pass {
 width: 30em;
 top: -38vh;
 left: 30vh;
}
#shanhai-content div{
 width: 50%;
}
.img-sc1{
 width: 15em;
 height: 15em;
}
.red-wall {
 width: 20em;
 top: 10vh;
 left: 7vh;
}
#point-24{
   left: 1464vh;
}
.bei-jen-temple {
 width: 45em;
 height: 38.5em;
 top: -18vh;
 left: -110vh;
}
.bjt-txt3{
 width: 90%;
 bottom:1em;
}
.ilagri-mountain {
 width: 25em;

 top: -2vh;
 left: -65vh;
}
.guang-niyeng-county {
 width: 25em;
 top: -15vh;
 left: 29vh;
}
.tomb-of-hong-taiji {
 width: 20em;
 top: -30vh;
 left: -30vh;
}
.mukden-palace {
 width: 35em;
 top: -55vh;
 left: -95vh;
}
.img-mukenp1,
.img-mukenp2{
 width: 15em;
 height: 14em;

}
.tomb-of-nurhaci {
 width: 20em;
 top: -28vh;
 left: 5vh;
}
.the-eternal-tombs {
 width: 45em;
 top: -30vh;
 left: -50vh;
}
.hetu-ala {
 width: 25em;
 top: -5vh;
 left: -70vh;
}
.conclusion {
 width: 27em;
 top: 5vh;
 left: -12vh;
}
#conclusion-content {
 height: 8em;
}
/* default */
.title {
 letter-spacing: 0.01em;
 font-size: 1.4em;
 width: 90%;
 left: 5%;
 top: 30%;
 text-align: center;
}
.history, .begin{
 font-size: 2em;
}
/* history */
#arrow-home {
 width: 7em;
 height: 2.5em;
 bottom: 4vh;
 left: 2.5%;
}
#lft-arrow1 {
 height: 1.5em;
 width: 2.5em;
}
#txt-home {
 padding-top: 0.1em;
 padding-left: 2em;
 height: 2.5em;
 width: 2.5em;
 font-size: 1.5em;
}
#history-title {
 height: 10%;
 margin-top: 5%;
}
#h-title {
 font-size: 3.5em;
}
.outer {
 height: 15%;
 margin-top: 17%;
}
.inner {
 padding-left: 0.5%;
 padding-right: 0.5%;
}
#mapmaking,
#the-manchus,
#the-title,
#eastern-tours {
 font-size: 1em;
 width: 12em;
 height: 2.5em;
}
.h-content-title {
 font-size: 2em;
 margin-top: 28%;
}
.h-content-txt {
 font-size: 1.5em;
 margin-top: 38%;
}
.modern-map{
 bottom: 5vh;
}
/* mapmaking */
#history-title {
 width: 100%;
 height: 10em;
 margin-top: 7%;
}
#lft-arrow {
 padding-top: 0.9em;
 height: 1.5em;
 width: 2.5em;
}
#m-title{
 height: 22%;
 margin-top: 8%;  
}
#map-mking-title {
 font-size: 3.5em;
}
.content-mp-mking {
 height: 60%;
 margin-top: 25%;
 left: 5%;
 font-size: 1.5em;
}
/* the manchu */
#manchu-title {
 font-size: 3.5em;
}
.manchu-content {
 left: 0%;
 position: absolute;
 text-align: center;
 height: 60%;
 margin-top: 27.5%;
 left: 5%;
 font-size: 1.3em;
}
#h-manchu {
 width: 90%;
}
#m-images {
 max-width: 90%;
}
#img-3 {
 float: left;
 width: 50%;
}
#img-3 img,
#img-4 img {
 width: 15em;
 height: 20em;
}
#img-4 {
 float: right;
 width: 50%;
}
.portrait-of-manchu {
 margin-left: 0%;
 text-align: center;
 width: 100%;
 font-size: 0.5em;
}
.nurhaci-the-first {
 margin-left: 0%;
 text-align: center;
 width: 100%;
 font-size: 0.5em;
}
/* title */
#t-title {
 font-size: 3.5em;
}
.content-title {
 width: 90%;
 height: 80%;
 margin-top: 25%;
 padding-bottom: 2.5%;
 margin-left: 5%;
 font-size: 1.5em;
}
.title-map {
 width: 17em;
 height: 15em;
 bottom: 40%;
}
.holder1 {
 width: 18em;
 height: 19em;
}
/* easter-tours */
#eastern-tours-title {
 font-size: 3.5em;
}
.eastern-tours-content {
 left: 0%;
 height: 60%;
 margin-top: 25%;
 width: 90%;
 margin-left: 5%;
 font-size: 1.4em;
 margin-bottom: 5%;
}
#h-eastern-tours {
 width: 100%;
}
#img-2 {
 width: 50%;
}
#img-1{
 width: 50%;
}
#image1,
#image2 {
 margin-left: 5%;
 width: 90%;
 height: 90%;
 padding: 0;
}

.the-qianlong-emperor,
.empress-xiaoxian {
 width: 80%;
 margin-left: 10%;
 text-align: center;
 font-size: 0.4em;
}

/* modern-map */
#modern-rt-title {
 left: 0%;
 width: 100%;
 height: 9em;
 margin-top: 6%;
}
#rt-title {
 font-size: 3.5em;
}
#rt-content {
 margin-top: 22%;
 left: 15%;
 width: 70%;
}
#rt-content img {
 width: 100%;
 height: 80%;
}
#src-lnk {
 width: 20%;
 bottom: 3vh;
 left: 40%;
}
 }
@media only screen and (min-width: 1366px) and (min-height: 768px) {
  /* header */
  #top-header {
    width: 100%;
    height: 10%;
  }
  #logo {
    width: 25em;
  }
  #credit {
    font-size: 1em;
    width: 33em;
  }
  #logo img {
    width: 20em;
  }  
  #menu-nav {
    max-width: 60%;
    top: 10px;
    background-color: #f5f0df;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    position: absolute;
    height: 50px;
    right: 25px;
  }
  #navigation-bar ul {
    height: 50px;
  }
  #navigation-bar li {
    width: 45px;
    height: 45px;
  }
  #navigation-bar div {
    top: 0;
    padding-top: 3px;
    height: 45px;
    width: 45px;
    color: black;
    border: 1px transparent solid;
    text-decoration: none;
    text-align: center;
    border-radius: 50%;
    display: block;
    transition: 0.5s ease;
  }
  p{
    font-size: .9em;
  }
  #navigation-bar img {
    width: 35px;
  }
  /* tutorial */
  .maclean-box {
    letter-spacing: 0.01em;
    font-size: 1em;
    width: 28em;
    height: 2.5em;
    top: 0.625em;
    left: 30%;
    padding: 0.625em;
  }
  .icon-box {
    letter-spacing: 0.01em;
    font-size: 1em;
    width: 29.5em;
    height: 2em;
    top: 11%;
    right: 0.625em;
    padding-top: 0.625em;
  }
  .home-box {
    letter-spacing: 0.01em;
    font-size: 1em;
    width: 15em;
    height: 2.5em;
    bottom: 3vh;
    left: 12.5%;
    padding-top: 0.625em;
  }
  .main-box {
    letter-spacing: 0.01em;
    font-size: 1.25em;
    width: 85%;
    height: 67%;
    top: 17.5%;
    left: 7%;
    padding-top: 1em;
  }
  .start {
    letter-spacing: 0.01em;
    font-size: 2em;
    left: 40%;
    bottom: 1.5%;
    width: 5em;
    height: 1.5em;
  }
  .easy-move-home{
    width: 5em;
  }
  /* map-points */
  .old-summer-palace,
.imperial-palace,
.tsiyn-temple,
.tong-jeo,
.way-out,
.yan-giyoo-travel-palace,
.return,
.date,
.mt-panlung,
.be-gian-travel-palace,
.mt-pan,
.yi-ci-temple,
.horse-change,
.wenshuan-spare-house-station,
.shanhai-pass,
.red-wall,
.bei-jen-temple,
.ilagri-mountain,
.guang-niyeng-county,
.tomb-of-hong-taiji,
.mukden-palace,
.tomb-of-nurhaci,
.the-eternal-tombs,
.hetu-ala,
.conclusion {
 height: max-content;
 font-size: 1.1em;
 padding: 1em;
}
  .old-summer-palace {
    top: -22vh;
  }
  .imperial-palace {
    top: 13vh;
  }
  .tsiyn-temple {
    height: 20em;
    width: 28em;
    top: -38vh;
  }
  .pt3-1 {
    width: 50%;
    height: 100%;
    float: left;
  }
  .pt3-img1{
    left: 50%;
    height: max-content;
    height: 50%;
    width: 50%;
    font-size: 2.5em;
  }
  .pt3-img1 img{
    width: 1em;
    height: 1em;
  }
  .pt3-txt1{
    padding-top: 15%;
    width: 100%;
    height: 100%;
    font-size: .75em;
    float: right;
  }
  .pt3-txt2{
    position: absolute;
    text-align: center;
    bottom: 1em;
    width: 95%;
    height: 25%;
  }
  .tsiyn-t-holder {
    width: 50%;
    height: 50%;
    float: right;
    font-size: .6em;
  }
  .tsiyn-t-holder img{
    width: 90%;
    height: 80%;
  }
  .tong-jeo {
    left: -25vh;
  }
  .way-out {
    top: -11.5vh;
    left: -80vh;
  }
  .yan-giyoo-travel-palace {
    width: 500px;
    height: 290px;
    top: 5vh;
    left: 6vh;
  }
  .return {
    width: 640px;
    height: 220px;
    top: -10vh;
    left: 10vh;
  }
  .date {
    width: 540px;
    height: 230px;
    top: -15vh;
    left: 10vh;
  }
  .mt-panlung {
    width: 540px;
    height: 23em;
    top: 10vh;
    left: 0vh;
  }
  .be-gian-travel-palace {
    font-size: 18px;
    padding-left: 10px;
    padding-right: 10px;

    width: 540px;
    height: 200px;

    top: 12.5vh;
    left: 7vh;
  }
  #point-17{
    top: 26vh;
    left: 199vh;
  }
  .mt-pan {
    width: 600px;
    height: 450px;
    top: 10vh;
    left: 5vh;
  }
  .yi-ci-temple {
    width: 540px;
    height: 400px;
    top: 5vh;
    left: 15vh;
  }
  .horse-change {
    width: 390px;
    height: 160px;
    top: 5vh;
    left: -40vh;
  }
  .wenshuan-spare-house-station {
    width: 540px;
    height: 240px;
    top: -30vh;
    left: -55vh;
  }
  #point-21{
      left: 785vh;
  }
  .shanhai-pass {
    width: 578px;
    height: 23em;
    top: -38vh;
    left: 30vh;
  }
  .red-wall {
    width: 540px;
    height: 200px;
    top: 10vh;
    left: 7vh;
  }
  #point-24{
      left: 1464vh;
  }
  .bei-jen-temple {
    width: 750px;
    height: 700px;
    top: -15vh;
    left: -110vh;
  }
  .ilagri-mountain {
    width: 540px;
    height: 230px;
    top: -2vh;
    left: -65vh;
  }
  .guang-niyeng-county {
    width: 560px;
    height: 240px;
    top: -15vh;
    left: 29vh;
  }
  .img-mukenp1,
.img-mukenp2{
 width: 20em;
 height: 19em;

}
  .tomb-of-hong-taiji {
    width: 400px;
    height: 160px;
    top: -30vh;
    left: -30vh;
  }
  .mukden-palace {
    width: 650px;
    height: 560px;
    top: -55vh;
    left: -95vh;
  }
  .tomb-of-nurhaci {
    width: 540px;
    height: 170px;
    top: -28vh;
    left: 5vh;
  }
  .the-eternal-tombs {
    width: 770px;
    height: 240px;
    top: -30vh;
    left: -50vh;
  }
  .hetu-ala {
    width: 510px;
    height: 13em;
    top: -5vh;
    left: -70vh;
  }
  .conclusion {
    font-size: 1em;
    width: 28.5em;
    height: 19em;
    top: 5vh;
    left: -12vh;
  }
  #conclusion-content {
    height: 12em;
  }
  /* default */
  .title {
    letter-spacing: 0.01em;
    font-size: 2em;
    width: 90%;
    left: 5%;
    top: 25%;
    text-align: center;
  }
  /* history */
  #arrow-home {
    width: 7em;
    height: 2.5em;
    bottom: 3vh;
    left: 2.5%;
  }
  #lft-arrow1 {
    height: 1.5em;
    width: 2.5em;
  }
  #txt-home {
    padding-top: 0.1em;
    padding-left: 2em;
    height: 2.5em;
    width: 2.5em;
    font-size: 1.5em;
  }
  #history-title {
    height: 10%;
    margin-top: 6%;
  }
  #h-title {
    font-size: 3.75em;
  }
  .outer {
    height: 15%;
    margin-top: 13.5%;
  }
  .inner {
    padding-left: 0.5%;
    padding-right: 0.5%;
  }
  #mapmaking,
  #the-manchus,
  #the-title,
  #eastern-tours {
    font-size: 1.5em;
    width: 12em;
    height: 2.5em;
  }
  .h-content-title {
    font-size: 2.25em;
    margin-top: 20%;
  }
  .h-content-txt {
    font-size: 1.75em;
    margin-top: 27%;
  }
  /* mapmaking */
  #history-title {
    width: 100%;
    height: 10em;
    margin-top: 6%;
  }
  #lft-arrow {
    padding-top: 0.9em;
    height: 1.5em;
    width: 2.5em;
  }
  #map-mking-title {
    font-size: 4.5em;
  }
  .content-mp-mking {
    height: 60%;
    margin-top: 20%;
    left: 5%;
    font-size: 1.5em;
  }
  /* the manchu */
  #manchu-title {
    font-size: 3.75em;
  }
  .manchu-content {
    left: 0%;
    position: absolute;
    text-align: center;
    height: 60%;
    margin-top: 21%;
    left: 5%;
    font-size: 1.5em;
  }
  #h-manchu {
    width: 90%;
  }
  #m-images {
    max-width: 90%;
  }
  #img-3 {
    float: left;
    width: 50%;
  }
  #img-3 img,
  #img-4 img {
    width: 18em;
    height: 21em;
  }
  #img-4 {
    float: right;
    width: 50%;
  }
  .portrait-of-manchu {
    margin-left: 0%;
    text-align: center;
    width: 100%;
    font-size: 0.5em;
  }
  .nurhaci-the-first {
    margin-left: 0%;
    text-align: center;
    width: 100%;
    font-size: 0.5em;
  }
  /* title */
  #t-title {
    font-size: 5em;
  }
  .content-title {
    width: 90%;
    height: 80%;
    margin-top: 22%;
    padding-bottom: 2.5%;
    margin-left: 5%;
    font-size: 1.5em;
  }
  .title-map {
    width: 20em;
    height: 18em;
    bottom: 40%;
  }
  .holder1 {
    width: 20em;
    height: 21em;
  }
  /* easter-tours */
  #eastern-tours-title {
    font-size: 4em;
  }
  .eastern-tours-content {
    left: 0%;
    height: 60%;
    margin-top: 20%;
    left: 5%;
    font-size: 1.5em;
    margin-bottom: 5%;
  }
  #h-eastern-tours {
    margin-bottom: 5%;
  }
  #h-eastern-tours {
    width: 90%;
    position: relative;
  }
  #img-1 {
    padding-top: 2.5%;
    float: left;
    top: 20vh;
    width: 50%;
  }
  #img-2 {
    float: right;
    width: 50%;
  }
  #image1,
  #image2 {
    padding-left: 10%;
    width: 80%;
    height: 80%;
  }
  .the-qianlong-emperor,
  .empress-xiaoxian {
    text-align: center;
    font-size: 0.5em;
  }
  /* modern-map */
  #modern-rt-title {
    left: 0%;
    width: 100%;
    height: 9em;
    margin-top: 6%;
  }
  #rt-title {
    font-size: 4em;
  }
  #rt-content {
    margin-top: 18%;
    left: 15%;
    width: 70%;
  }
  #rt-content img {
    width: 100%;
    height: 80%;
  }
  #src-lnk {
    width: 20%;
    bottom: 3vh;
    left: 40%;
  }
 }
@media only screen and (min-width: 1366px) and (min-height: 1024px) {
  /* header */
  .world{
    padding-top: 2.5em;
  }
#logo {
  width: 22.5em;
}
#credit {
  font-size: 1.25em;
  width: 33em;
}
#logo img {
  width: 23em;
}  
#menu-nav {
  max-width: 50%;
  top: 10px;
  background-color: #f5f0df;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  position: absolute;
  height: 55px;
  right: 10px;
}
#navigation-bar ul {
  height: 60px;
}
#navigation-bar li {
  width: 50px;
  height: 50px;
}
#navigation-bar div {
  top: 0;
  padding-top: 3px;
  height: 50px;
  width: 50px;
  color: black;
  border: 1px transparent solid;
  text-decoration: none;
  text-align: center;
  border-radius: 50%;
  display: block;
  transition: 0.5s ease;
}
p{
  font-size: .8em;
}
#navigation-bar img {
  width: 40px;
}
 /* tutorial */
 .maclean-box {
  letter-spacing: 0.01em;
  font-size: 1.1em;
  width: 28em;
  height: 2.5em;
  top: 2.25em;
  left: 30%;
  padding: 0.625em;
}
.icon-box {
  letter-spacing: 0.01em;
  font-size: 1.25em;
  width: 25em;
  height: 2em;
  top: 11%;
  right: 0.625em;
  padding-top: 0.625em;
}
.home-box {
  letter-spacing: 0.01em;
  font-size: 1.25em;
  width: 15em;
  height: 2.5em;
  bottom: 3vh;
  left: 17%;
  padding-top: 0.625em;
}
.main-box {
  letter-spacing: 0.01em;
  font-size: 1.55em;
  width: 85%;
  height: 67%;
  top: 17.5%;
  left: 7%;
  padding-top: 1em;
}
.start {
  letter-spacing: 0.01em;
  font-size: 2em;
  left: 40%;
  bottom: 1.5%;
  width: 5em;
  height: 1.5em;
}
.easy-move-home{
  width: 5em;
}
#scroll-fo-mo {
font-size: 1em;
  width: 50%;
  height: 1em;
  margin-left: 25%;

  left: 0;
}
#st-box {
  width: 1em;
  height: 1em;
  float: left;
}
#nd-box {
font-size: 1em;
}
#rd-box {
  float: left;
  width: 1em;
  height: 1em;
}
.image1 {
  transform: rotate(90deg);
  width: 1em;
  height: 1em;
}

.image3 {
  transform: rotate(90deg);
  width: 1em;
  height: 1em;
}
/* map-points */
.circle {
  font-size: 1em;
  width: 12.5px;
  height: 12.5px;
  padding: 6px;
}
.red-circle {
  font-size: 1em;
  width: 12.5px;
  height: 12.5px;
  padding: 6px;
}
#point-1:after,
#point-2:after,
#point-3:after,
#point-5:after,
#point-7:after,
#point-9:after,
#point-10:after,
#point-11:after,
#point-13:after,
#point-16:after,
#point-17:after,
#point-18:after,
#point-19:after,
#point-20:after,
#point-21:after,
#point-23:after,
#point-24:after,
#point-25:after,
#point-26:after,
#point-27:after,
#point-28:after,
#point-29:after,
#point-30:after,
#point-31:after,
#point-32:after
 {
    height: 12.5px;
    width: max-content;
    font-size: 1em;
}
#point-4:after,
#point-6:after,
#point-8:after,
#point-12:after,
#point-14:after,
#point-15:after,
#point-22:after
{
  height: max-content;
  width: max-content;
  font-size: 1em;
}
#title-font{
  font-size: 1.25em;
}
.old-summer-palace,
.imperial-palace,
.tsiyn-temple,
.tong-jeo,
.way-out,
.yan-giyoo-travel-palace,
.return,
.date,
.mt-panlung,
.be-gian-travel-palace,
.mt-pan,
.yi-ci-temple,
.horse-change,
.wenshuan-spare-house-station,
.shanhai-pass,
.red-wall,
.bei-jen-temple,
.ilagri-mountain,
.guang-niyeng-county,
.tomb-of-hong-taiji,
.mukden-palace,
.tomb-of-nurhaci,
.the-eternal-tombs,
.hetu-ala,
.conclusion {
  height: max-content;
  font-size: 1em;
  padding: 1em;
}
.old-summer-palace {
  width: max-content;
  top: -22vh;
}
.imperial-palace {
  width: 25em;
  top: 13vh;
}
.tsiyn-temple {
  height: 18em;
  width: 28em;
  top: -34vh;
}
.pt3-1 {
  width: 50%;
  height: 100%;
  float: left;
}
.pt3-img1{
  left: 50%;
  height: max-content;
  height: 50%;
  width: 50%;
  font-size: 2.5em;
}
.pt3-img1 img{
  width: 1em;
  height: 1em;
}
.pt3-txt1{
  padding-top: 15%;
  width: 100%;
  height: 100%;
  font-size: .75em;
  float: right;
}
.pt3-txt2{
  position: absolute;
  text-align: center;
  bottom: 0;
  width: 95%;
  height: max-content;
}
.tsiyn-t-holder {
  width: 50%;
  height: 50%;
  float: right;
  font-size: .6em;
}
.tsiyn-t-holder img{
  width: 90%;
  height: 80%;
}
#point-5 {
  top: 62.5vh;
  left: 69.5vh;
}
.tong-jeo {
  width: 25em;
  left: -25vh;
}
.way-out {
  width: 35em;
  top: -6vh;
  left: -80vh;
}
.yan-giyoo-travel-palace {
  width: 25em;
  top: -10vh;
  left: -65vh;
}
.return {
  width: 40em;
  top: -10vh;
  left: 10vh;
}
.date {
  width: 25em;

  top: -25vh;
  left: 10vh;
}
.mt-panlung {
  width: 35em;
  top: 10vh;
  left: 0vh;
}
#point-15 {
  position: absolute;
  top: 60vh;
  left: 155.75vh;
}
#panlung-content div{
  width: 50%;
  height: max-content;
}
#panlung-content img{
  padding-left: 7.5%;
  width: 85%;
  height: auto;
}
#panlung-content a{
  margin-left: 35%;
}
.be-gian-travel-palace {
  width: 20em;
  top: 12.5vh;
  left: 7vh;
}
#point-17{
  top: 26vh;
  left: 199vh;
}
.mt-pan {
  width: 600px;
  height: 450px;
  top: 10vh;
  left: 5vh;
}
.img-mp1,
.img-mp2{
  width: 15em;
  height: 20em;

}
.yi-ci-temple {
  width: 540px;
  height: 400px;
  top: 0vh;
  left: 25vh;
}
.horse-change {
  width: 25em;
  top: 5vh;
  left: -40vh;
}
.wenshuan-spare-house-station {
  width: 20em;
  top: -30vh;
  left: -55vh;
}
#point-21{
    left: 785vh;
}
.shanhai-pass {
  width: 30em;
  top: -38vh;
  left: 30vh;
}
#shanhai-content div{
  width: 50%;
}
.img-sc1{
  width: 15em;
  height: 15em;
}
.red-wall {
  width: 20em;
  top: 10vh;
  left: 7vh;
}
#point-24{
    left: 1464vh;
}
.bei-jen-temple {
  width: 45em;
  height: 38em;
  top: -18vh;
  left: -110vh;
}
.bjt-txt3{
  width: 90%;
  bottom:1em;
}
.ilagri-mountain {
  width: 25em;

  top: -2vh;
  left: -65vh;
}
.guang-niyeng-county {
  width: 25em;
  top: -15vh;
  left: 29vh;
}
.tomb-of-hong-taiji {
  width: 20em;
  top: -30vh;
  left: -30vh;
}
.mukden-palace {
  width: 35em;
  top: -55vh;
  left: -95vh;
}
.img-mukenp1,
.img-mukenp2{
  width: 15em;
  height: 14em;

}
.tomb-of-nurhaci {
  width: 20em;
  top: -28vh;
  left: 5vh;
}
.the-eternal-tombs {
  width: 45em;
  top: -30vh;
  left: -50vh;
}
.hetu-ala {
  width: 25em;
  top: -5vh;
  left: -70vh;
}
.conclusion {
  width: 27em;
  top: 5vh;
  left: -12vh;
}
#conclusion-content {
  height: 8em;
}
/* default */
.title {
  letter-spacing: 0.01em;
  font-size: 1.8em;
  width: 90%;
  left: 5%;
  top: 30%;
  text-align: center;
}
.history, .begin{
  font-size: 2em;
}
/* history */
#arrow-home {
  width: 7em;
  height: 2.5em;
  bottom: 4vh;
  left: 2.5%;
}
#lft-arrow1 {
  height: 1.5em;
  width: 2.5em;
}
#txt-home {
  padding-top: 0.1em;
  padding-left: 2em;
  height: 2.5em;
  width: 2.5em;
  font-size: 1.5em;
}
#history-title {
  height: 10%;
  margin-top: 5%;
}
#h-title {
  font-size: 5em;
}
.outer {
  height: 15%;
  margin-top: 17%;
}
.inner {
  padding-left: 0.5%;
  padding-right: 0.5%;
}
#mapmaking,
#the-manchus,
#the-title,
#eastern-tours {
  font-size: 1.5em;
  width: 12em;
  height: 2.5em;
}
.h-content-title {
  font-size: 2.5em;
  margin-top: 24%;
}
.h-content-txt {
  font-size: 2em;
  margin-top: 32.5%;
}
.modern-map{
  bottom: 5vh;
}
/* mapmaking */
#history-title {
  width: 100%;
  height: 10em;
  margin-top: 7%;
}
#lft-arrow {
  padding-top: 0.9em;
  height: 1.5em;
  width: 2.5em;
}
#m-title{
  height: 22%;
  margin-top: 8%;  
}
#map-mking-title {
  font-size: 5em;
}
.content-mp-mking {
  height: 60%;
  margin-top: 25%;
  left: 5%;
  font-size: 2em;
}
/* the manchu */
#manchu-title {
  font-size: 5em;
}
.manchu-content {
  left: 0%;
  position: absolute;
  text-align: center;
  height: 60%;
  margin-top: 22.5%;
  left: 5%;
  font-size: 1.8em;
}
#h-manchu {
  width: 90%;
}
#m-images {
  max-width: 90%;
}
#img-3 {
  float: left;
  width: 50%;
}
#img-3 img,
#img-4 img {
  width: 15em;
  height: 20em;
}
#img-4 {
  float: right;
  width: 50%;
}
.portrait-of-manchu {
  margin-left: 0%;
  text-align: center;
  width: 100%;
  font-size: 0.5em;
}
.nurhaci-the-first {
  margin-left: 0%;
  text-align: center;
  width: 100%;
  font-size: 0.5em;
}
/* title */
#t-title {
  font-size: 5em;
}
.content-title {
  width: 90%;
  height: 80%;
  margin-top: 25%;
  padding-bottom: 2.5%;
  margin-left: 5%;
  font-size: 2em;
}
.title-map {
  width: 17em;
  height: 15em;
  bottom: 40%;
}
.holder1 {
  width: 18em;
  height: 19em;
}
/* easter-tours */
#eastern-tours-title {
  font-size: 5em;
}
.eastern-tours-content {
  left: 0%;
  height: 60%;
  margin-top: 25%;
  width: 90%;
  margin-left: 5%;
  font-size: 2em;
  margin-bottom: 5%;
}
#h-eastern-tours {
  width: 100%;
}
#img-2 {
  width: 50%;
}
#img-1{
  width: 50%;
}
#image1,
#image2 {
  margin-left: 5%;
  width: 90%;
  height: 90%;
  padding: 0;
}

.the-qianlong-emperor,
.empress-xiaoxian {
  width: 80%;
  margin-left: 10%;
  text-align: center;
  font-size: 0.4em;
}

/* modern-map */
#modern-rt-title {
  left: 0%;
  width: 100%;
  height: 9em;
  margin-top: 6%;
}
#rt-title {
  font-size: 5em;
}
#rt-content {
  margin-top: 22%;
  left: 15%;
  width: 70%;
}
#rt-content img {
  width: 100%;
  height: 80%;
}
#src-lnk {
  width: 20%;
  bottom: 3vh;
  left: 40%;
}
 }
@media only screen and (min-width: 1368px) and (min-height: 912px) {
  /* header */
  #top-header {
    width: 100%;
    height: 10%;
  }
  #logo {
    width: 25em;
  }
  #credit {
    font-size: 1.1em;
    width: 33em;
  }
  #logo img {
    width: 20em;
  }  
  #menu-nav {
    max-width: 60%;
    top: 10px;
    background-color: #f5f0df;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    position: absolute;
    height: 50px;
    right: 10px;
  }
  #navigation-bar ul {
    height: 50px;
  }
  #navigation-bar li {
    width: 45px;
    height: 45px;
  }
  #navigation-bar div {
    top: 0;
    padding-top: 3px;
    height: 45px;
    width: 45px;
    color: black;
    border: 1px transparent solid;
    text-decoration: none;
    text-align: center;
    border-radius: 50%;
    display: block;
    transition: 0.5s ease;
  }
  p{
    font-size: .9em;
  }
  #navigation-bar img {
    width: 35px;
  }
  /* tutorial */
  .maclean-box {
    letter-spacing: 0.01em;
    font-size: 1.1em;
    width: 28em;
    height: 2.5em;
    top: 2em;
    left: 27.5%;
    padding: 0.625em;
  }
  .icon-box {
    letter-spacing: 0.01em;
    font-size: 1.1em;
    width: 25.5em;
    height: 2em;
    top: 11%;
    right: 0.625em;
    padding-top: 0.625em;
  }
  .home-box {
    letter-spacing: 0.01em;
    font-size: 1.1em;
    width: 15em;
    height: 2.5em;
    bottom: 3vh;
    left: 12.5%;
    padding-top: 0.625em;
  }
  .main-box {
    letter-spacing: 0.01em;
    font-size: 1.43em;
    width: 85%;
    height: 66%;
    top: 17.5%;
    left: 7%;
    padding-top: 1em;
  }
  .start {
    letter-spacing: 0.01em;
    font-size: 2em;
    left: 40%;
    bottom: 1.5%;
    width: 5em;
    height: 1.5em;
  }
  .easy-move-home{
    width: 5em;
  }
  /* map-points */
  .old-summer-palace {
    top: -22vh;
  }
  .imperial-palace {
    top: 17vh;
  }
  .tsiyn-temple {
    height: 20em;
    width: 28em;
    top: -38vh;
  }
  .pt3-1 {
    width: 50%;
    height: 100%;
    float: left;
  }
  .pt3-img1{
    left: 50%;
    height: max-content;
    height: 50%;
    width: 50%;
    font-size: 2.5em;
  }
  .pt3-img1 img{
    width: 1em;
    height: 1em;
  }
  .pt3-txt1{
    padding-top: 15%;
    width: 100%;
    height: 100%;
    font-size: .8em;
    float: right;
  }
  .pt3-txt2{
    position: absolute;
    text-align: center;
    bottom: 1em;
    width: 95%;
    height: 25%;
  }
  .tsiyn-t-holder {
    width: 50%;
    height: 50%;
    float: right;
    font-size: .6em;
  }
  .tsiyn-t-holder img{
    width: 90%;
    height: 80%;
  }
  .tong-jeo {
    left: -25vh;
  }
  .way-out {
    top: -11.5vh;
    left: -80vh;
  }
  .yan-giyoo-travel-palace {
    width: 500px;
    height: 290px;
    top: 5vh;
    left: 6vh;
  }
  .return {
    width: 640px;
    height: 220px;
    top: -10vh;
    left: 10vh;
  }
  .date {
    width: 540px;
    height: 230px;
    top: -15vh;
    left: 10vh;
  }
  .mt-panlung {
    width: 540px;
    height: 23em;
    top: 10vh;
    left: 0vh;
  }
  .be-gian-travel-palace {
    font-size: 18px;
    padding-left: 10px;
    padding-right: 10px;

    width: 540px;
    height: 200px;

    top: 12.5vh;
    left: 7vh;
  }
  #point-17{
    top: 26vh;
    left: 199vh;
  }
  .mt-pan {
    width: 600px;
    height: 450px;
    top: 10vh;
    left: 5vh;
  }
  .yi-ci-temple {
    width: 540px;
    height: 400px;
    top: 5vh;
    left: 15vh;
  }
  .horse-change {
    width: 390px;
    height: 160px;
    top: 5vh;
    left: -40vh;
  }
  .wenshuan-spare-house-station {
    width: 540px;
    height: 240px;
    top: -30vh;
    left: -55vh;
  }
  #point-21{
      left: 785vh;
  }
  .shanhai-pass {
    width: 578px;
    height: 23em;
    top: -38vh;
    left: 30vh;
  }
  .red-wall {
    width: 540px;
    height: 200px;
    top: 10vh;
    left: 7vh;
  }
  #point-24{
      left: 1464vh;
  }
  .bei-jen-temple {
    width: 750px;
    height: 590px;
    top: -15vh;
    left: -110vh;
  }
  .ilagri-mountain {
    width: 540px;
    height: 230px;
    top: -2vh;
    left: -65vh;
  }
  .guang-niyeng-county {
    width: 560px;
    height: 240px;
    top: -15vh;
    left: 29vh;
  }
  .tomb-of-hong-taiji {
    width: 400px;
    height: 160px;
    top: -30vh;
    left: -30vh;
  }
  .mukden-palace {
    width: 650px;
    height: 560px;
    top: -55vh;
    left: -95vh;
  }
  .tomb-of-nurhaci {
    width: 540px;
    height: 170px;
    top: -28vh;
    left: 5vh;
  }
  .the-eternal-tombs {
    width: 770px;
    height: 240px;
    top: -30vh;
    left: -50vh;
  }
  .hetu-ala {
    width: 510px;
    height: 13em;
    top: -5vh;
    left: -70vh;
  }
  .conclusion {
    font-size: 1em;
    width: 30em;
    height: 19em;
    top: 5vh;
    left: -12vh;
  }
  #conclusion-content {
    height: 12em;
  }
  /* default */
  .title {
    letter-spacing: 0.01em;
    font-size: 2em;
    width: 90%;
    left: 5%;
    top: 25%;
    text-align: center;
  }
  /* history */
  #arrow-home {
    width: 7em;
    height: 2.5em;
    bottom: 3vh;
    left: 2.5%;
  }
  #lft-arrow1 {
    height: 1.5em;
    width: 2.5em;
  }
  #txt-home {
    padding-top: 0.1em;
    padding-left: 2em;
    height: 2.5em;
    width: 2.5em;
    font-size: 1.5em;
  }
  #history-title {
    height: 10%;
    margin-top: 6%;
  }
  #h-title {
    font-size: 3.75em;
  }
  .outer {
    height: 15%;
    margin-top: 15%;
  }
  .inner {
    padding-left: 0.5%;
    padding-right: 0.5%;
  }
  #mapmaking,
  #the-manchus,
  #the-title,
  #eastern-tours {
    font-size: 1.5em;
    width: 12em;
    height: 2.5em;
  }
  .h-content-title {
    font-size: 2.25em;
    margin-top: 23%;
  }
  .h-content-txt {
    font-size: 1.75em;
    margin-top: 30%;
  }
  /* mapmaking */
  #history-title {
    width: 100%;
    height: 10em;
    margin-top: 6%;
  }
  #lft-arrow {
    padding-top: 0.9em;
    height: 1.5em;
    width: 2.5em;
  }
  #map-mking-title {
    font-size: 4.5em;
  }
  #m-title{
    margin-top: 8%;
    height: 20%;
  }
  .content-mp-mking {
    height: 60%;
    margin-top: 23%;
    left: 5%;
    font-size: 1.5em;
  }
  /* the manchu */
  #manchu-title {
    font-size: 3.75em;
  }
  .manchu-content {
    left: 0%;
    position: absolute;
    text-align: center;
    height: 60%;
    margin-top: 21%;
    left: 5%;
    font-size: 1.5em;
  }
  #h-manchu {
    width: 90%;
  }
  #m-images {
    max-width: 90%;
  }
  #img-3 {
    float: left;
    width: 50%;
  }
  #img-3 img,
  #img-4 img {
    width: 18em;
    height: 21em;
  }
  #img-4 {
    float: right;
    width: 50%;
  }
  .portrait-of-manchu {
    margin-left: 0%;
    text-align: center;
    width: 100%;
    font-size: 0.5em;
  }
  .nurhaci-the-first {
    margin-left: 0%;
    text-align: center;
    width: 100%;
    font-size: 0.5em;
  }
  /* title */
  #t-title {
    font-size: 5em;
  }
  .content-title {
    width: 90%;
    height: 80%;
    margin-top: 22%;
    padding-bottom: 2.5%;
    margin-left: 5%;
    font-size: 1.5em;
  }
  .title-map {
    width: 20em;
    height: 18em;
    bottom: 40%;
  }
  .holder1 {
    width: 20em;
    height: 21em;
  }
  /* easter-tours */
  #eastern-tours-title {
    font-size: 4em;
  }
  .eastern-tours-content {
    left: 0%;
    height: 60%;
    margin-top: 20%;
    left: 5%;
    font-size: 1.5em;
    margin-bottom: 5%;
  }
  #h-eastern-tours {
    margin-bottom: 5%;
  }
  #h-eastern-tours {
    width: 90%;
    position: relative;
  }
  #img-1 {
    padding-top: 2.5%;
    float: left;
    top: 20vh;
    width: 50%;
  }
  #img-2 {
    float: right;
    width: 50%;
  }
  #image1,
  #image2 {
    padding-left: 10%;
    width: 80%;
    height: 80%;
  }
  .the-qianlong-emperor,
  .empress-xiaoxian {
    text-align: center;
    font-size: 0.5em;
  }
  /* modern-map */
  #modern-rt-title {
    left: 0%;
    width: 100%;
    height: 9em;
    margin-top: 6%;
  }
  #rt-title {
    font-size: 4em;
  }
  #rt-content {
    margin-top: 18%;
    left: 15%;
    width: 70%;
  }
  #rt-content img {
    width: 100%;
    height: 80%;
  }
  #src-lnk {
    width: 20%;
    bottom: 3vh;
    left: 40%;
  }
 }
@media only screen and (min-width: 1440px) and (min-height: 900px) {
     /* header */
#logo {
  width: 22.5em;
}
#credit {
  font-size: 1.1em;
  width: 33em;
}
#logo img {
  width: 23em;
}  
#menu-nav {
  max-width: 50%;
  top: 10px;
  background-color: #f5f0df;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  position: absolute;
  height: 55px;
  right: 10px;
}
#navigation-bar ul {
  height: 60px;
}
#navigation-bar li {
  width: 50px;
  height: 50px;
}
#navigation-bar div {
  top: 0;
  padding-top: 3px;
  height: 50px;
  width: 50px;
  color: black;
  border: 1px transparent solid;
  text-decoration: none;
  text-align: center;
  border-radius: 50%;
  display: block;
  transition: 0.5s ease;
}
p{
  font-size: .8em;
}
#navigation-bar img {
  width: 40px;
}
 /* tutorial */
 .maclean-box {
  letter-spacing: 0.01em;
  font-size: .9em;
  width: 28em;
  height: 2.5em;
  top: 0.625em;
  left: 30%;
  padding: 0.625em;
}
.icon-box {
  letter-spacing: 0.01em;
  font-size: 1.25em;
  width: 25em;
  height: 2em;
  top: 11%;
  right: 0.625em;
  padding-top: 0.625em;
}
.home-box {
  letter-spacing: 0.01em;
  font-size: 1em;
  width: 15em;
  height: 2.5em;
  bottom: 3vh;
  left: 17%;
  padding-top: 0.625em;
}
.main-box {
  letter-spacing: 0.01em;
  font-size: 1.5em;
  width: 85%;
  height: 70%;
  top: 17.5%;
  left: 7%;
  padding-top: 1em;
}
.start {
  letter-spacing: 0.01em;
  font-size: 2em;
  left: 40%;
  bottom: 1.5%;
  width: 5em;
  height: 1.5em;
}
.easy-move-home{
  width: 5em;
}
#scroll-fo-mo {
font-size: 1em;
  width: 50%;
  height: 1em;
  margin-left: 25%;

  left: 0;
}
#st-box {
  width: 1em;
  height: 1em;
  float: left;
}
#nd-box {
font-size: 1em;
}
#rd-box {
  float: left;
  width: 1em;
  height: 1em;
}
.image1 {
  transform: rotate(90deg);
  width: 1em;
  height: 1em;
}

.image3 {
  transform: rotate(90deg);
  width: 1em;
  height: 1em;
}
/* map-points */
.circle {
  font-size: 1em;
  width: 12.5px;
  height: 12.5px;
  padding: 6px;
}
.red-circle {
  font-size: 1em;
  width: 12.5px;
  height: 12.5px;
  padding: 6px;
}
#point-1:after,
#point-2:after,
#point-3:after,
#point-5:after,
#point-7:after,
#point-9:after,
#point-10:after,
#point-11:after,
#point-13:after,
#point-16:after,
#point-17:after,
#point-18:after,
#point-19:after,
#point-20:after,
#point-21:after,
#point-23:after,
#point-24:after,
#point-25:after,
#point-26:after,
#point-27:after,
#point-28:after,
#point-29:after,
#point-30:after,
#point-31:after,
#point-32:after
 {
    height: 12.5px;
    width: max-content;
    font-size: 1em;
}
#point-4:after,
#point-6:after,
#point-8:after,
#point-12:after,
#point-14:after,
#point-15:after,
#point-22:after
{
  height: max-content;
  width: max-content;
  font-size: 1em;
}
#title-font{
  font-size: 1.25em;
}
.old-summer-palace,
.imperial-palace,
.tsiyn-temple,
.tong-jeo,
.way-out,
.yan-giyoo-travel-palace,
.return,
.date,
.mt-panlung,
.be-gian-travel-palace,
.mt-pan,
.yi-ci-temple,
.horse-change,
.wenshuan-spare-house-station,
.shanhai-pass,
.red-wall,
.bei-jen-temple,
.ilagri-mountain,
.guang-niyeng-county,
.tomb-of-hong-taiji,
.mukden-palace,
.tomb-of-nurhaci,
.the-eternal-tombs,
.hetu-ala,
.conclusion {
  height: max-content;
  font-size: 1em;
  padding: 1em;
}
.old-summer-palace {
  width: max-content;
  top: -22vh;
}
.imperial-palace {
  width: 25em;
  top: 13vh;
}
.tsiyn-temple {
  height: 18em;
  width: 28em;
  top: -34vh;
}
.pt3-1 {
  width: 50%;
  height: 100%;
  float: left;
}
.pt3-img1{
  left: 50%;
  height: max-content;
  height: 50%;
  width: 50%;
  font-size: 2.5em;
}
.pt3-img1 img{
  width: 1em;
  height: 1em;
}
.pt3-txt1{
  padding-top: 15%;
  width: 100%;
  height: 100%;
  font-size: .75em;
  float: right;
}
.pt3-txt2{
  position: absolute;
  text-align: center;
  bottom: 0;
  width: 95%;
  height: max-content;
}
.tsiyn-t-holder {
  width: 50%;
  height: 50%;
  float: right;
  font-size: .6em;
}
.tsiyn-t-holder img{
  width: 90%;
  height: 80%;
}
.tong-jeo {
  width: 25em;
  left: -25vh;
}
.way-out {
  width: 35em;
  top: -6vh;
  left: -80vh;
}
.yan-giyoo-travel-palace {
  width: 25em;
  top: -10vh;
  left: -65vh;
}
.return {
  width: 40em;
  top: -10vh;
  left: 10vh;
}
.date {
  width: 25em;

  top: -25vh;
  left: 10vh;
}
.mt-panlung {
  width: 35em;
  top: 10vh;
  left: 0vh;
}
#panlung-content div{
  width: 50%;
  height: max-content;
}
#panlung-content img{
  padding-left: 7.5%;
  width: 85%;
  height: auto;
}
#panlung-content a{
  margin-left: 35%;
}
.be-gian-travel-palace {
  width: 20em;
  top: 12.5vh;
  left: 7vh;
}
#point-17{
  top: 26vh;
  left: 199vh;
}
.mt-pan {
  width: 600px;
  height: 450px;
  top: 10vh;
  left: 5vh;
}
.img-mp1,
.img-mp2{
  width: 15em;
  height: 20em;

}
.yi-ci-temple {
  width: 540px;
  height: 400px;
  top: 0vh;
  left: 25vh;
}
.horse-change {
  width: 25em;
  top: 5vh;
  left: -40vh;
}
.wenshuan-spare-house-station {
  width: 20em;
  top: -30vh;
  left: -55vh;
}
#point-21{
    left: 785vh;
}
.shanhai-pass {
  width: 30em;
  top: -38vh;
  left: 30vh;
}
#shanhai-content div{
  width: 50%;
}
.img-sc1{
  width: 15em;
  height: 15em;
}
.red-wall {
  width: 20em;
  top: 10vh;
  left: 7vh;
}
#point-24{
    left: 1464vh;
}
.bei-jen-temple {
  width: 45em;
  height: 38em;
  top: -18vh;
  left: -110vh;
}
.bjt-txt3{
  width: 90%;
  bottom:1em;
}
.ilagri-mountain {
  width: 25em;

  top: -2vh;
  left: -65vh;
}
.guang-niyeng-county {
  width: 25em;
  top: -15vh;
  left: 29vh;
}
.tomb-of-hong-taiji {
  width: 20em;
  top: -30vh;
  left: -30vh;
}
.mukden-palace {
  width: 35em;
  top: -55vh;
  left: -95vh;
}
.img-mukenp1,
.img-mukenp2{
  width: 15em;
  height: 14em;

}
.tomb-of-nurhaci {
  width: 20em;
  top: -28vh;
  left: 5vh;
}
.the-eternal-tombs {
  width: 45em;
  top: -30vh;
  left: -50vh;
}
.hetu-ala {
  width: 25em;
  top: -5vh;
  left: -70vh;
}
.conclusion {
  width: 27em;
  top: 5vh;
  left: -12vh;
}
#conclusion-content {
  height: 8em;
}
/* default */
.title {
  letter-spacing: 0.01em;
  font-size: 1.8em;
  width: 90%;
  left: 5%;
  top: 30%;
  text-align: center;
}
.history, .begin{
  font-size: 2em;
}
/* history */
#arrow-home {
  width: 7em;
  height: 2.5em;
  bottom: 4vh;
  left: 2.5%;
}
#lft-arrow1 {
  height: 1.5em;
  width: 2.5em;
}
#txt-home {
  padding-top: 0.1em;
  padding-left: 2em;
  height: 2.5em;
  width: 2.5em;
  font-size: 1.5em;
}
#history-title {
  height: 10%;
  margin-top: 5%;
}
#h-title {
  font-size: 5em;
}
.outer {
  height: 15%;
  margin-top: 17%;
}
.inner {
  padding-left: 0.5%;
  padding-right: 0.5%;
}
#mapmaking,
#the-manchus,
#the-title,
#eastern-tours {
  font-size: 1.5em;
  width: 12em;
  height: 2.5em;
}
.h-content-title {
  font-size: 2.5em;
  margin-top: 24%;
}
.h-content-txt {
  font-size: 1.9em;
  margin-top: 31.5%;
}
.modern-map{
  bottom: 5vh;
}
/* mapmaking */
#history-title {
  width: 100%;
  height: 10em;
  margin-top: 7%;
}
#lft-arrow {
  padding-top: 0.9em;
  height: 1.5em;
  width: 2.5em;
}
#m-title{
  height: 22%;
  margin-top: 8%;  
}
#map-mking-title {
  font-size: 5em;
}
.content-mp-mking {
  height: 60%;
  margin-top: 25%;
  left: 5%;
  font-size: 2em;
}
/* the manchu */
#manchu-title {
  font-size: 5em;
}
.manchu-content {
  left: 0%;
  position: absolute;
  text-align: center;
  height: 60%;
  margin-top: 22.5%;
  left: 5%;
  font-size: 1.8em;
}
#h-manchu {
  width: 90%;
}
#m-images {
  max-width: 90%;
}
#img-3 {
  float: left;
  width: 50%;
}
#img-3 img,
#img-4 img {
  width: 15em;
  height: 20em;
}
#img-4 {
  float: right;
  width: 50%;
}
.portrait-of-manchu {
  margin-left: 0%;
  text-align: center;
  width: 100%;
  font-size: 0.5em;
}
.nurhaci-the-first {
  margin-left: 0%;
  text-align: center;
  width: 100%;
  font-size: 0.5em;
}
/* title */
#t-title {
  font-size: 5em;
}
.content-title {
  width: 90%;
  height: 80%;
  margin-top: 25%;
  padding-bottom: 2.5%;
  margin-left: 5%;
  font-size: 2em;
}
.title-map {
  width: 17em;
  height: 15em;
  bottom: 40%;
}
.holder1 {
  width: 18em;
  height: 19em;
}
/* easter-tours */
#eastern-tours-title {
  font-size: 5em;
}
.eastern-tours-content {
  left: 0%;
  height: 60%;
  margin-top: 25%;
  width: 90%;
  margin-left: 5%;
  font-size: 2em;
  margin-bottom: 5%;
}
#h-eastern-tours {
  width: 100%;
}
#img-2 {
  width: 50%;
}
#img-1{
  width: 50%;
}
#image1,
#image2 {
  margin-left: 5%;
  width: 90%;
  height: 90%;
  padding: 0;
}

.the-qianlong-emperor,
.empress-xiaoxian {
  width: 80%;
  margin-left: 10%;
  text-align: center;
  font-size: 0.4em;
}

/* modern-map */
#modern-rt-title {
  left: 0%;
  width: 100%;
  height: 9em;
  margin-top: 6%;
}
#rt-title {
  font-size: 5em;
}
#rt-content {
  margin-top: 22%;
  left: 15%;
  width: 70%;
}
#rt-content img {
  width: 100%;
  height: 80%;
}
#src-lnk {
  width: 20%;
  bottom: 3vh;
  left: 40%;
}
 }
@media only screen and (min-width: 1536px) and (min-height: 864px) {
 /* header */
 #logo {
  width: 22.5em;
}
#credit {
  font-size: 1.1em;
  width: 33em;
}
#logo img {
  width: 22em;
}  
#menu-nav {
  max-width: 50%;
  top: 10px;
  background-color: #f5f0df;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  position: absolute;
  height: 45px;
  right: 10px;
}
#navigation-bar ul {
  height: 50px;
}
#navigation-bar li {
  width: 40px;
  height: 40px;
}
#navigation-bar div {
  top: 0;
  padding-top: 3px;
  height: 40px;
  width: 40px;
  color: black;
  border: 1px transparent solid;
  text-decoration: none;
  text-align: center;
  border-radius: 50%;
  display: block;
  transition: 0.5s ease;
}
p{
  font-size: .8em;
}
#navigation-bar img {
  width: 30px;
}
 /* tutorial */
 .maclean-box {
  letter-spacing: 0.01em;
  font-size: .9em;
  width: 28em;
  height: 2.5em;
  top: 0.625em;
  left: 31.5%;
  padding: 0.625em;
}
.icon-box {
  letter-spacing: 0.01em;
  font-size: 1.1em;
  width: 22.5em;
  height: 2em;
  top: 11%;
  right: 0.625em;
  padding-top: 0.625em;
}
.home-box {
  letter-spacing: 0.01em;
  font-size: 1em;
  width: 15em;
  height: 2.5em;
  bottom: 3vh;
  left: 17%;
  padding-top: 0.625em;
}
.main-box {
  letter-spacing: 0.01em;
  font-size: 1.4em;
  width: 85%;
  height: 67%;
  top: 17.5%;
  left: 7%;
  padding-top: 1em;
}
.start {
  letter-spacing: 0.01em;
  font-size: 2em;
  left: 40%;
  bottom: 1.5%;
  width: 5em;
  height: 1.5em;
}
.easy-move-home{
  width: 5em;
}
#scroll-fo-mo {
font-size: 1em;
  width: 50%;
  height: 1em;
  margin-left: 25%;

  left: 0;
}
#st-box {
  width: 1em;
  height: 1em;
  float: left;
}
#nd-box {
font-size: 1em;
}
#rd-box {
  float: left;
  width: 1em;
  height: 1em;
}
.image1 {
  transform: rotate(90deg);
  width: 1em;
  height: 1em;
}

.image3 {
  transform: rotate(90deg);
  width: 1em;
  height: 1em;
}
/* map-points */
.circle {
  font-size: .8em;
  width: 10px;
  height: 10px;
  padding: 4px;
}
.red-circle {
  font-size: .8em;
  width: 10px;
  height: 10px;
  padding: 4px;
}
#point-1:after,
#point-2:after,
#point-3:after,
#point-5:after,
#point-7:after,
#point-9:after,
#point-10:after,
#point-11:after,
#point-13:after,
#point-16:after,
#point-17:after,
#point-18:after,
#point-19:after,
#point-20:after,
#point-21:after,
#point-23:after,
#point-24:after,
#point-25:after,
#point-26:after,
#point-27:after,
#point-28:after,
#point-29:after,
#point-30:after,
#point-31:after,
#point-32:after
 {
    height: 10px;
    width: max-content;
    font-size: .8em;
}
#point-4:after,
#point-6:after,
#point-8:after,
#point-12:after,
#point-14:after,
#point-15:after,
#point-22:after
{
  height: max-content;
  width: max-content;
  font-size: .8em;
}
#title-font{
  font-size: 1em;
}
.old-summer-palace,
.imperial-palace,
.tsiyn-temple,
.tong-jeo,
.way-out,
.yan-giyoo-travel-palace,
.return,
.date,
.mt-panlung,
.be-gian-travel-palace,
.mt-pan,
.yi-ci-temple,
.horse-change,
.wenshuan-spare-house-station,
.shanhai-pass,
.red-wall,
.bei-jen-temple,
.ilagri-mountain,
.guang-niyeng-county,
.tomb-of-hong-taiji,
.mukden-palace,
.tomb-of-nurhaci,
.the-eternal-tombs,
.hetu-ala,
.conclusion {
  height: max-content;
  font-size: 1em;
  padding: 1em;
}
.old-summer-palace {
  width: max-content;
  top: -22vh;
}
.imperial-palace {
  width: 25em;
  top: 13vh;
}
.tsiyn-temple {
  height: 18em;
  width: 28em;
  top: -34vh;
}
.pt3-1 {
  width: 50%;
  height: 100%;
  float: left;
}
.pt3-img1{
  left: 50%;
  height: max-content;
  height: 50%;
  width: 50%;
  font-size: 2.5em;
}
.pt3-img1 img{
  width: 1em;
  height: 1em;
}
.pt3-txt1{
  padding-top: 15%;
  width: 100%;
  height: 100%;
  font-size: .75em;
  float: right;
}
.pt3-txt2{
  position: absolute;
  text-align: center;
  bottom: 0;
  width: 95%;
  height: max-content;
}
.tsiyn-t-holder {
  width: 50%;
  height: 50%;
  float: right;
  font-size: .6em;
}
.tsiyn-t-holder img{
  width: 90%;
  height: 80%;
}
.tong-jeo {
  width: 25em;
  left: -25vh;
}
.way-out {
  width: 35em;
  top: -6vh;
  left: -80vh;
}
.yan-giyoo-travel-palace {
  width: 25em;
  top: -10vh;
  left: -65vh;
}
.return {
  width: 40em;
  top: -10vh;
  left: 10vh;
}
.date {
  width: 25em;

  top: -25vh;
  left: 10vh;
}
.mt-panlung {
  width: 35em;
  top: 10vh;
  left: 0vh;
}
#panlung-content div{
  width: 50%;
  height: max-content;
}
#panlung-content img{
  padding-left: 7.5%;
  width: 85%;
  height: auto;
}
#panlung-content a{
  margin-left: 35%;
}
.be-gian-travel-palace {
  width: 20em;
  top: 12.5vh;
  left: 7vh;
}
#point-17{
  top: 26vh;
  left: 199vh;
}
.mt-pan {
  width: 600px;
  height: 450px;
  top: 10vh;
  left: 5vh;
}
.img-mp1,
.img-mp2{
  width: 15em;
  height: 20em;

}
.yi-ci-temple {
  width: 540px;
  height: 400px;
  top: 0vh;
  left: 25vh;
}
.horse-change {
  width: 25em;
  top: 5vh;
  left: -40vh;
}
.wenshuan-spare-house-station {
  width: 20em;
  top: -30vh;
  left: -55vh;
}
#point-21{
    left: 785vh;
}
.shanhai-pass {
  width: 30em;
  top: -38vh;
  left: 30vh;
}
#shanhai-content div{
  width: 50%;
}
.img-sc1{
  width: 15em;
  height: 15em;
}
.red-wall {
  width: 20em;
  top: 10vh;
  left: 7vh;
}
#point-24{
    left: 1464vh;
}
.bei-jen-temple {
  width: 45em;
  height: 38em;
  top: -18vh;
  left: -110vh;
}
.bjt-txt3{
  width: 90%;
  bottom:1em;
}
.ilagri-mountain {
  width: 25em;

  top: -2vh;
  left: -65vh;
}
.guang-niyeng-county {
  width: 25em;
  top: -15vh;
  left: 29vh;
}
.tomb-of-hong-taiji {
  width: 20em;
  top: -30vh;
  left: -30vh;
}
.mukden-palace {
  width: 35em;
  top: -55vh;
  left: -95vh;
}
.img-mukenp1,
.img-mukenp2{
  width: 15em;
  height: 14em;

}
.tomb-of-nurhaci {
  width: 20em;
  top: -28vh;
  left: 5vh;
}
.the-eternal-tombs {
  width: 45em;
  top: -30vh;
  left: -50vh;
}
.hetu-ala {
  width: 25em;
  top: -5vh;
  left: -70vh;
}
.conclusion {
  width: 27em;
  top: 5vh;
  left: -12vh;
}
#conclusion-content {
  height: 8em;
}
/* default */
.title {
  letter-spacing: 0.01em;
  font-size: 1.7em;
  width: 90%;
  left: 5%;
  top: 30%;
  text-align: center;
}
.history, .begin{
  font-size: 2em;
}
/* history */
#arrow-home {
  width: 7em;
  height: 2.5em;
  bottom: 4vh;
  left: 2.5%;
}
#lft-arrow1 {
  height: 1.5em;
  width: 2.5em;
}
#txt-home {
  padding-top: 0.1em;
  padding-left: 2em;
  height: 2.5em;
  width: 2.5em;
  font-size: 1.5em;
}
#history-title {
  height: 10%;
  margin-top: 5%;
}
#h-title {
  font-size: 5em;
}
.outer {
  height: 15%;
  margin-top: 17%;
}
.inner {
  padding-left: 0.5%;
  padding-right: 0.5%;
}
#mapmaking,
#the-manchus,
#the-title,
#eastern-tours {
  font-size: 1.5em;
  width: 12em;
  height: 2.5em;
}
.h-content-title {
  font-size: 2.5em;
  margin-top: 25%;
}
.h-content-txt {
  font-size: 1.8em;
  margin-top: 32.5%;
}
.modern-map{
  bottom: 5vh;
}
/* mapmaking */
#history-title {
  width: 100%;
  height: 10em;
  margin-top: 7%;
}
#lft-arrow {
  padding-top: 0.9em;
  height: 1.5em;
  width: 2.5em;
}
#m-title{
  height: 22%;
  margin-top: 8%;  
}
#map-mking-title {
  font-size: 5em;
}
.content-mp-mking {
  height: 60%;
  margin-top: 23%;
  left: 5%;
  font-size: 1.8em;
}
/* the manchu */
#manchu-title {
  font-size: 5em;
}
.manchu-content {
  left: 0%;
  position: absolute;
  text-align: center;
  height: 60%;
  margin-top: 20%;
  left: 5%;
  font-size: 1.5em;
}
#h-manchu {
  width: 90%;
}
#m-images {
  max-width: 90%;
}
#img-3 {
  float: left;
  width: 50%;
}
#img-3 img,
#img-4 img {
  width: 15em;
  height: 20em;
}
#img-4 {
  float: right;
  width: 50%;
}
.portrait-of-manchu {
  margin-left: 0%;
  text-align: center;
  width: 100%;
  font-size: 0.5em;
}
.nurhaci-the-first {
  margin-left: 0%;
  text-align: center;
  width: 100%;
  font-size: 0.5em;
}
/* title */
#t-title {
  font-size: 5em;
}
.content-title {
  width: 90%;
  height: 80%;
  margin-top: 25%;
  padding-bottom: 2.5%;
  margin-left: 5%;
  font-size: 1.5em;
}
.title-map {
  width: 17em;
  height: 15em;
  bottom: 40%;
}
.holder1 {
  width: 18em;
  height: 19em;
}
/* easter-tours */
#eastern-tours-title {
  font-size: 5em;
}
.eastern-tours-content {
  left: 0%;
  height: 60%;
  margin-top: 25%;
  width: 90%;
  margin-left: 5%;
  font-size: 1.4em;
  margin-bottom: 5%;
}
#h-eastern-tours {
  width: 100%;
}
#img-2 {
  width: 50%;
}
#img-1{
  width: 50%;
}
#image1,
#image2 {
  margin-left: 5%;
  width: 90%;
  height: 90%;
  padding: 0;
}

.the-qianlong-emperor,
.empress-xiaoxian {
  width: 80%;
  margin-left: 10%;
  text-align: center;
  font-size: 0.4em;
}

/* modern-map */
#modern-rt-title {
  left: 0%;
  width: 100%;
  height: 9em;
  margin-top: 6%;
}
#rt-title {
  font-size: 5em;
}
#rt-content {
  margin-top: 18%;
  left: 15%;
  width: 70%;
}
#rt-content img {
  width: 100%;
  height: 80%;
}
#src-lnk {
  width: 20%;
  bottom: 3vh;
  left: 40%;
}
 }
@media only screen and (min-width: 1536px) and (min-height: 960px) {
  /* header */
  #logo {
   width: 22.5em;
 }
 #credit {
   font-size: 1.1em;
   width: 33em;
 }
 #logo img {
   width: 22em;
 }  
 #menu-nav {
   max-width: 50%;
   top: 10px;
   background-color: #f5f0df;
   border-radius: 4px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
   position: absolute;
   height: 55px;
   right: 10px;
 }
 #navigation-bar ul {
   height: 60px;
 }
 #navigation-bar li {
   width: 50px;
   height: 50px;
 }
 #navigation-bar div {
   top: 0;
   padding-top: 3px;
   height: 50px;
   width: 50px;
   color: black;
   border: 1px transparent solid;
   text-decoration: none;
   text-align: center;
   border-radius: 50%;
   display: block;
   transition: 0.5s ease;
 }
 p{
   font-size: 1em;
 }
 #navigation-bar img {
   width: 40px;
 }
  /* tutorial */
  .maclean-box {
   letter-spacing: 0.01em;
   font-size: 1.1em;
   width: 28em;
   height: 2.5em;
   top: 0.625em;
   left: 28%;
   padding: 0.625em;
 }
 .icon-box {
   letter-spacing: 0.01em;
   font-size: 1.1em;
   width: 25em;
   height: 2em;
   top: 11%;
   right: 0.625em;
   padding-top: 0.625em;
 }
 .home-box {
   letter-spacing: 0.01em;
   font-size: 1.1em;
   width: 15em;
   height: 2.5em;
   bottom: 3vh;
   left: 14%;
   padding-top: 0.625em;
 }
 .main-box {
   letter-spacing: 0.01em;
   font-size: 1.55em;
   width: 85%;
   height: 67%;
   top: 17.5%;
   left: 7%;
   padding-top: 1em;
 }
 .start {
   letter-spacing: 0.01em;
   font-size: 2em;
   left: 40%;
   bottom: 1.5%;
   width: 5em;
   height: 1.5em;
 }
 .easy-move-home{
   width: 5em;
 }
 #scroll-fo-mo {
 font-size: 1em;
   width: 50%;
   height: 1em;
   margin-left: 25%;
 
   left: 0;
 }
 #st-box {
   width: 1em;
   height: 1em;
   float: left;
 }
 #nd-box {
 font-size: 1em;
 }
 #rd-box {
   float: left;
   width: 1em;
   height: 1em;
 }
 .image1 {
   transform: rotate(90deg);
   width: 1em;
   height: 1em;
 }
 
 .image3 {
   transform: rotate(90deg);
   width: 1em;
   height: 1em;
 }
 /* map-points */
 .circle {
   font-size: 1em;
   width: 15px;
   height: 15px;
   padding: 4px;
 }
 .red-circle {
  font-size: 1em;
  width: 15px;
  height: 15px;
   padding: 4px;
 }
 #point-1:after,
 #point-2:after,
 #point-3:after,
 #point-5:after,
 #point-7:after,
 #point-9:after,
 #point-10:after,
 #point-11:after,
 #point-13:after,
 #point-16:after,
 #point-17:after,
 #point-18:after,
 #point-19:after,
 #point-20:after,
 #point-21:after,
 #point-23:after,
 #point-24:after,
 #point-25:after,
 #point-26:after,
 #point-27:after,
 #point-28:after,
 #point-29:after,
 #point-30:after,
 #point-31:after,
 #point-32:after
  {
     height: 15px;
     width: max-content;
     font-size: 1em;
 }
 #point-4:after,
 #point-6:after,
 #point-8:after,
 #point-12:after,
 #point-14:after,
 #point-15:after,
 #point-22:after
 {
   height: max-content;
   width: max-content;
   font-size: 1em;
 }
 #title-font{
   font-size: 1.em;
 }
 .old-summer-palace,
 .imperial-palace,
 .tsiyn-temple,
 .tong-jeo,
 .way-out,
 .yan-giyoo-travel-palace,
 .return,
 .date,
 .mt-panlung,
 .be-gian-travel-palace,
 .mt-pan,
 .yi-ci-temple,
 .horse-change,
 .wenshuan-spare-house-station,
 .shanhai-pass,
 .red-wall,
 .bei-jen-temple,
 .ilagri-mountain,
 .guang-niyeng-county,
 .tomb-of-hong-taiji,
 .mukden-palace,
 .tomb-of-nurhaci,
 .the-eternal-tombs,
 .hetu-ala,
 .conclusion {
   height: max-content;
   font-size: 1.3em;
   padding: 1em;
 }
 .old-summer-palace {
   width: max-content;
   top: -22vh;
 }
 .imperial-palace {
   width: 25em;
   top: 13vh;
 }
 .tsiyn-temple {
   height: 18em;
   width: 28em;
   top: -34vh;
 }
 .pt3-1 {
   margin-top: 5%;
   width: 50%;
   height: 100%;
   float: left;
 }
 .pt3-img1{
  margin-left: 40%;
  height: max-content;
  height: 50%;
  width: 25%;
  font-size: 2.5em;
}
 .pt3-img1 img{
   width: 1em;
   height: 1em;
 }
 .pt3-txt1{
   padding-top: 10%;
   width: 100%;
   height: 100%;
   font-size: .9em;

 }
 .pt3-txt2{
   position: absolute;
   text-align: center;
   bottom: 0;
   width: 95%;
   height: max-content;
 }
 .tsiyn-t-holder {
   width: 50%;
   height: 50%;
   float: right;
   font-size: .7em;
 }
 .tsiyn-t-holder img{
   width: 90%;
   height: 80%;
 }
 .tong-jeo {
   width: 25em;
   left: -25vh;
 }
 .way-out {
   width: 35em;
   top: -6vh;
   left: -80vh;
 }
 .yan-giyoo-travel-palace {
   width: 25em;
   top: -10vh;
   left: -65vh;
 }
 .return {
   width: 40em;
   top: -10vh;
   left: 10vh;
 }
 .date {
   width: 25em;
 
   top: -25vh;
   left: 10vh;
 }
 .mt-panlung {
   width: 35em;
   top: 10vh;
   left: 0vh;
   height: 25em;
 }
 #panlung-content{
   height: 80%;
 }
 #panlung-content div{
   width: 50%;
   height: max-content;
 }
 #panlung-content img{
   padding-left: 7.5%;
   width: 85%;
   height: auto;
 }
 #panlung-content a{
   margin-left: 35%;
 }
 .be-gian-travel-palace {
   width: 23em;
   top: 12.5vh;
   left: 7vh;
 }
 #point-17{
  top: 26vh;
  left: 199vh;
 }
 .mt-pan {
   width: 600px;
   height: 500px;
   top: 10vh;
   left: 5vh;
 }
 .img-mp1,
 .img-mp2{
   width: 15em;
   height: 20em;
 
 }
 .yi-ci-temple {
   width: 600px;
   height: 450px;
   top: 0vh;
   left: 25vh;
 }
 .horse-change {
   width: 25em;
   top: 5vh;
   left: -40vh;
 }
 .wenshuan-spare-house-station {
   width: 20em;
   top: -30vh;
   left: -55vh;
 }
 #point-21{
     left: 783vh;
 }
 .shanhai-pass {
   width: 30em;
   top: -38vh;
   left: 30vh;
 }
 #shanhai-content div{
   width: 50%;
 }
 .img-sc1{
   width: 15em;
   height: 15em;
 }
 .red-wall {
   width: 20em;
   top: 10vh;
   left: 7vh;
 }
 #point-24{
     left: 1469vh;
 }
 .bei-jen-temple {
   width: 45em;
   height: 34em;
   top: -18vh;
   left: -110vh;
 }
 .bjt-txt3{
   width: 90%;
   bottom:1em;
 }
 .ilagri-mountain {
   width: 25em;
 
   top: -2vh;
   left: -65vh;
 }
 .guang-niyeng-county {
   width: 25em;
   top: -15vh;
   left: 29vh;
 }
 .tomb-of-hong-taiji {
   width: 20em;
   top: -30vh;
   left: -30vh;
 }
 .mukden-palace {
   width: 35em;
   top: -55vh;
   left: -95vh;
 }
 .img-mukenp1,
 .img-mukenp2{
   width: 100%;
   height: 100%;
 
 }
 .tomb-of-nurhaci {
   width: 20em;
   top: -28vh;
   left: 5vh;
 }
 .the-eternal-tombs {
   width: 45em;
   top: -30vh;
   left: -50vh;
 }
 .hetu-ala {
   width: 25em;
   top: -5vh;
   left: -70vh;
 }
 .conclusion {
   width: 36em;
   top: 5vh;
   left: -35vh;
 }
 #conclusion-content {
   height: 8em;
 }
 /* default */
 .title {
   letter-spacing: 0.01em;
   font-size: 1.7em;
   width: 90%;
   left: 5%;
   top: 30%;
   text-align: center;
 }
 .history, .begin{
   font-size: 2em;
 }
 /* history */
 #arrow-home {
   width: 7em;
   height: 2.5em;
   bottom: 4vh;
   left: 2.5%;
 }
 #lft-arrow1 {
   height: 1.5em;
   width: 2.5em;
 }
 #txt-home {
   padding-top: 0.1em;
   padding-left: 2em;
   height: 2.5em;
   width: 2.5em;
   font-size: 1.5em;
 }
 #history-title {
   height: 10%;
   margin-top: 5%;
 }
 #h-title {
   font-size: 5em;
 }
 .outer {
   height: 15%;
   margin-top: 17%;
 }
 .inner {
   padding-left: 0.5%;
   padding-right: 0.5%;
 }
 #mapmaking,
 #the-manchus,
 #the-title,
 #eastern-tours {
   font-size: 1.5em;
   width: 12em;
   height: 2.5em;
 }
 .h-content-title {
   font-size: 2.5em;
   margin-top: 25%;
 }
 .h-content-txt {
   font-size: 1.8em;
   margin-top: 32.5%;
 }
 .modern-map{
   bottom: 5vh;
 }
 /* mapmaking */
 #history-title {
   width: 100%;
   height: 10em;
   margin-top: 7%;
 }
 #lft-arrow {
   padding-top: 0.9em;
   height: 1.5em;
   width: 2.5em;
 }
 #m-title{
   height: 22%;
   margin-top: 8%;  
 }
 #map-mking-title {
   font-size: 5em;
 }
 .content-mp-mking {
   height: 60%;
   margin-top: 23%;
   left: 5%;
   font-size: 1.8em;
 }
 /* the manchu */
 #manchu-title {
   font-size: 5em;
 }
 .manchu-content {
   left: 0%;
   position: absolute;
   text-align: center;
   height: 60%;
   margin-top: 17%;
   left: 5%;
   font-size: 1.5em;
 }
 #h-manchu {
   width: 90%;
 }
 #m-images {
   max-width: 90%;
 }
 #img-3 {
   float: left;
   width: 50%;
 }
 #img-3 img,
 #img-4 img {
   width: 20em;
   height: 25em;
 }
 #img-4 {
   float: right;
   width: 50%;
 }
 .portrait-of-manchu {
   margin-left: 0%;
   text-align: center;
   width: 100%;
   font-size: 0.6em;
 }
 .nurhaci-the-first {
   margin-left: 0%;
   text-align: center;
   width: 100%;
   font-size: 0.6em;
 }
 /* title */
 #t-title {
   font-size: 5em;
 }
 .content-title {
   width: 90%;
   height: 80%;
   margin-top: 20%;
   padding-bottom: 2.5%;
   margin-left: 5%;
   font-size: 1.5em;
 }
 .title-map {
   width: 100%;
   height: 90%;
   bottom: 40%;
 }
 .holder1 {
   width: 22em;
   height: 21em;
 }
 /* easter-tours */
 #eastern-tours-title {
   font-size: 5em;
 }
 .eastern-tours-content {
   left: 0%;
   height: 60%;
   margin-top: 20%;
   width: 90%;
   margin-left: 5%;
   font-size: 1.4em;
   margin-bottom: 5%;
 }
 #h-eastern-tours {
   width: 100%;
 }
 #img-2 {
   width: 50%;
 }
 #img-1{
   width: 50%;
 }
 #image1,
 #image2 {
   margin-left: 10%;
   width: 80%;
   height: 80%;
   padding: 0;
 }
 
 .the-qianlong-emperor,
 .empress-xiaoxian {
   width: 80%;
   margin-left: 10%;
   text-align: center;
   font-size: 0.6em;
 }
 
 /* modern-map */
 #modern-rt-title {
   left: 0%;
   width: 100%;
   height: 9em;
   margin-top: 6%;
 }
 #rt-title {
   font-size: 5em;
 }
 #rt-content {
   margin-top: 13%;
   left: 15%;
   width: 70%;
 }
 #rt-content img {
   width: 100%;
   height: 80%;
 }
 #src-lnk {
   width: 20%;
   bottom: 3vh;
   left: 40%;
 }
 }
@media only screen and (max-width: 961px) and (orientation: landscape) {

  .supported-devices{
    display: block;
  }
  .top-header, #logo, #credit, #menu-nav, #navigation-bar, .tutorial, .numbers{
    opacity: 0%;
  }
  #top-header , .title , .choices {
    opacity: 0%;
  }
}

@media only screen and (max-height: 600px) and (orientation: landscape) {

  .supported-devices{
    display: block;
  }
  .top-header, #logo, #credit, #menu-nav, #navigation-bar, .tutorial, .numbers, img, #rt-title, a, #arrow-history, #eastern-tours-title, #t-title, #manchu-title, #map-mking-title, #view-txt, #txt-home{
    opacity: 0%;
  }
  #top-header , .title , .choices, .h-content-title, .content-mp-mking, .content-title, .h-content-txt, .manchu-content, .eastern-tours-content, button, #h-title{
    opacity: 0%;
  }
}

@media screen and (orientation:portrait){
  .supported-devices {
    display: block;
  }
 #top-header , .title , .choices, .numbers{
    opacity: 0%;
  }
}