@charset "utf-8";
/* CSS Document */
/**
 Author: Lucky
 E-Mail: 874110672@qq.com
 QQ: 874110672
 Date: 2012-12-17
**/
/**common**/
.logo,.nav,.left,.spl,.vpl,.apl,.vdo_ul ul li,.ppl,.jpsl,.prouce_title a,.index_logo,.index_nav,.i_c1,.i_c2,.i_c3,.i_c4,.i_c5{ float:left;}
.right,.spr,.vpr,.apr,.ppr,.jpsr{ float:right;}
.pagebar{float:right;}
.pagebar ul li{float:left;}
.left,.vpl,.apr,.franchisee ul li p span,.vdo_ul ul li,.pagebar ul li,.prouce_title a{_display:inline;}
.left_title,.left_content,.left_content ul li,.left_content ul li a,.right_title,.right_content,.video,.footer,.line,.about,.franchisee,.video_list,.in_p,.in_page,.plat,.Jewelry_knowledge,.produce,.memorabilia,.index_header,.index_banner,.index_main,.i_main,.memo_title{ width:100%;}
.spl,.spr,.nav ul li a,.left_content ul li a,.video h5,.vdo_page span,.apl,.apr,.pagebar ul li a,.in_page span,.jpsr span,.jpsr span a,.prouce_title a,.index_nav ul li a{ display:block;}
.sub_banner,.content,.right,.footer,.left_content ul,.franchisee ul,.in_page,.Jewelry_knowledge,.jpsr h6{ overflow:hidden;}

/**header**/
.header{ width:100%; height:84px; background:url(../images/header.jpg) repeat-x;}
/**logo**/
.logo{ width:345px;}
/**nav**/
.nav{ width:623px; position:relative; background:url(../images/nav.jpg) no-repeat; z-index:999;}
.nav ul{ width:100%;}
.nav ul li{ float:left;}
.nav ul li a{ height:84px;}
/**nav change bg**/
.nav ul li a.n_1 {width:75px;}
.nav ul li a.n_1:hover { background:url(../images/nav.jpg) no-repeat 0 -84px;}
.nav ul li a.n_2 {width:102px;}
.nav ul li a.n_2:hover { background:url(../images/nav.jpg) no-repeat -75px -84px;}
.nav ul li a.n_3 {width:81px;}
.nav ul li a.n_3:hover { background:url(../images/nav.jpg) no-repeat -177px -84px;}
.nav ul li a.n_4 {width:91px;}
.nav ul li a.n_4:hover { background:url(../images/nav.jpg) no-repeat -258px -84px;}
.nav ul li a.n_5 {width:84px;}
.nav ul li a.n_5:hover { background:url(../images/nav.jpg) no-repeat -349px -84px;}
.nav ul li a.n_6 {width:98px;}
.nav ul li a.n_6:hover { background:url(../images/nav.jpg) no-repeat -433px -84px;}
.nav ul li a.n_7 {width:92px;}
.nav ul li a.n_7:hover { background:url(../images/nav.jpg) no-repeat -531px -84px;}
/**sub_banner**/
.sub_banner{ position:relative; width:100%; height:249px;}
.sub_banner img{ position:absolute; width:1600px; left:50%; margin-left:-800px; height:249px;}
/**line**/
.line{ height:34px; background:url(../images/line_bg.jpg) repeat-x;}
/**content**/
.content{ width:100%; background:url(../images/content_bg.jpg) top right no-repeat;}
/**left**/
.left{ width:180px; margin-left:18px;}
.left_title{ height:30px; margin-top:14px;}
.left_content ul{ background:url(../images/left_content.jpg) top center no-repeat; padding-top:20px;}
.left_content ul li{ line-height:29px; text-align:center; margin-bottom:8px;}
.left_content ul li a{ height:29px; background:url(../images/left_a.jpg) top center no-repeat;}
.left_content ul li a:hover{ font-weight:bold; background:url(../images/left_hover.jpg) top center no-repeat;}
/**right**/
.right{ width:753px; background:url(../images/right_bg.jpg) bottom left no-repeat; margin-bottom:20px;}
.right_title{ height:46px; line-height:46px;}
.spl{ font-weight:bold; padding-left:50px;}
.spr{ color:#ac3730; padding-right:28px;}
.spr a{ color:#ac3730;}
/**video**/
.video h5{ text-align:center; line-height:70px;}
.vdo{ width:701px; margin:0 auto; height:536px; background:url(../images/video_bg.jpg) top center no-repeat;}
.vdo_page{ line-height:80px; width:701px; margin:0 auto;}
.vdo_page span{ font-weight:bold;}
.vpl{ padding-left:33px;}
/**footer**/
.footer{ height:60px; background:url(../images/footer_bg.jpg) repeat-x; padding-top:54px;}
.footer p{ text-align:center; margin-bottom:9px;}
.index_footer{ height:60px; background:url(../images/index_footer.jpg) repeat-x; padding-top:27px;}
.index_footer p{ text-align:center; margin-bottom:9px;}

/**about**/
.about{ margin-top:12px;}
.apl{ width:447px;}
.apr{ width:260px; margin-right:16px;}
.apl p{ width:390px; margin:20px auto; text-indent:24px; line-height:24px;}
/**franchisee**/
.franchisee ul{ width:680px; margin:20px auto 50px auto;}
.franchisee ul li{ background:url(../images/franchisee.png) top center no-repeat; height:90px; padding-left:77px; width:603px;}
.franchisee ul li h5{ line-height:24px; color:#dec401; padding-top:10px;}
.franchisee ul li h5 a{ color:#dec401;}
.franchisee ul li p{ line-height:22px; color:#edd6a4;}
.franchisee ul li p span{ margin:0 30px;}
/**video_list**/
.vdo_ul ul li{ margin:22px 27px 0 27px; width:191px; height:130px; background:url(../images/video_list.jpg) top center no-repeat; padding:1px 0 27px 1px; position:relative;}
.vdo_ul ul li b{ position: absolute; left:1px; width:186px; height:21px; bottom:32px; display:block; line-height:21px; background:url(../images/vdo_ul_b.png) no-repeat; font-weight:normal; text-indent:13px;}

.vdo_ulb ul li{ margin:22px 27px 0 27px; width:191px; height:240px; padding:1px 0 27px 1px; position:relative; float:left; overflow:hidden; _display:inline;}
.vdo_ulb ul li img{ width:186px; height:240px;}
.vdo_ulb ul li b{ position: absolute; left:1px; width:186px; height:21px; bottom:27px; display:block; line-height:21px; background:url(../images/vdo_ul_a.png) no-repeat; font-weight:normal; text-indent:13px;}

.pagebar{ margin:20px 0; text-align:right; overflow:hidden;}
.pagebar ul li{ margin-right:8px; line-height:22px; height:22px;}
.pagebar ul li a{ color:#590a00;}
.pagebar ul li a:hover{ color:#fffefe;}
.pa_l,.pa_r{ width:53px; text-align:center;}
.pa_r{ background:url(../images/pa_r.jpg) top center no-repeat;}
.pa_l{ background:url(../images/pa_l.jpg) top center no-repeat;}
.pa_m{ width:18px; background:#e6b247; text-align:center;}
.pa_m:hover{ background:#654c18;}
/**in_detail**/
.in_detail{ width:676px; margin:0 auto;}
.in_detail h4{ padding-top:20px; line-height:48px; background:url(../images/in_detail_h4.jpg) bottom repeat-x; color:#ffc54e;}
.in_detail h4,.in_detail h6{ text-align:center;}
.in_detail h6{ line-height:41px; font-weight:normal; color:#996c10;}

.in_p,.in_p p{ line-height:24px;}
.in_page{ padding:40px 0; background:url(../images/in_page.jpg) top repeat-x;}
/**map**/
.plat{ position:relative;}
.mapsel{ position:absolute; left:500px; top:450px; width:147px; height:18px; line-height:18px; text-align:center;}
/**Jewelry_knowledge**/
.Jewelry_knowledge{ width:656px; margin:30px auto 10px auto;}
.jpsl{ width:337px;}
.jpsl img{ border:solid 1px #f5cc84; width:336px; height:225px;}
.jpsr{ width:300px;}
.jpsr h4{ color:#ffc54e; line-height:41px; background:url(../images/jpsr_h4.jpg) bottom no-repeat;}
.jpsr h6{ margin-top:15px; line-height:45px; text-align:right; font-weight:normal;}
.jpsr h6 a{ float:left; font-weight:bold;}
.jpsr p{ color:#dbdbdb; line-height:18px; height:105px;}
.jpsr span a{ width:72px; height:22px; line-height:22px; background:url(../images/jpsr_a.jpg) top center no-repeat; text-align:center; color:#390700;}
.j_list ul{ padding:30px 0;}
.j_list ul li{ line-height:30px; text-align:right; padding-right:20px; width:636px;}
.j_list ul li a{ float:left; text-indent:24px; background:url(../images/j_list_a.png) 7px 11px no-repeat;}
.j_bg{ background:url(../images/j_bg.jpg) repeat-x;}
/**prouce_title**/
.prouce_title{ height:60px; width:690px; margin:0 auto; background:url(../images/prouce_title.jpg) no-repeat; padding-left:17px;}
.prouce_title a{ width:105px; height:30px; line-height:30px; text-align:center; margin:16px 17px 0 0;}
.prouce_title a:hover{ background:url(../images/prouce_title_hover.jpg) no-repeat;}
/**box**/
.change_pic{ width:633px; height:565px; margin:36px auto 20px auto; background:url(../images/change_pic_bg.jpg) top center no-repeat; padding:0 30px;}
#ProductShow{ width: 633px; height:421px; padding-top:16px; margin-bottom:26px;}
.pro_img{ width: 633px; height:421px; text-align:center; background:#000;}
.pro_img img{ height:421px; vertical-align:middle;}
#wrapper{ width:599px; margin:0 auto;}
#LeftButton,#RightButton{ cursor:pointer; height:66px; width:17px; float:left;}
#LeftButton{ background:url(../images/lefta.jpg) no-repeat;}
#RightButton{ background:url(../images/righta.jpg) no-repeat;}
#CSSContent{ width:565px;}
#CSSBox{width:565px; overflow:hidden; float:left;}
#CSSBox ul li{ float:left; margin:0 7px 0 10px; _display:inline;;}
#CSSBox ul li img{ width:94px; height:64px;}	
#CSSBox ul li a{ display:block; padding:1px; width:94px; height:64px; background:url(../images/product_a.png) no-repeat}
#CSSBox ul li a:hover{background:url(../images/product_ahover.png) no-repeat;}
/**index**/
.index_header{ height:83px; background:url(../images/index_header.jpg) repeat-x;}
.index_logo{ width:352px; height:83px;}
/**index_banner**/
.index_banner{ height:467px; overflow:hidden; position:relative; z-index:1;}
#JS_banner{position:relative; width:100%; height:467px; overflow:hidden;}
#JS_banner .imgarea{position:absolute; width:1600px; left:50%; margin-left:-800px;}
#JS_banner .imgarea img{display:none; overflow:hidden;}
#JS_banner .btnarea{position:absolute; left:45%; bottom:10px;}
#JS_banner .btnarea span{float:left; display:block;	margin-right:5px; width:10px; height:10px; background: url(../images/i_1.jpg) no-repeat; overflow: hidden;}
#JS_banner .btnarea .on{background:url(../images/i_2.jpg) no-repeat;}
/**index nav**/
.index_nav{width:628px; height:83px; background:url(../images/index_nav.jpg) no-repeat; position:relative; z-index:999;}
.index_nav ul{width:100%;}
.index_nav ul li{float:left;}
.index_nav ul li a{height:83px;}
/**nav change bg**/
.index_nav ul li a.i_1 {width:76px;}
.index_nav ul li a.i_1:hover { background:url(../images/index_nav.jpg) no-repeat 0 -83px;}
.index_nav ul li a.i_2 {width:100px;}
.index_nav ul li a.i_2:hover { background:url(../images/index_nav.jpg) no-repeat -76px -83px;}
.index_nav ul li a.i_3 {width:85px;}
.index_nav ul li a.i_3:hover { background:url(../images/index_nav.jpg) no-repeat -176px -83px;}
.index_nav ul li a.i_4 {width:87px;}
.index_nav ul li a.i_4:hover { background:url(../images/index_nav.jpg) no-repeat -261px -83px;}
.index_nav ul li a.i_5 {width:86px;}
.index_nav ul li a.i_5:hover { background:url(../images/index_nav.jpg) no-repeat -348px -83px;}
.index_nav ul li a.i_6 {width:97px;}
.index_nav ul li a.i_6:hover { background:url(../images/index_nav.jpg) no-repeat -434px -83px;}
.index_nav ul li a.i_7 {width:97px;}
.index_nav ul li a.i_7:hover { background:url(../images/index_nav.jpg) no-repeat -531px -83px;}
/**index_main**/
.index_main{ background:url(../images/index_main.jpg) repeat-x;}
.i_main{ background:url(../images/i_main.jpg) top center no-repeat;}
.i_content{ width:984px; margin:0 auto;}
.index_main,.i_main,.i_content{ height:100px;}
.i_c1{ width:86px; padding-left:96px;}
.i_c2{ width:91px; padding-left:85px;}
.i_c3{ width:136px; padding:0 32px 0 77px;}
.i_c4{ width:132px; padding-left:87px;}
.i_c5{ width:118px; padding-left:44px;}
.i_c1,.i_c2,.i_c4,.i_c5{ padding-top:28px;}
/**index scroll**/
.case_show_list li a{display:block; width:102px;height:98px;}
.case_show_list li img{float:left;width:102px;height:98px;}
.s2_prev,.s2_next{ width:17px; height:98px; display:inline; cursor:pointer; float:left;}
.s2_prev{background:url(../images/prev.jpg) center no-repeat;}
.s2_next{background:url(../images/next.jpg) center no-repeat;}
.s2_mask{width:102px;height:98px;overflow: hidden; float:left;position:relative; z-index:1;}
.s2_mask div{ float:left;}
.s2_mask li{display:inline;width:102px;float:left;overflow:hidden;}
/**memorabilia**/
.memorabilia{background:url(../images/content_bg.jpg) top left no-repeat;}
.memo_title{height:49px; margin-top:7px; line-height:49px;}
.memo_content{padding-left:5px; width:975px; margin-bottom:30px;}
.controls{text-align:right;}
.btn{border:none;background:#3A0700; color:#aaa; padding:3px 10px; cursor:pointer;}
.btn-disabled{color:#fff;}
.sly{overflow:hidden;}
.sly > ul{list-style:none; margin:0; padding:0;}
.sly > ul li{position:relative; margin:0; padding:0; text-align:center; cursor:pointer;}
.pages{padding:9px 0 0 0; text-align:center; background:url(../images/bg_page.png) no-repeat; height:16px;}
.pages li{display:inline-block; width:9px; height:9px; margin:0 55px; text-indent:-999px; background:#5f0b00; border-radius: 0px; cursor:pointer; overflow: hidden; border: 1px solid #7b322d; float:left; _display:inline;}
.pages li.active{background: #840a00; border-color:#842e28;}
/* Horizontal examples */
#horizontal .scrollbar{margin:0 0 0 8px; height: 5px; background:#440700; border:1px solid #440700; border-width:3px 20px 3px 20px; border-radius:0; margin-bottom:3px;}
#horizontal .scrollbar .handle{width:100px; height:5px; background:#8f1e1e; font-size:5px; line-height:5px;}
#horizontal .example1 .sly{height:170px;}
#horizontal .example1 .sly ul{height:100%;}
#horizontal .example1 .sly ul li{float:left; width:187px; height:100%; margin:0 1px 0 0; font-size:50px; line-height:170px;}
#horizontal .example2 .sly {height:200px;}
#horizontal .example2 .sly ul{height:100%;}
#horizontal .example2 .sly ul li{float:left; width:266px; height:100%; margin:0 1px 0 0; font-size:50px; line-height:200px;}
#horizontal .example3 .sly{height:370px;}
#horizontal .example3 .sly ul{height:100%;}
#horizontal .example3 .sly ul li{float:left; /*width:486px;*/ height:100%;}
#horizontal .example3 .sly ul li.active{background:none; color:#fff;}
#horizontal .example4 .sly{height:160px;}
#horizontal .example4 .sly ul{height:100%;}
#horizontal .example4 .sly ul li{float:left; padding:0 20px; width:360px; height:100%; font-size:50px; opacity:0.2; cursor: default; overflow:hidden; background:none; box-shadow:none; font-size:14px; text-align:justify; color:#444;	-webkit-transition: opacity 0.3s linear; -moz-transition:opacity 0.3s linear; -o-transition:opacity 0.3s linear; transition:opacity 0.3s linear;}
#horizontal .example4 .sly ul li.active{opacity:1;}
/* Vertical examples */
#vertical .slyWrap{margin:1em 0; width:470px; float:left;}

#vertical .scrollbar{width:5px;}
#vertical .scrollbar .handle{height:100px; width:100%;}

#vertical .example1{position:relative;}
#vertical .example1 .sly{width:445px; height:500px; border:1px solid #aaa;}
#vertical .example1 .sly ul{width: 100%; height:100%; overflow:hidden;}
#vertical .example1 .sly ul li{height:80px; margin:0 0 1px 0; font-size:40px; line-height:80px;}
#vertical .example1 .scrollbar{ position:absolute; top:0; right:10px; height:500px;}

#vertical .example2{position: relative;}
#vertical .example2 .sly{width: 445px; margin-left:25px; height:500px; border:1px solid #aaa; background:#fff;}
#vertical .example2 .sly > div{padding:1em 1.5em;}
#vertical .example2 .scrollbar{position:absolute; top:0; left:10px; height:500px;}

/* Vertical example */
#infinite .controlbar{margin:2em 0 1.5em; }
#infinite .frameWrap{position:relative; height:500px;}
#infinite .frame{height:500px; margin-right:20px; overflow:hidden; border:1px solid #888;}
#infinite .frame ul{width:100%; margin:0; padding:0; list-style:none;}
#infinite .frame ul li{margin:0 0 5px 0; padding:0; height:200px; line-height:200px; font-size:30px; border-bottom:1px solid #aaa; background:#eee; color:#888; text-align:center;}

#infinite .scrollbar{position:absolute; top:0; right:0; width:5px; height:498px;}
#infinite .scrollbar .handle{height:100px; width:100%;}
/* ==========================================================================
   Non-semantic helper classes
   ========================================================================== */
/* For image replacement */
.ir{display:block; border:0; text-indent:-999em; overflow:hidden; background-color:transparent; background-repeat:no-repeat; text-align:left; direction:ltr; *line-height:0;}
.ir br{display:none;}
/* Floats */
.fleft{float:left;}
.fright{float:right;}

/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden {display:none !important; visibility:hidden;}

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden{border:0; clip:rect(0 0 0 0); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; width:1px;}

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus{clip:auto; height:auto; margin:0; overflow:visible; position:static; width:auto;}

/* Hide visually and from screenreaders, but maintain layout */
.invisible{visibility:hidden;}

/* Contain floats: h5bp.com/q */
.clearfix:before, .clearfix:after{content:""; display:table;}
.clearfix:after{clear:both;}
.clearfix{*zoom:1;}

/* PrettyPrint styles */
.pln{color:#000}@media screen{.str{color:#080;}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun,.opn,.clo{color:#660}.tag{color:#008}.atn{color:#606;}
.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic;}
.typ{color:#404;font-weight:bold}.lit{color:#044}.pun,.opn,.clo{color:#440}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060;}}
ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none;}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee;}

/*date*/
.date{ width:100%; height:35px; line-height:35px; background:url(../images/memo_d.jpg) no-repeat;}
.date li{ float:left; color:#FFF; width:121px; text-align:center;}
/***pagebar***/
/**
.pageList{width:716px; height:28px; line-height:28px; margin:0 auto; color:#5a3700;}
.pageList .l{float:left;}
.pageList .l em {color:#5a3700;}
.pageList .r {float:right;}
.pageList .r li {float:left; height:20px;}
.pageList .r li a {padding:0px 5px; color:#5a3700;}
.pageList .r li a:hover{color:#ca3900;}
.pageList .r li a.selected{color:#ca3900;}
.pageList .on {font-weight:bold;}
**/
.content-margin{margin-left:50px;width:auto;min-height: 300px;}
div.right_content{line-height: 24px;}