.styled-input-container { display: flex; flex-wrap: wrap;}
.styled-input-single { position: relative; padding: 15px 15px 15px 35px; text-align: left; margin-right: 20px;}
.styled-input-single label { cursor: pointer;}
.styled-input-single label:before, .styled-input-single label:after { content: ''; position: absolute; top: 50%; border-radius: 50%;}
.styled-input-single label:before { left: 0; width: 25px; height: 25px; margin: -10px 0 0; background: #f7f7f7; box-shadow: 0 0 1px grey;}
.styled-input-single label:after { left: 5px; width: 15px; height: 15px; margin: -5px 0 0; opacity: 0; background: #000;
      -webkit-transform: translate3d(-20px, 0, 0) scale(0.5);
              transform: translate3d(-20px, 0, 0) scale(0.5);
      -webkit-transition: opacity 0.25s ease-in-out, -webkit-transform 0.25s ease-in-out;
              transition: opacity 0.25s ease-in-out, -webkit-transform 0.25s ease-in-out;
              transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out;
              transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out, -webkit-transform 0.25s ease-in-out;}
.styled-input-single input[type="radio"],
.styled-input-single input[type="checkbox"] { position: absolute; top: 0; left: -9999px; visibility: hidden;}
.styled-input-single input[type="radio"]:checked + label:after,
.styled-input-single input[type="checkbox"]:checked + label:after { opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);}
.styled-input--square label:before, .styled-input--square label:after { border-radius: 0;}
.styled-input--rounded label:before { border-radius: 10px;}
.styled-input--rounded label:after { border-radius: 6px;}
.styled-input--diamond .styled-input-single { padding-left: 45px;}
.styled-input--diamond label:before, .styled-input--diamond label:after { border-radius: 0;}
.styled-input--diamond label:before {
      -webkit-transform: rotate(45deg);
              transform: rotate(45deg);
}
.styled-input--diamond input[type="radio"]:checked + label:after,
.styled-input--diamond input[type="checkbox"]:checked + label:after { opacity: 1;
      -webkit-transform: rotate(45deg);
              transform: rotate(45deg);}
.pen-intro { text-align: center;}
.two-column:after { content: ""; display: table; clear: both;}
.two-column { margin: 0;}
@media (min-width: 860px) {
  .two-column {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
.two-column .single-col {
  margin: 0;
}
.txt { font: bold 24px/24px "微軟正黑體","Microsoft JhengHei",Helvetica; color: #5b5b5b;}
@media (min-width: 860px) {
  .two-column .single-col {
    width: 100%;
    float: left;
    margin: 0 0 0 5%;
  }
  .two-column .single-col:nth-child(2n+1) {
    clear: both;
    margin: 0;
  }
}

@media screen and (max-width:767px){
  .styled-input-single { padding: 10px 10px 10px 25px;}
  .styled-input-single label:before { width: 20px; height: 20px; margin: -10px 0 0;}
  .styled-input-single label:after { width: 10px; height: 10px; margin: -5px 0 0;}
  .txt { font: bold 4.3vw/4.3vw "微軟正黑體","Microsoft JhengHei",Helvetica;}

}