@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");

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 }

.space-br {    display: none;}
.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;}



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

.hide-lg{ display:none !important; }
.show-lg{ display:block !important;}
	
}


@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:#fffde9;}
		



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

 .header {width:100%; position:relative; height: auto; overflow:hidden; background-image: url('../images/header-bg.png');background-position: center;background-repeat: no-repeat;}
 .header span img{ width:100%; height:auto;}

.header .center {
    width: 100%;
    max-width: 1200px;
    position: relative;
    margin: 40px auto;
    z-index: 1;
}
 .header .center img{ width:100%; height:auto;}

.header-text {
    width: 100%;
    max-width: 375px;
    margin: 0 40px;
}

img.header-main {
    margin: 30px 0 5px;
}

.product-name {
    color: #ff9100;
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 1px;
}
.product-name span {
    margin: 0px 12px;
}
a.try-btn {
    display: inline-block;
    width: 100%;
    background-color: #007bff;
    color: #fff;
    text-align: center;
    font-size: 28px;
    padding: 5px 0;
    text-decoration: none;
    letter-spacing: 6px;
    font-weight: bold;
    border-radius: 5px;
    margin-top: 25px;
    font-family: irohamaru,sans-serif;
}

a.try-btn:hover {
    background-color: #0d6cd3;
}
 .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;}





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



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


.part-title {
    color: #fff;
    background-color: #ff9100;
    border-radius: 0 0 10px 10px;
    text-align: center;
    font-size: 24px;
    padding: 10px 0;
    width: 70%;
    margin: 0 auto;
}

.swiper {
    background-color: #fff;
    position: relative;
    border-radius: 10px;
    max-width: 800px;height: 260px;
    margin: 100px auto 0;
    border: 3px solid #ffe7b8;
}
.swiper-pagination {
    position: absolute!important;
    bottom: unset!important;
    z-index: 999!important;
    top: -45px!important;
    left: 0!important;
    text-align: left !important;
    margin-left: -10px;
    /* right: 0!important; */
    /* margin: 0 auto; */
    /* max-width: 570px!important; */
}
.swiper-pagination-bullet {
    color: #ff9100;
    width: 140px!important;
    background-color: #ffedca!important;
    font-family: irohamaru,sans-serif;
    font-weight: 500;
    border-radius: 10px 10px 0 0!important;
    height: 45px!important;
    padding-top: 8px;
    font-size: 20px;
    letter-spacing: 2px;
    text-align: center;
    opacity: 1!important;
    margin: 0 7.5px!important;
    border: 3px solid #ffedca;
}
span.swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: #fff!important;
    color: #ff9100;
    border-radius: 10px 25px 0 0!important;
    width: 140px!important;
    border: 3px solid #ffedca;
    position: relative;
}
span.swiper-pagination-bullet.swiper-pagination-bullet-active:before {
    display: inline-block;
    width: 134px;
    background-color: #fff;
    height: 30px;
    content: '';
    position: absolute;
    left: 0;
    top: 39px;
}


.swiper-pagination-bullet i{display:none;margin-right:3px;color:#66cdcc}
span.swiper-pagination-bullet.swiper-pagination-bullet-active i{display:inline}
.swiper-slide{opacity:0!important;border-radius:0 0 27px 27px}
.swiper-slide.swiper-slide-active{opacity:1!important}


.slide_title {
    font-size: 48px;
    color: #ffb500;
    font-weight: bold;
}
.slide_text_wrap {
    padding: 30px;
}
.slide-sectitle {
    background-color: #007bff;
    display: inline-block;
    color: #fff;
    padding: 0px 40px;
    letter-spacing: 8px;
    font-weight: bold;
    border-radius: 5px;
    font-size: 19px;
    margin-top: -5px;
    margin-bottom: 15px;
}
.slide_des {
    color: #696969;
    font-size: 18px;
    max-width: 370px;
}
.slide {
    height: 100%;
}
.slide {
    background-image: url(../images/a1pro-bg.png?2152);
    background-repeat: no-repeat;
    background-position: bottom right;
}

.slide.ec {
    background-image: url("../images/ec-bg.png?22");
}

.slide.pos {
    background-image: url("../images/pos-bg.png");
}
.slide.acc {
    background-image: url("../images/acc-bg.png");
}


.part {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}
.container-wrap {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    border: 3px solid #ff9100;
    border-radius: 15px;
    background-color: #fffad9;
}


.part-title.blue-bg {
    background-color: #3094ff;
    border-radius: 10px;
    margin-top: 50px;
}
.block-wrap {
    max-width: 800px;
    margin: 35px auto !important;
}
.block {
    width: 145px;
    height: 145px;
    background-color: #fff;
    border: 2px solid #b7daff;
    border-radius: 10px;
    text-align: center;
    margin: 0 auto;
    font-size: 18px;
    color: #606060;
    letter-spacing: 2px;
}

.block img {
    display: block;
    margin: 20px auto 10px;
}


.part-title.ora-bg {
    border-radius: 10px;
    margin-top: 70px;
}

.block-wrap2 {
    margin-top: 40px;
}
.block2 {
    max-width: 256px;
    margin: 0 30px;
    color: #636363;
    text-align: center;
}
.block2-main {
    position: relative;
}
.block2-main:before {
    content: '搭配經營儀表板圖表分析，迅速解讀';
    background-color: #fffad9;
    width: 200px;
    display: inline-block;
    color: #ff9100;
    font-size: 19px;
    position: absolute;
    right: 0;
    top: 5px;
    padding: 10px;
    text-align: center;
    letter-spacing: 1px;
}




.block2-img {
    width: 256px;
    height: 196px;
    background-color: #fff;
    border: 3px solid #fdc15f;
    border-radius: 10px;
    text-align: center;
    margin-bottom: 19px;
}

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

/* 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 {
    border: 3px solid #3094ff;
    border-radius: 10px;
    margin: 30px auto 60px !important;
    background-color: #d9f2ff;
}

.rg-title {
    color: #3094ff;
    font-size: 48px;
    letter-spacing: 10px;
    font-family: heisei-maru-gothic-std,sans-serif;
    font-weight: bold;
    text-align: center;
    padding-top: 30px;
}
.input-rg {
    width: 100%;
    max-width: 480px;
    text-align: center;
}
.input-rg p {
    text-align: center;
    font-size: 18px;
    color: #636363;
}
input#DAA009, input#M5Code {
    border: 0;
    border-radius: 10px 0 0 10px !important;
    margin: 5px 0;
    padding-left: 11px;
    height: 55px;
    font-family: 'noto sans tc';
}
a#sendCodeBtn, input#submitBtn {
    background: #3094ff;
    color: #fff;
    border-radius: 0 10px 10px 0;
    line-height: unset!important;
    margin: 5px 0;
    height: 50px!important;
    padding: 10px 16px;
    font-weight: 700;
    letter-spacing: 1px;
    text-decoration: none;
}
a#sendCodeBtn:hover, input#submitBtn:hover {
    background-color: #1666bd;
}
a.fancybox.btn {
    color: #3094ff;
    padding: 0;
    letter-spacing: 3px;
    text-decoration: none;
    margin-bottom: 30px;
}
.part-rg　.container {
    text-align: center;
}


@media screen and (max-width: 1200px) {	
	
	.header-text {
    margin: 0;
}
	.part-title {
    width: 90%;
}
	
}




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

.part {
    padding: 0 10px;
}
.block2-main {
    margin: 0 0 50px;
}
.block2 {
    margin: 0 30px 30px;
}	
	
	
}




@media screen and (max-width: 576px) {	
.header .center img {
    width: 95%;
    margin: 10px auto;
}

.header-left {
    margin-top: 30px;
}
br.space-br {
    display: none;
}
.block-wrap {
    max-width: 400px;
    margin: 0 auto !important;
}
.block {
    margin: 10px auto !important;
}	
.part-title {
    font-size: 20px;
    padding: 5px 20px;
}	
	
	
.swiper {
height: auto !important;
}	
	
.slide {
    background-size: 100%;
}
	.slide_des {
    font-size: 16px;
    padding-bottom: 35px;
}
.swiper-pagination-bullet {
    font-size: 18px !important;
    width: auto !important;
    margin: 0 5px !important;
    padding: 8px 5px 0 !important;
    letter-spacing: 0 !important;
}
span.swiper-pagination-bullet.swiper-pagination-bullet-active {
    width: auto !important;
    padding: 8px 10px 0 !important;
}	
span.swiper-pagination-bullet.swiper-pagination-bullet-active:before {
    width: 100%;
    left: 0px;
}	
.swiper-pagination {
    left: 5px !important;
}
.slide_text_wrap {
    padding-bottom: 165px !important;
}	
.swiper-slide {
	height: auto;}
.block2-main:before {
    font-size: 17px;
    width: 167px;
}	
.block2-main img {
    width: 100%;
}	
.rg-title {
    letter-spacing: 0;
}
	
input#DAA009 {
    width: 220px !important;
}	
a#sendCodeBtn {
    width: calc(100% - 275px) !important;
}	
input#M5Code {
    width: 210px !important;
}	
.header .center {
    text-align: center;
}
	
a.try-btn {
    width: 95%;
}	
	
	
	
}



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

.swiper-pagination-bullet {
    font-size: 16px !important;
}
.product-name {
    font-size: 22px;
    margin: auto;
}
input#DAA009 {
    width: 180px !important;
}	
a#sendCodeBtn {
    width: calc(100% - 236px) !important;
}	
	
}