section h3:before{content: "";  display: block; width: 15.25px; height: 25.5px; background: url(/promote/images/pen/icon.png); background-position:-218px 0; float: left; clear: both; margin-right: 8px;}
section h3:after{clear: both; content: ""; display: block;}
section h3 p{float: left; line-height: 30px; font-size:1.8em; color: #004672; font-weight: 800;}
#banner img{height: auto;width: 100%;}
#banner nav{background: #dcdddd;width: 100%; padding:8px 3px;box-sizing: border-box;}
#banner ul{display: flex; width: 100%; justify-content:space-between; }
#banner li{text-align: center; width: 150px;height: 58px; line-height:55px; background: url(/promote/images/pen/nav.png); color: #fff; font-weight: bold; font-size: 1.7em;}
#container section:not(#banner){margin-top: 20px; padding:0 15px; box-sizing: border-box;}
#banner a:last-child li{background: none;}

section .good-list{padding: 25px 0 10px; display:flex; justify-content: space-between;}
section .good-list .content_box{background: #fff; width: 183px; height: 222px; margin: 10px; border-radius: 15px;}
.img_box{height: 83%; width: 100%; display: flex; padding-top: 18px; box-sizing: border-box; position: relative;}
.price_box{height: 17%; width: 100%; content: "";}
section img{margin: auto; width: auto; height: 100%;}
section .img_box font{text-align: center; position: absolute; color: #909090; left: 46px; top:12px; font-size: 0.7em;}
.good-list>.box_b{width: 210px; height: 250px; background: url(/promote/images/pen/icon.png); background-position:bottom left; position: relative; margin: 35px 0 0 5px;}
.good-list>.box_b:before{position: absolute; display: block; content: ""; background:url(/promote/images/pen/icon.png); width: 212px; height: 78px; top: -45px; left: -5px}
.good-list>.box_b>font{position: absolute; color: #fff100; font-size: 1.2em; font-weight: bold; top: -30px; left: 12px; text-align: center; display: block; width: 37px; height: 39px;}
.good-list>.box_b>h4{position: absolute; color: #fff; font-size: 1.75em; font-weight: bold; top: -18px; left: 67px; text-align: center; display: block; line-height:29px; text-shadow: 2px 2px 1px #717171;}
.good-list .price{width: calc(100% - 105px); height: 100%;}
.good-list .price>*{width: 100%; display: block;}
.good-list .price>font{white-space: nowrap; font-size: 5pt; text-align: center;}
.good-list .price>em{text-align: center; font-size: 1.2em; color: red; font-weight: bold; font-style: oblique;}
.good-list .price>em b{font-size: 5pt;}
.good-list .car{width: 105px; height: 100%; content: ""; display: block; background: url(/promote/images/pen/icon.png); background-position:-213px -24px; cursor: pointer;}

#tab-02 .good-list:nth-child(2) > .box_b{background-position:210px bottom;}
#tab-02 .good-list:nth-child(3) > .box_b{background-position:0 -85px;}
#tab-02 .good-list:nth-child(4) > .box_b{background-position:210px -85px;}

#tab-03{font-size: 16pt; line-height: 1.5em; text-align: justify;}
#tab-03 img{float: left; margin-right: 15px}

.style-list{margin: 30px 0; }
#tab-04 .style-list .row>div{width: 143px;}
.style-list>.row{width: 100%; display: flex; justify-content: space-between;  border-bottom: 2px dashed rgb(0, 109, 105); padding: 0 20px 15px; margin-bottom: 20px;}
#tab-04 h4{ text-align: center; line-height: 38px; color: #fff; font-size: 1.35em; padding-top: 5px; border-radius: 25px;box-shadow: 3px 3px 2px #bebebe;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#008fc4+0,018e85+100 */
background: rgb(0,143,196); /* Old browsers */
background: -moz-linear-gradient(top, rgba(0,143,196,1) 0%, rgba(1,142,133,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0,143,196,1) 0%,rgba(1,142,133,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0,143,196,1) 0%,rgba(1,142,133,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008fc4', endColorstr='#018e85',GradientType=0 ); /* IE6-9 */
}
#tab-05 .box_b{padding: 10px 8px; border: 2px dashed rgb(0, 109, 105); margin: 10px; width: calc(50% - 20px); border-radius: 30px; text-align: justify}
#tab-05 .box_b:last-child{border: none;}
#tab-05 h4{color:rgb(0, 109, 105); font-weight: bold; font-size: 1.75em; margin-bottom: 8px;}
#tab-05 h4 img{margin-right: 8px;}
#tab-05 .box_b p{line-height: 1.65em; font-size: 1.5em;}

@media  only screen and (max-width: 960px){
    #container{overflow: hidden;}
    #banner nav{display: none;}
    section .good-list{display: block;}
    .good-list>.box_b{display: block; float: left; margin: 35px calc((100% - 420px)/4) 8px}
    #tab-04 img{width: calc((100% - 143px)/2); }
}
@media  only screen and (max-width: 768px){
    #tab-03 img{position: absolute; z-index: -1; max-width: 404px; height: auto; top: -15px; left: -15%;}
    #tab-03{width: 85%; margin:155px 0 0 15%; padding:12px 5% 0 10% !important; position: relative; box-sizing: border-box; background: rgba(255, 255, 255, 0.95);}
    #tab-05 .box_b{width: 100%; margin: 0;}
    #tab-05 img{display: block; margin: auto;}
    #container section:not(#banner){padding: 3px; box-sizing: border-box;}    
}
@media  only screen and (max-width: 450px){
    .good-list>.box_b{display: block; float: left; margin: 35px calc((100% - 210px)/2) 8px}
    .style-list>.row{display: block;}
    #tab-04 .style-list .row>div{width: 100%; margin-bottom: 12px;}
    #tab-04 img{width: 50%; float: left;}
    section h3:before{display: none;}
}