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

html, body { height:100vh; margin:0px; }

body { width:100%; background:url(../img/main_bg.jpg) no-repeat #788e9c top center; background-size:cover; background-attachment:fixed; font-size-adjust:100%; -webkit-text-size-adjust:100%; box-sizing:border-box; position:relative; color:#000000; font-size:16px; font-family:"Lato", "微軟正黑體", "Microsoft JhengHei", sans-serif; overflow:hidden; }

a { outline:none; text-decoration:none; }

ul, ol { list-style:none; margin:0; padding:0; }
li { vertical-align:top; }

h1, h2, h3, h4, h5, p { padding:0; margin:0; }

img { border:none; }

.object_fit_photo img { width:100%; height:100%; object-fit:cover; }
.object_fit_photo.compat-object-fit { background-repeat:no-repeat; background-position:center center; background-size:cover; }

input, select, textarea { font-family:"Lato", "微軟正黑體", "Microsoft JhengHei", sans-serif; }

input:focus, select:focus, textarea:focus { border-color:#66afe9; outline:0; -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6); box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6); outline:thin dotted; outline:5px auto -webkit-focus-ring-color; outline-offset:-2px; }

button, input[type=submit], input[type=reset], input[type=button] { -webkit-appearance:none; -moz-appearance:none; appearance:none; }

/* ---------------- Font ---------------- */

#top .menu_area,
#header .title,
#footer .footer_request_btn a,
#footer .footer_menu ul li a.lv1,
.prd_list .prd_btn a,
.search_area .search_title,
.login_area .login_title { font-family:"Roboto Condensed", "微軟正黑體", "Microsoft JhengHei", sans-serif; }

#footer .copyright,
.prd_list .prd_title { font-family:"Ubuntu", "微軟正黑體", "Microsoft JhengHei", sans-serif; }

/* ---------------- clear fix ---------------- */

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

/*-------------------------------------------------------------------------------------*/
/* LAYOUT */

.container { width:100%; max-width:1170px; padding-left:15px; padding-right:15px; margin:0px auto; position:relative; box-sizing:border-box; display:block; }
.overlay { position:absolute; left:0; top:0; z-index:5000; width:0; height:0; background-color:rgba(0,0,0,0.3); opacity:0; transition-delay:0.3s; -webkit-transition-delay:0.3s; -moz-transition-delay:0.3s; }

#top { position:fixed; left:0; top:0; z-index:101; width:100%; }
#top .logo { float:left; width:228px; padding:7px 0 7px 10px; box-sizing:border-box; }
#top .logo img { width:100%; display:block; }

#top .menu_area { float:right; padding-top:41px; position:relative; }
#top .menu_area .menu_line { position:absolute; left:0; top:38px; width:0; height:3px; background-color:#ffffff; transition:all 0.5s ease-in-out; }
#top .menu_area ul.menu_list { margin:0 -9px; text-align:center; font-size:0; position:relative; }
#top .menu_area ul.menu_list > li { float:left; position:relative; padding:0 9px; }
#top .menu_area ul.menu_list > li.mobile_only { display:none; }
#top .menu_area ul.menu_list > li > a.lv1 { display:block; height:30px; background-color:transparent; position:relative; box-sizing:border-box; font-size:17px; color:#ffffff; font-weight:700; line-height:30px; transition:all 0.3s ease; }
#top .menu_area ul.menu_list > li > a.lv1 i { display:none; } 
#top .menu_area ul.menu_list > li > a.lv1:hover, 
#top .menu_area ul.menu_list > li:hover > a.lv1 { color:#e50819; }
#top .menu_area ul.menu_list > li.active > a.lv1:before { display:block;}

#top .menu_area ul.menu_list > li.search_btn > a.lv1 { font-size:0; }
#top .menu_area ul.menu_list > li.search_btn > a.lv1 i { display:inline-block; font-size:17px; line-height:30px; }

#top .menu_area ul.menu_list > li.login_btn > a.lv1 { padding:0 16px; border:1px solid #ffffff; border-radius:15px; line-height:28px; }
#top .menu_area ul.menu_list > li.login_btn > a.lv1 i { display:inline-block; font-size:17px; line-height:28px; }
#top .menu_area ul.menu_list > li.login_btn > a.lv1:hover, 
#top .menu_area ul.menu_list > li.login_btn:hover > a.lv1 { border-color:#e50819; background-color:#e50819; color:#ffffff; }

#top .menu_area ul.dropdown_menu { position:absolute; left:0; top:100%; z-index:10; width:200px; padding:6px 0 4px 0; background-color:#ffd91e; box-sizing:border-box; text-align:left; }
#top .menu_area ul.dropdown_menu > li { display:block; position:relative; }
#top .menu_area ul.dropdown_menu > li > a.lv2 { display:block; width:100%; padding:6px 10px; background-color:transparent; box-sizing:border-box; position:relative; font-size:15px; color:#007336; transition:all 0.3s ease; }
#top .menu_area ul.dropdown_menu > li > a.lv2:hover,
#top .menu_area ul.dropdown_menu > li:hover > a.lv2 { background-color:#007336; color:#ffffff; }

#top .menu_area ul.menu_list > li:last-child > ul.dropdown_menu { left:auto; right:0; }
#top .menu_area .fallback { display:none; }

#top .mobile_btn { position:absolute; right:15px; top:50%; z-index:10; display:none; margin-top:-20px; }
#top .mobile_btn a { display:block; width:40px; height:40px; background-color:transparent; box-sizing:border-box; text-align:center; text-transform:uppercase; font-weight:700; font-size:0; color:#ffffff; line-height:40px; }
#top .mobile_btn a i { font-size:36px; line-height:inherit; xmargin-right:6px; }
#top .mobile_btn a:hover { text-decoration:none; }

.search_area { width:100%; display:none; }
.search_area .search_title { padding-bottom:10px; font-size:28px; color:#ffffff; font-weight:700; text-align:center; }
.search_area .search_field { width:100%; position:relative; }
.search_area .search_field input[type=text] { width:100%; height:36px; padding:0 46px 0 10px; border:none; background-color:#ffffff; box-sizing:border-box; outline:none; }
.search_area .search_field input[type=submit],
.search_area .search_field button { position:absolute; right:0; top:0; width:36px; height:36px; border:none; background-color:#ffffff; box-sizing:border-box; font-size:16px; color:#000000; outline:none; cursor:pointer; transition:all 0.3s ease; }
.search_area .search_field input[type=submit]:hover,
.search_area .search_field button:hover { background-color:#e50819; color:#ffffff; }

.login_area { width:100%; display:none; }
.login_area .login_box { width:100%; padding-top:14px; background-color:#ffffff; }
.login_area .login_title { padding-bottom:10px; font-size:28px; color:#f22216; font-weight:700; text-align:center; }
.login_area .login_form { width:100%; box-sizing:border-box; }

.form_area { padding:10px; display:block; }
.form_area .form_row { width:100%; padding:10px; box-sizing:border-box; }
.form_area .form_row .title { padding-bottom:4px; }
.form_area .form_row .field { width:100%; }
.form_area .form_row .field input { width:100%; height:36px; padding:0 46px 0 10px; border:1px solid #cccccc; background-color:#ffffff; box-sizing:border-box; box-shadow:2px 2px 5px rgba(0,0,0,0.3); outline:none; }
.form_area .form_row .btn { text-align:center; }
.form_area .form_row .btn input[type=submit], 
.form_area .form_row .btn input[type=reset], 
.form_area .form_row .btn input[type=button], 
.form_area .form_row .btn button { width:180px; height:36px; border:1px solid #cccccc; background-color:#ffffff; box-sizing:border-box; font-size:16px; color:#000000; outline:none; cursor:pointer; transition:all 0.3s ease; }
.form_area .form_row .btn input[type=submit]:hover, 
.form_area .form_row .btn input[type=reset]:hover, 
.form_area .form_row .btn input[type=button]:hover, 
.form_area .form_row .btn button:hover { background-color:#e50819; color:#ffffff; }

#mobile_menu { position:fixed; top:0; left:0; z-index:5001; width:280px; height:100%; background-color:#bbc4cd; transition:transform 0.5s ease; overflow:hidden; box-sizing:border-box; display:none; transform:translate3d(-280px, 0, 0); -webkit-transform:translate3d(-280px, 0, 0); -moz-transform:translate3d(-280px, 0, 0); }
#mobile_menu .menu_line { display:none; }
#mobile_menu .menu_area { width:100%; height:100%; overflow-y:auto; box-sizing:border-box; background:none; }
#mobile_menu .menu_area ul.menu_list { }
#mobile_menu .menu_area ul.menu_list > li { display:block; border-bottom:1px solid #cccccc; position:relative; box-sizing:border-box; }
#mobile_menu .menu_area ul.menu_list > li > a.lv1 { display:block; padding:15px 65px 15px 15px; margin:0; background-color:#788e9c; box-sizing:border-box; position:relative; font-size:20px; text-transform:uppercase; color:#ffffff; font-weight:500; line-height:20px; }
#mobile_menu .menu_area ul.menu_list > li > a.lv1 i.row { position:absolute; right:0; top:0; width:50px; height:50px; text-align:center; line-height:50px; font-size:20px; color:#ffffff; font-style:normal; transition:all 0.3s ease; }
#mobile_menu .menu_area ul.menu_list > li > a.lv1 i.row:before { position:absolute; left:50%; top:50%; content:""; width:0; height:0; margin-left:-4px; margin-top:-6px; border-style:solid; border-width:6px 0 6px 8px; border-color:transparent transparent transparent #ffffff; }
#mobile_menu .menu_area ul.menu_list > li.openDrop > a.lv1 i.row { transform:rotate(90deg); }

#mobile_menu .menu_area ul.dropdown_menu { padding-top:6px; padding-bottom:12px; background-color:#bbc4cd; border-top:1px solid #cccccc; display:none; }
#mobile_menu .menu_area ul.dropdown_menu > li { display:block; position:relative; }
#mobile_menu .menu_area ul.dropdown_menu > li > a.lv2 { display:block; padding:8px 15px; margin:0; box-sizing:border-box; font-size:16px; color:#ffffff; }

#wrap { width:100%; height:100%; overflow:hidden; }
#wrap > .owl-stage-outer,
#wrap > .owl-stage-outer > .owl-stage,
#wrap > .owl-stage-outer > .owl-stage > .owl-item { height:100% !important; }
#wrap .contentWrapper { width:100%; height:100%; }
#wrap .wrapper_page { width:100%; height:100%; }
#wrap .owl-nav { position:absolute; left:50%; top:50%; width:100%; max-width:1170px; transform:translate(-50%,-50%); }
#wrap .owl-prev, 
#wrap .owl-next { position:absolute; top:0; width:60px; height:60px; padding-bottom:4px !important; background-color:rgba(255,255,255,0.48); border-radius:100%; box-sizing:border-box; font-size:42px; color:#4b515a; text-align:center; line-height:1; outline:none; transition:all 0.3s ease; }
#wrap .owl-prev { left:-100px; padding-right:3px !important; }
#wrap .owl-next { right:-100px; padding-left:3px !important; }
#wrap .owl-prev:hover, 
#wrap .owl-next:hover { background-color:#2996c3; color:#ffffff; }
#wrap > .owl-stage-outer > .owl-stage > .owl-item img { width:auto; display:inline-block; }

#header { width:100%; padding-top:154px; background:url(../img/top_bg.jpg) no-repeat center top; background-size:cover; }
#header .title_area { xmin-height:122px; min-height:80px; padding:0 20px 14px 20px; display:flex; flex-direction:column; justify-content:flex-end; margin-top:-60px;}
#header .title { font-size:41px; color:#ffffff; font-weight:700; }
#header .sub_title { padding-top:4px; font-size:25px; color:#ffffff; }

#banner { xheight:100%; box-sizing:border-box; }
#banner .banner_show { width:100%; height:100%; }
#banner .banner_show .banner { width:100%; height:100%; background-repeat:no-repeat; background-position:center center; background-size:cover; }
#banner .banner_show .owl-stage-outer { height:100%; }
#banner .banner_show .owl-stage { height:100%; }
#banner .banner_show .owl-item { height:100%; }
#banner .banner_show .owl-item img { width:100% !important; display:block !important; }

#main { box-sizing:border-box; position:relative; transition:all 0.3s ease; }
#main .content_area { width:100%; display:flex; justify-content:space-between; align-items:stretch; flex-wrap:nowrap; }
#main .left_side { width:924px; min-height:10px; padding-right:20px; box-sizing:border-box; }
#main .left_side .content { padding:30px 20px 20px 20px; }
#main .right_side { width:216px; background-color:#d11217; }
#main .right_side img { width:100% !important; display:block !important; }

#main .multipage { padding-top:23px; margin:0 -7px; font-size:0; text-align:center; clear:both; }
#main .multipage a { display:inline-block; zoom:1; *display:inline; vertical-align:top; width:22px; height:22px; margin:0 2px; text-align:center; line-height:20px; font-size:13px; color:#000000; transition:all 0.2s ease; }
#main .multipage a.row,
#main .multipage a.back,
#main .multipage a.next { width:26px; margin:0 7px; background-color:#797979; color:#ffffff; }
#main .multipage a.onpage, 
#main .multipage a:hover { background-color:#656565; color:#ffffff; }
#main .multipage .select_area { display:none; vertical-align:top; width:100%; max-width:160px; background-color:#ffffff; vertical-align:top; border-radius:2px; position:relative; cursor:pointer; }
#main .multipage .select_area:before { position:absolute; right:8px; top:50%; z-index:1; content:"\f107"; font:normal normal normal 18px/1 FontAwesome; transform:translateY(-50%); }
#main .multipage .select_area select { width:100%; height:38px; padding-left:10px; padding-right:40px; background-color:transparent; border:1px solid #dbdad8; box-sizing:border-box; border-radius:2px; position:relative; z-index:2; font-size:13px; color:#000000; -webkit-appearance:none; -moz-appearance:none; appearance:none; outline:none; }

#footer { width:100%; padding:22px 0 12px 0; background:url(../img/footer_bg.jpg) repeat #f22216 center center; }
#footer .footer_request_btn { float:right; padding-bottom:18px; display:block; }
#footer .footer_request_btn a { display:inline-block; vertical-align:top; width:287px; height:54px; background:#949494; background:-moz-linear-gradient(top,  #949494 0%, #666666 100%); background:-webkit-linear-gradient(top,  #949494 0%,#666666 100%); background:linear-gradient(to bottom,  #949494 0%,#666666 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#949494', endColorstr='#666666',GradientType=0 ); font-size:17px; color:#ffffff; font-weight:700; text-align:center; line-height:54px; transition:all 0.3s ease; }
#footer .footer_request_btn a:hover { }

#footer .footer_menu { float:left; padding-top:16px; }
#footer .footer_menu ul { }
#footer .footer_menu ul li { }
#footer .footer_menu ul li a.lv1 { font-size:17px; color:#ffffff; font-weight:700; }
#footer .footer_menu ul li a.lv1 i { display:none; }
#footer .footer_menu ul ul { padding-top:6px; margin:0 -14px; display:block; font-size:0; }
#footer .footer_menu ul ul li { display:inline-block; vertical-align:top; padding:0 14px; position:relative; font-size:15px; color:#ffffff;}
#footer .footer_menu ul ul li:before { position:absolute; left:0; top:50%; content:""; width:1px; height:12px; background-color:#ffffff; transform:translateY(-50%); }
#footer .footer_menu ul ul li:first-child:before { display:none; }
#footer .footer_menu ul ul li a { color:#ffffff; transition:all 0.3s ease; }
#footer .footer_menu ul ul li a:hover { }

#footer .copyright { float:left; width:100%; }
#footer .copyright p { font-size:14px; color:#ffffff; font-weight:500; line-height:1.2; text-align:right; }
#footer .copyright a { color:#ffffff; }
#footer .copyright a:hover { text-decoration:underline; }

/*-------------------------------------------------------------------------------------*/
/* MODAL */

.modal { width:90% !important; -webkit-border-radius:0 !important; -moz-border-radius:0 !important; -o-border-radius:0 !important; -ms-border-radius:0 !important; border-radius:0 !important; box-sizing:border-box !important; }
.modal.prd_popup { max-width:540px !important; background:rgba(255,255,255,0.37) !important; padding:10px !important; }
.modal.search_popup { max-width:700px !important; background:none !important; padding:0 !important; -webkit-box-shadow:none !important; -moz-box-shadow:none !important; -o-box-shadow:none !important; -ms-box-shadow:none !important; box-shadow:none !important; }
.modal.login_popup { max-width:540px !important; background:rgba(255,255,255,0.37) !important; padding:10px !important; }

.modal a.close-modal { top:-15px !important; right:-15px !important; width:30px !important; height:30px !important; color:#b3b3b3 !important; line-height:28px !important; background:url(../img/popup_close.png) !important; border:1px solid #cccccc !important; -webkit-border-radius:100% !important; -moz-border-radius:100% !important; -o-border-radius:100% !important; -ms-border-radius:100% !important; box-sizing:border-box !important; }

/*-------------------------------------------------------------------------------------*/
/* INDEX */

#wrap .contentWrapper.indexPage .footer_request_btn { display:block; }
#wrap .contentWrapper.homeCate .footer_menu { padding-top:6px; }
#wrap .contentWrapper.aboutCate .footer_menu { padding-top:6px; }
#wrap .contentWrapper.productCate .footer_menu { padding-top:6px; }
#wrap .contentWrapper.qualityCate .footer_menu { padding-top:6px; }
#wrap .contentWrapper.factoryCate .footer_menu { padding-top:6px; }
#wrap .contentWrapper.contactCate .footer_menu { padding-top:6px; }

/*-------------------------------------------------------------------------------------*/
/* PRODUCT */

.product_content { }

.prd_cate_list { margin:0 -13px; display:block; font-size:0; }
.prd_cate_list .prd_cate_item { display:inline-block; vertical-align:top; width:33.33334%; max-width:286px; padding:13px; box-sizing:border-box; }
.prd_cate_list .prd_cate { width:100%; }
.prd_cate_list .prd_cate_name { padding-bottom:10px; text-align:center; font-size:26px; color:#000000; font-weight:700; }
.prd_cate_list .prd_cate_photo { width:100%; background-color:#ffffff; position:relative; }
.prd_cate_list .prd_cate_photo:before { content:""; width:100%; padding-top:100%; display:block; }
.prd_cate_list .prd_cate_photo .photo { position:absolute; left:0; top:0; width:100%; height:100%; padding:10px; box-sizing:border-box; font-size:0; text-align:center; }
.prd_cate_list .prd_cate_photo .photo:after { content:""; display:inline-block; vertical-align:middle; height:100%; }
.prd_cate_list .prd_cate_photo .photo img { max-width:100%; display:inline-block; vertical-align:middle; }

.prd_list { margin:0 -13px; display:block; }
.prd_list .prd_item { float:left; width:25%; max-width:222px; padding:13px; box-sizing:border-box; }
.prd_list .prd { width:100%; background-color:#ffffff; position:relative; overflow:hidden; }
.prd_list .prd_photo { width:100%; position:relative; }
.prd_list .prd_photo:before { content:""; width:100%; padding-top:100%; display:block; }
.prd_list .prd_photo .photo { position:absolute; left:0; top:0; width:100%; height:100%; padding:10px; box-sizing:border-box; font-size:0; text-align:center; }
.prd_list .prd_photo .photo:after { content:""; display:inline-block; vertical-align:middle; height:100%; }
.prd_list .prd_photo .photo img { max-width:100%; display:inline-block; vertical-align:middle; }
.prd_list .prd_overlay { position:absolute; left:0; top:100%; width:100%; height:100%; padding:10px; background-color:rgba(0,0,0,0.66); box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; transition:all 0.3s ease; }
.prd_list .prd_title { display:block; display:-webkit-block; width:100%; max-height:84px; box-sizing:border-box; word-wrap:break-word; word-break:normal; -webkit-line-clamp:6; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; text-align:center; font-size:13px; color:#ffffff; }
.prd_list .prd_btn { padding-top:8px; text-align:center; }
.prd_list .prd_btn a { display:inline-block; vertical-align:top; width:102px; height:26px; border:1px solid #ffffff; background-color:transparent; box-sizing:border-box; text-align:center; line-height:24px; font-size:13px; color:#ffffff; font-weight:700; transition:all 0.3s ease; }
.prd_list .prd_btn a:hover { background-color:#e50819; border-color:#e50819; }
.prd_list .prd:hover .prd_overlay { top:0; }

.prd_detail { width:100%; padding:42px 32px; background-color:#ffffff; box-sizing:border-box; }
.prd_detail .prd_detail_name { padding-bottom:6px; border-bottom:2px solid #f22216; text-align:center; font-size:22px; color:#000000; font-weight:700; }
.prd_detail .prd_detail_photo { width:100%; padding-top:30px; }
.prd_detail .prd_detail_photo img { width:100%; display:block; }

/*-------------------------------------------------------------------------------------*/
/* EDITOR CONTENT */

.editor_content { display:block; color:#000000; font-size:16px; }
.editor_content:after { content:""; display:block; width:100%; clear:both; }
.editor_content .table_area { width:100%; overflow-x:auto; }
.editor_content iframe { max-width:100%; box-sizing:border-box; }
.editor_content img { max-width:100%; box-sizing:border-box; }
.editor_content table { max-width:100%; box-sizing:border-box; }

/* Tag default values */
.editor_content ul, 
.editor_content ol { display:block; xmargin:1em 0; xpadding-left:40px; padding-left:20px; }
.editor_content ul { list-style-type:disc; }
.editor_content ol { list-style-type:decimal; }
/*
.editor_content h1 { margin:0.67em 0; }
.editor_content h2 { margin:0.83em 0; }
.editor_content h3 { margin:1em 0; }
.editor_content h4 { margin:1.33em 0; }
.editor_content h5 { margin:1.67em 0; }
.editor_content h6 { margin:2.33em 0; }
.editor_content p { margin:1em 0; }
*/

.form-row{padding:4px; }
.form-row > input{width:400px; width: 60%; height: 25px; margin: 0 auto; border: none; border:solid 1px #ccc; border-radius: 10px; }
.form-row > textarea{width:400px; width: 60%; margin: 0 auto; border: none; border:solid 1px #ccc; border-radius: 10px; height:200px;}
.form-row > label{padding:2px; font-size:18px;}

form[name='form3'] label {color:#FF0000;}
.home_image{height: 0; position: absolute; right: 10px; z-index: 999; top: -250px; display: block; margin: 0 auto;margin-bottom: 20px!important;}
.owl-carousel .owl-stage-outer{overflow-y:auto!important;}
.owl-item.active .wrapper_page {overflow:auto!important;}