@media (min-width: 1440px){
  .container, .container-lg, .container-md, .container-sm, .container-xl {
      max-width: 1440px;
    }
    .col-lg-3 {
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
  }
  .q-number{float: left; width: 8%;margin-right:5px;}
}
@media (max-width: 767px){
  section {
    padding: 30px 0;
  }
  .practice .icon-box {
    width: 100%;
    padding: 10px 7px 0px 7px;
    margin: 0  0 10px 0;
    background: #fff;
    box-shadow: 0 4px 7px 0 rgba(68, 88, 144, 0.14);
  }
  
  .col-md-6, .col-lg-3 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50% ;
  }
  .practice .icon {  margin: 0 auto 12px auto;  padding-top: 5px !important;  display: inline-block;  text-align: center;  border-radius: 10%;  width: 32px !important;  height: 32px !important;}
  .practice .title {  font-weight: 700;  margin-bottom: 11px;  font-size: 13px !important;}
  
}
.practice .icon-box {
  width: 100%;
  padding: 10px 10px 0px 10px;
  position: relative;
  overflow: hidden;
  margin: 0  0 20px 0;
  background: #fff;
  box-shadow: 0 8px 10px 0 rgba(68, 88, 144, 0.14);
  transition: all 0.3s ease-in-out;
  text-align: center;
  border: 1px solid #fff;
}

.practice .icon {  margin: 0 auto 15px auto;  padding-top: 5px;  display: inline-block;  text-align: center;  border-radius: 10%;  width: 42px;  height: 42px;}
.practice .icon i {  font-size: 20px;  line-height: 1;}

.practice .title {  font-weight: 700;  margin-bottom: 15px;  font-size: 18px;}

.practice a {  color: #121;}
.practice .description {  font-size: 15px;  line-height: 28px;  margin-bottom: 0;}

.practice .icon-box-pink .icon {  background: #fceef3;}
.practice .icon-box-pink .icon i {  color: #ff689b;}
.practice .icon-box-pink:hover {  border-color: #ff689b;}

.practice .icon-box-cyan .icon {  background: #e6fdfc;}
.practice .icon-box-cyan .icon i {  color: #3fcdc7;}
.practice .icon-box-cyan:hover {  border-color: #3fcdc7;}

.practice .icon-box-green .icon {  background: #eafde7; }
.practice .icon-box-green .icon i {  color: #41cf2e;}
.practice .icon-box-green:hover {  border-color: #41cf2e;}

.practice .icon-box-blue .icon {  background: #e1eeff;}
.practice .icon-box-blue .icon i {  color: #2282ff;}
.practice .icon-box-blue:hover {  border-color: #2282ff;}

.practice .icon-box-gray .icon {  background: #e1eeff;}
.practice .icon-box-gray .icon i {  color: #8f9295;}
.practice .icon-box-gray:hover {  border-color: #8f9295;}



/* License */
@page{size: A4; margin: 0;}
@media print {
  .page {
    margin: 0;
    border: initial;
    border-radius: initial;
    width: initial;
    min-height: initial;
    box-shadow: initial;
    background: initial;
    page-break-after: always;
  }
}
.quest-box {
  width: 21cm;
  min-height: 29.7cm;
  padding: 1.5cm 1.5cm 2cm 1.5cm;
}
.q-title{border-bottom: 1px solid #c1c1c1;margin:0 10px 0 5px;padding-bottom:20px;}
.q-cert{margin-left:10px;}
/* .q-left{ border-right: 1px solid #c1c1c1;} */
.quest-box{ column-count:2;column-rule-style: solid;  column-rule-width: 2px; column-rule-color: #7A7A7A;font-size:18px;column-gap: 30px;}
.quest-box {padding: 5px 0px;}
.q-title .q-turn{margin: auto;}
.btn-start{width:50%;padding:20px 0;margin:1.5em 0;background-color: #85C18B;color:#fff;font-size:1.5em;}
.btn-end{width:50%;padding:20px 0;margin:1.5em 0;background-color: #85C18B;color:#fff;font-size:1.5em;}
.practice input.chkbox{width: 18px; height: 1.5em;}
.quest-box .subject{margin:2em 0 2em 0;padding:1em;border: 1px solid #E1E1E1;}
.quest-box .subject h4{margin:0;font-size:1.2em;font-weight: 600;}
.q-number{float: left; width: 4%;margin-right:5px;}
.check_img{position:relative;}
.check_img img{position:absolute;display:block;width:3em;height: auto;top:-35px;left:-25px;}
.answer{cursor: pointer;}
.q-result table{width: 70%;border: 1px solid #444444;margin-top:2em;margin-bottom:2em;margin-left:auto;margin-right:auto;}
.q-result table th, .q-result table td {
  border: 1px solid #444444;width:100/6%;height:auto;padding:15px;
}
.q-warning{justify-content: center;}
.explain-box{border: 1px solid #444444;min-width:200px;min-height:100px;padding:10px;}

/* timer */
#timer div {
  display: inline-block;
  min-width: 110px;
  padding: 10px;
  background: #020b43;
  border-radius: 10px;
  border: 2px solid #030d52;
  margin: 15px;
} 

#timer div span {
  color: #ffffff;
  display: block;
  margin-top: 5px;
  font-size: 1.5em;
  font-weight: 400;
} 

.result-answer{justify-content: center;}
.practice-main .practice .search-form form {
  background: #fff;
  border: 1px solid #ddd;
  padding: 3px 10px;
  position: relative;
  /* width:40%; */
  margin-bottom:2em;
}
.practice-main .practice .search-form form input[type="text"] {
  border: 0 !important;
  padding: 4px;
  width: calc(100% - 40px);
}
.practice-main .practice .search-form form button {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  border: 0;
  background: none;
  font-size: 16px;
  padding: 0 15px;
  margin: -1px;
  background: #32627b;
  color: #fff;
  transition: 0.3s;
}




.flex-center {display: flex; align-items: center; justify-content: center;}
/* .header .inner .btn_box{position: relative;}
.header .inner .btn_box:after{content: ""; display: block; width: 1px; height: 40px; position: absolute; top:50%; transform: translateY(-50%); left: -3rem; background-color: #afadac;}
.header .inner .btn_box b{border: 1px solid #515153; padding: 0.6rem 0.2rem; width: 4rem; display: block; text-align: center; border-radius: 1.18rem; letter-spacing: 0; color: #515153; font-weight: 400;}
.header .inner .btn_box .menu_btn b{color:#fff; background-color:#515153; font-weight: 300;} */
/* CUSTOM RADIO */
                    
@media (min-width: 813px) and (max-width: 968px) {

  .q-warning{padding:0 1em;}
  .q-number{float: left; width: 8%;margin-right:5px;}

}
@media (min-width: 360px) and (max-width: 812px) {
  .h4, h4 { font-size: 1rem;}
  .q-title{margin: 0 5px 0 5px;}
  .quest-box{ column-count:1;}
  
  .explain-box{width:100% !important;}

  /* license - practice */
  .practice-main .sidebar{ margin: 0 !important;}
  .practice-main .sidebar {
    padding: 30px;
    margin: 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);  
  }
  .q-result table{width: 100%}
  #timer div {
    min-width: 90px;
    padding: 5px;
    margin:10px;
  } 
  #timer div span {
    margin-top: 10px;
    font-size: 1.2em;
  }   
  .q-result table th, .q-result table td {
    font-size:1em;padding:5px;
  }
  
  .q-warning{padding:0 0.5em;}
  
  .practice-main .practice .search-form form { width:100%; }
} 

@media (max-width: 360px) {
  .practice-main .practice .search-form form { width:100%; }
  
}
@media (max-width: 390px) {
  .practice-main .practice .search-form form { width:100%; }
  .explain-box, .subject{width:325px !important;}
}
.practice-main .sidebar .sidebar-title {
  font-size: 20px;
  font-weight: 700;
  padding: 0 0 0 0;
  margin: 0 0 15px 0;
  color: #32627b;
  position: relative;
}

.practice-main .sidebar .sidebar-item {
  margin-bottom: 30px;
}

.practice-main .sidebar .search-form form {
  background: #fff;
  border: 1px solid #ddd;
  padding: 3px 10px;
  position: relative;
}

.practice-main .sidebar .search-form form input[type="text"] {
  border: 0;
  padding: 4px;
  width: calc(100% - 40px);
}

.practice-main .sidebar .search-form form button {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  border: 0;
  background: none;
  font-size: 16px;
  padding: 0 15px;
  margin: -1px;
  background: #32627b;
  color: #fff;
  transition: 0.3s;
}

.practice-main .sidebar .search-form form button:hover {
  background: #68A4C4;
}

.practice-main .sidebar .categories ul {
  list-style: none;
  padding: 0;
}

.practice-main .sidebar .categories ul li + li {
  padding-top: 10px;
}

.practice-main .sidebar .categories ul a {
  color: #3f8db5;
}

.practice-main .sidebar .categories ul a:hover {
  color: #68A4C4;
}

.practice-main .sidebar .categories ul a span {
  padding-left: 5px;
  color: #bedae8;
  font-size: 14px;
}

.practice-main .sidebar .recent-posts .post-item + .post-item {
  margin-top: 15px;
}

.practice-main .sidebar .recent-posts img {
  width: 80px;
  float: left;
}

.practice-main .sidebar .recent-posts h4 {
  font-size: 15px;
  margin-left: 95px;
  font-weight: bold;
}

.practice-main .sidebar .recent-posts h4 a {
  color: #0d2735;
  transition: 0.3s;
}

.practice-main .sidebar .recent-posts h4 a:hover {
  color: #68A4C4;
}

.practice-main .sidebar .recent-posts time {
  display: block;
  margin-left: 95px;
  font-style: italic;
  font-size: 14px;
  color: #72afce;
}

.practice-main .sidebar .tags {
  margin-bottom: -10px;
}

.practice-main .sidebar .tags ul {
  list-style: none;
  padding: 0;
}

.practice-main .sidebar .tags ul li {
  display: inline-block;
}

.practice-main .sidebar .tags ul a {
  color: #3f8db5;
  font-size: 14px;
  padding: 6px 14px;
  margin: 0 6px 8px 0;
  border: 1px solid #e4eff5;
  display: inline-block;
  transition: 0.3s;
}

.practice-main .sidebar .tags ul a:hover {
  color: #fff;
  border: 1px solid #32627b;
  background: #32627b;
}

.practice-main .sidebar .tags ul a span {
  padding-left: 5px;
  color: #bedae8;
  font-size: 14px;
}

.switch-button {
  position: relative;
  display: inline-block;
  width: 55px;
  height: 30px;
}

.switch-button input {
  opacity: 0;
  width: 0;
  height: 0;
}

.onoff-switch {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius:20px;
  background-color: #ccc;
  box-shadow: inset 1px 5px 1px #999;
  -webkit-transition: .4s;
  transition: .4s;
}

.onoff-switch:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 4px;
  bottom: 4px;
  background-color: #fff;
  -webkit-transition: .5s;
  transition: .4s;
  border-radius:20px;
}

.switch-button input:checked + .onoff-switch {
  background-color: #F2D522;
  box-shadow: inset 1px 5px 1px #E3AE56;
}

.switch-button input:checked + .onoff-switch:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}