body{ font: 14px '\5FAE\8F6F\96C5\9ED1'; min-width: 1240px; background: url("../images/bg.png") #000;}
.fl{ float: left;}
.fr{ float: right;}
.ovf{ overflow: hidden;}
.wrap{ width: 1200px; margin: 0 auto;}
.clearfix{ clear: both;}

.main{ margin: 19px; border: 1px solid #ecac00; min-width: 1200px; overflow: hidden;}

/* logo */
.logo-wrap{ position: relative;}
.logo{ position: absolute; top: 0; left: 0; width: 244px; height: 121px; margin-top: -19px; float: left; background: #251d1a; text-align: center; z-index: 5;}
.logo .icon{ background: url("../images/logo.png") no-repeat; display: block; width: 160px; height: 55px; margin: 19px auto 0 auto; text-indent: -9999px;}
.logo hr{ width: 160px; margin: 5px auto 8px auto; *margin: 0 auto; border: none; border-bottom: 1px solid #ecac00;}
.logo .desc{ background: url("../images/txt_1.png") no-repeat; display: block; width: 104px; height: 23px; text-indent: -9999px; margin: 0 auto;}

/* banner */
.banner{ margin-top: 19px; background: url("../images/banner_m.png") no-repeat top center;}
.banner .wrap{ height: 743px; position: relative;}
.banner img{ display: block; margin: -35px 0 0 27px;}
.banner .sz{ position: absolute; top: 411px; left: 510px; z-index: 3;}
.banner .yz { position: absolute; z-index: 2; margin: 0;}
.banner .yz-1{ top: 503px; left: 185px; transform: rotate(10deg); -moz-animation: rotate-yz 1.8s infinite .2s; -webkit-animation: rotate-yz 1.8s infinite .2s; animation: rotate-yz 2.8s infinite .2s;}
.banner .yz-2{ top: 391px; left: 716px;  transform: rotate(10deg); -moz-animation: rotate-yz 1.8s infinite .2s; -webkit-animation: rotate-yz 1.8s infinite .2s; animation: rotate-yz 2.8s infinite .2s;}
.banner .yz-3{ top: 451px; left: 810px; width: 115px; transform: rotate(10deg); -moz-animation: rotate-yz 1.8s infinite .5s; -webkit-animation: rotate-yz 1.8s infinite .5s; animation: rotate-yz 2.8s infinite .5s;}
.banner .yz-4{ top: 482px; left: 944px; transform: rotate(7.92deg); width: 69px;}
.banner .py { position: absolute; z-index: 3; margin: 0; -webkit-animation: trans-py 1.5s linear infinite; -moz-animation: trans-py 1.5s linear infinite; animation: trans-py 1.5s linear infinite;}
.banner .py-1{ right: 30px; top: 0;}
.banner .py-2{ right: 33%; top: 30%;}

@-webkit-keyframes rotate-yz {
    from, to{ -webkit-transform: rotate(10deg);}
    50%{ -webkit-transform: rotate(-10deg);}
}

@-moz-keyframes rotate-yz {
    from, to{ -moz-transform: rotate(10deg);}
    50%{ -moz-transform: rotate(-10deg);}
}

@keyframes rotate-yz {
    from, to{ transform: rotate(10deg);}
    50%{ transform: rotate(-10deg);}
}

@-webkit-keyframes trans-py {
    from, to{ -webkit-transform: translate(30px, -35px);}
    50%{ -webkit-transform: translate(0, 0);}
}

@-moz-keyframes trans-py {
    from, to{ -moz-transform: translate(30px, -35px);}
    50%{ -moz-transform: translate(0, 0);}
}

@keyframes trans-py {
    from, to{ transform: translate(30px, -35px);}
    50%{ transform: translate(0, 0);}
}


/* part */
.part-1{ margin-top: 80px;}
.part-2{ margin-top: 30px;}
.part .tlt{ width: 1069px; height: 371px; margin: 0 auto; text-indent: -9999px;}
.part-1 .tlt{ background: url("../images/tlt_1.png") no-repeat; }
.part-2 .tlt{ background: url("../images/tlt_2.png") no-repeat;}
.part .part-con{ margin-top: -60px;}
.part ol{ width: 110%; margin: 0; padding: 0;}
.part li{ width: 208px; height: 260px; float: left; padding: 30px 21px 21px; margin: 0 66px 30px 0; background: url("../images/border_bg.png") no-repeat; list-style: none;}
.part li a{ display: block;}
.part li .goods-pic{ border-bottom: 1px solid #ecac00; padding-bottom: 14px;}
.part li .goods-pic img{ display: block; margin: 0 auto; transition: .3s linear;}
.part li:hover .goods-pic img{ transform: scale(1.05);}
.part li .goods-name{ margin-top: 10px; color: #caa163; font-size: 16px; text-align: center; text-decoration: none; transition: .3s linear;}
.part li .goods-name:hover{ color: white;}
.part li p{ margin: 0; color: #caa163; font-size: 12px; text-align: center;}
.part li .goods-price{ width: 120px; height: 30px; margin: 9px auto; line-height: 30px; color: #c99039; font-size: 22px; text-align: center; text-decoration: none; border: 1px solid #caa163; border-radius: 2em; transition: .3s linear;}
.part li .goods-price i{ font-size: 14px; font-style: normal;}
.part li .goods-price:hover{ color: white; background: #b61a00; border-color: #b61a00;}

/* footer */
.footer{ border-top: 3px solid #ecac00; margin-top: 100px;}
.footer-logo{ display: block; width: 234px; height: 81px; background: url("../images/logo2.png") no-repeat; margin: 50px auto 40px auto; text-indent: -9999px;}
.other-info{ color: #caa163; font-size: 28px; margin-bottom: 55px; width: 111%;}
.other-info div{ float: left; margin-right: 161px;}
.other-info div i{ width: 52px; height: 52px; display: inline-block; margin-right: 5px; background: url("../images/other_info.png") no-repeat; vertical-align: middle;}
.other-info div i.icon-1{ background-position: 0 0;}
.other-info div i.icon-2{ background-position: -77px 0;}
.other-info div i.icon-3{ background-position: -154px 0;}
.other-info div i.icon-4{ background-position: -231px 0;}