@import url(https://fonts.googleapis.com/css?family=Open+Sans:600);
.main-medium{
   color: #fff;
   width: 100%;
   display:block;
   justify-content: center;
   align-items: center;
   text-align: center;
}
.main-medium-box-1{
    color: #fff;
    width: 100%;
    height: 20vh;
   
}
.main-medium-box-1 h1{
    text-align: center;
    margin: auto;
    font-size: 40px;
  font-family: 'Raleway', sans-serif;
  color: #ffffff;
  text-shadow: 0 20px 40px rgba(255, 253, 253, 0.5);
}
.main-medium-box-1 button{
    background-color: transparent;
    color: #fff;
    width: 150px;
    height: 30px;
    border-radius: 20px;
}
.main-medium-box-2{
    color: #fff;
    width: 100%;
}
.item-1{
    display: block;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 10px 0 10px 0;
    background: url(./images/listmap.png);
}
.box-radius-1{
    width: 100%;
    height: 300px;
}
.box-radius-1 iframe{
    width: 100%;
    height: 300px;
}
.box-info-1{
    width: 100%;
    position: absolute;
    top: 60px;
    font-size: 100px;
    font-weight: 800;
    color: transparent;
    -webkit-text-stroke:5px #000000;
    -webkit-background-clip: text;
    background-position: 0 0;
}
.main-medium-box-2 .item-2{
    width: 100%;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.item-2 .box-radius-2{
    width: 50%;
    text-align: center;
    margin: auto;
}
@import url('https://fonts.googleapis.com/css?family=Roboto:700');

body {
  margin:0px;
  font-family:'Roboto';
  text-align:center;
}

.item-2 .box-radius-2 #container {
  color:#ffffff;
  text-transform: uppercase;
  font-size:36px;
  font-weight:bold;
  padding-top:20px;  
  position:relative;
  width:100%;
  bottom:45%;
  display:block;
}

#flip {
  height:60px;
  overflow:hidden;
}

#flip > div > div {
  color:#fff;
  padding:4px 12px;
  height:45px;
  margin-bottom:45px;
  display:inline-block;
}

#flip div:first-child {
  animation: show 5s linear infinite;
}

#flip div div {
  background:#42c58a;
}
#flip div:first-child div {
  background:#4ec7f3;
}
#flip div:last-child div {
  background:#c138dc;
}

@keyframes show {
  0% {margin-top:-270px;}
  5% {margin-top:-180px;}
  33% {margin-top:-180px;}
  38% {margin-top:-90px;}
  66% {margin-top:-90px;}
  71% {margin-top:0px;}
  99.99% {margin-top:0px;}
  100% {margin-top:-270px;}
}
.item-2 .box-info-2{
    width: 50%;
}
.item-2 .box-info-2 img{
    width: 300px;
    height: 300px;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 0 10px #fff;
}
.main-medium-box-2 .item-3{
    width: 100%;
    height: 400px;
    background: #016a91a1;
    display: flex;
    justify-content: center;
    align-items: center;
}
@import url('https://fonts.googleapis.com/css?family=Raleway:700,900');
.item-3 .box-radius-2{
    width: 50%;
    text-align: center;
    margin: auto;
    font-size: 40px;
  font-family: 'Raleway', sans-serif;
  color: #ffffff;
  text-shadow: 0 20px 40px rgba(0,0,0,.5);
    /* background-color: black;
    opacity: 0.8;
    box-shadow: -2px  2px 10px rgba(0, 0, 0, 0.5), 2px -2px 10px rgba(255, 255, 255, 0.5) inset;
    z-index: 1; */
}

.item-3 .box-info-2{
    width: 50%;
    text-align: center;
}
.item-3 .box-info-2 img{
    width: 300px;
    height: 300px;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 0 10px #fff;
}
.main-medium-box-2 .item-4{
    width: 100%;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.item-4 .box-radius-2{
    width: 50%;
    text-align: center;
    margin: auto;
    font-size: 50px;
    /* background-color: black;
    opacity: 0.8;
    box-shadow: -2px  2px 10px rgba(0, 0, 0, 0.5), 2px -2px 10px rgba(255, 255, 255, 0.5) inset;
    z-index: 1; */
}
.star-rating {
	white-space: nowrap;
}
.star-rating [type="radio"] {
	appearance: none;
}
.star-rating i {
	font-size: 1.2em;
	transition: 0.3s;
}

.star-rating label:is(:hover, :has(~ :hover)) i {
	transform: scale(1.35);
	color: #fffdba;
	animation: jump 0.5s calc(0.3s + (var(--i) - 1) * 0.15s) alternate infinite;
}
.star-rating label:has(~ :checked) i {
	color: #faec1b;
	text-shadow: 0 0 2px #ffffff, 0 0 10px #ffee58;
}

@keyframes jump {
	0%,
	50% {
		transform: translatey(0) scale(1.35);
	}
	100% {
		transform: translatey(-15%) scale(1.35);
	}
}
.item-4 .box-info-2{
    width: 50%;
    text-align: center;
}
.item-4 .box-info-2 img{
    width: 300px;
    height: 300px;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 0 10px #fff;
}
.main-medium-box-2 .item-5{
    width: 100%;
    height: 400px;
    border: 1px solid white;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative  ;
}
.gallery {
    --size: min(70vmin, 400px);
    position: relative;
    top: 50%;
    left: 12%;
    transform: translate(-50%, -50%);
    box-shadow: 
      0 0 10px #0002,
      0 20px 40px -20px #0004;
    width: var(--size);
    height: var(--size);
    background: #fff;
    border: 6px solid #fff;
    display: grid;
    grid-template-rows: 50% 50%;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
    gap: 6px;
    z-index: 1;
  }
  
  .gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  @keyframes moveHorizontal {
    to {
      object-position: 100% 0;
    }
  }
  
  @keyframes moveVertical {
    to {
      object-position: 0 100%;
    }
  }
  
  @keyframes shrinkVertical {
    to {
      height: 0;
    }
  }
  
  @keyframes shrinkHorizontal {
    to {
      width: 0;
    }
  }
  
  
  @keyframes growHorizontal {
    to {
      width: 100%;
    }
  }
  @keyframes growHorizontal2 {
    to {
      width: 70%;
    }
  }
  
  @keyframes growVertical {
    to {
      height: 100%;
    }
  }
  
  
  @keyframes growAll {
    to {
      width: 100%;
      height: 100%;
    }
  }
  
  .gallery img:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
    animation: 
      moveHorizontal 8.5s 0.5s 1,
      shrinkHorizontal 2s 9s ease-in 1;
    animation-fill-mode: forwards;
  }
  
  .gallery img:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    animation: 
      shrinkHorizontal 2s 11s 1;
    animation-fill-mode: forwards;
  }
  
  .gallery img:nth-child(3) {
    grid-row: 2;
    grid-column: 1 / 3;
    align-self: end;
    object-position: 0 0;
    animation:
      moveVertical 5s 1s 1,
      shrinkVertical 3s 5s 1;
    animation-fill-mode: forwards;
  }
  
  .gallery img:nth-child(4) {
    grid-column: 1 / 3;
    grid-row: 1;
    width: 0;
    justify-self: center;
    align-self: start;
    animation: 
      growHorizontal 2.25s 11s 1,
      moveHorizontal 4s 14s 1,
      shrinkVertical 2s 18s 1;
    animation-fill-mode: forwards;
  }
  
  .gallery img:nth-child(5) {
    grid-column: 1;
    grid-row: 2;
    width: 0;
    justify-self: start;
    align-self: end;
    animation: 
      growHorizontal 2.5s 7.5s 1,
      moveVertical 4s 12.5s 1,
      shrinkHorizontal 2s 17s 1;;
    animation-fill-mode: forwards;
  }
  
  .gallery img:nth-child(6) {
    grid-column: 2;
    grid-row: 2;
    width: 0;
    justify-self: end;
    align-self: end;
    animation: 
      growHorizontal 2s 8s 1,
      shrinkHorizontal 2s 17s 1;
    animation-fill-mode: forwards;
  }
  
  .gallery img:nth-child(7) {
    grid-column: 1/3;
    grid-row: 1/3;
    width: 0;
    justify-self: end;
    align-self: end;
    object-position: 0 0;
    animation: 
      growHorizontal 2s 20s 1,
      moveHorizontal 16s 21.5s 1;
    animation-fill-mode: forwards;
  }
.item-5 .box-radius-2{
    width: 100%;
    text-align: center;
    margin: auto;
    position: absolute;
    z-index: 5;
    width: 50%;
    text-align: center;
    margin: auto;
    font-size: 100px;
  font-family: 'Raleway', sans-serif;
  color: #ffffff;
  text-shadow: 0 20px 40px rgba(0,0,0,.5);
    /* background-color: black;
    opacity: 0.8;
    box-shadow: -2px  2px 10px rgba(0, 0, 0, 0.5), 2px -2px 10px rgba(255, 255, 255, 0.5) inset;
    z-index: 1; */
}
.item-5 .box-info-2{
    width: 50%;
    text-align: center;
}
.item-5 .box-info-2 img{
    width: 300px;
    height: 300px;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 0 10px #fff;
}
.main-medium-box-2 .item-6{
    width: 100%;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.item-6 .box-radius-2{
    width: 50%;
    text-align: center;
    margin: auto;
}
.item-6 .box-radius-2 h1{
  font-size: 34px;
}
.item-6 .box-radius-2 p{
  font-size: 18px;
  padding: 0 20px;
}
.item-6 .box-info-2{
    width: 50%;
    text-align: center;
}
.item-6 .box-info-2 img{
    width: 300px;
    height: 300px;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 0 10px #fff;
}
.main-medium-box-2 .item-7{
    width: 100%;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.item-7 .box-radius-2{
  width: 50%;
  text-align: center;
  margin: auto;
}
.item-7 .box-radius-2 h1{
font-size: 34px;
}
.item-7 .box-radius-2 p{
font-size: 18px;
padding: 0 20px;
}
.item-7 .box-info-2{
    width: 50%;
    text-align: center;
}
.item-7 .box-info-2 img{
    width: 300px;
    height: 300px;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 0 10px #fff;
}

.openclose {
    width: 50%;
    font-family: sans-serif;
    perspective: 800px;
    input {
      display: none;
    }
    label {
      cursor: pointer;
      display: block;
      .top {
        width: 200px;
        margin: 0 auto;
        height: 220px;
        transition: 1s all;
        .pin {
          background-color: peachpuff;
          border-radius: 50%;
          width: 75px;
          height: 75px;
          position: relative;
          margin: 0 auto;
          box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.3);
          .rope {
            width: 5px;
            height: 200px;
            z-index: -1;
            background-color: gray;
            top: 50%;
            position: absolute;    
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
            box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
            transition: 1s all;
            &.left {
              left: -21.40px;
              transform: rotate(22deg);
              border-left: 1px solid lightgray;
              border-right: 1px solid gray;
  
            }
            &.right {
              right: -21.40px;
              transform: rotate(-22deg);
              border-right: 1px solid lightgray;
              border-left: 1px solid gray;
            }
          }
        }
      }
      .bottom {
        width: 300px;
        height: 100px;
        line-height: 100px;
        font-size: 50px;
        text-align: center;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        transform-style: preserve-3d;
        box-shadow: 1px 1px 5px black;
        transition: 1s all;
        .side {
          position: absolute;
          width: 100%;
          height: 100%;
          backface-visibility: hidden;
          color: #fff;
          &.front {
            background-color: #54ad54;
            border-radius: 5px;
          }
          &.back {
            background-color: #ef4a4a;
            border-radius: 5px;
            transform: rotateY( 180deg );
          }
        }
      }
    }
    input:checked ~ label{
      .top {
        height: 210px;
        .pin {
          .rope {
            &.left {
              left: 71.90px;
              transform: rotate(-34deg);
            }
            &.right {
              right: 71.90px;
              transform: rotate(34deg);
            }
          }
        }
      }
      .bottom {
        transform: translateX(-50%) rotateY(180deg);
      }
    }
  }
.main-medium-box-2 .item-8{
    width: 100%;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
}
.item-8 .box-radius-2{
  width: 50%;
  text-align: center;
  margin: auto;
}
.item-8 .box-radius-2 h1{
font-size: 34px;
}
.item-8 .box-radius-2 p{
font-size: 18px;
padding: 0 20px;
}
.item-8 .box-info-2{
    width: 50%;
    height: auto;
}
.item-8 .box-info-2 img{
  width: 800px;
  height: 800px;
}
.main-medium-box-2 .item-9{
    width: 100%;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.item-9 .box-radius-2{
  width: 50%;
  text-align: center;
  margin: auto;
}
.item-9 .box-radius-2 h1{
font-size: 34px;
}
.item-9 .box-radius-2 p{
font-size: 18px;
padding: 0 20px;
}
.item-9 .box-info-2{
    width: 50%;
    text-align: center;
    /* background: url(./images/high-angle-location-symbol-smartphone.jpg); */
}
.item-9 .box-info-2 img{
    width: 300px;
    height: 300px;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 0 10px #fff;
}
.main-medium-box-2 .item-10{
    width: 100%;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.item-10 .box-radius-2{
  width: 50%;
  text-align: center;
  margin: auto;
}
.item-10 .box-radius-2 h1{
font-size: 34px;
}
.item-10 .box-radius-2 p{
font-size: 18px;
padding: 0 20px;
}
.item-10 .box-info-2{
    width: 50%;
    text-align: center;
}
.item-10 .box-info-2 img{
    width: 300px;
    height: 300px;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 0 10px #fff;
}
.main-medium-box-2 .item-11{
    width: 100%;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.item-11 .box-radius-2{
  width: 50%;
  text-align: center;
  margin: auto;
}
.item-11 .box-radius-2 h1{
font-size: 34px;
}
.item-11 .box-radius-2 p{
font-size: 18px;
padding: 0 20px;
}
.item-11 .box-info-2{
    width: 50%;
    text-align: center;
}
.item-11 .box-info-2 img{
    width: 300px;
    height: 300px;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 0 10px #fff;
}
.main-medium-box-2 .item-12{
    width: 100%;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.item-12 .box-radius-2{
  width: 50%;
  text-align: center;
  margin: auto;
}
.item-12 .box-radius-2 h1{
font-size: 34px;
}
.item-12 .box-radius-2 p{
font-size: 18px;
padding: 0 20px;
}
.item-12 .box-info-2{
    width: 50%;
    text-align: center;
}
.item-12 .box-info-2 img{
    width: 300px;
    height: 300px;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 0 10px #fff;
}
.main-medium-box-2 .item-13{
    width: 100%;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.item-13 .box-radius-2{
  width: 50%;
  text-align: center;
  margin: auto;
}
.item-13 .box-radius-2 h1{
font-size: 34px;
}
.item-13 .box-radius-2 p{
font-size: 18px;
padding: 0 20px;
}
.item-13 .box-info-2{
    width: 50%;
    text-align: center;
}
.item-13 .box-info-2 img{
    width: 300px;
    height: 300px;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 0 10px #fff;
}
.main-medium-box-2 .item-14{
    width: 100%;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.item-14 .box-info-2{
    width: 100%;
    text-align: center;
}
.item-14 .box-info-2 button{
    width: 300px;
    height: 40px;
    font-size: 15px;
    background: #052874b2;
    color: white;
    border: 1px solid #052874b2;
    border-radius: 20px;
}
/* ------------------- Small div --------------------- */
.Addon-div{
    width: 100%;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: linear-gradient(270deg, rgba(2,0,36,0.4) 0%, rgba(9,9,121,0.4) 35%, rgba(0,212,255,0.4) 100%);
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(5px);
    --webkit-backdrop-filter: blur(17px);
}
.Addon-div .box-radius-2 p{
  font-family: "Nanum Myeongjo", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}
.Addon-div .box-radius-2 h1{
  font-family: "Archivo Black", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}
.Addon-features ul{
  display: flex;
  justify-content: center;
  align-items:center;
  flex-wrap: wrap;
  width: 100%;
}
.Addon-features ul li{
  width: 600px;
  height: 80px;
  display: flex;
  justify-content:start;
padding-top:30px;
padding-left:200px;
}
.Addon-features ul li img{
  width: 20px;
  height: 20px;
}