/* public */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, code, form, input, button, textarea, p, th, td { margin: 0; padding: 0; border: none; outline: none; }
html { overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);text-decoration:none;}
body { font: 14px/1.6 "Microsoft YaHei", Arial, sans-serif; -webkit-overflow-scrolling: touch; color: #666;background-attachment: fixed;background-size: cover; }
img, input, select { vertical-align: middle; font-family: inherit }
img { border: 0 }
li, ul, dl { list-style: none;}
table { border-collapse: collapse; border-spacing: 0 }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: none }
button[disabled], input[disabled] { cursor: default }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus { box-shadow: 0 0 0 60px #fff inset; -webkit-text-fill-color: #666 }
textarea { overflow: auto; vertical-align: top; resize: none; font-family: inherit }
h1, h2, h3, h4 { font-weight: normal }
hr { height: 0; margin-top: 20px; margin-bottom: 20px; border: 0; border-top: 1px solid #eaeaea; }
i, em { font-style: normal }
b, strong { font-weight: bold }
a { color: #666; text-decoration: none ;  transition: all .3s cubic-bezier(0.215,0.61,0.355,1);}
a:hover, a:active {  outline: 0; text-decoration:none;-webkit-tap-highlight-color: transparent; background-color: transparent ; transition: all .3s cubic-bezier(0.215,0.61,0.355,1);}
a:focus { outline: 0;text-decoration:none; }
.red { color: #f33 }
.blue { color: #007bfe }
.green { color: #1a934a }
.show { display: block }
.hide { display: none }
.c  { margin:0 auto;}
.clear { clear: both; height: 0; overflow: hidden }
.clearfix {zoom:1;}.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.cl {zoom:1;}.cl:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.clearfix:after { clear: both }
.container { width:1200px;}
.t-pc { text-align:center;}
.inner { padding:60px 0;}
.font-tnr { font-family: 'Janson Text',Times,'Times New Roman',serif;}
.wrapper {overflow-x: hidden;overflow-y: hidden;-webkit-perspective: 1px;perspective: 1px;}
.heading-bracket { font-size:28px; line-height:2.4;color:#333;letter-spacing:1px;} 
.tit-min { display:none;}
.tmt { margin-top:2rem;}
.ico-bar-horizontal {display: block;width: 26px;height: 3px;background: #cebea7;}


/* nav */
body .navbar .collapsed span { display: block; width: 2rem; height: 0.1rem;border-radius: 1px;background-color: #000;transition: all .3s cubic-bezier(0.215,0.61,0.355,1);}
.navbar-toggle .icon-bar + .icon-bar { margin-top:5px;}
.navbar .collapsed span:nth-child(2) { transform: rotate(0);transition: all .3s cubic-bezier(0.215,0.61,0.355,1);}
.navbar .collapsed span:nth-child(4) { transform: rotate(0);transition: all .3s cubic-bezier(0.215,0.61,0.355,1);}
.navbar-toggle  span:nth-child(2) {  display: block; width: 2rem; height:0.1rem; border-radius: 1px;background-color: #000;transform: rotate(45deg) translateY(0.9rem);transition: all .3s cubic-bezier(0.215,0.61,0.355,1);}
.navbar-toggle  span:nth-child(4){  display: block; width: 2rem; height: 0.1rem; border-radius: 1px;background-color: #000;transform: rotate(-45deg) translateY(-0.9rem);transition: all .3s cubic-bezier(0.215,0.61,0.355,1);}
.navbar-toggle  span:nth-child(3) { width:0;transition: all .3s cubic-bezier(0.215,0.61,0.355,1)}
.nav-moblie { background:#fff;width:101%;height:100%;position: fixed;top:6rem;bottom:0;left:-1px;z-index:99;overflow-Y: scroll;scroll-behavior: smooth;overscroll-behavior: contain;}
.navm { background:#fff;width:100%;height:100%;}
.nav-moblie .navbar-collapse ul { background:#fff;border-top:1px solid #eee;}
.nav-moblie .navbar-collapse ul li { text-align:left;border-bottom:1px solid #eee;text-indent:0.1rem;}
.nav-moblie .navbar-collapse ul li em { float:right;display:inline-block;height:6rem;line-height:6rem;margin-right:1rem;color:#ccc; }
.nav-moblie .navbar-collapse ul li a { display:inline-block;height:6rem;line-height:6rem; }
.nav-footer { width:100%;margin-top:4rem;}
.nav-footer p { text-align:center;font-size:1rem;color:#ccc;}
.navbar-toggle {margin:0;position: absolute;  padding: 1rem;left:1rem;top:1.2rem;background-color: transparent;background-image: none;border: 1px solid transparent;border-radius: 4px;}
.wmt { margin-top:150px;}
.navbar { background-color:#fff;position:fixed;top:0;display:inline-block;width:100%;z-index:99;box-shadow: 2px 0px 10px rgb(0 0 0 / 20%);text-align:center;border:0;}
.navigation {background: #fff;z-index: 9;}
.navigation .logo img {float: left;}
.nav-brand { position: relative; }
.nav-brand .logo-home { display:inline-block;height:60px;width:120px;margin-top:30px; transition: all .3s cubic-bezier(0.215,0.61,0.355,1);}
.nav-main {font-size: 0;}
.nav-main ul {margin-bottom: 0;}
.nav-main ul>li {display: inline-block;padding: 0 24px;}
.nav-main ul>li a { font-size:15px;color: #888;text-transform: uppercase;line-height: 60px;height:60px;display: inline-block;position: relative;border-bottom:3px solid rgba(255,255,255,0); transition: all .3s cubic-bezier(0.215,0.61,0.355,1); letter-spacing:1px;}
.nav-main ul>li a:hover, .nav-main ul>li:hover a {	text-decoration: none;color: #333;border-color:#cebea7;}
.ah { color: #333 !important;border-color:#cebea7 !important;}
/* about */
.about { padding:20px 40px;}
.about .xbt {  font-size:42px;line-height:1;color:#e0e0e0;}
.about p {  font-size:14px;line-height:2.8;margin:20px 0;}
.more { font-size:12px; color:#bbb;border-radius: 2rem;border:1px solid #ccc;padding:8px  36px;display:inline-block;}
.more:hover { background:#2c314a;color:#fff;border-color:#2c314a;}

/* banner */
.banner { background:transparent url("../images/okobannerbg.jpg") repeat-x center center;width:100%;height:580px;text-align:center;}
.banner .syc { text-align:center;}
.banner .syc img {width:150px;}
.banner .line { background: url("../images/line.png") no-repeat center center;height:40px;margin-top:30px;}
.banner .line h4{ font-size:14px;line-height:40px;color:#fff;letter-spacing: 1px;}
.banner .line-m { display:none;}
.banner .jdoko { margin-top:1.2rem}
.banner .jdoko a { font-size: 14px;color: #666;border: 1px solid #ddd;padding: 8px 36px;margin: 20px 0;display: inline-block;background:#fff;;letter-spacing:1px;}
.banner .jdoko a:hover {  background:#cebea7;color:#fff;border-color:#cebea7;}
.banner-m { display:none}
.banner .luck h3 { height:3rem;font-size:40px;color:#444;}

/* produce */
#n2 .t { text-align:center;}
#n2 { background: url("../images/n2.jpg") no-repeat top left  #fbfaf8;margin:0 auto;}
#n2 .tit-none { text-align:center;line-height:1.4;}
#n2 .heading-bracket { line-height:1.4;}
#n2 .heading-bracket span { font-size:28px;}
#n2 .ico-bar-horizontal { display:inline-block;}
#n2 .mt-list { margin:30px 0 ;}
#n2 .mt-list .img-responsive { max-width:80%;}
#n2 .mt-list div.t-pc{ padding:1rem 0; transition: all .3s cubic-bezier(0.215,0.61,0.355,1);border:8px solid rgba(255,255,255,0);}
#n2 .mt-list span { color:#ddd;border-bottom:1px solid #ddd;font-size:12px;line-height:20px;display:inline-block;width:6rem;margin-bottom:10px; transition: all .3s cubic-bezier(0.215,0.61,0.355,1);}
#n2 .mt-list .t-pc p { line-height:2.4;}

/* show*/
#n3 .hotmorepc { margin-top:150px;}
#n3 .tit-none { margin-top:100px;}
#n3 .heading-bracket span { font-size:28px;}
#n3 .tit-none b { font-size:60px;line-height:1.2;color:#333;margin:20px 0;display:block;margin-left:-2px;}
#n3 .tit-none p { font-size:22px;color:#999;border-bottom:1px solid #ccc;line-height:3;margin-right:80px;}
#n4 { background: url("../images/jdleft.jpg") no-repeat top left  #eef1f6;margin:0 auto;text-align:center;}

/*online-shop*/
#n4 .jdshop { width:480px;height:260px;background-color:#fff;margin:auto;box-shadow: 2px 0px 10px rgb(0 0 0 / 20%);display:block;padding:0 15px;}
.jdshopbg { background: url("../images/jdshopbg1.jpg") no-repeat top right  #fbf9fa;height:190px;margin:15px auto;border:1px solid #fceeea;display:inline-block;width:100%}
.jdshopbg h3 { font-size:1.6rem;line-height:1.6;margin-top:3rem;color:#333}
.jdshopbg span { font-size:1.2rem;letter-spacing: 4px;border-bottom:1px solid #ccc;display:block;color:#ccc;display:inline-block;}
.jdshopbg p { font-size:1.2rem;color:#bbb;line-height:4.2;}
.jdshopbg a { color:#fff;background:#ce2b37;padding:.6rem 4rem;margin-top:.2rem;display:inline-block;}
.jdshopbg a:hover {background:#cebea7; }
.jdshop em { color:#bbb;font-size:1.22rem;}

/*footer*/
.footer p { line-height:5rem;color:#555;text-align:center;font-size:1.2rem;}
.footer { background:#333}

/*!media*/
@media(min-width: 1024px) {
#n2 .mt-list div.t-pc:hover { background:#f6f4f1; border:8px solid #fff;border-color:#fff; transition: all .3s cubic-bezier(0.215,0.61,0.355,1);box-shadow: 2px 3px 8px 0px rgb(0 0 0 / 20%);}
#n2 .mt-list div.t-pc:hover span { color:#cebea7;border-bottom:1px solid #cebea7;width:12rem; transition: all .3s cubic-bezier(0.215,0.61,0.355,1);}
#n2 .mt-list div.t-pc:hover p { color:#000}
#n2 .mt-list .t-pc p { line-height:2.4;font-size:16px;}
}

@media all and (max-width: 1024px) {
.container {max-width: 100%;width: 100%;}
.t { text-align:center;}
.inner { padding:0 0 2rem 0;}
.nav-main { display:none;}
.navbar-toggle { display: inline-block;}
.heading-bracket { font-size:2rem;}
.banner{ height:45rem;background-position:right top;} 
.banner .jdoko a { font-size: 14px;color: #fff;background:#cebea7;border: 1px solid #cebea7;padding: .8rem 2.6rem;margin: 10px 0;display: inline-block;letter-spacing:0;}
.banner .luck h3 { height:3rem;font-family: 'Janson Text',Times,'Times New Roman',serif;font-size:2.6rem;}
.banner .syc img { width:13rem}
.banner .line { display:none;}
.banner .line-m { background: url("../images/line2.png") no-repeat center center;height:40px;display:none;}
.banner .line-m h4{ font-size:14px;line-height:40px;color:#fff;}
.wmt { margin-top:6rem;}
.about { padding:0;}
.about p { font-size:1.4rem;line-height:2.4;text-indent:3rem;text-align:justify;text-justify:inter-word;text-justify:inter-ideograph;}
.more { margin:0 0 2rem 0;}
.tit-none { display:none;}
.tit-min { display:inline-block;width:100%;}
.heading-min { margin:0 0 1rem 0;}
.heading-min span{ font-size:2rem;border-bottom:1px solid #cebea7; display:inline-block;    font-weight:bold;line-height:2;color:#444;letter-spacing: 0.05rem;}
.xbt-min { font-size:1rem;color:#ddd;margin:0 0 2rem 0;}
#n1 .col-sm-6 ,#n3 .col-sm-6 { width:100%;}
#n2 .col-xs-6 { width:50%;}
#n2 { background-size:70%;width:auto;}
#n2 .mt-list { margin:0 0 3rem 0;}
#n3.inner { padding:0;}
#n3 .tit-min p { text-align:left;margin:0 15px 15px 15px;border-bottom:1px solid #ccc;color:#aaa;font-size:1.8rem;line-height:2.4;}
#n3 video { margin-bottom:4rem;}
#n4 .jdshop { width:auto;box-shadow:none;height:auto;}
#n4 .jdshop h3 { font-weight:bold;}
#n4 { background:none;}
#n4 { padding:0;}
#n4 .container { margin:0;padding:0;width:100%;max-width: 100%;}
.jdshopbg { border:none;margin:0;}
.navbar {height:6rem;background-color:#fff;margin:0; background:#fff;}
.nav-brand { height:6rem;}
.nav-brand .logo-home {margin:0;width:6rem;height:3rem;margin-top:1.9rem; transition: all .3s cubic-bezier(0.215,0.61,0.355,1)}

}