@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; display: block; position: relative;}
img { border:0;}

.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; }

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

	
	/************ header ************/
	
	header { width:100%; height:70px; background-color:rgba(255,255,255,0.85); position: absolute; top:0; left: 0; z-index: 999;}
    
    header #headerbx { width: 1240px; margin: 0 auto;}
    
    header #headerbx .logobx { width: 360px; float: left;}
    header #headerbx .logobx img { margin-top: 10px;}
    
    header #headerbx nav { height: 70px; float: right;}
    header #headerbx nav .nav_icon { display: none;}
    header #headerbx nav ul { padding: 0; margin: 0; list-style: none; display: block;}
    header #headerbx nav ul li { height: 70px; color: #666666; font-size: 1.1em; padding: 35px 20px 0 20px; float: left; box-sizing: border-box; position: relative;}
    header #headerbx nav ul li:hover { color: #ffffff; background-color: #a40000;}
    header #headerbx nav ul li:hover a { color: #ffffff;}
    header #headerbx nav ul li.sel { color: #ffffff; background-color: #a40000;}
    header #headerbx nav ul li.sel a { color: #ffffff;}
    header #headerbx nav ul li a { color: #666666; text-decoration: none;}
    header #headerbx nav ul li a:hover { color: #ffffff;}
    header #headerbx nav ul li ul.popup { width:260px; padding: 10px 0; margin: 0; background-color: #ffffff; list-style: none; display: block; position: absolute; top: 70px; left:0;}
    header #headerbx nav ul li ul.popup li { height: auto; padding: 10px 20px; margin: 10px 0; float: none;}
    header #headerbx nav ul li ul.popup li a { color:#666666; text-decoration: none;}
    header #headerbx nav ul li ul.popup li a:hover { color:#ffffff;}
    header #headerbx nav ul li ul.popup li:hover { color: #ffffff; background-color: #a40000;}
    header #headerbx nav ul li ul.popup li:hover a { color: #ffffff;}
    
    
    /************ hp_banner ************/
    
    #hp_bannerbox { width: 100%; height: 560px; margin-bottom: 60px; overflow: hidden;}
    #hp_bannerbox img { width: 100%; height: auto;}
    
    
    /************ hp_clumn ************/
    
    section { clear: both; width: 1240px; margin: 0 auto 60px auto;}
    
    #hp_column_1 { width: 100%; margin-bottom: 40px;}
    
    #hp_column_1 .titlebox { width: 620px; height: 40px; background-image: url("../images/title_bg_line.png"); margin: 0 auto;}
    #hp_column_1 .titlebox .textbx { width: 140px; font-size: 1.8em; line-height: 1em; text-align: center; background-color: #ffffff; margin: 0 auto;}
    
    #hp_column_1 .servicebx { width: 100%; margin: 80px 0 120px 0;}
    #hp_column_1 .servicebx .itembx { width: 230px; margin: 0 40px; float: left;}
    #hp_column_1 .servicebx .itembx .pic { width: 230px; height: 230px; border:5px #a40000 solid; border-radius: 100%; -moz-border-radius: 100%; -webkit-border-radius: 100%; overflow: hidden; box-sizing: border-box; margin-bottom: 20px;}
    #hp_column_1 .servicebx .itembx .pic img { width: auto; height: 100%;}
    #hp_column_1 .servicebx .itembx .text { color: #666666; text-align: center;}
    
    #hp_column_2 { width: 620px; float: left;}
    
    #hp_column_2 .titlebox { width: 310px; height: 40px; background-image: url("../images/title_bg_line.png"); margin: 0 auto;}
    #hp_column_2 .titlebox .textbx { width: 140px; font-size: 1.8em; line-height: 1em; text-align: center; background-color: #ffffff; margin: 0 auto;}
    
    #hp_column_2 .inforbx { width: 470px; color: #666666; line-height: 2em; margin: 60px auto;}
    #hp_column_2 .inforbx .title { clear: both; width: 85px; float: left;}
    #hp_column_2 .inforbx .text { width: 385px; float: left;}
    
    #hp_column_2 .more { clear: both; color: #ffffff; font-size: 0.8em; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; padding: 0 10px 3px 10px; margin: 0 80px 50px 0; background-color: #a40000; float: right;}
    #hp_column_2 .more a { color: #ffffff; text-decoration: none;}
    
    #hp_column_2 .casepicbox { width: 540px; padding-top: 45px; margin: 0 auto;}
    #hp_column_2 .casepicbox .arrow_lt, .arrow_rt { width: 60px; float: left;}
    #hp_column_2 .casepicbox .arrow_lt img { margin-top: 85px; float: left; cursor: pointer;}
    #hp_column_2 .casepicbox .arrow_rt img { margin-top: 85px; float: right; cursor: pointer;}
    #hp_column_2 .casepicbox .picsbx { width: 420px; height: 250px; overflow: hidden; float: left;}
    #hp_column_2 .casepicbox .picsbx ul#casesample { padding: 0; margin: 0; list-style: none; display: block;}
    #hp_column_2 .casepicbox .picsbx ul#casesample li { width: 420px; padding: 0; margin: 0; float: left;}
    #hp_column_2 .casepicbox .picsbx ul#casesample li .pictext { width: 120px; margin: 0 10px 0 10px; float: left;}
    #hp_column_2 .casepicbox .picsbx ul#casesample li .pictext .pic { width: 120px; height: 89px; overflow: hidden; border:1px #a40000 solid; box-sizing: border-box;}
    #hp_column_2 .casepicbox .picsbx ul#casesample li .pictext .pic img { width: 100%; height: auto;}
    #hp_column_2 .casepicbox .picsbx ul#casesample li .pictext .text { width: 100%; height: 40px; font-size: 0.8em; line-height: 1.2em; text-align: center;}
    
    
    /************ content ************/
    
    #bannerbox { width: 100%; height: 400px; margin-bottom: 60px; overflow: hidden;}
    #bannerbox img { width: 100%; height: auto;}
    
    #column_lt { width: 310px; float: left;}
    
    #column_lt .allmenubx { display: none;}
    
    #column_lt ul#leftmenu { width: 100%; padding: 40px 20px 80px 20px; margin: 0 0 0 0; box-sizing: border-box; background-color: #eeeeee; list-style: none; display: block;}
    #column_lt ul#leftmenu li { width: 100%; padding: 20px; margin: 0; font-size: 1.4em; border-bottom: 1px #999999 dashed; box-sizing: border-box;}
    #column_lt ul#leftmenu li a { color: #666666; text-decoration: none;}
    #column_lt ul#leftmenu li a:hover { color: #a40000;}
    #column_lt ul#leftmenu li img { width: auto; height: 24px; margin-right: 10px;}
    
    #column_rt { width: 890px; float: right;}
    
    #column_rt .titlebox { width: 310px; height: 80px; background-image: url("../images/title_bg_line.png"); background-repeat: repeat-x; margin: 0 auto;}
    #column_rt .titlebox .textbx { width: 140px; font-size: 1.8em; line-height: 1em; text-align: center; background-color: #ffffff; margin: 0 auto;}
    #column_rt .titlebox .textbx2 { width: 170px; font-size: 1.8em; line-height: 1em; text-align: center; background-color: #ffffff; margin: 0 auto;}
    
    
    /************ content_about_intro ************/
    
    #column_rt .about_stitle { clear: both; width: 120px; padding: 3px 0; margin-bottom: 20px; color:#a40000; text-align: center; border:1px #a40000 solid; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; margin-right: 15px; float: left; }
    
    #column_rt .about_infor { width: 750px; padding: 4px 0; margin-bottom: 20px; float: left;}
    
    
    /************ content_about_results ************/
    
    #column_rt .about_re_title { clear: both; width: 100%; margin-bottom: 20px; color:#a40000; font-size: 1.1em; font-weight: 600;}
    
    #column_rt .about_re_column { width: calc(100% / 3); margin-bottom: 40px; float: left;}
    
    
    /************ content_contact ************/
    
    .con_titlebox { width: 310px; height: 80px; background-image: url("../images/title_bg_line.png"); background-repeat: repeat-x; margin: 0 auto;}
    .con_titlebox .textbx { width: 140px; font-size: 1.8em; line-height: 1em; text-align: center; background-color: #ffffff; margin: 0 auto;}
    
    #contact_lt { clear: both; width: 780px; float: left;}
    
    #contact_lt .formtitle { clear: both; width: 120px; padding-top: 5px; margin-bottom: 20px; text-align: right; float: left;}
    #contact_lt .formbx { width: 560px; margin-bottom: 20px; float: left;}
    #contact_lt .formbx input[type=text] { width: 300px; padding: 10px 15px; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border:1px #000000 solid; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px;}
    #contact_lt .formbx textarea { width: 480px; height: 160px; padding: 10px 15px; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border:1px #000000 solid; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px;}
    #contact_lt .formbx2 { width: 560px; padding: 5px 0; margin-bottom: 20px; float: left;}
    #contact_lt .formbx input[type=submit] { padding: 10px 40px; text-align: center; color:#ffffff; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border:0; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; background-color: #a40000;}
    
    #contact_rt { width: 420px; float: right;}
    
    #contact_rt .inforbox { width: 100%; padding: 50px 30px 20px 30px; box-sizing: border-box; background-color: #eeeeee;}
    #contact_rt .inforbox .iconbx { clear: both; width: 40px; height: 40px; margin: 0 20px 30px 0; float: left;}
    #contact_rt .inforbox .infortext { width: calc(100% - 60px); padding-top: 8px; float: left;}
    
    
    /************ content_case ************/
    
    #column_rt .casetitle { width: 100%; padding: 15px; margin-bottom: 40px; font-size: 1.2em; font-weight: 600; background-color: #eeeeee; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; box-sizing: border-box;}
    
    #column_rt .explanation { width:100%; line-height: 2em;}
    #column_rt .explanation a { color: #000000; text-decoration: none; border-bottom: 1px #000 dashed; box-sizing: border-box;}
    #column_rt .explanation .title { clear: both; width: 100%; margin-bottom: 10px; font-weight: 600;}
    #column_rt .explanation .bigpic { clear: both; width: 600px; margin: 30px auto;}
    #column_rt .explanation .bigpic img { width: 100%; height: auto;}
    #column_rt .explanation .thumbpicbox { clear: both; width: 100%; margin: 0 auto;}
    #column_rt .explanation .thumbpicbox ul { padding: 0; margin: 0; list-style: none; text-align: center;}
    #column_rt .explanation .thumbpicbox ul li { width: 80px; padding: 0; margin: 5px 10px; display: inline-block;}
    #column_rt .explanation .thumbpicbox ul li img { width: 100%; height: auto; cursor: pointer;}
    
    
    /************ content_service ************/
    
    #column_lt ul#leftmenu2 { width: 100%; padding: 40px 20px 80px 20px; margin: 0 0 0 0; box-sizing: border-box; background-color: #eeeeee; list-style: none; display: block;}
    #column_lt ul#leftmenu2 li { width: 100%; padding: 20px; margin: 0; color: #666666; font-size: 1.2em; border-bottom: 1px #999999 dashed; box-sizing: border-box;}
    #column_lt ul#leftmenu2 li a { color: #666666; text-decoration: none; cursor: pointer;}
    #column_lt ul#leftmenu2 li a:hover { color: #a40000;}
    #column_lt ul#leftmenu2 li img { width: auto; height: 24px; margin-right: 10px;}
    #column_lt ul#leftmenu2 li ul#downmenu { width: 100%; padding: 10px 0; margin: 20px 0 0 0; border-top:1px #666666 dashed; list-style: none; display: block;}
    #column_lt ul#leftmenu2 li ul#downmenu li { width: 100%; padding: 5px 0 5px 35px; margin: 5px 0; font-size: 0.9em; border:0; box-sizing: border-box;}
    #column_lt ul#leftmenu2 li ul#downmenu li:hover { color: #ffffff; background-color: #a40000; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px;}
    #column_lt ul#leftmenu2 li ul#downmenu li.now { color: #ffffff; background-color: #a40000; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px;}
    #column_lt ul#leftmenu2 li ul#downmenu li.now a { color: #ffffff;} 
    #column_lt ul#leftmenu2 li ul#downmenu li:hover a { color: #ffffff;}
    #column_lt ul#leftmenu2 li ul#downmenu li a:hover { color: #ffffff;}
    
    #column_rt .photoslist { width: 100%; margin-top: 40px;}
    #column_rt .photoslist .photobx { width: 270px; height: 160px; margin: 10px; overflow: hidden; float: left; position: relative;}
    #column_rt .photoslist .photobx img { width: 270px; height: auto;}
    #column_rt .photoslist .photobx .logobx { width: 60px; height: 60px; position: absolute; top:90px; left: 200px;}
    #column_rt .photoslist .photobx .logobx img { width: 100%; height: auto;}
    
    
    /************ footer ************/
    
    footer { width: 100%; padding: 50px 0; background-color: #a40000;}
	
    footer .footerbx { width: 1240px; margin: 0 auto;}
    
    footer .footerbx .column_lt { width: 480px; float: left;}
    footer .footerbx .column_lt .qrcodebx { width: 100px; float: left;}
    footer .footerbx .column_lt .addressbx { width: 370px; color: #ffffff; font-size: 0.8em; line-height: 1.8em; float: right;}
    footer .footerbx .column_lt .addressbx .com_name { font-size: 1.3em;}
    
    footer .footerbx .column_md { width: 280px; float: left;}
    footer .footerbx .column_md .sharebx { width: 100%; padding: 20px 0; text-align: center;}
    footer .footerbx .column_md .menubx { width: 200px; margin: 0 auto;}
    footer .footerbx .column_md .menubx ul { padding: 0; margin: 0; list-style: none; text-align: center; display: block;}
    footer .footerbx .column_md .menubx ul li { padding: 0; margin: 10px; display: inline-block;}
    footer .footerbx .column_md .menubx ul li a { color:#ffffff; text-decoration: none;}
    footer .footerbx .column_md .menubx ul li a:hover { text-decoration: underline;}
    
    footer .footerbx .column_rt { width: 480px; float: left;}

    
}

@media screen and (min-width: 768px) and (max-width: 1279px) {
    
    
    header { width:100%; height:70px; background-color:rgba(255,255,255,0.85); position: absolute; top:0; left: 0; z-index: 999;}
    
    header #headerbx { width: 100%; margin: 0 auto; position: relative;}
    
    header #headerbx .logobx { width: 360px; margin-left: 10px; float: left;}
    header #headerbx .logobx img { margin-top: 10px;}
    
    header #headerbx nav { height: 70px; float: right;}
    header #headerbx nav .nav_icon { width: 40px; height: 40p; margin: 15px 10px 0 0; float: right; cursor: pointer;}
    header #headerbx nav .nav_icon img { width: 100%; height: auto;}
    
    header #headerbx ul { width: 100%; padding: 40px 0; margin: 0; list-style: none; background-color: #ffffff; display: block; position: absolute; top: 70px; left: 0;}
    header #headerbx ul li { color: #666666; font-size: 1.1em; padding: 20px; box-sizing: border-box;}
    header #headerbx ul li.sel { color: #a40000;}
    header #headerbx ul li.sel a { color: #a40000;}
    header #headerbx ul li a { color: #666666; text-decoration: none;}
    header #headerbx ul li a:active { color: #ffffff;}
    header #headerbx ul li ul.popup { width:100%; padding: 20px 0; margin: 20px 0; border-top: 1px #cccccc dashed; border-bottom: 1px #cccccc dashed; background-color: #ffffff; list-style: none; display: block; position: inherit;}
    header #headerbx ul li ul.popup li { width: 100%; padding: 10px 20px; margin: 10px 0; font-size: 0.9em; box-sizing: border-box;}
    header #headerbx ul li ul.popup li a { color:#666666; text-decoration: none;}
    header #headerbx ul li ul.popup li a:active { color:#ffffff;}
    header #headerbx ul li ul.popup li:active { color: #ffffff; background-color: #a40000;}
    header #headerbx ul li ul.popup li:active a { color: #ffffff;}
    
    
    /************ hp_banner ************/
    
    #hp_bannerbox { width: 100%; height: 400px; margin-bottom: 60px; overflow: hidden;}
    #hp_bannerbox img { width: 100%; height: auto;}
    
    
    /************ hp_clumn ************/
    
    section { clear: both; width: 96%; margin: 0 auto 60px auto;}
    
    #hp_column_1 { width: 100%; margin-bottom: 40px;}
    
    #hp_column_1 .titlebox { width: 620px; height: 40px; background-image: url("../images/title_bg_line.png"); margin: 0 auto;}
    #hp_column_1 .titlebox .textbx { width: 140px; font-size: 1.8em; line-height: 1em; text-align: center; background-color: #ffffff; margin: 0 auto;}
    
    #hp_column_1 .servicebx { width: 100%; margin: 80px 0 120px 0; text-align: center;}
    #hp_column_1 .servicebx .itembx { width: 230px; margin: 20px 40px; display: inline-block;}
    #hp_column_1 .servicebx .itembx .pic { width: 230px; height: 230px; border:5px #a40000 solid; border-radius: 100%; -moz-border-radius: 100%; -webkit-border-radius: 100%; overflow: hidden; box-sizing: border-box; margin-bottom: 20px;}
    #hp_column_1 .servicebx .itembx .pic img { width: auto; height: 100%;}
    #hp_column_1 .servicebx .itembx .text { color: #666666; text-align: center;}
    
    #hp_column_2 { width: 100%;}
    
    #hp_column_2 .titlebox { width: 620px; height: 40px; background-image: url("../images/title_bg_line.png"); margin: 0 auto;}
    #hp_column_2 .titlebox .textbx { width: 140px; font-size: 1.8em; line-height: 1em; text-align: center; background-color: #ffffff; margin: 0 auto;}
    
    #hp_column_2 .inforbx { width: 470px; color: #666666; line-height: 2em; margin: 60px auto;}
    #hp_column_2 .inforbx .title { clear: both; width: 85px; float: left;}
    #hp_column_2 .inforbx .text { width: 385px; float: left;}
    
    #hp_column_2 .more { clear: both; color: #ffffff; font-size: 0.8em; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; padding: 0 10px 3px 10px; margin: 0 80px 50px 0; background-color: #a40000; float: right;}
    #hp_column_2 .more a { color: #ffffff; text-decoration: none;}
    
    #hp_column_2 .casepicbox { width: 540px; padding-top: 45px; margin: 0 auto;}
    #hp_column_2 .casepicbox .arrow_lt, .arrow_rt { width: 60px; float: left;}
    #hp_column_2 .casepicbox .arrow_lt img { margin-top: 85px; float: left; cursor: pointer;}
    #hp_column_2 .casepicbox .arrow_rt img { margin-top: 85px; float: right; cursor: pointer;}
    #hp_column_2 .casepicbox .picsbx { width: 420px; height: 250px; overflow: hidden; float: left;}
    #hp_column_2 .casepicbox .picsbx ul#casesample { padding: 0; margin: 0; list-style: none; display: block;}
    #hp_column_2 .casepicbox .picsbx ul#casesample li { width: 420px; padding: 0; margin: 0; float: left;}
    #hp_column_2 .casepicbox .picsbx ul#casesample li .pictext { width: 120px; margin: 0 10px 0 10px; float: left;}
    #hp_column_2 .casepicbox .picsbx ul#casesample li .pictext .pic { width: 120px; height: 89px; overflow: hidden; border:1px #a40000 solid; box-sizing: border-box;}
    #hp_column_2 .casepicbox .picsbx ul#casesample li .pictext .pic img { width: 100%; height: auto;}
    #hp_column_2 .casepicbox .picsbx ul#casesample li .pictext .text { width: 100%; height: 40px; font-size: 0.8em; line-height: 1.2em; text-align: center;}
    
    
    /************ content ************/
    
    #bannerbox { width: 100%; height: 200px; margin-bottom: 60px; overflow: hidden;}
    #bannerbox img { width: 100%; height: auto;}
    
    #column_lt { width: 100%; margin-bottom: 60px;}
    
    #column_lt .allmenubx { width: 100%; padding: 10px 0; margin-bottom: 10px; color: #666666; font-size: 1.2em; text-align: center; background-color: #eeeeee; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px;}
    
    #column_lt ul#leftmenu { width: 100%; padding: 40px 20px 80px 20px; margin: 0 0 0 0; box-sizing: border-box; background-color: #eeeeee; list-style: none; display: block;}
    #column_lt ul#leftmenu li { width: 100%; padding: 20px; margin: 0; font-size: 1.4em; border-bottom: 1px #999999 dashed; box-sizing: border-box;}
    #column_lt ul#leftmenu li a { color: #666666; text-decoration: none;}
    #column_lt ul#leftmenu li a:hover { color: #a40000;}
    #column_lt ul#leftmenu li img { width: auto; height: 24px; margin-right: 10px;}
    
    #column_rt { width: 96%; margin: 0 auto;}
    
    #column_rt .titlebox { width: 620px; height: 80px; background-image: url("../images/title_bg_line.png"); background-repeat: repeat-x; margin: 0 auto;}
    #column_rt .titlebox .textbx { width: 140px; font-size: 1.8em; line-height: 1em; text-align: center; background-color: #ffffff; margin: 0 auto;}
    #column_rt .titlebox .textbx2 { width: 170px; font-size: 1.8em; line-height: 1em; text-align: center; background-color: #ffffff; margin: 0 auto;}
    
    
    /************ content_about_intro ************/
    
    #column_rt .about_stitle { clear: both; width: 120px; padding: 3px 0; margin-bottom: 20px; color:#a40000; text-align: center; border:1px #a40000 solid; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; margin-right: 15px; float: left; }
    
    #column_rt .about_infor { width: 100%; padding: 4px 0; margin-bottom: 20px;}
    
    
    /************ content_about_results ************/
    
    #column_rt .about_re_title { clear: both; width: 100%; margin-bottom: 20px; color:#a40000; font-size: 1.1em; font-weight: 600;}
    
    #column_rt .about_re_column { width: calc(100% / 3); margin-bottom: 40px; float: left;}
    
    
    /************ content_contact ************/
    
    .con_titlebox { width: 620px; height: 80px; background-image: url("../images/title_bg_line.png"); background-repeat: repeat-x; margin: 0 auto;}
    .con_titlebox .textbx { width: 140px; font-size: 1.8em; line-height: 1em; text-align: center; background-color: #ffffff; margin: 0 auto;}
    
    #contact_lt { clear: both; width: 100%; margin-bottom: 40px;}
    
    #contact_lt .formtitle { clear: both; width: 120px; padding-top: 5px; margin-bottom: 20px; text-align: right; float: left;}
    #contact_lt .formbx { width: 560px; margin-bottom: 20px; float: left;}
    #contact_lt .formbx input[type=text] { width: 300px; padding: 10px 15px; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border:1px #000000 solid; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px;}
    #contact_lt .formbx textarea { width: 480px; height: 160px; padding: 10px 15px; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border:1px #000000 solid; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px;}
    #contact_lt .formbx2 { width: 560px; padding: 5px 0; margin-bottom: 20px; float: left;}
    #contact_lt .formbx input[type=submit] { padding: 10px 40px; text-align: center; color:#ffffff; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border:0; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; background-color: #a40000;}
    
    #contact_rt { width: 90%; margin: 0 auto;}
    
    #contact_rt .inforbox { width: 100%; padding: 50px 30px 20px 30px; box-sizing: border-box; background-color: #eeeeee;}
    #contact_rt .inforbox .iconbx { clear: both; width: 40px; height: 40px; margin: 0 20px 30px 0; float: left;}
    #contact_rt .inforbox .infortext { width: calc(100% - 60px); padding-top: 8px; float: left;}
    
    
    /************ content_case ************/
    
    #column_rt .casetitle { width: 100%; padding: 15px; margin-bottom: 40px; font-size: 1.2em; font-weight: 600; background-color: #eeeeee; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; box-sizing: border-box;}
    
    #column_rt .explanation { width:100%; line-height: 2em;}
    #column_rt .explanation a { color: #000000; text-decoration: none; border-bottom: 1px #000 dashed; box-sizing: border-box;}
    #column_rt .explanation .title { clear: both; width: 100%; margin-bottom: 10px; font-weight: 600;}
    #column_rt .explanation .bigpic { clear: both; width: 600px; margin: 30px auto;}
    #column_rt .explanation .bigpic img { width: 100%; height: auto;}
    #column_rt .explanation .thumbpicbox { clear: both; width: 100%; margin: 0 auto;}
    #column_rt .explanation .thumbpicbox ul { padding: 0; margin: 0; list-style: none; text-align: center;}
    #column_rt .explanation .thumbpicbox ul li { width: 80px; padding: 0; margin: 5px 10px; display: inline-block;}
    #column_rt .explanation .thumbpicbox ul li img { width: 100%; height: auto; cursor: pointer;}
    
    
    /************ content_service ************/
    
    #column_lt ul#leftmenu2 { width: 100%; padding: 40px 20px 80px 20px; margin: 0 0 0 0; box-sizing: border-box; background-color: #eeeeee; list-style: none; display: block;}
    #column_lt ul#leftmenu2 li { width: 100%; padding: 20px; margin: 0; color: #666666; font-size: 1.2em; border-bottom: 1px #999999 dashed; box-sizing: border-box;}
    #column_lt ul#leftmenu2 li a { color: #666666; text-decoration: none; cursor: pointer;}
    #column_lt ul#leftmenu2 li a:hover { color: #a40000;}
    #column_lt ul#leftmenu2 li img { width: auto; height: 24px; margin-right: 10px;}
    #column_lt ul#leftmenu2 li ul#downmenu { width: 100%; padding: 10px 0; margin: 20px 0 0 0; border-top:1px #666666 dashed; list-style: none; display: block;}
    #column_lt ul#leftmenu2 li ul#downmenu li { width: 100%; padding: 5px 0 5px 35px; margin: 5px 0; font-size: 0.9em; border:0; box-sizing: border-box;}
    #column_lt ul#leftmenu2 li ul#downmenu li:active { color: #ffffff; background-color: #a40000; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px;}
    #column_lt ul#leftmenu2 li ul#downmenu li:active a { color: #ffffff;}
    #column_lt ul#leftmenu2 li ul#downmenu li a:active { color: #ffffff;}
    
    #column_rt .photoslist { width: 100%; margin-top: 40px;}
    #column_rt .photoslist .photobx { width: 270px; height: 160px; margin: 10px; overflow: hidden; float: left; position: relative;}
    #column_rt .photoslist .photobx img { width: 270px; height: auto;}
    #column_rt .photoslist .photobx .logobx { width: 60px; height: 60px; position: absolute; top:90px; left: 200px;}
    #column_rt .photoslist .photobx .logobx img { width: 100%; height: auto;}
    
    
    /************ footer ************/
    
    footer { width: 100%; padding: 50px 0; background-color: #a40000;}
	
    footer .footerbx { width: 96%; margin: 0 auto;}
    
    footer .footerbx .column_lt { width: 500px; margin: 0 auto 20px auto; text-align: center;}
    footer .footerbx .column_lt .qrcodebx { width: 100px; margin-right: 20px; display: inline-block;}
    footer .footerbx .column_lt .addressbx { width: 370px; color: #ffffff; font-size: 0.8em; line-height: 1.8em; text-align: left; float: right;}
    footer .footerbx .column_lt .addressbx .com_name { font-size: 1.3em;}
    
    footer .footerbx .column_md { width: 100%; margin-bottom: 30px;}
    footer .footerbx .column_md .sharebx { width: 100%; padding: 20px 0; text-align: center;}
    footer .footerbx .column_md .menubx { width: 100%; margin: 0 auto;}
    footer .footerbx .column_md .menubx ul { padding: 0; margin: 0; list-style: none; text-align: center; display: block;}
    footer .footerbx .column_md .menubx ul li { padding: 0; margin: 10px; display: inline-block;}
    footer .footerbx .column_md .menubx ul li a { color:#ffffff; text-decoration: none;}
    footer .footerbx .column_md .menubx ul li a:hover { text-decoration: underline;}
    
    footer .footerbx .column_rt { width: 480px; margin: 0 auto;}
    
    
    
}

@media screen and (max-width: 767px) {
    
    
    header { width:100%; height:70px; background-color:rgba(255,255,255,0.85); position: absolute; top:0; left: 0; z-index: 999;}
    
    header #headerbx { width: 100%; margin: 0 auto; position: relative;}
    
    header #headerbx .logobx { width: 280px; margin-left: 10px; float: left;}
    header #headerbx .logobx img { width: 100%; height: auto; margin-top: 15px;}
    
    header #headerbx nav { height: 70px; float: right;}
    header #headerbx nav .nav_icon { width: 30px; height: 30p; margin: 20px 10px 0 0; float: right; cursor: pointer;}
    header #headerbx nav .nav_icon img { width: 100%; height: auto;}
    
    header #headerbx ul { width: 100%; padding: 40px 0; margin: 0; list-style: none; background-color: #ffffff; display: block; position: absolute; top: 70px; left: 0;}
    header #headerbx ul li { color: #666666; font-size: 1.1em; padding: 20px; box-sizing: border-box;}
    header #headerbx ul li.sel { color: #a40000;}
    header #headerbx ul li.sel a { color: #a40000;}
    header #headerbx ul li a { color: #666666; text-decoration: none;}
    header #headerbx ul li a:active { color: #ffffff;}
    header #headerbx ul li ul.popup { width:100%; padding: 20px 0; margin: 20px 0; border-top: 1px #cccccc dashed; border-bottom: 1px #cccccc dashed; background-color: #ffffff; list-style: none; display: block; position: inherit;}
    header #headerbx ul li ul.popup li { width: 100%; padding: 10px 20px; margin: 10px 0; font-size: 0.9em; box-sizing: border-box;}
    header #headerbx ul li ul.popup li a { color:#666666; text-decoration: none;}
    header #headerbx ul li ul.popup li a:active { color:#ffffff;}
    header #headerbx ul li ul.popup li:active { color: #ffffff; background-color: #a40000;}
    header #headerbx ul li ul.popup li:active a { color: #ffffff;}
    
    
    /************ hp_banner ************/
    
    #hp_bannerbox { width: 100%; height: 200px; margin-bottom: 60px; overflow: hidden;}
    #hp_bannerbox img { width: 100%; height: auto;}
    
    
    /************ hp_clumn ************/
    
    section { clear: both; width: 96%; margin: 0 auto 60px auto;}
    
    #hp_column_1 { width: 100%; margin-bottom: 40px;}
    
    #hp_column_1 .titlebox { width: 90%; height: 40px; background-image: url("../images/title_bg_line.png"); margin: 0 auto;}
    #hp_column_1 .titlebox .textbx { width: 140px; font-size: 1.8em; line-height: 1em; text-align: center; background-color: #ffffff; margin: 0 auto;}
    
    #hp_column_1 .servicebx { width: 100%; margin: 80px 0 120px 0; text-align: center;}
    #hp_column_1 .servicebx .itembx { width: 230px; margin: 20px 40px; display: inline-block;}
    #hp_column_1 .servicebx .itembx .pic { width: 230px; height: 230px; border:5px #a40000 solid; border-radius: 100%; -moz-border-radius: 100%; -webkit-border-radius: 100%; overflow: hidden; box-sizing: border-box; margin-bottom: 20px;}
    #hp_column_1 .servicebx .itembx .pic img { width: auto; height: 100%;}
    #hp_column_1 .servicebx .itembx .text { color: #666666; text-align: center;}
    
    #hp_column_2 { width: 100%;}
    
    #hp_column_2 .titlebox { width: 90%; height: 40px; background-image: url("../images/title_bg_line.png"); margin: 0 auto;}
    #hp_column_2 .titlebox .textbx { width: 140px; font-size: 1.8em; line-height: 1em; text-align: center; background-color: #ffffff; margin: 0 auto;}
    
    #hp_column_2 .inforbx { width: 90%; color: #666666; line-height: 2em; margin: 60px auto;}
    #hp_column_2 .inforbx .title { clear: both; width: 85px; float: left;}
    #hp_column_2 .inforbx .text { width: calc(100% - 85px); float: left;}
    
    #hp_column_2 .more { clear: both; color: #ffffff; font-size: 0.8em; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; padding: 0 10px 3px 10px; margin: 0 20px 50px 0; background-color: #a40000; float: right;}
    #hp_column_2 .more a { color: #ffffff; text-decoration: none;}
    
    #hp_column_2 .casepicbox { width: 320px; padding-top: 45px; margin: 0 auto;}
    #hp_column_2 .casepicbox .arrow_lt, .arrow_rt { width: 20px; float: left;}
    #hp_column_2 .casepicbox .arrow_lt img { margin-top: 140px; float: left; cursor: pointer;}
    #hp_column_2 .casepicbox .arrow_rt img { margin-top: 140px; float: right; cursor: pointer;}
    #hp_column_2 .casepicbox .picsbx { width: 280px; height: 380px; overflow: hidden; float: left;}
    #hp_column_2 .casepicbox .picsbx ul#casesample { padding: 0; margin: 0; list-style: none; display: block;}
    #hp_column_2 .casepicbox .picsbx ul#casesample li { width: 280px; padding: 0; margin: 0; float: left;}
    #hp_column_2 .casepicbox .picsbx ul#casesample li .pictext { width: 120px; margin: 0 10px 0 10px; float: left;}
    #hp_column_2 .casepicbox .picsbx ul#casesample li .pictext .pic { width: 120px; height: 89px; overflow: hidden; border:1px #a40000 solid; box-sizing: border-box;}
    #hp_column_2 .casepicbox .picsbx ul#casesample li .pictext .pic img { width: 100%; height: auto;}
    #hp_column_2 .casepicbox .picsbx ul#casesample li .pictext .text { width: 100%; height: 40px; font-size: 0.8em; line-height: 1.2em; text-align: center;}
    
    
    /************ content ************/
    
    #bannerbox { width: 100%; height: 140px; margin-bottom: 60px; overflow: hidden;}
    #bannerbox img { width: 100%; height: auto;}
    
    #column_lt { width: 100%; margin-bottom: 60px;}
    
    #column_lt .allmenubx { width: 100%; padding: 10px 0; margin-bottom: 10px; color: #666666; font-size: 1.2em; text-align: center; background-color: #eeeeee; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px;}
    
    #column_lt ul#leftmenu { width: 100%; padding: 40px 20px 80px 20px; margin: 0 0 0 0; box-sizing: border-box; background-color: #eeeeee; list-style: none; display: block;}
    #column_lt ul#leftmenu li { width: 100%; padding: 20px; margin: 0; font-size: 1.4em; border-bottom: 1px #999999 dashed; box-sizing: border-box;}
    #column_lt ul#leftmenu li a { color: #666666; text-decoration: none;}
    #column_lt ul#leftmenu li a:hover { color: #a40000;}
    #column_lt ul#leftmenu li img { width: auto; height: 24px; margin-right: 10px;}
    
    #column_rt { width: 96%; margin: 0 auto;}
    
    #column_rt .titlebox { width: 90%; height: 80px; background-image: url("../images/title_bg_line.png"); background-repeat: repeat-x; margin: 0 auto;}
    #column_rt .titlebox .textbx { width: 140px; font-size: 1.8em; line-height: 1em; text-align: center; background-color: #ffffff; margin: 0 auto;}
    #column_rt .titlebox .textbx2 { width: 170px; font-size: 1.8em; line-height: 1em; text-align: center; background-color: #ffffff; margin: 0 auto;}
    
    
    /************ content_about_intro ************/
    
    #column_rt .about_stitle { clear: both; width: 100%; padding: 3px 0; margin-bottom: 20px; color:#a40000; text-align: center; border:1px #a40000 solid; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; margin-right: 15px; float: left; }
    
    #column_rt .about_infor { clear: both; width: 100%; padding: 4px 0; margin-bottom: 20px;}
    
    
    /************ content_about_results ************/
    
    #column_rt .about_re_title { clear: both; width: 100%; margin-bottom: 20px; color:#a40000; font-size: 1.1em; font-weight: 600;}
    
    #column_rt .about_re_column { width: calc(100% / 3 - 15px); margin: 0 15px 40px 0; float: left;}
    
    
    /************ content_contact ************/
    
    .con_titlebox { width: 90%; height: 80px; background-image: url("../images/title_bg_line.png"); background-repeat: repeat-x; margin: 0 auto;}
    .con_titlebox .textbx { width: 140px; font-size: 1.8em; line-height: 1em; text-align: center; background-color: #ffffff; margin: 0 auto;}
    
    #contact_lt { clear: both; width: 100%; margin-bottom: 40px;}
    
    #contact_lt .formtitle { clear: both; width: 100%; padding-top: 5px; margin-bottom: 10px; text-align: left;}
    #contact_lt .formbx { width: 100%; margin-bottom: 30px;}
    #contact_lt .formbx input[type=text] { width: 100%; padding: 10px 15px; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border:1px #000000 solid; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; box-sizing: border-box;}
    #contact_lt .formbx textarea { width: 100%; height: 160px; padding: 10px 15px; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border:1px #000000 solid; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; box-sizing: border-box;}
    #contact_lt .formbx2 { width: 100%; padding: 5px 0; margin-bottom: 20px; float: left;}
    #contact_lt .formbx input[type=submit] { width: 100%; padding: 10px 0; text-align: center; color:#ffffff; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border:0; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; background-color: #a40000; box-sizing: border-box;}
    
    #contact_rt { width: 90%; margin: 0 auto;}
    
    #contact_rt .inforbox { width: 100%; padding: 50px 30px 20px 30px; box-sizing: border-box; background-color: #eeeeee;}
    #contact_rt .inforbox .iconbx { clear: both; width: 40px; height: 40px; margin: 0 20px 30px 0; float: left;}
    #contact_rt .inforbox .infortext { width: calc(100% - 60px); padding-top: 8px; float: left;}
    
    
    /************ content_case ************/
    
    #column_rt .casetitle { width: 100%; padding: 15px; margin-bottom: 40px; font-size: 1.2em; font-weight: 600; background-color: #eeeeee; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; box-sizing: border-box;}
    
    #column_rt .explanation { width:100%; line-height: 2em;}
    #column_rt .explanation a { color: #000000; text-decoration: none; border-bottom: 1px #000 dashed; box-sizing: border-box;}
    #column_rt .explanation .title { clear: both; width: 100%; margin-bottom: 10px; font-weight: 600;}
    #column_rt .explanation .bigpic { clear: both; width: 100%; margin: 30px auto;}
    #column_rt .explanation .bigpic img { width: 100%; height: auto;}
    #column_rt .explanation .thumbpicbox { clear: both; width: 100%; margin: 0 auto;}
    #column_rt .explanation .thumbpicbox ul { padding: 0; margin: 0; list-style: none; text-align: center;}
    #column_rt .explanation .thumbpicbox ul li { width: 80px; padding: 0; margin: 5px 10px; display: inline-block;}
    #column_rt .explanation .thumbpicbox ul li img { width: 100%; height: auto; cursor: pointer;}
    
    
    /************ content_service ************/
    
    #column_lt ul#leftmenu2 { width: 100%; padding: 40px 20px 80px 20px; margin: 0 0 0 0; box-sizing: border-box; background-color: #eeeeee; list-style: none; display: block;}
    #column_lt ul#leftmenu2 li { width: 100%; padding: 20px; margin: 0; color: #666666; font-size: 1.2em; border-bottom: 1px #999999 dashed; box-sizing: border-box;}
    #column_lt ul#leftmenu2 li a { color: #666666; text-decoration: none; cursor: pointer;}
    #column_lt ul#leftmenu2 li a:hover { color: #a40000;}
    #column_lt ul#leftmenu2 li img { width: auto; height: 24px; margin-right: 10px;}
    #column_lt ul#leftmenu2 li ul#downmenu { width: 100%; padding: 10px 0; margin: 20px 0 0 0; border-top:1px #666666 dashed; list-style: none; display: block;}
    #column_lt ul#leftmenu2 li ul#downmenu li { width: 100%; padding: 5px 0 5px 35px; margin: 5px 0; font-size: 0.9em; border:0; box-sizing: border-box;}
    #column_lt ul#leftmenu2 li ul#downmenu li:active { color: #ffffff; background-color: #a40000; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px;}
    #column_lt ul#leftmenu2 li ul#downmenu li:active a { color: #ffffff;}
    #column_lt ul#leftmenu2 li ul#downmenu li a:active { color: #ffffff;}
    
    #column_rt .photoslist { width: 100%; margin-top: 40px;}
    #column_rt .photoslist .photobx { width: 270px; height: 160px; margin: 10px; overflow: hidden; float: left; position: relative;}
    #column_rt .photoslist .photobx img { width: 270px; height: auto;}
    #column_rt .photoslist .photobx .logobx { width: 60px; height: 60px; position: absolute; top:90px; left: 200px;}
    #column_rt .photoslist .photobx .logobx img { width: 100%; height: auto;}
    
    
    /************ footer ************/
    
    footer { width: 100%; padding: 50px 0; background-color: #a40000;}
	
    footer .footerbx { width: 96%; margin: 0 auto;}
    
    footer .footerbx .column_lt { width: 100%; margin: 0 auto 20px auto; text-align: center;}
    footer .footerbx .column_lt .qrcodebx { width: 100%; margin-bottom: 30px; display: inline-block;}
    footer .footerbx .column_lt .addressbx { width: 100%; margin-bottom: 30px; color: #ffffff; font-size: 0.8em; line-height: 1.8em; text-align: left; float: right;}
    footer .footerbx .column_lt .addressbx .com_name { font-size: 1.3em;}
    
    footer .footerbx .column_md { width: 100%; margin-bottom: 30px;}
    footer .footerbx .column_md .sharebx { width: 100%; margin-bottom: 30px; text-align: center;}
    footer .footerbx .column_md .menubx { width: 100%; margin: 0 auto;}
    footer .footerbx .column_md .menubx ul { padding: 0; margin: 0; list-style: none; text-align: center; display: block;}
    footer .footerbx .column_md .menubx ul li { padding: 0; margin: 10px; display: inline-block;}
    footer .footerbx .column_md .menubx ul li a { color:#ffffff; text-decoration: none;}
    footer .footerbx .column_md .menubx ul li a:hover { text-decoration: underline;}
    
    footer .footerbx .column_rt { width: 90%; margin: 0 auto;}
    footer .footerbx .column_rt img { max-width: 349px; width: 100%; height: auto;}
    
    
}