@charset "UTF-8";
a, :hover{transition-duration: 0.3s;}

/*area_banner*/
.area_banner { position: relative;width: 100%;height: calc(100vh - 84px);min-width: 1200px; /*background: url(../images/bn_bg.png) 0 0 no-repeat; background-size: cover; */overflow: hidden; display: flex; justify-content: center; align-items: center;}
/*
.area_banner::before{content: ''; width: 100%; height: 100%;background: url(../images/bg_snowy.png) right 0 no-repeat; background-size: cover; position: absolute;top: 0; right: 0; bottom: 0;}*/

.bn_bg{position: absolute; top:-10px; right: 0; min-width: 100%; min-height: 100%;}

.bn_box { width: 1280px;  position: relative;}
.bn_box > div{margin-bottom: 10px; flex: 0 1 auto;}
.bn_box .txt_flex{display: flex; gap:30px 46px; flex-wrap: wrap;}
.bn_slogan{font-size: 120px;font-weight: 700;line-height: 120%; /* 120px */
background: linear-gradient(101deg, #8C79FF 18.99%, #4D75D4 47.68%, #8AFDF3 100.21%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
 display: inline-block;
}

.bn_box h2{font-size: 40px;line-height: 56px;color: #fff; text-shadow:0px 0px 10px #999; order: 1;}

.bn_box.ty2 .txt_flex{flex-direction: column-reverse; }/*策略頁使用*/
.bn_box.ty2 .txt_flex h2{color: #000; font-size: 60px; font-weight: 700;letter-spacing: 4px;}
.bn_box.ty2 .txt_flex h3{color: #fff; font-size: 32px;  font-weight: 700; letter-spacing: 7px;}
.bn_box.ty2 .bn_slogan{ font-size: 100px;}



.bn_btn{ display: flex; align-items: center; gap: 20px; flex:1 1 100%; order: 3;}
.bn_btn a{display: block; padding: 0;}
.bn_btn .btn{border-radius: 8px; width: 180px; height: 60px; background-color: #000; border: 1px solid #000; color: #fff; display: flex; align-items: center; justify-content: center;transition-duration: 0.3s;}
.bn_btn .btn:hover{background-color: transparent; color: #000;}

.btn_download{display: flex; align-items: center; gap: 20px; order: 2;}
.btn_download a{width: 100%; min-width: 40px; height: 40px; display: block; position: relative;}
.btn_download > li{position: relative;}
.btn_download > li::before{content: ''; width: 1px; height: 40px; background-color: #5A5ECA;position: absolute; top: 0; left: -10px;}
.btn_download > li:first-child::before{display: none;}
.btn_download a.ios{background: url(../images/ic_ios.svg) center no-repeat; background-size: 24px;}
.btn_download a.android{background: url(../images/ic_android.svg) center no-repeat; background-size: 24px;}
.btn_download a.pc{background: url(../images/ic_pc.svg) center no-repeat; background-size: 24px;}

.btn_download a:hover{ filter: brightness(0%);}


.scroll{ position: absolute; bottom: 0; left: 50%; width: 80px; height: 150px; transform: translateX(-50%); }
.scroll .scrollLine{ position: relative;}
.scroll .scrollLine p{color: #fff; font-size: 16px; font-weight: bold; text-align: center; text-shadow: 0 4px 10px #999;}
.scroll .scrollLine::after{ content: "";position: absolute; display: inline-block; width: 1px; height: 100px;background-color: #fff;left: 40px;bottom: 0;
animation: lineMove 1.2s ease-in-out infinite;
}

@keyframes lineMove {
0% {height: 0;bottom: -12px}
15% {height: 12px;bottom: -24px}
50% {height: 80px;bottom: -92px}
85% {height: 30px;bottom: -118px}
to {height: 0;bottom: -130px}
}



/*標題*/
.box-padd{padding: 100px 0 120px;}
.title, .sub-title{color: #1E1E1E; text-align: center; margin-bottom: 40px;}
.title{font-size: 60px; font-weight: 900; }
.sub-title{font-size: 20px; line-height: 140%;}
.sub-title .m-break{display: inline-block; margin: 0 5px;}
/*雪鴞標題*/
.intro .title{color: #2D2D2F; font-size: 80px;}
.intro .sub-title{color: #777777; font-size: 24px; margin-bottom: 0;}

.box-padd.inner{padding: 60px 0 60px;}
.box-padd.inner.intro .title{ font-size: 60px; margin-bottom: 20px;}
.box-padd.inner.intro .sub-title{ font-size: 20px; }


/*介紹*/
.area_intro{position: relative; margin-bottom: 80px;}
.area_intro::before{content: ''; width: 1px; height: 100%;background-size: 1px 5px;
    background-image: linear-gradient(180deg, #ccc, #ccc 2px, transparent 0, transparent 5px);
    background-repeat: repeat-y; position: absolute; top: 0;left: 50%;}/*虛線*/

.area_intro > .introBox{position: relative;}
.area_intro > .introBox::before{content: ''; width: 10px; height: 10px; border: 1px solid #ccc; background-color: #fff; border-radius: 100%; position: absolute; top: -5px; left: 50%; transform: translateX(-50%);}/*起點*/

.area_intro .end{width: 14px; height: 14px; border: 1px solid #ccc;border-radius: 100%; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%);}
.area_intro .end::before{content: ''; width: 4px; height: 4px; background-color: #ccc; border-radius: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}/*終點*/

.introBox .pagesize{display: flex; flex-direction:row-reverse; justify-content: space-between; align-items: center; padding: 180px 0 120px; position: relative;}
.introBox .pagesize > div{flex: 0 0 50%;}
.introBox .bn{display: flex; justify-content: start; align-items: center; padding-left: 10px; position: relative; min-height: 560px;}
.introBox .bn img { max-width: 100%;  }
.bn.cloud::before{content: ''; width: 100px; height: auto; position: absolute; top: 0; left: 0; bottom: 0; 
background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); 
}
.introBox .bn-sub{ width: 440px; height: 440px; position: absolute; bottom: 0; right: 20px;}
.introBox .bn-sub.ty3{ width: 500px; height:500px; bottom: 0; right: initial; left: 10%;}
.introBox .textbox {padding-left: 100px; }

.introBox h2 { margin-bottom: 30px; font-size: 40px; font-weight:900; color: #1E1E1E; }
.introBox p{color: #3B3746; font-size: 26px; line-height: 140%; }
.introBox .focus{background: linear-gradient(101deg, #8C79FF 7.76%, #8AFDF3 106.63%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;}

.textbox .list{margin-top: 90px; display: flex; flex-direction: column; gap: 30px;}
.textbox .list li{ display: flex; align-items: center; gap: 24px;font-size: 30px;  color: #57595D;}
.textbox .list .ic{width: 80px; height: 80px; flex: 0 0 80px;}


/*right*/
.introBox.right .pagesize{flex-direction:row; justify-content: flex-start;}
.introBox.right .bn{ display: flex; justify-content: right; }

/*策略*/
.chatBox{  min-height: 1100px; position: relative; padding-top: 100px; }
.chatBox .pagesize{position: relative;}
.chatBox .title{color: #2D2D2F; font-size: 66px; }
.chatBox .sub-title{font-size: 40px; }
.chatBox .text{margin-bottom: 90px; font-size: 60px; text-align: center;}

.chatBox .wavebox{width: 1000px; height: 500px; position: relative; margin: 0 auto;}
.chatBox .wavebox::before{content: ''; width: 1000px; height: 1000px; background: url(../images/wave.png) center bottom no-repeat; background-size: contain; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

.chatBox .wave{width: 240px; height: 240px; margin: 0 auto;  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); cursor: pointer; }
.chatBox .wave::before{content: ''; width: 240px; height: 240px;background-color: #E4D6FF;border-radius: 100%; position: absolute; top: 0; left: 0;
  animation: breathe 3s ease-in-out infinite; transition-duration: 0.3s; }
.chatBox .wave::after{content: ''; width: 90px; height: 90px; background: url(../images/ic_sound.svg) center no-repeat; background-size: contain; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition-duration: 0.3s;}

.chatBox .wave:hover::before{background-color: #8673FF;}
.chatBox .wave:hover::after{filter: brightness(1000%);}
/*.chatBox .wave:hover::before{ animation: breathe 3s ease-in-out infinite; }*/

@keyframes breathe {
  0% { transform: scale(1); } /* 起始狀態 */
  50% { transform: scale(1.2); } /* 中間狀態，放大1.2倍 */
  100% { transform: scale(1); } /* 結束狀態 */
}
.chatBox .options{background-color: #EEEBF8; border-radius: 40px; padding: 10px 40px; color: #292B61; font-size: 16px; line-height: 20px; position: absolute;}
.chatBox .options.num1{top: 20%; left: 0;}
.chatBox .options.num2{top: 50%; right: 0;}
.chatBox .options.num3{bottom:0; left: 10%;}
.chatBox .options:hover{background-color: #8673FF; color: #fff;}



.liguid-btn{display: flex;justify-content: center;align-items: center; position: relative;  z-index: 9;}
.liguid-btn a{
color: #8673FF;width: 420px; 
display: flex; justify-content: center;
align-items: center;
gap: 24px;
font-size: 44px;padding: 24px 40px;
border-radius: 60px; 
border: 1px solid rgba(134, 115, 255, 0.14);
background: rgba(242, 235, 255, 0.50);
backdrop-filter: blur(2px);
}
.liguid-btn a::after{content: '';width: 44px; height: 44px; background: url(../images/liguid-arw.svg) center no-repeat; background-size: contain; display: inline-block;}
.liguid-btn a:hover{ background-color: rgba(134, 115, 255, 0.80); color: #fff;}
.liguid-btn a:hover::after{filter:grayscale(100%) brightness(1000%);}


/*智能回測*/
.intelBox{ background: linear-gradient(to bottom,  #f2f5f8 0%,#ffffff 100%); }
.intelBox .sub-title{ color: #57595D; margin-bottom: 100px;}
.intelBox .intelList{display: flex; flex-wrap: wrap; justify-content: center;row-gap: 60px;column-gap: 30px;}

.intelList > li{flex: 0 1 364px; display: flex; flex-direction: column; align-items: center; border-radius: 24px; overflow: hidden; box-shadow:0 0 10px rgba(0, 0, 0, .20); position: relative; height: 400px;}

.intelList > li:first-child{background: url(../images/phone_1.png) center bottom no-repeat; background-size: cover;}
.intelList > li:nth-child(2){background: url(../images/phone_2.png) center bottom no-repeat; background-size: cover;}
.intelList > li:nth-child(3){background: url(../images/phone_3.png) center bottom no-repeat; background-size: cover;}
.intelList > li:nth-child(4){background: url(../images/phone_4.png) center bottom no-repeat; background-size: cover;}
.intelList > li:nth-child(5){background: url(../images/phone_5.png) center bottom no-repeat; background-size: cover;}
.intelList > li:nth-child(6){background: url(../images/phone_6.png) center bottom no-repeat; background-size: cover;}


.intelList .imgbox{ position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
.intelList .imgbox > img{width: 100%; height: auto;object-fit: cover;}
.intelList p{color: #000; font-size: 20px; line-height: 140%; font-weight: bold;}
.intel-title{ font-size: 16px; color: #1E1E1E;}
.intelList .txtbox{position: relative; padding: 40px; width: 100%; display: flex; flex-direction: column; gap: 12px;}
.intelList li.dark .intel-title, .intelList li.dark p{ color: #fff;}

/*服務總覽*/
.servBox{ background-color:#F2F5F8;}
.servBox.box-padd{padding-bottom: 80px;}
.servBox .title{margin-bottom: 80px;}
.servList{ display: flex; justify-content: center; flex-wrap: wrap; gap: 50px; }
.servList > li{background-color: #fff; padding: 30px; width: 280px; height: 340px; display: flex; flex-direction: column; gap: 20px; box-shadow: 0 24px 50px rgba(0, 0, 0, .15); position: relative; border-radius: 5px;}
.servList .imgbox{ margin-bottom: 5px;}
.servList .serv-title{font-size: 20px; font-weight: 800;}
.servList p{ color: #777777; font-size: 16px; line-height: 24px;}
.servList li::before{content: ''; width: 30px; height: 30px; background: url(../images/link_dot.svg) center no-repeat; background-size: contain; position: absolute; bottom: 30px; left: 30px;}

.servList li .more{position: absolute; top: 0; right: 0; left: 0; bottom: 0;border-radius: 5px; padding: 30px; display: flex; justify-content: center; align-items: center; }
.servList li .more:hover{ background-color: rgba(0, 0, 0, .75);}

.servList li .more a{ display: none;}
.servList li .more:hover a{border: 1px solid #F1BD20; border-radius: 8px; color: #F1BD20; height: 50px; font-size: 16px; display: flex; justify-content: center; align-items: center; width: 100%;}
.servList li .more a:hover{background-color: #F1BD20; color: #1E1E1E;}

/*gotop*/
.gotop.show{display: block;}
.gotop{position: fixed; bottom: 50px; right: 40px; width: 40px; height: 40px; display: none;}
.gotop a{width: 40px; height: 40px; background: rgba(0, 0, 0, .50) url(../images/gotop.svg) center no-repeat; background-size: 32px; border-radius: 100%; display: block;}
.gotop a:hover{background-color: #000;}


@media screen and (max-width: 1300px) {
  .bn_box{width: 80%;}
}

@media screen and (max-width: 1200px) {
.area_banner{min-width: initial;}

}

@media screen and (max-width: 1024px) {
/*策略*/
.chatBox{  min-height: 900px;}
.chatBox .wavebox{width: 600px; }
.chatBox .wavebox::before{width: 600px; height: 600px;}
}

@media screen and (max-width: 821px) {
/*area_banner*/
.area_banner {height: initial; display: block; /*background: url(../images/m_bn_bg.png) 0 0 no-repeat; background-size: cover;*/ overflow: hidden; padding-bottom: 100px;}
.area_banner::before{display: none;}

.bn_bg{ top:-120px; }

.bn_img{display: block;}
.bn_img img{display: block; max-width: 100%; margin: 0 auto;}

.bn_box{width: 100%; padding: 0 20px; text-align: center;}

.bn_slogan{font-size: 60px;font-weight: 500; 
height:auto; 
}

.bn_box .txt_flex{ gap: 10px;}
.bn_box h2{font-size: 40px; width: 100%; text-align: center; }
.bn_btn{ display: block;  flex: 1 1 100%; order: 2;}
.bn_btn .btn{width: 100%;}
.btn_download{order: 3; flex: 0 1 100%; align-items: center; justify-content: center;}
.scroll{  height: 80px;  }


/*策略頁使用*/
.bn_box.ty2 .txt_flex h2{ font-size: 40px; }
.bn_box.ty2 .txt_flex h3{ font-size: 18px; letter-spacing: 4px;}
.bn_box.ty2 .bn_slogan{ font-size: 80px;}


/*標題*/
.box-padd{padding: 70px 0;}
.title, .sub-title{margin-bottom: 20px;}
.title{font-size: 44px; font-weight: 900; }
.sub-title{font-size: 24px; line-height: 160%;}

/*雪鴞標題*/
.intro .title{font-size: 60px;}
.intro .sub-title{ font-size: 16px;}
.intro.box-padd{padding-bottom: 20px;}
.intro + .area_intro {margin-top: -100px;}

.box-padd.inner{padding: 40px 0;}
.box-padd.inner.intro .title{ font-size: 40px; margin-bottom: 20px;}
.box-padd.inner.intro .sub-title{ font-size: 16px; }


/*介紹*/
.area_intro{ margin-bottom: 40px;}
.area_intro::before{ top: 0;left: 20px;}/*虛線*/
.area_intro > .introBox::before{ top: -5px; left: 20px;}/*起點*/
.area_intro .end{ bottom: -5px; left: 20px;;}/*終點*/

.introBox .pagesize{display: flex; flex-direction:column; justify-content: start;  padding: 60px 0; margin-left: 21px;}
.introBox .pagesize > div{flex: 0 0 calc(100% - 21px);}

.introBox .bn{display: flex; justify-content: center; padding-left: 0; margin-bottom: 60px; min-height: 400px;}

.introBox .textbox { padding: 0 20px; text-align: center; width: 100%; }
.introBox h2 { font-size:40px;}
.introBox p{font-size:24px;}
.textbox .list{margin-top: 40px; display: flex; flex-direction: column; align-items: center;  gap: 20px;}
.textbox .list li{ display: flex; align-items: center; gap: 24px;}
.textbox .list .ic{width: 60px; height: 60px; flex: 0 0 60px;}
.textbox .list p{font-size: 24px; }

.introBox .bn-sub{  width: 400px; height:400px; right: 20%;bottom: 10%; }
.introBox .bn-sub.ty3{width: 560px; height: 560px; right:16%;left: initial; bottom: 10%;}

.bn.cloud::before{display: none;}

/*right*/
.introBox.right .pagesize{ flex-direction:column; justify-content: center; }
.introBox.right .bn{  justify-content: center;}

/*策略*/
.chatBox{  min-height: 600px; position: relative; overflow: hidden;}
.chatBox .title{ font-size: 60px; }
.chatBox .sub-title{font-size: 32px; }
.chatBox .text{margin-bottom: 90px; font-size: 24px; text-align: center;}

.chatBox .wavebox{width: 480px;height: 300px; }
.chatBox .wavebox::before{width: 480px; height: 480px;}

.chatBox .wave{width: 110px; height: 110px; margin: 0 auto;}
.chatBox .wave::before{content: ''; width: 110px; height: 110px; }
.chatBox .wave::after{content: ''; width: 60px; height:60px; }


.chatBox .options{  padding: 20px 40px; font-size:20px;}
.chatBox .options.num1{top: 20%; left: 0;}
.chatBox .options.num2{top: 50%; right: 0;}
.chatBox .options.num3{bottom:10%; left: 10%;}


.liguid-btn a{width: 420px; 
gap: 12px;
font-size: 24px;padding: 20px;
}
.liguid-btn a::after{width: 24px; height: 24px; }

/*智能回測*/
.intelBox .sub-title{margin-bottom: 80px;}
.intelBox .intelList{ row-gap: 20px;column-gap: 20px;}
.intelList > li{flex: 0 1 calc(50% - 20px);  height: 400px;}

/*服務總覽*/
.servBox.box-padd{padding-bottom: 40px;}
.servBox .title{margin-bottom: 40px;}
.servList{ gap: 30px;  }
.servList .imgbox{ margin-bottom: 5px;}
.servList .serv-title{font-size: 20px; font-weight: 800;}


}



@media screen and (max-width: 767px) {
/*策略頁使用*/
.bn_box.ty2 .txt_flex h2{ font-size: 36px; }
.bn_box.ty2 .txt_flex h3{ font-size: 18px;text-align: center;}
.bn_box.ty2 .bn_slogan{ font-size: 60px;}
}

@media screen and (max-width: 480px) {
.bn_bg{ top:-40px; }
.bn_box{text-align: left;}
/*標題*/
.box-padd{padding: 70px 0;}
.title, .sub-title{margin-bottom: 20px;}
.title{font-size: 32px; font-weight: 900; }
.sub-title{font-size: 18px; line-height: 160%;}

.bn_box h2{font-size: 32px;line-height: 48px; }
/*介紹*/
.introBox .bn-sub{  width: 260px; height:260px; right: 14%; }
.introBox .bn-sub.ty3{width: 320px; height: 320px; right: 5%; bottom: 10%;}
.introBox .textbox {padding-left:20px; }
.introBox h2 { font-size:32px;}
.introBox p{font-size:18px;}
.textbox .list li{font-size: 20px;}

/*策略*/
.chatBox{  min-height: 600px; position: relative;}
.chatBox .title{ font-size: 32px; }
.chatBox .sub-title{font-size: 24px; }
.chatBox .text{margin-bottom: 90px; font-size: 24px; text-align: center;}

.chatBox .wavebox{width: 370px;  }
.chatBox .wave{width: 110px; height: 110px; margin: 0 auto;}
.chatBox .wave::before{content: ''; width: 110px; height: 110px; }
.chatBox .wave::after{content: ''; width: 40px; height: 40px; }

.chatBox .wave:hover::before{background-color: #8673FF;}
.chatBox .wave:hover::after{filter: brightness(1000%);}

.chatBox .options{background-color: #EEEBF8; border-radius: 40px; padding: 8px 10px; color: #292B61; font-size: 16px; line-height: 20px; position: absolute;}
.chatBox .options.num1{top: 30%; left: 0;}
.chatBox .options.num2{top: 50%; right: 0;}
.chatBox .options.num3{bottom:20%; left: 10%;}
.chatBox .options:hover{background-color: #8673FF; color: #fff;}

.liguid-btn a{width: 200px; gap: 12px;font-size: 18px;padding:12px 20px;}
.liguid-btn a::after{width: 20px; height: 20px; }

/*智能回測*/
.intelBox .sub-title{margin-bottom: 40px;}
.intelBox .intelList{ row-gap: 20px;column-gap: 0;}
.intelList > li{flex: 1 1 100%; height: auto; padding-bottom: 250px;}

.gotop{right: 10px; bottom:20px;}

}

@media screen and (max-width: 375px) {
/*策略*/
.chatBox .options.num1{top: 30%; left: 10px;}
.chatBox .options.num2{top: 50%; right: 10px;}
.chatBox .options.num3{bottom:20%; left: 10%;}

}