/* media
----------------------------------------------------------------------------*/
@media screen and (max-height: 900px) {
    .slidebox .arrow_up{ top: 2%;}
    .slidebox .arrow_down{ bottom: 2%;}
    .add{ width: 180%; position: absolute; bottom: 5%; left: 0;}
}
@media screen and (max-height: 768px) {
    body,html{ font-size: 40px;}
}
@media screen and (max-height: 700px) {
    body,html{ font-size: 36px;}
}
@media screen and (max-width: 1540px) {
    body,html{ font-size: 42px;}
    .item .plus{
        width: 0.8rem;
        height: 0.8rem;
        margin: 0.3rem auto 0;
    }
    .item .plus span{
        padding: 0.2rem;
        top: -0.23rem;
        left: -0.25rem;
    }
}
@media screen and (max-width: 1366px) {
    body,html{ font-size: 40px;}
    .item{ width: 24.3%;}
}
@media screen and (max-width: 1024px) {
    body,html{ font-size: 36px;}
    .logo{ width: 2.9rem;}
}
@media screen and (max-width: 980px) {
    body,html{ font-size: 34px;}
}
@media screen and (max-width: 900px) {
    body,html{ font-size: 30px;}
    .logo{ width: 3rem;}
}
@media screen and (max-width: 840px) {
    body,html{ font-size: 24px;}
    .item .plus span{ border-width: 1px; top: -0.22rem; left: -0.24rem;}
    .item .plus:before,
    .item .plus:after{ height: 1px;}
}
@media screen and (max-width: 768px) {
    body,html{ font-size: 50px;}
    /* pc & mobile */
    .pc{ display: none;}
    .mobile{ display: block;}
    .table.pc{ display: none;}
    .table.mobile{ display: block;}
    /* header ------------------------------------*/
    header{ position: fixed;}
    .logo{ width: 20%; max-width: 130px; top: 0.65rem;}
    .btn_menu{ width: 0.64rem; top: 0.6rem;}
    /* masonry ------------------------------------*/
    .item{ width: 32.2%;}
    section{ width: 100%;}
    .container{ height: auto;}
    .viewing_window{ overflow-y: scroll; -webkit-overflow-scrolling: touch;}
    #index{
        overflow: hidden;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
    }
    #intro .container{ height: 100%;}
    .item:hover .mask{ height: 0; opacity: 0; visibility: hidden;}
    .item:hover .table{ opacity: 0; visibility: hidden;}
}
@media screen and (max-width: 585px) {
    body,html{ font-size: 40px;}
    .float_l, .float_r{ width: 100%; float: none;}
    /* masonry ------------------------------------*/
    .item{ width: 48.5%;}
    .item img{ -webkit-filter: brightness(100%) opacity(1); filter: brightness(100%) opacity(1);}
    /* case 案例介紹 ------------------------------------*/
    #case .txt .float_r,
    #case .txt .float_l{ width: 100%;}
    #case .txt .float_l{ margin-bottom: 0.5rem;}
    #case .float_r dd li{ width: 0.67rem;}
    #case .arrow_up, 
    #case .arrow_down{ width: 10%; margin-left: -5%;}
    #case .arrow_up{ top: 3%;}
    #case .arrow_down{ bottom: 3%;}
    #case .float_r dl{ display: inline-block; vertical-align: top; margin-left: 0.3rem;}
    #case .float_r dd br{ display: none;}
    /* aside ------------------------------------*/
    #intro aside{ font-size: 0.8rem; width: 4rem;}
    .add{ width: 180%; position: absolute; bottom: 5%; left: 0;}
    #intro article{ left: 50%; width: 50%;}
    .intro_txt .line{ margin-left: -0.5rem;}
    .form_box th, .form_box td{ padding: 0 0.2rem;}
    .btn_login{ margin: 0.3rem auto; width: 100%; text-align: center;}
}
@media screen and (max-width: 480px) {
    body,html{ font-size: 35px;}
    /* masonry ------------------------------------*/
    .item{ width: 100%; margin-bottom: 0.4rem;}
}
@media screen and (max-width: 480px) {
    body,html{ font-size: 32px;}
}
@media screen and (max-width: 320px) {
    body,html{ font-size: 30px;}
}