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

.main{ margin: 4px; border: 1px solid #ecac00;}

/* logo */
.logo-wrap{ position: relative;}
.logo{ position: absolute; top: 0; left: 0; width: 20.3%; height: 3em; margin-top: -4px; float: left; background: #251d1a; text-align: center; z-index: 5;}
.logo .icon{ background: url("../images/logo.png") no-repeat 0 0 / 100% auto; display: block; width: 65%; height: 45%; margin: 4px auto 0 auto; text-indent: -9999px;}
.logo hr{ width: 65%; margin: 2px auto; border: none; border-bottom: 1px solid #ecac00;}
.logo .desc{ background: url("../images/txt_1.png") no-repeat 0 0/ 100% auto; display: block; width: 43%; height: 19%; text-indent: -9999px; margin: 0 auto;}

/* banner */
.banner{ margin-top: 4px; background: url("../images/banner_m.png") no-repeat top center / 100% auto;}
.banner .wrap{ height: 17.5em; position: relative;}
.banner img{ display: block; margin: -9px 0 0 7px; width: 97.75%;}
.banner .sz{ position: absolute; top: 54%; left: 42.5%; z-index: 3; width: 20.5%;}
.banner .yz { position: absolute; z-index: 2; margin: 0;}
.banner .yz-1{ top: 67.5%; left: 15.42%; width: 14.08%; 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: 52.5%; left: 59.92%; width: 18.59%;  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: 60.5%; left: 67.5%; width: 9.58%; 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: 65.5%; left: 78.67%; transform: rotate(7.92deg); width: 5.75%;}
.banner .py { position: absolute; z-index: 3; width: 82.5%; 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: 47%; top: 22%;}

@-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: 1em;}
.part-2{ margin-top: 1.5em;}
.part-1 .tlt{ background: url("../images/tlt_1.png") no-repeat;}
.part-2 .tlt{ background: url("../images/tlt_2.png") no-repeat;}
.part .tlt{ width: 89.08%; height: 9em; margin: 0 auto; text-indent: -9999px; background-size: 100% auto;}
.part .part-con{ margin-top: -15px;}
.part ol{ width: 110%; margin: 0; padding: 0;}
.part li{ width: 34.67%; height: 13.7em; float: left; padding: 3.5%; margin: 0 2.9% 1em 1.5%; background: url("../images/border_bg.png") no-repeat 0 0/ 100% auto; 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; width: 70.8%;}
.part li:hover .goods-pic img{ transform: scale(1.05);}
.part li .goods-name{ margin-top: 10px; color: #caa163; font-size: 13px; text-align: center; text-decoration: none; transition: .3s linear; line-height: 2; white-space: nowrap;}
.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: 48%; height: 24px; margin: 5px auto; line-height: 24px; color: #c99039; font-size: 16px; 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;}

.part-2 li:first-child .goods-pic img{ width: 34%;}
.part-2 li:nth-child(2) .goods-pic img{ width: 40%;}
.part-2 li:nth-child(3) .goods-pic img{ width: 50%;}
.part-2 li:nth-child(4) .goods-pic img,.part-2 li:nth-child(5) .goods-pic img{ width: 41.6%;}
.part-2 li:nth-child(6) .goods-pic img{ width: 60%;}
.part-2 li:nth-child(7) .goods-pic img{ width: 32.8%;}
.part-2 li:nth-child(8) .goods-pic img{ width: 68.4%;}

/* footer */
.footer{ border-top: 3px solid #ecac00; margin-top: 3em;}
.footer-logo{ display: block; width: 27%; height: 3em; background: url("../images/logo2.png") no-repeat 0 0/ 100% auto; margin: 1.5em auto 1em auto; text-indent: -9999px;}
.other-info{ color: #caa163; font-size: 12px; margin-bottom: 1em; width: 111%;}
.other-info div{ float: left; margin-right: 6.5%;}
.other-info div i{ width: 28px; height:  28px; display: inline-block; background: url("../images/other_info.png") no-repeat 0 0/ 142px auto; vertical-align: middle;}
.other-info div i.icon-1{ background-position: 0 0;}
.other-info div i.icon-2{ background-position: -39px 0;}
.other-info div i.icon-3{ background-position: -77px 0;}
.other-info div i.icon-4{ background-position: -116px 0;}