@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("/css/common/form.css");
@import url("https://fonts.googleapis.com/earlyaccess/notosanstc.css");
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");


@font-face {
  font-family: SweiGothicCJKtc-Black;
  src: url(https://cdn.jsdelivr.net/gh/max32002/swei-gothic@2.129/WebFont/CJK%20TC/SweiGothicCJKtc-Black.woff2) format("woff2")
  , url(https://cdn.jsdelivr.net/gh/max32002/swei-gothic@2.129/WebFont/CJK%20TC/SweiGothicCJKtc-Black.woff) format("woff");
}



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-color: #dbfbf0;
    padding-top: 50px;
}
 .header span img{ width:100%; height:auto;}

.header .center {
    width: 100%;
    height: 450px;
    max-width: 1200px;
    position: relative;
    margin: 0 auto;
    z-index: 1;
    padding: 100px 0;
    background-image: url("../images/header-bg.png");
    background-position: center top;
    background-repeat: no-repeat;
}

.header .center img{ width:100%; height:auto;}

.header-img {
    width: 430px;
    text-align: center;
}
a.register-btn {
    display: inline-block;
    background-color: #259e78;
    color: #fff;
    border-radius: 40px;
    padding: 15px 100px;
    font-size: 24px;
    text-decoration: none;
    letter-spacing: 2px;
    font-weight: bold;
    margin-top: 40px;
    box-shadow: inset 0px -6px 0 0px #228a6a;
    font-family: 'SweiGothicCJKtc-Black','Noto Sans TC';
}
a.register-btn:hover {
    box-shadow: none;
    transform: translateY(3px);
}

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

.header-bubble {
    width: 115px;
    height: 115px;
    border-radius: 100%;
    background-color: #fff;
    overflow: hidden;
    padding-top: 10px;
    position: absolute;
}

.header-bubble.b01 {
    left: 0;
    top: 170px;
}
.header-bubble.b02 {
    top: 0;
    left: 200px;
}
.header-bubble.b03 {
    left: 225px;
    top: 300px;
}
.header-bubble.b04 {
    top: -20px;
    left: 700px;
}
.header-bubble.b05 {
    left: 830px;
    top: 300px;
}
.header-bubble.b06 {
    left: 1000px;
    top: 150px;
}





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



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

.navy-bg {
    background-color: #1f3160;
    color: #fff;
    font-size: 25px;
    letter-spacing: 2px;
    padding: 15px;
    font-family: 'SweiGothicCJKtc-Black','Noto Sans TC';
}

.part.main-slide {
    height: 795px;
    padding: 30px 0;
	background-image: url("../images/slide-bg.png");
/*    background-image: url("../images/ig-bg-1.png"),url("../images/ig-bg-2.png"),url("../images/ig-bg-3.png"),url("../images/ig-bg-4.png");*/
    background-repeat: no-repeat;
	background-position:center top;
/*    background-position: 16% top , 7% bottom , right top , right bottom;*/
}

.swiper {
    width: 100%;
    max-width: 810px;
    margin: 0 auto;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.swiper-pagination {
    max-width: 760px;
    background-color: #fff;
    right: unset !important;
    top: unset !important;
    bottom: unset !important;
    left: unset !important;
    margin: 10px auto !important;
    position: relative !important;
    transform: unset !important;
    box-shadow: 0 0 10px 5px #eee;
    border-radius: 15px;
    padding: 10px 0;
}
.slide-bubble.header-bubble {
    position: relative;
    width: 90px;
    height: 90px;
    display: block;
    margin: 0 auto 7px;
}

.slide-bubble.header-bubble.ba01 {
    background-color: #ff7782;
}.slide-bubble.header-bubble.ba02 {
    background-color: #218db1;
}.slide-bubble.header-bubble.ba03 {
    background-color: #ffcf86;
}.slide-bubble.header-bubble.ba04 {
    background-color: #61887b;
}.slide-bubble.header-bubble.ba05 {
    background-color: #cbd1ff;
}


.swiper-pagination-bullet {
    width: unset !important;
    height: unset !important;
    border-radius: unset !important;
    background: unset !important;
    font-size: 15px;
    opacity: 0.4 !important;
}
.swiper-pagination-bullet.swiper-pagination-bullet-active {
    opacity: 1 !important;
}

.swiper-wrapper {
    max-width: 760px;
    /* max-height: 500px; */
    margin: 0 auto;
    margin-top: -90px;
    /* overflow: hidden !important; */
}
      .swiper-slide {
		  
		max-width: 760px;
/*
		  height: auto !important;
		  max-height: 580px;
*/
/*		  height: auto !important; */
    height: 530px !important;
		      box-shadow: 0 0 10px 5px #eee;
    border-radius: 15px;
		  
        text-align: center;
        font-size: 18px;
        background: #fff;

        /* Center slide text vertically */
/*
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
*/
      }

/*
      .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
*/


.swiper-slide {
    opacity: 0 !important;
}
.swiper-slide.swiper-slide-active {
    opacity: 1 !important;
}

.ui-top {
    margin: 30px !important;
    color: #464646;
}
.ui-top .slide-bubble.header-bubble {
    margin: unset;
    width: 55px;
    height: 55px;
    margin-right: 10px;
}
.ui-main {
    margin: 20px auto 0;
    background-image: url("../images/main-slide-bg.png");
    padding-bottom: 10px;
}
.ui-main p {
    background-color: #ff7782;
    border-radius: 30px;
    /* display: inline-block; */
    padding: 10px 40px;
    color: #fff;
    letter-spacing: 1px;
    font-size: 18px;
    width: 90%;
    margin: 0 auto 23px;line-height: 1.4;
}

.ui-main p:before {
    content: '\f10d';
    font-family: fontawesome;
    color: rgb(0 0 0 / 20%);
    margin-right: 15px;
}

.ui-main p:after {
    content: '\f10e';
    font-family: fontawesome;
    color: rgb(0 0 0 / 20%);
    margin-right: 15px;
    position: absolute;
    right: 45px;
}

.main-text {
    text-align: left;
    margin: 20px;
    width: 35%;
}
.main-text span {
    color: #969696;
    font-size: 17px;
    font-weight: bold;
}
.main-product {
    color: #ff7782;
    font-weight: bold;
    font-size: 30px;
    letter-spacing: 1px;
    font-family: 'SweiGothicCJKtc-Black';
}
.main-text-des {
    color: #535353;
    font-size: 16px;
}
.main-img {
    min-width: 400px;
}
.main-img img {
    margin: 0 auto;
}

.ba02 .ui-main p {
    background-color: #218db1;
    margin: 0 auto 5px;
}
.ba02 .main-product{color: #218db1;
}



.ba03 .ui-main p {
    background-color: #f2a026;
}
.ba03 .main-product{color: #f2a026;    font-size: 26px;
}

.ba04 .ui-main p {
    background-color: #61887b;
}
.ba04 .main-product{color: #61887b;    font-size: 26px;
}

.ba05 .ui-main p {
    background-color: #7c86ce;
}
.ba05 .main-product{color:#7c86ce;    font-size: 26px;
}




.ui-bottom {
    padding: 5px 15px 0;
    margin: 0 auto;
    color: #5b5b5b;
}
.left {
    font-size: 30px;
    float: left;
    position: relative;
}
.left i {
    margin: 0 10px;
    cursor: pointer;
}
.left i.fa-heart {
    color: #ff5a76;
}

.right {
    font-size: 30px;
    float: right;
    position: relative;
}
.right i {
cursor: pointer;
}
.part.part-feature {
    max-width: 1200px;
    margin: 0 auto 100px;
}

p.feature-title {
    color: #24a880;
    font-size: 30px;
    font-weight: bold;
    letter-spacing: 1px;
    margin: 70px auto 20px;
    font-family: 'SweiGothicCJKtc-Black','Noto Sans TC';
}
.feature {
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 0 11px 4px #eee;
    height: 250px;
}
.text-bubble {
    color: #fff;
    background-color: #24a880;
    border-radius: 50px;
    text-align: center;
    padding: 10px;
    position: relative;
    margin: 30px 0;
    letter-spacing: 1px;
}
.text-bubble:after {
    display: block;
    content: '';
    border-width: 8px 8px 8px 8px;
    border-style: solid;
    border-color: #24a880 transparent transparent transparent;
    position: absolute;
    left: 50%;
    top: 100%;
}

.pop-up-wrap{display:none;}
.pop-up-wrap.show {
	display: inline-block;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 50%);
}
.pop-up {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: 0 auto;
    width: 500px;
    height: 300px;
    border-radius: 10px;
    border: 2px solid #eee;
    text-align: center;
    background-color: #fff;
    padding: 30px;
    font-size: 20px;
    font-family: 'SweiGothicCJKtc-Black','Noto Sans TC';
    z-index: 9999;
}

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

/* 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;}
*/


.part-rg {
    padding: 30px 0 70px;
    background-color: #24a880;
    z-index: 999;
    position: relative;
    border-bottom: 10px solid #1d8666;
}

.rg-title {
    color: #fff;
    font-size: 48px;
    letter-spacing: 5px;
    font-family: SweiGothicCJKtc-Black,"微軟正黑體";
    text-align: center;
    padding-top: 30px;
    margin-bottom: -10px;
}
.input-rg {
    width: 100%;
    max-width: 540px;
    text-align: center;
}
.input-rg p {
    text-align: center;
    font-size: 18px;
    color: #636363;
}
input#DAA009, input#M5Code {
    border: 0;
    border-radius: 10px !important;
    margin: 5px 0;
    padding-left: 11px;
    height: 55px;
    font-family: SweiGothicCJKtc-Bold,"微軟正黑體";
/*    box-shadow: 5px 5px 0 #d4bb04;*/
}
a#sendCodeBtn, input#submitBtn {
    background: #0a956b;
    /* box-shadow: 5px 5px 0 #d4bb04; */
    color: #fff;
    border-radius: 10px;
    line-height: unset!important;
    margin: 5px 0;
    height: 50px!important;
    padding: 10px 16px;
    font-weight: 700;
    letter-spacing: 1px;
    text-decoration: none;
    transition: .3s;
    cursor: pointer;
}
a#sendCodeBtn:hover, input#submitBtn:hover {

    box-shadow: none;
    transform: translate(3px, 3px);
}
a.fancybox.btn {
    color: #fff;
    padding: 0;
    letter-spacing: 2px;
    text-decoration: none;
    margin-top: 15px;
    font-size: 18px;
}
.part-rg　.container {
    text-align: center;
}





@media screen and (max-width: 1024px) {	
	
	
	.header-bubble.b02 {
    left: 100px;
}
	
	
	.header-bubble.b03 {
    left: 145px;
}
	
	.header-bubble.b04 {
    left: 540px;
}
	
	.header-bubble.b05 {
    left: 740px;
}
	.header-bubble.b06 {
    left: 850px;
}
	
}


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

.header-bubble {
    width: 90px;
    height: 90px;
}
.header-bubble.b01 {
    left: -70px;
}
.header-bubble.b02 {
    left: 40px;
}	
.header-bubble.b03 {
    left: 60px;
}	
.header-bubble.b04 {
    left: 475px;
}
.header-bubble.b05 {
    left: 580px;
}	
.header-bubble.b06 {
    left: 670px;
}	

.part.part-feature.row {
    display: unset;
    max-width: 500px;
}	
	
.text-bubble {
    max-width: 300px;
    margin: 0 auto 30px;
}	
.feature {
    max-width: 300px;
    margin: 0 auto 40px !important;
}	
	
}






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

.header-img {
    width: 90%;
    z-index: 99;
}
.header-bubble {
    width: 80px;
    height: 80px;
}

	
.header-bubble.b01 {
    left: -25px;
    z-index: 1;
    top: 260px;
    opacity: .8;
    /* width: 60px; */
    /* height: 60px; */
}
.header-bubble.b02 {
    left: 65px;
    top: 15px;
    width: 70px;
    height: 70px;
}
.header-bubble.b03 {
    /* top: 370px; */
    /* left: 130px; */
    /* opacity: .5; */
    /* width: 70px; */
    /* height: 70px; */
    display: none;
}
.header-bubble.b04 {
    left: 250px;
    top: -20px;
    opacity: 1;
    width: 90px;
    height: 90px;
}
.header-bubble.b05 {
    left: 580px;
}	
.header-bubble.b06 {
    left: unset;
    right: -6px;
    bottom: 20px;
    top: unset;
    /* width: 70px; */
    /* height: 70px; */
    opacity: 1;
}
.part.navy-bg {
    text-align: center;
    font-size: 24px;
    letter-spacing: 1px;
    padding: 10px 25px;
}	
/*
.part.main-slide {
    height: auto;
}
*/
.part.main-slide {
    height: auto;
    max-height: 800px;
}	
.swiper-wrapper {
    margin-top: 0;
    height: 100% !important;
    max-height: 660px;
}
	
	
	
	
.swiper-slide {
    width: 95% !important;
    margin: 0 auto;
    height: auto !important;
    padding: 10px 0;
}
.swiper-pagination {
    flex-flow: nowrap !important;
    overflow-x: scroll !important;
    box-shadow: unset;
    margin-top: -10px !important;
}
.swiper-pagination-bullet {
    margin: 5px 10px !important;
    min-width: 105px;
}

	
	
.ui-top {
    flex-flow: nowrap !important;
    text-align: left;
    line-height: 1.3;
    font-size: 16px;
    margin: 5px 20px !important;
}
	
.ui-bottom {
    padding: 0 10px;
    border-top: 1px solid #eee;
    margin: 3px auto 0;
}
	
/*
.ui-main {
    padding-bottom: 0;
}	
*/
	
.ui-main p {
    letter-spacing: 0;
    padding: 10px 40px;
    font-size: 16px;
    border-radius: 10px;
    /* text-align: left; */
}
.ui-main p:before {
    position: absolute;
    left: 35px;
}
	
	.ui-main p:after {
    right: 20px;
}
	.main-text {
    text-align: left;
    margin: 0 20px 20px;
    width: 90%;
}
	
.main-img {
    min-width: unset;
    margin: 0 auto;
}
.main-img img {
    width: 90%;
}	
	
p.feature-title {
    line-height: 1.3;
}	
	
input#DAA009 {
    width: 220px !important;
}	
a#sendCodeBtn {
    width: calc(100% - 275px) !important;
}	
input#M5Code {
    width: 210px !important;
}		
	
	
}



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

input#DAA009 {
    width: 180px !important;
}	
a#sendCodeBtn {
    width: calc(100% - 236px) !important;
}	

	
	
	
}