#preloader{overflow:hidden;background-color:#fff;height:100%;left:0;position:fixed;top:0;width:100%;z-index:999999;}
.classy-load{-webkit-animation:2000ms linear 0s normal none infinite running classy-load;animation:2000ms linear 0s normal none infinite running classy-load;background:transparent none repeat scroll 0 0;border-color:#dddddd #dddddd #111111;border-radius:50%;border-style:solid;border-width:2px;height:40px;left:calc(50% - 20px);position:relative;top:calc(50% - 20px);width:40px;z-index:9;}
@-webkit-keyframes classy-load{
    0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}
    100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}
}
@keyframes classy-load{
    0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}
    100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}
}

.header_area { position:relative; z-index:10000;}
.header_area.sticky { position:fixed; top:0; left:0; width:100%; z-index:9999;}

.main_header_area { background:#f0f0f0;}
.main_header_area .container { max-width:1200px; margin:auto;}

.navigation {width:100%;display:table;position:relative;}
.navigation *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.navigation-portrait{height:48px}
.navigation-fixed{position:fixed;top:0;left:0;z-index:19998}
.navigation-hidden{width:0!important;height:0!important;margin:0!important;padding:0!important}
.align-to-right{float:right}

.nav-header{ /*float:left;*/ position:absolute;z-index:123; top:0; left:0;padding:10px;}
.navigation-hidden .nav-header{display:none}

.nav-brand{ display:inline-block; width:200px; }
.nav-brand-m { display:none;}
.nav-brand:hover,
.nav-brand:focus{color:#343a40}
.navigation-portrait .nav-brand{font-size:18px;}

.nav-brand img { max-width:100%}
.nav-brand h1 { text-indent:-9999px; margin:0; width:1px; height:1px; overflow:hidden;}

/*
.nav-logo>img{height:48px;margin:11px auto;padding:0 15px;float:left}
.nav-logo:focus>img{outline:initial}
.navigation-portrait .nav-logo>img{height:36px;margin:6px auto 6px 15px;padding:0}
*/

.nav-toggle{width:33px;height:33px; position:absolute;top:10px;right:10px;display:none;cursor:pointer}
.nav-toggle:before{content:"";position:absolute; top:6px; right:3px;; width:26px;height:2px;background-color:#343a40;border-radius:10px;box-shadow:0 .5em 0 0 #343a40,0 1em 0 0 #343a40;}
.nav-toggle:after{content:"MENU";position:absolute; bottom:-10px; right:0; width:100%; font-size:12px;}

.navigation-portrait .nav-toggle{display:block}
.navigation-portrait .nav-menus-wrapper{ width:100%;height:100%;top:0;left:-100%;position:fixed;background-color:#fff;z-index:20000;overflow-y:auto;-webkit-overflow-scrolling:touch;-webkit-transition-duration:.5s;transition-duration:.5s;-webkit-transition-timing-function:ease;transition-timing-function:ease;}
.navigation-portrait .nav-menus-wrapper.nav-menus-wrapper-right{left:auto;right:-100%;}
.navigation-portrait .nav-menus-wrapper.nav-menus-wrapper-open{left:0}
.navigation-portrait .nav-menus-wrapper.nav-menus-wrapper-right.nav-menus-wrapper-open{left:auto;right:0}
.nav-menus-wrapper-close-button{width:40px;height:40px; text-align:center; margin:10px 7px;display:none;float:right;color:#343a40;font-size:26px;cursor:pointer;}
.navigation-portrait .nav-menus-wrapper-close-button{display:block}

.nav-menu{margin:40px 0 0 0;padding:0;list-style:none;line-height:normal;font-size:0; padding: 0 10px 0 220px; text-align:right;}
.navigation-portrait .nav-menu{width:100%}
.navigation-landscape .nav-menu.nav-menu-centered{float:none;text-align:center}
.navigation-landscape .nav-menu.nav-menu-centered>li{float:none}
.nav-menu>li{display:inline-block;text-align:left}

.navigation-portrait .nav-menu>li{width:100%;position:relative;border-top:solid 1px #f0f0f0}
.navigation-portrait .nav-menu>li:last-child{border-bottom:solid 1px #f0f0f0}

.nav-menu+.nav-menu>li:first-child{border-top:none}
.nav-menu>li>a { padding:18px 7px;display:inline-block;text-decoration:none;font-size:15px;color:#333;-webkit-transition:color .3s,background .3s;transition:color .3s,background .3s}

.navigation-portrait .nav-menu>li>a{width:100%;height:auto;padding:12px 15px 12px 26px}

.nav-menu>li:hover>a,.nav-menu>li.active>a,.nav-menu>li.focus>a{color:#c00}
.nav-menu>li>a>i,.nav-menu>li>a>[class*=ion-]{width:18px;height:16px;line-height:16px;-webkit-transform:scale(1.4);transform:scale(1.4)}
.nav-menu>li>a>[class*=ion-]{width:16px;display:inline-block;-webkit-transform:scale(1.8);transform:scale(1.8)}

.navigation-portrait .nav-menu.nav-menu-social{width:100%;text-align:center}
.nav-menu.nav-menu-social>li{text-align:center;float:none;border:none!important}
.navigation-portrait .nav-menu.nav-menu-social>li{width:auto}
.nav-menu.nav-menu-social>li>a>[class*=ion-]{font-size:12px}
.nav-menu.nav-menu-social>li>a>.fa{font-size:14px}
.navigation-portrait .nav-menu.nav-menu-social>li>a{padding:15px}

.submenu-indicator{margin-left:6px;margin-top:6px;float:right;-webkit-transition:all .2s;transition:all .2s}
.navigation-portrait .submenu-indicator{width:54px;height:44px;margin-top:0;position:absolute;top:0;right:0;text-align:center;z-index:20000}
.submenu-indicator-chevron{height:8px;width:8px;display:block;border-style:solid;border-width:0 1px 1px 0;border-color:transparent #70798b #70798b transparent;-webkit-transform:rotate(45deg);transform:rotate(45deg);-webkit-transition:border .2s;transition:border .2s}
.navigation-portrait .submenu-indicator-chevron{position:absolute;top:18px;left:23px}
.nav-menu>li:hover>a .submenu-indicator-chevron,.nav-menu>.active>a .submenu-indicator-chevron,.nav-menu>.focus>a .submenu-indicator-chevron{border-color:transparent #967adc #967adc transparent}
.navigation-portrait .submenu-indicator.submenu-indicator-up{-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}
.nav-overlay-panel{width:100%;height:100%;top:0;left:0;position:fixed;display:none;z-index:19999}
.no-scroll{width:100%;height:100%;overflow:hidden}

.nav-button{margin:18px 15px 0;padding:8px 14px;display:inline-block;color:#fff;font-size:14px;text-align:center;text-decoration:none;border-radius:4px}
.nav-button:hover,.nav-button:focus{color:#fff;text-decoration:none}
.navigation-portrait .nav-button{width:calc(100% - 52px);margin:17px 26px}
.nav-text{margin:25px 15px;display:inline-block;color:#343a40;font-size:14px}
.navigation-portrait .nav-text{width:calc(100% - 52px);margin:12px 26px 0}
.navigation-portrait .nav-text+ul{margin-top:15px}
.nav-dropdown{min-width:180px;margin:0;padding:0;display:none;position:absolute;list-style:none;z-index:98;white-space:nowrap; background:#f0f0f0;}
.navigation-portrait .nav-dropdown{width:100%;position:static;left:0}

.nav-dropdown .nav-dropdown{left:100%;border:solid 1px #f0f0f0;}
.nav-menu>li>.nav-dropdown{border:solid 1px #f0f0f0}
.nav-dropdown>li{width:100%;float:left;clear:both;position:relative;text-align:left}
.nav-dropdown>li>a{width:100%;padding:16px 20px;display:inline-block;text-decoration:none;float:left;font-size:13px;color:#343a40;background-color:#fdfdfd;}
.nav-dropdown>li:hover>a,.nav-dropdown>li.focus>a{color:#c00}
.nav-dropdown.nav-dropdown-left{right:0}
.nav-dropdown>li>.nav-dropdown-left{left:auto;right:100%}

.navigation-landscape .nav-dropdown.nav-dropdown-left>li>a{text-align:right}

.navigation-portrait .nav-dropdown>li>a{padding:12px 20px 12px 20px}
.navigation-portrait .nav-dropdown>li>a:before { content:''; display:block; position:absolute; top:0; left:10px; width:1px; height:100%; background:#e3e3e3;}
.navigation-portrait .nav-dropdown>li>ul>li>a{padding-left:30px}
.navigation-portrait .nav-dropdown>li>ul>li>ul>li>a{padding-left:70px}
.navigation-portrait .nav-dropdown>li>ul>li>ul>li>ul>li>a{padding-left:90px}
.navigation-portrait .nav-dropdown>li>ul>li>ul>li>ul>li>ul>li>a{padding-left:110px}

.nav-dropdown .submenu-indicator{right:15px;top:10px;position:absolute}
.navigation-portrait .nav-dropdown .submenu-indicator{right:0;top:0}
.nav-dropdown .submenu-indicator .submenu-indicator-chevron{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}
.navigation-portrait .nav-dropdown .submenu-indicator .submenu-indicator-chevron{-webkit-transform:rotate(45deg);transform:rotate(45deg)}
.nav-dropdown>li:hover>a .submenu-indicator-chevron,.nav-dropdown>.focus>a .submenu-indicator-chevron{border-color:transparent #c00 #c00 transparent}
.navigation-landscape .nav-dropdown.nav-dropdown-left .submenu-indicator{left:10px}
.navigation-landscape .nav-dropdown.nav-dropdown-left .submenu-indicator .submenu-indicator-chevron{-webkit-transform:rotate(135deg);transform:rotate(135deg)}
.nav-dropdown-horizontal{width:100%;left:0;background-color:#fdfdfd;border-top:solid 1px #f0f0f0}
.nav-dropdown-horizontal .nav-dropdown-horizontal{width:100%;top:100%;left:0}
.navigation-portrait .nav-dropdown-horizontal .nav-dropdown-horizontal{border-top:none}
.nav-dropdown-horizontal>li{width:auto;clear:none;position:static}
.navigation-portrait .nav-dropdown-horizontal>li{width:100%}
.nav-dropdown-horizontal>li>a{position:relative}
.nav-dropdown-horizontal .submenu-indicator{height:18px;top:11px;-webkit-transform:rotate(90deg);transform:rotate(90deg)}
.navigation-portrait .nav-dropdown-horizontal .submenu-indicator{height:42px;top:0;-webkit-transform:rotate(0deg);transform:rotate(0deg)}
.navigation-portrait .nav-dropdown-horizontal .submenu-indicator.submenu-indicator-up{-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}

.megamenu-panel{width:100%;padding:15px;display:none;position:absolute;font-size:14px;z-index:98;text-align:left;color:inherit;border-top:solid 1px #f0f0f0;background-color:#fdfdfd;box-shadow:0 10px 20px rgba(0,0,0,.075)}
.navigation-portrait .megamenu-panel{padding:25px;position:static;display:block}
.megamenu-panel [class*=container]{width:100%}
.megamenu-panel [class*="container"] [class*="col-"]{padding:0}
.megamenu-panel-half{width:50%}
.megamenu-panel-quarter{width:25%}

.navigation-portrait .megamenu-panel-half,.navigation-portrait .megamenu-panel-quarter{width:100%}
.megamenu-panel-row{width:100%}
.megamenu-panel-row:before,.megamenu-panel-row:after{display:table;content:"";line-height:0}
.megamenu-panel-row:after{clear:both}
.megamenu-panel-row [class*=col-]{display:block;min-height:20px;float:left;margin-left:3%}
.megamenu-panel-row [class*=col-]:first-child{margin-left:0}

.navigation-portrait .megamenu-panel-row [class*=col-]{float:none;display:block;width:100%!important;margin-left:0;margin-top:15px}
.navigation-portrait .megamenu-panel-row:first-child [class*=col-]:first-child{margin-top:0}

.megamenu-panel-row .col-1{width:5.583333333333%}
.megamenu-panel-row .col-2{width:14.166666666666%}
.megamenu-panel-row .col-3{width:22.75%}
.megamenu-panel-row .col-4{width:31.333333333333%}
.megamenu-panel-row .col-5{width:39.916666666667%}
.megamenu-panel-row .col-6{width:48.5%}
.megamenu-panel-row .col-7{width:57.083333333333%}
.megamenu-panel-row .col-8{width:65.666666666667%}
.megamenu-panel-row .col-9{width:74.25%}
.megamenu-panel-row .col-10{width:82.833333333334%}
.megamenu-panel-row .col-11{width:91.416666666667%}
.megamenu-panel-row .col-12{width:100%}

.megamenu-tabs{width:100%;float:left;display:block}
.megamenu-tabs-nav{width:20%;margin:0;padding:0;float:left;list-style:none}

.navigation-portrait .megamenu-tabs-nav{width:100%}
.megamenu-tabs-nav>li>a{width:100%;padding:10px 16px;float:left;font-size:13px;text-decoration:none;color:#343a40;border:solid 1px #eff0f2;outline:0;background-color:#fff}
.megamenu-tabs-nav>li.active a,.megamenu-tabs-nav>li:hover a{background-color:#f5f5f5}
.megamenu-tabs-pane{width:80%;min-height:30px;padding:20px;float:right;display:none;font-size:13px;color:#343a40;border:solid 1px #eff0f2;background-color:#fff}
.megamenu-tabs-pane.active{display:block}

.navigation-portrait .megamenu-tabs-pane{width:100%}
.megamenu-lists{width:100%;display:table}
.megamenu-list{width:100%;margin:0 0 15px;padding:0;display:inline-block;float:left;list-style:none}
.megamenu-list:last-child{margin:0;border:none}

.navigation-landscape .megamenu-list{margin:-15px 0;padding:20px 0;border-right:solid 1px #f0f0f0}
.navigation-landscape .megamenu-list:last-child{border:none}

.megamenu-list>li>a{width:100%;padding:10px 15px;display:inline-block;color:#343a40;text-decoration:none;font-size:13px;}
.megamenu-list>li>a:hover{background-color:#c00;color:#fff}
.megamenu-list>li.megamenu-list-title>a{font-size:12px;font-weight:600;text-transform:uppercase;color:#343a40}
.megamenu-list>li.megamenu-list-title>a:hover{background-color:transparent}

.navigation-landscape .list-col-2{width:50%}
.navigation-landscape .list-col-3{width:33%}
.navigation-landscape .list-col-4{width:25%}
.navigation-landscape .list-col-5{width:20%}

.nav-menu > li > a{color:#343a40;text-transform:uppercase;}
.nav-dropdown > li > a{color:#343a40;padding:10px 20px;border-bottom:1px solid #f6f6f6;}
.nav-dropdown > li > a:hover,.nav-dropdown > li > a:focus{color:#c00;}
.main_header_area.sticky{width:100%;position:fixed;top:0;left:0;background-color:#fff;z-index:9999;box-shadow:0 5px 30px rgba(0,0,0,0.1);}
.transparent-menu{position:absolute;width:100%;left:0;top:0;z-index:99;}
.navigation-portrait .nav-menu > li > a{width:100%;height:auto;padding:10px 10px 10px 30px;}


/* 20201215 updata */
/**/
.tp_links { padding:14px 0;}
.tp_links a { display:inline-block !important; padding:0 3px !important; color:#333;}
.tp_links a:before { content:''; display:block; background:no-repeat center center; width:24px; height:24px;}
.tp_links a.me_tp_fb:before { background-image:url(../images/facebook-f.svg);}
.tp_links a.me_tp_line:before { background-image:url(../images/line.svg);}
.tp_links a.me_tp_call:before { background-image:url(../images/whatsapp.svg);}
.tp_links a.me_tp_mail:before { background-image:url(../images/envelope.svg);}

/**/
.me_tp_features { position:absolute; top:10px; right:10px; width:100%; text-align:right;}
.me_tp_features a { display:inline-block; vertical-align:middle; margin:0 5px; font-size:14px;}
.me_tp_features a i.fa { margin:0 3px;}
.me_tp_features a.tp_btn_cart {}
.me_tp_features a.tp_btn_notice {}

/*Sreach*/
.box_search { position:relative; display:inline-block; vertical-align:middle; width:160px; height:30px;}
.shop_search_txt { background:#fff; color:#666; border:none; border-radius:20px; padding:6px 60px 6px 10px; position:absolute; top:0; right:0; z-index:1; font-size:15px; height:19px;}
.shop_search_btn { background:#000; color:#fff; font-size:15px; border:none; border-radius:20px; position:absolute; top:0; right:0; z-index:5; padding:5px 15px; cursor:pointer;}
.box_search a { display:none !important;}
.box_search input[type=text] {
	-webkit-appearance: textfield;
	-webkit-box-sizing: content-box; 	
	background: url(../images/search-icon.png) no-repeat 9px center #fff;
	border: solid 1px #ccc;
	padding: 5px 10px 5px 32px;
	width:110px;
	border-radius: 10em;
	transition: all .5s;
	outline:none;
}
.box_search input[type=text]:focus { color:#e63917; width:160px;}

@media (max-width: 768px){
.header_area.sticky { position:relative;}
.nav-header { position:static; text-align:center;}
.nav-menu { padding: 0 10px; margin:0;}
.navigation-portrait .nav-menu > li > a { padding: 10px;}

.nav-menu>li.tp_links { display:none;}
.tp_links a { width:auto !important; margin-right:15px;}

.me_tp_features { position:static; padding:7px;}
.me_tp_features a { display:none;}

.box_search { width:100%;}
.box_search input[type=text] { position:static; width:100%; height:31px;  box-sizing: border-box;}
.box_search input[type=text]:focus { width:100%;}
}
@media only screen and (min-width:320px) and (max-width:767px){
/* 可以不讓 左邊按鈕感應滑動 */
.nav-dropdown > li > a,
.megamenu-list > li > a{width:100%;}
.nav-dropdown>li,
.nav-dropdown>li>a { float:none;}
}