@font-face {
  font-family: "NanumSquareRound";
  font-style: normal;
  font-weight: 700;
  src: local("/assets/font/NanumSquareRoundB"), /* computer */
    url("/assets/font/NanumSquareRoundB.eot"), /* IE9 Compat Modes */
    url("/assets/font/NanumSquareRoundB.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("/assets/font/NanumSquareRoundB.woff2") format("woff2"), /* Modern Browsers */
    url("/assets/font/NanumSquareRoundB.woff") format("woff"), /* Modern Browsers */
    url("/assets/font/NanumSquareRoundB.ttf") format("truetype"); /* Safari, Android, iOS */
}
@font-face {
  font-family: "NanumSquareRound";
  font-style: normal;
  font-weight: 800;
  src: local("NanumSquareRoundEB"), /* computer */
    url("/assets/font/NanumSquareRoundEB.eot"), /* IE9 Compat Modes */
    url("/assets/font/NanumSquareRoundEB.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("/assets/font/NanumSquareRoundEB.woff2") format("woff2"), /* Modern Browsers */
    url("/assets/font/NanumSquareRoundEB.woff") format("woff"), /* Modern Browsers */
    url("/assets/font/NanumSquareRoundEB.ttf") format("truetype"); /* Safari, Android, iOS */
}

.noaction {
  transition: none !important;
  cursor: default !important;
  border-radius: 12px;
  height: 24px;
  width: 24px;
  text-align: center;
  line-height: 24px;
  padding: 0;
  margin-right: 4px;
}

.btn-success {
  background-color: #44B97B;
  border-color: #44B97B;
}

.noaction.btn-success:hover {
  background-color: #44B97B;
  border-color: #44B97B;
}

.g-color {
  color: #44B97B;
}

.o-color {
  color: #FCB94C;
}

.r-color {
  color: #F16675;
}

.btn-outline-secondary {
  color: #b7b7b7;
  border-color: #b7b7b7;
}

.btn-outline-secondary:not(:disabled):not(.disabled).active, .btn-outline-secondary:not(:disabled):not(.disabled):active, .show>.btn-outline-secondary.dropdown-toggle {
  color: #fff;
  background-color: #F16675;
  border-color: #F16675;
}

.btn-outline-secondary:hover {
  color: #b7b7b7;
  background-color: #fff;
  border-color: #b7b7b7;
}

.btn-test {
  color: #44B97B;
  background-color: #fff;
}

a.btn-test, a.btn-test:hover {
  color: #44B97B;
  text-decoration: none;
}

body {
  padding-top: 5rem;
  background-color: #44B97B;
  font-family: 'NanumSquareRound',sans-serif;
  color: #fff;
}

.navbar {
  background-color: #fff;
  color: #44B97B;
}

.navbar-light .navbar-nav .nav-link,
.navbar a, .navbar-light .navbar-nav .active>.nav-link, 
.navbar-light .navbar-nav .nav-link.active, 
.navbar-light .navbar-nav .nav-link.show, 
.navbar-light .navbar-nav .show>.nav-link {
  color: #44B97B;
}

.navbar .navbar-brand, .navbar .navbar-brand a {
  font-weight: 800;
  color: #44B97B;
  max-width: 180px;
}

.navbar .small {
  color: #ccc;
}


.navbar-light .navbar-toggler {
  color: #44B97B;
  border-color: #44B97B;
}

.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(69,185,124, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

main.container {
  margin-bottom: 50px;
}

.starter-template {
  padding: 3rem 1.5rem;
  text-align: center;
}

.starter-template h1 {
  margin-bottom: 40px;
}

.card-test {
  color: #58585b;
  padding: 0 10px 20px 10px;
  
}

.card-test .card-content {
  padding: 15px 0;
  background-color: #fff;
  border-radius: 5px;
}

.card-test .card-content .icon {
  max-width: 160px;
  margin: 15px auto;
}

.card-test .card-content h4 {
  font-weight: 800;
  color: #58585b;
  line-height: 1.5em;
  font-size: 1.2rem;
}

.card-test .card-content p {
  font-size: 15px;
}

.card-test .card-content a {
  color: #58585b;
  text-decoration: none;
}

.test-start p {
  line-height: 1.8rem;
}

.card-test .card-content.test-content {
  padding: 20px 30px; 
}

.card-test .card-content.result-content {
  padding: 40px 50px; 
  font-weight: 700;
}

.card-test .card-content.result-content h3 {
  line-height: 1.6em;
}

.card-test .card-content.result-content p {
  font-size: 18px;
}

.test-content .wrap-question {
  padding: 30px 0 30px 0;
  border-bottom: 1px dashed #ccc;
}

.card-test .card-content.result-content .arrow-right img {
  margin-top: 80px;
}

.card-test .card-content.result-content .arrow-down {
  display: none;
  text-align: center;
}

.card-test .card-content.result-content .arrow-down img {
  margin: 30px auto 0 auto;
}

.card-img-icon {
  max-width: 120px;
  margin: 30px auto 0 auto;
}

h4.card-title {
  font-weight: 400 !important;
  font-size: 1.4rem !important;
}

p.card-text {
  font-size: 15px !important;
  font-weight: 400 !important;
  margin-left: -20px;
  margin-right: -20px;
  line-height: 28px;
}

.test-content .wrap-question:last-child {
  border-bottom: 0;
}

.test-answer .btn-group {
  width: 100%;
}

.test-answer label {
  padding: 3px 0;
}

.test-answer label.l2 {
  padding-top: 10px;
  padding-bottom: 12px;
}

.test-answer label.l3 {
  padding-top: 4px;
  padding-bottom: 8px;
}

.test-answer .w33 {
  width: 33%;
}

.test-answer .w25 {
  width: 25%;
}

.test-answer .w20 {
  width: 20%;
}

.ans-title {
  font-size: 11px;
  line-height: 1.2em;
  letter-spacing: -0.025em;
  text-align: center;
  font-family: Roboto, NotoSans, "Malgun Gothic", "맑은 고딕", 돋움, dotum, sans-serif;
}

@media screen and (max-width: 769px) {
  .starter-template {
    padding: 3rem 1rem;
  }
  
  .card-test .card-content.result-content .arrow-right {
    display: none;
  }
  
  .card-test .card-content.result-content .arrow-down {
    display: block;
  }
}