.product_try {    margin-top: 10px;    margin-left: 10px;}

section{padding-top: 8vh;padding-bottom:8vh;
    color: #555;padding-left: 15px;padding-right: 15px;}
section img{max-width: 100%;height: auto;}

/*修正註冊版面*/
section.register {    padding-left: 0;    padding-right: 0;}


.p01,.p02,.p03 {font-size: calc(1vw + 1vh + .5vmin);}

.container{width: 100%;max-width: 1200px;margin-left: auto;margin-right: auto;position: relative;}


.p01{padding-top: 8vh;padding-bottom:10vh;}
.p01 .container{}
.p01 .pic{width: 90%;}

.p01 .text{margin-top: 12%;}
.p01 .text h1{font-size: 1.8em; border-bottom: 2px solid #16c7ba;margin-bottom: .2em;padding-left: 10px;}
.p01 .text p{font-size:24px;padding-left: 10px;}


@media (max-width: 767px) {
   
    .p01 .pic{}
    .p01 .text{width:90%;margin-left: auto;margin-right: auto;margin-top: 0;margin-bottom: 40px;}
    .p01 .text h1{font-size: 3.8em;}
    .p01 .text p{font-size:20px;}

}


.p02{background: #e8fbf8;}
.p02 .container{max-width: 1200px;}

.p02 .pic{}
.p02 .pic canvas{margin-left: auto;margin-right: auto;max-width: 600px !important;}

.p02 .text{padding-top: 10%;padding-left: 1vw;text-align: center;}
.p02 .text h3{background: #0097a7; color: #fff; font-size: 1.3em; letter-spacing: 2px; padding: .1em .3em ;width: 86%;max-width: 480px;
    margin-left: auto;margin-right: auto; border-radius: 100px;margin-bottom: 1em;}
.p02 .text-group {font-size: .5em;}
.p02 .item:not(:last-child){margin-right: 2em;}
.p02 .text h4{color: #0097a7;font-size: 2em;line-height: 1.4;font-weight: bold;margin-bottom: .6em;}
.p02 .text p{font-size: 16px;line-height: 1.4;max-width: 160px;text-align: left;}



@media (min-width: 1380px) {
    
    .p02 .pic{flex: 0 0 50%;max-width: 50%;}
    .p02 .text{flex:0 0 50%;max-width: 50% }   
    
}


@media (max-width: 767px) {
    
.p02 .text h3{ font-size: 2em; }
.p02 .text-group {font-size: 1em;}
.p02 .item{margin-bottom: 2em;margin-right: 0 !important;}
.p02 .text h4{font-size: 1.8em;}
.p02 .text p{font-size: 1.1em;max-width: none;text-align: center;    width: 220px;
    margin: 0 auto;}
    
}



.p03{}
.p03 h2 {
    font-size: 50px;
    text-align: center;
    margin-bottom: 60px;
    font-weight: 500;
}
.p03 h3 {
    text-align: center;
    margin-bottom: 60px;
    font-weight: bold;
    color: #009caf;
}
.p03 .container{max-width: 1000px;height: 100%;}
.p03  img{margin-left: auto;margin-right: auto;}

.p03 .item{max-width: 220px;margin-bottom: 30px;text-align: center;}
.p03 .item .icon{height: 140px;margin-left: auto;margin-right: auto;}
.p03 .item h4{font-size: 22px;font-weight: bold;margin-bottom: 12px;margin-top: 15px;}
.p03 .item p{font-size: 16px;}



@media (max-width: 767px) {
    .p03 h2{font-size: 3em;}
    .p03 h3{font-size: 2em;}
    .p03 .item{max-width:none;}
    .p03 .item .icon{width: 100%;height: auto;}
    .p03 .item h4{font-size: 1.4em;}
    .p03 .item p{font-size: 13px;}

    .p03 .container{height: auto;}
    
}


.p03 .Slide , .p03 .swiper-container, .p03 .swiper-wrapper {
    
    height: 400px !important;
    
}

@media screen and (max-width: 980px) {
    
  .p03 .Slide , .p03 .swiper-container,  .p03 .swiper-wrapper {

        height: 36em !important;

    }
    
}

.step-content { 
    display: flex;
    flex-direction: row;
    margin-top: 2rem;
    overflow: hidden;
    
}
 
.step_item {
	
     min-height: 56px;
    display: flex;
    align-items: center;
    flex-direction:column;
    position: relative;margin-bottom: 10px;
   
   
}

 .step_item:last-child .step_point:before {
    display: none;
}
.step_icon {
    text-align: center;
    flex:none;
    width: 100%;
    height: auto;
    font-weight: bold;
    color: #F16521;padding-bottom: 20px;
}
.step_icon img {max-width: 120px;height: auto;}
.step_point {
    text-align: center;
    flex: none;
    height: 10px;
    position: relative;
     width: 100%;
    color: #9B9B9B;
}
.step_point:before {
    content: "";
    display: block;
    position: absolute;
    left:50%;
    top: 50%;
    width: 100%;
    height: 4px;
    background-color: #ededed;
}
.step_point:after {
    content: attr(title);
    display: block;
    position: absolute;left: 0;top: 0;right: 0;bottom: 0; margin: auto;
    width: 40px;font-size: 22px;font-family:  "Helvetica Neue", Helvetica;
    height: 40px;line-height: 40px;vertical-align: middle;text-align: center;
    background-color: #24e6d8;border-radius:50% ;color: #002f37;
   
}
	
.step_text {
     width: 100%;max-width: 200px;font-size: 16px;padding: 0px;padding-top: 20px;text-align: center;
}
	
tbody.early {    background-color: #fffaea;}
.early td.price-member {    line-height: 1.2!important;}
.early td.price-invoice {    line-height: 1.2;}
a.earlybuy:hover {
    text-decoration: none;
}
/*
a.earlybuy {
    font-size: 18px;
    font-weight: normal;
    color: #555;
}
*/
a.earlybuy {
    font-size: 18px;
    font-weight: normal;
    color: #fff;
    background-color: #ff8a00;
    padding: 7px 45px 7px 20px;
    border-radius: 50px;
    letter-spacing: 2px;
    margin-top: 10px;
}


@media (max-width: 767px) {
	.step_icon img {max-width: 80px;}
    .step_text {font-size: 13px;}
    .step-content{letter-spacing: -5px;}
    .step_item {letter-spacing: 1px;display: inline-block;max-width: 49%;width: 49%;}
   
}

.original-price {
    display: block;
    font-size: 16px;
    line-height: 1;
    margin-top: 0px;
    margin-bottom: -6px;
    text-decoration: line-through;
    letter-spacing: 1px;
}


a.earlybuy {
    font-size: 15px;
}



.invoice-price{font-size: calc(1vw + 1vh + .5vmin);}
.invoice-price .container {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    text-align: center;
}
.invoice-price h2{font-size: 1.2em;text-align: center;letter-spacing: 2px;margin-bottom: 4vh;}


.list-bar-wrap {
    max-width: 460px;
    display: inline-block;
    text-align: left;
}
.list-bar-wrap:last-of-type {
    max-width: 600px;
}
.invoice-price .list-bar{background: #75ecd9;padding: .4em .6em;font-size: 20px;font-weight: bold;margin-bottom: 10px;}
.invoice-price .list{display: flex; justify-content: space-between;padding: .6em;align-items: center;}
.invoice-price .list:not(:last-child){border-bottom: 1px solid #d8d8d8;}
.invoice-price .list h3{ font-weight: bold;font-size: 1em;line-height: 1;margin-bottom: 6px;}
.invoice-price .list h3.blue{color: #00c8a8;}
.invoice-price .list h3.orange{color: #ff8a00;}
.invoice-price .list .plan{font-size: 20px;
/*	letter-spacing: 2px;*/
	font-weight: 600;}
.invoice-price .list .plus{margin-left: 5px;margin-right: 5px;}

.invoice-price .price {text-align: right;}
.invoice-price .price .large{font-family: Helvetica ;font-size: 1.4em;line-height: 1; font-weight: 100;  }
.invoice-price .price .small{font-size: 18px;font-weight: 500;}

.invoice-price .list p.normal{font-size: 16px;max-width: 500px;width: 80%;}


.btn-link-btn{color: #fff; letter-spacing: 2px; background: #0097a7; display: inline-block;padding: 5px 30px; margin: 15px 0;font-size: 16px;}
.btn-link-btn:hover{text-decoration: none;color: #fff;background: #008391;}

.btn-wrap{width: 90%;max-width: 600px;margin-left: auto;margin-right: auto;margin-top: 6vh;}
.btn-wrap .btn-link-btn{padding:.6em 0;font-size: 18px;width: 50%;text-align: center;}
.btn-wrap .btn-link-btn:not(:last-child){margin-right: 20px;}


@media (max-width: 767px) {
    .invoice-price .list-bar{font-size: .95em;}
    .invoice-price h2{font-size: 2em;}
    .invoice-price .container{font-size: 1.2em;}
    .invoice-price .list .plan{font-size: .95em;}
    .invoice-price .price .small{font-size: 14px;}
    .invoice-price .list p.normal{font-size: .85em;}
    
    .btn-wrap .btn-link{font-size: 1em;}
	
	.original-price {    font-size: 15px;}

}

table.price-table {    width: 100%;   max-width: 1070px;}
.price-table td {    vertical-align: middle;font-weight: bold;}
th.price-invoice, th.price-member {    width: 29%;vertical-align: middle;    line-height: 1.3;}
th.price-title.bluebg {    vertical-align: middle;    line-height: 1;}
th.price-title {    width: 40%;    text-align: left;    padding-left: 3%;}
.price-title.bluebg, .price-invoice.bluebg, .price-member.bluebg {    background-color: #c6fef5;    font-size: 24px;    font-weight: bold;}
td.price-title {    font-weight: bold;    font-size: 18px;    text-align: left;    padding-left: 3%;}
.price-table tr {    height: 110px;}
th.price-title.bluebg span {       font-size: 17px;}
tr.table-grayborder {    border-top: 2px solid #eeeeee;    border-bottom: 2px solid #eeeeee;}
span.orange-text ,span.green-text,span.blue-text {font-size: 30px;}
span.orange-text {    color: #ff8a00;    }
span.green-text {    color: #00c8a8;  }
span.blue-text {    color: #0097a7;}

span.month-text {    font-size: 18px;    font-weight: bold;}
span.spe-content {    font-size: 14px;    width: 190px;    display: inline-block;    line-height: 1.3;    margin-top: 10px;    font-weight: bold;}
td.price-member {    line-height: 1;}
.price-notice {
    font-size: 16px;
    margin-top: 50px;
    max-width: 985px;
    text-align: left;
}
tr.table-setting {    height: 140px;}
tr.table-setting td {    vertical-align: top;    padding-top: 20px;}
tr.blue-base {    height: 85px;}
.tooltips{display:none;}
.br_phone{display:none;}
@media (max-width: 767px) {
section.invoice-price {    padding: 0 !important;}
span.orange-text ,span.green-text,span.blue-text {font-size: 20px;}	
.price-title.bluebg, .price-invoice.bluebg, .price-member.bluebg {    font-size: 15px;}	
th.price-title.bluebg span {    font-size: 14px;}
td.price-title {    font-size: 16px;}	
td.price-member {    line-height: unset;}
.price-table td {    font-size: 18px;}
span.month-text {    font-size: 14px;}
.spe-content-one, .spe-content{display: none !important;}
.br_phone{display:block;}
.price-notice {
    margin: 50px 15px;
    font-size: 15px;
}
.btn-wrap {    margin-top: 3vh;    margin-bottom: 6vh;}	
/* Tooltip container */
.tooltips {font-size: 16px;
    position: relative;
    display: inline-block;
    margin-left: 10px;
    color: #9a9a9a;
}

.tooltips .tooltiptext {
    visibility: hidden;
    width: 250px;
    background-color: white;
    color: #666;
    text-align: left;
    padding: 10px;
    border-radius: 6px;
    position: absolute;
    z-index: 1;
    font-size: 14px;
    box-shadow: 0px 0px 2px 2px #eee;    margin-left: 15px;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltips:hover .tooltiptext {
  visibility: visible;
}
.tooltiptext::after {
    content: "";
    position: absolute;
    top: 10%;
    right: 100%;
    margin-top: -10px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent #dfdfdf transparent transparent;
}	 	
	
	
}