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

html, body { margin:0px; }

body { width:100%; 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-x; overflow-y:auto; }

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

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

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

/* ---------------- 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 */

#wrap { width:100%; background-color:#ffffff; box-sizing:border-box; position:relative; z-index:1000; overflow:hidden; }
#wrap .container { width:100%; max-width:1046px; padding-left:15px; padding-right:15px; margin:0px auto; position:relative; box-sizing:border-box; display:block; }
#wrap .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; }
#wrap .select_area { display:inline-block; vertical-align:top; width:100%; xmax-width:120px; vertical-align:top; background-color:#efefef; border-radius:2px; position:relative; cursor:pointer; }
#wrap .select_area:before { position:absolute; right:15px; top:50%; content:""; width:0; height:0; border-style:solid; border-width:5px 5px 0 5px; border-color:#000000 transparent transparent transparent; transform:translateY(-50%); }
#wrap .select_area select { width:100%; height:32px; padding-left:10px; padding-right:40px; background-color:transparent;  border:1px solid #cecece; box-sizing:border-box; border-radius:2px; position:relative; font-size:13px; color:#000000; -webkit-appearance:none; appearance:none; outline:none; }

#header { background:url(../img/inner_header_bg.jpg) no-repeat center top; background-size:cover; border-bottom:8px solid #8be3fe; }
#header.index_header { background-image:url(../img/index_header_bg.jpg); border-bottom-width:11px; }

#top { position:relative; z-index:101; }
#top .logo { float:left; width:443px; padding:23px 0 0 2px; position:relative; }
#top .logo img { width:100%; display:block; }

#top .toolbar { position:absolute; right:15px; top:0; z-index:501; }
#top .toolbar ul { font-size:0; }
#top .toolbar ul li { display:inline-block; vertical-align:top; padding-left:5px; }
#top .toolbar ul li a { display:block; width:46px; height:38px; background-color:rgba(255,255,255,0.39); border-radius:0 0 6px 6px; font-size:18px; color:#1fa104; font-weight:700; line-height:38px; text-align:center; transition:all 0.3s ease; }
#top .toolbar ul li a.active, 
#top .toolbar ul li a:hover { color:#008a3f; }
#top .toolbar ul li a i { font-size:24px; }

#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:rgba(255,255,255,0.39); box-sizing:border-box; text-align:center; text-transform:uppercase; font-weight:700; font-size:0; color:#1fa104; line-height:40px; }
#top .mobile_btn a i { font-size:20px; line-height:inherit; xmargin-right:6px; }
#top .mobile_btn a:hover { text-decoration:none; }

#top .menu_area { position:absolute; right:15px; top:0; z-index:500; width:539px; height:189px; }
#top .menu_area ul.menu_list { font-size:0; text-align:left; }
#top .menu_area ul.menu_list > li { display:inline-block; vertical-align:top; position:absolute; }
#top .menu_area ul.menu_list > li.mobile_only { display:none; }
#top .menu_area ul.menu_list > li > a.lv1 { display:block; width:100%; }
#top .menu_area ul.menu_list > li > a.lv1 img { width:100%; display:block; }
#top .menu_area ul.menu_list > li > a.lv1 p { display:none; }

#top .menu_area #menu_1 { left:0; top:10.5%; width:19.3%; }
#top .menu_area #menu_2 { left:19%; top:29%; width:25.3%; }
#top .menu_area #menu_3 { left:42.2%; top:-11.7%; width:27.5%; }
#top .menu_area #menu_4 { left:69.4%; top:36.4%; width:20.8%; }

#mobile_menu { position:fixed; top:0; left:0; z-index:1; width:280px; height:100%; background-color:#d2ecc9; 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_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:#008a3f; box-sizing:border-box; position:relative; font-size:16px; text-transform:uppercase; color:#ffffff; line-height:20px; font-weight:bold; }
#mobile_menu .menu_area ul.menu_list > li > a.lv1 img { display:none; }

#banner { width:100%; position:relative; z-index:100; }
#banner .banner_show { width:100%; box-sizing:border-box; position:relative; }
#banner .banner_show .banner { width:100%; position:relative; background-repeat:no-repeat; background-position:center center; background-size:contain; }
#banner .banner_show .banner img { width:100%; display:block; }

#banner .banner_show .owl-nav { position:absolute; left:0; right:0; top:50%; width:100%; max-width:1046px; padding:0 15px; box-sizing:border-box; margin:0 auto; }
#banner .banner_show .owl-prev,
#banner .banner_show .owl-next { position:absolute; top:0; width:74px; height:74px; background-image:url(../img/banner_row.png); background-repeat:no-repeat; outline:none; font-size:0; transform:translateY(-50%); }
#banner .banner_show .owl-prev { left:-131px; background-position:left top; }
#banner .banner_show .owl-next { right:-131px; background-position:right top; }

#main { background:url(../img/main_bg.jpg) repeat center top; position:relative; overflow:hidden; }
#main:before { position:absolute; left:0; top:0; content:""; width:100%; height:8px; background:url(../img/banner_shadow.png) repeat-x center top; }
#main .title_area { padding-top:31px; padding-bottom:12px; border-bottom:2px dashed #ff6600; text-align:center; }
#main .title_area img { display:block; max-width:100%; margin:0 auto; }
#main .content_area { width:100%; min-height:480px; padding-top:31px; padding-bottom:26px; position:relative; box-sizing:border-box; display:block; }
#main .content_box { padding:13px 30px 0 30px; background-color:rgba(255,255,255,0.73); border-radius:14px; box-sizing:border-box; }
#main .content_patten { padding:20px 0; text-align:center; }
#main .content_patten img { max-width:100%; display:block; margin:0 auto; }

#main .left_side { float:left; width:219px; box-sizing:border-box; }
#main .left_side .left_title { padding-bottom:20px; margin-left:-3px; }
#main .left_side .left_title img { display:block; max-width:100%; }
#main .left_side .left_menu { width:100%; }
#main .left_side .left_menu > ul { width:100%; box-sizing:border-box; }
#main .left_side .left_menu > ul > li { padding:14px 5px 14px 30px; background:url(../img/left_menu_row.png) no-repeat 5px 19px; border-bottom:1px solid #ffa900; position:relative; box-sizing:border-box; font-size:18px; color:#333333; font-weight:900; }
#main .left_side .left_menu > ul > li > a { color:#333333; transition:all 0.3s ease; }
#main .left_side .left_menu > ul > li > a:hover, 
#main .left_side .left_menu > ul > li.active > a { color:#e55fa1; }
#main .left_side .left_select { width:100%; padding-top:20px; position:relative; text-align:right; display:none; }

#main .right_side { float:right; width:757px; padding-top:3px; box-sizing:border-box; }
#main .sub_title { padding:0 0 7px 3px; border-bottom:2px dashed #ff6600; }
#main .sub_title p { padding-left:14px; padding-bottom:2px; border-left:4px solid #df3d8e; font-size:28px; color:#000000; font-weight:700; line-height:1; text-transform:uppercase; }
#main .content { width:100%; position:relative; box-sizing:border-box; }

#main .multipage { padding-top:23px; margin:0 -7px; font-size:0; text-align:right; 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:#df3d8e; color:#ffffff; }
#main .multipage .select_area { display:none; max-width:160px; }

#footer { padding:26px 0 56px 0; background-color:#ffa900; position:relative; }
#footer .sitemap { float:left; }
#footer .sitemap ul { margin:0 -12px; font-size:0; }
#footer .sitemap ul li { display:inline-block; vertical-align:top; padding:0 12px; border-left:1px solid #ffffff; font-size:15px; color:#ffffff; font-weight:700; line-height:13px; }
#footer .sitemap ul li:first-child { border-left:none; }
#footer .sitemap ul li img { display:none; }
#footer .sitemap ul li a { color:#ffffff; }

#footer .copyright { float:right; font-size:13px; color:#ffffff; text-align:right; }
#footer .copyright a { color:#ffffff; }
#footer .copyright a:hover { text-decoration:underline; }

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

.index_prd_content { padding:30px 0; }

.index_prd_topic { padding-bottom:18px; text-align:center; font-size:33px; color:#ff6600; font-weight:500; font-family:'Oswald', "微軟正黑體", "Microsoft JhengHei", sans-serif; }

.index_prd_list { width:calc(100% + 20px) !important; }
.index_prd_list.owl-carousel .prd_item { width:100%; }
.index_prd_list.owl-carousel .owl-nav { position:absolute; left:0; top:50%; width:100%; font-size:52px; color:#ffa900; line-height:1; }
.index_prd_list.owl-carousel .owl-prev, 
.index_prd_list.owl-carousel .owl-next { position:absolute; top:0; transform:translateY(-50%); outline:none; }
.index_prd_list.owl-carousel .owl-prev { left:-32px; }
.index_prd_list.owl-carousel .owl-next { right:-32px; }

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

.prd_content { padding-top:17px; }

.prd_list { margin:-8px -10px; display:block; }
.prd_list .prd_item { float:left; width:259px; padding:8px 10px; box-sizing:border-box; }
.prd_list .prd { width:100%; background-color:#ffffff; position:relative; box-shadow:3px 0 7px rgba(0,0,0,0.1); }
.prd_list .prd_photo { width:100%; position:relative; font-size:0; }
.prd_list .prd_photo > img { width:100%; display:block; }
.prd_list .prd_photo .photo { position:absolute; left:0; top:0; width:100%; height:100%; 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%; max-height:100%; vertical-align:middle; }
.prd_list .prd_info { position:absolute; left:0; bottom:0; width:100%; padding:8px 54px 8px 14px; background-color:rgba(0,0,0,0.4); box-sizing:border-box; }
.prd_list .prd_title { font-family:13px; color:#ffffff; }
.prd_list .prd_number { font-family:13px; color:#ffffff; }
.prd_list .prd_btn { position:absolute; right:14px; top:50%; transform:translateY(-50%); }
.prd_list .prd_btn a { font-size:30px; color:#d1d1d1; line-height:1; }

.prd_detail { padding:50px 73px 12px 73px; background-color:#ffffff; box-shadow:inset 0 0 18px rgba(255,180,1,0.7); border-radius:12px; margin-top:15px; margin-bottom:28px; box-sizing:border-box; }
.prd_detail .prd_detail_photo { width:100%; }
.prd_detail .prd_detail_photo img { width:100%; display:block; }
.prd_detail .prd_detail_info { padding:18px 86px 18px 0; position:relative; box-sizing:border-box; font-size:22px; color:#000000; font-weight:700; }
.prd_detail .prd_detail_number { }
.prd_detail .prd_detail_size { }
.prd_detail .prd_detail_btn { position:absolute; right:-46px; bottom:26px; text-align:right; }
.prd_detail .prd_detail_btn a { display:inline-block; vertical-align:top; width:107px; height:32px; background-color:#ff6600; border-radius:13px; font-size:18px; color:#ffffff; font-weight:700; line-height:32px; text-align:center; }

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

.editor_content { min-height:420px; display:block; color:#000000; line-height:1.5; }
.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; }

table.mobile_block { width:100% !important; }

/* 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; }
*/