html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed, 

figure, figcaption, footer, header, hgroup, 

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

    margin: 0;

    padding: 0;

    border: 0;

    /* font-size: .9em;

    font: inherit; */

    vertical-align: baseline;

}

b, strong {

    font-weight: bolder;

}



i {

    font-style: italic;

}



html,body{font-family:  Arial, "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", "標楷體", DFKai-SB, sans-serif;;

    margin: 0; height: 100%;}



html{overflow-x: hidden;}



/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, 

footer, header, hgroup, menu, nav, section {

    display: block;

}

body {

    line-height: 1;

    background-size: contain;

    overflow-x: hidden;

}



blockquote, q {

    quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

    content: '';

    content: none;

}

table {

    border-collapse: collapse;

    border-spacing: 0;

}

.table th, .table td{padding: .5rem 0;}



p{line-height: 1.5;}



a, a:active, a:hover{

    outline: none;

    -webkit-transition: all .3s ease-in-out;

    -moz-transition: all .3s ease-in-out;

    -o-transition: all .3s ease-in-out;

    -ms-transition: all .3s ease-in-out;

    transition: all .3s ease-in-out;

    text-decoration: none;

}

a:hover{color:inherit;}



ul li, ol li{list-style: none;}





@keyframes boundUp{

 0%{transform: scale(1)}

 90%{transform: scale(1.05)}

 100%{transform: scale(1)}

}





/* header */

header {text-align: center;padding-bottom: 4rem;}

header .container{max-width:1300px;}

header .logo{width: 50%;max-width: 270px;text-align: center;margin: 0 auto 1rem;}





/* default */

.container{max-width: 1320px !important ;width: 100%;}

.container-body{background: #fff;padding: 2rem;position: relative;margin-bottom: 2rem;}

.container-body:after{content: '';position: absolute;right: 0;top: 0;transform: translate(25%,-50%);width: 100px;height: 150px;}

.container .menu{position: relative; z-index: 2;margin: 0rem 0;}

.container .menu a{position: relative; transition: .2s;}

.container .menu a img{padding: .5rem 0;}

.container .menu a:hover img{animation: boundUp .4s forwards;filter: brightness(1.05)}

ul.how li{padding: 1rem .5rem;}

ul.how li .title{padding-bottom: 1rem;white-space: nowrap; }

ul.how li .title span, ul.how li .title p {display: inline-block;}

ul.how li .title span{font-size: 2rem;color: #fff;background: olive;border-radius: 50%;width: 50px;height: 50px;text-align: center;line-height: 3rem;position: relative;z-index: 1;box-shadow: orange 3px 3px 1px inset;}

ul.how li .title span:after{content: '';position: absolute;left: .5rem;top: .5rem;background: rgba(255, 255, 255, 0.616);border-radius: 50%;width: 5px;height: 7px;transform: rotate(45deg)}

ul.how li .title p{font-size: 1.2rem;font-weight: bold;background: rgb(179, 179, 34);border-radius: 0 30px 30px 0;padding: .25rem .75rem .25rem 1.75rem;position: relative;transform: translateX(-1.5rem);z-index: 0;min-width: 200px;white-space: pre-wrap;}

ul.how li .description{font-size: 1.1rem;font-weight: bold;padding: 1rem 0;}

.linkBtn{color: #fff;background: #03ACE0;border: #007E9B 2px solid;border-radius: 10px;padding: .7rem 2rem;font-size: 1.1rem;font-weight: bold;margin: .5rem;display: inline-block;}

.linkBtn:hover{color: #fff;filter: brightness(1.1);}

body .container{min-height: calc( 100vh - 126px);}

header .container{min-height:auto;}

.content-body{background: #E9FCFF;border: #4AC0E1 2px solid;border-radius: 10px;padding: 1.5rem;}

.content-body .content-text{font-weight: bold;font-size: 1.1rem;padding:1rem 0 2rem;line-height: 2;}

.content-body .content-text p{line-height: 2;}

.content-body ul.list-main li{list-style: cjk-ideographic;margin-left: 2.2rem;}

.content-body ul.list-sub li{list-style: decimal;margin-left: 1.5rem;}

ul.how li .description a img:hover{filter: brightness(1.05)}

.displayPC{display: block !important;}
.displayRWD{display: none !important;}

.mx-auto{margin: 0 auto;}

/* index */

#index{background: url('../img/index/bg_dec.png') center top repeat-y,#FFDF33;background-size: contain;}

#index .index_dec{position: relative;}

#index .index_dec:before{ content: ''; background: url('../img/index/bottom_dec.png') center bottom no-repeat; background-size: contain; position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 200px;}

#index .logo{position: absolute;left: .25rem;top:.25rem;width: 50%;max-width: 270px;}

#index .container{ padding: 2rem .5rem 0;text-align: center;max-width: 100%;min-height: calc( 100vh - 126px);position: relative;}

#index .container .title{padding: .5rem;margin-bottom: 4%;width: 50%;}

#index .container .content-bottom{width: 100%;z-index: 0;text-align: center;}

#index .container .content-bottom img{vertical-align: bottom;pointer-events: none;}

#index .container .content-bottom img.l{position: absolute;left: 12%;bottom: 0; max-width: 21%;z-index: 0;}

#index .container .content-bottom img.c{position: relative;max-width: 45%;z-index: 1;margin: 0 auto;}

#index .container .content-bottom img.r{position: absolute;right: 10%;bottom: 0; max-width: 21%;z-index: 0;}

#index .container .content{ min-height: inherit;display: flex; justify-content: flex-end;align-items: center; flex-direction: column;}

#index .container .menu a img{padding: .5rem;margin-bottom: 10%;width: 10vw;}





/* intro */

#intro{background: #00ADE1;}

#intro header{background:url('../img/bg_blue.png') center top no-repeat;background-size: contain;}

#intro .container-body:after{background: url('../img/intro/dec.png') center center no-repeat;background-size: contain;}

#intro ul.how li .title span{background: #03ACE0;box-shadow: #0081C9 -3px -3px 1px inset;}

#intro ul.how li .title p{background: rgba(3, 172, 224, 0.5);}

#intro .step .step-content{border: #21AEC1 2px solid;padding: .5rem;height: 100%;}

#intro .step .step-content .step-title{font-size: 1.3rem; background: #21AEC1;padding: .5rem;text-align: center;color:#fff;}

#intro .step .step-content .step-des{padding: 1rem 0 0;color:#606060;}

#intro .step .step-content .step-des .hint{color:#21AEC1;}

#intro .step .step-content .step-des ul li{list-style: decimal;margin-left: 2rem;padding: 0;line-height: 1.5;}

#intro .step > div{margin: .5rem 0;position: relative;}

#intro .step > div:nth-child(2) .step-content{border-color :#EF6C6C;}

#intro .step > div:nth-child(2) .step-content .step-title{background: #EF6C6C;}

#intro .step > div:nth-child(2) .step-content .hint{color: #EF6C6C;}

#intro .step > div:nth-child(3) .step-content{border-color :#DDB954;}

#intro .step > div:nth-child(3) .step-content .step-title{background: #DDB954;}

#intro .step > div:nth-child(3) .step-content .hint{color: #DDB954;}

#intro .step > div:nth-child(4) .step-content{border-color :#BBD363;}

#intro .step > div:nth-child(4) .step-content .step-title{background: #BBD363;}

#intro .step > div:nth-child(4) .step-content .hint{color: #6A7C1C;}

#intro .step > div:after{ content: ''; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-left: 15px solid #000; position: absolute; right: -.5rem; top: 50%;}

#intro .step > div:last-child:after{content: none;}

#intro .qa .qa-title{font-size: 1.15rem;margin-bottom: 1rem;}

#intro .qa .qa-title span{color: #000;background: #F7B601;border-radius: 50%;width: 30px;height: 30px;text-align: center;display: inline-block;margin-right: 1rem;line-height: 1.75;position: relative;}

#intro .qa .qa-title span:after{ content: ""; position: absolute; right: -5px; bottom: .5rem; width: 0px; height: 0px; margin: auto; border-style: solid; border-color: #F7B601 transparent transparent transparent; border-width: 5px 3px 0 3px; transform: rotate(284deg);}

#intro .qa .qa-des{background: #EEEDEA;padding: 1rem;}

#intro .intro_bottom_content{padding: 0 1.5rem;}

#intro .intro_bottom_content img{padding: .5rem 0;}

#intro .intro_bottom_content img:hover{filter: brightness(1.05)}



/* use */

#use{background: #4AC0E1;}

#use header{background:url('../img/bg_blue.png') center top no-repeat;background-size: contain;}

#use .container-body:after{background: url('../img/use/dec.png') center center no-repeat;background-size: contain;}

.progress-contnt{background-color:#EEEDEA;padding: 1rem;border-radius: 20px;margin-bottom: 1rem;}

.progress { counter-reset:step; position: relative;height: auto;max-width: 80%;margin: 0 auto; }

.progress li { list-style-type: none; float:left; width: 33.33%; position:relative; text-align:center; font-size: 1.1rem; font-weight: bold; color:#545454; }

.progress li:before { content:counter(step); counter-increment: step; width: 50px; height: 50px; line-height:35px; display:block; text-align:center; margin:0 auto 10px auto; border-radius:50%; background: #9B9B9B; color: #fff; font-size: 2rem;box-shadow: #464646 -3px -3px 1px inset;line-height: 1.5;position: relative; z-index: 50; }

.progress li:after { content:""; position:absolute; width: 100%; height:3px; background: #4AC0E1; top: 20px; left: -50%; z-index:2; }

.progress li:first-child:after { content:none; }

.progress li.active { color:#000000;}

.progress li.active:before { background: #4AC0E1;box-shadow: #008EAF -3px -3px 1px inset;}

.progress li.active + li:after { background-color: #4AC0E1;}

#use label{font-size: 1.1rem;font-weight: bold;}

#use .checkprivate label{color: #EF3F69;padding: .25rem 0 0;line-height: 1.5;}

#use button.linkBtn{background:#FF9515;border-color: #fff;}

#use button.resetBtn{background: #828282;}

#use .form_dec{background: #4AC0E1;border-radius: 10px;padding: 2rem 1rem;}

#use .content-text .hint{color: #EF3F69;}

.content-text a{color: #1296D8;border-bottom: #1296D8 1px solid;}

.content-text a:hover{color: rgb(67, 183, 241);border-bottom: rgb(67, 183, 241) 1px solid;}

#use button.refreshBtn{background: transparent;border: none;}

#use button.refreshBtn:hover{animation: boundUp .4s forwards;}

input#vetify{max-width: 200px;margin: 0 auto;transform: translateX(-17px)}



/* award */

#award{background: #EA617B;}

#award header{background:url('../img/bg_red.png') center top no-repeat;background-size: contain;}

#award .container-body:after{background: url('../img/award/dec.png') center center no-repeat;background-size: contain;}

#award button.linkBtn{background:#FF9515;border-color: #fff;}

#award label{font-size: 1.1rem;font-weight: bold;}

#award .checkprivate label{color: #EF3F69;padding: .25rem 0 0;line-height: 1.5;}

#award  .progress li:after { background: #EA617B; }

#award .progress li.active:before { background: #EA617B;box-shadow: #AF123F -3px -3px 1px inset;}

#award .progress li.active + li:after { background-color: #EA617B;}

#award .content-body{background: #FFEEF2;border: #EA617B 2px solid;}

#award .form_dec{background: #F47A97;border-radius: 10px;padding: 2rem 1rem;}

#award label{color: #fff;}

#award .form_dec p{color: #fff;padding-top: .5rem;}





/* app */

#app{background: #5ED09A;}

#app header{background:url('../img/bg_green.png') center top no-repeat;background-size: contain;}

#app .container-body:after{background: url('../img/app/dec.png') center center no-repeat;background-size: contain;}

#app .linkBtn{background:#5ED09A;border-color: #00964B;}

#app ul.how li .title span{background: #5ED09A;box-shadow: #00AF57 -3px -3px 1px inset;}

#app ul.how li .title p{background: rgba(94, 208, 155, 0.5);}

.sub-content{border: #5ED09A 2px solid;border-radius: 15px ;position: relative;padding:.5rem 1rem; margin-bottom: 2rem;}

#app .sub-content img{vertical-align: bottom;margin: 0 auto;}

.sub-content.data-title:after{content: attr(data-title);background: #5ED09A;border-radius: 5px;padding: .25rem .5rem;position: absolute;left: 0;top: 0;transform: translate(-2%,-30%);line-height: 1.5;}

#app .sub-content .sub-content-header{padding: .25rem 0;letter-spacing: 3px;margin-bottom: 1rem;}

#app .sub-content .sub-content-header .title{font-size: 28px;color: #3fbc7d;margin-right: .5rem;padding-bottom: 0;}
#app .sub-content .sub-content-header .des{font-size: 16px;font-weight: bold;}

#app .sub-content.c-1{align-items: center;padding: 0}

#app .sub-content.c-2 .c-2-content{padding: 1rem .5rem;margin: .5rem 0;}

#app .sub-content.c-2 >div:not(:first-of-type) .c-2-content{background: rgba(94, 208, 155, 0.3);border-radius: 15px;min-height: 95%;}

#app .sub-content.c-2 .c-2-content p{padding-top: 1rem;text-align: left;}

#app .sub-content.c-2 .c-2-content p span.hint{color: #FF4040;margin-right: .5rem;}

#app .sub-content.c-2 >div{position: relative;}

/* #app .sub-content.c-2 >div:first-child:after{ content: ''; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-left: 15px solid #000; position: absolute; right: 0px; top: 50%;} */
#app .sub-content .sub-content-body >div{margin-bottom: 1rem;}
#app .img-content{border-radius: 15px;position: relative;height: 100%;text-align: center;padding: 1.75rem 1rem 1rem;}
#app .img-content img{margin: 0 auto 1rem;}
#app .img-content.border-style{border: #5ed09a 2px dashed;}
#app .img-content.data-title:after{content: attr(data-title);background: #31c97d;color: #fff; border-radius: 5px;padding: .15rem .5rem;position: absolute;left: 0;top: 0;transform: translate(10px,-50%);line-height: 1.5;font-size: 16px;}
#app .img-content.data-title.data-title-big:after{font-size: 20px;}
#app .img-content p.des{font-size: 16px;text-align: left;}
#app .img-content .row > div{padding: 0 .5rem;}
#app .img-content .row > div:not(:last-child){margin-bottom: 1rem;}
#app .img-content.arrow .arrow-content{position: relative;}
#app .img-content.arrow .arrow-content img{margin-bottom: 1rem;}
#app .img-content.arrow .arrow-content:after{
    content: '';
    border-bottom: 20px solid transparent;
    border-top: 20px solid transparent;
    border-left: 20px solid #5ed09a;
    position: absolute;
    right: 0;
    margin: 0 auto;
    top: 50%;
    transform: translate(calc(100%), 0%);
    width: fit-content;
}

.img-row{display: flex;flex-wrap: wrap;flex-direction: row;justify-content: center;}
.img-row img{margin-bottom: 1rem;}
#app .sub-content.c-3 .img-row img{width: 33.3%;padding: 0 .25rem;}
#app .sub-content.c-5 .img-row img{width: 25%;padding: 0 .25rem;}
#app .sub-content.c-6 .img-row img{width: 25%;padding: 0 .25rem;}


#app .sub-content .des .des-text{padding: 0;background: transparent;margin-bottom: 0;font-size: 16px;text-indent: -20px; padding-left: 20px;}
#app .sub-content .des .des-text:after{content: none;}

.sub-content .tips{background: #c8fcdf;padding: .25rem .5rem;border-radius: 30px;display: inline-block;margin: .75rem auto 0;font-size: 16px;line-height: 1.5;}
.sub-content.c-3 .tips{border-radius: 10px;padding: .65rem 1.5rem;font-size: 18px;border-radius: 30px;}
.sub-content.c-5 .tips{background: #5ed09b4d;border-radius: 10px;padding: .75rem 1.5rem;text-align: left;font-size: 18px;}

#donate .sub-content .tips{background: #ffd7d7;padding: .5rem 1.5rem;font-size: 18px;margin-top: 1rem;}

#app .sub-content.c-5 .sub-content-body >div{margin-bottom: 2rem;}
#app .sub-content.c-5 .sub-content-body:last-child >div{margin-bottom: 1rem;}

.dash{border-bottom: #5ed09a 2px dashed;margin: 2rem auto;width: 100%;}


.sub-content .des-text{position: relative; background: #EEEDEA;border-radius: 10px;padding: .5rem;margin-bottom: 2rem;text-align: left;line-height: 1.5;}

.sub-content .des-text:last-child{margin-bottom:0;}

.sub-content .des-text span{color: #EF3F69;font-weight: normal;font-size: 26px;}

.sub-content .des-text:after{ content: ''; border-right: 10px solid transparent; border-left: 10px solid transparent; border-top: 10px solid #000; position: absolute; left:0;right: 0;margin: 0 auto; top: auto;bottom: 0; transform: translate(calc(50% - 10px),200%); width: fit-content;}

.sub-content .des-text:last-child:after{content: none;}

#app .sub-content .sub-content-split{padding:1.5rem 0 ;border-bottom: #5ED09A 2px dashed;}

#app .sub-content .sub-content-split:last-child{border-bottom:none;}

#app .sub-content .sub-content-split h5{color: #FF4040;text-align: center;font-weight: bold;margin-bottom: 1.5rem;}

/* #app .sub-content.c-5{margin-left:-15px;margin-right:-15px;} */
/* 
#app .sub-content.c-5 .row{padding:0 15px;}

#app .sub-content.c-6{margin-left:-15px;margin-right:-15px;}

#app .sub-content.c-6 .row{padding:0 15px;} */

#app .sub-content .c6-table-img {text-align: center;}
#app .sub-content .c6-table-img img{max-width: 800px;width: 100%;margin-bottom: 1rem;}

#app .sys{padding:2rem 1.5rem 1.5rem;margin: 2.5rem 0 0;position: relative;text-align: center;border-radius: 15px;}

#app .sys .title-img{position: absolute;left: 0;right: 0;top: 0;margin: 0 auto; transform: translateY(-50%);}

#app .sys.android{background: rgba(80, 216, 180, 0.3)}

#app .sys.ios{background: rgba(62, 150, 221, 0.3)}

#app .sys p{color: #DD5B5B;margin-top: 1rem;}

#app .sys.android:after{content: '';position: absolute;left: 0;bottom: 0;background: url('../img/use/dec.png') center center no-repeat;background-size: contain;width: 110px;height: 180px;transform: translate(-30%,-10%) scaleX(-1);}

#app .sys.ios:after{content: '';position: absolute;right: 0;bottom: 0;background: url('../img/award/dec.png') center center no-repeat;background-size: contain;width: 110px;height: 180px;transform: translate(20%,10%);}

#app .hint-content{background: rgba(94, 208, 155, 0.3);border-radius: 10px;padding: .5rem;}
#app .hint-content p{border-bottom: #ff4040 1px solid;font-size: 18px;display: initial;}
#app span.hint{color: #ff4040;font-weight: bolder;font-size: 20px;text-shadow: #ff4040 1px 1px 1px;margin-right: .25rem;}



/* donate */

#donate{background: #F19795;}

#donate header{background:url('../img/bg_red.png') center top no-repeat;background-size: contain;}

#donate .container-body:after{background: url('../img/donate/dec.png') center center no-repeat;background-size: contain;}

#donate .linkBtn{background:#F19795;border-color: #930000;}

#donate ul.how li .title span{background: #F19795;box-shadow: #A80000 -3px -3px 1px inset;}

#donate ul.how li .title p{background: rgba(241, 150, 149, 0.5);}

#donate .sub-content{border-color: #F19795 ;border-radius: 15px;padding: 2rem 1rem 1.5rem;}

#donate .sub-content.data-title:after{background: #ffb3b3;transform: translate(10px, -50%);;}

#donate .sub-content .img-row img{width: 25%;padding: 0 .25rem;}


/* carrier */

#carrier{background: #F5A862;}

#carrier header{background:url('../img/bg_orange.png') center top no-repeat;background-size: contain;}

#carrier .container-body:after{background: url('../img/carrier/dec.png') center center no-repeat;background-size: contain;}

#carrier .linkBtn{background:#F5A862;border-color: #B2590F;}

#carrier ul.how li .title span{background: #F5A862;box-shadow: #B2590F -3px -3px 1px inset;}

#carrier ul.how li .title p{background: rgba(245, 169, 98, 0.5);}

#carrier ul.how li .description span.hint{color: #EF3F69;}







/* footer */

footer{background: #FF9515;color: #fff;border-top:#fff 2px solid;padding: .4rem .25rem;text-align: center;font-size: 1.1rem;font-weight: bold;letter-spacing: 1px;}

footer p span{display: inline-block;}





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

    #index .container .title{width: auto;}
    #index .container .menu a img{width: auto;}

    /* app */

    #app .sys.android:after{width: 110px;height: 100px;transform: translate(-50%,10%) scaleX(-1);}

    #app .sys.ios:after{width: 110px;height: 100px;transform: translate(50%,10%);}

    #index .container .content-bottom img{text-align: center;margin: 0 auto;}


}



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

    /* index */

    #index .container{padding: 5rem .5rem 0;min-height: calc( 100vh);}

    #index .container .menu{margin: 2rem 0;}

    #index .container .content-bottom img.c{margin: 0 auto;}

}



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

    #index .container .content{justify-content: space-between;}

    /* intro */

    #intro .step > div:after{content: none;}



    /* app */

    .sub-content{padding: 1rem 1rem 2rem;}


    #app .img-content{height: auto;margin-bottom: 1rem;}
    #app .sub-content-body >div:last-child{margin-bottom: 0rem;}
    #app .sub-content-body >div:last-child .img-content{margin-bottom: 0rem;}
    #app .img-content.arrow{margin-bottom: 3rem;}
    #app .img-content.arrow .arrow-content{position: static;}
    #app .img-content.arrow .arrow-content:after{
        content: '';
        border-left: 20px solid transparent;
        border-right: 20px solid transparent;
        border-top: 20px solid #5ed09a;
        position: absolute;
        right: 0;
        left: 0;
        bottom: 0;
        margin: 0 auto;
        top: auto;
        transform: translate(0, calc(100% + 10px));
    }

    #donate .sub-content .img-row img{width: 50%;}

    /* #app .sub-content.c-5 .img-row img{width: 50%;}
    #app .sub-content.c-6 .img-row img{width: 50%;} */
}



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

    .displayPC{display: none !important;}
    .displayRWD{display: block !important;}
    #index .logo{position: relative;text-align: center;margin: 0 auto;margin-bottom: 1rem;}
    #index .container{padding: .5rem .5rem 0;}
    #index .container .content{justify-content: space-between;}
    #index .container .content-bottom img{text-align: center;margin: 0 auto;}
    



    /* app */

    .sub-content img{margin-bottom: 1.5rem;}
    .sub-content .phone img{margin-bottom: 0;}

    #app .sub-content.c-1{padding: 2rem 1rem 0;}
    

    #app .sub-content.c-3 .img-row img{width: 100%;}
    #app .sub-content.c-5 .img-row img{width: 50%;}
    #app .sub-content.c-6 .img-row img{width: 50%;}
    

    #app .sub-content img{padding: .5rem;}


}







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

    #index .container .menu a img{padding: 0;}

    .container-body:after{width: 80px;height: 100px;}

    .container-body{padding: 2rem .5rem;}

    ul.how li .description{padding: 1rem .5rem;}

    .progress { max-width: 100%;}

    .progress li{font-size: 1rem;}

    .content-body{padding: .5rem;}

    .disaplyNoneRwd{display: none;}

    ul.how li .title {display: flex; align-items: center;flex-direction: row;}

    ul.how li .title p{min-width: auto;width: 100%;}

    ul.how li .title span{min-width: 50px;}

    



    /* index */

    #index .container{padding: .5rem .5rem 0rem;}

    #index .container .content-bottom img.l{left: 0%;}

    #index .container .content-bottom img.c{max-width: 70%;}

    #index .container .content-bottom img.r{right: 0%;}

    #index .container{min-height: calc( 100vh - 146px);}



    /* intro*/

    #intro .step > div{margin: .5rem 0 1rem;}

    #intro .step > div:after{ content: ''; border-right: 15px solid transparent; border-left: 15px solid transparent; border-top: 15px solid #000; position: absolute; left:0;right: 0;margin: 0 auto; top: auto;bottom: -2.3rem; transform: translateX(calc(50% - 15px)); width: fit-content;}



    /* award */

    #use .form_dec{padding: 1.5rem .5rem;}



    /* award */

    #award .form_dec{padding: 1.5rem .5rem;}



    /* app */

    .sub-content{padding: 1rem .5rem 1rem;}

    #app .sub-content:after{transform: translate(-2%,-50%);}

    

    #app .sub-content.c-2 > div{padding:.25rem;}

    #app .sub-content.c-2 img{padding: 0;}

    #app .sub-content.c-2 .c-2-content p{padding-top: 0;}

    /* #app .sub-content.c-2 >div:first-child:after{content: none;} */

    #app .sub-content.c-5{margin-left: -10px;margin-right: -10px;}

    #app .sub-content.c-6{margin-left: -10px;margin-right: -10px;}

    #app .sys{padding: 1.5rem .5rem 1rem;}

    #app .sys.android:after{width: 50px;height: 50px;transform: translate(-50%,10%) scaleX(-1);}

    #app .sys.ios:after{width: 50px;height: 50px;transform: translate(50%,10%);}

    



}









/* @keyframes ani{

    0%{stroke-dashoffset: 2000;}

    100%{stroke-dashoffset: 0;}

}



.test {background: white}

svg{width: 40%;position: fixed;top: 0;left: 0;right: 0;bottom: 0;margin: auto;}

svg > *{animation: ani 3s linear;stroke-dasharray: 800;} */

/* svg path{animation: ani2 5s linear infinite;stroke-dasharray: 170;}

svg polyline{animation: ani2 4s linear infinite;stroke-dasharray: 250;}

svg rect{animation: ani2 4s linear infinite;stroke-dasharray: 250;} */