/*******************************************/
/* NETSHOP_DYNASMART.CSS 為 NETSHOP_DYNASMART.html <main> 內用 CSS */
/*******************************************/

/* ________________________________________________________________________________ */
/* XS 超小屏幕（手机，大於 0px） 及共用 ___________________________________________ */
/* ________________________________________________________________________________ */
@media (min-width: 0px) {

    /*_ PACKAGE ______________________*/
    .package .label {
        display:inline-block;
        margin:10px 0;
        height:20px;
        color:#FFF;
        width:100%;
        line-height:16px;
        border:none;
        border-radius:10px;
        text-align:left;
    }

    section a {
        margin: 5px 0;
         text-decoration: none; 
    }

    .package .label.multi {
        background:#E72F61;
    }

    .package .label.single {
        background:#0096d2;
    }

    /*_Product ITEM ___________________________________*/
    .product .col-xs-6.col-sm-4.col-md-3 {
        height:360px;
    }
    .product h3 .btn {
        margin: -5px 5px 0 0;
    }

   .product .item {
        display:block;
        color:#000;
        max-width: 200px;
        margin: 10px auto 5px auto;
        padding: 10px;
        border: 1px solid rgba(255,255,255,0);
        border-radius: 0;
        overflow:hidden;
    }

        .product .item.sale:before  {
            position:absolute;
            content:"";
            display:block;
            width:70px;
            height:86px;
            top:10px;
            left:50%;
            margin-left:30px;
            background:url(../../images/netshop/sale.png) top left no-repeat;
        }

    .product .item:hover {
            text-decoration:none;
             /*box-shadow:0px 0px 8px rgba(40%,40%,40%,0.8);*/
             border:1px solid #E72F61;
        }

    .product .item-font {
        font-size: 10.7rem;
    }

        .product .item .label {
            display: inline-block;
            margin: 5px 0 0 0;
            height: 14px;
            min-width: 80px;
            border: none;
            border-radius: 0;
        }

    .product a {
        text-decoration:none;
    }

     /* Label : TureType | OpenType | Mac | Win */

    .label.dynasmart {
        background: #e62f62 url("../../images/netshop/dynasmart.png") center center no-repeat;
        /*background-size:contain;*/
    }

    .label.package {
        background: #ea4d3c url("../../images/netshop/package.png") center center no-repeat;
        /*background-size:contain;*/
    }

    .label.download {
        background: #ed6917 url("../../images/netshop/download.png") center center no-repeat;
        /*background-size:contain;*/
    }

    .label.webfont {
        background: #88529E url("../../images/netshop/webfont.png") center center no-repeat;
        /*background-size:contain;*/
    }

    .label.off.dynasmart {
        background: #999999 url("../../images/netshop/dynasmart.png") center center no-repeat;
        /*background-size:contain;*/
    }

    .label.off.package {
        background: #999999 url("../../images/netshop/package.png") center center no-repeat;
        /*background-size:contain;*/
    }

    .label.off.download {
        background: #999999 url("../../images/netshop/download.png") center center no-repeat;
        /*background-size:contain;*/
    }

    .label.off.webfont {
        background: #999999 url("../../images/netshop/webfont.png") center center no-repeat;
        /*background-size:contain;*/
    }

    /* Label : TureType | OpenType | Mac | Win */

    .label.truetype {
        background: url("../../images/netshop/truetype-on.png") center center no-repeat;
        /*background-size:contain;*/
    }

    .label.opentype {
        background: url("../../images/netshop/opentype-on.png") center center no-repeat;
        /*background-size:contain;*/
    }

    .label.mac {
        background: url("../../images/netshop/mac-on.png") center center no-repeat;
        /*background-size:contain;*/
    }

    .label.win {
        background: url("../../images/netshop/win-on.png") center center no-repeat;
        /*background-size:contain;*/
    }

    .label.off.truetype {
        background: url("../../images/netshop/truetype-off.png") center center no-repeat;
        /*background-size:contain;*/
    }

    .label.off.opentype {
        background: url("../../images/netshop/opentype-off.png") center center no-repeat;
        /*background-size:contain;*/
    }

    .label.off.mac {
        background: url("../../images/netshop/mac-off.png") center center no-repeat;
        /*background-size:contain;*/
    }

    .label.off.win {
        background: url("../../images/netshop/win-off.png") center center no-repeat;
        /*background-size:contain;*/
    }

    /*_ PRODUCT ITEM ___________________________________*/
    .product .item {
        max-width:200px;
        margin:10px auto 5px auto;
        padding:10px;
        border: 1px solid rgba(255,255,255,0);
        border-radius:0;
    }


    /*_ 圓角灰框 ______________________*/
    .box-gray{
        padding: 30px;
        border-radius: 20px;
        background: #E4E4E4;
        overflow:auto;
    }

    .box-gray h2{
        color:#303030;
        font-weight:bold;
        margin:0 0 25px 0;
        float:left;
    }

    .box-gray .btn-pink{
        float:right;
    }


    /*_ 收錄書體檢索 ______________________*/

    .pull-clear {
        clear: both;
    }
    .btn-group {
        margin-left:14px;
    }
    .btn-group .btn.active {
        color:#686868;
        background-color:#f0f0f0;
        border-color:#686868;
    }
    .search-all ul{
        list-style:none;
        padding:0;
        margin:0;
    }

    .search-all .search-top{
        width:100%;
        clear:both;
    }

    .search-all .search-top input{
        width:100%;
        padding:0 5px;
        margin-bottom:30px;
    }

    .search-all .search-left{
        float:left;
        width:60%;
    }

    .search-all .search-right{
        float:none;
        width:60%;
    }

    .search-all .search-option{
        clear:both;
    }

    .search-all .search-option ul{
        margin-left:135px;
    }

    .search-all .search-option li{
        float:left;
        width:170px;
        font-size:14px;
        font-weight:bold;
        margin-bottom:5px;
    }

    .search-all .search-option li:last-child{
        margin-bottom:20px;
    }

    .search-left .search-option li:nth-child(odd){
        width:140px;
    }

    .search-all .search-option input{
        margin-right:10px;
    }

    .search-all .search-option select{
        width:100%;
    }

    .search-all .search-title{
        width:135px;
        float:left;
        font-size:17px;
        font-weight:bold;
    }

    .search-right .search-option li {
        width:100px;
    }

    .search-right .search-option .txt-width li {
        width:190px;
    }

    .search-right li.txt-icon{
        width:40px;
        text-align:center;
    }

    .search-right .search-title{
        width:100px;
    }

    .search-right .search-option ul{
        margin-left:100px;
    }

    .tips-all{
        padding: 20px;
        border-radius: 20px;
        background:#ffffff;
        clear:both;
    }

    .tips{
        list-style:none;
        padding:0;
        margin:0;
        overflow:auto;
    }

    .tips li{
        float:left;
    }

    .tips-left p, .tips-right p{
        padding:0;
        margin:0;
        line-height:30px;
        font-size:15px;
        font-weight:bold;
    }

    .tips-left{
        margin-right:12px;
    }

    .tips-right{
        color:#686868;
    }

    /*_ NEWS-NOTIFICTATION By.Susan ___________________________________*/
    .news-notification p {
        font-size: 17px;
        text-decoration:underline;
    }

    .news-notification .news-date {
        margin-bottom: 0px;
        text-decoration:none;
    }

    /*
        a:hover {
            text-decoration:none;
        }
    */

        a:hover p {
            text-decoration:underline;
        }

    a:hover .news-date {
        text-decoration:none;
    }
    /* _________________________________________________________ */

    /*_ FONT-SEARCH 字型搜尋 By.Marco ______________________*/
    .box-gray {
        padding: 30px;
        border-radius: 20px;
        background: #E4E4E4;
        overflow: auto;
    }

        .box-gray h2 {
            color: #303030;
            font-weight: bold;
            margin: 0 0 25px 0;
            float: left;
        }

        .box-gray .btn-pink {
            float: right;
        }


    .pull-clear {
        clear: both;
    }
    .btn-group {
        margin-left:14px;
    }
    .btn-group .btn.active {
        color:#686868;
        background-color:#f0f0f0;
        border-color:#686868;
        box-shadow:none;
    }

    .search-all ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .search-all .search-top {
        width: 100%;
        clear: both;
    }

        .search-all .search-top input {
            width: 100%;
            padding: 0 5px;
            margin-bottom: 30px;
        }

    .search-all .search-left {
        float: left;
        width: 60%;
    }

    .search-all .search-right {
        float: none;
        width: 60%;
    }

    .search-all .search-option {
        clear: both;
    }

        .search-all .search-option ul {
            margin-left: 135px;
        }

        .search-all .search-option li {
            float: left;
            width: 170px;
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 5px;
        }

            .search-all .search-option li:last-child {
                margin-bottom: 20px;
            }

    .search-left .search-option li:nth-child(odd) {
        width: 140px;
    }

    .search-all .search-option input {
        margin-right: 10px;
    }

    .search-all .search-option select {
        width: 100%;
    }

    .search-all .search-title {
        width: 135px;
        float: left;
        font-size: 17px;
        font-weight: bold;
    }

    .search-right .search-option li {
        width: 100px;
    }

    .search-right .search-option .txt-width li {
        width: 190px;
    }

    .search-right li.txt-icon {
        width: 40px;
        text-align: center;
    }

    .search-right .search-title {
        width: 100px;
    }

    .search-right .search-option ul {
        margin-left: 100px;
    }

    .tips-all {
        padding: 20px;
        border-radius: 20px;
        background: #ffffff;
        clear: both;
    }

    .tips {
        list-style: none;
        padding: 0;
        margin: 0;
        overflow: auto;
    }

        .tips li {
            float: left;
        }

    .tips-left p, .tips-right p {
        padding: 0;
        margin: 0;
        line-height: 30px;
        font-size: 15px;
        font-weight: bold;
    }

    .tips-left {
        margin-right: 12px;
    }

    .tips-right {
        color: #686868;
    }
    
    .package .checkbox-inline {
        margin-left:0;
        margin-right:10px;
    }
    /* _________________________________________________________ */
}

/* ________________________________________________________________________________ */
/* SM 小屏幕（平板，大於等於 768px） ______________________________________________ */
/* ________________________________________________________________________________ */
@media (min-width: 768px) {  
    .search-all .search-top input{
        width:78%;
    }

    .search-all .search-right{
        float:right;
        width:40%;
    }
}

/* ________________________________________________________________________________ */
/* MD 中等屏幕（桌面显示器，大於等於 992px） ______________________________________ */
/* ________________________________________________________________________________ */
@media (min-width: 992px) {
    .search-all .search-top input{
        width:84%;
    }
}

/* ________________________________________________________________________________ */
/* LG 大屏幕（大桌面显示器，大於等於 1200px） _____________________________________ */
/* ________________________________________________________________________________ */
@media (min-width: 1200px) {
    .search-all .search-top input{
        width:87%;
    }
}