h1,h2,h3,h4,h5,h6{margin:0.25rem 0;}

.font-no-w{font-weight: normal;}
a{text-decoration: none;}
.padding-lr{padding: 0.25em 2.5%!important;}
.padding-100{padding-bottom: 100px!important;}
.width-80{padding: 0 5%;}
.tiny{padding: 2px 4px;}
div img{	width: 100%;display: block;	}
/*換行*/
.word-break{-ms-word-break: keep-all; word-break: keep-all;}
/*直式文字*/
.text_ver{writing-mode: tb-rl;direction: ltr;-webkit-writing-mode: vertical-lr;writing-mode: vertical-lr; }
.flexBox{
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap; 
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: center;
    -webkit-justify-content: center;
    -webkit-align-items: stretch;
    -ms-align-items: stretch;
    align-items: stretch;
}
.flexBox>div{min-height: 1em;}
.flexBox>div>div{height: 100%;}
.flexBox.aingn-center{-ms-align-items: center;align-items: center;}

@media screen and (min-width:1000px){
.show-medium{display: none;}
.padding-lr{padding: 0.25em 50px!important;}
}
@media screen and (min-width:600px){
.show-small{display: none;}
}
@media screen and (min-width:350px){
.show-tiny{display: none;}
}
/*-----------------------------------------顏色、背景-----------------------------------------*/
#page {background-color: #2E7EC2;color:white; overflow: hidden;}
.teal,.hover-teal:hover{color:#fff!important;background-color:#00A29A!important}
.text-teal{color:#00A29A!important}
.pink,.hover-pink:hover{color:#fff!important;background-color:#E4007F!important}
.text-pink{color:#E4007F!important}
#Pa2 {background: url('../images/index-bg.png')top center repeat-y;background-size: 100%;}

h1{
    font-family: 'cwtexyen';
    position: relative;
    color: #fff;
    padding: 0.25em 1em 0.5em 2.5em;
    line-height: 1;
    font-weight: 900;
}
h1>*{position: relative;z-index: 1;-ms-word-break: keep-all; word-break: keep-all;}
h1::before{
    position: absolute;
    content: "";
    width: 2.1em;
    height: 125%;
    right: calc( 100% - 2.3em );
    bottom: 0;
    z-index: 0;
    background: url(../images/index-icon-01-hand.png)left 0.5em top no-repeat;
    background-size: 100% 100%;
}
h1::after{
    position: absolute;
    content: "";
    width: calc(100% - 2.3em);
    height: 100%;
    right: 0;
    top: 0;
    z-index: 0;
    background-color: #00A29A;
    background: -webkit-linear-gradient(#00A29A 80%, #0f8e88 80%);
    background: -o-linear-gradient(#00A29A 80%, #0f8e88 80%);
    background: linear-gradient(#00A29A 80%, #0f8e88 80%);
}
#a01 h1,#a03 h1,#a05 h1{color: black;}
#a01 h1::after,#a03 h1::after,#a05 h1::after{
    background-color: #F7B52C;
    background: -webkit-linear-gradient(#F7B52C 80%, #fa9e25 80%);
    background: -o-linear-gradient(#F7B52C 80%, #fa9e25 80%);
    background: linear-gradient(#F7B52C 80%, #fa9e25 80%);
}

section>h2{
    position: relative;
    line-height: 1;
    -ms-word-break: keep-all; word-break: keep-all;
}
.far.fa-thumbs-up{
    color: rgba(0,0,0,0);
    font-size: 1.5em;
    margin-right: 0.25em;
    background: url('../images/index-icon-02-hand-C.png')left center no-repeat;
    background-size: 100% 100%;
}
/*-------------------------------------END-顏色-----------------------------------------*/
.FOOTER img{max-width: 320px;margin:auto;}
.FOOTER a{
    font-size: 1.2em;
    word-break: keep-all;
    line-height: 1.75;
}
/*-----------------------------------------按鈕-----------------------------------------*/
.go_btn,.more_btn{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: block;
    outline: 0;
    line-height: 1.25;
    vertical-align: middle;
    text-decoration: none;
    text-align: center;
    overflow: hidden;
    cursor: pointer;
    /* white-space: nowrap; */
    text-align: center;
}


.more_btn:hover,.go_btn:hover{
-webkit-filter: drop-shadow(0px 0px 10px #fff)sepia(100%);
-o-filter: drop-shadow(0px 0px 10px #fff)sepia(100%);
filter: drop-shadow(0px 0px 10px #fff)sepia(100%);
}
.more_btn:hover{background: #fff;color:#000;}
.more_btn{
    display: inline-block;
    margin: 0.5em auto;
    padding: 0.3em 0.5em;
    background: white;
    color: #E4007F;
}

/*底部滑動橫條*/
#bottom{
    position: fixed;
    bottom: 0;
    width: 100%;
    /* min-height: 3em; */
    z-index: 10000;
    text-align: center!important;
    /* background-color: rgba(255,255,255,0.5); */
}
#goTop{position: absolute;top:-3.5em;right: 1em;width: 3em;height: 3em;padding: 0.5em;}


/*-------------------------------------END-按鈕-----------------------------------------*/
/*----------------------------------------- BAN區塊-----------------------------------------*/
#page #btns{color: white;font-weight: 400;
    border: 1em solid #254691;
    border-image: url(../images/index-btns-border.png)42.645 25/1.5em round stretch;
    border-left: 0;
    border-right: 0;
    padding: 0.5em;
}
#page #btns span:first-child{display: inline-block;width: 5em;font-size: 1.5em; /*padding: 0.25em;*/border-right: 1px solid;margin-right: 0.5em;color: black}
#page #btns a{    display: inherit;    padding: 0.25em 0.5em;}
#page #btns a:hover{
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
-webkit-transform-origin: left;
-moz-transform-origin: left;
-ms-transform-origin: left;
-o-transform-origin: left;
transform-origin: left;
box-shadow: 0 0 1em #fff100;
}
#page #btns h6 {max-width: 42rem; margin:auto;}
#page #btns a:hover h6{
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
-webkit-transform-origin: 5% 50%;
-moz-transform-origin: 5% 50%;
-ms-transform-origin: 5% 50%;
-o-transform-origin: 5% 50%;
transform-origin: 5% 50%;
}

@media screen and (max-width:600px){
#page #btns span:first-child{border-right: none;}
}

/*-------------------------------------END-BAN區塊-----------------------------------------*/


/*----------------------------------------- 區塊a01 -----------------------------------------*/
#a01>*:nth-child(2) .col div{height: 10em;background: url('../images/index-01-1.png') left center no-repeat; background-size: 450%;}
#a01>*:nth-child(2) .col:nth-child(2) div{background-position: 33.33% center;}
#a01>*:nth-child(2) .col:nth-child(3) div{background-position: 66.66% center;}
#a01>*:nth-child(2) .col:nth-child(4) div{background-position: 100% center;}


#a01>*:nth-child(3) .col {    -ms-word-break: keep-all; word-break: keep-all;}
#a01>*:nth-child(3) .col p{    height: 4em;line-height: 1;}
#a01>*:nth-child(3) .col h3{background:#E95513;padding: 0.5em;position: relative;margin-bottom: 1em;}
#a01>*:nth-child(3) .col h3::after{
    position: absolute;
    content: "";
    top: 100%;
    left: calc(50% - 0.5em);
    border: 0.5em solid transparent;
    border-top: 1em solid #E95513;
}
#a01>*:nth-child(3) .col:nth-child(2) h3{background:#2CA6E0;}
#a01>*:nth-child(3) .col:nth-child(2) h3::after{border-top-color:#2CA6E0;}
#a01>*:nth-child(3) .col:nth-child(3) h3{background:#8DC21F;}
#a01>*:nth-child(3) .col:nth-child(3) h3::after{border-top-color:#8DC21F;}
#a01>*:nth-child(3) .col:nth-child(4) h3{background:#F4A12C;}
#a01>*:nth-child(3) .col:nth-child(4) h3::after{border-top-color:#F4A12C;}


#a01>*:nth-child(4) h3{position: relative;}
#a01>*:nth-child(4) h3::after{
    position: absolute;
    content: "";
    width: 5em;
    height: 5em;
    top: 0.35em;
    right: calc(100% - 0.5em);
    background: url('../images/index-01-2-1.png')top center no-repeat;
    background-size: contain;
}
@media screen and (max-width:601px){
    #a01>*:nth-child(4) h3::after{
    width: 1em;
    top: -4.75em;
    right: calc(50% - 0.5em);
    background: url('../images/index-01-2-2.png')bottom center no-repeat;
    background-size: contain;
}
#a01>*:nth-child(2) .col div {
    height: 5em;
    width: 6.5em;
    margin: auto;
    background-size: 28em;
}
}
/*-------------------------------------END- 區塊a01 -----------------------------------------*/
/*----------------------------------------- 區塊a02 -----------------------------------------*/

#Pa2 h2{text-align: center;}
.stroke{text-shadow: 0 0 0.15em #00A199, 0 0 0.15em #00A199, 0 0 0.15em #00A199, 0 0 0.15em #00A199, 0 0 0.15em #00A199, 0 0 0.15em #00A199, 0 0 0.15em #00A199, 0 0 0.15em #00A199, 0 0 0.15em #00A199, 0 0 0.15em #00A199, 0 0 0.15em #00A199, 0 0 0.15em #00A199, 0 0 0.15em #00A199, 0 0 0.15em #00A199, 0 0 0.15em #00A199, 0 0 0.15em #00A199, 0 0 0.15em #00A199;}

#Pa2 h2 .small{
    color: #fffeee;
    font-size: 0.45em!important;
    line-height: 1.25;
    text-align: left;
    display: inline-block;
    margin-left: 0.5em;
    padding: 0.5em;
    border-left: 2px solid #fff;
}

#a02>*:nth-child(2) .col div{    position: relative;padding-left: 35%;}
#a02>*:nth-child(2) .col div::after{
    position: absolute;content: "";width: 30%;height: 100%;top: 0; left: 0;
    background: url('../images/index-02-1.png') 0 center no-repeat;
    background-size: 450%;
}
#a02>*:nth-child(2) .col:nth-child(2) div::after{    background-position: 33.33% center;}
#a02>*:nth-child(2) .col:nth-child(3) div::after{    background-position: 66.66% center;}
#a02>*:nth-child(2) .col:nth-child(4) div::after{    background-position: 95% center;}

#a02>*:nth-child(2) .col p,#a02>*:nth-child(2) .col ul{
    height: 5em;
    padding: 0.25em 1em;
    text-align: left;
    font-size: 0.95em;
    line-height: 1.25;
    font-weight: 400;
}
#a02>*:nth-child(2) .col ul{padding-left: 1em;}
#a02>*:nth-child(2) .col h5{background:yellow;color: black;padding: 0.25em;position: relative;}
#a02>*:nth-child(2) .col h5::after{
    position: absolute;
    content: "";
    top: calc(50% - 0.5em);
    right:100%;
    border: 0.5em solid transparent;
    border-right: 1em solid yellow;
}
#a02>*:nth-child(3) .s2 h6,#a02>*:nth-child(3) span.badge{
    background: white;
    border: 3px solid #00A29A;
    border-radius: 100%;
    width: 3.5em;
    height: 3.5em;
    line-height: 1.25;
    padding: calc(0.75em - 2px) 0;
}
#a02>*:nth-child(3) .s2 h6{margin-top: 1em;position: relative;z-index: 0;}
#a02>*:nth-child(3) .s2{position: relative;}
#a02>*:nth-child(3) .s2::before{
    position: absolute;
    content: "";
    width: 3px;
    height: 100%;
    top: 1.75em;
    left: 2em;
    background: #00A29A; 
}
#a02>*:nth-child(3) span.badge{
    position: relative;
    z-index: 1;
    float: left;
    width: 4em;    height: 4em;
    background: #00A29A; border-color: white; color: white;
}
#a02>*:nth-child(3) h5.point{position: relative;}
#a02>*:nth-child(3) h5.point::after,#a02>*:nth-child(3) h5.point::before{
    position: absolute;
    z-index: 2;
    content: "";
    top: 1.5em;
    right:calc(100% - 0.3em);
    border: 0.5em solid transparent;
    border-right: 1em solid #00A29A;
}
#a02>*:nth-child(3) h5.point::before{
    z-index: 0;
    border-right: 1em solid white;
    -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
    -o-transform: scale(1.3);
    transform: scale(1.3);
    -webkit-transform-origin: right;
    -moz-transform-origin: right;
    -ms-transform-origin: right;
    -o-transform-origin: right;
    transform-origin: right;
}
#a02>*:nth-child(3) h6.blue{margin-left: 2em;margin-top: 1em;padding: 0.5em 0;-ms-word-break: keep-all; word-break: keep-all;}
#a02>*:nth-child(3) .row:nth-child(odd) h6.blue,#a02>*:nth-child(3) .row:nth-child(odd) span.badge{background: #2CA6E0!important;}
#a02>*:nth-child(3) .row:nth-child(odd)  h5.point::after{border-right-color: #2CA6E0;}
#a02>*:nth-child(3) p{padding: 1em; font-size: 1.1em;}


#a02>*:nth-child(4) .row-padding{ background: url('../images/index-02-3.png') center 35% no-repeat;background-size: 30%; padding:10% 0 0;}
#a02>*:nth-child(4) .s5 {max-width: 40%;}
#a02>*:nth-child(4) .s12>div{ width: 50%; max-width: 300px; margin: auto; clear: both;}
#a02>*:nth-child(4) .s5 p{height: 5em;text-align: left;    padding: 0.25em 0.75em;    line-height: 1.25;    font-weight: 600;}
@media screen and (min-width:601px){
#a02>*:nth-child(4) .row-padding{ background: url('../images/index-02-3.png') center 35% no-repeat;background-size: 35%; padding:10% 0 0;}
#a02>*:nth-child(4) .right{ margin-left: 30%; }
#a02>*:nth-child(4) .s6:last-child{ margin-left: 33.33%; margin-top: 25%;}
#a02>*:nth-child(4) .row-padding{ background-position: center 25%;}
}

#a02>*:nth-child(5) .row-padding{ background: url('../images/index-02-4.png') center 25% no-repeat;background-size: 30%;padding:10% 0 0;
    justify-content: space-between;    -webkit-justify-content: space-between;}
#a02>*:nth-child(5) .right{ margin-left: 33.33%; }
#a02>*:nth-child(5) .indigo{ padding:0.75em;height: 100%;background-color: #f7c09a!important;position:relative;color: #000!important;}
#a02>*:nth-child(5) .indigo>*{position:relative;z-index: 1;}
#a02>*:nth-child(5) .indigo::before{ 
    z-index: 0;
    position: absolute;
    content: "";
    width: 5em;
    height: 5em;
    background: url('../images/arrow.png')left top no-repeat;
    background-size: 200%;
    top: -4.5em;
    left: calc(50% - 2.5em);
}
#a02>*:nth-child(5) div.col:nth-child(1)>.indigo::before{ top: calc(75% - 2.5em);left: calc(100% - 0.5em);transform: rotate(20deg);background-position: right bottom;}
#a02>*:nth-child(5) div.col:nth-child(3)>.indigo::before{ top: calc(80% - 2.5em);left: -4.5em;transform: rotate(-20deg)scale(2);background-position: left bottom;}
#a02>*:nth-child(5) div.col:nth-child(4)>.indigo::before{ top: -1em;left: 100%;background-position: right bottom;transform: scale(1.75)}
#a02>*:nth-child(5) div.col:nth-child(6)>.indigo::before{ top: 1em;left: -5em;background-position: left bottom;}

#a02>*:nth-child(5) div.col:nth-child(7)>.indigo::before{ top:-4.5em;left: calc(100% - 0.5em);transform: rotate(-45deg)scale(1.5);background-position: right bottom;}
#a02>*:nth-child(5) div.col:nth-child(9)>.indigo::before{ top:-4em;left: -4em;transform: rotate(45deg)scale(1.25);background-position: left bottom;}
#a02>*:nth-child(5) h5{ border-bottom: 2px solid;margin-bottom: 0.25em;line-height: 1;padding-bottom: 0.25em;}
@media screen and (max-width:601px){
#a02>*:nth-child(5) .s6{ width: 49%; }
#a02>*:nth-child(5) .s6.right{ margin-left: 0;}
#a02>*:nth-child(5) .row-padding{ background-position: center center;}
#a02>*:nth-child(5) .row-padding .col{ padding:0.25em;}

#a02>*:nth-child(5) div.col:nth-child(1)>.indigo::before{ top: calc(100% - 0.75em);left: calc(50%);background-position: right top;transform: rotate(-20deg);width: 10em;height: 10em;}
#a02>*:nth-child(5) div.col:nth-child(3)>.indigo::before{ top: calc(100% - 2em);left: -1.25em;background-position: right top;transform: rotate(30deg);width: 10em;height: 10em;}
#a02>*:nth-child(5) div.col:nth-child(4)>.indigo::before{ width: 3em;height: 3em;top: calc(50% - 1em);left: 100%;background-position: right bottom;}
#a02>*:nth-child(5) div.col:nth-child(6)>.indigo::before{ width: 4em;height: 4em;top: calc(50% + 0.5em);left: -4em;background-position: left bottom;}
}
/*-------------------------------------END- 區塊a02 -----------------------------------------*/
/*----------------------------------------- 區塊a03 -----------------------------------------*/
#a03 h2{}
#a03>*:nth-child(2) .tag{line-height: 1.25em;padding:0.25em 0.5em;} 
#a03>*:nth-child(2) span.small{line-height: 1.25em;padding:0.5em;font-size: 0.5em;display: inline-block;} 
#a03>*:nth-child(2) .col{padding-bottom:  10em; background: url('../images/index-03-1.png') left bottom no-repeat;background-size: 350%;} 
#a03>*:nth-child(2) .col:nth-child(2){background-position: 50% bottom;}
#a03>*:nth-child(2) .col:nth-child(3){background-position: 100% bottom;}
@media screen and (max-width:601px){
    #a03>*:nth-child(2) .col:nth-child(3){    background-position: 110% bottom;    background-size: 250%;    padding-bottom: 13em;}
    #Pa2 #a03 h2{font-size: 2em;}
}
/*-------------------------------------END- 區塊a03 -----------------------------------------*/
/*-------------------------------------END- 區塊a04 -----------------------------------------*/
#a04 .deep-orange{z-index: 1;position: relative;}
#a04 .deep-orange .display-container:after,#a04 .deep-orange .display-container:before{
    position: absolute;
    content: "";
    width: 3.5em;
    height: 6em;
    bottom: 0;
    left: 0;
    background: url(../images/index-t04.png)bottom center/contain no-repeat;
}
#a04 .deep-orange .display-container:before{left:inherit;right:0;}
#a04 .white{
    padding-top: 12em!important;
    background: url(../images/index-04-bg.png)top center/90% no-repeat;
    margin-top: -2em;
}
#a04 .white img{
    max-width: 8em;margin:auto;
}
@media screen and (max-width:601px){
    #a04 .deep-orange .display-container:after{left:-2.5em;right:inherit;}
    #a04 .deep-orange .display-container:before{left:inherit;right:-2.5em;}
    #a04 .white{padding-top: 7em!important;}
}
/*-------------------------------------END- 區塊a04 -----------------------------------------*/
/*----------------------------------------- 區塊a05 -----------------------------------------*/
#a05 .yellow{position: relative;z-index: 1;padding: 0.25em 0.75em;}
#a05 h3{position: relative;margin: 0.25em 0.75em;}
#a05 h3::after{
    position: absolute;
    content: "";
    height: 8em;
    width: 3.5em;
    bottom: 0;
    right: 0.5em;
    background: url('../images/index-05-1.png') bottom center no-repeat;
    background-size: 3.25em;
}

/*-------------------------------------END- 區塊a05 -----------------------------------------*/

/*----------------------------------------- 區塊 buttones -----------------------------------------*/


/*-------------------------------------END- 區塊 buttones -----------------------------------------*/