@charset "utf-8";
/* CSS Document */

@import url("reset.css");
@import url("/css/font-awesome.css");
@import url("/css/animate.css");
@import url("/css/bootstrap.css");
@import url("/css/hover.css");
@import url("https://fonts.googleapis.com/earlyaccess/notosanstc.css");
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");

html, body { width:100%; height: auto;overflow-X:hidden; }
body { font-size:100%;}
/**{transition:all .3s; -webkit-transition:all .3s;}*/

/*:before{ content:"\f146";font-family: 'FontAwesome'; }*/

.btnTop{ background: #CCC \9;background:rgba(0,0,0,.2); border-radius:50%; width:50px; height:50px; position: fixed;right:15px; bottom:15px;cursor:pointer; z-index:99; color:#FFF; text-align:center; font-family:Arial, Helvetica, sans-serif;	text-transform:uppercase; font-size:13px ; letter-spacing:1px; display: none  ; z-index:999;}
.btnTop:before {    content: "\f106";    font-family: 'FontAwesome';    font-size: 20px;    color: #FFF;    display: block;    width: 100%;    height: 25px;    padding-top: 0;}
.btnTop:hover{background:rgba(0,0,0,.4);}

.img-response{ max-width:100%; height:auto;}

/*------------item-inline-block------------*/
.item-inline-block{ letter-spacing:-5px;}
.item-inline-block > *{display: inline-block !important; letter-spacing:1px;vertical-align: top;}

/*------------item-table-cell------------*/
.item-table-cell{ display:table;}
.item-table-cell > *{display: table-cell !important; vertical-align: top;}


/*------------item-flex------------*/
.item-flex{ display:flex !important;display:-webkit-flex !important;flex-flow: row wrap}
.item-flex > *{flex:1;-webkit-flex:1 }


.empty {    display: inline-block;}


@media screen and (max-width: 640px) {
	
.vertical-xs{ display:block !important;	}
.vertical-xs  > *{  display:block !important; width:100% !important ;float:none !important; }
.empty {    display: block;    height: 1px;}
	
}



.show{ display:block !important;}
.hide{ display:none !important;}
.space-br {    display: inline-block;}

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

.hide-xs{ display:none !important; }
.show-xs{ display:block !important;}
.space-br {    display: block;    line-height: 0;}
	
}





.wrap{width:100%;height:auto;position:relative; font-family:'Noto Sans TC',"微軟正黑體",Microsoft Yahei;line-height:1.6; background:#fff;}
		



/*▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃ 版頭 ▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃*/

 .header {width:100%; position:relative; height: auto; overflow:hidden;background: rgb(169,237,255);
background: linear-gradient(180deg, rgba(169,237,255,1) 0%, rgba(255,255,255,1) 100%);background-image: url('../images/header-bg.png');background-repeat: no-repeat;background-position: bottom;}
 .header span img{ width:100%; height:auto;}

 .header .center{width:100%;max-width:1200px;position:relative; margin:0 auto; z-index:1;}
 .header .center img{ width:100%; height:auto;}
.header-img {
    margin-left: -100px;
}
.header-text {
    margin-left: -100px;
    margin-top: 60px;
    text-align: center;
}

.header-text p {
    font-size: 22px;
    color: #444;
    font-weight: 500;
    letter-spacing: 1px;
}

 .header .logo{ position:absolute; right:8px; top:2px; z-index:6;}
 .header .logo img{width:100%; height:auto;min-width:100px;}





/*▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃ 內容 ▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃*/



.container-wrap { width:100%; margin:0 auto;}

.part {
    padding: 80px 0 30px;
}

.p2-img {
    margin-left: 40px;
}

.p2-text p {
    color: #404040;
    font-size: 24px;
    letter-spacing: 1px;
}

.p2-text p span {
    color: #06bee8;
    font-size: 46px;
    font-weight: bold;
}

.block-wrap {
    max-width: 1200px;
    margin: 90px auto 0;
}

.block p {
    font-size: 22px;
    text-align: center;
    margin-top: 5px;
}
.header-text p {
    font-size: 22px;
    color: #444;
    font-weight: 500;
}
.block p span {
    color: #fe5b6d;
    font-weight: 500;
}


.block {
    position: relative;
}

.block:before {
    content: '01';
    background-color: #08caf7;
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    padding: 0 10px;
    border-radius: 30px 30px 0 0;
    position: absolute;
    top: -35px;
}
.block.b02:before {
    content: '02' !important;
}
.block.b03:before {
    content: '03' !important;
}
.block.b04:before {
    content: '04' !important;
}




.p-title p {
    font-size: 24px;
    color: #404040;
    text-align: center;
    letter-spacing: 1px;
}
.p-title p span {
    color: #0082d2;
    font-size: 42px;
    font-weight: bold;
}

.chart-wrap {
    max-width: 1200px;
    margin: 0 auto;
}

.chart {
    text-align: center;
}
.chart img {
    text-align: center;
    margin: 0 auto;
}

.chart p {
    max-width: 350px;
    margin: 20px auto;
    color: #404040;
    font-size: 17px;
}

/*
.chart.c01 p {
    max-width: 350px;
    margin: 20px auto;
    color: #404040;
    font-size: 17px;
}
*/


.p-title.p4-text p span {
    color: #06bee8;
}

.p4-main {
    max-width: 1200px;
    margin: 20px auto 0;
}
.a1pro {
    margin-bottom: 50px;
}
.product-title {
    color: #fe5b6d;
    font-size: 30px;
    font-weight: bold;
}

.product-content {
    color: #fff;
    background: #fe5b6d;
    display: inline-block;
    font-size: 18px;
    padding: 0px 20px;
    border-radius: 50px;
    letter-spacing: 1px;
    font-weight: 500;
    margin-bottom: 10px;
}

p.product-p {
    max-width: 450px;
    letter-spacing: 1px;
    font-weight: 400;
    font-size: 17px;
}


p.red-text {
    color: #fe5b6d;
    font-size: 18px;
    font-weight: 500;
}
p.price span {
    color: #fe5b6d;
    font-size: 24px;
    font-weight: bold;
    letter-spacing: -2px;
}

p.price {
    letter-spacing: 1px;
    color: #484848;
    font-weight: 500;
}

.a1pro.plus .product-title, .a1pro.plus p.red-text, .a1pro.plus p.price span {
    color: #06bee8;
}

.a1pro.plus .product-content{background-color: #06bee8;}

/*----------------------------- 注意事項文字 -----------------------------------  */

/* ul { width:80%; margin:0 auto; color:#a3a3a3; list-style:decimal; padding-left:30px;}
 ul li{ margin-bottom:10px; font-size:15px; color:#333333; line-height:1.5;}
*/
.container {
    max-width: 600px !important;
}
.part.part-rg {
    background-color: #0082d2;
    /* border-radius: 30px; */
    box-shadow: 0 4px 14px 0 rgb(0 0 0 / 15%);
    padding: 60px 0 100px;
    margin: 0 auto;
}
.rg-img {
    position: relative;
    margin-top: -70px;
}
.register_wrap {
    color: #fff;
    text-align: center;
    font-size: 22px;
    letter-spacing: 2px;
    line-height: 1.2;
}
img.word{position:absolute;width:100%;max-width:215px;left:300px}
.rg-title{color:#fff;font-size:48px;text-align:center;font-family:'SweiGothicCJKtc-Black','微軟正黑體',sans-serif;font-weight:700;letter-spacing:3px}
/*
input#DAA009,input#M5Code{border:0;border-radius:10px;margin:5px 0;padding-left:11px;height:55px}
a#sendCodeBtn,input#submitBtn{background:#43a09f;color:#fff;border-radius:10px;line-height:unset!important;margin:5px 0;height:50px!important;padding:10px 16px;font-weight:700;letter-spacing:1px}
*/
.code {
    margin-top: 10px;
}
input#DAA009 {
    display: inline-block;
    width: calc(100% - 200px);
    height: 56px;
    font-size: 20px;
    border: 3px solid #009eff;
    padding: 0 15px;
    border-radius: 50px;font-family: '微軟正黑體';
}
	
a#sendCodeBtn {
    box-shadow: none;
    letter-spacing: 0;
    font-weight: bold;
    display: inline-block;
    width: 190px;
    height: 56px;
    font-size: 20px;
    border: none;
    margin-top: -5px;
    line-height: 2;
    text-decoration: none;
    background: #e2f9ff;
    border-radius: 50px;font-family: '微軟正黑體';
}
input#submitBtn {
	    box-shadow: none;
    width: 270px;
    display: inline-block;
    height: 56px;
    font-size: 20px;
    font-weight: bold;
        background: #e2f9ff;border-radius: 50px;
    margin-top: -6px;
}
input#M5Code {
    width: calc(100% - 280px);
    display: inline-block;
    height: 56px;
    font-size: 20px;
    border: 3px solid #009eff;
    padding: 0 15px;
    border-radius: 50px;font-family: '微軟正黑體';
}
    
a#sendCodeBtn:hover, input#submitBtn:hover {
    background-color: #c3e2ea;
    cursor: pointer;
}
a.fancybox.btn {
    color: #fff;
    padding: 0;
    letter-spacing: 3px;
    text-decoration: unset;
}






@media screen and (max-width: 1024px) {	
	.header-text p {
    font-size: 20px;
}
	.header .header-img img {
    width: 85%;
}
	.header-text {
    margin-left: -210px;
}
	
	.p2-text p {
    font-size: 21px;
}
	
	.p2-text p span {
    font-size: 39px;
}
	
	.block-wrap {
    max-width: 600px;
    flex-flow: wrap;
}
	.block {
    margin-bottom: 50px;
}
	
}


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

	
 .header {background-image: url('../images/header-bg-phone.png');background-repeat: no-repeat;background-position: top center;}
	.header .center {
    flex-direction: column-reverse;
    /* margin: 0 auto; */
}
	.header-text {
    margin: 0;
    padding-top: 60px;
}
	
	.header-img {
    margin: 0;
}
	
.header .header-img img {
    /* width: 100%; */
    margin: 0 auto;
}

	.p2-title {
    flex-direction: column;
}
	.p2-img {
    margin: 0;
}
	.chart-wrap {
    flex-direction: column;
}
	.chart {
    margin: 20px auto;
}
	.p4-main {
    flex-direction: column-reverse;
}
	
	.p4-text, .p4-img {
    margin: 0 auto;
}
	.p4-img img {
    width: 100%;
}
	
}






@media screen and (max-width: 576px) {	
.header .header-img img {
    width: 100%;
}
	
.header-text {
    margin-bottom: 50px;
}
.header-text p {
    width: 80%;
    margin: 10px auto;
}	
	
.header-text img {
    width: 90% !important;
    margin: 0 auto;
}

	
.p2-text {
    text-align: center;
}	
.p2-text p span {
    font-size: 35px;
}
	.p2-text p {
    font-size: 19px;
}
	
.p2-img img {
    width: 90%;
    margin: 0 auto;
}	
	
.p-title p span {
    font-size: 35px;
}	
	
.block {
    max-width: 195px;
}
.block img {
    width: 100%;
}
.block p {
    font-size: 18px;
}

	
.chart img {
    width: 100%;
}	
.a1pro {
    padding: 0 20px;
}	
	
.part.part3 {
    padding: 0;
}	
.part.part-rg {
    border-radius: 0 !important;
    padding: 50px 16px 100px !important;
    margin: 60px auto 0 !important;
}
	

    a#sendCodeBtn {
    width: 140px;
}
input#M5Code {
    width: calc(100% - 145px) !important;
}
	input#DAA009 {
		width: calc(100% - 150px);}

input#submitBtn {
    width: 130px  !important;

}
	
.container {
    padding: 0;
}
	
}


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

	.p2-text p span ,.p-title p span {
    font-size: 30px;
}
	.p2-text p {
    font-size: 17px;
    letter-spacing: 0;
}
	
	
}