#switch-toggle {
     position: absolute;
     transform-origin: top right;

     top: 2.5%;
     right: 2.5%;

     width: 30%;
     height: 15%;
     max-width: 220px;
     max-height: 70px;

     font-weight: bold;
 }

 #switch-toggle .toggle-top {
     width: 100%;
     height: 40%;

     display: flex;
     justify-content: center;
     align-items: center;

     gap: 0.5vw;
 }

 #switch-toggle .toggle-top span {
     text-align: center;

     font-size: min(2vw, 17.5px);
 }

 #switch-toggle .toggle-down {
     width: 100%;
     height: 60%;

     display: flex;
     justify-content: space-evenly;
     align-items: center;

     background-color: white;
     border-radius: 10px;
 }

 #switch-toggle .toggle-down button {
     background-color: white;
     border-radius: 10px;
     border: white;
     height: 80%;
     width: 47.5%;

     color: black;

     font-size: min(2vw, 17.5px);

 }

 #switch-toggle .toggle-down button.selected {
     background-color: black;
     color: white;
 }

 @media only screen and (min-width: 1100px) {
     body {
         display: flex;
         flex-direction: column;

         align-items: center;
     }

     div {
         font-size: max(1.2vw, 13.2px);
     }

     .bar li:nth-child(2) {
         border-bottom: 1.2rem solid #B93149;
     }

     .vrlogo {
         display: flex;
         justify-content: center;
         align-items: center;

         height: 8vw;
         min-height: 88px;
     }

     .vrlogo * {
         margin-left: max(1vw, 11px);
         margin-right: max(1vw, 11px);

         font-size: max(1.2vw, 13.2px);
     }

     .remind_meun {
         display: none;
     }

     .model {
         width: 80vw;
         height: 45vw;

         margin-top: max(1vw, 11px);

         position: relative;
         display: flex;
         justify-content: center;
         align-items: center;
         background-color: #E2D5C8;

         z-index: 101;

     }

     #model-container {
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
     }

     #loadingText {
         font-size: max(3vw, 33px);
         font-weight: bold;
     }

     .switchBtn {
         z-index: 100;

         width: 26vw;
         display: flex;
         justify-content: space-between;

         position: absolute;
         top: 90%;
     }

     .modelBtn {
         cursor: pointer;
         width: 2vw;
         height: 2vw;
         background-color: #13171B;
         border-radius: 50%;

         display: flex;
         justify-content: center;
         align-items: center;
     }

     .modelBtn img {
         width: 20%;
     }

     .nowPosText {
         width: 20vw;
         height: 2vw;
         background-color: #13171B;
         border-radius: 10px;

         color: white;
         text-align: center;
     }

     .modelInfo {
         width: 80vw;
         min-width: 880px;
         height: 5vw;
         min-height: 55px;
         background-color: #EC7B80;

         position: relative;

         display: flex;
         /* justify-content: center; */
         align-items: center;
         z-index: -1;
     }

     .modelTitle {
         height: 100%;
         font-size: max(3vw, 33px);
         padding: 0;
         margin: 0;

         display: flex;
         justify-content: center;
         align-items: center;

         position: absolute;
         left: max(1vw, 11px);
         color: white;
     }


     .posInfo {
         display: none;

         width: 20vw;
         /* height: 10vw; */
         z-index: 100;
         color: white;
         background-color: #13171B;
         border-radius: 10px;
         position: absolute;
         left: 2vw;
         bottom: 2vw;
         padding: 1vw;

         -webkit-border-radius: 10px;
         -moz-border-radius: 10px;
         -ms-border-radius: 10px;
         -o-border-radius: 10px;
     }

     .fullscreen {
         cursor: pointer;
         width: 2vw;
         min-width: 22px;
         /* height: 10vw; */
         z-index: 100;
         position: absolute;
         right: max(2vw, 22px);
         bottom: max(2vw, 22px);
         /* padding: 1vw; */
     }

     .detail {
         width: 25%;
         height: 100%;

         position: absolute;
         right: max(5vw, 5.5px);

         display: flex;
         justify-content: center;
         align-items: center;

         background-color: #BE5057;
         color: white;
     }

     .detail p {
         margin: 0;
         padding: max(1vw, 11px);

         font-size: max(0.8vw, 8.8px);
     }

     .zlInfo {
         width: 100vw;
         min-width: 1100px;
         background-color: #E2D5C8;

         margin-top: 4vw;
         padding: 2vw 5vw 8vw 5vw;

         display: flex;
         justify-content: space-between;
         align-items: center;
     }

     .zlInfo>* {
         width: 50%;
     }

     .dropDownMenu {
         display: flex;
         justify-content: center;
         align-items: center;
     }

     .dropdown-content {
         display: none;
         position: absolute;
         background-color: #7B7D7F;
         box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
         border-radius: 10px;
         z-index: 105;
     }

     /* 下拉按钮样式 */
     .dropDownMenu button {
         width: 27%;
         background-color: #13171B;
         border-radius: 10px;
         color: white;
         padding: 10px;
         font-size: 16px;
         border: none;
         cursor: pointer;

         display: flex;
         justify-content: flex-start;
         align-items: center;
         gap: 15px;
         min-width: 300px;
     }

     .dropDownMenu button img {
         /* margin-left: max(1vw,11px); */
         aspect-ratio: 1;
         height: 100%;
         width: auto;
     }

     /* 下拉选项样式 */
     .dropDownMenu a {
         color: white;
         padding: 12px 16px;
         text-decoration: none;
         display: block;
     }

     /* 鼠标悬停时的样式 */
     .dropDownMenu a:hover {
         background-color: #626364;
     }

     .pointDefault {
         display: flex;
         flex-direction: column;
         align-items: center;
     }

     .pointOther {
         display: flex;
         flex-direction: column;
         align-items: center;
     }

     .zlHistory {
         width: 100vw;
         min-width: 1100px;
         background-color: #BE5057;

         padding: 2vw 8vw 2vw 8vw;

         display: flex;
         justify-content: space-between;
         align-items: flex-start;

         color: white;
         text-align: justify;
     }

     .historyTitle {
         width: 30%;
     }

     .dropDownMenu {
         width: 70%;
     }

     .zlCourse {
         text-align: center;
     }

     .zlCourse p {
         width: 52vw;
         min-width: 572px;
     }

     .coursePreface {
         display: flex;
         flex-direction: column;
         align-items: center;

         margin-top: max(2vw, 22px);
         margin-bottom: max(4vw, 44px);
     }

     .photoText {
         width: 80vw;
         min-width: 880px;

         display: flex;
         justify-content: space-between;

         margin-bottom: 2vw;
     }

     .photo {
         width: 49%;

         text-align: left;
     }

     .text {
         text-align: justify;
         width: 45%;
     }


     .photo img {
         width: 100%;
     }

     .keyImage {
         position: relative;
     }

     .keyImage {
         width: 90vw;
         height: 60vh;
         position: relative;
         overflow: hidden;
     }

     #keyImg {
         width: 100%;
         height: 100%;
         object-fit: cover;
         object-position: center center;
         display: block;
     }

     .keyContent {
         color: white;
         display: flex;
         align-items: center;

         position: absolute;
         bottom: 0;
         left: max(1vw, 11px);
     }

     .keyNumber {
         font-size: max(3vw, 33px);
         margin-right: max(1vw, 11px);
     }

     .comparison {
         margin-top: max(2vw, 22px);
         width: 90vw;
         min-width: 990px;

         display: flex;
         justify-content: space-between;
     }

     .comparison img {
         width: 30%;
     }

     .comparisonContnet {
         width: 65%;
     }

     .comparisonTitle {
         font-size: 2;
     }

     .castleDescription {
         padding-top: max(2vw, 22px);
         padding-bottom: max(2vw, 22px);

         width: 90vw;
         min-width: 990px;

         display: flex;
         flex-wrap: wrap;
         align-items: center;

         background: linear-gradient(to left, #E1777C 60%, transparent 50%);
     }

     .castleDescription img {
         width: 70%;
     }

     .castleContent {
         padding: 2.5%;
         width: 30%;
     }

     .castleBtn {
         width: 15%;
     }

     .castleBtn * {
         padding: 5px;
         margin: 5px;

         color: white;
         background-color: #827A6F;
         cursor: pointer;
     }

     .castleBtn *:nth-child(1) {
         background-color: #E1777C;
     }

     .mapDescription {
         padding: max(2vw, 22px);
         margin-top: max(5vw, 55px);
         margin-bottom: max(7vw, 77px);
         display: flex;
         flex-wrap: wrap;
         justify-content: space-between;
         align-items: start;

         width: 90vw;
         min-width: 990px;

         background: linear-gradient(to right, #77ACA2 60%, transparent 50%);
     }

     .mapTitle {
         width: 100%;
         font-size: max(2vw, 22px);
         margin-bottom: 1vw;
     }

     .mapBtn {
         width: 40%;
         margin-right: 10%;

         position: relative;
     }

     .mapBtn div {
         position: relative;
         left: min(-5vw, -55px);

         cursor: pointer;
     }

     .mapBtn div:nth-child(1) {
         background: linear-gradient(to right, #77ACA2 6%, #E5D5C3 6% 100%);


     }

     .mapBtn span {
         /* width: 100%; */
         position: relative;
         left: max(5vw, 55px);
         ;
     }



     .mapImg {
         width: 50%;
     }

     .mapImg img {
         width: 100%;
     }

     .mapImgText {
         width: 90%;
         margin-left: 5%;
         margin-top: 1%;
     }

     .clickable-sprite {
         cursor: pointer;
     }
 }


 @media only screen and (max-width: 1100px) {
     body {
         display: flex;
         flex-direction: column;

         align-items: center;
     }

     div {
         font-size: max(1.2vw, 13.2px);
     }

     .bar li:nth-child(2) {
         border-bottom: 1.2rem solid #B93149;
     }

     .vrlogo {
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;

         height: auto;
     }

     .vrlogo img {
         width: 60%;
     }

     .vrlogo * {
         margin-left: max(1vw, 11px);
         margin-right: max(1vw, 11px);
     }

     .remind_meun {
         display: block;
     }

     .model {
         width: 100vw;
         height: 57vw;

         margin-top: max(1vw, 11px);

         position: relative;
         display: flex;
         justify-content: center;
         align-items: center;
         background-color: #E2D5C8;

         z-index: 101;

     }

     #model-container {
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
     }

     #loadingText {
         font-size: max(3vw, 33px);
         font-weight: bold;
     }

     .switchBtn {
         z-index: 100;

         width: 80vw;
         display: flex;
         justify-content: space-between;

         position: absolute;
         top: 90%;
     }

     .modelBtn {
         cursor: pointer;
         width: 5vw;
         height: 5vw;
         background-color: #13171B;
         border-radius: 50%;

         display: flex;
         justify-content: center;
         align-items: center;
     }

     .modelBtn img {
         width: 20%;
     }

     .nowPosText {
         width: 65vw;
         height: 5vw;
         background-color: #13171B;
         border-radius: 10px;

         color: white;
         text-align: center;

         display: flex;
         justify-content: center;
         align-items: center;
     }

     .modelInfo {
         width: 100vw;
         height: auto;
         background-color: #EC7B80;

         position: relative;

         display: flex;
         /* justify-content: center; */
         flex-direction: column;
         align-items: center;
         z-index: -1;
     }

     .modelTitle {
         height: 100%;
         font-size: max(3vw, 33px);
         padding: 0;
         margin: 0;

         display: flex;
         justify-content: center;
         align-items: center;

         /* position: absolute;
        left: max(1vw,11px); */
         color: white;
     }

     .detail {
         width: 100%;
         height: 100%;

         /* position: absolute;
        right: max(5vw,5.5px); */

         display: flex;
         justify-content: center;
         align-items: center;

         background-color: #BE5057;
         color: white;
     }

     .posInfo {
         display: none;

         width: 55vw;
         /* height: 10vw; */
         z-index: 100;
         color: white;
         background-color: #13171B;
         border-radius: 10px;
         position: absolute;
         left: 2vw;
         top: 2vw;
         padding: 1.5vw;

         -webkit-border-radius: 10px;
         -moz-border-radius: 10px;
         -ms-border-radius: 10px;
         -o-border-radius: 10px;
     }

     .fullscreen {
         cursor: pointer;
         width: 4vw;
         /* height: 10vw; */
         z-index: 100;
         position: absolute;
         right: 5vw;
         bottom: 2vw;
         /* padding: 1vw; */
     }

     .detail p {
         margin: 0;
         padding: 5vw;

         /* font-size: max(0.8vw,8.8px); */
     }

     .zlInfo {
         width: 100vw;
         background-color: #E2D5C8;

         margin-top: 4vw;
         padding: 2vw 5vw 8vw 5vw;

         display: flex;
         flex-direction: column;
         justify-content: space-between;
         align-items: center;
     }

     .zlInfo>* {
         width: 80%;
     }

     .dropDownMenu {
         display: flex;
         justify-content: center;
         align-items: center;
     }

     .dropdown-content {
         display: none;
         position: absolute;
         background-color: #7B7D7F;
         box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
         border-radius: 10px;
         z-index: 105;
     }

     /* 下拉按钮样式 */
     .dropDownMenu button {
         width: 80%;
         background-color: #13171B;
         border-radius: 10px;
         color: white;
         padding: 10px;
         font-size: 16px;
         border: none;
         cursor: pointer;

         display: flex;
         justify-content: flex-start;
         align-items: center;
         gap: 15px;

         min-width: 300px;
     }

     .dropDownMenu button img {
         margin-left: max(1vw, 11px);
     }

     /* 下拉选项样式 */
     .dropDownMenu a {
         color: white;
         padding: 12px 16px;
         text-decoration: none;
         display: block;
     }

     /* 鼠标悬停时的样式 */
     .dropDownMenu a:hover {
         background-color: #626364;
     }

     .pointDefault {
         display: flex;
         flex-direction: column;
         align-items: center;
     }

     .pointOther {
         display: flex;
         flex-direction: column;
         align-items: center;

         width: 100vw;
     }

     .zlHistory {
         width: 100vw;
         background-color: #BE5057;

         padding: 2vw 8vw 2vw 8vw;

         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;

         color: white;
         text-align: justify;
     }

     .historyTitle {
         width: 90%;
         margin-bottom: 5vw;
     }

     .dropDownMenu {
         width: 90%;
     }

     .zlCourse {
         text-align: center;
     }

     .zlCourse p {
         width: 80vw;
     }

     .coursePreface {
         display: flex;
         flex-direction: column;
         align-items: center;

         margin-top: max(2vw, 22px);
         margin-bottom: max(4vw, 44px);
     }

     .photoText {
         width: 90vw;

         display: flex;
         flex-direction: column;
         justify-content: space-between;

         margin-bottom: 2vw;
     }

     .photo {
         width: 100%;

         text-align: left;
         margin-bottom: 2vw;
     }

     .text {

         text-align: justify;
         width: 100%;
         margin-bottom: 7vw;
     }


     .photo img {
         width: 100%;
     }

     .keyImage {
         width: 100vw;
         position: relative;
         object-fit: contain;
     }

     .keyImage img {
         width: 100%;
     }

     .keyContent {
         color: white;
         display: flex;
         align-items: center;

         position: absolute;
         bottom: 0;
         left: 4vw;
     }

     .keyNumber {
         font-size: max(3vw, 33px);
         margin-right: max(1vw, 11px);
     }

     .comparison {
         margin-top: 3vw;
         margin-bottom: 3vw;
         width: 90vw;

         display: flex;
         flex-direction: column;
         justify-content: space-between;
         align-items: center;
     }

     .comparison img {
         width: 70%;
     }

     .comparisonContnet {
         width: 90%;
     }

     .comparisonTitle {
         font-size: 2;
     }

     .castleDescription {
         padding-top: max(2vw, 22px);
         padding-bottom: max(2vw, 22px);

         width: 90vw;

         display: flex;
         flex-wrap: wrap;
         align-items: center;

         background: linear-gradient(to left, #E1777C 60%, transparent 50%);
     }

     .castleDescription img {
         width: 90%;
     }

     .castleContent {
         padding: 2.5%;
         width: 90%;
     }

     .castleBtn {
         width: 40%;
     }

     .castleBtn * {
         padding: 5px;
         margin: 5px;

         color: white;
         background-color: #827A6F;
         cursor: pointer;
     }

     .castleBtn *:nth-child(1) {
         background-color: #E1777C;
     }

     .mapDescription {
         padding: max(2vw, 22px);
         margin-top: max(5vw, 55px);
         margin-bottom: max(7vw, 77px);
         display: flex;
         flex-wrap: wrap;
         justify-content: space-between;
         align-items: start;

         width: 90vw;

         background: linear-gradient(to right, #77ACA2 60%, transparent 50%);
     }

     .mapTitle {
         width: 100%;
         font-size: max(2vw, 22px);
         margin-bottom: 1vw;
     }

     .mapBtn {
         width: 80%;

         position: relative;
     }

     .mapBtn div {
         position: relative;
         left: min(-5vw, -55px);

         cursor: pointer;
     }

     .mapBtn div:nth-child(1) {
         background: linear-gradient(to right, #77ACA2 6%, #E5D5C3 6% 100%);


     }

     .mapBtn span {
         /* width: 100%; */
         position: relative;
         left: max(5vw, 55px);
         ;
     }



     .mapImg {
         margin-top: 5vw;
         width: 100%;
     }

     .mapImg img {
         width: 100%;
     }

     .mapImgText {
         width: 90%;
         margin-left: 5%;
         margin-top: 1%;
     }

     .clickable-sprite {
         cursor: pointer;
     }
 }