html{
  scroll-padding-top: 100px;
}

.condition-sec{
  position:relative;;
}

.condition-items{
  display:flex;
}

.condition-box{
  width: 30%;
  flex-shrink: 1;
  position: sticky;
  height: fit-content;
  top: 50px;
  max-height: 500px;
  overflow-y: auto;
  padding: 20px;
  background-color: color-mix(in srgb, var(--primary) 5%, transparent);
}

.condition-part{
  width:100%;
  flex-grow: 2;
  margin-left: 64px;
}
.legal-content h1,h2,h3,h4{
  margin-bottom:16px;
  font-weight:900;
}

.legal-content h5,h6{
  margin-bottom:16px;
  font-weight:700;
}

.condition-part ol,.condition-part ul{
  padding-left: 20px;
  margin-bottom: 40px;
}

.condition-list{
  list-style: none;
}

.condition-list li:not(:last-child){
  margin-bottom:12px;
}

.condition-link{
  color: inherit;
  transition: all 200ms ease-in-out;
  text-decoration:none;
  display:block;
  font-weight:500;
  font-size:16px;
  padding: 10px;
}

/* .condition-link:hover{
color: rgba(var(--dark),1);
}

.condition-link:active{
color: rgba(var(--dark),1);
font-weight:800;
} */

.legal-content p{
  margin-bottom:12px;
  color: #3f3f3f;
}

.richtext li{
  margin-left:10px;
  margin-bottom:10px
}

.richtext img{
  width:auto;
  height:auto;
  object-fit: cover;
  max-width:100%;
  margin:10px 0;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.richtext span img{
  display: block;  
}

.condition-link.active-list ,.condition-link:hover{
  color: var(--primary);
}

.legal-content{
  margin-bottom:30px;
}

.legal-content strong{
  font-weight:500;
  color:var(--black);
}

.browser-support-box {
  display: flex;
  gap: 15px;
  /* border: 1px solid #696969; */
  align-items: center;
  color: white;
  padding: 20px 25px;
  background-color: #ffffff;
  margin-block: 50px;
  width: 100%;
  box-shadow: rgba(17, 17, 26, 0.1) 0px 0px 16px;

}

.browser-box-title {
  width: 100%;
}

.box-title {
  color: #000000;
  margin-bottom: 0;
  font-weight: 800;
}

.browser-table {
  width: fit-content;
}

.table-content {
  border: 1px solid white;
}

.table-column {
  padding: 5px;
}



tr {
  display: flex;
  border-radius: 10px;
  border: 1px solid #6969694e;
}

.browser-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: black;
  border-radius: 30px;
  width: 58px;
  height: 36px;
}

.browser-icon span {
  display: block;
  height: 25px;
  width: auto;
  aspect-ratio: 1;
}
.browser-icon span img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.browser-icon span:nth-child(1) {
  z-index: 5;
  margin-right: -7px;
  /*   background-image: url(https://developer.mozilla.org/static/media/chrome.5e791c51c323fbb93c31.svg); */
}

.browser-icon span:nth-child(2) {
  z-index: 4;
  /*   background-image: url(https://developer.mozilla.org/static/media/browser-check.d960a1037f7d1ffb1eec.svg); */
}

.not-support {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 79.301 98"><g fill="%23ea8600"><path fill-rule="evenodd" d="M30.3 6a42.823 42.823 0 0 0-26.616 9.226A59.307 59.307 0 0 0 0 10.489 48.786 48.786 0 0 1 30.3 0c27.063 0 49 21.938 49 49s-21.937 49-49 49A48.786 48.786 0 0 1 0 87.511a59.307 59.307 0 0 0 3.684-4.737A42.823 42.823 0 0 0 30.3 92c23.748 0 43-19.252 43-43S54.049 6 30.3 6Z" clip-rule="evenodd"/><path d="m38.633 48.5 9.667-9.667L43.467 34 33.8 43.667 24.134 34 19.3 38.834l9.666 9.666-9.666 9.666 4.833 4.833 9.666-9.666 9.666 9.666 4.834-4.833z"/></g></svg>');
}
.table-column:nth-child(3n) .tooltip{
 border-right: 0px solid #6969694e;
  right: -68%;
}

.table-column:nth-child(3n) .tooltip::after {
  left: 60%;
}

.tooltip {
  top: -142%;
   right: -148%;
  white-space: nowrap;
  position: absolute;
  padding: 5px 10px;
  border-radius: 10px;
  background-color: #000;
  color: white;
  width: fit-content;
  z-index: 6;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.tooltip::after {
  content: "";
  display: block;
  z-index: 5;
  position: absolute;
  width: 16px;
  height: auto;
  aspect-ratio: 1;
  background-color: #000;
  bottom: -7px;
  transform: translate(-50%) rotate(45deg);
  left: 36%;
}



.browser-icon:hover .tooltip {
  opacity: 1;
  visibility: visible;
}
@media only screen and (min-width: 575px){
  .table-column:not(:last-child) {
  border-right: 1px solid #6969694e;
}
}

@media only screen and (max-width: 1023px){
  body{
    font-size:16px;

  }

  .condition-items{
    flex-direction: column;
  }

  .condition-box{
    width: 100%;
    margin-bottom:30px; 
    position:static;
  }

  .condition-part {
    margin-left: 0px;
  }

  .condition-list {
    list-style: none;
    display: flex;
  }

  .condition-list li{
    white-space: nowrap;
  }

  .condition-list li:not(:last-child){
    margin-bottom: 0px;
  }

}



@media only screen and (max-width: 639px){
  condition-box{
    display:none;
  }
}
@media (max-width: 767px) {
  .browser-support-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .box-title {
    text-align: center;
  }

  tr {
    flex-wrap: wrap;
  }


  @media  only screen and  (max-width: 767px) {
    .browser-support-box {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }

    .box-title {
      text-align: center;
    }

    tr {
      flex-wrap: wrap;
    }
  }

  @media only screen and (max-width: 639px){
    condition-box{
      display:none;
    }
  }


  @media only screen and (max-width: 574.99px) {
    .table-column {
      display: flex;
      justify-content: center;
      width: 33.33%;
    }
 .table-column:not(:nth-child(3n) ) {
      border-right: 1px solid #6969694e;
    }
    
    .table-column:nth-child(even):last-child(-n+2) ,.odd-last .table-column:nth-last-child(2){
      border-bottom: 1px solid #6969694e;
    }
    .table-column:not(:nth-last-child(-n+3)) {
      border-bottom: 1px solid #6969694e;
    }
    /*        .table-column:nth-last-child(2){
    border-bottom: 1px solid #6969694e;
  } */
    .even-last .table-column:nth-last-child(2){
      border-bottom: 0px solid #6969694e;

    }
  }