/*@font-face {
  font-family: Futura;
  src: url(../font/da950f2527dc01bebcbedd536e38c145.eot) format('embedded-opentype'),
    url(../font/da950f2527dc01bebcbedd536e38c145.ttf) format('opentype'),
    url(../font/da950f2527dc01bebcbedd536e38c145.woff) format('woff')
}*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;400;500;600;700&display=swap');

html {
    font-size: 10px;
    -webkit-text-size-adjust:none;
    
}
html,body{
	width: 100%;height: 100%;font-size: 10px;
	font-family:'Noto Sans TC','微軟正黑體', 'Microsoft JhengHei', sans-serif;
	letter-spacing: .125em;
    background: #c3c3c3;
}
/*@media screen and (max-width: 1440px) {
    html {
        font-size: 0.69444vw;
    }
}
@media screen and (max-width: 1000px) {
    html {
        font-size: 10px;
    }
}*/
@media screen and (min-width: 1000px) {
    html {
        font-size: 0.595vw;
    }
}
@media screen and (min-width: 1441px) {
    html {
        font-size: 0.595vw;
    }
}

@media screen and (min-width: 1681px) {
    html {
        font-size: 10px;
    }
}

@media screen and (max-width: 776px) {
    html {
        font-size: 1.28535vw;
    }
}
section{
	position: relative;
    min-height: 100%;
    /*background: #FDFFF2;*/
    overflow: hidden;
}

footer{
    background:url(../images/bg.jpg) center center no-repeat;
    background-size: cover;
	text-align: center;
	padding: 1em 0;
	font-size: 2.4rem;
    color: #fff;
    font-weight: 400;
    
}

.pc {}

.mb {
    display: none;
}

@media screen and (max-width: 1000px) {
    .pc{display: none;}
    .mb{display: block;}
}
.wrap{
    max-width: 77.6rem;margin:0 auto;
    position: relative;
    overflow: hidden;
}
header{
    position: fixed;
    height: 6.2rem;
    background: #fff;
    z-index: 99;
    width: 77.6rem;
    left: calc(50% - 77.6rem / 2);
    box-shadow: 0 5px 10px rgb(0 0 0 / 10%);
}
header ul{width: 100%;display: flex;justify-content: center;align-items: center;height: 6.2rem;}
header li{width: 25%;text-align: center;border-right: 1px solid #44AB9A;}
header li:last-child{border-right: none;}
header p{color: #44AB9A;font-size: 2.4rem;}
/*kv*/
.kv{
    position: relative;
    overflow: hidden;
    background:url(../images/mb/kv_bg.png) center center no-repeat;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;flex-direction: column;justify-content: center;align-items: center;
    height: 160.8rem;
}
.kv-light,.ing{
    top: 0;left: -8rem;
    width: 56.1rem;
    position: absolute;
    mix-blend-mode: screen;
    pointer-events: none;
}
.kv-title{
    position: relative;
    width: 35.7rem;
}
.kv-txt{
    width: 36.1rem;
    margin:3rem 0 1.6rem 0;
}

.kv-h1{
    width: 54.3rem;
    margin-bottom: 15rem;
}

.s2{

}

.fullmap-wrap{
    position: relative;
    width: 100%;
    height: 100%;  
}
.fullmap{
    position: relative;
    width: 100%;
    height: calc(100vh);
    /*margin-bottom: 100px;*/
}
.overlay-cover .mid p span {
    display: block;
    width: 60px;
    height: 60px;
    margin: 0 auto 10px auto;
    background: url(../images/swipe.svg) no-repeat;
    background-size: contain;
}
@media screen and (max-width: 640px) {
    .fullmap{
        position: relative;
        width: 100%;
        height: calc(100vh - 20rem);
        /*margin-bottom: 100px;*/
    }
}

.s3{
    background: #fff;
    background-size: cover;
    padding-top: 9rem;
    padding-bottom: 5rem;
}
.s3 .title{width: 66.7rem;margin:0 auto;margin-bottom: 8rem;}
.s3-list{padding-left: 9rem;width: 100%;}
.s3-list li{margin-bottom: 8rem;position: relative;}
.s3_box1_title{width: 17.1rem;}
.s3_box2_title{width: 12.4rem;}
.s3_box3_title{width: 24rem;}
.s3_box4_title{width: 12.3rem;}

.s3-box p:nth-of-type(1){color: #E95504;font-size: 2.6rem;line-height: 1.5em;margin-bottom: .5em;}
.s3-box p:nth-of-type(2){color: #595757;font-size: 2.1rem;line-height: 2.5rem;width: 12em;}


.s3-pic{width: 58rem;position: absolute;bottom: -2rem;left: 1rem;}

.s3 .slide-list{width: 27.6rem;position: absolute;top: -1rem;right: -1rem;}

/*s4*/

.s4{min-height:154.7rem;background: url(../images/mb/s4_bg.png) center center no-repeat; 
    background-size: cover;
    padding-top: 7rem;
    padding-bottom: 3rem;
}
.s4 .title{width: 33.6rem;margin:0 auto;margin-bottom: 3.5rem;}
.s4 .h1{
    width: 55.8rem;margin:0 auto;
}
.s4-info ul{display: flex;justify-content: center;align-items: flex-start;margin-top: 3rem;margin-bottom: 5rem;}

.s4-t1{width: 5.2rem;}
.s4-t2{width: 5.8rem;}
.s4-t3{width: 18.8rem;}
.s4-info li{text-align: center;margin:0 1.5rem;}

.s4-info li p:nth-of-type(1){font-size: 2.8rem;font-weight: bold;color: #000;margin-bottom: .5em;}
.s4-info li p:nth-of-type(2){font-size: 2.3rem;font-weight: 300;color: #000;width: 8.5em;}


.s4 .slide-area{
    display: flex;
    /*padding-top: 100px;*/
    align-items: center;
    width: 64rem;
    margin:0 auto;
}
.slide-pic{
    width: 100%;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
}
.slide-area .slide-list .slide-box {text-align: right;}

.slide-list .slide-box img{width: 100%;height: auto;max-width: initial;}

.slide-area.reverse{
    flex-direction: row-reverse;
}
.slide-area.reverse .slide-box {text-align: left;}

.slide-area .slide-list .slick-slide,.slide-area .slide-list .slick-slide{
    text-align: right;
    display: flex;
    justify-content: flex-end;
}

.slide-area.reverse .slide-list .slick-slide,.slide-area.reverse .slide-list .slick-slide{
    text-align: left;
    display: flex;
    justify-content: flex-start;
}

/*s5*/

.s5{height:154.7rem;background: url(../images/mb/s5_bg.png) center center no-repeat; 
    background-size: cover;
    padding-top: 14rem;
}
.s5 .title{width: 43.2rem;margin:0 auto;}
.s5 p{font-size: 2.6rem;color: #fff;padding:0 7rem;margin-top: 2em;font-weight: 300;}

/*s5*/

.s6{background: url(../images/mb/s6_bg.png) center top no-repeat; 
    background-size: cover;
    padding-top: 10.5rem;
}
.s6-row{position: relative;}
.s6-row > img{display: block;}
.s6 .ing{left: -15rem;z-index: 2;}
.s6 .title{width: 43.2rem;margin:0 auto;margin-bottom: 6.7rem;}

.s6-box{
    width: 32.8rem;position: absolute;height: 21.7rem;
    background: url(../images/s6_t1_bg.png) center center no-repeat;
    background-size: cover;
    padding: 3.5rem 7rem 0 4rem;
    z-index: 3;
}
.s6-t2 .s6-box{width: 32.8rem;position: absolute;height: 21.7rem;background: url(../images/s6_t2_bg.png) center center no-repeat;background-size: cover;}

.s6-box-title{
    /*position: absolute;*/
    width: 19.2rem;
}
.s6-box p{font-size: 2.1rem;color: #595757;font-weight: 300;line-height: 2.5rem;}

.s6-t1 .s6-box{    left: 0;    top: 4rem;}
.s6-t1 .s6-box .s6-box-title{    left: 0;    top: 4rem;}

.s6-t2,.s6-t3{z-index: 2;}
.s6-t2 .s6-box{    right: 0;    top: 4rem;padding: 3.5rem 2.5rem 0 12rem;display: flex;flex-direction: column;align-items: flex-end;}
.s6-t2 .s6-box .s6-box-title{    left: 0;    top: 4rem;}

.s6-t3 .s6-box{    left: 0;    top: 4rem;}
.s6-t3 .s6-box .s6-box-title{    left: 0;    top: 4rem;}




.s7{min-height:100.5rem;background: url(../images/mb/s7_bg.png) center center no-repeat; 
    background-size: cover;
    padding-top: 10rem;
    padding-bottom: 5rem;
}
.s7 .title{width: 67.8rem;margin:0 auto;margin-bottom: 3rem;}


.s7 p{font-size: 2.6rem;color: #fff;padding:0 8rem;margin-top: 1em;margin-bottom:1em;font-weight: 300;text-align: center;}
.s7 p span{font-weight: 300;display: inline-block;}

.s7-structure{width: 59.5rem;margin:0 auto;}




.s8{min-height:154.5rem;background: url(../images/s8_bg.png) center top no-repeat; 
    background-size: cover;
    padding-top: 22.7rem;
    padding-bottom: 5rem;
}
.s8 .title{width: 33.6rem;margin:0 auto;}


.s8 p{font-size: 2.6rem;color: #000;padding:0 8rem;margin-top: 1em;margin-bottom:1em;font-weight: 300;}
.s8 .slide-pic{width: calc(100% + 2.2rem);margin-left: -1.1rem;}
.s8 .slide-area .slide-list .slide-box {padding:0 1.1rem;}


.form{height:auto;background: url(../images/form_bg.png) center center no-repeat; 
    background-size: cover;
    padding-top: 10rem;
}






/*form*/
.form{
    position: relative;
    padding: 7rem 0 50px 0;
/*    display: flex;
    flex-direction: column;
    justify-content: space-between;*/
}
.bulid-info{margin-bottom: 6rem;display: flex;justify-content: center;align-items: center;}
.bulid-txtcon{display: flex;justify-content: center;align-items: center;}
.bulid-title{
    width: 30.3rem;
    
    display: flex;justify-content: center;
    align-items: center;
}
.bulid-title img{width: 19.2rem;}
.bulid-con{
    border-left: 1px solid #fff;
    padding-left: 4rem;
    width: calc(100% - 30.3rem);
}
.bulid-con li{
    font-size: 2rem;
    line-height: 1.6em;
    color: #fff;
    font-weight: 300;
}

.map{
    width: 100%;
    height: 42.8rem;
}

.form > .con{
    display: flex;
    flex-direction: column;justify-content: flex-start;align-items: center;
}

.form-area > .con{display: flex;flex-direction: column;align-items: center;}
.form-bar{
    width: 56.2rem;
    margin-top: 6.7rem;
    margin-bottom: 2rem;
}
.form h3{
    font-size: 31px;
    color: #fff;
    letter-spacing: 0.125em;
}
.form h3 p{
  display: inline-block;
  width: 50%;
}
.form h3 span{
    width: 21.6%;
  display: inline-block;
  margin-top: 0em;
  margin-left: 1em;
    color: #fff;
    font-size: 20px;
}
.form-line{
    margin:0 6.5vw;
}
.form  .btns{
    width: calc(50% - 22px);
    height: 100%;
}
.form  .form-content{
    width: 100%;
    max-width: 56.2rem;
    height: 100%;   
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.form  .form-content ul{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.form  .form-content li{
    width: 100%;
    /*height: 44px;*/
    /*line-height: 44px;*/
    color: #fff;
    font-size: 22px;
    text-align: center;
    margin: .5em 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.form  .form-content li.xs-6{
    width: 48%;
}
.form  .form-content ul li:first-child,
.form  .form-content ul li:last-child{
    /*border:1px solid #C5E7FF;*/
    /*border-radius: 5px;*/
}
.form  .form-content li input[type="text"],
.form  .form-content li input[type="tel"],
.form  .form-content li input[type="email"]{
    width: 100%;
    height: 100%;
    border:1px solid #fff;
    outline: none;
    padding: 0 1em;
    color: #fff;
    background: transparent;
    font-size: 2.4rem;
    line-height: 6.4rem;
    height: 6.4rem;
}
.form  .form-content li select{
    width: 100%;
    height: 100%;
    max-width: 400px;
    background: #F8F4F1;
    outline: none;
    border:none;
    padding: 0 1em;
    color: #fff;
    font-size: 20px;
    line-height: 5rem;
    height: 50px;
}

.form label{
    display: block;
    position: relative;
    text-align: left;
    font-size: 21px;
    /*margin-bottom: .8em;*/
}
.form-content textarea{
    font-size: 20px;
    line-height: 1.5em;
    height: 12em;
    width: 45%;
    /*padding-left: 5%;*/
    margin-left: 5%;
    position: relative;
    background: #F8F4F1;
    border-radius: 10px;
    border:2px solid #EAAD3C;

}
.form-bottom{
    text-align: center;
    margin: 0 auto;
}
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus{
      /*border: 1px solid #fff;*/
  /*-webkit-text-fill-color: #fff;*/
  /*-webkit-box-shadow: 0 0 0px 1000px #A97F36 inset;*/
  transition: background-color 5000s ease-in-out 0s;
}
input:-internal-autofill-selected{
    color: #fff !important;
}
.form  .form-content li input[type="checkbox"]{
    width: 2.2rem;
    height: 2.2rem;
    border-radius: .2rem;
    border:none;
    outline: none;
}
.form .demand-check{
    color: #fff;
    font-size: 14px;
    text-align: left;
    margin-top: 2em;
}
.form .demand-check span{
    color: #fff;
    font-weight: 300;
}
.form  .form-content li.demand-check p:first-child{
    line-height: 1.5em;
}
.form  .form-content li:last-child{
    margin-top: 1em;   
}
::placeholder {
  color: rgb(255 255 255 / .5);
  font-size: 1em;
  letter-spacing: .25em;
  font-weight: 300;
}
.form-check-inline{
    margin-right: 1em;
}
.form button.send{
    /*width: 100%;*/
    display: inline-block;
    height: 100%;
    background: rgb(255 255 255 / .8);
    color: #44AB9A;
    font-size: 2.4rem;
    line-height: 2.5em;
    cursor: pointer;
    border: none;
    padding:0 1em;
    width: 100%;
}
.form button.send:focus{
    outline: none;
}

.form .grass{
    position: absolute;
    right: -20px;
    top: 0;
}

.form .form-content li.demand-check{
    font-size: 2.1rem;
    display: flex;
    justify-content: center;
    /*line-height: 70px;*/
}
.demand-check a{
    text-decoration: underline;
    font-weight: 300;
}
.btns{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-direction: column;
    max-width: 1150px;
    margin: 0 auto;
}

.btn{
    width: 100%;
    max-width: 500px;
    /*border:5px solid #fff;*/
    position: relative;
    display: flex;
    background:#fff;
    text-align: center;
    color: #EAAD3C;
    font-size: 2.5rem;
    line-height: 2.5em;
    border-radius: 10px;
    margin-top: 1em;
}

.btn i{
    /*height: 50%;*/
    width: 30%;
    display: inline-block;
    background-size: 50% 50% !important;
}

.btn i.icon1{background: url(../img/icon_1.svg) center center no-repeat;}
.btn i.icon2{background: url(../img/icon_2.svg) center center no-repeat;}
.btn i.icon3{background: url(../img/icon_3.svg) center center no-repeat;}
.btn i.icon4{background: url(../img/icon_4.svg) center center no-repeat;}

.btn p{width: 80%;margin-left: -2em;color: #EAAD3C;font-weight: 500;}
.btn.map-btn p{color: #fff;}
.btn.map-btn{
    background: #EAAD3C;
    border:none;
    color: #fff;
    margin-top: 0em;
    max-width: 32%;
}
.btn-list{width: 100%;display: flex;justify-content: space-between;align-items: center;}
.btn-list .btn{
    width: 32%;
}


@media screen and (min-width: 1001px) {
    header{
        left: initial;
        /*width: 68px;   */
        right: 0;
        top: 10%;
        height: auto;
        padding: 0 10px;
        width: auto;
    }
    header ul{flex-direction: column;height: auto;}
    header li{width: 50px;padding: 20px 0;}
    header li:not(:last-child){border-bottom: 1px solid #44AB9A;border-right: none;}
    header p{font-size: 20px;letter-spacing: 0.25em;}
    .wrap{width: 100%;max-width:100%;}
    /*section{min-height: 56.25vw;}*/
    .kv{
        height: 56.25vw;
        background-image: url(../images/kv_bg.jpg);
    }
    .s6-t2 .s6-box.mb{display: none;}
    .kv-title,.kv-txt,.kv-h1{width: 62.5rem;}
    .s3-list{
        display: flex;
        flex-direction: row;

        flex-wrap: wrap;
        justify-content: center;
        padding-left: 0;
    }
    .s3-list li{width: 65.4rem;padding-left: 0vw;margin-left:8rem;margin-right:8rem;}
    .s3-list li:nth-child(1){order:1;}
    .s3-list li:nth-child(2){order:3}
    .s3-list li:nth-child(3){order:2}
    .s3-list li:nth-child(4){order:4}
    .s3 .title{width: 74.2rem;}
    .s4{
        min-height: 56.25vw;
        height: auto;
        background-image: url(../images/s4_bg.jpg);
    }
    .s4 .title{width: 76.3rem;}
    .s4 .h1{width: 61.6rem;}
    .s4-info li{display: flex;width: 52.2rem;margin:0 1.5rem;}
    .s4 .slide-area{width: auto;margin:0 auto;}
    .s4 .slide-list{display: flex;justify-content: center;align-items: center;}
    .s4 .slide-box{width: 52.2rem;margin:0 1.5rem;}
    .s4-info li p{text-align: left;}
    .s4-info li p:nth-of-type(1){margin-bottom: 0}
    .s4-info li > div:nth-of-type(2){padding-left: 2rem;padding-right: 2rem;}
    .s4-t1{width: 5.5rem;}
    .s4-t2{width: 6.4rem;}
    .s4-t3{width: 5.5rem;}
    .s4-info li:nth-of-type(1) > div:nth-of-type(2){width: calc(100% - 5.5rem);}
    .s4-info li:nth-of-type(2) > div:nth-of-type(2){width: calc(100% - 6.4rem);}
    .s4-info li:nth-of-type(3) > div:nth-of-type(2){width: calc(100% - 5.5rem);}
    .s4-info li p:nth-of-type(1){font-size: 3.1rem;}
    .s4-info li p:nth-of-type(2){width: auto;font-size: 2.8rem;}
    .s5{
        height: 56.25vw;
        background-image: url(../images/s5_bg.jpg);
        padding-left: 50%;
    }
    .s5 .title{width: 47.7rem;}
    .s5 p{padding: 0;width: 70%;margin:0 auto;    margin-top: 2em;}

    .s6{
        height: 56.25vw;
        background-image: url(../images/s6_bg.jpg);
    }
    .s6 .title{width: 47.7rem;}
    .s6 .slide-area{
        width: calc(1200 / 1920 * 100vw);
    }
    .s6 .con{display: flex;}
    .s6-box-title{width: 21.2rem;}
    .txt-con .s6-box{background: none;position: relative;width: 80%;height: auto;}
    .s6 .s6-box p{margin-top: .5em;font-size: 2.7rem;line-height: 1.25em;margin-bottom: 1em;}

    .s7{
        min-height: 56.25vw;
        background-image: url(../images/s7_bg.jpg);
    }
    .s7 .title{margin-bottom: 1em;width: 74.9rem;font-size: 5.3rem;}
    .s7 .con{display: flex;justify-content: space-around;align-items: flex-start;}
    .s7 .con > div{width: calc(1280 / 1920 * 100vw);}
    .s7 p{font-size: 2.8rem;}
    .s7-contxt{width: 3.3rem;margin:.25em 0;font-size: 2.8rem;}
    .s7-txt{display: flex;justify-content: flex-start;}
    .s7-txt p{width: calc(100% - 3.3rem);padding: 0;text-align: left;align-items: flex-start;margin:0;margin-bottom: 1em;padding-left: .5em;min-height: calc(3em * 1.5);}
    .s8{
        min-height: 56.25vw;
        background-color: #fff;
        background-image: url(../images/s8_bg.jpg);
        /*background-size: 77.9rem;*/
        background-position:  left top;
        padding-top: 12.5rem;
    }
    .s8 .title{width: 37.1rem;}
    .s8 .con{display: flex;}
    .s8 p{font-size: 2.8rem;}
    .s8 .txt-con{width: 50%;display: flex;flex-direction: column;justify-content: center;align-items: center;padding: 0 3.5em;}
    .s8 .slide-area{width: 50%;padding-left: calc((50vw - 856 / 1920 * 100vw) / 2);padding-right: calc((50vw - 856 / 1920 * 100vw) / 2);}

    .form{background:none;min-height: 56.25vw;padding:0;}
    .bulid-area{display: flex;background:url(../images/build_bg.jpg);min-height: 56.25vw;background-size: cover;}
    .form-area{display: flex;background:url(../images/form_bg.jpg);min-height: 56.25vw;background-size: cover;padding-top: 9.5vw;justify-content: center;}
    .form-area .con{margin-left: 5vw;}
    .bulid-info{
        width: calc(890 / 1920 * 100%);
        flex-direction: column;
        margin:0;
    }
    .bulid-con{width: fit-content;border:none;padding-left: 0;}
    .bulid-con li{border-top: 1px solid #fff;padding: 1em 0;font-size: 2.8rem;line-height: 1em;}
    .bulid-con li:last-child{border-bottom: 1px solid #fff;}
    .bulid-txtcon{
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;

    }
    .bulid-title{justify-content: flex-start;margin-bottom: 1em;font-size: 2.8rem;}
    .bulid-title img{width: 21.2rem;}
    .bulid-img{
        width: calc( ( 1920 - 890 ) / 1920 * 100%);
        display: flex;
        justify-content: center;align-items: center;
    }
    .bulid-img img{width: 60.9708%;}

    .map{width: 87.7rem;height: 64.2rem;}
    .form-bar{width: 58.2rem;margin:0;}
    .form .form-content li input[type="text"], .form .form-content li input[type="tel"], .form .form-content li input[type="email"] {
        font-size: 2.4rem;
        line-height: 7rem;
        height: 7rem;
    }
    .form .form-content,.form form {
        width: 100%;
        max-width: 62.4rem;
        height: auto;

    }

}




/*
 * 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"],
.el-checkbox > input[type="radio"] {
  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,
.el-checkbox > input[type="radio"] + .el-checkbox-style {
  position: relative;
  display: inline-block;
  width: 1.4em;
  height: 1.4em;
  vertical-align: middle;
  cursor: pointer;
}
.el-radio > input[type="radio"] + .el-radio-style:hover:before,
.el-checkbox > input[type="checkbox"] + .el-checkbox-style:hover:before,
.el-checkbox > input[type="radio"] + .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,
.el-checkbox > input[type="radio"] + .el-checkbox-style:before {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  width: 1em;
  height: 1em;
  content: '';
  background: #fff;
  border: 1px solid #231815;
}
.el-radio > input[type="radio"] + .el-radio-style:after,
.el-checkbox > input[type="checkbox"] + .el-checkbox-style:after,
.el-checkbox > input[type="radio"] + .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,
.el-checkbox > input[type="radio"][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,
.el-checkbox > input[type="radio"][disabled] + .el-checkbox-style:hover,
.el-checkbox > input[type="radio"][disabled] + .el-checkbox-style:before,
.el-checkbox > input[type="radio"][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,
.el-checkbox > input[type="radio"][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,
.el-checkbox > input[type="radio"][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,
.el-checkbox > input[type="radio"]: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,
.el-checkbox > input[type="radio"]: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-checkbox > input[type="checkbox"] + .el-checkbox-style:before,.el-checkbox > input[type="radio"] + .el-checkbox-style:before {
  border-radius: 3px;
}
.el-checkbox > input[type="checkbox"] + .el-checkbox-style:after,.el-checkbox > input[type="radio"] + .el-checkbox-style:after {
  top: 0.1em;
  left: 5px;
  box-sizing: border-box;
  width: 0.4em;
  height: 0.75em;
  transform: rotate(45deg);
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
}
.el-checkbox > input[type="checkbox"]:checked + .el-checkbox-style:before,.el-checkbox > input[type="radio"]:checked + .el-checkbox-style:before {
  border: #00626C;
  background: #00626C;
}
.el-checkbox > input[type="checkbox"]:checked[disabled] + .el-checkbox-style:before,.el-checkbox > input[type="radio"]: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: 85%;*/
}
.el-radio.el-radio-lg,
.el-checkbox.el-checkbox-lg,
.el-switch.el-switch-lg {
  font-size: 125%;
}