@charset "utf-8";
/* CSS Document */
@font-face {
    font-family: "VERDANAZ";
    src:url('VERDANAB.otf'),  
    url('VERDANAB.ttf'),
    url('VERDANAB.woff');
}

*{
	padding:0px;
	margin:0px;
	border:0px;
}
html{
	font-size: 10px;
}
body{
	font-family:"Arial","Microsoft YaHei","微软雅黑","Microsoft JhengHei","华文细黑","STHeiti","MingLiu","黑体",sans-serif; 
	font-size:12px;
	background-color: #000;
	font-weight: 300;
	overflow-x: hidden;
}
p,h1,h2,h3,h4,h5,h6,ul{
	margin:0px;	
	padding:0px;
	border:0px;
	font-weight: 300;
}
*::-moz-selection{
	background:#ec1b45;
	color:#fff;
}
*::selection{
	background:#ec1b45;
	color:#fff;
}

a,button,input,textarea{ 
	outline: none; 
    -webkit-appearance: none;
}
button:focus{
	outline: none; 
}
a{
	color:#000;
}
a:hover{
	color:#000;
	text-decoration: none;
}

.menu_bg{
	position: relative;
	width: 100%;
	height: 8rem;
	background-color: #000;
}

.mulu_box{
	position: fixed;
	height:8rem;
	width:100%;
	top:0;left:0;
	padding:0.5rem 4rem;
	box-sizing: border-box;
	background-color: #000;
	z-index: 9990;

	display:flex;
	justify-content:space-between;
 
}
.mulu_item{
	align-self:center;
}
.header_logo{
	position: relative;
	height:8rem;
	width:auto;
}
.header_logo img{
	position: relative;
	height:5rem;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%); 
}
.header_mulu{
	position: relative;
	list-style:none;
}
.header_mulu li{
	position: relative;
	display: inline-block;
	padding: 0rem 1.2rem;
	font-size: 1.3rem;
	cursor:pointer;
}

.header_mulu li a{
	color:#fff;
	padding-bottom:3.5rem;
}
.header_mulu li a:hover{
	color:#ec1b45;
	font-weight: 600;
}

.parent_a::after{
	position: absolute;
	top:-3rem;
	left:0;
	width:100%;
	height:0.4rem;
	content:"";
	background-color:#ec1b45;
	
	-webkit-transform: scaleX(0);
	transform:scaleX(0);
	-webkit-transition: ease-in-out 0.2s;
	transition: ease-in-out 0.2s;
}








.parent_a:hover::after{
	-webkit-transform: scaleX(1);
	transform: scaleX(1);
}
.child_service,.child_quotation{
	position: absolute;
	text-align: center;
	left:-1.4rem;
	top:5rem;
	width:11rem;
	padding:1rem 0.2rem;
	background-color:#111111;
	cursor: default;
	z-index: 9999;
	
	opacity: 0;
	visibility:hidden;
	transition:opacity .5s;
}
.child_service li,.child_quotation li{
	padding:0 1rem;
	margin:0.5rem 0;
	color:#fff;
}
.child_service li a,.child_quotation li a{
	color:#fff;
}
.parent_service a:hover + .child_service,.child_service:hover , .parent_quotation a:hover + .child_quotation,.child_quotation:hover{
	opacity: 1;
	overflow:hidden;
	visibility:visible;
}
.mulu_icon{
	/* margin-left:2rem; */
}
.mulu_icon img{
	width:3rem;
}
.replace_a::after{
	top:-1.55rem;
}
.header_mulu li a.selected_mulu{
	color:#ec1b45;
	font-weight: 600;
}
a.selected_mulu::after{
	-webkit-transform: scaleX(1);
	transform: scaleX(1);
}





#mobile_menu{
	display: none;
}
#text{
	position: absolute;
	width:60%;
	left:20%;
	height:21rem;
	top:45rem;
	background-color: #000000;
	opacity:0.0;
	text-align: center;
	margin:auto;
	padding:3rem;
	font-size:4.58em;
}
#fontp{
	position: absolute;
	width:60%;
	left:20%;
	top:46.5rem;
	margin:auto;
	padding:auto 1rem;
	text-align: center;
	opacity:0;
	color:#ffffff;
}
.fontp{
	font-size:3rem;
	line-height: 1.2em;
	padding:auto 2rem;
}
.fontp u:hover{
	color:#16a3da;
	cursor:default;
}
#jian{
	position:absolute;
	top:71rem;
	width:100%;
	height:6rem;
	text-align: center;
	opacity: 0.9;
}
#jian img{
	width:4.5rem;
	height:4.5rem;
}
.td1{
	width:24rem;
	text-align: center;
}
.td2{
	width:40%;
	padding:0px;
}
/* ------------------home_about--------------- */
#home_about{
	position: relative;
	width:100%;
	padding:11rem 11rem;
	text-align: right;

    background: -webkit-linear-gradient(to right,#dddddd,#3a3a3a); /* Safari 5.1 to 6.0 */
    background: -o-linear-gradient(to right,#dddddd,#3a3a3a); /* Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(to right,#dddddd,#3a3a3a);
    background: linear-gradient(to right,#dddddd,#3a3a3a); /* 标准语法 */
}
#home_about::before{
	position: absolute;
	width:100%;
	height:100%;
	content: "";
	background-image: url("../images/home_about.png");
	background-repeat: no-repeat;
	background-size: 80%;
	top:0;
	left:0;
}
.about_txt {
    position: relative;
    display: inline-block;
    text-align: justify;
    font-size: 1.4rem;
    width: 39rem;
    letter-spacing: 0.2rem;
}
.about_txt a{
	color:#ec1b45;
	text-decoration:underline;
}
.about_txt span{
	font-weight: bolder;
}
#home_about p{
	margin-bottom:1.5rem;
	color:#fff;
}
#home_about h1{
	position: absolute;
	bottom:10.5rem;
	left:47rem;
	font-size: 11rem;
	font-weight: bold;
	line-height:0.74em;
    opacity: 0.8;
	color:#fff;
	font-family: "VERDANAZ";
}
#home_about h1 img{
	width:23rem;
}


/* ---------------home_client---------------- */
#home_client{
	position: relative;
	text-align: center;
	padding-bottom:4rem;
}
.content_title{
	position: relative;
	margin:5rem auto 5rem;
	display: inline-block;
	font-size: 2.5rem;
	line-height:4.6rem;
	z-index: 1;
}
.content_title::before{
	position: absolute;
	width:2rem;height:100%;top:0;left:-0.5rem;
	content:"";
	background-color:rgba(236,27,69,.5);
	transform:skewX(-18deg);
	z-index: -1;
}
.client_box{
	position: relative;
	width:99%;
	margin:auto;
	display: flex;
	justify-content:space-around;
	flex-wrap:wrap;
}
.client_item{
	width:19%;
	padding-bottom:1rem;
	margin-bottom:2rem;
	outline:0.05rem solid #e5e5e5;
	box-sizing: border-box;
}
.client_item:hover{
	box-shadow:0 0 1rem 0.2rem rgba(236,27,69,0.5);
	outline:0.05rem solid #ec1b45;
	background-color: #ec1b45;
	color:#fff;
}
.client_img{
	width:100%;
	padding:5rem 0;
	background-color: #fff;
	border-bottom:0.05rem solid #ebebeb;
}
.client_img img{
	width:100%;
}
.client_item h2{
	font-size: 1.5rem;
	margin:1.5rem 0 0.5rem;
	padding:0 1rem;
	font-weight: 400;
}
.client_item p{
	font-size: 1.2rem;
	padding:0 0.5rem;
}
.client_item a{
	color: inherit;
}
.more_but{
	position: absolute;
	font-size: 1.5rem;
	padding:0.8rem 3rem;
	border:0.05rem solid #000000;
	border-radius: 0.4rem;
	background-color: transparent;

	bottom:0rem;
	left:50%;
	transform: translate(-50%,-50%); 
	transition: all .2s;
}
.more_but:hover{
	border:0.05rem solid #ec1b45;
	background-color: #ec1b45;
	color: #fff;
}
.client_box_hide .client_item{
	display: none;
}

/* ----------------home_works---------------- */
.home_works{
	position: relative;
	text-align: center;
	background-color: #fafafa;
	padding-bottom: 12rem;
}
.home_works_box{
	position: relative;
	width:100%;
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}
.home_works_item{
	position: relative;
	width:25%;
	overflow: hidden;
}
.home_works_img img{
	width: 100%;
	-webkit-transform: scale(1.12);
    -ms-transform: scale(1.12);
	transform: scale(1.12);
	position: relative;
	-webkit-transition: all .35s ease-out;
	transition: all .35s ease-out;
}
.txt_box{
	position: absolute;
	bottom: 0;
	-webkit-transform: translate3d(0,100%,0);
    -ms-transform: translate3d(0,100%,0);
	transform: translate3d(0,100%,0);
	left: 0;
	width: 100%;
	text-align: center;
	-webkit-transition: all .3s ease-out;
	transition: all .3s ease-out;
	background-color: #1a1a1a;
	color:#fff;
	padding:1.5rem 0 1rem;
	letter-spacing: 0.1rem;
}
.txt_box h3{
	font-size: 1.6rem;
	padding-bottom:0.5rem;
}
.txt_box p{
	font-size: 1.2rem;
	color:#bcbcbc;
}
.home_works_item:hover .home_works_img img{
	-webkit-transform: scale(1) translate3d(0,-2rem,0);
	transform: scale(1) translate3d(0,-2rem,0);
}
.home_works_item:hover .txt_box{
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}
.home_works_mask{
	position: absolute;
	width:0;
	height:0;
	top:0;left:0;
	background-color:rgb(0,0,0);
	opacity: 0;
	-webkit-transition: all .5s;
	transition: opacity .5s;
	text-align:center;
}
.home_works_item:hover .home_works_mask{
	width:100%;
	height:100%;
	opacity: 0.4;
}
.home_works_item:hover .home_works_mask p{
	-webkit-transform: translate3d(0,6rem,0);
	transform: translate3d(0,6rem,0);
}
.home_works_hide .home_works_item{
	display: none;
}











/*----------------------------20190123---------------------*/
.txt_framel{
    position: absolute;
    left: 11rem;
    top: 21rem;
    width: 60%;
	background-color:rgba(0,0,0,0);
    transition-duration: .7s;
	-webkit-transition-duration: .7s;

	text-align: left;
	color:#ec1b45;
	z-index: 10;
	font-family: "VERDANAZ";
}
.txt_framel h2{
	font-size: 4.5rem;
	font-weight: bold;
}
.txt_framel h2 img{
	height:14rem;
}
.txt_framel p{
	width:60%;
	font-size: 2.1rem;
}


#banner_carousel{
	margin:auto;
	height:52rem;
	z-index: 5555;
}
.carousel-inner{
	height:100%;
}
.carousel-item{
	height:100%;
}
.bg_frame{
	height:100%;
}	
.carousel-fade .carousel-inner .carousel-item{ opacity:0; -webkit-transition-property:opacity;-moz-transition-property:opacity ; -ms-transition-property:opacity;-o-transition-property:opacity;transition-property:opacity ;}
.carousel-fade .carousel-inner .active{ opacity: 1;}
.carousel-fade .carousel-inner .active.left,.carousel-fade .carousel-inner .active.right{left: 0;opacity: 0;}
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {opacity: 1;}
#banner_carousel a{
	background-image:none;
	opacity: 1;
	width: 3rem;
	height:3rem;
	top:25rem;
}
#banner_carousel a img{
	width:100%;
}
#banner_carousel .carousel-control-prev{
	margin-left:2rem;
}
#banner_carousel .carousel-control-next{
	margin-right:2rem;
}

.blank_page{
	position: fixed;
	top:5.25rem;
	right:1.5rem;
	z-index: 998;
}
.blank_page p{
	display: inline-block;
	font-size: 1.4rem;
	padding:0rem 1.5rem;
	color:#828282;
}
.blank_page p:hover{
	color:#000000;
}
.blank_page img{
	width:2.5rem;
	position: relative;
	top:-0.5rem;
}

/*--------------------20190916-home-banner-------------------*/
.hometop_box{
	position: relative;
	width:100%;
	height:100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50%;
}
/* .hometop_box1{
	background-image: url("../images/home_banner1.jpg");
}
.hometop_box2{
	background-image: url("../images/home_banner2.jpg");
} */

/* ----------home_services------------ */
#home_services{
	width:100%;
	text-align: center;
	padding-bottom:10rem;
}
.server_box{
	position: relative;
	width:65%;
	margin:auto;
	display: flex;
	justify-content:space-between;
}
.server_item{
	width:22%;
}
.ser_ico{
	width:8rem;
	height:8rem;
	margin:auto;
	border:0.1rem solid #ebebeb;
	border-radius: 50%;
	transition: all ease-in .2s;
}
.ser_ico img{
	height:5rem;
	margin-top:1.2rem;
}
.ser_ico:hover{
	border:0.1rem solid #ec1b45;
	background-color: #ec1b45;
}
.server_item h2{
	font-size: 1.8rem;
	margin:2.5rem 0 2rem;
}
.server_item p{
	font-size: 1.1rem;
	color:#6a6a6a;
}
.server_item button{
	font-size: 1.3rem;
	padding:0.3rem 2.5rem;
	margin-top:2rem;
	border:0.05rem solid #ec1b45;
	border-radius: 0.2rem;
	color:#ec1b45;
	background-color: #ffffff;
	transition:all ease-in .25s;
}
.server_item button:hover{
	color:#fff;
	background-color: #ec1b45;
}


/* ------------页尾-footer------------- */
.footer{
	background-color: #000;
	padding:5rem 0 12rem;
}
.footer_txt{
	position: relative;
	width:100%;
	margin:0 auto;
	color:#fff;
	display:flex;
	justify-content: center;
	align-content: center;
}
.foot_logo{
	position: relative;
	width:17rem;
	text-align: center;
}
.foot_logo img{
	position: relative;
	top:5.5rem;
	right:3rem;
	width:100%;
}
.first_ul{
	position: relative;
	list-style:none;
	align-self: flex-start;
}
.first_li{
	position: relative;
	display: inline-block;
	padding: 0rem 1.6rem;
	font-size: 1.3rem;
	cursor:pointer;
}
.child_ul{
	position: absolute;
	top:2.5rem;
	list-style:none;
}
.child_ul li{
	font-size: 1.1rem;
	margin:0.5rem 0;
	color:#959595;
}
.child_ul li:hover{
	color:#fff;
}
.foot_img{
	margin-right:12rem;
}
.foot_img img{
	width:17rem;
	cursor: default;
    margin-left: -0.5rem;
    margin-top: 0.6rem;
}
.footer .point_id a{
	color:#fff;
}
.cursor_wu,.foot_img{
	cursor: default;
}

/* 報價懸浮-icon */
.quotation_fixed{
	position: fixed;
	height:7rem;
	width:7rem;
	right:3rem;
	bottom:6rem;
	text-align:center;
	border-radius: 50%;
	background-color: #ec1b45;
	cursor:pointer;
	box-shadow:0 0 1rem 0.2rem rgba(236,27,69,0.5);
}	
.quotation_fixed p{
	font-size: 1.2rem;
	color:#fff;
}
.quotation_fixed img{
	height:3rem;
	margin-top:1.1rem;
}


/* -------------subpage------------ */
/* -----------page_app--------------- */
.banner_bgbox{
	position: relative;
	width:100%;
	height:50rem;
	background-repeat:no-repeat;
	background-size: cover;
	z-index: 1;
}
.banner_bgbox h1{
	position: absolute;
	color:#fff;
	font-size: 6rem;
	font-weight: bolder;
	letter-spacing: 0.2rem;
	top:17rem;
	left:15rem;
	line-height:1.1em;
}
.banner_app{
	background-image: url("../images/page_app.jpg");
}
.subpage_info{
	position: relative;
	width:100%;
	height:30rem;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50%;
	margin: 0rem 0 10rem;
    top: 10rem;
}
.subpage_app{
	background-image: url("../images/app_banner2.jpg");
}
/* app页 菱形部分 */
.diamond_box{
	position: relative;
	width:60%;
	height:32rem;
	top:-1rem;
	margin:auto;
}  
.shape-left {
	float: left;
    width: 18rem;
    height: 42rem;
	shape-outside: polygon(0 0, 100% 0, 0% 100%);
}
.shape-right {
	float: right;
    width: 19rem;
    height: 32rem;
    shape-outside: polygon(80% 0, 100% 100%, 0 100%);
}
.content {
	display: block;
	padding: 1px;
	position: relative;
	z-index: 0;
	font-size: 1.45rem;
	align-self: center;
	
	height:100%;
}
.content::before {
	content: '';
	position: absolute;
	background-color: #fff;
	transform: skewX(-22deg);
	-ms-transform: skewX(-22deg); /* Internet Explorer */
	-moz-transform: skewX(-22deg); /* Firefox */
	-webkit-transform: skewX(-22deg); /* Safari 和 Chrome */
	-o-transform: skewX(-22deg); /* Opera */

	left: 50px; right: 50px; top: 0; bottom: 0;
	border: 1px solid #fff;
	z-index: -1;
	box-shadow:-0.2rem 0 2rem 0.2rem rgba(73,187,164,0.6);
}
.content_txt{
	position: relative;
	text-align: justify;
}  
.content_txt p{
	margin-bottom:1.5rem;
}
.page_ico{
	position: absolute;
	text-align: center;
	top:7rem;
	left:4rem;
}
.page_ico img{
	width:13rem;
}
.page_ico h2{
	font-size: 1.8rem;
	color:#fff;
	padding-top:1.5rem;
}

.why_box{
	position: relative;
	width:100%;
	background-color: #fafafa;
	text-align: center;
	padding:2rem 0 0;
	/* top:-10rem; */
}
.why_container{
	position: relative;
	  display: flex;
	width:70%;
	margin:auto;
	flex-wrap:wrap;
	justify-content:center;
}
.why_item{
	position: relative;
	width:22%;
	margin:1.2% 1%;
	height:22rem;
	padding:1.8rem;
	border-radius: 1.2rem;
	text-align: center;
	background-color: #fff;
	box-shadow: 0.4rem 0.4rem 1rem 0.1rem rgba(66,66,66, 0.25);
	transition:all ease-in .25s;
	-webkit-transition:all ease-in .25s;
}	
.why_item::after {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    content: "";
    border-radius: 1.2rem;
    background-color: rgba(0, 0, 0, 0.1);
    transition: all ease-in .25s;
}
.why_item:hover::after{
	background-color:rgba(0, 0, 0, 0);
}
.why_item:hover{
	box-shadow: 0.6rem 0.6rem 1.5rem 0.1rem rgba(0, 0, 0, 0.2);
}
.why_item:hover{
	background-color: #fff;
}
.why_item img{
	height:5rem;
	margin:3rem 0 2rem;
}
.why_item p{
	font-size: 1.3rem;
}

.development_process{
	position: relative;
	width: 100%;
	text-align: center;
	padding-top:1rem;
}
.process_container{
	position: relative;
	display: flex;
	width:70%;
	margin:auto;
	justify-content: space-between;
	flex-flow: row nowrap;
	z-index: 1000;
}
.process_line{
	position: absolute;
	width:90%;
	height:0.2rem;
	border-top:0.05rem dashed #bbbbbb;
	top:4.6rem;
	left:5%;
}
.process_item{
	position: relative;
	width:13%;
	text-align: center;
	margin:1rem;
	z-index: 2000;
}
.step_img_p{
	width:7rem;height:7rem;
	box-shadow: 0 0 0 0.05rem #bbb;
	background-color: #fafafa;
	border-radius: 50%;
	text-align: center;
	margin:auto;

	transition:all .3s;
	-moz-transition:all .3s;
	-webkit-transition:all .3s;
	-o-transition:all .3s;
}
.step_img_p:hover{
	background-color:#ec1b45;
	box-shadow: 0 0 0 0.5rem rgba(255, 255, 255, 0.4);
}
.step_img_p span{
	position: relative;
	font-size: 4rem;
	font-weight: bold;
	line-height:7rem;
	left:-3rem;
	color:#fff;
	cursor: default;
	display: none;
}
.step_img_p img{
	height:5rem;
	margin-top:1rem;
}
.process_item h3{
	font-size: 1.4rem;
	margin:2rem 0 1.5rem;	
}
.process_item p{
	font-size: 1.2rem;
	color:#6a6a6a;
}

.works_js{
	position: relative;
	padding:0rem 0 8rem;
	background-color: #fafafa;
	text-align: center;
}

/* --------------website_page------------ */
.banner_website{
	background-image: url("../images/page_web.jpg");
}
.subpage_web{
	background-image: url("../images/web_banner2.jpg");
}
.subpage_web .content::before{
	box-shadow:-0.2rem 0 2rem 0.2rem rgba(177,93,63,0.45);
}
.web_process_container .process_item{
	width:15%;
}
.web_works_js{
	background-color: #fff;
}

.web_features{
	width:100%;
	position: relative;
	padding:2rem 0 3rem;
	text-align: center;
	background-color: #fafafa;
}
.features_box{
	width:50%;
	margin:1rem auto;
	display:flex;
	justify-content:space-around;
}
.features_item{
   perspective: 600px;
   -webkit-perspective: 600px;
   -ms-transform: perspective(600px);
   -moz-transform: perspective(600px);
   -moz-transform-style: preserve-3d;
   -ms-transform-style: preserve-3d;
   transform-style: preserve-3d;
   -webkit-transform-style: preserve-3d;
}

.features_item, .features_shuang{
   width: 28rem;
   height:30rem;
}
.features_shuang{
   backface-visibility: hidden;
   transition: all .5s cubic-bezier(.645,.045,.355,1);
   position: absolute;
   text-align: center;
   padding:4rem 1.5rem;
   color:#fff;
}
.features_shuang img{
   width:100%;
   margin:0 auto 3rem;
}
.features_shuang h3{
   font-size: 1.6rem;
}
.features_front{
   background-color: #ec1b45;
}
.features_back{
   background-color: #3e494f;
   transform:rotateY(-180deg);
   
   padding-top:8rem;
}
.features_item:hover .features_front{
   transform: rotateY(180deg);
}
.features_item:hover .features_back{
   transform: rotateY(0deg);
}
.features_back{
   width:100%;
   padding: 10rem 3rem;
   margin:auto;
}
.features_back h3{
   padding-bottom:2rem;
}
.features_back p{
	font-size: 1.2rem;
}

/* -------------it_page-------------- */
.banner_it{
	background-image: url("../images/page_corporateIT.jpg");
}
.subpage_it{
	background-image: url("../images/it__banner2.jpg");
}
.subpage_it .content::before{
	box-shadow:-0.2rem 0 2rem 0.2rem rgba(200,197,104,0.45);
}
.what_service .why_item p{
	font-size: 1.4rem;
}
.what_service .why_item img{
	margin-top:4rem;
}
.it_works_js{
	background-color: #fff;
}
/* ----------------design_page---------------- */

.banner_design{
	background-image: url("../images/page_design.jpg");
}
.subpage_design{
	background-image: url("../images/design_banner2.jpg");
}
.subpage_design .content::before{
	box-shadow:-0.2rem 0 2rem 0.2rem rgba(85,80,188,0.45);
}
.home_works_but{
	bottom:4rem;
}
.it_works_js .more_but{
	bottom: 0;
}
.add_page_work{
	bottom:0;
}

/* ---------------our_works------------------- */
.works_box{
	position: relative;
	width:100%;
	margin:auto;
	margin-top:0;
	display: none;
}
.works_box .container{
	width:100%;
	min-width:100%;
}
.works_box .container .col-lg-3{
	padding:0;
}
.work_node{
	position: relative;
	width:100%;
	background-color:#000;
	overflow: hidden;
}
.work_img{
	position: relative;
	width:100%;
}
.work_txt{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	color:#fff;
	text-align: center;
	padding:3rem 2rem;
	background-color: rgba(0, 0, 0, 0);
	-webkit-transition: all .5s, -webkit-transform .5s;
	transition: all .5s, transform .5s;
}
.work_txt h2{
	font-size: 1.6rem;
	margin-bottom:1rem;
	opacity: 0;
	-webkit-transition: opacity .5s, -webkit-transform .5s;
	transition: opacity .5s, transform .5s;
	-webkit-transform: translate3d(0, -3rem, 0);
	transform: translate3d(0, -3rem, 0);
}
.work_txt .work_content{
	position: relative;
	font-size: 1.2rem;
	line-height:1.4em;
	letter-spacing: 0.05rem;
	opacity: 0;
	-webkit-transition: opacity .5s, -webkit-transform .5s;
	transition: opacity .5s, transform .5s;
	-webkit-transform: translate3d(0, 3rem, 0);
	transform: translate3d(0, 3rem, 0);
	/* text-align:left; */
}
.work_node:hover .work_txt{
	background-color: rgba(30,30,30,.7);
}
.work_node:hover .work_txt .work_content,.work_node:hover .work_txt h2{
	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}


#works_all{
	display: block;
}
.fenye_box{
	position: relative;
	list-style:none;
	padding:3rem 24rem 3rem;
	text-align: left;
	background-color:#ec1b45;
}
.fenye_box li{
	position: relative;
	display: inline-block;
	font-size: 1.5rem;
	margin:0 1rem;
	padding:0.5rem 1rem;
	color:#fff;
	cursor:pointer;
}

.fenye_box li::after,.fenye_box li::before{
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	content: '';
	opacity: 0;
	pointer-events: none;
	-webkit-transition: opacity .35s, -webkit-transform .35s;
	transition: opacity .35s, transform .35s
}
.fenye_box li::before {
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	-webkit-transform: scale(0, 1);
	transform: scale(0, 1);
}
.fenye_box li::after {
	border-right: 1px solid #fff;
	border-left: 1px solid #fff;
	-webkit-transform: scale(1, 0);
	transform: scale(1, 0);
}

.fenye_box li:hover::after,
.fenye_box li:hover::before {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}
li.selected_li::after,
li.selected_li::before{
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}






/* -------20190906 contact-us-------- */
.banner_contact{
	background-image: url("../images/page_contact.jpg");
}

#footer h1{
	font-size: 2.6rem;
	padding-top:5rem;
	padding-bottom:4rem;
}
.contact_content{
	position: relative;
	width:65%;
	padding-bottom:2rem;
	margin:auto;
	display: flex;
	justify-content: space-between;
	z-index: 1000;
}
.contact_item{
	text-align: left;
}
.contact_info{
	padding:6rem 0 0 5rem;
}
.contact_info h2{
	font-size: 2rem;
	margin-bottom:2rem;
	color:#444444;
}
.contact_info p{
	font-size: 1.4rem;
	margin-bottom:0.2rem;
	color:#6a6a6a;
}
.contact_table{
	position: relative;
}
.contact_table table{
	border-collapse: collapse;
}
.contact_table th, .contact_table td{
	border-bottom:0.05rem solid #ec1b45;
	font-size: 1.3rem;
	font-weight: normal;
	text-align: left;
	padding:0.5rem 1.8rem;
}
.username_inp{
	border-right:0.05rem solid #ec1b45;
}
.contact_table td{
	width:45rem;
	height:4.4rem;
}
.toplist td{
	width:23rem;
}
td.content_td{
	height:9rem;
	padding:1rem 1.8rem;
	border:0;
}
.contact_table input,.contact_table textarea{
	width:100%;
	height:100%;
	background-color:transparent;
	outline:none;
	color:#fff;
}
.contact_table textarea{
	height:100%;
	resize : none;
}
td.table_title{
	text-align: center;
	height:5rem;
	line-height: 5rem;
	background-color: transparent;
	color:#fff;
	letter-spacing: 0.1rem;
	font-size: 1.6rem;
	font-weight: 300;
}
td.submit_but{
	border-bottom: transparent;
	text-align: center;
}
.contact_item input,.contact_item textarea{
	width:100%;
	outline:none;
}
.contact_item textarea{
	height:100%;
}
#submit{
	width:32%;
	background-color: #ec1b45;
	color: #fff;
	border-radius: 0.4rem;
	height:3rem;
}
input::-webkit-input-placeholder{
	color:#fff;
}
input::-moz-placeholder{
	color:#fff;
}
input:-moz-placeholder{
	color:#fff;
}
input:-ms-input-placeholder{ 
	color:#fff;
}
textarea::-webkit-input-placeholder{
	color:#fff;
}
textarea::-moz-placeholder{
	color:#fff;
}
textarea:-moz-placeholder{
	color:#fff;
}
textarea:-ms-input-placeholder{ 
	color:#fff;
}


/* ------------報價頁面-app------------- */
.quotation_banner {
	position: relative;
	width:100%;
	height:27rem;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50%;
}
.quotation_banner_app{
	background-image: url("../images/quotation_app.jpg");
}
.quotation_box{
	width:76%;
	margin:auto;
	min-height:50rem;
	display: flex;
	justify-content: space-between;
}
.quotation_txtbox{
	padding-top:5rem;
	padding-left:5rem;
}
.quotation_node{
	display: inline-block;
	position:relative;
	cursor: pointer;
	height:3.6rem;
	width: 12rem;

	transition: all .2s;
}
.quotation_node1{
	border-left:0.1rem solid #bbb;
	overflow:hidden;
	margin-right:-1.2rem;
	width: 13rem;
}
.quotation_node2{
	border:0.1rem solid #bbb;
	transform:skewX(30deg);
	z-index: 10;
}
.quotation_node3{
	border-right:0.1rem solid #bbb;
	overflow: hidden;
	margin-left:-1.2rem;
	width: 15rem;
}
.quotation_node1::before,.quotation_node3::before{
	content:'';
	position:absolute;
	top:0;bottom:0;
	border:0.1rem solid #bbb;
	transform:skewX(30deg);
}
.quotation_node1::before{
	right:0;
	width: 13rem;
	transform-origin:0 100%;
}
.quotation_node3::before{
	left:0;
	width: 15rem;
	transform-origin:0 0%;
}

.quotation_mulu span{
	position: absolute;
	font-size: 1.6rem;
	line-height: 3.6rem;
	z-index: 999;
	margin-left:2rem;
}
.quotation_node2 span{
	line-height: 3.6rem;
	position: absolute;
	transform:skewX(-30deg);
	margin-left:2.7rem;
}
.quotation_node3 span{
	margin-left:3.2rem;
}

.quotation_selected1,.quotation_node1:hover{
	border-left:0.1rem solid #ec1b45;
	color:#fff;
} 
.quotation_selected1::before,.quotation_node1:hover::before{
	background-color:#ec1b45;
	border:0.1rem solid #ec1b45;
}
.quotation_selected2,.quotation_node2:hover{
	border:0.1rem solid #ec1b45;
	background-color:#ec1b45;
	color:#fff;
} 
.quotation_selected3,.quotation_node3:hover{
	border-right:0.1rem solid #ec1b45;
	color:#fff;
}
.quotation_selected3::before,.quotation_node3:hover::before{
	background-color:#ec1b45;
	border:0.1rem solid #ec1b45;
}

.quotation_txt h1{
	position: relative;
	font-size: 2.4rem;
	font-weight: bold;
	letter-spacing: 0.1rem;
	line-height: 5.5rem;
	margin:4rem 0 3rem;
}
.quotation_txt h1::before{
	position: absolute;
	width:2rem;height:100%;top:0;left:-0.5rem;
	content:"";
	background-color:rgba(236,27,69,.5);
	transform:skewX(-18deg);
	z-index: -1;
}
.quotation_txt p{
	width:38.4rem;
	font-size: 1.4rem;
	margin:2rem 0;
}
.quotation_selected1 a , .quotation_selected2 a , .quotation_selected3 a , .quotation_node:hover a{
	color:#fff;
}


.quotation_formbox{
	position: relative;
	width:42rem;
	min-height:32rem;
	border-radius: 0.4rem;
	border:0.1rem solid #ec1b45;
	top:-5.1rem;
}
.quotation_formbox h2{
	position: relative;
	font-size: 1.5rem;
	letter-spacing: 0.1rem;
	background-color:#ec1b45;
	color:#fff;
	height:5rem;
	line-height: 5rem;
	text-align: center;
	border-top-left-radius: 0.4rem;
	border-top-right-radius: 0.4rem;
}

.quotation_form{
	width:86%;
	margin:auto;
	padding:4rem 0 2rem;

	display: none;
}
.jindu{
	position: relative;
	width:100%;
	height:0.4rem;
	background-color: #ddd;
}
.jindu span{
	position: absolute;
	font-size: 1.2rem;
	top:-2rem;
}
.jindu_1{
	position: absolute;
	top:0;left:0;
	width:10%;
	height:100%;
	content: "";
	background-color: #ec1b45;
}
.quotation_form h3{
	font-size: 1.5rem;
	padding:2rem 0 1.5rem;
}
.bj_item{
	width:100%;
	display: flex;
	justify-content: space-between;
	flex-flow: row wrap;
}   
.option_item{
	width: 11rem;
	height: 2.8rem;
	font-size: 1.2rem;
	line-height:2.8rem;
	display: inline-block;
	box-shadow: 0 0 0 0.1rem #aaaaaa;
	border-radius: 11rem;
	margin-bottom:1.6rem;
	text-align: center;
	cursor: pointer;
	box-sizing: border-box;
	font-weight: 500;
}
.option_item input{
	display:none;opacity:0;
}
.option_item label{
	margin:auto;
	cursor: pointer;
	width: 100%;
}
.option_item_other{
	width:100%;
	height:12rem;
	text-align: left;
	border-radius: 1rem;
	padding:1.2rem 1.5rem 1rem;
	font-size: 1.2rem;
}
.option_item_other p{
	line-height: 1em;
	margin-bottom:0.5rem;
}
.option_item_other textarea{
	width:100%;
	height:78%;
	resize: none;
	padding: 1rem;
	line-height: 1.2em;
}

.but_box{
	width:100%;
	text-align: center;
	margin-top:2rem;
}  
.but_box button{
	font-size: 1.3rem;
	width:38%;
	height:3rem;
	line-height:3rem;
	margin:0 3%;
	border-radius: 0.3rem;
	border:0.1rem solid #ec1b45;
	background-color: transparent;
	color:#fff;
}
.but_box .next_but{
	background-color: #ec1b45;
}

.big_option_item{
	width:100%;
}

.quotation_contact{
	width:100%;
	padding-left:2.4rem;
}
.lx_node{
	margin-bottom:2rem;
	font-size: 1.3rem;
	color:#fff;
}
.lx_node p{
	margin-bottom:0.5rem;
}
.lx_node input,.quotation_contact textarea{
	width:100%;
	border:0.1rem solid #bbb;
	padding:0.6rem;
	border-radius: 0.2rem;
	font-size: 1.2rem;
}
.lx_node input{
	height:3.4rem;
}
.quotation_contact textarea{
	height:20rem;
	resize: none;
	margin-bottom:2rem;
}
.lx_node input:focus,.quotation_contact textarea:focus{
	border:0.1rem solid #ec1b45;
}

.quotation_form input::-webkit-input-placeholder{
	color:#bbb;
}
.quotation_form input::-moz-placeholder{
	color:#bbb;
}
.quotation_form input:-moz-placeholder{
	color:#bbb;
}
.quotation_form input:-ms-input-placeholder{ 
	color:#bbb;
}
.quotation_form textarea::-webkit-input-placeholder{
	color:#bbb;
}
.quotation_form textarea::-moz-placeholder{
	color:#bbb;
}
.quotation_form textarea:-moz-placeholder{
	color:#bbb;
}
.quotation_form textarea:-ms-input-placeholder{ 
	color:#bbb;
}
.quotation_submit{
	width:100%;
	text-align: center;
	padding:6rem 0;
	color:#fff;
}
.quotation_submit img{
	width:34%;
	margin-bottom: 2rem;
}
.quotation_submit p{
	font-size: 1.4rem;
}
p.success_submit{
    font-size: 1.8rem;
    color: #ec1b45;
	height: 17rem;
	padding-top:8rem;
    font-weight: bold;
    letter-spacing: 0.2rem;
}


/* 网页报价 */
.quotation_banner_web{
	background-image: url("../images/quotation_web.jpg");
}
.quotation_banner_design{
	background-image: url("../images/quotation_design.jpg");
}

/* 影片背景 */

.banner_bgbox{
	overflow: hidden;
}
.banner_bgbox video{
	position: absolute; 
	min-width: auto; min-height: auto; 
	width: 100%; height: auto; 
	left: 50%; top: 50%; 
	transition-duration: 500ms;
}
.banner_bgbox h1{
	position: absolute;
	z-index: 9999;
}
.video_home,.video_contact{
	background-color: #000000;
}
.video_home video{
	transform: translate(-50%, -56%); 
	opacity: 0;
}
.video_contact video{
	transform: translate(-50%, -54%); 
}
.video_contact{
	height:21rem;
}
.video_contact h1{
    font-size: 5rem;
    font-weight: bold;
	color:#ec1b45;
	line-height: 1em;
}

/* 版面换色 */

.server_item h2,.server_item p,.content_title,.server_item button,.process_item h3,.process_item p,.quotation_mulu span,.quotation_txt h1,.quotation_txt p,.jindu span,.quotation_form h3,.option_item,.contact_info h2,.contact_info p{
	color: #fff;
}
.server_item button,.home_works,.why_box,.works_js,.web_features{
	background-color:transparent;
}
.client_item,.contact_table table{
	background-color: #fff;
}
.more_but{
	border:0.05rem solid #ec1b45;
	color: #fff;
}


.selected_option_bj{
	box-shadow: 0 0 0 0.1rem #ec1b45;
	color:#ec1b45;
	font-weight: 500;
}
.h_font_mo{
	display: none;
}
.home_client_but{
	bottom:-2rem;
}
.play_pause{
	height:1.8rem;
}
.mo_audio,.mo_quote_text{
	display: none;
}
.mulu_icon li:first-child{
	padding:0;
}


/*添加淡入淡出的css*/
#banner_carousel .carousel-inner .carousel-item{ 
	opacity:0; 
	-webkit-transition-property:opacity;
	-moz-transition-property:opacity ; 
	-ms-transition-property:opacity;
	-o-transition-property:opacity;
	transition-property:opacity ;

	transition-duration: .1s;
	-moz-transition-duration: .1s; /* Firefox 4 */
	-webkit-transition-duration: .1s; /* Safari and Chrome */
	-o-transition-duration: .1s; /* Opera */
}
#banner_carousel .carousel-inner .active{ opacity: 1;}
#banner_carousel .carousel-inner .active.left,#banner_carousel .carousel-inner .active.right{left: 0;opacity: 0;}
#banner_carousel .carousel-inner .next.left,#banner_carousel .carousel-inner .prev.right {opacity: 1;}


.index_page{
	/* background-image: url("../images/4.jpg");
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: 100% 23%; */
}
#home_services{
	background-image: url("../images/4.jpg");
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: 100% 23%;
}
.app_page{
	background-image: url("../images/1.jpg");
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: 160% 66%;
}
.web_page{
	background-image: url("../images/3.jpg");
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: 100% 81%;
}
.it_page{
	background-image: url("../images/1.jpg");
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: 100% 92%;
}
.graphic_page{
	background-image: url("../images/2.jpg");
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: 100% 70%;
}

.app_quote{
	background-image: url("../images/2.jpg");
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: 100% 70%;
}
.web_quote{
	background-image: url("../images/4.jpg");
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: 100% 70%;
}
.design_quote{
	background-image: url("../images/5.jpg");
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: 100% 70%;
}
.contact_page{
	background-image: url("../images/4.jpg");
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: 100% 70%;
}




.contact_table{
	margin-top:3rem;
	left:50%;
	transform: translate(-50%,0); 
	padding-bottom:3rem;
	z-index: 9988;
}
.contact_table table{
	position: relative;
	left:50%;
	background-color: transparent;
}


.contact_box{
	color:#fff;
	padding:7rem 0 3rem;
}
.contact_box h2{
	font-size: 2.5rem;
	letter-spacing: 0.1rem;
	padding-bottom:3rem;
}
.contact_item img{
	display: block;
	width:4rem;
}
.contact_item h3{
	font-size: 1.6rem;
	padding:1.2rem 0 0.8rem;
	font-weight: 500;
}
.contact_item p{
	font-size: 1.3rem;
}

.contact_box{
	position: absolute;
	top:10rem;
	left:17rem;
	padding:0;
}
.contact_box p{
	font-size: 1.3rem;
	margin-bottom: 0.5rem;
}
.video_contact h2{
	position: relative;
    font-size: 4.8rem;
    font-weight: bold;
	color:#ec1b45;
	top:21rem;
	left:11rem;
	font-family: "VERDANAZ";
}
.video_contact h2 img{
	height:12rem;
}
.add_tips{
	color:#fff;
	font-size: 1.4rem;
}

/* 20210223 */
.description_box{
	position: relative;
	top: -3rem;
	color: #fff;
	width: 55%;
	margin: auto;
	text-align: justify;
}
.description_box p{
	font-size: 1.2rem;
	margin: 0.5rem auto;
}




@media screen and (min-width: 1400px){
	html{
		font-size: 11px;
	}
}
@media screen and (min-width: 1500px){
	html{
		font-size: 13px;
	}
}
@media screen and (min-width: 1750px){
	html{
		font-size: 15px;
	}
}
@media screen and (min-width: 2000px){
	html{
		font-size: 20px;
	}
}



@media screen and (max-width: 1180px) {
	html{
		font-size: 9px;
	}
}
@media screen and (max-width: 1100px) {
	html{
		font-size: 8px;
	}
}










@media screen and (max-width: 700px) {
	html{
		font-size: 10px;
	}
	.menu_bg,.mulu_box,.carousel-indicators,#maogy,#banner_carousel a{
		display: none;
	}
	#mobile_menu{
		display: block;
		width:100%;
	}
	#navshuo{
		position: fixed;
		top:0;
		left:0px;
		width:100%;
		height:6rem;
		background-color: #000;	
		z-index: 9999;
	}
	.mo_menu{
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width:96%;
		height:100%;
		margin:auto;
	}
	.mo_logo{
		text-align: center;
	}
	.mo_lang{
		text-align: right;
	}
	.menu_item{
		position: relative;
		height:100%;
		align-self: center;
	}
	.menu_item img{
		position: relative;
		height:3rem;
		top:1.5rem;
	}
	
	.mo_logo img{
		position: relative;
		height:3.6rem;
		top:1.2rem;
	}
	.fontshou{
		display: none;
		background-color: rgba(0,0,0,0.6);
		width:38%;
		padding:1rem 0rem;
	}
	.mobilenav2,.mo_quotation_menu{
		display: none;
		position: fixed;
		left:38%;
		top:60px;
		background-color:rgba(0,0,0,0.6);
		width:38%;
		padding:1rem 0rem;
	}
	.fontshou p,.mobilenav2 p,.mo_quotation_menu p{
		font-size: 1.6rem;
		color:#ffffff;
		padding:0.7rem 0rem;
		padding-left:2rem;	
	}
	.fontshou a{
		text-decoration: none;
	}
	
	/* --轮播-- */
	#banner_carousel{
		width:100% !important;
		height: 23rem !important;
		margin-top:6rem;
		background-color: transparent;
	}
	.txt_framel {
		left: 0%;
		top: 36rem;
		width: 100%;
        padding: 0rem;
		padding-left: 2rem;
	}
	.txt_framel h2{
		font-size: 2.5rem;
	}
	.txt_framel p{
		width: 100%;
		font-size: 1.5rem;
	}

	.content_title {
		margin: 4rem auto 4rem;
		letter-spacing: 0.1rem;
		font-size: 2.2rem;
		line-height: 4rem;
	}
	.content_title::before{
		left:-0.8rem;
	}
	#home_services{
		padding:0 0 5rem;
	}
	.server_box{
		flex-wrap: wrap;
		margin-top:1rem;
	}
	.server_item{
		position: relative;
		width:100%;
		margin-bottom:3rem;
	}
	.server_item h2 {
		font-size: 1.7rem;
		margin: 1.5rem 0 1rem;
	}
	.server_item button{
		margin-top:1rem;
		border:0.1rem solid #ec1b45;
	}
	#home_about {
		padding: 0;
		text-align: left;
		background-position: 0% 50%;
		margin-bottom: 15rem;
		height: 23rem;
	}
	.about_txt{
		width:100%;
		padding:1rem 1.5rem 1rem;
		top:23rem;
		text-align: justify;
		background-color: transparent;
	}
	#home_about h1 {
		bottom: 3rem;
		left: auto;
		right: 2rem;
		font-size: 8rem;
		line-height: 0.8em;
	}
	/* -我们的客户- */
	.client_box{
		width:98%;
	}
	.client_item{
		width:48%;
	}
	.client_img{
		padding:3.5rem 0;
	}
	.client_item h2{
		font-size: 1.4rem;
		font-weight: 300;
	}
	.client_item p {
		width: 90%;
		margin: auto;
		font-weight: 300;
	}
	#home_client{
		margin-bottom: 1rem;
	}
	.home_works_item{
		width:100%;
	}

	.footer_txt{
		flex-wrap: wrap;
	}
	.foot_logo{
		width:100%;
		text-align: left;
		height: 20rem;
	}
	.foot_logo img{
		width: 26%;
		top: 7rem;
		right: auto;
		left: 8%;
	}
	.first_ul{
		width:100%;
	}
	.footer{
		padding:3rem 0 0;
	}
	.first_ul li{
		display: none;
	}
	.first_ul li.foot_img{
		display: block;
		position: absolute;
		top: -20rem;
		right: 5%;
		font-size: 1.8rem;
	}
	.foot_img img{
		width:20rem;
	}
	
	/* 我們的服務-子頁面 */
	.banner_bgbox {
		background-position: 10% 50%;
		height: 22rem;
		top:6rem;
	}
	.banner_bgbox h1 {
		font-size: 3rem;
		letter-spacing: 0.1rem;
		top: 6rem;
		left: 5rem;
	}
	.video_contact h1{
		top:11rem;
	}
	
	.subpage_info{
		background-position: 80% 50%;
		margin:12rem 0 0rem;
		height:auto;
		background-image:none;
		top:0;
	}
	.page_ico {
		position: relative;
		top:0;
		left:50%;
		transform: translate(-50%,0); 
	}
	.page_ico h2,.content_txt p{
		color:#fff;
	}
	.diamond_box{
		width:100%;
		top:0;
		height:auto;
		padding-top:3rem;
	}
	.content{
		font-size: 1.4rem;
		padding: 0 1.5rem;
	}
	.content::before {
		transform: skewX(0deg);
	}
	.shape-left {
		width: 11rem;
	}
	.shape-right{
		width:11rem;
	}
	.content_txt p{
		margin-bottom:1rem;
	}

	.why_container{
		width:92%;
	}
	.why_item{
		width:46%;
		height:18rem;
		margin:2.3% 2%;
	}
	.why_app .why_item{
		height:auto;
	}
	.why_item img {
		height: 5rem;
		margin: 1rem 0 1.5rem;
	}
	.why_item p{
		font-size: 1.2rem;
	}
	.process_line {
		display: none;
	}
	.step_img_p{
		width:9rem;
		height:9rem;
	}
	.step_img_p img {
		height: 6.5rem;
		margin-top: 1.2rem;
	}
	.step_img_p span {
		font-size: 6rem;
		line-height: 9rem;
	}
	.process_item h3{
		font-size: 1.6rem;
	}
	.process_item p{
		font-size: 1.4rem;
	}

	.process_container,.features_box,.contact_content{
		flex-wrap: wrap;
	}
	.process_item,.web_process_container .process_item{
		width:100%;
		margin-bottom:1.5rem;
	}
	.features_box{
		width:100%;
	}
	.features_item, .features_shuang {
		width: 26rem;
		height: 28rem;
		margin-bottom: 1.5rem;
		/* padding-top:3rem; */
	}
	.web_features{
		padding-bottom: 1rem;
	}
	.features_back{
		padding-top:9rem;
	}
	.why_item{
		background-color: #fff;
	}
	.what_service .why_item img {
		margin-top: 2.5rem;
	}
	/* 过往案例 */
	.fenye_box {
		position: relative;
		list-style: none;
		padding: 10rem 1rem 4rem;
	}
	.fenye_box li{
		margin:0 0.5rem;
	}
	.contact_info{    
		width: 100%;
		padding:0;
		margin-bottom: 2rem;
	}
	.contact_info h2{
		text-align: center;
		margin-bottom: 1rem;
	}
	.contact_info p{
		font-size: 1.35rem;
	}
	.contact_table td {
		height: 3.6rem;
	}
	td.content_td{
		height:8rem;
	}
	.contact_table th, .contact_table td{
		font-size: 1.2rem;
	}
	.submit_but input,.contact_table .table_title{
		font-size: 1.4rem;
	}
	.contact_table .table_title{
		line-height: 3em;
		padding-bottom:0.2rem;
	}

	/* 报价页面 */
	.quotation_banner{
		margin-top: 6rem;
		height: 11rem;
	}
	.quotation_box{
		width:100%;
		flex-wrap: wrap;
		padding-bottom:2rem;
	}
	.quotation_txtbox{
		width: 100%;
		padding: 4rem 1.5rem 2rem;
		text-align: center;
	}
	.quotation_txt{
		text-align: left;
	}
	.quotation_node{
		width:33%;
		text-align: left;
	}
	.quotation_node1{
		width:34%;
	}
	.quotation_node3{
		width:37%;
	}
	.quotation_txt p{
		width:100%;
	}
	.quotation_mulu span{
		font-size: 1.5rem;
	}
	.quotation_node2 span {
		line-height: 3.3rem;
	}
	.quotation_txt h1{
		margin: 2rem 0 1rem;
		text-align:center;
	}
	.quotation_txt h1::before{
		left:auto;
	}

	.quotation_formbox{
		width: 92vw;
		margin: 0 4vw;
		top:0;
	}
	.quotation_form {
		width:88%;
	}
	.bj_item{
		justify-content: space-between;
	}
	.option_item{
		width:47.5%;
	}
	.option_item_other{
		width:100%;
	}
	.big_option_item{
		width:100%;
	}
	
	/* mobile 服务子页 */
	.shape-left,.shape-right{
		display: none;
	}
	.content::before{
		width:0;
		height:0;
	}
	.content::before{
		border:0;
	}

	.more_but{
		border:0.1rem solid #ec1b45;
	}







	
	/* 影片背景 */

	.video_home,.video_contact{
		background-color: #fff;
	}
	.video_home{
		position: relative;
		background-position: 50%;
		background-repeat: no-repeat;
		background-size:cover;
	}
	/* .video_home1{
		background-image: url("../images/home1.jpg");
	}
	.video_home2{
		background-image: url("../images/home2.jpg");
	}
	.video_home3{
		background-image: url("../images/home3.jpg");
	} */
	.video_contact{
		/* background-image: url("../images/video_contact.jpg"); */
		top:6rem;
	}

    .video_home video{
        transform: translate(-50%, -56%);
    }
    div.video_contact{
		height:21rem !important;
		background-color: #000;
	}
	.banner_bgbox video{
		/* display: none; */
		background-color: #000000;
	}
	/* 手机播放video时 */
	#homeVideo2{
		transform: translate(-50%, -58.3%);
	}
	/* 跳转-报价页 */
	.quotation_fixed::after{
		width:0;height:0;
	}
	.quotation_fixed{
		display: block;
		width:6.4rem;
		height:6.4rem;
		border-radius: 50%;
		background-color: #ec1b45;
		text-align: center;
		padding:0;    
		right: 2rem;
		bottom: 9vh;
		box-shadow:0 0 1rem 0.2rem rgba(236,27,69,0.5);
		z-index: 9989;
	}
	.quotation_fixed img{
		width:3rem;
		height:auto;
		padding-top:0.8rem;
		padding-bottom:0.1rem;
		margin:0;
	}
	.quotation_fixed p{
		font-size: 1.1rem;
		line-height: 1em;
	}
	.video_home{
		top:0;
		background-color: #000;
	}

	.h_font_pc{
		display: none;
	}
	.h_font_mo{
		display: block;
	}
	.mo_audio{
		display: block;
		position: fixed;
		width: 5rem;
		bottom: auto;
		right: 6.2rem;
		top: 2.1rem;
		z-index: 10000;
	}
	.mo_audio img{
		width:100%;
	}


	#banner_carousel{
		height:93vh !important;
		z-index: 7777;
	}
	.carousel-item{
		overflow: hidden;
	}
	.video_home{
		overflow: hidden;
		height:94vh;
		width:200vh;
		transform: translate(-36%, 0%);
	}
	div.video_contact{
		overflow: hidden;
		height:93vh !important;
		z-index: 7777;
	}
	.video_contact video{
		overflow: hidden;
		height:94vh;
		width:200vh;
		transform: translate(-50%, -50%);
	}
	/* 报价 - 改 */
	.quotation_txt p{
		display: none;
	}
	.mo_quote_text{
		display: block;
		width:92%;
		margin:auto;
	}
	.mo_quote_text h1{
		display: none;
	}
	.mo_quote_text p{
		display: block;
	}

	/* 聯絡我們 - 改 */
	.contact_box{
		position: relative;
		padding-top:5rem;
		top:0;
		left:0;
		width:100%;
		text-align: center;
		padding-bottom:7rem;
	}
	.contact_box h2{
		padding-bottom:3rem;
	}
	.contact_item{
		width:100%;
		text-align: center;
		margin-bottom: 3rem;
	}
	.contact_item img{
		text-align: center;
		margin:auto;
	}
	.contact_item p{
		font-size: 1.4rem;
	}
	.contact_content{
		width:90%;
		margin-top: 0;
	}
	.contact_table{
		width:90%;
		top:4rem;
		z-index: 8888;
		left:50%;
		transform: translate(-50%,0%); 
	}
	.contact_table table{
		left:50%;
		transform: translate(-50%,0%); 
	}
	.graphic_page,.index_page,.app_page,.web_page,.it_page,.app_quote,.web_quote,.design_quote,#home_services,.contact_page{
		background-image: none;
	}
	#home_about::before{
		background-size: 140%;
	}
	.video_contact h2 {
		font-size: 2.5rem;
		top: 36rem;
		left: 2rem;
	}

	.txt_framel h2 img{
		height:8.5rem;
	}
	.video_contact h2 img{
		height:9rem;
	}
	#home_about h1 img{
		width:20rem;
	}

	.work_txt h2{
		font-size: 1.8rem;
	}
	.work_txt .work_content{
		font-size: 1.3rem;
	}

	.description_box{
		width: 92%;
	}
	.description_box p{
		font-size: 1.4rem;
	}
	

}

@media screen and (max-width: 376px){
	#home_about h1 {
		bottom: 4rem;
	}
    div.video_contact{
        height:19rem;
	}
	.video_contact{
		top: 5rem;
	}
	/* 手机播放video时 */
	#homeVideo2{
		transform: translate(-50%, -59%);
	}

	.menu_item img{
		height:2.4rem;
	}
	.mo_logo img{
		height:3.4rem;
	}
	.mo_audio {
		width: 4.5rem;
		right: 5rem;
		top:1.8rem;
	}
	
/*添加淡入淡出的css*/
#banner_carousel .carousel-inner .carousel-item{ 
	opacity:0; 
	-webkit-transition-property:opacity;
	-moz-transition-property:opacity ; 
	-ms-transition-property:opacity;
	-o-transition-property:opacity;
	transition-property:opacity ;

	transition-duration: .4s;
	-moz-transition-duration: .4s; /* Firefox 4 */
	-webkit-transition-duration: .4s; /* Safari and Chrome */
	-o-transition-duration: .4s; /* Opera */
}
#banner_carousel .carousel-inner .active{ opacity: 1;}
#banner_carousel .carousel-inner .active.left,#banner_carousel .carousel-inner .active.right{left: 0;opacity: 0;}
#banner_carousel .carousel-inner .next.left,#banner_carousel .carousel-inner .prev.right {opacity: 1;}
	
	#home_about{
		height:20rem;
	}
	.about_txt{
		top:20.5rem;
	}
	.txt_framel{
		top:35rem;
	}
	#home_about h1{
		font-size: 7rem;
	}
	.txt_framel h2 img{
		height:7.5rem;
	}
	.video_contact h2 img{
		height:8rem;
	}

}
@media screen and (max-width: 361px) {
    div.video_contact{
        height:18rem;
	}
	.video_contact {
		top: 4rem;
	}
	.video_home {
		top: -2px;
	}
	.video_home video{
		transform: translate(-50%, -57%);
		
	}
	/* .video_contact video {
		transform: translate(-50%, -52%);
	} */
	div.video_contact {
		height: 96vh !important;
	}
	#banner_carousel {
		height: 92vh !important;
	}
	.txt_framel{
		width:95%;
		top:34rem;
	}
	.mo_audio{
		top:1.75rem;
	}
}



.client_item_zw{
	height:0;padding: 0;margin: 0;bottom: 0;opacity: 0;
}
.active_show{
	display: block;
}
.hide_option_item{
	height:0;
	border:0;
	opacity: 0;
}