/* media
----------------------------------------------------------------------------*/

/*@media screen and (max-width: 1366px) {
    body,html{ font-size: 40px;}
}
@media screen and (max-height: 800px) {
    body,html{ font-size: 40px;}
}
@media screen and (max-width: 900px) {
    body,html{ font-size: 35px;}
}*/

@media screen and (max-width: 768px) {
    body,html{ font-size: 72px;}
    
    .container{ width: 100%; }
    .pc-none{ display: block; }
    .m-borderbox{ box-sizing: border-box; }
    .comment{ display: none; }

    
    /*** header ***/
    header .logo{
        width: 33%;
        position: inherit;
        left: inherit;
        top: inherit;
    }
    .btn_menu{
        width: 6.5%;
        position: absolute;
        top: 0.23rem;
        right: 0.3rem;
    }
    nav{
        width: 100%;
        height: 100%;
        background: rgba(33,80,198,0.95);
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 10;
        padding-top: 2.5rem;
        box-sizing: border-box;
        display: none;
    }
    nav ul{ width: 60%; }
    nav li{ width: 100%;}
    .before:before, .after:after{ display: none; }
    nav li>a{ color: #fff; letter-spacing: 3px; border-bottom: 1px solid #fff; line-height: 1.5rem;}
    nav li:hover a, nav li.select a{ background-color: transparent;}
    nav li:last-child a{ border-bottom: none; }
    nav dl{
        opacity: 1;
        visibility: visible;
        -webkit-transform: translateY(0px); transform: translateY(0px);
        position: inherit;
        /*width: 100%;*/
        width: 6.3rem;
        /*height: auto;*/
        height: 0rem;
        top: inherit;
        left: inherit;
        margin-left: 0;
        background: none;
        padding-top: 0;
        background: url('../images/m_subnav_bg.png') no-repeat center top;
        -webkit-background-size: 100% auto;
        background-size: 100% auto;
        padding: 0.65rem 0 0.2rem;
        margin-top: -0.4rem;
        box-sizing: border-box;

        display: none;
        overflow:visible !important;
    }
    nav dl._open{ display: block; height: 3rem; }
    nav dd{ height: auto; width: 100%; }
    nav dl a{ border-bottom: none; color: #fff; line-height: 1.8; }
    .sub1 , .sub2 , .sub3 , .sub4{ width: 100%; }
    .sub1 a , .sub2 a , .sub3 a , .sub4 a{ background: none; }
    .sub1 a:hover, .sub2 a:hover ,.sub3 a:hover ,.sub4 a:hover{ background: none;}
    .m_subopen ul li:nth-child(3) a{ border-bottom: none; }
    nav .btn_x{ width: 5%; position: absolute; top: 0.3rem; right: 0.3rem; }


    /*** index ***/
    .kv picture img{ width: 100%; margin-left: 0;}
    .go{ width: 100%; left: 5%; bottom: 0.3rem; }
    .go:before{ display: none; }
    #index .content .td{ width: 60%; padding-right: 0;}
    #index .content .th{ width: 40%; }
    #index .btnbox{ bottom: 0; }
    #index .btn{ width: 50%; }
    #index .b1{ margin-left: 4%; }
    #index .b2{ margin-left: 9%; }
    #index .content .td > img{ margin-top: -1.45rem; }
    #index .product { bottom: 1.9rem; left: 0.2rem; }


    /*** a3 ***/
    .innertitle{ width: 93%; }
    #product_a3 .icon {
        width: 41%;
        top: 14%;
        left: 0;
    }
    #product_a3 .title{ width: 5rem; }
    #product_a3 .comment{ width: 92%; display: block; text-indent: -8px; }
    .inner_box{ width: 92%; }
    .inner_box .item.clip_1 , .inner_box .item.clip_2{ width: 0.7rem; top: -0.4rem; }
    .inner_box .item.clip_1{ left: 0.1rem; }
    .inner_box .item.clip_2{ right: 0.1rem; }
    .innertitle .star{ width: 0.4rem; vertical-align: text-top; }
    .inner_box .item.atom{ width: 1.9rem; }
    .inner_box .item.atom {
        width: 1.9rem;
        top: -1rem;
        right: 0.1em;
    }
    .inner_box .list-img{ left: 0.1rem; }
    #product_a3 .th{ padding: 0.64em 0;}
    .table_icon{ width: 80%; }
    .otter_l, .otter_r{ width: 0.11875rem; }
    .otter_l{ left: -0.35em; }
    .otter_r{ right: -0.35em; }
    #product_a3 .innertable .td{ width: 17%; }
    .innertable_sub{ width: 100%; }


    /*** a4 ***/
    #product_a4 .icon {
        width: 30%;
        top: 36%;
        left: 3.5%;
    }
    #product_a4 .title{ width: 5rem; }
    #product_a4 .inner_box2.table .th{ width: 42%; }

    #product_a4 .inner_box .list-img{ left: 0; }
    #product_a4 .item_1{
        width: 0.8rem;
        top: 1.3rem;
        right: 0.2rem;
    }
    #product_a4 .item_2{
        width: 1.8rem;
        top: 1.5rem;
        right: -0.3rem;
    }
    #product_a4 .item_3 {
        top: 1.3rem;
        right: -0.2rem;
        width: 1.9rem;
    }
    .product_a4_foto{ width: 100%; }
    #product_a4 .innertitle2 { margin-top: 0; }
    .innertitle2 .star{ width: 0.4rem; vertical-align: text-top; }
    #product_a4 .innertable_sub .th{ padding: 0.64em 0;}
    #product_a4 .table.ph10{
    padding-left: 0;
    padding-right: 0;}
    #product_a4 .btn{ width: 30%; }


    /*** promote ***/
    #promote .icon{
        width: 28.197802%;
        top: 71%;
    }
    #promote figure{
        width: 96%;
    }
    .promote_bear{
        width: 3.5rem;
        position: absolute;
        bottom: -1.9rem;
        right: 0.1rem;
        z-index: 1;
    }


    /*** qa ***/
    #qa .icon {
        width: 28.307692%;
        top: 68%;
        left: 7%;
    }
    #qa .inner_box2{ width: 95%; }
    #qa .q_icon{
        width: 2.5rem;
        top: 0em;
        left: 0em;
    }
    #qa .qa_tri{ width: 0.35rem;}
    #qa .qa_foto img{ width: 100%; }


    /*** store ***/
    #store .icon {
        width: 21.615385%;
        top: 63%;
        left: 12%;
    }
    .search .table{ max-width: inherit; width: 100%; }
    .search select{ font-size: 0.3rem; }
    #store .table .w_1{ width: 36%; }
    #store .table .w_2{ width: 28%; }
    #store .table .w_5{ width: 36%; }


    /*** #knowhow ***/
    #knowhow .title{ width: 8rem; }
    #knowhow .icon {
        width: 31.087912%;
        top: 64%;
        left: 7%;
    }
    #knowhow .arti_title span{ text-indent: 0; }
    #knowhow .knowhow_pic_1{ width: 1.7rem; left: 0.4rem;}
    #knowhow .knowhow_peo{
        width: 3.4rem;
        top: -1.3rem;
        right: 0.2rem;
    }
    #knowhow .knowhow_pic_2{
        width: 4rem;
        bottom: 0.25rem;
        right: 0.7rem;
    }

    footer .logo{ width: 1.9rem; }
    footer ul{ margin-bottom: 0.03rem; }

    /* 本期活動已結束，敬請期待 */
    .container p.nextTime{ 
        margin-top: 0.1389rem;
        font-size: 0.278rem;
    }
}
@media screen and (max-width: 690px) {
    body,html{ font-size: 60px;}
}
@media screen and (max-width: 640px) {
    body,html{ font-size: 60px;}


}
@media screen and (max-width: 600px) {
    body,html{ font-size: 55px;}
}
@media screen and (max-width: 560px) {
    body,html{ font-size: 50px;}
}
@media screen and (max-width: 520px) {
    body,html{ font-size: 45px;}
}
@media screen and (max-width: 460px) {
    body,html{ font-size: 40px;}
}
@media screen and (max-width: 400px) {
    body,html{ font-size: 35px;}

    #product_a4 .item_2{ top: 1.9rem; }
}
@media screen and (max-width: 360px) {
    body,html{ font-size: 30px;}
}
@media screen and (max-width: 320px) {
    body,html{ font-size: 30px;}

    #product_a4 .item_1{ top: 1.4rem; }
    #product_a4 .item_2{ top: 2.6rem; }
    #product_a4 .item_3{ top: 1.6rem; }
}