﻿/* global */
* { margin: 0; padding: 0; font-family: Arial, "微软雅黑"; }

ul, li { list-style-type: none; }

a { color: #333; text-decoration: none; }
a img { border:none; }
.clear:after { display: block; height: 0; line-height: 0; clear: both; visibility: hidden; content: '\0020'; }

.clear { *zoom: 1; clear: both; }

.text-center { text-align: center; }

.bx-wrapper .bx-viewport { border: 0 none; left: 0; box-shadow: none; }

/* navigator */
.navigator { border-top: 5px solid #dedede; z-index: 1000; }
    .navigator > ul { width: 1000px; margin: 0 auto; margin-top: -5px; }
        .navigator > ul > li { float: left; position: relative; z-index: 1000; }
            .navigator > ul > li > a { display: block; border-top: 5px solid #dedede; padding: 20px 37px; }
                .navigator > ul > li > a.current, .navigator > ul > li > a:hover { border-top-color: #0069ae; color: #0069ae; }
            .navigator > ul > li > ul { background-color: #fff; display: none; left: 0; position: absolute; text-align: center; width: 100%; }
                .navigator > ul > li > ul > li > a { display: block; padding: 10px 0; }
                    .navigator > ul > li > ul > li > a:hover { color: #0069ae; }
            .navigator > ul > li:hover > ul { display: block; }

/* footer */
.footer > div.navigator { border-top: 1px solid #dedede; border-bottom: 1px solid #dedede; margin-top: 10px; margin-bottom: 20px; }
    .footer > div.navigator > ul { width: 1000px; margin: 0 auto; }
        .footer > div.navigator > ul > li { float: left; }
            .footer > div.navigator > ul > li > a { display: block; border-top: 5px solid #fff; padding: 16px 35px 20px 35px; }
                .footer > div.navigator > ul > li > a:hover { border-top-color: #0069ae; color: #0069ae; }
.footer > p > a { color: #666; }
    .footer > p > a:hover { text-decoration: underline; }

/* products */
.big-column-title { text-align: center; margin: 32px 0; margin-top: 40px; }

.products { margin: 0 auto; width: 1010px; }

    .products > ul > li { float: left; margin: 0 30px 52px 30px; width: 192px; }

        .products > ul > li > a { display: block; width: 192px; overflow: hidden; height: 256px; }

            .products > ul > li > a > div.thumbnail-image { width: 192px; height: 194px; overflow: hidden; position: relative; margin-bottom: 18px; }

                .products > ul > li > a > div.thumbnail-image > img { width: 100%; }

                .products > ul > li > a > div.thumbnail-image > div.product-title-image { position: absolute; background-color: #0077c2; left: 0; top: 56%; height: 52px; overflow: hidden; }

                    .products > ul > li > a > div.thumbnail-image > div.product-title-image > img { width: 100%; }

            .products > ul > li > a > p { text-align: center; font-size: 16px; color: #333; }


.page { width: 1000px; margin: 0 auto; }

    .page > a { display: block; width: 50px; height: 30px; background: #fff url(/Skins/Default/Images/page.png) no-repeat left top scroll; width: 64px; height: 54px; }

        .page > a.previous { float: left; background-position: -15px top; }

        .page > a.next { float: right; background-position: -75px top; }


.big-column-title { text-align: center; margin: 32px 0; margin-top: 46px; }

.about-toyobo { margin: 0 auto; width: 1000px; margin-bottom: 82px; }

.detail { margin: 20px auto 42px; color: #333; }
    .detail > p { line-height: 28px; }
h1.article-title { text-align: center; color: #0077c3; font-size: 20px; padding: 0 15px; }
p.article-time { text-align: center; color: #666; font-size: 14px; }

.big-column-title { text-align: center; margin: 32px 0; margin-top: 47px; padding-top: 20px; }
    .big-column-title > div.line { position: relative; height: 1px; background-color: #dcdcdc; margin: 0 auto; }
        .big-column-title > div.line > h1 { position: absolute; top: -21px; color: #0077c2; font-size: 30px; background-color: #fff; padding: 0 10px; }
    .big-column-title > p { margin-top: 20px; color: #b4b4b4; font-size: 15px; }

/* common problems */
.problem-item { padding: 16px 0; border-bottom: 1px solid #e6e5e5; }
    .problem-item > div.problem-title { margin-bottom: 8px; }
        .problem-item > div.problem-title > div.problem-flag { margin-top: 5px; float: left; background-color: #0077c2; width: 18px; height: 18px; display: block; color: #fff; font-weight: bold; font-size: 12px; text-align: center; line-height: 18px; }
        .problem-item > div.problem-title > a { display: block; font-size: 18px; color: #333; font-weight: bold; margin-left: 25px; }
    .problem-item > div.problem-answer > div.answer-flag { float: left; width: 18px; height: 18px; display: block; color: #fff; font-weight: bold; font-size: 12px; text-align: center; line-height: 18px; background-color: #66ba2e; margin-top: 5px; }
    .problem-item > div.problem-answer > div.answer-content { color: #999; font-size: 14px; margin-left: 25px; line-height: 25px; }

/* news list */
.news-columns { width: 1000px; margin: 25px auto; }
    .news-columns > div.left { float: left; width: 300px; margin-right: 30px; }
        .news-columns > div.left > ul > li { width: 100%; }
            .news-columns > div.left > ul > li > a { padding: 10px; font-size: 20px; color: #0077c3; font-weight: bold; margin-top: -1px; padding-left: 14px; display: block; border: 1px solid #dedede; }
            .news-columns > div.left > ul > li > ul > li > a { display: block; padding: 10px; color: #333; padding-left: 25px; border-bottom: 1px solid #e5e5e5; }
                .news-columns > div.left > ul > li > ul > li > a:hover { color: #fff; background: #0077c3 url(/Skins/Default/Images/arrow.png) no-repeat 267px center scroll; }
    .news-columns > div.right { float: left; width: 670px; }
    .news-columns > div.right > div.location { color: #333; border-bottom: 1px solid #e5e5e5; font-size: 14px; margin-bottom: 10px; padding-bottom: 10px; }

li.about-content { margin-left: 362px; border-bottom: 1px dashed #ddd; font-size: 8px; color: #999; height: 24px; line-height: 24px; padding: 12px 0; }
        li.about-content > span { font-size: 14px; float: right; color: #666; }
        li.about-content > a { color: #333; font-size: 16px; float: left; width: 500px; display: block; overflow: hidden; padding-left: 17px; background: #fff url(/Skins/Default/Images/dot.png) no-repeat 2px center scroll; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
li.contact-content { width: 100%; margin-left: 0px; }

