@media screen and (max-width:767px) {
    /* ################## SETING ALL ################## */
    /* ################## #header ################## */
    #header .header-com {
        width: 95%;
    }
    /* - logo - */
    #header .header-com .logo {
        padding: 35px 0 0 0;
    }
    #header .header-com img {
        max-width: 65%;
    }
    /* - menu - */
    #header .header-com .menu {
        display: none;
    }
    /* - phone menu - */
    #header-ph {
        display: block;
        height: auto;
        min-height: 100%;
    }
    #header-ph .icon {
        position: absolute;
        right: 20px;
        top: 44px;
    }
    #header-ph .menu {
        height: 100%;
        min-width: 320px;
        position: absolute;
        right: 0;
        top: 119px;
        display: none;
        z-index: 99;
    }
    #header-ph .menu ul {
        height: auto;
        min-height: 100%;
        padding: 0px 0px;
        background-color: #202427;
    }
    #header-ph .menu a {
        color: #fff;
        font-size: 18px;
        display: block;
        text-align: center;
        line-height: 24px;
        padding: 20px 0;
        border-bottom: 1px solid #2c3237;
    }
    #header-ph .menu li.active a {
        color: #c09f68;
    }
    /* - 手機二次選單 - */
    #header-ph #phsubmenu {
        background-color: rgb(68, 68, 68);
    }
    #header-ph #phsubmenu .ph3rdmenu {
        background-color: rgb(98, 98, 98);
        color: #000;
    }
    /* /////////////// #footer /////////////// */
    #footer span.br {
        display: block;
        color: transparent;
    }
    /* ################## #banner ################## */
    #banner .banner-in {
        height: auto;
    }
    #banner .pic img {
        max-width: 100%;
    }
    #banner .icon {
        left: 50%;
        margin-left: -50px;
    }
    #banner .icon img {
        max-width: 10%;
    }
    /* ################## #index ################## */
    #index .box {
        width: 95%;
        margin: auto;
    }
    /* - 商品介紹 - */
    #index .stuff {
        margin: 4% 0 0 0;
    }
    #index .stuff .area {
        width: 48%;
        float: left;
        margin: 0 4% 4% 0;
    }
    #index .stuff .area.none {
        margin: 0 0 0 0;
    }
    #index .stuff .area:nth-child(2n) {
        margin: 0 0 0 0;
    }
    #index .stuff .pic {
        width: 100%;
        height: 162px;
        position: relative;
    }
    #index .stuff img {
        max-width: 100%;
        max-height: 100%;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
    }
    /* - 只有第一項改變 - */
    #index .stuff .only img {
        width: 90%;
        height: 100%;
        display: block;
    }
    @media screen and (min-width: 390px) and (max-width: 440px) {
        /* - 只有第一項改變 - */
        #index .stuff .only img {
            width: 80%;
        }
    }
    @media screen and (min-width: 441px) and (max-width: 501px) {
        /* - 只有第一項改變 - */
        #index .stuff .only img {
            width: 70%;
        }
    }
    @media screen and (min-width: 502px) and (max-width: 584px) {
        /* - 只有第一項改變 - */
        #index .stuff .only img {
            width: 60%;
        }
    }
    @media screen and (min-width: 584px) and (max-width: 690px) {
        /* - 只有第一項改變 - */
        #index .stuff .only img {
            width: 50%;
        }
    }
    @media screen and (min-width: 691px) and (max-width: 767px) {
        /* - 只有第一項改變 - */
        #index .stuff .only img {
            width: 40%;
        }
    }
    /* - 最新消息 - */
    #index .list a {
        height: 60px;
        margin: 10px 0;
        display: block;
        line-height: 25px;
    }
    #index .list .day {
        width: 100%;
        float: none;
    }
    #index .list .news {
        width: 100%;
        float: none;
    }
    /* ################## #contact ################## */
    #contact {
        width: 95%;
        height: auto;
        margin: 0 auto 80px auto;
    }
    /* - set both -  */
    #contact .addr {
        float: none;
        width: 100%;
        padding: 0 0 0 0px;
    }
    #contact .map {
        float: none;
        width: 100%;
    }
    /* - set one thing - */
    #contact .info ul {
        margin: 0 0 14px 0;
    }
    #contact .info li {
        display: block;
        padding: 0 0 0 15px;
    }
    /* - other setting -  */
    #contact .info li.none {
        display: block;
        margin-left: 0px;
        padding: 0 0 0 15px;
    }
    #contact .info .tit {
        padding: 0;
    }
    @media screen and (min-width: 500px) and (max-width: 768px) {
        /* - set one thing - */
        #contact .info ul {
            margin: 0 0 14px 0;
        }
        #contact .info li {
            display: inline-block;
            vertical-align: middle;
            padding: 0;
        }
        /* - other setting -  */
        #contact .info li.none {
            margin-left: 97px;
            padding: 5px 0 0 0;
        }
    }
    /* ################## #news ################## */
    #news {
        width: 95%;
        margin: 0 auto 80px auto;
    }
    /* ----- unshow ----- */
    #news .unshow .showNews {
        margin: 20px 0px 0 0px;
        padding: 0px 0px 10px 0px;
    }
	#news .unshow ul.show_target{
		margin:0px;
		padding:0px 10px 0 10px;
	}
    /* - title - */
    #news .unshow li {
        display: inline-block;
        width: calc( 100% - 30px);
        line-height: 24px;
        vertical-align: top;
    }
    #news .unshow li p {
        padding: 0 10px 0 0;
    }
    #news .unshow li.tar {
        width: 20px;
        background-position: center bottom;
    }
    /* - day ball - */
    #news .unshow .ball {
        width: 100%;
        height: auto;
        border-radius: 0%;
        border: none;
        position: relative;
        left: 0px;
		padding:10px 10px 0 10px;
		box-sizing: border-box;
    }
    #news .unshow .ball .table {
        width: 100%;
        height: 35px;
        display: block;
        text-align: left;
    }
    #news .unshow .ball .table p {
        display: inline-block;
    }
    /* ----- showing ----- */
    #news .showing .showNews {
        margin: 20px 0px 0 0px;
        padding: 0px 0px 10px 0px;
    }
	#news .showing ul.show_target{
		margin:0px;
		padding:0px 10px 10px 10px;	
	}
    /* - title - */
    #news .showing li {
        display: inline-block;
        width: calc( 100% - 30px);
        line-height: 24px;
        vertical-align: top;
    }
    #news .showing li p {
        padding: 0 10px 0 0;
    }
    #news .showing li.tar {
        width: 20px;
        background-position: center bottom;
    }
    /* - day ball - */
    #news .showing .ball {
        width: 100%;
        height: auto;
        border-radius: 0%;
        background-color: #faf2e5;
        border: none;
        position: relative;
        left: 0px;
		padding: 10px 10px 0 10px;
	    box-sizing: border-box;
    }
    #news .showing .ball .table {
        width: 100%;
        height: 35px;
        display: block;
        text-align: left;
    }
    #news .showing .ball .table p {
        display: inline-block;
        color: #c09f68;
    }
    /* - info - */
    #news .showing .info {
        padding: 15px 10px 0 10px;
    }
    /* ################## #product-sp ################## */
    #product-sp {
        width: 95%;
        margin: 0 auto 80px auto;
    }
    /* - area - */
    #product-sp .area {
        border-bottom: 1px solid #777777;
        padding: 50px 0 50px 0;
    }
    /* - 圖片 - */
    #product-sp .pic {
        width: 100%;
        float: none;
        margin: 0 0% 0 0;
    }
    #product-sp .pic h1 {
        padding: 0 0 15px 0;
        display: block;
    }
    /* - 資訊 - */
    #product-sp .out {
        width: 100%;
        float: none;
    }
    #product-sp .info {
        width: calc( 100% - 10px);
        padding: 15px 5px;
        float: none;
    }
    #product-sp .info h1 {
        display: none;
    }
    /* - 影片 - */
    #product-sp .video {
        float: none;
        width: 100%;
        margin: 5% 0 0 0%;
    }
    /* - more-video - */
    #product-sp .more-video .yout {
        display: none;
    }
    #product-sp .more-video .tube {
        display: block;
    }
    #product-sp .more-video .tube a {
        width: auto;
        height: auto;
        margin: 0;
        float: none;
        color: #555;
    }
    #product-sp .more-video .tube ul {
        border-bottom: 1px dotted #455;
        padding: 0 0 10px 0;
        margin: 0 0 15px 0;
    }
    #product-sp .more-video .tube li {
        display: inline-block;
        vertical-align: middle;
        -ms-word-break: break-all;
        word-break: break-all;
    }
    #product-sp .more-video .tube img {
        position: relative;
        max-width: 50%;
    }
    #product-sp .more-video .tube li:nth-child(1) {
        width: 70%;
    }
    #product-sp .more-video .tube li:nth-child(2) {
        width: 25%;
        margin: 0 0 0 3%;
        text-align: center;
    }
    /* ################## #product-hp ################## */
    #product-hp {
        width: 95%;
        margin: 0 auto 80px auto;
    }
    /* - area - */
    #product-hp .area {
        border-bottom: 1px solid #777777;
        padding: 50px 0 50px 0;
    }
    /* - 圖片 - */
    #product-hp .pic {
        width: 100%;
        float: none;
        margin: 0 0% 0 0;
    }
    #product-hp .pic h1 {
        padding: 0 0 15px 0;
        display: block;
    }
    /* - 資訊 - */
    #product-hp .out {
        width: 100%;
        float: none;
    }
    #product-hp .info {
        width: calc( 100% - 10px);
        padding: 15px 5px;
        float: none;
    }
    #product-hp .info h1 {
        display: none;
    }
    /* - 影片 - */
    #product-hp .video {
        float: none;
        width: 100%;
        margin: 5% 0 0 0%;
    }
    /* ################## #product-epson ################## */
    #product-epson {
        width: 95%;
        margin: 0 auto 80px auto;
    }
    /* - area - */
    #product-epson .area {
        border-bottom: 1px solid #777777;
        padding: 50px 0 50px 0;
    }
    /* - 圖片 - */
    #product-epson .pic {
        width: 100%;
        float: none;
        margin: 0 0% 0 0;
    }
    #product-epson .pic h1 {
        padding: 0 0 15px 0;
        display: block;
    }
    /* - 資訊 - */
    #product-epson .out {
        width: 100%;
        float: none;
    }
    #product-epson .info {
        width: calc( 100% - 10px);
        padding: 15px 5px;
        float: none;
    }
    #product-epson .info h1 {
        display: none;
    }
    /* - 影片 - */
    #product-epson .video {
        float: none;
        width: 100%;
        margin: 5% 0 0 0%;
    }
    /* ################## #product-roland ################## */
    #product-roland {
        width: 95%;
        margin: 0 auto 80px auto;
    }
    /* - area - */
    #product-roland .area {
        border-bottom: 1px solid #777777;
        padding: 50px 0 50px 0;
    }
    /* - 圖片 - */
    #product-roland .pic {
        width: 100%;
        float: none;
        margin: 0 0% 0 0;
    }
    #product-roland .pic h1 {
        padding: 0 0 15px 0;
        display: block;
    }
    /* - 資訊 - */
    #product-roland .out {
        width: 100%;
        float: none;
    }
    #product-roland .info {
        width: calc( 100% - 10px);
        padding: 15px 5px;
        float: none;
    }
    #product-roland .info h1 {
        display: none;
    }
    /* - 影片 - */
    #product-roland .video {
        float: none;
        width: 100%;
        margin: 5% 0 0 0%;
    }
    /* ################## #product-jcut ################## */
    #product-jcut {
        width: 95%;
        margin: 0 auto 80px auto;
    }
    /* - area - */
    #product-jcut .area {
        border-bottom: 1px solid #777777;
        padding: 50px 0 50px 0;
    }
    /* - 圖片 - */
    #product-jcut .pic {
        width: 100%;
        float: none;
        margin: 0 0% 0 0;
    }
    #product-jcut .pic h1 {
        padding: 0 0 15px 0;
        display: block;
    }
    /* - 資訊 - */
    #product-jcut .out {
        width: 100%;
        float: none;
    }
    #product-jcut .info {
        width: calc( 100% - 10px);
        padding: 15px 5px;
        float: none;
    }
    #product-jcut .info h1 {
        display: none;
    }
    /* - 影片 - */
    #product-jcut .video {
        float: none;
        width: 100%;
        margin: 5% 0 0 0%;
    }
    /* ################## #inquiry ################## */
    #inquiry li a {
        width: 100%;
        float: none;
        margin: 0 0 4% 0;
        padding: 10px 0;
        height: 100%;
        line-height: 24px;
    }
    #inquiry li a.stay {
        display: none;
    }
    /* ################## #product-supp ################## */
    #product-supp {
        width: 95%;
    }
    /* for-com */
    #product-supp .for-com {
        display: none;
    }
    /* for-ph */
    #product-supp .for-ph {
        display: block;
    }
    #product-supp a.box {
        width: 100%;
        display: block;
        border: 1px solid #c09f69;
        margin: 0 0 20px 0;
        border-radius: 10px;
    }
    #product-supp a.box ul {
        padding: 10px;
    }
    #product-supp li {
        text-align: center;
    }
    #product-supp li.word {
        font-size: 18px;
        font-weight: bold;
        margin: 10px 0 0 0;
        line-height: 24px;
    }
    #product-supp img {
        max-width: 100%;
        margin: 20px 0 0 0;
    }
    /* - icon-top - */
    #product-supp a.icon-top {
        display: none;
    }
    /* ################## #product-inqu ################## */
    #product-inqu {
        width: 95%;
    }
    #product-inqu #title-line {
        display: none;
    }
    /* - box-all - */
    #product-inqu .box-all {
        display: none;
    }
    /* - message - */
    #product-inqu .inner ul {
        margin: 1% 4% 5% 0;
    }
    /* - 地址 留言 - */
    #product-inqu .inner ul.leave textarea {
        max-width: 97.5%;
        min-width: 97.5%;
    }
    /* - 送出 - */
    #product-inqu .send {
        width: 200px;
        text-align: center;
        margin: auto;
    }
    #product-inqu .send button {
        margin: 15px 0px;
        display: block;
        text-align: center;
    }
    /* ################## #product-software ################## */
    #product-software {
        width: 95%;
        margin: 0 auto 80px auto;
    }
    /* - area - */
    #product-software .area {
        padding: 50px 0 50px 0;
    }
    /* - 圖片 - */
    #product-software .pic {
        width: 100%;
        float: none;
        margin: 0 0% 0 0;
    }
    #product-software .pic h1 {
        padding: 0 0 15px 0;
        display: block;
    }
    /* - 資訊 - */
    #product-software .out {
        width: 100%;
        float: none;
    }
    #product-software .info {
        width: calc( 100% - 10px);
        padding: 15px 5px;
        float: none;
    }
    #product-software .info h1 {
        display: none;
    }
    /* ################## #about ################## */
    #about .box {
        padding: 20px;
    }
    #about .box.bn {
        display: none;
    }
    #about .box .ab {
        float: none;
    }
    #about .box .a {
        margin-bottom: 5px;
    }
    #about .box .b {
        line-height: 24px;
    }
}
/* 首頁圖片補丁 v20220107 */
#index .stuff .area .area_inner {
    position: relative;
    width: 100%;
	padding-top: 111.5702479338843%;
}

#index .stuff .area .area_inner > .pic {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
	height: auto;
}