.sec-width {
  &.sub { 
    padding:40px 0; 
  }
  &.pb-none {
    padding: 40px 0 0 0;
  }
}

@media(max-width:1200px) {
  .sec-width {
    &.sub { 
      padding: 40px 30px; 
    }
    &.pb-none {
      padding: 40px 30px 0 30px;
    }
  }
}

@media(max-width:768px) {
  .sec-width {
    &.sub { 
      padding: 40px 20px; 
    }
    &.pb-none {
      padding: 20px 20px 0 20px;
    }
  }
}

@media(max-width:500px) {
  .sec-width {
    &.sub { 
      padding: 30px 20px; 
    }
    &.pb-none {
      padding: 20px 20px 0 20px;
    }
  }
}

.cont-banner {
  width:100%;  text-align: center;background-position: center; background-size: cover; background-repeat: no-repeat; margin-bottom:70px;
  .cont {
    background: rgba(3,17,18,.7);width: 100%;height: 100%;padding:40px;
    span.cont-sub { font-size:1.6rem; padding-bottom:20px; color:#aaa; display:block; word-break: keep-all; }
    .h4 { font-size:2.5rem; color:#fff; font-weight:700; }
    .box { padding:20px;background: rgba(98,134,254,.3); font-size:1.4rem; line-height:28px;color:#fff; margin-top:30px; }
    .btn-wrap {
      margin:30px 4px 0;
      button {
        height:35px; line-height:34px; font-size:1.2rem; transition: box-shadow .25s ease; font-weight:600; display: inline-block;
        &:hover {
          box-shadow: 0 0 0 4px rgba(110,110,110,0.75)
        }
        > img {
          width:16px; height:16px; vertical-align: middle; margin-right:5px;
        }
      }
    }
  }
}

.noti-txt {
  padding: 15px 0; font-size: 1.2rem; color: #c55959; font-weight: 500; line-height: 1.7;
}

@media(max-width:768px) {
  .cont-banner {
    .cont {
      padding:25px;
      .box {
        font-size: 1.3rem; line-height:25px;
        br { display: none; }
      }
      .btn-wrap { margin-top: 20px; }
    }
  }
}

@media(max-width:500px) {
  .cont-banner {
    .cont {
      padding: 35px 10px;
      span.cont-sub { font-size:1.4rem; padding-bottom:15px; }
      p.h4 { font-size:2rem; }
      .box { margin-top: 20px; }
      .btn-wrap { 
        margin: 20px 2px 0;
        button { padding: 0 10px; font-size: 1rem;}
      }
    }
  }
}

.intro-wrap {
  .img-wrap {
    text-align: center;
    img {
      width:80%; height:100%;
    }
  }
}
@media(max-width:900px) {
  .intro-wrap {
    .img-wrap {
      img {width:100%;}
    }
  }
}


.result-area {
  float:left; line-height:34px; font-size:1.4rem; position:relative; top:12px;
  b.point {
    color:var(--main-color);
  }
}

@media(max-width:768px) {
  .result-area {
    float:none; font-size:1.3rem; margin-top:10px;  top:auto;
  }
}

.authorize-txt {
  clear: both;
  p {
    color: #ed6c5f; font-size: 1.3rem; font-weight: 600; line-height: 20px; padding-top: 5px; 
  }
  p.success {
    color: #4e8cd7;
  }
}




.com-cont {
	.s-title {
		font-weight: 600; font-size:1.8rem; padding-left:20px; margin-bottom:20px; display: block; position:relative;
		&:before,
		&:after {
			content: ''; width: 5px; height: 5px; background: var(--main-color); border-radius: 10px; position: absolute;
		}
		&:after {
			top: 3px; left: 0;
		}
		&:before {
			bottom: 3px; left: 0;
		}
	}
	.s-txt {
		padding-left: 20px; padding-top: 20px; font-size:1.4rem; line-height: 23px; color: #555;
	}
	.content-sbox {
		padding-left: 15px;
	}
	.sub-title {
		position:relative; font-size:1.5rem; padding-left: 23px; padding-bottom: 15px; font-weight:600;
		&:after {
			position:absolute; content:''; width:11px; height:11px; border-radius: 50%; border: 2px solid var(--main-color); left:5px; top: 4px;
		}
	}
	.sub-text {
		padding-left: 20px; font-size:1.5rem; line-height: 1.9; color: #555;
	}
	.content-box {
		margin-bottom:50px;
	}
	.title-area {
		position:relative; padding-bottom:20px; margin-bottom:20px; border-bottom:2px solid var(--main-color); 
		.title {
			font-size: 2.1rem; font-weight: 600;
		}
	}
	.content-sbox {
		margin-bottom: 30px;
		.content-sbox {
			margin-left: 20px; border-left: 3px solid #dee3eb;
			.sub-text {
				padding-left: 0;
			}
		}
		> .title {
			position: relative; font-size: 1.5rem; font-weight: 500; padding: 5px 0 10px 17px;
			&:after {
				content: '▶'; font-size: 12px; position: absolute; top: 7px; left: 0;
			}
		}
	}

  .normal-table {
    &.normal-table-vertical {
      table {
        tbody {
          tr {
            th {
              padding: 15px 10px; background: #f4f4f4; border-bottom:1px solid #fff; font-weight: 600; text-align: center;font-size: 1.3rem;
            }
            td {
              padding: 15px 10px; text-align: left !important; border:0; border-right:1px solid #eee; border-bottom:1px solid #eee;
            }
          }
        }
      }
    }
    .bold {
      padding-top: 15px;
    }
  }
  b {
    font-weight: 500; color: #111;
  }

  .bold {
    font-weight: 500;display: block; font-size: 1.3rem;
    &.red {
      color:#C40E11;
    }
  }

  .cont-img-box {
    text-align: center;
    img {
      max-width: 100%; height: auto;
    }
  }
}

@media all and (max-width: 870px){
	.com-cont {
		.title-area {
			padding-bottom: 15px; margin-bottom: 15px; 
			.title {
				font-size: 1.6rem;
			}
		}
		.s-title {
			font-size: 1.5rem; padding-left: 10px; margin-bottom: 15px;
			&:after, &:before {
				width: 4px; height: 4px;
			}
		}
		.sub-title {
			font-size: 1.4rem; padding-bottom: 7px;
		}
		.sub-text {
			font-size: 1.3rem; padding-left: 0;
		}
		.content-sbox {
			margin-bottom: 20px; padding-left: 5px;
			.content-sbox {
				margin-left: 0; padding-left: 15px;
			}
			> .title {
				font-size: 1.4rem; padding: 5px 0 10px 15px;
				&:after {
					font-size: 10px;
				}
			}
		}
	}
}