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

html, body { margin:0px; height:0px; height:100%; zoom:1; }

body { width:100%; margin:0px; font-size-adjust:none; -webkit-text-size-adjust:none; background-color:#d4f2fc; font-size:100%; font-family:Arial, Helvetica, sans-serif; }

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

img { border:none; }

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

h1{ margin:0px; padding:0px; font-weight:normal; font-size:24px;}
h2, h3, h4, p { margin:0px; padding:0px; }

input  { font-family:Arial, Helvetica, sans-serif; }
select { font-family:Arial, Helvetica, sans-serif; }
textarea { font-family:Arial, Helvetica, sans-serif; }

.noSelect { user-select:none; -o-user-select:none; -ms-user-select:none; -moz-user-select:none; -khtml-user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }

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

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

html {  
   scroll-behavior: smooth;  
}
.prd-tag {
    margin-top: 25px;
}
.prd-tag a {
    display: inline-block;
    border-radius: 25px;
    padding: 5px 15px;
    margin: 5px;
    font-size: 15px;
    color: #000;
    font-weight: 500;
    border: 1px solid #6bcdf1 !important;
}
.prd-tag a.active {
    background: #6bcdf1;
    color: #666666;
}
.prd-tag a:hover {
    background: #189aca;
    color: #fff;
}
.social-icon {
    position: fixed;
    right: 0;
    width: 47px;
    z-index: 99;
    top: 50%;
}
.social-icon a {
    display: block;
    text-align: center;
    padding: 10px 0;
}
.social-icon a.whattup-icon{
    background:#33d26b;
        border-radius: 10px 0 0 0;
}
.social-icon a.mail-icon{
    background:#2a92e7;
    padding:15px 0;
}

.social-icon a.chat_btn{
    background:#FFFFFF;
    padding:10px 0;
}

.social-icon a.chat-icon{
    background:#1ec733;
}
.social-icon a.facebook-icon{
    background:#4469b0;
    border-radius: 0 0 0 10px;
}
.prd-details-tag {
    padding: 10px 0 25px;
}
.prd-details-tag a {
    color: #4eb13c;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 500;
    padding: 0 5px;
}
.add-to-cart {
    padding: 15px 10px;
}
.price-tag-discount {
    color: #f00;
    font-size: 20px;
    font-weight: 600;
    display: block;
}
.price-tag-discount .discount-amount {
    font-size: 13px;
    display: inline-block;
    vertical-align: top;
}
.price-tag {
    display: inline-block;
    font-size: 16px;
    color: #25b2e9;
    font-weight: 600;
    margin-right: 50px;
    position: relative;
}
.price-tag-original {
    text-decoration-line: line-through;
    text-decoration-color: red;
}
.video-tab {
    padding: 15px 0;
}
.video-title {
    background: #52d34f;
    color: #fff;
    padding: 10px 15px;
    border-radius: 5px;
    margin-bottom: 15px;
}
.video-tab .prd_other_photo_area .other_list img{
    margin-bottom:20px;
}
.qut-box {
    display: inline-block;
    font-size:17px;
    font-weight:600;
}
.qut-box .qut-amount{
    width:63px;
    height:20px;
    border:1px solid #8ad1f1;
    color:#000;
    text-align: center;
}
.buy-btn {
    background: #25b2e9 url(../img/cart-icon-small.png) no-repeat 10px center;
    padding-left: 25px;
    font-size: 13px;
    color: #fff;
    padding: 10px 10px 10px 35px;
    border-radius: 25px;
    background-size: 18px;
}
.product-title {
    font-size: 16px;
    color: #000;
    font-weight: 700;
    display: inline-block;
    min-width: 260px; margin-bottom: 5px;
}
.multipalcheckout .price-tag{
    margin-right: 20px;
    width: 170px; margin-bottom: 5px;
}
.multipalcheckout .price-tag:after{
    display:none;
}

.multipalcheckout .qut-box { width: 252px; }

.multipalcheckout li {
    display: block;
    padding: 10px 0;
}

@media screen and (max-width: 1024px){
    .multipalcheckout .product-title { width: 100%; }
}
/*-------------------------------------------------------------------------------------*/
/* LAYOUT */

#wrap { width:100%; background:url(../img/bg.jpg) no-repeat #ffffff center top; position:relative; z-index:1; }

#top { width:100%; padding-bottom:6px; background:url(../img/top_line.jpg) repeat-y #49b233 center top; position:relative; }
#top .top_line_repeat { position:absolute; right:0px; bottom:0px; width:50%; height:100%; background-color:#39c4f1; }
#top .top_side { width:100%; background:url(../img/top_bg.jpg) repeat-x #b9eafa center top; position:relative; }
#top .top_area { width:1000px; height:137px; margin:0px auto; background:url(../img/top_bg.jpg) repeat-x #b9eafa center top; }
#top .top_area .logo { float:left; padding-left:29px; padding-top:12px; }
#top .top_area .logo a { display:block; width:203px; height:119px; background:url(../img/logo.png) no-repeat left top; background-size : contain ; }
#top .menu_area { float:right; padding-top:3px; }
#top .menu_area ul.menu_list { text-align:right; }
#top .menu_area ul.menu_list li { display:inline-block; zoom:1; *display:inline; vertical-align:top; margin:0px -2px; *margin:0px; position:relative; z-index:1; }
#top .menu_area ul.menu_list li a.lv1 { display:block; width:126px; height:88px; padding-top:31px; padding-bottom:15px; background:url(../img/menu_shadow.png) no-repeat left top; }
#top .menu_area ul.menu_list li:first-child a.lv1 { background:none !important; }
#top .menu_area ul.menu_list li a.lv1 span { display:block; height:88px; margin:0px auto; background:url(../img/menu.png) no-repeat; }

li#menu_1 a.lv1 span { width:43px !important; background-position:0 0 !important; }
li#menu_2 a.lv1 span { width:70px !important; background-position:-107px 0 !important; }
li#menu_3 a.lv1 span { width:70px !important; background-position:-232px 0 !important; }
li#menu_4 a.lv1 span { width:70px !important; background-position:-361px 0 !important; }
li#menu_5 a.lv1 span { width:75px !important; background-position:-483px 0 !important; }
li#menu_6 a.lv1 span { width:70px !important; background-position:-616px 0 !important; }

li#menu_1:hover a.lv1 span { background-position:0 -100px !important; }
li#menu_2:hover a.lv1 span { background-position:-107px -100px !important; }
li#menu_3:hover a.lv1 span { background-position:-232px -100px !important; }
li#menu_4:hover a.lv1 span { background-position:-361px -100px !important; }
li#menu_5:hover a.lv1 span { background-position:-483px -100px !important; }
li#menu_6:hover a.lv1 span { background-position:-616px -100px !important; }

#top .menu_area ul.menu_list li .dropdown_menu { position:absolute; left:0px; top:134px; padding:4px 0px; background:url(../img/dropdown_bg.png) repeat left top; width:280px; display:none; }
#top .menu_area ul.menu_list li .dropdown_menu .drop_row { position:absolute; top:-14px; left:50px; width:0; height:0; border-style:solid; border-width:0 12px 14px 12px; border-color: transparent transparent #61cff4 transparent; }
#top .menu_area ul.menu_list li .dropdown_menu img {vertical-align:middle;}
#top .menu_area ul.menu_list li .dropdown_menu ol { }
#top .menu_area ul.menu_list li .dropdown_menu ol li { float:left; width:130px; display:block; margin:0px 5px !important; }
#top .menu_area ul.menu_list li .dropdown_menu a.lv2 { display:block; padding:6px 20px; background:url(../img/dropmenu_row.png) no-repeat 7px 10px; font-size:16px; color:#ffffff; text-align:left; }
#top .menu_area ul.menu_list li .dropdown_menu a.lv2:hover { background-color:#006699; }

#top .menu_area ul.menu_list li .dropdown_menu_new { position:absolute; left:0px; top:134px; padding:4px 0px; background:url(../img/dropdown_bg_new.png) repeat left top; width:280px; display:none; }
#top .menu_area ul.menu_list li .dropdown_menu_new .drop_row { position:absolute; top:-14px; left:50px; width:0; height:0; border-style:solid; border-width:0 12px 14px 12px; border-color: transparent transparent #61F49D transparent; }
#top .menu_area ul.menu_list li .dropdown_menu_new img {vertical-align:middle;}
#top .menu_area ul.menu_list li .dropdown_menu_new ol { }
#top .menu_area ul.menu_list li .dropdown_menu_new ol li { float:left; width:130px; display:block; margin:0px 5px !important; }
#top .menu_area ul.menu_list li .dropdown_menu_new a.lv2 { display:block; padding:6px 20px; background:url(../img/dropmenu_row.png) no-repeat 7px 10px; font-size:16px; color:#EFFBF2; text-align:left; }
#top .menu_area ul.menu_list li .dropdown_menu_new a.lv2:hover { background-color:#81F1D0; }

#top .top_common_search {opacity: 0; height: 30px;margin:0px auto;float: right; transition : all 0.5s ease 0s;}
#top .tel_area {opacity: 0; float:left;width: 205px;height: 25px;background:url(../img/tel_img.png) no-repeat left top;background-size: contain;display: flex;flex-direction: row;align-items: center; transition : all 0.5s ease 0s;}
#top .top_search_area {opacity: 0; float: right;padding: 0px 1px 3px 0px;text-align:right; transition : all 0.5s ease 0s;}
#top .top_search_area label { padding-right:8px; font-size:16px; color:#ffffff; font-weight:bold; font-family:"Microsoft JhengHei", "微軟正黑體", Arial, Helvetica, sans-serif; }
#top .top_search_area input { margin:0px; padding:0px; border:0; vertical-align:top; }
#top .top_search_area input[type=search] {-moz-box-sizing: border-box;width: 131px;padding: 3px 7px;background-color:#ffffff;text-align:left;font-size:14px;color:#333333;line-height:16px;border-radius: 10px 0px 0px 10px;}
#top .top_search_area input[type=submit] {width:36px;height:22px;background:url(../img/search_btn.jpg) no-repeat #49b233 center center;font-size:0;cursor:pointer;border-radius: 0px 10px 10px 0px;}

#top .company_name_area { width:100%; background:#33c2f0; background:-moz-linear-gradient(top, #33C2F0 0%, #00ACEA 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#33C2F0), color-stop(100%,#00ACEA)); background:-webkit-linear-gradient(top, #33C2F0 0%,#00ACEA 100%); background:-o-linear-gradient(top, #33C2F0 0%,#00ACEA 100%); background:-ms-linear-gradient(top, #33C2F0 0%,#00ACEA 100%); background:linear-gradient(to bottom, #33C2F0 0%,#00ACEA 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#33c2f0', endColorstr='#00acea',GradientType=0 ); position:relative; }
#top .company_name { width:1000px; height:37px; margin:0px auto; background:-moz-linear-gradient(top, #33C2F0 0%, #00ACEA 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#33C2F0), color-stop(100%,#00ACEA)); background:-webkit-linear-gradient(top, #33C2F0 0%,#00ACEA 100%); background:-o-linear-gradient(top, #33C2F0 0%,#00ACEA 100%); background:-ms-linear-gradient(top, #33C2F0 0%,#00ACEA 100%); background:linear-gradient(to bottom, #33C2F0 0%,#00ACEA 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#33c2f0', endColorstr='#00acea',GradientType=0 ); }
#top .company_name span { display:block; width:720px; height:24px; margin-left:27px; padding-top:7px; background:url(../img/company_name.png) no-repeat left 7px; }

#main { width:100%; background:url(../img/inner_bg.jpg) repeat-x #e3f5fa center top; }

#main .common_search { width:1000px; height:48px; margin:0px auto; }
#main .tel_area { float:left; width:277px; height:38px; margin-left:24px; margin-top:10px; background:url(../img/tel_img.png) no-repeat left top; }
#main .search_area { float:right; width:436px; height:22px; padding:6px 7px 6px 0px; margin-right:8px; background:url(../img/search_bg.png) no-repeat right top; text-align:right; }
#main .search_area label { padding-right:8px; font-size:16px; color:#ffffff; font-weight:bold; font-family:"Microsoft JhengHei", "微軟正黑體", Arial, Helvetica, sans-serif; }
#main .search_area input { margin:0px; padding:0px; border:0; vertical-align:top; }
#main .search_area input[type=search] { -moz-box-sizing: border-box;width:285px; height:22px; padding:3px 7px; background-color:#ffffff; text-align:left; font-size:14px; color:#333333; line-height:16px; }
#main .search_area.en input[type=search] { width: 255px; }
#main .search_area input[type=submit] { width:36px; height:22px; background:url(../img/search_btn.jpg) no-repeat #49b233 center center; font-size:0; cursor:pointer; }

#banner { width:100%; }
#banner .banner_area { margin:0px auto; }
#banner .banner_show { }

.home_banner { width:982px; height:364px; position:relative; }
.home_banner .banner_area { width:982px; height:364px; position:relative; }
.home_banner .banner_show { float:left; width:669px; height:364px; background-color:#7fd1ee; }
.home_banner .banner_show img { display:none; }
.home_banner .banner_show img.active { display:block; }

.home_banner .banner_clip { float:right; width:310px; height:327px; border-top:3px solid #b4e527; border-bottom:3px solid #b4e527; position:relative; }
.home_banner .banner_clip .over_border {position:absolute; left:0px; top:0px; width:304px; height:103px; border:3px solid #6cd3f5; pointer-events:none;}
.home_banner .banner_clip a { display:block; width:304px; height:109px; border-left:3px solid #b4e527; border-right:3px solid #b4e527;}

.home_banner .banner_text .bnr_slo { display:none;}
.home_banner .banner_text .bnr_slo.onslo{display:block;}

.home_banner .banner_text { position:absolute; left:0px; bottom:0px; width:982px; height:31px; background-color:rgba(53, 156, 37, 0.5); filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#88359c25', endColorstr='#88359c25'); }
.home_banner .banner_text .bnr_slo p {float:left; width:670px; height:25px; padding:3px 0px 3px 22px; font-size:20px; color:#ffffff; line-height:25px; }

.home_banner .banner_text .bnr_slo p {
     animation: bnr_slo 15s cubic-bezier(0.28, 0.1, 0, 1.07) infinite;
}
@keyframes bnr_slo {
    0%   { transform: translate(0px, 0); }
    100% { transform: translate(461px, 0); }
}

.home_banner .banner_text ul.bnr_dot { float:right; text-align:right; padding-right:26px; padding-top:10px; }
.home_banner .banner_text ul.bnr_dot li { display:inline-block; zoom:1; *display:inline; vertical-align:top; margin-right:7px; width:11px; height:11px; background:url(../img/bnr_dot.png) no-repeat; background-position:left top; cursor:pointer; }
.home_banner .banner_text ul.bnr_dot li.onbnr, 
.home_banner .banner_text ul.bnr_dot li:hover { background-position:right top; }

.inner_banner { background:url(../img/inner_bg_patten.png) no-repeat center top; }
.inner_banner .banner_area { width:100%; margin-top:3px !important; background:url(../img/inner_banner_bg.png) repeat-x center top; } 
.inner_banner .banner_show { width:100%; height:256px; background-position:center top; background-repeat:no-repeat; }

#main .main_side { width:100%; background:url(../img/inner_bg_patten.png) no-repeat center -256px; position:relative; }
#main .title_line { position:absolute; top:55px; height:2px; background:url(../img/index_box_line.jpg) repeat-x center bottom; }
#main .title_line.left { left:0px; }
#main .title_line.right { right:0px; }

#main .title_area { width:1000px; height:37px; padding-top:20px; margin:0px auto; background:url(../img/title_line.jpg) no-repeat 9px bottom; }
#main .title { width:908px; padding-left:54px; height:35px; }
#main .title span { display:block; width:100%; height:30px; background:url(../img/title.png) no-repeat; }
#main .title.main_title { width: calc( 100% - 54px ); display: inline-block; }
#main .title.main_title span { color:#0197c8; background: none !important; }
#main .title.main_title span.main_title { font-size: 24px; font-weight: bold; width: auto; display: inline-block; float: left;
    text-shadow: 0 2px white, 0 -2px white, 2px 0 white , -2px 0 white;  }

span#title_product { background-position:0 0 !important; }
span#title_prom { background-position:0 -233px !important; }
span#title_new { background-position:0 -267px !important; }
span#title_sam { background-position:0 -48px !important; }
span#title_srch { background-position:0 -302px !important; }
span#title_comp { background-position:0 -375px !important; }

#main .content_area { width:1000px; margin:0px auto; padding-top:17px; }
#main .left_side { float:left; width:194px; }
#main .left_side .sub_title { padding-left:0px !important; margin-right:0px !important; border-radius:4px; behavior:url(pie/PIE.php); position:relative; text-align:center; line-height:36px \9; }
#main .left_side .sub_title i { display: none; }
#main .left_side .sub_title_pd { display: none; padding-left:0px !important; margin-right:0px !important; border-radius:4px; behavior:url(pie/PIE.php); position:relative; text-align:center; line-height:36px \9; }
#main .left_side .sub_title_pd i { display: none; }
#main .left_side .left_menu_area { width:164px; padding:7px 7px 0px 7px; margin-top:8px; margin-left:15px; background:url(../img/left_bg.png) no-repeat left top; }
#main .left_side .left_menu { width:148px; min-height:680px; padding:18px 8px; background:rgba(255,255,255,0.3); background:-webkit-gradient(linear, 0 0, 0 bottom, from(rgba(255,255,255,0.3)), to(rgba(255,255,255,0.1))); background:-webkit-linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0.1)); background:-moz-linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0.1)); background:-ms-linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0.1)); background:-o-linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0.1)); background:linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0.1)); -pie-background:linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0.1)); border-radius:8px; behavior:url(pie/PIE.php); position:relative; }
#main .left_side .left_menu ul li img{vertical-align:middle;}
#main .left_side .left_menu ul { }
#main .left_side .left_menu ul > li { padding:5px 10px 5px 24px; background:url(../img/left_cate_1_row.png) no-repeat 10px 9px; border-top:1px solid #ffffff; }
#main .left_side .left_menu ul > li:first-child { border-top:none; }
#main .left_side .left_menu ul > li a.cate_1 { font-size:15px; color:#1265a5; }
#main .left_side .left_menu .pulldown { padding-top:12px; padding-left:4px; display:none; }
#main .left_side .left_menu .pulldown ol { }
#main .left_side .left_menu .pulldown ol > li { padding-left:10px; padding-bottom:10px; background:url(../img/left_cate_2_row.png) no-repeat left 2px; }
#main .left_side .left_menu .pulldown ol > li a.cate_2 { font-size:14px; color:#333333; }

#main .left_side .left_menu a.cate_1:hover, 
#main .left_side .left_menu a.cate_2:hover { color:#49b233 !important; }

#main .right_side { float:right; width:787px; }
#main .sub_title { height:32px; padding-left:20px; margin-left:15px; margin-right:63px; background:url(../img/sub_title_bg.png) no-repeat right top; font-size:19px; color:#ffffff; line-height:32px; }
#main .sub_title a:hover { color:#5a5858cf !important; }
#main .sub_title_t { height:32px; padding-left:20px; margin-left:15px; margin-right:63px; background:url(../img/sub_title_bg_t.png) no-repeat right top; font-size:19px; color:#ffffff; line-height:32px; }
#main .sub_title_prom { height:32px; padding-left:20px; margin-left:15px; margin-right:63px; background:url(../img/sub_title_bg2.png) no-repeat right top; font-size:19px; color:#ffffff; line-height:32px; }
#main .sub_title_prom a:hover { color:#5a5858cf !important; }
#main .sub_title_new { height:32px; padding-left:20px; margin-left:15px; margin-right:63px; background:url(../img/sub_title_bg3.png) no-repeat right top; font-size:19px; color:#ffffff; line-height:32px; }
#main .sub_title_new a:hover { color:#5a5858cf !important; }
#main .sub_title_sam { height:32px; padding-left:20px; margin-left:15px; margin-right:63px; background:url(../img/sub_title_bg4.png) no-repeat right top; font-size:19px; color:#ffffff; line-height:32px; }
#main .sub_title_sam a:hover { color:#5a5858cf !important; }
#main .sub_title img {vertical-align:middle;}
#main .sub_title_t img {vertical-align:middle;}
#main .sub_title_prom img {vertical-align:middle;}
#main .sub_title_new img {vertical-align:middle;}
#main .sub_title_sam img {vertical-align:middle;}
#main .sub_title_pd { height:32px; padding-left:20px; margin-left:15px; margin-right:63px; background:url(../img/sub_title_bg.png) no-repeat right top; font-size:19px; color:#ffffff; line-height:32px; }
#main .showme {float: right; margin-right: 31px; margin-top: 2px; background-color: #effbca; color: #49b233; display: inline-block; font-size: 16px; cursor: pointer; border: outset; border-radius: 15px; }
#main .showme:hover {background-color: #E6FE9D}
#main .seldown {border-radius: 5px; background-color: #effbca; color: #49b233; font-size: 16px; display: inline-block; border: inset; margin-top: 4px;}
#main .content { }

#main .multipage { padding:20px 28px 20px 0px; text-align:center; }
#main .multipage a { display:inline-block; zoom:1; *display:inline; vertical-align:top; margin:0px 3px; *margin:0px 5px; padding:3px 7px; font-size:15px; color:#424242; text-align:center; }
#main .multipage a.row { color:#01b4ed; }
#main .multipage a:hover { color:#01b4ed; }
#main .multipage a.onpage { background-color:#19bbef; color:#ffffff; }

#main .page_back_btn { padding:16px 65px 23px 0px; text-align:right; }
#main .page_back_btn a { display:inline-block; zoom:1; *display:inline; vertical-align:top; padding:6px 12px; background-color:#19bbef; color:#ffffff; font-size:16px; }
#main .page_back_btn a:hover { background-color:#49b233; color:#ffffff; }

#footer { width:100%; background-color:#d4f2fc; }
#footer .footer_area { width:1000px; margin:0px auto; padding:9px 0px; font-size:10px; color:#424242; font-family:Verdana, Geneva, sans-serif !important; text-align: center; }
#footer .copyright { float: none; padding-left:21px; }
#footer .designby { float:right; padding-right:21px; }
#footer .designby a { color:#424242; }
#footer .designby a:hover { text-decoration:underline; }

/*-------------------------------------------------------------------------------------*/
/* chatbot*/

/*.chatbot {position: relative; display:flex;}*/

.chatbot {
    position: fixed;
    display: flex;
    top: 32%;
    right: 0px;
    z-index: 3;
}

.chatbot img {width: 60px;height: 60px;border-radius: 18px;border: outset;box-shadow: 2px 2px 2px 2px rgb(0 0 0 / 20%);}

.chatbot img:hover {
    opacity: 0.6;
    cursor: pointer;
    box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.24);
}

button.chat_btn {
    background-color: transparent;
    width: 65px;
    height: 65px;
    border-radius: 18px;
    color: transparent;
    border-color: transparent;
    position: absolute;
}

button.chat_btn:hover {
    opacity: 0.6;
    cursor: pointer;
    box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.24);
}

/*-------------------------------------------------------------------------------------*/
/* pop-up-copy*/
    #copy-btn {
      cursor: pointer;
      background-color: unset;
      border: none;
    }
    #copy-btn:hover {
      transform: scale(1.5);
    }
    /* Popup styling */
    #popup-mobile {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.8);
      justify-content: center;
      align-items: center;
      z-index: 8011;
    }
    #popup-mobile-content {
      background: white;
      padding: 20px;
      border-radius: 10px;
      text-align: center;
      max-width: 90%; /* Ensure it fits within the screen width */
	  max-height: 90vh; /* Limit the height to 90% of the viewport height */
	  overflow-y: auto; /* Enable vertical scrolling if content exceeds height */
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
	  position: relative;
    }
	
    #popup-mobile img {
      max-width: 100%;
      border: 1px solid #ddd;
      border-radius: 10px;
    }
    #close-popup-mobile {
      position: absolute;
      top: 10px;
      right: 5px;
      /* font-size: 30px;*/
      color: #333;
      cursor: pointer;
	  background: none;
	  border: none;
    }
	
	#close-popup-mobile .material-icons{
	  font-size: 30px;
	}

    #close-popup-mobile:hover {
      background-color: yellowgreen;
	  border-radius: 50%;
    }

/* fancybox */
.fancybox-title {text-align: center;}

/* whatsapp*/
.what-img {display:inline-block;}
/* search page*/
.sea-tag {display:inline-block;}
/*-------------------------------------------------------------------------------------*/
/* INDEX */

.indexType { background:url(../img/index_bg_patten.png) no-repeat #ffffff center top !important; }

.prd_cate_area { width:100%; margin-top:16px; margin-bottom:26px; position:relative; background:url(../img/index_prd_cate_bg.jpg) no-repeat #cff1fb center top; }
.prd_cate_area .prd_cate_bg { position:absolute; right:0px; top:0px; width:50%; height:100%; background-color:#ddf1d9; }
.prd_cate_area .prd_cate_list { width:1000px; min-height:104px; padding-top:10px; margin:0px auto; background:url(../img/index_prd_cate_bg.jpg) no-repeat center top; text-align:center; position:relative; padding-bottom: 10px; }
.prd_cate_area .prd_cate_list a { display:inline-block; zoom:1; *display:inline; vertical-align:top; margin:0px 8px; *margin:0px 10px; text-align:center; }
.prd_cate_area .prd_cate_list a img { display:inline-block; }
.prd_cate_area .prd_cate_list a p { padding-top:4px; font-size:14px; color:#006699; font-weight:bold; font-family:"Microsoft JhengHei", "微軟正黑體", Arial, Helvetica, sans-serif; }

.index_content_area { width:100%; background:url(../img/index_box_line.jpg) repeat-x center 36px; }
.index_box_area { width:1000px; margin:0px auto; padding-bottom:32px; background-color:#ffffff; text-align:center; }

/* OLDCode */
.index_box { display:inline-block; zoom:1; *display:inline; vertical-align:top; margin:0px 6px; *margin:0px 8px; }
.index_box .index_box_title { height:32px; padding:4px 0px 2px 12px; background:url(../img/title_line.jpg) no-repeat left bottom; position:relative; }
.index_box .index_box_title p { font-size:24px; color:#006699; font-weight:bold; font-family:"Microsoft JhengHei", "微軟正黑體", Arial, Helvetica, sans-serif; text-align:left; }
.index_box .index_box_title a { position:absolute; right:12px; top:0px; display:block; width:32px; height:32px; background:url(../img/index_more_btn.jpg) no-repeat left top; }
.index_box .index_box_content { height:252px; padding-top:29px; text-align:center; }
.index_box .index_box_content .box_prd { display:inline-block; zoom:1; *display:inline; vertical-align:top; margin:0px; *margin:0px 2px; height:246px; padding:3px; background-color:#cccccc; box-shadow:0px 0px 5px rgba(0,204,255,0.7); border-radius:12px; behavior:url(pie/PIE.php); position:relative; }
.index_box .index_box_content a { display:block; width:100%; height:246px; box-shadow:2px 2px 2px rgba(0,0,0,0.4) inset; background:url(../img/index_prd_bg.jpg) repeat-x #59cef3 center top; border-radius:12px; behavior:url(pie/PIE.php); position:relative; }
.index_box .index_box_content a .prd_img { width:100%; height:199px; text-align:center; font-size:0; }
.index_box .index_box_content a .prd_img i { display:inline-block; height:100%; vertical-align:middle; }
#index_prd_box .index_box_content a .prd_img img { vertical-align:middle; max-width:199px;max-height:190px;}
#index_promo_box .index_box_content a .prd_img img { vertical-align:middle; max-width:260px;max-height:190px;}
.index_box .index_box_content a .prd_name { width:100%; height:36px; padding:7px 0px; text-align:center; font-size:15px; color:#666666; line-height:18px; }
.index_box .index_box_content a:hover .prd_name { color:#000000; xtext-decoration:underline; }

/* NewCode */
.index_box_N { display:inline-block; zoom:1; *display:inline; vertical-align:top; margin:0px 0px; *margin:0px 8px; }
.index_box_N .index_box_title { height:32px; padding:4px 0px 2px 12px; background:url(../img/title_line.jpg) no-repeat left bottom; position:relative; }
.index_box_N .index_box_title p { font-size:24px; color:#006699; font-weight:bold; font-family:"Microsoft JhengHei", "微軟正黑體", Arial, Helvetica, sans-serif; text-align:left; }
.index_box_N .index_box_title a { position:absolute; right:12px; top:0px; display:block; width:32px; height:32px; background:url(../img/index_more_btn.jpg) no-repeat left top; }
.index_box_N .index_box_content { height:252px; padding-top:29px; text-align:center; }
.index_box_N .index_box_content .box_prd { display:inline-block; zoom:1; *display:inline; vertical-align:top; margin:0px; *margin:0px 2px; height:246px; padding:3px; background-color:#cccccc; box-shadow:0px 0px 5px rgba(0,204,255,0.7); border-radius:12px; behavior:url(pie/PIE.php); position:relative; }
.index_box_N .index_box_content a { display:block; width:100%; height:246px; box-shadow:2px 2px 2px rgba(0,0,0,0.4) inset; background:url(../img/index_prd_bg.jpg) repeat-x #59cef3 center top; border-radius:12px; behavior:url(pie/PIE.php); position:relative; }
.index_box_N .index_box_content a .prd_img { width:100%; height:199px; text-align:center; font-size:0; }
.index_box_N .index_box_content a .prd_img i { display:inline-block; height:100%; vertical-align:middle; }
#index_prd_box_N .index_box_content a .prd_img img { vertical-align:middle; max-width:199px;max-height:190px;}
#index_promo_box_N .index_box_content a .prd_img img { vertical-align:middle; max-width:199px;max-height:190px;}
#index_sam_box_N .index_box_content a .prd_img img { vertical-align:middle; max-width:260px;max-height:190px;}
#index_sam_box_N .index_channel_youtube { width:100%; height:195px; margin-bottom:8px;}
#index_sam_box_N .index_channel_youtube iframe {width: 99%; height: 190px; padding-top: 9px; padding-left: 3px; vertical-align:bottom;}
.index_box_N .index_box_content a .prd_name { width:100%; height:36px; padding:7px 0px; text-align:center; font-size:15px; color:#666666; line-height:18px; }
.index_box_N .index_box_content a:hover .prd_name { color:#000000; xtext-decoration:underline; }

#index_prd_box { width:655px; }
#index_prd_box .index_box_content .box_prd { width:207px; }

#index_prd_box_N { width:435px; }
#index_prd_box_N .index_box_content .box_prd { width:207px; }

#index_promo_box { width:306px; }
#index_promo_box .index_box_content .box_prd { width:288px; }

#index_promo_box_N { width:218px; }
#index_promo_box_N .index_box_content .box_prd { width:207px; }

#index_sam_box_N { width:306px; }
#index_sam_box_N .index_box_content .box_prd { width:288px; }

/*Compare*/
#main .left_side_comp { float:left;width: 320px;padding-left: 5px;padding-right: 5px; }
#main .middle_side_comp { float:left; width:300px; }
#main .right_side_comp { float:right; width:300px; position: relative;}
#main .sub_title_comp { height:32px; padding-left:20px; margin-left:5px; margin-right:5px; background:url(../img/sub_title_bg.png) no-repeat right top; font-size:25px; color:#ffffff; line-height:32px; }
.prd_detail_area_comp {display: flex; width: fit-content;margin: auto;margin-top:15px;border:3px solid #cccccc;box-shadow:0px 0px 5px rgba(0,204,255,0.7);border-radius:12px;
background:#effbca; background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ffffff), to(#effbca)); background:-webkit-linear-gradient(#ffffff, #effbca); background:-moz-linear-gradient(#ffffff, #effbca); background:-ms-linear-gradient(#ffffff, #effbca); background:-o-linear-gradient(#ffffff, #effbca); background:linear-gradient(#ffffff, #effbca); -pie-background:linear-gradient(#ffffff, #effbca); 
behavior:url(pie/PIE.php); position:relative; }
.prd_detail_area_comp .left_side_comp { float:left; width:300px; }
.prd_detail_area_comp .middle_side_comp { float:left; width:300px; }
.prd_detail_area_comp .right_side_comp { float:right; width:300px; position: relative;}
.prd_detail_area_comp .prd_detail { width:300px; height:auto; padding-top:34px; padding-left: 12px; padding-right: 13px; box-shadow:-1px 0px 1px 0px rgba(0,188,212,0.25) inset; border-radius:9px; behavior:url(pie/PIE.php); position:relative; }
.prd_detail_area_comp .prd_code { position:absolute; right:-3px; top:41px; width:300px; height:25px; padding:6px 18px; background-color:#19a6d4; font-size:20px; color:#ffffff; }
.prd_detail_area_comp .prd_name  {padding-left:2px; padding-bottom:10px; margin-bottom:15px; border-bottom:1px solid #75c5ea; width: 293px; font-size:20px; color:#0197c8; }
.prd_detail_area_comp .prd_photo { padding-left:25px }
.prd_detail_area_comp .prd_info_area { width:290px; padding-left:4px; padding-bottom:10px; }
.prd_detail_area_comp .prd_info_title { padding-bottom:6px; border-bottom:2px solid #acdfef; }
.prd_detail_area_comp .prd_info_title span { display:block; width:100%; height:27px; background:url(../img/title.png) no-repeat; }
.prd_detail_area_comp .prd_info_content { padding-left:0px; padding-top:14px; }
.prd_detail_area_comp .prd_info_content ul.tick { width:293px; }
.prd_detail_area_comp .prd_info_content ul.tick table li { float:left; width:auto; min-height:18px; padding-left:28px; padding-bottom:4px; background:url(../img/tick.png) no-repeat left top; background-size: 18px; font-size:17px; color:#333333; }
.prd_detail_area_comp .prd_info_content ul.tick table td {vertical-align:top;}
.prd_detail_area_comp .prd_photo { padding-left:2px }
.prd_photo .prd_large_photo { float:left; width:295px; height:242px; text-align:center; font-size:0; }
.prd_photo .prd_large_photo i { display:inline-block; height:100%; vertical-align:middle; }
.prd_photo .prd_large_photo img { vertical-align:middle; }
.prd_photo .prd_large_photo a img { display:none; max-width:295px;max-height:242px;  }
.prd_photo .prd_large_photo a.active  img { display:block; }

/*-------------------------------------------------------------------------------------*/
/* SELECTION */

.sel_list { height:32px; padding-left:20px; margin-left:15px; margin-right:63px; font-size:19px; color:#ffffff; line-height:32px; }
.sel_list .sel { float:left; height:30px; padding:3px; margin-right:10px; margin-bottom:1px; position:relative; }
/*-------------------------------------------------------------------------------------*/
/* PRODUCTS */

.prd_list { padding-left:39px; padding-top:28px; }
.prd_list .prd { float:left; width:207px; height:246px; padding:3px; margin-right:21px; margin-bottom:19px; background-color:#cccccc; box-shadow:0px 0px 5px rgba(0,204,255,0.7); border-radius:12px; behavior:url(pie/PIE.php); position:relative; }
.prd_list .prd a { display:block; width:100%; height:246px; box-shadow:2px 2px 2px rgba(0,0,0,0.4) inset; background:url(../img/index_prd_bg.jpg) repeat-x #59cef3 center top; border-radius:12px; behavior:url(pie/PIE.php); position:relative; }
.prd_list .new a { display:block; width:100%; height:246px; box-shadow:2px 2px 2px rgba(0,0,0,0.4) inset; background:url(../img/index_prd_bg.jpg) repeat-x #85efe1 center top; border-radius:12px; behavior:url(pie/PIE.php); position:relative; }
.prd_list .prom a { display:block; width:100%; height:246px; box-shadow:2px 2px 2px rgba(0,0,0,0.4) inset; background:url(../img/index_prd_bg.jpg) repeat-x #fff193 center top; border-radius:12px; behavior:url(pie/PIE.php); position:relative; }
.prd_list .sam a { display:block; width:100%; height:246px; box-shadow:2px 2px 2px rgba(0,0,0,0.4) inset; background:url(../img/index_prd_bg.jpg) repeat-x #cce252 center top; border-radius:12px; behavior:url(pie/PIE.php); position:relative; }
.prd_list .prd a .prd_img { width:100%; height:199px; text-align:center; font-size:0; }
.prd_list .prd a .prd_img i { display:inline-block; height:100%; vertical-align:middle; }
.prd_list .prd a .prd_img img { vertical-align:middle; max-width:199px;max-height:190px;}
.prd_list .prd a .prd_name { width:100%; height:36px; padding:7px 0px; text-align:center; font-size:15px; color:#666666; line-height:18px; }
.prd_list .prd a .prd_name .prd_n {display: block; margin:0 auto; width: 96%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.prd_list .prd a .prd_name img {vertical-align:middle;}
.prd_list .prd a:hover .prd_name { color:#000000; xtext-decoration:underline; }
.prd_list .prd a:hover {transform: translateY(-5px); -webkit-transform: translateY(-5px); box-shadow:2px 2px 2px 2px rgba(0, 0, 0, 0.24)}
/*Compare*/
.prd_list .prd a .prd_img_comp { width:100%; height:199px; text-align:center; font-size:0; }
.prd_list .prd a .prd_img_comp i { display:inline-block; height:100%; vertical-align:middle; }
.prd_list .prd a .prd_img_comp img { vertical-align:middle; max-width:199px;max-height:190px;}
.prd_list .prd a .prd_name_comp { width:100%; height:36px; padding:7px 0px; text-align:center; font-size:15px; color:#666666; line-height:18px; }
.prd_list .prd a .prd_name_comp .prd_n {display: block; margin:0 auto; width: 96%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.prd_list .prd a .prd_name_comp img {vertical-align:middle;}
.prd_list .prd a:hover .prd_name_comp { color:#000000; xtext-decoration:underline; }

.prd_list .prd a input[id=selbox] {
    position: absolute;
    margin: 8px 10px 10px 165px;
    width: 25px;
    height: 25px;
}

input[name=sel_comp] {
    display:none;
}

input[name=sel_comp] + label {
    display:inline-block;
    position: absolute;
    padding: 0 0 0 0px;
    margin: 8px 0px 0px 175px;
    background:url(../img/delete.png) no-repeat;
    height: 20px;
    width: 20px;;
    background-size: 100%;
    cursor: pointer;
}

/* NewCode */
.prd_list_rel {height: 215px; padding-left:0px; padding-top: 25px; overflow: hidden;}
.prd_list_rel .prd { float:left; width:165px; height:196px; padding:3px; margin-right:21px; margin-bottom:19px; background-color:#cccccc; box-shadow:0px 0px 5px rgba(0,204,255,0.7); border-radius:12px; behavior:url(pie/PIE.php); position:relative; }
.prd_list_rel .prd a { display:block; width:100%; height:196px; box-shadow:2px 2px 2px rgba(0,0,0,0.4) inset; background:url(../img/index_prd_bg.jpg) repeat-x #59cef3 center top; border-radius:12px; behavior:url(pie/PIE.php); position:relative; }
.prd_list_rel .new a { display:block; width:100%; height:196px; box-shadow:2px 2px 2px rgba(0,0,0,0.4) inset; background:url(../img/index_prd_bg.jpg) repeat-x #85efe1 center top; border-radius:12px; behavior:url(pie/PIE.php); position:relative; }
.prd_list_rel .prom a { display:block; width:100%; height:196px; box-shadow:2px 2px 2px rgba(0,0,0,0.4) inset; background:url(../img/index_prd_bg.jpg) repeat-x #fff193 center top; border-radius:12px; behavior:url(pie/PIE.php); position:relative; }
.prd_list_rel .sam a { display:block; width:100%; height:196px; box-shadow:2px 2px 2px rgba(0,0,0,0.4) inset; background:url(../img/index_prd_bg.jpg) repeat-x #cce252 center top; border-radius:12px; behavior:url(pie/PIE.php); position:relative; }
.prd_list_rel .prd a .prd_img_rel { width:100%; height:159px; text-align:center; font-size:0; }
.prd_list_rel .prd a .prd_img_rel i { display:inline-block; height:100%; vertical-align:middle; }
.prd_list_rel .prd a .prd_img_rel img { vertical-align:middle; max-width:159px;max-height:152px;}
.prd_list_rel .prd a .prd_name_rel { width:100%; height:28px; padding:0px 0px; text-align:center; font-size:12px; color:#666666; line-height:18px; }
.prd_list_rel .prd a .prd_name_rel .prd_n {display: block; margin:0 auto; width: 96%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.prd_list_rel .prd a .prd_name_rel img {vertical-align:middle;}
.prd_list_rel .prd a:hover { opacity: 0.75;transform: translateY(-3px); -webkit-transform: translateY(-3px); box-shadow:2px 2px 2px 2px rgba(0, 0, 0, 0.20)}
.prd_list_rel .prd a:hover .prd_name_rel { color:#000000; xtext-decoration:underline; }
/* ******** */

.prd_detail_area { margin-left:17px; margin-top:15px; border:3px solid #cccccc; box-shadow:0px 0px 5px rgba(0,204,255,0.7); border-radius:12px; 
background:#effbca; background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ffffff), to(#effbca)); background:-webkit-linear-gradient(#ffffff, #effbca); background:-moz-linear-gradient(#ffffff, #effbca); background:-ms-linear-gradient(#ffffff, #effbca); background:-o-linear-gradient(#ffffff, #effbca); background:linear-gradient(#ffffff, #effbca); -pie-background:linear-gradient(#ffffff, #effbca); 
behavior:url(pie/PIE.php); position:relative; }
.prd_detail_area .prd_detail { width: calc( 100% - 22px); xheight:813px; padding-top:34px; padding-left:22px; box-shadow:2px 2px 2px rgba(0,0,0,0.4) inset; border-radius:9px; behavior:url(pie/PIE.php); position:relative; }
/*.prd_detail_area .prd_code { position:absolute; right:-3px; top:41px; width:170px; height:25px; padding:6px 18px; background-color:#19a6d4; font-size:24px; color:#ffffff; }*/
.prd_detail_area .prd_code {position:sticky; z-index:1; float:right;right:-3px; top:115px; width:170px; height:25px; padding:6px 18px; background-color:#19a6d4; font-size:24px; color:#ffffff; }
.prd_detail_area .prd_name  {padding-left:4px; padding-bottom:10px; margin-bottom:15px; border-bottom:1px solid #75c5ea; font-size:24px; color:#0197c8; }
.prd_detail_area .prd_photo { padding-left:25px }

.prd_large_photo { float:left; width:456px; height:375px; text-align:center; font-size:0; max-width: 100%; }
.prd_large_photo i { display:inline-block; height:100%; vertical-align:middle; }
.prd_large_photo img { vertical-align:middle; }
.prd_large_photo a img { display:none; max-width:456px;max-height:375px;  }
.prd_large_photo a.active  img { display:block; }
.prd_other_photo_area { float:right; width:130px; padding-right:48px; padding-top:5px; }
.prd_other_photo_area .prd_other_up_row { width:130px; height:12px; padding-bottom:6px; }
.prd_other_photo_area .prd_other_up_row a {  display:block; width:18px; height:12px; margin:0px auto; background:url(../img/prd_other_row.gif) no-repeat left top; }
.prd_other_photo_area .prd_other_down_row { width:130px; height:12px; padding-top:6px; }
.prd_other_photo_area .prd_other_down_row a {  display:block; width:18px; height:12px; margin:0px auto; background:url(../img/prd_other_row.gif) no-repeat left bottom; }
.prd_other_photo_area .prd_other_list { width:120px; height:363px; position:relative; overflow:hidden; }
.prd_other_photo_area .other_list { position:absolute; left:0px; top:0px; width:140px; overflow:auto;max-height:365px;overflow-x:hidden;overflow-y:auto;}

.prd_other_photo_area .prd_other { width:106px; height:106px; margin:4px 4px 10px 4px; border:3px solid #cccccc; box-shadow:0px 0px 5px rgba(0,204,255,0.7); border-radius:6px; background:url(../img/index_prd_bg.jpg) repeat-x center center; behavior:url(pie/PIE.php); position:relative; }
.prd_other_photo_area .prd_other :hover{ opacity: 0.75;}
.prd_other_photo_area .prd_other a { display:block; width:90px; height:90px; padding:8px; box-shadow:2px 2px 2px rgba(0,0,0,0.4) inset; border-radius:4px; behavior:url(pie/PIE.php); position:relative; text-align:center; font-size:0; }
.prd_other_photo_area .prd_other a i { display:inline-block; height:100%; vertical-align:middle; }
.prd_other_photo_area .prd_other a img { vertical-align:middle; max-width:90px; max-height:90px; }

.prd_detail_area .prd_info_area { width:660px; padding-left:4px; padding-bottom:22px; }
.prd_detail_area .prd_info_title { padding-bottom:6px; border-bottom:2px solid #acdfef; }
.prd_detail_area .prd_info_title span { display:block; width:100%; height:27px; background:url(../img/title.png) no-repeat; }
.prd_detail_area .prd_info_content { padding-left:4px; padding-top:14px; }
.prd_detail_area .prd_info_content ul.tick { width:640px; }
.prd_detail_area .prd_info_content ul.tick table li { float:left; width:270px; min-height:18px; padding-left:32px; padding-bottom:4px; background:url(../img/tick.png) no-repeat left top; font-size:17px; color:#333333; }
.prd_detail_area .prd_info_content ul.tick table td {vertical-align:top;}

.prd_detail_area .prd_info_content_rel {height:250px; padding-left:0px; padding-top:0px; overflow: hidden; overflow-x:auto;}

.prd_detail_area .prd_info_arrow_rel {height:30px;}
.prd_info_arrow_rel .left_rel_side { float:left; width:330px; height:30px; pedding-top:4px; }
.prd_info_arrow_rel .right_rel_side { float:right; width:330px; height:30px; pedding-top:4px; }
.left_rel_side .prd_rel_left_row { width:330px; height:30px; padding-top:4px; }
.left_rel_side .prd_rel_left_row a { display:block; width:18px; height:25px; margin:0px 200px; background:url(../img/prd_rel_row.gif) no-repeat left; }
.right_rel_side .prd_rel_right_row { width:330px; height:30px; padding-top:4px; }
.right_rel_side .prd_rel_right_row a { display:block; width:18px; height:25px; margin:0px 100px; background:url(../img/prd_rel_row.gif) no-repeat right; }

#prd_features_info { }
#prd_features_info .prd_info_title span { background-position:0 -150px !important; font-size:20px; color:#25b2e9; font-weight: bold; background: none; }
#prd_features_info0 { }
#prd_features_info0 .prd_info_title span { background-position:0 -150px !important; font-size:20px; color:#25b2e9; font-weight: bold; background: none; }
#prd_features_info1 { }
#prd_features_info1 .prd_info_title span { background-position:0 -150px !important; font-size:20px; color:#25b2e9; font-weight: bold; background: none; }
#prd_features_info2 { }
#prd_features_info2 .prd_info_title span { background-position:0 -150px !important; font-size:20px; color:#25b2e9; font-weight: bold; background: none; }

#prd_spec_info { }
#prd_spec_info .prd_info_title span { background-position:0 -200px !important; font-size:20px; color:#25b2e9; font-weight: bold; background: none; }
#prd_spec_info0 { }
#prd_spec_info0 .prd_info_title span { background-position:0 -200px !important; font-size:20px; color:#25b2e9; font-weight: bold; background: none; }
#prd_spec_info1 { }
#prd_spec_info1 .prd_info_title span { background-position:0 -200px !important; font-size:20px; color:#25b2e9; font-weight: bold; background: none; }
#prd_spec_info2 { }
#prd_spec_info2 .prd_info_title span { background-position:0 -200px !important; font-size:20px; color:#25b2e9; font-weight: bold; background: none; }

#prd_rel_info { }
#prd_rel_info .prd_info_title span { background-position:0 -340px !important; font-size:20px; color:#25b2e9; font-weight: bold; background: none; }

.prd_ref{width:456px;}
.prd_ref a{padding:0px 10px;}	

/*-------------------------------------------------------------------------------------*/
/* CONTACT US */
.c_us_main{width:906px;margin:0 auto;}
.c_us_content {padding:10px 0px 1px 0px;}
.c_us_content p{line-height:1.7em;padding:10px 35px;font-family:微軟正黑體;font-size:14px;font-weight:bold;color:#333333;}
.c_us_img{padding:20px 0px 50px 0px;}
.c_us_title{background:url(../img/c_us_title_bg.png) center no-repeat; padding:10px 35px;font-weight:bold;color:#ffffff;font-size:18px;font-family:微軟正黑體;}
.map_left{padding:10px 35px;}
.map_left .map_bg {width:551px;height:403px;background:url(../img/map_bg.png) center no-repeat;}
.map_left .map{width:539px;height:391px;}
.map_left #map_canvas { position:relative;z-index:99999;top:6px;left:6px;}
.map_left .map_desc{padding-left:15px;background:url(../img/c_end.png) center bottom no-repeat;padding-top:5px;font-family:微軟正黑體;font-size:14px;width:301px;font-weight:bold;color:#333333;}
.map_left .map_desc .map_add,.map_tel,.map_fax,.map_email,.map_fb{padding:0px 0px 20px 25px;}

.map_left .map_desc .fb_btn{padding-bottom:35px;}
.map_left .map_desc .map_add{background:url(../img/c_add.png) left top no-repeat;}
.map_left .map_desc .map_tel{background:url(../img/c_tel.png) left top no-repeat;}
.map_left .map_desc .map_fax{background:url(../img/c_fax.png) left top no-repeat;}
.map_left .map_desc .map_email{background:url(../img/c_email.png) left top no-repeat;}
.map_left .map_desc .map_email a{color:#333333;}
.map_left .map_desc .map_email a:hover{color:#46b30f;}
.map_left .map_desc .map_fb{background:url(../img/c_fb.png) left top no-repeat;color:#20599d!important;padding-bottom:25px;}
.map_left .map_desc .map_fb a{color:#20599d!important}
.map_left .map_desc .map_fb a:hover{color:#3bb1fe!important}
.map_left tr{vertical-align:top;}
.map_left .gmnoprint{display:none;}
.map_left .gm-style-cc{display:none;}

.trans{font-family:微軟正黑體;padding:10px 0px 10px 35px;font-size:14px!important;font-weight:bold;color:#333333;}
.trans tr{vertical-align:top;font-size:14px!important;}
.trans td{padding:0px 30px 3px 0px;font-size:14px!important;}
.trans_title {color:#0099ff;font-size:17px!important;}
td.trans_img{color:#3bb1fe;background:url(../img/tran_map.png) left top no-repeat;padding-left:15px;padding-right:0px!important;}
td#tran_line{border-style:solid; border-width:0 0px 0px 1px; border-color: #c9eefa;padding-left:30px;padding-right:0px!important;}
td.trans_img a{color:#3bb1fe;}
td.trans_img a:hover{color:#6f19b1;}



/*********************** 14-7 *******************************/
 .member_area ul li >a {
    color: #0197c8;
}

.member_area ul li a span.fa.a1 {
    font-size: 12px;
}

.member_area ul li a span.fa.a2 {
    font-size: 14px;
}

 .member_area ul li {
     display:inline-block;
     vertical-align:middle;
     padding:0 5px;
 }
 
  .member_area ul {
      text-align:right;
  }
  
#top .top_area{position: relative;}
.member_area {
    position: absolute; top:0;
    right: 0;    z-index: 99;
}

.register_area .register_row select, .register_area .register_row input[type=password], .register_area .register_row input[type=email], .register_area .register_row input[type=text],
.login_area .login_box_content input[type=password], .login_area .login_box_content input[type=email], .login_area .login_box_content input[type=text]{
    height:40px !important;
    padding:10px !important;
}

.register_area .register_row label,
.login_area .login_box_content label{
    font-size: 14px;
    padding-bottom:7px;
}


/*********************** 17-06 *******************************/



@media(max-width:1024px){
	
	* {
    box-sizing: border-box;
}

#top .menu_area ul.menu_list li a.lv1 {
    height: auto;
    padding-top: 0;
}
	
	img{
		max-width:100%;
	}

#top .top_area, #top .company_name , #main .common_search , .home_banner .banner_area,.prd_cate_area .prd_cate_list , .index_box_area , #footer .footer_area ,
#main .search_area , #main .content_area , #main .title_area {
	width:100%;
	max-width:98%;
	padding:0 15px;
	height:auto;
}
#main .content_area { padding-top: 17px !important; }

.home_banner .banner_text,#top .company_name span , .home_banner .banner_show , .home_banner .banner_text .bnr_slo p{
	width:100%;
}

.home_banner .banner_clip {display:none;}

#index_prd_box_N {
    width: 100%;
    display: block;
}

#banner .banner_show img{
	  width: 100%;
}

#top .company_name span , .home_banner .banner_show , .home_banner{
	height:auto;
}

.index_box_N .index_box_content {
	height:auto;
	margin-bottom:30px;
}

#index_prd_box_N .index_box_content .box_prd {
    margin: 0 10px;
}

#footer{padding:10px 0;}

#footer .copyright {float: none;}

.footer_area {
    text-align: center;
}

#main .left_side {
    width: 22%;
}

#main .right_side {
    width: 78%;
}

#main .search_area {
    width: 70%;
    padding: 10px 15px;
    background-position: right center;
}

#main .tel_area {
    width: 25%;
    background-size: 100%;
}

#main .title {
	width:100%; height:auto;     padding: 0;
}

#main .title span{height:auto; padding: 10px 0;    text-align: right; }

.content.prd_list {
    height: auto;
}

#main .left_side .left_menu_area {background-size:cover;}

#main .title span img {
    margin: 0 0 0  20px !important;
	    vertical-align: middle;
}

span#title_product {
    background-position: 0px 6px !important;
}

}


@media(min-width:768px){
    #main .left_side .left_menu .pulldown {
        display: none;
    }
}

@media(max-width:767px){
	
	#top .menu_area ul.menu_list li .dropdown_menu{width:100%; }
	
	#top .menu_area ul.menu_list li .dropdown_menu .drop_row {right:20px;}
	
	#main .content_area {
	width:100%;
	max-width:99%;
	padding: 0 3px;
	height:auto;
}
	
span.arrow {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

	span.arrow .active {
    position: absolute;
    left: 0;
    top: -10px;
}
	
#top .menu_area ul.menu_list.open {
    left: 0;
    opacity: 1;
}

#top .menu_area ul.menu_list li a.lv1 {
	padding-bottom:10px;
}
	
#top .menu_area ul.menu_list {
    text-align: left;
    position: fixed;
    top: 0;
    width: 70%;
    background: #cef0fa;
    z-index: 9;
    box-shadow: 3px 0 5px #989898;
    height: 100vh;
    overflow: scroll;
    transition: all .5s;
    left: -100%;
    opacity: 0;
}

#top .menu_area ul.menu_list li {
	display:block;    position: initial;  
}


#main .left_side , #main .right_side , #main .left_side .left_menu_area , #main .left_side .left_menu{
    width: 100%;
}

.left_side .left_menu_area { display: none; }


#top .company_name span {
    height: 32px;
    background-size: 100%;
}

#main .showme , #main .left_side .left_menu_area , #top .company_name span , 
#main .left_side .sub_title {margin-left:0;}
/* #main .left_side .sub_title:after { font-family: 'FontAwesome'; content: "\f107"; position: absolute; right: 10px; } */
#main .left_side .sub_title i { display: block; position: absolute; right: 3px; margin-top: -25px; }

#main .left_side .sub_title_pd { display: none; margin-left:0;}
/* #main .left_side .sub_title:after { font-family: 'FontAwesome'; content: "\f107"; position: absolute; right: 10px; } */
#main .left_side .sub_title_pd i { display: none; position: absolute; right: 3px; margin-top: -25px; }
	
#top .top_common_search {
	opacity:1;
	transition: all 2s ease 0s;
	}
#top .top_search_area {
  	opacity:1;
	transition: all 2s ease 0s;
}
	
#top .tel_area {
	width: 170px;
	float: right;
}

#main .search_area {
	display : none;
}
	
#main .search_area form label {
    white-space: nowrap;
}
#main .search_area form {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#main .search_area {margin-right:0;}

#main .search_area input[type=search], #main .search_area {
    width: 100%;
}

#main .search_area{background-size:cover;}
#main .tel_area {
    width: 100%;
    background-size: contain;
    margin: 10px 0;
    background-position: center;
}
#main .index_box_area {
	max-width:100%;
	padding:0 3px;
}
	
.main_side .left_side {
    	position: sticky;
    	z-index: 1;
		top: 105px;
}

.main_side .left_side .sub_title{
	    width: 115px;
		border-radius: 15px !important;
		float: left;
}

.main_side .left_side .sub_title_pd{
	    width: 115px;
		border-radius: 15px !important;
		float: right;
}
	
.prd_list .prd {
    max-width: 205px;
    margin: 0 5px 25px 0;
    float: none;
    display: inline-block;
    width: 177px;
}
.prd_list .prd a .prd_img img {
    max-width: 170px;
}
.prd_list .prd a .prd_img_comp img {
    max-width: 170px;
}
.prd_list .prd a input[name=sel_comp] + label {
    margin: 8px 0px 0px 60px;
}
.prd_list .prd a input[id=selbox] {
    margin: 8px 0px 0px 140px;
}
	
.content.prd_list {
    padding: 25px 0;
    text-align: center;
}

.left_side {
    margin-bottom: 30px;
}

#main .title span {
    background-position: 0 22px !important;
    background-size: 80px;
    padding: 5px 0;
}

.prd_detail_area {
    width: 100%;
margin-left: 0;}

.prd_detail_area .prd_name {padding-left:0 !important;}

.prd_detail_area .prd_detail {width: 100%; padding:15px;    }

.prd_detail_area .prd_info_content ul.tick  , .prd_detail_area .prd_info_area , .prd_detail_area .prd_info_area ,
.prd_detail_area .prd_info_area {width:100%;}

.prd_detail_area .prd_info_content ul.tick table li {
    width: auto;
}

.prd_info_arrow_rel .left_rel_side, .prd_info_arrow_rel .right_rel_side, .left_rel_side .prd_rel_left_row ,
.right_rel_side .prd_rel_right_row {width:40px;}

.left_rel_side .prd_rel_left_row a ,.right_rel_side .prd_rel_right_row a {margin:0;}
.prd_photo .prd_large_photo a.active img {
    max-width: 100% !important;
}

.prd_photo .prd_large_photo img {
    max-width: 90% !important;
 }
	
.prd_detail_area .prd_photo {
    padding-left: 0;
}
.prd_photo .prd_large_photo {
    float: none;
    width: 100%;
    height: auto;
}

.prd_other_photo_area .prd_other a i , .prd_list_rel , .prd_list_rel .prd {
	height:auto;
}

.prd_detail_area .prd_code {
	right:0;
	top:105px;
	position:sticky;
	z-index:1;
	height:auto;
	width: auto;
	border-radius: 23px;
}

.prd_other_photo_area{
    width: 100%;
    padding-right: 0;
}
.prd_other_photo_area .prd_other_down_row, .prd_other_photo_area .prd_other_up_row a { display: none }

.prd_other_photo_area .prd_other_list{
    height:100px;
    width: 100%;
}
.prd_other_photo_area .other_list{
    display: flex;
    align-items: center;
        gap: 10px;
        height: 120px !important;
        overflow-x: scroll;
        width: 100%;
    }









#main .page_back_btn {
    padding: 15px 0;
    text-align: center;
}

.prd_detail_area .prd_info_content {
    padding: 0 !important;
    text-align: left;
}

.prd_detail_area .prd_info_content center {
    text-align: left;
}

.c_us_main {width:100%;}

.map_left .map ,.map_left .map_bg {    width: 100%;  }

.map_left table tr td ,.trans td {
    display: block;
    width: 100%;
}

.trans {
    padding: 0 15px;
}

td#tran_line {
    padding: 10px 0;
    border: 0;
}

.payment {
    padding: 0 15px !important;
}

.prd_cate_area .prd_cate_list {
    padding: 30px 0;
}

.prd_cate_area .prd_cate_list a {
    margin-bottom: 15px;
}

#index_prd_box_N .index_box_content .box_prd {
    margin-bottom: 20px;
	margin-left:3px;
    margin-right:3px;
    max-width: 177px;
}
#index_prd_box_N .index_box_content a .prd_img img { 
    max-width:160px;
}

}



/********* MENU **********/


.nav_area > ul > li {    display: inline-block;  padding: 10px 15px;    }
.nav_area.en > ul > li { padding: 10px 12px; }

ul.sub-menu ul.sub-menu{ margin-top: 12px;}

.nav_area ul li:last-child{padding-right:0; border-right:0;  }

.nav_area ul li a { color: #000; font-size: 15px;  display: inline-block;  vertical-align: middle;padding: 0 5px 0 5px;}

ul.sub-menu {    position: absolute;  background: #24bcee;     z-index: 555;	text-align:left;	padding:10px 0;   }

ul.sub-menu li a{color:#fff; line-height:20px;  padding:3px 10px 7px 10px; font-size:15px; display:inline-block; text-transform:capitalize;      font-weight: 400; } 

ul.sub-menu li{	display:block;}

ul.sub-menu li a{width:90%;}

ul.sub-menu li.menu-item-has-children {    position: relative;  }

ul.sub-menu li.menu-item-has-children .arrow{color:#000;  padding-left: 0;  }

span.arrow  {  font-size:16px;   }


#top .top_area {
    height: auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

#top .menu_area {
    float: none;
    padding-top: 3px;
        width: 100%;
    text-align: right;
}


@media(min-width:992px){
   

ul.sub-menu li {
    display: inline-block;
    width: 49%;
}
	
.nav_area ul li a{    padding: 10px 8px;}
.nav_area > ul > li > a{font-size: 18px;   
text-align: center;  font-weight: 600;
font-family: 'Arial'; padding: 15px 0px; color: #0d6797; 
text-decoration: none;}

	
.nav_area ul li:hover ul.sub-menu {	display:block;}

.nav_area > ul > li ul.sub-menu {font-size: 16px; font-family: 'Oxygen'; font-weight: 400;  transform-origin: 50% 0;  transform: scaleY(0) translateZ(0);  transition: transform 0.3s, opacity 0.3s; display: block;  }

ul.sub-menu {min-width: 150px;}

ul.sub-menu li ul.sub-menu {    left: 100%;    top: -22px;    width: 100%;  }

.nav_area > ul > li:hover > ul.sub-menu, .nav_area ul.sub-menu > li:hover > ul.sub-menu {   transform: scaleY(1) translateZ(0);   }

.nav_area ul li:hover ul.sub-menu {    display: block; }
	
ul.menu{display:block !important;    }

span.arrow{display: inline-block;
padding-left:5px; font-size: 12px; color: #49b232;}


label.toggle {    display: none;  }

.nav_area ul li a img {    vertical-align: middle;	 margin-right: 5px;   }

ul.sub-menu li.menu-item-has-children .arrow {    transform: rotate(-90deg);  }

ul.sub-menu > li:hover { background: #142767;}

ul.sub-menu > li:hover > a { color: #fff; text-decoration: none;}

ul.sub-menu > li:hover .arrow{  color:#fff;  }

nav.nav_area ul li.hide-desktop{
    display:none !important;
}

}


#top .menu_area ul.menu_list {
    display: none;
}



@media (max-width:991px){
    
    div#banner.home_banner {
    overflow: hidden;
}
    
	.member_area {display:none;}
  span.arrow{top:30px;}

    .header .row {
        align-items: center;
    }
	
	.container { max-width: 100%;  }

	nav.nav_area ul li a{ color: #fff; text-decoration: none;}
	
	ul.menu  {    overflow-y: scroll; position: fixed;  width: 80%; left: 0; text-align: left; background: #2abeef; z-index: 2;  padding: 15px 10px; z-index: 10; top: 0; height: 100%;left: -100%; transition: all .4s;}
	
	ul.menu.open {left:0;}
	
	.toggle { font-size: 25px; margin-right: 25px; padding: 10px 0; right: 0; text-align: right;  display: block;  z-index: 999;  position: absolute; top: 0px;}

    .nav_area > ul > li{padding: 10px 0;}

	.nav_area > ul > li > a {    }
	
	.nav_area ul li a {     font-size: 18px; }
	
	nav.nav_area ul li{display:block;     position: relative;    border: 0;}
	
    span.arrow {  position: absolute;  right: 10px;  color: #fff;  width: 40px;  text-align: center;  height: 30px;   }

    .sub-menu span.arrow i:before{ content: '\f105'; }

    span.arrow.close-icon i:before {  content: '\f106';  }

    ul.sub-menu {   display: none; position: relative; background: transparent;  padding: 0; }
	
	ul.sub-menu {    display: none;    position: relative;  	    background: transparent; padding:0; }
	
	ul li .sub-menu li a {    line-height: 14px;  }
	
	ul.sub-menu span.arrow {    right: 20px;    text-align: right;  }
	
	span.arrow.close-icon i:before {    content: '\f106';  }

	ul.sub-menu li.menu-item-has-children  span.arrow.close-icon i:before {    content: "\f106";  }
	
    .nav_area > ul > li > ul.sub-menu{   padding: 0px 5px 0px 0px; font-family: 'Oxygen';}

    .sub-menu span.arrow{ top: 0;  }

	.nav_area ul li > ul li {  display: block; position: relative;  border: 0;  padding: 0 5px 5px 5px; }

	label.toggle-menu {
    display: flex;
    height: 45px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
   
}
 
	label.toggle-menu span {
    display: block;
    width: 35px;
    height: 3px;
    background: #000;
    margin-top: 5px;
}
#top .top_area .logo {padding-left:0;}
#top .top_area {    align-items: center;  }
label.toggle-menu {    align-items: flex-end; }


}


.buy-btn {
    display: inline-block;
}


.prd_other_photo_area .prd_other a i {
    display: none;
}