@charset "UTF-8";

img{width: 100%;height: auto;}
body {
    /*background: #500d62;*/
	font-size:16px;
    font-family: 'Noto Sans TC', 'Helvetica Neue','微軟正黑體', 'Microsoft JhengHei', Arial, sans-serif;
    -webkit-text-size-adjust: 100%;
}
.t-a-c{text-align: center;}

header{
    background:#fff;
    height: 100px;
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 6.25%;
    z-index: 999;
    box-shadow: 0px 10px 8px rgba(0,0,0,0.3);
}
header .logo{
  width: 318px;
}

.kv{
    min-height: calc(100vh - 100px);
    background:url(../images/kv.jpg) center center no-repeat;
    background-size: cover;
    /*padding-top: 150px;*/
    position: relative;
}

.kv-txt{
    position: absolute;left: 6.41%;
    top:8%;
    width: 49.53125%;
    /*transform: translateY(-50%);*/
}
.kv-txt img,.kv-btn img{width: 100%;display: block;}

.kv-btn{
  width: 31.25%;
  position: absolute;
  left: calc(49.53125% / 2 + 6.41%);
  transform: translateX(-50%);
  bottom: 27%;
   -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
}
.kv-btn:hover{
  transform: translateX(-50%) scale(.95);
}

.index-download{
  padding: 50px 0;
  display: flex;justify-content: center;align-items: center;
}
.index-download img{
  width: 404px;
}


.case{
    height: auto;
    /*min-height: calc(100vh - 100px);*/
    background:url(../images/case-bg.jpg) center center no-repeat;
    background-size: cover;
    /*padding-top: 150px;*/
    position: relative;
}

.case-title{
  position: relative;
  margin-left: 30px;
  padding-top: 30px;
  width: 30.9375%;
}

.case-list{
  position: relative;
  margin:0 auto;
  margin-top: 54px;
  width: calc( 434px * 3 + 50px * 3 + 69px * 3);
  display: flex;
  flex-wrap: wrap;

}

.case-item{
  position: relative;
  padding-left: 65px;
  display: inline-block;
  margin: 0 25px;
  margin-bottom: 70px;
}
.case-doctor{
  width: 117px;
  height: 117px;
  background: url(../images/case-doc-bg.png);
  background-size: cover;
  position: absolute;
  left: 0;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
  background-size: cover;
  padding: 5px;
}


.case-item-info{
  position: relative;
  width: 434px;
  height: 160px;
  /*background: url(../images/case-item-bg.png) center center;*/
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#b22f3f+0,801a2d+100 */
  background: radial-gradient(ellipse at center, rgba(178,47,63,1) 0%,rgba(128,26,45,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  background-size: 100% auto;
  padding:12px 18px 0 69px;
  border-radius: 15px;
}

.sp1 .case-item-info{
  width: 757px;
  padding-left: 200px;
}

.sp1 .case-doctor2{
  margin-left: 65px;
  position: absolute;
}
.sp1 .case-doctor2::before{
  content: "";
  width: 135px;
  height: 135px;
  position: absolute;
  top: 50%;
  left: 50%;
  background: url(../images/case-item-shadow2.png) center center no-repeat;
  background-size: cover;
  transform: translate(-50%,-50%);
  z-index: -1;
}
.case-item-con table tr td{
  padding: 0 1em 0 0;
}


.sp2 .case-item-info{
  width: 660px;
}
.case-item-info::before{
  content: "";
  width: 62px;
  height: 151px;
  position: absolute;
  top: 50%;
  left: 0;
  background: url(../images/case-item-shadow.png) center center no-repeat;
  background-size: cover;
  z-index: 1;
  transform: translateY(-50%);
}


.case-doctor{

}

.case-item-con{font-size: 16px;line-height:1.28em;color: #fff; }
.case-item a{
  position: absolute;width: 100%;height: 100%;left: 0;top: 0;z-index: 3;
}
.case-item-con::after{
  content:"點擊查看全文▶▶";
  font-size: 12px;
  position: absolute;right: 1em;
  bottom: .5em;
}
.case-item-title{font-weight: bold;height:calc( 1.28em * 3);display: flex;align-items: flex-end;}
.case-item hr{

}
.case-name{ }
.case-dep{}

/*article*/

.article-wrap{
  background: #9a1530;
  background: #9a1530;


}
.article-body{
  position: relative;
  background: url(../images/article-head.png) center top no-repeat,url(../images/article-footer.png) center bottom no-repeat;
  background-size: 100% auto;
  margin:0 auto;
  width: 720px;
  padding: 0 34px;
}

.doc-banner-title{
  width: 407px;
  padding-top: 25px;
  padding-left: 0px;
  margin-bottom: 0px;
}
.doc-banner-info{
  margin-top: 20px;
  display: flex;justify-content: flex-start;align-items: center;
  /*margin-bottom: 18px;*/
  color: #C21B3B;
}
.doc-banner-con{
  
}
.doc-banner-con .case-item-title,.article-wrap .case-name{
  font-size: 14px;
  padding-left: .5em;
  line-height: 1.25em;
  height: calc(1.25em * 3);

}
.doc-banner-con .case-item-title{margin-bottom: -.125em;}
.doc-banner-line{
  display: flex;justify-content: center;align-items: center;
}
.doc-banner-line hr{
  width: 100%;
}
.doc-banner-line i{
  width: 4px;
  height: 4px;
  border-radius: 2px;
  background: #C21B3B;
}
.doc-banner-peo{
  width: 103px;
  height: 103px;
  position: relative;

}
.type2 .case-name{
  color: #fff;
  text-shadow: #000000 1px 0 10px;
}
.doc-banner-peo::before{
  border-radius: 50%;
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  left: 0;top: 0;
  -webkit-box-shadow:inset 0px 0px 0px 4px #C21B3B;
    -moz-box-shadow:inset 0px 0px 0px 4px #C21B3B;
    box-shadow:inset 0px 0px 0px 4px #C21B3B;
    border-radius: 52px;
}

.doc-form{
  margin-top: 18px;
  background: #AF1C3F;
  border:4px solid #fff;
  border-radius: 15px;
  padding:16px;
}
.underline{text-decoration: underline;}
#register-form .form-box,.form-content{
  padding: 0 1em;
  font-size: 16px;
  line-height: 2em;
  color: #fff;
  margin-bottom: 1em;
}
.form-content img{width: 100%;}

.form-radio-inline{text-indent: calc( -1.9em - 1.4em);padding-left: 3.3em;}
.form-radio-inline span:nth-of-type(1){
  margin-right: .5em;
}
.btn-box button{
  cursor: pointer;
  margin-left: 1em;
  border:none;
  outline: none;
  background: url(../images/form-btn.png);
  background-size: cover;
  width: calc(110px * 1.33);
  height: calc(32px * 1.33);
  color: #C21B3B;
  font-weight: bold;
  font-size: 16px;
}

.ans-box{
  border-radius: 15px;
  background: #fff;
  margin-top: 16px;
  padding: 16px;
}
.ans-box p.ans-title{
  font-size: 24px;
  color: #C21B3B;
  font-weight: bold;
}
.ans-box p{color: #000;line-height: 2em;font-size: 16px;}
.ans-box span{color: #C21B3B;line-height: 2em;font-weight: bold;font-size: 16px;padding-left: 1em;}

.doc-article{
  border-radius: 20px;
  background: #fff;
  padding: 10px;
  margin-top: 25px;
}
.article-footer{
  width: 435px;
  padding: 20px 0 30px 150px;
}
.article-footer img{width: 435px;}
/*footer*/

.footer-img{
  position: relative;
  height: 100px;
  display: flex;
  justify-content: center;align-items: center;
}
.footer-img::before{
  content: "";
  width: 100%;
  height: 15%;
  box-shadow: 0px 10px 8px rgba(0,0,0,0.3);
    z-index: 9;
  left: 0;
  bottom: 100%;
  position: absolute;
}
.footer-img img{width: 245px;}
footer{
    background: #891A2D;
    position: relative;
    color: #fff;
    text-align: center;
    width: 100%;
    line-height: 2em;
    font-size: 14px;
    font-weight: 400;
    height: 110px;
    display: flex;
    justify-content: center;align-items: center;
    flex-direction: column;
}
footer p{}
footer p i{height: 15px;display: inline-block;line-height: 2em;margin:0 .5em;}
footer p i img{height: 100%;width: auto;}
footer span{opacity: .5;}
@media screen and (min-width: 1440px){
  .article-body{
    width: 1440px;
    padding: 0 68px;
  }

  .doc-banner-title{
    width: 814px;
    padding-top: 50px;
  }
  .doc-banner-con .case-item-title,.article-wrap .case-name{
    font-size: 28px;
  }
  .doc-banner-line i{
    width: 8px;
    height: 8px;
    border-radius: 4px;
  }
  .doc-banner-peo{
    width: 206px;
    height: 206px;
  }


  .doc-banner-peo::before{
    -webkit-box-shadow:inset 0px 0px 0px 8px #C21B3B;
      -moz-box-shadow:inset 0px 0px 0px 8px #C21B3B;
      box-shadow:inset 0px 0px 0px 8px #C21B3B;
      border-radius: 104px;
  }

  .doc-form{
    margin-top: 36px;
    border:8px solid #fff;
    border-radius: 30px;
    padding:32px;
  }

  #register-form .form-box,.form-content.form-content{
    font-size: 20px;
    padding: 0 1.6em;
  }
  .btn-box button{
    width: calc(220px * 1.33);
    height: calc(64px * 1.33);
    font-size: 20px;
    margin-left: 1.6em;
  }

  .ans-box{
    border-radius: 30px;
    margin-top: 32px;
    padding: 32px;
  }
  .ans-box p.ans-title{
    font-size: 30px;
  }
  .ans-box p{font-size: 20px;}
  .ans-box span{font-size: 20px;}

  .doc-article{
    border-radius: 40px;
    background: #fff;
    padding: 20px;
    margin-top: 50px;
  }
  .article-footer{
    width: 870px;
    padding: 40px 0 60px 0px;
    margin-left: 300px;
  }
  .article-footer img{width: 100%;}
}

@media screen and (min-width: 1080px){
  .article-body{
    width: 1080px;
    padding: 0 26px;
  }

  .doc-banner-title{
    width: 611px;
    padding-top: 38px;
  }
  .doc-banner-con .case-item-title,.article-wrap .case-name{
    font-size: 21px;
  }
  .doc-banner-line i{
    width: 6px;
    height: 6px;
    border-radius: 3px;
  }
  .doc-banner-peo{
    width: 155px;
    height: 155px;
  }
  .doc-banner-peo::before{
    -webkit-box-shadow:inset 0px 0px 0px 6px #C21B3B;
      -moz-box-shadow:inset 0px 0px 0px 6px #C21B3B;
      box-shadow:inset 0px 0px 0px 6px #C21B3B;
      border-radius: 78px;
  }

  .doc-form{
    margin-top: 36px;
    border:8px solid #fff;
    border-radius: 30px;
    padding:32px;
  }

  #register-form .form-box,.form-content{
    font-size: 18px;
  }
  .btn-box button{
    width: calc(165px * 1.33);
    height: calc(48px * 1.33);
    font-size: 18px;
    margin-left: 1.6em;
  }

  .ans-box{
    border-radius: 22px;
    margin-top: 24px;
    padding: 24px;
  }
  .ans-box p.ans-title{
    font-size: 26px;
  }
  .ans-box p{font-size: 18px;}
  .ans-box span{font-size: 18px;}

  .doc-article{
    border-radius: 40px;
    background: #fff;
    padding: 20px;
    margin-top: 50px;
  }
  .article-footer{
    width: 652px;
    padding: 30px 0 45px 0px;
    margin-left: 225px;
  }
  .article-footer img{width: 100%;}
}
@media screen and (min-width: 1440px){
  .article-body{
    width: 1440px;
    padding: 0 68px;
  }

  .doc-banner-title{
    width: 814px;
    padding-top: 50px;
  }
  .doc-banner-con .case-item-title,.article-wrap .case-name{
    font-size: 26px;
  }
  .doc-banner-line i{
    width: 8px;
    height: 8px;
    border-radius: 4px;
  }
  .doc-banner-peo{
    width: 206px;
    height: 206px;
  }
  .doc-banner-peo::before{
    -webkit-box-shadow:inset 0px 0px 0px 8px #C21B3B;
      -moz-box-shadow:inset 0px 0px 0px 8px #C21B3B;
      box-shadow:inset 0px 0px 0px 8px #C21B3B;
      border-radius: 104px;
  }

  .doc-form{
    margin-top: 36px;
    border:8px solid #fff;
    border-radius: 30px;
    padding:32px;
  }

  #register-form .form-box,.form-content{
    font-size: 20px;
    padding: 0 1.6em;
  }
  .btn-box button{
    width: calc(165px * 1.33);
    height: calc(48px * 1.33);
    font-size: 20px;
    margin-left: 1.6em;
  }

  .ans-box{
    border-radius: 30px;
    margin-top: 32px;
    padding: 32px;
  }
  .ans-box p.ans-title{
    font-size: 30px;
  }
  .ans-box p{font-size: 20px;}
  .ans-box span{font-size: 20px;}

  .doc-article{
    border-radius: 40px;
    background: #fff;
    padding: 20px;
    margin-top: 50px;
  }
  .article-footer{
    width: 870px;
    padding: 40px 0 60px 0px;
    margin-left: 300px;
  }
  .article-footer img{width: 100%;}
}


@media screen and (max-width: 1330px) and (min-width: 960px){
}
@media screen and (max-width: 1680px){

  .case-list{
    margin-top: calc(54px * .8 );
    width: calc( ( 434px * 3 + 50px * 3 + 69px * 3 ) * .8 );
  }

  .case-item{
    padding-left: calc(65px * .8 );
    margin: 0 calc(25px * .8 );
    margin-bottom: calc(70px * .8 );
  }
  .case-doctor{
    width: calc(117px * .8 );
    height: calc(117px * .8 );
    padding: 4px;
  }


  .case-item-info{
    width: calc(434px * .8 );
    height: calc(160px * .8 );
    padding:9px 14px 0 55px;
  }

  .sp1 .case-item-info{
    width: calc(757px * .8 );
    padding-left: calc(200px * .8 );
  }

  .sp1 .case-doctor2{
    margin-left: calc(65px * .8 );
  }
  .sp2 .case-item-info{
    width: calc(660px * .8 );
  }
  .case-item-info::before{
    width: calc(62px * .8 );
    height: calc(151px * .8 );
  }
  .sp1 .case-doctor2::before{
    width: calc(135px * .8 );
    height: calc(135px * .8 );
  }

  .case-doctor{

  }

  .case-item-con{font-size: calc(16px * .8 ); }

  .case-item-con::after{
    font-size: calc(12px * .8 );
  }
}
@media screen and (max-width: 1440px){
}
@media screen and (max-width: 1366px){

  .case-list{
    margin-top: calc(54px * .75 );
    width: calc( ( 434px * 3 + 50px * 3 + 69px * 3 ) * .75 );
  }

  .case-item{
    padding-left: calc(65px * .75 );
    margin: 0 calc(25px * .75 );
    margin-bottom: calc(70px * .75 );
  }
  .case-doctor{
    width: calc(117px * .75 );
    height: calc(117px * .75 );
    padding: 4px;
  }

  .case-list{
    width: calc(434px * .75 * 2 + 180px );
  }
  .case-item-info{
    width: calc(434px * .75 );
    height: calc(160px * .75 );
    padding:9px 14px 0 55px;
  }
  .sp1 .case-item-info{
    width: calc(757px * .75 );
     padding-left: calc(200px * .75 );
  }

  .sp1 .case-doctor2{
    margin-left: calc(65px * .75 );
  }
  .sp2 .case-item-info{
    width: calc(757px * .75 );
  }
  .case-item-info::before{
    width: calc(62px * .75 );
    height: calc(151px * .75 );
  }
  .sp1 .case-doctor2::before{
    width: calc(135px * .75 );
    height: calc(135px * .75 );
  }

  .case-doctor{

  }

  .case-item-con{font-size: calc(16px * .75 ); }

  .case-item-con::after{
    font-size: calc(12px * .75 );
  } 
}
@media screen and (max-width: 1200px){
    header{height: 100px;}
    .logo{width: 250px;}
    .logo img{width: 100%;}
    .case-list{max-width: 100%;justify-content: center;}
    .case-item{
      padding-left: calc(65px * .75 );
      margin: 0 10px;
      margin-bottom: calc(70px * .75 );
    }
}


@media screen and (max-width: 990px){

    header{
        height: 75px;
    }
    header .logo{
      width: 238px;
    }

    .kv{
        min-height: 62vw;
        /*background:url(../images/m_bg.jpg) center center;*/
        background-size:cover;

    }
    .kv-txt{
        top:15%;
    }
    .index-download{
      padding: 40px 0;
    }
    .index-download img{
      width: 303px;
    }
    .footer-img{
      height: 75px;
    }
    .footer-img img{width: 184px;}
    footer{
        font-size: 14px;
        height: 90px;
    }
    .case-title{width: 50%}
    .case-list{
      margin-top: calc(54px * .7 );
      width: calc( ( 434px * 3 + 50px * 3 + 69px * 3 ) * .7 );
    }

    .case-item{
      padding-left: calc(65px * .7 );
      margin: 0 10px;
      margin-bottom: calc(70px * .7 );
    }
    .case-doctor{
      width: calc(117px * .7 );
      height: calc(117px * .7 );
      padding: 4px;
    }

    .case-list{
      width: calc(434px * .7 * 2 + 180px );
    }
    .case-item-info{
      width: calc(434px * .7 );
      height: calc(160px * .7 );
      padding:8px 14px 0 40px;
    }
    .sp1 .case-item-info{
      width: calc(757px * .7 );
      min-height: calc(160px * .7 );
       padding-left: calc(200px * .7 );
      height: auto;
    }

    .sp1 .case-doctor2{
      margin-left: calc(65px * .7 );
    }
    .sp2 .case-item-info{
      width: calc(757px * .7 );
      min-height: calc(160px * .7 );
      height: auto;
    }
    .sp1 .case-item-info .case-item-title,.sp2 .case-item-info .case-item-title{
      height: auto;
    }
    .case-item-info::before{
      width: calc(62px * .65 );
      height: calc(151px * .65 );
    }
    .sp1 .case-doctor2::before{
    width: calc(135px * .65 );
    height: calc(135px * .65 );
  }

    .case-doctor{

    }

    .case-item-con{font-size: calc(16px * .7 ); }

    .case-item-con::after{
      font-size: calc(12px * .75 );
    } 
}

@media screen and (max-width:720px){
  .article-body{
    width: calc(720 / 720 * 100vw);
    padding: 0 calc(34 / 720 * 100vw);
  }

  .doc-banner-title{
    width: calc(407 / 720 * 100vw);
    padding-top: calc(25 / 720 * 100vw);
    padding-left: 0px;
    margin-bottom: 0px;
  }
  .doc-banner-con .case-item-title,.article-wrap .case-name{
    font-size: calc(14 / 720 * 100vw);
  }
  .doc-banner-line i{
    width: .55vw;
    height: .55vw;
    border-radius: .2667vw;
  }
  .doc-banner-peo{
    width: calc(103 / 720 * 100vw);
    height: calc(103 / 720 * 100vw);
  }
  .doc-banner-peo::before{
    -webkit-box-shadow:inset 0px 0px 0px .55vw #C21B3B;
      -moz-box-shadow:inset 0px 0px 0px .55vw #C21B3B;
      box-shadow:inset 0px 0px 0px .55vw #C21B3B;
      border-radius: calc(52 / 720 * 100vw);
  }

  .doc-form{
    margin-top: calc(18 / 720 * 100vw);
    border:.55vw solid #fff;
    border-radius: calc(15 / 720 * 100vw);
    padding:calc(16 / 720 * 100vw);
  }

  #register-form .form-box,.form-content{
    font-size: calc(16 / 720 * 100vw);
  }
  .btn-box button{
    width: calc(110 / 720 * 133vw);
    height: calc(32 / 720 * 133vw);
    font-size: calc(16 / 720 * 100vw);
  }

  .ans-box{
    border-radius: calc(15 / 720 * 100vw);
    margin-top: calc(16 / 720 * 100vw);
    padding: calc(16 / 720 * 100vw);
  }
  .ans-box p.ans-title{
    font-size: calc(24 / 720 * 100vw);
  }
  .ans-box p,.ans-box span{
    font-size: calc(16 / 720 * 100vw);
  }
  .doc-article{
    border-radius: calc(20 / 720 * 100vw);
    padding: calc(10 / 720 * 100vw);
    margin-top: calc(25 / 720 * 100vw);
  }
  .article-footer{
    width: calc(435 / 720 * 100vw);
    padding: 2.778vw 0 4.1667vw 20.833vw;
  }
  .article-footer img{width: calc( 435 / 720 * 100vw);}

}
@media screen and (max-width: 640px){
  header{
    height: auto;
    padding:15px 20px;
  }
  header .logo{width: 45%;}
  .case-title{width: 80%}
  .case-list{
    width: 100%;
  }
  .case-item{
      padding-left: calc(65px * .6 );
      margin: 0;
      margin-bottom: calc(40px * .6 );
    }
    .case-item-info{
      padding:8px 12px 0 50px;
    }
    .sp1 .case-item-info,.sp2 .case-item-info{
      width: calc(434px * .7 );
    }
    .case-item-con table tr{
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .case-item-con table tr td{
      padding-top: .25em;
      padding-bottom: .25em;
    }
    .case-item-con table tr td:last-child{padding-bottom: 3em;}
    footer{font-size: 12px;height: auto;padding: .5em 0;}
}


@media screen and (max-width: 414px){
    /*header{padding: 0 20px;}*/
    .logo{width: 180px;}
}

@media screen and (max-width: 374px){
   header{
    height: auto;
    padding:10px 15px;
  }
    .case-item{
      padding-left: calc(65px * .6 );
      margin: 0;
      margin-bottom: calc(40px * .6 );
    }
    .case-doctor{
      width: calc(117px * .6 );
      height: calc(117px * .6 );
      padding: 2px;
    }


    .case-item-info{
      width: calc(434px * .6 );
      height: calc(160px * .6 );
      padding:8px 12px 0 38px;
    }
    .sp1 .case-item-info{
     width: calc(434px * .6 );
      padding-left: calc(200px * .6 );
    }

  .sp1 .case-doctor2{
    margin-left: calc(65px * .6 );
  }
    .sp2 .case-item-info{
      width: calc(434px * .6 );
    }

    .case-item-info::before{
      width: calc(62px * .6 );
      height: calc(151px * .6 );
    }
    .sp1 .case-doctor2::before{
    width: calc(135px * .6 );
    height: calc(135px * .6 );
  }

    .case-doctor{

    }

    .case-item-con{font-size: calc(16px * .6 ); }

    .case-item-con::after{
      font-size: calc(12px * .6 );
    } 
}

/*
 * author:evanliu2968
 * github:https://github.com/EvanLiu2968/el-checkbox
 * lincense:MIT
 */
/*checkbox radio component*/
.el-radio,
.el-checkbox {
  position: relative;
  font-size: 100%;
}
label.el-radio,
label.el-checkbox {
  display: block;
  cursor: pointer;
}
.el-radio > input[type="radio"],
.el-checkbox > input[type="checkbox"] {
  display: none;
}
.el-radio > input[type="radio"][disabled],
.el-checkbox > input[type="checkbox"][disabled] {
  cursor: not-allowed;
}
.el-radio > input[type="radio"] + .el-radio-style,
.el-checkbox > input[type="checkbox"] + .el-checkbox-style {
  position: relative;
  display: inline-block;
  width: 1.4em;
  height: 1.4em;
  vertical-align: middle;
  cursor: pointer;
  background: #fff;
}
.el-radio > input[type="radio"] + .el-radio-style:hover:before,
.el-checkbox > input[type="checkbox"] + .el-checkbox-style:hover:before {
  border-color: #20a0ff;
}
.el-radio > input[type="radio"] + .el-radio-style:before,
.el-checkbox > input[type="checkbox"] + .el-checkbox-style:before {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  width: 1.4em;
  height: 1.4em;
  content: '';
  /*border: 1px solid #C0CCDA;*/
}
.el-radio > input[type="radio"] + .el-radio-style:after,
.el-checkbox > input[type="checkbox"] + .el-checkbox-style:after {
  position: absolute;
  display: none;
  content: '';
}
.el-radio > input[type="radio"][disabled] + .el-radio-style,
.el-checkbox > input[type="checkbox"][disabled] + .el-checkbox-style {
  cursor: not-allowed;
  color: #D3DCE6;
}
.el-radio > input[type="radio"][disabled] + .el-radio-style:hover,
.el-radio > input[type="radio"][disabled] + .el-radio-style:before,
.el-radio > input[type="radio"][disabled] + .el-radio-style:after,
.el-checkbox > input[type="checkbox"][disabled] + .el-checkbox-style:hover,
.el-checkbox > input[type="checkbox"][disabled] + .el-checkbox-style:before,
.el-checkbox > input[type="checkbox"][disabled] + .el-checkbox-style:after {
  cursor: not-allowed;
}
.el-radio > input[type="radio"][disabled] + .el-radio-style:hover:before,
.el-checkbox > input[type="checkbox"][disabled] + .el-checkbox-style:hover:before {
  border: 1px solid #D3DCE6;
  animation-name: none;
}
.el-radio > input[type="radio"][disabled] + .el-radio-style:before,
.el-checkbox > input[type="checkbox"][disabled] + .el-checkbox-style:before {
  border-color: #D3DCE6;
}
.el-radio > input[type="radio"]:checked + .el-radio-style:before,
.el-checkbox > input[type="checkbox"]:checked + .el-checkbox-style:before {
  animation-name: none;
}
.el-radio > input[type="radio"]:checked + .el-radio-style:after,
.el-checkbox > input[type="checkbox"]:checked + .el-checkbox-style:after {
  display: block;
}
.el-radio > input[type="radio"] + .el-radio-style:before {
  /*border-radius: 50%;*/
}
/*.el-radio > input[type="radio"] + .el-radio-style:after {
  top: 0.4em;
  left: 0.4em;
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: #20a0ff;
}*/
.el-radio > input[type="radio"]:checked + .el-radio-style:before {
  border: 1px solid #20a0ff;
}
.el-radio > input[type="radio"]:checked[disabled] + .el-radio-style:before {
  border: 1px solid #b0d7f5;
}
.el-radio > input[type="radio"]:checked[disabled] + .el-radio-style:after {
  background: #b0d7f5;
}
.el-radio > input[type="radio"] + .el-radio-style:before,
.el-checkbox > input[type="checkbox"] + .el-checkbox-style:before {
  /*border-radius: 3px;*/
}
.el-radio > input[type="radio"] + .el-radio-style:after,
.el-checkbox > input[type="checkbox"] + .el-checkbox-style:after {
  top: 0.15em;
  left: 0.5em;
  box-sizing: border-box;
  width: 0.4em;
  height: 0.85em;
  transform: rotate(45deg);
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
}
.el-radio > input[type="radio"]:checked + .el-radio-style:before,
.el-checkbox > input[type="checkbox"]:checked + .el-checkbox-style:before {
  border: #20a0ff;
  background: #20a0ff;
}
.el-checkbox > input[type="checkbox"]:checked[disabled] + .el-checkbox-style:before {
  border: #b0d7f5;
  background: #b0d7f5;
}
/*blue theme*/
.el-radio.el-radio-blue > input[type="radio"] + label:hover:before,
.el-checkbox.el-checkbox-blue > input[type="checkbox"] + label:hover:before,
.el-radio.el-radio-blue > input[type="radio"]:checked + label:before,
.el-checkbox.el-checkbox-blue > input[type="checkbox"]:checked + label:before {
  border-color: #20a0ff;
}
.el-checkbox.el-checkbox-blue > input[type="checkbox"]:checked + label:before,
.el-radio.el-radio-blue > input[type="radio"] + label:after {
  background: #20a0ff;
}
.el-radio.el-radio-blue > input[type="radio"][disabled] + label:hover:before,
.el-checkbox.el-checkbox-blue > input[type="checkbox"][disabled] + label:hover:before {
  border-color: #D3DCE6;
}
.el-checkbox.el-checkbox-blue > input[type="checkbox"]:checked[disabled] + label:before,
.el-radio.el-radio-blue > input[type="radio"]:checked[disabled] + label:before {
  border-color: #b0d7f5;
}
.el-checkbox.el-checkbox-blue > input[type="checkbox"][disabled]:checked + label:before,
.el-radio.el-radio-blue > input[type="radio"]:checked[disabled] + label:after {
  background: #b0d7f5;
}
/*green theme*/
.el-radio.el-radio-green > input[type="radio"] + label:hover:before,
.el-checkbox.el-checkbox-green > input[type="checkbox"] + label:hover:before,
.el-radio.el-radio-green > input[type="radio"]:checked + label:before,
.el-checkbox.el-checkbox-green > input[type="checkbox"]:checked + label:before {
  border-color: #13ce66;
}
.el-checkbox.el-checkbox-green > input[type="checkbox"]:checked + label:before,
.el-radio.el-radio-green > input[type="radio"] + label:after {
  background: #13ce66;
}
.el-radio.el-radio-green > input[type="radio"][disabled] + label:hover:before,
.el-checkbox.el-checkbox-green > input[type="checkbox"][disabled] + label:hover:before {
  border-color: #D3DCE6;
}
.el-checkbox.el-checkbox-green > input[type="checkbox"]:checked[disabled] + label:before,
.el-radio.el-radio-green > input[type="radio"]:checked[disabled] + label:before {
  border-color: #a1efc4;
}
.el-checkbox.el-checkbox-green > input[type="checkbox"][disabled]:checked + label:before,
.el-radio.el-radio-green > input[type="radio"]:checked[disabled] + label:after {
  background: #a1efc4;
}
/*red theme*/
.el-radio.el-radio-red > input[type="radio"] + label:hover:before,
.el-checkbox.el-checkbox-red > input[type="checkbox"] + label:hover:before,
.el-radio.el-radio-red > input[type="radio"]:checked + label:before,
.el-checkbox.el-checkbox-red > input[type="checkbox"]:checked + label:before {
  border-color: #ff4949;
}
.el-checkbox.el-checkbox-red > input[type="checkbox"]:checked + label:before,
.el-radio.el-radio-red > input[type="radio"] + label:after {
  background: #ff4949;
}
.el-radio.el-radio-red > input[type="radio"][disabled] + label:hover:before,
.el-checkbox.el-checkbox-red > input[type="checkbox"][disabled] + label:hover:before {
  border-color: #D3DCE6;
}
.el-checkbox.el-checkbox-red > input[type="checkbox"]:checked[disabled] + label:before,
.el-radio.el-radio-red > input[type="radio"]:checked[disabled] + label:before {
  border-color: #f9b3b3;
}
.el-checkbox.el-checkbox-red > input[type="checkbox"][disabled]:checked + label:before,
.el-radio.el-radio-red > input[type="radio"]:checked[disabled] + label:after {
  background: #f9b3b3;
}
/*yellow theme*/
.el-radio.el-radio-yellow > input[type="radio"] + label:hover:before,
.el-checkbox.el-checkbox-yellow > input[type="checkbox"] + label:hover:before,
.el-radio.el-radio-yellow > input[type="radio"]:checked + label:before,
.el-checkbox.el-checkbox-yellow > input[type="checkbox"]:checked + label:before {
  border-color: #f7ba2a;
}
.el-checkbox.el-checkbox-yellow > input[type="checkbox"]:checked + label:before,
.el-radio.el-radio-yellow > input[type="radio"] + label:after {
  background: #f7ba2a;
}
.el-radio.el-radio-yellow > input[type="radio"][disabled] + label:hover:before,
.el-checkbox.el-checkbox-yellow > input[type="checkbox"][disabled] + label:hover:before {
  border-color: #D3DCE6;
}
.el-checkbox.el-checkbox-yellow > input[type="checkbox"]:checked[disabled] + label:before,
.el-radio.el-radio-yellow > input[type="radio"]:checked[disabled] + label:before {
  border-color: #fbeac1;
}
.el-checkbox.el-checkbox-yellow > input[type="checkbox"][disabled]:checked + label:before,
.el-radio.el-radio-yellow > input[type="radio"]:checked[disabled] + label:after {
  background: #fbeac1;
}
/*switch component*/
.el-switch,
.el-switch-style,
.el-switch-style:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.el-switch {
  display: inline-block;
  font-size: 100%;
  height: 1.6em;
  position: relative;
}
.el-switch .el-switch-style {
  height: 1.6em;
  left: 0;
  background: #C0CCDA;
  -webkit-border-radius: 0.8em;
  border-radius: 0.8em;
  display: inline-block;
  position: relative;
  top: 0;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  width: 3em;
  cursor: pointer;
}
.el-switch .el-switch-style:before {
  display: block;
  content: '';
  height: 1.4em;
  position: absolute;
  width: 1.4em;
  background-color: #fff;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  left: 0.1em;
  top: 0.1em;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.el-switch > input[type="checkbox"] {
  display: none;
}
.el-switch > input[type="checkbox"][disabled] + .el-switch-style {
  cursor: not-allowed;
  background-color: #D3DCE6;
}
.el-switch > input[type="checkbox"]:checked + .el-switch-style {
  background-color: #20a0ff;
}
.el-switch > input[type="checkbox"]:checked + .el-switch-style:before {
  left: 50%;
}
.el-switch > input[type="checkbox"]:checked[disabled] + .el-switch-style {
  background-color: #b0d7f5;
}
.el-switch.el-switch-blue > input[type="checkbox"]:checked + .el-switch-style {
  background-color: #20a0ff;
}
.el-switch.el-switch-blue > input[type="checkbox"]:checked[disabled] + .el-switch-style {
  background-color: #b0d7f5;
}
.el-switch.el-switch-green > input[type="checkbox"]:checked + .el-switch-style {
  background-color: #13ce66;
}
.el-switch.el-switch-green > input[type="checkbox"]:checked[disabled] + .el-switch-style {
  background-color: #a1efc4;
}
.el-switch.el-switch-red > input[type="checkbox"]:checked + .el-switch-style {
  background-color: #ff4949;
}
.el-switch.el-switch-red > input[type="checkbox"]:checked[disabled] + .el-switch-style {
  background-color: #f9b3b3;
}
.el-switch.el-switch-yellow > input[type="checkbox"]:checked + .el-switch-style {
  background-color: #f7ba2a;
}
.el-switch.el-switch-yellow > input[type="checkbox"]:checked[disabled] + .el-switch-style {
  background-color: #fbeac1;
}
/*define size*/
.el-radio.el-radio-sm,
.el-checkbox.el-checkbox-sm,
.el-switch.el-switch-sm {
  font-size: 100%;
}
.el-radio.el-radio-lg,
.el-checkbox.el-checkbox-lg,
.el-switch.el-switch-lg {
  font-size: 125%;
}