@charset "utf-8";

/* * */
/* body{
    position: relative;
} */

ul{
    list-style: none;
}

/* navbar */
.w-img{
	padding-left:10px;
	width: 260px;
	height: 75px;
}

.navbar-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
/* top */

.point{
    width:12rem;
}

.top_img{
    width:35rem;
}

.form-btn{
    width:30rem;
   
}

.top{
    background-image: url(../img/top_bg.png);
    background-size:contain;
}

.top-title{
    font-size: 4rem;
}

.top-title2{
    font-size: 2.5rem;
}

.oai{
    width:6rem;
}

@media (max-width: 1140px) {
    .point{
        width:10rem;
    }

    .top_img{
        width:35rem;
    }
}

@media (max-width: 540px) {
    .point{
        width:7rem;
    }

    .top_img{
        width:25rem;
    }

    .form-btn{
        width:20rem;
      
    }

    .top-title{
        font-size: 1.8rem;
    }

    .top-title2{
        font-size: 1.5rem;
    }

    .oai{
        width:2rem;
    }

    .w-img{
        padding-left:10px;
        width: 160px;
        height: 40px;
    }
}

.top{
    background-image: url(../img/back2.jpeg);
    background: linear-gradient(to top, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.7) 50%),url(../img/back2.jpeg); 
    background-size: cover;
    background-repeat: no-repeat;
}


/* problem */

.bg-sky{
    background-color: #A5CFFF;
}

.box-img{
    width:20rem; 
}

.color-blue{
    color:#3366FF;
}

@media (max-width: 1140px) {
    .box-img{
        width:18rem; 
    }
   
}

@media (max-width: 540px) {
    .box-img{
        width:15rem; 
    }
}

/* service */
.circle{
    width:30rem;
}

@media (max-width: 540px) {
    .circle{
        width:15rem;
    }
}



/* 3point */
.point-term-img{
    width:24rem;
}

@media (max-width: 540px) {
    .point-term-img{
        width:20rem;
    }
}

/* suport-menu */
.bg-blue{
    background-color:#3366FF;
}

.text-red{
    color:#E31125;
}

.form-btn-2{
    width:30rem;
    margin-bottom:-7rem;
}

.icon-img{
    width:5rem;
    height:4.5rem;
}

@media (max-width: 540px) {
    .icon-img{
        width:3rem;
        height:2.5rem;
    }

    .form-btn-2{
        width:20rem;
        margin-bottom:-7rem;
    }
}

/* reason */
.reason-img{
    width:30rem;
}

.number-img{
    width:10rem;
}

@media (max-width: 1140px) {
  
   
}

@media (max-width: 540px) {
   
    .number-img{
        width:4rem;
    }

    .reason-img{
        width:20rem;
    }
}

/* service_content */

/* form */
.logo-blue{
    width: 16rem;
	height:4rem;
}

.input-size{
    width:40rem;
}

.send-btn{
    width:10rem;
}

.terms {
	width: 90%;
	height: 200px;
	margin-bottom: 10px;
	padding: 0.5em;
	overflow-y: scroll;
	box-sizing: border-box;
	border: 1px solid #ccc;
	font-size: 14px;
	
}

@media (max-width: 1140px) {
    .input-size{
        width:30rem;
    }
}

@media (max-width: 540px) {
    .logo-blue{
        width: 4.5rem;
        height:1.8rem;
    }

    .input-size{
        width:15rem;
    }
}

ul {
    padding: 0;
  }
  li {
    list-style-type: none;
  }
  dd {
    margin-left: 0;
  }
  
  .flow > li {
    position: relative;
  }
  .flow > li:not(:last-child) {
    margin-bottom: 40px;
  }
 
  .flow > li dl {
    
    max-width: 680px;
    width: 680px;
    padding: 20px 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border: 2px solid rgb(107,144,219);
    border-radius: 10px;
    position: relative;
  }
  .flow > li:not(:last-child) dl::before,
  .flow > li:not(:last-child) dl::after {
    content: "";
    border: solid transparent;
    position: absolute;
    top: 100%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  .flow > li:not(:last-child) dl::before {
    border-width: 22px;
    border-top-color: rgb(107,144,219);
  }
  .flow > li:not(:last-child) dl::after {
    border-width: 20px;
    border-top-color: #fff;
  }
  .flow > li dl dt {
    font-size: 20px;
    font-weight: 600;
    color: rgb(107,144,219);
    -ms-flex-preferred-size: 20%;
    flex-basis: 100%;
    /* margin-right: 2vw; */
    text-align: center;
  }
  .flow > li dl dt .icon {
    font-size: 12px;
    color: #fff;
    background: rgb(107,144,219);
    background: -moz-linear-gradient(left, rgba(107,144,219,1) 0%, rgba(102,213,233,1) 100%);
    background: -webkit-linear-gradient(left, rgba(107,144,219,1) 0%,rgba(102,213,233,1) 100%);
    background: linear-gradient(to right, rgba(107,144,219,1) 0%,rgba(102,213,233,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6b90db', endColorstr='#66d5e9',GradientType=1 );
    padding: 5px 10px;
    margin-bottom: 10px;
    display: block;
    border-radius: 20px;
    position: relative;
    z-index: 100;
  }
  
  td{
      text-align:center;
  }
  
  .fs-7 {
      font-size:1.1rem;
  }
  
  .flow-img{
      max-width:1000px;
      min-width:240px; 
  }

  /* @media (max-width: 540px) {
    .flow > li dl {
       
        max-width: 250px;
    
    }
} */

.card-pill{
   min-width:280px;
   border-radius: 30px;
   margin:0 20px;
  
}


.space{
    width: 1400px;
}

.q-title{
    background-color: #f5f5f6;
}

.frame{
    width:100%;
    height:170vh
}
@media (max-width: 1140px) {
    .plan-space{
        white-space:nowrap;
        overflow:scroll;
    }
    
}

.card-top{
    border-radius: 30px 30px 0 0;
}

.card-bottom{
    border-radius:0 0 30px 30px ;
    height:390px;
}


.free{
    color:#81dbb1;
}

.bg-free{
    background-color: #81dbb1!important;
}

.price-free{
    color:#81dbb1;
}

.content-free{
    background-color: #97ecc433;
}

.lite{
    color:#00DBE7;
}

.bg-lite{
    background-color: #00DBE7!important;
}

.price-lite{
    color:#00DBE7;
}

.content-lite{
    background-color: #00dbe72c;
}

.standard{
    color:#01AAC1;
}

.bg-standard{
    background-color: #01AAC1!important;
}

.price-standard{
    color:#01AAC1;
}

.content-standard{
    background-color: #01abc11f;
}

.premium{
    color:#007cc4;
}

.bg-premium{
    background-color: #007cc4!important;
}

.price-premium{
    color:#007cc4;
}

.content-premium{
    background-color: #00659f2d;
}

.w-90{
    width:90%;
}

.w-20{
    width:20%;
}

th{
    height:60px
}

.tr-border{
    border-bottom:4px solid #0d6efd !important;
}

td{
    font-size: 1.05rem!important;
}

.price{
    font-weight: bold;
}

.th-pb{
    padding-bottom:0.8rem!important;
}