/* mian.css */
@font-face{font-family:Century Gothic;src:url(/tpl/vandweb_com/Public/css/CenturyGothic.TTF);}/*font-family*/
@font-face{font-family:Aharoni;src:url(/tpl/vandweb_com/Public/css/aharoni.ttf);}/*font-family*/

body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font:inherit;vertical-align:baseline;text-align:center;font-family:Century Gothic;margin:0;padding:0;}

body{color:#999;font-size:62.5%;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:none;}
table{border-collapse:collapse;border-spacing:0;}
a{text-decoration:none;}
.clear{clear:both}
.w1200{max-width:1200px;width:100%;margin:0 auto;}
/*Microsoft YaHei*/
/*footer icon-color*/
.color-red{
    color:#FF5151;
}
.color-blue{
    color:#1080f0; 
}
.color-green{
    color:#93FF93;
}
.color-orange{
    color:#FF8040;
}
.color-purple{
    color:#C07AB8;
}
.color-yellow{
    color:#FFFF6F;
}
/*nav*/
.vweb_nav{background-color:rgba(250,250,250,0.88);position:fixed;top:0; z-index:999;width:100%;box-shadow:0 0 10px rgba(170,170,170,0.4);}
.vweb_nav .vweb_logo{display:block;float:left;max-width:112px;height:60px;margin-top:10px;width:20%;}
.vweb_nav #top_nav{float:left;margin-left:20px;width:70%}
.vweb_nav #top_nav li{float:left;width:20%;position:relative;}
.vweb_nav #top_nav li#li-3{width:25%;}
.vweb_nav #top_nav li#li-5{width:14%;}
.vweb_nav #top_nav li a.a_tit{display:block;font-size:16px;color:#333;height:20px;padding:30px 0;background:url(/tpl/vandweb_com/Public/images/index/nav_line.png) no-repeat center right;}
.vweb_nav #top_nav li a.a_tit_hover{color:#fff;background:#747474;}

/*Hide box settings*/
.vweb_nav .hidden-box{display:none;width:100%;position:absolute;top:79px;left:0;background:rgba(116, 116, 116,0.9);z-index:99999;border-bottom-left-radius:8px;border-bottom-right-radius:8px;
    -webkit-box-shadow: 0px 6px 6px 0px rgba(200, 200, 200,0.17); 
    -moz-box-shadow: 0px 6px 6px 0px rgba(200, 200, 200,0.17); 
    box-shadow: 0px 6px 6px 0px rgba(200, 200, 200,0.17);}
.vweb_nav #top_nav li .hidden-box ul{list-style-type:none;cursor:pointer;width:100%}
.vweb_nav #top_nav li .hidden-box ul li{width:100%;}
.vweb_nav #top_nav li .hidden-box ul li a{display:block;font-size:16px;color:#fff;line-height:1.5;padding:8px 0;}
.vweb_nav #top_nav li .hidden-box ul li a:hover{background:#fafafa;color:#747474;}
.vweb_nav #top_nav li .hidden-box ul li:last-child a:hover{border-bottom-left-radius:8px;border-bottom-right-radius:8px;}
/*text-hosting*/
.text_hosting{margin-top:50px;background:#61adc2;}
.text_hosting .text_hosting_w{padding:40px 0;}
.text_hosting .text_hosting_w h1 {font-size:5em;line-height:1.2;color:#fff;font-weight:bold;}
.text_hosting .text_hosting_w p {margin:2% auto 0;font-size:2em;line-height:1.5;color:#fff;width:80%;}
/*main-product*/
.main_product{margin-top:60px;}
.main_product .main_product1,.main_product .main_product2,.main_product .main_product3,.main_product .main_product4{width:23%;float:left;padding:0 1%;}
 /*Special part of the turn and 'after' after the straight line*/
.main_product .main_product_box{
    padding:30px 20px;margin:10px;
    -webkit-box-shadow: 0px 5px 33px 0px rgba(82, 156, 219,0.17); 
    -moz-box-shadow: 0px 5px 33px 0px rgba(82, 156, 219,0.17); 
    box-shadow: 0px 5px 33px 0px rgba(82, 156, 219,0.17);
    position:relative;
    transition:all 0.3s, transform 0.3s;
}
.main_product .main_product_box:hover{
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    transform: scale(1.05);
}
.main_product .main_product_box:after{
    content: "";
    position: absolute;
    width: 100%;
    height: 4px;
    left: 0;
    bottom: 0;
    -webkit-transform-origin: center;
    -moz-transform-origin: center;
    transform-origin: center;
    -webkit-transform: scale(0,1);
    -moz-transform: scale(0,1);
    transform: scale(0,1);
    transition: all 0.3s ease 0.0s;
}
.main_product .main_product1 .main_product_box:after{background:#fba919;}
.main_product .main_product2 .main_product_box:after{background:#e875c6;}
.main_product .main_product3 .main_product_box:after{background:#7774e7;}
.main_product .main_product4 .main_product_box:after{background:#8abe40;}
.main_product .main_product_box:hover:after{
    content: "";
    -webkit-transform: scale(1,1);
    -moz-transform: scale(1,1);
    transform: scale(1,1);
    transition: all 0.3s ease 0.0s;
}

.main_product .main_product_box .main_product_ico{width:100px;height:100px;border-radius:100px;margin:0 auto 20px;border:1px solid #e1e1e1;}
.main_product .main_product_box .main_product_ico span{display:inline-block;width:48px;height:46px;margin:27px 26px;}
.main_product .main_product1 .main_product_box .main_product_ico span{background:url(/tpl/vandweb_com/Public/images/index/ico.png) no-repeat top -185px left -9px;}
.main_product .main_product2 .main_product_box .main_product_ico span{background:url(/tpl/vandweb_com/Public/images/index/ico.png) no-repeat top -65px left -9px;}
.main_product .main_product3 .main_product_box .main_product_ico span{background:url(/tpl/vandweb_com/Public/images/index/ico.png) no-repeat top -125px left -10px;}
.main_product .main_product4 .main_product_box .main_product_ico span{background:url(/tpl/vandweb_com/Public/images/index/ico.png) no-repeat top -5px left -10px;}
.main_product .main_product_box h2{font-weight:bold;font-size:2em;line-height:1.2;color:#567086;margin-bottom:10px;}
.main_product .main_product_box p{font-size:1.6em;color:#889eab;margin-bottom:30px;}
.main_product .main_product_box .main_product_price{margin-bottom:30px;}
.main_product .main_product_box .main_product_price h6{font-size:1.6em;color:#889eab;margin-bottom:6px;}
.main_product .main_product_box .main_product_price .price{font-size:2.2em;color:#7f98ad;font-weight:bold;}
.main_product .main_product_box .main_product_button{text-align:center;}
.main_product .main_product_box .main_product_button a{display:inline-block;padding:6px 14px;font-size:1.4em;line-height:1.5;font-weight:bold;text-decoration:none;border-radius:6px;}
.main_product .main_product1 .main_product_box .main_product_button a{background-color:#fff9f0;color:#fba919;border:1px solid #fba919;}
.main_product .main_product1 .main_product_box .main_product_button a:hover{background-color:#fba919;color:#fff;}
.main_product .main_product2 .main_product_box .main_product_button a{background-color:#fcf1fc;color:#e875c6;border:1px solid #e875c6;}
.main_product .main_product2 .main_product_box .main_product_button a:hover{background-color:#e875c6;color:#fff;}
.main_product .main_product3 .main_product_box .main_product_button a{background-color:#f5ecff;color:#7774e7;border:1px solid #7774e7;}
.main_product .main_product3 .main_product_box .main_product_button a:hover{background-color:#7774e7;color:#fff;}
.main_product .main_product4 .main_product_box .main_product_button a{background-color:#f7fcef;color:#8abe40;border:1px solid #8abe40;}
.main_product .main_product4 .main_product_box .main_product_button a:hover{background-color:#8abe40;color:#fff;}
.index_learn{padding:30px 20px;margin:50px 2% 0;transition:all 0.3s, transform 0.3s;
-webkit-box-shadow: 0px 5px 33px 0px rgba(82, 156, 219,0.17); 
    -moz-box-shadow: 0px 5px 33px 0px rgba(82, 156, 219,0.17); 
    box-shadow: 0px 5px 33px 0px rgba(82, 156, 219,0.17);}
.index_learn .index_learn_ico{float:left;}
.index_learn .index_learn_more{float:right;width:80%;}
.index_learn .index_learn_ico{width:100px;height:100px;border-radius:100px;border:1px solid #61adc2;margin:0 0 0 34px;text-align:center;}
.index_learn .index_learn_ico img{display:inline-block;margin-top:32px;}
.index_learn h4{font-size:2.2em;color:#7f98ad;padding-top:4px;}
.index_learn a{display:inline-block;font-size:1.8em;border:1px solid #61adc2;background:#f0fcff;color:#61adc2;padding:10px 20px;border-radius:6px;margin-top:30px;}
.index_learn a:hover{background:#61adc2;color:#fff;}
.index_learn:hover{
    -webkit-transform: scale(1.02);
    -moz-transform: scale(1.02);
    transform: scale(1.02);
}
.index_learn:after{
    content: "";
    position:absolute;
    width:100%;
    height:4px;
    left:0;
    bottom:0;
    -webkit-transform-origin:center;
    -moz-transform-origin: center;
    transform-origin: center;
    -webkit-transform: scale(0,1);
    -moz-transform: scale(0,1);
    transform: scale(0,1);
    transition: all 0.3s ease 0.0s;
}
.index_learn:after{background:#61adc2;}
.index_learn:hover:after{
    content: "";
    -webkit-transform: scale(1,1);
    -moz-transform: scale(1,1);
    transform: scale(1,1);
    transition: all 0.3s ease 0.0s;
}
/*why*/
.why {margin-top:60px;background:#2a6d7f;}
.why .hosting_text{padding:50px 40px;}
.why .hosting_text h1{text-align:center;font-size:5em;line-height:1;color:#fff;font-weight:bold;letter-spacing:2px;margin:0;}
.why .hosting_text p {text-align:center;margin:3% auto 0;font-size:1.8em;line-height:1.5;color:#f2f2f2;width:96%;}
/*eight_ico*/
.eight_ico {width:100%;max-width:1200px;margin:60px auto 20px;}
.eight_ico ol {width:100%;}
.eight_ico ol li {list-style-type:none;font-size:1.6em;line-height:1.5;color:#8695AE;text-align:center;float:left;width:19%;margin:0 3%;height:200px;}
.eight_ico ol li span {display:block;width:86px;height:76px;margin:0 auto;}
.eight_ico ol li.li1 span {background:url(/tpl/vandweb_com/Public/images/index/ico.png) no-repeat top -4px left -70px;}
.eight_ico ol li.li2 span {background:url(/tpl/vandweb_com/Public/images/index/ico.png) no-repeat top -4px left -178px;}
.eight_ico ol li.li3 span {background:url(/tpl/vandweb_com/Public/images/index/ico.png) no-repeat top -4px left -285px;}
.eight_ico ol li.li4 span {background:url(/tpl/vandweb_com/Public/images/index/ico.png) no-repeat top -3px left -382px;}
.eight_ico ol li.li5 span {background:url(/tpl/vandweb_com/Public/images/index/ico.png) no-repeat top -82px left -70px;}
.eight_ico ol li.li6 span {background:url(/tpl/vandweb_com/Public/images/index/ico.png) no-repeat top -82px left -178px;}
.eight_ico ol li.li7 span {background:url(/tpl/vandweb_com/Public/images/index/ico.png) no-repeat top -82px left -285px;}
.eight_ico ol li.li8 span {background:url(/tpl/vandweb_com/Public/images/index/ico.png) no-repeat top -82px left -382px;}

/*底部*/
#footer{background:#333;border:none;margin:0;}
.footer_box{margin:0 auto;}
#footer .box{padding:30px 20px;margin:0;}
.box{height:inherit;margin: 0;}
.box ul{width:inherit;margin:0 3% 0 0;padding:0;font-size:1.6em;color:#fff;line-height:1.5;float:left;min-width:inherit;min-height:170px;height:inherit;}
.box ul li a{font-size:1.1em;}
.box ul.ul_last{width:150px !important;margin:0;padding:0;text-align:center;}
.box ul.ul_last li.ul_last_icon{text-align:center;}
.box ul.ul_last li.ul_last_icon{margin-top:6px;}
.box ul.ul_last li.ul_last_icon a{display:inline-block;height:26px;width:26px;margin-right:10px;background-repeat:no-repeat;background-position:center center;background-size:24px;}
.box ul.ul_last li.ul_last_icon a.facebook_icon{background-image:url(/tpl/vandweb_com/Public/images/footer/facebook_icon.png);}
.box ul.ul_last li.ul_last_icon a.twitter_icon{background-image:url(/tpl/vandweb_com/Public/images/footer/twitter_icon.png);}
.box ul.ul_last li.ul_last_icon a.tumblr_icon{background-image:url(/tpl/vandweb_com/Public/images/footer/tumblr_icon.png);margin:0}
.box ul.ul_last li.ul_last_icon a.instagram_icon{background-image:url(/tpl/vandweb_com/Public/images/footer/ig_icon.png);}
.box ul.ul_last li.ul_last_icon a.blog_icon{background-image:url(/tpl/vandweb_com/Public/images/footer/blog_icon.png);margin:0;}
.box ul.ul_last li.ul_last_vweb{height:38px;border-top:1px solid #555;background:url(/tpl/vandweb_com/Public/images/footer/vweb_icon.png) no-repeat center right;background-size:70px;margin-left:14px;}
.box ul.ul_last li.ul_last_copy{text-align:right;line-height:1.8;}
.box,.box ul,.box ul li{text-align:left;}
.box ul li{font-size:12px;color:#ccc;}
.nav>li>a>img{max-width:30px;vertical-align:middle;}
.dropdown-menu>li>a{font-size:1.4em;background:#fafafa;display:block;padding:8px 0;}
.dropdown-menu{top:30px;max-width:120px;border-bottom-left-radius:8px;border-bottom-right-radius:8px;background:#fafafa;
   -webkit-box-shadow: 0px 6px 6px 0px rgba(200, 200, 200,0.17); 
    -moz-box-shadow: 0px 6px 6px 0px rgba(200, 200, 200,0.17); 
    box-shadow: 0px 6px 6px 0px rgba(200, 200, 200,0.17);}
.nav .open .dropdown-toggle,.nav>li.dropdown.open.active>a:hover{color:#3c99ef;}
.dropdown-menu .divider{margin:2px 0;}
.nav .dropdown-toggle .caret{vertical-align:middle;margin:0 0 0 4px;}
.nav li.dropdown.open .caret, .nav li.dropdown.open.active .caret, .nav li.dropdown.open a:hover .caret, .nav li.dropdown.open a:focus .caret{border-top-color:#3c99ef;}
.dropdown-menu > li > a:hover, .dropdown-submenu:hover > a{background:#f5fcff;color:#3c99ef;}
#main-menu-user{margin:25px 0;}
.nav>li>a{font-size:1.4em;color:#333;}
.nav > li > a:hover, .nav > li > a:focus{background:none}
.nav>li>a:hover{color:#3c99ef;}
.nav>li>a>img{vertical-align:middle;margin:0 10px 0 0;}
.nav .dropdown-toggle .caret{vertical-align:middle;margin:0 10px;}
.sy-box{margin-top:80px;z-index:10;}

/*2016.9.27修改响应式*/
/*nav*/
body,html{overflow-x:hidden;}/*禁止手机端页面出现横向滚动条*/
.mobile_nav{display:none;height:50px;width:100%;z-index:9999;background-color:#fafafa;position: fixed;top:0;}
.mobile_nav .vweb_logo{display:inline-block;float:left;margin:6px 0;}
.mobile_nav .vweb_logo img{width:72px;}
.mobile_nav #mobile_login{float:left;margin:15px 0 0 10%;}
/*.mobile_nav .nav_login1,.mobile_nav .nav_login2{color:#666;line-height:1.5;font-size:1.6em;margin-left:16px;}*/
.mobile_nav .nav_login1,.mobile_nav .nav_login2{color:#666;line-height:1.5;font-size:16px;margin-left:16px;}
.mobile_nav .nav_login1 i,.mobile_nav .nav_login2 i{color:#999;display:inline-block;margin-right:4px;font-size:1em;}    
.mobile_nav .nav_login1:hover, .mobile_nav .nav_login2:hover{color:#3c99ef;}
.mobile_nav .mobile-inner-header-icon{height:30px;margin:10px;text-align:center;float:right;width:40px;position:relative;-webkit-transition: background 0.5s;-moz-transition: background 0.5s;-o-transition: background 0.5;transition: background 0.5s;}
.mobile_nav .mobile-inner-header-icon:hover {
    background-color: rgba(150, 200, 255, 0.1);
    cursor: pointer;
}
.mobile_nav .mobile-inner-header-icon span {
    position: absolute;
    left: calc((100% - 25px) / 2);
    top: calc((100% - 1px) / 2);
    width: 25px;
    height: 1px;
    background-color:#666;
}
.mobile_nav .mobile-inner-header-icon span:nth-child(1) {transform: translateY(4px) rotate(0deg);}
.mobile_nav .mobile-inner-header-icon span:nth-child(2) {transform: translateY(-4px) rotate(0deg);}
.mobile_nav .mobile-inner-header-icon-click span:nth-child(1) {animation-duration: 0.5s;animation-fill-mode: both; animation-name: clickfirst;}
.mobile_nav .mobile-inner-header-icon-click span:nth-child(2) {animation-duration: 0.5s;animation-fill-mode: both;animation-name: clicksecond;}
 @keyframes clickfirst {
 0% {transform: translateY(4px) rotate(0deg);}
 100% { transform: translateY(0) rotate(45deg);}
}
 @keyframes clicksecond {
 0% {transform: translateY(-4px) rotate(0deg);}
 100% {transform: translateY(0) rotate(-45deg);}
}
.mobile_nav  .mobile-inner-header-icon-out span:nth-child(1) {animation-duration: 0.5s;animation-fill-mode: both;animation-name: outfirst;}
.mobile_nav .mobile-inner-header-icon-out span:nth-child(2) {animation-duration: 0.5s;animation-fill-mode: both; animation-name: outsecond;}
 @keyframes outfirst {
 0% {transform: translateY(0) rotate(-45deg);}
 100% {transform: translateY(-4px) rotate(0deg);}
}
 @keyframes outsecond {
 0% {transform: translateY(0) rotate(45deg);}
 100% {transform: translateY(4px) rotate(0deg);}
}
.mobile_nav .mobile-inner-nav{display:none;background-color:#fafafa;width:100%;position:absolute;top:50px;left:0px;padding:0;z-index: 999;
-webkit-box-shadow: 0px 6px 6px 0px rgba(200, 200, 200,0.17); 
    -moz-box-shadow: 0px 6px 6px 0px rgba(200, 200, 200,0.17); 
    box-shadow: 0px 6px 6px 0px rgba(200, 200, 200,0.17);}
.mobile_nav .mobile-inner-nav ul li a{display:block;font-size:1.6em;line-height:3;width:90%;padding-left:10%;color:#333;text-decoration:none;border-bottom:1px solid #f0f0f0;}
.mobile_nav .mobile-inner-nav ul li:last-child a{border-bottom:none;}
.mobile_nav .mobile-inner-nav ul li a:hover {cursor:pointer;background-color:#f5fcff;color:#3c99ef;}
.mobile_nav .item-has-children > a{position:relative;}
.mobile_nav .item-has-children > a::after {
 content: '';
 height: 11px;
 width: 8px;
 position:absolute;
 top: 50%;
 -webkit-transform: translateY(-50%);
 -moz-transform: translateY(-50%);
 -ms-transform: translateY(-50%);
 -o-transform: translateY(-50%);
 transform: translateY(-50%);
 right:20px;
 background: url(/tpl/vandweb_com/Public/images/cd-arrow.png) no-repeat center center;
 background-size: 8px 11px;
 -webkit-transition-property: -webkit-transform;
 -moz-transition-property: -moz-transform;
 transition-property: transform;
 -webkit-transition-duration: 0.2s;
 -moz-transition-duration: 0.2s;
 transition-duration: 0.2s;
}
.mobile_nav .mobile-inner-nav ul li ul {display:none;background:#fefefe;}
.mobile_nav .mobile-inner-nav ul li.dropdown.open>.dropdown-toggle:hover,.mobile_nav .mobile-inner-nav ul li.dropdown.active>.dropdown-toggle:hover,.mobile_nav .mobile-inner-nav ul li.dropdown.open.active>.dropdown-toggle:hover{background-color:#f5fcff;color:#3c99ef;}
.mobile_nav .mobile-inner-nav ul li.dropdown.open>.dropdown-toggle,.mobile_nav .mobile-inner-nav ul li.dropdown.active>.dropdown-toggle,.mobile_nav .mobile-inner-nav ul li.dropdown.open.active>.dropdown-toggle{background-color:#f5fcff;color:#3c99ef;}
.mobile_nav .mobile-inner-nav ul li>a:focus, .mobile_nav .mobile-inner-nav ul li>a:hover{background-color:#f5fcff;color:#3c99ef;}

.mobile_nav .item-has-children > a.submenu-open::after {
 background: url(/tpl/vandweb_com/Public/images/cd-arrow01.png) no-repeat center center;
 background-size: 8px 11px;
-webkit-transform: translateY(-50%) rotate(90deg);
 -moz-transform: translateY(-50%) rotate(90deg);
 -ms-transform: translateY(-50%) rotate(90deg);
 -o-transform: translateY(-50%) rotate(90deg);
 transform: translateY(-50%) rotate(90deg);
}

/*响应式*/

@media (max-width:1200px ){
.box ul{width:33.33%;margin-top:20px;margin-right:0;}
.box ul.ul_last{margin-top:20px;}
}

@media (max-width:1000px ){
.main_product .main_product1, .main_product .main_product2, .main_product .main_product3, .main_product .main_product4{width:46%;padding:0 2%;}
.main_product .main_product3, .main_product .main_product4{margin-top:40px;}
.eight_ico ol li{width:27.33%;}
.why .hosting_text h1{font-size:5em;}
}

@media (max-width:960px ){
.vweb_nav{display:none;}
.mobile_nav{display:block;}
.sy-box{margin-top:50px;}
.why  .hosting_text h1{font-size:3em;}
.why .hosting_text p {font-size:1.4em;}
.index_learn{margin:50px 6% 0}
.index_learn .index_learn_ico{float:none;margin:0 auto 20px;}
.index_learn .index_learn_more{float:none;width:100%;}
}

@media (max-width:768px ){
.main_product{margin-top:50px;}
.box ul{width:50%;}
.main_product .main_product1, .main_product .main_product2, .main_product .main_product3, .main_product .main_product4{width:92%;padding:0 4%;}
.main_product .main_product2{margin-top:40px;}
.eight_ico ol li {width:44%;}
}

@media (max-width:480px ){
.mobile_nav .vweb_logo img{width:60px;margin:0;}
.mobile_nav #mobile_login{margin-left:0%;}
.box ul{width:96%;min-height:100px;}
.eight_ico ol li{font-size:1.4em;}
.why .hosting_text h1 {font-size:2.4em;}
.text_hosting .text_hosting_w h1{font-size:2em;font-weight:bold;}
.text_hosting .text_hosting_w p{font-size:1.6em;}
.index_learn h4{font-size:1.8em;}
.sy-box{margin-top:50px;z-index:10;}
.mobile_nav{display:block;box-shadow:0 0 10px rgba(160,160,160,0.2);}
}