@charset "utf-8";
@media screen and (max-width: 980px){
    body{
        font-size:13px;
    }
    .wrap{
        width:auto;
    }
    .cm figure{
    height:60px;
    }
    #page.news .list li .icon {
        margin:4px 10px 0 0;
    }
    /* show box */
    .show_box .wrap {
        width: auto;
    }
    /*---------about---------*/
    .about .content_text .wrap{
        padding:0 2em;
    }

    /*top bar*/
    .top-bar  a img { width: 100%;}	
    .top-bar { height: auto; }
}
@media screen and (max-width: 860px){
    #banner,
    #page header .logo{
        width:auto;
    }
}
@media screen and (max-width: 800px){
    .main_menu,
    #banner,
    .wrap {
        width:auto;
    }

    #index header .logo {
    margin: 0.5em 0em 0;
    }
    #banner,
    #index .main article {
    border-width:0px 0;
    }

    .select { top: -316px; }
    a.adidx.bn5, a.adidx.bn6, a.adidx.bn7, a.adidx.bn8 {
        margin-top: 283px;
    }
    
    /*side_list*/
    .side_list h3 ins {
    display: none;
    }
    
    #index .main {
    margin-bottom: 0em;
    }

    .dm-btn ins {
        display: none;
    }
    .dm-btn {
        top: 130px;
    }
}
@media screen and (max-width: 768px){
    /* banner */
    #banner { margin-top: 0; }
    .select {
        top: 0;
        margin-top: 8px;
    }
    .select { height: auto; }
    .select a { width: 50%; max-width: unset;}
    .select a:not(:last-child) { border-right: 0px; }
    .select a:nth-child(1), .select a:nth-child(2),
    .select a:nth-child(3), .select a:nth-child(4),
    .select a:nth-child(5), .select a:nth-child(6){
        border-bottom: 1px dotted #ebf5fa;
    }
    .select a:nth-child(1), .select a:nth-child(3),
    .select a:nth-child(5), .select a:nth-child(7) {
        border-right: 1px dotted #ebf5fa;
    }
    a.adidx.bn5, a.adidx.bn6, a.adidx.bn7, a.adidx.bn8 {
        margin-top: 0;
    }
}
@media screen and (max-width: 720px){
    #index .main .news,
    #index .main .med {
        width:100%;
    }
    #index .main article {
        height: auto;
    }
    #index .main .list {
        height: auto;
        padding-bottom:25px;
    }

    /*田字區*/
    .l-side, .r-side {
        width: 100%;
    }
    .dm-area {padding: 20px;}
    .custom-area { padding: 0 20px 10px 20px; }

    /*function-內頁*/
    #index .function {
        background:url(../images/bg_top.gif) repeat-x 0 bottom;
        position: relative;
        top:0;
        left:0;
        margin:0px 0 0em;
        border:1px #09C solid;
        border-width:0px 0 0px;
        padding:0.2em 0 2em 0;
    }

    /**/
    .headline h1 {
        float: none;
        display: block;
    }
        /* 會員專區表格 */
    .join_form li {
        width: auto;
        float: none;
        padding: 0.5em 0;
    }
    .join_form label {
        width: 25%;
    }
    
    /*商品查詢*/
    .order .dir ol, 
    .order .dir .btns{
        float: none;
    }
    /*商品查詢結果*/
    .product_list{
        border-top:1px #aaa solid;	
    }
    .product_list .item_head {
        display:none;
    }
    /**/
    .product_list .item .pic,
    .product_list .item .hint {
    margin-bottom:0.3em;
    }

    .product_list .item .item_text {
    width:  auto;
    margin-left:70px;
    }
    .product_list .item .code_price,
    .product_list .item .name_comp {
        width:auto;
    }
    .product_list .item .code_price .price {
        clear: none;
    }
    .product_list .item .spec{
        margin: 0 0px 0.2em 0;
    }
    .product_list .item .code_price,
    .product_list .item .control,
    .product_list .item .comp{
        margin-bottom:0.3em;
    }
    .product_list .item .code_price{
        margin-right: 0em;
    }
    .product_list .item .name_comp{
        width:70%;
        float:left;
        margin: 0 0px 0 0px;
    }
    .product_list .item  .sell_price{
        float:right;
        position:static;
    }
    .product_list .item .action {
        position:  relative;
        float:right;
        margin: -1.5em 0 0.5em;
    }
}

@media screen and (max-width: 520px){
    body,
    body#page{
        font-size:15px;
        background-image:url(../images/bg_page.png);
    }
    /*banner*/
    #banner {
        box-shadow:  none;
    }
    .select a { width: 100%;}
    .select a:nth-child(1), .select a:nth-child(3) {border-right: 0px;}
    .select a:not(:last-child) { border-bottom: 1px dotted #ebf5fa; }

    /*function-內頁*/
    .function {
        background:url(../images/bg_top.gif) repeat-x 0 bottom;
        font-size:13px;
        position: relative;
        top:0;
        left:0;
        margin:0px 0 0em;
        border:1px #09C solid;
        border-width:0px 0 0px;
        padding:0.2em 0 2em 0;
    }
    #index header .logo{
        width:100%;
    }
    header .logo {
        margin: 2em auto 0;
    }
    #page header .logo {
        text-align:left;
        margin-top:0.5em;
    }
    #page .function .menu {
        display: block;
    }
    #index .login_alert{
        top: 195px;
    }
    #page .login_alert {
        top: 165px;
    }
    /*主選單*/
    #page .main_menu{
        display:none;
    }
    .main_menu li {
        width: 20%;
        padding: 0 0% 2em 4%;
    }
    
    /*show_box-表格*/
    .show_box .login .forms {
        float: none;
        width: auto;
        margin: 0 0 1em 0;
        border-right: 0px solid #999;
        border-bottom: 1px solid #999;
    }
    .show_box .login .register {
         float: none; 
         width: auto; 
         margin-left: 0em; 
    }
    
    /*內頁標題區*/
    .headline {
        background-position:center -50px;
        margin-top: 0em;
        padding:0;
        border:0px;
    }
    .headline .wrap {
        height:  auto;
        padding:0;
    }
    .headline h1 {
        width:auto;
        text-align:left;
        color:#e80;
        margin:0;
        padding:0.2em 0.5em;
        background: none;
        text-indent: 0;
        overflow:  visible;
        height:auto;
        top:0;
        float:none;
        border-bottom: 1px #73b4d5 solid;
    }
    
    /*sub_menu*/
    .sub_menu {
        position:  relative;
        left: 0px;
        top: 0px;
        padding:0;
    }
    .sub_menu ul{
        background: #00b5e8;
        float:none;
    }
    .sub_menu li {
        background:none;
        list-style: none;
        width: 33%;
        height:auto;
        float: left;
        padding:0;
        margin: 0 0 0 0;
    }
    .sub_menu li.highlight {
        top: 0;
    }
    .sub_menu li.highlight a,
    .sub_menu li.highlight a:hover {
        background: #E8FAFF;
        color: #e80;
    }
    .sub_menu li a {
        background: none;
        border:0;
        border-radius:0;
        width: 100%;
        height:auto;
        color: #fff;
        padding:0.5em 0;
    }
    .sub_menu li a:hover {
        background:  #0CF;
    }
    
    /*main*/
    #page .main {
        padding: 0em 0 1em;
    }
    #page .content_text {
        background:none;
        border-top: 1px #73b4d5 solid;
        padding: 1em 0 0;
    }
    .main .list a {
        display:block;
    }
    .direct {
        background:#E8FAFF;
        border-top: none;
        padding: 0em 0; 
    }
    .direct .hint li {
        clear:both;
        overflow:hidden;
        width: auto;
    }
    /*---------about---------*/
    #page .content_text figure{
        border:0px solid #aaa;
    }
    #page.about .content_text .non{
        float:none;
        margin:1em 0;
        width:100%;
    }
    .about .content_text .non img{
        width:100%;
    }
    
    /*news*/
    #page.news .content_text {
        padding: 0em 0 0;
    }
    #page.news .list,
    #page.news .list li {
        padding: 0em 0;
    }
    #page .main .link time {
        width:  auto;
        float: none;
        display:block;
        font-size: 0.8em;
        margin-bottom:5px;
    }
    .news .list article {
        padding: 1em;
    }
    .news .list article img {
        margin: 2em 0;
        width:100%;
    }
    #page.news .content_text .right {
        float: none;
        margin: 0em 0em;
    }
    
    /*footer*/
    footer {
        padding:2em 0 2em 0em;
    }
    
    /*page*/
     .page_name{
        display:none;
    }
    
    /*member*/
    .member .sub_menu .gue {
    clear: none;
    }
    .rule {
        border-right: 0px solid #aaa;
        float: none;
        width:auto;
        padding: 0 1em;
        margin: 0 0em 1em 0;
    }
    .agree {
        float: none;
        margin: 0 0em 2em 2em;
    }
    .agree .btn{
        margin:0.5em 0;
    }
    .service ul {
        padding:0 ;
    }
    .service li {
        background: none;
        float: none;
        width: auto;
        overflow:hidden;
    }
    .order_list {
        border-width:0 0 1px 0;
        border-radius:0;
        margin: 0em 0em;
        padding: 0em 0em;
    }
    .frame {
        box-shadow:none;
        margin: 0 0em 1em;
        padding:1em;
    }
    /*留言板*/
    .guestbook .dir .hint {
    width: auto;
    float: none;
    margin: 0 0 1em 0;
    }
    .guestbook .msgbox {
    width: auto;
    padding:0 1em 1em;
    }
    .guestbook .direct .msgbox {
        float: none;
        padding:0 0em;
    }
    .guestbook .talk {
    padding: 0 0 1em;
    margin-bottom:1em;
    border-bottom:1px dotted #ccc;
    }
    .msgbox .name {
        margin: 0em 0em 0.5em 0;
    }
    .msgbox .peo {
        margin:0;
    }
    .msgbox .content{
    }
    .service .content{
    }
    /*order*/
    .btns{
        margin-left:1em;
    }
    .dir .btns{
        margin: 0em;
    }
    .dir .btns ul{
    }
    .product_list .item .name_comp{
        width:100%;
        margin: 0 0px 0 0px;
    }
    .product_list .item .sell_price {
        float: left;
    }
    
    /*pagenavi*/
    .pagenavi {
        padding: 2em 0 1em;
    }
    
    /* show box */
    .order .direct .show_box {
        position: relative;
        top: 0;
    }
    .forms li {
        width: auto;
        float: none;
        padding: 0.5em 0;
    }
    .forms label {
        width: 25%;
    }
    
    /*order*/
    .show_box .sort .sort_list ul {
        width: auto;
    }
    .show_box .sort .sort_list .level_1 li {
        clear:both;
    }
    .show_box .sort .sort_list .level_2,
    .show_box .sort .sort_list .level_3 {
        padding:0.5em 0 0.5em 1em;
        width: auto;
        height: auto;
        position:  relative;
        top: 0;
        left: 0;
    }
    .show_box .sort .sort_list .level_2 li {
    }
    .show_box .sort .sort_list .level_3:after{
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    .show_box .sort .sort_list .level_3 li{
        float:none;
        width:auto;
    }
    .show_box .sort .sort_list a.open {
    
    }
    /**/
    .marks ul {
        padding: 0;
    }
    .marks li {
    width: 29%;
    float: left;
    padding: 0 2% 4em 2%;
    }
    .order_list .summary {
    }
    .order_list .remark {
    width: auto;
    float: none;
    border-right: 0px solid #ccc;
    padding: 0 1em 0 0;
    margin: 0 0em 1em 0;
    }
    
    /*聯絡我們*/
    .traffic {
        width:auto;
        float: none;
        margin: 0 0 0 0%;
    }
    .traffic ul,
    .traffic h2 {
        padding: 0 15px;
    }
    .contact .forms {
        float: none;
        width: auto;
        margin: 0 0 0;
        padding: 0 3%;
    }
    .join_form .btns {
    padding: 0em 0 0 0em;
    }
}