@charset "UTF-8";
/* CSS Document */

section, article, aside, footer, header, nav, h2 { display:block;}

body { padding:0; margin:0 auto; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; background-color: #ffffff; display: block; position: relative;}
img { border:0;}

html, body { height: 100%;}

.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }

div.brk { clear: both;}

font.red { color: #ff0000;}
font.small { font-size: 0.8em;}



@media screen and (min-width: 1280px) {

    /******** order_form_icon ********/

    #order-icon { width: 80px; height: 80px; border: 1px #b71c25 solid; border-radius: 100%; color: #fff; font-size: 1.4em; font-weight: 500; line-height: 1.1em; text-align: center; position: fixed; top: 100px; right: 0; overflow: hidden; z-index: 990;}
    #order-icon a { width: 80px; height: 80px; padding: 15px 0 0 0; color: #fff; text-decoration: none; background-color: #b71c25; display: block;}
    #order-icon a:hover, #order-icon a:active { color: #b71c25; background-color: #fff;}
    
    
    /******** header for pc ********/
    
    header { width: 100%; height: 180px; background: url(../images/header_footer_bg.png) #f2d7ad top left repeat-x;}
    
    header .header-main { width: 1200px; margin: 0 auto;}
    
    header .header-main .logo-bx { width: 250px; padding: 20px 0 0 0; float: left;}
    
    header .header-main .title-bx { width: 345px; padding: 40px 0 0 0; float: left;}
    
    header .header-main .nav-bx { width: calc(100% - 595px); float: left;}
    header .header-main .nav-bx .social-icon { width: 100%; margin: 40px 0 0 0;} 
    header .header-main .nav-bx .social-icon ul { padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-end; align-items: center;}
    header .header-main .nav-bx .social-icon ul li { padding: 0; margin: 0 0 0 10px;}
    header .header-main .nav-bx .social-icon ul li a { width: 40px; height: 40px; padding: 2px 0 0 0; color: #fff; font-size: 1.4em; text-align: center; border-radius: 100%; background-color: #b71c25; display: block; box-sizing: border-box;}
    header .header-main .nav-bx .social-icon ul li a:hover { color: #b71c25; border: 1px #b71c25 solid; background-color: #fff; box-sizing: border-box;}
    header .header-main .nav-bx .nav-icon { display: none;}
    header .header-main .nav-bx nav#mo { display: none;}
    header .header-main .nav-bx nav#pc { width: 100%; margin: 40px 0 0 0;}
    header .header-main .nav-bx nav#pc ul { padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-end; align-items: center;}
    header .header-main .nav-bx nav#pc ul li { height: 60px; padding: 0; margin: 0 0 0 21px; position: relative;}
    header .header-main .nav-bx nav#pc ul li a { padding: 3px 5px; color: #b71c25; font-size: 1.4em; font-weight: 500; text-decoration: none; border: 0; box-sizing: border-box; cursor: pointer;}
    header .header-main .nav-bx nav#pc ul li a:hover { border: 1px #b71c25 solid; box-sizing: border-box;}
    header .header-main .nav-bx nav#pc ul li a.sel { border: 1px #b71c25 solid; box-sizing: border-box;}
    header .header-main .nav-bx nav#pc ul li ul#popup { width: 140px; padding: 10px 0; margin: 0; background-color: #f2d7ad; display: none; position: absolute; top: 60px; left: calc(100% / 2 - 70px); z-index: 999;}
    header .header-main .nav-bx nav#pc ul li ul#popup li { width: 100%; height: auto; padding: 0; margin: 0; text-align: center;}
    header .header-main .nav-bx nav#pc ul li ul#popup li a { width: 100%; padding: 5px 0; color: #b71c25; font-size: 1.2em; text-decoration: none; display: block;}
    header .header-main .nav-bx nav#pc ul li ul#popup li a:hover { background-color: rgba(255,255,255,0.6);}
    header .header-main .nav-bx nav#pc ul li ul#popup li a.sel { border: 0;}
    
    
    
    /******** banner ********/
    
    #banner-bx { clear: both; width: 100%;}
    #banner-bx img { width: 100%; height: auto;}
    
    
    
    /******** section#hp-sec1 ********/
    
    section#hp-sec1 { width: 100%; padding: 140px 0; background-image: url('../images/sec_1_bg.jpg');}
    
    section#hp-sec1 .main-content { width: 1200px; margin: 0 auto;}
    section#hp-sec1 .main-content .title-bx { width: 280px; margin: 0 auto 40px auto; font-size: 2em; font-weight: 500; text-align: center; border-top: 2px #000 solid; border-bottom: 2px #000 solid;}
    section#hp-sec1 .main-content .text-bx { clear: both; width: 100%; margin: 0 0 40px 0; font-size: 1.1em; line-height: 1.8em; text-align: center;}
    section#hp-sec1 .main-content .pic-bx { width: 50%; margin: 40px 0 0 0; float: left;}
    section#hp-sec1 .main-content .pic-bx img { width: 100%; height: auto;}    
    section#hp-sec1 .main-content .content-bx { width: calc(50% - 140px); float: right;}
    section#hp-sec1 .main-content .content-bx .title-bx { width: 200px; margin: 0 auto 40px auto; font-size: 2em; font-weight: 500; text-align: center; border-top: 2px #000 solid; border-bottom: 2px #000 solid;}
    section#hp-sec1 .main-content .content-bx .text-bx { clear: both; width: 100%; margin: 0 0 40px 0; font-size: 1.1em; line-height: 1.8em;}
    section#hp-sec1 .main-content .content-bx .more-bx { clear: both; width: 120px; text-align: center; float: right;}
    section#hp-sec1 .main-content .content-bx .more-bx a { width: 100%; padding: 5px 0; color: #000; text-decoration: none; border: 1px #000 solid; border-radius: 6px; display: block;}
    section#hp-sec1 .main-content .content-bx .more-bx a:hover { color: #fff; background-color: #b71c25;}
    
    
    
    /******** section#hp-sec2 ********/
    
    section#hp-sec2 { width: 100%; padding: 160px 0; background-color: #eb6100;}
    
    section#hp-sec2 .title-bx { width: 140px; margin: 0 auto 80px auto; color: #fff; font-size: 2em; font-weight: 500; text-align: center; border-top: 2px #fff solid; border-bottom: 2px #fff solid;}
    
    section#hp-sec2 .prod-class-bx { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: center;}
    section#hp-sec2 .prod-class-bx .class-bx { width: calc(100% / 6 - 20px); height: 13vw; margin: 0 10px; border: 1px #fff solid; box-sizing: border-box; display: flex; justify-content: center; align-items: center; position: relative; overflow: hidden;}
    section#hp-sec2 .prod-class-bx .class-bx .class-name { width: 100%; height: 100%; color: #000; font-size: 1.6em; display: flex; justify-content: center; align-items: center; background-color: rgba(248,181,81,0.9); position: absolute; top: 0; left: 0;}
    
    
    
    /******** section#hp-sec3 ********/
    
    section#hp-sec3 { width: 100%; padding: 100px 0;}
    
    section#hp-sec3 .main-content { width: 1200px; margin: 0 auto;}
    section#hp-sec3 .main-content .map-bx { width: 50%; display: flex; justify-content: center; align-items: center; float: left;}
    section#hp-sec3 .main-content .infor-bx { width: 50%; padding: 0 65px; box-sizing: border-box; float: right;}
    section#hp-sec3 .main-content .infor-bx .title-bx { width: 140px; margin: 0 0 80px 0; color: #000; font-size: 2em; font-weight: 500; text-align: center; border-top: 2px #000 solid; border-bottom: 2px #000 solid;}
    section#hp-sec3 .main-content .infor-bx .text-bx { clear: both; width: 100%; font-size: 1.1em; line-height: 1.8em;}
    
    
    
    /******** section#sec-about ********/
    
    section#sec-about { width: 100%; padding: 100px 0; background-image: url('../images/sec_1_bg.jpg');}
    
    section#sec-about .main-content { width: 1200px; margin: 0 auto;}
    section#sec-about .main-content .title-bx { width: 200px; margin: 0 auto 80px auto; color: #b71c25; font-size: 2em; font-weight: 500; text-align: center; border-top: 2px #b71c25 solid; border-bottom: 2px #b71c25 solid;}
    section#sec-about .main-content .text-b-bx { width: 100%; margin: 0 0 60px 0; line-height: 2em; font-weight: 500; text-align: center;}
    section#sec-about .main-content .img-bx { clear: both; width: 400px; margin: 0 60px 0 0; padding: 20px 0 0 0; float: left;}
    section#sec-about .main-content .img-bx img { width: 100%; height: auto;}
    section#sec-about .main-content .text-bx { width: calc(100% - 460px); line-height: 2em; float: left;}
    
    
    
    /******** section#sec-prod-class ********/
    
    section#sec-prod-class { width: 100%; padding: 100px 0; background-image: url('../images/sec_1_bg.jpg');}
    
    section#sec-prod-class .main-content { width: 1200px; margin: 0 auto;}
    section#sec-prod-class .main-content .title-bx { width: 140px; margin: 0 auto 80px auto; color: #b71c25; font-size: 2em; font-weight: 500; text-align: center; border-top: 2px #b71c25 solid; border-bottom: 2px #b71c25 solid;}
    section#sec-prod-class .main-content .calss-nav-bar { clear: both; width: 100%; margin: 0 0 80px 0;}
    section#sec-prod-class .main-content .calss-nav-bar ul { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; align-items: center;}
    section#sec-prod-class .main-content .calss-nav-bar ul li { padding: 0; margin: 0 5px;}
    section#sec-prod-class .main-content .calss-nav-bar ul li a { padding: 3px 10px; color: #b71c25; font-size: 1.1em; border: 1px #b71c25 solid; text-decoration: none; display: block;}
    section#sec-prod-class .main-content .calss-nav-bar ul li a:hover { color: #fff; background-color: #b71c25;}
    section#sec-prod-class .main-content .calss-nav-bar ul li a.sel { color: #fff; background-color: #b71c25;}
    section#sec-prod-class .main-content .text-bx { width: 100%; margin: 0 0 80px 0; color: #eb6100; font-size: 1.1em; text-align: center;}
    section#sec-prod-class .main-content .prod-list-bx { width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
    section#sec-prod-class .main-content .prod-list-bx .list-bx { width: calc(100% / 4); margin: 0 0 30px 0;}
    section#sec-prod-class .main-content .prod-list-bx .list-bx .prod-pic { width: 100%; text-align: center;}
    section#sec-prod-class .main-content .prod-list-bx .list-bx .prod-pic img { width: 90%; height: auto;}
    section#sec-prod-class .main-content .prod-list-bx .list-bx .prod-text { width: 90%; margin: 0 auto; display: flex; justify-content: space-around; align-items: center;}
    section#sec-prod-class .main-content .prod-list-bx .list-bx .prod-text .name { text-align: center;}
    section#sec-prod-class .main-content .prod-list-bx .list-bx .prod-text .price { color: #eb6877; font-weight: 500; text-align: center;}


    .fanbox-showinfor { max-width: 900px; display: none; background-color: #e9dac7;}
    .fanbox-showinfor img { width: 100%; height: auto;}
    .fanbox-showinfor .infor-table { clear: both; width: 100%; margin: 20px 0 0 0; font-size: 1.2em; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
    .fanbox-showinfor .infor-table .caption { width: 40%; padding: 5px 15px; box-sizing: border-box;}
    .fanbox-showinfor .infor-table .column { width: 10%; padding: 5px 15px; text-align: right; box-sizing: border-box;}
    .fanbox-showinfor .infor-table .total { clear: both; width: 100%; padding: 5px 15px; text-align: center; border-top: 1px #ccc solid; box-sizing: border-box;}
    
    
    
    /******** section#sec-order-form ********/
    
    section#sec-prod-class .main-content .order-form-content { clear: both; width: 100%;}
    
    section#sec-prod-class .main-content .order-form-content .form-exp { width: 70%; margin: 30px auto; line-height: 1.6em;}
    section#sec-prod-class .main-content .order-form-content .form-exp .exp-title { width: 100%; margin: 0 0 20px 0; font-size: 1.2em; font-weight: 600;}
    section#sec-prod-class .main-content .order-form-content .form-exp ul.num { padding: 0 0 0 20px; margin: 0; list-style: decimal; display: block;}
    section#sec-prod-class .main-content .order-form-content .form-exp ul.num li { padding: 0; margin: 0;}
    
    section#sec-prod-class .main-content .order-form-content .form-column-bx { clear: both; width: 100%;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .caption-lt-bx { width: 50%; border-top: 2px #000 solid; border-bottom: 1px #000 solid; border-right: 1px #000 solid; box-sizing: border-box; background-color: #e8983f; float: left;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .caption-rt-bx { width: 50%; border-top: 2px #000 solid; border-bottom: 1px #000 solid; box-sizing: border-box; background-color: #e8983f; float: left;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .caption-lt-bx .caption-pic, section#sec-prod-class .main-content .order-form-content .form-column-bx .caption-rt-bx .caption-pic { width: 15%; padding: 10px 5px; color: #fff; font-weight: 600; text-align: center; box-sizing: border-box; float: left;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .caption-lt-bx .caption-1, section#sec-prod-class .main-content .order-form-content .form-column-bx .caption-rt-bx .caption-1 { width: 30%; padding: 10px 5px; color: #fff; font-weight: 600; text-align: left; box-sizing: border-box; float: left;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .caption-lt-bx .caption-2, section#sec-prod-class .main-content .order-form-content .form-column-bx .caption-rt-bx .caption-2 { width: 20%; padding: 10px 5px; color: #fff; font-weight: 600; text-align: center; box-sizing: border-box; float: left;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .caption-lt-bx .caption-3, section#sec-prod-class .main-content .order-form-content .form-column-bx .caption-rt-bx .caption-3 { width: 15%; padding: 10px 5px; color: #fff; font-weight: 600; text-align: center; box-sizing: border-box; float: left;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .caption-lt-bx .caption-4, section#sec-prod-class .main-content .order-form-content .form-column-bx .caption-rt-bx .caption-4 { width: 20%; padding: 10px 5px; color: #fff; font-weight: 600; text-align: center; box-sizing: border-box; float: left;}

    section#sec-prod-class .main-content .order-form-content .form-column-bx .class-column-bx { clear: both; width: 100%; padding: 10px; color: #eb6877; font-weight: 600; text-align: center; border-top: 1px #000 solid; border-bottom: 2px #000 solid; background-color: #fff; box-sizing: border-box;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .column-lt-bx { width: 50%; background-color: #efefef; border-bottom: 1px #000 solid; border-right: 1px #000 solid; box-sizing: border-box; display: flex; align-items: center; float: left;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .column-rt-bx { width: 50%; background-color: #efefef; border-bottom: 1px #000 solid; box-sizing: border-box; display: flex; align-items: center; float: left;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .column-lt-bx .column-pic, section#sec-prod-class .main-content .order-form-content .form-column-bx .column-rt-bx .column-pic { width: 15%; padding: 17px 5px 10px 5px; box-sizing: border-box; float: left;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .column-lt-bx .column-pic img, section#sec-prod-class .main-content .order-form-content .form-column-bx .column-rt-bx .column-pic img { width: 100%; height: auto;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .column-lt-bx .column-1, section#sec-prod-class .main-content .order-form-content .form-column-bx .column-rt-bx .column-1 { width: 30%; padding: 17px 5px 10px 5px; box-sizing: border-box; float: left;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .column-lt-bx .column-2, section#sec-prod-class .main-content .order-form-content .form-column-bx .column-rt-bx .column-2 { width: 20%; padding: 17px 5px 10px 5px; color: #eb6877; text-align: center; box-sizing: border-box; float: left;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .column-lt-bx .column-2 font.small, section#sec-prod-class .main-content .order-form-content .form-column-bx .column-rt-bx .column-2 font.small { font-size: 0.8em;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .column-lt-bx .column-3, section#sec-prod-class .main-content .order-form-content .form-column-bx .column-rt-bx .column-3 { width: 15%; padding: 10px 5px; box-sizing: border-box; float: left;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .column-lt-bx .column-3 input[type=text], section#sec-prod-class .main-content .order-form-content .form-column-bx .column-rt-bx .column-3 input[type=text] { width: 100%; padding: 5px; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; text-align: center; border: 1px #ccc solid; box-sizing: border-box;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .column-lt-bx .column-4, section#sec-prod-class .main-content .order-form-content .form-column-bx .column-rt-bx .column-4 { width: 20%; padding: 10px 5px; box-sizing: border-box; float: left;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .column-lt-bx .column-4 input[type=text], section#sec-prod-class .main-content .order-form-content .form-column-bx .column-rt-bx .column-4 input[type=text] { width: 100%; padding: 5px; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; text-align: center; border: 1px #ccc solid; box-sizing: border-box;}

    section#sec-prod-class .main-content .order-form-content .form-column-bx .total-column-bx { clear: both; width: 100%; padding: 5px; color: #eb6877; font-weight: 600; text-align: center; border-top: 1px #000 solid; border-bottom: 1px #000 solid; background-color: #fff; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .total-column-bx .column-1 { width: 80%; padding: 17px 5px 10px 5px; box-sizing: border-box; font-weight: 600; text-align: right;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .total-column-bx .column-2 { width: 20%; padding: 10px 5px; box-sizing: border-box;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .total-column-bx .column-2 input[type=text] { width: 100%; padding: 5px; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; text-align: center; border: 1px #ccc solid; box-sizing: border-box;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .total-column-bx .column-3 { width: 5%; padding: 10px 5px; text-align: left; box-sizing: border-box; font-weight: 600;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .total-column-bx .column-4 { width: 95%; padding: 10px 5px; box-sizing: border-box;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .total-column-bx .column-4 textarea { width: 100%; height: 150px; padding: 5px; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 1px #ccc solid; box-sizing: border-box;}

    section#sec-prod-class .main-content .order-form-content .form-column-bx .order-infor-form-caption { clear: both; width: 100%; padding: 10px 5px; color: #fff; font-weight: 600; text-align: center; border-top: 2px #000 solid; border-bottom: 2px #000 solid; border-right: 1px #000 solid; box-sizing: border-box; background-color: #e8983f;}

    section#sec-prod-class .main-content .order-form-content .form-column-bx .order-infor-form-bx { clear: both; width: 100%; padding: 10px 0; background-color: #fff; border-bottom: 2px #000 solid;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .order-infor-form { width: 100%; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .order-infor-form .infor-caption { width: 80px; padding: 5px; font-weight: 600; box-sizing: border-box;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .order-infor-form .infor-column-1 { width: calc(50% - 80px); padding: 5px; box-sizing: border-box;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .order-infor-form .infor-column-1 input[type=text].style1 { width: 95%; padding: 10px 5px; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; box-sizing: border-box; border: 1px #ccc solid;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .order-infor-form .infor-column-1 select { width: 95%; padding: 10px 5px; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; box-sizing: border-box; border: 1px #ccc solid;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .order-infor-form .infor-column-1 input[type=text].style2 { width: calc(95% - 160px); padding: 10px 5px; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; box-sizing: border-box; border: 1px #ccc solid;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .order-infor-form .infor-column-1 input[type=text].style3 { width: 120px; padding: 10px 5px; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; box-sizing: border-box; border: 1px #ccc solid;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .order-infor-form .infor-column-2 { width: 50%;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .order-infor-form .infor-column-3 { width: calc(100% - 80px); padding: 5px; box-sizing: border-box;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .order-infor-form .infor-column-3 select { width: 250px; padding: 10px 5px; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; box-sizing: border-box; border: 1px #ccc solid;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .order-infor-form .infor-column-3 input[type=text].style2 { width: calc(95% - 224px); padding: 10px 5px; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; box-sizing: border-box; border: 1px #ccc solid;}

    section#sec-prod-class .main-content .order-form-content .form-column-bx .check-bx { clear: both; width: 100%; margin: 40px 0 0 0; display: flex; justify-content: center;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .check-bx input[type=submit], section#sec-prod-class .main-content .order-form-content .form-column-bx .check-bx input[type=button], section#sec-prod-class .main-content .order-form-content .form-column-bx .check-bx input[type=reset] { padding: 10px 20px; margin: 0 10px; color: #fff; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; font-weight: 500; border: 0; border-radius: 8px; background-color: #e8983f;}
    
    
    
    /******** section#sec-qanda ********/
    
    section#sec-qanda { width: 100%; padding: 100px 0; background-image: url('../images/sec_1_bg.jpg');}
    
    section#sec-qanda .main-content { width: 800px; margin: 0 auto;}
    section#sec-qanda .main-content .title-bx { width: 140px; margin: 0 auto 80px auto; color: #b71c25; font-size: 2em; font-weight: 500; text-align: center; border-top: 2px #b71c25 solid; border-bottom: 2px #b71c25 solid;}
    section#sec-qanda .main-content .qanda-bx { width: 100%; margin: 0 0 20px 0;}
    section#sec-qanda .main-content .qanda-bx .q-sub { width: 100%; padding: 5px; font-size: 1.2em; color: #000; font-weight: 500; box-sizing: border-box; cursor: pointer;}
    section#sec-qanda .main-content .qanda-bx .q-sub:hover { background-color: #eee;}
    section#sec-qanda .main-content .qanda-bx .a-content { width: 100%; padding: 20px 30px; margin: 15px 0; line-height: 2em; border: 1px #ccc solid; border-radius: 10px; box-sizing: border-box;}
    section#sec-qanda .main-content .qanda-bx .a-content ul.num { padding: 0 0 0 20px; margin: 0; list-style: decimal; display: block;}
    section#sec-qanda .main-content .qanda-bx .a-content ul.num li { padding: 0; margin: 0;}
    
    
    
    /******** section#sec-contact ********/
    
    section#sec-contact { width: 100%; padding: 100px 0; background-image: url('../images/sec_1_bg.jpg');}
    
    section#sec-contact .main-content { width: 1200px; margin: 0 auto;}
    section#sec-contact .main-content .title-bx { width: 140px; margin: 0 auto 80px auto; color: #b71c25; font-size: 2em; font-weight: 500; text-align: center; border-top: 2px #b71c25 solid; border-bottom: 2px #b71c25 solid;}
    section#sec-contact .main-content .map-pic { clear: both; width: 350px; float: left;}
    section#sec-contact .main-content .infor-bx { width: calc(100% - 430px); margin: 0 0 0 80px; line-height: 2em; float: left;}
    section#sec-contact .main-content .infor-bx ul.num { padding: 0 0 0 24px; margin: 0; list-style: decimal; display: block;}
    section#sec-contact .main-content .infor-bx ul.num li { padding: 0; margin: 0;}
    
    
    
    /******** section#sec-sitemap ********/
    
    section#sec-sitemap { width: 100%; padding: 100px 0; background-image: url('../images/sec_1_bg.jpg');}
    
    section#sec-sitemap .main-content { width: 1200px; margin: 0 auto;}
    section#sec-sitemap .main-content .title-bx { width: 140px; margin: 0 auto 80px auto; color: #b71c25; font-size: 2em; font-weight: 500; text-align: center; border-top: 2px #b71c25 solid; border-bottom: 2px #b71c25 solid;}
    section#sec-sitemap .main-content ul.sitemap { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; align-items: stretch;}
    section#sec-sitemap .main-content ul.sitemap li { padding: 0; margin: 20px; color: #000; font-size: 1.4em; font-weight: 500;}
    section#sec-sitemap .main-content ul.sitemap li a { color: #000; text-decoration: none;}
    section#sec-sitemap .main-content ul.sitemap li a:hover { text-decoration: underline;}
    section#sec-sitemap .main-content ul.sitemap li ul.class { padding: 0; margin: 5px 0; list-style: none; display: block;}
    section#sec-sitemap .main-content ul.sitemap li ul.class li { padding: 0; margin: 5px 0; color: #000; font-size: 0.8em; font-weight: normal;}
    section#sec-sitemap .main-content ul.sitemap li ul.class li a { color: #000; text-decoration: none;}
    section#sec-sitemap .main-content ul.sitemap li ul.class li a:hover { text-decoration: underline;}
    
    
    
    /******** footer ********/
    
    footer { width: 100%; padding: 80px 0; background: url(../images/header_footer_bg.png) #f2d7ad top left repeat-x; position: relative;}
    
    footer .main-content { width: 1200px; margin: 0 auto;}
    
    footer .main-content .logo-bx { width: 100px; position: absolute; top: 160px; left: calc(50% - 50px);}
    footer .main-content .logo-bx img { width: 100%; height: auto;}
    
    footer .main-content .left-bx { width: calc(50% - 50px); float: left;}
    footer .main-content .left-bx .nav-bx { width: 100%; font-size: 0.9em;}
    footer .main-content .left-bx .nav-bx a { color: #000; text-decoration: none;}
    footer .main-content .left-bx .nav-bx a:hover { text-decoration: underline;}
    footer .main-content .left-bx .infor-bx { width: 100%; margin: 70px 0 0 0; font-size: 0.9em;}
    
    footer .main-content .right-bx-mo { display: none;}
    
    footer .main-content .right-bx-pc { width: calc(50% - 50px); text-align: right; float: right;}
    footer .main-content .right-bx-pc .copyright { clear: both; width: 100%; margin: 30px 0 0 0; font-size: 0.8em;}
    
    
    
}

@media screen and (min-width: 768px) and (max-width: 1279px) {

    /******** order_form_icon ********/

    #order-icon { width: 80px; height: 80px; border: 1px #b71c25 solid; border-radius: 100%; color: #fff; font-size: 1.4em; font-weight: 500; line-height: 1.1em; text-align: center; position: fixed; top: 180px; right: 0; overflow: hidden; z-index: 990;}
    #order-icon a { width: 80px; height: 80px; padding: 15px 0 0 0; color: #fff; text-decoration: none; background-color: #b71c25; display: block;}
    #order-icon a:hover, #order-icon a:active { color: #b71c25; background-color: #fff;}
    
    
    /******** header for mo ********/
    
    header { width: 100%; height: 180px; background: url(../images/header_footer_bg.png) #f2d7ad top left repeat-x;}
    
    header .header-main { width: 96%; margin: 0 auto;}
    
    header .header-main .logo-bx { width: 170px; padding: 20px 0 0 0; float: left;}
    
    header .header-main .title-bx { width: 345px; padding: 40px 0 0 0; float: left;}
    
    header .header-main .nav-bx { width: calc(100% - 515px); float: left;}
    header .header-main .nav-bx .social-icon { width: 100%; margin: 30px 0 0 0;} 
    header .header-main .nav-bx .social-icon ul { padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-end; align-items: center;}
    header .header-main .nav-bx .social-icon ul li { padding: 0; margin: 0 0 0 10px;}
    header .header-main .nav-bx .social-icon ul li a { width: 40px; height: 40px; padding: 2px 0 0 0; color: #fff; font-size: 1.4em; text-align: center; border-radius: 100%; background-color: #b71c25; display: block; box-sizing: border-box;}
    header .header-main .nav-bx .social-icon ul li a:active { color: #b71c25; border: 1px #b71c25 solid; background-color: #fff; box-sizing: border-box;}
    header .header-main .nav-bx nav#pc { display: none;}
    header .header-main .nav-bx .nav-icon { width: 100%; margin: 20px 0 0 0; color: #b71c25; font-size: 3em; text-align: right;}
    header .header-main .nav-bx nav#mo { width: 100%; background-color: #f2d7ad; position: absolute; top: 180px; left: 0; z-index: 999; display: none;}
    header .header-main .nav-bx nav#mo ul { width: 100%; padding: 40px; margin: 0; list-style: none; display: block; box-sizing: border-box;}
    header .header-main .nav-bx nav#mo ul li { width: 100%; padding: 0; margin: 15px 0; text-align: center;}
    header .header-main .nav-bx nav#mo ul li a { padding: 3px 5px; color: #b71c25; font-size: 1.4em; font-weight: 500; text-decoration: none; border: 0; box-sizing: border-box; cursor: pointer;}
    header .header-main .nav-bx nav#mo ul li a:active { border: 1px #b71c25 solid; box-sizing: border-box;}
    header .header-main .nav-bx nav#mo ul li a.sel { border: 1px #b71c25 solid; box-sizing: border-box;}
    header .header-main .nav-bx nav#mo ul li ul#popup { width: 100%; padding: 10px 0; margin: 0; display: none;}
    header .header-main .nav-bx nav#mo ul li ul#popup li { width: 100%; padding: 0; margin: 0; text-align: center;}
    header .header-main .nav-bx nav#mo ul li ul#popup li a { width: 100%; padding: 10px 0; color: #b71c25; font-size: 1.2em; text-decoration: none; display: block;}
    header .header-main .nav-bx nav#mo ul li ul#popup li a:active { background-color: rgba(255,255,255,0.6);}
    header .header-main .nav-bx nav#mo ul li ul#popup li a.sel { border: 0;}
    
    
    
    /******** banner ********/
    
    #banner-bx { clear: both; width: 100%;}
    #banner-bx img { width: 100%; height: auto;}
    
    
    
    /******** section#hp-sec1 ********/
    
    section#hp-sec1 { width: 100%; padding: 140px 0; background-image: url('../images/sec_1_bg.jpg');}
    
    section#hp-sec1 .main-content { width: 90%; margin: 0 auto;}
    section#hp-sec1 .main-content .title-bx { width: 280px; margin: 0 auto 40px auto; font-size: 2em; font-weight: 500; text-align: center; border-top: 2px #000 solid; border-bottom: 2px #000 solid;}
    section#hp-sec1 .main-content .text-bx { clear: both; width: 100%; margin: 0 0 40px 0; font-size: 1.1em; line-height: 1.8em; text-align: center;}
    section#hp-sec1 .main-content .pic-bx { width: 45%; margin: 40px 0 0 0; float: left;}
    section#hp-sec1 .main-content .pic-bx img { width: 100%; height: auto;}    
    section#hp-sec1 .main-content .content-bx { width: calc(55% - 80px); float: right;}
    section#hp-sec1 .main-content .content-bx .title-bx { width: 200px; margin: 0 auto 40px auto; font-size: 2em; font-weight: 500; text-align: center; border-top: 2px #000 solid; border-bottom: 2px #000 solid;}
    section#hp-sec1 .main-content .content-bx .text-bx { clear: both; width: 100%; margin: 0 0 40px 0; font-size: 1.1em; line-height: 1.8em;}
    section#hp-sec1 .main-content .content-bx .more-bx { clear: both; width: 120px; text-align: center; float: right;}
    section#hp-sec1 .main-content .content-bx .more-bx a { width: 100%; padding: 5px 0; color: #000; text-decoration: none; border: 1px #000 solid; border-radius: 6px; display: block;}
    section#hp-sec1 .main-content .content-bx .more-bx a:active { color: #fff; background-color: #b71c25;}
    
    
    
    /******** section#hp-sec2 ********/
    
    section#hp-sec2 { width: 100%; padding: 160px 0; background-color: #eb6100;}
    
    section#hp-sec2 .title-bx { width: 140px; margin: 0 auto 80px auto; color: #fff; font-size: 2em; font-weight: 500; text-align: center; border-top: 2px #fff solid; border-bottom: 2px #fff solid;}
    
    section#hp-sec2 .prod-class-bx { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
    section#hp-sec2 .prod-class-bx .class-bx { width: calc(100% / 6 - 10px); height: 15vw; margin: 5px; border: 1px #fff solid; box-sizing: border-box; display: flex; justify-content: center; align-items: center; position: relative; overflow: hidden;}
    section#hp-sec2 .prod-class-bx .class-bx .class-name { width: 100%; height: 100%; color: #000; font-size: 1.6em; display: flex; justify-content: center; align-items: center; background-color: rgba(248,181,81,0.9); position: absolute; top: 0; left: 0;}
    
    
    
    /******** section#hp-sec3 ********/
    
    section#hp-sec3 { width: 100%; padding: 100px 0;}
    
    section#hp-sec3 .main-content { width: 90%; margin: 0 auto;}
    section#hp-sec3 .main-content .map-bx { width: 50%; display: flex; justify-content: center; align-items: center; float: left;}
    section#hp-sec3 .main-content .infor-bx { width: 50%; padding: 0 30px; box-sizing: border-box; float: right;}
    section#hp-sec3 .main-content .infor-bx .title-bx { width: 140px; margin: 0 0 80px 0; color: #000; font-size: 2em; font-weight: 500; text-align: center; border-top: 2px #000 solid; border-bottom: 2px #000 solid;}
    section#hp-sec3 .main-content .infor-bx .text-bx { clear: both; width: 100%; font-size: 1.1em; line-height: 1.8em;}
    
    
    
    /******** section#sec-about ********/
    
    section#sec-about { width: 100%; padding: 100px 0; background-image: url('../images/sec_1_bg.jpg');}
    
    section#sec-about .main-content { width: 90%; margin: 0 auto;}
    section#sec-about .main-content .title-bx { width: 200px; margin: 0 auto 80px auto; color: #b71c25; font-size: 2em; font-weight: 500; text-align: center; border-top: 2px #b71c25 solid; border-bottom: 2px #b71c25 solid;}
    section#sec-about .main-content .text-b-bx { width: 100%; margin: 0 0 60px 0; line-height: 2em; font-weight: 500; text-align: center;}
    section#sec-about .main-content .img-bx { clear: both; width: 300px; margin: 0 40px 0 0; padding: 20px 0 0 0; float: left;}
    section#sec-about .main-content .img-bx img { width: 100%; height: auto;}
    section#sec-about .main-content .text-bx { width: calc(100% - 360px); line-height: 2em; float: left;}
    
    
    
    /******** section#sec-prod-class ********/
    
    section#sec-prod-class { width: 100%; padding: 100px 0; background-image: url('../images/sec_1_bg.jpg');}
    
    section#sec-prod-class .main-content { width: 90%; margin: 0 auto;}
    section#sec-prod-class .main-content .title-bx { width: 140px; margin: 0 auto 80px auto; color: #b71c25; font-size: 2em; font-weight: 500; text-align: center; border-top: 2px #b71c25 solid; border-bottom: 2px #b71c25 solid;}
    section#sec-prod-class .main-content .calss-nav-bar { clear: both; width: 100%; margin: 0 0 80px 0;}
    section#sec-prod-class .main-content .calss-nav-bar ul { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; align-items: center;}
    section#sec-prod-class .main-content .calss-nav-bar ul li { width: 50px; padding: 0; margin: 0 10px; text-align: center;}
    section#sec-prod-class .main-content .calss-nav-bar ul li a { width: 100%; padding: 10px 0; color: #b71c25; font-size: 1.1em; border: 1px #b71c25 solid; text-decoration: none; display: block;}
    section#sec-prod-class .main-content .calss-nav-bar ul li a:active { color: #fff; background-color: #b71c25;}
    section#sec-prod-class .main-content .calss-nav-bar ul li a.sel { color: #fff; background-color: #b71c25;}
    section#sec-prod-class .main-content .text-bx { width: 100%; margin: 0 0 80px 0; color: #eb6100; font-size: 1.1em; text-align: center;}
    section#sec-prod-class .main-content .prod-list-bx { width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
    section#sec-prod-class .main-content .prod-list-bx .list-bx { width: calc(100% / 3); margin: 0 0 30px 0;}
    section#sec-prod-class .main-content .prod-list-bx .list-bx .prod-pic { width: 100%; text-align: center;}
    section#sec-prod-class .main-content .prod-list-bx .list-bx .prod-pic img { width: 90%; height: auto;}
    section#sec-prod-class .main-content .prod-list-bx .list-bx .prod-text { width: 90%; margin: 0 auto;}
    section#sec-prod-class .main-content .prod-list-bx .list-bx .prod-text .name { width: 100%; text-align: center;}
    section#sec-prod-class .main-content .prod-list-bx .list-bx .prod-text .price { width: 100%; color: #eb6877; font-weight: 500; text-align: center;}


    .fanbox-showinfor { max-width: 900px; display: none; background-color: #e9dac7;}
    .fanbox-showinfor img { width: 100%; height: auto;}
    .fanbox-showinfor .infor-table { clear: both; width: 100%; margin: 20px 0 0 0; font-size: 1.2em; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
    .fanbox-showinfor .infor-table .caption { width: 40%; padding: 5px 15px; box-sizing: border-box;}
    .fanbox-showinfor .infor-table .column { width: 10%; padding: 5px 15px; text-align: right; box-sizing: border-box;}
    .fanbox-showinfor .infor-table .total { clear: both; width: 100%; padding: 5px 15px; text-align: center; border-top: 1px #ccc solid; box-sizing: border-box;}    
    
    
    /******** section#sec-order-form ********/
    
    section#sec-prod-class .main-content .order-form-content { clear: both; width: 100%;}
    
    section#sec-prod-class .main-content .order-form-content .form-exp { width: 70%; margin: 30px auto; line-height: 1.6em;}
    section#sec-prod-class .main-content .order-form-content .form-exp .exp-title { width: 100%; margin: 0 0 20px 0; font-size: 1.2em; font-weight: 600;}
    section#sec-prod-class .main-content .order-form-content .form-exp ul.num { padding: 0 0 0 20px; margin: 0; list-style: decimal; display: block;}
    section#sec-prod-class .main-content .order-form-content .form-exp ul.num li { padding: 0; margin: 0;}
    
    section#sec-prod-class .main-content .order-form-content .form-column-bx { clear: both; width: 100%;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .caption-lt-bx { width: 50%; border-top: 2px #000 solid; border-bottom: 1px #000 solid; border-right: 1px #000 solid; box-sizing: border-box; background-color: #e8983f; float: left;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .caption-rt-bx { width: 50%; border-top: 2px #000 solid; border-bottom: 1px #000 solid; box-sizing: border-box; background-color: #e8983f; float: left;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .caption-lt-bx .caption-pic, section#sec-prod-class .main-content .order-form-content .form-column-bx .caption-rt-bx .caption-pic { width: 15%; padding: 10px 5px; color: #fff; font-weight: 600; text-align: center; box-sizing: border-box; float: left;}    
    section#sec-prod-class .main-content .order-form-content .form-column-bx .caption-lt-bx .caption-1, section#sec-prod-class .main-content .order-form-content .form-column-bx .caption-rt-bx .caption-1 { width: 30%; padding: 10px 5px; color: #fff; font-weight: 600; text-align: left; box-sizing: border-box; float: left;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .caption-lt-bx .caption-2, section#sec-prod-class .main-content .order-form-content .form-column-bx .caption-rt-bx .caption-2 { width: 20%; padding: 10px 5px; color: #fff; font-weight: 600; text-align: center; box-sizing: border-box; float: left;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .caption-lt-bx .caption-3, section#sec-prod-class .main-content .order-form-content .form-column-bx .caption-rt-bx .caption-3 { width: 15%; padding: 10px 5px; color: #fff; font-weight: 600; text-align: center; box-sizing: border-box; float: left;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .caption-lt-bx .caption-4, section#sec-prod-class .main-content .order-form-content .form-column-bx .caption-rt-bx .caption-4 { width: 20%; padding: 10px 5px; color: #fff; font-weight: 600; text-align: center; box-sizing: border-box; float: left;}

    section#sec-prod-class .main-content .order-form-content .form-column-bx .class-column-bx { clear: both; width: 100%; padding: 10px; color: #eb6877; font-weight: 600; text-align: center; border-top: 1px #000 solid; border-bottom: 2px #000 solid; background-color: #fff; box-sizing: border-box;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .column-lt-bx { width: 50%; background-color: #efefef; border-bottom: 1px #000 solid; border-right: 1px #000 solid; box-sizing: border-box; display: flex; align-items: center; float: left;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .column-rt-bx { width: 50%; background-color: #efefef; border-bottom: 1px #000 solid; box-sizing: border-box; display: flex; align-items: center; float: left;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .column-lt-bx .column-pic, section#sec-prod-class .main-content .order-form-content .form-column-bx .column-rt-bx .column-pic { width: 15%; padding: 17px 5px 10px 5px; box-sizing: border-box; float: left;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .column-lt-bx .column-pic img, section#sec-prod-class .main-content .order-form-content .form-column-bx .column-rt-bx .column-pic img { width: 100%; height: auto;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .column-lt-bx .column-1, section#sec-prod-class .main-content .order-form-content .form-column-bx .column-rt-bx .column-1 { width: 30%; padding: 17px 5px 10px 5px; box-sizing: border-box; float: left;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .column-lt-bx .column-2, section#sec-prod-class .main-content .order-form-content .form-column-bx .column-rt-bx .column-2 { width: 20%; padding: 17px 5px 10px 5px; color: #eb6877; text-align: center; box-sizing: border-box; float: left;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .column-lt-bx .column-2 font.small, section#sec-prod-class .main-content .order-form-content .form-column-bx .column-rt-bx .column-2 font.small { font-size: 0.8em;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .column-lt-bx .column-3, section#sec-prod-class .main-content .order-form-content .form-column-bx .column-rt-bx .column-3 { width: 15%; padding: 10px 5px; box-sizing: border-box; float: left;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .column-lt-bx .column-3 input[type=text], section#sec-prod-class .main-content .order-form-content .form-column-bx .column-rt-bx .column-3 input[type=text] { width: 100%; padding: 5px; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; text-align: center; border: 1px #ccc solid; box-sizing: border-box;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .column-lt-bx .column-4, section#sec-prod-class .main-content .order-form-content .form-column-bx .column-rt-bx .column-4 { width: 20%; padding: 10px 5px; box-sizing: border-box; float: left;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .column-lt-bx .column-4 input[type=text], section#sec-prod-class .main-content .order-form-content .form-column-bx .column-rt-bx .column-4 input[type=text] { width: 100%; padding: 5px; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; text-align: center; border: 1px #ccc solid; box-sizing: border-box;}

    section#sec-prod-class .main-content .order-form-content .form-column-bx .total-column-bx { clear: both; width: 100%; padding: 5px; color: #eb6877; font-weight: 600; text-align: center; border-top: 1px #000 solid; border-bottom: 1px #000 solid; background-color: #fff; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .total-column-bx .column-1 { width: 80%; padding: 17px 5px 10px 5px; box-sizing: border-box; font-weight: 600; text-align: right;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .total-column-bx .column-2 { width: 20%; padding: 10px 5px; box-sizing: border-box;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .total-column-bx .column-2 input[type=text] { width: 100%; padding: 5px; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; text-align: center; border: 1px #ccc solid; box-sizing: border-box;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .total-column-bx .column-3 { width: 50px; padding: 10px 5px; text-align: left; box-sizing: border-box; font-weight: 600;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .total-column-bx .column-4 { width: calc(100% - 50px); padding: 10px 5px; box-sizing: border-box;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .total-column-bx .column-4 textarea { width: 100%; height: 150px; padding: 5px; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 1px #ccc solid; box-sizing: border-box;}

    section#sec-prod-class .main-content .order-form-content .form-column-bx .order-infor-form-caption { clear: both; width: 100%; padding: 10px 5px; color: #fff; font-weight: 600; text-align: center; border-top: 2px #000 solid; border-bottom: 2px #000 solid; border-right: 1px #000 solid; box-sizing: border-box; background-color: #e8983f;}

    section#sec-prod-class .main-content .order-form-content .form-column-bx .order-infor-form-bx { clear: both; width: 100%; padding: 10px 0; background-color: #fff; border-bottom: 2px #000 solid;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .order-infor-form { width: 100%; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .order-infor-form .infor-caption { width: 80px; padding: 5px; font-weight: 600; box-sizing: border-box;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .order-infor-form .infor-column-1 { width: calc(50% - 80px); padding: 5px; box-sizing: border-box;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .order-infor-form .infor-column-1 input[type=text].style1 { width: 95%; padding: 10px 5px; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; box-sizing: border-box; border: 1px #ccc solid;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .order-infor-form .infor-column-1 select { width: 95%; padding: 10px 5px; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; box-sizing: border-box; border: 1px #ccc solid;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .order-infor-form .infor-column-1 input[type=text].style2 { width: calc(95% - 100px); padding: 10px 5px; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; box-sizing: border-box; border: 1px #ccc solid;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .order-infor-form .infor-column-1 input[type=text].style3 { width: 60px; padding: 10px 5px; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; box-sizing: border-box; border: 1px #ccc solid;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .order-infor-form .infor-column-2 { width: 50%;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .order-infor-form .infor-column-3 { width: calc(100% - 80px); padding: 5px; box-sizing: border-box;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .order-infor-form .infor-column-3 select { width: 160px; padding: 10px 5px; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; box-sizing: border-box; border: 1px #ccc solid;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .order-infor-form .infor-column-3 input[type=text].style2 { width: calc(95% - 144px); padding: 10px 5px; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; box-sizing: border-box; border: 1px #ccc solid;}

    section#sec-prod-class .main-content .order-form-content .form-column-bx .check-bx { clear: both; width: 100%; margin: 40px 0 0 0; display: flex; justify-content: center;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .check-bx input[type=submit], section#sec-prod-class .main-content .order-form-content .form-column-bx .check-bx input[type=button], section#sec-prod-class .main-content .order-form-content .form-column-bx .check-bx input[type=reset] { padding: 10px 20px; margin: 0 10px; color: #fff; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; font-weight: 500; border: 0; border-radius: 8px; background-color: #e8983f;}
    
    
    
    /******** section#sec-qanda ********/
    
    section#sec-qanda { width: 100%; padding: 100px 0; background-image: url('../images/sec_1_bg.jpg');}
    
    section#sec-qanda .main-content { width: 80%; margin: 0 auto;}
    section#sec-qanda .main-content .title-bx { width: 140px; margin: 0 auto 80px auto; color: #b71c25; font-size: 2em; font-weight: 500; text-align: center; border-top: 2px #b71c25 solid; border-bottom: 2px #b71c25 solid;}
    section#sec-qanda .main-content .qanda-bx { width: 100%; margin: 0 0 20px 0;}
    section#sec-qanda .main-content .qanda-bx .q-sub { width: 100%; padding: 5px; font-size: 1.2em; color: #000; font-weight: 500; box-sizing: border-box; cursor: pointer;}
    section#sec-qanda .main-content .qanda-bx .q-sub:active { background-color: #eee;}
    section#sec-qanda .main-content .qanda-bx .a-content { width: 100%; padding: 20px 30px; margin: 15px 0; line-height: 2em; border: 1px #ccc solid; border-radius: 10px; box-sizing: border-box;}
    section#sec-qanda .main-content .qanda-bx .a-content ul.num { padding: 0 0 0 20px; margin: 0; list-style: decimal; display: block;}
    section#sec-qanda .main-content .qanda-bx .a-content ul.num li { padding: 0; margin: 0;}
    
    
    
    /******** section#sec-contact ********/
    
    section#sec-contact { width: 100%; padding: 100px 0; background-image: url('../images/sec_1_bg.jpg');}
    
    section#sec-contact .main-content { width: 90%; margin: 0 auto;}
    section#sec-contact .main-content .title-bx { width: 140px; margin: 0 auto 80px auto; color: #b71c25; font-size: 2em; font-weight: 500; text-align: center; border-top: 2px #b71c25 solid; border-bottom: 2px #b71c25 solid;}
    section#sec-contact .main-content .map-pic { clear: both; width: 35%; float: left;}
    section#sec-contact .main-content .map-pic img { max-width: 100%; height: auto;}
    section#sec-contact .main-content .infor-bx { width: calc(65% - 80px); margin: 0 0 0 30px; line-height: 2em; float: left;}
    section#sec-contact .main-content .infor-bx ul.num { padding: 0 0 0 24px; margin: 0; list-style: decimal; display: block;}
    section#sec-contact .main-content .infor-bx ul.num li { padding: 0; margin: 0;}
    
    
    
    /******** section#sec-sitemap ********/
    
    section#sec-sitemap { width: 100%; padding: 100px 0; background-image: url('../images/sec_1_bg.jpg');}
    
    section#sec-sitemap .main-content { width: 90%; margin: 0 auto;}
    section#sec-sitemap .main-content .title-bx { width: 140px; margin: 0 auto 80px auto; color: #b71c25; font-size: 2em; font-weight: 500; text-align: center; border-top: 2px #b71c25 solid; border-bottom: 2px #b71c25 solid;}
    section#sec-sitemap .main-content ul.sitemap { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; align-items: stretch;}
    section#sec-sitemap .main-content ul.sitemap li { padding: 0; margin: 20px; color: #000; font-size: 1.4em; font-weight: 500;}
    section#sec-sitemap .main-content ul.sitemap li a { color: #000; text-decoration: none;}
    section#sec-sitemap .main-content ul.sitemap li a:active { text-decoration: underline;}
    section#sec-sitemap .main-content ul.sitemap li ul.class { padding: 0; margin: 5px 0; list-style: none; display: block;}
    section#sec-sitemap .main-content ul.sitemap li ul.class li { padding: 0; margin: 5px 0; color: #000; font-size: 0.8em; font-weight: normal;}
    section#sec-sitemap .main-content ul.sitemap li ul.class li a { color: #000; text-decoration: none;}
    section#sec-sitemap .main-content ul.sitemap li ul.class li a:active { text-decoration: underline;}
    
    
    
    /******** footer ********/
    
    footer { width: 100%; padding: 80px 0; background: url(../images/header_footer_bg.png) #f2d7ad top left repeat-x; position: relative;}
    
    footer .main-content { width: 90%; margin: 0 auto;}
    
    footer .main-content .logo-bx { width: 100%; margin: 0 0 30px 0; text-align: center;}
    footer .main-content .logo-bx img {}
    
    footer .main-content .left-bx { width: 100%; margin: 0 0 40px 0;}
    footer .main-content .left-bx .nav-bx { width: 100%; font-size: 0.9em; text-align: center;}
    footer .main-content .left-bx .nav-bx a { color: #000; text-decoration: none;}
    footer .main-content .left-bx .nav-bx a:active { text-decoration: underline;}
    footer .main-content .left-bx .infor-bx { width: 100%; margin: 30px 0 0 0; font-size: 0.9em; text-align: center;}
    
    footer .main-content .right-bx-mo { display: none;}
    
    footer .main-content .right-bx-pc { width: 100%; text-align: center;}
    footer .main-content .right-bx-pc .copyright { clear: both; width: 100%; margin: 30px 0 0 0; font-size: 0.8em;}
    
    
    
}

@media screen and (max-width: 767px) {

    /******** order_form_icon ********/

    #order-icon { width: 80px; height: 80px; border: 1px #b71c25 solid; border-radius: 100%; color: #fff; font-size: 1.4em; font-weight: 500; line-height: 1.1em; text-align: center; position: fixed; top: 100px; right: 0; overflow: hidden; z-index: 990;}
    #order-icon a { width: 80px; height: 80px; padding: 15px 0 0 0; color: #fff; text-decoration: none; background-color: #b71c25; display: block;}
    #order-icon a:hover, #order-icon a:active { color: #b71c25; background-color: #fff;}
    
    
    /******** header for mo ********/
    
    header { width: 100%; height: 200px; background: url(../images/header_footer_bg.png) #f2d7ad top left repeat-x;}
    
    header .header-main { width: 96%; margin: 0 auto;}
    
    header .header-main .logo-bx { width: 30%; padding: 20px 0 0 0; text-align: right; float: left;}
    header .header-main .logo-bx img { width: 100px; height: auto;}
    
    header .header-main .title-bx { width: 70%; padding: 30px 0 0 0; text-align: left; float: right;}
    header .header-main .title-bx img { width: 250px; height: auto;}
    
    header .header-main .nav-bx { clear: both; width: 100%; margin: 40px 0 0 0;}
    header .header-main .nav-bx .social-icon { width: 50%; margin: 17px 0 0 0; float: right;} 
    header .header-main .nav-bx .social-icon ul { padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-start; align-items: center;}
    header .header-main .nav-bx .social-icon ul li { padding: 0; margin: 0 0 0 20px;}
    header .header-main .nav-bx .social-icon ul li a { width: 40px; height: 40px; padding: 2px 0 0 0; color: #fff; font-size: 1.4em; text-align: center; border-radius: 100%; background-color: #b71c25; display: block; box-sizing: border-box;}
    header .header-main .nav-bx .social-icon ul li a:active { color: #b71c25; border: 1px #b71c25 solid; background-color: #fff; box-sizing: border-box;}
    header .header-main .nav-bx nav#pc { display: none;}
    header .header-main .nav-bx .nav-icon { width: 50%; color: #b71c25; font-size: 3em; text-align: right; float: left;}
    header .header-main .nav-bx nav#mo { width: 100%; background-color: #f2d7ad; position: absolute; top: 200px; left: 0; z-index: 999; display: none;}
    header .header-main .nav-bx nav#mo ul { width: 100%; padding: 40px; margin: 0; list-style: none; display: block; box-sizing: border-box;}
    header .header-main .nav-bx nav#mo ul li { width: 100%; padding: 0; margin: 15px 0; text-align: center;}
    header .header-main .nav-bx nav#mo ul li a { padding: 3px 5px; color: #b71c25; font-size: 1.4em; font-weight: 500; text-decoration: none; border: 0; box-sizing: border-box; cursor: pointer;}
    header .header-main .nav-bx nav#mo ul li a:active { border: 1px #b71c25 solid; box-sizing: border-box;}
    header .header-main .nav-bx nav#mo ul li a.sel { border: 1px #b71c25 solid; box-sizing: border-box;}
    header .header-main .nav-bx nav#mo ul li ul#popup { width: 100%; padding: 10px 0; margin: 0; display: none;}
    header .header-main .nav-bx nav#mo ul li ul#popup li { width: 100%; padding: 0; margin: 0; text-align: center;}
    header .header-main .nav-bx nav#mo ul li ul#popup li a { width: 100%; padding: 10px 0; color: #b71c25; font-size: 1.2em; text-decoration: none; display: block;}
    header .header-main .nav-bx nav#mo ul li ul#popup li a:active { background-color: rgba(255,255,255,0.6);}
    header .header-main .nav-bx nav#mo ul li ul#popup li a.sel { border: 0;}
    
    
    
    /******** banner ********/
    
    #banner-bx { clear: both; width: 100%;}
    #banner-bx img { width: 100%; height: auto;}
    
    
    
    /******** section#hp-sec1 ********/
    
    section#hp-sec1 { width: 100%; padding: 100px 0; background-image: url('../images/sec_1_bg.jpg');}
    
    section#hp-sec1 .main-content { width: 90%; margin: 0 auto;} 
    section#hp-sec1 .main-content .title-bx { width: 280px; margin: 0 auto 40px auto; font-size: 2em; font-weight: 500; text-align: center; border-top: 2px #000 solid; border-bottom: 2px #000 solid;}
    section#hp-sec1 .main-content .text-bx { clear: both; width: 100%; margin: 0 0 40px 0; font-size: 1.1em; line-height: 1.8em; text-align: center;}   
    section#hp-sec1 .main-content .pic-bx { width: 100%; text-align: center;}
    section#hp-sec1 .main-content .pic-bx img { width: 90%; height: auto;}    
    section#hp-sec1 .main-content .content-bx { width: 100%; margin: 0 0 60px 0;}
    section#hp-sec1 .main-content .content-bx .title-bx { width: 200px; margin: 0 auto 40px auto; font-size: 2em; font-weight: 500; text-align: center; border-top: 2px #000 solid; border-bottom: 2px #000 solid;}
    section#hp-sec1 .main-content .content-bx .text-bx { clear: both; width: 100%; margin: 0 0 40px 0; font-size: 1.1em; line-height: 1.8em;}
    section#hp-sec1 .main-content .content-bx .more-bx { clear: both; width: 120px; text-align: center; float: right;}
    section#hp-sec1 .main-content .content-bx .more-bx a { width: 100%; padding: 5px 0; color: #000; text-decoration: none; border: 1px #000 solid; border-radius: 6px; display: block;}
    section#hp-sec1 .main-content .content-bx .more-bx a:active { color: #fff; background-color: #b71c25;}
    
    
    
    /******** section#hp-sec2 ********/
    
    section#hp-sec2 { width: 100%; padding: 100px 0; background-color: #eb6100;}
    
    section#hp-sec2 .title-bx { width: 140px; margin: 0 auto 80px auto; color: #fff; font-size: 2em; font-weight: 500; text-align: center; border-top: 2px #fff solid; border-bottom: 2px #fff solid;}
    
    section#hp-sec2 .prod-class-bx { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
    section#hp-sec2 .prod-class-bx .class-bx { width: calc(100% / 3 - 10px); height: 22vw; margin: 5px; border: 1px #fff solid; box-sizing: border-box; display: flex; justify-content: center; align-items: center; position: relative; overflow: hidden;}
    section#hp-sec2 .prod-class-bx .class-bx .class-name { width: 100%; height: 100%; color: #000; font-size: 1.6em; display: flex; justify-content: center; align-items: center; background-color: rgba(248,181,81,0.9); position: absolute; top: 0; left: 0;}
    
    
    
    /******** section#hp-sec3 ********/
    
    section#hp-sec3 { width: 100%; padding: 100px 0;}
    
    section#hp-sec3 .main-content { width: 90%; margin: 0 auto;}
    section#hp-sec3 .main-content .map-bx { width: 100%; text-align: center;}
    section#hp-sec3 .main-content .map-bx img { max-width: 100%; height: auto;}
    section#hp-sec3 .main-content .infor-bx { width: 100%; margin: 0 0 40px 0; box-sizing: border-box; float: left;}
    section#hp-sec3 .main-content .infor-bx .title-bx { width: 140px; margin: 0 auto 40px auto; color: #000; font-size: 2em; font-weight: 500; text-align: center; border-top: 2px #000 solid; border-bottom: 2px #000 solid;}
    section#hp-sec3 .main-content .infor-bx .text-bx { clear: both; width: 100%; font-size: 1.1em; line-height: 1.8em;}
    
    
    
    /******** section#sec-about ********/
    
    section#sec-about { width: 100%; padding: 100px 0; background-image: url('../images/sec_1_bg.jpg');}
    
    section#sec-about .main-content { width: 90%; margin: 0 auto;}
    section#sec-about .main-content .title-bx { width: 200px; margin: 0 auto 80px auto; color: #b71c25; font-size: 2em; font-weight: 500; text-align: center; border-top: 2px #b71c25 solid; border-bottom: 2px #b71c25 solid;}
    section#sec-about .main-content .text-b-bx { width: 100%; margin: 0 0 60px 0; line-height: 2em; font-weight: 500; text-align: center;}
    section#sec-about .main-content .img-bx { width: 100%; margin: 0 0 30px 0; text-align: center;}
    section#sec-about .main-content .img-bx img { width: 90%; height: auto;}
    section#sec-about .main-content .text-bx { width: 100%; line-height: 2em;}
    
    
    
    /******** section#sec-prod-class ********/
    
    section#sec-prod-class { width: 100%; padding: 100px 0; background-image: url('../images/sec_1_bg.jpg');}
    
    section#sec-prod-class .main-content { width: 90%; margin: 0 auto;}
    section#sec-prod-class .main-content .title-bx { width: 140px; margin: 0 auto 80px auto; color: #b71c25; font-size: 2em; font-weight: 500; text-align: center; border-top: 2px #b71c25 solid; border-bottom: 2px #b71c25 solid;}
    section#sec-prod-class .main-content .calss-nav-bar { clear: both; width: 100%; margin: 0 0 80px 0;}
    section#sec-prod-class .main-content .calss-nav-bar ul { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; align-items: center;}
    section#sec-prod-class .main-content .calss-nav-bar ul li { width: 30px; padding: 0; margin: 0 5px; text-align: center;}
    section#sec-prod-class .main-content .calss-nav-bar ul li a { width: 100%; padding: 5px 0; color: #b71c25; font-size: 1.1em; border: 1px #b71c25 solid; text-decoration: none; display: block;}
    section#sec-prod-class .main-content .calss-nav-bar ul li a:active { color: #fff; background-color: #b71c25;}
    section#sec-prod-class .main-content .calss-nav-bar ul li a.sel { color: #fff; background-color: #b71c25;}
    section#sec-prod-class .main-content .text-bx { width: 100%; margin: 0 0 80px 0; color: #eb6100; font-size: 1.1em; text-align: center;}
    section#sec-prod-class .main-content .prod-list-bx { width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
    section#sec-prod-class .main-content .prod-list-bx .list-bx { width: calc(100% / 2); margin: 0 0 30px 0;}
    section#sec-prod-class .main-content .prod-list-bx .list-bx .prod-pic { width: 100%; text-align: center;}
    section#sec-prod-class .main-content .prod-list-bx .list-bx .prod-pic img { width: 90%; height: auto;}
    section#sec-prod-class .main-content .prod-list-bx .list-bx .prod-text { width: 90%; margin: 0 auto;}
    section#sec-prod-class .main-content .prod-list-bx .list-bx .prod-text .name { width: 100%; text-align: center;}
    section#sec-prod-class .main-content .prod-list-bx .list-bx .prod-text .price { width: 100%; color: #eb6877; font-weight: 500; text-align: center;}


    .fanbox-showinfor { max-width: 900px; display: none; background-color: #e9dac7;}
    .fanbox-showinfor img { width: 100%; height: auto;}
    .fanbox-showinfor .infor-table { clear: both; width: 100%; margin: 20px 0 0 0; font-size: 1.2em; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
    .fanbox-showinfor .infor-table .caption { width: 80%; padding: 5px 15px; box-sizing: border-box;}
    .fanbox-showinfor .infor-table .column { width: 20%; padding: 5px 15px; text-align: right; box-sizing: border-box;}
    .fanbox-showinfor .infor-table .total { clear: both; width: 100%; padding: 5px 15px; text-align: center; border-top: 1px #ccc solid; box-sizing: border-box;}    
    
    
    /******** section#sec-order-form ********/
    
    section#sec-prod-class .main-content .order-form-content { clear: both; width: 100%;}
    
    section#sec-prod-class .main-content .order-form-content .form-exp { width: 100%; margin: 30px auto; line-height: 1.6em;}
    section#sec-prod-class .main-content .order-form-content .form-exp .exp-title { width: 100%; margin: 0 0 20px 0; font-size: 1.2em; font-weight: 600;}
    section#sec-prod-class .main-content .order-form-content .form-exp ul.num { padding: 0 0 0 20px; margin: 0; list-style: decimal; display: block;}
    section#sec-prod-class .main-content .order-form-content .form-exp ul.num li { padding: 0; margin: 0;}
    
    section#sec-prod-class .main-content .order-form-content .form-column-bx { clear: both; width: 100%;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .caption-lt-bx { width: 100%; border-top: 2px #000 solid; border-bottom: 1px #000 solid; border-right: 1px #000 solid; box-sizing: border-box; background-color: #e8983f;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .caption-rt-bx { display: none;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .caption-lt-bx .caption-pic, section#sec-prod-class .main-content .order-form-content .form-column-bx .caption-rt-bx .caption-pic { width: 15%; padding: 10px 5px; color: #fff; font-weight: 600; text-align: center; box-sizing: border-box; float: left;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .caption-lt-bx .caption-1, section#sec-prod-class .main-content .order-form-content .form-column-bx .caption-rt-bx .caption-1 { width: 30%; padding: 10px 5px; color: #fff; font-weight: 600; text-align: left; box-sizing: border-box; float: left;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .caption-lt-bx .caption-2, section#sec-prod-class .main-content .order-form-content .form-column-bx .caption-rt-bx .caption-2 { width: 20%; padding: 10px 5px; color: #fff; font-weight: 600; text-align: center; box-sizing: border-box; float: left;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .caption-lt-bx .caption-3, section#sec-prod-class .main-content .order-form-content .form-column-bx .caption-rt-bx .caption-3 { width: 15%; padding: 10px 5px; color: #fff; font-weight: 600; text-align: center; box-sizing: border-box; float: left;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .caption-lt-bx .caption-4, section#sec-prod-class .main-content .order-form-content .form-column-bx .caption-rt-bx .caption-4 { width: 20%; padding: 10px 5px; color: #fff; font-weight: 600; text-align: center; box-sizing: border-box; float: left;}

    section#sec-prod-class .main-content .order-form-content .form-column-bx .class-column-bx { clear: both; width: 100%; padding: 10px; color: #eb6877; font-weight: 600; text-align: center; border-top: 1px #000 solid; border-bottom: 2px #000 solid; background-color: #fff; box-sizing: border-box;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .column-lt-bx { width: 100%; background-color: #efefef; border-bottom: 1px #000 solid; box-sizing: border-box; display: flex; align-items: center;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .column-rt-bx { width: 100%; background-color: #efefef; border-bottom: 1px #000 solid; box-sizing: border-box; display: flex; align-items: center;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .column-lt-bx .column-pic, section#sec-prod-class .main-content .order-form-content .form-column-bx .column-rt-bx .column-pic { width: 15%; padding: 17px 5px 10px 5px; box-sizing: border-box; float: left;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .column-lt-bx .column-pic img, section#sec-prod-class .main-content .order-form-content .form-column-bx .column-rt-bx .column-pic img { width: 100%; height: auto;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .column-lt-bx .column-1, section#sec-prod-class .main-content .order-form-content .form-column-bx .column-rt-bx .column-1 { width: 30%; padding: 17px 5px 10px 5px; box-sizing: border-box; float: left;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .column-lt-bx .column-2, section#sec-prod-class .main-content .order-form-content .form-column-bx .column-rt-bx .column-2 { width: 20%; padding: 17px 5px 10px 5px; color: #eb6877; text-align: center; box-sizing: border-box; float: left;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .column-lt-bx .column-2 font.small, section#sec-prod-class .main-content .order-form-content .form-column-bx .column-rt-bx .column-2 font.small { font-size: 0.8em;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .column-lt-bx .column-3, section#sec-prod-class .main-content .order-form-content .form-column-bx .column-rt-bx .column-3 { width: 15%; padding: 10px 5px; box-sizing: border-box; float: left;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .column-lt-bx .column-3 input[type=text], section#sec-prod-class .main-content .order-form-content .form-column-bx .column-rt-bx .column-3 input[type=text] { width: 100%; padding: 5px; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; text-align: center; border: 1px #ccc solid; box-sizing: border-box;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .column-lt-bx .column-4, section#sec-prod-class .main-content .order-form-content .form-column-bx .column-rt-bx .column-4 { width: 20%; padding: 10px 5px; box-sizing: border-box; float: left;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .column-lt-bx .column-4 input[type=text], section#sec-prod-class .main-content .order-form-content .form-column-bx .column-rt-bx .column-4 input[type=text] { width: 100%; padding: 5px; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; text-align: center; border: 1px #ccc solid; box-sizing: border-box;}

    section#sec-prod-class .main-content .order-form-content .form-column-bx .total-column-bx { clear: both; width: 100%; padding: 5px; color: #eb6877; font-weight: 600; text-align: center; border-top: 1px #000 solid; border-bottom: 1px #000 solid; background-color: #fff; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .total-column-bx .column-1 { width: 80%; padding: 17px 5px 10px 5px; box-sizing: border-box; font-weight: 600; text-align: right;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .total-column-bx .column-2 { width: 20%; padding: 10px 5px; box-sizing: border-box;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .total-column-bx .column-2 input[type=text] { width: 100%; padding: 5px; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; text-align: center; border: 1px #ccc solid; box-sizing: border-box;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .total-column-bx .column-3 { width: 50px; padding: 10px 5px; text-align: left; box-sizing: border-box; font-weight: 600;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .total-column-bx .column-4 { width: calc(100% - 50px); padding: 10px 5px; box-sizing: border-box;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .total-column-bx .column-4 textarea { width: 100%; height: 150px; padding: 5px; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 1px #ccc solid; box-sizing: border-box;}

    section#sec-prod-class .main-content .order-form-content .form-column-bx .order-infor-form-caption { clear: both; width: 100%; padding: 10px 5px; color: #fff; font-weight: 600; text-align: center; border-top: 2px #000 solid; border-bottom: 2px #000 solid; border-right: 1px #000 solid; box-sizing: border-box; background-color: #e8983f;}

    section#sec-prod-class .main-content .order-form-content .form-column-bx .order-infor-form-bx { clear: both; width: 100%; padding: 10px 0; background-color: #fff; border-bottom: 2px #000 solid;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .order-infor-form { width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .order-infor-form .infor-caption { width: 80px; padding: 5px; font-weight: 600; box-sizing: border-box;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .order-infor-form .infor-column-1 { width: calc(100% - 80px); padding: 5px; box-sizing: border-box;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .order-infor-form .infor-column-1 input[type=text].style1 { width: 100%; padding: 10px 5px; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; box-sizing: border-box; border: 1px #ccc solid;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .order-infor-form .infor-column-1 select { width: 100%; padding: 10px 5px; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; box-sizing: border-box; border: 1px #ccc solid;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .order-infor-form .infor-column-1 input[type=text].style2 { width: calc(95% - 90px); padding: 10px 5px; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; box-sizing: border-box; border: 1px #ccc solid;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .order-infor-form .infor-column-1 input[type=text].style3 { width: 60px; padding: 10px 5px; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; box-sizing: border-box; border: 1px #ccc solid;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .order-infor-form .infor-column-2 { clear: both; width: calc(100% - 90px); padding: 0 0 0 90px}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .order-infor-form .infor-column-3 { width: calc(100% - 80px); padding: 5px; box-sizing: border-box;}
    .infor-column-3 select { width: 100%; padding: 10px 5px; margin: 0 0 10px 0; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; box-sizing: border-box; border: 1px #ccc solid;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .order-infor-form .infor-column-3 input[type=text].style2 { width: 100%; padding: 10px 5px; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; box-sizing: border-box; border: 1px #ccc solid;}

    section#sec-prod-class .main-content .order-form-content .form-column-bx .check-bx { clear: both; width: 100%; margin: 40px 0 0 0; display: flex; justify-content: center;}
    section#sec-prod-class .main-content .order-form-content .form-column-bx .check-bx input[type=submit], section#sec-prod-class .main-content .order-form-content .form-column-bx .check-bx input[type=button], section#sec-prod-class .main-content .order-form-content .form-column-bx .check-bx input[type=reset] { padding: 10px 20px; margin: 0 10px; color: #fff; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; font-weight: 500; border: 0; border-radius: 8px; background-color: #e8983f;}
    
    
    
    /******** section#sec-qanda ********/
    
    section#sec-qanda { width: 100%; padding: 100px 0; background-image: url('../images/sec_1_bg.jpg');}
    
    section#sec-qanda .main-content { width: 90%; margin: 0 auto;}
    section#sec-qanda .main-content .title-bx { width: 140px; margin: 0 auto 80px auto; color: #b71c25; font-size: 2em; font-weight: 500; text-align: center; border-top: 2px #b71c25 solid; border-bottom: 2px #b71c25 solid;}
    section#sec-qanda .main-content .qanda-bx { width: 100%; margin: 0 0 20px 0;}
    section#sec-qanda .main-content .qanda-bx .q-sub { width: 100%; padding: 5px; font-size: 1.2em; color: #000; font-weight: 500; box-sizing: border-box; cursor: pointer;}
    section#sec-qanda .main-content .qanda-bx .q-sub:active { background-color: #eee;}
    section#sec-qanda .main-content .qanda-bx .a-content { width: 100%; padding: 20px 30px; margin: 15px 0; line-height: 2em; border: 1px #ccc solid; border-radius: 10px; box-sizing: border-box;}
    section#sec-qanda .main-content .qanda-bx .a-content ul.num { padding: 0 0 0 20px; margin: 0; list-style: decimal; display: block;}
    section#sec-qanda .main-content .qanda-bx .a-content ul.num li { padding: 0; margin: 0;}
    
    
    
    /******** section#sec-contact ********/
    
    section#sec-contact { width: 100%; padding: 100px 0; background-image: url('../images/sec_1_bg.jpg');}
    
    section#sec-contact .main-content { width: 90%; margin: 0 auto;}
    section#sec-contact .main-content .title-bx { width: 140px; margin: 0 auto 80px auto; color: #b71c25; font-size: 2em; font-weight: 500; text-align: center; border-top: 2px #b71c25 solid; border-bottom: 2px #b71c25 solid;}
    section#sec-contact .main-content .map-pic { clear: both; width: 100%; text-align: center;}
    section#sec-contact .main-content .map-pic img { max-width: 100%; height: auto;}
    section#sec-contact .main-content .infor-bx { width: 100%; margin: 30px 0 0 0; line-height: 2em;}
    section#sec-contact .main-content .infor-bx ul.num { padding: 0 0 0 24px; margin: 0; list-style: decimal; display: block;}
    section#sec-contact .main-content .infor-bx ul.num li { padding: 0; margin: 0;}
    
    
    
    /******** section#sec-sitemap ********/
    
    section#sec-sitemap { width: 100%; padding: 100px 0; background-image: url('../images/sec_1_bg.jpg');}
    
    section#sec-sitemap .main-content { width: 90%; margin: 0 auto;}
    section#sec-sitemap .main-content .title-bx { width: 140px; margin: 0 auto 80px auto; color: #b71c25; font-size: 2em; font-weight: 500; text-align: center; border-top: 2px #b71c25 solid; border-bottom: 2px #b71c25 solid;}
    section#sec-sitemap .main-content ul.sitemap { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
    section#sec-sitemap .main-content ul.sitemap li { padding: 0; margin: 20px; color: #000; font-size: 1.4em; font-weight: 500;}
    section#sec-sitemap .main-content ul.sitemap li a { color: #000; text-decoration: none;}
    section#sec-sitemap .main-content ul.sitemap li a:active { text-decoration: underline;}
    section#sec-sitemap .main-content ul.sitemap li ul.class { padding: 0; margin: 5px 0; list-style: none; display: block;}
    section#sec-sitemap .main-content ul.sitemap li ul.class li { padding: 0; margin: 5px 0; color: #000; font-size: 0.8em; font-weight: normal;}
    section#sec-sitemap .main-content ul.sitemap li ul.class li a { color: #000; text-decoration: none;}
    section#sec-sitemap .main-content ul.sitemap li ul.class li a:active { text-decoration: underline;}
    
    
    
    /******** footer ********/
    
    footer { width: 100%; padding: 80px 0; background: url(../images/header_footer_bg.png) #f2d7ad top left repeat-x; position: relative;}
    
    footer .main-content { width: 90%; margin: 0 auto;}
    
    footer .main-content .logo-bx { width: 100%; margin: 0 0 30px 0; text-align: center;}
    footer .main-content .logo-bx img {}
    
    footer .main-content .left-bx { width: 100%; margin: 0 0 40px 0;}
    footer .main-content .left-bx .nav-bx { width: 100%; font-size: 0.9em; text-align: center;}
    footer .main-content .left-bx .nav-bx a { color: #000; text-decoration: none;}
    footer .main-content .left-bx .nav-bx a:active { text-decoration: underline;}
    footer .main-content .left-bx .infor-bx { width: 100%; margin: 30px 0 0 0; font-size: 0.9em; text-align: center;}
    
    footer .main-content .right-bx-pc { display: none;}
    
    footer .main-content .right-bx-mo { width: 100%; text-align: center;}
    footer .main-content .right-bx-mo .copyright { clear: both; width: 100%; margin: 30px 0 0 0; font-size: 0.8em;}
    
    
    
}