@charset "utf-8";

/* CSS Document */





@media (max-width:768px) {

.header{display: none;}

.pc_foot{display: none;}

.ny_banner{display: none;}

.sj_header{ display:block; padding:15px 3%; height:54px; background:#fff;}

.sj_header .logo{ float:left;}

.sj_header .logo img{ max-width:160px; margin-top:2px;}

.sj_header .menu{ float:right;}

.sj_header .menu img{ float:right; max-height:20px; margin-left:10px;}





.sj_foot{display:block; background:#1d1d1d; color:#aaaaaa; padding-top:30px; margin-top:20px;}

.sj_foot ul{ }

.sj_foot ul li a{ display:block;text-transform:uppercase; font-size:18px; line-height:40px;  color: #fff;  font-weight:bold; padding:0 3%;}

.sj_foot ul li a:hover{ color:#6d6d6d;}

.sj_foot .bei{ color:#515151; padding:0 3%;}

.sj_foot p{ padding:20px 3% 20px 3%; border-bottom:1px solid #343434; font-size:14px; line-height:22px;} 

.sj_foot .tel{ padding:20px 20% 20px 3%; position:relative; }

.sj_foot .tel a.dianhua{ position:absolute; right:3%; top:50%; margin-top:-14px; width:100%; max-width:25px;}

.sj_foot .tel a.dianhua img{width:100%; max-width:30px;}





.drawer-main { position: fixed; top: 54px; width: 55%; padding-right:3%; height: 100%; overflow: hidden }

.drawer-left .drawer-main { left: -280px; -webkit-transition: left .4s cubic-bezier(0.19, 1, .22, 1); -o-transition: left .4s cubic-bezier(0.19, 1, .22, 1); transition: left .4s cubic-bezier(0.19, 1, .22, 1) }

.drawer-left.drawer-open .drawer-main { left: 0 }

.drawer-right .drawer-main { right: -58%; -webkit-transition: right .4s cubic-bezier(0.19, 1, .22, 1); -o-transition: right .4s cubic-bezier(0.19, 1, .22, 1); transition: right .4s cubic-bezier(0.19, 1, .22, 1) }

.drawer-right.drawer-open .drawer-main { right: 0;z-index: 2; }

.drawer-overlay { position: relative }

.drawer-left .drawer-overlay, .drawer-left .drawer-hamberger { left: 0; -webkit-transition: left .4s cubic-bezier(0.19, 1, .22, 1); -o-transition: left .4s cubic-bezier(0.19, 1, .22, 1); transition: left .4s cubic-bezier(0.19, 1, .22, 1) }

.drawer-left.drawer-open .drawer-overlay, .drawer-left.drawer-open .drawer-hamberger { left: 280px }

.drawer-right .drawer-overlay, .drawer-right .drawer-hamberger { right: 0; -webkit-transition: right .4s cubic-bezier(0.19, 1, .22, 1); -o-transition: right .4s cubic-bezier(0.19, 1, .22, 1); transition: right .4s cubic-bezier(0.19, 1, .22, 1) }

.drawer-right.drawer-open .drawer-overlay, .drawer-right.drawer-open .drawer-hamberger { right: 55% }

.drawer-overlay-upper { position: fixed; top: 0; z-index: 1100; display: none; height: 100%; }

.drawer-left.drawer-open .drawer-overlay-upper { right: 0 }

.drawer-right.drawer-open .drawer-overlay-upper { left: 0 }

.drawer-default { background-color: #222; -webkit-box-shadow: inset 0 0 0 rgba(0,0,0,.5); box-shadow: inset 0 0 0 rgba(0,0,0,.5) }

.drawer-default+.drawer-overlay { background-color: #fff }

.drawer-default .drawer-brand a { display: block; width: 100%; padding: 20px 15px; font-size: 22px; color: #fff }

.drawer-default .drawer-brand a:hover { color: #444; text-decoration: none }

.drawer-default .drawer-nav-title { display: block; padding: 15px 15px 0 15px; font-size: 18px }

.drawer-default .drawer-nav-list { padding: 0; margin: 30px 0 30px 0; list-style: none }

.drawer-default .drawer-nav-list li { display: block }

.drawer-default .drawer-nav-list li a { display: block;text-transform:uppercase; font-size:24px; line-height:50px;  color: #fff; text-align:right; font-weight:bold; }

.drawer-default .drawer-nav-list li a:hover { color:#6d6d6d; }

.drawer-hamberger {  z-index: 1000; display: block; width:23px; height:24px; background-color: transparent; border: 0 }

.drawer-hamberger span { margin-top: 10px }

.drawer-hamberger span, .drawer-hamberger span:before, .drawer-hamberger span:after { position: absolute; display: block; width: 23px; height: 3px; cursor: pointer; content: ''; background-color: #2d2d2d; border-radius: 1px; -webkit-transition: all .4s cubic-bezier(0.19, 1, .22, 1); -o-transition: all .4s cubic-bezier(0.19, 1, .22, 1); transition: all .4s cubic-bezier(0.19, 1, .22, 1) }

.drawer-hamberger span:before { top: -8px }

.drawer-hamberger span:after { bottom: -8px }

.drawer-open .drawer-hamberger span { background-color: transparent }

.drawer-open .drawer-hamberger span:before, .drawer-open .drawer-hamberger span:after { top: 0 }

.drawer-open .drawer-hamberger span:before { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg) }

.drawer-open .drawer-hamberger span:after { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg) }

.drawer-hamberger:hover { cursor: pointer }



.sj_content{ display:block; margin-top:54px;}

.lunbo{ padding:30px 3%;}

.lunbo2{ padding:0 0 30px 0;}

.lunbo .title{text-transform:uppercase; font-size:16px; color:#626262; line-height:40px;  font-weight:bold;}

.lunbo .stage a.prev{ position:absolute; left:10px; top:50%; height:26px; width:18px; margin-top:-13px; background: url(../images/sjleft.png) no-repeat; display:block; background-size:18px;}

.lunbo .stage a.next{position:absolute; right:10px; top:50%; height:26px; width:18px; margin-top:-13px; background: url(../images/sj_right.png) no-repeat;display:block;background-size:18px;}

.lunbo .selectors { position:absolute; left:0; bottom:0; width:100%;

}

.lunbo .selectors li { font-size: 30px; line-height: 10px;  display: inline; padding: 10px 2px 0px 2px; }

.lunbo .selectors li a { text-decoration: none; font-size: 22px;color:#fff; }

.lunbo .selectors li.focalPoint a { color: #2d2d2d; cursor: default; }



.sj_banner{ position:relative;} 

.xiangshang{ position:fixed; bottom:10px; left:0; width:100%; text-align:center; z-index:99999;}

.xiangshang img{ max-width:30px;}



.sj_banner .stage a.prev{ position:absolute; left:10px; top:50%; height:26px; width:18px; margin-top:-13px; background:0; display:block; background-size:18px;}

.sj_banner .stage a.next{position:absolute; right:10px; top:50%; height:26px; width:18px; margin-top:-13px; background:0;display:block;background-size:18px;}



.sj_banner .selectors { position:absolute; right:3%; bottom:0;

}

.sj_banner .selectors li { font-size: 30px; line-height: 10px;  display: inline; padding: 10px 2px 0px 2px; }

.sj_banner .selectors li a { text-decoration: none; font-size: 22px;color:#fff; }

.sj_banner .selectors li.focalPoint a { color: #2d2d2d; cursor: default; }

.sj_banner .captions .yw{ font-size:22px; font-weight:bold; }

.sj_banner .captions .kh {background:url(../images/banner_bg.png) repeat; height:150px; left: 200%; position:absolute; width:100%; padding:0 3%; opacity: 0; bottom:0; -webkit-transition: opacity 0.75s cubic-bezier(0.860, 0.000, 0.070, 1.000); -moz-transition: opacity 0.75s cubic-bezier(0.860, 0.000, 0.070, 1.000); -o-transition: opacity 0.75s cubic-bezier(0.860, 0.000, 0.070, 1.000); transition: opacity 0.75s cubic-bezier(0.860, 0.000, 0.070, 1.000); text-align:left; }

.sj_banner .captions .kh strong{ font-size:24px; padding-top:20px; display:block; color:#fff;}

.sj_banner .captions .kh a{ color:#fff;text-transform:uppercase;}

.sj_banner .captions .kh p{ color:#fff; line-height:20px; padding:10px 0;}

.sj_banner .captions div.focalPoint { opacity: 1; left: inherit; }





.sj_fw{ padding:30px 3%;}

.sj_fw .title{ font-size:24px; color:#000; line-height:30px;} 

.sj_fw p{ font-size:14px; padding:15px 0 0 0; color:#868686;}

.sj_fw ul li{ color:#c7c7c7; float:left; padding-right:12px; }

.sj_fw ul li a{ font-size:14px; font-weight:bold;margin-right:12px; }



.sj_case{} 

.sj_case img{ width:100%;display:block;}

.sj_case ul li{ position:relative;}

.sj_case ul li .text{ padding:6px 3%; position:absolute; left:0; bottom:0; background:url(../images/heibg.png) repeat; width:100%; color:#fff;}





.sj_case ul li .text .yw{ font-size:16px;text-transform:uppercase;float:left; font-family:Zurich Lt BT; }

.sj_case ul li .text a{ float:right; color:#fff; background:url(../images/jiantou.png) no-repeat right center; background-size:9px; padding-right:15px;}





.sj_banner2 img,.sj_about img{ width:100%;}

.sj_about{ padding:16px 0 30px 0;}

.sj_about .title1{ font-size:18px; font-weight:bold;text-transform:uppercase; padding:0 3%;}

.sj_about .title2{ font-size:14px; padding:0 3%;}

.sj_about .title3{ font-size:22px;font-weight:bold;text-transform:uppercase; padding:0 3%;}



.sj_about .more2{ width:100%; padding:0px 3% 10px 3%; clear:both; overflow:hidden;}

.sj_about .more2 img{ float:right; max-width:100px;}



.sj_about img.ewm{ margin:20px 15%; width:70%;}



.sj_about .text{  padding:10px 3%; line-height:22px; color:#757575;}

.sj_about .dl1 {   clear:both; margin:20px 3% 20px 3%; overflow:hidden;}

.sj_about .dlline{ border-bottom:1px solid #e3e3e3; padding-bottom:20px;}

.sj_about .dl1 dt{ float:left; width:13%; margin-right:7%;}

.sj_about .dl1 dd{ float:left; width:80%; font-size:14px; color:#333}

.sj_about .dl1 dd p{ color:#6c6c6c;}



.sj_about .dl2{  margin:0 3% 10px 3%; position:relative; background:#fff000; clear:both; overflow:hidden;}

.sj_about .dl2 dt{ float:left; width:50%;}

.sj_about .dl2 dt img{ display:block;}

.sj_about .dl2 dd{ float:left; width:40%; padding-left:5%; font-size:14px;}

.sj_about .dl2 dd strong{ display:block;font-weight:bold; line-height:20px; font-size:12px;text-transform:uppercase; padding-top:10px;}

.sj_about .dl2 dd p{ font-size:12px;}

.sj_about .dl2 dd a{ display:block; position:absolute; left:55%; bottom:0;text-transform:uppercase; font-size:10px; background:url(../images/jiantou2.png) no-repeat right center; background-size:8px; padding-right:12px;}





.sjcase_detail{ padding:0 3% 30px 3%; position:relative; overflow:hidden;} 

.sjcase_detail .yw{ font-size:22px; line-height:27px; color:#000; font-weight:bold;text-transform:uppercase; }

.sjcase_detail .title{ font-size:16px; color:#000;}

.sjcase_detail p{ padding:10px 0; color:#888 ; font-size:13px;}

.sjcase_detail .text p{ padding: 0 !important; color:#888 ; font-size:13px;}

.sjcase_detail .text{ color:#888; font-size:12px;}

.sjcase_detail .text img{ margin:2px 0; width:100%;}

.sjcase_detail .fx1{ position:absolute; right:3%; top:0;}

.sjcase_detail .fx1 img{ max-width:80px;}



.waiter-ul li .waiter-title { position: absolute; right: 0; top: -29px; color: #fff; height: 30px; width:80px; line-height: 50px; text-align: center; -webkit-transition: all 0.5s; -ms-transition: all 0.5s; -moz-transition: all 0.5s; z-index: 1; opacity:0; }

.waiter-ul li:hover .waiter-title { right: 0; top:30px;  opacity:1; border-radius:100px; overflow:hidden; }





.swiper-slide{ position:relative;}

.swiper-slide img{ width:100%; display:block;}

.swiper-slide .kh { z-index:99999;background:url(../images/hei2.png) repeat; height:150px; left:0; position:absolute; width:100%; padding:0 3%; bottom:0;  }

.swiper-slide .kh strong{   font-size:20px;letter-spacing:1px; padding-top:20px; display:block; color:#fff;}

.swiper-slide .kh a{ color:#fff;text-transform:uppercase;background:url(../images/jiantou.png) no-repeat right center; background-size:9px; padding-right:15px;}

.swiper-slide .kh .line{ display:block; width:22px; height:1px; background:#fff; margin:10px 0 0 0;}

.swiper-slide .kh p{ color:#fff; line-height:20px; padding:10px 20% 0 0;}





.lunbo .swiper-button-next,.lunbo .swiper-button-prev { display:block; }

.lunbo .swiper-container-horizontal>.swiper-pagination-bullets,.lunbo  .swiper-pagination-custom,.lunbo  .swiper-pagination-fraction { bottom: 6px; left: 0%; width:100%; text-align:center;}







}

@media (min-width:767px) {

.drawer-responsive.drawer-left .drawer-toggle, .drawer-responsive.drawer-right .drawer-toggle { display: none; visibility: hidden }

.drawer-responsive.drawer-left .drawer-main { left: 0 }

.drawer-responsive.drawer-right .drawer-main { right: 0 }

}

@media (min-width:768px) {

    .sj_foot{display: none;}

    .sj_header .logo{ display: none;}

.drawer-responsive { background-color: #222 }

.drawer-responsive.drawer-left .drawer-main, .drawer-responsive.drawer-right .drawer-main { position: absolute; width: 150px!important; height: auto!important; overflow: visible!important }

.drawer-responsive.drawer-left .drawer-main { float: left }

.drawer-responsive.drawer-left .drawer-overlay { margin-left: 150px }

.drawer-responsive.drawer-right .drawer-main { float: right }

.drawer-responsive.drawer-right .drawer-overlay { margin-right: 150px }

}

@media (min-width:1200px) {

.drawer-responsive.drawer-left .drawer-main, .drawer-responsive.drawer-right .drawer-main { width: 280px!important }

.drawer-responsive.drawer-left .drawer-overlay { margin-left: 280px }

.drawer-responsive.drawer-right .drawer-overlay { margin-right: 280px }

}