html,
body { margin: 0 auto; height: 100%; font-family: "微软雅黑"; font-size: 14px; color: #121212; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); outline: none; }

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; }
.ofklt { padding-bottom: 30px; width: 48%; float: left; }
li { list-style: none; display: block; }

ul { padding: 0; margin: 0; }

i,
span { display: block; }

a { text-decoration: none; color: inherit; display: block; }

h4 { -webkit-margin-before: 0em; -webkit-margin-after: 0em; }

img { border: 0; vertical-align: bottom; }

input,
button,
select,
textarea { outline: none; }

.left { float: left; }

.right { float: right; }

.clear { clear: both; }

.hide { display: none; }

.show { display: block; }

.header,
.container,
.footer { }
.search-cons { display: none; }
.main { width: 1200px; margin: 0 auto; }

.header { width: 100%; height: 64px; background-image: url(../images/header_bg.png); position: fixed; z-index: 99; }

.header .header-cont { width: 100%; z-index: 9; }

.logo { width: 197px; height: 90px; background-image: url(../images/logo.png); background-size: 100% 100%; position: absolute; z-index: 9; float: left; margin-top: 10px; }

.logo a { height: inherit; }

.head-nav { width: 800px; margin-left: 200px; float: left; overflow: hidden; padding-left: 120px; }

.head-nav li { height: 64px; display: inline; margin-right: 55px; line-height: 64px; text-align: center; color: #FFFFFF; float: left; }

.head-nav li:hover,
.head-nav .active,
.second-nav a:hover { color: #c32b20; }
.mob-search { display: none; }

.second-nav { width: 100%; display: none; line-height: 42px; background-image: url(../images/wbg.png); color: #000000; position: absolute; left: 0; top: 64px; text-align: center; z-index: 1; overflow: hidden; }

.second-nav a { width: 100px; display: inline-block; }

.search { width: 200px; height: 32px; margin-top: 14px; border-radius: 16px; background-color: #2a2a2a; float: left; }

.search input { width: 100px; height: 32px; border: 0; background-color: inherit; margin-left: 14px; color: #ccc; }
.iblock { width: 17px; height: 15px; background-image: url(../images/search_icon.png); display: block; margin: 8px; float: right; }
.search i { width: 17px; height: 15px; background-image: url(../images/search_icon.png); display: block; margin: 8px; float: right; }

.footer { width: 100%; height: 50px; line-height: 50px; background-color: #141414; color: #d1d1d1; position: fixed; bottom: 0; z-index: 10; }
.container { position: relative; z-index: 5; }
.bg-cnt { width: 100%; height: 100%; background-image: url(../images/diy_bg.png); background-size: 100% 100%; position: fixed; }

.rela-footer { position: relative; }

.footer .left a { padding-right: 10px; color: #d1d1d1; font-size: 12px; float: left; }

.footer .left a em { font-style: normal; margin-left: 10px; }

.footer .left a:hover { color: #c32b20; }

.footer .left a:hover em { color: #d1d1d1; }

.footer .right { font-size: 12px; }
.footer .right p { float: right; }
#gs { float: right; /*padding: 15px 10px;*/ box-sizing: border-box; }
#gs a { width: 20px; height: auto; }
#gs img { width: 20px; height: auto; padding-bottom: 10px; margin-left:5px; }
.index-banner { width: 100%; height: 100%; overflow: hidden; }
.index-banner ul { width: 1000%; height: 100%; position: relative; }
.index-banner li { /*width: 100%;*/ height: 100%; float: left; overflow: hidden; }

.index-banner img { /*position: absolute;*/ }

.bannerNav { width: 100%; position: absolute; top: 120px; text-align: right; display: inline-block; z-index: 9; }

.bannerNav a { width: 12px; height: 12px; border-radius: 6px; border: 1px solid #FFFFFF; margin-right: 5px; display: inline-block; }

.bannerNav a:hover,
.bannerNav .imgSelected { background-color: #FFFFFF; }

.index-banner i { width: 27px; height: 51px; position: absolute; top: 45%; cursor: pointer; display: block; }

.index-banner .prev { background-image: url(../images/prev_icon.png); left: 10%; }

.index-banner .next { background-image: url(../images/next_icon.png); right: 10%; }

.index-list { position: absolute; bottom: 80px; z-index: 2; }

.index-list > ul > li { width: 386px; height: 42px; margin-right: 20px; position: relative; float: left; }
.mect-ns { position: absolute; bottom: 0; height: 0; width: 100%; overflow: hidden; }

.index-list li p { width: 100%; height: 42px; line-height: 42px; background-color: #474747; color: #FFFFFF; font-size: 16px; margin: 0; position: absolute; bottom: 0; }
.index-list li:hover p { background-color: #c32b20; }

.index-list li .index-news { width: 21px; height: 21px; background-image: url(../images/news_icon.png); margin: 10px; float: left; }

.index-list li .index-projects { width: 23px; height: 18px; background-image: url(../images/project_icon.png); margin: 12px 10px; float: left; }

.index-list li .index-video { width: 23px; height: 23px; background-image: url(../images/video_icon.png); margin: 9px; float: left; }

.index-list li p b { line-height: 42px; font-size: 26px; margin-right: 15px; float: right; }

.index-list .index-list-info { width: 100%; height: 158px; background-color: #FFFFFF; padding: 19px; }

.index-list .index-list-info > a { width: 150px; height: 120px; overflow: hidden; float: left; }

.index-list .index-list-info img { width: 100%; height: 120px; transition: all .3s ease; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; -ms-transition: all .3s ease; }

.index-list li:hover .index-list-info img { transform: scale(1.15); }

.index-list .index-list-info span { width: 175px; margin-bottom: 10px; font-size: 12px; }

.index-list .index-list-info b { color: #c32b20; margin-bottom: 10px; font-size: 16px; display: block; }

.index-list .index-list-info span:first-child { color: #4c4c4c; font-size: 14px; font-weight: bold; max-height: 40px; overflow: hidden; }

.index-list-cir { width: 100%; position: absolute; top: 120px; margin-left: 25px; text-align: center; display: inline-block; z-index: 9; }

.index-list-cir a { width: 8px; height: 8px; border-radius: 4px; background-color: #737373; margin-right: 1px; display: inline-block; }

.index-list-cir a.imgSelected { background-color: #c32b20; }


/*about---start*/

.container-about { width: 100%; height: 100%; background-image: url(../images/about_bg.png); background-position: center center; position: absolute; }

.container-about .popbox { width: 100%; /*height: 700px;*/ background-image: url(../images/bkg4.png); /*margin-top: 150px;*/ position: relative; }

.container-diy .popbox { width: 100%; height: auto; background-image: url(../images/bkg4.png); /*margin-top: 150px;*/ position: relative; }

.container-about .main,
.container-diy .main { padding: 150px 0 30px; }

.popbox-img { width: 188px; height: 61px; background-image: url(../images/about_topimg.png); position: absolute; right: 100px; top: -45px; }

.popbox-title { height: 85px; line-height: 42px; color: #FFFFFF; font-size: 22px; border-bottom: 1px solid #464543; position: relative; }

.popbox-title i { width: 85px; height: 85px; background-image: url(../images/menu_icon.png); background-repeat: no-repeat; background-position: center center; background-size: 30% 25%; cursor: pointer; float: left; }

.popbox-title i:hover { background-image: url(../images/onmenu_icon.png); }

.popbox-title b { width: 140px; height: 24px; line-height: 24px; margin-top: 30px; border-left: 1px solid #ccc; text-align: center; font-weight: 500; float: left; }

.popbox-title p { height: 22px; line-height: 22px; margin: 30px; font-size: 12px; float: right; }

.popbox-title p a { float: left; }

.popbox-title p em { margin: 0 10px; font-style: normal; float: left; }

.popbox-nav { width: 200px; position: absolute; top: 80px; left: 30px; background-color: #fff; color: #000; font-size: 14px; text-align: center; font-weight: 700; display: none; z-index: 99; }

.popbox-nav li { height: 42px; line-height: 42px; border-bottom: 1px solid #ccc; }

.popbox-nav li:hover,
.popbox-nav .active { background-color: #c32b20; color: #fff; }

.popbox-info { width: 100%; /*height: 600px;*/ line-height: 26px; color: #fff; padding: 15px 30px 30px; /*overflow-y: auto;*/ overflow: hidden; }

.popbox-info img { width: 100%; height: auto; }

.popbox-info .contact-txt p,
.popbox-info .contact-txt p:before { clear: both; }

.popbox-info .contact-txt span { margin-right: 15px; float: left; }

.popbox-info > a { width: 210px; height: 100px; margin: 7px; overflow: hidden; float: left; }

.popbox-info .client { width: 100%; height: 100%; transition: all .3s ease; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; -ms-transition: all .3s ease; }

.popbox-info .client:hover { transform: scale(1.15); }

.container-diy { width: 100%; /*height: 100%;*/ background-position: center center; /*position: absolute;*/ }
.popbox-info .diy-pic { width: 50%; height: 310px; overflow: hidden; }
.popbox-info .diy-img { width: 100%; /*height: 310px;*/ transition: all .3s ease; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; -ms-transition: all .3s ease; }
.popbox-info .diy-img:hover { transform: scale(1.15); }

.popbox-info .diy-txt { width: 50%; height: 310px; background-color: #0b1023; padding: 30px 50px; position: relative; }

.popbox-info .diy-txt b { font-size: 24px; margin: 15px 0; display: block; }

.popbox-info .diy-txt span { float: none; }

.popbox-info .diy-txt a.info { width: 100px; height: 36px; line-height: 36px; text-align: center; border: 1px solid #fff; position: absolute; bottom: 30px; }

.popbox-info .diy-txt a.info:hover { background-color: #FFF; color: #000; }

.popbox-info .title { width: 100%; line-height: 60px; text-align: center; font-size: 24px; padding-bottom: 10px; border-bottom: 1px solid #666666; margin-top: 0; color: #e9e9e9; }

.popbox-info .title span { line-height: 20px; font-size: 14px; }

.popbox-info span { color: #e9e9e9; }

.popbox-info .subtitle { margin: 15px 0 5px; font-size: 15px; display: block; }

.popbox-info .pageturn { margin-top: 20px; border-top: 1px dashed #666666; }

.popbox-info .pageturn a { border: 1px solid #fff; display: inline-block; padding: 5px 15px; margin: 20px 3px; }

.popbox-info .pageturn a:hover { background-color: #FFF; color: #000; }

.popbox-info .fxicon { width: 200px; margin-top: -50px; float: right; }

.popbox-info .news-list li { border-bottom: 1px solid #666; padding: 15px 0 30px; overflow: hidden; }

.popbox-info .news-list .pic { width: 235px; height: 170px; overflow: hidden; float: left; }

.popbox-info .news-list img { width: 100%; height: 100%; transition: all .3s ease; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; -ms-transition: all .3s ease; }

.popbox-info .news-list li:hover img { transform: scale(1.15); }

.popbox-info .news-list p { font-size: 18px; padding-left: 265px; }

.popbox-info .news-list span { color: #d0d0d0; padding-left: 265px; }

.popbox-info .news-list i { width: 100px; border: 1px solid #fff; font-style: normal; padding: 5px 15px; margin: 10px 0 0 265px; }

.popbox-info .news-list li:hover p { color: #c32b20; }

.popbox-info .news-list li:hover i { border: 1px dashed #c32b20; background-color: #c32b20; }

.popbox-info .pagenumber { margin-top: 20px; }

.popbox-info .pagenumber a { border: 1px solid #fff; display: inline-block; padding: 5px 15px; margin: 20px 3px; }

.popbox-info .pagenumber a:hover,
.popbox-info .pagenumber .active { background-color: #c32b20; border: 1px solid #c32b20; }

.popbox-info .popbox-projects { background-color: #fff; color: #000; position: relative; overflow: hidden; }

.popbox-info .popbox-projects22 { overflow: hidden; }

.project-list-cir { width: 100%; position: absolute; top: 300px; margin-left: 40px; text-align: center; display: inline-block; z-index: 9; }

.project-list-cir a { width: 12px; height: 12px; border-radius: 6px; background-color: #737373; margin-right: 1px; display: inline-block; }

.project-list-cir a.imgSelected { background-color: #c32b20; }

.popbox-projects-top { overflow: hidden; }

.popbox-projects-top .pic { width: 355px; height: 280px; margin: 50px 50px 50px 100px; overflow: hidden; float: left; }

.popbox-projects-top img { width: 100%; height: auto; transition: all .3s ease; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; -ms-transition: all .3s ease; }

.popbox-projects-top img:hover { transform: scale(1.15); }

.popbox-projects-top .right { width: 555px; padding-right: 100px; }

.popbox-projects-top .right i { width: 90px; height: 26px; text-align: center; color: #fff; border-radius: 13px; font-style: normal; background-color: #c32b20; margin: 80px auto 15px 0; }

.popbox-projects-top .right b { font-size: 24px; color: #c32b20; }

.popbox-projects-top .right p { margin-bottom: 0; }

.popbox-projects-list { border: 1px solid #ddd; overflow: hidden; }

.popbox-projects-list li { width: 25%; height: 220px; border: 1px solid #ddd; text-align: center; position: relative; float: left; box-sizing: border-box; overflow: hidden; }

.popbox-projects-list li .pic { width: 278px; height: 150px; overflow: hidden; }

.popbox-projects-list li img { width: 100%; height: auto; transition: all .3s ease; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; -ms-transition: all .3s ease; }

.popbox-projects-list li:hover img { transform: scale(1.15); }

.popbox-projects-list .word { width: 100%; height: 70px; position: absolute; bottom: 0; }

.popbox-projects-list li span { color: #000; }

.popbox-projects-list li:hover { border: 1px solid #c32b20; }

.popbox-projects-list li:hover span { color: #c32b20; }

.popbox-projects-item { overflow: hidden; }

.popbox-projects-item .item-img { width: 555px; height: 380px; /*	margin: 30px auto;*/ overflow: hidden; }
.du96 { padding: 30px; overflow: hidden; }
.du96 h2 { font-size: 16px; font-weight: normal; margin: 20px 0 10px; }
.popbox-projects-item .item-info { margin-top: 30px; float: left; }

.popbox-projects-item .item-info b { font-size: 24px; color: #c32b20; }

.popbox-projects-item .item-info p { font-size: 14px; margin: 5px 0 0; }

.popbox-projects-item .item-info span { color: #666666; }

.project-item-cir { width: 50%; position: absolute; top: 400px; margin-left: 0px; text-align: center; display: inline-block; z-index: 9; }

.project-item-cir a { width: 12px; height: 12px; border-radius: 6px; background-color: #737373; margin-right: 1px; display: inline-block; }

.project-item-cir a.imgSelected { background-color: #c32b20; }

.popbox-projects .cooking { margin-top: 15px; }

.popbox-projects .cooking p { position: relative; padding-left: 10px; height: 36px; line-height: 36px; border-bottom: 1px solid #ccc; margin: 0 30px; font-weight: 700; }

.popbox-projects .cooking p:before { content: ' '; position: absolute; top: 7px; left: 0; width: 15px; height: 20px; border-left: 3px solid #c32b20; }

.popbox-projects .cooking ul { margin: 30px 15px; overflow: hidden; }

.popbox-projects .cooking li { width: 22.25%; margin: 1.35%; float: left; }
.popbox-projects .cooking li .pic { width: 100%; height: 330px; overflow: hidden; }
.popbox-projects .cooking li img { width: 100%; transition: all .3s ease; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; -ms-transition: all .3s ease; }
.popbox-projects .cooking li:hover img { transform: scale(1.15); }

.popbox-projects .cooking li span { width: 100%; line-height: 42px; text-align: center; color: #333; background-color: #eeeeee; margin-top: 5px; }

.popbox-projects .cooking li:hover span { background-color: #c32b20; color: #fff; }

.popbox-video video { width: 60%; height: 40%; margin: 0 20%; }

.popbox-video p { width: 100%; text-align: center; font-size: 18px; }
.popbox-projects .cooking li .nustm { height: 160px; }
.ofklt { padding-bottom: 30px; width: 48%; float: left; }

@media screen and (max-width: 960px) {
    html,
    body { font-size: 12px; }
    .container { background-color: #f7f7f7; }
    .main { width: 100%; }
    .search { display: none; }
    .header { width: 100%; height: 64px; background-image: none; background-color: #c32b20; position: fixed; z-index: 99; }
    .ofklt { padding-bottom: 30px; width: 100%; }
    .popbox-projects .cooking p { position: relative; padding-left: 10px; height: 36px; line-height: 36px; border-bottom: 1px solid #ccc; margin: 0 20px; font-weight: 700; }
    .logo { width: 141px; height: 64px; margin-top: 0px; }
    .menu-icon { width: 36px; height: 21px; background-image: url(../images/menu_icon.png); float: right; position: absolute; right: 10px; top: 20px; z-index: 9; display: block; }
    .mob-search { display: block; width: 30px; height: 30px; background-image: url(../images/som1.jpg); position: absolute; right: 60px; top: 15px; z-index: 9; display: block; }
    .search-cons { display: block; z-index: 98; background: #fff; width: 100%; height: 50px; position: fixed; top: 14px; left: 0; padding: 10px 3%; }
    .search-cons span { display: block; width: 100%; height: 30px; border: 1px solid #ebebeb; }
    .mik01 { width: 260px; height: 28px; border: none; float: left; padding: 0 5px; }
    .mik02 { border: none; height: 28px; width: 28px; float: right; background: url(../images/somn2.jpg) no-repeat center center; }
    .head-nav { width: 100%; margin-left: 0; position: absolute; left: 0; top: 64px; padding-left: 0; background-color: #323232; height: 100%; overflow-x: hidden; overflow-y: auto; display: none; }
    .head-nav li:hover,
    .head-nav .active,
    .second-nav a:hover { color: #fff; }
    .head-nav li { width: 100%; height: auto; line-height: 64px; text-align: left; padding-left: 20px; border-bottom: 1px solid #4b4b4b; color: #FFFFFF; float: left; }

    .nav-icon { width: 18px; height: 18px; background-image: url(../images/icon00.png); background-size: 100% 100%; margin: 20px 10px; float: right; }
    .head-nav .active .nav-icon { background-image: url(../images/iconon00.png); }
    .footer { height: 60px; text-align: center; position: relative; line-height: 30px; }
    .footer .left,
    .footer .right { float: none; }
    .footer .left a { float: none; display: inline-block; }
    .secnav-icon { width: 12px; height: 12px; background-image: url(../images/icon00.png); background-size: 100% 100%; margin: 16px 10px; float: left; }
    .second-nav { width: 100%; height: auto; line-height: 42px; background-color: inherit; color: #FFFFFF; position: relative; left: 0; top: 0; text-align: center; }
    .second-nav a { width: 100%; text-align: left; }
    .index-banner li { height: 300px; width: 100%; }
    .index-banner img { height: inherit; position: relative; }
    .index-banner .prev,
    .index-banner .next { display: none; }
    .bannerNav { width: 100%; position: absolute; top: 240px; text-align: center; display: inline-block; z-index: 9; }
    .index-list { position: relative; top: 0; bottom: 0; padding: 15px; overflow: hidden; }
    .index-list > ul > li { width: 100%; height: auto; margin-bottom: 15px; display: block; }
    .index-list li p { background-color: #474747; position: relative; }
    .mect-ns { position: relative; }
    .index-list .index-list-info > a { width: 46%; height: 120px; }
    .index-list .index-list-info .right { width: 50%; }
    .index-list .index-list-info span { width: 100%; margin-bottom: 10px; font-size: 12px; }
    /*about*/
    .container-about,
    .container-diy { width: 100%; height: auto; background-image: none; background-color: #484848; position: relative; }
    .popbox { width: 100%; height: auto; background-image: none; margin-top: 0; padding-top: 64px; position: relative; }
    .popbox-title p { display: none; }
    .popbox-info { height: auto; padding: 15px; }
    .popbox-img { width: 150px; height: 40px; background-size: 100% 100%; position: absolute; right: 0; top: 70px; }
    .popbox-title { height: 60px; }


    .popbox-title i { width: 50px; height: 60px; }
    .popbox-title b { width: 110px; font-size: 16px; margin-top: 20px; padding-left: 5px; }
    .popbox-nav { width: 200px; top: 60px; left: 20px; }
    .popbox-info img { width: 100%; height: auto; }
    .popbox-info > a { width: 46%; height: auto; margin: 1%; }
    .container-about .main,
    .container-diy .main { padding: 0; }
    .popbox-info .title { line-height: 40px; font-size: 16px; }
    .popbox-info .diy-pic { width: 100%; height: auto; margin-top: 15px; }
    .popbox-info .diy-txt { width: 100%; height: auto; padding: 15px 30px; }
    .popbox-info .diy-txt a.info { position: relative; bottom: 0; margin-top: 20px; width: 70px; height: 24px; line-height: 21px; }
    .popbox-info .diy-txt b { font-size: 16px; margin: 0; display: block; }
    .popbox-info .fxicon { margin-top: 0; float: none; }
    .popbox-info .news-list .pic { width: 40%; height: auto; }
    .popbox-info .news-list p { font-size: 12px; line-height: 15px; padding-left: 10px; margin: 0; overflow: hidden; }
    .popbox-info .news-list span { display: none; }
    .popbox-info .news-list i { width: 80px; border: 1px solid #fff; font-style: normal; padding: 0 10px; margin: 15px 0 0 43%; }
    .popbox-info .pageturn,
    .popbox-info .pagenumber { text-align: center; }
    .popbox-projects-top .pic { width: 100%; height: auto; margin: 0; }
    .popbox-projects-top .right { width: 100%; }
    .project-list-cir { position: relative; top: 0; margin-left: 30px; margin-top: 15px; text-align: left; }
    .popbox-projects-top .right { padding-left: 30px; padding-right: 30px; }
    .popbox-projects-top .right i { width: 90px; height: 26px; text-align: center; color: #fff; border-radius: 13px; font-style: normal; background-color: #c32b20; margin: 0 0 15px 0; }
    .popbox-projects-list { border: 0; }
    .popbox-projects-list li { width: 50%; height: auto; border-top: 1px solid #000; border-left: 0; border-right: 1px solid #000; border-bottom: 0; text-align: center; position: relative; float: left; }
    .popbox-projects-list li:nth-child(even) { border-right: 0; }
    .popbox-projects-list li > a { width: 98%; height: auto; padding: 0; margin: 1px; }
    .popbox-projects-list li .pic { width: 100%; height: auto; }
    .popbox-projects-list .word { width: 100%; height: auto; position: relative; bottom: 0; }
    .popbox-projects-item .item-img { width: 100%; height: auto; margin: 15px 0 0; }
    .project-item-cir { width: 100%; position: relative; top: 0; margin-left: 0px; }
    .popbox-projects-item .item-info { margin-top: 30px; margin-left: 20px; margin-right: 20px; }
    .popbox-projects .cooking li { width: 48%; margin: 1%; height: auto; }
    .popbox-projects .cooking li .pic { width: 100%; height: auto; }
    .popbox-projects .cooking li span { margin-bottom: 15px; margin-top: 3px; }
    .popbox-video video { width: 100%; height: auto; margin: 0; }
    .popbox-video p { width: 100%; text-align: center; font-size: 18px; }
    .popbox-info .pagenumber a { padding: 0 10px; margin: 15px 3px; }
    .popbox-info .pageturn a { padding: 0 10px; margin: 15px 3px; }
    .index-banner { height: 264px; padding-top: 64px; }
    .second-nav { background: none; }
    .mect-ns { height: 158px; }
}