body {
  padding: 0;
  margin: 0;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  overflow-x: hidden;
  font-size: 0.7vw;

}
:root{
  --purple:#decefe;
  --green:#deefd3;
  --orange:#ffd9b3;
  --blue:#baf4fe;
  --red:#ffdad8;
  --grey:#d3dde2;
  --grey2:#aaa;
  --bg:#f6f8fa;
--bg2:#ded4c2;

}
.colour{
  width: 1.2vw;
  height: 1.2vw;
  display: block;
  border: 1px solid black;
}
.color-col{
  display: flex;
  align-items: center;
  gap:0px 1vw;
}
.popup-wrp{
  display: none;
  margin-bottom: 2vw;
  
}
.colour-sc{
  /* position: absolute; */
  /* top: 20vw; */
  /* right: 6vw; */
  display: flex;
  flex-direction: column;
  gap: 0.5vw 0px;
  margin: 0 auto 0 auto;
  width: fit-content;
}
.green{
  background-color: var(--green);
}
.blue{
  background-color: var(--blue);
}
.red{
  background-color: var(--red);
}
.orange{
  background-color: var(--orange);
}
.purple{
  background-color: var(--purple);
}
.main-wrap {
  display: flex;
  padding: 6vw 2vw 3vw 4vw;
  background-color: #f6f8fa;
  /* max-width: 1920px;
  margin: auto; */
}
.plan-mdl-rgt .white-box{
  background-color: var(--red);
}
.plan-mdl-rgt .white-box .arc{
 background-color: transparent !important
}

.plain-mdl-col.plan-mdl-top .white-box,
.plain-mdl-col.plan-mdl-btm .white-box{
  background-color: var(--blue);
}
.cnf-lft .white-box{
  background-color: var(--green);
}
.plan-mdl {
  background-color: var(--bg2)
}
.main-wrap-lft {
  width: 80%;

  height: 100vh;
}
.main-wrap-rgt {
  width: 20%;
}
.plan-lft,
.plan-rgt {
  width: 30%;
}
.plan-mdl {
  width: 40%;
}
.d-flex {
  display: flex;
}
.plain-mdl-col .white-box {
  flex: 1;
}
.outer2, .outer2 .white-box, .outer3 , .outer3 .white-box{
  background-color: var(--green);
}
.plain-mdl-col .white-box:last-child .two-line {
  background-color: black;
}
.white-box {
  position: relative;
  background-color: white;
  border: 1px solid black;
  height: 5.5vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.white-box.box-232,
.white-box.box-231 {
  height: 4.5vw;
}
.white-box.box-232 .two-line,
.white-box.box-231 .two-line {
  top: -23%;
}
.white-box .line {
  margin-top: 1vw;
  display: block;
  border-bottom: 1px solid black;
}
.text-no {
  font-size: 0.7vw;
  padding-bottom: 1vw;
  text-align: center;
  padding-top: 1vw;
}


.plan-mdl-mdl-btm .white-box:nth-child(2n+1) .arc, .plan-mdl-mdl-btm .white-box:nth-child(2n) .arc{ 
background-color: transparent;
}
.plan-mdl-mdl-btm .white-box:nth-child(2n+1) .arc:after, .plan-mdl-mdl-btm .white-box:nth-child(2n) .arc:after{ 
  background-color:var(--orange)
  }
.white-box:nth-child(2n) .arc {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 32%;
  height: 16%;
  display: block;
  background-color: white;
  padding-bottom: 2px;
  margin-bottom: -1px;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
}
.white-box:nth-child(2n) .arc:after {
  content: "";
  width: 100%;
  height: 100%;
  background-color: white;

  border: 1px solid black;
  border-bottom: none;
  border-right: none;
  position: absolute;
  border-top-left-radius: 100%;
  background: transparent;
}
.white-box:nth-child(2n + 1) .arc {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 30%;
  height: 16%;
  display: block;
  background-color: white;
  padding-bottom: 2px;
  padding-bottom: 2px;
  margin-bottom: -1px;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
}
.white-box:nth-child(2n + 1) .arc:after {
  content: "";
  width: 100%;
  height: 100%;
  background-color: white;
  position: absolute;
  border: 1px solid black;
  border-bottom: none;
  border-left: none;

  border-top-right-radius: 100%;
  background: transparent;
}
.two-line {
  width: 0.4vw;
  height: 2vw;
  position: absolute;
  right: -10%;
  top: -20%;
  border: 1px solid black;
  z-index: 2;
  background-color: white;
}
.two-line:after {
  content: "";
  width: 100%;
  height: 50%;
  background-color: black;
  position: absolute;
  bottom: 0;
  left: 0;
}
.plan-mdl-mdl {
  margin: 2vw 0;
}
.plain-mdl-col .plan-mdl-mdl-btm .white-box {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.plain-mdl-col.plan-mdl-btm .white-box {
  flex-direction: column-reverse;
  height: 5.5vw;
}
.plain-mdl-col.plan-mdl-btm .text-no {
  padding-top: 2vw;
}
.plain-mdl-col.plan-mdl-btm .white-box .line {
  margin-top: 0;
  margin-bottom: 1vw;
}
.plain-mdl-col.plan-mdl-btm .two-line {
  right: -10%;
  bottom: -20%;
  top: unset;
}
.plain-mdl-col.plan-mdl-btm .two-line::after {
  top: 0;
  left: 0;
  bottom: unset;
}
.plain-mdl-col.plan-mdl-btm .box-231 .two-line {
  bottom: -20%;
  top: unset;
}
.plain-mdl-col.plan-mdl-btm .box-232 .two-line {
  bottom: -15%;
  top: unset;
  background-color: white;
  right: 15%;
}

.plain-mdl-col.plan-mdl-btm .white-box:nth-child(2n) .arc {
  right: 0;
  top: 0;
  bottom: unset;
  width: 32%;
  height: 13%;
  display: block;
  background-color: white;
  padding-top: 2px;
  margin-top: -2px;
  border-radius: 0px 0px 50% 0px;
}

.plain-mdl-col.plan-mdl-btm .white-box:nth-child(2n) .arc::after {
  border: 1px solid black;
  border-top: none;
  border-right: none;
  position: absolute;
  border-radius: 0;
  border-bottom-left-radius: 100%;
  background: transparent;
}
.plain-mdl-col.plan-mdl-btm .white-box:nth-child(2n + 1) .arc,
.white-box.left-top .arc {
  left: 0;
  right: unset;
  top: 0;
  bottom: unset;
  width: 32%;
  height: 16%;
  display: block;
  background-color: white;
  padding-top: 2px;
  margin-top: -2px;
  border-radius: 0px 50% 0 0px;
}
.plain-mdl-col.plan-mdl-btm .white-box:nth-child(2n + 1) .arc{height: 13%;}

body .plan-mdl-lft .plain-mdl-col.plan-mdl-btm .white-box .arc:after{
  background-color: var(--blue);margin-top: -1px;
}
.plain-mdl-col.plan-mdl-btm .white-box:nth-child(2n + 1) .arc:after,
.white-box.left-top .arc:after {
  border: 1px solid black;
  border-top: none;
  border-left: none;
  position: absolute;
  border-radius: 0;
  border-bottom-right-radius: 100%;
  background: transparent;
}
.plain-md-outer-rgt .white-box.left-top,
.plain-md-outer-rgt .white-box.left-btm {
  height: 2.8vw;
}
.stor {
  height: 2vw;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5vw;
  background-color: var(--grey2);
  position: relative;
}
.plan-mdl-mdl {
  padding-right: 1.5vw;
}
.stor:after {
  content: "";
  width: 1px;
  height: 84%;
  background-color: black;
  position: absolute;
  right: 0;
  bottom: 0;
}
.stor .arc {
  right: -30%;
  top: 2%;
  position: absolute;
  width: 30%;
  height: 16%;
  display: block;
  background-color: var(--grey2);
}
.stor .arc:after {
  content: "";
  border: 1px solid black;

  border-left: none;
  position: absolute;
  border-radius: 0;
  border-bottom-right-radius: 0px;
  border-bottom-right-radius: 100%;
  background: transparent;
  width: 100%;
  height: 100%;
}
.plain-md-outer-rgt .white-box.left-top .arc {
  border-radius: 0px 0 50% 0;
}
.plain-md-outer-rgt .white-box.left-top .arc,
.plain-md-outer-rgt .white-box.left-btm .arc {
  height: 19%;
}
.d-none {
  display: none;
}
.plan-mdl-mdl {
  position: relative;
}
/* .plan-mdl-mdl:before {
  content: "";
  width: 1vw;
  height: 100%;
  background-image: url(../images/line1.png);
  background-size: cover;
  position: absolute;
  z-index: 1;
  left: -1vw;
} */
.plan-mdl-mdl-top .white-box .arc {
  right: 0;
  left: unset;
  top: 0;
  bottom: unset;
  width: 30%;
  height: 16%;
  display: block;
 
  border-radius: 0;
  background-color: transparent;
}
.plan-mdl-mdl-top .white-box .arc:after {
  border: 1px solid black;
  border-top: none;
  border-right: none;
  position: absolute;
  border-radius: 0;
  border-bottom-left-radius: 0px;
  border-bottom-left-radius: 100%;
  background: var(--orange);
  margin-top: -1px;
}
.plan-mdl-mdl-top .white-box.rgt-arc .arc {
  right: unset;
  left: 0;
  top: 0;
  bottom: unset;
  width: 30%;
  height: 16%;
  display: block;
  border-radius: 0;
  background-color: transparent;
}
.plan-mdl-mdl-top .white-box.rgt-arc .arc:after {
  border: 1px solid black;
  border-top: none;
  border-left: none;
  position: absolute;
  border-radius: 0;
  border-bottom-right-radius: 0px;
  border-bottom-right-radius: 100%;
  background: var(--orange);
}
.plain-md-outer-lft {
  width: 92%;
}
.plain-md-outer-rgt {
  width: 8%;
}
.plain-mdl-col.plan-mdl-top .white-box .arc:after{
  margin-bottom: -1px;
  background-color: var(--blue);
}
.plan-mdl-lft {
  width: 87%;
  background-color: var(--bg2);
}

.plan-mdl-lft .white-box .arc{
  background-color: transparent !important;
}
.plan-mdl-rgt {
  width: 13%;
}
.plan-mdl-rgt .box1 {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.white-box.box2 {
  height: 2.3vw;
}
.plan-mdl-rgt .white-box.box2 .arc {
  margin-top: -2px;
  width: 30%;
  height: 20%;
  background-color: var(--grey);
}
.plan-mdl-rgt .white-box.box2 .arc::after {
  border-top: 1px solid black;
}
.plan-mdl-rgt .white-box.box2 .two-line {
  height: 0.4vw;
  background: black;
  bottom: -10%;
  right: -7%;
  top: unset;
}

.plan-mdl-rgt .white-box.box2:after {
  content: "";
  width: 0.4vw;
  height: 0.4vw;
  background: black;
  bottom: -3%;
  right: 44%;
  top: unset;
  position: absolute;
}
.plan-mdl-rgt .white-box.box1 .two-line {
  height: 0.4vw;
  background: black;
  bottom: -5%;
  right: -7%;
  top: unset;
}
.stor.pdcst {
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  height: 2.7vw;
  background-color: var(--grey2);
}
.pdcast-img img {
  height: 4.6vw;
  background-color: var(--grey2);
}
.stor.pdcst::after {
  right: unset;
  bottom: 0;
  left: 0;
}
.stor.pdcst .arc {
  right: unset;
  left: 0;
  width: 19%;
}
.stor.pdcst .arc:after {
  content: "";
  border: 1px solid black;
  border-left: 1px solid white;
  position: absolute;
  border-radius: 0 0 100% 0;
  background: transparent;
  width: 100%;
  height: 100%;
}
.box {
  width: 1.5vw;
  height: 1vw;
  border-bottom: 0.5vw solid black;
  border-right: 0.5vw solid black;
  position: absolute;
  right: -8%;
  bottom: -9%;
}
.plain-md-outer-lft .white-box {
  height: 3.8vw;
}
.pdcast-img {
  margin-bottom: 1.1vw;
}
.white-box.box3,
.white-box.box4 {
  height: 2.6vw;
}
 .white-box.box3 .arc {
  width: 26%;
  height: 24%;
}
.plain-md-outer-rgt .white-box.left-top .arc::after{
margin-top: -1px;
background-color: var(--green);
}
.plain-md-outer-lft .plan-mdl-mdl-btm .white-box .arc{
  right: 0;
  left: unset;
  background-color: transparent;
  margin: 0;padding: 0;height: 16%;

}
.plain-md-outer-lft .plan-mdl-mdl-btm .white-box:nth-child(6) .arc,
.plain-md-outer-lft .plan-mdl-mdl-btm .white-box:nth-child(9) .arc{
  left: 0;
}
.plain-md-outer-lft .plan-mdl-mdl-btm .white-box:nth-child(6):before,
.plain-md-outer-lft .plan-mdl-mdl-btm .white-box:nth-child(9):before,
.plain-md-outer-lft .plan-mdl-mdl-btm .white-box:nth-child(3):before{
  content: '';
  width: 18%;
  height: 12%;
  background-color: black;
  position: absolute;
  right: -14%;
  bottom: -7%;
  z-index: 2;
}
.plain-md-outer-lft .plan-mdl-mdl-btm .white-box:nth-child(3):before{
  right: -18%;
}
.plain-md-outer-lft .plan-mdl-mdl-top .white-box:nth-child(10):before,
.plain-md-outer-lft .plan-mdl-mdl-top .white-box:nth-child(7):before{
  content: '';
  width: 18%;
  height: 12%;
  background-color: black;
  position: absolute;
  left: -14%;
  top: -7%;
  z-index: 2;
}
.plain-md-outer-lft .plan-mdl-mdl-top .white-box:nth-child(4):before{
  content: '';
  width: 18%;
  height: 12%;
  background-color: black;
  position: absolute;
  left: -3%;
  top: -7%;
  z-index: 2;
}
.plain-md-outer-lft .plan-mdl-mdl-btm .white-box:nth-child(6) .arc:after,
.plain-md-outer-lft .plan-mdl-mdl-btm .white-box:nth-child(9) .arc:after{
  border: 1px solid black;
  border-bottom: none;
  border-left: none;
  border-radius: 0 100% 0 0;
}
.plain-md-outer-lft .plan-mdl-mdl-btm .white-box .arc:after{
  background-color: var(--green);
  bottom: -1px;
  border: 1px solid black;
  border-right: none;
  border-bottom: none;
  border-radius: 100% 0 0 0 ;
}
.plan-mdl-lft .plan-mdl-mdl-top .white-box .arc::after{
background-color: var(--green);
}
.main-wrap .plan-mdl-rgt .white-box.box3 .arc:after{
  background-color: var(--red);
}
.plan-mdl-rgt .white-box.box4{
  border-left: none;
  margin-left: -1px;
}
.plan-mdl-rgt .white-box.box4:before{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  background-color: black;
  height: 70%;
}
.plan-mdl-rgt .white-box.box4 .arc {
  left: 0;
  bottom: 10px;
  width: 30%;
  height: 16%;

  background-color: white;
  padding-bottom: 2px;


  border-radius: 0;
}
.plan-mdl-rgt .white-box.box4:after {
  content: "";
  height: 7px;
  width: 2px;
  background-color: black;
  position: absolute;
  left: 15%;
  bottom: 0;
}
.plan-mdl-rgt .white-box.box4 .arc:after {
  content: "";
  width: 100%;
  height: 100%;
  background-color: white;

  border: 1px solid black;
  border-left: none;
  border-radius: 0;
  border-top-right-radius: 100%;
  background: transparent;
}
.plain-mdl-col.plan-mdl-btm .white-box.box-232 {
  height: 6.3vw;
  margin-top: -2.8%;
}
body .plain-mdl-col.plan-mdl-btm .white-box.box-232{
  background-color: var(--red);
}

/* body .plain-mdl-col.plan-mdl-btm .white-box.box-232 .arc, body .plain-mdl-col.plan-mdl-btm .white-box.box-232 .arc:after,
.plain-mdl-col.plan-mdl-btm .white-box.box-232:nth-child(2n) .arc, .plain-mdl-col.plan-mdl-btm .white-box.box-232:nth-child(2n) .arc:after{
  background-color: var(--red);
} */
.btm-line {
  height: 0.95vw;
  background-color: var(--red);
  border: 1px solid black;
}
.top-design-1 {
  position: absolute;
  top: -15%;
  width: 102%;
  left: 1px;
}
.top-design-lft {
  width: 50%;
  height: 0.7vw;
  border-right: 0.6vw solid black;
  border-bottom: 0.3vw solid black;
}
.top-design-rgt {
  width: 50%;
  height: 3.5vw;
  border-right: 0.4vw solid black;
  border-top: 0.95vw solid black;
}
.top-design-rgt:after {
  content: "";
  width: 0.5vw;
  height: 1px;
  background-color: white;
  top: 18%;
  left: 63%;
  position: absolute;
  z-index: 2;
}
.top-design-rgt:before {
  content: "";
  width: 0.5vw;
  height: 1px;
  background-color: white;
  top: 18%;
  left: 44%;
  position: absolute;
}
.top-design-1:before {
  content: "";
  width: 0.5vw;
  height: 0.5vw;
  border: 0.2vw solid black;
  position: absolute;
  left: 40%;
  top: 1%;
  background-color: white;
}
.top-design-1:after {
  content: "";
  width: 0.5vw;
  height: 0.5vw;
  border: 0.2vw solid black;
  position: absolute;
  left: 59%;
  top: 1%;
  background-color: white;
}
.plain-mdl-col.plan-mdl-btm .box-232 .arc:after,
.plain-mdl-col.plan-mdl-btm .white-box.box-232:nth-child(2n) .arc::after {
  border: 1px solid black;

  border-top: none;

  border-radius: 0;
  border-bottom-right-radius: 100%;

  background: transparent;
}
.plain-mdl-col.plan-mdl-btm .box-232 .arc,
.plain-mdl-col.plan-mdl-btm .white-box.box-232:nth-child(2n) .arc {
  margin-top: -2px;
  height: 10%;
}
.plain-mdl-col.plan-mdl-btm .white-box.box-232:nth-child(2n) .arc:after{
  background-color: var(--red);margin-top: -1px;
}
.position-relative {
  position: relative;
}
.btm-line .two-line {
  right: 48%;
  top: -10%;
}
.btm-line .two-line:after {
  top: 0;
  bottom: unset;
}
.btm-line:before {
  content: "";
  width: 10px;
  height: 100%;
  background-color: var(--red);
  left: -5%;
  position: absolute;
  top: 0;
  z-index: 3;
}
.plan-wrap {
  align-items: flex-end;
}
.plan-rgt-lft {
  width: 25%;
  display: flex;
  flex-direction: column;
  justify-content: end;
}
.plain-md-outer-lft.outer3 .white-box .arc:after{
  background-color: var(--green);
}
.plan-rgt-rgt {
  width: 80%;
}
.tour-btn a{
  background: #B17E4F;
  width: 100%;
  display: block;
  margin: 0px 0px 0.5vw 0px;
  text-decoration: none;
  padding: 0.7vw;
  border-radius: 0.2vw;
  color: white;
  border: 1px solid #B17E4F;
}
.tour-btn a:hover{
 color: #B17E4F;
  background-color: transparent;
  border: 1px solid #B17E4F;
}
.popup-wrp {
  padding: 1vw;
  background-color: #fbf9f5;
  border-radius:1vw;
  font-size: 0.9vw;
  box-shadow: 1px -1px 5px 0px rgba(0, 0, 0, 0.15);
  margin-top: -20%;
}
.popup-wrp h1 {
  font-size: 1.5vw;
  margin-bottom: 1vw;
  line-height: 1;
}
.row-lng {
  display: flex;
  justify-content: space-between;
  padding: 0.5vw 0px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  text-align: center;
  justify-content: center;
}
.lobby {
  width: 100%;
  height: 4.7vw;
  background: var(--orange);
  position: relative;
}
.lobby-btm {
  height: 3vw;
}
.top-angle-lft {
  width: 0.7vw;
  height: 0.7vw;
  display: block;
  border: 1px solid black;
  border-bottom: none;
  border-radius: 0px 100% 0 0;
  background-color: var(--orange);
}
.top-angle {
  display: flex;
  justify-content: center;
  position: absolute;
  top: -0.7vw;
  width: 100%;
  left: 0;
  right: 0;
}
.top-angle-rgt {
  width: 0.7vw;
  height: 0.7vw;
  display: block;
  border: 1px solid black;
  border-bottom: none;
  border-radius: 100% 0 0 0;
  background-color: var(--orange);
}
.top-angle:before {
  content: "";
  width: calc(50% - 0.9vw);
  height: 2px;
  background-color: black;
  position: absolute;
  left: 3%;
  bottom: 0;
}
.top-angle:after {
  content: "";
  width: calc(50% - 0.9vw);
  height: 2px;
  background-color: black;
  position: absolute;
  right: 2%;
  bottom: 0;
}
.lft-icons {
  display: flex;
  align-items: center;
  position: absolute;
  left: 0.4vw;
  bottom: 0.5vw;
}
.rext-ang {
  width: 0.5vw;
  height: 0.5vw;
  border: 1px solid black;
  display: block;
  margin-bottom: 0.5vw;
  transform: rotate(45deg);
}
.box-smp {
  width: 0.3vw;
  height: 0.7vw;
  border: 1px solid black;
  display: block;
  margin-bottom: 0.5vw;
  margin-left: 68%;
}
.box-btm {
  width: 2.5vw;
  height: 0.5vw;
  border: 1px solid black;
  display: block;
  position: absolute;
  bottom: 6%;
  left: 25%;
}
.lobby-btm {
  border-top: 1px solid black;
  border-left: 0.7vw solid black;
  border-right: 0.7vw solid black;
}
.rgt-box .lft {
  width: 0.5vw;
  height: 1.2vw;
  border: 1px solid black;
}
.rgt-box .rgt .top-line {
  height: 0.5vw;
  width: 1.8vw;
  border: 1px solid black;
  display: block;
}
.rgt-box .rgt .round {
  width: 0.5vw;
  height: 0.5vw;
  border: 1px solid black;
  border-radius: 50%;
  display: block;
  margin-left: 0.5vw;
  position: relative;
}
.rgt-box {
  position: absolute;
  right: 0;
  top: 50%;
}
.rgt-box .rgt .round:after {
  content: "";
  width: 1px;
  height: 100%;
  position: absolute;
  left: 48%;
  top: 0;
  background-color: black;
}
.rgt-box .rgt .round:before {
  content: "";
  width: 100%;
  height: 1px;
  position: absolute;
  left: 0;
  top: 48%;
  background-color: black;
}
.lobby .txt {
  text-transform: uppercase;
  font-size: 0.5vw;
  position: absolute;
  right: 0;
  top: 25%;
  width: 100%;
  text-align: center;
}
.plan-rgt-rgt-btm .white-box {
  flex: 1;
  height: 1vw;
  cursor: default;
}
.plan-rgt-rgt-btm {
  width: 96%;
}
.plan-rgt-rgt {
  display: flex;
  flex-direction: column;
  justify-content: end;
}
.plan-rgt-rgt .two-line {
  top: -3%;
}
.plan-rgt-rgt .two-line:after {
  height: 52%;
  top: 0;
}
.plan-rgt-rgt-top-outer {
  display: flex;
  background-color: var(--orange);
  margin-top: -3vw;
}
.box-r1,
.box-r2,
.box-r4 {
  width: 20%;
  height: 3vw;
}
.box-r3 {
  width: 60%;
  height: 2vw;
  position: relative;
}
.box-r3:after {
  content: "";
  width: 82%;
  height: 1px;
  background-color: black;
  position: absolute;
}
.box-r1 {
  background-color:var(--grey2);
  border: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;

}
.box-r1:before {
  content: "";
  width: 0.7vw;
  height: 0.7vw;
  background-color: black;
  position: absolute;
  left: -0.3vw;
  bottom: -0.3vw;
  z-index: 2;
}
.box-r1::after {
  content: "";
  width: 0.7vw;
  height: 0.8vw;
  border: 1px solid black;
  border-radius: none;
  border-right: none;
  border-bottom: none;
  border-radius: 100% 0 0 0;
  position: absolute;
  right: 0;
  bottom: -1px;
  background:var(--grey2);
}
.box-r2 {
  border: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background-color: var(--orange);
}
.box-r2:before {
  content: "";
  width: 0.7vw;
  height: 0.4vw;
  background-color: black;
  position: absolute;
  right: -0.7vw;
  bottom: 3%;
  
}
.box-r2::after {
  content: "";
  width: 0.7vw;
  height: 0.8vw;
  border: 1px solid black;

  border-left: none;
  border-bottom: 1px solid white;
  border-radius: 0 100% 0 0;
  position: absolute;
  left: 0;
  bottom: -1px;
  background-color: var(--orange);
}

.box-r4 {
  border: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background-color:var(--orange);  font-size: 0.5vw;
}

.box-r4::after {
  content: "";
  width: 0.7vw;
  height: 0.8vw;
  border: 1px solid black;

  border-left: none;
  border-bottom: none;
  border-radius: 0 100% 0 0;
  position: absolute;
  left: -1px;
  bottom: 0px;
  background: var(--orange);
}
.left-two-box {
  padding-top: 0.4vw;
  position: relative;
}
.left-two-box:after{
  content: '';
  width: 130%;
  height: 8%;
  background-color: black;
  position: absolute;
  bottom: -55%;
}
.rect-box-r {
  width: 0.8vw;
  height: 0.7vw;
  display: block;
  border: 1px solid black;
  margin-bottom: 0.2vw;
  margin-top: 0.2vw;
}
.lng-box {
  display: block;
  width: 0.4vw;
  height: 1.4vw;
  border: 1px solid black;
}
.small-box {
  display: block;
  width: 0.5vw;
  height: 0.8vw;
  border: 1px solid black;
}
.box-r3 {
  display: flex;
}
.three-pattern {
  display: flex;
  align-items: center;
}
.mdl-two-box {
  display: flex;
  margin-left: 23%;
  gap: 20%;
  margin-top: -5%;
}
.last-box {
  margin-left: 10%;
}
.top-box-r4 {
  display: flex;
}
.top-box-r4 .lft {
  width: 0.7vw;
  height: 0.7vw;
  border-left: 1px solid black;
  border-bottom: 1px solid black;
  background-color: white;
}
.top-box-r4 .rgt {
  width: 0.7vw;
  height: 0.7vw;
  background-color: white;
  position: relative;
  padding: 1px;
}
.top-box-r4 .rgt:after {
  content: "";
  width: 100%;
  height: 100%;
  border: 1px solid black;
  border-right: none;
  border-bottom: none;
  border-radius: 100% 0 0 0;
  position: absolute;
  left: 0;
  top: 0;
}
.min-box {
  width: 0.4vw;
  height: 0.4vw;
  background-color: black;
  margin-top: 118%;
}
.plan-rgt-rgt-mdl {
  display: flex;
  height: 6.5vw;
  background-color:var(--bg2)
}
.plan-rgt-rgt-mdl .lft {
  width: 6.3vw;
  padding-top: 7%;
  height: 100%;
}
.board-room {
  border-left: 1px solid black;
  border-right: 1px solid black;
  height: 85%;
  background-color: var(--orange);
}
.board-room .top-sc {
  width: 3vw;
  height: 0.5vw;
  border: 1px solid black;
  margin: auto;
}
.board-room .btm-sc {
  display: flex;
  justify-content: space-between;
}
.board-txt {
  text-align: center;
  padding-top: 20%;
}
.board-room .btm-lft-sc,
.board-room .btm-rgt-sc {
  display: flex;
}
.board-room .arc {
  width: 0.8vw;
  height: 0.8vw;
  border: 1px solid black;
  border-top: 1px solid white;
  border-left: none;
  border-radius: 0px 0px 100% 0;
  margin-top: 0.3vw;
  display: block;
}
.board-room .line {
  width: 0.7vw;
  height: 0.3vw;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  display: block;
}
.board-room .btm-rgt-sc .line {
  border-right: none;
  border-left: 1px solid black;
}
.board-room .btm-rgt-sc .arc {
  border: 1px solid black;
  border-top: 1px solid white;
  border-right: none;
  border-radius: 0px 0px 0 100%;
}
.lng-btn {
  display: flex;
  align-items: center;
  gap: 0.2vw;
}
.clip {
  width: 0.4vw;
  height: 0.4vw;
  display: block;
  border: 1px solid black;
}
.clip-round {
  display: block;
  width: 0.4vw;
  height: 0.4vw;
  border: 1px solid black;
  border-radius: 50%;
}
.lng-btns {
  display: flex;
  gap: 0.4vw;
  margin-left: 18%;
  margin-top: 4%;
}
.crct-top {
  display: flex;
  justify-content: center;
  gap: 0px 0.1vw;
}
.crct-mdl {
  width: 1.2vw;
  height: 0.4vw;
  border: 1px solid black;
}
.bx {
  width: 0.2vw;
  height: 0.2vw;
  border: 1px solid black;
  display: block;
}
.crct {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  top: 7%;
  right: 7%;
}
.plan-rgt-rgt-mdl {
  position: relative;
}
.lng-txt {
  text-transform: uppercase;
  width: 5vw;
  margin-left: 26%;
  margin-top: 6%;
}
.btm-bxf {
  width: 0.6vw;
  height: 1vw;
  border-left: 0.2vw solid black;
  border-top: 0.2vw solid black;
  background:var(--bg);
  position: absolute;
  right: 0;
  top: 21%;
}
.box-f {
  width: 0.7vw;
  height: 1.3vw;

  right: 0.5%;
  top: 0;
  position: absolute;
  display: flex;
}
.box-f-lft:nth-child(1) {
  width: 60%;
}
.mini-bxf {
  width: 100%;
  height: 28%;
  border: 1px solid black;
  border-right: none;
  border-radius: 0 0 0 100%;
  display: block;
}
.mini-bxf:nth-child(2),
.mini-bxf:nth-child(3) {
  border: 1px solid black;
  border-right: none;
  border-radius: 100% 0 0 0;
}
.box-f-lft {
  width: 40%;
}
.lng-bxf {
  width: 100%;
  height: 100%;
  border: 1px solid black;
  display: block;
  margin-right: 0.1vw;
}
.plan-rgt-rgt-mdl .rgt {
  width: 10.1vw;background-color: var(--orange);
}
.fr-bx-sq .top {
  display: flex;
  gap: 0.1vw;
}
.fr-bx-sq {
  padding-left: 0.4vw;
}
.fr-bx-sq .mdl {
  align-items: center;
  padding-left: 0.3vw;
}
.fr-bx-sq .bx {
  width: 0.4vw;
  height: 0.4vw;
}
.fr-bx-sq .rgt1 .bx {
  height: 0.7vw;
}
.fr-bx-sq .lft1 {
  width: 1.2vw;
}
.lng-btm-lft {
  padding-top: 7%;
}
.lng-btm {
  display: flex;
}
.lng-btm-mdl {
  width: 4vw;
  height: 5vw;
  position: relative;
}

.lng-btm-mdl .three-pattern {
  position: absolute;
  right: 0;
  bottom: 18%;
}
.lng-btm-mdl .img1 {
  position: absolute;
  right: 0;
  top: 7%;
  width: 1.2vw;
}
.lng-btm-mdl .img2 {
  position: absolute;
  right: 46%;
  top: 17%;
  width: 1.2vw;
}
.lng-btm-mdl .img3 {
  position: absolute;
  left: 10%;
  bottom: 21%;
  width: 1.2vw;
}
.lng-btm-rgt {
  width: 3.8vw;
  position: relative;
}
.lng-btm-rgt .bx {
  width: 1.7vw;
  height: 0.5vw;
  margin: 62% 0 0 28%;
}
.rect-box {
  width: 88%;
  height: 100%;
  position: absolute;
  right: -1%;
  top: 0;
  border-top: 1px solid black;
}
.rc-bx1 {
  width: 0.5vw;
  height: 0.5vw;
  border: 1px solid black;
}
.rc-bx2 {
  width: 0.5vw;
  height: 0.5vw;
  border: 1px solid black;
}
.lng-btm-rgt::after {
  content: "";
  width: 0.9vw;
  height: 100%;
  background-color: var(--bg);
  position: absolute;
  right: -27%;
  top: -2%;
  border-left: 1px solid black;
}
.outer-rc {
  gap: 0.1vw;
}

.rect-box::after {
  content: "";
  width: 81%;
  height: 1px;
  background-color: black;
  position: absolute;
  right: 18%;
}
.rect-box::before {
  content: "";
  width: 1px;
  height: 84%;
  background-color: black;
  position: absolute;
  right: 17%;
  top: 12%;
}
.dot-line {
  display: block;
}
.dot-line::after {
  content: "";
  width: 53%;
  height: 1px;
  border-top: 1px dotted black;
  position: absolute;
  right: 9%;
  top: 5%;
}
.dot-line::before {
  content: "";
  width: 1px;
  height: 94%;
  border-left: 1px dotted black;
  position: absolute;
  right: 6%;
  top: 5%;
}
.static-line {
  width: 18%;
  height: 1px;
  border-top: 1px solid black;
  position: absolute;
  right: 0;
  top: 73%;
}
.rc-bx3 {
  width: 0.5vw;
  height: 0.5vw;
  border: 1px solid black;
  position: absolute;
  right: 0;
  top: 40%;
}
.blocks {
  display: flex;
  flex-wrap: wrap;
  background-color: white;
  position: relative;
  width: 3.3vw;
}
.blk-cl {
  width: 50%;
  height: 1.3vw;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-bottom: 8%;
}
.blocks:before {
  content: "";
  width: 100%;
  height: 1px;
  background-color: black;
  position: absolute;
  top: 50%;
  left: 0;
}
.blocks:after {
  content: "";
  width: 1px;
  height: 100%;
  background-color: black;
  position: absolute;
  left: 50%;
  top: 0;
}
.hex-box {
  position: absolute;
  left: 0%;
  width: 50%;
  height: 50%;
  top: 0;

}
.blocks{
 background-color: var(--purple);;
}
.hx-bx1 {
  width: 55%;
  height: 20%;
  border: 1px solid black;
  border-bottom: none;
  position: absolute;
  left: 0;
  bottom: 0;
}
.hx-bx2 {
  width: 20%;
  height: 55%;
  border: 1px solid black;
  position: absolute;
  right: 0;
  top: 0;
  border-right: none;
}
.hex-box:after {
  content: "";
  width: 31%;
  height: 1px;
  border-top: 1px solid black;
  position: absolute;
  right: 15%;
  top: 68%;
  transform: rotate(-45deg);
}
.block1 .hex-b2 {
  position: absolute;
  left: 50%;
}
.block1 .hex-b3 {
  position: absolute;
  top: 50%;
  left: 0;
}
.block1 .hex-b4 {
  position: absolute;
  top: 50%;
  right: 0;
  left: unset;
}
.plan-lft {
  background-color: var(--bg2);
}
.btm-room {
  margin-top: 1vw;
}
.blk-cl:nth-child(3),
.blk-cl:nth-child(4) {
  padding-bottom: 0;
  padding-top: 7%;
}

.top-lft-b .hx-bx1 {
  top: 0;
  border-bottom: 1px solid black;
  border-top: none;
}
.top-lft-b .hx-bx2 {
  bottom: 0;
  top: unset;
}
.top-lft-b.hex-box:after {
  content: "";
  width: 29%;
  height: 1px;
  border-top: 1px solid black;
  position: absolute;
  right: 17%;
  top: 25%;
  transform: rotate(-144deg);
}
.outer2 {
  margin-right: 14%;
}
.top-room {
  margin-top: 1vw;
  margin-right: 1.3vw;
}
.blocks.half-blk::before {
  bottom: 0;
  top: unset;
}
.plan-lft-top-rgt-top {
  margin-bottom: 2vw;
}
.blocks.half-blk .hex-box {
  width: 50%;
  height: 100%;
}
.plan-lft-top-rgt-top {
  gap: 0px 0.85vw;
}
.half-blk.half-single-blk {
  width: 1.6vw;
}
.half-single-blk.blocks::after {
  left: 100%;
}
.blocks.half-blk.half-single-blk .hex-box {
  width: 100%;
}
.blocks.half-blk.half-single-blk .blk-cl {
  padding-left: 14%;
}
.ang-blk {
  width: 100%;
  display: flex;
  position: absolute;
  bottom: -33%;
}
.ang-blk span {
  flex: 1;
  border: 1px solid black;
  height: 0.5vw;
  display: block;
  position: relative;
  background-color: var(--purple);
}
.ang-blk span:after {
  content: "";
  width: 1px;
  height: 178%;
  border-left: 1px solid black;
  position: absolute;
  top: -37%;
  left: 49%;
  transform: rotate(-59deg);
}
.plain-md-outer-lft.outer2 .white-box,
.plain-md-outer-lft.outer3 .white-box {
  flex: 1;
}
.outer2.plain-md-outer-lft {
  width: 55%;
}
.plan-lft-top-rgt-btm {
  padding-right: 6%;
}
.outer3.plain-md-outer-lft {
  width: 36%;
  margin-right: 5%;
}
.outer3.plain-md-outer-lft {
  position: relative;
}
/* .outer3.plain-md-outer-lft::before {
  content: "";
  width: 1vw;
  height: 100%;
  background-image: url(../images/line2.png);
  background-size: cover;
  position: absolute;
  z-index: 1;
  left: -1vw;
} */
.outer2 .plan-mdl-mdl-top .white-box .arc {
  left: 0;
  top: 0;
  right: unset;
  background-color: var(--green);
}
.plain-md-outer-lft.outer2 .plan-mdl-mdl-top .white-box:first-child .arc:after{
border-top: 1px solid black;
margin-left: -1px;
}
.plain-md-outer-lft.outer2 .plan-mdl-mdl-top .white-box:first-child:before{
  content: '';
  width: 23%;
  height: 14%;
  background-color: black;
  position: absolute;
  right: 10%;
  top: -8%;

}
.plain-md-outer-lft.outer2 .plan-mdl-mdl-btm .white-box:first-child .arc{
  margin: 0;
  
}
.plain-md-outer-lft.outer2 .plan-mdl-mdl-btm .white-box:first-child .arc:after{
  bottom: 0;
  margin-left: -1px;
  }
.outer2 .plan-mdl-mdl-top .white-box .arc:after {
  border: 1px solid black;
  border-radius: 0 0 100% 0;
  border-left: none;
  border-top: none;
  background-color: var(--green);
  margin-top: -1px;
}
.outer2 .plan-mdl-mdl-btm .white-box .arc {
  bottom: 0;
  top: unset;
  right: unset;
  border-radius: 0;background-color: var(--green);margin: 0;
}
.outer2 .plan-mdl-mdl-btm .white-box .arc:after {
  border: 1px solid black;
  border-radius: 0 100% 0 0;
  border-left: none;
  border-bottom: none;
    background-color: var(--green)
}
.outer3 .plan-mdl-mdl-top .white-box:nth-child(1) .arc {
  left: 0;
  top: 0;
}
.plan-mdl-lft .plan-mdl-top .white-box .arc{
  height: 13%;
}
.plain-md-outer-lft.outer3 .plan-mdl-mdl-top .white-box:last-child .arc:after{
  border-top: 1px solid black;
}
/* .plain-md-outer-lft.outer3 .plan-mdl-mdl-btm .white-box:last-child .arc:after{
  border-bottom: 1px solid black;
} */
.plain-md-outer-lft.outer3 .plan-mdl-mdl-btm .white-box:last-child .arc{
  margin-bottom:1px;
}
.outer3 .plan-mdl-mdl-top .white-box:nth-child(1) .arc:after {
  border: 1px solid black;
  border-left: none;
  border-top: none;
  border-radius: 0 0 100% 0;
  margin-top: -1px;
  
}

.plan-lft-top-sc-grid {
  width: 90%;
}
.top-design-1.top-des-rgt {
  width: 5vw;
  height: 5vw;
}
.plan-lft-top-sc-grid div:last-child .two-line {
  display: none;
}
.plan-lft-top-sc-grid2 {
  display: flex;
  width: 6.7vw;
  position: absolute;
  right: -15%;
  transform: rotate(270deg);
  top: 17%;
}
.plan-lft-top-sc-grid2 .two-line {
  top: -3%;
}
.plan-lft-top-sc-grid2 .two-line::after {
  top: 0;
  bottom: unset;
}
.plan-lft-top-sc-grid2 > div:last-child .two-line {
  display: none;
}
.plan-lft-top-sc-grid2 > div {
  flex: 1;
  height: 1vw;cursor: default;
  
}
.plan-lft-top-sc-grid-lft2 > div, .plan-lft-top-sc-grid-lft3 > div{
background-color: var(--grey);
}
.plan-lft-top-sc-grid2.plan-lft-top-sc-grid-lft2 > div:hover, .plan-lft-top-sc-grid-lft3 > div:hover{
  background-color: var(--grey) !important;
}
.plan-lft {
  position: relative;
}
.plan-lft-top-rgt-btm2 {
  margin-top: 1.7vw;
  gap: 0px 3.1vw;
}
.lft-blk-sc {
  margin-left: -3vw;
}
.lft-blk-top .white-box {
  width: 5.5vw;
  background-color: var(--blue);
}
.lft-blk-top .white-box.st1 {
  height: 3vw;
  background-color: var(--red);
}
.lft-blk-top .sm-bx-t {
  width: 0.5vw;
  height: 0.5vw;
  border: 1px solid black;
  border-left: none;
  border-bottom: none;
  top: -0.5vw;
  left: 0;
  position: absolute;
  background-color: var(--red)
}

.lft-blk-top .white-box.st1 .arc {
  right: 0;
  bottom: 0;
  left: unset;
  width: 18%;
  height: 27%;background-color: var(--red);
}
.lft-blk-top .white-box.st2 .arc {
  right: 0;
  top: 0;
  bottom: unset;
  left: unset;
  width: 18%;
  height: 27%;
  border-radius: 0;background-color: var(--red);
}
.lft-blk-top .white-box.st2 .arc:after {
  border: 1px solid black;
  border-top: none;
  border-right: none;
  border-radius: 0 0 0 100%;background-color: var(--red);
}
.lft-blk-top .white-box.st1 .arc:after {
  border: 1px solid black;
  border-bottom: none;
  border-right: none;
  border-radius: 100% 0 0 0;background-color: var(--red);
}
.lft-blk-top .white-box.st3 .arc {
  right: 0;
  bottom: unset;
  left: unset;
  width: 24%;
  height: 22%;
  top: 15%;background-color: var(--blue);
}
.lft-blk-top .white-box.st3:after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 30%;
  height: 0.4vw;
  border: 0.2vw solid black;background-color: var(--blue);
}
.lft-blk-top .white-box.st4 .arc, .lft-blk-top .white-box.st4 .arc:after{
  background-color: var(--blue);
}
.lft-blk-top .white-box.st3 .arc:after {
  border: 1px solid black;
  border-top: none;
  border-right: none;
  border-radius: 0 0 0 100%;background-color: var(--blue);margin-right: -1px;
}
.lft-blk-top .white-box.st2 {
  height: 2.5vw;
  background-color: var(--red);
}
.lft-blk-top .white-box.st3,
.lft-blk-top .white-box.st4 {
  height: 3.5vw;
  width: 3vw;
  margin-left: auto;
}
.cnf .white-box {
  width: 100%;
  width: 4.5vw;
  height: 2.5vw;
}
.cnf .cnf-lft .white-box {
  height: 2.16vw;
}
.cnf .text-no {
  padding-top: 0.7vw;
}
.plan-mdl-mdl .white-box{
  background-color: var(--green);
}
.cnf .cnf-lft .white-box .arc {
  left: 0;
  bottom: 0;
  width: 23%;
  height: 32%;
  background-color:transparent;
  margin-left: -1px;
}
.cnf .cnf-lft .white-box .arc:after {
  border: 1px solid black;
  border-bottom: none;
  border-left: none;
  border-radius: 0;
  border-top-right-radius: 100%;
  background-color: var(--green);
}
.cnf .cnf-lft .white-box:last-child .arc:after{
  bottom: 1px;
}
.cnf .cnf-rgt .white-box {
  background-color: var(--orange);
  cursor: default;
}
.cnf .cnf-rgt .white-box:hover, .cnf .cnf-rgt .white-box:hover .arc:after, .cnf .cnf-rgt .white-box:hover .arc{
  background-color: var(--orange) !important;
}
.cnf .cnf-rgt .white-box .arc {
  left: 0;
  top: 0;
  right: unset;
  width: 23%;
  height: 25%;
  background-color: var(--orange);
  border-radius: 0;
  margin-top: -1px;
}
.cnf .cnf-rgt .white-box .arc:after {
  border: 1px solid black;
  border-top: 1px solid white;
  border-left: none;
  border-radius: 0 0 100% 0;
}
.cnf-box img {
  width: 4.9vw;
  background-color: var(--grey);
}
.white-box {
  cursor: pointer;
}
.plan-lft-top-sc-grid.grid-fst .white-box,
.plan-lft-top-sc-grid2.plan-lft-top-sc-grid-lft .white-box{
  background-color: var(--purple);cursor: default;
}
.plan-lft-top-sc-grid.grid-fst .white-box:hover, .plan-lft-top-sc-grid2.plan-lft-top-sc-grid-lft .white-box:hover{
  background-color: var(--purple) !important;
}
.plan-lft-top-sc-grid > div {
  flex: 1;
  height: 1vw;cursor: default;
}
.plan-lft-top-sc-grid .two-line {
  top: -110%;
}
.btm3-btm {
  display: flex;
  align-items: flex-end;
}
.cut-box {
  width: 2vw;
  height: 2.6vw;
  position: absolute;
  right: -0.1vw;
  top: -0.2vw;
  border-top: 0.8vw solid black;
  border-right: 0.8vw solid black;
  z-index: 2;
}
.top-line-bx {
  width: 0.5vw;
  height: 0.3vw;
  border: 0.2vw solid black;

  background-color: white;
  display: block;
  position: relative;
}
.line-bx-wp {
  margin-top: -0.7vw;
  display: flex;
}
.top-line-bx:after {
  content: "";
  width: 100%;
  height: 1px;
  background-color: white;
  position: absolute;
  bottom: -49%;
  left: 0;
}
.line-bx-wp2 {
  position: absolute;
  right: -40%;
  top: 41%;
}
.line-bx-wp2 .top-line-bx {
  width: 0.35vw;
  height: 0.4vw;
}
.line-bx-wp2 .top-line-bx::after {
  content: "";
  width: 1px;
  height: 100%;
  background-color: white;
  position: absolute;
  bottom: 0;
  left: -36%;
}
.line-cut-box {
  width: 0.7vw;
  height: 3.7vw;
  position: absolute;
  top: 27%;
  right: -3%;
  background: black;
  z-index: 2;
}
.line-cut-box .top-line-bx {
  width: 0.35vw;
  height: 0.6vw;
  top: 7%;
  left: 5%;
}
.line-cut-box .top-line-bx::after {
  content: "";
  width: 1px;
  height: 100%;
  background-color: white;
  position: absolute;
  bottom: 0;
  left: -37%;
}
.plan-lft-top-lft {
  margin-left: 3%;
}

.lft-line-cut-box {
  width: 0.7vw;
  height: 3.7vw;
  position: absolute;
  top: -1%;
  left: -2%;
  background: black;
  z-index: 2;
}
.lft-line-cut-box .top-line-bx {
  width: 0.35vw;
  height: 0.6vw;
  top: 41%;
  left: 5%;
}
.lft-line-cut-box .top-line-bx::after {
  content: "";
  width: 1px;
  height: 100%;
  background-color: white;
  position: absolute;
  bottom: 0;
  left: -37%;
}

.plan-lft-top-sc-grid-lft {
  left: -19.5%;
  height: 3vw;
  width: 7vw;
  position: absolute;
  transform: rotate(450deg);
  top: 14%;
}
.stairs-sc img {
  position: absolute;
  top: 28%;
  left: -12%;
  height: 2.5vw;
  
  background-color: var(--grey2);
}
.plan-lft-top-rgt-btm3 .white-box {
  width: 3vw;
  display: flex;
  flex-direction: column;
  justify-content: end;
}
.plan-lft-top-rgt-btm3 .white-box.cf1 {
  height: 3vw;
  width: 4vw;
  background-color: var(--blue);
}
.plan-lft-top-rgt-btm3 .white-box.cf2 {
  height: 4vw;background-color: var(--blue);
}
.plan-lft-top-rgt-btm3 .white-box.cf4 {
  height: 5vw;
  width: 4vw;background-color: var(--red);
}
.plan-lft-top-rgt-btm3 .white-box.cf3 {
  height: 3vw;
  background-color: var(--orange);
  width: 4vw;
  position: relative;cursor: default;
}
.plan-lft-top-rgt-btm3 .white-box.cf3:hover, .plan-lft-top-rgt-btm3 .white-box.cf3:hover .arc,
.plan-lft-top-rgt-btm3 .white-box.cf3:hover .arc:after{
  background-color: var(--orange) !important;
}
.plan-lft-top-rgt-btm3 .white-box.cf3:before{
  content: '';
  width: 30%;
  height: 2px;
  background-color: black;
  position: absolute;
  right: 100%;
  top: -1px;
}
.plan-lft-top-rgt-btm3 {
  width: fit-content;
  right: -21%;
  position: relative;
  top: -8%;
}
.plan-lft-top-rgt-btm3 .white-box.cf1 .arc,
.plan-lft-top-rgt-btm3 .white-box.cf2 .arc,
.plan-lft-top-rgt-btm3 .white-box.cf3 .arc{
left: unset;
right: 0;
bottom: 0;
width: 24%;
  height: 21%;
  background-color: transparent;
}
.plan-lft-top-rgt-btm3 .white-box.cf4 .arc{
  width: 28%;
  height: 19%;
  background-color: transparent;
}
.plan-lft-top-rgt-btm3 .white-box.cf4 .arc:after{
  background-color: var(--red);
  right: 0;
}
.plan-lft-top-rgt-btm3 .white-box.cf2 .arc{
  width: 30%;
  height: 19%;
}

.plan-lft-top-rgt-btm3 .white-box.cf3 .arc:after{
  border: 1px solid black;
  border-bottom: none;
  border-right: none;
  border-radius: 100% 0px 0px 0px ;
  background-color: var(--red);
}
.plan-lft-top-rgt-btm3 .white-box.cf1 .arc:after, .plan-lft-top-rgt-btm3 .white-box.cf2 .arc:after{
  border: 1px solid black;
  border-bottom: none;
  border-right: none;
  border-radius: 100% 0px 0px 0px ;
  background-color: var(--blue);
}
.plan-lft-top-rgt-btm3 .white-box.cf3 .arc{
  background-color: var(--orange);
}
.plan-lft-top-rgt-btm3 .white-box.cf3 .arc:after{
  background-color: var(--orange);right: -1px;border-right: 1px solid white;
}
.plan-lft-top-sc-grid-lft2 {
  left: -17.7%;
  height: 5vw;
  width: 7.5vw;
  position: absolute;
  transform: rotate(450deg);
  top: 38.5%;
}
.long-m-bx{
  width: 35%;
  height: 0.7vw;
  position: absolute;
  top: 56%;
  left: -13%;
}
.long-m-bx > span{
  display: block;
  flex: 1;
  border: 1px solid black;
}
.long-m-bx > span.f-blk{
  background-color: black;
}
.plan-lft-top-sc-grid-lft3 {
  left: -5.1%;
  height: 5vw;
  width: 6.8vw;
  position: absolute;
  transform: rotate(450deg);
  top: 60.5%;
}
.long-m-bx2 {
  width: 39%;
  height: 0.7vw;
  position: absolute;
  top: 76.5%;
  left: -4%;
}
.long-m-bx2 .top-line-bx{
position: absolute;
  left: 63%;
  top: 11%;

}

.plan-lft-top-sc-grid-lft4 {
  left: 17.9%;
  height: 2vw;
  width: 4.5vw;
  position: absolute;
  transform: rotate(450deg);
  top: 81.5%;
}
.cut-box2 {
  width: 2vw;
  height: 2.6vw;
  position: absolute;
  left: 27%;
  bottom: 0%;
  border-top: 0.8vw solid black;
  border-right: 0.8vw solid black;
  z-index: 2;
  transform: rotate(181deg);
}
.cut-box2 .line-bx-wp > span:first-child{
  display: none;
}
.cut-box2 .line-bx-wp{
  padding-left: 20%;
}
.plan-lft-top-sc-grid-btm{
position: absolute;
  bottom: 0;
  width: 62%;
  right: 0;
}
.plan-lft-top-sc-grid.plan-lft-top-sc-grid-btm .two-line{
  top: 0;
}
.plan-lft-top-sc-grid.plan-lft-top-sc-grid-btm .two-line:after{
  top: 0;
}
.bg-white1{
width: 9%;
  height: 65%;
  background: #f6f8fa;
  top: 35%;
  position: absolute;
}
.bg-white2{
  width: 28%;
  height: 43%;
  background: #f6f8fa;
  top: 57%;
}
.cf3 .text-no{
  font-size: 0.5vw;
}
.btm3-top{
width: 64%;
position: absolute;
height: 5vw;
background-color: var(--orange);
}
.lt{
  width: 20%;
  height: 63%;
  border: 1px solid black;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--grey2);
}
.lt:after{
  content: '';
  width: 30%;
  height: 25%;
  border: 1px solid black;
  border-top: none;
  background-color: var(--bg2);
  position: absolute;
  left: 5%;
  top: -1%;
  border-radius: 0 0 100% 0;
}
.crs img{
  width: 57%;border-top: 1px solid black;
  background-color: var(--grey2);
}
.cfe-mini{
  width: 14%;
  height: 17%;
  border: 1px solid black;
  position: absolute;
  right: 30%;
  top: 65%;
}
.cfe-mini:after{
  content: '';
  width: 30%;
  height: 45%;
  border: 1px solid black;
  border-bottom: none;
  background-color: var(--orange);
  position: absolute;
  left: 13%;
  top: -54%;
  border-radius: 100% 0 0 0;
}
.cafe{
  width: 43%;
  height: 65%;
  border-top: 1px solid black;
  border-left: 1px solid black;
  position: absolute;
  top: 0;
  left: 21%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cafe:after{
  content: '';
  width: 78%;
  top: 17%;
  height: 1px;
  background-color: black;
  position: absolute;
  left: 20%;

}
.cafe:before{
  content: '';
  width: 1px;
  top: 17%;
  height: 82%;
  background-color: black;
  position: absolute;
  left: 20%;

}
.cf-bx{
  display: block;
  width: 0.4vw;
  height: 0.4vw;
  border: 1px solid black;
}
.cf-row .cf-bx:after{
  content: '';
  width: 1px;
  height: 100%;
  background-color: black;
  position: absolute;
  right: -26%;
  top: 0;
}
.cf-row{
  display: flex;
  padding: 1% 0 0 32%;
  gap: 0px 12%;
  top: 0;
  right: 18%;
  position: absolute;

}
.cf-btm{
  margin-top: 60%;
  margin-top: 60%;
  position: absolute;
  bottom: 10%;
  left: 0;
}
.cf-btm .cf-bx{
  width: 0.5vw;
}
.cf-line:before{
  content: '';
  width: 22%;
  height: 23%;
  position: absolute;
  border: 1px solid black;
  border-top: none;
  border-right: none;
  left: 39%;
  top: 73%;

}
.cf-line:after{
  content: '';
  width: 1px;
  height: 30%;
  position: absolute;
  border-right: 1px solid black;
  left:48%;
  top: 71%;
  transform: rotate(-37deg);

}
.cafe .txt-no{
  font-size: 0.6vw;padding-left: 30%;
  position: absolute;
}
.plan-mdl-rgt .white-box.box1:nth-child(2n+1) .arc::after{
margin-left: -1px;
background-color: var(--red);
}
.plan-mdl-rgt .white-box.box2{background-color: var(--grey2);}
.plan-mdl-rgt .white-box.box2 .arc::after{
  margin-left: -1px;top: 0;border-top: none;
  background-color: var(--grey2);
}

 .white-box:hover,.hover-item-target, .main-wrap .active,  .main-wrap .active .arc:after,
 .main-wrap .active .arc, .main-wrap .active .sm-bx-t{
  background-color: white !important;
}


 .white-box:hover .arc,  .white-box:hover .arc::after,
 .hover-item-target .arc , .hover-item-target .arc:after,  .hover-item-target.btm-line:before{
  background-color: white !important;
}
.cnf-box{
  width: 4.5vw;
  height: 49%;
  background-color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid black;
}
.plan-mdl-rgt .white-box.box2{background-color: var(--grey2);cursor: default;}
.plan-mdl-rgt .white-box.box2:hover{background-color: var(--grey2) !important;}
.plan-mdl-rgt .white-box.box2:hover .arc:after, .plan-mdl-rgt .white-box.box2:hover .arc{
  background-color: var(--grey2) !important;
}
.ofc-hd-txt{
  position: absolute;
  z-index: 2;
  width: 20vw;
  background: black;
  color: white;
  text-align: center;
  left: 50%;
  top: 2vw;
  transform: translateX(-50%);
}
.ofc-hd-txt p{
  font-size: 1vw;
}
.ofc-hd-txt  h1{
  font-size: 1.5vw;
}
.color-col .text-c{
  font-size: 0.9vw;
}
#office-id{
  font-size: 1.2vw;
}
.price-wp{
  display: block;
  
}
.price-wp span{
  font-size: 1.5vw;
}
#footage{
  display: block;
  margin-top: 0.5vw;
  font-weight: 400;
  font-style: italic;
}

@media (max-width:767px){
  .colour-sc{
    position: absolute;
  left: 63vw;
  top: 13vw;
  }
}