@charset "utf-8";

/*::selection{background:#fcbe32;}*/
.csb{padding-top:30px; }
.csb2{padding-top:20px; }
.csbg{
  	position:relative;
	width:100%;
	display:block;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 0%,50% 100%;
	background-image:url(../img/slider/csbg.jpg),url(../img/slider/csbg2.jpg);
	background-size:100% auto;
	}
.csbg::after{
	position:relative;
	width:100%;
	padding-bottom:10%;
	content:'';
	display:block;
	}

.cshead{
  	position:relative;
	width:100%;
	padding-bottom:33%;/*550 28.64583*/
	display:block;
  	margin-top:110px;
	}

.titbx{
	position:relative;
	width:100vw;/**/
	display:block;
	text-align: center;
	font-weight: bolder;
	color: #3b3a3a;
	overflow: hidden;
  	left:50%;
  	transform: translateX(-50%);
	}
.titbx strong{
	position:relative;
	display:inline-block;
	/*color: #3b3a3a;*/
	min-width: 190px;
  	margin-bottom:20px;
  	margin-top: 45px;
	/**/
  	font-size: 2.5rem;
	line-height: 2.8rem;
	font-weight:900;
	text-transform: uppercase;
	}
.titbx strong::before{/*,.titbx strong::after*/
	position:absolute;
	width:50vw;
	height:2px;
	content:'';
	display: block;
	top:0;
	/*background-color:#3b3a3a;*/
	opacity: .5;
	}
.titbx.la strong::before{
	left:108%;
	background:linear-gradient(90deg,#a3aee9 25%,#eeeffb 75%);
	}
.titbx.ra strong::before{
	right:108%;
	background:linear-gradient(270deg,#a3aee9 25%,#eeeffb 75%);
	}

.titbx > div{
	position:absolute;
	/*content:'CloudSafer';
	text-transform: none;*/
	text-transform:uppercase;
	top:1rem;
  	left:50%;
  	transform: translateX(-50%);
	/**/
	font-family: Arial,"sans-serif";
	font-size: 1.45rem;
	letter-spacing:.2rem;
	}
.titbx > div .br{
	font-family: Arial,"sans-serif";
	color: #398dec;
	}
.csbx1{
	position:relative;
	margin:10px auto 60px;
	display:flex;
	flex-wrap:nowrap;
	}

.csbx1 .cb1,.csbx1 .cb2{
	position:relative;
	width:50%;
	display:block;
	text-align: center;
	}
.csbx1 .cb1{padding:10px 0 0 0;}
.csbx1 .cb2{padding:10px 0 0 0;}
.csbx1 .ctit1{
	position:relative;
	width:100%;
	display:block;
	padding: 0 0 35px;
	/**/
  	font-size:1.8rem;
	line-height:2.3rem;
	color: #398dec;
	font-weight:bold;
	text-align:center;
	text-transform: uppercase;
	}
.csbx1 .ctit1 span{
	position:relative;
	font-family: Arial,sans-serif;
	letter-spacing:.35rem;
	}
.csbx1 ul{
	position:relative;
	text-align: left;
	font-size: 1.2rem;
	color: #3b3a3a;
  	letter-spacing: 0.1rem;
  	line-height:2rem;
	display: inline-block;
	}
.csbx1 ul li{
	position:relative;
	list-style-image:url("../img/yv.png");
	padding-bottom:.8rem;
	}
/**/
.csbx2{
	position:relative;
	display:block;
	margin:40px auto 60px;
	}
.csbx2a{
	position:relative;
	display:flex;
	flex-wrap:nowrap;
	padding:20px 0;
	margin:10px auto 30px;
	}
.csbx2a .cb3,.csbx2a .cb3a{
	position:relative;
	width:50%;
	display:block;
	/**/
	font-size: 1.2rem;
	color: #3b3a3a;
  	letter-spacing: 0.1rem;
  	line-height:2rem;
	text-align:center;
	}
.csbx2a .cb3{padding:10px 20px 10px 0;}
.csbx2a .cb3a{padding:10px 0 10px 20px;}
.csbx2a .ctit2{
	position:relative;
	width:100%;
	display:block;
	padding: 0 0 35px;
	/*Arial,*/
	font-family:Arial,'Microsoft JhengHei',sans-serif;
  	font-size:1.8rem;
	line-height:2.3rem;
	color: #398dec;
	font-weight:bold;
	text-align:center;
	text-transform: uppercase;
	}
.csbx2a .ctit2 .icn1,.csbx2a .ctit2 .icn2{
	position:relative;
	display:inline-block;
	padding-left:53px;
	font-family:Arial;/**/
	}
.csbx2a .ctit2 .icn1::before,.csbx2a .ctit2 .icn2::before{
	position:absolute;
	width: 45px;
	padding-bottom:45px;
	content:'';
	display: block;
	/**/
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:100% auto;
	/**/
	top:50%;
  	left:0%;
  	transform: translateY(-50%);
	}
.csbx2a .ctit2 .icn1::before{
	background-image:url(../img/icn_1.png);
	}
.csbx2a .ctit2 .icn2::before{
	background-image:url(../img/icn_2.png);
	}
.co2{
	position:relative;
	color:#888888;
	display:inline-block;
	margin-left:10px;
	/*font-weight:normal;*/
	}
.csbx2c{
	position:relative;
	display:block;
	padding:38px 0 35px;
	margin:0 auto 60px;
	display:flex;
	flex-wrap:nowrap;
	/*background-color:#eeeeee;*/
	}
.csbx2c::before{
	position: absolute;
	width: 100vw;
	height: 115%;
	content:'';
	top: 50%;
  	left:50%;
  	transform: translate(-50%,-50%);
	/*background-color:#f6f6f6;*/
	/**/
	background-attachment:scroll;
	background-repeat:repeat;
	background-image:url(../img/cbg1.png);
	background-position:50% 50%;
	opacity:.6;
	overflow: hidden;
	}
.csbx2c .cb3b{
	position:relative;
	display:block;
	width:calc(100%/3);
	/**/
	font-size: 1.2rem;
	color:#3b3a3a;/*b2925e*/
	font-weight:bold;
  	letter-spacing:0.1rem;
  	line-height:2rem;
	text-align:center;
	z-index: 1;
	}
.csbx2c .cb3b .img1{
	position: relative;
	width:180px;
	display:inline-block;
	}
.csbx2c .cb3b .img1 > img{
	position: relative;
	width: 100%;
	display:block;
	}
.csbx2c .cb3b .tc1{
	position: relative;
	padding: 10px 0 0;
	}
/**/
.csbx3{
	position:relative;
	display:block;
	margin:50px auto 80px;
	}
.csbx3 .cb5a,.csbx3 .cb5b,.csbx3 .cb5c{
	position:relative;
	width:90%;
	/**/
	display:flex;
	flex-wrap:wrap;
	align-content:center;
	/**/
	padding:15px 10px;
	background:linear-gradient(270deg,#ccd8f3 25%,#e6ecf8 75%);
	border-radius:35px;
	/**/
	transition: all .5s;
	}
.csbx3 .cb5a{/*left:-3%;*/}
.csbx3 .cb5b{margin:25px auto;}
.csbx3 .cb5c{float:right;/*right:-3%;*/}
.csbx3 .ctit3{
	position:relative;
	width:25%;
	/**/
	display:flex;
	flex-wrap:wrap;
	align-content:center;
	justify-content:center;
	/**/
  	font-size:1.6rem;
	line-height:2.3rem;
	color:#398dec;
	font-weight:bold;
	text-align:center;
	}
.csbx3 .con3{
	position:relative;
	width:75%;
	/**/
	display:flex;
	flex-wrap:nowrap;
	/**/
	font-size: 1.2rem;
	color: #3b3a3a;
  	letter-spacing: 0.1rem;
  	line-height:1.5rem;
	font-weight: bold;
	left: -1%;
	/**/
  	-webkit-filter: drop-shadow(0 0 15px rgba(77,77,132,.2));
  	filter: drop-shadow(0 0 15px rgba(77,77,132,.2));
	}
.csbx3 .con3.c3 > div,.csbx3 .con3.c2 > div{
	position:relative;
	height:80px;
	font-family:Arial;
	/**/
	display:flex;
	flex-wrap:wrap;
	align-content:center;
	justify-content:center;
	/**/ 
	background-color:rgba(255,255,255,.85);
	border-radius:20px;
	}
.csbx3 .con3 > div > span{
	position:relative;
	display: inline-block;
	font-family:Arial;
	margin: 0 0 0 5px;
	}
.csbx3 .con3.c3 > div{
	width:calc(88%/3);
	margin:0 2%;
	}
.csbx3 .con3.c2 > div{
	width:calc(92%/2);
	margin:0 2%;
	}
/**/
.titbx2{
	position:relative;
	/*width:106%;*/
	display:block;
	/**/
  	font-size:1.8rem;
	color: #3f4247;
	line-height:2.5rem;
	letter-spacing:.1rem;
	font-weight:900;
	margin:80px auto 10px; /**/
	padding-left:18px;
	left:50%;
	transform: translateX(-50%);
	}
.titbx2:before{
	position:absolute;
	width:10px;
	height:70%;
	content:'';
	display: block;
	background-color:#3f4247;/*398dec*/
	top:53.1%;
	left:0;
	transform: translateY(-50%);
	border-radius:0 8px 0 8px;
	}
.csbx5,.csbx6,.csbx7{
	position:relative;
	margin:60px auto;
	/**/
	display:flex;
	flex-wrap:nowrap;
	justify-content:center;
	}
.csbx5{
	flex-wrap: wrap;
	}
.csbx7{
	flex-wrap: wrap;
	}
.csbx5 > div{
	position: relative;
	width:23.4%;
	margin:0 .8%;
	font-size:1.2rem;
	color:#585a5d;/*3b3a3a*/
  	letter-spacing:0.1rem;
  	line-height:1.6rem;
	text-align: center;
	}
.csbx5 > div .img2{
	position: relative;
	width:180px;
	display:block;
	padding:10px;
	margin:0 auto 10px;
	}
.csbx5 > div .img2 > img{
	position: relative;
	width: 100%;
	display:block;
	}
.csbx7 > div .img2{
	position: relative;
	width:100px;
	display:block;
	padding:10px;
	margin:0 auto 10px;
	}
.csbx7 > div .img2 > img{
	position: relative;
	width: 100%;
	display:block;
	}

.ctit5{
	position:relative;
	display: block;
	/**/
	font-family:Arial;
  	font-size:1.38rem;
	line-height:2rem;
	color:#585a5d;
	font-weight:bold;
	text-align: center;
	margin-bottom:15px;
	}
.csbx5 > div ul{
	position: relative;
	margin-left:-15px;
	display:inline-block;
	text-align:center; 
	}
.csbx5 > div ul li{
	position:relative;
	margin-bottom:5px;
	text-align left;
	/*list-style-type:disc;*/
	}
.csbx7 > div{
	position: relative;
	width:23.4%;
	margin:0.8% 0.8% 1.8%;
	font-size:1.2rem;
	color:#585a5d;/*3b3a3a*/
  	letter-spacing:0.1rem;
  	line-height:1.6rem;
	text-align: center;
	}
.csbx7 > div ul{
	position:relative;
	display:inline-block;
	text-align:center;
	margin:0;
	padding:0; 
	}
.csbx7 > div ul li{
	position:relative;
	margin-bottom:5px;
	padding-left:1rem;
	text-align:left;
	list-style:none;
	}
.csbx7 > div ul li::before {
	position:absolute;
  	content: "• ";
	top:0;
	left:0;
	}
.csbx6 > div{
	position: relative;
	width:18.4%;
	margin:0 .8%; 
	/**/
	font-size:1.2rem;
	color:#585a5d;/*3b3a3a*/
  	letter-spacing:0.1rem;
  	line-height:2rem;
	text-align:center;
	}
.ctit6{
	position:relative;
	display:flex;
	flex-wrap:nowrap;
	justify-content:center;
	/**/
	font-family:Arial;
  	font-size:1.38rem;
	line-height:2rem;
	color:#585a5d;
	font-weight:bold;
	margin-bottom:15px;
	padding-bottom:10px;
	/*border-bottom:1px solid  #86898d;*/
	}
.ctit6::before{
	position: absolute;
	width:93%;
	height:1px;
	content:'';
	bottom:-3px;
  	left:50%;
  	transform: translateX(-50%);
	background-color:rgba(138,138,138,.25);
	/*background:linear-gradient(90deg,#a3aee9 25%,#d5d8f9 75%);*/
	}

.ctit6 > div{position:relative;font-family:Arial;}
.ctit6 > div.ct6_1{
	width:28%;
	font-size:4.5rem;
	top:4px;
	/**/
	display:flex;
	flex-wrap:wrap;
	align-content:center;
	justify-content:center;
	overflow:hidden;
	}
.ctit6 > div.ct6_2{
	width:65%;
	min-height:64px;
	text-align:left;
	/**/
	display:flex;
	flex-wrap:wrap;
	align-content:center;
	}
.ctit6 > div.ct6_2.ckw{width:70%;}


@media only screen and (max-width:1600px){
/**/

}
@media only screen and (max-width:1400px){
/**/
.csbx3 .cb5a{left:0;}
.csbx3 .cb5c{float:right;right:0;}
	
}
@media only screen and (max-width:1100px){
/**/
.csbx5,.csbx6{
	flex-wrap:wrap;/**/
	}
.csbx5 > div{
	width:31%;
	margin:20px 1% 50px;
	text-align: center;
	}
.csbx5 > div ul{
	display: inline-block;
	margin-left:-18px;
	text-align:left;
	}
.csbx7 > div{
	width:31%;
	margin:20px 1% 50px;
	text-align: center;
	}
.csbx7 > div ul{
	display: inline-block;
	text-align:left;
	}
.csbx6 > div{
	position: relative;
	width:220px;
	margin:20px 8px 50px; 
	}
	
	
}
@media only screen and (max-width:900px){
/**/
.csbx1 .ctit1{
	padding: 0 0 15px;
  	font-size:1.5rem;
	line-height:2rem;
	}
.csbx2a .ctit2{
	padding: 0 0 15px;
	font-size:1.5rem;
	line-height:2rem;
	}
.csbx2a .ctit2 .icn1,.csbx2a .ctit2 .icn2{
	padding-left:45px;
	}
.csbx2a .ctit2 .icn1::before,.csbx2a .ctit2 .icn2::before{
	width: 38px;
	padding-bottom:38px;
	}
.co2{margin-left:5px;}
	
.csbx2c .cb3b{font-size: 1rem;}
.csbx2c .cb3b .img1{
	width:150px;
	}
/**/	
.csbx3 .cb5a,.csbx3 .cb5b,.csbx3 .cb5c{width:100%;}
.csbx3 .ctit3{
	width:20%;
  	font-size:1.5rem;
	line-height:2.3rem;
	}
.csbx3 .con3{
	width:80%;
	font-size: 1rem;
	}
.csbx3 .con3.c3 > div{
	width:calc(94%/3);
	margin:0 1%;
	}
.csbx3 .con3.c2 > div{
	width:calc(96%/2);
	margin:0 1%;
	}	
/**/	
.csbx5 > div{
	width:48%;
	}
.csbx7 > div{
	width:48%;
	}
.csbx6 > div{
	width:48%;
	margin:20px 1% 50px; 
	}	
	
}
/*@media (min-width: 310px) and (max-width: 768px)*/
@media only screen and (max-width: 768px) {
/**/
.csbg{
  	background-image:url(../img/slider/csbg_m.jpg),url(../img/slider/csbg2_m.jpg);
	}
.csbg::after{padding-bottom:18%;}
	
.cshead{
	padding-bottom:105%;
  	margin-top:76px;
	}
	
 .section-title.ck span {
    font-size: 0.95rem;
  }
.titbx{
	margin-bottom:-20px;
	}
.titbx strong{
	min-width: 170px;
	font-size: 2rem;
	line-height: 2.5rem;
  	margin-bottom:0;
  	margin-top: 35px;
	}	
.titbx > div{
	top:.5rem;
	font-size: 1.32rem;
	letter-spacing:.1rem;
	}
.csbx1{
	width:108%; 
	margin:-20px auto 50px;
	flex-wrap:wrap;
  	left:50%;
  	transform: translateX(-50%);
	}
.csbx1 .cb1,.csbx1 .cb2{
	width:100%;
	}
.csbx1 .cb2{
	padding: 30px 0 0 0;
	}
.csbx1 .ctit1{
	padding: 0 0 15px;
  	font-size:1.5rem;
	line-height:2rem;
	}
.csbx1 ul{
	font-size:.95rem;
/*  letter-spacing: 0.1rem;
  	line-height:2rem;*/
	margin-bottom:0;
	left: -5px;
	}
/**/
.csbx2{
	width:108%; 
	margin:40px auto 50px;
  	left:50%;
  	transform: translateX(-50%);
	}
.k2{
	top:20px;
	border-bottom:1px dashed  #ccd1ed;
	}
.csbx2a{
	flex-wrap:wrap;
	margin:10px auto 30px;
	}
.csbx2a .cb3,.csbx2a .cb3a{
	width:100%;
	font-size:.95rem;
	/*text-align: left;*/
	}
.csbx2a .cb3{padding:10px 0;}
.csbx2a .cb3a{padding:10px 0;}
.csbx2a .ctit2{
	padding: 0 0 15px;
	font-size:1.5rem;
	line-height:2rem;
	}	
.csbx2a .ctit2 .icn1,.csbx2a .ctit2 .icn2{
	padding-left:0;
	}
.csbx2a .ctit2 .icn1::before,.csbx2a .ctit2 .icn2::before{
	position:relative;
	width: 65px;
	padding-bottom:50px;
	display: block;
	/**/
	top:-6px;
  	left:50%;
  	transform: translateX(-50%);
	}
.csbx2a .ctit2 .icn2::before{
	/*display:none;*/
	width:60px;
	padding-bottom:50px;
	top:-3px;
	}	
.co2{font-size:1.45rem;margin-left:5px;}
.csbx2c{
	padding:38px 0 35px;
	margin:0 auto 50px;
	flex-wrap:wrap;}
.csbx2c .cb3b{
	width:100%;
	font-size:1rem;
	margin:20px 0 25px;
	}
.csbx2c .cb3b .tc1 {
  padding:0 0 0;
	}
.csbx2c .cb3b .img1{
	width:160px;
	}	
.csbx2c::before{height: 100%;}
	
/**/
.csbx3{
	width:108%;
	margin:50px auto;
  	left:50%;
  	transform: translateX(-50%);
	}
.csbx3 .ctit3{
	width:100%;
	height: 70px;
  	font-size:1.5rem;
	line-height:2rem;
	}
.csbx3 .cb5a,.csbx3 .cb5b,.csbx3 .cb5c{
	padding:10px 15px 20px;
	background:linear-gradient(360deg,#ccd8f3 25%,#e6ecf8 75%);
	}
.csbx3 .con3{
	width:100%;
	flex-wrap:wrap;
	font-size: 1rem;
	left:0;
	}
.csbx3 .con3.c3 > div{
	width:100%;
	margin:2% 0;
	}
.csbx3 .con3.c2 > div{
	width:100%;
	margin:2% 0;
	}
/**/
.csbx5{}
.csbx5 > div{
	/*width:100%;
	margin:20px 0 50px;*/
	font-size:1rem;
  	line-height:1.5rem;
	}
.ctit5{font-size:1.3rem;}
.csbx5 > div ul{
	/*width: 300px;
	display:block;*/
	margin-left:-10px;
  	left:50%;
  	transform: translateX(-50%);
	}
.csbx7 > div{
	font-size:1rem;
  	line-height:1.5rem;
	}
.csbx7 > div ul{}	
	
.csbx6 > div{
	font-size:1rem;
	line-height:1.5rem;
	}
.ctit6{font-size:1.3rem;}
.ctit6 > div.ct6_1{
	width:28%;
	font-size:4rem;
	top:4px;
	}
.ctit6 > div.ct6_2{
	width:65%;
	min-height:60px;
	}	
	
	
}
@media only screen and (max-width:780px){
/**/


}
@media only screen and (max-width:685px){ 
/**/

}
@media only screen and (max-width:560px){
/**/

}
@media only screen and (max-width:470px){
/**/
.csbx5 > div{
	width:100%;
	margin:20px auto 50px;
	}
.csbx5 > div ul{
	width:300px;
	margin-left:-6px;
	}
.csbx7 > div{
	width:100%;
	margin:20px auto 30px;
	}
.csbx7 > div ul{}
	
.csbx6 > div{
	width:350px;
	margin:0 auto 70px;
	}
.ctit6 > div.ct6_2.ckw {width: 65%;}
	
	
	
	
}
@media only screen and (max-width:380px){
/**/
.titbx2{
	width:106%;
	letter-spacing:0rem;
	}
}
@media only screen and (max-width:360px){
/**/
}
@media only screen and (max-width:340px){
/**/
}


@keyframes fadeInLeft2 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-30%, 0, 0);
            transform: translate3d(-30%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

.fadeInLeft2 {
  -webkit-animation-name: fadeInLeft2;
          animation-name: fadeInLeft2;
}

@keyframes fadeInRight2 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(30%, 0, 0);
            transform: translate3d(30%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}
.fadeInRight2 {
  -webkit-animation-name: fadeInRight2;
          animation-name: fadeInRight2;
}

@keyframes fadeInUp2 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 30%, 0);
            transform: translate3d(0, 30%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

.fadeInUp2 {
  -webkit-animation-name: fadeInUp2;
          animation-name: fadeInUp2;
}