/*@import url("menu.css");*/
@import url("jssor.css");
@import url("layout.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@200..900&display=swap'); /*宋體*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap'); /*黑體*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css');
@import url('https://fonts.googleapis.com/css2?family=Amiri+Quran&family=Libertinus+Mono&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');/*EN*/


.banner_wrap{
	width:1400px;
	margin:5% auto;
}
.navbar{
	width:1600px;
	margin:30px auto 0 auto;
	background:#fff;
	border-radius:30px;
	padding:10px 30px;
	overflow:hidden;
	box-shadow: rgba(130, 75, 92, 0.2) 0px 7px 29px 0px;	
}
.logo{
	width:184px;
	float:left;
}
.nav{
	width:400px;
	float:right;
	overflow:hidden;
}
.nav li{
	float:left;
	width:30%;
	font-size:20px;
	line-height:40px;
	margin:0 0 0 3%;
	text-align:center;
}
.nav li:nth-child(1) a{
	display:block;
	background:#e68e82;
	color:#fff;
	border-radius:30px;
}
.nav li:nth-child(2) a{
	display:block;
	background:#824bc0;
	color:#fff;
	border-radius:30px;	
}
.nav li:nth-child(3) a{
	display:block;
	background:#ca359b;
	color:#fff;
	border-radius:30px;	
}
.nav li:nth-child(1) a:hover{
    background:#c5766b;
}
.nav li:nth-child(2) a:hover{
    background:#3f2b6b;
}
.nav li:nth-child(3) a:hover{
    background:#c3389f;
}
.title{
	text-align:center;
	font-size:2.75rem;
	font-weight:500;
	color:#3f2b6b;
}
.title span{
	display:block;
	font-size:1.3125rem;
	font-family: "Roboto", sans-serif;
	font-weight:300;
	color:#cc349a;
	padding:15px 0;
	box-sizing:border-box;
}
.case_txt{
	font-size:2.5rem;
	font-weight:500;
	text-align:center;
	color:#333;
	padding:5% 0;
	box-sizing:border-box;
	letter-spacing:2px;
}
.pink-line{
	color:#3974b9;
	background: linear-gradient(transparent 65%, #e68e82 0%);
}
.abgne_tab {
		width: 100%;
		margin: 10px 0;
}
.tab {
		width:100%;
		margin:5% 0;
}
.tabs {
		width:800px;
        margin: 0 auto;
}
.tabs li {
		width:21%;
		margin:0 2%;
		float: left;

		font-size:1.375rem;
		font-weight:500;
		text-align:center;
}
.tabs li a {
		display: block;
		color: #525252;
		border-radius:25px;
		background:#fff;
		border:1px solid #ddd;
		padding:14px 0;
	    box-sizing:border-box;
}
.tabs li a:hover {
}
.tabs li.active a {
		color:#fff;
		background: linear-gradient(90deg,rgba(202, 53, 155, 1) 0%, rgba(130, 75, 192, 1) 100%);
		border-radius:25px;
}
.tabs li.active a:hover {
}
.tab_container {
		clear: left;
		width: 100%;
		margin:auto;
}
.tab_content {
		padding:20px;
		box-sizing:border-box;
}
/*INDEX tabs*/
.index_tab {
		width: 1200px;
		margin: 5% auto;
}

.tabs_index {
		width:80%;
        margin: 0 auto;
		overflow:hidden;
}
.tabs_index li {
		width:31%;
		margin:0 1%;
		float: left;
		font-size:1.375rem;
		font-weight:500;
		text-align:center;
}
.tabs_index li a {
		display: block;
		color: #525252;
		border-radius:25px;
		background:#fff;
		border:1px solid #ddd;
		padding:13px 0 15px 0;
	    box-sizing:border-box;
}
.tabs_index li a:hover {
}
.tabs_index li.active a {
		color:#fff;
		background: linear-gradient(90deg,rgba(202, 53, 155, 1) 0%, rgba(130, 75, 192, 1) 100%);
		border-radius:25px;
		border:0px;
}
/*INDEX tabs*/
.table2025{
	width:100%;
	background: #eee;
}
.table2025 td{
	height: 50px;
	padding: 0 20px;
	text-align: center;
	border-bottom: 1px solid #fff;
}
.table2025 td img{
	width:26px;
	height:26px;
}
.table2025 tbody td {
	width: auto;
	text-align: center;
}
.table2025 tbody td:first-child {
	width: auto;
	text-align: left;
	white-space: nowrap;
}

.table2025 thead td {
	border-top: none;
	border-radius: 6px 6px 0 0;
}
/*
.table2024 thead td:first-child {
	border-radius: 6px 6px 0 16px;
}
*/
.table2025 td:nth-child(2) {
	width: 30%;
	border-right: 1px solid #ccc;
	background: #483376;	
	color:#fff;
}
.table2025 td:nth-child(3) {
	border-right: 1px solid #ccc;
	background: #efc7c9;
	color:#b63b47;
}
.table2025 td:nth-child(4) {
	border-right: 1px solid #ccc;
	background: #a6b0d0;
	color:#1b295d;
}
.a01type{
	font-size: 1.125em;
	font-weight:400;
}
.a02tl{
	font-size:1rem;
	font-weight:500;
	color:#000;
	float:left;
	background:url(../images/right-arrow.png) no-repeat left center;
	background-size:18px 18px;
	text-indent:22px;
}
.a02tr{
	font-size:1.1rem;
	font-weight:400;
	color:#333;
	text-align:right;
	float:right;
}
.info_text{
	text-align:center;
	font-size:3.75rem;
	font-weight:500;
}
.trouble_text{
	font-size:3.75rem;
	font-weight:500;
	text-align:center;
}
.caselist{
	display: flex;
   /* justify-content: space-between;*/
    flex-wrap: wrap;
	overflow:hidden;
	margin:3% 0;
}
.caselist li{
	float:left;
	width:23%;
	margin:1%;
}
.caselist li img{
	box-shadow: 4px 4px 0px #d6d1cb;
}
.case{
	font-size:1.375rem;
	font-weight:400;
	padding:20px 0 10px 10px;
	box-sizing:border-box;
}
.map{
	font-size:1.125rem;
	font-weight:300;
	color: #333;
    line-height: 1.8;
    background: url(../images/map.png) no-repeat 10px center;
    padding: 0 0 0 30px;
    box-sizing: border-box;
	background-size:14px 20px;
}
.pricebox{
	display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
	overflow:hidden;
	margin:20px 0 0 0;
}
.pricebox li{
	background:#fff;
	box-shadow: rgba(100, 100, 111, 0.4) 0px 7px 29px 0px;
	border-radius:20px;	
}
.pricebox li:nth-child(1){
	width:55%;
	float:left;
}
.pricebox li:nth-child(2){
	width:40%;
	float:right;
}
.priceinner{
	padding:10px 30px 30px 30px;
	box-sizing:border-box;
}
.p01{
	font-size:1.625rem;
	font-weight:400;
	background:#3f2b6b;
	color:#fff;
	text-align:center;
	padding:15px 0;
	border-radius:20px 20px 0 0;
}
.p02{
	font-size:1.25rem;
	font-weight:400;
	color:#333;
	padding:0 0 30px 0;
}
.p03{
	font-size:1.125rem;
	font-weight:400;
	line-height:1.6;
	color:#333;
}
.p04{
	font-size:1.25rem;
	color:#333;
	background: url(../images/check.png) no-repeat left center;
	padding:10px 0 10px 30px;
	width:50%;
	float:left;
}
.p05{
	width:100%;
	clear:both;
	border-top:1px solid #ccc;
	border-bottom:1px solid #ccc;
	padding:10px 0;
	margin:15px 0;
	overflow:hidden;
}
.p05 p{
	font-size:1.25rem;
	line-height:1.6;
	color:#3f2b6b;
	width:50%;
	float:left;
}
.p05 p:nth-child(odd){
	
}
.p05 p:nth-child(even){
	text-align:right;
}
.pricetable{
	width:100%;
	font-size:1.25rem;
	text-align:center;
	margin:0 0 10px 0;
}
.pricetable thead{
	background:#f1655f;
	color:#fff;
}
.pricetable tbody{
	background:#fde2da;
	color:#333;
}
.pricetable tr td{
	padding:12px 0;
	box-sizing:border-box;
	border:1px solid #fff;
}
.data_text{
	font-size:3rem;
	font-weight:500;
	line-height:1.2;
	letter-spacing:2px;
	border-left:10px solid #804bc1;
	padding:0 0 0 20px;
	box-sizing:border-box;
}
.data_text span{
	font-size:3rem;
	font-weight:500;
	background: linear-gradient(to right, #ca359b,  #824bc0);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}
.c_left{
	width:50%;
	float:left;
	padding:0 11% 0 0;
	box-sizing:border-box;
}
.c_right{
	width:50%;
	float:left;
}
.c01{
	font-size:2.25rem;
	letter-spacing:3px;
	padding:0 0 5% 0;
}
.c02{
	width:100%;
}
.c02 p{
    font-size:3rem;
	line-height:1.2;
	font-weight:500;
	background: linear-gradient(to right, #824bc0 ,#ca359b);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   padding:20px 5px;
   letter-spacing:5px;
}
.c02 span{
	display:block;
    width:100%;
    height:5px;	
	background: linear-gradient(to right, #ca359b,  #824bc0);
}
.c03{
	font-size:1.4375rem;
	line-height:1.6;
	font-weight: 400;
	letter-spacing:1px;
	padding:20% 0 5% 0;
}
.c04{
	display: flex; 
	align-items: center;
}
.c04 p{
	font-size:2.875rem;
	font-style:italic;
	font-family: "Libertinus Mono", monospace;
    font-weight: 400;
	padding:0 0 0 10px;
	box-sizing:border-box;
}
.c04 img{
	width:40px;
	height:40px;
}
.contact{
	display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
	overflow:hidden;
	align-items: center;
}
.contact li{
	font-size:1.5rem;
	font-weight: 400;
	letter-spacing:2px;
	/*float:left;*/
	padding:15px 0;
	box-sizing:border-box;
	
}
.contact li:nth-child(odd){
	width:22%;
}
.contact li:nth-child(even){
	width:78%;
}
.contact li:last-child{
	width:100%;
}
.contact li span{
	color:#cb359b;	
}
.contact li label{
}
.contact li input[type="checkbox"]{
	width:18px;
	height:18px;
	border: 1px solid #ccc;
	margin:-2px 2px 0 0;
}
.contact li input[type="text"]{
	width:100%;
	height:70px;
	border-radius:5px;
	border:2px solid #eee;
	padding:8px;
}
.contact li input[type="submit"]{
	width:100%;
	height:80px;
	border-radius:5px;
	background: linear-gradient(to right, #ca359b,  #824bc0);
	font-size:28px;
	color:#fff;
	font-weight:bold;
	letter-spacing:3px;
}
.infobox{
	display: table;
    margin:4% auto 0 auto;	
}
.infobox li{
	float:left;
}
.infobox li:nth-child(1){
	
}
.infobox li:nth-child(2){
    padding:0 20px;
	box-sizing:border-box;
}

.infobox li:nth-child(2) p{
	font-size:2.25rem;
	line-height:60px;
	font-style:italic;
	font-family: "Libertinus Mono", monospace;
    font-weight: 400;
	letter-spacing:0px;
}
.list{
	display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
	overflow:hidden;
	width:90%;
	margin:0 auto 4% auto;
}
.list li{
	width:31%;
	margin:1%;
	background:#fff;
	border-radius:10px;
	padding:30px 30px 40px 30px;
	box-sizing:border-box;
	box-shadow: rgba(130, 75, 192, 0.2) 0px 4px 20px;
}
.list li h5{
	font-size:2rem;
	text-align:center;
	font-weight:500;
	letter-spacing:2px;
	padding:30px 0;
}
.list li p{
	font-size:1.25rem;
	color:#333;
	line-height:1.5;
	letter-spacing:2px;
}
.pie90{
	width:200px;
	height:200px;
	margin:5% auto;
	background: url(../images/pie90.png) no-repeat;
	padding:40px;
}
.pie95{
	width:200px;
	height:200px;
	margin:5% auto;
	background: url(../images/pie95.png) no-repeat;
	padding:40px;
}
.piecircle{
	width:100%;
	height:100%;
	background:#fff;
	border-radius:50%;	
    display: flex;
    box-shadow: rgba(130, 75, 192, 0.8) 0px 2px 20px;
}

.percent{
    color:#824bc0;
    font-size:1.5rem;  
    font-family: "Libertinus Mono", monospace;
    font-weight: 400;
	vertical-align: super;
    float:left;
	margin: auto;
	line-height:40px;
}
.counter{
	font-family: "Libertinus Mono", monospace;
    font-weight:600;
	float:left;
	font-size:2.875rem;  
	vertical-align: super;
	letter-spacing:-1px;
}
.{
	
}
.{
	
}
.{
	
}
.btn{	
    width:340px;
	font-weight:500;
	overflow:hidden;
	margin:0 auto;
}
.btn a{
	display:block;
	border-radius: 30px;
	line-height:40px;
    font-size: 2rem;
	letter-spacing:2px;
	color:#fff;
	background: linear-gradient(to right, #ca359b,  #824bc0);
	padding:10px 10px 12px 40px;
	box-sizing:border-box;
}
.btn a:hover{
	background: linear-gradient(to right, #824bc0 , #ca359b);
}
.btn a span{
	display:block;
	width:40px;
	height:40px;
	border-radius:25px;
	background:#fff;
	float:right;
}
.btn a span i{
	display:block;
	font-size:16px;
	color:#824bc0;
	text-align:center;
	line-height:40px;
}

.row{
	overflow:hidden;
	margin:5% 0 0 0;
}
.intro_l{
	width:20%;
	float:left;
	margin:4% 10% 0 10%;
}
.intro_r{
	width:60%;
	float:right;
	/*position:relative;*/
}
.intro_l h6{
	font-size:2rem;
	font-weight:500;
}
.intro_l h6::after{
	content:"";
	display:block;
	width:30px;
	height:5px;
	background:#804bc1;
	margin:50px 0;
}
.intro_l p{
	font-size:1.25rem;
	line-height:1.6;
	letter-spacing:2px;
}
.mockup {
    position: absolute;
    z-index: 5;
    float: left;
    pointer-events: none;
	width:15.5%;
}
.app-gallery{
	width:;
    position: absolute;
    top:11px;
    left:7px;
}

.solution{
	width:100%;
	clear:both;
	padding:5% 0 0 0;
	
}
.{
	
}
@media (max-width: 1600px) {
.navbar{
	width:90%;
}
}


@media (max-width: 1440px) {
.banner_wrap{
	width:90%;
	margin:4% auto;
}
}


@media (max-width: 1366px) {
.mockup {
	width:15%;
}
.app-gallery{
    top:8px;
    left:2px;
}
}
@media (max-width: 1200px) {
.index_tab {
		width: 100%;
}
}
@media (max-width: 1024px) {
.table_wrap{
	width:100%;
	overflow-x:auto;
}
.table2025 {
    width: 1024px;
}
.pricebox li:nth-child(1){
	width:100%;
	float:none;
	margin:0 0 30px 0;
}
.pricebox li:nth-child(2){
	width:100%;
	float:none;
}
.c_left{
	width:100%;
	float:none;
	padding:0 0 5% 0;
}
.c_right{
	width:100%;
	float:none;
}
.c03{
	padding:5% 0;
}
.intro_l{
	width:80%;
	float:none;
	margin:1% auto;
}
.intro_r{
	width:80%;
	float:none;
	margin:1% auto;
}
.mockup{
	display:none;
}
}

@media (max-width: 800px) {
.tabs {
		width:100%;    
}

.tabs_index {
		width:100%;
}
.list li{
	width:46%;
	margin:2%;
}
.caselist li{
	width:46%;
	margin:2%;
}
.infobox li{
	width:100%;
	float:none;
}
}

@media (max-width: 640px) {
.navbar{
	margin:20px auto 0 auto;
	border-radius:10px;
	padding:10px 30px;

}
.logo{
	width:160px;
	float:none;
	margin:0 auto 10px auto;
}
.nav{
	width:90%;
	float:none;
	margin:0 auto;
}
.nav li {
    width: 46%;
    font-size:18px;
    line-height: 40px;
    margin: 0 2%;
}
}

@media (max-width: 480px) {
.list li{
	width:98%;
}
.trouble_text{
	font-size:2.5rem;
}
.data_text{
	font-size:2.5rem;
}
.data_text span{
	font-size:2.5rem;
}
}