﻿@import url("/product/css/base.css");
@import url("product_m.css") (max-width: 1230px);

#productTitle
{
    margin-bottom: 30px !important;
}

/* 产品基本信息 */

.flexsliderBox
{
    float: left;
    width: 600px;
}
#productInfo
{
    display: inline-block;
    padding: 0 0 0 30px;
    width: 600px;
    color: #31474f;
}
#productSupport
{
    font-size: 24px;
    font-weight: 700;
    color: var(--primary-color);
}
#productRemark
{
    margin-bottom: 1.5rem;
    font-size: 2rem;
    font-weight: 300;
    color: var(--secondary-color);
}
#productInfo > sub
{
    position: absolute;
    top: 54px;
    right: 20px;
    padding: 5px;
    font-size: 14px;
    line-height: 1.2;
    writing-mode: vertical-lr;
    text-align: center;
    color: #fff;
    background: #f94c00dd;
}
#productInfo > sub::before
{
    content: '';
    position: absolute;
    left: 0;
    bottom: -15px;
    border-top: 15px solid #f94c00dd;
    border-right: 15px solid transparent;
}
#productInfo > sub::after
{
    content: '';
    position: absolute;
    right: 0;
    bottom: -15px;
    border-top: 15px solid #f94c00dd;
    border-left: 15px solid transparent;
}
#productInfo > sub + sub
{
    right: 60px;
}
#productInfo > sub.new
{
    background: #FE9500dd;
}
#productInfo > sub.new::before,
#productInfo > sub.new::after
{
    border-top-color: #FE9500dd;
}

/* 内容区 */

.productContent
{
    background: var(--background-color);
    overflow: hidden;
}
.productContent .box
{
    margin: 48px auto;
    padding: 30px;
    border: 1px solid #E2E2E2;
    border-radius: 3px;
    background-color: #fff;
}
.productContent .box h2
{
    margin-bottom: 1em;
    padding: 0 0 6px;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--primary-color);
    border-bottom: 1px solid var(--primary-color);
}

/* .feature */

.feature
{
    width: 100%;
    border: 0 !important;
}
.feature td
{
    padding: 10px 0;
    vertical-align: top;
    border: 0 !important;
}
.feature td:not(:nth-child(2))
{
    width: 45%;
    border-top: 1px solid var(--primary-color) !important;
}
.feature strong
{
    color: var(--primary-color);
}

/* .property */

.property
{
    width: 100%;
}
.property tbody:first-of-type > tr > th,
.property tbody:first-of-type > tr > td
{
    padding: .3rem 1em;
    font-size: .9rem;
    font-weight: 500;
    color: #3A3A3A;
    border: 1px solid #c4c7cd;
}
.property tbody:first-of-type > tr > td:first-child
{
    background: #dee1e4;
}
.property tbody:first-of-type > tr > td:nth-child(n+2)
{
    color: var(--primary-color);
    background: #eee;
}
.property tbody:first-of-type > tr > th,
.property tbody:first-of-type > tr > td[colspan]
{
    padding-left: 1em;
    font-size: 1rem;
    font-weight: 700;
    text-align: left;
    color: #fff;
    background: var(--primary-color);
}
.property tbody > tr
{
    transition: .2s;
}
.property tbody:first-of-type > tr:hover > td:not([colspan])
{
    background-color: #fff !important;
}

/* .products */

.products li
{
    width: 380px;
}
.products li:not(:nth-child(3n+1))
{
    width: 379px;
}
.products li a
{
    padding: 20px;
}
.products li dd.name
{
    margin: 1rem 0 0;
}

/* .articles */

.articles li
{
    margin: 0;
}
.articles li:not(:nth-child(3n+1))
{
    width: 379px;
    border-left: 0;
}
.articles li:nth-child(n+4)
{
    border-top: 0;
}

/* .videos */

.videos li
{
    margin: 0;
}
.videos.has1Column li
{
    width: 100%;
}
.videos.has2Column li
{
    width: 569px;
}
.videos.has2Column li:nth-child(2)
{
    width: 568px;
    border-left: 0;
}
.videos.has3Column li:not(:nth-child(3n+1))
{
    width: 379px;
    border-left: 0;
}
.videoshas3Column li:nth-child(n+4)
{
    border-top: 0;
}
.videos li dd.title
{
    font-size: 1rem;
    font-weight: 700;
}

/* #qna */

#qna form
{
    margin: 0 0 20px;
}

#qna input[type=text],
#qna textarea,
#qna input[type=submit]
{
    width: 549px;
}

#qna input[name=validCode]
{
    width: 429px;
}

#qna input[type=submit]
{
    background-color: #f94c00dd;
}

    #qna input[type=submit]:hover
    {
        background-color: #f94c00;
    }
