zijia/template/week_touch/touch/images/mobile.css

@charset 'UTF-8';

/* Design By haoweek.com  */
@media screen and (min-width:320px) { html { font-size:100.00px;} }

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

/*****************************************phone plus*****************************************/
@media (max-width:1600px) {
html,body {width: 100%;height: 100%;}
body {font-size:.12rem; line-height:1.5; text-size-adjust:100%; -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; -webkit-font-smoothing: antialiased;}

/* Font css */
.f64{font-size:.52rem;}
.f60{font-size:.48rem;}
.f52{font-size:.41rem;}
.f48{font-size:.32rem;}
.f32{font-size:.24rem;}
.f28{font-size:.22rem;}
.f24{font-size:.20rem;}
.f22{font-size:.16rem;} 
.f18{font-size:.15rem;}
.f16{font-size:.14rem;}
.f15{font-size:.14rem;}
.f14{font-size:.12rem;}
/* Btn css */
.comm-Btn,.comm-Btn:hover{ padding:0 .34rem; line-height:.34rem; color:#FFF; }

/* comm css */
.container{padding:0 .12rem; max-width:100%; min-width:100%;}
.wk-case,.wk-index-contact,.wk-clients,.wk-friends,.wk-items-list,.wk-abtdiv,.wk-gettouch,.wk-about,.wk-data,.wk-space,.wk-team,.wk-job{width:100%; min-width:100%; padding:.44rem 0;}
/* title css */
.title-index{padding:0 .12rem; font-weight:200;}

/* header*/
.wk-header{padding-top:10px; padding-bottom:10px; height:60px;}
.wk-header h1 a.logo{width:40px; height:40px; background-size:40px 40px;}
.wk-header ul.nav{display:none;}
.wk-header-scroll{padding-top:10px; padding-bottom:10px; height:60px;background:rgba(255,255,255,.96);}
.wk-header-scroll h1 a.logo{display:block; width:150px; height:40px; text-indent:-9999px; background:url(logo.png) no-repeat center; background-size:150px 40px;}

/*right menu*/
.menu,.slideout-menu {position:fixed; top:0;bottom:0;right:0;z-index:0; width:256px; overflow-y:scroll; -webkit-overflow-scrolling:touch; display:none;}
.panel,.slideout-panel {position: relative;z-index:1;}
.slideout-open,.slideout-open body {overflow: hidden;}
.slideout-open .slideout-menu {display: block;}

.wk-mobile-nav{padding:15px; color:#ccc; background:url(lights.jpg) no-repeat center center;}
.mobile-nav-list { width:100%; margin-bottom:15px; overflow:hidden; }
.mobile-nav-list li { width:45%; margin-right:4%; margin-bottom:10px; text-align:center; float:left; border:1px solid #CCC; height:40px; line-height:40px; border-radius:10px; overflow:hidden; }
.mobile-nav-list li a,.mobile-nav-list li a:hover{padding:0; display:block; font-size:16px; line-height:40px; color:#eee; text-decoration:none;}
.mobile-bb-list { width:100%; margin-bottom:15px; overflow:hidden; }
.mobile-bb-list li { width:28%; margin-right:4%;  text-align:center; float:left; border:1px solid #CCC; background:#EEE; height:30px; line-height:30px; border-radius:8px; overflow:hidden; }
.mobile-bb-list li a,.mobile-nav-list li a:hover{padding:0; display:block; font-size:14px; line-height:30px; color:#333; text-decoration:none;}
.site-infor{padding:.12rem 0; border-top:1px solid #999;}

.wk_headhy { width:100%; height:150px; }
.wk_headhytx { float:left; width:240px; height:60px; margin:10px 0; overflow:hidden;  }
.wk_headhytx01 { height:54px; width:54px; margin-left:10px; margin-top:3px; float:left; overflow:hidden; }
.wk_headhytx01 img { width:48px; height:48px; overflow:hidden; border:2px solid #CCC; border-radius:50%; }
.wk_headhytx02 { width:120px; height:60px; margin-top:2px; margin-left:30px; float:left; overflow:hidden; }
.wk_headhytx02 span { height:28px; line-height:28px;  text-align:left; float:left; width:120px; }
.wk_headhytx02 span a {font-size:14px; color:#F6F6F6;}
.wk_headhybt { float:left; height:40px; margin-top:10px; width:100%; overflow:hidden; }
.wk_headhybt ul { width:100%; height:32px; }
.wk_headhybt ul li { float:left; width:21%; margin-right:3%; border:1px solid #CCC; border-radius:8px; overflow:hidden; text-align:center; height:30px; line-height:30px; }
.wk_headhybt ul li a { font-size:14px; color:#FFF; }

/*menu icon*/
.toggle-btn{position:fixed; top:0; right:0; z-index:2000; display:block; border:none; outline:none; width:60px; height:60px; padding-top:12px; -webkit-tap-highlight-color:rgba(0,0,0,0);}
.icon-i{margin:6px auto; display:block; width:30px; height:3px; background:#ea3340;}

/* footer */
.wk-footer{padding:0 0 0.65rem 0; min-width:100%;}
.footer-box{float:left; width:100%;}
.footer-nav{overflow:hidden; margin:0 0 .1rem; padding-bottom:0; border-bottom:1px solid #aaa;}
.footer-nav li{width:20%; float:left; text-align:center; padding:0;}
.footer-nav li a{line-height:.5rem; font-size:.16rem; }
.footer-nav li a:hover{text-decoration:none; color:#ccc;}
.logo-en{margin:.2rem 0 .12rem; display:block; width:238px; height:18px; background:url(logo_en_2x.png) no-repeat center top; background-size:238px 18px;}
.fr{float:left;}
.tright{text-align:left;}
/*slider index*/
#Slider-index .slick {width:100%; margin: 0 auto; min-width:100%;}
#Slider-index .slick-dots {bottom: .2rem;}

/* index service item */
.wk-service-item{min-width:100%;}
.wk-service-item .container{padding:0;}
.service-item li{width:100%; border-left:0px solid #ddd; border-bottom:1px solid #ddd; }
.service-item li:last-child{border-right:0px solid #ddd;}
.service-item li a,.service-item li a:hover{padding:.2rem; display:block; text-decoration:none; text-align:left; background-image:url(arr_comm.png); background-repeat:no-repeat; background-position:94% center; background-size:.22rem;}
.service-item li a span{padding:.06rem .06rem .06rem .7rem;}
.service-item li a span h3{line-height:.26rem;}
.service-item li a span p{line-height:.2rem;}

.service-item li a span.service-ue{background:url(icon_ue.png) no-repeat 0px 0px; background-size:.5rem;}
.service-item li a:hover span.service-ue{background:url(icon_ue.png) no-repeat 0px -.5rem; background-size:.5rem;}
.service-item li a span.service-ui{background:url(icon_ui.png)  no-repeat 0px 0px; background-size:.5rem;}
.service-item li a:hover span.service-ui{background:url(icon_ui.png)  no-repeat 0px -.5rem; background-size:.5rem; }
.service-item li a span.service-dev{background:url(icon_dev.png) no-repeat 0px 0px; background-size:.5rem;}
.service-item li a:hover span.service-dev{background:url(icon_dev.png) no-repeat 0px -.5rem; background-size:.5rem; }

/* case*/
.wk-case .container{padding:0;}
.case-list li{width:48%; margin:.2rem 1% 0; }
.case-list li a h4,.case-list li a:hover h4{width:90%; margin:0 5px; line-height:.32rem;}
.case-list li a p,.case-list li a:hover p{display: block;}

/* index contact */
.wk-index-contact {background-attachment:scroll;}
.wk-index-contact h3{width:80%;}
.wk-index-contact p{width:90%;}
.btn-box{margin:.12rem auto 0;}
.wk-index-contact p.btn-box a{font-size:.16rem;}

/* client commemt */
.wk-clients .title-index{padding:0; }
#Slider-say .slick {width:100%; padding:.24rem .12rem;}
#Slider-say .slick div.slidbox h3{margin:0 0 .2rem; font-size:.20rem;}
#Slider-say .slick div.slidbox p{margin:0 0 .2rem;}
#Slider-say .slick-dots { bottom: .0rem;}
/* friends */
.wk-friends ul.friends-list li{margin:.12rem 0; padding:.12rem 0; width:50%; }

/*map*/
/*.wk-map{position:relative; height:3.2rem; min-width:100%;}*/
.mark-info{padding:.12rem 0;}
.mark-info h4{margin:0; line-height:.25rem; font-size:.16rem; color:#fff; font-weight:300;}
.mark-info a,.mark-info a:hover{color:#fff; text-decoration:none;}

/*show txt style*/
.show-txtstyle-center h5{display:none;}
.show-txtstyle-center .f64{font-size:.32rem;}
.show-txtstyle-center h3.f48{font-size:.22rem;}
.show-txtstyle-center p.iconimg img{margin:0 auto 2%; width:68px;}
/*show txt style end*/

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

@media only screen and (max-width:320px) {
/* Font css */
.f64{font-size:.39rem;}
.f60{font-size:.36rem;}
.f52{font-size:.32rem;}
.f48{font-size:.28rem;}
.f32{font-size:.20rem;}
.f22{font-size:.16rem;}
.f16{font-size:.14rem;}
.f14{font-size:.12rem;}
/* header*/
.wk-header{padding-top:15px; padding-bottom:15px;height:60px;}
.wk-header h1 a.logo{width:30px; height:30px; background-size:30px 30px;}
.wk-header-scroll{padding-top:15px; padding-bottom:15px;height:60px; background:rgba(255,255,255,.96);}
.wk-header-scroll h1 a.logo{width:132px; height:30px; background-size:132px 30px;}
/*menu icon*/
.toggle-btn{width:50px; height:50px; padding-top:14px;}
.icon-i{width:26px; height:2px; }

/*right menu*/
.mobile-nav-list li a,.mobile-nav-list li a:hover{font-size:.14rem; line-height:.44rem;}
#Slider-say .slick div.slidbox h3{font-size:.18rem;}
.wk-fix-sort ul li a,.wk-fix-sort ul li a:hover{font-size:.14rem;}

}


.wk_hmenu {position:relative; top:-7px; right:12px; }