@import url(reset.css);

body {
    width:100%;
    margin: 0px auto;
    padding: 0px;
    font-family: '微軟正黑體';        
}

a:focus,a:hover{
    text-decoration:none;
    color:#FFFFFF;
}

#wrapper{
    /*width: 100vw;*/
    /*height: 712px;*/
    border: solid;
    border-color: lightgray;
    border-width: 2px;
    background-image:url(../images/red.png);    
    background-repeat: no-repeat; 
    background-position:top;
    max-width: 455px;
    margin: 0 auto;
    display: block;
    overflow: hidden;     
}

.sideMenu {
    z-index: 99999;
    position: absolute;
    display: block;
    /*bottom: 205px;*/
    width: 15px;
    /* right: 660px; */
    top: 214px;
    left: 360px;
    right: 0px;
}
.side-bg01{
	background-color: #fb4c7d;
}
.side-bg02{
	background-color: #fd8f36;
}
.sideMenu01{	
    color: #fff;
    padding: 12px 28px 12px 10px;
    line-height: 1.3;
    font-size: 18px;
}
.sideMenu01 a{
	color:#fff;
}
.header{
    height: 288px;    
    /*margin-bottom: 10px;*/
    background-image:url(../images/pic.png);    
    background-repeat: no-repeat; 
    background-position:bottom;
}

.bg11{
    border-radius: 10px;
    width:300px;
}

.text{
    color:#000000；
}

.row{
    margin-top:68px;
    margin-left: 0px;
    margin-right: -9px;
}

.bg-info{    
    width:100%;
    height:35px;
    margin: 0 auto;
}

.block {
    clear: both;
}

.mShow {
    display: none;
}

.pShow {
    display: block;
}

.container{
    width:320px; 
    text-align:center; 
    /*20210730 margin-top:9px;*/
    margin-top:60px;
}

h3{
    font-size: 20px;
}

h4{
    font-size: 18px;
}

.box1 {  
  width:49%;
  background-image:url(../images/bg.jpg);  
  padding:0px 14px; 
  float:left;
  margin-right:1px;
}

.box2 {
  width:49%;
  float:left;
  background-image:url(../images/bg.jpg);
  padding:0px 14px;  
}

.box3 {
  width:49%;
  float:left;  
  background-image:url(../images/bg.jpg);
  padding:6px 14px;
  margin-right:1px;
}

.box4 { 
  width:49%; 
  float:left;  
  background-image:url(../images/bg.jpg);
  padding:6px 14px;
}

.mobile-icon{
    width: 31px;
    height: 19px;
    background-image: url(../images/phone.png);
    background-repeat: no-repeat;    
    background-size: 20px;
    display: inline-block;
    top: 2px;
    position: relative;
    color:#FFFFFF;
}
.tel-icon{
    width: 31px;
    height: 19px;
    background-image: url(../images/Order_phone.png);
    background-repeat: no-repeat;    
    background-size: 20px;
    display: inline-block;
    top: 2px;
    position: relative;
    color:#FFFFFF;
}

.bg_all_footer {    
    width: 100%;
    background: #484848;
    bottom: 0;
    /* position: fixed; */
    padding: 10px 0px 10px 0px;
    font-size: 12px;
    text-align: center;
    color: #ffffff;
    line-height: 18px;
}

.icon {
    text-decoration: none;
    border-bottom: none;
    position: relative;
}

em, i {
    font-style: italic;
}

section.special, article.special {
    text-align: center;
}

.icon.rounded.big {
    font-size: 2.5em;
    margin-bottom: 0.5em;
}

.icon.rounded {
    background-color: #383b43;
    border-radius: 100%;
    color: #ffffff;
    display: inline-block;
    height: 3.25em;
    line-height: 3.25em;
    text-align: center;
    width: 3.25em;
}

.row.\31 50\25 {
    margin: 0px 0 -1px -1em;
}

.\34 u, .\34 u\24 {
    width: 33.3333333333%;
    clear: none;
    margin-left: 0;
}


.wrapper.style1 .box {
    background-color: #fff;
    padding: 3em 2.5em;
}

.bg01{
    display: inline-block;
    background-image: url(bg); 
    width:220px;
}


#btnOpen{
    background-image: url(../images/bt.png);
    background-size:47%;    
    background-position: top center;
    background-repeat:no-repeat;   
}


span.noteFont {   
    /*20210730 remark color: #565252;*/
    font-size: 22px;
    /*text-align: right;*/  
}

span.noteFont2 {    
    /*line-height:27px;
    display: block;
    width: 280px;
    color: #565252;
    font-size: 19px;*/
    line-height:16px;
    display: block;
    width: 300px;
    color: black;
    font-size: 14px;
    font-weight:bold;
    text-align:center; 
    word-break: normal; 
    letter-spacing:1px;
    margin-top: 10px; 
    margin-bottom:10px;
    /*text-align: right;*/  
}


@media screen and (max-width: 1024px) and (min-width: 768px){
     /*.sideMenu {
        width: 70px;
        height: 70px;       
        right: 123px;
        top: 206px;        
    }*/
}

@media screen and (max-width: 501px) {
    .sideMenu {   
        left: 86%;       
    }
}
@media screen and (max-width: 374px) {
    /*.sideMenu {       
        width: 32px;
        height: 70px;
        right: 660px;
        top: 214px;
        left: 258px;
        right: 0px;
    }*/
    .bg11{
        width: 208px;
    }
    .container {
     width: auto; 
    text-align: center;
}
   span.noteFont2 {
     width: 227px;
    }
}

/*20210730 add*/
.noteFont3 {
    text-align:center; 
    font-size: 18px; 
    font-weight:900;
    color:#395398; 
}

.hypstyle01 {
    width:40px;
    margin-bottom:8px;
}
.hypstyle02{
    height:50px;
    background-position: center center;
    background-repeat: no-repeat;
    text-align:center;
    font-size:18px;
    font-weight:900;
    line-height:50px;
    color:white;
}
.btnimage01 {
    background-image: url(../images/btnActive.png) !important;
    background-size:200px;
    padding-right:26px;
}
.btnimage03 {
    background-image: url(../images/下單專.png) !important;
    background-size:155px;
}
.btnimage02 {
    background-image: url(../images/手機聯絡.png) !important;
    background-size:155px;
}
.tdd3 {
    display: block;
    text-align:center; 
    word-break: normal; 
    letter-spacing:1px;
    margin-top: 10px; 
    margin-bottom:10px;
}