button{
  cursor:pointer;
}
button:focus{
  outline:none;
}
a{
  text-decoration: none;
  color:#5a72ff;
  cursor: pointer;
}
input[type="tel"],
input[type="time"],
input[type="text"],
input[type="password"],
input[type="search"],
input[type="email"],
input[type="file"],
input[type="url"],
input[type="number"],
input[type="date"],
textarea,
select{
  outline: none;
  letter-spacing:-0.02em;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid #bcc6ce;
}

input[type="text"]:focus {
    border:1px solid #5a72ff;
    outline: none;
}
input[type="checkbox"] {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

input[type="checkbox"]:not(:checked) + label:before {
  border: 1px solid #bcc6ce;
  box-sizing: border-box;
  border-radius:3px;
}

input[type="checkbox"]:checked + label:before {
  border: 1px solid #bcc6ce;
  box-sizing: border-box;
  border-radius:3px;
}

input[type="checkbox"] + label {
  position: relative;
  padding-left: 1.8rem;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer; /*vertical-align: 7px*/
}

input[type="checkbox"] + label:before {
  box-sizing: content-box;
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 20px;
  height: 20px;
  margin-top: -9px;
  border: 2px solid #5a72ff;
  background: #fff;
  text-align: center;
}

input[type="checkbox"] + label:after {
  box-sizing: content-box;
  content: "";
  position: absolute;
  top: 50%;
  left: 4px;
  width: 9px;
  height: 16px;
  margin-top: -4px;
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transform-origin: 50%;
  transform-origin: 50%;
  -webkit-transition: -webkit-transform 200ms ease-out;
  transition: -webkit-transform 200ms ease-out;
  transition: transform 200ms ease-out;
  transition: transform 200ms ease-out, -webkit-transform 200ms ease-out;
}

input[type="checkbox"] + label:after {
  background-color: transparent;
  top: 50%;
  left: 4px;
  width: 9px;
  height: 5px;
  margin-top: -4px;
  border-style: solid;
  border-color: #5a72ff;
  border-width: 0 0 2px 2px;
  -webkit-border-image: none;
  -o-border-image: none;
  border-image: none;
  -webkit-transform: rotate(-45deg) scale(0);
  transform: rotate(-45deg) scale(0);
  -webkit-transition: none;
  transition: none;
}

input[type="checkbox"]:checked + label:after {
  content: "";
  -webkit-transform: rotate(-45deg) scale(1);
  transform: rotate(-45deg) scale(1);
  -webkit-transition: -webkit-transform 200ms ease-out;
  transition: -webkit-transform 200ms ease-out;
  transition: transform 200ms ease-out;
  transition: transform 200ms ease-out, -webkit-transform 200ms ease-out;
  background: #5a72ff;
}

input[type="checkbox"]:checked + label:before {
  -webkit-animation: borderscale 200ms ease-in;
  animation: borderscale 200ms ease-in;
  background: #5a72ff;
  border: 2px solid #3550ed;
}

input[type="checkbox"]:checked + label:after {
  -webkit-transform: rotate(-45deg) scale(1);
  transform: rotate(-45deg) scale(1);
  border-color: #fff;
}
/* select option:checked,
select option:hover {
  color:#5A72FF;
  box-shadow: 0 0 10px 100px #eef1ff inset;
}
select:focus > option:checked { 
  color:#5A72FF;
  background: #eef1ff !important;
}
option:focus {
  background-color: #eef1ff;
  color: #5A72FF;
} */

th, td{
  color:#656972;
  text-align: left;
  font-weight: 400;
  padding:10px 20px 10px 20px;
}
button.btn-outline-success {
  border-color: #bcc6ce;
}
button.btn-outline-success:hover {
  border-color: #83909a;
  background-color: #fff;
}

button.btn-outline-success:focus {
  color: #5a72ff;
  border-color: #5a72ff;
  background-color: #f1f3ff;
  width: 200px;
}
.hide{
  display:none;
}
.content{  
  width: inherit;
  min-height: 600px;
}
.container {
  max-width: 820px;
  min-width:820px;
  height: 923px;
  padding:0;
  margin: 0;
}
.progress {
  width: inherit;
  height: 5px;
  background-color: #efefef;
}
.progress-25 {
  width: 25%;
  height: 5px;
  background-color: #5a72ff;
}
.progress-33 {
    width: 33%;
    height: 5px;
    background-color: #5a72ff;
}
.progress-50 {
  width: 50%;
  height: 5px;
  background-color: #5a72ff;
}
.progress-66 {
    width: 66%;
    height: 5px;
    background-color: #5a72ff;
}
.progress-75 {
  width: 75%;
  height: 5px;
  background-color: #5a72ff;
}
.progress-100 {
  width: 100%;
  height: 5px;
  background-color: #5a72ff;
}
.font-regular {
  font-weight: 400;
}
.font-medium {
  font-weight: 500;
}
.font-bold {
  font-weight: 700;
}
.font-12 {
    font-size: 12px;
    letter-spacing: -0.02em;
}
.font-14 {
  font-size: 14px;
  letter-spacing: -0.02em;
}
.font-16 {
  font-size: 16px;
  letter-spacing: -0.02em;
}
.font-18 {
  font-size: 18px;
  letter-spacing: -0.04em;
}
.font-20 {
  font-size: 20px;
  letter-spacing: -0.04em;
}
.font-26 {
  font-size: 26px;
  letter-spacing: -0.04em;
}
.font-blue {
  color: #5a72ff;
}
.font-red {
  color: #ff0000;
}
.font-6569{
  color:#656972;
}
.font-373B{
  color:#373B44;
}
.header {
  width: inherit;
  margin: 30px;
}
.title {
  color: #373b44;
  margin: 0 0 30px 0;
}
.float-left{
  float: left;
}
.float-right{
  float: right;
}
.down-befor:before{
  content:url('../img/ic_download.png');
  margin: 0 10px 0 10px;
}

.btn-group>.btn-group:not(:last-child)>.btn, 
.btn-group>.btn:not(:last-child):not(.dropdown-toggle),
.btn-group>.btn-group:not(:first-child)>.btn, 
.btn-group>.btn:nth-child(n+3), 
.btn-group>:not(.btn-check)+.btn{
  border-top-right-radius:5px;
  border-top-left-radius:5px;
  border-bottom-right-radius:5px;
  border-bottom-left-radius:5px;
}
.btn-check:active+.btn-outline-primary, 
.btn-check:checked+.btn-outline-primary, 
.btn-outline-primary.active, 
.btn-outline-primary
.dropdown-toggle.show, 
.btn-outline-primary:active{
  font-weight: 500;
  color:#5A72FF;
  background-color:#F1F3FF;
  border-color:#5A72FF;
}
.btn-outline-primary:focus{
  outline:none;
}
.btn-outline-primary{
  font-size:16px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color:#373B44;
  border-color:#BCC6CE;
}
.btn-outline-primary:hover{
  font-weight: 500;
  color:#373B44;
  background-color:#fff;
  border-color:#83909A;
}
.btn-check:focus+.btn-outline-primary, .btn-outline-primary:focus{
  box-shadow:none;
}
.opt-title{
  color:#5A72FF;
  margin-bottom: 10px;
}
.required:after {
  content: ' *';
  color: red;
  }
.line-s {
  border-top: 2px solid #e4e8eb;
  width: inherit;
  height: 0px;
  background-color: #f5f6f8;
  margin: 20px 0 20px 0;
}
.line-m {
  border-top:2px solid #e4e8eb;
  width: inherit;
  height: 10px;
  background-color: #f5f6f8;
  margin: 30px 0 30px 0;
}

.header > .title > .step {
  color: #5a72ff;
  font-size: 18px;
  letter-spacing: 0.04em;
}
.header > .callcenter {
  width: 160px;
  height: 60px;
  float: right;
  color: #373b44;
  text-align: left;
  vertical-align: middle;
  border-radius: 80px;
  padding: 1px 7px;
  background-color: #f5f6f8;
}
.header:after{
  content: "";
  clear: both;
}

.footer > .btn:hover {
    color: #5a72ff;
}
.footer > .btn:focus {
    outline:none;
    box-shadow:none;
}
.footer {
  border-top: 2px solid #e4e8eb;
  position: relative;
  bottom:0;
  box-sizing: border-box;
  width:inherit ;
  vertical-align: middle;
  color: #5a72ff;
  background-color: #f5f6f8;
  padding: 20px 30px 20px 30px;
}
.footer > button {
  border-radius: 5px;
  color: #5a72ff;
  text-align: center;
  vertical-align: middle;
  width: 140px;
  height: 45px;
  margin-left:20px;
}
.footer > button:disabled {
  background-color: #dadfe3;
}
.footer > .btn-opt {
  width: 150px;
  border: 1px solid #5a72ff;
  float: right;
}
.footer > .btn-opt:hover {
    color: #5a72ff;
}
.footer > .btn-next {
  float: right;
  color: #fff;
  background-color: #5a72ff;
}
.footer > .btn-next:after {
  content: "";
  clear: both;
}
.footer > .btn-prev {
  float: left;
  color: #fff;
  background-color: #656972;
}
/* step-1 */
.step1-content{
  color:#656972;
}
.step1-content > ul > li{
  margin: 15px ;
}

/* step-2 */
.step2-content{
  height:100px;
}
.step2-content > ul > li{
  width:30%;
  display:inline-block;
}
.step2-content > ul > li:not(:first-child){  
  margin-left: 30px;
}

.step2-content > ul > li > select{
  color:#bcc6ce;
  width: 100%; 
  padding:5px;
  background: url('../img/ic_dropdown.png') no-repeat 95% 50%; 
  border: 1px solid #bcc6ce; 
  border-radius: 4px; 
  -webkit-appearance: none;
  -moz-appearance: none; 
  appearance: none; 
}

.step2-content > ul > li > select:not(option:not(:first-child):checked){
  color:#373B44;
}
.step2-content > ul > li > select:focus > option:not(:first-child):checked { 
  color:#5A72FF;
  background: #eef1ff !important;
}
.step2-content > ul > li > select > option{
  padding:10px;
  color:#373B44;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.step2-content > ul > li > select > option:first-child{
  color:#bcc6ce;
}

.step2-content > ul > li > select:focus {
  border-color: #5a72ff;
}

.step2-content-desc .sub-title{
  color:#656972;
  font-weight: 700;
  margin: 0 20px 20px 0;
}
.step2-content-desc .desc-item{
  width:47%;
  float:left;
}
.step2-content-desc .desc-item:last-child {
  width:48%;
  float:right;    
  margin-left:10px;
  padding-left:30px;
  border-left: 2px solid #e4e8eb;      
}
.step2-content-desc .desc-item:last-child > img{
  position: absolute; 
  margin:-70px 0 0 10px;;

  
}
.step2-content-desc .desc-item > table{    
  font-size:14px;
  letter-spacing: -0.02em;
  border: 1px solid #c5ced5; 
  margin-bottom:50px;   
  padding:5px;
}
.step2-content-desc .desc-item table th{
  text-align: center;
  font-weight: 700;
  border: 1px solid #c5ced5;    
  background-color:#eff1f3;
}
.step2-content-desc .desc-item table td{
  text-align: center;
  border: 1px solid #c5ced5;    
}
.step2-content-desc .desc-item > ul >li {
  margin:5px 0;
  color:#656972;
  list-style-type:disc; 
  list-style-position:outside;
}

/* 3.설치환경*/
.step3-content {    
  float:left;
  margin: 0 0 0 20px;
}
.step3-content > ul{ 
  padding:0 0 10px 15px; 
  margin:10px 0 10px 0; 
}
.step3-content > ul:last-child {
  margin-right:0px; 
}
.step3-content > ul > li:first-child {
   font-size:1.0em; padding:0 0 5px 0;
}
.step3-content > ul > li {
  margin-top:10px;  
}
.step3-content > ul > li:nth-child(3n) {
  margin-top:30px;  
}
.step3-desc {
   display:block; float:left; width:35%;
}
.step3-content .btn-group label{
   font-size:0.9em; margin-right:10px; border-radius:5px; min-width:100px;
}

.step4-content {
  font-size:16px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color:#656972;
}
.step4-content .list{
  padding:0px;
}
.step4-content .list > li{
  width:33%;
  float:left;  
  text-align: center;
  vertical-align: middle;
  color:#373B44;
  font-weight: 700;
  font-size:20px;
  letter-spacing:-0.02em;
  padding:10px 0;  
}
.step4-content .list > li > div{
  margin-bottom:10px;
}
.step4-content .list > li:nth-child(2){
  border-left:2px solid #e4e8eb;
  border-right:2px solid #e4e8eb;
}
.step4-content .item-info{
  font-weight: 700;
  font-size:20px;
  letter-spacing:-0.02em;
  color:#373B44;
  padding:5px 0 0 30px;
}
.step4-content div.desc{
  font-weight: 400;
  font-size:14px;
  letter-spacing:-0.02em;
  columns: #656972;
  background-color:#f5f6f8; 
  padding:10px 20px ; 
  margin:10px 30px 10px 0;
}

.agree_content {
    margin-top: 10px;
    padding-bottom :0px;
    padding-left: 10px;
    padding-right:10px;
    width: 100%;
    overflow: auto;
    background: #f5f6f8;
    word-wrap: break-word;
    height: 0px;
    max-height: 200px;
    border-top: 0px solid #e4e8eb;
}

.tbl_pay_plan {
    border: 1px solid;
    outline: none;
    font-size: 11px;
}

    .tbl_pay_plan th {
        border: 1px solid;
        outline: none;
        text-align: center;
        background-color: #bcc6ce;
        font-weight: 400;
        vertical-align: middle;
        height: 20px;
    }

    .tbl_pay_plan td {
        border: 1px solid;
        outline: none;
        text-align: center;
        height: 20px;
    }
.step4-content .option {
    padding-top: 15px;
    list-style-type: disc;
    list-style-position: outside;
}
.step4-content .option > li {
    margin: 0;
    color: #656972;
    list-style-type: disc;
    list-style-position: outside;
}