@charset "utf-8";
/*舒芙鎂 CSS Document */
* { margin:0; padding:0;}

/**/
.fl{float:right;}
.fr{float:left;}

#nav_container{width:100%;height:0px;position:relative;top:20px; z-index:999;background: #fff000}
.header{width:100%;height:0px;position:relative; z-index:999;}


.header .cart_block{width:115px;height: auto;right:30px;top:0; position: absolute;padding:0 0.7em;border-radius: 7px;background: rgba(0,0,0,0.3);}
.header .cart_block a span{color:#ffffff;font-weight: 700;vertical-align: middle;padding:0.2em 0 0 0;}
.header .cart_block .IQuantity_block{width:90px; position: relative;}
.header .cart_block .IQuantity_block .strAmount{position: absolute;right:-5px;top:-24px;z-index: 1; font:1.2rem "微軟正黑體";font-weight:700;padding:1px 6px;display: inline-block;border-radius: 50px;color:#ffffff;background:#ff6600;}



.header .left{width:140px; margin: 0; padding:0;/*display: flex;flex-wrap: wrap;justify-content:center;align-content:  space-between;align-items:center;*/ height: auto;}
.header .left .img1{height:auto;position:absolute;left:30px;top:0;}
.header .left .img2{display:none}

.header .nav{width:630px; /*float: left;*/position:absolute;margin:0px;right:200px;padding:0;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s;height:auto;}

.header .navbar_nav{padding: 0;margin: 0;}
.header .navbar_nav li{float:left;position:relative;display:block;text-align: left;}

.header .navbar_nav li a{text-decoration:none;height:100%;display:block;}
.header .navbar_nav li .title{padding:0.3em 1.3em;color:#092f74;font:1.8rem "微軟正黑體";font-weight:700;}

.header .navbar_nav li:hover a{color:#3a3a3a;display:inline-block;/*padding:0.3em 1.3em;background:rgba(255,255,255,0.7);border-radius: 25px;*/animation-name: flipInX;animation-duration: 1s;animation-iteration-count:  1;animation-direction: alternate;}
.header .navbar_nav li.dropdown{/*margin:0em 0.5em;*/display:inline-block; }

@-webkit-keyframes flipInX {
0%{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}
0%,40%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
40%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg)}
60%{-webkit-transform:perspective(400px) rotateX(10deg);transform:perspective(400px) rotateX(10deg);opacity:1}
80%{-webkit-transform:perspective(400px) rotateX(-5deg);transform:perspective(400px) rotateX(-5deg)}
to{-webkit-transform:perspective(400px);transform:perspective(400px)}	
	
}

.header .navbar_nav li.dropdown .dropdown_menu{font:1.6rem "微軟正黑體";font-weight:700;color:#000000;display:none;position:absolute;top:auto;background:rgba(255,255,255,0.8);width:auto;min-width:130px ; left:50%;transform: translate(-50%, 0);padding:0.5em 0;/*opacity:.9;border:#eeeeee 1px solid;filter:alpha (opacity=90);*/border-radius:7px;}
.header .navbar_nav li.dropdown .dropdown_menu ul{padding:0;margin:0;}
.header .navbar_nav li.dropdown .dropdown_menu ul li{clear: both; width:100%;padding:0;margin:0;display: block;color:#fff;}
.header .navbar_nav li.dropdown .dropdown_menu ul li div{width:100%;padding:0;margin:0;display: block;color:#fff}
.header .navbar_nav li.dropdown:hover .dropdown_menu{color:#fff;display:block;font:1.6rem "微軟正黑體";font-weight:700;width:100%;display: block}
.header .navbar_nav li.dropdown:hover .dropdown_menu a{color:#3a3a3a;display:block;width:100%;display: block;padding:0.2em 1em}
.header .navbar_nav li.dropdown:hover .dropdown_menu a:hover{color:#000;}

/*.header .navbar_nav li.dropdown span{background:url(../images/arrow.svg)  no-repeat;height:20px;width:20px;display:inline-block;text-indent:-9999px;text-align:left;}*/

/*menu_fixed*/
.header.on{background:#ff6600;height: auto; padding:5px 0;box-shadow: 0 0 8px 3px rgba(0,0,0,0.4)}
.header.on .left .img1{display:none}
.header.on .left .img2{display:inline-block;}
.header.on .navbar_nav li a{color:#333}
.header.on .navbar_nav li:hover a{color:#4a007d}

.header.on .navbar_nav li.dropdown span{background:url(../images/arrow_block.svg)  no-repeat;height:20px;width:20px;display:inline-block;text-indent:-9999px;text-align:left;}


#navToggle{display:none}
.m_nav{display:none}


@media only screen and (max-width: 959px) {
.header .cart_block{display: none;}  
/**/    
#bottom-bar{display:block;width:100%;height:auto;padding:0 0 0 0; background:#ffffff;border-top: 1px solid rgba(0,0,0,0.2); bottom:0px;position:fixed;z-index:1001;}
#bottom-bar a{color:rgba(0,0,0,0.7);}
#bottom-bar a:hover{color:#2e58a6;}

#bottom-bar #bottom-bar_block{width:calc(100% - 0.5em); display: flex;flex-wrap: wrap;justify-content:flex-start;align-content:  space-between;align-items:stretch;  height: auto;padding:0.2em;}
#bottom-bar #bottom-bar_block:after {content:''; clear:both; display:block;}	
	
#bottom-bar #bottom-bar_block .Mob_button{width:calc((100%/4) - 1em);margin: 0 0.5em;font: 1.5rem "微軟正黑體";font-weight: 700; text-align:center;}

.icon_block{width:40px;position: relative;left:50%;}
.icon_block .strAmount{position: absolute;left:0 ;top:-6px;z-index: 1; font:1.2rem "微軟正黑體";font-weight:700;padding:1px 6px;display: inline-block;border-radius: 50px;color:#ffffff;background:#c60b17;border:1px solid #ffffff;}

/**/
a #top_info_button_block{width:calc(100% - 1em);height:auto;cursor: pointer;margin: 0.5em 0.5em 0 0.5em;padding:0.5em 0px;text-align: center;background: rgba(0,0,0,0.5);color:#fff;border-radius: 5px;}
a:hover #top_info_button_block{background: #000;color:#fff;padding:1em auto;}    
   
    
    
    
/**/
	
.m_nav{display:block}
.m_nav{position:fixed;top:0;width:270px;height:100%;background:#fff url(../images/m_nav_bg.jpg) no-repeat left top;transition:all ease .5s;-webkit-transition:all ease .5s;z-index:1000;opacity:1;visibility:visible;margin-top:0;overflow-y:auto;transition:all .6s cubic-bezier(.77,0,.175,1) 0;top:0;transform:translateX(-270px);z-index:10000}
.m_nav.open{transform:translateX(0)}
.m_nav .top{height:60px;padding:20px;box-sizing:border-box}

/*add*/
.m_nav_block{display:none;position:fixed;top:0;left:0;width:100%;height: 100%;background: rgba(0,0,0,0.3);z-index:0}
.m_nav_block .closecover{position:absolute;width:100vw !important;height:100vh !important;background:#0b0d19;filter:alpha(opacity=0);opacity:0;left:0;top:0;z-index:1000}
/*add*/
.m_nav .top .closed{width:30px;height:30px;vertical-align:middle;float:right;cursor:pointer}
.m_nav .dropdown span{color:#1476bc;}

	
.m_nav .m_naber_t_lang{width:100%;text-align: center; padding:0.3em 0.5em 0 0.5em;margin-bottom: 0.2em;}
.m_nav .m_naber_t_lang .m_logo{width:100%;border-bottom: 1px solid #2e58a6;}
	
	
.m_nav .ul{color:#000000;}
.m_nav .ul li{padding:0 0px;transform:translateY(0);-webkit-transform:translateY(100%);transform:translateY(100%);-webkit-transition:all .6s cubic-bezier(.77,0,.175,1) 0;transition:all .6s cubic-bezier(.77,0,.175,1) 0;opacity:0}
.m_nav.open .ul li{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}
.m_nav .ul li:nth-child(1){-webkit-transition:all .2s cubic-bezier(.77,0,.175,1) 0;transition:all .2s cubic-bezier(.77,0,.175,1) 0}
.m_nav .ul li:nth-child(2){-webkit-transition:all .4s cubic-bezier(.77,0,.175,1) 0;transition:all .4s cubic-bezier(.77,0,.175,1) 0}
.m_nav .ul li:nth-child(3){-webkit-transition:all .6s cubic-bezier(.77,0,.175,1) 0;transition:all .6s cubic-bezier(.77,0,.175,1) 0}
.m_nav .ul li:nth-child(4){-webkit-transition:all .8s cubic-bezier(.77,0,.175,1) 0;transition:all .8s cubic-bezier(.77,0,.175,1) 0}
.m_nav .ul li:nth-child(5){-webkit-transition:all 1s cubic-bezier(.77,0,.175,1) 0;transition:all 1s cubic-bezier(.77,0,.175,1) 0}
.m_nav .ul li:nth-child(6){-webkit-transition:all 1.2s cubic-bezier(.77,0,.175,1) 0;transition:all 1.2s cubic-bezier(.77,0,.175,1) 0}
.m_nav .ul li a{display:block;text-decoration:none;font:1.7rem "微軟正黑體";font-weight: 600;color:#a88467;width:100%;padding:0.7em 1em;}
.m_nav .ul li .dropdown_menu{display:none}
.m_nav .ul li.dropdown.active .dropdown_menu{display:block}
.m_nav .ul li .dropdown_menu a{display:block;font:1em "微軟正黑體";font-weight: 600;color:rgba(0,0,0,0.8);padding:0em 1.2em 0.5em 1em;box-sizing:border-box;}
.m_nav .ul li .dropdown_menu a:last-child{border:none}

.m_nav ul li a:visited{padding:0;color:#000000;text-decoration:none;}


.m_nav ul li a:not(:only-child){font:1.7rem "微軟正黑體";font-weight: 600;color:rgba(0,0,0,1); vertical-align:middle;background:url(../images/arrow_mob.svg) no-repeat right 0.8em top 20px;}
.m_nav ul li a:visited:hover:not(:only-child){display:block;color:#000000; vertical-align:middle;}

.m_nav ul li ul li{clear: both; font:1.6rem "微軟正黑體";font-weight: 600;height:auto;margin-left:0em;margin-top:0em;color:#ff6600;vertical-align:middle;background:url(../images/left_sub_arrow.svg) no-repeat 0em 0em;}
.m_nav ul li ul li a{height:auto;color:#897272;vertical-align:middle;}
			
	}

@media screen and (max-width:959px) {
#nav_container{width:100%;height:0px;position:relative;top:0px; z-index:999;background: #fff000}
    
.header{width:100%; position:fixed;top:0;left:0;z-index:999;height:calc(47px + 20px);padding:0;background:rgba(255,255,255,1);box-shadow:3px 3px 3px rgba(0,0,0,0.3);}
.header .left{width:calc(100% - 100px); height:auto; margin:10px 0 0 13px;background: rgba(0,24,25,0);}	
.header .left .img1{display:none;}
	
.header .left .img2{display:inline-block;}
.header .left .img2 .M_cart_block{width:100%;background: rgba(22,0,255,0);}
.header .left .img2 .M_cart_block .Mlogo{width:100%;padding:0; background: rgba(0,24,25,0);}	
	
.header #navToggle{height:auto;padding:9px 13px; margin:10px -13px 0 10px;display:inline-block;border-radius:7px ; float:left; background: rgba(0,24,25,0.2);}
.header #navToggle span{position:relative;width:23px;height:2px;margin:14px 0}
.header #navToggle span:before,.header #navToggle span:after{content:'';position:relative;width:100%;height:2px;left:0}
.header #navToggle span,.header #navToggle span:before,.header #navToggle span:after{-webkit-transition:.3s;-moz-transition:.3s;-o-transition:.3s;transition:.3s;display:block;background:#3a3a3a}
.header #navToggle span:before{top:8px}
.header #navToggle span:after{bottom:10px}
.header #navToggle.open span:before{top:10px;-webkit-transform:translateY(-11px) rotate(-45deg);-moz-transform:translateY(-11px) rotate(-45deg);-ms-transform:translateY(-11px) rotate(-45deg);-o-transform:translateY(-11px) rotate(-45deg);transform:translateY(-11px) rotate(-45deg)}
.header #navToggle.open span:after{bottom:12px;-webkit-transform:translateY(10px) rotate(45deg);-moz-transform:translateY(10px) rotate(45deg);-ms-transform:translateY(10px) rotate(45deg);-o-transform:translateY(10px) rotate(45deg);transform:translateY(10px) rotate(45deg)}
.header #navToggle.open span{background:0 0}
.header #navToggle.open span:before,.header #navToggle.open span:after{background:#ffffff}
.header .nav{display:none}
.banner img{height:600px;object-fit:cover}

}
@media screen and (max-width:420px) {
	.header .left .img2{/*max-width: 100%;*/margin-top:0;}	
}