@charset "utf-8";
/* CSS Document */

.section { }
.section .title { margin-bottom: 20px; }
.section .title h3 { font-size: 32px; color: #000000; line-height: 50px; font-weight: bold; text-align: center; text-transform: uppercase; }
.section .title h3 span { font-weight: 200; margin-left: 10px; }

#Trend { margin-top: 100px; margin-bottom: 40px; }
#Trend .main { }
#Trend .main li { float: left; width: 33.33%; }
#Trend .main .item { margin: 0 2px; }
#Trend .main .item .intro { text-align: center; margin: 10px 0; }
#Trend .main .item .intro h3 { font-size: 14px; color: #000000; line-height: 26px; }
#Trend .main .item .intro span { font-size: 12px; color: #00a0e9; line-height: 20px; font-weight: 600; text-decoration: underline; }


#About { background: url('../images/home-bg-01.jpg') no-repeat center center; background-size: cover; padding: 90px 0; margin-bottom: 60px; }
#About .boxIntro { margin: 0 auto; width: 90%; background-image: url('../images/a-bg.png'); padding: 40px; box-sizing: border-box; text-align: center; }
#About .boxIntro p { font-size: 14px; color: #000000; line-height: 26px; text-align: center; }
#About .boxIntro a.more { margin: 0 auto; display: inline-block; font-size: 12px; color: #000000; line-height: 26px; font-weight: 600; padding: 5px 40px; border: 1px solid #c7c7c7; margin-top: 20px; }



#product { margin-bottom: 160px; }
#product .mian { width: 95%; margin: 0 auto; }
#product .mian .item { float: left; width: 50%; padding: 1px; box-sizing: border-box; }
#product .mian .item .intro { width: 50%; text-align: center; padding: 70px 0; box-sizing: border-box; }
#product .mian .item .intro h3 { font-size: 16px; color: #000000; line-height: 26px; text-transform: uppercase; }
#product .mian .item .intro span.down { margin: 10px auto; width: 11px; height: 7px; display: block; background: url('../images/icon-down.jpg') no-repeat center center; }
#product .mian .item .intro p { font-size: 12px; color: #000000; line-height: 20px; }
#product .mian .Item2 .intro { float: left; }
#product .mian .Item2 .pic { float: right; width: 50%; }
#product .mian .Item3 { }
#product .mian .Item3 .intro { float: right; }
#product .mian .Item3 .pic { float: left; width: 50%; }



#series { background: url('../images/home-bg-02.jpg') no-repeat center bottom; padding-bottom: 65px; border-bottom: 1px solid #888783; }
#series .main { margin: 0 auto; width: 90%; }
#series .main li { float: left; width: 33.33%; }
#series .main .item { margin: 0 10px; }
#series .main .item .intro { text-align: center; background: #2475c1; padding: 10px; }
#series .main .item .intro h3 { font-size: 16px; color: #ffffff; line-height: 36px; text-transform: uppercase; }
#series .main .item .intro span.more { margin: 0 auto; display: inline-block; font-size: 12px; color: #fff; line-height: 26px; font-weight: 600; padding: 5px 20px; border: 1px solid #fff; margin-bottom: 10px; }


@media (min-width: 1200px) {
}


@media (min-width: 768px) {
}


@media (max-width: 1024px) {
    #product .mian .item .intro{ padding:20px 0;}
}


@media (max-width: 768px) {
    #Trend { margin-top: 20px; }
    #About { padding: 30px 0; }
    #About .boxIntro { width: 100%; }

    .section .title h3 { font-size: 20px; }
    .section .title { margin: 0; }

    #product .mian { width: 100%; }
    #product .mian .item { width: 100%; }
    #product .mian .item .pic img { width: 100%; }
    #product .mian .item .intro { padding: 20px 0; }

    #product { margin-bottom: 30px; }
}



@media (max-width: 640px) {
}

@media (max-width: 420px) {
    #series { background:none; padding-bottom:30px; }
    #series .main{width:100%;}
    #series .main ul{width:100%; }
    #series .main li{ float:none; width:100%;}
    #series .main li a{ display:block; width:100%;}
    #series .main .item{ margin:20px auto; width:100%;}
     #series .main .item img{width:100%;}
    #product .mian .item .intro{ padding:10px 0;}
}


@media (max-width: 320px) {
      #product .mian .item .intro{ padding:0;}
}