@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: #e60012;}
font.green { color: #009944;}


/******** page number ********/
.page-bx { width: 100%; margin: 60px 0 0 0;}
.page-bx ul#pagenum { padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; flex-wrap: wrap;}
.page-bx ul#pagenum li { padding: 0; margin: 5px 3px;}
.page-bx ul#pagenum li a { padding: 2px 10px; color: #666666; font-size: 0.8em; text-align: center; text-decoration: none; border: 1px #cccccc solid; border-radius: 4px; background-color: #ffffff; display: block;}
.page-bx ul#pagenum li a:hover { background-color: #eeeeee;}
.page-bx ul#pagenum li a.sel { color: #ffffff; background-color: #999999;}


/******** right content title ********/
.right-column-content .sub-title { width: 100%; height: auto; padding: 0 0 15px 0; color: #715314; font-size: 1.6em; border-bottom: 1px #715314 solid; display: flex; justify-content: flex-start; align-items: baseline; flex-wrap: wrap;}
.right-column-content .sub-title .big { margin: 0 10px 0 0;}
.right-column-content .sub-title .small { font-size: 0.6em; line-height: 1.2em; float: left;}


.winner-video-box { clear: both; width: 100%;}
.winner-video-box .video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; width:100%; height: 0px; overflow: hidden;}
.winner-video-box .video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%;} 



@media screen and (min-width: 1360px) {
    
    
    /******** side-bar-icon ********/
    
    #side-bar-box { width: 70px; position: fixed; top: 130px; right: 5px; z-index: 999;}
    #side-bar-box img { width: 70px; height: auto; cursor: pointer;}
    
    #side-bar-box .line-bx { display: none;}
    #side-bar-box .line-bx .content { width: 200px; padding: 5px 10px; color: #22ac38; font-size: 0.8em; text-align: center; border: 2px #22ac38 solid; border-radius: 6px; background-color: #ffffff; box-sizing: border-box; float: left;}
    #side-bar-box .line-bx .content img { width: 112px; height: auto; cursor: inherit;}
    #side-bar-box .line-bx .arrow { border-color: transparent transparent transparent #22ac38; border-style: solid solid solid solid; border-width: 10px; height: 0px; width: 0px; margin: 20px 0 0 0; float: left;}
    
    #side-bar-box .qrcode-bx { display: none;}
    #side-bar-box .qrcode-bx .content { width: 300px; padding: 5px 10px; color: #000; font-size: 0.8em; text-align: center; border: 2px #000 solid; border-radius: 6px; background-color: #ffffff; box-sizing: border-box; float: left; display: flex; justify-content: center; align-items: baseline;}
    #side-bar-box .qrcode-bx .content img { width: 110px; height: auto; margin: 0 10px;}
    #side-bar-box .qrcode-bx .arrow { border-color: transparent transparent transparent #000; border-style: solid solid solid solid; border-width: 10px; height: 0px; width: 0px; margin: 20px 0 0 0; float: left;}
    
    
    
    /******** header ********/
    
    header { width: 100%; height: auto;}
    
    header .hd-top-box { width: 1240px; height: 80px; margin: 0 auto; position: relative;}
    header .hd-top-box .logo-box { width: 50%; height: 80px; display: flex; align-items: center; float: left; box-sizing: border-box;}
    header .hd-top-box .logo-box img.logo { width: auto; height: 40px; margin: 0 20px 0 0;}
    header .hd-top-box .logo-box img.title { }
    /*header .hd-top-box .email-box { width: 200px; padding: 5px 0; margin: 20px 0 0 0; box-sizing: border-box; color: #cd9623; text-align: center; border: 1px #cd9623 solid; border-radius: 6px; display: flex; justify-content: center; align-items: center; float: right;}
    header .hd-top-box .email-box font.email { font-size: 0.7em;}*/
    
    header nav#mobile ul .top-social-bar-mo { display: none;}
    
    header .hd-top-box .top-social-bar { width: 200px; font-size: 2em; text-align: right; position: absolute; top: 30px; right: 0; z-index: 9999;}
    header .hd-top-box .top-social-bar a { color: #cd9623; text-decoration: none; cursor: pointer;}
    header .hd-top-box .top-social-bar a:hover { color: #8a8000;}
    header .hd-top-box .line-bx { width: 200px; display: none; position: absolute; top: 30px; right: -50px; z-index: 999;}
    header .hd-top-box .line-bx .content { width: 200px; padding: 5px 10px; color: #22ac38; font-size: 0.4em; text-align: center; border: 2px #22ac38 solid; border-radius: 6px; background-color: #ffffff; box-sizing: border-box; float: left;}
    header .hd-top-box .line-bx .content img { width: 112px; height: auto; cursor: inherit;}
    header .hd-top-box .line-bx .arrow { border-color: transparent transparent #22ac38 transparent; border-style: solid solid solid solid; border-width: 10px; height: 0px; width: 0px; margin: 0 auto;}
    
    header nav#mobile { display: none;}
    
    header nav#pc { width: 100%; height: auto; background-color: #cd9623;}
    header nav#pc ul { padding: 0; margin: 0; list-style: none; display: flex; justify-content: center;}
    header nav#pc ul li { padding: 8px 20px; margin: 0; color: #ffffff; font-size: 1.1em; position: relative; cursor: pointer;}
    header nav#pc ul li:hover, li.sel { background-color: rgba(255,255,255,0.2);}
    header nav#pc ul li a { color: #ffffff; text-decoration: none;}
    header nav#pc ul li #popup { width: 180px; position: absolute; top: 30px; left: calc(100% / 2 - 90px); z-index: 999;}
    header nav#pc ul li #popup .arrow { border-color: transparent transparent #cd9623 transparent; border-style: solid solid solid solid; border-width: 10px; height: 0px; width: 0px; margin: 0 auto;}
    header nav#pc ul li #popup ul.popup { padding: 30px 0; margin: 0; text-align: center; background-color: #cd9623; border-radius: 8px; list-style: none; display: block;}
    header nav#pc ul li #popup ul.popup li { padding: 0; margin: 0; color: #ffffff; font-size: 1em;}
    header nav#pc ul li #popup ul.popup li a { width: 100%; padding: 8px 0; display: block;}
    header nav#pc ul li #popup ul.popup li a:hover { background-color: rgba(255,255,255,0.2);}
    
    
    
    /******** banner ********/
    
    .banner-box { width: 100%; height: auto; position: relative;}    
    .banner-box .qrcode-bx { width: 30%; position: absolute; top: 20%; left: 35%;}
    .banner-box .qrcode-bx .qrcode { width: calc(50% - 40px); margin: 0 20px; float: left;}
    .banner-box .qrcode-bx .qrcode img { width: 100%; height: auto;}
    
    .banner-box-mo { display: none;}
    
    
    /******** section #box-1 ********/
    
    section { width: 1240px; padding: 80px 0; margin: 0 auto;}
    
    .section-title-box { width: 100%; margin: 0 0 20px 0;}
    .section-title-box .text { color: #cd9623; font-size: 1.6em; font-weight: 500; line-height: 0; text-align: center;}
    .section-title-box .underline { width: 40px; border-bottom: 2px #8a8000 solid; margin: 0 auto;}
    
    .section-marquee { width: 100%; padding: 10px 40px; margin: 0 0 40px 0; color: #1d2088; /*color: #a6937c;*/ letter-spacing: 0.1em; background-color: #fff7ea; border: 1px #a6937c solid; border-radius: 6px; box-sizing: border-box;}
    
    .section-column-x2 { width: 50%; float: left;}
    .section-column-x2 .section-column-x2-title { width: 90%; color: #e60012; font-weight: 500; margin: 0 auto 20px auto;}
    .section-column-x2 .form-box-yellow { width: 90%; font-size: 0.9em; border-top: 1px #cec21b solid; border-left: 1px #cec21b solid; border-right: 1px #cec21b solid; margin: 0 auto; display: flex; align-self: stretch;}
    .section-column-x2 .form-box-yellow:last-child { border-bottom: 1px #cec21b solid;}
    .section-column-x2 .form-box-yellow .caption-yellow { clear:both; width: 50%; padding: 10px 20px; color: #534e11; background-color: #fefbd4; border-right: 1px #cec21b solid; box-sizing: border-box;}
    .section-column-x2 .form-box-yellow .column-yellow { width: 50%; padding: 10px 20px; color: #313131; background-color: #ffffff; box-sizing: border-box;}
    .section-column-x2 .form-box-yellow .column-yellow font.biger, .form-box-blue .column-blue font.biger { font-size: 1.2em;}
    .section-column-x2 .form-box-blue { width: 90%; font-size: 0.9em; border-top: 1px #77b7d3 solid; border-left: 1px #77b7d3 solid; border-right: 1px #77b7d3 solid; margin: 0 auto; display: flex; align-self: stretch;}
    .section-column-x2 .form-box-blue:nth-child(5) { border-bottom: 1px #77b7d3 solid;}
    .section-column-x2 .form-box-blue .caption-blue { clear:both; width: 50%; padding: 10px 30px; color: #17314b; background-color: #e1f1f8; border-right: 1px #77b7d3 solid; box-sizing: border-box;}
    .section-column-x2 .form-box-blue .column-blue { width: 50%; padding: 10px 30px; color: #313131; background-color: #ffffff; box-sizing: border-box;}
    
    .section-column-x2 .section-infor-box { clear: both; width: 90%; padding: 20px 30px; margin: 40px auto 0 auto; color: #313131; font-size: 0.9em; border: 1px #cccccc solid; box-sizing: border-box;}
    
    
    
    /******** section #box-2 ********/
    
    section#box-2 { width: 100%; background: url(../images/section_2_bg.jpg) no-repeat; background-size: cover;}
    
    section#box-2 .section-box { width: 1200px; margin: 0 auto; display: flex; justify-content: flex-start; flex-wrap: wrap;}
    section#box-2 .section-box .zone-bx { width: 240px; height: 120px; margin: 20px 30px; border-radius: 8px; background-color: #eeeeee; position: relative; overflow: hidden;}
    section#box-2 .section-box .zone-bx .text { color: #ffffff; font-size: 1.2em; font-weight: 500; z-index: 10; position: absolute; bottom: 20px; right: 20px;}
    section#box-2 .section-box .zone-bx img { width: 100%; height: auto; position: absolute; top: 0; left: 0; z-index: 9;}
    section#box-2 .section-box .zone-bx .black-mask { width: 240px; height: 120px; background-color: rgba(0,0,0,0); position: absolute; top: 0; left: 0; z-index: 11;}
    section#box-2 .section-box .zone-bx .black-mask:hover { background-color: rgba(0,0,0,0.4);}

    
    
    /******** section #box-3 ********/
    
    section#box-3 { width: 100%; padding: 120px 0; background: url(../images/section_3_bg.jpg) repeat;}
    
    section#box-3 .section-box { width: 1000px; margin: 0 auto; display: flex; justify-content: center; flex-wrap: wrap;}
    section#box-3 .section-box .item-bx { width: 245px; height: 160px; margin: 40px; border-right: 5px #936b18 solid; border-bottom: 5px #936b18 solid; background-color: #dcab43; border-radius: 6px;}
    section#box-3 .section-box a { text-decoration: none;}
    section#box-3 .section-box .item-bx:hover { background-color: #be9439;}
    section#box-3 .section-box .item-bx .pic { width: 100%; height: 85px; padding: 20px 0 10px 0; text-align: center; box-sizing:}
    section#box-3 .section-box .item-bx .item { width: 100%; color: #e60012; font-size: 1.8em; line-height: 1em; text-align: center;}
    
    
    
    section#mobile, section#infor-1-bx-mo, section#infor-2-bx-mo { display: none;}
    
    
    
    /******** section #box-4 ********/
    
    section#box-4 { width: 100%; padding: 180px 0; background: url(../images/section_4_bg.jpg) bottom no-repeat; background-size: cover;}
    
    section#box-4 .section-box { width: 1240px; margin: 0 auto; display: flex; justify-content: space-between;}
    section#box-4 .section-box .service-bx { width: 290px; height: 300px; background-color: #ffffff; -moz-box-shadow:4px 4px 12px -4px rgba(20%,20%,40%,0.5); -webkit-box-shadow:4px 4px 12px -4px rgba(20%,20%,40%,0.5); box-shadow:4px 4px 12px -4px rgba(20%,20%,40%,0.5); position: relative;}    
    section#box-4 .section-box .service-bx .title { width: 100%; height: 60px; padding: 12px 10px 0 0; color: #ffffff; font-size: 1.4em; text-align: right; background-color: #cd9623; box-sizing: border-box;}
    section#box-4 .section-box .service-bx .text { width: 100%; padding: 50px 30px; color: #8e8e8e; line-height: 1.8em; box-sizing: border-box;}
    section#box-4 .section-box .service-bx .icon-1 { width: 101px; height: 120px; position: absolute; top: -40px; left: 25px;}
    section#box-4 .section-box .service-bx .icon-2 { width: 130px; height: 120px; position: absolute; top: -40px; left: 8px;}
    section#box-4 .section-box .service-bx .icon-3 { width: 120px; height: 120px; position: absolute; top: -40px; left: 15px;}
    section#box-4 .section-box .service-bx .icon-4 { width: 133px; height: 120px; position: absolute; top: -40px; left: 8px;}
    
    
    
    /******** section #box-5 ********/
    
    .section-title-s5-box { width: 100%; margin: 0 0 20px 0;}
    .section-title-s5-box .text { color: #cd9623; font-size: 1.6em; font-weight: 500; line-height: 0; text-align: center;}
    .section-title-s5-box .underline { width: 40px; border-bottom: 2px #8a8000 solid; margin: 0 auto;}
    .section-title-s5-box .icon-bx { display: none;}
    
    .section-sample-box { width: 100%; margin: 0 0 20px 0; display: flex; justify-content: space-between;}
    .section-sample-box .column-x2-bx { width: 610px;}
    .section-sample-box .column-x2-bx .title { width: 100%; padding: 5px 10px; color: #313131; font-weight: 500; background-color: #f1d599; box-sizing: border-box;}
    .section-sample-box .column-x2-bx .content-bx { width: 100%; height: calc(100% - 50px); padding: 20px; margin: 15px 0 0 0; background-color: #fbf6ec; box-sizing: border-box;}
    .section-sample-box .column-x2-bx .content-bx hr { width: 100%; margin: 10px 0; border: 1px #e9d09a solid;}
    .section-sample-box .column-x2-bx .content-bx .list-bx { width: 100%; display: flex; justify-content: flex-start; align-items: stretch;}
    .section-sample-box .column-x2-bx .content-bx .list-bx .list-num { width: 30px; padding: 7px 0; color: #ffffff; text-align: center; vertical-align: middle; background-color: #e60012;}
    .section-sample-box .column-x2-bx .content-bx .list-bx .list-text { width: calc(100% - 30px); padding: 7px 18px; color: #434343; font-size: 0.9em; box-sizing: border-box;}
    .section-sample-box .column-x2-bx .content-bx .list-bx .list-text .bigger { color: #313131; font-size: 1.3em;}
    
    .section-conclusion-box { width: 100%; margin: 0 0 20px 0;}
    .section-conclusion-box .title { width: 100%; padding: 5px 10px; margin: 0 0 15px 0; color: #313131; font-weight: 500; background-color: #f1d599; box-sizing: border-box;}
    .section-conclusion-box .content-bx { width: 100%; padding: 20px; margin: 15px 0 0 0; background-color: #fbf6ec; box-sizing: border-box;}
    .section-conclusion-box .list-bx { width: 100%; margin: 5px 0 0 0; font-size: 0.9em; display: flex; justify-content: flex-start; align-items: stretch;}
    .section-conclusion-box .list-bx .list-num { width: 30px; padding: 10px 0; color: #ffffff; text-align: center; background-color: #f39800;}
    .section-conclusion-box .list-bx .list-text { width: calc(100% - 30px); padding: 10px 20px; color: #434343; background-color: #fbf6ec; box-sizing: border-box;}
    
    
    
    /******** section #box-6 ********/
    
    section#box-6 { width: 70%; padding: 40px; margin: 0 auto 80px auto; border: 1px #ccc solid; border-radius: 20px; box-sizing: border-box;}
    
    section#box-6 ul#news-tabs { width: 100%; padding: 0; margin: 0 0 20px 0; list-style: none; display: flex; justify-content: center; align-items: center;}
    section#box-6 ul#news-tabs li { padding: 0; margin: 5px; font-size: 0.9em; line-height: 1em; text-align: center;}
    section#box-6 ul#news-tabs li a { width: 100px; padding: 8px 0; color: #666666; text-decoration: none; background-color: #eeeeee; border-radius: 4px; display: block;}
    section#box-6 ul#news-tabs li a:hover { color: #000;}
    section#box-6 ul#news-tabs li a.sel { color: #ffffff; background-color: #f39800;}    
    section#box-6 #news-panel { font-size: 0.9em;}
    section#box-6 #news-panel .news-source { width: 100%; color: #999; text-align: right; margin: 0 0 10px 0;}
    section#box-6 #news-panel ul { padding: 0; margin: 0; list-style: none; display: block;}
    section#box-6 #news-panel ul li { padding: 10px; margin: 0; background-color: #eee; box-sizing: border-box;}
    section#box-6 #news-panel ul li:nth-child(2n) { background-color: #fff;}
    section#box-6 #news-panel ul li a { color: #666666; text-decoration: none;}
    section#box-6 #news-panel ul li a:hover { text-decoration: underline;}
    
    
    
    /******** section #box-7 ********/
    
    section#box-7 { width: 1240px; padding: 80px 0; margin: 0 auto;}
    
    section#box-7 ul.news-list-bx { width: 100%; padding: 0; margin: 60px 0 0 0; list-style: none; display: block;}
    section#box-7 ul.news-list-bx li { width: 100%; padding: 0; margin: 0 0 2px 0; color: #666666; display: flex; justify-content: flex-start; align-items: stretch; border-bottom: 1px #ccc dashed; box-sizing: border-box;}
    section#box-7 ul.news-list-bx li .date { width: 120px; padding: 10px; background-color: #efefef; box-sizing: border-box;}
    section#box-7 ul.news-list-bx li .title-content { width: calc(100% - 120px); padding: 10px; background-color: #fbf6ec; box-sizing: border-box;}
    section#box-7 ul.news-list-bx li .title-content a { color: #715314; text-decoration: none;}
    section#box-7 ul.news-list-bx li .title-content a:hover { text-decoration: underline;}
    
    section#box-7 .news-more-bx { width: 90%; margin: 20px 0 0 0; font-size: 0.9em; text-align: right;}
    section#box-7 .news-more-bx a { color: #666666; text-decoration: none;}
    section#box-7 .news-more-bx a:hover { text-decoration: underline;}
    
    .news-date { clear: both; width: 100%; margin: 20px 0 0 0; color: #666; font-size: 0.6em; font-weight: normal; text-align: right;}
    
    .go-back { clear: both; width: 100%; margin: 80px 0 0 0; text-align: center;}
    .go-back input[type=button] { padding: 10px 20px; color: #ffffff; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 6px; background-color: #886418; cursor: pointer;}
    
    
    
    /******** page banner ********/
    
    .page-banner-bx { width: 100%; height: auto; position: relative;}
    .page-banner-bx img { width: 100%; height: auto;}
    .page-banner-bx .sub-title-bx { width: 1240px; height: auto; position: absolute; bottom: 0; left: calc(100% / 2 - 620px);}
    .page-banner-bx .sub-title-bx .title-bx { width: 300px; height: 60px; padding: 15px 0 0 0; color: #715314; font-size: 2.2em; font-weight: 500; text-align: center; border-radius: 20px 20px 0 0; background-color: #ffffff;}
    
    
    
    /******** left column ********/
    
    .left-column-nav { width: 300px; float: left;}
    .left-column-nav ul { padding: 0; margin: 0; list-style: none; display: block;}
    .left-column-nav ul li { padding: 0; margin: 0;}
    .left-column-nav ul li .sub-nav-box { width: 100%; height: 60px; margin: 0 0 15px 0; font-size: 1.2em; border: 5px #cd9623 solid; background-color: #ffffff; border-radius: 8px; box-sizing: border-box;}
    .left-column-nav ul li .sub-nav-box a { width: 100%; height: 50px; padding: 0 15px; line-height: 1em; text-decoration: none; display: flex; justify-content: space-between; align-items: center; box-sizing: border-box;}
    .left-column-nav ul li .sub-nav-box a.link:hover { background-color: #f7f0e2;}
    .left-column-nav ul li .sub-nav-box a font.text { color: #cd9623;}
    .left-column-nav ul li .sub-nav-box a font.icon { color: #f2deb3; font-size: 1.6em; font-weight: 600;}
    .left-column-nav ul li .sub-nav-box a font.icon-mo { display: none;}
    .left-column-nav ul li.mo .down-nav-box { width: 90%; margin: 0 auto; font-size: 1em; border-bottom: 1px #d6d6d6 solid; box-sizing: border-box;}
    .left-column-nav ul li.mo .down-nav-box a { width: 100%; padding: 7px 10px; text-decoration: none; display: flex; justify-content: space-between; align-items: center; box-sizing: border-box;}
    .left-column-nav ul li.mo .down-nav-box a:hover { background-color: #efefef;}
    .left-column-nav ul li.mo .down-nav-box a font.text { color: #313131;}
    .left-column-nav ul li.mo .down-nav-box a font.icon { color: #d3d3d3; font-size: 1.2em; font-weight: 600;}
    
    
    
    /******** company_about ********/
    
    .right-column-content { width: 900px; float: right;}
    
    .right-column-content .content-box { width: 100%; padding: 60px 0 20px 0; color: #666666; line-height: 1.8em;}
    .right-column-content .content-box .pic-box { width: 100%;}
    .right-column-content .content-box .pic-box img { width: auto; height: 280px; margin: 30px 50px 0 0; float: left;}
    
    
    
    /******** company_service ********/
    
    .right-column-content .content-box .serv-item-box { width: 80%; padding: 10px 30px; margin: 0 auto 25px auto; color: #5a4210; background-color: #c6aa6e; border-radius: 10px; border-bottom: 5px #5a4210 solid; border-right: 5px #5a4210 solid; box-sizing: border-box; display: flex; align-items: center;}
    .right-column-content .content-box .serv-item-box font.icon { font-size: 2em;}
    .right-column-content .content-box .serv-item-box font.text { font-size: 1.2em;}
    
    
    
    /******** news reports video ********/
    
    .video-list-bx { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
    .video-list-bx .video-bx { width: calc(100% / 2 - 30px); margin: 0 15px 30px 15px;}
    .video-list-bx .video-bx .video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; width:100%; height: 0px; overflow: hidden;}
    .video-list-bx .video-bx .video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}    
    .video-list-bx .video-bx .video-title { width: 100%; margin: 10px 0 0 0; color: #666666; font-size: 0.9em; line-height: 1em;}
    
    .right-column-content ul.news-list-bx { width: 100%; padding: 0; margin: 60px 0 0 0; list-style: none; display: block;}
    .right-column-content ul.news-list-bx li { width: 100%; padding: 0; margin: 0 0 2px 0; color: #666666; display: flex; justify-content: flex-start; align-items: stretch; border-bottom: 1px #ccc dashed; box-sizing: border-box;}
    .right-column-content ul.news-list-bx li .date { width: 120px; padding: 10px; background-color: #efefef; box-sizing: border-box;}
    .right-column-content ul.news-list-bx li .title-content { width: calc(100% - 120px); padding: 10px; background-color: #fbf6ec; box-sizing: border-box;}
    .right-column-content ul.news-list-bx li .title-content a { color: #715314; text-decoration: none;}
    .right-column-content ul.news-list-bx li .title-content a:hover { text-decoration: underline;}
    
    
    
    /******** company_shop & spot ********/
    
    .right-column-content .content-box .title-item-bx { width: 100%; padding: 5px 30px; color: #cd9623; font-size: 1.6em; background-color: #f8efde; box-sizing: border-box;}
    .right-column-content .content-box .content-item-bx { width: 100%; padding: 20px 30px; box-sizing: border-box;}
    .right-column-content .content-box .content-item-bx img { width: auto; height: 270px; margin: 10px 20px 10px 0; float: left;}
    .right-column-content .content-box .content-item-bx .tran-pic-bx { width: 50%; margin: 15px 0; font-weight: 600; text-align: center; float: left;}
    .right-column-content .content-box .content-item-bx .tran-pic-bx img { width: 80%; height: auto;}
    .right-column-content .content-box .content-item-bx .tran-pic-bx .text { clear: both; width: 80%;}
    
    .right-column-content .content-box .section-box { width: 100%; margin: 0 auto; display: flex; justify-content: flex-start; flex-wrap: wrap;}
    .right-column-content .content-box .section-box .zone-bx { width: 240px; height: 120px; margin: 20px 30px; border-radius: 8px; background-color: #eeeeee; position: relative; overflow: hidden;}
    .right-column-content .content-box .section-box .zone-bx .text { color: #ffffff; font-size: 1.2em; font-weight: 500; z-index: 10; position: absolute; bottom: 20px; right: 20px;}
    .right-column-content .content-box .section-box .zone-bx img { width: 100%; height: auto; position: absolute; top: 0; left: 0; z-index: 9;}
    .right-column-content .content-box .section-box .zone-bx .black-mask { width: 240px; height: 120px; background-color: rgba(0,0,0,0); position: absolute; top: 0; left: 0; z-index: 11;}
    .right-column-content .content-box .section-box .zone-bx .black-mask:hover { background-color: rgba(0,0,0,0.4);}
    
    
    
    /******** golden Q&A ********/
    
    .right-column-content .content-box dl#panel { width: 100%;}
    .right-column-content .content-box dl#panel dt { width: 100%; padding: 10px 20px; margin: 15px 0; color: #5a4210; background-color: #ccae70; border-radius: 8px; box-sizing: border-box; cursor: pointer;}
    .right-column-content .content-box dl#panel dt .q-bx { width: 40px; font-size: 1.6em; float: left;}
    .right-column-content .content-box dl#panel dt .text-bx { width: calc(100% - 80px); font-weight: 500; float: left;}
    .right-column-content .content-box dl#panel dt .minus-bx, .plus-bx { width: 40px; color: #ffffff; font-size: 1.6em; text-align: right; float: right;}
    .right-column-content .content-box dl#panel dd { padding: 20px 60px 20px 20px; box-sizing: border-box;}
    
    
    
    /******** count online ********/
    
    .left-column-nav .count-nav-box { width: 80%; padding: 15px 0; margin: 0 auto; color: #454545; font-size: 0.9em; border-bottom: 1px #cccccc solid; box-sizing: border-box;}
    .left-column-nav .count-1-nav-box { width: 80%; padding: 15px 0; margin: 0 auto; color: #454545; font-size: 0.9em; box-sizing: border-box;}
    .left-column-nav .count-nav-box .column-1-bx, .count-1-nav-box .column-1-bx { clear: both; width: 30%; text-align: right; float: left;}
    .left-column-nav .count-nav-box .column-2-bx, .count-1-nav-box .column-2-bx { width: 20%; text-align: center; float: left;}
    .left-column-nav .count-nav-box .column-3-bx, .count-1-nav-box .column-3-bx { width: 50%; float: left;}
    .left-column-nav .count-1-nav-box .def-title-bx { width: 100%; padding: 5px 0; margin: 0 0 10px 0; color: #454545; text-align: center; border: 1px #454545 solid; border-radius: 10px; background-color: #fbf1dc; box-sizing: border-box;}
    .left-column-nav .count-1-nav-box .def-caption-1-bx { clear: both; width: 45%; margin: 0 0 5px 0; float: left;}
    .left-column-nav .count-1-nav-box .def-column-1-bx { width: 55%; margin: 0 0 5px 0; float: left;}
    .left-column-nav .count-1-nav-box .def-caption-2-bx { clear: both; width: 70%; margin: 0 0 5px 0; float: left;}
    .left-column-nav .count-1-nav-box .def-column-2-bx { width: 30%; margin: 0 0 5px 0; float: left;}
    
    .right-column-content .content-box .count-sub-title-1-bx { clear: both; width: 100%; padding: 3px 10px; color: #5a4210; font-weight: 500; background-color: #ead4a6; box-sizing: border-box;}
    
    .right-column-content .content-box .count-content-bx { width: 100%; padding: 25px 0; border-bottom: 1px #d6d6d6 solid; box-sizing: border-box;}
    .right-column-content .content-box .count-content-bx .column-x4-bx { width: 25%; text-align: center; line-height: 2.4em; float: left;}
    .right-column-content .content-box .count-content-bx .column-x4-bx input[type=text] { width: 120px; padding: 5px 10px; color: #545454; font:0.9em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; text-align: center; background-color: #ffffff; border: 1px #999999 solid; border-radius: 6px;}
    .right-column-content .content-box .column-x2-left-bx { clear: both; width: 75%; padding: 20px 0; font-size: 0.9em; line-height: 3em; text-align: center; float: left;}
    .right-column-content .content-box .column-x2-right-bx { width: 25%; padding: 20px 0; text-align: center; float: left;}
    .right-column-content .content-box .column-x2-right-bx input[type=button] { width: 140px; padding: 10px; color: #ffffff; font:0.9em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 6px; background-color: #e60012; cursor: pointer;}
    
    .right-column-content .content-box .count-sub-title-2-bx { clear: both; width: 100%; padding: 3px 10px; color: #ffffff; font-weight: 500; background-color: #daae53; box-sizing: border-box;}
    
    .right-column-content .content-box .count-sub-title-3-bx { clear: both; width: 100%; padding: 3px 10px; color: #ffffff; font-weight: 500; background-color: #b1811d; box-sizing: border-box;}
    
    .right-column-content .content-box .count-notice-bx { clear: both; width: 100%; padding: 30px 0; color: #5a4210; font-size: 0.8em;}
    .right-column-content .content-box .standard-form { width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
    .right-column-content .content-box .standard-form .count-caption-1-bx { width: 40%; padding: 10px 10px 10px 100px; color: #5a4210; font-weight: 500; background-color: #f7e6c3; box-sizing: border-box;}
    .right-column-content .content-box .standard-form .count-caption-2-bx { width: 60%; padding: 10px; color: #5a4210; font-weight: 500; background-color: #f7e6c3; box-sizing: border-box;}
    .right-column-content .content-box .standard-form .count-column-1-bx, .count-column-1-1-bx { width: 40%; padding: 10px 10px 10px 100px; color: #313131; font-weight: 500; border-bottom: 1px #f7e6c3 solid; box-sizing: border-box;}
    .right-column-content .content-box .standard-form .count-column-2-bx, .count-column-2-1-bx { width: 60%; padding: 10px; color: #313131; border-bottom: 1px #f7e6c3 solid; box-sizing: border-box;}
    .right-column-content .content-box .standard-form .count-column-3-bx { width: 100%; padding: 10px 10px 10px 100px; color: #999999; border-bottom: 1px #f7e6c3 solid; box-sizing: border-box;}
    .right-column-content .content-box .standard-form .count-column-2-1-bx ul { padding: 0 0 0 35px; margin: 0; list-style-type: cjk-ideographic; display: block;}
    .right-column-content .content-box .standard-form .count-column-2-1-bx ul li { padding: 0; margin: 0;}
    
    .right-column-content .content-box .contact-caption-bx { clear: both; width: 220px; padding: 10px 0 0 0; color: #313131; font-weight: 500; text-align: right; float: left;}
    .right-column-content .content-box .contact-column-bx { width: calc(100% - 220px); padding: 0 0 0 30px; margin: 0 0 10px 0; float: left; box-sizing: border-box;}
    .right-column-content .content-box .contact-column-bx input[type=text].contact { width: 400px; padding: 10px 20px; margin: 0 0 10px 0; color: #313131; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 1px #cccccc solid; border-radius: 6px; background-color: #ffffff;}
    .right-column-content .content-box .contact-column-bx select.contact { width: 440px; padding: 10px 20px; margin: 0 0 10px 0; color: #313131; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 1px #cccccc solid; border-radius: 6px; background-color: #ffffff;}
    .right-column-content .content-box .contact-column-bx .notice { clear: both; width: 100%; color: #999999; font-size: 0.9em; line-height: 1.4em;}
    .right-column-content .content-box .contact-notice-bx { clear: both; width: 100%; padding: 15px 80px; margin: 30px 0 0 0; color: #666666; font-size: 0.9em; line-height: 1.6em; background-color: #eeeeee; box-sizing: border-box;}
    .right-column-content .content-box .contact-button-bx { clear: both; width: 100%; margin: 30px 0 0 0; text-align: center;}
    .right-column-content .content-box .contact-button-bx input[type=button] { padding: 10px 40px; color: #ffffff; font:0.9em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 6px; background-color: #e60012; cursor: pointer;}
    
    
        
    /******** price inquiry ********/
    
    .right-column-content .content-box .price-form-caption-bx { width: 100%; font-size: 0.9em; text-align: center;}
    .right-column-content .content-box .price-form-caption-bx .caption-1-bx { width: 26%; height: 60px; padding: 15px 0 0 0; font-weight: 500; box-sizing: border-box; background-color: #f3e3c1; float: left;}
    .right-column-content .content-box .price-form-caption-bx .caption-2-bx { width: 37%; height: 60px; float: left;}
    .right-column-content .content-box .price-form-caption-bx .caption-2-bx .caption-2-1 { width: 100%; height: 30px; color: #ffffff; background-color: #cd9623;}
    .right-column-content .content-box .price-form-caption-bx .caption-2-bx .caption-2-2 { width: 25%; height: 30px; color: #313131; background-color: #e0c17f; float: left;}
    .right-column-content .content-box .price-form-caption-bx .caption-2-bx .caption-2-3 { width: 25%; height: 30px; color: #313131; background-color: #f6ecd6; float: left;}
    .right-column-content .content-box .price-form-column-bx { width: 100%; font-size: 0.9em; text-align: center; border-bottom: 1px #cccccc solid;}
    .right-column-content .content-box .price-form-column-bx .column-1-bx { width: 26%; padding: 10px 0; font-weight: 500; float: left;}
    .right-column-content .content-box .price-form-column-bx .column-2-bx { width: 37%; float: left;}
    .right-column-content .content-box .price-form-column-bx .column-2-bx .column-2-1 { width: 25%; padding: 10px 0; float: left;}
    
    
    
    /******** history price inquiry ********/
    
    .right-column-content .content-box .price-search-bx { width: 100%; padding: 40px 15px; margin: 0 0 80px 0; color: #5a4210; text-align: center; background-color: #faf4e9; box-sizing: border-box; display: flex; justify-content: center; align-items: center;}
    .right-column-content .content-box .price-search-bx select { width: 160px; padding: 6px 10px; margin: 0 10px 0 0; color: #5a4210; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 1px #cccccc solid; border-radius: 6px; background-color: #ffffff;}
    .right-column-content .content-box .price-search-bx input[type=button] { padding: 6px 20px; color: #ffffff; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 1px #cccccc solid; border-radius: 6px; background-color: #886418; cursor: pointer;}
    
    
    
    /******** international inquiry ********/
    
    .right-column-content .content-box .inter-inqu-input { width: 100%; text-align: center;}
    .right-column-content .content-box .inter-inqu-input input[type=button] { padding: 10px 20px; color: #ffffff; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 6px; background-color: #886418; cursor: pointer;}
    
    .right-column-content .content-box .golden-price-curve-bx { width: 100%; margin: 70px 0 60px 0; text-align: center; display: flex; justify-content: space-around; align-items: stretch; flex-wrap: wrap;}
    .right-column-content .content-box .golden-price-curve-bx .curve-bx { width: 360px; padding: 35px 0 0 0; margin: 0 0 60px 0; border: 1px #cd9623 solid; border-radius: 10px; position: relative;}
    .right-column-content .content-box .golden-price-curve-bx .curve-bx img { width: 90%; height: auto;}
    .right-column-content .content-box .golden-price-curve-bx .curve-bx .title-bx { width: 260px; padding: 4px 0; color: #ffffff; text-align: center; border-radius: 4px; background-color: #cd9623; position: absolute; top: -10px; left: calc(100% / 2 - 130px);}
    .right-column-content .content-box .golden-price-curve-bx .transaction-curve-bx { width: 100%;}
    
    
    
    /******** produsts list ********/
    
    .left-column-nav ul li .prod-nav-box { width: 90%; margin: 0 auto;}
    .left-column-nav ul li .prod-nav-box ul#menu { padding: 0; margin: 0; list-style: none; display: block;}
    .left-column-nav ul li .prod-nav-box ul#menu li { padding: 0; margin: 0; font-size: 1em; background-color: #ffffff;}
    .left-column-nav ul li .prod-nav-box ul#menu li a { width: 100%; padding: 7px 10px; border-bottom: 1px #d6d6d6 solid; text-decoration: none; display: flex; justify-content: space-between; align-items: center; box-sizing: border-box; cursor: pointer;}
    .left-column-nav ul li .prod-nav-box ul#menu li a:hover { background-color: #efefef;}
    .left-column-nav ul li .prod-nav-box ul#menu li a.sel { background-color: #efefef;}
    .left-column-nav ul li .prod-nav-box ul#menu li a font.text { color: #313131;}
    .left-column-nav ul li .prod-nav-box ul#menu li a font.icon { color: #d3d3d3; font-size: 1.2em; font-weight: 600;}
    .left-column-nav ul li .prod-nav-box ul#menu li ul#popup { padding: 5px 0; margin: 0; border-bottom: 1px #d6d6d6 solid; background-color: #ffffff; list-style: none; display: block;}
    .left-column-nav ul li .prod-nav-box ul#menu li ul#popup li { padding: 0 auto; margin: 0;}
    .left-column-nav ul li .prod-nav-box ul#menu li ul#popup li a { width: 100%; padding: 7px 15px 7px 40px; color: #999999; border-bottom: 1px #d6d6d6 solid; text-decoration: none; border: 0; display: block;}
    .left-column-nav ul li .prod-nav-box ul#menu li ul#popup li a:hover { background-color: #faf1df;}
    .left-column-nav ul li .welcom-inquiry-tel { width: 90%; padding: 20px 0; margin: 20px auto; color: #5a4210; font-size: 0.9em; text-align: center; background-color: #f1e4c8;}
    
    .right-column-content .content-box .prod-infor-list-bx { width: 100%;}
    .right-column-content .content-box .prod-infor-list-bx .prod-bx { width: 195px; padding: 9px; margin: 0 15px 30px 15px; border: 1px #999999 solid; box-sizing: border-box; -moz-box-shadow:2px 2px 4px -1px rgba(20%,20%,40%,0.3); -webkit-box-shadow:2px 2px 4px -1px rgba(20%,20%,40%,0.3); box-shadow:2px 2px 4px -1px rgba(20%,20%,40%,0.3); float: left;}
    .right-column-content .content-box .prod-infor-list-bx .prod-bx .pic { width: 175px; height: 121px; overflow: hidden;}
    .right-column-content .content-box .prod-infor-list-bx .prod-bx .pic img { width: 100%; height: auto;}
    .right-column-content .content-box .prod-infor-list-bx .prod-bx .text { width: 100%; padding: 10px 0 0 0; color: #313131; font-size: 0.9em; text-align: center;}
    
    
    
    /******** site map ********/

    ul#sitemap-bx { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: space-around; align-items: stretch; flex-wrap: wrap;}
    ul#sitemap-bx li { padding: 0; margin: 15px; color: #666; font-size: 1.4em; font-weight: 600;}
    ul#sitemap-bx li a { color: #666; text-decoration: none;}
    ul#sitemap-bx li a:hover { text-decoration: underline;}
    ul#sitemap-bx li ul.class-sed { padding: 0 20px 0 0; margin: 0; list-style: none; display: block;}
    ul#sitemap-bx li ul.class-sed li { padding: 0; margin: 10px; color: #cd9623; font-size: 0.8em; font-weight: normal;}
    ul#sitemap-bx li ul.class-sed li a { color: #cd9623; text-decoration: none;}
    ul#sitemap-bx li ul.class-sed li a:hover { text-decoration: underline;}
    
    
    
    /******** event prize+winner list ********/
    
    .prize-list-bx { clear: both; width: 100%;}
    .prize-list-bx .prize-caption { width: 100%; font-weight: 500; text-align: center; border-bottom: 1px #ccc solid; background-color: #f1f1f1; display: flex; justify-content: flex-start; align-items: stretch;}
    .prize-list-bx .prize-caption .caption-1, .prize-column .column-1 { width: 25%; padding: 5px 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
    .prize-list-bx .prize-caption .caption-2, .prize-column .column-2 { width: 50%; padding: 5px 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
    .prize-list-bx .prize-caption .caption-3, .prize-column .column-3 { width: 25%; padding: 5px 10px; box-sizing: border-box;}
    .prize-list-bx .prize-column .column-5 { width: 75%; padding: 5px 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
    .prize-list-bx .prize-column { width: 100%; text-align: center; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
    .prize-list-bx .prize-column:last-child { border-top: 1px #ccc solid;}
    
    .winner-list-bx { clear: both; width: 100%;}
    .winner-list-bx .winner-caption { width: 100%; font-weight: 500; text-align: center; border-bottom: 1px #ccc solid; background-color: #f1f1f1; display: flex; justify-content: flex-start; align-items: stretch;}
    .winner-list-bx .winner-caption .caption-1, .winner-column .column-1 { width: 15%; padding: 5px 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
    .winner-list-bx .winner-caption .caption-2, .winner-column .column-2 { width: 25%; padding: 5px 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
    .winner-list-bx .winner-caption .caption-3, .winner-column .column-3 { width: 30%; padding: 5px 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
    .winner-list-bx .winner-caption .caption-4, .winner-column .column-4 { width: 30%; padding: 5px 10px; text-align: left; box-sizing: border-box;}
    .winner-list-bx .winner-column { width: 100%; text-align: center; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
    
    
    
    /******** contact ********/
    
    .right-column-content .contact-full-box { clear: both; width: 100%; margin: 60px 0 0 0; line-height: 1.6em;}
    
    .right-column-content .contact-full-box form a { color: #000; text-decoration: underline;}
    .right-column-content .contact-full-box form a:hover { color: #cd9623;}
    .right-column-content .contact-full-box form .form-table-box { width: 100%; border: 1px #ccc solid; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
    .right-column-content .contact-full-box form .form-table-box .caption { width: 180px; padding: 10px; font-weight: 600; text-align: right; background-color: #eee; border-right: 1px #ccc solid; border-bottom: 1px #ccc solid; box-sizing: border-box;}
    .right-column-content .contact-full-box form .form-table-box .column-1-1 { width: calc(50% - 180px); padding: 10px; text-align: left; border-right: 1px #ccc solid; border-bottom: 1px #ccc solid; box-sizing: border-box;}    
    .right-column-content .contact-full-box form .form-table-box .column-1-2 { width: calc(50% - 180px); padding: 10px; text-align: left; border-bottom: 1px #ccc solid; box-sizing: border-box;}
    .right-column-content .contact-full-box form .form-table-box .column-1-1 input, .column-1-1 select, .column-1-2 input { width: 100%; padding: 5px; color: #000; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 1px #999 solid; background-color: #fff; box-sizing: border-box;}
    .right-column-content .contact-full-box form .form-table-box .column-2-1 { width: 50%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
    .right-column-content .contact-full-box form .form-table-box .column-2-1-mo { display: none;}
    .right-column-content .contact-full-box form .form-table-box .column-2-2 { width: 50%; padding: 10px; box-sizing: border-box;}
    
    .right-column-content .contact-full-box form .column-full { clear: both; width: 100%; padding: 10px; border-left: 1px #ccc solid; border-right: 1px #ccc solid; border-bottom: 1px #ccc solid; box-sizing: border-box;}
    
    .right-column-content .contact-full-box form .submit-bt { clear: both; width: 100%; margin: 30px 0 0 0; text-align: center;}
    .right-column-content .contact-full-box form .submit-bt input[type=submit] { padding: 8px 20px; color: #fff; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 8px; background-color: #886418; cursor: pointer;}
    
    
    
    /******** footer ********/
    
    footer { width: 100%; background-color: #fcf8f1;}
    
    footer .footer-nav-box { width: 100%; background-color: #cd9623;}
    footer .footer-nav-box .content-bx { width: 1240px; margin: 0 auto; display: flex; justify-content:space-between; align-items: center;}
    footer .footer-nav-box .content-bx .nav-bx { width: 100%;}
    footer .footer-nav-box .content-bx .nav-bx ul { padding: 10px 0; margin: 0; list-style: none; display: flex; justify-content: center;}
    footer .footer-nav-box .content-bx .nav-bx ul li { padding: 0; margin: 0 30px 0 0; font-size: 0.9em;}
    footer .footer-nav-box .content-bx .nav-bx ul li a { color: #ffffff; text-decoration: none;}
    footer .footer-nav-box .content-bx .social-bx { display: none;}
    /*footer .footer-nav-box .content-bx .social-bx { width: 80px; color: #ffffff; font-size: 2em; text-align: right;}*/
    
    footer .footer-content-box { width: 1240px; padding: 60px 0; margin: 0 auto; display: flex; justify-content: flex-start;}
    footer .footer-content-box .column-x2-box { width: 50%;}
    footer .footer-content-box .column-x2-box .title-bx { width: 100%; margin: 0 0 30px 0; display: flex; justify-content: flex-start; align-items: center;}
    footer .footer-content-box .column-x2-box .title { width: 150px; padding: 8px 0; margin: 0 20px 0 0; color: #ffffff; font-size: 1.2em; text-align: center; border-radius: 8px; background-color: #cd9623;}
    footer .footer-content-box .column-x2-box .infor { width: calc(100% - 170px); color: #cd9623; font-size: 0.7em;}
    footer .footer-content-box .column-x2-box .content-bx { width: 100%; color: #626262; font-size: 0.8em; line-height: 1.8em;}
    
    footer .footer-copyright-box { width: 1240px; padding: 30px 0; margin: 0 auto; color: #626262; font-size: 0.8em; text-align: center; border-top: 1px #cd9623 solid;}
    
    footer #fix-bottom-bt { display: none;}
    
    
    
}


@media screen and (min-width: 1024px) and (max-width: 1359px) {
    
    
    /******** side-bar-icon ********/
    
    #side-bar-box { width: 70px; position: fixed; top: 130px; right: 5px; z-index: 999;}
    #side-bar-box img { width: 70px; height: auto; cursor: pointer;}
    
    #side-bar-box .line-bx { display: none;}
    #side-bar-box .line-bx .content { width: 200px; padding: 5px 10px; color: #22ac38; font-size: 0.8em; text-align: center; border: 2px #22ac38 solid; border-radius: 6px; background-color: #ffffff; box-sizing: border-box; float: left;}
    #side-bar-box .line-bx .content img { width: 112px; height: auto; cursor: inherit;}
    #side-bar-box .line-bx .arrow { border-color: transparent transparent transparent #22ac38; border-style: solid solid solid solid; border-width: 10px; height: 0px; width: 0px; margin: 20px 0 0 0; float: left;}
    
    #side-bar-box .qrcode-bx { display: none;}
    #side-bar-box .qrcode-bx .content { width: 300px; padding: 5px 10px; color: #000; font-size: 0.8em; text-align: center; border: 2px #000 solid; border-radius: 6px; background-color: #ffffff; box-sizing: border-box; float: left; display: flex; justify-content: center; align-items: baseline;}
    #side-bar-box .qrcode-bx .content img { width: 110px; height: auto; margin: 0 10px;}
    #side-bar-box .qrcode-bx .arrow { border-color: transparent transparent transparent #000; border-style: solid solid solid solid; border-width: 10px; height: 0px; width: 0px; margin: 20px 0 0 0; float: left;}
    
    
    
    /******** header ********/
    
    header { width: 100%; height: auto;}
    
    header .hd-top-box { width: 96%; height: 80px; margin: 0 auto;}
    header .hd-top-box .logo-box { width: 50%; height: 80px; display: flex; align-items: center; float: left; box-sizing: border-box;}
    header .hd-top-box .logo-box img.logo { width: auto; height: 40px; margin: 0 20px 0 0;}
    header .hd-top-box .logo-box img.title { }
    /*header .hd-top-box .email-box { width: 200px; padding: 5px 0; margin: 20px 0 0 0; box-sizing: border-box; color: #cd9623; text-align: center; border: 1px #cd9623 solid; border-radius: 6px; display: flex; justify-content: center; align-items: center; float: right;}
    header .hd-top-box .email-box font.email { font-size: 0.7em;}*/
    
    header nav#mobile ul .top-social-bar-mo { display: none;}
    
    header .hd-top-box .top-social-bar { width: 200px; font-size: 2em; text-align: right; position: absolute; top: 30px; right: 20px; z-index: 9999;}
    header .hd-top-box .top-social-bar a { color: #cd9623; text-decoration: none; cursor: pointer;}
    header .hd-top-box .top-social-bar a:hover { color: #8a8000;}
    header .hd-top-box .line-bx { width: 200px; display: none; position: absolute; top: 30px; right: -10px; z-index: 999;}
    header .hd-top-box .line-bx .content { width: 200px; padding: 5px 10px; color: #22ac38; font-size: 0.4em; text-align: center; border: 2px #22ac38 solid; border-radius: 6px; background-color: #ffffff; box-sizing: border-box; float: left;}
    header .hd-top-box .line-bx .content img { width: 112px; height: auto; cursor: inherit;}
    header .hd-top-box .line-bx .arrow { border-color: transparent transparent #22ac38 transparent; border-style: solid solid solid solid; border-width: 10px; height: 0px; width: 0px; margin: 0 0 0 130px;}
    
    header nav#mobile { display: none;}
    
    header nav#pc { width: 100%; height: auto; background-color: #cd9623;}
    header nav#pc ul { padding: 0; margin: 0; list-style: none; display: flex; justify-content: center;}
    header nav#pc ul li { padding: 8px 12px; margin: 0; color: #ffffff; font-size: 1.1em; position: relative; cursor: pointer;}
    header nav#pc ul li:hover, li.sel { background-color: rgba(255,255,255,0.2);}
    header nav#pc ul li a { color: #ffffff; text-decoration: none;}
    header nav#pc ul li #popup { width: 180px; position: absolute; top: 30px; left: calc(100% / 2 - 90px); z-index: 999;}
    header nav#pc ul li #popup .arrow { border-color: transparent transparent #cd9623 transparent; border-style: solid solid solid solid; border-width: 10px; height: 0px; width: 0px; margin: 0 auto;}
    header nav#pc ul li #popup ul.popup { padding: 30px 0; margin: 0; text-align: center; background-color: #cd9623; border-radius: 8px; list-style: none; display: block;}
    header nav#pc ul li #popup ul.popup li { padding: 0; margin: 0; color: #ffffff; font-size: 1em;}
    header nav#pc ul li #popup ul.popup li a { width: 100%; padding: 8px 0; display: block;}
    header nav#pc ul li #popup ul.popup li a:active { background-color: rgba(255,255,255,0.2);}
    
    
    
    /******** banner ********/
    
    .banner-box { width: 100%; height: auto;}    
    .banner-box .qrcode-bx { width: 30%; position: absolute; top: 20%; left: 35%;}
    .banner-box .qrcode-bx .qrcode { width: calc(50% - 40px); margin: 0 20px; float: left;}
    .banner-box .qrcode-bx .qrcode img { width: 100%; height: auto;}
    
    .banner-box-mo { display: none;}
    
    
    
    /******** section #box-1 ********/
    
    section { width: 96%; padding: 80px 0; margin: 0 auto;}
    
    .section-title-box { width: 100%; margin: 0 0 20px 0;}
    .section-title-box .text { color: #cd9623; font-size: 1.6em; font-weight: 500; line-height: 0; text-align: center;}
    .section-title-box .underline { width: 40px; border-bottom: 2px #8a8000 solid; margin: 0 auto;}
    
    .section-marquee { width: 100%; padding: 10px 40px; margin: 0 0 40px 0; color: #1d2088; /*color: #a6937c;*/ letter-spacing: 0.1em; background-color: #fff7ea; border: 1px #a6937c solid; border-radius: 6px; box-sizing: border-box;}
    
    .section-column-x2 { width: 50%; float: left;}
    .section-column-x2 .section-column-x2-title { width: 90%; color: #e60012; font-weight: 500; margin: 0 auto 20px auto;}
    .section-column-x2 .form-box-yellow { width: 94%; font-size: 0.9em; border-top: 1px #cec21b solid; border-left: 1px #cec21b solid; border-right: 1px #cec21b solid; margin: 0 auto; display: flex; align-self: stretch;}
    .section-column-x2 .form-box-yellow:last-child { border-bottom: 1px #cec21b solid;}
    .section-column-x2 .form-box-yellow .caption-yellow { clear:both; width: 50%; padding: 10px 20px; color: #534e11; background-color: #fefbd4; border-right: 1px #cec21b solid; box-sizing: border-box;}
    .section-column-x2 .form-box-yellow .column-yellow { width: 50%; padding: 10px 20px; color: #313131; background-color: #ffffff; box-sizing: border-box;}
    .section-column-x2 .form-box-yellow .column-yellow font.biger, .form-box-blue .column-blue font.biger { font-size: 1.2em;}
    .section-column-x2 .form-box-blue { width: 94%; font-size: 0.9em; border-top: 1px #77b7d3 solid; border-left: 1px #77b7d3 solid; border-right: 1px #77b7d3 solid; margin: 0 auto; display: flex; align-self: stretch;}
    .section-column-x2 .form-box-blue:nth-child(5) { border-bottom: 1px #77b7d3 solid;}
    .section-column-x2 .form-box-blue .caption-blue { clear:both; width: 50%; padding: 10px 30px; color: #17314b; background-color: #e1f1f8; border-right: 1px #77b7d3 solid; box-sizing: border-box;}
    .section-column-x2 .form-box-blue .column-blue { width: 50%; padding: 10px 30px; color: #313131; background-color: #ffffff; box-sizing: border-box;}
    
    .section-column-x2 .section-infor-box { clear: both; width: 94%; padding: 20px 30px; margin: 40px auto 0 auto; color: #313131; font-size: 0.9em; border: 1px #cccccc solid; box-sizing: border-box;}
    
    
    
    /******** section #box-2 ********/
    
    section#box-2 { width: 100%; background: url(../images/section_2_bg.jpg) no-repeat; background-size: cover;}
    
    section#box-2 .section-box { width: 90%; margin: 0 auto; display: flex; justify-content: flex-start; flex-wrap: wrap;}
    section#box-2 .section-box .zone-bx { width: 240px; height: 120px; margin: 20px 30px; border-radius: 8px; background-color: #eeeeee; position: relative; overflow: hidden;}
    section#box-2 .section-box .zone-bx .text { color: #ffffff; font-size: 1.2em; font-weight: 500; z-index: 10; position: absolute; bottom: 20px; right: 20px;}
    section#box-2 .section-box .zone-bx img { width: 100%; height: auto; position: absolute; top: 0; left: 0; z-index: 9;}
    section#box-2 .section-box .zone-bx .black-mask { width: 240px; height: 120px; background-color: rgba(0,0,0,0); position: absolute; top: 0; left: 0; z-index: 11;}
    section#box-2 .section-box .zone-bx .black-mask:hover { background-color: rgba(0,0,0,0.4);}

    
    
    /******** section #box-3 ********/
    
    section#box-3 { width: 100%; padding: 120px 0; background: url(../images/section_3_bg.jpg) repeat;}
    
    section#box-3 .section-box { width: 90%; margin: 0 auto; display: flex; justify-content: space-around; flex-wrap: wrap;}
    section#box-3 .section-box .item-bx { width: 245px; height: 160px; margin: 40px 0; border-right: 5px #936b18 solid; border-bottom: 5px #936b18 solid; background-color: #dcab43; border-radius: 6px;}
    section#box-3 .section-box a { text-decoration: none;}
    section#box-3 .section-box .item-bx:hover { background-color: #be9439;}
    section#box-3 .section-box .item-bx .pic { width: 100%; height: 85px; padding: 20px 0 10px 0; text-align: center; box-sizing:}
    section#box-3 .section-box .item-bx .item { width: 100%; color: #e60012; font-size: 1.8em; line-height: 1em; text-align: center;}
    
    
    
    section#mobile, section#infor-1-bx-mo, section#infor-2-bx-mo { display: none;}
    
    
    
    /******** section #box-4 ********/
    
    section#box-4 { width: 100%; padding: 180px 0; background: url(../images/section_4_bg.jpg) bottom no-repeat; background-size: cover;}
    
    section#box-4 .section-box { width: 90%; margin: 0 auto; display: flex; justify-content: space-around; flex-wrap: wrap;}
    section#box-4 .section-box .service-bx { width: 310px; height: 300px; background-color: #ffffff; -moz-box-shadow:4px 4px 12px -4px rgba(20%,20%,40%,0.5); -webkit-box-shadow:4px 4px 12px -4px rgba(20%,20%,40%,0.5); box-shadow:4px 4px 12px -4px rgba(20%,20%,40%,0.5); position: relative;}
    section#box-4 .section-box .service-bx:nth-child(1), .service-bx:nth-child(2) { margin-bottom: 80px;}
    section#box-4 .section-box .service-bx .title { width: 100%; height: 60px; padding: 12px 20px 0 0; color: #ffffff; font-size: 1.4em; text-align: right; background-color: #cd9623; box-sizing: border-box;}
    section#box-4 .section-box .service-bx .text { width: 100%; padding: 50px 30px; color: #8e8e8e; line-height: 1.8em; box-sizing: border-box;}
    section#box-4 .section-box .service-bx .icon-1 { width: 101px; height: 120px; position: absolute; top: -40px; left: 25px;}
    section#box-4 .section-box .service-bx .icon-2 { width: 130px; height: 120px; position: absolute; top: -40px; left: 10px;}
    section#box-4 .section-box .service-bx .icon-3 { width: 120px; height: 120px; position: absolute; top: -40px; left: 15px;}
    section#box-4 .section-box .service-bx .icon-4 { width: 133px; height: 120px; position: absolute; top: -40px; left: 8px;}
    
    
    
    /******** section #box-5 ********/
    
    
    .section-title-s5-box { width: 100%; margin: 0 0 20px 0;}
    .section-title-s5-box .text { color: #cd9623; font-size: 1.6em; font-weight: 500; line-height: 0; text-align: center;}
    .section-title-s5-box .underline { width: 40px; border-bottom: 2px #8a8000 solid; margin: 0 auto;}
    .section-title-s5-box .icon-bx { display: none;}
    
    .section-sample-box { width: 100%; margin: 0 0 20px 0; display: flex; justify-content: space-between;}
    .section-sample-box .column-x2-bx { width: 49%;}
    .section-sample-box .column-x2-bx .title { width: 100%; padding: 5px 10px; color: #313131; font-weight: 500; background-color: #f1d599; box-sizing: border-box;}
    .section-sample-box .column-x2-bx .content-bx { width: 100%; height: calc(100% - 50px); padding: 20px; margin: 15px 0 0 0; background-color: #fbf6ec; box-sizing: border-box;}
    .section-sample-box .column-x2-bx .content-bx hr { width: 100%; margin: 10px 0; border: 1px #e9d09a solid;}
    .section-sample-box .column-x2-bx .content-bx .list-bx { width: 100%; display: flex; justify-content: flex-start; align-items: stretch;}
    .section-sample-box .column-x2-bx .content-bx .list-bx .list-num { width: 30px; padding: 7px 0; color: #ffffff; text-align: center; vertical-align: middle; background-color: #e60012;}
    .section-sample-box .column-x2-bx .content-bx .list-bx .list-text { width: calc(100% - 30px); padding: 7px 18px; color: #434343; font-size: 0.9em; box-sizing: border-box;}
    .section-sample-box .column-x2-bx .content-bx .list-bx .list-text .bigger { color: #313131; font-size: 1.3em;}
    
    .section-conclusion-box { width: 100%; margin: 0 0 20px 0;}
    .section-conclusion-box .title { width: 100%; padding: 5px 10px; margin: 0 0 15px 0; color: #313131; font-weight: 500; background-color: #f1d599; box-sizing: border-box;}
    .section-conclusion-box .content-bx { width: 100%; padding: 20px; margin: 15px 0 0 0; background-color: #fbf6ec; box-sizing: border-box;}
    .section-conclusion-box .list-bx { width: 100%; margin: 5px 0 0 0; font-size: 0.9em; display: flex; justify-content: flex-start; align-items: stretch;}
    .section-conclusion-box .list-bx .list-num { width: 30px; padding: 10px 0; color: #ffffff; text-align: center; background-color: #f39800;}
    .section-conclusion-box .list-bx .list-text { width: calc(100% - 30px); padding: 10px 20px; color: #434343; background-color: #fbf6ec; box-sizing: border-box;}
    
    
    
    /******** section #box-6 ********/
    
    section#box-6 { width: 80%; padding: 40px; margin: 0 auto 80px auto; border: 1px #ccc solid; border-radius: 20px; box-sizing: border-box;}
    
    section#box-6 ul#news-tabs { width: 100%; padding: 0; margin: 0 0 20px 0; list-style: none; display: flex; justify-content: center; align-items: center;}
    section#box-6 ul#news-tabs li { padding: 0; margin: 5px; font-size: 0.9em; line-height: 1em; text-align: center;}
    section#box-6 ul#news-tabs li a { width: 100px; padding: 8px 0; color: #666666; text-decoration: none; background-color: #eeeeee; border-radius: 4px; display: block;}
    section#box-6 ul#news-tabs li a:hover { color: #000;}
    section#box-6 ul#news-tabs li a.sel { color: #ffffff; background-color: #f39800;}    
    section#box-6 #news-panel { font-size: 0.9em;}
    section#box-6 #news-panel .news-source { width: 100%; color: #999; text-align: right; margin: 0 0 10px 0;}
    section#box-6 #news-panel ul { padding: 0; margin: 0; list-style: none; display: block;}
    section#box-6 #news-panel ul li { padding: 10px; margin: 0; background-color: #eee; box-sizing: border-box;}
    section#box-6 #news-panel ul li:nth-child(2n) { background-color: #fff;}
    section#box-6 #news-panel ul li a { color: #666666; text-decoration: none;}
    section#box-6 #news-panel ul li a:hover { text-decoration: underline;}
    
    
    
    /******** section #box-7 ********/
    
    section#box-7 { width: 90%; padding: 80px 0; margin: 0 auto;}
    
    section#box-7 ul.news-list-bx { width: 100%; padding: 0; margin: 60px 0 0 0; list-style: none; display: block;}
    section#box-7 ul.news-list-bx li { width: 100%; padding: 0; margin: 0 0 2px 0; color: #666666; display: flex; justify-content: flex-start; align-items: stretch; border-bottom: 1px #ccc dashed; box-sizing: border-box;}
    section#box-7 ul.news-list-bx li .date { width: 120px; padding: 10px; background-color: #efefef; box-sizing: border-box;}
    section#box-7 ul.news-list-bx li .title-content { width: calc(100% - 120px); padding: 10px; background-color: #fbf6ec; box-sizing: border-box;}
    section#box-7 ul.news-list-bx li .title-content a { color: #715314; text-decoration: none;}
    section#box-7 ul.news-list-bx li .title-content a:hover { text-decoration: underline;}
    
    section#box-7 .news-more-bx { width: 90%; margin: 20px 0 0 0; font-size: 0.9em; text-align: right;}
    section#box-7 .news-more-bx a { color: #666666; text-decoration: none;}
    section#box-7 .news-more-bx a:hover { text-decoration: underline;}
    
    .news-date { clear: both; width: 100%; margin: 20px 0 0 0; color: #666; font-size: 0.6em; font-weight: normal; text-align: right;}
    
    .go-back { clear: both; width: 100%; margin: 80px 0 0 0; text-align: center;}
    .go-back input[type=button] { padding: 10px 20px; color: #ffffff; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 6px; background-color: #886418; cursor: pointer;}
    
    
    
    /******** page banner ********/
    
    .page-banner-bx { width: 100%; height: auto; position: relative;}
    .page-banner-bx img { width: 100%; height: auto;}
    .page-banner-bx .sub-title-bx { width: 100%; height: auto; position: absolute; bottom: 0; left: 0;}
    .page-banner-bx .sub-title-bx .title-bx { width: 300px; height: 60px; padding: 15px 0 0 0; margin: 0 0 0 20px; color: #715314; font-size: 2.2em; font-weight: 500; text-align: center; border-radius: 20px 20px 0 0; background-color: #ffffff;}
    
    
    
    /******** left column ********/
    
    .left-column-nav { width: 300px; float: left;}
    .left-column-nav ul { padding: 0; margin: 0; list-style: none; display: block;}
    .left-column-nav ul li { padding: 0; margin: 0;}
    .left-column-nav ul li .sub-nav-box { width: 100%; height: 60px; margin: 0 0 15px 0; font-size: 1.2em; border: 5px #cd9623 solid; background-color: #ffffff; border-radius: 8px; box-sizing: border-box;}
    .left-column-nav ul li .sub-nav-box a { width: 100%; height: 50px; padding: 0 15px; line-height: 1em; text-decoration: none; display: flex; justify-content: space-between; align-items: center; box-sizing: border-box;}
    .left-column-nav ul li .sub-nav-box a.link:hover { background-color: #f7f0e2;}
    .left-column-nav ul li .sub-nav-box a font.text { color: #cd9623;}
    .left-column-nav ul li .sub-nav-box a font.icon { color: #f2deb3; font-size: 1.6em; font-weight: 600;}
    .left-column-nav ul li .sub-nav-box a font.icon-mo { display: none;}
    .left-column-nav ul li.mo .down-nav-box { width: 90%; margin: 0 auto; font-size: 1em; border-bottom: 1px #d6d6d6 solid; box-sizing: border-box;}
    .left-column-nav ul li.mo .down-nav-box a { width: 100%; padding: 7px 10px; text-decoration: none; display: flex; justify-content: space-between; align-items: center; box-sizing: border-box;}
    .left-column-nav ul li.mo .down-nav-box a:hover { background-color: #efefef;}
    .left-column-nav ul li.mo .down-nav-box a font.text { color: #313131;}
    .left-column-nav ul li.mo .down-nav-box a font.icon { color: #d3d3d3; font-size: 1.2em; font-weight: 600;}
    
    
    
    /******** company_about ********/
    
    .right-column-content { width: calc( 100% - 340px); float: right;}
    
    .right-column-content .content-box { width: 100%; padding: 60px 0 20px 0; color: #666666; line-height: 1.8em;}
    .right-column-content .content-box .pic-box { width: 100%;}
    .right-column-content .content-box .pic-box img { width: auto; height: 280px; margin: 30px 50px 0 0; float: left;}
    
    
    
    /******** company_service ********/
    
    .right-column-content .content-box .serv-item-box { width: 90%; padding: 10px 30px; margin: 0 auto 25px auto; color: #5a4210; background-color: #c6aa6e; border-radius: 10px; border-bottom: 5px #5a4210 solid; border-right: 5px #5a4210 solid; box-sizing: border-box; display: flex; align-items: center;}
    .right-column-content .content-box .serv-item-box font.icon { font-size: 2em;}
    .right-column-content .content-box .serv-item-box font.text { font-size: 1.2em;}
    
    
    
    /******** news reports video ********/
    
    .video-list-bx { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
    .video-list-bx .video-bx { width: calc(100% / 2 - 30px); margin: 0 15px 30px 15px;}
    .video-list-bx .video-bx .video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; width:100%; height: 0px; overflow: hidden;}
    .video-list-bx .video-bx .video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}    
    .video-list-bx .video-bx .video-title { width: 100%; margin: 10px 0 0 0; color: #666666; font-size: 0.9em; line-height: 1em;}
    
    .right-column-content ul.news-list-bx { width: 100%; padding: 0; margin: 60px 0 0 0; list-style: none; display: block;}
    .right-column-content ul.news-list-bx li { width: 100%; padding: 0; margin: 0 0 2px 0; color: #666666; display: flex; justify-content: flex-start; align-items: stretch; border-bottom: 1px #ccc dashed; box-sizing: border-box;}
    .right-column-content ul.news-list-bx li .date { width: 120px; padding: 10px; background-color: #efefef; box-sizing: border-box;}
    .right-column-content ul.news-list-bx li .title-content { width: calc(100% - 120px); padding: 10px; background-color: #fbf6ec; box-sizing: border-box;}
    .right-column-content ul.news-list-bx li .title-content a { color: #715314; text-decoration: none;}
    .right-column-content ul.news-list-bx li .title-content a:hover { text-decoration: underline;}
    
    
    
    /******** company_shop & spot ********/
    
    .right-column-content .content-box .title-item-bx { width: 100%; padding: 5px 30px; color: #cd9623; font-size: 1.6em; background-color: #f8efde; box-sizing: border-box;}
    .right-column-content .content-box .content-item-bx { width: 100%; padding: 20px 30px; box-sizing: border-box;}
    .right-column-content .content-box .content-item-bx img { max-width: 100%; height: auto; margin: 0 0 20px 0;}
    .right-column-content .content-box .content-item-bx .tran-pic-bx { width: 50%; margin: 15px 0; font-weight: 600; text-align: center; float: left;}
    .right-column-content .content-box .content-item-bx .tran-pic-bx img { width: 80%; height: auto;}
    .right-column-content .content-box .content-item-bx .tran-pic-bx .text { clear: both; width: 80%; margin: 0 auto;}
    
    .right-column-content .content-box .section-box { width: 100%; margin: 0 auto; display: flex; justify-content: flex-start; flex-wrap: wrap;}
    .right-column-content .content-box .section-box .zone-bx { width: 240px; height: 120px; margin: 20px 30px; border-radius: 8px; background-color: #eeeeee; position: relative; overflow: hidden;}
    .right-column-content .content-box .section-box .zone-bx .text { color: #ffffff; font-size: 1.2em; font-weight: 500; z-index: 10; position: absolute; bottom: 20px; right: 20px;}
    .right-column-content .content-box .section-box .zone-bx img { width: 100%; height: auto; position: absolute; top: 0; left: 0; z-index: 9;}
    .right-column-content .content-box .section-box .zone-bx .black-mask { width: 240px; height: 120px; background-color: rgba(0,0,0,0); position: absolute; top: 0; left: 0; z-index: 11;}
    .right-column-content .content-box .section-box .zone-bx .black-mask:hover { background-color: rgba(0,0,0,0.4);}
    
    
    
    /******** golden Q&A ********/
    
    .right-column-content .content-box dl#panel { width: 100%;}
    .right-column-content .content-box dl#panel dt { width: 100%; padding: 10px 20px; margin: 15px 0; color: #5a4210; background-color: #ccae70; border-radius: 8px; box-sizing: border-box; cursor: pointer;}
    .right-column-content .content-box dl#panel dt .q-bx { width: 40px; font-size: 1.6em; float: left;}
    .right-column-content .content-box dl#panel dt .text-bx { width: calc(100% - 80px); font-weight: 500; float: left;}
    .right-column-content .content-box dl#panel dt .minus-bx, .plus-bx { width: 40px; color: #ffffff; font-size: 1.6em; text-align: right; float: right;}
    .right-column-content .content-box dl#panel dd { padding: 20px 60px 20px 20px; box-sizing: border-box;}
    
    
    
    /******** count online ********/
    
    .left-column-nav .count-nav-box { width: 80%; padding: 15px 0; margin: 0 auto; color: #454545; font-size: 0.9em; border-bottom: 1px #cccccc solid; box-sizing: border-box;}
    .left-column-nav .count-1-nav-box { width: 80%; padding: 15px 0; margin: 0 auto; color: #454545; font-size: 0.9em; box-sizing: border-box;}
    .left-column-nav .count-nav-box .column-1-bx, .count-1-nav-box .column-1-bx { clear: both; width: 30%; text-align: right; float: left;}
    .left-column-nav .count-nav-box .column-2-bx, .count-1-nav-box .column-2-bx { width: 20%; text-align: center; float: left;}
    .left-column-nav .count-nav-box .column-3-bx, .count-1-nav-box .column-3-bx { width: 50%; float: left;}
    .left-column-nav .count-1-nav-box .def-title-bx { width: 100%; padding: 5px 0; margin: 0 0 10px 0; color: #454545; text-align: center; border: 1px #454545 solid; border-radius: 10px; background-color: #fbf1dc; box-sizing: border-box;}
    .left-column-nav .count-1-nav-box .def-caption-1-bx { clear: both; width: 45%; margin: 0 0 5px 0; float: left;}
    .left-column-nav .count-1-nav-box .def-column-1-bx { width: 55%; margin: 0 0 5px 0; float: left;}
    .left-column-nav .count-1-nav-box .def-caption-2-bx { clear: both; width: 70%; margin: 0 0 5px 0; float: left;}
    .left-column-nav .count-1-nav-box .def-column-2-bx { width: 30%; margin: 0 0 5px 0; float: left;}
    
    .right-column-content .content-box .count-sub-title-1-bx { clear: both; width: 100%; padding: 3px 10px; color: #5a4210; font-weight: 500; background-color: #ead4a6; box-sizing: border-box;}
    
    .right-column-content .content-box .count-content-bx { width: 100%; padding: 25px 0; border-bottom: 1px #d6d6d6 solid; box-sizing: border-box;}
    .right-column-content .content-box .count-content-bx .column-x4-bx { width: 50%; text-align: center; line-height: 2.4em; float: left;}
    .right-column-content .content-box .count-content-bx .column-x4-bx input[type=text] { width: 120px; padding: 5px 10px; color: #545454; font:0.9em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; text-align: center; background-color: #ffffff; border: 1px #999999 solid; border-radius: 6px;}
    .right-column-content .content-box .column-x2-left-bx { clear: both; width: 50%; padding: 20px 0; font-size: 0.9em; line-height: 3em; text-align: center; float: left;}
    .right-column-content .content-box .column-x2-right-bx { width: 50%; padding: 20px 0; text-align: center; float: left;}
    .right-column-content .content-box .column-x2-right-bx input[type=button] { width: 140px; padding: 10px; color: #ffffff; font:0.9em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 6px; background-color: #e60012; cursor: pointer;}
    
    .right-column-content .content-box .count-sub-title-2-bx { clear: both; width: 100%; padding: 3px 10px; color: #ffffff; font-weight: 500; background-color: #daae53; box-sizing: border-box;}
    
    .right-column-content .content-box .count-sub-title-3-bx { clear: both; width: 100%; padding: 3px 10px; color: #ffffff; font-weight: 500; background-color: #b1811d; box-sizing: border-box;}
    
    .right-column-content .content-box .count-notice-bx { clear: both; width: 100%; padding: 30px 0; color: #5a4210; font-size: 0.8em;}
    .right-column-content .content-box .standard-form { width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
    .right-column-content .content-box .standard-form .count-caption-1-bx { width: 30%; padding: 10px; color: #5a4210; font-weight: 500; background-color: #f7e6c3; box-sizing: border-box;}
    .right-column-content .content-box .standard-form .count-caption-2-bx { width: 70%; padding: 10px; color: #5a4210; font-weight: 500; background-color: #f7e6c3; box-sizing: border-box;}
    .right-column-content .content-box .standard-form .count-column-1-bx, .count-column-1-1-bx { width: 30%; padding: 10px; color: #313131; font-weight: 500; border-bottom: 1px #f7e6c3 solid; box-sizing: border-box;}
    .right-column-content .content-box .standard-form .count-column-2-bx, .count-column-2-1-bx { width: 70%; padding: 10px; color: #313131; border-bottom: 1px #f7e6c3 solid; box-sizing: border-box;}
    .right-column-content .content-box .standard-form .count-column-3-bx { width: 100%; padding: 10px; color: #999999; border-bottom: 1px #f7e6c3 solid; box-sizing: border-box;}
    .right-column-content .content-box .standard-form .count-column-2-1-bx ul { padding: 0 0 0 35px; margin: 0; list-style-type: cjk-ideographic; display: block;}
    .right-column-content .content-box .standard-form .count-column-2-1-bx ul li { padding: 0; margin: 0;}
    
    .right-column-content .content-box .contact-caption-bx { clear: both; width: 160px; padding: 10px 0 0 0; color: #313131; font-weight: 500; text-align: right; float: left;}
    .right-column-content .content-box .contact-column-bx { width: calc(100% - 160px); padding: 0 0 0 30px; margin: 0 0 10px 0; float: left; box-sizing: border-box;}
    .right-column-content .content-box .contact-column-bx input[type=text].contact { width: 340px; padding: 10px 20px; margin: 0 0 10px 0; color: #313131; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 1px #cccccc solid; border-radius: 6px; background-color: #ffffff;}
    .right-column-content .content-box .contact-column-bx select.contact { width: 380px; padding: 10px 20px; margin: 0 0 10px 0; color: #313131; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 1px #cccccc solid; border-radius: 6px; background-color: #ffffff;}
    .right-column-content .content-box .contact-column-bx .notice { clear: both; width: 100%; color: #999999; font-size: 0.9em; line-height: 1.4em;}
    .right-column-content .content-box .contact-notice-bx { clear: both; width: 100%; padding: 15px 80px; margin: 30px 0 0 0; color: #666666; font-size: 0.9em; line-height: 1.6em; background-color: #eeeeee; box-sizing: border-box;}
    .right-column-content .content-box .contact-button-bx { clear: both; width: 100%; margin: 30px 0 0 0; text-align: center;}
    .right-column-content .content-box .contact-button-bx input[type=button] { padding: 10px 40px; color: #ffffff; font:0.9em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 6px; background-color: #e60012; cursor: pointer;}
    
    
        
    /******** price inquiry ********/
    
    .right-column-content .content-box .price-form-caption-bx { width: 100%; font-size: 0.9em; text-align: center;}
    .right-column-content .content-box .price-form-caption-bx .caption-1-bx { width: 26%; height: 60px; padding: 15px 0 0 0; font-weight: 500; box-sizing: border-box; background-color: #f3e3c1; float: left;}
    .right-column-content .content-box .price-form-caption-bx .caption-2-bx { width: 37%; height: 60px; float: left;}
    .right-column-content .content-box .price-form-caption-bx .caption-2-bx .caption-2-1 { width: 100%; height: 30px; color: #ffffff; background-color: #cd9623;}
    .right-column-content .content-box .price-form-caption-bx .caption-2-bx .caption-2-2 { width: 25%; height: 30px; color: #313131; background-color: #e0c17f; float: left;}
    .right-column-content .content-box .price-form-caption-bx .caption-2-bx .caption-2-3 { width: 25%; height: 30px; color: #313131; background-color: #f6ecd6; float: left;}
    .right-column-content .content-box .price-form-column-bx { width: 100%; font-size: 0.9em; text-align: center; border-bottom: 1px #cccccc solid;}
    .right-column-content .content-box .price-form-column-bx .column-1-bx { width: 26%; padding: 10px 0; font-weight: 500; float: left;}
    .right-column-content .content-box .price-form-column-bx .column-2-bx { width: 37%; float: left;}
    .right-column-content .content-box .price-form-column-bx .column-2-bx .column-2-1 { width: 25%; padding: 10px 0; float: left;}
    
    
    
    /******** history price inquiry ********/
    
    .right-column-content .content-box .price-search-bx { width: 100%; padding: 40px 15px; margin: 0 0 80px 0; color: #5a4210; text-align: center; background-color: #faf4e9; box-sizing: border-box; display: flex; justify-content: center; align-items: center;}
    .right-column-content .content-box .price-search-bx select { width: 120px; padding: 6px 10px; margin: 0 10px 0 0; color: #5a4210; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 1px #cccccc solid; border-radius: 6px; background-color: #ffffff;}
    .right-column-content .content-box .price-search-bx input[type=button] { padding: 6px 20px; color: #ffffff; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 1px #cccccc solid; border-radius: 6px; background-color: #886418; cursor: pointer;}
    
    
    
    /******** international inquiry ********/
    
    .right-column-content .content-box .inter-inqu-input { width: 100%; text-align: center;}
    .right-column-content .content-box .inter-inqu-input input[type=button] { padding: 10px 20px; color: #ffffff; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 6px; background-color: #886418; cursor: pointer;}
    
    .right-column-content .content-box .golden-price-curve-bx { width: 100%; margin: 70px 0 60px 0; text-align: center; display: flex; justify-content: space-around; align-items: stretch; flex-wrap: wrap;}
    .right-column-content .content-box .golden-price-curve-bx .curve-bx { width: 360px; padding: 35px 0 0 0; margin: 0 0 60px 0; border: 1px #cd9623 solid; border-radius: 10px; position: relative;}
    .right-column-content .content-box .golden-price-curve-bx .curve-bx img { width: 90%; height: auto;}
    .right-column-content .content-box .golden-price-curve-bx .curve-bx .title-bx { width: 260px; padding: 4px 0; color: #ffffff; text-align: center; border-radius: 4px; background-color: #cd9623; position: absolute; top: -10px; left: calc(100% / 2 - 130px);}
    .right-column-content .content-box .golden-price-curve-bx .transaction-curve-bx { width: 100%; text-align: center;}
    .right-column-content .content-box .golden-price-curve-bx .transaction-curve-bx img { max-width: 90%; height: auto;}
    
    
    
    /******** produsts list ********/
    
    .left-column-nav ul li .prod-nav-box { width: 90%; margin: 0 auto;}
    .left-column-nav ul li .prod-nav-box ul#menu { padding: 0; margin: 0; list-style: none; display: block;}
    .left-column-nav ul li .prod-nav-box ul#menu li { padding: 0; margin: 0; font-size: 1em; background-color: #ffffff;}
    .left-column-nav ul li .prod-nav-box ul#menu li a { width: 100%; padding: 7px 10px; border-bottom: 1px #d6d6d6 solid; text-decoration: none; display: flex; justify-content: space-between; align-items: center; box-sizing: border-box; cursor: pointer;}
    .left-column-nav ul li .prod-nav-box ul#menu li a:hover { background-color: #efefef;}
    .left-column-nav ul li .prod-nav-box ul#menu li a.sel { background-color: #efefef;}
    .left-column-nav ul li .prod-nav-box ul#menu li a font.text { color: #313131;}
    .left-column-nav ul li .prod-nav-box ul#menu li a font.icon { color: #d3d3d3; font-size: 1.2em; font-weight: 600;}
    .left-column-nav ul li .prod-nav-box ul#menu li ul#popup { padding: 5px 0; margin: 0; border-bottom: 1px #d6d6d6 solid; background-color: #ffffff; list-style: none; display: block;}
    .left-column-nav ul li .prod-nav-box ul#menu li ul#popup li { padding: 0 auto; margin: 0;}
    .left-column-nav ul li .prod-nav-box ul#menu li ul#popup li a { width: 100%; padding: 7px 15px 7px 40px; color: #999999; border-bottom: 1px #d6d6d6 solid; text-decoration: none; border: 0; display: block;}
    .left-column-nav ul li .prod-nav-box ul#menu li ul#popup li a:hover { background-color: #faf1df;}
    .left-column-nav ul li .welcom-inquiry-tel { width: 90%; padding: 20px 0; margin: 20px auto; color: #5a4210; font-size: 0.9em; text-align: center; background-color: #f1e4c8;}
    
    .right-column-content .content-box .prod-infor-list-bx { width: 100%;}
    .right-column-content .content-box .prod-infor-list-bx .prod-bx { width: 220px; padding: 9px; margin: 0 15px 30px 15px; border: 1px #999999 solid; box-sizing: border-box; -moz-box-shadow:2px 2px 4px -1px rgba(20%,20%,40%,0.3); -webkit-box-shadow:2px 2px 4px -1px rgba(20%,20%,40%,0.3); box-shadow:2px 2px 4px -1px rgba(20%,20%,40%,0.3); float: left;}
    .right-column-content .content-box .prod-infor-list-bx .prod-bx .pic { width: 200px; height: 138px; overflow: hidden;}
    .right-column-content .content-box .prod-infor-list-bx .prod-bx .pic img { width: 100%; height: auto;}
    .right-column-content .content-box .prod-infor-list-bx .prod-bx .text { width: 100%; padding: 10px 0 0 0; color: #313131; font-size: 0.9em; text-align: center;}
    
    
    
    /******** site map ********/

    ul#sitemap-bx { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: space-around; align-items: stretch; flex-wrap: wrap;}
    ul#sitemap-bx li { padding: 0; margin: 15px; color: #666; font-size: 1.4em; font-weight: 600;}
    ul#sitemap-bx li a { color: #666; text-decoration: none;}
    ul#sitemap-bx li a:hover { text-decoration: underline;}
    ul#sitemap-bx li ul.class-sed { padding: 0 20px 0 0; margin: 0; list-style: none; display: block;}
    ul#sitemap-bx li ul.class-sed li { padding: 0; margin: 10px; color: #cd9623; font-size: 0.8em; font-weight: normal;}
    ul#sitemap-bx li ul.class-sed li a { color: #cd9623; text-decoration: none;}
    ul#sitemap-bx li ul.class-sed li a:hover { text-decoration: underline;}
    
    
    
    /******** event prize+winner list ********/
    
    .prize-list-bx { clear: both; width: 100%;}
    .prize-list-bx .prize-caption { width: 100%; font-weight: 500; text-align: center; border-bottom: 1px #ccc solid; background-color: #f1f1f1; display: flex; justify-content: flex-start; align-items: stretch;}
    .prize-list-bx .prize-caption .caption-1, .prize-column .column-1 { width: 25%; padding: 5px 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
    .prize-list-bx .prize-caption .caption-2, .prize-column .column-2 { width: 50%; padding: 5px 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
    .prize-list-bx .prize-caption .caption-3, .prize-column .column-3 { width: 25%; padding: 5px 10px; box-sizing: border-box;}
    .prize-list-bx .prize-column .column-5 { width: 75%; padding: 5px 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
    .prize-list-bx .prize-column { width: 100%; text-align: center; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
    .prize-list-bx .prize-column:last-child { border-top: 1px #ccc solid;}
    
    .winner-list-bx { clear: both; width: 100%;}
    .winner-list-bx .winner-caption { width: 100%; font-weight: 500; text-align: center; border-bottom: 1px #ccc solid; background-color: #f1f1f1; display: flex; justify-content: flex-start; align-items: stretch;}
    .winner-list-bx .winner-caption .caption-1, .winner-column .column-1 { width: 15%; padding: 5px 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
    .winner-list-bx .winner-caption .caption-2, .winner-column .column-2 { width: 25%; padding: 5px 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
    .winner-list-bx .winner-caption .caption-3, .winner-column .column-3 { width: 30%; padding: 5px 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
    .winner-list-bx .winner-caption .caption-4, .winner-column .column-4 { width: 30%; padding: 5px 10px; text-align: left; box-sizing: border-box;}
    .winner-list-bx .winner-column { width: 100%; text-align: center; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
    
    
    
    /******** contact ********/
    
    .right-column-content .contact-full-box { clear: both; width: 100%; margin: 60px 0 0 0; line-height: 1.6em;}
    
    .right-column-content .contact-full-box form a { color: #000; text-decoration: underline;}
    .right-column-content .contact-full-box form a:hover { color: #cd9623;}
    .right-column-content .contact-full-box form .form-table-box { width: 100%; border: 1px #ccc solid; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
    .right-column-content .contact-full-box form .form-table-box .caption { width: 180px; padding: 10px; font-weight: 600; text-align: right; background-color: #eee; border-right: 1px #ccc solid; border-bottom: 1px #ccc solid; box-sizing: border-box;}
    .right-column-content .contact-full-box form .form-table-box .column-1-1 { width: calc(100% - 180px); padding: 10px; text-align: left; border-bottom: 1px #ccc solid; box-sizing: border-box;}    
    .right-column-content .contact-full-box form .form-table-box .column-1-2 { width: calc(100% - 180px); padding: 10px; text-align: left; border-bottom: 1px #ccc solid; box-sizing: border-box;}
    .right-column-content .contact-full-box form .form-table-box .column-1-1 input, .column-1-1 select, .column-1-2 input { width: 100%; padding: 5px; color: #000; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 1px #999 solid; background-color: #fff; box-sizing: border-box;}
    .right-column-content .contact-full-box form .form-table-box .column-2-1 { display: none;}
    .right-column-content .contact-full-box form .form-table-box .column-2-1-mo { width: 100%; padding: 10px; border-bottom: 1px #ccc solid; box-sizing: border-box;}
    .right-column-content .contact-full-box form .form-table-box .column-2-2 { width: 100%; padding: 10px; box-sizing: border-box;}
    
    .right-column-content .contact-full-box form .column-full { clear: both; width: 100%; padding: 10px; border-left: 1px #ccc solid; border-right: 1px #ccc solid; border-bottom: 1px #ccc solid; box-sizing: border-box;}
    
    .right-column-content .contact-full-box form .submit-bt { clear: both; width: 100%; margin: 30px 0 0 0; text-align: center;}
    .right-column-content .contact-full-box form .submit-bt input[type=submit] { padding: 8px 20px; color: #fff; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 8px; background-color: #886418; cursor: pointer;}
    
    
    
    /******** footer ********/
    
    footer { width: 100%; background-color: #fcf8f1;}
    
    footer .footer-nav-box { width: 100%; background-color: #cd9623;}
    footer .footer-nav-box .content-bx { width: 96%; margin: 0 auto; display: flex; justify-content:space-between; align-items: center;}
    footer .footer-nav-box .content-bx .nav-bx { width: 100%;}
    footer .footer-nav-box .content-bx .nav-bx ul { padding: 10px 0; margin: 0; list-style: none; display: flex; justify-content: center;}
    footer .footer-nav-box .content-bx .nav-bx ul li { padding: 0; margin: 0 30px 0 0; font-size: 0.9em;}
    footer .footer-nav-box .content-bx .nav-bx ul li a { color: #ffffff; text-decoration: none;}
    footer .footer-nav-box .content-bx .social-bx { display: none;}
    /*footer .footer-nav-box .content-bx .social-bx { width: 80px; color: #ffffff; font-size: 2em; text-align: right;}*/
    
    footer .footer-content-box { width: 96%; padding: 60px 0; margin: 0 auto; display: flex; justify-content: flex-start;}
    footer .footer-content-box .column-x2-box { width: 50%;}
    footer .footer-content-box .column-x2-box .title-bx { width: 100%; margin: 0 0 30px 0; display: flex; justify-content: flex-start; align-items: center;}
    footer .footer-content-box .column-x2-box .title { width: 150px; padding: 8px 0; margin: 0 20px 0 0; color: #ffffff; font-size: 1.2em; text-align: center; border-radius: 8px; background-color: #cd9623;}
    footer .footer-content-box .column-x2-box .infor { width: calc(100% - 170px); color: #cd9623; font-size: 0.7em;}
    footer .footer-content-box .column-x2-box .content-bx { width: 100%; color: #626262; font-size: 0.8em; line-height: 1.8em;}
    
    footer .footer-copyright-box { width: 96%; padding: 30px 0; margin: 0 auto; color: #626262; font-size: 0.8em; text-align: center; border-top: 1px #cd9623 solid;}
    
    footer #fix-bottom-bt { display: none;}
    
    
    
}


@media screen and (min-width: 768px) and (max-width: 1023px) {
    
    
    /******** side-bar-icon ********/
    
    #side-bar-box { width: 70px; position: fixed; top: 135px; right: 5px; z-index: 999;}
    #side-bar-box img { width: 70px; height: auto; cursor: pointer;}
    
    #side-bar-box .line-bx { display: none;}
    #side-bar-box .line-bx .content { width: 200px; padding: 5px 10px; color: #22ac38; font-size: 0.8em; text-align: center; border: 2px #22ac38 solid; border-radius: 6px; background-color: #ffffff; box-sizing: border-box; float: left;}
    #side-bar-box .line-bx .content img { width: 112px; height: auto; cursor: inherit;}
    #side-bar-box .line-bx .arrow { border-color: transparent transparent transparent #22ac38; border-style: solid solid solid solid; border-width: 10px; height: 0px; width: 0px; margin: 20px 0 0 0; float: left;}
    
    #side-bar-box .qrcode-bx { display: none;}
    #side-bar-box .qrcode-bx .content { width: 300px; padding: 5px 10px; color: #000; font-size: 0.8em; text-align: center; border: 2px #000 solid; border-radius: 6px; background-color: #ffffff; box-sizing: border-box; float: left; display: flex; justify-content: center; align-items: baseline;}
    #side-bar-box .qrcode-bx .content img { width: 110px; height: auto; margin: 0 10px;}
    #side-bar-box .qrcode-bx .arrow { border-color: transparent transparent transparent #000; border-style: solid solid solid solid; border-width: 10px; height: 0px; width: 0px; margin: 20px 0 0 0; float: left;}
    
    
    
    /******** header ********/
    
    header { width: 100%; height: auto;}
    
    header .hd-top-box { width: 96%; height: 80px; margin: 0 auto;}
    header .hd-top-box .logo-box { width: 100%; height: 80px; display: flex; justify-content: center; align-items: center; box-sizing: border-box;}
    header .hd-top-box .logo-box img.logo { width: auto; height: 40px; margin: 0 20px 0 0;}
    header .hd-top-box .logo-box img.title { }
    /*header .hd-top-box .email-box { width: 200px; padding: 5px 0; margin: 20px 0 0 0; box-sizing: border-box; color: #cd9623; text-align: center; border: 1px #cd9623 solid; border-radius: 6px; display: flex; justify-content: center; align-items: center; float: right;}
    header .hd-top-box .email-box font.email { font-size: 0.7em;}*/
    
    header nav#pc { display: none;}
    
    header nav#mobile { width: 100%; height: 50px; background-color: #cd9623; position: relative;}
    header nav#mobile .nav-mo-icon { width: 100%; padding: 8px 0 0 0; color: #ffffff; display: flex; justify-content: center; align-items: center;}
    header nav#mobile .nav-mo-icon .icon { width: 36px; margin: 0 5px 0 0; font-size: 2em;}
    header nav#mobile .nav-mo-icon .text { width: 80px; line-height: 1em;}
    header nav#mobile .nav-mo-icon .text font.text1 { font-size: 1.4em;}
    header nav#mobile .nav-mo-icon .text font.text2 { font-size: 1em;}
    header nav#mobile #nav-social-box { width: 100%; display: none; padding: 30px 0; background-color: #cd9623; position: absolute; top: 50px; left: 0; z-index: 9999;}
    header nav#mobile #nav-social-box ul { width: 100%; padding: 0; margin: 0; border-top: 1px #ffffff solid; list-style: none; display: block;}
    header nav#mobile #nav-social-box ul li { padding: 0; margin: 0; color: #ffffff; font-size: 1.1em; text-align: center; position: relative; cursor: pointer;}
    header nav#mobile #nav-social-box ul li:active { background-color: rgba(255,255,255,0.2);}
    header nav#mobile #nav-social-box ul li a { width: 100%; padding: 15px 0; color: #ffffff; text-decoration: none; display: block;}
    
    header .hd-top-box .top-social-bar { display: none;}
    
    header nav#mobile #nav-social-box .top-social-bar-mo { clear: both; width: 100%; margin: 30px auto 0 auto; font-size: 2.4em; background-color: #cd9623; position: relative; display: flex; justify-content: center;}
    header nav#mobile #nav-social-box .top-social-bar-mo a { padding: 0 10px; color: #fff; text-decoration: none; cursor: pointer; display: block;}
    header nav#mobile #nav-social-box .top-social-bar-mo .line-bx { width: 200px; display: none; position: absolute; top: -160px; left: calc(50% - 100px - 25px); z-index: 999;}
    header nav#mobile #nav-social-box .top-social-bar-mo .line-bx .content { width: 200px; padding: 5px 10px; color: #22ac38; font-size: 0.3em; text-align: center; border: 2px #22ac38 solid; border-radius: 6px; background-color: #ffffff; box-sizing: border-box;}
    header nav#mobile #nav-social-box .top-social-bar-mo .line-bx .content img { width: 112px; height: auto; cursor: inherit;}
    header nav#mobile #nav-social-box .top-social-bar-mo .line-bx .arrow { clear: both; border-color: #22ac38 transparent transparent transparent; border-style: solid solid solid solid; border-width: 10px; height: 0px; width: 0px; margin: 0 auto;}
    
    
    
    /******** banner ********/
    
    .banner-box { width: 100%; height: auto;}    
    .banner-box .qrcode-bx { width: 40%; position: absolute; top: 15%; left: 30%;}
    .banner-box .qrcode-bx .qrcode { width: calc(50% - 40px); margin: 0 20px; float: left;}
    .banner-box .qrcode-bx .qrcode img { width: 100%; height: auto;}
    
    .banner-box-mo { display: none;}
    
    
    
    /******** section #box-1 ********/
    
    section { width: 96%; padding: 80px 0; margin: 0 auto;}
    
    .section-title-box { width: 100%; margin: 0 0 20px 0;}
    .section-title-box .text { color: #cd9623; font-size: 1.6em; font-weight: 500; line-height: 0; text-align: center;}
    .section-title-box .underline { width: 40px; border-bottom: 2px #8a8000 solid; margin: 0 auto;}
    
    .section-marquee { width: 100%; padding: 10px 40px; margin: 0 0 40px 0; color: #1d2088; /*color: #a6937c;*/ letter-spacing: 0.1em; background-color: #fff7ea; border: 1px #a6937c solid; border-radius: 6px; box-sizing: border-box;}
    
    .section-column-x2 { width: 50%; float: left;}
    .section-column-x2 .section-column-x2-title { width: 90%; color: #e60012; font-weight: 500; margin: 0 auto 20px auto;}
    .section-column-x2 .form-box-yellow { width: 94%; font-size: 0.9em; border-top: 1px #cec21b solid; border-left: 1px #cec21b solid; border-right: 1px #cec21b solid; margin: 0 auto; display: flex; align-self: stretch;}
    .section-column-x2 .form-box-yellow:last-child { border-bottom: 1px #cec21b solid;}
    .section-column-x2 .form-box-yellow .caption-yellow { clear:both; width: 50%; padding: 10px 20px; color: #534e11; background-color: #fefbd4; border-right: 1px #cec21b solid; box-sizing: border-box;}
    .section-column-x2 .form-box-yellow .column-yellow { width: 50%; padding: 10px 20px; color: #313131; background-color: #ffffff; box-sizing: border-box;}
    .section-column-x2 .form-box-yellow .column-yellow font.biger, .form-box-blue .column-blue font.biger { font-size: 1.2em;}
    .section-column-x2 .form-box-blue { width: 94%; font-size: 0.9em; border-top: 1px #77b7d3 solid; border-left: 1px #77b7d3 solid; border-right: 1px #77b7d3 solid; margin: 0 auto; display: flex; align-self: stretch;}
    .section-column-x2 .form-box-blue:nth-child(5) { border-bottom: 1px #77b7d3 solid;}
    .section-column-x2 .form-box-blue .caption-blue { clear:both; width: 50%; padding: 10px 30px; color: #17314b; background-color: #e1f1f8; border-right: 1px #77b7d3 solid; box-sizing: border-box;}
    .section-column-x2 .form-box-blue .column-blue { width: 50%; padding: 10px 30px; color: #313131; background-color: #ffffff; box-sizing: border-box;}
    
    .section-column-x2 .section-infor-box { clear: both; width: 94%; padding: 20px 30px; margin: 40px auto 0 auto; color: #313131; font-size: 0.9em; border: 1px #cccccc solid; box-sizing: border-box;}
    
    
    
    /******** section #box-2 ********/
    
    section#box-2 { width: 100%; background: url(../images/section_2_bg.jpg) no-repeat; background-size: cover;}
    
    section#box-2 .section-box { width: 90%; margin: 0 auto; display: flex; justify-content: flex-start; flex-wrap: wrap;}
    section#box-2 .section-box .zone-bx { width: 240px; height: 120px; margin: 20px 30px; border-radius: 8px; background-color: #eeeeee; position: relative; overflow: hidden;}
    section#box-2 .section-box .zone-bx .text { color: #ffffff; font-size: 1.2em; font-weight: 500; z-index: 10; position: absolute; bottom: 20px; right: 20px;}
    section#box-2 .section-box .zone-bx img { width: 100%; height: auto; position: absolute; top: 0; left: 0; z-index: 9;}
    section#box-2 .section-box .zone-bx .black-mask { width: 240px; height: 120px; background-color: rgba(0,0,0,0); position: absolute; top: 0; left: 0; z-index: 11;}
    section#box-2 .section-box .zone-bx .black-mask:hover { background-color: rgba(0,0,0,0.4);}

    
    
    /******** section #box-3 ********/
    
    section#box-3 { width: 100%; padding: 120px 0; background: url(../images/section_3_bg.jpg) repeat;}
    
    section#box-3 .section-box { width: 90%; margin: 0 auto; display: flex; justify-content: space-around; flex-wrap: wrap;}
    section#box-3 .section-box .item-bx { width: 245px; height: 160px; margin: 40px 0; border-right: 5px #936b18 solid; border-bottom: 5px #936b18 solid; background-color: #dcab43; border-radius: 6px;}
    section#box-3 .section-box a { text-decoration: none;}
    section#box-3 .section-box .item-bx:hover { background-color: #be9439;}
    section#box-3 .section-box .item-bx .pic { width: 100%; height: 85px; padding: 20px 0 10px 0; text-align: center; box-sizing:}
    section#box-3 .section-box .item-bx .item { width: 100%; color: #e60012; font-size: 1.8em; line-height: 1em; text-align: center;}
    
    
    
    section#mobile, section#infor-1-bx-mo, section#infor-2-bx-mo { display: none;}
    
    
    
    /******** section #box-4 ********/
    
    section#box-4 { width: 100%; padding: 180px 0; background: url(../images/section_4_bg.jpg) bottom no-repeat; background-size: cover;}
    
    section#box-4 .section-box { width: 90%; margin: 0 auto; display: flex; justify-content: space-around; flex-wrap: wrap;}
    section#box-4 .section-box .service-bx { width: 310px; height: 300px; background-color: #ffffff; -moz-box-shadow:4px 4px 12px -4px rgba(20%,20%,40%,0.5); -webkit-box-shadow:4px 4px 12px -4px rgba(20%,20%,40%,0.5); box-shadow:4px 4px 12px -4px rgba(20%,20%,40%,0.5); position: relative;}
    section#box-4 .section-box .service-bx:nth-child(1), .service-bx:nth-child(2) { margin-bottom: 80px;}
    section#box-4 .section-box .service-bx .title { width: 100%; height: 60px; padding: 12px 20px 0 0; color: #ffffff; font-size: 1.4em; text-align: right; background-color: #cd9623; box-sizing: border-box;}
    section#box-4 .section-box .service-bx .text { width: 100%; padding: 50px 30px; color: #8e8e8e; line-height: 1.8em; box-sizing: border-box;}
    section#box-4 .section-box .service-bx .icon-1 { width: 101px; height: 120px; position: absolute; top: -40px; left: 25px;}
    section#box-4 .section-box .service-bx .icon-2 { width: 130px; height: 120px; position: absolute; top: -40px; left: 10px;}
    section#box-4 .section-box .service-bx .icon-3 { width: 120px; height: 120px; position: absolute; top: -40px; left: 15px;}
    section#box-4 .section-box .service-bx .icon-4 { width: 133px; height: 120px; position: absolute; top: -40px; left: 8px;}
    
    
    
    /******** section #box-5 ********/
    
    
    .section-title-s5-box { width: 100%; margin: 0 0 20px 0;}
    .section-title-s5-box .text { color: #cd9623; font-size: 1.6em; font-weight: 500; line-height: 0; text-align: center;}
    .section-title-s5-box .underline { width: 40px; border-bottom: 2px #8a8000 solid; margin: 0 auto;}
    .section-title-s5-box .icon-bx { display: none;}
    
    .section-sample-box { width: 100%; margin: 0 0 20px 0; display: flex; justify-content: space-between;}
    .section-sample-box .column-x2-bx { width: 49%;}
    .section-sample-box .column-x2-bx .title { width: 100%; padding: 5px 10px; color: #313131; font-weight: 500; background-color: #f1d599; box-sizing: border-box;}
    .section-sample-box .column-x2-bx .content-bx { width: 100%; height: calc(100% - 50px); padding: 20px; margin: 15px 0 0 0; background-color: #fbf6ec; box-sizing: border-box;}
    .section-sample-box .column-x2-bx .content-bx hr { width: 100%; margin: 10px 0; border: 1px #e9d09a solid;}
    .section-sample-box .column-x2-bx .content-bx .list-bx { width: 100%; display: flex; justify-content: flex-start; align-items: stretch;}
    .section-sample-box .column-x2-bx .content-bx .list-bx .list-num { width: 30px; padding: 7px 0; color: #ffffff; text-align: center; vertical-align: middle; background-color: #e60012;}
    .section-sample-box .column-x2-bx .content-bx .list-bx .list-text { width: calc(100% - 30px); padding: 7px 18px; color: #434343; font-size: 0.9em; box-sizing: border-box;}
    .section-sample-box .column-x2-bx .content-bx .list-bx .list-text .bigger { color: #313131; font-size: 1.3em;}
    
    .section-conclusion-box { width: 100%; margin: 0 0 20px 0;}
    .section-conclusion-box .title { width: 100%; padding: 5px 10px; margin: 0 0 15px 0; color: #313131; font-weight: 500; background-color: #f1d599; box-sizing: border-box;}
    .section-conclusion-box .content-bx { width: 100%; padding: 20px; margin: 15px 0 0 0; background-color: #fbf6ec; box-sizing: border-box;}
    .section-conclusion-box .list-bx { width: 100%; margin: 5px 0 0 0; font-size: 0.9em; display: flex; justify-content: flex-start; align-items: stretch;}
    .section-conclusion-box .list-bx .list-num { width: 30px; padding: 10px 0; color: #ffffff; text-align: center; background-color: #f39800;}
    .section-conclusion-box .list-bx .list-text { width: calc(100% - 30px); padding: 10px 20px; color: #434343; background-color: #fbf6ec; box-sizing: border-box;}
    
    
    
    /******** section #box-6 ********/
    
    section#box-6 { width: 96%; padding: 40px; margin: 0 auto 80px auto; border: 1px #ccc solid; border-radius: 20px; box-sizing: border-box;}
    
    section#box-6 ul#news-tabs { width: 100%; padding: 0; margin: 0 0 20px 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
    section#box-6 ul#news-tabs li { padding: 0; margin: 5px; font-size: 0.9em; line-height: 1em; text-align: center;}
    section#box-6 ul#news-tabs li a { width: 100px; padding: 8px 0; color: #666666; text-decoration: none; background-color: #eeeeee; border-radius: 4px; display: block;}
    section#box-6 ul#news-tabs li a:hover { color: #000;}
    section#box-6 ul#news-tabs li a.sel { color: #ffffff; background-color: #f39800;}    
    section#box-6 #news-panel { font-size: 0.9em;}
    section#box-6 #news-panel .news-source { width: 100%; color: #999; text-align: right; margin: 0 0 10px 0;}
    section#box-6 #news-panel ul { padding: 0; margin: 0; list-style: none; display: block;}
    section#box-6 #news-panel ul li { padding: 10px; margin: 0; background-color: #eee; box-sizing: border-box;}
    section#box-6 #news-panel ul li:nth-child(2n) { background-color: #fff;}
    section#box-6 #news-panel ul li a { color: #666666; text-decoration: none;}
    section#box-6 #news-panel ul li a:hover { text-decoration: underline;}
    
    
    
    /******** section #box-7 ********/
    
    section#box-7 { width: 96%; padding: 80px 0; margin: 0 auto;}
    
    section#box-7 ul.news-list-bx { width: 100%; padding: 0; margin: 60px 0 0 0; list-style: none; display: block;}
    section#box-7 ul.news-list-bx li { width: 100%; padding: 0; margin: 0 0 2px 0; color: #666666; display: flex; justify-content: flex-start; align-items: stretch; border-bottom: 1px #ccc dashed; box-sizing: border-box;}
    section#box-7 ul.news-list-bx li .date { width: 120px; padding: 10px; background-color: #efefef; box-sizing: border-box;}
    section#box-7 ul.news-list-bx li .title-content { width: calc(100% - 120px); padding: 10px; background-color: #fbf6ec; box-sizing: border-box;}
    section#box-7 ul.news-list-bx li .title-content a { color: #715314; text-decoration: none;}
    section#box-7 ul.news-list-bx li .title-content a:hover { text-decoration: underline;}
    
    section#box-7 .news-more-bx { width: 90%; margin: 20px 0 0 0; font-size: 0.9em; text-align: right;}
    section#box-7 .news-more-bx a { color: #666666; text-decoration: none;}
    section#box-7 .news-more-bx a:hover { text-decoration: underline;}
    
    .news-date { clear: both; width: 100%; margin: 20px 0 0 0; color: #666; font-size: 0.6em; font-weight: normal; text-align: right;}
    
    .go-back { clear: both; width: 100%; margin: 80px 0 0 0; text-align: center;}
    .go-back input[type=button] { padding: 10px 20px; color: #ffffff; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 6px; background-color: #886418; cursor: pointer;}
    
    
    
    /******** page banner ********/
    
    .page-banner-bx { width: 100%; height: auto; position: relative;}
    .page-banner-bx img { width: 100%; height: auto;}
    .page-banner-bx .sub-title-bx { width: 100%; height: auto; position: absolute; bottom: 0; left: 0;}
    .page-banner-bx .sub-title-bx .title-bx { width: 300px; height: 60px; padding: 15px 0 0 0; margin: 0 0 0 20px; color: #715314; font-size: 2.2em; font-weight: 500; text-align: center; border-radius: 20px 20px 0 0; background-color: #ffffff;}
    
    
    
    /******** left column ********/
    
    .left-column-nav { width: 96%; margin: 0 auto 40px auto;}
    .left-column-nav ul { padding: 0; margin: 0; list-style: none; display: block;}
    .left-column-nav ul li { padding: 0; margin: 0;}
    .left-column-nav ul li .sub-nav-box { width: 100%; height: 60px; margin: 0 0 15px 0; font-size: 1.2em; border: 5px #cd9623 solid; background-color: #ffffff; border-radius: 8px; box-sizing: border-box;}
    .left-column-nav ul li .sub-nav-box a { width: 100%; height: 50px; padding: 0 15px; line-height: 1em; text-decoration: none; display: flex; justify-content: space-between; align-items: center; box-sizing: border-box;}
    .left-column-nav ul li .sub-nav-box a.link:active { background-color: #f7f0e2;}
    .left-column-nav ul li .sub-nav-box a font.text { color: #cd9623;}
    .left-column-nav ul li .sub-nav-box a font.icon, a font.icon-mo { color: #f2deb3; font-size: 1.6em; font-weight: 600;}
    .left-column-nav ul li.mo .down-nav-box-mobile { display: none;}
    .left-column-nav ul li.mo .down-nav-box-mobile .down-nav-box { width: 90%; margin: 0 auto; font-size: 1em; border-bottom: 1px #d6d6d6 solid; box-sizing: border-box;}
    .left-column-nav ul li.mo .down-nav-box-mobile .down-nav-box a { width: 100%; padding: 7px 10px; text-decoration: none; display: flex; justify-content: space-between; align-items: center; box-sizing: border-box;}
    .left-column-nav ul li.mo .down-nav-box-mobile .down-nav-box a:active { background-color: #efefef;}
    .left-column-nav ul li.mo .down-nav-box-mobile .down-nav-box a font.text { color: #313131;}
    .left-column-nav ul li.mo .down-nav-box-mobile .down-nav-box a font.icon { color: #d3d3d3; font-size: 1.2em; font-weight: 600;}
    
    
    
    /******** company_about ********/
    
    .right-column-content { width: 96%; margin: 0 auto;}
    
    .right-column-content .content-box { width: 100%; padding: 60px 0 20px 0; color: #666666; line-height: 1.8em;}
    .right-column-content .content-box .pic-box { width: 100%;}
    .right-column-content .content-box .pic-box img { width: auto; height: 280px; margin: 30px 50px 0 0; float: left;}
    
    
    
    /******** company_service ********/
    
    .right-column-content .content-box .serv-item-box { width: 90%; padding: 10px 30px; margin: 0 auto 25px auto; color: #5a4210; background-color: #c6aa6e; border-radius: 10px; border-bottom: 5px #5a4210 solid; border-right: 5px #5a4210 solid; box-sizing: border-box; display: flex; align-items: center;}
    .right-column-content .content-box .serv-item-box font.icon { font-size: 2em;}
    .right-column-content .content-box .serv-item-box font.text { font-size: 1.2em;}
    
    
    
    /******** news reports video ********/
    
    .video-list-bx { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
    .video-list-bx .video-bx { width: calc(100% / 2 - 30px); margin: 0 15px 30px 15px;}
    .video-list-bx .video-bx .video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; width:100%; height: 0px; overflow: hidden;}
    .video-list-bx .video-bx .video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}    
    .video-list-bx .video-bx .video-title { width: 100%; margin: 10px 0 0 0; color: #666666; font-size: 0.9em; line-height: 1em;}
    
    .right-column-content ul.news-list-bx { width: 100%; padding: 0; margin: 60px 0 0 0; list-style: none; display: block;}
    .right-column-content ul.news-list-bx li { width: 100%; padding: 0; margin: 0 0 2px 0; color: #666666; display: flex; justify-content: flex-start; align-items: stretch; border-bottom: 1px #ccc dashed; box-sizing: border-box;}
    .right-column-content ul.news-list-bx li .date { width: 120px; padding: 10px; background-color: #efefef; box-sizing: border-box;}
    .right-column-content ul.news-list-bx li .title-content { width: calc(100% - 120px); padding: 10px; background-color: #fbf6ec; box-sizing: border-box;}
    .right-column-content ul.news-list-bx li .title-content a { color: #715314; text-decoration: none;}
    .right-column-content ul.news-list-bx li .title-content a:hover { text-decoration: underline;}
    
    
    
    /******** company_shop & spot ********/
    
    .right-column-content .content-box .title-item-bx { width: 100%; padding: 5px 30px; color: #cd9623; font-size: 1.6em; background-color: #f8efde; box-sizing: border-box;}
    .right-column-content .content-box .content-item-bx { width: 100%; padding: 20px 30px; box-sizing: border-box;}
    .right-column-content .content-box .content-item-bx img { max-width: 100%; height: auto; margin: 0 0 20px 0;}
    .right-column-content .content-box .content-item-bx .tran-pic-bx { width: 50%; margin: 15px 0; font-weight: 600; text-align: center; float: left;}
    .right-column-content .content-box .content-item-bx .tran-pic-bx img { width: 80%; height: auto;}
    .right-column-content .content-box .content-item-bx .tran-pic-bx .text { clear: both; width: 80%; margin: 0 auto;}
    
    .right-column-content .content-box .section-box { width: 100%; margin: 0 auto; display: flex; justify-content: flex-start; flex-wrap: wrap;}
    .right-column-content .content-box .section-box .zone-bx { width: 240px; height: 120px; margin: 20px 20px; border-radius: 8px; background-color: #eeeeee; position: relative; overflow: hidden;}
    .right-column-content .content-box .section-box .zone-bx .text { color: #ffffff; font-size: 1.2em; font-weight: 500; z-index: 10; position: absolute; bottom: 20px; right: 20px;}
    .right-column-content .content-box .section-box .zone-bx img { width: 100%; height: auto; position: absolute; top: 0; left: 0; z-index: 9;}
    .right-column-content .content-box .section-box .zone-bx .black-mask { width: 240px; height: 120px; background-color: rgba(0,0,0,0); position: absolute; top: 0; left: 0; z-index: 11;}
    .right-column-content .content-box .section-box .zone-bx .black-mask:hover { background-color: rgba(0,0,0,0.4);}
    
    
    
    /******** golden Q&A ********/
    
    .right-column-content .content-box dl#panel { width: 100%;}
    .right-column-content .content-box dl#panel dt { width: 100%; padding: 10px 20px; margin: 15px 0; color: #5a4210; background-color: #ccae70; border-radius: 8px; box-sizing: border-box; cursor: pointer;}
    .right-column-content .content-box dl#panel dt .q-bx { width: 40px; font-size: 1.6em; float: left;}
    .right-column-content .content-box dl#panel dt .text-bx { width: calc(100% - 80px); font-weight: 500; float: left;}
    .right-column-content .content-box dl#panel dt .minus-bx, .plus-bx { width: 40px; color: #ffffff; font-size: 1.6em; text-align: right; float: right;}
    .right-column-content .content-box dl#panel dd { padding: 20px 60px 20px 20px; box-sizing: border-box;}
    
    
    
    /******** count online ********/
    
    .left-column-nav .count-nav-box { width: 80%; padding: 15px 0; margin: 0 auto; color: #454545; font-size: 0.9em; border-bottom: 1px #cccccc solid; box-sizing: border-box;}
    .left-column-nav .count-1-nav-box { width: 80%; padding: 15px 0; margin: 0 auto; color: #454545; font-size: 0.9em; box-sizing: border-box;}
    .left-column-nav .count-nav-box .column-1-bx, .count-1-nav-box .column-1-bx { clear: both; width: 30%; text-align: right; float: left;}
    .left-column-nav .count-nav-box .column-2-bx, .count-1-nav-box .column-2-bx { width: 20%; text-align: center; float: left;}
    .left-column-nav .count-nav-box .column-3-bx, .count-1-nav-box .column-3-bx { width: 50%; float: left;}
    .left-column-nav .count-1-nav-box .def-title-bx { width: 100%; padding: 5px 0; margin: 0 0 10px 0; color: #454545; text-align: center; border: 1px #454545 solid; border-radius: 10px; background-color: #fbf1dc; box-sizing: border-box;}
    .left-column-nav .count-1-nav-box .def-caption-1-bx { clear: both; width: 45%; margin: 0 0 5px 0; float: left;}
    .left-column-nav .count-1-nav-box .def-column-1-bx { width: 55%; margin: 0 0 5px 0; float: left;}
    .left-column-nav .count-1-nav-box .def-caption-2-bx { clear: both; width: 70%; margin: 0 0 5px 0; float: left;}
    .left-column-nav .count-1-nav-box .def-column-2-bx { width: 30%; margin: 0 0 5px 0; float: left;}
    
    .right-column-content .content-box .count-sub-title-1-bx { clear: both; width: 100%; padding: 3px 10px; color: #5a4210; font-weight: 500; background-color: #ead4a6; box-sizing: border-box;}
    
    .right-column-content .content-box .count-content-bx { width: 100%; padding: 25px 0; border-bottom: 1px #d6d6d6 solid; box-sizing: border-box;}
    .right-column-content .content-box .count-content-bx .column-x4-bx { width: 50%; text-align: center; line-height: 2.4em; float: left;}
    .right-column-content .content-box .count-content-bx .column-x4-bx input[type=text] { width: 120px; padding: 5px 10px; color: #545454; font:0.9em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; text-align: center; background-color: #ffffff; border: 1px #999999 solid; border-radius: 6px;}
    .right-column-content .content-box .column-x2-left-bx { clear: both; width: 50%; padding: 20px 0; font-size: 0.9em; line-height: 3em; text-align: center; float: left;}
    .right-column-content .content-box .column-x2-right-bx { width: 50%; padding: 20px 0; text-align: center; float: left;}
    .right-column-content .content-box .column-x2-right-bx input[type=button] { width: 140px; padding: 10px; color: #ffffff; font:0.9em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 6px; background-color: #e60012; cursor: pointer;}
    
    .right-column-content .content-box .count-sub-title-2-bx { clear: both; width: 100%; padding: 3px 10px; color: #ffffff; font-weight: 500; background-color: #daae53; box-sizing: border-box;}
    
    .right-column-content .content-box .count-sub-title-3-bx { clear: both; width: 100%; padding: 3px 10px; color: #ffffff; font-weight: 500; background-color: #b1811d; box-sizing: border-box;}
    
    .right-column-content .content-box .count-notice-bx { clear: both; width: 100%; padding: 30px 0; color: #5a4210; font-size: 0.8em;}
    .right-column-content .content-box .standard-form { width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
    .right-column-content .content-box .standard-form .count-caption-1-bx { width: 35%; padding: 10px 10px 10px 60px; color: #5a4210; font-weight: 500; background-color: #f7e6c3; box-sizing: border-box;}
    .right-column-content .content-box .standard-form .count-caption-2-bx { width: 65%; padding: 10px; color: #5a4210; font-weight: 500; background-color: #f7e6c3; box-sizing: border-box;}
    .right-column-content .content-box .standard-form .count-column-1-bx, .count-column-1-1-bx { width: 35%; padding: 10px 10px 10px 60px; color: #313131; font-weight: 500; border-bottom: 1px #f7e6c3 solid; box-sizing: border-box;}
    .right-column-content .content-box .standard-form .count-column-2-bx, .count-column-2-1-bx { width: 65%; padding: 10px; color: #313131; border-bottom: 1px #f7e6c3 solid; box-sizing: border-box;}
    .right-column-content .content-box .standard-form .count-column-3-bx { width: 100%; padding: 10px; color: #999999; border-bottom: 1px #f7e6c3 solid; box-sizing: border-box;}
    .right-column-content .content-box .standard-form .count-column-2-1-bx ul { padding: 0 0 0 35px; margin: 0; list-style-type: cjk-ideographic; display: block;}
    .right-column-content .content-box .standard-form .count-column-2-1-bx ul li { padding: 0; margin: 0;}
    
    .right-column-content .content-box .contact-caption-bx { clear: both; width: 200px; padding: 10px 0 0 0; color: #313131; font-weight: 500; text-align: right; float: left;}
    .right-column-content .content-box .contact-column-bx { width: calc(100% - 200px); padding: 0 0 0 30px; margin: 0 0 10px 0; float: left; box-sizing: border-box;}
    .right-column-content .content-box .contact-column-bx input[type=text].contact { width: 340px; padding: 10px 20px; margin: 0 0 10px 0; color: #313131; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 1px #cccccc solid; border-radius: 6px; background-color: #ffffff;}
    .right-column-content .content-box .contact-column-bx select.contact { width: 380px; padding: 10px 20px; margin: 0 0 10px 0; color: #313131; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 1px #cccccc solid; border-radius: 6px; background-color: #ffffff;}
    .right-column-content .content-box .contact-column-bx .notice { clear: both; width: 100%; color: #999999; font-size: 0.9em; line-height: 1.4em;}
    .right-column-content .content-box .contact-notice-bx { clear: both; width: 100%; padding: 15px 80px; margin: 30px 0 0 0; color: #666666; font-size: 0.9em; line-height: 1.6em; background-color: #eeeeee; box-sizing: border-box;}
    .right-column-content .content-box .contact-button-bx { clear: both; width: 100%; margin: 30px 0 0 0; text-align: center;}
    .right-column-content .content-box .contact-button-bx input[type=button] { padding: 10px 40px; color: #ffffff; font:0.9em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 6px; background-color: #e60012; cursor: pointer;}
    
    
        
    /******** price inquiry ********/
    
    .right-column-content .content-box .price-form-caption-bx { width: 100%; font-size: 0.9em; text-align: center;}
    .right-column-content .content-box .price-form-caption-bx .caption-1-bx { width: 26%; height: 60px; padding: 15px 0 0 0; font-weight: 500; box-sizing: border-box; background-color: #f3e3c1; float: left;}
    .right-column-content .content-box .price-form-caption-bx .caption-2-bx { width: 37%; height: 60px; float: left;}
    .right-column-content .content-box .price-form-caption-bx .caption-2-bx .caption-2-1 { width: 100%; height: 30px; color: #ffffff; background-color: #cd9623;}
    .right-column-content .content-box .price-form-caption-bx .caption-2-bx .caption-2-2 { width: 25%; height: 30px; color: #313131; background-color: #e0c17f; float: left;}
    .right-column-content .content-box .price-form-caption-bx .caption-2-bx .caption-2-3 { width: 25%; height: 30px; color: #313131; background-color: #f6ecd6; float: left;}
    .right-column-content .content-box .price-form-column-bx { width: 100%; font-size: 0.9em; text-align: center; border-bottom: 1px #cccccc solid;}
    .right-column-content .content-box .price-form-column-bx .column-1-bx { width: 26%; padding: 10px 0; font-weight: 500; float: left;}
    .right-column-content .content-box .price-form-column-bx .column-2-bx { width: 37%; float: left;}
    .right-column-content .content-box .price-form-column-bx .column-2-bx .column-2-1 { width: 25%; padding: 10px 0; float: left;}
    
    
    
    /******** history price inquiry ********/
    
    .right-column-content .content-box .price-search-bx { width: 100%; padding: 40px 15px; margin: 0 0 80px 0; color: #5a4210; text-align: center; background-color: #faf4e9; box-sizing: border-box; display: flex; justify-content: center; align-items: center;}
    .right-column-content .content-box .price-search-bx select { width: 120px; padding: 6px 10px; margin: 0 10px 0 0; color: #5a4210; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 1px #cccccc solid; border-radius: 6px; background-color: #ffffff;}
    .right-column-content .content-box .price-search-bx input[type=button] { padding: 6px 20px; color: #ffffff; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 1px #cccccc solid; border-radius: 6px; background-color: #886418; cursor: pointer;}
    
    
    
    /******** international inquiry ********/
    
    .right-column-content .content-box .inter-inqu-input { width: 100%; text-align: center;}
    .right-column-content .content-box .inter-inqu-input input[type=button] { padding: 10px 20px; color: #ffffff; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 6px; background-color: #886418; cursor: pointer;}
    
    .right-column-content .content-box .golden-price-curve-bx { width: 100%; margin: 70px 0 60px 0; text-align: center; display: flex; justify-content: space-around; align-items: stretch; flex-wrap: wrap;}
    .right-column-content .content-box .golden-price-curve-bx .curve-bx { width: 360px; padding: 35px 0 0 0; margin: 0 0 60px 0; border: 1px #cd9623 solid; border-radius: 10px; position: relative;}
    .right-column-content .content-box .golden-price-curve-bx .curve-bx img { width: 90%; height: auto;}
    .right-column-content .content-box .golden-price-curve-bx .curve-bx .title-bx { width: 260px; padding: 4px 0; color: #ffffff; text-align: center; border-radius: 4px; background-color: #cd9623; position: absolute; top: -10px; left: calc(100% / 2 - 130px);}
    .right-column-content .content-box .golden-price-curve-bx .transaction-curve-bx { width: 100%; text-align: center;}
    .right-column-content .content-box .golden-price-curve-bx .transaction-curve-bx img { max-width: 90%; height: auto;}
    
    
    
    /******** produsts list ********/
    
    .left-column-nav ul li .prod-nav-box { width: 90%; margin: 0 auto;}
    .left-column-nav ul li .prod-nav-box ul#menu { padding: 0; margin: 0; list-style: none; display: block;}
    .left-column-nav ul li .prod-nav-box ul#menu li { padding: 0; margin: 0; font-size: 1em; background-color: #ffffff;}
    .left-column-nav ul li .prod-nav-box ul#menu li a { width: 100%; padding: 7px 10px; border-bottom: 1px #d6d6d6 solid; text-decoration: none; display: flex; justify-content: space-between; align-items: center; box-sizing: border-box; cursor: pointer;}
    .left-column-nav ul li .prod-nav-box ul#menu li a:hover { background-color: #efefef;}
    .left-column-nav ul li .prod-nav-box ul#menu li a.sel { background-color: #efefef;}
    .left-column-nav ul li .prod-nav-box ul#menu li a font.text { color: #313131;}
    .left-column-nav ul li .prod-nav-box ul#menu li a font.icon { color: #d3d3d3; font-size: 1.2em; font-weight: 600;}
    .left-column-nav ul li .prod-nav-box ul#menu li ul#popup { padding: 5px 0; margin: 0; border-bottom: 1px #d6d6d6 solid; background-color: #ffffff; list-style: none; display: block;}
    .left-column-nav ul li .prod-nav-box ul#menu li ul#popup li { padding: 0 auto; margin: 0;}
    .left-column-nav ul li .prod-nav-box ul#menu li ul#popup li a { width: 100%; padding: 7px 15px 7px 40px; color: #999999; border-bottom: 1px #d6d6d6 solid; text-decoration: none; border: 0; display: block;}
    .left-column-nav ul li .prod-nav-box ul#menu li ul#popup li a:hover { background-color: #faf1df;}
    .left-column-nav ul li .welcom-inquiry-tel { width: 90%; padding: 20px 0; margin: 20px auto; color: #5a4210; font-size: 0.9em; text-align: center; background-color: #f1e4c8;}
    
    .right-column-content .content-box .prod-infor-list-bx { width: 600px; margin: 0 auto}
    .right-column-content .content-box .prod-infor-list-bx .prod-bx { width: 220px; padding: 9px; margin: 0 40px 30px 40px; border: 1px #999999 solid; box-sizing: border-box; -moz-box-shadow:2px 2px 4px -1px rgba(20%,20%,40%,0.3); -webkit-box-shadow:2px 2px 4px -1px rgba(20%,20%,40%,0.3); box-shadow:2px 2px 4px -1px rgba(20%,20%,40%,0.3); float: left;}
    .right-column-content .content-box .prod-infor-list-bx .prod-bx .pic { width: 200px; height: 138px; overflow: hidden;}
    .right-column-content .content-box .prod-infor-list-bx .prod-bx .pic img { width: 100%; height: auto;}
    .right-column-content .content-box .prod-infor-list-bx .prod-bx .text { width: 100%; padding: 10px 0 0 0; color: #313131; font-size: 0.9em; text-align: center;}
    
    
    
    /******** site map ********/

    ul#sitemap-bx { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: space-around; align-items: stretch; flex-wrap: wrap;}
    ul#sitemap-bx li { padding: 0; margin: 15px; color: #666; font-size: 1.4em; font-weight: 600;}
    ul#sitemap-bx li a { color: #666; text-decoration: none;}
    ul#sitemap-bx li a:hover { text-decoration: underline;}
    ul#sitemap-bx li ul.class-sed { padding: 0 20px 0 0; margin: 0; list-style: none; display: block;}
    ul#sitemap-bx li ul.class-sed li { padding: 0; margin: 10px; color: #cd9623; font-size: 0.8em; font-weight: normal;}
    ul#sitemap-bx li ul.class-sed li a { color: #cd9623; text-decoration: none;}
    ul#sitemap-bx li ul.class-sed li a:hover { text-decoration: underline;}
    
    
    
    /******** event prize+winner list ********/
    
    .prize-list-bx { clear: both; width: 100%;}
    .prize-list-bx .prize-caption { width: 100%; font-weight: 500; text-align: center; border-bottom: 1px #ccc solid; background-color: #f1f1f1; display: flex; justify-content: flex-start; align-items: stretch;}
    .prize-list-bx .prize-caption .caption-1, .prize-column .column-1 { width: 25%; padding: 5px 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
    .prize-list-bx .prize-caption .caption-2, .prize-column .column-2 { width: 50%; padding: 5px 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
    .prize-list-bx .prize-caption .caption-3, .prize-column .column-3 { width: 25%; padding: 5px 10px; box-sizing: border-box;}
    .prize-list-bx .prize-column .column-5 { width: 75%; padding: 5px 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
    .prize-list-bx .prize-column { width: 100%; text-align: center; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
    .prize-list-bx .prize-column:last-child { border-top: 1px #ccc solid;}
    
    .winner-list-bx { clear: both; width: 100%;}
    .winner-list-bx .winner-caption { width: 100%; font-weight: 500; text-align: center; border-bottom: 1px #ccc solid; background-color: #f1f1f1; display: flex; justify-content: flex-start; align-items: stretch;}
    .winner-list-bx .winner-caption .caption-1, .winner-column .column-1 { width: 15%; padding: 5px 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
    .winner-list-bx .winner-caption .caption-2, .winner-column .column-2 { width: 25%; padding: 5px 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
    .winner-list-bx .winner-caption .caption-3, .winner-column .column-3 { width: 30%; padding: 5px 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
    .winner-list-bx .winner-caption .caption-4, .winner-column .column-4 { width: 30%; padding: 5px 10px; text-align: left; box-sizing: border-box;}
    .winner-list-bx .winner-column { width: 100%; text-align: center; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
    
    
    
    /******** contact ********/
    
    .right-column-content .contact-full-box { clear: both; width: 100%; margin: 60px 0 0 0; line-height: 1.6em;}
    
    .right-column-content .contact-full-box form a { color: #000; text-decoration: underline;}
    .right-column-content .contact-full-box form a:hover { color: #cd9623;}
    .right-column-content .contact-full-box form .form-table-box { width: 100%; border: 1px #ccc solid; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
    .right-column-content .contact-full-box form .form-table-box .caption { width: 180px; padding: 10px; font-weight: 600; text-align: right; background-color: #eee; border-right: 1px #ccc solid; border-bottom: 1px #ccc solid; box-sizing: border-box;}
    .right-column-content .contact-full-box form .form-table-box .column-1-1 { width: calc(100% - 180px); padding: 10px; text-align: left; border-bottom: 1px #ccc solid; box-sizing: border-box;}    
    .right-column-content .contact-full-box form .form-table-box .column-1-2 { width: calc(100% - 180px); padding: 10px; text-align: left; border-bottom: 1px #ccc solid; box-sizing: border-box;}
    .right-column-content .contact-full-box form .form-table-box .column-1-1 input, .column-1-1 select, .column-1-2 input { width: 100%; padding: 5px; color: #000; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 1px #999 solid; background-color: #fff; box-sizing: border-box;}
    .right-column-content .contact-full-box form .form-table-box .column-2-1 { display: none;}
    .right-column-content .contact-full-box form .form-table-box .column-2-1-mo { width: 100%; padding: 10px; border-bottom: 1px #ccc solid; box-sizing: border-box;}
    .right-column-content .contact-full-box form .form-table-box .column-2-2 { width: 100%; padding: 10px; box-sizing: border-box;}
    
    .right-column-content .contact-full-box form .column-full { clear: both; width: 100%; padding: 10px; border-left: 1px #ccc solid; border-right: 1px #ccc solid; border-bottom: 1px #ccc solid; box-sizing: border-box;}
    
    .right-column-content .contact-full-box form .submit-bt { clear: both; width: 100%; margin: 30px 0 0 0; text-align: center;}
    .right-column-content .contact-full-box form .submit-bt input[type=submit] { padding: 8px 20px; color: #fff; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 8px; background-color: #886418; cursor: pointer;}
    
    
    
    /******** footer ********/
    
    footer { width: 100%; background-color: #fcf8f1;}
    
    footer .footer-nav-box { width: 100%; background-color: #cd9623;}
    footer .footer-nav-box .content-bx { width: 96%; margin: 0 auto; display: flex; justify-content:space-between; align-items: center;}
    footer .footer-nav-box .content-bx .nav-bx { width: 100%;}
    footer .footer-nav-box .content-bx .nav-bx ul { padding: 10px 0; margin: 0; list-style: none; display: flex; justify-content: center; flex-wrap: wrap;}
    footer .footer-nav-box .content-bx .nav-bx ul li { padding: 0; margin: 0 15px 0 0; font-size: 0.9em;}
    footer .footer-nav-box .content-bx .nav-bx ul li a { color: #ffffff; text-decoration: none;}
    footer .footer-nav-box .content-bx .social-bx { display: none;}
    /*footer .footer-nav-box .content-bx .social-bx { width: 50px; color: #ffffff; font-size: 2em; text-align: right;}*/
    
    footer .footer-content-box { width: 96%; padding: 60px 0; margin: 0 auto; display: flex; justify-content: flex-start;}
    footer .footer-content-box .column-x2-box { width: 50%;}
    footer .footer-content-box .column-x2-box .title-bx { width: 100%; margin: 0 0 30px 0; display: flex; justify-content: flex-start; align-items: flex-start;}
    footer .footer-content-box .column-x2-box .title { width: 150px; padding: 8px 0; margin: 0 20px 0 0; color: #ffffff; font-size: 1.2em; text-align: center; border-radius: 8px; background-color: #cd9623;}
    footer .footer-content-box .column-x2-box .infor { width: calc(100% - 200px); color: #cd9623; font-size: 0.7em;}
    footer .footer-content-box .column-x2-box .content-bx { width: 100%; color: #626262; font-size: 0.8em; line-height: 1.8em;}
    
    footer .footer-copyright-box { width: 96%; padding: 30px 0; margin: 0 auto; color: #626262; font-size: 0.8em; text-align: center; border-top: 1px #cd9623 solid;}
    
    footer #fix-bottom-bt { display: none;}
    
    
    
}


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

    /******** produsts list ********/
    
    .left-column-nav ul li .prod-nav-box { width: 90%; margin: 0 auto;}
    .left-column-nav ul li .prod-nav-box ul#menu { padding: 0; margin: 0; list-style: none; display: block;}
    .left-column-nav ul li .prod-nav-box ul#menu li { padding: 0; margin: 0; font-size: 1em; background-color: #ffffff;}
    .left-column-nav ul li .prod-nav-box ul#menu li a { width: 100%; padding: 7px 10px; border-bottom: 1px #d6d6d6 solid; text-decoration: none; display: flex; justify-content: space-between; align-items: center; box-sizing: border-box; cursor: pointer;}
    .left-column-nav ul li .prod-nav-box ul#menu li a:hover { background-color: #efefef;}
    .left-column-nav ul li .prod-nav-box ul#menu li a.sel { background-color: #efefef;}
    .left-column-nav ul li .prod-nav-box ul#menu li a font.text { color: #313131;}
    .left-column-nav ul li .prod-nav-box ul#menu li a font.icon { color: #d3d3d3; font-size: 1.2em; font-weight: 600;}
    .left-column-nav ul li .prod-nav-box ul#menu li ul#popup { padding: 5px 0; margin: 0; border-bottom: 1px #d6d6d6 solid; background-color: #ffffff; list-style: none; display: block;}
    .left-column-nav ul li .prod-nav-box ul#menu li ul#popup li { padding: 0 auto; margin: 0;}
    .left-column-nav ul li .prod-nav-box ul#menu li ul#popup li a { width: 100%; padding: 7px 15px 7px 40px; color: #999999; border-bottom: 1px #d6d6d6 solid; text-decoration: none; border: 0; display: block;}
    .left-column-nav ul li .prod-nav-box ul#menu li ul#popup li a:hover { background-color: #faf1df;}
    .left-column-nav ul li .welcom-inquiry-tel { width: 90%; padding: 20px 0; margin: 20px auto; color: #5a4210; font-size: 0.9em; text-align: center; background-color: #f1e4c8;}
    
    .right-column-content .content-box .prod-infor-list-bx { width: 480px; margin: 0 auto}
    .right-column-content .content-box .prod-infor-list-bx .prod-bx { width: 220px; padding: 9px; margin: 0 5px 30px 5px; border: 1px #999999 solid; box-sizing: border-box; -moz-box-shadow:2px 2px 4px -1px rgba(20%,20%,40%,0.3); -webkit-box-shadow:2px 2px 4px -1px rgba(20%,20%,40%,0.3); box-shadow:2px 2px 4px -1px rgba(20%,20%,40%,0.3); float: left;}
    .right-column-content .content-box .prod-infor-list-bx .prod-bx .pic { width: 200px; height: 138px; overflow: hidden;}
    .right-column-content .content-box .prod-infor-list-bx .prod-bx .pic img { width: 100%; height: auto;}
    .right-column-content .content-box .prod-infor-list-bx .prod-bx .text { width: 100%; padding: 10px 0 0 0; color: #313131; font-size: 0.9em; text-align: center;}
    
    
    
}


@media screen and (max-width: 519px) {
    
    
    /******** produsts list ********/
    
    .left-column-nav ul li .prod-nav-box { width: 90%; margin: 0 auto;}
    .left-column-nav ul li .prod-nav-box ul#menu { padding: 0; margin: 0; list-style: none; display: block;}
    .left-column-nav ul li .prod-nav-box ul#menu li { padding: 0; margin: 0; font-size: 1em; background-color: #ffffff;}
    .left-column-nav ul li .prod-nav-box ul#menu li a { width: 100%; padding: 7px 10px; border-bottom: 1px #d6d6d6 solid; text-decoration: none; display: flex; justify-content: space-between; align-items: center; box-sizing: border-box; cursor: pointer;}
    .left-column-nav ul li .prod-nav-box ul#menu li a:hover { background-color: #efefef;}
    .left-column-nav ul li .prod-nav-box ul#menu li a.sel { background-color: #efefef;}
    .left-column-nav ul li .prod-nav-box ul#menu li a font.text { color: #313131;}
    .left-column-nav ul li .prod-nav-box ul#menu li a font.icon { color: #d3d3d3; font-size: 1.2em; font-weight: 600;}
    .left-column-nav ul li .prod-nav-box ul#menu li ul#popup { padding: 5px 0; margin: 0; border-bottom: 1px #d6d6d6 solid; background-color: #ffffff; list-style: none; display: block;}
    .left-column-nav ul li .prod-nav-box ul#menu li ul#popup li { padding: 0 auto; margin: 0;}
    .left-column-nav ul li .prod-nav-box ul#menu li ul#popup li a { width: 100%; padding: 7px 15px 7px 40px; color: #999999; border-bottom: 1px #d6d6d6 solid; text-decoration: none; border: 0; display: block;}
    .left-column-nav ul li .prod-nav-box ul#menu li ul#popup li a:hover { background-color: #faf1df;}
    .left-column-nav ul li .welcom-inquiry-tel { width: 90%; padding: 20px 0; margin: 20px auto; color: #5a4210; font-size: 0.9em; text-align: center; background-color: #f1e4c8;}
    
    .right-column-content .content-box .prod-infor-list-bx { width: 100%;}
    .right-column-content .content-box .prod-infor-list-bx .prod-bx { width: 220px; padding: 9px; margin: 0 auto 30px auto; border: 1px #999999 solid; box-sizing: border-box; -moz-box-shadow:2px 2px 4px -1px rgba(20%,20%,40%,0.3); -webkit-box-shadow:2px 2px 4px -1px rgba(20%,20%,40%,0.3); box-shadow:2px 2px 4px -1px rgba(20%,20%,40%,0.3);}
    .right-column-content .content-box .prod-infor-list-bx .prod-bx .pic { width: 200px; height: 138px; overflow: hidden;}
    .right-column-content .content-box .prod-infor-list-bx .prod-bx .pic img { width: 100%; height: auto;}
    .right-column-content .content-box .prod-infor-list-bx .prod-bx .text { width: 100%; padding: 10px 0 0 0; color: #313131; font-size: 0.9em; text-align: center;}
    
    
    
}


@media screen and (max-width: 767px) {
    
    
    /******** side-bar-icon ********/
    
    #side-bar-box { width: 70px; position: fixed; top: 320px; right: 5px; z-index: 999;}
    #side-bar-box img { width: 70px; height: auto; cursor: pointer;}
    
    #side-bar-box .line-bx { display: none;}
    #side-bar-box .line-bx .content { width: 200px; padding: 5px 10px; color: #22ac38; font-size: 0.8em; text-align: center; border: 2px #22ac38 solid; border-radius: 6px; background-color: #ffffff; box-sizing: border-box; float: left;}
    #side-bar-box .line-bx .content img { width: 112px; height: auto; cursor: inherit;}
    #side-bar-box .line-bx .arrow { border-color: transparent transparent transparent #22ac38; border-style: solid solid solid solid; border-width: 10px; height: 0px; width: 0px; margin: 20px 0 0 0; float: left;}
    
    #side-bar-box .qrcode-bx { display: none;}
    #side-bar-box .qrcode-bx .content { width: 200px; padding: 5px 10px; color: #000; font-size: 0.8em; text-align: center; border: 2px #000 solid; border-radius: 6px; background-color: #ffffff; box-sizing: border-box; float: left;}
    #side-bar-box .qrcode-bx .content img { width: 110px; height: auto; margin: 10px auto;}
    #side-bar-box .qrcode-bx .arrow { border-color: transparent transparent transparent #000; border-style: solid solid solid solid; border-width: 10px; height: 0px; width: 0px; margin: 20px 0 0 0; float: left;}
    
    
    
    /******** header ********/
    
    header { width: 100%; height: auto;}
    
    header .hd-top-box { width: 96%; height: 80px; margin: 0 auto;}
    header .hd-top-box .logo-box { width: 100%; height: 80px; display: flex; justify-content: center; align-items: center; box-sizing: border-box;}
    header .hd-top-box .logo-box img.logo { width: auto; height: 40px; margin: 0 20px 0 0;}
    header .hd-top-box .logo-box img.title { }
    /*header .hd-top-box .email-box { width: 200px; padding: 5px 0; margin: 20px 0 0 0; box-sizing: border-box; color: #cd9623; text-align: center; border: 1px #cd9623 solid; border-radius: 6px; display: flex; justify-content: center; align-items: center; float: right;}
    header .hd-top-box .email-box font.email { font-size: 0.7em;}*/
    
    header nav#pc { display: none;}
    
    header nav#mobile { width: 100%; height: 50px; background-color: #cd9623; position: relative;}
    header nav#mobile .nav-mo-icon { width: 100%; padding: 8px 0 0 0; color: #ffffff; display: flex; justify-content: center; align-items: center;}
    header nav#mobile .nav-mo-icon .icon { width: 36px; margin: 0 5px 0 0; font-size: 2em;}
    header nav#mobile .nav-mo-icon .text { width: 80px; line-height: 1em;}
    header nav#mobile .nav-mo-icon .text font.text1 { font-size: 1.4em;}
    header nav#mobile .nav-mo-icon .text font.text2 { font-size: 1em;}
    header nav#mobile #nav-social-box { width: 100%; display: none; padding: 30px 0; background-color: #cd9623; position: absolute; top: 50px; left: 0; z-index: 9999;}
    header nav#mobile #nav-social-box ul { width: 100%; padding: 0; margin: 0; border-top: 1px #ffffff solid; list-style: none; display: block;}
    header nav#mobile #nav-social-box ul li { padding: 0; margin: 0; color: #ffffff; font-size: 1.1em; text-align: center; position: relative; cursor: pointer;}
    header nav#mobile #nav-social-box ul li:active { background-color: rgba(255,255,255,0.2);}
    header nav#mobile #nav-social-box ul li a { width: 100%; padding: 15px 0; color: #ffffff; text-decoration: none; display: block;}
    
    header .hd-top-box .top-social-bar { display: none;}
    
    header nav#mobile #nav-social-box .top-social-bar-mo { clear: both; width: 100%; margin: 30px auto 0 auto; font-size: 2.4em; background-color: #cd9623; position: relative; display: flex; justify-content: center;}
    header nav#mobile #nav-social-box .top-social-bar-mo a { padding: 0 10px; color: #fff; text-decoration: none; cursor: pointer; display: block;}
    header nav#mobile #nav-social-box .top-social-bar-mo .line-bx { width: 200px; display: none; position: absolute; top: -160px; left: calc(50% - 100px - 25px); z-index: 999;}
    header nav#mobile #nav-social-box .top-social-bar-mo .line-bx .content { width: 200px; padding: 5px 10px; color: #22ac38; font-size: 0.3em; text-align: center; border: 2px #22ac38 solid; border-radius: 6px; background-color: #ffffff; box-sizing: border-box;}
    header nav#mobile #nav-social-box .top-social-bar-mo .line-bx .content img { width: 112px; height: auto; cursor: inherit;}
    header nav#mobile #nav-social-box .top-social-bar-mo .line-bx .arrow { clear: both; border-color: #22ac38 transparent transparent transparent; border-style: solid solid solid solid; border-width: 10px; height: 0px; width: 0px; margin: 0 auto;}
    
    
    
    /******** banner ********/
    
    .banner-box { display: none;}
    
    .banner-box-mo { width: 100%; height: auto;}
    .banner-box-mo .qrcode-bx { width: 90%; position: absolute; top: 15%; left: 5%;}
    .banner-box-mo .qrcode-bx .qrcode { width: calc(50% - 40px); margin: 0 20px; float: left;}
    .banner-box-mo .qrcode-bx .qrcode img { width: 100%; height: auto;}
    
    
    
    /******** section #box-1 ********/
    
    section { width: 96%; padding: 80px 0; margin: 0 auto;}
    
    .section-title-box { width: 100%; margin: 0 0 20px 0;}
    .section-title-box .text { color: #cd9623; font-size: 1.6em; font-weight: 500; line-height: 0; text-align: center;}
    .section-title-box .underline { width: 40px; border-bottom: 2px #8a8000 solid; margin: 0 auto;}
    
    .section-marquee { width: 100%; padding: 10px 40px; margin: 0 0 40px 0; color: #1d2088; /*color: #a6937c;*/ letter-spacing: 0.1em; background-color: #fff7ea; border: 1px #a6937c solid; border-radius: 6px; box-sizing: border-box;}
    
    .section-column-x2 { width: 96%; margin: 0 auto 30px auto;}
    .section-column-x2 .section-column-x2-title { width: 90%; color: #e60012; font-weight: 500; margin: 0 auto 20px auto;}
    .section-column-x2 .form-box-yellow { width: 94%; font-size: 0.9em; border-top: 1px #cec21b solid; border-left: 1px #cec21b solid; border-right: 1px #cec21b solid; margin: 0 auto; display: flex; align-self: stretch;}
    .section-column-x2 .form-box-yellow:last-child { border-bottom: 1px #cec21b solid;}
    .section-column-x2 .form-box-yellow .caption-yellow { clear:both; width: 50%; padding: 10px 20px; color: #534e11; background-color: #fefbd4; border-right: 1px #cec21b solid; box-sizing: border-box;}
    .section-column-x2 .form-box-yellow .column-yellow { width: 50%; padding: 10px 20px; color: #313131; background-color: #ffffff; box-sizing: border-box;}
    .section-column-x2 .form-box-yellow .column-yellow font.biger, .form-box-blue .column-blue font.biger { font-size: 1.2em;}
    .section-column-x2 .form-box-blue { width: 94%; font-size: 0.9em; border-top: 1px #77b7d3 solid; border-left: 1px #77b7d3 solid; border-right: 1px #77b7d3 solid; margin: 0 auto; display: flex; align-self: stretch;}
    .section-column-x2 .form-box-blue:nth-child(5) { border-bottom: 1px #77b7d3 solid;}
    .section-column-x2 .form-box-blue .caption-blue { clear:both; width: 50%; padding: 10px 30px; color: #17314b; background-color: #e1f1f8; border-right: 1px #77b7d3 solid; box-sizing: border-box;}
    .section-column-x2 .form-box-blue .column-blue { width: 50%; padding: 20px 30px; color: #313131; background-color: #ffffff; box-sizing: border-box;}
    
    .section-column-x2 .section-infor-box { clear: both; width: 94%; padding: 20px 30px; margin: 40px auto 0 auto; color: #313131; font-size: 0.9em; border: 1px #cccccc solid; box-sizing: border-box;}
    
    
    
    /******** section #box-2 ********/
    
    section#box-2 { display: none;}

    
    
    /******** section #box-3 ********/
    
    section#box-3 { display: none;}
    
    
    
    /******** section #mobile ********/
    
    section#mobile { width: 100%; padding: 60px 10px; margin: 0 auto; background-color: #efefef; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap; box-sizing: border-box;}
    section#mobile .nav-items-bx { width: calc(100% / 3 - 12px); margin: 10px 6px; text-align: center; border: 0; background-color: #cd9623; background: linear-gradient(225deg, transparent 15px, #cd9623 0); box-sizing: border-box;}
    section#mobile .nav-items-bx a { width: 100%; padding: 15px 8px; color: #ffffff; font-weight: 500; text-decoration: none; box-sizing: border-box; display: block;}
    section#mobile .nav-items-bx font.icon { font-size: 3em;}
    
    section#infor-1-bx-mo, section#infor-2-bx-mo { width: 96%; padding: 0; margin: 20px auto 0 auto; border: 2px #cccccc solid; border-radius: 10px; box-sizing: border-box; overflow: hidden;}
    section#infor-1-bx-mo .infor { width: 100%; padding: 0 20px; margin: 20px 0 0 0; color: #cd9623; font-size: 0.9em; box-sizing: border-box;}
    section#infor-1-bx-mo .content-bx, section#infor-2-bx-mo .content-bx { width: 100%; padding: 20px; color: #818181; font-size: 0.9em; line-height: 1.6em; box-sizing: border-box;}
    section#infor-1-bx-mo .title, section#infor-2-bx-mo .title { width: 100%; padding: 10px; color: #ffffff; text-align: center; font-size: 1.4em; background-color: #cd9623; box-sizing: border-box;}
    
    
    
    /******** section #box-4 ********/
    
    section#box-4 { display: none;}
    
    
    
    /******** section #box-5 ********/
    
    .section-title-s5-box { width: calc(100% - 20px); padding: 10px; margin: 0 10px; border: 2px #cd9623 solid; border-radius: 10px; background-color: #ffffff; box-sizing: border-box; display: flex; justify-content: center; align-items: center;}
    .section-title-s5-box .text { color: #cd9623; font-size: 1.6em; font-weight: 500; text-align: center;}
    .section-title-s5-box .underline { display: none;}
    .section-title-s5-box .icon-bx { margin: 0 0 0 10px; color: #cd9623; font-size: 1.6em;}
    
    .section-sample-box-mo { display: none;}
    
    .section-sample-box { width: 100%; margin: 0 0 20px 0;}
    .section-sample-box .column-x2-bx { width: 96%; margin: 0 auto 15px auto;}
    .section-sample-box .column-x2-bx .title { width: 100%; padding: 5px 10px; color: #313131; font-weight: 500; background-color: #f1d599; box-sizing: border-box;}
    .section-sample-box .column-x2-bx .content-bx { width: 100%; height: calc(100% - 50px); padding: 20px; margin: 15px 0 0 0; background-color: #fbf6ec; box-sizing: border-box;}
    .section-sample-box .column-x2-bx .content-bx hr { width: 100%; margin: 10px 0; border: 1px #e9d09a solid;}
    .section-sample-box .column-x2-bx .content-bx .list-bx { width: 100%; display: flex; justify-content: flex-start; align-items: stretch;}
    .section-sample-box .column-x2-bx .content-bx .list-bx .list-num { width: 30px; padding: 7px 0; color: #ffffff; text-align: center; vertical-align: middle; background-color: #e60012;}
    .section-sample-box .column-x2-bx .content-bx .list-bx .list-text { width: calc(100% - 30px); padding: 7px 18px; color: #434343; font-size: 0.9em; box-sizing: border-box;}
    .section-sample-box .column-x2-bx .content-bx .list-bx .list-text .bigger { color: #313131; font-size: 1.3em;}
    
    .section-conclusion-box { width: 100%; margin: 0 0 20px 0;}
    .section-conclusion-box .title { width: 100%; padding: 5px 10px; margin: 0 0 15px 0; color: #313131; font-weight: 500; background-color: #f1d599; box-sizing: border-box;}
    .section-conclusion-box .content-bx { width: 100%; padding: 20px; margin: 15px 0 0 0; background-color: #fbf6ec; box-sizing: border-box;}
    .section-conclusion-box .list-bx { width: 100%; margin: 5px 0 0 0; font-size: 0.9em; display: flex; justify-content: flex-start; align-items: stretch;}
    .section-conclusion-box .list-bx .list-num { width: 30px; padding: 10px 0; color: #ffffff; text-align: center; background-color: #f39800;}
    .section-conclusion-box .list-bx .list-text { width: calc(100% - 30px); padding: 10px 20px; color: #434343; background-color: #fbf6ec; box-sizing: border-box;}
    
    
    
    /******** section #box-6 ********/
    
    section#box-6 { width: 96%; padding: 30px; margin: 0 auto 80px auto; border: 1px #ccc solid; border-radius: 20px; box-sizing: border-box;}
    
    section#box-6 ul#news-tabs { width: 100%; padding: 0; margin: 0 0 20px 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
    section#box-6 ul#news-tabs li { padding: 0; margin: 8px; font-size: 0.9em; line-height: 1em; text-align: center;}
    section#box-6 ul#news-tabs li a { width: 100px; padding: 10px 0; color: #666666; text-decoration: none; background-color: #eeeeee; border-radius: 4px; display: block;}
    section#box-6 ul#news-tabs li a:hover { color: #000;}
    section#box-6 ul#news-tabs li a.sel { color: #ffffff; background-color: #f39800;}    
    section#box-6 #news-panel { font-size: 0.9em;}
    section#box-6 #news-panel .news-source { width: 100%; color: #999; text-align: right; margin: 0 0 10px 0;}
    section#box-6 #news-panel ul { padding: 0; margin: 0; list-style: none; display: block;}
    section#box-6 #news-panel ul li { padding: 10px; margin: 0; background-color: #eee; box-sizing: border-box;}
    section#box-6 #news-panel ul li:nth-child(2n) { background-color: #fff;}
    section#box-6 #news-panel ul li a { color: #666666; text-decoration: none;}
    section#box-6 #news-panel ul li a:hover { text-decoration: underline;}
    
    
    
    /******** section #box-7 ********/
    
    section#box-7 { width: 96%; padding: 80px 0; margin: 0 auto;}
    
    section#box-7 ul.news-list-bx { width: 100%; padding: 0; margin: 60px 0 0 0; list-style: none; display: block;}
    section#box-7 ul.news-list-bx li { width: 100%; padding: 0; margin: 0 0 2px 0; color: #666666;}
    section#box-7 ul.news-list-bx li .date { width: 100%; padding: 10px; background-color: #efefef; box-sizing: border-box;}
    section#box-7 ul.news-list-bx li .title-content { width: 100%; padding: 10px; background-color: #fbf6ec; box-sizing: border-box;}
    section#box-7 ul.news-list-bx li .title-content a { color: #715314; text-decoration: none;}
    section#box-7 ul.news-list-bx li .title-content a:hover { text-decoration: underline;}
    
    section#box-7 .news-more-bx { width: 90%; margin: 20px 0 0 0; font-size: 0.9em; text-align: right;}
    section#box-7 .news-more-bx a { color: #666666; text-decoration: none;}
    section#box-7 .news-more-bx a:hover { text-decoration: underline;}
    
    .news-date { clear: both; width: 100%; margin: 20px 0 0 0; color: #666; font-size: 0.6em; font-weight: normal; text-align: right;}
    
    .go-back { clear: both; width: 100%; margin: 80px 0 0 0; text-align: center;}
    .go-back input[type=button] { padding: 10px 20px; color: #ffffff; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 6px; background-color: #886418; cursor: pointer;}
    
    
    
    /******** page banner ********/
    
    .page-banner-bx { width: 100%; height: auto; overflow: hidden; position: relative;}
    .page-banner-bx img { width: auto; height: 160px;}
    .page-banner-bx .sub-title-bx { width: 100%; height: auto; position: absolute; bottom: 0; left: 0;}
    .page-banner-bx .sub-title-bx .title-bx { width: 300px; height: 60px; padding: 15px 0 0 0; margin: 0 auto; color: #715314; font-size: 2.2em; font-weight: 500; text-align: center; border-radius: 20px 20px 0 0; background-color: #ffffff;}
    
    
    
    /******** left column ********/
    
    .left-column-nav { width: 96%; margin: 0 auto 40px auto;}
    .left-column-nav ul { padding: 0; margin: 0; list-style: none; display: block;}
    .left-column-nav ul li { padding: 0; margin: 0;}
    .left-column-nav ul li .sub-nav-box { width: 100%; height: 60px; margin: 0 0 15px 0; font-size: 1.2em; border: 5px #cd9623 solid; background-color: #ffffff; border-radius: 8px; box-sizing: border-box;}
    .left-column-nav ul li .sub-nav-box a { width: 100%; height: 50px; padding: 0 15px; line-height: 1em; text-decoration: none; display: flex; justify-content: space-between; align-items: center; box-sizing: border-box;}
    .left-column-nav ul li .sub-nav-box a.link:active { background-color: #f7f0e2;}
    .left-column-nav ul li .sub-nav-box a font.text { color: #cd9623;}
    .left-column-nav ul li .sub-nav-box a font.icon, a font.icon-mo { color: #f2deb3; font-size: 1.6em; font-weight: 600;}
    .left-column-nav ul li.mo .down-nav-box-mobile { display: none;}
    .left-column-nav ul li.mo .down-nav-box-mobile .down-nav-box { width: 90%; margin: 0 auto; font-size: 1em; border-bottom: 1px #d6d6d6 solid; box-sizing: border-box;}
    .left-column-nav ul li.mo .down-nav-box-mobile .down-nav-box a { width: 100%; padding: 7px 10px; text-decoration: none; display: flex; justify-content: space-between; align-items: center; box-sizing: border-box;}
    .left-column-nav ul li.mo .down-nav-box-mobile .down-nav-box a:active { background-color: #efefef;}
    .left-column-nav ul li.mo .down-nav-box-mobile .down-nav-box a font.text { color: #313131;}
    .left-column-nav ul li.mo .down-nav-box-mobile .down-nav-box a font.icon { color: #d3d3d3; font-size: 1.2em; font-weight: 600;}
    
    
    
    /******** company_about ********/
    
    .right-column-content { width: 96%; margin: 0 auto;}
        
    .right-column-content .content-box { width: 100%; padding: 60px 0 20px 0; color: #666666; line-height: 1.8em;}
    .right-column-content .content-box .pic-box { width: 100%;}
    .right-column-content .content-box .pic-box img { max-width: 90%; width: auto; height: auto; min-height: 280px; margin: 30px 30px 0 0;}
    
    
    
    /******** company_service ********/
    
    .right-column-content .content-box .serv-item-box { width: 90%; padding: 10px 30px; margin: 0 auto 25px auto; color: #5a4210; background-color: #c6aa6e; border-radius: 10px; border-bottom: 5px #5a4210 solid; border-right: 5px #5a4210 solid; box-sizing: border-box; display: flex; align-items: center;}
    .right-column-content .content-box .serv-item-box font.icon { font-size: 2em;}
    .right-column-content .content-box .serv-item-box font.text { font-size: 1.2em;}
    
    
    
    /******** news reports video ********/
    
    .video-list-bx { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
    .video-list-bx .video-bx { width: calc(100% - 30px); margin: 0 15px 30px 15px;}
    .video-list-bx .video-bx .video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; width:100%; height: 0px; overflow: hidden;}
    .video-list-bx .video-bx .video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}    
    .video-list-bx .video-bx .video-title { width: 100%; margin: 10px 0 0 0; color: #666666; font-size: 0.9em; line-height: 1em;}
    
    .right-column-content ul.news-list-bx { width: 100%; padding: 0; margin: 60px 0 0 0; list-style: none; display: block;}
    .right-column-content ul.news-list-bx li { width: 100%; padding: 0; margin: 0 0 2px 0; color: #666666;}
    .right-column-content ul.news-list-bx li .date { width: 100%; padding: 10px; background-color: #efefef; box-sizing: border-box;}
    .right-column-content ul.news-list-bx li .title-content { width: 100%; padding: 10px; background-color: #fbf6ec; box-sizing: border-box;}
    .right-column-content ul.news-list-bx li .title-content a { color: #715314; text-decoration: none;}
    .right-column-content ul.news-list-bx li .title-content a:hover { text-decoration: underline;}
    
    
    
    /******** company_shop & spot ********/
    
    .right-column-content .content-box .title-item-bx { width: 100%; padding: 5px 30px; color: #cd9623; font-size: 1.6em; background-color: #f8efde; box-sizing: border-box;}
    .right-column-content .content-box .content-item-bx { width: 100%; padding: 20px 30px; box-sizing: border-box;}
    .right-column-content .content-box .content-item-bx img { max-width: 100%; height: auto; margin: 0 0 20px 0;}
    .right-column-content .content-box .content-item-bx .tran-pic-bx { width: 100%; margin: 15px 0; font-weight: 600; text-align: center; float: left;}
    .right-column-content .content-box .content-item-bx .tran-pic-bx img { width: 90%; height: auto;}
    .right-column-content .content-box .content-item-bx .tran-pic-bx .text { clear: both; width: 90%; margin: 0 auto;}
    
    .right-column-content .content-box .section-box { width: 100%; margin: 0 auto; display: flex; justify-content: flex-start; flex-wrap: wrap;}
    .right-column-content .content-box .section-box .zone-bx { width: 240px; height: 120px; margin: 20px 30px; border-radius: 8px; background-color: #eeeeee; position: relative; overflow: hidden;}
    .right-column-content .content-box .section-box .zone-bx .text { color: #ffffff; font-size: 1.2em; font-weight: 500; z-index: 10; position: absolute; bottom: 20px; right: 20px;}
    .right-column-content .content-box .section-box .zone-bx img { width: 100%; height: auto; position: absolute; top: 0; left: 0; z-index: 9;}
    .right-column-content .content-box .section-box .zone-bx .black-mask { width: 240px; height: 120px; background-color: rgba(0,0,0,0); position: absolute; top: 0; left: 0; z-index: 11;}
    .right-column-content .content-box .section-box .zone-bx .black-mask:hover { background-color: rgba(0,0,0,0.4);}
    
    
    
    /******** golden Q&A ********/
    
    .right-column-content .content-box dl#panel { width: 100%;}
    .right-column-content .content-box dl#panel dt { width: 100%; padding: 10px 20px; margin: 15px 0; color: #5a4210; background-color: #ccae70; border-radius: 8px; box-sizing: border-box; cursor: pointer;}
    .right-column-content .content-box dl#panel dt .q-bx { width: 40px; font-size: 1.6em; float: left;}
    .right-column-content .content-box dl#panel dt .text-bx { width: calc(100% - 80px); font-weight: 500; float: left;}
    .right-column-content .content-box dl#panel dt .minus-bx, .plus-bx { width: 40px; color: #ffffff; font-size: 1.6em; text-align: right; float: right;}
    .right-column-content .content-box dl#panel dd { padding: 20px 40px 20px 0; box-sizing: border-box;}
    
    
    
    /******** count online ********/
    
    .left-column-nav .count-nav-box { width: 80%; padding: 15px 0; margin: 0 auto; color: #454545; font-size: 0.9em; border-bottom: 1px #cccccc solid; box-sizing: border-box;}
    .left-column-nav .count-1-nav-box { width: 80%; padding: 15px 0; margin: 0 auto; color: #454545; font-size: 0.9em; box-sizing: border-box;}
    .left-column-nav .count-nav-box .column-1-bx, .count-1-nav-box .column-1-bx { clear: both; width: 30%; text-align: right; float: left;}
    .left-column-nav .count-nav-box .column-2-bx, .count-1-nav-box .column-2-bx { width: 20%; text-align: center; float: left;}
    .left-column-nav .count-nav-box .column-3-bx, .count-1-nav-box .column-3-bx { width: 50%; float: left;}
    .left-column-nav .count-1-nav-box .def-title-bx { width: 100%; padding: 5px 0; margin: 0 0 10px 0; color: #454545; text-align: center; border: 1px #454545 solid; border-radius: 10px; background-color: #fbf1dc; box-sizing: border-box;}
    .left-column-nav .count-1-nav-box .def-caption-1-bx { clear: both; width: 45%; margin: 0 0 5px 0; float: left;}
    .left-column-nav .count-1-nav-box .def-column-1-bx { width: 55%; margin: 0 0 5px 0; float: left;}
    .left-column-nav .count-1-nav-box .def-caption-2-bx { clear: both; width: 70%; margin: 0 0 5px 0; float: left;}
    .left-column-nav .count-1-nav-box .def-column-2-bx { width: 30%; margin: 0 0 5px 0; float: left;}
        
    .right-column-content .content-box .count-sub-title-1-bx { clear: both; width: 100%; padding: 3px 10px; color: #5a4210; font-weight: 500; background-color: #ead4a6; box-sizing: border-box;}
    
    .right-column-content .content-box .count-content-bx { width: 100%; padding: 25px 0; border-bottom: 1px #d6d6d6 solid; box-sizing: border-box;}
    .right-column-content .content-box .count-content-bx .column-x4-bx { width: 50%; text-align: center; line-height: 2.4em; float: left;}
    .right-column-content .content-box .count-content-bx .column-x4-bx input[type=text] { width: 120px; padding: 5px 10px; color: #545454; font:0.9em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; text-align: center; background-color: #ffffff; border: 1px #999999 solid; border-radius: 6px;}
    .right-column-content .content-box .column-x2-left-bx { clear: both; width: 100%; padding: 20px 0; font-size: 0.9em; line-height: 1.2em; text-align: center;}
    .right-column-content .content-box .column-x2-right-bx { clear: both; width: 100%; padding: 20px 0; text-align: center;}
    .right-column-content .content-box .column-x2-right-bx input[type=button] { width: 140px; padding: 10px; color: #ffffff; font:0.9em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 6px; background-color: #e60012; cursor: pointer;}
    
    .right-column-content .content-box .count-sub-title-2-bx { clear: both; width: 100%; padding: 3px 10px; color: #ffffff; font-weight: 500; background-color: #daae53; box-sizing: border-box;}
    
    .right-column-content .content-box .count-sub-title-3-bx { clear: both; width: 100%; padding: 3px 10px; color: #ffffff; font-weight: 500; background-color: #b1811d; box-sizing: border-box;}
    
    .right-column-content .content-box .count-notice-bx { clear: both; width: 100%; padding: 30px 0; color: #5a4210; font-size: 0.8em;}
    .right-column-content .content-box .standard-form { width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
    .right-column-content .content-box .standard-form .count-caption-1-bx { width: 45%; padding: 10px; color: #5a4210; font-weight: 500; background-color: #f7e6c3; box-sizing: border-box;}
    .right-column-content .content-box .standard-form .count-caption-2-bx { width: 55%; padding: 10px; color: #5a4210; font-weight: 500; background-color: #f7e6c3; box-sizing: border-box;}
    .right-column-content .content-box .standard-form .count-column-1-bx { width: 45%; padding: 10px; color: #313131; font-weight: 500; border-bottom: 1px #f7e6c3 solid; box-sizing: border-box;}
    .right-column-content .content-box .standard-form .count-column-1-1-bx { clear: both; width: 100%; padding: 10px; color: #313131; font-weight: 500; border-bottom: 0; box-sizing: border-box;}
    .right-column-content .content-box .standard-form .count-column-2-bx { width: 55%; padding: 10px; color: #313131; border-bottom: 1px #f7e6c3 solid; box-sizing: border-box;}
    .right-column-content .content-box .standard-form .count-column-2-1-bx { clear: both; width: 100%; padding: 10px; color: #313131; border-bottom: 1px #f7e6c3 solid; box-sizing: border-box;}
    .right-column-content .content-box .standard-form .count-column-3-bx { width: 100%; padding: 10px; color: #999999; border-bottom: 1px #f7e6c3 solid; box-sizing: border-box;}
    .right-column-content .content-box .standard-form .count-column-2-1-bx ul { padding: 0 0 0 35px; margin: 0; list-style-type: cjk-ideographic; display: block;}
    .right-column-content .content-box .standard-form .count-column-2-1-bx ul li { padding: 0; margin: 0;}
    
    .right-column-content .content-box .contact-caption-bx { clear: both; width: 100%; padding: 0 0 5px 0; color: #313131; font-weight: 500; text-align: left;}
    .right-column-content .content-box .contact-column-bx { clear: both; width: 100%; padding: 0 0 15px 0; margin: 0 0 10px 0; float: left; box-sizing: border-box;}
    .right-column-content .content-box .contact-column-bx input[type=text].contact { width: 100%; padding: 10px 20px; margin: 0 0 10px 0; color: #313131; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 1px #cccccc solid; border-radius: 6px; background-color: #ffffff; box-sizing: border-box;}
    .right-column-content .content-box .contact-column-bx select.contact { width: 100%; padding: 10px 20px; margin: 0 0 10px 0; color: #313131; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 1px #cccccc solid; border-radius: 6px; background-color: #ffffff; box-sizing: border-box;}
    .right-column-content .content-box .contact-column-bx .notice { clear: both; width: 100%; color: #999999; font-size: 0.9em; line-height: 1.4em;}
    .right-column-content .content-box .contact-notice-bx { clear: both; width: 100%; padding: 15px 30px; margin: 30px 0 0 0; color: #666666; font-size: 0.9em; line-height: 1.6em; background-color: #eeeeee; box-sizing: border-box;}
    .right-column-content .content-box .contact-button-bx { clear: both; width: 100%; margin: 30px 0 0 0; text-align: center;}
    .right-column-content .content-box .contact-button-bx input[type=button] { padding: 10px 40px; color: #ffffff; font:0.9em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 6px; background-color: #e60012; cursor: pointer;}
    
    
        
    /******** price inquiry ********/
    
    .right-column-content .content-box .price-form-caption-bx { width: 100%; font-size: 0.9em; text-align: center;}
    .right-column-content .content-box .price-form-caption-bx .caption-1-bx { width: 14%; height: 60px; padding: 15px 5px 0 5px; font-weight: 500; box-sizing: border-box; background-color: #f3e3c1; float: left;}
    .right-column-content .content-box .price-form-caption-bx .caption-2-bx { width: 43%; height: 60px; float: left;}
    .right-column-content .content-box .price-form-caption-bx .caption-2-bx .caption-2-1 { width: 100%; height: 30px; color: #ffffff; background-color: #cd9623;}
    .right-column-content .content-box .price-form-caption-bx .caption-2-bx .caption-2-2 { width: 25%; height: 30px; color: #313131; background-color: #e0c17f; float: left;}
    .right-column-content .content-box .price-form-caption-bx .caption-2-bx .caption-2-3 { width: 25%; height: 30px; color: #313131; background-color: #f6ecd6; float: left;}
    .right-column-content .content-box .price-form-column-bx { width: 100%; font-size: 0.9em; text-align: center; border-bottom: 1px #cccccc solid;}
    .right-column-content .content-box .price-form-column-bx .column-1-bx { width: 14%; padding: 10px 5px; font-weight: 500; line-height: 1.2em; word-wrap: break-word; box-sizing: border-box; float: left;}
    .right-column-content .content-box .price-form-column-bx .column-2-bx { width: 43%; float: left;}
    .right-column-content .content-box .price-form-column-bx .column-2-bx .column-2-1 { width: 25%; padding: 10px 0; float: left;}
    
    
    
    /******** history price inquiry ********/
    
    .right-column-content .content-box .price-search-bx { width: 100%; padding: 40px 10px; margin: 0 0 80px 0; color: #5a4210; text-align: center; line-height: 4em; background-color: #faf4e9; box-sizing: border-box; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
    .right-column-content .content-box .price-search-bx select { width: 120px; padding: 6px 10px; margin: 0 10px 0 0; color: #5a4210; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 1px #cccccc solid; border-radius: 6px; background-color: #ffffff;}
    .right-column-content .content-box .price-search-bx input[type=button] { padding: 6px 20px; color: #ffffff; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 1px #cccccc solid; border-radius: 6px; background-color: #886418; cursor: pointer;}
    
    
    
    /******** international inquiry ********/
    
    .right-column-content .content-box .inter-inqu-input { width: 100%; text-align: center;}
    .right-column-content .content-box .inter-inqu-input input[type=button] { padding: 10px 20px; color: #ffffff; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 6px; background-color: #886418; cursor: pointer;}
    
    .right-column-content .content-box .golden-price-curve-bx { width: 100%; margin: 70px 0 60px 0; text-align: center; display: flex; justify-content: space-around; align-items: stretch; flex-wrap: wrap;}
    .right-column-content .content-box .golden-price-curve-bx .curve-bx { width: 300px; padding: 35px 0 0 0; margin: 0 0 60px 0; border: 1px #cd9623 solid; border-radius: 10px; position: relative;}
    .right-column-content .content-box .golden-price-curve-bx .curve-bx img { width: 90%; height: auto;}
    .right-column-content .content-box .golden-price-curve-bx .curve-bx .title-bx { width: 260px; padding: 4px 0; color: #ffffff; text-align: center; border-radius: 4px; background-color: #cd9623; position: absolute; top: -10px; left: calc(100% / 2 - 130px);}
    .right-column-content .content-box .golden-price-curve-bx .transaction-curve-bx { width: 100%; text-align: center;}
    .right-column-content .content-box .golden-price-curve-bx .transaction-curve-bx img { max-width: 90%; height: auto;}
    
    
    
    /******** site map ********/

    ul#sitemap-bx { width: 100%; padding: 0; margin: 0; list-style: none; display: block;}
    ul#sitemap-bx li { padding: 0; margin: 20px 15px; color: #666; font-size: 1.4em; font-weight: 600;}
    ul#sitemap-bx li a { color: #666; text-decoration: none;}
    ul#sitemap-bx li a:hover { text-decoration: underline;}
    ul#sitemap-bx li ul.class-sed { padding: 0 20px 0 0; margin: 0; list-style: none; display: block;}
    ul#sitemap-bx li ul.class-sed li { padding: 0; margin: 10px; color: #cd9623; font-size: 0.8em; font-weight: normal;}
    ul#sitemap-bx li ul.class-sed li a { color: #cd9623; text-decoration: none;}
    ul#sitemap-bx li ul.class-sed li a:hover { text-decoration: underline;}
    
    
    
    /******** event prize+winner list ********/
    
    .prize-list-bx { clear: both; width: 100%;}
    .prize-list-bx .prize-caption { width: 100%; font-weight: 500; text-align: center; border-bottom: 1px #ccc solid; background-color: #f1f1f1; display: flex; justify-content: flex-start; align-items: stretch;}
    .prize-list-bx .prize-caption .caption-1, .prize-column .column-1 { width: 25%; padding: 5px 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
    .prize-list-bx .prize-caption .caption-2, .prize-column .column-2 { width: 50%; padding: 5px 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
    .prize-list-bx .prize-caption .caption-3, .prize-column .column-3 { width: 25%; padding: 5px 10px; box-sizing: border-box;}
    .prize-list-bx .prize-column .column-5 { width: 75%; padding: 5px 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
    .prize-list-bx .prize-column { width: 100%; text-align: center; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
    .prize-list-bx .prize-column:last-child { border-top: 1px #ccc solid;}
    
    .winner-list-bx { clear: both; width: 100%;}
    .winner-list-bx .winner-caption { width: 100%; font-weight: 500; text-align: center; border-bottom: 1px #ccc solid; background-color: #f1f1f1; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
    .winner-list-bx .winner-caption .caption-1, .winner-column .column-1 { width: 100%; padding: 5px 10px; border-bottom: 1px #ccc solid; box-sizing: border-box;}
    .winner-list-bx .winner-caption .caption-2, .winner-column .column-2 { width: 26%; padding: 5px 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
    .winner-list-bx .winner-caption .caption-3, .winner-column .column-3 { width: 30%; padding: 5px 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
    .winner-list-bx .winner-caption .caption-4, .winner-column .column-4 { width: 44%; padding: 5px 10px; text-align: left; box-sizing: border-box;}
    .winner-list-bx .winner-column { width: 100%; text-align: center; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
    
    
    
    /******** contact ********/
    
    .right-column-content .contact-full-box { clear: both; width: 100%; margin: 60px 0 0 0; line-height: 1.6em;}
    
    .right-column-content .contact-full-box form a { color: #000; text-decoration: underline;}
    .right-column-content .contact-full-box form a:hover { color: #cd9623;}
    .right-column-content .contact-full-box form .form-table-box { width: 100%; border: 1px #ccc solid; box-sizing: border-box;}
    .right-column-content .contact-full-box form .form-table-box .caption { width: 100%; padding: 10px; font-weight: 600; text-align: left; background-color: #eee; border-right: 1px #ccc solid; border-bottom: 1px #ccc solid; box-sizing: border-box;}
    .right-column-content .contact-full-box form .form-table-box .column-1-1 { width: 100%; padding: 10px; text-align: left; border-bottom: 1px #ccc solid; box-sizing: border-box;}    
    .right-column-content .contact-full-box form .form-table-box .column-1-2 { width: 100%; padding: 10px; text-align: left; border-bottom: 1px #ccc solid; box-sizing: border-box;}
    .right-column-content .contact-full-box form .form-table-box .column-1-1 input, .column-1-1 select, .column-1-2 input { width: 100%; padding: 5px; color: #000; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 1px #999 solid; background-color: #fff; box-sizing: border-box;}
    .right-column-content .contact-full-box form .form-table-box .column-2-1 { display: none;}
    .right-column-content .contact-full-box form .form-table-box .column-2-1-mo { width: 100%; padding: 10px; border-bottom: 1px #ccc solid; box-sizing: border-box;}
    .right-column-content .contact-full-box form .form-table-box .column-2-2 { width: 100%; padding: 10px; box-sizing: border-box;}
    
    .right-column-content .contact-full-box form .column-full { clear: both; width: 100%; padding: 10px; border-left: 1px #ccc solid; border-right: 1px #ccc solid; border-bottom: 1px #ccc solid; box-sizing: border-box;}
    
    .right-column-content .contact-full-box form .submit-bt { clear: both; width: 100%; margin: 30px 0 0 0; text-align: center;}
    .right-column-content .contact-full-box form .submit-bt input[type=submit] { padding: 8px 20px; color: #fff; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 8px; background-color: #886418; cursor: pointer;}
    
    
    
    /******** footer ********/
    
    footer { width: 100%; padding: 0 0 60px 0; background-color: #fcf8f1;}
    
    footer .footer-nav-box { display: none;}
    
    footer .footer-content-box { display: none;}
    
    footer .footer-copyright-box { width: 100%; padding: 30px 20px; color: #626262; font-size: 0.8em; text-align: center; border-top: 1px #cd9623 solid; box-sizing: border-box;}
    
    footer #fix-bottom-bt { width: 100%; padding: 5px 0; background-color: #cd9623; display: flex; justify-content: space-around; align-items: center; position: fixed; left: 0; bottom: 0; z-index: 99999;}
    footer #fix-bottom-bt .icon-bt a { color: #ffffff; font-size: 2em; text-align: center; text-decoration: none;}
    
    
    
}

@media only screen and ( max-width: 1000px ) {
  .page-banner-bx { width: 1000px;}
}

@media only screen and ( max-width: 900px ) {
  .page-banner-bx { width: 900px;}
}

@media only screen and ( max-width: 800px ) {
  .page-banner-bx { width: 800px;}
}


@media only screen and ( max-width: 700px ) {
  .page-banner-bx { width: 700px;}
}

@media only screen and ( max-width: 600px ) {
  .page-banner-bx { width: 600px;}
}

@media only screen and ( max-width: 500px ) {
  .page-banner-bx { width: 500px;}
  /*#side-bar-box { display: none; }*/
}

@media only screen and ( max-width: 400px ) {
  .page-banner-bx { width: 375px;}
   /*#side-bar-box { display: none; }*/
}

@media only screen and ( max-width: 300px ) {
  .page-banner-bx { width: 375px;}
   /*#side-bar-box { display: none; }*/
}