@charset "utf-8";
/* 登陆及客户展示 */
#ULoading { width:280px; height:auto; padding-top:0; position:fixed!important; top:0; right:0; background:rgba(0,0,0,.5); z-index:88; }
#ULoading i.icon { position:absolute; margin-top:-21px; right:15px; }
#ULoading:hover { background-color:rgba(0,100,180,.8); }
#ULoading.Open { display:block; top:0; color:#FFF; }

#ULoading div.Loading { width:90%; height:100%; padding:98px 5% 32px; color:#FFF; }
#ULoading div.Loading p { width:100%; height:58px; font:normal normal 12pt/32px "微软雅黑", "宋体"; text-align:center; letter-spacing:8px; }
#ULoading div.Loading p.Title { text-align:left; letter-spacing:0px; }
#ULoading div.Loading p span { font:normal normal 12px/35px "微软雅黑", "宋体"; letter-spacing:0; padding-left:20px; }


#ULoading input { width:66%; height:22px; font:normal normal 12pt/22px "微软雅黑", "宋体"; color:#CCC; border:0; margin:3px .5%; padding:5px 3%; }
#ULoading input.Submit { width:25%; height:70px; background:#FFF; font-size:12pt; line-height:66px; float:right; color:#333; }
#ULoading input:hover.Submit { background:rgba(255,255,255,1); }

#ULoading label { width:39px; height:39px; text-align:center; padding:15px 6%; border:1px solid #FFF; border-radius:5px; margin:5px 2.5%; }
#ULoading label,#ULoading label a { font:normal normal 12pt/22px "微软雅黑", "宋体"; color:#FFF; }
#ULoading label:hover { border:1px solid rgba(255,255,255,1); background:rgba(255,255,255,1); }
#ULoading input:hover.Submit,#ULoading label:hover a { font-weight:bold; color:rgba(0,100,180,.8); }

#ULoading ul { width:100%; height:48px; text-align:center; font:normal normal 9pt/28px "微软雅黑", "宋体"; color:#FFF; }
#ULoading ol { width:100%; height:65px; text-align:center; font:normal bold 39pt/38px Arial,Helvetica; margin:32px auto 0; }
#ULoading ol li { width:100%; height:58px; text-align:center; font:normal bold 39pt/38px Arial,Helvetica; border-bottom:1px solid #CCC; }
#ULoading ol span { font:normal normal 11pt/32px "微软雅黑", "宋体"; padding:0 12px; }



/* 数字滚动插件CSS */
.mt-number { font-family:Arial; font-size:39pt; line-height:50px; height:50px; display:inline-block; position:relative; }
.mt-number .mt-number-dot { width:20px; line-height:50px; float:left; text-align: center;}
.mt-number .mt-number-dom { width:32px; text-align: center; float: left; position: relative; top: 0;}
.mt-number .mt-number-dom .mt-number-font{ width:100%; float: left;}


/* 会员在线注册样式 */
#QQloading { width:1280px; height:auto; position:relative; padding:10px 30px; margin:10px auto; }
#QQloading { background:rgba(255,255,255,.3) url(/DATA/Images/WAE.png) no-repeat right bottom; transition:.5s ease; }
#QQloading:hover { background-color:rgba(255,255,255,1); border-radius:8px; transition:.5s ease; }

#QQloading.Null { display:none; height:0; margin:0; padding:0; }

#QQloading span { color:#AAA; padding-left:5px; }
#QQloading label { height:22px; margin-right:5px; line-height:2; }
#QQloading label.Title { width:88px; text-align:right; }


#QQloading ul.Left { width:100%; margin-top:32px; }
#QQloading ul.Left dl { width:75%; height:auto; float:left; }
#QQloading ul.Left dl dt,#QQloading ul.Left dl dd { width:100%; float:left; }
#QQloading ul.Left img.QQICO { width:70px; height:70px; background-color:#FFF; border-radius:35px; float:left; margin:8px 38px; }

#QQloading ul.Left label { width:110px; height:26px; color:#AAA; text-align:center; margin-top:12px; margin-right:16px; }
#QQloading ul.Left label:hover { background-color:#1A407F; color:#FFF; border-radius:21px; }


#QQloading div#AEteam { width:210px; height:660px; position:absolute; top:20px; right:10px; }
#QQloading div#AEteam li { width:auto; height:auto; float:left; }
#QQloading div#AEteam li p { font:normal normal 11pt/20px "微软雅黑", "宋体"; }
#QQloading div#AEteam li input { width:16px; height:16px; margin:5px; margin-right:8px; }
#QQloading div#AEteam li img.Team { width:158px; height:180px; padding:2%; }
#QQloading div#AEteam.Null { width:0; height:0; }

#QQloading div#ONE_Stop,#QQloading div#ONE_Rules { width:32%; min-height:580px; box-sizing:border-box; float:left; }
#QQloading div.Form_Remarks,#QQloading div.Form_Register { width:68%; box-sizing:border-box; float:right; }

#ONE_Rules { width:100%; max-height:700px; position:relative; float:left; }
#ONE_Rules div.Mosaicbox { width:5px; height:100%; position:absolute; right:0; z-index:900; }
#ONE_Rules div.track { width:95%; height:650px; position:relative; background:rgba(0,0,0,0.3); }
#ONE_Rules div.thumb { width:95%; height:10px; cursor:pointer; position:absolute; top:0; background:#FFF; }

#ONE_Rules div.viewport { width:97%; height:100%; position:relative; }
#ONE_Rules div.overview { width:97%; height:auto; font:normal normal 9pt/18px "宋体"; padding:12px 0 38px; }


#QQloading dl div.Submit,#QQloading dl div.Remarks { width:100%; height:auto; margin-top:18px; clear:both; }
#QQloading dl div.Remarks { padding-top:8px; }
#QQloading dl div.Remarks p { width:100%; }

#QQloading dl.Regedit { width:100%; min-height:198px; box-sizing:border-box; padding:32px 2.5%; position:relative; }
#QQloading dl.Regedit i.icon { width:52px; height:28px; font-size:20px; line-height:1.5; text-align:center; float:left; }
#QQloading dl dt,#QQloading dl dd { width:58%; height:auto; line-height:28px; margin-top:12px; margin-left:0; clear:both; }

#QQloading dl dd select { width:88px; height:28px; float:left; margin-top:3px; margin-right:5px;}
#QQloading dl dd input { width:320px; height:20px; line-height:20px; background-color:transparent; border:0; border-bottom:1px solid #666; padding:5px; }
#QQloading input[type="checkbox"],#QQloading input[type="radio"] { width:18px; height:18px; margin:5px 15px auto; box-sizing:border-box; }

#QQloading dl textarea { width:600px; min-height:118px; background-color:transparent; padding:15px; margin-top:18px; clear:both; }
#QQloading dl input.Submit { width:100%; min-height:32px; font-size:12pt; line-height:3; color:#FFF; background-color:#06A; border:0; transition:.5s ease; }
#QQloading dl input.Submit:hover { color:#FFF; transition:.5s ease; }

#QQloading dl dt label { width:120px; height:50px; font:normal normal 10pt/38px "微软雅黑", "宋体"; color:#999; margin-top:38px; margin-left:32px; }
#QQloading dl dt label.Submit { width:auto; height:38px; padding:0 35px; margin-top:18px; margin-left:92px; transition:.5 ease; }
#QQloading dl dt label:hover.Submit { background-color:#1A407F; color:#FFF; border-radius:19px; transition:.5s ease; }


#QQloading h3.Title { height:58px; text-indent:20px; }
#QQloading h3.Title font,#QQloading dl.Regedit span { height:32px; font:normal normal 9pt/32px "宋体"; color:#333; }


#QQloading div.Cultures { min-height:198px; }
#QQloading div.Cultures h1.Title { height:58px; font:normal normal 15pt/52px "微软雅黑", "宋体"; color:#333; }
#QQloading div.Cultures ol { width:180px; height:158px; background-color:rgba(255,255,255,.2); padding:35px 28px 152px; margin-right:15px; transition:500ms ease; -o-transition:500ms ease; }
#QQloading div.Cultures ol:hover { background:rgba(255,255,255,.6); border-radius:12px; transition:500ms ease; -o-transition:500ms ease; }
#QQloading div.Cultures ol img { width:150px; height:150px; padding:15px; }



#Protocol { width:18%; min-width:328px; height:435px; margin-top:0; margin-left:32px; float:left; }
#Protocol div.Mosaicbox { width:5px; height:100%; position:absolute; margin-left:328px; z-index:900; }
#Protocol div.track { width:100%; height:100%; position:relative; background:rgba(0,0,0,0.3); }
#Protocol div.thumb { width:100%; height:10px; cursor:pointer; position:absolute; top:0; background:#FFF; }

#Protocol div.viewport { width:320px; height:435px; position:relative; }
#Protocol div.overview { width:320px; height:auto; font:normal normal 9pt/18px "宋体"; padding:12px 0 38px; position:absolute; left:0; top:0; }




#MainBody ul.Left { width:310px; height:auto; padding-right:8px; float:left; }
#MainBody dl dt,#MainBody dl dd { width:100%; height:auto; line-height:28px; margin-top:3px; margin-left:0; }


/* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
.flip {
	-webkit-backface-visibility: hidden;
	-webkit-transform: translateX(0);
	backface-visibility: hidden;
	transform: translateX(0);
}
.flip.out {
	-webkit-transform: rotateY(-90deg) scale(.9);
	-webkit-animation-name: flipouttoleft;
	-webkit-animation-duration: 175ms;
	transform: rotateY(-90deg) scale(.9);
	animation-name: flipouttoleft;
	animation-duration: 175ms;
}
.flip.in {
	-webkit-animation-name: flipintoright;
	-webkit-animation-duration: 225ms;
	animation-name: flipintoright;
	animation-duration: 225ms;
}
.flip.out.reverse {
	-webkit-transform: rotateY(90deg) scale(.9);
	-webkit-animation-name: flipouttoright;
	transform: rotateY(90deg) scale(.9);
	animation-name: flipouttoright;
}
.flip.in.reverse {
	-webkit-animation-name: flipintoleft;
	animation-name: flipintoleft;
}


@-webkit-keyframes flipouttoleft {
    from { -webkit-transform: rotateY(0); }
    to { -webkit-transform: rotateY(-90deg) scale(.9); }
}
@keyframes flipouttoleft {
    from { transform: rotateY(0); }
    to { transform: rotateY(-90deg) scale(.9); }
}
@-webkit-keyframes flipouttoright {
    from { -webkit-transform: rotateY(0) ; }
    to { -webkit-transform: rotateY(90deg) scale(.9); }
}
@keyframes flipouttoright {
    from { transform: rotateY(0); }
    to { transform: rotateY(90deg) scale(.9); }
}
@-webkit-keyframes flipintoleft {
    from { -webkit-transform: rotateY(-90deg) scale(.9); }
    to { -webkit-transform: rotateY(0); }
}
@keyframes flipintoleft {
    from { transform: rotateY(-90deg) scale(.9); }
    to { transform: rotateY(0); }
}
@-webkit-keyframes flipintoright {
    from { -webkit-transform: rotateY(90deg) scale(.9); }
    to { -webkit-transform: rotateY(0); }
}
@keyframes flipintoright {
    from { transform: rotateY(90deg) scale(.9); }
    to { transform: rotateY(0); }
}


#Sortype.Right { width:90%; max-width:1580px; display:flex; margin:78px auto; position:relative; }

.Item-list { height:350px; flex:1; display:inline; float:left; position:relative; }
.Item-list + .Item-list { margin-left:1%; }

.Item-list::before { width:100%; height:100%; content:""; position:absolute; top:0; left:0; z-index:-1; }

.Item-list div { width:100%; height:100%; float:left; position:relative; }
.Item-list div:not(.last):after{ content:""; position:absolute; width:2px; height:2px; right:-2px; }
.Item-list div .flip-box { width:100%; height:100%; position:absolute; left:0; top:0; }


.Item-list ol { width:100%; height:100%; text-align:center; line-height:2; color:#06A; box-sizing:border-box; position:relative; }
.Item-list ol { background-color:rgba(255,255,255,.2); background-repeat:no-repeat; background-position:center 190px; background-size:100px auto; }
.Item-list:hover ol { background:#06A; color:#FFF; border-radius:9px; background-repeat:no-repeat; background-position:center 190px; }

.Item-list ol label { width:100%; text-align:center; font-size:12pt; font-weight:bold; color:inherit; padding-top:50px; }
.Item-list ol font { width:100%; text-align:center; font:normal bold 38px/38px "Arial Black"; color:#FFF; clear:both; }
.Item-list ol span { width:100%; height:70%; color:#FFF; }

.Item-list img.ICON { max-width:88px; position:absolute; left:50%; top:50%; transform:translateX(-50%); }
.Item-list div.first:hover img.ICON { filter:brightness(0) invert(1); }

/*
.Item-list ol.Agents { background-image:url(/OAction/ICON/7CMFsite/A-201804.png); }
.Item-list ol.Systems { background-image:url(/OAction/ICON/7CMFsite/A-201810.png); }
.Item-list ol.Service { background-image:url(/OAction/ICON/7CMFsite/Admin06.png); }
.Item-list ol.HostCN { background-image:url(/OAction/ICON/7CMFsite/HostCN.png); }
.Item-list ol.HostHK { background-image:url(/OAction/ICON/7CMFsite/HostHK.png); }
.Item-list ol.Explorer { background-image:url(/OAction/ICON/7CMFsite/050.png); }
.Item-list ol.Regedit { background-image:url(/OAction/ICON/7CMFsite/091.png); }
.Item-list ol.Operate { background-image:url(/OAction/ICON/7CMFsite/061.png); }
*/

.Planning { margin:75px auto 25px; }
.Planning h1 { text-align:center;font-size:22pt;line-height:2; }
.Planning p { text-align:center;font-size:12pt;line-height:1.5; }

.Online { margin:38px auto; text-align:center;font-size:15pt;line-height:2; }
.Online img { width:72px; margin:5px; padding:5px; background-color:#FFF; transition:all .5s ease; }
.Online img.QQ { width:58px; margin-left:12px; padding:12px; border-radius:50%; }
.Online img.QQ:hover { background-color:#06A; transition:all .5s ease; }


#Project { width:90%; max-width:1580px; display:flex; margin:30px auto 80px; position:relative; }
#Project .Item-list { min-height:480px; border-radius:9px; background-color:rgba(0,188,210,1); color:#FFF; }
#Project .Item-list ol h1 { font-size:28pt; font-weight:normal; color:#FFF; padding:52px 0 28px; }
#Project .Item-list ol h1 span { font-size:12pt; color:#FFF; padding-left:16px; word-spacing:3px; }
#Project .Item-list ol p { font-family:"宋体"; font-size:13pt; color:#FFF; }

#Project .Item-list + .Item-list { margin-left:2%; }
#Project .Item-list + .Item-list:nth-child(2) { background-color:rgba(20,158,128,1); }
#Project .Item-list + .Item-list:nth-child(3) { background-color:rgba(80,128,200,1); }



#ItemGroup { width:100%; height:auto; border:1px solid #E3E3E3; border-width:1px 0; background-color:rgba(255,255,255,.3); padding-top:50px; margin:75px auto 25px; clear:both; }

.Grouping .item { width:25%; float:left; margin-left:0; }

.Grouping ul { width:95%; margin:2.5%; position:relative; }
.Grouping ul .PicBox { width:100%; height:110px; text-align:center; position:relative; }
.Grouping ul .Remarks { width:90%; min-height:110px; text-align:justify; padding:28.5px 5%; }
.Grouping ul .TextBox { width:100%; text-align:center; position:relative; }

.Grouping ul img { width:100%; height:100%; position:absolute; left:0; top:0; background-repeat:no-repeat; background-position:center; background-size:auto 100%; }
.Grouping ul img.Pic2 { -webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-o-filter:grayscale(100%);filter:grayscale(100%); }

.Grouping ul.Pics .Remarks { margin-left:100%; text-align:justify; line-height:1.5; }
.Grouping ul.Pics .Title { width:85%; height:100px; padding:27.5px 7.5%; position:absolute; left:0; top:0; margin-left:0; text-align:center; }
.Grouping ul.Pics p { width:100%; font-size:13pt; line-height:2; font-weight:bold; clear:both; }
.Grouping ul.Pics span { width:100%; font-size:11pt; line-height:1.5; }

.Grouping ul.Pics img.Pic1,.Grouping ul.Pics:hover img.Pic2,.Grouping ul.Pics:hover .Title { margin-left:-100%; transition:.5s ease; }
.Grouping ul.Pics img.Pic2,.Grouping ul.Pics:hover img.Pic1,.Grouping ul.Pics:hover .Remarks { margin-left:0; transition:.5s ease; }



div.Nav_title { width:100%; margin:28px auto; clear:both; position:relative; }
div.Nav_title ul { width:auto; height:auto; font-size:25pt; font-weight:bold; font-style:italic; line-height:2; letter-spacing:8px; text-align:right; padding-right:1%; float:left !important; }
div.Nav_title dt { width:auto; position:relative; color:#999; }
div.Nav_title dt:after{ content:""; width:280px; height:0; border-top:1px solid #999; position:absolute; left:0; top:32px; }
div.Nav_title dt p { height:28px; line-height:3; padding:0 8px; }



#HOT_AE_List ol.Ar { width:calc((100% - 8px)/3); height:130px; margin:2px auto; float:left; }
#HOT_AE_List ol.Ar + ol.Ar { margin-left:4px; }
#HOT_AE_List ol.Ar + ol.Ar:nth-child(3n+1) { margin-left:0; }
#HOT_AE_List ol.Ar img { width:100%; height:100%; float:left; }


#HOT_News_List dl.Item { width:calc(97%/3); float:left; }
#HOT_News_List dl.Item + dl.Item { margin-left:calc(3%/2); margin-top:32px; }
#HOT_News_List dl.Item + dl.Item:nth-child(3n+1) { margin-left:0; clear:both; }
#HOT_News_List dl.Item + dl.Item:nth-child(-n+3) { margin-top:0; }

#HOT_News_List dl.Item label { width:22%; height:auto; text-align:center; float:left; }
#HOT_News_List dl.Item label img { width:70%; height:auto; }
#HOT_News_List dl.Item dt { width:58%; height:58px; float:left; }
#HOT_News_List dl.Item dt,#HOT_News_List dl.Item dt a { font-size:13pt; line-height:1.5; }
#HOT_News_List dl.Item dd { width:78%; height:65px; line-height:1.5; float:left; }


#HOTCustomer { border:1px solid #E3E3E3; border-width:1px 0; padding-top:50px; margin:75px auto; clear:both; }


div.Nav_Left { width:32%; height:auto; padding:30px 0 50px; float:left; position:relative; }
div.Nav_Left:after,div.Nav_Left:before { width:5px; height:100%; border:5px solid #333; box-sizing:border-box; content:""; position:absolute; left:0; top:0; z-index:-1; }
div.Nav_Left:before { border-width:30px 0; left:25%; }
div.Nav_Left:after { width:25%; border-right:0; }

div.Nav_Left div.txt { width:78%; margin-left:18%; margin-top:28px; font-size:13pt; }
div.Nav_Left div.txt h1,div.Nav_Left div.txt h2 { font-size:35pt; letter-spacing:2px; line-height:1.5; color:#D00; }
div.Nav_Left div.txt h3 { font-size:18pt; line-height:1; }
div.Nav_Left div.txt h2 { font-size:25pt; letter-spacing:2px; line-height:1.2; }

div.Nav_Right { width:66%; float:right; }


.Customer { width:calc(98%/6); height:0; padding-bottom:9.5%; float:left; position:relative; transform-style:preserve-3d; box-sizing:border-box; }
.Customer { background-color:rgba(255,255,255,.3); transition:all .5s ease; }
.Customer:hover { background-color:rgba(255,255,255,1); transition:all .5s ease; }

.Customer + .Customer { margin-left:calc(2%/5); margin-top:calc(2%/5); }
.Customer + .Customer:nth-child(6n+1) { margin-left:0; clear:both; }
.Customer + .Customer:nth-child(-n+6) { margin-top:0; }

.Customer img { width:90%; height:90%; position:absolute; left:5%; top:5%;
	backface-visibility: hidden; transition:all .5s ease;
	transform: perspective(800px) rotateY(0deg);
}
.Customer:hover img {
    transform: perspective(800px) rotateY(360deg);
}

/*
.Customer img { -webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter: grayscale(100%);-o-filter:grayscale(100%);filter:grayscale(100%); transition:all .5s ease; }
.Customer:hover img { -webkit-filter:grayscale(0); -moz-filter:grayscale(0); -ms-filter: grayscale(0); -o-filter:grayscale(0); filter:grayscale(0); transition:all .5s ease; }
*/



.Contact { width:100%; text-align:center; margin-bottom:85px; position:relative; }
.Contact:after,.Contact:before { content:""; width:280px; height:0; border-top:1px solid #E3E3E3; position:absolute; left:50%; margin-left:250px; top:85px; }
.Contact:before{ margin-left:-530px; }

.Contact i.icon { font-size:20pt; line-height:1.5; margin-top:18px; }
.Contact font { display:block; font-size:11pt; line-height:1.5; }
.Contact strong { width:100%; font-size:13pt; line-height:3.5; }
.Contact span { width:460px; display:inline-block; font-size:16pt; line-height:2.5; background-color:#06A; color:#FFF; }